:root{--bg:#05070d;--panel:rgba(16,20,32,.78);--line:rgba(255,255,255,.09);--txt:#e8ebf3;--mute:#9aa3b8;--acc:#f3c969;--water:#6fb6ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.55 Inter,system-ui,-apple-system,Segoe UI,sans-serif}
a{color:var(--acc)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:9;background:#000;padding:8px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 28px;height:68px}
.brand{font:600 17px Fraunces,Georgia,serif;color:var(--txt);text-decoration:none;letter-spacing:.01em}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--txt);text-decoration:none;font-weight:500;font-size:14px}
.pill:hover{background:rgba(255,255,255,.1)}
.eyebrow{color:var(--acc);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
h1{font:600 32px/1.12 Fraunces,Georgia,serif;margin:6px 0 4px}
.sub{color:#c3c9d8;margin:0;max-width:760px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden}
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 370px;grid-template-rows:auto minmax(0,1fr);gap:16px 20px;padding:0 28px 24px;height:calc(100vh - 68px);height:calc(100dvh - 68px);min-height:600px}
.intro{grid-column:1/3}
.stage{grid-row:2;min-height:0;background:#0b1020}
.stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.tag{position:absolute;top:14px;left:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#dfe4ef;font-weight:600;z-index:2;background:rgba(5,7,13,.55);padding:5px 10px;border-radius:999px}
.hint{position:absolute;bottom:14px;left:16px;color:#dfe4ef;font-size:13px;background:rgba(5,7,13,.55);padding:5px 10px;border-radius:999px;z-index:2}
.marker{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,-100%);font:600 13px Inter;color:#fff;background:rgba(5,7,13,.7);border:1px solid rgba(255,255,255,.3);padding:3px 9px;border-radius:999px;white-space:nowrap;transition:opacity .2s}
.nogl{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--mute)}
.panel{grid-row:2;display:flex;flex-direction:column;gap:14px;padding:20px 22px;overflow:auto}
.state{font:600 26px/1.1 Fraunces,Georgia,serif;margin:0}
.when{color:var(--acc);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.copy{color:#d0d5e2;margin:0;min-height:4.6em}
.facts{display:flex;gap:22px;color:var(--mute);font-size:12px;flex-wrap:wrap}.facts b{display:block;color:var(--txt);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.controls{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.btn{min-height:52px;border-radius:999px;border:0;background:var(--acc);color:#1a1405;font:600 16px Inter,system-ui;cursor:pointer;padding:0 22px}
.btn:hover{filter:brightness(1.07)}.btn:focus-visible,.pill:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:3px}
.range{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:12px}
input[type=range]{flex:1;accent-color:var(--acc);height:28px;margin:0}
.note{color:var(--mute);font-size:12px;margin:0}
.more{font-size:13px;color:var(--mute)}.more a{color:var(--txt)}
/* second fold */
.faq{max-width:820px;margin:0 auto;padding:40px 24px 30px}
.faq h2{font:600 26px/1.2 Fraunces,Georgia,serif;margin:36px 0 12px}
.faq h2:first-child{margin-top:0}
.faq h3{font:600 18px/1.3 Inter,system-ui;margin:22px 0 6px;color:#fff}
.faq p,.faq li{color:#cfd5e3}.faq ul{padding-left:20px}.faq li{margin:6px 0}
.faq .lead{font-size:17px;color:#e3e7f0}
.box{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:6px 20px 14px;margin-top:20px}
.small{font-size:13px;color:var(--mute)}
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:0;list-style:none}
.lessons a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--txt);background:rgba(255,255,255,.03)}
.lessons a span{display:block;color:var(--mute);font-size:13px}
.lessons a:hover{background:rgba(255,255,255,.08)}
footer.site{border-top:1px solid var(--line);padding:22px 28px;color:var(--mute);font-size:13px;text-align:center}
@media (max-width:1100px){.lesson{grid-template-columns:minmax(0,1fr) 320px}h1{font-size:27px}}
@media (max-width:860px){
 .top{padding:10px 16px;height:auto}
 .lesson{display:flex;flex-direction:column;height:auto;min-height:0;padding:0 16px 20px;gap:14px}
 h1{font-size:25px}
 .stage{width:100%;height:min(105vw,64vh);min-height:280px}
 .panel{overflow:visible;padding:18px}
 .copy{min-height:0}
 .controls{margin-top:4px}
 .faq{padding:28px 18px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}