:root { --night:#10162d; --blue:#5978ee; --lavender:#c4c1ff; --mist:#e8edff; --muted:#aeb9d8; --line:#cad3ff2b; --rose:#ef90b6; --sun:#f6ca67; color-scheme:dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--mist); background:radial-gradient(circle at 10% 0%,#5978ee38,transparent 23rem),radial-gradient(circle at 90% 40%,#ef90b618,transparent 31rem),var(--night); }
.wrap { width:min(100% - 2.5rem, 68rem); margin-inline:auto; }
.intro { padding:clamp(3rem,9vw,7.5rem) 0 3rem; text-align:center; }
.eyebrow { margin:0; color:var(--sun); font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,h3,p { text-wrap:balance; }
h1,h2,h3 { font-family:Iowan Old Style,Palatino Linotype,Georgia,serif; font-weight:500; }
h1 { max-width:11ch; margin:.45rem auto .85rem; font-size:clamp(3rem,10vw,5.9rem); line-height:.88; letter-spacing:-.065em; }
h2 { margin:.38rem 0 .5rem; font-size:clamp(1.85rem,5vw,3rem); line-height:.98; letter-spacing:-.045em; }
.lede { max-width:53ch; margin:auto; color:var(--muted); line-height:1.55; }
.lab { padding:1.1rem; border:1px solid var(--line); border-radius:1.5rem; background:#151d38ad; box-shadow:0 24px 80px #0004; }
.lab-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem .7rem 1rem; }
.lab-head h2 { font-size:1.85rem; }
button { font:inherit; cursor:pointer; }
.lab-head button { padding:.58rem .8rem; border:1px solid #c4c1ff52; border-radius:.6rem; color:var(--mist); background:#10162d; font-size:.8rem; font-weight:700; }
.lab-head button:hover,.lab-head button:focus-visible { border-color:var(--sun); color:var(--sun); }
canvas { display:block; width:100%; height:auto; min-height:19rem; border:1px solid #c4c1ff1c; border-radius:1rem; background:radial-gradient(circle at 50% 30%,#334a9644,transparent 54%),#0c1125; }
.projection-note { max-width:68ch; margin:1rem .75rem .35rem; color:var(--muted); font-size:.87rem; line-height:1.45; }
.projection-note b { color:var(--lavender); }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; padding:1.3rem .75rem .7rem; }
.control { display:grid; gap:.55rem; color:var(--mist); font-size:.9rem; font-weight:700; }
.control span { display:flex; justify-content:space-between; }
output { color:var(--sun); font-family:ui-monospace,monospace; }
input[type="range"] { width:100%; accent-color:var(--rose); }
.control small { min-height:2.6em; color:var(--muted); font-weight:400; line-height:1.35; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; padding:.75rem; }
.stats p { margin:0; padding:1rem; border:1px solid var(--line); border-radius:.8rem; background:#0e142a; }
.stats b { display:block; color:var(--sun); font-family:Iowan Old Style,Georgia,serif; font-size:2.1rem; font-weight:500; line-height:1; }
.stats span,.stats code { display:block; }
.stats span { margin-top:.25rem; color:var(--mist); font-size:.84rem; }
.stats code { margin-top:.48rem; color:var(--muted); font-size:.71rem; }
.worked { display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; padding:clamp(4rem,11vw,8rem) 0; }
.steps { display:grid; gap:.75rem; margin:0; padding:0; list-style:none; }
.steps li { display:grid; grid-template-columns:5.3rem 1fr; gap:.75rem; padding:.8rem 0; border-top:1px solid var(--line); }
.steps b { color:var(--sun); font-size:.83rem; }
.steps span { color:var(--muted); line-height:1.4; }
.slice-callout { padding:1.6rem; border-left:2px solid var(--rose); background:#20223b; }
.slice-callout h3 { margin:.5rem 0; font-size:1.65rem; letter-spacing:-.03em; }
.slice-callout p:not(.eyebrow) { margin:0; color:var(--muted); line-height:1.55; }
code { padding:.08em .24em; border-radius:.25rem; background:#c4c1ff19; color:var(--lavender); }
.checkpoint { padding:2rem; border-radius:1.25rem; background:linear-gradient(120deg,#35254c,#1a2649); text-align:center; }
.checkpoint h2 { max-width:19ch; margin-inline:auto; }
.answers { display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; margin:1.4rem 0 .8rem; }
.answers button { min-width:5rem; padding:.72rem 1rem; border:1px solid #c4c1ff5e; border-radius:.65rem; color:var(--mist); background:#10162d; font-weight:800; }
.answers button:hover,.answers button:focus-visible { border-color:var(--sun); color:var(--sun); transform:translateY(-1px); }
#answerFeedback { margin:0; color:var(--muted); font-size:.9rem; }
.provenance { padding:3.5rem 0 2.5rem; color:var(--muted); font-size:.8rem; line-height:1.5; }
.provenance summary { color:var(--lavender); cursor:pointer; font-weight:800; }
.provenance a { color:inherit; }
button:focus-visible,input:focus-visible { outline:3px solid var(--sun); outline-offset:3px; }
@media (max-width:640px) { .wrap { width:min(100% - 1.4rem,68rem); } .controls,.worked { grid-template-columns:1fr; gap:1.3rem; } .stats { grid-template-columns:1fr; } .lab { padding:.5rem; } .lab-head { align-items:flex-start; } canvas { min-height:15rem; } .worked { padding-block:4rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }