/* pantheon.inc's design language, from the landing repo (landing/app/globals.css, site-chrome.tsx):
   white paper under a fixed noise grain, ink and muted greys, 1px hairline rules instead of boxes,
   square media and controls (5px only on the main button, as the site's), controls joined edge to
   edge, DM Sans 400 for titles, Geist for text, Geist Mono 550 for numbers, 14px as the smallest
   type. Colour is kept for data only: the site's lime and cyan mark the left and right arms, as its
   data inspector marks the left and right wrists. */
@font-face { font-family:"Geist"; src:url("type/Geist-Latin.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("type/GeistMono-Latin.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"DM Sans"; src:url("type/DM-Sans.woff2") format("woff2"); font-weight:400; font-display:swap; }
:root {
  color-scheme:light;
  --bg:#ffffff; --paper-deep:#f0f3f6; --ink:#1c1c1a; --muted:#6c6b66; --muted-2:#8a8984; --faint:#6c6b66;
  --line:rgba(28,28,26,.22); --line-soft:rgba(28,28,26,.12); --soft:#f0f3f6; --white:#ffffff; --highlight:#24241f;
  --chart-dark:#3f3f3b; --chart-medium:#a3a39e; --accent:#1c1c1a; --warn:#b3263c;
  --left:#8f9231; --right:#3f8a7e;               /* text and lines; the twin uses the brighter lime and cyan */
  --left-fill:#b7ba55; --right-fill:#5ca196;
  --page-gutter:clamp(16px,8vw,160px); --header-gutter:clamp(16px,4vw,80px);
  --font-body:"Geist",Arial,Helvetica,sans-serif; --font-mono:"Geist Mono","SFMono-Regular",Consolas,monospace;
  --font-h1:"DM Sans","Geist",Arial,Helvetica,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background:var(--highlight); color:var(--white); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--font-body); -webkit-font-smoothing:antialiased; }
.grain { position:fixed; inset:-20%; pointer-events:none; z-index:2147483644; background-image:var(--grain); background-size:200px 200px;
         filter:contrast(80%); opacity:.2; }
.archived-frame-missing { display:none; }
.stage.archive-frame-missing .archived-frame-missing { position:absolute; inset:0; display:grid; place-items:center; background:var(--soft); color:var(--muted); font:16px var(--font-body); z-index:4; }
.stage.archive-frame-missing>img,.stage.archive-frame-missing>canvas,.stage.archive-frame-missing>.gpill,.stage.archive-frame-missing>.hint { visibility:hidden; }
.stage.archive-overlay-missing>canvas,.stage.archive-overlay-missing>.gpill,.stage.archive-overlay-missing>.hint { visibility:hidden; }
a { color:inherit; }
/* page loader, as pantheon.inc's (landing app/globals.css .page-loader): the page stays hidden from the
   first paint while the logo plays, then fades in as the loader goes */
.page-loader { position:fixed; inset:0; z-index:2147483645; display:flex; align-items:center; justify-content:center;
               background:var(--bg); opacity:0; transition:opacity 180ms ease; }
.page-loader--entered { opacity:1; }
.page-loader--exiting { opacity:0; pointer-events:none; }
.page-loader-video { display:block; height:auto; max-width:calc(100vw - 64px); width:clamp(58px,6vw,78px); transform:rotate(180deg); }
.site-header, .wrap { opacity:1; transition:opacity 120ms ease; }
body:has(> .page-loader:not(.page-loader--exiting)) > .site-header, body:has(> .page-loader:not(.page-loader--exiting)) > .wrap { opacity:0; pointer-events:none; }
#history-wrap { animation:fade-in 220ms cubic-bezier(.2,.6,.2,1); }
@keyframes fade-in { from { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .site-header, .wrap { transition-duration:0ms; } #history-wrap { animation:none; } }

/* header: the site's lockup on the left, plain 14px text links on the right */
.site-header { display:flex; align-items:center; justify-content:space-between; padding:16px var(--header-gutter); }
.brand { display:flex; align-items:center; gap:13px; height:44px; text-decoration:none; }
.nav { display:flex; gap:16px; font:400 14px/1.4 var(--font-body); }
.nav button { background:none; border:0; padding:4px 0; font:inherit; color:var(--muted-2); cursor:pointer; transition:color 240ms ease; }
.nav button.on, .nav button:hover { color:var(--ink); }
.nav button.on { text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.nav button:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

.wrap { width:100%; max-width:1260px; margin:0 auto; padding:76px var(--page-gutter) 0; flex:1; }
body { min-height:100svh; display:flex; flex-direction:column; }
@media (min-width:1500px) { .wrap { padding:76px 0 0; } }
.intro { padding:52px 0 30px; border-bottom:1px solid var(--line); }
.intro {position:relative;}
.presentation-reference,.presentation-add {display:none;}
.presentation-reference {align-items:center;justify-content:space-between;min-height:34px;margin-bottom:8px;font-size:14px;}
.presentation-reference details {position:relative;}
.presentation-reference summary {font:13px var(--font-mono);cursor:pointer;list-style:none;border-bottom:1px dotted var(--muted);}
.presentation-reference summary::-webkit-details-marker {display:none;}
.presentation-reference p {position:absolute;right:0;top:20px;width:260px;background:var(--bg);border:1px solid var(--line);padding:14px;margin:0;font-size:12px;line-height:1.6;z-index:15;}
.presentation .presentation-reference {display:flex;}
.presentation .stage-head,.presentation #tl,.presentation .joint-toolbar,.presentation #joints,.presentation #heads,.presentation #history-wrap,.presentation #t2,.presentation #t3,.presentation #t-real,.presentation #gl,.presentation #ov,.presentation .gpill,.presentation #hint,.presentation .bar .seg {display:none!important;}
.presentation .intro {padding-bottom:22px;}
.presentation .intro h1 {margin-bottom:0;}
.presentation main {grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;}
.presentation .tiles {gap:20px;}
.presentation .bar {margin-top:14px;}
.presentation .comparison-transport {margin-top:14px;}
.presentation #stage-real {transition-duration:160ms;}
.presentation-single main {grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.presentation-single .tiles {grid-template-columns:minmax(0,1fr);}
.presentation-single #t1 {display:none;}
.presentation-single .presentation-add {display:inline-block;margin-top:12px;}
@media (max-width:850px) {.presentation main {grid-template-columns:minmax(0,1fr);}.presentation .bar {justify-content:flex-end;}.presentation .comparison-transport {margin-top:12px;}}
.comparison-modes { margin-bottom:24px; }
.hf-owner { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--muted); font-size:12px; margin-top:12px; }
.hf-owner select { font:400 13px var(--font-body); background:transparent; border:0; color:var(--ink); max-width:160px; padding:4px 20px 4px 0; }
.intro h1 { font:400 clamp(34px,4.4vw,54px)/0.98 var(--font-h1); margin:0 0 16px; }
.dek { margin:0; max-width:820px; color:var(--muted); font-size:16px; line-height:1.6; }
.dek b { color:var(--ink); font-weight:500; }

main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; padding:30px 0 40px; }
@media (max-width:1100px) { main { grid-template-columns:minmax(0,1fr); } }
.col { min-width:0; }
/* side by side, the camera frame starts on the line where the dreams start, under their menus */
@media (min-width:1101px) { main > .col:first-child { padding-top:0; } }
.col-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px; min-height:30px; }
.col-head h2 { font:400 21px/1.2 var(--font-h1); margin:0; }
.col-head span { color:var(--muted); font-size:14px; }
.reground-control { margin:0 0 0 auto; display:inline-flex; align-items:center; gap:10px; min-height:58px; padding:9px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; user-select:none; transition:border-color .16s,background .16s; }
.reground-control:hover { border-color:var(--ink); }
.reground-control input { position:absolute; opacity:0; width:0; height:0; }
.reground-control svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.reground-copy { display:flex; flex-direction:column; gap:2px; }
.reground-copy strong { font-size:14px; font-weight:500; }
.reground-copy small { font-size:12px; color:var(--muted); }
.reground-state { font:500 12px var(--font-mono); min-width:24px; margin-left:8px; }
.reground-control:has(input:checked) { border-color:var(--ink); background:var(--paper-deep); }
.reground-control:has(input:disabled) { cursor:default; }
.reground-control:has(input:disabled) .reground-state { color:var(--muted); }
.stage-head { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-height:34px; margin-bottom:8px; font-size:14px; }
.frame-shuffle { display:flex; align-items:center; gap:8px; min-height:34px; padding:4px 10px 4px 4px; color:var(--ink); border:1px solid var(--line-soft); background:none; font:400 14px/1 var(--font-body); cursor:pointer; }
.frame-shuffle:hover { border-color:var(--ink); }
.frame-shuffle:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.frame-shuffle:disabled { opacity:.5; cursor:default; }
.frame-shuffle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.frame-reel-window { display:block; width:32px; height:24px; overflow:hidden; background:var(--paper-deep); }
#frame-reel { display:block; }
#frame-reel img { display:block; width:32px; height:24px; object-fit:cover; }
#scene-next { opacity:0; pointer-events:none; transition:opacity 280ms ease; }
body.frame-changing #stage { cursor:wait; }
body.frame-changing #gl, body.frame-changing .gpill { pointer-events:none; }

/* the twin over the start frame: square media with a hairline, labels in the site's camera-label style */
.stage { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#11130f; outline:1px solid var(--line); outline-offset:-1px; user-select:none; -webkit-user-select:none; }
.stage img, .stage canvas { position:absolute; inset:0; width:100%; height:100%; }
#ov { pointer-events:none; }
#gl { touch-action:none; transition:opacity .5s ease, filter .3s; }
/* a real recording plays on the stage itself: its video comes up and the twin fades out */
#stage-real { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; pointer-events:none; }
body.real-stage #stage-real { opacity:1; }
body.real-stage #gl { opacity:0; }
body.real-stage .gpill { opacity:0; pointer-events:none; }
.hint { position:absolute; left:10px; bottom:10px; pointer-events:none; background:rgb(10 12 9 / 78%); color:#eef0e9; font:400 14px/1.4 var(--font-body); padding:6px 9px; transition:opacity .4s; }
.hint.gone { opacity:0; }
.toast { position:absolute; left:50%; top:14px; transform:translate(-50%,-8px); background:var(--white); color:var(--ink); font:500 14px/1.4 var(--font-body); padding:9px 14px; border:1px solid var(--line); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; white-space:nowrap; }
.toast.on { opacity:1; transform:translate(-50%,0); }
.gpill { position:absolute; transform:translate(-50%,-50%); font:550 14px/1 var(--font-mono); color:#eef0e9; background:rgb(10 12 9 / 80%); border:0; border-left:3px solid; padding:7px 10px 7px 8px; cursor:pointer; white-space:nowrap; transition:opacity .15s, background .15s; }
.gpill.left { border-left-color:var(--left-fill); } .gpill.right { border-left-color:var(--right-fill); }
.gpill:hover { background:rgb(10 12 9 / 92%); }
body.locked #gl { cursor:not-allowed; }
.locknote { display:none; font-size:14px; color:var(--muted); margin-top:10px; }
body.locked .locknote { display:block; }
body.locked .gpill { opacity:0; pointer-events:none; }

#tl { width:100%; height:78px; display:block; cursor:ew-resize; touch-action:none; margin-top:14px; }
.bar { display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.spacer { flex:1; }
.seg { display:flex; }
.seg > button + button { border-left:0; }
button.ghost { border:1px solid var(--line); background:transparent; color:var(--ink); padding:8px 11px; border-radius:0; font:500 14px/1.4 var(--font-body); cursor:pointer; transition:background 160ms ease, color 160ms ease, border-color 160ms ease; }
button.ghost:hover:not(:disabled), button.ghost:focus-visible { background:var(--highlight); border-color:var(--highlight); color:var(--white); }
button.ghost:focus-visible { outline:2px solid var(--highlight); outline-offset:3px; }
body.locked #reset { background:var(--ink); color:var(--white); border-color:var(--ink); }
#reset.nudge { animation:nudge .5s ease-in-out 2; }
@keyframes nudge { 0%,100% { transform:none; } 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }
button.dream { background:var(--ink); color:var(--white); border:1px solid var(--ink); font:500 14px/1.4 var(--font-body); padding:9px 24px; border-radius:5px; cursor:pointer; transition:background 160ms ease, border-color 160ms ease; }
button.dream:hover:not(:disabled) { background:var(--highlight); border-color:var(--highlight); }
button.dream:focus-visible { outline:2px solid var(--highlight); outline-offset:3px; }
button:disabled { opacity:.38; cursor:default; }
button.dream.running { position:relative; color:transparent; opacity:1; cursor:progress; }
button.dream.running::after { content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .8s linear infinite; }
.status { font-size:14px; color:var(--muted); min-height:1.5em; margin-top:10px; }

/* a square check, as the site has no toggles */
.switch { display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); cursor:pointer; margin-top:4px; user-select:none; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch .track { width:15px; height:15px; border:1px solid var(--chart-dark); position:relative; flex:none; transition:background .16s; }
.switch .knob { position:absolute; inset:3px; background:var(--ink); transform:scale(0); transition:transform .16s; }
.switch input:checked + .track .knob { transform:scale(1); }
.switch input:focus-visible + .track { outline:2px solid var(--ink); outline-offset:2px; }
.motion-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 12px; }
.motion-head #reals { margin:0; }
.motion-head #reals,.motion-head .reground-control { width:220px; max-width:100%; height:60px; min-height:60px; }
.motion-head .recording-trigger.ghost { width:100%; height:100%; }
.motion-head .reground-copy { line-height:1.35; }
.reground-control .track { position:relative; flex:none; width:34px; height:20px; border:1px solid var(--muted); border-radius:12px; background:var(--paper-deep); transition:background .16s; }
.reground-control .knob { position:absolute; inset:3px auto auto 3px; width:12px; height:12px; border-radius:50%; background:var(--ink); transform:none; transition:transform .16s; }
.reground-control input:checked~.track { background:var(--ink); border-color:var(--ink); }
.reground-control input:checked~.track .knob { background:var(--white); transform:translateX(14px); }
.reground-control input:focus-visible~.track { outline:2px solid var(--ink); outline-offset:3px; }
.section-label { font-size:14px; color:var(--muted); margin:26px 0 10px; padding-top:14px; border-top:1px solid var(--line-soft); }
.reals-label { font-size:14px; color:var(--muted); margin:14px 0 8px; }
.reals { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px; }
@media (max-width:700px) { .reals { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.real { position:relative; overflow:hidden; cursor:pointer; outline:1px solid var(--line); outline-offset:-1px; transition:outline-color .15s; }
.real:hover { outline-color:var(--chart-dark); }
.real.on { outline:2px solid var(--ink); outline-offset:-2px; }
.recording-trigger.ghost { display:flex; align-items:center; gap:8px; height:100%; padding:8px 9px; white-space:nowrap; border-color:var(--line); border-radius:0; background:var(--white); text-align:left; }
.recording-trigger svg { fill:none; stroke:currentColor; stroke-width:1.2; }
.motion-source-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; color:var(--muted); }
.motion-source-icon svg { width:24px; height:24px; }
.motion-source-thumb { width:40px; height:32px; object-fit:cover; flex:none; }
.motion-source-copy { display:flex; flex-direction:column; gap:1px; min-width:0; }
.motion-source-title { font-weight:500; }
.motion-source-detail { font-size:14px; color:var(--muted); font-weight:400; }
.recording-trigger:hover .motion-source-detail, .recording-trigger:focus-visible .motion-source-detail, .recording-trigger:hover .motion-source-icon, .recording-trigger:focus-visible .motion-source-icon { color:inherit; }
.motion-source-chevron { width:12px; height:12px; margin-left:auto; flex:none; }
.motion-source-icon[hidden], .motion-source-thumb[hidden] { display:none; }
#reals { display:flex; margin-right:18px; }
.bar .seg { align-items:center; }
.seg #reals + button { border-left:1px solid var(--line); }
.bar { gap:8px; }
.bar .spacer { display:none; }
.bar .seg > button { padding-left:8px; padding-right:8px; }
.bar > .dream { margin-left:auto; }
@media (max-width:580px) { .bar .seg { width:100%; } .bar .seg > button, .bar .seg #reals { flex:1; } .bar .recording-trigger { width:100%; } .bar .spacer { display:none; } }
@media (max-width:580px) { .bar .motion-source-icon, .bar .motion-source-thumb { display:none; } #reals { margin-right:12px; } .recording-trigger.ghost { gap:6px; } }
.recording-picker { width:min(1040px,calc(100vw - 48px)); max-height:90svh; border:1px solid var(--line); background:var(--white); color:var(--ink); padding:28px; overflow:hidden; }
.recording-picker::backdrop { background:rgb(20 20 18 / 28%); backdrop-filter:blur(5px); }
.recording-picker[open] { animation:recording-enter 180ms ease-out; }
@keyframes recording-enter { from { opacity:0; transform:translateY(8px); } }
.recording-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.recording-head > div { display:flex; align-items:baseline; gap:16px; }
.recording-head h2 { font:400 28px/1.2 var(--font-h1); margin:0; }
.recording-close { display:grid; place-items:center; border:0; background:none; color:var(--muted); padding:8px; cursor:pointer; }
.recording-close svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.2; }
.recording-close:hover { color:var(--ink); background:var(--soft); }
.recording-close:focus-visible { outline:2px solid var(--ink); }
.recording-tools { display:flex; align-items:center; gap:24px; margin-bottom:24px; }
#recording-search { flex:1; min-width:0; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:10px 0; background:none; color:var(--ink); font:400 14px/1.4 var(--font-body); outline-offset:4px; }
#recording-search:focus { border-color:var(--ink); }
#recording-search::placeholder { color:var(--muted); }
.recording-browser { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.3fr); gap:28px; height:min(550px,calc(90svh - 176px)); }
.recording-list { min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--line-soft); padding-right:20px; }
.recording-columns { display:flex; justify-content:space-between; color:var(--muted); font-size:14px; padding:0 14px 10px 0; flex:none; }
.recording-columns span:last-child { flex:0 0 48px; }
.recording-grid { overflow:auto; min-height:0; scrollbar-width:thin; scrollbar-color:var(--line) transparent; padding-right:6px; overscroll-behavior:contain; }
.recording-card { display:grid; grid-template-columns:52px 30px minmax(0,1fr) 48px; align-items:center; gap:10px; width:100%; border:0; border-top:1px solid var(--line-soft); padding:12px 8px; background:none; cursor:pointer; text-align:left; color:var(--ink); font:400 14px/1.4 var(--font-body); transition:background 120ms ease; }
.recording-card img { display:block; width:52px; height:39px; object-fit:cover; }
.recording-card:hover { background:rgb(240 243 246 / 55%); }
.recording-card.on { background:var(--soft); box-shadow:inset 2px 0 var(--ink); }
.recording-card:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.recording-index { color:var(--muted); font:400 14px/1 var(--font-mono); }
.recording-row-label { display:flex; flex-direction:column; gap:2px; min-width:0; }
.recording-row-date { color:var(--muted); }
.recording-row-travel { text-align:left; white-space:nowrap; font-variant-numeric:tabular-nums; }
#recording-empty { color:var(--muted); font-size:14px; padding:24px 0; }
.recording-detail { display:flex; flex-direction:column; min-width:0; min-height:0; }
.recording-detail[hidden] { display:none; }
.recording-video { position:relative; flex:1; min-height:120px; max-height:420px; background:#11130f; overflow:hidden; }
#recording-video { display:block; width:100%; height:100%; object-fit:contain; }
#recording-play { position:absolute; left:12px; bottom:12px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid rgb(255 255 255 / 25%); background:rgb(10 12 9 / 65%); color:white; cursor:pointer; }
#recording-play svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
#recording-play:focus-visible { outline:2px solid white; outline-offset:2px; }
#recording-duration { position:absolute; right:12px; bottom:16px; color:white; font:400 14px/1.4 var(--font-mono); text-shadow:0 1px 3px #000; }
.recording-detail-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:18px; flex:none; }
.recording-detail-head h3 { font:400 20px/1.3 var(--font-h1); margin:0; }
#recording-selected-date { color:var(--muted); font-size:14px; }
.recording-facts { display:grid; grid-template-columns:1fr .7fr 1.2fr; gap:16px; margin:16px 0 22px; font-size:14px; flex:none; }
.recording-facts dt { color:var(--muted); margin-bottom:4px; }
.recording-facts dd { margin:0; }
#recording-use { align-self:flex-start; min-width:148px; flex:none; }
.recording-actions { display:flex; align-items:center; gap:20px; flex:none; }
@media (max-width:760px) {
 .recording-picker { width:calc(100vw - 24px); height:calc(100svh - 32px); max-height:none; padding:20px; }
 .recording-picker[open] { display:flex; flex-direction:column; }
 .recording-head { margin-bottom:16px; flex:none; }
 .recording-head > div { flex-direction:column; align-items:flex-start; gap:4px; }
 .recording-head h2 { font-size:24px; }
 .recording-tools { flex-wrap:wrap; gap:12px; margin-bottom:16px; flex:none; }
 #recording-search { flex-basis:100%; }
 .recording-browser { display:flex; flex-direction:column; gap:20px; height:auto; flex:1; min-height:0; }
 .recording-detail { order:0; flex:none; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
 .recording-video { grid-column:1/-1; height:clamp(140px,25svh,230px); }
 .recording-detail-head { padding-top:0; align-items:center; }
 .recording-detail-head h3 { font-size:18px; }
 #recording-selected-date { display:none; }
 .recording-facts { grid-column:1/-1; grid-row:3; margin:0; gap:10px; }
 .recording-facts dt { display:none; }
 .recording-actions { grid-column:1/-1; grid-row:4; gap:16px; }
 #recording-use { min-width:0; padding:8px 12px; }
 .recording-list { order:1; flex:1; min-height:100px; border-right:0; padding-right:0; }
 .recording-card { grid-template-columns:52px 30px minmax(0,1fr) 48px; padding:10px 8px; }
}
@media (max-width:380px) { .recording-picker { padding:16px; } .recording-facts { font-size:14px; grid-template-columns:1fr .7fr 1.3fr; } }
@media (prefers-reduced-motion:reduce) { .recording-picker[open] { animation:none; } .recording-trigger svg { transition:none; } }
@media (prefers-reduced-motion:reduce) { #scene-next { transition:none; } }
.real video, .real img { width:100%; aspect-ratio:4/3; display:block; object-fit:cover; background:#11130f; }
.real span, .match span { position:absolute; left:4px; top:4px; background:rgb(10 12 9 / 78%); color:#eef0e9; font:550 14px/1 var(--font-mono); padding:4px 5px; }

.disclose { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:22px; padding:13px 0; background:none; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line-soft); font:500 15px/1.4 var(--font-body); color:var(--ink); cursor:pointer; text-align:left; }
.disclose:hover .chev { border-color:var(--ink); }
.disclose:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.disclose .chev { width:9px; height:9px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg) translate(-2px, -2px); transition:transform 200ms ease, border-color 160ms ease; }
.disclose[aria-expanded="true"] .chev { transform:rotate(225deg) translate(-2px, -2px); }
.joint-toolbar { display:flex; align-items:center; gap:20px; margin-top:22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line-soft); }
.joint-toolbar .disclose { flex:1; width:auto; margin:0; border:0; justify-content:flex-start; gap:14px; }
.trajectory-download { display:inline-flex; align-items:center; gap:7px; flex:none; border:0; padding:8px 0; background:none; color:var(--muted); font:400 14px/1.4 var(--font-body); cursor:pointer; white-space:nowrap; }
.trajectory-download svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.3; }
.trajectory-download:hover:not(:disabled) { color:var(--ink); }
.trajectory-download:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.joints { display:none; grid-template-columns:1fr 1fr; gap:4px 32px; padding:12px 0 4px; }
.joints.on { display:grid; }
@media (max-width:640px) { .joints.on { grid-template-columns:1fr; } }
.jcol h3 { font:500 14px/1.4 var(--font-body); margin:0 0 6px; }
.jcol.left h3 { color:var(--left); } .jcol.right h3 { color:var(--right); }
.jrow { display:grid; grid-template-columns:6.6em minmax(0,1fr) 4.2em; gap:8px; align-items:center; font-size:14px; color:var(--muted); height:26px; }
.jrow input { width:100%; margin:0; }
.jrow b { color:var(--ink); font:550 14px var(--font-mono); text-align:right; }
.jcol.left input { accent-color:var(--left-fill); } .jcol.right input { accent-color:var(--right-fill); }

/* model windows */
.tiles { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px 16px; }
@media (max-width:560px) { .tiles { grid-template-columns:minmax(0,1fr); } }
.tile .name { font:500 14px/1.4 var(--font-body); margin-bottom:8px; display:flex; align-items:center; gap:8px; min-height:34px; }
.tile .name small { font-weight:400; color:var(--muted); font-size:14px; margin-left:auto; white-space:nowrap; }
/* how a checkpoint is driven, as a label in the window's corner, like the site's camera labels */
.flag { position:absolute; left:8px; top:8px; z-index:2; background:rgb(10 12 9 / 78%); color:#eef0e9; font:550 14px/1 var(--font-mono); padding:5px 6px; cursor:help; }
.flag:empty, .screen.needs-rec .flag { display:none; }
.tile .cap { font:550 14px/1.5 var(--font-mono); color:var(--muted); margin-top:7px; min-height:1.5em; }
.pick { appearance:none; -webkit-appearance:none; flex:1 1 auto; min-width:0; max-width:100%; text-overflow:ellipsis; font:500 14px/1.4 var(--font-body); color:var(--ink); cursor:pointer;
        border:1px solid var(--line); border-radius:0; padding:7px 30px 7px 10px; transition:border-color 160ms ease, background-color 160ms ease;
        background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%231c1c1a' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center; }
.pick:hover { border-color:var(--ink); background-color:var(--paper-deep); }
.pick:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.pickwrap { position:relative; flex:1 1 auto; min-width:0; }
.pickwrap .pick { width:100%; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.pod-status-control { position:relative; flex:none; }
.pod-status-control[hidden] { display:none; }
.pod-status-button { min-height:34px; padding:7px 9px; display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:500 11px var(--font-mono); cursor:pointer; }
.pod-status-button:hover,.pod-status-control[data-open] .pod-status-button { border-color:var(--ink); background:var(--paper-deep); }
.pod-status-button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.pod-dot { width:10px; height:10px; border:1.5px solid var(--muted); border-radius:50%; background:var(--paper-deep); }
.pod-status-control[data-state="warm"] .pod-dot,.pod-status-control[data-state="busy"] .pod-dot { background:#34845b; border-color:#34845b; }
.pod-status-control[data-state="warming"] .pod-dot { background:#ad8441; border-color:#ad8441; animation:pod-pulse 1.4s ease-in-out infinite; }
.pod-status-control[data-state="error"] .pod-dot { border-color:var(--warn); }
.pod-popover { position:absolute; z-index:40; right:0; top:calc(100% + 8px); width:220px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; background:var(--white); border:1px solid var(--ink); box-shadow:0 8px 24px #00000012; visibility:hidden; opacity:0; transform:translateY(-3px); transition:opacity .12s,transform .12s,visibility .12s; pointer-events:none; }
.pod-popover strong { font:500 11px var(--font-mono); color:var(--muted); }
.pod-value { font-size:15px; font-weight:500; color:var(--ink); }
.pod-detail { font-size:12px; color:var(--muted); font-weight:400; }
.pod-status-control:hover .pod-popover,.pod-status-control:has(button:focus-visible) .pod-popover,.pod-status-control[data-open] .pod-popover { visibility:visible; opacity:1; transform:none; }
@keyframes pod-pulse { 50% { opacity:.4; } }
@media (prefers-reduced-motion:reduce) { .pod-status-control[data-state="warming"] .pod-dot { animation:none; } .pod-popover { transition:none; } }
.picklist { position:absolute; left:0; top:calc(100% - 1px); z-index:30; min-width:100%; width:max-content; max-width:min(440px, calc(100vw - 32px)); background:var(--white); border:1px solid var(--ink); max-height:min(480px, 70vh); overflow:auto; padding:4px 0; }
.picklist.to-left { left:auto; right:0; }
.picklist[hidden] { display:none; }
.picklist .grp { font:500 14px/1.4 var(--font-body); color:var(--ink); padding:18px 16px 8px; margin-top:4px; border-top:1px solid var(--line-soft); letter-spacing:0; cursor:default; }
.picklist .opt.none { color:var(--muted); font-style:normal; padding:9px 12px 9px 10px; }
.picklist .opt.none::before { content:""; display:inline-block; width:10px; height:10px; border:1px solid var(--chart-medium); margin-right:8px; vertical-align:-1px; }
.picklist .opt { display:block; width:100%; text-align:left; background:none; border:0; border-left:2px solid transparent; padding:11px 16px 11px 14px; font:400 14px/1.4 var(--font-body); color:var(--ink); cursor:pointer; white-space:normal; }
.picklist .opt small { display:block; color:var(--muted); font-size:14px; margin-top:2px; }
.picklist .opt:hover, .picklist .opt:focus-visible { background:var(--paper-deep); outline:none; }
.picklist .opt[aria-selected="true"] { border-left-color:var(--ink); font-weight:500; }
.picklist .opt:disabled { color:var(--muted); cursor:default; background:none; }
.screen { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--paper-deep); outline:1px solid var(--line-soft); outline-offset:-1px; }
.screen video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; }
.screen.has video { opacity:1; }
.screen .msg { transition:opacity .3s ease, visibility .3s; }
.screen.has .msg, .screen.wait .msg { opacity:0; visibility:hidden; }
.screen .msg { position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--muted); font-size:14px; line-height:1.5; }
.screen .msg b.need { color:var(--ink); font-weight:500; font-size:15px; }
.screen .recs { display:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; width:100%; max-width:260px; }
.screen.needs-rec .recs { display:block; }
.screen .recording-open { border:1px solid var(--line); padding:8px 14px; background:var(--white); color:var(--ink); font:500 14px/1.4 var(--font-body); cursor:pointer; }
.screen.needs-rec .msg { gap:8px; padding:10px 12px; }
.screen.needs-rec .recs .rec img { aspect-ratio:3/2; }
.screen .recs .rec { position:relative; padding:0; border:0; background:#11130f; cursor:pointer; outline:1px solid var(--line); outline-offset:-1px; }
.screen .recs .rec:hover { outline:2px solid var(--ink); outline-offset:-2px; }
.screen .recs .rec img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.screen .recs .rec span { position:absolute; left:2px; top:2px; background:rgb(10 12 9 / 78%); color:#eef0e9; font:550 14px/1 var(--font-mono); padding:2px 4px; }
/* a run in progress: the start frame it dreams from, faded, under a bar with the state and the time */
.load { position:absolute; inset:1px; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s; pointer-events:none; }
.screen.wait .load { opacity:1; visibility:visible; }
.load-frame { position:absolute; inset:0; background:center/cover no-repeat; filter:grayscale(1) contrast(.9) brightness(1.08); opacity:.16; transition:opacity .6s ease; overflow:hidden; }
.screen.run .load-frame { opacity:.34; }
.load-frame::after { content:""; position:absolute; left:0; right:0; top:0; height:40%; opacity:0; transition:opacity .6s ease;
  background:linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 70%) 55%, rgb(255 255 255 / 0)); transform:translateY(-100%); }
.screen.run .load-frame::after { opacity:1; animation:develop 3.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes develop { from { transform:translateY(-100%); } to { transform:translateY(250%); } }
.load-bar { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:10px 12px 11px; background:var(--bg); border-top:1px solid var(--line-soft); font-size:14px; line-height:1.4; }
.load-label { flex:1; min-width:0; color:var(--muted); text-wrap:balance; transition:color .3s ease; }
.screen.run .load-label { color:var(--ink); }
.load-time { font:500 14px/1.4 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; }
.load-line { position:absolute; left:0; right:0; top:-1px; height:1px; overflow:hidden; }
.load-line::before { content:""; position:absolute; top:0; bottom:0; width:32%; left:0; background:var(--ink); opacity:0; transform:translateX(-100%); transition:opacity .3s ease; }
.screen.run .load-line::before { opacity:1; animation:sweep 1.8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes sweep { from { transform:translateX(-100%); } to { transform:translateX(312.5%); } }
@media (prefers-reduced-motion: reduce) { .screen.run .load-frame::after, .screen.run .load-line::before { animation:none; } .screen.run .load-line::before { width:100%; transform:none; } }
.screen.placeholder { background:var(--bg); outline:1px dashed var(--line); }
#t-real { display:none; }
.tiles.with-real #t-real { display:block; }
.note { font-size:14px; color:var(--muted); margin-top:18px; }
.replay { margin-top:14px; display:none; }
.replay.shown { display:inline-block; }

.history { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.hcard { flex:0 0 150px; overflow:hidden; cursor:pointer; outline:1px solid var(--line); outline-offset:-1px; }
.hcard.on { outline:2px solid var(--ink); outline-offset:-2px; }
.hcard video { width:100%; aspect-ratio:4/3; display:block; object-fit:cover; background:#11130f; }
#history-wrap { display:none; }
body.mode-goal .actiononly, body.mode-action .goalonly { display:none !important; }
.caveat { font-size:14px; color:var(--muted); margin-top:12px; }
.matches { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-top:12px; }
.match { position:relative; overflow:hidden; cursor:pointer; outline:1px solid var(--line); outline-offset:-1px; transition:outline-color .15s; }
.match:hover { outline-color:var(--chart-dark); }
.match.on { outline:2px solid var(--ink); outline-offset:-2px; }
.match img { width:100%; aspect-ratio:4/3; display:block; object-fit:cover; background:#11130f; }
#t-goal { display:none; }
.tiles.with-goal #t-goal { display:block; }
#goal-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
kbd { font:550 14px var(--font-mono); border:1px solid rgba(238,240,233,.5); padding:0 4px; }

/* Add from Hugging Face, at the foot of every checkpoint menu: the site's square field joined to a ghost button */
.picklist .hfadd { display:flex; padding:2px 12px 4px; }
.picklist .hfadd input { flex:1 1 auto; min-width:0; width:260px; font:400 14px/1.4 var(--font-body); color:var(--ink); background:var(--white);
                         border:1px solid var(--line); border-right:0; border-radius:0; padding:7px 10px; }
.picklist .hfadd input::placeholder { color:var(--muted-2); }
.picklist .hfadd input:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.picklist .hfadd button { flex:none; }
.picklist .hfstatus { padding:6px 12px 8px; max-width:420px; font-size:14px; line-height:1.5; color:var(--muted); white-space:normal; }
.picklist .hfstatus .refused { color:var(--warn); }
.picklist .hfprogress { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.picklist .hfstage { color:var(--ink); }
.picklist .hfeta { flex:none; font-variant-numeric:tabular-nums; white-space:nowrap; }
.picklist .hfeta[hidden] { display:none; }
.picklist .hfactivity { position:relative; height:2px; margin-top:8px; overflow:hidden; background:var(--line-soft); }
.picklist .hfactivity::after { content:""; position:absolute; inset:0 auto 0 0; width:35%; background:var(--ink); opacity:.45;
                             animation:hf-travel 1.8s ease-in-out infinite; }
.picklist .hfcomplete { color:var(--ink); }
.picklist .hfcomplete::before { content:"\2713"; margin-right:8px; }
@keyframes hf-travel { from { transform:translateX(-100%); } to { transform:translateX(390%); } }
@media (prefers-reduced-motion:reduce) { .picklist .hfactivity::after { animation:none; left:32.5%; } }
.picklist .hfchoices { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px; max-width:420px; }
.picklist .hfchoices .ghost { white-space:normal; text-align:left; }
.picklist .hfstatus:empty, .picklist .hfchoices:empty { display:none; }

.picklist .opt > span { display:block; }
.picklist .opt small { line-height:1.45; }
.picklist .hfbox { margin-top:8px; border-top:1px solid var(--line-soft); }
.picklist .hfbox .grp { border-top:0; margin-top:0; }
.picklist .hfadd { padding:0 16px 8px; }
.picklist .hfstatus { padding:4px 16px 12px; }
.picklist .hfeta { font-size:14px; color:var(--muted); }
.picklist .hfchoices { padding:0 16px 12px; }
.picklist .hfbox .hfadd input { width:230px; }
.picklist .hfprogress { gap:12px; }
@media (max-width:500px) { .picklist .hfprogress { flex-direction:column; align-items:flex-start; gap:2px; } }

.picklist .opt .opt-meta { display:flex; flex-wrap:wrap; gap:2px 16px; margin-top:4px; }
.picklist .opt .opt-meta:empty { display:none; }
.picklist.above { top:auto; bottom:calc(100% - 1px); }
body.mode-goal #undo { border-left:1px solid var(--line); }
@media (max-width:380px) { .bar .ghost { padding-left:7px; padding-right:7px; } }

/* Link and author belong to one contained import form. */
.picklist .hfbox { padding:16px; margin-top:12px; background:rgba(214,226,229,.2); }
.hf-heading { margin-bottom:12px; font:500 13px var(--font-body); color:var(--ink); }
.picklist .hfbox .hfadd { display:block; padding:0; }
.hf-link-row { display:flex; gap:4px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.6); padding:4px; }
.picklist .hfbox .hfadd input { width:auto; flex:1; border:0; background:none; font-size:13px; padding:9px 8px; }
.hf-link-row:focus-within { border-color:#75969c; }
.picklist .hfbox .hfadd input:focus-visible { outline:0; }
.hf-submit { border:0; border-radius:3px; background:#263035; color:#f4f7f7; padding:8px 12px; font:13px var(--font-body); cursor:pointer; }
.hf-submit span { margin-left:8px; }
.hf-submit:disabled { opacity:.45; cursor:default; }
.hf-author-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.hf-author-row>span { font:11px var(--font-body); color:var(--muted); }
.hf-author-trigger { display:flex; align-items:center; gap:14px; background:transparent; border:0; padding:5px 0 5px 6px; font:12px var(--font-body); color:var(--ink); cursor:pointer; }
.hf-author-trigger>span:first-child { display:flex; align-items:center; gap:7px; }
.hf-author-trigger img { width:20px; height:20px; object-fit:cover; border-radius:3px; }
.hf-author-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); }
.hf-author-options button { display:flex; flex-direction:column; align-items:center; gap:6px; border:1px solid transparent; border-radius:4px; background:transparent; padding:8px 3px; color:var(--ink); font:11px var(--font-body); cursor:pointer; }
.hf-author-options button img { width:28px; height:28px; object-fit:cover; border-radius:3px; }
.hf-author-options button:hover,.hf-author-options button[aria-pressed=true] { border-color:#a7bfc4; background:#e3edee; }
.hfbox button:focus-visible { outline:1px solid #567d85; outline-offset:3px; }
.picklist .hfbox .hfstatus { padding:12px 0 0; }
.picklist .hfbox .hfchoices { padding:10px 0 0; }
.hf-author-options[hidden] { display:none; }
.hf-author-options button[data-owner=nvidia] img,.hf-author-trigger img.company-logo { object-fit:contain; border-radius:0; }

.page-loader--failed { flex-direction:column; gap:16px; padding:28px; }
.page-loader--failed p { max-width:320px; text-align:center; font-size:14px; margin:0; }
.page-loader--failed button { font:14px var(--font-body); background:var(--ink); color:var(--bg); border:0; padding:10px 20px; cursor:pointer; }
.comparison-modes { display:flex; gap:20px; align-items:center; }
#experimental-modes { position:relative; font-size:13px; color:var(--muted); }
#experimental-modes summary { display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none; }
#experimental-modes summary::-webkit-details-marker { display:none; }
#experimental-modes.on summary { color:var(--ink); }
.experimental-menu { position:absolute; z-index:50; top:calc(100% + 10px); left:0; min-width:160px; padding:6px; background:var(--bg); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.experimental-menu button { width:100%; text-align:left; padding:10px 12px; font-size:13px; }
.planner-info { margin:12px 0 0 auto; max-width:430px; color:var(--muted); font-size:12px; }
.planner-info summary { list-style:none; cursor:pointer; text-align:right; }
.planner-info summary::-webkit-details-marker { display:none; }
.planner-info summary span { display:inline-grid; place-items:center; border:1px solid var(--line); border-radius:50%; width:18px; height:18px; font:12px var(--font-mono); }
.planner-info p { line-height:1.6; margin:10px 0 0; }
#recording-grid[aria-busy=true] { opacity:.4; pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .page-loader { transition-duration:0ms; } }


/* A single source clock for the comparison. */
.comparison-transport {display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding:16px 0;margin-top:22px;min-width:0;}
.comparison-transport[hidden],.export-preview[hidden],.export-check[hidden] {display:none;}
.comparison-transport button,.comparison-transport select,.export-preview-head button {border:0;background:transparent;color:var(--ink);cursor:pointer;font:400 14px var(--font-body);}
.comparison-transport .transport-play,.comparison-transport .transport-replay {width:24px;height:28px;padding:2px;flex-shrink:0;}
.transport-play svg,.transport-replay svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;}
.transport-play svg {fill:currentColor;stroke:none;}
.transport-play.playing svg {display:none;}
.transport-play.playing::after {content:'';display:block;width:10px;height:14px;margin:auto;border-left:3px solid;border-right:3px solid;}
.transport-play.buffering {opacity:.45;}
.comparison-transport input[type=range] {flex:1;min-width:30px;accent-color:var(--ink);height:18px;cursor:pointer;}
.transport-time {font:400 12px var(--font-mono);font-variant-numeric:tabular-nums;width:48px;white-space:nowrap;}
.comparison-transport select {padding:4px 0;width:44px;}
.transport-json {font:400 12px var(--font-mono);text-decoration:none;color:var(--muted);}
.tile .export-check {margin-left:auto;padding:4px;display:flex;align-items:center;cursor:pointer;}
.export-check input,.export-options input {width:14px;height:14px;margin:0;accent-color:var(--ink);cursor:pointer;}
.export-preview {margin-top:10px;padding:18px;background:var(--soft);border:1px solid var(--line-soft);animation:export-in 180ms ease-out;}
.export-preview-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:14px;}
.export-preview-head strong {font-weight:500;}
.export-preview-head button {font-size:24px;line-height:20px;padding:0;}
.export-options {display:flex;flex-direction:column;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line-soft);}
.export-options label {display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer;}
.export-options span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.export-reference-option {margin-top:6px;}
.export-sheet-nav {display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
.export-sheet-nav[hidden] {display:none;}
.export-sheet-jump {display:flex;align-items:center;gap:9px;font:400 12px var(--font-mono);}
.export-sheet-jump input {width:42px;height:32px;box-sizing:border-box;border:1px solid var(--line-soft);background:var(--bg);color:var(--ink);font:inherit;text-align:center;appearance:textfield;}
.export-sheet-jump input::-webkit-inner-spin-button,.export-sheet-jump input::-webkit-outer-spin-button {appearance:none;margin:0;}
.export-sheet-arrows {display:flex;gap:6px;}
.export-sheet-arrows button {width:36px;height:32px;border:1px solid var(--line-soft);background:var(--bg);color:var(--ink);font:400 17px var(--font-body);cursor:pointer;}
.export-sheet-arrows button:hover:not(:disabled) {border-color:var(--ink);}
.export-sheet-arrows button:disabled {color:var(--muted);opacity:.35;cursor:default;}
.export-sheet-nav :focus-visible {outline:2px solid var(--ink);outline-offset:2px;}
.export-sheets {padding:16px 0;}
.export-sheet {min-width:0;}
.export-sheet-grid {display:grid;gap:12px;}
.export-sheet figure {margin:0;min-width:0;background:var(--bg);}
.export-sheet .export-reference {grid-column:1 / -1;}
.export-sheet figcaption {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 9px;font-size:11px;}
.export-sheet video {display:block;width:100%;aspect-ratio:4 / 3;object-fit:contain;}
.export-reference video {max-height:200px;}
.export-footer {display:flex;align-items:center;gap:14px;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:14px;}
.export-formats {display:flex;gap:4px;}
.export-formats button {border:0;background:none;padding:6px 10px;font:400 13px var(--font-body);color:var(--muted);cursor:pointer;}
.export-formats button.on {background:var(--ink);color:var(--bg);}
#export-status {font-size:12px;color:var(--muted);}
.export-footer .dream {font-size:13px;padding:8px 14px;}
#export-manifest {display:block;margin-top:12px;color:var(--muted);font-size:12px;}
#export-manifest[hidden] {display:none;}
@keyframes export-in {from {opacity:0;transform:translateY(-4px);}to {opacity:1;transform:translateY(0);}}
@media(max-width:560px) {.comparison-transport {gap:9px;}.transport-json {display:none;}.export-preview {padding:14px;}}
@media(prefers-reduced-motion:reduce) {.export-preview {animation:none;}}

.tile .export-check[hidden] {display:none;}

.bar #preview[hidden] {display:none;}

.export-preview {margin:auto;width:min(680px,calc(100vw - 48px));max-height:calc(100vh - 80px);box-sizing:border-box;padding:22px;color:var(--ink);box-shadow:0 16px 64px rgb(0 0 0 / .12);}
.export-preview::backdrop {background:rgb(244 244 241 / .72);backdrop-filter:blur(4px);}
.export-preview .export-options {display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;}
.export-reference-option {grid-column:1 / -1;padding-top:10px;border-top:1px solid var(--line-soft);}
.export-preview .export-reference video {max-height:150px;}
.export-preview .export-sheet video {max-height:220px;}
@media(max-width:560px) {.export-preview .export-options {grid-template-columns:1fr;}.export-preview {padding:16px;}.export-preview .export-sheet video {max-height:160px;}}

/* Episode publication uses the trajectory browser's paper and hairlines. */
.recording-tools #episode-add{flex:none;padding:9px 15px;border:1px solid var(--line,#d5d5d0)}
.episode-upload{width:min(880px,calc(100vw - 48px));max-height:calc(100dvh - 64px);padding:26px;border:1px solid #d5d5d0;background:#f4f4f1;color:#222;box-sizing:border-box}
.episode-upload::backdrop{background:rgb(20 20 20 / 25%);backdrop-filter:blur(6px)}
.episode-upload header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.episode-upload h2{margin:0;font-size:22px;font-weight:500}
.episode-file-label{display:grid;gap:12px;font-size:14px}
.episode-file-label input{padding:18px;border:1px solid #d5d5d0;width:100%;box-sizing:border-box}
.episode-hint{font-size:13px;color:#62625e;margin:10px 0 24px}
.episode-selection{display:flex;align-items:center;gap:10px;font-size:13px;padding:16px 0;border-top:1px solid #d5d5d0}
.episode-selection input{accent-color:#222}
#episode-results{max-height:230px;overflow:auto;font-size:13px}
.episode-result{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,1fr);gap:20px;padding:12px 0;border-top:1px solid #d5d5d0}
.episode-result span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.episode-result span:last-child{text-align:right}
.episode-error span:last-child{color:#a73333}
.episode-upload footer{display:flex;justify-content:flex-end;margin-top:22px}
.episode-file-label input{font:inherit;background:transparent;color:#222}
.episode-file-label input::file-selector-button{font:inherit;border:0;background:transparent;color:#222;padding:0;margin-right:20px;cursor:pointer}
.episode-upload .recording-close{font-size:22px;line-height:1}
.episode-tabs{display:flex;gap:8px;border-bottom:1px solid #d5d5d0;margin-bottom:22px}
.episode-tabs button{font:inherit;background:none;border:0;padding:10px 14px 14px;color:#70706b;cursor:pointer;border-bottom:2px solid transparent}
.episode-tabs button[aria-pressed=true]{color:#222;border-bottom-color:#222}
.episode-source-toolbar{display:grid;grid-template-columns:110px 100px 165px minmax(100px,1fr);gap:12px;border:1px solid #d5d5d0;padding:12px;margin-bottom:18px;align-items:end}
.episode-source-toolbar label{display:grid;gap:5px;font-size:11px;color:#63635f}
.episode-source-toolbar select,.episode-source-toolbar input{font:inherit;font-size:13px;color:#222;min-width:0;background:transparent;border:0;height:26px;padding:0}
.episode-source-toolbar input{height:38px;padding-left:10px;border-left:1px solid #d5d5d0;outline-offset:4px}
.episode-source-columns,.episode-source-row{display:grid;grid-template-columns:20px minmax(130px,1.1fr) 85px minmax(130px,1fr);gap:16px;align-items:center;padding:0 14px;text-align:left}
.episode-source-columns{font-size:11px;color:#74746e;padding-bottom:10px;border-bottom:1px solid #d5d5d0}
.episode-source-list{height:clamp(180px,35dvh,330px);overflow:auto;overscroll-behavior:contain;font-size:13px}
.episode-source-row{width:100%;font:inherit;font-size:13px;min-height:60px;border:0;border-bottom:1px solid #deded8;background:transparent;color:#222;cursor:pointer}
.episode-source-row:hover{background:#eaeae4}
.episode-source-row[aria-pressed=true]{background:#e2e6e2}
.episode-source-check{height:16px;width:16px;border:1px solid #b2b5af;text-align:center;color:transparent;font-size:12px;line-height:16px}
.episode-source-row[aria-pressed=true] .episode-source-check{background:#252e29;border-color:#252e29;color:#fff}
.episode-capture{display:flex;gap:14px;align-items:center;font-variant-numeric:tabular-nums}
.episode-capture span:last-child,.episode-duration{font-family:var(--mono,monospace)}
.episode-origin{display:grid;gap:4px;min-width:0}
.episode-origin small{color:#74746e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.episode-source-bottom{display:flex;justify-content:space-between;align-items:center;min-height:52px;border-bottom:1px solid #d5d5d0}
#episode-range{display:flex;gap:18px;align-items:center;padding:10px 0}
#episode-range[hidden]{display:none}
#episode-range label{font-size:12px;display:flex;align-items:center;gap:7px;color:#64645f}
#episode-range .episode-seconds{display:flex;align-items:center;border:1px solid #c9cac3;padding:6px 8px;font-family:var(--mono,monospace);color:#222}
#episode-range input{width:48px;min-width:0;font:inherit;text-align:right;padding:0;border:0;background:transparent;color:inherit;appearance:textfield}
#episode-range input::-webkit-inner-spin-button{appearance:none}
#episode-range .episode-seconds>span{margin-left:0}
.episode-source-pane footer{justify-content:space-between;align-items:center}
#episode-selection-count{font-size:12px;color:#64645f}
#episode-source-results{max-height:130px;overflow:auto;font-size:12px}
#episode-source-results .episode-result{padding:9px 0}
#episode-bundle-pane{max-width:520px;margin:0 auto}
@media(max-width:600px){.episode-upload{padding:18px;width:calc(100vw - 24px)}.episode-source-toolbar{grid-template-columns:1fr 1fr;gap:10px}.episode-source-toolbar input{padding:0;border:0}.episode-source-columns,.episode-source-row{grid-template-columns:18px minmax(90px,1fr) 52px minmax(80px,1fr);gap:9px;padding-left:5px;padding-right:5px}.episode-capture{display:grid;gap:4px}.episode-source-list{height:28dvh}.episode-source-row{font-size:12px}.episode-source-bottom{flex-wrap:wrap}}

.export-option-row {display:flex;align-items:center;gap:12px;min-width:0;}
.export-option-row label {flex:1;min-width:0;}
.export-action-download {flex:none;color:var(--ink);font-size:12px;text-decoration:none;border-bottom:1px solid var(--ink);padding:3px 0;}
.export-action-download:hover {opacity:.7;}

.environment-trigger {display:flex;align-items:center;gap:8px;margin-right:auto;padding:7px 0;border:0;background:none;color:var(--ink);font:400 14px/1.4 var(--font-body);cursor:pointer;}
.environment-trigger svg {width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.2;}
.environment-trigger:hover {text-decoration:underline;text-underline-offset:4px;}
.environment-trigger:disabled {opacity:.45;cursor:default;}
.environment-trigger:focus-visible {outline:2px solid var(--ink);outline-offset:4px;}
.scene-picker {width:min(1060px,calc(100vw - 48px));max-height:calc(100svh - 80px);padding:26px;border:1px solid var(--line);background:var(--white);color:var(--ink);overflow:hidden;}
.scene-picker::backdrop {background:rgb(20 20 18 / 28%);backdrop-filter:blur(5px);}
.scene-picker[open] {animation:recording-enter 180ms ease-out;}
.scene-picker-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.scene-picker-head h2 {margin:0;font:500 24px/1.2 var(--font-body);letter-spacing:-.6px;}
.scene-browser {display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;}
.scene-browser aside {border-right:1px solid var(--line-soft);padding-right:20px;}
.scene-source-name {display:block;margin:0 0 12px;font:500 12px/1.4 var(--font-body);color:var(--muted-2);}
.scene-album {display:flex;align-items:center;gap:10px;width:100%;padding:10px 6px;border:0;background:none;text-align:left;color:var(--muted-2);cursor:pointer;}
.scene-album img {width:48px;height:36px;object-fit:cover;opacity:.6;}
.scene-album span {display:grid;gap:4px;}
.scene-album strong {font:500 14px/1.3 var(--font-body);}
.scene-album small {font:400 12px/1.3 var(--font-body);}
.scene-album[aria-pressed=true] {background:rgb(25 25 23 / 5%);color:var(--ink);}
.scene-album[aria-pressed=true] img,.scene-album:hover img {opacity:1;}
.scene-datasets {display:flex;gap:22px;margin-bottom:20px;border-bottom:1px solid var(--line-soft);}
.scene-datasets button {padding:0 0 12px;border:0;background:none;color:var(--muted-2);font:400 14px/1 var(--font-body);cursor:pointer;}
.scene-datasets button[aria-pressed=true] {color:var(--ink);box-shadow:0 2px var(--ink);}
.scene-photo-browser {min-width:0;}
.scene-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-height:calc(100svh - 235px);overflow:auto;scrollbar-width:thin;min-height:220px;}
.scene-grid[aria-busy=true] {opacity:.45;pointer-events:none;}
.scene-grid.single-scene {grid-template-columns:minmax(0,1fr);min-height:0;justify-items:center;}
.scene-grid.single-scene .scene-frame {width:min(100%,460px);}
.scene-frame {position:relative;align-self:start;aspect-ratio:4/3;padding:0;border:0;background:var(--line-soft);cursor:pointer;overflow:hidden;outline:1px solid transparent;outline-offset:3px;}
.scene-frame img {width:100%;height:100%;object-fit:contain;display:block;transition:transform 180ms ease,opacity 180ms ease;}
.scene-frame:hover img {transform:scale(1.025);}
.scene-frame:focus-visible,.scene-frame[aria-pressed=true] {outline:2px solid var(--ink);outline-offset:3px;}
.scene-selected {display:none;position:absolute;right:8px;top:8px;place-items:center;width:23px;height:23px;background:var(--ink);color:var(--white);font:500 14px/1 var(--font-body);}
.scene-frame[aria-pressed=true] .scene-selected,.scene-frame.selecting .scene-selected {display:grid;}
.scene-pages {display:flex;justify-content:flex-end;gap:12px;margin-top:18px;}
.scene-pages button {min-width:36px;font-size:20px;}
.scene-error {display:flex;align-items:center;justify-content:space-between;font-size:14px;}
.scene-picker [hidden] {display:none!important;}
@media(max-width:700px) {.scene-picker{width:calc(100vw - 24px);padding:20px;max-height:calc(100svh - 32px);}.scene-browser{display:block;}.scene-browser aside{border:0;padding:0;margin-bottom:18px;}.scene-source-name{margin-bottom:5px;}#scene-albums{display:flex;overflow:auto;}.scene-album{width:auto;min-width:140px;}.scene-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:calc(100svh - 280px);}}
@media(prefers-reduced-motion:reduce) {.scene-picker[open]{animation:none;}.scene-frame img{transition:none;}.scene-frame:hover img{transform:none;}}