/* The score has a past — data film styles.
   One dark stage; every scene shares these tokens. Homework labels accompany
   the palette so the fifth homework is distinguishable without colour alone. */
:root {
  color-scheme: dark;
  --bg: #07090d;
  --bg-2: #0c0f15;
  --panel: rgba(13, 16, 22, 0.72);
  --ink: #ece7dd;
  --ink-2: #b3b8c3;
  --muted: #767d8c;
  --faint: #3a404c;
  --hair: rgba(236, 231, 221, 0.08);
  --hair-2: rgba(236, 231, 221, 0.16);
  --signal: #ff6a3d;
  --ember: #ffb547;
  --hw1: #3987e5;
  --hw2: #199e70;
  --hw3: #d4a017;
  --hw4: #e07bb0;
  --hw5: #8f87ef;
  --withheld: #5b6273;
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pad: clamp(18px, 3.4vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: 8px; }
.skip:focus { top: 12px; }

/* ── Stage ─────────────────────────────────────────────────────────── */
.film { position: fixed; inset: 0; overflow: hidden; outline: none; user-select: none; -webkit-user-select: none; }
.backdrop { position: absolute; inset: 0; overflow: hidden; background:
  radial-gradient(900px 700px at 10% 110%, rgba(255, 106, 61, 0.06), transparent 70%),
  linear-gradient(180deg, var(--bg-2), var(--bg) 60%); }
.backdrop i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; pointer-events: none; }
.glow-aurora { width: 1500px; height: 1000px; margin: -500px 0 0 -750px; background: radial-gradient(closest-side, var(--tint, rgba(57, 135, 229, .10)), transparent); transition: background 1.2s var(--ease); }
.glow-cursor { width: 560px; height: 560px; margin: -280px 0 0 -280px; background: radial-gradient(closest-side, rgba(255, 196, 140, .085), transparent); transform: translate3d(-999px, -999px, 0); }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; }
#scenes { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; visibility: hidden; will-change: opacity, transform, clip-path; }
.scene.on { visibility: visible; }
.scene svg.viz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scene canvas.layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene .html-layer { position: absolute; inset: 0; pointer-events: none; }
.scene .html-layer > * { pointer-events: auto; }

.grain { position: absolute; inset: -50%; pointer-events: none; opacity: .07; mix-blend-mode: overlay; animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 55% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.wipe { position: absolute; top: 0; bottom: 0; width: 2px; left: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--ink) 20%, var(--ink) 80%, transparent);
  box-shadow: 0 0 24px 6px rgba(255, 181, 71, .55), 0 0 80px 20px rgba(255, 106, 61, .25); }
.flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255, 240, 220, .22), transparent 60%); opacity: 0; z-index: 7; }

