/* AURA-25 MK-IV: dark stage. The rendered frames sit on #060606, so the page background is the
   same value and the film has no visible edge. Colour comes from the object itself:
   oxblood chassis, cyan pitch LEDs, amber modulation LEDs. */

@property --fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root {
  --bg: #060606;
  --ink: oklch(0.96 0.006 80);
  --mute: oklch(0.74 0.012 80);
  --faint: oklch(0.52 0.01 80);
  --line: oklch(1 0 0 / 0.12);
  --red: oklch(0.56 0.2 25);
  --cyan: oklch(0.86 0.12 205);
  --amber: oklch(0.82 0.15 78);
  --accent: var(--red);

  --display: 'Bricolage Grotesque', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --pad: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--display);
  font-size: clamp(16px, 1.05vw + 10px, 18px);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; font-weight: 600; line-height: 1.02; letter-spacing: -0.025em; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--red); color: var(--ink); }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; transition: top .2s; }
.skip:focus { top: 12px; }

.kicker { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.muted { color: var(--mute); }

/* ---------- Header ---------- */
.site {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 16px var(--pad);
  background: linear-gradient(var(--bg), transparent);
  pointer-events: none;
}
.site > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 0.95rem/1 var(--mono); letter-spacing: 0.06em; }
.brand i { width: 14px; height: 14px; border-radius: 3px; background: var(--red); box-shadow: 0 0 18px var(--red); }
.site nav { margin-left: auto; display: flex; gap: 6px; }
.site nav a, .chip {
  font: 500 0.78rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding: 10px 14px; border-radius: 999px; color: var(--mute);
  transition: color .25s, background-color .25s, border-color .25s;
}
.site nav a:hover { color: var(--ink); background: oklch(1 0 0 / .08); }
.chip { border: 1px solid var(--line); color: var(--ink); }
.chip:hover { border-color: oklch(1 0 0 / .4); background: oklch(1 0 0 / .06); }
.chip[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.chip.locked { border-color: var(--cyan); color: var(--cyan); animation: ping 1.8s ease-in-out infinite; }
@keyframes ping { 50% { box-shadow: 0 0 0 4px transparent, 0 0 18px color-mix(in oklch, var(--cyan) 45%, transparent); } }
.site .actions { display: flex; gap: 8px; }

@media (max-width: 760px) {
  .site nav { display: none; }
  .site .actions { margin-left: auto; }
  .brand { font-size: 0.85rem; }
}

/* ---------- Film ---------- */
.film-track { position: relative; }
.stage { position: relative; }
.deck-live .stage { position: relative; height: 100%; overflow: clip; }
.frames { display: none; }
.deck-live .frames { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 900px) and (min-aspect-ratio: 21/20) {
  .deck-live .frames { mask-image: linear-gradient(90deg, transparent 30%, #000 48%); }
}
.stage::after { content: ''; position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(transparent, var(--bg) 70%); pointer-events: none; display: none; }
@media (max-aspect-ratio: 21/20), (max-width: 899px) { .deck-live .stage::after { display: block; } }

.glow { position: absolute; inset: 0; pointer-events: none; opacity: .55; transition: background .8s;
  background: radial-gradient(60% 50% at 70% 45%, color-mix(in oklch, var(--accent) 28%, transparent), transparent 70%); }

/* Hero and act copy share the lower-left column. */
.copy { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(28px, 6vh, 72px); display: grid; z-index: 5; max-width: 34rem; }
@media (max-width: 899px), (max-aspect-ratio: 21/20) { .copy { max-width: none; bottom: clamp(24px, 5svh, 48px); } }
.hero, .act { grid-area: 1 / 1; align-self: end; transition: opacity .55s var(--ease), visibility 0s .55s; }
.hero h1 { font-size: clamp(3rem, 8.4vw, 7.6rem); letter-spacing: -0.045em; margin: 14px 0 18px; }
.hero h1 small { display: block; font: 500 0.14em/1 var(--mono); letter-spacing: 0.2em; color: var(--mute); margin-top: 0.9em; text-transform: uppercase; }
.hero p { max-width: 30rem; color: var(--mute); font-size: 1.05rem; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 500 0.82rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 22px; border-radius: 999px; border: 1px solid var(--line);
  transition: transform .3s var(--ease), background-color .25s, border-color .25s, color .25s;
}
.btn.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn:hover { transform: translateY(-2px); border-color: oklch(1 0 0 / .45); }
.btn.solid:hover { background: oklch(1 0 0); }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn[hidden] { display: none; }
.cue { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font: 500 0.72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.cue::before { content: ''; width: 1px; height: 28px; background: linear-gradient(var(--faint), transparent); }

.deck-live .hero:not(.on), .deck-live .act:not(.on) { opacity: 0; visibility: hidden; pointer-events: none; }
.deck-live .hero.on, .deck-live .act.on { opacity: 1; visibility: visible; transition-delay: 0s; }

.act h2 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); margin: 14px 0 14px; }
.act p { color: var(--mute); max-width: 28rem; }
.act .meta { display: flex; gap: 14px; align-items: baseline; }
.act .meta b { color: var(--accent); font-weight: 500; transition: color .6s; }
.act-fig { display: none; }
.next { display: none; align-items: center; gap: 12px; margin-top: 26px; padding: 12px 18px 12px 20px; border: 1px solid var(--line); border-radius: 999px; font: 500 0.74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); transition: border-color .25s, background-color .25s, transform .3s var(--ease); }
.deck-live .next { display: inline-flex; }
.next:hover { border-color: oklch(1 0 0 / .45); background: oklch(1 0 0 / .06); }
.next i { font-style: normal; color: var(--accent); animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }

/* Chapter rail */
.rail { position: fixed; z-index: 40; right: var(--pad); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.in-film .rail { opacity: 1; visibility: visible; transition-delay: 0s; }
.rail button { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 7px 0; font: 500 0.7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); transition: color .3s; }
.rail button .lab { opacity: 0; translate: 6px 0; transition: opacity .3s, translate .3s var(--ease); }
.rail button:hover .lab, .rail button[aria-current="true"] .lab, .rail button:focus-visible .lab { opacity: 1; translate: 0 0; }
.rail button .dot { width: 26px; height: 26px; background: oklch(0.1 0 0 / .7); display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: 0.68rem; letter-spacing: 0; transition: border-color .3s, color .3s, background-color .3s; }
.rail button:hover { color: var(--ink); }
.rail button[aria-current="true"] { color: var(--ink); }
.rail button[aria-current="true"] .dot { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.loadbar { position: fixed; right: var(--pad); bottom: 18px; z-index: 40; font: 500 0.66rem/1 var(--mono); letter-spacing: .14em; color: var(--faint); opacity: 0; transition: opacity .4s; text-transform: uppercase; }
.loadbar.on { opacity: 1; }
@media (max-width: 899px), (max-aspect-ratio: 21/20) {
  .rail { top: 66px; left: var(--pad); right: var(--pad); translate: 0 0; flex-direction: row; justify-content: space-between; }
  .rail button { flex: 1; justify-content: center; padding: 4px 0; }
  .rail button .lab { display: none; }
  .rail button .dot { width: 30px; height: 30px; }
  .loadbar { bottom: 8px; left: var(--pad); right: auto; }
}

/* No-JS and reduced motion: the same acts as an ordinary stack with the matching frame beside each. */
html:not(.deck-live) .stage { padding: 110px var(--pad) 40px; }
html:not(.deck-live) .copy { position: static; max-width: none; display: block; }
html:not(.deck-live) .hero { margin-bottom: 64px; max-width: 46rem; }
html:not(.deck-live) .act { display: grid; gap: 24px; margin-bottom: 72px; max-width: 70rem; }
html:not(.deck-live) .act-fig { display: block; border-radius: 14px; overflow: clip; background: #000; }
html:not(.deck-live) .act-fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
html:not(.deck-live) .rail, html:not(.deck-live) .glow { display: none; }
@media (min-width: 900px) { html:not(.deck-live) .act { grid-template-columns: 1.5fr 1fr; align-items: center; gap: 56px; } }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(96px, 14vw, 200px) var(--pad); }
.wrap { max-width: 1280px; margin: 0 auto; }
.section-head { max-width: 46rem; margin-bottom: clamp(48px, 7vw, 96px); }
.section-head h2 { font-size: clamp(2.4rem, 6.4vw, 5.6rem); margin: 16px 0 20px; }
.section-head p { color: var(--mute); max-width: 34rem; font-size: 1.08rem; }

.zone { display: grid; gap: 28px; padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid var(--line); align-items: center; }
.zone-media { border-radius: 16px; overflow: clip; background: #000; aspect-ratio: 16 / 10; position: relative; }
.zone-media img { width: 100%; height: 100%; object-fit: cover; }
.zone h3 { font-size: clamp(1.8rem, 3.6vw, 3rem); margin: 14px 0 16px; }
.zone ul { list-style: none; display: grid; gap: 0; margin-top: 18px; font: 400 0.82rem/1.4 var(--mono); color: var(--mute); }
.zone li { padding: 11px 0; border-top: 1px solid var(--line); display: flex; gap: 12px; }
.zone li::before { content: '+'; color: var(--accent); }
.zone:nth-of-type(1) { --accent: var(--red); }
.zone:nth-of-type(2) { --accent: var(--cyan); }
.zone:nth-of-type(3) { --accent: var(--amber); }
.zone:nth-of-type(4) { --accent: var(--ink); }
@media (min-width: 900px) {
  .zone { grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); }
  .zone:nth-of-type(even) .zone-media { order: 2; }
}

.profile { display: grid; gap: 36px; align-items: end; }
.figure { font-size: clamp(9rem, 34vw, 30rem); font-weight: 700; line-height: .78; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; color: var(--red); }
.figure sup { font-size: .22em; letter-spacing: 0; vertical-align: top; margin-left: .1em; }
.profile h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 18px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: clamp(56px, 8vw, 110px); border-top: 1px solid var(--line); }
.stat { padding: 28px 0; border-bottom: 1px solid var(--line); }
.stat:nth-child(odd) { padding-right: 20px; }
.stat b { display: block; font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat b small { font-size: .38em; color: var(--mute); margin-left: .15em; letter-spacing: 0; }
.stat span { display: block; margin-top: 10px; font: 500 0.7rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
@media (min-width: 900px) {
  .profile { grid-template-columns: auto 1fr; gap: clamp(40px, 8vw, 120px); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: 0; border-right: 1px solid var(--line); padding: 32px 24px; }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; }
}

/* ---------- Play ---------- */
.play-panel { border: 1px solid var(--line); border-radius: 20px; padding: clamp(18px, 3vw, 36px); background: linear-gradient(oklch(1 0 0 / .035), transparent); }
.play-bar { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.play-hint { font: 400 0.8rem/1.6 var(--mono); color: var(--mute); max-width: 36rem; }
kbd { font: 500 0.72rem/1 var(--mono); padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); }
.play-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.keys { position: relative; display: flex; height: clamp(150px, 26vw, 250px); touch-action: pan-y; user-select: none; -webkit-user-select: none; container-type: inline-size; }
.key { position: relative; border: 0; padding: 0; cursor: pointer; font: 500 0.7rem/1 var(--mono); }
.key span { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; pointer-events: none; }
.key.white { flex: 1; background: linear-gradient(oklch(0.97 0.004 80), oklch(0.88 0.006 80)); color: #555; border-radius: 0 0 8px 8px; margin-right: 2px; box-shadow: inset 0 -6px 0 oklch(0.78 0.01 80); transition: transform .06s, background .12s, box-shadow .12s; transform-origin: top; }
.key.white:last-child { margin-right: 0; }
.key.black { position: absolute; top: 0; height: 62%; z-index: 2; background: linear-gradient(oklch(0.2 0.004 80), oklch(0.1 0.004 80)); color: #888; border-radius: 0 0 6px 6px; box-shadow: 0 6px 14px #000a, inset 0 -4px 0 #000; transition: transform .06s, background .12s; transform-origin: top; }
.key.black span { bottom: 8px; }
.key.white.down { background: linear-gradient(var(--cyan), oklch(0.78 0.1 205)); box-shadow: inset 0 -2px 0 oklch(0.6 0.1 205), 0 0 28px color-mix(in oklch, var(--cyan) 55%, transparent); transform: translateY(2px); }
.key.black.down { background: linear-gradient(var(--amber), oklch(0.7 0.14 78)); box-shadow: 0 0 24px color-mix(in oklch, var(--amber) 55%, transparent); transform: translateY(2px); }
@container (max-width: 520px) { .key.black span { display: none; } .key.white span { font-size: 0.62rem; bottom: 6px; } }
.play-status { min-height: 1.6em; margin-top: 20px; font: 400 0.78rem/1.6 var(--mono); color: var(--mute); }

/* ---------- Footer ---------- */
.footer { padding: 48px var(--pad) 64px; border-top: 1px solid var(--line); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; font: 400 0.78rem/1.5 var(--mono); color: var(--mute); }
.footer strong { color: var(--ink); font-weight: 500; }

/* ---------- Spec sheet dialog (native <dialog>, animated with @starting-style) ---------- */
dialog.spec { margin: auto; width: min(680px, calc(100vw - 24px)); max-height: min(86svh, 780px); border: 1px solid var(--line); border-radius: 20px; padding: 0; background: oklch(0.14 0.004 80); color: var(--ink); overflow: auto; overscroll-behavior: contain;
  opacity: 0; translate: 0 24px; scale: .98;
  transition: opacity .35s var(--ease), translate .35s var(--ease), scale .35s var(--ease), overlay .35s allow-discrete, display .35s allow-discrete; }
dialog.spec[open] { opacity: 1; translate: 0 0; scale: 1; }
@starting-style { dialog.spec[open] { opacity: 0; translate: 0 24px; scale: .98; } }
dialog.spec::backdrop { background: oklch(0 0 0 / .72); opacity: 0; transition: opacity .35s, overlay .35s allow-discrete, display .35s allow-discrete; }
dialog.spec[open]::backdrop { opacity: 1; }
@starting-style { dialog.spec[open]::backdrop { opacity: 0; } }
.spec-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: oklch(0.14 0.004 80); border-bottom: 1px solid var(--line); }
.spec-head h2 { font-size: 1.4rem; }
.spec details { border-bottom: 1px solid var(--line); }
.spec summary { list-style: none; cursor: pointer; padding: 18px 24px; display: flex; justify-content: space-between; font: 500 0.8rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.spec summary::-webkit-details-marker { display: none; }
.spec summary::after { content: '+'; color: var(--mute); transition: rotate .3s var(--ease); }
.spec details[open] summary::after { rotate: 45deg; }
.spec dl { display: grid; grid-template-columns: 1fr auto; padding: 0 24px 18px; font: 400 0.82rem/1.4 var(--mono); }
.spec dt, .spec dd { padding: 9px 0; border-top: 1px solid var(--line); }
.spec dt { color: var(--mute); }
.spec dd { text-align: right; }

/* ---------- Scroll-driven CSS (progressive enhancement; everything is visible without it) ---------- */
@supports (animation-timeline: scroll()) {
  .zone-media { animation: unclip linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @keyframes unclip { from { clip-path: inset(14% 8% 14% 8% round 16px); opacity: .3; } to { clip-path: inset(0 round 16px); opacity: 1; } }
  .zone-media img { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; scale: 1.18; }
  @keyframes drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
  .zone-text { animation: rise linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
  @keyframes rise { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }

  .figure { color: transparent; background: linear-gradient(90deg, var(--red) var(--fill), oklch(1 0 0 / .1) var(--fill)); -webkit-background-clip: text; background-clip: text; animation: fillup linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
  @keyframes fillup { to { --fill: 100%; } }
  .stat { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .figure { color: var(--red) !important; background: none !important; }
}

/* ====================================================================== */
/* Deck: one fixed full-viewport stage. A single master GSAP timeline      */
/* moves panels (vertical wipes) and the controls strip (horizontal).      */
/* ====================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.deck-live, .deck-live body { overflow: hidden; overscroll-behavior: none; }
.deck-live .deck { position: fixed; inset: 0; overflow: clip; touch-action: none; }
.deck-live .panel { position: absolute; inset: 0; overflow: clip; background: var(--bg); will-change: transform; }
.deck-live .panel:not(.film) { visibility: hidden; } /* JS parks them below the viewport, then reveals */
.deck-live .panel.section { padding: 0; }

/* Controls: a 400%-wide strip, one slide per zone */
.zones .zhead, .zones .strip { max-width: 1280px; margin-inline: auto; }
.zones .zhead { margin-bottom: 48px; max-width: 46rem; margin-left: max(0px, calc((100% - 1280px) / 2)); }
.zones .zhead h2 { font-size: clamp(2.4rem, 6.4vw, 5.6rem); margin: 16px 0 20px; }
.zones .zhead p { color: var(--mute); max-width: 34rem; }
.deck-live .panel.zones { display: flex; flex-direction: column; padding: clamp(76px, 11svh, 104px) 0 0; }
.deck-live .zones .zhead { margin: 0; padding: 0 var(--pad) clamp(4px, 1.4svh, 14px); max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.deck-live .zones .zhead h2 { font-size: clamp(1.15rem, 2.1vw, 1.75rem); margin: 0; letter-spacing: -0.015em; }
.deck-live .zones .zhead p { display: none; }
.deck-live .strip { flex: 1; min-height: 0; display: flex; width: 400%; max-width: none; margin: 0; }
.deck-live .zslide { flex: 0 0 25%; width: 25%; min-width: 0; margin: 0; padding: clamp(8px, 2svh, 24px) var(--pad) clamp(20px, 5svh, 56px); border-top: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(14px, 3svh, 28px); align-items: stretch; }
.deck-live .zslide .zone-media { aspect-ratio: auto; min-height: 0; height: auto; align-self: stretch; }
.deck-live .zslide .zone-media img { width: 124%; max-width: none; height: 100%; margin-left: -12%; object-fit: cover; }
.deck-live .zslide .zone-text { align-self: end; }
.deck-live .zslide h3 { font-size: clamp(1.5rem, 3.2vw, 2.8rem); margin: 10px 0 12px; }
.deck-live .zslide ul { margin-top: 12px; }
.deck-live .zslide li { padding: 8px 0; }
.deck-live .zslide .next { margin-top: 18px; }
@media (min-width: 900px) {
  .deck-live .zslide { grid-template-columns: 7fr 5fr; grid-template-rows: minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; padding-bottom: clamp(28px, 7svh, 80px); }
  .deck-live .zslide:nth-of-type(even) .zone-media { order: 2; }
  .deck-live .zslide .zone-media { height: min(100%, 70svh); }
  .deck-live .zslide .zone-text { align-self: center; }
}
@media (max-height: 700px) { .deck-live .zslide li:nth-child(n+3) { display: none; } .deck-live .zslide p.muted { font-size: .92rem; } }
@media (max-height: 560px) { .deck-live .zslide ul { display: none; } }
/* parallax and scroll-driven reveals belong to the old scrolling page; the timeline owns them now */
.deck-live .zone-media, .deck-live .zone-media img, .deck-live .zone-text, .deck-live .figure, .deck-live .stat { animation: none !important; }
.deck-live .figure { background: none; color: var(--red); }

/* 18mm */
.deck-live .panel#profile { display: grid; align-content: center; padding: clamp(80px, 12svh, 120px) var(--pad) clamp(24px, 6svh, 56px); }
.deck-live .profile { margin: 0 auto; width: 100%; max-width: 1280px; }
.deck-live .figure { font-size: clamp(6rem, min(34vw, 42svh), 30rem); }
.deck-live .stats { margin-top: clamp(24px, 6svh, 84px); }
.deck-live .stat { padding-block: clamp(12px, 2.4svh, 28px); }
.deck-live .stat b { font-size: clamp(2rem, min(5vw, 7svh), 4.4rem); }
@media (max-height: 640px) { .deck-live #profile .profile p.muted { display: none; } }
.deck-live #profile .wrap { width: 100%; }

/* Play + footer */
.deck-live .panel#play { display: grid; align-content: center; padding: clamp(76px, 11svh, 110px) var(--pad) clamp(70px, 12svh, 110px); }
.deck-live #play .wrap { width: 100%; }
.deck-live #play .section-head { margin-bottom: clamp(14px, 3svh, 40px); }
.deck-live #play .section-head h2 { font-size: clamp(2rem, min(5.4vw, 9svh), 4.6rem); margin: 10px 0 12px; }
.deck-live #play .keys { height: clamp(96px, 24svh, 250px); }
@media (max-height: 700px) { .deck-live #play .section-head p, .deck-live #play .play-hint { display: none; } }
.deck-live .footer { position: absolute; inset: auto 0 0 0; padding: 14px var(--pad) 16px; }
.deck-live .footer .wrap { font-size: 0.7rem; gap: 6px 28px; }
@media (max-width: 600px) { .deck-live .footer .wrap > span { flex-basis: 100%; } }

/* Keep content clear of the chapter rail on wide screens; labels show on hover only inside the deck. */
@media (min-width: 900px) and (min-aspect-ratio: 21/20) {
  .deck-live .zslide, .deck-live .panel#profile, .deck-live .panel#play { padding-right: calc(var(--pad) + 64px); }
  .deck-live .zones .zhead { padding-right: calc(var(--pad) + 64px); }
}
.deck-live .rail button[aria-current="true"]:not(:hover):not(:focus-visible) .lab { opacity: 0; translate: 6px 0; }

/* Phones and short screens: clear the rail row, shrink the chrome, keep every slide inside the viewport. */
@media (max-width: 899px), (max-aspect-ratio: 21/20) {
  .deck-live .panel.zones { padding-top: clamp(104px, 15svh, 124px); }
  .deck-live .panel#profile { padding-top: clamp(112px, 16svh, 132px); }
  .deck-live .panel#play { padding-top: clamp(104px, 15svh, 124px); }
  .rail button .dot { width: clamp(20px, 6.4vw, 28px); height: clamp(20px, 6.4vw, 28px); font-size: 0.6rem; }
  .rail button { padding: 2px 0; }
}
@media (max-width: 400px) {
  .site { gap: 10px; padding-inline: 14px; }
  .brand { font-size: 0.72rem; white-space: nowrap; gap: 7px; }
  .chip { padding: 9px 11px; font-size: 0.66rem; letter-spacing: 0.05em; white-space: nowrap; }
  .site .actions { gap: 6px; }
  .rail { left: 14px; right: 14px; }
}
@media (max-height: 640px) {
  .deck-live .zslide p.muted { display: none; }
  .deck-live .zslide h3 { font-size: 1.35rem; margin: 6px 0 8px; }
  .deck-live .zslide .next { margin-top: 12px; }
  .deck-live .zones .zhead h2 { font-size: 1rem; }
  .deck-live .footer .wrap > span { display: none; }
  .deck-live .panel#play { padding-bottom: 64px; }
  .deck-live .play-panel { padding: 14px; }
  .deck-live .play-bar { margin-bottom: 14px; gap: 8px; }
  .deck-live .btn { padding: 12px 16px; }
  .deck-live #play .section-head h2 { font-size: 1.8rem; }
  .deck-live .stat b { font-size: 1.8rem; }
  .deck-live .stats { margin-top: 18px; }
}
@media (max-height: 640px) {
  .deck-live .figure { font-size: clamp(5rem, 19svh, 8rem); }
  .deck-live .panel#profile { padding-top: 108px; }
}

/* Touch devices: no computer keyboard, so drop the key-letter hints. */
@media (pointer: coarse) {
  .play-hint, .key span { display: none; }
}