/* ==========================================================================
   stay add. — design system, shared by every subject
   The classroom wall: warm paper, ink, and the periodic-table poster. Every
   syllabus topic is an element tile; subjects are four printed inks. One
   vermilion "marking pen" accent carries the primary action and the current
   place. Colour inside figures still means something (a reactant, energy,
   a velocity component…). Every page loads this file; subject pages add
   their own css/ on top.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;   /* figure annotations only */
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* light: paper */
  --bg: #f4f2ec;
  --bg-2: #ebe8e0;
  --surface: #faf9f5;
  --raised: #ffffff;
  --ink: #16150f;
  --text: #2b2923;     /* long-form reading text */
  --ink-2: #48453d;
  --ink-3: #6c685e;    /* 5.1:1 on --bg */
  --ink-4: #a29d91;
  --line: #e0dcd2;
  --line-2: #cbc6ba;
  --grid: #e9e5dc;

  /* the marking pen: primary action, the current place, focus */
  --accent: #e0461f;
  --accent-2: #c93a15;
  --accent-ink: #b83512;   /* accent as text on paper, 5.6:1 */
  --on-accent: #ffffff;
  --lime: var(--accent); --lime-2: var(--accent-2); --on-lime: var(--on-accent);   /* old names */

  /* subject inks: tile fills, always with --tile-ink text on them */
  --chem: #f2bd4b;
  --phys: #8fb5f0;
  --bio: #94cf9a;
  --cs: #c4aef2;
  --math: #f5a98f;
  --tile-ink: #16150f;
  /* the same inks dark enough to be text on paper */
  --chem-ink: #8a5d00;
  --phys-ink: #2b5bb3;
  --bio-ink: #2c7a3c;
  --cs-ink: #6a48c2;

  --blue: #2f5fc4;
  --amber: #b06c17;
  --teal: #1d7a6d;
  --red: #b4473a;
  --green: #3c7a37;
  --violet: #6650bf;
  --rose: #a34a75;

  --shadow: 0 1px 2px rgba(22, 21, 15, .05), 0 8px 24px -12px rgba(22, 21, 15, .12);
  --shadow-lg: 0 24px 64px -24px rgba(22, 21, 15, .28);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .16s;
  --t-med: .22s;
  --header-h: 64px;
  --subj: var(--accent);       /* the subject you are in (set below), for marks and highlights */
  --subj-ink: var(--accent-ink);
  color-scheme: light;
}

/* dark: ink — the whole page in the dark theme, and .on-dark bands in either */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131310; --bg-2: #1a1a16; --surface: #1d1c18; --raised: #25241f;
    --ink: #f1eee6; --text: #e2dfd6; --ink-2: #c3bfb4; --ink-3: #9a968c; --ink-4: #66635b;
    --line: #2d2c27; --line-2: #3f3d37; --grid: #201f1b;
    --accent: #ff6b45; --accent-2: #ff8564; --accent-ink: #ff8a6a; --on-accent: #16150f;
    --chem-ink: var(--chem); --phys-ink: var(--phys); --bio-ink: var(--bio); --cs-ink: var(--cs);
    --blue: #86a8f2; --amber: #e3a755; --teal: #5dbdab; --red: #e47d6e; --green: #8fc27e; --violet: #ab98f0; --rose: #da8db4;
    --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; --shadow-lg: 0 24px 64px -24px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], .on-dark {
  --bg: #131310; --bg-2: #1a1a16; --surface: #1d1c18; --raised: #25241f;
  --ink: #f1eee6; --text: #e2dfd6; --ink-2: #c3bfb4; --ink-3: #9a968c; --ink-4: #66635b;
  --line: #2d2c27; --line-2: #3f3d37; --grid: #201f1b;
  --accent: #ff6b45; --accent-2: #ff8564; --accent-ink: #ff8a6a; --on-accent: #16150f;
  --chem-ink: var(--chem); --phys-ink: var(--phys); --bio-ink: var(--bio); --cs-ink: var(--cs);
  --blue: #86a8f2; --amber: #e3a755; --teal: #5dbdab; --red: #e47d6e; --green: #8fc27e; --violet: #ab98f0; --rose: #da8db4;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; --shadow-lg: 0 24px 64px -24px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* the subject you are in: its ink marks the current place and the headline highlight */
[data-subject="chemistry"] { --subj: var(--chem); --subj-ink: var(--chem-ink); }
[data-subject="physics"] { --subj: var(--phys); --subj-ink: var(--phys-ink); }
[data-subject="biology"] { --subj: var(--bio); --subj-ink: var(--bio-ink); }
[data-subject="computer-science"] { --subj: var(--cs); --subj-ink: var(--cs-ink); }

/* meaning-bound colour roles — chemistry
   (declared on .on-dark too, so inside a dark band they pick up the dark palette) */
:root, .on-dark {
  --c-a: var(--violet);        /* reactant A */
  --c-b: var(--teal);          /* reactant B */
  --c-energy: var(--amber);    /* energy, Eₐ, successful collisions */
  --c-temp: var(--red);        /* temperature */
  --c-conc: var(--violet);     /* concentration (of A) */
  --c-press: var(--blue);      /* pressure */
  --c-cat: var(--rose);        /* catalyst */
  --c-cation: var(--red);      /* positive ions */
  --c-anion: var(--blue);      /* negative ions */
  --c-electron: var(--amber);  /* electrons in the external circuit */
  --ok: var(--green);
  --c-chain: var(--blue);      /* organic: the carbon chain → the prefix */
  --c-group: var(--rose);      /* organic: the functional group → the suffix */
  --c-alcohol: var(--teal);    /* organic: the part of an ester from the alcohol */
  --c-sub: var(--violet);      /* organic: side chains → the prefixes */
  --c-chem: var(--amber);      /* the subject accent in the topic lessons */

  /* physics */
  --c-mech: var(--blue);
  --c-thermal: var(--amber);
  --c-waves: var(--teal);
  --c-elec: var(--violet);
  --c-nuclear: var(--green);
  --c-space: var(--rose);
  --c-ray: var(--amber);
  --c-vx: var(--teal);
  --c-vy: var(--red);
  --c-water: var(--blue);
  --c-glass: var(--teal);
  --c-diamond: var(--violet);

  /* biology */
  --c-bio: var(--green);       /* the subject accent */
  --c-enzyme: var(--teal);     /* enzyme and its active site */
  --c-substrate: var(--amber); /* substrate */
  --c-product: var(--violet);  /* products */
  --c-denat: var(--red);       /* denatured: the active site has lost its shape */
  --c-ph: var(--blue);         /* pH */
  --c-par1: var(--blue);       /* chromosomes from parent 1 (or the mother) */
  --c-par2: var(--rose);       /* chromosomes from parent 2 (or the father) */
  --c-fsh: var(--teal);        /* hormones of the menstrual cycle */
  --c-lh: var(--amber);
  --c-oes: var(--rose);
  --c-prog: var(--violet);

  /* physics lessons */
  --c-phys: var(--blue);       /* the subject accent in the lessons */

  /* computer science */
  --c-cs: var(--violet);       /* the subject accent */
  --c-bit: var(--teal);        /* a 1 bit, a TRUE signal */
  --c-off: var(--ink-4);       /* a 0 bit, a FALSE signal */
  --c-data: var(--blue);       /* data moving: packets, buses */
  --c-addr: var(--amber);      /* addresses, the address bus */
  --c-ctrl: var(--violet);     /* control signals */
  --c-err: var(--red);         /* errors, flipped bits */
}

.on-dark { color: var(--ink); background: var(--bg); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01";
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }   /* sections focused by a link or skip link */
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--bg); background: var(--ink); border-radius: var(--radius-sm); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .wrap { padding: 0 16px; } }

/* ---------- Type roles ---------- */
h1, h2, h3, .display { font-family: var(--font-display); font-optical-sizing: auto; }
.display { font-weight: 500; letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance; }
/* the one marked word in a headline: upright, under a highlighter stroke in the subject's ink */
.display em, h1 em, h2 em {
  font-style: normal; font-weight: inherit; letter-spacing: inherit;
  padding: 0 .06em; margin: 0 -.06em;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--subj) 55%, transparent) 58%, color-mix(in srgb, var(--subj) 55%, transparent) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
h3 em { font-style: normal; }
.eyebrow { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0; color: var(--ink-3); }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
i[data-icon] { display: inline-flex; font-style: normal; }

