/* Lattice Chiti: blueprint -> scaffold -> structure.
   Colour triplets (--bg, --ga, --gb, --acc) are rewritten by main.js as you scroll. */

:root {
  --bg: 10 26 69;
  --ga: 29 78 216;
  --gb: 42 169 255;
  --acc: 255 209 102;
  --ink: 246 240 226;
  --dark: 13 16 40;
  --pearl: 250 246 236;
  --gold: 226 182 92;
  --gold-grad: linear-gradient(135deg, #f6e4ae, #d4b06a 52%, #efd596);
  --f-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: "Newsreader", Georgia, "Times New Roman", serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --f-mono: "Martian Mono", ui-monospace, Consolas, "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  font: 400 1.125rem/1.6 var(--f-body);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
/* without scripts there is no canvas painting: give the arc as a plain gradient */
.no-js body {
  background: linear-gradient(#0a1a45 0%, #261254 22%, #04383c 48%, #0a4236 62%, #78341a 80%, #b03428 100%);
}
img, svg, canvas { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-color: rgb(var(--acc)); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { color: rgb(var(--acc)); }
em { font-style: italic; }
:focus-visible { outline: 3px solid rgb(var(--acc)); outline-offset: 4px; border-radius: 2px; }
::selection { background: rgb(var(--acc)); color: rgb(var(--dark)); }

.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: rgb(var(--acc)); color: rgb(var(--dark)); padding: .6em 1em; font: 600 1rem var(--f-display); }
.skip:focus { top: 1rem; }

/* ---------- atmosphere ---------- */
#lattice { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; }
.no-js #lattice, .no-js .spot { display: none; }
.spot {
  position: fixed; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--acc) / .16), rgb(var(--acc) / .05) 45%, transparent 70%);
  transform: translate3d(-999px, -999px, 0); opacity: 0; transition: opacity .5s;
}
.spot.on { opacity: 1; }
/* faint background grain: z-index 0 keeps it under main (z 1), so photos, text and games stay crisp */
.grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: 180px 180px; }
.prog { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 40; pointer-events: none; }
.prog i { display: block; height: 100%; background: rgb(var(--acc)); transform-origin: 0 50%; transform: scaleX(0); }

main, .top { position: relative; z-index: 1; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.4rem .4rem; }
.mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font: 700 1.05rem/1 var(--f-display); letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; user-select: none; }
.mark:hover { color: inherit; }
.mark__img { width: 46px; height: 46px; transition: transform .6s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35)); }
.mark:hover .mark__img { transform: rotate(120deg); }
.mark__word { height: 38px; width: auto; }
@media (max-width: 520px) { .mark__word { display: none; } .mark__img { width: 42px; height: 42px; } }
.nav { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); font: 400 .72rem/1 var(--f-mono); letter-spacing: .04em; text-transform: lowercase; }
.nav a { text-decoration: none; padding: .7em 0; border-bottom: 1.5px dashed transparent; }
.nav a:hover { border-bottom-color: currentColor; }
@media (max-width: 720px) { .nav__opt { display: none; } }

/* ---------- shared type ---------- */
.eyebrow, .stage, .step__k, .bay__n, .notice__h, .desk__head, .chat__lbl {
  font: 400 .72rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow { margin: 0 0 1.2rem; color: rgb(var(--ink) / .8); }
.eyebrow span { background: rgb(var(--acc)); color: rgb(var(--dark)); padding: .25em .55em; margin-right: .5em; font-weight: 600; }
.h2 { font: 700 clamp(2.1rem, 5.4vw, 4.1rem)/.98 var(--f-display); letter-spacing: -.035em; margin: 0 0 1.4rem; max-width: 16ch; text-wrap: balance; }
.h2--big { font-size: clamp(2.8rem, 9vw, 7.4rem); font-weight: 800; max-width: none; }
.lede { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.45; max-width: 36em; }
.hand { font: 700 1.55rem/1.1 var(--f-hand); color: rgb(var(--acc)); }
.fine { font-size: .98rem; color: rgb(var(--ink) / .82); border-left: 2px dashed rgb(var(--ink) / .5); padding-left: 1em; }
.scr { color: rgb(var(--acc)); }
.only-markets, .only-research { display: none; }
body[data-path="markets"] .only-markets, body[data-path="research"] .only-research { display: block; }

.stage { display: flex; align-items: baseline; gap: .9rem; margin: 0 0 2.2rem; }
.stage b { font: 800 clamp(3.4rem, 9vw, 6.5rem)/.8 var(--f-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgb(var(--ink)); }
.stage i { flex: 1; height: 0; border-top: 1.5px dashed rgb(var(--ink) / .55); min-width: 1.5rem; }
.stage em { font: 700 1.45rem/1 var(--f-hand); text-transform: none; letter-spacing: 0; color: rgb(var(--acc)); display: inline-block; rotate: -3deg; }
@media (max-width: 560px) { .stage em { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
  font: 700 1rem/1.15 var(--f-display); letter-spacing: -.005em; padding: .85em 1.2em; min-height: 48px;
  background: rgb(var(--acc)); color: rgb(var(--dark)); border: 2px solid rgb(var(--dark)); border-radius: 3px;
  box-shadow: 5px 5px 0 rgb(var(--dark) / .9);
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  transition: box-shadow .15s, translate .1s, transform .25s cubic-bezier(.2,.9,.3,1.4), background-color .2s;
}
.btn span { display: inline-block; transform: translate(calc(var(--tx, 0px) * .35), calc(var(--ty, 0px) * .35)); pointer-events: none; }
.btn:hover { color: rgb(var(--dark)); box-shadow: 8px 8px 0 rgb(var(--dark) / .9); }
.btn:active { translate: 4px 4px; box-shadow: 1px 1px 0 rgb(var(--dark) / .9); }
.btn--alt { background: rgb(var(--ink)); }
.btn--ghost { background: transparent; color: rgb(var(--ink)); border: 1.5px dashed rgb(var(--ink) / .8); box-shadow: none; font-weight: 500; }
.btn--ghost:hover { color: rgb(var(--dark)); background: rgb(var(--ink)); box-shadow: none; }
.btn--big { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800; padding: .8em 1.3em; }
.btn[aria-pressed="true"] { background: rgb(var(--dark)); color: rgb(var(--acc)); border-color: rgb(var(--acc)); box-shadow: 2px 2px 0 rgb(var(--acc)); }

/* ---------- 01 hero ---------- */
.hero { display: grid; gap: 2rem; padding-block: clamp(1.2rem, 4vw, 3rem) 3rem; align-items: center; }
@media (min-width: 940px) { .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; min-height: calc(100svh - 5rem); padding-bottom: 5rem; } }
.title { margin: 0; font: 800 clamp(3.6rem, 11.5vw, 9.4rem)/.82 var(--f-display); letter-spacing: -.055em; }
.title > span { display: block; white-space: nowrap; transition: opacity .35s; }
.title { position: relative; }
/* living structure drawn inside the letters (clipped to them); the real text never moves */
.title__fx { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
.title__b { margin-left: .42em; color: transparent; -webkit-text-stroke: 2px rgb(var(--ink)); }
.title__b .scr { -webkit-text-stroke: 0; }
@supports not (-webkit-text-stroke: 1px red) { .title__b { color: rgb(var(--acc)); } }
.dim { display: flex; align-items: center; gap: .7rem; margin: 1.5rem 0 1.4rem; max-width: 27rem; font: 400 .78rem/1 var(--f-mono); letter-spacing: .16em; text-transform: lowercase; color: rgb(var(--acc)); white-space: nowrap; }
.dim i { flex: 1; height: 9px; border-top: 1.5px solid currentColor; translate: 0 4px; position: relative; min-width: 1rem; }
.dim i::before { content: ""; position: absolute; top: -6px; height: 11px; border-left: 1.5px solid currentColor; }
.dim i:first-child::before { left: 0; } .dim i:last-child::before { right: 0; }
.mission { font-size: clamp(1.25rem, 2.3vw, 1.6rem); line-height: 1.35; max-width: 23em; margin-bottom: .9rem; }
.status { font: 700 1.5rem/1.15 var(--f-hand); color: rgb(var(--ink) / .88); max-width: 21em; rotate: -1.2deg; transform-origin: 0 50%; margin: 1.2rem 0 0; }

/* the opening scene: a sketched room, a real person */
.scene {
  --px: 0; --py: 0;
  --sky-a: #1c3faa; --sky-b: #6fb7ff; --orb: #ffd166; --stars: 0;
  position: relative; aspect-ratio: 1; width: 100%; max-width: 600px; margin-inline: auto;
  border-bottom: 2.5px solid rgb(var(--ink));            /* the desk edge */
}
.scene[data-part="dawn"]  { --sky-a: #33407f; --sky-b: #ff9e7a; --orb: #ffd9a0; }
.scene[data-part="day"]   { --sky-a: #2f7fe0; --sky-b: #a8e0ff; --orb: #fff1a8; }
.scene[data-part="dusk"]  { --sky-a: #3a2a7a; --sky-b: #ff7a6b; --orb: #ffb36b; --stars: .4; }
.scene[data-part="night"] { --sky-a: #05081f; --sky-b: #1a2a6c; --orb: #f3efe0; --stars: 1; }
.scene__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translate(calc(var(--px) * -7px), calc(var(--py) * -4px)); }
.sky-a { stop-color: var(--sky-a); } .sky-b { stop-color: var(--sky-b); }
.orb { fill: var(--orb); } .orb-cut { fill: var(--sky-a); opacity: 0; }
.scene[data-part="night"] .orb-cut { opacity: 1; }
.stars { fill: #fff; opacity: var(--stars); }
.ink { fill: none; stroke: rgb(var(--ink)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ink--thin { stroke-width: 1.6; }
.paper { fill: rgb(var(--ink) / .08); stroke: rgb(var(--ink) / .7); stroke-width: 1.4; stroke-dasharray: 5 4; }
.pin { fill: rgb(var(--acc)); }
.plan-knot { opacity: .9; }
.scene text.hand { font: 700 24px var(--f-hand); fill: rgb(var(--acc)); }

.poses { position: absolute; inset: 0; overflow: hidden; }
.pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.9,.3,1.25); transform: translate(calc(var(--px) * 5px), calc(var(--py) * 3px)); }
.pose:not([src]) { visibility: hidden; }
/* default (no script, or after the opening): the chai pose, looking at you */
.pose--chai { opacity: 1; }
.js .scene.is-typing .pose--chai { opacity: 0; transform: translate(-10px, 6px) scale(.985); }
.js .scene.is-typing .pose--typing { opacity: 1; animation: bob .46s ease-in-out infinite alternate; }
.js .scene.is-asleep .pose--chai { opacity: 0; }
.js .scene.is-asleep .pose--asleep { opacity: 1; animation: breathe 3.4s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(2.5px); } }
@keyframes breathe { to { transform: scale(1.012) translateY(-2px); } }

/* greeting on the back of the laptop lid (placed for the chai pose) */
.lid { position: absolute; left: 4.5%; top: 77.5%; width: 60%; height: 21%; container-type: inline-size; display: flex; align-items: center; pointer-events: none; transition: opacity .4s; }
.lid__hi { margin: 0; font: 800 12.5cqw/.95 var(--f-display); letter-spacing: -.04em; color: #ffe9c2; text-shadow: 0 0 18px rgb(255 170 60 / .75), 0 0 2px rgb(255 200 120 / .9); }
.lid__hi .scr { color: #ffb347; }
.lid__hi.is-small { font-size: 8.5cqw; }
.lid__hi .caret { display: inline-block; width: .5em; margin-left: .06em; border-bottom: .12em solid currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* lid modes: text (default), sealed prediction, the answer */
.lid__seal, .lid__answer { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2,1.6,.4,1); pointer-events: none; }
.lid__seal { gap: .35em; font: 600 6.4cqw/1 var(--f-mono); color: #ffe9c2; text-shadow: 0 0 14px rgb(255 170 60 / .7); }
.lid__lock { display: inline-block; font-size: 1.5em; animation: lockbob 2.4s ease-in-out infinite; }
@keyframes lockbob { 50% { transform: translateY(-.12em) rotate(-6deg); } }
.lid.shake .lid__lock { animation: lockshake .12s linear infinite; }
@keyframes lockshake { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.lid__answer { font: 800 17cqw/1 var(--f-mono); color: #ffe9c2; letter-spacing: -.02em; text-shadow: 0 0 26px rgb(255 190 80 / .85); transform: scale(.4); }
.lid[data-mode="seal"] .lid__hi, .lid[data-mode="answer"] .lid__hi { opacity: 0; }
.lid[data-mode="seal"] .lid__seal { opacity: 1; }
.lid[data-mode="answer"] .lid__answer { opacity: 1; transform: none; }
.fig-note { position: absolute; left: 0; top: calc(100% + .55rem); max-width: calc(100% - 9.5rem); margin: 0; font: 400 .64rem/1.3 var(--f-mono); letter-spacing: .04em; color: rgb(var(--ink) / .7); }

/* the small replay button: a coffee cup with rising steam */
.replay { position: absolute; right: 0; top: calc(100% + .35rem); display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem .25rem .3rem; background: none; border: 1px solid rgb(var(--ink) / .3); border-radius: 99px; color: rgb(var(--ink) / .85); font: 400 .66rem/1 var(--f-mono); letter-spacing: .04em; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.replay:hover, .replay:focus-visible { border-color: rgb(var(--acc)); color: rgb(var(--acc)); }
.replay[disabled] { opacity: .5; cursor: default; }
.replay svg { width: 22px; height: 22px; overflow: visible; }
.replay__cup { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.replay__steam { fill: none; stroke: rgb(var(--acc)); stroke-width: 1.6; stroke-linecap: round; animation: steam 2.2s ease-in-out infinite; }
@keyframes steam { 0% { opacity: 0; transform: translateY(3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }

/* the 1089 trick */
.trick { max-width: 600px; margin: 1.6rem auto 0; }
.js .trick { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s cubic-bezier(.2,.9,.3,1.2); }
.js .trick.on { opacity: 1; transform: none; }
.trick__says { font: 700 clamp(1.45rem, 2.6vw, 1.85rem)/1.15 var(--f-hand); color: rgb(var(--acc)); margin: 0 0 .9rem; min-height: 2.3em; }
.trick__tiles { display: flex; gap: .7rem; }
.trick__tile { width: 4rem; height: 4.8rem; border-radius: 10px; border: 2px solid rgb(var(--ink) / .35); background: rgb(var(--dark) / .55); color: rgb(var(--ink)); font: 600 2.4rem/1 var(--f-mono); text-align: center; caret-color: rgb(var(--acc)); transition: border-color .2s, transform .2s; }
.trick__tile:focus { outline: none; border-color: rgb(var(--acc)); transform: translateY(-3px); }
.trick__tile:disabled { opacity: .75; }
.trick__err { min-height: 1.4em; margin: .4rem 0; font-size: .9rem; color: #ff9aa8; }
.trick__work { font: 600 clamp(1rem, 2.4vw, 1.3rem)/1.5 var(--f-mono); margin: 1rem 0 0; }
.trick__work > div { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.trick__work > div.on { opacity: 1; transform: none; }
.trick__work small { font: 400 .78rem var(--f-mono); color: rgb(var(--ink) / .65); }
.trick__work .v { color: #7ef0cf; } .trick__work .r { color: #c3a6ff; } .trick__work .t { color: rgb(var(--acc)); }
.trick__reveal { display: none; }
.trick__reveal.on { display: block; animation: rise .8s cubic-bezier(.2,.9,.3,1.1); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.trick__h { font: 800 clamp(1.6rem, 3.4vw, 2.3rem)/1.1 var(--f-display); letter-spacing: -.02em; margin: 1.4rem 0 .7rem; }
.trick__reveal p { max-width: 34em; }
.trick__reveal b { color: rgb(var(--acc)); font-weight: 600; }
.trick__count { font: 400 .75rem var(--f-mono); color: rgb(var(--ink) / .7); margin-left: .6rem; }

.says { max-width: 600px; margin: 3.9rem auto 0; font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.35; }
.says__hint { display: block; margin-top: .35rem; font: 400 .68rem/1.5 var(--f-mono); color: rgb(var(--ink) / .75); }
.js .says { transition: opacity .5s; }
.js .scene.is-typing ~ .says { opacity: 0; }

.ask { margin: 1.6rem auto 0; max-width: 600px; }
.ask__q { font: 700 clamp(1.35rem, 2.6vw, 1.8rem)/1.1 var(--f-display); letter-spacing: -.02em; margin: 0 0 1rem; }
.ask__opts { display: flex; flex-wrap: wrap; gap: 1rem 1.1rem; }
.ask__reply { min-height: 3.2em; margin: 1.1rem 0 0; font-size: 1.02rem; }
.js .ask { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s cubic-bezier(.2,.9,.3,1.2); }
.js .ask.on { opacity: 1; transform: none; }

/* ---------- the gap ---------- */
.problem { padding-block: clamp(3rem, 8vw, 6rem) 4rem; }
/* the three doors (Monty Hall), shown to every visitor */
.doors { border: 1.5px dashed rgb(var(--acc)); padding: clamp(1.1rem, 3vw, 1.8rem); margin: 0 0 4rem; max-width: 46rem; background: rgb(var(--dark) / .4); border-radius: 4px; }
.doors__h { font: 800 clamp(1.5rem, 3.3vw, 2.2rem)/1.1 var(--f-display); letter-spacing: -.02em; margin: 0 0 .6rem; }
.doors__lead { margin: 0 0 1.3rem; } .doors__lead b, .doors__after b { color: rgb(var(--acc)); font-weight: 600; }
.doors__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 2vw, 1rem); }
.door { position: relative; height: clamp(130px, 22vw, 190px); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; perspective: 700px; }
.door[disabled] { cursor: default; }
.door__in { position: absolute; inset: 0; border-radius: 12px; background: rgb(var(--dark) / .85); border: 2px solid rgb(var(--ink) / .2); display: grid; place-items: center; font-size: clamp(2rem, 6vw, 3.2rem); }
.door__in small { display: block; font: 600 .7rem var(--f-mono); color: rgb(var(--ink) / .7); text-align: center; }
.door__leaf { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(160deg, #6d4bd6, #3a2a8f); border: 2px solid #8e74f0; transform-origin: left center; transition: transform .7s cubic-bezier(.3,.7,.3,1), filter .7s; display: grid; place-items: center; font: 800 clamp(2rem, 5vw, 3rem) var(--f-mono); color: #f3efff; box-shadow: 0 10px 28px #0008; }
.door__leaf::after { content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--acc)); }
.door.open .door__leaf { transform: rotateY(-82deg); filter: brightness(.6); }
.door.pick .door__leaf { border-color: rgb(var(--acc)); box-shadow: 0 0 0 3px rgb(var(--acc)), 0 0 28px rgb(var(--acc) / .45); }
.doors__says { font: 700 clamp(1.3rem, 2.4vw, 1.7rem)/1.2 var(--f-hand); color: rgb(var(--acc)); min-height: 1.3em; margin: 1rem 0 .6rem; }
.doors__ch { display: flex; flex-wrap: wrap; gap: .8rem; min-height: 48px; }
.doors__stats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.1rem; }
.dstat { background: rgb(var(--dark) / .6); border-radius: 10px; padding: .7rem .9rem; }
.dstat p { margin: 0; font-size: .85rem; color: rgb(var(--ink) / .75); }
.dstat .dstat__n { font: 800 1.8rem/1.2 var(--f-mono); color: rgb(var(--ink)); }
.dstat--stay b, .dstat--stay .dstat__n { color: #c3a6ff; } .dstat--switch b, .dstat--switch .dstat__n { color: rgb(var(--acc)); }
.dstat__bar { height: 7px; border-radius: 6px; background: rgb(var(--ink) / .12); overflow: hidden; margin: .35rem 0; }
.dstat__bar i { display: block; height: 100%; width: 0; transition: width .3s; }
.dstat--stay i { background: #c3a6ff; } .dstat--switch i { background: rgb(var(--acc)); }
.doors__after { display: none; }
.doors__after.on { display: block; animation: rise .8s cubic-bezier(.2,.9,.3,1.1); }
.doors__after h3 { font: 800 clamp(1.3rem, 2.6vw, 1.7rem)/1.15 var(--f-display); margin: 1.6rem 0 .6rem; }
.proof { margin: 1.1rem 0 .4rem; padding: 1rem; border-radius: 12px; background: rgb(var(--dark) / .65); border: 1px solid rgb(var(--ink) / .18); }
.proof__k { font: 600 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #7ef0cf; margin: 0 0 .4rem; }
.proof__q { margin: 0 0 .7rem; }
.proof__cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.pcase { background: rgb(var(--ink) / .06); border-radius: 10px; padding: .55rem; text-align: center; font-size: .85rem; }
.pcase__mini { display: flex; gap: 4px; justify-content: center; margin: .3rem 0 .5rem; }
.pcase__mini i { width: 22px; height: 30px; border-radius: 5px; background: #3a2a8f; display: grid; place-items: center; font: 600 .68rem var(--f-mono); font-style: normal; color: #cfc8ff; }
.pcase__mini i.pp { outline: 2px solid rgb(var(--acc)); } .pcase__mini i.pz { background: rgb(var(--acc)); color: rgb(var(--dark)); }
.pcase__r { display: flex; justify-content: space-between; padding: 1px 4px; font: .78rem var(--f-mono); }
.pcase__r .y { color: #7ef0cf; } .pcase__r .n { color: #ff9aa8; }
.proof__cups { font: 700 1.25rem/1.2 var(--f-hand); color: rgb(var(--acc)); margin: .8rem 0 0; }
.doors__name { margin: 1rem 0 0; }
@media (max-width: 520px) { .proof__cases { grid-template-columns: 1fr; } }

.scrolly { display: grid; gap: 0 3.5rem; margin-top: 3rem; }
.scrolly__fig { margin: 0; position: sticky; top: 0; z-index: 2; padding: .8rem 0 .6rem; background: rgb(var(--bg) / .93); align-self: start; }
.scrolly__fig canvas { width: 100%; height: clamp(230px, 44svh, 380px); border: 1.5px solid rgb(var(--ink) / .5); background: rgb(var(--dark) / .45); }
.scrolly__fig figcaption { font: 400 .64rem/1.4 var(--f-mono); letter-spacing: .04em; color: rgb(var(--ink) / .75); margin-top: .5rem; }
.step { min-height: 62svh; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 0; opacity: .38; transition: opacity .4s; }
.no-js .step, .step.on { opacity: 1; }
.step p { max-width: 30em; }
.step__k { color: rgb(var(--acc)); }
.step > p:nth-child(2) { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.42; }
.pencil { font: 500 1.4rem/1.2 var(--f-hand); color: rgb(var(--acc)); rotate: -1deg; }
.pencil strong { font-weight: 700; text-decoration: underline wavy; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .scrolly { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .scrolly__fig { order: 2; top: 14svh; background: none; padding: 0; }
  .scrolly__fig canvas { height: min(62svh, 520px); }
  .step { min-height: 78svh; }
}

/* ---------- 02 the build ---------- */
.build { padding-block: 7rem 5rem; }
.direction { max-width: 44rem; margin: 2.2rem 0 0; padding: 1.2rem 1.4rem 1.3rem; background: rgb(var(--ink)); color: rgb(var(--dark)); font-size: 1.08rem; box-shadow: 7px 7px 0 rgb(var(--dark) / .8); rotate: .5deg; }
.direction__k { display: block; font: 600 .68rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .6rem; }
.bays { display: grid; gap: 2.4rem 1.6rem; margin: 4.5rem 0 3.5rem; }
.bay {
  position: relative; padding: 1.5rem 1.5rem 3.6rem; background: rgb(var(--dark) / .42);
  border-block: 1.5px solid rgb(var(--ink) / .75);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.bay.live { transition: transform .06s linear; }
/* scaffold poles run past the corners */
.bay::before, .bay::after { content: ""; position: absolute; top: -18px; bottom: -18px; width: 0; border-left: 3px solid rgb(var(--ink) / .9); }
.bay::before { left: 0; } .bay::after { right: 0; }
.bay__glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgb(var(--acc) / .28), transparent 70%); }
.bay.live .bay__glare { opacity: 1; }
.bay__n { color: rgb(var(--acc)); margin: 0 0 .7rem; }
.bay h3 { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.02 var(--f-display); letter-spacing: -.03em; margin: 0 0 .7rem; transform: translateZ(26px); }
.bay p:last-of-type { margin: 0; font-size: 1.05rem; }
.stamp { position: absolute; right: 1.1rem; bottom: .95rem; font: 600 .62rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--acc)); border: 1.5px solid currentColor; padding: .45em .65em; rotate: -4deg; transform: translateZ(36px); }
.bay:nth-child(2n) .stamp { rotate: 3deg; }
.bay p { font-size: 1.05rem; }
/* the Loom is the one instrument that exists: solid, lit, stamped green */
.bay--live { background: rgb(var(--dark) / .62); border-block-color: #7ef0cf; box-shadow: 0 0 0 1px rgb(126 240 207 / .25), 0 18px 50px rgb(0 0 0 / .35); }
.bay--live .bay__n { color: #7ef0cf; }
.stamp--live { color: #7ef0cf; }
.stamp--soon { color: rgb(var(--ink) / .7); border-style: dashed; }
.ai-line { max-width: 46rem; margin: 0 0 3.5rem; font-size: 1.15rem; }
.ai-line strong { color: rgb(var(--acc)); }
@media (min-width: 820px) {
  .bays { grid-template-columns: repeat(12, 1fr); }
  .bay:nth-child(1) { grid-column: 1 / 13; }
  .bay:nth-child(2) { grid-column: 1 / 7; margin-top: 1.2rem; }
  .bay:nth-child(3) { grid-column: 7 / 13; margin-top: 3.2rem; }
  .bay:nth-child(4) { grid-column: 2 / 8; }
  .bay:nth-child(5) { grid-column: 8 / 13; margin-top: -1.2rem; }
}

.note { max-width: 44rem; border-bottom: 1.5px dashed rgb(var(--ink) / .6); margin-bottom: 4rem; }
.note summary { cursor: pointer; font: 700 1.25rem/1.2 var(--f-display); letter-spacing: -.015em; padding: 1rem 2rem 1rem 0; list-style: none; position: relative; }
.note summary::-webkit-details-marker { display: none; }
.note summary::after { content: "+"; position: absolute; right: .2rem; top: .7rem; font: 400 1.6rem/1 var(--f-mono); color: rgb(var(--acc)); transition: rotate .25s; }
.note[open] summary::after { rotate: 45deg; }
.note p { padding-bottom: .4rem; }

.notice { position: relative; max-width: 50rem; margin-left: auto; background: rgb(var(--dark) / .78); border: 2px solid rgb(var(--acc)); padding: 0 1.5rem 1.4rem; }
.notice__tape { height: 16px; margin: 0 -1.5rem 1.3rem; background: repeating-linear-gradient(-45deg, rgb(var(--acc)) 0 14px, rgb(var(--dark)) 14px 28px); }
.notice h3 { font: 800 1.7rem/1 var(--f-display); letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 1.1rem; }
.notice__cols { display: grid; gap: 1.2rem 2.5rem; }
@media (min-width: 640px) { .notice__cols { grid-template-columns: 1fr 1fr; } }
.notice__h { color: rgb(var(--acc)); margin: 0 0 .5rem; }
.notice ul { margin: 0; padding: 0; list-style: none; font-size: 1.02rem; }
.notice li { padding: .4em 0 .4em 1.5em; border-top: 1px solid rgb(var(--ink) / .2); position: relative; }
.notice li::before { content: ""; position: absolute; left: .15em; top: .95em; width: .62em; height: .62em; border: 1.5px solid rgb(var(--acc)); }
.notice__cols > div:first-child li::before { background: rgb(var(--acc)); }
.notice__hand { position: absolute; right: 1rem; bottom: -2.4rem; margin: 0; rotate: -3deg; }
.research-cta { margin-top: 4.5rem; font-size: 1.2rem; }

/* ---------- founder ---------- */
.founder { padding-block: 7rem; }
.founder .wrap { position: relative; }
.letter {
  position: relative; max-width: 41rem; margin-left: clamp(0rem, 9vw, 9rem); padding: clamp(1.8rem, 5vw, 3.4rem) clamp(1.3rem, 5vw, 3.6rem) 2.2rem;
  background: rgb(var(--ink)); color: rgb(var(--dark)); rotate: -.7deg;
  box-shadow: 10px 12px 0 rgb(var(--dark) / .55);
  background-image: repeating-linear-gradient(transparent 0 calc(1.72em - 1px), rgb(var(--dark) / .07) calc(1.72em - 1px) 1.72em);
}
.letter__tape { position: absolute; left: 50%; top: -15px; width: 120px; height: 30px; margin-left: -60px; background: rgb(var(--acc) / .85); rotate: 2.5deg; }
.letter__h { font: 400 .72rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1.6rem; }
.letter__body { font-size: clamp(1.15rem, 1.9vw, 1.36rem); line-height: 1.5; }
.letter__body .w { opacity: .3; transition: opacity .3s; }
.letter__body .w.lit { opacity: 1; }
.letter__sign { font: 700 3rem/1 var(--f-hand); margin: 1.2rem 0 0; rotate: -4deg; transform-origin: 0 50%; }
.founder__aside { position: absolute; right: 0; top: 34%; text-align: center; rotate: 5deg; margin: 0; }
@media (max-width: 1040px) { .founder__aside { display: none; } }

/* ---------- researchers ---------- */
.researchers { padding-block: 6rem 7rem; }
.researchers__grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 960px) { .researchers__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; } .researchers__words { position: sticky; top: 3rem; } }
.desk { background: rgb(var(--dark) / .88); border: 2px solid rgb(var(--ink) / .85); padding: 1.3rem clamp(1rem, 3vw, 1.7rem) 1.6rem; box-shadow: 9px 9px 0 rgb(var(--dark) / .5); }
.desk__head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 .9rem; padding-bottom: .8rem; border-bottom: 1.5px dashed rgb(var(--ink) / .4); }
.desk__head span { color: rgb(var(--acc)); }
.desk__honest { font-size: .95rem; line-height: 1.45; color: rgb(var(--ink) / .8); margin-bottom: 1.4rem; }
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.chat li { max-width: 88%; animation: pop .35s cubic-bezier(.2,.9,.3,1.3) both; }
.chat .q { justify-self: start; }
.chat .q small { display: block; font: 400 .6rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--acc)); margin-bottom: .4rem; }
.chat .q p { margin: 0; font-size: 1.14rem; line-height: 1.4; }
.chat .a { justify-self: end; background: rgb(var(--ink)); color: rgb(var(--dark)); padding: .6rem .9rem; border-radius: 12px 12px 2px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.02rem; line-height: 1.4; }
.chat .a.skip { background: none; color: rgb(var(--ink) / .8); border: 1px dashed rgb(var(--ink) / .55); font-style: italic; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.chat__form { margin-top: 1.2rem; }
.chat__field input, .chat__field textarea {
  width: 100%; font: 400 1.1rem/1.4 var(--f-body); color: rgb(var(--ink)); background: rgb(var(--ink) / .07);
  border: 0; border-bottom: 2px solid rgb(var(--acc)); padding: .8rem .8rem; border-radius: 3px 3px 0 0; resize: vertical;
}
.chat__field input:focus, .chat__field textarea:focus { outline: none; background: rgb(var(--ink) / .14); box-shadow: 0 3px 0 rgb(var(--acc)); }
.chat__field small { display: block; margin-top: .45rem; font: 400 .64rem/1.4 var(--f-mono); color: rgb(var(--ink) / .65); }
.chat__err { min-height: 1.4em; margin: .4rem 0 .5rem; color: #ffb4a8; font-size: .98rem; }
.chat__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.chat__done { margin-top: 1.4rem; }
.chat__lbl { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; }
.chat__lbl span { color: rgb(var(--acc)); }
.chat__draft { margin: 0 0 1.2rem; padding: 1rem; background: rgb(var(--ink)); color: rgb(var(--dark)); font: 400 1rem/1.5 var(--f-body); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 19rem; overflow: auto; }
.chat__after { margin: 1.1rem 0 .4rem; font-size: .98rem; line-height: 1.45; }
.chat__addr { margin: 0; font-size: .98rem; overflow-wrap: anywhere; }

/* ---------- 03 top tier ---------- */
.ahead { padding-block: 8rem 0; }
.ahead > .wrap { position: relative; }
.ahead .stage b { -webkit-text-stroke-color: rgb(var(--gold)); }
.ahead .h2--big { color: rgb(var(--pearl)); text-shadow: 0 3px 0 rgb(var(--gold) / .55); position: relative; }
.knot { position: absolute; right: -2%; top: -3.5rem; width: clamp(150px, 27vw, 330px); height: auto; filter: drop-shadow(0 18px 30px rgb(40 8 0 / .45)); animation: floaty 7s ease-in-out infinite alternate; }
@keyframes floaty { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(4deg) translateY(-14px); } }
@media (max-width: 860px) { .knot { position: static; display: block; margin: 0 0 1.5rem auto; } }
.ahead .lede:first-child { background: rgb(var(--pearl)); color: rgb(var(--dark)); padding: 1.2rem 1.4rem; rotate: -.5deg; box-shadow: 7px 7px 0 rgb(var(--gold)); }
.ahead .btn--big { background: var(--gold-grad); }
.contact > p:not(.contact__mail) { font-size: 1.25rem; text-shadow: 0 1px 8px rgb(var(--bg)); }
.foot__word { width: min(440px, 78%); height: auto; margin: .4rem 0 1.2rem; }
.ahead__cols { display: grid; gap: 1rem 3rem; margin-bottom: 3.5rem; }
@media (min-width: 860px) { .ahead__cols { grid-template-columns: 1.15fr 1fr; } .lede--plain { margin-top: 3.2rem; } }
.lede--plain { background: rgb(var(--dark) / .82); padding: 1.1rem 1.3rem; font-size: 1.15rem; rotate: .5deg; }
.early { display: grid; gap: 1.4rem 2rem; align-items: center; padding: 2rem 0; border-block: 1.5px dashed rgb(var(--ink) / .7); }
@media (min-width: 760px) { .early { grid-template-columns: auto 1fr; } }
.early .btn { justify-self: start; }
.early__note { margin: 0; max-width: 31em; font-size: 1.05rem; background: rgb(var(--dark) / .82); padding: .9rem 1.1rem; }
.contact { padding: 6rem 0 5rem; }
.contact__mail { font: 800 clamp(1.3rem, 5.2vw, 3.6rem)/1.05 var(--f-display); letter-spacing: -.04em; margin: 1.4rem 0 1.6rem; overflow-wrap: anywhere; }
.contact__mail a { display: inline-block; text-decoration-thickness: 3px; transform: translate(var(--tx, 0px), var(--ty, 0px)); transition: transform .25s cubic-bezier(.2,.9,.3,1.4); }
.foot { padding: 1.8rem clamp(1rem, 3vw, 2rem) 2rem; margin-bottom: 2rem; background: rgb(var(--dark) / .9); border-top: 3px solid rgb(var(--gold)); font-size: .98rem; }
.foot p { margin: 0 0 .4rem; }
.foot__fine { font: 400 .64rem/1.6 var(--f-mono); color: rgb(var(--ink) / .82); max-width: 62em; }

/* ---------- rail ---------- */
.rail { display: none; }
@media (min-width: 1340px) {
  .js .rail { display: block; position: fixed; right: 22px; top: 50%; translate: 0 -50%; z-index: 5; width: 96px; text-align: center; pointer-events: none; font: 400 .56rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
  .rail__top em { font-style: normal; color: rgb(var(--acc)); }
  .rail__knot { width: 40px; height: 40px; margin: 0 auto .4rem; }
  .rail__tower { width: 44px; margin: .5rem auto; position: relative; }
  .rail__tower svg { overflow: visible; }
  .rail .lv { fill: none; stroke: rgb(var(--ink) / .5); stroke-width: 1.2; stroke-dasharray: 3 3; transition: stroke .3s, fill .3s; }
  .rail .lv.real { stroke-dasharray: none; stroke: rgb(var(--ink)); stroke-width: 1.8; }
  .rail .lv.passed { stroke: rgb(var(--acc)); }
  .rail .lv.real.passed { fill: rgb(var(--acc) / .25); }
  .rail .bead { fill: rgb(var(--acc)); }
  .rail__here { position: absolute; right: 74px; bottom: 4.6rem; white-space: nowrap; font: 700 1.15rem/1 var(--f-hand); text-transform: none; letter-spacing: 0; color: rgb(var(--acc)); rotate: -6deg; }
  .rail__here::after { content: " \2192"; }
  .rail__stage { display: block; margin-top: .4rem; color: rgb(var(--ink) / .85); }
}

/* ---------- exit line, toast, bursts ---------- */
.exit { position: fixed; left: 50%; top: 0; z-index: 45; translate: -50% 0; width: min(46rem, 100% - 1.5rem); display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem .85rem 1.3rem; background: rgb(var(--acc)); color: rgb(var(--dark)); border: 2px solid rgb(var(--dark)); border-top: 0; box-shadow: 6px 6px 0 rgb(var(--dark) / .85); animation: drop .5s cubic-bezier(.2,.9,.3,1.25) both; }
.exit[hidden] { display: none; }
.exit p { margin: 0; flex: 1; font: 400 1.05rem/1.3 var(--f-display); }
.exit a { color: inherit; text-decoration-color: currentColor; white-space: nowrap; }
.exit a:hover { color: inherit; }
.exit button { font: 400 1.6rem/1 var(--f-mono); background: none; border: 0; cursor: pointer; color: inherit; width: 44px; height: 44px; }
.exit :focus-visible { outline-color: rgb(var(--dark)); }
@keyframes drop { from { transform: translateY(-110%); } }
.toast { position: fixed; left: 50%; bottom: 1.4rem; z-index: 46; translate: -50% 0; max-width: calc(100% - 2rem); padding: .7rem 1.1rem; background: rgb(var(--dark)); color: rgb(var(--ink)); border: 1.5px solid rgb(var(--acc)); font: 400 .72rem/1.4 var(--f-mono); opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s; pointer-events: none; }
.toast.on { opacity: 1; transform: none; }
.dot { position: fixed; z-index: 47; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; pointer-events: none; }
.dot.sq { border-radius: 0; rotate: 45deg; }

/* ---------- motion off: everything readable, nothing moving ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .ask { opacity: 1; transform: none; }
  .step { opacity: 1; }
  .letter__body .w { opacity: 1; }
  .spot { display: none; }
}

@media print {
  #lattice, .spot, .grain, .rail, .exit, .toast, .prog { display: none !important; }
  body { background: #fff; color: #000; }
}