/* Zero-UI Live — showcase styles. Palettes swap through [data-palette] custom properties. */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --glow { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 18px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right));
  --maxw: 1320px;
  /* Neon Tokyo (default) */
  --bg: #07070d; --bg-2: #0e0e19; --bg-3: #151526;
  --ink: #f3f4ff; --muted: #9a9cc0; --line: rgba(170, 180, 255, .14);
  --a1: #22e4ff; --a2: #ff2bd6; --a3: #b6ff3b;
  --hero-hue: 0deg;
  color-scheme: dark;
}
:root[data-palette="synthwave"] { --bg:#0b0614; --bg-2:#150b24; --bg-3:#1f1033; --ink:#fff1f8; --muted:#b9a3c9; --line:rgba(255,120,200,.16); --a1:#ff3d81; --a2:#ff9e3d; --a3:#8b5cf6; --hero-hue:140deg; }
:root[data-palette="matrix"]    { --bg:#030807; --bg-2:#07120f; --bg-3:#0c1c17; --ink:#e9fff4; --muted:#8db5a3; --line:rgba(80,255,170,.14); --a1:#39ff88; --a2:#00e5c0; --a3:#ffc857; --hero-hue:-55deg; }
:root[data-palette="aurora"]    { --bg:#050912; --bg-2:#0a1122; --bg-3:#111a33; --ink:#eef4ff; --muted:#93a3c6; --line:rgba(110,150,255,.16); --a1:#3d7bff; --a2:#2ff3c5; --a3:#b26bff; --hero-hue:30deg; }
:root[data-palette="solar"]     { --bg:#0a0806; --bg-2:#15100b; --bg-3:#201810; --ink:#fff6ec; --muted:#c3ad96; --line:rgba(255,170,90,.16); --a1:#ff5a1f; --a2:#ffd23f; --a3:#7ee8fa; --hero-hue:175deg; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans);
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
img, svg, canvas, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--a2); color: var(--bg); }
:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--a1); color: var(--bg); border-radius: 10px; font: 600 13px var(--mono); text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ambient layers */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-2%)} 80%{transform:translate(3%,4%)} 100%{transform:translate(0,0)} }
.spotlight { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), color-mix(in oklab, var(--a1) 10%, transparent), transparent 70%); }
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 80; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3)); }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* Navigation pill + ticker */
.nav { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 70; width: min(760px, calc(100% - 24px));
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: color-mix(in oklab, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); }
.nav__row { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 700 13px/1 var(--mono); letter-spacing: .08em; white-space: nowrap; }
.brand svg { width: 26px; height: 26px; }
.brand b { color: var(--a1); font-weight: 700; }
.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a { padding: 7px 10px; border-radius: 9px; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s, background .2s; }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, transparent); }
.swatch-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--muted); }
.swatch-btn:hover { color: var(--ink); border-color: color-mix(in oklab, var(--a1) 50%, transparent); }
.swatch-btn i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.swatch-btn i:nth-child(1) { background: var(--a1); } .swatch-btn i:nth-child(2) { background: var(--a2); margin-left: -9px; } .swatch-btn i:nth-child(3) { background: var(--a3); margin-left: -9px; }
.ticker { border-top: 1px solid var(--line); overflow: hidden; white-space: nowrap; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bg); background: var(--a1); }
.ticker__track { display: inline-flex; gap: 28px; padding: 5px 0; animation: marquee 28s linear infinite; }
.ticker__track span::before { content: "◆"; margin-right: 28px; color: var(--a2); filter: brightness(.6); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Shared layout */
main { position: relative; z-index: 2; }
.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
section { position: relative; }
.kicker { margin: 0 0 14px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--a1); display: flex; align-items: center; gap: 10px; }
.kicker::after { content: ""; flex: 0 0 48px; height: 1px; background: linear-gradient(90deg, var(--a1), transparent); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
h2 { font-size: clamp(34px, 5.4vw, 72px); }
h2 .em, h1 .em { background: linear-gradient(100deg, var(--a1), var(--a2) 55%, var(--a3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: var(--muted); font-size: clamp(16px, 1.35vw, 19px); max-width: 56ch; }
.section-head { display: grid; gap: 10px; margin-bottom: clamp(28px, 4vw, 52px); max-width: 900px; }
.section-head p:not(.kicker) { margin: 8px 0 0; color: var(--muted); max-width: 62ch; font-size: 17px; }

.btn { --b: var(--line); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 12px;
  border: 1px solid var(--b); background: transparent; text-decoration: none; cursor: pointer; font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--primary { color: var(--bg); background: var(--a1); border-color: transparent; box-shadow: 0 10px 40px -12px var(--a1), inset 0 -2px 0 rgba(0,0,0,.25); }
.btn--primary:hover { box-shadow: 0 14px 50px -10px var(--a1), 0 0 0 4px color-mix(in oklab, var(--a1) 25%, transparent); }
.btn--ghost:hover { border-color: color-mix(in oklab, var(--a2) 60%, transparent); color: var(--a2); }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* HERO */
.hero { min-height: 100svh; display: grid; align-items: center; padding: 140px 0 90px; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; filter: hue-rotate(var(--hero-hue)) saturate(1.15); transform: scale(1.06); animation: drift 22s ease-in-out infinite alternate; transition: filter .8s var(--ease); }
@keyframes drift { to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
.hero__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 86%, transparent) 34%, transparent 70%),
              linear-gradient(0deg, var(--bg) 0%, transparent 32%), linear-gradient(180deg, color-mix(in oklab, var(--bg) 70%, transparent), transparent 22%); }
.rings { position: absolute; z-index: -1; right: max(-180px, -10vw); top: 50%; width: min(920px, 92vw); aspect-ratio: 1; transform: translateY(-50%); opacity: .9; pointer-events: none;
  mask-image: radial-gradient(circle, #000 30%, transparent 72%); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%); }
.rings text { font: 600 15px var(--mono); letter-spacing: .32em; text-transform: uppercase; fill: var(--ink); }
.rings g { transform-origin: 400px 400px; transform-box: view-box; animation: spin var(--t, 60s) linear infinite; }
.rings g:nth-child(even) { animation-direction: reverse; }
.rings g:nth-child(1) text { fill: var(--a1); font-size: 22px; } .rings g:nth-child(2) text { opacity: .7; font-size: 18px; } .rings g:nth-child(3) text { fill: var(--a2); font-size: 15px; }
.rings g:nth-child(4) text { opacity: .45; font-size: 12px; } .rings g:nth-child(5) text { fill: var(--a3); font-size: 10px; opacity: .8; } .rings g:nth-child(6) text { opacity: .35; font-size: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__copy { position: relative; max-width: 760px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklab, var(--bg) 60%, transparent); backdrop-filter: blur(8px); font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a3); box-shadow: 0 0 0 0 var(--a3); animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--a3) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.hero__title { font-size: clamp(46px, 8.4vw, 124px); letter-spacing: -.045em; line-height: .94; }
/* Clip only during the rise-in; afterwards the glow can spill past the line box. */
.hero__title .line { display: block; padding-bottom: .06em; clip-path: inset(-1em -1em 0 -1em); animation: unclip 0s linear 1.6s forwards; }
@keyframes unclip { to { clip-path: none; } }
.hero__title .line > span { display: inline-block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; animation-delay: var(--d, .1s); }
@keyframes rise { to { transform: none; } }
.glitch { position: relative; display: inline-block; font-style: normal; color: var(--a1); text-shadow: 0 0 32px color-mix(in oklab, var(--a1) 60%, transparent); }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; text-shadow: none; background: none; }
.glitch::before { color: var(--a2); clip-path: inset(0 0 55% 0); animation: glitch-a 3.6s infinite steps(1); }
.glitch::after { color: var(--a3); clip-path: inset(55% 0 0 0); animation: glitch-b 3.6s infinite steps(1); }
@keyframes glitch-a { 0%, 86%, 100% { transform: none; } 88% { transform: translate(-4px, -2px); } 92% { transform: translate(3px, 1px); } }
@keyframes glitch-b { 0%, 86%, 100% { transform: none; } 89% { transform: translate(4px, 2px); } 93% { transform: translate(-3px, 0); } }
.hero .lede { margin: 28px 0 34px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; font: 500 12px/1.4 var(--mono); color: var(--muted); letter-spacing: .06em; }
.hero__meta b { display: block; color: var(--ink); font-size: 22px; letter-spacing: -.02em; font-family: var(--sans); }
.scroll-cue { position: absolute; left: var(--gutter); bottom: 28px; display: inline-flex; align-items: center; gap: 12px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.scroll-cue i { width: 22px; height: 34px; border: 1.5px solid var(--muted); border-radius: 12px; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--a1); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* BUILD BAY */
.bay { padding: clamp(80px, 10vw, 150px) 0 clamp(60px, 8vw, 120px); }
.bay::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent); opacity: .5; }
.bay__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: stretch; }
/* Monitor column: the result card lives under the monitor and is pinned to the bottom, so it lines up with the terminal's
   bottom and showing it never changes the page height (the terminal column is taller). */
.bay__stage { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.bay__stage .result { margin-top: 12px; }
.term { align-self: start; }

.monitor { margin: 0; position: relative; scroll-margin-top: 92px; }
.monitor__device { position: relative; isolation: isolate; }
.monitor__frame { width: 100%; height: auto; overflow: visible; }
.monitor__frame .bezel { fill: var(--bg-3); stroke: color-mix(in oklab, var(--ink) 16%, transparent); stroke-width: 1.5; }
.monitor__frame .bezel-inner { fill: #000; }
.monitor__frame .stand { fill: var(--bg-3); stroke: color-mix(in oklab, var(--ink) 12%, transparent); }
.monitor__frame .base-glow { fill: var(--a1); opacity: .35; filter: blur(18px); }
.monitor__frame .led { fill: var(--a3); }
.monitor[data-state="building"] .monitor__frame .led { animation: blink .5s steps(1) infinite; fill: var(--a2); }
@keyframes blink { 50% { opacity: .2; } }
/* Backlight: an LED strip behind the bezel. A rotating colour ring sits just inside the bezel outline and is blurred
   wide, so only its diffuse spill reaches past the edge, like light thrown on the wall behind the screen. (The tight
   rim layer that hugged the bezel was removed on 2026-11-07: it read as a lit border in front of the monitor.) */
.monitor__backlight { position: absolute; z-index: -1; pointer-events: none; left: 1.4%; top: 1.538%; width: 97.2%; height: 87.077%; border-radius: 2.47% / 4.24%; }
.monitor__backlight::before { content: ""; position: absolute; border-radius: inherit;
  background: conic-gradient(from var(--spin), var(--a1), var(--a2) 33%, var(--a3) 66%, var(--a1));
  animation: radar 10s linear infinite, backlight 3.8s ease-in-out infinite; }
.monitor__backlight::before { inset: 2.5% 2%; filter: blur(clamp(22px, 4.2vw, 64px)) saturate(1.25); }
@keyframes backlight { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .95; transform: scale(1.03); } }
.monitor[data-state="building"] .monitor__backlight::before { animation-duration: 2.6s, 1.3s; }
.monitor[data-state="done"] .monitor__backlight::before { animation-duration: 10s, 2.4s; }
.screen { position: absolute; left: 4%; top: 5.3846%; width: 92%; height: 79.2308%; overflow: hidden; border-radius: 6px; background: #020205; isolation: isolate; container-type: inline-size; }
.screen > * { position: absolute; inset: 0; }
.screen__scan { pointer-events: none; z-index: 6; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.screen__scan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--a1) 14%, transparent), transparent); height: 22%; animation: sweep 5s linear infinite; }
@keyframes sweep { from { transform: translateY(-120%); } to { transform: translateY(560%); } }
.screen__glare { pointer-events: none; z-index: 7; background: linear-gradient(115deg, rgba(255,255,255,.07), transparent 38%); }
/* Idle screen: a standby HUD drawn in one 1280×720 SVG (app.js builds and animates it), with the "Awaiting intent"
   note on top. It sits above the code view so it can fade out over the first streamed lines when a build starts. */
.screen > .screen__idle { z-index: 2; text-align: center; font: 500 clamp(10px, 1.5cqi, 14px)/1.5 var(--mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; background: #01030a; transition: opacity .42s ease, filter .42s ease; }
.screen > .screen__code { z-index: 1; }
.screen__idle.leaving { opacity: 0; filter: blur(2px) brightness(1.6); pointer-events: none; }
.screen__idle > * { position: absolute; inset: 0; }
.hx { width: 100%; height: 100%; display: block; }
.hx text, .hx tspan { font-family: var(--mono); fill: currentColor; letter-spacing: 0; text-transform: none; }
.hx text { color: var(--a1); }
.hx .bg { fill: #01030a; } .hx .gridline { fill: none; stroke: var(--a1); stroke-width: .5; opacity: .07; }
.hx .panel { fill: color-mix(in oklab, var(--a1) 4%, #000); stroke: var(--a1); stroke-width: .8; stroke-opacity: .42; }
.hx .head { fill: color-mix(in oklab, var(--a1) 13%, #000); }
.hx .lbl { font-size: 9px; opacity: .72; letter-spacing: .1em; }
.hx .track { fill: color-mix(in oklab, var(--a1) 12%, #000); }
.hx .f1 { fill: var(--a1); } .hx .f2 { fill: var(--a2); } .hx .f3 { fill: var(--a3); } .hx .fmix { fill: color-mix(in oklab, var(--a1) 55%, #fff); }
.hx .c2 { color: var(--a2); } .hx .c3 { color: var(--a3); } .hx .cdim { color: #6d7096; }
.hx .s1 { fill: none; stroke: var(--a1); } .hx .s2 { fill: none; stroke: var(--a2); }
.hx .stop1 { stop-color: var(--a1); } .hx .stop2 { stop-color: color-mix(in oklab, var(--a1) 55%, #fff); }
.hx .glow { filter: url(#hxGlow); }
.hx .core { fill: color-mix(in oklab, var(--a1) 10%, #000); stroke: var(--a1); stroke-width: 1.5; opacity: .85; }
.hx .code text { color: #c9cbe8; font-size: 10px; } .hx .code .ln { color: #6d7096; }
.hx .rain text { color: var(--a3); font-size: 13px; }
.hx .term text { font-size: 11px; opacity: .86; }
.hx .hex text { font-size: 9px; color: color-mix(in oklab, var(--a1) 75%, #fff); opacity: .8; }
.hx .sweep { transform-box: fill-box; transform-origin: center; animation: hx-spin 4s linear infinite; }
.hx .pulse { transform-box: fill-box; transform-origin: center; animation: hx-pulse 2s ease-out infinite; }
.hx .blink { animation: blink .8s steps(1) infinite; }
.hx .blinkf { animation: hx-blink .6s ease-in-out infinite; }
.hx .bin text { font-size: 7px; opacity: .55; }
.hx .plabel { font-size: 11px; letter-spacing: .2em; opacity: .85; }
.hx .ppct { font-size: 13px; font-weight: 700; }
.hx .pstat { font-size: 9px; letter-spacing: .14em; color: var(--a3); opacity: 0; transition: opacity .3s; }
.hx .pstat.on { opacity: 1; }
@keyframes hx-spin { to { transform: rotate(360deg); } }
@keyframes hx-pulse { 0% { transform: scale(.93); opacity: .6; } 100% { transform: scale(1.16); opacity: 0; } }
@keyframes hx-blink { 50% { opacity: .2; } }
@keyframes radar { to { --spin: 360deg; } }
/* Building but no code yet (live screening): the HUD runs hot. */
.monitor[data-state="building"] .hx .sweep { animation-duration: 1.4s; }
.hx__vig { pointer-events: none; background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.72) 100%); }
.hx__flick { pointer-events: none; background: color-mix(in oklab, var(--a1) 2%, transparent); animation: hx-flicker .15s steps(2) infinite; }
@keyframes hx-flicker { 0% { opacity: .8; } 50% { opacity: 1; } 100% { opacity: .85; } }
.hx__glitch { pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(transparent 27.6%, color-mix(in oklab, var(--a2) 45%, transparent) 27.6% 28.4%, transparent 28.4% 41.4%, color-mix(in oklab, var(--a1) 40%, transparent) 41.4% 41.8%, transparent 41.8% 62%, color-mix(in oklab, var(--a3) 30%, transparent) 62% 62.9%, transparent 62.9%),
    color-mix(in oklab, var(--a1) 6%, transparent); }
.hx__glitch.on { animation: hx-glitch .4s steps(1) forwards; }
.screen__idle.glitching .hx { animation: hx-split .4s steps(1) forwards; }
@keyframes hx-glitch { 0% { opacity: 0; } 10% { opacity: 1; transform: translateX(-4px); } 20% { opacity: .6; transform: translateX(3px); } 30% { opacity: 1; transform: translateX(-2px); } 40% { opacity: 0; } 50% { opacity: .8; transform: translateX(2px); } 60%, 100% { opacity: 0; transform: none; } }
@keyframes hx-split { 10% { transform: translateX(-3px); filter: drop-shadow(3px 0 0 color-mix(in oklab, var(--a2) 70%, transparent)) drop-shadow(-3px 0 0 color-mix(in oklab, var(--a1) 70%, transparent)); } 30% { transform: translateX(2px); } 40%, 100% { transform: none; filter: none; } }
.screen__idle > .idle__core { inset: 55% 0 auto 0; width: fit-content; max-width: 100%; margin: 0 auto; display: grid; gap: clamp(6px, 1.6cqi, 14px); justify-items: center;
  padding: clamp(6px, 1.4cqi, 12px) clamp(14px, 4cqi, 36px); text-shadow: 0 0 14px #000, 0 0 4px #000;
  background: radial-gradient(closest-side, rgba(1,3,10,.9), rgba(1,3,10,.7) 65%, transparent); }
.idle__sub { color: color-mix(in oklab, var(--ink) 72%, var(--a1)); }
.idle__title { color: var(--ink); font-size: clamp(13px, 2.4cqi, 22px); letter-spacing: .3em; }
/* Phone-sized screens: the note needs the room the progress bar uses, and a quieter backdrop to read against. */
@container (max-width: 460px) { .hx .prog { display: none; } .hx { opacity: .72; } .screen__idle > .idle__core { inset-block-start: 57%; } }
.caret { display: inline-block; width: .6em; height: 1.05em; vertical-align: -.15em; background: var(--a1); animation: blink 1s steps(1) infinite; margin-left: 3px; }

.screen__code { display: grid; grid-template-rows: auto 1fr; background: #04040a; font: 400 clamp(8.5px, 1.32cqi, 13px)/1.55 var(--mono); }
.code__bar { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: .92em; letter-spacing: .06em; }
.code__tab { color: var(--ink); padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.06); }
.code__status { margin-left: auto; color: var(--a3); }
.code__body { position: relative; overflow: hidden; }
/* Soft-wrapped like an editor with word wrap on: long minified lines continue under the code (hanging indent past the
   line numbers) instead of running off the right edge. Even 1.1em side margins inside the screen. */
.code__body pre { margin: 0; padding: 10px 1.1em clamp(36px, 7cqi, 46px) .5em; /* bottom room: the newest line stays above the progress label */ height: 100%; overflow: hidden; color: #cfd3ff; counter-reset: ln;
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.code__body pre .l { display: block; padding-left: 3.3em; position: relative; }
.code__body pre .l::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 2.4em; text-align: right; color: rgba(255,255,255,.22); }
.code__body pre .l.hot { background: color-mix(in oklab, var(--a1) 10%, transparent); }
.code__body pre .l.hot::after { content: ""; display: inline-block; width: .55em; height: 1.05em; vertical-align: -.18em; margin-left: 1px; background: var(--a3); box-shadow: 0 0 8px var(--a3); animation: blink .9s steps(1) infinite; }
/* Glitches while code streams (app.js adds the classes at random, never under reduced motion). */
.code__body pre .l.gl { animation: gl-line .24s steps(3) both; }
@keyframes gl-line {
  0% { transform: translateX(-3px); text-shadow: 2px 0 color-mix(in oklab, var(--a1) 85%, transparent), -2px 0 color-mix(in oklab, var(--a2) 85%, transparent); clip-path: inset(0 0 45% 0); }
  50% { transform: translateX(4px); text-shadow: -3px 0 color-mix(in oklab, var(--a1) 85%, transparent), 3px 0 color-mix(in oklab, var(--a2) 85%, transparent); clip-path: inset(40% 0 0 0); background: color-mix(in oklab, var(--a2) 12%, transparent); }
  100% { transform: none; text-shadow: none; clip-path: none; }
}
.code__body pre .l.scr { color: var(--a3); text-shadow: 0 0 6px color-mix(in oklab, var(--a3) 60%, transparent); }
.screen__code.tear .code__body { animation: gl-tear .16s steps(2) both; }
@keyframes gl-tear {
  0% { transform: translateX(6px) skewX(-2deg); filter: hue-rotate(40deg) contrast(1.3); clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%, 0 44%, 100% 44%, 100% 100%, 0 100%); }
  100% { transform: translateX(-4px); filter: hue-rotate(-30deg); clip-path: polygon(0 0, 100% 0, 100% 61%, 0 61%, 0 66%, 100% 66%, 100% 100%, 0 100%); }
}
.tk-tag { color: var(--a2); } .tk-attr { color: var(--a3); } .tk-str { color: var(--a1); } .tk-com { color: #8589ad; font-style: italic; } .tk-pun { color: #8a8fb8; } .tk-kw { color: #ffd479; }
/* Minimap retired: with only its border and scan box showing it read as a stray line (2026-11-06). */
.code__minimap { display: none !important; position: absolute; top: 10px; right: 10px; bottom: 10px; width: 48px; border-left: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.code__minimap i { display: block; height: 2px; margin: 0 0 2px 6px; border-radius: 1px; background: color-mix(in oklab, var(--a1) 45%, #333); }
.code__minimap::after { content: ""; position: absolute; left: 0; right: 0; height: 30px; background: color-mix(in oklab, var(--a1) 18%, transparent); top: var(--scan, 0%); transition: top .2s; }
.screen__preview { width: 100%; height: 100%; border: 0; background: #04040a; z-index: 3; }
.screen__dissolve { z-index: 5; width: 100%; height: 100%; pointer-events: none; }
.screen [hidden] { display: none !important; }
.screen__hud { z-index: 8; inset: auto 10px 10px auto; display: flex; gap: 6px; pointer-events: none; }
.screen__hud span { padding: 4px 7px; border-radius: 6px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); font: 600 clamp(8px, 1.1cqi, 11px)/1 var(--mono); letter-spacing: .1em; color: var(--a3); text-transform: uppercase; }
.monitor figcaption { margin-top: 10px; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font: 500 11.5px/1.4 var(--mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.monitor figcaption b { color: var(--ink); font-weight: 600; }

/* Terminal */
.term { position: relative; border-radius: var(--radius); background: color-mix(in oklab, var(--bg-2) 92%, transparent); isolation: isolate;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.9), 0 0 0 1px var(--line); font-family: var(--mono); }
.term::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--spin), transparent 0 60%, var(--a1) 75%, var(--a2) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: radar 6s linear infinite; opacity: .85; }
.term[data-state="building"]::before { animation-duration: 1.4s; }
.term__bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.term__lights { display: flex; gap: 7px; } .term__lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .term__lights i:nth-child(2) { background: #febc2e; } .term__lights i:nth-child(3) { background: #28c840; }
.term__title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; font-size: 12px; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.term__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.term__title .learn-tag { flex: none; }
.term__mode { margin-left: auto; padding: 4px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--bg); background: var(--a3); }
.term__mode[data-mode="live"] { background: var(--a1); }
.term__log { height: clamp(220px, 30vw, 330px); overflow-y: auto; padding: 14px 16px; font-size: 12.5px; line-height: 1.7; color: #c6c9ea; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.term__log p { margin: 0; white-space: pre-wrap; word-break: break-word; animation: fadeline .35s var(--ease) both; }
@keyframes fadeline { from { opacity: 0; transform: translateX(-6px); } }
.term__log .t { color: rgba(255,255,255,.32); margin-right: 8px; }
.term__log .ok { color: var(--a3); } .term__log .tool { color: var(--a1); } .term__log .warn { color: var(--a2); } .term__log .dim { color: var(--muted); }
.term__log a { color: var(--a1); }
.term__form { border-top: 1px solid var(--line); padding: 12px 14px 14px; display: grid; gap: 10px; }
.term__input { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.term__ps { color: var(--a2); font-weight: 700; padding-top: 2px; }
.term textarea { width: 100%; min-height: 78px; max-height: 45vh; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 14px/1.6 var(--mono); caret-color: var(--a1); }
.term textarea::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); }
.term__actions { display: flex; align-items: center; gap: 10px; }
.term__count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.term__count.near { color: var(--a2); }
.term__count.locked { color: var(--a3); animation: blink 1.6s steps(1) infinite; }
.term textarea:disabled { cursor: not-allowed; opacity: .6; }
.term.is-locked .term__input { background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in oklab, var(--ink) 3%, transparent) 10px 20px); border-radius: 10px; }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.term__log .log-open-line { margin: 6px 0 4px; }
.log-open { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: 100%; padding: 9px 13px; border-radius: 10px; text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--a3) 55%, transparent); background: color-mix(in oklab, var(--a3) 12%, transparent); color: var(--ink);
  box-shadow: 0 0 24px -10px var(--a3); transition: background .2s, box-shadow .2s; }
.log-open:hover { background: color-mix(in oklab, var(--a3) 22%, transparent); box-shadow: 0 0 30px -8px var(--a3); }
.log-open__label { font-weight: 700; color: var(--a3); letter-spacing: .04em; }
.log-open__url { color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
@media (pointer: coarse) { .log-open { min-height: 44px; } }
.term__actions .btn { margin-left: auto; min-height: 40px; padding: 0 16px; }
.verify-link { margin: 0 14px 12px; }
.verify-link[hidden] { display: none; }
/* Background human check: the frame runs collapsed and only opens when Cloudflare wants a click. */
.check-box { margin: 0 14px; height: 0; overflow: hidden; }
.check-box.is-open { height: auto; margin-bottom: 12px; }
.check-box__note { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.check-box__frame { display: block; width: 100%; max-width: 320px; height: 72px; border: 0; background: transparent; color-scheme: dark; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.chip { padding: 7px 10px; border-radius: 999px; border: 1px dashed color-mix(in oklab, var(--a1) 40%, transparent); background: transparent; color: var(--muted); font: 500 11.5px/1.2 var(--mono); cursor: pointer; text-align: left; transition: color .2s, border-color .2s, background .2s; }
.chip:hover { color: var(--ink); border-style: solid; background: color-mix(in oklab, var(--a1) 8%, transparent); }
.chip b { color: var(--a3); font-weight: 600; }

/* Two columns: badge and text, then the Learn strip and the actions on full-width rows. (With a third `auto` column the
   actions auto-placed under the badge and widened its column, leaving a gap before the text; fixed 2026-11-07.) */
.result { margin-top: 26px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; align-items: center; padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--a3) 45%, transparent); background: linear-gradient(100deg, color-mix(in oklab, var(--a3) 10%, var(--bg-2)), var(--bg-2)); animation: pop .6s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.result[hidden] { display: none; }
.result__badge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--a3); color: var(--bg); font: 800 20px var(--mono); }
.result__body { min-width: 0; }
.result__body p { margin: 0; font: 500 12px/1.4 var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.result__body a { display: block; margin-top: 4px; font: 600 clamp(14px, 1.6vw, 18px)/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.result__body a[hidden] { display: none; }
.result__body small { display: block; margin-top: 6px; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.result__actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

/* HOW — sphere + steps */
.how { padding: clamp(80px, 10vw, 150px) 0; background: linear-gradient(180deg, transparent, var(--bg-2) 18%, var(--bg-2) 82%, transparent); }
.how__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.sphere { position: sticky; top: 110px; aspect-ratio: 1; width: 100%; max-width: 560px; }
.sphere canvas { width: 100%; height: 100%; }
.sphere__label { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); max-width: 92%; text-align: center; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font: 600 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; width: max-content; line-height: 1.5; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.step { position: relative; padding: 22px 22px 22px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 55%, transparent); overflow: hidden; transition: border-color .4s, transform .4s var(--ease); }
.step:hover { border-color: color-mix(in oklab, var(--a1) 45%, transparent); transform: translateX(6px); }
.step::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--a1), var(--a2)); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.step.in::after { transform: scaleY(1); }
.step__n { font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--a1); }
.step h3 { margin: 12px 0 8px; font-size: clamp(22px, 2.2vw, 28px); }
.step p { margin: 0; color: var(--muted); }
.step code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; margin-top: 12px; padding: 4px 8px; border-radius: 6px; background: var(--bg-3); color: var(--a3); font: 500 12px/1.3 var(--mono); }

/* LEDGER */
.ledger { padding: clamp(80px, 10vw, 150px) 0; }
.ledger__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.bignum { font: 700 clamp(120px, 21vw, 300px)/.8 var(--sans); letter-spacing: -.07em; margin: 24px 0 18px; background: linear-gradient(180deg, var(--ink) 20%, color-mix(in oklab, var(--ink) 5%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bignum small { font-size: .32em; letter-spacing: -.02em; -webkit-text-fill-color: var(--a1); }
.receipt { position: relative; padding: 26px 26px 30px; background: var(--bg-2); border: 1px dashed color-mix(in oklab, var(--ink) 22%, transparent); border-radius: 6px; font: 500 13px/1.9 var(--mono); text-transform: uppercase; letter-spacing: .04em;
  --tear: radial-gradient(circle at 8px -2px, transparent 7px, var(--bg-2) 7.5px); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--tear); background-size: 16px 10px; }
.receipt h3 { font: 700 13px/1 var(--mono); letter-spacing: .14em; display: flex; justify-content: space-between; margin-bottom: 18px; color: var(--muted); }
.row { display: flex; gap: 8px; align-items: baseline; color: var(--ink); }
.row span:first-child { min-width: 0; overflow-wrap: anywhere; }
.row span:last-child { flex: none; }
.row span:nth-child(2) { flex: 1; border-bottom: 1px dotted color-mix(in oklab, var(--ink) 30%, transparent); transform: translateY(-4px); }
.row span:last-child { color: var(--a1); }
.receipt hr { border: 0; border-top: 1px dashed var(--line); margin: 14px 0; }
.row.total { font-weight: 700; font-size: 15px; } .row.total span:last-child { color: var(--a3); }
.receipt .note { margin: 14px 0 0; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; line-height: 1.6; }

/* VIBES */
.vibes { padding: clamp(80px, 10vw, 150px) 0; }
.palettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pal { --p1: #000; --p2: #000; --p3: #000; --pb: #000; position: relative; display: grid; gap: 14px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--pb); color: #fff; cursor: pointer; text-align: left; overflow: hidden; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.pal:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px var(--p1); }
.pal[aria-pressed="true"] { border-color: var(--p1); box-shadow: 0 0 0 1px var(--p1), 0 30px 70px -30px var(--p1); }
.pal__art { aspect-ratio: 4 / 3; border-radius: 12px; position: relative; overflow: hidden; background:
  radial-gradient(circle at 25% 30%, var(--p1), transparent 45%), radial-gradient(circle at 75% 65%, var(--p2), transparent 45%), radial-gradient(circle at 50% 110%, var(--p3), transparent 55%), #000; }
.pal__art::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 14px 14px; mix-blend-mode: overlay; }
.pal h3 { font-size: 17px; letter-spacing: -.01em; }
.pal p { margin: 0; font: 400 12px/1.5 var(--mono); color: rgba(255,255,255,.62); }
.pal__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pal__chips span { display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1 var(--mono); color: rgba(255,255,255,.75); }
.pal__chips span::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.pal__on { position: absolute; top: 24px; right: 24px; padding: 4px 7px; border-radius: 6px; font: 700 9.5px/1 var(--mono); letter-spacing: .14em; background: var(--p1); color: #000; opacity: 0; transform: scale(.8); transition: .3s var(--ease); }
.pal[aria-pressed="true"] .pal__on { opacity: 1; transform: none; }

/* ENGINE */
.engine { padding: clamp(80px, 10vw, 150px) 0; background: linear-gradient(180deg, transparent, var(--bg-2) 20%, var(--bg-2)); }
.models { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.model { position: relative; padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.model--primary { border-color: color-mix(in oklab, var(--a1) 50%, transparent); background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--a1) 16%, transparent), transparent 60%), var(--bg); }
.model__role { font: 700 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--a1); }
.model h3 { margin: 14px 0 4px; font-size: clamp(22px, 2.4vw, 30px); }
.model code { font: 500 12px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.model dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 18px 0 0; font: 500 12.5px/1.4 var(--mono); }
.model dt { color: var(--muted); } .model dd { margin: 0; text-align: right; color: var(--ink); }
.model__cost { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.model__cost b { font: 700 clamp(26px, 3vw, 38px)/1 var(--sans); letter-spacing: -.03em; color: var(--a3); }
.model__cost span { font: 500 11px/1.3 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; text-align: right; }
.calc { margin-top: 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); font: 500 13px/1.4 var(--mono); }
.calc input[type="range"] { width: 100%; accent-color: var(--a1); }
.calc__n { display: grid; gap: 6px; min-width: 16ch; }
.calc__n output { font: 700 20px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__cost { display: grid; gap: 6px; justify-items: end; text-align: right; }
.calc__cost output { font: 700 20px/1 var(--sans); color: var(--a3); min-width: 9ch; text-align: right; font-variant-numeric: tabular-nums; }
.calc__cost span { color: var(--muted); font-size: 11.5px; }
.model dt.model__month { color: var(--ink); } .model dd.model__month { color: var(--a3); font-weight: 700; font-variant-numeric: tabular-nums; }
.engine__note { margin-top: 16px; font: 400 12px/1.6 var(--mono); color: var(--muted); max-width: 90ch; }

/* OUTRO */
.outro { padding: clamp(90px, 12vw, 180px) 0 80px; text-align: center; overflow: hidden; }
.outro__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .55; }
.outro h2 { font-size: clamp(48px, 10vw, 150px); letter-spacing: -.05em; }
.outro p { margin: 22px auto 34px; color: var(--muted); max-width: 52ch; }
.marquee-big { margin-top: 70px; border-block: 1px solid var(--line); overflow: hidden; white-space: nowrap; padding: 18px 0; font: 600 clamp(22px, 3.6vw, 44px)/1 var(--sans); letter-spacing: -.02em; }
.marquee-big div { display: inline-flex; gap: 44px; animation: marquee 34s linear infinite reverse; }
.marquee-big span:nth-child(3n+1) { color: var(--a1); } .marquee-big span:nth-child(3n+2) { -webkit-text-stroke: 1px var(--ink); color: transparent; } .marquee-big span:nth-child(3n) { color: var(--a2); }
footer { position: relative; z-index: 2; padding: 30px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font: 500 12px/1.6 var(--mono); color: var(--muted); }
footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--ink); }

/* Monitor: Learn Mode transmission during Site builds */
.screen > .screen__promo { z-index: 9; inset: auto 5% 14% 5%; display: grid; justify-items: center; pointer-events: none; }
.promo__box { max-width: min(560px, 100%); padding: clamp(8px, 1.6cqi, 14px) clamp(10px, 2cqi, 18px); border-radius: 8px;
  background: color-mix(in oklab, #02030a 95%, transparent); border: 1px solid color-mix(in oklab, var(--a3) 60%, transparent); backdrop-filter: blur(3px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 30px -6px var(--a3), inset 0 0 24px -12px var(--a3); }
.promo__text { margin: 0; font: 600 clamp(8.5px, 1.55cqi, 13.5px)/1.55 var(--mono); color: #d9ffe0; white-space: pre-wrap; text-shadow: 0 0 8px color-mix(in oklab, var(--a3) 70%, transparent); }
.promo__text .hl { color: var(--a3); } .promo__text .hl2 { color: var(--a1); } .promo__text .hl3 { color: var(--a2); }
.promo__text .caret { width: .55em; height: 1em; }
.screen__promo.in .promo__box { animation: promo-in .5s steps(6) both; }
.screen__promo.out .promo__box { animation: promo-out .45s steps(5) both; }
@keyframes promo-in { 0% { opacity: 0; clip-path: inset(48% 0 48% 0); transform: translateX(-6px) skewX(8deg); filter: hue-rotate(90deg); }
  40% { opacity: 1; clip-path: inset(10% 0 60% 0); transform: translateX(5px); } 70% { clip-path: inset(0 0 20% 0); transform: translateX(-2px) skewX(-4deg); } 100% { opacity: 1; clip-path: inset(0); transform: none; filter: none; } }
@keyframes promo-out { 0% { opacity: 1; clip-path: inset(0); } 50% { clip-path: inset(30% 0 40% 0); transform: translateX(6px) skewX(-8deg); filter: hue-rotate(-90deg); } 100% { opacity: 0; clip-path: inset(50% 0 50% 0); } }
/* Monitor: estimated progress strip */
.screen > .screen__progress { z-index: 8; inset: auto 0 0 0; height: auto; display: grid; gap: 4px; padding: 0; pointer-events: none; }
.sp__label { justify-self: start; margin: 0 0 6px 10px; padding: 3px 7px; border-radius: 5px; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.12);
  font: 600 clamp(8px, 1.1cqi, 11px)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a1); }
.sp__bar { display: block; height: 3px; background: rgba(255,255,255,.08); }
.sp__bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3)); box-shadow: 0 0 10px var(--a1); transition: width .35s linear; }
.screen__progress.done .sp__label { color: var(--a3); }
.screen__progress.fail .sp__label { color: var(--a2); } .screen__progress.fail .sp__bar b { background: var(--a2); }
/* Terminal: estimated progress line */
.term__progress { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "verb pct eta" "bar bar bar"; gap: 6px 10px; align-items: center;
  padding: 9px 14px 10px; border-top: 1px solid var(--line); font: 500 11.5px/1.2 var(--mono); color: var(--muted); }
.term__progress[hidden] { display: none; }
.tp__verb { grid-area: verb; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp__verb::after { content: '…'; color: var(--a1); }
.term__progress.done .tp__verb::after, .term__progress.fail .tp__verb::after { content: ''; }
.tp__pct { grid-area: pct; color: var(--a1); font-variant-numeric: tabular-nums; }
.tp__eta { grid-area: eta; font-variant-numeric: tabular-nums; }
.tp__bar { grid-area: bar; height: 4px; border-radius: 4px; background: color-mix(in oklab, var(--ink) 8%, transparent); overflow: hidden; }
.tp__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3)); transition: width .35s linear; }
.term__progress.done .tp__pct { color: var(--a3); } .term__progress.fail .tp__pct, .term__progress.fail .tp__verb { color: var(--a2); }
.term__progress.fail .tp__bar i { background: var(--a2); }
/* Result card: Learn Mode reminder after Site builds */
.result__learn { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 14px; border-top: 1px dashed color-mix(in oklab, var(--a3) 35%, transparent);
  font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.result__learn[hidden] { display: none; }
.result__learn b { color: var(--a3); font-weight: 600; }
.result__learn .btn { min-height: 38px; }

/* LEARN MODE */
.tick-new { color: var(--bg); font-weight: 800; }
.nav-learn { position: relative; }
.nav-learn .dot-new { position: absolute; top: 4px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--a3); animation: ping 2s ease-out infinite; }
.nav-learn.seen .dot-new { display: none; }
.pill-new { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 14px 8px 8px; border-radius: 999px; text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--a3) 50%, transparent); background: color-mix(in oklab, var(--bg) 60%, transparent); backdrop-filter: blur(8px);
  font: 600 12.5px/1.2 var(--mono); letter-spacing: .04em; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.pill-new b { padding: 4px 8px; border-radius: 999px; background: var(--a3); color: var(--bg); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.pill-new:hover { border-color: var(--a3); box-shadow: 0 0 26px -8px var(--a3); }
.learn-tag { margin-left: 8px; padding: 2px 6px; border-radius: 5px; background: var(--a3); color: var(--bg); font-size: 10px; letter-spacing: .14em; }
.learn-tag[hidden] { display: none; }
.modeswitch { display: inline-flex; padding: 3px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 70%, transparent); gap: 2px; flex: none; }
.modeswitch button { padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 700 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.modeswitch button[aria-pressed="true"] { background: var(--a1); color: var(--bg); }
.term[data-mode="learn"] .modeswitch button[aria-pressed="true"] { background: var(--a3); }
.modeswitch button:disabled { cursor: not-allowed; opacity: .55; }
/* While Site mode is active, the Learn pill breathes softly to invite a try. */
.term[data-mode="site"] .modeswitch button[data-mode="learn"]:not(:disabled) { animation: learn-pulse 2.6s ease-in-out infinite; }
@keyframes learn-pulse {
  0%, 100% { color: var(--muted); box-shadow: 0 0 0 0 transparent; }
  50% { color: var(--a3); box-shadow: 0 0 0 1px color-mix(in oklab, var(--a3) 65%, transparent), 0 0 16px -3px color-mix(in oklab, var(--a3) 75%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .term[data-mode="site"] .modeswitch button[data-mode="learn"]:not(:disabled) { animation: none; color: var(--a3); box-shadow: 0 0 0 1px color-mix(in oklab, var(--a3) 55%, transparent); } }
.term__form > .modeswitch { display: flex; width: 100%; }
.term__form > .modeswitch button { flex: 1; padding: 10px; }
.chip .aud { color: var(--a2); font-weight: 600; }
.term__log .suggest { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.term__log .suggest .btn { min-height: 34px; padding: 0 12px; font-size: 11px; }
.learn { padding: clamp(70px, 9vw, 130px) 0; }
.learn__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lcard { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; transition: border-color .3s, transform .3s var(--ease); }
.lcard:hover { border-color: color-mix(in oklab, var(--a3) 50%, transparent); }
.lcard img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-bottom: 1px solid var(--line); }
.lcard__body { display: grid; gap: 8px; align-content: start; grid-template-rows: auto auto 1fr auto; padding: 16px 16px 18px; }
.lcard__kind { margin: 0; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a3); }
.lcard h3 { font-size: 19px; letter-spacing: -.01em; }
.lcard p:not(.lcard__kind) { margin: 0; color: var(--muted); font-size: 14px; }
.lcard__try { justify-self: start; align-self: end; margin-top: 6px; min-height: 40px; } /* buttons line up when a title wraps */
.learn__aud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.learn__aud a { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.learn__aud a:hover { border-color: var(--a3); color: var(--a3); }
.learn__note { margin: 18px 0 0; font: 500 14px/1.5 var(--mono); color: var(--ink); }
@media (hover: hover) { .lcard:hover { transform: translateY(-4px); } }

/* Responsive */
@media (max-width: 1100px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track grows to its widest unwrapped content, so Learn mode's extra LEARN badge in the
     terminal bar widened the column past the screen on phones (380 px on a 375 px viewport; fixed 2026-11-07). */
  .bay__grid { grid-template-columns: minmax(0, 1fr); }
  .bay__stage, .term { min-width: 0; }
  .learn__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .models { grid-template-columns: 1fr 1fr; } .model--primary { grid-column: 1 / -1; }
  .palettes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .nav__links { display: none; } .swatch-btn { margin-left: auto; }
  .how__grid, .ledger__grid { grid-template-columns: 1fr; }
  .sphere { position: relative; top: 0; max-width: 420px; margin-inline: auto; }
  .palettes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .models { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; } .calc__cost { justify-items: start; text-align: left; } .calc__cost output { text-align: left; }
  .hero { padding-top: 120px; } .rings { right: -40vw; width: 130vw; opacity: .55; }
  .hero__media img { object-position: 78% 50%; opacity: .7; }
  .hero__media::after { background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 55%, transparent) 0%, color-mix(in oklab, var(--bg) 80%, transparent) 40%, var(--bg) 100%); }
  .hero .lede { text-shadow: 0 1px 12px var(--bg); }
}
@media (max-width: 420px) {
  .palettes { grid-template-columns: 1fr; }
  .learn__cards { grid-template-columns: 1fr; }
  .scroll-cue span { display: none; }
  .term__log { font-size: 11.5px; }
}

/* Touch devices: no sticky hover lifts, finger-sized targets, no iOS focus zoom, lighter ambient effects.
   Gated on input type so the desktop rendering is unchanged. */
@media (hover: none) {
  .btn:hover, .step:hover, .pal:hover { transform: none; }
  .chip:hover { background: transparent; border-style: dashed; color: var(--muted); }
}
@media (pointer: coarse) {
  a, button, .chip, .pal { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .term textarea { font-size: 16px; }
  .chip { min-height: 40px; padding: 10px 13px; }
  .swatch-btn { min-height: 40px; padding: 8px 11px; }
  .result__actions .btn { min-height: 44px; }
  .spotlight { display: none; }
  .grain { animation: none; inset: 0; }
  /* Touch devices: keep the pulse (compositor-only) but skip re-rendering the rotating gradient every frame. */
  .monitor__backlight::before { animation: backlight 3.8s ease-in-out infinite; }
  .hx .glow { filter: none; } /* SVG glow filters repaint every frame; skip them on phones and tablets */
  .reveal { filter: none; }
}
@media (max-width: 820px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .hero__title .line > span { transform: none; }
  .hero__title .line { clip-path: none; }
  .grain { display: none; }
  .screen__promo .promo__box { animation: none !important; }
}