/* ============================================================
   CHROME — the instrument around the scene: corner brackets, top bar, chapter rail, bottom ruler,
   the caption block, slates, the title card and the projected callouts. Tokens: css/tokens.css.
   Everything here is positioned inside a fixed, full-viewport layer (#ui on the story page).
   Per frame, only transform, opacity and clip-path change (the label placer reads the caption's boxes every frame).
   ============================================================ */

/* ---------- utilities ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.micro{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:var(--track-micro);text-transform:uppercase}
/* corner brackets drawn as eight background strokes on a pseudo-element: no extra markup, and --b animates them */
.brk{position:relative}
.brk::before,.dd .box::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;--c:var(--accent);
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--b,7px) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--b,7px) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--b,7px) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--b,7px) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--b,7px) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--b,7px) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--b,7px) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--b,7px) no-repeat;
  transition:background-size var(--d-3) var(--e-out);
}
/* odometer digits (js/engine/motion.js): tabular figures in 1.2em windows.
   The box clips with clip-path, not overflow: an inline-block with overflow set sits on its bottom edge, so its digits
   drift off the line by a font-dependent amount. With clip-path it keeps the baseline of its own line, which is where
   every digit window's digit sits, so the digits share the line of the text around them in any font and size.
   The windows are whole pixels (round(), where supported), so a digit at rest never lands between pixels and blurs. */
.odo{display:inline-block;height:1.2em;height:round(1.2em,1px);line-height:1.2em;line-height:round(1.2em,1px);clip-path:inset(0);white-space:pre;font-variant-numeric:tabular-nums}
.odo-c{display:inline-block;height:1.2em;height:round(1.2em,1px);vertical-align:top}
.odo-s{display:block}
.odo-s i{display:block;height:1.2em;height:round(1.2em,1px);font-style:normal}

/* ---------- the frame: four corner brackets, inset from the viewport edge ---------- */
#frame{position:absolute;inset:calc(var(--frame) + var(--safe-t)) calc(var(--frame) + var(--safe-r)) calc(var(--frame) + var(--safe-b)) calc(var(--frame) + var(--safe-l));pointer-events:none}
#frame i{position:absolute;width:18px;height:18px;border:0 solid var(--rule-3)}
#frame .tl{left:0;top:0;border-width:1px 0 0 1px}
#frame .tr{right:0;top:0;border-width:1px 1px 0 0}
#frame .bl{left:0;bottom:0;border-width:0 0 1px 1px}
#frame .br{right:0;bottom:0;border-width:0 1px 1px 0}

/* ---------- top bar: the wordmark, then the chapter counter, the music and the author ---------- */
#topbar{
  position:absolute;top:calc(var(--frame) + var(--safe-t) + 6px);left:calc(var(--frame) + var(--safe-l) + 28px);right:calc(var(--frame) + var(--safe-r) + 28px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink-2);white-space:nowrap}
.brand b{font:700 13px/1 var(--f-display);font-stretch:125%;letter-spacing:.16em;color:var(--ink)}
.brand .sep{width:1px;height:13px;background:var(--rule-3)}
.tr-group{display:flex;align-items:center;gap:10px;pointer-events:auto}
.count{margin-right:8px;color:var(--ink-3)}
.count .cur{color:var(--ink)}
.soc{
  position:relative;display:grid;place-items:center;width:38px;height:38px;color:var(--ink-2);text-decoration:none;border-bottom:0;
  background:var(--panel);border:1px solid var(--rule-2);--b:0px;
  transition:color var(--d-2),border-color var(--d-2),background-color var(--d-2);
}
.soc svg{width:15px;height:15px;fill:currentColor}
.soc:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.soc:active{transform:translateY(1px)}
@media (hover:hover){.soc:hover{color:var(--ink);border-color:var(--rule-3);--b:6px}}
/* the music: four equaliser bars, flat while paused, dancing in the accent while playing */
.snd .eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.snd .eq i{display:block;width:2px;height:100%;background:currentColor;transform:scaleY(.2);transform-origin:50% 100%;transition:transform var(--d-3) var(--e-out),background-color var(--d-2)}
.snd.on,.snd.wait{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.snd.on .eq i{animation:eq 1.1s ease-in-out infinite}
.snd.on .eq i:nth-child(1){animation-duration:.95s;animation-delay:-.3s}
.snd.on .eq i:nth-child(2){animation-duration:1.25s;animation-delay:-.8s}
.snd.on .eq i:nth-child(3){animation-duration:1.05s;animation-delay:-.1s}
.snd.on .eq i:nth-child(4){animation-duration:1.35s;animation-delay:-.55s}
@keyframes eq{0%,100%{transform:scaleY(.28)}30%{transform:scaleY(1)}55%{transform:scaleY(.5)}80%{transform:scaleY(.82)}}
#music{display:flex;align-items:center}
#music[hidden]{display:none}
/* the maker's credit: "Product by", the Blockstars wordmark (a link to blockstars.tech, in a new tab) and the release
   (js/version.js). The wordmark takes the text colour, a step brighter than the words around it. */
.credit{display:flex;align-items:center;gap:10px;color:var(--ink-3);white-space:nowrap}
#topbar .credit{margin-left:8px}
.credit a{display:block;padding:5px 2px;color:var(--ink-2);border-bottom:0;transition:color var(--d-2)}
.credit svg{display:block;width:55px;height:20px;fill:currentColor}
.credit .ver{letter-spacing:.06em;text-transform:none}
.credit a:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
@media (hover:hover){.credit a:hover{color:var(--ink)}}
/* while the browser waits for a first click before it will play sound: a quiet "Play music" and a thin line whose light
   runs into the button, folded away the moment the music starts (and never shown while the loader is up) */
.snd.wait::after{content:"";position:absolute;inset:-1px;border:1px solid var(--accent);opacity:0;pointer-events:none;animation:sonar 2.2s var(--e-out) .45s infinite}
@keyframes sonar{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.5)}}
.snd-hint{
  display:flex;align-items:center;gap:10px;max-width:0;margin-right:0;overflow:hidden;white-space:nowrap;cursor:pointer;opacity:0;color:var(--ink-2);
  transition:max-width .9s var(--e-out),margin .9s var(--e-out),opacity .5s,color .3s;
}
.snd-hint.on{max-width:200px;margin-right:12px;opacity:1;transition-delay:.6s}
body.loading .snd-hint{max-width:0;margin-right:0;opacity:0}
.snd-hint i{position:relative;display:block;flex:none;width:26px;height:1px;overflow:hidden;background:linear-gradient(to right,transparent,var(--accent))}
.snd-hint i::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent,#fff);transform:translateX(-100%)}
.snd-hint.on i::after{animation:soundflow 2.2s var(--e-out) infinite}
@keyframes soundflow{to{transform:translateX(100%)}}
@media (hover:hover){.snd-hint:hover{color:var(--ink)}}
/* the way to the ecosystem page (ecosystem.html): a button like the music's, its mark the map in miniature — the coin at
   the centre, the projects round its dial. While the "Play music" hint is out it folds away (there isn't room for both
   beside the wordmark on a phone or a narrow window), and comes back just after the hint has gone. Wide windows add
   its name. It reads at a glance as the way out to a second page without competing with the story: the instrument's
   own mark — a hairline box with four small gold corners (as the story's readouts and Replay) — and its icon in gold,
   still; under the pointer the corners reach a little further and the hairline brightens. (Corners and hairline are
   layers of its own background, drawn from its border's edge: the fold clips everything inside it, a ::before too.) */
