:root{--bg:#06070a;--ink:#e9ecf2;--mute:#9aa1b0;--line:rgba(255,255,255,.09);--glass:rgba(255,255,255,.045);--r:20px;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--serif:Georgia,"Times New Roman",serif;--mono:Menlo,Consolas,"DejaVu Sans Mono",monospace;
--spec:linear-gradient(90deg,#7b4dff,#3a7bff 22%,#22d3c5 42%,#a6e34a 55%,#ffc23a 68%,#ff6a2a 82%,#e8263f)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:#9ec1ff}h1,h2,h3{letter-spacing:-.02em;line-height:1.1;margin:.2em 0 .5em}
h2{font-size:clamp(28px,4.4vw,46px);font-weight:700}h3{font-size:19px}
section{padding:72px 0 16px;position:relative}
.kicker{font:12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.lead{font-size:19px;color:#cfd4de;max-width:46ch}.small{font-size:14px;color:var(--mute)}
strong{color:#fff;font-weight:650}
.prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--spec);transform-origin:0 50%;transform:scaleX(0);z-index:60;opacity:.9}
.top{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:18px;padding:8px 8px 8px 18px;width:min(1040px,calc(100% - 20px));
 background:rgba(12,13,18,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);border-radius:999px}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}.brand span{font:11px var(--mono);color:var(--mute);margin-left:8px}
.links{display:flex;gap:16px;margin-left:auto;font-size:14px}.links a{color:var(--mute);text-decoration:none}.links a:hover{color:#fff}
.pf{position:relative;isolation:isolate;color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;background:#15171e;border:1px solid rgba(255,255,255,.14);white-space:nowrap;transition:transform .25s,box-shadow .3s}
.pf::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--spec);background-size:200% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;z-index:-1}
.pf:hover,.pf:focus-visible{box-shadow:0 0 24px rgba(120,140,255,.35),0 0 50px rgba(255,120,60,.15);transform:translateY(-1px)}.pf:hover::before,.pf:focus-visible::before{opacity:1;animation:slide 2.4s linear infinite}
@keyframes slide{to{background-position:200% 0}}
@media(max-width:720px){.links{display:none}.brand{margin-right:auto}}
.hero{position:relative;padding:120px 0 40px;overflow:hidden}
.glow{position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(40% 35% at 25% 30%,rgba(90,80,255,.22),transparent 70%),radial-gradient(35% 30% at 78% 25%,rgba(255,110,50,.16),transparent 70%),radial-gradient(30% 30% at 55% 60%,rgba(30,210,190,.10),transparent 70%);pointer-events:none;z-index:-1}
.tag{font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
h1{font-size:clamp(40px,7.4vw,84px);font-weight:750;margin:.25em 0 .35em;max-width:14ch}
.ha{font-family:var(--serif);font-style:italic;font-weight:400;background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:20px;color:#c4cad6;max-width:44ch}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 80px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}
.scope{padding:18px;margin-top:34px;position:relative}
.scope::after{content:"";position:absolute;left:10%;right:10%;bottom:-1px;height:1px;background:var(--spec);opacity:.5;filter:blur(.3px)}
#scope{width:100%;height:auto;display:block;border-radius:12px;touch-action:pan-y;cursor:ew-resize;background:#0b0b0d}
.gases{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px;font-size:13px;color:var(--mute)}.gases span{min-width:76px}
button,select{font:inherit;font-size:14px;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .2s,border-color .2s,transform .15s;min-height:38px}
button:hover{background:rgba(255,255,255,.12)}button:active{transform:scale(.97)}button.on{background:#fff;color:#0a0b0f;border-color:#fff}button:disabled{opacity:.35}
button:focus-visible,a:focus-visible,canvas:focus-visible,select:focus-visible{outline:2px solid #9ec1ff;outline-offset:2px}
.grate{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:14px;color:var(--mute)}.grate input{flex:1;accent-color:#fff}
.hint,.readout{font-size:15px;color:#cfd4de;margin:10px 0 0}.readout{min-height:1.6em}
.scrollcue{text-align:center;color:var(--mute);font-size:13px;margin-top:30px;animation:bob 2s ease-in-out infinite}@keyframes bob{50%{transform:translateY(5px)}}
.aims{padding:26px 30px;margin-top:40px}.aims h2{font-size:22px}.aims ol{margin:0;padding-left:20px;color:#cfd4de}.aims li{margin:4px 0}
.two{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:start}@media(max-width:860px){.two{grid-template-columns:1fr}}
.ticks{list-style:none;padding:0}.ticks li{padding:8px 0 8px 26px;position:relative;border-bottom:1px solid var(--line)}.ticks li::before{content:"";position:absolute;left:4px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--spec)}
.analogy{font-family:var(--serif);font-style:italic;color:#d9dce4;border-left:2px solid #6f7cff;padding:6px 0 6px 14px;margin-top:18px}
.atomfig{margin:0}.bohr{position:relative;height:420px;overflow:hidden;cursor:grab;touch-action:pan-y;background:radial-gradient(60% 60% at 50% 50%,rgba(90,110,255,.12),transparent 70%),rgba(255,255,255,.02)}
.bohr canvas{display:block}.nogl-msg{display:none;position:absolute;inset:0;place-items:center;text-align:center;color:var(--mute);padding:20px}.bohr.nogl .nogl-msg{display:grid}
@media(max-width:520px){.bohr{height:340px}}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}.go{margin-left:auto;background:linear-gradient(90deg,#ff8a3a,#ffc23a);color:#1a1004;border:0;font-weight:650}
figcaption{font-size:14px;color:var(--mute);margin-top:10px}#bohrCfg{font-family:var(--mono);font-size:12px}
.story{padding:0;height:400vh}.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#ladder{position:absolute;inset:0;width:100%;height:100%}
.steps{position:relative;margin-top:-100vh;margin-top:-100svh}.step{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:380px;margin-left:auto;opacity:.18;transition:opacity .5s}
.step.on{opacity:1}.step h2{font-size:clamp(26px,3.6vw,38px)}.step p{color:#cfd4de;font-size:18px}
@media(max-width:720px){.step{max-width:none;justify-content:flex-end;padding-bottom:12vh}.step>*{background:rgba(6,7,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.step h2{padding:10px 14px 0;margin:0;border-radius:14px 14px 0 0}.step p{margin:0;padding:6px 14px 12px}.step .kicker{padding:10px 14px 0;margin:0}}
.inshort{padding:20px 24px;font-size:18px;border-color:rgba(120,140,255,.35)}
.lab{padding:18px;margin-top:22px}#drag{width:100%;height:360px;display:block;touch-action:none;cursor:grab}
.spec{width:100%;height:auto;display:block;border-radius:8px;margin-top:10px;background:#000}
.prism,.flame{width:100%;display:block}.prism{height:320px}.flame{height:300px}@media(max-width:520px){.prism{height:230px}}
.method{padding-left:22px;color:#cfd4de}.method li{margin:8px 0}
.mistake{border:1px solid rgba(255,90,90,.3);background:rgba(255,60,60,.06);border-radius:14px;padding:14px 16px;font-size:15px;color:#e6c9c9}
.salts button{display:inline-flex;align-items:center;gap:6px}.salts i,.ftab i{display:inline-block;width:10px;height:10px;border-radius:50%;box-shadow:0 0 10px currentColor}
.ftab{border-collapse:collapse;margin-top:24px;font-size:15px;width:100%;max-width:520px}.ftab td,.ftab th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}.ftab th{color:var(--mute);font-weight:500}.ftab i{margin-right:10px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:760px){.cards3{grid-template-columns:1fr}}
.card{padding:20px}.card p{margin:0;color:#c4cad6;font-size:15px}.lbl{margin:14px 0 0;font:12px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.1em}
.fp{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;margin:10px 0}.fp span{font-weight:600}.fp small{display:block;color:var(--mute);font-weight:400;font-size:12px}.fp .spec{margin:0}
@media(max-width:520px){.fp{grid-template-columns:1fr;gap:4px}}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.picks label{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px}
.lvls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.opt{padding:18px 22px}.opt summary{cursor:pointer;font-weight:600}.opt code{font-family:var(--mono);font-size:14px}
.q{padding:18px 0;border-bottom:1px solid var(--line)}.qq{margin:0 0 10px}.opts{display:flex;flex-direction:column;gap:6px}.opts button{text-align:left;border-radius:12px}
.opts button.ok{background:rgba(60,220,140,.16);border-color:#3cdc8c;color:#fff}.opts button.no{background:rgba(255,80,80,.14);border-color:#ff5050;color:#fff}
.ans{display:none;font-size:15px;color:#cfd4de;margin-top:8px}.ans.show{display:block}
.result{margin-top:16px;padding:20px;border-radius:var(--r);border:1px solid var(--line);background:var(--glass)}.result .big{font-size:36px;font-weight:700;margin:0}
.summary{padding:24px 28px}.summary ul{padding-left:20px;color:#cfd4de}
footer{padding:50px 22px 90px;color:var(--mute);font-size:14px;border-top:1px solid var(--line);margin-top:60px}
.glossBtn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;background:rgba(20,22,30,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gloss{position:fixed;right:0;top:0;bottom:0;width:min(400px,92vw);background:rgba(12,13,18,.96);border-left:1px solid var(--line);z-index:70;overflow:auto;padding:20px 22px}
.gh{display:flex;justify-content:space-between;align-items:center}.gloss dt{font-weight:650;margin-top:12px}.gloss dd{margin:2px 0 0;color:#c4cad6;font-size:15px}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}.scrollcue,.pf:hover::before{animation:none}.step{opacity:1}}
/* ================= v6 polish ================= */
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/space-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--display:"Bricolage",system-ui,sans-serif;--sans:"Atkinson",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--serif:"Instrument Serif",Georgia,serif;--mono:"Space Mono",Menlo,Consolas,monospace;--acc:#9ec1ff;--nav:76px}
body{font-family:var(--sans)}
h1,h2,h3,.brand{font-family:var(--display);font-weight:800;letter-spacing:-.025em}h3{font-weight:600}
h1{font-weight:800;letter-spacing:-.035em}
::selection{background:#7b4dff;color:#fff}
section[id],[id]{scroll-margin-top:var(--nav)}
/* section colour personalities */
#atom3d{--acc:#a99bff}#story{--acc:#ffb35c}#lab{--acc:#5ee6ff}#prismsec{--acc:#f4f1ff}#flametest{--acc:#ff7a45}#types{--acc:#8cf27a}#prints{--acc:#ffd84a}#mystery{--acc:#ff6fd1}#star{--acc:#ffe3a3}#practice{--acc:#4be3b5}
.kicker{color:var(--acc);display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--spec)}
main section h2{position:relative;padding-bottom:.18em}
main section>h2::after,.fps h2::after{content:"";position:absolute;left:0;bottom:0;width:2.6em;height:3px;border-radius:3px;background:var(--spec);opacity:.85;transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .2s}
main section>h2.rv:not(.in)::after{transform:scaleX(0)}
.analogy{font-size:20px;border-left:0;padding-left:16px;position:relative}.analogy::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--spec);border-radius:2px}
section .lead em,.step h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--acc);font-size:1.08em}
@keyframes flow{to{background-position:200% 0}}
.ha{background-size:200% 100%;animation:flow 6s linear infinite;padding-right:.08em}
/* moving gradient backgrounds */
.glow{animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(70deg)}}
.rays{position:absolute;left:50%;top:-30%;width:1400px;height:1400px;margin-left:-700px;z-index:-1;pointer-events:none;opacity:.22;
 background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.0) 0 7deg,rgba(150,140,255,.35) 8deg,rgba(255,255,255,0) 10deg,rgba(255,150,90,.0) 16deg,rgba(255,150,90,.3) 17deg,rgba(255,255,255,0) 19deg);
 -webkit-mask:radial-gradient(closest-side,#000 20%,transparent 75%);mask:radial-gradient(closest-side,#000 20%,transparent 75%);animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
main>section:nth-of-type(odd)::before{content:"";position:absolute;inset:0 0 auto;height:100%;pointer-events:none;z-index:-1;opacity:.5;
 background:radial-gradient(40% 50% at 10% 20%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%)}
#flametest::before,#types::before,#mystery::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
 background:radial-gradient(35% 45% at 90% 40%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%)}
@keyframes breathe{to{transform:translateY(-30px) scale(1.08);opacity:.6}}
/* rainbow borders + glints */
.glass{position:relative}
.glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(180deg,rgba(22,24,32,.92),rgba(14,15,21,.92))}
.lab.glass::before,.scope.glass::before,.card.glass::before,.summary::before,.inshort::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;pointer-events:none;
 background:linear-gradient(90deg,transparent,#7b4dff 20%,#22d3c5 40%,#ffc23a 60%,#ff6a2a 80%,transparent);opacity:.7;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.25}}
.card.glass:nth-child(2)::before{animation-delay:-2s}.card.glass:nth-child(3)::before{animation-delay:-4s}
@keyframes glint{0%,15%{background-position:100% 0}60%,100%{background-position:-100% 0}}
button.on{background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 3px transparent,0 0 18px -4px var(--acc)}
.spec{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 10px 30px -18px var(--acc)}
@keyframes hue{to{filter:hue-rotate(1turn)}}
footer{border-top:0;position:relative}footer::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:var(--spec);opacity:.5}
.mistake{border-left:3px solid #ff5a5a}
.inshort b,.summary h2{font-family:var(--display)}
.summary h2{font-size:30px}
.opt summary::marker{color:#ffc23a}
.opt{border-style:dashed}
.card h3{color:var(--c,#fff)}.card:nth-child(1){--c:#ffe9b0}.card:nth-child(2){--c:#9cf0ff}.card:nth-child(3){--c:#d0b8ff}
/* 3D scroll-reveal moments */
.rv3d{opacity:0;transform:perspective(900px) rotateX(22deg) translateY(40px) scale(.96);transform-origin:50% 100%;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rv3d.in{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}
.cards3{perspective:900px}.card{transition:transform .4s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.fp{transition:transform .5s}.fps .fp{opacity:0;transform:perspective(700px) rotateY(-14deg) translateX(-20px)}.fps.in .fp{opacity:1;transform:none;transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.fps.in .fp:nth-of-type(2){transition-delay:.1s}.fps.in .fp:nth-of-type(3){transition-delay:.2s}.fps.in .fp:nth-of-type(4){transition-delay:.3s}.fps.in .fp:nth-of-type(5){transition-delay:.4s}
.fp span{font-family:var(--display);font-weight:600;font-size:18px}
.burst{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.flametest-note{font-size:13px;color:var(--mute)}
.glossBtn{border-color:rgba(255,255,255,.2)}
@media(max-width:720px){:root{--nav:66px}.glossBtn{padding:6px 12px;min-height:34px;font-size:13px}.rays{width:900px;height:900px;margin-left:-450px}footer{padding-bottom:110px}}
@media(prefers-reduced-motion:reduce){.ha,.glow,.rays,.kicker::before,main section>h2::after,.fps h2::after,.glass::before,.ticks li::before,#flametest::before,#types::before,#mystery::before{animation:none!important}
 .rv3d,.fps .fp{opacity:1;transform:none;transition:none}}