/* ── Cinematic layer: intertitles, letterbox, OSD, rewind ──────────── */
.intertitle { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.it-num { position: absolute; left: 0; top: 0; font: 200 min(38vh, 30vw)/0.8 var(--display); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.06em; color: transparent;
  -webkit-text-stroke: 1.4px rgba(236, 231, 221, .9); transform-origin: 50% 50%; white-space: nowrap; will-change: transform, opacity; }
.it-word { position: absolute; left: 0; top: 0; font: 500 13px/1 var(--mono); text-transform: uppercase; color: var(--ember); white-space: nowrap; will-change: transform, opacity; text-shadow: 0 0 18px rgba(255, 181, 71, .55); }
.it-line { position: absolute; left: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ember) 30%, #fff 50%, var(--ember) 70%, transparent); box-shadow: 0 0 22px 3px rgba(255, 181, 71, .45); }
.lb { position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 9; pointer-events: none; transform: scaleY(0); will-change: transform; }
.lb-top { top: 0; transform-origin: top; }
.lb-bot { bottom: 0; transform-origin: bottom; }
.lb::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 181, 71, .5), transparent); }
.lb-top::after { bottom: 0; }
.lb-bot::after { top: 0; }
.vhs { position: absolute; inset: 0; z-index: 12; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); }
.vhs::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 0, 60, .07), transparent 28%, transparent 72%, rgba(0, 200, 255, .07)); }
.vhs-band { position: absolute; left: 0; right: 0; height: 14%; background: linear-gradient(180deg, transparent, rgba(236, 231, 221, .08), transparent); animation: vhsband 1s linear infinite; }
@keyframes vhsband { from { top: -15%; } to { top: 105%; } }
.vhs-rew, .vhs-tc { position: absolute; top: calc(9vh + 20px); font: 500 clamp(16px, 1.8vw, 24px)/1 var(--mono); color: #fff; letter-spacing: .08em; text-shadow: 2px 0 rgba(255, 0, 60, .75), -2px 0 rgba(0, 210, 255, .75); }
.vhs-rew { left: var(--pad); animation: blink .5s steps(2) infinite; }
.vhs-tc { right: var(--pad); }
@keyframes blink { 50% { opacity: .3; } }
.osd { position: absolute; left: 50%; top: 50%; width: 118px; height: 118px; margin: -59px 0 0 -59px; border-radius: 50%; background: rgba(8, 10, 14, .5); border: 1px solid rgba(236, 231, 221, .18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; z-index: 24; pointer-events: none; opacity: 0; }
.osd svg { width: 42px; height: 42px; fill: var(--ink); }
.osd.pop { animation: osd .75s var(--ease) both; }
@keyframes osd { 0% { opacity: 0; transform: scale(.6); } 22% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
.seek-osd { position: absolute; left: 50%; bottom: 74px; transform: translate(-50%, 8px); max-width: min(720px, calc(100vw - 32px)); overflow: hidden; text-overflow: ellipsis; padding: 10px 16px; border-radius: 999px;
  background: rgba(8, 10, 14, .85); border: 1px solid var(--hair-2); font: 500 12px/1 var(--mono); color: var(--ink-2); white-space: nowrap; z-index: 24; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s var(--ease); }
.seek-osd b { color: var(--signal); font-weight: 500; margin-right: 8px; }
.seek-osd span { color: var(--ink); font-family: var(--sans); }
.seek-osd.show { opacity: 1; transform: translate(-50%, 0); }
.ripple { position: fixed; z-index: 23; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid var(--ember); pointer-events: none; animation: ripple .8s var(--ease) forwards; }
@keyframes ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(9); } }
@media (prefers-reduced-motion: reduce) { .vhs-band, .vhs-rew { animation: none; } }

/* ── Caption (narration) ───────────────────────────────────────────── */
.caption { position: absolute; z-index: 5; pointer-events: auto; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; padding-bottom: 6px; }
.caption > * { margin: 0; }
.cap-kicker { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--signal); display: flex; gap: 10px; align-items: center; min-height: 11px; }
.cap-kicker::before { content: ''; width: 26px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(var(--k, 1)); }
.cap-title { margin-top: 18px !important; font: 380 clamp(30px, 3.3vw, 58px)/1.02 var(--display); font-variation-settings: 'opsz' 144, 'SOFT' 30; letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.cap-title em { font-style: italic; font-weight: 300; color: var(--ember); }
.cap-title .w { display: inline-block; will-change: transform, opacity, filter; }
.cap-body { margin-top: 18px !important; font: 400 clamp(14px, 1.05vw, 16.5px)/1.6 var(--sans); color: var(--ink-2); max-width: 40ch; text-wrap: pretty; }
.cap-body b { color: var(--ink); font-weight: 600; }
.cap-body .num { font-family: var(--mono); font-size: .94em; color: var(--ink); }
.caption[data-mode='hero'] .cap-title { font-size: clamp(48px, 7.4vw, 132px); font-weight: 330; line-height: .92; letter-spacing: -.035em; }
.caption[data-mode='hero'] .cap-body { font-size: clamp(15px, 1.2vw, 19px); max-width: 34ch; }
.caption[data-mode='finale'] .cap-title { font-size: clamp(40px, 5.2vw, 92px); line-height: .95; }
.cap-credit { margin-top: 26px !important; font: 400 12px/1.6 var(--mono); color: var(--muted); letter-spacing: .04em; }

/* ── HUD ───────────────────────────────────────────────────────────── */
.hud-top { position: absolute; z-index: 20; left: 0; right: 0; top: 0; padding: 16px var(--pad) 0; display: flex; align-items: center; gap: 18px; transition: opacity .5s; }
.brand { font: 400 17px/1 var(--display); font-style: italic; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.brand b { font-style: normal; font-weight: 600; }
.chapter-label { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-top .spacer { flex: 1; }
.lens { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lens-label { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 8px 0 10px; }
.lens button { font: 500 12px/1 var(--sans); padding: 7px 11px; border-radius: 999px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; transition: background .25s, color .25s; }
.lens button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }
.lens button:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.lens button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.hud-link { font: 500 12px/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--hair-2); white-space: nowrap; }
.hud-link:hover { color: var(--ink); border-color: var(--ink-2); }

/* ── Transport ─────────────────────────────────────────────────────── */
.transport { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: 66px; display: flex; align-items: center; gap: 6px; padding: 0 calc(var(--pad) - 8px);
  background: linear-gradient(180deg, transparent, rgba(5, 6, 9, .78) 45%); transition: opacity .5s; }
.transport button { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--ink-2); font: 500 12px/1 var(--sans); }
.transport button:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.transport svg { width: 16px; height: 16px; fill: currentColor; }
.t-play { width: 44px; height: 44px !important; border-radius: 50% !important; background: var(--ink) !important; color: var(--bg) !important; }
.t-play:hover { transform: scale(1.06); }
.t-time { font: 500 12px/1 var(--mono); color: var(--ink-2); padding: 0 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-track { position: relative; flex: 1; height: 36px; cursor: pointer; touch-action: none; }
.t-segs { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); display: flex; gap: 3px; }
.t-seg { position: relative; height: 100%; background: rgba(255, 255, 255, .13); border-radius: 2px; overflow: hidden; transition: height .2s; }
.t-seg > b { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); border-radius: 2px; }
.t-seg.cur > b { background: var(--signal); }
.t-track:hover .t-segs { height: 7px; }
.t-tick { position: absolute; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: rgba(7, 9, 13, .9); pointer-events: none; }
.t-head { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(255, 106, 61, .18), 0 0 18px rgba(255, 106, 61, .7); pointer-events: none; }
.t-hover { position: absolute; bottom: 30px; transform: translateX(-50%); padding: 7px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font: 500 11px/1.3 var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.t-hover small { display: block; font: 400 10px/1.3 var(--mono); opacity: .65; }
.t-track:hover .t-hover { opacity: 1; }
/* playback modes */
.t-modes { display: inline-flex; padding: 3px; border-radius: 12px; border: 1px solid var(--hair-2); background: rgba(10, 12, 17, .55); gap: 2px; }
.t-modes button { height: 30px !important; border-radius: 9px !important; padding: 0 11px !important; }
.t-modes button[aria-pressed='true'] { background: var(--ink) !important; color: var(--bg) !important; }
.t-auto[aria-pressed='true'], .t-music[aria-pressed='true'] { color: var(--bg) !important; background: var(--ember) !important; }
.t-music { font-size: 15px !important; }
body[data-mode='loop'] .t-auto, body:not([data-mode='loop']) .t-music { display: none !important; }
.t-segs.reel { gap: 2px; }
.lbl-short { display: none; }
.t-segs.reel .t-seg.cur > b { background: var(--ember); }

/* presenter: the film holds on each finished chart until the speaker continues */
/* the held frame's Continue lives in the transport, so it never covers a chart's axes */
.transport .continue-chip { flex: none; height: 34px !important; display: inline-flex; align-items: center; gap: 9px; padding: 0 12px 0 15px !important; border-radius: 999px !important;
  background: var(--ember) !important; color: var(--bg) !important; font: 600 12.5px/1 var(--sans) !important; box-shadow: 0 0 0 5px rgba(255, 181, 71, .12), 0 6px 26px rgba(255, 181, 71, .3); animation: chip 2.4s ease-in-out infinite; }
.continue-chip kbd { font: 500 10.5px/1 var(--mono); padding: 3px 5px; border-radius: 5px; background: rgba(7, 9, 13, .14); color: var(--bg); }
.continue-chip[hidden] { display: none; }
.continue-chip:hover { transform: scale(1.04); }
@keyframes chip { 0%, 100% { box-shadow: 0 0 0 5px rgba(255, 181, 71, .12), 0 6px 26px rgba(255, 181, 71, .2); } 50% { box-shadow: 0 0 0 9px rgba(255, 181, 71, .05), 0 6px 34px rgba(255, 181, 71, .42); } }
body.idle .continue-chip { opacity: 1; }

/* soundtrack panel */
.music-card { position: absolute; z-index: 30; right: var(--pad); bottom: 82px; width: min(360px, calc(100vw - 2 * var(--pad))); padding: 16px 18px; border-radius: 14px; background: rgba(12, 14, 19, .95); border: 1px solid var(--hair-2); font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); display: grid; gap: 12px; }
.music-card[hidden] { display: none; }
.music-card h3 { margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.music-card h3 span { color: var(--muted); letter-spacing: .06em; }
.mc-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--hair-2); cursor: pointer; color: var(--ink); overflow: hidden; }
.mc-file:hover { border-color: var(--ink-2); }
.mc-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-name::before { content: '♪  '; color: var(--ember); }
.mc-row { display: flex; align-items: center; gap: 10px; }
.mc-k { width: 70px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mc-bpm { width: 76px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .04); color: var(--ink); font: 500 13px/1 var(--mono); }
.mc-u { font: 500 11px/1 var(--mono); color: var(--muted); }
.mc-tap, .mc-clear { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--hair-2); color: var(--ink); font: 500 12px/1 var(--sans); }
.mc-tap:hover, .mc-clear:hover { background: rgba(255, 255, 255, .07); }
.mc-tap:active { background: var(--ember); color: var(--bg); }
.mc-off { width: 92px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .04); color: var(--ink); font: 500 13px/1 var(--mono); }
.mc-nudge { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--hair-2); color: var(--ink); }
.mc-nudge:hover { background: rgba(255, 255, 255, .07); }
.mc-sync { margin: 0; font: 500 11.5px/1.5 var(--sans); color: var(--ember); }
.mc-sync:empty { display: none; }
.mc-note { margin: 0; font-size: 11.5px; color: var(--muted); }
.mc-clear { justify-self: start; color: var(--ink-2); }