#eco-link{
  gap:9px;overflow:hidden;color:var(--ink);border-color:transparent;--eb:6px;--eg:var(--zec);--eh:var(--rule-2);
  background:
    linear-gradient(var(--eg),var(--eg)) left top/var(--eb) 1px no-repeat border-box,linear-gradient(var(--eg),var(--eg)) left top/1px var(--eb) no-repeat border-box,
    linear-gradient(var(--eg),var(--eg)) right top/var(--eb) 1px no-repeat border-box,linear-gradient(var(--eg),var(--eg)) right top/1px var(--eb) no-repeat border-box,
    linear-gradient(var(--eg),var(--eg)) left bottom/var(--eb) 1px no-repeat border-box,linear-gradient(var(--eg),var(--eg)) left bottom/1px var(--eb) no-repeat border-box,
    linear-gradient(var(--eg),var(--eg)) right bottom/var(--eb) 1px no-repeat border-box,linear-gradient(var(--eg),var(--eg)) right bottom/1px var(--eb) no-repeat border-box,
    linear-gradient(var(--eh),var(--eh)) left top/100% 1px no-repeat border-box,linear-gradient(var(--eh),var(--eh)) left bottom/100% 1px no-repeat border-box,
    linear-gradient(var(--eh),var(--eh)) left top/1px 100% no-repeat border-box,linear-gradient(var(--eh),var(--eh)) right top/1px 100% no-repeat border-box,
    var(--panel);
  transition:width .9s var(--e-out) .3s,margin .9s var(--e-out) .3s,opacity .5s .5s,border-width 0s .3s,color var(--d-2),background-size var(--d-3) var(--e-out);
}
#eco-link svg{flex:none;color:var(--zec)}
#eco-link span{display:none}
#eco-link:focus-visible{outline-color:var(--zec)}
@media (hover:hover){#eco-link:hover{--eb:10px;--eh:var(--rule-3)}}
#topbar:has(.snd-hint.on) #eco-link{
  width:0;margin-right:-10px;opacity:0;border-width:0;pointer-events:none;visibility:hidden;
  transition:width .9s var(--e-out),margin .9s var(--e-out),opacity .3s,border-width 0s .9s,visibility 0s .9s;
}
@supports not selector(:has(*)){@media (max-width:399px){#eco-link{display:none}}}   /* (no way to fold it: phones keep the end card's link) */
@media (min-width:1200px){
  #eco-link{display:flex;width:auto;max-width:180px;padding:0 13px 0 12px;transition:max-width .9s var(--e-out) .3s,padding .9s var(--e-out) .3s,margin .9s var(--e-out) .3s,opacity .5s .5s,border-width 0s .3s,color var(--d-2),background-size var(--d-3) var(--e-out)}
  #eco-link span{display:block;white-space:nowrap}
  #topbar:has(.snd-hint.on) #eco-link{width:auto;max-width:0;padding:0;transition:max-width .9s var(--e-out),padding .9s var(--e-out),margin .9s var(--e-out),opacity .3s,border-width 0s .9s,visibility 0s .9s}
}

/* ---------- chapter rail: a tick ruler, one tick per chapter, grouped by act ---------- */
#rail{position:absolute;right:calc(var(--frame) + var(--safe-r) + 6px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;pointer-events:auto}
#rail .act{padding:12px 4px 3px 0;color:var(--ink-3);font-size:9px}
#rail .act:first-child{padding-top:0}
#rail button{position:relative;display:flex;align-items:center;justify-content:flex-end;width:44px;height:18px;padding-right:4px}
#rail button i{display:block;width:9px;height:1px;background:var(--ink-3);transition:width var(--d-3) var(--e-out),height var(--d-2),background-color var(--d-2)}
#rail button.done i{width:13px;background:var(--ink-2)}
#rail button.active i{width:26px;height:2px;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
#rail button span{
  position:absolute;right:44px;top:50%;transform:translate(6px,-50%);opacity:0;pointer-events:none;white-space:nowrap;
  padding:5px 8px;background:var(--panel-2);border:1px solid var(--rule-2);color:var(--ink);
  transition:opacity var(--d-2),transform var(--d-3) var(--e-out);
}
#rail button span em{font-style:normal;color:var(--accent);margin-right:8px}
#rail button:hover span,#rail button:focus-visible span{opacity:1;transform:translate(0,-50%)}
#rail button:hover i{background:var(--ink)}
#rail button:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}

/* ---------- bottom bar: progress through the story, and the chain's height ---------- */
#bottombar{
  position:absolute;left:calc(var(--frame) + var(--safe-l) + 28px);right:calc(var(--frame) + var(--safe-r) + 28px);bottom:calc(var(--frame) + var(--safe-b) + 10px);
  display:flex;align-items:center;gap:22px;color:var(--ink-3);pointer-events:none;white-space:nowrap;
}
#bottombar .where{min-width:118px}
#bottombar .where .cur{color:var(--ink)}
#bottombar .block .cur{color:var(--ink-2)}
.ruler{position:relative;flex:1;height:9px}
.ruler::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--rule-2)}
.ruler i{position:absolute;top:1px;width:1px;height:7px;background:var(--rule-3)}
.ruler .fill{position:absolute;left:0;right:0;top:4px;height:1px;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.ruler .head{position:absolute;left:0;top:-1px;width:1px;height:11px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.scrollcue{display:inline-block;width:1px;height:9px;margin-left:10px;vertical-align:-1px;background:linear-gradient(to bottom,var(--accent),transparent);animation:cue 1.6s var(--e-out) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- caption block ---------- */
#capwrap{position:absolute;left:calc(var(--gutter) + var(--safe-l));bottom:calc(var(--frame) + var(--safe-b) + 76px);max-width:min(900px,58vw)}
#kicker{display:flex;align-items:center;gap:12px;color:var(--ink-2)}
#kicker .n{color:var(--accent)}
#kicker .r{width:28px;height:1px;background:var(--accent)}
#caption{
  margin:18px 0 0;font-family:var(--f-display);font-stretch:106%;font-weight:560;font-size:var(--t-caption);line-height:1.02;
  letter-spacing:-.035em;text-wrap:balance;color:var(--ink);text-shadow:0 0 2px rgba(8,9,10,.9);
  /* the wide legibility glow is a filter, not a text-shadow: a filter runs after the line masks clip, so the glow follows
     what shows. As a text-shadow it overran the masks and was cut into hard dark bars across bright scenes (chapter
     01's ledger), worst while a line slides through its mask's edge. (drop-shadow's blur is a standard deviation:
     14px here is text-shadow's 28px.) */
  filter:drop-shadow(0 2px 14px rgba(8,9,10,.92));
}
/* touch screens: the wide glow is a soft scrim behind the caption block instead. A filter's output has to be computed
   again for every frame its content changes — every frame a line rises through its mask — and a phone has better use
   for that time. The scrim sits behind the masks, so nothing cuts it; it fades with the block. */
@media (pointer:coarse){
  #caption{filter:none}
  #capwrap::before{
    content:"";position:absolute;z-index:-1;inset:-40px -72px -32px -48px;pointer-events:none;
    background:radial-gradient(closest-side,rgba(8,9,10,.66),rgba(8,9,10,.38) 58%,rgba(8,9,10,0));
  }
}
/* a two-part caption sets up in a lighter voice and lands on the second sentence */
#caption .a{font-weight:330;color:var(--ink-2)}
#caption .nw{white-space:nowrap}
/* SplitText's line masks: padded (and pulled back by the same amount) so descenders and the tight outline are never
   clipped. Nothing wider may shadow text inside a mask: it gets cut straight at the mask's edge (see #caption) */
.ln-mask{display:block;padding:.1em .3em .24em;margin:-.1em -.3em -.24em}
#subcap{display:grid;margin-top:20px;max-width:590px}
#subcap > div{grid-area:1/1;font:400 15px/1.6 var(--f-ui);color:var(--ink-2);text-shadow:0 1px 14px rgba(8,9,10,.95);opacity:0}
#subcap b{color:var(--accent);font-weight:600}
#subcap i{font-style:normal;color:var(--ink)}
#subcap .m{font-family:var(--f-mono);font-size:.9em;color:var(--sig)}
#subcap .g{font-family:var(--f-mono);font-size:.9em;color:var(--zec)}

/* "Decrypt details": a reticle and a readout, bracketed like every other instrument control */
#look{
  pointer-events:auto;display:inline-flex;align-items:center;gap:14px;margin-top:28px;padding:9px 22px 9px 10px;
  background:var(--panel);border:1px solid var(--rule-2);color:var(--ink);text-align:left;--b:6px;
  transition:background-color var(--d-2),border-color var(--d-2);
}
#look .ret{position:relative;width:34px;height:34px;flex:none;color:var(--accent);transition:transform var(--d-4) var(--e-out)}
#look .ret svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;overflow:visible}
#look .ret .ping{transform-box:fill-box;transform-origin:center;opacity:0;animation:ping 3s var(--e-out) infinite}
#look.seen .ret .ping{animation:none}
@keyframes ping{0%{transform:scale(1);opacity:.8}60%,100%{transform:scale(2.1);opacity:0}}
#look .t1{display:block;font:600 16px/1.1 var(--f-display);font-stretch:106%;letter-spacing:-.01em}
#look .t2{display:block;margin-top:6px;color:var(--accent)}
#look .t2 .n{color:var(--ink-3)}
#look:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
@media (hover:hover){
  #look:hover{background:var(--accent-dim);border-color:color-mix(in srgb,var(--accent) 40%,transparent);--b:11px}
  #look:hover .ret{transform:rotate(90deg)}
}

/* ---------- slates: what fills the screen while the particles are still travelling ---------- */
#slate{position:absolute;left:calc(var(--gutter) + var(--safe-l));bottom:calc(var(--frame) + var(--safe-b) + 76px);pointer-events:none;white-space:nowrap;contain:layout}
#slate .k{display:flex;align-items:center;gap:14px;color:var(--ink-2)}
#slate .k .n{color:var(--accent)}
#slate .k .r{width:clamp(80px,16vw,280px);height:1px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 10%,transparent));transform-origin:left}
#slate .t{margin-top:16px;font:640 var(--t-slate)/.95 var(--f-display);font-stretch:125%;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
#slate .t .ln-mask{padding-bottom:.14em;margin-bottom:-.14em}

/* ---------- the title card (chapter 00's first moments) ---------- */
#titlecard{position:absolute;left:calc(var(--gutter) + var(--safe-l));top:50%;transform:translateY(-54%);max-width:min(1100px,70vw);pointer-events:none}
#titlecard .k{color:var(--ink-2);display:flex;gap:12px;align-items:center}
#titlecard .k .r{width:28px;height:1px;background:var(--accent)}
#titlecard .t{margin:22px 0 0;font:300 var(--t-hero)/.92 var(--f-display);font-stretch:125%;letter-spacing:-.045em;color:var(--ink-2)}
#titlecard .t b{font-weight:720;color:var(--ink)}
#titlecard .d{margin-top:28px;max-width:470px;font:400 15px/1.6 var(--f-ui);color:var(--ink-2)}
#titlecard .proof{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:22px;color:var(--ink-3)}
#titlecard .proof .h{font:400 11.5px/1 var(--f-mono);letter-spacing:.02em;text-transform:none;color:var(--sig)}
#titlecard .proof .ok{color:var(--pass)}

/* ---------- projected callouts: a reticle on the 3D point, a leader line (js/engine/callouts.js), then the box ---------- */
#callouts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lbl{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  font:400 11px/1.4 var(--f-mono);letter-spacing:.01em;color:var(--ink);white-space:nowrap;opacity:0;will-change:transform,opacity;
  padding:6px 10px 7px 11px;background:rgba(10,11,13,.86);border:1px solid var(--rule-2);border-left:2px solid var(--accent);
}
.lbl .k{color:var(--ink-3)}
.lbl .v{display:block;margin-top:3px;color:var(--sig);font-size:10.5px}
.lbl b{color:var(--zec);font-weight:600}
.lbl .ice{color:var(--sig)}
.lbl .gold{color:var(--zec)}
.lbl .red{color:var(--fail)}
.lbl.mini{font-size:10px;padding:3px 8px 4px 9px;color:var(--ink-2);border-left-width:1px}
.lbl.big{font-size:13px;padding:8px 13px 9px 14px}
.lbl.red{--accent:var(--fail);color:var(--fail)}
.lbl.ok{--accent:var(--pass)}
.lbl.ok b{color:var(--pass)}
.lbl.plain{background:none;border:0;padding:0;font-size:12px;font-weight:600;text-shadow:0 0 12px rgba(0,0,0,.95)}
.lbl.headline{
  max-width:min(460px,80vw);white-space:normal;text-align:left;line-height:1.55;padding:12px 16px 13px;font-size:12px;
  background:var(--panel-2);word-break:break-all;
}
.lbl.headline .k{display:block;margin-bottom:6px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);word-break:normal}
.lbl.card{white-space:normal;min-width:min(250px,64vw);max-width:min(290px,70vw);padding:10px 12px 11px 13px;line-height:1.55}
.lbl.card .row{display:flex;justify-content:space-between;gap:12px}
.lbl.card .h{display:block;margin-bottom:4px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}

