/* ==========================================================================
   StratLab — reveal layer (temporary first page)
   Same tokens as the main site; different job. This page performs a power-up:
   zones of the page come on unevenly, like breakers being thrown one by one.

   Fail-open discipline (same as the main site):
   - Default state is FULLY LIT. Nothing is hidden unless boot-arm.js runs.
   - Every armed zone carries a pure-CSS 5s auto-light failsafe, so even if
     reveal.js dies after arming, the page lights itself.
   ========================================================================== */

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/ibm-plex-mono-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/ibm-plex-mono-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/space-grotesk-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root {
  --bg:        #0D1015;
  --panel:     #12161D;
  --panel-deep:#0C0F14;
  --inset:     #0F1319;
  --line:      #232A35;
  --line-dim:  #1B212B;
  --line-mid:  #2A313C;
  --blueprint: #3A4454;
  --text-hi:   #E9EDF3;
  --text-mid:  #8C96A6;
  --text-low:  #737F91;
  --accent:    #E23A50;
  --accent-hover:#F04E63;
  --accent-hi: #FF5A6E;
  --hold:      #E3A83B;
  --go:        #45C978;
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-snap: 140ms cubic-bezier(.2, .85, .3, 1);

  /* Ambient texture speeds. These are the flicker/scramble textures, separate
     from the power-up choreography (which is the per-zone --d/--dur pair).
     Slowed ~50% on 2026-07-19: the originals read as agitated rather than
     tense. Raise these numbers to calm the page further. */
  --fx-static:      1s;      /* teaser-bay noise           (was .6s)  */
  --fx-blink:       1.5s;    /* cursor + countdown colons  (was 1s)   */
  --fx-pulse:       2s;      /* GO dots                    (was 1.4s) */
  --fx-pulse-slow:  2.6s;    /* live phase dot             (was 1.8s) */
  --fx-tear:        10s;     /* signal tear-line drop      (was 7s)   */
}

*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, ol, li, pre { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text-hi);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--text-mid); text-decoration: none; }
a:hover { color: var(--accent-hi); }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 3px; }
svg { display: block; }

/* --------------------------------------------------------------------------
   POWER-UP SYSTEM
   Four flicker signatures — each zone gets one, plus its own delay, so no
   two parts of the page come on the same way. Tight keyframe pairs read as
   electrical stutter; 'both' fill keeps a zone dark until its breaker flips.
   -------------------------------------------------------------------------- */
/* Five fixture types, not five variations on one. Real rooms light unevenly
   because the hardware differs: a choked ballast crawls, a fluorescent tube
   strikes and fails and strikes again, a filament glows without a flicker at
   all, an LED is simply on, and an emergency circuit sits dim for a long beat
   before it finds mains. Duration is per-element (--dur), so the spread runs
   from a 0.35s snap to a 4.8s crawl — roughly 14x, where it used to be 1.7x. */

/* BALLAST — choked starter. Each strike a little stronger, each dip a little
   shallower. The slowest thing on the page; it is still climbing when other
   fixtures have long settled. */
@keyframes puBallast {
  0%   { opacity: 0 }
  3%   { opacity: .16 }   5%  { opacity: .02 }
  10%  { opacity: .28 }   12% { opacity: .05 }
  20%  { opacity: .40 }   23% { opacity: .11 }
  33%  { opacity: .54 }   37% { opacity: .24 }
  47%  { opacity: .66 }   52% { opacity: .39 }
  63%  { opacity: .80 }   69% { opacity: .57 }
  80%  { opacity: .92 }   86% { opacity: .76 }
  94%  { opacity: 1 }     97% { opacity: .90 }
  100% { opacity: 1 } }

/* TUBE — fluorescent. Full-brightness strikes that fail back to near-black
   three times before the gas holds. Violent, and over quickly. */
@keyframes puTube {
  0%   { opacity: 0 }
  4%   { opacity: .92 }   6%  { opacity: .04 }
  11%  { opacity: .98 }   13% { opacity: .02 }
  19%  { opacity: .90 }   22% { opacity: .08 }
  30%  { opacity: 1 }     34% { opacity: .15 }
  43%  { opacity: .95 }   48% { opacity: .42 }
  57%  { opacity: 1 }     63% { opacity: .68 }
  72%  { opacity: 1 }     78% { opacity: .88 }
  100% { opacity: 1 } }

