/* ============================================================
   Write-Up Lab — graph paper, graphite, a red pen and highlighters.
   Its own look on purpose: not the hub's ink slab, not the plant's
   paper, not Bio English. Shared with the estate: Fraunces · Inter ·
   IBM Plex Mono, and the byline on the first screen.
   Level colours come from Daniel's own guide figure:
   IGCSE green · IB IA blue · IB EE burnt orange (--ee #B45309; violet until 25 Sep 2026).
   Red is only ever the red pen.
   ============================================================ */
:root{
  --paper:#F3F6F6; --sheet:#FFFFFF; --sheet-2:#F8FAFA; --edge:#D8E1E4;
  --grid-min:rgba(50,135,155,.07); --grid-maj:rgba(50,135,155,.15);
  --ink:#1A2126; --ink-2:#46515A; --ink-3:#6F7C85; --rule:#D0D9DD; --rule-2:#E4EAEC;
  --red:#C4262E; --red-2:#A31E25; --red-wash:rgba(196,38,46,.08);
  --green:#1B7A4C; --green-wash:rgba(27,122,76,.10);
  --blue:#1E4FA8; --blue-wash:rgba(30,79,168,.09);
  --plum:#6B3A9E; --plum-wash:rgba(107,58,158,.10);
  --ee:#B45309; --ee-wash:rgba(180,83,9,.10);
  --amber:#8F6400; --amber-wash:rgba(214,160,20,.15);
  --hl:rgba(255,222,64,.62); --hl-soft:rgba(255,222,64,.30);
  --kw:rgba(255,214,51,.45);
  --p1:rgba(255,221,64,.55); --p2:rgba(255,140,190,.42); --p3:rgba(100,215,135,.42);
  --p4:rgba(110,190,255,.45); --p5:rgba(255,170,80,.45); --p6:rgba(185,160,255,.45);
  --p1k:#8A6D00; --p2k:#B0306E; --p3k:#1E7D45; --p4k:#1D5FA8; --p5k:#A35A00; --p6k:#6441B8;
  --lvl:var(--green); --lvl-wash:var(--green-wash);
  --shadow:0 1px 0 rgba(0,0,0,.035),0 12px 28px -16px rgba(20,40,55,.30);
  --shadow-sm:0 1px 0 rgba(0,0,0,.03),0 4px 12px -8px rgba(20,40,55,.30);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --r:4px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0D1316; --sheet:#141C20; --sheet-2:#11181B; --edge:#26323A;
    --grid-min:rgba(110,200,220,.04); --grid-maj:rgba(110,200,220,.09);
    --ink:#E2E8EB; --ink-2:#A6B2B9; --ink-3:#7C8A92; --rule:#2B3840; --rule-2:#202B31;
    --red:#FF7B7B; --red-2:#FF9A9A; --red-wash:rgba(255,123,123,.10);
    --green:#5CCF99; --green-wash:rgba(92,207,153,.11);
    --blue:#8BAEFF; --blue-wash:rgba(139,174,255,.11);
    --plum:#C8A4FF; --plum-wash:rgba(200,164,255,.11);
    --ee:#FDBA74; --ee-wash:rgba(253,186,116,.12);
    --amber:#F0C24A; --amber-wash:rgba(240,194,74,.12);
    --hl:rgba(255,222,64,.30); --hl-soft:rgba(255,222,64,.16); --kw:rgba(255,214,51,.24);
    --p1:rgba(255,221,64,.28); --p2:rgba(255,140,190,.26); --p3:rgba(100,215,135,.24);
    --p4:rgba(110,190,255,.26); --p5:rgba(255,170,80,.26); --p6:rgba(185,160,255,.28);
    --p1k:#F2D45C; --p2k:#FF9CC8; --p3k:#7FE0A2; --p4k:#8FC8FF; --p5k:#FFB870; --p6k:#C8B4FF;
    --shadow:0 1px 0 rgba(0,0,0,.3),0 14px 30px -16px rgba(0,0,0,.75);
    --shadow-sm:0 1px 0 rgba(0,0,0,.3),0 4px 12px -8px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0D1316; --sheet:#141C20; --sheet-2:#11181B; --edge:#26323A;
  --grid-min:rgba(110,200,220,.04); --grid-maj:rgba(110,200,220,.09);
  --ink:#E2E8EB; --ink-2:#A6B2B9; --ink-3:#7C8A92; --rule:#2B3840; --rule-2:#202B31;
  --red:#FF7B7B; --red-2:#FF9A9A; --red-wash:rgba(255,123,123,.10);
  --green:#5CCF99; --green-wash:rgba(92,207,153,.11);
  --blue:#8BAEFF; --blue-wash:rgba(139,174,255,.11);
  --plum:#C8A4FF; --plum-wash:rgba(200,164,255,.11);
  --ee:#FDBA74; --ee-wash:rgba(253,186,116,.12);
  --amber:#F0C24A; --amber-wash:rgba(240,194,74,.12);
  --hl:rgba(255,222,64,.30); --hl-soft:rgba(255,222,64,.16); --kw:rgba(255,214,51,.24);
  --p1:rgba(255,221,64,.28); --p2:rgba(255,140,190,.26); --p3:rgba(100,215,135,.24);
  --p4:rgba(110,190,255,.26); --p5:rgba(255,170,80,.26); --p6:rgba(185,160,255,.28);
  --p1k:#F2D45C; --p2k:#FF9CC8; --p3k:#7FE0A2; --p4k:#8FC8FF; --p5k:#FFB870; --p6k:#C8B4FF;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 14px 30px -16px rgba(0,0,0,.75);
  --shadow-sm:0 1px 0 rgba(0,0,0,.3),0 4px 12px -8px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{
  margin:0; color:var(--ink); font:17px/1.62 var(--sans);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-maj) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-maj) 1px,transparent 1px),
    linear-gradient(var(--grid-min) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-min) 1px,transparent 1px);
  background-size:50px 50px,50px 50px,10px 10px,10px 10px;
  background-attachment:local;
}
img{max-width:100%}
a{color:var(--blue);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0;line-height:1.15}
p{margin:0}
u{text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--lvl)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
.eyebrow{font:500 .74rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.muted{color:var(--ink-3)}
.missing{color:var(--red);font:500 .9rem var(--mono)}
.prose p+p{margin-top:.8em}
.prose ul{margin:.4em 0;padding-left:1.2em}
#main{outline:none;min-height:70vh}

/* ---------- keywords, highlighter, parts ---------- */
.kw{font-weight:600;cursor:pointer;border-radius:2px;background:linear-gradient(transparent 58%,var(--kw) 58%);box-shadow:0 1px 0 var(--ink-3);padding:0 1px}
.kw:hover,.kw[aria-expanded="true"]{background:var(--kw)}
mark.hl{background:var(--hl);color:inherit;padding:0 2px;border-radius:2px}
.pt{border-radius:2px;padding:1px 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color .15s,opacity .15s,box-shadow .15s}
.pt1{background:var(--p1)} .pt2{background:var(--p2)} .pt3{background:var(--p3)} .pt4{background:var(--p4)} .pt5{background:var(--p5)} .pt6{background:var(--p6)}
.ptn{font:700 .62em/1 var(--mono);margin-right:2px;vertical-align:.45em}
.pt1 .ptn{color:var(--p1k)} .pt2 .ptn{color:var(--p2k)} .pt3 .ptn{color:var(--p3k)} .pt4 .ptn{color:var(--p4k)} .pt5 .ptn{color:var(--p5k)} .pt6 .ptn{color:var(--p6k)}
.is-isolating .pt:not(.is-lit){background:transparent;opacity:.55}
.is-isolating .pt.is-lit{box-shadow:0 0 0 2px currentColor}

/* keyword pop-over */
.kwpop{position:absolute;z-index:60;background:var(--sheet);border:1px solid var(--edge);border-radius:6px;box-shadow:var(--shadow);padding:12px 14px 13px;font-size:.93rem;line-height:1.5}
.kwpop__t{font:600 1.02rem/1.25 var(--serif);margin-bottom:4px}
.kwpop__d{color:var(--ink)}
.kwpop__e{margin-top:8px;color:var(--ink-2);font-size:.88rem;border-top:1px dashed var(--rule);padding-top:7px}
.kwpop__e span{font:600 .68rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
/* a keyword that opens with a figure: the types of data (after Daniel's Year 7 poster) */
.kwpop--wide{padding:14px 16px 16px}
.kwpop__x{position:absolute;top:6px;right:8px;width:34px;height:34px;border:0;background:transparent;font:400 1.5rem/1 var(--sans);color:var(--ink-3);cursor:pointer;border-radius:50%}
.kwpop__x:hover{background:var(--rule-2);color:var(--ink)}
.tod{margin-top:12px;display:grid;gap:10px}
.tod__root{justify-self:center;padding:6px 16px;border:2px solid var(--ink);border-radius:4px;background:#FFD166;font:650 1.05rem/1.2 var(--serif);color:#1A2126}
.tod__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tod__col{--c:var(--green);border:1.5px solid color-mix(in srgb,var(--c) 45%,var(--edge));border-radius:6px;background:color-mix(in srgb,var(--c) 9%,var(--sheet));padding:8px}
.tod__col--c{--c:var(--red)}
.tod__col.is-hi{border-width:2.5px;border-color:var(--c)}
.tod__h{font:650 .98rem/1.2 var(--serif);text-align:center;margin-bottom:8px;color:var(--ink)}
.tod__h small{display:block;font:500 .74rem/1.3 var(--sans);color:var(--ink-2);margin-top:2px}
.tod__kids{display:grid;gap:6px}
.tod__k{display:grid;gap:1px;padding:7px 9px;border-radius:5px;background:var(--sheet);border:1px solid var(--edge);font-size:.84rem;line-height:1.35}
.tod__k b{font:650 .9rem/1.2 var(--sans);color:var(--c)}
.tod__k span{color:var(--ink)}
.tod__k i{font-style:normal;color:var(--ink-2);font-size:.8rem}
.tod__k.is-hi{border:2px solid var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.tod__tests{list-style:none;margin:0;padding:8px 10px;border-radius:6px;background:var(--sheet-2);border:1px dashed var(--rule);display:grid;gap:3px;font-size:.86rem}
.tod__trap{margin:0;padding:8px 10px;border-left:3px solid var(--amber);background:var(--amber-wash);font-size:.84rem;line-height:1.45}
.tails{display:block;width:100%;height:auto;margin:2px 0}
.tails__curve{fill:none;stroke:var(--ink);stroke-width:1.6}
.tails__ax{stroke:var(--ink-3);stroke-width:1}
.tails__area{fill:color-mix(in srgb,var(--red) 35%,transparent)}
.tails__cut{stroke:var(--red);stroke-width:1.2;stroke-dasharray:3 3}
.tails__t{font:600 10.5px var(--sans);fill:var(--ink)}
.tails__mark{stroke:var(--blue);stroke-width:2.2}
.tails__dot{fill:var(--blue)}
.tails__p{margin:4px 2px 0;font-size:.82rem;line-height:1.4;color:var(--ink)}
.tod__ib{margin:0;padding:8px 10px;border-left:3px solid var(--blue);background:var(--blue-wash);font-size:.84rem;color:var(--ink);line-height:1.45}
@media (max-width:480px){.tod__cols{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 16px;border-radius:var(--r);border:1px solid var(--rule);background:var(--sheet);color:var(--ink);font:600 .92rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,transform .05s}
.btn:hover{border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default}
.btn--go{background:var(--lvl);border-color:var(--lvl);color:#fff}
.btn--go:hover{filter:brightness(1.08);border-color:var(--lvl)}
:root[data-theme="dark"] .btn--go{color:#0D1316}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn--go{color:#0D1316}}
.btn--ghost{background:transparent}
.btn--lg{min-height:50px;padding:12px 20px;font-size:1rem}

/* ---------- top bar ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--rule)}
.top__in{max-width:1180px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand__mark{width:34px;height:34px;flex:none}
.brand__txt{display:grid;line-height:1.1}
.brand__n{font:650 1.28rem/1 var(--serif);letter-spacing:-.015em}
.brand__by{font:500 .72rem/1.25 var(--sans);color:var(--ink-3);margin-top:3px}
.levels{display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--sheet)}
.lvb{appearance:none;border:0;background:transparent;padding:6px 12px 5px;cursor:pointer;display:grid;text-align:left;border-right:1px solid var(--rule);min-width:92px}
.lvb:last-child{border-right:0}
.lvb__n{font:650 .86rem/1.2 var(--sans)}
.lvb__y{font:500 .64rem/1.2 var(--mono);letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}
.lvb--g{--c:var(--green);--w:var(--green-wash)} .lvb--i{--c:var(--blue);--w:var(--blue-wash)} .lvb--e{--c:var(--ee);--w:var(--ee-wash)}
.lvb:hover{background:var(--sheet-2)}
.lvb[aria-pressed="true"]{background:var(--w);box-shadow:inset 0 -3px 0 var(--c)}
.lvb[aria-pressed="true"] .lvb__n{color:var(--c)}
.topnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
/* "← Biology Hub": top left, above the name, as in the Bio English Lab and the hubs */
.upbar{flex-basis:100%}
/* the way back (14 Oct 2026, Daniel: pupils missed it): a solid pill in the site's green, as its main button */
.up{display:inline-flex;align-items:center;flex:none;white-space:nowrap;min-height:34px;margin:0 0 4px;padding:0 16px 0 13px;font:650 14px/1 var(--sans);color:#fff;background:var(--green);text-decoration:none;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.up:hover,.up:focus-visible{filter:brightness(1.08)}
:root[data-theme="dark"] .up{color:#0D1316}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .up{color:#0D1316}}
.top__in{row-gap:4px}
.topnav a{font:550 .88rem/1 var(--sans);color:var(--ink-2);text-decoration:none;padding:9px 10px;border-radius:4px}
.topnav a:hover{color:var(--ink);background:var(--sheet)}
.topnav a.is-on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--lvl)}

/* ---------- home ---------- */
.hero{padding-block:44px 26px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:34px;align-items:end}
.hero__lv{display:grid;gap:8px}
.hero__lvk{font:600 .7rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.lvcard{appearance:none;display:grid;gap:4px;text-align:left;padding:11px 14px 12px;border:1px solid var(--edge);border-left:4px solid var(--c);border-radius:var(--r);background:var(--sheet);cursor:pointer;box-shadow:var(--shadow-sm);transition:background-color .15s,border-color .15s}
.lvcard--g{--c:var(--green);--w:var(--green-wash)} .lvcard--i{--c:var(--blue);--w:var(--blue-wash)} .lvcard--e{--c:var(--ee);--w:var(--ee-wash)}
.lvcard:hover{border-color:var(--c)}
.lvcard[aria-pressed="true"]{background:var(--w);border-color:var(--c);box-shadow:0 0 0 1px var(--c),var(--shadow-sm)}
.lvcard__h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lvcard__h b{font:650 1rem/1.2 var(--sans);color:var(--c)}
.lvcard__h span{font:500 .66rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.lvcard__w{font-size:.9rem;color:var(--ink)}
.lvcard__f{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.78rem;color:var(--ink-2)}
.lvcard__f span::before{content:"·";margin-right:5px;color:var(--c);font-weight:700}
.lvcard[aria-pressed="false"] .lvcard__f{display:none}
.hero__h{font-size:clamp(2.2rem,5.2vw,3.7rem);line-height:1.02;font-variation-settings:"opsz" 144;max-width:17ch}
.hero__u{background:linear-gradient(transparent 62%,var(--hl) 62%);padding:0 .06em}
.hero__lede{font-size:1.12rem;color:var(--ink-2);margin-top:14px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.sechead{display:grid;gap:4px;margin-bottom:20px}
.sechead h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.sechead__p{color:var(--ink-2);font-size:.95rem;margin-top:6px}
.mapsec,.toolsec{padding-block:44px 10px;border-top:1px solid var(--rule)}

/* the sheet (a paper card) and the specimen's caption */
.sheet{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}
.spec-cap{font:italic .78rem/1.35 var(--serif);color:var(--ink-2);margin-top:4px}

/* map */
.map{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;position:relative;counter-reset:st}
.map::before{content:"";position:absolute;left:3%;right:3%;top:17px;border-top:2px dashed var(--rule)}
.map__stage{padding:0 8px 6px;position:relative;min-width:0}
.map__h{display:grid;gap:3px;justify-items:start;margin-bottom:10px}
.map__n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--sheet);border:2px solid var(--ink);font:700 .9rem/1 var(--mono);color:var(--ink);position:relative;z-index:1;margin-bottom:6px}
.map__name{font:650 .78rem/1.1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.map__blurb{font-size:.8rem;line-height:1.35;color:var(--ink-3);min-height:3.3em}
.map__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.map__a{display:grid;gap:4px;padding:9px 10px 8px;border-radius:var(--r);text-decoration:none;color:var(--ink);font-size:.92rem;line-height:1.3;background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--shadow-sm);transition:border-color .15s,transform .15s}
.map__a:hover{border-color:var(--lvl);transform:translateY(-1px)}
.map__t{font-weight:550}
.map__m{display:flex;align-items:center;justify-content:space-between;gap:6px}
.map__a.is-other{--c:var(--blue);background:color-mix(in srgb,var(--c) 8%,var(--sheet));border-style:dashed;border-color:color-mix(in srgb,var(--c) 50%,var(--edge));box-shadow:none}
.map__a.is-ee{--c:var(--ee)}
@media (max-width:1100px){.map{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}.map::before{display:none}}
@media (max-width:640px){.map{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.map{grid-template-columns:1fr}}
.dots{display:inline-flex;gap:3px;flex:none;vertical-align:middle}
.dots i{width:8px;height:8px;border-radius:50%;display:block;border:1.5px solid var(--rule)}
.dots i.on-g{background:var(--green);border-color:var(--green)} .dots i.on-i{background:var(--blue);border-color:var(--blue)} .dots i.on-e{background:var(--ee);border-color:var(--ee)}
.tick{font:700 .72rem/1 var(--mono);flex:none}
.tick--full{color:var(--green)} .tick--part{color:var(--amber)} .tick--seen{color:var(--ink-3)}

/* tools */
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tool{display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:start;padding:14px 14px 15px;background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.tool:hover{border-color:var(--ink-3)}
.tool__icon{grid-row:span 2;width:36px;height:36px;display:grid;place-items:center;border-radius:6px;background:var(--lvl-wash);color:var(--lvl);font-size:1.1rem}
.tool__t{font:600 1.05rem/1.25 var(--serif)}
.tool__b{grid-column:2;font-size:.86rem;color:var(--ink-2);line-height:1.45}
.tool .dots{grid-row:1;grid-column:3}
.tool.is-other{--c:var(--blue);background:color-mix(in srgb,var(--c) 7%,var(--sheet));border-style:dashed;border-color:color-mix(in srgb,var(--c) 50%,var(--edge))}
.tool.is-ee{--c:var(--ee)}

/* ---------- station page ---------- */
.phead{padding-block:34px 18px;display:grid;gap:10px}
.crumb{display:flex;gap:8px;flex-wrap:wrap;font:500 .8rem/1.2 var(--mono);color:var(--ink-3)}
.crumb a{color:var(--ink-3)}
.phead__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.phead__h{font-size:clamp(2rem,4.4vw,3rem);line-height:1.05;font-variation-settings:"opsz" 144}
.phead__job{font:400 1.22rem/1.5 var(--serif);font-variation-settings:"opsz" 24;color:var(--ink)}
.phead__where{font-size:.95rem;color:var(--ink-2)}
.phead__where>span:first-child{font:600 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:6px}
/* a part whose job or place differs by level: one line per level, each with its level tag (16 Oct 2026) */
.phead__job--more{font:400 1rem/1.5 var(--serif);color:var(--ink-2)}
.phead__job .ibtag{vertical-align:.2em;margin-right:2px}
.phead__wl{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.phead__wl .ibtag{margin-right:4px}
.plan{display:grid;grid-template-columns:190px minmax(0,1fr);gap:36px;align-items:start;padding-bottom:40px}
.plan__side{position:sticky;top:96px}
.side__list{list-style:none;margin:0;padding:0;border-left:2px solid var(--rule)}
.side__list a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none;font-size:.9rem}
.side__list a:hover{color:var(--ink);border-left-color:var(--lvl)}
.plan__body{min-width:0}
.psec{padding-block:26px;border-top:1px solid var(--rule)}
.psec:first-child{border-top:0;padding-top:4px}
.psec__h{font-size:1.55rem;margin-bottom:16px}
.psec--build>*+*{margin-top:28px}
.bh{font-size:1.22rem;margin-bottom:12px}
.bintro{color:var(--ink-2);margin-bottom:14px}
.bafter{color:var(--ink-2);margin-top:12px;font-size:.95rem}
.is-ib-only{position:relative}
.is-ib-only::before{content:"IB";position:absolute;top:0;right:0;font:700 .62rem/1 var(--mono);color:var(--blue);background:var(--blue-wash);padding:3px 6px;border-radius:2px;letter-spacing:.06em}
.is-ib-only>.bintro:first-child{padding-right:30px}   /* the corner IB label never covers the intro's first line (16 Oct 2026) */

/* ladder */
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:end}
.ladder__s{padding:14px 16px 16px;border:1px solid var(--edge);background:var(--sheet);position:relative}
.ladder__s+.ladder__s{border-left:0}
.ladder__s--g{--c:var(--green);--w:var(--green-wash);min-height:0}
.ladder__s--i{--c:var(--blue);--w:var(--blue-wash);margin-top:0}
.ladder__s--e{--c:var(--ee);--w:var(--ee-wash)}
.ladder__s{border-top:4px solid var(--c)}
.ladder__s.is-cur{background:var(--w);box-shadow:var(--shadow-sm);z-index:1}
.ladder__k{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.ladder__lv{font:650 .8rem/1.2 var(--sans);color:var(--c)}
.ladder__you{font:600 .62rem/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--c);border:1px solid var(--c);padding:3px 5px;border-radius:2px}
.ladder ul{margin:0;padding-left:1.05em;display:grid;gap:5px;font-size:.93rem;line-height:1.45}
.ladder li::marker{color:var(--c)}
.ladder__none{font-size:.9rem;color:var(--ink-3)}
.ladder__s.is-none{opacity:.7}

/* rules */
.rules{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rule{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r);padding:11px 14px}
.rule__i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--green-wash);color:var(--green);font-weight:700;font-size:.85rem}
.rule--ib .rule__i{background:var(--blue-wash);color:var(--blue)}
.rule__t{font-size:.98rem;line-height:1.5}

/* compare */
.cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.cmp__side{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r);padding:14px 16px 16px;box-shadow:var(--shadow-sm);min-width:0}
.cmp__side--bad{border-top:3px solid var(--red)}
.cmp__side--good{border-top:3px solid var(--green)}
.cmp__tag{font:650 .74rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.cmp__side--bad .cmp__tag{color:var(--red)} .cmp__side--good .cmp__tag{color:var(--green)}
.cmp__side .prose{font:400 1.02rem/1.55 var(--serif);font-variation-settings:"opsz" 14}
.cmp__why{margin-top:10px;font-size:.95rem;color:var(--ink-2);border-left:3px solid var(--lvl);padding-left:12px}

/* anatomy */
.anat{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.anat__model{padding:18px 18px 20px;font:400 1.04rem/1.7 var(--serif);font-variation-settings:"opsz" 14;min-width:0}
.anat__legend{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.anat__part{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:9px 11px;border:1px solid var(--edge);background:var(--sheet);border-radius:var(--r);cursor:pointer;font-size:.93rem;line-height:1.45}
.anat__part:hover,.anat__part.is-lit{border-color:var(--ink-3);box-shadow:var(--shadow-sm)}
.anat__sw{width:26px;height:26px;border-radius:4px;display:grid;place-items:center;font:700 .8rem/1 var(--mono)}
.pk1 .anat__sw{background:var(--p1);color:var(--p1k)} .pk2 .anat__sw{background:var(--p2);color:var(--p2k)} .pk3 .anat__sw{background:var(--p3);color:var(--p3k)}
.pk4 .anat__sw{background:var(--p4);color:var(--p4k)} .pk5 .anat__sw{background:var(--p5);color:var(--p5k)} .pk6 .anat__sw{background:var(--p6);color:var(--p6k)}
.anat__txt b{display:block;font-weight:650}
.anat__txt span{color:var(--ink-2)}

/* notes and callouts */
.blk-note{border:1px solid var(--edge);border-left:4px solid var(--ink-3);background:var(--sheet);border-radius:var(--r);padding:12px 16px 14px}
.note__k{font:650 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;color:var(--ink-3)}
.note__t{font:600 1.05rem/1.3 var(--serif);margin-bottom:4px}
.note__b{font-size:.96rem}
.note--ib{border-left-color:var(--blue)} .note--ib .note__k{color:var(--blue)}
.note--ee{border-left-color:var(--ee)} .note--ee .note__k{color:var(--ee)}
.note--igcse{border-left-color:var(--green)} .note--igcse .note__k{color:var(--green)}
.note--warn{border-left-color:var(--red)} .note--warn .note__k{color:var(--red)}
.note--tip{border-left-color:var(--amber)} .note--tip .note__k{color:var(--amber)}
.note--house{border-left-color:var(--ink)} .note--house .note__k{color:var(--ink)}
.blk-callout{background:var(--hl-soft);border:1px solid var(--edge);border-radius:var(--r);padding:16px 18px}
.callout__k{font:650 .7rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.callout__t{font:500 1.3rem/1.35 var(--serif);font-variation-settings:"opsz" 36}

/* visuals, data tables, grid of two */
.sheet--vis{padding:16px 16px 14px;overflow:hidden}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dt{border-collapse:collapse;width:100%;font:500 .9rem/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--sheet)}
table.dt caption{caption-side:top;text-align:left;font:italic 400 .96rem/1.4 var(--serif);color:var(--ink);padding:0 0 8px}
table.dt th,table.dt td{border:1.2px solid var(--ink);padding:6px 9px;text-align:center;vertical-align:middle}
table.dt th{font-weight:600;background:var(--sheet-2)}
table.dt.dt--mini{font-size:.72rem}
/* the maths-style corner: two headings split by a diagonal line. Shown only as a mistake. */
table.dt th.dt-diag{position:relative;width:11em;min-width:11em;height:5.8em;padding:0}
.dt-diag__l{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dt-diag__l line{stroke:var(--ink);stroke-width:1.2}
.dt-diag__a,.dt-diag__b{position:absolute;font-size:.8em;line-height:1.2;white-space:nowrap}
.dt-diag__a{top:4px;right:5px}
.dt-diag__b{bottom:5px;left:7px}
table.dt.dt--mini th,table.dt.dt--mini td{padding:3px 5px;border-width:1px;border-color:var(--rule)}
table.dt.dt--mini caption{font-size:.76rem}
@media (max-width:520px){table.dt.dt--tight{font-size:.74rem}table.dt.dt--tight th,table.dt.dt--tight td{padding:5px 4px}table.dt.dt--tight caption{font-size:.86rem}}
.tnote{font-size:.85rem;color:var(--ink-2);margin-top:6px}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.g2__k{font:650 .72rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px;color:var(--ink-2)}
.g2--g .g2__k{color:var(--green)} .g2--i .g2__k{color:var(--blue)} .g2--e .g2__k{color:var(--ee)} .g2--red .g2__k{color:var(--red)}
.g2__n{font-size:.9rem;color:var(--ink-2);margin-top:8px}

/* sentence frames */
.blk-frames{border:1px dashed var(--ink-3);border-radius:var(--r);padding:14px 16px;background:var(--sheet-2)}
.frames__k{font:650 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.frames{margin:0;padding-left:1.1em;display:grid;gap:6px;font:400 1.02rem/1.6 var(--serif);font-variation-settings:"opsz" 14}
.gap{display:inline-block;min-width:3.2em;border-bottom:1.5px solid var(--ink-2);margin:0 3px;transform:translateY(-3px)}

/* the stepper */
.stepper{display:grid;gap:0}
.stepper__stage{padding:20px 18px 16px;border-bottom-left-radius:0;border-bottom-right-radius:0}
.stepper__cap{background:var(--sheet-2);border:1px solid var(--edge);border-top:0;padding:14px 18px 12px;min-height:106px}
.stepper__n{font:600 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lvl);margin-bottom:5px}
.stepper__t{font:600 1.2rem/1.25 var(--serif);margin-bottom:4px}
.stepper__x{font-size:1rem;color:var(--ink-2);line-height:1.5}
.stepper__nav{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sheet-2);border:1px solid var(--edge);border-top:1px dashed var(--rule);border-radius:0 0 var(--r) var(--r);padding:10px 14px}
.stepper__dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.stepper__dots i{width:8px;height:8px;border-radius:50%;background:var(--rule)}
.stepper__dots i.done{background:var(--ink-3)} .stepper__dots i.on{background:var(--lvl);transform:scale(1.25)}
[data-el]{transition:opacity .35s ease,background-color .35s ease,filter .35s ease}
.st-hide{opacity:0 !important}
table .st-hide{opacity:.06 !important}
td.st-focus,th.st-focus,caption.st-focus{background:var(--hl) !important}
g.st-focus{filter:drop-shadow(0 0 3px rgba(255,200,0,.95)) drop-shadow(0 0 6px rgba(255,200,0,.6))}
figcaption.st-focus{background:var(--hl)}

/* graphs (plot.js) */
.plotfig{margin:0}
.plot{display:block;width:100%;height:auto;max-width:640px;overflow:visible}
.gp-min{stroke:var(--grid-maj);stroke-width:.6}
.gp-maj{stroke:rgba(50,135,155,.32);stroke-width:.9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gp-maj{stroke:rgba(110,200,220,.2)}}
:root[data-theme="dark"] .gp-maj{stroke:rgba(110,200,220,.2)}
.pl-axis line{stroke:var(--ink);stroke-width:1.5}
.pl-ticks line{stroke:var(--ink);stroke-width:1.2}
.pl-tick{font:500 11.5px var(--mono);fill:var(--ink-2)}
.pl-label text{font:600 13px var(--sans);fill:var(--ink)}
.pl-title text{font:600 14px var(--sans);fill:var(--ink)}
.pl-mk{stroke:var(--ink);stroke-width:1.6;fill:none}
.pl-mk--dot{fill:var(--ink);stroke:none}
.pl-mk--blob{fill:var(--ink);stroke:none}
.pl-mk--o{fill:none}
.pl-line{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.pl-err line{stroke:var(--ink);stroke-width:1.3}
.pl-bar{fill:var(--sheet-2);stroke:var(--ink);stroke-width:1.3}
.tone-lvl .pl-mk,.pl-line.tone-lvl,.pl-err.tone-lvl line,.pl-mk.tone-lvl{stroke:var(--lvl)}
.tone-lvl .pl-mk--dot,.tone-lvl .pl-mk--blob{fill:var(--lvl)}
.tone-red .pl-mk,.pl-line.tone-red,.pl-err.tone-red line,.pl-mk.tone-red{stroke:var(--red)}
.tone-red .pl-mk--dot,.tone-red .pl-mk--blob{fill:var(--red)}
.tone-green .pl-mk,.pl-line.tone-green,.pl-err.tone-green line,.pl-mk.tone-green{stroke:var(--green)}
.tone-blue .pl-mk,.pl-line.tone-blue,.pl-err.tone-blue line,.pl-mk.tone-blue{stroke:var(--blue)}
.tone-plum .pl-mk,.pl-line.tone-plum,.pl-err.tone-plum line,.pl-mk.tone-plum{stroke:var(--plum)}
.tone-grey .pl-mk,.pl-line.tone-grey,.pl-err.tone-grey line,.pl-mk.tone-grey{stroke:var(--ink-3)}
.pl-bar.tone-lvl{fill:var(--lvl-wash);stroke:var(--lvl)}
.pl-bar.tone-green{fill:var(--green-wash);stroke:var(--green)}
.pl-bar.tone-blue{fill:var(--blue-wash);stroke:var(--blue)}
.pl-bar.tone-red{fill:var(--red-wash);stroke:var(--red)}
.pl-bar.tone-hatch{fill:var(--hl-soft);stroke:var(--ink)}
.pl-bar--dash{fill:var(--sheet);stroke:var(--ink);stroke-dasharray:5 4}
.pl-bar--solid{fill:var(--ink-2);stroke:var(--ink-2)}
.pl-bar--solid.tone-lvl{fill:var(--lvl);stroke:var(--lvl)}
.pl-txt{font:600 13px var(--sans);fill:var(--ink)}
.pl-txt.tone-green{fill:var(--green)}.pl-txt.tone-red{fill:var(--red)}.pl-txt.tone-lvl{fill:var(--lvl)}
.pl-txt.tone-grey{fill:var(--ink-2);font-weight:500}
/* a stepper stage whose pictures take turns in one place (steps hide:[…]) */
.panes{display:grid}.panes>.pane{grid-area:1/1;min-width:0;align-self:center}
@media (max-width:760px){.panes>.pane.st-hide{display:none}}   /* a phone scrolls anyway: only the current picture takes room */
.pane__h{font:600 .95rem/1.3 var(--sans);margin:0 0 8px}
.pane-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.pane-2>div,.pane-3>div{min-width:0}
.pane-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.pane__one{max-width:430px;margin:0 auto}
@media (max-width:640px){.pane-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.pane-3{grid-template-columns:minmax(0,1fr)}}
/* the heather and moss stage: the table beside its O-against-E chart */
.oe{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.oe table.dt{font-size:.74rem}.oe table.dt th,.oe table.dt td{padding:5px 5px}.oe table.dt caption{font-size:.86rem}
.oe__key{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-2);margin:4px 0 0}
.oe__sw{display:inline-block;width:14px;height:11px;vertical-align:-1px;margin-right:6px;background:var(--lvl);border:1.3px solid var(--lvl)}
.oe__sw--e{background:var(--sheet);border:1.3px dashed var(--ink)}
@media (max-width:820px){.oe{grid-template-columns:minmax(0,1fr)}}
.pl-keybox{fill:var(--sheet);stroke:var(--ink);stroke-width:1}
.pl-keyt{font:500 12px var(--sans);fill:var(--ink)}
.pl-break path{fill:none;stroke:var(--ink);stroke-width:1.4}
.pl-gap{fill:var(--sheet)}
g.is-hl{filter:drop-shadow(0 0 3px rgba(255,200,0,.95)) drop-shadow(0 0 7px rgba(255,200,0,.6))}
.pl-cap{font:italic 400 .93rem/1.4 var(--serif);color:var(--ink);margin-top:6px}
.pl-cap.is-hl{background:var(--hl)}

/* ---------- red pen ---------- */
.redpen{display:grid;gap:0}
.redpen__bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--sheet-2);border:1px solid var(--edge);border-bottom:0;border-radius:var(--r) var(--r) 0 0;padding:9px 14px}
.redpen__count{font:500 .86rem/1.3 var(--mono);color:var(--ink-2)}
.redpen__count b{color:var(--red)}
.redpen__count .ok,.redpen__count b.ok{color:var(--green)}
.redpen__sheet{border-radius:0;padding:20px 20px 22px;font:400 1.05rem/1.75 var(--serif);font-variation-settings:"opsz" 14;box-shadow:none}
.redpen__sheet.is-fixed{border-left:4px solid var(--green)}
.redpen__note{background:var(--sheet-2);border:1px solid var(--edge);border-top:0;border-radius:0 0 var(--r) var(--r);padding:12px 16px 14px;min-height:64px;font-size:.98rem;color:var(--ink-2)}
.redpen__note.is-on{background:var(--red-wash);color:var(--ink)}
.redpen__note.is-ok{background:var(--green-wash);color:var(--ink)}
.redpen__lab{display:block;font:700 1.35rem/1.1 var(--hand);color:var(--red);margin-bottom:3px}
.rpm{appearance:none;background:none;border:0;padding:0 1px;margin:0;text-align:left;font:inherit;color:inherit;cursor:pointer;text-decoration:underline wavy var(--red);text-decoration-thickness:1.4px;text-underline-offset:4px;position:relative;border-radius:2px}
.rpm:hover{background:var(--red-wash)}
.rpm::after{content:attr(data-label);position:absolute;left:50%;bottom:100%;transform:translate(-50%,-1px) rotate(-3deg);font:700 1.06rem/1 var(--hand);color:var(--red);white-space:nowrap;pointer-events:none}
.rpm.is-found{background:var(--red-wash);box-shadow:0 0 0 1.5px var(--red)}
.rpm.is-active{background:var(--red-wash);box-shadow:0 0 0 2.5px var(--red)}
.redpen__sheet .rpm{margin-top:.2em}
.redpen__sheet td .rpm::after,.redpen__sheet th .rpm::after{bottom:auto;top:100%;transform:translate(-50%,1px) rotate(-3deg);font-size:.95rem}
.redpen__sheet table.dt{margin-top:6px}
.redpen__sheet table.dt td,.redpen__sheet table.dt th{padding:9px 10px}
.rp-ring rect,.rp-ring ellipse{fill:rgba(196,38,46,.04);stroke:var(--red);stroke-width:2;stroke-dasharray:none;cursor:pointer}
.rp-ring:hover rect,.rp-ring.is-active rect,.rp-ring:hover ellipse,.rp-ring.is-active ellipse{fill:rgba(196,38,46,.12);stroke-width:2.6}
.rp-ring.is-found rect,.rp-ring.is-found ellipse{fill:rgba(196,38,46,.10)}
.rp-ring__t{font:700 17px var(--hand);fill:var(--red);cursor:pointer}
.rp-ring:focus{outline:none}
.rp-ring:focus-visible rect,.rp-ring:focus-visible ellipse{stroke-width:3.4}

/* ---------- traps ---------- */
.traps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.trap{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.trap__bad,.trap__good{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;padding:10px 14px;font-size:.98rem;line-height:1.5}
.trap__bad{background:var(--red-wash)}
.trap__bad>span:first-child{color:var(--red);font-weight:700}
.trap__good>span:first-child{color:var(--green);font-weight:700}

/* ---------- quiz ---------- */
.quiz{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}
.quiz__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule-2)}
.quiz__num{font:600 .76rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.quiz__prog{display:flex;gap:4px;flex-wrap:wrap}
.quiz__prog i{width:18px;height:6px;border-radius:3px;background:var(--rule)}
.quiz__prog i.on{background:var(--lvl)} .quiz__prog i.ok{background:var(--green)} .quiz__prog i.no{background:var(--red)}
.quiz__card{padding:18px 18px 18px}
.quiz__kind{font:600 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lvl);margin-bottom:8px}
.quiz__q{font:500 1.18rem/1.45 var(--serif);font-variation-settings:"opsz" 24;margin-bottom:14px}
.quiz__show{margin-bottom:14px}
.quiz__fb{margin-top:12px}
.quiz__foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
.hint{font-size:.86rem;color:var(--ink-3);margin-bottom:10px}
.opts{display:grid;gap:8px}
.opt{appearance:none;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;text-align:left;width:100%;padding:11px 14px;border:1.5px solid var(--rule);border-radius:var(--r);background:var(--sheet);cursor:pointer;font-size:1rem;line-height:1.45}
.opt:hover:not(:disabled){border-color:var(--ink-3);background:var(--sheet-2)}
.opt__box{width:18px;height:18px;border:2px solid var(--ink-3);border-radius:50%;margin-top:2px}
.opt[aria-pressed="true"]{border-color:var(--lvl);background:var(--lvl-wash)}
.opt[aria-pressed="true"] .opt__box{background:var(--lvl);border-color:var(--lvl);box-shadow:inset 0 0 0 3px var(--sheet)}
.opt.is-ok{border-color:var(--green);background:var(--green-wash)}
.opt.is-ok .opt__box{border-color:var(--green);background:var(--green)}
.opt.is-no{border-color:var(--red);background:var(--red-wash);opacity:.85}
.opt.is-no .opt__box{border-color:var(--red)}
.opt.is-dim{opacity:.6}
.opt:disabled{cursor:default}
.opt__why{grid-column:2;display:block;font-size:.88rem;color:var(--ink-2);margin-top:4px}
.fb{padding:10px 14px;border-radius:var(--r);font-size:.97rem;line-height:1.5}
.fb--ok{background:var(--green-wash)} .fb--no{background:var(--red-wash)}
.fb__k{font-weight:700;margin-right:4px}
.fb--ok .fb__k{color:var(--green)} .fb--no .fb__k{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:8px;min-height:44px}
.chips--pool{padding:10px;border:1.5px dashed var(--rule);border-radius:var(--r);margin-bottom:12px}
.chip{appearance:none;border:1.5px solid var(--rule);background:var(--sheet);border-radius:999px;padding:7px 13px;cursor:pointer;font-size:.95rem;line-height:1.3;text-align:left;box-shadow:var(--shadow-sm)}
.chip:hover{border-color:var(--ink-3)}
.chip.is-sel{border-color:var(--lvl);background:var(--lvl-wash);box-shadow:0 0 0 2px var(--lvl)}
.chip.is-ok{border-color:var(--green);background:var(--green-wash);border-radius:10px}
.chip__why{display:block;font-size:.82rem;color:var(--ink-2);margin-top:3px}
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.bin{border:1.5px solid var(--rule);border-radius:var(--r);background:var(--sheet-2);min-height:110px;cursor:pointer}
.bin:hover{border-color:var(--lvl)}
.bin__h{font:650 .8rem/1.2 var(--sans);padding:8px 10px;border-bottom:1px solid var(--rule);background:var(--sheet)}
.bin__body{padding:10px}
.ordl{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:o}
.ordl__i{counter-increment:o;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border:1.5px solid var(--rule);border-radius:var(--r);background:var(--sheet)}
.ordl__i::before{content:counter(o);font:700 .85rem/1 var(--mono);color:var(--lvl);text-align:center}
.ordl.is-ok .ordl__i{border-color:var(--green);background:var(--green-wash)}
.ordl.is-no .ordl__i{border-color:var(--red)}
.ordl__ctl{display:flex;gap:4px}
.ordl__b{appearance:none;border:1px solid var(--rule);background:var(--sheet-2);width:34px;height:34px;border-radius:4px;cursor:pointer;font-size:.8rem}
.ordl__b:hover{border-color:var(--ink-3)}
.spot{padding:16px 18px;font:400 1.06rem/1.9 var(--serif);font-variation-settings:"opsz" 14;box-shadow:none}
.spot .rpm{text-decoration:none;border-bottom:1.5px dotted var(--ink-3)}
.spot .rpm::after{display:none}
.spot .rpm.is-picked{background:var(--red-wash);box-shadow:0 0 0 1.5px var(--red);border-bottom-color:transparent}
.spot .rpm.is-found{background:var(--red-wash);box-shadow:0 0 0 1.5px var(--red);text-decoration:underline wavy var(--red)}
.spot .rpm.is-fine{border-bottom-color:transparent;opacity:.8}
.spot__why{margin:10px 0 0;padding-left:1.1em;font-size:.93rem;display:grid;gap:5px}
.buildl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:56px;padding:10px 12px;border:2px solid var(--ink);border-radius:var(--r);background:var(--sheet);margin-bottom:12px}
.buildl:empty::before{content:"Your answer builds here";color:var(--ink-3);font-size:.9rem}
.buildl.is-ok{border-color:var(--green);background:var(--green-wash)}
.buildl.is-no{border-color:var(--red)}
.quiz__end{text-align:center;padding:12px 0 4px}
.quiz__score{font:600 3.2rem/1 var(--serif)}
.quiz__score span{font-size:1.4rem;color:var(--ink-3);margin-left:4px}
.quiz__endt{font:600 .74rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 10px}
.quiz__end+.quiz__foot{justify-content:center}

/* ---------- flashcards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{appearance:none;border:0;padding:0;background:none;perspective:900px;cursor:pointer;min-height:168px;text-align:left}
.card__in{display:grid;position:relative;width:100%;height:100%;min-height:168px;transition:transform .45s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.card[aria-pressed="true"] .card__in{transform:rotateY(180deg)}
.card__f,.card__b{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--sheet);border:1px solid var(--edge);border-radius:6px;padding:14px 16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px}
.card__f{justify-content:center;border-top:3px solid var(--lvl)}
.card__b{transform:rotateY(180deg);background:var(--sheet-2)}
.card__k{font:600 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.card__term{font:600 1.3rem/1.2 var(--serif)}
.card__term--sm{font-size:.98rem;color:var(--lvl)}
.card__hint{font-size:.78rem;color:var(--ink-3);margin-top:auto}
.card__def{font-size:.94rem;line-height:1.45}
.card__eg{font-size:.84rem;color:var(--ink-2);border-top:1px dashed var(--rule);padding-top:6px;margin-top:auto}
@media (prefers-reduced-motion:reduce){.card__in{transition:none}}

/* ---------- further, sources, next ---------- */
.further{border:1px solid var(--edge);border-left:4px solid var(--red);background:var(--sheet);border-radius:var(--r);margin-bottom:10px}
.further summary{cursor:pointer;padding:12px 16px;font:600 1.02rem/1.35 var(--serif)}
.further__k{font:700 .64rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--red);padding:3px 6px;border-radius:2px;margin-right:6px;vertical-align:2px}
.further__b{padding:0 16px 14px;font-size:.96rem}
.further__c{font-size:.84rem;color:var(--ink-3);margin-top:8px}
.psrc{margin-top:26px;font-size:.82rem;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:12px}
.psrc span{font:600 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-right:4px}
.pnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.pnext__a{display:grid;gap:3px;padding:14px 16px;border:1px solid var(--edge);border-radius:var(--r);background:var(--sheet);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.pnext__a:hover{border-color:var(--lvl)}
.pnext__a span{font:600 .7rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.pnext__a b{font:600 1.1rem/1.3 var(--serif)}
.pnext__a--next{grid-column:2;text-align:right}

/* ---------- route, checklist, words ---------- */
.routepg,.checkpg{padding-block:34px 50px;display:grid;gap:14px}
.trail{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0;position:relative;max-width:820px}
.trail::before{content:"";position:absolute;left:21px;top:20px;bottom:20px;border-left:2px dashed var(--rule)}
.trail__i a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:start;padding:10px 12px 10px 0;text-decoration:none;color:var(--ink);border-radius:var(--r);position:relative}
.trail__i a:hover{background:var(--hl-soft)}
.trail__n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sheet);border:2px solid var(--rule);font:700 .95rem/1 var(--mono);color:var(--ink-2);position:relative;z-index:1}
.trail__i.is-seen .trail__n{border-color:var(--ink-3)}
.trail__i.is-done .trail__n{background:var(--green);border-color:var(--green);color:#fff}
.trail__i.is-next .trail__n{border-color:var(--lvl);color:var(--lvl);box-shadow:0 0 0 4px var(--lvl-wash)}
.trail__t{display:grid;gap:2px;padding-top:2px}
.trail__t b{font:600 1.12rem/1.3 var(--serif)}
.trail__t span{font-size:.92rem;color:var(--ink-2)}
.checktop{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.checkbar{flex:1;min-width:220px;height:34px;border:1px solid var(--edge);border-radius:var(--r);background:var(--sheet);position:relative;overflow:hidden}
.checkbar__fill{position:absolute;inset:0 auto 0 0;background:var(--lvl-wash);border-right:2px solid var(--lvl);transition:width .25s}
.checkbar__t{position:relative;font:600 .82rem/34px var(--mono);padding-left:12px;color:var(--ink)}
.checkgrp{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r);padding:14px 16px 10px;box-shadow:var(--shadow-sm)}
.checkgrp__h{font-size:1.2rem;margin-bottom:8px;display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.checkgrp__a{font:500 .82rem var(--sans)}
.ck{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:start;padding:8px 2px;border-top:1px solid var(--rule-2);cursor:pointer;font-size:.97rem;line-height:1.45}
.ck input{width:20px;height:20px;margin-top:2px;accent-color:var(--green)}
.ck input:checked+.ck__t{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--green)}
.ck__ib{font:700 .6rem/1 var(--mono);color:var(--blue);background:var(--blue-wash);padding:2px 5px;border-radius:2px;vertical-align:2px}
.search{width:100%;max-width:420px;min-height:46px;padding:10px 14px;border:1.5px solid var(--rule);border-radius:var(--r);background:var(--sheet);color:var(--ink);font:inherit;margin:6px 0 14px}
.toolpg{padding-block:34px 50px;display:grid;gap:12px}
.toolpg__back{font-size:.95rem;color:var(--ink-2)}

/* widgets share these */
.widget{min-width:0}
.wd-panel{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px}
.wd-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wd-k{font:650 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.wd-out{font-size:.97rem;color:var(--ink-2);margin-top:10px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--sheet)}
.seg button{appearance:none;border:0;border-right:1px solid var(--rule);background:transparent;padding:8px 12px;cursor:pointer;font:600 .85rem/1.2 var(--sans);color:var(--ink-2)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--lvl-wash);color:var(--lvl);box-shadow:inset 0 -2px 0 var(--lvl)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);margin-top:40px;padding-block:24px 34px;font-size:.84rem;color:var(--ink-3)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.foot a{color:var(--ink-2)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;align-items:start}
  .plan{grid-template-columns:1fr;gap:10px}
  .plan__side{position:static}
  .side__list{display:flex;flex-wrap:wrap;gap:4px 2px;border-left:0}
  .side__list a{border:1px solid var(--rule);border-radius:999px;padding:5px 11px;margin:0;font-size:.82rem;background:var(--sheet)}
  .anat{grid-template-columns:1fr}
}
@media (max-width:760px){
  .top__in{gap:10px;padding:8px 16px}
  .topnav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .topnav a{white-space:nowrap;padding:8px 8px}
  .levels{order:3}
  .brand__by{display:block}
  .ladder{grid-template-columns:1fr}
  .ladder__s+.ladder__s{border-left:1px solid var(--edge);border-top-width:4px}
  .cmp{grid-template-columns:1fr}
  .pnext{grid-template-columns:1fr}
  .pnext__a--next{grid-column:1}
}
@media (max-width:520px){
  body{font-size:16px}
  .wrap{padding-inline:16px}
  .lvb{min-width:0;padding:6px 9px 5px}
  .lvb__y{display:none}
  .sheet--vis{padding:12px 10px}
  .redpen__sheet{padding:16px 12px 18px}
  .quiz__card{padding:14px 12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:12px;z-index:100;background:var(--sheet);border:1px solid var(--rule);padding:8px 12px;border-radius:4px}

/* ---------- fixes from the build (23 Sep) ---------- */
.plan__body>*,.psec>*,.stepper>*,.redpen>*,.blk-steps,.blk-redpen,.blk-widget,.quiz,.quiz__card>*{min-width:0}
.stepper [data-el].st-focus:not(g):not(td):not(th):not(caption){background:var(--hl);border-radius:2px}
.redpen__sheet{line-height:3}
.redpen__sheet .tscroll{padding-top:1.5em}
.redpen__sheet td:has(.rpm),.redpen__sheet th:has(.rpm){padding-bottom:24px;vertical-align:top}
.redpen__sheet table.dt{line-height:1.35}
table.dt.dt--compact{font-size:.8rem}
table.dt.dt--compact th,table.dt.dt--compact td{padding:4px 6px}
.stepper__nav .btn{white-space:nowrap}
@media (max-width:420px){.stepper__dots{display:none}.stepper__nav .btn{padding-inline:12px}}
@media (max-width:760px){.topnav{flex-wrap:wrap;overflow:visible}.topnav a{padding:7px 7px;font-size:.84rem}}
.quiz__num{white-space:nowrap}

/* ============================================================
   ONE REPORT, NOT THREE (24 Sep 2026)
   ============================================================ */
.lvscope-g{--lvl:var(--green);--lvl-wash:var(--green-wash)}
.lvscope-i{--lvl:var(--blue);--lvl-wash:var(--blue-wash)}
.lvscope-e{--lvl:var(--ee);--lvl-wash:var(--ee-wash)}
.ibtag{display:inline-block;font:700 .62rem/1 var(--mono);letter-spacing:.06em;padding:4px 6px;border-radius:3px;vertical-align:middle;white-space:nowrap}
.ibtag--g{color:var(--green);background:var(--green-wash);box-shadow:inset 0 0 0 1px var(--green)}
.ibtag--i{color:var(--blue);background:var(--blue-wash);box-shadow:inset 0 0 0 1px var(--blue)}
.ibtag--e{color:var(--ee);background:var(--ee-wash);box-shadow:inset 0 0 0 1px var(--ee)}
.hero--one{grid-template-columns:1fr;padding-block:40px 18px}
.dash-demo{--c:var(--blue);border:1.5px dashed color-mix(in srgb,var(--c) 55%,var(--edge));background:color-mix(in srgb,var(--c) 8%,var(--sheet));border-radius:3px;padding:0 5px}
.dash-demo--ee{--c:var(--ee)}

/* the report as two pages */
.rmapwrap{padding-bottom:26px}
.rmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
.rpage{padding:16px 16px 18px;position:relative;background:var(--sheet);border-top:4px solid var(--green)}
.rpage__h{display:flex;justify-content:space-between;align-items:baseline;font:600 .7rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule);padding-bottom:9px;margin-bottom:10px}
.rpage__n{font-size:.8rem;color:var(--ink-2)}
.rpage__list{display:grid;gap:7px}
.rm{border:1px solid var(--edge);border-radius:var(--r);background:var(--sheet);transition:box-shadow .2s,border-color .2s,opacity .2s}
.rm--ib{--c:var(--blue);border:1.5px dashed color-mix(in srgb,var(--c) 55%,var(--edge));background:color-mix(in srgb,var(--c) 7%,var(--sheet))}
.rm--ee{--c:var(--ee)}
.rm__tile{appearance:none;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;text-align:left;background:none;border:0;padding:10px 12px;cursor:pointer;color:var(--ink);border-radius:var(--r)}
.rm__tile:hover{background:var(--hl-soft)}
.rm__name{font:600 .98rem/1.25 var(--serif)}
.rm--ib .rm__name{color:var(--ink-2)}
.rmap.has-open .rm:not(.is-open){opacity:.72}
.rm.is-open{border-color:var(--ink-3);box-shadow:var(--shadow);opacity:1}
.rm.is-open .rm__tile{background:var(--hl);border-radius:var(--r) var(--r) 0 0}
.rm__body{padding:12px 14px 14px;border-top:1px solid var(--rule)}
.rm__added{font-size:.86rem;color:var(--ink-2);margin-bottom:8px}
.rm__ex{background:var(--sheet-2);border:1px solid var(--rule-2);border-radius:var(--r);padding:10px 12px;margin-bottom:10px;overflow-x:auto}
.rm__ex .plot{max-width:360px}
.rm__tx{font:400 1rem/1.5 var(--serif);font-variation-settings:"opsz" 14;color:var(--ink)}
.rm__tx+.rm__tx{margin-top:6px}
.rm__dl{margin:0 0 10px;display:grid;gap:3px}
.rm__dl dt{font:600 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.rm__dl dd{margin:0;font-size:.95rem;line-height:1.45}
.rm__dl dd.lose{color:var(--red)}
.rm__dl dd.lose::before{content:"✘ ";font-weight:700}
.rm__diffs{display:grid;gap:6px;margin-bottom:10px}
.rm__diff{border:1px solid var(--edge);border-left:4px solid var(--c);border-radius:var(--r);background:var(--sheet)}
.rm__diff--i{--c:var(--blue)} .rm__diff--e{--c:var(--ee)}
.rm__diff summary{cursor:pointer;padding:9px 12px;font-size:.93rem;color:var(--ink)}
.rm__diff summary b{color:var(--c)}
.rm__diff[open] summary{border-bottom:1px solid var(--rule-2)}
.rm__diffb{padding:10px 12px 12px;font-size:.93rem}
.rm__chg{margin-bottom:6px}
.rm__job{color:var(--ink-2);margin-bottom:8px}
.rm__go{display:flex;flex-wrap:wrap;gap:8px}
.rmap__note{font-size:.88rem;color:var(--ink-2);margin-top:12px}
/* tiny previews of what each part looks like */
.sk{display:block;width:62px;flex:none}
.sk--lines,.sk--list{display:grid;gap:4px}
.sk--lines i,.sk--list i{display:block;height:3px;border-radius:2px;background:var(--rule)}
.sk--lines i:nth-child(2){width:80%} .sk--lines i:nth-child(3){width:55%}
.sk--list i{margin-left:8px;position:relative} .sk--list i::before{content:"";position:absolute;left:-8px;top:-1px;width:4px;height:5px;border-radius:1px;background:var(--ink-3)}
.sk--table,.sk--grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--ink-3)}
.sk--grid{grid-template-columns:repeat(3,1fr)}
.sk--table i,.sk--grid i{display:block;height:7px;border:.5px solid var(--rule)}
.sk--graph{height:34px}
.sk--graph path{stroke:var(--ink-3);stroke-width:1.4}
.sk--graph .sk-l{stroke:var(--green);stroke-width:1.6}

/* one part: compare bar, tabs, steps */
.cmpbar{border:1px solid var(--edge);border-radius:var(--r);background:var(--sheet);margin-bottom:18px;box-shadow:var(--shadow-sm)}
.cmpbar summary{cursor:pointer;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;list-style:none}
.cmpbar summary::-webkit-details-marker{display:none}
.cmpbar__t{font:600 1rem/1.3 var(--serif)}
.cmpbar__lv{display:flex;gap:5px}
.cmpbar__lv i{font:700 .64rem/1 var(--mono);font-style:normal;padding:4px 6px;border-radius:3px;letter-spacing:.05em}
.cmpbar__lv .c-g{color:var(--green);background:var(--green-wash)} .cmpbar__lv .c-i{color:var(--blue);background:var(--blue-wash)} .cmpbar__lv .c-e{color:var(--ee);background:var(--ee-wash)}
.cmpbar__o{margin-left:auto;font:600 .85rem/1 var(--sans);color:var(--ink-2)}
.cmpbar__o::after{content:" ▾"}
.cmpbar[open] .cmpbar__o::after{content:" ▴"}
.cmpbar .ladder{padding:0 14px 14px}
.pbody{padding-bottom:40px}
.ptabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--rule);margin-bottom:20px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:20;background:color-mix(in srgb,var(--paper) 94%,transparent);padding-top:6px}
.ptabs a{font:600 .92rem/1 var(--sans);color:var(--ink-2);text-decoration:none;padding:11px 12px 10px;border-radius:4px 4px 0 0;margin-bottom:-2px;border-bottom:3px solid transparent;white-space:nowrap}
.ptabs a:hover{color:var(--ink);background:var(--sheet)}
.ptabs a.is-on{color:var(--ink);border-bottom-color:var(--lvl);background:var(--sheet)}
.ptabs__n{font:600 .7rem/1 var(--mono);color:var(--ink-3);margin-left:3px}
.pchap{max-width:880px}
.pchap__lv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.seg--lv .seg--g[aria-pressed="true"]{color:var(--green);background:var(--green-wash);box-shadow:inset 0 -2px 0 var(--green)}
.seg--lv .seg--i[aria-pressed="true"]{color:var(--blue);background:var(--blue-wash);box-shadow:inset 0 -2px 0 var(--blue)}
.seg--lv .seg--e[aria-pressed="true"]{color:var(--ee);background:var(--ee-wash);box-shadow:inset 0 -2px 0 var(--ee)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.step{border:1px solid var(--edge);border-radius:var(--r);background:var(--sheet);box-shadow:var(--shadow-sm)}
.step--ib{border:1.5px dashed var(--lvl);background:color-mix(in srgb,var(--lvl) 9%,var(--sheet));box-shadow:none}
.step__h{appearance:none;width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) auto 18px;gap:10px;align-items:center;background:none;border:0;padding:12px 14px;text-align:left;cursor:pointer;color:var(--ink)}
.step__h:hover{background:var(--hl-soft)}
.step__n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--lvl);color:var(--lvl);font:700 .82rem/1 var(--mono)}
.step.is-open .step__n{background:var(--lvl);color:#fff}
.step__t{font:600 1.08rem/1.3 var(--serif)}
.step__chev::before{content:"▾";color:var(--ink-3)}
.step.is-open .step__chev::before{content:"▴"}
.step.is-open{box-shadow:var(--shadow)}
.step.is-open .step__h{border-bottom:1px solid var(--rule-2)}
.step__b{padding:16px 16px 16px}
.step__f{margin-top:18px;display:flex;justify-content:flex-end}
.trap--ib{border-style:dashed}
.trap__tag{padding:8px 14px 0}
.pfoot{max-width:880px;margin-top:10px}
@media (max-width:900px){.rmap{grid-template-columns:1fr;gap:16px}}
@media (max-width:760px){.ptabs{top:calc(env(safe-area-inset-top,0px) + 96px);overflow-x:auto;flex-wrap:nowrap}}
@media (max-width:520px){.step__h{grid-template-columns:28px minmax(0,1fr) 16px}.step__h .ibtag{grid-column:2;justify-self:start}.step__b{padding:12px 10px}.cmpbar__o{margin-left:0}}

/* a link to another page of nlcsbiology.com, written [words](https://…) in a note */
.xlink{color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.xlink:hover{text-decoration-thickness:2.5px}

/* ---------- signing in and homework (3 Oct 2026) ----------
   The sign-in sits at the right of the top line, beside "← Biology Hub", so the main row keeps its shape.
   Homework colours are the labs' key (Bio English's #B45309 for part done = --ee here): red not started, orange part done,
   green done; the words always say it too. */
.upbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.who{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.who__btn{min-height:32px;display:flex;align-items:center}
.who__btn[hidden],.who__card[hidden]{display:none}   /* display:flex above would beat the hidden attribute */
.who__card{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:4px 10px;font:500 12.5px/1.3 var(--sans);color:var(--ink-2)}
.who__card b{color:var(--ink);font-weight:650}
.who__sync{font:500 11px/1.2 var(--mono);color:var(--ink-3)}
.who__sync.is-no{color:var(--red);font-weight:700}   /* the sign-in has expired: nothing is sent until the pupil signs in again */
.who__btn:not([hidden])+.who__card{margin-left:10px}   /* Google's button beside the card, when the sign-in has expired */
.who__hw,.who__t{font:600 12px/1 var(--sans);color:var(--ink);text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:5px 10px;background:var(--sheet)}
.who__hw{border-color:color-mix(in srgb,var(--red) 45%,var(--rule))}
.who__hw:hover,.who__t:hover{border-color:var(--ink-2)}
.who__out{appearance:none;background:none;border:1px solid var(--rule);color:var(--ink-2);border-radius:999px;padding:5px 10px;font:500 12px/1 var(--sans);cursor:pointer}
.who__out:hover{border-color:var(--ink-2);color:var(--ink)}
@media (max-width:560px){.who__sync{display:none}.who__name{display:none}.who__sync.is-no{display:inline}}

.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);max-width:min(560px,calc(100% - 32px));background:var(--ink);color:var(--paper);font:500 .9rem/1.4 var(--sans);padding:12px 16px;border-radius:var(--r);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

.hwdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:baseline;flex:none}
.hwdot--none{background:var(--red)}
.hwdot--partly{background:var(--ee)}
.hwdot--done{background:var(--green)}
.hwpill{display:inline-block;font:650 .74rem/1 var(--sans);letter-spacing:.01em;padding:4px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.hwpill--none{color:var(--red);background:var(--red-wash)}
.hwpill--partly{color:var(--ee);background:var(--ee-wash)}
.hwpill--done{color:var(--green);background:var(--green-wash)}
.hwkey{font:500 .88rem/1.6 var(--sans);color:var(--ink-2)}
.hwkey .hwdot{margin:0 4px 0 8px}

.map__a.is-hw{border-left:4px solid var(--c-hw,var(--red))}
.map__a.is-hw--partly{--c-hw:var(--ee)}
.map__a.is-hw--done{--c-hw:var(--green)}

.hwbox{margin-top:8px;margin-bottom:8px}
.hwbox__h{font:650 1.2rem/1.3 var(--sans);margin:0 0 4px}
.hwbox__p{margin:0 0 10px;color:var(--ink-2)}
.hwrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:12px 14px;margin-bottom:8px;background:var(--sheet);border:1px solid var(--edge);border-left:4px solid var(--red);border-radius:var(--r);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm)}
.hwrow:hover{border-color:var(--ink-3)}
.hwrow__due,.hwrow__n{font:500 .86rem/1.3 var(--sans);color:var(--ink-2)}

