@charset "UTF-8";
/* Layout: a map of nine short lessons. Each lesson is one screen: a picture, three facts, one hands-on activity.
   Style A of the design system: a white page with stationery on it (engine/stationery.css holds the pieces). */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --sunk:#F2F5F8; --ink:#1B2233; --muted:#566173; --line:#DFE5EC; --line-strong:#858F9E;
  --accent:#0B6E8A; --accent-ink:#FFFFFF; --accent-soft:#D5EBF1;
  --stain:#A85F00; --stain-bg:#FBF0DC;
  --good:#1F7A3A; --good-bg:#DDF3E3; --good-ink:#FFFFFF; --bad:#B3261E; --bad-bg:#FBE4E2;
  --star:#E39B00; --star-ink:#221600; --void:#1B2233;
  --cyto:#CFE9F0; --nucleus:#7B5EA7; --nucleolus:#553C7E; --mito:#DB7A2C; --wall:#3E8B48; --chl:#57B657; --vac:#EEF1FC; --vacline:#A9B6DD;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Lexend",Verdana,system-ui,sans-serif;
  /* Shape, type, shadow and width tokens. Corners and text sizes are named by role, not by value. */
  --radius-panel:14px; --radius-card:12px; --radius-tile:12px; --radius-box:12px; --radius-control:10px;
  --radius-field:10px; --radius-small:8px; --radius-tag:6px; --radius-xs:6px; --radius-bar:4px; --radius-pill:99px;
  --text-h1:clamp(2rem,7.5vw,2.9rem); --text-h2:1.45rem; --text-big:1.4rem; --text-title:1.2rem; --text-lead:1.15rem;
  --text-body:18px; --text-caption:.95rem; --text-meta:.92rem; --text-note:.85rem; --text-label:.8rem; --text-hero:3.2rem; --text-tiny:.6rem;
  --shadow-lift:0 8px 20px rgb(0 0 0/.28); --shadow-drawer:4px 0 24px rgb(0 0 0/.25); --shadow-key:0 2px 0 var(--line);
  --page-narrow:720px; --page-mid:820px; --page-wide:1080px;
  /* subject colours, as the knowledge organisers' headers (chemistry a shade darker, so that white text on it is 5:1) (the site's tabs, codes, headings and tape) */
  --biology:#0F7C7A; --chemistry:#B8511A; --physics:#1E5AA8;
  /* the site is light only: a white page (the owner's choice, 2026-11-14), so there are no dark blocks */
  color-scheme:light;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--text-body);line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:var(--page-narrow);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:var(--text-h1);font-weight:800;letter-spacing:-.02em}
h2{font-size:var(--text-h2);font-weight:800}
h3{font-size:var(--text-title);font-weight:600}
p,ul,ol,figure{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block}
i{font-style:normal}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:2px solid var(--line)}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px}
.bar a{color:var(--accent);font-weight:700;text-decoration:none;padding:10px 0}
.bar .tot{font-weight:700;font-variant-numeric:tabular-nums}
.star{color:var(--star)}
.star.off{color:var(--line)}

main{padding-block:22px 64px}
#app,.lhead,.lbody,.lafter,.uhead,.ut{display:flex;flex-direction:column;gap:20px}
.lbody:empty{display:none}
.crumb,.round{font-size:var(--text-note);color:var(--muted);font-weight:600}
.lede,.meta,.hint{color:var(--muted)}
.meta{font-size:var(--text-meta);font-variant-numeric:tabular-nums}
.big{font-family:var(--display);font-weight:600;font-size:var(--text-big);line-height:1.25;text-wrap:balance}

/* home */
.cover{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:2px;background:var(--sunk)}
.path{display:flex;flex-direction:column;gap:10px}
.tile{display:grid;grid-template-columns:68px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--surface);border-radius:var(--radius-tile);padding:10px 14px 10px 10px;text-decoration:none;color:inherit;border:1.5px solid var(--line);box-shadow:var(--shadow-card)}
.tile img{width:68px;height:68px;border-radius:2px;object-fit:cover;background:var(--sunk);border:3px solid var(--photo-frame);box-shadow:0 1px 3px rgb(0 0 0/.25);transform:rotate(-1.5deg)}
.tile:nth-child(even) img{transform:rotate(1.5deg)}
.tile .mid{display:flex;flex-direction:column;gap:2px;min-width:0}
.tile .n{font-size:var(--text-note);color:var(--muted);font-weight:600}
.tile .t{font-family:var(--display);font-weight:600;font-size:var(--text-lead);line-height:1.2}
.tile .s{font-size:var(--text-lead);letter-spacing:1px;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}

/* lesson body */
.hero{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px;background:var(--sunk)}
.facts{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.facts li{padding-left:22px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--sub,var(--accent))}
.words{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.word{background:var(--accent-soft);border-radius:var(--radius-box);padding:12px 14px}
.word b{display:block;font-family:var(--display);font-size:var(--text-lead)}
.callout{background:var(--stain-bg);border-radius:var(--radius-box);padding:12px 16px}
.callout strong{color:var(--stain)}
.formula{font-family:var(--display);font-weight:600;font-size:var(--text-lead);background:var(--accent-soft);border-radius:var(--radius-box);padding:14px 16px;text-align:center}
.fig{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:14px;align-items:center}
.fig img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-box);background:var(--sunk)}
.fig figcaption{font-size:var(--text-caption)}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;counter-reset:s}
.steps figure{position:relative;display:flex;flex-direction:column;gap:6px;font-size:var(--text-caption);counter-increment:s}
.steps img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-box);background:var(--sunk)}
.steps figure::before{content:counter(s);position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;display:grid;place-items:center}
.ladder{display:flex;flex-direction:column;gap:4px}
.rung{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center}
.rung img{width:84px;height:84px;border-radius:var(--radius-box);object-fit:cover;background:var(--sunk)}
.rung b{display:block;font-family:var(--display);font-size:var(--text-lead)}
.rung span{font-size:var(--text-caption);color:var(--muted)}
.ladder .dn{width:84px;text-align:center;color:var(--muted);font-weight:700;line-height:1}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;padding-bottom:8px}
.strip .c{flex:0 0 min(74%,260px);scroll-snap-align:start;background:var(--surface);border-radius:var(--radius-card);padding:10px 10px 14px;display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--line)}
.strip img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-control);background:var(--sunk)}
.strip h3{margin-top:4px}
.strip p{font-size:var(--text-caption)}
.strip .k{color:var(--accent);font-weight:700}

/* cell diagram */
.explore,.hotbox{background:var(--surface);border-radius:var(--radius-panel);padding:14px;display:flex;flex-direction:column;gap:12px;border:1.5px solid var(--line)}
.cellbox{background:var(--bg);border-radius:var(--radius-box);padding:6px}
.cellbox svg{width:100%;height:auto;max-height:320px;display:block}
.cell [data-part]{cursor:pointer;transition:opacity .2s}
.findbox [data-part]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.act .q:focus{outline:none}
.cell.dim [data-part]{opacity:.22}
.cell.dim [data-part].hot{opacity:1;filter:drop-shadow(0 0 5px var(--star))}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--key-line);background:var(--key-face);color:var(--key-ink);box-shadow:0 var(--press) 0 var(--key-line);border-radius:var(--radius-field);padding:8px 14px;font-weight:700;min-height:44px;transition:transform .12s ease-out,box-shadow .12s ease-out}
.chip:not(:disabled):active{transform:translateY(var(--press));box-shadow:none}
.chip.seen{border-color:var(--good)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(var(--press));box-shadow:none}
.info{background:var(--accent-soft);border-radius:var(--radius-box);padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-height:132px}
.info .like{color:var(--muted)}
.tag{font-size:var(--text-note);font-weight:700;color:var(--accent)}
.tag.plant{color:var(--good)}
.hotimg{position:relative;border-radius:var(--radius-box);overflow:hidden;width:100%;max-width:420px;margin:0 auto}
.hotimg img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.dot{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;border:3px solid var(--surface);background:var(--accent);color:var(--accent-ink);font-weight:700;display:grid;place-items:center;padding:0}
.dot.on{background:var(--star);color:var(--star-ink)}

/* activities */
.act{background:var(--surface);border-radius:var(--radius-panel);padding:18px 16px 20px;display:flex;flex-direction:column;gap:14px;border:1.5px solid var(--line);box-shadow:var(--shadow-card);scroll-margin-top:66px}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.stage{display:flex;flex-direction:column;gap:12px}
.q{font-family:var(--display);font-weight:600;font-size:var(--text-title);line-height:1.25}
.dots{display:flex;gap:6px}
.dots i{flex:1;max-width:38px;height:6px;border-radius:var(--radius-pill);background:var(--line)}
.dots i.d{background:var(--good)}
.dots i.c{background:var(--accent)}
.opts{display:grid;gap:8px}
.opts.two,.opts.pics{grid-template-columns:1fr 1fr}
.opts.pics.n3{grid-template-columns:repeat(3,1fr)}
.opt{text-align:left;background:var(--bg);border:2px solid var(--line-strong);box-shadow:0 3px 0 var(--line-strong);border-radius:var(--radius-control);padding:12px 14px;min-height:50px;line-height:1.3;position:relative}
.opts.two .opt{text-align:center;font-weight:700}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 3px 0 var(--accent)}
.opt:not(:disabled):active{transform:translateY(3px);box-shadow:none}
.opt.right{background:var(--good-bg);border-color:var(--good);box-shadow:0 3px 0 var(--good)}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad);box-shadow:0 3px 0 var(--bad)}
.opt:disabled{cursor:default;color:var(--ink);opacity:.5}
.opt.right:disabled,.opt.wrong:disabled{opacity:1}
.opt.pic{padding:6px 6px 10px;text-align:center;display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:var(--text-meta)}
.opt.pic img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-small)}
.num{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:50%;background:var(--good);color:var(--good-ink);display:none;place-items:center;font-weight:700}
.opt.right .num{display:grid}
.qimg{width:100%;max-width:280px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-box);margin:0 auto}
.fb{min-height:1.5em}
.yes{color:var(--good)}
.no{color:var(--bad)}
.btn{background:var(--go-face);color:var(--go-ink);border:2px solid var(--go-face);box-shadow:0 var(--press) 0 var(--go-edge);padding:11px 20px;border-radius:var(--radius-control);font-weight:700;text-decoration:none;display:inline-block;min-height:48px;transition:transform .12s ease-out,box-shadow .12s ease-out}
.btn.ghost{border:2px solid var(--key-line);background:var(--key-face);color:var(--key-ink);box-shadow:0 var(--press) 0 var(--key-line)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn:not(:disabled):active{transform:translateY(var(--press));box-shadow:none}
.btn.next{align-self:flex-start}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.c{justify-content:center}
.row.sp{justify-content:space-between}
.sortcard{background:var(--accent-soft);border-radius:var(--radius-tile);padding:20px 16px;text-align:center;font-family:var(--display);font-weight:800;font-size:var(--text-h2);line-height:1.15;display:flex;flex-direction:column;align-items:center;gap:10px}
.sortcard img{width:130px;height:130px;border-radius:var(--radius-control);object-fit:cover}
.clues{padding-left:1.3em;display:flex;flex-direction:column;gap:4px;font-size:var(--text-lead)}
.pts{font-weight:700;color:var(--stain)}
.result{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;padding:8px 0}
.xl{font-size:var(--text-hero);line-height:1;letter-spacing:6px}
.pn{display:flex;justify-content:space-between;gap:12px}
.pn{align-items:center}
.pn a{border:2px solid var(--key-line);background:var(--key-face);color:var(--key-ink);box-shadow:0 var(--press) 0 var(--key-line);border-radius:var(--radius-control);padding:9px 16px;font-weight:700;text-decoration:none}
.pn a.nx{background:var(--go-face);color:var(--go-ink);border:2px solid var(--go-face);box-shadow:0 var(--press) 0 var(--go-edge)}

/* microscope and diffusion */
.tasks{padding-left:1.3em;display:flex;flex-direction:column;gap:6px;font-size:var(--text-caption);color:var(--muted)}
.tasks li.now{color:var(--ink)}
.tasks li.done{color:var(--good)}
.scope{width:min(100%,290px);aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto;background:var(--void);border:8px solid var(--ink)}
.scope img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mag{font-family:var(--display);font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.lens{display:flex;gap:8px}
.lens .opt{flex:1;text-align:center;font-weight:700}
.sl{display:flex;flex-direction:column;gap:2px;font-weight:700}
.sl input{width:100%;height:38px;accent-color:var(--accent);margin:0}
.sl .ends{display:flex;justify-content:space-between;font-weight:400;font-size:var(--text-note);color:var(--muted)}
.sim{width:100%;height:170px;border-radius:var(--radius-box);background:var(--bg);display:block}
.counts{display:flex;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums;font-size:var(--text-caption)}

/* exam */
textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--line-strong);border-radius:var(--radius-control);padding:10px 12px;resize:vertical}
.ms{background:var(--good-bg);border-radius:var(--radius-box);padding:14px;display:flex;flex-direction:column;gap:10px}
.ms label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.ms input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:var(--good)}
.tally{font-weight:700}

/* drag-and-drop activities */
.drag{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.drag.dragging{position:relative;z-index:20;box-shadow:var(--shadow-lift);transition:none}
.drag.sel{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(var(--press));box-shadow:none}
.drag img{pointer-events:none}
.drop{cursor:pointer}
.drop.over{outline:3px solid var(--star);outline-offset:2px}
.tray{display:flex;flex-wrap:wrap;gap:8px;min-height:50px}
.pinbox{position:relative;background:var(--bg);border-radius:var(--radius-box);overflow:hidden;width:100%;max-width:440px;margin:0 auto}
.pinbox svg,.pinbox img{width:100%;height:auto;display:block}
.pinbox .cell [data-part]{pointer-events:none}
.lead{stroke:var(--muted);stroke-width:1.5;fill:none}
.leadend{fill:var(--muted)}
.dot.done{background:var(--good);color:var(--good-ink)}
.legend{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:var(--text-caption)}
.legend li{display:flex;gap:8px;align-items:baseline;border-bottom:2px dotted var(--line);min-height:1.9em}
.legend b{color:var(--muted)}
.legend li.done{border-bottom-color:transparent;color:var(--good);font-weight:700}
.findbox svg{cursor:pointer}
.venn{width:100%;max-width:460px;height:auto;margin:0 auto;display:block;overflow:visible}
.venn .reg{stroke:var(--accent);stroke-width:2}
.venn .reg.a{fill:var(--accent-soft)}
.venn .reg.b{fill:var(--good-bg)}
.venn .reg.ab{fill:var(--sunk)}
.venn .reg.over,.venn .reg:focus-visible{stroke:var(--star);stroke-width:5;outline:none}
.venn text{font-family:var(--body);font-size:12px;fill:var(--ink);pointer-events:none}
.venn text.h{font-family:var(--display);font-weight:600;font-size:14px}
.venn text.in{font-weight:700;fill:var(--good)}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bin{border:2px dashed var(--line-strong);border-radius:var(--radius-box);padding:8px;min-height:96px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.bin h3{font-size:var(--text-lead);text-align:center}
.bin .in{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip.right{background:var(--good-bg);border-color:var(--good);color:var(--ink);min-height:0;padding:4px 10px;font-size:var(--text-note);opacity:1;box-shadow:none;transform:none}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slots.n5{grid-template-columns:repeat(5,1fr)}
.slot{aspect-ratio:1;border:2px dashed var(--line-strong);border-radius:var(--radius-control);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:var(--text-h2);color:var(--muted);background:var(--bg);position:relative;overflow:hidden}
.slot.done{border-style:solid;border-color:var(--good)}
.slot img,.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb{position:relative;aspect-ratio:1;padding:0;border:2px solid var(--line-strong);border-radius:var(--radius-control);overflow:hidden;background:var(--bg)}
.thumb.sel{outline:4px solid var(--accent);outline-offset:1px}
.caps{padding-left:1.5em;font-size:var(--text-caption);display:flex;flex-direction:column;gap:2px}
.cloze{font-size:var(--text-lead);line-height:2.4}
.gap{display:inline-block;min-width:84px;min-height:1.9em;line-height:1.75;border:2px dashed var(--line-strong);border-radius:var(--radius-small);vertical-align:middle;text-align:center;padding:0 8px;background:var(--bg)}
.gap.done{border-style:solid;border-color:var(--good);background:var(--good-bg);font-weight:700}
.sum{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--display);font-weight:600;font-size:var(--text-title)}
.sum input{width:120px;font:inherit;padding:8px 10px;border:2px solid var(--line-strong);border-radius:var(--radius-field);background:var(--bg);color:var(--ink)}
@media (min-width:620px){.opts.pics{grid-template-columns:repeat(4,1fr)}.opts.pics.n3{grid-template-columns:repeat(3,minmax(0,190px))}}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes pop{50%{transform:scale(1.05)}}
.shake{animation:shake .3s}
.pop{animation:pop .3s}
@media (prefers-reduced-motion:reduce){.shake,.pop{animation:none}.scope img,.chip,.btn{transition:none}}
/* goal, self-check and teacher notes */
.goal{max-width:34em;margin:2px 4px 4px}
.can,.teach{display:flex;flex-direction:column;gap:10px}
.canlist{display:flex;flex-direction:column;gap:8px}
.canlist label{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border-radius:var(--radius-control);padding:12px 14px;cursor:pointer;border:1.5px solid var(--line)}
.canlist input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--good)}
.refs{font-size:var(--text-note)}
.tile.off{opacity:.45}

/* test tubes, flasks and the pH scale */
.rig{display:grid;justify-items:center;gap:6px}
.rig svg{width:110px;height:auto;display:block}
.liq{transition:fill .5s}
.ph{font-family:var(--display);font-weight:600;font-size:var(--text-title);text-align:center;line-height:1.3}
.ph .meta{font-family:var(--body);font-weight:400}
.opts.three{grid-template-columns:repeat(3,1fr)}
.opts.three .opt{text-align:center;font-weight:700;min-width:0;padding-inline:6px;overflow-wrap:anywhere}
.phx,.xp{background:var(--surface);border-radius:var(--radius-panel);padding:14px;display:flex;flex-direction:column;gap:12px;border:1.5px solid var(--line)}
.phscale{width:100%;height:auto;display:block}
.phscale text{font-family:var(--body);font-size:12px;fill:var(--ink)}
.hazards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hazards figure{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:var(--text-caption)}
.hazards svg{width:96px;height:auto}
.opt:not(.pic) .num{position:static;margin-right:8px;width:26px;height:26px;vertical-align:middle}
.opt.right:not(.pic) .num{display:inline-grid}
@media (prefers-reduced-motion:reduce){.liq{transition:none}}

