/* Cinematic scroll view of notebook 08. The canvas is the stage; chapters scroll over it. */
:root{color-scheme:dark;--bg:#05070f;--ink:#e8efff;--muted:#8a9bb8;--line:#1d2946;--blue:#8fb3ff;--mint:#7fe6d3;--gold:#ffcf7a;--coral:#ff8a7a;--violet:#b79bff;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;font-family:var(--sans);background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);overflow-x:hidden}
button,input,select{font:inherit;color:inherit}button{cursor:pointer}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
#stage{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;touch-action:pan-y}

.progress{position:fixed;top:0;left:0;height:2px;z-index:6;background:linear-gradient(90deg,var(--mint),var(--blue),var(--gold));width:0;box-shadow:0 0 12px #7fe6d399}
.bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:14px 22px 22px;background:linear-gradient(#05070f 30%,#05070f00);font-size:12px}
.bar>a{color:var(--muted)}.bar>a:hover{color:var(--ink);text-decoration:none}
.brand{font-weight:750;letter-spacing:.01em}.brand em{font-style:normal;font-weight:500;color:var(--gold)}
.pills{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:999px;background:#0a1122cc;backdrop-filter:blur(10px)}
.pills button{background:none;border:0;border-radius:999px;padding:6px 12px;color:var(--muted);font-size:12px}
.pills button:hover{color:var(--ink)}.pills button[aria-pressed=true]{background:#1a2a4f;color:var(--ink);box-shadow:inset 0 0 0 1px #3b5690}
.opt{display:flex;align-items:center;gap:6px;color:#b3c2da}.opt input{accent-color:var(--mint);width:15px;height:15px}
.bar select,.card select{font-size:11px;background:#0a1122;border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.lang{margin-left:auto;display:flex;gap:12px}.lang a{color:var(--muted)}.lang a[aria-current]{color:var(--ink);font-weight:700}

.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:5;display:grid;gap:13px}
.rail button{position:relative;width:16px;height:16px;padding:0;border-radius:50%;border:1px solid #3a4c74;background:#0a1122;transition:transform .25s,background .25s}
.rail button::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.rail button span{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:10px;letter-spacing:.08em;color:var(--muted);opacity:0;transition:opacity .2s;pointer-events:none;padding:4px 9px;border-radius:999px;background:#070c18e6;border:1px solid #22314f;backdrop-filter:blur(6px)}
.rail button:hover span,.rail button:focus-visible span{opacity:1}
.rail button[aria-current=true] span{opacity:0}.rail:hover button[aria-current=true] span{opacity:1}
.rail button.seen{background:#27406e}.rail button[aria-current=true]{background:var(--gold);border-color:var(--gold);transform:scale(1.35);box-shadow:0 0 14px #ffcf7a99}
.rail button[aria-current=true] span{color:var(--gold)}

.story{position:relative;z-index:2;pointer-events:none}
.chapter{min-height:135vh;padding:0 0 0 max(24px,4vw);display:flex;align-items:flex-start}
.card{pointer-events:auto;margin-top:36vh;width:min(410px,34vw);padding:26px 26px 22px;border:1px solid #1c2a4a;border-radius:18px;background:linear-gradient(160deg,#0d1731ee,#070b18ee);backdrop-filter:blur(14px);box-shadow:0 30px 80px #000a,inset 0 1px 0 #ffffff0d}
.hero .card{margin-top:22vh;width:min(470px,38vw);background:none;border-color:transparent;box-shadow:none;backdrop-filter:none;padding-left:0}
.eyebrow{display:block;font:600 10px/1.3 var(--mono);letter-spacing:.16em;color:var(--mint)}
h1{font-size:clamp(42px,5.2vw,78px);line-height:.95;letter-spacing:-.05em;margin:16px 0 18px;background:linear-gradient(120deg,#fff 20%,#b9ccff 55%,#ffcf7a);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(26px,2.5vw,36px);line-height:1.06;letter-spacing:-.035em;margin:12px 0 10px}
.card p{font-size:14px;line-height:1.68;color:#b6c4dc;margin:10px 0}
.card .fine{font-size:12px;color:var(--muted);line-height:1.6}
.card b.k{color:var(--gold);font-weight:650}.card b.m{color:var(--mint);font-weight:650}
.scroll-hint{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font:600 10px var(--mono);letter-spacing:.16em;color:var(--muted)}
.scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--mint),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.stat{display:flex;gap:18px;margin-top:14px}.stat div{font-size:11px;color:var(--muted)}.stat strong{display:block;font:650 26px/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.formula{font:12px/1.6 var(--mono);color:#d7e3ff;background:#0a1226;border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin:12px 0;overflow-x:auto;white-space:nowrap}
.knob{display:grid;gap:8px;margin:16px 0 6px;font-size:12px;color:#c9d6ec}.knob span{display:flex;justify-content:space-between}
.knob output{color:var(--gold);font:650 14px var(--mono)}.knob input{width:100%;accent-color:var(--gold)}
.seg{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:#0a1122;margin:12px 8px 6px 0}
.seg button{background:none;border:0;border-radius:7px;padding:7px 11px;font-size:12px;color:var(--muted)}.seg button[aria-pressed=true]{background:#1a2a4f;color:var(--ink)}
.ghost{background:#0f1a33;border:1px solid #2c3f68;border-radius:9px;padding:7px 12px;font-size:12px}.ghost:hover{border-color:var(--blue)}.ghost:disabled{opacity:.35;cursor:default}
.cta{background:var(--gold);color:#241a05;border:0;border-radius:10px;padding:10px 15px;font-weight:700;font-size:13px;box-shadow:0 8px 30px #ffcf7a33}.cta:hover{filter:brightness(1.08)}
.evidence{border-left:2px solid var(--gold);padding-left:12px;color:#e9dcc0!important;min-height:3em}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;align-items:center}
.outro{min-height:80vh;display:flex;justify-content:center;align-items:center;padding:12vh 20px;position:relative;z-index:2}
.outro .card{margin:0;width:min(760px,100%);pointer-events:auto}
.outro ul{font-size:12px;line-height:1.9;color:var(--muted);padding-left:18px}
.tip{position:fixed;z-index:7;pointer-events:none;max-width:min(260px,calc(100vw - 24px));padding:7px 10px;border-radius:8px;background:#0b1328f2;border:1px solid #33487a;font:11px/1.5 var(--mono);color:#dfe8ff;box-shadow:0 10px 30px #0009;transform:translate(12px,12px);overflow-wrap:anywhere}

@media(max-width:899px){
  .bar{padding:8px 12px 12px;gap:4px 8px;font-size:12px;background:linear-gradient(#05070ff5 80%,#05070fdd);border-bottom:1px solid #1d2946}.brand{display:none}.pills button{padding:8px 9px;font-size:12px;min-height:40px}
  .bar>a,.bar .lang a,.bar .opt{min-height:40px;display:flex;align-items:center}.bar select{min-height:40px;font-size:12px;max-width:100%}.bar .opt{font-size:12px}.lang{gap:9px}
  .rail{display:none}
  .chapter{padding:0 12px;justify-content:center;min-height:120vh}
  .card{width:100%;max-width:560px;margin-top:var(--stage-bottom,64vh);padding:18px 18px 16px}
  .hero .card{margin-top:var(--stage-bottom,64vh);width:100%;padding:18px;background:linear-gradient(160deg,#0d1731ee,#070b18ee);border-color:#1c2a4a}
  h1{font-size:44px}h2{font-size:26px}.card p{font-size:14px}.card .fine{font-size:12px}.card button,.card .cta{min-height:44px}.knob input{min-height:30px}
  .seg{display:flex;max-width:100%;width:fit-content}.seg button{flex:1}.scroll-hint{font-size:9px;letter-spacing:.08em;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}