/* brainlag.css v2 - the Brainlag design system (shared by every page).
   Pages link this BEFORE their own <style>, so page rules win.
   Tokens: paper/surface/sunk/ink/ink-2/ink-3/rule + roles (study = teal, play = violet, ok, warn, bad).
   Legacy names (--bg --card --text --muted --accent --accent-text --ink-rgb --text-2 --dk-panel)
   stay as aliases: the 20 study tools are written against them. */

/* ---- Fonts (self-hosted, OFL; see /assets/fonts/OFL-*.txt) ---- */
@font-face{font-family:"BL Body";src:url(/assets/fonts/bl-onest.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"BL Display";src:url(/assets/fonts/bl-display2.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
/* the fallback faces, Arial sized and spaced to the site fonts' metrics (Onest: ascent .97, descent .305; BL Display: .974,
   .236), so a line wraps the same before the fonts arrive as after: no shift when they swap in (lesson_cls, 15 Oct: a key
   idea 117 px in the fallback, 147 in BL Body) */
@font-face{font-family:"BL Body Fallback";src:local("Arial"),local("ArialMT");font-weight:100 500;size-adjust:106%;ascent-override:91.5%;descent-override:28.8%;line-gap-override:0%}
@font-face{font-family:"BL Body Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:501 900;size-adjust:100.8%;ascent-override:96.2%;descent-override:30.3%;line-gap-override:0%}
@font-face{font-family:"BL Display Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:100 900;size-adjust:94%;ascent-override:103.6%;descent-override:25.1%;line-gap-override:0%}

/* ---- Tokens (see scratchpad bl-redesign/PALETTE.md; shared roles with code.brainlag.space) ---- */
:root{
  --f-body:"BL Body","BL Body Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-display:"BL Display","BL Display Fallback","BL Body",system-ui,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --paper:#f4f9ff; --surface:#ffffff; --sunk:#e6f1fc;
  --surface-up:#eef4fb;   /* a card that stands on a --surface band: a real step from white in light (owner, 19 Oct: the Continue card and Practise were white on white), a step lighter than --surface in dark */
  --track:var(--sunk);   /* an empty progress track: light, the sunk tone already reads on the page (1.08:1) */
  --ink:#15365a; --ink-2:#2c4a6b; --ink-3:#536b88;
  --ink-rgb:21,54,90;
  --rule:rgba(var(--ink-rgb),.12); --rule-2:rgba(var(--ink-rgb),.22);
  --study:#0d9aa7; --study-ink:#08707a; --study-tint:#dcf3f2;
  /* primary buttons (owner, 9 Oct: "White text - why not?"): white on a deeper teal, 4.76:1 (navy on --study was
     3.95, white on it 3.39); hover and pressed a step deeper, the lip deeper still. The same in the dark theme (the
     fill is 3.8:1 against the dark page). --study stays for accents, progress and icons. */
  --study-btn:#0a7f8a; --study-btn-hover:#097883; --study-btn-press:#09737e; --study-btn-lip:#065a62; --on-study-btn:#ffffff;
  --btn-off-edge:#7a8fa8;   /* a disabled button's edge: 3.1:1 on the page, so its shape still reads */
  /* secondary buttons (owner, 9 Oct: in dark mode they were darker than the page, holes not buttons): always a tone
     ABOVE the page and cards, an edge of 3:1 or more against both, the same raised lip as the answer cards */
  --btn-2:#ffffff; --btn-2-hover:#eef5fd; --btn-2-press:#e2edf9; --btn-2-edge:#7a8fa8; --btn-2-lip:#c3d2e3;
  /* a speech bubble's outline: one solid colour, so the tail and the body join without a seam */
  --say-edge:color-mix(in srgb,var(--ink) 24%,var(--surface));
  --blue:#3a9be8; --blue-ink:#1f6fb5; --blue-tint:#e3f0fc;
  --play:#6a4bc4; --play-ink:#5536ad; --play-tint:#eee8fb;
  --pink:#e0559a; --pink-ink:#b8326f; --pink-tint:#fde8f1;
  /* Music (owner, 10 Oct: pink, "cream looks boring", over the 9 Oct brass; tokens.json palette.subjects.music). --music-2
     is the deeper rose partner for gradients; --music-glow and --music-row are the dark part glow and the active row */
  --music:#e0559a; --music-ink:#b8326f; --music-tint:#fde8f1; --music-2:#c84283; --music-2-tint:#fadbea; --music-glow:#fde8f1; --music-row:#fde8f1;
  --gold:#ffc23d; --gold-ink:#8a5d00; --gold-tint:#fff2cc;
  --navy:#15365a; --on-navy:#ffffff; --on-navy-2:#b9cde3;
  --ok:#13804f; --warn-ink:#8a4b00; --warn-bg:#ffe9c2; --bad:#c0362c;
  /* what is free (owner, 13 Oct: one colour, site-wide, so it is obvious what is free): a leaf green, never teal (the brand),
     never pink (Music) and never a done or progress mark. --free is text, ticks and fills; --free-bg is its chip and the
     text on a --free fill. Light: 5.3:1 on its bg, 5.7:1 on the page, 6.0:1 on a card, 5.1:1 on the music tint. */
  --free:#25721a; --free-bg:#e4f6da;
  --code-bg:#0b1626; --code-ink:#e6eef7;
  --shadow:0 1px 2px rgba(21,54,90,.06),0 6px 18px rgba(21,54,90,.07);
  --r1:14px; --r2:18px; --r3:26px; --pill:10px; --chip:4px;   /* no pills (brand/identity/LAYOUT.md, COLOUR.md #13): --pill is a key's 10 px corner now; label chips 0.12 x their height */
  --wrap:1200px;
  --bg:var(--paper); --card:var(--surface); --text:var(--ink); --muted:var(--ink-3); --text-2:var(--ink-2);
  --accent:var(--study); --accent-text:var(--study-ink); --accent2:var(--play); --br:var(--r2);
  --hdr-bg:var(--surface);
  /* motion (docs/research/MOTION_DESIGN_DEVONHOUSE.md, T1 and T5): the house curves, and durations by size and
     importance. Enter with out, leave with in (and faster); spring only on small things that are touched. A list
     staggers 35ms an item, capped at 6 (the rest arrive with the sixth). Reduced motion: the end state at once. */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.55,0,1,.45); --ease-io:cubic-bezier(.45,0,.55,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-soft:cubic-bezier(.3,1.3,.6,1);
  --dur-press:75ms; --dur-hover:175ms; --dur-enter:220ms; --dur-leave:160ms; --dur-panel:300ms;
  --dur-page-out:140ms; --dur-page-in:240ms; --dur-reward:1s; --stagger:35ms; --stagger-max:6;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0b1626; --surface:#12233a; --sunk:#081120;
  --surface-up:#1d3453;   /* 7% lighter than --surface: a card on a --surface band stays a card (owner, 15 Oct: the home's plan cards vanished) */
  --track:#1a2c44;   /* dark: lighter than the page (1.29:1), since a track darker than #0b1626 (sunk, 1.04:1) vanishes */
  --ink:#ffffff; --ink-2:#c8d7e8; --ink-3:#9db3c9;
  --ink-rgb:200,215,232;
  --rule:rgba(157,179,201,.18); --rule-2:rgba(157,179,201,.32);
  --study:#0d9aa7; --study-ink:#2cc6d1; --study-tint:#0f3438;
  --btn-off-edge:#5d7591;   /* 3.8:1 on the dark page */
  --btn-2:#22385a; --btn-2-hover:#2a4368; --btn-2-press:#1b2f4b; --btn-2-edge:#6b829d; --btn-2-lip:#07101c;   /* edge 4.6:1 on the page, 4.0:1 on a card */
  --blue:#5aaff0; --blue-ink:#7cc0f5; --blue-tint:#13304f;
  --play:#8f74e8; --play-ink:#b6a1ff; --play-tint:#241d45;
  /* pink-tint dark: orchid, a cool jewel tone (owner, 18 Oct: no plum or maroon surfaces; #3a1a33 read brown) */
  --pink:#f07ab5; --pink-ink:#f59cc8; --pink-tint:#3a1650;
  /* music-tint dark: the same orchid as --pink-tint (coordinator, 19 Oct 2026: #3a1a33 was the plum the owner flagged);
     --music-ink on it 7.4:1, ink 14.9:1 */
  --music:#f07ab5; --music-ink:#f59cc8; --music-tint:#3a1650; --music-2:#e169a5; --music-2-tint:#4a2242; --music-glow:#5a2a50; --music-row:#3d1d37;
  /* gold-tint / warn-bg dark: a deep wine under the gold ink, never a darkened gold (owner, 14 Oct: "Not poop colour";
     a dark yellow reads brown), redder and lighter than the orchid --music-tint so a gold tile and a pink one side by
     side stay two colours. gold-ink 9.7:1, warn-ink 8.2:1, ink 13.2:1, ink-2 9.0:1, ink-3 6.1:1 on it */
  /* 18 Oct: the wine read maroon on the tools page (owner: no brown or maroon dark surfaces). gold-tint is sapphire now,
     a cool jewel tone that gold ink sits on at 10:1; warn-bg keeps the wine for warnings */
  --gold:#ffc23d; --gold-ink:#ffd877; --gold-tint:#172a5e;
  --navy:#102a44; --on-navy-2:#a9c1da;
  --ok:#3fd59a; --warn-ink:#ffc23d; --warn-bg:#551c2a; --bad:#ff8a80;
  --free:#79dc84; --free-bg:#163a22;   /* dark: 7.5:1 on its bg, 10.7:1 on the page, 9.3:1 on a card, 9.0:1 on the music tint */
  --code-bg:#071020;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
  --accent:var(--study); --accent-text:var(--study-ink);
  --dk-panel:#16304d; --danger:#ff8a80; --warn:#ffc23d;
  color-scheme:dark;
}

/* ---- Base ---- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--f-body)}
body{min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--ink);text-wrap:balance}
/* no orphan lines (owner, 10 Oct: a line never ends with one or two words on it): headings balance, running text is
   pretty (the browser looks ahead so the last line is not a lone word); browsers without it wrap as before */
h4,h5,h6{text-wrap:balance}
p,li,dd,dt,figcaption,blockquote,summary,label,td,th{text-wrap:pretty}
h1{font-size:clamp(28px,4.2vw,40px);margin:0 0 8px}
h2{font-size:clamp(21px,2.4vw,26px);margin:0 0 12px}
h3{font-size:18px;margin:0 0 6px}
p{margin:0 0 12px}
:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
/* Simplified Chinese (/zh/, <html lang="zh-Hans">) and Hindi (/hi/, <html lang="hi">): the site fonts carry no CJK or
   Devanagari glyphs, so Latin keeps them and the script falls back to Noto Sans SC / Noto Sans Devanagari (Google Fonts,
   unicode-range slices, display swap, linked by header.php on those languages only), then the system face.
   Chinese wraps between any two characters; strict line-break keeps ，。：？ off the start of a line; a long Latin run
   (a URL, an email) may break anywhere. Headings get more leading and no negative tracking. No faux italics on Han.
   Devanagari needs taller lines for its matras and the headline bar; text-wrap balance and pretty stay where supported. */
:root:lang(zh){--f-body:"BL Body","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --f-display:"BL Display","BL Body","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif}
:lang(zh) body{line-break:strict;word-break:normal;overflow-wrap:anywhere;font-kerning:none}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3{letter-spacing:0;line-height:1.3;hyphens:manual;-webkit-hyphens:manual}
:lang(zh) p,:lang(zh) li{line-height:1.7}
:lang(zh) em,:lang(zh) i,:lang(zh) cite{font-style:normal}
:lang(zh) em{font-weight:600}
:root:lang(hi){--f-body:"BL Body","Noto Sans Devanagari","Kohinoor Devanagari","Nirmala UI",system-ui,sans-serif;
  --f-display:"BL Display","BL Body","Noto Sans Devanagari","Kohinoor Devanagari","Nirmala UI",system-ui,sans-serif}
:lang(hi) body{line-height:1.6;overflow-wrap:break-word}
:lang(hi) h1,:lang(hi) h2,:lang(hi) h3{letter-spacing:0;line-height:1.35}
:lang(hi) p,:lang(hi) li{line-height:1.75}
:lang(hi) em,:lang(hi) i,:lang(hi) cite{font-style:normal}
:lang(hi) em{font-weight:600}
/* Arabic (/ar/, <html lang="ar" dir="rtl">): Noto Sans Arabic (Google Fonts, /ar/ only), taller lines for the script's
   ascenders and dots, no letter-spacing (it breaks joined letters), no faux italics. Layout follows dir through logical
   properties (margin-inline, inset-inline, text-align:start); maths, code, formulae and music stay left to right. */
:root:lang(ar){--f-body:"BL Body","Noto Sans Arabic","Geeza Pro","Segoe UI",system-ui,sans-serif;
  --f-display:"BL Display","BL Body","Noto Sans Arabic","Geeza Pro","Segoe UI",system-ui,sans-serif}
:lang(ar) body{line-height:1.65}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{letter-spacing:0;line-height:1.4}
:lang(ar) p,:lang(ar) li{line-height:1.8}
:lang(ar) *{letter-spacing:0}
:lang(ar) em,:lang(ar) i,:lang(ar) cite{font-style:normal}
:lang(ar) em{font-weight:600}
[dir="rtl"] :is(code,pre,kbd,samp,var,math,.fml,.mono,.katex,.stave,input[type="number"],input[type="email"],input[type="url"]){direction:ltr;unicode-bidi:isolate}
[dir="rtl"] :is(.ic-dir,.chev,.arrow,.bl-chev,.crumb-sep,.hm-inside-go){scale:-1 1}   /* the individual property: it composes with any transform the icon already has */
[dir="rtl"] .hm-phone{direction:ltr}   /* the home hero's phone plays an English lesson: it stays left to right */
main:focus{outline:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media (min-width:1680px){:root{--wrap:1480px}}
@media (max-width:640px){.wrap{padding:0 16px}}
.muted{color:var(--ink-3)}
.mono,.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Buttons: pill, chunky ---- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--pill);
  font:700 16px/1.1 var(--f-body);border:2px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .15s cubic-bezier(.22,1,.36,1),border-color .15s cubic-bezier(.22,1,.36,1),color .15s cubic-bezier(.22,1,.36,1),transform .1s cubic-bezier(.22,1,.36,1)}
.b:active{transform:scale(.98)}
.b svg{flex:none}
.b-study,:root[data-theme="dark"] .b-study{background:var(--study-btn);color:var(--on-study-btn);box-shadow:none}
.b-study:hover{background:var(--study-btn-hover)}
.b-study:active{background:var(--study-btn-press)}
.b-play{background:var(--play);color:#fff;box-shadow:none}
.b-play:hover{background:#5d3fb5}
:root[data-theme="dark"] .b-play{color:#120c24;box-shadow:none}
.b-quiet{background:var(--btn-2);color:var(--ink);border-color:var(--btn-2-edge);box-shadow:none}
.b-quiet:hover{background:var(--btn-2-hover);border-color:var(--btn-2-edge)}
.b-quiet:active{background:var(--btn-2-press)}
.b-text{background:none;border:0;padding:0;min-height:0;color:var(--study-ink);font-weight:700;box-shadow:none}
.b-text:hover{text-decoration:underline;text-underline-offset:3px}
.b-lg{min-height:54px;padding:0 28px;font-size:17px}
.b-sm{min-height:44px;padding:0 14px;font-size:14px}   /* 44 px to every pointer, a mouse too (coordinator, 15 Oct; was 38, 44 on touch only) */
/* a long label (a German one, say) wraps to two balanced lines on a phone instead of running out of its button; a word
   never splits (owner, 9 Oct). .nw keeps a short run (a URL's last part) on one line. */
@media (max-width:520px){.b{white-space:normal;text-wrap:balance;text-align:center;line-height:1.2;padding-top:8px;padding-bottom:8px}}
.nw{white-space:nowrap}
/* powers everywhere on the site, as the Learn player draws them (learn.css; owner, 12 Oct: "you can barely see the 8"):
   72% of the text, never under 12 px, raised about a third of an em, line-height 0 so a line never jumps */
sup,sub,.lx-s{font-size:max(.72em,12px);line-height:0;position:relative;vertical-align:baseline}
sup{top:-.48em}
sub{top:.26em}
@media (prefers-reduced-motion:reduce){.b:active{transform:none}}
button.cta,.btn.primary{background:var(--study-btn);color:var(--on-study-btn);font-weight:700;border:none;border-radius:var(--pill);padding:12px 20px;cursor:pointer}

/* ---- Text links ---- */
.tlink{color:var(--study-ink);font-weight:700}
.tlink:hover{text-decoration:underline;text-underline-offset:3px}
.prose a,.lnk{color:var(--blue-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---- Section head ---- */
.shead{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 16px}
.shead h2{margin:0}
.shead .sub{color:var(--ink-3);font-size:15px;margin:4px 0 0;flex-basis:100%}
.shead a.more{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:var(--pill);background:var(--blue-tint);color:var(--blue-ink);font-weight:700;font-size:15px}
.shead a.more:hover{background:var(--blue);color:#fff}

/* ---- Tile lists (replaces hairline-ruled rows): rounded white tiles with a tinted icon tile ---- */
.rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rows > li{margin:0}
.rows a.row{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;min-height:68px;color:var(--ink);background:var(--surface);
  border-radius:var(--r2);box-shadow:var(--shadow);border:2px solid transparent;transition:border-color .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1)}
.rows a.row:hover{border-color:var(--blue)}
/* the icon tile owns its size and shape (19 Oct): a fixed 46 px rounded square, never sized by the card, a hub tile or a
   section around it, and the drawing a fixed 24 px in its middle, never a percentage or auto */
.row .ri{flex:none;box-sizing:border-box;width:46px;height:46px;min-width:0;padding:0;display:grid;place-items:center;border-radius:14px;overflow:hidden;background:var(--blue-tint);color:var(--blue-ink)}
.row .ri > svg{display:block;flex:none;width:24px;height:24px;max-width:none;max-height:none;margin:0}   /* 24 px in the 46 px tile (owner, 19 Oct: bolder, clearer) */
.row[data-tone="teal"] .ri{background:var(--study-tint);color:var(--study-ink)}
.row[data-tone="violet"] .ri{background:var(--play-tint);color:var(--play-ink)}
.row[data-tone="pink"] .ri{background:var(--pink-tint);color:var(--pink-ink)}
.row[data-tone="gold"] .ri{background:var(--gold-tint);color:var(--gold-ink)}
/* dark: the icon tile is the bright tone with a navy glyph (8:1 or more), so a gold or pink group still reads warm
   without a dark warm surface (owner, 18 Oct) */
:root[data-theme="dark"] .row .ri{background:var(--blue-ink);color:#0b1626}
:root[data-theme="dark"] .row[data-tone="teal"] .ri{background:var(--study-ink)}
:root[data-theme="dark"] .row[data-tone="violet"] .ri{background:var(--play-ink)}
:root[data-theme="dark"] .row[data-tone="pink"] .ri{background:var(--pink-ink)}
:root[data-theme="dark"] .row[data-tone="gold"] .ri{background:var(--gold)}
.row .rb{min-width:0;flex:1}
.row .rt{display:block;font-weight:700;font-size:16.5px;line-height:1.3}
.row .rd{display:block;color:var(--ink-3);font-size:14.5px;line-height:1.4;margin-top:2px}
.row .rx{flex:none;color:var(--ink-3);font-size:14px;font-variant-numeric:tabular-nums}

/* ---- Game tiles: a white bubble with the art inside ---- */
.tiles{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
@media (max-width:700px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.tile{display:block;min-width:0;color:var(--ink);background:var(--surface);border-radius:var(--r2);padding:8px 8px 12px;box-shadow:var(--shadow);
  border:2px solid transparent;transition:border-color .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1)}
.tile:hover{border-color:var(--play);transform:translateY(-2px)}
.tile .ti{display:block;position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--sunk)}
.tile .ti img{display:block;width:100%;height:100%;object-fit:cover}
.tile .tt{display:block;font:600 17px/1.25 var(--f-display);margin:10px 6px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .tl{display:block;color:var(--ink-2);font-size:14.5px;line-height:1.35;margin:3px 6px 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tile .tm{display:block;color:var(--ink-3);font-size:13.5px;margin:5px 6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile:focus-visible{outline-offset:3px}
@media (max-width:700px){.tile{padding:6px 6px 10px}.tile .tt{font-size:15.5px;margin:8px 4px 0}.tile .tl{font-size:13.5px;margin:2px 4px 0}.tile .tm{font-size:12.5px;margin:4px 4px 0}}
@media (prefers-reduced-motion:reduce){.tile:hover{transform:none}}
.mk{position:absolute;inset-inline-start:8px;top:8px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:var(--chip);
  background:#ffe9c2;color:#6a3a00;font-size:12px;font-weight:700;line-height:1.2;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mk svg{flex:none}
.mk-desk{inset-inline-start:auto;inset-inline-end:8px;top:auto;bottom:8px;display:none;background:var(--navy);color:#fff}
@media (max-width:820px) and (pointer:coarse){.mk-desk{display:inline-flex}}

/* ---- Lens chips (game filters): coloured pills ---- */
.lenses{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0;padding:2px 2px 6px}
.lenses::-webkit-scrollbar{display:none}
.lenses a,.lenses .lens-more{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;font:700 15px/1 var(--f-body);color:var(--ink-2);
  background:var(--surface);border:2px solid var(--rule);border-radius:var(--pill);white-space:nowrap;cursor:pointer}
.lenses a:hover,.lenses .lens-more:hover{border-color:var(--blue)}
.lenses a[data-c="study"]{--c:var(--study);--ct:var(--study-tint);--ci:var(--study-ink)}
.lenses a[data-c="blue"]{--c:var(--blue);--ct:var(--blue-tint);--ci:var(--blue-ink)}
.lenses a[data-c="violet"]{--c:var(--play);--ct:var(--play-tint);--ci:var(--play-ink)}
.lenses a[data-c="pink"]{--c:var(--pink);--ct:var(--pink-tint);--ci:var(--pink-ink)}
.lenses a[data-c="gold"]{--c:var(--gold);--ct:var(--gold-tint);--ci:var(--gold-ink)}
.lenses a[data-c]{background:var(--ct);border-color:transparent;color:var(--ci)}
.lenses a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.lenses a[data-c][aria-current="page"]{background:var(--c);border-color:var(--c);color:#fff}
:root[data-theme="dark"] .lenses a[aria-current="page"]{background:#fff;color:#0b1626;border-color:#fff}
:root[data-theme="dark"] .lenses a[data-c][aria-current="page"]{color:#0b1626}

/* ---- Switch ---- */
.sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink-2);min-height:44px;user-select:none}
.sw input{appearance:none;-webkit-appearance:none;margin:0;width:44px;height:26px;border-radius:13px;background:var(--rule-2);position:relative;cursor:pointer;flex:none;transition:background-color .15s cubic-bezier(.22,1,.36,1)}
.sw input::after{content:"";position:absolute;inset-inline-start:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s cubic-bezier(.22,1,.36,1)}
.sw input:checked{background:var(--study)}
.sw input:checked::after{transform:translateX(18px)}
.sw input:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}

/* ---- Content label (game page) ---- */
.clabel{display:inline-flex;align-items:flex-start;gap:8px;font-size:15px;color:var(--ink-2);margin:10px 0 0;padding:8px 14px;border-radius:var(--r1);background:var(--blue-tint)}
.clabel.mature{background:var(--warn-bg)}
.clabel svg{flex:none;margin-top:3px}
.clabel b{color:var(--ink)}
.clabel.mature b{color:var(--warn-ink)}
.clabel a{color:var(--blue-ink);font-weight:700;white-space:nowrap}

.note{background:var(--blue-tint);padding:12px 16px;border-radius:var(--r1);color:var(--ink-2);font-size:15px}

/* ---- Breadcrumbs ---- */
.crumbs{font-size:14px;color:var(--ink-3);margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--blue-ink);text-decoration:underline}
.crumbs .sep{opacity:.6}
@media (pointer:coarse){.crumbs{gap:0 6px}.crumbs a{display:inline-flex;align-items:center;min-height:40px}}

/* ---- Related links: soft chips ---- */
.related{margin:28px 0 0}
.related h2{font-size:19px;margin:0 0 10px}
/* Related guides and games under a tool: plain links with a small icon, not pills. */
.related ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0 26px}
.related a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--blue-ink);font-weight:700;font-size:15.5px}
.related a svg{flex:none;color:var(--ink-3)}
.related a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Forms ---- */
/* Typed numbers use proportional digits. Onest's tabular figures are all 672 units wide (its "1" is 363),
   so tabular-nums in a field made "123123123" read as "1 2 3 1 2 3". Keep tabular-nums for aligned columns
   and ticking timers only. */
input,textarea,select,output{font-variant-numeric:normal;font-feature-settings:normal;letter-spacing:normal}
/* Form controls take the page's font (browsers give them a system font of their own). Line height stays the
   browser's on one-line controls, so no button grows taller than it was. */
button,input,select,textarea{font:inherit}
button,input,select{line-height:normal}
/* Every select: no native arrow, one chevron (12 x 8, 2 px stroke, the text colour), 16 px from the right edge, and
   room for it so long text never runs underneath. !important because components set the background shorthand. */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315365a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 16px center!important;background-size:12px 8px!important;
  padding-inline-end:44px!important;text-overflow:ellipsis}
/* right to left (ar): the chevron sits at the inline end too, where the padding already leaves room for it */
[dir="rtl"] select:not([multiple]):not([size]){background-position:left 16px center!important}
:root[data-theme="dark"] select:not([multiple]):not([size]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c8d7e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
select::-ms-expand{display:none}
select:focus-visible{outline:2px solid var(--study-ink)!important;outline-offset:2px}
select:disabled{opacity:.55;cursor:not-allowed}
.input,.select{background:var(--surface);border:2px solid var(--rule-2);border-radius:var(--r1);padding:11px 14px;color:var(--ink);font:inherit;outline:none}
.input:focus,.select:focus{border-color:var(--blue)}

/* ---- Segmented control: the one style for tab pairs and option switches (account sign-in tabs,
   theme picker in the phone menu and on the account page, calculator modes). A soft track, no outline,
   and the chosen option filled with the study colour in both themes. ---- */
:root{--seg-track:var(--sunk)}
:root[data-theme="dark"]{--seg-track:rgba(157,179,201,.12)}
.segc{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;margin:0;border:0;border-radius:12px;background:var(--seg-track)}
.segc > button{min-height:44px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--ink-2);
  font:700 15px/1.15 var(--f-body);cursor:pointer;box-shadow:none;-webkit-tap-highlight-color:transparent}
.segc > button:hover{color:var(--ink);background:rgba(var(--ink-rgb),.07)}
.segc > button[aria-selected="true"],.segc > button[aria-checked="true"],.segc > button[aria-pressed="true"]{background:var(--study-btn);color:var(--on-study-btn)}
:root[data-theme="dark"] .segc > button[aria-selected="true"],:root[data-theme="dark"] .segc > button[aria-checked="true"],:root[data-theme="dark"] .segc > button[aria-pressed="true"]{color:var(--on-study-btn)}   /* white on --study-btn, 4.76:1 (dark text was 3.88:1) */
.segc > button:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.segc.many{display:flex;flex-wrap:wrap;border-radius:12px}
.segc.many > button{flex:1 1 auto;border-radius:9px}
@media (pointer:coarse){.segc > button{min-height:44px}}
@media (prefers-reduced-motion:reduce){.segc > button{transition:none}}

/* ---- Legacy card ---- */
.grid{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--surface);border-radius:var(--r2);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.thumb{aspect-ratio:16/9;overflow:hidden;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.content{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.gtitle{font-weight:700;font-size:16px}
.desc{color:var(--ink-3);font-size:14px}
.chip{padding:6px 12px;border-radius:var(--chip);background:var(--blue-tint);font-size:14px}
footer{color:var(--ink-3)}
:root[data-theme="dark"] .fc-back{background:#1b2f4b}
:root[data-theme="dark"] .ntoast button{color:#08707a}
:root[data-theme="dark"] .reveal-card{background:#1b2f4b}
:root[data-theme="dark"] .prose p{color:var(--ink-2)}
:root[data-theme="dark"] #editor mark{color:#15365a}

/* ---- Guide covers (home shelf + guides index) ---- */
.gshelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.gshelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gshelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin:0 -16px;padding-inline-start:16px;scrollbar-width:none}
  .gshelf::-webkit-scrollbar{display:none}.gshelf .gcov{flex:0 0 76%;scroll-snap-align:start}}
.gcov{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r2);padding:8px 8px 16px;box-shadow:var(--shadow);color:var(--ink);
  border:2px solid transparent;transition:border-color .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1)}
.gcov:hover{border-color:var(--blue);transform:translateY(-2px)}
.gcov .gc-art{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;height:132px;border-radius:12px;background:var(--blue-tint);overflow:hidden;padding:0 14px}
.gcov .gc-art img{width:104px;height:auto;margin-bottom:-6px}
.gcov .gc-art.is-hero{height:auto;aspect-ratio:8/5;padding:0}
.gcov .gc-art.is-hero img{width:100%;height:100%;object-fit:cover;margin:0}
.gcov[data-tone="teal"] .gc-art{background:var(--study-tint)}
.gcov[data-tone="violet"] .gc-art{background:var(--play-tint)}
.gcov[data-tone="pink"] .gc-art{background:var(--pink-tint)}
.gcov[data-tone="gold"] .gc-art{background:var(--gold-tint)}
.gcov .gc-min{position:absolute;inset-inline-start:12px;top:12px;background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:var(--chip)}
.gcov .gc-t{display:block;font:600 18px/1.25 var(--f-display);margin:12px 8px 0}
.gcov .gc-l{display:block;color:var(--ink-3);font-size:14.5px;line-height:1.45;margin:6px 8px 0}
@media (prefers-reduced-motion:reduce){.gcov:hover{transform:none}}

/* ---- Ad slots (components/ad-slots.php): reserved IAB sizes, house promo until a zone code is set ---- */
.adslot{display:flex;flex-direction:column;align-items:center;margin:0 auto;width:100%;max-width:100%;min-width:0}
.adslot .adl{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-3);margin:0 0 4px}
.adslot .adbox{position:relative;width:var(--aw);height:var(--ah);max-width:100%;border-radius:12px;overflow:hidden;background:var(--sunk);contain:strict}
.ad-leader{--aw:320px;--ah:100px}
@media (min-width:760px){.ad-leader{--aw:728px;--ah:90px}}
@media (min-width:1100px){.ad-leader{--aw:970px;--ah:90px}}
.ad-rect{--aw:300px;--ah:250px}
/* A house promo is ours, not a fixed-size ad: it spans its column so it lines up with the content. */
.adslot[data-ad-state="house"].ad-leader .adbox{width:100%}
.ad-sky{--aw:160px;--ah:600px}
.ad-tall{--aw:300px;--ah:250px}
@media (min-width:1100px){.ad-tall{--aw:300px;--ah:600px}}
.house{display:flex;align-items:center;gap:14px;width:100%;height:100%;padding:10px 18px;color:#fff;text-decoration:none;background:var(--navy)}
.house > span:first-child{min-width:0}
.house .hm{display:block;font:600 12.5px/1 var(--f-mono);color:#7ad7de;margin-bottom:4px}
.house b{font:600 18px/1.15 var(--f-display);display:block}
.house span.hs{font-size:13.5px;color:#c7d8ea;display:block;line-height:1.3;margin-top:2px}
.house .hb{margin-inline-start:auto;flex:none;background:var(--gold);color:#3a2700;font-weight:700;font-size:14px;border-radius:var(--pill);padding:8px 16px}
.house.study{background:#08707a}   /* --study-ink: white 5.8:1 and the #e3fbfb line 5.4:1 (on #0d9aa7 they were 3.4 and 3.1; mobile UX sweep T-15) */
.house.study .hm{color:#e3fbfb;font-family:var(--f-body);font-variant-numeric:tabular-nums}
.house.study span.hs{color:#e3fbfb}
.house.tall{flex-direction:column;justify-content:center;text-align:center;padding:20px 16px;gap:16px}
.house.tall .hb{margin:0}
.house.tall b{font-size:22px}
.ad-leader:not(.x) .house span.hs{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:759px){.ad-leader .house{padding:8px 12px;gap:10px}.ad-leader .house b{font-size:16px}.ad-leader .house span.hs{font-size:12.5px}.ad-leader .house .hb{padding:6px 12px;font-size:13px}}
:root[data-theme="dark"] .house{background:#13304f}
:root[data-theme="dark"] .house.study{background:#0b7680}

/* ---- Play page (dark immersive variant kept for compatibility) ---- */
body.theme-dark{--paper:#0b1626;--surface:#12233a;--ink:#fff;--ink-3:#9db3c9;background:var(--paper);color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Touch: tapping or long-pressing a control never selects text or opens the iOS callout. Results, working, notes and
   every input stay selectable, so answers can still be copied. Tools add their own surfaces with [data-press]. */
button,.btn,.segc,[role="tab"],[role="radio"],[role="button"],[role="switch"],summary,.sw,canvas,label:has(> input[type="checkbox"]),label:has(> input[type="radio"]),
.blk-key,.blk-tile,.fc-card,.fp-learn-card,.pt-cell,.tt-kb,.tt-keyline,.evblock,.gc-dot,.simtile,[data-press]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a,button,.btn,label,summary,canvas,[role="tab"],[role="radio"],[role="button"],[data-press]{-webkit-tap-highlight-color:transparent}
input,textarea,select,[contenteditable="true"],[contenteditable=""]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* Keyboard-shortcut hints are noise on a touch-only device. tools/_shell.php sets html.bl-touch when the device has
   no hover and a coarse pointer, and takes it off again the first time a hardware keyboard is used (an iPad with a
   keyboard keeps its hints). Mark a hint with .kbd-only; .kbd key caps and .kbd-row/.kbd-hint lines go too. */
html.bl-touch .kbd-only,html.bl-touch .kbd,html.bl-touch .kbd-row,html.bl-touch .kbd-hint{display:none!important}
/* Game music switch (includes/components/game-audio.php, assets/js/bl-audio.js): printed only when a game has a track. */
.bl-music[aria-pressed="true"]{border-color:var(--study);color:var(--study-ink)}

/* Coming up: signed-in homepage and account page (includes/components/coming-up.php). A plain list, no cards. */
.cu{margin:28px 0 40px;max-width:780px}
.cu h2{font-size:20px;margin:0 0 8px}
.cu-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cu-list a{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.cu-list a:hover .cu-what{text-decoration:underline;text-underline-offset:3px}
.cu-when{font-weight:700;color:var(--ink-2);font-size:15px;font-variant-numeric:tabular-nums}
.cu-when small,.cu-what small{display:block;font-weight:500;color:var(--ink-3);font-size:13.5px;margin-top:1px}
.cu-what{font-weight:600;font-size:16px}
.cu-kind{color:var(--ink-3);font-size:13.5px;font-weight:600;text-align:end}
.cu-list li.od .cu-when,.cu-list li.od .cu-kind{color:var(--bad)}
.cu.cu-acc{max-width:none;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule);text-align:start}
.cu.cu-acc h2{font-size:18px}
.cu.cu-acc .cu-list{border-top:0}
.cu.cu-acc .cu-list li:last-child a{border-bottom:0}
@media (max-width:520px){.cu-list a{grid-template-columns:6.2em minmax(0,1fr)}.cu-kind{grid-column:2;text-align:start}}

/* ---- Courses page (includes/courses.php): hero, level control, course cards with covers, how courses work ----
   Each card takes its subject's colour from the role tokens (--c base, --ci ink, --ct tint), so the cover art and
   markers follow the light and dark themes; the Code tracks keep their own colours (brand/identity/tokens.json). */
.cs{padding-top:28px;padding-bottom:40px}
.cs-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cs-hero h1{margin:0 0 10px;font-weight:600}
.cs .lead{font-size:19px;color:var(--ink-2);max-width:62ch;margin:0;line-height:1.55}
.cs .cs-note{color:var(--ink-3);font-size:15px;margin:10px 0 0;max-width:70ch}
.cs-hero-nd{flex:none;width:120px;height:auto;margin-bottom:-6px}
@media (max-width:640px){.cs-hero-nd{display:none}}
.cs-lvnav{display:flex;gap:4px;margin:26px 0 0;padding:4px;background:var(--sunk);border-radius:14px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.cs-lvnav::-webkit-scrollbar{display:none}
.cs-lvnav a{flex:none;padding:9px 16px;border-radius:10px;color:var(--ink-2);font-weight:700;font-size:15px;line-height:1.2;transition:background-color .15s cubic-bezier(.22,1,.36,1),color .15s cubic-bezier(.22,1,.36,1)}
.cs-lvnav a:hover{color:var(--ink)}
.cs-lvnav a[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
@media (max-width:600px){.cs-lvnav{width:100%}.cs-lvnav a{flex:1 0 auto;text-align:center;padding:9px 10px}}
.cs-sec{scroll-margin-top:84px}
.cs-sec[hidden]{display:none}
.cs h2{margin:44px 0 6px}
.cs .sec-p{color:var(--ink-2);max-width:70ch;margin:0;line-height:1.55}
.cs a.tl{color:var(--study-ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cs-more{margin:18px 0 0}
.cs-ucas{margin:18px 0 0;color:var(--ink-2);max-width:70ch;line-height:1.55}
.cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.cs-grid.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.cs-grid.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cs-grid,.cs-grid.is-4{grid-template-columns:1fr}}
.crs{--c:var(--blue);--ci:var(--blue-ink);--ct:var(--blue-tint);display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r2);padding:8px;
  box-shadow:var(--shadow);color:var(--ink);border:2px solid transparent;transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .15s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1)}
a.crs:hover{transform:translateY(-3px);border-color:var(--c);box-shadow:0 2px 4px rgba(21,54,90,.07),0 12px 26px rgba(21,54,90,.11)}
a.crs:active{transform:translateY(-1px);box-shadow:var(--shadow);transition-duration:.09s}
a.crs:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.crs.is-soon{background:transparent;box-shadow:none;border-color:var(--rule-2)}
.crs[data-s="science"]{--c:var(--study);--ci:var(--study-ink);--ct:var(--study-tint)}
.crs[data-s="cs"]{--c:var(--play);--ci:var(--play-ink);--ct:var(--play-tint)}
.crs[data-s="music"]{--c:var(--music);--ci:var(--music-ink);--ct:var(--music-tint)}
.crs[data-s="python"]{--c:#ffc83d;--ci:#7f5b00;--ct:#f6efd4}   /* the thumbnail's pastel (course-thumbs.cjs, 19 Oct) */
.crs[data-s="web"]{--c:#ff7a3d;--ci:#a8420f;--ct:#fdd9c4}
.crs[data-s="sql"]{--c:#3a9be8;--ci:#1b65a6;--ct:#cfe3f4}
.crs[data-s="c"]{--c:#f0567e;--ci:#b8204b;--ct:#f9d3db}
:root[data-theme="dark"] .crs[data-s="python"]{--ci:#ffcf5c;--ct:#1c2159}   /* deep indigo, not a darkened yellow (14 Oct): ink 10.2:1 */
:root[data-theme="dark"] .crs[data-s="web"]{--ci:#ff9a66;--ct:#3a1620}      /* deep wine, not a darkened orange: ink 7.7:1 */
:root[data-theme="dark"] .crs[data-s="sql"]{--ci:#74b9f2;--ct:#13304f}
:root[data-theme="dark"] .crs[data-s="c"]{--ci:#ff819f;--ct:#2e1726}
:root[data-theme="dark"] a.crs:hover{box-shadow:0 12px 26px rgba(0,0,0,.35)}
/* the thumbnail (brand/mascot/course-thumbs.cjs): a 400 x 250 scene per course, light and dark; the box keeps its
   ratio so nothing shifts while it loads */
.crs-cov{position:relative;display:block;aspect-ratio:8/5;border-radius:12px;background:var(--ct);overflow:hidden}
.crs-th{display:block;width:100%;height:100%}
.crs-th.th-dark,:root[data-theme="dark"] .crs-th.th-light{display:none}
:root[data-theme="dark"] .crs-th.th-dark{display:block}
.crs-art{position:absolute;inset-inline-end:8px;top:5px;width:calc(100% - 96px);max-width:230px;height:140px}
.crs-art .l{fill:none;stroke:var(--ci);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.crs-art .g{fill:none;stroke:var(--ci);stroke-width:2;stroke-linecap:round;opacity:.3}
.crs-art .a{fill:none;stroke:var(--c);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.crs-art .f{fill:var(--c)}
.crs-art .s{stroke:var(--ci);stroke-width:2.5}
.crs-art .p{fill:var(--surface)}
.crs-art .k{fill:var(--ci)}
.crs-art .t{fill:var(--ci);font:700 19px/1 var(--f-body)}
.crs-art .t.big{font:700 38px/1 var(--f-mono)}
.crs-b{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 10px 8px}
.crs-t{font:600 19px/1.25 var(--f-display)}
.crs-d{color:var(--ink-2);font-size:15.5px;line-height:1.5}
.crs-n{color:var(--ink);font-size:14.5px;font-weight:700}
.crs-mk{display:flex;flex-wrap:wrap;gap:4px 16px;margin:2px 0 10px;color:var(--ink-3);font-size:14px}
.crs-mk span{display:inline-flex;align-items:center;gap:5px}
.crs-mk svg{width:16px;height:16px;fill:none;stroke:var(--ci);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.crs-go{margin-top:auto;align-self:flex-start;background:var(--study-btn);color:var(--on-study-btn);font-weight:700;font-size:15.5px;line-height:1.2;padding:10px 16px;border-radius:12px;transition:background-color .15s cubic-bezier(.22,1,.36,1)}
a.crs:hover .crs-go{background:var(--study-btn-hover)}
.crs-soon{margin-top:auto;color:var(--ink-3);font-weight:700;font-size:15px;line-height:1.2;padding:10px 0}
.cs-how{margin-top:56px;padding:36px 0;background:var(--sunk);border-radius:0;box-shadow:0 0 0 100vmax var(--sunk);clip-path:inset(0 -100vmax)}   /* a square full-bleed band (owner, 10 Oct) */
.cs-how h2{margin:0 0 18px}
.cs-how ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:900px){.cs-how ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cs-how{padding:26px 0}.cs-how ul{grid-template-columns:1fr;gap:18px}}
.cs-how li{display:flex;flex-direction:column;gap:4px}
.cs-how li svg{width:26px;height:26px;margin-bottom:4px;fill:none;stroke:var(--study-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cs-how li span{color:var(--ink-2);font-size:15.5px;line-height:1.5}
/* the steps as a picture (owner, 12 Oct): icons in tinted circles, joined by a line, the name under each. Scoped to
   .cs-how: Learn's computer science questions have their own .cs-steps (a numbered list, cs.css) that this used to
   turn into a 4-column picture with no numbers */
.cs-how .cs-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:st}
.cs-how .cs-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font:650 15px/1.25 var(--f-display)}
.cs-how .cs-steps li+li::before{content:"";position:absolute;top:28px;right:calc(50% + 34px);width:calc(100% - 60px);height:2px;background:var(--rule-2)}
.cs-step-i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surface);box-shadow:none}
.cs-step-i svg{width:28px;height:28px;fill:none;stroke:var(--study-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){html:not([data-motion="off"]) .cs-step-i{animation:csStep .4s cubic-bezier(.22,1,.36,1) both}html:not([data-motion="off"]) .cs-how .cs-steps li:nth-child(2) .cs-step-i{animation-delay:.08s}html:not([data-motion="off"]) .cs-how .cs-steps li:nth-child(3) .cs-step-i{animation-delay:.16s}html:not([data-motion="off"]) .cs-how .cs-steps li:nth-child(4) .cs-step-i{animation-delay:.24s}@keyframes csStep{from{transform:scale(.6);opacity:0}}}
.cs-howf ul{grid-template-columns:1fr!important;gap:14px!important}
.cs-fold>.bl-fold-s h2{margin:0}
.cs-fold{border-bottom:1px solid var(--rule)}
.cs-onward{display:flex;flex-wrap:wrap;gap:10px 28px;margin:24px 0 0}
@media (prefers-reduced-motion:reduce){.crs,.crs-go,.cs-lvnav a{transition:none}a.crs:hover,a.crs:active{transform:none}}

/* motion: the list stagger (T8, T10). Give a list .bl-stagger and its items arrive 35ms apart, capped at the sixth;
   transform and opacity only, content visible at rest, nothing under reduced motion */
@keyframes bl-stag-in{from{opacity:0;transform:translateY(6px)}}
.bl-stagger>*{animation:bl-stag-in var(--dur-enter) var(--ease-out) both}
.bl-stagger>:nth-child(2){animation-delay:calc(var(--stagger)*1)}.bl-stagger>:nth-child(3){animation-delay:calc(var(--stagger)*2)}
.bl-stagger>:nth-child(4){animation-delay:calc(var(--stagger)*3)}.bl-stagger>:nth-child(5){animation-delay:calc(var(--stagger)*4)}
.bl-stagger>:nth-child(n+6){animation-delay:calc(var(--stagger)*5)}
@media (prefers-reduced-motion:reduce){.bl-stagger>*{animation:none}}
:root[data-motion=off] .bl-stagger>*{animation:none}

/* Focus ring on lipped (3D) buttons (owner, 9 Oct: "the shadow is part of the button too"). An outline can only
   circle the face, so the lip hung below the ring. The ring is a pseudo-element that wraps the face and the lip:
   --lip is the lip's height (0 while pressed, when the lip collapses), --ring-r the ring's corner (the face's radius
   plus the 5 px gap), --ring its colour (study ink: 5.5:1 on the light page, 9:1 on the dark; Highlight in forced
   colours). .ibtn uses ::before: its ::after is the tooltip. */
:where(.lp-btn,.lq-tile,.lp-key,.plc-save,.plc-btn,.lr-go,.cp-go,.pm a.pm-cta,.pm-mini a.pm-cta,.b.spk-cta,.fp-th-b,.ct-big,.mt-key,.pr-btn.primary,
  .blm .blm-yes,.b-study,.b-play,.codeband .b-code,.ibtn.play,.keys button.eq,.deck-bar .btn,.btn.primary):focus-visible{position:relative}
:is(.lp-btn,.lq-tile,.lp-key,.plc-save,.plc-btn,.lr-go,.cp-go,.pm a.pm-cta,.pm-mini a.pm-cta,.b.spk-cta,.fp-th-b,.ct-big,.mt-key,.pr-btn.primary,
  .blm .blm-yes,.b-study,.b-play,.codeband .b-code,.ibtn.play,.keys button.eq,.deck-bar .btn,.btn.primary):focus-visible{outline:none}
:is(.lp-btn,.lq-tile,.lp-key,.plc-save,.plc-btn,.lr-go,.cp-go,.pm a.pm-cta,.pm-mini a.pm-cta,.b.spk-cta,.fp-th-b,.ct-big,.mt-key,.pr-btn.primary,
  .blm .blm-yes,.b-study,.b-play,.codeband .b-code,.keys button.eq,.deck-bar .btn,.btn.primary):focus-visible::after,
.ibtn.play:focus-visible::before{content:"";position:absolute;inset:-5px -5px calc(-5px - var(--lip,4px)) -5px;border:3px solid var(--ring,var(--study-ink));
  border-radius:var(--ring-r,inherit);pointer-events:none;z-index:1}
.lp-btn,.lq-tile,.plc-save,.plc-btn,.lr-go,.cp-go,.pm a.pm-cta,.pm-mini a.pm-cta,.mt-key{--lip:4px}
.lp-key,.b-study,.b-play,.codeband .b-code,.b.spk-cta,.pr-btn.primary,.blm .blm-yes,.keys button.eq,.deck-bar .btn,.btn.primary{--lip:3px}
.ct-big,.ibtn.play{--lip:5px}
.fp-th-b{--lip:4px;--ring-r:27px}
.lp-btn,.lq-tile,.pm a.pm-cta,.pm-mini a.pm-cta{--ring-r:21px}
.plc-save,.plc-btn,.lr-go,.cp-go,.mt-key,.b.spk-cta{--ring-r:19px}
.lp-key{--ring-r:17px}
.blm .blm-yes,.btn.primary,.b-study,.b-play,.codeband .b-code{--ring-r:999px}
.lp-btn.danger{--ring:var(--ln-leave,#c0362c)}
.pm a.pm-cta,.pm-mini a.pm-cta{--ring:#fff}
:is(.lp-btn,.lq-tile,.lp-key,.plc-save,.plc-btn,.lr-go,.cp-go,.pm-cta,.spk-cta,.fp-th-b,.mt-key,.pr-btn,.blm-yes,.b-study,.b-play,.b-code,.keys button,.deck-bar .btn,.btn.primary):active{--lip:0px}
.ct-big:active,.ibtn.play:active{--lip:2px}
@media (forced-colors:active){
  :is(.lp-btn,.lq-tile,.lp-key,.plc-save,.plc-btn,.lr-go,.cp-go,.pm-cta,.spk-cta,.fp-th-b,.ct-big,.mt-key,.pr-btn,.blm-yes,.b-study,.b-play,.b-code,.keys button,.deck-bar .btn,.btn.primary):focus-visible::after,
  .ibtn.play:focus-visible::before{border-color:Highlight}
}

/* ---- Motion (shared; owner, 11 Oct: "Find areas on the website to also improve the motion like the homepage"). The
   homepage's language for every page, from the same tokens (docs/plans/HOMEPAGE_REDESIGN.md, Motion rules): one
   easing with no bounce, 180 and 320 ms, 8 / 12 / 16 px, a lean of 6 degrees at most; transform and opacity only, so
   nothing moves the layout (CLS 0); nothing loops; reduced motion turns it all off. assets/js/bl-mo-cards.js picks the
   cards and blocks (one selector list) and sets .is-mo-in, --mo-i and the lean's --mx / --my. */
:root{--m-ease:cubic-bezier(.22,1,.36,1);--m-t1:180ms;--m-t2:320ms;--m-step:60ms;--m-d1:8px;--m-d2:12px;--m-d3:16px;--m-tilt:6deg;--m-enter:200ms;--m-enter-step:40ms;--m-enter-d:12px}
@media (pointer:coarse){:root{--m-enter-d:8px}}
/* entrances: drawn complete at rest; a block that was below the fold rises 12 px and fades in as it arrives, its row
   neighbours a step later */
/* Fast scrollers (owner, 11 Oct: "Consider fast scrollers on mobile"): an entrance is short (--m-enter, 200 ms, row
   neighbours 40 ms apart, at most 3 steps), starts 200 px before the block is on screen, rises 8 px on touch screens,
   and is skipped (the block is simply there) when the page is moving fast or more than 3 blocks arrive at once. */
.is-mo-in{animation:bl-mo-in var(--m-enter) var(--m-ease) both;animation-delay:calc(var(--mo-i,0) * var(--m-enter-step))}
@keyframes bl-mo-in{from{opacity:0;translate:0 var(--m-enter-d)}}
/* empty states arrive the same way whenever they are shown */
:is(.bt-empty,.cp-empty,.fc-empty,.lib-empty,.my-empty,.pp-empty,.mk-empty,.lr-empty-t):not([hidden]){animation:bl-mo-in var(--m-t2) var(--m-ease) both}
/* cards: one hover timing everywhere; with a mouse, on wide screens, a card leans toward the pointer and lifts */
:is(a.crs,a.tile,a.gk,a.rv-link,.pl-card,.acd-card){transition:transform var(--m-t2) var(--m-ease),box-shadow var(--m-t2) var(--m-ease),border-color var(--m-t1) var(--m-ease)}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  [data-mo-tilt]{transform:perspective(900px) rotateX(calc(var(--my,0) * -3deg)) rotateY(calc(var(--mx,0) * var(--m-tilt))) translateY(var(--mo-lift,0px))}
  [data-mo-tilt]:hover{--mo-lift:-3px}
  [data-mo-tilt].is-mo-tilt{transition:transform 90ms linear,box-shadow var(--m-t2) var(--m-ease),border-color var(--m-t1) var(--m-ease)}
}
@media (prefers-reduced-motion:reduce){.is-mo-in,:is(.bt-empty,.cp-empty,.fc-empty,.lib-empty,.my-empty,.pp-empty,.mk-empty,.lr-empty-t){animation:none!important}[data-mo-tilt]{transform:none!important}}
html[data-motion="off"] :is(.is-mo-in,.bt-empty,.cp-empty,.fc-empty,.lib-empty,.my-empty,.pp-empty,.mk-empty,.lr-empty-t){animation:none!important}
html[data-motion="off"] [data-mo-tilt]{transform:none!important}

/* ---- Plus prompts (components/plus-nudge.php; owner, 11 Oct): one calm card, value first, the price, one teal action.
   At most one per page; none for members. */
.bl-pn{display:flex;align-items:center;gap:14px;margin:20px 0;padding:14px 16px;border-radius:var(--r2,16px);background:var(--study-tint);color:var(--ink)}
.bl-pn-mk{flex:none;display:grid;place-items:center}
.bl-pn-tx{flex:1 1 auto;min-width:0}
.bl-pn-tx h3{margin:0 0 2px;font:700 16.5px/1.3 var(--f-display)}
.bl-pn-tx p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.bl-pn-pr{white-space:nowrap;font-weight:650;color:var(--ink)}
.bl-pn-go{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--pill);background:var(--study-btn,var(--study));color:var(--on-study-btn,#fff);font:700 15px/1 var(--f-body);text-decoration:none;white-space:nowrap}
.bl-pn-go:hover{background:var(--study-btn-hover,var(--study))}
.bl-pn-go:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:560px){.bl-pn{flex-wrap:wrap}.bl-pn-tx{flex-basis:calc(100% - 40px)}.bl-pn-go{width:100%;justify-content:center}.bl-pn-pr{white-space:normal}}
.shop-plus-pr{margin:6px 0 12px;font-weight:650;color:var(--ink)}
/* the quiet card beside a Buy button (a pack's or a bundle's page): the same card, See plans as a text link */
.bl-pn.bl-pn-q{margin:10px 0;padding:12px 14px;gap:12px;flex-wrap:wrap}
.bl-pn.bl-pn-q .bl-pn-tx{flex-basis:calc(100% - 40px)}
.bl-pn.bl-pn-q .bl-pn-go{min-height:auto;padding:0;margin-inline-start:34px;background:none;box-shadow:none;color:var(--study-ink);text-decoration:underline;text-underline-offset:3px;font-size:14.5px}
.bl-pn.bl-pn-q .bl-pn-pr{white-space:normal}
@media (max-width:560px){.bl-pn.bl-pn-q .bl-pn-go{width:auto;max-width:calc(100% - 34px);min-width:0;white-space:normal}}   /* the quiet card's link is never wider than its row (it overflowed by its 34 px indent at 320 and 390) */
.bl-pn.bl-pn-q.lp-pn{text-align:start}.bl-pn.bl-pn-q.lp-pn .bl-pn-tx{flex-basis:100%}.bl-pn.bl-pn-q.lp-pn .bl-pn-go{margin:4px auto 0 0}   /* the lesson's end (learn.js): no mark, so the link lines up with the text */
.bl-pn-tx h3{color:var(--ink)}

/* the lesson's end (owner, 11 Oct; the player's own learn.css is another agent's open file): every secondary step a
   small quiet button, left-aligned (Next lesson in the bar stays the one main action); no single word left alone */
.lp-btn.lp-btn-s{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;font-size:15.5px;text-decoration:none;width:auto}
.lp-done-body .lr-after{margin:16px 0 0;text-align:start}
.lp-done-body .bl-pn.lp-pn{flex-direction:column;align-items:flex-start;gap:10px;text-align:start}
.lp-done-body .bl-pn.lp-pn .bl-pn-tx p{color:var(--ink-2)}
.lp-done-body :is(p,li,h2,h3),.lh-card :is(p,li,span){text-wrap:pretty}
.lp-done h1,.lp-done-body h2,.lh-card h2{text-wrap:balance}

/* course pages (owner, 11 Oct: "make it more clear that the first lesson is free"; the player's course.css is another
   agent's open file, so these sit here, prefixed to outrank it): Free on a free lesson among locked ones, and its Up
   next label reads "Free lesson". Free is a text tag with its tick in the free colour, the same as a unit's Free
   (course.css .cp-m .is-free), never a pill (coordinator, 15 Oct 2026: one component, no pills); Code's course pages use
   it too (code.brainlag.space/tools/track_page.py) */
.lsr-free{display:inline-flex;align-items:center;gap:3px;margin-inline-start:8px;padding:0;border-radius:0;background:none;color:var(--free);font:700 12.5px/1.35 var(--f-body);vertical-align:1px;white-space:nowrap}
.lsr-free::before{content:"";flex:none;width:13px;height:13px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* the Shop's Free prices (cards, a product page's price and its sticky bar) in the free colour; a sample card's line
   about the full pack keeps the page's text colour */
p.price.is-free,p.p.is-free{color:var(--free)}
p.price.is-free .inc{color:var(--ink-2)}
.cp .lsr.is-next[data-free] .lsr-t::before,.ln-page .lsr.is-next[data-free] .lsr-t::before{content:"Free lesson"}
.cp .cp-facts a{color:inherit;font-weight:700}
.lsr.is-next .lsr-free{display:none}   /* its label already says Free lesson, and its button Start free */
@media (max-width:480px){   /* phones: compact unit cards, every toggle a 44 px target */
  .cp .cp-units{gap:10px}
  .cp .cp-u .cp-uh{padding:10px 12px;gap:10px}
  .cp .cp-u .cp-tog{min-height:44px;margin:-6px 0 -8px}
}
@media (max-width:380px){   /* the grade switcher on one row: the "Grade" label takes only its width (it grew to 92 px and pushed the last grade onto a line alone) */
  .cp .cp-sw.is-grades{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cp .cp-sw.is-grades .cp-sw-k{flex:none;width:auto}
}
/* the lesson player (owner, 11 Oct): no row under the top bar; its line holds the course name as plain context */
.lp-unavrow{display:none}
.lp-loc{white-space:nowrap;max-width:100%;flex-shrink:1;min-width:0}
span.lp-loc{display:inline-flex}
.lp-loc-c{overflow:hidden;text-overflow:ellipsis;min-width:0}
.lp-loc-w{flex:none}
/* the course hero (owner, 11 Oct, "best design?"): a one-line Start free lesson, then the facts, then a small muted plan line */
.cp .cp-go.is-one{align-items:center;align-content:center;grid-template-rows:auto;min-height:66px}   /* the two-line button's height: a returning learner's Continue (course.js) moves nothing below */
.cp .cp-go.is-one > span{grid-row:1;align-self:center}
.cp .cp-go.is-one > svg{grid-row:1;align-self:center}
.cp .cp-plus-l{margin:4px 0 0;color:var(--ink-3);font-size:14px;line-height:1.45}
.cp .cp-plus-l a{color:inherit;font-weight:650;text-decoration:underline;text-underline-offset:2px}
.cp .cp-promise{text-wrap:pretty}
/* the question's answer area (owner, 11 Oct: "feels unlevel"; learn.css is another agent's open file): one toolbar of
   tools, Calculator, Show a hint and Review the lesson, each 44 px, centred on one line; and the content always clears
   the sticky bottom bar by 16 px (--lp-foot-h, set by learn.js) */
body.ln-play .lq-aids{align-items:center;gap:10px}
body.ln-play .lq-aids > :is(.lq-aid,.lq-calcbtn){box-sizing:border-box;height:44px;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;margin:0;font-size:15px;line-height:1}
body.ln-play .lq-aids > .lq-calcbtn{border-radius:12px}
body.ln-play .lp-stage{padding-bottom:calc(var(--lp-foot-h, 96px) + 16px)}
body.ln-play .lp-foot .lp-actions{max-width:var(--lp-col-w, 900px)}   /* Check ends at the content's edge (learn.js sets the stage's width) */
@media (max-width:600px){
  span.lp-loc{flex-wrap:wrap}
  .lp-loc-c{flex-shrink:0;overflow:visible}   /* on a phone the line has its own row: the course name whole, never "GCSE..." */
}
@media (max-width:480px){   /* the tools on a phone (owner, 11 Oct): one row of equal buttons, the icon over a short label, 44 px tall */
  body.ln-play .lq-aids{flex-wrap:nowrap;gap:8px}
  body.ln-play .lq-aids > :is(.lq-aid,.lq-calcbtn){flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:2px;padding:0 4px;font-size:12.5px;line-height:1.1}
  body.ln-play .lq-aids > :is(.lq-aid,.lq-calcbtn)[data-short] > :is(.t, span:not([aria-hidden])){display:none}
  body.ln-play .lq-aids > :is(.lq-aid,.lq-calcbtn)[data-short]::after{content:attr(data-short);white-space:nowrap}
  body.ln-play .lq-aids > :is(.lq-aid,.lq-calcbtn) svg{width:18px;height:18px;flex:none}
  /* the symbol pads fill their rows evenly: six columns; the Working pad's More takes two (10 keys and More: two rows of 6) */
  body.ln-play .lq-syms{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  body.ln-play .lq-syms > .lq-sym{min-width:0;width:100%;padding:0}
  body.ln-play .lq-syms > .lq-symmore{grid-column:span 2}
}
/* the course page's Practise strip (owner, 11 Oct: "the Flashcards card is too tall for no reason"): on a wide screen
   the three cards are as tall as the tallest one's real content, with no reserved space (the cards' reserve stays on a
   phone, where the cards stack and filling the count would otherwise move the page) */
@media (min-width:701px){
  .cp .lr-panel.pp-strip .pp-cards,.cp .lr-panel.pp-strip .pp-cards.has-3{align-items:stretch}
  .cp .lr-panel.pp-strip.pp-rsv-cd [data-part="cards"] .pp-foot{min-height:0}
}

/* the question screen (owner, 11 Oct): the title, marks and timer stay at the top, under the bar; only the question's
   body (the stem, the answer and Hint) is centred in the room left above the bottom bar, and a body taller than that
   room simply starts under the header. The loading shape does the same, so nothing moves when the question arrives. */
.lp-stage:has(> #lpDyn > .lp-q.is-on)::before,.lp-stage:has(> #lpDyn > .lp-q.is-on)::after{content:none}
.lp-stage > #lpDyn:has(> .lp-q.is-on){flex:1 0 auto;display:flex;flex-direction:column}
#lpDyn > .lp-q.is-on{flex:1 0 auto;display:flex;flex-direction:column}
.lp-q.is-on > .lp-skel{flex:1 0 auto;grid-template-rows:auto auto 1fr}
.lp-q.is-on > .lp-skel > .lp-skel-b{align-self:center}
.lp-q.is-on > .lq-ctx{flex:none}
.lp-top > .lp-loc{flex-wrap:nowrap;box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden}   /* one line, inside the column: only the course name shortens ("…") */
.lp-top > .lp-loc > .lp-loc-c{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lp-top > .lp-loc > .lp-loc-w{flex:none}
@media (max-width:359px){.lp-top > .lp-loc > .lp-loc-c{display:none}}   /* under 360 px: "Unit 10, Lesson 2 of 3" alone */
.lp-q.is-on > .lq{flex:1 0 auto;display:flex;flex-direction:column;position:relative}
.lp-q.is-on > .lq > *{flex:none}
.lp-q.is-on > .lq > .ls-read{position:absolute;top:6px;right:-6px;margin:0}
.lp-q.is-on > .lq:has(> .ls-read) > .lq-title{padding-inline-end:46px}
/* Quick recall: its header row holds only the pill, "1 of 3" and Skip, on one centre line */
.lp-q.is-on > .lq.lr-q > .lr-top{min-height:44px;margin-top:0;align-items:center}
@media (max-width:420px){.lp-q.is-on > .lq.lr-q > .lr-top{gap:6px}}
/* read aloud on a question (owner, 11 Oct): one place on every question type, the top right of Noodle's bubble (or of
   the shared stem), a 44 px target, floated so a long stem does not lose a column; the bubble redraws when it joins */
/* a 44 x 44 button (the icon its usual size) floated at the start of the text; negative margins let it hang into the
   bubble's padding, so the text makes room for only about 30 x 26 and at most the first line moves */
.lq .ls-read.ls-inq{float:right;position:relative;width:44px;height:44px;margin:-10px -14px -8px 2px;z-index:1}
.lq > .lq-stem .ls-read.ls-inq,.lq > .lq-part > .lq-prompt .ls-read.ls-inq{margin:-10px -10px -8px 4px}
.lp-q.is-on > .lq > :is(.ls-read,.lq-title,.lq-upnote,.lq-mkh,.lq-pace,.lr-top) + :not(.ls-read,.lq-title,.lq-upnote,.lq-mkh,.lq-pace,.lr-top){margin-top:auto}
.lp-q.is-on > .lq::after{content:'';flex:none;margin-top:auto}
/* the header and the body are two groups (owner, 11 Oct): a larger gap after the header than between the body's blocks */
.lp-q.is-on > .lq{--lq-head-gap:22px}
.lp-q.is-on > .lq > :is(.lq-title,.lq-upnote,.lq-mkh,.lq-pace,.lr-top):not(:has(~ :is(.lq-title,.lq-upnote,.lq-mkh,.lq-pace,.lr-top))){margin-bottom:var(--lq-head-gap)}
/* where a question with a figure is two columns, the columns keep their own layout, top-aligned */
@media (min-width:1000px){.lp-q.is-on > .lq.has-vis{display:grid;flex:none}.lp-q.is-on > .lq.has-vis > .ls-read{position:static;margin:6px 0 0}.lp-q.is-on > .lq.has-vis::after{content:none}}
/* Mixed review (owner, 11 Oct): the top bar stays one row (close, progress, the small icons); the review's label is
   one quiet line over the question's title, shortened with an ellipsis when it is long */
.lp-top .lr-meta{display:none}
.lq-ctx{margin:8px 0 -4px;color:var(--ink-3);font-size:14px;font-weight:650;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* the lesson's line under the bar on a phone starts where the bar starts (owner, 11 Oct), one line */
@media (max-width:560px){.lp-top > .lp-loc{padding-inline-start:58px;justify-content:flex-start}}
@media (max-width:440px){.lp-top > .lp-loc{padding-inline-start:46px}}
@media (max-width:359px){.lp-top > .lp-loc{padding-inline-start:44px}}
/* the question's body (owner, 11 Oct: "feels unlevel"): the bubble row, Working, the answer and the tools share the
   column's two edges, and one gap sits between each of them. The answer box grows to the right edge beside its label. */
body.ln-play .lq-part{--lq-gap:12px}
body.ln-play .lq-part > .lq-say{margin-bottom:0}
body.ln-play .lq-part > :is(.lq-work,.lq-in,.lq-aids){margin-top:var(--lq-gap)}
body.ln-play .lq-part > .lq-work{margin-bottom:0}
body.ln-play .lq-part > :is(.lq-work,.lq-in,.lq-aids) > :first-child{margin-top:0}   /* no inner margin adds to the gap (a drawn answer's grid had 14 px) */
body.ln-play .lq-line > .lq-fu{flex:1 1 0;max-width:none;min-width:min(100%,160px)}
body.ln-play .lq-line > .lq-fu > .lq-field,body.ln-play .lq-line > .lq-field{flex:1 1 auto;width:auto;min-width:0}
body.ln-play .lq-in .lq-read:empty{display:none}   /* the "reads as" line takes room only when it says something, so the gaps stay even */
/* the player's top bar (owner, 11 Oct: "misuse of space"): the progress bar takes the room between the close button
   (and the lesson's line) and the right-hand icons, up to 1100 px on very wide screens, centred there; the icons
   (settings, Sparks, sound) sit together with one even gap, and the Sparks counter is only as wide as its number.
   The Sparks counter shows on a locked lesson too (learn-help.js, 13 Oct), so the icons sit where every other screen has them. */
.lp-top > .lp-bar{flex:1 1 auto;min-width:48px}
@media (min-width:1600px){.lp-top > .lp-bar{max-width:1100px;margin-inline:auto}}
.lp-top > .lh-topcount{width:auto;min-width:44px;padding:0 8px}
.lp-top > :is(.lh-topcount,.lp-snd){margin-inline-start:-6px}   /* settings (order 10) leads the group; Sparks (11) and sound (12) follow it closely */
.lp-top:not(:has(> .lh-topcount))::after{width:44px;margin-inline-start:-6px}
@media (min-width:561px){.lp-top > .lp-loc{max-width:34%}}
/* the progress bar's empty track (owner, 11 Oct: at the start of a lesson the dark track read as a blank gap) */
.lp-top > .lp-bar{background:var(--track)}
/* worked steps (owner, 12 Oct): two cells, the number and the content; the content is one box of inline text, so a
   root (inline-block, its bar over the radicand only), a fraction or a power sits in the line and wraps with it */
ol.wk:not(.wk-aligned) > li{grid-template-columns:30px minmax(0,1fr);align-items:baseline}
ol.wk > li > .wk-c{min-width:0;overflow-wrap:break-word}
ol.wk > li > .wk-c .lx-sqrt{display:inline-block;vertical-align:baseline}

/* ---- The installed app (12 Oct 2026; assets/js/bl-app.js, components/app-head.php, header.php's tab bar) ---- */
.bl-app-only{display:none}
html.bl-app .bl-app-only{display:block}
html.bl-app .bl-web-only{display:none!important}
/* "Updated, tap to refresh": quiet, above the tab bar and the home indicator */
.bl-upd{position:fixed;inset-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;
  display:flex;align-items:center;gap:4px;max-width:420px;margin:0 auto;padding:4px 4px 4px 6px;background:var(--navy);color:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(var(--ink-rgb),.25)}
html.bl-app body:has(.bl-tabs) .bl-upd{bottom:calc(69px + env(safe-area-inset-bottom))}
.bl-upd-go{flex:1;min-height:44px;padding:0 12px;border:0;background:none;color:inherit;font:650 15.5px/1.2 var(--f-body);text-align:start;cursor:pointer}
.bl-upd-x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--on-navy-2);border-radius:12px;cursor:pointer}
.bl-upd-go:focus-visible,.bl-upd-x:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:12px}
/* the install card (account page and My learning): one quiet card, gone for good on "Not now" */
[data-install-slot][hidden]{display:none}
.bl-inst{display:flex;gap:14px;align-items:flex-start;margin:20px 0;padding:16px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r2,16px)}
.bl-inst img{flex:none;border-radius:12px}
.bl-inst-tx{display:grid;gap:4px;min-width:0}
.bl-inst-tx b{font:700 16.5px/1.3 var(--f-body);color:var(--ink)}
.bl-inst-tx span{color:var(--ink-2);font-size:15px;line-height:1.45}
.bl-inst-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.bl-inst-go,.bl-inst-no{min-height:44px;padding:0 18px;border-radius:999px;font:700 15px/1 var(--f-body);cursor:pointer}
.bl-inst-go{background:var(--study-btn);color:var(--on-study-btn);border:0}
.bl-inst-no{background:none;color:var(--ink-2);border:0}
.bl-inst-go:focus-visible,.bl-inst-no:focus-visible{outline:2px solid var(--study);outline-offset:2px}
.bl-app-row{display:flex;align-items:center;width:100%;min-height:52px;padding:0 16px;border:1px solid var(--rule);border-radius:14px;background:var(--surface);color:var(--ink);font:650 16px/1.2 var(--f-body);text-align:start;cursor:pointer}
/* the store app: no web purchase, price or ad anywhere (apps/mobile/SITE_IN_APP.md, sections 1 and 2). Members use what they
   have; account deletion (Settings), privacy and terms stay. With Apple's in-app purchase on (html.bl-iap, components/
   app-head.php) the plans themselves come back, sold through the app; gifts, seats, the Shop, Sparks and ads stay hidden. */
html.bl-native:not(.bl-iap) #accVerify,html.bl-native:not(.bl-iap) .blh-plus,html.bl-native:not(.bl-iap) .mplus,html.bl-native:not(.bl-iap) .nav-plans,html.bl-native:not(.bl-iap) .pm-mini,html.bl-native:not(.bl-iap) .pm-act,html.bl-native:not(.bl-iap) .pm-adult,
html.bl-native:not(.bl-iap) .pm-plus,html.bl-native:not(.bl-iap) .bl-pn,html.bl-native:not(.bl-iap) .lp-pn,html.bl-native:not(.bl-iap) li.lh-plus,html.bl-native:not(.bl-iap) .mtr-lock-act,html.bl-native:not(.bl-iap) .hm-plans,
html.bl-native:not(.bl-iap) a.hb-course,html.bl-native:not(.bl-iap) .cp-unlock,html.bl-native:not(.bl-iap) #wlManage,html.bl-native:not(.bl-iap) a.lr-deck.is-plus,html.bl-native:not(.bl-iap) .bl-vb,html.bl-native:not(.bl-iap) .pm-price,
html.bl-native:not(.bl-iap) a.pm-cta,html.bl-native:not(.bl-iap) .bl-pn-pr,html.bl-native:not(.bl-iap) a.bl-pn-go,html.bl-native:not(.bl-iap) #accVerifyPlans,html.bl-native:not(.bl-iap) [data-switch],html.bl-native:not(.bl-iap) .pl-sw,
html.bl-native:not(.bl-iap) p.cp-plus-l,html.bl-native:not(.bl-iap) p.mh-plan,html.bl-native:not(.bl-iap) a.pa-a,html.bl-native:not(.bl-iap) a[href*="/plus/"]:not(.bl-tabs a),html.bl-native:not(.bl-iap) a[href$="/plus"]{display:none!important}
html.bl-native #blShopMenu,html.bl-native #blShopPanel,html.bl-native .hm-shop,html.bl-native .hm-tl-shop,html.bl-native a.adl,html.bl-native #prFootLock,
html.bl-native [data-sk-buy],html.bl-native [data-sk-ask],html.bl-native button.acd-manage,html.bl-native #blInstallM,html.bl-native #blInstallHelp,html.bl-native button.acct-inst,
html.bl-native .ad-slot,html.bl-native ins.adsbygoogle,html.bl-native div.navdd[data-navdd="shop"],html.bl-native div.ncs[data-navdd-acc="shop"],html.bl-native a[data-pm-gift],html.bl-native #planPacks,
html.bl-native #planGifts,html.bl-native a.bt-a,html.bl-native a[href*="buy.stripe.com"],html.bl-native a[href*="connect.stripe.com"],html.bl-native a[href*="/shop/"],html.bl-native a[href$="/shop"],
html.bl-native a[href*="/market/"],html.bl-native a[href*="/pricing"],html.bl-native a[href^="/go/"],html.bl-native a[href*="sparks-parent"],html.bl-native a[href*="checkout.stripe.com"],html.bl-native a[href*="billing.stripe.com"],
html.bl-native a[href*="/plus/gift"],html.bl-native a[href*="/plus/classroom"]{display:none!important}
/* Phones and tablets: no form field under 16 px, so iOS never zooms the page when a field takes focus (12 Oct 2026) */
@media (pointer:coarse) and (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]),select,textarea{font-size:max(16px,1em)!important}
}
/* No double-tap zoom wait on controls; in the installed app no sideways overscroll (it read as a stray swipe) and a
   short cross-fade between pages where the browser can (none with reduced motion); the tab bar stays put through it */
a,button,input,select,textarea,label,summary,[role=button]{touch-action:manipulation}
html.bl-app{overscroll-behavior-x:none}
@media (display-mode:standalone) and (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
  .bl-tabs{view-transition-name:bl-tabs}
}
/* a locked lesson in the store app: its free first screen stays, with a plain line instead of the plans */
.bl-native-lock{margin:14px 0 0;color:var(--ink-2);font-weight:650}
/* the app's upgrade reminder (bl-app.js; app_home_v2): a quiet sheet at a natural break, one every three days at most */
.bl-up{position:fixed;inset:auto 0 0 0;z-index:85;display:grid;gap:10px;max-width:560px;margin:0 auto;
  padding:18px max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:var(--surface);border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(var(--ink-rgb),.18)}
.bl-up b{font:700 18px/1.3 var(--f-body);color:var(--ink)}
.bl-up p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.45}
.bl-up-go,.bl-up-alt{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:999px;font:700 16.5px/1.1 var(--f-body);text-decoration:none;cursor:pointer}
.bl-up-go{border:0;background:var(--study-btn);color:var(--on-study-btn)}
.bl-up-alt{border:2px solid var(--btn-2-edge);background:var(--btn-2);color:var(--ink)}
.bl-up-no{min-height:48px;border:0;background:none;color:var(--ink-2);font:650 16px/1 var(--f-body);cursor:pointer}
.bl-up :focus-visible{outline:2px solid var(--study);outline-offset:3px}
html.bl-app body:has(.bl-tabs) .bl-up{bottom:calc(57px + env(safe-area-inset-bottom));border-radius:22px;margin-bottom:8px;padding-bottom:18px}
@media (prefers-reduced-motion:no-preference){html:not([data-motion="off"]) .bl-up{animation:blUp .22s ease-out}@keyframes blUp{from{transform:translateY(24px);opacity:0}}}

/* ---- The long-page fold (components/fold.php, assets/js/bl-fold.js; owner, 12 Oct: long copy in dropdowns, still in
   the page). A rule above, a 44 px summary with its label and a chevron that turns; the body as the page writes it. */
.bl-fold{margin:0}
.bl-fold+.bl-fold{margin-top:6px}   /* folds are set apart by space, never a hairline (owner rule; coordinator, 14 Oct: was a 1px divider) */
.bl-fold-s{display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 2px;cursor:pointer;list-style:none;color:var(--ink)}
.bl-fold-s::-webkit-details-marker{display:none}
.bl-fold-t{flex:1 1 auto;min-width:0;margin:0;font:650 19px/1.3 var(--f-display);color:inherit}
.bl-fold-c{flex:none;color:var(--study-ink);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.bl-fold[open]>.bl-fold-s .bl-fold-c{transform:rotate(180deg)}
.bl-fold-s:hover .bl-fold-t{color:var(--study-ink)}
.bl-fold-s:focus-visible{outline:3px solid var(--study);outline-offset:2px;border-radius:8px}
.bl-fold-b{padding:2px 2px 22px}
.bl-fold-b>:first-child{margin-top:0}
@media (prefers-reduced-motion:reduce){.bl-fold-c{transition:none}}
.bl-fold-s :is(h2,h3,h4){margin:0}

/* ---- The one speech bubble (assets/js/bl-bubble.js; owner, 12 Oct): body and tail are one SVG path behind the words,
   the surface fill and one 2 px stroke; the words wrap inside and are never clipped. Without script: a plain rounded
   box with the same edge all round. */
.bl-bubble{position:relative;isolation:isolate;min-width:0;padding:12px 16px;overflow-wrap:anywhere;white-space:normal;text-overflow:clip;overflow:visible}
.bl-bubble:not(.is-drawn){background:var(--surface);border:2px solid var(--say-edge);border-radius:18px}
.bl-bubble-bg{position:absolute;left:0;top:0;z-index:-1;overflow:visible;pointer-events:none}
.bl-bubble-bg path{fill:var(--surface);stroke:var(--say-edge);stroke-width:2;stroke-linejoin:round}
/* the limit sheet (bl-app-up.js blLimit; app_home_v2): Free against Plus as a bar, a pill where they are, one line,
   one button. Deep navy with one accent, the Plus gold; a bottom sheet on phones, a card on wider screens. */
.bl-lim{position:fixed;inset:0;z-index:95;display:grid;align-items:end;justify-items:center;background:rgba(8,17,32,.55)}
.bl-lim-in{position:relative;width:100%;max-width:440px;box-sizing:border-box;display:grid;gap:12px;justify-items:center;text-align:center;
  padding:22px max(20px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:#12233a;color:#fff;border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.35)}
@media (min-width:600px){.bl-lim{align-items:center}.bl-lim-in{border-radius:24px;padding-bottom:24px}}
.bl-lim-x{position:absolute;top:10px;inset-inline-start:10px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:#a9c1da;cursor:pointer}
.bl-lim-x:focus-visible,.bl-lim-go:focus-visible,.bl-lim-alt:focus-visible{outline:2px solid #ffc23d;outline-offset:3px}
.bl-lim-chart{position:relative;width:100%;padding-top:46px;margin-top:6px}
.bl-lim-pill{position:absolute;top:0;left:clamp(44px,var(--at),calc(100% - 44px));transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:#ffc23d;color:#15365a;font:700 16px/1 var(--f-body);white-space:nowrap}
.bl-lim-pill::after{content:'';position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#ffc23d;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.bl-lim-bar{display:flex;width:100%;height:44px;border-radius:14px;overflow:hidden;background:linear-gradient(90deg,#1f4d7a,#2c6aa3);font:700 15px/1 var(--f-body)}
.bl-lim-bar span{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 12px;min-width:0}
.bl-lim-bar .fr{flex:none;background:#2c3f57;color:#c8d7e8}
.bl-lim-bar .pr{flex:1;color:#fff}
.bl-lim-bar .pr b{color:#ffc23d}
.bl-lim-bar i{font-style:normal;font-weight:600;white-space:nowrap;overflow:hidden}
.bl-lim-in h2{margin:6px 0 0;font:700 21px/1.25 var(--f-display);color:#fff}
.bl-lim-in p{margin:0;color:#c8d7e8;font-size:16px;line-height:1.45;max-width:32ch}
.bl-lim-go,.bl-lim-alt{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;margin-top:6px;border-radius:999px;font:700 17px/1 var(--f-body);text-decoration:none;cursor:pointer}
.bl-lim-go{background:#ffc23d;color:#15365a;border:0}
.bl-lim-go i{font-style:normal;padding:4px 9px;border-radius:999px;background:#15365a;color:#ffc23d;font-size:14px}
.bl-lim-alt{background:none;color:#fff;border:2px solid #a9c1da}
@media (prefers-reduced-motion:no-preference){html:not([data-motion="off"]) .bl-lim-in{animation:blLimUp .26s cubic-bezier(.22,1,.36,1)}
  html:not([data-motion="off"]) .bl-lim-bar .pr{animation:blLimGrow .6s .15s cubic-bezier(.22,1,.36,1) backwards;transform-origin:0 50%}
  @keyframes blLimUp{from{transform:translateY(30px);opacity:0}}@keyframes blLimGrow{from{transform:scaleX(.2)}}}
.bl-lim-in:focus{outline:none}

/* ---- the phone menu drawer (owner, 12 Oct: "bubbly and smooth"; assets/js/bl-drawer.js does the motion). Phones and
   tablets (the menu exists at 900 px and under). It springs in from the side under the header bar, its rows are big
   filled bubbles with an icon tile in the brand colours and rise in one after another, sections grow open, a press
   squeezes (scale .97, a darker fill), the current page is a pill fill. No lines between rows: spacing and fills.
   Reduced motion: no movement. :root raises these over the header's and the menus' own rules. */
@media (max-width:900px){
  :root .blh .mback{top:var(--msheet-top,56px);background:rgba(8,17,32,.42);opacity:0;transition:opacity .25s ease}
  :root .blh .mback.is-in{opacity:1}
  :root .blh .msheet{inset-inline-start:auto;inset-inline-end:0;top:var(--msheet-top,56px);bottom:0;width:min(420px,calc(100vw - 24px));max-height:none;
    border-radius:26px 0 0 26px;padding:12px 14px calc(18px + env(safe-area-inset-bottom));box-shadow:-12px 0 40px rgba(8,17,32,.22);
    transform:translateX(105%);transition:transform .26s cubic-bezier(.45,0,.6,1);overscroll-behavior:contain;touch-action:pan-y}
  :root[dir="rtl"] .blh .msheet{border-radius:0 26px 26px 0;transform:translateX(-105%)}
  :root .blh .msheet.is-in{transform:none;transition:transform .32s cubic-bezier(.34,1.22,.64,1)}   /* in with a spring, out smoothly */
  :root .blh .msheet.is-drag{transition:none}
  body.dr-open{overflow:hidden}
  :root .blh .msheet .dr-row{opacity:0;transform:translateY(8px)}
  :root .blh .msheet.is-in .dr-row{opacity:1;transform:none;transition:opacity .24s ease calc(var(--i,0) * 30ms + 60ms),transform .3s cubic-bezier(.34,1.3,.64,1) calc(var(--i,0) * 30ms + 60ms)}
  :root .blh .msheet nav{gap:10px;padding-top:12px}
  :root .blh .msheet .ncb-row,:root .blh .msheet nav > a{min-height:60px;border-radius:20px;box-shadow:none;background:var(--surface)}
  :root .blh .msheet nav .ncb-row .ncb-link,:root .blh .msheet nav > a.mlink{position:relative;min-height:60px;padding-inline-start:66px;font:650 19px/1.15 var(--f-display)}
  :root .blh .msheet nav .ncb-row .ncb-link::before,:root .blh .msheet nav > a.mlink::before{content:'';position:absolute;inset-inline-start:12px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:13px;background:var(--tile,var(--sunk))}
  :root .blh .msheet nav .ncb-row .ncb-link::after,:root .blh .msheet nav > a.mlink::after{content:'';position:absolute;inset-inline-start:21px;top:50%;width:22px;height:22px;margin-top:-11px;background:var(--tile-ink,var(--ink-2));-webkit-mask:var(--ic) center/22px no-repeat;mask:var(--ic) center/22px no-repeat}
  :root .blh .msheet nav > a.mlink svg{display:none}
  :root .blh .msheet .ncb-row.is-cur,:root .blh .msheet nav > a[aria-current="page"]{background:var(--study-tint)}
  :root .blh .msheet .ncb-row .ncb{width:56px}
  :root .blh .msheet .ncb svg{transition:transform .26s cubic-bezier(.34,1.3,.64,1)}
  :root .blh .msheet .ncp{padding:6px 2px 4px}
  :root .blh .msheet .ncp .ncl-g + .ncl-g{border-top:0;margin-top:4px}
  :root .blh .msheet .ncp .ncl{border-radius:14px;min-height:52px}
  :root .blh .msheet .ncp .ncl[aria-expanded="true"]{background:var(--sunk)}
  :root .blh .msheet :is(.ncb-row,nav > a,.mme-in,.mset-th,.mset-lang,.ncp a,.ncp .ncl,.mbtn,.mplus,.mdisp .ncb){transition:transform .14s ease,filter .14s ease}
  :root .blh .msheet :is(.ncb-row:active,nav > a:active,.mme-in:active,.mset-th:active,.mset-lang:active,.ncp a:active,.ncp .ncl:active,.mbtn:active,.mplus:active,.mdisp .ncb:active){transform:scale(.97);filter:brightness(.93)}
  :root[data-theme="dark"] .blh .msheet :is(.ncb-row:active,nav > a:active,.mme-in:active,.mset-th:active,.mset-lang:active,.ncp a:active,.ncp .ncl:active,.mbtn:active,.mplus:active,.mdisp .ncb:active){filter:brightness(.85)}
  /* rows inside an open section (each host's own: course-nav.php, music-nav.php): big, rounded, 17 px names */
  :root .blh .msheet .ncp .nc-it{min-height:56px;align-items:center;border-radius:16px;padding:8px 12px}
  :root .blh .msheet .ncp .nc-it b{font-size:17px}
  :root .blh .msheet .ncp a.nc-it[aria-current="page"]{background:var(--study-tint)}
  /* the section row itself, whoever prints it (course-nav.php styles it on brainlag.space; music-nav.php no longer does) */
  :root .blh .msheet .ncb-row{display:flex;align-items:stretch}
  :root .blh .msheet nav .ncb-row .ncb-link{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-start;background:none;box-shadow:none;color:var(--ink);text-decoration:none}
  :root .blh .msheet .ncb-row .ncb{flex:none;display:grid;place-items:center;width:56px;min-height:60px;padding:0;border:0;border-radius:20px;background:none;color:var(--ink-2);box-shadow:none;cursor:pointer}
  :root .blh .msheet .ncb[aria-expanded="true"] svg{transform:rotate(90deg)}
  /* rows inside a section: the icon, then the name with its line under it, read from the start */
  :root .blh .msheet nav .ncp a.nc-it,:root .blh .msheet .ncp .nc-it{display:flex;justify-content:flex-start;gap:12px;text-align:start;background:var(--surface);color:var(--ink);text-decoration:none;font:inherit;margin:0 0 6px}
  :root .blh .msheet .ncp .nc-it .nc-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
  :root .blh .msheet .ncp .nc-it .nc-tx b{display:block;font:650 17px/1.25 var(--f-body)}
  :root .blh .msheet .ncp .nc-it .nc-tx small{display:block;font:500 14px/1.3 var(--f-body);color:var(--ink-3)}
  :root .blh .msheet .ncp .nc-it > :first-child{flex:none}
  /* a quiet subhead between a section's rows (music-nav.php's .navdd-h: Composition, Orchestration, ...) */
  :root .blh .msheet .ncp .navdd-h{margin:14px 12px 4px;padding:0;font:700 13px/1.3 var(--f-body);color:var(--ink-3);letter-spacing:.01em}
  /* language and theme: compact, at the foot */
  :root .blh .msheet .mset{margin-top:16px;gap:8px}
  :root .blh .msheet :is(.mset-th,.mset-lang){min-height:48px;border-radius:16px;box-shadow:none;font-size:15px}
  :root .blh .msheet .mset-lang select{height:48px;font-size:16px}
  :root .blh .msheet .mdisp .ncb.ncb-wide{min-height:48px;border-radius:16px;box-shadow:none;font-size:15px}
  /* focus comes back to the menu button when the drawer closes; its ring only after a keyboard close (bl-drawer.js) */
  :root .blh #blMenuBtn.no-ring{outline:none!important;box-shadow:none!important}
  /* the menu button's three lines become an x */
  :root .blh #blMenuBtn .mb-ic path{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.34,1.3,.64,1),opacity .18s ease}
  :root .blh #blMenuBtn[aria-expanded="true"] .mb1{transform:translateY(5px) rotate(45deg)}
  :root .blh #blMenuBtn[aria-expanded="true"] .mb2{opacity:0;transform:scaleX(.2)}
  :root .blh #blMenuBtn[aria-expanded="true"] .mb3{transform:translateY(-5px) rotate(-45deg)}
  :root .blh .msheet .ncs[data-ncnav] .ncb-link{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5C6.5%204.3%209.5%204.3%2012%206c2.5-1.7%205.5-1.7%208-.5V19c-2.5-1.2-5.5-1.2-8%20.5-2.5-1.7-5.5-1.7-8-.5z%22/%3E%3Cpath%20d%3D%22M12%206v13.5%22/%3E%3C/svg%3E");--tile:var(--blue-tint);--tile-ink:var(--blue-ink)}
  :root .blh .msheet .ncs[data-navdd-acc="courses"] .ncb-link{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018V6l10-2v12%22/%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2218%22%20r%3D%222.5%22/%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2216%22%20r%3D%222.5%22/%3E%3C/svg%3E");--tile:var(--pink-tint);--tile-ink:var(--pink-ink)}
  :root .blh .msheet .ncs[data-navdd-acc="tools"] .ncb-link{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M8.5%208V6.2A2.2%202.2%200%200%201%2010.7%204h2.6a2.2%202.2%200%200%201%202.2%202.2V8%22%2F%3E%3Cpath%20d%3D%22M3%2013.5h18%22%2F%3E%3Cpath%20d%3D%22M10%2013.5v2h4v-2%22%2F%3E%3C%2Fsvg%3E");--tile:var(--study-tint);--tile-ink:var(--study-ink)}
  :root .blh .msheet .ncs[data-navdd-acc="market"] .ncb-link,:root .blh .msheet .ncs[data-navdd-acc="shop"] .ncb-link{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%208h14l-1%2012H6z%22/%3E%3Cpath%20d%3D%22M9%208V6.5a3%203%200%200%201%206%200V8%22/%3E%3C/svg%3E");--tile:var(--gold-tint);--tile-ink:var(--gold-ink)}
  :root .blh .msheet .ncs[data-navdd-acc="trainers"] .ncb-link{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2014v-2a8%208%200%200%201%2016%200v2%22/%3E%3Crect%20x%3D%223.5%22%20y%3D%2213.5%22%20width%3D%224%22%20height%3D%226.5%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2216.5%22%20y%3D%2213.5%22%20width%3D%224%22%20height%3D%226.5%22%20rx%3D%221.5%22/%3E%3C/svg%3E");--tile:var(--pink-tint);--tile-ink:var(--pink-ink)}
  :root .blh .msheet .ncs[data-navdd-acc="uni"] .ncb-link{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%209.5L12%205l9.5%204.5L12%2014z%22/%3E%3Cpath%20d%3D%22M6.5%2011.5v4c3%202.4%208%202.4%2011%200v-4%22/%3E%3C/svg%3E");--tile:var(--play-tint);--tile-ink:var(--play-ink)}
  :root .blh .msheet .ncs[data-navdd-acc="tech"] .ncb-link{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%204v16M12%204v16M18%204v16%22/%3E%3Crect%20x%3D%223.8%22%20y%3D%2213%22%20width%3D%224.4%22%20height%3D%223%22%20rx%3D%221%22/%3E%3Crect%20x%3D%229.8%22%20y%3D%227%22%20width%3D%224.4%22%20height%3D%223%22%20rx%3D%221%22/%3E%3Crect%20x%3D%2215.8%22%20y%3D%2211%22%20width%3D%224.4%22%20height%3D%223%22%20rx%3D%221%22/%3E%3C/svg%3E");--tile:var(--blue-tint);--tile-ink:var(--blue-ink)}
  /* Play: a game controller in the games colour, Tools a toolbox, Pricing a price tag: one set, the same 2 px line as
     Courses (owner, 13 Oct: the plain square read as a broken image; "better icons for Tools, Pricing and Play") */
  :root .blh .msheet nav > a.mlink[href*="/play/"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.6%206.5h10.8c2.3%200%204.2%201.7%204.5%204l.9%206.4a2.6%202.6%200%200%201-4.6%202l-2.4-2.9H8.2l-2.4%202.9a2.6%202.6%200%200%201-4.6-2l.9-6.4c.3-2.3%202.2-4%204.5-4z%22%2F%3E%3Cpath%20d%3D%22M7.6%209.6v4.2M5.5%2011.7h4.2%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210.4%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2218.3%22%20cy%3D%2212.9%22%20r%3D%221.1%22%2F%3E%3C%2Fsvg%3E");--tile:var(--play-tint);--tile-ink:var(--play-ink)}
  /* the controller is wider than the set's other drawings: 24 px across the 34 px tile (about 70%), and a lighter line
     in dark, so it reads as clearly on its tile as the others do on theirs */
  html:root .blh .msheet nav > a.mlink[href*="/play/"]::after{inset-inline-start:7px;width:24px;height:24px;margin-top:-12px;-webkit-mask-size:24px;mask-size:24px}
  html:root[data-theme="dark"] .blh .msheet nav > a.mlink[href*="/play/"]{--tile-ink:#cdbcff}
  :root .blh .msheet nav > a.mlink[href*="/plus"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%204.5a1%201%200%200%201%201-1h7.6a1%201%200%200%201%20.7.3l7.6%207.6a1.5%201.5%200%200%201%200%202.1l-7.3%207.3a1.5%201.5%200%200%201-2.1%200l-7.6-7.6a1%201%200%200%201-.3-.7z%22%2F%3E%3Cpath%20d%3D%22M8%208h.01%22%2F%3E%3C%2Fsvg%3E");--tile:var(--gold-tint);--tile-ink:var(--gold-ink)}
  :root .blh .msheet nav > a.mlink[href*="code.brainlag"],:root .blh .msheet nav > a.mlink.nav-code{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%208l-4%204%204%204M16%208l4%204-4%204%22/%3E%3C/svg%3E");--tile:var(--play-tint);--tile-ink:var(--play-ink)}
  :root .blh .msheet nav > a.mlink[href$="brainlag.space/en/"],:root .blh .msheet nav > a.mlink[href$="brainlag.space/"],:root .blh .msheet nav > a.mlink[href$="brainlag.co.uk/en/"],:root .blh .msheet nav > a.mlink[href$="brainlag.co.uk/"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011l8-7%208%207%22/%3E%3Cpath%20d%3D%22M6%209.5V20h12V9.5%22/%3E%3C/svg%3E");--tile:var(--study-tint);--tile-ink:var(--study-ink)}
  /* ---- the phone menu, 13 Oct (owner: "fills the width", "use the space better"): the whole width with the 16 px
     gutter; plain 44 px rows (an icon and the name, no card each); sections fold, only the current one open
     (bl-navdd.js); the current row in its colour, no fill; Tools a two-column grid of icons. html:root outranks the
     hosts' own menu rules (course-nav.php, music-nav.php). */
  html:root .blh .msheet{inset-inline:0;width:auto;border-radius:0 0 22px 22px;padding:6px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 18px 30px rgba(8,17,32,.18);transform:translateX(100%)}
  html:root[dir="rtl"] .blh .msheet{border-radius:0 0 22px 22px;transform:translateX(-100%)}
  html:root .blh .msheet.is-in{transform:none}
  html:root .blh .msheet nav{gap:2px;padding-top:8px}
  html:root .blh .msheet :is(.ncb-row,nav > a){min-height:44px;border-radius:12px;background:none;box-shadow:none}
  html:root .blh .msheet :is(nav .ncb-row .ncb-link,nav > a.mlink){min-height:44px;padding-inline-start:46px;font:650 16.5px/1.2 var(--f-body)}
  html:root .blh .msheet :is(nav .ncb-row .ncb-link,nav > a.mlink)::before{inset-inline-start:2px;width:34px;height:34px;margin-top:-17px;border-radius:10px}
  html:root .blh .msheet :is(nav .ncb-row .ncb-link,nav > a.mlink)::after{inset-inline-start:9px;width:20px;height:20px;margin-top:-10px;-webkit-mask-size:20px;mask-size:20px}
  html:root .blh .msheet .ncb-row .ncb{width:44px;min-height:44px;border-radius:12px}
  html:root .blh .msheet :is(.ncb-row.is-cur,nav > a[aria-current="page"]){background:none}
  html:root .blh .msheet :is(.ncb-row.is-cur .ncb-link,nav > a[aria-current="page"]){color:var(--study-ink)}
  html:root .blh .msheet .ncp{padding:0 0 6px 46px}
  html:root .blh .msheet .ncp .ncl-g + .ncl-g{margin-top:0}
  html:root .blh .msheet .ncp :is(.nc-it,a.nc-it){min-height:44px;margin:0;padding:4px 8px;border-radius:12px;background:none;box-shadow:none;gap:10px}
  html:root .blh .msheet .ncp .nc-it .nc-tx b{font:600 15.5px/1.25 var(--f-body)}
  html:root .blh .msheet .ncp .nc-it .nc-tx small{display:none}
  html:root .blh .msheet .ncp .nc-it :is(.mh-ic,.mt-ic,.sm-ic){width:30px;height:30px;border-radius:9px}
  html:root .blh .msheet .ncp .nc-it :is(.mh-ic,.mt-ic) svg{width:18px;height:18px}
  html:root .blh .msheet .ncp a.nc-it[aria-current="page"]{background:none;color:var(--study-ink)}
  html:root .blh .msheet .ncp .navdd-h{margin:8px 8px 2px}
  html:root .blh .msheet .ncp .ncl{min-height:44px}
  /* Tools: two columns of icon tiles, the links after them across the width */
  html:root .blh .msheet [data-navdd-acc="tools"] .ncp:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;padding-inline-start:0}
  html:root .blh .msheet [data-navdd-acc="tools"] .ncp > :not(.nc-it){grid-column:1 / -1}
  html:root .blh .msheet [data-navdd-acc="tools"] .ncp .nc-it{min-width:0}
  html:root .blh .msheet [data-navdd-acc="tools"] .ncp .nc-it .nc-tx{min-width:0}
  html:root .blh .msheet [data-navdd-acc="tools"] .ncp .nc-it .nc-tx b{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;font-size:14.5px}
  html:root .blh .msheet .mchips{padding:6px 0 2px}
  /* numbered levels (Grades 1 to 8, any list of numbered tiles): a grid of 44 px number tiles, four a row, the name
     kept for a screen reader (owner, 13 Oct: "eight full-height rows is long") */
  html:root .blh .msheet .ncp:has(.mh-gn):not([hidden]){display:grid;grid-template-columns:repeat(4,44px);gap:8px 12px;justify-content:start}
  html:root .blh .msheet .ncp:has(.mh-gn) > *{grid-column:1 / -1}
  html:root .blh .msheet .ncp:has(.mh-gn) > .nc-it:has(.mh-gn){position:relative;grid-column:auto;width:44px;min-height:44px;padding:0;justify-content:center}
  html:root .blh .msheet .ncp .nc-it:has(.mh-gn) .mh-ic{width:44px;height:44px;border-radius:12px}
  html:root .blh .msheet .ncp .nc-it:has(.mh-gn) .nc-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html:root .blh .msheet .ncp .nc-it:has(.mh-gn)[aria-current="page"] .mh-ic{box-shadow:0 0 0 2px var(--mt-ink,var(--study-ink))}
  /* a row's text takes the rest of the row. .nc-tx is a size container (course-nav.php, for the grade chips), so as a
     flex item sized by its content it shrank to nothing: one word a line, the chips piled up (14 Oct) */
  html:root .blh .msheet .ncp .nc-it .nc-tx{flex:1 1 0;min-width:0}
  /* the grade chips: 44 px squares, one row up to four, else two even rows (the same tiles as the numbered levels) */
  html:root .blh .msheet .ncp .nc-gch{grid-template-columns:repeat(var(--c1),44px);gap:8px;max-width:none;margin:8px 0}
  html:root .blh .msheet .ncp .nc-gch:has(> a:nth-child(5)){grid-template-columns:repeat(var(--c2),44px)}
  html:root .blh .msheet .ncp .nc-it.nc-gr{align-items:flex-start}   /* its icon beside the name, not halfway down the chips */
  html:root .blh .msheet .ncp .nc-gr .nc-tx{padding-top:5px}
  html:root .blh .msheet nav .ncp .nc-gch a{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:12px;font-size:15px}
  html:root .blh .msheet nav .mchips a{min-height:40px}
  html:root .blh .msheet .mset{margin-top:10px}
  html:root .blh .msheet .mdisp{margin-top:6px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  :root .blh :is(.msheet,.mback,.msheet .dr-row,#blMenuBtn .mb-ic path,.msheet .ncb svg){transition:none!important}
}
html[data-motion="off"] .blh :is(.msheet,.mback,.msheet .dr-row,#blMenuBtn .mb-ic path,.msheet .ncb svg){transition:none!important}

/* ---- One focus ring, everywhere (owner, 12 Oct): 2 px in the teal token (study ink: 5.5:1 on the light page, 9:1 on
   the dark), 2 px out, following the element's corners; only for keyboard focus, never on a click or tap. It wins over
   every older ring and every outline:none; the drawn rings (a border on ::after/::before, a box-shadow) give way to it.
   Elements focused by a script (tabindex="-1": a heading, main after the skip link) show no ring. */
:root{--focus-ring:var(--study-ink)}
:focus-visible{outline:2px solid var(--focus-ring)!important;outline-offset:2px!important}
:focus:not(:focus-visible){outline:none}
:where([tabindex="-1"]):focus-visible{outline:none!important}
:is(.lp-btn,.lq-tile,.lp-key,.plc-save,.plc-btn,.lr-go,.cp-go,.pm a.pm-cta,.pm-mini a.pm-cta,.b.spk-cta,.fp-th-b,.ct-big,.mt-key,.pr-btn.primary,
  .blm .blm-yes,.b-study,.b-play,.codeband .b-code,.keys button.eq,.deck-bar .btn,.btn.primary,.lq-aid,.mtr-ch):focus-visible::after,
.ibtn.play:focus-visible::before,.lv-big:focus-visible::before,.hm :is(.hm-b-go,.hm-b-alt,.hm-b-light,.hm-key,.hm-up):focus-visible::after{content:none!important}
:is(.g6-mellines,.mn-layer,.lv-prog,.lr-card,.shop-ql,.pr-zview):focus-visible,.shop-gal-nav:focus-visible::before{box-shadow:none!important}
@media (forced-colors:active){:focus-visible{outline-color:Highlight!important}}

/* No breadcrumbs on phones (owner, 12 Oct): under 600 px every visible trail and its one-link "‹ Parent" form goes
   (the shared bl-crumbs, the shop's, Learn's and the music pages'); the header and the menu carry the way back. The
   BreadcrumbList JSON-LD stays on every page. */
@media (max-width:599.98px){.bl-crumbs,.crumbs,.ln-crumb,.mtr-crumb,.mtx-crumb,.fc-crumb{display:none!important}
  /* the trail gave the title its room under the header; what follows it takes that room itself, no empty band */
  :is(.bl-crumbs,.crumbs,.ln-crumb,.mtr-crumb,.mtx-crumb,.fc-crumb) + *{margin-top:24px!important}}

/* ---- A price (owner, 13 Oct: "£99 a year needs to look nicer"; includes/components/price.php, assets/js/bl-price.js):
   the figure large, its sign and any pence small and raised, tabular numerals; the period small and muted on the same
   baseline. The figure takes its size from where it sits (.pl-price b, .hm-pl-pr, .pm-price ...); 0.5em of it for the
   sign and pence. */
.bl-pr{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;font-variant-numeric:tabular-nums lining-nums}
.bl-pr-v{display:inline-flex;align-items:baseline;line-height:1;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
/* the sign and pence sit on the figure's baseline (so the figure, and with it the period beside it, keeps the line's
   baseline: owner, 14 Oct, "'a year' on the bottom not the top") and are drawn raised */
.bl-pr-v .bl-pr-c,.bl-pr-v .bl-pr-d{font-size:.5em;line-height:1;position:relative;top:-.56em;font-weight:inherit;letter-spacing:0}
.bl-pr-v .bl-pr-c{margin-inline-end:.08em}
.bl-pr-v .bl-pr-ca{margin-inline:.12em 0}
.bl-pr-v .bl-pr-d{margin-inline-start:.02em}
.bl-pr-per{font-size:15px;line-height:1.2;font-weight:500;color:var(--ink-2);white-space:nowrap}

/* ---- The plans' art grounds (owner, 13 Oct): one treatment for the pricing cards and the homepage's (.bl-planart):
   in light the plan's pale ground and its subject pattern (plus signs, notes, code brackets); in dark a richer ground at
   25 to 35% lightness, the pattern brighter and stronger, and a soft glow behind the characters, so the dark cards keep
   the light ones' energy ("backgrounds too dark and plain"). html:root outranks the pricing page's own rules.
   Plus in dark is cobalt (14 Oct, "Not poop colour": its old #6e5214 read brown), between Ultra's teal and Code's
   violet; the orange fox pops on it and the gold stays as the pattern, an accent, not the ground. */
html:root .bl-planart.is-plus{background-color:#fff4d6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23b07d00' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='0.16' transform='rotate%28-6 66 66%29'%3E%3Cpath d='M12 24l7 7 14-14'/%3E%3Cpath d='M80 20h16M88 12v16'/%3E%3Cpath d='M84 82l7 10 9-24h18'/%3E%3Cpath d='M16 112l10-17 10 17z'/%3E%3Ccircle cx='54' cy='62' r='5'/%3E%3Cpath d='M112 46h10M112 52h10'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#ffe9b0,#fff6de 70%);background-size:132px 132px,100% 100%;background-position:0 0,0 0}
html:root[data-theme="dark"] .bl-planart.is-plus{background-color:#1f4690;background-image:radial-gradient(circle at 50% 78%,color-mix(in srgb,#d6efff 34%,transparent),transparent 62%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23ffd15c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='0.42' transform='rotate%28-6 66 66%29'%3E%3Cpath d='M12 24l7 7 14-14'/%3E%3Cpath d='M80 20h16M88 12v16'/%3E%3Cpath d='M84 82l7 10 9-24h18'/%3E%3Cpath d='M16 112l10-17 10 17z'/%3E%3Ccircle cx='54' cy='62' r='5'/%3E%3Cpath d='M112 46h10M112 52h10'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,color-mix(in srgb,#1f4690 70%,#ffffff 8%),#1f4690 75%);background-size:100% 100%,132px 132px,100% 100%;background-position:0 0,0 0,0 0}
html:root .bl-planart.is-plus_music{background-color:#fde7f1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23c2387c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='0.15' transform='rotate%28-6 66 66%29'%3E%3Cpath d='M18 40V16l18-5v24'/%3E%3Cellipse cx='13' cy='40' rx='6' ry='4.5'/%3E%3Cellipse cx='31' cy='35' rx='6' ry='4.5'/%3E%3Cpath d='M80 70v24'/%3E%3Cellipse cx='75' cy='94' rx='6' ry='4.5'/%3E%3Cpath d='M80 70q10 4 10 14'/%3E%3Cpath d='M14 104h40M14 112h40M14 120h40'/%3E%3Ccircle cx='104' cy='30' r='5'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#fbd3e5,#fdeef5 70%);background-size:132px 132px,100% 100%;background-position:0 0,0 0}
html:root[data-theme="dark"] .bl-planart.is-plus_music{background-color:#6d2a4f;background-image:radial-gradient(circle at 50% 78%,color-mix(in srgb,#ffb3d6 34%,transparent),transparent 62%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23ff8cc2' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='0.42' transform='rotate%28-6 66 66%29'%3E%3Cpath d='M18 40V16l18-5v24'/%3E%3Cellipse cx='13' cy='40' rx='6' ry='4.5'/%3E%3Cellipse cx='31' cy='35' rx='6' ry='4.5'/%3E%3Cpath d='M80 70v24'/%3E%3Cellipse cx='75' cy='94' rx='6' ry='4.5'/%3E%3Cpath d='M80 70q10 4 10 14'/%3E%3Cpath d='M14 104h40M14 112h40M14 120h40'/%3E%3Ccircle cx='104' cy='30' r='5'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,color-mix(in srgb,#6d2a4f 70%,#ffffff 8%),#6d2a4f 75%);background-size:100% 100%,132px 132px,100% 100%;background-position:0 0,0 0,0 0}
html:root .bl-planart.is-plus_code{background-color:#efe9fe;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%236d4fd1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='0.16' transform='rotate%28-6 66 66%29'%3E%3Cpath d='M22 14l-10 10 10 10M44 14l10 10-10 10M36 10l-6 28'/%3E%3Cpath d='M84 70h20M84 80h12'/%3E%3Cpath d='M20 90q-6 0-6 6v6q0 4-4 4q4 0 4 4v6q0 6 6 6M44 90q6 0 6 6v6q0 4 4 4q-4 0-4 4v6q0 6-6 6'/%3E%3Ccircle cx='100' cy='26' r='5'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#e3d9fd,#f3effe 70%);background-size:132px 132px,100% 100%;background-position:0 0,0 0}
html:root[data-theme="dark"] .bl-planart.is-plus_code{background-color:#3d2c78;background-image:radial-gradient(circle at 50% 78%,color-mix(in srgb,#d2c4ff 34%,transparent),transparent 62%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23b9a2ff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='0.42' transform='rotate%28-6 66 66%29'%3E%3Cpath d='M22 14l-10 10 10 10M44 14l10 10-10 10M36 10l-6 28'/%3E%3Cpath d='M84 70h20M84 80h12'/%3E%3Cpath d='M20 90q-6 0-6 6v6q0 4-4 4q4 0 4 4v6q0 6 6 6M44 90q6 0 6 6v6q0 4 4 4q-4 0-4 4v6q0 6-6 6'/%3E%3Ccircle cx='100' cy='26' r='5'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,color-mix(in srgb,#3d2c78 70%,#ffffff 8%),#3d2c78 75%);background-size:100% 100%,132px 132px,100% 100%;background-position:0 0,0 0,0 0}
html:root .bl-planart.is-all_access{background-color:var(--study-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%230e7c86' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='0.16' transform='rotate%28-6 66 66%29'%3E%3Cpath d='M14 20h16M22 12v16'/%3E%3Cpath d='M80 14l-8 8 8 8M96 14l8 8-8 8'/%3E%3Cpath d='M30 98V74l18-5v24'/%3E%3Cellipse cx='25' cy='98' rx='6' ry='4.5'/%3E%3Cellipse cx='43' cy='93' rx='6' ry='4.5'/%3E%3Cpath d='M86 82l7 7 14-14'/%3E%3Cpath d='M60 50h12M66 44v12'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,color-mix(in srgb,var(--gold) 16%,var(--study-tint)),var(--study-tint) 70%);background-size:132px 132px,100% 100%;background-position:0 0,0 0}
html:root[data-theme="dark"] .bl-planart.is-all_access{background-color:#145e66;background-image:radial-gradient(circle at 50% 78%,color-mix(in srgb,#a8eef2 34%,transparent),transparent 62%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%236fe0e8' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='0.42' transform='rotate%28-6 66 66%29'%3E%3Cpath d='M14 20h16M22 12v16'/%3E%3Cpath d='M80 14l-8 8 8 8M96 14l8 8-8 8'/%3E%3Cpath d='M30 98V74l18-5v24'/%3E%3Cellipse cx='25' cy='98' rx='6' ry='4.5'/%3E%3Cellipse cx='43' cy='93' rx='6' ry='4.5'/%3E%3Cpath d='M86 82l7 7 14-14'/%3E%3Cpath d='M60 50h12M66 44v12'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,color-mix(in srgb,#145e66 70%,#ffffff 8%),#145e66 75%);background-size:100% 100%,132px 132px,100% 100%;background-position:0 0,0 0,0 0}