/* the cursor as a viewing key (js/engine/cursor.js): a reticle riding with the pointer over the scene */
#reticle{position:fixed;left:0;top:0;width:44px;height:44px;z-index:4;pointer-events:none;opacity:0;color:var(--accent);will-change:transform,opacity}
#reticle svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1}
#reticle circle{opacity:.85}
#reticle path{opacity:.6}
body.dd-open #reticle{visibility:hidden}
#look{transition:translate .45s var(--e-out),background-color var(--d-2),border-color var(--d-2)}

/* ============================================================
   PHONES AND NARROW WINDOWS
   ============================================================ */
@media (max-width:900px),(orientation:portrait) and (max-width:1024px){
  #frame i{width:12px;height:12px}
  #topbar{left:calc(var(--frame) + 12px);right:calc(var(--frame) + 12px);top:calc(var(--frame) + var(--safe-t) + 4px)}
  .brand .sep,.brand .full{display:none}
  .count{margin-right:2px}
  #topbar .credit{display:none}         /* on phones the credit lives in the end card and the details' footer */
  .soc{width:40px;height:40px}
  .snd-hint{gap:8px}
  .snd-hint.on{margin-right:10px}
  .snd-hint i{width:20px}
  #rail{right:2px}
  #rail .act{display:none}
  #rail button{width:34px;height:17px}
  #rail button span{display:none}
  #bottombar{left:calc(var(--frame) + 12px);right:calc(var(--frame) + 12px);gap:12px}
  #bottombar .where{min-width:0}
  #bottombar .block{display:none}
  /* the caption block is kept tight so the scene gets the room: one-line details control (the sheet's kicker carries
     the spec), smaller gaps, closer to the bottom bar */
  #capwrap,#slate{left:20px;right:48px;bottom:calc(var(--frame) + var(--safe-b) + 44px);max-width:none}
  #caption{margin-top:12px;font-size:clamp(31px,8.4vw,48px);font-stretch:104%}
  #subcap{margin-top:10px}
  #subcap > div{font-size:13px}
  #look{margin-top:14px;padding:6px 16px 6px 7px;gap:10px}
  #look .ret{width:26px;height:26px}
  #look .t1{font-size:15px}
  #look .t2{display:none}
  #slate .t{font-size:clamp(24px,7.4vw,40px);font-stretch:112%}
  #titlecard{left:20px;right:48px;top:auto;bottom:calc(var(--frame) + var(--safe-b) + 64px);transform:none;max-width:none}   /* right: clear of the rail */
  #titlecard .t{font-size:clamp(40px,11.6vw,64px);font-stretch:112%}
  #titlecard .d{font-size:13.5px}
  .lbl{font-size:10px;padding:4px 7px 5px 8px}
  .lbl .wide{display:none}
  .lbl.headline{font-size:10.5px;padding:10px 12px}
  .lbl.card{font-size:10px}
}
/* short phones (an iPhone SE and the like): the caption block leaves the scene some room */
@media (max-width:900px) and (max-height:700px) and (orientation:portrait){
  #capwrap,#slate{bottom:calc(var(--frame) + var(--safe-b) + 40px)}
  #caption{margin-top:12px;font-size:clamp(25px,7.6vw,33px)}
  #subcap{margin-top:10px}
  #subcap > div{font-size:12px;line-height:1.5}
  #look{margin-top:12px;padding:5px 14px 5px 6px}
  #look .ret{width:26px;height:26px}
  #look .t2{display:none}
  #titlecard .t{font-size:clamp(34px,10.4vw,48px)}
  #titlecard .d{margin-top:16px;font-size:12.5px}
}
@media (max-width:480px){
  .lbl:not(.card){white-space:normal;max-width:calc(100vw - 84px);width:max-content;line-height:1.35;font-size:11px}
}
/* ============================================================
   PHONES ON THEIR SIDE: little height, plenty of width — the caption keeps to the left, the scene to the right,
   and the rail tightens
   ============================================================ */
@media (max-height:500px) and (orientation:landscape){
  #frame i{width:12px;height:12px}
  #topbar{top:calc(var(--frame) + var(--safe-t) + 2px);left:calc(var(--frame) + var(--safe-l) + 12px);right:calc(var(--frame) + var(--safe-r) + 12px)}
  .brand .sep,.brand .full{display:none}
  #topbar .credit{display:none}
  .soc{width:36px;height:36px}
  #rail{right:calc(var(--frame) + var(--safe-r) + 2px)}
  #rail .act{display:none}
  #rail button{width:30px;height:12px}
  #rail button span{display:none}
  #bottombar{left:calc(var(--frame) + var(--safe-l) + 12px);right:calc(var(--frame) + var(--safe-r) + 12px);bottom:calc(var(--frame) + var(--safe-b) + 4px);gap:12px}
  #bottombar .block{display:none}
  #capwrap,#slate{left:calc(var(--frame) + var(--safe-l) + 22px);right:auto;max-width:50vw;bottom:calc(var(--frame) + var(--safe-b) + 40px)}
  #caption{margin-top:10px;font-size:clamp(22px,3.6vw,30px);font-stretch:106%}
  #subcap{margin-top:8px}
  #subcap > div{font-size:11.5px;line-height:1.45}
  #look{margin-top:10px;padding:5px 14px 5px 6px}
  #look .ret{width:24px;height:24px}
  #look .t1{font-size:13.5px}
  #look .t2{display:none}
  #slate .t{font-size:clamp(22px,3.6vw,30px);font-stretch:118%}
  #titlecard{left:calc(var(--frame) + var(--safe-l) + 22px);right:auto;top:50%;bottom:auto;transform:translateY(-46%);max-width:52vw}
  #titlecard .t{font-size:clamp(30px,5.2vw,46px);font-stretch:118%}
  #titlecard .d{margin-top:12px;max-width:40vw;font-size:12px}
  #titlecard .proof{margin-top:10px}
  #endcard.on{margin-top:10px}
  .lbl{font-size:9.5px;padding:3px 7px 4px 8px}
}
/* big screens: the readouts grow with the room, so the instrument doesn't read as small print */
@media (min-width:1700px){
  :root{--t-micro:11.5px}
  .brand b{font-size:14px}
  .soc{width:42px;height:42px}
  #subcap > div{font-size:16.5px}
  #look .t1{font-size:17px}
  .lbl{font-size:12px}
}
@media (min-width:1900px){
  #capwrap{max-width:min(1400px,60vw)}
}
@media (min-width:2300px){
  :root{--t-micro:12.5px}
  .brand b{font-size:15.5px}
  .soc{width:46px;height:46px}
  #subcap > div{font-size:18px}
  #subcap{max-width:680px}
  #look .t1{font-size:18.5px}
  .lbl{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .brk::before,#look .ret,#rail button i,#rail button span,.soc{transition-duration:.15s}
  #look .ret .ping,.scrollcue{animation:none}
  .snd.on .eq i{animation:none;transform:scaleY(.7)}
  .snd.wait::after,.snd-hint.on i::after{animation:none}
  .snd-hint{transition-duration:.15s}
}