:root{--paper:#f4efe1;--ink:#1f2a44;--red:#d6453d;--blue:#2e6bd1;--grey:#8a8a8a;--line:#c9d6ea}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Menlo,Consolas,'DejaVu Sans Mono',monospace;
background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 28px}
.wrap{max-width:900px;margin:0 auto;padding:0 18px}
.top{border-bottom:3px solid var(--ink);padding:30px 0 10px;background:var(--paper)}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,6vw,54px);margin:0;line-height:1.1;transform:rotate(0deg)}
.scribble{color:var(--red);text-decoration:underline wavy var(--red) 2px;text-underline-offset:6px}
.sub{color:#555;margin:6px 0 12px;font-size:13px}
nav{display:flex;flex-wrap:wrap;gap:6px}
nav a{color:var(--ink);font-size:13px;text-decoration:none;border:2px solid var(--ink);padding:2px 8px;background:#fff;box-shadow:3px 3px 0 var(--ink);transition:transform .15s}
nav a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
section{padding:34px 0 10px;border-bottom:2px dashed #b9b2a0}
h2{font-family:Georgia,'Times New Roman',serif;font-size:30px;margin:0 0 6px}
.num{display:inline-block;background:var(--ink);color:var(--paper);font:14px Menlo,Consolas,'DejaVu Sans Mono',monospace;padding:2px 6px;vertical-align:middle;margin-right:6px;transform:rotate(0deg)}
canvas{background:#fffdf6;border:2px solid var(--ink);max-width:100%;height:auto;display:block;touch-action:none}
#gf{width:100%}
button{font:14px Menlo,Consolas,'DejaVu Sans Mono',monospace;background:#fff;border:2px solid var(--ink);padding:6px 12px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);margin:4px 6px 4px 0;transition:transform .1s}
button:active{transform:translate(3px,3px);box-shadow:none}
.ctrl{margin:10px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ctrl label{font-size:13px}
.tally{font-size:14px}
.note,.hand{font-family:Georgia,'Times New Roman',serif;font-size:20px;color:var(--red)}
input[type=range]{width:100%;accent-color:var(--red)}
.tlabels{display:flex;justify-content:space-between;font-size:12px}
.tlbox{display:flex;gap:18px;align-items:flex-start;margin-top:10px}
#tlc{width:300px;flex:none}
#tltext h3{font-family:Georgia,'Times New Roman',serif;font-size:26px;margin:0}
#tltext{animation:none}
.fade{animation:fd .5s ease}@keyframes fd{from{opacity:0;transform:translateY(8px)}}
.bohrrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
#bc,#cc{width:340px}
#spec{height:40px;width:260px;background:#111;border:2px solid var(--ink);position:relative}
#spec i{position:absolute;top:0;bottom:0;width:3px}
table{border-collapse:collapse;width:100%;background:#fff;margin:10px 0}
td,th{border:2px solid var(--ink);padding:6px;text-align:left;font-size:14px}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:6px;vertical-align:middle;border:2px solid var(--ink)}
.dot.p{background:var(--red)}.dot.n{background:var(--grey)}.dot.e{background:var(--blue);width:10px;height:10px}
.dot.big{width:26px;height:26px}.dot.e.big{width:18px;height:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:16px 0}
.stick{background:#fff59a;padding:12px;font-size:14px;box-shadow:2px 4px 0 rgba(0,0,0,.15);transform:rotate(0deg)}
.stick:nth-child(2n){transform:rotate(0deg)}
.stick.y{background:#ffd5a8}.stick.b{background:#c9e4ff}.stick.g{background:#d4f2c4}
.nuc{font-family:Menlo,Consolas,'DejaVu Sans Mono',monospace;color:var(--ink);font-size:24px}
.lab{display:grid;grid-template-columns:140px 1fr 200px;gap:14px;align-items:start}
#ac{width:100%;max-width:420px}
.trays{display:flex;flex-direction:column;gap:10px}
.lab{user-select:none;-webkit-user-select:none}
.tray{border:2px dashed var(--ink);background:#fff;padding:10px;cursor:grab;user-select:none;touch-action:none;font-size:14px}
.tray:active{cursor:grabbing}
.readout{background:#fff;border:2px solid var(--ink);padding:10px;box-shadow:4px 4px 0 var(--ink)}
.readout p{margin:4px 0;font-size:14px}
#sym{font:700 56px Georgia,serif;line-height:1;transition:transform .3s}
#sym.pop{transform:scale(1.25) rotate(0deg)}
#ename{font-size:14px;margin-bottom:6px}
.mini{font-size:12px!important}.mini a{color:var(--blue)}
#drag{position:fixed;pointer-events:none;display:none;z-index:9;transform:translate(-50%,-50%)}
footer{padding:30px 0;font-size:12px;color:#666}
@media(max-width:700px){.tlbox{flex-direction:column}#tlc,#bc,#cc{width:100%;max-width:340px}
.lab{grid-template-columns:1fr}.trays{flex-direction:row;flex-wrap:wrap}.tray{flex:1;padding:6px;text-align:center}}
/* ---- v2 upgrade ---- */
body{font-family:"Space Mono",Menlo,monospace}
h1,h2,#tltext h3,#sym{font-family:"Bricolage Grotesque",Georgia,serif;letter-spacing:-.02em}
h1{font-weight:800}h2{font-weight:800}
.note,.hand{font-family:"Caveat",cursive;font-size:25px}
.top{position:relative;overflow:hidden;border-bottom:3px solid var(--ink)}
.goo{position:absolute;inset:-20%;filter:blur(60px);opacity:.55;pointer-events:none}
.goo i{position:absolute;width:45%;height:60%;border-radius:50%;animation:drift 14s ease-in-out infinite alternate}
.goo i:nth-child(1){background:#ffb347;left:5%;top:10%}
.goo i:nth-child(2){background:#7fb4ff;right:0;top:0;animation-duration:18s;animation-delay:-5s}
.goo i:nth-child(3){background:#ff7a8a;left:35%;bottom:0;animation-duration:22s;animation-delay:-9s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12%,8%) scale(1.15)}100%{transform:translate(-10%,-6%) scale(.9)}}
.herogrid{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center}
.kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.atom3d{position:relative;aspect-ratio:1;width:100%;max-width:420px;justify-self:center;cursor:grab;opacity:0;transform:scale(.85) rotate(-6deg);transition:opacity 1s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.atom3d.live,.atom3d.nogl{opacity:1;transform:none}
.atom3d canvas{border:0;background:transparent;width:100%!important;height:100%!important}
.atom3d .hint{position:absolute;bottom:6px;right:6px;font:20px "Caveat",cursive;color:var(--red);transform:rotate(-4deg);pointer-events:none}
.atom3d.nogl::before{content:"⚛";font-size:180px;display:grid;place-items:center;height:100%}
nav a.rev{background:var(--ink);color:var(--paper)}
html.js [data-reveal]{opacity:0;transform:translateY(40px) rotateX(8deg);transform-origin:50% 0;transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}
html.js [data-reveal].in{opacity:1;transform:none}
section{perspective:900px}
h2 .num{background:linear-gradient(90deg,#1f2a44,#d6453d,#2e6bd1,#1f2a44);background-size:300% 100%;animation:slide 8s linear infinite}
@keyframes slide{to{background-position:300% 0}}
.zoomrow{display:flex;gap:18px;align-items:center;margin-top:12px;flex-wrap:wrap}
.zoomvis{--z:0;position:relative;width:260px;height:260px;border:2px solid var(--ink);background:#fffdf6;overflow:hidden;flex:none}
.zcloud{position:absolute;inset:calc(50% - (20px + var(--z)*80px));border-radius:50%;background:radial-gradient(circle,rgba(46,107,209,.35),rgba(46,107,209,.05) 70%,transparent 71%);transition:inset .6s}
.znuc{position:absolute;left:50%;top:50%;width:calc(12px - var(--z)*3.5px);height:calc(12px - var(--z)*3.5px);min-width:2px;min-height:2px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%);transition:all .6s;box-shadow:0 0 0 4px rgba(214,69,61,.2)}
.ztxt{flex:1;min-width:220px}.ztxt h3{font-family:"Bricolage Grotesque";margin:0 0 4px;font-size:22px}
.factrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0}
.fact{border:2px solid var(--ink);padding:10px;background:#fff;font-size:13px;box-shadow:4px 4px 0 var(--red)}
.fact b{display:block;font:800 24px "Bricolage Grotesque"}
.stick{transition:transform .25s}.stick:hover{transform:rotate(-2deg) scale(1.04)}
.isoflip{margin:8px 0}.isoflip button.on{background:var(--ink);color:var(--paper)}
@media(max-width:700px){.herogrid{grid-template-columns:1fr}.atom3d{max-width:300px}.zoomvis{width:100%;max-width:260px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}