/* TapPoint landing — black & gold.
   Show mode: every layer is position:fixed, the page only scrolls an empty #track whose
   progress drives the 3D scene and the text blocks. Free mode: a normal document. */

:root {
  --bg: #050404;
  --bg-2: #0d0b09;
  --ink: #f3ead8;
  --muted: #9a9081;
  --gold: #d4a24c;
  --gold-hi: #f6d991;
  --gold-lo: #8a6424;
  --line: rgba(212, 162, 76, .22);
  --glass: rgba(14, 11, 8, .62);
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --body: "Onest", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.show-mode { scrollbar-width: none; }
body.show-mode::-webkit-scrollbar { display: none; }
body.is-loading { overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--gold-hi); font-size: 1.12em; letter-spacing: .01em; }
::selection { background: var(--gold); color: #000; }

/* ---------------- fixed stage ---------------- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
body.free-mode #gl { opacity: .5; transition: opacity 1s; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#show { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
body.free-mode #show, body.free-mode #rail, body.free-mode #labels { display: none; }
#track { position: relative; z-index: -1; pointer-events: none; }
body.free-mode #track { display: none; }

.scene {
  --in: 0; --out: 0;
  position: absolute; inset: 0;
  padding: 120px var(--pad) 72px;
  display: grid;
}
.scene[data-on="0"] { visibility: hidden; }
.scene button, .scene a { pointer-events: auto; }

/* scrubbed reveal: --in goes 0→1 as a scene arrives, --out 0→1 as it leaves */
.fx {
  --k: clamp(0, calc(var(--in) * 1.6 - var(--d, 0) * .6), 1);
  --q: clamp(0, calc(var(--out) * 1.6 - var(--d, 0) * .6), 1);
  opacity: calc(var(--k) - var(--q));
  transform: translate3d(0, calc((1 - var(--k)) * 48px - var(--q) * 48px), 0);
}
[data-split] .w { display: inline-block; white-space: nowrap; }
[data-split] .c {
  display: inline-block;
  --k: clamp(0, calc(var(--in) * 1.6 - var(--i) * .6), 1);
  --q: clamp(0, calc(var(--out) * 1.6 - var(--i) * .6), 1);
  opacity: calc(var(--k) - var(--q));
  transform: translate3d(0, calc((1 - var(--k)) * .8em - var(--q) * .6em), 0)
             rotate(calc((1 - var(--k)) * 14deg)) scale(calc(1 + var(--q) * .35));
  filter: blur(calc((1 - var(--k) + var(--q)) * 8px));
  will-change: transform, opacity;
}

.kicker, .idx {
  font: 500 12px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0;
}
.idx b { color: var(--muted); font-weight: 400; margin: 0 .4em; }

.scene h2 {
  font: 600 clamp(28px, 3.6vw, 56px)/1.08 var(--display);
  letter-spacing: -.02em; margin: 18px 0 20px; text-wrap: balance;
}
.scene .body { font-size: clamp(15px, 1.15vw, 18px); color: #d8cebc; max-width: 46ch; margin: 0 0 22px; text-shadow: 0 1px 2px #000, 0 0 24px rgba(0,0,0,.9); }
.scene h2, .hero-lead { text-shadow: 0 0 40px rgba(0,0,0,.65); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.chips li {
  font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--gold-hi);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px;
  background: rgba(212, 162, 76, .06); backdrop-filter: blur(6px);
}

/* scene layouts */
.s-hero { align-content: end; justify-items: start; grid-template-rows: auto 1fr auto auto; }
.s-hero .kicker { grid-row: 1; }
.hero-lead { grid-row: 3; max-width: 34ch; font-size: clamp(16px, 1.5vw, 22px); line-height: 1.45; margin: 0 0 28px; color: #e6dccb; }
.scroll-hint { grid-row: 4; justify-self: center; display: grid; justify-items: center; gap: 10px; font: 500 11px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.scroll-hint i { width: 1px; height: 56px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold-hi); animation: drip 1.8s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes drip { to { top: 110%; } }

.s-left { align-content: center; justify-items: start; }
.s-left > * { max-width: min(560px, 44vw); }
.s-right { align-content: center; justify-items: end; text-align: right; }
.s-right > * { max-width: min(560px, 44vw); }
.s-right .chips { justify-content: flex-end; }
.s-right .body { margin-left: auto; }
.s-bottom { align-content: end; justify-items: start; }
.s-bottom h2 { max-width: 24ch; font-size: clamp(22px, 2.4vw, 38px); margin: 12px 0 10px; }
.s-numbers { align-content: center; justify-items: center; }
.s-final { align-content: start; justify-items: center; text-align: center; padding-top: 16vh; }
.s-final h2 { max-width: 16ch; font-size: clamp(32px, 5vw, 80px); }

.layer-counter { display: flex; align-items: baseline; gap: 12px; font: 500 13px var(--mono); color: var(--muted); letter-spacing: .1em; }
.layer-counter b { font: 600 clamp(44px, 5vw, 76px)/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.col-now { display: grid; gap: 6px; margin-top: 4px; }
.col-count { font: 500 13px var(--mono); color: var(--muted); letter-spacing: .12em; }
.col-count b { color: var(--gold); font-weight: 500; }
.col-name { font: 800 clamp(40px, 6vw, 96px)/1 var(--display); letter-spacing: -.03em;
  background: linear-gradient(100deg, var(--gold-lo), var(--gold-hi) 40%, var(--gold) 60%, var(--gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.col-meta { font: 400 15px var(--body); color: #cfc5b3; }
.col-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; width: max-content; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color .3s, gap .3s; }
.col-link:hover { border-color: var(--gold); gap: 14px; }
.v-about { margin: 0; color: #cbc1af; font-size: 15px; }

.palette { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.sw { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 22px rgba(212,162,76,.25); }
.sw + .sw { margin-left: -16px; }
.pal-name { font: 500 13px var(--mono); letter-spacing: .08em; color: var(--gold-hi); margin-left: 6px; }
.steps { list-style: none; counter-reset: s; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; font: 500 13px var(--body); color: #cfc5b3; }
.steps li { counter-increment: s; }
.steps li::before { content: "0" counter(s) " "; font-family: var(--mono); color: var(--gold); margin-right: 4px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; width: min(1100px, 100%); margin-top: 24px; }
.stat { background: rgba(8, 6, 4, .72); backdrop-filter: blur(10px); padding: clamp(18px, 2.4vw, 34px); display: grid; gap: 8px; align-content: start; }
.stat b { font: 600 clamp(36px, 4.4vw, 68px)/1 var(--display); color: var(--gold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat span { color: #cfc5b3; font-size: 14px; }
.stat small { display: block; color: var(--muted); font: 400 11px var(--mono); margin-top: 6px; letter-spacing: .04em; }
.stat.wide { grid-column: span 3; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; }
.stat.wide b { color: var(--gold-hi); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }

/* ---------------- buttons ---------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 30px; border-radius: 999px; cursor: pointer; text-decoration: none; overflow: hidden;
  font: 600 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--gold); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.btn span { position: relative; z-index: 1; }
.btn.gold { background: linear-gradient(110deg, var(--gold-lo), var(--gold) 30%, var(--gold-hi) 50%, var(--gold) 70%, var(--gold-lo)); background-size: 220% 100%; color: #0a0806; animation: shine 4s linear infinite; box-shadow: 0 10px 40px -10px rgba(212,162,76,.6); }
.btn.gold:hover { box-shadow: 0 14px 60px -8px rgba(246,217,145,.75); }
.btn.ghost { background: rgba(10, 8, 6, .5); color: var(--gold-hi); backdrop-filter: blur(8px); }
.btn.ghost::before { content: ""; position: absolute; inset: 0; background: var(--gold); transform: translateY(101%); transition: transform .45s cubic-bezier(.7,0,.2,1); }
.btn.ghost:hover { color: #0a0806; }
.btn.ghost:hover::before { transform: none; }
.btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
@keyframes shine { to { background-position: -220% 0; } }

/* ---------------- top bar ---------------- */
#top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; gap: 24px;
  padding: 18px var(--pad);
  background: linear-gradient(rgba(5,4,4,.75), transparent);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold); font: 600 15px var(--display); letter-spacing: .02em; }
.brand svg { width: 28px; height: 28px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { text-decoration: none; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #cfc5b3; position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s; }
.nav a:hover { color: var(--gold-hi); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.mode-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10,8,6,.6); color: var(--gold-hi); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); animation: pop .6s cubic-bezier(.2,1.4,.4,1); }
.mode-btn:hover { border-color: var(--gold); }
.mode-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ---------------- progress rail ---------------- */
#rail { position: fixed; right: var(--pad); top: 50%; transform: translateY(-50%); z-index: 5; display: grid; justify-items: end; gap: 14px; }
.rail-pct { font: 500 11px var(--mono); color: var(--muted); letter-spacing: .1em; }
.rail-pct b { color: var(--gold); font-weight: 500; font-variant-numeric: tabular-nums; }
.rail-line { width: 1px; height: 90px; background: var(--line); position: relative; }
.rail-line i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--gold); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 8px var(--gold); }
#railList { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#railList button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: none; border: 0; cursor: pointer; padding: 4px 0; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#railList button span { opacity: 0; transform: translateX(8px); transition: .35s; }
#railList button i { width: 14px; height: 1px; background: currentColor; transition: width .35s, background .35s; }
#railList button:hover span, #railList button[aria-current="true"] span { opacity: 1; transform: none; }
#railList button[aria-current="true"] { color: var(--gold-hi); }
#railList button[aria-current="true"] i { width: 30px; background: var(--gold); }

/* ---------------- exploded-view labels ---------------- */
#labels { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.lbl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lbl-svg path { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0; }
.lbl-svg circle { fill: var(--gold); opacity: 0; filter: drop-shadow(0 0 6px var(--gold)); }
.lbl { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--gold-hi); white-space: nowrap; }
.lbl b { display: block; font-weight: 500; padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; background: rgba(8,6,4,.78); backdrop-filter: blur(6px); }

/* ---------------- wipe between modes ---------------- */
#wipe { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: grid; grid-template-rows: repeat(5, 1fr); }
#wipe i { background: linear-gradient(90deg, #0a0806, #1a130a 50%, #0a0806); border-bottom: 1px solid var(--gold-lo); transform: scaleX(0); transform-origin: left; }
#wipe.run i { animation: wipe 1.1s cubic-bezier(.75,0,.2,1) both; }
#wipe.run i:nth-child(2) { animation-delay: .05s; } #wipe.run i:nth-child(3) { animation-delay: .1s; }
#wipe.run i:nth-child(4) { animation-delay: .15s; } #wipe.run i:nth-child(5) { animation-delay: .2s; }
@keyframes wipe { 0% { transform: scaleX(0); transform-origin: left; } 45%, 55% { transform: scaleX(1); transform-origin: left; } 56% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* ---------------- loader ---------------- */
#loader { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: var(--bg); transition: opacity .8s .5s, visibility 0s 1.3s; }
#loader.done { opacity: 0; visibility: hidden; }
.ld-inner { width: min(420px, 80vw); display: grid; gap: 18px; transition: transform .8s cubic-bezier(.7,0,.2,1), opacity .5s; }
#loader.done .ld-inner { transform: translateY(-30px); opacity: 0; }
.ld-logo { font: 800 clamp(34px, 8vw, 64px)/1 var(--display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.ld-logo span { color: var(--gold); -webkit-text-stroke: 0; }
.ld-bar { height: 1px; background: var(--line); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 12px var(--gold); }
.ld-meta { display: flex; justify-content: space-between; font: 500 11px var(--mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.ld-meta #ldPct { color: var(--gold); }

/* ---------------- cursor + grain ---------------- */
#cursor { position: fixed; left: 0; top: 0; z-index: 11; pointer-events: none; mix-blend-mode: difference; display: none; }
@media (pointer: fine) { #cursor { display: block; } body.has-cursor, body.has-cursor * { cursor: none !important; } }
#cursor i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.c-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold-hi); }
.c-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid var(--gold); transition: width .3s, height .3s, margin .3s, background .3s; }
#cursor.hover .c-ring { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(212,162,76,.25); }
#grain { position: fixed; inset: -50%; z-index: 9; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-6%,4%); } 40% { transform: translate(5%,-7%); } 60% { transform: translate(-3%,8%); } 80% { transform: translate(7%,2%); } }

/* ================= FREE MODE ================= */
#free { position: relative; z-index: 3; padding-top: 90px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--pad); }
.f-hero { min-height: 88vh; display: grid; align-content: center; gap: 22px; }
.f-hero h1 { margin: 0; font: 800 clamp(64px, 15vw, 230px)/.86 var(--display); letter-spacing: -.05em;
  background: linear-gradient(100deg, var(--gold-lo) 0%, var(--gold) 25%, var(--gold-hi) 45%, var(--gold) 60%, var(--gold-lo) 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
.f-hero h1 span { -webkit-text-stroke: 1px var(--gold); color: transparent; -webkit-text-fill-color: rgba(5,4,4,.4); }
.f-lead { max-width: 44ch; font-size: clamp(17px, 1.6vw, 22px); color: #e2d8c6; margin: 0; }
.f-hero .cta-row { justify-content: flex-start; }
.f-sec { padding-block: clamp(56px, 9vw, 120px); border-top: 1px solid var(--line); }
.f-head { margin-bottom: 36px; }
.f-head h2 { font: 600 clamp(28px, 4vw, 54px)/1.08 var(--display); letter-spacing: -.02em; margin: 14px 0 0; max-width: 22ch; text-wrap: balance; }
.f-text { color: #d5cbb9; font-size: 17px; max-width: 54ch; margin: 0 0 24px; }

.cards { display: grid; gap: 14px; }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { position: relative; padding: 28px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); overflow: hidden; transition: border-color .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(212,162,76,.16), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.card:hover { border-color: rgba(212,162,76,.55); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }
.card .num { font: 600 30px/1 var(--display); color: var(--gold); letter-spacing: -.02em; }
.card h3 { font: 600 18px/1.25 var(--display); margin: 22px 0 10px; letter-spacing: -.01em; }
.card p { margin: 0; color: #cbc1af; font-size: 15px; }

/* viewer */
.viewer { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "stage side" "list list"; gap: 14px; }
.v-stage { grid-area: stage; position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 35%, #1d160d, #070605 70%); touch-action: none; }
#vCanvas { display: block; width: 100%; height: 100%; cursor: grab; }
#vCanvas:active { cursor: grabbing; }
.v-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.v-hint { position: absolute; left: 14px; bottom: 12px; font: 400 11px var(--mono); color: var(--muted); letter-spacing: .06em; pointer-events: none; }
.v-side { grid-area: side; display: grid; gap: 14px; align-content: start; }
.v-info, .v-controls { padding: 22px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); display: grid; gap: 12px; }
.v-kind { margin: 0; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.v-name { margin: 0; font: 600 28px/1.1 var(--display); letter-spacing: -.02em; }
.v-info dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; font-size: 14px; }
.v-info dt { color: var(--muted); }
.v-info dd { margin: 0; text-align: right; font: 400 13px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1 1 auto; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: #cfc5b3; cursor: pointer; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: .3s; }
.seg button:hover { border-color: var(--gold); color: var(--gold-hi); }
.seg button[aria-pressed="true"] { background: var(--gold); color: #0a0806; border-color: var(--gold); }
.v-list { grid-area: list; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.v-list button { text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; display: grid; gap: 4px; transition: .3s; }
.v-list button:hover { border-color: var(--gold); }
.v-list button b { font: 600 13px/1.2 var(--display); }
.v-list button small { font: 400 10px var(--mono); color: var(--muted); letter-spacing: .04em; }
.v-list button[aria-current="true"] { border-color: var(--gold); background: rgba(212,162,76,.12); box-shadow: inset 0 0 0 1px var(--gold); }

/* custom */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.pal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pal { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); font: 500 12px var(--mono); color: #cfc5b3; letter-spacing: .04em; }
.pal .sw { width: 26px; height: 26px; flex: none; }
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.timeline li { counter-increment: s; position: relative; padding: 0 0 30px 64px; display: grid; gap: 4px; }
.timeline li::before { content: "0" counter(s); position: absolute; left: 0; top: -2px; font: 600 15px var(--display); color: var(--gold); width: 44px; height: 44px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; background: var(--bg); z-index: 1; }
.timeline li::after { content: ""; position: absolute; left: 22px; top: 44px; bottom: 0; width: 1px; background: linear-gradient(var(--gold), var(--line)); }
.timeline li:last-child::after { display: none; }
.timeline b { font: 600 18px var(--display); padding-top: 9px; }
.timeline span { color: #cbc1af; font-size: 15px; }

#numbers .stats { margin-top: 0; }

/* lead form */
.lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 820px; padding: clamp(20px, 3vw, 36px); border-radius: 24px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); }
.lead label { display: grid; gap: 8px; }
.lead label span { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.lead input, .lead textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.4); color: var(--ink); font: 400 16px var(--body); resize: vertical; transition: border-color .3s, box-shadow .3s; }
.lead input:focus, .lead textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212,162,76,.15); }
.lead .full { grid-column: 1 / -1; }
.lead .check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.lead .check span { font: 400 14px/1.5 var(--body); letter-spacing: 0; text-transform: none; color: #cbc1af; }
.lead .check a { color: var(--gold-hi); }
.lead .check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 6px; border: 1px solid var(--gold); background: rgba(0,0,0,.4); display: grid; place-items: center; cursor: pointer; padding: 0; }
.lead .check input::after { content: ""; width: 10px; height: 6px; border: solid #0a0806; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.lead .check input:checked { background: var(--gold); }
.lead .check input:checked::after { opacity: 1; }
.lead .check input:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.lead .check.err input { border-color: #e0664f; box-shadow: 0 0 0 4px rgba(224,102,79,.18); }
.lead .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead { position: relative; }
.lead button[disabled] { opacity: .6; pointer-events: none; }
.form-note { grid-column: 1 / -1; margin: 0; min-height: 1.4em; color: var(--gold-hi); font-size: 14px; }
.f-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 36px 48px; border-top: 1px solid var(--line); font: 500 12px var(--mono); color: var(--muted); letter-spacing: .08em; }
.linkish { background: none; border: 0; color: var(--gold); cursor: pointer; font: inherit; letter-spacing: inherit; padding: 6px 0; }
.linkish:hover { color: var(--gold-hi); }

/* reveal for free-mode blocks (time-based, once) */
.rv { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--rd, 0s); }
.rv.in { opacity: 1; transform: none; }

/* ================= responsive ================= */
@media (max-width: 1080px) {
  .v-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .mode-btn { margin-left: auto; }
  #rail { right: 10px; }
  #railList button span { display: none; }
  .rail-line { height: 60px; }
  .scene { padding: 96px 16px 40px; }
  .s-left, .s-right, .s-bottom { align-content: end; justify-items: start; text-align: left; }
  .s-left > *, .s-right > * { max-width: 100%; }
  .s-right .chips { justify-content: flex-start; }
  .s-right .body { margin-left: 0; }
  .s-left::before, .s-right::before, .s-bottom::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(transparent, rgba(5,4,4,.92) 45%); z-index: -1; opacity: calc(var(--in) - var(--out)); }
  .scene h2 { font-size: clamp(24px, 7vw, 34px); margin: 12px 0 14px; }
  .scene .body { font-size: 15px; margin-bottom: 16px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat.wide { grid-column: span 2; grid-template-columns: 1fr; gap: 10px; }
  .s-numbers { padding-inline: 16px; }
  .c3 { grid-template-columns: 1fr; }
  .viewer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "side" "list"; }
  .v-stage { aspect-ratio: 1; }
  .v-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .lead { grid-template-columns: minmax(0, 1fr); }
  .lbl b { font-size: 10px; padding: 6px 8px; }
}
@media (max-width: 520px) {
  .stat b { font-size: 34px; }
  .stat { padding: 16px; }
  .stat span { font-size: 13px; }
  .pal-grid { grid-template-columns: minmax(0, 1fr); }
  .btn { padding: 16px 22px; font-size: 12px; }
  .f-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #grain, .btn.gold, .f-hero h1 { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
}