/* Loop reel captions: few words, big */
.caption[data-mode='reel'] .cap-title { font-size: clamp(40px, 5vw, 92px); line-height: .95; letter-spacing: -.03em; }
.t-sep { width: 1px; height: 20px; background: var(--hair-2); margin: 0 4px; }

body.idle .hud-top, body.idle .transport, body.hide-ui .hud-top, body.hide-ui .transport { opacity: 0; }
body.idle, body.idle * { cursor: none !important; }

/* ── Paused card ───────────────────────────────────────────────────── */
.pause-card { position: absolute; z-index: 19; left: var(--pad); bottom: calc(86px + var(--dock-h, 0px) + 8px); width: min(var(--cap-w, 340px), calc(100vw - 2 * var(--pad))); padding: 14px 16px 15px; border-radius: 14px; background: var(--panel); border: 1px solid var(--hair-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transform: translateY(8px); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s var(--ease); }
.pause-card.show { opacity: 1; transform: none; pointer-events: auto; }
.pause-card h3 { margin: 0 0 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ember); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pause-card h3 button { color: var(--ink-2); font: inherit; letter-spacing: .08em; padding: 5px 8px; margin: -5px -8px; border-radius: 6px; }
.pause-card h3 button:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.pause-card.collapsed { padding: 11px 16px; width: auto; }
.pause-card h3 span { white-space: nowrap; }
.pause-card.collapsed h3 { margin: 0; }
.pause-card p { margin: 0; font: 400 13px/1.55 var(--sans); color: var(--ink-2); }
.pause-card p + p { margin-top: 8px; }
.pause-card kbd, .keys-card kbd { font: 500 10.5px/1 var(--mono); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--hair-2); color: var(--ink); background: rgba(255, 255, 255, .04); }
.pause-card.collapsed p { display: none; }

