:root { --bg:#F5F9FF; --panel:#FFFFFF; --panel2:#EEF4FC; --text:#13233A; --muted:#506079; --accent:#1F6FEB; --accent2:#12A37A;
  --line:#D6E2F2; --bad:#D1453B; --warn:#C98A00; --good:#12A37A; --shadow:0 1px 3px rgba(19,35,58,.08); }
@media (prefers-color-scheme: dark) { :root { --bg:#0B1626; --panel:#13233A; --panel2:#182C47; --text:#E8F0FA; --muted:#A3B4CA;
  --accent:#6EA8FF; --accent2:#4FD1A5; --line:#29405F; --bad:#FF7B72; --warn:#E3B341; --good:#4FD1A5; --shadow:none; } }
* { box-sizing:border-box; }
html.big { font-size:118%; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
a { color:var(--accent); }
header.top { position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:1px solid var(--line); }
header.top .in { max-width:980px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:10px 16px; }
header.top .brand { font-weight:800; color:var(--text); text-decoration:none; }
header.top .brand span { color:var(--accent2); }
header.top .brand { display:inline-flex; align-items:center; gap:8px; }
header.top .brand-mascot { width:28px; height:28px; object-fit:contain; transform:rotate(-8deg); flex:none; }
header.top .crumb { color:var(--muted); font-size:.9rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
header.top .crumb a { color:var(--muted); }
main { max-width:980px; margin:0 auto; padding:16px 16px 60px; }
h1 { font-size:1.8rem; line-height:1.2; margin:.3em 0 .2em; }
h2 { font-size:1.2rem; margin:1.4em 0 .5em; }
h3 { font-size:1.05rem; margin:1em 0 .4em; }
.eyebrow { color:var(--accent2); font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.muted { color:var(--muted); }
.small { font-size:.88rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:14px 0; box-shadow:var(--shadow); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:14px 0; }
.grid > * { margin:0; }
a.tile { display:block; text-decoration:none; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); }
a.tile:hover, a.tile:focus-visible { border-color:var(--accent); }
.tile .ic { font-size:1.6rem; line-height:1; }
.tile strong { display:block; margin:6px 0 2px; font-size:1.05rem; }
.tile .muted { font-size:.9rem; }
.tile.disabled { opacity:.55; pointer-events:none; }
.banner { background:var(--panel2); border:1px dashed var(--line); border-radius:10px; padding:8px 12px; font-size:.88rem; color:var(--muted); margin:8px 0 4px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-weight:650; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); padding:9px 16px; cursor:pointer; text-decoration:none; min-height:44px; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.good { background:var(--good); border-color:var(--good); color:#fff; }
.btn.bad { background:var(--bad); border-color:var(--bad); color:#fff; }
.btn.ghost { background:transparent; }
.btn.sel { border-color:var(--accent); background:var(--panel2); box-shadow:inset 0 0 0 2px var(--accent); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.row.end { justify-content:flex-end; }
.row.between { justify-content:space-between; }
.chip { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:.8rem; color:var(--muted); background:var(--panel); }
.chip.ok { color:var(--good); border-color:var(--good); }
.chip.no { color:var(--bad); border-color:var(--bad); }
.bar { height:8px; background:var(--panel2); border-radius:99px; overflow:hidden; }
.bar > i { display:block; height:100%; width:0; background:var(--accent2); border-radius:99px; }
table.data { border-collapse:collapse; margin:10px 0; font-size:.95rem; }
table.data th, table.data td { border:1px solid var(--line); padding:5px 10px; text-align:left; }
table.data th { background:var(--panel2); }
table.data caption { caption-side:top; text-align:left; color:var(--muted); font-size:.85rem; padding-bottom:4px; }
.choices { display:grid; gap:8px; margin:12px 0; }
.choice { text-align:left; justify-content:flex-start; font-weight:500; width:100%; }
.choice .k { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--panel2); font-weight:800; font-size:.85rem; flex:0 0 auto; }
.choice.right { border-color:var(--good); box-shadow:inset 0 0 0 2px var(--good); }
.choice.wrong { border-color:var(--bad); box-shadow:inset 0 0 0 2px var(--bad); }
.feedback { border-radius:10px; padding:10px 14px; margin:10px 0; background:var(--panel2); }
.feedback.ok { border-left:5px solid var(--good); }
.feedback.no { border-left:5px solid var(--bad); }
.feedback.info { border-left:5px solid var(--accent); }
textarea { width:100%; min-height:90px; font:inherit; padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--text); }
select, input[type=range] { font:inherit; }
select { padding:6px 10px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); min-height:40px; }
label.tog { display:flex; gap:10px; align-items:center; margin:10px 0; }
footer.foot { margin-top:40px; padding-top:14px; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); }
footer.foot a { margin-right:12px; }
kbd { font:inherit; font-size:.8rem; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:0 5px; }
.center { text-align:center; }
.big-num { font-size:2.4rem; font-weight:800; line-height:1.1; }

/* Flashcards */
.fc-wrap { perspective:1200px; margin:16px auto; max-width:560px; }
.fc { position:relative; width:100%; min-height:250px; transition:transform .45s ease; transform-style:preserve-3d; cursor:pointer; }
.fc.flipped { transform:rotateY(180deg); }
.fc .face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; border-radius:18px; border:1px solid var(--line); background:var(--panel); box-shadow:0 4px 18px rgba(19,35,58,.10); }
.fc .face.back { transform:rotateY(180deg); background:var(--panel2); }
.fc .face .t { font-size:1.45rem; font-weight:750; }
.fc .face .b { font-size:1.2rem; }
.fc .face .hint { position:absolute; bottom:10px; font-size:.8rem; color:var(--muted); }
.fc .face .deck { position:absolute; top:10px; left:14px; font-size:.75rem; color:var(--muted); }
@media (prefers-reduced-motion: reduce) { .fc { transition:none; } }

/* Quiz */
.palette { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.palette button { width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); font:inherit; font-weight:700; cursor:pointer; position:relative; }
.palette button.ans { background:var(--panel2); border-color:var(--accent); }
.palette button.cur { box-shadow:inset 0 0 0 2px var(--accent); }
.palette button.flag::after { content:"⚑"; position:absolute; top:-7px; right:-5px; font-size:.8rem; color:var(--warn); }
.timer { font-variant-numeric:tabular-nums; font-weight:800; font-size:1.1rem; padding:4px 12px; border-radius:8px; background:var(--panel2); }
.timer.low { color:var(--warn); }
.timer.over { color:var(--bad); }
.modal-bg { position:fixed; inset:0; background:rgba(5,12,24,.55); display:grid; place-items:center; z-index:50; padding:16px; }
.modal { background:var(--panel); border-radius:16px; padding:20px 22px; max-width:420px; width:100%; border:1px solid var(--line); }
.sortrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); }

/* Games */
.game { display:grid; grid-template-columns: 1fr 300px; gap:14px; align-items:start; }
@media (max-width: 820px) { .game { grid-template-columns: 1fr; } }
canvas.stage { width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:var(--panel); touch-action:manipulation; }
.ctrl { display:grid; gap:4px; margin:8px 0; }
.ctrl .lab { display:flex; justify-content:space-between; font-size:.92rem; }
.ctrl input[type=range] { width:100%; accent-color:var(--accent); min-height:32px; }
.seg { display:flex; flex-wrap:wrap; gap:6px; }
.seg .btn { padding:6px 10px; min-height:38px; font-size:.92rem; }
.chal { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.chal .ck { width:22px; flex:0 0 22px; text-align:center; }
.chal.done { color:var(--muted); }
.chal.done .txt { text-decoration:line-through; }
.tag-simplified { display:inline-block; font-size:.75rem; font-weight:700; color:var(--warn); border:1px solid var(--warn); border-radius:6px; padding:0 6px; }
.meter-row { display:grid; grid-template-columns:110px 1fr 70px; gap:8px; align-items:center; font-size:.88rem; margin:4px 0; }
.mx { width:100%; border-collapse:collapse; font-size:.9rem; }
.mx th, .mx td { border:1px solid var(--line); padding:4px 6px; text-align:center; }
.mx th { background:var(--panel2); }
.mx tr.best td { background:var(--panel2); font-weight:700; }
.pass { color:var(--good); font-weight:700; }
.fail { color:var(--bad); font-weight:700; }
.lock { font-size:1.1rem; }
[hidden] { display:none !important; }
.row.centered { justify-content:center; }
.mbar { position:relative; overflow:visible; height:12px; }
.mbar > i { background:var(--good); }
.mbar > i.amber { background:var(--warn); }
.mbar > i.red { background:var(--bad); }
.mbar .tick { position:absolute; top:-4px; width:2px; height:20px; background:var(--text); opacity:.7; }
.warn-t { color:var(--warn); font-weight:700; }
@media (max-width: 820px) { .game.bench aside { order:-1; } }
/* Unit nav */
.unitnav { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 6px; }
.unitnav a { text-decoration:none; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 12px; font-size:.85rem; font-weight:700; background:var(--panel); }
.unitnav a.cur { color:#fff; background:var(--accent); border-color:var(--accent); }
.unitpn { margin-top:18px; }
/* Shared game bits (8.2–8.6) */
.stage-svg { width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--line); background:var(--panel); }
.gstat { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.punnett { border-collapse:collapse; margin:8px 0; }
.punnett td, .punnett th { border:1px solid var(--line); width:56px; height:44px; text-align:center; font-weight:700; }
.punnett th { background:var(--panel2); }
.herd { display:flex; flex-wrap:wrap; gap:4px; font-size:1.5rem; line-height:1; margin:8px 0; }
.herd span { display:inline-block; }
.pond { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.pond button { font:inherit; border:2px solid var(--line); background:var(--panel); border-radius:10px; padding:4px 6px; cursor:pointer; color:var(--text); min-width:52px; }
.pond button.sel { border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); }
.swatch { display:inline-block; width:22px; height:14px; border-radius:7px; vertical-align:middle; }
.slots { display:grid; gap:6px; margin:8px 0; }
.slot { display:flex; align-items:center; gap:8px; border:1px dashed var(--line); border-radius:10px; padding:6px 10px; min-height:44px; }
.slot .age { width:110px; flex:0 0 110px; color:var(--muted); font-size:.85rem; }
.hbars { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; align-items:end; height:140px; border-bottom:2px solid var(--line); margin:8px 0 2px; }
.hbars .col { position:relative; height:100%; }
.hbars .col .b { position:absolute; left:0; right:0; bottom:0; background:var(--accent2); border-radius:6px 6px 0 0; min-height:2px; transition:height .35s; }
.hbars .col .g { position:absolute; left:-2px; right:-2px; border-top:2px dashed var(--muted); }
.hlabels { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; font-size:.78rem; color:var(--muted); text-align:center; }

/* ---------- News (curated, static) ---------- */
.notice { background:var(--panel2); border-left:4px solid var(--accent); border-radius:8px; padding:8px 12px; font-size:.9rem; color:var(--muted); margin:10px 0 14px; }
.news { display:grid; gap:12px; }
.newsitem { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.newsitem .src { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.newsitem h2 { font-size:1.08rem; line-height:1.35; margin:4px 0 6px; }
.newsitem h2 a { color:var(--text); text-decoration:none; }
.newsitem h2 a:hover, .newsitem h2 a:focus-visible { color:var(--accent); text-decoration:underline; }
.newsitem p { margin:0; font-size:.95rem; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Test Prep (end-of-unit assessment) */
.tptabs { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 6px; border-bottom:2px solid var(--line); padding-bottom:6px; }
.tptabs a { display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--text); border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:7px 12px; font-size:.92rem; min-height:40px; }
.tptabs a:hover { border-color:var(--accent); }
.tptabs a.cur { background:var(--accent); border-color:var(--accent); color:#fff; }
.tptabs .n { font-weight:800; }
.tptabs .tpc { font-size:.75rem; opacity:.8; border-left:1px solid currentColor; padding-left:6px; }
.tpcheck { margin-top:10px; background:var(--panel2); border-radius:10px; padding:8px 12px; }
.tpcheck summary { cursor:pointer; font-weight:700; }
.tpfig img { max-width:min(100%,600px); height:auto; border-radius:8px; border:1px solid var(--line); background:#fff; }
.tptable { display:inline-block; vertical-align:top; margin-right:18px; }
.tpq p { margin-top:0; }
input.tpline, table.tpfill input { width:100%; font:inherit; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); min-height:40px; }
input.tpline { max-width:320px; }
table.tpfill { width:100%; max-width:640px; }
table.tpfill td { padding:4px; }
.tppads { display:grid; gap:12px; }
.tppads.multi { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.tppad-l { font-weight:800; text-align:center; margin-bottom:4px; }
.tppad-c { position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; touch-action:none; }
.tppad-c img { position:absolute; left:50%; top:50%; width:34%; height:auto; transform:translate(-50%,-50%); pointer-events:none; }
.tppad-c.fill { aspect-ratio:1/1; max-width:560px; }
.tppad-c.fill img { left:0; top:0; width:100%; height:100%; transform:none; }
.tppad-c canvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none; }
.btn.small { min-height:36px; padding:5px 12px; font-size:.88rem; }