/* ==========================================================================
   R4 · G1 "Checkpoints" — glimpses as checkpoints, then X · P · P · GO.
   Intro A's clean, spacey night; one green (GO), one blue (ahead), red pods.
   ========================================================================== */
:root{
  --bg:#040506; --bg-2:#07090d;
  --ink:#f2f4f7; --ink-2:#c9ced6; --dim:#7d8592; --mute:#4a5059; --faint:#1b1f25; --line:rgba(255,255,255,.08);
  --green:#2bff88; --red:#ff2b3f; --ahead:#3aa0ff; --amber:#ffb21f; --ice:#7fd8ff; --imgui:#28497a;
  /* chromatic-aberration palette (RGB triplets; main.js sets these from PAL). Default = blue/orange */
  --ca1:42 139 255; --ca2:255 138 31;
  --display:"Anybody",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --sans:"Inter Tight",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{background:var(--bg)}
::selection{background:var(--green);color:var(--bg)} /* GO green, as G3 and the r1 start-line demo: selected text reads as a lit pod */
button{font:inherit;color:inherit}
kbd{font-family:var(--mono);font-size:.85em;padding:.05em .4em;border:1px solid #2a2f38;border-radius:4px;color:var(--ink-2)}

#backdrop{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#backdrop[hidden],#vignette[hidden]{display:none}
#vignette{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:.3}
#vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(75% 70% at 50% 50%,transparent 35%,rgba(0,0,0,.92) 100%);opacity:.3}
#flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(50% 42% at 50% 50%,#fff 0%,rgba(220,255,236,.45) 35%,rgba(255,255,255,0) 75%);mix-blend-mode:screen;opacity:0;z-index:20}
/* GO colour bloom: palette colour 1 on the left, colour 2 on the right (the blue-to-orange name gradient) */
#bloom{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:19;mix-blend-mode:screen;
  background:radial-gradient(34% 30% at 34% 50%,rgb(var(--ca1) / .55),transparent 70%),radial-gradient(34% 30% at 66% 50%,rgb(var(--ca2) / .5),transparent 70%)}
#grain{position:fixed;inset:-50%;pointer-events:none;opacity:.012;z-index:21;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root{--frame-w:min(74vw,124vh)}
@media (max-aspect-ratio:1/1){ :root{--frame-w:min(94vw,68vh)} }
#stage{position:fixed;inset:0;overflow:hidden;overflow:clip} /* clip: not a scroll container, so a #fragment can never scroll the stage */

/* ---------- glimpse frame ---------- */
.frame{position:absolute;left:50%;top:50%;width:var(--frame-w);aspect-ratio:16/9;translate:-50% -50%;container-type:size;container-name:frame;opacity:0;
  -webkit-mask-image:radial-gradient(75% 80% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(75% 80% at 50% 50%,#000 58%,transparent 100%)}
@media (max-aspect-ratio:1/1){ .frame{aspect-ratio:3/4} }
.shot{position:absolute;inset:0;visibility:hidden;overflow:hidden}
.ptr{position:absolute;width:2.4cqmin;height:3.4cqmin;background:#f4f6f9;z-index:5;pointer-events:none;
  clip-path:polygon(0 0,0 80%,22% 63%,38% 100%,52% 94%,37% 58%,68% 58%);filter:drop-shadow(0 .3cqmin .4cqmin rgba(0,0,0,.8))}

.trk{position:absolute;inset:0;width:100%;height:100%;display:block}
.trk.dim{opacity:.42;filter:blur(2px) saturate(.8)}

/* G1 windows */
.g1-cam{position:absolute;inset:0}
.mon{position:absolute;border-radius:1cqmin;border:.3cqmin solid #1d2330;background:#05070b;overflow:hidden;box-shadow:0 2cqmin 6cqmin rgba(0,0,0,.6)}
.m1{left:2cqw;top:12cqh;width:57cqw;height:68cqh;border-width:.6cqmin}
.m2{left:62.5cqw;top:19cqh;width:35.5cqw;height:54cqh;border-width:.6cqmin;opacity:.45}
.m1-hud{position:absolute;right:3%;bottom:4%;font:700 1.9cqmin var(--mono);color:#dfe5ee;display:flex;gap:1.4cqmin;opacity:.8;font-variant-numeric:tabular-nums}
.m1-hud span{color:var(--green)}
.m1-lbl{position:absolute;left:3%;top:3.5%;font:600 1.4cqmin var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(223,229,238,.45)}
.m2-wall{position:absolute;inset:0;background:radial-gradient(90% 80% at 30% 20%,#162238,#0a0f18 60%,#06080c)}
.m2-bar{position:absolute;left:0;right:0;bottom:0;height:8%;background:rgba(12,15,21,.92);border-top:1px solid #1d2330;display:flex;gap:1cqmin;align-items:center;padding:0 1.4cqmin}
.m2-bar b{margin-left:auto;font:500 1.5cqmin var(--mono);color:#8a93a0}
.m2-bar i{width:2.4cqmin;height:2.4cqmin;border-radius:.5cqmin;background:#1d2330}
.imw{position:absolute;width:23cqw;border-radius:.7cqmin;background:rgba(15,18,24,.97);border:1px solid #2a3242;z-index:3;overflow:hidden;transform-origin:50% 0;
  box-shadow:0 0 calc(var(--glow,0) * 5cqmin) rgba(127,216,255,calc(var(--glow,0) * .55)),0 2cqmin 5cqmin rgba(0,0,0,.65);font:500 1.5cqw var(--mono)}
.imw-t{background:var(--imgui);color:#e3ebf6;padding:.7cqmin 1.1cqmin;display:flex;justify-content:space-between;align-items:center;border-radius:.6cqmin .6cqmin 0 0}
.imw-t i{width:1.3cqmin;height:1.3cqmin;border-radius:1px;background:#9fb4d4;opacity:.6}
.imw-t,.osw-t{height:3.6cqmin;box-sizing:border-box}
.osw-t{position:absolute;left:0;right:0;top:0;opacity:0;background:linear-gradient(#e9ecf1,#d3d8e0);color:#1a1f27;padding:0 0 0 1.3cqmin;display:flex;justify-content:space-between;align-items:center;font:600 1.4cqw var(--sans)}
.osw-t em{display:flex;height:100%;font-style:normal}.osw-t em i{display:grid;place-items:center;width:4.4cqmin;font:400 1.6cqmin var(--sans);color:#3a414d;font-style:normal}
.osw-t em i:last-child{background:#e0495a;color:#fff}
.imw.os{border-color:#596273;box-shadow:0 0 calc(var(--glow,0) * 5cqmin) rgba(127,216,255,calc(var(--glow,0) * .55)),0 2.4cqmin 6cqmin rgba(0,0,0,.75)}
.imw-b{padding:1.1cqmin 1.3cqmin;display:grid;gap:.8cqmin;color:#aeb6c2}
.imw .row{display:flex;justify-content:space-between}.imw .row b{color:#f2f4f7}
.imw .bar{height:.9cqmin;background:#1a1f29;border-radius:1px;overflow:hidden}.imw .bar i{display:block;height:100%;background:var(--green);transform-origin:0 50%}
.imw svg{width:100%;height:5cqmin}.imw polyline{fill:none;stroke:var(--ice);stroke-width:1.4;vector-effect:non-scaling-stroke}
@container frame (aspect-ratio < 1){
  .m1{left:4cqw;top:5cqh;width:92cqw;height:46cqh}
  .m2{left:10cqw;top:55cqh;width:80cqw;height:38cqh}
  .imw{width:54cqw;font-size:3.4cqw}.osw-t{font-size:3.2cqw}
}

/* G2 ICANT YPE: a ranked XPP typing race over a TM-style chase cam. One primary card (the prompt), live ranking
   bottom-left, ranked profile bottom-right, a speed-style meter bottom centre; the horizon band stays clear for the
   chatters' cars. Portrait folds the ranking into POS. */
.g2{position:absolute;inset:0;overflow:hidden}
.g2-card{position:absolute;background:rgba(6,9,14,.76);border:1px solid rgba(255,255,255,.08);border-radius:1.1cqmin;backdrop-filter:blur(3px);box-shadow:0 1.2cqmin 3.6cqmin rgba(0,0,0,.45)}
.g2-hud{left:8cqw;right:8cqw;top:6cqh;padding:1.8cqmin 2.6cqmin 1.7cqmin;display:grid;gap:1.2cqmin;overflow:hidden;border-color:rgba(43,255,136,.16)}
.g2-hud::before{content:"";position:absolute;left:0;top:0;width:46%;height:2px;background:linear-gradient(90deg,var(--green),rgba(43,255,136,0))}
.g2-top{display:flex;align-items:center;gap:1.1cqw;min-width:0;font:700 max(9px,1.05cqw) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.g2-live{flex:none;width:.42cqw;height:1.5cqw;background:var(--green);transform:skewX(-12deg)} /* a slanted tick that leans with the italic wordmark, not a glowing dot */
.g2-logo{font:italic 800 1.9cqw/1 var(--display);font-stretch:125%;letter-spacing:.04em;color:#fff}
.g2-xpp{position:relative;isolation:isolate;padding:.25em .8em .25em .9em;color:var(--green);letter-spacing:.14em}
.g2-xpp::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid rgba(43,255,136,.45);border-radius:.32em;background:rgba(43,255,136,.06);transform:skewX(-12deg)} /* badge is a parallelogram (the italic lean), never a pill; text stays upright */
.g2-mode{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.g2-win{overflow:hidden}
.g2-text{font:500 3.9cqw/1.15 var(--mono);white-space:nowrap;color:#3a4250;will-change:transform}
.g2-text span{display:inline-block}.g2-text .ok{color:#eef2f7}.g2-text .at{color:#eef2f7;box-shadow:inset 0 -.3cqw 0 var(--green)}
.g2-prog{height:.45cqmin;border-radius:1px;background:rgba(255,255,255,.07);overflow:hidden}
.g2-prog i{display:block;height:100%;background:linear-gradient(90deg,#1fcf72,var(--green));transform-origin:0 50%;transform:scaleX(0)}
.g2-toast{position:absolute;left:50%;top:26.5cqh;translate:-50% 0;display:flex;align-items:center;gap:.8cqw;padding:.55cqmin 1.3cqmin;border-radius:.45em;background:rgba(5,14,10,.86);border:1px solid rgba(43,255,136,.5);font:700 max(9px,1.1cqw) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap;opacity:0;z-index:2}
.g2-toast b{color:var(--green)}.g2-toast em{font-style:normal;color:var(--dim)}.g2-tn{text-transform:none;letter-spacing:.04em}
.g2-board{left:8cqw;bottom:7cqh;width:18cqw;padding:1.2cqmin 0 .9cqmin}
.g2-board h6,.g2-st small,.g2-m small{margin:0;font:700 max(8.5px,.85cqw) var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.g2-board h6{padding:0 1.4cqmin .7cqmin}
.g2-rows{position:relative;height:16.5cqh;overflow:hidden}
.g2-row{position:absolute;left:0;right:0;top:0;height:3.3cqh;display:flex;align-items:center;gap:.8cqw;padding:0 1.4cqmin;font:500 max(9px,1.05cqw) var(--mono);color:var(--ink-2);white-space:nowrap}
.g2-row b{width:1.4cqw;text-align:right;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums}
.g2-row i{flex:none;width:.35cqw;height:52%;border-radius:1px;background:rgb(90 166 255 / .75)}
.g2-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.g2-tw{flex:none;width:.86em;height:1em;fill:#a970ff}.g2-row.tw span{color:var(--tw);font-weight:700}
.g2-row.you{z-index:1;color:#fff;background:linear-gradient(90deg,rgba(43,255,136,.2),rgba(43,255,136,0) 85%)}
.g2-row.you b{color:var(--green)}.g2-row.you i{background:var(--green);box-shadow:0 0 .8cqw var(--green)}
.g2-rank{right:8cqw;bottom:7cqh;width:18cqw;padding:1.3cqmin 1.6cqmin;display:grid;gap:1.1cqmin}
.g2-st{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:.6cqw;row-gap:.25cqmin}
.g2-st small{grid-column:1/-1}
.g2-st b{font:800 2.3cqw/1 var(--display);font-stretch:115%;font-variant-numeric:tabular-nums;color:#fff;transform-origin:0 70%;text-shadow:0 0 calc(var(--fl,0) * 2cqmin) rgba(43,255,136,calc(var(--fl,0) * .9))}
.g2-st em{font:700 max(8.5px,1cqw) var(--mono);font-style:normal;color:var(--green);letter-spacing:.04em;white-space:nowrap}
.g2-fire svg{display:block;width:1.2cqw;height:1.4cqw;fill:var(--amber);filter:drop-shadow(0 0 .6cqw rgba(255,178,31,.6))}
.g2-meter{left:50%;bottom:7cqh;translate:-50% 0;display:flex;gap:2.4cqw;padding:1.1cqmin 2.2cqmin}
.g2-m{display:grid;justify-items:center;gap:.35cqmin}
.g2-m b{font:italic 800 3.4cqw/1 var(--display);font-stretch:120%;font-variant-numeric:tabular-nums;color:#fff}
.g2-m b i{font-size:.5em;font-style:normal;color:var(--dim)}
.g2-wpm b{min-width:3ch;text-align:center;color:var(--green);text-shadow:0 0 2cqmin rgba(43,255,136,.35)}
@container frame (aspect-ratio < 1){
  .g2-hud{left:4.5cqw;right:4.5cqw;top:4cqh;padding:2.2cqmin 2.8cqmin 2cqmin;gap:1.6cqmin}
  .g2-top{font-size:max(9px,2.5cqw);gap:2cqw;letter-spacing:.12em}.g2-live{width:.95cqw;height:3.4cqw}.g2-logo{font-size:4.4cqw}.g2-wide{display:none}
  .g2-text{font-size:7.4cqw}.g2-prog{height:.9cqmin}
  .g2-toast{top:24.5cqh;font-size:max(9px,2.6cqw);gap:1.6cqw;padding:1cqmin 2.6cqmin}
  .g2-board{display:none}
  .g2-rank{left:4.5cqw;right:4.5cqw;bottom:20.5cqh;width:auto;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.2fr);align-items:end;column-gap:3cqw;padding:1.8cqmin 2.8cqmin}
  .g2-st small,.g2-m small{font-size:max(8.5px,2.3cqw);letter-spacing:.08em;white-space:normal}
  .g2-st{grid-template-columns:auto auto;justify-content:start;column-gap:1.4cqw}.g2-st b{font-size:5cqw}.g2-st em{font-size:max(9px,2.5cqw)}.g2-fire svg{width:2.6cqw;height:3cqw}
  .g2-meter{left:4.5cqw;right:4.5cqw;bottom:5.5cqh;translate:none;justify-content:space-between;padding:1.6cqmin 6cqw}
  .g2-m b{font-size:8.4cqw}
}

/* G3 Blender Scene Layers: split timelines, Blender | Trackmania MediaTracker, linked playheads (from explainer v1) */
.g3{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%,#0a0d13 0%,#040506 70%)}
.g3-cam{position:absolute;inset:0;font-family:var(--mono);color:#d6dae0;transform-origin:50% 55%}
.g3-tag{position:absolute;left:4cqw;top:4.6cqh;font:500 1.15cqw var(--mono);letter-spacing:.16em;color:var(--dim);white-space:nowrap}
.g3-tag b{font-weight:700;background:linear-gradient(90deg,rgb(var(--ca1)),rgb(var(--ca2)));-webkit-background-clip:text;background-clip:text;color:transparent}
.g3-pane{position:absolute;top:11cqh;height:73cqh;display:flex;flex-direction:column;background:rgba(12,14,19,.96);border:1px solid #1d222b;border-radius:.6cqw;overflow:hidden;box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.45)}
.g3-bl{left:4cqw;width:34cqw}.g3-tm{left:40cqw;width:56cqw}
.g3-hd{flex:none;height:5.6cqh;display:flex;align-items:center;gap:1cqw;padding:0 1cqw;border-bottom:1px solid #1d222b;font-size:1.05cqw;color:var(--dim);white-space:nowrap}
.g3-hd b{color:var(--ink);letter-spacing:.04em}.g3-hd em{font-style:normal;margin-left:auto;color:var(--ink-2);padding:.1cqw .6cqw;border-radius:.3cqw;background:#1a1e26}
.g3-cv{flex:1 1 0;min-height:0;width:100%;display:block}.g3-tmv{background:#07090c}
.g3-upd{flex:none;height:6cqh;display:flex;align-items:center;gap:.8cqw;padding:0 1cqw;border-top:1px solid #1d222b;font-size:1cqw;white-space:nowrap}
.g3-pill{padding:.15cqw .5cqw;border-radius:.45cqw;background:#e9edf2;color:#0b0e13;font-weight:700}
.g3-btn{padding:.35cqw .8cqw;border-radius:.6cqw;background:#262b34;border:1px solid #3a414d;color:var(--ink)}
.g3-tl{flex:none;padding:0 1.2cqw 1.6cqh;border-top:1px solid #1d222b}
.g3-th,.g3-st{flex:none;display:flex;align-items:center;gap:1.4cqw;height:5cqh;font-size:.95cqw;color:#9aa0a8;white-space:nowrap}
.g3-bf,.g3-mf{margin-left:auto;font:700 1.5cqw var(--display);letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.g3-lanes{position:relative}
.g3-ru{position:relative;height:3cqh;border-bottom:1px solid #1d222b}
.g3-ru i{position:absolute;bottom:0;height:.8cqh;border-left:1px solid #39414c}
.g3-ru b{position:absolute;bottom:1cqh;left:0;transform:translateX(-50%);font-weight:400;font-size:.75cqw;color:#5c6470}
.g3-row{position:relative;height:3.6cqh;border-bottom:1px solid #161a20}
.g3-kf{position:absolute;top:50%;width:.8cqw;height:.8cqw;background:#2a2f38;border:1px solid #8a919c;transform:translate(-50%,-50%) rotate(45deg)}
.g3-kf.s{width:.55cqw;height:.55cqw}.g3-kf.on{background:#e9edf2;border-color:#e9edf2}
.g3-st{padding:0 1cqw;border-top:1px solid #1d222b;border-bottom:1px solid #1d222b}
.g3-ps{font-weight:800;color:#e6e9ee;min-width:15ch}.g3-ps.neg{color:#ffd21f}
.g3-mt{flex:none;height:22cqh;display:flex}
.g3-clips{flex:none;width:11cqw;border-right:1px solid #1d222b;display:flex;flex-direction:column;gap:.5cqh;padding:1.2cqh .6cqw;font-size:.85cqw;color:#9aa0a8;white-space:nowrap;overflow:hidden}
.g3-clips span:first-child{font-size:.75cqw;letter-spacing:.16em;color:#5c6470}
.g3-clips .on{color:var(--ink);background:#1a1f28;box-shadow:inset .25cqw 0 0 rgb(var(--ca1));padding:.3cqh .4cqw;border-radius:.3cqw}
.g3-tm .g3-lanes{flex:1;margin:0 1.2cqw}
.g3-trk{position:relative;height:5.4cqh;border-bottom:1px solid #161a20}
.g3-bar{position:absolute;top:18%;bottom:18%;display:flex;align-items:center;padding-left:.6cqw;border-radius:.3cqw;background:#181c23;border:1px solid #2c333e;font-size:.85cqw;color:#9aa0a8;white-space:nowrap;overflow:hidden}
.g3-bar.ly{color:var(--ink);background:linear-gradient(#141922,#141922) padding-box,linear-gradient(90deg,rgb(var(--ca1)),rgb(var(--ca2))) border-box;border-color:transparent}
.g3-link{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.g3-lchip{position:absolute;left:0;top:0;z-index:5;transform:translate(-50%,-50%);padding:.25cqw .8cqw;border-radius:.45em;background:#0b0e13;border:1px solid #2c333e;font-size:.8cqw;letter-spacing:.14em;color:var(--ink-2);white-space:nowrap}
.g3-lchip b{color:var(--ink)}.g3.scrub .g3-lchip{border-color:#ffd21f}
.g3 .ptr{left:0;top:0;z-index:6}
/* the replay editor's Render button (status bar, right); lit once pressed */
.g3-recb{display:flex;align-items:center;gap:.5cqw;padding:.2cqw .7cqw;border-radius:.35cqw;border:1px solid #3a414d;background:#1a1e26;font-weight:700;color:var(--ink-2);transform-origin:50% 60%}
.g3-recb.on{border-color:#ff3b4a;background:#2a0d12;color:#ffd6da}.g3-recb .g3-rec{width:1.1cqw;height:1.1cqw}
/* the payoff prompt, inside the Trackmania window: MediaTracker's "Start render" for the replay (illustrative). Red
   record icon, file name in mono, Yes / Cancel */
.g3-mod{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(3,4,6,.55);visibility:hidden;opacity:0}
.g3-mod-c{width:30cqw;display:grid;justify-items:start;gap:1.2cqh;padding:2.4cqh 1.8cqw 2cqh;background:#11141a;border:1px solid #333b47;border-radius:.6cqw;box-shadow:0 2cqw 5cqw rgba(0,0,0,.6);font-size:1.05cqw;color:var(--ink-2)}
.g3-mod-h{display:flex;align-items:center;gap:.7cqw;width:100%;font-size:.9cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.g3-mod-h b{color:var(--ink);letter-spacing:.08em}.g3-mod-h span{margin-left:auto}
.g3-rec{flex:none;width:1.5cqw;height:1.5cqw}.g3-rec circle:first-child{fill:none;stroke:#ff3b4a;stroke-width:1.6}.g3-rec circle+circle{fill:#ff3b4a}
.g3-mod-c p{margin:.4cqh 0 0;font:600 1.5cqw/1.15 var(--sans);color:var(--ink)}
.g3-mod-c code{max-width:100%;padding:.35cqw .6cqw;border-radius:.3cqw;background:#07090c;border:1px solid #232a34;font:500 1.1cqw var(--mono);color:#ffd9a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g3-mod-c small{font-size:.85cqw;color:var(--dim)}
.g3-mod-a{justify-self:end;display:flex;gap:.7cqw;margin-top:.6cqh}
.g3-mod-a span{padding:.45cqw 1.3cqw;border-radius:.35cqw;border:1px solid #3a414d;background:#1a1e26;font:700 1.05cqw var(--sans);color:var(--ink-2)}
.g3-mod-a .g3-mod-y{background:#ff3b4a;border-color:#ff3b4a;color:#160306;transform-origin:50% 60%}
.g3-mod-a .g3-mod-y.on{box-shadow:0 0 0 2px #11141a,0 0 0 3.5px rgba(255,59,74,.55)}
@container frame (aspect-ratio < 1){
  /* portrait: Blender on top, Trackmania below with its MediaTracker lanes first, so the two playheads share one x and the link is a straight drop */
  .g3-tag{left:5cqw;top:2.6cqh;font-size:2.4cqw}
  .g3-pane{left:5cqw;width:90cqw;border-radius:1.2cqw}.g3-bl{top:7cqh;height:39cqh}.g3-tm{top:51cqh;height:44cqh}
  .g3-hd{height:4cqh;font-size:2.4cqw;gap:2cqw;padding:0 2cqw}.g3-hd span,.g3-upd,.g3-clips,.g3-th span+span{display:none}
  .g3-tl{padding:0 3cqw 1cqh}.g3-tm .g3-lanes{margin:0 3cqw}
  .g3-th,.g3-st{height:3.6cqh;font-size:2.2cqw;gap:3cqw;padding:0 2cqw}.g3-th{padding:0}.g3-bf,.g3-mf{font-size:3.4cqw}
  .g3-ru{height:2.4cqh}.g3-ru b{font-size:1.8cqw}.g3-row{height:2.6cqh}
  .g3-kf{width:1.7cqw;height:1.7cqw}.g3-kf.s{width:1.2cqw;height:1.2cqw}
  .g3-mt{order:1;height:auto}.g3-tm .g3-st{order:2}.g3-tmv{order:3}
  .g3-trk{height:3.6cqh}.g3-bar{font-size:2cqw;padding-left:1.2cqw}.g3-lchip{font-size:2cqw;padding:.5cqw 1.6cqw}
  .g3-recb{gap:1.2cqw;padding:.4cqw 1.6cqw;border-radius:.8cqw}.g3-recb .g3-rec{width:2.6cqw;height:2.6cqw}
  .g3-mod-c{width:76cqw;gap:1.4cqw;padding:4cqw 4cqw 3.6cqw;border-radius:1.4cqw;font-size:2.6cqw}
  .g3-mod-h{gap:1.6cqw;font-size:2.2cqw}.g3-rec{width:3.6cqw;height:3.6cqw}
  .g3-mod-c p{font-size:3.8cqw}.g3-mod-c code{padding:.9cqw 1.4cqw;border-radius:.8cqw;font-size:2.9cqw}.g3-mod-c small{font-size:2.2cqw}
  .g3-mod-a{gap:1.8cqw}.g3-mod-a span{padding:1.2cqw 3.2cqw;border-radius:.9cqw;font-size:2.8cqw}
}

/* G4 installer: the XPP Package Manager window, packages grouped by kind; Openplanet already installed, then three queued
   installs (Blender add-on, TAS tool, game). Row look follows G3's installer; bars use the palette */
.g4{position:absolute;inset:0;display:grid;place-items:center}
.g4-card{position:relative;width:50cqw;padding:0 3.4cqmin 3cqmin;background:#0a0d12;border:1px solid #1f2632;border-radius:1.4cqmin;box-shadow:0 3cqmin 8cqmin rgba(0,0,0,.6);display:grid;gap:1.5cqmin;overflow:hidden}
.g4-tb{display:flex;align-items:center;gap:1.2cqmin;margin:0 -3.4cqmin .6cqmin;padding:1.1cqmin 1.6cqmin 1.1cqmin 2.2cqmin;background:#11151c;border-bottom:1px solid #1f2632;font:600 2.1cqmin var(--sans);color:var(--ink)}
.g4-logo{padding:.25cqmin .7cqmin;border-radius:.35em;background:linear-gradient(90deg,rgb(var(--ca1)),rgb(var(--ca2)));color:#06080c;font:italic 900 1.7cqmin var(--display);letter-spacing:.02em}
.g4-tb i{margin-left:auto;font-style:normal;color:var(--dim);font-size:2.2cqmin;line-height:1}
.g4-cat{margin:.7cqmin 0 -.5cqmin;padding-bottom:.5cqmin;border-bottom:1px solid #161b23;font:600 1.45cqmin var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.g4-ext{opacity:0}.g4-ext .g4-ic{background:#2a313c}.g4-ext .g4-ic{fill:#c9d1dc;stroke:#c9d1dc}
.g4-ext .g4-chip{background:#13261b;color:var(--green);box-shadow:inset 0 0 0 1px rgba(43,255,136,.25)}
.g4-h{display:flex;justify-content:space-between;align-items:center;font:600 1.9cqmin var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.g4-all{position:relative}
.g4-btn{display:inline-block;padding:1cqmin 2.6cqmin;border-radius:.5em;background:var(--green);color:#03140a;font:700 2.1cqmin var(--sans);font-variant-numeric:tabular-nums;transition:none;white-space:nowrap}
.g4-btn.on{background:#13261b;color:var(--green);box-shadow:inset 0 0 0 1px rgba(43,255,136,.4)}
.g4-all .ptr{left:62%;top:58%}
.g4-q{--fl:0;display:grid;gap:1.1cqmin;padding:1.2cqmin 1.4cqmin;margin:-1.2cqmin -1.4cqmin;border-radius:1cqmin;opacity:0;
  background:rgba(43,255,136,calc(var(--fl) * .12));box-shadow:inset 0 0 0 1px rgba(43,255,136,calc(var(--fl) * .55))}
.g4-row{display:flex;align-items:center;gap:1.8cqmin}
.g4-ic{flex:none;width:5.6cqmin;height:5.6cqmin;padding:.9cqmin;border-radius:1.2cqmin;background:#151b25;fill:var(--ink);stroke:var(--ink)}
.g4-q0 .g4-ic{background:rgb(var(--ca1) / .9)}
.g4-q2 .g4-ic{background:rgb(var(--ca2) / .9)}
.g4-q1 .g4-ic{background:linear-gradient(135deg,rgb(var(--ca1) / .9),rgb(var(--ca2) / .9))}
.g4-ic{fill:#06080c;stroke:#06080c}
.g4-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3cqmin}
.g4-meta b{font:700 3cqmin/1.1 var(--display);font-stretch:108%;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g4-meta span{font:500 1.75cqmin var(--mono);color:var(--dim);white-space:nowrap}
.g4-chip{flex:none;min-width:11cqmin;text-align:center;padding:.9cqmin 1.6cqmin;border-radius:.9cqmin;background:#141a24;color:var(--dim);
  font:700 1.8cqmin var(--mono);letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.g4-q.run .g4-chip{background:#141a24;color:var(--ink);box-shadow:inset 0 0 0 1px rgb(var(--ca1) / .5)}
.g4-q.done .g4-chip{background:#13261b;color:var(--green);box-shadow:inset 0 0 0 1px rgba(43,255,136,.4)}
.g4-bar{height:.8cqmin;background:#141922;border-radius:1px;overflow:hidden}
.g4-bar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,rgb(var(--ca1)),rgb(var(--ca2)));box-shadow:0 0 1.2cqmin rgb(var(--ca1) / .5)}
.g4-q.done .g4-bar i{background:linear-gradient(90deg,#1fbf68,var(--green));box-shadow:0 0 1.2cqmin rgba(43,255,136,.5)}
.g4-st{font:500 1.7cqmin var(--mono);letter-spacing:.06em;color:var(--dim)}
.g4-q.run .g4-st{color:var(--ink-2)}.g4-q.done .g4-st{color:var(--green)}
@container frame (aspect-ratio < 1){
  .g4-card{width:88cqw;padding:0 4.4cqw 4cqw;gap:2.2cqw;border-radius:2.4cqw}
  .g4-tb{gap:2cqw;margin:0 -4.4cqw .8cqw;padding:2cqw 2.6cqw 2cqw 3.4cqw;font-size:3.4cqw}.g4-logo{font-size:2.8cqw;padding:.4cqw 1.2cqw}.g4-tb i{font-size:4cqw}
  .g4-cat{margin:1cqw 0 -.6cqw;padding-bottom:.8cqw;font-size:2.4cqw;letter-spacing:.12em}
  .g4-h{font-size:3.3cqw}.g4-btn{font-size:3.6cqw;padding:1.6cqw 3.6cqw}
  .g4-q{gap:1.6cqw;padding:1.8cqw 2cqw;margin:-1.8cqw -2cqw;border-radius:1.6cqw}
  .g4-row{gap:2.6cqw}
  .g4-ic{width:9cqw;height:9cqw;padding:1.5cqw;border-radius:2cqw}
  .g4-meta b{font-size:4.5cqw;white-space:normal}
  .g4-meta span{font-size:3cqw}
  .g4-chip{min-width:16cqw;font-size:3cqw;padding:1.4cqw 2cqw;border-radius:1.4cqw}
  .g4-bar{height:1.2cqw}
  .g4-st{font-size:2.9cqw}
  .g4 .ptr{width:4.4cqw;height:6.2cqw}
}

/* Editor tools: selected Nod → GBX; changed item file → Map Editor inventory. */
.g-editor{position:absolute;inset:0;background:#07090d;font-family:var(--mono)}
.g-editor>.trk{opacity:.24;filter:blur(2px) saturate(.6)}
.ge-heading{position:absolute;left:7cqw;right:7cqw;top:7cqh}
.ge-heading>span{font:600 1.3cqw var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--dim)}
.ge-heading h2{margin:1.5cqh 0 0;font:700 4.4cqw/1.08 var(--display);font-stretch:106%;letter-spacing:-.025em;color:var(--ink)}
.ge-panel{position:relative;background:rgba(10,13,18,.97);border:1px solid #2a303a;border-radius:.9cqmin;overflow:hidden;box-shadow:0 1.8cqmin 5cqmin rgba(0,0,0,.45)}
.ge-toolbar{height:6cqh;padding:0 1.8cqw;display:flex;align-items:center;justify-content:space-between;gap:1cqw;border-bottom:1px solid #242a34;font:500 1.2cqw var(--mono);color:var(--dim);white-space:nowrap}
.ge-toolbar b{font-weight:600;color:var(--ink-2)}
.ge-nod{--sel:var(--ahead);--dest:#f0c46a}
.ge-nod-panel{position:absolute;left:7cqw;right:7cqw;top:28.5cqh}
.ge-inspector{display:grid;grid-template-columns:26% 24% 1fr;min-height:41cqh}
.ge-tree{margin:0;padding:2cqh 0;list-style:none;display:flex;flex-direction:column;gap:.9cqh;border-right:1px solid #242a34;font:500 1.02cqw/1.3 var(--mono)}
.ge-tree li{display:flex;flex-direction:column;gap:.35cqh;padding:.8cqh 1cqw .8cqh calc(1.3cqw + var(--d) * .9cqw)}
.ge-tree em{font-style:normal;font-size:.95cqw;color:#717a87}.ge-tree li+li em::before{content:'└ ';color:#3a424e}
.ge-tree b{font-weight:500;color:#9aa3af;overflow-wrap:anywhere}
.ge-tree .is-sel{background:#152131;box-shadow:inset .22cqw 0 0 var(--sel)}.ge-tree .is-sel em{color:var(--sel)}.ge-tree .is-sel b{font-weight:700;color:#eef4fb}
.ge-view{display:grid;place-items:center;padding:2cqh 1.2cqw;border-right:1px solid #242a34;background:radial-gradient(70% 60% at 50% 55%,rgba(58,160,255,.07),transparent 70%),#080b10}
.ge-view svg{width:100%;max-height:33cqh;overflow:visible}
.m-floor{fill:none;stroke:#242c37;stroke-width:.8}.m-side{stroke:rgba(110,178,255,.62);stroke-width:.6;stroke-linejoin:round}
.m-face{fill:#0e1a29}.m-wire{fill:none;stroke:rgba(127,192,255,.5);stroke-width:.55}.m-edge{fill:none;stroke:#86c4ff;stroke-width:1.3;stroke-linejoin:round}
.ge-properties{min-width:0;padding:2.2cqh 2cqw 2.4cqh;display:flex;flex-direction:column;gap:2.4cqh}
.ge-selected,.ge-dest{display:flex;flex-direction:column;gap:.9cqh;min-width:0}
.ge-selected>span,.ge-dest>span{font-size:.95cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ge-selected strong{font-size:2.3cqw;font-weight:700;color:var(--ink);overflow-wrap:anywhere}.ge-crumb{display:none}
.ge-dest code{margin-left:.5em;font:600 1.05cqw var(--mono);letter-spacing:0;text-transform:none;color:var(--dest)}
.ge-path{padding:1.2cqh 1cqw;background:#0b1017;border:1px solid #3a4250;border-radius:.4cqmin;box-shadow:inset .22cqw 0 0 var(--dest);font-size:1.42cqw;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.ge-dest small{font-size:.95cqw;color:var(--dim)}
.ge-call{display:flex;flex-wrap:wrap;align-items:center;gap:1cqh 1.2cqw}
.ge-save{display:flex;align-items:center;gap:1.4cqw;padding:1.2cqh 1.2cqw;background:#173151;border:1px solid #3e658d;border-radius:.6cqmin;font-size:1.3cqw;font-weight:600;color:#eef4fb;white-space:nowrap;transform-origin:50% 50%}
.ge-save code{font:inherit}.ge-save i{font-style:normal;color:#9fd0ff}.ge-save u{text-decoration:none;color:var(--dest)}
.ge-save>span{font-size:1.5cqw;color:#b9d0eb}.ge-save.is-writing{background:#244867}.is-saved .ge-save{background:#182c22;border-color:#426351;color:#cfebdc}

.ge-output{position:relative;display:flex;align-items:center;gap:1.5cqw;padding:2cqh 2cqw;border-top:1px solid #242a34;min-height:12cqh;background:#0d121a}
.ge-file-icon{display:grid;place-items:center;flex:none;width:4cqw;height:5cqw;clip-path:polygon(0 0,72% 0,100% 24%,100% 100%,0 100%);background:#242d3a;color:#b9c4d4;font:700 1.1cqw var(--mono);letter-spacing:.04em}
.ge-output>div{min-width:0;display:flex;flex-direction:column;gap:.8cqh}.ge-output strong{font-size:1.8cqw;font-weight:600;color:var(--ink-2)}
.ge-output>div>span{font-size:1.1cqw;color:var(--dim)}.ge-saved{margin-left:auto;font-size:1.25cqw;font-weight:600;color:var(--dim);white-space:nowrap}
.ge-nod .ge-output strong{font-size:1.6cqw;color:#8a93a0;overflow-wrap:anywhere}.ge-nod .ge-output .ge-file-icon{background:#161c25;color:#5d6673}
.ge-out-bar{position:absolute;left:0;right:0;bottom:0;height:max(2px,.4cqh);background:var(--dest);transform-origin:0 50%;transform:scaleX(0)}
.is-writing .ge-saved{color:var(--dest)}.is-saved .ge-out-bar{background:var(--green)}
.is-saved .ge-output{background:#101b16}.is-saved .ge-file-icon,.ge-nod .is-saved .ge-file-icon{background:#263d31;color:#cfebdc}.is-saved .ge-saved{color:var(--green)}.ge-nod .is-saved .ge-output strong{color:var(--ink)}
.ge-items{--sig:255 160 64}
.ge-arr{display:inline-block;width:1.75em;height:.8em;margin:0 .5em 0 .33em;vertical-align:-.04em;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* CP6: Blender (top left) -> arch.Item.Gbx on disk -> Map Editor inventory. The panel boxes here and the signal routes in
   glimpses.js (GE_WIRE, cq waypoints) must move together. --sig is fixed warm so the signal reads under either palette. */
.ge-wire{position:absolute;inset:0;pointer-events:none}.ge-wire svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}.ge-wire .gew-p{display:none}.ge-wire-t{z-index:3}
.gew-base{fill:none;stroke:#252c37;stroke-linejoin:round}.gew-lit{fill:none;stroke:rgb(var(--sig));stroke-linejoin:round;stroke-dasharray:0 3}
.gew-comet path{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}.gew-comet path:nth-child(1){stroke:rgb(var(--sig) / .22)}.gew-comet path:nth-child(2){stroke:rgb(var(--sig) / .65)}.gew-comet path:nth-child(3){stroke:#fff3e2}
.gew-head{opacity:0}.gew-head circle:nth-child(2){fill:rgb(var(--sig))}.gew-head circle:nth-child(3){fill:#fff8ee}.gew-ring{fill:none;stroke:rgb(var(--sig));opacity:0}
.ge-blender{position:absolute;left:7cqw;top:29cqh;width:28cqw;height:45cqh;display:flex;flex-direction:column;background:#303030;border-color:#151515}
.ge-bl-bar{height:6cqh;flex:none;display:flex;align-items:center;gap:1.1cqw;padding-left:1.2cqw;background:#232323;border-bottom:1px solid #151515;font:500 max(8.5px,1.02cqw) var(--sans);color:#c4c4c4;white-space:nowrap}
.ge-bl-logo{flex:none;width:1.45cqw;height:1.45cqw;border-radius:50%;background:radial-gradient(circle at 60% 50%,#2f86dc 0 27%,#f2f2f2 29% 41%,#ea7600 44%)}
.ge-bl-bar em{font-style:normal;padding:.3em .65em;border-radius:.35em;background:#3c3c3c;color:#e4e4e4}
.ge-bl-export{margin-left:auto;align-self:stretch;display:grid;place-items:center;padding:0 1.2cqw;background:#4772b3;color:#fff;font-weight:600}.ge-bl-export.is-on{background:rgb(var(--sig));color:#1c1206}
.ge-bl-view{position:relative;flex:1;min-height:0;overflow:hidden;background:#3d3d3d}.ge-bl-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ge-bl-hud,.ge-bl-op{position:absolute;left:1.1cqw;font:500 max(8.5px,.92cqw)/1.35 var(--sans);color:#e6e6e6;text-shadow:0 1px 1px #000;white-space:nowrap}
.ge-bl-hud{top:1.2cqh}.ge-bl-op{bottom:1.3cqh;font-family:var(--mono)}.ge-bl-op b{font-weight:inherit}.ge-bl-op.is-done{color:rgb(var(--sig))}.ge-bl-op.is-done span{display:none}
.ge-bl-flash{position:absolute;inset:0;background:radial-gradient(80% 90% at 85% 0,rgb(var(--sig) / .75),rgb(var(--sig) / .12) 60%,transparent);opacity:0;pointer-events:none}
.ge-file-panel{position:absolute;left:40cqw;top:35cqh;width:19cqw;display:flex;flex-direction:column}
.ge-file-change{font-size:max(8.5px,1cqw);font-weight:600;letter-spacing:.06em;color:var(--dim)}.file-changed .ge-file-change{color:rgb(var(--sig))}.file-written .ge-file-change{color:#eef2f7}
.ge-file-path{margin:0;padding:1.3cqh 1.4cqw;border-bottom:1px solid #1d232c;background:#0b0f15;font:500 max(8.5px,.92cqw)/1.45 var(--mono);color:#8a93a0}.ge-file-path i{font-style:normal;margin:0 .12em;color:#4d5664}
.ge-file-main{display:flex;align-items:center;gap:1.1cqw;padding:2.2cqh 1.4cqw 1.8cqh}.ge-file-main>div{min-width:0;display:flex;flex-direction:column;gap:.7cqh}
.ge-file-main strong{font-size:max(10px,1.45cqw);font-weight:600;color:var(--ink)}.ge-file-main span{font-size:max(8.5px,.95cqw);color:var(--dim)}
.ge-doc{flex:none;width:4.2cqw}.ge-doc svg{display:block;width:100%;overflow:visible;transform-origin:50% 100%}
.gd-body{fill:#222b37;stroke:#5b687b;stroke-width:1.2}.gd-fold{fill:#3b4657;stroke:#5b687b;stroke-width:1.2;stroke-linejoin:round}.gd-lines{stroke:#4b5667;stroke-width:1.6}
.gd-fill{fill:rgb(var(--sig));transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}.gd-band{fill:#33404f}.ge-doc text{font:700 7.5px var(--mono);fill:#c7d0dc;text-anchor:middle}
.file-changed .gd-band{fill:rgb(var(--sig))}.file-changed .ge-doc text{fill:#1c1206}
.ge-file-meta{margin:0;padding:0 1.4cqw 2.6cqh;display:flex;flex-direction:column;gap:1cqh;font-size:max(8.5px,1cqw)}.ge-file-meta div{display:flex;align-items:center;justify-content:space-between;gap:1cqw}
.ge-file-meta dt{color:var(--dim)}.ge-file-meta dd{margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ge-file-time{height:1.4em;line-height:1.4;overflow:hidden;padding:0 .35em;border-radius:.25em;background:rgb(var(--sig) / calc(var(--hl,0) * .3))}.ge-file-time span{display:flex;flex-direction:column}.ge-file-time i{font-style:normal}
.ge-file-bar{position:absolute;left:0;right:0;bottom:0;height:max(2px,.5cqh);transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,rgb(var(--sig)) 0 38%,#fff3e2 50%,rgb(var(--sig)) 62%) 0 0/250% 100%}
.ge-items .ge-inventory{position:absolute;left:64cqw;top:29cqh;width:29cqw;height:52cqh}
.ge-inventory{display:flex;flex-direction:column}.ge-inventory-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.8cqh 1cqw;padding:2.6cqh 1.5cqw;align-content:start}
.ge-item{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1.2cqh;padding:1.1cqh .6cqw 1.5cqh;background:#111720;border:1px solid #29313e;border-radius:.6cqmin;color:var(--dim);font-size:max(8.5px,1.05cqw)}
.ge-item svg{width:100%;height:9.5cqh;stroke-linejoin:round}.ge-item-arch svg{overflow:visible}
.ge-arch-before,.ge-arch-after{transform-box:fill-box;transform-origin:50% 100%}.ge-arch-after{opacity:0}
.ge-slot-shim{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 35%,rgb(var(--sig) / .3) 50%,transparent 65%) 130% 0/300% 100% no-repeat;opacity:0}
.ge-slot-ring{position:absolute;inset:-1px;border:2px solid rgb(var(--sig));border-radius:inherit;opacity:0;pointer-events:none}
.ge-updated{position:absolute;left:50%;top:-1.3cqh;translate:-50% 0;padding:.5cqh .45cqw;border-radius:.25cqmin;background:rgb(var(--sig));color:#1c1206;font-size:max(8.5px,.95cqw);font-weight:700;letter-spacing:.025em;visibility:hidden}
.inventory-updated .ge-item-arch{background:#221c15;border-color:rgb(var(--sig) / .85);color:var(--ink)}.inventory-updated .ge-updated{visibility:inherit}
.ge-inventory-status{display:flex;align-items:center;gap:.7cqw;padding:1.8cqh 1.5cqw;border-top:1px solid #242a34;color:var(--dim);font-size:max(8.5px,1.05cqw);white-space:nowrap}
.ge-inventory-status i{flex:none;width:.55cqw;height:.55cqw;border-radius:1px;background:var(--mute)}.file-changed .ge-inventory-status{color:var(--ink-2)}.file-changed .ge-inventory-status i{background:rgb(var(--sig))}
.inventory-updated .ge-inventory-status i{background:var(--green)}
@container frame (aspect-ratio < 1){
  .ge-heading{left:7cqw;right:7cqw;top:5cqh}.ge-heading>span{font-size:2.8cqw;letter-spacing:.09em}.ge-heading h2{margin-top:1.7cqh;font-size:7.2cqw;line-height:1.1}
  .ge-toolbar{height:5.2cqh;padding:0 3cqw;font-size:max(9.5px,2.65cqw);gap:2cqw}
  .ge-nod-panel{top:23cqh}.ge-inspector{grid-template-columns:31cqw 1fr;min-height:0}
  .ge-tree{display:none}.ge-view{grid-row:1;padding:1.6cqh 2cqw;border-bottom:1px solid #242a34}.ge-view svg{max-height:19cqh}
  .ge-properties{display:contents}.ge-selected{padding:2cqh 3cqw;justify-content:center;gap:.8cqh;border-bottom:1px solid #242a34}
  .ge-selected>span,.ge-dest>span{font-size:max(9px,2.3cqw);letter-spacing:.1em}.ge-selected strong{font-size:max(13px,4.6cqw)}
  .ge-crumb{display:block;font-size:max(9.5px,2.45cqw);line-height:1.35;color:var(--dim)}
  .ge-dest{grid-column:1/-1;padding:2.2cqh 3cqw 0}.ge-dest code{font-size:max(9.5px,2.5cqw)}
  .ge-path{padding:1.3cqh 2.5cqw;box-shadow:inset .6cqw 0 0 var(--dest);font-size:max(12px,3.5cqw)}.ge-dest small{font-size:max(9.5px,2.45cqw)}
  .ge-call{grid-column:1/-1;padding:1.8cqh 3cqw 2.2cqh;gap:1.2cqh 2.5cqw}.ge-save{padding:1.3cqh 2.5cqw;font-size:max(11px,3.05cqw)}
  .ge-save>span{display:none}
  .ge-output{gap:2.5cqw;padding:2cqh 3cqw;min-height:11cqh}.ge-file-icon{width:7cqw;height:9cqw;font-size:1.9cqw}.ge-output strong{font-size:3.6cqw}.ge-output>div>span{font-size:2.35cqw}.ge-saved{font-size:2.7cqw}
  .ge-nod .ge-output{display:grid;grid-template-columns:7cqw 1fr auto;gap:.7cqh 2.5cqw;align-items:center}.ge-nod .ge-output>div{display:contents}
  .ge-nod .ge-output .ge-file-icon{grid-row:1/3}.ge-nod .ge-output strong{grid-column:2/-1;font-size:max(12px,3.5cqw)}.ge-nod .ge-output>div>span{font-size:max(9.5px,2.45cqw)}.ge-nod .ge-saved{font-size:max(10px,2.7cqw)}
  .ge-wire .gew-l{display:none}.ge-wire .gew-p{display:block}.ge-items .ge-heading h2{font-size:5.6cqw}
  .ge-blender{left:7cqw;top:19cqh;width:43cqw;height:31cqh}
  .ge-bl-bar{height:5.2cqh;gap:2.2cqw;padding-left:2.4cqw;font-size:max(8.5px,2.45cqw)}.ge-bl-x{display:none}.ge-bl-logo{width:3.1cqw;height:3.1cqw}.ge-bl-export{padding:0 2.4cqw}
  .ge-bl-hud,.ge-bl-op{left:2.2cqw;font-size:max(8.5px,2.2cqw)}.ge-bl-hud{top:1cqh}.ge-bl-op{bottom:1cqh}
  .ge-file-panel{left:54cqw;top:19cqh;width:39cqw;height:31cqh}.ge-file-change{font-size:max(8.5px,2.3cqw)}
  .ge-file-path{padding:.9cqh 2.4cqw;font-size:max(8.5px,2.3cqw);line-height:1.35}
  .ge-file-main{gap:2.2cqw;padding:1.4cqh 2.4cqw 1.1cqh}.ge-doc{width:7.6cqw}.ge-file-main>div{gap:.4cqh}.ge-file-main strong{font-size:max(10px,2.85cqw)}.ge-file-main span{font-size:max(8.5px,2.3cqw)}
  .ge-file-meta{padding:0 2.4cqw 1.4cqh;gap:.6cqh;font-size:max(8.5px,2.35cqw)}
  .ge-items .ge-inventory{left:7cqw;top:55cqh;width:86cqw;height:35cqh}
  .ge-inventory-grid{grid-template-columns:repeat(4,1fr);gap:1.4cqw;padding:2.2cqh 2cqw 1.6cqh}.ge-item:nth-child(n+5){display:none}
  .ge-item{font-size:max(8.5px,2.6cqw);padding:1cqh .7cqw 1.3cqh;gap:1cqh}.ge-item svg{height:12.5cqh}
  .ge-updated{top:-1.1cqh;padding:.4cqh .55cqw;font-size:max(8.5px,1.95cqw)}.ge-inventory-status{gap:1.5cqw;padding:1.5cqh 2cqw;font-size:max(9px,2.6cqw)}.ge-inventory-status i{width:1.3cqw;height:1.3cqw}
}

/* G6 code scene: the montage's terminal button (scene CSS for the rest of the montage lives in montage/*.js) */
.g6{position:absolute;inset:0}
.g6-fx{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 42% 30% at 50% 68%,rgba(43,255,136,calc(var(--fl,0) * .12)),transparent),radial-gradient(ellipse 75% 70% at 50% 46%,transparent 50%,rgba(2,4,8,.4))} /* patch flash + vignette */
.g6-code{position:absolute;left:7cqw;top:6cqh;font:500 1.9cqw/1.7 var(--mono);background:linear-gradient(#0b0f15,#090c11);border:1px solid color-mix(in srgb,var(--green) calc(var(--fl,0) * 70%),#1d2330);border-radius:1cqmin;padding:0 5cqmin 2cqmin 2.4cqmin;color:#cdd3dc;overflow:hidden;
  box-shadow:0 2cqmin 5cqmin rgba(0,0,0,.6),0 0 calc(var(--fl,0) * 4cqmin) rgba(43,255,136,calc(var(--fl,0) * .45))}
.g6-code>div{white-space:pre}
.g6-hd{display:flex;align-items:center;gap:.7em;margin:0 -5cqmin 1.2cqmin -2.4cqmin;padding:.55em 2.4cqmin;border-bottom:1px solid #1a202b;background:#0e131b;font:600 max(10px,.62em)/1.2 var(--mono);letter-spacing:.08em;color:#8a93a0}
.g6-hd>i{flex:none;width:.32em;height:1.05em;background:var(--ice);transform:skewX(-12deg)} /* slanted tick, as the factory chip */
.g6-hd>b{color:var(--ink-2);font-weight:600}
.g6-st{margin-left:auto;padding-left:3em;text-transform:uppercase;letter-spacing:.16em;color:#5d6676}.g6-st.on{color:var(--green)}
.g6-code em{color:#3a4250;font-style:normal;margin-right:2.4cqmin}.g6-code .k{color:#c3a6ff}.g6-code .f{color:#7fd8ff}.g6-code .p{color:#7a8496}
.g6-code .v{display:inline-block;vertical-align:top;height:1.7em;overflow:hidden}.g6-code .vr{display:block}.g6-code .vr>span{display:block;color:var(--amber)}.g6-code .vr>span+span{color:var(--green)}
.g6-code .chg{position:relative;isolation:isolate;margin:0 -5cqmin 0 -2.4cqmin;padding:0 5cqmin 0 2.4cqmin;box-shadow:inset .5cqmin 0 0 rgba(255,178,31,.75)}.g6-code .chg.on{background:rgba(43,255,136,.1);box-shadow:inset .5cqmin 0 0 var(--green)}
.g6-sw{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(43,255,136,.06),rgba(43,255,136,.3) 85%,rgba(200,255,225,.55));transform-origin:0 50%;transform:scaleX(0);pointer-events:none} /* the hot-patch wipe, under the text */
.g6-toast{position:absolute;left:50%;bottom:16cqh;width:max-content;translate:-50% 0;display:flex;gap:.8em;align-items:center;padding:.7em 1.4em .7em 1em;border-radius:1cqmin;overflow:hidden;
  background:rgba(4,20,11,.92);border:1px solid rgba(43,255,136,.4);box-shadow:0 1.2cqmin 3cqmin rgba(0,0,0,.55);font:600 max(12px,2.4cqmin) var(--mono);letter-spacing:.06em;color:var(--ink-2);white-space:nowrap}
.g6-toast::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(43,255,136,.28) 50%,transparent 65%);translate:calc((var(--sw,0) * 2 - 1) * 100%) 0;pointer-events:none} /* one sheen pass after it lands */
.g6-toast .ok{display:grid;place-items:center;width:1.6em;height:1.35em;background:var(--green);transform:skewX(-11deg)}.g6-toast .ok b{color:#03140a;transform:skewX(11deg);font-weight:800} /* ~11deg tile, not a dot */
.g6-toast u{width:1px;height:1.1em;background:rgba(43,255,136,.3)}
.g6-toast b{color:var(--ink)}.g6-toast i{font-style:normal;color:var(--green)}
@container frame (aspect-ratio < 1){ .g6-code{font-size:4.2cqw;left:6cqw;top:6cqh}.g6-toast{font-size:max(12px,3.3cqw)} }

/* ---------- racing line, captions, HUD ---------- */
#line{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.cap{position:absolute;left:16px;right:16px;top:50%;translate:0 -50%;margin:0;text-align:center;font:300 clamp(22px,2.7vw,44px)/1.25 var(--sans);letter-spacing:.005em;color:#e8ecf2;pointer-events:none;visibility:hidden}
.cap .w{display:inline-block;opacity:0;white-space:pre}
.cap2{top:42%}
/* caption 3: the unlock bridge. "Unlocked:" holds the centre; category before it, the unlock after (stacked in portrait) */
.cap.unlock{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:baseline;column-gap:.3em;white-space:nowrap;visibility:hidden}
.ul-k,.ul-r,.ul-n,.ul-c,.ul-n b{display:inline-block}.ul-k{justify-self:end}.ul-n{overflow:hidden;vertical-align:bottom;color:var(--ink-2)}.ul-n b{font-weight:inherit}.ul-c{color:var(--dim)}.ul-r{justify-self:start;transform-origin:0 70%}.ul-v{font-weight:500;color:#fff}
/* final state: a blank slot + editor pencil (yours to fill in), never a named promise. The pencil is always blue (#2a8bff, palette blue) */
.ul-slot{display:none;align-items:flex-end;gap:.28em}.is-blank .ul-slot{display:inline-flex}.is-blank .ul-v{display:none}
.ul-slot i{display:block;width:4.2em;height:.9em;border-bottom:.075em solid rgba(232,236,242,.78);transform-origin:0 50%}
.ul-slot svg{display:block;width:.82em;height:.82em;fill:none;stroke:#2a8bff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ul-l{font-weight:400;color:var(--ink-2);text-shadow:0 0 calc(var(--hit,0) * .5em) rgba(43,255,136,calc(var(--hit,0) * .85))}
@media (max-aspect-ratio:1/1){ .cap.unlock{grid-template-columns:minmax(0,1fr);row-gap:.12em} .ul-k,.ul-r{justify-self:center} .ul-k{font-size:.6em;letter-spacing:.18em;text-transform:uppercase} }
/* timeline only: the final blank takes a transparent input laid over its own line and pencil (main.js syncEditor), so
   untouched it is pixel-for-pixel the cinematic blank, fade and blur included. Once focused or typed it holds full
   light; with a name the line follows the text (--ulw) and the action shows under it. Only the form takes the pointer;
   the caption stays pointer-transparent around it */
.cap.unlock.editing:is(.typed,:focus-within){opacity:1!important;filter:none!important}
.ul-slot{position:relative}.ul-slot i{width:var(--ulw,4.2em)}
.ul-edit{position:absolute;left:0;bottom:0;width:calc(var(--ulw,4.2em) + 1.1em);pointer-events:auto}
.ul-edit[hidden]{display:none}
.ul-edit input{display:block;width:100%;height:1.15em;margin:0;padding:0 1.1em .06em 0;border:0;border-radius:0;background:transparent;
  font:500 1em/1.1 var(--sans);letter-spacing:inherit;color:#fff;caret-color:var(--green);outline:none}
.cap.unlock.typed .ul-slot:has(input:focus) i{border-bottom-color:var(--green)}
/* the action fades in with the first character (drifting down off the line) and back out at none */
.ul-edit .ul-go,.ul-help,.ul-msg{opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .22s ease,transform .3s cubic-bezier(.2,.7,.3,1),visibility 0s .3s}
.cap.unlock.typed :is(.ul-edit .ul-go,.ul-help,.ul-msg){opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
/* the action, under the name: the CTA's italic parallelogram (skewed backing, upright text), never a pill */
.ul-go{--k:-11deg;position:absolute;left:0;top:calc(100% + .45em + 6px);isolation:isolate;display:inline-grid;place-items:center;height:30px;margin:0;padding:0 14px;border:0;background:none;
  font:700 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--green);cursor:pointer;transition:color .2s}
.ul-go::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid var(--green);border-radius:5px;background:rgba(6,10,14,.55);transform:skewX(var(--k));transition:background .2s,border-color .2s}
.ul-go[hidden]{display:none}
.ul-go:is(:hover,:focus-visible):not([aria-disabled="true"]){color:#03140b}.ul-go:is(:hover,:focus-visible):not([aria-disabled="true"])::before{background:var(--green)} /* an outline at rest, filled when it is pointed at */
.ul-go:focus-visible{outline:none}.ul-go:focus-visible::before{box-shadow:0 0 0 2px #040506,0 0 0 4px rgba(127,216,255,.85)}
.ul-go[aria-disabled="true"]{color:var(--dim);cursor:default}
.ul-go[aria-disabled="true"]::before{background:rgba(10,14,20,.7);border-color:#2a313b}
.ul-go[aria-busy]{cursor:progress}
.ul-edit[data-state="sent"] .ul-go{color:var(--green)}.ul-edit[data-state="sent"] .ul-go::before{background:#0d1d14;border-color:rgba(43,255,136,.55)}
/* the status line hangs under the action, so the caption never moves when it changes */
/* signed in only: the one-entry rule, right under the Submit button; the status line steps down below it */
.ul-help{position:absolute;left:0;top:calc(100% + .45em + 44px);font:500 11px/1.3 var(--mono);letter-spacing:.02em;color:var(--dim);white-space:nowrap}
.ul-help[hidden]{display:none}
.ul-edit.helped .ul-msg{top:calc(100% + .45em + 64px)}
.ul-msg{position:absolute;left:0;top:calc(100% + .45em + 44px);width:max-content;max-width:min(380px,86vw);font:400 13px/1.4 var(--sans);letter-spacing:0;white-space:normal;text-align:left;color:var(--dim)}
.ul-edit[data-state="error"] .ul-msg{color:#ff8a94}.ul-edit[data-state="sent"] .ul-msg{color:var(--green)}
.ul-edit.nudge .ul-msg{animation:ul-nudge .6s ease-out}
@keyframes ul-nudge{0%,40%{color:var(--amber)}100%{color:var(--dim)}}
@media (max-aspect-ratio:1/1){ .ul-msg,.ul-help,.ul-edit .ul-go{left:50%;translate:-50% 0;text-align:center} }
@media (prefers-reduced-motion:reduce){ .ul-edit.nudge .ul-msg{animation:none} }
body.rm .ul-edit.nudge .ul-msg{animation:none}
@media (prefers-reduced-motion:reduce){ .cap.unlock :is(.ul-edit .ul-go,.ul-help,.ul-msg){transform:none!important} } /* a plain fade, no drift */
body.rm .cap.unlock :is(.ul-edit .ul-go,.ul-help,.ul-msg){transform:none!important}
.hud{position:absolute;top:clamp(18px,5vh,48px);left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;pointer-events:none;font-family:var(--mono)}
.tm{font:500 clamp(14px,1.25vw,20px)/1 var(--mono);letter-spacing:.06em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cp{display:flex;gap:.9em;align-items:center;padding:.45em .8em;border-radius:6px;font:600 clamp(11px,.85vw,14px)/1 var(--mono);font-variant-numeric:tabular-nums;
  background:rgba(5,14,26,.86);border:1px solid rgba(58,160,255,.4);box-shadow:0 0 22px rgba(58,160,255,.16);color:var(--ink-2);opacity:0;white-space:nowrap}
.cp b{color:var(--ink);letter-spacing:.08em}.cp i{font-style:normal;color:var(--ahead)}

/* ---------- reveal ---------- */
.reveal{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rv-inner{position:relative;display:flex;flex-direction:column;align-items:center}
.rv-shake{position:relative;display:flex;flex-direction:column;align-items:center}
.pods{display:flex;gap:clamp(14px,1.2vw,22px);padding:clamp(10px,.8vw,15px) clamp(14px,1.1vw,20px);border-radius:6px;margin-bottom:clamp(18px,3vh,34px);opacity:0;
  background:linear-gradient(#0b0d10,#07080a);border:1px solid #15181d;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 20px 60px rgba(0,0,0,.6)}
.pods{will-change:transform}
.pods i{width:clamp(26px,2.3vw,44px);height:clamp(26px,2.3vw,44px);border-radius:50%;position:relative;background:radial-gradient(circle at 35% 30%,#1c1f24,#0c0e11 70%);box-shadow:inset 0 0 0 1px #1e2228}
.pods i::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 40% 35%,#fff 0 8%,var(--c,var(--red)) 30%,color-mix(in srgb,var(--c,var(--red)) 60%,#000) 80%);
  box-shadow:0 0 18px 4px var(--c,var(--red)),0 0 60px 10px color-mix(in srgb,var(--c,var(--red)) 45%,transparent)}
.pods i.on::after{opacity:1}.pods.go i{--c:var(--green)}
.sline{position:absolute;left:50%;top:50%;width:min(56vw,760px);height:2px;translate:-50% -50%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 30%,#fff 50%,rgba(255,255,255,.9) 70%,transparent);box-shadow:0 0 18px rgba(255,255,255,.5)}
.sline.go{background:linear-gradient(90deg,transparent,rgb(var(--ca1)) 22%,#fff 50%,rgb(var(--ca2)) 78%,transparent);box-shadow:0 0 22px rgb(var(--ca1) / .45),0 0 22px rgb(var(--ca2) / .35)}
.wm{display:flex;margin:0;font:italic 900 clamp(110px,19vw,310px)/.84 var(--display);font-variation-settings:"wdth" 125;letter-spacing:-.03em;color:#f4f6f9}
.L{position:relative;display:inline-block;opacity:0;will-change:transform,opacity}
.ghosts{position:absolute;left:50%;top:0;width:0;height:0}
.ghost{position:absolute;left:0;top:0;translate:-50% 0;font:italic 900 clamp(110px,19vw,310px)/.84 var(--display);font-variation-settings:"wdth" 125;color:transparent;-webkit-text-stroke:2px rgba(242,244,247,.9);opacity:0;pointer-events:none}
.sub{position:relative;align-self:stretch;height:1.1em;margin:clamp(14px,2.2vh,28px) 0 0;font:italic 600 clamp(18px,3vw,54px)/1.1 var(--display);font-variation-settings:"wdth" 108;color:#dfe4ea;white-space:nowrap;opacity:0}
/* the subtitle is taken out of the lockup's width, so its tracking animation can never re-centre (or lurch) the wordmark */
.sub-in{position:absolute;left:50%;top:0;translate:-50% 0;letter-spacing:.06em;will-change:transform}
/* the Ngolo easter egg: placed and sized per layout by main.js (placeNgolo), drawn per frame by renderNgolo */
.ngolo{position:absolute;left:0;top:0;visibility:hidden;opacity:0;transform-origin:50% 100%;pointer-events:none;will-change:transform;filter:drop-shadow(0 .25em .35em rgba(0,0,0,.55))}
.ngolo svg{display:block;width:100%;height:100%;overflow:visible}
.uline{width:min(42vw,560px);height:2px;margin-top:clamp(14px,2.2vh,26px);background:linear-gradient(90deg,transparent,var(--green) 30%,#c9ffe2 50%,var(--green) 70%,transparent);transform:scaleX(0);box-shadow:0 0 18px rgba(43,255,136,.45)}

/* end state. Shape rule (Max): boxes with a little rounding (buttons/chips ~5-6px or ~.45em; tiles 3px), or ~11deg italic
   parallelograms; never pills (radius stays well under half the height), no glowing dots */
.endui{position:absolute;top:100%;left:50%;translate:-50% 0;width:min(92vw,800px);margin-top:clamp(18px,3.6vh,52px);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,16px);opacity:0;pointer-events:none}
body.end-live .endui{pointer-events:auto} /* the end state, and the timeline's "End state" section (main.js endLive) */
.endui.ef-cls .cls{display:none} /* end state, too tall for the screen (main.js endFit): the REDACTED row goes first */
.endui.rp-up .cls{order:1}.endui.rp-tight :is(.stats-box,.cls),.endui.rp-kick .beta-k,.endui.rp-min .feats{display:none} /* timeline open, no room to lift Replay clear of the panel (main.js scrubLift) */
.endui .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.beta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px}
.beta-k{margin:0;font:600 clamp(12px,1vw,15px)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
/* one italic-matched parallelogram split in two; a green slider marks the live half. Hover/focus Login and the green
   slides across (labels swap ink); a click floods the whole group, the other half folds away and the label confirms. */
.cta{--k:-11deg;--ease:cubic-bezier(.2,.9,.25,1.12);position:relative;display:grid;grid-template-columns:1fr 1fr;height:38px;border:1px solid #2a313b;border-radius:5px;
  background:rgba(10,13,18,.72);transform:skewX(var(--k));overflow:hidden;transition:grid-template-columns .38s var(--ease),border-color .25s,box-shadow .25s}
.cta::before{content:"";position:absolute;inset:0 50% 0 0;background:var(--green);transition:inset .34s var(--ease),background .2s}
.cta::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);opacity:0;pointer-events:none}
.cta:not(.done):has(.btn[data-i="1"]:is(:hover,:focus-visible))::before{inset:0 0 0 50%}
.cta:hover,.cta:focus-within{border-color:#4a5462;box-shadow:0 0 22px rgba(43,255,136,.14)}
.btn{position:relative;z-index:1;display:grid;place-items:center;min-width:0;padding:0;overflow:hidden;text-decoration:none;white-space:nowrap;
  font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);outline:none;transition:color .22s .06s}
.btn span{display:block;padding:0 20px;transform:skewX(calc(-1 * var(--k)))}
.btn.go{color:#03140b}
.cta:not(.done):has(.btn[data-i="1"]:is(:hover,:focus-visible)) .btn.go{color:var(--ink)}
.cta:not(.done):has(.btn[data-i="1"]:is(:hover,:focus-visible)) .btn[data-i="1"]{color:#03140b}
.btn:focus-visible span{text-decoration:underline;text-underline-offset:4px}
/* clicked: green floods both halves (with a sheen pass), the other half folds to nothing, the label reads Coming soon */
.cta.done::before{inset:0;background:#7dffb8}
.cta.done::after{animation:cta-sheen .55s .12s ease-out}
.cta.done[data-pick="0"]{grid-template-columns:1fr 0fr}
.cta.done[data-pick="1"]{grid-template-columns:0fr 1fr}
.cta.done .btn{color:#03140b}
.cta.done .btn span{animation:cta-pop .42s var(--ease)}
@keyframes cta-sheen{0%{left:-40%;opacity:1}100%{left:115%;opacity:0}}
@keyframes cta-pop{0%{transform:skewX(calc(-1 * var(--k))) scale(.82)}60%{transform:skewX(calc(-1 * var(--k))) scale(1.08)}100%{transform:skewX(calc(-1 * var(--k))) scale(1)}}
@media (prefers-reduced-motion:reduce){ .cta,.cta::before,.btn{transition:none} .cta.done::after,.cta.done .btn span{animation:none} }
body.rm :is(.cta,.btn),body.rm .cta::before{transition:none} body.rm .cta.done::after,body.rm .cta.done .btn span{animation:none} /* the ?rm toggle, same as the OS setting */
/* example-data tab: a crisp folder tab standing on the stats' top rule (amber = caution, not a live green) */
.stats-box{width:min(100%,600px);display:flex;flex-direction:column;align-items:flex-start}
.stats-ex{margin:0;padding:3px 8px 2px;border:1px solid rgba(255,178,31,.38);border-bottom:0;border-radius:2px 2px 0 0;background:rgba(10,13,18,.72);
  font:600 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);white-space:nowrap}
.stats{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid #161a20}
.stats li{display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 6px 6px;text-align:center}
.stats li+li{border-left:1px solid #161a20}
.stats b{font:italic 800 clamp(19px,1.6vw,25px)/1 var(--display);font-variation-settings:"wdth" 112;letter-spacing:.01em;color:var(--ink);white-space:nowrap}
/* the approved-but-not-signed-in count: lower right of the digits, ~1/4 size with a readable floor (not growth: no green) */
.stats sub{margin-left:.35em;font:600 max(10px,.4em)/1 var(--mono);vertical-align:baseline;letter-spacing:.02em;color:var(--ink-2)}
.stats span{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
/* supplemental line: --dim (>=5.2:1 on the end-state ground), never below the sub's 10px readable floor */
.stats small{display:block;margin-top:2px;font-size:10px;letter-spacing:.03em;text-transform:none;color:var(--dim)}
.feats,.cls{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;font:500 clamp(11px,.85vw,12.5px)/1.2 var(--mono);letter-spacing:.02em}
/* number and label share a baseline; the padding centres one line in the 30px tile (an extra line grows it) */
.feats li{display:flex;align-items:baseline;gap:9px;min-height:30px;padding:calc((28px - 1.2em) / 2) 10px calc((28px - 1.2em) / 2) 9px;border:1px solid #1a1e25;border-left:2px solid rgba(43,255,136,.6);border-radius:3px;background:linear-gradient(90deg,rgba(17,22,28,.85),rgba(10,12,16,.55));color:var(--ink-2)}
.feats i{font-style:normal;font-size:.82em;color:var(--mute);font-variant-numeric:tabular-nums}
/* "Cute Cacti": hovering the tile (or focusing it from the keyboard, or a tap) brings a little Ngolo up at its right
   end, standing on the tile's floor and peeking over its top edge (inside its own tile, it never covers a neighbour's
   label). main.js sets .ng-on. It pops in with an overshoot, dances while it shows (below), and on leaving swells a touch
   and shrinks away. First the reveal egg's SVG; the real model (cacti-model.js, a canvas a little larger than the box so
   its hops and sways are never clipped) cross-fades in once loaded, [data-m="3d"]. main.js runs either dance only while
   it shows (.ng-dance for the SVG), so nothing animates unseen. Reduced motion: it fades in and out, still */
.feats .cacti{position:relative}
.feats .cacti:focus-visible{outline:1px solid rgba(43,255,136,.75);outline-offset:2px}
.cacti-ng{position:absolute;right:9px;bottom:-1px;z-index:2;width:32px;height:35px;opacity:0;transform:scale(0);transform-origin:50% 95%;pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));transition:transform .34s cubic-bezier(.36,0,.66,-.56),opacity .1s linear .24s}
.cacti.ng-on .cacti-ng{opacity:1;transform:none;transition:transform .46s cubic-bezier(.34,1.56,.64,1),opacity .08s linear}
.cacti-dance,.cacti-dance svg{display:block;width:100%;height:100%;overflow:visible}
.cacti-dance{transition:opacity .18s linear}
.cacti-3d{position:absolute;left:-14px;bottom:0;width:60px;height:51px;opacity:0;transition:opacity .18s linear}
.cacti-ng[data-m="3d"] .cacti-dance{opacity:0;visibility:hidden;transition:opacity .18s linear,visibility 0s .18s}
.cacti-ng[data-m="3d"] .cacti-3d{opacity:1}
.cacti-dance{transform-origin:50% 95%}.cacti-dance [data-ng=shadow]{transform-origin:50px 104px}
.cacti-dance :is([data-ng=body],[data-ng=face],[data-ng=flower]){transform-origin:50px 76px}.cacti-dance [data-ng=flower]>*{transform-origin:50px 17.5px} /* rock at the pot rim; the flower also wobbles on its own centre */
/* The dance, one hop a beat (128 BPM, T = .46875 s), each motion on its own property and curve so nothing stops dead on
   the ground: the hop is a gravity arc (ease-out up, ease-in down) with a short ground contact; squash and stretch
   lands, rebounds, crouches, stretches off the ground and again as it falls; the lean sways on through the landings
   (two beats, peaking at the top of each hop); the body rocks a quarter beat behind the pot and the flower whips after
   it; the shadow stays on the floor and shrinks while it is up */
.ng-dance .cacti-dance{animation:ng-hop .46875s infinite,ng-squash .46875s ease-in-out infinite,ng-lean .9375s ease-in-out -.66s infinite}
.ng-dance .cacti-dance [data-ng=shadow]{animation:ng-shadow .46875s infinite}
.ng-dance .cacti-dance :is([data-ng=body],[data-ng=face],[data-ng=flower]){animation:ng-rock .9375s ease-in-out -.54s infinite}
.ng-dance .cacti-dance [data-ng=flower]>*{animation:ng-bloom .46875s ease-in-out -.05s infinite}
@keyframes ng-hop{0%,16%{translate:0 0;animation-timing-function:cubic-bezier(.25,.46,.45,.94)}58%{translate:0 -26%;animation-timing-function:cubic-bezier(.55,.085,.68,.53)}100%{translate:0 0}}
@keyframes ng-squash{0%,100%{scale:1.13 .87}6%{scale:.95 1.06}11%{scale:1.03 .97}15%{scale:1.09 .91}21%{scale:.92 1.1}40%{scale:.98 1.02}58%{scale:1.02 .98}84%{scale:.95 1.06}}
@keyframes ng-lean{0%,100%{rotate:-7deg}50%{rotate:7deg}}
@keyframes ng-shadow{0%,16%{translate:0 0;scale:1;opacity:1;animation-timing-function:cubic-bezier(.25,.46,.45,.94)}58%{translate:0 28.6px;scale:.62 .8;opacity:.55;animation-timing-function:cubic-bezier(.55,.085,.68,.53)}100%{translate:0 0;scale:1;opacity:1}}
@keyframes ng-rock{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes ng-bloom{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
/* features: 4 + 4 on a 24-column grid. Row 1 is four equal tiles; row 2 sizes its tiles to their labels (6 / 5 / 8 / 5:
   at 4 columns the sixth label wrapped alone from 728px up), the Blender / MT tile ~2/3 of its old two-tile span */
.feats{grid-template-columns:repeat(24,minmax(0,1fr))}
.feats li{grid-column:span 6}.feats li:nth-child(6){grid-column:span 5}.feats .wide{grid-column:span 8}.feats .mcp{grid-column:span 5}
/* four REDACTED tiles, each glitching on its own clock: shade runs flicker (a stepped strip of variants), the word
   swaps letters and tears into chromatic slices in bursts. Transform/clip only; paused while the end UI is unseen */
.cls{font-weight:700;letter-spacing:.06em;color:var(--ink-2);cursor:help}
.cls li{position:relative;display:flex;align-items:center;justify-content:center;gap:.55em;height:30px;border:1px solid #1d222a;border-radius:3px;overflow:hidden;filter:brightness(.5); /* = black at .5 over the tile: quieter, same detail */
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.028) 0 5px,transparent 5px 10px),rgba(8,10,13,.75);animation:rd-j var(--g) steps(1) var(--gd) infinite}
.cls li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgb(var(--ca1) / .35);opacity:.8;animation:rd-scan var(--g) linear var(--gd) infinite;pointer-events:none}
.cls .sh,.cls .w{position:relative;display:inline-block;height:1.4em;line-height:1.4em;font-style:normal;white-space:nowrap;clip-path:inset(.1em -12px)}
.cls .sh{color:#8d96a3;letter-spacing:-.04em;text-shadow:-1px 0 rgb(var(--ca1) / .55),1px 0 rgb(var(--ca2) / .55)}
.cls .sh>i,.cls .w>i{display:block;font-style:normal}
.cls .sh>i{animation:rd-sh var(--s) steps(6) var(--d) infinite}
.cls .w>i{text-shadow:-1px 0 rgb(var(--ca1) / .7),1px 0 rgb(var(--ca2) / .7);animation:rd-w var(--g) steps(1) var(--gd) infinite}
.cls .w::before,.cls .w::after{content:attr(data-t);position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.cls .w::before{color:rgb(var(--ca1));animation:rd-a var(--g) steps(1) var(--gd) infinite}
.cls .w::after{color:rgb(var(--ca2));animation:rd-b var(--g) steps(1) var(--gd) infinite}
@keyframes rd-sh{to{transform:translateY(-8.4em)}}
@keyframes rd-w{0%{transform:none}22%{transform:translateY(-1.4em)}23.5%{transform:none}61%{transform:translateY(-2.8em)}62.5%{transform:translateY(-4.2em)}64%{transform:none}86%{transform:translateY(-1.4em)}87%{transform:none}}
@keyframes rd-a{0%{opacity:0}22%{opacity:.85;clip-path:inset(0 0 55% 0);transform:translateX(-3px)}23.5%{opacity:0}61%{opacity:.9;clip-path:inset(15% 0 50% 0);transform:translateX(4px)}62.5%{opacity:.8;clip-path:inset(55% 0 0 0);transform:translateX(-2px)}64%{opacity:0}86%{opacity:.7;clip-path:inset(60% 0 5% 0);transform:translateX(2px)}87%{opacity:0}}
@keyframes rd-b{0%{opacity:0}22%{opacity:.8;clip-path:inset(50% 0 0 0);transform:translateX(3px)}23.5%{opacity:0}61%{opacity:.85;clip-path:inset(50% 0 10% 0);transform:translateX(-4px)}62.5%{opacity:.75;clip-path:inset(0 0 60% 0);transform:translateX(3px)}64%{opacity:0}86%{opacity:.7;clip-path:inset(0 0 55% 0);transform:translateX(-2px)}87%{opacity:0}}
@keyframes rd-j{0%{transform:none}61%{transform:translateX(1px) skewX(-8deg)}62.5%{transform:translateX(-1px)}64%{transform:none}}
@keyframes rd-scan{0%{translate:0 -2px;opacity:0}58%{translate:0 -2px;opacity:0}60%{opacity:.9}70%{translate:0 32px;opacity:.5}71%,100%{translate:0 32px;opacity:0}}
body:not(.ended):not(.scrubbing) :is(.cls li,.cls li::after,.cls i,.cls .w::before,.cls .w::after){animation-play-state:paused}
/* 2 x 4 up to 768px: from 728 to 760 the 24-column rows were too tight and wrapped three labels */
@media (max-width:768px){ .feats,.cls{grid-template-columns:repeat(2,minmax(0,1fr))} .feats li{gap:7px;padding:calc((28px - 1.2em) / 2) 7px} .feats li:nth-child(n){grid-column:auto} }
/* phones: the two long last tiles take a row each (two columns would wrap the Blender / MT label alone) */
@media (max-width:460px){ .feats li:is(.wide,.mcp){grid-column:span 2} }
@media (max-width:400px){ .feats,.cls{font-size:10.5px;letter-spacing:0} .cls{letter-spacing:.04em} }
@keyframes pulse{50%{opacity:.35}}
.replay{display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:11px 22px;border-radius:6px;border:1px solid rgba(127,216,255,.45);background:rgba(10,16,24,.72);cursor:pointer;
  font:600 14px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#cfe9ff;box-shadow:0 0 18px rgba(127,216,255,.12);transition:color .2s,border-color .2s,background .2s,box-shadow .2s}
.replay svg{width:18px;height:18px}
/* Replay, and Load state beside it (a shared #state link). Load state never pops: closed it is a zero-width, borderless
   ghost (its margin cancels the row gap), and opening grows its width and padding while it fades in, so the centred row
   glides Replay aside to make room; closing runs the same in reverse, fading first */
.rp-row{display:flex;justify-content:center;gap:10px}
.load-state{max-width:0;margin-left:-10px;padding-left:0;padding-right:0;border-width:0;overflow:hidden;white-space:nowrap;opacity:0;visibility:hidden;
  transition:max-width .5s cubic-bezier(.2,.7,.3,1) .08s,margin .5s cubic-bezier(.2,.7,.3,1) .08s,padding .5s cubic-bezier(.2,.7,.3,1) .08s,border-width 0s .58s,opacity .18s,visibility 0s .58s}
.load-state.on{max-width:260px;margin-left:0;padding-left:22px;padding-right:22px;border-width:1px;opacity:1;visibility:visible;
  transition:max-width .5s cubic-bezier(.2,.7,.3,1),margin .5s cubic-bezier(.2,.7,.3,1),padding .5s cubic-bezier(.2,.7,.3,1),border-width 0s,opacity .3s .2s,visibility 0s}
.replay:hover,.replay:focus-visible{color:#fff;border-color:rgba(127,216,255,.9);background:rgba(16,28,40,.9);box-shadow:0 0 24px rgba(127,216,255,.28);outline:none}
.scrubber{position:fixed;left:50%;bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 10px));translate:-50% 0;z-index:35;width:var(--frame-w);padding:14px 16px 12px;border:1px solid rgba(127,216,255,.18);border-radius:14px;background:linear-gradient(135deg,rgba(12,17,24,.9),rgba(6,8,12,.82));box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);text-align:left;pointer-events:auto;backdrop-filter:blur(12px)}
.scrubber[hidden]{display:none}
.scrubber:has(#scrub:focus){border-color:rgba(43,255,136,.3)} /* keys are live: the range has focus (also after a press on the panel) */
body.scrubbing .skip{opacity:0;pointer-events:none;visibility:hidden;transition:none}
.scrub-head,.scrub-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.scrub-head{gap:10px}
.scrub-kicker{flex:1 1 auto;min-width:0;display:flex;gap:8px;align-items:baseline;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.scrub-k{color:var(--mute)}
.scrub-sec{overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.scrub-time{flex:none;white-space:nowrap;color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.scrub-btn{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-6px 0;padding:0;border-radius:5px;border:1px solid #232a34;background:rgba(10,14,20,.7);color:var(--ink-2);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.scrub-btn svg{width:13px;height:13px}
.scrub-btn:hover,.scrub-btn:focus-visible{color:var(--ink);border-color:rgba(43,255,136,.5);outline:none}
.scrub-btn:focus-visible{box-shadow:0 0 0 2px rgba(127,216,255,.8)}
.scrub-play{color:var(--green)}
.scrub-play[data-playing="true"] .i-play,.scrub-play[data-playing="false"] .i-pause{display:none}
.scrub-close{margin-left:2px;color:var(--mute)}
/* replay speed (timeline only): tight boxes in one rounded frame; the pressed one is the current rate */
.scrub-rate{flex:none;display:inline-flex;align-items:center;gap:2px;margin:-4px 0;padding:2px;border:1px solid #232a34;border-radius:5px;background:rgba(10,14,20,.7);transition:border-color .2s}
.scrub-rate-k{padding:0 5px 0 4px;color:var(--mute)}
.scrub-rate button{height:20px;padding:0 6px;border:0;border-radius:3px;background:none;color:var(--dim);cursor:pointer;font:600 10px/1 var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;transition:color .2s,background .2s}
.scrub-rate button:hover{color:var(--ink)}
/* the presets' fractions, one figure wide: small numerator up, denominator down, drawn in the mono face (Unicode ⅔ / ⅒
   are not in JetBrains Mono, so fallback fonts mixed sizes) */
.fr{display:inline-block;margin-left:.08em;font-size:.68em;font-weight:700;letter-spacing:-.06em;transform-origin:0 50%;transform:translate(-.09em,.09em) scale(1.16)}.frx{display:inline-block;transform:translateX(-.06em)}
/* ...drawn 16% oversized by transform alone, so no button changes size: grown from its left edge (the gap to the x
   stays), then the x and the fraction shift left together by half the growth and the fraction down a touch, which puts
   the label's ink on the button's centre (measured to within .5px either way) */.fr-n{position:relative;top:-.42em;margin-right:-.22em}.fr-d{position:relative;top:.26em;margin-left:-.22em}
.scrub-rate button[aria-pressed="true"]{background:#13231a;color:var(--green);box-shadow:inset 0 0 0 1px rgba(43,255,136,.35)}
.scrub-rate button:focus-visible{outline:2px solid rgba(127,216,255,.8);outline-offset:1px}
/* custom speed: the same 20px box as the presets (the group only widens); drag sideways like a Blender field, click to type */
.scrub-rate-in{box-sizing:border-box;width:calc(5.5ch + 10px);height:20px;margin:0;padding:0 5px;border:0;border-radius:3px;background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px #232a34;color:var(--dim);font:600 10px/1 var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;text-align:center;
  cursor:ew-resize;touch-action:none;transition:color .2s,background .2s,box-shadow .2s}
.scrub-rate-in:hover{color:var(--ink)}
.scrub-rate-in[data-custom="true"]{background:#13231a;color:var(--green);box-shadow:inset 0 0 0 1px rgba(43,255,136,.35)}
.scrub-rate-in:focus{cursor:text;background:#0b0e13;color:var(--ink);outline:2px solid rgba(127,216,255,.8);outline-offset:1px}
body.rate-drag,body.rate-drag *{cursor:ew-resize!important;user-select:none}
/* iOS zooms the page into a focused text input under 16px: on touch screens the field is set at 16px and drawn at
   .625 scale, and negative margins cancel the larger layout box, so it is still the same 20px-tall box */
@media (pointer:coarse){ .scrub-rate-in{width:calc(5.5ch + 16px);height:32px;margin:0 calc(-.375 * (5.5ch + 16px)) -12px 0;padding:0 8px;border-radius:4.8px;
  font-size:16px;box-shadow:inset 0 0 0 1.6px #232a34;transform:scale(.625);transform-origin:0 0}
  .scrub-rate-in[data-custom="true"]{box-shadow:inset 0 0 0 1.6px rgba(43,255,136,.35)} .scrub-rate-in:focus{outline-width:3.2px;outline-offset:1.6px} }
/* the field's width comes out of the Speed label below 1000px (the kicker would lose it) and out of the x1/10 preset
   at phone widths (the field covers it), so the head keeps its old fit and never gains a row */
@media (max-width:1000px){ .scrub-rate-k{display:none} }
@media (max-width:640px){ .scrub-rate button[data-rate="0.1"]{display:none}
  .scrub-rate:has(button[data-rate="0.1"][aria-pressed="true"]) .scrub-rate-in{background:#13231a;color:var(--green);box-shadow:inset 0 0 0 1px rgba(43,255,136,.35)} }
.scrubber:not([data-rate="1"]) .scrub-rate{border-color:rgba(43,255,136,.4)}
.scrubber:not([data-rate="1"]) .scrub-time{color:var(--amber)}
.scrub-track{--scrub-x:calc(6px + (100% - 12px) * var(--scrub-f,0));position:relative;margin:12px 2px 8px;height:32px;display:flex;align-items:center}
.scrub-track::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:1px;background:#242b35;box-shadow:inset 0 1px 2px rgba(0,0,0,.7)}
.scrub-glow{position:absolute;left:0;width:var(--scrub-x);height:4px;border-radius:1px;background:linear-gradient(90deg,var(--ahead),var(--green));box-shadow:0 0 13px rgba(43,255,136,.32);pointer-events:none}
.scrub-ticks{position:absolute;left:6px;right:6px;top:50%;height:0;pointer-events:none}
.scrub-ticks i{position:absolute;left:calc(var(--f) * 100%);top:-5px;width:1px;height:10px;translate:-50% 0;background:rgba(223,255,238,.22)}
.scrub-ticks i.air{background:rgba(127,216,255,.35)}
.scrub-ticks i.hit{background:rgb(var(--ca1) / .7);height:12px;top:-6px}
.scrub-ticks i.go{width:2px;height:14px;top:-7px;background:var(--green);box-shadow:0 0 8px rgba(43,255,136,.6)}
.scrub-track input{position:relative;z-index:1;width:100%;height:32px;margin:0;background:transparent;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;accent-color:var(--green);appearance:none;-webkit-appearance:none}
body.scrub-drag,body.scrub-drag .scrub-track input{cursor:grabbing}
.scrub-track input::-webkit-slider-runnable-track{height:4px;background:transparent;border:0}
.scrub-track input::-webkit-slider-thumb{width:12px;height:20px;margin-top:-8px;border:2px solid #dfffee;border-radius:3px;background:#0b1712;box-shadow:0 0 0 3px rgba(43,255,136,.16),0 0 16px rgba(43,255,136,.45);appearance:none;-webkit-appearance:none}
.scrub-track input::-moz-range-track{height:4px;background:transparent;border:0}
.scrub-track input::-moz-range-progress{height:4px;background:transparent}
.scrub-track input::-moz-range-thumb{box-sizing:border-box;width:12px;height:20px;border:2px solid #dfffee;border-radius:3px;background:#0b1712;box-shadow:0 0 0 3px rgba(43,255,136,.16),0 0 16px rgba(43,255,136,.45)}
.scrub-track input:hover::-webkit-slider-thumb,.scrub-track input:focus-visible::-webkit-slider-thumb,body.scrub-drag .scrub-track input::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(43,255,136,.16),0 0 20px rgba(43,255,136,.62)}
.scrub-track input:hover::-moz-range-thumb,.scrub-track input:focus-visible::-moz-range-thumb,body.scrub-drag .scrub-track input::-moz-range-thumb{box-shadow:0 0 0 5px rgba(43,255,136,.16),0 0 20px rgba(43,255,136,.62)}
body.scrub-drag .scrub-track input::-webkit-slider-thumb{background:#dfffee}
body.scrub-drag .scrub-track input::-moz-range-thumb{background:#dfffee}
.scrub-track input:focus{outline:none} /* no ring around the track (Max: it kept turning on): keyboard focus shows as the knob's glow (above) and the panel's green edge */
.scrub-foot{color:var(--mute);font-size:9px;letter-spacing:.06em;text-transform:none}

/* ---------- chrome ---------- */
.chrome.top{position:fixed;top:14px;right:16px;display:flex;gap:10px;align-items:center;z-index:45}
/* dev chrome (A/B treatment, palette, music bed): only while the replay timeline is open; sound always stays.
   Hidden = invisible, unclickable and out of the tab order (visibility), with the space kept so Sound never shifts */
.chrome.top :is(#ab,#pal,#bed){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s .2s,color .2s,border-color .2s,background .2s}
body.scrubbing .chrome.top :is(#ab,#pal,#bed){opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s,color .2s,border-color .2s,background .2s}

/* primary site nav, top left: one italic-matched parallelogram (the CTA's shape) split into tight segments.
   XPP is the current page: display italic + a green start-line under it */
.nav{--k:-11deg;position:fixed;top:14px;left:16px;z-index:46;display:flex;height:32px;border:1px solid #1d2128;border-radius:5px;
  background:rgba(6,7,9,.86);backdrop-filter:blur(8px);transform:skewX(var(--k));overflow:hidden}
.nav a{position:relative;display:grid;place-items:center;padding:0 13px;text-decoration:none;white-space:nowrap;
  font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);transition:color .2s,background .2s}
.nav a+a{border-left:1px solid #1d2128}
.nav a span{display:block;transform:skewX(calc(-1 * var(--k)))}
.nav a:hover{color:var(--ink);background:rgba(255,255,255,.035)}
.nav a:focus-visible{color:var(--ink);outline:2px solid rgba(127,216,255,.8);outline-offset:-2px} /* a box ring, never a capsule */
.nav .nav-home{padding:0 14px 0 15px;font:italic 800 15px/1 var(--display);font-variation-settings:"wdth" 125;letter-spacing:.02em;color:var(--ink)}
.nav [aria-current="page"]::after{content:"";position:absolute;left:9px;right:9px;bottom:5px;height:2px;background:var(--green);box-shadow:0 0 8px rgba(43,255,136,.35)}
/* the nav waits out the loading gate and both intros: it fades in when an intro finishes (nav-fade), appears at once on a
   skip, and is shown in frozen end-state stills (nav-still). Leaving the end (Replay) hides it at once. */
body:not(.ended):not(.nav-still) .nav{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){ body.ended.nav-fade:not(.rm) .nav{transition:opacity .7s cubic-bezier(.2,.7,.3,1)} }
/* while scrubbing the frame meter takes the nav's corner (and the dev chrome the rest of the row): the nav steps aside until the timeline closes */
body.scrubbing .nav{opacity:0;visibility:hidden;pointer-events:none}
/* frame meter (timeline only, fps-meter.js): the dev chrome's 32px box. Whole-pixel columns, so the graph (80px) lands on
   device pixels and its 1px bars never resample. Reference on the left (green, as its dashed line),
   measurement on the right (ice, as its bars); the graphed pair is lit, the other quiet. A second row where the top row is full */
.tipw.fpsw{position:fixed;top:14px;left:16px;z-index:45;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s .2s}
body.scrubbing .tipw.fpsw{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s}
.fps{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:7px;width:192px;height:32px;margin:0;padding:0 8px;border:1px solid #1d2128;border-radius:5px;
  background:rgba(6,7,9,.86);backdrop-filter:blur(8px);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s}
.fps:hover{border-color:#333944;background:rgba(13,16,21,.92)}
.fps:focus-visible{outline:2px solid rgba(127,216,255,.8);outline-offset:1px}
.fps canvas{display:block;width:100%;height:22px;border-radius:2px;background:rgba(255,255,255,.025);box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.fps-col{display:grid;font:500 8.5px/11px var(--mono);letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mute);transition:color .2s}
.fps-cur{text-align:right}
.fps:hover .fps-col{color:var(--dim)}.fps:hover :is(.fps-ra,.fps-rb,.fps-ca,.fps-cb){filter:brightness(1.15)} /* before the lit pairs: hover never dims them */
.fps[data-mode="fps"] .fps-ra,.fps[data-mode="ms"] .fps-rb{color:rgba(43,255,136,.78)}
.fps[data-mode="fps"] .fps-ca,.fps[data-mode="ms"] .fps-cb,.fps[data-mode="mem"] .fps-cur{color:var(--ice)}
.fps[data-mode="mem"] .fps-ref{color:var(--dim)}
@media (max-width:860px){ .tipw.fpsw{top:54px} }
@media (max-width:640px){ .tipw.fpsw{display:none} } /* phones: the top row and its tooltips need the space */
@media (prefers-reduced-motion:reduce){ .tipw.fpsw{transition:none!important} }
body.rm .tipw.fpsw{transition:none!important}
/* top-right controls: one family with the site nav and the replay timeline. 32px boxes at a 5px radius (never a pill),
   mono caps like the nav, quiet text that lights on hover, a box focus ring; pressed choices use the speed group's green.
   Near-opaque (as the nav): where the wordmark runs under them (landscape phones) a white letter never reads as "pressed" */
.ctl{display:inline-flex;align-items:center;gap:7px;height:32px;margin:0;padding:0 11px 0 9px;border:1px solid #1d2128;border-radius:5px;background:rgba(6,7,9,.86);backdrop-filter:blur(8px);
  font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--dim);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s,border-color .2s,background .2s}
.ctl:hover{color:var(--ink);border-color:#333944;background:rgba(13,16,21,.92)}
.ctl:focus-visible{outline:2px solid rgba(127,216,255,.8);outline-offset:1px}
button.ctl:active{background:rgba(22,27,34,.85)}
.ab{gap:2px;padding:0 3px 0 0;cursor:default}
.ab:hover{color:var(--dim);background:rgba(6,7,9,.86)} /* the group only frames its buttons */
.ab-lbl{padding:0 7px 0 10px}
.ab button{width:26px;height:24px;margin:0;padding:0;border:0;border-radius:3px;background:none;color:var(--dim);cursor:pointer;font:700 11px/1 var(--mono);letter-spacing:0;transition:color .2s,background .2s}
.ab button:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.ab button[aria-pressed="true"]{background:#13231a;color:var(--green);box-shadow:inset 0 0 0 1px rgba(43,255,136,.35)}
.ab button:focus-visible{outline:2px solid rgba(127,216,255,.8);outline-offset:1px}
.pal-sw{flex:none;width:12px;height:12px;border-radius:2px;background:linear-gradient(90deg,rgb(var(--ca1)) 50%,rgb(var(--ca2)) 50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.bedb{gap:7px}.bed-k{color:var(--dim)}.ctl:hover .bed-k{color:var(--ink-2)}
.bed-ico{display:inline-flex;align-items:flex-end;gap:2px;height:12px}.bed-ico i{width:2px;background:currentColor;border-radius:1px;opacity:.7}
.bed-ico i:nth-child(1){height:6px}.bed-ico i:nth-child(2){height:12px}.bed-ico i:nth-child(3){height:8px}
.bedb[data-bed="gas"] .bed-ico i{background:rgb(var(--ca2));opacity:1}
/* sound: a speaker (no glowing dot) whose waves follow the volume; the label keeps one width so nothing shifts on a toggle */
.snd{gap:8px}
.snd .lbl{min-width:calc(9ch + .72em)}
.snd-ico{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.snd-ico .spk{fill:currentColor;stroke:none}
.snd-ico :is(.w1,.w2){display:none}
#snd[aria-pressed="true"]{color:var(--ink-2)}#snd[aria-pressed="true"]:hover{color:var(--ink)}
#snd[aria-pressed="true"] .snd-ico{color:var(--green)}
#snd[aria-pressed="false"] .snd-ico .spk{opacity:.75}
.sndw:not([data-level="0"]) #snd[aria-pressed="true"] .w1,.sndw[data-level="hi"] #snd[aria-pressed="true"] .w2{display:inline}
#snd[aria-pressed="true"] .x{display:none}
/* the volume bar: an overlay under Sound (hover after a beat, keyboard focus at once, .vol-open from a touch hold), so
   nothing around it moves. A short grace before it hides lets the pointer travel onto it. Esc dismisses it (.vol-x) */
.sndw{position:relative;display:inline-flex}
.vol{position:absolute;top:calc(100% + 8px);right:0;z-index:3;display:flex;align-items:center;gap:10px;height:36px;padding:0 11px 0 12px;border:1px solid #2a313b;border-radius:5px;
  background:rgba(8,11,16,.985);backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.45);font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s .3s,visibility 0s .44s}
.vol::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px} /* bridges the gap, like the tooltips */
@media (hover:hover){ .sndw:hover:not(.vol-x) .vol{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .14s .15s,visibility 0s .15s} }
.sndw:is(:has(:focus-visible),.vol-open):not(.vol-x) .vol{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .14s}
.vol-v{min-width:4ch;text-align:right;font-weight:500;letter-spacing:.02em;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* the level under Sound (0.5), always, except while the volume bar shows. It is laid out exactly as the bar's own
   readout (.vol-v: same box, padding, font), so the bar cross-fades over it and the number does not move. It sits under tooltips (2) and the bar (3).
   It takes the pointer as part of Sound: hovering it brings the bar up, and the wheel over it sets the level */
.snd-pct{position:absolute;top:calc(100% + 8px);right:0;z-index:1;display:flex;align-items:center;height:36px;padding:0 11px 0 12px;border:1px solid transparent;
  font:500 10px/1 var(--mono);letter-spacing:.02em;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;
  opacity:.5;transition:opacity .14s .3s}
@media (hover:hover){ .sndw:hover:not(.vol-x) .snd-pct{opacity:0;transition:opacity .14s .15s} }
.sndw:is(:has(:focus-visible),.vol-open):not(.vol-x) .snd-pct{opacity:0;transition:opacity .14s}
.sndw:has(#snd[aria-pressed="false"]) :is(#volIn,.vol-v){opacity:.5}
body.pct-clash.wm-up:not(.scrubbing) .snd-pct{opacity:0;pointer-events:none} /* small phones: the settled wordmark reaches up under Sound, so the level gives way while it is up (main.js endFit) */ /* muted: the level is kept; moving it turns sound on */
#volIn{--f:calc(5px + (100% - 10px) * var(--vol,1));width:120px;height:22px;margin:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none}
#volIn::-webkit-slider-runnable-track{height:4px;border:0;border-radius:1px;background:linear-gradient(90deg,var(--ahead),var(--green)) 0 0/var(--f) 100% no-repeat,#242b35}
#volIn::-webkit-slider-thumb{width:10px;height:16px;margin-top:-6px;border:2px solid #dfffee;border-radius:3px;background:#0b1712;appearance:none;-webkit-appearance:none}
#volIn::-moz-range-track{height:4px;border:0;border-radius:1px;background:#242b35}
#volIn::-moz-range-progress{height:4px;border-radius:1px;background:linear-gradient(90deg,var(--ahead),var(--green))}
#volIn::-moz-range-thumb{box-sizing:border-box;width:10px;height:16px;border:2px solid #dfffee;border-radius:3px;background:#0b1712}
#volIn:hover::-webkit-slider-thumb,#volIn:active::-webkit-slider-thumb{background:#dfffee}
#volIn:hover::-moz-range-thumb,#volIn:active::-moz-range-thumb{background:#dfffee}
#volIn:focus{outline:none}
#volIn:focus-visible{outline:2px solid rgba(127,216,255,.8);outline-offset:3px;border-radius:4px}
/* tooltips: hover (short delay) or keyboard focus (at once), hoverable, Esc dismisses (.tip-x); only while the timeline is
   open. One structure everywhere: a mono caps title, then plain text; lists mark the current choice; key hints last */
.tipw{position:relative;display:inline-flex}
.tip{position:absolute;top:calc(100% + 8px);right:0;z-index:2;width:max-content;max-width:min(300px,calc(100vw - 24px));padding:10px 12px 11px;border:1px solid #2a313b;border-radius:5px;
  background:rgba(8,11,16,.985);backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.45);font:400 12px/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-2);text-align:left;white-space:normal;
  pointer-events:none;opacity:0;visibility:hidden;transition:opacity .14s,visibility 0s .14s}
.tip-wide{max-width:min(348px,calc(100vw - 24px))}
.tip::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px} /* bridges the gap: the pointer can move onto the tooltip */
.tip b{display:block;margin-bottom:5px;font:600 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.tip p{margin:0}.tip p+p{margin-top:5px}
.tip kbd{font-size:10px;padding:0 4px;letter-spacing:0;text-transform:none}
.tip-ls{display:grid;gap:3px;margin:8px 0 0;padding:0;list-style:none}
.tip-ls li{display:flex;gap:8px;align-items:baseline;padding:4px 7px 5px;border-left:2px solid transparent;border-radius:3px;color:var(--dim)}
.tip-ls li.on{border-left-color:var(--green);background:rgba(43,255,136,.05);color:var(--ink-2)}
.tip-ls li[data-k]{cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.tip-ls li[data-k]:not(.on):hover{border-left-color:rgba(43,255,136,.35);background:rgba(255,255,255,.035);color:var(--ink-2)} /* a row picks on click (main.js) */
.tip-ls li[data-k]:not(.on):active{background:rgba(43,255,136,.08)}
.tip-ls kbd{flex:none;position:relative;top:-1px}.tip-ls li.on kbd{color:var(--green);border-color:rgba(43,255,136,.35)} /* up 1px with the name */
.tip-ls em{font:600 10px/1.2 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);vertical-align:1px}.tip-ls li.on em{color:var(--green)} /* mono caps on the text's baseline sat low against its taller caps: up 1px centres them */
.tip-ls em.hot,.tip-ls li.on em.hot{color:#ff8a1f} /* Gas: orange whether or not selected */
.tip-ls small{display:inline-block;padding:2px 4px;border:1px solid #2a313b;border-radius:3px;font:500 8.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);vertical-align:2px} /* box centred with the name */
.tip-ls small.now{color:var(--green);border-color:rgba(43,255,136,.35)}
.tip-now{margin-top:10px;padding-top:9px;border-top:1px solid #1d2128}.tip-now:empty{display:none}
.tip-same{padding-left:9px;border-left:2px solid rgba(127,216,255,.35);color:var(--dim)}
.tip-keys{display:block;margin-top:8px;font:500 10px/1.4 var(--mono);letter-spacing:.04em;text-transform:none;color:var(--dim)}
.tip>b+.tip-keys{margin-top:0}
/* the timeline's tooltips open upward, above the panel (the play button's from its left edge) */
.tip-up .tip{top:auto;bottom:calc(100% + 12px)}.tip-up .tip::before{top:auto;bottom:-13px;height:13px}
.tip-l .tip{right:auto;left:0}
@media (min-width:641px) and (min-height:601px){ .chrome.top .tipw:first-child .tip{right:auto;left:0} } /* A/B/C, the leftmost: rightward, never off the left edge */
@media (hover:hover){ body.scrubbing .tipw:hover:not(.tip-x) .tip{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .14s .3s,visibility 0s .3s} } /* never a tap's sticky :hover */
body.scrubbing .tipw:has(:focus-visible):not(.tip-x) .tip{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .14s}
body:is(.scrub-drag,.rate-drag) .tip,.chrome.top:has(.vol-open) .tip{opacity:0!important;visibility:hidden!important} /* never over a drag or a held-open volume bar */
body:not(.scrubbing) .tip{display:none}
/* short screens (landscape phones): the top tooltips span the width under the controls, their lists flow in columns, and
   one that is still too tall scrolls inside itself instead of running off the bottom */
@media (max-height:600px) and (min-width:641px){
  .chrome.top .tip{position:fixed;top:54px;left:12px;right:12px;width:auto;max-width:none;max-height:calc(100vh - 66px);overflow-y:auto;overscroll-behavior:contain}
  .chrome.top .tip::before{display:none}
  .tip-ls{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
}
/* Skip (intro only): a quiet secondary button in the end UI's shape (Replay's 6px box and mono caps, the chrome's
   glass). It fades out as the intro ends or is skipped, while the end UI (Replay with it) fades in */
.skip{position:fixed;right:16px;bottom:16px;z-index:30;display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 7px 0 12px;border:1px solid #1d2128;border-radius:6px;
  background:rgba(6,7,9,.6);backdrop-filter:blur(8px);font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);cursor:pointer;
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,visibility 0s .4s,color .2s,border-color .2s}
body.intro:not(.scrubbing) .skip{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .4s,color .2s,border-color .2s}
.skip:hover,.skip:focus-visible{color:var(--ink);border-color:rgba(127,216,255,.55);outline:none}
.skip kbd{font-size:10px;line-height:1;letter-spacing:.02em;text-transform:none;padding:3px 5px;border-radius:3px;color:var(--mute)}
.skip:hover kbd,.skip:focus-visible kbd{color:var(--ink-2);border-color:#3a414c}

/* ---------- loading (loader.js) ----------
   Before START: "Finding the line" - a solid required run-up (ice -> green) to the START gate, the streamed intro
   beyond it (bright up to the buffered horizon), only the next three deadlines labelled, parked choices folded into
   "+N parked". Shown only for a hold longer than the 0.5 s grace. The gate text drops below it. */
.ldr{position:fixed;left:50%;top:46%;translate:-50% -50%;z-index:41;width:min(var(--frame-w),980px);display:grid;justify-items:center;gap:6px;pointer-events:none;text-align:center;opacity:1;transition:opacity .25s}
.ldr[hidden]{display:none}
.ldr .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ldr-cap{margin:0;font:900 italic clamp(24px,3vw,40px)/1.05 var(--display);font-stretch:118%;letter-spacing:.005em;color:var(--ink)}
.ldr-sub{margin:0;font:500 11px/1.3 var(--mono);letter-spacing:.06em;color:var(--dim)}
.ldr-svg{width:100%;aspect-ratio:16/9;max-height:56vh;overflow:visible}
.ldr-track{fill:none;stroke:#11161d;stroke-width:2}
.ldr-req-base{fill:none;stroke:#1d2633;stroke-width:12}
.ldr-req{fill:none;stroke:var(--ice);stroke-width:12;transition:stroke-dasharray .15s linear}
.ldr-req.st-loaded{stroke:var(--green)}.ldr-req.st-failed{stroke:var(--amber)}
.ldr-sep{stroke:var(--bg);stroke-width:4}
.ldr-rl{font:700 italic 21px var(--display);font-stretch:112%;fill:var(--ink-2)}
.ldr-rl.st-loaded{fill:var(--green)}.ldr-rl.st-failed{fill:var(--amber)}.ldr-rl.none{font:500 17px var(--mono);fill:var(--mute)}
.ldr-str-base{fill:none;stroke:#1a2433;stroke-width:4}
.ldr-str{fill:none;stroke:var(--ahead);stroke-width:5;filter:drop-shadow(0 0 6px rgba(58,160,255,.6));transition:stroke-dasharray .2s linear}
.ldr-mk rect{fill:#05070a;stroke:var(--ahead);stroke-width:2;transform-box:fill-box;transform-origin:center;transform:skewX(-12deg)}
.ldr-mk .lead{stroke:rgba(58,160,255,.35);stroke-width:1}
.ldr-mk text{font:600 16px var(--mono);fill:var(--ink-2)}
.ldr-mk.st-loading rect{fill:rgba(58,160,255,.5)}
.ldr-mk.late rect{stroke:var(--red);fill:rgba(255,43,63,.35)}.ldr-mk.late text{fill:var(--red)}.ldr-mk.late .lead{stroke:var(--red)}
.ldr-gate line{stroke:var(--ice);stroke-width:5}
.ldr-gate text{font:800 15px var(--mono);letter-spacing:.12em;fill:var(--ice)}
.ldr-gate.open line{stroke:var(--green)}.ldr-gate.open text{fill:var(--green)}
.ldr-head{fill:#eef8ff;filter:drop-shadow(0 0 8px rgba(127,216,255,.9))}
.ldr-more{pointer-events:auto;margin-top:2px;padding:5px 10px;border:1px dashed #2a3140;border-radius:5px;background:rgba(6,7,9,.6);cursor:pointer;
  font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--dim)}
.ldr-more:hover,.ldr-more:focus-visible{color:var(--ink);border-color:var(--dim);outline:none}
.ldr-more:focus-visible{box-shadow:0 0 0 2px rgba(127,216,255,.8)}
.ldr-more[hidden],.ldr-parked[hidden]{display:none}
.ldr-parked{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none;font:500 10.5px/1 var(--mono);color:var(--mute)}
.ldr-parked li{padding:4px 7px;border:1px dashed #252b35;border-radius:4px}
.gate.ldr-on{place-content:end center;padding-bottom:max(8vh,56px)}
.ldr.portrait{top:44%;width:100vw}
.ldr.portrait .ldr-svg{aspect-ratio:980/430}
.ldr.portrait .ldr-mk text{font-size:25px}.ldr.portrait .ldr-rl{font-size:30px}.ldr.portrait .ldr-gate text{font-size:22px}
.ldr.portrait .ldr-req-base,.ldr.portrait .ldr-req{stroke-width:16}
.gate.ldr-on .gate-dot{display:none}
/* During an intro: a thin strip on the bottom edge while sounds still stream and the next deadline is near. Bright up to
   the buffered horizon; ticks on the next three deadlines; a quiet red tick for a missed cue (it stays to the end).
   It sits on the safe-area edge (above a phone's home indicator); the timeline (.scrubber) is raised clear of it. */
.ldbar{position:fixed;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);height:3px;z-index:34;pointer-events:none;opacity:0;transition:opacity .35s}
.ldbar:is([data-state="stream"],[data-state="late"],[data-state="late-only"]){opacity:1}
.ldbar:is([data-state="stream"],[data-state="late"]){background:rgba(255,255,255,.045)}
.lb-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(58,160,255,.18),rgba(58,160,255,.75));transition:width .3s linear}
.lb-play{position:absolute;top:0;bottom:0;width:2px;translate:-1px 0;background:rgba(234,255,243,.7)}
.lb-mks i{position:absolute;bottom:0;width:2px;height:3px;translate:-1px 0;background:var(--ice);opacity:.8}
.lb-mks i.late{width:3px;height:5px;background:var(--red);opacity:.85}
.lb-txt{position:absolute;left:16px;bottom:8px;max-width:calc(100% - 150px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 10px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.ldbar[data-state="late-only"] :is(.lb-fill,.lb-play,.lb-txt,.lb-mks i:not(.late)){opacity:0}
body.scrubbing .lb-txt{display:none}
/* diagnostics (?diag=1 / D): the cache manifest, never shown to visitors */
.diag{position:fixed;right:12px;top:56px;z-index:60;width:min(780px,calc(100% - 24px));max-height:min(70vh,640px);display:grid;grid-template-rows:auto 1fr;background:rgba(4,6,9,.96);border:1px dashed rgba(255,178,31,.55);box-shadow:0 14px 40px rgba(0,0,0,.7)}
.diag[hidden]{display:none}
.diag h4{margin:0;padding:6px 10px;font:800 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#120c02;background:var(--amber)}
.diag h4 span{font-weight:500;letter-spacing:.04em;text-transform:none;margin-left:8px}
.diag pre{margin:0;padding:10px 12px;overflow:auto;font:500 10.5px/1.5 var(--mono);color:var(--ink-2);white-space:pre}
.gate{position:fixed;inset:0;z-index:40;display:grid;place-content:center;justify-items:center;gap:18px;background:transparent;cursor:pointer;text-align:center;padding:16px}
.gate[hidden]{display:none}
.gate-dot{width:9px;height:9px;border-radius:1px;background:var(--red);animation:pulse 1.6s ease-in-out infinite}
.gate-go{margin:0;font:300 clamp(18px,1.8vw,26px)/1.2 var(--sans);color:var(--ink)}
.gate-hint{margin:0;font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--dim)}

.dbg{position:fixed;left:10px;bottom:10px;z-index:50;font:11px/1.45 var(--mono);color:#9aa3ae;background:rgba(0,0,0,.7);padding:8px 10px;border-radius:6px;white-space:pre;pointer-events:none}

@media (max-width:640px){
  .chrome.top{top:12px;right:12px;left:12px;justify-content:flex-end;gap:8px}
  .ctl{height:30px;padding:0 9px 0 8px}.ab{padding:0 3px 0 3px}.ab button{height:22px;width:25px}.snd{gap:7px}
  .nav{top:12px;left:12px;height:30px}.nav a{padding:0 7px;font-size:10px;letter-spacing:.03em}.nav .nav-home{padding:0 8px 0 9px;font-size:14px}.nav [aria-current="page"]::after{left:6px;right:6px}
  .ab-lbl,.pal-lbl,.bed-k{display:none}
  .pal{padding:0 8px}.bedb{padding:0 9px 0 8px}
  .wm,.ghost{font-size:31vw}
  .sub{font-size:clamp(15px,4.9vw,22px)}
  .pods{gap:12px;padding:9px 12px}.pods i{width:22px;height:22px}
  .uline{width:70vw}
  .endui{gap:12px}.beta{flex-direction:column;gap:12px}.cta{width:min(100%,352px);height:36px}.btn{font-size:11px;letter-spacing:.07em}.btn span{padding:0 10px}
  .stats span{font-size:9px;letter-spacing:.07em}.stats small{font-size:10px;letter-spacing:0}.stats-ex{letter-spacing:.08em}
  .scrubber{padding:13px 13px 11px}
  .scrub-foot span:last-child{display:none}
  .scrub-k,.scrub-kh{display:none}
  .scrub-head{flex-wrap:wrap;row-gap:10px}.scrub-rate{order:9;margin:0}.scrub-rate-k{display:none}
  .tip{position:fixed;top:52px;left:12px;right:12px;width:auto;max-width:none;max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain}.tip::before{display:none}
  .scrubber .tipw{position:static}.tip-up .tip{position:absolute;top:auto;bottom:calc(100% + 8px);left:0;right:0} /* the timeline's: the panel's width, above it */
  .skip{right:12px;bottom:12px}
  .hud{top:60px}
}
@media (max-width:380px){ .nav a{padding:0 5px;font-size:9.5px;letter-spacing:0}.nav .nav-home{padding:0 7px;font-size:13px}.nav [aria-current="page"]::after{left:5px;right:5px}
  .chrome.top{gap:6px}.ctl:not(.ab){padding:0 7px} } /* the timeline's top row keeps a 12px+ gutter at 360px */
/* short screens (landscape phones): a compact timeline panel (the key hints are in its tooltips), so Replay clears it */
@media (max-height:500px){ .scrubber{padding:10px 13px 8px}.scrub-track{margin:6px 2px 0}.scrub-foot{display:none} }
@media (prefers-reduced-motion:reduce){ .chrome.top :is(#ab,#pal,#bed),.nav a{transition:none} }
@media (prefers-reduced-motion:reduce){ .cacti-ng{transform:none!important;transition:opacity .2s!important}.ng-dance .cacti-dance,.ng-dance .cacti-dance *{animation:none!important} .tip,.vol,.skip,.load-state{transition:none!important} .scrub-rate,.scrub-rate button,.scrub-rate-in,.ul-edit input,.fps,.fps-col,.ctl,.ab button{transition:none} }
body.rm :is(.tip,.vol,.skip,.load-state){transition:none!important} body.rm .cacti-ng{transform:none!important;transition:opacity .2s!important} body.rm .ng-dance :is(.cacti-dance,.cacti-dance *){animation:none!important} body.rm :is(.scrub-rate,.scrub-rate button,.scrub-rate-in,.ul-edit input,.fps,.fps-col,.ctl,.ab button){transition:none}
body.rm :is(.chrome.top #ab,.chrome.top #pal,.chrome.top #bed,.nav a){transition:none}
@media (prefers-reduced-motion:reduce){ .gate-dot,.cls li,.cls li::after,.cls .sh>i,.cls .w>i,.cls .w::before,.cls .w::after{animation:none} .scrub-btn{transition:none} }
body.rm :is(.gate-dot,.cls li,.cls .sh>i,.cls .w>i),body.rm .cls li::after,body.rm .cls .w::before,body.rm .cls .w::after{animation:none} /* the ?rm toggle, same as the OS setting */
@media (prefers-reduced-motion:reduce){ .ldr,.ldr-req,.ldr-str,.ldbar,.lb-fill{transition:none} }
body.rm :is(.ldr,.ldr-req,.ldr-str,.ldbar,.lb-fill){transition:none}