/* =====================================================================================================
   THEME: NEON LIGHT-GRID ON BABYLON PIXEL CONFIG D (PREVIEW)            assets/theme-neon.css
   Opt-in: only pages with <html data-theme="neon"> change. Remove the attribute (or this file) to revert.

   Base = Babylon Pixel config D "best blend" (babylon-pixel-config.json, config_id D-best-blend, guide v8.1):
   83 % Babylon Pixel + 17 % Geometric chord style, dial 3.5. Everything with data stays at 3.5 like the app.
   Only the hero, the elevator/floors and campaign moments climb the guide's website range for the light-grid vibe.

   DIAL MAP (guide: "The Babylon Pixel spectrum")
     3.5  data, chart, pricing, demo, facts: D page gradient, D cards, neon-outline marks, learning layer. No HUD, no
          tilted panels, no dot floor (config: hud_rings false, dot_floor false).
     6    content sections: light-line section dividers, numbered callouts that point at real steps (bellhop).
     7    elevator / floors: glass cab ride, floor indicator.
     8    lobby hero + library hero: dot grid, perspective floor grid, light-line skyline, faint HUD rings (decoration at
          <= 15 % alpha, nothing that reads as a gauge), tilted deck plate under the hero example panel.

   Rules kept: text and figures are never blurred, never glow, never 3D-transformed, and sit on solid fills; never
   colour alone; contrast measured with effects off. Effects off (prefers-reduced-motion, prefers-reduced-transparency,
   prefers-contrast: more, the site's Motion toggle): page #05080A flat, cards #0B1315 flat + 1 px rim, no glow,
   gradient, shadow or highlight (config effects_off). Every asset is original CSS/SVG; no reference image is used.
   Web translations of D values (pt -> px 1:1; card glow passes sigma 6/16 -> box-shadow blur 12/32) are DERIVED here.
   ===================================================================================================== */

html[data-theme="neon"] {
  /* ---- config D tokens (babylon-pixel-config.json) ---- */
  --d-page-inner: #05080A;
  --d-page-outer: #05080A;
  --d-page-off: #05080A;
  --d-card-top: #111B1D;
  --d-card-bottom: #0B1315;
  --d-card-flat: #0B1315;
  --d-ink-2: #86ABA7;
  --d-muted: #86ABA7;
  --d-chord: #6E8F8C;
  --d-guide-circle: #2A3A3C;
  --d-pill-off: #111B1D;
  --d-pill-off-border: #2A3A3C;
  --d-edge: #9AFFF3;                     /* edge twin of brand accent #9AFFF3: L + 0.07, C x 1.25 (derived) */
  --d-rim: rgb(154 255 243 / 0.47);              /* card.rim: edge twin at alpha 0.47 */
  --d-radius: 17.7px;                          /* guide: site radius-3 18 px -> 0.83 r + 2.72 */
  --d-shadow: 0 6.7px 15px rgb(0 0 0 / 0.61);  /* card.shadow: y 6.7, sigma 7.5 (blur ~ 2 sigma), alpha 0.61 */
  --d-glow: 0 0 12px rgb(154 255 243 / 0.16), 0 0 32px rgb(154 255 243 / 0.08);   /* glow.card passes 6 / 16 (derived) */
  --d-highlight: inset 0 1.1px 0 rgb(232 255 252 / 0.27);                       /* card.inner_top_highlight */

  /* ---- vibe-end tokens (hero, elevator, campaign only) ---- */
  --neon-cyan: #9AFFF3;
  --neon-ice: #E8FFFC;
  --neon-line: rgb(154 255 243 / 0.62);
  --neon-faint: rgb(154 255 243 / 0.14);
  --neon-warm: #86ABA7;                         /* the one warm accent: decoration ticks only, never text or state */
  --neon-glow-a: rgb(154 255 243 / 0.38);
  --neon-glow-b: rgb(154 255 243 / 0.16);
  --neon-on: 1;                                 /* glow master switch, 0 under every effects-off trigger */

  /* ---- site tokens re-mapped to D ---- */
  --ink-2: var(--d-ink-2);
  --ink-3: var(--d-muted);
  --noir-0: var(--d-page-outer);
  --noir-1: var(--d-card-flat);
  --noir-2: #111B1D;                            /* guide: card raised (site noir-2) blend */
  --noir-glass: #0B1315;
  --deco-gold: var(--neon-cyan);                /* brass decoration -> light-line (decoration only, as before) */
  --deco-gold-hi: var(--neon-ice);
  --deco-gold-lo: #6E8F8C;
  --deco-gold-deep: #111B1D;
  --deco-gold-line: rgb(154 255 243 / 0.4);
  --deco-gold-faint: rgb(154 255 243 / 0.15);
  --deco-sky-top: #05080A;
  --deco-sky-mid: #111B1D;
  --deco-sky-low: #2A3A3C;
  --deco-window: #9AFFF3;
  --deco-window-dim: #6E8F8C;
  --deco-wood: #111B1D;
  --glow-gold: rgb(154 255 243 / 0.4);
  --glow-window: #9AFFF3;
  background: radial-gradient(farthest-corner at 50% 0%, var(--d-page-inner) 0%, var(--d-page-outer) 70%) var(--d-page-outer) fixed;
}
html[data-theme="neon"]::after { opacity: 0.02; }

/* ============================================================ DIAL 3.5: D cards (data, pricing, demo, facts) */
html[data-theme="neon"] :is(.deco-card, .concierge, .lobby-worked, .math, .itin-col, .door, .bellhop, .hero__example) {
  background: linear-gradient(180deg, var(--d-card-top), var(--d-card-bottom));
  border: 1px solid var(--d-rim);
  border-radius: var(--d-radius);
  box-shadow: var(--d-highlight), var(--d-shadow), var(--d-glow);
}
html[data-theme="neon"] .lobby-worked { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
html[data-theme="neon"] .deco-card::before { border-color: rgb(154 255 243 / 0.12); border-radius: calc(var(--d-radius) - 5px); }
html[data-theme="neon"] .deco-card::after { display: none; }        /* brass crown: not part of D */
html[data-theme="neon"] :is(.btn-quiet, .chip) {
  background: var(--d-pill-off);
  border-color: var(--d-pill-off-border);
}
html[data-theme="neon"] :is(.btn-quiet, .chip):hover { border-color: var(--brand-accent); }
html[data-theme="neon"] .btn {
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 0 0 2px var(--d-edge), 0 3px 6px rgb(0 0 0 / 0.59),
    0 0 calc(16px * var(--neon-on)) rgb(154 255 243 / 0.3);
}
/* Segmented gauge rings for the worked example (theme-neon.js). D chart marks: 1.5 px outline, fill alpha 0.16-0.51,
   neon outline glow behind. Real data, labelled with the table's own words; the sentence under it is the note. */
.neon-gauges { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-3) 0 var(--s-4); }
.neon-gauge { display: grid; justify-items: center; gap: 0.35rem; width: 8.5rem; text-align: center; }
.neon-gauge svg { width: 7.5rem; height: 7.5rem; color: var(--brand-accent); filter: drop-shadow(0 0 calc(4px * var(--neon-on, 0)) rgb(154 255 243 / 0.59)); }
.neon-gauge .seg-off { stroke: var(--d-guide-circle); }
.neon-gauge .seg-on { stroke: currentColor; stroke-opacity: 0.85; }
.neon-gauge__fig { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink-1); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.neon-gauge__name { font-size: var(--t-footnote); color: var(--ink-2); line-height: 1.3; }
html[data-theme="neon"] body[data-floor="library"] .library-reading { background: var(--d-page-outer); }

/* ============================================================ DIAL 6: content sections */
html[data-theme="neon"] :is(.section, .scene, .rooftop) + :is(.section, .scene, .rooftop) { border-block-start: 0; }
html[data-theme="neon"] :is(.section, .scene, .rooftop) + :is(.section, .scene, .rooftop)::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  width: auto;
  margin: 0;
  inset-block-end: auto;
  transform: none;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--neon-line) 18%, var(--neon-ice) 50%, var(--neon-line) 82%, transparent);
  box-shadow: 0 0 calc(10px * var(--neon-on)) calc(1px * var(--neon-on)) var(--neon-glow-b);
}
/* Into a data section (dial 3.5) the frame drops to a plain D hairline: no glow next to data. */
html[data-theme="neon"] :is(.section, .scene, .rooftop) + [data-neon-dial="3.5"]::before {
  background: linear-gradient(90deg, transparent, rgb(154 255 243 / 0.22) 20%, rgb(154 255 243 / 0.22) 80%, transparent);
  box-shadow: none;
}
html[data-theme="neon"] .kicker::before,
html[data-theme="neon"] .kicker--center::after {
  border-block-color: var(--neon-cyan);
  border-block-end-color: var(--neon-warm);
}
html[data-theme="neon"] .tower-bar { background: rgb(5 8 10 / 0.92); }
html[data-theme="neon"] .tower-bar::after { background: linear-gradient(90deg, transparent, var(--neon-line), transparent); }
html[data-theme="neon"] .scene--concierge { background: radial-gradient(55% 45% at 75% 0%, rgb(154 255 243 / 0.07), transparent 70%), transparent; }
html[data-theme="neon"] .scene--penthouse { background: radial-gradient(120% 60% at 50% 110%, rgb(110 143 140 / 0.18), transparent 60%), transparent; }
html[data-theme="neon"] .scene, html[data-theme="neon"] .section--band { background-color: transparent; }
/* Numbered callouts with leader lines: the bellhop's three real steps */
html[data-theme="neon"] .bellhop__steps li { background: var(--d-card-flat); border: 1px solid var(--neon-line); border-radius: 12px; }
html[data-theme="neon"] .bellhop__steps li::before {
  content: counter(bell, decimal-leading-zero);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--neon-ice);
  border: 1.5px solid var(--neon-ice);
  border-radius: 4px;
  background: var(--d-page-off);
  box-shadow: 0 0 calc(10px * var(--neon-on)) var(--neon-glow-a);
}
html[data-theme="neon"] .bellhop__steps li + li::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--neon-line);
  inset-inline-start: 1.6rem;
  inset-block-start: calc(-1 * var(--s-3) - 1px);
  width: 1px;
  height: var(--s-3);
}
@media (min-width: 48rem) {
  html[data-theme="neon"] .bellhop__steps li + li::after { inset-inline-start: calc(-1 * var(--s-3) - 1px); inset-block-start: 1.6rem; width: var(--s-3); height: 1px; }
}

/* ============================================================ DIAL 8: lobby hero */
html[data-theme="neon"] .hero__sky {
  background:
    radial-gradient(circle, rgb(154 255 243 / 0.13) 0.9px, transparent 1.3px) 0 0 / 26px 26px,
    radial-gradient(90% 40% at 50% 100%, rgb(134 171 167 / 0.3) 0%, rgb(42 58 60 / 0.2) 45%, transparent 75%),
    linear-gradient(180deg, var(--d-page-off) 0%, #05080A 45%, #111B1D 100%);
}
html[data-theme="neon"] :is(.searchlights, .rain-glass, .data-rain, .hero__gl) { display: none; }
html[data-theme="neon"] .hero.is-webgl :is(.skyline, .skyline__windows) { visibility: visible; }
html[data-theme="neon"] .skyline__layer {
  filter: brightness(0) drop-shadow(0 -1px 0 rgb(154 255 243 / 0.85)) drop-shadow(0 0 calc(6px * var(--neon-on)) rgb(154 255 243 / 0.45));
}
html[data-theme="neon"] .skyline__far { opacity: 0.45; }
html[data-theme="neon"] .hero__layers::after {
  content: "";
  position: absolute;
  inset-inline: -30%;
  inset-block-end: 0;
  height: 26%;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(5 8 10 / 0) 0%, rgb(5 8 10 / 0.85) 100%),
    repeating-linear-gradient(90deg, transparent 0 58px, rgb(154 255 243 / 0.55) 58px 59.5px),
    repeating-linear-gradient(180deg, transparent 0 34px, rgb(154 255 243 / 0.45) 34px 35.5px),
    #05080A;
  transform: perspective(360px) rotateX(58deg);
  transform-origin: 50% 100%;
  border-block-start: 1.5px solid var(--neon-ice);
  box-shadow: 0 calc(-6px * var(--neon-on)) calc(26px * var(--neon-on)) var(--neon-glow-a);
}
html[data-theme="neon"] .hero--letterbox::before,
html[data-theme="neon"] .hero--letterbox::after { background: var(--d-page-off); }
/* The hero's example panel: a D card (its figures are data, so the card itself stays at 3.5), floating on a tilted
   light deck with faint HUD rings behind. The HUD and deck sit at negative z inside the panel's stacking context, which
   paints them above the panel's own background, so a solid face at z -1 keeps every figure on a flat, opaque fill. */
html[data-theme="neon"] .hero__example { position: relative; isolation: isolate; padding: 0.9rem 1.1rem; }
html[data-theme="neon"] .hero__example::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--d-card-top), var(--d-card-bottom));
}
html[data-theme="neon"] .hero__example > .neon-deck {
  position: absolute;
  inset: auto -6% -3rem -6%;
  height: 3rem;
  z-index: -2;
  pointer-events: none;
  transform: perspective(480px) rotateX(62deg);
  transform-origin: 50% 0;
  border: 1px solid var(--neon-line);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgb(154 255 243 / 0.22) 22px 23px),
    linear-gradient(180deg, rgb(154 255 243 / 0.2), rgb(154 255 243 / 0.02));
  box-shadow: 0 0 calc(24px * var(--neon-on)) var(--neon-glow-a);
}
.neon-hud {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: min(150%, 40rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -3;
  pointer-events: none;
  color: var(--neon-cyan);
}
.neon-hud .warm { stroke: var(--neon-warm); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .neon-hud .spin-a { animation: neon-spin 2.4s cubic-bezier(.2,.7,.1,1) 1 both; transform-origin: 50% 50%; }
  html:not([data-motion="off"]) .neon-hud .spin-b { animation: neon-spin-r 2.4s cubic-bezier(.2,.7,.1,1) 1 both; transform-origin: 50% 50%; }
}
@keyframes neon-spin { from { transform: rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes neon-spin-r { from { transform: rotate(30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 63.98rem) {
  .neon-hud { width: 18rem; inset-inline-start: auto; inset-inline-end: -7rem; inset-block-start: -2rem; transform: none; }
}

/* ============================================================ DIAL 8: inner-page heroes, DIAL 7: rooftop (campaign)
   theme-neon.js tags each top-level section with data-neon-dial (8 hero, 7 rooftop, 6 content, 3.5 data). Without JS
   every section simply keeps the dial-6 look. Dot grid + perspective floor grid; no rings, no tilt (lobby only). */
html[data-theme="neon"] :is([data-neon-dial="8"], [data-neon-dial="7"]):not(.hero) {
  background:
    radial-gradient(circle, rgb(154 255 243 / 0.11) 0.9px, transparent 1.3px) 0 0 / 26px 26px,
    radial-gradient(70% 55% at 50% 0%, rgb(110 143 140 / 0.2), transparent 70%),
    linear-gradient(180deg, #05080A, var(--d-page-outer));
}
html[data-theme="neon"] [data-neon-dial="7"].rooftop {
  background:
    radial-gradient(circle, rgb(154 255 243 / 0.11) 0.9px, transparent 1.3px) 0 0 / 26px 26px,
    radial-gradient(60% 80% at 50% 120%, rgb(134 171 167 / 0.28), transparent 70%),
    linear-gradient(180deg, var(--d-page-outer), #0B1315);
}
html[data-theme="neon"] :is([data-neon-dial="8"], [data-neon-dial="7"]):not(.hero)::after {
  content: "";
  position: absolute;
  inset-inline: -20%;
  inset-block-end: 0;
  height: min(22%, 11rem);
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(5 8 10 / 0) 0%, rgb(5 8 10 / 0.9) 100%),
    repeating-linear-gradient(90deg, transparent 0 64px, rgb(154 255 243 / 0.42) 64px 65.5px),
    repeating-linear-gradient(180deg, transparent 0 36px, rgb(154 255 243 / 0.34) 36px 37.5px);
  transform: perspective(420px) rotateX(60deg);
  transform-origin: 50% 100%;
  border-block-start: 1px solid var(--neon-line);
}
html[data-theme="neon"] :is(.scene, .section, .rooftop):not([data-neon-dial="8"]):not([data-neon-dial="7"]):not(.hero):not(.scene--library) {
  background: transparent;   /* dial 6 / 3.5: the D page gradient shows through; bands differ by their divider only */
}
/* Our own drawings (SVG art) re-lit in light-line blue. Photos, screenshots, the book cover, the founder photo and the
   LTWF mark are PNG/JPG/AVIF and are never matched. The skyline has its own rule. */
html[data-theme="neon"] img[src^="/assets/art/"][src$=".svg"]:not(.skyline__layer) {
  filter: grayscale(1) sepia(1) hue-rotate(160deg) saturate(2.4) brightness(1.05);
}

/* ============================================================ DIAL 8: library hero (book page) */
html[data-theme="neon"] .scene--library {
  background:
    radial-gradient(circle, rgb(154 255 243 / 0.11) 0.9px, transparent 1.3px) 0 0 / 26px 26px,
    radial-gradient(70% 55% at 50% 0%, rgb(110 143 140 / 0.22), transparent 70%),
    linear-gradient(180deg, #05080A, var(--d-page-outer));
}
html[data-theme="neon"] .scene--library::after {
  content: "";
  position: absolute;
  inset-inline: -20%;
  inset-block-end: 0;
  height: 22%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(5 8 10 / 0) 0%, rgb(5 8 10 / 0.9) 100%),
    repeating-linear-gradient(90deg, transparent 0 64px, rgb(154 255 243 / 0.42) 64px 65.5px),
    repeating-linear-gradient(180deg, transparent 0 36px, rgb(154 255 243 / 0.34) 36px 37.5px);
  transform: perspective(420px) rotateX(60deg);
  transform-origin: 50% 100%;
  border-block-start: 1px solid var(--neon-line);
}
/* Library art (our own SVGs) re-lit in light-line blue. The book cover photo is never filtered. */
html[data-theme="neon"] :is(.library-lectern__art img, .chandelier > img, .chandelier__glints img) {
  filter: grayscale(1) sepia(1) hue-rotate(160deg) saturate(2.4) brightness(1.05);
}

/* ============================================================ DIAL 7: the elevator: glass cab with ribbed light slats
   Same markup and timing as today (site.js .ride: departs 500 ms, arrival 420 ms). The brass doors become a dark glass
   cab whose ribbed light slats rise past the viewer, then a crisp settle. No sound unless the visitor turned the
   existing "Elevator sound" toggle on (default off). Reduced motion / Motion off: site.js skips the ride entirely. */
html[data-theme="neon"] .ride { background: transparent; }
html[data-theme="neon"] .ride__door {
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgb(154 255 243 / 0.85) 34px 36px, rgb(154 255 243 / 0.25) 36px 40px, transparent 40px 74px),
    repeating-linear-gradient(180deg, rgb(154 255 243 / 0) 0 120px, rgb(154 255 243 / 0.1) 120px 122px),
    linear-gradient(180deg, rgb(11 19 21 / 0.97), rgb(11 19 21 / 0.97) 50%, rgb(5 8 10 / 0.98));
  background-size: 100% 100%, 100% 244px, 100% 100%;
}
html[data-theme="neon"] .ride__door--l { box-shadow: inset -2px 0 0 var(--neon-ice), inset -10px 0 22px -8px var(--neon-glow-a); }
html[data-theme="neon"] .ride__door--r { box-shadow: inset 2px 0 0 var(--neon-ice), inset 10px 0 22px -8px var(--neon-glow-a); }
html[data-theme="neon"] .ride.is-riding .ride__door { animation: neon-slats-rise 500ms linear both; }
html[data-theme="neon"].ride-arrive .ride__door--l { animation: neon-slats-arrive 400ms linear both, door-open-l var(--dur-door) cubic-bezier(.2,.9,.1,1) 120ms both; }
html[data-theme="neon"].ride-arrive .ride__door--r { animation: neon-slats-arrive 400ms linear both, door-open-r var(--dur-door) cubic-bezier(.2,.9,.1,1) 120ms both; }
@keyframes neon-slats-rise   { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 -732px, 0 0; } }
@keyframes neon-slats-arrive { from { background-position: 0 0, 0 -732px, 0 0; } to { background-position: 0 0, 0 -976px, 0 0; } }
/* Same-page floors (theme-neon.js): after the jump the cab stays visible for 360 ms while it opens, with a hard stop. */
html[data-theme="neon"] .ride.neon-settle { visibility: visible; }
html[data-theme="neon"] .ride.neon-settle .ride__door { transition: transform 320ms cubic-bezier(.2,.9,.1,1); animation: neon-slats-arrive 320ms linear both; }
html[data-theme="neon"] .ride__indicator {
  background: var(--d-page-off);
  border: 1.5px solid var(--neon-ice);
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgb(0 0 0 / 0.7), 0 0 calc(28px * var(--neon-on)) var(--neon-glow-a);
}
html[data-theme="neon"] .ride__floor { color: var(--neon-ice); font-size: 1.6rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* Floors button (phone/tablet dock) and panel: numbered-callout floor indicator */
html[data-theme="neon"] .floors > summary {
  background: var(--d-card-flat);
  border-color: var(--neon-line);
  box-shadow: 0 0 0 4px rgb(5 8 10 / 0.85), 0 0 calc(18px * var(--neon-on)) var(--neon-glow-a), 0 12px 32px rgb(0 0 0 / 0.65);
}
html[data-theme="neon"] .floors__code {
  min-width: 2.1rem;
  font-size: 0.875rem;
  color: var(--neon-ice);
  border-radius: 4px;
  border: 1.5px solid var(--neon-ice);
  background: var(--d-page-off);
  box-shadow: 0 0 calc(10px * var(--neon-on)) var(--neon-glow-a);
  font-variant-numeric: tabular-nums;
}
html[data-theme="neon"] .floors__code.is-moving { animation: neon-ind 520ms cubic-bezier(.2,.9,.1,1) 1 both; }
@keyframes neon-ind {
  0% { background: repeating-linear-gradient(90deg, transparent 0 3px, rgb(154 255 243 / 0.6) 3px 4px) 0 100% / 100% 200%, var(--d-page-off); }
  80% { background: repeating-linear-gradient(90deg, transparent 0 3px, rgb(154 255 243 / 0.6) 3px 4px) 0 0 / 100% 200%, var(--d-page-off); }
  100% { background: var(--d-page-off); }
}
html[data-theme="neon"] .floors__panel { background: var(--d-card-flat); border-color: var(--neon-line); }
html[data-theme="neon"] .floors__list .floor-btn__code { border-radius: 4px; }
html[data-theme="neon"] .floors__list .floor-btn[aria-current="page"] {
  outline: 1px solid var(--neon-line);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =====================================================================================================
   EFFECTS OFF (config D effects_off), after everything so it always wins. Glow and motion off, 3D plates gone.
   ===================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="neon"] { --neon-on: 0; }
  html[data-theme="neon"] .ride__door, html[data-theme="neon"] .floors__code.is-moving { animation: none !important; }
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-theme="neon"] { --neon-on: 0; background: var(--d-page-off); }
  html[data-theme="neon"] :is(.deco-card, .concierge, .lobby-worked, .math, .itin-col, .door, .bellhop, .hero__example, .hero__example::before) {
    background: var(--d-card-flat);
    box-shadow: none;
  }
  html[data-theme="neon"] .btn { box-shadow: 0 0 0 2px var(--ink-1); }
  html[data-theme="neon"] .neon-gauge svg, html[data-theme="neon"] .skyline__layer { filter: none; }
  html[data-theme="neon"] .skyline__layer { filter: brightness(0) drop-shadow(0 -1px 0 rgb(154 255 243 / 0.85)); }
  html[data-theme="neon"] :is(.neon-deck, .neon-hud) { display: none; }
  html[data-theme="neon"] .hero__layers::after, html[data-theme="neon"] .scene--library::after { box-shadow: none; -webkit-mask-image: none; mask-image: none; }
  html[data-theme="neon"] img[src^="/assets/art/"] { filter: grayscale(1) sepia(1) hue-rotate(160deg) saturate(2.4); }
}
html[data-theme="neon"][data-motion="off"] { --neon-on: 0; }
html[data-theme="neon"][data-motion="off"] :is(.neon-deck, .neon-hud) { display: none; }
@media (prefers-contrast: more) {
  html[data-theme="neon"] { --d-rim: #9AFFF3; --neon-line: #E8FFFC; }
  html[data-theme="neon"] .hero__sky, html[data-theme="neon"] .scene--library,
  html[data-theme="neon"] :is([data-neon-dial="8"], [data-neon-dial="7"]):not(.hero) { background: var(--d-page-off); }
  html[data-theme="neon"] .hero__layers::after, html[data-theme="neon"] .scene--library::after,
  html[data-theme="neon"] :is([data-neon-dial="8"], [data-neon-dial="7"]):not(.hero)::after { display: none; }
}
@media (forced-colors: active) {
  .neon-hud, .neon-deck, .neon-gauges { display: none; }
  html[data-theme="neon"] [data-neon-dial]::after { display: none; }
  html[data-theme="neon"] .hero__layers::after, html[data-theme="neon"] .scene--library::after { display: none; }
}

/* ---------------------------------------------------------------- WebGL2 hero floor (assets/neon-gl.js, v8.2 preview)
   When the renderer is running, .hero gets .has-neon-gl and the CSS floor steps aside. If the renderer bails
   (no WebGL2, frame budget, context loss) the class is removed and the CSS floor above is the fallback. */
html[data-theme="neon"] .neon-gl { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }
html[data-theme="neon"] .hero.has-neon-gl .hero__layers::after { display: none; }
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-theme="neon"] .neon-gl { display: none; }
  html[data-theme="neon"] .hero.has-neon-gl .hero__layers::after { display: block; }
}
html[data-theme="neon"][data-motion="off"] .neon-gl { display: none; }