/* FILAMENT — incandescent. No flicker whatsoever: a slow thermal ramp with a
   single settle at the top. This is the deliberate opposite of TUBE, and the
   contrast between them is most of the effect. */
@keyframes puFilament {
  0%   { opacity: 0 }
  12%  { opacity: .015 }
  30%  { opacity: .09 }
  48%  { opacity: .26 }
  64%  { opacity: .50 }
  78%  { opacity: .74 }
  90%  { opacity: .93 }
  96%  { opacity: 1 }
  98%  { opacity: .96 }
  100% { opacity: 1 } }

/* LED — no warm-up, one supply bounce, done. The fast end of the spread. */
@keyframes puSnap {
  0%   { opacity: 0 }
  22%  { opacity: 1 }
  40%  { opacity: .55 }
  58%  { opacity: 1 }
  74%  { opacity: .86 }
  100% { opacity: 1 } }

/* EMERGENCY — battery-dim for most of its run, twitching, then finds mains
   and surges to full late. Reads as something struggling, then winning. */
@keyframes puEmergency {
  0%   { opacity: 0 }
  6%   { opacity: .12 }
  14%  { opacity: .16 }
  30%  { opacity: .17 }   33% { opacity: .06 }
  45%  { opacity: .20 }   50% { opacity: .09 }
  61%  { opacity: .24 }   66% { opacity: .12 }
  74%  { opacity: 1 }     79% { opacity: .50 }
  86%  { opacity: 1 }     92% { opacity: .78 }
  100% { opacity: 1 } }

/* STRIKE — the finale, and the only fixture that also drives light OUTPUT, not
   just opacity. A big fluorescent that fails three times before it catches,
   then settles through two dying flickers. It runs last, after every other
   zone has already settled, so the page is still for a beat and then this
   thing kicks in. The glow is animated with the opacity because a real tube
   throws light when it strikes — fading in without it reads as a fade, not
   as a light coming on. */
@keyframes puStrike {
  0%   { opacity: 0;   text-shadow: none }
  7%   { opacity: .50; text-shadow: 0 0 14px rgba(226, 58, 80, .30) }
  10%  { opacity: .03; text-shadow: none }
  19%  { opacity: .80; text-shadow: 0 0 22px rgba(226, 58, 80, .45) }
  22%  { opacity: .04; text-shadow: none }
  31%  { opacity: 1;   text-shadow: 0 0 34px rgba(226, 58, 80, .60) }
  36%  { opacity: .08; text-shadow: none }
  46%  { opacity: 1;   text-shadow: 0 0 46px rgba(226, 58, 80, .80), 0 0 96px rgba(226, 58, 80, .40) }
  53%  { opacity: .30; text-shadow: 0 0 18px rgba(226, 58, 80, .30) }
  61%  { opacity: 1;   text-shadow: 0 0 46px rgba(226, 58, 80, .78), 0 0 96px rgba(226, 58, 80, .38) }
  69%  { opacity: .62; text-shadow: 0 0 24px rgba(226, 58, 80, .40) }
  78%  { opacity: 1;   text-shadow: 0 0 40px rgba(226, 58, 80, .62) }
  86%  { opacity: .88; text-shadow: 0 0 30px rgba(226, 58, 80, .45) }
  100% { opacity: 1;   text-shadow: 0 0 26px rgba(226, 58, 80, .28) }
}

@keyframes puAutoOn { to { opacity: 1 } }

/* Default: lit. boot-arm.js flips html.arming before first paint. */
html.arming .pz {
  opacity: 0;
  /* Failsafe: every armed zone lights itself at 10s even if reveal.js dies.
     Must stay clear of the real sequence, which finishes at ~7.7s with the
     "Lights on." strike. */
  animation: puAutoOn .01s linear 10s both;
}

/* --d = when this fixture's breaker is thrown, --dur = how long it takes to
   come up. Both live on the element, so choreography is readable in the HTML
   rather than buried in a stylesheet. */
html.arming.booting [data-boot="ballast"]   { animation: puBallast   var(--dur, 4.8s) linear var(--d, 0s) both; }
html.arming.booting [data-boot="tube"]      { animation: puTube      var(--dur, 2.4s) linear var(--d, 0s) both; }
html.arming.booting [data-boot="filament"]  { animation: puFilament  var(--dur, 3.2s) linear var(--d, 0s) both; }
html.arming.booting [data-boot="snap"]      { animation: puSnap      var(--dur, .35s) linear var(--d, 0s) both; }
html.arming.booting [data-boot="emergency"] { animation: puEmergency var(--dur, 3.6s) linear var(--d, 0s) both; }
html.arming.booting [data-boot="strike"]    { animation: puStrike    var(--dur, 2.1s) linear var(--d, 0s) both; }

/* ONLINE always wins — !important is deliberate and load-bearing.
   The fixture rules above carry a [data-boot] attribute selector, so they
   out-specify this one (0,3,1 vs 0,2,1). Without the override, any condition
   where CSS animations do not advance — a tab backgrounded during load, a
   prerender, an aggressively throttled device — would leave the page black
   forever, because reveal.js's timer sets .online but the cascade ignores it.
   The JS timer fires in those conditions even when the compositor is frozen,
   so this rule is what converts "timer fired" into "the user can read the
   page". Do not lower its weight.

   (The separate puAutoOn failsafe on html.arming covers the other case —
   reveal.js never running at all — where .booting is absent and the fixture
   rules are inert.) */
html.online .pz { opacity: 1 !important; animation: none !important; }

/* --------------------------------------------------------------------------
   AMBIENT LOOPS (only run once the boot completes)
   -------------------------------------------------------------------------- */
@keyframes kfBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes kfPulse {
  0% { transform: scale(.55); opacity: .85 }
 70% { opacity: .18 }
 100% { transform: scale(2.1); opacity: 0 } }
@keyframes kfSweep { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes noiseShift {
  0%   { background-position: 0 0 }
  100% { background-position: 240px 240px } }
@keyframes tearDrop { from { top: -8% } to { top: 108% } }

html.online .cursor { animation: kfBlink var(--fx-blink) steps(1) infinite; }

/* --------------------------------------------------------------------------
   BACKDROP
   -------------------------------------------------------------------------- */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 28px 28px;
}
.grid-bg::after {
  /* faint blueprint strokes */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#3A4454 2px, transparent 0) 8% 18% / 34% 2px no-repeat,
    linear-gradient(#3A4454 2px, transparent 0) 58% 12% / 38% 2px no-repeat,
    linear-gradient(90deg, #3A4454 2px, transparent 0) 22% 0 / 2px 52% no-repeat,
    linear-gradient(90deg, #3A4454 2px, transparent 0) 78% 30% / 2px 60% no-repeat,
    linear-gradient(#3A4454 2px, transparent 0) 30% 82% / 44% 2px no-repeat;
  opacity: .35;
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 85% 70% at 50% 38%, transparent 20%, rgba(13, 16, 21, .93) 100%);
}

/* --------------------------------------------------------------------------
   TOP BAR
   -------------------------------------------------------------------------- */
.rv-top {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px 0;
}
.rv-top__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 17px var(--sans);
  cursor: pointer;
  user-select: none;
}
.rv-top__creed {
  font: 500 9.5px var(--mono);
  letter-spacing: .18em;
  color: var(--text-low);
}
/* Dev access to the full marketing site while the reveal fronts the domain.
   Amber, not accent — it must read as a staff door, not a call to action. */
.dev-chip {
  margin-left: auto;
  font: 600 10px var(--mono);
  letter-spacing: .14em;
  color: var(--hold);
  border: 1px dashed rgba(227, 168, 59, .45);
  border-radius: 4px;
  padding: 5px 10px;
  white-space: nowrap;
  transition: border-color var(--t-snap), color var(--t-snap), background-color var(--t-snap);
}
.dev-chip:hover {
  color: #F2C572;
  border-color: var(--hold);
  background: rgba(227, 168, 59, .08);
}

.sys-chip {
  font: 600 10px var(--mono);
  letter-spacing: .14em;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  padding: 5px 10px;
  color: var(--go);
  border-color: rgba(69, 201, 120, .35);
}
.sys-chip[data-state='boot'] { color: var(--hold); border-color: rgba(227, 168, 59, .4); }
.sys-chip[data-state='standby'] { color: var(--accent-hi); border-color: rgba(226, 58, 80, .4); }

/* --------------------------------------------------------------------------
   AUDIO CHIP
   Reads as another instrument on the panel rather than a media widget. It
   ships `hidden` and audio.js unhides it, so this only ever renders when
   there is genuinely something to play.
   -------------------------------------------------------------------------- */
.aud-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 10px var(--mono);
  letter-spacing: .14em;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  padding: 5px 10px;
  background: transparent;
  color: var(--text-low);
  cursor: pointer;
  /* Without this the two-word states ("AUDIO ARMED") wrap onto a second line
     and shove the ONLINE chip off the right edge of a phone header. */
  white-space: nowrap;
  /* 44px hit target without a 44px box: the chip stays visually compact and
     the padding is claimed by a pseudo-element. */
  position: relative;
}
/* Claims a >=44px tap target around a deliberately small chip. The horizontal
   inset is the binding one: with the label hidden on phones the visual box is
   only ~26px wide, so -9px each side is what gets it over the line. */
.aud-chip::after {
  content: '';
  position: absolute;
  inset: -12px -9px;
}
.aud-chip[hidden] { display: none; }
.aud-chip:hover,
.aud-chip:focus-visible { color: var(--text-hi); border-color: var(--blueprint); }
.aud-chip__ico { font-size: 11px; line-height: 1; }

.aud-chip[data-state='armed'] { color: var(--hold); border-color: rgba(227, 168, 59, .4); }
.aud-chip[data-state='load']  { color: var(--hold); border-color: rgba(227, 168, 59, .4); }
.aud-chip[data-state='on']    { color: var(--go);   border-color: rgba(69, 201, 120, .35); }

/* Only the playing state animates, and only for people who accept motion. */
@media (prefers-reduced-motion: no-preference) {
  .aud-chip[data-state='on'] .aud-chip__ico { animation: audPulse 2.4s ease-in-out infinite; }
}
@keyframes audPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.rv-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.rv-hero {
  text-align: center;
  padding: clamp(48px, 9vh, 96px) 0 clamp(28px, 5vh, 56px);
}
.rv-kicker {
  font: 500 12px var(--mono);
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: 20px;
}
.rv-title {
  font: 700 clamp(38px, 6.4vw, 78px)/1.04 var(--sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.rv-title em {
  font-style: normal;
  color: var(--accent);
  /* Resting glow. Declared here rather than only in the keyframe so it survives
     `animation: none` once the page goes online — the light stays lit. */
  text-shadow: 0 0 26px rgba(226, 58, 80, .28);
}
.rv-sub {
  margin-top: 18px;
  font: 400 clamp(15px, 1.5vw, 18px)/1.6 var(--sans);
  color: var(--text-mid);
}

/* --------------------------------------------------------------------------
   COUNTDOWN
   -------------------------------------------------------------------------- */
.rv-count {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(22px, 4vw, 36px) clamp(18px, 4vw, 40px) 26px;
  text-align: center;
  overflow: hidden;
}
.rv-count__label {
  font: 500 11px var(--mono);
  letter-spacing: .24em;
  color: var(--text-low);
}
.rv-count__clock {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(6px, 2vw, 18px);
  margin: 14px 0 10px;
}
.cd-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.cd-cell b {
  font: 600 clamp(44px, 9vw, 92px)/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.cd-cell i {
  font: 600 9px var(--mono);
  font-style: normal;
  letter-spacing: .3em;
  color: var(--text-low);
}
.cd-sep {
  font: 600 clamp(30px, 6vw, 60px)/1 var(--mono);
  color: var(--accent);
  transform: translateY(-.35em);
}
html.online .cd-sep { animation: kfBlink var(--fx-blink) steps(1) infinite; }
.rv-count__target {
  font: 500 11px var(--mono);
  letter-spacing: .14em;
  color: var(--text-mid);
}

.phase-rail {
  list-style: none;
  padding: 0;
  margin: 22px auto 0;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 4vw, 44px);
  flex-wrap: wrap;
}
.phase {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 10px var(--mono);
  letter-spacing: .12em;
}
.phase b { color: var(--text-hi); font-weight: 600; }
.phase i { font-style: normal; }
.phase__dot { width: 8px; height: 8px; border-radius: 50%; position: relative; }
.phase.is-live  .phase__dot { background: var(--go); }
.phase.is-live  i { color: var(--go); }
.phase.is-armed .phase__dot { background: var(--accent); }
.phase.is-armed i { color: var(--accent-hi); }
.phase.is-hold  .phase__dot { background: transparent; border: 1.5px solid var(--hold); }
.phase.is-hold  i { color: var(--hold); }
.phase.is-hold  b { color: var(--text-mid); }
html.online .phase.is-live .phase__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--go);
  animation: kfPulse var(--fx-pulse-slow) ease-out infinite;
}
.phase-note {
  margin-top: 12px;
  font: 400 11px var(--mono);
  color: var(--text-low);
  letter-spacing: .04em;
}
.rv-count__sweep {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(1);
}
html.online .rv-count__sweep { animation: kfSweep 15s linear infinite; }

/* --------------------------------------------------------------------------
   TEASER BAY
   -------------------------------------------------------------------------- */
.rv-bay {
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid rgba(226, 58, 80, .33);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(226, 58, 80, .07);
}
.rv-bay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-dim);
}
.rv-bay__file { font: 600 10px var(--mono); letter-spacing: .16em; color: var(--accent-hi); }
.lock-chip {
  font: 600 9px var(--mono);
  letter-spacing: .12em;
  color: var(--hold);
  border: 1px solid rgba(227, 168, 59, .4);
  border-radius: 3px;
  padding: 3px 7px;
  white-space: nowrap;
}
.rv-bay__screen {
  position: relative;
  aspect-ratio: 16 / 7;
  background: var(--panel-deep);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.rv-bay__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: .12;
}
html.online .rv-bay__noise { animation: noiseShift var(--fx-static) steps(5) infinite; }
.rv-bay__tear {
  position: absolute;
  left: 0;
  right: 0;
  top: -8%;
  height: 3px;
  background: rgba(255, 255, 255, .06);
}
html.online .rv-bay__tear { animation: tearDrop var(--fx-tear) linear infinite; }
.rv-bay__flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.rv-bay__flash.is-hit { animation: puSnap .35s linear reverse; }
.rv-bay__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.rv-bay__play {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(226, 58, 80, .55);
  background: rgba(13, 16, 21, .6);
  color: var(--accent-hi);
  cursor: pointer;
  transition: border-color var(--t-snap), color var(--t-snap), background-color var(--t-snap);
}
.rv-bay__play:hover { border-color: var(--accent-hi); color: #fff; background: rgba(226, 58, 80, .18); }
.rv-bay__label {
  font: 600 10px var(--mono);
  letter-spacing: .22em;
  color: var(--text-mid);
}
.rv-bay__scrub {
  position: relative;
  height: 20px;
  margin: 0 16px;
  border: 1px solid var(--line-dim);
  border-radius: 3px;
  background: var(--inset);
  background-image: repeating-linear-gradient(90deg,
    transparent 0, transparent 36px,
    rgba(255, 255, 255, .07) 36px, rgba(255, 255, 255, .07) 37px);
}
.rv-bay__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent-hi);
}
.rv-bay__gocode {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  background: var(--accent);
  transform: rotate(45deg);
}
.rv-bay__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px 14px;
}
.rv-bay__status {
  min-height: 1.2em;
  font: 600 11px var(--mono);
  letter-spacing: .1em;
  color: var(--hold);
}
.rv-bay__meta {
  font: 400 10px var(--mono);
  letter-spacing: .08em;
  color: var(--text-low);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   INTEL — redacted until hover/focus/tap
   -------------------------------------------------------------------------- */
.rv-intel {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.intel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px 18px;
  transition: border-color var(--t-snap);
}
.intel:hover { border-color: var(--blueprint); }
.intel__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font: 600 9.5px var(--mono);
  letter-spacing: .14em;
  color: var(--text-mid);
  margin-bottom: 10px;
}
.intel__hint { color: var(--text-low); }
.intel__body { font: 400 14px/1.6 var(--sans); color: var(--text-mid); }
.intel__body b { color: var(--text-hi); font-weight: 600; }
.redact { position: relative; white-space: nowrap; }
.redact::after {
  content: '';
  position: absolute;
  inset: -1px -3px;
  background: var(--line-mid);
  border-radius: 2px;
  transition: opacity var(--t-snap);
}
.intel:hover .redact::after,
.intel:focus-within .redact::after,
.intel.is-open .redact::after { opacity: 0; }

/* --------------------------------------------------------------------------
   DIRECTOR MINI
   -------------------------------------------------------------------------- */
.rv-director {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  background: rgba(12, 15, 20, .92);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
}
.rv-director__label {
  font: 600 9.5px var(--mono);
  letter-spacing: .18em;
  color: var(--text-low);
}
.rv-director__units { display: flex; flex-wrap: wrap; gap: 8px; }
.runit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  padding: 7px 11px;
  font: 500 10.5px var(--mono);
  letter-spacing: .06em;
  color: var(--text-mid);
  white-space: nowrap;
}
.runit b { font-weight: 700; letter-spacing: .1em; }
.runit .dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; }

/* pre-boot: everything dark */
.runit b::after { content: ''; }
html:not(.online) .runit b { color: var(--text-low); }
html:not(.online) .runit .dot { border: 1.5px solid var(--line-mid); }

/* online: GO units pulse, HOLD units ring amber */
html.online .runit[data-unit^='go'] { border-color: rgba(255, 90, 110, .4); background: rgba(226, 58, 80, .1); color: var(--text-hi); }
html.online .runit[data-unit^='go'] b { color: var(--accent-hi); }
html.online .runit[data-unit^='go'] .dot { background: var(--accent-hi); }
html.online .runit[data-unit^='go'] .dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-hi);
  animation: kfPulse var(--fx-pulse) ease-out infinite;
}
html.online .runit[data-unit='go2'] .dot::after { animation-delay: .5s; }
html.online .runit[data-unit='hold'] b { color: var(--hold); }
html.online .runit[data-unit='hold'] .dot { border: 1.5px solid var(--hold); }
.rv-director__clock {
  margin-left: auto;
  font: 700 13px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-hi);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   FOOTER + BOOT LOG
   -------------------------------------------------------------------------- */
.rv-foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(30px, 6vh, 56px) 24px calc(28px + 6.5em);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.rv-foot__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font: 500 10.5px var(--mono);
  letter-spacing: .14em;
}
.rv-foot__at { color: var(--text-low); }
.rv-foot__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.rv-replay {
  font: 600 10.5px var(--mono);
  letter-spacing: .12em;
  color: var(--text-mid);
  background: transparent;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color var(--t-snap), color var(--t-snap);
}
.rv-replay:hover { border-color: var(--text-mid); color: var(--text-hi); }
.rv-lab-link {
  font: 600 10.5px var(--mono);
  letter-spacing: .12em;
  color: var(--accent-hi);
  border: 1px solid rgba(226, 58, 80, .4);
  border-radius: 4px;
  padding: 9px 14px;
}
.rv-foot__legal { font: 400 10px var(--mono); color: var(--text-low); letter-spacing: .04em; }

.bootlog {
  position: fixed;
  left: 16px;
  bottom: 14px;
  z-index: 5;
  font: 500 9.5px/1.7 var(--mono);
  letter-spacing: .06em;
  color: var(--text-low);
  pointer-events: none;
  max-width: min(46ch, 72vw);
  white-space: pre-wrap;
  mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}
.bootlog .ok   { color: var(--go); }
.bootlog .warn { color: var(--hold); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .rv-top { padding-top: 14px; gap: 8px; }
  .rv-top__creed { display: none; }
  .dev-chip { letter-spacing: .08em; padding: 5px 8px; }

  /* Brand + three chips will not fit a 375px header. The note glyph alone
     still reads as an audio control, and the accessible name on the button
     carries the full meaning for anyone who cannot see it. */
  .aud-chip__txt { display: none; }
  .aud-chip { padding: 5px 8px; }
  .rv-bay__screen { aspect-ratio: 16 / 9; }
  .rv-director__clock { margin-left: 0; width: 100%; }
  .rv-foot { padding-bottom: 28px; }
  .cd-cell i { letter-spacing: .2em; }

  /* On a phone the fixed HUD log would sit on top of the content. Let it
     play its part during the boot, then bow out. */
  .bootlog { transition: opacity .8s linear 1.2s; }
  html.online .bootlog { opacity: 0; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — kills the boot flicker and every ambient loop.
   The countdown keeps ticking: it is the information, not the decoration.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.arming .pz,
  html.arming.booting .pz { opacity: 1; animation: none; }

  html.online .cursor,
  html.online .cd-sep,
  html.online .rv-count__sweep,
  html.online .rv-bay__noise,
  html.online .rv-bay__tear,
  html.online .phase.is-live .phase__dot::after,
  html.online .runit .dot::after { animation: none; }

  .cursor, .cd-sep { opacity: 1; }
  /* No strike for reduced-motion users — the line is simply already on. */
  .rv-title em { text-shadow: 0 0 26px rgba(226, 58, 80, .28); }
  .rv-count__sweep { transform: scaleX(1); }
  .rv-bay__tear { top: 40%; }
}

@media print {
  .grid-bg, .vignette, .bootlog, .rv-bay__noise, .rv-count__sweep { display: none; }
  body { background: #fff; color: #000; }
  .pz { opacity: 1 !important; animation: none !important; }
}