.focus-frame{position:relative;overflow:hidden;container-type:size}.focus-frame>.focus-media{--s:max(min(100cqw / var(--fw), 100cqh / var(--fh)), 100cqw / var(--cw), 100cqh / var(--ch));width:calc(var(--s) * var(--iw));height:calc(var(--s) * var(--ih));left:clamp(100cqw - var(--s) * (var(--cx) + var(--cw)), (100cqw - var(--s) * var(--fw)) / 2 - var(--s) * var(--fx), -1 * var(--s) * var(--cx));top:clamp(100cqh - var(--s) * (var(--cy) + var(--ch)), (100cqh - var(--s) * var(--fh)) / 2 - var(--s) * var(--fy), -1 * var(--s) * var(--cy));position:absolute}@media (max-width:39.99rem){.focus-frame[data-narrow]>.focus-media{--fx:var(--nfx);--fy:var(--nfy);--fw:var(--nfw);--fh:var(--nfh)}.markup :is(.markup-region,.markup-tag)[data-off-narrow]{display:none}.markup-legend li[data-off-narrow]{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.markup-region{fill:color-mix(in oklab, var(--ember) 9%, transparent);stroke:var(--ember);stroke-width:2px;vector-effect:non-scaling-stroke;transition:fill .2s var(--ease-out), opacity .2s var(--ease-out)}.markup-tag{--tag:1.375rem;width:var(--tag);height:var(--tag);background-color:var(--ember);color:var(--iron);font-family:var(--font-mono);transition:opacity .2s var(--ease-out);border-radius:999px;place-items:center;font-size:.6875rem;font-weight:600;line-height:1;display:grid;position:absolute;box-shadow:0 1px 3px #14151a59}@media (min-width:64rem){.markup-tag{--tag:1.625rem;font-size:.75rem}}.markup-legend .markup-number{border:1.5px solid var(--ember);width:1.5rem;height:1.5rem;font-family:var(--font-mono);transition:background-color .2s var(--ease-out), color .2s var(--ease-out);border-radius:999px;flex-shrink:0;place-items:center;font-size:.6875rem;line-height:1;display:inline-grid}.markup-legend li:hover .markup-number{background-color:var(--ember);color:var(--iron)}.markup:has(.markup-legend li:hover) :is(.markup-region,.markup-tag){opacity:.3}:is(.markup:has(li[data-callout="1"]:hover) [data-callout="1"],.markup:has(li[data-callout="2"]:hover) [data-callout="2"],.markup:has(li[data-callout="3"]:hover) [data-callout="3"],.markup:has(li[data-callout="4"]:hover) [data-callout="4"],.markup:has(li[data-callout="5"]:hover) [data-callout="5"],.markup:has(li[data-callout="6"]:hover) [data-callout="6"],.markup:has(li[data-callout="7"]:hover) [data-callout="7"],.markup:has(li[data-callout="8"]:hover) [data-callout="8"]){opacity:1;fill:color-mix(in oklab, var(--ember) 22%, transparent)}@media (prefers-reduced-motion:no-preference){.markup[data-reveal=load] .markup-region{stroke-dasharray:1 1;animation:markup-draw .7s var(--ease-out) calc(.45s + var(--i) * .12s) both}.markup[data-reveal=load] .markup-tag{animation:markup-tag .45s var(--ease-spring) calc(.7s + var(--i) * .12s) both}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.markup[data-reveal=scroll] .markup-region{stroke-dasharray:1 1;animation:linear both markup-draw;animation-timeline:--markup;animation-range:entry calc(5% + var(--i) * 5%) entry calc(45% + var(--i) * 5%)}.markup[data-reveal=scroll] .markup-tag{animation:linear both markup-tag;animation-timeline:--markup;animation-range:entry calc(15% + var(--i) * 5%) entry calc(50% + var(--i) * 5%)}.markup[data-reveal=scroll]{view-timeline:--markup block}}}@keyframes markup-draw{0%{stroke-dashoffset:1px;fill-opacity:0}}@keyframes markup-tag{0%{opacity:0;scale:.4}}