/* Layout concept: a lab notebook app — graph-paper ground, a sticky top bar, chapter rail + content column on wide screens, one column on phones. */
:root{
  --paper:#eef3f6; --surface:#ffffff; --surface-2:#f6f9fb; --ink:#13202b; --ink-2:#4b5a68; --ink-3:#7b8996;
  --line:#d3dce3; --grid:rgba(19,32,43,.055);
  --accent:#c2183a; --accent-ink:#ffffff; --accent-soft:#fbe6ea;
  --phy:#2457c5; --chem:#b8600a; --bio:#1a7f48; --ict:#7a3fc0; --gen:#0e7480;
  --phy-soft:#e3ebfb; --chem-soft:#fbeedd; --bio-soft:#e0f3e8; --ict-soft:#efe6fa; --gen-soft:#ddf1f3;
  --ok:#17803f; --ok-soft:#dff3e6; --bad:#b42318; --bad-soft:#fde4e1;
  --shadow:0 1px 2px rgba(19,32,43,.06),0 6px 18px rgba(19,32,43,.06);
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible","Mukta","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --f-dev:"Mukta","Noto Sans Devanagari","Nirmala UI",sans-serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0d151c; --surface:#142029; --surface-2:#18262f; --ink:#e5edf2; --ink-2:#a1b2c0; --ink-3:#71839a;
  --line:#26394a; --grid:rgba(229,237,242,.04);
  --accent:#ff5c78; --accent-ink:#1a070b; --accent-soft:#3b1720;
  --phy:#83a8ff; --chem:#f4a948; --bio:#56d394; --ict:#bb94ff; --gen:#4fc9d3;
  --phy-soft:#17264a; --chem-soft:#3a2810; --bio-soft:#12301f; --ict-soft:#2a1a44; --gen-soft:#0f2f33;
  --ok:#56d394; --ok-soft:#12301f; --bad:#ff7a6b; --bad-soft:#3d1713;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0d151c; --surface:#142029; --surface-2:#18262f; --ink:#e5edf2; --ink-2:#a1b2c0; --ink-3:#71839a;
  --line:#26394a; --grid:rgba(229,237,242,.04);
  --accent:#ff5c78; --accent-ink:#1a070b; --accent-soft:#3b1720;
  --phy:#83a8ff; --chem:#f4a948; --bio:#56d394; --ict:#bb94ff; --gen:#4fc9d3;
  --phy-soft:#17264a; --chem-soft:#3a2810; --bio-soft:#12301f; --ict-soft:#2a1a44; --gen-soft:#0f2f33;
  --ok:#56d394; --ok-soft:#12301f; --bad:#ff7a6b; --bad-soft:#3d1713;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--f-body);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
a{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.15;text-wrap:balance;margin:0}
.dev,[lang="ne"]{font-family:var(--f-dev)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:14px;max-width:1240px;margin:0 auto;padding-block:10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.brand-mark{width:34px;height:34px;flex:none}
.brand b{font-family:var(--f-display);font-size:1.15rem;letter-spacing:-.01em;white-space:nowrap}
.brand small{display:block;font-size:.72rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.top nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.top nav a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-weight:700;font-size:.92rem}
.top nav a[aria-current="page"],.top nav a:hover{background:var(--accent-soft);color:var(--accent)}
@media (max-width:560px){.brand small{display:none}.top nav a{padding:6px 9px;font-size:.85rem}}

.wrap{max-width:1240px;margin:0 auto;padding-block:24px 64px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* chips & badges */
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.a-phy{--c:var(--phy);--cs:var(--phy-soft)} .a-chem{--c:var(--chem);--cs:var(--chem-soft)}
.a-bio{--c:var(--bio);--cs:var(--bio-soft)} .a-ict{--c:var(--ict);--cs:var(--ict-soft)} .a-gen{--c:var(--gen);--cs:var(--gen-soft)}
.chip.area{background:var(--cs);color:var(--c)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:8px 14px;border-radius:8px;font-weight:700;cursor:pointer;text-decoration:none;font-size:.95rem}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;margin-bottom:28px}
.hero h1{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lead{font-size:1.12rem;color:var(--ink-2);max-width:60ch;margin:14px 0 18px}
.hero-canvas{width:100%;aspect-ratio:4/3;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:block}
.stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
.stats div{min-width:0}
.stats b{display:block;font-family:var(--f-display);font-size:1.8rem;line-height:1}
.stats span{font-size:.82rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
@media (max-width:820px){.hero{grid-template-columns:1fr}}

.classbar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px}
.classbar button{border:1px solid var(--line);background:var(--surface);padding:10px 18px;border-radius:10px;cursor:pointer;font-weight:700}
.classbar button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.classbar button small{display:block;font-weight:400;font-size:.75rem;opacity:.8}

.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:30px 0 12px}
.section-h h2{font-size:1.6rem}
.section-h p{margin:0;color:var(--ink-2)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px;min-width:0;position:relative}
a.card:hover{border-color:var(--c,var(--ink-3));box-shadow:var(--shadow)}
.card .num{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3)}
.card h3{font-size:1.12rem}
.card .ne{font-family:var(--f-dev);color:var(--ink-2);font-size:.95rem}
.card .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:auto;font-size:.82rem;color:var(--ink-3)}
.card .done{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--ok);color:var(--surface);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.card .sw{height:4px;border-radius:2px;background:var(--c)}
.card.soon{opacity:.85;border-style:dashed}

