:root{--ink:#3d405b;--o:#ff7a45;--t:#2a9d8f;--y:#f4d35e;--bg:#fff6ec}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--bg);font:17px/1.6 "Atkinson Hyperlegible",system-ui,sans-serif;overflow-x:hidden}
h1,h2{font-family:"Unbounded",sans-serif;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.mono{font-family:"Space Mono",monospace}.small{font-size:13px}
.hand{font-family:"Gochi Hand",cursive;font-size:21px;color:var(--o)}
a{color:var(--t)}
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;filter:blur(70px);opacity:.6}
.blobs i{position:absolute;width:50vmax;height:50vmax;border-radius:40% 60% 55% 45%;animation:morph 18s ease-in-out infinite alternate}
.blobs i:nth-child(1){background:#ffd6a5;left:-10%;top:-10%}
.blobs i:nth-child(2){background:#b9fbc0;right:-15%;top:20%;animation-duration:24s;animation-delay:-6s}
.blobs i:nth-child(3){background:#ffc6ff;left:20%;bottom:-25%;animation-duration:28s;animation-delay:-12s}
@keyframes morph{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(10vw,6vh) rotate(60deg) scale(1.1)}100%{transform:translate(-6vw,-4vh) rotate(140deg) scale(.95)}}
.hin{max-width:1060px;margin:auto;padding:46px 20px 10px;display:grid;grid-template-columns:1.2fr .9fr;gap:24px;align-items:center}
.sticker{display:inline-block;background:var(--ink);color:#fff;font:700 12px "Space Mono";padding:5px 12px;border-radius:99px;transform:rotate(-2deg)}
h1{font-size:clamp(34px,6vw,62px);margin:.3em 0}
.hl{background:linear-gradient(100deg,var(--o),#e63946,var(--t),var(--o));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 7s linear infinite}
@keyframes flow{to{background-position:300% 0}}
.prog{position:relative;height:16px;background:#fff;border:2px solid var(--ink);border-radius:99px;max-width:420px;margin-top:10px}
.prog .bar{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--t),var(--y),var(--o));transition:width .6s}
.prog span{position:absolute;left:0;top:18px}
.atom3d{position:relative;aspect-ratio:1;width:100%;max-width:400px;justify-self:center;opacity:0;transform:scale(.6);transition:opacity 1s,transform 1.3s cubic-bezier(.2,.9,.2,1.2);cursor:grab}
.atom3d.live{opacity:1;transform:none}.atom3d canvas{width:100%!important;height:100%!important;display:block}
.tagl{position:absolute;bottom:4px;left:10px;transform:rotate(-3deg);pointer-events:none}
main{max-width:1060px;margin:auto;padding:20px}
.move{background:rgba(255,255,255,.8);border:2.5px solid var(--ink);border-radius:26px;padding:24px;margin:34px 0;box-shadow:8px 8px 0 var(--ink)}
html.js [data-reveal]{opacity:0;transform:perspective(1000px) rotateY(-10deg) translateX(-30px) scale(.96);transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.2,1)}
html.js [data-reveal]:nth-of-type(even){transform:perspective(1000px) rotateY(10deg) translateX(30px) scale(.96)}
html.js [data-reveal].in{opacity:1;transform:none}
.mh{display:flex;gap:16px;align-items:flex-start}.mh h2{margin:0 0 6px;font-size:clamp(22px,3.4vw,32px)}
.mn{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font:800 26px "Unbounded";color:#fff;background:linear-gradient(135deg,var(--o),var(--t));background-size:200% 200%;animation:flow 5s linear infinite}
.idea{margin:0;background:#fff3c4;border-left:5px solid var(--y);padding:8px 12px;border-radius:0 10px 10px 0}
.btn,.mb{font:700 15px "Atkinson Hyperlegible";color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:12px;padding:9px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s;margin:4px 4px 4px 0}
.btn:active,.mb:active{transform:translate(3px,3px);box-shadow:none}.btn.ghost{box-shadow:none;background:transparent}
.btn.ok{background:#b9fbc0}.btn.no{background:#ffc9c9}
/* timeline */
.tl{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 4px 14px;position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:44px;height:4px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 18px);min-width:calc(7*200px)}
.node{position:relative;flex:0 0 190px;scroll-snap-align:start;text-align:left;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:12px;cursor:pointer;font:inherit;color:inherit;transition:transform .3s,background .3s,flex-basis .4s}
.move.in .node{animation:rise .6s var(--d) both}@keyframes rise{from{opacity:0;transform:translateY(30px)}}
.node:hover{transform:translateY(-4px) rotate(-1deg)}.node svg{width:70px;height:70px;display:block}
.node .yr{display:inline-block;background:var(--y);padding:0 8px;border-radius:6px;font-size:13px}
.node b{display:block;font:700 17px "Unbounded"}.node .more{display:block;max-height:0;overflow:hidden;font-size:14px;transition:max-height .5s}
.node.open{flex-basis:260px;background:#e8fff6}.node.open .more{max-height:240px}
.tip{display:none}
/* flips */
.flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:18px}
.flip{height:170px;perspective:800px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;transform:rotate(var(--r))}
.fr{position:relative;display:block;width:100%;height:100%;transition:transform .6s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d}
.flip.on .fr{transform:rotateY(180deg)}
.ff,.fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;border:2.5px solid var(--ink);border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ff{background:var(--h);font:700 17px "Unbounded";text-align:center}.ff small{font:15px "Gochi Hand";margin-top:8px;opacity:.7}
.fb{background:#fff;transform:rotateY(180deg);font-size:15px;text-align:left}
/* builder */
.builder{display:grid;grid-template-columns:170px 1fr 200px;gap:18px;align-items:center;margin-top:18px}
.tgt{background:var(--ink);color:#fff;border-radius:16px;padding:14px;text-align:center}
.tgt span{display:block}.nucl{font:800 44px "Unbounded";line-height:1.1}.nucl sup,.nucl sub{font-size:16px}.nucl sub{margin-left:-14px}.nucl .ch{font-size:20px;color:var(--y)}
.board{max-width:340px;justify-self:center;width:100%;transition:transform .3s}.board.win{animation:boing .8s}
@keyframes boing{30%{transform:scale(1.08) rotate(3deg)}60%{transform:scale(.97)}}
.sh{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 5}.nz{fill:#ffe8d6;stroke:var(--o);stroke-width:2}
.pt{stroke:var(--ink);stroke-width:1.5;animation:dropin .35s cubic-bezier(.2,1.5,.5,1)}
@keyframes dropin{from{opacity:0;r:16}}
.pt.p,.tok.p{fill:#e76f51;background:#e76f51}.pt.n,.tok.n{fill:#c9c9c9;background:#c9c9c9}.pt.e,.tok.e{fill:var(--t);background:var(--t)}
.tok{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;border:2.5px solid var(--ink);font:700 18px "Space Mono";color:#fff;cursor:grab;touch-action:none;user-select:none;margin:4px}
.tok.n{color:var(--ink)}.tok.ghost{position:fixed;z-index:99;pointer-events:none;transform:translate(-50%,-50%) scale(1.1);opacity:.85}
/* match */
.match{display:grid;grid-template-columns:1fr 1.6fr;gap:14px;margin-top:16px}.col{display:flex;flex-direction:column}
.mb{text-align:left}.mb.sel{background:var(--y)}.mb.ok{background:#b9fbc0;box-shadow:none;opacity:.75}.mb.bad{background:#ffc9c9;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* light */
.light{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:center;margin-top:12px}#lsvg{width:100%;background:#fff;border:2px solid var(--ink);border-radius:16px}
.q{font-weight:700}
/* tf */
.tf{margin-top:16px;max-width:620px}
.tfcard{min-height:150px;background:#fff;border:2.5px solid var(--ink);border-radius:20px;padding:18px;font-size:19px;transition:transform .5s,background .4s;transform-style:preserve-3d}
.tfcard.good{background:#d8f8df;transform:rotate(-1.5deg)}.tfcard.nope{background:#ffe0e0;transform:rotate(1.5deg)}
.why{font-size:16px;margin-bottom:0}
.strip{display:flex;gap:10px;overflow-x:auto;padding:10px 0}.strip div{flex:0 0 180px;background:linear-gradient(160deg,#fff,#ffe8d6);border:2px solid var(--ink);border-radius:14px;padding:10px;font-size:15px}
.strip b{display:block;font:700 18px "Unbounded";color:var(--o)}
.foot{text-align:center;font-size:12px;padding:30px}
@media(max-width:800px){.hin{grid-template-columns:1fr;padding-top:24px}.atom3d{max-width:260px;order:-1}.move{padding:16px;box-shadow:5px 5px 0 var(--ink)}
.builder,.light{grid-template-columns:1fr}.target{text-align:center}.match{grid-template-columns:1fr}.tip{display:block}.mh{flex-direction:column;gap:8px}
.flips{grid-template-columns:1fr 1fr;gap:10px}.flip{height:180px}.ff{font-size:14px}.fb{font-size:13px;padding:10px}.bin{text-align:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}