/* AI Portal · "Helix", light
   The helix is a fixed WebGL canvas (js/scene.js); everything here is the HTML
   laid over it. Light palette: a warm cream page, deep teal #0f6f73 for structure
   and light, burnt orange #d9622b for action; the dark theme is the original Helix.
   Colour still means something: orange acts, green is live. */

:root {
  --abyss: #faf6ee;
  --deep: #ffffff;
  --navy: #ffffff;
  --lift: #2a2419;
  --fg: #2a2419;
  --fg2: #5a5244;
  --fg3: #857a68;
  --orange: #d9622b;
  --ember: linear-gradient(90deg, #c9541f 0%, #e98a4a 100%);
  --rule: linear-gradient(90deg, #a3451d 0%, #d9622b 100%);
  --teal: #0f6f73;
  --live: #1f7a3f;
  --slate: #b1a797;
  --line: rgba(42, 36, 25, .1);
  --line2: rgba(42, 36, 25, .18);
  --glass: rgba(255, 255, 255, .72);
  --sans: "Lato", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --head: "Open Sans", "Segoe UI", Inter, system-ui, Arial, sans-serif;
  --mono: "Cascadia Code", Consolas, "Courier New", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gut: clamp(18px, 3.4vw, 60px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html.locked, html.locked body { overflow: hidden; }
body { font-family: var(--sans); color: var(--fg); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: radial-gradient(120% 90% at 66% 46%, #fffdf8 0%, #f7f1e6 42%, #ece2d0 100%) fixed, var(--abyss); }
h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3, .i-name, .sc-cap, .outro h2, .nav-mark b { font-family: var(--head); }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font-family: inherit; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 5px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }
/* the corners darkened, so the overlays read against any screen behind them */
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 95% at 62% 50%, transparent 55%, rgba(247, 241, 230, .7) 100%),
              linear-gradient(90deg, rgba(247, 241, 230, .92) 0%, rgba(247, 241, 230, .7) 26%, rgba(247, 241, 230, .25) 40%, transparent 52%); }
#track { position: relative; z-index: -1; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; position: relative; display: inline-block; }
.dot.off { background: var(--slate); }
.dot:not(.off)::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--live); opacity: .5; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.7); opacity: .7; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

/* ── nav ──────────────────────────────────────────────────────────────────── */
.nav { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 80px; display: flex; align-items: center; gap: 30px;
  padding: 0 var(--gut); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav-mark { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.nav-mark img { height: 46px; display: block; }
.nav-mark .logo-dark { display: none; }
:root[data-theme="dark"] .nav-mark .logo-light { display: none; }
:root[data-theme="dark"] .nav-mark .logo-dark { display: block; }
.nav-mark b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.nav-links { margin-left: auto; display: flex; gap: 34px; }
.nav-links a { text-decoration: none; font-family: var(--mono); font-size: 14.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); opacity: .85; transition: opacity .2s linear, color .2s linear; }
.nav-links a:hover { opacity: 1; color: var(--orange); }
.nav-live .dot { width: 10px; height: 10px; }
.nav-concept { color: var(--fg3); font-size: 10.5px; white-space: nowrap; }
.theme-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: var(--glass); color: var(--fg); cursor: pointer;
  display: grid; place-items: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s var(--ease), color .3s var(--ease); }
.theme-btn:hover { background: var(--fg); color: var(--deep); }
.theme-btn .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: block; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: none; }
.nav-live { display: inline-flex; align-items: center; gap: 11px; height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; font-size: 14px; font-weight: 600; }

/* ── buttons and pills ────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--line2); background: rgba(255, 255, 255, .7); color: var(--fg); text-decoration: none; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.btn:hover { background: var(--fg); color: var(--deep); border-color: var(--fg); }
.btn.solid { background: var(--ember); border-color: transparent; color: #fff; box-shadow: 0 10px 30px rgba(217, 98, 43, .3); }
.btn.solid:hover { background: var(--fg); color: #fff; }
.btn.sm { height: 36px; padding: 0 15px; font-size: 10px; }
.btn.icon { width: 46px; padding: 0; justify-content: center; }
.btn[aria-disabled="true"] { background: rgba(42, 36, 25, .05); border-color: var(--line2); color: var(--fg3); box-shadow: none; pointer-events: none; }
.linkbtn { background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.linkbtn:hover, .outro-f a:hover { color: var(--fg); }

.pill { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: rgba(21, 128, 61, .12); color: var(--live); }
.pill.off { background: rgba(42, 36, 25, .08); color: var(--fg2); }
.pill.wait { background: rgba(42, 36, 25, .06); color: var(--fg3); }

.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; color: var(--fg2); }
.eyebrow .sep { opacity: .4; }

/* ── intro ────────────────────────────────────────────────────────────────── */
.intro { position: fixed; z-index: 10; left: var(--gut); bottom: clamp(20px, 3.4vh, 44px); width: min(560px, 40vw);
  display: grid; gap: clamp(8px, 1.3vh, 14px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.intro h1 { font-size: clamp(40px, 4.4vw, 80px); line-height: .92; font-weight: 700; letter-spacing: -.035em;
  text-shadow: 0 10px 50px rgba(255, 255, 255, .9); }
.intro h1 em { font-style: normal; color: var(--orange); display: block; }
.intro-line { font-size: clamp(15px, 1.2vw, 20px); line-height: 1.3; font-weight: 500; max-width: 30ch; color: var(--fg); }
.intro-line em { font-style: normal; color: var(--orange); }
.intro-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cue { display: flex; align-items: center; gap: 10px; color: var(--fg3); }
.cue i { width: 1px; height: 34px; background: linear-gradient(var(--orange), transparent); animation: cue 2s var(--ease) infinite; transform-origin: 50% 0; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
body:not(.at-intro) .intro { opacity: 0; transform: translateY(-30px); pointer-events: none; }

/* the caption for the coverflow's front card, opposite the title */
.showcase { position: fixed; z-index: 10; right: var(--gut); bottom: clamp(20px, 3.4vh, 44px); width: min(460px, 36vw);
  display: grid; gap: 8px; justify-items: end; text-align: right; transition: opacity .6s var(--ease), transform .8s var(--ease); }
/* the front card's name, just under its lower edge (--foot is set by the scene) */
.sc-cap { position: fixed; z-index: 10; left: 0; right: 0; top: calc(var(--foot, .6) * 100vh + clamp(12px, 2vh, 24px));
  margin: 0 auto; width: min(620px, 42vw); text-align: center; pointer-events: none;
  font-size: clamp(22px, 1.9vw, 34px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; text-wrap: balance;
  text-shadow: 0 6px 30px rgba(255, 255, 255, .9); transition: opacity .6s var(--ease); }
.sc-cap span { display: inline-block; }
body:not(.at-intro) .sc-cap { opacity: 0; }
body.flat .sc-cap { display: none; }
.sc-row { display: flex; align-items: center; gap: 16px; }
.sc-dots { display: flex; gap: 7px; }
.sc-dot { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 1px solid var(--fg3); background: transparent; cursor: pointer;
  transition: width .35s var(--ease), background .3s linear, border-color .3s linear; }
.sc-dot:hover { border-color: var(--fg); }
.sc-dot.on { width: 22px; background: var(--fg); border-color: var(--fg); }
body:not(.at-intro) .showcase { opacity: 0; transform: translateY(-30px); pointer-events: none; }
body.flat .showcase { display: none; }

/* ── the system at the front ──────────────────────────────────────────────── */
.info { position: fixed; z-index: 10; left: var(--gut); top: 50%; transform: translateY(-46%);
  width: min(520px, 36vw); max-height: calc(100vh - 120px); overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .35s linear, visibility 0s linear .35s; }
.info.on { opacity: 1; visibility: visible; transition: opacity .35s linear; }
.i-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; color: var(--fg2); }
.i-n { color: var(--orange); font-size: 13px; }
.i-of { color: var(--fg3); }
.i-sep { width: 22px; height: 1px; background: var(--line2); }
.i-pill { margin-left: auto; }
.i-name { margin-top: 14px; font-size: clamp(30px, 3.3vw, 56px); line-height: .98; font-weight: 700; letter-spacing: -.028em; text-wrap: balance; }
.i-tag { margin-top: 10px; font-size: clamp(15px, 1.2vw, 19px); font-weight: 600; color: var(--orange); }
.i-sum { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--fg2); max-width: 46ch; }
.i-points { margin-top: 16px; display: grid; gap: 8px; }
.i-points li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--fg2); }
.i-points li::before { content: ""; position: absolute; left: 0; top: .66em; width: 10px; height: 2px; border-radius: 1px; background: var(--orange); }
/* a fixed three-up grid: a wrapping row pushes the Launch button off short screens */
.i-metrics { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.i-metric b { display: block; font-size: clamp(22px, 2vw, 34px); line-height: 1; font-weight: 700; letter-spacing: -.024em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.i-metric b.long { font-size: clamp(16px, 1.3vw, 23px); }
.i-metric b small { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 400; color: var(--orange); margin-left: 6px; }
.i-metric span { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: var(--fg3); max-width: 19ch; }
.i-live { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.lv { display: grid; gap: 5px; }
.lv b { font-size: 18px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.lv b small { font-size: .56em; font-weight: 600; color: var(--fg2); margin-left: 3px; }
.lv > span:last-child { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); }
.beat { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.beat b { flex: 0 0 3px; width: 3px; border-radius: 1.5px; background: rgba(42, 36, 25, .13); height: 100%; }
.beat b.up { background: var(--live); }
.beat b.dn { background: var(--slate); height: 40%; }
.i-act { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.i-stack { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 9.5px; color: var(--fg3); }
.i-stack > span { opacity: .8; margin-right: 2px; }
.i-stack b { font-weight: 400; color: var(--fg2); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .6); }

/* the chapter number, set huge and hollow behind the panel */
.bignum { position: fixed; z-index: 2; left: calc(var(--gut) - .06em); top: 50%; transform: translateY(-58%);
  font-size: clamp(160px, 24vw, 420px); line-height: .8; letter-spacing: -.06em; font-weight: 700;
  color: transparent; -webkit-text-stroke: 1px rgba(217, 98, 43, .3); pointer-events: none; user-select: none;
  opacity: 0; transition: opacity .4s linear; }
.bignum.on { opacity: 1; }

/* ── the rail of stops ────────────────────────────────────────────────────── */
.rail { position: fixed; z-index: 20; right: var(--gut); top: 50%; transform: translateY(-50%); display: flex; gap: 0; transition: opacity .5s linear; }
.rail-line { position: absolute; right: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--line2); }
.rail-line i { position: absolute; inset: 0; background: linear-gradient(var(--orange), var(--teal)); transform-origin: 50% 0; transform: scaleY(0); }
#rail { display: grid; gap: clamp(14px, 3.4vh, 34px); }
.stop { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 14px; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--fg3); }
.stop i { order: 2; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--fg3); background: var(--deep); transition: all .3s var(--ease); flex: none; }
.stop span { font-size: 12px; white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .3s linear, transform .4s var(--ease); }
.stop.up i { border-color: var(--live); }
.stop.dn i { border-color: var(--slate); }
/* names appear on hover only: the panel already names the system at the front,
   and a standing label would sit over its screen */
.stop:hover span, .stop:focus-visible span { opacity: 1; transform: none; }
.stop.on { color: var(--fg); }
.stop.on i { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 4px rgba(217, 98, 43, .2), 0 0 18px rgba(217, 98, 43, .5); transform: scale(1.15); }
body.at-intro .rail, body.at-outro .rail { opacity: 0; pointer-events: none; }
/* the panel and its number belong to the systems only: never over the intro
   title or the launch grid, whatever state a running animation is in */
body.at-intro .info, body.at-outro .info, body.at-intro .bignum, body.at-outro .bignum {
  opacity: 0 !important; visibility: hidden !important; transition: opacity .2s linear, visibility 0s linear .2s; }

/* ── the launch grid ──────────────────────────────────────────────────────── */
/* the heading sits under the top bar and the grid follows; when nine tiles do not fit, the page scrolls here */
.outro { position: fixed; z-index: 15; inset: 0; padding: 96px var(--gut) 40px; display: flex; flex-direction: column; justify-content: flex-start;
  gap: clamp(14px, 2.4vh, 26px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(30px);
  transition: opacity .5s linear, transform .7s var(--ease), visibility 0s linear .5s; }
body.at-outro .outro { opacity: 1; visibility: visible; transform: none; transition: opacity .5s linear, transform .7s var(--ease); }
.outro h2 { margin-top: 8px; font-size: clamp(26px, 2.8vw, 44px); line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); max-width: 1320px; flex: none; }
.tile { display: grid; grid-template-columns: 38% minmax(0, 1fr); border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--line2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), border-color .3s linear, box-shadow .35s var(--ease); }
.tile:hover { transform: translateY(-4px); border-color: rgba(217, 98, 43, .6); box-shadow: 0 18px 50px rgba(42, 36, 25, .14), 0 0 40px rgba(217, 98, 43, .12); }
.tile-img { background: #ebe6f8; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; display: block; }
.tile-b { padding: 11px 13px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile-g { font-size: 9.5px; color: var(--fg3); }
.tile h3 { font-size: 14px; font-weight: 700; letter-spacing: -.012em; line-height: 1.2; }
.tile-t { font-size: 11.5px; color: var(--fg2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-f { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tile-f .tile-g { display: none; }
.tile-f .btn.sm { height: 32px; padding: 0 12px; font-size: 9.5px; }
.outro-f { display: flex; gap: 12px; color: var(--fg3); }
.outro-f a { text-decoration: none; }

/* ── lightbox, toast, notice ──────────────────────────────────────────────── */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(16px, 4vw, 60px);
  background: rgba(42, 36, 25, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
/* the player fits the viewport on both axes: width-bound on narrow screens, height-bound on wide ones */
.lightbox video { display: none; width: 100%; height: auto; max-width: min(1600px, 100%, calc((100dvh - 110px) * 1.78)); max-height: calc(100dvh - 110px); border-radius: 10px; background: #000; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 40px 100px rgba(0, 0, 0, .5); cursor: default; }
.lightbox.video img { display: none; }
.lightbox.video video { display: block; }
/* bounded by the viewport on both axes (a percentage height would resolve against the grid row, which grows with the image) */
.lightbox img { max-width: calc(100vw - 2 * clamp(16px, 4vw, 60px)); max-height: calc(100dvh - 2 * clamp(16px, 4vw, 60px)); width: auto; height: auto; object-fit: contain; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 40px 100px rgba(0, 0, 0, .5); }
.lb-x { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; display: grid; place-items: center; }
.toast { position: fixed; z-index: 110; right: var(--gut); bottom: 22px; max-width: min(420px, 90vw); padding: 12px 16px; border-radius: 12px;
  background: var(--lift); color: #fff; border: 1px solid var(--line2); text-transform: none; letter-spacing: .02em; font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .22s linear, transform .3s var(--ease); }
.toast.show { opacity: 1; transform: none; }
.notice { position: fixed; z-index: 120; left: 50%; top: 90px; transform: translateX(-50%); padding: 14px 18px; border-radius: 12px;
  background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; font-size: 13px; }

/* ── flat: no WebGL, or reduced motion ────────────────────────────────────── */
#flat { display: none; }
body.flat .nav { pointer-events: auto; background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.flat #gl, body.flat .vignette, body.flat .rail, body.flat .bignum, body.flat #info, body.flat .cue { display: none; }
body.flat #flat { display: grid; gap: 56px; padding: 0 var(--gut) 60px; position: relative; z-index: 5; }
body.flat .intro { position: relative; left: auto; bottom: auto; width: auto; padding: 120px var(--gut) 50px; opacity: 1; transform: none; }
body.flat .outro { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; padding: 0 var(--gut) 60px; }
.flat-sys { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 40px; border-top: 1px solid var(--line); }
.flat-media { display: grid; gap: 14px; }
.flat-media img { width: 100%; border-radius: 12px; border: 1px solid var(--line2); cursor: zoom-in; display: block; }
.flat-info { position: static; transform: none; width: auto; max-height: none; opacity: 1; visibility: visible; }

/* ── narrow screens: the helix on top, the panel below it ─────────────────── */
@media (max-height: 820px) and (min-width: 901px) {
  .info { top: 54%; }
  .i-name { margin-top: 10px; font-size: clamp(28px, 3vw, 46px); }
  .i-sum { display: none; }
  .i-points { margin-top: 12px; gap: 6px; }
  .i-points li { font-size: 12.5px; line-height: 1.45; }
  .i-metrics, .i-live, .i-act { margin-top: 14px; }
  .i-metrics { padding-top: 12px; }
  .i-live { padding-top: 12px; }
  .i-stack { display: none; }
}
@media (max-width: 1180px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .nav-mark b, .nav-links { display: none; }
  .nav-live { margin-left: auto; }
  .nav-concept { display: none; }
  .vignette { background: linear-gradient(180deg, transparent 30%, rgba(247, 241, 230, .94) 56%); }
  .info { left: var(--gut); right: var(--gut); top: auto; bottom: 16px; transform: none; width: auto; max-height: 52vh; overflow-y: auto; }
  .i-points, .i-stack, .i-sum { display: none; }
  .i-name { font-size: clamp(26px, 7vw, 38px); margin-top: 8px; }
  .bignum { display: none; }
  .rail { right: 10px; top: 92px; transform: none; }
  .stop span { display: none; }
  #rail { gap: 12px; }
  .intro { width: auto; right: var(--gut); }
  .showcase { display: none; }
  .sc-cap { width: auto; padding: 0 var(--gut); font-size: clamp(20px, 5.6vw, 28px); }
  .grid { grid-template-columns: 1fr; grid-auto-rows: max-content; overflow: visible; max-height: none; }
  .tile { grid-template-columns: 40% minmax(0, 1fr); }
  .tile-img img { min-height: 96px; }
  .outro { justify-content: flex-start; }
  .flat-sys { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── the dark theme: the original Helix palette, exactly ──────────────────── */
:root[data-theme="dark"] {
  --abyss: #070b22;
  --deep: #0a1030;
  --navy: #141c4e;
  --lift: #1c2556;
  --fg: #f2f3f8;
  --fg2: #a9aecb;
  --fg3: #7a80a6;
  --orange: #ec6a11;
  --ember: linear-gradient(90deg, #e3151c 0%, #e06e0e 100%);
  --rule: linear-gradient(90deg, #a8440d 0%, #d9660f 100%);
  --teal: #45b8e4;
  --live: #1fbf6a;
  --slate: #767a91;
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .16);
  --glass: rgba(10, 16, 48, .55);
}
:root[data-theme="dark"] body { background: radial-gradient(120% 90% at 66% 46%, #16245e 0%, #0d1540 38%, #070b22 78%) fixed, var(--abyss); }
:root[data-theme="dark"] .vignette {
  background: radial-gradient(130% 95% at 62% 50%, transparent 52%, rgba(4, 6, 20, .72) 100%),
              linear-gradient(90deg, rgba(5, 8, 26, .86) 0%, rgba(5, 8, 26, .6) 26%, rgba(5, 8, 26, .2) 40%, transparent 52%); }
:root[data-theme="dark"] .btn { background: rgba(255, 255, 255, .04); }
:root[data-theme="dark"] .btn:hover { background: var(--fg); color: var(--deep); }
:root[data-theme="dark"] .btn.solid { background: var(--ember); color: #fff; box-shadow: 0 10px 30px rgba(227, 21, 28, .25); }
:root[data-theme="dark"] .btn.solid:hover { background: #fff; color: var(--deep); }
:root[data-theme="dark"] .btn[aria-disabled="true"] { background: rgba(255, 255, 255, .05); color: var(--fg3); }
:root[data-theme="dark"] .pill.ok { background: rgba(31, 191, 106, .15); }
:root[data-theme="dark"] .pill.off { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .pill.wait { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .intro h1 { text-shadow: 0 10px 60px rgba(5, 8, 26, .7); }
:root[data-theme="dark"] .sc-cap { text-shadow: 0 6px 34px rgba(5, 8, 26, .85); }
:root[data-theme="dark"] .beat b { background: rgba(255, 255, 255, .13); }
:root[data-theme="dark"] .beat b.up { background: var(--live); }
:root[data-theme="dark"] .beat b.dn { background: var(--slate); }
:root[data-theme="dark"] .i-stack b { background: rgba(255, 255, 255, .03); }
:root[data-theme="dark"] .bignum { -webkit-text-stroke: 1px rgba(236, 106, 17, .22); }
:root[data-theme="dark"] .stop.on i { box-shadow: 0 0 0 4px rgba(236, 106, 17, .2), 0 0 18px rgba(236, 106, 17, .6); }
:root[data-theme="dark"] .tile { background: rgba(10, 16, 48, .72); }
:root[data-theme="dark"] .tile:hover { border-color: rgba(236, 106, 17, .55); box-shadow: 0 18px 50px rgba(0, 0, 0, .4), 0 0 40px rgba(236, 106, 17, .14); }
:root[data-theme="dark"] .tile-img { background: #050817; }
:root[data-theme="dark"] .lightbox { background: rgba(4, 6, 20, .92); }
:root[data-theme="dark"] .toast { color: var(--fg); }
:root[data-theme="dark"] .notice { background: rgba(227, 21, 28, .14); border-color: rgba(227, 21, 28, .35); color: #f3b3b5; }
:root[data-theme="dark"] body.flat .nav { background: rgba(7, 11, 34, .88); }
:root[data-theme="dark"] .theme-btn:hover { background: var(--fg); color: var(--deep); }
@media (max-width: 900px) {
  :root[data-theme="dark"] .vignette { background: linear-gradient(180deg, transparent 30%, rgba(5, 8, 26, .9) 56%); }
}