.keys-card { position: absolute; z-index: 30; right: var(--pad); bottom: 82px; padding: 16px 18px; border-radius: 14px; background: rgba(12, 14, 19, .94); border: 1px solid var(--hair-2); font: 400 12.5px/1 var(--sans); color: var(--ink-2); display: grid; grid-template-columns: auto auto; gap: 10px 18px; }
.keys-card[hidden] { display: none; }

/* ── Poster frame: the film waits for the viewer to press play ────── */
.poster { position: absolute; z-index: 25; left: 50%; top: 47%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 36px)); display: grid; justify-items: center; text-align: center; gap: 14px; animation: poster-in 1.4s var(--ease) both; }
.poster[hidden] { display: none; }
.poster p { margin: 0; }
.poster-k { font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--signal); margin-bottom: 10px !important; }
.poster-t { margin-top: 12px !important; font: 330 clamp(34px, 5.2vw, 64px)/1 var(--display); font-variation-settings: 'opsz' 144; letter-spacing: -.03em; color: var(--ink); }
.poster-t em { font-weight: 300; color: var(--ember); }
.poster-m { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink-2); }
.poster-h { margin-top: 10px !important; font: 400 12px/1.8 var(--sans); color: var(--muted); }
.pm-loop { margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255, 181, 71, .45); color: var(--ink);
  font: 500 13.5px/1 var(--sans); background: rgba(255, 181, 71, .07); transition: background .25s, transform .25s var(--ease); }
.pm-loop span { color: var(--ember); font-size: 16px; }
.pm-loop:hover { background: rgba(255, 181, 71, .16); transform: translateY(-1px); }
.poster kbd { font: 500 10.5px/1 var(--mono); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--hair-2); color: var(--ink); }
.big-play { width: 96px; height: 96px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(236, 231, 221, .06), 0 0 60px rgba(255, 181, 71, .35); transition: transform .35s var(--ease), box-shadow .35s; animation: pulse 2.6s ease-in-out infinite; }
.big-play svg { width: 32px; height: 32px; fill: var(--bg); margin-left: 5px; }
.big-play:hover { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(236, 231, 221, .08), 0 0 80px rgba(255, 181, 71, .5); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 10px rgba(236, 231, 221, .06), 0 0 60px rgba(255, 181, 71, .30); } 50% { box-shadow: 0 0 0 18px rgba(236, 231, 221, .03), 0 0 90px rgba(255, 181, 71, .45); } }
@keyframes poster-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .big-play, .poster { animation: none; } }

/* ── Tooltip ───────────────────────────────────────────────────────── */
#tooltip { position: fixed; z-index: 40; left: 0; top: 0; min-width: 180px; max-width: 290px; padding: 11px 13px 12px; border-radius: 12px; pointer-events: none;
  background: rgba(12, 14, 19, .94); border: 1px solid var(--hair-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); font: 400 12.5px/1.45 var(--sans); color: var(--ink-2); }
#tooltip[hidden] { display: none; }
#tooltip .tt-k { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 7px; }
#tooltip .tt-k i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#tooltip .tt-t { margin: 6px 0 8px; font: 500 14px/1.25 var(--sans); color: var(--ink); }
#tooltip dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; margin: 0; }
#tooltip dt { color: var(--muted); }
#tooltip dd { margin: 0; font: 500 12px/1.45 var(--mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
#tooltip .tt-n { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--muted); }

/* ── In-chart controls ─────────────────────────────────────────────── */
.ctrls { position: absolute; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; z-index: 6; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(10, 12, 17, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.seg button { font: 500 11.5px/1 var(--sans); padding: 7px 11px; border-radius: 999px; color: var(--ink-2); white-space: nowrap; transition: background .25s, color .25s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.ctrl-label { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: -6px; }
.stage-slider { display: inline-flex; align-items: center; gap: 14px; }
.ss-box { position: relative; width: clamp(180px, 17vw, 280px); height: 34px; }
.ss-box::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 3px; border-radius: 3px; background: rgba(236, 231, 221, .14); }
.ss-fill { position: absolute; left: 0; right: 0; top: 11px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--hw1), var(--ember)); transform-origin: left; box-shadow: 0 0 12px rgba(255, 181, 71, .45); }
.stage-slider input[type=range] { position: absolute; left: -8px; right: -8px; top: 2px; width: calc(100% + 16px); height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: ew-resize; }
.stage-slider input[type=range]::-webkit-slider-runnable-track { height: 22px; background: none; }
.stage-slider input[type=range]::-moz-range-track { height: 22px; background: none; }
.stage-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--ink); border: 3px solid var(--ember); box-shadow: 0 0 0 5px rgba(255, 181, 71, .16), 0 0 18px rgba(255, 181, 71, .6); }
.stage-slider input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 3px solid var(--ember); box-shadow: 0 0 18px rgba(255, 181, 71, .6); }
.ss-ticks { position: absolute; left: 0; right: 0; top: 22px; height: 12px; }
.ss-ticks button { position: absolute; transform: translateX(-50%); font: 500 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding: 2px 3px; }
.ss-ticks button:first-child { transform: none; }
.ss-ticks button:last-child { transform: translateX(-100%); }
.ss-ticks button.on { color: var(--ember); }
.ss-ticks button:hover { color: var(--ink); }

/* ── SVG chart typography ──────────────────────────────────────────── */
.viz text { font-family: var(--sans); fill: var(--ink-2); }
.viz .mono, .viz .tick text { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.viz .tick text { font-size: 10.5px; fill: var(--muted); }
.viz .tick line, .viz .grid line { stroke: var(--hair); }
.viz .domain { stroke: var(--hair-2); }
.viz .axis-title { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }
.viz .label-strong { fill: var(--ink); font-weight: 500; }
.viz .note { font-size: 11px; fill: var(--muted); }
.viz .big { font-family: var(--display); fill: var(--ink); }
.viz .hit { fill: transparent; cursor: pointer; }
.viz .cell, .viz [data-interactive] > * { cursor: pointer; }

/* ── Narrow / portrait ─────────────────────────────────────────────── */
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
  .lens-label, .chapter-label, .hud-link, .cs-d, .chapters-btn span { display: none; }
  .brand { font-size: 15px; }
  .hud-top { padding-top: 12px; gap: 8px; }
  .lens { position: absolute; right: 14px; top: 54px; gap: 2px; padding: 3px; }
  .content-switch { margin-left: auto; order: 3; }
  .content-switch button { padding: 7px 10px; }
  .chapters-btn { order: 2; padding: 7px 9px; }
  .hud-top .spacer { display: none; }
  .lens button { padding: 6px; font-size: 11px; gap: 3px; }
  .lens .hw-pre { display: none; }
  .ctrls { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .ctrls::-webkit-scrollbar { display: none; }
  .ctrl-label { display: none; }
  .seg button { padding: 6px 9px; font-size: 11px; }
  .t-speed, .t-keys, .t-sep, .t-full, .t-auto { display: none !important; }
  .t-modes button { padding: 0 8px !important; font-size: 11px !important; }
  .t-time, .t-prev { display: none !important; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .caption[data-mode='reel'] .cap-title { font-size: clamp(28px, 8.4vw, 40px); }
  .transport .continue-chip { padding: 0 10px 0 12px !important; font-size: 11.5px !important; }
  .transport .continue-chip kbd { display: none; }
  .cap-title { font-size: clamp(24px, 6.4vw, 36px); margin-top: 10px !important; }
  .cap-body { font-size: 13.5px; margin-top: 10px !important; }
  .caption[data-mode='hero'] .cap-title { font-size: clamp(42px, 12vw, 72px); }
  .pause-card { display: none; }
  .seek-osd { display: none; }
}

/* Long Figure 03 lists remain readable without shrinking their text. */
.problem-pager { position: absolute; display: flex; align-items: center; justify-content: space-between; gap: 6px; z-index: 7; font: 500 10px/1.2 var(--mono); color: var(--ink-2); }
.problem-pager button { min-width: 30px; min-height: 28px; padding: 3px 8px; border: 1px solid var(--hair-2); border-radius: 6px; }
.problem-pager button:disabled { opacity: .3; cursor: default; }
.problem-pager button:hover:not(:disabled) { color: var(--bg); background: var(--ember); }
.problem-pager span { text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* ── Content routes: Core / Showcase ─────────────────────────────────── */
.content-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--panel); border: 1px solid var(--hair-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex: none; }
.content-switch button { font: 500 12px/1 var(--sans); padding: 8px 13px; border-radius: 999px; color: var(--ink-2); white-space: nowrap; transition: background .25s, color .25s; }
.content-switch button b { font-weight: 600; color: inherit; }
.content-switch button:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.content-switch button[aria-pressed='true'] { background: var(--ember); color: var(--bg); }
.content-switch .cs-d { opacity: .78; }
.chapters-btn { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--sans); color: var(--ink-2); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--hair-2); white-space: nowrap; }
.chapters-btn svg { width: 14px; height: 14px; fill: currentColor; }
.chapters-btn:hover, .chapters-btn[aria-expanded='true'] { color: var(--ink); border-color: var(--ink-2); }
.chapters-menu { position: absolute; z-index: 32; top: 64px; right: var(--pad); width: 330px; max-height: calc(100vh - 170px); overflow: auto; padding: 14px 10px 12px; border-radius: 16px;
  background: rgba(12, 14, 19, .96); border: 1px solid var(--hair-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.chapters-menu p { margin: 0 8px; }
.cm-head { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember); margin-bottom: 10px !important; }
.cm-foot { margin-top: 10px !important; font: 400 11px/1.4 var(--sans); color: var(--muted); }
.chapters-menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chapters-menu a { display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; gap: 8px; padding: 9px 8px; border-radius: 9px; text-decoration: none; color: var(--ink-2); font: 400 13px/1.25 var(--sans); }
.chapters-menu a b { font: 500 12px/1 var(--mono); color: var(--muted); }
.chapters-menu a small { font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chapters-menu a:hover, .chapters-menu a:focus-visible { background: rgba(255, 255, 255, .06); color: var(--ink); }
.chapters-menu a[aria-current='true'] { background: rgba(255, 181, 71, .12); color: var(--ink); }
.chapters-menu a[aria-current='true'] b { color: var(--ember); }

/* evidence dock: the chapter's figure, sample, and direct links to its evidence */
.dock { position: absolute; z-index: 18; left: var(--pad); bottom: 86px; width: var(--cap-w, 340px); height: var(--dock-h, 96px); padding: 10px 14px; border-radius: 14px;
  background: rgba(12, 15, 21, .55); border: 1px solid var(--hair); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .5s; overflow: hidden; }
.dock-toggle { display: none; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--hair-2); font: 500 11.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dock-toggle b { color: var(--ember); font-weight: 600; }
.dock-body { display: grid; gap: 5px; }
.dock-body p { margin: 0; }
.dock-fig { font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-cohort { font: 400 11.5px/1.35 var(--mono); color: var(--ink-2); }
.dock-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 500 12px/1.5 var(--sans); }
.dock-links a { color: var(--ember); text-decoration: none; border-bottom: 1px solid rgba(255, 181, 71, .3); }
.dock-links a:hover { color: var(--ink); border-color: var(--ink); }
.dock-links a[download] { font: 500 10.5px/1.6 var(--mono); color: var(--ink-2); border-color: var(--hair-2); }
@media (min-width: 821px) and (max-height: 679px) { .dock { padding: 8px 12px; } .dock-fig { display: none; } }
body.idle .dock { opacity: .35; }
body.hide-ui .dock { opacity: 0; pointer-events: none; }

.toast { position: absolute; z-index: 33; left: 50%; top: 70px; transform: translate(-50%, -8px); max-width: min(560px, calc(100vw - 28px)); padding: 11px 16px; border-radius: 12px;
  background: rgba(12, 14, 19, .95); border: 1px solid rgba(255, 181, 71, .35); color: var(--ink); font: 500 12.5px/1.45 var(--sans); text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { display: none; }

/* title screen: the content choice comes first; playback mode is secondary */
.poster-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 8px 0 6px; }
.poster-routes button { display: grid; gap: 5px; justify-items: start; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hair-2); background: rgba(12, 15, 21, .6); color: var(--ink-2); transition: border-color .25s, background .25s; }
.poster-routes button b { font: 400 22px/1 var(--display); color: var(--ink); }
.poster-routes button span { font: 500 12.5px/1.2 var(--sans); }
.poster-routes button small { font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--muted); }
.poster-routes button:hover { border-color: var(--ink-2); }
.poster-routes button[aria-pressed='true'] { border-color: var(--ember); background: rgba(255, 181, 71, .1); box-shadow: 0 0 0 1px var(--ember) inset; }
.poster-routes button[aria-pressed='true'] b { color: var(--ember); }
.pm-loop i { font-style: normal; }

/* conclusion cards */
.takes { position: absolute; display: grid; gap: 12px; overflow: hidden; }
.take { text-align: left; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(236, 231, 221, .14); background: rgba(12, 15, 21, .74); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.take-k { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.take-h { font: 380 clamp(20px, 1.8vw, 27px)/1.1 var(--display); margin: 9px 0 7px; color: var(--ink); }
.take-b { font: 400 13.5px/1.5 var(--sans); color: var(--ink-2); }
.take-figs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.take-figs button { font: 500 11px/1 var(--mono); padding: 6px 9px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--ink-2); }
.take-figs button:hover { color: var(--bg); background: var(--ember); border-color: var(--ember); }
.end-links { position: absolute; display: flex; gap: 10px; flex-wrap: wrap; }
.end-btn { font: 500 13px/1 var(--sans); padding: 13px 18px; border-radius: 999px; text-decoration: none; border: 1px solid rgba(236, 231, 221, .25); background: rgba(12, 15, 21, .7); color: var(--ink); white-space: nowrap; }
.end-btn.primary { background: var(--ink); color: var(--bg); }
.end-btn:hover { border-color: var(--ink); }

.t-seg.fig::after { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: rgba(255, 181, 71, .55); }
.noscript { position: fixed; inset: auto 0 0 0; padding: 20px; background: #ece7dd; color: #07090d; font: 400 15px/1.5 var(--sans); }
.noscript a { color: #07090d; }

/* desktop windows that are short: keep captions inside their column */
@media (min-width: 821px) and (max-height: 760px) {
  .cap-title { font-size: clamp(26px, 2.5vw, 40px); }
  .cap-body { font-size: 13.5px; line-height: 1.5; margin-top: 12px !important; }
  .caption[data-mode='hero'] .cap-title { font-size: clamp(40px, 5.4vw, 84px); }
  .cap-credit { margin-top: 14px !important; }
}
@media (max-width: 1500px) and (min-width: 821px) { .lens-label { display: none; } }
@media (max-width: 1180px) and (min-width: 821px) {
  .cs-d { display: none; }
  .chapter-label { max-width: 18vw; }
}
@media (max-width: 1000px) and (min-width: 821px) { .chapter-label, .hud-link { display: none; } }

/* reduced motion: still frames, no grain, flashes or slams */
body.reduced .grain, body.reduced .continue-chip, body.reduced .big-play, body.reduced .poster { animation: none; }
body.reduced .intertitle, body.reduced .flash, body.reduced .lb { display: none; }
body.reduced .osd.pop { animation-duration: .01s; }

/* narrow / portrait overrides for the route UI (after its base rules) */
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
  .dock { left: 14px; right: auto; top: 54px; bottom: auto; width: auto; height: auto; overflow: visible; max-width: calc(100vw - 210px); padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dock-toggle { display: inline-flex; }
  .dock-body { display: none; }
  .dock.open { max-width: calc(100vw - 28px); z-index: 31; }
  .dock.open .dock-body { display: grid; position: absolute; top: 40px; left: 0; width: min(340px, calc(100vw - 28px)); padding: 12px 14px; border-radius: 14px; background: rgba(12, 14, 19, .96); border: 1px solid var(--hair-2); }
  .chapters-menu { top: 52px; right: 14px; left: 14px; width: auto; max-height: calc(100vh - 150px); }
  .toast { top: 96px; }
  .poster-routes { grid-template-columns: 1fr 1fr; }
  .poster-routes button { padding: 12px 10px; }
  .poster-routes small { display: none; }
  .takes { gap: 8px !important; }
  .take { padding: 12px 14px !important; }
  .take-b { font-size: 12.5px !important; }
  .end-links { gap: 6px !important; }
  .end-btn { padding: 9px 12px !important; font-size: 12px !important; }
  .content-switch button { padding: 7px 11px; }
  /* the held frame's Continue replaces the next-beat button, leaving the scrubber room */
  body.held .t-next { display: none !important; }
}