.unit-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.unit-list li{display:flex;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;align-items:center}
.unit-list li span{min-width:0}
.notice{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:14px 16px}

/* chapter layout */
.ch{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px}
.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr,57px) + 14px);align-self:start;max-height:calc(100vh - 90px);overflow:auto;padding-right:4px}
.rail h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 8px}
.rail a{display:flex;gap:8px;padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--ink-2);font-size:.9rem;line-height:1.3}
.rail a .mono{color:var(--ink-3);flex:none}
.rail a[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.rail a:hover{background:var(--surface)}
@media (max-width:960px){.ch{grid-template-columns:1fr}.rail{display:none}}

.ch-head{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:10px;position:relative;overflow:hidden}
.ch-head::after{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--c)}
.ch-head .eyebrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:.85rem;color:var(--ink-3)}
.ch-head h1{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.015em}
.ch-head .ne{font-family:var(--f-dev);font-size:1.15rem;color:var(--ink-2)}
.ch-head .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.weight{font-size:.88rem;color:var(--ink-2)}
.weight b{color:var(--ink)}

.tabs{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr,57px));z-index:10;display:flex;gap:4px;overflow-x:auto;background:var(--paper);padding:10px 0;margin:8px 0 6px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:700;color:var(--ink-2);display:flex;gap:6px;align-items:center}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tabs .count{font-family:var(--f-mono);font-size:.75rem;opacity:.75}

.pane{display:grid;gap:18px}
.block{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0}
.block h2{font-size:1.35rem;margin-bottom:8px}
.block h3{font-size:1.12rem;margin:14px 0 6px}
.prose{max-width:72ch}
.prose p{margin:.5em 0}
.prose ul,.prose ol{padding-left:1.3em;margin:.4em 0}
.prose li{margin:.2em 0}
.prose table{border-collapse:collapse;width:100%;font-size:.93rem;margin:.6em 0}
.prose th,.prose td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
.prose th{background:var(--surface-2);font-weight:700}
.tbl{overflow-x:auto}
.objectives{background:var(--cs);border-radius:10px;padding:14px 18px}
.objectives h2{font-size:1rem;text-transform:uppercase;letter-spacing:.07em;color:var(--c)}
.objectives ul{margin:6px 0 0;padding-left:1.2em}
.sec-num{font-family:var(--f-mono);font-size:.8rem;color:var(--c);letter-spacing:.05em}
.sec-new{display:inline-block;margin-left:10px;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:600 .68rem var(--f-body);letter-spacing:.02em;vertical-align:1px}
.sec-note{font-size:.88rem;color:var(--ink-2);background:var(--surface-2);border:1px dashed var(--line);border-radius:8px;padding:6px 10px;margin:4px 0 10px}
.tip{border-left:4px solid var(--c);background:var(--surface-2);padding:10px 14px;border-radius:0 8px 8px 0;margin:10px 0;font-size:.96rem}
.tip b:first-child{color:var(--c)}
.exam-tip{border-left-color:var(--accent)}
.exam-tip b:first-child{color:var(--accent)}

figure.fig{margin:12px 0;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px;overflow-x:auto}
figure.fig svg{display:block;width:100%;max-width:640px;height:auto;margin:0 auto}
figure.fig figcaption{font-size:.85rem;color:var(--ink-2);text-align:center;margin-top:6px}
/* SVG figure classes (kept in sync with tools/figstyle for slides) */
.fig .ln{stroke:var(--ink);fill:none;stroke-width:2}
.fig .lt{stroke:var(--ink-3);fill:none;stroke-width:1.4}
.fig .ld{stroke:var(--ink-3);fill:none;stroke-width:1.4;stroke-dasharray:5 4}
.fig .la{stroke:var(--accent);fill:none;stroke-width:2.4}
.fig .lp{stroke:var(--phy);fill:none;stroke-width:2.4}
.fig .lc{stroke:var(--chem);fill:none;stroke-width:2.4}
.fig .lb{stroke:var(--bio);fill:none;stroke-width:2.4}
.fig .fs{fill:var(--surface);stroke:var(--ink);stroke-width:1.6}
.fig .fp{fill:var(--phy-soft);stroke:var(--phy);stroke-width:1.6}
.fig .fc{fill:var(--chem-soft);stroke:var(--chem);stroke-width:1.6}
.fig .fb{fill:var(--bio-soft);stroke:var(--bio);stroke-width:1.6}
.fig .fi{fill:var(--ict-soft);stroke:var(--ict);stroke-width:1.6}
.fig .fg{fill:var(--gen-soft);stroke:var(--gen);stroke-width:1.6}
.fig .fa{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.6}
.fig .dk{fill:var(--ink)}
.fig .dA{fill:var(--accent)} .fig .dP{fill:var(--phy)} .fig .dC{fill:var(--chem)} .fig .dB{fill:var(--bio)}
.fig .tx{fill:var(--ink);font:600 13px var(--f-body)}
.fig .tm{fill:var(--ink-2);font:12px var(--f-body)}
.fig .tb{fill:var(--ink);font:700 15px var(--f-display)}
.fig .tw{fill:var(--surface);font:700 12px var(--f-body)}

.terms{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.term{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.term b{display:block}
.term .ne{font-family:var(--f-dev);color:var(--c);font-weight:600}
.term p{margin:4px 0 0;font-size:.9rem;color:var(--ink-2)}

.formula{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);align-items:baseline}
.formula:last-child{border-bottom:0}
.formula .eq{font-family:var(--f-mono);font-size:1.02rem;font-weight:700;color:var(--c)}
.formula small{color:var(--ink-3)}
@media (max-width:620px){.formula{grid-template-columns:1fr}}

.example{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--surface-2)}
.example + .example{margin-top:10px}
.example .q{font-weight:700}
.example ol{margin:8px 0 0;padding-left:1.3em}
.example .ans{margin-top:8px;font-weight:700;color:var(--ok)}

/* labs */
.lab{display:grid;gap:12px}
.lab-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.lab-stage{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0}
.lab-stage canvas{display:block;width:100%;height:auto;max-width:100%;border-radius:8px;background:var(--surface);touch-action:manipulation}
.lab-stage svg{display:block;width:100%;height:auto;max-width:100%}
.controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 18px;margin-top:12px}
.ctl{display:grid;gap:4px;min-width:0}
.ctl label{font-size:.85rem;font-weight:700;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px}
.ctl label output{font-family:var(--f-mono);color:var(--ink)}
.ctl input[type=range]{width:100%;accent-color:var(--accent)}
.ctl select,.ctl input[type=number],.ctl input[type=text]{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.readout{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.readout div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
.readout span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.readout b{font-family:var(--f-mono);font-size:1.05rem;font-variant-numeric:tabular-nums;word-break:break-word}
.try{background:var(--cs);border-radius:10px;padding:12px 16px}
.try h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;color:var(--c);margin-bottom:4px}
.try ol{margin:0;padding-left:1.3em}
.status{margin-top:10px;padding:8px 12px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-weight:700}
.status.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.status.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}

/* sorter game */
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.bin{border:2px dashed var(--line);border-radius:10px;padding:8px;min-height:90px;background:var(--surface)}
.bin h5{margin:0 0 6px;font:700 .85rem var(--f-display)}
.bin.hot{border-color:var(--accent)}
.token{display:inline-flex;align-items:center;gap:6px;margin:3px;padding:6px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line);cursor:pointer;font-weight:700;font-size:.9rem;user-select:none}
.token[aria-pressed="true"]{outline:3px solid var(--accent)}
.token.right{background:var(--ok-soft);border-color:var(--ok)}
.token.wrong{background:var(--bad-soft);border-color:var(--bad)}
.pool{min-height:48px}

/* practice */
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--surface);padding:6px 12px;border-radius:999px;cursor:pointer;font-weight:700;font-size:.88rem}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:grid;gap:8px;min-width:0}
.qcard .qh{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.qcard .qt{font-weight:700}
.qcard .mk{flex:none;font-family:var(--f-mono);font-size:.78rem;padding:2px 8px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.qcard ol.opts{margin:0;padding-left:1.4em;list-style:lower-roman}
.qcard details summary{cursor:pointer;color:var(--accent);font-weight:700;font-size:.92rem}
.qcard .model{margin-top:6px;padding:10px 12px;border-radius:8px;background:var(--ok-soft);color:var(--ink)}
.qcard .model p{margin:.3em 0}
.qtype{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

/* quiz */
.quiz{display:grid;gap:12px;max-width:760px}
.quiz .progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.quiz .progress i{display:block;height:100%;background:var(--accent);transition:width .3s}
.quiz .opt{display:block;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 14px;cursor:pointer;font-weight:600}
.quiz .opt:hover:not([disabled]){border-color:var(--ink-3)}
.quiz .opt.right{border-color:var(--ok);background:var(--ok-soft)}
.quiz .opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.quiz .opt[disabled]{cursor:default}
.quiz .fb{padding:10px 14px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.score{font-family:var(--f-display);font-size:3rem;line-height:1}

/* flashcards */
.flash{perspective:1200px;max-width:620px}
.flash .cardf{position:relative;height:260px;transform-style:preserve-3d;transition:transform .5s;cursor:pointer}
.flash .cardf.flip{transform:rotateY(180deg)}
.flash .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--surface);border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;padding:24px;text-align:center;box-shadow:var(--shadow);overflow:auto}
.flash .face.back{transform:rotateY(180deg);background:var(--cs)}
.flash .face b{font-family:var(--f-display);font-size:1.45rem}
.flash .face small{position:absolute;top:10px;left:14px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* exam blueprint */
.bp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:860px){.bp{grid-template-columns:1fr}}
.bars{display:grid;gap:6px}
.bar{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) 34px;gap:8px;align-items:center;font-size:.9rem}
.bar .track{height:14px;background:var(--surface-2);border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.bar .track i{display:block;height:100%;background:var(--c)}
.bar .v{font-family:var(--f-mono);text-align:right}
.qtypes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:560px){.qtypes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qtypes div{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.qtypes b{font-family:var(--f-display);font-size:1.6rem;display:block}
.qtypes span{font-size:.85rem;color:var(--ink-2)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--c);margin-right:5px;vertical-align:middle}

.foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-3);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:22px}
.pager a{max-width:48%}
@media (max-width:560px){.pager a{max-width:100%}}
/* hotspots */
.hs{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.hs-fig{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px}
.hs-fig svg{display:block;width:100%;height:auto;max-height:440px}
.hs-pin{cursor:pointer;outline:none}
.hs-pin circle{fill:var(--accent);stroke:var(--surface);stroke-width:2.5;transition:transform .15s}
.hs-pin text{fill:#fff;font:700 12px var(--f-body);pointer-events:none}
.hs-pin:hover circle,.hs-pin:focus-visible circle{fill:var(--ink)}
.hs-pin.on circle{fill:var(--phy)} .hs-pin.ok circle{fill:var(--ok)} .hs-pin.bad circle{fill:var(--bad)}
.hs-info{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:12px 14px;min-height:90px}
.hs-info b{font-family:var(--f-display);font-size:1.05rem}.hs-info p{margin:.4em 0 0;color:var(--ink-2)}
@media(max-width:640px){.hs{grid-template-columns:1fr}}
/* punnett */
.punnett{display:grid;gap:4px;margin-top:12px;max-width:640px}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 4px;text-align:center;min-width:0}
.pc b{display:block;font-family:var(--f-mono);font-size:.95rem}.pc small{display:block;font-size:.68rem;color:var(--ink-2);line-height:1.2}
.pc.head{background:var(--surface-2);font-family:var(--f-mono);font-weight:700}.pc.dom{background:var(--bio-soft);border-color:var(--bio)}
/* periodic table */
.ptable{display:grid;grid-template-columns:22px repeat(18,minmax(0,1fr));gap:2px;margin-top:12px;overflow-x:auto}
.pg{font:10px var(--f-mono);color:var(--ink-3);text-align:center;align-self:center}
.pe{border:0;border-radius:4px;padding:3px 1px;color:#13202b;cursor:pointer;min-width:0;aspect-ratio:1/1.05;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-body)}
.pe small{font-size:.55rem;line-height:1}.pe b{font-size:clamp(.6rem,1.6vw,.95rem)}
.pe.on{outline:3px solid var(--ink);outline-offset:1px}
/* pH */
.ph-tubes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}
.ph-tube{text-align:center}.ph-tube i{display:block;height:90px;max-width:44px;margin:0 auto 4px;border:2px solid var(--ink);border-top:0;border-radius:0 0 22px 22px;transition:background .4s}
.ph-tube small{font-size:.75rem;color:var(--ink-2)}
.ph-scale{display:grid;grid-template-columns:repeat(15,1fr);margin-top:14px;border-radius:6px;overflow:hidden}
.ph-scale span{color:#fff;font:700 .75rem var(--f-mono);text-align:center;padding:5px 0}
.ph-pin{color:var(--ink);transition:margin .4s;width:16px;text-align:center}
/* encoder */
.enc{display:grid;grid-template-columns:1fr auto 1.6fr auto 1fr;gap:8px;align-items:center;margin-top:12px}
.enc>div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
.enc .arr{background:none;border:0;color:var(--ink-3);font-weight:700}
.enc p{margin:4px 0 0;word-break:normal;overflow-wrap:anywhere;font-size:.85rem}.enc .flip{background:var(--bad-soft);color:var(--bad)}
@media(max-width:640px){.enc{grid-template-columns:1fr}.enc .arr{text-align:center}}
/* ---------- games ---------- */
.btn.small{padding:5px 11px;font-size:.85rem}
.xpchip{background:var(--ink)!important;color:var(--paper)!important;font-family:var(--f-mono);font-size:.78rem!important;white-space:nowrap}
@media (max-width:560px){.xpchip{display:none}}
.play-head .ph-top{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.xpbar{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;margin-top:12px;min-width:0}
.xpbar .lv{display:flex;flex-direction:column;line-height:1.1}.xpbar .lv b{font-family:var(--f-display);font-size:1.15rem}.xpbar .lv span{font:.78rem var(--f-mono);color:var(--ink-3)}
.xpbar .track{height:12px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.xpbar .track i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#e0a31a);transition:width .6s}
.xpbar small{grid-column:2;color:var(--ink-3);font-size:.75rem}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:14px 0}
.game{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:18px 16px 16px;cursor:pointer;color:var(--ink);font:inherit;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s;min-width:0}
.game:hover:not([disabled]){transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--ink-3)}
.game[disabled]{opacity:.5;cursor:not-allowed}
.game .gi{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font:800 1.35rem var(--f-display);color:#fff;background:var(--accent)}
.g-lightning .gi{background:#e0a31a}.g-short .gi{background:var(--phy)}.g-memory .gi{background:var(--ict)}.g-practice .gi{background:var(--bio)}
.game b{font-family:var(--f-display);font-size:1.15rem}.game .gd{color:var(--ink-2);font-size:.9rem;line-height:1.35}.game .gb{margin-top:auto;font:.8rem var(--f-mono);color:var(--ink-3)}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--line);border-radius:999px;padding:4px 10px;font-size:.8rem;color:var(--ink-3)}
.badge.got{border-style:solid;border-color:#e0a31a;color:var(--ink);background:color-mix(in srgb,#e0a31a 14%,var(--surface))}.badge i{font-style:normal;color:#e0a31a}
.gamebox{display:grid;gap:12px;position:relative}
.gbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.gbar .sp{flex:1}
.hud{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:8px 14px}
.hud small{display:block;font:.68rem var(--f-mono);letter-spacing:.06em;color:var(--ink-3)}.hud b{font:800 1.2rem var(--f-display);font-variant-numeric:tabular-nums}
.hud .stk.hot b{color:var(--accent)}
.hearts{font-size:1.45rem;letter-spacing:2px}.hearts i{font-style:normal;color:var(--line);transition:color .3s,transform .3s}.hearts i.on{color:var(--accent)}
.ring{width:52px;height:52px;margin-left:auto}.ring circle{fill:none;stroke-width:5}.ring .bg{stroke:var(--line)}.ring .fg{stroke:var(--ok);transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke .3s}
.ring.warn .fg{stroke:var(--bad)}.ring text{font:800 14px var(--f-display);fill:var(--ink)}
.gamebox .progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden}.gamebox .progress i{display:block;height:100%;background:var(--accent);transition:width .3s}
.qunit{font:.75rem var(--f-mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.arena-q{font-size:1.15rem;font-weight:700}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:640px){.opts{grid-template-columns:1fr}}
.gamebox .opt{position:relative;display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;cursor:pointer;font:600 1rem var(--f-body);color:var(--ink);transition:transform .12s,border-color .12s}
.gamebox .opt:hover:not([disabled]){transform:translateY(-2px);border-color:var(--ink-3)}
.gamebox .opt .key{flex:none;width:24px;height:24px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font:700 .8rem var(--f-mono)}
.gamebox .opt.right{border-color:var(--ok);background:var(--ok-soft)}.gamebox .opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.gamebox .opt.gone{opacity:.25}.gamebox .opt[disabled]{cursor:default}
.powers{display:flex;gap:8px;flex-wrap:wrap}.pw{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 14px;font:700 .85rem var(--f-mono);cursor:pointer;color:var(--ink)}
.pw:hover:not([disabled]){border-color:#e0a31a;background:color-mix(in srgb,#e0a31a 12%,var(--surface))}.pw[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.gamebox .fb{padding:10px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.shake{animation:shake .42s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.pop{position:absolute;right:14px;top:6px;font:800 1.2rem var(--f-display);color:var(--ink-2);pointer-events:none;animation:popup 1.05s ease-out forwards;z-index:3}
.pop.good{color:var(--ok)}
@keyframes popup{0%{opacity:0;transform:translateY(8px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(-28px) scale(1)}}
.result{text-align:center;display:grid;gap:8px;justify-items:center;padding:8px 0}
.result h2{margin:0;font-size:1.8rem}.result .big{font:800 3.2rem var(--f-display);line-height:1}.result .big small{font-size:1rem;color:var(--ink-3)}
.result .rl{list-style:none;padding:0;margin:4px 0;color:var(--ink-2)}.result .bolt{font-size:3rem;line-height:1}
.stars{font-size:2.4rem;letter-spacing:6px}.stars span{color:var(--line)}.stars span.on{color:#e0a31a;animation:starin .5s backwards}
.stars span:nth-child(2).on{animation-delay:.15s}.stars span:nth-child(3).on{animation-delay:.3s}
@keyframes starin{0%{transform:scale(0) rotate(-90deg)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
.newbest{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:3px 14px;font-weight:700;font-size:.85rem}
.xpgain{font:800 1.1rem var(--f-mono);color:#b7820f;margin:0}
.review{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--surface-2)}
.review summary{cursor:pointer;font-weight:700}.rv{border-top:1px solid var(--line);padding:10px 0;display:grid;gap:4px}.rv small{color:var(--ink-3)}.rv .why{color:var(--ink-2);font-size:.92rem}
.lbar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}.lbar i{display:block;height:100%;width:100%;background:#e0a31a}.lbar.warn i{background:var(--bad)}
.lcard{position:relative;border:2px solid var(--line);border-radius:16px;padding:22px;min-height:170px;display:grid;align-content:center;gap:12px;background:var(--surface);transition:border-color .15s,background .15s}
.lcard small{color:var(--ink-3);font:.72rem var(--f-mono)}.lcard .lq{font-size:1.12rem;font-weight:700}.lcard .la{font-size:1.08rem;padding:10px 12px;background:var(--surface-2);border-radius:10px}
.lcard.ok{border-color:var(--ok);background:var(--ok-soft)}.lcard.no{border-color:var(--bad);background:var(--bad-soft)}
.tf{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tfb{justify-content:center;font-size:1.15rem;padding:14px;border-width:2px}
.tfb.yes{border-color:var(--ok);color:var(--ok)}.tfb.no{border-color:var(--bad);color:var(--bad)}.tfb:hover{transform:translateY(-2px)}
.sa-in{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px;font:1rem var(--f-body);background:var(--surface);color:var(--ink);resize:vertical}
.sa-in:focus{outline:2px solid var(--phy);outline-offset:1px}
.mk{display:inline-block;background:var(--phy-soft);color:var(--phy);border-radius:6px;padding:1px 8px;font:.75rem var(--f-mono);margin-right:6px;vertical-align:middle}
.sa-out{display:grid;gap:10px;position:relative}.sa-out small{font:.7rem var(--f-mono);letter-spacing:.06em;color:var(--ink-3);display:block;margin-bottom:4px}
.kw .k{display:inline-block;margin:2px 4px 2px 0;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-3);font-size:.85rem}.kw .k.hit{border-color:var(--ok);background:var(--ok-soft);color:var(--ok);font-weight:700}
.model{border-left:4px solid var(--bio);background:var(--bio-soft);padding:10px 14px;border-radius:8px}.model table{border-collapse:collapse}.model td,.model th{border:1px solid var(--line);padding:4px 8px}
.rate{flex-direction:column;align-items:flex-start;gap:0;min-width:120px}.rate small{color:var(--ink-3);font:.75rem var(--f-mono)}.rate.sugg{outline:3px solid #e0a31a;outline-offset:1px}
.hint{margin:0;color:var(--ink-3);font-size:.88rem}
.mboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:620px){.mboard{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mtile{position:relative;aspect-ratio:1/0.8;border:0;padding:0;background:none;cursor:pointer;perspective:700px;min-width:0}
.mtile .mf,.mtile .mb{position:absolute;inset:0;border-radius:12px;display:grid;place-items:center;padding:8px;backface-visibility:hidden;transition:transform .45s;text-align:center;overflow:hidden}
.mtile .mf{background:var(--ink);color:var(--paper);font:800 1.6rem var(--f-display)}
.mtile.q .mf{background:linear-gradient(135deg,var(--phy),#173d8f)}.mtile.a .mf{background:linear-gradient(135deg,var(--chem),#8a4706)}
.mtile .mb{transform:rotateY(180deg);background:var(--surface);border:2px solid var(--line);font-size:clamp(.66rem,1.6vw,.9rem);font-weight:700;color:var(--ink);line-height:1.2}
.mtile.q .mb{border-color:var(--phy)}.mtile.a .mb{border-color:var(--chem)}
.mtile.up .mf{transform:rotateY(180deg)}.mtile.up .mb{transform:rotateY(360deg)}
.mtile.done .mb{background:var(--ok-soft);border-color:var(--ok);transform:rotateY(360deg)}.mtile.done .mf{transform:rotateY(180deg)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);z-index:95;transition:transform .35s;max-width:calc(100vw - 32px);font-size:.92rem}
.toast.in{transform:translate(-50%,0)}
.gamestrip{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:14px 20px;align-items:center;background:linear-gradient(120deg,var(--surface),var(--gen-soft));border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:0 0 18px}
.gamestrip .gs-txt b{display:block;font-family:var(--f-display);font-size:1.15rem}.gamestrip .gs-txt span{color:var(--ink-2);font-size:.9rem}.gamestrip .xpbar{margin:0}
@media (max-width:760px){.gamestrip{grid-template-columns:1fr}}
/* ---------- real life ---------- */
.life .sub{color:var(--ink-2);margin-top:-4px}
.lifegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lifecard{position:relative;border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px;background:linear-gradient(180deg,var(--cs,var(--surface-2)),var(--surface) 60%);display:grid;gap:6px;align-content:start;min-width:0}
.lifecard .lnum{font:800 .78rem var(--f-mono);color:var(--c,var(--accent))}.lifecard b{font-family:var(--f-display);font-size:1.05rem;line-height:1.2}.lifecard p{margin:0;color:var(--ink-2);font-size:.93rem}
.lifecard .ltag{justify-self:start;font:.72rem var(--f-mono);color:var(--c,var(--accent));border:1px solid currentColor;border-radius:999px;padding:1px 8px}
/* ---------- inline simulations & figure animation ---------- */
.inline-sim{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.simbtn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:10px 14px;cursor:pointer;text-align:left;color:var(--ink);font:inherit;flex-wrap:wrap}
.simbtn .play{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--c,var(--accent));color:#fff;font-size:.8rem;flex:none;animation:pulse 2.4s infinite}
.simbtn[aria-expanded="true"] .play{animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,var(--accent)) 45%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.simbtn .st{font-weight:800;font-family:var(--f-display)}.simbtn .lt{color:var(--ink-2);font-size:.9rem}
.inline-sim .lab-stage{padding:0 14px 14px}
figure.fig{position:relative}
.replay{position:absolute;top:8px;right:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:3px 10px;font:.75rem var(--f-mono);cursor:pointer;opacity:.75}
.replay:hover{opacity:1}

/* ---------- life-science sims: dichotomous key + blood compatibility ---------- */
.keyq{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:8px 0}
.keyq .qt{font-size:1.02rem}
.keytrail{margin:8px 0 0;padding-left:1.4em;color:var(--ink-2);font-size:.9rem;display:flex;flex-wrap:wrap;gap:4px 18px}
.keytrail li{padding-left:2px}
.bgrid{display:grid;grid-template-columns:minmax(92px,1.4fr) repeat(8,minmax(30px,1fr));gap:3px;margin:12px 0;font-size:.85rem;max-width:620px}
.bc{display:flex;align-items:center;justify-content:center;min-height:30px;border-radius:6px;background:var(--surface-2);font-weight:700;text-align:center;padding:2px}
.bc.h{background:transparent;color:var(--ink-2);font-weight:600;font-size:.78rem}
.bc.h.sel{color:var(--accent);background:var(--accent-soft)}
.bc.y{background:var(--ok-soft);color:var(--ok)}
.bc.n{background:var(--bad-soft);color:var(--bad)}
.bc.cur{outline:3px solid var(--accent);outline-offset:-1px}
@media (max-width:520px){ .bgrid{font-size:.72rem;gap:2px} .bc{min-height:26px} .bc.h{font-size:.66rem} }
@media (min-width:380px){ .readout div.wide{grid-column:span 2} }
.readout div.wide b{font-family:var(--f-body);font-size:.95rem;line-height:1.4;font-weight:600}
.readout{grid-auto-flow:dense}

/* ---------- simulation library ---------- */
.simstrip{grid-template-columns:minmax(0,1fr) auto;background:linear-gradient(120deg,var(--surface),var(--phy-soft))}
@media (max-width:760px){.simstrip{grid-template-columns:1fr}}
.simtools{display:grid;gap:10px;margin:6px 0 10px}
.simsearch{width:100%;max-width:520px;font:inherit;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink)}
.simsearch:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.simcount{margin:4px 0 12px;color:var(--ink-3);font:.85rem var(--f-mono)}
.simcard .simintro{margin:0;color:var(--ink-2);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.simcard .simtop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.simcard .simact{display:flex;gap:8px;margin-top:auto;padding-top:4px}
dialog.simdlg{width:min(980px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:0;border-radius:16px;padding:16px 18px;background:var(--paper);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.simdlg::backdrop{background:rgba(8,14,24,.62)}
.simdlg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.simdlg-head h2{margin:2px 0 0;font-size:1.35rem}
@media (max-width:600px){ dialog.simdlg{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0;border-radius:0;padding:12px} }

/* ---------- full-screen lab mode + phone sizing ---------- */
.stagebar{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:-4px 0 6px;flex-wrap:wrap}
.fullbtn{font:700 .78rem var(--f-body);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:5px 11px;cursor:pointer;line-height:1.2}
.fullbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.fullbtn:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.rotatehint{display:none;margin-right:auto;font-size:.78rem;color:var(--ink-2)}
.labtip{margin:0;padding:10px 12px;border-radius:10px;background:var(--accent-soft);color:var(--ink);font-size:.9rem}
html.lab-full-open{overflow:hidden}
.lab-stage.is-full{position:fixed;inset:0;z-index:1000;margin:0;border:0;border-radius:0;width:100%;height:100%;max-width:none;
  padding:8px max(8px,env(safe-area-inset-right,0px)) 8px max(8px,env(safe-area-inset-left,0px));overflow:hidden;background:var(--paper);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,30%);grid-template-rows:auto minmax(0,1fr);gap:8px 10px}
.lab-stage.is-full > canvas,.lab-stage.is-full > .stage-main{grid-column:1;grid-row:1 / 3;align-self:center;justify-self:center;width:100%;height:auto;margin:0}
.lab-stage.is-full > .stagebar{grid-column:2;grid-row:1;margin:0;z-index:5}
.lab-stage.is-full > .stagebar .fullbtn{box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:.85rem;padding:7px 13px}
.lab-stage.is-full > .fullside{grid-column:2;grid-row:2;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:2px}
.fullside > *{min-width:0}
.fullside > .controls{margin-top:0;grid-template-columns:minmax(0,1fr)}
.fullside .readout{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.lab-stage.is-full.hide-ctl{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.lab-stage.is-full.hide-ctl > .fullside{display:none}
.lab-stage.is-full.hide-ctl > canvas,.lab-stage.is-full.hide-ctl > .stage-main{grid-row:1}
.lab-stage.is-full.hide-ctl > .stagebar{position:fixed;top:8px;right:max(8px,env(safe-area-inset-right,0px))}
.lab-stage.is-full.full-1col{display:block;overflow:auto;overscroll-behavior:contain}
.lab-stage.is-full.full-1col > *{max-width:1100px;margin-inline:auto}
.lab-stage.is-full.full-1col > .stagebar{position:sticky;top:0;margin-bottom:8px}
@media (orientation:portrait){
  .lab-stage.is-full{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  .lab-stage.is-full > .stagebar{grid-column:1;grid-row:1}
  .lab-stage.is-full > canvas,.lab-stage.is-full > .stage-main{grid-row:2;align-self:start;box-shadow:0 4px 14px rgba(0,0,0,.12)}
  .lab-stage.is-full > .fullside{grid-column:1;grid-row:3}
  .lab-stage.is-full.hide-ctl{grid-template-rows:minmax(0,1fr)}
  .lab-stage.is-full.hide-ctl > canvas,.lab-stage.is-full.hide-ctl > .stage-main{grid-row:1;align-self:center}
}
@media (orientation:portrait) and (pointer:coarse){ .lab-stage.is-full .rotatehint{display:inline;background:var(--surface);border-radius:999px;padding:5px 10px;box-shadow:0 2px 8px rgba(0,0,0,.15)} }
@media (max-width:560px){
  .block{padding:14px}
  .lab .lab-stage:not(.is-full){margin-inline:-8px;padding:6px}
  .inline-sim .lab-stage:not(.is-full){padding:0 6px 8px}
  .lab-stage .controls{gap:8px 12px}
}
/* practical labs: pick-the-next-step procedure and hazard symbol grid */
.proc{margin-top:10px;display:grid;gap:6px}
.proc-h{font-size:.8rem;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.proc-pool{display:flex;flex-wrap:wrap;gap:6px}
.proc-pool .btn{text-align:left;white-space:normal;line-height:1.3}
.proc-done{margin:0;padding-left:1.4em;display:grid;gap:3px;font-size:.92rem}
.proc-done li::marker{color:var(--ok);font-weight:700}
.proc-done:empty::before{content:'No steps chosen yet';color:var(--ink-3);font-size:.88rem;margin-left:-1.4em}
.symgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:10px}
.sym{display:grid;justify-items:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.sym canvas{width:64px;height:64px}
.sym select{width:100%;font-size:.85rem}
.sym.bad{border-color:var(--bad);box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 25%,transparent)}

/* 3D model viewer */
.m3d{position:relative;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.lab-stage .m3d canvas{display:block;width:100%;height:auto;border-radius:0;touch-action:pan-y;cursor:grab}
.lab-stage.is-full .m3d canvas{touch-action:none}
.m3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.m3d-lab{position:absolute;left:0;top:0;white-space:nowrap;font:600 12px/1.2 system-ui,sans-serif;padding:3px 8px 3px 7px;border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.18);margin-top:-6px}
.m3d-lab::after{content:'';position:absolute;left:50%;bottom:-7px;width:2px;height:7px;background:var(--ink-3);transform:translateX(-50%)}
.m3d-lab.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.m3d-tip{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:rgba(20,24,33,.78);color:#fff;font-size:.82rem;padding:6px 12px;border-radius:999px;pointer-events:none;max-width:92%;text-align:center}
.m3d-tip.bad{background:var(--bad);position:absolute;top:40%;bottom:auto}
.m3d-zoom{position:absolute;right:8px;bottom:8px;display:grid;gap:6px}
.m3d-zoom button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.2rem;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer}
.m3d-info{margin-top:10px;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.m3d-info h4{margin:0 0 4px;font-size:1.02rem}
.m3d-info p{margin:0;color:var(--ink-2);line-height:1.5}
.m3d-inv{margin-top:8px;font-size:.92rem}
.m3d-inv ol{margin:4px 0 0;padding-left:1.3em;color:var(--ink-2)}
.m3d-q{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m3d-q b{font-size:1.02rem;color:var(--accent)}
.m3d-q .btn{margin-left:auto}
.m3d-tools .btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.m3d-parts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.m3d-parts .chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:.82rem;cursor:pointer}
.m3d-parts .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.m3d-chiph{font-size:.8rem;font-weight:700;color:var(--ink-2);margin-right:2px}
.m3d-parts[hidden],.m3d-tip[hidden]{display:none}

/* practicals page */
.praclist{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.prac{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:16px;align-items:start}
.prac-n{font-size:1.3rem;font-weight:800;color:var(--c,var(--accent));opacity:.85;line-height:1}
.prac h3{margin:6px 0 6px;font-size:1.05rem}
.prac-aim,.prac-rec{margin:0 0 6px;color:var(--ink-2);font-size:.92rem;line-height:1.45}
.prac-done{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--ink-2);cursor:pointer;margin-left:auto}
.prac-done input{width:18px;height:18px;accent-color:var(--ok)}
.prac.done{border-color:var(--ok)}
.prac.done .prac-n::after{content:' ✓';color:var(--ok)}

/* free preview (paid website) */
.lockbox{text-align:center;padding:28px 22px}
.lockbox h2{margin:6px 0 8px}
.lockbox p{color:var(--ink-2);max-width:60ch;margin:0 auto 14px}
.lock-ico{font-size:2.2rem}
.lock-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0 16px}
.lock-stats div{border:1px solid var(--line);border-radius:12px;padding:8px 14px;background:var(--surface);min-width:110px}
.lock-stats b{display:block;font-size:1.4rem}
.lock-stats span{font-size:.82rem;color:var(--ink-2)}
.lock-outline{text-align:left;max-width:560px;margin:0 auto 16px}
.lock-outline h3{font-size:1rem;margin:0 0 6px}
.lock-outline ol{margin:0;padding-left:1.3em;color:var(--ink-2)}
.lockbox .btnrow{justify-content:center}
.card .lockmark{background:var(--surface-2);color:var(--ink-2)}
.card .freemark{background:var(--ok);color:#fff;font-size:.62rem;width:auto;padding:0 7px;border-radius:999px;letter-spacing:.04em}
.previewstrip{border-color:var(--accent)}

/* account bar on the website */
.accbar{display:inline-flex;gap:6px;align-items:center;margin-left:4px}
.accchip{padding:6px 12px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.85rem;border:1px solid var(--line);color:var(--ink);background:var(--surface);white-space:nowrap}
.accchip.buy{background:var(--accent);border-color:var(--accent);color:#fff}
.accchip.warn{border-color:#e8590c;color:#e8590c}
@media (max-width:560px){.accchip{padding:5px 9px;font-size:.8rem}}