:root {
  --bg: #eef2f0; --panel: #f9fbfa; --panel2: #e4ebe8; --ink: #13201d; --muted: #566762; --grid: #d3ddd9; --line: #c3d0cb;
  --accent: #0b6e79; --accent-ink: #ffffff; --amber: #b87708; --danger: #c2412d; --good: #2c8049; --water: #a9d2ec; --hl: #fbe7b5;
  --s1: #0b6e79; --s2: #c2412d; --s3: #7a5cc4; --s4: #b87708;
  --c-am: #f4c7b8; --c-ae: #f7ddb0; --c-tm: #f1e9a8; --c-la: #e6c8ea; --c-ac: #d9c3f0; --c-pm: #cfe0d6; --c-ml: #bfe3dc; --c-nm: #c9ddf6; --c-ha: #b7e4c0; --c-ng: #d7cff5;
  --radius: 10px; --shadow: 0 1px 2px rgba(19,32,29,.06), 0 4px 16px rgba(19,32,29,.06);
  --cL: .47; --cC: .15; --c-ink: #ffffff; --glow: 15%;
  --spectrum: linear-gradient(90deg, oklch(.62 .21 25), oklch(.72 .18 55), oklch(.83 .17 95), oklch(.72 .19 145), oklch(.72 .13 195), oklch(.58 .19 260), oklch(.55 .22 300));
  --f-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --f-body: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1614; --panel: #15201d; --panel2: #1c2926; --ink: #e2ece9; --muted: #93a6a0; --grid: #2a3834; --line: #334541;
    --accent: #4cc3cf; --accent-ink: #062226; --amber: #e8b04a; --danger: #f07a63; --good: #6bcb8b; --water: #2d5a78; --hl: #4a3d12;
    --s1: #4cc3cf; --s2: #f07a63; --s3: #b39bf0; --s4: #e8b04a;
    --c-am: #6b3a2e; --c-ae: #6a4f24; --c-tm: #5c5424; --c-la: #573a5c; --c-ac: #4a3a66; --c-pm: #2f4a3c; --c-ml: #245049; --c-nm: #2a4466; --c-ha: #2a5a38; --c-ng: #3f3866;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --cL: .80; --cC: .13; --c-ink: #0b1512; --glow: 22%;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1614; --panel: #15201d; --panel2: #1c2926; --ink: #e2ece9; --muted: #93a6a0; --grid: #2a3834; --line: #334541;
  --accent: #4cc3cf; --accent-ink: #062226; --amber: #e8b04a; --danger: #f07a63; --good: #6bcb8b; --water: #2d5a78; --hl: #4a3d12;
  --s1: #4cc3cf; --s2: #f07a63; --s3: #b39bf0; --s4: #e8b04a;
  --c-am: #6b3a2e; --c-ae: #6a4f24; --c-tm: #5c5424; --c-la: #573a5c; --c-ac: #4a3a66; --c-pm: #2f4a3c; --c-ml: #245049; --c-nm: #2a4466; --c-ha: #2a5a38; --c-ng: #3f3866;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --cL: .80; --cC: .13; --c-ink: #0b1512; --glow: 22%;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.65 var(--f-body); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.25; text-wrap: balance; margin: 0; }
h4, h5 { margin: 0 0 .5rem; font-weight: 600; }
small, .muted { color: var(--muted); }
[dir="ltr"] { unicode-bidi: isolate; }
.en { font-family: var(--f-body); color: var(--muted); font-size: .88em; direction: ltr; unicode-bidi: isolate; }
.mono, .eqbig, .eqstack, .path, output, .rv, table.data td { font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: .75rem; padding: .6rem 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); min-width: 0; }
.brand svg { flex: none; }
.brand b { font-family: var(--f-display); font-size: 1.15rem; white-space: nowrap; }
.brand .en { display: block; font-size: .72rem; line-height: 1.1; }
.top nav { margin-inline-start: auto; display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.navbtn { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: .3rem .8rem; cursor: pointer; font-size: .9rem; text-decoration: none; color: var(--ink); }
.navbtn.on, .navbtn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.menubtn { display: none; border: 1px solid var(--line); background: transparent; border-radius: 8px; padding: .3rem .6rem; cursor: pointer; }
.shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100% - 58px); }
.side { border-inline-end: 1px solid var(--line); background: var(--panel); padding: 12px; overflow-y: auto; max-height: calc(100vh - var(--toph, 58px)); position: sticky; top: var(--toph, 58px); }
.gradechips { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .6rem; }
.gchip { border: 1px solid var(--line); background: transparent; border-radius: 6px; padding: .15rem .55rem; cursor: pointer; font-size: .85rem; }
.gchip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.search { width: 100%; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); margin-bottom: .6rem; }
.mod { margin-bottom: .35rem; }
.mod > summary { cursor: pointer; list-style: none; padding: .35rem .4rem; border-radius: 6px; font-weight: 600; font-size: .92rem; display: flex; gap: .4rem; align-items: baseline; }
.mod > summary::-webkit-details-marker { display: none; }
.mod > summary:hover { background: var(--panel2); }
.mod > summary .mn { font-family: var(--f-mono); color: var(--accent); font-size: .8rem; min-width: 2.2em; }
.lsn { display: flex; gap: .5rem; align-items: center; width: 100%; text-align: start; border: 0; background: transparent; padding: .3rem .5rem .3rem .4rem; border-radius: 6px; cursor: pointer; font-size: .88rem; }
.lsn:hover { background: var(--panel2); }
.lsn.on { background: var(--hl); }
.lsn .st { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.st.seen { background: var(--grid); } .st.explored { background: var(--s3); border-color: var(--s3); } .st.challenge { background: var(--amber); border-color: var(--amber); } .st.quiz { background: var(--accent); border-color: var(--accent); } .st.mastered { background: var(--good); border-color: var(--good); }
.lsn .gtag { margin-inline-start: auto; font-family: var(--f-mono); font-size: .7rem; color: var(--muted); }
main { padding: 18px 16px 60px; min-width: 0; }
.wrap { max-width: 1200px; margin: 0 auto; }

/* ---------- lesson header ---------- */
.crumbs { color: var(--muted); font-size: .85rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.lhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; margin: .4rem 0 1rem; }
.lhead h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.lhead .en-title { font-family: var(--f-body); font-size: 1rem; color: var(--muted); }
.lnum { font-family: var(--f-mono); font-size: 2.6rem; color: var(--accent); line-height: 1; }
.types { display: flex; gap: .35rem; flex-wrap: wrap; margin: .3rem 0 0; }
.type { font-size: .78rem; border-radius: 4px; padding: .1rem .45rem; background: var(--panel2); border: 1px solid var(--line); }
.fq { border-inline-start: 3px solid var(--amber); padding: .4rem .8rem; background: var(--panel); border-radius: 0 8px 8px 0; margin: .6rem 0 1rem; }
.fq b { color: var(--amber); font-size: .8rem; display: block; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; overflow-x: auto; scrollbar-width: thin; }
.tab { border: 0; background: transparent; padding: .55rem .9rem; cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; font-weight: 500; }
.tab small { display: block; font-size: .68rem; line-height: 1; }
.tab.on { border-bottom-color: var(--accent); color: var(--accent); }
.pane[hidden] { display: none !important; }

/* ---------- learn ---------- */
.learn { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.card h3 { font-size: 1.05rem; margin-bottom: .5rem; display: flex; gap: .5rem; align-items: baseline; }
.card h3 .en { font-size: .75rem; }
.card ul, .card ol { margin: 0; padding-inline-start: 1.2rem; }
.card li { margin: .25rem 0; }
.vocab { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1rem; font-size: .9rem; }
.vocab div { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dashed var(--grid); padding: .15rem 0; }
.eqlist { list-style: none; padding: 0 !important; }
.eqlist li { font-family: var(--f-mono); direction: ltr; text-align: left; background: var(--panel2); border-radius: 6px; padding: .35rem .6rem; font-size: .9rem; overflow-x: auto; }
.mis { background: color-mix(in srgb, var(--danger) 9%, var(--panel)); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.real { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.stack { display: grid; gap: 1rem; align-content: start; }

/* ---------- lab ---------- */
.lab { display: grid; gap: .8rem; }
.vartags { display: flex; gap: .4rem; flex-wrap: wrap; font-size: .82rem; }
.vt { border-radius: 6px; padding: .2rem .55rem; border: 1px solid var(--line); background: var(--panel); }
.vt b { font-weight: 600; }
.vt.indep b { color: var(--accent); } .vt.dep b { color: var(--danger); } .vt.const b { color: var(--muted); }
.labgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px; gap: .8rem; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; min-width: 0; }
.panel h4 { font-family: var(--f-display); font-size: .98rem; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.panel h4 small { font-family: var(--f-body); font-size: .7rem; direction: ltr; }
.ctrls { display: grid; gap: .6rem; }
.ctl { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; align-items: center; font-size: .88rem; }
.ctl .lbl { display: flex; flex-direction: column; }
.ctl .lbl i { font-style: normal; font-size: .7rem; color: var(--muted); direction: ltr; text-align: start; }
.ctl output { font-family: var(--f-mono); font-size: .82rem; color: var(--accent); direction: ltr; }
.ctl input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.ctl input[type=range]:disabled { opacity: .45; }
.ctl select, .ctl input[type=text], .ctl input[type=number], .numrow input { grid-column: 1 / -1; width: 100%; padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.numrow { grid-column: 1 / -1; display: flex; gap: .4rem; align-items: center; }
.unit { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); }
.stagewrap { min-width: 0; }
.stage { display: grid; gap: .7rem; }
canvas.simcv, canvas.graph { width: 100%; display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); max-width: 100%; }
.reads { display: grid; gap: .35rem; }
.ro { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; border-bottom: 1px dashed var(--grid); padding: .2rem 0; font-size: .86rem; }
.ro .rl { color: var(--muted); }
.ro .rv { font-family: var(--f-mono); text-align: end; font-size: .86rem; }
.ro.key .rv { color: var(--accent); font-weight: 600; font-size: .95rem; }
.ro.good .rv { color: var(--good); } .ro.warn .rv { color: var(--danger); }
.ro.warn .rl, .ro.warn .rv { font-family: var(--f-body); }
.whypanel .why { font-size: .93rem; max-width: 80ch; }
.whypanel { border-inline-start: 3px solid var(--accent); }
.labbtns, .chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.btn { border: 0; background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: .42rem .9rem; cursor: pointer; font-weight: 500; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.chip { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: .22rem .7rem; cursor: pointer; font-size: .84rem; }
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip.ghost { background: transparent; }
.datagrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .8rem; }
.tblscroll { overflow-x: auto; max-height: 280px; overflow-y: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: .84rem; }
table.data th, table.data td { border-bottom: 1px solid var(--grid); padding: .3rem .45rem; text-align: center; white-space: nowrap; }
table.data th { font-weight: 600; background: var(--panel2); position: sticky; top: 0; }
table.data th small { font-weight: 400; }
table.data td.empty { color: var(--muted); white-space: normal; }
table.data.mini { font-size: .8rem; }
table.data input { width: 7em; padding: .2rem .3rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.fitline { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); margin: .4rem 0 0; text-align: start; }
.fitline.note { font-family: var(--f-body); background: transparent; padding: 0; }
.miniTool { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; }
.miniTool h5 { font-family: var(--f-display); font-size: .92rem; }
.miniTool h5 small { font-family: var(--f-body); direction: ltr; }
.miniTool .row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.miniTool input[type=number], .miniTool input[type=text], .miniTool select { padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); max-width: 100%; }
.miniTool input[type=number] { width: 8em; }
.convout { font-family: var(--f-mono); font-size: .85rem; direction: ltr; text-align: left; overflow-x: auto; }
.eqbig { font-family: var(--f-mono); font-size: 1.15rem; text-align: center; padding: .6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; white-space: nowrap; }
.eqbig.small { font-size: .92rem; }
.eqbig .arrow { color: var(--muted); margin: 0 .4rem; }
.eqstack { display: grid; gap: .3rem; font-family: var(--f-mono); font-size: .88rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; overflow-x: auto; }
.eqstack small { font-family: var(--f-body); display: block; color: var(--muted); font-size: .72rem; }
.eqstack .net { color: var(--accent); font-weight: 600; }
.wordeq { text-align: center; color: var(--muted); margin: 0; font-size: .9rem; }
.fb { font-size: .86rem; margin: .3rem 0 0; }
.fb.good { color: var(--good); } .fb.bad { color: var(--danger); }
.sfout { font-family: var(--f-mono); font-size: 1.4rem; letter-spacing: .06em; margin: .3rem 0; }
.sfout .sig { color: var(--accent); font-weight: 700; } .sfout .nsig { color: var(--muted); }
.sorter { display: grid; gap: .3rem; }
.sortrow { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: .86rem; border-bottom: 1px dashed var(--grid); padding-bottom: .3rem; }
.sortrow > span:first-child { flex: 1 1 12rem; }
.tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.tlc { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--amber); border-radius: 8px; padding: .6rem; font-size: .88rem; }
.tlc p { margin: .3rem 0 0; }
ol.dalton { padding-inline-start: 1.2rem; margin: 0; font-size: .88rem; }
ol.dalton li { margin-bottom: .4rem; }
.orbitals { display: flex; flex-wrap: wrap; gap: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; justify-content: center; }
.sublevel { display: grid; justify-items: center; gap: .2rem; font-family: var(--f-mono); }
.sublevel .boxes { display: flex; }
.obox { width: 30px; height: 34px; border: 1.5px solid var(--ink); margin-inline-start: -1.5px; display: grid; place-items: center; font-size: 1.05rem; color: var(--accent); }
.dotstruct { text-align: center; font-family: var(--f-mono); font-size: 1.6rem; }
.dotstruct .dots { color: var(--danger); letter-spacing: .1em; font-size: 1.2rem; margin-inline-start: .3rem; }
.ptscroll { overflow-x: auto; padding-bottom: .3rem; }
.ptable { display: grid; grid-template-columns: repeat(18, minmax(38px, 1fr)); gap: 3px; min-width: 720px; }
.pt { border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 4px; padding: 2px 1px; cursor: pointer; display: grid; justify-items: center; line-height: 1.1; min-height: 44px; color: var(--ink); }
.pt small { font-size: .58rem; font-family: var(--f-mono); color: var(--ink); opacity: .75; }
.pt b { font-family: var(--f-mono); font-size: .9rem; }
.pt i { font-style: normal; font-size: .55rem; font-family: var(--f-mono); }
.pt.on { outline: 2.5px solid var(--ink); outline-offset: 1px; }
.pt.dim { opacity: .18; }
.ptgap { height: 10px; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .78rem; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: .3rem; vertical-align: -1px; border: 1px solid var(--line); }
.meter { height: 10px; background: var(--grid); border-radius: 5px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--danger); transition: width .3s; }
.meter.ok i { background: var(--good); }
.iontiles { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.tile { font-family: var(--f-mono); padding: .35rem .6rem; border-radius: 8px; font-weight: 600; }
.tile.pos { background: color-mix(in srgb, var(--s1) 22%, var(--panel)); border: 1px solid var(--s1); }
.tile.neg { background: color-mix(in srgb, var(--s2) 22%, var(--panel)); border: 1px solid var(--s2); }
.steppers { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.stp { display: flex; align-items: center; gap: .2rem; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .15rem .3rem; font-family: var(--f-mono); }
.stp button { width: 24px; height: 24px; border: 1px solid var(--line); background: var(--panel); border-radius: 5px; cursor: pointer; line-height: 1; }
.stp b { min-width: 1.4em; text-align: center; color: var(--accent); }
.stp .arrow { margin-inline-start: .3rem; color: var(--muted); }
.path { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; justify-content: center; }
.pbox { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; text-align: center; min-width: 90px; }
.pbox small { display: block; font-size: .7rem; color: var(--muted); font-family: var(--f-body); }
.pbox b { font-family: var(--f-mono); display: block; }
.pbox i { font-style: normal; font-size: .7rem; color: var(--muted); font-family: var(--f-mono); }
.pbox.on { border-color: var(--amber); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 35%, transparent); }
.pbox.key { border-color: var(--accent); }
.parr { display: grid; justify-items: center; color: var(--muted); font-family: var(--f-mono); font-size: .8rem; }
.parr span { font-size: .68rem; white-space: nowrap; }
.ratios { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); direction: ltr; text-align: left; }
.pctin { display: grid; gap: .5rem; }
.hess { display: grid; gap: .45rem; font-family: var(--f-mono); font-size: .85rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem; overflow-x: auto; }
.hess .target { font-weight: 600; color: var(--amber); }
.hrow { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.hrow > span { flex: 1 1 18rem; }
.hsum { border-top: 1px solid var(--line); padding-top: .4rem; }
.hsum.ok { color: var(--good); font-weight: 600; }
.rolepick { display: flex; flex-wrap: wrap; gap: .6rem; }
.rolepick label { display: grid; gap: .2rem; font-family: var(--f-mono); }
.rolepick select { padding: .25rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.tower { display: grid; gap: 3px; max-width: 360px; margin: 0 auto; }
.frac { border: 1px solid var(--line); border-radius: 4px; padding: .3rem; cursor: pointer; background: color-mix(in srgb, var(--amber) calc(12% + var(--k) * 12%), var(--panel)); font-size: .82rem; }
.dataedit input { width: 6em; }

/* ---------- practice / challenge / quiz ---------- */
.qcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; max-width: 820px; }
.qcard .q { font-size: 1.02rem; margin-bottom: .7rem; }
.opts { display: grid; gap: .4rem; }
.opt { text-align: start; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: .5rem .7rem; cursor: pointer; }
.opt:hover { border-color: var(--accent); }
.opt.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--panel)); }
.opt.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }
.ansrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.ansrow input { padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); width: 14em; direction: ltr; }
.hintbox { margin-top: .7rem; font-size: .9rem; border-inline-start: 3px solid var(--amber); padding: .3rem .7rem; background: color-mix(in srgb, var(--amber) 8%, var(--panel)); border-radius: 0 6px 6px 0; }
.solution { margin-top: .6rem; font-family: var(--f-mono); font-size: .88rem; direction: ltr; text-align: left; background: var(--panel2); padding: .5rem .7rem; border-radius: 6px; overflow-x: auto; }
.levels { display: flex; gap: .4rem; margin-bottom: .8rem; flex-wrap: wrap; }
.lvl { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: .35rem .8rem; cursor: pointer; }
.lvl.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.lvl.done::after { content: " ✓"; color: var(--good); }
.lvl:disabled { opacity: .45; cursor: not-allowed; }
.score { font-family: var(--f-mono); font-size: 2rem; color: var(--accent); }

/* ---------- tutor ---------- */
.tutor { display: grid; grid-template-rows: auto minmax(260px, 1fr) auto; gap: .6rem; max-width: 860px; }
.ctxline { font-size: .8rem; color: var(--muted); background: var(--panel2); border-radius: 6px; padding: .3rem .6rem; }
.chat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; overflow-y: auto; max-height: 60vh; display: grid; gap: .6rem; align-content: start; }
.msg { max-width: 88%; padding: .5rem .75rem; border-radius: 10px; white-space: pre-wrap; font-size: .93rem; }
.msg.u { background: var(--accent); color: var(--accent-ink); justify-self: start; }
.msg.a { background: var(--panel2); justify-self: end; }
.msg.a.err { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
.askrow { display: flex; gap: .4rem; }
.askrow textarea { flex: 1; min-height: 44px; resize: vertical; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: inherit; }

/* ---------- source ---------- */
.source { margin-top: 1.2rem; font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem 1rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.source b { color: var(--ink); font-weight: 600; }

/* ---------- home / map / dashboard ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.2rem; align-items: center; margin-bottom: 1.4rem; }
.hero h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
.hero p { max-width: 58ch; }
.flow { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .25rem; }
.flow span { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .4rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem; }
.stat b { font-family: var(--f-mono); font-size: 1.6rem; color: var(--accent); display: block; }
.stat span { font-size: .8rem; color: var(--muted); }
.mapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; }
.mapmod { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem; }
.mapmod h3 { font-size: .95rem; margin-bottom: .45rem; }
.mapmod h3 .mn { font-family: var(--f-mono); color: var(--accent); margin-inline-end: .3rem; }
.maplsn { display: grid; grid-template-columns: auto 1fr auto; gap: .45rem; align-items: center; width: 100%; border: 0; background: transparent; text-align: start; padding: .25rem .2rem; border-radius: 6px; cursor: pointer; font-size: .85rem; }
.maplsn:hover { background: var(--panel2); }
.steps5 { display: flex; gap: 2px; }
.steps5 i { width: 14px; height: 6px; border-radius: 2px; background: var(--grid); }
.steps5 i.on { background: var(--accent); }
.steps5 i.m { background: var(--good); }
.legendrow { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .8rem; color: var(--muted); margin: .4rem 0 1rem; }
.legendrow span { display: inline-flex; gap: .3rem; align-items: center; }
.audit { overflow-x: auto; }
.audit table { font-size: .8rem; }
.audit td { white-space: normal; text-align: start; }
.yes { color: var(--good); font-weight: 600; } .no { color: var(--muted); }
.tbar { height: 8px; background: var(--grid); border-radius: 4px; overflow: hidden; min-width: 60px; }
.tbar i { display: block; height: 100%; background: var(--accent); }
.note { font-size: .85rem; background: var(--panel2); border-radius: 8px; padding: .6rem .8rem; }
.sectionh { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.4rem 0 .6rem; flex-wrap: wrap; }
.sectionh h2 { font-size: 1.3rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .labgrid { grid-template-columns: 1fr 1fr; } .stagewrap { grid-column: 1 / -1; order: -1; } }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset-block: var(--toph, 58px) 0; inset-inline-start: 0; width: min(320px, 88vw); z-index: 30; max-height: none; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  .side.open { transform: none; }
  .menubtn { display: inline-block; }
  .learn, .hero, .datagrid { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .labgrid { grid-template-columns: 1fr; }
  .top nav .navbtn { padding: .25rem .55rem; font-size: .8rem; }
  .brand .en { display: none; }
  .vocab { grid-template-columns: 1fr; }
  .lnum { font-size: 1.8rem; }
}
/* ---------- merged platform components ---------- */
a { color: var(--accent); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.netchip { font-size: .75rem; padding: .15rem .6rem; border-radius: 999px; background: var(--amber); color: #1b1300; font-weight: 600; align-self: center; }
.unitlink { display: block; font-size: .8rem; padding: .2rem .5rem .4rem 2.9rem; text-decoration: none; }
.intro { max-width: 70ch; margin: .4rem 0 .2rem; font-size: 1.02rem; }
.sech { font-size: 1.05rem; margin: 1.3rem 0 .6rem; }
h2.sech { font-size: 1.3rem; }
.lessonnav { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0 .5rem; }
.lessonnav .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; }
.hintbox.good { border-inline-start-color: var(--good); background: color-mix(in srgb, var(--good) 9%, var(--panel)); }
.qcard.isright { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.qcard.iswrong { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.bankquiz { display: grid; gap: .7rem; }
.opts.tf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ansrow input { min-width: 0; flex: 1 1 10rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.banksec { margin-top: 1.2rem; }
.card.exit { margin-top: 1.5rem; border-inline-start: 4px solid var(--s3); }
.fld { display: grid; gap: .3rem; margin-top: .7rem; font-weight: 500; font-size: .92rem; }
.fld textarea { width: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-weight: 400; }
.conf { display: flex; gap: .4rem; flex-wrap: wrap; }
.conf .chip { min-height: 36px; }
.sendbox { margin-top: .8rem; border-top: 1px dashed var(--line); padding-top: .7rem; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.rcard { display: flex; flex-direction: column; gap: .5rem; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--kc, var(--accent)); border-radius: var(--radius); padding: .8rem; box-shadow: var(--shadow); }
.rcard .btn { margin-top: auto; align-self: flex-start; }
.rtop { display: flex; justify-content: space-between; gap: .4rem; align-items: center; }
.rkind { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.net { font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.net.off { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, var(--line)); }
.net.on { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); }
.k-lab { --kc: var(--s1); } .k-simulation { --kc: var(--s3); } .k-video { --kc: var(--s2); } .k-files, .k-document { --kc: var(--s4); } .k-activity { --kc: var(--good); }
details.teacher, .teacherzone { margin-top: 1.4rem; border: 1px dashed var(--s3); border-radius: var(--radius); padding: .7rem .9rem; background: color-mix(in srgb, var(--s3) 6%, var(--panel)); }
details.teacher > summary { cursor: pointer; font-weight: 600; color: var(--s3); }
.teacherzone { margin: 0 0 1rem; }
.teacherzone details.teacher { margin-top: .5rem; border: 0; padding: 0; background: none; }
.pbar { position: relative; height: 12px; border-radius: 999px; background: var(--panel2); overflow: hidden; margin: .35rem 0 .5rem; }
.pbar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--good))); border-radius: 999px; transition: width .4s; }
.pbar span { position: absolute; inset-inline-end: .4rem; top: -1px; font-size: .62rem; font-weight: 700; color: var(--ink); }
.modlink { text-decoration: none; color: var(--ink); }
.modlink:hover { color: var(--accent); }
.unithead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin: .6rem 0 1rem; }
.unithead h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: .2rem 0 .5rem; }
.kicker { font-family: var(--f-mono); font-size: .78rem; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.lcard { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.lcard:hover { transform: translateY(-2px); border-color: var(--accent); }
.lcard p { margin: 0; color: var(--muted); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lctop, .lcfoot { display: flex; justify-content: space-between; align-items: center; gap: .4rem; flex-wrap: wrap; }
.lcfoot { margin-top: auto; font-size: .78rem; }
.lctop .mn, .simtile .mn { font-family: var(--f-mono); color: var(--accent); font-weight: 600; }
.badge { font-size: .7rem; padding: .1rem .5rem; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.badge.mastered { background: var(--good); color: #fff; } .badge.quiz { background: color-mix(in srgb, var(--good) 25%, var(--panel)); color: var(--ink); }
.simgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.simtile { display: grid; gap: .1rem; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; }
.simtile:hover { border-color: var(--accent); }
.tabs { overflow-x: auto; scrollbar-width: thin; }
.labembed { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: var(--shadow); margin-bottom: 1rem; }
.labbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
.labbar .btn { margin-inline-start: auto; min-height: 34px; padding: .25rem .7rem; }
.ldate { display: block; font-size: .9rem; color: var(--muted); margin: .15rem 0 .35rem; font-variant-numeric: tabular-nums; }
.gradepick { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 0 0 1.2rem; box-shadow: var(--shadow); }
.gradepick h2 { font-size: 1.15rem; margin-bottom: .6rem; }
.gradebtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.gradebtn { display: grid; gap: .1rem; text-align: start; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: .7rem .9rem; cursor: pointer; min-height: 56px; }
.gradebtn b { font-size: 1.05rem; } .gradebtn span { font-size: .8rem; color: var(--muted); }
.gradebtn:hover { border-color: var(--accent); }
.gradebtn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.gradebtn.on span { color: inherit; opacity: .85; }
.mhecard { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: linear-gradient(135deg, color-mix(in srgb, #c8102e 9%, var(--panel)), var(--panel)); border: 1px solid var(--line); border-inline-start: 5px solid #c8102e; border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1.2rem; box-shadow: var(--shadow); }
.mhecard h2 { font-size: 1.2rem; margin: .15rem 0 .3rem; }
.mhecard p { margin: 0; max-width: 60ch; }
.mhecard .fb { flex-basis: 100%; }
.navbtn.mhe { border-color: color-mix(in srgb, #c8102e 55%, var(--line)); }
.sitefoot { margin: 2.5rem 0 1rem; padding: 1rem 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; text-align: center; }
.sitefoot b { color: var(--ink); font-weight: 600; }
.labshadow { background: #fff; color: #0f2a43; }
.labdlg { width: min(1100px, 96vw); max-height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); overflow: auto; }
.labdlg::backdrop { background: rgba(10, 20, 18, .55); }
.labdlg .labembed { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.labdlg .labbar { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.labdlg .labbar .btn { margin-inline-start: .4rem; }
.labdlg .labbar .btn:first-of-type { margin-inline-start: auto; }
@media (max-width: 900px) { .unithead { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .lessonnav .btn { flex: 1 1 100%; }
  .top { flex-wrap: wrap; row-gap: .4rem; }
  .top nav { order: 3; flex: 1 1 100%; margin: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .top nav .navbtn { white-space: nowrap; }
  .top nav > span.muted { display: none; }
}
/* ================= Spectrum colour system =================
   Any element below gets --c (strong colour), --c-soft / --c-tint (backgrounds) and --c-line (borders)
   from its hue --h. Modules follow the visible spectrum (red → violet); grades, tabs, experience types
   and content cards have their own hues. Lightness/chroma come from theme tokens, so both themes stay readable. */
[data-m], [data-g], [data-k], [data-t], .hue, .stat, .opt, .vocab > div, .rcard, .navbtn, .badge, .lvl, .mhecard {
  --c: oklch(var(--cL) var(--cC) var(--h, 200));
  --c-soft: color-mix(in oklab, var(--c) 11%, var(--panel));
  --c-tint: color-mix(in oklab, var(--c) 20%, var(--panel));
  --c-line: color-mix(in oklab, var(--c) 42%, var(--line));
}
[data-g="9"] { --h: 25; } [data-g="10"] { --h: 145; } [data-g="11"] { --h: 250; } [data-g="12"] { --h: 305; } [data-g="0"] { --h: 200; }
.tab[data-k="learn"] { --h: 255; } .tab[data-k="explore"] { --h: 185; } .tab[data-k="experiment"] { --h: 300; } .tab[data-k="practice"] { --h: 145; }
.tab[data-k="challenge"] { --h: 50; } .tab[data-k="quiz"] { --h: 345; } .tab[data-k="resources"] { --h: 80; } .tab[data-k="tutor"] { --h: 275; }
[data-t="A"] { --h: 185; } [data-t="B"] { --h: 300; } [data-t="C"] { --h: 145; } [data-t="D"] { --h: 50; }
[data-t="E"] { --h: 255; } [data-t="F"] { --h: 330; } [data-t="G"] { --h: 95; } [data-t="H"] { --h: 20; }

/* page ground: soft coloured light, like a lab bench under coloured lamps */
body { background:
  radial-gradient(1100px 540px at -8% -12%, color-mix(in oklab, oklch(.72 .14 195) var(--glow), transparent), transparent 70%),
  radial-gradient(900px 500px at 108% -8%, color-mix(in oklab, oklch(.66 .2 330) var(--glow), transparent), transparent 70%),
  var(--bg); background-repeat: no-repeat; }

/* header: spectrum strip + colourful logo + colour-coded menu */
.top::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; background: var(--spectrum); pointer-events: none; }
.brand svg { width: 38px; height: 38px; padding: 4px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, oklch(.63 .2 25), oklch(.74 .17 65) 32%, oklch(.64 .14 185) 64%, oklch(.52 .21 295)); box-shadow: 0 3px 10px color-mix(in oklab, oklch(.52 .21 295) 30%, transparent); }
.brand svg path + path { stroke: #fff; opacity: .8; }
.brand svg circle { fill: #fff; }
.navbtn { border-color: var(--c-line); }
.navbtn[href="#labs"] { --h: 300; } .navbtn[href="#map"] { --h: 145; } .navbtn[href="#teacher"] { --h: 255; } .navbtn[href="#audit"] { --h: 50; } .navbtn.mhe { --h: 22; }
.navbtn.on, .navbtn:hover { background: var(--c); color: var(--c-ink); border-color: var(--c); }

/* buttons & chips take the colour of where they are (module, card, resource …) */
.btn { background: var(--c, var(--accent)); color: var(--c-ink); box-shadow: 0 1px 2px color-mix(in oklab, var(--c, var(--accent)) 35%, transparent); transition: transform .12s, box-shadow .12s, filter .12s; }
.btn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 5px 14px color-mix(in oklab, var(--c, var(--accent)) 32%, transparent); }
.btn.ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--c-line, var(--line)); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--c-soft, var(--panel2)); border-color: var(--c, var(--accent)); box-shadow: none; }
.chip:hover { border-color: var(--c, var(--accent)); }
.chip.on { background: var(--c, var(--accent)); color: var(--c-ink); border-color: var(--c, var(--accent)); }
.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }

/* sidebar */
.gchip { border-color: var(--c-line); font-weight: 500; }
.gchip:hover { background: var(--c-soft); }
.gchip.on { background: var(--c); color: var(--c-ink); border-color: var(--c); }
.gchip[data-g="0"].on { border: 2px solid transparent; background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--spectrum) border-box; color: var(--bg); }
.mod > summary .mn { background: var(--c); color: var(--c-ink); border-radius: 6px; padding: 0 .35rem; min-width: 2.7em; text-align: center; font-weight: 700; }
.mod > summary:hover { background: var(--c-soft); }
.mod[open] > summary { color: var(--c); }
.lsn:hover { background: var(--c-soft); }
.lsn.on { background: var(--c-tint); box-shadow: inset 3px 0 0 var(--c); font-weight: 600; }
.unitlink { color: var(--c); font-weight: 500; }
.st.seen { background: oklch(.66 .13 255); border-color: oklch(.66 .13 255); }
.st.explored { background: oklch(.7 .12 185); border-color: oklch(.7 .12 185); }
.st.challenge { background: oklch(.75 .15 65); border-color: oklch(.75 .15 65); }
.st.quiz { background: oklch(.6 .19 300); border-color: oklch(.6 .19 300); }
.st.mastered { background: var(--good); border-color: var(--good); }

/* home */
.hero { padding: 1.4rem 1.5rem; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); background:
  radial-gradient(circle at 6% 10%, color-mix(in oklab, oklch(.7 .19 25) var(--glow), transparent), transparent 42%),
  radial-gradient(circle at 94% 6%, color-mix(in oklab, oklch(.64 .2 285) var(--glow), transparent), transparent 42%),
  radial-gradient(circle at 70% 105%, color-mix(in oklab, oklch(.72 .17 155) var(--glow), transparent), transparent 46%),
  var(--panel); }
.hw { color: var(--c); }
.hero .labbtns .btn:not(.ghost) { background: linear-gradient(95deg, oklch(.55 .15 200), oklch(.5 .2 290)); color: #fff; }
.hspec { margin: 1rem 0 0; max-width: 460px; }
.hspec-bar { position: relative; height: 22px; border-radius: 6px; background: #07090d; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.hspec-bar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #7a00d4, #3b3bff, #00b3ff, #00d98c, #b8e600, #ffd000, #ff7a00, #ff1f1f); opacity: .16; }
.hspec-bar i { position: absolute; top: 0; bottom: 0; width: 3px; margin-inline-start: -1.5px; background: var(--lc); box-shadow: 0 0 8px 2px var(--lc); }
.hspec-bar i[data-nm="410"] { --lc: #9747ff; } .hspec-bar i[data-nm="434"] { --lc: #5b5dff; } .hspec-bar i[data-nm="486"] { --lc: #22c9ff; } .hspec-bar i[data-nm="656"] { --lc: #ff3030; }
.hspec figcaption { font-family: var(--f-mono); font-size: .72rem; color: var(--muted); margin-top: .3rem; letter-spacing: .02em; }
.stat { border-top: 4px solid var(--c); background: linear-gradient(180deg, var(--c-soft), var(--panel)); }
.stat b { color: var(--c); }
.stat:nth-child(1) { --h: 185; } .stat:nth-child(2) { --h: 300; } .stat:nth-child(3) { --h: 50; } .stat:nth-child(4) { --h: 145; }
.gradepick { position: relative; overflow: hidden; }
.gradepick::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--spectrum); }
.gradebtn { position: relative; overflow: hidden; background: var(--c-soft); border-color: var(--c-line); transition: transform .12s, border-color .12s; padding-inline-start: 1.15rem; }
.gradebtn::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--c); }
.gradebtn b { color: var(--c); }
.gradebtn:hover { border-color: var(--c); transform: translateY(-1px); }
.gradebtn.on { background: var(--c); border-color: var(--c); color: var(--c-ink); }
.gradebtn.on b { color: inherit; }
.gradebtn.on::before { background: color-mix(in oklab, var(--c-ink) 35%, transparent); }
.gradebtn[data-g="0"]::before { background: var(--spectrum); }
.gradebtn[data-g="0"].on { border: 2px solid transparent; background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--spectrum) border-box; color: var(--bg); }
.sectionh h2::before, h2.sech::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 3px; margin-inline-end: .45rem; vertical-align: .08em; background: var(--c, var(--spectrum)); }
.sectionh[data-g] h2 { color: var(--c); }
.mapmod[data-m] { border-top: 4px solid var(--c); background: linear-gradient(180deg, var(--c-soft), var(--panel) 4.5rem); }
.mapmod[data-m] h3 .mn { background: var(--c); color: var(--c-ink); border-radius: 6px; padding: .05rem .38rem; font-size: .78rem; }
.mapmod[data-m] .maplsn:hover { background: var(--c-soft); }
.modlink:hover { color: var(--c, var(--accent)); }
.pbar { background: color-mix(in oklab, var(--c, var(--accent)) 12%, var(--panel2)); }
.pbar i { background: linear-gradient(90deg, var(--c, var(--accent)), color-mix(in oklab, var(--c, var(--accent)) 55%, var(--panel))); }
.steps5 i:nth-child(1).on { background: oklch(.66 .13 255); } .steps5 i:nth-child(2).on { background: oklch(.7 .12 185); }
.steps5 i:nth-child(3).on { background: oklch(.75 .15 65); } .steps5 i:nth-child(4).on { background: oklch(.6 .19 300); }
.mhecard { --h: 22; }

/* lesson page (the whole page carries its module colour) */
.wrap[data-m] .crumbs a { color: var(--c); font-weight: 500; }
.lhead { padding: 1rem 1.2rem; border-radius: 16px; background: linear-gradient(118deg, var(--c-tint, var(--panel)), var(--panel) 78%); border: 1px solid var(--c-line, var(--line)); border-inline-start: 6px solid var(--c, var(--accent)); box-shadow: var(--shadow); }
.lnum { color: var(--c, var(--accent)); font-weight: 700; }
.type[data-t] { background: var(--c-soft); border-color: var(--c-line); color: var(--c); font-weight: 600; border-radius: 999px; padding: .12rem .6rem; }
.fq { border-inline-start: 4px solid var(--c, var(--amber)); background: var(--c-soft, var(--panel)); }
.fq b { color: var(--c, var(--amber)); }
.tabs { gap: .2rem; border-bottom: 2px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: .45rem; border-radius: 10px 10px 0 0; color: var(--ink); border-bottom: 3px solid transparent; }
.tab::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.tab:hover { background: var(--c-soft); }
.tab.on { color: var(--c); border-bottom-color: var(--c); background: var(--c-soft); font-weight: 600; }
.card.hue { border-top: 4px solid var(--c); background: linear-gradient(180deg, var(--c-soft), var(--panel) 5.5rem); }
.card.hue > h3 { color: var(--c); }
.card.hue li::marker { color: var(--c); font-weight: 700; }
.card.hue .eqlist li { background: var(--c-soft); border-inline-start: 3px solid var(--c); }
.vocab { display: flex; flex-wrap: wrap; gap: .45rem; }
.vocab > div { display: inline-flex; border: 1px solid var(--c-line); background: var(--c-soft); border-radius: 999px; padding: .18rem .75rem; font-weight: 500; }
.vocab > div:nth-child(7n+1) { --h: 25; } .vocab > div:nth-child(7n+2) { --h: 60; } .vocab > div:nth-child(7n+3) { --h: 100; } .vocab > div:nth-child(7n+4) { --h: 150; }
.vocab > div:nth-child(7n+5) { --h: 195; } .vocab > div:nth-child(7n+6) { --h: 255; } .vocab > div:nth-child(7n) { --h: 305; }
.lvl:nth-child(1) { --h: 145; } .lvl:nth-child(2) { --h: 55; } .lvl:nth-child(3) { --h: 20; }
.lvl { border-color: var(--c-line); }
.lvl.on { border-color: var(--c); color: var(--c); background: var(--c-soft); }
.score { color: var(--c, var(--accent)); }
.msg.u { background: var(--c, var(--accent)); color: var(--c-ink); }
.whypanel { border-inline-start-color: var(--c, var(--accent)); }

/* answer options: coloured letter badges, ✓ / ✗ when answered */
.opts { counter-reset: opt; }
.opt { display: flex; align-items: center; gap: .65rem; }
.opt::before { counter-increment: opt; content: counter(opt, upper-alpha); flex: none; width: 1.75rem; height: 1.75rem; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--c-soft); color: var(--c); border: 1px solid var(--c-line); }
.opt:nth-child(4n+1) { --h: 255; } .opt:nth-child(4n+2) { --h: 145; } .opt:nth-child(4n+3) { --h: 50; } .opt:nth-child(4n+4) { --h: 330; }
.opt:hover:not(:disabled) { border-color: var(--c); background: var(--c-soft); }
.opts .opt.right::before { content: "✓"; background: var(--good); color: var(--c-ink); border-color: var(--good); }
.opts .opt.wrong::before { content: "✗"; background: var(--danger); color: var(--c-ink); border-color: var(--danger); }

/* resources, labs, unit pages */
.rcard { --h: 200; border-top: 4px solid var(--c); background: linear-gradient(180deg, var(--c-soft), var(--panel) 60%); }
.rcard.k-lab { --h: 300; } .rcard.k-simulation { --h: 185; } .rcard.k-video { --h: 25; } .rcard.k-files { --h: 70; } .rcard.k-document { --h: 255; } .rcard.k-activity { --h: 145; } .rcard.k-teacher { --h: 280; }
.rcard .rkind { color: var(--c); }
.labbar { background: linear-gradient(90deg, color-mix(in oklab, oklch(.6 .18 300) 14%, var(--panel)), var(--panel)); }
.simtile { border-inline-start: 4px solid var(--c, var(--accent)); }
.simtile:hover { background: var(--c-soft, var(--panel2)); border-color: var(--c, var(--accent)); }
.lctop .mn, .simtile .mn { color: var(--c, var(--accent)); }
.unithead > div:first-child { padding: 1.2rem 1.3rem; border-radius: 16px; background: linear-gradient(125deg, var(--c-tint, var(--panel)), var(--panel) 80%); border: 1px solid var(--c-line, var(--line)); border-inline-start: 6px solid var(--c, var(--accent)); box-shadow: var(--shadow); }
.kicker { color: var(--c, var(--accent)); font-weight: 600; }
.lcard { border-top: 4px solid var(--c, var(--accent)); }
.lcard:hover { border-color: var(--c, var(--accent)); box-shadow: 0 10px 24px color-mix(in oklab, var(--c, var(--accent)) 22%, transparent); }
.badge.seen { --h: 255; } .badge.explored { --h: 185; } .badge.challenge { --h: 55; } .badge.quiz { --h: 300; }
.badge.seen, .badge.explored, .badge.challenge, .badge.quiz { background: var(--c-tint); color: var(--c); font-weight: 600; }
.badge.mastered { color: var(--c-ink); }
table.data th { background: color-mix(in oklab, var(--accent) 12%, var(--panel)); }
.sitefoot { position: relative; border-top: 0; }
.sitefoot::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(420px, 80%); height: 3px; border-radius: 3px; background: var(--spectrum); }

/* ---------- glossary, DOK levels, lab checks, class groups ---------- */
.gloss { margin: 0; display: grid; gap: .35rem; }
.gloss > div { border: 1px solid var(--c-line, var(--line)); background: var(--c-soft, var(--panel2)); border-radius: 8px; padding: .35rem .65rem; }
.gloss > div:nth-child(7n+1) { --h: 25; } .gloss > div:nth-child(7n+2) { --h: 60; } .gloss > div:nth-child(7n+3) { --h: 100; } .gloss > div:nth-child(7n+4) { --h: 150; }
.gloss > div:nth-child(7n+5) { --h: 195; } .gloss > div:nth-child(7n+6) { --h: 255; } .gloss > div:nth-child(7n) { --h: 305; }
.gloss dt { font-weight: 650; }
.gloss dd { margin: 0; font-size: .9rem; color: var(--ink); }
.gloss.hide > div { cursor: pointer; }
.gloss.hide > div:not(.shown) dd { color: transparent; background: var(--grid); border-radius: 4px; user-select: none; }
.gloss.hide > div:not(.shown) dd::selection { color: transparent; }
.dok { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: .08rem .5rem; border-radius: 999px; border: 1px solid var(--c-line, var(--line)); background: var(--c-soft, var(--panel2)); color: var(--c, var(--muted)); margin-bottom: .35rem; white-space: nowrap; }
.dok.d1 { --h: 145; } .dok.d2 { --h: 215; } .dok.d3 { --h: 55; } .dok.d4 { --h: 20; }
.dokrow { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0; }
.dokrow .dok { font-size: .82rem; padding: .15rem .65rem; }
.rub { display: block; padding: .25rem 0; font-size: .92rem; cursor: pointer; }
.solution.model { font-family: var(--f-body); white-space: normal; }
.labcheck { border: 1px solid var(--line); border-inline-start: 5px solid var(--s3); border-radius: var(--radius); padding: .7rem 1rem; margin: -.4rem 0 1.2rem; background: var(--panel); }
.labcheck > summary { cursor: pointer; font-weight: 650; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.labcheck p { margin: .5rem 0; }
.labcheck ol { margin: .3rem 0 .6rem; padding-inline-start: 1.3rem; }
.gnum { width: 7rem; padding: .5rem .6rem; font-size: 1.3rem; font-weight: 650; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.fld select, .fld textarea { width: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-weight: 400; }
.stratgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .6rem; }
.strat { display: grid; gap: .3rem; text-align: start; align-content: start; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--c, var(--accent)); border-radius: var(--radius); padding: .7rem .8rem; cursor: pointer; color: var(--ink); }
.strat:nth-child(8n+1) { --h: 25; } .strat:nth-child(8n+2) { --h: 60; } .strat:nth-child(8n+3) { --h: 145; } .strat:nth-child(8n+4) { --h: 185; }
.strat:nth-child(8n+5) { --h: 215; } .strat:nth-child(8n+6) { --h: 255; } .strat:nth-child(8n+7) { --h: 300; } .strat:nth-child(8n) { --h: 330; }
.strat span { font-size: .84rem; color: var(--muted); }
.strat small { color: var(--c, var(--accent)); font-weight: 600; }
.strat:hover { border-color: var(--c, var(--accent)); }
.strat.on { background: var(--c-soft, var(--panel2)); border-color: var(--c, var(--accent)); box-shadow: 0 0 0 2px var(--c, var(--accent)); }
.gsummary { margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: 14px; border: 1px solid var(--line); border-inline-start: 6px solid var(--accent); background: var(--panel); box-shadow: var(--shadow); }
.gsummary h2 { font-size: 1.3rem; }
.gsummary p { margin: .3rem 0 .2rem; font-size: 1.05rem; }
.gsummary .chips { align-items: center; margin-top: 0; }
.gtable { margin-bottom: .8rem; }
.gtable caption { text-align: start; font-weight: 650; padding: .3rem 0; }
.gtable table.data { font-size: .92rem; }
.gtable table.data td { white-space: normal; text-align: start; vertical-align: top; }
.gtable table.data td:first-child { white-space: nowrap; font-weight: 600; }
.gsteps { display: grid; gap: .5rem; padding-inline-start: 1.6rem; margin: 0 0 1rem; }
.gsteps li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .9rem; }
.gsteps li::marker { font-weight: 700; color: var(--accent); }
.gstephead { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.gstephead b { font-size: 1.02rem; }
.gsteps p { margin: .3rem 0 0; }
.gtools { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; align-items: start; }
.gtool.wide { grid-column: 1 / -1; }
.gtime { font-family: var(--f-mono); font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 700; line-height: 1.1; color: var(--accent); }
.gtime.low { color: var(--amber); } .gtime.done { color: var(--danger); }
.gpick { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; color: var(--accent); min-height: 1.3em; }
.gscore { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; }
.gscore > div { border: 1px solid var(--line); border-radius: 10px; padding: .5rem; text-align: center; background: var(--bg); }
.gscore b { display: block; font-family: var(--f-mono); font-size: 2rem; color: var(--accent); }
.gscore .chip { margin: 0 .15rem; }
.gqtext { font-size: clamp(1.1rem, 2.2vw, 1.5rem); margin: .3rem 0 .6rem; }
.gqopts { font-size: clamp(1rem, 1.8vw, 1.25rem); margin: 0 0 .8rem; padding-inline-start: 1.6rem; }
.gqopts li { margin: .3rem 0; }
.labpick { margin: 0 0 .8rem; }
.labpick .chip { min-height: 38px; font-weight: 500; }
.printonly { display: none; }
.navbtn[href="#groups"] { --h: 185; }
@media print {
  .top, .side, .sitefoot, .noprint, .stratgrid { display: none !important; }
  .shell { display: block; } main { padding: 0; }
  .printonly { display: inline; }
  .gsummary, .gsteps li, .card { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }