/* ============================================================================
   PENDULUM LAB — Landing page
   A calm public entryway to the denser simulator: graphite surfaces, quiet
   indigo emphasis, cyan data accents, and compact instrumentation typography.
   ========================================================================== */

@font-face{
  font-family:'Pretendard Local';
  src:url('./fonts/Pretendard-Regular.subset.woff2') format('woff2');
  font-style:normal; font-weight:400; font-display:swap;
  unicode-range:U+0020-007E,U+1100-11FF,U+3130-318F,U+AC00-D7A3;
}
@font-face{
  font-family:'Pretendard Local';
  src:url('./fonts/Pretendard-Bold.subset.woff2') format('woff2');
  font-style:normal; font-weight:600 800; font-display:swap;
  unicode-range:U+0020-007E,U+1100-11FF,U+3130-318F,U+AC00-D7A3;
}

:root{
  --bg:#070910;
  --raised:#0b0e17;
  --panel:#10141f;
  --elevated:#151a28;
  --control:#181d2b;
  --hover:#1d2332;
  --selected:#242a3d;

  --ink:#f1f3f8;
  --text:#a8b0c2;
  --muted:#7f899e;
  --line:rgba(205,214,245,.08);
  --line-2:rgba(205,214,245,.14);

  --primary:#8b7cf6;
  --cyan:#72d6e5;
  --cyan-mid:#55b8ca;
  --cyan-deep:#327f96;
  --violet:#8b7cf6;
  --violet-deep:#7566e9;
  --gold:#e0ae68;
  --gold-line:rgba(224,174,104,.28);
  --ok:#58c99b;
  --warn:#e0ae68;
  --danger:#ef6f7d;
  --info:#7ca8f6;

  --glass:rgba(16,20,31,.94);
  --glass-2:rgba(21,26,40,.96);
  --glass-stroke:rgba(205,214,245,.14);
  --hairline:linear-gradient(155deg, rgba(205,214,245,.14), rgba(205,214,245,.06));

  --radius-sm:5px;
  --radius-md:8px;
  --radius-lg:12px;
  --motion-fast:120ms;
  --motion-base:180ms;
  --motion-slow:260ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  --font-display:'SF Pro Display','Segoe UI Variable Display','Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono:'SF Mono','Cascadia Code','Roboto Mono',ui-monospace,Menlo,Consolas,monospace;
  --font-sans:'SF Pro Text','Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --maxw:1320px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
*{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth; scroll-padding-top:88px;
  -webkit-text-size-adjust:100%; overflow-x:clip;
  scrollbar-color:rgba(139,124,246,.52) var(--bg);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  letter-spacing:.1px;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
  overscroll-behavior-y:none;
}

::selection{ background:rgba(139,124,246,.28); color:var(--ink); }

a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }
img{ max-width:100%; height:auto; }
section[id],header[id]{ scroll-margin-top:88px; }

.skip-link{
  position:fixed; left:14px; top:12px; z-index:100;
  transform:translateY(-160%);
  padding:10px 12px; border-radius:8px;
  background:var(--cyan); color:#04121a;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* ---- Quiet page backdrop ---------------------------------------------------*/
.page-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1300px 800px at 78% 10%, rgba(24,212,248,.12), transparent 56%),
    radial-gradient(1150px 860px at 94% 64%, rgba(124,77,255,.12), transparent 58%),
    radial-gradient(900px 640px at 6% 32%, rgba(13,90,150,.09), transparent 60%),
    radial-gradient(1200px 900px at 50% 122%, rgba(90,50,190,.08), transparent 56%),
    radial-gradient(140% 110% at 50% 42%, transparent 58%, rgba(0,1,5,.55) 100%),
    var(--bg);
}
/* Faint instrumentation grid, limited to the hero field. */
.page-bg::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(rgba(126,166,214,.045) 1px, transparent 1px) 0 0/100% 72px,
    linear-gradient(90deg, rgba(126,166,214,.045) 1px, transparent 1px) 0 0/72px 100%;
  -webkit-mask:radial-gradient(120% 90% at 72% 40%, #000 28%, transparent 76%);
          mask:radial-gradient(120% 90% at 72% 40%, #000 28%, transparent 76%);
}
/* Small screens carry the static artwork alone: drop the decorative grid and
   most backdrop plates so weak GPUs never raster them. The first
   mobile paint budget belongs to the artwork, not to backdrop gradients. */
@media (max-width:720px){
  .page-bg::before, .page-bg::after{ display:none; }
  .page-bg{
    background:
      radial-gradient(700px 480px at 78% 8%, rgba(24,212,248,.1), transparent 60%),
      radial-gradient(640px 520px at 96% 62%, rgba(124,77,255,.1), transparent 62%),
      var(--bg);
  }
}
.page-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(150,178,225,.05) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}

/* The reference-matched poster is the immediate LCP surface. WebGL fades in
   over it, so first paint is never an empty 300×150 canvas. */
.hero-static-art{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,4,11,.9) 0%, rgba(2,4,11,.52) 26%, rgba(2,4,11,.06) 56%, rgba(2,4,11,0) 80%),
    linear-gradient(180deg, rgba(2,4,11,.04) 52%, rgba(2,4,11,.6) 94%),
    url("hero-fallback.webp") center/cover no-repeat;
  opacity:.96;
  filter:saturate(.58) brightness(.78);
  transition:opacity .8s var(--ease), filter .8s var(--ease);
}
.hero-loading .hero-static-art{ will-change:opacity,filter; }
.hero-live .hero-static-art{ opacity:.08; filter:saturate(.5) brightness(.66); }
/* Small screens skip WebGL (low-power path), so the artwork carries the whole
   hero: swap to the lighter 960w encode and keep the pendulum in frame. */
@media (max-width:760px){
  .hero-static-art{
    background:
      linear-gradient(180deg, rgba(2,4,11,.55) 0%, rgba(2,4,11,.16) 34%, rgba(2,4,11,.72) 90%),
      url("hero-fallback-960.webp") 70% center/cover no-repeat;
  }
}

/* WebGL hero canvas fixed behind everything in the first screen. */
#hero-canvas{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0;
  display:block; opacity:0; cursor:grab;
  transition:opacity .7s var(--ease);
  touch-action:pan-y;
}
.hero-live #hero-canvas{ opacity:1; }
#hero-canvas:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:-7px;
}
#hero-canvas.is-dragging{ cursor:grabbing; }
.reduced-motion-hero .page-bg,
.low-power-hero .page-bg,
.no-webgl .page-bg{
  background:
    linear-gradient(180deg, rgba(2,4,11,.12), rgba(2,4,11,.94)),
    radial-gradient(900px 520px at 70% 18%, rgba(24,212,248,.1), transparent 62%),
    var(--bg);
}
.reduced-motion-hero .hero-static-art,
.low-power-hero .hero-static-art,
.no-webgl .hero-static-art{ opacity:.94; filter:saturate(.58) brightness(.78); }
.reduced-motion-hero #hero-canvas,.low-power-hero #hero-canvas,.no-webgl #hero-canvas{ display:none; }

/* A real user control follows the fixed scene through the hero and descent
   descent. It doubles as the explicit load affordance for the deferred 3D
   engine, then becomes Pause/Resume once the renderer is live. */
.hero-motion-control{
  position:fixed;
  right:max(18px,var(--safe-right));
  bottom:max(18px,var(--safe-bottom));
  z-index:42;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
body.hero-scene-active .hero-motion-control{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
}
html.no-js .hero-motion-control{ display:none; }
.hero-motion-control button{
  appearance:none; min-height:42px; padding:9px 13px;
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid rgba(117,184,220,.28); border-radius:999px;
  background:linear-gradient(155deg,rgba(6,12,25,.88),rgba(5,8,18,.76));
  color:#c5d6eb; box-shadow:0 16px 40px -22px #000,0 0 28px -20px rgba(24,212,248,.8),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%);
  font:600 10px/1 var(--font-mono); letter-spacing:.11em; text-transform:uppercase;
  cursor:pointer; transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),opacity .2s;
}
.hero-motion-control button:hover{ border-color:rgba(24,212,248,.58); color:var(--ink); background:rgba(10,24,39,.9); }
.hero-motion-control button:disabled{ cursor:default; opacity:.62; }
.hero-motion-icon{ width:13px; height:13px; display:flex; align-items:center; justify-content:center; gap:3px; }
.hero-motion-icon i{ width:2px; height:9px; border-radius:2px; background:var(--cyan); box-shadow:0 0 8px rgba(24,212,248,.75); }
.hero-motion-control button[aria-pressed="true"] .hero-motion-icon,
body:not(.hero-live):not(.hero-loading) .hero-motion-control button:not(:disabled)[aria-pressed="false"] .hero-motion-icon{ gap:0; }
.hero-motion-control button[aria-pressed="true"] .hero-motion-icon i:first-child,
body:not(.hero-live):not(.hero-loading) .hero-motion-control button:not(:disabled)[aria-pressed="false"] .hero-motion-icon i:first-child{
  width:0; height:0; background:transparent; box-shadow:none;
  border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid var(--cyan); border-radius:0;
}
.hero-motion-control button[aria-pressed="true"] .hero-motion-icon i:last-child,
body:not(.hero-live):not(.hero-loading) .hero-motion-control button:not(:disabled)[aria-pressed="false"] .hero-motion-icon i:last-child{ display:none; }
/* scrim that darkens the 3D backdrop as you scroll into the content (JS opacity) */
.hero-scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(5,6,15,.35), transparent 60%),
    linear-gradient(180deg, rgba(5,6,15,.2), rgba(5,6,15,.9));
  transition:opacity .15s linear;
}

/* ============================================================================
   TYPE
   ========================================================================== */
.kicker{
  font-family:var(--font-mono);
  font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan);
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
}
.kicker::before{
  content:""; width:26px; height:1px;
  background:linear-gradient(90deg, var(--cyan), var(--gold-line), transparent);
}
.kicker.center::before{ display:none; }

h1,h2,h3{ font-family:var(--font-display); color:var(--ink); font-weight:700; line-height:1.02; letter-spacing:-.02em; }

.display{
  font-size:clamp(42px, 7.4vw, 104px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.035em;
}
.display .grad{
  background:linear-gradient(97deg, #ffffff 0%, #d9f1ff 46%, #9fd9ff 108%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.display .dissolve{
  background:linear-gradient(96deg, #2fe0ff 0%, var(--violet-deep) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-style:italic; font-weight:700;
  /* glyph-alpha glow (text-shadow, not a drop-shadow filter: the filter cost
     real mobile style/layout time for the same look) */
  text-shadow:0 0 30px rgba(24,212,248,.32);
}
@media (max-width:720px){ .display .dissolve{ text-shadow:none; } }

.lede{
  font-size:clamp(16px, 1.5vw, 20px);
  color:var(--text);
  max-width:46ch;
  text-wrap:pretty;
}

.mono{ font-family:var(--font-mono); }
.muted{ color:var(--muted); }
.inherit-color{ color:inherit; }
.divergence-title{ font-size:clamp(30px,4.4vw,56px); margin:18px 0; }
.divergence-lede{ max-width:52ch; }
.glow-cyan{ filter:drop-shadow(0 0 6px rgba(24,212,248,.85)); }
.glow-violet{ filter:drop-shadow(0 0 6px rgba(157,120,255,.85)); }
.glow-seed{ filter:drop-shadow(0 0 8px rgba(223,246,255,.9)); }
.science-footnote{ margin-top:14px; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--muted); text-align:right; }
.val-bar.bar-96{ width:96px; }
.val-bar.bar-78{ width:78px; }
.val-bar.bar-72{ width:72px; }
.val-bar.bar-60{ width:60px; }
.val-bar.bar-48{ width:48px; }
.val-bar.bar-30{ width:30px; }

/* ============================================================================
   LAYOUT
   ========================================================================== */
.wrap{ width:min(100% - 48px, var(--maxw)); margin-inline:auto; }
section{ position:relative; z-index:2; }

/* ---- NAV -------------------------------------------------------------------*/
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:calc(18px + var(--safe-top));
  padding-right:max(clamp(20px,4vw,40px),var(--safe-right));
  padding-bottom:18px;
  padding-left:max(clamp(20px,4vw,40px),var(--safe-left));
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{
  width:30px; height:30px; flex:none; position:relative;
  display:grid; place-items:center;
}
.brand .mark svg{ width:30px; height:30px; display:block; filter:drop-shadow(0 0 10px rgba(24,212,248,.5)); }
.brand .name{
  font-family:var(--font-display); font-weight:800; font-size:15px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.brand .by{ font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.12em; }
.nav-links{ display:flex; align-items:center; gap:24px; }
.nav-links a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text);
  transition:color .25s var(--ease); position:relative;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), var(--gold));
  transition:width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
/* Scrollspy state (aria-current set by main.js as sections enter the view). */
.nav-links a[aria-current]{ color:var(--ink); }
.nav-links a[aria-current]::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }

/* ---- LANGUAGE TOGGLE (static anchor; ko.html is built by build-ko-page) ----*/
.lang-toggle{
  appearance:none; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; text-decoration:none;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  color:var(--text); border:1px solid rgba(154,168,196,.35); border-radius:999px;
  padding:7px 14px; line-height:1;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.lang-toggle:hover{ color:var(--ink); border-color:rgba(24,212,248,.6); background:rgba(24,212,248,.08); }
.lang-toggle:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* Korean rendering: prepend Hangul-native families so KO text does not fall
   back to per-glyph font linking; EN keeps the original stacks. */
html[lang="ko"]{
  --font-display:'Pretendard Local','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic','Segoe UI',system-ui,sans-serif;
  --font-sans:'Pretendard Local','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic','Segoe UI',system-ui,sans-serif;
}
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3{ letter-spacing:-.01em; }
html[lang="ko"] .nav-links a{ letter-spacing:.06em; }

/* ---- SMALL-SCREEN SECTION MENU (details/summary; no JS required) -----------*/
.nav-menu{ position:relative; display:none; }
.nav-menu summary{
  list-style:none; cursor:pointer;
  display:grid; place-items:center;
  width:40px; height:38px; border-radius:10px;
  border:1px solid rgba(154,168,196,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.nav-menu summary::-webkit-details-marker{ display:none; }
.nav-menu summary:hover{ border-color:rgba(24,212,248,.6); background:rgba(24,212,248,.08); }
.nav-menu summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.nav-menu-bars{ display:grid; gap:4px; }
.nav-menu-bars i{
  display:block; width:16px; height:1.6px; border-radius:2px;
  background:var(--ink); opacity:.85;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-menu[open]:not(.is-closing) summary{ border-color:rgba(24,212,248,.6); background:rgba(24,212,248,.1); }
.nav-menu[open]:not(.is-closing) .nav-menu-bars i:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
.nav-menu[open]:not(.is-closing) .nav-menu-bars i:nth-child(2){ opacity:0; }
.nav-menu[open]:not(.is-closing) .nav-menu-bars i:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }
.nav-menu-panel{
  position:absolute; right:0; top:calc(100% + 12px);
  min-width:210px; padding:8px; border-radius:14px;
  display:grid; gap:2px;
  border:1px solid var(--glass-stroke);
  background:linear-gradient(170deg, rgba(13,19,36,.97), rgba(7,10,21,.98));
  box-shadow:0 30px 70px -28px #000, 0 0 44px -22px rgba(24,212,248,.45), inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,-8px,0) scale(.985);
  transform-origin:top right;
  transition:
    opacity var(--motion-base) var(--ease),
    transform var(--motion-base) var(--ease),
    visibility 0s linear var(--motion-base);
}
.nav-menu.is-opening .nav-menu-panel{ will-change:opacity,transform; }
.nav-menu.is-open .nav-menu-panel,
html.no-js .nav-menu[open] .nav-menu-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition-delay:0s;
}
.nav-menu.is-closing .nav-menu-panel{ will-change:opacity,transform; }
.nav-menu-panel a{
  padding:10px 12px; border-radius:9px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-menu-panel a:hover{ color:var(--ink); background:rgba(24,212,248,.09); }
.nav-menu-panel a[aria-current]{ color:var(--ink); background:rgba(24,212,248,.09); }
@media (max-width:980px){ .nav-menu{ display:block; } }
@media (prefers-reduced-motion:reduce){
  .nav-menu-panel{ transition:none; }
}

/* ---- BUTTONS ---------------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; cursor:pointer;
  color:var(--ink);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

.btn.primary{
  font-weight:600;
}
.btn.sm{ padding:10px 18px; font-size:12px; }
.cta-short{ display:none; }

/* ============================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:90px;
  padding-bottom:24px;
  position:relative;
}
.hero .wrap{ position:relative; z-index:3; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,.88fr) minmax(360px,1.12fr); gap:28px; align-items:center; }
.hero-copy{ max-width:650px; position:relative; isolation:isolate; }
.hero-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
}
.hero-copy .display{ margin:20px 0 22px; font-size:clamp(50px,7vw,94px); }
.hero-copy .lede{ max-width:42ch; color:#b8c8df; }
.product-statement{
  max-width:48ch; margin-top:14px; color:var(--ink);
  font-size:14px; line-height:1.55;
}
.hero-actions{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }

.hero-trust-line{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-top:22px;
  color:#afbdd1;
  font-family:var(--font-mono); font-size:clamp(12px,1.15vw,15px);
  letter-spacing:.015em; font-variant-numeric:tabular-nums;
}
.hero-trust-line strong{ color:var(--cyan); font-weight:600; text-shadow:0 0 18px rgba(24,212,248,.34); }
.hero-trust-line span{ color:rgba(157,120,255,.82); }

.hero-stage{
  min-height:clamp(430px,67vh,690px);
  position:relative; pointer-events:none;
  border-radius:50%;
}
.hero-stage-status{
  position:absolute; right:4px; bottom:8%;
  display:flex; align-items:center; gap:14px;
  padding:9px 12px; border:1px solid rgba(84,163,204,.16); border-radius:999px;
  background:rgba(2,5,13,.38); backdrop-filter:blur(10px);
  color:#91a4c0; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
}
.hero-stage-status span{ color:var(--ok); display:inline-flex; align-items:center; gap:7px; }
.hero-stage-status i{ width:5px; height:5px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); }
.hero-stage-status b{ color:#8aa2bd; font-weight:500; }
.hero-stage-status [data-hero-stage-state]{ color:inherit; }
body.hero-loading .hero-stage-status span{ color:var(--cyan); }
body.hero-loading .hero-stage-status i{ background:var(--cyan); }
body.hero-user-paused .hero-stage-status span{ color:var(--gold); }
body.hero-user-paused .hero-stage-status i{ background:var(--gold); box-shadow:0 0 10px var(--gold); }
.hero-stage-axis{
  position:absolute; right:0; top:14%; display:grid; gap:6px; justify-items:end;
  color:rgba(128,164,195,.52); font-family:var(--font-mono); font-size:9px; letter-spacing:.08em;
}
.hero-stage-axis span:last-child{ margin-top:6px; color:rgba(40,223,255,.56); }

.live-dot{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ok); }
.live-dot i{ width:7px; height:7px; border-radius:50%; background:var(--ok); }

.hero-foot{
  margin-top:clamp(18px,3.5vh,42px); display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--muted);
}
.hero-foot .scroll-cue{ display:inline-flex; align-items:center; gap:9px; text-transform:uppercase; white-space:nowrap; }
.hero-foot .scroll-cue:hover{ color:var(--ink); }
.hero-foot .scroll-cue i{
  width:16px; height:26px; border:1px solid var(--line-2); border-radius:9px; position:relative; display:inline-block;
}
.hero-foot .scroll-cue i::after{
  content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:3px; height:6px; border-radius:2px; background:var(--cyan);
}

/* ============================================================================
   SCROLL-DRIVEN PHASE DESCENT
   The WebGL canvas stays fixed beneath this four-screen narrative. main.js
   publishes --orbit-scroll once per animation frame; scene.js uses the same
   value to orbit and lower the physical sculpture without layout reads.
   ========================================================================== */
.orbit-descent{
  --orbit-scroll:0;
  position:relative; z-index:2;
  isolation:isolate;
  background:
    radial-gradient(70% 42% at 74% 22%, rgba(24,212,248,.075), transparent 72%),
    radial-gradient(62% 38% at 68% 72%, rgba(126,76,255,.085), transparent 74%),
    linear-gradient(180deg, rgba(2,4,11,.08), rgba(3,5,13,.28) 46%, rgba(2,4,11,.76));
}
.orbit-descent::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(115,170,210,.045) 1px, transparent 1px),
    linear-gradient(rgba(115,170,210,.04) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 15%, #000 86%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 15%, #000 86%, transparent);
}
.orbit-descent-sticky{
  position:sticky; top:0; z-index:3; height:100vh; height:100svh;
  overflow:hidden; pointer-events:none;
}
.orbit-descent-meter{
  position:absolute; left:clamp(20px,3.2vw,52px); top:50%; transform:translateY(-50%);
  display:grid; grid-template-columns:auto 3px; column-gap:14px; row-gap:7px;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em;
}
.orbit-descent-meter>span{ grid-column:1; color:rgba(159,220,255,.52); font-size:9px; }
.orbit-descent-meter>b{ grid-column:1; color:var(--ink); font-size:10px; font-weight:600; writing-mode:vertical-rl; transform:rotate(180deg); min-height:142px; }
.orbit-descent-meter>em{
  grid-column:2; grid-row:1 / span 2; position:relative; width:2px; height:174px;
  overflow:hidden; background:rgba(140,174,210,.16); border-radius:999px;
}
.orbit-descent-meter>em i{
  position:absolute; inset:0; transform-origin:top; transform:scaleY(var(--orbit-scroll));
  background:linear-gradient(180deg,var(--cyan),var(--violet)); box-shadow:0 0 14px rgba(24,212,248,.72);
}
.orbit-descent-coordinates{
  position:absolute; right:clamp(22px,3vw,48px); bottom:clamp(82px,10vh,108px);
  display:grid; justify-items:end; gap:5px; min-width:138px; padding:11px 12px;
  border:1px solid rgba(126,173,211,.14); border-radius:12px;
  background:rgba(5,9,18,.48); box-shadow:inset 0 1px rgba(255,255,255,.035);
  pointer-events:auto;
  font-family:var(--font-mono); letter-spacing:.12em;
}
.orbit-descent-coordinates span{ color:rgba(144,174,205,.52); font-size:9px; }
.orbit-descent-coordinates strong{ color:rgba(202,235,255,.72); font-size:10px; font-weight:500; font-variant-numeric:tabular-nums; }
.orbit-descent-coordinates span:nth-of-type(2){
  width:100%; margin-top:4px; padding-top:7px; border-top:1px solid rgba(126,173,211,.11); text-align:right;
}
.orbit-descent-coordinates [data-descent-view]{ color:rgba(169,151,255,.86); }
.hero-view-reset{
  margin-top:5px; padding:7px 9px; min-height:32px; border:1px solid rgba(126,173,211,.22);
  border-radius:8px; background:rgba(9,15,27,.78); color:rgba(202,235,255,.82);
  font:600 9px/1 var(--font-mono); letter-spacing:.08em; cursor:pointer;
}
.hero-view-reset:hover{ border-color:rgba(114,214,229,.55); color:#e7f9ff; }
.hero-view-reset:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.hero-view-reset[hidden]{ display:none; }
.orbit-descent-track{ position:relative; z-index:2; margin-top:-100vh; margin-top:-100svh; }
.descent-beat{
  min-height:100vh; min-height:100svh;
  width:min(100% - 48px,var(--maxw)); margin-inline:auto;
  display:flex; align-items:center; justify-content:flex-start;
  padding:96px 0 54px;
}
.descent-beat-right{ justify-content:flex-end; }
.descent-card{
  width:min(470px,44vw); padding:clamp(22px,3vw,34px);
  border:1px solid transparent; border-radius:20px;
  background:
    linear-gradient(155deg,rgba(5,9,20,.88),rgba(4,6,15,.69)) padding-box,
    linear-gradient(145deg,rgba(48,222,255,.36),rgba(255,255,255,.045) 44%,rgba(143,91,255,.28)) border-box;
  box-shadow:0 30px 90px -38px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%);
  opacity:.72; transform:translateY(26px) scale(.975); filter:saturate(.82);
  transition:opacity .45s var(--ease),transform .6s var(--ease),filter .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.descent-beat.is-current .descent-card{
  opacity:1; transform:none; filter:none;
  box-shadow:0 34px 110px -42px rgba(0,0,0,.96),0 0 58px -34px rgba(24,212,248,.62),inset 0 1px 0 rgba(255,255,255,.1);
}
.descent-index{
  display:block; margin-bottom:14px; color:var(--gold); font:600 10px/1 var(--font-mono);
  letter-spacing:.2em; text-transform:uppercase;
}
.descent-card h2,.descent-card h3{ margin:15px 0 14px; font-size:clamp(32px,4.2vw,58px); line-height:.98; text-wrap:balance; }
.descent-card h3{ font-size:clamp(27px,3.15vw,44px); }
.descent-card p{ color:#afc0d8; font-size:clamp(14px,1.2vw,17px); line-height:1.7; text-wrap:pretty; }
.descent-signal{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  color:rgba(192,226,246,.78); font:10px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
}
.descent-signal i{ width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 12px var(--ok); }
.descent-equation{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(137,180,216,.15); font-family:var(--font-mono);
}
.descent-equation span{ color:var(--muted); font-size:12px; }
.descent-equation strong{ color:var(--cyan); font-size:clamp(20px,2vw,28px); font-weight:500; }
.descent-equation sup{ font-size:.6em; }
.story-technical{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  color:var(--text); font-size:13px;
}
.story-technical summary{ color:var(--ink); cursor:pointer; font-weight:700; }
.story-technical p{ margin-top:10px; }
.descent-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.descent-tags span{
  padding:6px 10px; border:1px solid rgba(118,178,217,.18); border-radius:999px;
  background:rgba(24,212,248,.045); color:rgba(192,220,240,.72);
  font:9px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
}
.descent-card .btn{ margin-top:22px; }
.descent-static-copy{ display:none; }
html.no-js .descent-live-copy,
body.reduced-motion-hero .descent-live-copy,
body.low-power-hero .descent-live-copy,
body.no-webgl .descent-live-copy{ display:none; }
html.no-js .descent-static-copy,
body.reduced-motion-hero .descent-static-copy,
body.low-power-hero .descent-static-copy,
body.no-webgl .descent-static-copy{ display:block; }
html.no-js .descent-signal.descent-static-copy,
body.reduced-motion-hero .descent-signal.descent-static-copy,
body.low-power-hero .descent-signal.descent-static-copy,
body.no-webgl .descent-signal.descent-static-copy{ display:inline-flex; }

/* Motion/data/WebGL fallbacks keep the scientific narrative, but collapse the
   four-screen cinematic track into a concise static evidence sequence. */
html.no-js .orbit-descent-sticky,
body.reduced-motion-hero .orbit-descent-sticky,
body.low-power-hero .orbit-descent-sticky,
body.no-webgl .orbit-descent-sticky{ display:none; }
html.no-js .orbit-descent-track,
body.reduced-motion-hero .orbit-descent-track,
body.low-power-hero .orbit-descent-track,
body.no-webgl .orbit-descent-track{
  margin-top:0; display:grid; gap:18px; padding:72px 24px;
}
html.no-js .descent-beat,
body.reduced-motion-hero .descent-beat,
body.low-power-hero .descent-beat,
body.no-webgl .descent-beat{
  min-height:0; width:100%; padding:0; justify-content:center;
}
html.no-js .descent-card,
body.reduced-motion-hero .descent-card,
body.low-power-hero .descent-card,
body.no-webgl .descent-card{
  width:min(680px,100%); opacity:1; transform:none; filter:none;
}
html.no-js .orbit-controls{ display:none; }
html.no-js .orbit-console canvas{ display:none; }
.orbit-static-fallback.orbit-static-fallback-template{ display:none; }
html.no-js .orbit-static-fallback-template,
body.orbit-console-static .orbit-static-fallback-template{ display:grid; }
body.hero-live.orbit-descent-active .hero-static-art{ opacity:.025; filter:saturate(.58) brightness(.6); }
body.orbit-descent-active #hero-canvas{ opacity:1; }
body.reduced-motion-hero.orbit-descent-active .hero-static-art,
body.low-power-hero.orbit-descent-active .hero-static-art,
body.no-webgl.orbit-descent-active .hero-static-art{ opacity:.94; filter:saturate(.58) brightness(.78); }

/* ============================================================================
   GENERIC SECTION CHROME
   ========================================================================== */
.band{
  content-visibility:auto; contain-intrinsic-size:auto 980px;
}
.sec-head{ position:relative; max-width:780px; margin-bottom:56px; padding-bottom:26px; }
.sec-head h2{ font-size:clamp(30px, 4.4vw, 58px); margin:18px 0 16px; }
.sec-head p{ font-size:clamp(15px,1.4vw,18px); max-width:60ch; text-wrap:pretty; }
/* a thin luminous rule sweeps across the section header as it scrolls in */
.sec-head::after{
  content:""; position:absolute; left:0; bottom:0; height:1px;
  transform:scaleX(0); transform-origin:left center;
}
.sec-head.lit::after{ transform:scaleX(1); }

/* One-shot IntersectionObserver reveals. The explicit no-js path keeps every
   section readable when the interaction runtime is unavailable. */
.js-ready .reveal{ opacity:0; transform:translateY(28px); }
.js-ready .reveal.in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
html.no-js .reveal{ opacity:1; transform:none; }
html.no-js .sec-head::after{ transform:scaleX(1); }

/* ============================================================================
   THE SCIENCE ? divergence
   ========================================================================== */
.science-grid{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.diverge-stage{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid transparent;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(24,212,248,.07), transparent 60%) padding-box,
    linear-gradient(rgba(5,8,18,.74), rgba(5,8,18,.74)) padding-box,
    var(--hairline) border-box;
  box-shadow:0 40px 100px -50px #000, 0 0 56px -30px rgba(24,212,248,.4), inset 0 1px 0 rgba(255,255,255,.05);
  aspect-ratio:1/.82;
}
.diverge-stage canvas{ display:block; width:100%; height:100%; }
.diverge-stage svg{ display:block; width:100%; height:100%; }
.draw-path{ fill:none; stroke-linecap:round; }
.diverge-stage .seed{ fill:#dff6ff; }
.diverge-stage .grid-line{ stroke:rgba(150,178,225,.10); stroke-width:1; }
.diverge-tag{
  position:absolute; left:16px; bottom:14px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  display:flex; gap:16px;
}
.diverge-tag b{ font-weight:500; }
.diverge-tag .a{ color:var(--cyan); }
.diverge-tag .b{ color:var(--violet); }

.lyap-readout{
  margin-top:30px; display:flex; gap:30px; flex-wrap:wrap;
}
.lyap-readout .stat{
  display:flex; flex-direction:column; gap:3px;
  padding-left:14px;
  border-left:1px solid transparent;
  border-image:linear-gradient(180deg, var(--cyan), rgba(143,91,255,.45), transparent) 1;
}
.lyap-readout .stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.4vw,46px); color:var(--ink); line-height:1; }
.lyap-readout .stat .num .u{ font-size:.42em; color:var(--cyan); font-family:var(--font-mono); font-weight:500; margin-left:4px; }
.lyap-readout .stat .lab{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ============================================================================
   CAPABILITIES GRID
   ========================================================================== */
.cap-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.cap-card{
  position:relative; padding:26px 24px 28px;
  overflow:hidden;
}
.cap-card .idx{ font-family:var(--font-mono); font-size:12px; color:var(--gold); letter-spacing:.2em; }
.cap-card .glyph{
  width:46px; height:46px; margin:14px 0 18px; border-radius:13px;
  display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(24,212,248,.16), rgba(157,120,255,.1));
  border:1px solid var(--glass-stroke);
}
.cap-card .glyph svg{ width:24px; height:24px; stroke:var(--cyan); fill:none; stroke-width:1.4; }
.cap-card h3{ font-size:21px; margin-bottom:9px; }
.cap-card p{ font-size:14px; color:var(--text); margin-bottom:16px; text-wrap:pretty; }
.cap-card .tags{ display:flex; flex-wrap:wrap; gap:6px; }
.cap-card .tag{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  color:var(--text); padding:4px 9px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
}

/* ============================================================================
   VALIDATION
   ========================================================================== */
.valid-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:start; }
.val-board{
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
}
.val-board:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.val-board .vb-head,.val-table{ min-width:620px; }
.val-board .vb-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.val-board .vb-head .pass{ color:var(--ok); display:inline-flex; align-items:center; gap:8px; }
.val-board .vb-head .pass i{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 9px var(--ok); }
.val-table{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:12.5px; }
.val-table th, .val-table td{ text-align:left; padding:11px 22px; border-bottom:1px solid var(--line); }
.val-table th{ color:var(--muted); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.val-table td.r, .val-table th.r{ text-align:right; font-variant-numeric:tabular-nums; }
.val-table tr:last-child :is(th,td){ border-bottom:0; }
.val-table .name{ color:var(--ink); }
.val-table .drift{ color:var(--cyan); }
.val-table tbody tr{ transition:background .25s var(--ease); }
.val-table tbody tr:hover{ background:rgba(24,212,248,.05); }
.val-bar{ display:inline-block; height:5px; border-radius:3px; background:linear-gradient(90deg,var(--cyan),var(--violet)); vertical-align:middle; box-shadow:0 0 10px rgba(24,212,248,.5); }

.val-side{ display:flex; flex-direction:column; gap:18px; }
.val-stat{
  padding:22px 24px;
}
.val-stat .big{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4vw,52px); color:var(--ink); line-height:1; letter-spacing:-.02em; }
.val-stat .big .u{ font-family:var(--font-mono); font-size:.32em; color:var(--cyan); font-weight:500; margin-left:6px; letter-spacing:.05em; }
.val-stat .cap{ margin-top:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.val-stat p{ margin-top:8px; font-size:13.5px; color:var(--text); }

/* ============================================================================
   LAUNCH / FOOTER
   ========================================================================== */
.launch{
  text-align:center; padding:clamp(110px,16vh,200px) 0;
  position:relative;
}
/* A quiet stage light behind the closing call — zero-cost static gradients. */
.launch::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(560px 320px at 50% 38%, rgba(24,212,248,.12), transparent 66%),
    radial-gradient(760px 420px at 50% 60%, rgba(143,91,255,.1), transparent 70%),
    radial-gradient(2px 2px at 32% 30%, rgba(223,248,255,.5), transparent 100%),
    radial-gradient(2px 2px at 68% 26%, rgba(24,212,248,.45), transparent 100%),
    radial-gradient(2px 2px at 58% 74%, rgba(157,120,255,.5), transparent 100%);
}
.launch::after{
  content:""; position:absolute; left:50%; top:64px; width:min(420px,72vw); height:1px;
  transform:translateX(-50%); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(24,212,248,.6), rgba(143,91,255,.5), transparent);
  box-shadow:0 0 18px rgba(24,212,248,.45);
}
.launch .display{ margin:22px auto 10px; max-width:16ch; }
.launch .lede{ margin:0 auto 38px; text-align:center; }
.launch-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.footer{
  position:relative;
  border-top:1px solid var(--line);
  padding:40px 0 56px;
  margin-top:40px;
}
.footer::before{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:min(340px,46%);
  background:linear-gradient(90deg, var(--cyan), rgba(143,91,255,.55), transparent);
  opacity:.7;
}
.footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer .meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); letter-spacing:.05em; display:flex; gap:22px; flex-wrap:wrap; }
.footer .meta a{ transition:color .25s var(--ease); }
.footer .meta a:hover{ color:var(--cyan); }
.footer .cite{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.footer .cite b{ color:var(--text); font-weight:500; }

/* ============================================================================
   사용법 — HOW TO USE
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:step; }
.step{
  position:relative; padding:30px 26px 28px;
  overflow:hidden;
}
.step .no{
  font-family:var(--font-display); font-weight:800; font-size:13px;
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  color:var(--gold); border:1px solid var(--gold-line);
  background:linear-gradient(160deg, rgba(231,200,135,.12), rgba(24,212,248,.06));
  margin-bottom:18px; letter-spacing:.04em;
}
.step h3{ font-size:20px; margin-bottom:9px; }
.step p{ font-size:14px; color:var(--text); text-wrap:pretty; }
.step .line{
  position:absolute; left:46px; right:-9px; top:50px; height:1px;
  background:linear-gradient(90deg, rgba(24,212,248,.5), transparent);
}
.step:last-child .line{ display:none; }
.guide-foot{ margin-top:34px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.guide-foot .note{ font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.04em; }

/* ============================================================================
   NAVIGATION FEEDBACK / STATIC SIGNAL STRIP
   ========================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:60;
  transform:scaleX(0); transform-origin:left center; will-change:transform;
  background:linear-gradient(90deg, #43e7ff, var(--cyan) 34%, var(--violet-deep) 72%, var(--violet));
  box-shadow:0 0 14px rgba(24,212,248,.7), 0 0 26px rgba(143,91,255,.45);
}
.signal-strip{
  position:relative; z-index:2; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.signal-strip-track{
  align-items:center;
}
.signal-strip-track .dot{ color:var(--primary); font-size:9px; }

/* ============================================================================
   LIVE APP PREVIEW
   ========================================================================== */
.console-band{ padding-top:86px; }
.console-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:34px;
  align-items:center;
}
.console-copy h2{
  font-size:42px;
  line-height:1.04;
  margin:18px 0 16px;
}
.console-copy p{
  max-width:54ch;
  font-size:15.5px;
  color:var(--text);
}
.experiment-recipe{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  margin-top:22px; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--line);
}
.experiment-recipe div{ min-width:0; padding:11px 12px; background:rgba(5,9,20,.76); }
.experiment-recipe dt{
  color:var(--muted); font:600 10px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
}
.experiment-recipe dd{ margin-top:7px; color:var(--ink); font-size:12.5px; line-height:1.45; }
.trajectory-legend{ display:grid; gap:8px; margin-top:16px; }
.trajectory-legend span{ display:flex; align-items:center; gap:8px; color:var(--text); font-size:12.5px; }
.trajectory-legend b{ min-width:74px; color:var(--ink); }
.trajectory-legend i{ width:18px; height:3px; border-radius:999px; flex:0 0 auto; }
.reference-swatch{ background:var(--cyan); }
.perturbed-swatch{ background:var(--violet); }
.console-readouts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:24px;
}
.console-readout{
  min-width:0;
  padding:12px 13px;
  border-radius:8px;
  border:1px solid var(--glass-stroke);
  background:
    linear-gradient(155deg, rgba(12,18,34,.72), rgba(7,10,21,.68)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.025) 19px, transparent 20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.console-readout span{
  display:block;
  color:var(--muted);
  font:600 10px/1 var(--font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.console-readout strong{
  display:block;
  min-width:0;
  margin-top:9px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font:700 16px/1.1 var(--font-mono);
  font-variant-numeric:tabular-nums;
}
.console-readout:nth-child(1) strong{ color:var(--cyan); }
.console-readout:nth-child(2) strong{ color:#ffbe55; }
.console-readout:nth-child(3) strong{ color:#34e88a; }
.console-readout:nth-child(4) strong{ color:var(--primary); }
.orbit-controls{
  display:block;
  margin-top:16px;
  padding:14px;
  border:1px solid var(--glass-stroke);
  border-radius:10px;
  background:rgba(5,9,20,.58);
}
.orbit-control-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px; margin-top:11px;
  color:var(--text);
  font:600 11px/1.2 var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.orbit-unit-row{
  display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:10px;
  padding-bottom:13px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.orbit-unit-row label{ color:var(--ink); font-size:12px; font-weight:700; }
.orbit-unit-row select{
  min-height:36px; padding:6px 28px 6px 10px; color:var(--ink); background:var(--elevated);
  border:1px solid var(--line-2); border-radius:7px; font:600 12px/1 var(--font-sans);
}
.orbit-unit-row small{ color:var(--muted); font-size:11px; line-height:1.4; }
.orbit-control-meta label{ cursor:pointer; }
.orbit-control-meta small{ color:var(--muted); font-size:9px; letter-spacing:0; text-transform:none; }
.orbit-controls output{ color:var(--cyan); font-variant-numeric:tabular-nums; }
.orbit-controls [data-orbit-output="thetaTwo"]{ color:var(--cyan); }
.orbit-controls [data-orbit-output="separation"]{ color:var(--violet); }
.orbit-controls [data-orbit-output="damping"]{ color:var(--warn); }
.orbit-input-row{
  display:grid; grid-template-columns:minmax(120px,1fr) minmax(104px,.38fr) auto;
  align-items:center; gap:9px;
}
.orbit-controls input[type="range"]{
  width:100%;
  min-width:0;
  min-height:28px;
  accent-color:var(--cyan);
  cursor:pointer;
}
.orbit-controls [data-orbit-control="separation"]{ accent-color:var(--violet); }
.orbit-controls [data-orbit-control="damping"]{ accent-color:var(--warn); }
.orbit-number{
  width:100%; min-width:0; min-height:36px; padding:7px 9px;
  border:1px solid var(--line-2); border-radius:7px; background:var(--elevated); color:var(--ink);
  font:600 12px/1 var(--font-mono); font-variant-numeric:tabular-nums;
}
.orbit-input-row > span{ min-width:23px; color:var(--muted); font:11px/1 var(--font-mono); }
.orbit-controls[hidden]{ display:none; }
.orbit-reset{
  align-self:stretch;
  padding:8px 11px;
  border:1px solid var(--line-2);
  border-radius:7px;
  background:rgba(24,212,248,.07);
  color:var(--ink);
  font:600 10px/1.2 var(--font-mono);
  letter-spacing:.06em;
  cursor:pointer;
}
.orbit-reset:hover{ border-color:rgba(24,212,248,.65); background:rgba(24,212,248,.12); }
.orbit-reset:focus-visible,.orbit-controls input:focus-visible,.orbit-controls select:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.orbit-button-row{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.exact-state{
  margin-top:14px; padding:13px 14px; border:1px solid var(--line); border-radius:10px;
  background:rgba(5,9,20,.58);
}
.exact-state > span{ color:var(--muted); font:600 10px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.exact-state p{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:8px; margin-top:10px; font-size:12px; }
.exact-state b{ color:var(--ink); }
.exact-state code{ color:var(--text); font:11px/1.5 var(--font-mono); overflow-wrap:anywhere; }
.exact-state p:first-of-type code{ color:var(--cyan); }
.exact-state p:nth-of-type(2) code{ color:var(--violet); }
.exact-state small{ display:block; margin-top:10px; color:var(--muted); font-size:11px; line-height:1.45; }
.console-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.console-actions a[aria-disabled="true"]{
  cursor:progress;
  opacity:.62;
}

.orbit-console{
  position:relative;
  min-width:0;
  padding:10px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid transparent;
  background:
    linear-gradient(160deg, rgba(5,8,18,.94), rgba(9,14,29,.8)) padding-box,
    linear-gradient(130deg, rgba(24,212,248,.55), rgba(223,248,255,.18) 46%, rgba(143,91,255,.5)) border-box;
  box-shadow:
    0 46px 120px -58px #000,
    0 0 56px -30px rgba(24,212,248,.6),
    0 0 72px -40px rgba(143,91,255,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.orbit-console::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:1;
  pointer-events:none;
  border-radius:6px;
  border:1px solid rgba(24,212,248,.16);
  background:
    linear-gradient(rgba(24,212,248,.035) 1px, transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg, rgba(24,212,248,.032) 1px, transparent 1px) 0 0/44px 100%;
  mix-blend-mode:screen;
}
.orbit-console canvas{
  position:relative;
  z-index:0;
  display:block;
  width:100%;
  aspect-ratio:46/31;
  border-radius:6px;
  background:#02040b;
}
.orbit-console canvas[hidden]{ display:none; }
.orbit-static-fallback{
  position:relative;
  z-index:2;
  display:grid;
  min-height:clamp(300px, 48vw, 620px);
  place-content:center;
  justify-items:center;
  gap:12px;
  padding:36px;
  border-radius:6px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 44%, rgba(24,212,248,.16), transparent 34%),
    linear-gradient(145deg, rgba(7,12,25,.98), rgba(3,6,14,.98));
}
.orbit-static-fallback > span{
  color:var(--cyan);
  font:700 clamp(34px,6vw,72px)/1 var(--font-display);
  text-shadow:0 0 28px rgba(24,212,248,.42);
}
.orbit-static-fallback strong{ color:var(--ink); font:650 15px/1.3 var(--font-display); }
.orbit-static-fallback small{ max-width:42ch; color:var(--muted); font:500 12px/1.55 var(--font-mono); }
.orbit-console figcaption{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 2px 0;
  color:var(--muted);
  font:600 10.5px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}

.val-table caption{
  padding:14px 20px;
  color:var(--muted);
  font:500 11px/1.5 var(--font-mono);
  text-align:left;
  border-bottom:1px solid var(--line);
}
.val-table tbody th{ text-align:left; }
.val-table td strong,.val-table td small{ display:block; }
.val-table td small{ margin-top:4px; color:var(--muted); font-size:10px; }
.evidence-status{
  display:inline-flex;
  align-items:center;
  min-width:68px;
  justify-content:center;
  padding:5px 8px;
  border:1px solid currentColor;
  border-radius:999px;
  font:700 9px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.evidence-status.passed{ color:var(--ok); background:rgba(89,226,164,.06); }
.evidence-status.measured{ color:var(--cyan); background:rgba(24,212,248,.06); }
.evidence-status.informational{ color:#f1c96b; background:rgba(241,201,107,.08); }
.evidence-status.withheld{ color:#ff8c96; background:rgba(255,92,108,.08); }
.evidence-status.publication-ready{ color:#8be7b1; background:rgba(74,222,128,.08); }
.evidence-caveat{ display:block; max-width:42ch; margin-top:.3rem; color:var(--muted); font-size:.68rem; line-height:1.45; }
.evidence-status.partial{ color:var(--gold); background:rgba(255,190,85,.06); }
.evidence-freshness{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:12px 20px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font:600 10px/1.4 var(--font-mono);
  letter-spacing:.06em;
}
.evidence-freshness::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 9px var(--ok);
}
.evidence-stale .evidence-freshness,.evidence-invalid .evidence-freshness{ color:var(--gold); }
.evidence-stale .evidence-freshness::before,.evidence-invalid .evidence-freshness::before{
  background:var(--gold);
  box-shadow:0 0 9px var(--gold);
}

.preview-band{ padding-top:clamp(76px, 10vh, 130px); }
.preview-grid{
  display:grid; grid-template-columns:.88fr 1.12fr; gap:34px; align-items:center;
}
.preview-copy h2{ font-size:clamp(30px,4vw,52px); margin:18px 0 16px; }
.preview-copy p{ max-width:56ch; font-size:15.5px; }
.app-preview{
  border:1px solid var(--glass-stroke);
  border-radius:18px; overflow:hidden;
  background:rgba(6,8,18,.72);
  box-shadow:0 42px 110px -52px #000, 0 0 52px -30px rgba(24,212,248,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.app-preview picture,
.app-preview img{
  display:block; width:100%;
  aspect-ratio:16/10; object-fit:cover; object-position:left top;
}
.app-preview figcaption{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:12px 14px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  color:var(--muted); text-transform:uppercase;
}
.app-preview figcaption a{ color:var(--cyan); }
.recipe-grid{ display:grid; gap:10px; margin-top:24px; }
.recipe-card{
  display:grid; grid-template-columns:92px minmax(0,1fr); gap:8px 14px;
  padding:13px 14px; border-radius:12px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)) padding-box,
    linear-gradient(150deg, rgba(24,212,248,.3), rgba(150,178,225,.08) 42%, rgba(143,91,255,.26)) border-box;
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.recipe-card:hover{
  transform:translateY(-2px);
  background:
    linear-gradient(180deg, rgba(24,212,248,.09), rgba(255,255,255,.016)) padding-box,
    linear-gradient(150deg, rgba(24,212,248,.5), rgba(150,178,225,.14) 42%, rgba(143,91,255,.44)) border-box;
}
.recipe-card span{
  grid-row:1/3; align-self:center;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  color:var(--cyan); text-transform:uppercase;
}
.recipe-card strong{ color:var(--ink); font-family:var(--font-display); font-size:17px; line-height:1.1; }
.recipe-card em{ color:var(--text); font-style:normal; font-size:13px; }

.methods-disclosure{
  margin-top:20px; padding:17px 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--control); color:var(--text);
}
.methods-disclosure summary{ color:var(--ink); cursor:pointer; font-weight:700; }
.methods-disclosure p{ max-width:82ch; margin-top:12px; font-size:13px; }
.methods-disclosure .tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.methods-disclosure .tag{ padding:5px 8px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font:11px/1 var(--font-mono); }

.secondary-intro{ padding-bottom:28px; background:var(--bg); }
.secondary-intro .sec-head{ max-width:820px; }
.secondary-band{ position:relative; background:rgba(11,14,23,.72); }
.secondary-band::before{
  content:"Optional advanced path"; position:absolute; top:20px; right:max(24px,calc((100vw - 1180px)/2));
  color:var(--muted); font:10px/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase;
}

/* ============================================================================
   MODES — three workspaces
   ========================================================================== */
.mode-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mode-card{
  position:relative; padding:28px 26px 30px; border-radius:20px;
  overflow:hidden; isolation:isolate;
  background:
    linear-gradient(170deg, rgba(13,21,40,.6), rgba(5,9,20,.52)) padding-box,
    var(--hairline) border-box;
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid transparent;
  box-shadow:0 24px 60px -44px #000, inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.mode-card:hover{
  transform:translateY(-6px);
  box-shadow:0 40px 90px -48px #000, 0 0 54px -26px rgba(143,91,255,.55), 0 0 64px -34px rgba(24,212,248,.45), inset 0 1px 0 rgba(255,255,255,.1);
}
.mode-card.featured{
  background:
    linear-gradient(170deg, rgba(24,212,248,.1), rgba(10,16,32,.6) 46%) padding-box,
    linear-gradient(155deg, rgba(24,212,248,.55), rgba(150,178,225,.1) 40%, rgba(143,91,255,.42)) border-box;
  box-shadow:0 30px 80px -46px #000, 0 0 60px -26px rgba(24,212,248,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.mode-tag{
  display:inline-block; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cyan);
  border:1px solid rgba(24,212,248,.35); border-radius:999px;
  padding:5px 12px; background:rgba(24,212,248,.07);
}
.mode-card h3{ font-size:22px; margin:16px 0 10px; color:var(--ink); }
.mode-card p{ font-size:14px; color:var(--text); text-wrap:pretty; }
.mode-list{ margin-top:16px; list-style:none; display:grid; gap:8px; }
.mode-list li{
  position:relative; padding-left:20px;
  font-family:var(--font-mono); font-size:12px; color:var(--text); letter-spacing:.02em;
}
.mode-list li::before{
  content:"◆"; position:absolute; left:0; top:1px;
  color:var(--cyan); font-size:9px; text-shadow:0 0 8px rgba(24,212,248,.8);
}

/* ============================================================================
   FRONTIER — research library grid
   ========================================================================== */
.frontier-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.frontier-card{
  position:relative; padding:20px 19px 22px; border-radius:16px;
  background:
    linear-gradient(165deg, rgba(11,17,34,.58), rgba(5,8,18,.52)) padding-box,
    linear-gradient(160deg, rgba(150,178,225,.2), rgba(150,178,225,.05) 46%, rgba(143,91,255,.22)) border-box;
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease),
             box-shadow .35s var(--ease), background .35s var(--ease);
}
.frontier-card:hover{
  transform:translateY(-4px);
  background:
    linear-gradient(165deg, rgba(16,24,46,.75), rgba(7,11,24,.66)) padding-box,
    linear-gradient(160deg, rgba(24,212,248,.4), rgba(150,178,225,.1) 44%, rgba(143,91,255,.45)) border-box;
  box-shadow:0 26px 60px -40px #000, 0 0 36px -20px rgba(157,120,255,.6);
}
.frontier-card h3{ font-size:15.5px; color:var(--ink); margin-bottom:8px; letter-spacing:.01em; }
.frontier-card p{ font-size:12.5px; line-height:1.6; color:var(--text); text-wrap:pretty; }

/* ============================================================================
   LEDGER — the reproducibility gate
   ========================================================================== */
.ledger{
  margin-top:30px; border-radius:20px; overflow:hidden;
  border:1px solid transparent;
  background:
    linear-gradient(175deg, rgba(7,11,24,.8), rgba(4,7,16,.74)) padding-box,
    var(--hairline) border-box;
  backdrop-filter:blur(14px);
  box-shadow:0 40px 100px -52px #000, 0 0 60px -36px rgba(143,91,255,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
.ledger .vb-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.ledger .vb-head .pass{ color:var(--ok); display:inline-flex; align-items:center; gap:8px; }
.ledger .vb-head .pass i{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 9px var(--ok); }
.ledger-rows{ display:grid; }
.ledger-row{
  display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:baseline;
  padding:13px 22px; border-bottom:1px solid var(--line);
  transition:background .25s var(--ease);
}
.ledger-row:last-child{ border-bottom:0; }
.ledger-row:hover{ background:rgba(24,212,248,.05); }
.ledger-row .k{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan);
}
.ledger-row .v{ font-size:13.5px; color:var(--text); }

/* ============================================================================
   TCAD, VALIDATION CTA, AND RELEASE SIGNALS
   ========================================================================== */
.tcad-band{
  background:
    radial-gradient(800px 460px at 18% 15%, rgba(231,200,135,.08), transparent 62%),
    linear-gradient(180deg, rgba(9,13,26,.86), rgba(5,7,16,.9));
}
.tcad-grid{ display:grid; gap:28px; }
.tcad-cards,.changelog-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tcad-card,.changelog-card{
  position:relative;
  min-width:0;
  padding:22px;
  border:1px solid transparent;
  border-radius:14px;
  background:
    linear-gradient(155deg, rgba(14,21,40,.78), rgba(6,9,20,.72)) padding-box,
    linear-gradient(160deg, rgba(150,178,225,.22), rgba(150,178,225,.06) 44%, rgba(143,91,255,.24)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  overflow-wrap:anywhere;
}
.tcad-card > span,.changelog-card > span{
  display:block;
  margin-bottom:14px;
  color:var(--gold);
  font:600 10px/1 var(--font-mono);
  letter-spacing:.15em;
  text-transform:uppercase;
}
.tcad-card h3,.changelog-card h3{ margin-bottom:9px; color:var(--ink); font-size:18px; }
.tcad-card p,.changelog-card p{ color:var(--text); font-size:13px; line-height:1.65; }
.validation-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:22px;
  padding:24px;
  border:1px solid transparent;
  border-radius:16px;
  background:
    linear-gradient(120deg, rgba(24,212,248,.09), rgba(143,91,255,.06)) padding-box,
    linear-gradient(120deg, rgba(24,212,248,.5), rgba(150,178,225,.12) 46%, rgba(143,91,255,.46)) border-box;
}
.validation-cta h3{ max-width:620px; margin-top:8px; color:var(--ink); font-size:22px; }
.validation-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.changelog-band{ background:linear-gradient(180deg, rgba(5,6,15,.96), rgba(8,11,24,.94)); }
.changelog-card{ border-top-color:rgba(157,120,255,.48); }
.changelog-card > span{ color:var(--violet); }
.changelog-card[data-ready="true"]{ border-color:rgba(157,120,255,.26); }

body.capture-mode *,body.capture-mode *::before,body.capture-mode *::after{
  animation:none !important;
  transition:none !important;
  caret-color:transparent !important;
}

/* Standalone GitHub/Cloudflare Pages 404. */
.error-page{ min-height:100vh; display:grid; place-items:center; padding:32px; }
.error-shell{
  width:min(760px,100%);
  padding:clamp(28px,6vw,64px);
  border:1px solid var(--glass-stroke);
  border-radius:20px;
  background:linear-gradient(150deg,rgba(16,23,44,.82),rgba(6,9,20,.88));
  box-shadow:0 50px 140px -60px #000, inset 0 1px 0 rgba(255,255,255,.06);
}
.error-code{ color:var(--cyan); font:700 clamp(54px,12vw,108px)/.9 var(--font-display); letter-spacing:-.05em; }
.error-shell h1{ margin:22px 0 14px; font-size:clamp(30px,6vw,54px); }
.error-shell p{ max-width:60ch; color:var(--text); }
.error-shell .ko-copy{ margin-top:10px; }
.error-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }


/* ============================================================================
   UNIFIED PRODUCT SURFACE
   Restrained public-facing translation of the simulator's product tokens.
   ========================================================================== */
body{ background:var(--bg); color:var(--text); letter-spacing:0; }
::selection{ background:rgba(139,124,246,.28); color:var(--ink); }
a:focus-visible,button:focus-visible{ outline-color:var(--primary); }

.page-bg{
  background:radial-gradient(900px 560px at 78% 8%,rgba(139,124,246,.055),transparent 66%),var(--bg);
}
.page-bg::before{ opacity:.24; }
.page-grain{ display:none; }
.hero-static-art{
  background:
    linear-gradient(90deg,rgba(7,9,16,.96),rgba(7,9,16,.76) 35%,rgba(7,9,16,.18) 69%,rgba(7,9,16,.08)),
    linear-gradient(180deg,rgba(7,9,16,.08) 54%,rgba(7,9,16,.88)),
    url("hero-fallback.webp") center/cover no-repeat;
  opacity:.82;
  filter:saturate(.58) brightness(.78);
  transition:opacity var(--motion-slow) var(--ease);
}
.hero-live .hero-static-art{ opacity:.08; filter:saturate(.5) brightness(.66); }

.nav{
  padding-top:calc(16px + var(--safe-top));
  padding-bottom:16px;
  transition:background var(--motion-base) var(--ease),border-color var(--motion-base) var(--ease);
}
.nav.scrolled{
  background:rgba(11,14,23,.97);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:var(--line);
  box-shadow:none;
}
.brand .mark svg{ filter:none; }
.brand .name{ font-weight:700; letter-spacing:-.01em; text-transform:none; }
.nav-links a{ font-family:var(--font-sans); font-size:13px; letter-spacing:0; text-transform:none; }
.nav-links a::after{
  bottom:-8px; height:1px; border-radius:0; background:var(--primary);
  transition:width var(--motion-base) var(--ease);
}
.lang-toggle,.nav-menu summary{
  border-color:var(--line-2); border-radius:var(--radius-md); background:var(--control);
}
.lang-toggle{ font-family:var(--font-sans); letter-spacing:0; }
.lang-toggle:hover,.nav-menu summary:hover,.nav-menu[open] summary{
  color:var(--ink); border-color:rgba(139,124,246,.46); background:var(--hover);
}
.nav-menu-panel{
  border-color:var(--line-2); border-radius:var(--radius-lg); background:var(--elevated);
  box-shadow:0 12px 28px rgba(0,0,0,.2);
}
.nav-menu-panel a{ border-radius:var(--radius-md); font-family:var(--font-sans); letter-spacing:0; text-transform:none; }
.nav-menu-panel a:hover,.nav-menu-panel a[aria-current]{ background:var(--selected); }

.kicker{
  color:var(--muted); font-family:var(--font-sans); font-size:13px; font-weight:600;
  letter-spacing:.01em; text-transform:none;
}
.kicker::before{ width:18px; background:var(--primary); }
.display{ font-size:clamp(44px,7vw,96px); line-height:.98; letter-spacing:-.045em; }
.display .grad{
  background:linear-gradient(98deg,var(--ink),#dfe2ec 76%,#b8afe9 108%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.display .dissolve{
  color:var(--ink); background:none; -webkit-text-fill-color:currentColor;
  font-style:normal; font-weight:760; text-shadow:none;
}
.lede{ color:var(--text); }

.btn{
  min-height:42px; border-color:var(--line-2); border-radius:var(--radius-md);
  background:var(--control); box-shadow:none; font-family:var(--font-sans);
  font-size:14px; font-weight:600; letter-spacing:0;
  transition:transform var(--motion-fast) var(--ease),border-color var(--motion-base) var(--ease),background var(--motion-base) var(--ease),color var(--motion-base) var(--ease);
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(205,214,245,.22); background:var(--hover); box-shadow:none; }
.btn:active{ transform:none; }
.btn.primary{ color:#090b12; background:var(--primary); border-color:rgba(255,255,255,.12); box-shadow:none; }
.btn.primary:hover{ background:#988afa; box-shadow:none; }
.btn.ghost{ border-color:var(--line-2); background:var(--control); }

.hero{ min-height:100svh; }
.hero-copy::before{
  inset:-40px -80px -38px -42px;
  background:radial-gradient(ellipse at 32% 48%,rgba(7,9,16,.96),rgba(7,9,16,.78) 58%,transparent 80%);
  filter:none;
}
.hero-trust-line{ color:var(--muted); }
.hero-stage-status{
  border-color:var(--line-2); border-radius:var(--radius-md); background:rgba(11,14,23,.9);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.hero-stage-status i,.live-dot i,.descent-signal i,.val-board .vb-head .pass i,
.ledger .vb-head .pass i,.evidence-freshness::before{ box-shadow:none; }
.hero-motion-control button{
  border-color:var(--line-2); border-radius:var(--radius-md); background:var(--elevated);
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  font-family:var(--font-sans); letter-spacing:0; text-transform:none;
}
.hero-motion-icon i{ background:var(--cyan); box-shadow:none; }
.hero-scrim{ background:linear-gradient(180deg,rgba(7,9,16,.04),rgba(7,9,16,.96)); }

.signal-strip{
  border-color:var(--line); padding:14px 0; background:var(--raised);
  backdrop-filter:none; -webkit-backdrop-filter:none; mask:none; -webkit-mask:none;
}
.signal-strip-track{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px; padding-inline:24px;
  white-space:normal; color:var(--muted); font-family:var(--font-sans);
  font-size:12px; letter-spacing:0; text-transform:none;
}
.signal-strip-track span{ display:inline-flex; align-items:center; gap:7px; color:var(--text); }
.signal-strip-track b{
  display:grid; place-items:center; width:20px; height:20px; border:1px solid var(--line-2);
  border-radius:50%; color:var(--primary); font:700 10px/1 var(--font-mono);
}
.signal-strip-track > i{ color:var(--muted); font-style:normal; }

.orbit-descent{ background:linear-gradient(180deg,rgba(7,9,16,.28),rgba(11,14,23,.96) 90%); }
.orbit-descent::before{ opacity:.06; }
.descent-card{
  border-color:var(--line-2); border-radius:var(--radius-lg); background:rgba(16,20,31,.96);
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; filter:none;
  transition:opacity var(--motion-slow) var(--ease),transform var(--motion-slow) var(--ease),border-color var(--motion-base) var(--ease);
}
.descent-beat.is-current .descent-card{ border-color:rgba(139,124,246,.38); box-shadow:none; }
.descent-index,.descent-signal,.descent-tags span{ letter-spacing:.02em; text-transform:none; }
.descent-tags span{ border-radius:var(--radius-sm); background:var(--control); }

.band{
  padding:clamp(82px,11vh,142px) 0; background:var(--raised);
  content-visibility:auto; contain-intrinsic-size:auto 980px;
}
.band:nth-of-type(even){ background:var(--bg); }
.band.solid,.tcad-band,.changelog-band{ background:var(--raised); }
.console-band,.preview-band,#capabilities,#validation,.launch{ border-top:1px solid var(--line); }
.band.secondary-intro{ padding-bottom:28px; background:var(--bg); }
.band.secondary-band{ background:rgba(11,14,23,.72); border-top:1px solid var(--line); }
.sec-head h2{ letter-spacing:-.035em; }
.sec-head::after{ width:72px; background:var(--primary); box-shadow:none; transition:transform var(--motion-slow) var(--ease); }

.js-ready .reveal,.js-ready [data-wipe],.js-ready [data-rise],.js-ready [data-stagger] > *{
  opacity:1; transform:none;
}
body.reveal-observer-ready .reveal:not(.is-visible),
body.reveal-observer-ready [data-wipe]:not(.is-visible),
body.reveal-observer-ready [data-rise]:not(.is-visible),
body.reveal-observer-ready [data-stagger] > :not(.is-visible){
  opacity:0; transform:translateY(10px);
}
body.reveal-observer-ready .reveal.is-visible,
body.reveal-observer-ready [data-wipe].is-visible,
body.reveal-observer-ready [data-rise].is-visible,
body.reveal-observer-ready [data-stagger] > .is-visible{
  opacity:1; transform:none;
  transition:opacity var(--motion-slow) var(--ease),transform var(--motion-slow) var(--ease);
}
/* Keyboard focus is an interaction too: never leave a tabbable card transparent
   while its one-shot viewport reveal is waiting for IntersectionObserver. */
body.reveal-observer-ready .reveal:not(.is-visible):focus,
body.reveal-observer-ready .reveal:not(.is-visible):focus-within,
body.reveal-observer-ready [data-wipe]:not(.is-visible):focus,
body.reveal-observer-ready [data-wipe]:not(.is-visible):focus-within,
body.reveal-observer-ready [data-rise]:not(.is-visible):focus,
body.reveal-observer-ready [data-rise]:not(.is-visible):focus-within,
body.reveal-observer-ready [data-stagger] > :not(.is-visible):focus,
body.reveal-observer-ready [data-stagger] > :not(.is-visible):focus-within{
  opacity:1; transform:none;
}

.diverge-stage,.cap-card,.val-board,.val-stat,.step,.orbit-console,.app-preview,
.recipe-card,.mode-card,.frontier-card,.ledger,.tcad-card,.changelog-card,.validation-cta,.error-shell{
  border-color:var(--line-2); border-radius:var(--radius-lg); background:var(--panel);
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.cap-card,.step,.mode-card,.frontier-card,.recipe-card{
  transition:transform var(--motion-fast) var(--ease),border-color var(--motion-base) var(--ease),background var(--motion-base) var(--ease);
}
.cap-card:hover,.step:hover,.mode-card:hover,.frontier-card:hover,.recipe-card:hover{
  transform:translateY(-1px); border-color:rgba(139,124,246,.38); background:var(--elevated); box-shadow:none;
}
.mode-card.featured{ border-color:rgba(139,124,246,.4); background:var(--elevated); box-shadow:none; }
.cap-card .glyph{ border-color:var(--line); border-radius:var(--radius-md); background:var(--control); }
.cap-card .tag,.mode-tag,.evidence-status{ border-radius:var(--radius-sm); }
.mode-tag{
  border-color:var(--line-2); background:var(--control); color:var(--primary);
  letter-spacing:.02em; text-transform:none;
}
.val-board .vb-head,.ledger .vb-head,.val-table th,.console-readout span,.orbit-control-meta,
.orbit-console figcaption,.app-preview figcaption,.evidence-status,.tcad-card > span,.changelog-card > span{
  letter-spacing:.02em; text-transform:none;
}
.val-table tbody tr:hover,.ledger-row:hover{ background:var(--hover); }
.val-bar{ background:var(--primary); box-shadow:none; }

.console-readout,.orbit-controls{
  border-color:var(--line); border-radius:var(--radius-md); background:var(--control); box-shadow:none;
}
.console-readout:nth-child(1) strong{ color:var(--cyan); }
.console-readout:nth-child(2) strong{ color:var(--warn); }
.console-readout:nth-child(3) strong{ color:var(--ok); }
.console-readout:nth-child(4) strong{ color:var(--primary); }
.orbit-reset{ border-color:var(--line-2); border-radius:var(--radius-sm); background:var(--control); }
.orbit-reset:hover{ border-color:rgba(139,124,246,.44); background:var(--hover); }
.orbit-console{ padding:10px; background:var(--panel); }
.orbit-console::before{ border-color:var(--line); background:none; mix-blend-mode:normal; }
.orbit-static-fallback{ background:var(--raised); }
.orbit-static-fallback > span{ color:var(--cyan); text-shadow:none; }

.app-preview figcaption a,.footer .meta a:hover,.val-table .drift{ color:var(--primary); }
.recipe-card span{ color:var(--primary); letter-spacing:.02em; text-transform:none; }
.ledger-row .k{ color:var(--primary); letter-spacing:.02em; text-transform:none; }
.validation-cta{ background:var(--elevated); }
.changelog-card{ border-top-color:var(--line-2); }
.changelog-card[data-ready="true"]{ border-color:rgba(139,124,246,.32); }

.launch{ padding:clamp(96px,14vh,168px) 0; background:var(--bg); }
.launch::before{ background:radial-gradient(560px 260px at 50% 42%,rgba(139,124,246,.07),transparent 72%); }
.launch::after{ width:72px; background:var(--primary); box-shadow:none; }
.footer::before{ background:var(--primary); opacity:.7; }
.scroll-progress{ height:1px; background:var(--primary); box-shadow:none; }

@media (max-width:760px){
  .hero-static-art{
    background:
      linear-gradient(180deg,rgba(7,9,16,.66),rgba(7,9,16,.34) 36%,rgba(7,9,16,.92) 92%),
      url("hero-fallback-960.webp") 70% center/cover no-repeat;
  }
}
@media (max-width:560px){
  .wrap{ width:min(100% - 28px,var(--maxw)); }
  .hero-copy .display{ font-size:clamp(40px,14vw,56px); }
  .descent-card{ border-radius:var(--radius-lg); background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (prefers-reduced-data:reduce){
  .page-bg{ background:var(--bg); }
  .hero-static-art{ transition:none; }
}
@media (prefers-reduced-motion:reduce){
  body.reveal-observer-ready .reveal,
  body.reveal-observer-ready [data-wipe],
  body.reveal-observer-ready [data-rise],
  body.reveal-observer-ready [data-stagger] > *{
    opacity:1; transform:none; transition:none;
  }
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .hero-grid{ display:block; position:relative; }
  .hero-copy{ max-width:min(650px,82vw); }
  .hero-stage{ position:absolute; inset:-8vh -4vw -8vh 30%; z-index:-1; min-height:0; }
  .hero-stage-status{ right:0; bottom:10%; }
  .console-grid{ grid-template-columns:1fr; }
  .preview-grid{ grid-template-columns:1fr; }
  .science-grid{ grid-template-columns:1fr; gap:34px; }
  .cap-grid{ grid-template-columns:repeat(2,1fr); }
  .mode-grid{ grid-template-columns:1fr; }
  .frontier-grid{ grid-template-columns:repeat(2,1fr); }
  .tcad-cards,.changelog-grid{ grid-template-columns:1fr; }
  .validation-cta{ align-items:flex-start; flex-direction:column; }
  .validation-actions{ justify-content:flex-start; }
  .steps{ grid-template-columns:1fr; }
  .step .line{ display:none; }
  .valid-grid{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
}
@media (max-width:560px){
  .nav{
    padding-top:calc(12px + var(--safe-top));
    padding-right:max(12px,var(--safe-right));
    padding-bottom:12px;
    padding-left:max(12px,var(--safe-left));
    gap:10px;
  }
  .brand{ min-width:0; gap:8px; }
  .brand .name{ font-size:12px; letter-spacing:.1em; }
  .nav-cta{ flex:none; margin-left:auto; }
  .nav-launch{ width:78px; max-width:78px; min-height:44px; padding:10px 9px; gap:0; }
  .nav-launch .cta-full,.nav-launch .arrow{ display:none; }
  .nav-launch .cta-short{ display:inline; }
  .nav-cta{ gap:8px; }
  .lang-toggle{ padding:9px 10px; font-size:11px; letter-spacing:.04em; min-height:44px; }
  .nav-menu summary{ min-width:44px; min-height:44px; }
  .cap-grid{ grid-template-columns:1fr; }
  .frontier-grid{ grid-template-columns:1fr; }
  .hero{ min-height:100svh; padding-top:82px; padding-bottom:18px; }
  .hero-grid{ min-height:0; }
  .hero-copy{ max-width:100%; }
  .hero-copy .display{ font-size:clamp(43px,15vw,58px); line-height:.97; letter-spacing:-.045em; margin:15px 0 18px; }
  .hero-copy .lede{ max-width:32ch; font-size:15px; line-height:1.55; }
  .product-statement{ max-width:34ch; font-size:12.5px; }
  .hero-stage{ inset:18% -42% -12% -22%; opacity:.72; }
  .hero-stage-status,.hero-stage-axis{ display:none; }
  .hero-trust-line{ max-width:31ch; gap:6px; font-size:11.5px; line-height:1.5; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-copy::before{
    inset:-96px -14px -18px;
    background:linear-gradient(180deg,transparent,rgba(5,6,15,.9) 92px,rgba(5,6,15,.74) 72%,rgba(5,6,15,.28));
    filter:none;
  }
  .lede{
    color:#d4e2f5;
    text-shadow:0 1px 16px rgba(0,0,0,.95), 0 0 26px rgba(5,6,15,.75);
  }
  .btn{ justify-content:center; }
  .hero-foot{ display:none; }
  .hero-motion-control{ right:max(10px,var(--safe-right)); bottom:max(10px,var(--safe-bottom)); }
  .hero-motion-control button{ min-width:44px; min-height:44px; padding:10px; }
  .hero-motion-control [data-hero-toggle-label]{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .page-grain{ display:none; }
  .brand .by{ display:none; }
  .recipe-card{ grid-template-columns:1fr; }
  .recipe-card span{ grid-row:auto; }
  .console-readouts{ grid-template-columns:1fr; }
  .experiment-recipe{ grid-template-columns:1fr; }
  .orbit-unit-row{ grid-template-columns:1fr auto; }
  .orbit-unit-row small{ grid-column:1/-1; }
  .orbit-input-row{ grid-template-columns:minmax(0,1fr) minmax(96px,.46fr) auto; }
  .orbit-button-row{ flex-direction:row; }
  .exact-state p{ grid-template-columns:1fr; gap:4px; }
  .secondary-band::before{ display:none; }
  .console-actions{ flex-direction:column; align-items:stretch; }
  .console-copy h2{ font-size:32px; }
  .orbit-console{ padding:8px; }
  .orbit-console::before{ inset:8px; }
  .app-preview figcaption{ align-items:flex-start; flex-direction:column; }
  .launch-actions{ flex-direction:column; align-items:stretch; }
  .ledger-row{ grid-template-columns:1fr; gap:4px; }
}

@media (max-width:980px){
  .orbit-descent-meter{ left:18px; }
  .descent-card{ width:min(500px,62vw); }
}

@media (max-width:560px){
  .orbit-descent::before{ background-size:48px 48px; opacity:.06; }
  .orbit-descent-meter{ left:12px; top:39%; }
  .orbit-descent-meter>span{ display:none; }
  .orbit-descent-meter>b{ min-height:108px; font-size:8px; }
  .orbit-descent-meter>em{ height:128px; grid-row:1; }
  .orbit-descent-coordinates{ right:14px; top:92px; bottom:auto; }
  .descent-beat{
    width:min(100% - 28px,var(--maxw)); min-height:92vh; min-height:92svh;
    align-items:flex-end; padding:110px 0 28px;
  }
  .descent-card{
    width:100%; padding:20px; border-radius:17px;
    background:
      linear-gradient(155deg,rgba(4,8,18,.93),rgba(3,5,13,.86)) padding-box,
      linear-gradient(145deg,rgba(48,222,255,.28),rgba(255,255,255,.04) 44%,rgba(143,91,255,.25)) border-box;
    backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px);
  }
  .descent-card h2{ font-size:38px; }
  .descent-card h3{ font-size:30px; }
  .descent-card p{ font-size:14px; line-height:1.62; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .orbit-descent-sticky{ display:none; }
  .orbit-descent-track{ margin-top:0; display:grid; gap:18px; padding:72px 0; }
  .descent-beat,.descent-beat-right{ min-height:0; padding:0; justify-content:center; }
  .descent-card{ width:min(680px,100%); opacity:1; transform:none; }
}

@media (prefers-contrast:more){
  :root{ --text:#c5d3e6; --muted:#a8b7cd; --line:rgba(196,218,247,.25); --line-2:rgba(210,229,255,.48); }
  .btn,.lang-toggle,.descent-card,.cap-card,.mode-card,.frontier-card,.orbit-console{ border-color:rgba(226,239,255,.48); }
  .hero-stage-status,.descent-index,.science-footnote{ color:#d7e7fa; }
}

@media (pointer:coarse){
  .btn,.lang-toggle,.orbit-reset,.recipe-card,.nav-menu-panel a{ min-height:44px; }
}

@media print{
  :root{ color-scheme:light; --bg:#fff; --ink:#07111f; --text:#24364c; --muted:#53657a; --line:#cad3df; }
  html{ scroll-behavior:auto; }
  body{ background:#fff; color:var(--text); font-size:11pt; }
  .page-bg,.page-grain,.hero-static-art,#hero-canvas,.hero-scrim,.scroll-progress,
  .hero-motion-control,.nav,.signal-strip,.orbit-descent-sticky{ display:none!important; }
  .hero{ min-height:0; padding:24px 0; }
  .hero-grid,.console-grid,.preview-grid,.science-grid,.valid-grid{ display:block; }
  .hero-stage{ display:none; }
  .hero-copy::before{ display:none; }
  .display .grad,.display .dissolve{ color:var(--ink); -webkit-text-fill-color:var(--ink); text-shadow:none; }
  .band{ padding:28px 0; content-visibility:visible; contain:none; break-inside:auto; }
  .orbit-descent-track{ margin-top:0; display:grid; gap:12px; }
  .descent-beat{ min-height:0; width:100%; padding:0; }
  .descent-card,.cap-card,.mode-card,.frontier-card,.val-board,.ledger,.step,.tcad-card,.changelog-card{
    width:100%; color:var(--text); background:#fff; border:1px solid #c8d2df; box-shadow:none; break-inside:avoid;
  }
  a{ color:#075a79; text-decoration:underline; }
  .footer{ border-top:1px solid #aeb9c7; }
}

@media (forced-colors:active){
  .nav, .btn, .cap-card, .mode-card, .frontier-card, .val-board, .ledger, .recipe-card,
  .step, .tcad-card, .changelog-card, .val-stat, .diverge-stage, .orbit-console,.descent-card{
    border:1px solid CanvasText;
  }
  .grad, .dissolve{ color:CanvasText; -webkit-text-fill-color:CanvasText; }
   .page-grain{ display:none; }
  :focus-visible{ outline:3px solid Highlight; outline-offset:3px; }
}

@media (max-width:320px){
  .nav{
    padding-right:max(8px,var(--safe-right));
    padding-left:max(8px,var(--safe-left));
    gap:6px;
  }
  .brand{ gap:0; }
  .brand > span:last-child{ display:none; }
  .brand .mark,.brand .mark svg{ width:28px; height:28px; }
  .nav-cta{ gap:4px; }
  .lang-toggle{ min-height:40px; padding:8px 7px; font-size:10px; }
  .nav-launch{ width:56px; max-width:56px; min-height:40px; padding:8px 7px; }
  .nav-menu summary{ width:40px; min-width:40px; height:40px; min-height:40px; }
}