/* ---------- The element tile (the signature) ----------
   number top-left, a two-letter symbol, a name below. Fill = a subject ink. */
.tile {
  --t: var(--subj);
  position: relative; display: grid; grid-template-rows: auto 1fr auto; align-content: space-between;
  aspect-ratio: 1; padding: 6px 7px 6px; border-radius: var(--radius-xs);
  background: var(--t); color: var(--tile-ink); line-height: 1; user-select: none;
}
.tile-n { font: 500 10px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.tile-s { align-self: center; font: 600 22px/1 var(--font-display); letter-spacing: -0.03em; }
.tile-l { font: 500 10px/1.15 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile[data-s="chemistry"] { --t: var(--chem); }
.tile[data-s="physics"] { --t: var(--phys); }
.tile[data-s="biology"] { --t: var(--bio); }
.tile[data-s="computer-science"] { --t: var(--cs); }

/* ---------- Navigation (rendered by core.js) ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.nav-in { display: flex; align-items: center; height: var(--header-h); gap: 32px; }
.brand { display: flex; flex: none; align-items: center; gap: 12px; white-space: nowrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 19px/1 var(--font-display); letter-spacing: -0.03em; white-space: nowrap; color: var(--ink); }
.logo-mark { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--ink); color: var(--bg); font: 600 14px/1 var(--font-display); letter-spacing: -0.03em; transition: transform var(--t-fast) var(--ease); }
.logo-mark::after { content: "+"; position: absolute; top: 2px; left: 4px; font: 500 8px/1 var(--font-mono); color: var(--accent); }
.logo:hover .logo-mark { transform: rotate(-6deg); }
.logo b { font-weight: inherit; color: var(--accent); }
.brand-sub { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--subj) 22%, transparent); font-size: 13.5px; font-weight: 500; color: var(--ink); transition: background-color var(--t-fast); }
.brand-sub::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--subj); }
.brand-sub:hover { background: color-mix(in srgb, var(--subj) 36%, transparent); }
@media (max-width: 480px) { .brand-sub { display: none; } }
.links { display: flex; gap: 4px; font-size: 14px; margin-left: auto; }
.links a { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 10px; border-radius: var(--radius-sm); white-space: nowrap; color: var(--ink-2); transition: color var(--t-fast), background-color var(--t-fast); }
.links a:hover { color: var(--ink); background: var(--bg-2); }
.links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.nav-r { margin-left: 8px; display: flex; align-items: center; gap: 8px; }
.nav-in > .brand + .nav-r { margin-left: auto; }

.search { position: relative; }
.search-field { display: flex; align-items: center; gap: 8px; width: 216px; height: 36px; padding: 0 8px 0 12px; font-size: 13.5px; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: text; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.search-field:hover { border-color: var(--line-2); }
.search-field:focus-within { border-color: var(--ink-3); background: var(--raised); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 6%, transparent); }
.search-field .ic { width: 15px; height: 15px; }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13.5px; color: var(--ink); }
.search-field input::placeholder { color: var(--ink-3); }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field kbd { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font: 11px var(--font-mono); color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; }
.search-results { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 380px; overflow: auto; padding: 6px; display: none; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 60; }
.search.is-open .search-results { display: block; animation: pop-in var(--t-med) var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.search-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); transition: background-color var(--t-fast); }
.search-item:hover, .search-item.is-active { background: var(--bg-2); }
.search-item b { display: block; font-size: 14px; font-weight: 500; }
.search-item small { font-size: 12.5px; color: var(--ink-3); }
.search-empty { padding: 12px; color: var(--ink-3); font-size: 13.5px; }
@media (max-width: 1320px) { .nav-in { gap: 24px; } }
@media (max-width: 1180px) { .search-field { width: 160px; } .links a { padding: 0 8px; } }
@media (max-width: 1040px) { .search-field kbd { display: none; } .search-field { width: 132px; } .links { font-size: 13.5px; } }
/* below 1100px the links fold into the menu and the search into an icon; tapping it opens a full-width bar under the header */
@media (max-width: 1100px) {
  .links { display: none; }
  .nav-r { margin-left: auto; }
  .search { position: static; }
  .search-field { width: 36px; height: 36px; padding: 0; justify-content: center; color: var(--ink-2); background: none; border-color: transparent; cursor: pointer; }
  .search-field:hover { background: var(--bg-2); border-color: transparent; }
  .search-field .ic { width: 17px; height: 17px; }
  .search-field input { flex: 0; width: 0; }
  .search.is-active .search-field { position: fixed; top: calc(var(--header-h) + 8px); left: 16px; right: 16px; width: auto; height: 48px; padding: 0 14px; justify-content: flex-start; gap: 10px; background: var(--raised); border-color: var(--line-2); box-shadow: var(--shadow-lg); cursor: text; z-index: 61; }
  .search.is-active .search-field input { flex: 1; font-size: 16px; }   /* 16px keeps iOS from zooming in */
  .search-results { position: fixed; top: calc(var(--header-h) + 64px); left: 16px; right: 16px; width: auto; max-height: calc(100vh - var(--header-h) - 84px); }
  .search-item { padding: 12px; }
}

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font: 500 15px/1 var(--font-sans); white-space: nowrap; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform .1s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-primary:hover { background: var(--accent-2); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: color-mix(in srgb, var(--ink) 84%, var(--bg)); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink-3); background: var(--raised); }
.btn-ghost[aria-pressed="true"] { border-color: var(--ink); background: var(--bg-2); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: var(--radius-sm); gap: 8px; }
.btn-lg { height: 52px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.btn .arr { display: inline-block; transition: transform var(--t-med) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn .ic { width: 15px; height: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-2); transition: text-decoration-color var(--t-fast), color var(--t-fast); }
.text-link:hover { text-decoration-color: var(--accent); }
.text-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-3); transition: color var(--t-fast); }
.text-btn:hover { color: var(--ink); }
.text-btn .ic { width: 14px; height: 14px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--ink-2); transition: background-color var(--t-fast), color var(--t-fast); }
.icon-btn:hover { color: var(--ink); background: var(--bg-2); }
.icon-btn .ic { width: 17px; height: 17px; }

/* ---------- Status, tags & progress ---------- */
.status { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc, var(--ok)); }
.status.paused { --sc: transparent; }
.status.paused::before { border: 1px solid var(--ink-4); }
.tag { font: 500 11px var(--font-mono); padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--ink-2); white-space: nowrap; }
.steps { display: flex; gap: 3px; }
.steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.steps i.done { background: var(--tc, var(--ink)); }
.steps i.now { background: color-mix(in srgb, var(--tc, var(--ink)) 45%, var(--line)); }

/* ---------- Form controls ---------- */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; --pct: var(--p, 50%); --rc: var(--ink); }   /* chemistry sets --pct, physics sets --p */
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--rc) var(--pct), var(--line-2) var(--pct)); }
.range::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--rc) var(--pct), var(--line-2) var(--pct)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--raised); border: 2px solid var(--rc); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); transition: transform var(--t-fast) var(--ease); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--raised); border: 2px solid var(--rc); }
.range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.range:active::-webkit-slider-thumb { transform: scale(1.18); }
.range:focus-visible { outline-offset: 4px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; gap: 3px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.seg button { padding: 6px 8px 5px; border-radius: 7px; font-size: 13px; color: var(--ink-2); line-height: 1.25; transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.seg button small { display: block; font: 11px var(--font-mono); color: var(--ink-3); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg button.is-active { background: var(--raised); color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .08); }
.switch { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: var(--line-2); transition: background-color var(--t-med); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--t-med) var(--ease); }
.switch[aria-checked="true"] { background: var(--sw, var(--ink)); }
.switch[aria-checked="true"]::after { transform: translateX(14px); }

/* ---------- Scientific figures ----------
   Shared vocabulary for every SVG plot so axes and ticks look identical site-wide. */
.fig text { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); }
.fig .ax { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.fig .tk { stroke: var(--ink-3); stroke-width: 1; }
.fig .tk-m { stroke: var(--ink-4); stroke-width: 1; }
.fig .gl { stroke: var(--grid); stroke-width: 1; fill: none; }
.fig .guide { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.fig .ink { fill: var(--ink); }
.fig .ink-s { stroke: var(--ink); }
.fig .soft { fill: var(--ink-2); }
.fig .bgfill { fill: var(--surface); }
.fig .ser { font-family: var(--font-serif); font-style: italic; font-size: 15px; fill: var(--ink-2); }
.fig .lbl-ink { fill: var(--ink-2); }
.fig .plot { fill: none; stroke: var(--tc, var(--ink)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fig .plot-2 { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fig .area { fill: color-mix(in srgb, var(--tc, var(--ink)) 10%, transparent); }
.fig .pt { fill: var(--surface); stroke: var(--tc, var(--ink)); stroke-width: 1.5; }
.fig .p-a { fill: var(--c-a); }
.fig .p-b { fill: var(--c-b); }
.fig .ea { stroke: var(--c-energy); stroke-width: 1.5; }
.fig .t-ea { fill: var(--c-energy); font-weight: 500; }

/* ---------- Theme toggle ---------- */
.theme .sun { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Quiz (shared) ---------- */
.quiz { display: grid; gap: 16px; }
.q { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.q-num { font: 500 12px var(--font-mono); color: var(--ink-3); }
.q h3 { font: 500 22px/1.3 var(--font-display); letter-spacing: -0.02em; margin: 8px 0 16px; }
.q-options { display: grid; gap: 8px; }
.q-options button { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--raised); font-size: 15px; transition: border-color var(--t-fast), background-color var(--t-fast), opacity var(--t-fast); }
.q-options button::before { content: attr(data-key); flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 7px; font: 500 12px var(--font-mono); color: var(--ink-3); transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.q-options button:not(:disabled):hover { border-color: var(--ink-3); }
.q-options button:not(:disabled):hover::before { border-color: var(--ink); color: var(--ink); }
.q-options button:disabled { cursor: default; }
.q-options button.is-correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--raised)); }
.q-options button.is-correct::before { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.q-options button.is-wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--raised)); }
.q-options button.is-wrong::before { border-color: var(--red); color: var(--red); }
.q.is-answered .q-options button:not(.is-correct):not(.is-wrong) { opacity: .5; }
.q-why { display: none; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 14px; color: var(--ink-2); }
.q-why b { color: var(--ink); font-weight: 600; }
.q.is-answered .q-why { display: block; }
.quiz-score { margin-top: 20px; font-size: 14px; color: var(--ink-2); }
.quiz-score b { font: 500 15px var(--font-mono); color: var(--ink); }

/* ---------- Footer ---------- */
.footer { padding: 48px 0 40px; border-top: 1px solid var(--line); background: var(--bg); }
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: start; font-size: 14px; color: var(--ink-3); }
.foot-brand { display: grid; gap: 12px; justify-items: start; }
.foot-brand p { max-width: 34em; font-size: 13.5px; line-height: 1.55; }
.foot nav { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 8px 40px; }
.foot nav a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); transition: color var(--t-fast); }
.foot nav a i { width: 8px; height: 8px; border-radius: 2px; background: var(--t, var(--ink-4)); }
.foot nav a:hover { color: var(--ink); }
.foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--line); font: 12px var(--font-mono); color: var(--ink-3); }
@media (max-width: 720px) {
  .footer { padding: 40px 0 32px; }
  .foot { grid-template-columns: 1fr; }
  .foot nav { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
}

/* ---------- Smooth-scroll switch (bottom-right corner, drawn by fx.js) ---------- */
.smooth-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; background: var(--raised); color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); font: 500 12px var(--font-mono); opacity: .9; transition: opacity var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.smooth-toggle:hover, .smooth-toggle:focus-visible { opacity: 1; color: var(--ink); border-color: var(--line-2); }
.smooth-toggle b { font-weight: 500; color: var(--ink-3); }
.smooth-toggle-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink-3); transition: background-color var(--t-fast), border-color var(--t-fast); }
.smooth-toggle[aria-pressed="true"] b { color: var(--ink); }
.smooth-toggle[aria-pressed="true"] .smooth-toggle-dot { background: var(--accent); border-color: var(--accent); }
@media (hover: none) { .smooth-toggle { display: none; } }
@media print { .smooth-toggle { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* search results: the subject as a small tile */
.search-sym { width: 28px; padding: 0; place-items: center; grid-template-rows: 1fr; border-radius: 5px; }
.search-sym .tile-s { font-size: 12px; }