.hwbanwrap{margin-top:4px;margin-bottom:6px}
.hwban>*{margin:0}
.hwban{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r);padding:12px 16px;box-shadow:var(--shadow-sm)}
.hwban__k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:600 .9rem/1.3 var(--sans);color:var(--ink)}
.hwban__p{margin-top:6px !important;color:var(--ink)}
.hwlist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.hwlist li{font:500 .9rem/1.4 var(--sans);color:var(--ink-2);padding-left:22px;position:relative}
.hwlist li::before{content:"";position:absolute;left:4px;top:.45em;width:9px;height:9px;border-radius:50%;border:2px solid var(--ink-3)}
.hwlist li.is-ok::before{background:var(--green);border-color:var(--green)}
.hwlist b{color:var(--ink);font-weight:650;margin-right:4px}
.hwalso{margin:8px 0 0;font:500 .84rem/1.45 var(--sans);color:var(--ink-3)}
.hwalso b{font-weight:600;color:var(--ink-2)}

.hwpg{padding-top:22px;padding-bottom:40px}
.hwparts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px;margin-top:14px}
.hwpart{background:var(--sheet);border:1px solid var(--edge);border-top:4px solid var(--red);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.hwpart--partly{border-top-color:var(--ee)}
.hwpart--done{border-top-color:var(--green)}
.hwpart__h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:650 1.05rem/1.3 var(--sans);margin:0}
.hwpart__h a{color:var(--ink);text-decoration:none}
.hwpart__h a:hover{text-decoration:underline;text-underline-offset:3px}
.hwpart__p{margin:8px 0 0;color:var(--ink)}
.hwpart__go{margin:12px 0 0;margin-top:auto;padding-top:12px}

.seg--lv .seg--hw[aria-pressed="true"]{color:var(--red);background:var(--red-wash);box-shadow:inset 0 -2px 0 var(--red)}

/* Accommodation (8 Oct 2026): after a second wrong try, why (pupils the teacher gave it only); the redo's line */
.helpbox{margin-top:10px;padding:9px 11px;border-left:3px solid var(--blue);background:var(--blue-wash);border-radius:0 var(--r) var(--r) 0;line-height:1.5}
.helpbox__h{margin:0 0 4px;font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.quiz__top:has(.quiz__practice){flex-wrap:wrap}
.quiz__practice{flex-basis:100%;margin-top:6px;font:600 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}