.hd{--line:var(--mystic-300);--pulse:var(--blue-500);--chip:#fff;--chip-edge:var(--mystic-200);--chip-ink:var(--home-field-ink,var(--foreground));--bar:var(--mystic-100);place-items:center;display:grid;position:absolute;inset:0;container:handoff/size}.dark .hd{--line:var(--mystic-700);--pulse:var(--blue-400);--chip:var(--mystic-800);--chip-edge:var(--mystic-700);--bar:var(--mystic-700)}.hd-stage{--u:calc(100cqw / 520);aspect-ratio:520/300;width:min(100cqw - 48px,173.333cqh - 97.0667px);position:relative;container-type:inline-size}.hd-art,.hd-dests{position:absolute;inset:0}.hd-card{top:calc(84 * var(--u));justify-content:center;gap:calc(10 * var(--u));width:calc(164 * var(--u));height:calc(132 * var(--u));padding-inline:calc(14 * var(--u));border:1px solid var(--chip-edge);border-radius:calc(12 * var(--u));background:var(--chip);color:var(--chip-ink);flex-direction:column;display:flex;position:absolute;left:0}.hd-card-title{margin-bottom:calc(2 * var(--u));font-size:max(10px, calc(12 * var(--u)));font-weight:500;line-height:1}.hd-card-row{align-items:center;gap:calc(8 * var(--u));display:flex}.hd-card-at{background:color-mix(in oklab, var(--brand-ink) 10%, transparent);color:var(--brand-ink);font-family:var(--font-mono);font-size:max(9px, calc(10 * var(--u)));border-radius:.4em;padding:.25em .45em;line-height:1}.hd-card-bar{height:calc(6 * var(--u));background:var(--bar);border-radius:999px;flex:1}.hd-card-row:nth-child(3) .hd-card-bar{margin-right:24%}.hd-card-row:nth-child(4) .hd-card-bar{margin-right:12%}.hd-hub{top:calc(122 * var(--u));left:calc(214 * var(--u));z-index:1;width:calc(56 * var(--u));height:calc(56 * var(--u));border-radius:calc(14 * var(--u));background:var(--blue-500);color:#fff;place-items:center;display:grid;position:absolute}.hd-hub:after{border:2px solid var(--blue-500);border-radius:inherit;content:"";opacity:0;position:absolute;inset:0}.hd-hub-mark{width:calc(30 * var(--u));height:calc(30 * var(--u))}.hd-wires{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.hd-wires-compact{display:none}.hd-wire{fill:none;stroke:var(--line);stroke-width:1.5px}.hd-pulse{fill:none;stroke:var(--pulse);stroke-width:3px;stroke-linecap:round;stroke-dasharray:.12 2;stroke-dashoffset:.12px;opacity:0}.hd-feed{stroke-dasharray:.3 2;stroke-dashoffset:.3px}.hd-dests{margin:0;padding:0;list-style:none}.hd-dest{top:calc((38 + var(--i) * 56 - 19) * var(--u));left:calc(340 * var(--u));align-items:center;gap:calc(9 * var(--u));width:calc(180 * var(--u));height:calc(38 * var(--u));padding-inline:calc(12 * var(--u));border:1px solid var(--chip-edge);border-radius:calc(10 * var(--u));background:var(--chip);color:var(--chip-ink);font-size:max(11px, calc(15 * var(--u)));letter-spacing:-.01em;white-space:nowrap;display:flex;position:absolute}.hd-dest:after{border:1px solid color-mix(in oklab, var(--success) 40%, transparent);border-radius:inherit;content:"";position:absolute;inset:-1px}.hd-dest-mark{width:max(12px, calc(16 * var(--u)));height:max(12px, calc(16 * var(--u)));display:grid}.hd-dest-mark svg{width:100%;height:100%}.hd-tick{width:max(12px, calc(15 * var(--u)));height:max(12px, calc(15 * var(--u)));color:var(--success);margin-left:auto}@media (prefers-reduced-motion:no-preference){.hd :is(.hd-feed,.hd-out,.hd-hub,.hd-tick),.hd .hd-hub:after,.hd .hd-dest:after{animation-duration:7s;animation-iteration-count:infinite;animation-fill-mode:both}.hd-feed{animation-name:hd-feed}.hd-hub{animation-name:hd-bump}.hd-hub:after{animation-name:hd-ring}.hd-out{animation-name:hd-out;animation-delay:calc(var(--i) * .21s)}.hd-tick{animation-name:hd-tick;animation-delay:calc(var(--i) * .21s)}.hd-dest:after{animation-name:hd-lit;animation-delay:calc(var(--i) * .21s)}}@keyframes hd-feed{0%,6%{opacity:0;stroke-dashoffset:.3px;animation-timing-function:cubic-bezier(.65,0,.35,1)}6.5%,17.5%{opacity:1}18%,to{opacity:0;stroke-dashoffset:-1px}}@keyframes hd-bump{0%,17%{animation-timing-function:cubic-bezier(.23,1,.32,1);transform:none}19%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:scale(1.06)}23%,to{transform:none}}@keyframes hd-ring{0%,17%{opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1);transform:scale(1)}18%{opacity:.6}27%,to{opacity:0;transform:scale(1.6)}}@keyframes hd-out{0%,20%{opacity:0;stroke-dashoffset:.12px;animation-timing-function:cubic-bezier(.65,0,.35,1)}20.5%,35%{opacity:1}35.5%,to{opacity:0;stroke-dashoffset:-1px}}@keyframes hd-tick{0%,35.5%{opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);transform:scale(.6)}38.5%,86%{opacity:1;transform:none}90%,to{opacity:0;transform:none}}@keyframes hd-lit{0%,35.5%{opacity:0}38.5%,86%{opacity:1}90%,to{opacity:0}}@container handoff not (min-width:448px){.hd-stage{--u:calc(100cqw / 320);aspect-ratio:320/300;width:min(100cqw - 40px,106.667cqh - 59.7333px)}.hd-card,.hd-wires-wide{display:none}.hd-wires-compact{display:block}.hd-hub{left:0}.hd-dest{left:calc(130 * var(--u));width:calc(190 * var(--u))}}
.ob{place-items:center;margin:0;padding-block:28px;display:grid;position:absolute;inset:0;container:observations/size}.ob-stage{--u:calc(100cqw / 600);aspect-ratio:600/396;width:min(100cqw - 48px,151.515cqh);position:relative;container-type:inline-size}.ob-art,.ob-roll,.ob-view{position:absolute;inset:0}.ob-roll{opacity:0}.ob-photo{--dx:calc(29 + var(--sc) * 41.96 - 50 - var(--c) * 1000 / 26);--dy:calc(var(--sr) * 33.05 - var(--r) * 650 / 22);top:calc(var(--r) * 650 / 22 * var(--u));left:calc((50 + var(--c) * 1000 / 26) * var(--u));width:calc(1000 / 26 * var(--u));height:calc(650 / 22 * var(--u));position:absolute}.ob-shot{border-radius:calc(2.5 * var(--u));background:var(--foot-paper) var(--drawing) no-repeat;background-position:calc((100 + var(--c) * 1000 / 13) / (1200 - 1000 / 13) * 100%) calc(var(--r) * 650 / 11 / (720 - 650 / 11) * 100%);box-shadow:inset 0 0 0 1px var(--foot-edge);opacity:var(--o);background-size:1560% 1218.46%;position:absolute;inset:0}.ob-card{width:100%;height:calc(360 * var(--u));border-radius:calc(6 * var(--u));background:var(--foot-paper) var(--drawing) 0 0 / 100% 100% no-repeat;box-shadow:inset 0 0 0 1px var(--foot-edge);position:absolute;top:0;left:0}.ob-notes{width:100%;height:100%;position:absolute;inset:0}.ob-notes path{fill:none;stroke:color-mix(in oklab, var(--foot-ink) 55%, transparent);stroke-width:1.6px;stroke-dasharray:1 1}.ob-notes .ob-tri{fill:color-mix(in oklab, var(--foot-ink) 55%, transparent);stroke:none}.ob-notes text{fill:color-mix(in oklab, var(--foot-ink) 75%, transparent);font-size:20px}.ob-figure{font-family:var(--font-mono)}.ob-title{font-size:22px;font-weight:500}.ob-box{border:1.5px solid var(--foot-evidence);background:color-mix(in oklab, var(--foot-evidence) 14%, transparent);border-radius:3px;position:absolute}.ob-ping{border:1.5px solid var(--foot-evidence);border-radius:inherit;opacity:0;position:absolute;inset:-1.5px}.ob-tag{bottom:calc(100% + 3 * var(--u));border-radius:calc(3 * var(--u));background:var(--blue-500);color:#fff;font-size:max(9px, calc(9.5 * var(--u)));white-space:nowrap;align-items:center;gap:.45em;padding:.38em .6em;font-weight:500;line-height:1;display:flex;position:absolute;left:-1.5px}.ob-tag-end{left:auto;right:-1.5px}.ob-tag-at{color:var(--blue-100);font-family:var(--font-mono);font-weight:400}.ob-corners{top:calc(-10 * var(--u));left:calc(-10 * var(--u));width:calc(620 * var(--u));height:calc(380 * var(--u));fill:none;stroke:color-mix(in oklab, var(--home-field-ink) 55%, transparent);stroke-width:1.5px;vector-effect:non-scaling-stroke;position:absolute;overflow:visible}.ob-track{top:calc(370 * var(--u));width:100%;height:calc(26 * var(--u));border-radius:calc(6 * var(--u));background:var(--foot-paper);box-shadow:inset 0 0 0 1px var(--foot-edge);position:absolute;left:0;overflow:hidden}.ob-wave{width:100%;height:100%;position:absolute;inset:0}.ob-wave path{fill:none;stroke:var(--foot-wave);stroke-width:2px;stroke-linecap:round;vector-effect:non-scaling-stroke}.ob-wave-read{clip-path:inset(0 14.33% 0 0)}.ob-wave-read path{stroke:var(--foot-evidence)}.ob-rec{top:50%;left:calc(7 * var(--u));align-items:center;gap:calc(4 * var(--u));color:var(--foot-ink);font-family:var(--font-mono);font-size:max(8px, calc(8.5 * var(--u)));opacity:0;line-height:1;display:flex;position:absolute;translate:0 -50%}.ob-rec-dot{width:calc(6 * var(--u));height:calc(6 * var(--u));background:var(--destructive);border-radius:50%}.ob-head{top:calc(-4 * var(--u));width:1.5px;height:calc(404 * var(--u));background:var(--foot-evidence);translate:calc(514 * var(--u)) 0;border-radius:1px;position:absolute;left:-.75px}.ob-head:before{top:calc(-3 * var(--u));width:calc(7 * var(--u));height:calc(7 * var(--u));background:var(--foot-evidence);content:"";border-radius:50%;position:absolute;left:50%;translate:-50%}@media (prefers-reduced-motion:no-preference){.ob :is(.ob-roll,.ob-photo,.ob-shot,.ob-view,.ob-corners,.ob-notes path,.ob-notes text,.ob-box,.ob-ping,.ob-tag,.ob-rec,.ob-wave,.ob-head){animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both}.ob-roll{animation-name:ob-roll}.ob-photo{animation-name:ob-fly;animation-delay:var(--fly)}.ob-shot{animation-name:ob-land;animation-delay:var(--pop)}.ob-view{animation-name:ob-view}.ob-corners{animation-name:ob-close}.ob-notes path{animation-name:ob-draw}.ob-notes text{animation-name:ob-ink}.ob-box{animation-name:ob-box;animation-delay:var(--at)}.ob-ping{animation-name:ob-ping;animation-delay:var(--at)}.ob-tag{animation-name:ob-tag;animation-delay:var(--at)}.ob-rec{animation-name:ob-rec}.ob-rec-dot{animation:.94s step-end infinite ob-blink}.ob-wave{animation-name:ob-record}.ob-wave-read{animation-name:ob-read}.ob-head{animation-name:ob-walk}}@keyframes ob-roll{0%,31.25%{opacity:1}32%,99%{opacity:0}to{opacity:1}}@keyframes ob-land{0%{opacity:0;filter:brightness(1.8);animation-timing-function:cubic-bezier(.23,1,.32,1);transform:scale(.8)}2.3%,50%{opacity:var(--o);filter:none;transform:none}50.1%,to{opacity:0}}@keyframes ob-fly{0%,20.8%{translate:calc(var(--dx) * var(--u)) calc(var(--dy) * var(--u));animation-timing-function:cubic-bezier(.23,1,.32,1);rotate:0deg;scale:1}24.2%{rotate:var(--spin);scale:1.14}27.5%,90%{translate:0;rotate:0deg;scale:1}91%,to{translate:calc(var(--dx) * var(--u)) calc(var(--dy) * var(--u));rotate:0deg;scale:1}}@keyframes ob-view{0%,28.3%{opacity:0}30.8%,86.7%{opacity:1}90.8%,to{opacity:0}}@keyframes ob-close{0%,28.3%{opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1);scale:1.08}32.5%,to{opacity:1;scale:1}}@keyframes ob-draw{0%,31.7%{stroke-dashoffset:1px;animation-timing-function:cubic-bezier(.65,0,.35,1)}36.7%,to{stroke-dashoffset:0}}@keyframes ob-ink{0%,34.2%{opacity:0}36.7%,to{opacity:1}}@keyframes ob-box{0%{opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);scale:1.5}3.5%,58.3%{opacity:1;scale:1}58.4%,to{opacity:0;scale:1}}@keyframes ob-ping{0%,.3%{opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1);scale:1}.4%{opacity:.55}5.2%,to{opacity:0;scale:1.9}}@keyframes ob-tag{0%,.5%{opacity:0;translate:0 calc(6 * var(--u));animation-timing-function:cubic-bezier(.23,1,.32,1)}3.5%,58.3%{opacity:1;translate:0}58.4%,to{opacity:0;translate:0}}@keyframes ob-rec{0%,26.7%{opacity:1}29.2%,99%{opacity:0}to{opacity:1}}@keyframes ob-blink{0%{opacity:1}60%{opacity:.2}}@keyframes ob-record{0%{clip-path:inset(0 100% 0 0);opacity:1}20%,86.7%{clip-path:inset(0);opacity:1}90.8%,99%{clip-path:inset(0);opacity:0}99.5%,to{clip-path:inset(0 100% 0 0);opacity:1}}@keyframes ob-read{0%,35%{clip-path:inset(0 90.17% 0 0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}40.8%,44.2%{clip-path:inset(0 68.25% 0 0);animation-timing-function:cubic-bezier(.65,0,.35,1)}48.3%,51.7%{clip-path:inset(0 58.75% 0 0);animation-timing-function:cubic-bezier(.65,0,.35,1)}58.3%,61.7%{clip-path:inset(0 14.33% 0 0);animation-timing-function:cubic-bezier(.65,0,.35,1)}65%,86.7%{clip-path:inset(0 7.5% 0 0);opacity:1}90.8%,99%{clip-path:inset(0 7.5% 0 0);opacity:0}to{clip-path:inset(0 90.17% 0 0);opacity:1}}@keyframes ob-walk{0%,33.3%{opacity:0;translate:calc(59 * var(--u)) 0}35%{opacity:1;translate:calc(59 * var(--u)) 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}40.8%,44.2%{translate:calc(190.5 * var(--u)) 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}48.3%,51.7%{translate:calc(247.5 * var(--u)) 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}58.3%,61.7%{translate:calc(514 * var(--u)) 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}65%{opacity:1;translate:calc(555 * var(--u)) 0}67.5%,to{opacity:0;translate:calc(555 * var(--u)) 0}}@container observations (not (min-width:500px)) or (not (min-height:324px)){.ob-stage{width:min(100cqw - 32px,151.515cqh)}.ob-tag,.ob-notes text{display:none}}
.so{--line:var(--mystic-300);--trace:var(--blue-500);--chip:#fff;--chip-edge:var(--mystic-200);--chip-ink:var(--home-field-ink,var(--foreground));place-items:center;margin:0;padding-block:28px;display:grid;position:absolute;inset:0;container:source/size}.dark .so{--line:var(--mystic-700);--trace:var(--blue-400);--chip:var(--mystic-800);--chip-edge:var(--mystic-700)}.so-stage{--u:calc(100cqw / 500);aspect-ratio:500/196;width:min(100cqw - 48px,255.102cqh);position:relative;container-type:inline-size}.so-art{position:absolute;inset:0}.so-player{width:calc(276 * var(--u));height:calc(196 * var(--u));border:1px solid var(--foot-edge);border-radius:calc(8 * var(--u));background:var(--foot-paper);isolation:isolate;position:absolute;top:0;left:0;overflow:hidden}.so-frame{height:calc(166 * var(--u));position:relative;overflow:hidden}.so-shot{background:var(--drawing) 0 0 / 100% 100% no-repeat;width:272.727%;height:272.727%;translate:var(--p1);position:absolute;top:0;left:0}.so-box{border:1.5px solid var(--foot-evidence);background:color-mix(in oklab, var(--foot-evidence) 14%, transparent);border-radius:2px;position:absolute}.so-box,.so-at,.so-said{opacity:0}.so-box.so-on,.so-at.so-on,.so-said.so-on{opacity:1}.so-at{top:calc(6 * var(--u));left:calc(6 * var(--u));padding:calc(2.5 * var(--u)) calc(4.5 * var(--u));border-radius:calc(3 * var(--u));background:var(--foot-hud);color:var(--foot-hud-ink);font-family:var(--font-mono);font-size:calc(8.5 * var(--u));line-height:1;position:absolute}.so-said{padding:calc(16 * var(--u)) calc(8 * var(--u)) calc(7 * var(--u));background:linear-gradient(transparent, var(--foot-scrim) 45%);color:var(--foot-ink);font-size:calc(9.5 * var(--u));text-overflow:ellipsis;white-space:nowrap;margin:0;line-height:1.3;position:absolute;inset:auto 0 0;overflow:hidden}.so-mark{background:var(--foot-said);color:inherit;border-radius:.2em;padding-inline:.12em;font-weight:500}.so-strip{height:calc(30 * var(--u));border-top:1px solid var(--foot-edge);position:absolute;inset:auto 0 0}.so-wave{width:100%;height:100%;position:absolute;inset:0}.so-wave path{fill:none;stroke:var(--foot-wave);stroke-width:1.5px;stroke-linecap:round;vector-effect:non-scaling-stroke}.so-tick{top:calc(7 * var(--u));bottom:calc(7 * var(--u));background:var(--foot-evidence);border-radius:1px;width:2px;margin-left:-1px;position:absolute}.so-head{translate:var(--h1) 0;position:absolute;inset:0}.so-head-line{top:calc(3 * var(--u));bottom:calc(3 * var(--u));background:var(--foot-head);width:2px;box-shadow:0 0 0 2px var(--foot-paper);border-radius:1px;position:absolute;left:-1px}.so-card{top:0;left:calc(300 * var(--u));width:calc(200 * var(--u));height:calc(196 * var(--u));border:1px solid var(--chip-edge);border-radius:calc(12 * var(--u));background:var(--chip);color:var(--chip-ink);position:absolute}.so-title{top:calc(12 * var(--u));left:calc(14 * var(--u));font-size:calc(11 * var(--u));font-weight:500;line-height:1;position:absolute}.so-row{top:calc((32 + var(--k) * 52) * var(--u));right:calc(6 * var(--u));left:calc(6 * var(--u));align-items:center;gap:calc(7 * var(--u));height:calc(48 * var(--u));padding-inline:calc(8 * var(--u));isolation:isolate;display:flex;position:absolute}.so-row:before{z-index:-1;border-radius:calc(8 * var(--u));background:color-mix(in oklab, var(--brand-ink) 9%, transparent);content:"";opacity:0;position:absolute;inset:0}.so-row.so-on:before{opacity:1}.so-chip{background:color-mix(in oklab, var(--brand-ink) 10%, transparent);color:var(--brand-ink);font-family:var(--font-mono);font-size:calc(9.5 * var(--u));border-radius:.45em;flex-shrink:0;padding:.35em .55em;line-height:1}.so-line{font-size:calc(10.5 * var(--u));text-wrap:pretty;line-height:1.3}.so-traces{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.so-traces-compact{display:none}.so-trace{fill:none;stroke:var(--trace);stroke-width:1.5px;stroke-dasharray:1 1;stroke-dashoffset:1px}.so-trace.so-on{stroke-dashoffset:0}@media (prefers-reduced-motion:no-preference){.so :is(.so-shot,.so-head,.so-box,.so-at,.so-said,.so-trace),.so .so-row:before{animation-duration:21s;animation-iteration-count:infinite;animation-fill-mode:both}.so-shot{animation-name:so-pan}.so-head{animation-name:so-seek}.so :is(.so-box,.so-at,.so-said){animation-name:so-seg;animation-delay:calc(var(--k) * 7s - 21s)}.so-trace{animation-name:so-trace;animation-delay:calc(var(--k) * 7s - 21s)}.so-row:before{animation-name:so-pick;animation-delay:calc(var(--k) * 7s - 21s)}}@keyframes so-pan{0%,16.2%{translate:var(--p2);animation-timing-function:cubic-bezier(.65,0,.35,1)}21%,49.5%{translate:var(--p0);animation-timing-function:cubic-bezier(.65,0,.35,1)}54.3%,82.9%{translate:var(--p1);animation-timing-function:cubic-bezier(.65,0,.35,1)}87.6%,to{translate:var(--p2)}}@keyframes so-seek{0%,16.2%{translate:var(--h2) 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}21%,49.5%{translate:var(--h0) 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}54.3%,82.9%{translate:var(--h1) 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}87.6%,to{translate:var(--h2) 0}}@keyframes so-seg{0%,18.1%{opacity:0}19.5%,49.5%{opacity:1}51%,to{opacity:0}}@keyframes so-pick{0%,16.2%{opacity:0}17.6%,49.5%{opacity:1}51%,to{opacity:0}}@keyframes so-trace{0%,19.5%{stroke-dashoffset:1px;animation-timing-function:cubic-bezier(.65,0,.35,1)}21.4%,49.5%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.65,0,.35,1)}50.5%,to{stroke-dashoffset:1px}}@container source (not (min-width:540px)) or (not (min-height:212px)){.so-stage{--u:calc(100cqw / 300);aspect-ratio:300/264;width:min(100cqw - 40px,113.636cqh)}.so-player{top:calc(50 * var(--u));width:100%;height:calc(212 * var(--u))}.so-frame{height:calc(180 * var(--u))}.so-strip{height:calc(32 * var(--u))}.so-card{width:100%;height:calc(40 * var(--u));background:0 0;border:0;top:0;left:0}.so-title,.so-traces-wide{display:none}.so-traces-compact{display:block}.so-row{height:100%;padding-inline:calc(10 * var(--u));border:1px solid var(--chip-edge);border-radius:calc(10 * var(--u));background:var(--chip);opacity:0;top:0;left:0;right:0}.so-row.so-on,.so-row:before{opacity:1}.so-row:before{border-radius:inherit}.so-line{white-space:nowrap}}@media (prefers-reduced-motion:no-preference){@container source (not (min-width:540px)) or (not (min-height:212px)){.so .so-row{animation:so-pick 21s calc(var(--k) * 7s - 21s) infinite both}.so .so-row:before{animation:none}}}