@font-face {
  font-family: "Playfair Display";
  src: url("public/fonts/playfair-display.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("public/fonts/playfair-display-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: Outfit;
  src: url("public/fonts/outfit.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("public/fonts/jetbrains-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #14110f;
  --bg-elevated: #1c1714;
  --surface: #251e19;
  --surface-hover: #2e2520;
  --surface-strong: #362b25;
  --card: #54453a;
  --card-strong: #6e5b49;
  --cream: #f5edd8;
  --cream-dk: #eaddc4;
  --text-secondary: #cbb9a6;
  --sun: #f4d048;
  --sun2: #eccc30;
  --lancia: #a02018;
  --lancia2: #b82c20;
  --flag-green: #009246;
  --flag-white: #f5efe6;
  --flag-red: #ce2b37;
  --terracotta: #6b3e2d;
  --terracotta-lt: #b47850;
  --ink: #1f1610;
  --ok: #2563eb;
  --ok-text: #60a5fa;
  --muted: #9b8574;
  --line: rgba(245, 237, 216, 0.1);
  --line-strong: rgba(245, 237, 216, 0.16);
  --card-line: rgba(245, 237, 216, 0.32);
  --scenario: #f4d048;
  --scenario-rgb: 244, 208, 72;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: Outfit, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
/* The body font belongs on the root, not only on body: anything that ends up
   outside that inheritance chain otherwise renders in the browser's default
   serif, which is a typeface nobody here chose. */
html { scroll-behavior: smooth; font-family: var(--font-body); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(520px 520px at 88% 11%, rgba(244, 208, 72, 0.1), transparent 70%),
    linear-gradient(180deg, #1e1610 0%, var(--bg) 16%, #0e0c0a 100%);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.5;
}
button, a { font: inherit; touch-action: manipulation; }
button { color: inherit; }
h1, h2, h3, p { text-wrap: pretty; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.ambient-glow {
  position: fixed;
  z-index: -2;
  top: -280px;
  right: -210px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--scenario-rgb), 0.2), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
  transition: background 900ms ease, transform 1.2s var(--ease-out);
}
body[data-phase="onair"] .ambient-glow { transform: scale(1.22) translate(-4%, 4%); }
body[data-phase="revealed"] .ambient-glow { transform: scale(1.38) translate(-6%, 6%); }
.noise {
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.flag-line { display: flex; width: 140px; height: 3px; overflow: hidden; border-radius: 2px; }
.flag-line i { flex: 1; }
.flag-line i:nth-child(1) { background: var(--flag-green); }
.flag-line i:nth-child(2) { background: var(--flag-white); }
.flag-line i:nth-child(3) { background: var(--flag-red); }
.site-header {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 32px 0;
  animation: wake-fade 700ms var(--ease-out) 60ms both;
}
.site-header > .flag-line { margin-bottom: 13px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cream); text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 7px; }
.brand span { font-family: var(--font-display); font-size: 20px; font-style: italic; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.brand em, footer em { color: var(--sun); }
.concept-label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.concept-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px rgba(244, 208, 72, 0.65); }

.hero {
  display: grid;
  grid-template-columns: minmax(360px, 0.84fr) minmax(640px, 1.45fr);
  gap: clamp(42px, 4.5vw, 72px);
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(34px, 4vw, 54px) 32px 88px;
}
.hero-copy { position: relative; z-index: 2; padding-top: 18px; animation: wake 700ms var(--ease-out) 100ms both; }
.eyebrow { margin: 0 0 16px; color: var(--sun2); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
h1 { max-width: 660px; margin: 0; font-family: var(--font-display); font-size: clamp(44px, 4.6vw, 66px); font-style: italic; font-weight: 700; line-height: 1.01; letter-spacing: -0.025em; }
h1 span { display: block; margin-top: 0.1em; color: var(--cream-dk); }
.hero-intro { max-width: 560px; margin: 22px 0 0; color: var(--cream-dk); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.primary-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 60px;
  padding: 0 27px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--sun2);
  color: var(--ink);
  box-shadow: 0 6px 26px rgba(236, 204, 48, 0.45), 0 0 0 6px rgba(236, 204, 48, 0.1);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform 180ms ease, box-shadow 300ms ease, background 180ms ease;
}
/* The one thing the page wants you to do, so at idle it asks out loud. The
   pulse stops the moment the show starts — a playing station does not need
   to sell the button that started it. */
body[data-phase="idle"] .primary-button { animation: cta-beckon 2.4s ease-in-out infinite, cta-breath 2.4s ease-in-out infinite; }
body[data-phase="idle"] .primary-button::before { animation: cta-shine-idle 3.6s ease-in-out infinite; }
/* Post-reveal the two calls to action share the gold, and a spotlight
   passes between them: left breathes up while right rests, then they swap.
   Hover pauses the sweep so the button under the cursor holds still. */
body[data-phase="revealed"] .primary-button:not([hidden]) { animation: cta-spotlight 4.8s ease-in-out 600ms infinite; }
body[data-phase="revealed"] .primary-button:not([hidden]):hover, body[data-phase="revealed"] .install-cta:not([hidden]):hover { animation-play-state: paused; }
.hero-actions { flex-wrap: wrap; }
.primary-button span, .install-cta span, .text-button { white-space: nowrap; }
.primary-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.5) 48%, transparent 72%); transform: translateX(-120%); }
.primary-button:hover::before { animation: button-shine 720ms ease; }
.primary-button:hover { transform: translateY(-2px); background: var(--sun); box-shadow: 0 8px 30px rgba(236, 204, 48, 0.45), 0 0 0 6px rgba(236, 204, 48, 0.1); }
.primary-button:active { transform: translateY(1px) scale(.98); }
.primary-button:disabled { cursor: wait; opacity: .82; }
.primary-button span, .primary-button b { position: relative; z-index: 1; }
.primary-button b { font-size: 18px; }
.text-button { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: color 180ms ease; }
.text-button:hover { color: var(--cream); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.journey { display: flex; gap: 25px; margin: 28px 0 0; padding: 0; list-style: none; }
.journey li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: center; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: color 300ms ease, transform 300ms var(--ease-out); }
.journey li:not(:last-child)::after { content: ""; position: absolute; left: calc(100% + 8px); width: 9px; height: 1px; background: #51483f; }
.journey b { font-family: var(--font-mono); font-size: 9px; }
.journey li.is-current, .journey li.is-complete { color: var(--cream); }
.journey li.is-current { transform: translateY(-2px); }
.journey li.is-current b { color: var(--sun); }

.experience-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(245,237,216,.05), 0 28px 70px rgba(0,0,0,.46), 0 0 70px rgba(244,208,72,.055);
  animation: wake 700ms var(--ease-out) 180ms both;
  transition: border-color 600ms ease, box-shadow 600ms ease;
}
.experience-card::after { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(112deg, transparent 25%, rgba(244,208,72,.2) 48%, transparent 70%); transform: translateX(-100%); }
body[data-phase="onair"] .experience-card { border-color: rgba(var(--scenario-rgb), .6); box-shadow: inset 0 1px 0 rgba(245,237,216,.07), 0 32px 80px rgba(0,0,0,.5), 0 0 80px rgba(var(--scenario-rgb),.15); }