/* circuit diagrams, charges and fields */
svg.cir{width:100%;height:auto;display:block;background:var(--bg);border-radius:var(--radius-box)}
.cir .w{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cir .j{fill:var(--ink)}
.cir .sy path,.cir .sy circle,.cir .sy rect{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cir .sy .k{stroke-width:5.5;stroke-linecap:butt}
.cir .sy .f{fill:var(--ink)}
.cir .sy .mb{fill:var(--bg);stroke:none}   /* hides the electron dots behind a meter's letter */
.cir .sy .halo,.cir .sy .lit{fill:var(--star);stroke:none}
.cir .sy .it{fill:var(--muted);stroke:none}
.cir text{font-family:var(--body);font-size:12px;font-weight:700;fill:var(--ink);text-anchor:middle}
.cir .rd{fill:var(--accent);font-size:13px}
.cir .flow{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 16;opacity:.8;animation:flow 1s linear infinite}
.cir .flow.still{animation:none;opacity:.4}
@keyframes flow{to{stroke-dashoffset:-16}}
.cir .pos{fill:var(--bad);font-size:17px}
.cir .neg{fill:var(--accent);font-size:17px}
.cir .cap{font-size:13px}
.cir .cloth,.cir .dome{fill:var(--sunk);stroke:var(--ink);stroke-width:2.5}
.cir .bal,.cir .ball{fill:var(--stain-bg);stroke:var(--stain);stroke-width:2.5;stroke-linejoin:round}
.cir .th{fill:none;stroke:var(--muted);stroke-width:1.5}
.cir .arr{fill:none;stroke:var(--bad);stroke-width:4;stroke-linecap:round}
.cir .arrh{fill:var(--bad)}
.bl .neg{transition:transform .7s}
.bl .bg,.bl .sw{transition:transform .8s}
.opt .cir,.syms .cir{background:none}
.opt .cir .sy .mb,.syms .cir .sy .mb{fill:none}
.q .cir{margin-top:10px}
.say{text-align:center;min-height:1.5em}
.ctl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ctl .btn{padding-inline:8px}
.ctl .wide{grid-column:1/-1}
.syms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.syms figure{border:1.5px solid var(--line);background:var(--surface);border-radius:var(--radius-control);padding:4px 4px 8px;text-align:center;font-size:var(--text-note);font-weight:700;line-height:1.2}
/* apparatus drawings, graphs and chromatography paper */
svg.dia{width:100%;height:auto;display:block;background:var(--bg);border-radius:var(--radius-box)}
.dia text{font-family:var(--body);font-size:12px;font-weight:700;fill:var(--ink);text-anchor:middle}
.dia .ax{font-weight:400;font-size:11px;fill:var(--muted)}
.dia .gl{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dia .f{fill:var(--ink)}
.dia .lq{fill:var(--accent);opacity:.28}
.dia .sol{fill:var(--muted);opacity:.6}
.dia .mud{fill:#A8814F}
.dia .pour{fill:none;stroke:#A8814F;stroke-width:5;stroke-linecap:round}
.dia .paper{fill:var(--surface);stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round}
.dia .drip{fill:var(--accent);opacity:.6}
.dia .bung{fill:var(--muted)}
.dia .jacket{fill:var(--accent);fill-opacity:.16;stroke:var(--ink);stroke-width:2.5}
.dia .flame{fill:var(--stain)}
.dia .wp{fill:var(--accent);opacity:.3}
.dia .sp{fill:var(--ink);transition:transform 1.2s}
.dia .pan{fill:var(--sunk);stroke:var(--ink);stroke-width:2.5}
.dia .read{font-family:var(--display);font-size:16px}
.grf .grid{fill:none;stroke:var(--line);stroke-width:1}
.grf .axis{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.grf .crv{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.grf .pt{fill:var(--accent)}
.grf .guide{fill:none;stroke:var(--star);stroke-width:2;stroke-dasharray:4 5}
.grf .curpt{fill:var(--star);stroke:var(--ink);stroke-width:2}
.chr .sheet{fill:#FBFAF3;stroke:var(--line);stroke-width:2}
.chr .wet{fill:#4FA3E0;opacity:.16;transition:transform 2.2s linear}
.chr .pen{fill:none;stroke:#8C8C8C;stroke-width:1.5}
.chr .spot{opacity:.92;transition:transform 2.2s linear}
.chr .blob{fill:#2B2B33;transition:opacity 1.2s}
.ctl.three{grid-template-columns:1fr 1fr 1fr}
/* force arrows, objects and the newton meter */
.dia .ar{fill:none;stroke-width:4;stroke-linecap:round}
.dia .ar.a1{stroke:var(--accent)}.dia .ah.a1{fill:var(--accent)}
.dia .ar.a2{stroke:var(--bad)}.dia .ah.a2{fill:var(--bad)}
.dia .hull{fill:var(--sunk);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.dia .wheel{fill:var(--ink)}
.dia .grd{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.dia .rope{fill:none;stroke:var(--stain);stroke-width:4;stroke-linecap:round}
.dia .flagc{fill:var(--bad)}
.dia .ob{fill:var(--stain-bg);stroke:var(--stain);stroke-width:2.5;stroke-linejoin:round}
.dia .ln{fill:none;stroke:var(--muted);stroke-width:1.5}
.dia .tube{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.dia .tick{fill:none;stroke:var(--ink);stroke-width:1.5}
.dia .spr{fill:none;stroke:var(--muted);stroke-width:2.5;stroke-linejoin:round}
.dia .ptr{fill:none;stroke:var(--bad);stroke-width:3.5;stroke-linecap:round}
.dia .blk{transition:transform .9s ease-out}
.dt{width:100%;border-collapse:collapse;font-size:var(--text-meta);text-align:center;font-variant-numeric:tabular-nums}
.dt th{text-align:left;font-weight:700;padding:4px 8px 4px 0;font-size:var(--text-note)}
.dt td{padding:5px 2px;border:2px solid var(--line)}
.dt td.now{background:var(--accent-soft);border-color:var(--accent);font-weight:700}
.dt td.done{color:var(--good);font-weight:700}
@media (prefers-reduced-motion:reduce){.cir .flow{animation:none}.bl .neg,.bl .bg,.bl .sw,.dia .sp,.dia .blk,.chr .wet,.chr .spot,.chr .blob{transition:none}}
/* ---------- Stationery: the pieces of the Idea by Idea design system ----------
   Style A, chosen by the owner on 2026-11-14: a clean white page with real stationery on it. Sticky tabs, sticky
   notes, taped photos, paper cards and keys that press down. No grid paper. design/reference.html shows every piece.
   Rules:
   - Each piece carries something: a tab says where you are, a sticky note holds the goal or a reminder, a key is a
     choice or an action. Nothing is there only to decorate.
   - Paper objects (sticky notes, small notes) use --paper-ink.
   - Every class starts nb- ("notebook"), modifiers and inner parts too (.nb-go, .nb-word), so that no rule of the
     engine or a page can reach them, and nothing here can reach the engine's own elements. States are aria-current
     and aria-pressed, never a bare class such as .on.
   - Colours are tokens. The site is light only (the owner's choice, 2026-11-14), so there are no dark blocks. */
:root{
  --paper:#FFFFFF; --paper-ink:#1B2233; --photo-frame:#FFFFFF;
  --sticky:#FFEB7A; --sticky-edge:#F3D84A;
  --note-blue:#CFE6FF; --note-pink:#FFD3DF; --note-green:#CDEFC9; --note-orange:#FFDDB5;
  --tape:#5BAAD6;
  --biology-tint:#D4EFED; --chemistry-tint:#FADFCC; --physics-tint:#D8E5F7; --extra:#6B4FA0; --extra-tint:#E7DFF4;
  --key-face:#FFFFFF; --key-ink:#1B2233; --key-line:#1B2233;
  --go-face:#1B2233; --go-ink:#FFFFFF; --go-edge:#000000; --flag-ink:#FFFFFF; --word-filter:none;
  /* not colours: the shadows paper casts, how far a key travels, how far paper tilts */
  --shadow-paper:0 10px 14px -10px rgb(0 0 0/.4),0 1px 1px rgb(0 0 0/.12);
  --shadow-photo:0 1px 2px rgb(0 0 0/.12),0 12px 22px -14px rgb(0 0 0/.45);
  --shadow-card:0 1px 0 rgb(0 0 0/.05),0 10px 22px -16px rgb(0 0 0/.4);
  --press:4px; --tilt:-1.2deg;
}

/* a subject sets --c (its colour) and --t (its tint) for the pieces inside it */
.nb-biology{--c:var(--biology);--t:var(--biology-tint)}
.nb-chemistry{--c:var(--chemistry);--t:var(--chemistry-tint)}
.nb-physics{--c:var(--physics);--t:var(--physics-tint)}
.nb-extra{--c:var(--extra);--t:var(--extra-tint)}

/* the logo: the folded-paper bulb and the wordmark, optionally with the site's name after a rule */
.nb-logo{display:flex;align-items:center;gap:6px;min-width:0;color:var(--ink);text-decoration:none}
.nb-logo .nb-bulb{height:34px;width:auto}
.nb-logo .nb-word{height:17px;width:auto;filter:var(--word-filter)}
.nb-logo .nb-site{font-weight:600;font-size:var(--text-note);color:var(--muted);border-left:1.5px solid var(--line);padding-left:8px;margin-left:4px;white-space:nowrap}

/* sticky tabs (page flags): where you are. They hang from the edge above them; the current one hangs further. */
.nb-flags{display:flex;gap:5px;padding:0 12px}
.nb-flag{flex:1;min-width:0;text-align:center;font-weight:600;font-size:12px;line-height:1;padding:9px 2px 8px;border-radius:0 0 5px 5px;
  background:var(--t,var(--sunk));color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:inset 0 -5px 0 var(--c,var(--line)),0 2px 3px -1px rgb(0 0 0/.15)}
.nb-flag[aria-current]{background:var(--c,var(--ink));color:var(--flag-ink);padding-bottom:16px;box-shadow:0 3px 5px -2px rgb(0 0 0/.3)}
.nb-flags.nb-wide{justify-content:flex-start;padding:0}
.nb-flags.nb-wide .nb-flag{flex:none;padding:10px 16px 9px;font-size:13px}
.nb-flags.nb-wide .nb-flag[aria-current]{padding-bottom:17px}

/* a sticky note: the lesson's goal, or a reminder such as "Carry on where you left off" */
.nb-sticky{display:block;position:relative;background:linear-gradient(180deg,var(--sticky-edge) 0 7px,var(--sticky) 7px);color:var(--paper-ink);
  padding:14px 16px 13px;border-radius:2px 2px 3px 14px;box-shadow:var(--shadow-paper);transform:rotate(var(--tilt));text-decoration:none}
.nb-sticky b,.nb-sticky strong{font-weight:700}
.nb-sticky.nb-flat{transform:none}
a.nb-sticky:hover{transform:rotate(var(--tilt)) translateY(-2px)}

/* small notes in a row: shortcuts to other pages. They take turns at four colours and tilts. */
.nb-notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.nb-note{display:flex;flex-direction:column;justify-content:center;min-height:66px;padding:12px 6px 10px;text-align:center;font-weight:700;font-size:13px;line-height:1.2;
  color:var(--paper-ink);text-decoration:none;background:var(--n,var(--note-blue));border-radius:2px 2px 2px 10px;box-shadow:var(--shadow-paper);transform:rotate(var(--r,0deg))}
.nb-note small{display:block;font-weight:400;font-size:11px;opacity:.75;margin-top:3px}
.nb-note:nth-child(4n+1){--n:var(--note-blue);--r:-2deg}.nb-note:nth-child(4n+2){--n:var(--note-pink);--r:1.5deg}
.nb-note:nth-child(4n+3){--n:var(--note-green);--r:-1deg}.nb-note:nth-child(4n+4){--n:var(--note-orange);--r:2deg}

/* a taped photo: a print with a white border, held by two strips of tape (or one, .nb-one-tape) */
.nb-photo{position:relative;display:block;margin:0;padding:7px;background:var(--photo-frame);box-shadow:var(--shadow-photo);transform:rotate(.6deg)}
.nb-photo.nb-tilt-left{transform:rotate(-.6deg)}
.nb-photo>img{display:block;width:100%;height:auto;object-fit:cover}
.nb-photo::before,.nb-photo::after{content:"";position:absolute;top:3px;width:70px;height:20px;pointer-events:none;
  background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--tc,var(--tape)) 55%,transparent) 0 7px,color-mix(in srgb,var(--tc,var(--tape)) 38%,transparent) 7px 14px)}
.nb-photo::before{left:-13px;transform:rotate(-33deg)}
.nb-photo::after{right:-13px;transform:rotate(33deg)}
.nb-photo.nb-one-tape::before{display:none}
.nb-photo.nb-one-tape::after{right:auto;left:50%;top:-8px;width:56px;margin-left:-28px;transform:rotate(-3deg)}
.nb-biology .nb-photo,.nb-chemistry .nb-photo,.nb-physics .nb-photo,.nb-photo.nb-biology,.nb-photo.nb-chemistry,.nb-photo.nb-physics{--tc:var(--c)}

/* a card resting on the page */
.nb-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-control);padding:12px 14px;box-shadow:var(--shadow-card)}

/* a key: a tile or button with a solid edge under it. Pressing it, or choosing it, pushes it down onto the page. */
.nb-key{display:inline-block;font:inherit;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;color:var(--key-ink);background:var(--key-face);
  border:2px solid var(--key-line);border-radius:var(--radius-field);padding:9px 13px;box-shadow:0 var(--press) 0 var(--key-line);transition:transform .12s ease-out,box-shadow .12s ease-out}
.nb-key:active,.nb-key[aria-pressed="true"]{transform:translateY(var(--press));box-shadow:0 0 0 var(--key-line)}
.nb-key[aria-pressed="true"]{background:var(--key-line);color:var(--key-face)}
.nb-key.nb-go{background:var(--go-face);color:var(--go-ink);border-color:var(--go-face);box-shadow:0 var(--press) 0 var(--go-edge);border-radius:var(--radius-control);padding:12px 20px}
.nb-key.nb-go:active,.nb-key.nb-go[aria-pressed="true"]{box-shadow:0 0 0 var(--go-edge)}
.nb-key:disabled{opacity:.45;cursor:default;transform:none}

/* a folder with index tabs on top: the tabs jump to the parts of a page (a unit's Lessons, Games, Puzzles, Organiser) */
.nb-folder{position:relative;margin-top:34px}
.nb-ftabs{position:absolute;top:-30px;left:10px;right:10px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nb-ftab{flex:none;font-weight:600;font-size:13px;padding:7px 12px 9px;border:1.5px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;
  background:var(--sunk);color:var(--muted);text-decoration:none}
.nb-ftab[aria-current]{background:var(--surface);color:var(--ink);position:relative;top:1.5px;padding-bottom:10px}
.nb-folder>.nb-card{border-top-left-radius:4px}

/* a heading on a tab: a subject's section on the home page */
.nb-tabhead{display:inline-block;padding:6px 16px 6px 12px;background:var(--t,var(--sunk));box-shadow:inset 5px 0 0 var(--c,var(--line));border-radius:0 6px 6px 0;color:var(--ink)}

@media (prefers-reduced-motion:reduce){.nb-key{transition:none}a.nb-sticky:hover{transform:rotate(var(--tilt))}}
/* cells only */
/* Cells only. The animal cell is a picture with shapes laid over it (ACELL in unit.js). Under the shapes is the whole
   picture (.base); each shape holds its own piece of it. When a part is chosen the whole picture fades and only the
   chosen part's piece shows, at full strength, so the part stands out exactly as it did in the drawing. */
.u-cells .pcell .base{transition:opacity .2s}
.u-cells .pcell.dim .base{opacity:.22}
.u-cells .pcell.dim [data-part]{opacity:0}
.u-cells .pcell.dim [data-part].hot{opacity:1}
/* In "tap the part", a part reached with the Tab key is outlined along its own shape. Every part's box is the whole
   picture, so the engine's square outline would look the same for all of them. The two colours are fixed, not tokens,
   because the picture under them is the same in both themes. */
.u-cells .pcell .ring{fill:none;stroke:none;stroke-linejoin:round;pointer-events:none}
.u-cells .findbox .pcell [data-part]:focus-visible{outline:none}
.u-cells .findbox .pcell [data-part]:focus-visible .ring{stroke:#fff;stroke-width:5.5}
.u-cells .findbox .pcell [data-part]:focus-visible .ring.in{stroke:#0E2233;stroke-width:2.5}
/* skeleton only */
/* Skeleton and muscles only. tools/build.sh adds this after engine.css. Every selector starts with .u-skeleton, the class the engine
   puts on the page (the revision sheet puts it on its body and links this file too).
   Bone, cartilage, ligament, tendon, muscle and the organs keep one colour in both themes, as the real tissues do. */
.u-skeleton svg .bn{fill:#F4ECD8;stroke:#6E6048;stroke-width:1.5;stroke-linejoin:round}
.u-skeleton svg .bn.v{stroke-width:1}
.u-skeleton svg .bo{fill:none;stroke:#6E6048;stroke-linecap:round;stroke-linejoin:round}
.u-skeleton svg .bi{fill:none;stroke:#F4ECD8;stroke-linecap:round;stroke-linejoin:round}
.u-skeleton svg .hole{fill:#6E6048}
.u-skeleton svg .tl{fill:none;stroke:#6E6048;stroke-width:1;stroke-linecap:round}
.u-skeleton svg .hit{fill:transparent;stroke:transparent}
.u-skeleton svg .hot .bn{fill:var(--star)}
.u-skeleton svg .hot .bi{stroke:var(--star)}
.u-skeleton svg.skel.sel>g[data-part]:not(.hot){opacity:.36}
.u-skeleton svg .lung,.u-skeleton svg .brain{fill:#F2A7B5;stroke:#B05268;stroke-width:1.2;stroke-linejoin:round}
.u-skeleton svg .heart{fill:#C8323C;stroke:#7E1C24;stroke-width:1.2;stroke-linejoin:round}
.u-skeleton svg .fold{fill:none;stroke:#B05268;stroke-width:1;stroke-linecap:round}
.u-skeleton svg .mar{fill:none;stroke:#C8323C;stroke-linecap:round}
.u-skeleton svg .jdot{fill:var(--accent);stroke:var(--surface);stroke-width:1.5}
.u-skeleton svg .jdot.j2{fill:var(--bad)}
.u-skeleton svg .mus{fill:#EDB0A8;stroke:#8E2B26;stroke-width:1.8;stroke-linejoin:round}
.u-skeleton svg .mus.on{fill:#D2453E}
.u-skeleton svg .to{fill:none;stroke:#6E6048;stroke-linecap:round}
.u-skeleton svg .ti{fill:none;stroke:#FFFDF2;stroke-linecap:round}
.u-skeleton svg .car{fill:#A9D3EA;stroke:#3F7C9E;stroke-width:1.5;stroke-linejoin:round}
.u-skeleton svg .lo{fill:none;stroke:#6E6048;stroke-linecap:round}
.u-skeleton svg .li{fill:none;stroke:#E6CC6A;stroke-linecap:round}
.u-skeleton svg .tgt{fill:none;stroke:var(--star);stroke-width:3;stroke-dasharray:5 5}
.u-skeleton svg .barf{fill:var(--accent)}
.u-skeleton svg .barc{fill:var(--accent-soft);stroke:var(--star);stroke-width:2}
.u-skeleton svg .now{fill:var(--ink);font-weight:700}
.u-skeleton .xp svg [data-part]{cursor:pointer}
/* a drawing beside its buttons: the skeleton is tall and narrow, so the words go next to it */
.u-skeleton .bx{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:12px;align-items:start}
.u-skeleton .bx.wide{grid-template-columns:minmax(0,1fr)}
.u-skeleton .bx .side{display:flex;flex-direction:column;gap:10px}
.u-skeleton .bx:not(.wide) .chips{flex-direction:column;flex-wrap:nowrap}
.u-skeleton .bx .chip{font-size:.95rem;text-align:left;line-height:1.2}
.u-skeleton .bx .info{min-height:0;padding:12px 14px;font-size:.95rem}
.u-skeleton .bx .info h3{font-size:1.08rem}
.u-skeleton .opt.pic svg.skel{width:auto;height:170px;margin:0 auto;background:none}
.u-skeleton .q svg{margin-top:10px}
/* on a wide screen a drawing that fills the column would be taller than the window */
.u-skeleton .bx svg.skel{max-height:450px}
.u-skeleton svg.arm{max-height:340px}
.u-skeleton svg.jt{max-height:300px}
/* reproduction only */
/* Human reproduction only. tools/build.sh adds this after engine.css. Every selector starts with .u-reproduction, the class the engine
   puts on the page (the revision sheet puts it on its body and links this file too).
   The tissues keep one colour in both themes, as in a textbook diagram: muscle pink, the lining of the uterus red, the organs that
   make gametes yellow, glands purple. Spaces, labels and the outline of the foetus use the theme's own colours. */
.u-reproduction svg .ws{fill:#F2CEC7;stroke:#8E4A44;stroke-width:calc(2px*var(--z,1));stroke-linejoin:round}
.u-reproduction svg .cav{fill:var(--bg)}
.u-reproduction svg .can{fill:none;stroke:var(--bg);stroke-width:5}
.u-reproduction svg .shut{fill:none;stroke:#8E4A44;stroke-width:calc(1.5px*var(--z,1))}
.u-reproduction svg .lin{fill:none;stroke:#CF4F5D;stroke-linejoin:round;stroke-linecap:round}
.u-reproduction svg .lin.brk{stroke-dasharray:5 4;stroke-linecap:butt}
.u-reproduction svg .loss{fill:#CF4F5D}
.u-reproduction svg .ov{fill:#F8E3A0;stroke:#8A6A1E;stroke-width:2}
.u-reproduction svg .fol{fill:#E3B13A}
.u-reproduction svg .lg{fill:none;stroke:#B98A84;stroke-width:2.5;stroke-linecap:round}
.u-reproduction svg .to{fill:none;stroke:#8E4A44;stroke-linecap:round;stroke-linejoin:round}
.u-reproduction svg .ti{fill:none;stroke:#FBE9E4;stroke-linecap:round;stroke-linejoin:round}
.u-reproduction svg .fun{fill:#FBE9E4;stroke:#8E4A44;stroke-width:1.5;stroke-linejoin:round}
.u-reproduction svg .gld{fill:#DCC8EE;stroke:#6A4A8E;stroke-width:2}
.u-reproduction svg .bld{fill:var(--sunk);stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4}
.u-reproduction svg .skin{fill:#F7E4D9;stroke:#8E4A44;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.u-reproduction svg .hit{fill:transparent;stroke:none}
.u-reproduction svg .hitl{fill:none;stroke:transparent;stroke-linecap:round}
/* gametes and the embryo */
.u-reproduction svg .egg{fill:#F6C445;stroke:#8A5A00;stroke-width:1.5}
.u-reproduction svg .egg.done{fill:#F6C445;stroke:var(--good);stroke-width:2.5}
.u-reproduction svg .jel{fill:#F6C445;fill-opacity:.25;stroke:#8A5A00;stroke-width:1;stroke-dasharray:3 3}
.u-reproduction svg .nuc{fill:#7B5EA7}
.u-reproduction svg .mit{fill:#DB7A2C}
.u-reproduction svg .sph{fill:var(--accent)}
.u-reproduction svg .spt{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round}
.u-reproduction svg .emb{fill:#F6C445;stroke:#8A5A00;stroke-width:calc(1px*var(--z,1))}
.u-reproduction svg .blk{fill:var(--ink)}
.u-reproduction svg .ring{fill:none;stroke:var(--star);stroke-width:2.5;stroke-dasharray:4 4}
/* the foetus in the uterus */
.u-reproduction svg .fl{fill:#BFE2F0}
.u-reproduction svg .plc{fill:#B8485A;stroke:#6E1F2C;stroke-width:calc(2px*var(--z,1));stroke-linejoin:round}
.u-reproduction svg .co{fill:none;stroke:#6E1F2C;stroke-linecap:round}
.u-reproduction svg .ci{fill:none;stroke:#E9A9B4;stroke-linecap:round}
.u-reproduction svg .fo{fill:none;stroke:var(--ink);stroke-width:calc(5px*var(--z,1));stroke-linejoin:round}
.u-reproduction svg .fi{fill:var(--surface);stroke:var(--surface);stroke-width:1}
.u-reproduction svg .mo{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.u-reproduction svg .mi{fill:none;stroke:var(--surface);stroke-linecap:round;stroke-linejoin:round}
.u-reproduction svg .fd{fill:none;stroke:var(--ink);stroke-width:calc(1.6px*var(--z,1));stroke-linecap:round}
.u-reproduction svg .mag{fill:var(--surface);stroke:var(--muted);stroke-width:2}
/* the placenta, drawn as two streams of blood with a thin wall between them */
.u-reproduction svg .mb{fill:#F3C1C1}
.u-reproduction svg .fb{fill:#C9D6F2}
.u-reproduction svg .wallp{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}
.u-reproduction svg .on{fill:#1B1B1B}
.u-reproduction svg.pl .ar.a1{stroke:#0B6E8A}
.u-reproduction svg.pl .ah.a1{fill:#0B6E8A}
.u-reproduction svg.pl .ar.a2{stroke:#B3261E}
.u-reproduction svg.pl .ah.a2{fill:#B3261E}
.u-reproduction svg .sub{fill:var(--ink);font-weight:700}
/* the 28-day dial */
.u-reproduction svg .ph0{fill:#CF4F5D}
.u-reproduction svg .ph1{fill:#F4C3C8}
.u-reproduction svg .ph2{fill:#F6C445}
.u-reproduction svg .ph3{fill:#E58E99}
.u-reproduction svg .seg{stroke:var(--bg);stroke-width:1}
.u-reproduction svg .seg.now{stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.u-reproduction svg .hand{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.u-reproduction svg .hub{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.u-reproduction .key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;color:var(--muted)}
.u-reproduction .key span{display:flex;align-items:center;gap:6px}
.u-reproduction .key i{width:14px;height:14px;border-radius:4px;flex:none}
.u-reproduction .key .k0{background:#CF4F5D}
.u-reproduction .key .k1{background:#F4C3C8}
.u-reproduction .key .k2{background:#F6C445}
.u-reproduction .key .k3{background:#E58E99}
/* drawings inside a lesson, a question or an option */
.u-reproduction .xp .ex svg [data-part]{cursor:pointer}
.u-reproduction .xp svg.cy [data-part]{cursor:default}
.u-reproduction .pinbox svg.rp{max-height:none}
.u-reproduction .xp .info{min-height:112px}
.u-reproduction .q svg{margin-top:10px}
.u-reproduction svg.rp{max-height:380px}
.u-reproduction .cellbox svg.rp{max-height:340px}
.u-reproduction .pair2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.u-reproduction .pair2 figure{display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.u-reproduction .pair2 img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;background:var(--sunk)}
.u-reproduction .stepnav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.u-reproduction .stepnav .meta{flex:1;text-align:center}
/* plants only */
/* Plant reproduction only. tools/build.sh adds this after engine.css. Every selector starts with .u-plants, the class the engine puts on
   the page (the revision sheet puts it on its body and links this file too).
   The plant parts keep one colour in both themes, as in a textbook diagram: petals pink, stalks and the carpel green, anthers and pollen
   yellow, a ripe fruit red. Labels, leader lines and the lab kit use the theme's own colours. */
.u-plants svg .fpb{fill:#FBDDE7;stroke:#D68AA6;stroke-width:1.5;stroke-linejoin:round}
.u-plants svg .fpet{fill:#F29DB8;stroke:#A9406A;stroke-width:2.5;stroke-linejoin:round}
.u-plants svg .fsep{fill:#7CC17C;stroke:#2F6B3A;stroke-width:2;stroke-linejoin:round}
.u-plants svg .fstm{fill:none;stroke:#3E8B48;stroke-width:9;stroke-linecap:round}
.u-plants svg .frec{fill:#5FAE5F;stroke:#2F6B3A;stroke-width:2;stroke-linejoin:round}
.u-plants svg .ffil{fill:none;stroke:#8FA24A;stroke-width:3.5;stroke-linecap:round}
.u-plants svg .ffil.w5{stroke-width:6}
.u-plants svg .fan{fill:#F2B33D;stroke:#8A5A00;stroke-width:2}
.u-plants svg .fgr{fill:none;stroke:#8A5A00;stroke-width:1.5;stroke-linecap:round}
.u-plants svg .fsty{fill:#CFE5A8;stroke:#4E7A2E;stroke-width:2;stroke-linejoin:round}
.u-plants svg .fstg{fill:#8DBB46;stroke:#3F6A22;stroke-width:2;stroke-linejoin:round}
.u-plants svg .fov{fill:#A9D27C;stroke:#4E7A2E;stroke-width:2.5;stroke-linejoin:round}
.u-plants svg .fcav{fill:#F4F9E6}
.u-plants svg .fax{fill:none;stroke:#4E7A2E;stroke-width:1.5;stroke-linecap:round}
.u-plants svg .fovu{fill:#FFF3C4;stroke:#8A6A1E;stroke-width:1.5}
/* wider, invisible targets, so that a thin part can still be tapped */
.u-plants svg .fhit{fill:none;stroke:transparent;stroke-width:18;stroke-linecap:round}
.u-plants svg .fhit.w26{stroke-width:26}
.u-plants svg .fhit0{fill:transparent;stroke:none}
/* after fertilisation: withered petals and stamens, then the fruit and its seeds */
.u-plants svg .wl .fpet{fill:#D9B9A6;stroke:#8E6A5A}
.u-plants svg .wl .ffil{stroke:#A39060}
.u-plants svg .wl .fan{fill:#B99B62;stroke:#6E5320}
.u-plants svg .ns path,.u-plants svg .ns ellipse{vector-effect:non-scaling-stroke}
.u-plants svg .ffr{fill:#EE6B4D;stroke:#9C2F1B;stroke-width:2.5;stroke-linejoin:round}
.u-plants svg .ffc{fill:#FBD9C4}
.u-plants svg .fsd{fill:#E9C46A;stroke:#7A5A14;stroke-width:1.5}
.u-plants svg .fem{fill:none;stroke:#4E7A2E;stroke-width:1.5;stroke-linecap:round}
.u-plants svg .fem.w2{stroke-width:3}
.u-plants svg .fdry{fill:none;stroke:#8E6A5A;stroke-width:4;stroke-linecap:round}
/* the journey of a pollen grain */
.u-plants svg .cpg{fill:#FFD84D;stroke:#8A6A00;stroke-width:1.5}
.u-plants svg .cmn{fill:#1D5FD0}
.u-plants svg .cfn{fill:#7B5EA7}
.u-plants svg .cegg{fill:#FFE3A0;stroke:#8A6A1E;stroke-width:1}
.u-plants svg .ctb{fill:none;stroke:#E8961E;stroke-width:6;stroke-linecap:round}
.u-plants svg .czy{fill:#7B5EA7;stroke:#1D5FD0;stroke-width:2.5}
.u-plants svg .cring{fill:none;stroke:var(--star);stroke-width:2.5;stroke-dasharray:4 4}
.u-plants svg .cgo{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round}
.u-plants svg .cgoh{fill:var(--ink)}
.u-plants .key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;color:var(--muted);justify-content:center}
.u-plants .key span{display:flex;align-items:center;gap:6px}
.u-plants .key i{width:12px;height:12px;border-radius:50%;flex:none}
.u-plants .key .kp{background:#FFD84D;box-shadow:0 0 0 1.5px #8A6A00}
.u-plants .key .km{background:#1D5FD0}
.u-plants .key .kf{background:#7B5EA7}
.u-plants .key .kt{background:#E8961E;border-radius:3px;width:18px;height:6px}
.u-plants .xp .ph{min-height:5.4em}
/* a grass flower */
.u-plants svg .wbr{fill:#9CCB7A;stroke:#2F6B3A;stroke-width:2;stroke-linejoin:round}
.u-plants svg .wst{fill:none;stroke:#5E8A32;stroke-width:3;stroke-linecap:round}
.u-plants svg .wbs{fill:none;stroke:#5E8A32;stroke-width:1.3;stroke-linecap:round}
.u-plants svg .wfil{fill:none;stroke:#8FA24A;stroke-width:2;stroke-linecap:round}
.u-plants svg .wpo{fill:#E9C13A}
/* a bean seed and a bursting pod */
.u-plants svg .sct{fill:#8A5A2B;stroke:#4A2E12;stroke-width:2}
.u-plants svg .sfs{fill:#FBF1CF;stroke:#B99A4A;stroke-width:1.5}
.u-plants svg .srt{fill:#F0D56A;stroke:#7A5A14;stroke-width:2;stroke-linejoin:round}
.u-plants svg .sst{fill:none;stroke:#6FA83A;stroke-width:7;stroke-linecap:round}
.u-plants svg .slf{fill:#BFDD7A;stroke:#4E7A2E;stroke-width:2;stroke-linejoin:round}
.u-plants svg .onl{fill:#12262C}
.u-plants svg .pv{fill:#B98E55;stroke:#6B4A1E;stroke-width:2;stroke-linejoin:round}
.u-plants svg .ps{fill:#C98F4A;stroke:#6B4A1E;stroke-width:1.5}
.u-plants svg .pm{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:3 4;stroke-linecap:round}
.u-plants .strip svg.dia{aspect-ratio:1;border-radius:12px;background:var(--sunk)}
/* the seed lab */
.u-plants svg .wing{fill:none;stroke:var(--stain);stroke-width:4;stroke-linecap:round}
.u-plants svg .ghost{opacity:.45}
/* drawings and pictures inside a lesson */
.u-plants .cellbox svg.sd{max-height:none}
.u-plants .xp svg.fl{max-height:330px}
.u-plants .pair2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.u-plants .pair2 figure{display:flex;flex-direction:column;gap:6px;font-size:.95rem;text-align:center}
.u-plants .pair2 img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;background:var(--sunk)}
/* digestion only */
/* Food and digestion only. tools/build.sh adds this after engine.css. Every selector starts with .u-digestion, the class the engine
   puts on the page (the revision sheet puts it on its body and links this file too).
   The organs, blood, foods and the plate keep one colour in both themes, as the real things do. */
.u-digestion svg .body{fill:var(--sunk);stroke:var(--line);stroke-width:2;stroke-linejoin:round}
.u-digestion svg .eye{fill:var(--muted)}
.u-digestion svg .to{fill:none;stroke:#6E4034;stroke-linecap:round;stroke-linejoin:round}
.u-digestion svg .ti{fill:none;stroke-linecap:round;stroke-linejoin:round}
.u-digestion svg .gu{stroke:#E9A08F}
.u-digestion svg .si{stroke:#F7C8B0}
.u-digestion svg .li{stroke:#C98572}
.u-digestion svg .re{stroke:#A65F58}
.u-digestion svg .hs{fill:none;stroke:#6E4034;stroke-width:1.2;opacity:.5}
.u-digestion svg .sto{fill:#F2A3AF;stroke:#6E4034;stroke-width:1.5;stroke-linejoin:round}
.u-digestion svg .liv{fill:#A04A38;stroke:#5A261B;stroke-width:1.5;stroke-linejoin:round}
.u-digestion svg .pan{fill:#F3D78C;stroke:#8C6D1F;stroke-width:1.5;stroke-linejoin:round}
.u-digestion svg .mo{fill:#B3262E;stroke:#6E4034;stroke-width:1.2;stroke-linejoin:round}
.u-digestion svg .teeth{fill:none;stroke:#FFFFFF;stroke-width:2.4;stroke-linecap:round}
.u-digestion svg .sg{fill:#F3D78C;stroke:#8C6D1F;stroke-width:1}
.u-digestion svg .an{fill:#5A261B}
.u-digestion svg .hit{fill:none;stroke:transparent}
.u-digestion svg .hitf{fill:transparent;stroke:none}
.u-digestion svg .food circle{fill:var(--star);stroke:var(--ink);stroke-width:2.5}
.u-digestion svg .food{transition:transform .7s}
.u-digestion svg.gut g.been{filter:drop-shadow(0 0 3px var(--star))}
.u-digestion svg .lt{text-anchor:start}
.u-digestion svg .rt{text-anchor:end}
/* the straight tube */
.u-digestion svg .t{stroke:#6E4034;stroke-width:1.5}
.u-digestion svg .t.gu{fill:#E9A08F}
.u-digestion svg .t.st{fill:#F2A3AF}
.u-digestion svg .t.si{fill:#F7C8B0}
.u-digestion svg .t.li{fill:#C98572}
/* molecules, the gut wall and blood */
.u-digestion svg .lk{fill:none;stroke:var(--stain);stroke-width:3;transition:opacity .3s}
.u-digestion svg .su{transition:transform .7s}
.u-digestion svg .enz{transition:transform .5s,opacity .3s}
.u-digestion svg .enz path{fill:var(--accent);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.u-digestion svg .bld{fill:#C8323C;opacity:.16}
.u-digestion svg .wl{fill:none;stroke:#C98572;stroke-width:12;stroke-dasharray:16 12}
.u-digestion svg .bld2{fill:#C8323C}
.u-digestion svg .tis{fill:#F7C8B0;stroke:#6E4034;stroke-width:2;stroke-linejoin:round}
.u-digestion svg .hol{fill:#FDEEE6}
.u-digestion svg .cel{fill:none;stroke:#6E4034;stroke-width:1.2}
.u-digestion svg .cap{fill:none;stroke:#C8323C;stroke-linecap:round;stroke-linejoin:round}
.u-digestion svg .fd{fill:var(--star);stroke:var(--ink);stroke-width:1.5;transition:transform 1.2s}
.u-digestion svg .wt{fill:#FFFFFF;font-weight:700}
/* bars */
.u-digestion svg .b1{fill:var(--accent)}
.u-digestion svg .b0{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:5 4}
.u-digestion svg.hb text{font-size:12.5px}
/* the plate */
.u-digestion svg .plt{fill:#FFFFFF;stroke:#B8C2C8;stroke-width:2}
.u-digestion svg .rim{fill:none;stroke:#DDE3E7;stroke-width:1.5}
.u-digestion svg .pt{fill:#4F6973;font-weight:400;font-size:11px}
.u-digestion .seven{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.u-digestion .pill{border:2px dashed var(--line);border-radius:99px;padding:2px 10px;font-size:.85rem;color:var(--muted)}
.u-digestion .pill.on{border-style:solid;border-color:var(--good);background:var(--good-bg);color:var(--ink);font-weight:700}
/* patients */
.u-digestion .cases{display:grid;gap:8px}
.u-digestion .case{border:2px dashed var(--line);border-radius:14px;padding:10px 12px;background:var(--bg);display:flex;flex-direction:column;gap:2px;font-size:.95rem;line-height:1.35}
.u-digestion .case b{font-family:var(--display);font-size:1rem}
.u-digestion .case em{font-style:normal;font-weight:700;color:var(--good)}
.u-digestion .case.done{border-style:solid;border-color:var(--good);background:var(--good-bg)}
/* a food label and a day's food */
.u-digestion .lab{display:flex;flex-direction:column;max-width:210px;margin-top:10px;border:2px solid var(--ink);border-radius:8px;padding:6px 8px;background:var(--surface);font-family:var(--body);font-size:.85rem;font-weight:400;line-height:1.25}
.u-digestion .lab b{font-family:var(--display);font-size:1rem;border-bottom:2px solid var(--ink);padding-bottom:2px;margin-bottom:3px}
.u-digestion .lab i{color:var(--muted);font-size:.72rem}
.u-digestion .lab strong{font-variant-numeric:tabular-nums}
.u-digestion .day{display:grid;gap:2px;margin-top:10px;font-family:var(--body);font-size:.95rem;font-weight:400}
.u-digestion .day span{display:flex;justify-content:space-between;gap:12px;border-bottom:2px dotted var(--line);padding:2px 0}
.u-digestion .day b{font-variant-numeric:tabular-nums}
.u-digestion .q svg{margin-top:10px}
.u-digestion .xp .fig{grid-template-columns:minmax(0,130px) minmax(0,1fr);align-items:start}
.u-digestion .xp .chip{padding:6px 12px}
/* a tall drawing must not be taller than the window on a wide screen; in the labelling box it keeps its full size, so that the dots line up */
.u-digestion .cellbox svg.gut,.u-digestion .cirbox svg.gut{max-height:520px}
.u-digestion svg.vil,.u-digestion svg.mol{max-height:340px}
.u-digestion .pinbox svg.vil{max-height:none}
.u-digestion .opt.pic svg{border-radius:8px}
@media (prefers-reduced-motion:reduce){.u-digestion svg .food,.u-digestion svg .su,.u-digestion svg .enz,.u-digestion svg .fd,.u-digestion svg .lk{transition:none}}
/* breathing only */
/* Breathing and gas exchange only. tools/build.sh adds this after engine.css. Every selector starts with .u-breathing, the class the
   engine puts on the page (the revision sheet puts it on its body and links this file too).
   Lung, muscle, bone, blood, mucus and leaf tissue keep one colour in both themes, as the real things do. */
/* the chest */
.u-breathing svg .tor{fill:var(--sunk)}
.u-breathing svg .lg{fill:#F2A7B5;stroke:#B05268;stroke-width:1.6;stroke-linejoin:round}
.u-breathing svg .ht{fill:#C8323C;stroke:#7E1C24;stroke-width:1.2;opacity:.6}
.u-breathing svg .awo{fill:none;stroke:#3F7C9E;stroke-linecap:round;stroke-linejoin:round}
.u-breathing svg .awi{fill:none;stroke:#EAF4FA;stroke-linecap:round;stroke-linejoin:round}
.u-breathing svg .rg{fill:none;stroke:#3F7C9E;stroke-width:1.8}
.u-breathing svg .av circle{fill:#FBDDE2;stroke:#B05268;stroke-width:.9}
.u-breathing svg .wo{fill:none;stroke:#8E2B26;stroke-linecap:round}
.u-breathing svg .wi{fill:none;stroke:#E9A199;stroke-linecap:round}
.u-breathing svg .rib{fill:#F4ECD8;stroke:#6E6048;stroke-width:1.5}
.u-breathing svg .dgo{fill:none;stroke:#8E2B26}
.u-breathing svg .dgi{fill:none;stroke:#D9776F}
.u-breathing .xp svg.chest [data-part]{cursor:pointer}
.u-breathing svg.chest.dim .ht{opacity:.14}
/* the bell-jar model */
.u-breathing svg .tbo{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.u-breathing svg .tbi{fill:none;stroke:var(--bg);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.u-breathing svg .bal{fill:#EE8FA2;stroke:#A8324E;stroke-width:2}
.u-breathing svg .rub{fill:none;stroke:var(--stain);stroke-width:4.5;stroke-linecap:round}
/* the alveolus */
.u-breathing svg .capo{fill:none;stroke:#7E1C24;stroke-width:29}
.u-breathing svg .capi{fill:none;stroke-width:26}
.u-breathing svg .rbc{stroke:#5E1420;stroke-width:1}
.u-breathing svg .rbc.lo{fill:#8C4A78}
.u-breathing svg .rbc.md{fill:#B03C52}
.u-breathing svg .rbc.hi{fill:#D8322A}
.u-breathing svg .alo{fill:var(--surface);stroke:#B05268;stroke-width:8;stroke-linejoin:round}
.u-breathing svg .ali{fill:none;stroke:#F6C9CF;stroke-width:5.4;stroke-linejoin:round}
.u-breathing svg .alc{fill:none;stroke:#B05268;stroke-width:5.4;stroke-dasharray:1.2 15}
.u-breathing svg .o2{fill:var(--accent);stroke:var(--surface);stroke-width:1}
.u-breathing svg .co2{fill:var(--stain);stroke:var(--surface);stroke-width:1}
.u-breathing svg .mv{transition:transform 1.6s ease-in-out}
.u-breathing svg .sac{fill:var(--surface);stroke:#B05268;stroke-width:4}
.u-breathing svg .sac.hl{stroke:var(--star);stroke-width:5}
.u-breathing svg .airp{fill:var(--surface)}
.u-breathing svg .bld{fill:#F6C4BE}
.u-breathing svg .wc{fill:#F6C9CF;stroke:#B05268;stroke-width:1.2}
/* measuring lung volume */
.u-breathing svg .air{fill:var(--bg);transform-origin:160px 24px;transition:transform 1.4s ease-out}
.u-breathing svg .rtube{fill:none;stroke:var(--stain);stroke-width:5;stroke-linecap:round}
.u-breathing svg .mp{fill:var(--stain)}
.u-breathing svg .band{fill:var(--accent-soft)}
/* a slice across an airway */
.u-breathing svg .airsp{fill:var(--bg)}
.u-breathing svg .muc{fill:#DCD27A}
.u-breathing svg .lin{fill:#F6C9CF;stroke:#B05268;stroke-width:1.5}
.u-breathing svg .lin.sw{fill:#EE8A97}
.u-breathing svg .mu{fill:#D9776F;stroke:#8E2B26;stroke-width:1.5}
.u-breathing svg .fib{fill:none;stroke:#8E2B26;stroke-width:1;stroke-dasharray:5 4;opacity:.7;pointer-events:none}
.u-breathing .cellbox svg.awy{max-height:300px}
.u-breathing .opt.pic svg{width:100%;height:auto;display:block}
.u-breathing .xp svg.awy{max-height:260px}
/* the lining of an airway */
.u-breathing svg .cc{fill:#F9D5DA;stroke:#B05268;stroke-width:1.5}
.u-breathing svg .nu{fill:#7B5EA7}
.u-breathing svg .ci{fill:none;stroke:#B05268;stroke-width:1.6;stroke-linecap:round}
.u-breathing svg .dirt{fill:#5A4A3A}
.u-breathing svg .germ{fill:#3E8B48}
/* the leaf */
.u-breathing svg .inleaf{fill:var(--surface)}
.u-breathing svg .cut{fill:none;stroke:#8AA63A;stroke-width:3;stroke-linecap:round}
.u-breathing svg .ep{fill:#EEF6DF;stroke:#4E7A3A;stroke-width:1.3}
.u-breathing svg .pal{fill:#BFE3A0;stroke:#4E7A3A;stroke-width:1.3}
.u-breathing svg .spo{fill:#CFEBB5;stroke:#4E7A3A;stroke-width:1.3}
.u-breathing svg .chl{fill:#3E8B48}
.u-breathing svg .gd{fill:#6FB04C;stroke:#2F5E22;stroke-width:1.6}
.u-breathing svg .pf{fill:#DDEFC8}
.u-breathing svg .pfr{fill:none;stroke:var(--ink);stroke-width:3}
.u-breathing svg .pw{fill:none;stroke:#7FA866;stroke-width:1.2}
.u-breathing svg .pg{fill:#6FB04C;stroke:#2F5E22;stroke-width:1.3}
.u-breathing svg .pp{fill:#1F3A18}
.u-breathing svg.peel{max-width:250px;margin:10px auto 0;background:none}
/* three boxes side by side for tar, nicotine and carbon monoxide */
.u-breathing .bins{grid-template-columns:repeat(3,minmax(0,1fr))}
.u-breathing .bin{padding:8px 4px}
.u-breathing .bin h3{font-size:.92rem;overflow-wrap:anywhere}
.u-breathing .q svg{margin-top:10px}
/* on a wide screen a drawing that fills the column would be taller than the window */
.u-breathing svg.chest{max-height:460px}
@media (prefers-reduced-motion:reduce){.u-breathing svg .mv,.u-breathing svg .air{transition:none}}
/* respiration only */
/* Respiration only. tools/build.sh adds this after engine.css. Every selector starts with .u-respiration, the class the engine puts
   on the page (the revision sheet puts it on its body and links this file too).
   Lung, gut, blood, bread, the yeast mixture and the balloon keep one colour in both themes, as the real things do. */
/* lesson 1: from the lungs and the gut to a cell */
.u-respiration svg .bd{fill:var(--sunk);stroke:var(--line);stroke-width:2;stroke-linejoin:round}
.u-respiration svg .lg{fill:#F2A7B5;stroke:#B05268;stroke-width:1.6;stroke-linejoin:round}
.u-respiration svg .tr{fill:none;stroke:#3F7C9E;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.u-respiration svg .gt{fill:none;stroke:#E9A08F;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.u-respiration svg .bl{fill:none;stroke:#C8323C;stroke-width:8;stroke-linecap:round}
.u-respiration svg .blh{fill:#C8323C}
.u-respiration svg .hit{fill:none;stroke:transparent}
.u-respiration svg .hitf{fill:transparent;stroke:none}
.u-respiration svg .zm{fill:var(--surface);stroke:var(--muted);stroke-width:2;stroke-dasharray:5 6}
.u-respiration svg .cy{fill:var(--cyto);stroke:var(--accent);stroke-width:4}
.u-respiration svg .nu{fill:var(--nucleus)}
.u-respiration svg .nl{fill:var(--nucleolus)}
.u-respiration svg .mt{fill:var(--mito)}
.u-respiration svg .mtl{fill:none;stroke:var(--surface);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.u-respiration svg .cap{font-family:var(--body);font-size:12px;fill:var(--muted);text-anchor:middle}
/* lesson 2: what goes into a cell and what comes out */
.u-respiration svg .brd{fill:#E8C27A;stroke:#9A6B2F;stroke-width:2;stroke-linejoin:round}
.u-respiration svg .air{fill:none;stroke:var(--muted);stroke-width:2.5;stroke-linecap:round}
.u-respiration svg .wd{fill:var(--accent);opacity:.55}
.u-respiration svg .spk{fill:none;stroke:var(--star);stroke-width:4;stroke-linecap:round}
/* lesson 3: the runner and the three bars */
.u-respiration svg .lt{text-anchor:start}
.u-respiration svg .trk{fill:var(--sunk)}
.u-respiration svg .bn{fill:var(--accent)}
.u-respiration svg .bs{fill:var(--good)}
.u-respiration svg .bla{fill:var(--bad)}
.u-respiration svg .lim{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:3 3}
/* lesson 4: the flask of yeast, its water bath and the balloon */
.u-respiration svg .ym{fill:#E3CFA0}
.u-respiration svg .bub{fill:#FFFDF4;stroke:#9A7B3C;stroke-width:1}
.u-respiration svg .ice{fill:#F4FBFF;stroke:#7FB6D6;stroke-width:1.5}
.u-respiration svg .thm{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.u-respiration svg .hg{fill:#C8323C}
.u-respiration svg .bal{fill:#E0483E;stroke:#8E211B;stroke-width:1.5}
.u-respiration svg .balg{transition:transform 1.5s ease-out}
.u-respiration .dt{table-layout:fixed}
.u-respiration .dt th{width:25%}
/* lesson 5: the three equations, one under the other */
.u-respiration .words.one{grid-template-columns:1fr}
/* the word equation builder */
.u-respiration .eq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 6px;background:var(--bg);border-radius:14px;padding:12px 8px}
.u-respiration .eqside{display:flex;align-items:center;justify-content:center;gap:6px}
.u-respiration .eqbox{min-width:86px;min-height:48px;border:2px dashed var(--line);border-radius:10px;display:grid;place-items:center;padding:4px 6px;background:var(--surface);font-weight:700;text-align:center;line-height:1.2}
.u-respiration .eqbox.done{border-style:solid;border-color:var(--good);background:var(--good-bg)}
.u-respiration .eq b{font-family:var(--display);font-size:1.4rem;font-weight:600}
.u-respiration .eqe{text-align:center;color:var(--stain);font-weight:700}
.u-respiration .formula small{display:block;font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--muted);margin-top:4px}
@media (prefers-reduced-motion:reduce){.u-respiration svg .balg{transition:none}}
/* photosynthesis only */
/* Photosynthesis only. tools/build.sh adds this after engine.css. Every selector starts with .u-photosynthesis, the class the engine puts
   on the page (the revision sheet puts it on its body and links this file too).
   Leaves, roots, soil, the sky, a snail and the stained leaves of the starch test keep one colour in both themes, as the real things do.
   Glass, labels, lamps and arrows use the theme's own colours. */
/* the word equation */
.u-photosynthesis .eqn{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:8px 12px;background:var(--accent-soft);border-radius:14px;padding:14px 12px;font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.25}
.u-photosynthesis .eqn .side{display:inline-flex;align-items:center;gap:8px}
.u-photosynthesis .eqn .arw{display:inline-flex;flex-direction:column;align-items:center;gap:1px;font-size:.86em;min-width:104px;padding-right:8px}
.u-photosynthesis .eqn .shaft{display:block;align-self:stretch;height:3px;border-radius:2px;background:var(--ink);position:relative;margin:5px 0 10px}
.u-photosynthesis .eqn .shaft::after{content:"";position:absolute;right:-8px;top:-5.5px;border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent}
.u-photosynthesis .eqn.build{font-size:1rem;background:var(--bg);gap:10px 12px}
.u-photosynthesis .eqn.build .arw{gap:5px;font-size:1em}
.u-photosynthesis .eqn.build .shaft{margin:3px 0 16px}
.u-photosynthesis .eqn.build .gap{min-width:78px}
/* drawn plants */
.u-photosynthesis svg .lf{fill:#5BAA4F;stroke:#2F6B3A;stroke-width:1.5;stroke-linejoin:round}
.u-photosynthesis svg .lv{fill:none;stroke:#2F6B3A;stroke-width:1.1;stroke-linecap:round}
.u-photosynthesis svg .stm{fill:none;stroke:#3E8B48;stroke-width:4.5;stroke-linecap:round}
.u-photosynthesis svg .stm.s2{stroke-width:3}
.u-photosynthesis svg .sl{stroke:#2F6B3A;stroke-width:1.2;stroke-linejoin:round}
.u-photosynthesis svg .soil{fill:#A8814F;opacity:.34}
.u-photosynthesis svg .root{fill:none;stroke:#B58A56;stroke-width:2.6;stroke-linecap:round}
.u-photosynthesis svg .pot{fill:#C9764A;stroke:#7E4326;stroke-width:2;stroke-linejoin:round}
.u-photosynthesis svg .sunc{fill:var(--star)}
.u-photosynthesis svg .sunr{fill:none;stroke:var(--star);stroke-width:3;stroke-linecap:round}
.u-photosynthesis svg .ar.a3{stroke:var(--star)}
.u-photosynthesis svg .ah.a3{fill:var(--star)}
.u-photosynthesis svg .sky.day{fill:#BFE3F5}
.u-photosynthesis svg .sky.night{fill:#1B2747}
.u-photosynthesis svg .moon{fill:#F4EFC9}
/* one big leaf */
.u-photosynthesis svg .bl{fill:#5BAA4F;stroke:#2F6B3A;stroke-width:2.2;stroke-linejoin:round}
.u-photosynthesis svg .bl.under{fill:#A9CF8F}
.u-photosynthesis svg .bv{fill:none;stroke:#2F6B3A;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.u-photosynthesis svg .bv.hi{stroke:#FFF3B0;stroke-width:3.6}
.u-photosynthesis svg .lside{fill:none;stroke:#3E8B48;stroke-width:6;stroke-linecap:round}
.u-photosynthesis svg .sto{fill:#2F5E22}
.u-photosynthesis svg .shine{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;opacity:.5}
.u-photosynthesis svg .bead{fill:#BFE3F5;stroke:#3F7C9E;stroke-width:1.2}
.u-photosynthesis svg .lens{fill:var(--bg);stroke:var(--ink);stroke-width:2.5}
/* the slice through a leaf */
.u-photosynthesis svg .ep{fill:#EEF6DF;stroke:#4E7A3A;stroke-width:1.3}
.u-photosynthesis svg .pal{fill:#BFE3A0;stroke:#4E7A3A;stroke-width:1.3}
.u-photosynthesis svg .spo{fill:#CFEBB5;stroke:#4E7A3A;stroke-width:1.3}
.u-photosynthesis svg .chl{fill:#3E8B48}
.u-photosynthesis svg .gd{fill:#6FB04C;stroke:#2F5E22;stroke-width:1.6}
.u-photosynthesis svg .airs,.u-photosynthesis svg .pore{fill:#F7FAF0}
.u-photosynthesis svg .hit{fill:transparent}
.u-photosynthesis svg .wax{fill:#F1E3A0;stroke:#A8923C;stroke-width:1.2}
.u-photosynthesis svg .vn{fill:#EFE6C8;stroke:#7A6A3A;stroke-width:1.6}
.u-photosynthesis svg .xy{fill:#A9D3EC;stroke:#3F7C9E;stroke-width:1.2}
.u-photosynthesis svg .phl{fill:#F2BE83;stroke:#9A6A2A;stroke-width:1}
.u-photosynthesis svg .cap{font-family:var(--body);font-size:12px;fill:var(--muted);text-anchor:middle}
.u-photosynthesis .cellbox svg.slice{max-height:none}
/* the lamp, the pondweed and its bubbles */
.u-photosynthesis svg .shade{fill:var(--sunk);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.u-photosynthesis svg .bulb{fill:var(--sunk);stroke:var(--ink);stroke-width:1.5}
.u-photosynthesis svg .bulb.on{fill:var(--star)}
.u-photosynthesis svg .ray{fill:none;stroke:var(--star);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:5 6}
.u-photosynthesis svg .rul{fill:var(--stain-bg);stroke:var(--stain);stroke-width:1.2}
.u-photosynthesis svg .pw{fill:none;stroke:#3E8B48;stroke-width:3;stroke-linecap:round}
.u-photosynthesis svg .pwl{fill:none;stroke:#57A84C;stroke-width:2.6;stroke-linecap:round}
.u-photosynthesis svg .bub{fill:var(--surface);stroke:var(--accent);stroke-width:1.3}
.u-photosynthesis svg.go .bub{animation:u-photosynthesis-rise .8s linear infinite}
@keyframes u-photosynthesis-rise{from{transform:translateY(6px);opacity:1}to{transform:translateY(-30px);opacity:.1}}
@media (prefers-reduced-motion:reduce){.u-photosynthesis svg.go .bub{animation:none}}
.u-photosynthesis svg .snl{fill:#C89B5E;stroke:#6E4C22;stroke-width:1.8}
.u-photosynthesis svg .snb{fill:#8A6B4A;stroke:#5A4027;stroke-width:1.5;stroke-linejoin:round}
.u-photosynthesis svg .sns{fill:none;stroke:#6E4C22;stroke-width:1.6;stroke-linecap:round}
/* the starch test */
.u-photosynthesis svg .tile{fill:#FBFBF6;stroke:var(--line);stroke-width:2}
.u-photosynthesis svg .tst{fill:none;stroke:#6B8F4E;stroke-width:4;stroke-linecap:round}
.u-photosynthesis svg .tol{fill:none;stroke:#3B5B34;stroke-width:2;stroke-linejoin:round}
.u-photosynthesis svg .tv{fill:none;stroke:#3B5B34;stroke-width:1.1;stroke-linecap:round;opacity:.5}
.u-photosynthesis svg .fmark{fill:none;stroke:#12262C;stroke-width:1.8;stroke-dasharray:5 4}
.u-photosynthesis svg .eth{fill:#DCE9EF}
.u-photosynthesis svg .eth.g{fill:#9CCB7A}
.u-photosynthesis svg .iod{fill:#C8862A}
.u-photosynthesis .opt.pic svg.dia{background:#FBFBF6;border-radius:8px}
.u-photosynthesis .eqn i{font-style:normal}
/* drugs only */
/* Drugs and health only. tools/build.sh adds this after engine.css. Every selector starts with .u-drugs, the class the engine puts on
   the page (the revision sheet puts it on its body and links this file too).
   Skin, organs, blood and a wooden ruler keep one colour in both themes, as the real things do. */
/* the body */
.u-drugs svg .skin{fill:var(--sunk);stroke:var(--muted);stroke-width:2;stroke-linejoin:round}
.u-drugs svg .arm{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round}
.u-drugs svg .brn{fill:#E7A9B4;stroke:#A8566B;stroke-width:1.6;stroke-linejoin:round}
.u-drugs svg .fold{fill:none;stroke:#A8566B;stroke-width:1.4;stroke-linecap:round}
.u-drugs svg .mth{fill:#B5524E}
.u-drugs svg .thr{fill:none;stroke:#D9776F;stroke-width:7;stroke-linecap:round}
.u-drugs svg .thr.br{stroke-width:5}
.u-drugs svg .lng{fill:#F2A7B5;stroke:#B05268;stroke-width:1.6;stroke-linejoin:round}
.u-drugs svg .hrt{fill:#C8323C;stroke:#7E1C24;stroke-width:1.6;stroke-linejoin:round}
.u-drugs svg .bv{fill:none;stroke:#C8323C;stroke-width:4;stroke-linecap:round}
.u-drugs svg .hit{fill:none;stroke:transparent;stroke-width:18;pointer-events:stroke}
.u-drugs svg .liv{fill:#9A4A35;stroke:#5E2A1C;stroke-width:1.6;stroke-linejoin:round}
.u-drugs svg .stm{fill:#F0B48C;stroke:#B06A3C;stroke-width:1.6;stroke-linejoin:round}
.u-drugs svg.bod .off{opacity:.28}
.u-drugs .xp svg.bod [data-part]{cursor:pointer}
.u-drugs svg.bod.dim [data-part]{opacity:.3}
.u-drugs svg.bod.dim [data-part].hot{opacity:1;filter:drop-shadow(0 0 5px var(--star))}
/* the nicotine loop */
.u-drugs svg.lp g{cursor:pointer}
.u-drugs svg.lp text{font-size:12px}
.u-drugs svg .stp{fill:var(--surface);stroke:var(--line);stroke-width:2}
.u-drugs svg .stp.on{fill:var(--accent-soft);stroke:var(--accent)}
/* the reaction test */
.u-drugs .lamp{width:112px;height:112px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:var(--sunk);border:4px solid var(--line);font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--muted)}
.u-drugs .lamp.on{background:var(--star);border-color:var(--star);color:var(--star-ink)}
.u-drugs .padwrap{position:relative;display:grid}
.u-drugs .pad{min-height:88px;font-size:1.25rem}
.u-drugs .guard{position:absolute;inset:0}
.u-drugs .tb .dt{table-layout:fixed}
.u-drugs .tb .dt th{width:34%}
/* the ruler-drop test and its bar chart */
.u-drugs svg .rul{transition:transform .22s ease-in}
.u-drugs svg .wood{fill:#EBCB8B;stroke:#6B4E1E;stroke-width:1.5}
.u-drugs svg .tk{fill:none;stroke:#3A2A10;stroke-width:1.2}
.u-drugs svg .rul text{fill:#3A2A10;font-size:10px;font-weight:600}
.u-drugs svg .rdl{fill:none;stroke:var(--star);stroke-width:2;stroke-dasharray:4 4}
.u-drugs svg .bar1{fill:var(--accent)}
.u-drugs svg .dash{stroke-dasharray:4 5}
@media (prefers-reduced-motion:reduce){.u-drugs svg .rul{transition:none}}
/* ecosystems only */
/* Ecosystems only. tools/build.sh adds this after engine.css. Every selector starts with .u-ecosystems, the class the engine puts
   on the page (the revision sheet puts it on its body and links this file too).
   Grass, daisies, crops, fish, the heron, algae and the red toxin dots keep one colour in both themes, as the real things do.
   Boxes, labels, arrows and graph lines use the theme's own colours. */
/* the cover picture has its animals in the upper half */
.u-ecosystems .cover{object-position:50% 14%}
/* a living thing in a food chain or web */
.u-ecosystems .dia .org{fill:var(--sunk);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.u-ecosystems .dia .org.pr{fill:var(--good-bg);stroke:var(--good)}
.u-ecosystems .dia .org.gone{fill:none;stroke:var(--muted);stroke-dasharray:4 4}
.u-ecosystems .dia .org.new{fill:var(--stain-bg);stroke:var(--stain)}
.u-ecosystems .dia .dimd{opacity:.18}
.u-ecosystems .dia.web .ar,.u-ecosystems .opt .dia .ar{stroke-width:3}
.u-ecosystems .opt .dia{background:none}
/* the badge on a box: gone up, gone down, gone altogether, or the one being asked about */
.u-ecosystems .dia .bdg circle{stroke:var(--bg);stroke-width:2}
.u-ecosystems .dia .bdg.up circle{fill:var(--good)}
.u-ecosystems .dia .bdg.down circle,.u-ecosystems .dia .bdg.gone circle{fill:var(--bad)}
.u-ecosystems .dia .bdg.ask circle{fill:var(--star)}
.u-ecosystems .dia .bdg path{fill:var(--bg)}
.u-ecosystems .dia .bdg .x{fill:none;stroke:var(--bg);stroke-width:2.6;stroke-linecap:round}
.u-ecosystems .dia .bdg text{fill:var(--star-ink);font-size:14px}
/* the web you build: its boxes are drop targets, and its three chains are listed above it */
.u-ecosystems .dia g.drop{cursor:pointer;outline:none}
.u-ecosystems .dia g.drop.over .org,.u-ecosystems .dia g.drop:focus-visible .org{stroke:var(--star);stroke-width:4}
.u-ecosystems .chl{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;font-weight:700}
.u-ecosystems .chl li{background:var(--bg);border-radius:10px;padding:7px 12px}
.u-ecosystems .chl li.done{background:var(--good-bg);color:var(--good)}
.u-ecosystems .chl li.done::after{content:" ✓"}
/* the rabbit and fox graphs */
.u-ecosystems .grf .crv.fx{stroke:var(--bad)}
.u-ecosystems .grf .pt.fx{fill:var(--bad)}
.u-ecosystems .grf .k1{fill:var(--accent)}
.u-ecosystems .grf .k2{fill:var(--bad)}
.u-ecosystems .q .dia{margin-top:10px}
/* the harvest */
.u-ecosystems .hv .got{stroke:#12262C;stroke-opacity:.3;stroke-width:1}
.u-ecosystems .hv .lost{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-dasharray:3 3;opacity:.7}
/* the field of daisies and its quadrats */
.u-ecosystems .qd .fld{fill:#86C36C}
.u-ecosystems .qd .fld.shd{fill:#4C8549}
.u-ecosystems .qd .zm0{fill:var(--sunk)}
.u-ecosystems .qd .fgr{fill:none;stroke:#fff;stroke-opacity:.3;stroke-width:.6}
.u-ecosystems .qd .dsy{fill:#fff;stroke:#3F5A32;stroke-width:.35}
.u-ecosystems .qd .dsc{fill:#F2C230}
.u-ecosystems .qd .qfr{fill:none;stroke:#12262C;stroke-width:2}
.u-ecosystems .qd .qfr.cur{stroke:#FFD21F;stroke-width:3}
.u-ecosystems .qctl{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* the lake food chain and its toxin */
.u-ecosystems .tx .hrn{fill:#B4BEC7;stroke:#56636D;stroke-width:2;stroke-linejoin:round}
.u-ecosystems .tx .hrn.nk{fill:none;stroke:#8E9BA6;stroke-width:8;stroke-linecap:round}
.u-ecosystems .tx .bk{fill:#E0A93B;stroke:#8A6412;stroke-width:1;stroke-linejoin:round}
.u-ecosystems .tx .lg{fill:none;stroke:#8A6412;stroke-width:2.5;stroke-linecap:round}
.u-ecosystems .tx .fsh{stroke-width:2;stroke-linejoin:round}
.u-ecosystems .tx .fsh.f1{fill:#CBD8DE;stroke:#5E7480}
.u-ecosystems .tx .fsh.f2{fill:#C3CF9B;stroke:#5F6F3A}
.u-ecosystems .tx .alg{fill:#7CC46A;stroke:#2F6B3A;stroke-width:1.5}
.u-ecosystems .tx .eye{fill:#12262C}
.u-ecosystems .tx .tox{fill:#C4281C}
/* genetics only */
/* Genetics and evolution only. tools/build.sh adds this after engine.css. Every selector starts with .u-genetics, the class the engine
   puts on the page (the revision sheet puts it on its body and links this file too).
   Theme tokens are used wherever the colour is only a code. Bark, moths, flowers and insects keep their real colours in both themes. */
/* the cell, its nucleus and the chromosomes */
.u-genetics svg .cy{fill:var(--cyto);stroke:var(--ink);stroke-width:2.5}
.u-genetics svg .nu{fill:var(--nucleus)}
.u-genetics svg .nub{fill:var(--nucleus);fill-opacity:.16;stroke:var(--nucleus);stroke-width:2.5}
.u-genetics svg .ch{fill:none;stroke:var(--nucleus);stroke-width:6;stroke-linecap:round}
.u-genetics svg .zm{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4}
/* DNA: two strands, the rungs between them, and a gene marked on it */
.u-genetics svg .dn{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.u-genetics svg .dn.s1{stroke:var(--accent)}
.u-genetics svg .dn.s2{stroke:var(--stain)}
.u-genetics svg .dn.bk{opacity:.42}
.u-genetics svg .rg{fill:none;stroke:var(--muted);stroke-width:2}
.u-genetics svg .gband{fill:var(--star);fill-opacity:.3;stroke:var(--star);stroke-width:2}
/* model chromosomes: the mother's are orange and the father's blue; each pair has one filled and one hollow */
.u-genetics svg .cl{fill:var(--surface);stroke:var(--ink);stroke-width:2.5}
.u-genetics svg .tail{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.u-genetics svg .cm{stroke-width:2}
.u-genetics svg .cm.m{fill:var(--stain);stroke:var(--stain)}
.u-genetics svg .cm.f{fill:var(--accent);stroke:var(--accent)}
.u-genetics svg .cm.h{fill:var(--surface)}
.u-genetics svg .sign{font-family:var(--display);font-size:22px}
.u-genetics .sibs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:44px}
.u-genetics .sibs svg{width:66px;height:auto;background:var(--bg);border-radius:8px}
/* bar charts and histograms */
.u-genetics svg .bar{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.u-genetics svg .col{fill:transparent;cursor:pointer}
.u-genetics svg .col.over,.u-genetics svg .col:focus-visible{fill:var(--star);fill-opacity:.24;outline:none}
.u-genetics svg .crv.b{stroke:var(--stain)}
.u-genetics svg .qm{font-family:var(--display);font-size:40px;fill:var(--muted)}
/* moths on bark */
.u-genetics svg .bkl{fill:#D2D6C1}
.u-genetics svg .bkd{fill:#3A3430}
.u-genetics svg .lich{fill:#BECAA7}
.u-genetics svg .lich2{fill:#E3E6D6}
.u-genetics svg .rdg{fill:none;stroke-width:2.5;stroke-linecap:round}
.u-genetics svg .bkl~.rdg{stroke:#A9AB92}
.u-genetics svg .bkd~.rdg{stroke:#231F1C}
.u-genetics svg .ml{fill:#E2E0D0;stroke:#A19E8B;stroke-width:1}
.u-genetics svg .md{fill:#2A2522;stroke:#5A524C;stroke-width:1}
.u-genetics svg .ml .msp{fill:#77735F;stroke:none}
.u-genetics svg .gone{opacity:.3}
.u-genetics svg .xx{fill:none;stroke:var(--bad);stroke-width:3;stroke-linecap:round}
.u-genetics svg .frame{fill:none;stroke:var(--ink);stroke-width:1.5}
/* habitats */
.u-genetics svg .soil{fill:#B08A5A;opacity:.55}
.u-genetics svg .hg{fill:none;stroke:#3E8B48;stroke-width:2.2;stroke-linecap:round}
.u-genetics svg .hs{fill:none;stroke:#3E8B48;stroke-width:2;stroke-linecap:round}
.u-genetics svg .hw{fill:none;stroke:#B98A2E;stroke-width:2.2;stroke-linecap:round}
.u-genetics svg .he{fill:#DDA63A;stroke:#8A6412;stroke-width:1}
.u-genetics svg .dead{stroke:#7A6A58}
.u-genetics svg .dead.he{fill:#8C7B66}
.u-genetics svg .jar{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.u-genetics svg .lid{fill:var(--muted)}
.u-genetics svg .pickd{stroke:var(--star);stroke-width:4}
/* particles only */
/* Particles and states of matter: the styles only this unit uses. Every selector starts with .u-particles. */
.u-particles .bins:has(.bin:nth-child(3)){grid-template-columns:repeat(3,1fr)}
/* a canvas of moving particles */
.u-particles .pv{display:block;width:100%;max-width:480px;height:auto;margin:0 auto;border-radius:14px;background:var(--bg)}
/* lesson 2: the thermometer beside the particle box */
.u-particles .sb{display:grid;grid-template-columns:104fr 168fr;gap:8px;width:100%;max-width:280px;margin:0 auto}   /* the two columns share a height: 104:294 and 90:158 */
.u-particles .sb .pv{width:100%;border-radius:6px}
.u-particles .th{display:block;width:100%;height:auto}
.u-particles .th text{font-family:var(--body);font-size:11px;fill:var(--muted);text-anchor:end}
/* lesson 4: the tube and its reading, above the graph */
.u-particles .hc{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center}
.u-particles .hc .ph{text-align:left}
/* lesson 5: the pressure gauge */
.u-particles .gauge{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center}
.u-particles .gauge .track{height:18px;border-radius:9px;background:var(--sunk);overflow:hidden}
.u-particles .gauge .track i{display:block;height:100%;border-radius:9px;background:var(--stain);transition:width .9s}
.u-particles .gauge .ends{grid-column:2;display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted)}
/* lesson 6: colour spreading along a tube, and through a beaker of water */
.u-particles .race .dye{opacity:.6;transform-box:fill-box;transform-origin:left center;transform:scaleX(.05);transition:transform 2s linear}
.u-particles .race.ran .dye.g{transform:scaleX(1)}
.u-particles .race.ran .dye.l{transform:scaleX(.2)}
.u-particles .race .tint{opacity:0;transition:opacity 2s linear}
.u-particles .race.ran .tint{opacity:.45}
@media (prefers-reduced-motion:reduce){.u-particles .gauge .track i,.u-particles .race .dye,.u-particles .race .tint{transition:none}}
/* elements only */
/* Elements, atoms and compounds: the styles only this unit uses. Every selector starts with .u-elements. */
.u-elements sub{font-size:.7em;line-height:0}
.u-elements .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* lesson 2: the grid of symbol tiles, and the box you type a symbol into */
.u-elements .symgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.u-elements .opt.sym{text-align:center;font-family:var(--display);font-weight:800;font-size:1.2rem;padding:8px 0;min-height:48px}
.u-elements .sum input[type=text]{width:104px;text-align:center}
/* lesson 3: the label above each card in the strip */
.u-elements .strip .k{text-transform:uppercase;letter-spacing:.07em;font-size:.78rem;margin-top:4px}
.u-elements .strip .k+h3{margin-top:0}
/* lesson 3: the three experiments. They sit on a white card in both themes, so that the real colours of the substances show. */
.u-elements svg.lab{background:#F7F6F0}
.u-elements .lab .fe{transition:transform 1s ease-in}
.u-elements .lab.ran .fe{transform:translate(var(--tx),var(--ty))}
.u-elements .lab .mag.dip{transition:transform .8s}
.u-elements .lab.ran .mag.dip{transform:translateY(34px)}
.u-elements .lab .pw{transition:fill 1.5s}
.u-elements .lab.ran .pw{fill:#2B2B30!important}
.u-elements .lab .late{opacity:0;transition:opacity .9s .7s}
.u-elements .lab.ran .late{opacity:1}
.u-elements .lab .early{transition:opacity .6s}
.u-elements .lab.ran .early{opacity:0}
/* lesson 4: a formula taken apart, one element to a row */
.u-elements .fxl{list-style:none;padding:0;display:grid;gap:6px}
.u-elements .fxl li{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:baseline;background:var(--bg);border-radius:10px;padding:8px 12px}
.u-elements .fxl b{font-family:var(--display);font-size:1.25rem}
/* lessons 4 and 5: a small picture of the atom or particle on each button */
.u-elements .ctl .btn{display:flex;align-items:center;justify-content:center;gap:8px}
.u-elements .ico{width:34px;height:auto;flex:none;overflow:visible}
@media (prefers-reduced-motion:reduce){.u-elements .lab .fe,.u-elements .lab .mag.dip,.u-elements .lab .pw,.u-elements .lab .late,.u-elements .lab .early{transition:none}}
/* periodic only */
/* The periodic table: the styles only this unit uses. Every selector starts with .u-periodic. */
/* the table of the first 20 elements: metals are blue and non-metals are amber, here and on the map of the whole table */
.u-periodic .pt{display:grid;grid-template-columns:14px repeat(8,minmax(0,1fr));gap:3px;align-items:stretch}
.u-periodic .pt-g,.u-periodic .pt-p{font-size:.72rem;font-weight:700;color:var(--muted);text-align:center;align-self:center}
.u-periodic .pt-g{grid-row:1}
.u-periodic .pt-p{grid-column:1}
.u-periodic .pt-el{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:46px;padding:2px 0;border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);line-height:1.1}
.u-periodic .pt-el i{font-size:.66rem;color:var(--muted);font-variant-numeric:tabular-nums}
.u-periodic .pt-el b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.u-periodic .pt:not(.plain) .pt-el.m{background:var(--accent-soft);border-color:var(--accent)}
.u-periodic .pt:not(.plain) .pt-el.n{background:var(--stain-bg);border-color:var(--stain)}
.u-periodic .pt .pt-el.on{box-shadow:0 0 0 3px var(--ink)}
.u-periodic .pt .pt-el.hit{box-shadow:0 0 0 3px var(--good)}
.u-periodic .pt .pt-el.got{background:var(--good-bg);border-color:var(--good)}
.u-periodic .pt .pt-el.miss{border-color:var(--bad);background:var(--bad-bg)}
.u-periodic .pt-more{grid-column:4/10;grid-row:5;align-self:center;padding-left:6px;font-size:.85rem;color:var(--muted)}
.u-periodic .pt-key{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.9rem}
.u-periodic .pt-key i{display:inline-block;width:15px;height:15px;border-radius:4px;margin-right:6px;vertical-align:-2px;border:2px solid var(--muted)}
.u-periodic .pt-key .m{background:var(--accent);border-color:var(--accent)}
.u-periodic .pt-key .n{background:var(--stain);border-color:var(--stain)}
.u-periodic .pt-key .u{border-style:dashed;border-width:1.5px}
/* the map of the whole table */
.u-periodic .ptm .c{fill:var(--muted);opacity:.3}
.u-periodic .ptm .c.m{fill:var(--accent);opacity:1}
.u-periodic .ptm .c.n{fill:var(--stain);opacity:1}
.u-periodic .ptm .c.hl{fill:var(--accent);opacity:1}
.u-periodic .ptm .c.u{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:2 2;opacity:1}
.u-periodic .ptm .zig{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
/* lesson 2: one column of Mendeleev's table, beside his prediction */
.u-periodic .gapx{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center}
.u-periodic .col4{display:flex;flex-direction:column;gap:4px}
.u-periodic .col4 .pt-el.hole{border-style:dashed;border-color:var(--stain);color:var(--stain)}
.u-periodic .col4 .pt-el.got{background:var(--good-bg);border-color:var(--good)}
.u-periodic .gapx .words{grid-template-columns:1fr}
/* lesson 1: the mystery elements */
.u-periodic .prb .smp{stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.u-periodic .prb .shine{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.9}
.u-periodic .prb .lens{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round}
.u-periodic .prb .todo{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:5 5}
.u-periodic .dia .qm{font-family:var(--display);font-size:30px;fill:var(--muted)}
.u-periodic .prb .cellk{fill:none;stroke:var(--ink);stroke-width:5.5}
.u-periodic .prb .lampc{fill:var(--bg);stroke:var(--ink);stroke-width:2.5}
.u-periodic .prb .lampc.lit{fill:var(--star)}
.u-periodic .prb .lampx{fill:none;stroke:var(--ink);stroke-width:2}
.u-periodic .prb .halo{fill:var(--star);opacity:.4}
.u-periodic .prb .hmr{fill:var(--muted);stroke:var(--ink);stroke-width:2}
.u-periodic .res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.95rem}
.u-periodic .res .wait{color:var(--muted)}
/* lesson 4: an alkali metal on water. The lilac is the real colour of a potassium flame. */
.u-periodic .rx .metal{fill:#AEB6BD;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.u-periodic .rx .bub{fill:var(--surface);stroke:var(--accent);stroke-width:1.2}
.u-periodic .rx .trail{fill:none;stroke:var(--surface);stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round}
.u-periodic .rx .lilac{fill:#B58BE0;stroke:#8A5CC0;stroke-width:1.5;stroke-linejoin:round}
.u-periodic .rx .bang{fill:var(--star);stroke:var(--stain);stroke-width:2.5;stroke-linejoin:round}
.u-periodic .rx .splash{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;opacity:.5}
.u-periodic .rx .mv{transition:transform var(--secs,2.2s) ease-in-out}
/* lesson 6: charts of a property going down a group */
.u-periodic .grf .zero{fill:none;stroke:var(--muted);stroke-width:1.5}
.u-periodic .grf .val{font-weight:400;font-size:10.5px}
.u-periodic .grf .estm{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:3 3}
@media (prefers-reduced-motion:reduce){.u-periodic .rx .mv{transition:none}}
/* reactions only */
/* Chemical reactions: the styles only this unit uses. Every selector starts with .u-reactions. */
.u-reactions sub{font-size:.7em;line-height:0}
/* lesson 2: a small model of the molecule on each "make" button */
.u-reactions .ctl .btn{display:flex;align-items:center;justify-content:center;gap:8px}
.u-reactions .ico{width:46px;height:auto;flex:none;overflow:visible}
/* lesson 3: the two sides of a word equation */
.u-reactions .eqx{display:flex;align-items:stretch;gap:8px}
.u-reactions .eqx div{flex:1;background:var(--accent-soft);border-radius:14px;padding:10px 10px 12px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:2px}
.u-reactions .eqx b{font-family:var(--display);font-size:1.12rem;line-height:1.2}
.u-reactions .eqx span{font-size:.85rem;color:var(--muted)}
.u-reactions .eqx i{align-self:center;font-family:var(--display);font-weight:800;font-size:1.7rem}
/* lessons 3 and 6: the word equation you build */
.u-reactions .eq{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:1.05rem}
.u-reactions .eq b{font-family:var(--display);font-size:1.5rem;line-height:1}
.u-reactions .eq .gap{min-width:112px}
/* lesson 6: the table of readings keeps its columns the same width as it fills in */
.u-reactions .dt td{width:13%}
/* lesson 7: the liquid in the thermometer. lesson 8: the plungers of the gas syringes */
.u-reactions .dia .col{fill:var(--bad);transform-box:fill-box;transform-origin:50% 100%;transition:transform 1.2s ease-out}
.u-reactions .dia .plg{transition:transform 1.4s ease-out}
@media (prefers-reduced-motion:reduce){.u-reactions .dia .col,.u-reactions .dia .plg{transition:none}}
/* metals only */
/* Metals and reactivity: the styles only this unit uses. Every selector starts with .u-metals. */
/* bubbles of gas, pieces of metal, nails, and the things in the rusting tubes */
.u-metals .dia .bub{fill:none;stroke:var(--ink);stroke-width:1.2;animation:u-metals-rise 1.5s linear infinite}
@keyframes u-metals-rise{from{transform:translateY(5px);opacity:0}20%{opacity:1}to{transform:translateY(-16px);opacity:0}}
.u-metals .dia .mt{stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.u-metals .dia .nail rect,.u-metals .dia .nail path{fill:#8E979C;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.u-metals .dia .nail.rusty rect,.u-metals .dia .nail.rusty path,.u-metals .dia .nail.rusty circle{fill:#B5541C;stroke:#7A3410;stroke-width:1.2}
.u-metals .dia .dry{fill:var(--surface);stroke:var(--muted);stroke-width:1.2}
.u-metals .dia .oil{fill:#E0B040;opacity:.8}
/* the reactivity series: as a ladder to label, and as the small list beside the crucible */
.u-metals .dia .rw{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.u-metals .dia .rw.nm{fill:var(--stain-bg);stroke:var(--stain);stroke-dasharray:4 3}
.u-metals .dia .rw.gap{fill:var(--bg);stroke:var(--muted);stroke-dasharray:3 4}
.u-metals .dia .rw.hl{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2.5}
.u-metals .dia .sm{font-size:10px;font-weight:600}
/* lesson 3: the series you can tap, with what each one does beside it */
.u-metals .rs{display:grid;grid-template-columns:minmax(0,9.4rem) minmax(0,1fr);gap:12px;align-items:start}
.u-metals .rs-col{display:flex;flex-direction:column;gap:3px}
.u-metals .rs-end{font-size:.8rem;color:var(--muted);text-align:center}
.u-metals .rs-row{border:2px solid var(--line);background:var(--bg);border-radius:9px;min-height:32px;padding:2px 6px;font-weight:700;font-size:.95rem}
.u-metals .rs-row.nm{border-style:dashed;border-color:var(--stain);background:var(--stain-bg)}
.u-metals .rs-row.on{background:var(--accent);border-color:var(--accent);border-style:solid;color:var(--accent-ink)}
.u-metals .rs .info{position:sticky;top:72px;min-height:150px}
/* lesson 4: the swap of partners, and the solution and coating that change as you watch */
.u-metals .dia .bx{stroke-width:2}
.u-metals .dia .bx.fe{fill:var(--accent-soft);stroke:var(--accent)}
.u-metals .dia .bx.cu{fill:var(--stain-bg);stroke:var(--stain)}
.u-metals .dia .bx.so{fill:var(--surface);stroke:var(--muted)}
.u-metals .dia .soln{opacity:.62;transition:fill 1.6s}
.u-metals .dia .coat{opacity:0;stroke:var(--ink);stroke-width:.8;transition:opacity 1.6s}
/* lesson 6: the concrete beam */
.u-metals .dia .bm{fill:var(--sunk);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.u-metals .dia .crk{fill:none;stroke:var(--bad);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.u-metals .dia .bar{fill:none;stroke:var(--stain);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1 7}
.u-metals .strip .c h3{margin-top:4px}
@media (prefers-reduced-motion:reduce){.u-metals .dia .bub{animation:none}.u-metals .dia .soln,.u-metals .dia .coat{transition:none}}
/* earth only */
/* Earth and atmosphere: the styles only this unit uses. Every selector starts with .u-earth, the class the engine puts on the page. */
/* names of processes written on the arrows of the rock cycle and the carbon cycle; the halo keeps a name readable where it sits on its arrow */
.u-earth .dia .pr{font-weight:600;font-size:11px;fill:var(--accent);paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.u-earth .dia .pr.a2{fill:var(--bad)}
.u-earth .dia .pr.a3{fill:var(--ink)}
/* two more arrow colours: a3 for carbon passed on, a4 for sunlight */
.u-earth .dia .ar.a3{stroke:var(--ink)}
.u-earth .dia .ah.a3{fill:var(--ink)}
.u-earth .dia .ar.a4{stroke:var(--star)}
.u-earth .dia .ah.a4{fill:var(--star)}
.u-earth .dia .dimd{opacity:.22}
/* lesson 3: the line under the rock cycle says what the last process did, so it is set as body text, not as a small note */
.u-earth .stage .say{font-size:1rem;color:var(--ink);text-align:left;min-height:3em}
/* lesson 4: the four step buttons and the key of the 100-square grid */
.u-earth .ctl.four{grid-template-columns:repeat(4,1fr)}
.u-earth .key{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center;font-size:.92rem;font-variant-numeric:tabular-nums}
.u-earth .key .sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}
/* the cut-away Earth has no fill behind it in the labelling activity, so give its lead lines enough contrast on the hot layers */
.u-earth .pinbox .lead{stroke:var(--ink)}
.u-earth .pinbox .leadend{fill:var(--ink)}
/* speed only */
/* Speed and motion only: the extra pieces of its graphs, its road scenes and its timed runs. */
.u-speed .grf .tgt{fill:none;stroke:var(--muted);stroke-width:2.5;stroke-dasharray:2 7;stroke-linecap:round}
.u-speed .grf .c2{stroke:var(--stain)}
.u-speed .grf.mini .crv{stroke-width:4}
.u-speed .grf .new{stroke-dasharray:1;animation:u-speed-draw .6s ease-out}
.u-speed .dia .mvin{animation:u-speed-step .6s ease-out}
@keyframes u-speed-draw{from{stroke-dashoffset:1}}
@keyframes u-speed-step{from{transform:translateX(var(--dx))}}
.u-speed .dia .road{fill:var(--sunk)}
.u-speed .dia .lane{fill:none;stroke:var(--surface);stroke-width:3;stroke-dasharray:16 14}
.u-speed .dia .tree{fill:var(--good);opacity:.75}
.u-speed .dia .car{stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.u-speed .dia .cb{fill:var(--accent)}
.u-speed .dia .cr{fill:var(--bad)}
.u-speed .dia .win{fill:var(--surface);opacity:.8}
.u-speed .dia .cap{font-weight:400;fill:var(--muted)}
.u-speed .dia .mv{transition:transform 2.4s linear}
.u-speed .dia .runner{transition:transform var(--secs,2.4s) linear}
.u-speed .dia .fin{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:4 4}
.u-speed .dia .scl{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.u-speed .q svg.dia{margin-top:10px;max-width:460px}
/* three boxes: distance and time side by side, with speed across the full width below them */
.u-speed .bins .bin:nth-child(3){grid-column:1/-1}
@media (prefers-reduced-motion:reduce){.u-speed .grf .new,.u-speed .dia .mvin{animation:none}.u-speed .dia .mv,.u-speed .dia .runner{transition:none}}
/* gravity only */
/* Gravity and space only: the worlds, orbits, sunlight and day-and-night shading in its drawings. Every selector starts with .u-gravity.
   The literal colours are for things that keep their colour in both themes: the Moon, Mars, the Earth, and the lit and dark sides of a globe. */
.u-gravity .dia .wd{stroke:var(--ink);stroke-width:2.5}
.u-gravity .dia .w-moon{fill:#B9BEC6}
.u-gravity .dia .w-mars{fill:#C96A43}
.u-gravity .dia .w-earth{fill:#3F8FD0}
.u-gravity .dia .w-jupiter{fill:#D8B282}
.u-gravity .dia .w-pl{fill:var(--stain-bg);stroke:var(--stain)}
.u-gravity .dia .pnl{fill:var(--accent)}
.u-gravity .dia .orb{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 5}
.u-gravity .dia .chv{fill:var(--muted)}
.u-gravity .dia .pth{fill:none;stroke:var(--muted);stroke-width:2.5;stroke-dasharray:1 7;stroke-linecap:round}
.u-gravity .dia .sunc{fill:var(--star)}
.u-gravity .dia .ry{fill:none;stroke:var(--star);stroke-width:2.5;stroke-linecap:round}
.u-gravity .dia .ryh{fill:var(--star)}
.u-gravity .dia .eday{fill:#3F8FD0;stroke:var(--ink);stroke-width:2}
.u-gravity .dia .enight{fill:#14263A}
.u-gravity .dia .eq{fill:none;stroke:#fff;stroke-width:1.5}
.u-gravity .dia .ukl{fill:none;stroke:#FFD84A;stroke-width:3;stroke-linecap:round}
.u-gravity .dia .ukd{fill:var(--bad);stroke:#fff;stroke-width:1.5}
.u-gravity .dia .ont{fill:#fff;font-size:11px}
.u-gravity .dia .mlit{fill:#F4F1DE}
.u-gravity .dia .mdark{fill:#4A5566}
.u-gravity .dia .gx{fill:var(--accent);opacity:.45}
.u-gravity svg.sol{border-radius:14px}
/* a played scene: the spacecraft or the Moon moves, and the old arrow gives way to the new one */
.u-gravity .dia .mv{transition:transform 1.5s ease-in-out .2s}
.u-gravity .dia .now{opacity:0;transition:opacity .5s}
.u-gravity .dia .was{transition:opacity .5s}
.u-gravity .dia.ran .now{opacity:1}
.u-gravity .dia.ran .was{opacity:0}
.u-gravity .q svg.dia{margin-top:10px;max-width:460px}
.u-gravity .xp svg.nm{max-width:250px;margin:0 auto}
@media (prefers-reduced-motion:reduce){.u-gravity .dia .mv,.u-gravity .dia .now,.u-gravity .dia .was{transition:none}}
/* pressure only */
/* Pressure, moments and stretching only: sand, jets of water, and the places for a weight on the see-saw. */
.u-pressure .dia .sand{fill:#D9B77A}
.u-pressure .dia .jet{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;opacity:.75;stroke-dasharray:1;animation:u-pressure-jet .7s ease-out}
@keyframes u-pressure-jet{from{stroke-dashoffset:1}}
.u-pressure .q svg.dia{margin-top:10px}
/* the climber and the man with the crowbar are near the top of their pictures */
.u-pressure .hero[src*="mountain"],.u-pressure .hero[src*="lever"]{object-position:50% 12%}
.u-pressure .spot{position:absolute;transform:translate(-50%,-50%);width:11.5%;aspect-ratio:1;padding:0;border:2px dashed var(--muted);border-radius:8px;background:var(--surface);opacity:.92}
@media (prefers-reduced-motion:reduce){.u-pressure .dia .jet{animation:none}}
/* energy only */
/* Energy: styles that only this unit uses. Every selector starts with .u-energy, the class the engine puts on the page. */
/* the two boxes of the energy transfer activity */
.u-energy .xf{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:stretch}
.u-energy .xf .box{border:2px dashed var(--line);border-radius:14px;padding:10px 6px;min-height:92px;background:var(--bg);display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;text-align:center}
.u-energy .xf .box i{font-size:.74rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.u-energy .xf .box b{font-family:var(--display);font-size:1.05rem;line-height:1.15}
.u-energy .xf .box.done{border-style:solid;border-color:var(--good);background:var(--good-bg)}
.u-energy .xf .to{align-self:center;font-size:1.5rem;color:var(--accent);font-weight:700}
.u-energy .qimg.sm{max-width:190px}
/* food labels */
.u-energy .labs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;font-family:var(--body)}
.u-energy .lab{display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:8px;padding:6px 8px;background:var(--surface);font-size:.85rem;font-weight:400;line-height:1.25;text-align:left}
.u-energy .lab b{font-family:var(--display);font-size:1rem;border-bottom:2px solid var(--ink);padding-bottom:2px;margin-bottom:3px}
.u-energy .lab i{color:var(--muted);font-size:.72rem}
.u-energy .lab strong{font-variant-numeric:tabular-nums}
.u-energy .labbox{display:flex;flex-direction:column;gap:8px}
.u-energy .labbox .labs{margin-top:0;grid-template-columns:minmax(0,190px)}
/* drawings */
.u-energy .q .dia{margin-top:10px}
.u-energy .dia .ar.a3{stroke:var(--ink)}
.u-energy .dia .ah.a3{fill:var(--ink)}
.u-energy .dia .wav{fill:none;stroke:var(--bad);stroke-width:2.5;stroke-linecap:round}
.u-energy .dia .bub{fill:var(--surface);stroke:var(--accent);stroke-width:1.5}
/* magnets only */
/* Magnets and electromagnets only: magnets, field lines, the plotting compass, the electromagnet and the motor. Every selector starts with .u-magnets.
   The literal colours are for things that keep their colour in both themes: the red north half and the blue south half of a magnet
   and of a compass needle, copper wire, iron, an aluminium can and the sea. */
.u-magnets .dia .mN,.u-magnets .nN{fill:#C8372D}
.u-magnets .dia .mS{fill:#2F6FC0}
.u-magnets .dia .mO{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.u-magnets .dia .pl{fill:#fff;font-size:13px}
.u-magnets .dia .pl.big{font-family:var(--display);font-size:24px}
.u-magnets .dia .fl{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.u-magnets .dia .fa{fill:var(--accent)}
.u-magnets .dia .fa.k{fill:var(--ink)}
.u-magnets .dia.big .fl{stroke-width:3}
.u-magnets .dia .pk{fill:#12262C}
.u-magnets .dia .mk{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.u-magnets .cc{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.u-magnets .nS{fill:#9AA7AE}
.u-magnets .dia .sea{fill:#3F8FD0;stroke:var(--ink);stroke-width:2}
.u-magnets .dia .iron,.u-magnets .dia .core{fill:#9AA7AE;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.u-magnets .dia .alu{fill:#D9DEE2;stroke:var(--ink);stroke-width:2}
.u-magnets .dia .tubef{fill:var(--surface);stroke:var(--muted);stroke-width:1.5}
.u-magnets .dia .cw{fill:none;stroke:#C7742E;stroke-width:3.4;stroke-linecap:round}
.u-magnets .dia .wr{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u-magnets .dia .cellm{fill:none;stroke:var(--ink);stroke-width:5}
.u-magnets .dia .met{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.u-magnets .dia .clip{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round}
.u-magnets .dia .coil{fill:none;stroke:#C7742E;stroke-width:5;stroke-linejoin:round;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.u-magnets .dia .coil.spin{animation:u-magnets-spin 1.6s infinite}
.u-magnets .dia .coil.spin.fast{animation-duration:.7s}
.u-magnets .dia .rot{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
@keyframes u-magnets-spin{0%{transform:scaleX(1);animation-timing-function:ease-in-out}50%{transform:scaleX(-1);animation-timing-function:ease-in-out}100%{transform:scaleX(1)}}
/* a magnet and what it meets slide together or apart once you have predicted */
.u-magnets .dia .mv{transition:transform .8s ease-in}
/* the plotting compass simulation: dots to visit, and a compass that is dragged over the drawing */
.u-magnets .cmp{position:relative;width:100%;max-width:440px;margin:0 auto;border-radius:14px;overflow:hidden}
.u-magnets .cmp .spot{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;border:3px dashed var(--muted);background:transparent;padding:0}
.u-magnets .cmp .spot:disabled{visibility:hidden}
.u-magnets .cmp .cps{position:absolute;transform:translate(-50%,-50%);width:12%;aspect-ratio:1;touch-action:none;cursor:grab;z-index:2}
.u-magnets .cmp .cps svg{width:100%;height:100%;display:block;overflow:visible}
.u-magnets .qa{display:flex;flex-direction:column;gap:12px}
.u-magnets .qa:empty{display:none}
@media (prefers-reduced-motion:reduce){.u-magnets .dia .mv{transition:none}.u-magnets .dia .coil.spin{animation:none}}
/* sound only */
/* Sound: the styles only this unit uses. Every selector starts with .u-sound. */
/* a drawing inside a question, and the wave pictures on quiz options */
.u-sound .q svg.dia{margin-top:10px;max-width:460px}
.u-sound .opt.pic svg.dia{border-radius:8px}
.u-sound .dia .ring{pointer-events:none}
/* lesson 3: the results of the four tubes, one cell each */
.u-sound .dt td{width:25%;line-height:1.3;padding:6px 2px}
.u-sound .dt td b{display:block}
.u-sound .qa{display:flex;flex-direction:column;gap:12px}
/* light only */
/* Light: the styles only this unit uses. Every selector starts with .u-light. */
/* a drawing inside a question, and the lens pictures on quiz options */
.u-light .q svg.dia{margin-top:10px;max-width:460px}
.u-light .opt.pic svg.dia{border-radius:8px}
.u-light .dia .ring{pointer-events:none}
/* lesson 5: a dot of each colour beside its name */
.u-light .sw{display:inline-block;width:.85em;height:.85em;border-radius:50%;margin-right:.45em;vertical-align:-.05em}
/* lesson 6: the three lamp switches sit in one row */
.u-light .ctl:has(> .do:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
/* ---------- the site shell: bar, menu, hub, key words, sheets, teachers ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.locked{overflow:hidden}
.bar .wrap{gap:10px}
#menuBtn{flex:none;display:flex;align-items:center;gap:8px;background:var(--key-face);color:var(--key-ink);border:2px solid var(--key-line);border-radius:var(--radius-field);min-height:42px;padding:6px 12px;font-weight:700;box-shadow:0 3px 0 var(--key-line)}
#menuBtn svg{width:18px;height:18px;flex:none}
/* where you are: a line under the sticky tabs, which wraps rather than cuts a long name */
#crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;font-weight:600;font-size:var(--text-note)}
#crumbs a{color:var(--sub,var(--accent));text-decoration:none;padding:6px 0}
#crumbs .sep{color:var(--muted)}
#crumbs .here{color:var(--ink)}
.bar .tot{flex:none}
@media (max-width:479px){#menuBtn span{display:none}#menuBtn{padding:6px 10px}}
#app h1:focus{outline:none}

/* subject colours: biology teal, chemistry burnt orange, physics royal blue, as on the organisers */
.biology{--sub:var(--biology)}.chemistry{--sub:var(--chemistry)}.physics{--sub:var(--physics)}
.code{display:inline-block;font-size:var(--text-label);font-weight:700;letter-spacing:.04em;color:var(--sub,var(--muted));border:2px solid currentColor;border-radius:var(--radius-tag);padding:0 6px;line-height:1.5;text-decoration:none;white-space:nowrap}

/* menu */
#menu{position:fixed;inset:0;z-index:30;display:none}
#menu.open{display:block}
#menu .shade{position:absolute;inset:0;background:rgb(0 0 0/.5)}
#menu .panel{position:absolute;inset:0 auto 0 0;width:min(90vw,370px);background:var(--bg);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 14px calc(24px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));box-shadow:var(--shadow-drawer)}
.mhead{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:var(--text-title)}
.mhead .btn{min-height:40px;padding:6px 14px}
#menu .rest{display:flex;flex-direction:column;gap:6px}
.finding .rest{display:none}
.mlink{display:block;padding:11px 12px;border-radius:var(--radius-control);background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none;border:1.5px solid var(--line)}
.mlink.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.msub{font-size:var(--text-note);font-weight:700;color:var(--sub,var(--muted));margin-top:10px}
#menu details,.cov{background:var(--surface);border-radius:var(--radius-control);border:1.5px solid var(--line)}
#menu summary,.cov summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;font-weight:700;list-style:none;min-height:46px}
#menu summary::-webkit-details-marker,.cov summary::-webkit-details-marker{display:none}
#menu summary .s,.cov summary .s{font-size:var(--text-note);color:var(--muted);font-variant-numeric:tabular-nums}
#menu details[open] summary,.cov[open] summary{border-bottom:1.5px solid var(--line)}
.mles{display:flex;flex-direction:column;padding:6px}
.mles a{padding:9px 10px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:var(--text-caption)}
/* the page you are on: a strip of sticky note */
.mles a[aria-current]{background:var(--sticky);color:var(--paper-ink);font-weight:700;box-shadow:0 3px 5px -3px rgb(0 0 0/.35)}
.mles a.off{opacity:.5}

/* search */
.find{display:flex;flex-direction:column;gap:8px}
.find input{width:100%;font:inherit;padding:12px 14px;border:2px solid var(--line-strong);border-radius:var(--radius-field);background:var(--surface);color:var(--ink)}
.hits{display:flex;flex-direction:column;gap:6px}
.hit{display:flex;flex-direction:column;gap:1px;background:var(--surface);border-radius:var(--radius-control);padding:10px 12px;text-decoration:none;color:var(--ink);border:1.5px solid var(--line)}
.hit span{font-size:var(--text-note);color:var(--muted)}

/* hub */
.hub .rest,.subjsec{display:flex;flex-direction:column;gap:14px}
.hub .rest{gap:22px}
.subjsec .head{align-items:baseline}
.subjsec h2{color:var(--ink)}
/* "Carry on where you left off": a sticky note */
.cont{margin:2px 6px 2px 4px}
.cont .go{float:right;margin-left:10px;font-weight:700;font-size:var(--text-title);line-height:1.2}
/* two cards to a row on a phone, so 28 units stay a short scroll */
.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,136px),1fr));gap:12px}
@media (min-width:600px){.units{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}.unit .t{font-size:var(--text-title)}}
/* a unit's card: its cover taped to a card, the tape in the subject's colour */
.unit{position:relative;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-control);padding:8px 8px 10px;text-decoration:none;color:inherit;border:1.5px solid var(--line);box-shadow:var(--shadow-card)}
.unit::before{content:"";position:absolute;left:50%;top:-8px;width:56px;height:20px;margin-left:-28px;transform:rotate(-3deg);z-index:1;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--sub,var(--tape)) 55%,transparent) 0 7px,color-mix(in srgb,var(--sub,var(--tape)) 38%,transparent) 7px 14px)}
.unit img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:var(--sunk);border-radius:2px}
.unit .mid{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:9px 2px 0}
.unit .top{display:flex;justify-content:space-between;align-items:center;gap:6px;width:100%}
.unit .t{font-family:var(--display);font-weight:800;font-size:var(--text-lead);line-height:1.18;overflow-wrap:anywhere}
.unit .n{font-size:var(--text-label);color:var(--muted);font-variant-numeric:tabular-nums}
.unit .pbar{margin-top:auto}
.pbar{display:block;width:100%;height:7px;border-radius:var(--radius-bar);background:var(--line);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--star);border-radius:var(--radius-bar)}
.hub .nb-notes{margin:4px 2px;max-width:520px}
.pn.unav{border-top:2px solid var(--line);padding-top:8px}

/* knowledge organisers: a box shows one picture out of a file that stacks up to three */
.kosec{display:flex;flex-direction:column;gap:10px}
.kobox{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:2px}
/* an organiser is a printed sheet taped to the page */
.kosec .kobox::after{content:"";position:absolute;left:50%;top:-9px;width:64px;height:20px;margin-left:-32px;transform:rotate(-3deg);z-index:1;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--sub,var(--tape)) 55%,transparent) 0 7px,color-mix(in srgb,var(--sub,var(--tape)) 38%,transparent) 7px 14px)}
.koimg{display:block;aspect-ratio:2/3;overflow:hidden;border-radius:2px;border:1.5px solid var(--line);background:#fff;box-shadow:var(--shadow-photo)}
.koimg img{display:block;width:100%;height:auto;max-width:none}
#koview{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column}
#koview[hidden]{display:none}
.kobar{flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px));border-bottom:2px solid var(--line);font-family:var(--display);font-size:var(--text-lead)}
.kobar .btn{min-height:40px;padding:6px 14px}
.koscroll{flex:1;overflow:auto;overscroll-behavior:contain;padding:10px}
.koscroll .koimg{width:1024px;margin:0 auto;border-radius:var(--radius-xs)}

/* a unit's two puzzles, each played on a page of its own (.v-puzzle) */
.puz{display:flex;flex-direction:column;gap:14px}
.pz,.pzl,.pzr{display:flex;flex-direction:column;gap:10px;min-width:0}
.pz{gap:14px}
.pzl{container-type:inline-size}
.cwh{font-family:var(--display);font-size:var(--text-lead);margin:0}
/* on a unit's home page: a card for each puzzle, with its worksheet as the picture */
.pzcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px}
.pzcard{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:var(--radius-tile);background:var(--surface);color:inherit;text-decoration:none;border:1.5px solid var(--line);box-shadow:var(--shadow-card)}
.pzcard .koimg{border-radius:var(--radius-field);margin-bottom:4px}
.pzcard .pzi{display:block;width:100%;height:100%;background:var(--accent-soft)}
.pzcard .t{font-family:var(--display);font-weight:600;font-size:var(--text-lead);line-height:1.2}
.pzcard .s{font-size:var(--text-meta);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pzcard .btn{align-self:flex-start;min-height:44px;padding:8px 20px;margin-top:4px}
.pznote{margin:-8px 0 0;max-width:560px}
/* at the top of a lesson: a small card for each of the lesson's two puzzles, its worksheet as a thumbnail */
.pzmini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px}
.pzmini .k{grid-column:1/-1;margin:0;font-size:var(--text-meta);font-weight:700;color:var(--muted)}
.pzm{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:8px;align-items:center;padding:8px;border-radius:var(--radius-tile);background:var(--surface);color:inherit;text-decoration:none;min-height:44px;border:1.5px solid var(--line);box-shadow:var(--shadow-card)}
.pzm .koimg{grid-row:1/4;width:40px;border-radius:var(--radius-xs);border-width:1px}
.pzm .pzi{display:block;width:100%;height:100%;background:var(--accent-soft)}
.pzm .t,.pzm .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pzm .t{font-family:var(--display);font-weight:600;font-size:var(--text-caption);line-height:1.2}
.pzm .s{font-size:var(--text-note);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pzm .go{font-size:var(--text-note);font-weight:700;color:var(--accent)}
/* on #puzzles: each unit's lessons, under its topic row */
.pzles{margin:-4px 0 4px}
.pzles summary{cursor:pointer;padding:6px 12px;font-weight:600;font-size:var(--text-caption);color:var(--muted)}
.pzles ul{list-style:none;margin:0;padding:0 0 0 12px;display:flex;flex-direction:column;gap:6px}
.pzles li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;border-left:3px solid var(--line);padding:4px 0 4px 10px}
.pzles .btn{min-height:42px;padding:7px 14px}
.mles a.sub{padding-left:28px}
.pzsheet .kobox{max-width:420px}
.pzmsg{min-height:1.4em;margin:0;font-weight:600;color:var(--ink)}
.pzprint{display:flex;flex-direction:column;gap:6px}
/* the word search: one button for each letter. The grid keeps touches to itself, so that a drag along a word does not scroll the page. */
.wsg{display:grid;grid-template-columns:repeat(var(--n),1fr);max-width:540px;border:2px solid var(--ink);border-radius:var(--radius-field);overflow:hidden;background:var(--surface);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.wc{aspect-ratio:1;min-width:0;padding:0;border:0;box-shadow:inset -1px -1px 0 var(--line);background:none;color:var(--ink);font-weight:700;font-size:clamp(12px,4.7cqw,24px);line-height:1}
.wc.f{background:var(--good-bg)}
.wc.on,.wc.sel{background:var(--accent);color:var(--accent-ink)}
.wc.hint{outline:4px solid var(--star);outline-offset:-4px;border-radius:50%}
.wc:focus-visible{outline-offset:-3px}
.wsl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px 16px;font-weight:600}
.wsl li::before{content:"○";display:inline-block;width:1.3em;color:var(--muted)}
.wsl li.done{color:var(--muted);text-decoration:line-through}
.wsl li.done::before{content:"✓";color:var(--good)}
/* the crossword: a button for each white square, the page's own letter keys under the grid, and the clue being answered kept in view above it */
.cwnow{position:sticky;top:calc(var(--barh) + env(safe-area-inset-top,0px));z-index:2;margin:0;padding:8px 12px;/* the clue being answered is on a sticky note */
  min-height:44px;border-radius:2px 2px 3px 12px;background:var(--sticky);color:var(--paper-ink);box-shadow:var(--shadow-paper);font-size:var(--text-caption)}
.cwnow:empty::before{content:"Tap a square to see its clue here.";color:var(--muted)}
.cwg{display:grid;grid-template-columns:repeat(var(--w),1fr);gap:1px;max-width:calc(var(--w)*46px);border:2px solid var(--void);border-radius:var(--radius-xs);overflow:hidden;background:var(--void)}
.cb{background:var(--void)}
.cc{position:relative;display:block;width:100%;aspect-ratio:1;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:var(--surface);color:var(--ink)}
.cc.at,.cc:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:1}
.cv{position:absolute;inset:0;display:grid;place-items:center;padding-top:12%;font-family:var(--body);font-weight:700;font-size:clamp(13px,calc(56cqw/var(--w)),26px);line-height:1;pointer-events:none}
.kb{display:flex;flex-direction:column;gap:6px;max-width:520px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.kr{display:flex;gap:4px;justify-content:center}
.kk{flex:1 1 0;min-width:0;max-width:48px;height:46px;padding:0;border:0;border-radius:var(--radius-small);background:var(--surface);color:var(--ink);font-weight:700;font-size:var(--text-lead);border:1.5px solid var(--line-strong);box-shadow:0 3px 0 var(--line-strong)}
.kk[data-k="back"]{flex:1.7 1 0;max-width:80px}
.kk:active{transform:translateY(3px);box-shadow:none}
.cc.in{background:var(--accent-soft)}
.cc.ok{background:var(--good-bg)}
.cc.no{background:var(--bad-bg)}
.cc.ok::after,.cc.no::after{position:absolute;right:2px;bottom:1px;font-size:var(--text-tiny);font-weight:700;line-height:1;pointer-events:none}
.cc.ok::after{content:"✓";color:var(--good)}
.cc.no::after{content:"✗";color:var(--bad)}
.cn{position:absolute;left:2px;top:2px;font-size:clamp(9px,2.6cqw,12px);font-style:normal;font-weight:700;line-height:1;color:var(--muted);pointer-events:none}
.cwclues{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px 20px}
.cll{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.cl{display:block;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--radius-small);background:none;text-align:left;font-size:var(--text-caption);line-height:1.35}
.cl[aria-current]{background:var(--accent-soft)}
.cl b{color:var(--accent)}
.ans summary{cursor:pointer;font-weight:700;color:var(--accent);min-height:44px;display:flex;align-items:center}
.ans ul{margin:4px 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:5px;font-size:var(--text-caption)}

/* key words, sheets, teachers */
.page{gap:18px}
.gloss{display:flex;flex-direction:column;gap:8px}
.gloss h2{margin-top:10px;color:var(--muted)}
.gw{background:var(--surface);border-radius:var(--radius-control);padding:10px 12px;border:1.5px solid var(--line)}
.gw b{font-family:var(--display);font-size:var(--text-lead);margin-right:4px}
.gw .code{margin-left:4px}
.sheetrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;background:var(--surface);border-radius:var(--radius-box);padding:10px 12px;border:1.5px solid var(--line)}
.sheetrow .t{font-weight:700}
.sheetrow .btn{min-height:42px;padding:7px 14px}
.cov ol{margin:0;padding:8px 12px 12px 34px;display:flex;flex-direction:column;gap:10px}
.cov li a{color:var(--accent);font-weight:700;text-decoration:none;display:block}
.cov li .meta{display:block}
.cov li.off{opacity:.5}

/* ---------- the course: one Course box, in the bar (in the menu on a phone) ---------- */
.hubtop{display:flex;flex-direction:column;gap:18px}
.hl{display:flex;flex-direction:column;gap:14px}
.hl>.lede,.hl>.cnum{max-width:70ch}
.cnum{font-size:var(--text-meta)}
.csel{display:none}
.bar .brand{margin-right:auto;padding:4px 0}
.brand .nb-site{display:none}
.coursesel{font:inherit;font-weight:700;color:var(--ink);background:var(--surface);border:2px solid var(--key-line);box-shadow:0 3px 0 var(--key-line);border-radius:var(--radius-field);padding:6px 8px;min-height:40px;max-width:100%}
.mcourse{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--radius-control);padding:8px 12px}
.mcourse .coursesel{flex:1;min-width:0}
.cnote{margin:0}
.unit.off{opacity:.55}
.outc summary{cursor:pointer;font-weight:700;color:var(--muted);padding:10px 2px;min-height:44px}
.outc .units{margin-top:8px}
.teach{display:none}   /* a unit's own course picker: the course is chosen once for the whole site now */

/* ---------- style A: sticky tabs hanging from the bar, the crumbs under them, a unit's lessons in a folder ---------- */
main{padding-top:0}
.topnav{display:flex;flex-direction:column;gap:10px}
/* the tabs fit by design; if a long name ever makes them too wide, the row scrolls rather than the page */
.flagbar{padding:0 0 6px;margin-bottom:-6px;overflow-x:auto;scrollbar-width:none}
.flagbar::-webkit-scrollbar{display:none}
.flagbar .fx{display:none}
#app h2,.kosec{scroll-margin-top:calc(var(--barh) + 16px)}
.nb-folder.lessons{margin-top:32px}
.nb-folder.lessons>.nb-card{padding:2px 12px}
.nb-folder.lessons .path{gap:0}
.nb-folder.lessons .tile{border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding-inline:2px}
.nb-folder.lessons .tile:last-child{border-bottom:0}
button.nb-ftab{font:inherit;font-weight:600;font-size:13px;cursor:pointer}

/* ---------- tablets and wider: use the width ---------- */
:root{--side:300px;--barh:54px}
@media (min-width:700px){
  .brand .nb-site{display:inline}
  .csel{display:flex;flex:none;align-items:center;gap:8px;font-weight:700;font-size:var(--text-meta);color:var(--muted)}
  .wrap{max-width:var(--page-wide)}
  .bar .wrap{max-width:none;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  main .wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
  .page,.v-game,.v-exam,.v-lesson{max-width:var(--page-mid)}
  .uhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
  .v-home>.path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .v-home>.kosec{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:28px;row-gap:10px;align-content:start}
  .v-home>.kosec .kobox{grid-column:1;grid-row:1/span 5}
  .v-home>.kosec>:not(.kobox){grid-column:2}
  .v-lesson .kobox{max-width:380px}
  .gloss{display:block;columns:2;column-gap:24px}
  .gloss h2{margin:16px 0 8px;break-after:avoid}
  .gloss h2:first-child{margin-top:0}
  .gw{break-inside:avoid;margin:0 0 8px}
  .page.wide{max-width:var(--page-wide)}
  /* bigger tabs from here; all seven (the subjects, Key words, Puzzles, Sheets, For teachers) from 900 pixels */
  .flagbar .nb-flag{flex:none;padding:10px 14px 9px;font-size:13px}
  .flagbar .nb-flag[aria-current]{padding-bottom:17px}
  .nb-folder.lessons .path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}
}
/* ---------- 900 pixels and wider: "wide blocks" (the owner's choice from an option board, 2026-11-15) ----------
   A lesson is one column of blocks in reading order (learn, then Your turn, then check), and each block is spread
   across the width: a picture on the left, its words and buttons on the right. Every page is the same width and
   starts at the same place, so nothing jumps sideways between kinds of page. Phones and tablets held upright (under
   900 pixels) are not touched by anything here. */
:root{--page-full:1240px}
@media (min-width:900px){
  /* a puzzle's page: the grid on the left, the words or the clues on the right */
  #app.v-puzzle .pz{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);column-gap:36px;align-items:start}
  #app.v-puzzle .cwclues{grid-template-columns:1fr}
  .flagbar .fx{display:block}
  .v-home>h2+.path{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* one width and one left edge for every kind of page */
  main .wrap{max-width:var(--page-full)}
  .page,.page.wide,#app.v-game,#app.v-exam,#app.v-lesson{max-width:none}
  /* the pages are wider now, so keep a paragraph's lines to a comfortable length; key words in up to three columns */
  .page>p{max-width:80ch}
  .gloss{columns:260px 3}

  /* the title: the lesson's puzzles beside the title and the goal */
  .v-lesson .lhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,440px);column-gap:32px;row-gap:16px;align-items:end}
  .v-lesson .lhead>*{grid-column:1}
  .v-lesson .lhead>.pzmini{grid-column:2;grid-row:2/span 2;max-width:none}

  /* learn: the photo on the left, the big idea and the three facts beside it; then each block across the width */
  .v-lesson .lbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:20px;align-items:start}
  .v-lesson .lbody>*{grid-column:1/-1;min-width:0}
  /* the photo's column stops at 460 pixels, so that on a big screen the photo is not much taller than the words */
  .v-lesson .lbody:has(>.ph-hero+.big~ul.facts){grid-template-columns:minmax(0,460px) minmax(0,1fr);grid-template-rows:auto 1fr}
  .v-lesson .lbody:has(>.ph-hero+.big~ul.facts)>.ph-hero{grid-column:1;grid-row:1/span 2}
  .v-lesson .lbody:has(>.ph-hero+.big~ul.facts)>.ph-hero+.big{grid-column:2;grid-row:1}
  .v-lesson .lbody:has(>.ph-hero+.big~ul.facts)>ul.facts:first-of-type{grid-column:2;grid-row:2}
  /* three facts with no photo beside them sit side by side */
  .v-lesson .lbody:not(:has(>.ph-hero+.big~ul.facts))>ul.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:24px}
  /* a picture with a caption beside the "watch out" note that follows it */
  .v-lesson .lbody>.fig:has(+.callout){grid-column:1}
  .v-lesson .lbody>.fig+.callout{grid-column:2;align-self:center}
  .v-lesson .lbody>.steps{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

  /* an explainer (and the Cells explorer): its one picture on the left, its sliders, buttons and words on the right */
  .v-lesson :is(.xp,.explore,.hotbox,.phx):has(>:is(.cirbox,svg.dia,svg.cir,.cellbox,.hotimg,svg.phscale,.bx)):has(>:not(.cirbox,svg.dia,svg.cir,.cellbox,.hotimg,svg.phscale,.bx)):not(:has(>:is(.cirbox,svg.dia,svg.cir,.cellbox,.hotimg,svg.phscale,.bx)~:is(.cirbox,svg.dia,svg.cir,.cellbox,.hotimg,svg.phscale,.bx))){
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:24px;row-gap:12px;align-items:start}
  .v-lesson :is(.xp,.explore,.hotbox,.phx)>*{grid-column:2;min-width:0}
  .v-lesson :is(.xp,.explore,.hotbox,.phx)>:is(.cirbox,svg.dia,svg.cir,.cellbox,.hotimg,svg.phscale,.bx){grid-column:1;grid-row:1/-1}

  /* Your turn (and the games): a part with one board puts it on the left, the question, buttons and feedback on the
     right; a part with no board, or with two, stays as it is, its answers in two columns */
  :is(.v-lesson,.v-game) .stage:has(>:is(.pinbox,svg.venn,.cirbox,.findbox,img.qimg,canvas.sim,canvas.pv,.scope,.dtbox,.mbox,.rig,.lamp,.hc,.sb,.xf,.grbox)):not(:has(>:is(.pinbox,svg.venn,.cirbox,.findbox,img.qimg,canvas.sim,canvas.pv,.scope,.dtbox,.mbox,.rig,.lamp,.hc,.sb,.xf,.grbox)~:is(.pinbox,svg.venn,.cirbox,.findbox,img.qimg,canvas.sim,canvas.pv,.scope,.dtbox,.mbox,.rig,.lamp,.hc,.sb,.xf,.grbox))){
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:repeat(6,auto) 1fr;column-gap:28px;row-gap:12px;align-items:start}
  :is(.v-lesson,.v-game) .stage>*{grid-column:2;min-width:0}
  :is(.v-lesson,.v-game) .stage>:is(.pinbox,svg.venn,.cirbox,.findbox,img.qimg,canvas.sim,canvas.pv,.scope,.dtbox,.mbox,.rig,.lamp,.hc,.sb,.xf,.grbox){grid-column:1;grid-row:1/-1}
  :is(.v-lesson,.v-game) .stage:not(:has(>:is(.pinbox,svg.venn,.cirbox,.findbox,img.qimg,canvas.sim,canvas.pv,.scope,.dtbox,.mbox,.rig,.lamp,.hc,.sb,.xf,.grbox)))>.opts:not(.two,.three,.pics,.symgrid){grid-template-columns:1fr 1fr}

  /* the end: the knowledge organiser on the left, its words, its buttons and "Check yourself" beside it */
  .v-lesson .lafter{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-rows:repeat(4,auto) 1fr;column-gap:32px;row-gap:12px;align-items:start}
  .v-lesson .lafter>*{grid-column:1/-1}
  .v-lesson .lafter>.kosec{display:contents}
  .v-lesson .lafter>.kosec>*{grid-column:2}
  .v-lesson .lafter>.kosec>.kobox{grid-column:1;grid-row:1/-1}
  .v-lesson .lafter>.can{grid-column:2;grid-row:4;margin-top:12px}
}
/* from 1280 pixels the contents stay open down the left-hand side (1100 until 2026-11-15: below 1280 the menu took
   room the wide blocks need, on tablets held sideways and on laptops set to 150%) */
@media (min-width:1280px){
  #menuBtn{display:none}
  .brand{width:calc(var(--side) - 32px)}
  #menu{display:block;position:fixed;inset:calc(var(--barh) + env(safe-area-inset-top,0px)) auto 0 0;width:var(--side);z-index:4}
  #menu .shade,#menu .mhead,.mcourse{display:none}   /* the bar holds the course box at this width */
  #menu .panel{position:absolute;inset:0;width:auto;box-shadow:none;border-right:2px solid var(--line);padding:14px 12px calc(24px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
  main{margin-left:var(--side)}
}
/* ---------- added by tools/cf-build.js: ideabyidea.com only ---------- */
/* an old #link opened on another page: that page's own content stays out of sight until the app has drawn the right view */
.cf-other #app>*{visibility:hidden}
/* parts of the static pages that the app does not draw */
.cf-kw{margin-top:22px}
.cf-kw h2{margin-bottom:10px}
.cf-kwl{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.cf-kwl .gw{margin:0}
.cf-more{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-weight:600;font-size:var(--text-note)}
.cf-more a{color:var(--accent)}
/* a quiz's or an exam's questions, all of them, as the plain page lists them (the app shows one at a time) */
.cf-qs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.cf-qs>li{display:flex;flex-direction:column;gap:8px}
.cf-qs>li+li{border-top:1.5px solid var(--line);padding-top:18px}
.cf-opts{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
.ans ol{margin:4px 0 0;padding-left:1.5em;display:flex;flex-direction:column;gap:5px;font-size:var(--text-caption)}