/* Brainlag Code. Our own CSS, no framework.
   The system: LINES (each track is a line, lessons are stations, modules are segments), the SLAB (code always
   lives on deep navy, in both themes), and DEV NOODLE (assets/js/noodle.js).
   Since Oct 2026 the site wears brainlag.space's design system (brainlag.space/public/assets/css/brainlag.css): its
   tokens (paper, surface, sunk, ink, the teal study colour, radii, shadow), its faces (BL Display for headings, Onest
   for text), its buttons (a 10 px corner with a lip), its header and footer and its course cards. Violet is Brainlag
   Code's plan colour (#a78bfa on dark, the Code plan mark). One colour per track. */

@font-face {
  font-family: "Onest";
  src: url(../fonts/onest-latin.woff2?v=324d4be3f2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* brainlag.space's display face (Fredoka, OFL; its "BL Display", bl-display2.woff2) */
@font-face {
  font-family: "BL Display";
  src: url(../fonts/bl-display.woff2?v=6e679b6386) format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(../fonts/jetbrains-mono-latin.woff2?v=340e696a95) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens (brainlag.css values; the old names stay, so every rule below follows) ---------- */
:root {
  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "BL Display", "Onest", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --top-h: 60px;
  --gut: clamp(16px, 3.2vw, 56px);
  --slab-h: clamp(440px, calc(100dvh - var(--top-h) - 36px), 1040px);
  --r1: 14px; --r2: 18px; --r3: 26px; --pill: 10px;
  --shadow: 0 1px 2px rgba(21, 54, 90, .06), 0 6px 18px rgba(21, 54, 90, .07);
  --pop: 0 16px 40px rgba(21, 54, 90, .18);
  /* light: brainlag.space's paper, white surface, sunk blue-grey */
  --paper: #f4f9ff;
  --paper-0: #ffffff;
  --paper-2: #e6f1fc;
  --paper-3: #d3e4f5;
  --rule: #d5e0ec;
  --rule-2: #c3d2e3;
  --ink: #15365a;
  --ink-2: #2c4a6b;
  --ink-3: #536b88;
  --outline: #15365a;          /* Noodle's line colour: speech bubbles share it */
  --bub-bg: #ffffff; --bub-ink: #15365a; --bub-ink-2: #2c4a6b;
  --teal: #0d9aa7;
  --teal-hi: #097883;
  --teal-edge: #065a62;
  --teal-ink: #ffffff;
  --teal-btn: #0a7f8a;
  --teal-text: #08707a;
  --teal-tint: #dcf3f2;
  --blue: #3a9be8; --blue-ink: #1f6fb5; --blue-tint: #e3f0fc;
  /* Brainlag Code's plan colour: violet (the Code plan mark) */
  --prem: #6a4bc4;
  --prem-edge: #4a3299;
  --prem-text: #5536ad;
  --prem-tint: #eee8fb;
  --prem-ink: #ffffff;
  --gold: #ffc23d;
  --ok: #13804f;
  --ok-fill: #20a067;
  --ok-tint: #e3f5ea;
  /* what is free (owner, 13 Oct: one colour across brainlag.space and here, so it is obvious what is free): a leaf green,
     never teal, never a done mark. --free is text and ticks, --free-bg its chip. 5.3:1 on its bg, 5.7:1 on the page */
  --free: #25721a;
  --free-bg: #e4f6da;
  --bad: var(--warn-ink);   /* errors and danger in amber (coordinator, 12 Oct: no red) */
  --bad-tint: var(--warn-bg);
  /* the same on the slab, which is navy in both themes: brainlag.css's dark warn values */
  --slab-warn: #ffc23d; --slab-warn-bg: #33280f; --slab-warn-ink: #ffd877; --slab-warn-mark: rgba(255, 194, 61, .22);
  --warn-ink: #8a4b00; --warn-bg: #ffe9c2;   /* brainlag.css: a miss is amber, never red */
  --key-2: #ffffff;            /* secondary button face (brainlag.css --btn-2) */
  --key-2-edge: #7a8fa8;
  --key-2-lip: #c3d2e3;
  --key-2-hover: #eef5fd;
  /* the slab: always navy */
  --slab: #0d2038;
  --slab-2: #132c4b;           /* tab bar, toolbar */
  --slab-3: #1d3b60;           /* lines inside the slab */
  --slab-out: #091829;         /* output pane */
  --slab-ink: #eaf1f9;
  --slab-mute: #94abc3;
  --band: #15365a;             /* navy colour block (error band) */
  --t-python: #ffc83d; --t-python-text: #7f5b00; --t-python-band: #fcecc0;
  --t-web: #ff7a3d; --t-web-text: #a8420f; --t-web-band: #fdd9c4;
  --t-sql: #3a9be8; --t-sql-text: #1b65a6; --t-sql-band: #cfe3f4;
  --t-c: #f0567e; --t-c-text: #b8204b; --t-c-band: #f9d3db;
  --band-ink: #15365a;
  --tc: var(--teal);
  --tc-text: var(--teal-text);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .25);
  --pop: 0 16px 40px rgba(0, 0, 0, .5);
  --paper: #0b1626;
  --paper-0: #12233a;
  --paper-2: #081120;
  --paper-3: #1a2c44;
  --rule: #22385a;
  --rule-2: #2f4868;
  --ink: #ffffff;
  --ink-2: #c8d7e8;
  --ink-3: #9db3c9;
  --outline: #6f9fd0;
  --bub-bg: #12233a; --bub-ink: #ffffff; --bub-ink-2: #c8d7e8;
  --teal-hi: #097883;
  --teal-text: #2cc6d1;
  --teal-tint: #0f3438;
  --blue: #5aaff0; --blue-ink: #7cc0f5; --blue-tint: #13304f;
  --prem: #a78bfa;
  --prem-edge: #6d55c4;
  --prem-text: #c4b5fd;
  --prem-tint: #241d45;
  --prem-ink: #120c24;
  --ok: #3fd59a;
  --ok-tint: #10301f;
  --free: #79dc84;   /* 7.5:1 on its bg, 10.7:1 on the dark page */
  --free-bg: #163a22;
  --bad: var(--warn-ink);
  --bad-tint: var(--warn-bg);
  --warn-ink: #ffc23d; --warn-bg: #33280f;
  --key-2: #22385a;
  --key-2-edge: #6b829d;
  --key-2-lip: #07101c;
  --key-2-hover: #2a4368;
  --slab: #07111f;
  --slab-2: #0d1c31;
  --slab-3: #1a3352;
  --slab-out: #050c17;
  --band: #102a44;
  --t-python-text: #ffcf5c;
  --t-web-text: #ff9a66;
  --t-sql-text: #74b9f2;
  --t-c-text: #ff819f;
  /* dark: every track band is the surface; the track colour lives in the badge, a thin edge and Noodle's line, never as a tint */
  --t-python-band: #12233a; --t-web-band: #12233a; --t-sql-band: #12233a; --t-c-band: #12233a;
  --band-ink: #ffffff;
  color-scheme: dark;
}
.t-python { --tc: var(--t-python); --tc-text: var(--t-python-text); --tc-band: var(--t-python-band); }
.t-web { --tc: var(--t-web); --tc-text: var(--t-web-text); --tc-band: var(--t-web-band); }
.t-sql { --tc: var(--t-sql); --tc-text: var(--t-sql-text); --tc-band: var(--t-sql-band); }
.t-c { --tc: var(--t-c); --tc-text: var(--t-c-text); --tc-band: var(--t-c-band); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
.icon { flex: none; width: 20px; height: 20px; }
code, kbd, pre { font-family: var(--mono); }
code, pre, kbd, .cm-editor, .console, .console-out, .compare pre, .dbtable table, .error-block, .n, .r-n, .sl-n { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); font: 500 11px/16px var(--mono); text-align: center; color: inherit; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; line-height: 1.45; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 300; padding: 10px 14px; border-radius: 8px; background: var(--teal-btn); color: var(--teal-ink); font-weight: 600; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--teal-text); outline-offset: 2px; }   /* no border-radius here: the ring follows the element's own corners */
::selection { background: color-mix(in srgb, var(--teal) 35%, transparent); }
.display { font-size: clamp(40px, 2.6vw + 16px, 78px); line-height: .98; font-weight: 700; letter-spacing: -.035em; }
.wrap { padding-inline: var(--gut); }
.meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
.m-prem { display: inline-flex; align-items: center; gap: 4px; color: var(--prem-text); font-weight: 600; }
.m-prem .icon { width: 14px; height: 14px; }
.is-entitled .lh-meta .m-prem { display: none; }
.tag { font-weight: 600; }
.tag .icon { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; margin-right: 3px; }
.tag-free { color: var(--free); }
.tag-prem { color: var(--prem-text); }

/* ---------- buttons: brainlag.css .b (a 10 px corner, a 2 px edge, a 3 px lip under it) ---------- */
.btn { --edge: var(--key-2-edge); --lip-c: var(--key-2-lip); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 2px solid var(--edge); border-radius: var(--pill); background: var(--key-2); color: var(--ink); font: 700 16px/1.1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; 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); }
.btn:hover { background: var(--key-2-hover); }
.btn:active { transform: scale(.98); }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { --edge: transparent; --lip-c: var(--teal-edge); background: var(--teal-btn); color: var(--teal-ink); }
.btn-primary:hover { background: var(--teal-hi); }
.btn-prem { --edge: transparent; --lip-c: var(--prem-edge); background: var(--prem); color: var(--prem-ink); }
.btn-prem:hover { background: color-mix(in srgb, var(--prem) 88%, #000); }
.btn-light { --edge: transparent; --lip-c: #cfc6e8; background: #fff; color: #4a3299; }
.btn-light:hover { background: #f6f2ff; }
.btn-ghost { --edge: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.btn-ghost:active { transform: none; }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 17px; }
.btn-icon { width: 40px; min-height: 40px; height: 40px; padding: 0; }
@media (pointer: coarse) { .btn-sm { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.btn-block { display: flex; width: 100%; }
.btn:disabled, .btn.is-off { opacity: .45; cursor: default; pointer-events: none; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--paper-2); }
.seg > button, .seg > label { display: inline-flex; align-items: center; justify-content: center; flex: 1; height: 38px; padding: 0 16px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 600 14.5px/1 var(--font); cursor: pointer; }
.seg > button[aria-selected="true"], .seg > .seg-in:checked + label { background: var(--paper-0); color: var(--ink); box-shadow: var(--shadow); }
.seg-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-in:focus-visible + label { outline: 3px solid var(--teal-text); outline-offset: 1px; }
.input { display: block; width: 100%; height: 52px; padding: 0 16px; border: 2px solid var(--rule); border-radius: 10px; background: var(--paper-0); color: var(--ink); font: 400 16px/24px var(--font); transition: border-color .15s ease; }
textarea.input { height: auto; padding: 10px 14px; font: 14px/1.5 var(--mono); resize: vertical; }
.input:focus { outline: none; border-color: var(--teal); }

/* ---------- track glyphs ---------- */
.glyph { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--tc); color: #0e1620; font: 700 12px/1 var(--mono); letter-spacing: -.04em; }
.glyph.t-python { background: var(--t-python); } .glyph.t-web { background: var(--t-web); } .glyph.t-sql { background: var(--t-sql); } .glyph.t-c { background: var(--t-c); }
/* the languages' own marks in one colour, the tile's ink (tools/build.py TRACK_MARK; owner, 8 Oct): the shape unaltered,
   from assets/img/marks/<mark>-mono.svg; the JS mark is a full square, so it sits a little smaller */
.glyph.mk-javascript::before, .glyph.mk-c::before { content: ""; width: 58%; height: 58%; background: currentColor; }
.glyph.mk-javascript::before { width: 52%; height: 52%; -webkit-mask: url(../img/marks/javascript-mono.svg?v=6adbb40512) center / contain no-repeat; mask: url(../img/marks/javascript-mono.svg?v=6adbb40512) center / contain no-repeat; }
.glyph.mk-c::before { -webkit-mask: url(../img/marks/c-mono.svg?v=de9af39525) center / contain no-repeat; mask: url(../img/marks/c-mono.svg?v=de9af39525) center / contain no-repeat; }
.glyph-xs { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; }
.glyph-sm { width: 28px; height: 28px; font-size: 11px; }
.glyph-md { width: 38px; height: 38px; font-size: 13px; border-radius: 9px; }
.glyph-xl { width: .78em; height: .78em; border-radius: .14em; font-size: 1em; }
.glyph-xl { font-size: inherit; }
.th-name .glyph-xl { width: clamp(44px, 2.4vw + 18px, 76px); height: clamp(44px, 2.4vw + 18px, 76px); font-size: clamp(15px, .7vw + 8px, 24px); border-radius: 14px; }
.dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--slab-mute); }
.d-python { background: var(--t-python); }
.d-js, .d-web, .d-javascript, .d-html, .d-css { background: var(--t-web); }
.d-sql { background: var(--t-sql); }
.d-c { background: var(--t-c); }

/* ---------- top bar: brainlag.space's header (components/header.php .blh) ---------- */
.topbar { position: sticky; top: 0; z-index: 100; background: var(--paper-0); box-shadow: 0 2px 12px rgba(21, 54, 90, .08); }
:root[data-theme="dark"] .topbar { box-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.tb-in { display: flex; align-items: center; gap: 4px; height: var(--top-h); padding: 0 var(--gut); }
/* Content pages wear brainlag.space's container (13 Oct 2026): the top bar like its header (1200 px, centred, 16 px in
   on the left and 8 px on the right) and every band's content like its .wrap (1200 px, 24 px in), so the logo, the
   links and the h1 stay put when you cross between the sites. Bands keep their full-width backgrounds: --gut becomes
   the distance to the container, and a band's padding resolves against the page's width. The lesson player and the
   playground editor are app surfaces and stay full width. */
body:not(.page-lesson):not(.page-pg) { --gut: max(clamp(16px, 3.2vw, 24px), calc((100% - 1200px) / 2 + 24px)); }
body:not(.page-lesson):not(.page-pg) .tb-in { max-width: 1200px; margin-inline: auto; padding: 0 8px 0 16px; }
.brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; margin-right: 14px; color: var(--ink); white-space: nowrap; }
.brand .logo { width: 36px; height: 36px; flex: none; }
.brand .logo img { width: 100%; height: 100%; border-radius: 50%; }
.brand .title { display: flex; flex-direction: column; font: 700 23px/1.02 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.brand .title-sub { font-size: .62em; font-weight: 650; letter-spacing: .01em; color: var(--prem-text); white-space: nowrap; }
.ts-wrap { position: relative; flex: none; }
.ts-btn { gap: 8px; padding: 0 10px 0 8px; color: var(--ink); font-weight: 700; }
.ts-btn .glyph { background: var(--tc); }
.ts-chev { width: 16px !important; height: 16px !important; transition: transform .15s ease; }
.ts-btn[aria-expanded="true"] .ts-chev { transform: rotate(180deg); }
.ts-menu { display: none; position: absolute; left: 0; top: calc(100% + 10px); z-index: 120; width: 360px; max-width: calc(100vw - 24px); padding: 12px; border-radius: var(--r3); background: var(--paper-0); box-shadow: var(--pop); }
.ts-menu.show { display: block; }
.ts-h { padding: 4px 8px 10px; font-weight: 700; font-size: 14px; color: var(--ink-3); }
.ts-menu ul { margin: 0; padding: 0; list-style: none; }
.ts-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 10px; border-radius: 14px; }
.ts-item .glyph { grid-row: 1 / 3; }
.ts-name { font-weight: 650; }
.ts-n { grid-column: 2; font-size: 13.5px; color: var(--ink-3); }
.ts-go { grid-column: 3; grid-row: 1 / 3; font-size: 13.5px; font-weight: 650; color: var(--teal-text); white-space: nowrap; }
.ts-item:hover, .ts-item:focus-visible { background: var(--blue-tint); outline-offset: -2px; }
.ts-item[aria-current="true"] { background: var(--teal-tint); }
.ts-all { display: block; margin-top: 6px; padding: 10px; border-radius: 12px; font-weight: 700; font-size: 15px; color: var(--teal-text); }
.ts-all:hover { background: var(--blue-tint); }
.ts-mini { border-radius: 9px; }
.tb-nav { flex: 0 1 auto; min-width: 0; margin-left: 6px; }
.tb-links { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tb-links a { display: flex; align-items: center; height: 40px; padding: 0 13px; border-radius: var(--pill); font-size: 16px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.tb-links a:hover { background: var(--blue-tint); color: var(--blue-ink); }
.tb-links a[aria-current="page"] { background: var(--teal-tint); color: var(--teal-text); }
.tb-phone { display: none; }
.tb-right { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.tb-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--pill); background: none; color: var(--ink-2); font: 700 15.5px/1 var(--font); white-space: nowrap; cursor: pointer; }
.tb-btn:hover, .tb-btn[aria-expanded="true"] { background: var(--blue-tint); color: var(--blue-ink); }
.tb-btn .icon { width: 19px; height: 19px; }
.icon-btn { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--blue-tint); color: var(--blue-ink); }
.icon-btn .icon { width: 19px; height: 19px; }
/* "Get Code": brainlag.space's plan button, in the Code plan's violet; not for an account that has the course */
.tb-get { flex: none; display: inline-flex; align-items: center; height: 38px; margin: 0 6px; padding: 0 15px; border-radius: var(--pill); background: var(--prem); color: var(--prem-ink); font: 700 15px/1 var(--font); white-space: nowrap; }
.tb-get:hover { background: color-mix(in srgb, var(--prem) 88%, #000); }
.tb-get:active { transform: scale(.97); }
/* the account: a person, or the account's first letter once signed in */
.top-account .av { display: none; }
.top-account.is-in .icon { display: none; }
.top-account.is-in .av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font: 700 15px/1 var(--f-display); }
:root[data-theme="dark"] .top-account.is-in .av { color: #0b1626; }
/* the theme: Same as device, Light, Dark */
.th-wrap { position: relative; flex: none; }
.th-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; width: 240px; padding: 8px; border-radius: var(--r2); background: var(--paper-0); box-shadow: var(--pop); }
.th-menu.show { display: block; }
.th-lab { margin: 4px 6px 6px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.th-menu [role="radiogroup"] { display: grid; gap: 2px; }
.th-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: 400 15px/1.2 var(--font); text-align: left; cursor: pointer; }
.th-menu button:hover { background: var(--blue-tint); }
.th-menu button[aria-checked="true"] { font-weight: 700; }
.th-menu .ck { margin-left: auto; color: var(--teal-text); }
.th-menu button:not([aria-checked="true"]) .ck { display: none; }
@media (pointer: coarse) { .th-menu button { min-height: 46px; } }
.menu-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.menu-btn span { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* where the row is tight, brainlag.space's links step out first (they are in the footer and the phone menu) */
@media (max-width: 1279.98px) { .tb-links .tb-main:not(:last-child) { display: none; } .tb-links a { padding: 0 10px; } }
@media (max-width: 1079.98px) { .tb-get { padding: 0 12px; font-size: 14px; } .tb-links a { padding: 0 8px; } }
.pp-wrap { position: relative; }
/* over the page below it, as the theme menu (z-index 120): with none, a course page's hero and the home editor painted over it, so only its edges showed (19 Oct 2026) */
.pp { display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 120; width: 400px; max-width: calc(100vw - 24px); padding: 20px; border-radius: var(--r3); background: var(--paper-0); box-shadow: var(--pop); }
.pp.show { display: block; }
.pp-h { margin: 0 0 14px; font-weight: 650; font-size: 17px; }
.pp-count { margin-left: 6px; font-weight: 500; font-size: 15px; color: var(--ink-3); }
.pp-cont { display: block; padding: 14px 16px 16px; border-radius: var(--r1); background: var(--teal-btn); color: var(--teal-ink); margin-bottom: 14px; }
.pp-cont:hover { background: var(--teal-hi); }
.pp-cont .k { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 600; }   /* full white: 4.76:1 on --teal-btn (at .8 it was 3.6:1) */
.pp-cont .t { display: block; font-weight: 700; font-size: 17px; line-height: 1.3; }
.pp-tracks { display: flex; flex-direction: column; gap: 4px; }
.pp-tracks a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 8px; border-radius: 10px; }
.pp-tracks a:hover { background: var(--blue-tint); }
.pp-tracks .glyph { grid-row: 1 / 3; width: 30px; height: 30px; }
.pp-name { font-weight: 600; }
.pp-n { font: 500 12.5px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }   /* "0 of 39" on one line */
.ticks { display: flex; gap: 3px; align-items: center; }
.ticks span { flex: 1; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--tc) 28%, var(--paper-2)); }
.ticks span.done { background: var(--tc); }
.pp-ticks { grid-column: 2 / 4; }
.pp-foot { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.pp-foot a { color: var(--teal-text); font-weight: 600; }
.theme-btn .i-sun, .theme-btn .i-moon { display: grid; place-items: center; }
.i-sun { display: none !important; }
[data-theme="dark"] .i-sun { display: grid !important; }
[data-theme="dark"] .i-moon { display: none !important; }

/* ---------- section headers: title left, words right (asymmetric, uses the width) ---------- */
.sec-h { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 48px; align-items: end; margin-bottom: clamp(24px, 2.4vw, 40px); }
.sec-t { font-size: clamp(26px, 1vw + 18px, 40px); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; }
.sec-p { max-width: 62ch; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.sec-p a, .plan-note a, .lede a { color: var(--teal-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sec-link { justify-self: start; font-weight: 650; color: var(--teal-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .sec-h { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sec-h .sec-link { grid-column: 2; }
}
.plan-note { margin-top: 28px; color: var(--ink-2); font-size: 15px; }

/* ---------- the slab ---------- */
.slab { --syn-kw: #cfa8ff; --syn-str: #a8e389; --syn-num: #ffb27a; --syn-com: #8299b2; --syn-fn: #7fcdf8; --syn-type: #ffd56e; --syn-prop: #80e0d0; --syn-punc: #aebfd0;
  position: relative; background: var(--slab); color: var(--slab-ink); border-radius: 16px; container-type: inline-size; }
:root[data-theme="dark"] .slab { box-shadow: 0 0 0 1px var(--slab-3); }
.slab a:not(.btn) { color: inherit; }

/* ---------- lines and stations ---------- */
/* ---------- the module journey (track pages, Learn): modules are stations; only the open one shows its lessons ---------- */
.jr { --noodle: 51px; --bar: 8px; --pad: 12px; margin: 0; }
.line-md.jr { --noodle: 38px; --bar: 7px; }
.jr ol { margin: 0; padding: 0; list-style: none; }
.jr .jr-mods { position: relative; display: flex; gap: 8px; padding: calc(var(--noodle) * .85 - 4px) 0 88px; }   /* the stops' panel (80 px) and an 8 px gap: the open card and the panel are two whole cards, every corner round (owner, 12 Oct) */
.jr-m { flex: 1 1 0; min-width: 0; }
.jr-end { flex: 0 0 auto; min-width: 104px; }
.jr-a { position: relative; display: grid; align-content: start; gap: 4px; height: 100%; padding: var(--pad); border-radius: 12px; color: var(--ink); }
.jr-a:hover, .jr-m.is-open > .jr-a { background: var(--paper-2); }
.jr-m.is-open > .jr-a { border-radius: 12px; }
.jr-bar { order: -1; display: block; height: var(--bar); margin-bottom: 8px; border-radius: calc(var(--bar) / 2); background: var(--rule); overflow: hidden; }
.jr-fill { display: block; width: calc(var(--p, 0) * 100%); height: 100%; background: var(--tc); }
.jr-name { font-weight: 650; font-size: 16px; line-height: 1.25; }
.line-md .jr-name { font-size: 15px; }
.jr-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14px; line-height: 1.3; color: var(--ink-3); }
.jr-tier { display: inline-flex; align-items: center; gap: 4px; }
.jr-premium .jr-tier { color: var(--prem-text); font-weight: 600; }
.jr-tier .icon { width: 14px; height: 14px; }
.is-entitled .jr-tier .icon { display: none; }
.jr-m.is-done .jr-ct { color: var(--ok); font-weight: 650; }
.jr-end .jr-bar { width: var(--bar); height: var(--bar); border-radius: 2px; background: var(--ink); }
.line.is-complete .jr-end .jr-bar { background: var(--gold); }
.st-done-t:empty { display: none; }
.st-done-t { color: var(--ok); font-weight: 650; }
/* Noodle stands on your module, where your progress in it has got to (the current line only; noodle.js marks it). Fixed size. */
.line.is-current-line .jr-m.is-cur > .jr-a::before, .line-lg .jr-m.is-cur > .jr-a::before { content: ""; position: absolute; z-index: 2; top: calc(var(--pad) - var(--noodle) * .852 + 2px); left: clamp(var(--pad), calc(var(--pad) + (100% - 2 * var(--pad)) * var(--p, 0) - var(--noodle) / 2), calc(100% - var(--pad) - var(--noodle))); width: var(--noodle); height: calc(var(--noodle) * .852); background: url(../noodle/glyph.svg?v=f8f551c4f2) center bottom / contain no-repeat; pointer-events: none; }
/* Learn's "Up next" card carries only the module you are in */
.cont .jr-m:not(.is-open) { display: none; }
/* the open module's lesson stops, one row under the stations */
.jr-sts { display: none !important; }
.jr-m.is-open > .jr-sts { position: absolute; left: 0; right: 0; bottom: 0; display: flex !important; align-items: flex-start; height: 80px; padding: 16px 12px 0; border-radius: 12px; background: var(--paper-2); }
.jr-sts > li { position: relative; flex: 1 1 0; max-width: 84px; display: flex; justify-content: center; }
.jr-sts > li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; left: 50%; right: -50%; top: 8px; height: 3px; background: var(--rule); }
.jr-sts > li:has(> .st.done):not(:last-child)::after { background: var(--tc); }
.st { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 2px 4px; border-radius: 6px; color: var(--ink-3); }
.st-dot { display: block; width: 19px; height: 19px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3.5px var(--tc); }
.st[data-tier="premium"] .st-dot { box-shadow: inset 0 0 0 3.5px var(--ink-3); }
.is-entitled .st[data-tier="premium"] .st-dot { box-shadow: inset 0 0 0 3.5px var(--tc); }
.st.done .st-dot { background: var(--tc); box-shadow: none; }
.st.is-target .st-dot { background: var(--paper); box-shadow: inset 0 0 0 5px var(--ink); }
.st.is-target .st-n { color: var(--ink); font-weight: 700; }
.st.skipped .st-dot { box-shadow: none; border: 3px dashed var(--tc); }
.st.cp-retry .st-dot { box-shadow: inset 0 0 0 3.5px var(--bad); }
.st[data-kind] .st-dot { border-radius: 3px; transform: rotate(45deg) scale(.86); }
.st[data-kind="final"] .st-dot { transform: rotate(45deg) scale(1.02); }
.st-n { font: 600 12.5px/1 var(--mono); }
.st:hover .st-n { color: var(--ink); }
.st-tip { position: absolute; z-index: 5; bottom: calc(100% + 10px); left: 50%; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st:hover .st-tip, .st:focus-visible .st-tip { width: auto; height: auto; overflow: visible; clip: auto; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 600 13.5px/1.2 var(--font); transform: translateX(-50%); pointer-events: none; }
.jr-sts > li:first-child .st-tip { left: 0; transform: none; }
.jr-sts > li:last-child .st-tip { left: auto; right: 0; transform: none; }
.st-tip .n { opacity: .65; margin-right: 4px; }
.st-kw { color: var(--gold); }
/* phones and narrow tablets: the modules as a list, the open one's stops under it */
@media (max-width: 700px) {
  .jr .jr-mods { display: block; padding: 0; }
  .jr-m + .jr-m { margin-top: 4px; }
  .jr-a { padding-right: calc(var(--noodle) + 2 * var(--pad)); }
  .jr-meta { justify-content: flex-start; gap: 2px 14px; }
  .jr-bar { order: 0; margin: 6px 0 0; }
  .jr-end .jr-bar { display: none; }
  .line.is-current-line .jr-m.is-cur > .jr-a::before, .line-lg .jr-m.is-cur > .jr-a::before { top: 50%; left: auto; right: var(--pad); transform: translateY(-50%); }
  .jr-m.is-open > .jr-a { border-radius: 12px 12px 0 0; }
  .jr-m.is-open > .jr-sts { position: static; height: auto; padding: 4px 6px 14px; border-radius: 0 0 12px 12px; }
  .jr-sts > li { max-width: none; }
  .st-n { font-size: 11px; }
}

/* ---------- lesson rows: nodes on a module's own line ---------- */
.rows { position: relative; display: flex; flex-direction: column; gap: 2px; }
.rows::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--tc) 55%, transparent); }
.row-l { position: relative; display: grid; grid-template-columns: 30px 30px minmax(0, 1fr) auto; gap: 0 10px; align-items: start; padding: 12px 12px 12px 8px; border-radius: 12px; color: var(--ink); transition: background-color .15s ease; }
.row-l:hover { background: color-mix(in srgb, var(--tc) 14%, var(--paper)); }
.node { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 4px var(--tc); }
.node .icon { width: 15px; height: 15px; }
.n-lock, .n-done { display: none; }
.row-l[data-tier="premium"] .node { background: var(--prem); box-shadow: none; color: #fff; }
.row-l[data-tier="premium"] .n-lock { display: grid; }
.is-entitled .row-l[data-tier="premium"] .node { background: var(--paper); box-shadow: inset 0 0 0 4px var(--tc); }
.is-entitled .row-l[data-tier="premium"] .n-lock { display: none; }
.row-l.done .node { background: var(--tc); box-shadow: none; color: #0e1620; }
.row-l.done .n-lock { display: none; }
.row-l.done .n-done { display: grid; }
.row-l.done .n-done .icon { stroke-width: 3.2; }
.row-l.is-target .node { box-shadow: inset 0 0 0 4px var(--ink); }
.row-l.is-target { background: color-mix(in srgb, var(--tc) 18%, var(--paper)); }
.row-l.is-target .r-st { color: var(--ink); }
.r-n { padding-top: 6px; font: 500 13.5px/1.3 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.r-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 3px; }
.r-t { font-size: 17.5px; line-height: 1.3; font-weight: 650; }
.r-d { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.r-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 5px; text-align: right; }
.r-st { font-size: 13.5px; font-weight: 700; color: var(--teal-text); white-space: nowrap; }
.r-st:empty { display: none; }
.row-l.done .r-st { color: var(--ok); }
.r-dur { font: 500 13px/1.3 var(--mono); color: var(--ink-3); white-space: nowrap; }
.row-l.compact { padding-block: 8px; align-items: center; }
.row-l.compact .r-n, .row-l.compact .r-main, .row-l.compact .r-side { padding-top: 0; }
.row-l.compact .r-t { font-size: 16px; font-weight: 600; }
.row-l.compact .node { width: 26px; height: 26px; margin-left: 2px; box-shadow: inset 0 0 0 3.5px var(--tc); }
.row-l.compact.is-target .node { box-shadow: inset 0 0 0 3.5px var(--ink); }
.rows:has(.compact)::before { left: 22px; top: 18px; bottom: 18px; }
/* long lists (owner, 12 Oct 2026): the next few rows show, the rest wait behind "Show all" (build.py fold_btn, app.js) */
.rows[data-fold]:not(.is-open) > .r-more, .pj-rows[data-fold]:not(.is-open) > .r-more { display: none; }
.rows-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 10px 18px; border: 0; border-radius: var(--pill); background: var(--paper-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.rows-all:hover { background: var(--paper-3); }
.rows-all[hidden] { display: none; }
.ra-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.rows-all[aria-expanded="true"] .ra-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ra-chev { transition: none; } }

/* modules side by side */
.map, .mcols { container-type: inline-size; container-name: map; }
.map-in { display: grid; }
.mcol-h { margin-bottom: 14px; padding-left: 8px; }
.mcol-t { font-size: clamp(22px, .5vw + 18px, 28px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.mcol-t a:hover { color: var(--tc-text); }
.mcol-meta { margin-top: 6px; font-size: 14.5px; color: var(--ink-3); }
.mcol-d { margin-top: 8px; max-width: 46ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }

/* ---------- coach: Dev Noodle in the product ---------- */
.coach { display: flex; align-items: flex-end; gap: 20px; }
.coach-art { flex: none; width: var(--coach-w, 120px); }
.coach-art svg { width: 100%; height: auto; overflow: visible; }
.coach-say { position: relative; flex: 1 1 auto; min-width: 0; max-width: 60ch; margin-bottom: calc(var(--coach-w, 120px) * .4); padding: 13px 18px 14px; border: 2px solid var(--outline); border-radius: 16px; background: var(--bub-bg); color: var(--bub-ink); overflow-wrap: anywhere; }
/* The tail is one SVG drawn over the bubble's 2px border: its fill covers the border between the two joins and its
   two strokes (round caps centred on the border line) continue the outline, so there is no seam at any zoom. */
.coach-tail { position: absolute; left: -14px; bottom: 10px; width: 20px; height: 20px; overflow: visible; pointer-events: none; }
/* Beside the code (lesson column, error coach) his line changes length on every run. Bottom-aligned, a longer
   explanation pushed Noodle down and a shorter one pulled him back up (up to 78px per run). Here he is pinned to the
   top of his row and the bubble grows downward, so he never moves. */
.coach-lesson, .coach-err { align-items: flex-start; }
.coach-lesson .coach-say, .coach-err .coach-say { margin-bottom: 0; margin-top: calc(var(--coach-w, 120px) * .1); }
.coach-lesson .coach-tail, .coach-err .coach-tail { bottom: auto; top: calc(var(--coach-w, 120px) * .32); }
.coach-tail .ct-f { fill: var(--bub-bg); }
.coach-tail .ct-s { fill: none; stroke: var(--outline); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.coach-line { font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--bub-ink); }
.coach-more:empty { display: none; }
.coach-more { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--bub-ink-2); }
.coach-more p + p { margin-top: 6px; }
.coach-more code { padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--bub-ink) 9%, transparent); font-size: .9em; }
.coach-more .ch-hint { display: flex; gap: 8px; margin-top: 8px; }
.coach-more .ch-hint:first-child { margin-top: 0; }
.ch-lock { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--prem-text); }
.ch-lock svg { width: 15px; height: 15px; }
.coach-more .ch-hint b { flex: none; font: 700 13px/1.6 var(--mono); color: var(--teal-text); }
.coach[data-state="happy"] .coach-line, .coach[data-state="celebrating"] .coach-line, .coach[data-state="achievement"] .coach-line { color: var(--ok); }
.coach-perch { --coach-w: 112px; }
.has-progress [data-coach-track], .has-progress [data-coach-dash], .has-progress [data-continue] { visibility: hidden; }
.noodle-art { display: block; height: auto; }
.noodle-art svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- home ---------- */
.h-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(32px, 4vw, 88px); align-items: center; padding: clamp(28px, 4vh, 64px) var(--gut) clamp(40px, 5vh, 80px); }
.h-copy { max-width: 760px; }
.h-copy h1 { font-size: clamp(40px, 2.9vw + 14px, 84px); }
.h-2 { display: block; color: var(--teal-text); }
.h-sub { margin-top: 24px; max-width: 46ch; font-size: clamp(17px, .35vw + 15px, 21px); line-height: 1.55; color: var(--ink-2); }
.h-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.h-alt { font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--teal); text-underline-offset: 5px; }
.ide-next { margin-top: 18px; font-size: 15px; color: var(--ink-3); }
.ide-next a { color: var(--ink-2); font-weight: 600; }
.h-ide { display: flex; flex-direction: column; min-width: 0; }
.coach-home { --coach-w: clamp(92px, 6vw + 30px, 132px); position: relative; z-index: 2; align-self: flex-end; flex-direction: row-reverse; max-width: min(100%, 460px); margin: 0 clamp(8px, 2vw, 32px) -18px 0; }
.coach-home .coach-tail { left: auto; right: -14px; transform: scaleX(-1); }
.ide { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: clamp(400px, 64dvh, 700px); overflow: hidden; }
.ide-head { display: flex; background: var(--slab-2); border-radius: 16px 16px 0 0; }
.ide-tabs { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 8px; }
.ide-tabs::-webkit-scrollbar { display: none; }
.ide-tab { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 18px; border: 0; border-radius: 10px 10px 0 0; margin-top: 6px; background: none; color: var(--slab-mute); font: 500 14px/1 var(--mono); white-space: nowrap; cursor: pointer; }
.ide-tab:hover { color: var(--slab-ink); }
.ide-tab.active { background: var(--slab); color: var(--slab-ink); }
.ide-panel { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; min-width: 0; }
.ide .runbox { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto minmax(110px, 36%); min-height: 0; margin: 0; border-radius: 0; }
.ide.has-split .runbox { grid-template-rows: minmax(0, 1fr) auto auto var(--split-b); }
.ide .editor-wrap { overflow: auto; min-height: 0; }
.ide .rb-results { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.ide .output { flex: 1; max-height: none; }
.ide .editor .cm-editor, .ide .editor pre.code-static { min-height: 100%; }
@container (min-width: 760px) {
  .ide .runbox { grid-template-columns: minmax(0, 1fr) 12px minmax(260px, 40%); grid-template-rows: minmax(0, 1fr) auto; }
  .ide.has-split .runbox { grid-template-columns: minmax(0, 1fr) 12px var(--split-b); grid-template-rows: minmax(0, 1fr) auto; }
  .ide .editor-wrap { grid-area: 1 / 1; }
  .ide .toolbar { grid-area: 2 / 1; }
  .ide .split-bar { grid-area: 1 / 2 / 3 / 3; height: auto; }
  .ide .split-sep { inset: 0 -6px; cursor: col-resize; }
  .ide .split-sep::before { width: 4px; height: 44px; }
  .ide .split-max { display: none; }
  .ide .rb-results { grid-area: 1 / 3 / 3 / 4; }
  .ide .output { border-top: 0; }
}
.ide-status { display: flex; justify-content: space-between; gap: 16px; padding: 9px 18px; background: var(--slab-2); border-radius: 0 0 16px 16px; font: 12.5px/16px var(--mono); color: var(--slab-mute); }
.ide-status > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-empty, .pg-empty { margin: 0; color: var(--slab-mute); font: 15px/1.5 var(--font); max-width: 40ch; white-space: normal; }
.out-empty code { color: var(--slab-ink); }

.err-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 96px); align-items: center; padding: clamp(48px, 6vw, 96px) var(--gut); background: var(--band); color: #eaf1f9; }
.err-band .sec-t { color: #fff; }
.err-band .sec-p { margin: 16px 0 28px; color: #b9c9da; }
.eb-demo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eb-trace { margin: 0; padding: 20px 22px; overflow-x: auto; background: #050d18; font: 14.5px/1.7 var(--mono); white-space: pre; }
.eb-trace .err, .nf-trace .err { color: var(--slab-warn); }
.coach-err { --coach-w: clamp(96px, 5vw + 40px, 150px); }
.coach-err .coach-say { max-width: 60ch; }
@media (min-width: 1000px) { .err-band { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.h-proj, .faq { padding: clamp(48px, 6vw, 96px) var(--gut) 0; }
.faq { padding-bottom: clamp(48px, 6vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; }
/* questions: the heading and the way to ask beside a readable list (two columns only when each stays readable) */
.faq-side .sec-p { margin-top: 12px; }
.acc-i { max-width: 82ch; }
@media (min-width: 1000px) { .faq { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); align-items: start; } .faq-side { position: sticky; top: calc(var(--top-h) + 24px); } }
@media (min-width: 1560px) { .faq .faq-list { display: block; columns: 2; column-gap: clamp(40px, 4vw, 80px); } .acc-i { break-inside: avoid; } }

/* pick a course: four plain choices, no diagram */
.courses { padding: clamp(48px, 6vw, 96px) var(--gut); background: var(--paper-2); }
.cc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 3vw, 48px) clamp(24px, 2.4vw, 44px); margin: 0; padding: 0; list-style: none; }
/* four courses: one, two or four across, never three and an orphan */
@media (min-width: 640px) { .cc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .cc-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cc-name a { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(22px, .5vw + 18px, 27px); font-weight: 700; letter-spacing: -.02em; }
.cc-name a:hover { color: var(--tc-text); }
.cc-what { max-width: 42ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.cc-meta { font-size: 14.5px; color: var(--ink-3); }
.cc-st { margin-left: 10px; font-weight: 650; color: var(--ok); }
.cc-code { flex: 1 0 auto; margin-top: 4px; padding: 14px 16px; overflow-x: auto; border-radius: 12px; font-size: 13.5px; line-height: 1.65; --syn-kw: #cfa8ff; --syn-str: #a8e389; --syn-num: #ffb27a; --syn-com: #8299b2; --syn-fn: #7fcdf8; }
.cc-go { align-self: flex-start; margin-top: 6px; }

/* projects on the home page: one featured build, the rest as a short list */
.hp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px clamp(32px, 4vw, 80px); align-items: start; }
@media (min-width: 1000px) { .hp-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.pf { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 40px); border-radius: 16px; background: var(--tc-band); color: var(--band-ink); }
.pf-k { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; }
.pf-t { font-size: clamp(28px, 1.2vw + 18px, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; }
.pf-d { max-width: 54ch; font-size: 18px; line-height: 1.55; }
.pf-m { font-size: 15px; }
.pf:hover .pf-t { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.pl-list { margin: 0 0 16px; padding: 0; list-style: none; }
.pl { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 10px; }
.pl:hover { background: var(--paper-2); }
.pl-t { font-weight: 650; }
.pl-m { font-size: 14px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 599.98px) { .pl { grid-template-columns: 22px minmax(0, 1fr); } .pl-m { grid-column: 2; } }

/* project rows (home, track pages) */
.pj-rows { display: flex; flex-direction: column; }
.pj-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 14px 8px 14px 0; color: var(--ink); }
.pj-row:hover .pr-t { color: var(--tc-text); }
.pr-n { align-self: start; padding-top: 5px; color: var(--tc-text); font: 700 15px/1 var(--mono); }
.pr-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-t { display: inline-flex; align-items: center; gap: 8px; font-size: 18.5px; font-weight: 700; }
.pr-t .r-lock { color: var(--prem-text); }
.pr-t .r-lock .icon { width: 17px; height: 17px; }
.is-entitled .pr-t .r-lock { display: none; }
.pr-d { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.pr-meta { grid-column: 2; font-size: 14px; color: var(--ink-3); }
@media (min-width: 900px) {
  .pj-row { grid-template-columns: 52px minmax(0, 1fr) minmax(220px, auto); align-items: center; }
  .pr-meta { grid-column: 3; justify-self: end; text-align: right; }
}

/* FAQ accordion */
.acc { display: flex; flex-direction: column; }
.acc-i { }
.acc-i > summary { display: flex; align-items: center; gap: 18px; padding: 20px 4px; font-size: 18px; line-height: 1.35; font-weight: 650; cursor: pointer; list-style: none; }
.acc-i > summary::-webkit-details-marker { display: none; }
.acc-i > summary:hover { color: var(--teal-text); }
.acc-plus { position: relative; flex: none; width: 18px; height: 18px; }
.acc-plus::before, .acc-plus::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 18px; height: 3px; border-radius: 3px; background: var(--teal); transition: transform .2s ease; }
.acc-plus::after { transform: rotate(90deg); }
.acc-i[open] .acc-plus::after { transform: rotate(0deg); }
.acc-a { padding: 0 4px 22px 40px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 70ch; }
.acc-a a { color: var(--teal-text); font-weight: 600; }

/* ---------- track page ---------- */
.trk-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px clamp(32px, 4vw, 80px); padding: clamp(24px, 3vw, 48px) var(--gut) clamp(32px, 3vw, 56px); background: var(--tc-band); color: var(--band-ink); }
:root[data-theme="dark"] .trk-head { box-shadow: 0 1px 0 var(--rule); }
.trk-head .crumbs { color: var(--band-ink); }
.trk-head .crumbs [aria-current] { color: var(--band-ink); }
.th-name { display: flex; align-items: center; gap: .22em; margin-top: 18px; }
.th-name .glyph { background: var(--tc); color: #0e1620; }
.th-tag { margin-top: 18px; max-width: 54ch; font-size: clamp(17px, .3vw + 15px, 20px); line-height: 1.5; }
.th-tag strong { font-weight: 700; }
.th-stats { margin-top: 14px; font-size: 15px; font-weight: 550; }
.th-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
:root:not([data-theme="dark"]) .trk-head .btn-primary { --edge: #000; background: #0e1620; color: #fff; }
:root:not([data-theme="dark"]) .trk-head .btn-primary:hover { background: #1c2a3b; }
.th-free { font-weight: 600; font-size: 15px; }
.th-side { display: flex; flex-direction: column; min-width: 0; }
.th-side .coach-perch { --coach-w: clamp(88px, 4vw + 40px, 128px); position: relative; z-index: 2; align-self: flex-start; margin: 0 0 -16px 18px; max-width: 420px; }
.sig { margin: 0; padding: 22px 24px; }
.sig figcaption { margin-top: 14px; font: 12.5px/1.5 var(--mono); color: var(--slab-mute); }
.sig-code { margin: 0; font: 15px/1.75 var(--mono); color: var(--slab-ink); white-space: pre; overflow-x: auto; }
.sig-code .p, .sig-code .o { color: var(--slab-mute); } .sig-code .s { color: var(--syn-str); } .sig-code .m { color: var(--syn-num); } .sig-code .k { color: var(--syn-kw); }
.sig-grid { width: 100%; margin-top: 14px; border-collapse: collapse; font: 13.5px/1.4 var(--mono); }
.sig-grid th, .sig-grid td { padding: 6px 10px; box-shadow: 0 1px 0 var(--slab-3); text-align: left; }
.sig-grid th { color: var(--slab-mute); font-weight: 500; }
.sig-browser { border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--slab-3); }
.sb-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--slab-2); }
.sb-bar > span:not(.sb-url) { display: none; }
.sb-url { flex: 1; margin-left: 6px; padding: 3px 8px; border-radius: 5px; background: var(--slab); font: 11.5px/1.4 var(--mono); color: var(--slab-mute); }
.sb-page { padding: 16px 18px 18px; background: #fff; color: #182433; }
.sb-h { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: #0b7f8a; }
.sb-p { margin: 0 0 12px; font-size: 14px; line-height: 1.4; }
.sb-btn { display: inline-block; padding: 7px 13px; border-radius: 7px; font-size: 13.5px; background: #eef0f3; box-shadow: inset 0 0 0 1px #c8ccd2; }
.sig-mem { display: grid; gap: 7px; margin-top: 14px; }
.sm-row { display: flex; align-items: center; gap: 5px; font: 13px/1 var(--mono); }
.sm-a { width: 60px; color: var(--slab-mute); }
.sm-b { display: inline-grid; place-items: center; width: 32px; height: 28px; border-radius: 5px; color: var(--slab-mute); box-shadow: inset 0 0 0 1px var(--slab-3); }
.sm-b.on { color: #fff; background: color-mix(in srgb, var(--t-c) 35%, transparent); box-shadow: inset 0 0 0 1.5px var(--t-c); }
.sm-l { margin-left: 8px; font-weight: 700; }
@media (min-width: 1000px) {
  .trk-head { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); align-items: end; }
}
.trk-line { position: relative; padding: clamp(40px, 4vw, 72px) var(--gut) 8px; }
.th-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-weight: 650; color: var(--ok); }
.th-progress .ticks { display: none; }
.map { padding: clamp(28px, 3vw, 48px) var(--gut) 0; }
.map, .mcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px clamp(24px, 3vw, 56px); }
@container map (min-width: 860px) { .map > .mcol, .mcols > .mcol { min-width: 0; } }
@media (min-width: 900px) { .map, .mcols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* a course with four modules: two by two, then four across on wide screens (never three and an orphan) */
@media (min-width: 900px) { .map:has(> .mcol:nth-child(4)), .mcols:has(> .mcol:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .map:has(> .mcol:nth-child(4)), .mcols:has(> .mcol:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* five modules (the "going further" module): three then two wider ones, five across only when each stays readable */
@media (min-width: 900px) {
  .map:has(> .mcol:nth-child(5)), .mcols:has(> .mcol:nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .map:has(> .mcol:nth-child(5)) > .mcol, .mcols:has(> .mcol:nth-child(5)) > .mcol { grid-column: span 2; }
  .map:has(> .mcol:nth-child(5)) > .mcol:nth-child(n+4), .mcols:has(> .mcol:nth-child(5)) > .mcol:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 1800px) {
  .map:has(> .mcol:nth-child(5)), .mcols:has(> .mcol:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .map:has(> .mcol:nth-child(5)) > .mcol, .mcols:has(> .mcol:nth-child(5)) > .mcol, .map:has(> .mcol:nth-child(5)) > .mcol:nth-child(n+4), .mcols:has(> .mcol:nth-child(5)) > .mcol:nth-child(n+4) { grid-column: auto; }
}
.trk-proj { padding: clamp(48px, 5vw, 88px) var(--gut) 0; }

/* ---------- learn (dashboard) ---------- */
.dash { padding: 0 0 clamp(40px, 4vw, 72px); }
.dash > .plan-note { padding-inline: var(--gut); }
.dash-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 72px); align-items: end; padding: clamp(28px, 3vw, 56px) var(--gut); background: var(--paper-2); }
.dash-main h1 { font-size: clamp(34px, 1.6vw + 20px, 56px); line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.lede { margin-top: 12px; max-width: 60ch; font-size: 17px; color: var(--ink-2); }
.learn-continue:empty { display: none; }
.learn-continue { margin-top: 28px; }
.cont { display: grid; gap: 16px; }
.cont-k { font-weight: 650; color: var(--teal-text); }
.cont-t { margin-top: 2px; font-size: clamp(24px, .8vw + 18px, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.cont .line { margin: 30px 0 4px; max-width: 760px; }
.cont-act { display: flex; flex-wrap: wrap; gap: 12px; }
.cont-done { font-size: 17px; }
.cont-done a { color: var(--teal-text); font-weight: 650; }
.coach-dash { --coach-w: clamp(100px, 5vw + 40px, 150px); }
.learn-recent .lr-h { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.recent { display: flex; flex-direction: column; }
.recent a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; padding: 6px 0; }
.recent a span:first-child { font-weight: 600; }
.recent a:hover span:first-child { color: var(--teal-text); }
.recent .muted { font-size: 14px; }
.recent .muted:last-child { grid-column: 2; grid-row: 1; }
.lr-foot { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.lr-foot a { color: var(--teal-text); font-weight: 600; }
@media (min-width: 1000px) { .dash-top { grid-template-columns: minmax(0, 1.7fr) minmax(0, auto) minmax(240px, .55fr); } .dash-top:has(.learn-recent[hidden]) { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); } }
.dt { padding: clamp(36px, 3.5vw, 64px) var(--gut) 0; }
.dt-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.dt-t { font-size: clamp(24px, .6vw + 19px, 32px); font-weight: 700; letter-spacing: -.02em; }
.dt-t a { display: inline-flex; align-items: center; gap: 12px; }
.dt-t a:hover { color: var(--tc-text); }
.dt-meta { color: var(--ink-2); }
.dt-state { font-weight: 700; color: var(--ok); }
.dt .line { margin: 44px 0 30px; }
.dt .mcol-h { margin-bottom: 8px; }

/* ---------- lesson environment ---------- */
.portal-lesson { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.side { background: var(--paper-2); }
.side-in { padding: 18px 16px 32px; }
.side-top { display: flex; align-items: center; gap: 10px; padding: 0 6px 14px; }
.side-tn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.side-tn:hover { color: var(--tc-text); }
.side-pn { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--ok); white-space: nowrap; }
.side-x { display: none; margin-left: auto; }
.side-mod { padding: 10px 0; }
.side-mh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 8px 6px; font-weight: 700; font-size: 15px; }
.side-mh span { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.side-mod.seg-premium .side-mh span { color: var(--prem-text); }
.side-list { margin: 0; padding: 0; list-style: none; }
.sl { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; font-size: 14.5px; line-height: 1.3; color: var(--ink-2); }
.sl:hover { background: var(--paper-3); color: var(--ink); }
.sl-node { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--tc); }
.sl-node .icon { width: 10px; height: 10px; color: #fff; }
.sl[data-tier="premium"] .sl-node { background: var(--prem); box-shadow: none; }
.is-entitled .sl[data-tier="premium"] .sl-node { background: none; box-shadow: inset 0 0 0 3px var(--tc); }
.is-entitled .sl[data-tier="premium"] .sl-node .icon { display: none; }
.sl.done .sl-node { background: var(--tc); box-shadow: none; }
.sl.done .sl-node .icon { display: none; }
.sl-n { font: 500 12px/1 var(--mono); color: var(--ink-3); }
.sl[aria-current="page"] { background: var(--paper-0); color: var(--ink); font-weight: 650; }
.side-steps { margin: 6px 0 8px 17px; padding-left: 16px; }
.side-sh { margin: 4px 0 6px; font-size: 13px; font-weight: 650; color: var(--ink-3); }
.side-scrim, .side-open { display: none; }

.env { --cols: minmax(340px, 30rem) minmax(0, 1fr); display: grid; grid-template-columns: var(--cols); gap: 0 clamp(20px, 2vw, 40px); align-items: start; min-width: 0; padding: 18px var(--gut) 40px; }
.env-text { display: flex; flex-direction: column; min-width: 0; min-height: var(--slab-h); }
.env-bar { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 40px; margin-bottom: 14px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-3); }
.crumbs li { white-space: nowrap; }
.crumbs li + li::before { content: "/"; margin: 0 10px; opacity: .6; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.env-crumbs { flex-wrap: nowrap; overflow: hidden; }
/* a narrow lesson column: the module name gives way first, the position (21 of 30) never does */
.env-crumbs li { flex-shrink: 0; }
.env-crumbs .ec-mod { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.env-crumbs [aria-current] a { color: inherit; }
/* the lesson's place in the course, beside the breadcrumb (the only place it is shown) */
.env-pos { margin-left: auto; flex: none; font: 600 13.5px/1 var(--mono); color: var(--ink-2); }
.lh h1 { font-size: clamp(28px, .9vw + 18px, 42px); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; }
.lh-meta { margin-top: 8px; font-size: 14.5px; color: var(--ink-3); }
.env-rail { padding: 20px 0 6px; }
.env-scroll { padding: 14px 0 8px; }
.step-nav { display: flex; align-items: center; gap: 10px; padding: 18px 0 8px; }
.sn-count { margin-left: auto; font: 500 14px/1 var(--font); color: var(--ink-3); }
.sn-next { min-width: 150px; }
/* the numbered strip over the text already shows the step; the count stays for screen readers (and on phones) */
@media (min-width: 900px) { .sn-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sn-next { margin-left: auto; } }
.env-switch { display: none; }
.coach-lesson { --coach-w: clamp(104px, 3vw + 70px, 150px); margin-top: auto; padding-top: 22px; }
.env-code { position: sticky; top: calc(var(--top-h) + 16px); display: flex; flex-direction: column; height: var(--slab-h); min-width: 0; overflow: hidden; }
.code-status { display: flex; flex: none; justify-content: space-between; gap: 16px; padding: 9px 18px; background: var(--slab-2); font: 12.5px/16px var(--mono); color: var(--slab-mute); }
.code-status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-st.ok { color: #6fe0a8; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.pager a { display: flex; flex-direction: column; gap: 4px; }
.pager-next { grid-column: 2; align-items: flex-end; text-align: right; }
.pg-k { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-3); }
.pg-k .icon { width: 15px; height: 15px; }
.pg-t { font-weight: 650; font-size: 15px; }
.pg-t .n { font-size: 13px; color: var(--ink-3); }
.pager a:hover .pg-t { color: var(--teal-text); }
@media (min-width: 1680px) {
  .portal-lesson { grid-template-columns: clamp(260px, 14vw, 320px) minmax(0, 1fr); }
  .portal-lesson .side { position: sticky; top: var(--top-h); height: calc(100dvh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .env { --cols: minmax(400px, 34rem) minmax(0, 1fr); }
  .env-rail .rail-h { max-width: 34rem; }
}
@media (max-width: 1679.98px) {
  .portal-lesson .side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; width: min(360px, 88vw); overflow-y: auto; visibility: hidden; transform: translateX(-100%); transition: transform .25s ease, visibility 0s linear .25s; box-shadow: 0 0 60px rgba(9, 24, 44, .3); }
  .portal-lesson .side.is-open { visibility: visible; transform: none; transition: transform .25s ease; }
  .portal-lesson .side-x, .side-open { display: inline-flex; }
  .side-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(5, 12, 22, .5); }
}
@media (min-width: 900px) and (max-width: 1279.98px) { .env { --cols: minmax(300px, 25rem) minmax(0, 1fr); } }

/* step line: the steps of this lesson as stations */
.rail { margin: 0; padding: 0; list-style: none; }
.rail a { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.rail a:hover { color: var(--ink); }
.rs-n { position: relative; z-index: 1; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px var(--rule); font: 700 12px/1 var(--mono); color: var(--ink-3); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.rail .is-seen .rs-n { box-shadow: inset 0 0 0 3px var(--teal); color: var(--ink); }
.rail .is-solved .rs-n { background: var(--ok-fill); box-shadow: none; color: #04210f; }
.rail .active .rs-n { background: var(--teal); box-shadow: none; color: var(--teal-ink); }
.rail .active a { color: var(--ink); }
.rail [data-locked] .rs-n { background: var(--prem); box-shadow: none; color: #fff; }
.rail-v li { position: relative; }
.rail-v li a { padding: 4px 0; font-size: 14px; line-height: 1.3; }
.rail-v .rs-n { width: 22px; height: 22px; font-size: 10.5px; }
.rail-h { display: flex; align-items: center; }
.rail-h li { position: relative; flex: 1 1 0; }
.rail-h li:last-child { flex: 0 0 auto; }
.rail-h li:not(:last-child)::after { content: ""; position: absolute; top: 12.5px; left: 28px; right: 0; height: 3px; background: var(--rule); }
.rail-h li.is-seen:not(:last-child)::after { background: var(--teal); }
.rail-h .rs-t { display: none; }

/* steps */
.js .env .steps-body > .step { display: none; }
.js .env .steps-body > .step.is-active { display: block; animation: rise .22s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.step-k { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 13.5px/1 var(--mono); color: var(--teal-text); }
.step h2 { margin: 0 0 10px; font-size: clamp(22px, .4vw + 18px, 27px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.step-lede { margin-bottom: 14px; font-size: 17.5px; line-height: 1.6; color: var(--ink-2); }
.ex-status { margin-left: auto; color: var(--ok); }
.ex-note { font-size: 14.5px; color: var(--ink-3); margin-top: 12px; }

/* prose */
.prose { font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.prose > * + * { margin-top: 16px; }
.prose p, .prose li { max-width: 64ch; }
.prose strong, .prose b { color: var(--ink); font-weight: 650; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose h2, .prose h3, .prose h4 { color: var(--ink); }
.prose h2 { margin-top: 30px; font-size: 22px; line-height: 1.3; font-weight: 700; }
.prose h3 { margin-top: 26px; font-size: 19px; line-height: 1.35; font-weight: 700; }
.prose h4 { margin-top: 22px; font-size: 17px; font-weight: 700; }
.prose ul, .prose ol { margin-bottom: 0; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--teal-text); font-weight: 700; }
.prose :not(pre) > code { padding: 2px 6px; border-radius: 5px; background: var(--paper-3); color: var(--ink); font-size: .84em; }
.prose pre.code-static code { padding: 0; background: none; font-size: inherit; color: inherit; }
.note { display: block; padding: 14px 18px; border-radius: 12px; background: var(--paper-2); color: var(--ink); font-size: 16.5px; line-height: 1.55; }
.codeblock { --syn-kw: #cfa8ff; --syn-str: #a8e389; --syn-num: #ffb27a; --syn-com: #8299b2; --syn-fn: #7fcdf8; overflow: hidden; border-radius: 12px; background: var(--slab); color: var(--slab-ink); }
.cb-head { display: flex; height: 34px; padding: 0 6px; background: var(--slab-2); }
.cb-tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font: 500 12.5px/1 var(--mono); color: var(--slab-mute); }
.codeblock pre.code-static { margin: 0; border-radius: 0; background: none; color: var(--slab-ink); }
pre.code-static { margin: 0; padding: 14px 18px; overflow-x: auto; border-radius: 10px; background: var(--slab); color: var(--slab-ink); font: 14.5px/1.7 var(--mono); white-space: pre; tab-size: 4; }
.code-static .k { color: var(--syn-kw, #cfa8ff); } .code-static .s { color: var(--syn-str, #a8e389); } .code-static .m { color: var(--syn-num, #ffb27a); } .code-static .c { color: var(--syn-com, #8299b2); font-style: italic; } .code-static .f { color: var(--syn-fn, #7fcdf8); }
.open-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--paper-2); font-size: 15px; line-height: 1.45; }
.soft-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 16px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.soft-note button { padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.soft-note button:hover { color: var(--ink); }
.soft-note a { color: var(--teal-text); font-weight: 650; }

/* pass */
.pass { padding-top: 4px; outline: none; }
.pass-top { display: flex; align-items: center; gap: 14px; }
.pass-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: #2a1d00; animation: pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.pass-mark .icon { width: 24px; height: 24px; stroke-width: 3.2; }
.pass-h { font-size: clamp(30px, .8vw + 24px, 40px); line-height: 1; font-weight: 700; letter-spacing: -.03em; }
/* Noodle joins the result: smaller than in the lesson, beside his one line */
.pass-coach:empty { display: none; }
.pass-coach { margin: 18px 0 4px; }
.pass-coach .coach-lesson { --coach-w: 76px; margin: 0; padding: 0; }
.pass-coach .coach-say { margin-bottom: 18px; }
.pass-coach .coach-line { font-size: 16px; }
.pass-can, .done-can { margin: 18px 0 0; }
.pc-h { margin-bottom: 6px; font-weight: 700; font-size: 16px; }
.pass-track { margin: 18px 0 22px; font-size: 14.5px; color: var(--ink-3); }
.pass-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.pass-review { height: auto; padding: 4px 2px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.pass-review:hover { background: none; color: var(--teal-text); }
.pass-save { margin-top: 14px; font-size: 14px; }
.pass-save a, .pass-end a { color: var(--teal-text); font-weight: 650; }
.pass-end { margin-top: 24px; }
.pass-invite { margin-top: 36px; }
.pi-h { font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--prem-text); }
.pi-d { margin: 8px 0 14px; color: var(--ink-2); }
.pi-list { margin: 0; padding: 0; list-style: none; }
.pi-list li { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.pi-list .n { font-size: 13px; color: var(--ink-3); }
.pi-lock { display: grid; place-items: center; width: 18px; color: var(--prem-text); }
.pi-lock .icon { width: 15px; height: 15px; }
.pi-kind { margin-left: auto; font-size: 13.5px; }
.pi-foot { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.pi-foot a { color: var(--prem-text); font-weight: 650; }
.is-passed .steps-body, .is-passed .env-rail, .is-passed .pager, .is-passed .soft-note { display: none; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* locked preview */
.env-premium .step-nav { display: none; }
.locked { margin-top: 26px; }
.lk-learn { font-size: 19px; line-height: 1.5; color: var(--ink); }
.cont-k .m-prem { margin-left: 6px; }
.lk-ctx a { color: var(--teal-text); font-weight: 650; }
.lk-ctx { margin-top: 12px; font-size: 14.5px; line-height: 1.5; }
.code-locked { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cl-body { position: relative; flex: 1; min-height: 360px; overflow: hidden; }
.cl-lines { position: absolute; inset: 0 auto 0 0; width: 52px; margin: 0; padding: 16px 0 0; list-style: none; counter-reset: ln; opacity: .45; }
.cl-lines li { height: 1.75em; padding-right: 12px; counter-increment: ln; text-align: right; font: 14px/1.75 var(--mono); color: var(--slab-mute); }
.cl-lines li::before { content: counter(ln); }
.cl-msg { position: absolute; inset: 0 0 0 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.cl-noodle { width: clamp(120px, 26cqw, 190px) !important; margin-bottom: 6px; }
.cl-t { font-size: clamp(22px, 2.6cqw + 12px, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.cl-d { max-width: 40ch; color: var(--slab-mute); font-size: 15.5px; line-height: 1.5; }
.cl-msg .btn { margin-top: 10px; }

/* ---------- runbox: editor + toolbar + output, on the slab ---------- */
.runbox { display: flex; flex-direction: column; overflow: hidden; margin: 16px 0; border-radius: 14px; background: var(--slab); color: var(--slab-ink); --syn-kw: #cfa8ff; --syn-str: #a8e389; --syn-num: #ffb27a; --syn-com: #8299b2; --syn-fn: #7fcdf8; --syn-type: #ffd56e; --syn-prop: #80e0d0; --syn-punc: #aebfd0; }
.rb-head { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 8px; background: var(--slab-2); }
.rb-file { display: inline-flex; align-items: center; gap: 9px; margin-top: 7px; padding: 0 16px; border-radius: 10px 10px 0 0; background: var(--slab); font: 500 14px/1 var(--mono); color: var(--slab-ink); }
.rb-keys { display: inline-flex; align-items: center; gap: 6px; padding-right: 10px; font-size: 12.5px; color: var(--slab-mute); white-space: nowrap; }
.keys { display: inline-flex; gap: 3px; }
.editor-wrap { min-height: 0; }
.editor { min-height: 60px; }
.runbox .editor .cm-editor { max-height: 460px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: var(--slab-2); }
.toolbar .btn { min-height: 42px; height: 42px; padding: 0 16px; font-size: 15px; }
.toolbar .btn:not(.btn-primary):not(.btn-ghost) { --edge: transparent; --lip-c: #05101f; background: var(--slab-3); color: var(--slab-ink); }
.toolbar .btn-ghost { padding-bottom: 0; }
.toolbar .btn:not(.btn-primary):not(.btn-ghost):hover { background: #26486f; }
.toolbar .btn-ghost { color: var(--slab-mute); }
.toolbar .btn-ghost:hover { background: rgba(255, 255, 255, .08); color: var(--slab-ink); }
.toolbar .btn-reset { order: 3; }
.toolbar .run-state { order: 2; }
.run-state { margin-left: auto; padding: 0 4px; font: 12.5px/1.3 var(--mono); color: var(--slab-mute); font-variant-numeric: tabular-nums; }
.run-state.ok { color: #6fe0a8; }
.run-state.bad { color: var(--slab-warn); }
.is-running .btn-run, .is-running .btn-checkit { opacity: .6; pointer-events: none; }
.is-running .run-state::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border: 2px solid var(--teal); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.rb-results { min-height: 0; }
.output { position: relative; max-height: 420px; overflow: auto; padding: 36px 18px 16px; background: var(--slab-out); }
.output::before { content: "Output"; position: absolute; top: 12px; left: 18px; font: 600 13px/1 var(--font); color: var(--slab-mute); }
.console-out { margin: 0; padding: 0; background: none; color: var(--slab-ink); font: 14.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }
.console-out .err, .console .err { color: var(--slab-warn); }
.console-out .warn, .console .warn { color: #f2c46d; }
.console-out .muted, .console .muted { color: var(--slab-mute); }
.error-block { margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--slab-warn-bg); color: var(--slab-warn-ink); font: 13.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; }
.run-note { margin: 0; max-width: 60ch; color: var(--slab-ink); font: 15px/1.5 var(--font); }
.sql-note { margin: 4px 0 8px; font: 12.5px var(--mono); color: var(--slab-mute); }
iframe.preview { display: block; width: 100%; height: 260px; border: 0; border-radius: 10px; background: #fff; }
.output iframe + .console-out { margin-top: 10px; padding-top: 8px; box-shadow: 0 -1px 0 var(--slab-3); }
.stdin { display: block; padding: 10px 12px 12px; background: var(--slab-2); }
.stdin .form-label { color: var(--slab-ink); }
.stdin .muted { color: var(--slab-mute); }
.stdin .input { height: auto; background: var(--slab); color: var(--slab-ink); border-color: var(--slab-3); }
.form-label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }
.hints { padding: 8px 18px 6px; background: #0c2f38; }
.hint { margin: 8px 0; font-size: 15px; color: var(--slab-ink); }
.hint strong { color: #5fe0e8; }
.feedback { padding: 14px 18px; font-size: 15.5px; }
.feedback.pass { background: #0e3b2a; color: #8ff0c0; }
.feedback.fail { background: var(--slab-warn-bg); color: var(--slab-ink); }
.feedback.fail > strong { color: var(--slab-warn); }
.feedback p { margin: 8px 0 0; }
.feedback .small { color: var(--slab-mute); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.compare > div { min-width: 0; }
.cmp-h { display: block; margin-bottom: 4px; font: 600 13.5px/1.4 var(--font); color: var(--slab-mute); }
.compare pre { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--slab-out); color: var(--slab-ink); font: 13.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; }
.compare .diff { border-radius: 2px; background: var(--slab-warn-mark); color: var(--slab-warn-ink); }
.want { margin-top: 10px; }
.want summary { cursor: pointer; color: var(--slab-mute); }
.solution { padding: 14px 18px; background: var(--slab-2); }
.solution .small { color: var(--slab-mute); }
.solution pre { margin: 8px 0 10px; background: var(--slab-out); }
.solution .btn { color: var(--slab-mute); }

/* SQL tables */
.tables { margin: 16px 0; border-radius: 12px; background: var(--slab-2); color: var(--slab-ink); }
.tables > summary { padding: 11px 16px; cursor: pointer; font-size: 14px; }
.tb-k { font-weight: 700; }
.tb-names { font: 13px var(--mono); color: var(--slab-mute); }
.tb-body { max-height: 46vh; overflow: auto; padding: 0 16px 12px; }
.setup-src summary { margin-top: 6px; cursor: pointer; font-size: 13px; color: var(--slab-mute); }
.dbtable { margin: 6px 0 12px; }
.dbtable-name { margin-bottom: 4px; font: 600 12.5px/1.4 var(--mono); color: var(--slab-ink); }
.dbtable-name .muted { font-weight: 400; color: var(--slab-mute); }
.tscroll { max-width: 100%; overflow-x: auto; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--slab-3); }
.dbtable table { width: max-content; min-width: 100%; border-collapse: collapse; font: 13.5px/1.4 var(--mono); color: var(--slab-ink); }
.dbtable th, .dbtable td { padding: 6px 12px; box-shadow: 0 1px 0 var(--slab-3); text-align: left; white-space: nowrap; }
.dbtable th { position: sticky; top: 0; background: var(--slab-2); font-weight: 700; }
.null { color: var(--slab-mute); font-style: italic; }

/* the runbox inside the lesson's slab fills it */
.env-code > .runbox { flex: 1 1 auto; min-height: 0; margin: 0; border-radius: 0; }
.env-code > .runbox:not(.is-shown) { display: none; }
.env-code .rb-head { border-radius: 16px 16px 0 0; }
.env-code .editor-wrap { flex: 1 1 auto; display: flex; overflow: hidden; }
.env-code .editor { flex: 1; display: flex; min-height: 0; }
.env-code .editor .cm-editor { flex: 1; height: 100%; max-height: none; }
.env-code .rb-results { flex: 0 1 auto; max-height: 46%; overflow: auto; }
.env-code .output { max-height: none; min-height: 110px; }
.env-code .rb-results:not(:has(> :not([hidden]):not(.os-head)))::after { content: "Output"; display: block; min-height: 120px; padding: 12px 18px 16px; background: var(--slab-out); font: 600 13px/1 var(--font); color: var(--slab-mute); }
.env-code > .tables { flex: none; margin: 0; border-radius: 16px 16px 0 0; }
.env-code > .tables + .runbox .rb-head { border-radius: 0; }
.env-code > .tables .tb-body { max-height: 34vh; }
.env-code .code-status { border-radius: 0 0 16px 16px; }
@container (max-width: 520px) {
  .rb-keys { display: none; }
  .toolbar .btn { padding-inline: 12px; }
}
@container (min-width: 760px) { .cm-editor { font-size: 15.5px; } }
@container (min-width: 1000px) { .cm-editor { font-size: 16.5px; } .cm-lineNumbers .cm-gutterElement { min-width: 44px; } }

/* CodeMirror on the slab */
.cm-editor { background: transparent; color: var(--slab-ink); font-size: 14.5px; }
.cm-editor.cm-focused { outline: none; }
.runbox:focus-within .rb-file { background: color-mix(in srgb, var(--teal) 22%, var(--slab)); }
.cm-scroller { font-family: var(--mono) !important; line-height: 1.75 !important; }
.cm-content { padding: 16px 0 !important; caret-color: #5fe0e8; }
.cm-line { padding: 0 18px 0 8px !important; }
.cm-gutters { background: transparent !important; color: #7f98b3 !important; border-right: 0 !important; }
.cm-lineNumbers .cm-gutterElement { min-width: 40px; padding: 0 8px 0 14px !important; font-variant-numeric: tabular-nums; }
.cm-activeLine { background: rgba(95, 224, 232, .07) !important; }
.cm-editor:not(.cm-focused) .cm-activeLine { background: transparent !important; }
.cm-activeLineGutter { background: transparent !important; color: var(--slab-ink) !important; }
.cm-cursor { border-left: 2px solid #5fe0e8 !important; }
.cm-selectionBackground { background: rgba(95, 224, 232, .2) !important; }
.cm-focused .cm-selectionBackground { background: rgba(95, 224, 232, .3) !important; }
.cm-matchingBracket { background: rgba(187, 167, 255, .3) !important; outline: none; }
.cm-placeholder { color: var(--slab-mute) !important; }
.editor pre.code-static { min-height: 100px; margin: 0; padding-left: 56px; border-radius: 0; background: none; }

/* ---------- simple pages ---------- */
.page-head { padding: clamp(32px, 4vw, 72px) var(--gut) clamp(28px, 3vw, 48px); background: var(--paper-2); }
.page-head h1 { max-width: 22ch; font-size: clamp(34px, 1.8vw + 20px, 64px); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; }
.ph-sub { margin-top: 16px; max-width: 58ch; font-size: clamp(17px, .3vw + 15px, 20px); line-height: 1.55; color: var(--ink-2); }
.page-head.ph-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; align-items: end; }
@media (min-width: 900px) { .page-head.ph-split { grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); } }
.ph-noodle .coach-perch { --coach-w: clamp(96px, 4vw + 48px, 140px); }
.ph-noodle .coach-say { margin-bottom: calc(var(--coach-w) * .42); }
.col { width: min(70ch, 100%); padding: clamp(28px, 3vw, 48px) var(--gut) 0; }
.col-narrow { width: auto; max-width: calc(72ch + 2 * var(--gut)); }

/* projects page */
.pj-sec { padding-top: clamp(40px, 4vw, 72px); }
.pj-list { display: flex; flex-direction: column; }
.pj { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px clamp(24px, 3vw, 56px); padding: 28px 0; }
.pj:first-child { padding-top: 4px; }
.pj-id { display: flex; align-items: flex-start; gap: 14px; }
.pj-t { font-size: clamp(21px, .4vw + 17px, 26px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.pj-meta { margin-top: 6px; font-size: 14.5px; color: var(--ink-3); }
.pj-d { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; }
.pj-body .ms { margin-top: 14px; }
.ms { position: relative; margin: 0; padding: 0; list-style: none; }
.ms::before { content: ""; position: absolute; left: 12px; top: 14px; bottom: 14px; width: 3px; background: color-mix(in srgb, var(--tc) 60%, transparent); }
.ms li { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 6px 0; font-size: 15.5px; line-height: 1.5; }
.ms-n { position: relative; z-index: 1; display: inline-grid; place-items: center; flex: none; width: 27px; height: 27px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px var(--tc); font: 700 11.5px/1 var(--mono); }
.ms-n .icon { width: 13px; height: 13px; }
.ms-t { padding-top: 2px; }
.ms code { padding: 1px 5px; border-radius: 4px; background: var(--paper-3); font-size: .86em; }
.ms-locked { color: var(--ink-3); }
.ms-locked .ms-n { background: var(--prem); box-shadow: none; color: #fff; }
.is-entitled .ms-locked .ms-n { background: var(--paper); box-shadow: inset 0 0 0 3px var(--tc); color: var(--ink-3); }
.pj-starter { margin-top: 12px; font-size: 14.5px; color: var(--ink-3); }
.pj-starter code { color: var(--ink); }
.pj-act { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.pj-open { display: none !important; }
.pj-buy { padding: 10px 0; font-weight: 650; color: var(--prem-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pj-meta .m-prem .icon { width: 13px; height: 13px; }
.is-entitled .pj-open { display: inline-flex !important; }
.is-entitled .pj-buy { display: none !important; }
@media (min-width: 1100px) {
  .pj { grid-template-columns: minmax(240px, .7fr) minmax(0, 1.5fr) minmax(200px, auto); }
  .pj-act { justify-content: flex-end; }
}
.pj-list-free { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(32px, 4vw, 72px); }
@media (min-width: 1100px) {
  .pj-list-free { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-list-free .pj { grid-template-columns: minmax(0, 1fr); }
  .pj-list-free .pj:nth-child(2) { padding-top: 4px; }
  .pj-list-free .pj-act { justify-content: flex-start; }
}

/* pricing */
.buy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(32px, 4vw, 80px); align-items: start; padding-top: clamp(28px, 3vw, 56px); }
@media (min-width: 1000px) { .buy { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); } .plan { position: sticky; top: calc(var(--top-h) + 24px); grid-column: 2; grid-row: 1; } .cmp-wrap { grid-row: 1; } .buy-faq { grid-column: 1 / -1; } }
.plan { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2vw, 32px); border-radius: 20px; background: var(--prem); color: #fff; }
.pc-name { font-weight: 600; font-size: 18px; }
.plan .seg { background: rgba(0, 0, 0, .22); }
.plan .seg > label { color: #e3dbff; }
.plan .seg > .seg-in:checked + label { background: #fff; color: var(--prem-edge); box-shadow: none; }
.billing { display: flex; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.plan-price strong { font-size: clamp(42px, 2vw + 22px, 58px); line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.plan-price span { color: #e3dbff; font-weight: 550; }
.plan-save { flex-basis: 100%; margin-top: 4px; font-size: 15px; line-height: 1.45; color: #ffe08a !important; }
.plan-msg { font-size: 14.5px; line-height: 1.45; color: #f1ecff; }
.plan-msg:empty { display: none; }
.plan-msg a { color: #fff; font-weight: 700; text-decoration: underline; }
.pc-fine { font-size: 13.5px; line-height: 1.5; color: #e3dbff; }
.pc-fine a { color: #fff; font-weight: 650; text-decoration: underline; }
.plan .btn:disabled { opacity: .7; }
.plan-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; }
.plan-inc li { display: flex; gap: 10px; align-items: flex-start; }
.plan-inc svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #ffe08a; }
.plan-renew { font-size: 14px; line-height: 1.45; color: #e3dbff; }
.plan-buy { display: flex; flex-direction: column; gap: 14px; }
.plan-buy[hidden] { display: none; }
.plan-adult { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: #f1ecff; cursor: pointer; }
.plan-adult input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #fff; }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 16px 12px; box-shadow: 0 1px 0 var(--rule); text-align: left; vertical-align: middle; }
.cmp thead th { padding-top: 0; font-size: 15px; font-weight: 600; color: var(--ink-3); text-align: center; vertical-align: bottom; }
.cmp thead th span { display: block; margin-top: 4px; font-size: 22px; line-height: 1.1; color: var(--ink); font-weight: 600; }
.cmp thead th:last-child span { color: var(--prem-text); }
.cmp td { width: 92px; text-align: center; }
.cmp-t { display: block; font-weight: 650; font-size: 16.5px; }
.cmp-d { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); font-weight: 400; }
.cmp-yes, .cmp-no { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.cmp-yes { background: var(--ok-fill); color: #04210f; }
.cmp-no { background: var(--paper-2); color: var(--prem-text); }
.cmp-yes .icon, .cmp-no .icon { width: 17px; height: 17px; }
.cmp-yes .icon { stroke-width: 3; }
.buy-alt { margin-top: 20px; }
.buy-alt a { color: var(--teal-text); font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.buy-faq { padding: clamp(24px, 3vw, 48px) 0 clamp(48px, 5vw, 80px); }

/* account */
.auth { padding: clamp(32px, 5vw, 96px) var(--gut) clamp(40px, 5vw, 96px); }
.acct-out, .acct-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 96px); align-items: start; }
@media (min-width: 900px) { .acct-out, .acct-in { grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); } }
.auth-t { font-size: clamp(34px, 1.6vw + 20px, 60px); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; }
.auth-note { margin-top: 16px; max-width: 46ch; font-size: 17.5px; line-height: 1.55; color: var(--ink-2); }
.auth-note a, .auth-fine a { color: var(--teal-text); font-weight: 650; }
.auth-card { border-radius: 20px; background: var(--paper-2); overflow: hidden; }
.auth-tabs { display: flex; padding: 8px 8px 0; }
.auth-tabs button { flex: 1; height: 50px; border: 0; border-radius: 12px 12px 0 0; background: none; color: var(--ink-2); font: 650 16px/1 var(--font); cursor: pointer; }
.auth-tabs button.active { background: var(--paper-0); color: var(--ink); }
.auth-body { padding: 20px 24px 26px; background: var(--paper-0); }
.acct-in .auth-body { border-radius: 20px; }
.fl { display: block; margin: 16px 0 8px; font-weight: 600; }
.fl:first-child { margin-top: 4px; }
.fl .muted { font-weight: 400; font-size: 14px; }
.form-err { min-height: 21px; margin: 8px 0; font-size: 14.5px; line-height: 1.45; color: var(--bad); }
.auth-fine { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.banner { margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; background: var(--ok-tint); color: var(--ok); font-weight: 600; }
.facts { margin: 0 0 22px; }
.facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.acct-act { display: flex; flex-wrap: wrap; gap: 12px; }

/* terms, credits */
.terms h2 { margin-top: 32px; font-size: 22px; font-weight: 700; }
.terms a, .credits a { color: var(--teal-text); font-weight: 600; }
.credits { margin: 0; padding: 0; list-style: none; }
.credits li { padding: 10px 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
.credits strong { color: var(--ink); font-weight: 700; }
.page-terms main, .page-credits main { padding-bottom: 64px; }

/* 404 */
.notfound { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 64px; align-items: center; padding: clamp(40px, 6vw, 112px) var(--gut); }
@media (min-width: 900px) { .notfound { grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); } }
.nf-copy { min-width: 0; }
.nf-art { justify-self: center; order: -1; }
@media (min-width: 900px) { .nf-art { order: 0; } }
.nf-art .noodle-art { width: clamp(150px, 16vw, 260px) !important; }
.nf-trace { margin-top: 28px; max-width: 640px; padding: 18px 20px; overflow-x: auto; font: 14px/1.7 var(--mono); white-space: pre; }
.nf-sub { margin-top: 20px; color: var(--ink-2); font-size: 17px; }
.nf-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- playground: an open workspace (editor + output fill the space; resizable; side by side or stacked) ---------- */
.page-pg main { padding: 12px var(--gut) 10px; }
.ws { display: flex; flex-direction: column; height: max(560px, calc(100dvh - var(--top-h) - 22px - 34px)); overflow: hidden; }
.ws-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; padding: 0 10px; background: var(--slab-2); border-radius: 16px 16px 0 0; }
.ws-langs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ws-langs ul { display: flex; gap: 2px; margin: 0; padding: 7px 0 0; list-style: none; }
.ws-tab { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px; border-radius: 10px 10px 0 0; color: var(--slab-mute); font-weight: 600; white-space: nowrap; }
.ws-tab:hover { color: var(--slab-ink); }
.ws-tab.active { background: var(--slab); color: var(--slab-ink); }
.ws-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; padding: 7px 0; }
.ws-tools .btn { height: 40px; }
.ws-tool { color: var(--slab-mute) !important; padding: 0 12px; font-size: 14.5px; }
.ws-tool:hover { background: rgba(255, 255, 255, .08) !important; color: var(--slab-ink) !important; }
.ws-tool .icon { width: 16px; height: 16px; }
.ws-tools .run-state { margin: 0 6px; }
.ws-menu-wrap { position: relative; }
.ws-menu { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: var(--paper-0); box-shadow: 0 0 0 1px var(--rule), 0 18px 40px rgba(9, 24, 44, .25); }
.ws-menu.show { display: block; }
.ws-menu button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 550 15px/1.3 var(--font); text-align: left; cursor: pointer; }
.ws-menu button:hover, .ws-menu button:focus-visible { background: var(--paper-2); }
.ws-ds select { height: 40px; max-width: 220px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--slab-3); color: var(--slab-ink); font: 550 14px/1 var(--font); }
.ws-layout .wl-stack, .ws[data-layout="stack"] .ws-layout .wl-side { display: none; }
.ws[data-layout="stack"] .ws-layout .wl-stack { display: inline; }
.ws-split { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 12px var(--split-b, 44%); grid-template-rows: minmax(0, 1fr); }
.ws[data-layout="stack"] .ws-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 12px var(--split-b, 40%); }
.ws-sep { position: relative; background: var(--slab-2); }
.ws-sep .split-sep { inset: 0 -6px; cursor: col-resize; }
.ws-sep .split-sep::before { width: 4px; height: 44px; }
.ws[data-layout="stack"] .ws-sep .split-sep { inset: -6px 0; cursor: row-resize; }
.ws[data-layout="stack"] .ws-sep .split-sep::before { width: 44px; height: 4px; }
.pg-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ws-code .editor { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.ws-code .editor .cm-editor { flex: 1; height: 100%; }
.ws-out { position: relative; background: var(--slab-out); border-radius: 0 0 16px 0; }
.ws[data-layout="stack"] .ws-out { border-radius: 0 0 16px 16px; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 8px 0 18px; font: 600 13px/1 var(--font); color: var(--slab-mute); }
.pane-head > span { display: inline-flex; align-items: center; gap: 8px; }
.ws-code .pane-head { font-weight: 500; }
.pane-lang { color: var(--slab-mute); }
.pane-head .btn { height: 30px; color: var(--slab-mute); }
.pane-head .btn:hover { background: rgba(255, 255, 255, .08); color: var(--slab-ink); }
.ph-acts { display: inline-flex; gap: 2px; }
.ws-out .preview { flex: 1 1 60%; height: auto; min-height: 120px; margin: 0 12px; border-radius: 10px; }
.console { flex: 1 1 40%; overflow: auto; padding: 14px 18px; font: 14.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--slab-ink); }
.console .dbtable { white-space: normal; }
.pg-stdin { border-radius: 0 0 16px 0; }
.pg-project { padding: 14px 18px; background: #0c2f38; color: var(--slab-ink); font-size: 15px; max-height: 40vh; overflow: auto; }
.pg-project ol { margin: 6px 0 0; padding-left: 1.3em; max-width: 90ch; }
.pg-project a { color: #5fe0e8; font-weight: 650; }
.pg-switch { display: none; }
.ws-noodle { position: absolute; right: 12px; bottom: 12px; z-index: 4; }
.ws-ask { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 2px solid var(--outline); border-radius: 14px; background: var(--bub-bg); color: var(--bub-ink); font: 650 14px/1.2 var(--font); cursor: pointer; }
.ws-ask-art svg { width: 30px; height: auto; }
.ws-ask:hover { color: var(--teal-text); }
.ws-foot { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.ws-foot a { color: var(--teal-text); font-weight: 650; }
@media (max-width: 899.98px) {
  .page-pg main { padding: 0; }
  .ws { height: auto; border-radius: 0; overflow: visible; }
  .ws-bar { position: sticky; top: var(--top-h); z-index: 20; border-radius: 0; padding: 0 6px; }
  .ws-langs { flex-basis: 100%; }
  .ws-tools { flex: 1; padding: 6px 2px 8px; }
  .ws-layout, .ws-sep { display: none; }
  .pg-switch { display: flex; margin: 8px var(--gut); }
  .ws-split { display: block; }
  .ws[data-show="code"] .ws-out, .ws[data-show="out"] .ws-code { display: none; }
  .ws-code .editor .cm-editor { min-height: 56dvh; }
  .ws-out { border-radius: 0; min-height: 56dvh; }
  .ws-out .preview { min-height: 300px; }
  .ws-foot { padding: 0 var(--gut) 20px; }
}
@media (max-width: 599.98px) { .ws-tool[data-act="download"], .ws-tool[data-act="copy"] { padding: 0 8px; } .ws-ds select { max-width: 150px; } }

/* ---------- Dev Noodle helpers in output, toast ---------- */
.noodle-says { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; white-space: normal; font-family: var(--font); }
.noodle-says img { flex: none; width: 90px; height: auto; margin: 0 -6px -4px -8px; }
.ns-bubble { position: relative; flex: 1; min-width: 0; padding: 12px 14px; border: 2px solid var(--outline); border-radius: 16px 16px 16px 4px; background: var(--bub-bg); color: var(--bub-ink); font-size: 15px; line-height: 1.5; }
.ns-bubble strong { display: block; margin-bottom: 2px; font-size: 14px; color: var(--teal-text); }
.ns-bubble p { margin: 0; }
.noodle-wait { display: flex; align-items: center; gap: 12px; margin: 4px 0; white-space: normal; font: 15px/1.5 var(--font); color: var(--slab-mute); }
.noodle-wait img { flex: none; width: 60px; height: auto; }
@media (min-width: 900px) { .has-coach .env-code .hints, .has-coach .env-code .noodle-wait { display: none; } }
.toast-bl { position: fixed; left: 50%; bottom: 24px; z-index: 400; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; box-shadow: 0 16px 40px rgba(9, 24, 44, .3); opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; }
.toast-bl.show { opacity: 1; transform: translate(-50%, 0); }
.toast-act { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: var(--teal-btn); color: var(--teal-ink); font: 700 14px/1 var(--font); cursor: pointer; }

/* ---------- footer: brainlag.space's (components/footer.php .blf): a square full-width band on the sunk tone ---------- */
.blf { margin-top: 72px; padding: 40px max(var(--gut), calc((100% - 1200px) / 2 + 24px)) 32px; background: var(--paper-2); color: var(--ink-3); font-size: 15px; }
@media (max-width: 640px) { .blf { padding: 30px 16px 26px; } }
.blf-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(0, 1fr); gap: 24px 32px; }
.blf-brand { font: 700 24px/1 var(--f-display); color: var(--ink); }
.blf-tag { margin: 10px 0 0; max-width: 34ch; line-height: 1.5; }
.blf h2 { margin: 2px 0 6px; font: 600 17px/1.2 var(--f-display); color: var(--ink); letter-spacing: 0; }
.blf ul { display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.blf a { display: inline-block; padding-block: 7.5px; line-height: 21px; color: var(--ink-2); }
.blf a:hover { color: var(--blue-ink); }
.blf a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.blf-copy { margin: 24px 0 0; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1100px) { .blf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .blf-about { grid-column: 1 / -1; } }
@media (max-width: 820px) { .blf-cols { grid-template-columns: 1fr 1fr; } }
@media (pointer: coarse) { .blf a { padding-block: 11.5px; } .blf-ls { margin-top: 11.5px; } }
.blf-ls { position: relative; display: flex; align-items: center; max-width: 260px; min-height: 48px; margin-top: 7.5px; border: 2px solid var(--rule-2); border-radius: var(--r2); background: var(--paper-0); color: var(--ink); }
.blf-ls:focus-within { border-color: var(--blue); }
.blf-gl { flex: none; margin-left: 12px; color: var(--ink-2); pointer-events: none; }
.blf-ls select { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 40px 0 8px; border: 0; background: transparent 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") no-repeat right 16px center / 12px 8px; color: var(--ink); font: 600 16px/1.2 var(--font); cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; }
:root[data-theme="dark"] .blf-ls select { 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"); }
.blf-ls option { color: var(--ink); background: var(--paper-0); }
.blf h2 label { cursor: pointer; }
.blf-langs { flex-direction: row !important; flex-wrap: wrap; gap: 0 18px; }
@media (max-width: 599px) { .blf-lang { grid-column: 1 / -1; } }

/* ---------- responsive ---------- */
@media (min-width: 980px) {
  .h-top { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-height: min(calc(100dvh - var(--top-h)), 980px); }
}
@media (min-width: 1680px) {
  .h-top { grid-template-columns: minmax(560px, .72fr) minmax(0, 1.28fr); }
  .ide { height: clamp(520px, 66dvh, 820px); }
}
@media (max-width: 899.98px) {
  :root { --top-h: 56px; }
  /* the phone menu: brainlag.space's sheet (header.php .msheet): tiles, the plan button, a settings row */
  .tb-in { padding: 0 8px 0 16px; }
  .brand { margin-right: 6px; }
  .tb-nav { display: none; position: fixed; left: 0; right: 0; top: var(--top-h); z-index: 99; max-height: calc(100dvh - var(--top-h)); overflow-y: auto; margin: 0; padding: 14px 16px 20px; background: var(--paper); border-radius: 0 0 var(--r3) var(--r3); box-shadow: var(--pop); }
  .tb-nav.show { display: block; }
  .tb-links { flex-direction: column; align-items: stretch; gap: 8px; }
  .tb-links .tb-main:not(:last-child) { display: block; }
  .tb-links a { justify-content: space-between; height: auto; min-height: 56px; padding: 0 18px; border-radius: var(--r2); background: var(--paper-0); box-shadow: var(--shadow); font: 600 21px/1.1 var(--f-display); color: var(--ink); }
  .tb-links a:hover { background: var(--paper-0); color: var(--ink); }
  .tb-links a[aria-current="page"] { background: var(--blue-tint); color: var(--blue-ink); }
  .tb-phone { display: block; }
  .tb-phone-top { margin-bottom: 12px; }
  .tb-phone-top .tb-acct-m { justify-content: center; }
  .tb-get-m { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 10px 0 0; border-radius: var(--r2); background: var(--prem); color: var(--prem-ink); font: 700 17px/1.2 var(--font); }
  .pp-card { margin-top: 14px; padding: 16px; border-radius: var(--r2); background: var(--paper-0); box-shadow: var(--shadow); }
  .tb-set { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .tb-dark, .tb-acct-m { flex: 1 1 140px; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 0; border-radius: var(--r2); background: var(--paper-0); box-shadow: var(--shadow); color: var(--ink); font: 600 16px/1.2 var(--font); text-align: left; cursor: pointer; }
  .tb-dark > span:first-of-type { flex: 1 1 auto; }
  .tb-dark .sw { flex: none; position: relative; width: 42px; height: 26px; border-radius: 13px; background: var(--rule-2); transition: background-color .18s; }
  .tb-dark .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: translate .18s cubic-bezier(.22, 1, .36, 1); }
  .tb-dark[aria-checked="true"] .sw { background: var(--teal); }
  .tb-dark[aria-checked="true"] .sw::after { translate: 16px 0; }
  .ts-cur { display: none; }
  .ts-wrap { position: static; }
  .ts-menu { left: 12px; right: 12px; width: auto; }
  .tb-get, .th-wrap, .pp-wrap { display: none; }   /* the account stays: logo, account, menu (owner, 12 Oct) */
  .menu-btn { display: flex; }

  /* lesson: one vertical sequence; the step bar is fixed at the bottom */
  .env { display: flex; flex-direction: column; align-items: stretch; padding: 0 0 calc(80px + env(safe-area-inset-bottom)); }
  .env-text { display: contents; }
  .env-bar { order: 1; padding: 10px var(--gut) 0; margin-bottom: 4px; }
  .env-head { order: 2; padding: 6px var(--gut) 0; }
  .env-rail { order: 3; padding: 16px var(--gut) 0; }
  .env-scroll { order: 4; padding: 18px var(--gut) 8px; }
  .coach-lesson { order: 5; padding: 6px var(--gut) 16px; margin-top: 0; }
  .env-code { order: 6; position: static; height: auto; margin: 0 clamp(0px, 2vw, 16px); scroll-margin-top: calc(var(--top-h) + 8px); }
  .pager { order: 7; margin: 24px var(--gut) 0; }
  .env-code .editor-wrap, .env-code > .runbox { flex: none; }
  .env-code .editor .cm-editor { min-height: clamp(240px, 42dvh, 560px); }
  .env-code .rb-results { max-height: none; }
  .env-code, .env-code > .runbox { overflow: clip; }
  .env-code .toolbar { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 -1px 0 var(--slab-3); }
  .step-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -1px 0 var(--rule); }
  .sn-count { margin: 0 auto; }
  .sn-next { min-width: 0; }
  .page-lesson .site-foot { padding-bottom: 72px; }
  .page-lesson .toast-bl, .page-pg .toast-bl { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .cl-body { min-height: 440px; }
}
@media (max-width: 599.98px) {
  .brand .title { font-size: 21px; }
  .page-lesson .topbar .brand .title { display: none; }
  .ec-mod { display: none; }
  .row-l { grid-template-columns: 30px 26px minmax(0, 1fr); }
  .r-side { grid-column: 3; flex-direction: row; gap: 12px; align-items: center; padding-top: 4px; }
  .r-dur { order: -1; }
  .coach-say { padding: 11px 14px 12px; }
  .coach-line { font-size: 16px; }
  .coach-lesson { --coach-w: 78px; }
  .compare { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager-next { grid-column: 1; align-items: flex-start; text-align: left; }
  .cm-editor { font-size: 15px; }
  .h-act .btn { flex: 1 1 100%; }
  .ide { height: auto; }
  .ide .runbox { grid-template-rows: auto auto auto; }
  .ide .editor .cm-editor, .ide .editor pre.code-static { min-height: 230px; }
  .ide .output { min-height: 120px; }
  .coach-home { margin-right: 4px; }
  .th-act .btn { flex: 1 1 100%; }
  .acc-a { padding-left: 4px; }
  .cmp th, .cmp td { padding: 12px 6px; }
  .cmp td { width: 60px; }
  /* large text (200%, mobile UX sweep 19 Oct 2026): the table reflows inside the column instead of pushing the page 76 px
     sideways: the two plan columns size to their headings, the feature words wrap, the plan names step down */
  .cmp { table-layout: auto; }
  .cmp td { width: auto; min-width: 44px; }
  .cmp th:first-child, .cmp-t, .cmp-d { overflow-wrap: anywhere; hyphens: auto; }
  .cmp thead th span { font-size: clamp(16px, 5.4vw, 22px); }
  .facts > div { grid-template-columns: 90px minmax(0, 1fr); }
  .rb-keys { display: none; }
}

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

/* the playground stands on its own: no progress UI around it */
.page-pg .pp-wrap, .page-pg .pp-card { display: none; }

/* ===================================================================================================
   Learning framework (October 2026): stages, exercise types, checkpoints, bug hunts, completion, the
   editor/output split. Restrained on purpose: labels and type, state markers only where there is a state.
   =================================================================================================== */

/* Noodle: the drawing sits in layers inside one fixed box; a state change crossfades layers (noodle.js) */
.coach-art { display: grid; }
.coach-art > * { grid-area: 1 / 1; min-width: 0; }
.nb-layer svg { display: block; width: 100%; height: auto; overflow: visible; }

/* the small stage label over a step's title; the title carries the meaning */
.step-k { gap: 0; font: 650 14px/1.2 var(--font); }
.sk-stage { color: var(--teal-text); }
.sk-type { color: var(--ink-3); font-weight: 500; }
.sk-type { margin-left: 12px; }
.step > h2 { margin-bottom: 12px; }
.step.gave-up .ex-status { color: var(--bad); }

/* the stage words in the vertical step list: a small heading over the first step of each run (the compact
   numbered strip has none: each step's own label says its stage) */
.rail-v .rs-first a { flex-wrap: wrap; }
.rail-v .rs-t { flex: 1 1 0; min-width: 0; }
.rail-v .rs-g { flex-basis: 100%; margin: 8px 0 2px; font: 500 12.5px/1 var(--font); color: var(--ink-3); }
.rail-v li:first-child .rs-g { margin-top: 0; }
.rail [data-stage="checkpoint"] .rs-n, .rail [data-stage="build"] .rs-n { border-radius: 7px; }
.rail .is-missed .rs-n { box-shadow: inset 0 0 0 3px var(--bad); color: var(--bad); background: var(--paper); }

/* checkpoints and the final challenge are their own kind of stop: a diamond on the line, a square node in lists */
.row-l[data-kind] .node, .sl[data-kind] .sl-node { border-radius: 7px; }
.sl[data-kind] .sl-node { border-radius: 4px; }
.r-k { font: 650 13.5px/1.2 var(--font); color: var(--teal-text); }
.row-l.cp-retry .r-st { color: var(--bad); }

/* constraints and milestones in the step text: a marker that fills in when the check says so */
.ex-rules, .bh-phases, .ex-rules-h { margin-top: 18px; }
.ex-rules-h { font: 650 15px/1.3 var(--font); color: var(--ink); margin-bottom: 6px; }
.ex-rules ul, .ex-ms { margin: 0; padding: 0; list-style: none; }
.ex-rules li, .ex-ms li { position: relative; padding: 3px 0 3px 22px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.ex-rules li::before, .ms-dot { position: absolute; left: 2px; top: 9px; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink-3); content: ""; }
.ex-rules li.ok, .ex-ms li.ok { color: var(--ink); }
.ex-rules li.ok::before, .ex-ms li.ok .ms-dot { background: var(--ok-fill); box-shadow: none; }
.ex-rules li.no::before, .ex-ms li.no .ms-dot { box-shadow: inset 0 0 0 2px var(--bad); }
.ex-ms { counter-reset: ms; }
.bh-phases { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; padding: 0; list-style: none; font: 600 14.5px/1.3 var(--font); color: var(--ink-3); }
.bh-phases li { position: relative; padding-left: 18px; }
.bh-phases li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
.bh-phases li.ok { color: var(--ok); }
.bh-phases li.ok::before { background: var(--ok-fill); box-shadow: none; }

/* predict and explain: the learner's answer box lives on the slab, under the program */
.answer { display: flex; flex-direction: column; padding: 10px 12px 12px; background: var(--slab-2); }
.answer .form-label { color: var(--slab-ink); }
.answer .muted { color: var(--slab-mute); }
.answer .input { height: auto; min-height: 76px; background: var(--slab); color: var(--slab-ink); border-color: var(--slab-3); font: 14.5px/1.6 var(--mono); }
.answer-explain .input { font: 16px/1.55 var(--font); min-height: 120px; }
.answer .input[readonly] { opacity: .8; }
.rb-nocode .answer { flex: 1 1 auto; }
.rb-nocode .answer .input { flex: 1; }
.env-code > .runbox.rb-predict .editor-wrap, .env-code > .runbox.rb-explain .editor-wrap { flex: 1 1 40%; }
.model { margin-top: 2px; }
.model-h { margin-bottom: 6px; font: 650 14px/1.3 var(--font); color: #5fe0e8; }
.model p + p { margin-top: 8px; }
.explain-fb { background: var(--slab-2); color: var(--slab-ink); }
.selfmark { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.sm-q { flex-basis: 100%; font-weight: 650; }
.selfmark .btn { --edge: transparent; --lip-c: #05101f; background: var(--slab-3); color: var(--slab-ink); }
.selfmark .btn[aria-pressed="true"] { --edge: var(--teal-edge); background: var(--teal-btn); color: var(--teal-ink); }
.reflect { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-top: 6px; }
.fb-why { padding: 0; border: 0; background: none; color: #8fd9df; font: 500 14.5px/1.4 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fb-why:hover { color: #fff; }
.reflect .form-label { flex-basis: 100%; margin: 0; color: var(--slab-ink); }
.reflect .input { flex: 1 1 260px; height: auto; background: var(--slab); color: var(--slab-ink); border-color: var(--slab-3); font: 15px/1.5 var(--font); }
.reflect .btn { --edge: transparent; --lip-c: #05101f; background: var(--slab-3); color: var(--slab-ink); }
.reflect .model { flex-basis: 100%; }
.fb-bug { color: var(--slab-ink); font-weight: 400; }
.fb-ms { margin: 8px 0 0; padding: 0; list-style: none; font-size: 15px; }
.fb-ms li { display: flex; gap: 10px; padding: 2px 0; }
.fb-ms-m { flex: none; width: 64px; font: 650 14px/1.5 var(--font); }
.fb-ms .ok .fb-ms-m { color: #6fe0a8; }
.fb-ms .no .fb-ms-m { color: var(--slab-warn); }
.toolbar [data-act="giveup"].is-sure { color: var(--slab-warn); }

/* Noodle's review links (checkpoint misses) */
.coach-more .ch-review { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.ch-review a { font-weight: 650; color: var(--teal-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* results: checkpoint retry, bug hunt summary, the track-complete screen */
.pass.is-retry .pass-mark { display: none; }
.pass.is-retry .pass-h { font-size: clamp(28px, .8vw + 22px, 36px); }
.cp-retry { margin: 18px 0 24px; }
.cp-retry-h { font-weight: 700; margin-bottom: 6px; }
.cp-review { margin: 0 0 16px; padding: 0; list-style: none; }
.cp-review a { display: inline-flex; gap: 10px; padding: 4px 0; font-weight: 650; color: var(--teal-text); }
.cp-review .n { color: var(--ink-3); }
.bh-sum { margin: 18px 0 6px; padding: 0; list-style: none; max-width: 560px; }
.bh-sum li { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.bh-t { font-weight: 600; }
.bh-k { font-size: 15px; color: var(--ink-3); white-space: nowrap; }
.pass.is-complete .pass-h { font-size: clamp(30px, 1.2vw + 22px, 46px); letter-spacing: -.02em; }
.db-k { font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.dc-list, .db-can ul { margin: 0; padding: 0 0 0 20px; font-size: 17px; line-height: 1.5; }
.dc-list li + li, .db-can li + li { margin-top: 4px; }
.dc-list li::marker, .db-can li::marker { color: var(--gold); }
.done-blk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 72px); margin: 28px var(--gut) 0; padding: clamp(20px, 2.4vw, 36px) 0; }
.db-h { font-size: clamp(30px, 2vw + 18px, 56px); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.db-foot a { font-weight: 650; color: var(--teal-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 1000px) { .done-blk { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } .done-blk .db-foot { grid-column: 1; } }
.done-compact { margin: 0 0 24px; padding: 0; }
.done-compact .db-h { font-size: clamp(22px, 1vw + 16px, 30px); }

.dbtable-more { margin-top: 6px; font: 12.5px/1.4 var(--mono); color: var(--slab-mute); }

/* project checks in the playground brief */
.pg-checks { margin-top: 10px; }
.pg-checks-h { font: 650 14px/1.3 var(--font); color: #5fe0e8; }
.pg-checks .ex-ms li { color: var(--slab-ink); font-size: 14.5px; }
.pg-checks .ms-dot { box-shadow: inset 0 0 0 2px var(--slab-mute); }
.pg-checks-s { margin-top: 4px; font-size: 14px; color: var(--slab-mute); }

/* ---------- the editor/output split (split.js): a visible grip, a wide hit area, quick maximise ---------- */
.split-bar { position: relative; display: flex; flex: none; align-items: center; justify-content: center; height: 26px; background: var(--slab-2); }
.split-sep { position: absolute; inset: -6px 0; z-index: 2; display: flex; align-items: center; justify-content: center; cursor: row-resize; touch-action: none; }
.split-sep::before { content: ""; width: 44px; height: 4px; border-radius: 2px; background: var(--slab-3); transition: background-color .12s ease; }
.split-sep:hover::before, .split-sep:focus-visible::before, .is-resizing .split-sep::before { background: var(--teal); }
.split-sep:focus-visible { outline-offset: -3px; }
.split-max { position: absolute; right: 8px; top: 50%; z-index: 3; height: 22px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--slab-mute); font: 500 13px/22px var(--font); transform: translateY(-50%); cursor: pointer; }
.split-max:hover { color: var(--slab-ink); background: rgba(255, 255, 255, .08); }
.is-resizing, .is-resizing * { cursor: row-resize !important; user-select: none; }
.is-resizing.split-x, .is-resizing.split-x * { cursor: col-resize !important; }
.is-resizing iframe { pointer-events: none; }
@media (pointer: coarse) { .split-sep { inset: -12px 0; } }
/* the lesson's code panel: the output takes the chosen height; the editor keeps the rest (never under ~6 lines) */
.env-code.has-split > .runbox .rb-results { flex: 0 0 var(--split-b); max-height: none; }
.env-code.has-split > .runbox .rb-results .output { min-height: 100%; }
.env-code > .runbox .editor-wrap { min-height: 150px; }
@media (max-width: 899.98px) { .env-code .split-bar { display: none; } }
.ex-rules .ex-rules-h { margin-top: 0; }
@media (max-width: 599.98px) { .ws-tab { padding: 0 11px; gap: 7px; font-size: 15px; } .ws-tab .dot { width: 7px; height: 7px; } }

/* ---------- pricing: Premium as the rest of the road ---------- */
.jy-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px clamp(32px, 4vw, 96px); align-items: end; padding: clamp(32px, 4vw, 72px) var(--gut) 0; }
@media (min-width: 1100px) { .jy-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .jy-head .jy-sub { margin: 0 0 8px; } }
.jy-h1 { max-width: 19ch; font-size: clamp(38px, 2.4vw + 18px, 72px); font-weight: 600; letter-spacing: -.025em; }
.jy-h1b { display: block; color: var(--prem-text); }
.jy-sub { margin-top: 18px; max-width: 58ch; font-size: clamp(17px, .3vw + 15px, 20px); line-height: 1.55; color: var(--ink-2); }
.jy { padding: 28px var(--gut) clamp(40px, 4vw, 72px); }
.jy-road { --st: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0; padding: 170px 0 0; list-style: none; }
.jy-stop { position: relative; min-width: 0; padding: calc(var(--st) + 20px) 18px 0 0; }
.jy-stop::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--st) / 2 - 4px); height: 8px; background: var(--teal); }
.jy-stop.prem::before { background: repeating-linear-gradient(90deg, var(--prem) 0 14px, transparent 14px 22px); }
.jy-stop:last-child::before { right: auto; width: var(--st); }
.jy-dot { position: absolute; left: 0; top: 0; width: var(--st); height: var(--st); border-radius: 50%; background: var(--teal); }
.jy-stop.prem .jy-dot { background: var(--paper); box-shadow: inset 0 0 0 6px var(--prem); }
.jy-stop.cp .jy-dot { border-radius: 4px; transform: rotate(45deg) scale(.86); }
.jy-stop.end .jy-dot { background: var(--gold); box-shadow: none; }
.jy-t { display: block; font-size: clamp(19px, .4vw + 15px, 24px); font-weight: 700; letter-spacing: -.015em; }
.jy-stop.free .jy-t { color: var(--free); }
.jy-stop.free::before, .jy-stop.free .jy-dot { background: var(--free); }   /* the free stretch of the road in the free colour */
.jy-d { display: block; margin-top: 6px; max-width: 30ch; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.jy-noodle { position: absolute; bottom: calc(100% - var(--st) - 20px + 8px); display: flex; align-items: flex-end; gap: 12px; }
.jy-lock { left: -92px; }
.jy-trophy { left: -46px; }
.jy-noodle .noodle-art { flex: none; }
.jy-say { position: relative; margin-bottom: 64px; padding: 12px 16px; border: 2px solid var(--outline); border-radius: 16px; background: var(--bub-bg); color: var(--bub-ink); font-weight: 700; font-size: 17px; line-height: 1.3; white-space: nowrap; }
@media (max-width: 899.98px) {
  .jy-road { display: flex; flex-direction: column; padding-top: 0; }
  .jy-stop { padding: 0 0 30px calc(var(--st) + 22px); }
  .jy-stop::before { left: calc(var(--st) / 2 - 4px); right: auto; top: 0; bottom: 0; width: 8px; height: auto; }
  .jy-stop.prem::before { background: repeating-linear-gradient(180deg, var(--prem) 0 14px, transparent 14px 22px); }
  .jy-stop:last-child::before { display: none; }
  .jy-noodle { position: static; margin: 0 0 10px; }
  .jy-noodle .noodle-art { width: 96px !important; }
  .jy-say { margin-bottom: 40px; white-space: normal; font-size: 16px; }
}
.jx-row { padding-bottom: clamp(28px, 3vw, 48px); }
.jx-row .sec-t { margin-bottom: 20px; }
.jx-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px clamp(16px, 2vw, 32px); }
.jx { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 16px; background: var(--paper-2); }
.jx:hover .jx-t { color: var(--prem-text); }
.jx-k { order: 2; font-size: 14.5px; color: var(--prem-text); }
.jx-d { order: 3; }
.jx-t { font-size: 19px; line-height: 1.3; font-weight: 700; }
.jx-d { max-width: 52ch; color: var(--ink-2); line-height: 1.5; }
.cmp-title { margin-bottom: 12px; }
/* wide screens: project rows on a track page sit in two columns instead of stretching across 1920px */
@media (min-width: 1400px) { .trk-proj .pj-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px clamp(40px, 4vw, 96px); } .trk-proj .pj-row { grid-template-columns: 52px minmax(0, 1fr); } .trk-proj .pr-meta { grid-column: 2; justify-self: start; text-align: left; } }
/* long reading pages use the width as columns of a readable measure, not one narrow column and empty space */
@media (min-width: 1300px) {
  .page-terms .col-narrow, .page-credits .col-narrow { max-width: none; width: auto; }
  .terms { columns: 2 34rem; column-gap: clamp(48px, 5vw, 112px); }
  .terms h2 { break-after: avoid; }
  .terms p { break-inside: avoid; }
  .credits { columns: 2 30rem; column-gap: clamp(48px, 5vw, 112px); }
  .credits li { break-inside: avoid; }
}
.pk-kind { margin-left: 12px; }

/* ===============================================================================================   The Library (tools/build_library.py, assets/js/library.js) and the visualisations (assets/js/viz.js).
   Same system: paper, the navy slab for code, teal for the next action, purple for Premium, one colour per
   track. Rows and columns, not cards; a surface only where an interactive tool needs a boundary.
   ====================================================================================================== */
.lib { padding: clamp(24px, 3vw, 48px) var(--gut) clamp(48px, 5vw, 88px); }
.lib-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 80px); align-items: center; }
.lib-head h1 { display: flex; align-items: center; gap: 14px; font-size: clamp(36px, 1.6vw + 24px, 60px); line-height: 1; font-weight: 700; letter-spacing: -.035em; }
.lh-sub { margin-top: 14px; max-width: 58ch; font-size: clamp(17px, .3vw + 15px, 20px); line-height: 1.5; color: var(--ink-2); }
.lib-head .coach { margin: 0; }
@media (min-width: 900px) { .lib-head.lh-coach { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); } }
.lib-nav { margin: clamp(22px, 2.4vw, 36px) 0 clamp(26px, 3vw, 44px); overflow-x: auto; scrollbar-width: none; }
.lib-nav::-webkit-scrollbar { display: none; }
.lib-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lib-nav a { display: block; padding: 9px 14px; border-radius: 9px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.lib-nav a:hover { background: var(--paper-2); color: var(--ink); }
.lib-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* search: one big field, results drop under it */
.lib-search { position: relative; max-width: 720px; margin-top: 26px; }
.lib-search .ls-icon, .gl-filter .ls-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.lib-q { display: block; width: 100%; height: 60px; padding: 0 56px 0 52px; border: 2px solid var(--rule); border-radius: 12px; background: var(--paper-0); color: var(--ink); font: 500 18px/1 var(--font); }
.lib-q:focus { outline: none; border-color: var(--teal); }
.lib-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.ls-key { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: var(--paper-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule); }
.lib-search:focus-within .ls-key { display: none; }
.lib-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: min(60vh, 520px); overflow: auto; padding: 6px; border-radius: 12px; background: var(--paper-0); box-shadow: 0 0 0 1px var(--rule), 0 18px 40px rgba(9, 24, 44, .22); }
.lr-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border-radius: 9px; color: var(--ink); }
.lr-hit:hover, .lr-hit.sel { background: color-mix(in srgb, var(--tc, var(--teal)) 16%, var(--paper-0)); }
.lr-k { grid-column: 1; font-size: 13.5px; color: var(--ink-3); }
.lr-t { grid-column: 1; font-weight: 650; }
.lr-d { grid-column: 1; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.lr-p { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 13.5px; font-weight: 600; color: var(--prem-text); }
.lr-none { padding: 12px; color: var(--ink-2); }

/* lists: one column per track */
.lib-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 36px clamp(24px, 2.6vw, 48px); align-items: start; }
.lc-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 22px; font-weight: 700; }
.lib-rows { margin: 0; padding: 0; list-style: none; }
.lib-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 12px; margin-inline: -12px; border-radius: 10px; color: var(--ink); transition: background-color .15s ease; }
.lib-row:hover { background: color-mix(in srgb, var(--tc) 14%, var(--paper)); }
.lr-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lr-title { font-weight: 650; font-size: 16.5px; line-height: 1.3; }
.lr-desc { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.lr-err { font: 650 15px/1.3 var(--mono); color: var(--bad); }
.lib-row .lr-err + .lr-title { font-weight: 500; font-size: 15px; color: var(--ink-2); }
.lr-side { display: inline-flex; align-items: center; gap: 8px; padding-top: 2px; }
.lr-lvl { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.lr-lvl[data-level="Stretch"] { color: var(--ink); }
.lr-done { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tc); color: #0e1620; }
.lr-done .icon { width: 13px; height: 13px; stroke-width: 3.4; }
.kg-lock { display: inline-flex; color: var(--prem-text); }
.kg-lock .icon { width: 15px; height: 15px; }
.is-entitled .kg-lock { display: none; }

/* the hub: four blocks that each do one job */
.hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 4vw, 64px) clamp(32px, 4vw, 80px); }
@media (min-width: 1000px) { .hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hub-bh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.hub-bh h2 { font-size: clamp(24px, .6vw + 18px, 32px); font-weight: 700; letter-spacing: -.025em; }
.hub-p { margin: 8px 0 16px; color: var(--ink-2); font-size: 16.5px; }
.hub-err-list, .hub-viz-list, .hub-cs-list { margin: 0; padding: 0; list-style: none; }
.hub-err-list { overflow: hidden; border-radius: 14px; background: var(--slab); color: var(--slab-ink); padding: 8px; }
.hub-err { display: grid; grid-template-columns: 22px minmax(150px, max-content) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px; border-radius: 9px; }
.hub-err:hover, .hub-err:focus-visible { background: var(--slab-2); }
.hub-err code { font: 650 15px/1.3 var(--mono); color: var(--slab-warn); }
.hub-err span:last-child { color: var(--slab-mute); font-size: 14.5px; line-height: 1.4; }
.hub-viz { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 14px; padding: 12px; margin-inline: -12px; border-radius: 10px; color: var(--ink); }
.hub-viz:hover { background: color-mix(in srgb, var(--tc) 14%, var(--paper)); }
.hub-viz .glyph { grid-row: 1 / span 2; }
.hv-t { font-weight: 650; font-size: 17px; }
.hv-d { grid-column: 2; font-size: 14.5px; color: var(--ink-2); }
.hub-viz .kg-lock { grid-column: 3; grid-row: 1; }
.hub-cs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.hub-cs { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: color-mix(in srgb, var(--tc) 18%, var(--paper)); color: var(--ink); font-weight: 650; font-size: 17px; }
.hub-cs:hover { background: color-mix(in srgb, var(--tc) 30%, var(--paper)); }
.hc-n { font-weight: 500; font-size: 14px; color: var(--ink-2); }
.hub-ex { margin-top: 22px; }
.hub-ex a, .gl-see a, .see-it a { font-weight: 650; color: var(--teal-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* debugging: the method, then the errors */
.dbg-how { margin-bottom: clamp(36px, 4vw, 56px); }
.dbg-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 18px 28px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: m; }
.dbg-method li { counter-increment: m; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.dbg-method strong::before { content: counter(m) ". "; color: var(--teal-text); }
.dbg-method strong { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 2px; }

/* an item page: the content, and a rail with where it fits */
.lib-item { padding: clamp(20px, 2.6vw, 40px) var(--gut) clamp(48px, 5vw, 88px); }
.li-head { max-width: 980px; }
.li-head .crumbs { margin-bottom: 18px; }
.li-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: clamp(32px, 1.4vw + 22px, 54px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; }
.li-err { padding: 4px 12px 6px; border-radius: 10px; background: var(--slab); color: var(--slab-warn); font: 650 .62em/1.2 var(--mono); letter-spacing: 0; }
.li-error .li-head h1 .li-t { font-size: .62em; color: var(--ink-2); font-weight: 600; letter-spacing: -.01em; }
.li-desc { margin-top: 14px; max-width: 62ch; font-size: clamp(17px, .3vw + 15px, 20px); line-height: 1.5; color: var(--ink-2); }
.li-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; color: var(--ink-3); font-size: 15px; }
.li-done { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-weight: 650; }
.li-done .icon { width: 16px; height: 16px; stroke-width: 3; }
.li-back { margin-top: 18px; }
.li-back a { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--teal-text); }
.li-back .icon { width: 18px; height: 18px; }
.li-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px clamp(32px, 3.4vw, 64px); margin-top: clamp(28px, 3vw, 48px); align-items: start; }
@media (min-width: 1100px) { .li-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); } .li-side { position: sticky; top: calc(var(--top-h) + 20px); } }
.li-main { display: flex; flex-direction: column; gap: clamp(36px, 3.4vw, 56px); min-width: 0; }
.li-sec > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; font-size: clamp(22px, .5vw + 18px, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.li-sec .prose { max-width: none; }
.li-lede { margin-bottom: 14px; color: var(--ink-2); font-size: 16.5px; }
.li-slab { margin-top: 16px; }
.li-slab > .runbox { margin: 0; border-radius: 16px; }
.li-slab .editor .cm-editor { max-height: 560px; }
.li-sec .ex-status, .li-chk .ex-status { font-size: 15px; font-weight: 650; color: var(--ok); }
.li-chk { min-height: 0; margin: 0; }
.li-chk:has(.ex-status:empty) { display: none; }
.li-ex .ex-rules-h { margin-top: 14px; }
.li-tries .prose li + li { margin-top: 10px; }
.li-side { display: flex; flex-direction: column; gap: 28px; }
.coach-lib { --coach-w: 96px; margin: 0; }
.ls-h { margin-bottom: 8px; font-weight: 700; font-size: 16px; }
.ls-lessons, .kg-list, .ls-errs { margin: 0; padding: 0; list-style: none; }
.ls-lessons a { display: grid; grid-template-columns: 26px 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 8px; margin-inline: -8px; border-radius: 9px; color: var(--ink); }
.ls-lessons a:hover { background: color-mix(in srgb, var(--tc) 14%, var(--paper)); }
.ls-lessons .node { width: 24px; height: 24px; box-shadow: inset 0 0 0 3.5px var(--tc); }
.ls-lessons [data-tier="premium"] .node { background: var(--prem); box-shadow: none; color: #fff; }
.ls-lessons .node .icon { width: 12px; height: 12px; }
.ls-lessons .n-lock, .ls-lessons .n-done { display: none; }
.ls-lessons [data-tier="premium"] .n-lock { display: grid; }
.ls-lessons a.done .node { background: var(--tc); box-shadow: none; color: #0e1620; }
.ls-lessons a.done .n-done { display: grid; }
.ls-lessons a.done .n-lock { display: none; }
.lsn-n { font: 500 13.5px/1 var(--mono); color: var(--ink-3); }
.lsn-t { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.kg-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 8px 10px; margin-inline: -10px; border-radius: 9px; color: var(--ink); }
.kg-list a:hover { background: var(--paper-2); }
.kg-k { grid-column: 1; font-size: 14px; color: var(--ink-3); }
.kg-t { grid-column: 1; font-weight: 650; font-size: 15.5px; line-height: 1.3; }
.kg-list .kg-lock { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.ls-errs { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-errs a { display: inline-block; padding: 5px 9px; border-radius: 7px; background: var(--paper-2); }
.ls-errs a:hover { background: var(--paper-3); }
.ls-errs code { font: 600 13.5px/1.3 var(--mono); color: var(--ink); }

/* Premium item preview */
.lib-gate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(22px, 2.4vw, 36px); border-radius: 16px; background: var(--prem-tint); }
.lg-k { font-size: 17px; }
.lg-what { margin-top: 8px; max-width: 54ch; font-size: 18px; line-height: 1.5; color: var(--ink); }
.lg-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; color: var(--ink-2); font-size: 15px; }
.lg-buy a:not(.btn) { color: var(--prem-text); font-weight: 650; text-decoration: underline; }
.lg-noodle { width: 120px; }
.gate-checking .lib-gate { visibility: hidden; }
@media (max-width: 560px) { .lib-gate { grid-template-columns: minmax(0, 1fr); } .lg-noodle { display: none; } }

/* glossary */
.gl-filter { position: relative; max-width: 560px; margin-bottom: 30px; }
.gl-filter .lib-q { height: 52px; font-size: 16.5px; padding-right: 16px; }
.gl-count { display: block; margin-top: 8px; color: var(--ink-3); font-size: 14.5px; }
.gl-count:empty { display: none; }
.gl { columns: 3 340px; column-gap: clamp(32px, 3.4vw, 64px); }
.gl-grp { break-inside: avoid-column; margin-bottom: 26px; }
.gl-l { margin-bottom: 6px; font: 700 28px/1 var(--font); color: var(--teal-text); }
.gl dl { margin: 0; }
.gl-i { break-inside: avoid; padding: 10px 0; scroll-margin-top: calc(var(--top-h) + 20px); }
.gl-i:target dt { color: var(--teal-text); }
.gl-i dt { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.gl-tags { display: inline-flex; gap: 4px; }
.gl-tags .glyph-xs { width: 18px; height: 18px; font-size: 7.5px; border-radius: 5px; }
.gl-i dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.gl-i dd code { padding: 1px 5px; border-radius: 4px; background: var(--paper-3); color: var(--ink); font-size: .88em; }
.gl-see { margin-top: 4px; }

/* cheatsheets: dense, printable */
.cs-head { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cs-head { grid-template-columns: minmax(0, 1fr) auto; } }
.cs-head h1 .glyph-lg { width: 52px; height: 52px; font-size: 18px; border-radius: 12px; }
.cs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cs-tracks { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cs-tracks a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; font-weight: 600; color: var(--ink-2); }
.cs-tracks a:hover { background: var(--paper-2); }
.cs-tracks a[aria-current="page"] { background: color-mix(in srgb, var(--tc) 22%, var(--paper)); color: var(--ink); }
.cs-grid { columns: 3 380px; column-gap: clamp(24px, 2.4vw, 40px); }
.cs-sec { break-inside: avoid; margin-bottom: 30px; }
.cs-sec h2 { margin-bottom: 10px; font-size: 20px; font-weight: 700; }
.cs-row + .cs-row { margin-top: 10px; }
.cs-code { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--slab); color: var(--slab-ink); font-size: 14px; line-height: 1.55; overflow-x: auto; --syn-kw: #cfa8ff; --syn-str: #a8e389; --syn-num: #ffb27a; --syn-com: #8299b2; --syn-fn: #7fcdf8; }
.cs-code code { font: inherit; }
.cs-note { margin-top: 5px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.cs-note code { padding: 1px 5px; border-radius: 4px; background: var(--paper-3); font-size: .9em; color: var(--ink); }
.cs-lock { padding: 16px; border-radius: 10px; background: var(--prem-tint); color: var(--ink-2); font-size: 15px; }
.cs-lock p { display: flex; gap: 10px; align-items: center; }
.cs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-2); }
.cs-foot a { color: var(--prem-text); font-weight: 650; text-decoration: underline; }
.cs-index { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); max-width: 1000px; }

/* the lesson side: a quiet "see it" line, and where to go after passing */
.see-it { margin-top: 18px; }
.see-it a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.see-it a span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.see-it .icon { width: 20px; height: 20px; }
.keep-going { margin-top: 22px; }
.keep-going .kg-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 4px 18px; margin-top: 6px; }
.keep-going .kg-list a { margin-inline: 0; }

/* the error's own page, linked from the output */
.err-topic { display: inline-block; margin-top: 8px; color: #6fe3ea; font: 600 14px/1.4 var(--font); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.err-topic:hover { color: #fff; }
.console .err-topic { display: block; width: max-content; }

/* ---------- visualisations ---------- */
.viz { margin: 22px 0; padding: 16px; border-radius: 16px; background: var(--paper-2); container-type: inline-size; color: var(--ink); }
.viz-cap { margin-bottom: 12px; font-weight: 700; font-size: 16px; color: var(--ink); }
.vz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.vz-range { flex: 1 1 140px; min-width: 120px; accent-color: var(--teal); }
.vz-count { min-width: 52px; font: 600 14px/1 var(--mono); color: var(--ink-3); text-align: right; }
.vz-say { margin-top: 10px; min-height: 1.5em; color: var(--ink); font-size: 16px; line-height: 1.5; }
.vz-codebox { min-width: 0; overflow: auto; border-radius: 12px; background: var(--slab); }
.vz-code { margin: 0; padding: 10px 0; list-style: none; font: 14.5px/1.7 var(--mono); color: var(--slab-ink); }
.vz-code li { position: relative; display: flex; gap: 14px; padding: 0 14px 0 34px; white-space: pre; }
.vz-ln { width: 1.6em; flex: none; text-align: right; color: var(--slab-mute); opacity: .7; }
.vz-code li.is-ran { background: rgba(255, 255, 255, .05); }
.vz-code li.is-next { background: color-mix(in srgb, var(--teal) 30%, var(--slab)); }
.vz-code li.is-next::before { content: ""; position: absolute; left: 12px; top: 50%; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--gold); transform: translateY(-50%); }
.vz-code code, .prose .vz-code code { padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
.vz-jtype > label { white-space: nowrap; }
.vz-trace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container (min-width: 760px) { .vz-trace { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .vz-outbox { grid-column: 1 / -1; } }
.vz-state { min-width: 0; }
.vz-cols { display: grid; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); gap: 64px; margin-bottom: 6px; font-size: 14px; font-weight: 650; color: var(--ink-3); }
.vz-grid { position: relative; display: grid; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); gap: 64px; align-items: start; }
.vz-names, .vz-vals { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vz-frame { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vz-frame + .vz-frame { padding-top: 10px; }
.vz-fname { font: 600 13.5px/1.2 var(--mono); color: var(--ink-3); }
.vz-frame.top .vz-fname { color: var(--teal-text); }
.vz-tag { padding: 6px 12px 7px; border-radius: 8px; background: var(--teal-tint); color: var(--ink); font: 650 15px/1.2 var(--mono); }
.vz-tag.hot, .vz-obj.hot { outline: 3px solid var(--gold); outline-offset: 1px; }
.vz-obj { display: inline-flex; flex-direction: column; gap: 4px; align-self: flex-start; max-width: 100%; padding: 6px 10px 8px; border-radius: 8px; background: var(--paper-0); box-shadow: inset 0 0 0 1.5px var(--rule); }
.vz-type { font: 500 12.5px/1.2 var(--mono); color: var(--ink-3); }
.vz-v { font: 600 15px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.vz-cells { display: flex; flex-wrap: wrap; gap: 3px; }
.vz-cell { display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; padding: 3px 7px 5px; border-radius: 6px; background: var(--paper-2); }
.vz-idx { font: 500 11.5px/1.3 var(--mono); color: var(--ink-3); }
.vz-refdot { width: 10px; height: 10px; margin: 4px 0; border-radius: 50%; background: var(--ink-3); }
.vz-empty { font-size: 14px; color: var(--ink-3); }
.vz-arrows { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.vz-arrow { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.vz-arrow.hot { stroke: var(--teal-text); stroke-width: 2.5; }
.vz-head { fill: var(--ink-3); }
.vz-outbox { min-width: 0; }
.vz-outh { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 650; color: var(--ink-3); }
.vz-out { min-height: 2.2em; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--slab-out); color: var(--slab-ink); font: 14px/1.55 var(--mono); white-space: pre-wrap; }
.vz-out .err { color: var(--slab-warn); }
/* index explorer */
.vz-iform { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.vz-ilab { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; }
.vz-iq { width: 180px; height: 42px; font: 600 15px/1 var(--mono); }
.vz-idxrow { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.vz-icell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 66px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--paper-0); box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--ink); cursor: pointer; font: inherit; }
.vz-icell:hover { box-shadow: inset 0 0 0 2px var(--teal); }
.vz-ip { font: 700 14px/1 var(--mono); color: var(--teal-text); }
.vz-iv { font: 600 15px/1.2 var(--mono); }
.vz-in { min-height: 1em; font: 500 12.5px/1 var(--mono); color: var(--ink-3); }
.vz-icell.on { background: var(--teal); box-shadow: none; color: var(--teal-ink); }
.vz-icell.on .vz-ip, .vz-icell.on .vz-in { color: var(--teal-ink); }
.vz-icell.past { background: transparent; box-shadow: inset 0 0 0 2px var(--rule); }
.vz-icell.past .vz-iv { color: var(--ink-3); }
.vz-icell.bad { background: var(--bad-tint); box-shadow: inset 0 0 0 2px var(--bad); }
.vz-ileg { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.vz-ires { margin-top: 8px; min-height: 1.5em; font: 15px/1.5 var(--font); color: var(--ink); }
/* memory */
.vz-mem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container (min-width: 760px) { .vz-mem { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.vz-memory { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.vz-memory.no-heap { grid-template-columns: minmax(0, 1fr); }
.vz-memory.no-heap .vz-heap { display: none; }
.vz-mh { margin-bottom: 6px; font-weight: 700; font-size: 15px; }
.vz-sb { display: flex; flex-direction: column; gap: 10px; }
.vz-mframe { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: var(--paper-0); box-shadow: inset 0 0 0 1.5px var(--rule); }
.vz-mframe.top { box-shadow: inset 0 0 0 2px var(--teal); }
.vz-mrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 6px; border-radius: 7px; }
.vz-mrow.hot { outline: 3px solid var(--gold); }
.vz-addr { font: 500 12.5px/1 var(--mono); color: var(--ink-3); }
.vz-mname { display: flex; flex-direction: column; min-width: 0; }
.vz-mname strong { font: 650 15px/1.2 var(--mono); }
.vz-mtype { font: 500 12px/1.2 var(--mono); color: var(--ink-3); }
.vz-mval { min-width: 64px; padding: 5px 9px; border-radius: 7px; background: var(--paper-2); font: 650 14.5px/1.2 var(--mono); text-align: center; }
.vz-mval.is-ptr { background: var(--teal-tint); color: var(--teal-text); }
.vz-hb { display: flex; flex-direction: column; gap: 10px; }
.vz-block { padding: 10px; border-radius: 10px; background: var(--paper-0); box-shadow: inset 0 0 0 1.5px var(--rule); }
.vz-block.hot { outline: 3px solid var(--gold); }
.vz-block.freed { background: transparent; box-shadow: inset 0 0 0 2px var(--rule); opacity: .75; }
.vz-block.freed .vz-v { color: var(--ink-3); }
.vz-bh { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 8px; }
.vz-blab { font: 600 13px/1.3 var(--mono); color: var(--ink-2); }
.vz-bcells { display: flex; flex-wrap: wrap; gap: 3px; }
.vz-bcell { display: inline-flex; flex-direction: column; align-items: center; min-width: 46px; padding: 4px 8px; border-radius: 6px; background: var(--paper-2); }
.vz-mout { margin-top: 8px; }
/* join */
.vz-jtype { margin-bottom: 12px; }
.vz-jsql { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--slab); color: var(--slab-ink); font: 14px/1.55 var(--mono); white-space: pre-wrap; }
.vz-jtables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.vz-jt { min-width: 0; overflow-x: auto; }
.vz-jcap { margin-bottom: 6px; font: 700 14.5px/1.2 var(--mono); }
.vz-jt table { border-collapse: collapse; width: 100%; font: 14px/1.4 var(--mono); }
.vz-jt th { padding: 6px 10px; text-align: left; font-weight: 650; color: var(--ink-3); }
.vz-jt td { padding: 6px 10px; background: var(--paper-0); }
.vz-jt tr + tr td { box-shadow: inset 0 1px 0 var(--paper-2); }
.vz-jt tr.done td { color: var(--ink); }
.vz-jt tr.cur td { background: color-mix(in srgb, var(--gold) 40%, var(--paper-0)); }
.vz-jt tr.on td { background: var(--teal-tint); }
.vz-jt tr.orphan td { color: var(--ink-3); text-decoration-line: line-through; }
.vz-jres { margin-top: 16px; }
.vz-jres tbody tr { cursor: pointer; }
.vz-jres tbody tr:focus { outline: 3px solid var(--teal-text); outline-offset: -3px; }
.vz-jres tr.new td { background: color-mix(in srgb, var(--gold) 30%, var(--paper-0)); }
.vz-jres tr.sel td, .vz-jres tbody tr:hover td { background: var(--teal-tint); }
.vz-jres td.null { color: var(--ink-3); font-style: italic; }

/* ---------- playground: New, Saved, Share ---------- */
.ws-new { min-width: 300px; max-height: min(70vh, 560px); overflow: auto; }
.ws-menu .wm-h { padding: 10px 12px 4px; font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.ws-menu .wm-h:first-child { padding-top: 4px; }
.ws-new button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; }
.wm-t { font-weight: 650; }
.wm-d { grid-column: 1; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.wm-lock { grid-column: 2; grid-row: 1; color: var(--prem-text); }
.wm-lock .icon { width: 15px; height: 15px; }
.is-entitled .wm-lock { display: none; }
.ws-saves, .ws-share { right: 0; left: auto; width: min(380px, calc(100vw - 32px)); padding: 12px; color: var(--ink); }
@media (max-width: 700px) { .ws-saves, .ws-share { position: fixed; left: 16px; right: 16px; top: calc(var(--top-h) + 64px); width: auto; } }
.ws-menu .ws-sv-head .btn { display: inline-flex; width: auto; flex: none; }
.ws-sv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ws-sv-h, .ws-sh-h { font-weight: 700; font-size: 15px; }
.ws-sv-list { max-height: 320px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.ws-sv-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px; align-items: center; border-radius: 9px; }
.ws-sv-list li.is-cur { background: var(--teal-tint); }
.ws-menu .ws-sv-open { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-sv-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.ws-sv-t { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.ws-menu .ws-sv-list .btn { display: inline-flex; width: auto; height: 32px; padding: 0 8px; font-size: 13.5px; color: var(--ink-2); }
.ws-sv-foot, .ws-sh-p { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.ws-name .form-label { display: block; margin-bottom: 6px; font-weight: 650; font-size: 14.5px; }
.ws-name .input, .ws-sh-url { height: 44px; font-size: 15px; }
.ws-sh-url { margin-top: 8px; font: 13px/1 var(--mono); }
.ws-name-act { display: flex; gap: 8px; margin-top: 10px; }
.ws-menu .ws-name-act .btn { display: inline-flex; width: auto; }
.ws-menu .ws-name-act .btn-primary { background: var(--teal); }
.ws-tools [data-act="save"].is-clean { color: var(--slab-mute) !important; opacity: .7; }
.pg-fork { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pg-fork .btn-ghost { color: var(--slab-mute); }
.toolbar .btn-fork { order: 4; margin-left: auto; }
/* Code Map's Visualise, beside Run (assets/js/codemap/, styles in assets/css/codemap.css once opened) */
.btn-viz .icon { width: 18px; height: 18px; }

@media print {
  .topbar, .site-foot, .lib-nav, .cs-tools, .cs-foot, .skip { display: none !important; }
  .lib { padding: 0; }
  .cs-grid { columns: 2; }
  .cs-code { background: #f4f4f4 !important; color: #111 !important; --syn-kw: #6b2fbf; --syn-str: #2e7d32; --syn-num: #b45309; --syn-com: #666; --syn-fn: #1565c0; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-row, .hub-viz { transition: none; }
}
/* the playground bar with New, Saved, Save and Share: one row on a laptop, two tidy rows on a phone */
.ws-ds select { max-width: 158px; }
@media (min-width: 1600px) { .ws-ds select { max-width: 240px; } }
@media (min-width: 700px) and (max-width: 1599.98px) { .ws-tool { padding: 0 10px !important; } }
@media (max-width: 699.98px) {
  .ws-tools { gap: 2px; }
  .ws-tool { padding: 0 8px !important; font-size: 14px; }
  .ws-tools .ws-ds { order: 5; margin-left: 4px; }
  .ws-tools .run-state { order: 6; }
  .ws-tools [data-act="run"] { order: 7; margin-left: auto; }
  .ws-new { position: fixed; left: 16px; right: 16px; top: calc(var(--top-h) + 64px); min-width: 0; }
}
/* the course switcher shows only its glyph below 1080px (the top bar section); its name stays for screen readers */
@media (min-width: 900px) and (max-width: 1079.98px) {
  .ts-cur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.cs-code, .cs-code code, .vz-code, .vz-code code, .vz-jsql, .vz-out, .vz-v, .vz-tag, .vz-jt table, .lr-err, .hub-err code, .li-err, .ls-errs code { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.gl-see { display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 599.98px) {
  .hub-err { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; }
  .hub-err span:last-child { grid-column: 2; white-space: normal; }
}
/* ===== Placement, tested out, Your turn, checkpoint diagnostics (2026-10 expansion) ===== */
/* the offer: one question and three answers, on the track band or above lesson 01 */
.place-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.place-offer[hidden] { display: none; }
.po-q { flex: 0 1 auto; margin-right: 4px; font-weight: 650; font-size: 16px; }
.po-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.po-x { width: 36px; height: 36px; color: inherit; }
.po-lesson { margin: 0 0 18px; }
.po-lesson .po-q { color: var(--ink); }
/* tested out: the node is a dashed ring, never the filled "done" check */
.row-l.skipped .node, .row-l.compact.skipped .node { box-shadow: none; border: 3px dashed var(--tc); }
.row-l.skipped .r-st { color: var(--ink-3); }
.sl.skipped .sl-node { box-shadow: none; border: 2px dashed var(--tc); }
.ticks span.skipped { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tc); }
.place-note span { color: var(--ink-2); }
/* the check: the lesson environment, one problem at a time */
.page-place .env { min-height: calc(100vh - var(--top-h, 64px)); }
.pl-intro h1 { font-size: clamp(30px, 1.6vw + 18px, 46px); line-height: 1.08; letter-spacing: -.01em; }
.pl-lede { margin-top: 16px; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.pl-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 26px; }
.pl-t { font-size: clamp(22px, .8vw + 16px, 30px); line-height: 1.15; }
.pl-t:focus { outline: none; }
.pl-item .prose { margin-top: 12px; }
.pl-dots { display: flex; gap: 6px; margin: 24px 0 0; padding: 0; list-style: none; max-width: 260px; }
.pl-dots li { flex: 1; height: 8px; border-radius: 4px; background: var(--paper-2); }
.pl-dots li.cur { background: var(--ink-3); }
.pl-dots li.ok { background: var(--tc); }
.pl-dots li.no { background: color-mix(in srgb, var(--ink) 22%, var(--paper-2)); }
.pl-rh { font-size: clamp(26px, 1.2vw + 18px, 40px); line-height: 1.1; }
.pl-result:focus { outline: none; }
.pl-rsum { margin-top: 10px; font-size: 17px; color: var(--ink-2); }
.pl-skips { margin: 24px 0 0; padding: 0; border: 0; }
.pl-skips legend { padding: 0; margin-bottom: 8px; font-weight: 650; }
.pl-sk { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 16px; cursor: pointer; }
.pl-sk input { width: 20px; height: 20px; accent-color: var(--teal); }
.pl-sk .n { font: 600 14px/1 var(--mono); color: var(--ink-3); }
.pl-fine { flex-basis: 100%; margin-top: 10px; font-size: 14.5px; color: var(--ink-3); }
.env-code.pl-idle > .runbox { display: none; }
.env-code.pl-idle { min-height: 0; height: auto; }
.env-code.pl-idle .code-status { display: none; }
/* Noodle's buttons (skip ahead, an easier version) */
.coach-more .ch-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* checkpoint result: the concept each missed problem tests, then the lesson that teaches it */
.cp-review li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 4px 0; }
.cp-con { font-weight: 650; color: var(--ink); }
.cp-review li a { padding: 0; }
/* the Premium preview: what it is, what you get from it, then one way in (two buttons and the price), context last */
.lk-gain { display: grid; gap: 8px; margin: 18px 0 0; font-size: 16px; line-height: 1.5; }
.lk-gain > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; }
.lk-gain dt { font-weight: 650; color: var(--ink); }
.lk-gain dd { margin: 0; color: var(--ink-2); }
.gate-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.gate-price { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
/* the locked lesson's CTA (owner, 11 Oct 2026): a visible heading, the price, Get Brainlag Code, All access small */
.gate-h { margin: 0 0 4px; font-size: 21px; line-height: 1.25; text-wrap: balance; }
.locked .gate-price { margin: 0 0 14px; text-wrap: pretty; }
.gate-alt { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
.gate-alt a { font-weight: 650; }
.gate-note { font-size: 15px; color: var(--ink-3); }
.locked .lk-ctx { margin-top: 18px; }
@media (max-width: 599.98px) { .gate-act .btn { flex: 1 1 auto; } .lk-gain > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 899.98px) {
  .page-place .env { min-height: 0; padding-bottom: 32px; }
  .pl-intro, .pl-item, .pl-result { order: 2; padding: 8px var(--gut) 0; }
  .coach-place { order: 3; }
  .page-place .env-code { order: 4; margin-top: 8px; }
  .page-place .site-foot { padding-bottom: 0; }
  .place-offer { gap: 8px 10px; }
  .po-btns .btn { flex: 1 1 auto; }
  .place-offer { position: relative; }
  .po-q { padding-right: 44px; }
  .po-x { position: absolute; top: -8px; right: -8px; }
}
/* the placement board: the problems in the code pane before and after the check */
.pl-board { display: none; margin: 0; padding: clamp(20px, 2vw, 36px); list-style: none; color: var(--slab-ink, #dfe7f1); }
.env-code.pl-idle .pl-board { display: block; }
.pl-board li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 14px; align-items: baseline; padding: 14px 0; }
.pb-n { font: 700 22px/1 var(--mono); color: color-mix(in srgb, currentColor 45%, transparent); }
.pb-t { font-weight: 650; font-size: 18px; line-height: 1.35; }
.pb-from { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.3; color: color-mix(in srgb, currentColor 60%, transparent); }
.pb-s { font-weight: 600; font-size: 14.5px; }
.pl-board li.ok .pb-n, .pl-board li.ok .pb-s { color: var(--tc); }
.pl-board li.no { opacity: .6; }
/* projects in the course: a quiet line under the lesson that makes each one possible, and in that lesson's result */
.row-pj { position: relative; z-index: 1; margin: -2px 0 4px; padding: 0 12px 8px 88px; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.row-pj a, .pass-proj a { color: var(--teal-text); font-weight: 650; }
.row-pj a:hover, .pass-proj a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rp-k { margin-right: 2px; font-weight: 600; }
.rp-m { color: var(--ink-3); }
.row-pj .r-lock, .pass-proj .r-lock { display: inline-flex; margin-left: 4px; vertical-align: -2px; color: var(--prem-text); }
.row-pj .r-lock .icon, .pass-proj .r-lock .icon { width: 14px; height: 14px; }
.is-entitled .row-pj .r-lock, .is-entitled .pass-proj .r-lock { display: none; }
.pass-proj { margin-top: 18px; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 599.98px) { .row-pj { padding-left: 84px; } }

/* ===================================================================================================
   Motion and the phone dock (October 2026): assets/js/cheer.js and assets/js/dock.js.
   A lesson on a phone works like a quiz app built for code: progress strip at the top, the answer in the middle,
   the action bar under the thumb, feedback sliding up out of that bar, output in a sheet. Motion is transform and
   opacity only; Noodle never scales.
   =================================================================================================== */
/* the Learn kit's tokens, in Brainlag Code's palette (the kit's own stylesheet loads first) */
:root, :root[data-theme="dark"] {
  --blk-ink: var(--ink); --blk-ink-2: var(--ink-3); --blk-face: var(--key-2); --blk-edge: var(--key-2-edge);
  --blk-accent: var(--teal-btn); --blk-accent-edge: var(--teal-edge); --blk-accent-ink: var(--teal-ink); --blk-accent-tint: var(--teal-tint);
  --blk-ok: var(--ok); --blk-ok-fill: var(--ok-fill); --blk-ok-bg: var(--ok-tint);
  --blk-bad: var(--bad); --blk-bad-bg: var(--bad-tint); --blk-bad-fill: var(--warn-ink); --blk-bad-ink: var(--warn-bg);
  --blk-track: var(--paper-3); --blk-fill: var(--tc); --blk-radius: 10px; --blk-lip: 4px;
}
.blk-sheet-h { letter-spacing: -.01em; }
/* sound switch: at the end of the step strip */
.env-rail.has-snd { display: flex; align-items: center; gap: 14px; }
.env-rail.has-snd > .rail { flex: 1 1 auto; min-width: 0; }
.snd-btn:hover { color: var(--ink); background: var(--paper-2); }
.rail-combo { display: inline-flex; flex: none; }
.rail-combo:empty, .rail-combo:has(> .blk-combo[hidden]) { display: none; }
.rail-back { display: none; }
@media (min-width: 900px) { .is-passed .env-rail.has-snd { display: none; } }

/* the feedback sheet: on wide screens it rises from the bottom edge of the code slab */
.env-code > .blk-sheet { position: absolute; left: 0; right: 0; bottom: 0; }
.blk-sheet-h { font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.env-code > .blk-sheet.is-ok { background: #0f3d2c; color: #c4f6dc; }
.env-code > .blk-sheet.is-no { background: var(--warn-bg); color: var(--warn-ink); }
@media (min-width: 900px) { .blk-sheet-open .env-code > .runbox.is-shown .rb-results { padding-bottom: var(--blk-sheet-h, 0px); } }

/* answers you tap: big targets */
.selfmark .btn { min-height: 48px; height: 48px; padding: 0 20px; font-size: 16px; }

/* the result as a celebration: a screen of its own */
.pass-stats { display: flex; flex-wrap: wrap; gap: 10px clamp(24px, 3vw, 48px); margin: 20px 0 0; }
.pass-stats > div { display: flex; flex-direction: column-reverse; gap: 2px; }
.pass-stats dt { font-size: 14px; color: var(--ink-3); }
.pass-stats dd { margin: 0; min-width: 4.6ch; font-size: clamp(26px, .6vw + 22px, 34px); line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pass-mod { margin-top: 12px; font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--tc-text); }
.pass-bar { margin: 22px 0 0; }
.pass-bar + .pass-track { margin-top: 8px; }
.pass.is-cele .pass-coach .coach-lesson { --coach-w: 168px; }
.pass.is-cele .pass-coach .coach-say { margin-bottom: 0; }
.pass.is-cele .pass-coach .coach-line { font-size: 18px; }
@media (min-width: 900px) {
  .env.is-passed { grid-template-columns: minmax(0, 1fr); }
  .env.is-passed .env-code { position: absolute; left: -10000px; top: 0; width: min(900px, 100vw); opacity: 0; pointer-events: none; }
  .env.is-passed .env-text { min-height: 0; }
  .pass.is-cele { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 860px); column-gap: clamp(32px, 4vw, 80px); align-items: start; padding-top: 12px; }
  .pass.is-cele > * { grid-column: 2; }
  .pass.is-cele > .pass-coach { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: calc(var(--top-h) + 24px); margin: 0; }
  .pass.is-cele .pass-coach .coach { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pass.is-cele .pass-coach .coach-tail { display: none; }
  .pass.is-cele .pass-top { margin-top: 6px; }
  .pass.is-cele .pass-h { font-size: clamp(40px, 1.6vw + 24px, 60px); }
}

.is-walking { position: relative; z-index: 5; will-change: transform; }

/* the dock: fixed to the bottom, riding on top of the on-screen keyboard */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--paper); box-shadow: 0 -1px 0 var(--rule); transform: translateY(calc(-1 * var(--kb, 0px))); padding-bottom: env(safe-area-inset-bottom); }
.kb-open .dock { padding-bottom: 0; }
.kbar { background: var(--paper-2); box-shadow: 0 -1px 0 var(--rule); }
.kb-row { display: flex; gap: 6px; padding: 6px 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.kb-row::-webkit-scrollbar { display: none; }
.kb-k { flex: none; min-width: 42px; height: 44px; padding: 0 6px 2px; border: 0; border-radius: 8px; background: var(--key-2); box-shadow: inset 0 0 0 1px var(--key-2-edge); color: var(--ink); font: 600 19px/1 var(--mono); touch-action: manipulation; cursor: pointer; }
.kb-k:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--key-2-edge); }
.kb-tab { min-width: 58px; font: 650 15px/1 var(--font); }
.os-head { display: none; }

@media (max-width: 899.98px) {
  /* the strip becomes a progress bar with Back in front of it, kept in view */
  .page-lesson:not(.page-place) .env-rail { position: sticky; top: var(--top-h); z-index: 40; display: flex; align-items: center; gap: 8px; padding: 6px var(--gut) 6px 6px; background: var(--paper); }
  .env-rail .rail-h { flex: 1 1 auto; min-width: 0; gap: 4px; }
  .env-rail .rail-h li, .env-rail .rail-h li:last-child { flex: 1 1 0; min-width: 0; }
  .env-rail .rail-h li::after { display: none; }
  .env-rail .rail-h a { display: block; padding: 13px 0; }
  .env-rail .rail-h .rs-n { display: block; width: 100%; height: 12px; border-radius: 6px; background: var(--paper-3); box-shadow: none; font-size: 0; color: transparent; transition: background-color .2s ease; }
  .env-rail .rail-h .is-seen .rs-n { background: color-mix(in srgb, var(--teal) 40%, var(--paper-3)); }
  .env-rail .rail-h .is-solved .rs-n { background: var(--ok-fill); }
  .env-rail .rail-h .is-missed .rs-n { background: var(--bad); }
  .env-rail .rail-h .active .rs-n { background: var(--teal); }
  .rail-back { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; }
  .rail-back:disabled { opacity: .3; cursor: default; }
  .rail-back .icon { width: 24px; height: 24px; }
  .env-rail .snd-btn { width: 40px; height: 40px; }

  /* the action bar in the dock: Run beside the one big button */
  .dock .step-nav { position: static; display: flex; gap: 10px; padding: 10px var(--gut); background: none; box-shadow: none; }
  .dock .sn-prev, .dock .sn-count, .dock .env-switch { display: none; }
  .dock .sn-next { flex: 1 1 auto; height: 52px; font-size: 17px; }
  .dock .sn-run { flex: 0 0 auto; min-height: 52px; height: 52px; padding: 0 18px; font-size: 16px; }
  .blk-sheet-open .dock .step-nav { display: none; }
  .dock .blk-sheet { position: relative; }
  .dock .blk-sheet.is-ok { background: var(--ok-tint); color: var(--ok); }
  .dock .blk-sheet.is-no { background: var(--bad-tint); color: var(--bad); }
  .dock .blk-sheet-in { flex-wrap: wrap; gap: 12px 14px; padding: 16px var(--gut) 12px; }
  .dock .blk-sheet-act { flex: 1 1 100%; }
  .dock .blk-sheet-go { width: 100%; height: 52px; font-size: 17px; }
  .dock .blk-sheet-d { color: var(--ink-2); }
  .page-lesson .env { padding-bottom: calc(var(--dock-h, 76px) + 60px); }
  .page-lesson .site-foot { padding-bottom: calc(var(--dock-h, 76px) + 16px); }
  .page-lesson .toast-bl { bottom: calc(var(--dock-h, 76px) + var(--kb, 0px) + 12px); }

  /* the bar has Run and Check: the code toolbar keeps the quieter actions, in the flow */
  .page-lesson:not(.page-place) .env-code .toolbar { position: static; box-shadow: none; }
  .page-lesson:not(.page-place) .env-code .runbox[data-kind="exercise"] .toolbar [data-act="check"], .page-lesson:not(.page-place) .env-code .runbox[data-kind="exercise"] .toolbar [data-act="run"],
  .page-lesson:not(.page-place) .env-code .runbox[data-kind="exercise"] .toolbar [data-act="predict"], .page-lesson:not(.page-place) .env-code .runbox[data-kind="exercise"] .toolbar [data-act="explain"] { display: none; }

  /* no zoom on focus: 16px text in every field and in the editor */
  .cm-editor, .env-code .cm-editor { font-size: 16px; }
  textarea.input, .answer .input, .stdin .input { font-size: 16px; }
  .answer .input { min-height: 96px; }
  .selfmark .btn { flex: 1 1 100%; height: 52px; font-size: 17px; }

  /* output: a sheet over the dock; it peeks after a run, its handle opens it */
  .os-head { display: flex; position: sticky; top: 0; z-index: 1; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 0 16px; border: 0; background: var(--slab-2); color: var(--slab-ink); font: 650 15px/1 var(--font); text-align: left; cursor: pointer; }
  .os-grip { flex: none; width: 34px; height: 4px; border-radius: 2px; background: var(--slab-mute); }
  .os-s { margin-left: auto; font-weight: 500; font-size: 14px; color: var(--slab-mute); }
  .page-lesson .env-code > .runbox.is-shown.has-out .rb-results { position: fixed; left: 0; right: 0; bottom: calc(var(--dock-h, 76px) + var(--kb, 0px)); z-index: 94; max-height: min(30dvh, 250px); overflow-y: auto; overscroll-behavior: contain; border-radius: 14px 14px 0 0; background: var(--slab-out); box-shadow: 0 -10px 30px rgba(5, 12, 22, .3); }
  .page-lesson .env-code > .runbox.is-shown.has-out .rb-results.os-open { max-height: calc(100dvh - var(--top-h) - var(--dock-h, 76px) - var(--kb, 0px) - 16px); }
  .kb-open .page-lesson .env-code > .runbox.is-shown.has-out .rb-results:not(.os-open), .page-lesson.kb-open .env-code > .runbox.is-shown.has-out .rb-results:not(.os-open) { max-height: 46px; overflow: hidden; }
  .page-lesson .env-code > .runbox:not(.has-out) .os-head { display: none; }
  .page-lesson .env-code > .runbox.has-out .editor-wrap { margin-bottom: 0; }
  .page-lesson .env-code .rb-results .output { min-height: 0; }

  /* the celebration, stacked: Noodle at the top, centred; the code pane steps aside while it shows */
  .env.is-passed .env-code { position: absolute; left: -10000px; top: 0; width: min(900px, 100vw); opacity: 0; pointer-events: none; }
  .pass { scroll-margin-top: calc(var(--top-h) + 64px); }
  .pass.is-cele { display: flex; flex-direction: column; }
  .pass.is-cele > .pass-coach { order: -1; }
  .blk-sheet-open .page-lesson .env-code > .runbox.is-shown.has-out .rb-results:not(.os-open) { max-height: min(22dvh, 180px); }
  .pass.is-cele .pass-coach { margin: 6px 0 2px; }
  .pass.is-cele .pass-coach .coach { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .pass.is-cele .pass-coach .coach-lesson { --coach-w: 132px; }
  .pass.is-cele .pass-coach .coach-tail { display: none; }
  .pass.is-cele .pass-act .btn-primary { flex: 1 1 100%; height: 54px; font-size: 17px; }
}
/* short landscape phones: the site bar scrolls away so the lesson keeps the height */
@media (max-width: 899.98px) and (max-height: 500px) {
  .page-lesson .topbar { position: static; }
  .page-lesson:not(.page-place) .env-rail { top: 0; }
  .page-lesson .env-code > .runbox.is-shown.has-out .rb-results { max-height: 40dvh; }
  .page-lesson .env-code > .runbox.is-shown.has-out .rb-results.os-open { max-height: calc(100dvh - var(--dock-h, 76px) - var(--kb, 0px) - 8px); }
  .dock .sn-next, .dock .sn-run, .dock .blk-sheet-go { height: 46px; }
  .dock .blk-sheet-in { flex-wrap: nowrap; padding: 10px var(--gut); }
  .dock .blk-sheet-act { flex: none; }
  .dock .blk-sheet-go { width: auto; }
  .pass.is-cele .pass-coach .coach-lesson { --coach-w: 96px; }
}
@media (prefers-reduced-motion: reduce) {
}
/* account: lesson settings */
.acct-set { margin: 18px 0 4px; padding-top: 16px; box-shadow: 0 -1px 0 var(--rule); }
.set-row { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 650; cursor: pointer; }
.set-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--teal); }
.set-note { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
/* tablets in the phone layout: the bar's contents keep a hand's width, centred */
@media (min-width: 600px) and (max-width: 899.98px) {
  .dock .step-nav, .dock .blk-sheet-in { max-width: 720px; margin: 0 auto; }
}

/* ---------- the track path on phones: the open module as big stops down one straight line ----------
   7 Oct 2026 (owner: "Why is it structured like that?"): the stops used to weave on a fixed offset that drifted to one
   side and pushed labels off the screen. Now one path structure for Code, the same as the lesson list below: a
   straight vertical line on the left, the stop on it, the lesson's name beside it, left-aligned and wrapping.
   Checkpoints are rounded squares on the same line and rhythm. tools/path-layout-test.cjs checks the edges. */
.jr-walker { display: none; }
@media (max-width: 700px) {
  .page-track .jr-m.is-open > .jr-sts { display: flex !important; flex-direction: column; align-items: stretch; padding: 10px 0 14px; }
  .page-track .jr-sts > li { position: relative; display: flex; flex: none; min-height: 78px; max-width: none; }
  .page-track .jr-sts > li::after { content: ""; display: block; position: absolute; z-index: 0; left: 43px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; border-radius: 2px; background: var(--rule); }
  .page-track .jr-sts > li:first-child::after { top: 50%; }
  .page-track .jr-sts > li:last-child::after { bottom: 50%; }
  .page-track .jr-sts > li:only-child::after { display: none; }
  .page-track .jr-sts > li:has(> .st.done)::after { background: var(--tc); }
  .page-track .jr-sts .st { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: 14px; padding: 6px 12px 6px 16px; transform: none; }
  .page-track .jr-sts .st-dot { --edge: color-mix(in srgb, var(--tc) 55%, #000); width: 58px; height: 58px; flex: none; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 4px var(--tc); transition: transform .09s cubic-bezier(.34, 1.56, .64, 1); }
  .page-track .jr-sts .st:active .st-dot { transform: translateY(3px); }
  .page-track .jr-sts .st.done .st-dot { background: var(--tc); box-shadow: none; }
  /* your stop is bigger, centred on the same line */
  .page-track .jr-sts .st.is-target .st-dot { width: 66px; height: 66px; margin: 0 -4px; background: var(--tc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tc) 30%, transparent); }
  .page-track .jr-sts .st[data-tier="premium"]:not(.done) .st-dot { background: var(--paper); box-shadow: inset 0 0 0 4px var(--ink-3); }
  .page-track .jr-sts .st[data-kind] .st-dot { border-radius: 16px; transform: none; }
  .page-track .jr-sts .st[data-kind]:active .st-dot { transform: translateY(3px); }
  .page-track .jr-sts .st-n { position: absolute; top: 50%; left: 16px; width: 58px; height: 58px; margin-top: -29px; display: grid; place-items: center; font: 700 16px/1 var(--mono); color: var(--ink); }
  .page-track .jr-sts .st.done .st-n, .page-track .jr-sts .st.is-target .st-n { color: var(--band-ink, #0e1620); }
  /* the lesson's name beside its stop: left-aligned, wrapping, never under the stop */
  .page-track .jr-sts .st-tip, .page-track .jr-sts .st:hover .st-tip, .page-track .jr-sts .st:focus-visible .st-tip { position: static; flex: 1 1 auto; min-width: 0; width: auto; height: auto; overflow: visible; clip: auto; padding: 0; background: none; color: var(--ink-2); font: 600 15px/1.3 var(--font); text-align: left; white-space: normal; overflow-wrap: anywhere; transform: none; }
  .page-track .jr-sts .st-tip .n { display: none; }
  .page-track .jr-sts .st-kw { display: block; margin-top: 2px; color: var(--tc-text); font-size: 13px; }
  .page-track .jr-sts .st.is-target .st-tip { color: var(--ink); }
  /* Noodle stands at the right end of your stop's row; the name keeps clear of him */
  .page-track .jr-walker { position: absolute; z-index: 2; top: 50%; right: 8px; left: auto; display: block; width: 64px; margin-top: -33px; pointer-events: none; }
  .page-track .jr-walker img { display: block; width: 64px; height: auto; aspect-ratio: 244 / 252; }
  .page-track .jr-sts > li:has(> .jr-walker) .st { padding-right: 84px; }
  .page-track .jr-m.is-open.is-cur > .jr-a::before { display: none; }
}
@media (max-width: 899.98px) {
  /* the output lives in its sheet on phones: no in-page placeholder, so the page never changes height (and never
     jumps) when a run fills the sheet */
  .page-lesson .env-code .rb-results::after { display: none !important; }
}
/* phones: the controls around the lesson are for tapping (no selection, no callout, no tap flash); the lesson
   text, the editor and the output stay selectable */
.kbar, .kb-k, .dock .step-nav, .rail, .rail-back, .rail-combo, .snd-btn, .os-head, .selfmark .btn, .sn-run, .sn-next, .sn-prev,
.jr-a, .jr-sts, .st, .coach-art, .noodle-art, .jr-walker, .pass-stats, .pass-bar, .pass-act { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* the verdict is said once, by the feedback sheet (cheer.js): the output panel drops its own "Passed" / "Not yet"
   line and keeps the details (expected vs your output, milestones, the reason, Say why it broke) */
.has-verdict-sheet .env-code .feedback > strong:first-child { display: none; }
.has-verdict-sheet .env-code .feedback > strong:first-child + span:not([class]) { display: block; }
.has-verdict-sheet .env-code .feedback.pass:not(:has(> :not(strong:first-child))) { display: none; }
.has-verdict-sheet .env-code .feedback > strong:first-child + span:not([class]):has(~ .compare) { display: none; }
.pass-tool { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pass-tool a, .jy-both a { color: var(--teal-text); font-weight: 650; }

/* ===== Where I'm at and Find my level (assets/js/placement.js, Oct 2026) ===== */
/* the track header: where the class is, Change, Find my level; the form sits on the band, no box inside it */
.wia { margin-top: 18px; font-size: 16px; }
.wia-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; }
.wia-line b { font-weight: 700; }
.wia-line .btn { margin-top: 6px; }
.wia-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: 650 16px/1.3 var(--font); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: normal; text-align: left; max-width: 100%; }
.wia-link:hover { text-decoration-thickness: 2px; }
.wia-link:focus-visible, .wia-f select:focus-visible { outline: 3px solid var(--outline, currentColor); outline-offset: 2px; }
.wia-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 20px; }
.wia-h { flex: 1 0 100%; margin: 0; font-size: 20px; line-height: 1.25; }
.wia-sub { flex: 1 0 100%; margin: -4px 0 0; max-width: 60ch; line-height: 1.5; color: var(--ink-2); }
.wia-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.wia-f > span { font-size: 14px; font-weight: 650; color: var(--ink-3); }
.wia-f select { min-height: 46px; max-width: 100%; width: min(100%, 460px); padding: 8px 12px; border-radius: 10px; border: 2px solid var(--rule); background: var(--paper); color: var(--ink); font: 600 16px/1.2 var(--font); }
.wia-f select[aria-invalid="true"] { border-color: var(--bad); }
.wia-err { flex: 1 0 100%; margin: 0; font-weight: 650; }
.wia-acts { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.wia-acts .btn, .wia-line .btn { white-space: nowrap; }
.wia-share { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 0; font-size: 14.5px; }
.wia-share .wia-link { font-size: 14.5px; }
.wia-ok { color: var(--ink-2); }
.wia-url { width: min(100%, 420px); min-height: 40px; padding: 6px 10px; border-radius: 8px; border: 2px solid var(--rule); background: var(--paper); color: var(--ink); font: 500 14px/1.2 var(--mono); }
@media (max-width: 599.98px) { .wia-acts .btn { flex: 1 0 100%; } }
/* covered at school: open, a dotted ring in the ink colour (tested out is the dashed track colour, done the fill) */
.row-l.covered .node, .row-l.compact.covered .node { box-shadow: none; border: 3px dotted var(--ink-3); }
.row-l.covered .r-st { color: var(--ink-2); }
.sl.covered .sl-node { box-shadow: none; border: 2px dotted var(--ink-3); }
/* the result: the start, a word per lesson asked about, the catch-up list */
.pl-pick { margin-top: 18px; }
.pl-h3 { margin: 26px 0 8px; font-size: 19px; }
.pl-str { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; max-width: 620px; }
.pl-str li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; }
/* rows apart by a faint tint on every other one, no rule lines (light and dark: the ink at a few per cent) */
.pl-str li:nth-child(odd) { background: color-mix(in srgb, var(--ink) 4.5%, transparent); }
.pl-str .t { font-weight: 600; min-width: 0; }
.pl-str .w { flex: none; min-width: 98px; display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 14.5px; color: var(--ink-2); }
.pl-catch { margin: 0; padding-left: 20px; }
.pl-catch li { margin: 4px 0; }
.pl-catch a { color: var(--teal-text); font-weight: 650; }
.wia-ic { flex: none; width: 20px; height: 20px; overflow: visible; }
.wia-ic .r { fill: none; stroke: currentColor; stroke-width: 2.2; }
.wia-ic .f { fill: currentColor; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.wia-ic .k { fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wia-ic-s { color: var(--teal-text); }
.wia-ic-p { color: #9a6700; }
:root[data-theme="dark"] .wia-ic-p { color: var(--gold); }
.wia-ic-n { color: var(--ink-3); }
.page-place .pl-act .btn { white-space: nowrap; }
/* "Next: <lesson>" on the track button can be long once a class point is set: one line, cut with an ellipsis */
.th-act [data-continue] { display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; line-height: 49px; }
/* the "Written any ... before?" answers: standard buttons, each on one line, wrapping as whole buttons */
.po-btns .btn { white-space: nowrap; }
/* a station's hidden name sits inside its tooltip box, so it never widens the page on phones */
.st-tip .visually-hidden { left: 0; top: 0; }

/* ===================================================================================================
   The track page's lesson path with illustrations (7 Oct 2026; owner: "Perhaps have images for it to make it more
   digestible"). One centred path, the same structure as the phone stops above: a straight line on the left, the
   state node on it, the lesson's drawing (tools/lesson-art.cjs, inlined by build.py), then the number, title and a
   two-line description (the rest on hover; the lesson page has it all). Checkpoints and the final challenge are tinted
   stops on the same line; a project is a small square stop between lessons.
   =================================================================================================== */
.map-path { display: grid; gap: 40px; width: 100%; max-width: calc(860px + 2 * var(--gut)); margin: 0 auto; padding: clamp(28px, 3vw, 48px) var(--gut) 0; }
.map-path .mcol-h { padding-left: 8px; }
.map-path .mcol-d { max-width: 62ch; }
.map-path .rows { gap: 0; }
.map-path .rows::before { display: none; }
/* the line: each row draws its own piece, from the first node's centre to the last one's, so it never sticks out */
.map-path .rows > * { --nc: 54px; }
.map-path .rows > *::before { content: ""; position: absolute; z-index: 0; left: 21px; top: 0; bottom: 0; width: 4px; background: color-mix(in srgb, var(--tc) 55%, transparent); }
.map-path .rows > :first-child::before { top: var(--nc); }
.map-path .rows > :last-child::before { bottom: auto; height: var(--nc); }
.map-path .rows > :only-child::before { display: none; }
.map-path .row-l { grid-template-columns: 30px 88px minmax(0, 1fr) auto; gap: 0 16px; align-items: start; padding: 10px 12px 10px 8px; }
.map-path .row-l .node { margin-top: calc(var(--nc) - 10px - 15px); }
.map-path .r-main { gap: 3px; padding-top: 6px; }
.map-path .r-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.map-path .r-n { padding: 0; }
.map-path .r-d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (hover: hover) { .map-path .row-l:hover .r-d, .map-path .row-l:focus-visible .r-d { -webkit-line-clamp: unset; line-clamp: none; } }
.map-path .r-side { padding-top: 8px; }
/* the drawing's tile: the track's tint with a paper grain; the drawing keeps one line width at any size */
.r-art { position: relative; display: block; width: 88px; height: 88px; padding: 6px; border-radius: 14px; background: var(--tc-band); overflow: hidden; }
.r-art::after { content: ""; position: absolute; inset: 0; background: url(../img/lessons/grain.svg?v=268cc12a94) 0 0 / 96px 96px; opacity: .32; pointer-events: none; }
:root[data-theme="dark"] .r-art .la { --la-bg: var(--surface-up, color-mix(in srgb, #fff 6%, var(--paper-0))); }   /* dark: the navy card, never the track colour mixed in (yellow on navy read olive; owner, 18 Oct 2026) */
:root[data-theme="dark"] .r-art { background: var(--surface-up, color-mix(in srgb, #fff 6%, var(--paper-0))); }
:root[data-theme="dark"] .r-art::after { filter: invert(1); opacity: .1; }
.r-art .la { --la-bg: var(--tc-band); position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
/* the drawing's colours (the same classes and values as the files' own <style>, tools/lesson-art.cjs THEME) */
.la { --la-bg: transparent; --la-line: #15365a; --la-paper: #fff; --la-muted: #ebe2cf; --la-acc: #0d9aa7; --la-acc-s: #07707a; --la-ok: #20a067; --la-bad: #e08a00; --la-slab: #0d2038; }
:root[data-theme="dark"] .la { --la-line: #d6e4f3; --la-paper: #1a3050; --la-muted: #12233a; --la-acc: #12acb9; --la-ok: #2bb877; --la-bad: #ffb13b; --la-slab: #07111f; }
.t-python { --la-shade: #e0a400; } .t-web { --la-shade: #d9541f; } .t-sql { --la-shade: #1f6fb5; } .t-c { --la-shade: #c43a5f; }
.la * { fill: none; stroke: none; }
.la .o { stroke: var(--la-line); stroke-width: 2.25px; stroke-linecap: round; stroke-linejoin: round; }
.la .th { stroke-width: 1.5px; } .la .tk { stroke-width: 3px; } .la .dh { stroke-dasharray: 3 3.5; }
.la .oa { stroke: var(--la-acc); } .la .og { stroke: var(--la-ok); } .la .ob { stroke: var(--la-bad); } .la .ow { stroke: #eaf1f9; } .la .of { stroke: var(--tc); }
.la .f { fill: var(--tc); } .la .s { fill: var(--la-shade, var(--tc)); } .la .p { fill: var(--la-paper); } .la .m { fill: var(--la-muted); }
.la .a { fill: var(--la-acc); } .la .as { fill: var(--la-acc-s); } .la .y { fill: #ffc23d; } .la .ys { fill: #d9930f; } .la .g { fill: var(--la-ok); } .la .gs { fill: #13804f; }
.la .b { fill: var(--la-bad); } .la .bs { fill: #a86a00; } .la .n { fill: var(--la-line); } .la .k { fill: var(--la-slab); } .la .w { fill: #eaf1f9; }
.la .kn { fill: var(--la-bg); stroke: var(--la-bg); stroke-width: 10px; stroke-linejoin: round; stroke-linecap: round; }   /* a knockout halo: the tile's own colour, under a shape laid over others */
.la text { font-family: var(--mono); font-weight: 700; fill: var(--la-line); stroke: none; font-variant-ligatures: none; }
.la text.w { fill: #eaf1f9; } .la text.tn { fill: #15365a; } .la text.ta { fill: var(--la-acc); }
/* checkpoints and the final challenge: a tinted stop on the same line, so the rhythm holds and they still stand out */
.map-path .row-l[data-kind="checkpoint"], .map-path .row-l[data-kind="final"] { margin: 6px 0; background: color-mix(in srgb, var(--tc) 11%, var(--paper)); }
.map-path .row-l[data-kind="final"] { background: color-mix(in srgb, var(--gold) 20%, var(--paper)); }
.map-path .row-l[data-kind="checkpoint"]:hover, .map-path .row-l[data-kind="final"]:hover { background: color-mix(in srgb, var(--tc) 20%, var(--paper)); }
.map-path .row-l[data-kind] .r-k { color: var(--tc-text); }
.map-path .row-l[data-kind="final"] .node { box-shadow: inset 0 0 0 4px var(--gold); }
/* a project: a small square stop on the line, its line of text level with the lesson titles */
.rp-node { display: none; }
.map-path .row-pj { --nc: 13px; margin: 0; padding: 4px 12px 14px 158px; }
.map-path .rp-node { position: absolute; z-index: 1; left: 15px; top: 6px; display: block; width: 16px; height: 16px; border-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 3.5px var(--teal); transform: rotate(45deg); }
@media (max-width: 599.98px) {
  .map-path .rows > * { --nc: 46px; }
  .map-path .row-l { grid-template-columns: 30px 72px minmax(0, 1fr); gap: 0 12px; }
  .map-path .r-art { width: 72px; height: 72px; padding: 4px; border-radius: 12px; }
  .map-path .r-side { grid-column: 3; padding-top: 6px; }
  .map-path .r-t { font-size: 16.5px; }
  .map-path .r-d { font-size: 14.5px; }
  .map-path .row-pj { padding-left: 134px; }
}

/* Speech bubbles hug their words (owner, 11 Oct: "That long of a bubble needed for small text?"): as wide as the line
   needs, at most 38 characters or the room there is, never pinched below a short word, beside the speaker rather than
   stretched to the row's end; a bubble that holds controls or code keeps its width. Lines are balanced so a last line
   is never one short word ("Edit the code, then press / Run."). The tail is drawn to fit (noodle.js Coach.aim). */
.coach-say { flex: 0 1 auto; width: fit-content; max-width: min(38ch, 100%); min-width: 7em; }
.coach-say:has(button, pre, .runbox, .ch-hint) { flex: 1 1 auto; width: auto; max-width: 60ch; }
.coach-line, .coach-more p { text-wrap: pretty; text-wrap: balance; }

/* ===================================================================================================
   One Brainlag (Oct 2026): the parts of brainlag.space's design system that the rules above do not already take from
   the tokens. Headings in BL Display; course cards as on brainlag.space/courses (the house covers); the Code plan card
   in white with the Code plan mark; bands square and full width, cards rounded.
   =================================================================================================== */
h1, h2, h3, .display, .sec-t, .cc-name a, .pf-t, .mcol-t, .dt-t, .cont-t, .jy-h1, .auth-t, .gate-h, .pc-name { font-family: var(--f-display); letter-spacing: -.01em; }
h1, .display, .sec-t, .jy-h1, .auth-t { font-weight: 600; }
.display { line-height: 1.02; }
.h-2 { color: var(--teal-text); }

/* course cards (brainlag.css .crs) */
.courses .cc-list { gap: 18px; }
@media (min-width: 640px) and (max-width: 1239.98px) { .courses .cc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crs { --c: var(--tc); --ci: var(--tc-text); --ct: var(--tc-band); display: flex; flex-direction: column; gap: 0; padding: 8px; border: 2px solid transparent; border-radius: var(--r2); background: var(--paper-0); box-shadow: var(--shadow); color: var(--ink); 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); }
.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); }
:root[data-theme="dark"] .crs:hover { box-shadow: 0 12px 26px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .crs.t-python { --ct: #1c2159; } :root[data-theme="dark"] .crs.t-web { --ct: #3a1620; }   /* indigo and wine as the main site's (brainlag.css .crs): no darkened yellow or orange (15 Oct) */
:root[data-theme="dark"] .crs.t-sql { --ct: #13304f; } :root[data-theme="dark"] .crs.t-c { --ct: #2e1726; }
.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-b { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 10px 8px; }
.crs .cc-name a { gap: 10px; font-size: 20px; font-weight: 600; line-height: 1.25; }
.crs .cc-what { font-size: 15.5px; }
.crs .cc-go { margin-top: auto; align-self: flex-start; }
.crs .cc-meta { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .crs, .crs:hover { transition: none; transform: none; } }

/* the Code plan card (brainlag.space/plus): white, the Code plan mark, a violet Get Code */
.plan { gap: 16px; padding: clamp(20px, 2vw, 28px); border-radius: var(--r3); background: var(--paper-0); color: var(--ink); box-shadow: var(--shadow); border: 2px solid color-mix(in srgb, var(--prem) 45%, transparent); }
.pc-head { display: flex; align-items: center; gap: 12px; }
.pc-mark { flex: none; width: 48px; height: 48px; }
.plan .pc-name { display: flex; flex-direction: column; margin: 0; font-size: 28px; font-weight: 600; line-height: 1.05; color: var(--ink); }
.pc-eye { font: 650 14px/1.2 var(--font); color: var(--ink-3); letter-spacing: 0; }
.plan .seg { background: var(--paper-2); }
.plan .seg > label { color: var(--ink-2); }   /* the unchecked option on the white card (the violet card's #e3dbff read 1.2:1 here) */
.plan .seg > .seg-in:checked + label { background: var(--prem); color: var(--prem-ink); box-shadow: none; }
.plan .plan-price strong { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.plan .plan-price span { color: var(--ink-3); }
.plan .plan-save { color: var(--ink-2) !important; }
.plan .plan-inc svg { color: var(--prem-text); }
.plan .plan-msg { color: var(--ink-2); }
.plan .plan-msg a { color: var(--prem-text); }
.plan .pc-fine { color: var(--ink-3); }
.plan .pc-fine a { color: var(--prem-text); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.page-pricing .jy-h1b { color: var(--prem-text); }

/* the track page head: a square white band, as the course pages on brainlag.space; the track colour stays in its badge */
.trk-head { background: var(--paper-0); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
:root[data-theme="dark"] .trk-head { box-shadow: 0 1px 0 var(--rule); }
.trk-head .crumbs, .trk-head .crumbs [aria-current] { color: var(--ink-2); }
:root:not([data-theme="dark"]) .trk-head .btn-primary { --edge: transparent; background: var(--teal-btn); color: var(--teal-ink); }
:root:not([data-theme="dark"]) .trk-head .btn-primary:hover { background: var(--teal-hi); }

/* the navy error band on the home page keeps navy in both themes; the Learn top and the course list sit on the sunk tone */
.err-band { background: var(--band); }
.dash-top { background: var(--paper-0); box-shadow: 0 1px 0 var(--rule); }
.pf { border-radius: var(--r2); }
.jx, .auth-card { border-radius: var(--r2); background: var(--paper-0); box-shadow: var(--shadow); }
/* the home page's project list: its titles at text size (.pl-t is also the placement check's problem title) */
.pl .pl-t { font-size: 16.5px; line-height: 1.3; }
/* no orphan words (as brainlag.css): headings balance, running text is pretty */
h1, h2, h3, h4, .display, .h-2, .jy-h1b, .sec-t { text-wrap: balance; }
p, li, dd, dt, figcaption, summary, label { text-wrap: pretty; }

/* A miss on a phone (Oct 2026, the phone UX audit; assets/js/fail-fit.js, runbox.js markError). The line the error
   points at is marked in the editor at every width, in gold; at 700px and below the verdict folds to one line with a
   button to open it, and the output sheet keeps only its handle until it is opened, so the editor stays in view. */
.cm-errline { position: absolute; left: 0; right: 0; z-index: 1; background: rgba(255, 194, 61, .2); box-shadow: inset 0 1px 0 rgba(255, 194, 61, .45), inset 0 -1px 0 rgba(255, 194, 61, .45); pointer-events: none; }
.ff-tog { display: none; }
@media (max-width: 700px) {
  .dock .blk-sheet.is-compact .ff-tog { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
  .dock .blk-sheet.is-compact .ff-tog .icon { width: 20px; height: 20px; transition: transform .15s ease; }
  .dock .blk-sheet.is-compact:not(.is-folded) .ff-tog .icon { transform: rotate(180deg); }
  .dock .blk-sheet.is-compact:not(.is-folded) .blk-sheet-in { position: relative; }
  .dock .blk-sheet.is-compact:not(.is-folded) .blk-sheet-text { flex: 1 1 0; padding-right: 40px; }
  .dock .blk-sheet.is-compact:not(.is-folded) .ff-tog { position: absolute; top: 8px; right: 8px; }
  .dock .blk-sheet.is-folded .blk-sheet-in { flex-wrap: nowrap; gap: 10px; padding: 8px 8px 8px var(--gut); }
  .dock .blk-sheet.is-folded .blk-sheet-mark { width: 28px; height: 28px; }
  .dock .blk-sheet.is-folded .blk-sheet-mark svg { width: 16px; height: 16px; }
  .dock .blk-sheet.is-folded .blk-sheet-text { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
  .dock .blk-sheet.is-folded .blk-sheet-h, .dock .blk-sheet.is-folded .blk-sheet-d { white-space: nowrap; text-wrap: nowrap; }
  .dock .blk-sheet.is-folded .blk-sheet-h { flex: none; font-size: 17px; }
  .dock .blk-sheet.is-folded .blk-sheet-d { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
  .dock .blk-sheet.is-folded .blk-sheet-act { display: none; }
  .fail-fit .env-code > .runbox.is-shown .rb-results:not(.os-open) > :not(.os-head) { display: none !important; }
  .fail-fit .env-code > .runbox.is-shown.has-out .rb-results:not(.os-open) { max-height: none !important; }
}
@media (prefers-reduced-motion: reduce) { .ff-tog .icon { transition: none; } }

/* "Not yet" in amber, as brainlag.space's errors (coordinator, 12 Oct: no red): the warn ink on its tint, light and dark,
   on the phone dock and beside the code */
.blk-sheet.is-no, .dock .blk-sheet.is-no, .env-code > .blk-sheet.is-no { background: var(--warn-bg); color: var(--warn-ink); }
.blk-sheet.is-no .blk-sheet-mark { background: var(--warn-ink); color: var(--warn-bg); }
.blk-sheet.is-no .blk-sheet-d { color: var(--ink-2); }
:root[data-theme="dark"] .env-code > .blk-sheet.is-no .blk-sheet-d { color: var(--ink-2); }
/* folded, one specific line: "Not yet: NameError on line 2" (fail-fit.js) */
.ff-sum { display: none; }
@media (max-width: 700px) {
  .dock .blk-sheet.is-folded .ff-sum { display: block; flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-wrap: nowrap; font: 700 15.5px/1.3 var(--font); letter-spacing: -.005em; }
  .dock .blk-sheet.is-folded .blk-sheet-in { gap: 8px; padding: 6px 4px 6px 12px; }
  .dock .blk-sheet.is-folded .blk-sheet-mark { width: 24px; height: 24px; }
  .dock .blk-sheet.is-folded .blk-sheet-mark svg { width: 14px; height: 14px; }
  .dock .blk-sheet.is-folded .ff-tog { width: 40px; height: 44px; }
  .dock .blk-sheet.is-folded .blk-sheet-text { display: none; }
}
/* a miss with only the (hidden) verdict word left in the output's feedback: no empty strip (runbox.js showFeedback) */
.has-verdict-sheet .env-code .feedback.fail:not(:has(> :not(strong:first-child))) { display: none; }

/* ---------- level paths and Find my level (tools/build_paths.py, assets/js/paths.js; the code_paths flag) ---------- */
.lede-paths a { color: var(--teal-text); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.page-paths .wrap { max-width: 1200px; margin-inline: auto; }
.flv { margin-top: 8px; padding-block: 24px; }   /* not .fl: that is the form label class */
.flv h2 { font-size: 24px; margin-bottom: 12px; }
.fl-form { display: grid; gap: 16px; }
.fl-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.fl-q legend { margin-bottom: 8px; font-weight: 700; }
.fl-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-opt { position: relative; }
.fl-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fl-opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 2px solid var(--key-2-edge); border-radius: var(--pill); background: var(--key-2); color: var(--ink); font-weight: 650; cursor: pointer; }
.fl-opt input:checked + span { background: var(--teal-btn); border-color: var(--teal-btn); color: var(--teal-ink); }
.fl-opt input:focus-visible + span { outline: 3px solid var(--teal-text); outline-offset: 2px; }
.fl-out { margin-top: 18px; padding: 18px 20px; border-radius: var(--r2); background: var(--paper-0); box-shadow: var(--shadow); }
.fl-k { font-size: 14px; font-weight: 700; color: var(--teal-text); }
.fl-t { font: 600 24px/1.2 var(--f-display); }
.fl-d { margin-top: 6px; color: var(--ink-2); }
.fl-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 14px; }
.fl-pl { color: var(--teal-text); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.pths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 18px; padding-block: 12px 24px; }
@media (max-width: 1000px) { .pths { grid-template-columns: 1fr; } }
.pth { display: flex; flex-direction: column; padding: 20px; border-radius: var(--r2); background: var(--paper-0); box-shadow: var(--shadow); scroll-margin-top: calc(var(--top-h) + 16px); }
.pth-lv { font-size: 14px; font-weight: 700; color: var(--teal-text); }
.pth h2 { font-size: 26px; }
.pth-for { margin-top: 2px; font-weight: 650; }
.pth-out { margin-top: 8px; color: var(--ink-2); }
.pth-n { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.pth-steps { display: grid; gap: 4px; margin: 16px 0 0; padding: 0; list-style: none; }
.pth-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 8px; border-radius: 12px; color: var(--ink); }
.pth-step:hover { background: var(--blue-tint); }
.pth-step .glyph { grid-row: 1 / 3; }
.pth-st { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; min-width: 0; }
.pth-st span { font-size: 14px; color: var(--ink-3); }
.pth-sm { grid-column: 2; font-size: 13.5px; color: var(--ink-3); }
.pth-code { display: inline-flex; align-items: center; gap: 3px; color: var(--prem-text); font-weight: 650; white-space: nowrap; }
.pth-code .icon { width: 13px; height: 13px; }
.pth-ph { margin-top: 18px; font-size: 16px; }
.pth-proj { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.pth-proj a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--ink-2); font-weight: 600; }
.pth-proj a:hover { color: var(--teal-text); }
.pth-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 14px; padding: 0 14px; border-radius: 12px; background: var(--paper-2); color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; }
.pth-more > summary::-webkit-details-marker { display: none; }
.pth-more > summary::after { content: ""; flex: none; width: 14px; height: 14px; 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='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.6' 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='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s ease; }
.pth-more[open] > summary::after { transform: rotate(180deg); }
@media (min-width: 1001px) { .pth-more > summary { display: none; } }

/* ---------- a lesson's top bar: brainlag.space's lesson player header (assets/learn/learn.css .lp-top), not the site nav
   (owner, 12 Oct 2026: a lesson never switches language). Close, where you are, the progress bar, theme, account. ---------- */
.lp-top { display: flex; align-items: center; gap: 14px; height: var(--top-h); padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); background: var(--paper); box-shadow: none; }
:root[data-theme="dark"] .lp-top { box-shadow: none; }
.lp-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink-3); }
.lp-x:hover { color: var(--ink); background: var(--paper-2); }
.lp-loc { flex: none; padding: 6px 4px; border-radius: 8px; color: var(--ink-3); font: 600 15px/1.2 var(--font); white-space: nowrap; }
.lp-loc:hover { color: var(--ink-2); }
.lp-bar { position: relative; flex: 1; min-width: 40px; height: 16px; border-radius: 8px; background: var(--paper-2); overflow: hidden; }
:root[data-theme="dark"] .lp-bar { background: var(--paper-3); }
.lp-bar > span { position: absolute; inset: 0; border-radius: 8px; background: var(--teal); transform: translateX(-100%); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.lp-top .th-wrap, .lp-top .top-account { display: block; flex: none; }
.lp-top .top-account { display: grid; }
@media (max-width: 899.98px) {
  /* on phones the step strip under it is the progress bar (dock.js), so the header keeps close, where you are, theme and account */
  .lp-top { gap: 4px; padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
  .lp-top .lp-bar { visibility: hidden; }
  .lp-loc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { .lp-bar > span { transition: none; } }
.pth-lv { display: flex; align-items: center; gap: 8px; }
.pth-meter { display: inline-flex; gap: 3px; }
.pth-meter i { display: block; width: 14px; height: 8px; border-radius: 3px; background: var(--paper-3); }
.pth-meter i.on { background: var(--teal); }
.pth-n { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pth-badges { display: inline-flex; gap: 4px; }
.lp-top .lp-side { align-items: center; justify-content: center; flex: none; }
/* sign in or create an account: brainlag.space's segmented control (.segc), the chosen one filled (coordinator, 12 Oct) */
.auth-tabs { gap: 4px; margin: 12px 12px 0; padding: 4px; border-radius: 12px; background: var(--paper-2); }
.auth-tabs button { height: 44px; border-radius: 9px; color: var(--ink-2); font-weight: 700; }
.auth-tabs button:hover { color: var(--ink); background: rgba(var(--ink-rgb, 21, 54, 90), .07); }
.auth-tabs button.active, .auth-tabs button[aria-selected="true"] { background: var(--teal-btn); color: var(--teal-ink); }
.lp-loc-n { display: none; }
@media (max-width: 520px) { .lp-loc-w { display: none; } .lp-loc-n { display: inline; } }   /* "Lesson 1 of 42": whole words on a phone */
@media (max-width: 899.98px) { .lp-top .lp-bar { display: none; } .lp-top .lp-loc { flex: 1 1 auto; overflow: visible; text-overflow: clip; } }

/* No one-sided edges (owner, 12 Oct 2026: "border-bottom is a claude artefact"): buttons, keys, tiles and tabs are flat
   fills; pressed is a slightly smaller, darker fill. The Learn kit's lip is 0 here, its keys keep an even ring. */
:root, :root[data-theme="dark"] { --blk-lip: 0px; }
.blk-key:active, .blk-tile:active { transform: scale(.98); box-shadow: inset 0 0 0 1.5px var(--edge); }
.blk-key.is-ok { box-shadow: none; }
.btn-primary:active { background: var(--teal-edge); }
.btn-prem:active, .tb-get:active, .tb-get-m:active { background: var(--prem-edge); }
.btn:not(.btn-primary):not(.btn-prem):not(.btn-ghost):active { background: var(--key-2-hover); }
/* the lesson header's location is never cut: whole words, no ellipsis */
.lp-top .lp-loc { overflow: visible; text-overflow: clip; white-space: nowrap; }
@media (max-width: 899.98px) { .lp-top .lp-loc { flex: 1 1 auto; min-width: max-content; } }
/* the home code card's file tabs on phones: the extension only (".py", ".js"), so all of them fit, never cut */
@media (max-width: 520px) { .ide-tab .tf-b { display: none; } .ide-tab { padding: 0 14px; } }

/* ---------- lesson declutter (owner "a bit cluttered?", 12 Oct 2026; coordinator's spec, shared with Stream A) ---------- */
/* exercises: the heading and the task only; the stage line (Practice, Predict the output) is the rail's job */
.step.exercise > .step-k { display: flex; margin: 0 0 4px; padding: 0; border: 0; background: none; color: var(--ink-3); font: 600 13px/1.3 var(--font); }
.step-k:focus { outline: none; }
/* "Builds on 01 to 03. Start at 01" is one line with an X */
.soft-note { display: flex; align-items: center; gap: 6px 12px; flex-wrap: nowrap; white-space: nowrap; }
.soft-note .sn-x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.soft-note .sn-x:hover { background: var(--paper-2); color: var(--ink); }
/* step dots: done a teal fill, the current one a larger teal ring, the rest muted; no green */
@media (max-width: 899.98px) {
  .env-rail .rail-h .is-seen .rs-n, .env-rail .rail-h .is-solved .rs-n, .env-rail .rail-h .is-missed .rs-n { background: var(--teal); }
  .env-rail .rail-h .active .rs-n { height: 16px; margin-top: -2px; background: transparent; box-shadow: inset 0 0 0 2.5px var(--teal); }
  /* the content clears the pinned action bar and the home indicator, so the coach's bubble is never under it */
  .page-lesson:not(.page-place) .env { padding-bottom: calc(var(--dock-h, 76px) + env(safe-area-inset-bottom) + 16px); }   /* the page's end clears the pinned bar */
}
.rail .is-solved .rs-n, .rail .is-missed .rs-n { background: var(--teal-btn); box-shadow: none; color: var(--teal-ink); }
.rail .active .rs-n { background: var(--paper); box-shadow: inset 0 0 0 3px var(--teal); color: var(--ink); transform: scale(1.15); }
.rail .is-seen:not(.is-solved):not(.active) .rs-n { box-shadow: inset 0 0 0 3px var(--rule); }
/* a step heading that receives focus when the step changes (lesson.js) carries no ring: it is a reading target, not a control */
.step h2[tabindex="-1"]:focus { outline: none; }
.env.coach-quiet .coach-lesson { display: none; }
/* an element focused by script with tabindex="-1" (a step heading, a result, a section) is a reading target, not a
   control: no ring. Buttons, inputs and links keep their :focus-visible ring. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.env:not(.at-first) [data-soft-note] { display: none; }
@media (max-width: 899.98px) { .page-lesson:not(.page-place) .env-rail + .env-scroll { padding-top: 12px; } }   /* 12px from the step dots to the label */

/* ---------- a lesson's one top bar (owner, 12 Oct 2026: "cramped, any chance of simplifying?"): close | the steps as a
   segmented bar | more. The title, the meta and the meter are on the lesson's first screen only; no step strip row,
   no back row, no "Learn" label. ---------- */
.lp-top { gap: 10px; }
.lp-top.has-steps .lp-steps { flex: 1 1 auto; min-width: 0; }
.lp-steps .rail-h { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lp-steps .rail-h li, .lp-steps .rail-h li:last-child { flex: 1 1 0; min-width: 0; }
.lp-steps .rail-h li::after { display: none; }
.lp-steps .rail-h a { display: block; padding: 14px 0; }
.lp-steps .rail-h .rs-n { display: block; width: 100%; height: 10px; border-radius: 5px; background: var(--paper-3); box-shadow: none; font-size: 0; color: transparent; transform: none; transition: background-color .2s ease; }
.lp-steps .rail-h .rs-g, .lp-steps .rail-h .rs-t { display: none; }
.lp-steps .rail-h .is-seen .rs-n, .lp-steps .rail-h .is-solved .rs-n, .lp-steps .rail-h .is-missed .rs-n { background: var(--teal); }
.lp-steps .rail-h .active .rs-n { height: 14px; margin-top: -2px; background: transparent; box-shadow: inset 0 0 0 2.5px var(--teal); }
.lp-steps .rail-h [data-locked] .rs-n { background: color-mix(in srgb, var(--prem) 35%, var(--paper-3)); }
.lp-more { position: relative; flex: none; }
.lp-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; width: 260px; padding: 8px; border-radius: var(--r2); background: var(--paper-0); box-shadow: var(--pop); }
.lp-menu-t { margin: 4px 8px 8px; color: var(--ink-3); font: 600 13.5px/1.3 var(--font); }
.lp-mi, .lp-mi-snd { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: 600 15px/1.2 var(--font); text-align: left; cursor: pointer; }
.lp-mi:hover { background: var(--blue-tint); }
.lp-mi .icon { width: 18px; height: 18px; color: var(--ink-3); }
.lp-mi-snd:empty { display: none; }
.lp-mi-snd .lp-mi-l { flex: 1 1 auto; }
[data-sheet-adapt]:empty { display: none; }
.page-lesson:not(.page-place) .env:has(.lp-steps) .env-rail, .page-lesson:not(.page-place) .env-rail { display: none !important; }
.env:not(.at-first) .env-head { display: none; }
.step:not(.exercise) > .step-k { display: none; }
@media (max-width: 899.98px) {
  .lp-top { gap: 6px; padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right)); }
  .page-lesson:not(.page-place) .env-scroll { padding-top: 14px; }
}
/* the status line sits at the foot of the code pane from the first paint, before the editors move in (CLS) */
.env-code > .code-status { order: 99; margin-top: auto; }
/* each path's own icon beside its name (tools/path_icons.py) */
.pth h2 .pth-ic { display: inline-block; width: 32px; height: 32px; margin-inline-end: 10px; vertical-align: -6px; color: var(--teal-text); }

/* One focus ring, everywhere (owner, 12 Oct; the same rule as brainlag.space): 2 px in the teal token (--teal-text:
   #08707a on the light paper, #2cc6d1 on the dark, both over 3:1), 2 px out, following the element's corners; keyboard
   focus only, never on a click. It wins over every older ring (the lesson player's included) and every outline:none;
   elements focused by a script (tabindex="-1") show none. */
:focus-visible { outline: 2px solid var(--teal-text) !important; outline-offset: 2px !important; }
:focus:not(:focus-visible) { outline: none; }
:where([tabindex="-1"]):focus-visible { outline: none !important; }
@media (forced-colors: active) { :focus-visible { outline-color: Highlight !important; } }
/* The code editor (owner, 15 Oct, "Fix outline"): no ring when it is clicked into (a text box is always
   :focus-visible); from the keyboard (html.kb-nav, app.js) the site's 2 px ring goes round the whole card, its file
   tab and its version bar included. A full-bleed editor (the playground) draws it just inside its edge. */
.cm-content:focus-visible { outline: none !important; }
html.kb-nav :is(.env-code, .runbox:not(:is(.env-code, .ide) .runbox)):has(.cm-content:focus) { outline: 2px solid var(--teal-text); outline-offset: 2px; }
html.kb-nav :is(.ide .runbox, .ws-code):has(.cm-content:focus) { outline: 2px solid var(--teal-text); outline-offset: -2px; }
@media (forced-colors: active) { html.kb-nav :is(.env-code, .runbox):has(.cm-content:focus) { outline-color: Highlight; } }
/* The open module's lesson stops (owner, 12 Oct): centred in their bar at every width. When there are more than fit,
   journey.js marks the bar .is-scroll: it scrolls sideways, centred on your stop. Each stop keeps a 44 px target. */
.jr-m.is-open > .jr-sts { justify-content: center; justify-content: safe center; }
.jr-sts > li { min-width: 44px; }
.jr-m.is-open > .jr-sts.is-scroll { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.jr-sts.is-scroll::-webkit-scrollbar { display: none; }
/* no breadcrumb trail on phones (owner, 12 Oct 2026): the header and the bottom nav are the way up; the BreadcrumbList JSON-LD stays */
@media (max-width: 599.98px) { .crumbs { display: none; } }
/* no breadcrumb trail on phones (owner, 12 Oct 2026): the header and the bottom nav are the way up; the BreadcrumbList JSON-LD stays */
@media (max-width: 599.98px) { .crumbs { display: none; } }
/* the bottom tab bar (pwa.js): anything scrolled into view (focus, find, a link to #id) stops above it, not under it;
   the page's own bottom padding for the bar is in build.py PWA_HEAD (html.has-tabs body) */
html.has-tabs { scroll-padding-bottom: calc(57px + env(safe-area-inset-bottom) + 12px); }
/* Practise first (owner, 12 Oct): the lesson's footer pager keeps "Previous" always and offers no "Next" until the
   exercises pass; once they pass, the pass panel's own Next is the way on (lesson.js .is-passed). */
[data-env]:not(.is-passed) .pager-next { display: none; }
[data-env].is-passed .pager { display: grid; }
[data-env].is-passed .pager-next { display: none; }

/* code blocks in lesson and library text (tools/content.py code_block): line numbers when a block is long enough to talk about
   by line, muted, tabular and left out of a copy */
pre.code-static.has-ln { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
pre.code-static.has-ln > .cb-ln { color: var(--slab-mute, #7f98b3); opacity: .75; text-align: right; font-variant-numeric: tabular-nums; white-space: pre; -webkit-user-select: none; user-select: none; }
pre.code-static.has-ln > code { min-width: 0; overflow-x: auto; }
/* the OCR / AQA / Python blocks (exam.css shows the picked style as a block): the picked one keeps its line numbers */
html[data-xl="erl"] .xl .xl-pre.has-ln[data-xl-l="erl"], html[data-xl="aqa"] .xl .xl-pre.has-ln[data-xl-l="aqa"],
html:not([data-xl="erl"]):not([data-xl="aqa"]) .xl .xl-pre.has-ln[data-xl-l="py"] { display: grid; }
/* Foundations lessons (build_exam.py xl-found, first-visit review 14 Oct): a total beginner sees Python only, with no
   OCR / AQA buttons and no exam pseudocode fold, until a GCSE board is picked (cbl.board, html[data-xb], xl.js). Here,
   not in exam.css, so the buttons never flash before xl.js loads that file. */
html:not([data-xb]) .xl.xl-found .xl-tabs, html:not([data-xb]) .xl-see.xl-found { display: none; }
html:not([data-xb]) .xl.xl-found .xl-pre:not([data-xl-l="py"]) { display: none; }
html:not([data-xb]) .xl.xl-found .xl-pre[data-xl-l="py"] { display: block; }
html:not([data-xb]) .xl.xl-found .xl-pre.has-ln[data-xl-l="py"] { display: grid; }

/* /learn/ (build.py module_cols fold, first-visit review 14 Oct): per course, Foundations open and larger, every later
   module closed to its heading and lesson count (the lessons stay in the page). One column on phones, two from 900px. */
.mcols.lm { gap: 24px clamp(32px, 4vw, 72px); align-items: start; }
@media (min-width: 900px) { .mcols.lm { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.lm > .mcol .mcol-t { font-size: clamp(26px, .6vw + 20px, 32px); }
.lm .row-l.compact { min-height: 44px; }
.lm > .mcol .row-l.compact .r-t { font-size: 17px; }
.lm-rest { display: grid; gap: 10px; align-content: start; }
.mfold { border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-0); }
.mfold > .mf-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t c" "m c"; align-items: center; gap: 4px 14px; min-height: 60px; padding: 10px 14px 10px 16px; border-radius: 13px; color: var(--ink); cursor: pointer; list-style: none; }
.mfold > .mf-sum::-webkit-details-marker { display: none; }
.mfold > .mf-sum:hover { background: color-mix(in srgb, var(--tc) 10%, var(--paper-0)); }
.mfold > .mf-sum:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 2px; }
.mfold .mcol-t { grid-area: t; margin: 0; font-size: 21px; }
.mfold .mcol-meta { grid-area: m; margin: 0; font-size: 15px; }
.mfold .t2-chev { grid-area: c; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); transition: transform .2s ease; }
.mfold[open] .t2-chev { transform: rotate(180deg); }
.mfold > .rows { margin: 0 8px 10px; }
@media (prefers-reduced-motion: reduce) { .mfold .t2-chev { transition: none; } }

/* large text (200%, P0 sweep 19 Oct 2026): nothing pushes the page sideways. The home's buttons wrap their words, inline
   code in prose breaks where it must, and a demo runbox never outgrows its column */
.h-act .btn { max-width: 100%; height: auto; min-height: 52px; white-space: normal; text-align: center; }
:is(.prose, .li-body, .lib-body, .ex-body) p code, .prose li code { overflow-wrap: anywhere; }
.runbox, .runbox .editor-wrap { min-width: 0; max-width: 100%; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }   /* a long word in a big heading breaks rather than clips */
.ide, .ide-head, .ide-panel, .runbox.demo { min-width: 0; max-width: 100%; }
.ide-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 299.98px) { .coach { flex-wrap: wrap; } }   /* the art and a 7em bubble no longer fit side by side: the bubble goes under it */
a.btn { max-width: 100%; }
.eb-copy .btn { height: auto; min-height: 48px; white-space: normal; text-align: center; }
a[href^="mailto:"] { overflow-wrap: anywhere; }