.experience-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 46px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg-elevated); color: var(--text-secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.experience-topline > span { display: inline-flex; align-items: center; gap: 8px; }
/* Station gold, not connected-blue: a blue OK dot two words from
   "no live data" claimed a connection the page does not have. */
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px rgba(244,208,72,.65); }
/* The stage leads with the show. The on-air panel comes first in DOM and in
   width; the sensor panel is the reveal, dimmed until the moment has aired.
   The old order (sensors -> gate -> meaning) was a pipeline diagram. */
.translation-stage { display: grid; grid-template-columns: minmax(300px, 1.14fr) 104px minmax(240px, .86fr); min-height: 480px; }
.sensor-panel, .onair-panel { min-width: 0; padding: 24px 22px; }
.sensor-panel { background: var(--bg-elevated); }
.onair-panel { position: relative; overflow: hidden; background: var(--surface); }
.onair-panel::before { content: ""; position: absolute; inset: 0; opacity: .35; background: radial-gradient(420px 290px at 50% 52%, rgba(var(--scenario-rgb),.12), transparent 72%); transition: opacity 700ms ease, transform 900ms var(--ease-out); pointer-events: none; }
body[data-phase="onair"] .onair-panel::before { opacity: .75; transform: scale(1.16); }
body[data-phase="revealed"] .onair-panel::before { opacity: 1; transform: scale(1.28); }
.panel-heading { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; margin-bottom: 23px; }
.panel-heading p { margin: 0 0 1px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.panel-heading h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-style: italic; font-weight: 600; }

.sensor-list { display: grid; gap: 8px; }
.sensor-row { position: relative; display: grid; grid-template-columns: 25px minmax(0,1fr); grid-template-areas: "icon name" "icon value"; column-gap: 9px; align-items: center; min-height: 55px; padding: 9px 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); transition: transform 420ms var(--ease-out), border-color 300ms ease, background 300ms ease; }
.sensor-icon { grid-area: icon; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; background: var(--surface-strong); color: var(--muted); font-size: 12px; transition: color 250ms ease, background 250ms ease, transform 350ms var(--ease-out); }
/* Entity ids are content, not eyebrow labels: the design system's JetBrains
   Mono floor is 11px (docs/design/system.md, Typography scale). */
.sensor-name { grid-area: name; min-width: 0; overflow: hidden; color: var(--muted); font-family: var(--font-mono); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sensor-value { grid-area: value; color: var(--cream-dk); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
/* The sensors are the answer, and the answer stays face-down until the moment
   has aired. Blurred, not hidden: the panel reads as "something is here",
   which is a promise, without being readable, which would be a spoiler. */
/* The answer sits face-down the whole time: present as shapes, unreadable as
   content. An empty panel reads as a bug; a covered one reads as a promise. */
.sensor-panel { position: relative; }
.sensor-panel .meaning-content, .sensor-panel .sensor-list, .sensor-panel .sensor-footnote { opacity: .3; transform: translateY(10px); filter: blur(5px) saturate(.6); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); pointer-events: none; user-select: none; }
/* The theater: at idle the shelf is nearly bare. While the show plays, the
   reveal assembles itself behind the frost — rows slide in one by one, the
   headline block arrives late — so the frost reads as "the hosts are cooking
   something", not as a stuck screen. Every animation ends exactly on the
   base ghost values, so dropping the animations at the reveal hands over to
   the sharpen transition without a jump. */
body[data-phase="idle"] .sensor-panel .meaning-content, body[data-phase="idle"] .sensor-panel .sensor-list, body[data-phase="idle"] .sensor-panel .sensor-footnote { opacity: .08; transform: translateY(26px); }
body[data-phase="onair"] .sensor-panel .sensor-row { opacity: 0; animation: assemble-row 900ms var(--ease-out) both; }
body[data-phase="onair"] .sensor-panel .sensor-row:nth-child(1) { animation-delay: 1.8s; }
body[data-phase="onair"] .sensor-panel .sensor-row:nth-child(2) { animation-delay: 4.2s; }
body[data-phase="onair"] .sensor-panel .sensor-row:nth-child(3) { animation-delay: 6.6s; }
body[data-phase="onair"] .sensor-panel .sensor-row:nth-child(4) { animation-delay: 9s; }
body[data-phase="onair"] .sensor-panel .sensor-row:nth-child(5) { animation-delay: 11.4s; }
body[data-phase="onair"] .sensor-panel .meaning-content { animation: assemble-block 1100ms var(--ease-out) 12.6s both; }
body[data-phase="onair"] .sensor-panel .sensor-footnote { animation: assemble-block 900ms var(--ease-out) 14.3s both; }
body[data-phase="revealed"] .sensor-panel .sensor-row, body[data-phase="revealed"] .sensor-panel .meaning-content, body[data-phase="revealed"] .sensor-panel .sensor-footnote { animation: none; }
.reveal-waiting { position: absolute; z-index: 3; inset: 96px 22px 20px; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; opacity: 1; transition: opacity 450ms ease, visibility 0s linear; }
.reveal-waiting i { width: 7px; height: 7px; margin-bottom: 6px; border-radius: 50%; background: var(--scenario); box-shadow: 0 0 12px rgba(var(--scenario-rgb),.7); animation: live-pulse 1.8s ease-in-out infinite; }
.reveal-waiting p { margin: 0; color: var(--cream-dk); font-family: var(--font-display); font-size: 19px; font-style: italic; font-weight: 600; transition: opacity 260ms ease; }
.reveal-waiting span { color: var(--muted); font-size: 11px; }
body[data-phase="revealed"] .reveal-waiting { visibility: hidden; opacity: 0; }
.sensor-panel .sensor-list { transition-delay: 140ms; }
.sensor-panel .sensor-footnote { transition-delay: 280ms; }
body[data-phase="revealed"] .sensor-panel .meaning-content, body[data-phase="revealed"] .sensor-panel .sensor-list, body[data-phase="revealed"] .sensor-panel .sensor-footnote { opacity: 1; transform: translateY(0); filter: blur(0); pointer-events: auto; }
body[data-phase="revealed"] .sensor-row { border-color: rgba(var(--scenario-rgb),.48); background: var(--surface-hover); }
body[data-phase="revealed"] .sensor-icon { color: var(--scenario); background: rgba(var(--scenario-rgb), .14); }
.sensor-footnote { margin: 16px 2px 0; color: var(--muted); font-family: var(--font-display); font-size: 13px; font-style: italic; }
/* Present in layout from the start (visibility, not display) so its arrival
   never reflows the row — the reveal fades it in where it always was. */
.install-cta { position: relative; z-index: 2; display: inline-flex; visibility: hidden; align-items: center; justify-content: center; gap: 14px; min-height: 60px; padding: 0 27px; overflow: hidden; border-radius: 10px; background: var(--sun2); color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: .01em; text-decoration: none; box-shadow: 0 6px 26px rgba(236, 204, 48, 0.45), 0 0 0 6px rgba(236, 204, 48, 0.1); opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 600ms var(--ease-out), background 180ms ease, box-shadow 300ms ease, visibility 0s linear 500ms; }
.install-cta[hidden] { display: none; }
/* An author display beats the UA's [hidden] rule: without this, the retired
   hero button kept rendering after the fourth moment. The E2E caught it. */
.primary-button[hidden] { display: none; }
.install-cta b { font-size: 18px; }
.install-cta:hover { background: var(--sun); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(236, 204, 48, 0.55), 0 0 0 7px rgba(236, 204, 48, 0.14); }
.install-cta:active { transform: translateY(1px) scale(.98); }
body[data-phase="revealed"] .install-cta:not([hidden]) { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; animation: cta-spotlight 4.8s ease-in-out 3s infinite; }
body[data-audio="failed"] .install-cta { animation: none; }

/* The gate used to sweep signal lines left to right from the sensors into
   the meaning panel — a machine diagram of the framing this page no longer
   makes. It is now the on-air spine: the station light on top, a vertical
   transport underneath showing how far into the segment you are. Playback
   position flows DOWN toward the reveal; nothing flows from sensors to
   meaning anymore. */
.translation-gate { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; overflow: hidden; border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--surface); }
.gate-orbit { position: relative; z-index: 2; display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(var(--scenario-rgb),.4); border-radius: 50%; background: var(--bg-elevated); box-shadow: 0 0 0 8px rgba(var(--scenario-rgb),.04), 0 0 26px rgba(var(--scenario-rgb),.1); transition: transform 600ms var(--ease-out), box-shadow 500ms ease, border-color 500ms ease; }
.gate-orbit::before, .gate-orbit::after { content: ""; position: absolute; border: 1px solid rgba(var(--scenario-rgb),.2); border-radius: 50%; opacity: .55; }
.gate-orbit::before { inset: -8px; }
.gate-orbit::after { inset: -15px; opacity: .25; }
.gate-orbit img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,.35)); animation: radio-breathe 2.6s ease-in-out infinite; }
.translation-gate p { position: relative; z-index: 2; width: 68px; margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-align: center; text-transform: uppercase; transition: color 250ms ease; }
.transport-track { position: relative; z-index: 2; width: 3px; height: 118px; overflow: hidden; border-radius: 999px; background: rgba(245,237,216,.12); }
.transport-progress { position: absolute; top: 0; left: 0; width: 100%; height: var(--progress, 0%); border-radius: 999px; background: linear-gradient(180deg, var(--scenario), rgba(var(--scenario-rgb),.55)); box-shadow: 0 0 9px rgba(var(--scenario-rgb),.6); transition: height 300ms linear; }
body[data-phase="onair"] .gate-orbit { transform: scale(1.17); border-color: rgba(var(--scenario-rgb),.9); box-shadow: 0 0 0 12px rgba(var(--scenario-rgb),.1), 0 0 40px rgba(var(--scenario-rgb),.36); }
body[data-phase="onair"] .gate-orbit::before { animation: orbit-pulse 1s ease-out infinite; }
body[data-phase="onair"] .gate-orbit img { animation: radio-pulse 820ms ease-in-out infinite; }
body[data-phase="onair"] .translation-gate p, body[data-phase="revealed"] .translation-gate p { color: var(--scenario); }
body[data-audio="loading"] .transport-track { animation: transport-wait 1.2s ease-in-out infinite; }
body[data-audio="failed"] .gate-orbit { border-color: rgba(184,44,32,.75); box-shadow: 0 0 0 8px rgba(184,44,32,.08); }
body[data-audio="failed"] .gate-orbit img, body[data-audio="failed"] .transport-progress { animation: none; }
body[data-audio="failed"] .translation-gate p { color: var(--lancia2); }

.onair-idle { position: absolute; z-index: 1; inset: 96px 22px 20px; display: grid; place-items: center; visibility: visible; opacity: 1; text-align: center; transition: opacity 420ms ease, transform 600ms var(--ease-out), filter 450ms ease, visibility 0s linear; }
.idle-preview { display: grid; justify-items: center; width: 100%; max-width: 310px; }
.idle-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--sun); font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.idle-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--lancia2); box-shadow: 0 0 9px rgba(184,44,32,.8); animation: live-pulse 1.4s ease-in-out infinite; }
.waveform { display: flex; align-items: flex-end; justify-content: center; }
.waveform-bar { flex: 0 0 auto; border-radius: 999px; background: var(--scenario); transform-origin: bottom; animation: waveform-pulse var(--d, .8s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
.hero-wave { width: 100%; height: 64px; gap: 5px; margin: 17px 0 14px; }
.hero-wave .waveform-bar { width: 4px; opacity: .44; }
.teaser-stack { position: relative; width: 100%; height: 74px; overflow: hidden; }
.teaser-stack p { position: absolute; inset: 0; display: grid; align-content: center; gap: 4px; margin: 0; opacity: 0; transform: translateY(18px); animation: teaser-cycle 9s var(--ease-out) infinite; }
.teaser-stack p:nth-child(2) { animation-delay: 3s; }
.teaser-stack p:nth-child(3) { animation-delay: 6s; }
.teaser-stack span { color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.teaser-stack strong { color: var(--cream); font-family: var(--font-display); font-size: 22px; font-style: italic; font-weight: 600; line-height: 1.15; }
.idle-prompt { max-width: 245px; margin: 7px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
/* The one place the page makes a claim about itself that is not a disclaimer:
   the scenario is invented, the voices are the real product. It sits on the same
   screen as the privacy note, at the same size and colour, so without the
   emphasis a reader takes it for a fourth disclaimer and skips it. The stressed
   clause is the only positive claim the page makes about itself. */
.voice-note { margin: 10px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.voice-note strong { color: var(--cream-dk); font-weight: 600; }
body[data-phase="onair"] .hero-wave .waveform-bar { box-shadow: 0 0 12px rgba(var(--scenario-rgb),.75); }
/* The idle preview yields to the on-air card the moment the show starts. */
body[data-phase="onair"] .onair-idle, body[data-phase="revealed"] .onair-idle { visibility: hidden; opacity: 0; transform: translateY(-24px) scale(.96); pointer-events: none; }
.onair-panel .on-air-card { position: relative; z-index: 2; visibility: hidden; opacity: 0; transform: translateY(36px) scale(.96); pointer-events: none; transition: opacity 650ms ease, transform 800ms var(--ease-out), visibility 0s linear 650ms; }
body[data-phase="onair"] .onair-panel .on-air-card, body[data-phase="revealed"] .onair-panel .on-air-card { visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; transition-delay: 120ms; }
.meaning-content { position: relative; z-index: 2; }
.moment-tag { display: inline-flex; align-items: center; min-height: 27px; padding: 0 10px; border: 1px solid rgba(var(--scenario-rgb),.42); border-radius: 999px; background: rgba(var(--scenario-rgb),.1); color: var(--scenario); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.meaning-content h3 { margin: 14px 0 9px; font-family: var(--font-display); font-size: clamp(27px, 2.35vw, 38px); font-style: italic; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.meaning-content > p { margin: 0; color: var(--cream-dk); font-size: 12px; line-height: 1.55; }
.on-air-card { margin-top: 19px; padding: 17px; border: 1px solid rgba(var(--scenario-rgb),.34); border-radius: 12px; background: var(--surface-hover); box-shadow: inset 0 1px 0 rgba(245,237,216,.05), 0 10px 26px rgba(0,0,0,.22); }
body[data-phase="onair"] .on-air-card { animation: on-air-rise 760ms var(--ease-out) 300ms both; }
/* Aired-truth, rendered: a failed clip must not wear the on-air treatment.
   The red is paired with the label text and the ▶ affordance, never alone. */
body[data-audio="failed"] .on-air-card { border-color: rgba(184,44,32,.5); }
body[data-audio="failed"] .live-pill i { animation: none; background: var(--lancia2); box-shadow: none; }
.audio-trouble { margin: 14px 0 4px; padding: 12px 14px; border-left: 2px solid var(--lancia2); background: var(--bg-elevated); border-radius: 0 8px 8px 0; }
.trouble-line { margin: 0 0 7px; color: var(--cream-dk); font-size: 11px; line-height: 1.5; }
.trouble-transcript { margin: 0; color: var(--cream); font-family: var(--font-display); font-size: 15px; font-style: italic; line-height: 1.45; }
.on-air-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.on-air-meta strong { color: var(--text-secondary); font-size: 10px; font-weight: 600; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--cream); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--lancia2); box-shadow: 0 0 9px rgba(184,44,32,.8); animation: live-pulse 1.4s ease-in-out infinite; }
blockquote { margin: 14px 0 15px; color: var(--cream); font-family: var(--font-display); font-size: clamp(16px, 1.25vw, 20px); font-style: italic; font-weight: 500; line-height: 1.4; }
.radio-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.strip-wave { justify-content: flex-start; min-width: 78px; height: 24px; gap: 3px; }
.strip-wave .waveform-bar { width: 3px; opacity: .48; }
.listen-button { min-height: 44px; padding: 0 13px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--surface-strong); color: var(--cream-dk); cursor: pointer; font-size: 10px; font-weight: 700; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.listen-button:hover { transform: translateY(-1px); border-color: rgba(var(--scenario-rgb),.6); background: rgba(var(--scenario-rgb),.12); }
.listen-button:active { transform: translateY(1px) scale(.98); }
.listen-button.is-speaking { color: var(--scenario); border-color: rgba(var(--scenario-rgb),.62); }
/* Once the moment has resolved, hearing it IS the page. Everything above this
   point is setup for four made-up scenarios; the voice is the only part that is
   the actual product, and at 10px on a dark surface it read as an afterthought
   next to the glowing 18px button that just cycles to another invented example.
   Promoted only in the revealed phase, so the idle card stays calm. */
body[data-phase="revealed"] .listen-button {
  padding: 0 18px; background: var(--sun2, #ECCC30); border-color: transparent;
  color: #14110F; font-size: 12px; letter-spacing: .01em;
  box-shadow: 0 4px 18px rgba(236, 204, 48, 0.28);
}
body[data-phase="revealed"] .listen-button:hover {
  background: var(--sun, #F4D048); border-color: transparent;
  box-shadow: 0 6px 22px rgba(236, 204, 48, 0.42);
}
/* While it plays, hand the gold back: the button is now a Stop control, and a
   loud Stop competes with the thing the visitor came to hear. */
body[data-phase="revealed"] .listen-button.is-speaking {
  background: var(--surface-strong); color: var(--scenario);
  border-color: rgba(var(--scenario-rgb),.62); box-shadow: none;
}

.scenario-picker { padding: 16px 18px 18px; border-top: 1px solid var(--line); background: var(--bg-elevated); }
.scenario-picker > p { margin: 0 0 10px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.scenario-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.scenario-button { min-height: 50px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 10px; font-weight: 600; line-height: 1.25; text-align: left; transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.scenario-button span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 13px; }
.scenario-button:hover { transform: translateY(-1px); color: var(--cream); border-color: var(--card-line); }
.scenario-button:active { transform: translateY(0) scale(.98); }
.scenario-button.is-active { color: var(--cream); border-color: rgba(var(--scenario-rgb),.55); background: rgba(var(--scenario-rgb),.11); }
.scenario-button.is-active span { color: var(--scenario); }
/* The fresh-install ceiling after opt-in gets said out loud. */
.day-one-chip { display: inline-block; margin-left: 5px; padding: 1px 6px; border: 1px solid rgba(96,165,250,.45); border-radius: 999px; color: var(--ok-text); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }

.thesis { max-width: 1180px; margin: 0 auto; padding: 92px 32px 112px; border-top: 1px solid var(--line); animation: wake 700ms var(--ease-out) 240ms both; }
.thesis > h2 { max-width: 900px; margin: 0; font-family: var(--font-display); font-size: clamp(38px, 4.4vw, 62px); font-style: italic; font-weight: 700; line-height: 1.03; letter-spacing: -.025em; }
.thesis-flow { margin: 46px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.thesis-flow li { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.2fr); gap: 26px; align-items: center; min-height: 142px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.flow-copy h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 23px; font-style: italic; font-weight: 600; }
.flow-copy p { max-width: 360px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.flow-sample { margin: 0; }
.code-sample, .human-sample, .station-sample { min-height: 80px; padding: 15px 17px; border-left: 2px solid rgba(var(--scenario-rgb), .62); background: var(--bg-elevated); color: var(--muted); font-family: var(--font-mono); font-size: 11px; line-height: 1.8; }
.code-sample b { color: var(--cream-dk); font-weight: 500; }
.human-sample { color: var(--cream); font-family: var(--font-display); font-size: 18px; font-style: italic; line-height: 1.35; }
.station-sample { display: flex; align-items: center; gap: 18px; }
.station-sample p { max-width: 250px; margin: 0; color: var(--text-secondary); font-family: var(--font-body); font-size: 12px; line-height: 1.5; }
.mini-wave { display: flex; min-height: 50px; align-items: center; gap: 3px; }
.mini-wave i { width: 4px; height: 22px; border-radius: 2px; background: var(--sun); animation: mini-wave 800ms ease-in-out infinite alternate; }
.mini-wave i:nth-child(2n) { height: 34px; animation-delay: 110ms; }
.mini-wave i:nth-child(3n) { height: 16px; animation-delay: 230ms; }
.privacy-note { display: flex; gap: 15px; align-items: flex-start; margin-top: 18px; padding: 20px 22px; border: 1px solid rgba(96,165,250,.3); border-radius: 12px; background: var(--bg-elevated); }
.privacy-note > span { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 auto; border: 1px solid rgba(96,165,250,.42); border-radius: 50%; color: var(--ok-text); }
.privacy-note strong { font-family: var(--font-display); font-size: 16px; font-style: italic; }
.privacy-note p { margin: 3px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
footer { max-width: 1440px; margin: 0 auto; padding: 0 32px 34px; color: var(--muted); font-size: 10px; }
.aired-truth { max-width: 620px; margin: 0 0 14px !important; color: var(--text-secondary); font-family: var(--font-display); font-size: 13px; font-style: italic; line-height: 1.6; }
footer .flag-line { margin-bottom: 14px; }
footer .footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; }
footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream-dk); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: color 180ms ease, transform 180ms ease; }
footer .footer-links a::after { content: "↗"; margin-left: 6px; color: var(--sun); font-size: 12px; }
footer .footer-links a:hover { color: var(--cream); transform: translateY(-1px); }
footer p { margin: 0; }
.music-credit { margin: 0 0 8px !important; color: var(--muted); font-size: 10px; }
footer strong { color: var(--text-secondary); font-family: var(--font-display); font-size: 13px; font-style: italic; }

@keyframes wake { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wake-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes button-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes cta-beckon { 0%, 100% { box-shadow: 0 6px 26px rgba(236, 204, 48, 0.45), 0 0 0 6px rgba(236, 204, 48, 0.1); } 50% { box-shadow: 0 8px 34px rgba(236, 204, 48, 0.6), 0 0 0 11px rgba(236, 204, 48, 0.16); } }
@keyframes cta-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
/* Rest frames match the buttons' base shadow exactly, so the animation
   starting (or stopping) is invisible — only the peak is ever seen moving. */
@keyframes cta-spotlight {
  0%, 50%, 100% { background: var(--sun2); transform: translateY(0) scale(1); box-shadow: 0 6px 26px rgba(236, 204, 48, 0.45), 0 0 0 6px rgba(236, 204, 48, 0.1); }
  25% { background: var(--sun); transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 40px rgba(236, 204, 48, 0.65), 0 0 0 12px rgba(236, 204, 48, 0.18); }
}
@keyframes cta-shine-idle { 0%, 55%, 100% { transform: translateX(-120%); } 75% { transform: translateX(120%); } }
@keyframes orbit-pulse { from { transform: scale(.82); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes radio-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.035); } }
@keyframes transport-wait { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes assemble-row { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes assemble-block { from { opacity: 0; transform: translateY(24px); } to { opacity: .3; transform: translateY(10px); } }
@keyframes radio-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.13); filter: drop-shadow(0 0 16px rgba(var(--scenario-rgb),.7)); } }
@keyframes waveform-pulse { from { height: 5px; opacity: .34; } to { height: var(--h, 28px); opacity: .96; } }
@keyframes teaser-cycle { 0% { opacity: 0; transform: translateY(18px); } 8%, 27% { opacity: 1; transform: translateY(0); } 33%, 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes live-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .42; transform: scale(.82); } }
@keyframes on-air-rise { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mini-wave { from { transform: scaleY(.34); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; padding-top: 52px; }
  .hero-copy { max-width: 800px; padding-top: 0; }
  .experience-card { max-width: 940px; }
}
@media (max-width: 760px) {
  .site-header { padding: 12px 20px 0; }
  .concept-label { max-width: 122px; font-size: 9px; text-align: right; }
  .hero { padding: 42px 20px 68px; gap: 34px; }
  h1 { font-size: clamp(42px, 12.5vw, 60px); }
  .hero-intro { font-size: 15px; }
  .journey { gap: 19px; }
  .journey li { grid-template-columns: 1fr; gap: 2px; }
  .translation-stage { grid-template-columns: 1fr; }
  .translation-gate { min-height: 126px; flex-direction: row; border-right: 0; border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .translation-gate p { width: auto; }
  .gate-orbit { width: 58px; height: 58px; }
  .gate-orbit img { width: 45px; height: 45px; }
  .transport-track { width: 118px; height: 3px; }
  .transport-progress { width: var(--progress, 0%); height: 100%; background: linear-gradient(90deg, var(--scenario), rgba(var(--scenario-rgb),.55)); transition: width 300ms linear; }
  .onair-panel { min-height: 500px; }
  .scenario-buttons { grid-template-columns: repeat(2, 1fr); }
  .thesis { padding: 74px 20px 90px; }
  .thesis-flow li { grid-template-columns: 1fr; gap: 13px; padding: 25px 0; }
  .flow-sample { width: 100%; }
  footer { padding: 0 20px 28px; }
  footer .footer-links { align-items: flex-start; flex-direction: column; gap: 2px; }
}
@media (max-width: 440px) {
  .brand span { font-size: 17px; }
  .brand img { width: 30px; height: 30px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .primary-button { width: 100%; }
  .journey span { font-size: 9px; }
  .experience-topline { padding: 12px 14px; }
  .sensor-panel, .onair-panel { padding: 22px 17px; }
  .onair-panel { min-height: 515px; }
  .onair-idle { inset: 92px 17px 20px; }
  .scenario-picker { padding: 15px; }
  .radio-controls { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  /* Delays must collapse too: the assemble-* choreography uses `both` fill
     with delays up to 14.3s, so leaving animation-delay alone made a
     reduced-motion visitor watch an empty panel populate in real time. */
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .teaser-stack p { animation: none !important; opacity: 0; transform: none; }
  .teaser-stack p:first-child { opacity: 1; }
  .waveform-bar { animation: none !important; height: var(--h, 22px); opacity: .72; }
}