/* ==========================================================================
   V10 — universe hero, BUILD 001 command center, content universe (Latest
   Episode/AI Lab/Archive cards), the large Dreams planetary system, the 60-day
   section, Subscribe strip, Mia companion, and their responsive/reduced-motion
   rules. Ported from V9_Homepage_Universe_Prototype.html (approved as V10,
   Founder Decision 2026-09-04) verbatim except where a comment below marks a
   deliberate change for the Eleventy port or a later Founder Decision. The
   standalone finale section (participation stars, "See what happens" ending)
   was removed by later amendments — see build001-readiness.njk and
   content-universe.njk's own header comments for what replaced them.
   Founder-directed visual/information-hierarchy refinement, 2026-09-04 (round
   5): Archive moved from its own standalone section into the content-universe
   grid; Dreams moved out of that grid into its own large section, replacing
   Archive's old standalone slot. See each block's own comment below.
   Production-readiness correction, 2026-09-04: nav, footer, Mia companion, and
   `.glass` have all been MOVED OUT of this file to chrome.css, which loads on
   every page (this file remains gated to the homepage only via base.njk's
   `page.url == "/"` check). Do not re-add nav/footer/Mia rules here — those
   partials render site-wide, so their styling belongs in chrome.css. Only
   truly homepage-only chrome (hero, worlds, content-universe, Dreams, the
   60-day section/timeline, and their animation) stays in this file. */
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{ background:var(--bg); color:var(--platinum); font-family:var(--sans); line-height:1.65; overflow-x:hidden; }
  a{color:inherit;}
  ::selection{ background:var(--ice); color:#02040a; }
  button{ font-family:inherit; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--ice); outline-offset:3px; border-radius:4px; }
  .board-tag{ position:fixed; bottom:14px; right:14px; z-index:999; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--platinum-dim); border:1px solid var(--glass-border); padding:6px 10px; background:rgba(2,4,10,.85); backdrop-filter:blur(8px); }
  section{ padding:96px 6vw; max-width:1440px; margin:0 auto; position:relative; z-index:2; }
  .kicker{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ice); margin-bottom:14px; font-weight:600; display:flex; align-items:center; gap:10px; }
  .kicker .blink{ width:5px; height:5px; border-radius:50%; background:var(--ice); box-shadow:0 0 8px var(--ice); animation:blink 1.8s infinite; }
  @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
  h2{ font-weight:700; letter-spacing:-.01em; line-height:1.15; max-width:760px; color:var(--platinum); }
  .lede{ font-size:15.5px; color:var(--platinum-dim); max-width:580px; margin-top:14px; line-height:1.75; }
  .fade{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .fade.in{ opacity:1; transform:translateY(0); }

  /* ===================== HERO ===================== */
  /* Explicit background required here: components.css still has an orphaned .hero{background:
     var(--color-bg-alt)} rule from the pre-V10 homepage (same class name, no other page uses it
     now — see git history). That rule has no competing background declaration to lose to inside
     this file, so it wins the cascade unopposed and paints the hero near-white. Setting it here
     is the fix, and is also correct on its own terms: the frozen V10 prototype's hero was always
     meant to sit on the near-black --bg, not rely on inheriting body's background. */
  .hero{ height:100vh; min-height:780px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; transition:opacity .4s ease, transform .4s ease; touch-action:none; background:var(--bg); padding:0; }
  .starfield-canvas, .fx-canvas{ position:absolute; inset:0; z-index:0; pointer-events:none; width:100%; height:100%; }
  .fx-canvas{ z-index:1; }
  /* CSS-only Milky Way base layer — renders independently of canvas/JS so the sky is never
     empty even before the first animation frame paints. The canvas layer adds twinkle/parallax on top. */
  .milkyway-css{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .milkyway-css::before{ content:''; position:absolute; top:-30%; left:-25%; width:150%; height:160%;
    background: linear-gradient(112deg, transparent 30%, rgba(99,182,224,0.05) 42%, rgba(122,104,199,0.09) 48%, rgba(180,150,232,0.1) 52%, rgba(99,182,224,0.06) 58%, transparent 70%);
    transform: rotate(-16deg); filter: blur(2px); }
  .milkyway-css::after{ content:''; position:absolute; inset:0;
    background-image:
      radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,0.85), transparent),
      radial-gradient(1.3px 1.3px at 22% 68%, rgba(255,255,255,0.7), transparent),
      radial-gradient(2px 2px at 33% 14%, rgba(233,236,240,0.9), transparent),
      radial-gradient(1.4px 1.4px at 46% 78%, rgba(255,255,255,0.6), transparent),
      radial-gradient(1.8px 1.8px at 58% 30%, rgba(233,236,240,0.85), transparent),
      radial-gradient(1.2px 1.2px at 68% 60%, rgba(255,255,255,0.55), transparent),
      radial-gradient(2.2px 2.2px at 78% 20%, rgba(255,255,255,0.9), transparent),
      radial-gradient(1.5px 1.5px at 86% 72%, rgba(233,236,240,0.7), transparent),
      radial-gradient(1.3px 1.3px at 8% 48%, rgba(255,255,255,0.6), transparent),
      radial-gradient(1.7px 1.7px at 92% 42%, rgba(255,255,255,0.75), transparent),
      radial-gradient(1.2px 1.2px at 40% 92%, rgba(255,255,255,0.55), transparent),
      radial-gradient(1.6px 1.6px at 62% 8%, rgba(255,255,255,0.7), transparent),
      radial-gradient(1.2px 1.2px at 25% 88%, rgba(255,255,255,0.5), transparent),
      radial-gradient(1.9px 1.9px at 71% 90%, rgba(255,255,255,0.8), transparent),
      radial-gradient(1.3px 1.3px at 15% 8%, rgba(255,255,255,0.6), transparent);
    background-repeat:no-repeat; opacity:.9; }
  .universe-wrap{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; cursor:grab; }
  .universe-wrap.dragging{ cursor:grabbing; }
  .universe{ position:relative; width:min(1560px, 92vw); height:min(820px, 82vh); }
  .orbit-guides{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.22; }

  .thesis-arc{ position:absolute; top:22%; left:50%; transform:translateX(-50%); width:640px; max-width:90vw; z-index:6; pointer-events:none; text-align:center; animation:thesisfloat 8s ease-in-out infinite; }
  @keyframes thesisfloat{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(-5px);} }
  .thesis-arc .t-line{ font-family:var(--sans); font-size:26px; font-weight:300; letter-spacing:.22em; color:var(--platinum); opacity:.97; text-transform:uppercase;
    text-shadow: 0 0 16px rgba(255,246,224,0.55), 0 0 34px rgba(255,214,160,0.35), 0 0 60px rgba(99,182,224,0.25);
    animation: thesisradiate 5.2s ease-in-out infinite; }
  .thesis-arc .t-line b{ color:var(--ice); font-weight:600; text-shadow: 0 0 16px rgba(99,182,224,0.6), 0 0 34px rgba(122,104,199,0.4); }
  /* WCAG AA fix, preview QA 2026-09-04: opacity:.75 on --platinum-dim measured 3.99:1 (needs
     4.5:1) — same opacity-dimming pattern as the Gate 1 manifest fix and the .f-legal fix above.
     Reusing --platinum-faint (5.14:1) rather than a new color. */
  .thesis-arc .t-sub{ margin-top:12px; font-size:12px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--platinum-faint); }
  @keyframes thesisradiate{ 0%,100%{ text-shadow: 0 0 16px rgba(255,246,224,0.5), 0 0 32px rgba(255,214,160,0.3), 0 0 56px rgba(99,182,224,0.22); } 50%{ text-shadow: 0 0 22px rgba(255,246,224,0.7), 0 0 44px rgba(255,214,160,0.42), 0 0 76px rgba(99,182,224,0.32); } }

  .rotator{ position:absolute; inset:0; will-change:transform; }
  .star-wrap{ position:absolute; top:50%; left:50%; width:300px; height:300px; margin:-150px; will-change:transform; z-index:250; }
  .star-rays{ position:absolute; inset:-150px; border-radius:50%; background:repeating-conic-gradient(rgba(255,246,224,0.07) 0deg 1.2deg, transparent 1.2deg 14deg); -webkit-mask-image:radial-gradient(circle, black 24%, transparent 62%); mask-image:radial-gradient(circle, black 24%, transparent 62%); animation:starrayspin 150s linear infinite; }
  .star-outerglow{ position:absolute; inset:-80px; border-radius:50%; background:radial-gradient(circle, rgba(99,182,224,0.1), transparent 70%); filter:blur(16px); animation:starpulse 7s ease-in-out infinite reverse; }
  .star-gravlens{ position:absolute; inset:-30px; border-radius:50%; backdrop-filter:blur(4px) brightness(1.08) saturate(1.15); -webkit-backdrop-filter:blur(4px) brightness(1.08) saturate(1.15); }
  .star-corona{ position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle, rgba(255,246,224,0.2) 0%, rgba(255,200,150,0.1) 22%, rgba(99,182,224,0.13) 40%, rgba(122,104,199,0.06) 62%, transparent 78%); filter:blur(11px); animation:starpulse 5.2s ease-in-out infinite; }
  .star-turbulence{ position:absolute; inset:26px; border-radius:50%; overflow:hidden; }
  .star-plasma-a{ position:absolute; inset:-10%; background:conic-gradient(from 0deg, rgba(255,250,240,0.5), rgba(143,207,232,0.15) 30%, rgba(122,104,199,0.3) 55%, rgba(255,214,160,0.35) 75%, rgba(255,250,240,0.5)); mix-blend-mode:screen; opacity:.55; animation:plasmaspin 22s linear infinite; }
  .star-plasma-b{ position:absolute; inset:-10%; background:radial-gradient(circle at 62% 60%, rgba(143,207,232,0.5), transparent 55%), radial-gradient(circle at 30% 30%, rgba(255,246,224,0.4), transparent 45%); mix-blend-mode:screen; opacity:.5; animation:plasmaspin 31s linear infinite reverse; }
  .star-plasma-c{ position:absolute; inset:-10%; background:radial-gradient(circle at 50% 75%, rgba(122,104,199,0.4), transparent 50%); mix-blend-mode:screen; opacity:.4; animation:plasmaspin 40s linear infinite; }
  @keyframes plasmaspin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
  .star-flares{ position:absolute; inset:-60px; }
  .star-flares path{ fill:none; stroke-width:1.8; stroke-linecap:round; opacity:0; }
  .flare-1{ stroke:#ffe9c2; animation:flare 11s ease-in-out infinite; }
  .flare-2{ stroke:#9fd6ee; animation:flare 14s ease-in-out 3.5s infinite; }
  .flare-3{ stroke:#c9b8f0; animation:flare 17s ease-in-out 7s infinite; }
  .flare-4{ stroke:#ffd6a0; animation:flare 13s ease-in-out 9.5s infinite; }
  @keyframes flare{ 0%,84%,100%{ opacity:0;} 89%{ opacity:.6;} 94%{ opacity:.15;} }
  .star-lens{ position:absolute; inset:40px; border-radius:50%; border:1px solid rgba(233,236,240,0.17); animation:starrotate 52s linear infinite; }
  .star-lens.l2{ inset:58px; border-color:rgba(99,182,224,0.22); animation-duration:74s; animation-direction:reverse; }
  .star-lens.l3{ inset:22px; border-color:rgba(255,233,194,0.15); animation-duration:34s; opacity:0; transition:opacity 1.4s ease; }
  .star-core{ position:absolute; inset:104px; border-radius:50%; background:radial-gradient(circle at 40% 36%, #fffaf0, #ffe6c2 16%, #d8ecf7 34%, #8fcfe8 54%, rgba(122,104,199,0.45) 78%, transparent 100%); box-shadow:0 0 70px rgba(233,236,240,.4), 0 0 160px rgba(99,182,224,.28), 0 0 60px rgba(255,214,160,.2); animation:starcorepulse 5.2s ease-in-out infinite; }
  @keyframes starpulse{ 0%,100%{ opacity:.82; transform:scale(1);} 50%{ opacity:1; transform:scale(1.05);} }
  @keyframes starcorepulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.045);} }
  @keyframes starrotate{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
  @keyframes starrayspin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

  /* world: positioned purely via JS-computed 2D translate + scale (no 3D rotation is ever
     applied to this element), so the title layer can never mirror, flip, or tip. */
  .world{ position:absolute; top:50%; left:50%; width:260px; height:260px; margin:-130px; cursor:pointer; display:flex; align-items:center; justify-content:center; will-change:transform, opacity, filter; backface-visibility:hidden; }
  .world-shell{ position:absolute; inset:0; border-radius:50%; overflow:hidden; animation:shellspin 65s linear infinite; }
  .world-shell::before{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--shell-grad); }
  .world-shell::after{ content:''; position:absolute; width:50%; height:50%; border-radius:50%; top:22%; left:18%; background:radial-gradient(circle, rgba(255,255,255,0.42), transparent 70%); filter:blur(7px); animation:innerdrift 10s ease-in-out infinite; }
  @keyframes shellspin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
  @keyframes innerdrift{ 0%,100%{ top:20%; left:16%;} 33%{ top:50%; left:36%;} 66%{ top:24%; left:58%;} }
  .world-scan{ position:absolute; inset:0; border-radius:50%; overflow:hidden; opacity:.5; }
  .world-scan::before{ content:''; position:absolute; left:-20%; top:-60%; width:140%; height:40%; background:linear-gradient(180deg, transparent, rgba(255,255,255,0.22), transparent); animation:scansweep 6.5s ease-in-out infinite; }
  @keyframes scansweep{ 0%{ transform:translateY(0);} 100%{ transform:translateY(420%);} }
  .world-atmosphere{ position:absolute; inset:-10px; border-radius:50%; background:radial-gradient(circle, transparent 62%, var(--atmo-color) 84%, transparent 100%); opacity:.55; pointer-events:none; }
  .world-rim{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--glass-border); box-shadow: inset -16px -16px 30px rgba(0,0,0,0.46), inset 7px 7px 18px rgba(255,255,255,0.09), inset 0 0 40px var(--rim-glow); backdrop-filter:blur(9px); transition:border-color .3s ease, box-shadow .3s ease; pointer-events:none; }
  .world:hover .world-rim, .world.focused .world-rim{ border-color:var(--glass-border-strong); box-shadow: inset -16px -16px 30px rgba(0,0,0,0.36), inset 9px 9px 22px rgba(255,255,255,0.14), 0 0 34px var(--rim-glow); }
  .world-highlight{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at var(--mx,50%) var(--my,20%), rgba(255,255,255,0.16), transparent 55%); opacity:0; transition:opacity .3s ease; pointer-events:none; }
  .world:hover .world-highlight, .world.focused .world-highlight, .world.near .world-highlight{ opacity:1; }
  .world-content{ position:relative; z-index:2; text-align:center; padding:14px; pointer-events:none; }
  .world-word{ font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--platinum); text-shadow:0 2px 12px rgba(2,4,10,0.65); }
  /* Legibility-only adjustment, Founder-directed visual/information-hierarchy refinement,
     2026-09-04 (round 5): "Latest Episode" and "Build 001" are visually longer than the single
     words they replace (Episodes, Lab) — explicitly permitted by "unless a label requires a minor
     legibility adjustment." No color/position/geometry changes, only tighter tracking/size so the
     label fits the same 260px sphere without wrapping oddly. */
  .world-word--long{ font-size:11px; letter-spacing:.1em; }
  .world-title{ font-size:15px; font-weight:700; letter-spacing:-.005em; color:var(--platinum); margin-top:7px; opacity:0; max-height:0; overflow:hidden; transition:opacity .35s ease; }
  .world:hover .world-title, .world.focused .world-title{ opacity:1; max-height:30px; }
  .world-meta{ opacity:0; max-height:0; overflow:hidden; transition:opacity .35s ease .05s; }
  .world:hover .world-meta, .world.focused .world-meta{ opacity:1; max-height:60px; }
  .world-line{ font-size:10.5px; color:var(--platinum-dim); line-height:1.5; margin-top:4px; padding:0 10px; }

  .world--build{ --shell-grad: radial-gradient(circle at 30% 26%, rgba(255,255,255,0.22), rgba(255,214,160,0.14) 34%, rgba(230,140,70,0.1) 62%, rgba(2,4,10,0.4) 100%); --atmo-color: rgba(255,190,120,0.4); --rim-glow: rgba(255,190,120,0.14); }
  .world--show{ --shell-grad: radial-gradient(circle at 30% 26%, rgba(255,255,255,0.2), rgba(143,207,232,0.15) 34%, rgba(99,182,224,0.1) 62%, rgba(2,4,10,0.4) 100%); --atmo-color: rgba(99,182,224,0.4); --rim-glow: rgba(99,182,224,0.14); }
  .world--lab{ --shell-grad: radial-gradient(circle at 30% 26%, rgba(255,255,255,0.2), rgba(180,150,232,0.15) 34%, rgba(122,104,199,0.11) 62%, rgba(2,4,10,0.4) 100%); --atmo-color: rgba(138,120,212,0.4); --rim-glow: rgba(138,120,212,0.14); }
  .world--proof{ --shell-grad: radial-gradient(circle at 30% 26%, rgba(255,255,255,0.2), rgba(140,220,190,0.14) 34%, rgba(90,180,150,0.1) 62%, rgba(2,4,10,0.4) 100%); --atmo-color: rgba(120,210,180,0.36); --rim-glow: rgba(120,210,180,0.12); }

  .scrim{ position:fixed; inset:0; background:rgba(2,4,10,0.72); backdrop-filter:blur(6px); z-index:300; opacity:0; pointer-events:none; transition:opacity .4s ease; }
  .scrim.active{ opacity:1; pointer-events:auto; }
  .expand-card{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.7); width:min(520px,86vw); z-index:301; padding:40px 36px; opacity:0; pointer-events:none; transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); text-align:center; border-radius:24px; }
  .expand-card.active{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
  .expand-card .e-kicker{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); margin-bottom:12px; }
  .expand-card h3{ font-size:26px; font-weight:800; margin-bottom:10px; }
  .expand-card p{ font-size:13.5px; color:var(--platinum-dim); line-height:1.7; max-width:400px; margin:0 auto 16px; }
  .expand-card .e-note{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--platinum-dim); border:1px dashed var(--glass-border); border-radius:20px; padding:7px 16px; display:inline-block; }
  .expand-close{ position:absolute; top:14px; right:16px; width:28px; height:28px; border-radius:50%; border:1px solid var(--glass-border); background:transparent; color:var(--platinum-dim); cursor:pointer; font-size:13px; }
  .expand-close:hover{ color:var(--platinum); border-color:var(--glass-border-strong); }

  .prep-console{ position:absolute; left:50%; bottom:40px; transform:translateX(-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:9px; }
  .prep-label{ font-size:10.5px; letter-spacing:.16em; color:var(--platinum-dim); text-transform:uppercase; display:flex; align-items:center; gap:9px; }
  .prep-label b{ color:var(--ice); font-weight:600; }
  .prep-label i{ width:5px; height:5px; border-radius:50%; background:var(--ice); box-shadow:0 0 8px var(--ice); animation:blink 1.8s infinite; }
  /* WCAG AA fix, preview QA 2026-09-04: opacity:.7 measured 3.6:1 (needs 4.5:1). transition:opacity
     is preserved (no JS toggles this element's opacity — it's unused for state, confirmed by
     searching universe.js) since it costs nothing to keep and may be reused later. */
  .prep-msg{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--platinum-faint); min-width:170px; text-align:center; transition:opacity .4s ease; }
  .prep-scan{ position:relative; width:170px; height:2px; background:rgba(99,182,224,0.12); overflow:hidden; border-radius:2px; }
  .prep-scan-bar{ position:absolute; top:0; left:0; width:40%; height:100%; background:linear-gradient(90deg, transparent, var(--ice), transparent); animation:scan 3.2s ease-in-out infinite; }
  @keyframes scan{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(350%);} }
  .prep-segments{ display:flex; gap:3px; }
  .prep-segments span{ width:6px; height:6px; border-radius:1px; background:rgba(99,182,224,0.18); animation:segpulse 2.4s ease-in-out infinite; animation-delay:calc(var(--n) * 0.15s); }
  @keyframes segpulse{ 0%,100%{ background:rgba(99,182,224,0.18);} 50%{ background:var(--ice); box-shadow:0 0 6px var(--ice);} }

  /* ===================== BUILD 001 — unified command center =====================
     Refactored 2026-09-04 (V10_Amendment_2026-09-04_Homepage_Iteration.md, Unified Build
     Foundation command center): the prior three separate glass containers (.hub, .chamber,
     .readiness — with Baseline and Protocol duplicated between the readiness list and the
     chamber vitals) are replaced by one outer .command-center panel containing a .cc-header
     strip and a .cc-body grid (chamber visual + one deduplicated .cc-matrix). The old .hub/
     .readiness/.r-row/.r-dot/.r-label/.r-value/.r-tag/.chamber-hud rules are retired along with
     the markup that used them — build001-readiness.njk now reuses .cv-row/.cv-dot/.cv-label/
     .cv-value (formerly chamber-only) for the single matrix. */
  .node-section{ padding-top:64px; }
  .command-center{ padding:0; overflow:hidden; }
  .cc-header{ padding:28px 34px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; border-bottom:1px solid var(--glass-border); }
  .cc-header-id{ display:flex; align-items:center; gap:16px; }
  .hub-core{ width:44px; height:44px; border-radius:50%; background:radial-gradient(circle, rgba(99,182,224,.45), rgba(99,182,224,.05) 70%); border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .hub-core i{ width:10px; height:10px; border-radius:50%; background:var(--ice); box-shadow:0 0 12px var(--ice); animation:corebreathe 3.4s ease-in-out infinite; }
  @keyframes corebreathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.25);} }
  .cc-header-id h3{ font-size:clamp(19px,2.2vw,26px); font-weight:700; letter-spacing:-.01em; }
  .cc-header-id .id{ font-size:10.5px; color:var(--platinum-dim); letter-spacing:.1em; }
  .hub-status{ font-size:11.5px; letter-spacing:.08em; color:var(--ice); border-radius:24px; padding:8px 15px; display:flex; align-items:center; gap:9px; background:rgba(99,182,224,.06); border:1px solid var(--glass-border); }

  /* Holographic Brian chamber (left) + unified readiness/vitals matrix (right). Scan lines,
     energy rings, and corner brackets are decorative chrome around a temporary labeled
     silhouette — not a real photo or generated likeness. */
  .cc-body{ padding:30px 34px; display:grid; grid-template-columns:180px 1fr; gap:32px; align-items:center; }
  .chamber-visual{ position:relative; width:180px; height:220px; border-radius:14px; overflow:hidden; background:radial-gradient(circle at 50% 28%, rgba(99,182,224,0.1), transparent 68%); border:1px solid var(--glass-border); }
  .chamber-scanlines{ position:absolute; inset:0; background-image:repeating-linear-gradient(to bottom, rgba(99,182,224,0.09) 0px, rgba(99,182,224,0.09) 1px, transparent 2px, transparent 5px); background-size:100% 40px; animation:chamberscan 5s linear infinite; opacity:.6; pointer-events:none; }
  @keyframes chamberscan{ from{ background-position:0 0;} to{ background-position:0 200px;} }
  .chamber-rings{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
  .chamber-rings span{ position:absolute; width:40px; height:40px; border:1px solid var(--glass-border-strong); border-radius:50%; opacity:.6; animation:chamberring 4.2s ease-out infinite; }
  .chamber-rings span:nth-child(2){ animation-delay:1.4s; }
  .chamber-rings span:nth-child(3){ animation-delay:2.8s; }
  @keyframes chamberring{ 0%{ width:36px; height:36px; opacity:.55;} 100%{ width:170px; height:210px; opacity:0;} }
  .chamber-silhouette{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:82px; height:168px; fill:rgba(99,182,224,0.14); stroke:rgba(99,182,224,0.4); stroke-width:1; }
  .chamber-brackets{ position:absolute; inset:10px; pointer-events:none; }
  .chamber-brackets .cb{ position:absolute; width:16px; height:16px; }
  .chamber-brackets .cb.tl{ top:0; left:0; border-top:1px solid var(--glass-border-strong); border-left:1px solid var(--glass-border-strong); }
  .chamber-brackets .cb.tr{ top:0; right:0; border-top:1px solid var(--glass-border-strong); border-right:1px solid var(--glass-border-strong); }
  .chamber-brackets .cb.bl{ bottom:0; left:0; border-bottom:1px solid var(--glass-border-strong); border-left:1px solid var(--glass-border-strong); }
  .chamber-brackets .cb.br{ bottom:0; right:0; border-bottom:1px solid var(--glass-border-strong); border-right:1px solid var(--glass-border-strong); }
  .chamber-tag{ position:absolute; left:6px; right:6px; bottom:6px; text-align:center; font-size:7.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--platinum-faint); line-height:1.4; }

  /* Unified readiness + vitals matrix — one row per truthful PREPARING state, deduplicated
     (Baseline/Protocol previously appeared here AND in the old chamber vitals). Structure rows
     (Protocol, Evidence — real work exists, just not data yet) get the ice dot + brighter label;
     everything else stays quiet so nothing reads as more "ready" than it is. */
  .cc-matrix{ display:flex; flex-direction:column; gap:2px; }
  .cv-row{ display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid rgba(233,236,240,0.05); }
  .cv-row:last-child{ border-bottom:none; }
  .cv-dot{ width:7px; height:7px; border-radius:50%; background:var(--platinum-faint); flex-shrink:0; }
  .cv-dot.structure{ background:var(--ice); box-shadow:0 0 7px var(--ice); }
  .cv-label{ flex:0 0 190px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--platinum-faint); }
  .cv-row.structure .cv-label{ color:var(--platinum); font-weight:600; }
  .cv-value{ font-size:12.5px; color:var(--platinum-faint); }
  .cv-row.structure .cv-value{ color:var(--platinum-dim); }

  /* ===================== PARTICIPATION LAYER ("What will you build?") ===================== */
  .p-manifesto{ margin-top:8px; max-width:600px; }
  .p-manifesto .line2{ font-size:16.5px; color:var(--platinum); font-weight:500; margin-top:12px; line-height:1.6; }
  .p-manifesto .line2 b{ color:var(--ice); font-weight:600; }

  .constellation{ position:relative; margin-top:52px; height:420px; border-radius:24px; overflow:hidden;
    background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(99,182,224,0.045), transparent 72%);
    border:1px solid rgba(99,182,224,0.08); }
  .constellation::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.8;
    background-image:
      radial-gradient(1.3px 1.3px at 10% 20%, rgba(255,255,255,0.55), transparent),
      radial-gradient(1.1px 1.1px at 20% 65%, rgba(255,255,255,0.4), transparent),
      radial-gradient(1.6px 1.6px at 32% 40%, rgba(233,236,240,0.6), transparent),
      radial-gradient(1.2px 1.2px at 44% 80%, rgba(255,255,255,0.35), transparent),
      radial-gradient(1.4px 1.4px at 58% 15%, rgba(233,236,240,0.55), transparent),
      radial-gradient(1.1px 1.1px at 68% 55%, rgba(255,255,255,0.35), transparent),
      radial-gradient(1.7px 1.7px at 80% 30%, rgba(255,255,255,0.6), transparent),
      radial-gradient(1.2px 1.2px at 90% 70%, rgba(233,236,240,0.4), transparent),
      radial-gradient(1.1px 1.1px at 5% 88%, rgba(255,255,255,0.35), transparent),
      radial-gradient(1.3px 1.3px at 95% 12%, rgba(255,255,255,0.45), transparent);
    background-repeat:no-repeat; }

  .pstar{ position:absolute; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:transform .6s cubic-bezier(.16,1,.3,1); }
  .pstar-core{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--glass-border);
    background: radial-gradient(circle at 35% 30%, rgba(233,236,240,0.28), rgba(99,182,224,0.05) 55%, transparent 80%);
    transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .5s ease, background .5s ease;
    animation: pbreathe 5.5s ease-in-out infinite; }
  .pstar-label{ position:relative; z-index:2; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--platinum-dim); text-align:center; padding:0 4px; transition:color .4s ease; pointer-events:none; }
  .pstar-tooltip{ position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px); width:172px;
    text-align:center; font-size:10.5px; line-height:1.55; color:var(--platinum-dim); opacity:0; pointer-events:none;
    transition:opacity .3s ease, transform .3s ease; background:rgba(2,4,10,0.88); border:1px solid var(--glass-border);
    border-radius:10px; padding:10px 13px; backdrop-filter:blur(12px); z-index:5; }
  @keyframes pbreathe{ 0%,100%{ opacity:.65;} 50%{ opacity:1;} }

  .pstar.near .pstar-core{ box-shadow:0 0 22px var(--p-glow, rgba(99,182,224,0.28)); border-color:rgba(99,182,224,0.28); }
  .pstar:hover .pstar-tooltip, .pstar:focus-visible .pstar-tooltip, .pstar.tapped .pstar-tooltip{ opacity:1; transform:translateX(-50%) translateY(0); }
  .pstar:hover .pstar-core, .pstar:focus-visible .pstar-core, .pstar.tapped .pstar-core{ box-shadow:0 0 44px var(--p-glow, rgba(99,182,224,0.55)); border-color:var(--glass-border-strong); transform:scale(1.22);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), var(--p-glow, rgba(99,182,224,0.22)) 55%, transparent 80%); }
  .pstar:hover .pstar-label, .pstar:focus-visible .pstar-label, .pstar.tapped .pstar-label{ color:var(--platinum); }

  .pstar--yourbuild{ width:78px; height:78px; margin:-39px 0 0 -39px; }
  .pstar--yourbuild .pstar-core{ border-style:dashed; border-color:rgba(233,236,240,0.24); background:radial-gradient(circle at 35% 30%, rgba(233,236,240,0.14), transparent 70%); animation:pbreatheOpen 4.2s ease-in-out infinite; }
  @keyframes pbreatheOpen{ 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:.9; transform:scale(1.06);} }
  .pstar--yourbuild .pstar-label{ font-weight:600; letter-spacing:.14em; }

  /* PREPARING state: no CTA here — the constellation plants the idea, nothing to click yet */
  /* WCAG AA fix, preview QA 2026-09-04: opacity:.7 measured 3.6:1 (needs 4.5:1). */
  .p-brian-line{ margin-top:34px; font-size:11.5px; color:var(--platinum-faint); }

  /* Mia companion CSS moved to chrome.css, 2026-09-04 (production-readiness correction) — it
     renders site-wide (mia-companion.njk is included unconditionally from base.njk), so its
     styling needs to load unconditionally too, not only on the homepage. See chrome.css. */
  /* ===================== CONTENT UNIVERSE — Latest Episode / AI Lab / Archive =====================
     Public terminology finalized 2026-09-04 (Final Public Terminology), then refined again the
     same day by round 5 (Founder-directed visual/information-hierarchy refinement): Episodes ->
     Latest Episode, Lab -> AI Lab, and Archive moves in from its own standalone section to replace
     Dreams (which moves OUT to its own large section — see "DREAMS PLANETARY SYSTEM" below). Class
     names below (cu-show/cu-lab/cu-archive) are internal styling identifiers kept from the
     original prototype/terminology and are not visible copy — only the ids/aria-labels/text in
     content-universe.njk are public-facing and have been updated. The "Inside Build 001" heading
     illumination (renamed from "Explore the Build", mechanism unchanged) lives directly below
     this block's own comment. */
  #content-universe h2{ position:relative; display:inline-block; color:var(--platinum); text-shadow:0 0 0 transparent; transition:text-shadow .6s ease, color .3s ease; outline-offset:6px; }
  /* One-time illumination, Founder-directed homepage evolution 2026-09-04: .lit is added once by
     an IntersectionObserver in universe.js as the section first enters the viewport (then the
     observer disconnects, so it can never re-trigger), giving a slow ice-to-violet glow plus a
     single light sweep across the text. Text color itself never changes (stays solid --platinum,
     ~18:1 against --bg) — only text-shadow/the ::after sweep animate — so WCAG AA contrast is
     unaffected regardless of animation phase. Hover/focus (every time, not just once) reuses the
     same glow at a slightly stronger intensity; tabindex="0" on the heading in content-
     universe.njk makes :focus-visible reachable by keyboard even though it isn't a real control. */
  #content-universe h2.lit{ animation:exploreglow 6s ease-in-out infinite; }
  @keyframes exploreglow{ 0%,100%{ text-shadow:0 0 16px rgba(99,182,224,.32), 0 0 30px rgba(122,104,199,.2);} 50%{ text-shadow:0 0 22px rgba(99,182,224,.48), 0 0 40px rgba(122,104,199,.3);} }
  #content-universe h2::after{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgba(233,236,240,.6), rgba(99,182,224,.45), transparent); transform:skewX(-20deg); opacity:0; pointer-events:none; }
  #content-universe h2.lit::after{ animation:h2sweep 1.6s ease-out .2s 1; }
  @keyframes h2sweep{ 0%{ left:-60%; opacity:0;} 15%{ opacity:1;} 100%{ left:130%; opacity:0;} }
  #content-universe h2:hover, #content-universe h2:focus-visible{ text-shadow:0 0 26px rgba(99,182,224,.55), 0 0 46px rgba(122,104,199,.32); }
  #content-universe h2:focus-visible{ outline:2px solid var(--ice); border-radius:4px; }
  .cu-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:min-content; gap:18px; margin-top:40px; }
  .cu-portal{ position:relative; min-height:380px; border-radius:20px; overflow:hidden; border:1px solid var(--glass-border);
    background:#05070d; backdrop-filter:blur(14px); transition:border-color .4s ease, transform .4s ease, box-shadow .4s ease;
    cursor:pointer; outline:none; }
  .cu-portal:hover, .cu-portal:focus-visible{ border-color:var(--glass-border-strong); transform:translateY(-3px); box-shadow:0 24px 60px -24px rgba(0,0,0,.6); }
  /* Final Follow-flow correction, 2026-09-04: Episodes ("cu-show" internally) no longer spans the
     full row — with the Follow card removed, the grid is exactly three cards and all three sit
     equal-width. The old .cu-show{grid-column:1/-1} override (and its 980px-breakpoint reset) is
     removed rather than left dead. */
  .cu-visual{ position:absolute; inset:0; z-index:1; }
  .cu-body{ position:absolute; left:0; right:0; bottom:0; padding:26px 28px; z-index:3;
    background:linear-gradient(180deg, transparent, rgba(2,4,10,0.7) 50%, rgba(2,4,10,0.93)); }
  .cu-body h3{ font-size:22px; font-weight:700; color:var(--platinum); margin-bottom:8px; letter-spacing:-.005em; }
  .cu-desc{ font-size:12.5px; color:var(--platinum-dim); line-height:1.6; max-width:460px; margin-bottom:13px; }
  .cu-status{ font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--platinum-dim); display:flex; align-items:center; gap:8px; }
  .cu-dot{ width:5px; height:5px; border-radius:50%; background:rgba(139,145,153,0.6); display:inline-block; flex-shrink:0; }
  .cu-cta{ margin-top:15px; }

  /* SHOW — cinematic aperture */
  .cu-show .cu-visual{ background:radial-gradient(ellipse at 50% 42%, rgba(99,182,224,0.1), transparent 68%), #05070d; }
  .cu-iris{ position:absolute; top:40%; left:50%; width:130px; height:130px; margin:-65px 0 0 -65px; }
  .cu-iris .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(233,236,240,0.18); transition:transform .6s cubic-bezier(.16,1,.3,1); }
  .cu-iris .ring2{ inset:18px; border-color:rgba(99,182,224,0.28); transition:transform .6s cubic-bezier(.16,1,.3,1) .05s; }
  .cu-iris .core{ position:absolute; inset:40%; border-radius:50%;
    background:radial-gradient(circle, rgba(233,236,240,0.55), rgba(99,182,224,0.18) 60%, transparent 80%);
    transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
  .cu-show:hover .cu-iris .core, .cu-show:focus-visible .cu-iris .core{ transform:scale(1.7); opacity:1; }
  .cu-show:hover .cu-iris .ring, .cu-show:focus-visible .cu-iris .ring{ transform:scale(1.2); }
  .cu-show:hover .cu-iris .ring2, .cu-show:focus-visible .cu-iris .ring2{ transform:scale(1.3); }
  .cu-scanline{ position:absolute; left:0; right:0; top:-6%; height:2px; background:linear-gradient(90deg, transparent, rgba(233,236,240,0.3), transparent); animation:cuscan 7s linear infinite; }
  @keyframes cuscan{ 0%{ transform:translateY(0);} 100%{ transform:translateY(1100%);} }
  .cu-letterbox{ position:absolute; left:0; right:0; height:13%; background:#02040a; z-index:2; }
  .cu-letterbox.top{ top:0;} .cu-letterbox.bottom{ bottom:0;}

  /* LAB — node graph (fixed-height header zone so it can never collide with the text overlay below,
     regardless of how tall the description text runs) */
  .cu-graph{ position:absolute; top:0; left:0; right:0; height:150px; width:100%; }
  .cu-graph line{ stroke:rgba(99,182,224,0.16); stroke-width:1; transition:stroke .4s ease, stroke-width .4s ease; }
  .cu-graph line.active{ stroke:rgba(99,182,224,0.65); stroke-width:1.3; }
  .cu-graph circle{ fill:rgba(233,236,240,0.45); transition:fill .4s ease, r .4s ease; animation:cunodepulse 4s ease-in-out infinite; }
  .cu-graph circle.active{ fill:var(--ice); r:4.5; }
  @keyframes cunodepulse{ 0%,100%{ opacity:.6;} 50%{ opacity:1;} }

  /* ARCHIVE CARD — teal indexed-star / storage constellation signal, Founder-directed visual/
     information-hierarchy refinement, 2026-09-04 (round 5). Archive moves from its own standalone
     section into this grid as the third card. A restrained, mostly static visual distinction per
     the Founder's own instruction ("teal indexed-star or storage constellation signal") — a small
     cluster of dots (indexed items) around a faint ring (a catalog/index). Unlike Latest Episode's
     iris or AI Lab's node-graph, nothing here needs bespoke JS: the card already gets border
     illumination + subtle internal movement from the shared .cu-portal:hover/:focus-visible rule
     and the ring/core transforms below, matching "each card should visibly respond to hover and
     keyboard focus" without a large lift or exaggerated glow. Honest and inert — it does not (and
     must not) imply real indexed items exist yet; see content-universe.njk's "Archive preparing"
     status line. */
  .cu-archivefield{ position:absolute; top:0; left:0; right:0; height:150px; overflow:hidden; }
  .cu-archive-stars{ position:absolute; inset:0; }
  .cu-archive-stars span{ position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(120,210,180,0.55); box-shadow:0 0 6px rgba(120,210,180,0.4); }
  .cu-archive-stars span:nth-child(1){ top:18%; left:12%; }
  .cu-archive-stars span:nth-child(2){ top:30%; left:82%; }
  .cu-archive-stars span:nth-child(3){ top:64%; left:20%; }
  .cu-archive-stars span:nth-child(4){ top:72%; left:70%; }
  .cu-archive-stars span:nth-child(5){ top:14%; left:52%; }
  .cu-archive-stars span:nth-child(6){ top:50%; left:8%; }
  .cu-archive-stars span:nth-child(7){ top:44%; left:92%; }
  .cu-archive-stars span:nth-child(8){ top:80%; left:44%; }
  .cu-archive-stars span:nth-child(9){ top:8%; left:30%; }
  .cu-archive-index{ position:absolute; top:38%; left:50%; width:74px; height:74px; margin:-37px 0 0 -37px; }
  .cu-archive-index .ai-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(120,210,180,0.28); transition:transform .6s cubic-bezier(.16,1,.3,1); }
  .cu-archive-index .ai-core{ position:absolute; inset:34%; border-radius:50%; background:radial-gradient(circle, rgba(120,210,180,0.5), transparent 70%); transition:transform .6s ease, opacity .6s ease; }
  .cu-archive:hover .cu-archive-index .ai-ring, .cu-archive:focus-visible .cu-archive-index .ai-ring{ transform:scale(1.18); }
  .cu-archive:hover .cu-archive-index .ai-core, .cu-archive:focus-visible .cu-archive-index .ai-core{ transform:scale(1.3); }

  /* ===================== 60 DAYS. ONE GOAL. REAL PROOF. =====================
     Founder-directed visual/information-hierarchy refinement, 2026-09-04 (round 5, "Redesign the
     60-day section"): .build-thesis centers the heading/lede (the page's default h2/.lede are
     left-aligned) instead of the old plain left-aligned block. The heading is three .bp spans that
     illuminate in sequence — once automatically on viewport entry (.lit, added by universe.js's
     initBuildThesis then the observer disconnects) and again on every hover/focus via plain CSS
     transition-delay stagger below, no JS needed for that part. Colors are ice/platinum/violet
     only. Text stays at full opacity/solid color at rest (--platinum, ~18:1 against --bg) — only
     color/text-shadow change on illumination, always to a brighter, still-high-contrast tone —
     so WCAG AA holds at every phase. */
  .build-thesis{ text-align:center; max-width:640px; margin:0 auto; }
  .build-thesis h2{ max-width:100%; margin:0 auto; }
  .build-thesis .lede{ max-width:100%; margin:14px auto 0; }
  .bp{ display:inline-block; color:var(--platinum); transition:color .6s ease, text-shadow .6s ease; }
  #buildThesisHeading:focus-visible{ outline:2px solid var(--ice); outline-offset:8px; border-radius:4px; }
  #buildThesisHeading.lit .bp-ice, #buildThesisHeading:hover .bp-ice, #buildThesisHeading:focus-within .bp-ice{ color:var(--ice); text-shadow:0 0 18px rgba(99,182,224,.4); transition-delay:0s; }
  #buildThesisHeading.lit .bp-platinum, #buildThesisHeading:hover .bp-platinum, #buildThesisHeading:focus-within .bp-platinum{ color:#fff; text-shadow:0 0 16px rgba(233,236,240,.4); transition-delay:.18s; }
  #buildThesisHeading.lit .bp-violet, #buildThesisHeading:hover .bp-violet, #buildThesisHeading:focus-within .bp-violet{ color:var(--violet); text-shadow:0 0 18px rgba(122,104,199,.4); transition-delay:.36s; }

  /* Timeline: a subtle flight-path SVG replaces the old straight .timeline-track/.fill bar, which
     on inspection had no JS driving #timelineFill at all — a purely decorative always-0%-width
     element even before this round, so nothing functional is lost by removing it. Milestone nodes
     stagger vertically (nth-child translateY below) to sit along the curve, and illuminate from
     cursor proximity (desktop, universe.js) or keyboard focus — not scroll progress, not a live
     countdown — so the section reads correctly with zero motion; the labels/order alone carry it. */
  .timeline{ margin-top:48px; position:relative; }
  .timeline-path{ display:block; width:100%; height:46px; }
  .timeline-path path{ fill:none; stroke:rgba(99,182,224,0.3); stroke-width:1.5; }
  .timeline-points{ display:flex; justify-content:space-between; margin-top:-10px; padding:0 20px; position:relative; z-index:2; }
  .tpoint{ display:flex; flex-direction:column; align-items:center; gap:9px; width:88px; text-align:center; border-radius:10px; outline:none; }
  .tpoint:nth-child(1){ transform:translateY(4px); }
  .tpoint:nth-child(2){ transform:translateY(-6px); }
  .tpoint:nth-child(3){ transform:translateY(8px); }
  .tpoint:nth-child(4){ transform:translateY(-5px); }
  .tpoint:nth-child(5){ transform:translateY(7px); }
  .tpoint:nth-child(6){ transform:translateY(-8px); }
  .tpoint .dot{ width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--glass-border); transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
  .tpoint .lbl{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--platinum-dim); transition:color .3s ease; }
  .tpoint.near .dot, .tpoint.lit .dot, .tpoint:focus-visible .dot{ border-color:var(--ice); box-shadow:0 0 10px var(--ice); transform:scale(1.3); }
  .tpoint.near .lbl, .tpoint.lit .lbl, .tpoint:focus-visible .lbl{ color:var(--platinum); }
  .tpoint:focus-visible{ outline:2px solid var(--ice); outline-offset:4px; }

  /* Rocket at the final timeline milestone, 2026-09-04 (V10_Amendment_2026-09-04_Homepage_
     Iteration.md). Three states, driven by build001.status (see build-shape.njk) so they can
     never drift out of sync with the rest of the truthful-PREPARING system:
       preparing — docked/dormant/schematic: outline only, dashed, no glow, no motion.
       live      — systems activate progressively: solid hull, glowing window, pulsing engine —
                   still docked, does not move.
       proof     — launch animation: rises and departs. The global reduced-motion rule already
                   collapses this to an instant jump to the departed end state (see the
                   `*{animation-duration:.01ms!important}` rule below) rather than an animated
                   launch, consistent with how every other animation on this page is handled. */
  .tpoint--final{ position:relative; }
  .tl-rocket{ position:absolute; left:50%; bottom:30px; width:26px; height:52px; pointer-events:none; }
  .tl-rocket-svg{ width:100%; height:100%; overflow:visible; transform:translateX(-50%); }
  .tl-rocket-body{ fill:var(--graphite); stroke:var(--platinum-dim); stroke-width:1.2; transition:fill .5s ease, stroke .5s ease; }
  .tl-rocket-fin{ fill:var(--graphite); stroke:var(--platinum-dim); stroke-width:1; transition:fill .5s ease, stroke .5s ease; }
  .tl-rocket-window{ fill:var(--bg); stroke:var(--platinum-dim); stroke-width:1; transition:fill .5s ease, stroke .5s ease; }
  .tl-rocket-flame{ fill:transparent; opacity:0; transition:opacity .4s ease; }

  .tl-rocket--preparing .tl-rocket-body, .tl-rocket--preparing .tl-rocket-fin{ fill:transparent; stroke:var(--platinum-faint); stroke-dasharray:3 3; }
  .tl-rocket--preparing .tl-rocket-window{ fill:transparent; stroke:var(--platinum-faint); stroke-dasharray:2 2; }

  .tl-rocket--live .tl-rocket-body, .tl-rocket--live .tl-rocket-fin{ stroke:var(--ice); }
  .tl-rocket--live .tl-rocket-window{ fill:var(--ice); stroke:var(--ice); animation:tlwindowpulse 2.4s ease-in-out infinite; }
  .tl-rocket--live .tl-rocket-flame{ opacity:.6; fill:var(--ice); animation:tlflame 1.1s ease-in-out infinite alternate; }

  .tl-rocket--proof .tl-rocket-body, .tl-rocket--proof .tl-rocket-fin{ stroke:var(--ice); }
  .tl-rocket--proof .tl-rocket-window{ fill:var(--ice); stroke:var(--ice); }
  .tl-rocket--proof .tl-rocket-flame{ opacity:1; fill:var(--ice); animation:tlflame .4s ease-in-out infinite alternate; }
  .tl-rocket--proof{ animation:tllaunch 1.8s cubic-bezier(.3,0,.7,1) forwards; }

  @keyframes tlwindowpulse{ 0%,100%{ opacity:.7;} 50%{ opacity:1;} }
  @keyframes tlflame{ 0%{ transform:scaleY(.8);} 100%{ transform:scaleY(1.18);} }
  @keyframes tllaunch{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(-220px); opacity:1;} 100%{ transform:translateY(-320px); opacity:0;} }

  .btn{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#02040a; background:linear-gradient(100deg, var(--ice), var(--violet)); padding:14px 26px; border-radius:26px; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:10px; font-weight:700; border:none; cursor:pointer; }

  /* ===================== DREAMS PLANETARY SYSTEM — large immersive section =====================
     Founder-directed visual/information-hierarchy refinement, 2026-09-04 (round 5, "Give Dreams
     the large immersive section"). Replaces round 4's compact grid-of-bubbles card entirely — that
     CSS (.cu-dreamfield/.dream-bubbles/.dream-bubble/.dream-reveal) is removed as fully dead code
     along with the card it lived in (see the ARCHIVE CARD block above for what replaced it in the
     grid). Eight buttons of varied size/color/vertical position (set per-button via --dp-left/
     --dp-top/--dp-size/--dp-depth custom properties in dreams.njk, not a grid), on a loose curved
     arrangement reinforced by a faint decorative constellation line (.dream-links, aria-hidden).
     Hover/focus/tap brings one planet forward (.active — scale up, brighten, its .dp-tooltip
     example becomes visible "beside/beneath" it) while others recede slightly but stay fully
     visible (.has-active .dream-planet:not(.active)) — never hidden, matching "no large lifts or
     exaggerated glow" restraint elsewhere on the page. Idle drift (.dp-drift) only plays while
     .in-view (IntersectionObserver, universe.js) and stops entirely under reduced motion below.
     Desktop-only parallax translates the whole #dreamGalaxy a few px opposite the cursor
     (universe.js) — capped small, "limited depth movement," not a full 3D scene. */
  .dreams-wrap{ text-align:center; }
  .dreams-wrap h2{ max-width:100%; margin:0 auto; }
  .dreams-wrap .lede{ max-width:520px; margin:14px auto 0; }
  .dream-galaxy{ position:relative; margin:52px auto 0; width:100%; max-width:920px; height:420px; will-change:transform; }
  .dream-links{ position:absolute; inset:0; width:100%; height:100%; opacity:.22; pointer-events:none; }
  .dream-links path{ fill:none; stroke:rgba(99,182,224,0.5); stroke-width:.3; }
  .dream-planet{ position:absolute; left:var(--dp-left); top:var(--dp-top); width:var(--dp-size); height:var(--dp-size);
    transform:translate(-50%,-50%) scale(1); border-radius:50%; border:1px solid var(--glass-border);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.22), var(--dp-glow, rgba(99,182,224,0.16)) 55%, transparent 80%);
    box-shadow:0 0 calc(var(--dp-depth, .4) * 30px) var(--dp-glow, rgba(99,182,224,0.2));
    filter:brightness(calc(0.82 + var(--dp-depth, .4) * 0.3));
    cursor:pointer; display:flex; align-items:center; justify-content:center; padding:4px;
    z-index:2; transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .4s ease, opacity .4s ease, filter .4s ease; }
  .dream-planet::after{ content:''; position:absolute; inset:-10%; border-radius:50%; border:1px solid rgba(255,255,255,0.08); pointer-events:none; }
  .dream-planet{ animation:dpdrift 7s ease-in-out infinite; animation-play-state:paused; }
  .dream-galaxy.in-view .dream-planet{ animation-play-state:running; }
  .dream-planet:nth-of-type(2){ animation-delay:.7s; } .dream-planet:nth-of-type(3){ animation-delay:1.4s; }
  .dream-planet:nth-of-type(4){ animation-delay:2.1s; } .dream-planet:nth-of-type(5){ animation-delay:2.8s; }
  .dream-planet:nth-of-type(6){ animation-delay:3.5s; } .dream-planet:nth-of-type(7){ animation-delay:4.2s; }
  .dream-planet:nth-of-type(8){ animation-delay:4.9s; }
  @keyframes dpdrift{ 0%,100%{ transform:translate(-50%,-50%) translateY(0);} 50%{ transform:translate(-50%,-50%) translateY(-7px);} }
  .dp-yours{ border-style:dashed; }
  .dp-core{ position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.4), transparent 68%); pointer-events:none; }
  .dp-label{ position:relative; z-index:2; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--platinum-dim); text-align:center; font-weight:600; transition:color .3s ease; pointer-events:none; }
  .dream-planet:hover, .dream-planet:focus-visible, .dream-planet.active{
    animation-play-state:paused; transform:translate(-50%,-50%) scale(1.22); z-index:5; border-color:var(--glass-border-strong);
    box-shadow:0 0 34px var(--dp-glow, rgba(99,182,224,0.5)); filter:brightness(1.15); }
  .dream-planet:hover .dp-label, .dream-planet:focus-visible .dp-label, .dream-planet.active .dp-label{ color:var(--platinum); }
  .dream-galaxy.has-active .dream-planet:not(.active){ opacity:.6; filter:brightness(.72); transform:translate(-50%,-50%) scale(.94); }
  /* tooltip: visually hidden until hover/focus/tap, but always part of the button's accessible
     name — same pattern the retired .pstar participation stars used, chosen again here so the
     example reveals "beside/beneath" the specific planet rather than into one shared line. */
  .dp-tooltip{ position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(6px); width:150px;
    text-align:center; font-size:10.5px; line-height:1.5; color:var(--platinum-dim); opacity:0; pointer-events:none;
    transition:opacity .3s ease, transform .3s ease; background:rgba(2,4,10,0.9); border:1px solid var(--glass-border);
    border-radius:10px; padding:9px 12px; backdrop-filter:blur(12px); z-index:6; }
  .dp-below .dp-tooltip{ bottom:auto; top:calc(100% + 10px); }
  .dream-planet:hover .dp-tooltip, .dream-planet:focus-visible .dp-tooltip, .dream-planet.active .dp-tooltip{ opacity:1; transform:translateX(-50%) translateY(0); }

  #systems{ padding:0 6vw 44px; max-width:1440px; margin:0 auto; position:relative; z-index:2; }
  .systems-line{ border-top:1px solid var(--glass-border); padding-top:20px; display:flex; gap:16px; flex-wrap:wrap; align-items:baseline; }
  .systems-line .k{ font-size:10.5px; letter-spacing:.1em; color:var(--platinum-dim); text-transform:uppercase; white-space:nowrap; }
  .systems-line .v{ font-size:12.5px; color:var(--platinum-dim); line-height:1.6; max-width:640px; }
  .systems-line .v b{ color:var(--platinum); font-weight:500; }

  /* Standalone finale section (heading/star/actions) removed in full, 2026-09-04 (Remove finale
     section) — the signup now lives inside the Follow card in content-universe.njk. Nothing in
     this stylesheet references #finale/.finale-* any longer; removed rather than left dead. */

  /* ===================== EMAIL/SIGNUP FORMS (new — no visual precedent in V10) =====================
     V10 showed these CTAs as bare buttons with no email field; a real signup needs one. Styled
     to match V10's existing glass/ice language rather than introducing a new pattern, but this
     is a genuine addition to the frozen design, not a port — flagged for Founder visual review. */
  .cta-inline-form{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .cta-inline-form input[type="email"]{
    font-family:var(--sans); font-size:13px; color:var(--platinum); background:var(--glass);
    border:1px solid var(--glass-border); border-radius:24px; padding:12px 18px; min-width:220px;
    outline:none; transition:border-color .25s ease;
  }
  .cta-inline-form input[type="email"]::placeholder{ color:var(--platinum-faint); }
  .cta-inline-form input[type="email"]:focus-visible{ border-color:var(--glass-border-strong); }
  .cta-status{ font-size:11px; color:var(--platinum-dim); margin-top:8px; min-height:1.4em; }
  .cu-body .cta-inline-form{ margin-top:15px; }

  /* ===================== FOLLOW STRIP — dedicated Subscribe section =====================
     Final Follow-flow correction, 2026-09-04: this is the ONLY subscription destination and the
     ONLY form on the page. Founder-directed homepage evolution, same day (later): public copy and
     the outer id are now Subscribe/#subscribe — see follow-strip.njk's header comment for why the
     .follow-strip class itself (and this comment block's own title) are left as internal
     identifiers. scroll-margin-top keeps the strip from being hidden beneath the fixed nav for
     BOTH scrollIntoView() (main.js's initFollowActivation) and a raw #subscribe URL load that
     navigates before any JS runs. .flash is toggled briefly by main.js on every Subscribe-link
     activation; because it only changes border-color/box-shadow (already transitioned below), the
     global reduced-motion rule's `transition-duration:.01ms` makes it an instant, non-pulsing
     state swap for those users rather than a fade, satisfying "no animated pulse" without any
     separate reduced-motion override needed here. */
  .follow-strip{ position:relative; margin-top:22px; padding:44px 34px; border-radius:20px; overflow:hidden;
    text-align:center; border:1px solid var(--glass-border); background:radial-gradient(ellipse 80% 100% at 50% -10%, rgba(99,182,224,0.08), transparent 62%), #05070d;
    scroll-margin-top:110px; transition:border-color .5s ease, box-shadow .5s ease; }
  .follow-strip.flash{ border-color:var(--ice); box-shadow:0 0 0 1px rgba(99,182,224,.55), 0 0 46px rgba(99,182,224,.32); }
  .follow-strip h2{ font-size:clamp(21px,2.4vw,28px); max-width:100%; margin:0 auto; position:relative; z-index:2; }
  .follow-strip .fs-sub{ font-size:13px; color:var(--platinum-dim); max-width:440px; margin:12px auto 26px; line-height:1.6; position:relative; z-index:2; }
  .follow-strip .cta-inline-form{ justify-content:center; position:relative; z-index:2; }
  .follow-strip .cta-inline-form input[type="email"]:focus-visible{ border-color:var(--ice); box-shadow:0 0 0 3px rgba(99,182,224,.25); }
  /* restrained decorative signal: a small star traveling a short trajectory line, tucked to one
     side, low-opacity — connects the strip to the hero's universe system without another large
     animated field. Purely decorative (aria-hidden), so it needs no pause-when-offscreen logic. */
  .fs-signal{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; opacity:.6; }
  .fs-line{ position:absolute; top:32%; right:8%; width:150px; height:1px; background:linear-gradient(100deg, transparent, rgba(99,182,224,0.4)); transform:rotate(-16deg); transform-origin:right center; }
  .fs-star{ position:absolute; top:32%; right:8%; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:var(--ice); box-shadow:0 0 8px var(--ice); animation:fstravel 5.5s linear infinite; }
  @keyframes fstravel{ 0%{ transform:translate(0,0); opacity:0;} 10%{ opacity:1;} 88%{ opacity:1;} 100%{ transform:translate(-150px,43px); opacity:0;} }

  /* Footer CSS moved to chrome.css, 2026-09-04 (production-readiness correction) — footer.njk
     renders site-wide, so its styling needs to load unconditionally too. See chrome.css. */

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; transition-duration:.01ms !important; animation-iteration-count:1 !important; }
    .fade{ opacity:1 !important; transform:none !important; }
    .star-rays, .star-lens, .star-corona, .star-core, .star-plasma-a, .star-plasma-b, .star-plasma-c, .star-flares path, .star-outerglow, .thesis-arc, .prep-scan-bar, .prep-segments span, .world-shell, .world-shell::after, .world-scan::before, .pstar-core{ animation:none; }
    .cu-scanline, .cu-graph circle{ animation:none; }
    .fs-star{ animation:none; opacity:0; }
    .starfield-canvas, .fx-canvas{ display:none; }
    /* moved: .wordmark .sweep, .mia-signal-pulse, .mia-companion transition, and
       .mia-signal.first-visit-pulse::before are now in chrome.css's own reduced-motion block,
       2026-09-04 (production-readiness correction) — they're chrome elements that render
       site-wide, so their reduced-motion handling needs to load unconditionally too. */
    /* Dreams bubbles and the Inside Build 001 heading sweep — homepage-only, 2026-09-04: neither
       gets to even flash-and-settle via the blanket animation-iteration-count:1 rule above,
       because their end states would look like a stuck/broken hover state rather than a clean
       static illumination — so each gets an explicit animation:none instead. */
    #content-universe h2::after{ animation:none; }
    /* Dream planets (round 5): idle drift becomes a static composed galaxy — same reasoning as
       the retired dream-bubble breathing above. Parallax is already gated off entirely in
       universe.js for reduced-motion users (mql.matches check), so no CSS override is needed for
       that part. */
    .dream-planet{ animation:none; }
    /* 60-day heading (round 5): "show the final illuminated state without animation" — applied
       unconditionally here rather than depending on the viewport-entry IntersectionObserver or a
       hover/focus event, so reduced-motion users see the finished ice/platinum/violet state
       immediately regardless of scroll position or interaction. */
    .bp{ transition:none !important; }
    .bp-ice{ color:var(--ice); text-shadow:0 0 18px rgba(99,182,224,.4); }
    .bp-platinum{ color:#fff; text-shadow:0 0 16px rgba(233,236,240,.4); }
    .bp-violet{ color:var(--violet); text-shadow:0 0 18px rgba(122,104,199,.4); }
    /* Rocket, 2026-09-04: LIVE's engine/window pulse becomes a fixed lit state, no looping
       animation. PROOF is a static state change, not a launch animation — jumps straight to the
       departed end-state (matching tllaunch's own 100% keyframe) rather than animating the rise,
       per the amendment's explicit reduced-motion requirement. */
    .tl-rocket--live .tl-rocket-window, .tl-rocket--live .tl-rocket-flame{ animation:none; opacity:1; }
    .tl-rocket--proof{ animation:none; transform:translateY(-320px); opacity:0; }
    .chamber-scanlines{ animation:none; }
    .chamber-rings span{ animation:none; opacity:0; }
  }
  @media (max-width:980px){
    .universe{ height:660px; }
    .thesis-arc{ width:360px; top:4%; }
    .thesis-arc .t-line{ font-size:17px; letter-spacing:.14em; }
    .cu-grid{ grid-template-columns:1fr; }
    .cu-show{ grid-column:auto; }
    /* .navlinks/.navburger/.nav-drawer mobile toggle moved to chrome.css's own max-width:980px
       block, 2026-09-04 (production-readiness correction) — nav.njk renders site-wide. */
    section{ padding:72px 6vw; }
    /* Timeline wraps to multiple rows at this width, so the curved flight-path SVG (tuned for one
       row) is hidden and the per-node vertical stagger reset — a wrapped, evenly-aligned list
       stays perfectly understandable on its own. */
    .timeline-points{ flex-wrap:wrap; gap:18px; }
    .tpoint{ transform:none !important; }
    .timeline-path{ display:none; }
    .cc-body{ grid-template-columns:1fr; text-align:center; justify-items:center; }
    .cv-row{ justify-content:center; }
    .cv-label{ flex:0 0 auto; }
    /* Dreams galaxy: smaller field, same varied composition (no grid). Scaling via a transform on
       the whole field (rather than recomputing each planet's --dp-size, which cannot safely
       self-reference its own custom property) keeps every planet's relative size/position ratio
       intact. */
    .dream-galaxy{ height:340px; max-width:640px; transform:scale(.82); transform-origin:top center; }
    /* Mia's mobile sizing/positioning moved to chrome.css's own max-width:980px block,
       2026-09-04 (production-readiness correction) — mia-companion.njk renders site-wide. */
  }

  /* ===================== PHONE — purpose-built portrait composition ===================== */
  @media (max-width:640px){
    /* ---- hero: composed for portrait, not a shrunk desktop orbit ---- */
    .hero{ min-height:600px; touch-action:pan-y; }
    .universe{ width:94vw; height:520px; }
    .thesis-arc{ top:5%; width:92vw; }
    .thesis-arc .t-line{ font-size:15px; letter-spacing:.09em; }
    .thesis-arc .t-sub{ font-size:9.5px; margin-top:9px; letter-spacing:.08em; }
    .star-wrap{ transform:scale(.56); }
    .orbit-guides{ display:none; }
    /* worlds become a static row of compact labeled chips beneath the star — JS orbit math
       is disabled at this width (see script), so plain CSS position/size governs them */
    .world{ width:80px; height:80px; margin:-40px; }
    .world-shell{ animation:none; }
    .world-title, .world-meta{ display:none !important; }
    .world-word{ font-size:10px; letter-spacing:.14em; }
    .world-word--long{ font-size:7.5px; letter-spacing:.05em; }
    .world--build{ top:74%; left:11%; }
    .world--show{ top:74%; left:37%; }
    .world--lab{ top:74%; left:63%; }
    .world--proof{ top:74%; left:89%; }
    .prep-console{ bottom:22px; }
    .prep-msg{ font-size:9px; }
    .starfield-canvas, .fx-canvas{ display:none; } /* CSS milkyway layer carries the sky on phones */

    /* ---- Build 001 command center: tighter header/body padding on phone ---- */
    .cc-header{ padding:22px 20px; }
    .cc-body{ padding:24px 20px; }

    /* ---- matrix rows (added 2026-09-04): the 980px single-column layout still lays label/value
         out in one flex row, which at phone widths pushed longer values (e.g. "Structure defined;
         capture not begun") too close to the edge. Stack each row so nothing needs to fit two
         items side by side. ---- */
    .cv-row{ flex-direction:column; gap:2px; padding:10px 0; }
    .cv-label{ flex:0 0 auto; }
    .cv-value{ text-align:center; }

    /* ---- participation constellation: touch-sized targets, contained field ---- */
    .constellation{ height:440px; }
    .pstar{ width:54px; height:54px; margin:-27px 0 0 -27px; }
    .pstar-tooltip{ width:150px; font-size:10.5px; }

    /* ---- content universe: full-width stacked portals keep their identity ---- */
    .cu-portal{ min-height:340px; }
    .cu-graph, .cu-archivefield{ height:120px; }
    .cu-archive-index{ width:56px; height:56px; margin:-28px 0 0 -28px; }

    /* ---- dreams galaxy: static composed field, sized for one column ---- */
    .dream-galaxy{ height:300px; max-width:100%; transform:none; margin-top:36px; }
    .dp-tooltip{ width:130px; font-size:9.5px; padding:7px 10px; }

    /* ---- follow strip: full-width stacked email/button, decorative signal hidden (no room) ---- */
    .follow-strip{ padding:32px 22px; }
    .follow-strip .cta-inline-form{ flex-direction:column; align-items:stretch; }
    .follow-strip .cta-inline-form input[type="email"], .follow-strip .cta-inline-form button{ width:100%; }
    .fs-signal{ display:none; }

    /* ---- timeline: vertical progression instead of a compressed horizontal strip ---- */
    .timeline-path{ display:none; }
    .timeline-points{ flex-direction:column; align-items:flex-start; gap:0; margin-top:8px; }
    .tpoint{ transform:none !important; }
    .tpoint{ display:flex; flex-direction:row; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid rgba(233,236,240,0.06); width:100%; }
    .tpoint .dot{ position:static; margin:0; flex-shrink:0; }
    .tpoint .lbl{ text-align:left; }

    /* ---- rocket (added 2026-09-04): desktop's absolute bottom-floating rocket doesn't fit the
         phone timeline's horizontal-row layout above — reposition it inline, after the label,
         sized down, instead of floating disconnected above the row. ---- */
    .tpoint--final{ flex-wrap:wrap; }
    .tl-rocket{ position:static; width:16px; height:32px; margin-left:auto; }

    /* Mia's phone sizing/positioning moved to chrome.css's own max-width:640px block,
       2026-09-04 (production-readiness correction) — mia-companion.njk renders site-wide. */
  }

  /* ===================== TABLET PORTRAIT — purpose-built static composition =====================
     Preview QA 2026-09-04: 768x1024 (and other portrait tablet widths up to 1024px) fell through
     to the full desktop orbit engine — neither the phone breakpoint (max-width:640px) nor the
     phone-landscape breakpoint (orientation:landscape) catches it, so spheres collided and the
     supporting line rendered illegibly overlapped. Same philosophy as the phone fix above: a
     purpose-built static composition, not a shrunk desktop orbit or a shrunk phone layout — a
     single balanced row of all four worlds beneath the central star, with more headroom than the
     phone version since tablets have real room to work with. JS disables the orbit engine, drag,
     parallax, and shooting stars at this breakpoint (see mqlTabletPortrait in universe.js); this
     block only needs to override the static-composition geometry. Desktop, phone portrait, and
     phone landscape are untouched — this rule only matches orientation:portrait in the 641-1024px
     width range, which none of those three overlap. */
  @media (min-width:641px) and (max-width:1024px) and (orientation:portrait){
    .hero{ min-height:900px; touch-action:pan-y; }
    .universe{ width:min(760px, 84vw); height:min(740px, 60vh); }
    .thesis-arc{ top:11%; width:74vw; max-width:560px; }
    .thesis-arc .t-line{ font-size:22px; letter-spacing:.16em; }
    .thesis-arc .t-sub{ font-size:12px; margin-top:11px; letter-spacing:.09em; }
    .star-wrap{ transform:scale(.82); }
    .orbit-guides{ display:none; }
    /* worlds become a static balanced row beneath the star — JS orbit math is disabled at this
       breakpoint (see script), so plain CSS position/size governs them, same approach as phone */
    .world{ width:132px; height:132px; margin:-66px; }
    .world-shell{ animation:none; }
    .world-title, .world-meta{ display:none !important; }
    .world-word{ font-size:13px; letter-spacing:.16em; }
    .world-word--long{ font-size:9.5px; letter-spacing:.06em; }
    .world--build{ top:76%; left:11%; }
    .world--show{ top:76%; left:37%; }
    .world--lab{ top:76%; left:63%; }
    .world--proof{ top:76%; left:89%; }
    .prep-console{ bottom:56px; }
    .starfield-canvas, .fx-canvas{ display:none; } /* CSS milkyway layer carries the sky, same as phone */
  }

  /* ===================== PHONE LANDSCAPE — short-height fix =====================
     Width-only breakpoints can't catch this case: a phone rotated sideways is often
     WIDER than 640px (e.g. 844px, 667px) so the max-width:640px portrait rules above
     never apply, and the full desktop orbit hero renders into a viewport that's only
     ~350-400px TALL. This block targets that specific shape directly — short height +
     landscape orientation, capped to phone-plausible widths — rather than widening the
     portrait breakpoint (which would wrongly catch real desktop windows). Same idea as
     the portrait fix: kill the orbit engine, compose a flat, compressed static hero. */
  @media (max-height:500px) and (orientation:landscape) and (max-width:900px){
    .hero{ min-height:0; height:100vh; touch-action:pan-y; }
    .universe{ width:96vw; height:88vh; max-height:340px; }
    .thesis-arc{ top:8%; width:64vw; }
    .thesis-arc .t-line{ font-size:13px; letter-spacing:.07em; }
    .thesis-arc .t-sub{ font-size:8px; margin-top:5px; letter-spacing:.06em; }
    .star-wrap{ transform:scale(.3); }
    .orbit-guides{ display:none; }
    .world{ width:50px; height:50px; margin:-25px; }
    .world-shell{ animation:none; }
    .world-title, .world-meta{ display:none !important; }
    .world-word{ font-size:8px; letter-spacing:.09em; }
    .world-word--long{ font-size:6px; letter-spacing:.03em; }
    .world--build{ top:76%; left:16%; }
    .world--show{ top:76%; left:38%; }
    .world--lab{ top:76%; left:62%; }
    .world--proof{ top:76%; left:84%; }
    /* pushed above the fixed dev board-tag (bottom:14-40px) so PREPARING stays legible */
    .prep-console{ bottom:46px; gap:4px; }
    .prep-label{ font-size:8.5px; }
    .prep-msg{ display:none; }
    .prep-scan{ display:none; }
    .starfield-canvas, .fx-canvas{ display:none; }
  }