/* ==========================================================================
   Deep Learning Lab — "Activation" foundation
   Loaded after site.css, widgets.css and learn.css. The colour tokens live at the top of site.css;
   this file carries the type system and the shared components of the new design. Page layouts move
   here as each page is rebuilt.
   Three voices: Archivo for the interface and headings, Source Serif 4 for the lesson notes,
   JetBrains Mono for code, labels and anything you can measure.
   ========================================================================== */

/* ------------------------------------------------------------------ type */
body { font-family: var(--font); }
h1, h2, h3, h4, h5, .lesson-title, .widget-title, .compare-title, .takeaways-head, .next-title { font-family: var(--display); }
h1, .lesson-title, .plain-hero h1, .module-hero h1 { font-weight: 800; font-stretch: 116%; letter-spacing: -.03em; }
h2, .sec-head h2 { font-weight: 760; font-stretch: 110%; letter-spacing: -.02em; }

/* the notes read like a well-set book */
.prose, .lesson-summary, .lead, .module-question { font-family: var(--serif); font-optical-sizing: auto; }
.lsec > .prose, .intro-part > .prose, .lesson-start > .prose, .lsec > .intro-part > .prose { font-size: 1.14rem; line-height: 1.7; }
.lesson-summary { font-size: 1.2rem; line-height: 1.55; }
.lead { font-size: 1.22rem; line-height: 1.5; }
.prose strong { font-weight: 650; }
.prose code, .qtext code, .obj-list code, .lesson-title code, .sec-head code, .compare code, .quiz code, .term-pop code, .gl-def code {
  font-size: .8em; border: 0; border-radius: 4px; padding: .12em .38em;
}
/* interface text inside the notes stays in the interface voice */
.tutor-panel .prose, .qactions, .opt, .quiz-qtext, .cp-qtext, .qtext, .term-pop { font-family: var(--font); }

/* labels: small mono capitals, no pills */
.eyebrow, .qcard-tag, .ex-tag, .out-label, .code-explain-head, .next-kicker, .sr-meta, .module-question span, .takeaways-head {
  font-family: var(--mono); font-weight: 600; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
}
.eyebrow { padding: 0; background: none; border-radius: 0; color: var(--ink-2); gap: 7px; }
.eyebrow .ic { width: 14px; height: 14px; }
.takeaways-head { font-size: .74rem; }

/* numbers you can measure */
.quiz-score, .stepper-count, .side-lnum, .obj-check, .sec-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ controls */
.btn { border-radius: 9px; font-family: var(--font); font-weight: 650; }
.btn:hover { transform: none; box-shadow: none; opacity: .9; }
.btn-ghost:hover { opacity: 1; background: var(--surface-2); }
.chip-btn { border-radius: 8px; font-family: var(--font); }
.chips li {
  border-radius: 6px; background: var(--surface); border-color: var(--line); font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--ink-2);
}
.badge-lab {
  border-radius: 6px; background: var(--ink); color: var(--bg); font-family: var(--mono); font-weight: 600; font-size: .66rem; letter-spacing: .09em; padding: 4px 8px;
}
kbd { border-bottom-width: 1px; border-radius: 5px; background: var(--bg); }
:focus-visible { outline-color: var(--a2); }
::selection { background: color-mix(in srgb, var(--a4) 55%, transparent); color: var(--ink); }
:root[data-theme="dark"] ::selection { color: #202d28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) ::selection { color: #202d28; } }

/* fills that used to be a module colour with white text: text follows the theme */
.lsec.is-read .sec-num, .stepper-dots button.is-active, .w-btn.primary { color: var(--on-mod); }

/* ------------------------------------------------------------------ top bar */
.topbar { height: var(--topbar-h); gap: 6px; padding: 0 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); }
.brand { gap: 10px; margin-right: 8px; }
.brand-mark { width: 30px; height: 30px; border-radius: 0; background: none; }
.brand-mark svg { width: 30px; height: 30px; fill: none; stroke: none; }
.brand-mark .bm-edges { stroke: var(--ink); stroke-opacity: .35; stroke-width: 1.2; }
.brand-mark .bm-out { stroke: var(--ink); stroke-width: 1.4; }
.brand-text strong { font-family: var(--display); font-weight: 760; font-stretch: 112%; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; }
.search-btn { height: 38px; min-width: 280px; border-radius: 9px; background: var(--surface-2); border-color: transparent; font-family: var(--font); }
.search-btn:hover { border-color: var(--line-2); }
.search-btn kbd { font-size: .68rem; }
.tb-link {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 11px; border-radius: 9px;
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .86rem; white-space: nowrap; border: 1px solid transparent;
}
.tb-link:hover { background: var(--surface-2); color: var(--ink); }
.tb-link.is-active { color: var(--ink); background: var(--surface-2); }
.review-link { border-color: var(--line-2); color: var(--ink); }
.due-badge, .review-link .due-badge, .topbar .due-badge {
  position: static; min-width: 0; height: auto; padding: 3px 6px; border-radius: 5px; background: var(--ink); color: var(--bg);
  font: 700 .66rem/1 var(--mono); box-shadow: none;
}
.tutor-launch { border-radius: 9px; background: transparent; border-color: transparent; color: var(--ink-2); font-family: var(--font); }
.tutor-launch .ic { color: currentColor; }
.tutor-launch:hover, .tutor-launch.is-on { background: var(--surface-2); border-color: transparent; color: var(--ink); }
.tb-menu { position: relative; }
.tb-menu > summary { list-style: none; }
.tb-menu > summary::-webkit-details-marker { display: none; }
.tb-menu[open] > summary { background: var(--surface-2); color: var(--ink); }
.tb-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 240px; padding: 6px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 2px;
}
.tb-menu-list a, .tb-menu-list button { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--font); }
.tb-menu-list a, .tb-menu-list button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; }
.tb-menu-list a:hover, .tb-menu-list button:hover { background: var(--surface-2); }
.tb-menu-list .ic { color: var(--ink-3); }
.show-sm { display: none !important; }
.read-progress span { background: var(--a2); }

/* ------------------------------------------------------------------ sidebar */
.sidebar { background: var(--bg); }
.side-home { font-weight: 600; }
.side-num { width: 28px; height: 22px; border-radius: 6px; background: transparent; color: var(--ink-2); font-family: var(--mono); font-size: .72rem; font-weight: 600; }
.side-module.is-open .side-num { background: var(--ink); color: var(--bg); }
.side-module.is-locked .side-num { background: transparent; }
.side-module-head { font-weight: 600; }
.side-lessons a.is-active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--ink); border-radius: 0 8px 8px 0; }
.side-lnum { font-family: var(--mono); font-size: .7rem; }
.side-overview { font-style: normal; }
/* progress marks follow the activation scale */
.side-dot { width: 9px; height: 9px; border: 1.5px solid var(--ink-3); background: transparent; }
.side-dot.is-started { border-color: var(--a1); background: var(--a1); }
.side-dot.is-done { border-color: var(--a2); background: var(--a2); }
.side-dot.is-mastered { border-color: var(--ink) !important; background: var(--a4) !important; box-shadow: none !important; }
.side-foot a { font-size: .86rem; }

/* ------------------------------------------------------------------ surfaces */
.lesson-hero, .module-hero { background: var(--surface); }
.next-card { background: var(--ink); color: var(--bg); box-shadow: none; }
.next-card:hover { color: var(--bg); }
.takeaways { background: var(--surface); border-color: var(--line); }
.takeaways-head .ic, .takeaways li::marker { color: var(--ink); }
.obj-check { background: transparent; color: var(--ink-3); border: 1.5px solid var(--line-2); border-radius: 50%; }
.lesson-progress .bar span, .module-progress .bar span { background: var(--a2); }

/* ------------------------------------------------------------------ code: the terminal */
.code-cell, .code-explain { font-family: var(--font); }
.code-explain { background: var(--code-bg-2); border-top-color: var(--code-line); }
.code-explain-head, .code-explain-head .ic { color: #9fd8cf; }
pre.code .ln[data-note] { background: rgba(33, 145, 140, .12); box-shadow: inset 3px 0 0 #638f72; }
pre.code .ln[data-note]::after, .note-num { background: #1b7f7a; font-family: var(--mono); }
pre.code .ln.is-hl, .line-notes li:hover, .line-notes li.is-hl { background: rgba(33, 145, 140, .2); }
.code-head .chip-btn.accent { background: transparent; border-color: #4a6350; color: #d8d5e2; }
.code-expand { color: #9fd8cf; }
.code .k, .code .kn, .code .kd, .code .kr, .code .ow, .hl .k, .hl .kn, .hl .ow { color: #c7adff; }
.code .nf, .code .fm, .hl .nf, .code .nd, .hl .nd { color: #7fd8c6; }
.code .nc, .hl .nc, .code .nb, .code .bp, .hl .nb { color: #f2c77f; }
.code .s, .code .s1, .code .s2, .code .sa, .code .sb, .code .sc, .code .sh, .hl .s, .hl .s1, .hl .s2 { color: #f2c77f; }
.code .sd, .hl .sd { color: #b8b39a; }
.code .mi, .code .mf, .code .mh, .code .mo, .code .il, .hl .mi, .hl .mf { color: #ffb48f; }
.code .c, .code .c1, .code .cm, .code .ch, .code .cs, .hl .c, .hl .c1 { color: #b8c9bb; }
.code .o, .hl .o, .code .p, .hl .p { color: #becdc0; }

/* ------------------------------------------------------------------ tutor */
.tutor-head { background: var(--surface); }
.tutor-avatar, .tutor-send, .tutor-select, .tutor-fab { background: var(--ink); color: var(--bg); box-shadow: none; }
.tutor-panel { border-radius: 16px; }
.tutor-chip .ic { color: currentColor; }

/* ------------------------------------------------------------------ footer */
.site-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding: 22px 32px 28px; margin-top: 64px; font-size: .86rem; }
.site-foot p { margin: 0; }
.site-foot strong { font-family: var(--display); font-stretch: 110%; margin-right: 8px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 980px) {
  .search-btn { min-width: 0; background: transparent; }
}
@media (max-width: 720px) {
  .topbar { padding: 0 8px; gap: 2px; }
  .brand { margin-right: 0; }
  .brand-text strong { font-size: .95rem; }
  .tb-link { padding: 0 9px; }
  .tb-link .tb-label { display: none; }
  .review-link { border-color: transparent; }
  .show-sm { display: flex !important; }
  .tb-link.hide-sm { display: none; }
  .tb-theme { display: none; }
  .site-foot { padding: 20px 16px 26px; }
}
/* phones: pages with the bottom tab bar keep the name; lesson pages (no tab bar) show the mark alone */
@media (max-width: 480px) {
  body:not(.has-tabbar) .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* hidden, but still the link's name */
}
@media print {
  .site-foot { display: none; }
}

/* ================================================================== lesson page (phase 3)
   The spine (this lesson's outline) replaces the course sidebar and the contents panel; the course tree becomes a
   drawer. The reading area is a 720px text column plus a 250px margin for short notes whenever the lesson column
   is wide enough (a container query, so it also follows the spine folding to a rail). Read mode = focus.js. */
.mono-label { font-family: var(--mono); font-weight: 600; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }

/* ---- course tree as a drawer on lesson and module pages */
@media (width > 980px) {
  body:is(.page-lesson, .page-module) .sidebar {
    display: block; position: fixed; left: 0; top: var(--topbar-h); z-index: 60; background: var(--surface); box-shadow: var(--shadow-lg);
    transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  body:is(.page-lesson, .page-module).nav-open .sidebar { transform: none; visibility: visible; }
  body:is(.page-lesson, .page-module).nav-open .scrim { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 55; background: rgba(0, 0, 0, .35); }
}

/* ---- the spine */
.spine { flex: none; width: 272px; position: sticky; top: var(--topbar-h); align-self: flex-start; height: calc(100vh - var(--topbar-h)); border-right: 1px solid var(--line); background: var(--bg); }
.spine-inner { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 16px 14px 28px 20px; display: flex; flex-direction: column; gap: 16px; }
.spine-top { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.spine-mod { margin-right: auto; color: var(--ink-3); text-decoration: none; }
.spine-mod:hover { color: var(--ink); }
.spine-close, .spine-scrim { display: none; }
.spine-label { font: 600 .7rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.spine-title { font: 700 1.02rem/1.25 var(--display); font-stretch: 108%; letter-spacing: -.01em; margin: 4px 0 12px; color: var(--ink); }
.spine .lesson-progress { margin: 0; display: grid; gap: 6px; font-size: .74rem; }
.spine .lesson-progress .bar { height: 4px; }
.spine-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.spa { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); font: 500 .8rem var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.spa:hover { color: var(--ink); border-color: var(--ink-3); }
.spa .ic { width: 14px; height: 14px; }
.spa kbd { font: 600 .64rem var(--mono); padding: 1px 5px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink-3); background: var(--bg); }
.spa[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sp-list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1px; }
.sp-list::before { content: ""; position: absolute; left: 5.5px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.sp-list > li { margin: 0; }
.sp { position: relative; display: grid; grid-template-columns: 13px 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 6px 5px 0; font: 500 .82rem/1.35 var(--font); color: var(--ink-2); text-decoration: none; border-radius: 6px; }
.sp:hover { color: var(--ink); }
.sp .node { position: relative; z-index: 1; width: 13px; height: 13px; margin-top: 2px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); box-sizing: border-box; transition: background .3s, border-color .3s; }
.sp small { font: 500 .7rem/1.75 var(--mono); color: var(--ink-3); }
.sp.is-read .node { background: var(--a2); border-color: var(--a2); }
.sp.cp-done .sp-t::after { content: " ✓"; color: var(--a2-text); font-weight: 700; }
.sp.is-active { color: var(--ink); font-weight: 650; }
.sp.is-active small { color: var(--ink); }
.sp.is-active .node { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 14%, transparent); }
.sp.is-active::after { content: ""; position: absolute; left: -20px; top: 4px; bottom: 4px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ink); }
.sp.focus-current { background: var(--surface-2); }
.sp-sub { list-style: none; margin: 0 0 4px 47px; padding: 0; display: none; }
.sp.is-active + .sp-sub { display: block; }
.sp-sub a { display: block; padding: 3px 4px; font-size: .76rem; line-height: 1.35; color: var(--ink-3); text-decoration: none; }
.sp-sub a:hover { color: var(--ink); }
@media (width > 980px) {
  .spine-collapsed .spine { width: 52px; }
  .spine-collapsed .spine-inner { padding: 14px 0 20px; align-items: center; overflow-x: hidden; }
  .spine-collapsed .spine-mod, .spine-collapsed .spine-head, .spine-collapsed .spine-actions,
  .spine-collapsed .sp small, .spine-collapsed .sp-t, .spine-collapsed .sp-sub { display: none; }
  .spine-collapsed .sp { grid-template-columns: 13px; gap: 0; padding: 6px 0; }
  .spine-collapsed .sp.is-active::after { left: -19px; }
}

/* ---- reading area */
.page-lesson .lesson-layout { display: block; padding: 0 40px; container: lesson / inline-size; }
.page-lesson .lesson { max-width: 720px; margin: 0 auto; }
.page-lesson .lesson-hero { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 44px 0 4px; margin: 0; overflow: visible; }
.hero-mod { color: var(--ink-2); text-decoration: none; }
.hero-mod:hover { color: var(--ink); text-decoration: underline; }
.page-lesson .lesson-title { font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.05; margin: 14px 0 20px; }
.page-lesson .lesson-summary { max-width: none; color: var(--ink-2); }
.mnote { border-top: 2px solid var(--ink); padding-top: 10px; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.mnote-lbl { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--ink); }
.mnote-lbl .ic { width: 14px; height: 14px; }
.hero-facts { margin: 0 0 18px; font-size: .84rem; }
.hero-facts .mnote-lbl { margin-bottom: 2px; }
.hf-list { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.hf-list > div { display: flex; gap: 6px; }
.hero-facts dt { color: var(--ink-3); }
.hero-facts dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.page-lesson .hero-actions { margin-top: 22px; }

/* before you start: definition rows */
.page-lesson .lesson-start { padding-top: 34px; }
.start-h { margin: 0 0 12px; color: var(--ink-3); }
.defs { margin: 0; border-top: 1px solid var(--line); }
.def { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.def dt { display: flex; align-items: flex-start; gap: 8px; padding-top: 5px; font: 600 .7rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.def dt .ic { width: 14px; height: 14px; flex: none; margin-top: -1px; }
.def dd { margin: 0; min-width: 0; }
.def dd.prose > :first-child { margin-top: 0; }
.def dd.prose > :last-child { margin-bottom: 0; }
.def .obj-list { margin: 0; grid-template-columns: 1fr; gap: 8px; }
.start-data { margin: 18px 0 0; }
.start-data .prose { font-family: var(--font); font-size: .9rem; max-width: none; }
.start-data .prose > :first-child { margin-top: 0; }

/* sections */
.page-lesson .lsec { padding-top: 40px; margin-top: 44px; }
.page-lesson .sec-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; gap: 0; margin-bottom: 14px; }
.page-lesson .sec-num { display: block; width: auto; height: auto; margin: 0; border-radius: 0; background: none; color: var(--ink-3); font: 600 .95rem var(--mono); }
.page-lesson .lsec.is-read .sec-num { background: none; color: var(--a2-text); }
.page-lesson .sec-icon .ic { width: 16px; height: 16px; }
.page-lesson .sec-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.12; margin: 0; }

/* explainers: short ones are margin notes, collapsed ones are annotation rows, the rest plain blocks */
.explainer[class] { --ex: var(--ink-2); --ex-soft: var(--surface); }
.explainer.ex-warning { --ex: var(--red); }
.explainer.mnote { margin: 1.4em 0; padding: 10px 0 0; background: none; border: 0; border-top: 2px solid var(--ink); border-radius: 0; }
.explainer.mnote.ex-warning { border-top-color: var(--red); }
.explainer.mnote .ex-icon { display: none; }
.explainer.mnote .ex-tag { color: var(--ink); }
.explainer.mnote.ex-warning .ex-tag { color: var(--red); }
.explainer.mnote .ex-title { flex-basis: 100%; margin: 0; font: 650 .95rem/1.35 var(--font); color: var(--ink); }
.explainer.mnote > .prose { font: 400 .92rem/1.55 var(--font); color: var(--ink-2); }
.explainer.mnote > .prose > :first-child { margin-top: .35em; }
.explainer.annot { margin: 1.4em 0; padding: 0; background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
.explainer.annot > summary { padding: 12px 0; align-items: center; column-gap: 12px; }
.explainer.annot .ex-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.explainer.annot .ex-tag { color: var(--ink-3); }
.explainer.annot .ex-title { font: 600 .98rem/1.35 var(--font); color: var(--ink); margin-left: 44px; }
.explainer.annot[open] > summary { border-bottom: 1px dashed var(--line); }
.explainer.annot > .prose { padding: 4px 0 14px 44px; }
details.explainer.annot:not([open]) { padding-bottom: 0; }
.explainer:not(.mnote):not(.annot) { border: 1px solid var(--line); background: var(--surface); }
.explainer:not(.mnote):not(.annot) .ex-icon { background: var(--ink); color: var(--bg); }

/* code cells: terminal header with Run in teal; Edit, Hide explanation, Ask the tutor and Copy in the ⋯ menu (phase 8) */
.code-lang, .code-meta { font-family: var(--mono); font-size: .74rem; letter-spacing: .02em; }
.code-actions .py-run { background: #1b7f7a; border-color: #1b7f7a; color: #fff; }   /* a deeper --a2: white text needs 4.5:1 */
.code-actions .py-run .ic { color: #fff; }
.code-actions .py-run:hover { background: #176e6a; border-color: #176e6a; }
.code-menu { position: fixed; inset: auto; margin: 0; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.code-mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font: 500 .88rem var(--font); text-align: left; white-space: nowrap; cursor: pointer; }
.code-mi:hover, .code-mi:focus-visible { background: var(--surface-2); }
.code-mi .ic { width: 16px; height: 16px; color: var(--ink-3); }
.code-menu.is-inline { position: static; display: inline-flex; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.code-menu.is-inline .code-mi { width: auto; padding: 4px 9px; border: 1px solid #4a6350; color: #d8d5e2; font-size: .78rem; }
.code-menu.is-inline .code-mi .ic { color: currentColor; }
.code-menu:popover-open { display: grid; gap: 2px; }

/* labs as benches: dotted ground, a plate for the title, the caption at the foot */
.page-lesson .widget {
  --bench-dot: color-mix(in srgb, var(--ink) 13%, transparent);
  background-color: var(--surface-2); background-image: radial-gradient(circle, var(--bench-dot) 1px, transparent 1.4px); background-size: 16px 16px;
  border: 1px solid var(--line); border-radius: 16px; box-shadow: none;
}
.page-lesson .widget-head { background: var(--surface); padding: 12px 18px; border-bottom: 1px solid var(--line); }
.page-lesson .widget-intro { background: var(--surface); padding: 10px 18px 14px; border-bottom: 1px solid var(--line); }
.page-lesson .widget-intro > :first-child { margin-top: 0; }
.page-lesson .widget-caption { background: var(--surface); }

/* questions as prompts */
.qcard, .predict, .checkpoint, .quiz { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.qcard::before { display: none; }
.predict { --qc: var(--ink); --qc-soft: var(--surface-2); }
.qcard-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--bg); }
.qcard-tag { color: var(--ink-2); }
.checkpoint { --cpc: var(--ink); }
.cp-badge { background: var(--ink); color: var(--bg); border-radius: 6px; font-family: var(--mono); font-weight: 600; letter-spacing: .08em; }
.checkpoint.is-done { border-color: var(--a2); }
.cp-score { color: var(--a2-text); }
.cp-explain { background: var(--surface); }
.opt { min-height: 46px; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; }
.opt:hover:not(:disabled) { border-color: var(--ink); transform: none; }
.opt-letter { border: 1px solid var(--line-2); background: var(--surface); font-family: var(--mono); font-weight: 600; color: var(--ink-3); border-radius: 6px; }
/* the letter takes the page colour: white on light green fails in dark mode */
.opt.is-correct .opt-letter { background: var(--green); border-color: var(--green); color: var(--bg); }
.opt.is-wrong .opt-letter { background: var(--red); border-color: var(--red); color: var(--bg); }
.opt.is-picked { box-shadow: inset 0 0 0 1px var(--ink); }
.quiz-why, .cp-why { background: none; border-top: 1px dashed var(--line-2); border-radius: 0; padding: 12px 0 0; }
.quiz-n { border-radius: 6px; font-family: var(--mono); }

/* a single short reflective question is a margin note: the question, then "Write my answer" as a link (phase 8) */
.qcard.q-note { margin: 1.4em 0; padding: 10px 0 0; border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: none; box-shadow: none; }
.q-note .qcard-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.q-note .qcard-icon { width: auto; height: auto; background: none; color: var(--ink); }
.q-note .qcard-icon .ic { width: 14px; height: 14px; }
.q-note .qcard-tag { color: var(--ink); }
.q-note .qcard-label { display: none; }
.q-note .qlist { margin: 0; padding: 0; list-style: none; }
.q-note .qlist .qitem { padding: 0; border: 0; border-radius: 0; background: none; }
.q-note .qtext { font: 400 .92rem/1.55 var(--font); color: var(--ink-2); }
.q-note .qtext p { margin: 0; }
.q-note .qactions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.q-note .qactions .chip-btn { padding: 0; border: 0; background: none; color: var(--ink); font: 600 .84rem var(--font); text-decoration: underline; text-underline-offset: 2px; }
.q-note .qactions .chip-btn .ic { display: none; }
.q-note .qnote { width: 100%; margin-top: 8px; font-size: .88rem; }
.q-note .qanswer { margin-top: 8px; font-size: .9rem; }

/* ---- the end of a lesson: mark it complete, the next lesson as one wide row, the previous one as a link (phase 8) */
.page-lesson .lesson-end { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; margin: 32px 0 0; padding: 0; border: 0; background: none; }
.btn-complete { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-complete:hover { color: var(--bg); }
.btn-complete.is-done { background: var(--surface); border-color: var(--a2); color: var(--ink); }
.btn-complete.is-done .ic { color: var(--a2-text); }
.end-next { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); }
.end-next:hover { border-color: var(--ink); }
.end-node { width: 16px; height: 16px; border: 2px solid var(--line-2); border-radius: 50%; box-sizing: border-box; }
.end-t { display: grid; gap: 4px; min-width: 0; }
.end-t .mono-label { color: var(--ink-3); }
.end-t strong { font: 700 1.2rem/1.2 var(--display); font-stretch: 108%; }
.end-next > .ic { width: 20px; height: 20px; }
.end-prev { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--ink-2); }
.end-prev .ic { width: 14px; height: 14px; }
@media (max-width: 720px) { .page-lesson .lesson-end { grid-template-columns: minmax(0, 1fr); } .btn-complete { justify-self: start; } }

/* ---- margin mode: text column plus margin, when the lesson column has room */
@container lesson (min-width: 1018px) {
  body:not(.focus-mode) .lesson { max-width: 1018px; }
  body:not(.focus-mode) :is(.lesson-hero, .lesson-start, .lsec, .big-picture, .lesson-end, .mastery-panel, .discussion) { padding-right: 298px; }
  body:not(.focus-mode) :is(.lsec, .intro-part, .lesson-start, .lesson-hero) > .mnote { float: right; clear: right; width: 250px; margin: 6px -298px 18px 0; }
  body:not(.focus-mode) .lsec { display: flow-root; }   /* a section holds its margin notes, so they never run into the next one */
  body:not(.focus-mode) .hf-list { display: block; }
  body:not(.focus-mode) .hf-list > div { justify-content: space-between; padding: 5px 0; border-bottom: 1px dotted var(--line-2); }
  body:not(.focus-mode) .lsec > .widget { clear: right; margin-right: -298px; }
}

/* ---- read mode: no spine, no top bar, one centred column */
body.focus-mode .spine, body.focus-mode .topbar, body.focus-mode .site-foot { display: none; }
body.focus-mode .lesson { max-width: 700px; }
body.focus-mode .lesson-hero { padding-top: 32px; }
.focus-bar { background: var(--surface); border-color: var(--line); }
.focus-dots i.is-past, .focus-dots i.is-now { background: var(--a2); }
.focus-dots i.is-past { opacity: .5; }
.focus-toggle[aria-pressed="true"] { border-color: var(--ink); }

/* ---- phone lesson bar and the spine as a bottom sheet */
.lesson-bar { display: none; }
@media (max-width: 980px) {
  .spine {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: min(78vh, 640px); z-index: 66;
    border: 1px solid var(--line); border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: var(--shadow-lg);
    transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  body.spine-open .spine { transform: none; visibility: visible; }
  body.spine-open .spine-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .4); }
  .spine-toggle { display: none; }
  .spine-close { display: inline-grid; }
  .sp { font-size: .9rem; padding: 7px 6px 7px 0; }
  .sp.is-active::after { display: none; }
  .lesson-bar {
    display: flex; align-items: center; gap: 2px; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 50;
    padding: 6px; border-radius: 16px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg);
  }
  .lesson-bar .icon-btn { color: var(--bg); width: 42px; height: 42px; }
  .lesson-bar .icon-btn:hover { background: color-mix(in srgb, var(--bg) 14%, transparent); }
  .lb-where { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .lb-where > span { display: grid; min-width: 0; }
  .lb-where small { font: 600 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
  .lb-where [data-lb-where] { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-lesson .main { padding-bottom: 72px; }
  body.focus-mode .lesson-bar { display: none; }
  .page-lesson .tutor-fab { bottom: 76px; }
}
@media (max-width: 720px) {
  .page-lesson .lesson-layout { padding: 0 16px; }
  .page-lesson .lesson-hero { padding-top: 24px; }
  .page-lesson .lesson-title { font-size: 2rem; margin: 10px 0 14px; }
  .hero-facts { border-top-width: 1px; font-size: .8rem; }
  .hf-list { gap: 2px 14px; }
  .def { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  .def dt { padding-top: 0; }
  .page-lesson .sec-head { grid-template-columns: 40px minmax(0, 1fr); }
  .page-lesson .sec-head h2 { font-size: 1.5rem; }
  .page-lesson .lsec { margin-top: 32px; padding-top: 30px; }
}
@media print { .spine, .lesson-bar, .spine-scrim { display: none !important; } }

/* ================================================================== home (phase 4)
   A returning learner sees today (resume, daily review, this week); a first visit sees the welcome. Both see
   "Your network" (drawn by home.js, dark in both themes), the module rows and what is coming next. */
.page-home .nav-toggle { display: none; }
.home2 { max-width: 1296px; margin: 0 auto; padding: 44px 40px 0; display: grid; gap: 56px; }
.home2 [hidden] { display: none !important; }

/* ---- today */
.today { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.t-card { display: flex; flex-direction: column; min-width: 0; padding: 28px 30px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.t-k { color: var(--ink-2); margin-bottom: 18px; }
.t-where { font: 500 .8rem var(--mono); color: var(--ink-2); }
.t-title { font: 800 clamp(1.8rem, 3vw, 2.6rem)/1.02 var(--display); font-stretch: 116%; letter-spacing: -.03em; margin: 8px 0 22px; text-wrap: balance; }
.t-title a { color: var(--ink); text-decoration: none; }
.t-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.t-secs { list-style: none; margin: 0 0 18px; padding: 0; display: flex; align-items: center; }
.t-secs li { flex: 1; display: flex; align-items: center; min-width: 0; }
.t-secs li::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); box-sizing: border-box; }
.t-secs li::after { content: ""; flex: 1; height: 2px; background: var(--line-2); }
.t-secs li:last-child { flex: none; }
.t-secs li:last-child::after { display: none; }
.t-secs li.is-read::before { background: var(--a2); border-color: var(--a2); }
.t-secs li.is-read::after { background: var(--a2); }
.t-secs li.is-next::before { width: 15px; height: 15px; border: 2.5px solid var(--ink); }
.t-next { margin: 0 0 22px; font-size: .95rem; }
.t-next strong { font-weight: 650; }
.t-meta { margin-left: 6px; font: 500 .78rem var(--mono); color: var(--ink-3); }
.t-actions { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.t-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: none; }
.t-link:hover { text-decoration: underline; }
.t-link .ic { width: 16px; height: 16px; }
.t-big { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 22px; color: var(--ink); text-decoration: none; }
.t-big strong { font: 900 5.2rem/.8 var(--display); font-stretch: 62%; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.t-big span { padding-bottom: 2px; font-size: .95rem; line-height: 1.4; }
.t-mods { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.t-mods li { display: flex; justify-content: space-between; }
.t-n { font: 500 .8rem var(--mono); color: var(--ink-2); }
.t-note { margin: 0 0 22px; font-size: .9rem; color: var(--ink-2); }
.t-cta { margin-top: auto; width: 100%; justify-content: center; }
.t-streak { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.t-streak .ic { width: 22px; height: 22px; color: var(--orange); flex: none; }
.t-streak strong { font: 800 1.9rem/1 var(--display); font-stretch: 112%; letter-spacing: -.02em; }
.t-days { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 280px; }
.t-days li { display: grid; justify-items: center; gap: 6px; font: 500 .66rem var(--mono); color: var(--ink-3); }
.t-days i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); box-sizing: border-box; }
.t-days .is-future i { border-style: dashed; }
.t-days .lv-1 i { background: var(--a2); border-color: var(--a2); }
.t-days .lv-2 i { background: var(--a3); border-color: var(--a3); }
.t-days .lv-3 i { background: var(--a4); border-color: color-mix(in srgb, var(--a4) 70%, var(--ink)); }
.t-goal { display: grid; gap: 4px; margin: 0 0 18px; font-size: .9rem; color: var(--ink-2); }
.t-goal strong { color: var(--ink); font-weight: 650; }
.t-week .t-link { margin-top: auto; }

/* ---- first visit */
.welcome { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 56px; align-items: end; }
.welcome-k { color: var(--ink-2); }
.welcome h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: .95; letter-spacing: -.035em; font-stretch: 116%; margin: 18px 0 22px; text-wrap: balance; }
.welcome .lead { font-size: 1.35rem; max-width: 760px; }
.welcome .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn-bright { background: #ddeaab; border-color: #ddeaab; color: #202d28; }
.btn-bright:hover { background: #edf2cc; border-color: #edf2cc; color: #202d28; }
.welcome-facts { margin: 0; border-top: 2px solid var(--ink); }
.welcome-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.welcome-facts dt { color: var(--ink-3); padding-top: 3px; }
.welcome-facts dd { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.4; }

/* ---- your network (a dark instrument panel in both themes) */
.net { padding: 28px 36px 22px; border-radius: 20px; background: #14221c; color: #edf2e5; border: 1px solid #34493a; box-shadow: var(--shadow-lg); }
.net-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.net-k { color: #b8c9bb; }
.net h2 { margin: 8px 0; font: 800 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--display); font-stretch: 112%; letter-spacing: -.02em; color: #fff; }
.net-head p { margin: 0; max-width: 760px; font-size: .92rem; color: #becdc0; }
.net-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: #becdc0; }
.net-legend li { display: flex; align-items: center; gap: 7px; }
.net-legend i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); box-sizing: border-box; }
.net-legend .st-started { background: #356784; border-color: #356784; }
.net-legend .st-practised { background: #638f72; border-color: #638f72; }
.net-legend .st-mastered { background: #ddeaab; border-color: #ddeaab; }
.net-legend .st-soon { border-style: dashed; border-color: rgba(255, 255, 255, .35); }
.net-stage { margin-top: 14px; min-height: 180px; }
.net-svg { display: block; width: 100%; height: auto; overflow: visible; }
.net-svg .ne { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.ne-started { stroke: rgba(91, 120, 190, .28); }
.ne-lit { stroke-opacity: .42; stroke-width: 1.3; }
.ne-soon { stroke: rgba(255, 255, 255, .07); stroke-dasharray: 3 4; }
.net-svg .nd { fill: #ddeaab; }
.net-svg .nn { fill: #14221c; stroke: rgba(255, 255, 255, .72); stroke-width: 1.6; transition: stroke-width .15s; }
.net-svg .nn.st-mastered { filter: drop-shadow(0 0 6px rgba(253, 231, 37, .55)); }
.nn-soon { fill: none; stroke: rgba(255, 255, 255, .3); stroke-dasharray: 2.5 2.5; stroke-width: 1.2; }
.net-svg .nn-g a:hover .nn { stroke: #fff; stroke-width: 2.6; }
.net-svg .nl { font: 500 11px var(--mono); fill: rgba(255, 255, 255, .55); paint-order: stroke; stroke: #14221c; stroke-width: 4px; stroke-linejoin: round; }
.nm-num { font: 600 12px var(--mono); fill: #fff; }
.nm-num.is-soon { fill: rgba(255, 255, 255, .55); }
.nm-t { font: 400 11px var(--font); fill: rgba(255, 255, 255, .62); }
.net-here { fill: none; stroke: #ddeaab; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: net-pulse 1.6s ease-in-out infinite alternate; }
@keyframes net-pulse { from { transform: scale(1); opacity: .75; } to { transform: scale(1.35); opacity: .15; } }
.net-pill { cursor: pointer; }
.net-pill rect { fill: #ddeaab; filter: drop-shadow(0 0 10px rgba(253, 231, 37, .45)); }
.net-pill:hover rect { fill: #edf2cc; }
.net-pill path { fill: #202d28; }
.net-pill text { font: 650 12.5px var(--font); fill: #202d28; }
.net-svg.is-vertical .nm-num { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .net-here { animation: none; opacity: .7; } }
/* in dark mode the page is already this dark: lift the panel a step so it still reads as an instrument */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .net { background: #1b2c23; border-color: #34493a; } }
:root[data-theme="dark"] .net { background: #1b2c23; border-color: #34493a; }

/* ---- modules and coming next */
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: start; }
.h-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.h-head h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.h-head .mono-label { color: var(--ink-2); }
.mrows, .crows { list-style: none; margin: 0; padding: 0; }
.mrow { display: grid; grid-template-columns: 116px minmax(0, 1fr) 250px; gap: 0 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.mrow-num { font: 900 4.2rem/.8 var(--display); font-stretch: 62%; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px var(--ink); font-variant-numeric: tabular-nums; }
.mrow.is-full .mrow-num { color: var(--ink); -webkit-text-stroke: 0; }
.mrow-body h3 { margin: 0 0 6px; font-size: 1.3rem; font-stretch: 108%; line-height: 1.2; }
.mrow-body h3 a { color: var(--ink); text-decoration: none; }
.mrow-body h3 a:hover { text-decoration: underline; }
.mrow-q { margin: 0 0 6px; font: italic 400 1.08rem/1.4 var(--serif); color: var(--ink-2); }
.mrow-meta, .mrow-count { font: 500 .76rem var(--mono); color: var(--ink-3); }
.mrow-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.segs { grid-column: 1 / -1; display: flex; gap: 4px; }
.segs a { flex: 1; height: 8px; border-radius: 2px; background: var(--surface-3); }
.segs a.st-started { background: var(--a1); }
.segs a.st-practised { background: var(--a2); }
.segs a.st-mastered { background: var(--a4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.mrow-count { color: var(--ink-2); }
.mrow-go { justify-self: end; white-space: nowrap; }
.crows li { display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px dashed var(--line-2); }
.crow-n { padding-top: 3px; font: 500 .8rem var(--mono); color: var(--ink-3); }
.crows strong { display: block; font-weight: 650; font-size: .98rem; line-height: 1.3; }
.crows em { display: block; margin-top: 4px; font: italic 400 .98rem/1.4 var(--serif); color: var(--ink-3); }
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.how .mono-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.how .ic { width: 16px; height: 16px; }
.how p { margin: 10px 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }

/* ---- phones: bottom tab bar on every page but lessons */
.tabbar { display: none; }
@media (max-width: 1100px) {
  .today { grid-template-columns: 1fr 1fr; }
  .t-resume { grid-column: 1 / -1; }
  .home-cols, .welcome { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  .home2 { padding: 16px 16px 0; gap: 32px; }
  .today { gap: 12px; }
  .t-card { padding: 20px; border-radius: 14px; }
  .t-k { margin-bottom: 12px; }
  .t-title { font-size: 1.8rem; margin-bottom: 18px; }
  .t-resume .t-actions .btn { flex: 1; justify-content: center; }
  .t-resume .t-link, .t-mods, .t-week .t-days, .t-note, .t-week .t-link, .t-cta { display: none; }
  .t-big { margin-bottom: 14px; }
  .t-big strong { font-size: 3.6rem; }
  .t-big span { font-size: .82rem; }
  .t-streak strong { font-size: 1.3rem; }
  .t-goal { margin: 0; font-size: .82rem; }
  .t-cta { font-size: .82rem; padding: .5em .6em; }
  .welcome h1 { font-size: 2.6rem; }
  .welcome .lead { font-size: 1.15rem; }
  .welcome-facts > div { grid-template-columns: 100px minmax(0, 1fr); }
  .net { padding: 20px 16px 16px; border-radius: 16px; }
  .net-head p { display: none; }
  .mrow { grid-template-columns: 60px minmax(0, 1fr); gap: 8px 14px; padding: 16px 0; }
  .mrow-num { font-size: 2.8rem; grid-row: span 2; }
  .mrow-q, .mrow-meta, .mrow-count { display: none; }
  .mrow-body h3 { font-size: 1.05rem; margin: 0; }
  .mrow-side { grid-column: 2; }
  .how { grid-template-columns: 1fr 1fr; gap: 20px; }
  .has-tabbar .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line);
  }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; font: 600 .7rem var(--font); color: var(--ink-3); text-decoration: none; cursor: pointer; }
  .tabbar .ic { width: 20px; height: 20px; }
  .tabbar [aria-current="page"], .tabbar .is-on { color: var(--ink); }
  .tab-ic { position: relative; display: grid; }
  .tab-ic .due-badge { top: -7px; right: auto; left: 12px; }
  .has-tabbar .main { padding-bottom: 64px; }
  .has-tabbar .review-link, .has-tabbar .tutor-launch, .has-tabbar .tutor-fab { display: none; }
}
@media print { .tabbar, .net { display: none !important; } }

/* ================================================================== module page (phase 5)
   Giant outlined numeral, title and question, a progress panel with one action; topics as tags; the lessons as a
   connected list with each one's state and action; the module challenge as a dark card that runs one question
   at a time (progress.js). */
.mod2 { max-width: 1240px; margin: 0 auto; padding: 44px 40px 0; }
.m-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) 280px; gap: 40px; align-items: center; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.m-num { font: 900 clamp(7rem, 15vw, 14rem)/.8 var(--display); font-stretch: 62%; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 2px var(--ink); font-variant-numeric: tabular-nums; }
.m-crumbs { display: block; margin-bottom: 16px; color: var(--ink-3); }
.m-crumbs a { color: var(--ink-3); text-decoration: none; }
.m-crumbs a:hover { color: var(--ink); }
.m-k { color: var(--ink-2); }
.m-title h1 { margin: 12px 0 16px; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.m-q { margin: 0; font: italic 400 clamp(1.2rem, 2vw, 1.55rem)/1.35 var(--serif); color: var(--ink-2); }
.m-prog { display: grid; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.m-prog .mono-label { color: var(--ink-2); }
.m-prog-t { margin: 0; font-size: .9rem; color: var(--ink-2); }
.m-go { width: 100%; justify-content: center; }
.m-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 36px 0 0; }
.m-side { margin: 6px 0 0; color: var(--ink-2); }
.tags { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); font: 500 .78rem var(--mono); color: var(--ink); }
.m-note { margin: 0 0 6px; font-size: .95rem; color: var(--ink-2); }
.m-note strong { color: var(--ink); }
.m-lessons { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ml { position: relative; display: grid; grid-template-columns: 20px 76px minmax(0, 1fr) auto; gap: 0 18px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.ml::before { content: ""; position: absolute; left: 9px; top: 58px; bottom: -40px; width: 2px; background: var(--line); }
.ml:last-child::before { display: none; }
.ml.st-practised::before, .ml.st-mastered::before { background: color-mix(in srgb, var(--a2) 55%, var(--line)); }
.ml-node { position: relative; z-index: 1; width: 20px; height: 20px; margin-top: 12px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg); box-sizing: border-box; }
.ml.st-started .ml-node { background: var(--a1); border-color: var(--a1); }
.ml.st-practised .ml-node { background: var(--a2); border-color: var(--a2); }
.ml.st-mastered .ml-node { background: var(--a4); border-color: color-mix(in srgb, var(--a4) 70%, var(--ink)); }
.ml.is-current:not(.st-mastered) .ml-node { background: var(--bg); border: 3px solid var(--ink); }
.ml-num { font: 900 2.7rem/1 var(--display); font-stretch: 62%; letter-spacing: -.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ml.is-current .ml-num { color: var(--ink); }
.ml-body { min-width: 0; }
.ml-body h3 { margin: 4px 0 8px; font-size: 1.4rem; font-stretch: 108%; line-height: 1.2; }
.ml-body h3 a { color: var(--ink); text-decoration: none; }
.ml-body h3 a:hover { text-decoration: underline; }
.ml-sum { margin: 0 0 10px; max-width: 620px; font: 400 1.05rem/1.6 var(--serif); color: var(--ink-2); }
.ml-meta, .ml-state { font: 500 .76rem var(--mono); color: var(--ink-3); }
.ml-state { color: var(--ink-2); white-space: nowrap; }
.ml-side { display: grid; justify-items: end; align-content: start; gap: 12px; min-width: 160px; padding-top: 6px; }

/* the challenge: a dark card; the questions run on a light plate inside it */
.mchallenge { margin: 0; border-radius: 20px; background: #14221c; color: #edf2e5; border: 1px solid #34493a; overflow: hidden; box-shadow: var(--shadow-lg); scroll-margin-top: calc(var(--topbar-h) + 16px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mchallenge { background: #1b2c23; border-color: #34493a; } }
:root[data-theme="dark"] .mchallenge { background: #1b2c23; border-color: #34493a; }
.mc-intro { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: center; padding: 30px 32px; }
.mc-kicker { display: inline-flex; align-items: center; gap: 8px; color: #ddeaab; }
.mc-kicker .ic { width: 15px; height: 15px; }
.mchallenge h2 { margin: 12px 0 10px; max-width: 560px; font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--display); font-stretch: 112%; letter-spacing: -.02em; color: #fff; }
.mc-copy p { margin: 0 0 16px; max-width: 600px; font-size: .95rem; color: #becdc0; }
.mc-dots-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mc-dots { display: inline-flex; gap: 6px; }
.mc-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); box-sizing: border-box; }
.mc-dots i.is-right { background: #638f72; border-color: #638f72; }
.mc-dots i.is-wrong { background: #e0704a; border-color: #e0704a; }
.mc-status { font: 500 .78rem var(--mono); color: #b8c9bb; }
.mchallenge.is-passed .mc-status { color: #ddeaab; }
.mc-cta { display: grid; gap: 10px; text-align: center; }
.mc-cta .btn { justify-content: center; }
.mc-review { padding: 4px; border: 0; background: none; color: #edf2e5; font: 600 .9rem var(--font); text-decoration: underline; cursor: pointer; }
.mc-hint { margin: 0; font-size: .8rem; color: #b8c9bb; }
.mc-run { margin: 10px; padding: 22px 24px 18px; border-radius: 14px; background: var(--surface); color: var(--ink); }
.mc-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.mc-run-head .mono-label { color: var(--ink-2); }
.mc-run .mc-dots i { border-color: var(--line-2); }
.mc-run .mc-dots i.is-right { background: var(--a2); border-color: var(--a2); }
.mc-run .mc-dots i.is-wrong { background: var(--red); border-color: var(--red); }
.mc-dots i.is-now { border-color: #ddeaab; box-shadow: 0 0 0 3px rgba(253, 231, 37, .35); }
.mc-run .mc-dots i.is-now { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 15%, transparent); }
.mc-close { margin-left: auto; padding: 0; border: 0; background: none; color: var(--ink-3); font: 500 .82rem var(--font); text-decoration: underline; cursor: pointer; }
.mc-run .quiz-q { padding: 0; border: 0; }
.mc-run .quiz-qtext { font-size: 1.05rem; }
.mc-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.mc-foot { margin: 0 10px 10px; padding: 14px 18px; border-radius: 12px; background: #25372c; color: #edf2e5; font-size: .92rem; }
.mc-foot.good { box-shadow: inset 3px 0 0 #638f72; }
.mc-foot.warn { box-shadow: inset 3px 0 0 #ddeaab; }
.mc-foot a { color: #ddeaab; }

@media (max-width: 1100px) {
  .m-hero { grid-template-columns: auto minmax(0, 1fr); }
  .m-prog { grid-column: 1 / -1; }
  .m-row { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .mod2 { padding: 20px 16px 0; }
  .m-hero { grid-template-columns: 1fr; gap: 14px; padding-bottom: 28px; }
  .m-num { font-size: 6rem; }
  .m-title h1 { font-size: 2.1rem; }
  .m-q { font-size: 1.15rem; }
  .m-row { padding-top: 28px; }
  .ml { grid-template-columns: 20px minmax(0, 1fr); gap: 6px 14px; padding: 20px 0; }
  .ml-node { grid-row: 1; margin-top: 8px; }
  .ml-num { grid-column: 2; grid-row: 1; font-size: 1.9rem; }
  .ml-body { grid-column: 2; grid-row: 2; }
  .ml-side { grid-column: 2; grid-row: 3; grid-auto-flow: column; justify-content: space-between; align-items: center; min-width: 0; padding: 0; }
  .ml::before { top: 44px; bottom: -28px; }
  .ml-sum { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .98rem; }
  .mc-intro { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
  .mc-run { margin: 6px; padding: 16px 16px 14px; }
  .mc-close { margin-left: 0; }
}

/* ================================================================== daily review (phase 6)
   The page opens on the first question of a round: segmented progress (right, missed, skipped), the question as a
   prompt, and after each answer why and when it comes back. The side panel says what is due, by lesson. On a phone
   a running round takes the whole screen: a close button and the segments on top, the actions in a bar at the foot. */
.page-review .nav-toggle { display: none; }
.rv2 { max-width: 1280px; margin: 0 auto; padding: 40px 40px 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.rv2 [hidden] { display: none !important; }
.rv-col { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* ---- the round: where you are */
.rv-round { display: grid; gap: 18px; }
.rv-head { display: flex; align-items: center; gap: 16px; min-height: 22px; }
.rv-where { color: var(--ink); white-space: nowrap; }
.rv-segs { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(var(--n, 15), minmax(0, 1fr)); gap: 4px; }
.rv-segs i { height: 6px; border-radius: 3px; background: var(--surface-3); }
.rv-segs i.is-ok { background: var(--green); }
.rv-segs i.is-bad { background: var(--red); }
.rv-segs i.is-now { background: var(--ink); }
.rv-segs i.is-skip { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.rv-tally { font: 500 .76rem var(--mono); color: var(--ink-3); white-space: nowrap; }
.rv-x, .rv-frac { display: none; }

/* ---- the question as a prompt */
.rv-prompt { position: relative; padding: 30px 32px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.rv-phead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.qmark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--bg); font: 800 16px/1 var(--display); }
.rv-from { color: var(--ink); }
.rv-seen { margin-left: auto; font: 500 .75rem var(--mono); color: var(--ink-3); white-space: nowrap; }
.rv-q { margin: 0 0 18px; font: 620 1.375rem/1.4 var(--display); letter-spacing: -.005em; color: var(--ink); outline: none; }
.rv-q p { margin: 0 0 .5em; }
.rv-q > :last-child { margin-bottom: 0; }
.rv-q code, .rv-why code, .rv-opts code { font: 500 .8em var(--mono); background: var(--surface-2); padding: .1em .35em; border-radius: 4px; border: 0; }
.rv-opts { display: grid; gap: 8px; }
.rv-opts .opt { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 500 .97rem/1.4 var(--font); }
.rv-opts .opt-letter { width: 24px; height: 24px; }
.rv-opts .opt.is-picked { box-shadow: none; }
.rv-opts .opt.is-correct { border-color: var(--green); background: var(--green-soft); }
.rv-opts .opt.is-wrong { border-color: var(--red); background: var(--red-soft); }
.rv-opts .opt.is-dim { color: var(--ink-3); }
.opt-mark { display: inline-flex; align-items: center; gap: 6px; font: 600 .8rem var(--font); white-space: nowrap; }
.opt-mark .ic { width: 14px; height: 14px; }
.is-correct .opt-mark { color: var(--green); }
.is-wrong .opt-mark { color: var(--red); }
.rv-hint { display: none; }
.rv-why { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); font: 400 1.06rem/1.6 var(--serif); color: var(--ink-2); }
.rv-why p { margin: 0 0 .6em; }
.rv-why > :last-child { margin-bottom: 0; }
.rv-why b { color: var(--ink); font-weight: 650; }
.rv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.rv-when { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  font: 500 .76rem/1 var(--mono); color: var(--ink-2); }
.rv-when .ic { width: 14px; height: 14px; }
.rv-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; scroll-margin-bottom: 24px; }
.rv-acts .btn { height: 38px; padding: 0 14px; border-radius: 8px; font-size: .86rem; }
.rv-acts .btn .ic { width: 16px; height: 16px; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); opacity: 1; }
.rv-next kbd { padding: 2px 5px; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; opacity: .6; font-size: .7rem; }
.rv-short { display: none; }
.rv-keys { margin: 0; font-size: .86rem; color: var(--ink-2); }
.rv-keys kbd { font-size: .72rem; }
.rv-stop { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; cursor: pointer; }
.rv-stop:hover { color: var(--ink); }

/* ---- between rounds */
.rv-state { padding: 30px 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); outline: none; }
.rv-k { color: var(--ink-2); }
.rv-state .rv-segs { margin-top: 14px; }
.rv-score { margin: 16px 0 10px; font: 800 clamp(1.8rem, 3vw, 2.4rem)/1.05 var(--display); font-stretch: 112%; letter-spacing: -.02em; color: var(--ink); }
.rv-sum { margin: 0; max-width: 640px; font: 400 1.1rem/1.55 var(--serif); color: var(--ink-2); }
.rv-sub { display: block; margin: 24px 0 8px; color: var(--ink-2); }
.rv-missed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rv-missed li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rv-missed .rv-l { font: 500 .76rem var(--mono); color: var(--ink-3); white-space: nowrap; }
.rv-mq { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; line-height: 1.45; color: var(--ink); }
.rv-missed a { font-weight: 600; font-size: .86rem; color: var(--ink); }
.rv-state-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.rv-left { font: 500 .78rem var(--mono); color: var(--ink-3); }
.rv-clear { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--ink); }
.rv-clear .ic { width: 18px; height: 18px; color: var(--green); }
.rv-deck { margin: 20px 0 0; font: 500 .76rem var(--mono); color: var(--ink-3); }

/* ---- practise a lesson */
.rv-practice { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.rv-practice h2 { margin: 0 0 6px; font-size: 1.3rem; }
.rv-practice p { margin: 0; max-width: 640px; font-size: .95rem; color: var(--ink-2); }
.rv-practice-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rv-practice-row select { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); font: 500 .92rem var(--font); }

/* ---- side panel */
.rv-side { position: sticky; top: calc(var(--topbar-h) + 32px); display: grid; gap: 24px; }
.rv-count { display: grid; gap: 6px; }
.rv-count .mono-label, .rv-list .mono-label { color: var(--ink-3); }
.rv-big { display: flex; align-items: flex-end; gap: 10px; }
.rv-big strong { font: 900 5.25rem/.82 var(--display); font-stretch: 62%; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-big span { padding-bottom: 6px; font-size: .95rem; line-height: 1.4; color: var(--ink-2); }
.rv-list ol { list-style: none; margin: 8px 0 0; padding: 0; }
.rv-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); }
.rv-list li.is-day { grid-template-columns: minmax(0, 1fr) 28px; }
.rv-list .rv-l { font: 500 .75rem var(--mono); color: var(--ink-3); }
.rv-list .rv-t { font: 500 .85rem/1.35 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-list .rv-n { font: 500 .78rem var(--mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.rv-how { border-top-width: 1px; border-color: var(--line-2); font-size: .92rem; }
.rv-how .mnote-lbl { display: block; margin-bottom: 6px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .rv2 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rv-side { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; }
  .rv-count, .rv-how { grid-column: 1; }
  .rv-list { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 720px) {
  .rv2 { padding: 20px 16px 0; gap: 32px; }
  .rv-side { grid-template-columns: minmax(0, 1fr); }
  .rv-practice-row > * { flex: 1 1 100%; justify-content: center; }
  .rv-list { grid-column: 1; grid-row: auto; }
  .rv-prompt, .rv-state { padding: 20px 18px; }
  .rv-seen, .rv-keys { display: none; }
  .rv-q { font-size: 1.25rem; }
  .rv-opts { gap: 10px; }
  .rv-opts .opt { min-height: 58px; }
  .rv-missed li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; }
  .rv-missed .rv-l { grid-column: 1 / -1; }
  .rv-big strong { font-size: 4rem; }

  /* a running round takes the screen: close, segments and count on top; the question on the page; actions at the foot */
  body.rv-running :is(.topbar, .tabbar, .site-foot, .rv-side, .rv-practice) { display: none !important; }
  body.rv-running .main { padding-bottom: 96px; }
  body.rv-running .rv2 { padding-top: 0; }
  .rv-head { position: sticky; top: 0; z-index: 5; height: 56px; margin: 0 -16px; padding: 0 12px 0 4px; gap: 10px; background: var(--bg); }
  .rv-where, .rv-tally { display: none; }
  .rv-x { display: inline-grid; flex: none; width: 44px; height: 44px; color: var(--ink); }
  .rv-frac { display: inline; font: 500 .75rem var(--mono); color: var(--ink-2); }
  .rv-segs { gap: 3px; }
  .rv-segs i { height: 5px; }
  .rv-prompt { padding: 8px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .rv-prompt .qmark { display: none; }
  .rv-hint { display: block; margin: 16px 0 0; text-align: center; font-size: .85rem; color: var(--ink-2); }
  .rv-why, .rv-when { scroll-margin-bottom: 104px; }
  .rv-foot { margin-top: 16px; }
  .rv-acts { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
  .rv-acts .btn { height: 46px; }
  .rv-skip, .rv-next { flex: 1; justify-content: center; }
  .rv-reread { order: 2; }
  .rv-long, .rv-next kbd { display: none; }
  .rv-short { display: inline; }
}
@media print { .rv-acts, .rv-head { display: none !important; } }

/* ================================================================== training log: my progress (phase 7)
   Headline numbers, this week and what to do next, 26 weeks of study days and a skills map on the activation
   scale (by strength: --a1 under 45%, --a2, --a3 from 70%, --a4 from 85%), module badges as numerals,
   lab challenges, and sync and privacy (sync.js draws that panel). */
.page-progress .nav-toggle { display: none; }
.log { max-width: 1280px; margin: 0 auto; padding: 48px 40px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.log [hidden] { display: none !important; }
.log h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.1; }
.log-card { padding: 24px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.log-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.log-k { color: var(--ink-3); }
.log-head h1 { margin: 12px 0 14px; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; }
.log-head .lead { margin: 0; max-width: 820px; color: var(--ink-2); }
.log-nums { margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 0 40px; }
.log-nums dt { color: var(--ink-3); max-width: 110px; }
.log-nums dd { margin: 6px 0 0; }
.log-nums strong { font: 900 3.75rem/.85 var(--display); font-stretch: 62%; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.log-nums dd span { font: 500 .85rem var(--mono); color: var(--ink-3); }

/* ---- this week, do next */
.log-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; }
.log-week { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 22px; align-items: center; }
.log-week-main { display: grid; gap: 14px; }
.log-week .mono-label, .log-next .mono-label { color: var(--ink-3); }
.log-streak { display: flex; align-items: center; gap: 10px; }
.log-streak .ic { width: 22px; height: 22px; color: var(--orange); flex: none; }
.log-streak strong { font: 760 1.9rem/1.1 var(--display); font-stretch: 112%; letter-spacing: -.02em; }
.log-week .t-days { margin: 0; max-width: 300px; }
.log-goal { display: grid; gap: 8px; padding-left: 22px; border-left: 1px solid var(--line); font-size: .86rem; color: var(--ink-2); }
.log-goal select { height: 40px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); font: 600 .9rem var(--font); }
.log-next { display: flex; flex-direction: column; padding: 22px 24px; }
.log-next .mono-label { padding-bottom: 8px; }
.log-do { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .95rem; }
.log-do:hover span { text-decoration: underline; }
.log-do strong { font-weight: 650; }
.log-do .ic { width: 18px; height: 18px; color: var(--ink-2); }

/* ---- sections */
.log-sec { display: grid; align-content: start; gap: 14px; min-width: 0; }
.log-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.log-sub { font-size: .92rem; color: var(--ink-2); }
.log-scale { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--ink-2); }
.log-scale i, .log-heat i { display: block; width: 14px; height: 14px; border-radius: 3px; background: var(--surface-3); }
.log-scale i { margin: 0 1px; }
:is(.log-scale, .log-heat) i.h1 { background: var(--a1); }
:is(.log-scale, .log-heat) i.h2 { background: var(--a2); }
:is(.log-scale, .log-heat) i.h3 { background: var(--a3); }
:is(.log-scale, .log-heat) i.h4 { background: var(--a4); box-shadow: inset 0 0 0 1px rgba(21, 19, 28, .2); }

/* study days: weekday labels, then one column per week; months on top */
.log-heat-card { padding: 22px 24px; }
.log-heat { display: grid; grid-template-columns: 34px repeat(var(--weeks, 26), minmax(0, 14px)); grid-template-rows: 18px repeat(7, auto); justify-content: space-between; gap: 4px 2px; }
.log-heat i { width: 100%; height: auto; aspect-ratio: 1; }
.lh-m, .lh-d { font: 500 .66rem/14px var(--mono); color: var(--ink-3); white-space: nowrap; }
.lh-d { align-self: center; line-height: 1; }

/* skills map */
.log-skills { display: grid; gap: 8px; }
.sk2-row { display: grid; grid-template-columns: 150px repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px; }
.sk2-mod { display: flex; flex-direction: column; justify-content: center; gap: 2px; color: var(--ink); text-decoration: none; }
.sk2-mod strong { font: 900 2.1rem/.9 var(--display); font-stretch: 62%; letter-spacing: -.01em; }
.sk2-mod span { font-size: .8rem; color: var(--ink-2); }
.sk2-mod:hover span { text-decoration: underline; }
.sk2 { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 92px; padding: 12px 13px; border-radius: 10px; text-decoration: none; transition: transform .15s; }
.sk2:hover { transform: translateY(-1px); }
.sk2-top { display: flex; justify-content: space-between; font: 600 .72rem var(--mono); }
.sk2-name { font: 650 .9rem/1.25 var(--font); }
.sk2-st { font-size: .72rem; }
.sk2.s0 { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); }
.sk2.s1 { background: var(--a1); color: #fff; }
.sk2.s2 { background: var(--a2); color: #202d28; }
.sk2.s3 { background: var(--a3); color: #202d28; }
.sk2.s4 { background: var(--a4); color: #202d28; }

/* badges and lab challenges */
.log-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; }
.log-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.log-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; border: 1px dashed var(--line-2); border-radius: 14px; background: var(--surface); color: var(--ink-2); text-align: center; text-decoration: none; font-size: .82rem; }
.log-badge:hover { border-color: var(--ink-3); }
.log-medal { display: grid; place-items: center; width: 76px; height: 76px; border: 2px dashed var(--line-2); border-radius: 50%;
  font: 900 3.3rem/1 var(--display); font-stretch: 62%; color: transparent; -webkit-text-stroke: 1.5px var(--ink); font-variant-numeric: tabular-nums; }
.log-badge.is-earned { border: 1px solid var(--ink); color: var(--ink); font-weight: 650; }
.log-badge.is-earned .log-medal { border: 0; background: var(--a4); color: #202d28; -webkit-text-stroke: 0; box-shadow: inset 0 0 0 2px #202d28; }
.log-ch { padding: 4px 18px; }
.log-ch-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px 76px; gap: 10px; align-items: baseline; padding: 11px 0; font-size: .9rem; }
.log-ch-row + .log-ch-row { border-top: 1px solid var(--line); }
.log-ch-t { font-weight: 600; color: var(--ink); }
.log-ch-t span { font: 500 .74rem var(--mono); color: var(--ink-3); }
.log-ch-r { display: inline-flex; align-items: center; gap: 4px; font: 500 .78rem var(--mono); color: var(--ink-3); }
.log-ch-row.is-passed .log-ch-r { color: var(--green); }
.log-ch-r .ic { width: 14px; height: 14px; }
.log-ch-row a { justify-self: end; font-weight: 600; font-size: .84rem; color: var(--ink); }
.log-ch-row.is-later { display: block; font-weight: 600; color: var(--ink-2); }
.log-empty { margin: 12px 0; color: var(--ink-2); }

/* sync and privacy */
.log-sync { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px 26px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.log-sync.is-on { align-items: start; }
.log-sync-ic { width: 22px; height: 22px; color: var(--ink-2); }
.log-sync h2 { font: 650 1rem var(--font); letter-spacing: 0; margin: 0 0 4px; }
.log-sync p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.sy-body { display: grid; gap: 4px; min-width: 0; }
.sy-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sy-code { justify-self: start; margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); font: 700 1.15rem/1.4 var(--mono); letter-spacing: .06em; user-select: all; overflow-wrap: anywhere; }
.log-sync .sy-small { font-size: .8rem; color: var(--ink-3); }
.sy-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: .86rem; color: var(--ink-2); }
.sy-connect label { flex-basis: 100%; }
.sy-connect input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); font: 600 .9rem var(--mono); letter-spacing: .04em; }
.log-sync .sy-note { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.sy-stats { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: .8rem; color: var(--ink-3); }
.sy-stats input { margin-top: 2px; }

@media (max-width: 1100px) {
  .log-top, .log-pair { grid-template-columns: minmax(0, 1fr); }
  .sk2-row { grid-template-columns: 110px repeat(var(--cols, 4), minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .log { padding: 24px 16px 0; gap: 36px; }
  .log-head h1 { font-size: 2.5rem; }
  .log-nums { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
  .log-nums strong { font-size: 2.8rem; }
  .log-card { padding: 18px; }
  .log-week { grid-template-columns: minmax(0, 1fr); }
  .log-goal { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .log-scale { margin-left: 0; }
  .log-heat-card { padding: 14px; }
  .log-heat { grid-template-columns: 26px repeat(var(--weeks, 26), minmax(0, 14px)); gap: 2px 1px; }
  .sk2-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk2-mod { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 10px; padding-top: 10px; }
  .sk2 { min-height: 84px; }
  .log-ch-row { grid-template-columns: minmax(0, 1fr) auto; }
  .log-ch-r { display: none; }
  .log-sync { grid-template-columns: 24px minmax(0, 1fr); }
  .sy-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ================================================================== concept map (phase 7)
   The map is a dark instrument panel in both themes, like "Your network" on the home page: module columns of
   concepts, each dot showing how far you are with the lesson that teaches it. concepts.js positions the nodes
   and draws the links; below 640px of panel width the same concepts are a list per module. */
.page-concepts .nav-toggle { display: none; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 .82rem var(--font); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 1px var(--line); }
.cmap { max-width: 1440px; margin: 0 auto; padding: 40px 56px 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.cmap-main { min-width: 0; display: grid; gap: 22px; }
.cmap-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; }
.cmap-k { color: var(--ink-3); }
.cmap-head h1 { max-width: 460px; margin: 12px 0 14px; font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: .98; }
.cmap-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8rem; color: var(--ink-2); }
.cmap-legend li { display: inline-flex; align-items: center; gap: 8px; }
.cmap-legend .lg-up, .cmap-legend .lg-down { width: 30px; height: 0; border-top: 2px solid var(--ink); }
.cmap-legend .lg-down { border-top-style: dashed; }
.cmap-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cmap-find { display: flex; align-items: center; gap: 8px; width: 230px; height: 38px; padding: 0 12px; border-radius: 9px; background: var(--surface-2); color: var(--ink-3); }
.cmap-find:focus-within { box-shadow: 0 0 0 2px var(--a2); }
.cmap-find .ic { width: 16px; height: 16px; flex: none; }
.cmap-find input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 .9rem var(--font); outline: none; }

/* status dots: on the page (legend, chips) and on the dark map */
.cn-dot { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--bg); box-sizing: border-box; }
.cn-dot.st-started { background: var(--a1); border-color: var(--a1); }
.cn-dot.st-practised { background: var(--a2); border-color: var(--a2); }
.cn-dot.st-mastered { background: var(--a4); border-color: var(--ink); }
.cmap-map .cn-dot { border-color: rgba(255, 255, 255, .7); background: #14221c; }
.cmap-map .cn-dot.st-started { background: #356784; border-color: #356784; }
.cmap-map .cn-dot.st-practised { background: #638f72; border-color: #638f72; }
.cmap-map .cn-dot.st-mastered { background: #ddeaab; border-color: #ddeaab; box-shadow: 0 0 8px rgba(253, 231, 37, .55); }

/* the map */
.cmap-map { position: relative; min-height: 360px; border-radius: 18px; background: #14221c; border: 1px solid #34493a; box-shadow: var(--shadow-lg); overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cmap-map { background: #1b2c23; border-color: #34493a; } :root:not([data-theme="light"]) .cmap-map .cn-dot.st-none { background: #1b2c23; } }
:root[data-theme="dark"] .cmap-map { background: #1b2c23; border-color: #34493a; }
:root[data-theme="dark"] .cmap-map .cn-dot.st-none { background: #1b2c23; }
.cmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ce { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1; }
.show-all .ce { stroke: rgba(255, 255, 255, .24); }
.ce-up, .ce-down { stroke: rgba(255, 255, 255, .9); stroke-width: 1.6; }
.ce-down { stroke-dasharray: 4 4; }
.cmap-nodes { position: relative; }
.cn-col { position: absolute; top: 22px; color: rgba(255, 255, 255, .6); }
.cn { position: absolute; display: flex; align-items: center; gap: 7px; padding: 2px 4px 2px 0; border: 0; border-radius: 4px; background: none; transform: translateY(-50%);
  color: rgba(255, 255, 255, .62); font: 400 12px/1.2 var(--font); text-align: left; white-space: nowrap; cursor: pointer; transition: opacity .2s, color .2s; }
.cn span { overflow: hidden; text-overflow: ellipsis; }
.cn:hover { color: #fff; }
.cn:focus-visible { outline: 2px solid #ddeaab; outline-offset: 2px; }
.cn.is-up, .cn.is-down { color: #fff; font-weight: 650; }
.cn.is-sel { z-index: 2; color: #fff; font-weight: 700; font-size: 15px; }
.cn.is-sel .cn-dot { width: 16px; height: 16px; margin-left: -2px; }
.cmap-map.has-sel:not(.show-all) .cn:not(.is-sel):not(.is-up):not(.is-down) { opacity: .4; }
.cmap-map.is-searching .cn:not(.is-match) { opacity: .25; }
.cn.is-match { opacity: 1 !important; color: #ddeaab; }

/* narrow: a list per module */
.cmap-map.is-list { min-height: 0; padding: 18px 18px 8px; }
.cmap-map.is-list .cn { position: static; transform: none; display: inline-flex; margin: 0 14px 10px 0; padding: 2px 0; font-size: 13px; white-space: normal; }
.cmap-map.is-list .cn.is-sel { font-size: 14px; }
.cn-group { margin-bottom: 10px; }
.cn-group h2 { margin: 0 0 10px; font-size: .7rem; letter-spacing: .09em; color: rgba(255, 255, 255, .6); }
.cn-group h2 span { margin-left: 6px; font: 400 .78rem var(--font); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .45); }

/* side panel */
.cmap-side { position: sticky; top: calc(var(--topbar-h) + 24px); display: grid; gap: 16px; }
.cmap-panel { max-height: calc(100vh - var(--topbar-h) - 120px); overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.cp-k { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.cmap-panel h2 { margin: 14px 0 12px; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; }
.cp-def { font: 400 1.04rem/1.6 var(--serif); color: var(--ink-2); }
.cp-def p { margin: 0; }
.cp-h { display: block; margin: 18px 0 8px; color: var(--ink-3); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: 500 .76rem var(--mono); cursor: pointer; }
.cn-chip:hover { border-color: var(--ink-3); }
.cn-chip .cn-dot { width: 10px; height: 10px; }
.cp-none { margin: 0; font-size: .88rem; color: var(--ink-3); }
.cp-taught { margin-top: 18px; padding-top: 2px; border-top: 1px solid var(--line); }
.cp-taught p { margin: 0; font-weight: 600; font-size: .95rem; }
.cp-taught a { color: var(--ink); }
.cp-also { margin-top: 6px !important; font: 500 .76rem var(--mono) !important; color: var(--ink-3); }
.cp-also a { color: var(--ink-2) !important; }
.cp-later { margin: 10px 0 0; padding-left: 18px; font-size: .86rem; color: var(--ink-2); }
.cp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.cp-back { display: none; padding: 0; border: 0; background: none; color: var(--ink-2); font: 600 .84rem var(--font); text-decoration: underline; cursor: pointer; }
.cmap-hint { margin: 0; font-size: .86rem; color: var(--ink-2); }

@media (max-width: 1100px) {
  .cmap { grid-template-columns: minmax(0, 1fr); padding: 32px 32px 0; }
  .cmap-side { position: static; }
  .cmap-panel { max-height: none; }
  .cp-back { display: inline; margin-left: auto; }
}
@media (max-width: 720px) {
  .cmap { padding: 24px 16px 0; gap: 20px; }
  .cmap-head h1 { font-size: 2.3rem; }
  .cmap-tools, .cmap-find { width: 100%; }
  .cmap-find { flex: 1; width: auto; }
  .cmap-panel { padding: 20px; }
}

/* ================================================================== glossary (phase 7)
   Dictionary rows: the term with its home lesson's status dot, a serif definition, and where it is taught and
   used. A sticky A–Z rail on the left (app.js marks the letter you are reading); a strip under the top bar on phones. */
.page-glossary .nav-toggle { display: none; }
.gl { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.gl [hidden] { display: none !important; }
.gl-rail { position: sticky; top: var(--topbar-h); align-self: start; height: calc(100vh - var(--topbar-h)); overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 34px 0 24px; border-right: 1px solid var(--line); }
.gl-rail a { display: grid; place-items: center; flex: none; width: 34px; height: 26px; border-radius: 6px; color: var(--ink-2); font: 600 .74rem var(--mono); text-decoration: none; }
.gl-rail a:hover { background: var(--surface-2); color: var(--ink); }
.gl-rail a.is-on { background: var(--ink); color: var(--bg); }
.gl-main { min-width: 0; max-width: 1272px; padding: 40px 72px 0; }
.gl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; padding-bottom: 26px; border-bottom: 2px solid var(--ink); }
.gl-k { color: var(--ink-3); }
.gl-head h1 { margin: 12px 0 14px; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; }
.gl-head .lead { margin: 0; max-width: 600px; color: var(--ink-2); }
.gl-filter { display: flex; align-items: center; gap: 10px; width: 340px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--surface-2); color: var(--ink-3); }
.gl-filter:focus-within { box-shadow: 0 0 0 2px var(--a2); }
.gl-filter .ic { width: 16px; height: 16px; flex: none; }
.gl-filter input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 .92rem var(--font); outline: none; }
.gl-none { margin: 28px 0; color: var(--ink-2); }
.gl-group { display: grid; grid-template-columns: 100px minmax(0, 1fr); scroll-margin-top: calc(var(--topbar-h) + 8px); }
.gl-letter { padding-top: 16px; font: 900 3.2rem/1 var(--display); font-stretch: 62%; color: var(--ink); }
.gl-list { margin: 0; }
.gl-item { display: grid; grid-template-columns: 264px minmax(0, 1fr) 224px; gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.gl-item:target { background: linear-gradient(90deg, color-mix(in srgb, var(--a4) 22%, transparent), transparent 70%); }
.gl-item dt { display: flex; align-items: baseline; gap: 10px; font: 650 1.08rem/1.35 var(--font); color: var(--ink); }
.gl-item dt .cn-dot { position: relative; top: 1px; }
.gl-nodot { border-style: dashed; }
.gl-def { margin: 0; font: 400 1.06rem/1.6 var(--serif); color: var(--ink-2); }
.gl-def p { margin: 0 0 .5em; }
.gl-def > :last-child { margin-bottom: 0; }
.gl-meta { margin: 0; display: grid; align-content: start; gap: 4px; font: 500 .76rem/1.6 var(--mono); color: var(--ink-3); }
.gl-used a { color: var(--ink); }
.gl-map { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 2px; font: 600 .8rem var(--font); color: var(--ink); }
.gl-map .ic { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .gl-main { padding: 32px 40px 0; }
  .gl-item { grid-template-columns: minmax(0, 1fr) 200px; }
  .gl-item dt { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .gl { grid-template-columns: minmax(0, 1fr); }
  .gl-rail { z-index: 20; top: var(--topbar-h); height: auto; flex-direction: row; justify-content: flex-start; overflow-x: auto; padding: 6px 12px;
    border-right: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
  .gl-rail a { width: 30px; }
  .gl-main { padding: 22px 16px 0; }
  .gl-filter { width: 100%; }
  .gl-group { grid-template-columns: minmax(0, 1fr); scroll-margin-top: calc(var(--topbar-h) + 48px); }
  .gl-letter { padding-top: 18px; font-size: 2.4rem; }
  .gl-item { grid-template-columns: minmax(0, 1fr); gap: 8px; scroll-margin-top: calc(var(--topbar-h) + 56px); }
}

/* ================================================================== guide and 404 (phase 7)
   The guide shows the real components (question card, terminal, bench, the activation scale) before the
   steps; steps are numbered rows on hairlines. The 404 is a big outlined numeral beside the way back. */
.page-guide .nav-toggle, .page-404 .nav-toggle { display: none; }
.guide2 { max-width: 1120px; margin: 0 auto; padding: 48px 40px 0; display: grid; gap: 52px; }
.g-k { color: var(--ink-3); }
.g-head h1 { margin: 12px 0 14px; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; }
.g-head .lead { margin: 0; max-width: 760px; color: var(--ink-2); }
.guide2 h2 { margin: 0 0 18px; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.g-ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.g-ex { margin: 0; display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.g-ex-stage { display: grid; align-items: center; min-height: 176px; padding: 18px; border-radius: 14px; background: var(--surface-2); }
.g-ex figcaption { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.g-ex figcaption strong { color: var(--ink); }
.g-prompt { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.g-prompt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.g-prompt-head .qmark { width: 24px; height: 24px; font-size: 13px; border-radius: 6px; }
.g-prompt-head .mono-label { color: var(--ink); }
.g-prompt-q { margin: 0 0 10px; font: 620 .95rem/1.4 var(--font); }
.g-opts { display: grid; gap: 6px; }
.g-opts .opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; min-height: 0; padding: 7px 10px; cursor: default; font-size: .86rem; color: var(--ink); }
.g-opts .opt.is-dim { color: var(--ink-3); }
.g-opts .opt-letter { width: 22px; height: 22px; }
.g-term { margin: 0; }
.g-term pre.code { padding: 10px 0; font-size: .8rem; }
.g-term .py-run { pointer-events: none; }
.g-bench { overflow: hidden; border: 1px solid var(--line); border-radius: 12px;
  background-color: var(--surface); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.4px); background-size: 16px 16px; }
.g-bench-plate { display: grid; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.g-bench-plate .mono-label { color: var(--ink-3); }
.g-bench-plate strong { font-size: .92rem; }
.g-bench-ground { display: flex; align-items: flex-end; justify-content: center; gap: 18px; height: 74px; padding-bottom: 14px; }
.g-bench-ground i { width: 22px; border-radius: 4px 4px 0 0; background: var(--c0); }
.g-bench-ground i:nth-child(1) { height: 26px; } .g-bench-ground i:nth-child(2) { height: 44px; background: var(--c1); } .g-bench-ground i:nth-child(3) { height: 34px; }
.g-scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; font-size: .92rem; font-weight: 600; }
.g-scale li { display: flex; align-items: center; gap: 10px; }
.g-scale .cn-dot { width: 18px; height: 18px; }
.g-part h2 { padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 0; }
.g-part h2 .mono-label { font-size: .78rem; color: var(--ink); }
.g-steps { list-style: none; margin: 0; padding: 0; }
.g-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--line); counter-increment: step; }
.g-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font: 900 2.2rem/1 var(--display); font-stretch: 62%; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.g-steps h3 { margin: 2px 0 6px; font-size: 1.2rem; font-stretch: 106%; }
.g-steps p { margin: 0; max-width: 760px; font: 400 1.04rem/1.65 var(--serif); color: var(--ink-2); }
.g-steps p strong { color: var(--ink); }
.g-steps kbd { font-family: var(--mono); }
.g-keys dl { margin: 0; border-top: 1px solid var(--line); }
.g-keys dl > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.g-keys dt { white-space: nowrap; }
.g-keys dd { margin: 0; color: var(--ink-2); }
.g-keys > p { margin: 14px 0 0; font-size: .9rem; color: var(--ink-3); }

.e404 { max-width: 1120px; margin: 0 auto; padding: 96px 40px 40px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; }
.e404-num { font: 900 clamp(8rem, 18vw, 15rem)/.8 var(--display); font-stretch: 62%; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.e404-k { color: var(--ink-3); }
.e404 h1 { margin: 12px 0 16px; font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.02; text-wrap: balance; }
.e404 .lead { margin: 0; max-width: 620px; color: var(--ink-2); }
.e404-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (max-width: 720px) {
  .guide2 { padding: 24px 16px 0; gap: 40px; }
  .g-head h1 { font-size: 2.5rem; }
  .g-ex-grid { grid-template-columns: minmax(0, 1fr); }
  .g-ex-stage { min-height: 0; }
  .g-steps li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; }
  .g-steps li::before { font-size: 1.7rem; }
  .g-keys dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .e404 { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 40px 16px 24px; }
  .e404-num { font-size: 7rem; }
}

/* ================================================================== landing page and about page
   A first visit to the home page is the landing page: the hero, who it is for and what you will be able to do,
   inside every lesson, the network and modules, the author, questions and the way in. Returning learners see
   their progress instead (home.js), and index.html#about-course brings the introduction back. */
.lp-k { color: var(--ink-3); }
.lp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0; padding: 12px 16px;
  border-radius: 12px; background: var(--surface-2); font-size: .92rem; color: var(--ink-2); }
.lp-bar a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.lp-bar .ic { width: 16px; height: 16px; }
.lp-fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.lp-fit h2 { margin: 10px 0 16px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.lp-for, .lp-out { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.lp-for li, .lp-out li { padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 1.08rem/1.5 var(--serif); color: var(--ink-2); }
.lp-for li { position: relative; padding-left: 30px; }
.lp-for li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 13px; height: 13px; border: 2px solid var(--ink-3); border-radius: 50%; box-sizing: border-box; }
.lp-out { counter-reset: out; }
.lp-out li { display: grid; grid-template-columns: 48px minmax(0, 1fr); counter-increment: out; }
.lp-out li::before { content: counter(out, decimal-leading-zero); font: 900 1.7rem/1 var(--display); font-stretch: 62%; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lp-inside .how { padding-top: 22px; border-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
.lp-author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; max-width: 920px; padding: 28px 30px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.lp-avatar { display: grid; place-items: center; flex: none; width: 96px; height: 96px; overflow: hidden; border-radius: 50%; background: #14221c;
  color: #ddeaab; box-shadow: 0 0 0 1px #34493a; font: 900 2.5rem/1 var(--display); font-stretch: 62%; letter-spacing: .02em; }
.lp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-author h2 { margin: 8px 0 2px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.lp-role { margin: 0 0 10px; font: 500 .82rem var(--mono); color: var(--ink-2); }
.lp-short { margin: 0 0 14px; max-width: 660px; font: 400 1.08rem/1.55 var(--serif); color: var(--ink-2); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; list-style: none; font: 650 1.02rem/1.4 var(--font); color: var(--ink); cursor: pointer; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font: 400 1.4rem/1 var(--mono); color: var(--ink-3); }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq p { margin: 0 0 18px; max-width: 760px; font: 400 1.04rem/1.6 var(--serif); color: var(--ink-2); }
.lp-go { display: grid; justify-items: center; gap: 4px; padding: 52px 24px; border: 1px solid #34493a; border-radius: 20px; background: #14221c; color: #edf2e5; text-align: center; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-go { background: #1b2c23; border-color: #34493a; } }
:root[data-theme="dark"] .lp-go { background: #1b2c23; border-color: #34493a; }
.lp-go .lp-k { color: #b8c9bb; }
.lp-go h2 { margin: 10px 0 8px; max-width: 760px; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; color: #fff; text-wrap: balance; }
.lp-go p { margin: 0; color: #becdc0; }
.lp-go .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.lp-go .btn-ghost { color: #edf2e5; border-color: rgba(255, 255, 255, .35); }
.lp-go .btn-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lp-again { margin: 0; text-align: center; font-size: .9rem; color: var(--ink-2); }
.lp-again a { color: var(--ink); font-weight: 600; }

.page-about .nav-toggle { display: none; }
.about { max-width: 1000px; margin: 0 auto; padding: 56px 40px 0; display: grid; gap: 44px; }
.ab-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: start; }
.ab-avatar { width: 160px; height: 160px; font-size: 4.4rem; }
.ab-k { color: var(--ink-3); }
.ab-head h1 { margin: 12px 0 6px; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; }
.ab-role { margin: 0 0 16px; font: 500 .9rem var(--mono); color: var(--ink-2); }
.ab-head .lead { margin: 0; max-width: 680px; color: var(--ink-2); }
.ab-links { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface);
  color: var(--ink); font: 600 .86rem var(--font); text-decoration: none; }
.ab-links a:hover { border-color: var(--ink); }
.ab-links .ic { width: 14px; height: 14px; }
.ab-defs .def dd.prose { font-size: 1.08rem; line-height: 1.65; }
.ab-defs .def dd.prose > :first-child { margin-top: 0; }
.ab-defs .def dd.prose > :last-child { margin-bottom: 0; }
.ab-go { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1100px) {
  .lp-inside .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .lp-fit { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lp-inside .h-head .mono-label { display: none; }
  .lp-inside .how { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .lp-author { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 20px; }
  .lp-avatar { width: 72px; height: 72px; font-size: 1.9rem; }
  .lp-go { padding: 36px 18px; border-radius: 16px; }
  .lp-go .btn { flex: 1 1 100%; justify-content: center; }
  .about { padding: 28px 16px 0; gap: 32px; }
  .ab-head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ab-avatar { width: 96px; height: 96px; font-size: 2.6rem; }
  .ab-head h1 { font-size: 2.5rem; }
}

/* ========================================================================
   Approved forest-and-cream redesign, October 2026.
   Shared production layout + section-based learning flow.
   ======================================================================== */
:root { --radius-sm:3px; --radius:3px; --radius-lg:3px; --shadow-sm:none; --shadow:none; --topbar-h:78px; }
a { color:var(--ink); }
a:hover { color:var(--accent); }
.btn { border-radius:3px; background:var(--accent); color:var(--on-mod); border:1px solid var(--accent); box-shadow:none; }
.btn:hover { background:var(--accent); color:var(--on-mod); }
.btn-ghost,.btn-quiet { background:transparent; color:var(--accent); border-color:var(--line-2); }
.btn-ghost:hover,.btn-quiet:hover { background:var(--surface-2); color:var(--accent); border-color:var(--accent); }
.chip-btn,.opt,.qnote,.tutor-panel,.setup-panel,.code-menu-list,.seg,.badge,.gl-filter,.cmap-find { border-radius:3px; }
button:disabled { cursor:default; }
.mono-label { font-size:11px; font-weight:500; letter-spacing:.08em; }
.rd-topbar { height:78px; padding:0 4vw; display:flex; gap:32px; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:none; position:sticky; }
.rd-topbar .brand { gap:12px; margin:0; color:var(--ink); }
.rd-topbar .brand-text strong { font-size:18px; font-weight:800; font-stretch:115%; }
.rd-mark { width:31px; height:31px; flex:none; }
.rd-nav { height:100%; display:flex; align-items:stretch; gap:28px; margin-left:18px; }
.rd-nav a { display:flex; align-items:center; gap:6px; position:relative; font-size:14px; font-weight:550; text-decoration:none; color:var(--ink); }
.rd-nav a[aria-current] { color:var(--accent); }
.rd-nav a[aria-current]:after { position:absolute; content:''; height:3px; background:var(--accent); bottom:-1px; left:0; right:0; }
.rd-tools { margin-left:auto; display:flex; gap:14px; align-items:center; }
.rd-tools .search-btn { border:1px solid var(--line-2); border-radius:3px; background:none; box-shadow:none; min-width:0; gap:14px; padding:8px 13px; font-size:13px; }
.rd-tools .search-btn kbd { background:none; font-size:11px; }
.rd-tools .tb-theme { display:flex; }
.rd-guide { font-size:14px; }
.rd-mobile-menu { display:none; }
body .sidebar { position:fixed; z-index:60; top:var(--topbar-h); left:0; height:calc(100dvh - var(--topbar-h)); width:min(340px,90vw); transform:translateX(-105%); transition:transform .2s; box-shadow:none; }
body.nav-open .sidebar { transform:translateX(0); }
body.nav-open .scrim { display:block; position:fixed; inset:var(--topbar-h) 0 0; z-index:55; background:#14221c80; }
body .shell { display:flex; }
body:not(.page-lesson) .main { max-width:1440px; width:100%; margin:0 auto; padding:64px max(32px,7.5vw) 0; }
.rd-footer { margin-top:76px; border-top:1px solid var(--line); padding:30px 0; gap:24px; align-items:flex-start; }
.rd-footer strong { font-size:15px; }
.rd-footer p { font-size:13px; color:var(--ink-3); margin:5px 0 0; }
.rd-footer nav { display:flex; gap:12px 22px; flex-wrap:wrap; max-width:650px; font-size:13px; }
.rd-page-head { margin:0 0 42px; }
.rd-page-head .mono-label { display:block; color:var(--ink-3); margin-bottom:16px; }
.rd-page-head h1 { font-size:clamp(38px,4vw,56px); line-height:1.08; margin:0; letter-spacing:-.035em; }
.rd-page-head .lead { font-size:22px; max-width:680px; margin:22px 0 0; }
.rd-page-head>a { display:inline-block; margin-top:22px; font-size:14px; }
.rd-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:5vw; align-items:center; padding:30px 0 84px; }
.rd-hero-copy>.mono-label { display:block; color:var(--ink-3); margin-bottom:22px; }
.rd-hero h1 { font-size:clamp(42px,5vw,72px); font-weight:800; font-stretch:115%; line-height:1.08; letter-spacing:-.035em; margin:0; }
.rd-hero h1 em { font-family:var(--serif); font-weight:400; color:var(--accent); white-space:nowrap; font-stretch:normal; }
.rd-hero .lead { margin:24px 0 0; font-size:23px; line-height:1.5; max-width:590px; }
.rd-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; }
.rd-actions .btn-lg { font-size:15px; padding:12px 20px; }
.rd-return { font-size:14px; margin:20px 0 0; }
.rd-hero-meta { margin-top:44px; border-top:1px solid var(--line); padding-top:22px; display:flex; gap:36px; }
.rd-hero-meta b { font-size:23px; display:block; line-height:1.3; font-weight:700; }
.rd-hero-meta span { font-size:12px; color:var(--ink-3); }
.rd-representation { margin:0; padding:25px 24px 18px; border:1px solid var(--line-2); background:var(--surface); box-shadow:12px 12px 0 var(--surface-2); min-width:0; }
.rd-rep-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line); padding-bottom:18px; color:var(--ink-3); }
.rd-object-controls { display:flex; gap:8px; margin:20px 0 0; }
.rd-object-controls button,.rd-layer-controls button { border:1px solid var(--line-2); border-radius:3px; padding:7px 12px; font:500 12px var(--font); background:transparent; color:var(--ink); }
.rd-object-controls button[aria-pressed=true],.rd-layer-controls button[aria-pressed=true] { background:var(--accent); color:var(--on-mod); border-color:var(--accent); }
.rd-network-image svg { width:100%; height:auto; display:block; margin:8px 0 18px; }
.rd-layer-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.rd-layer-controls button { border-radius:0; padding:9px 4px; }
.rd-layer-controls button+button { border-left:0; }
.rd-representation figcaption { padding:19px 0 16px; font:17px/1.5 var(--serif); min-height:122px; }
.rd-representation figcaption strong { font-weight:600; }
.rd-representation figcaption p { margin:7px 0 0; }
.rd-prediction { border-top:1px solid var(--line); padding-top:15px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rd-prediction strong { font-size:20px; }
.rd-forward { margin-left:auto; display:flex; align-items:center; gap:5px; border:0; background:none; color:var(--accent); font:600 12px var(--font); padding:0; cursor:pointer; }
.rd-rep-note { font-size:11px; line-height:1.5; color:var(--ink-3); margin:16px 0 0; }
.rd-section { margin-bottom:76px; }
.rd-rule { border-top:1px solid var(--ink); padding-top:38px; }
.rd-section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:28px; }
.rd-section-head .mono-label,.rd-author .mono-label,.rd-faq .mono-label,.rd-outcomes>.mono-label { display:block; margin-bottom:14px; color:var(--ink-3); }
.rd-section h2,.rd-final h2 { font-size:clamp(28px,3vw,40px); line-height:1.1; margin:0; }
.rd-section-head>p { max-width:350px; font:19px/1.5 var(--serif); color:var(--ink-2); margin:0; }
.rd-section-head>a { font-size:14px; }
.rd-six { display:grid; grid-template-columns:repeat(6,1fr); gap:22px; }
.rd-six>div { border-top:1px solid var(--line); padding-top:16px; }
.rd-six .mono-label { color:var(--ink-3); }
.rd-six h3 { margin:18px 0 8px; font-size:17px; }
.rd-six p { font-size:14px; line-height:1.6; margin:0; color:var(--ink-2); }
.rd-path { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.rd-path-card { display:flex; flex-direction:column; padding:26px 22px; text-decoration:none; }
.rd-path-card>.mono-label { margin-top:auto; }
.rd-path-card+.rd-path-card { border-left:1px solid var(--line); }
.rd-path-card:hover { background:var(--surface-2); }
.rd-number { display:block; font:800 44px/1.2 var(--font); font-stretch:80%; color:var(--line-2); }
.rd-path h3 { font-size:21px; margin:20px 0 12px; line-height:1.18; }
.rd-path p { font:17px/1.5 var(--serif); color:var(--ink-2); min-height:76px; margin:0 0 22px; }
.rd-coming { display:flex; gap:10px 22px; flex-wrap:wrap; align-items:center; padding:20px 0; font-size:13px; border-bottom:1px solid var(--line); color:var(--ink-3); }
.rd-coming a { color:var(--ink-2); }
.rd-author,.rd-faq { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; }
.rd-author .prose { font-size:22px; line-height:1.6; }
.rd-author .prose p { margin-top:0; }
.rd-author h3 { font-size:23px; margin:18px 0 0; }
.rd-author>div>p { font-size:14px; color:var(--ink-3); }
.rd-author a { font-size:14px; }
.rd-initials { width:64px; height:64px; display:grid; place-items:center; background:var(--surface-2); color:var(--accent); font-size:23px; font-weight:800; }
.rd-outcomes ol { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 50px; counter-reset:outcome; margin:26px 0 0; }
.rd-outcomes li { border-top:1px solid var(--line); padding:18px 0; font:18px/1.6 var(--serif); }
.rd-faq details { border-top:1px solid var(--line); padding:18px 0; }
.rd-faq details:last-child { border-bottom:1px solid var(--line); }
.rd-faq summary { font-size:16px; font-weight:600; cursor:pointer; }
.rd-faq details p { font:18px/1.6 var(--serif); margin:16px 0 0; color:var(--ink-2); }
.rd-final { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:42px; background:#234c3c; color:#f7f7f2; }
.rd-final .mono-label { display:block; margin-bottom:14px; color:inherit; }
.rd-final .btn { background:#f7f7f2; border-color:#f7f7f2; color:#234c3c; }
/* Workspace: real resume/review data, laid out like the approved prototype. */
.rd-dashboard { max-width:none; margin:0; }
.rd-dashboard .today { display:grid; grid-template-columns:1.65fr 1fr; gap:24px; margin-bottom:38px; }
.rd-dashboard .t-card { border:1px solid var(--line); border-radius:3px; box-shadow:none; padding:30px; }
.rd-dashboard .t-resume { background:var(--surface); }
.rd-dashboard .t-title { font-size:33px; margin:19px 0; }
.rd-dashboard .t-title a { color:var(--ink); }
.rd-dashboard .t-review { background:var(--surface-2); }
.rd-dashboard .t-review .btn { align-self:flex-start; }
.rd-dashboard .t-week { grid-column:1 / -1; padding:22px 30px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px 28px; align-items:center; }
.rd-dashboard .t-week .t-k { grid-column:1 / -1; }
.rd-dashboard .t-days { margin:0; }
.rd-dashboard .t-goal { margin:0; }
.rd-dashboard .net { background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:3px; padding:30px; box-shadow:none; }
.rd-dashboard .net-head { display:flex; }
.rd-dashboard .net-k,.rd-dashboard .net-head p,.rd-dashboard .net-legend { color:var(--ink-3); }
.rd-dashboard .net-svg .nn { fill:var(--surface-2); stroke:var(--ink-3); }
.rd-dashboard .net-svg .nl,.rd-dashboard .net-svg .nm-num,.rd-dashboard .net-svg .nm-t { fill:var(--ink-3); stroke:none; }
.rd-dashboard .net-svg .nw { stroke:var(--line-2); }
.rd-dashboard .net-legend i { border-color:var(--ink-3); }
.rd-dashboard .net-stage { margin-top:26px; }
.rd-dashboard .home-cols { margin-top:48px; gap:50px; }
.rd-dashboard .mrow { border-radius:0; }
.rd-workspace-foot { display:flex; gap:25px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line); font-size:14px; }
/* Curriculum and reference desk. */
.rd-curriculum-list { list-style:none; margin:56px 0 0; padding:0; }
.rd-curriculum-row { display:grid; grid-template-columns:86px 1fr auto; gap:32px; padding:34px 0; border-top:1px solid var(--line); align-items:start; }
.rd-curriculum-row h2 { font-size:29px; line-height:1.12; margin:15px 0 0; }
.rd-curriculum-row h2 a { text-decoration:none; }
.rd-curriculum-row .lead { font-size:20px; margin:18px 0; }
.rd-tags { display:flex; flex-wrap:wrap; gap:8px; }
.rd-tags span { border:1px solid var(--line); font:11px var(--mono); padding:6px 8px; }
.rd-curriculum-lessons { list-style:none; padding:0; margin:24px 0 0; }
.rd-curriculum-lessons li { display:flex; align-items:baseline; gap:14px; padding:13px 0; border-top:1px solid var(--line); }
.rd-curriculum-lessons a { font-size:15px; text-decoration:none; }
.rd-curriculum-lessons .cn-dot { align-self:center; }
.rd-time { margin-left:auto; white-space:nowrap; font:11px var(--mono); color:var(--ink-3); }
.rd-roadmap-row { border-top-style:dashed; }
.rd-reference-grid { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.rd-reference-grid>a { padding:38px; display:block; text-decoration:none; }
.rd-reference-grid>a+a { border-left:1px solid var(--line); }
.rd-reference-grid>a:hover { background:var(--surface-2); }
.rd-reference-grid h2 { font-size:35px; margin:36px 0 0; }
.rd-reference-grid .lead { font-size:21px; margin:22px 0 30px; }
.rd-reference-grid>a>span:last-child { font-size:14px; font-weight:600; }
.rd-reference-tools { margin-top:52px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.rd-reference-tools h2 { flex-basis:100%; margin:0 0 8px; }
.rd-reference-tools>a { font-size:14px; margin-right:12px; }
.rd-roadmap-details { max-width:760px; border-top:1px solid var(--line); padding-top:30px; }
.rd-roadmap-details h3 { margin-top:32px; }
.rd-roadmap-details>.btn { margin-top:22px; }
/* Production module, progress, review and reference pages use the same grid and surfaces. */
.mod2,.log,.gl,.cmap,.guide2,.about,.plain-page,.rv2 { max-width:none; }
.m-hero { grid-template-columns:95px minmax(0,1fr) 240px; gap:32px; padding-top:12px; }
.m-hero .m-num { font-size:74px; color:var(--line-2); -webkit-text-stroke:0; }
.m-title h1 { font-size:clamp(36px,4vw,54px); }
.m-prog,.mchallenge,.mc-foot,.log-card,.log-badge,.rv-prompt,.rv-count,.rv-state .rv-done,.sy-card,.gl-filter,.cmap-map,.cmap-panel,.in-token,.ab-avatar,.g-demo { border-radius:3px; box-shadow:none; }
.m-row { grid-template-columns:150px minmax(0,1fr); gap:32px; }
.ml { padding:25px 0; }
.ml-num { font-size:16px; font-family:var(--mono); }
.ml-body h3 { font-size:24px; }
.ml-sum { font-size:19px; line-height:1.55; }
.log-head h1,.gl-head h1,.cmap-head h1,.about h1,.plain-hero h1 { font-size:clamp(38px,4vw,56px); }
.gl-def { font-size:20px; line-height:1.65; }
.gl-item { padding:26px 0; }
.gl-item dt { font-size:23px; }
.cmap-map { background:var(--surface-2)!important; border-color:var(--line); }
.cmap-map .cn,.cmap-map .cn-col,.cmap-map .cn-group h2,.cmap-map .cn-group h2 span { color:var(--ink-3); }
.cmap-map .cn:hover,.cmap-map .cn.is-sel,.cmap-map .cn.is-up,.cmap-map .cn.is-down { color:var(--ink); }
.cmap-map .cn.is-match { color:var(--accent); }
.cmap-map .cn-dot.st-none { background:var(--surface-2)!important; border-color:var(--ink-3); }
.cmap-map .ce { stroke:var(--line-2); }
.cmap-map .ce-up,.cmap-map .ce-down { stroke:var(--ink); }
.cmap-map .show-all .ce,.cmap-map.show-all .ce { stroke:var(--ink-3); }
.cmap-map .cn:focus-visible { outline-color:var(--accent); }
.cmap-map.has-sel:not(.show-all) .cn:not(.is-sel):not(.is-up):not(.is-down) { opacity:1; }
.cmap-map.is-searching .cn:not(.is-match) { opacity:.5; }
/* Lesson: the title and rail frame one complete learning section. */
body.page-lesson .main { padding:0; }
body.page-lesson .spine { width:286px; height:calc(100dvh - var(--topbar-h)); }
.spine .spine-title { font-size:20px; }
.spine-inner { padding:25px 22px; }
.spine .sp { border-radius:0; font-size:12px; line-height:1.45; padding:12px 0; }
.spine .sp.focus-current { background:var(--surface-2); color:var(--accent); }
.spine .spine-actions .focus-toggle { font-size:11px; padding:6px 8px; }
.page-lesson .lesson-layout { display:block; padding:48px 5vw 32px; margin:0; width:100%; }
.page-lesson .lesson { max-width:960px; padding:0; margin:0 auto; }
.page-lesson .lesson-hero { padding:0 0 28px!important; margin:0 0 28px; border-bottom:1px solid var(--line); }
.page-lesson .lesson-title { font-size:clamp(34px,3.8vw,52px); margin:14px 0 8px; }
.rd-lesson-label { display:block; margin-top:26px; color:var(--ink-3); }
.rd-lesson-meta { font:12px/1.6 var(--mono); color:var(--ink-3); margin:0; }
.page-lesson .hero-facts { display:none; }
.page-lesson .hero-actions { margin-top:22px; }
.page-lesson .hero-actions>a[href='#start'] { display:none; }
.page-lesson .hero-actions .btn { padding:8px 13px; font-size:13px; }
.page-lesson .lesson-summary { font-size:22px; margin:0 0 24px; }
.page-lesson :is(.lesson-start,.lsec,.big-picture,.lesson-end,.mastery-panel,.discussion) { padding-right:0!important; }
.page-lesson .lsec,.page-lesson .lesson-start { padding-top:0; margin-top:0; border-top:0; }
.page-lesson .lsec>.prose,.page-lesson .intro-part>.prose { font-size:21px; line-height:1.75; max-width:850px; }
.page-lesson :is(.lsec,.intro-part,.lesson-start,.lesson-hero)>.mnote { float:none!important; clear:none; width:auto; margin:26px 0!important; }
.page-lesson .lsec>.widget { margin-right:0!important; }
.page-lesson .sec-head { grid-template-columns:34px 1fr; gap:12px; margin-bottom:28px; }
.page-lesson .sec-head h2 { font-size:30px; line-height:1.2; }
.page-lesson .sec-num { font:13px var(--mono); padding-top:8px; }
.page-lesson .widget { border-radius:3px; margin:32px 0; padding:24px; background-color:var(--surface-2); }
.page-lesson .widget-head { background:var(--surface); margin:0 0 18px; padding:15px 18px; border:1px solid var(--line); border-radius:3px; }
.code-cell,.qcard,.checkpoint,.quiz,.predict,.stepper,.compare,.compare-card,.explain,.explainer { border-radius:3px; box-shadow:none; }
.page-lesson .code-cell { margin:32px 0; border-color:var(--code-line); }
.code-actions .py-run { background:#ddeaab; color:#202d28; border-color:#ddeaab; }
.code-actions .py-run .ic { color:#202d28; }
.code-head { background:var(--code-bg-2); }
.code .c,.code .c1,.code .cm,.code .ch,.code .cs,.hl .c,.hl .c1 { color:#b8c9bb; }
.out-label { color:var(--ink-3); }
.page-lesson .qcard,.page-lesson .checkpoint,.page-lesson .quiz,.page-lesson .predict { padding:26px; margin:30px 0; border:1px solid var(--line); background:var(--surface); }
.page-lesson .qcard.mnote { border:1px solid var(--line); padding:26px; }
.page-lesson .qtext,.page-lesson .cp-qtext,.page-lesson .quiz-qtext { font:21px/1.55 var(--serif); }
.page-lesson .explainer { padding:24px; background:var(--surface-2); margin:26px 0; }
.page-lesson .explainer.mnote { border-top:2px solid var(--accent); padding:20px; }
.page-lesson .explainer .prose { font-size:18px; line-height:1.65; }
.page-lesson .qnote { font:19px/1.6 var(--serif); }
.rd-section-nav { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding:24px 0; margin-top:42px; }
.rd-section-nav .btn { font-size:13px; padding:9px 13px; }
.rd-flow-count { font:11px var(--mono); color:var(--ink-3); margin-right:auto; }
.rd-flow-whole { flex-basis:100%; width:fit-content; border:0; padding:6px 0; background:none; color:var(--ink-3); font:12px var(--font); text-decoration:underline; cursor:pointer; text-align:left; }
body.focus-mode .rd-section-nav { position:static; }
body.focus-mode .lesson-layout { padding:36px 28px 80px; }
body.focus-mode .lesson { max-width:850px; }
body.focus-mode .lesson-hero { display:block; }
body.focus-mode .spine,body.focus-mode .topbar,body.focus-mode .site-foot { display:none; }
body.page-lesson .site-foot { margin:40px 5vw 0; }
@media (max-width:1180px) {
 .rd-topbar { gap:20px; padding:0 3vw; }
 .rd-nav { gap:20px; margin-left:0; }
 .rd-tools { gap:12px; }
 .rd-tools .search-btn kbd { display:none; }
 .rd-hero { gap:30px; }
 .rd-hero h1 { font-size:56px; }
 .rd-hero h1 em { white-space:normal; }
 .rd-dashboard .net-head { display:block; }
 .rd-dashboard .net-legend { margin-top:16px; }
}
@media (max-width:980px) {
 body:not(.page-lesson) .main { padding:42px 5vw 0; }
 .rd-tools .search-btn { padding:7px; border:0; }
 .rd-tools .search-btn span { display:none; }
 .rd-guide { display:none; }
 .rd-hero { grid-template-columns:1fr; padding:20px 0 64px; gap:44px; }
 .rd-hero h1 { font-size:clamp(44px,7vw,62px); }
 .rd-hero h1 em { white-space:nowrap; }
 .rd-representation { max-width:660px; width:100%; }
 .rd-six { grid-template-columns:repeat(3,1fr); gap:26px; }
 .rd-path { grid-template-columns:1fr 1fr; }
 .rd-path-card:nth-child(3) { border-left:0; }
 .rd-path-card:nth-child(n+3) { border-top:1px solid var(--line); }
 .rd-path p { min-height:0; }
 .rd-dashboard .t-week { grid-template-columns:1fr 1fr; }
 .rd-dashboard .home-cols { grid-template-columns:1fr; }
 .rd-curriculum-row { grid-template-columns:65px 1fr; gap:22px; }
 .rd-curriculum-row>.btn { grid-column:2; justify-self:start; }
 .rd-topbar .brand-text strong { font-size:16px; }
 body.page-lesson .spine { width:100%; max-width:none; height:78dvh; }
 .page-lesson .lesson-layout { padding:38px 5vw 85px; }
 .m-hero { grid-template-columns:70px 1fr; gap:24px; }
 .m-prog { grid-column:2; }
 .m-row { grid-template-columns:1fr; gap:20px; }
}
@media (max-width:720px) {
 :root { --topbar-h:68px; }
 .rd-topbar { height:68px; padding:0 5vw; gap:12px; }
 .rd-topbar .brand-text { position:static!important; width:auto!important; height:auto!important; clip:auto!important; white-space:normal!important; }
 .rd-topbar .brand-text strong { font-size:16px; }
 .rd-nav { display:none; }
 .rd-tools { gap:3px; }
 .rd-mobile-menu { display:flex; }
 .rd-tools .tb-theme { display:flex; }
 .tabbar { border-radius:0; box-shadow:none; }
 .rd-page-head h1 { font-size:39px; }
 .rd-page-head .lead { font-size:20px; }
 .rd-hero h1 { font-size:clamp(38px,8.5vw,55px); }
 .rd-hero h1 em { white-space:normal; }
 .rd-hero .lead { font-size:21px; }
 .rd-hero-meta { gap:32px; margin-top:32px; }
 .rd-section { margin-bottom:52px; }
 .rd-section-head { display:block; }
 .rd-section-head>p,.rd-section-head>a { display:block; margin-top:20px; }
 .rd-six { grid-template-columns:1fr 1fr; }
 .rd-author,.rd-faq { grid-template-columns:1fr; gap:28px; }
 .rd-author .prose { font-size:20px; }
 .rd-outcomes ol { grid-template-columns:1fr; }
 .rd-final { display:block; padding:28px; }
 .rd-final .btn { margin-top:25px; }
 .rd-representation { padding:20px 16px; box-shadow:8px 8px 0 var(--surface-2); }
 .rd-representation figcaption { font-size:17px; }
 .rd-prediction { gap:8px 14px; }
 .rd-forward { flex-basis:100%; margin-top:6px; padding:6px 0; }
 .rd-rep-head .mono-label { font-size:10px; }
 .rd-dashboard .today { grid-template-columns:1fr; gap:18px; }
 .rd-dashboard .t-card { padding:24px; }
 .rd-dashboard .t-week { grid-column:auto; display:block; }
 .rd-dashboard .t-week>*+* { margin-top:18px; }
 .rd-dashboard .net { padding:24px 18px; }
 .rd-curriculum-row { grid-template-columns:42px 1fr; gap:16px; }
 .rd-curriculum-row .rd-number { font-size:29px; }
 .rd-curriculum-row h2 { font-size:25px; }
 .rd-curriculum-lessons li { align-items:flex-start; gap:9px; }
 .rd-curriculum-lessons .rd-time { display:none; }
 .rd-reference-grid { grid-template-columns:1fr; }
 .rd-reference-grid>a { padding:28px; }
 .rd-reference-grid>a+a { border-left:0; border-top:1px solid var(--line); }
 .rd-reference-tools { gap:16px; }
 .rd-footer { margin-top:52px; padding-bottom:90px; }
 .rd-footer nav { display:grid; grid-template-columns:1fr 1fr; }
 .rd-path-card { padding:22px 16px; }
 .rd-path h3 { font-size:19px; }
 .rd-path p { font-size:16px; }
 .rd-path .mono-label { font-size:10px; }
 .page-lesson .lesson-title { font-size:36px; }
 .page-lesson .lesson-hero { margin-bottom:26px; }
 .page-lesson .sec-head { grid-template-columns:26px 1fr; gap:10px; }
 .page-lesson .sec-head h2 { font-size:26px; }
 .page-lesson .lsec>.prose,.page-lesson .intro-part>.prose { font-size:19px; }
 .page-lesson .widget { padding:15px; }
 .page-lesson .qcard,.page-lesson .checkpoint,.page-lesson .quiz,.page-lesson .predict { padding:20px; }
 .rd-section-nav { display:grid; grid-template-columns:1fr 1fr; }
 .rd-flow-count { grid-column:1 / -1; grid-row:1; }
 .rd-flow-whole { grid-column:1 / -1; }
 .rd-section-nav [data-flow-complete] { grid-column:1 / -1; grid-row:3; }
 .page-lesson .site-foot { padding-bottom:95px; }
 .gl-def { font-size:18px; }
 .gl-item dt { font-size:21px; }
 .log-head h1,.gl-head h1,.cmap-head h1,.about h1,.plain-hero h1 { font-size:38px; }
 .m-hero { grid-template-columns:1fr; }
 .m-hero .m-num { font-size:46px; }
 .m-prog { grid-column:auto; }
}
@media print {
 .rd-section-nav,.rd-topbar,.rd-nav,.rd-tools { display:none!important; }
 body.page-lesson .main { padding:0; }
 .focus-hidden { display:block!important; }
}
.rd-dashboard .net-head h2 { color:var(--ink); }
.rd-dashboard .net-svg .ne { stroke:var(--line-2); }
.rd-dashboard .net-svg .nn.st-started { fill:var(--a1); stroke:var(--a1); }
.rd-dashboard .net-svg .nn.st-practised { fill:var(--a2); stroke:var(--a2); }
.rd-dashboard .net-svg .nn.st-mastered { fill:var(--a4); stroke:var(--ink); filter:none; }
.rd-dashboard .net-svg .nn-g a:hover .nn { stroke:var(--ink); }
.net-pill rect,.net-here { filter:none; }
.sk2 { border-radius:3px; }
.sk2.s2,.sk2.s3 { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-top:4px solid var(--a2); }
.sk2.s3 { border-top-color:var(--a3); }
@media (max-width:980px) {
 .lesson-bar { left:0; right:0; bottom:0; border-radius:0; box-shadow:none; border-top:1px solid var(--line); background:var(--bg); color:var(--ink); }
 .lesson-bar .icon-btn { color:var(--ink); }
 .spine { border-radius:0; }
}
.rd-number { color:var(--ink-3); }
body .sidebar { visibility:hidden; }
body.nav-open .sidebar { visibility:visible; }
.m-hero .m-num { color:var(--ink-3); }
.code-cell .code-meta,.code-cell .code-lang { color:#b8c9bb; }
@media (max-width:720px) { .rd-tools .rd-tutor { display:none; } }
/* Worked visual sequences for Modules 5–6. Discrete frames, paused on arrival. */
.concept-motion { color: var(--ink); width: 100%; min-width: 0; }
.cm-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .65rem; }
.cm-controls button { font: inherit; font-size: .85rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; min-height: 44px; }
.cm-controls button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.cm-controls button:disabled { opacity: .45; cursor: default; }
.cm-controls button:focus-visible { outline: 3px solid var(--c0); outline-offset: 3px; }
.cm-count { font: .8rem 'JetBrains Mono', monospace; margin: .5rem 0; }
.cm-scene, .cm-path { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; width: 100%; }
.cm-panel { flex: 1 1 170px; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.cm-panel h4, .cm-stage h4 { font: 600 .85rem/1.4 Archivo, sans-serif; margin: 0 0 .7rem; }
.cm-grid { display: grid; grid-template-columns: repeat(var(--cm-cols), minmax(0,1fr)); gap: 3px; max-width: 280px; margin: auto; }
.cm-vector { display: flex; flex-wrap: wrap; gap: 4px; }
.cm-tile { display: flex; align-items: center; justify-content: center; min-height: 32px; padding: .25rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; font: .85rem 'JetBrains Mono', monospace; }
.cm-vector .cm-tile { min-width: 38px; }
.cm-tile.is-current { color: var(--c0); border: 2px solid var(--c0); font-weight: 700; }
.cm-arrow { color: var(--ink-2); font-size: 1.5rem; }
.cm-stage { flex: 1 1 130px; min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow-wrap: anywhere; }
.cm-stage.is-current { border: 2px solid var(--c0); box-shadow: inset 0 3px var(--c0); }
.cm-stage p { font: .85rem/1.7 'JetBrains Mono', monospace; margin: 0; }
.cm-narration { font: 1rem/1.65 'Source Serif 4', serif; min-height: 5em; margin: 1rem 0 0; }
.cm-table { width: 100%; font: .8rem/1.5 'JetBrains Mono', monospace; border-collapse: collapse; }
.cm-table th, .cm-table td { padding: .4rem .2rem; text-align: left; border-bottom: 1px solid var(--line); white-space: normal; }
.cm-table .is-current { color: var(--c0); font-weight: bold; }
.cm-result { font: 1.25rem/1.5 'JetBrains Mono', monospace; overflow-wrap: anywhere; }
@media (max-width: 600px) { .cm-scene, .cm-path { flex-direction: column; align-items: stretch; } .cm-panel,.cm-stage { flex-basis: auto; } .cm-arrow { align-self: center; transform: rotate(90deg); line-height: 1; } .cm-controls button { flex: 1 1 40%; } }
/* Read dense teaching figures at their full detail, including on phones. */
.lightbox { grid-template-rows: auto auto minmax(0,1fr); place-items: stretch; gap: 8px; padding: 16px; cursor: default; }
.lb-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.lb-toolbar button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #89978f; border-radius: 6px; background: #23382d; color: #fff; font: 600 1rem Archivo,sans-serif; cursor: pointer; }
.lb-toolbar button:disabled { opacity: .45; cursor: default; }
.lb-toolbar button:focus-visible, .lb-viewport:focus-visible, img.zoomable:focus-visible { outline: 3px solid #91bcff; outline-offset: 3px; }
.lightbox .lb-toolbar .icon-btn { position: static; background: #23382d; }
.lb-toolbar output { color: #fff; font: .8rem 'JetBrains Mono',monospace; min-width: 105px; }
.lb-hint { color: #e7efe8; text-align: center; font: .8rem/1.5 Archivo,sans-serif; margin: 0; }
.lb-viewport { overflow: auto; overscroll-behavior: contain; min-height: 0; width: 100%; padding: 12px; border-radius: 8px; }
.lightbox .lb-viewport img { display: block; max-width: none; max-height: none; height: auto; margin: 0 auto; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } }