:root{--sys-bg:#06060b;--sys-fg:#e8e4dd;--sys-accent:#ff6b35;--sys-muted:#444458}
html:has(body.home){scrollbar-width:none}
#scroll-track{height:6000vh;width:100%}
/* #fv spans the LARGE viewport so iOS address-bar collapse never resizes the canvas */
#fv{z-index:0;pointer-events:none;position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;overflow:hidden}
#probe{position:fixed;top:0;left:0;width:1px;height:100vh;height:100lvh;visibility:hidden;pointer-events:none}
#fv canvas{position:absolute;inset:0;width:100%;height:100%}
#ov{pointer-events:none}
/* custom scroll rail: progress + one tick per stage (click / drag to seek) */
#rail{position:fixed;right:10px;top:11vh;bottom:11vh;width:26px;z-index:60;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
#rail::before{content:'';position:absolute;right:12px;top:0;bottom:0;width:1px;background:#262636}
#railfill{position:absolute;right:12px;top:0;width:1px;height:0;background:linear-gradient(180deg,#ff6b35,#ffb366,#6aa5ff)}
#railthumb{position:absolute;right:9px;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--sys-fg);box-shadow:0 0 8px rgba(255,160,100,.7);pointer-events:none}
.tick{position:absolute;right:0;width:26px;height:20px;margin-top:-10px}
.tick i{position:absolute;right:12px;top:10px;width:7px;height:1px;background:#4a4a62;transition:background .3s,width .3s}
.tick.done i{background:#8a7a70}.tick.on i{background:var(--sys-accent);width:11px}
.tick b{position:absolute;right:34px;top:4px;font:400 .56rem 'DM Mono',monospace;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:var(--sys-fg);opacity:0;transition:opacity .2s;pointer-events:none;text-shadow:0 0 6px var(--sys-bg)}
.tick:hover b{opacity:.85}.tick:hover i{background:var(--sys-fg);width:11px}
#ctrl{position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:.5rem;align-items:center}
#ctrl button{background:rgba(10,10,18,.55);color:var(--sys-fg);border:1px solid #2e2e42;border-radius:999px;height:2rem;min-width:2rem;padding:0 .7rem;font:400 .62rem 'DM Mono',monospace;letter-spacing:.18em;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:border-color .2s,color .2s}
#ctrl button:hover{border-color:var(--sys-accent);color:#fff}
#ctrl #play{width:2.6rem;font-size:.8rem;letter-spacing:0}
#ctrl.playing #play{border-color:var(--sys-accent)}
#blabel{position:fixed;top:2.5rem;right:3rem;z-index:30;font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.5em;text-transform:uppercase;color:var(--sys-muted);text-align:right}
#shint{position:fixed;bottom:4.4rem;left:50%;transform:translateX(-50%);z-index:30;font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sys-muted);transition:opacity .8s}
#readout{position:fixed;bottom:2.5rem;right:3.6rem;z-index:30;font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.15em;color:rgba(115,165,255,0.7);opacity:0;transition:opacity .6s}
.narrative{position:fixed;z-index:20;pointer-events:none;font-family:'Instrument Serif',Georgia,serif;max-width:420px;opacity:0;transition:opacity 1.2s ease-in-out;left:3rem;top:50%;transform:translateY(-50%)}
.narrative .title{font-size:1.8rem;font-weight:600;margin-bottom:.6rem;color:var(--sys-fg)}
.narrative .body{font-size:1.05rem;line-height:1.5;color:rgba(232,228,221,.7)}
.narrative.show{opacity:1}
@media(max-width:700px){.narrative{left:1.4rem;right:2.6rem;top:auto;bottom:5.5rem;transform:none;max-width:none}.narrative .title{font-size:1.35rem}.narrative .body{font-size:.95rem}#blabel{right:2.6rem;top:1.6rem}#readout{right:2.6rem;bottom:4.6rem}#rail{right:2px;width:24px}}
html:has(body.home)::-webkit-scrollbar{display:none}
#dev{position:fixed;left:8px;top:8px;z-index:100;width:250px;max-height:96vh;overflow:auto;background:rgba(8,8,14,.88);border:1px solid #2a2a3a;border-radius:6px;padding:8px 10px;font:10px/1.35 'DM Mono',monospace;color:#bbb}
#dev h4{font-weight:500;color:#ff9a6b;margin:6px 0 3px;letter-spacing:.15em;text-transform:uppercase;font-size:9px}
#dev label{display:flex;align-items:center;gap:6px;margin:2px 0}
#dev label span{width:84px;flex:none;overflow:hidden;text-overflow:ellipsis}
#dev input[type=range]{flex:1;min-width:0;height:2px}
#dev output{width:34px;text-align:right;color:#7aa8ff}
#dev button{background:#1a1a28;color:#ccc;border:1px solid #333;border-radius:3px;padding:2px 5px;margin:1px;font:9px 'DM Mono',monospace;cursor:pointer}
#dev button:hover{border-color:#ff6b35;color:#fff}

/* site integration */
.narrative .portal{display:inline-block;margin-top:1.1rem;pointer-events:auto;font:400 .68rem 'DM Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--sys-fg);text-decoration:none;border:1px solid var(--sys-accent);padding:.65rem 1.1rem;border-radius:999px;background:rgba(10,10,18,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .2s,color .2s}
.narrative .portal:hover{background:var(--sys-accent);color:#06060b}
body.amb #rail,body.amb #ctrl,body.amb #shint,body.amb #readout,body.amb .narrative,body.amb #scroll-track{display:none}