/* ChemFluent — "Periodic Pop": lab-notebook paper, element tiles, flat bold color, ink outlines. */
:root{
  --paper:#FFFFFF; --paper2:#FFFFFF; --grid:rgba(40,40,90,.06); --ink:#1D1B3A; --muted:#5E5A7A; --line:#1D1B3A;
  --c1:#FF6B4A; --c2:#3D6BFF; --c3:#FFC93C; --c4:#2EC4A0; --c5:#A66CFF;
  --acc:#2EC4A0; --acc2:#3D6BFF; --warm:#FFC93C; --pink:#FF5FA2; --neg:#FF4B4B; --ok:#14A37F;
  --panel:#FFFFFF; --panel2:#F4F5FA; --on-acc:#1D1B3A;
  --sh:4px 4px 0 var(--ink); --sh2:7px 7px 0 var(--ink); --r:16px; --bw:2.5px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#15142B; --paper2:#1C1B38; --grid:rgba(255,255,255,.05); --ink:#F4F1FF; --muted:#B4AFD6; --line:#F4F1FF;
  --panel:#1F1E3E; --panel2:#2A2850; --on-acc:#15142B; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:80px}
body{margin:0;color:var(--ink);font:17px/1.6 "Atkinson Hyperlegible",system-ui,sans-serif;min-height:100vh;
  background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2256%22%20height%3D%2297%22%20viewBox%3D%220%200%2056%2097%22%3E%3Cpath%20d%3D%22M28%200l28%2016v32L28%2064%200%2048V16zM28%2064v33M0%2016L-28%200M56%2016l28-16%22%20fill%3D%22none%22%20stroke%3D%22%233D6BFF%22%20stroke-opacity%3D%22.09%22%20stroke-width%3D%221.5%22/%3E%3C/svg%3E")}
:root[data-theme="dark"] body{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}
a{color:var(--acc2)}
h1,h2,h3{font-family:Unbounded,"Arial Black",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.1}
sub,sup{font-size:.72em}
.skip{position:absolute;left:-999px;top:8px;background:var(--c3);color:var(--ink);padding:8px 14px;border:var(--bw) solid var(--ink);border-radius:10px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px dashed var(--c2);outline-offset:3px}
[hidden]{display:none!important}
main:focus{outline:none}
#bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none}
.aurora{display:none}

/* top bar */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:10px 20px;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:var(--bw) solid var(--ink)}
.logo{display:flex;align-items:center;gap:10px;font:800 21px Unbounded,sans-serif;color:var(--ink);text-decoration:none}
.logo .tile{position:relative;width:42px;height:42px;border:var(--bw) solid var(--ink);border-radius:9px;background:var(--c3);color:#10132A;box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;font-size:18px;animation:tileIn .8s cubic-bezier(.2,1.6,.4,1)}
.logo .tile small{position:absolute;left:4px;top:1px;font:700 8px "Atkinson Hyperlegible",sans-serif}
.logo:hover .tile{animation:wob .5s}
.logo b{color:var(--c1)}
@keyframes tileIn{from{transform:rotate(-180deg) scale(0)}}
@keyframes wob{25%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}}
.meta{margin-left:auto;display:flex;align-items:center;gap:8px}
.mt{display:flex;align-items:center;gap:6px;background:var(--paper2);border:2px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700}
.lb{display:block;width:46px;height:8px;border-radius:9px;border:1.5px solid var(--ink);overflow:hidden;background:var(--paper)}.lb i{display:block;height:100%;width:0;background:var(--c4);transition:width .6s}
.iconbtn{background:var(--paper2);border:2px solid var(--ink);color:var(--ink);width:40px;height:40px;border-radius:12px;font-size:17px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.iconbtn:active{transform:translate(2px,2px);box-shadow:none}
.menu{display:none}

/* layout + sidebar */
.layout{display:grid;grid-template-columns:270px minmax(0,1fr);max-width:1420px;margin:0 auto}
.side{position:sticky;top:64px;height:calc(100vh - 64px);overflow:auto;padding:16px 12px 40px;border-right:var(--bw) solid var(--ink);background:color-mix(in srgb,var(--paper) 85%,transparent)}
.nl{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.25;border:2px solid transparent}
.nl:hover{background:var(--panel2)}.nl.on{background:var(--c3);color:#10132A;border-color:var(--ink);box-shadow:2px 2px 0 var(--ink);font-weight:700}
.nl .ni{width:24px;text-align:center}
.nl.ch{font-size:14px}
.badge{margin-left:auto;background:var(--c1);color:#fff;border:1.5px solid var(--ink);font-size:11px;border-radius:999px;padding:0 7px}
.ng{margin:18px 10px 6px;font:800 11px Unbounded,sans-serif;letter-spacing:.06em;text-transform:uppercase}
main{padding:28px clamp(16px,4vw,48px) 80px;min-width:0;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.ring{flex:none}.ring .rb{fill:none;stroke:color-mix(in srgb,var(--ink) 15%,transparent);stroke-width:3.5}.ring .rf{fill:none;stroke-width:3.5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .8s}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px "Atkinson Hyperlegible",sans-serif;padding:11px 18px;border-radius:12px;border:var(--bw) solid var(--ink);background:var(--paper2);color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:var(--sh);transition:transform .12s,box-shadow .12s}
.btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pri{background:var(--c4);color:#10132A}
.btn.ok{background:var(--c4);color:#10132A}.btn.no{background:var(--c1);color:#fff}
.chip{border:2px solid var(--ink);background:var(--paper2);color:var(--ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.chip.on{background:var(--c2);color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* hero */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center;margin-bottom:26px}
.kick{display:inline-block;font:800 12px Unbounded,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:var(--c5);color:#fff;padding:6px 12px;border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.5deg)}
.hero h1{font-size:clamp(32px,5vw,62px);margin:18px 0 14px}
.hero h1 span{position:relative;display:inline-block;z-index:0}
.hero h1 span::after{content:"";position:absolute;left:-4px;right:-4px;bottom:.08em;height:.36em;background:var(--c3);z-index:-1;transform:skewX(-8deg) scaleX(0);transform-origin:left;animation:hl 1s .4s cubic-bezier(.2,.8,.2,1) forwards}
:root[data-theme="dark"] .hero h1 span::after{background:var(--c5)}
@keyframes hl{to{transform:skewX(-8deg) scaleX(1)}}
.hero p{color:var(--muted);max-width:60ch}
.hero-art svg{width:100%;max-width:330px;overflow:visible}
.flask .glass{fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.flask .liq{fill:var(--c4)}
.flask .wave{animation:wave 3s ease-in-out infinite}
@keyframes wave{50%{transform:translateX(-30px)}}
.flask .bub{fill:var(--paper2);stroke:var(--ink);stroke-width:3;animation:bub 2.6s ease-in infinite}
.flask .bub:nth-of-type(2){animation-delay:.7s}.flask .bub:nth-of-type(3){animation-delay:1.4s}.flask .bub:nth-of-type(4){animation-delay:2s}
@keyframes bub{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-190px) scale(1.1);opacity:0}}
.flask .mol{animation:orbit 9s linear infinite;transform-origin:165px 150px}
.flask .mol line{stroke:var(--ink);stroke-width:4}
.flask .mol circle{stroke:var(--ink);stroke-width:3}
@keyframes orbit{to{transform:rotate(360deg)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:8px 0 20px}
.stat{border:var(--bw) solid var(--ink);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);background:var(--paper2)}
.stat:nth-child(1){background:color-mix(in srgb,var(--c2) 18%,var(--paper2))}.stat:nth-child(2){background:color-mix(in srgb,var(--c4) 22%,var(--paper2))}.stat:nth-child(3){background:color-mix(in srgb,var(--c1) 18%,var(--paper2))}.stat:nth-child(4){background:color-mix(in srgb,var(--c5) 18%,var(--paper2))}
.stat b{display:block;font:800 28px Unbounded,sans-serif}.stat span{color:var(--muted);font-size:14px;font-weight:700}
.banner{display:block;margin:0 0 20px;padding:14px 18px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--c3);color:#10132A;text-decoration:none;box-shadow:var(--sh)}
.banner a{color:#10132A}
.banner.ok{background:var(--c4)}
.course{margin:34px 0}
.course-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;padding-bottom:10px;border-bottom:var(--bw) dashed color-mix(in srgb,var(--ink) 35%,transparent)}
.course-h h2{margin:6px 0 4px;font-size:clamp(22px,3vw,30px)}.course-h small{color:var(--muted)}
.code{display:inline-block;font:800 11px Unbounded,sans-serif;letter-spacing:.06em;padding:3px 8px;border:2px solid var(--ink);border-radius:6px;background:var(--cc,var(--c3));color:#10132A!important}

/* chapter cards = element tiles */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px}
.ccard{position:relative;display:flex;flex-direction:column;text-align:left;font:inherit;color:#10132A;background:var(--cc,var(--c3));border:var(--bw) solid var(--ink);border-radius:14px;padding:12px 14px 14px;text-decoration:none;cursor:pointer;box-shadow:var(--sh);min-height:200px;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1),box-shadow .18s;animation:pop .5s both cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{opacity:0;transform:scale(.7) rotate(-6deg)}}
.ccard:hover{transform:translate(-3px,-3px) rotate(-1.5deg);box-shadow:var(--sh2)}
.ccard:nth-child(even):hover{transform:translate(-3px,-3px) rotate(1.5deg)}
.ccard .zn{display:flex;justify-content:space-between;font:800 12px Unbounded,sans-serif}
.ccard .sym{font:800 48px/1 Unbounded,sans-serif;margin:8px 0 6px;letter-spacing:-.04em}
.ccard b{font-size:16px;line-height:1.25}
.ccard small{font-size:13px;line-height:1.4;opacity:.8;margin-top:4px}
.ccard .m{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:8px;font:700 12px "Atkinson Hyperlegible",sans-serif}
.ccard .meter{flex:1;height:9px;border:2px solid #10132A;border-radius:9px;background:rgba(255,255,255,.55);overflow:hidden}.ccard .meter i{display:block;height:100%;background:#10132A}
.ccard.mastered::after{content:"★";position:absolute;right:-10px;top:-12px;width:30px;height:30px;border-radius:50%;background:var(--c3);border:2px solid var(--ink);display:grid;place-items:center;font-size:15px;color:#10132A;animation:spinIn .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes spinIn{from{transform:rotate(-180deg) scale(0)}}
.ccard .em{display:none}

/* chapter page */
.chhead{margin-bottom:20px}
.back{font-size:14px;text-decoration:none;color:var(--muted);font-weight:700}
.chtitle{display:flex;align-items:center;gap:18px;margin:12px 0}.chtitle>div:not(.bigtile):not(.mflask){flex:1}
.chtitle h1{margin:8px 0 6px;font-size:clamp(26px,4vw,44px)}.chtitle p{margin:0;color:var(--muted)}
.bigtile{flex:none;position:relative;width:96px;height:104px;border:var(--bw) solid var(--ink);border-radius:14px;background:var(--cc);box-shadow:var(--sh);display:grid;place-items:center;color:#10132A;animation:tileIn .8s cubic-bezier(.2,1.6,.4,1)}
.bigtile b{font:800 40px Unbounded,sans-serif}.bigtile small{position:absolute;left:8px;top:5px;font:800 12px Unbounded,sans-serif}.bigtile i{position:absolute;bottom:6px;font-size:18px;font-style:normal}
.mflask{flex:none;width:76px;text-align:center;font:800 12px Unbounded,sans-serif}
.mflask svg{width:70px;height:84px;overflow:visible}
.mflask .g{fill:none;stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.mflask .l{fill:var(--cc)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tabs a{padding:9px 16px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px;border:var(--bw) solid var(--ink);background:var(--paper2);box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.tabs a:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.tabs a.on{background:var(--cc,var(--c3));color:#10132A;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.page{position:relative;background:var(--panel);border:var(--bw) solid var(--ink);border-radius:20px;padding:clamp(20px,3vw,34px);box-shadow:var(--sh2);max-width:880px;animation:pageIn .4s cubic-bezier(.2,1.2,.4,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(16px) rotate(.6deg)}}
.page h2{font-size:clamp(22px,3vw,32px);margin:10px 0 14px}
.pg{display:inline-block;font:800 11px Unbounded,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:var(--c2);color:#fff;padding:4px 10px;border-radius:6px;border:2px solid var(--ink)}
.page p{margin:10px 0}
.formula{font:800 clamp(15px,2.2vw,19px) Unbounded,sans-serif;text-align:center;padding:16px;border:var(--bw) solid var(--ink);border-radius:14px;background:var(--c3);color:#10132A;box-shadow:var(--sh);margin:14px 0}
.mono{font-family:ui-monospace,Menlo,monospace}.big{font-size:1.1em}
mark{background:var(--c3);color:#10132A;border-radius:4px;padding:0 3px}
.pill{display:inline-block;padding:4px 12px;border-radius:999px;border:2px solid var(--ink);background:var(--paper2);margin:0 6px 6px 0;font-weight:700}
.tbl{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0;font-size:15px;border:var(--bw) solid var(--ink);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{padding:8px 10px;text-align:left;vertical-align:middle;border-bottom:1.5px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{background:var(--ink);color:var(--paper);font:800 11px Unbounded,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.tbl tr:nth-child(odd) td{background:color-mix(in srgb,var(--c2) 6%,transparent)}
.map{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0;text-align:center}
.map span{background:var(--c4);color:#10132A;border:2px solid var(--ink);border-radius:10px;padding:8px 14px;font-weight:800;box-shadow:3px 3px 0 var(--ink)}.map em{font-style:normal;font-size:13px;font-weight:700}
.pnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}
.dots{display:flex;gap:6px}.dots i{width:12px;height:12px;border-radius:3px;border:2px solid var(--ink);background:var(--paper2);transition:transform .2s}.dots i.on{background:var(--c1);transform:rotate(45deg)}.dots i.done{background:var(--c4)}
.viewer{margin:16px 0;background:#1D1B3A;border:var(--bw) solid var(--ink);border-radius:16px;padding:10px;box-shadow:var(--sh)}
.viewer canvas,.vis.geo canvas{width:100%;height:300px;display:block;touch-action:none;cursor:grab}
.vis.geo{background:#1D1B3A}
.vctl{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.viewer .chip{background:#FFFDF7;color:#10132A;border-color:#FFFDF7}.viewer .chip.on{background:var(--c3)}
.tip{font-size:13px;color:var(--muted)}.viewer .tip{color:#cfcde6;text-align:center}.center{text-align:center}
.launch{margin-top:10px}

/* questions */
.prompt{font-size:19px;line-height:1.55}
.cfg{font:800 19px Unbounded,sans-serif;margin:12px 0;padding:12px 16px;background:var(--panel2);border:2px solid var(--ink);border-radius:12px;text-align:center}
.cfg.small{font:700 17px "Atkinson Hyperlegible",sans-serif}
.eq{margin:12px 0;padding:12px 16px;background:var(--panel2);border:2px dashed var(--ink);border-radius:12px;text-align:center;font-weight:700;font-size:18px}
.vis{margin:14px 0;padding:10px;background:var(--paper2);border:var(--bw) solid var(--ink);border-radius:16px;display:flex;justify-content:center;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:20px 20px}
.vis svg.mol{width:100%;max-width:440px;height:auto;max-height:260px}
svg.mol line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
svg.mol .hlb{stroke:var(--c1)}
svg.mol line.hash{stroke-width:2.2}
svg.mol .wedge{fill:var(--ink)}
svg.mol .hl{fill:var(--c3);stroke:var(--ink);stroke-width:2.5}
svg.mol .lab{font:800 19px "Atkinson Hyperlegible",sans-serif;fill:var(--ink);text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--paper2);stroke-width:6px}
svg.mol .lab.el-O{fill:#E8452A}svg.mol .lab.el-N{fill:#2F57E6}svg.mol .lab.el-Cl{fill:#119272}svg.mol .lab.el-Br{fill:#B45309}svg.mol .lab.el-F{fill:#4D8A12}
:root[data-theme="dark"] svg.mol .lab.el-O{fill:#FF8A6E}:root[data-theme="dark"] svg.mol .lab.el-N{fill:#8FA8FF}
svg.mol .lab.g{font-size:17px}
svg.mol .rk{fill:var(--c1);font-size:13px}
svg.mol .dot{fill:var(--c2)}svg.mol .ctr{fill:var(--ink)}
svg.stereo{max-width:340px}
.opts{display:grid;gap:10px;margin-top:16px}
.opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--paper2);border:var(--bw) solid var(--ink);border-radius:12px;padding:11px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s,background .15s}
.opt:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:color-mix(in srgb,var(--c3) 30%,var(--paper2))}
.opt:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.opt .key{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:800 13px Unbounded,sans-serif}
.opt.picked{background:color-mix(in srgb,var(--c2) 25%,var(--paper2))}
.opt.right{background:var(--c4);color:#10132A;animation:good .5s cubic-bezier(.2,1.6,.4,1)}
.opt.right .key{background:#10132A;color:#fff}
.opt.wrong{background:var(--c1);color:#fff;animation:shake .4s}
.opt.wrong .key{background:#fff;color:#10132A}
.opt:disabled{cursor:default}
@keyframes good{40%{transform:scale(1.03) rotate(-.6deg)}}
@keyframes shake{20%{transform:translateX(-7px) rotate(-1deg)}40%{transform:translateX(6px) rotate(1deg)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.ans{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.ans input{flex:1;min-width:180px;font:inherit;font-size:18px;padding:11px 14px;border-radius:12px;border:var(--bw) solid var(--ink);background:var(--paper2);color:var(--ink);box-shadow:inset 3px 3px 0 color-mix(in srgb,var(--ink) 12%,transparent)}
.ans input:focus{outline:3px solid var(--c3);outline-offset:1px}.ans input.bad{background:color-mix(in srgb,var(--c1) 20%,var(--paper2))}
.unit{font-weight:800}
.bal{justify-content:center;font-size:19px;gap:8px}.bal label{display:flex;align-items:center;gap:4px}.bal .f{white-space:nowrap}.bal input.co{width:58px;min-width:0;flex:none;text-align:center;padding:7px 4px}.bal .arr{font-size:22px;margin:0 4px}
.fb:empty{display:none}
.verdict{position:relative;margin-top:18px;padding:12px 16px;border:var(--bw) solid var(--ink);border-radius:12px;font:800 17px Unbounded,sans-serif;box-shadow:var(--sh);animation:stamp .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{from{transform:scale(1.6) rotate(-6deg);opacity:0}}
.verdict.ok{background:var(--c4);color:#10132A}
.verdict.no{background:var(--c1);color:#fff}.verdict span{font:400 16px "Atkinson Hyperlegible",sans-serif;margin-left:8px}
.how{margin-top:14px;padding:14px 18px;border:var(--bw) dashed var(--ink);border-radius:14px;background:var(--panel2)}.how ol{margin:8px 0 0;padding-left:22px}.how li{margin:6px 0}
.wsteps{counter-reset:s;list-style:none;padding:0;margin:18px 0 0}
.wsteps li{position:relative;padding:12px 14px 12px 56px;margin:12px 0;background:var(--paper2);border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);animation:slideIn .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes slideIn{from{opacity:0;transform:translateX(-24px) rotate(-1deg)}}
.wsteps li::before{counter-increment:s;content:counter(s);position:absolute;left:12px;top:10px;width:30px;height:30px;border-radius:8px;border:2px solid var(--ink);background:var(--c5);color:#fff;display:grid;place-items:center;font:800 13px Unbounded,sans-serif}
.final{margin-top:14px;padding:14px 18px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--c3);color:#10132A;font-size:19px;box-shadow:var(--sh);animation:stamp .5s cubic-bezier(.2,1.6,.4,1)}
.prog{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pbar{flex:1;height:14px;border:var(--bw) solid var(--ink);border-radius:9px;background:var(--paper2);overflow:hidden}.pbar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--c4) 0 10px,#7FE3C8 10px 20px);transition:width .5s cubic-bezier(.2,1.3,.4,1)}
.score{font-weight:800}
.page.do.shake{animation:shake .4s}
.page.do.glow{animation:good .5s}
.result{text-align:center;margin:0 auto}.result .big{font-size:70px;animation:bounceIn .7s cubic-bezier(.2,1.6,.4,1)}.result .cta{justify-content:center}.result .tbl{text-align:left;max-width:540px;margin:16px auto}
@keyframes bounceIn{from{transform:scale(0) rotate(-30deg)}}
.xp-pop{position:fixed;left:50%;top:92px;translate:-50% 0;z-index:90;background:var(--c3);color:#10132A;border:var(--bw) solid #10132A;box-shadow:3px 3px 0 #10132A;font:800 15px Unbounded,sans-serif;padding:7px 16px;border-radius:10px;animation:xp 1.2s ease forwards;pointer-events:none}
@keyframes xp{0%{opacity:0;transform:translateY(10px) scale(.6) rotate(-8deg)}20%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-34px)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:95}
.fizz{position:fixed;border-radius:50%;border:2.5px solid #10132A;pointer-events:none;z-index:96}

/* exam */
.examhead{position:sticky;top:64px;z-index:5;display:flex;align-items:center;gap:14px;padding:12px 0;background:var(--paper);margin-bottom:10px;border-bottom:var(--bw) dashed color-mix(in srgb,var(--ink) 40%,transparent)}
.clock{margin-left:auto;font:800 20px Unbounded,sans-serif;font-variant-numeric:tabular-nums;background:#1D1B3A;color:var(--c3);padding:4px 12px;border-radius:8px}
.qnav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}.qnav button{width:38px;height:38px;border-radius:9px;border:2px solid var(--ink);background:var(--paper2);color:var(--ink);font:800 13px Unbounded,sans-serif;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.qnav button.done{background:var(--c2);color:#fff}.qnav button.on{background:var(--c3);color:#10132A}
.review details{border:2px solid var(--ink);border-radius:12px;margin:8px 0;padding:10px 14px;text-align:left;background:var(--paper2)}.review summary{cursor:pointer;font-weight:800}.rq{padding-top:8px}

/* flashcards */
.boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}.boxes div{border:2px solid var(--ink);border-radius:10px;padding:8px;text-align:center;background:var(--paper2);box-shadow:2px 2px 0 var(--ink)}.boxes b{display:block;font:800 22px Unbounded,sans-serif}.boxes span{font-size:12px;font-weight:700}
.flip{position:relative;max-width:620px;height:300px;margin:14px auto;perspective:1200px;cursor:pointer;outline:none}
.flip .face{position:absolute;inset:0;border-radius:20px;border:var(--bw) solid var(--ink);background:var(--c3);color:#10132A;box-shadow:var(--sh2);backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;transition:transform .65s cubic-bezier(.2,1.3,.4,1)}
.flip .back{transform:rotateY(180deg);background:var(--c4)}
.flip.on .front{transform:rotateY(-180deg)}.flip.on .back{transform:rotateY(0)}
.flip small{text-transform:uppercase;letter-spacing:.08em;font:800 11px Unbounded,sans-serif}.flip .rg{font:800 clamp(22px,4vw,32px) Unbounded,sans-serif;margin:14px 0}.flip .back p{font-size:20px;font-weight:800}
.flip .tap{position:absolute;bottom:16px;font-size:13px;font-weight:700}
.rate{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* periodic table */
.ptctl{display:flex;gap:8px;margin-bottom:14px}
.ptable{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(7,auto) 14px repeat(2,auto);gap:4px;position:relative}
.el{aspect-ratio:1;border:2px solid var(--ink);border-radius:6px;background:var(--ec);color:#10132A;font:inherit;padding:2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .15s cubic-bezier(.2,1.6,.4,1)}
.el:hover,.el.sel{transform:scale(1.3) rotate(-4deg);z-index:2;box-shadow:3px 3px 0 var(--ink)}
.el small{font-size:clamp(7px,.7vw,10px);font-weight:700}.el b{font:800 clamp(8px,1vw,14px) Unbounded,sans-serif}
.ptinfo{grid-column:3/13;grid-row:1/4;display:flex;gap:14px;align-items:center;padding:6px 10px}
.ptinfo h3{margin:0}.ptinfo p{margin:2px 0;font-size:14px;color:var(--muted)}.cfg2{color:var(--ink)!important;font-size:15px!important;font-weight:700}
.pbig{width:78px;height:78px;flex:none;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--ec);color:#10132A;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--sh);animation:tileIn .5s cubic-bezier(.2,1.6,.4,1)}.pbig b{font:800 28px Unbounded,sans-serif}.pbig small{font-size:12px;font-weight:700}
.huge{font:800 40px Unbounded,sans-serif;margin:16px 0 6px}.huge small{font-size:18px;color:var(--muted)}
.bad{color:var(--neg)}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .menu{display:block}
  .side{position:fixed;left:0;top:64px;width:min(86vw,320px);z-index:40;transform:translateX(-105%);transition:transform .3s;box-shadow:6px 0 0 var(--ink)}
  body.menu-open .side{transform:none}
  .hero{grid-template-columns:1fr}.hero-art{max-width:200px;margin:0 auto;order:-1}
  .stats{grid-template-columns:repeat(2,1fr)}
  .meta .lvl{display:none}
  .ptinfo{grid-column:1/-1;grid-row:auto;order:-1}
  .ptable{grid-template-columns:repeat(18,minmax(17px,1fr));overflow-x:auto}
  .boxes{grid-template-columns:repeat(3,1fr)}
  .cgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ccard .sym{font-size:40px}
  .mflask{display:none}
}
@media (max-width:500px){.meta .mt:nth-child(2){display:none}.logo{font-size:16px}.tabs a{padding:8px 11px;font-size:14px}.bigtile{width:72px;height:80px}.bigtile b{font-size:30px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* mechanisms */
.mechvis svg.mech{max-width:520px;max-height:320px}
svg.mech .hit{fill:transparent;stroke:transparent;stroke-width:22;cursor:pointer}
svg.mech circle.hit{stroke-width:0}
svg.mech .hit.src:hover,svg.mech .hit.tgt:hover{fill:color-mix(in srgb,var(--c3) 45%,transparent);stroke:color-mix(in srgb,var(--c3) 45%,transparent)}
svg.mech circle.hit.atom:hover{fill:color-mix(in srgb,var(--c2) 22%,transparent)}
svg.mech .hit.sel{fill:color-mix(in srgb,var(--c1) 45%,transparent)!important;stroke:color-mix(in srgb,var(--c1) 45%,transparent)!important}
svg.mech .lp{fill:var(--c2)}
svg.mech .chg circle{fill:var(--paper2);stroke:var(--ink);stroke-width:1.6}svg.mech .chg text{font:800 13px sans-serif;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
svg.mech .arw{fill:none;stroke:var(--c1);stroke-width:3;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:drawArw .5s ease forwards}
svg.mech .ahd{fill:var(--c1)}
svg.mech .arw.right{stroke:#14A37F}svg.mech .arw.wrong{stroke:var(--neg);stroke-dasharray:6 5;animation:none;stroke-dashoffset:0}
svg.mech .arw.good{stroke:#14A37F;stroke-width:3.5}
@keyframes drawArw{to{stroke-dashoffset:0}}
.atools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}.atools .acheck{margin-left:auto}.acount{font-weight:700;color:var(--muted)}
.amsg{margin:10px 0 0;font-weight:700;color:var(--muted)}.amsg.warn{color:var(--c1)}
/* synthesis */
.syn{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:6px 0 14px}
.syn span{border:var(--bw) solid var(--ink);border-radius:12px;padding:10px 14px;font-weight:800;box-shadow:3px 3px 0 var(--ink);background:var(--c4);color:#10132A}
.syn span:last-child{background:var(--c3)}
.syn em{font:800 22px Unbounded,sans-serif;font-style:normal;position:relative;padding:0 36px}
.syn em::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:var(--ink)}.syn em::after{content:"";position:absolute;right:-2px;top:calc(50% - 7px);border:8px solid transparent;border-left:12px solid var(--ink);border-right:0}
/* spectra */
svg.spec{width:100%;max-width:600px;height:auto}
svg.spec .sbg{fill:var(--paper2)}svg.spec .trace{fill:none;stroke:var(--c2);stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:3000;stroke-dashoffset:3000;animation:drawArw 1.6s ease forwards}
svg.spec .pk{stroke:var(--c1);stroke-width:2;animation:grow .7s cubic-bezier(.2,1.4,.4,1) both;transform-box:fill-box;transform-origin:bottom}
@keyframes grow{from{transform:scaleY(0)}}
svg.spec .axl,svg.spec .tk{stroke:var(--ink);stroke-width:1.5}svg.spec .ax{font:700 11px "Atkinson Hyperlegible",sans-serif;fill:var(--muted);text-anchor:middle}svg.spec .int{font:800 11px Unbounded,sans-serif;fill:var(--ink);text-anchor:middle}

/* newman / chair / fischer */
.widget{margin:18px 0;padding:14px;border:var(--bw) solid var(--ink);border-radius:16px;background:var(--panel2);box-shadow:var(--sh)}
.nw{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.nw svg.newman{width:100%;max-width:280px;display:block;margin:0 auto;cursor:grab;touch-action:none}
.nw input[type=range]{width:100%;accent-color:var(--c1)}
svg.newman .nc{fill:var(--paper2);stroke:var(--ink);stroke-width:3}svg.newman .nf{stroke:var(--ink);stroke-width:3.2}svg.newman .nb{stroke:var(--ink);stroke-width:3}
svg.newman .lab.me,svg.chair .meb{fill:var(--c1)}svg.newman .lab{font-size:16px}
.nwname{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}.nwname b{font:800 17px Unbounded,sans-serif}.nwname span{color:var(--muted);font-size:14px;font-weight:700}
svg.energy{width:100%}svg.spec .trace.solid{stroke-dasharray:none;animation:none}svg.energy .dotm{fill:var(--c1);stroke:var(--ink);stroke-width:2.5}
.cw{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;align-items:center}
svg.chair{width:100%}svg.chair line{stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}svg.chair line.hb{stroke-width:2;opacity:.7}svg.chair line.me{stroke:var(--c1);stroke-width:3.5}
svg.chair .meb{stroke:var(--ink);stroke-width:2.5}svg.chair .hd{fill:var(--paper2);stroke:var(--ink);stroke-width:1.8}svg.chair .hd.clash{fill:var(--c1)}
svg.chair .clashl{stroke:var(--c1);stroke-width:2.5;stroke-dasharray:5 4}
svg.fischer{max-width:300px}svg.fischer line{stroke-width:3.2}
.pair{display:flex;gap:10px;justify-content:center;margin:12px 0}.pair svg{width:46%;max-width:220px;border:2px solid var(--ink);border-radius:12px;background:var(--paper2)}
@media (max-width:700px){.nw,.cw{grid-template-columns:1fr}}

/* ---------- virtual labs ---------- */
.labgrp{margin:26px 0}.labgrp h2{font:800 20px Unbounded,sans-serif;display:flex;align-items:center;gap:10px}.labgrp .pill{color:#10132A;border:2px solid var(--ink)}
.labgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:12px}
.labcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border:var(--bw) solid var(--ink);border-radius:16px;background:var(--panel);box-shadow:var(--sh);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s;overflow:hidden}
.labcard::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:var(--lc)}
.labcard:hover{transform:translate(-2px,-2px);box-shadow:var(--sh2)}.labcard .li{font-size:30px}.labcard b{font:800 15px Unbounded,sans-serif;line-height:1.25}.labcard small{color:var(--muted);font-weight:700;font-size:12px}
.labcard .done{position:absolute;top:12px;right:12px;font-style:normal;font-size:12px;font-weight:800;background:var(--c4);color:#10132A;border:2px solid var(--ink);border-radius:999px;padding:1px 8px}
.labhead .bigicon{font-size:48px;width:74px;height:74px;display:grid;place-items:center;border:var(--bw) solid var(--ink);border-radius:16px;background:var(--lc);box-shadow:var(--sh)}
.labhead .back{font-weight:800;color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:8px}.utdline{color:var(--muted);font-weight:700;margin:4px 0 0}
.proc li{margin:6px 0}.safety{margin:16px 0;padding:12px 14px;border:2px dashed var(--ink);border-radius:12px;background:color-mix(in srgb,var(--c3) 25%,var(--panel));font-weight:700}
.given{font-weight:700;margin:0 0 10px}
.rig{display:grid;grid-template-columns:minmax(220px,1fr) 1.2fr;gap:18px;align-items:start}
.rig-l>div{width:100%;display:flex;flex-direction:column;align-items:center}.rig-l svg:not([width]){max-width:100%}.spectro{width:100%;max-width:320px}.balance{width:100%;max-width:220px}.rig-l{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;border:var(--bw) solid var(--ink);border-radius:16px;background:var(--panel2);min-height:260px;justify-content:center}
.rig-r{display:flex;flex-direction:column;gap:10px}
.bench{display:flex;gap:16px;align-items:flex-end;justify-content:center;flex-wrap:wrap}.bench .col,.exflasks .col{display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:700}.bench .col b{font:800 18px Unbounded,sans-serif}
.stand{display:flex;align-items:flex-end;gap:0}.bwrap svg{height:300px}.fwrap{display:flex;flex-direction:column;align-items:center;margin-left:-30px}.fwrap svg{width:130px}.tag{font-size:12px;font-weight:700;color:var(--muted);text-align:center;max-width:150px}
.glass-v .gl,.burette .gl,svg .gl{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}.glass-v .liq{transition:fill .35s,y .3s}.glass-v .tick,.burette .tick{stroke:var(--ink);stroke-width:1.4}
.beaker-v{width:110px}.flask-v{width:120px}.tube-v{width:44px}.tubes{gap:26px}.tubes .tube-v{width:56px}
.burette .tit{fill:rgba(180,215,255,.7)}.burette .bt{font:700 9px Atkinson Hyperlegible,sans-serif;fill:var(--ink)}.burette .cock{fill:var(--c2);stroke:var(--ink);stroke-width:1.5}.burette .drop{fill:rgba(150,200,255,.95);animation:dropf .26s ease-in}
@keyframes dropf{from{transform:translateY(-14px)}to{transform:none}}
svg .tl{font:700 11px Atkinson Hyperlegible,sans-serif;fill:var(--ink);text-anchor:middle}
.readout{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border:var(--bw) solid var(--ink);border-radius:12px;background:#10132A;color:#9dffcf;box-shadow:var(--sh)}.readout span{color:#cfd3ff;font-weight:700;font-size:13px}.readout b{font:700 22px ui-monospace,Menlo,monospace}
.btnrow{display:flex;flex-wrap:wrap;gap:8px}.sl{display:flex;flex-direction:column;gap:4px;font-weight:700}.sl input[type=range]{accent-color:var(--c1)}.sl select{font:inherit;padding:6px 8px;border:2px solid var(--ink);border-radius:10px;background:var(--panel);color:var(--ink)}
.nbnote{min-height:1.2em;font-weight:700;color:var(--c2);margin-top:10px}
.nbt{width:100%;border-collapse:collapse;margin:8px 0;font-size:14px}.nbt th,.nbt td{border:2px solid var(--ink);padding:6px 8px;text-align:left}.nbt th{background:var(--c3);color:#10132A}.nbt tr.new td{animation:rowIn .6s}.nbt.sum{max-width:460px}
@keyframes rowIn{from{background:color-mix(in srgb,var(--c4) 50%,transparent)}to{background:transparent}}
.notebook h4{font:800 15px Unbounded,sans-serif;margin:16px 0 4px}.fit{font-weight:700;margin:6px 0}
svg.lplot{width:100%;max-width:520px;display:block}.lplot .pbg{fill:var(--panel);stroke:var(--ink);stroke-width:2}.lplot .pgr{stroke:var(--ink);opacity:.1}.lplot .ptk{font:700 10px Atkinson Hyperlegible,sans-serif;fill:var(--muted);text-anchor:middle}.lplot .plb{font:800 11px Atkinson Hyperlegible,sans-serif;fill:var(--ink);text-anchor:middle}.lplot .pnt{font:700 11px Atkinson Hyperlegible,sans-serif;fill:var(--muted)}
.lplot .pln{fill:none;stroke-width:3;stroke-linejoin:round}.lplot .pln.c1{stroke:var(--c1)}.lplot .pln.c2{stroke:var(--c2)}.lplot .pln.fitl{stroke:var(--ink);stroke-dasharray:6 5;stroke-width:2}.lplot .pln.fitl2{stroke:var(--c2);stroke-dasharray:6 5;stroke-width:2}
.lplot .pdt{stroke:var(--ink);stroke-width:1.6}.lplot .pdt.c1{fill:var(--c1)}.lplot .pdt.c2{fill:var(--c2)}.lplot .pdt.now{fill:var(--c3);stroke-width:2.5}
.spectro .box,.balance .box,.meltemp .box{fill:var(--panel);stroke:var(--ink);stroke-width:2.5}.spectro .lamp{fill:#ffe680;stroke:var(--ink);stroke-width:2}.spectro .beam{stroke-width:7;stroke-linecap:round}.spectro .cuv{stroke:var(--ink);stroke-width:2}.spectro .det{fill:#10132A;stroke:var(--ink);stroke-width:2}
.balance{width:200px}.lcd{fill:#10132A}.lcdt{font:700 15px ui-monospace,Menlo,monospace;fill:#9dffcf;text-anchor:middle}
.calor{width:220px}.calor .cup{fill:#fff;stroke:var(--ink);stroke-width:2.5}.calor .cupin{stroke:none}.calor .lid{stroke:var(--ink);stroke-width:5;stroke-linecap:round}.calor .therm{fill:#fff;stroke:var(--ink);stroke-width:2}.calor .merc,.calor .bulb{fill:#e63946}.calor .metal{fill:#9aa3ad;stroke:var(--ink);stroke-width:2;transition:y .4s}
.flamesvg{width:180px}.flamesvg .burner{fill:#888;stroke:var(--ink);stroke-width:2}.flamesvg .fl-o{opacity:.85;filter:blur(1px)}.flamesvg .fl-i{fill:#9fd0ff;opacity:.85}.flamesvg .loop{stroke:#777;stroke-width:3;fill:none}
.spline{position:relative;width:100%;max-width:300px}.spline .rainbow{height:22px;border:2px solid var(--ink);border-radius:6px;background:linear-gradient(90deg,#7a00ff,#0040ff,#00c0ff,#00ff60,#e0ff00,#ffa000,#ff2000,#a00000);opacity:.25}.spline i{position:absolute;top:0;width:4px;height:22px;background:#fff;border:1px solid #000;box-shadow:0 0 8px #fff}.spline span{font-weight:800}
.spotplate svg{width:100%;max-width:300px}.spotplate .plate{fill:#fafafa;stroke:var(--ink);stroke-width:2.5}.spotplate .well{fill:#fff;stroke:#999;stroke-width:2}.spotplate .cloud{animation:cloudIn .8s}@keyframes cloudIn{from{opacity:0;r:4}}
.visc{height:260px}.visc .mark{stroke:var(--c1);stroke-width:2;stroke-dasharray:4 3}.visc .ball{fill:#777;stroke:var(--ink);stroke-width:2}
.therm-mini{font:800 16px Unbounded,sans-serif}
.qk{width:100%;max-width:280px}.qk div{position:relative;height:18px;border:2px solid var(--ink);border-radius:999px;background:linear-gradient(90deg,var(--c2),var(--panel) 50%,var(--c1))}.qk div::after{content:"K";position:absolute;left:50%;top:-3px;bottom:-3px;width:3px;background:var(--ink)}.qk i{position:absolute;top:-6px;width:4px;height:26px;background:var(--c3);border:1.5px solid var(--ink);transition:width .3s}.qk i{left:auto}.qk span{position:absolute;left:-20px;top:-1px;font-weight:800;font-size:12px}.qk p{margin:4px 0 0;font-weight:800;text-align:center}
.cell{width:100%;max-width:330px}.cell .wire{fill:none;stroke:var(--ink);stroke-width:3}.cell .vm{fill:#10132A;stroke:var(--ink);stroke-width:2}.cell .vmt{font:700 13px ui-monospace,Menlo,monospace;fill:#9dffcf;text-anchor:middle}.cell .eflow{fill:var(--c3);stroke:var(--ink);stroke-width:1.2}.cell .bridge{fill:none;stroke:#e9e1c8;stroke-width:12}.cell .bridge+text{font-size:10px}
.meltemp{width:220px}.meltemp .view{fill:#2a2a3a;stroke:var(--ink);stroke-width:2.5}.meltemp .cap{fill:rgba(230,240,255,.35);stroke:#ddd;stroke-width:1.5}
.sepf{height:260px}.exflasks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.exflasks svg{width:70px}.exflasks small{font-size:11px;color:var(--muted);max-width:90px;text-align:center}
.tlc{height:270px}.tlc .plate{fill:#f6f9f2;stroke:var(--ink);stroke-width:2.5}.tlc .plate.uv{fill:#7cf2a4}.tlc .base{stroke:#888;stroke-width:1.4}.tlc .front{stroke:var(--c2);stroke-width:1.6;stroke-dasharray:5 3}.tlc .solv{fill:rgba(150,200,255,.5)}.tlc .spot{stroke:rgba(0,0,0,.35);transition:opacity .3s}
.colsvg{height:280px}.fracs{display:flex;flex-wrap:wrap;gap:6px;max-width:220px}.frac{display:flex;flex-direction:column;align-items:center;font-size:11px;font-weight:700}.frac div{width:16px;height:46px;border:2px solid var(--ink);border-radius:0 0 8px 8px}
.dist{width:100%;max-width:280px}.dist .bead{fill:#ddd;stroke:#888}.dist .cond{stroke:rgba(120,190,255,.6);stroke-width:12;stroke-linecap:round}.dist .flame-s{fill:#5aa0ff}
.gel{height:270px}.gel .gelbg{fill:#eef1f7;stroke:var(--ink);stroke-width:2.5}.gel .wellg{fill:#cfd6e6}.gel .band{fill:#1b2a8f;transition:opacity .6s}.gel .dye{stroke:#3d6bff;stroke-width:2;opacity:.6}
.synstep h3,.synres h3{font:800 19px Unbounded,sans-serif;margin:6px 0 12px}.flags{color:var(--c1);font-weight:700}
@media (max-width:760px){.rig{grid-template-columns:1fr}.bwrap svg{height:240px}}

.sitefoot{padding:18px clamp(16px,4vw,48px) 28px;border-top:1px solid var(--line, #ccc);font-size:13px;opacity:.75;margin-left:var(--footml,0)}.sitefoot p{margin:4px 0}.sitefoot summary{cursor:pointer}
@media (min-width:901px){.sitefoot{max-width:1150px;margin:0 auto;padding-left:290px}}

/* ---------- organic illustrations (smiles.js / orgviz.js) ---------- */
.ovz{margin:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.ovz figcaption{font-size:.92rem;color:var(--muted);text-align:center;max-width:60ch;line-height:1.45}
.ovz figcaption b{color:var(--ink)}
.rxn{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;width:100%}
.rxm{display:inline-flex;flex-direction:column;align-items:center;gap:2px;animation:rxIn .45s cubic-bezier(.2,1.3,.4,1) both}
.rxm:nth-child(3){animation-delay:.12s}.rxm:nth-child(5){animation-delay:.24s}.rxm:nth-child(7){animation-delay:.36s}
.rxm small{font:700 .74rem "Atkinson Hyperlegible",sans-serif;color:var(--muted);text-align:center;max-width:16ch}
.rxn svg.mol,.ogi svg.mol{width:auto;max-width:210px;max-height:150px;height:auto}
.vis .rxn svg.mol{max-width:210px}
.rxplus{font:800 1.4rem Unbounded,sans-serif;color:var(--ink)}
.rxres{font:800 1.6rem Unbounded,sans-serif;color:var(--c2);padding:0 4px}
.rxarrow{display:inline-flex;flex-direction:column;align-items:center;min-width:120px}
.rxarrow svg line{stroke:var(--ink);stroke-width:2.4}.rxarrow svg polygon{fill:var(--ink)}
.rxarrow svg{animation:rxArr .6s ease both .15s;transform-origin:left center}
.rxc,.rxc2{font:700 .8rem "Atkinson Hyperlegible",sans-serif;color:var(--ink);text-align:center;max-width:22ch;line-height:1.25;min-height:1em}
.rxc2{color:var(--muted)}
.rxq{display:inline-grid;place-items:center;min-width:64px;height:64px;border:var(--bw) dashed var(--c1);border-radius:14px;font:800 1.6rem Unbounded,sans-serif;color:var(--c1);animation:rxPulse 1.6s ease-in-out infinite}
.rxq.sm{min-width:38px;height:30px;font-size:1rem;border-radius:9px}
.rxt{font:800 1rem "Atkinson Hyperlegible",sans-serif;color:var(--ink);padding:4px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--paper)}
.rxc .rxt,.rxc2 .rxt{border:0;padding:0;background:none;font-size:.8rem}
.smierr{font:600 .8rem monospace;color:var(--c1)}
.ogal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.ogi{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;border:2px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:14px;background:var(--paper);animation:rxIn .45s cubic-bezier(.2,1.3,.4,1) both}
.ogi b{font:700 .78rem "Atkinson Hyperlegible",sans-serif;text-align:center;max-width:22ch}
.ogi svg.newman{max-width:170px}
.ochain{display:grid;gap:6px;width:100%}.ochain>div{display:grid;grid-template-columns:110px 1fr;align-items:center}.ochain>div>b{font:800 .8rem Unbounded,sans-serif}
svg.fish{max-width:260px}svg.fish line{stroke:var(--ink);stroke-width:3}svg.fish .fha{fill:none;stroke:var(--c1);stroke-width:2.5;stroke-dasharray:200;stroke-dashoffset:200;animation:drawArw 1s ease forwards .2s}svg.fish marker path{fill:var(--c1)}
svg.spec.ruler{max-width:520px}svg.spec .zone{fill:var(--c3);opacity:.55;animation:rxIn .5s ease both}
svg.spec.mult{max-width:300px}svg.spec.ms{max-width:360px}
svg.chair{max-width:230px}svg.chair line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}svg.chair line.hb{stroke-width:1.6;opacity:.45}svg.chair line.me{stroke:var(--c1)}svg.chair .meb{fill:var(--c3);stroke:var(--ink);stroke-width:2}
@keyframes rxIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes rxArr{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rxPulse{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.rxm,.ogi,.rxarrow svg,.rxq,svg.fish .fha{animation:none!important;stroke-dashoffset:0}}

/* ---------- 3D orbital viewer (orb3d.js) ---------- */
.orbbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.orbwrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:14px;align-items:start}
@media (max-width:760px){.orbwrap{grid-template-columns:1fr}}
.orbc{width:100%;height:auto;aspect-ratio:640/380;background:#1D1B3A;border:var(--bw) solid var(--ink);border-radius:16px;touch-action:none;cursor:grab}
.orbc:active{cursor:grabbing}
.orbside{display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.orbside label{display:flex;gap:8px;align-items:center;font-weight:700}
.orbside input[type=range]{width:100%}
.orbinfo{padding:10px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--paper2);line-height:1.45}
.orbbar2{font:700 .82rem "Atkinson Hyperlegible",sans-serif}
.ovbar{height:12px;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper)}.ovbar i{display:block;height:100%;background:var(--c4);transition:width .2s}
.orbbtns{display:flex;flex-wrap:wrap;gap:6px}
svg.twist{max-width:240px}svg.twist .pf{fill:var(--c1);opacity:.75;stroke:var(--ink);stroke-width:2}svg.twist .pb{fill:var(--c2);opacity:.6;stroke:var(--ink);stroke-width:2}svg.twist .b{opacity:.35}svg.twist .ctr{fill:var(--ink)}
.ovz>svg.mol{max-height:230px}
.ogi svg.newman{width:150px;max-width:150px}.ovz svg.mol .hl{fill-opacity:.6}
.vis .ovz>svg.mol{width:auto;max-width:100%;min-width:230px;max-height:240px}
#oTw label{display:block}#oTw label input{display:block;width:100%;margin-top:4px}
.trick{margin:14px 0;padding:10px 14px;border:var(--bw) solid var(--ink);border-radius:12px;background:color-mix(in srgb,var(--c3) 28%,var(--paper));box-shadow:3px 3px 0 var(--ink);line-height:1.5}
.trick.warn{background:color-mix(in srgb,var(--c1) 16%,var(--paper))}
.trick b:first-child{font:800 12px Unbounded,sans-serif;letter-spacing:.03em;margin-right:4px}
.lfig{margin:14px 0;padding:12px;border:2px dashed color-mix(in srgb,var(--ink) 30%,transparent);border-radius:14px}
.page .ogal{margin:12px 0}.page ol li,.page ul li{margin:4px 0;line-height:1.5}
/* general chemistry diagrams (genlearn.js) */
svg.gdia{width:100%;max-width:460px;height:auto;font-family:"Atkinson Hyperlegible",sans-serif}
svg.gdia line,svg.gdia path{stroke:var(--ink);stroke-width:2;fill:none}
svg.gdia .ax{stroke-width:2.4}svg.gdia .lv{stroke-width:3}svg.gdia .dash{stroke-dasharray:5 5;opacity:.6}
svg.gdia text{fill:var(--ink);font-size:12px;text-anchor:middle;font-weight:700}svg.gdia .al{fill:var(--muted);font-size:12px;text-anchor:middle}
svg.gdia .lb.l{text-anchor:start}svg.gdia .lb.r{text-anchor:end}svg.gdia .big{font:800 16px Unbounded,sans-serif;fill:var(--muted);opacity:.7}
svg.gdia .cv,svg.gdia .cv2{fill:none;stroke:var(--c2);stroke-width:3;stroke-linejoin:round}svg.gdia .cv2{stroke:var(--c4);stroke-dasharray:7 5}
svg.gdia .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:drawArw 1.8s ease forwards}svg.gdia .cv2.draw{animation-delay:.6s}
svg.gdia .tr{stroke-width:3;stroke-dasharray:300;stroke-dashoffset:300;animation:drawArw .8s ease forwards}svg.gdia marker path{fill:var(--ink);stroke:none}
svg.gdia .c1{stroke:#e5484d}svg.gdia .c2{stroke:#2ec4a0}svg.gdia .c3{stroke:var(--c5)}svg.gdia .c4{stroke:#3D6BFF}svg.gdia .c5{stroke:#8e4ec6}
svg.gdia .br{stroke:var(--c1);stroke-width:2.5}svg.gdia .pt{fill:var(--c1);stroke:var(--ink);stroke-width:2}
svg.gdia .beak{fill:color-mix(in srgb,var(--c2) 5%,transparent);stroke:var(--ink);stroke-width:2.5}svg.gdia .sol{stroke:none;opacity:.35}svg.gdia .c2f{fill:#9aa7b8}svg.gdia .c1f{fill:#3D6BFF}
svg.gdia .elec{fill:#8a8f98;stroke:var(--ink);stroke-width:2}svg.gdia .elec.c{fill:#c97a3d}svg.gdia .salt{stroke:#c9a227;stroke-width:12;opacity:.6}svg.gdia .wire{stroke-width:2.5}
svg.gdia .volt{fill:var(--c3);stroke:var(--ink);stroke-width:2}svg.gdia .e{fill:var(--c2);stroke:none}svg.gdia .gm{fill:var(--c1);stroke:var(--ink);stroke-width:1.5}
.obrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.obox{display:flex;align-items:center;gap:4px}.obox b{font:800 13px Unbounded,sans-serif;margin-right:4px}.obox span{display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid var(--ink);font:800 16px sans-serif;background:var(--paper)}
@media (prefers-reduced-motion:reduce){svg.gdia .draw,svg.gdia .tr{animation:none;stroke-dashoffset:0}}