:root {
	--paper:#e9e6df; --paper-2:#dedad1; --ink:#0e0e0c; --ink-2:#5b5952; --ink-3:#8f8c84;
	--rule:#0e0e0c14; --signal:#ff4d00; --lcd-1:#dae8e1; --lcd-2:#c6dfd2; --lcd-ink:#1d2921;
	--display:"Bahnschrift","DIN Condensed","DIN Alternate","Arial Narrow","Helvetica Neue",sans-serif;
	--sans:"Microsoft YaHei UI","PingFang SC","Noto Sans SC","Hiragino Sans GB",system-ui,sans-serif;
	--mono:"Cascadia Mono","SF Mono","JetBrains Mono",Consolas,ui-monospace,monospace;
	--ease:cubic-bezier(.16,1,.3,1);
	--gutter:clamp(16px,3.2vw,48px);
	color-scheme:light;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
html.snapping { scroll-snap-type:y mandatory; }
.snap { position:absolute; left:0; width:1px; height:100vh; height:100svh; pointer-events:none; scroll-snap-align:start; scroll-snap-stop:always; }
html.snapping .numbers, html.snapping .finale { scroll-snap-align:start; }
html.snapping .foot { scroll-snap-align:end; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
::selection { background:var(--signal); color:var(--paper); }
:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }
.skip { position:fixed; left:16px; top:-60px; z-index:120; padding:8px 14px; background:var(--ink); color:var(--paper); }
.skip:focus { top:12px; }
.mono { font-family:var(--mono); }
.kicker { display:flex; align-items:center; gap:10px; margin:0; font:500 11px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.sq { width:8px; height:8px; background:var(--signal); flex:none; }

/* Drafting rules + paper grain */
.rules { position:fixed; inset:0 var(--gutter); z-index:0; pointer-events:none; display:grid; grid-template-columns:repeat(4,1fr); }
.rules i { border-left:1px solid var(--rule); }
.rules i:last-child { border-right:1px solid var(--rule); }
.rules::before { content:""; border-left:1px solid var(--rule); grid-row:1; grid-column:1; }
.grain { position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.09;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Cursor follower (fine pointers only) */
.cursor { position:fixed; left:0; top:0; z-index:110; pointer-events:none; mix-blend-mode:difference; color:#fff; opacity:0; transition:opacity .3s; }
.cursor .ring { position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid #fff; border-radius:50%; transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s; }
.cursor .coord { position:absolute; left:24px; top:14px; font:500 10px/1 var(--mono); letter-spacing:.08em; white-space:nowrap; }
.cursor.on { opacity:1; }
.cursor.hot .ring { width:64px; height:64px; margin:-32px 0 0 -32px; background:#fff; }

/* Loader */
.loader { position:fixed; inset:0; z-index:100; background:var(--ink); color:var(--paper); display:grid; grid-template-rows:auto 1fr auto; padding:var(--gutter);
	clip-path:inset(0 0 0 0); transition:clip-path 1s var(--ease) .1s; }
.loader-label { font:500 11px/1 var(--mono); letter-spacing:.14em; color:var(--ink-3); }
.loader-num { align-self:end; font:300 clamp(96px,22vw,320px)/.8 var(--display); font-stretch:75%; font-variation-settings:"wdth" 75; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.loader-bar { height:2px; margin-top:24px; background:#ffffff1a; }
.loader-bar i { display:block; height:100%; width:0; background:var(--signal); }
body:not(.loading) .loader { clip-path:inset(0 0 100% 0); pointer-events:none; }

/* Header */
.bar { position:fixed; inset:0 0 auto; z-index:50; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:18px var(--gutter);
	mix-blend-mode:difference; color:#fff; }
.brand { display:flex; align-items:baseline; gap:10px; }
.brand b { font:700 22px/1 var(--display); letter-spacing:-.01em; }
.brand span { font:500 10px/1 var(--mono); letter-spacing:.2em; }
.bar-mid { margin:0; font:500 11px/1 var(--mono); letter-spacing:.08em; }
.bar-end { display:flex; justify-content:flex-end; align-items:center; gap:24px; font:500 11px/1 var(--mono); letter-spacing:.08em; }
.bar-cta { padding:9px 16px; border:1px solid #fff; border-radius:99px; transition:background .3s, color .3s; }
.bar-cta:hover { background:#fff; color:#000; }

/* Scenes */
main { position:relative; z-index:1; }
.scene { position:relative; }
.pin { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.hero { height:340vh; }
.stack { height:300vh; }

/* Hero */
.giant { position:absolute; left:50%; top:52%; translate:-50% -50%; z-index:0; font:700 min(58vw,96vh)/.78 var(--display); font-stretch:75%; font-variation-settings:"wdth" 75;
	letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.2px #0e0e0c38; white-space:nowrap; pointer-events:none; user-select:none; }
.hero-text { position:absolute; left:var(--gutter); top:clamp(96px,15vh,150px); z-index:3; max-width:min(36vw,520px); }
h1 { margin:22px 0 0; font-size:clamp(34px,4.3vw,66px); line-height:1.1; letter-spacing:-.03em; font-weight:800; }
h1 em, h2 em { font-style:normal; color:var(--signal); }
.hero-note { position:absolute; left:var(--gutter); bottom:clamp(28px,6vh,64px); z-index:3; margin:0; max-width:24em; color:var(--ink-2); font-size:14px; line-height:1.8; }
.device-wrap { position:absolute; left:50%; top:54%; translate:-50% -50%; z-index:2; height:min(80vh,760px); aspect-ratio:344/720; }
.device { position:absolute; inset:0; transform-origin:50.15% 22.08%; will-change:transform; }
.device #body { display:block; width:100%; height:100%; filter:drop-shadow(0 40px 40px #0e0e0c40) drop-shadow(0 8px 10px #0e0e0c30); }
/* Same window as skin.blank in frontend/skin.js. */
.lcd { position:absolute; left:9.884%; top:14.306%; width:80.523%; height:15.556%; border-radius:4.5% / 11%; box-shadow:inset 0 2px 6px #0000003a; }
.callouts { position:absolute; inset:0; pointer-events:none; }
.callout { position:absolute; left:var(--x); top:var(--y); display:flex; flex-direction:column; gap:4px; width:max-content; padding-top:10px;
	font:500 11px/1.3 var(--mono); letter-spacing:.04em; color:var(--ink-2); --len:clamp(70px,12vw,190px); }
.callout b { font:700 21px/1 var(--display); letter-spacing:-.01em; color:var(--ink); }
.callout::before { content:""; position:absolute; top:-4px; width:9px; height:9px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px #ff4d0033; }
.callout::after { content:""; position:absolute; top:0; height:1px; width:var(--len); background:var(--ink); transform:scaleX(0); transition:transform 1s var(--ease); transition-delay:calc(1.3s + var(--i) * .15s); }
.callout.right { margin-left:calc(var(--len) + 10px); }
.callout.right::before { left:calc(-1 * var(--len) - 14px); }
.callout.right::after { right:100%; margin-right:10px; transform-origin:left; }
.callout.left { translate:calc(-100% - var(--len) - 10px) 0; text-align:right; align-items:flex-end; }
.callout.left::before { right:calc(-1 * var(--len) - 14px); }
.callout.left::after { left:100%; margin-left:10px; transform-origin:right; }
.callout { opacity:0; transition:opacity .6s calc(1.5s + var(--i) * .15s); }
body.ready .callout { opacity:var(--fade,1); }
body.ready .callout::after { transform:scaleX(1); }

.orbit { position:absolute; right:var(--gutter); bottom:clamp(24px,5vh,56px); z-index:4; width:132px; height:132px; display:grid; place-items:center; }
.orbit svg { position:absolute; inset:0; width:100%; height:100%; animation:spin 18s linear infinite; }
.orbit text { font:600 9.4px var(--mono); letter-spacing:.16em; fill:var(--ink); }
.orbit-core { width:62px; height:62px; border-radius:50%; background:var(--signal); color:var(--paper); display:grid; place-items:center; font-size:24px;
	transition:transform .5s var(--ease), background .3s; }
.orbit:hover .orbit-core { transform:scale(1.14) rotate(-45deg); background:var(--ink); }
@keyframes spin { to { transform:rotate(360deg); } }
.scroll-cue { position:absolute; left:50%; bottom:clamp(20px,3.5vh,36px); translate:-50% 0; z-index:3; margin:0; display:flex; align-items:center; gap:10px;
	font:500 10px/1 var(--mono); letter-spacing:.14em; color:var(--ink-2); }
.scroll-cue span { width:1px; height:28px; background:linear-gradient(var(--ink) 50%,transparent 50%) 0 0/1px 200%; animation:cue 1.6s linear infinite; }
@keyframes cue { to { background-position:0 -56px; } }

.screen { position:absolute; inset:0; z-index:6; opacity:0; visibility:hidden; background:linear-gradient(var(--lcd-1),var(--lcd-2)); }
.screen.on { visibility:visible; }
.screen canvas { position:absolute; inset:0; width:100%; height:100%; }
.screen-caption { position:absolute; left:var(--gutter); bottom:clamp(28px,7vh,72px); color:var(--lcd-ink); }
.screen-caption .mono { margin:0 0 14px; font-size:11px; letter-spacing:.14em; }
.screen-line { margin:0; font-size:clamp(28px,3.6vw,54px); font-weight:800; line-height:1.12; letter-spacing:-.03em; }
.screen-caption > * { opacity:var(--cap,0); transform:translateY(calc((1 - var(--cap,0)) * 24px)); }

/* Loading choreography for the hero */
.hero-text, .hero-note, .orbit, .scroll-cue { transition:opacity 1s var(--ease), transform 1.2s var(--ease); }
body.loading .hero-text, body.loading .hero-note, body.loading .orbit, body.loading .scroll-cue { opacity:0; transform:translateY(30px); }
.hero-text { transition-delay:.35s; } .hero-note { transition-delay:.55s; } .orbit { transition-delay:.7s; } .scroll-cue { transition-delay:.9s; }
.giant { transition:opacity 1.6s var(--ease) .2s; }
body.loading .giant { opacity:0; }
.device-wrap { transition:opacity 1.4s var(--ease) .25s, translate 1.6s var(--ease) .25s; }
body.loading .device-wrap { opacity:0; translate:-50% -40%; }
body.settled .callout, body.settled .hero-text, body.settled .hero-note, body.settled .orbit, body.settled .scroll-cue, body.settled .giant { transition:none; }

/* Stack */
.stack .pin { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:var(--gutter); padding:0 var(--gutter); }
.stack-copy { position:relative; z-index:2; padding-top:40px; }
h2 { margin:20px 0 0; font-size:clamp(32px,4vw,60px); line-height:1.08; letter-spacing:-.03em; font-weight:800; }
.layers { list-style:none; margin:clamp(28px,5vh,56px) 0 0; padding:0; border-top:1px solid var(--ink); }
.layers li { display:grid; grid-template-columns:44px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid #0e0e0c26; opacity:.32; transition:opacity .5s var(--ease); }
.layers .n { font:500 11px/1.9 var(--mono); color:var(--ink-2); }
.layers h3 { margin:0; font:700 22px/1.2 var(--display); letter-spacing:-.01em; }
.layers p { margin:0; max-height:0; overflow:hidden; color:var(--ink-2); font-size:14px; transition:max-height .6s var(--ease), margin .6s var(--ease); }
.layers li.on { opacity:1; }
.layers li.on .n { color:var(--signal); }
.layers li.on p { max-height:5em; margin-top:6px; }
.iso-stage { position:relative; height:100%; display:grid; place-items:center; perspective:2400px; }
.iso { --s:min(30vw,52vh,400px); --sep:0; position:relative; width:var(--s); height:var(--s); transform:rotateX(57deg) rotateZ(-42deg) translateZ(calc(var(--s) * -0.4)); transform-style:preserve-3d; }
.plate { position:absolute; inset:0; background:var(--paper); border:1px solid var(--ink);
	transform:translateZ(calc(var(--k) * var(--sep) * var(--s) * .3)); box-shadow:12px 12px 0 -1px #0e0e0c1c; transition:border-color .4s, box-shadow .4s; }
.plate:nth-child(1) { --k:0; } .plate:nth-child(2) { --k:1; } .plate:nth-child(3) { --k:2; } .plate:nth-child(4) { --k:3; }
.plate.on { border-color:var(--signal); box-shadow:12px 12px 0 -1px #ff4d0033, 0 0 0 1px var(--signal); }
.tag { position:absolute; left:10px; top:8px; font:600 10px/1 var(--mono); letter-spacing:.12em; color:var(--ink-2); }
.plate.on .tag { color:var(--signal); }
.bits { position:absolute; inset:18%; opacity:.85;
	background:linear-gradient(90deg,var(--paper) 2px,transparent 2px) 0 0/9px 9px, linear-gradient(var(--paper) 2px,transparent 2px) 0 0/9px 9px, var(--ink); }
.chip { position:absolute; inset:30%; background:var(--ink); color:var(--paper); display:grid; place-items:center; font:700 clamp(14px,1.6vw,20px)/1 var(--display); }
.chip::before { content:""; position:absolute; inset:-12%;
	background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 10px) 50% 0/76% 9% no-repeat, repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 10px) 50% 100%/76% 9% no-repeat,
		repeating-linear-gradient(0deg,var(--ink) 0 3px,transparent 3px 10px) 0 50%/9% 76% no-repeat, repeating-linear-gradient(0deg,var(--ink) 0 3px,transparent 3px 10px) 100% 50%/9% 76% no-repeat; }
.wasm { position:absolute; inset:14%; display:grid; place-items:center; font:700 clamp(26px,3.6vw,48px)/1 var(--display); letter-spacing:-.02em;
	background:repeating-radial-gradient(circle,transparent 0 13px,#0e0e0c1f 13px 14px); }
.dots { position:absolute; inset:14% 10%; border-radius:6px; background:radial-gradient(circle,var(--lcd-ink) 1.5px,transparent 2px) 0 0/7px 7px, linear-gradient(var(--lcd-1),var(--lcd-2)); }

/* Numbers */
.numbers { position:relative; padding:clamp(96px,16vh,180px) var(--gutter) clamp(64px,10vh,120px); }
.numbers-head { display:flex; flex-direction:column; margin-bottom:clamp(40px,7vh,80px); }
.numbers ul { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.numbers li { position:relative; display:grid; grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr); align-items:end; gap:var(--gutter); padding:18px 0 22px;
	border-bottom:1px solid var(--ink); isolation:isolate; clip-path:inset(0 0 0 0); }
.numbers li::before { content:""; position:absolute; inset:0 calc(-1 * var(--gutter)); z-index:-1; background:var(--ink); transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease); }
.numbers li:hover::before { transform:scaleY(1); }
.numbers li:hover { color:var(--paper); }
.numbers li:hover .why { color:var(--ink-3); }
.numbers strong { font:300 clamp(72px,13vw,210px)/.82 var(--display); font-stretch:75%; font-variation-settings:"wdth" 75; letter-spacing:-.03em; font-variant-numeric:tabular-nums; transition:color .4s; }
.numbers li:hover strong { color:var(--signal); }
.numbers .what { font-size:clamp(16px,1.5vw,22px); font-weight:700; padding-bottom:6px; }
.numbers .why { font:500 12px/1.6 var(--mono); color:var(--ink-2); padding-bottom:8px; }
.reveal-row { clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease); }
.reveal-row.seen { clip-path:inset(0 0 0 0); }

/* Finale */
.finale { position:relative; min-height:100vh; min-height:100svh; background:var(--signal); color:var(--ink); display:grid; align-content:space-between; padding:clamp(96px,14vh,140px) var(--gutter) clamp(32px,6vh,64px); overflow:hidden; }
#field { position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; }
.finale > :not(canvas) { position:relative; pointer-events:none; }
.finale .kicker { color:var(--ink); }
.finale .sq { background:var(--ink); }
.bar.on-signal { mix-blend-mode:normal; color:var(--ink); }
.bar.on-signal .bar-cta { border-color:var(--ink); }
.bar.on-signal .bar-cta:hover { background:var(--ink); color:var(--signal); }
.cursor.on-signal { mix-blend-mode:normal; color:var(--ink); }
.cursor.on-signal .ring { border-color:var(--ink); }
.cursor.on-signal.hot .ring { background:var(--ink); }
.finale-link { pointer-events:auto !important; display:inline-flex; align-items:baseline; gap:.2em; justify-self:start; font-size:clamp(64px,14vw,240px); font-weight:900; line-height:1; letter-spacing:-.05em; }
.finale-link span { background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 .06em no-repeat; transition:background-size .7s var(--ease); }
.finale-link:hover span { background-size:100% .06em; }
.finale-link b { font-weight:300; transition:transform .6s var(--ease); }
.finale-link:hover b { transform:translateX(.18em); }
.finale-note { margin:0; font:500 11px/1.4 var(--mono); letter-spacing:.12em; }

.foot { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; padding:24px var(--gutter);
	background:var(--ink); color:var(--ink-3); font:11px/1.6 var(--mono); letter-spacing:.04em; }
.foot button { padding:7px 14px; border:1px solid #ffffff33; border-radius:99px; background:none; cursor:pointer; color:var(--paper); }
.foot button:hover { border-color:var(--paper); }

@media (max-width:900px) {
	.bar-mid, .clock { display:none; }
	.bar { grid-template-columns:1fr auto; }
	.callouts, .hero-note { display:none; }
	.hero-text { max-width:none; right:var(--gutter); top:88px; }
	h1 { font-size:clamp(30px,8.4vw,48px); }
	h1 br:first-child { display:none; }
	.device-wrap { top:auto; bottom:clamp(16px,3vh,32px); translate:-50% 0; height:min(60svh,580px); }
	body.loading .device-wrap { translate:-50% 10%; }
	.giant { top:62%; font-size:min(78vw,60vh); }
	.orbit { display:none; }
	.scroll-cue { display:none; }
	.stack .pin { grid-template-columns:1fr; grid-template-rows:auto 1fr; align-content:start; padding-top:84px; gap:0; }
	.stack-copy { padding-top:0; }
	.stack h2 { font-size:clamp(28px,7.6vw,40px); }
	.stack h2 br { display:none; }
	.layers { margin-top:18px; }
	.layers li { padding:10px 0; }
	.layers li:not(.on) { display:none; }
	.iso { --s:min(58vw,34svh,320px); }
	.numbers li { grid-template-columns:1fr 1fr; gap:4px 16px; }
	.numbers strong { grid-column:1 / -1; }
	.numbers .what, .numbers .why { padding-bottom:0; }
}
@media (hover:hover) and (pointer:fine) { .cursor { display:block; } }
@media not ((hover:hover) and (pointer:fine)) { .cursor { display:none; } }

/* Motion off: unpin everything and show final states. */
body.still *, body.still *::before, body.still *::after { animation:none !important; transition:none !important; }
body.still .hero, body.still .stack { height:auto; }
body.still .pin { position:relative; height:auto; min-height:100vh; min-height:100svh; }
body.still .hero .pin { min-height:max(100svh,640px); }
body.still .screen { display:none; }
body.still .stack .pin { padding-block:96px; }
body.still .layers li { opacity:1; }
body.still .layers li p { max-height:none; margin-top:6px; }
body.still .layers li:not(.on) { display:grid; }
body.still .reveal-row { clip-path:none; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }