:root {
  /* Canonical LogNormal palette — cinematic landing is the source of truth. */
  --void: #020304;
  --black: #000000;
  --charcoal: #07090c;
  --logo-white: #e8e6df;
  --logo-bright: #fffaf0;
  --calibration-cyan: #7df9ff;
  --corrected-mint: #9fffd0;
  --error-red: #ff5b68;

  /* Proof-state signal colours. Mint (--corrected-mint) is the single positive/
     corrective colour: pass = mint, repaired = brighter mint, invalid = red.
     --signal-green is retired from the cinematic (kept only for legacy call sites). */
  --signal-green: #35d07a;
  --mode-articulate: #ffc83d; /* canonical iOS articulate gold */
  --mode-apply: #a56bf2; /* canonical iOS apply violet */

  /* Deprecated aliases — remove after call sites migrate. */
  --math-white: var(--logo-white);
  --math-white-bright: var(--logo-bright);
  --cyan: var(--calibration-cyan);
  --corrected: var(--corrected-mint);
  --green: var(--corrected-mint);
  --error: var(--error-red);
  --red: var(--error-red);

  /* Hero reading-hierarchy tokens — cream brightness tiers + calibration cyan / mint. */
  --hero-primary: rgba(255, 250, 240, 0.96);
  --hero-secondary: rgba(232, 230, 223, 0.72);
  --hero-tertiary: rgba(180, 178, 172, 0.52);
  --hero-ghost: rgba(180, 178, 172, 0.08);
  --hero-cyan: #7df9ff;
  --hero-mint: #9fffd0;

  --deep-charcoal: #0b0d10;
  --bg: var(--void);
  --ink: var(--logo-white);
  --muted: rgba(232, 230, 223, 0.58);
  --faint: rgba(232, 230, 223, 0.18);
  --frame: clamp(14px, 2.1vw, 30px);
  --scene-progress: 0;
  --math-opacity: 1;
  --math-blur: 0px;
  --math-scale: 1;
  --math-user-scale: 1;
  --math-instrument-touch-scale: 1;
  --headline-opacity: 0;
  --headline-scale: 1;
  --path-opacity: 0;
  --terrain-opacity: 0;
  --world-opacity: 0;
  --body-copy-opacity: 0;
  --copy-opacity: 0;
  --brand-opacity: 0;
  --nav-opacity: 0;
  --travel-opacity: 0;
  --phrase-opacity: 0;
  --hero-progress: 0%;
  --hero-chrome-x: 72px;
  --hero-strip-height: 76px;
  --hero-sound-left: 40px;
  --math-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --downstream-rush: 0;
  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  color: #020304;
  background: #7df9ff;
  font: 600 14px/1.2 system-ui, sans-serif;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

html,
body {
  width: 100%;
  margin: 0;
  background: var(--black);
  color: var(--math-white);
  overscroll-behavior: none;
}

/* Reserve scrollbar width during scroll-lock so unlocking after the droplet
   finale does not shove the whole scene sideways. */
html.landing-root {
  scrollbar-gutter: stable;
}

body {
  /* Native vertical scroll drives the hero scrub and the product journey below
     it. Horizontal stays clipped so decorative gradients never overflow. */
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* While the loader runs and the opening proof plays, the page is pinned so the
   cinematic is seen before any scrubbing. script.js releases .scroll-locked once
   the finale resolves. A panel open over the journey locks the background too.
   The lock lives on the actual scroller (the root element). */
body.scroll-locked,
body.panel-open {
  overflow: hidden;
}

html:has(> body.scroll-locked),
html:has(> body.panel-open) {
  overflow: hidden;
}

body.landing-home.is-loading .hero-chrome,
body.landing-home.is-loading .site-header,
body.landing-home.is-loading .scene-shell {
  opacity: 0;
  pointer-events: none;
}

/* The footer shares the normal-flow product layer. Keeping it paintable before
   the product handoff let WebKit composite tiny stale brand/legal fragments at
   the top-left of the black cinematic on first load. */
body.landing-home:not(.brief-active) .site-footer {
  display: none !important;
}

/* Crawler / no-JS primer — always in the HTML source; clipped once JS enhances. */
.page-primer {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 1rem;
  color: rgba(232, 230, 223, 0.88);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* This content exists for source discovery only. It must never enter the first
   paint: waiting for the runtime `.js` class left stale text tiles on iOS. */
.page-primer[hidden] {
  display: none !important;
}

.page-primer h1 {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.page-primer h2 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(232, 230, 223, 0.72);
}

.page-primer p {
  margin: 0 0 0.75rem;
}

.page-primer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
}

.page-primer a {
  color: var(--calibration-cyan);
  text-decoration: none;
}

.page-primer a:hover {
  text-decoration: underline;
}

.page-primer-noscript {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  color: rgba(232, 230, 223, 0.88);
  line-height: 1.5;
}

.js .page-primer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.js .page-primer-noscript {
  display: none;
}

body.landing-home.loader-complete .scene-shell,
body.landing-home.loader-complete .site-header {
  opacity: 1;
  transition: opacity 1s ease 0.12s;
}

body.landing-home.loader-complete:not(.lake-live) .hero-chrome {
  opacity: 1;
  pointer-events: none;
  transition: none;
}

body.landing-home.loader-complete:not(.lake-live) .hero-brand,
body.landing-home.loader-complete:not(.lake-live) .hero-nav,
body.landing-home.loader-complete:not(.lake-live) .hero-frame {
  opacity: 0;
  visibility: hidden;
}

/* Sound and visuals are one opening-cinematic contract. Once the scan path is
   active, no delayed 3D/brief class or cached handoff state may hide the proof.
   Specificity intentionally beats the folded-brief visibility rules. */
body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .scene-shell,
body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .math-instrument,
body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .math-stack {
  opacity: 1 !important;
  visibility: visible !important;
}

body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .scene-shell {
  overflow: visible;
}

body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .math-instrument {
  display: flex !important;
  filter: none !important;
}

/* —— Brand loader (Hubtown-inspired intro) —— */

.brand-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--void);
  color: var(--logo-white);
  opacity: 1;
  visibility: visible;
  isolation: isolate;
  transform: translateZ(0);
  transition: opacity 0.72s cubic-bezier(0.2, 0, 0, 1), visibility 0.72s;
}

.brand-loader.is-exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.brand-loader.is-exiting-product {
  transition:
    opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-loader.is-exiting-product .brand-loader__inner {
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-loader__inner {
  --loader-logo-w: min(84vw, 520px);
  /* Hierarchy: logo (primary) → progress digits (secondary feedback) → status → choices */
  --loader-progress-size: clamp(1.875rem, 7vw, 2.875rem);
  --loader-status-size: clamp(0.58rem, 1.85vw, 0.68rem);
  --loader-choice-size: clamp(0.62rem, 2.2vw, 0.76rem);
  --loader-gap-tight: 4px;
  --loader-gap-mid: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--loader-gap-tight);
  transform: scale(0.92);
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.2, 0, 0, 1),
    transform 1.05s cubic-bezier(0.2, 0, 0, 1);
}

.brand-loader.is-active .brand-loader__inner {
  opacity: 1;
  transform: scale(1);
}

.brand-loader__progress {
  margin: 0 0 -12px;
  font-family: var(--font-mono);
  font-size: var(--loader-progress-size);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(232, 230, 223, 0.58);
  transform: translateY(4px) translateZ(0);
  opacity: 0;
  contain: layout style;
  transition:
    opacity 0.65s ease,
    transform 0.8s cubic-bezier(0.2, 0, 0, 1),
    color 0.35s ease;
}

.brand-loader.is-active .brand-loader__progress {
  opacity: 1;
  transform: translateY(0);
  color: rgba(232, 230, 223, 0.72);
}

.brand-loader.is-progress-faded .brand-loader__progress {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.brand-loader__percent {
  margin-left: 0.06em;
  font-size: 0.52em;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(232, 230, 223, 0.42);
}

.brand-loader__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--loader-logo-w);
  margin: -8px 0 0;
  overflow: visible;
  transform: translateY(0);
  transition: transform 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.brand-loader.is-progress-faded .brand-loader__stage {
  transform: translateY(-4px);
}

.brand-loader__wordmark {
  position: relative;
  width: var(--loader-logo-w);
  aspect-ratio: 1536 / 1024;
  overflow: visible;
  /* Trim invisible bottom padding baked into the BrandLogo asset (matches iOS trim). */
  margin: -2px 0 -14%;
  transition: filter 0.85s ease;
}

.brand-loader__letter {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  opacity: 0;
  will-change: opacity;
  transform: translateZ(0);
  pointer-events: none;
  user-select: none;
}

.brand-loader__letter-img {
  position: absolute;
  display: block;
  max-width: none;
  image-rendering: auto;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.brand-loader__wordmark-single {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translate3d(-3%, 0, 0);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
  html.landing-root {
    scrollbar-gutter: auto;
  }

  .brand-loader__letter {
    display: none;
  }

  .brand-loader__wordmark-single {
    display: block;
  }

  .brand-loader.is-complete .brand-loader__wordmark-single {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.brand-loader.is-complete .brand-loader__letter,
.brand-loader__letter.is-visible {
  opacity: 1;
}

.brand-loader.is-complete .brand-loader__wordmark {
  filter:
    drop-shadow(0 0 40px rgba(255, 250, 240, 0.06))
    drop-shadow(0 0 48px rgba(125, 249, 255, 0.14));
}

.brand-loader__status {
  margin: var(--loader-gap-mid) 0 0;
  font-family: var(--font-mono);
  font-size: var(--loader-status-size);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 230, 223, 0.44);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.35s ease;
}

.brand-loader.is-complete .brand-loader__status {
  opacity: 1;
  transform: translateY(0);
  color: rgba(232, 230, 223, 0.52);
}

.brand-loader__choices {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.75em;
  width: 100%;
  margin: var(--loader-gap-tight) 0 0;
  padding: 0;
  max-width: min(92vw, 560px);
  font-family: var(--font-mono);
  font-size: var(--loader-choice-size);
  letter-spacing: 0.12em;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-loader__choices-sep {
  flex: 0 0 auto;
  color: rgba(232, 230, 223, 0.3);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  text-decoration: none;
}

.brand-loader.is-choices-visible {
  /* Beat the mobile sound gate (2000) so choice links always receive taps. */
  z-index: 2100;
}

.brand-loader.is-choices-visible .brand-loader__choices {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  position: relative;
  z-index: 2;
}

/* Wordmark box overlaps the choice row — keep it decorative once links are shown. */
.brand-loader.is-choices-visible .brand-loader__stage,
.brand-loader.is-choices-visible .brand-loader__wordmark,
.brand-loader.is-choices-visible .brand-loader__status,
.brand-loader.is-choices-visible .brand-loader__progress {
  pointer-events: none;
}

.brand-loader__choice {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
  color: rgba(232, 230, 223, 0.78);
  text-decoration: none;
  transition: color 160ms ease;
}

.brand-loader__choice--product {
  color: rgba(232, 230, 223, 0.58);
}

.brand-loader.is-choices-visible,
.brand-loader.is-choices-visible * {
  cursor: auto !important;
}

.brand-loader.is-choices-visible .brand-loader__choice {
  cursor: pointer !important;
}

/* When the intro cursor dot is active, suppress the system cursor on the
   loader choices too — the custom dot (z-index 2200) sits above the loader. */
body.is-intro-cursor-active .brand-loader,
body.is-intro-cursor-active .brand-loader.is-choices-visible,
body.is-intro-cursor-active .brand-loader.is-choices-visible * {
  cursor: none !important;
}

.brand-loader__choice:hover,
.brand-loader__choice:focus-visible {
  color: rgba(232, 230, 223, 0.96);
  text-decoration: underline;
  text-underline-offset: 4px;
  outline: none;
}

.brand-loader__choice--product:hover,
.brand-loader__choice--product:focus-visible {
  color: rgba(232, 230, 223, 0.82);
}

.brand-loader__choice:disabled,
.brand-loader__choice[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.55;
}

button,
a {
  font: inherit;
}

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* —— Proof-margin viewport chrome (hero only) —— */
.hero-chrome {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.6s ease 0.9s;
}

body.lake-live .hero-chrome,
body.landing-home.loader-complete.lake-live .hero-chrome {
  opacity: 1;
}

/* The hero chrome is the SINGLE persistent HUD: once it fades in with the lake
   it stays put for the whole flight. It must NOT fade out mid-journey or get
   swapped for another nav at the end. */

.hero-frame {
  position: absolute;
  top: var(--frame);
  right: var(--frame);
  bottom: 0;
  left: var(--frame);
  z-index: 35;
  pointer-events: none;
  border: 1px solid rgba(232, 230, 223, 0.1);
  border-bottom: 0;
}

.hero-brand {
  position: absolute;
  top: clamp(28px, 4vw, 56px);
  left: var(--hero-chrome-x);
  z-index: 40;
}

/* —— Journey rail — left margin chapter stops (reveals with lake-live light) —— */
.journey-rail {
  position: absolute;
  left: calc(var(--hero-chrome-x) - 2px);
  top: 50%;
  z-index: 42;
  display: flex;
  align-items: stretch;
  gap: 14px;
  transform: translateY(-46%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 2.6s ease 0.9s,
    visibility 0s linear 3.5s;
}

body.lake-live .journey-rail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 2.6s ease 0.9s,
    visibility 0s linear 0s;
}

body.landing-home.is-loading .journey-rail,
body.landing-home.math-scanning .journey-rail,
body:not(.lake-live) .journey-rail {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.journey-rail__track {
  position: relative;
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  min-height: 168px;
  margin-top: 6px;
  margin-bottom: 6px;
  background: rgba(232, 230, 223, 0.1);
}

.journey-rail__fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--green, #9fffd0), var(--calibration-cyan, #7df9ff));
  box-shadow: 0 0 10px rgba(125, 249, 255, 0.45);
  transition: height 480ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.journey-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(12px, 2vh, 20px);
  min-height: 168px;
}

.journey-rail__stop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(232, 230, 223, 0.28);
  transition: color 0.45s var(--ease, ease);
  pointer-events: auto;
}

.journey-rail__stop:hover,
.journey-rail__stop:focus-visible {
  color: rgba(232, 230, 223, 0.52);
  outline: none;
}

.journey-rail__stop:disabled {
  cursor: default;
}

.journey-rail__dot {
  display: block;
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--calibration-cyan, #7df9ff);
  opacity: 0;
  transform: scale(0.45);
  box-shadow: none;
  transition:
    opacity 0.45s var(--ease, ease),
    transform 0.45s var(--ease, ease),
    box-shadow 0.45s var(--ease, ease),
    background 0.45s var(--ease, ease);
}

.journey-rail__stop.is-active {
  color: rgba(245, 248, 255, 0.92);
}

.journey-rail__stop.is-active .journey-rail__dot {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 8px rgba(125, 249, 255, 0.75);
}

.journey-rail__stop--audit.is-active {
  color: var(--calibration-cyan, #7df9ff);
}

.journey-rail__stop--audit.is-active .journey-rail__dot {
  background: var(--calibration-cyan, #7df9ff);
  box-shadow: 0 0 8px rgba(125, 249, 255, 0.8);
}

.journey-rail__stop--articulate.is-active {
  color: var(--mode-articulate, #b18cff);
}

.journey-rail__stop--articulate.is-active .journey-rail__dot {
  background: var(--mode-articulate, #b18cff);
  box-shadow: 0 0 8px rgba(177, 140, 255, 0.55);
}

.journey-rail__stop--apply.is-active {
  color: var(--mode-apply, #f4c869);
}

.journey-rail__stop--apply.is-active .journey-rail__dot {
  background: var(--mode-apply, #f4c869);
  box-shadow: 0 0 8px rgba(244, 200, 105, 0.55);
}

.journey-rail__stop--instrument.is-active {
  color: rgba(245, 248, 255, 0.94);
}

.journey-rail__label {
  white-space: nowrap;
}

.hero-brand__name {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.42em;
  color: rgba(232, 230, 223, 0.86);
  font-weight: 500;
  text-transform: uppercase;
}

.hero-brand__sub {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(232, 230, 223, 0.42);
  text-transform: lowercase;
}

.hero-nav {
  position: absolute;
  top: clamp(32px, 4vw, 58px);
  right: clamp(28px, 4vw, 56px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 28px;
  pointer-events: auto;
}

.hero-nav a {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: none;
  color: rgba(232, 230, 223, 0.7);
  text-decoration: none;
  transition: color 160ms ease;
}

.hero-nav a:hover {
  color: rgba(232, 230, 223, 0.94);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero-nav__divider {
  width: 1px;
  height: 14px;
  background: rgba(232, 230, 223, 0.22);
}

/* —— Ambient audio (viewport-fixed; lives on body, not hero-chrome) —— */
.ambient-audio-bar {
  position: fixed;
  left: max(var(--hero-sound-left), env(safe-area-inset-left, 0px));
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  z-index: 120;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease;
}

/* Exactly one audio affordance on screen: prompt OR controls, never both. */
body:not([data-audio-ui="controls"]) .ambient-audio-bar {
  display: none !important;
}

body[data-audio-ui="controls"] .ambient-audio-bar {
  display: block !important;
  opacity: 1;
  pointer-events: auto;
}

body[data-audio-ui="controls"] .ambient-audio-prompt {
  display: none !important;
}

body[data-audio-ui="prompt"] .ambient-audio-bar {
  display: none !important;
}

.ambient-audio-bar.is-visible {
  opacity: 1;
  pointer-events: auto;
}

body.landing-home.is-loading .ambient-audio-bar,
body.landing-home.is-loading .ambient-audio-prompt {
  opacity: 0;
  pointer-events: none;
}

body.landing-home.is-loading .mobile-sound-gate {
  display: none !important;
  pointer-events: none !important;
}

body.landing-home.is-loading .ambient-audio-prompt.is-visible {
  opacity: 0;
  pointer-events: none;
}

.hero-sound-toggle {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: rgba(232, 230, 223, 0.58);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition: color 160ms ease;
}

.hero-sound-toggle:hover,
.hero-sound-toggle:focus-visible {
  color: rgba(232, 230, 223, 0.82);
  outline: none;
}

.hero-skip-cinematic {
  position: absolute;
  right: var(--hero-sound-left);
  bottom: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: rgba(232, 230, 223, 0.58);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition: color 160ms ease, opacity 520ms ease;
}

/* Both cinematic controls share one baseline regardless of which audio UI
   state is active. */
.ambient-audio-bar,
.hero-skip-cinematic {
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  height: 44px;
}

.hero-skip-cinematic:hover,
.hero-skip-cinematic:focus-visible {
  color: rgba(232, 230, 223, 0.82);
  outline: none;
}

.hero-skip-cinematic:disabled {
  opacity: 0.42;
  cursor: wait;
}

/* Match the text-only hero nav — no icon chrome. */
.ambient-audio-toggle__icon {
  display: none;
}

.ambient-audio-toggle__label {
  display: inline;
}

/* Product handoff: the cinematic control resolves into one quiet, explicit
   escape hatch while the score fades. It retires with the last audible frame. */
body.product-audio-control .ambient-audio-bar {
  z-index: 420;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 480ms var(--ease, ease),
    transform 480ms var(--ease, ease);
}

body.product-audio-control .ambient-audio-toggle {
  min-height: 46px;
  padding: 0 16px;
  gap: 10px;
  border: 1px solid rgba(80, 224, 238, 0.28);
  border-radius: 999px;
  background: rgba(3, 11, 14, 0.82);
  color: rgba(228, 246, 245, 0.86);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.product-audio-control .ambient-audio-toggle__icon {
  display: inline-flex;
  color: rgba(83, 232, 239, 0.92);
}

body.product-audio-control .ambient-audio-toggle__label {
  font-size: 9px;
  letter-spacing: 0.18em;
}

body.product-audio-retired .ambient-audio-bar {
  opacity: 0 !important;
  transform: translate3d(0, 7px, 0);
  pointer-events: none;
}

/* A hint, not a control: void clicks unlock audio (audio.js). Desktop: dot rides the cursor. */
.intro-cursor-dot {
  position: fixed;
  left: var(--intro-cursor-x, 50vw);
  top: var(--intro-cursor-y, 60vh);
  z-index: 2200;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 0 solid transparent;
  background: rgba(232, 230, 223, 0.42);
  box-shadow: 0 0 0 1px rgba(232, 230, 223, 0.08);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width 160ms ease,
    height 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.intro-cursor-dot.is-over-target {
  width: 11px;
  height: 11px;
  background: transparent;
  border: 1px solid rgba(232, 230, 223, 0.58);
  box-shadow: none;
}

body.is-intro-cursor-active {
  cursor: none !important;
}

html:has(> body.is-intro-cursor-active) {
  cursor: none !important;
}

body.is-intro-cursor-active *,
body.is-intro-cursor-active *::before,
body.is-intro-cursor-active *::after {
  cursor: none !important;
}

body.is-intro-cursor-active .scene-shell,
body.is-intro-cursor-active .hero-chrome,
body.is-intro-cursor-active .math-instrument,
body.is-intro-cursor-active .site-header {
  cursor: none !important;
}

.ambient-audio-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(var(--hero-strip-height) + 24px);
  z-index: 2200;
  transform: translateX(-50%) translateY(10px);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(232, 230, 223, 0.36);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 420ms ease,
    transform 420ms ease,
    color 160ms ease;
}

.ambient-audio-prompt__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
}

.ambient-audio-prompt__line {
  display: block;
  white-space: nowrap;
}

body[data-audio-ui="prompt"] .ambient-audio-prompt {
  display: flex;
}

.ambient-audio-prompt.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ambient-audio-prompt.is-flash .ambient-audio-prompt__label {
  color: rgba(232, 230, 223, 0.58);
}

/* Desktop: label trails the intro cursor dot with easing lag (JS-driven). */
body.is-intro-cursor-active[data-audio-ui="prompt"] .ambient-audio-prompt {
  left: calc(var(--prompt-x, 50vw) + 16px);
  top: calc(var(--prompt-y, 60vh) + 10px);
  bottom: auto;
  transform: none;
  align-items: flex-start;
  transition: opacity 240ms ease, color 160ms ease;
}

body.is-intro-cursor-active[data-audio-ui="prompt"] .ambient-audio-prompt.is-visible {
  transform: none;
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
  #intro-cursor-dot,
  .ambient-audio-prompt,
  body[data-audio-ui="prompt"] .ambient-audio-prompt {
    display: none !important;
  }
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  body.finale-product-prime.is-intro-cursor-active[data-audio-ui="prompt"] .ambient-audio-prompt.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

body.hero-intro-transition::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--void);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.48s ease;
}

body.hero-intro-transition.is-covered::before {
  opacity: 1;
  pointer-events: auto;
}

/* Product gateway: loader fades out over a held void while the brief stages underneath. */
body.product-gateway.hero-intro-transition::before {
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

body.landing-home.product-gateway .scene-shell,
body.landing-home.product-gateway .hero-chrome,
body.landing-home.product-gateway .hero-progress-bar,
body.landing-home.product-gateway .site-header,
body.landing-home.product-gateway .ambient-audio-prompt {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Skip path: snap every layer to its post-impact pose with no staged CSS reveals. */
body.hero-intro-snapped .hero-chrome {
  opacity: 1;
  transition: none;
}

body.hero-intro-snapped .hero-brand,
body.hero-intro-snapped .hero-nav,
body.hero-intro-snapped .hero-frame {
  opacity: 1;
  visibility: visible;
}

body.hero-intro-snapped.lake-live .scene-shell,
body.hero-intro-snapped.lake-live .math-lake,
body.hero-intro-snapped .scene-shell::before,
body.hero-intro-snapped .scene-shell::after,
body.hero-intro-snapped.lake-live .math-lake::after,
body.hero-intro-snapped.lake-live .math-instrument-body::before,
body.hero-intro-snapped.lake-live .math-tail::before,
body.hero-intro-snapped .math-orb.is-faded,
body.hero-intro-snapped .math-phrase.is-visible {
  transition: none;
  animation: none;
}

.site-footer__replay {
  display: block;
  margin: 12px auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(232, 230, 223, 0.32);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease;
}

.site-footer__replay:hover,
.site-footer__replay:focus-visible {
  color: rgba(61, 232, 255, 0.72);
}

.site-footer__replay:focus-visible {
  outline: 1px solid rgba(61, 232, 255, 0.45);
  outline-offset: 4px;
}

/* —— Bottom control strip — labels float over the lake; no boxed bar. —— */
.hero-strip {
  position: absolute;
  left: var(--frame);
  right: var(--frame);
  bottom: 0;
  z-index: 45;
  height: var(--hero-strip-height);
  background: transparent;
  border: 0;
  pointer-events: auto;
}

/* The legacy product scroll hint follows the permanent completion state. The
   finale uses its own invite while the 1.8s handoff remains compositor-stable. */
.hero-scroll-label {
  position: absolute;
  left: 50%;
  bottom: 48px;
  z-index: 2;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(232, 230, 223, 0.36);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-scroll-label__short {
  display: none;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  font-weight: 500;
}

.hero-scroll-chevron {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1;
  color: rgba(232, 230, 223, 0.32);
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}

body.hero-intro-complete .hero-scroll-label,
body.hero-intro-complete .hero-scroll-chevron {
  opacity: 1;
}

/* Finale — faint scroll invite after the closing phrase. */
.finale-scroll-invite {
  position: fixed;
  left: 50%;
  bottom: clamp(34px, 6.5vh, 68px);
  z-index: 56;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 2s;
}

.finale-scroll-invite__text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(232, 230, 223, 0.42);
  white-space: nowrap;
}

.finale-scroll-invite__chev {
  font-size: 11px;
  line-height: 1;
  color: rgba(232, 230, 223, 0.32);
  animation: finale-scroll-chev 2.6s ease-in-out infinite;
}

body.finale-scroll-invite-visible .finale-scroll-invite__text,
body.finale-scroll-invite-visible .finale-scroll-invite__chev {
  animation: finale-invite-breathe 3.2s ease-in-out infinite;
}

@keyframes finale-invite-breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes finale-scroll-chev {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

body.finale-scroll-invite-visible .finale-scroll-invite {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

body.finale-scroll-invite-visible .hero-scroll-label,
body.finale-scroll-invite-visible .hero-scroll-chevron {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.finale-phrase-exit .math-tail,
body.finale-phrase-exit.math-glyph-finale .math-tail {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none;
  transition:
    opacity 1.4s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    visibility 0s linear 1.4s !important;
}

/* Mobile: one affordance at a time — hide bottom scroll cue while the hint is up. */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .brand-loader__choices {
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    max-width: min(88vw, 320px);
  }

  .brand-loader__choice {
    display: inline-flex;
    min-width: min(72vw, 260px);
    min-height: 46px;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  .brand-loader__choices-sep {
    display: none;
  }

  body.hero-intro-complete .hero-scroll-label,
  body.hero-intro-complete .hero-scroll-chevron {
    opacity: 0;
    transition:
      opacity 520ms cubic-bezier(0.25, 0.1, 0.25, 1) 80ms,
      transform 520ms cubic-bezier(0.25, 0.1, 0.25, 1) 80ms;
  }

  body.hero-intro-complete:not(.hero-hint-visible) .hero-scroll-label,
  body.hero-intro-complete:not(.hero-hint-visible) .hero-scroll-chevron {
    opacity: 1;
  }

  .hero-scroll-label__long {
    display: none;
  }

  .hero-scroll-label__short {
    display: inline;
  }

  .hero-scroll-label {
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    font-size: 9px;
    letter-spacing: 0.12em;
    color: rgba(232, 230, 223, 0.28);
  }

  .hero-scroll-chevron {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    font-size: 11px;
    color: rgba(232, 230, 223, 0.24);
  }

  /* —— Mobile hero polish: nav, math stage, spacing —— */
  .hero-brand__sub {
    display: none;
  }

  .hero-nav {
    top: clamp(24px, 5vw, 40px);
    right: max(16px, env(safe-area-inset-right, 0px));
    gap: 10px;
  }

  .hero-nav__divider--contents {
    display: block;
    height: 10px;
  }

  .hero-nav__contents {
    display: inline;
  }

  .hero-nav__cta {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(232, 230, 223, 0.62);
  }

  .hero-brand {
    top: clamp(24px, 5vw, 40px);
    left: max(var(--hero-chrome-x), env(safe-area-inset-left, 0px));
  }

  .hero-brand__name {
    font-size: 10px;
    letter-spacing: 0.34em;
    color: rgba(232, 230, 223, 0.78);
  }

  /* The desktop rail occupies a dedicated left gutter. Portrait has no such
     gutter, so use a compact horizontal stage navigator beneath the header.
     All five stops retain 44px touch targets; only the active label is shown. */
  .journey-rail {
    left: 50%;
    top: calc(56px + env(safe-area-inset-top, 0px));
    width: calc(100% - 48px);
    max-width: 420px;
    min-height: 48px;
    align-items: center;
    gap: 0;
    transform: translateX(-50%);
  }

  .journey-rail__track {
    position: absolute;
    top: 22px;
    right: 22px;
    left: 22px;
    width: auto;
    height: 1px;
    min-height: 0;
    margin: 0;
  }

  .journey-rail__fill {
    display: none;
  }

  .journey-rail__list {
    width: 100%;
    min-height: 48px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
  }

  .journey-rail__stop {
    position: relative;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    gap: 0;
    padding: 0;
  }

  .journey-rail__dot {
    width: 5px;
    height: 5px;
    opacity: 0.36;
    transform: scale(0.72);
  }

  .journey-rail__label {
    position: absolute;
    top: 31px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    font-size: 0.46rem;
    letter-spacing: 0.14em;
    pointer-events: none;
    transition: opacity 0.35s var(--ease, ease);
  }

  .journey-rail__stop.is-active .journey-rail__label {
    opacity: 1;
  }

  .hero-strip {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    min-height: calc(var(--hero-strip-height) + env(safe-area-inset-bottom, 0px));
  }

  .ambient-audio-bar {
    left: max(16px, env(safe-area-inset-left, 0px));
    bottom: max(calc(14px + env(safe-area-inset-bottom, 0px)), 14px);
  }

  .hero-sound-toggle {
    font-size: 8px;
    letter-spacing: 0.14em;
    color: rgba(232, 230, 223, 0.42);
  }

  .math-instrument {
    padding-bottom: clamp(40px, 9vh, 84px);
  }

  .math-instrument-body::before {
    top: -4%;
    height: clamp(320px, 58vh, 640px);
    background: radial-gradient(
      ellipse 46% 50% at 50% 42%,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.34) 44%,
      rgba(0, 0, 0, 0) 74%
    );
  }

  body.lake-live .scene-shell::before {
    background: linear-gradient(
      to bottom,
      rgba(2, 3, 4, 0.03) 0%,
      rgba(2, 3, 4, 0) 38%,
      rgba(2, 3, 4, 0) 100%
    );
  }

  body.lake-live.scene-quality-balanced .math-instrument-body::before,
  body.lake-live.scene-quality-safe .math-instrument-body::before {
    background: radial-gradient(
      ellipse 46% 50% at 50% 42%,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.04) 44%,
      rgba(0, 0, 0, 0) 74%
    );
  }

  .math-tail {
    margin-top: clamp(28px, 5vh, 52px);
    padding-inline: 12px;
  }

  .math-phrase .phrase-headline {
    margin-bottom: 0.12rem;
  }

  .math-phrase .phrase-modes {
    max-width: min(20.5rem, 88vw);
    margin-inline: auto;
    line-height: 1.42;
    text-wrap: balance;
  }

  body.math-complete:not(.math-proof-resolved):not(.math-proof-contradiction):not(.math-line-hover-active) .math-row[data-row="problem"] .math-token {
    color: rgba(255, 250, 240, 0.94) !important;
    filter: drop-shadow(0 0 5px rgba(125, 249, 255, 0.16)) !important;
  }

  body.math-complete:not(.math-proof-resolved):not(.math-proof-contradiction):not(.math-line-hover-active) .math-row[data-row="final"] .math-token:not(.math-token--passed-strong) {
    color: rgba(232, 230, 223, 0.74) !important;
    filter: drop-shadow(0 0 4px rgba(125, 249, 255, 0.14)) !important;
  }

  body.math-complete:not(.math-proof-resolved):not(.math-proof-contradiction):not(.math-line-hover-active) .math-row[data-row="rule"] .math-token:not(.math-token--error) {
    color: rgba(232, 230, 223, 0.56) !important;
  }

  /* Touch targets without a layout jump when hero interaction unlocks. */
  body:not(.hero-math-inert) .math-line {
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  body:not(.hero-math-inert) .math-line::before {
    content: "";
    position: absolute;
    inset: -10px -14px;
    z-index: -1;
  }

  body:not(.hero-intro-complete):not(.hero-math-inert) .math-line,
  body:not(.hero-intro-complete):not(.hero-math-inert) .math-line::before {
    pointer-events: none;
  }

  /* Hero math readability — rem-based type tracks user font settings; avoid
     stacking harsh transform shrink on top of tiny clamp() floors. */
  :root {
    --math-user-scale: clamp(1, 0.96 + 0.18vw, 1.14);
    --math-instrument-touch-scale: clamp(0.96, 0.9 + 0.55vw, 1.02);
  }

  /* Freeze hero rhythm while the scan + finale play — mobile chrome / vh shifts
     were reflowing row gaps and vw-based scale after the light reveal. */
  body.landing-home:not(.hero-intro-complete) {
    --math-user-scale: 1;
    --math-instrument-touch-scale: 1;
  }

  /* Opening cinematic matches desktop: same flex centering and instrument scale. */
  body.landing-home:not(.hero-intro-complete) .math-instrument {
    padding-bottom: clamp(28px, 7vh, 96px) !important;
    transform: perspective(1400px) rotateX(var(--math-tilt, 0deg)) scale(var(--math-scale)) !important;
  }

  body.landing-home:not(.hero-intro-complete) .js .math-row.is-visible {
    --row-gap: 0.55rem;
  }

  body.landing-home:not(.hero-intro-complete) .js .math-row[data-row="final"] {
    --row-gap: 0.72rem;
  }

  /* After the light reveal, anchor from the top so the finale phrase cannot
     pull the proof upward when it fades in below. */
  body.landing-home.hero-math-y-locked .math-instrument {
    justify-content: flex-start !important;
    align-items: stretch;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0;
  }

  body.landing-home.hero-math-y-locked .math-instrument-body {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--hero-math-body-top, 0px);
    width: 100%;
    margin: 0;
  }

  body.math-tail-drawing .math-phrase.is-visible,
  body.lake-live:not(.hero-intro-complete) .math-phrase.is-visible {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .math-stack {
    --math-stack-scale: 1;
    width: min(940px, calc(100% - 28px));
  }

  .math-instrument {
    transform: perspective(1400px) rotateX(var(--math-tilt, 0deg))
      scale(calc(var(--math-scale) * var(--math-instrument-touch-scale)));
  }

  .math-line {
    font-size: calc(var(--math-user-scale) * clamp(1.06rem, 0.72rem + 3.6vw, 1.38rem));
  }

  .math-line-wide {
    font-size: calc(var(--math-user-scale) * clamp(0.88rem, 0.52rem + 2.35vw, 1.12rem));
  }

  .math-line-lead {
    font-size: calc(var(--math-user-scale) * clamp(1.1rem, 0.74rem + 3.9vw, 1.46rem));
  }

  .math-line-final {
    font-size: calc(var(--math-user-scale) * clamp(1.16rem, 0.78rem + 4.4vw, 1.62rem));
  }

  .js .math-row.is-visible {
    --row-gap: clamp(0.4rem, 1.35vh, 0.9rem);
  }

  /* Finale shake — keep the resting instrument transform so the proof doesn't
     rescale before the shake; just drop the blur for a crisp snapshot. */
  body.math-glyph-capture .math-instrument,
  body.math-glyph-shake .math-instrument {
    filter: none !important;
  }

  body.math-glyph-capture #math-stack .math-token,
  body.math-glyph-capture #math-stack .math-token--sup,
  body.math-glyph-shake #math-stack .math-token,
  body.math-glyph-shake #math-stack .math-token--sup {
    display: inline-block !important;
    transform-origin: center center;
    -webkit-transform-origin: center center;
    vertical-align: baseline;
  }

  body.math-glyph-capture #math-stack .math-row,
  body.math-glyph-shake #math-stack .math-row {
    grid-template-rows: 1fr !important;
    overflow: visible !important;
  }

  body.math-glyph-capture #math-stack .math-line,
  body.math-glyph-shake #math-stack .math-line,
  body.math-glyph-capture #math-stack .math-row__slot,
  body.math-glyph-shake #math-stack .math-row__slot {
    overflow: visible !important;
  }
}

.hero-progress-bar {
  position: fixed;
  left: var(--frame);
  right: var(--frame);
  bottom: 0;
  z-index: 56;
  height: 16px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 680ms ease 0.2s;
}

body.landing-home.loader-complete .hero-progress-bar {
  opacity: 1;
}

.hero-progress-bar__fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: var(--hero-progress, 0%);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: brightness(0.78);
  -webkit-backdrop-filter: brightness(0.78);
  transition: width 140ms linear;
}

@supports not (
  (backdrop-filter: brightness(0.78)) or (-webkit-backdrop-filter: brightness(0.78))
) {
  .hero-progress-bar__fill {
    background: rgba(255, 255, 255, 0.08);
  }
}

.site-header {
  position: fixed;
  top: calc(var(--frame) + 22px);
  left: calc(var(--frame) + 24px);
  right: calc(var(--frame) + 24px);
  z-index: 42;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 190px;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.46em;
  color: rgba(232, 230, 223, 0.92);
  text-shadow: 0 0 18px rgba(125, 249, 255, 0.16);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

body.math-complete .brand {
  opacity: var(--brand-opacity);
  transform: translateY(0);
  pointer-events: auto;
}

/* The hero chrome wordmark is the only brand on the cinematic and now persists
   the whole way down, so the functional header brand stays hidden for every
   phase — the two chrome layers must never double up the wordmark. */
body.landing-home.loader-complete .brand {
  opacity: 0;
  pointer-events: none;
}

.brand span:last-child {
  opacity: calc(0.55 + var(--brand-opacity) * 0.45);
}

.brand img,
.brand-fallback {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.brand-fallback {
  display: none;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--faint);
  font-size: 0.55rem;
  letter-spacing: 0;
}

.scene-nav {
  display: inline-flex;
  align-items: stretch;
  justify-content: flex-end;
  min-height: 44px;
  pointer-events: none;
  border: 1px solid rgba(232, 230, 223, 0.1);
  background: rgba(4, 9, 16, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

body.phase-branch .scene-nav {
  opacity: var(--nav-opacity);
  transform: translateY(0);
  pointer-events: auto;
}

.scene-nav button,
.scene-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border-left: 1px solid rgba(232, 230, 223, 0.08);
  background: transparent;
  color: rgba(232, 230, 223, 0.68);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}

.scene-nav button:first-child {
  border-left: 0;
}

.scene-nav button.is-active,
.scene-nav a:hover {
  color: var(--ink);
}

.scene-nav .nav-cta {
  color: #020812;
  background: rgba(232, 230, 223, 0.95);
}

.scene-shell {
  position: fixed;
  top: var(--frame);
  right: var(--frame);
  bottom: 0;
  left: var(--frame);
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  /* Dark blue-black base behind the canvas — lifted charcoal, not pure black. */
  background: linear-gradient(180deg, #05070a 0%, #090d11 56%, #05070a 100%);
  color: var(--math-white);
  cursor: default;
}

body.landing-home.hero-intro-complete .scene-shell {
  cursor: ns-resize;
}

/* Before the droplet strikes, the hero is a pure black void — no valley grade,
   no horizon mist, no water tint. Color enters only after lake-live. */
body:not(.lake-live) .scene-shell {
  background: #000;
}

body:not(.lake-live) .scene-shell::before,
body:not(.lake-live) .scene-shell::after {
  opacity: 0;
}

body:not(.lake-live) .math-lake::after,
body:not(.lake-live) .math-instrument-body::before,
body:not(.lake-live) .math-tail::before {
  opacity: 0;
}

body.lake-live .math-lake::after,
body.lake-live .math-instrument-body::before,
body.lake-live .math-tail::before {
  opacity: 1;
  transition: opacity 1s ease;
}

.scene-shell::before,
.scene-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

/* ONE restrained cinematic grade: gentle bottom falloff only. The radial edge
   vignette was removed — combined with channel-centred 3D lighting it made the
   centre read as a circular bloom on the camera for the whole descent. */
.scene-shell::before {
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(5, 7, 10, 0.03) 0%,
    rgba(5, 7, 10, 0.04) 55%,
    transparent 100%
  );
}

/* Distant ravine opening overlay removed — the centered radial + blur read as an
   ugly circular bloom on the camera for the whole descent and at the void handoff. */
.scene-shell::after {
  content: none;
  display: none;
}

.world-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Hidden behind the math/headline (pure black); reveals only as the path
     and pull-out begin, so the opening never reads as a blue WebGL wash. */
  opacity: var(--world-canvas-opacity, 0);
}

.math-instrument {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.8vh, 42px);
  /* Lift the stack center to ~44% of the viewport (slightly above center). */
  padding-bottom: clamp(28px, 7vh, 96px);
  pointer-events: none;
  opacity: var(--math-opacity);
  filter: blur(var(--math-blur));
  transform: perspective(1400px) rotateX(var(--math-tilt, 0deg)) scale(var(--math-scale));
  transform-origin: 50% 44%;
}

.math-floor-glow {
  position: absolute;
  left: 50%;
  top: 66%;
  width: min(55vw, 760px);
  height: 18vh;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: calc(var(--math-opacity) * 0.16);
  background: radial-gradient(
    ellipse at center,
    rgba(232, 230, 223, 0.16) 0%,
    rgba(125, 249, 255, 0.045) 30%,
    transparent 72%
  );
  filter: blur(18px);
}

.math-instrument-static {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.8vh, 42px);
  opacity: 1;
}

.math-instrument-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(940px, calc(100% - 44px));
  --orb-drop: 85px;
  /* The lake scene drives these so the math parallaxes with the 3D camera,
     staying glued to its own reflection in the water. */
  transform: translate3d(var(--math-px, 0px), var(--math-py, 0px), 0);
  will-change: transform;
}

.math-lake {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

body.lake-live .math-instrument {
  justify-content: flex-start;
  align-items: center;
  padding-top: clamp(72px, 14vh, 152px);
  padding-bottom: clamp(128px, 30vh, 300px);
  transform-origin: 50% 36%;
}

body.lake-live.math-complete.math-proof-retired .math-stack {
  --math-stack-scale: 0.9;
}

body.lake-live.math-complete.math-proof-retired .math-line {
  font-size: clamp(0.9rem, 1.28vw, 1.18rem);
}

body.lake-live.math-complete.math-proof-retired .math-line-wide {
  font-size: clamp(0.8rem, 1.08vw, 1.02rem);
}

body.lake-live.math-complete.math-proof-retired .math-line-lead {
  font-size: clamp(0.94rem, 1.32vw, 1.22rem);
}

body.lake-live.math-complete.math-proof-retired .math-line-final {
  font-size: clamp(1.08rem, 1.95vw, 1.72rem);
}

body.lake-live .math-tail {
  margin-top: clamp(18px, 3.2vh, 40px);
}

body.lake-live .math-phrase {
  font-size: clamp(0.95rem, 1.75vw, 1.28rem);
}

body.lake-live .math-phrase .phrase-headline {
  font-size: clamp(1.02rem, 2vw, 1.62rem);
  line-height: 1.16;
}

body.lake-live .math-phrase .phrase-modes {
  margin-top: clamp(0.45rem, 1.4vh, 0.85rem);
  font-size: clamp(0.82rem, 1.45vw, 1.08rem);
  line-height: 1.38;
}

body.lake-live .math-lake {
  opacity: 1;
}

/* WebGL fallback — only when the scene cannot mount (no-3d), not the normal mobile path. */
body.lake-live.no-3d .scene-shell {
  background: linear-gradient(180deg, #0b0d10 0%, var(--charcoal) 58%, #070809 100%);
}

body.lake-live.no-3d .scene-shell::before {
  opacity: 0.32;
}

body.lake-live.no-3d .scene-shell::after {
  opacity: 0.18;
}

/* Water runs edge-to-edge at the bottom — no settle gradient or boxed strip. */
.math-lake::after {
  content: none;
}

.math-lake__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.math-stack {
  position: relative;
  width: min(940px, calc(100% - 44px));
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Hover shift (--math-stack-hover-x) and the responsive shrink
     (--math-stack-scale) must compose in ONE transform — a media query that
     sets `transform:` directly would silently drop the hover shift. */
  transform: translate3d(var(--math-stack-hover-x, 0px), 0, 0) scale(var(--math-stack-scale, 1));
  transform-origin: 50% 0%;
  /* Smooth, unhurried glide — ease-in-out so it accelerates and settles gently
     rather than snapping. */
  transition: transform 0.82s cubic-bezier(0.65, 0, 0.35, 1);
  /* Spacing lives on visible rows (below) so collapsed rows add no gap and the
     opening reads as two clean adjacent lines. */
  gap: 0;
  color: var(--math-white);
  /* Glow lives on individual tokens via filter: drop-shadow (follows glyph
     shapes). A stack-level filter creates an unnatural rectangular bloom. */
}

/* Dark readability halo behind the math — invisible as a box, it just carves
   clean negative space so the luminous symbols never fight the lit water. */
.math-instrument-body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8%;
  width: min(120vw, 1180px);
  height: clamp(280px, 56vh, 600px);
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 44% 48% at 50% 44%,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.14) 42%,
    rgba(0, 0, 0, 0) 72%
  );
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

.math-tail {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Lifted closer to the math so the verdict reads as the reveal, not a footer. */
  margin-top: clamp(34px, 6vh, 74px);
  opacity: var(--phrase-opacity, 0);
  transition: opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}

body.lake-live .math-instrument-body::before {
  top: -10%;
  height: clamp(220px, 42vh, 460px);
  background: radial-gradient(
    ellipse 42% 46% at 50% 38%,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.22) 38%,
    rgba(0, 0, 0, 0) 68%
  );
  filter: blur(10px);
}

body.lake-live .scene-shell::before {
  background: linear-gradient(
    to bottom,
    rgba(2, 3, 4, 0.03) 0%,
    rgba(2, 3, 4, 0) 38%,
    rgba(2, 3, 4, 0) 100%
  );
}

body.lake-live .math-tail::before {
  content: none;
  display: none;
}

body.math-tail-drawing .math-tail {
  opacity: 1;
}

/* ── Glyph finale: canvas shake → bass rebound burst ─────────── */
:root {
  --glyph-floor-pad: clamp(22px, 4vh, 42px);
}

/* Lull — dim via opacity only; full-scene filter: brightness() was dropping frames. */
body.math-glyph-lull .scene-shell,
body.math-glyph-lull .hero-chrome,
body.math-glyph-shake .scene-shell,
body.math-glyph-shake .hero-chrome {
  filter: none;
  transition: none;
}

body.math-glyph-shake-peak .glyph-finale-canvas {
  /* Intensity reads through motion, not glow — glow blurs glyph edges. */
  filter: none !important;
}

/* The lull belongs to the proof's individual values. Each token trembles on a
   different phase while the stack carries a much smaller shared vibration. */
body.math-glyph-shake #math-stack .math-token {
  animation: none !important;
  transition: none !important;
  will-change: transform;
}

body.math-glyph-pile-hold .glyph-finale-canvas {
  filter: drop-shadow(0 -8px 28px rgba(125, 249, 255, 0.08));
}

body.math-finale-burst .scene-shell,
body.math-finale-burst .hero-chrome {
  filter: none;
  transition: none;
}

/* Proof release — luminous matter over black; JS drives per-frame field fade
   via inline canvas opacity, so no CSS transition here (it would lag/fight). */
body.math-glyph-release .glyph-finale-canvas,
body.math-glyph-warp .glyph-finale-canvas {
  z-index: 27;
  mix-blend-mode: normal;
  filter: none !important;
  transition: none !important;
}

/* Time freeze — the world falls away so the suspended matter is the whole scene. */
body.math-glyph-suspend .scene-shell,
body.math-glyph-suspend .hero-chrome {
  filter: none;
  transition: none;
}

body.math-glyph-reforming .scene-shell,
body.math-glyph-reforming .hero-chrome {
  filter: none;
  transition: none;
}

body.math-glyph-warp .math-tail .math-phrase:not(.is-visible) {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* During warp (burst+suspend) the phrase is not yet visible. During reform the
   phrase container resolves as a whole via the phrase-global-resolve animation
   (blur→sharp, opacity 0→1). Suppress old whole-block animations in both phases. */
body.math-glyph-warp .math-tail .math-phrase.is-visible .phrase-headline {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.math-glyph-reforming .math-tail .math-phrase.is-visible .phrase-headline,
body.math-glyph-reforming .math-tail .math-phrase.is-visible .phrase-modes {
  animation: none !important;
  transform: none !important;
}

/* Final phrase chars stay hidden during warp/reform until the canvas particle
   hands off (.is-set). Prevents the DOM line from rendering on top of the
   flying glyphs — the double-phrase bug. */
.math-phrase .phrase-char {
  display: inline-block;
  vertical-align: baseline;
  animation: none !important;
  transform: none;
  filter: none;
}

.math-phrase .phrase-word {
  display: inline-block;
  white-space: nowrap;
}

body.math-glyph-warp:not(.math-glyph-reforming) .math-phrase .phrase-char,
body.math-glyph-reforming .math-phrase .phrase-char:not(.is-set) {
  opacity: 0 !important;
}

body.math-glyph-reforming .math-phrase:not(.phrase-modes--in) .phrase-modes {
  opacity: 0 !important;
}

body.math-glyph-warp .math-phrase:not(.phrase-modes--in) .phrase-modes {
  opacity: 0 !important;
}

body.math-glyph-finale .math-phrase.math-phrase--layout-probe,
body.math-glyph-finale .math-phrase.math-phrase--layout-probe .phrase-char {
  visibility: visible !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.math-phrase.phrase-assembled .phrase-char,
.math-phrase .phrase-char.is-set {
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: currentColor;
}

body.math-glyph-reforming .math-phrase .phrase-char.reel-tick-a {
  animation: phrase-reel-tick-a 65ms cubic-bezier(0.2, 0.72, 0.28, 1) both !important;
}

body.math-glyph-reforming .math-phrase .phrase-char.reel-tick-b {
  animation: phrase-reel-tick-b 65ms cubic-bezier(0.2, 0.72, 0.28, 1) both !important;
}

@keyframes phrase-reel-tick-a {
  0% {
    opacity: 0.52;
    transform: translateY(-0.34em) scaleY(0.82);
    filter: blur(0.7px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: none;
  }
}

@keyframes phrase-reel-tick-b {
  0% {
    opacity: 0.52;
    transform: translateY(0.34em) scaleY(0.82);
    filter: blur(0.7px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: none;
  }
}

/* Global blur-to-sharp reveal — container only; chars hand off individually. */
body.math-glyph-reforming .math-phrase.is-visible {
  animation: phrase-global-resolve 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* One entrance path during warp/reform — block legacy orb/release animations
   that were re-playing the phrase after the canvas field already flew. */
body.math-glyph-warp .math-phrase.is-visible,
body.math-glyph-reforming .math-phrase.is-visible,
body.math-finale-burst.math-glyph-warp .math-phrase.is-visible,
body.math-finale-burst.math-glyph-reforming .math-phrase.is-visible,
body.math-tail-drawing.math-glyph-warp .math-phrase.is-visible,
body.math-tail-drawing.math-glyph-reforming .math-phrase.is-visible {
  animation: none !important;
}

@keyframes phrase-global-resolve {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  60% {
    opacity: 0.8;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* Once assembled, everything is pinned — no re-entrance from lingering
   burst/void/release container animations, and every char stays put. */
.math-phrase.phrase-assembled.is-visible,
.math-phrase.phrase-assembled.is-visible .phrase-headline,
.math-phrase.phrase-assembled.is-visible .phrase-modes {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.math-phrase.phrase-assembled .phrase-char {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* The reel's final canvas frame is the visible closing message. Keep the DOM
   understudy out of the paint stack until the user initiates the product
   crossfade; this prevents both a duplicate weight and a replacement fade. */
body.math-final-canvas-held .math-phrase .phrase-char {
  opacity: 0 !important;
}

/* The final canvas sits at z=24. Lift the tail shell one plane above it only
   while that canvas is held; its duplicate glyphs remain hidden by the rule
   above, while the later cause thesis can paint cleanly over the canvas. */
body.math-final-canvas-held .math-tail {
  z-index: 25;
}

body.math-glyph-finale .math-phrase.math-phrase--measure {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none;
  /* Measure at the final resting layout so char cells match where the reform
     container (transform:none during warp) actually places them. */
  transform: none !important;
  animation: none !important;
}

body.math-glyph-finale .math-phrase.math-phrase--measure .phrase-char {
  opacity: 0 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

.glyph-finale-canvas {
  position: fixed;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  display: block;
  filter: none !important;
  transform: translateZ(0);
  will-change: opacity;
  transition: opacity 1.6s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.glyph-finale-canvas.is-product-crossfading {
  opacity: 0 !important;
  z-index: 24 !important;
  transition: opacity 1.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) !important;
}

body.math-glyph-shake .glyph-finale-canvas,
body.math-glyph-shake-peak .glyph-finale-canvas {
  filter: none !important;
  /* Mobile hands the live proof to this canvas at shake onset. The normal
     1.6s finale crossfade made the entire beat window nearly invisible. */
  transition: none !important;
}

/* Prep — freeze transitions only. No display/filter/layout changes until shake. */
body.math-glyph-prep .math-instrument,
body.math-glyph-prep .math-stack,
body.math-glyph-prep .math-token,
body.math-glyph-prep .math-instrument-body {
  transition: none !important;
  animation: none !important;
}

/* Freeze instrument layout on shake start — inline-block + crisp snapshot land
   on the same frame as the first transform, never seconds earlier. */
body.math-glyph-capture .math-instrument,
body.math-glyph-capture .math-stack,
body.math-glyph-capture .math-token,
body.math-glyph-capture .math-instrument-body {
  transition: none !important;
  animation: none !important;
}

body.math-glyph-capture .math-instrument {
  filter: none !important;
  --math-blur: 0px;
}

body.math-glyph-capture #math-stack .math-token,
body.math-glyph-capture #math-stack .math-token--sup {
  display: inline-block;
  transform-origin: center center;
  vertical-align: baseline;
}

/* Shake on live DOM tokens — no canvas, no glow halos that read as water blur. */
body.math-glyph-shake .math-instrument,
body.math-glyph-shake .math-instrument-body,
body.math-glyph-shake .math-stack,
body.math-glyph-shake .math-line {
  filter: none !important;
  --math-blur: 0px;
}

body.math-glyph-capture .math-stack,
body.math-glyph-shake .math-stack {
  transition: none !important;
  will-change: transform;
}

body.math-glyph-capture #math-stack .math-row__slot,
body.math-glyph-shake #math-stack .math-row__slot {
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.math-glyph-shake .math-instrument-body::before {
  opacity: 0 !important;
  filter: none !important;
}

body.math-glyph-shake #math-stack .math-token,
body.math-glyph-shake #math-stack .math-token--sup,
body.math-glyph-shake .scene-caption .caption-glyph,
body.math-glyph-capture .scene-caption .caption-glyph {
  /* inline ignores transform — every glyph must be a transformable box. */
  display: inline-block !important;
  filter: none !important;
  text-shadow: none !important;
  transition: none !important;
  will-change: transform;
  opacity: 1 !important;
}

body.math-glyph-shake .scene-caption,
body.math-glyph-capture .scene-caption,
body.math-glyph-shake .scene-caption .caption-layer,
body.math-glyph-capture .scene-caption .caption-layer {
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}

body.math-glyph-shake #math-stack .math-line {
  overflow: visible !important;
}

body.math-glyph-shake #math-stack .math-row {
  grid-template-rows: 1fr !important;
  overflow: visible !important;
}

body.math-glyph-shake .math-token--corrected {
  color: var(--corrected) !important;
  opacity: 1 !important;
}

body.math-glyph-shake .math-token--error {
  color: var(--error) !important;
  opacity: 1 !important;
}

body.math-glyph-shake .math-token--validated,
body.math-glyph-shake .math-token--corrected,
body.math-glyph-shake .math-token--scanning,
body.math-glyph-shake .math-token--error,
body.math-glyph-shake .math-token--uncertain {
  filter: none !important;
  text-shadow: none !important;
}

body.math-glyph-finale #math-stack,
body.math-glyph-finale .math-stack,
body.math-glyph-finale .math-row,
body.math-glyph-finale .math-token,
body.math-glyph-finale .scene-caption,
body.math-glyph-finale .math-status,
body.math-glyph-finale .math-hover-layer {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The inline cinematic paint contract intentionally keeps a live caption
   visible during the proof. Once canvas ownership begins this stronger rule
   retires that DOM copy in the same frame, preventing a duplicate verdict. */
body.landing-home.hero-cinematic-visible.math-glyph-finale .scene-caption.is-visible {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Once the glyph canvas consumes the proof, removing finale animation classes
   must not resurrect the original DOM equation during the closing hold. */
body.math-proof-retired #math-stack,
body.math-proof-retired .math-stack {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep the closing phrase container alive — it lives inside .math-instrument. */
body.math-glyph-finale .math-instrument,
body.math-glyph-finale .math-instrument-body,
body.math-glyph-finale .math-tail {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}

body.math-glyph-finale .math-tail {
  opacity: var(--phrase-opacity, 1) !important;
}

body.math-glyph-finale .math-tail .math-phrase:not(.is-visible) {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.math-glyph-finale .math-tail .math-phrase.is-visible {
  visibility: visible !important;
}

body.math-glyph-finale .math-instrument-body::before {
  opacity: 0 !important;
}

.math-orb {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 26%,
    #ffffff 0%,
    #f4efe4 16%,
    #e8e0cf 42%,
    #d8cdb6 74%,
    #c4b79c 100%
  );
  box-shadow:
    0 0 2px rgba(255, 255, 255, 0.9),
    0 0 5px rgba(232, 224, 206, 0.82),
    0 0 9px rgba(216, 205, 182, 0.55);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.9);
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 6;
}

.math-orb__specular {
  position: absolute;
  top: 0.5px;
  left: 0.5px;
  width: 1px;
  height: 0.75px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.75);
}

.math-orb::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 224, 206, 0.42) 0%, rgba(216, 205, 182, 0.14) 52%, transparent 74%);
  pointer-events: none;
  opacity: 0.88;
}

/* The droplet appears at rest first (this state), so the fall itself never
   has to spend frames fading in — it just drops. */
.math-orb.is-armed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 0.42s ease,
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.math-orb.is-descending {
  opacity: 1;
  will-change: transform, opacity;
  /* Accelerating (gravity) curve — no hold, just a clean continuous fall. */
  animation: orb-descend 1.55s cubic-bezier(0.45, 0.04, 0.7, 0.32) forwards;
}

.math-orb.is-faded {
  opacity: 0;
  transform: translate3d(0, calc(var(--orb-drop) + 4px), 0) scale(0.32);
  animation: none;
  will-change: auto;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes orb-descend {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  86% {
    transform: translate3d(0, calc(var(--orb-drop) * 0.98), 0) scale(0.95);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, var(--orb-drop), 0) scale(0.66);
    opacity: 0.82;
  }
}

.math-phrase {
  margin: 0;
  width: min(92vw, 780px);
  max-width: 92vw;
  white-space: normal;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2.5vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: 0;
  color: rgba(240, 245, 255, 0.96);
  /* Layered dark halo so the white words stay crisp over rippling water. */
  text-shadow:
    0 2px 26px rgba(0, 5, 12, 0.92),
    0 0 12px rgba(0, 5, 12, 0.7),
    0 0 3px rgba(0, 5, 12, 0.6);
  opacity: 0;
  transform: translate3d(0, 4px, 0);
}

.math-phrase.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.math-tail-drawing .math-phrase.is-visible {
  animation: phrase-from-orb 2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

body.math-glyph-finale.math-tail-drawing .math-phrase.is-visible,
body.math-tail-revealed .math-phrase.is-visible {
  animation: phrase-from-void 1.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.math-finale-burst .math-phrase.is-visible:not(.phrase-headline--reforming) {
  animation: phrase-from-release 1s cubic-bezier(0.12, 0.92, 0.18, 1) both;
}

body.math-glyph-warp .math-phrase.is-visible.phrase-headline--reforming {
  animation: none;
}

body.math-finale-burst .math-phrase.is-visible .phrase-modes {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

body.math-finale-burst .math-phrase.is-visible.phrase-modes--in .phrase-modes {
  animation: phrase-modes-in 0.88s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The glyph canvas owns the reveal. Keep the real phrase as a motionless set of
   landing cells while each character hands off; no block fade, blur or second
   subtitle entrance is allowed to replay behind the character resolve. */
body.math-glyph-reforming .math-phrase.is-visible,
body.math-glyph-reforming .math-phrase.is-visible .phrase-headline,
body.math-glyph-reforming .math-phrase.is-visible .phrase-modes {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@keyframes phrase-from-release {
  0% {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.975);
    filter: blur(3px);
  }
  22% {
    opacity: 0.88;
    filter: blur(1px);
  }
  58% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes phrase-modes-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes phrase-from-burst {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.94);
    filter: blur(8px);
  }
  35% {
    opacity: 0.92;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes phrase-from-void {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes phrase-from-orb {
  0% {
    opacity: 0;
    transform: translate3d(0, 5px, 0);
  }
  35% {
    opacity: 0.45;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Final headline — the focus of the whole reveal: the largest, brightest type,
   anchored by the LogNormal wordmark. Blooms in on the water impact. */
.math-phrase .phrase-headline {
  display: block;
  font-family: var(--font-ui);
  font-size: clamp(1.6rem, 3.8vw, 3rem);
  line-height: 1.12;
  letter-spacing: 0;
  /* The thesis statement — logo-bright, legibility halo against lit water. */
  color: var(--hero-primary);
  text-shadow:
    0 2px 20px rgba(0, 5, 12, 0.85),
    0 0 3px rgba(0, 5, 12, 0.6);
}

/* Supporting modes line beneath — smaller, the three verbs lightly accented. */
.math-phrase .phrase-modes {
  display: block;
  margin-top: clamp(0.7rem, 2.1vh, 1.25rem);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.1vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: 0.002em;
  /* Connector / italic words — quiet warm gray, clearly the second read. */
  color: var(--hero-secondary);
  text-shadow:
    0 1px 14px rgba(0, 5, 12, 0.8),
    0 0 5px rgba(0, 5, 12, 0.5);
}

/* Cause thesis enters only after the proof has resolved and the persistent
   equation plane is already visible. It is outside the glyph target phrase,
   so it cannot perturb character landing positions or create a duplicate. */
.finale-cause {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 25;
  width: min(88vw, 820px);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.45rem);
  font-style: normal;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-align: center;
  color: rgba(247, 249, 255, 0.97);
  text-shadow:
    0 2px 24px rgba(0, 5, 12, 0.95),
    0 0 5px rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, calc(-50% + 10px), 0);
  transition:
    opacity 1.05s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

body.finale-cause-visible .finale-cause {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
}

body.finale-cause-exiting .finale-cause {
  opacity: 0;
  transform: translate3d(-50%, calc(-50% - 7px), 0);
}

body.finale-product-crossfade .finale-cause {
  opacity: 0;
  transform: translate3d(-50%, calc(-50% - 7px), 0);
  transition-duration: 1.45s;
}

.finale-cause__context,
.finale-cause__claim {
  display: block;
}

.finale-cause__context {
  color: rgba(237, 242, 251, 0.92);
}

.finale-cause__claim {
  margin-top: 0.12em;
  color: var(--corrected-mint);
  font-size: 1.12em;
  text-shadow:
    0 0 10px rgba(159, 255, 208, 0.3),
    0 2px 24px rgba(0, 5, 12, 0.95);
}

.math-phrase .phrase-mode {
  /* "Audit" / "Articulate" / "Apply" — per-mode accent, no heavy glow so the
     line never overpowers the thesis above it. Editorial, not a badge row. */
  font-style: normal;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--hero-secondary);
  text-shadow: 0 1px 12px rgba(0, 5, 12, 0.75);
}

.math-phrase .phrase-mode--audit {
  color: var(--calibration-cyan);
}

.math-phrase .phrase-mode--articulate {
  color: var(--mode-articulate);
}

.math-phrase .phrase-mode--apply {
  color: var(--mode-apply);
}

.math-phrase .phrase-brand {
  /* "Log" — solid near-white, same weight as the rest of the line. */
  font-weight: 600;
  color: inherit;
  text-shadow: inherit;
}

.math-phrase .phrase-accent {
  color: inherit;
  text-shadow: inherit;
  transition:
    color 0.35s ease,
    text-shadow 0.45s ease,
    filter 0.45s ease;
}

.math-phrase .phrase-reasoning {
  color: inherit;
  text-shadow: inherit;
  transition:
    color 0.4s ease,
    text-shadow 0.5s ease;
}

.math-phrase .phrase-accent.is-blooming {
  color: rgba(125, 249, 255, 0.98);
  text-shadow:
    0 0 12px rgba(125, 249, 255, 0.75),
    0 0 28px rgba(125, 249, 255, 0.35),
    0 2px 20px rgba(0, 5, 12, 0.85);
}

body.math-glyph-release .math-phrase .phrase-accent.is-blooming,
body.math-glyph-warp .math-phrase .phrase-accent.is-blooming {
  animation: accent-ignite 1.05s cubic-bezier(0.12, 0.92, 0.18, 1) both;
}

.math-phrase .phrase-reasoning.is-blooming {
  color: rgba(255, 252, 245, 1);
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.45),
    0 2px 18px rgba(0, 5, 12, 0.8);
}

body.math-glyph-release .math-phrase .phrase-reasoning.is-blooming,
body.math-glyph-warp .math-phrase .phrase-reasoning.is-blooming {
  animation: reasoning-reveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

@keyframes accent-ignite {
  0% {
    color: rgba(241, 238, 230, 0.92);
    text-shadow: 0 2px 20px rgba(0, 5, 12, 0.85);
    filter: brightness(1.5);
  }
  35% {
    color: rgba(125, 249, 255, 1);
    text-shadow:
      0 0 18px rgba(125, 249, 255, 0.9),
      0 0 36px rgba(125, 249, 255, 0.45);
    filter: brightness(1.2);
  }
  100% {
    color: rgba(125, 249, 255, 0.98);
    text-shadow:
      0 0 12px rgba(125, 249, 255, 0.75),
      0 0 28px rgba(125, 249, 255, 0.35),
      0 2px 20px rgba(0, 5, 12, 0.85);
    filter: brightness(1);
  }
}

@keyframes reasoning-reveal {
  0% {
    color: rgba(241, 238, 230, 0.75);
    text-shadow: 0 2px 18px rgba(0, 5, 12, 0.8);
    filter: brightness(1.35);
  }
  40% {
    color: rgba(255, 252, 245, 1);
    text-shadow:
      0 0 14px rgba(255, 255, 255, 0.55),
      0 2px 18px rgba(0, 5, 12, 0.8);
  }
  100% {
    color: rgba(255, 252, 245, 1);
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.45),
      0 2px 18px rgba(0, 5, 12, 0.8);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .math-orb.is-descending,
  .math-orb.is-faded {
    animation: none;
    will-change: auto;
  }

  .math-orb.is-faded {
    transform: translate3d(0, calc(var(--orb-drop) + 4px), 0);
    opacity: 0;
  }

  body.math-tail-drawing .math-phrase.is-visible {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .math-phrase {
    transition: opacity 0.6s ease;
    transform: none;
  }

  body.math-finale-burst--reduced .math-phrase.is-visible {
    animation: phrase-from-release-reduced 0.75s ease both;
  }

  /* Time-warp reform → clean fade only; no blur, drift, or per-char stagger. */
  body.math-glyph-warp .phrase-headline,
  body.math-glyph-reforming .phrase-headline,
  body.math-glyph-warp .phrase-modes,
  body.math-glyph-reforming .phrase-modes,
  body.math-glyph-reforming .math-phrase .phrase-char,
  body.math-glyph-reforming .math-phrase .phrase-char:not(.is-set),
  .math-phrase .phrase-char.is-set {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.math-glyph-suspend .scene-shell,
  body.math-glyph-suspend .hero-chrome,
  body.math-glyph-reforming .scene-shell,
  body.math-glyph-reforming .hero-chrome {
    filter: none;
    transition: none;
  }

  @keyframes phrase-from-release-reduced {
    0% {
      opacity: 0;
      transform: translate3d(0, 10px, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }

  body.math-glyph-lull .scene-shell,
  body.math-glyph-lull .hero-chrome,
  body.math-finale-burst .scene-shell,
  body.math-finale-burst .hero-chrome {
    filter: none;
    transition: none;
  }

  .math-phrase .phrase-accent.is-blooming,
  .math-phrase .phrase-reasoning.is-blooming {
    animation: none;
  }
}

/* Inline reasoning reveal: written in the same air as the math, not as UI.
   Each line's explanation has four layers that build on each other:
   heading → body → hidden work → plain-language restatement. */

/* Centred two-pane frame — math left, explanation right, divider at 50%.
   Layer is a direct body child so it escapes math-instrument perspective. */
.math-hover-layer {
  position: fixed;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  overflow: visible;
}

/* The framing rectangle is conceptual — it only defines the centred two-pane
   geometry and the pointer-exit region. Nothing about it is drawn. */
.math-hover-frame {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  border: 0;
  background: none;
  box-shadow: none;
}

.math-hover-frame__divider {
  display: none;
}

.math-hover-note {
  position: fixed;
  z-index: 2;
  width: min(var(--hover-note-w, 380px), calc(100vw - 52px));
  margin: 0;
  pointer-events: none;
  font-family: var(--font-display);
  line-height: 1.38;
  letter-spacing: 0;
  color: var(--hero-secondary);
  /* Dark legibility halo only — no cyan glow bleeding onto the body copy. */
  text-shadow: 0 2px 18px rgba(0, 4, 10, 0.9);
  opacity: 0;
  /* Pure fade — NO transform and NO left/top transition, so the copy never
     slides in or out (from the top or anywhere). Geometry is set instantly;
     only opacity animates. */
  transition: opacity 0.5s ease;
}

.math-hover-note.is-visible {
  opacity: 1;
}

/* In-place copy crossfade when moving between lines (driven by JS timing).
   The JS swaps the text only after this fade-out fully completes, so the
   reflow to differently-sized copy is never visible — pure fade out → in. */
.math-hover-note__heading,
.math-hover-note__body,
.math-hover-note__work,
.math-hover-note__plain {
  transition: opacity 0.5s ease;
}

.math-hover-note.is-swapping .math-hover-note__heading,
.math-hover-note.is-swapping .math-hover-note__body,
.math-hover-note.is-swapping .math-hover-note__work,
.math-hover-note.is-swapping .math-hover-note__plain {
  opacity: 0;
}

.math-hover-note::before {
  content: none;
}

.math-hover-note__close {
  display: none;
}

/* ── Note content layers ─────────────────────────────────────────────── */

.math-hover-note__heading {
  margin: 0 0 8px;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(0.7rem, 0.92vw, 0.8rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Brand cyan accent — flat, matched to .phrase-accent and the path filament. */
  color: var(--calibration-cyan);
  text-shadow: none;
}

.math-hover-note__body {
  margin: 0 0 10px;
  font-style: italic;
  font-size: clamp(0.92rem, 1.28vw, 1.1rem);
  line-height: 1.36;
  /* Major explanatory sentence — secondary read, no glow. */
  color: rgba(230, 235, 237, 0.76);
}

.math-hover-note__work {
  margin: 0 0 10px;
  font-family: var(--font-mono, "SF Mono", "Menlo", monospace);
  font-style: normal;
  font-size: clamp(0.7rem, 0.88vw, 0.78rem);
  line-height: 1.52;
  letter-spacing: 0.02em;
  color: rgba(170, 185, 195, 0.62);
  border-left: 1px solid rgba(125, 249, 255, 0.12);
  padding-left: 10px;
}

.math-hover-note__plain {
  margin: 0;
  font-style: normal;
  font-size: clamp(0.78rem, 1.02vw, 0.9rem);
  line-height: 1.34;
  /* Paragraph copy — readable but tertiary. */
  color: rgba(190, 198, 204, 0.58);
}

/* Empty layers collapse so the note height matches content exactly */
.math-hover-note__heading:empty,
.math-hover-note__body:empty,
.math-hover-note__work:empty,
.math-hover-note__plain:empty {
  display: none;
}

/* ── Below variant (narrow viewports) ─────────────────────────────────── */

.math-hover-note--below {
  max-width: calc(100vw - 48px);
  text-align: left;
}

/* ── Paired variant (desktop: note sits beside math as one composition) ── */

.math-hover-note--paired {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

.math-hover-note--paired .math-hover-note__work {
  border-left: 0;
  padding-left: 0;
}

/* ── Selected math line glow ──────────────────────────────────────────── */

body.math-line-hover-active .math-row.is-visible .math-line:not(.is-hovered) {
  opacity: 0.48;
  filter: drop-shadow(0 0 0 transparent);
  transition:
    opacity 0.36s ease,
    filter 0.36s ease;
}

body.math-line-hover-active .math-row.is-visible .math-line.is-hovered {
  color: rgba(252, 250, 245, 0.99);
  filter:
    drop-shadow(0 0 3px rgba(125, 249, 255, 0.92))
    drop-shadow(0 0 12px rgba(125, 249, 255, 0.45))
    drop-shadow(0 0 24px rgba(125, 249, 255, 0.18));
  transition:
    opacity 0.36s ease,
    filter 0.36s ease,
    color 0.36s ease;
}

@media (prefers-reduced-motion: reduce) {
  .math-hover-frame {
    transition: opacity 0.24s ease;
  }

  .math-hover-note {
    transition: opacity 0.24s ease;
  }
}

@media (max-width: 720px) {
  .math-hover-note--below {
    font-size: clamp(0.78rem, 3.1vw, 0.96rem);
    line-height: 1.28;
    text-align: center;
  }
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .math-hover-layer {
    z-index: 1200;
  }

  .math-hover-note.math-hover-note--mobile {
    left: 16px !important;
    right: 16px;
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    max-height: min(48dvh, 360px);
    height: auto !important;
    padding: 20px 20px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    background: rgba(4, 8, 12, 0.94);
    border: 1px solid rgba(232, 230, 223, 0.14);
    border-radius: 16px;
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.56);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-shadow: none;
  }

  .math-hover-note--mobile .math-hover-note__close {
    display: block;
    margin: -4px 0 12px auto;
    padding: 8px 0 8px 16px;
    border: 0;
    background: transparent;
    color: rgba(232, 230, 223, 0.56);
    font: 500 0.65rem/1 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .math-hover-note--mobile .math-hover-note__heading {
    padding-right: 44px;
    font-size: 0.72rem;
  }

  .math-hover-note--mobile .math-hover-note__body {
    font-size: clamp(1rem, 4.4vw, 1.15rem);
  }

  .math-hover-note--mobile .math-hover-note__work {
    font-size: clamp(0.72rem, 3.1vw, 0.82rem);
  }

  .math-hover-note--mobile .math-hover-note__plain {
    font-size: clamp(0.86rem, 3.7vw, 1rem);
  }

  body.math-touch-inspection-active .math-stack {
    --math-stack-hover-x: 0px !important;
  }

  body.math-touch-inspection-active .math-line {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

.math-line {
  position: relative;
  z-index: 6;
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.28rem, 3vw, 2.35rem);
  line-height: 1.14;
  white-space: nowrap;
  letter-spacing: 0;
  text-align: center;
  /* The line is fully present; per-token color carries the dim/scan/validated
     states so the white scan pulse can read clearly against unscanned tokens. */
  opacity: 1;
  cursor: default;
  outline: none;
  filter: none;
  pointer-events: auto;
}

body:not(.hero-intro-complete) .math-line,
body.hero-math-inert .math-line {
  pointer-events: none;
}

.math-line:focus-visible {
  outline: none;
}

body.math-line-hover-active .math-row.is-visible > .math-line {
  opacity: 0.62;
}

body.math-line-hover-active .math-row.is-visible > .math-line.is-hovered {
  opacity: 1;
  transform: translateY(0) scale(1.015);
  /* No bloom — inspection is signalled purely by the glyphs turning pure white
     (see the .is-hovered .math-token rule below). */
  filter: none;
}

/* The inspected line's glyphs go pure bright white (not the warm validated
   cream) so the bloom around them reads as clean white, not off-white. The
   white line-glow above supplies the halo, so the tokens carry no tint. */
body.math-line-hover-active .math-row.is-visible > .math-line.is-hovered .math-token {
  color: #ffffff !important;
  filter: none !important;
}

.math-line-wide {
  font-size: clamp(0.95rem, 2.05vw, 1.7rem);
}

.math-line-final {
  font-size: clamp(1.35rem, 3.2vw, 2.55rem);
}

body.math-complete .math-line-final.math-line--resolved .math-token:not(.math-token--corrected) {
  color: rgba(248, 246, 239, 0.96);
  filter:
    drop-shadow(0 0 2px rgba(245, 241, 232, 0.45))
    drop-shadow(0 0 6px rgba(125, 249, 255, 0.14));
}

body.math-complete .math-token--corrected,
body.math-complete .math-line-final.math-line--resolved .math-token--corrected {
  color: var(--corrected);
  filter: drop-shadow(0 0 2px rgba(159, 255, 208, 0.28));
  opacity: 1;
}

/* —— Contradiction-state settle (pre-lull) ———————————————————————————————
   Red reasoning stays red; green accidental results stay mint; integration white. */
body.math-proof-contradiction .math-token--validated {
  color: rgba(248, 246, 239, 0.96);
  filter:
    drop-shadow(0 0 2px rgba(245, 241, 232, 0.45))
    drop-shadow(0 0 5px rgba(125, 249, 255, 0.12));
  opacity: 1;
}

body.math-proof-contradiction .math-token--error {
  color: var(--error);
  filter:
    drop-shadow(0 0 2px rgba(255, 74, 74, 0.85))
    drop-shadow(0 0 6px rgba(255, 74, 74, 0.38));
  opacity: 1;
  transform: none;
}

body.math-proof-contradiction .math-token--passed {
  color: var(--corrected-mint);
  filter:
    drop-shadow(0 0 2px rgba(159, 255, 208, 0.75))
    drop-shadow(0 0 5px rgba(159, 255, 208, 0.32));
  opacity: 1;
}

body.math-proof-contradiction .math-token--passed-strong {
  color: rgba(186, 255, 220, 0.98);
  filter:
    drop-shadow(0 0 3px rgba(159, 255, 208, 0.95))
    drop-shadow(0 0 8px rgba(159, 255, 208, 0.45));
  opacity: 1;
}

/* —— Repaired-state settle (post-typewriter, pre-lull) ————————————————
   Calm valid proof: cream/white for settled math, restrained mint for repairs.
   Overrides the environmental dimming until the music lull arms the shake. */
body.math-proof-resolved .math-line--dependent .math-token,
body.math-proof-resolved .math-token--error,
body.math-proof-resolved .math-token--uncertain {
  color: inherit !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.math-proof-resolved .math-token--validated {
  color: rgba(248, 246, 239, 0.96);
  filter:
    drop-shadow(0 0 2px rgba(245, 241, 232, 0.45))
    drop-shadow(0 0 5px rgba(125, 249, 255, 0.12));
  opacity: 1;
}

body.math-proof-resolved .math-token--corrected {
  color: rgba(175, 245, 214, 0.94);
  filter: drop-shadow(0 0 2px rgba(159, 255, 208, 0.22));
  opacity: 1;
}

body.math-proof-resolved .math-row[data-row="problem"] .math-token--validated {
  color: rgba(255, 250, 240, 0.94);
}

body.math-proof-resolved .math-row[data-row="final"] .math-token--validated-afterglow {
  color: rgba(252, 250, 245, 0.98);
  filter:
    drop-shadow(0 0 2px rgba(245, 241, 232, 0.5))
    drop-shadow(0 0 7px rgba(159, 255, 208, 0.16));
  transition: color 0.52s ease, filter 0.52s ease;
}

/* —— Resting hierarchy (proof settled, no line inspected) ——————————————
   Once the animation finishes the math becomes environmental evidence, not a
   second headline. Step each row down in brightness so the hero sentence is
   the unmistakable first read. Inspecting a line (.math-line-hover-active)
   exits this state and restores full contrast for the line under focus. */
body.math-complete:not(.math-proof-resolved):not(.math-proof-contradiction):not(.math-line-hover-active) .math-row[data-row="problem"] .math-token {
  color: rgba(255, 250, 240, 0.88) !important;
  filter: drop-shadow(0 0 4px rgba(125, 249, 255, 0.12)) !important;
}

body.math-complete:not(.math-proof-resolved):not(.math-proof-contradiction):not(.math-line-hover-active) .math-row[data-row="step"] .math-token:not(.math-token--error),
body.math-complete:not(.math-proof-resolved):not(.math-proof-contradiction):not(.math-line-hover-active) .math-row[data-row="mid"] .math-token:not(.math-token--passed),
body.math-complete:not(.math-proof-resolved):not(.math-proof-contradiction):not(.math-line-hover-active) .math-row[data-row="integrate"] .math-token,
body.math-complete:not(.math-proof-resolved):not(.math-proof-contradiction):not(.math-line-hover-active) .math-row[data-row="evaluate"] .math-token {
  color: rgba(200, 198, 192, 0.44) !important;
  filter: none !important;
}

body.math-complete:not(.math-proof-resolved):not(.math-proof-contradiction):not(.math-line-hover-active) .math-row[data-row="rule"] .math-token:not(.math-token--error) {
  color: rgba(232, 230, 223, 0.52) !important;
  filter: none !important;
}

body.math-complete:not(.math-proof-resolved):not(.math-proof-contradiction):not(.math-line-hover-active) .math-row[data-row="final"] .math-token:not(.math-token--passed-strong) {
  color: rgba(232, 230, 223, 0.58) !important;
  filter: drop-shadow(0 0 3px rgba(125, 249, 255, 0.1)) !important;
}

body.math-complete:not(.math-line-hover-active) .math-token--error {
  color: rgba(255, 74, 74, 0.72) !important;
  filter: drop-shadow(0 0 4px rgba(255, 74, 74, 0.22)) !important;
  opacity: 1 !important;
  transform: none !important;
}

body.math-complete:not(.math-line-hover-active) .math-token--passed {
  color: rgba(159, 255, 208, 0.72) !important;
  filter: drop-shadow(0 0 4px rgba(159, 255, 208, 0.22)) !important;
  opacity: 1 !important;
}

body.math-complete:not(.math-line-hover-active) .math-token--passed-strong,
body.math-complete:not(.math-line-hover-active) .math-token--corrected {
  color: rgba(175, 245, 214, 0.82) !important;
  filter: drop-shadow(0 0 5px rgba(159, 255, 208, 0.28)) !important;
  opacity: 1 !important;
}

/* —— Smooth row reveal ————————————————————————————————————————————
   Each math line lives in a .math-row grid wrapper. Animating
   grid-template-rows 0fr → 1fr gives a true, proportional height ease
   (no max-height accordion jitter), so lines slide the stack apart
   buttery-smooth. The inner line fades + lifts on the same curve. */
.js .math-row {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  margin-top: 0;
  transition:
    grid-template-rows var(--row-dur, 1.2s) var(--math-reveal-ease),
    margin-top var(--row-dur, 1.2s) var(--math-reveal-ease);
}

.js .math-row > .math-line,
.js .math-row > .math-row__slot {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity calc(var(--row-dur, 1.2s) * 0.8) var(--math-reveal-ease) calc(var(--row-dur, 1.2s) * 0.16),
    transform calc(var(--row-dur, 1.2s) * 0.8) var(--math-reveal-ease) calc(var(--row-dur, 1.2s) * 0.16);
}

.js .math-row.is-visible {
  grid-template-rows: 1fr;
  margin-top: var(--row-gap, clamp(0.55rem, 1.75vh, 1rem));
}

.js .math-row.is-visible > .math-line,
.js .math-row.is-visible > .math-row__slot {
  opacity: 1;
  transform: translateY(0);
}

/* Once the row has finished opening, stop clipping so token glow and the
   typewriter caret are never cut off vertically. */
.js .math-row.row-open > .math-line,
.js .math-row.row-open > .math-row__slot {
  overflow: visible;
  transition:
    opacity 0.44s ease,
    filter 0.44s ease,
    transform 0.44s ease;
}

/* Repair slot — failed line and green correction share one aligned position. */
.math-row__slot {
  position: relative;
  width: 100%;
}

.math-line-repair {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.math-line-repair.is-repair-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.math-row__slot > .math-line-failed.is-failed-clearing {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
}

.math-row__slot > .math-line-failed.is-failed-retired {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 auto auto 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  z-index: 0;
}

.math-line-repair.is-repair-settled {
  position: relative;
}

.math-token--error-faded {
  opacity: 0.35 !important;
  filter:
    drop-shadow(0 0 2px rgba(255, 74, 74, 0.35))
    drop-shadow(0 0 4px rgba(255, 74, 74, 0.18)) !important;
  transform: none !important;
}

.math-token--reveal-pending {
  opacity: 0 !important;
  transform: translate3d(-14px, 5px, 0) !important;
  filter: blur(2px) !important;
}

.math-line-repair .math-token {
  transition:
    opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.42s ease,
    color 0.2s ease !important;
}

body.math-scanning .math-row.opening-drawer-row {
  --row-dur: 0.78s;
}

body.math-scanning .math-row.opening-drawer-row:not(.is-visible) > .math-line,
body.math-scanning .math-row.opening-drawer-row:not(.is-visible) > .math-row__slot {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, -0.58em, 0);
}

body.math-scanning .math-row.opening-drawer-row.is-visible > .math-line,
body.math-scanning .math-row.opening-drawer-row.is-visible > .math-row__slot {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
  transition:
    clip-path 0.78s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.84s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.18s ease !important;
}

@keyframes passed-reconnect-pulse {
  0%,
  100% {
    filter:
      drop-shadow(0 0 2px rgba(159, 255, 208, 0.75))
      drop-shadow(0 0 5px rgba(159, 255, 208, 0.32));
  }
  50% {
    filter:
      drop-shadow(0 0 4px rgba(159, 255, 208, 0.95))
      drop-shadow(0 0 10px rgba(159, 255, 208, 0.48));
  }
}

.math-token--passed-reconnect {
  animation: passed-reconnect-pulse 0.4s ease-in-out;
}

/* Per-row pacing + spacing — the answer takes a modest lift above integrate. */
.js .math-row[data-row="problem"] {
  --row-dur: 0.9s;
  --row-gap: 0;
}
.js .math-row[data-row="final"] {
  --row-dur: 0.82s;
  --row-gap: clamp(0.55rem, 1.7vh, 1rem);
  position: relative;
}
.js .math-row[data-row="rule"] {
  --row-dur: 0.76s;
}
.js .math-row[data-row="step"] {
  --row-dur: 0.82s;
}
.js .math-row[data-row="simplify"] {
  --row-dur: 0.76s;
}

.js .math-row[data-row="simplify"].two-row-slide > .math-line-simplify {
  transform: translate3d(0, -0.72em, 0);
  transition:
    opacity 0.46s cubic-bezier(0.16, 1, 0.3, 1) 0.08s,
    transform 0.76s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.js .math-row[data-row="simplify"].two-row-slide.is-visible > .math-line-simplify {
  transform: translate3d(0, 0, 0);
}
.js .math-row[data-row="mid"],
.js .math-row[data-row="evaluate"] {
  --row-dur: 0.9s;
}
.js .math-row[data-row="integrate"] {
  --row-dur: 0.9s;
  --row-gap: clamp(0.72rem, 2vh, 1.15rem);
}

/* Lead line (the problem) — a touch smaller than the final answer. */
.math-line-lead {
  font-size: clamp(1.15rem, 2.65vw, 2.05rem);
}

/* Opening proof — restore hero presence for the taller seven-line stack. */
body.landing-home.hero-cinematic-visible:not(.hero-intro-complete):not(.lake-live) .math-line-lead {
  font-size: clamp(1.28rem, 3vw, 2.35rem) !important;
}

body.landing-home.hero-cinematic-visible:not(.hero-intro-complete):not(.lake-live) .math-line-wide {
  font-size: clamp(1.08rem, 2.4vw, 1.95rem) !important;
}

body.landing-home.hero-cinematic-visible:not(.hero-intro-complete):not(.lake-live) .math-line-final {
  font-size: clamp(1.45rem, 3.5vw, 2.85rem) !important;
}

body.landing-home.hero-cinematic-visible:not(.hero-intro-complete):not(.lake-live) .scene-caption {
  width: min(92vw, 760px);
  font-size: clamp(1.28rem, 3.1vw, 2.25rem) !important;
}

body.landing-home.hero-cinematic-visible:not(.hero-intro-complete):not(.lake-live) .math-instrument {
  padding-bottom: clamp(12px, 3vh, 40px);
}

/* Raised exponent inside a chunk; inherits the chunk's state color + glow. */
.mexp {
  display: inline-block;
  font-size: 0.62em;
  transform: translateY(-0.5em);
}

/* —— Definite integral — the prestige silhouette of the opening problem. ——
   A tall, light ∫ with small stacked bounds to its right. Colour + glow are
   inherited from the .math-token state (validated / scanning), so the integral
   reads as system-validated, never as the flaw. */
.math-line-integral {
  letter-spacing: 0.012em;
  line-height: 1.6;
}

.math-token--integral {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  margin-right: 0.08em;
  line-height: 1;
}

.math-integral-sign {
  display: inline-block;
  font-size: 1.5em;
  line-height: 1;
  font-style: italic;
  font-weight: 300;
  align-self: center;
}

.math-bounds {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  margin-left: 0.06em;
  font-size: 0.42em;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  padding: 0.1em 0;
}

.math-bounds__upper {
  display: block;
}

.math-bounds__lower {
  display: block;
}

/* During the shake/capture the token is forced to inline-block; keep the sign and
   bounds legible by letting the inner spans flow inline. */
body.math-glyph-capture .math-token--integral,
body.math-glyph-shake .math-token--integral {
  white-space: nowrap;
}

/* Dependency failure: the lines that lean on the invalid rule inherit a quiet,
   tainted red — contamination propagating down the chain, not an alarm. The
   actual flaw token (.math-token--error) stays the loudest, sharpest red. */
.math-line--dependent .math-token {
  color: rgba(255, 74, 74, 0.5);
  filter: drop-shadow(0 0 3px rgba(255, 74, 74, 0.2));
  transition: color 0.85s ease, filter 0.85s ease;
}

/* Inspection readout — instrument status copy, not marketing. */
.math-status {
  margin: clamp(0.7rem, 2.2vh, 1.2rem) 0 0;
  min-height: 1.4em;
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: clamp(0.68rem, 1.35vw, 0.82rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 230, 223, 0.62);
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.65s ease, transform 0.65s ease, color 0.35s ease;
  pointer-events: none;
}

.math-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.math-status.is-error {
  color: var(--error);
  text-shadow: 0 0 12px rgba(255, 74, 74, 0.3);
}

/* —— Narrative caption layer ——————————————————————————————————————
   The voice of the opening. Floats above the math instrument; JS swaps its
   text per beat and fades it in/out. Editorial serif, distinct from the
   monospace instrument status below the stack. */
.scene-caption {
  position: absolute;
  left: 50%;
  bottom: calc(100% + clamp(12px, 3.4vh, 34px));
  transform: translate(-50%, 8px);
  width: min(88vw, 700px);
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.18rem, 2.9vw, 2.1rem);
  line-height: 1.28;
  letter-spacing: 0;
  color: rgba(232, 238, 248, 0.94);
  text-shadow:
    0 2px 24px rgba(0, 5, 12, 0.9),
    0 0 10px rgba(0, 5, 12, 0.62),
    0 0 3px rgba(0, 5, 12, 0.5);
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  z-index: 7;
  display: grid;
  place-items: center;
}

.scene-caption.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.scene-caption.is-visible.is-changing {
  opacity: 0.46;
  transform: translate(-50%, 2px);
  transition-duration: 0.14s;
}

/* Editorial caption choreography. Copy changes share one fixed anchor: the old
   thought releases gently upward while the next resolves through it. */
.caption-layer {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
  backface-visibility: hidden;
}

.caption-layer--current {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.caption-layer--opening {
  opacity: 0;
  animation: caption-opening-resolve 0.92s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.caption-layer--incoming {
  opacity: 0;
  transform: translate3d(0, 0.24em, 0);
  filter: blur(3px);
  transition:
    opacity 0.54s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.68s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.54s ease;
}

.caption-layer--incoming.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.caption-layer--outgoing {
  opacity: 0;
  transform: translate3d(0, -0.16em, 0);
  filter: blur(2.5px);
  transition:
    opacity 0.46s cubic-bezier(0.4, 0, 1, 1),
    transform 0.58s cubic-bezier(0.4, 0, 1, 1),
    filter 0.46s ease;
}

@keyframes caption-opening-resolve {
  from {
    opacity: 0;
    transform: translate3d(0, 0.22em, 0);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

.caption-glyph {
  display: inline-block;
  transform-origin: center center;
}

.caption-word {
  display: inline-block;
  white-space: nowrap;
}

/* Intro thesis — lead centers alone, then tail unfurls as the row re-centers. */
.scene-caption.caption-intro {
  text-align: center;
  overflow: visible;
  width: min(94vw, 700px);
  padding-inline: 0.35em;
}

.caption-intro__row {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: 100%;
}

.caption-intro__lead {
  flex: 0 0 auto;
}

.caption-intro__tail {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
}

.scene-caption.caption-intro--split .caption-drawer-letter {
  transition: none;
  animation: captionDrawerOpen 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--letter-i, 0) * 115ms);
}

.scene-caption.caption-intro--split .caption-drawer-letter__ink {
  animation: captionInkReveal 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--letter-i, 0) * 115ms);
}

@keyframes captionDrawerOpen {
  from {
    width: 0;
  }

  to {
    width: var(--drawer-w, 0.5em);
  }
}

@keyframes captionInkReveal {
  from {
    opacity: 0;
    transform: translateX(-0.42em);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* One letter at a time — width opens like a card pulled from behind the lead. */
.caption-drawer-letter {
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: baseline;
  transition: width 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.caption-drawer-letter__ink {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateX(-0.42em);
  transition:
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}

.caption-drawer-letter__ink--answer {
  color: #f4f8ff;
}

.caption-drawer-letter.is-drawn {
  width: var(--drawer-w, 0.5em);
}

.caption-drawer-letter.is-drawn .caption-drawer-letter__ink {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 360px) {
  .scene-caption.caption-intro .caption-intro__row {
    transform: scale(min(1, calc((100vw - 28px) / 320px)));
    transform-origin: center center;
  }
}

/* Caption emphasis — colour reinforces the proof logic only:
   answers = cold white, work = letter-by-letter glow (persists), passed = green, failed = red. */
.scene-caption .caption-emphasis--answer {
  /* "answers" — a touch brighter and colder than the surrounding serif. */
  color: #f4f8ff;
  text-shadow:
    0 0 16px rgba(244, 248, 255, 0.22),
    0 1px 14px rgba(0, 5, 12, 0.8);
}

.scene-caption .caption-emphasis--work {
  display: inline-block;
  text-shadow: none;
}

/* Per-letter glow — sequenced in JS; pure white, no cyan fringe. */
.scene-caption .caption-emphasis--work .caption-glow-letter {
  display: inline-block;
  color: rgba(232, 238, 248, 0.72);
  text-shadow: none;
  filter: none;
  transform: translateY(0);
  transition:
    color 0.08s ease,
    filter 0.08s ease,
    transform 0.08s ease;
}

.scene-caption .caption-emphasis--work .caption-glow-letter.is-lit {
  color: #ffffff;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.88))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.28));
  transform: translateY(-0.02em);
}

/* "passed" — same mint and glow as the corrected u'v token in the proof. */
.scene-caption .caption-emphasis--pass {
  font-style: normal;
  color: var(--corrected-mint);
  filter:
    drop-shadow(0 0 2px rgba(159, 255, 208, 0.9))
    drop-shadow(0 0 5px rgba(159, 255, 208, 0.38));
}

.scene-caption .caption-emphasis--fail {
  font-style: normal;
  color: var(--error-red);
  text-shadow: 0 1px 14px rgba(0, 5, 12, 0.8);
}

.scene-caption .caption-emphasis--audit {
  font-style: normal;
  color: var(--calibration-cyan);
  text-shadow: 0 0 14px rgba(125, 249, 255, 0.3);
}

.scene-caption .caption-emphasis--result {
  color: var(--corrected-mint);
  text-shadow: 0 0 13px rgba(159, 255, 208, 0.26);
}

.scene-caption .caption-emphasis--reasoning {
  color: var(--mode-articulate);
  text-shadow: 0 0 13px rgba(255, 200, 61, 0.24);
}

/* Verdict headline — soft white until pass/fail emphasis animates in. */
.scene-caption .caption-verdict-pending {
  font-style: normal;
  color: rgba(232, 238, 248, 0.92);
  text-shadow:
    0 0 16px rgba(244, 248, 255, 0.18),
    0 1px 14px rgba(0, 5, 12, 0.8);
  transition:
    color 0.45s ease,
    filter 0.45s ease,
    text-shadow 0.45s ease;
}

/* Final answer row — the value and "correct" pill share one inline cluster. */
.math-final-cluster {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  vertical-align: baseline;
}

.math-answer-body {
  display: inline-block;
  flex: 0 0 auto;
}

.math-answer-body.is-animating {
  will-change: transform;
}

.math-final-cluster.is-tag-settled .math-answer-body {
  will-change: auto;
}

/* Hidden from layout until the enter sequence starts. */
.math-answer-tag:not(.is-visible):not(.is-settled) {
  display: none;
}

/* FLIP probe — occupies final layout without being seen. */
.math-answer-tag.is-layout-probe {
  visibility: hidden;
}

/* "correct" chip — in flow during FLIP; shell unfurls via WAAPI. */
.math-answer-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  margin-left: clamp(8px, 1.4vw, 16px);
  overflow: hidden;
  vertical-align: middle;
}

/* "correct" chip — an official verdict stamp, not a reward badge. Restrained
   mint fill + border, warm-white text, faint mint shadow. Bureaucratic, calm. */
.math-answer-tag__shell {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0.16em 0.62em 0.12em;
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 0.4em;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(159, 255, 208, 0.08);
  border: 1px solid rgba(159, 255, 208, 0.32);
  border-radius: 999px;
  color: rgba(241, 238, 230, 0.86);
  box-shadow: 0 0 10px rgba(159, 255, 208, 0.08);
  white-space: nowrap;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    color 0.45s ease,
    border-color 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease;
}

.math-answer-tag.is-settled .math-answer-tag__shell {
  transform: none;
}

/* Void — the verdict is revoked. Precise and harsh: fill drains, a crisp
   strikethrough, text dims to a struck-out record. No cartoon, no bounce. */
.math-answer-tag.is-void .math-answer-tag__shell {
  background: transparent;
  color: rgba(232, 230, 223, 0.4);
  border-color: rgba(232, 230, 223, 0.2);
  box-shadow: none;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .scene-caption,
  .math-answer-body.is-animating {
    transform: none !important;
  }

  .math-answer-tag__shell {
    transform: none !important;
  }
  .scene-caption.is-visible {
    transform: translate(-50%, 0);
  }

  .caption-intro__lead,
  .caption-drawer-letter,
  .caption-drawer-letter__ink,
  .caption-layer--opening,
  .caption-layer--incoming,
  .caption-layer--outgoing {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
  }

  .scene-caption.caption-intro--split .caption-drawer-letter,
  .scene-caption.caption-intro--split .caption-drawer-letter__ink {
    animation: none !important;
  }

  .caption-drawer-letter.is-drawn {
    width: var(--drawer-w, auto) !important;
  }

  .caption-drawer-letter.is-drawn .caption-drawer-letter__ink {
    opacity: 1 !important;
  }

  .scene-caption .caption-emphasis--work .caption-glow-letter,
  .scene-caption .caption-emphasis--work .caption-glow-letter.is-lit {
    transition: none;
  }

  .scene-caption .caption-emphasis--work .caption-glow-letter.is-lit {
    color: #ffffff;
    filter:
      drop-shadow(0 0 1px rgba(255, 255, 255, 0.88))
      drop-shadow(0 0 3px rgba(255, 255, 255, 0.28));
    transform: translateY(-0.02em);
  }
}

/* During the hero scan, opened rows stay fully present — no fade transition
   fighting the per-token pulse. */
body.math-scanning .math-row.is-visible > .math-line {
  opacity: 1;
  transform: none;
  transition: none;
}

.math-token {
  /* Keep line metrics identical before and during the per-glyph shake. */
  display: inline-block;
  color: #000;
  filter: none;
  transition: color 0.2s ease, filter 0.2s ease, opacity 0.22s ease, transform 0.14s ease;
}

/* Must follow the base .math-token rule — otherwise display:inline wins and the
   block-level bounds flex forces the ∫ onto its own line inside the <p>. */
.math-token--integral {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}

/* Revealed lines read on the void; the scan still owns the white pulse cadence. */
.js .math-row.is-visible .math-token:not(.math-token--validated):not(.math-token--scanning):not(.math-token--error):not(.math-token--corrected) {
  color: rgba(241, 238, 230, 0.58);
  filter: drop-shadow(0 0 2px rgba(245, 241, 232, 0.22));
}

/* Typewriter caret — rides the end of a line while the engine rewrites it. */
.type-caret {
  display: inline-block;
  width: 2px;
  height: 1.02em;
  margin: 0 1px 0 2px;
  vertical-align: -0.16em;
  border-radius: 1px;
  background: var(--corrected);
  box-shadow:
    0 0 6px rgba(159, 255, 208, 0.85),
    0 0 13px rgba(159, 255, 208, 0.4);
  animation: type-caret-blink 0.86s steps(1, end) infinite;
}

@keyframes type-caret-blink {
  0%,
  48% {
    opacity: 1;
  }
  49%,
  100% {
    opacity: 0;
  }
}

.math-token--sup {
  display: inline-block;
}

/* True built fractions for the hero proof. Numerator and denominator remain a
   single semantic token so scans and the finale move the value coherently. */
.math-token--frac {
  display: inline-grid;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  min-width: 0.66em;
  margin: 0;
  position: relative;
  top: -0.03em;
  vertical-align: middle;
  line-height: 0.82;
}

/* Binary operators own their optical spacing. This keeps 2 · 1/x balanced
   regardless of the fraction's internal width on desktop and mobile. */
.math-token--operator {
  display: inline-block;
  margin-inline: 0.16em;
}

.math-frac__numerator,
.math-frac__denominator {
  display: block;
  min-width: 100%;
  padding-inline: 0.08em;
  font-size: 0.82em;
  text-align: center;
}

.math-frac__numerator {
  padding-bottom: 0.09em;
  border-bottom: 0.055em solid currentColor;
}

.math-frac__denominator {
  padding-top: 0.09em;
}

body.math-glyph-capture #math-stack .math-token--frac,
body.math-glyph-shake #math-stack .math-token--frac {
  display: inline-grid !important;
  vertical-align: middle !important;
}

.math-token--scanning {
  color: #eaffff;
  filter:
    drop-shadow(0 0 2px rgba(234, 255, 255, 1))
    drop-shadow(0 0 6px rgba(125, 249, 255, 0.72))
    drop-shadow(0 0 14px rgba(125, 249, 255, 0.34));
  transform: translateY(-0.04em);
  transition-duration: 0.04s;
}

.math-token--scanning.math-token--scan-rush {
  transform: translateY(-0.05em) scale(1.1);
  filter:
    drop-shadow(0 0 3px rgba(255, 250, 240, 1))
    drop-shadow(0 0 8px rgba(255, 250, 240, 0.65))
    drop-shadow(0 0 14px rgba(125, 249, 255, 0.58));
  transition-duration: 0.02s;
}

.math-token--scanning.math-token--scan-preimpact {
  color: #f8fff9;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 252, 1))
    drop-shadow(0 0 8px rgba(159, 255, 208, 0.55))
    drop-shadow(0 0 12px rgba(159, 255, 208, 0.28));
}

.math-token--sup.math-token--scanning.math-token--scan-rush {
  transform: scale(1.1);
}

.math-token--sup.math-token--scanning.math-token--scan-preimpact {
  transform: scale(1.06);
}

.math-token--sup.math-token--scanning {
  transform: none;
}

.math-token--validated {
  color: #f1eee6;
  filter:
    drop-shadow(0 0 2px rgba(245, 241, 232, 0.4))
    drop-shadow(0 0 5px rgba(125, 249, 255, 0.12));
}

.math-token--error {
  color: var(--error);
  filter:
    drop-shadow(0 0 2px rgba(255, 91, 104, 0.72))
    drop-shadow(0 0 7px rgba(244, 63, 94, 0.24));
  transform: none;
}

.math-token--passed {
  color: var(--corrected);
  filter:
    drop-shadow(0 0 2px rgba(159, 255, 208, 0.75))
    drop-shadow(0 0 5px rgba(159, 255, 208, 0.32));
  opacity: 1;
}

.math-token--passed-strong {
  color: rgba(186, 255, 220, 0.98);
  filter:
    drop-shadow(0 0 3px rgba(159, 255, 208, 0.95))
    drop-shadow(0 0 8px rgba(159, 255, 208, 0.45));
  opacity: 1;
}

.math-token--coloring {
  transition:
    color 0.45s ease,
    filter 0.45s ease,
    transform 0.45s ease,
    opacity 0.45s ease;
}

.math-token--passed-pulse {
  animation: passed-pulse 0.52s ease forwards;
}

@keyframes passed-pulse {
  0% {
    color: rgba(248, 246, 239, 0.92);
    filter:
      drop-shadow(0 0 2px rgba(245, 241, 232, 0.4))
      drop-shadow(0 0 4px rgba(125, 249, 255, 0.1));
    transform: scale(1);
  }
  42% {
    color: rgba(186, 255, 220, 1);
    filter:
      drop-shadow(0 0 4px rgba(159, 255, 208, 0.95))
      drop-shadow(0 0 10px rgba(159, 255, 208, 0.5));
    transform: scale(1.03);
  }
  100% {
    color: rgba(186, 255, 220, 0.98);
    filter:
      drop-shadow(0 0 3px rgba(159, 255, 208, 0.95))
      drop-shadow(0 0 8px rgba(159, 255, 208, 0.45));
    transform: scale(1);
  }
}

.math-token--sup.math-token--error {
  transform: scale(1.08);
}

.math-token--uncertain {
  opacity: 0.38;
  color: rgba(232, 230, 223, 0.52);
  filter: blur(0.25px);
  text-shadow: 0 0 4px rgba(232, 230, 223, 0.06);
}

.math-token--scanning.math-token--recalculating {
  color: var(--math-white-bright);
  opacity: 1;
  filter: none;
  text-shadow:
    0 0 8px rgba(255, 250, 240, 0.78),
    0 0 18px rgba(245, 241, 232, 0.38),
    0 0 28px rgba(125, 249, 255, 0.32);
}

/* Reel under uncertainty — stutter intensifies as the downstream sweep accelerates. */
.math-token--uncertain.math-token--recalculating {
  color: rgba(232, 230, 223, 0.52);
  opacity: calc(0.34 + var(--downstream-rush) * 0.14);
  filter: blur(0.25px);
  text-shadow: 0 0 10px rgba(125, 249, 255, 0.22);
}

body.math-downstream-sweep .math-token--uncertain.math-token--recalculating {
  animation: reel-digit-stutter calc(0.16s - var(--downstream-rush) * 0.09s) steps(2, end) infinite;
}

@keyframes reel-digit-stutter {
  0%,
  100% {
    opacity: calc(0.3 + var(--downstream-rush) * 0.1);
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: calc(0.56 + var(--downstream-rush) * 0.22);
    transform: translate3d(0, -0.04em, 0);
    text-shadow:
      0 0 8px rgba(125, 249, 255, 0.34),
      0 0 16px rgba(159, 255, 208, calc(0.08 + var(--downstream-rush) * 0.18));
  }
}

.math-token--recalculating {
  color: rgba(232, 230, 223, 0.52);
  text-shadow: 0 0 10px rgba(125, 249, 255, 0.22);
  opacity: 0.42;
  filter: blur(0.25px);
}

.math-token--sup.math-token--recalculating {
  transform: none;
}

.math-token--corrected {
  color: var(--corrected);
  filter: drop-shadow(0 0 2px rgba(159, 255, 208, 0.28));
  opacity: 1;
}

/* Final answer validation pulse — mint flash, then cream settle with afterglow. */
@keyframes validated-pulse {
  0% {
    color: rgba(248, 246, 239, 0.92);
    filter:
      drop-shadow(0 0 2px rgba(245, 241, 232, 0.4))
      drop-shadow(0 0 4px rgba(125, 249, 255, 0.1));
    transform: scale(1);
  }
  38% {
    color: rgba(186, 255, 220, 1);
    filter:
      drop-shadow(0 0 3px rgba(159, 255, 208, 0.95))
      drop-shadow(0 0 9px rgba(159, 255, 208, 0.48))
      drop-shadow(0 0 14px rgba(125, 249, 255, 0.18));
    transform: scale(1.045);
  }
  100% {
    color: rgba(252, 250, 245, 0.98);
    filter:
      drop-shadow(0 0 2px rgba(245, 241, 232, 0.5))
      drop-shadow(0 0 7px rgba(159, 255, 208, 0.16));
    transform: scale(1);
  }
}

@keyframes validated-pulse-sup {
  0% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(245, 241, 232, 0.4))
      drop-shadow(0 0 4px rgba(125, 249, 255, 0.1));
  }
  38% {
    transform: scale(1.08);
    filter:
      drop-shadow(0 0 3px rgba(159, 255, 208, 0.95))
      drop-shadow(0 0 8px rgba(159, 255, 208, 0.48));
  }
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(245, 241, 232, 0.5))
      drop-shadow(0 0 6px rgba(159, 255, 208, 0.16));
  }
}

.math-token--validated-pulse {
  animation: validated-pulse 0.76s cubic-bezier(0.22, 1, 0.32, 1) both;
}

.math-token--sup.math-token--validated-pulse {
  animation: validated-pulse-sup 0.76s cubic-bezier(0.22, 1, 0.32, 1) both;
}

.math-token--validated-afterglow {
  color: rgba(252, 250, 245, 0.98);
  filter:
    drop-shadow(0 0 2px rgba(245, 241, 232, 0.5))
    drop-shadow(0 0 7px rgba(159, 255, 208, 0.16));
  transition: color 0.52s ease, filter 0.52s ease;
}

@keyframes corrected-pulse {
  0% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(159, 255, 208, 0.9))
      drop-shadow(0 0 5px rgba(159, 255, 208, 0.38));
  }
  42% {
    transform: scale(1.06);
    filter:
      drop-shadow(0 0 3px rgba(159, 255, 208, 1))
      drop-shadow(0 0 8px rgba(159, 255, 208, 0.55));
  }
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(159, 255, 208, 0.9))
      drop-shadow(0 0 5px rgba(159, 255, 208, 0.38));
  }
}

@keyframes corrected-pulse-sup {
  0% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(159, 255, 208, 0.9))
      drop-shadow(0 0 5px rgba(159, 255, 208, 0.38));
  }
  42% {
    transform: scale(1.06);
    filter:
      drop-shadow(0 0 3px rgba(159, 255, 208, 1))
      drop-shadow(0 0 8px rgba(159, 255, 208, 0.55));
  }
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(159, 255, 208, 0.9))
      drop-shadow(0 0 5px rgba(159, 255, 208, 0.38));
  }
}

.math-token--corrected-pulse {
  animation: corrected-pulse 0.2s ease-out both;
}

.math-token--corrected-impact {
  animation: corrected-impact 0.36s cubic-bezier(0.18, 1, 0.32, 1) both;
}

.math-token--sup.math-token--corrected-pulse {
  animation: corrected-pulse-sup 0.2s ease-out both;
}

.math-token--sup.math-token--corrected-impact {
  animation: corrected-impact-sup 0.36s cubic-bezier(0.18, 1, 0.32, 1) both;
}

@keyframes corrected-impact {
  0% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(159, 255, 208, 0.9))
      drop-shadow(0 0 5px rgba(159, 255, 208, 0.38));
  }
  24% {
    transform: scale(1.12);
    filter:
      drop-shadow(0 0 4px rgba(159, 255, 208, 1))
      drop-shadow(0 0 10px rgba(159, 255, 208, 0.72));
  }
  58% {
    transform: scale(1.04);
    filter:
      drop-shadow(0 0 3px rgba(159, 255, 208, 0.96))
      drop-shadow(0 0 7px rgba(159, 255, 208, 0.5));
  }
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(159, 255, 208, 0.9))
      drop-shadow(0 0 5px rgba(159, 255, 208, 0.38));
  }
}

@keyframes corrected-impact-sup {
  0% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(159, 255, 208, 0.9))
      drop-shadow(0 0 5px rgba(159, 255, 208, 0.38));
  }
  24% {
    transform: scale(1.12);
    filter:
      drop-shadow(0 0 4px rgba(159, 255, 208, 1))
      drop-shadow(0 0 10px rgba(159, 255, 208, 0.72));
  }
  58% {
    transform: scale(1.04);
    filter:
      drop-shadow(0 0 3px rgba(159, 255, 208, 0.96))
      drop-shadow(0 0 7px rgba(159, 255, 208, 0.5));
  }
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 2px rgba(159, 255, 208, 0.9))
      drop-shadow(0 0 5px rgba(159, 255, 208, 0.38));
  }
}

@media (prefers-reduced-motion: reduce) {
  .math-token--corrected-pulse,
  .math-token--corrected-impact,
  .math-token--validated-pulse,
  .math-token--sup.math-token--corrected-pulse,
  .math-token--sup.math-token--corrected-impact,
  .math-token--sup.math-token--validated-pulse,
  body.math-downstream-sweep .math-token--uncertain.math-token--recalculating {
    animation: none;
  }
}

.founder-invite {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 11;
  width: min(620px, calc(100% - 72px));
  text-align: center;
  opacity: var(--founder-opacity);
  transform: translate(-50%, -50%) translateY(calc((1 - var(--founder-opacity)) * 22px));
  pointer-events: none;
}

.founder-invite .founder-sub {
  margin: 16px auto 0;
  width: min(440px, 100%);
  color: rgba(232, 230, 223, 0.6);
  font-family: var(--font-ui);
  font-size: clamp(0.82rem, 1.1vw, 0.98rem);
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
}

.founder-invite p {
  display: none;
}

.founder-invite h2 {
  margin: 0 auto;
  width: min(520px, 100%);
  font-size: clamp(1.65rem, 3.2vw, 3.35rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.founder-invite a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 24px;
  padding: 0 20px;
  background: rgba(232, 230, 223, 0.92);
  color: #020812;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  pointer-events: none;
}

body.founder-active .founder-invite a {
  pointer-events: auto;
}

.scene-kicker,
.chapter-rail,
.scene-progress,
.stage-status {
  display: none !important;
}

body.math-scanning .brand,
body.math-scanning .scene-nav,
body.math-scanning .founder-invite,
body.math-scanning .math-tail {
  display: none !important;
}

body.landing-home:not(.math-tail-drawing):not(.math-tail-revealed) .math-tail {
  display: none;
}

body.founder-active .scene-nav .nav-cta {
  opacity: 0;
  pointer-events: none;
}

.scene-copy {
  display: none !important;
}

.scene-kicker {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(125, 249, 255, 0.72);
  opacity: var(--body-copy-opacity);
}

.scene-copy h1 {
  margin: 0 auto;
  max-width: min(86vw, 980px);
  font-family: var(--font-ui);
  font-size: clamp(3rem, 7.5vw, 7rem);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(245, 243, 236, 0.98);
  text-shadow: 0 0 34px rgba(232, 230, 223, 0.2), 0 0 10px rgba(232, 230, 223, 0.28);
  opacity: var(--headline-opacity);
}

.scene-copy h1 .headline-accent {
  color: var(--corrected);
  text-shadow: 0 0 24px rgba(159, 255, 208, 0.42), 0 0 10px rgba(159, 255, 208, 0.36);
}

.scene-copy p:last-child {
  width: min(520px, 100%);
  margin: 18px auto 0;
  color: rgba(232, 230, 223, 0.62);
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  line-height: 1.6;
  opacity: var(--body-copy-opacity);
}

.chapter-rail {
  position: absolute;
  left: clamp(30px, 3.6vw, 52px);
  top: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

body.math-complete .chapter-rail,
body.phase-branch .chapter-rail {
  opacity: var(--nav-opacity);
}

.chapter-rail span {
  position: relative;
  padding-left: 22px;
  color: rgba(232, 230, 223, 0.28);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.chapter-rail span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

.chapter-rail span.is-active {
  color: rgba(245, 248, 255, 0.9);
}

.scene-progress {
  position: absolute;
  right: clamp(30px, 3.6vw, 52px);
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  color: rgba(232, 230, 223, 0.48);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  opacity: 0;
  transition: opacity 0.8s ease;
}

body.math-complete .scene-progress,
body.phase-branch .scene-progress {
  opacity: var(--nav-opacity);
}

.scene-progress i {
  position: relative;
  display: block;
  width: 1px;
  height: 180px;
  background: rgba(232, 230, 223, 0.12);
}

.scene-progress b {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: calc(var(--scene-progress) * 100%);
  background: linear-gradient(180deg, var(--green), var(--cyan));
  box-shadow: 0 0 12px rgba(125, 249, 255, 0.68);
}

.stage-status {
  position: absolute;
  left: clamp(34px, 3.6vw, 56px);
  right: clamp(34px, 3.6vw, 56px);
  bottom: clamp(24px, 3.2vh, 36px);
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(232, 230, 223, 0.42);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

body.math-complete .stage-status {
  opacity: calc(var(--brand-opacity) * 0.85);
}

.stage-status span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.stage-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(159, 255, 208, 0.8);
}

body.is-dragging .scene-shell {
  cursor: grabbing;
}

@media (max-height: 760px) {
  .scene-copy h1 {
    font-size: clamp(2.4rem, 6vw, 5.6rem);
  }

  .scene-copy {
    top: 53%;
  }
}

@media (max-width: 920px) {
  :root {
    --frame: 12px;
    --hero-chrome-x: 20px;
    --hero-strip-height: 64px;
    --hero-sound-left: 20px;
  }

  .site-header {
    top: 28px;
    left: 32px;
    right: 32px;
  }

  .scene-nav {
    display: none;
  }

  .brand {
    min-width: 0;
    font-size: 0.62rem;
  }

  .hero-nav {
    gap: 18px;
  }

  .hero-nav a,
  .ambient-audio-toggle,
  .ambient-audio-prompt {
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .journey-rail__stop {
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    gap: 7px;
  }

  .journey-rail__track,
  .journey-rail__list {
    min-height: 148px;
  }

  .hero-brand__name {
    font-size: 11px;
    letter-spacing: 0.36em;
  }

  .hero-brand__sub {
    font-size: 12px;
  }

  .hero-scroll-label {
    bottom: 38px;
  }

  .ambient-audio-bar {
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }

  .hero-sound-toggle {
    font-size: 9px;
  }

  .ambient-audio-prompt {
    bottom: calc(var(--hero-strip-height) + 20px);
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .math-stack {
    --math-stack-scale: 0.92;
  }

  .chapter-rail,
  .scene-progress {
    display: none;
  }

  .scene-copy {
    bottom: 88px;
  }

  .stage-status span:last-child {
    display: none;
  }
}

@media (max-width: 620px) {
  .hero-nav a,
  .hero-nav__cta {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  @media (hover: none), (pointer: coarse) {
    .ambient-audio-bar,
    .hero-skip-cinematic {
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      height: 44px;
    }

    .ambient-audio-bar {
      left: max(16px, env(safe-area-inset-left, 0px));
    }

    .hero-scroll-label {
      bottom: calc(30px + env(safe-area-inset-bottom, 0px));
      font-size: 8px;
      letter-spacing: 0.12em;
    }

    .hero-scroll-chevron {
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .hero-sound-toggle {
      position: static;
      bottom: auto !important;
      left: auto !important;
      height: 44px;
      font-size: 8px;
      letter-spacing: 0.14em;
    }

    body.product-audio-control .ambient-audio-bar {
      bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    body.product-audio-control .ambient-audio-toggle {
      min-height: 48px;
      padding-inline: 15px;
    }

    .hero-skip-cinematic {
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      right: max(16px, env(safe-area-inset-right, 0px));
      font-size: 8px;
      letter-spacing: 0.14em;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .hero-scroll-label {
      bottom: 54px;
      font-size: 8px;
      letter-spacing: 0.24em;
    }

    .hero-scroll-chevron {
      bottom: 34px;
    }

    .hero-sound-toggle {
      bottom: 12px;
      font-size: 8px;
      letter-spacing: 0.18em;
      left: 18px;
    }

    .hero-skip-cinematic {
      bottom: 12px;
      right: 18px;
      font-size: 8px;
      letter-spacing: 0.18em;
    }
  }

  /* Narrow touch phones: phrase/type tweaks only — math scale lives in the
     (max-width: 767px), (hover: none) block above. */
  @media (hover: none), (pointer: coarse) {
    .math-stack {
      width: calc(100% - 34px);
      gap: 0;
    }
  }

  .math-phrase {
    font-size: clamp(0.95rem, 4.4vw, 1.2rem);
    white-space: normal;
    max-width: min(92vw, 28rem);
  }

  .math-phrase .phrase-headline {
    font-size: clamp(1.18rem, 5.8vw, 1.55rem);
    line-height: 1.16;
  }

  .math-phrase .phrase-modes {
    margin-top: clamp(0.45rem, 1.6vh, 0.75rem);
    font-size: clamp(0.78rem, 3.4vw, 0.95rem);
    line-height: 1.38;
  }

  .finale-cause {
    width: min(88vw, 28rem);
    font-size: clamp(1.1rem, 5.4vw, 1.5rem);
  }

  .math-phrase .phrase-sub {
    font-size: clamp(1.3rem, 6.4vw, 1.95rem);
  }

  /* Integral problem row — keep the prestige silhouette readable on narrow
     screens without letting it dominate the stack. */
  .math-line-integral {
    line-height: 1.5;
  }

  .math-integral-sign {
    font-size: 1.35em;
  }

  .math-bounds {
    font-size: 0.38em;
  }

  .scene-copy h1 {
    font-size: clamp(1.38rem, 7.8vw, 2.1rem);
  }

  .stage-status {
    left: 24px;
    right: 24px;
    justify-content: center;
  }

  .stage-status span:first-child {
    display: none;
  }
}

/* Enter the Product bypasses the world completely. The scene may already have
   preloaded during the gateway choice, so isolate it at the compositing layer. */
body.direct-product-entry.brief-active .scene-shell,
body.direct-product-entry.brief-active .math-lake,
body.direct-product-entry.brief-active .math-lake__canvas,
body.direct-product-entry.brief-active .journey-rail,
body.direct-product-entry.brief-active .journey-cue,
body.direct-product-entry.brief-active .world-labels {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.direct-product-entry.brief-active .product-brief {
  position: relative;
  z-index: 50;
}

@media (max-width: 620px) and (max-height: 780px) {
  @media (hover: none), (pointer: coarse) {
    :root {
      --math-instrument-touch-scale: clamp(0.93, 0.87 + 0.35vw, 0.98);
    }

    .math-tail {
      margin-top: clamp(20px, 4vh, 42px);
    }
  }

  .math-phrase .phrase-headline {
    font-size: clamp(1.08rem, 5.4vw, 1.42rem);
  }
}

/* Keep portrait HUD geometry authoritative over the broader <=920px tablet
   reductions declared above. */
@media (max-width: 767px) {
  .hero-nav {
    gap: 10px;
  }

  .journey-rail__track {
    min-height: 0;
  }

  .journey-rail__list {
    min-height: 48px;
  }
}

/* The proof grows downward from one fixed stage mark. Centering a changing-height
   stack made every new row—and the pre-burst cleanup—look like a jump cut. */
body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .math-instrument {
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
}

body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .math-instrument-body {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(150px, 29vh, 280px);
  top: clamp(150px, 29dvh, 280px);
  width: 100%;
  margin: 0;
}

/* ── The Hidden Domain — accepted answer first, forensic audit second ──── */
.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;
}

.math-row__slot {
  min-height: 1.48em;
}

.math-line-simplify {
  position: relative;
  min-height: 1.48em;
}

.math-row[data-row="simplify"].is-reserved {
  grid-template-rows: 1fr;
  margin-top: var(--row-gap, clamp(0.55rem, 1.75vh, 1rem));
  visibility: visible;
}

.math-row[data-row="simplify"].is-reserved > .math-line-simplify:not(.is-repair-active) {
  display: block;
  position: relative;
  visibility: hidden;
  opacity: 0;
}

body.math-answer-accepted .math-row[data-row="final"] {
  transform: translateY(var(--accepted-answer-shift, 0px));
}

.math-line.is-audit-focus .math-token {
  color: rgba(255, 252, 245, 1) !important;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)) !important;
  transform: translateZ(0) scale(1.015);
  transition: color 0.32s ease, filter 0.32s ease, transform 0.32s ease;
}

body.math-audit-active .math-line:not(.is-audit-focus) .math-token {
  opacity: 0.72;
  transition: opacity 0.38s ease;
}

body.math-audit-active .math-row[data-row="final"] .math-token {
  opacity: 1;
}

body.math-audit-active .math-token--error,
body.math-audit-active .math-token--passed,
body.math-audit-active .math-token--passed-strong,
body.math-audit-active .math-token--corrected,
body.math-audit-active .math-token--corrected-pulse,
body.math-audit-active .math-token--scanning {
  opacity: 1 !important;
}

body.math-audit-active .math-line-repair.is-repair-active .math-token,
body.math-audit-active .math-line-repair.is-repair-settled .math-token,
body.math-audit-active .math-line-simplify.is-repair-active .math-token {
  opacity: 1;
}

body.landing-home.hero-cinematic-visible:not(.hero-intro-complete)
  .math-token--corrected.math-token--scanning {
  color: #ffffff !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.86))
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.36)) !important;
}

body.math-answer-accepted .math-row[data-row="final"] .math-answer-body {
  position: relative;
}

body.math-answer-accepted .math-row[data-row="final"] .math-answer-body::after {
  content: none;
}

@keyframes accepted-line-in {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

/* The status is absolutely anchored, so accepting/auditing the answer cannot
   shift the answer itself by even one pixel. */
.math-final-cluster {
  position: relative;
}

.math-answer-tag,
.math-answer-tag.is-layout-probe {
  position: absolute;
  left: calc(100% + clamp(10px, 1.4vw, 18px));
  top: 50%;
  width: max-content;
  margin-left: 0;
  transform: translateY(-50%);
  visibility: visible;
}

.math-answer-tag__shell {
  position: relative;
  display: grid;
  gap: 0.08em;
  padding: 0.14em 0 0.14em 0.72em;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(234, 244, 255, 0.92);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 0.31em;
  line-height: 1.45;
  letter-spacing: 0.17em;
  text-align: left;
  text-transform: lowercase;
  white-space: pre;
}

.math-answer-tag__shell::before {
  content: "";
  position: absolute;
  top: 0.08em;
  bottom: 0.08em;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: rgba(232, 230, 223, 0.58);
  box-shadow: 0 0 7px rgba(232, 230, 223, 0.18);
}

.math-answer-tag__line {
  display: block;
}

.math-answer-tag__line--status {
  color: rgba(175, 245, 214, 0.94);
  text-shadow: 0 0 7px rgba(159, 255, 208, 0.18);
}

.math-answer-tag__line--question {
  color: rgba(255, 107, 118, 0.92);
  text-shadow: 0 0 7px rgba(255, 91, 104, 0.16);
}

.math-answer-tag.is-reasoning-verified .math-answer-tag__shell {
  color: var(--corrected-mint);
}

.math-answer-tag.is-reasoning-verified .math-answer-tag__line--question {
  color: var(--corrected-mint);
  text-shadow: 0 0 10px rgba(159, 255, 208, 0.34);
}

.math-answer-tag.is-reasoning-verified .math-answer-tag__line--status {
  color: var(--corrected-mint);
  text-shadow: 0 0 10px rgba(159, 255, 208, 0.34);
}

.domain-field {
  position: absolute;
  left: 50%;
  top: calc(100% + clamp(22px, 4vh, 42px));
  z-index: 8;
  width: min(78vw, 560px);
  opacity: 0;
  transform: translate3d(-50%, 8px, 0);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.domain-axis {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  font-family: var(--font-math);
  font-size: clamp(1.05rem, 2vw, 1.42rem);
  color: rgba(242, 247, 255, 0.9);
}

.domain-axis::before,
.domain-axis::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  /* Only the outer rails remain in the failed state. There is no faint inner
     bridge between x < 0, zero, and x > 0. */
  width: calc(25% - 18px);
  background: rgba(235, 243, 255, 0.5);
}

.domain-axis::before { left: 0; }
.domain-axis::after { right: 0; }

/* Restored-domain highlighter. Two independent strokes begin beside zero and
   travel toward the negative and positive extrema at the same measured pace. */
.domain-axis__highlight {
  position: absolute;
  z-index: 0;
  top: calc(50% - 0.5px);
  width: calc(50% - 20px);
  height: 2px;
  border-radius: 999px;
  background: rgba(159, 255, 208, 0.72);
  box-shadow: 0 0 7px rgba(159, 255, 208, 0.12);
  opacity: 0;
  transform: scaleX(0);
  transition:
    transform 1.02s cubic-bezier(0.37, 0, 0.63, 1),
    opacity 0.12s ease;
}

.domain-axis__highlight--left {
  left: 0;
  transform-origin: right center;
}

.domain-axis__highlight--right {
  right: 0;
  transform-origin: left center;
}

.domain-axis__half,
.domain-axis__zero {
  position: relative;
  z-index: 1;
  justify-self: center;
  padding: 0 10px;
  background: #000;
}

.domain-axis__half {
  transition:
    color 0.42s ease 0s,
    text-shadow 0.42s ease 0s,
    opacity 0.42s ease 0s;
}

.domain-axis__half--lost {
  color: rgba(242, 247, 255, 0.9);
  transition: color 0.55s ease, text-shadow 0.55s ease, opacity 0.55s ease;
}

.domain-diagnostic {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding-top: 12px;
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 1.2vw, 0.86rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: #ff6b76;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.domain-diagnostic--restored {
  color: var(--corrected-mint);
  text-align: center;
}

.domain-field.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.domain-field.is-diagnosed .domain-axis__half--lost {
  color: #ff6b76;
  opacity: 0.82;
  text-shadow: 0 0 12px rgba(255, 91, 104, 0.28);
}

.domain-field.is-diagnosed .domain-diagnostic--invalid {
  opacity: 1;
  transform: translateY(0);
}

.domain-field.is-restored .domain-axis,
.domain-field.is-restored .domain-axis__half {
  color: rgba(205, 244, 225, 0.88);
  text-shadow: 0 0 8px rgba(159, 255, 208, 0.14);
}

.domain-field.is-restored .domain-axis__half {
  transition-delay: 0.82s;
}

.domain-field.is-restored .domain-axis__highlight {
  opacity: 1;
  transform: scaleX(1);
}

.domain-field.is-restored .domain-axis__zero {
  color: rgba(242, 247, 255, 0.48);
  text-shadow: none;
}

.domain-field.is-restored .domain-axis::before,
.domain-field.is-restored .domain-axis::after {
  background: rgba(235, 243, 255, 0.28);
  box-shadow: none;
}

.domain-field.is-restored .domain-diagnostic--invalid {
  opacity: 0;
}

.domain-field.is-restored .domain-diagnostic--restored {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.94s;
}

.domain-field.is-retiring {
  opacity: 0;
  transition: opacity 0.48s ease;
}

@media (max-width: 620px) {
  .domain-field {
    top: calc(100% + 18px);
    width: min(90vw, 430px);
  }
  .domain-axis { font-size: clamp(0.9rem, 4.4vw, 1.12rem); }
  .domain-diagnostic { font-size: 0.62rem; }
  .math-answer-tag {
    left: calc(100% + 8px);
  }
  .math-answer-tag__shell {
    font-size: 0.25em;
    letter-spacing: 0.1em;
  }
}

/* Touch devices use the same restrained row easing as desktop. The previous
   mobile `transition:none` was the source of the abrupt first proof beats. */
body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .js .math-row {
  transition:
    grid-template-rows var(--row-dur, 1.05s) var(--math-reveal-ease),
    margin-top var(--row-dur, 1.05s) var(--math-reveal-ease);
}

body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .js .math-row > .math-line,
body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .js .math-row > .math-row__slot {
  transition:
    opacity calc(var(--row-dur, 1.05s) * 0.8) var(--math-reveal-ease) calc(var(--row-dur, 1.05s) * 0.16),
    transform calc(var(--row-dur, 1.05s) * 0.8) var(--math-reveal-ease) calc(var(--row-dur, 1.05s) * 0.16);
}

body.math-glyph-capture #math-stack .math-token.math-token--integral,
body.math-glyph-shake #math-stack .math-token.math-token--integral {
  display: inline-flex !important;
}

@media (prefers-reduced-motion: reduce) {
  body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .js .math-row,
  body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .js .math-row > .math-line,
  body.landing-home.hero-cinematic-visible:not(.hero-intro-complete) .js .math-row > .math-row__slot {
    transition: none !important;
  }

  .brand-loader__inner,
  .brand-loader__wordmark,
  .brand-loader__letter,
  .brand-loader__letter-img,
  .brand-loader__progress,
  .brand-loader__status,
  .brand-loader__choices {
    transition: none;
    animation: none;
    transform: none;
    clip-path: none;
    opacity: 1;
    visibility: visible;
  }

  .brand-loader.is-exiting {
    transition-duration: 0.12s;
  }

  body.landing-home.loader-complete .scene-shell,
  body.landing-home.loader-complete .site-header {
    transition: none;
  }

  body.lake-live .hero-chrome {
    transition: none;
  }

  .brand-loader.is-progress-faded .brand-loader__progress {
    opacity: 0;
  }

  .brand-loader__choices,
  body.hero-intro-transition::before {
    transition: none;
  }

  body.hero-intro-transition.is-covered::before {
    opacity: 1;
  }

  .scene-shell {
    cursor: default;
  }

  .math-instrument,
  .math-instrument-static {
    opacity: 1;
    transform: none;
  }

  .js .math-row,
  .js .math-row > .math-line {
    transition: none;
  }

  .type-caret {
    animation: none;
  }

  .scene-copy {
    opacity: 1;
    transform: translateX(-50%);
  }

  .token.error,
  .math-token--error {
    color: var(--error);
  }
}