/* Mathlab: the shared design system.
   Same family as "Enigma & Lorenz": a museum-style long read on cool paper and ink, a 40rem reading column,
   notes in the right margin, live figures ("instruments") on their own panels and a rail of chapters on wide screens.
   New here: every topic owns one accent colour (--accent), set by data-topic on <body> or on any card,
   plus a second colour (--alt) for the "other thing" in a comparison. Red (--bad) is kept for mistakes only. */
:root {
  --paper: #ECEEEA;
  --panel: #F6F7F4;
  --inset: #E1E4DE;
  --ink: #161B22;
  --ink-2: #4A525E;
  --ink-3: #87909A;
  --rule: #CBD0C9;
  --grid: rgba(22, 27, 34, .055);

  --c-amber: #D08A0C;   --c-amber-ink: #8F5A00;
  --c-teal: #12806F;    --c-teal-ink: #0B5F54;
  --c-magenta: #B53C8B; --c-magenta-ink: #8E2569;
  --c-blue: #2F64CB;    --c-blue-ink: #234C9C;
  --c-green: #3E8B2E;   --c-green-ink: #2C6820;
  --c-violet: #6A50CF;  --c-violet-ink: #4F38A8;
  --bad: #C0392B;

  --accent: var(--c-amber);
  --accent-ink: var(--c-amber-ink);
  --alt: var(--c-teal);
  --alt-ink: var(--c-teal-ink);

  --shadow: 0 1px 0 rgba(22, 27, 34, .04), 0 14px 34px -22px rgba(22, 27, 34, .45);
  --f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-label: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --measure: 40rem;
  --wide: 66rem;
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1217; --panel: #151920; --inset: #1D222A;
    --ink: #E6E8EB; --ink-2: #A5ACB6; --ink-3: #6A727E; --rule: #2A313A; --grid: rgba(230, 232, 235, .045);
    --c-amber: #FFB53A;   --c-amber-ink: #FFC45F;
    --c-teal: #3FC7B3;    --c-teal-ink: #66D7C6;
    --c-magenta: #EE7BC6; --c-magenta-ink: #F59AD6;
    --c-blue: #6E9BFF;    --c-blue-ink: #96B6FF;
    --c-green: #7FCB5A;   --c-green-ink: #9DDA7E;
    --c-violet: #A592FF;  --c-violet-ink: #BDAFFF;
    --bad: #FF7564;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 16px 36px -24px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1217; --panel: #151920; --inset: #1D222A;
  --ink: #E6E8EB; --ink-2: #A5ACB6; --ink-3: #6A727E; --rule: #2A313A; --grid: rgba(230, 232, 235, .045);
  --c-amber: #FFB53A;   --c-amber-ink: #FFC45F;
  --c-teal: #3FC7B3;    --c-teal-ink: #66D7C6;
  --c-magenta: #EE7BC6; --c-magenta-ink: #F59AD6;
  --c-blue: #6E9BFF;    --c-blue-ink: #96B6FF;
  --c-green: #7FCB5A;   --c-green-ink: #9DDA7E;
  --c-violet: #A592FF;  --c-violet-ink: #BDAFFF;
  --bad: #FF7564;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 16px 36px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* topic colours: on <body> for a whole page, or on a single card */
[data-topic="numbers"]  { --accent: var(--c-amber);   --accent-ink: var(--c-amber-ink);   --alt: var(--c-teal);  --alt-ink: var(--c-teal-ink); }
[data-topic="shapes"]   { --accent: var(--c-teal);    --accent-ink: var(--c-teal-ink);    --alt: var(--c-amber); --alt-ink: var(--c-amber-ink); }
[data-topic="chance"]   { --accent: var(--c-magenta); --accent-ink: var(--c-magenta-ink); --alt: var(--c-teal);  --alt-ink: var(--c-teal-ink); }
[data-topic="puzzles"]  { --accent: var(--c-blue);    --accent-ink: var(--c-blue-ink);    --alt: var(--c-amber); --alt-ink: var(--c-amber-ink); }
[data-topic="motion"]   { --accent: var(--c-green);   --accent-ink: var(--c-green-ink);   --alt: var(--c-violet); --alt-ink: var(--c-violet-ink); }
[data-topic="infinity"] { --accent: var(--c-violet);  --accent-ink: var(--c-violet-ink);  --alt: var(--c-amber); --alt-ink: var(--c-amber-ink); }
:root, [data-topic] {
  --accent-wash: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --alt-wash: color-mix(in srgb, var(--alt) 15%, transparent);
  --bad-wash: color-mix(in srgb, var(--bad) 13%, transparent);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 1.1875rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  padding-inline: 16px;
  text-rendering: optimizeLegibility;
}
@media (min-width: 720px) { body { padding-inline: 32px; } }
::selection { background: var(--accent-wash); }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .18em; }
em, i { font-style: italic; }
sub, sup { font-size: .68em; line-height: 0; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
.lbl, .eyebrow {
  font-family: var(--f-label); font-weight: 600; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); line-height: 1.2;
}
.lbl var, .eyebrow var { text-transform: none; letter-spacing: 0; font-size: 1.2em; }
.lbl sub, .lbl sup { text-transform: none; }
.mono { font-family: var(--f-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; pointer-events: none; }
.progress span { display: block; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.topbar {
  max-width: 81rem; margin: 0 auto; display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0 .9rem; border-bottom: 1px solid var(--rule); min-height: 3.6rem;
}
.wordmark {
  font-family: var(--f-display); font-size: 1.45rem; line-height: 1; text-decoration: none; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
}
.wordmark em { color: var(--accent-ink); font-weight: 400; }
.wordmark svg { width: 1.45rem; height: 1.45rem; flex: none; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: .2rem; min-width: 0; }
.topnav a, .topnav button.tn {
  font-family: var(--f-label); font-size: .95rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding: .35rem .55rem; border-radius: 4px; display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; cursor: pointer; line-height: 1.2;
}
.topnav a:hover, .topnav button.tn:hover { color: var(--ink); background: var(--inset); }
.topnav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 4px 4px 0 0; }
.topnav .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); flex: none; }
.topnav .topic-links { display: none; gap: .1rem; }
@media (min-width: 1080px) { .topnav .topic-links { display: flex; } .topnav .all-topics { display: none; } }
.topnav .sep { width: 1px; height: 1.2rem; background: var(--rule); margin: 0 .35rem; }
.theme-btn { width: 2.1rem; height: 2.1rem; justify-content: center; padding: 0 !important; }
.theme-btn svg { width: 1.1rem; height: 1.1rem; }

/* ---------- page shell ---------- */
.shell { max-width: 81rem; margin-inline: auto; }
.rail { display: none; }
main { min-width: 0; max-width: var(--wide); }
.hub main { max-width: none; }
@media (min-width: 1280px) {
  .shell.with-rail { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: 3rem; }
  .rail { display: block; position: sticky; align-self: start; top: calc(env(safe-area-inset-top, 0px) + 1.6rem); padding-top: 4.6rem; }
}
.rail-title { display: flex; align-items: center; gap: .5rem; text-decoration: none; font-family: var(--f-display); font-size: 1.3rem; line-height: 1.2; margin-bottom: .2rem; }
.rail-title .rn { font-style: italic; color: var(--accent-ink); }
.rail-sub { font-size: .9rem; color: var(--ink-3); font-style: italic; margin: 0 0 1.2rem; line-height: 1.35; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; border-left: 1px solid var(--rule); }
.rail ol a {
  display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline; row-gap: .2rem;
  padding: .4rem 0 .4rem .8rem; margin-left: -1px; border-left: 2px solid transparent;
  font-family: var(--f-label); font-size: .98rem; letter-spacing: .03em; color: var(--ink-2); text-decoration: none; line-height: 1.2;
}
.rail ol a .rn { font-family: var(--f-display); font-style: italic; color: var(--ink-3); font-size: .95rem; grid-row: span 2; }
.rail ol a:hover { color: var(--ink); }
.rail ol a.active { color: var(--ink); border-left-color: var(--accent); }
.rail ol a.active .rn { color: var(--accent-ink); }
.rail-foot { margin-top: 1.5rem; font-size: .85rem; color: var(--ink-3); line-height: 1.4; font-style: italic; }
.rail-foot a { display: block; margin-top: .7rem; font-style: normal; font-family: var(--f-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: var(--ink-2); text-decoration: none; }
.rail-foot a:hover { color: var(--ink); }

/* challenge dots: three per exploration */
.dots { display: inline-flex; gap: .22rem; align-items: center; }
.dots i { width: .5rem; height: .5rem; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--ink-3); display: block; transition: background .3s, box-shadow .3s; }
.dots i.on { background: var(--accent); box-shadow: inset 0 0 0 1.2px var(--accent); }

/* ---------- hero ---------- */
.hero { display: grid; gap: 2.4rem; padding-block: 3rem 1.5rem; }
@media (min-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; padding-block: 4.6rem 2.5rem; column-gap: 3.5rem; }
}
.hero h1 {
  font-weight: 300; font-size: clamp(2.5rem, 11vw, 7rem); line-height: .92; letter-spacing: -.025em;
  margin: .8rem 0 1.3rem; font-variation-settings: "opsz" 72; text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
}
.hero h1 em { color: var(--accent-ink); font-weight: 300; }
.lede { font-size: 1.28rem; line-height: 1.52; color: var(--ink-2); max-width: 35rem; margin: 0; }
.cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.route {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 1.7rem 0 0; padding: 0; list-style: none;
  font-family: var(--f-label); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.route li { display: flex; align-items: baseline; gap: .45rem; }
.route li + li::before { content: "→"; color: var(--ink-3); margin-right: .45rem; }
.route b { font-family: var(--f-display); font-style: italic; font-weight: 400; text-transform: none; color: var(--accent-ink); letter-spacing: 0; }
.route a { text-decoration: none; }
.route a:hover { color: var(--ink); }

/* topic hero: the big number, and the list of explorations on the right */
.topic-hero .h-num { font-style: italic; font-weight: 300; color: var(--accent-ink); }
.tricks-lbl { margin: 1.8rem 0 0; color: var(--ink-3); font-size: .74rem; }
.route.tricks { margin-top: .5rem; }
.route.tricks li + li::before { content: "·"; }
.topic-hero .hero-side { display: grid; gap: 1rem; }
.topic-hero .emblem-big { width: 100%; max-width: 26rem; justify-self: center; aspect-ratio: 16 / 11; }
.exp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ink); }
.exp-list a {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .1rem .6rem; align-items: baseline;
  padding: .7rem .2rem .75rem; border-bottom: 1px solid var(--rule); text-decoration: none;
}
.exp-list a:hover { background: var(--accent-wash); }
.exp-list .rn { font-style: italic; color: var(--accent-ink); font-size: 1.15rem; grid-row: span 2; }
.exp-list b { font-weight: 500; font-size: 1.15rem; line-height: 1.25; }
.exp-list small { grid-column: 2 / 4; font-family: var(--f-label); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3; }

/* ---------- chapters and prose ---------- */
.chapter { padding-top: 5.5rem; display: flow-root; }
.ch-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.4rem; align-items: end;
  border-top: 1px solid var(--ink); padding-top: 1.3rem; margin-bottom: 2.2rem;
}
.ch-num {
  font-style: italic; font-weight: 300; line-height: .78; color: var(--accent-ink);
  font-size: clamp(4.2rem, 11vw, 7.5rem); font-variation-settings: "opsz" 72; min-width: 1ch;
}
.ch-title { margin: 0; font-weight: 400; line-height: 1; letter-spacing: -.015em; font-size: clamp(2.3rem, 6vw, 3.8rem); font-variation-settings: "opsz" 72; text-wrap: balance; }
.ch-kicker { grid-column: 1 / -1; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
@media (min-width: 640px) { .ch-kicker { grid-column: 2; } }
.ch-kicker .who { color: var(--accent-ink); }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15rem; }
.prose h3 { font-weight: 500; font-size: 1.65rem; line-height: 1.2; margin: 3rem 0 .9rem; letter-spacing: -.005em; font-variation-settings: "opsz" 48; text-wrap: balance; }
.prose h3 .lbl { display: block; margin-bottom: .35rem; color: var(--accent-ink); }
.prose ol.steps, .prose ul.steps { margin: 0 0 1.3rem; padding: 0; list-style: none; display: grid; gap: .55rem; counter-reset: st; }
.prose ol.steps li { position: relative; padding-left: 2.4rem; counter-increment: st; }
.prose ol.steps li::before {
  content: counter(st); position: absolute; left: 0; top: .12rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-label); font-weight: 700; font-size: .9rem;
  background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent);
}
.dropcap::first-letter { float: left; font-size: 4.1em; line-height: .8; padding: .08em .08em 0 0; font-weight: 300; color: var(--accent-ink); font-variation-settings: "opsz" 72; }
.hl-a { color: var(--accent-ink); font-weight: 500; }
.hl-b { color: var(--alt-ink); font-weight: 500; }
.key-term { font-style: italic; color: var(--accent-ink); }

/* margin notes: "who and when", "did you know" */
.sidenote { display: block; font-size: .95rem; line-height: 1.48; color: var(--ink-2); border-left: 2px solid var(--accent); padding: .1rem 0 .1rem .9rem; margin: 0 0 1.2rem; }
.sidenote .lbl { display: block; margin-bottom: .25rem; font-size: .72rem; color: var(--accent-ink); }
@media (min-width: 1100px) {
  .sidenote { float: right; clear: right; width: 15rem; margin: .3rem -18rem 1rem 0; font-size: .9rem; border-left: 0; padding: .55rem 0 0; border-top: 1px solid var(--rule); }
}

/* display mathematics */
.math { margin: 1.5rem 0 1.6rem; padding: .2rem 0; text-align: center; font-size: 1.5rem; line-height: 1.5; font-variation-settings: "opsz" 36; overflow-x: auto; }
.math i, .m i { font-style: italic; }
.math .op, .m .op { font-style: normal; }
.math small { display: block; font-size: .92rem; color: var(--ink-2); font-style: italic; margin-top: .25rem; }
.math .box { display: inline-block; padding: .1rem .7rem; border-radius: 6px; background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.m { white-space: nowrap; }
.math .sep { display: inline-block; width: 2.2em; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1.1; margin: 0 .12em; }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding: 0 .2em .05em; }
.frac > span:last-child { padding: .05em .2em 0; }

/* ---------- the three teaching boxes ---------- */
/* 1. Try this: three challenges that tick themselves when you solve them in the figure */
.try {
  clear: both; max-width: var(--measure); margin: 2.2rem 0; padding: 1rem 1.2rem 1.1rem;
  border: 1.5px dashed var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.try-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; }
.try-head .lbl { color: var(--accent-ink); font-size: .85rem; display: inline-flex; align-items: center; gap: .45rem; }
.try-head .lbl svg { width: 1rem; height: 1rem; }
.try-head .count { font-family: var(--f-label); font-size: .85rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); }
.try-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.try-list li { position: relative; padding-left: 2.1rem; font-size: 1.05rem; line-height: 1.45; transition: color .3s; }
.try-list li::before {
  content: ""; position: absolute; left: 0; top: .1rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-3); transition: background .3s, box-shadow .3s, transform .3s;
}
.try-list li::after {
  content: ""; position: absolute; left: .42rem; top: .38rem; width: .5rem; height: .28rem;
  border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg) scale(0); transition: transform .25s .1s;
}
.try-list li.solved { color: var(--ink-2); }
.try-list li.solved::before { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.try-list li.solved::after { transform: rotate(-45deg) scale(1); }
.try-list li.just::before { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.try-list .ans { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .45rem; }
.try-list .ans .field { width: 8.5rem; }
.try-list .ans .msg { font-size: .92rem; font-style: italic; color: var(--ink-3); }
.try-list .ans .msg.bad { color: var(--bad); }
.try-list li.solved .ans .field { border-color: var(--accent); }
.try-list .hint-btn { font-size: .85rem; }

/* 2. The trick: the problem-solving technique, linked to the toolbox */
.trick {
  clear: both; max-width: var(--measure); margin: 2.2rem 0; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .2rem 1rem;
  padding: 1.1rem 1.2rem 1.15rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow);
}
.trick .t-icon { grid-row: span 3; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.trick .t-icon svg { width: 1.6rem; height: 1.6rem; }
.trick .lbl { color: var(--ink-3); font-size: .74rem; }
.trick .t-name { font-family: var(--f-display); font-size: 1.45rem; line-height: 1.2; font-weight: 500; text-decoration: none; }
.trick .t-name:hover { color: var(--accent-ink); }
.trick .t-names { display: flex; flex-wrap: wrap; gap: .1rem .9rem; align-items: baseline; }
.trick .t-names .plus { color: var(--ink-3); font-style: italic; font-size: 1.1rem; }
.trick p { margin: .35rem 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 520px) { .trick { grid-template-columns: minmax(0, 1fr); } .trick .t-icon { grid-row: auto; width: 2.6rem; height: 2.6rem; } }

/* 3. Remember: the one-sentence lesson */
.lesson { clear: both; max-width: var(--measure); margin: 2.6rem 0 0; padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.lesson .lbl { color: var(--accent-ink); }
.lesson p { margin: .45rem 0 0; font-size: 1.5rem; line-height: 1.34; font-style: italic; font-weight: 400; text-wrap: balance; }

/* ---------- figures (the instruments) ---------- */
.fig { margin: 2.4rem 0 2.8rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); clear: both; min-width: 0; }
.fig-head { display: flex; align-items: baseline; gap: .8rem; padding: .85rem 1.2rem .7rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.fig-no { font-family: var(--f-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--accent-ink); }
.fig-title { font-family: var(--f-label); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; font-size: 1rem; color: var(--ink); }
.fig-head .reset-btn { margin-left: auto; font-size: .78rem; padding: .25rem .55rem .22rem; }
.fig-body { padding: 1.2rem; min-width: 0; }
.fig figcaption { padding: .85rem 1.2rem 1rem; border-top: 1px solid var(--rule); font-size: .98rem; line-height: 1.5; color: var(--ink-2); }
.fig figcaption b { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) {
  .fig-body { padding: .9rem; }
  .fig-head, .fig figcaption { padding-inline: .9rem; }
}
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fig svg { display: block; max-width: 100%; height: auto; }
.fig svg text { font-family: var(--f-label); }
.paper-grid { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 22px 22px; background-position: -1px -1px; border-radius: 6px; }
.stage { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; min-width: 0; overflow: hidden; }
/* draggable figures: the page still scrolls up and down; handles block it from js (touchHandles in core.js) */
.touch-none { touch-action: pan-y pinch-zoom; }
.draggable { cursor: grab; }
.draggable:active, .dragging .draggable { cursor: grabbing; }

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.controls + .controls { margin-top: .7rem; }
.field-group { display: grid; gap: .3rem; min-width: 0; }
.btn {
  font-family: var(--f-label); font-size: .9rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); background: var(--panel); border: 1px solid var(--ink-3); border-radius: 4px;
  padding: .42rem .8rem .38rem; cursor: pointer; line-height: 1.15; display: inline-flex; align-items: center; gap: .45rem;
  transition: border-color .15s, background .15s, color .15s; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
:root[data-theme="dark"] .btn.accent { color: #10131a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.accent { color: #10131a; } }
.btn.accent:hover { filter: brightness(1.08); }
.btn[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent-ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn .ico { font-family: var(--f-display); font-size: 1rem; line-height: 1; }
.btn.big { font-size: 1rem; padding: .62rem 1.1rem .58rem; }
.icon-btn { width: 2rem; height: 2rem; justify-content: center; padding: 0; font-size: 1.1rem; }
.field {
  font-family: var(--f-mono); font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px; padding: .42rem .6rem; width: 100%; min-width: 0;
}
.field:focus { border-color: var(--accent-ink); outline: none; box-shadow: 0 0 0 3px var(--accent-wash); }
select.field { font-family: var(--f-label); font-size: 1rem; padding-right: 1.6rem; width: auto; }
input[type="range"] { accent-color: var(--accent); width: 100%; min-width: 0; }
.range-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.range-row output { font-family: var(--f-label); font-size: 1.1rem; font-weight: 600; min-width: 3.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip {
  font-family: var(--f-mono); font-size: .86rem; padding: .22rem .65rem; border: 1px solid var(--rule);
  border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; line-height: 1.4;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--accent-ink); color: var(--ink); background: var(--accent-wash); }
.readout { font-family: var(--f-mono); font-size: .98rem; color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; }
.readout.big { font-size: 1.2rem; }
.readout .a { color: var(--accent-ink); font-weight: 600; }
.readout .b { color: var(--alt-ink); font-weight: 600; }
.stats { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; }
.stat { display: grid; gap: .1rem; }
.stat .lbl { white-space: nowrap; }
.stat b { font-family: var(--f-label); font-weight: 600; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat.a b { color: var(--accent-ink); }
.stat.b b { color: var(--alt-ink); }
.stat.bad b { color: var(--bad); }
.split { display: grid; gap: 1.4rem; }
@media (min-width: 820px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .split.wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .split.wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.hint { font-size: .95rem; color: var(--ink-3); font-style: italic; margin: 0; }
.note-line { font-size: 1rem; line-height: 1.5; color: var(--ink-2); min-height: 1.5em; margin: 0; }
.note-line b { color: var(--ink); font-weight: 600; }
.note-line .a { color: var(--accent-ink); font-weight: 600; }
.bad { color: var(--bad); }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-family: var(--f-label); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; }
.legend .lg-a { background: var(--accent); }
.legend .lg-b { background: var(--alt); }
.legend .lg-ink { background: var(--ink-2); }
.legend .lg-soft { background: var(--inset); box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ---------- svg vocabulary (shared by every figure) ---------- */
.ax { stroke: var(--rule); stroke-width: 1; fill: none; }
.ax-strong { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.ln-ink { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.ln-soft { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.ln-a { stroke: var(--accent); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ln-b { stroke: var(--alt); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ln-dash { stroke-dasharray: 4 4; }
.fill-a { fill: var(--accent); }
.fill-b { fill: var(--alt); }
.fill-wash-a { fill: var(--accent-wash); }
.fill-wash-b { fill: var(--alt-wash); }
.fill-ink { fill: var(--ink); }
.fill-paper { fill: var(--paper); }
.fill-panel { fill: var(--panel); }
.fill-inset { fill: var(--inset); }
.fill-soft { fill: var(--ink-3); fill-opacity: .4; }
.t-label { fill: var(--ink-2); font-size: 12px; letter-spacing: .08em; }
.t-small { fill: var(--ink-3); font-size: 10.5px; letter-spacing: .06em; }
.t-big { fill: var(--ink); font-size: 22px; font-weight: 600; }
.t-num { font-family: var(--f-mono) !important; fill: var(--ink); font-size: 12px; }
.t-ink { fill: var(--ink); }
.t-a { fill: var(--accent-ink); }
.t-b { fill: var(--alt-ink); }
.t-bad { fill: var(--bad); }
.t-serif { font-family: var(--f-display) !important; font-style: italic; }
.handle { fill: var(--panel); stroke: var(--accent); stroke-width: 2.5; cursor: grab; }
.handle:hover, .handle.active { fill: var(--accent); }
.handle-ring { fill: var(--accent-wash); stroke: none; pointer-events: none; }

/* ---------- toast: "challenge solved" ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.4rem); z-index: 40;
  transform: translate(-50%, 140%); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: .55rem 1.1rem .55rem .6rem;
  display: flex; align-items: center; gap: .65rem; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
  font-family: var(--f-label); font-weight: 600; letter-spacing: .06em; font-size: .98rem; max-width: calc(100vw - 32px);
}
.toast.show { transform: translate(-50%, 0); }
.toast .tick { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.toast .tick svg { width: 1rem; height: 1rem; stroke: var(--paper); }
.toast small { font-weight: 500; opacity: .7; letter-spacing: .04em; margin-left: .2rem; }

/* ---------- next topic and footer ---------- */
.next-topic { clear: both; margin: 5rem 0 0; }
.next-topic a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; text-decoration: none;
  border-top: 1px solid var(--ink); padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--rule);
}
.next-topic .lbl { color: var(--accent-ink); }
.next-topic b { display: block; font-weight: 300; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1; letter-spacing: -.02em; margin: .35rem 0 .45rem; }
.next-topic b em { color: var(--accent-ink); }
.next-topic p { margin: 0; color: var(--ink-2); font-style: italic; }
.next-topic svg { width: clamp(7rem, 22vw, 11rem); height: auto; }
.next-topic a:hover b { color: var(--accent-ink); }
.site-foot { max-width: 81rem; margin: 4rem auto 0; padding: 1.4rem 0 2.6rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: baseline; justify-content: space-between; font-size: .92rem; color: var(--ink-3); }
.site-foot p { margin: 0; max-width: 44rem; }
.site-foot button { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; }
.site-foot button:hover { color: var(--ink); }

/* ---------- emblems: the small line drawing for each topic ---------- */
.emblem { display: block; overflow: visible; }
.emblem .e-ink { stroke: var(--ink-2); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.emblem .e-soft { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.emblem .e-a { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.emblem .e-fa { fill: var(--accent); }
.emblem .e-fw { fill: var(--accent-wash); }
.emblem .e-fb { fill: var(--alt); }
.emblem .e-fi { fill: var(--ink-2); }
.emblem .e-fp { fill: var(--panel); }
.emblem .spin { transform-origin: 80px 55px; transition: transform 1.6s cubic-bezier(.3, .7, .3, 1); }
a:hover .emblem .spin, .emblem:hover .spin { transform: rotate(40deg); }
.emblem .fall { animation: fall 1.8s linear infinite; animation-play-state: paused; }
a:hover .emblem .fall, .emblem.live .fall { animation-play-state: running; }
@keyframes fall {
  0% { transform: translate(0, 0); opacity: 1; }
  16% { transform: translate(-5.5px, 12px); }
  30% { transform: translate(0, 21px); }
  42% { transform: translate(-5.5px, 29px); }
  56% { transform: translate(-11px, 38px); }
  68% { transform: translate(-5.5px, 46px); }
  80% { transform: translate(-11px, 54px); opacity: 1; }
  92%, 100% { transform: translate(-11px, 66px); opacity: 0; }
}
.emblem .lift { transition: transform .9s cubic-bezier(.3, .7, .3, 1); }
a:hover .emblem .lift { transform: translate(var(--lx, 0), var(--ly, -12px)); }
.emblem .draw { stroke-dasharray: var(--len, 300); stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease; }
a:hover .emblem .draw { animation: draw 1.6s ease; }
@keyframes draw { from { stroke-dashoffset: var(--len, 300); } to { stroke-dashoffset: 0; } }

/* ==================== HUB (index.html) ==================== */
.hub .hero { padding-block: 3.2rem 2rem; }
@media (min-width: 980px) { .hub .hero { padding-block: 4.4rem 3rem; } }
.hub .hero h1 { font-size: clamp(3.8rem, 13vw, 8.4rem); }
.hub-fig { margin: 0; }
.ttc-wrap { max-width: 27rem; margin-inline: auto; width: 100%; }
.ttc-wrap svg { width: 100%; height: auto; }
.ttc-line { stroke: var(--accent); stroke-width: .7; stroke-opacity: .7; }
.ttc-ring { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.ttc-dot { fill: var(--ink-3); }
.ttc-k { fill: var(--ink); font-family: var(--f-display) !important; font-weight: 300; font-size: 30px; }

.section { padding-top: 4.5rem; }
.section-head { display: grid; gap: .5rem; border-top: 1px solid var(--ink); padding-top: 1.2rem; margin-bottom: 1.8rem; }
@media (min-width: 900px) { .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: end; column-gap: 3rem; } }
.section-head h2 { margin: 0; font-weight: 400; font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1.02; letter-spacing: -.015em; }
.section-head h2 em { color: var(--accent-ink); font-weight: 400; }
.section-head p { margin: 0; color: var(--ink-2); font-size: 1.1rem; line-height: 1.5; max-width: 34rem; }

.topic-grid { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topic-card {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; overflow: hidden;
  transition: transform .25s cubic-bezier(.3, .7, .3, 1), border-color .2s, box-shadow .25s;
}
.topic-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
.topic-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 1px var(--accent); }
.tc-art { padding: 1.3rem 1.2rem .4rem; display: grid; place-items: center; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 18px 18px; border-bottom: 1px solid var(--rule); }
.tc-art svg { width: 100%; max-width: 15rem; aspect-ratio: 16 / 11; }
.tc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; align-items: baseline; padding: 1rem 1.2rem .2rem; }
.tc-head .n { font-style: italic; font-weight: 300; font-size: 2.6rem; line-height: .8; color: var(--accent-ink); }
.tc-head h3 { margin: 0; font-weight: 400; font-size: 1.9rem; line-height: 1; letter-spacing: -.01em; }
.tc-head .lbl { grid-column: 2; margin-top: .45rem; color: var(--ink-3); font-size: .74rem; }
.tc-list { list-style: none; margin: .5rem 0 0; padding: 0 1.2rem; display: grid; align-content: start; }
.tc-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .38rem 0; border-top: 1px dashed var(--rule); font-size: 1rem; line-height: 1.3; color: var(--ink-2); }
.tc-foot { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.2rem 1rem; margin-top: .5rem; }
.tc-foot .go { font-family: var(--f-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; color: var(--accent-ink); }
.tc-foot .score { font-family: var(--f-label); font-size: .85rem; letter-spacing: .06em; color: var(--ink-3); }

.tool-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.tool-chip {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .1rem .8rem; align-items: center; padding: .7rem .9rem;
  border: 1px solid var(--rule); border-radius: 8px; text-decoration: none; background: var(--panel); transition: border-color .2s, background .2s;
}
.tool-chip:hover { border-color: var(--ink-3); background: var(--paper); }
.tool-chip .ic { grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--inset); color: var(--ink); }
.tool-chip .ic svg { width: 1.35rem; height: 1.35rem; }
.tool-chip b { font-weight: 500; font-size: 1.08rem; line-height: 1.2; }
.tool-chip small { font-size: .88rem; color: var(--ink-3); line-height: 1.3; font-style: italic; }
.how { display: grid; gap: 1.4rem; counter-reset: how; }
@media (min-width: 820px) { .how { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.how li { list-style: none; display: grid; gap: .4rem; align-content: start; border-top: 1px solid var(--rule); padding-top: 1rem; }
.how li .lbl { color: var(--accent-ink); }
.how li b { font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.how li p { margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.5; }
.how ol { padding: 0; margin: 0; }

/* ==================== TOOLBOX (toolbox.html) ==================== */
.tool-index { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.6rem; }
.tool-index a { font-family: var(--f-label); font-size: .88rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); padding: .3rem .6rem; border: 1px solid var(--rule); border-radius: 999px; display: inline-flex; gap: .4rem; align-items: center; }
.tool-index a:hover { border-color: var(--ink-3); color: var(--ink); }
.tool-index svg { width: 1rem; height: 1rem; }
.tool-card { display: grid; gap: 1rem 2.4rem; padding: 2.4rem 0 2.6rem; border-top: 1px solid var(--ink); scroll-margin-top: 1rem; }
@media (min-width: 900px) { .tool-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.tool-card .tc-title { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .3rem 1.1rem; align-items: center; }
.tool-card .big-ic { grid-row: span 2; width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tool-card .big-ic svg { width: 2.2rem; height: 2.2rem; }
.tool-card h2 { margin: 0; font-weight: 400; font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em; }
.tool-card .short { margin: 0; font-style: italic; color: var(--ink-2); font-size: 1.1rem; }
.tool-card .body { margin: 1.1rem 0 0; max-width: 36rem; }
.pocket { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem 1.1rem; box-shadow: var(--shadow); align-self: start; }
.pocket .lbl { color: var(--accent-ink); }
.pocket p { margin: .4rem 0 0; font-size: 1.08rem; line-height: 1.5; }
.pocket details { margin-top: .8rem; border-top: 1px dashed var(--rule); padding-top: .7rem; }
.pocket summary { cursor: pointer; font-family: var(--f-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; color: var(--ink-2); list-style: none; display: inline-flex; align-items: center; gap: .45rem; }
.pocket summary::-webkit-details-marker { display: none; }
.pocket summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-3); font-size: .95rem; line-height: 1; }
.pocket details[open] summary::before { content: "−"; }
.pocket details p { color: var(--ink-2); }
.used-in { margin-top: 1.2rem; display: grid; gap: .4rem; }
.used-in .lbl { color: var(--ink-3); font-size: .74rem; }
.used-in ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.used-in a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-size: 1rem; padding: .25rem .7rem .25rem .5rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); }
.used-in a:hover { border-color: var(--accent); background: var(--accent-wash); }
.used-in a i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); }
.tool-hero { align-items: start; }
.spot { margin: 0; }
.spot .fig-head .spot-score { margin-left: auto; font-family: var(--f-label); font-weight: 600; letter-spacing: .08em; font-size: .9rem; color: var(--ink-3); }
.spot .fig-body { display: grid; gap: 1rem; min-height: 19rem; align-content: start; }
.spot-q { margin: 0; font-size: 1.3rem; line-height: 1.4; text-wrap: pretty; }
.spot-opts { display: grid; gap: .45rem; }
.spot-opt {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .8rem; align-items: center; text-align: left;
  padding: .55rem .8rem; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  font: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s;
}
.spot-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateX(3px); }
.spot-opt .ic { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--inset); }
.spot-opt .ic svg { width: 1.2rem; height: 1.2rem; }
.spot-opt b { font-weight: 500; font-size: 1.1rem; }
.spot-opt:disabled { cursor: default; opacity: .55; }
.spot-opt.right { opacity: 1; border-color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 1px var(--accent); }
.spot-opt.right .ic { background: var(--accent); color: var(--paper); }
.spot-opt.wrong { opacity: 1; border-color: var(--bad); background: var(--bad-wash); }
.spot-why p { margin: 0 0 .8rem; font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); }
.spot-why p b { color: var(--ink); font-weight: 600; }
.spot-end { display: grid; gap: .4rem; padding: 1rem 0 .4rem; }
.spot-end b { font-weight: 300; font-size: 4.5rem; line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.spot-end p { margin: 0; font-size: 1.2rem; font-style: italic; color: var(--ink-2); }
.used-in a[data-topic] i { background: var(--accent); }

/* ==================== THE LIBRARY ==================== */
/* shelf colours, and two extra symbol colours (--v3, --v4) so a formula can colour up to four symbols */
:root, [data-topic] { --v3: var(--c-blue); --v3-ink: var(--c-blue-ink); --v4: var(--c-magenta); --v4-ink: var(--c-magenta-ink); }
[data-topic="fractions"]  { --accent: var(--c-amber);   --accent-ink: var(--c-amber-ink);   --alt: var(--c-teal);   --alt-ink: var(--c-teal-ink);   --v3: var(--c-blue);  --v3-ink: var(--c-blue-ink);  --v4: var(--c-magenta); --v4-ink: var(--c-magenta-ink); }
[data-topic="area"]       { --accent: var(--c-teal);    --accent-ink: var(--c-teal-ink);    --alt: var(--c-amber);  --alt-ink: var(--c-amber-ink);  --v3: var(--c-blue);  --v3-ink: var(--c-blue-ink);  --v4: var(--c-magenta); --v4-ink: var(--c-magenta-ink); }
[data-topic="solids"]     { --accent: var(--c-magenta); --accent-ink: var(--c-magenta-ink); --alt: var(--c-teal);   --alt-ink: var(--c-teal-ink);   --v3: var(--c-amber); --v3-ink: var(--c-amber-ink); --v4: var(--c-blue);    --v4-ink: var(--c-blue-ink); }
[data-topic="mechanics"]  { --accent: var(--c-green);   --accent-ink: var(--c-green-ink);   --alt: var(--c-violet); --alt-ink: var(--c-violet-ink); --v3: var(--c-amber); --v3-ink: var(--c-amber-ink); --v4: var(--c-blue);    --v4-ink: var(--c-blue-ink); }
[data-topic="space"]      { --accent: var(--c-blue);    --accent-ink: var(--c-blue-ink);    --alt: var(--c-amber);  --alt-ink: var(--c-amber-ink);  --v3: var(--c-teal);  --v3-ink: var(--c-teal-ink);  --v4: var(--c-magenta); --v4-ink: var(--c-magenta-ink); }
[data-topic="relativity"] { --accent: var(--c-violet);  --accent-ink: var(--c-violet-ink);  --alt: var(--c-amber);  --alt-ink: var(--c-amber-ink);  --v3: var(--c-teal);  --v3-ink: var(--c-teal-ink);  --v4: var(--c-magenta); --v4-ink: var(--c-magenta-ink); }
[data-topic="arithmetic"] { --accent: var(--c-green);   --accent-ink: var(--c-green-ink);   --alt: var(--c-amber);  --alt-ink: var(--c-amber-ink);  --v3: var(--c-blue);  --v3-ink: var(--c-blue-ink);  --v4: var(--c-magenta); --v4-ink: var(--c-magenta-ink); }
[data-topic="algebra"]    { --accent: var(--c-blue);    --accent-ink: var(--c-blue-ink);    --alt: var(--c-magenta); --alt-ink: var(--c-magenta-ink); --v3: var(--c-amber); --v3-ink: var(--c-amber-ink); --v4: var(--c-teal); --v4-ink: var(--c-teal-ink); }
[data-topic="matter"]     { --accent: var(--c-magenta); --accent-ink: var(--c-magenta-ink); --alt: var(--c-blue);    --alt-ink: var(--c-blue-ink);    --v3: var(--c-teal);  --v3-ink: var(--c-teal-ink);  --v4: var(--c-amber); --v4-ink: var(--c-amber-ink); }
[data-topic="atoms"]      { --accent: var(--c-teal);    --accent-ink: var(--c-teal-ink);    --alt: var(--c-magenta); --alt-ink: var(--c-magenta-ink); --v3: var(--c-amber); --v3-ink: var(--c-amber-ink); --v4: var(--c-blue); --v4-ink: var(--c-blue-ink); }
[data-topic="electricity"] { --accent: var(--c-amber); --accent-ink: var(--c-amber-ink); --alt: var(--c-blue);    --alt-ink: var(--c-blue-ink);    --v3: var(--c-teal);  --v3-ink: var(--c-teal-ink);  --v4: var(--c-magenta); --v4-ink: var(--c-magenta-ink); }
[data-topic="ratio"]      { --accent: var(--c-violet);  --accent-ink: var(--c-violet-ink);  --alt: var(--c-teal);    --alt-ink: var(--c-teal-ink);    --v3: var(--c-amber); --v3-ink: var(--c-amber-ink); --v4: var(--c-blue); --v4-ink: var(--c-blue-ink); }
[data-topic="forces"]     { --accent: var(--c-teal);    --accent-ink: var(--c-teal-ink);    --alt: var(--c-violet);  --alt-ink: var(--c-violet-ink);  --v3: var(--c-amber); --v3-ink: var(--c-amber-ink); --v4: var(--c-magenta); --v4-ink: var(--c-magenta-ink); }
[data-topic="moles"]      { --accent: var(--c-green);   --accent-ink: var(--c-green-ink);   --alt: var(--c-blue);    --alt-ink: var(--c-blue-ink);    --v3: var(--c-magenta); --v3-ink: var(--c-magenta-ink); --v4: var(--c-amber); --v4-ink: var(--c-amber-ink); }
[data-topic="algebra2"]   { --accent: var(--c-magenta); --accent-ink: var(--c-magenta-ink); --alt: var(--c-blue);    --alt-ink: var(--c-blue-ink);    --v3: var(--c-amber); --v3-ink: var(--c-amber-ink); --v4: var(--c-teal); --v4-ink: var(--c-teal-ink); }
[data-topic="calculus"]   { --accent: var(--c-violet);  --accent-ink: var(--c-violet-ink);  --alt: var(--c-green);   --alt-ink: var(--c-green-ink);   --v3: var(--c-amber); --v3-ink: var(--c-amber-ink); --v4: var(--c-blue); --v4-ink: var(--c-blue-ink); }
[data-topic="waves"]      { --accent: var(--c-blue);    --accent-ink: var(--c-blue-ink);    --alt: var(--c-green);   --alt-ink: var(--c-green-ink);   --v3: var(--c-amber); --v3-ink: var(--c-amber-ink); --v4: var(--c-magenta); --v4-ink: var(--c-magenta-ink); }
[data-topic="optics"]     { --accent: var(--c-teal);    --accent-ink: var(--c-teal-ink);    --alt: var(--c-blue);    --alt-ink: var(--c-blue-ink);    --v3: var(--c-amber); --v3-ink: var(--c-amber-ink); --v4: var(--c-magenta); --v4-ink: var(--c-magenta-ink); }
[data-topic="statistics"] { --accent: var(--c-green);   --accent-ink: var(--c-green-ink);   --alt: var(--c-magenta); --alt-ink: var(--c-magenta-ink); --v3: var(--c-blue); --v3-ink: var(--c-blue-ink); --v4: var(--c-amber); --v4-ink: var(--c-amber-ink); }
[data-topic="probability"] { --accent: var(--c-amber); --accent-ink: var(--c-amber-ink); --alt: var(--c-violet);  --alt-ink: var(--c-violet-ink);  --v3: var(--c-teal);  --v3-ink: var(--c-teal-ink);  --v4: var(--c-blue); --v4-ink: var(--c-blue-ink); }
[data-topic="geometry2"]  { --accent: var(--c-magenta); --accent-ink: var(--c-magenta-ink); --alt: var(--c-green);   --alt-ink: var(--c-green-ink);   --v3: var(--c-blue); --v3-ink: var(--c-blue-ink); --v4: var(--c-amber); --v4-ink: var(--c-amber-ink); }
[data-topic="work"]       { --accent: var(--c-blue);    --accent-ink: var(--c-blue-ink);    --alt: var(--c-teal);    --alt-ink: var(--c-teal-ink);    --v3: var(--c-violet); --v3-ink: var(--c-violet-ink); --v4: var(--c-amber); --v4-ink: var(--c-amber-ink); }

/* symbols: the same colour in the formula card, the legend, the live numbers and the drawing */
var { font-style: italic; font-family: var(--f-display); }
.v1 { color: var(--accent-ink); } .v2 { color: var(--alt-ink); } .v3 { color: var(--v3-ink); } .v4 { color: var(--v4-ink); }
.f1 { fill: var(--accent); } .f2 { fill: var(--alt); } .f3 { fill: var(--v3); } .f4 { fill: var(--v4); }
.fw1 { fill: var(--accent-wash); } .fw2 { fill: var(--alt-wash); } .fw3 { fill: color-mix(in srgb, var(--v3) 15%, transparent); } .fw4 { fill: color-mix(in srgb, var(--v4) 15%, transparent); }
.s1 { stroke: var(--accent); } .s2 { stroke: var(--alt); } .s3 { stroke: var(--v3); } .s4 { stroke: var(--v4); }
.tv1 { fill: var(--accent-ink); } .tv2 { fill: var(--alt-ink); } .tv3 { fill: var(--v3-ink); } .tv4 { fill: var(--v4-ink); }
.rad { display: inline-flex; align-items: flex-end; vertical-align: middle; }
.rad::before { content: "√"; font-style: normal; font-size: 1.2em; line-height: 1; margin-right: -.02em; }
.rad > span { border-top: .07em solid currentColor; padding: .08em .12em 0; display: inline-block; white-space: nowrap; margin-top: .1em; }
.formula { font-family: var(--f-display); line-height: 1.4; }
.formula .frac { font-size: .92em; }

/* entry */
.entry { padding-top: 5.5rem; display: flow-root; }
.entry-head { border-top: 1px solid var(--ink); padding-top: 1.3rem; margin-bottom: 2.2rem; display: grid; gap: 1.4rem; }
@media (min-width: 940px) { .entry-head { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; column-gap: 2.4rem; } }
.eh-text { display: grid; gap: .5rem; align-content: end; }
.eh-num { font-style: italic; font-weight: 300; line-height: .8; color: var(--accent-ink); font-size: clamp(3.4rem, 9vw, 5.6rem); font-variation-settings: "opsz" 72; }
.eh-title { margin: .2rem 0 0; font-weight: 400; line-height: 1.02; letter-spacing: -.015em; font-size: clamp(2.2rem, 5.6vw, 3.5rem); font-variation-settings: "opsz" 72; text-wrap: balance; }
.eh-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.level { font-family: var(--f-label); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: .12rem .5rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }
.level i { display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); margin-right: .12rem; vertical-align: .08rem; }
.level i.off { background: var(--rule); }
.formula-card { background: var(--panel); border: 1px solid var(--rule); border-top: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.3rem 1.1rem; min-width: 0; }
.fc-formula { font-size: clamp(1.7rem, 5vw, 2.6rem); text-align: center; padding: .5rem 0 .8rem; overflow-x: auto; overflow-y: hidden; white-space: nowrap; font-variation-settings: "opsz" 48; }
.fc-plain { margin: 0 0 .8rem; font-style: italic; color: var(--ink-2); font-size: 1.04rem; line-height: 1.45; text-align: center; text-wrap: pretty; }
.fc-legend { display: grid; grid-template-columns: minmax(3.4rem, max-content) minmax(0, 1fr) auto; gap: 0; margin: 0; }   /* rows share one symbol column (subgrid), as wide as the longest symbol */
.fc-legend div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: .2rem .7rem; align-items: baseline; padding: .32rem 0; border-top: 1px dashed var(--rule); }
.fc-legend dt { font-family: var(--f-display); font-style: italic; font-size: 1.25rem; line-height: 1.2; text-align: center; white-space: nowrap; }
.fc-legend dd { margin: 0; font-size: .97rem; line-height: 1.35; color: var(--ink-2); }
.fc-legend .unit { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-3); white-space: nowrap; }

/* live substitution: the formula with today's numbers in it */
.plug { font-family: var(--f-display); font-size: clamp(1.15rem, 3.4vw, 1.45rem); line-height: 1.6; text-align: center; padding: .55rem .8rem; border-radius: 8px; background: var(--paper); border: 1px solid var(--rule); overflow-x: auto; min-height: 2.6em; display: block; }
.plug b, .plug .frac, .plug .rad { white-space: nowrap; }
.plug b { font-weight: 600; font-family: var(--f-label); font-size: 1.1em; font-variant-numeric: tabular-nums; }
.plug .eq { color: var(--ink-3); }
.plug .nw, .plug .m { white-space: nowrap; }
.plug .res { padding: 0 .35em; border-radius: 5px; background: var(--accent-wash); }

/* where it comes from: a stepper */
.derive { clear: both; margin: 2.4rem 0 2.8rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); min-width: 0; }
.derive-head { display: flex; align-items: baseline; gap: .8rem; padding: .85rem 1.2rem .7rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.derive-head .lbl { color: var(--accent-ink); font-size: .78rem; font-weight: 700; }
.derive-head .d-title { font-family: var(--f-display); font-weight: 500; letter-spacing: 0; font-size: 1.12rem; line-height: 1.3; }
.derive-head .d-count { margin-left: auto; font-family: var(--f-label); font-size: .85rem; letter-spacing: .06em; color: var(--ink-3); }
.derive-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 1.2rem; }
@media (min-width: 900px) { .derive.has-fig .derive-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } .derive.has-fig .derive-fig { position: sticky; top: 1rem; } }
.dsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; counter-reset: ds; }
.dsteps > li { counter-increment: ds; position: relative; padding-left: 2.5rem; font-size: 1.05rem; line-height: 1.5; transition: opacity .35s; }
.dsteps > li::before {
  content: counter(ds); position: absolute; left: 0; top: .05rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-label); font-weight: 700; font-size: .92rem; color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); transition: background .3s, color .3s;
}
.dsteps > li.current::before { background: var(--accent); color: var(--paper); }
.dsteps > li.past { opacity: .6; }
.dsteps > li.future { display: none; }
.dsteps > li.enter { animation: stepin .45s cubic-bezier(.3, .7, .3, 1); }
@keyframes stepin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dsteps > li > b:first-child { display: block; font-weight: 600; margin-bottom: .15rem; }
.dsteps .math { margin: .6rem 0 .2rem; font-size: 1.3rem; text-align: left; }
.derive-nav { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.2rem .85rem; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.derive-nav .dots { margin: 0 .4rem; gap: .3rem; }
.derive-nav .dots i { width: .55rem; height: .55rem; cursor: pointer; }
.derive-nav .spacer { flex: 1; }
.derive-fig { min-width: 0; }

/* worked example: a solution revealed one step at a time */
.worked { clear: both; max-width: var(--measure); margin: 2.4rem 0; padding: 1rem 1.2rem 1.1rem; border-left: 3px solid var(--alt); background: color-mix(in srgb, var(--alt) 6%, transparent); border-radius: 0 var(--radius) var(--radius) 0; }
.worked-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.worked-head .lbl { color: var(--alt-ink); font-size: .82rem; }
.worked .wq { margin: .5rem 0 .9rem; font-size: 1.12rem; line-height: 1.5; }
.wsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wsteps > li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .2rem .9rem; padding-top: .55rem; border-top: 1px dashed var(--rule); font-size: 1.03rem; line-height: 1.5; }
.wsteps > li > .ws-lbl { font-family: var(--f-label); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--alt-ink); padding-top: .25rem; }
.wsteps > li.hidden { display: none; }
.wsteps > li.enter { animation: stepin .45s cubic-bezier(.3, .7, .3, 1); }
.wsteps .math { margin: .3rem 0; font-size: 1.22rem; text-align: left; }
.worked .w-more { margin-top: .9rem; display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 520px) { .wsteps > li { grid-template-columns: minmax(0, 1fr); } }

/* your turn: a problem with a ladder of hints */
.yourturn { clear: both; max-width: var(--measure); margin: 2.2rem 0; padding: 1rem 1.2rem 1.1rem; border: 1.5px dashed var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.yt-head { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.yt-head .lbl { color: var(--accent-ink); font-size: .85rem; display: inline-flex; align-items: center; gap: .45rem; }
.yt-head .lbl svg { width: 1rem; height: 1rem; }
.yt-head .yt-done { font-family: var(--f-label); font-weight: 600; font-size: .85rem; letter-spacing: .06em; color: var(--accent-ink); display: none; }
.yourturn.solved .yt-head .yt-done { display: inline; }
.yourturn > p { margin: .5rem 0 .2rem; font-size: 1.1rem; line-height: 1.5; }
.yt-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: .7rem; }
.yt-row .field { width: 9rem; }
.yt-row .unit { font-family: var(--f-mono); color: var(--ink-3); font-size: .95rem; margin-left: -.15rem; }
.yt-msg { font-size: .98rem; font-style: italic; color: var(--ink-3); margin: .5rem 0 0; min-height: 1.4em; }
.yt-msg.ok { color: var(--accent-ink); font-style: normal; font-weight: 500; }
.yt-msg.bad { color: var(--bad); }
.yourturn ol.hints { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; }
.yourturn ol.hints > li { display: none; padding: .55rem .8rem; border-radius: 6px; background: var(--panel); border: 1px solid var(--rule); font-size: 1rem; line-height: 1.5; }
.yourturn ol.hints > li.shown { display: block; animation: stepin .4s cubic-bezier(.3, .7, .3, 1); }
.yourturn ol.hints > li .lbl { display: block; color: var(--ink-3); font-size: .7rem; margin-bottom: .15rem; }
.yourturn.solved { border-style: solid; }

/* watch out */
.mistake { clear: both; max-width: var(--measure); margin: 2rem 0; padding: .85rem 1.1rem .95rem; border-radius: var(--radius); background: var(--bad-wash); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.mistake .m-head { display: flex; align-items: center; gap: .45rem; color: var(--bad); font-family: var(--f-label); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.mistake .m-head svg { width: 1.05rem; height: 1.05rem; }
.mistake p { margin: .35rem 0 0; font-size: 1.03rem; line-height: 1.5; }

/* related entries */
.related { clear: both; margin: 2.8rem 0 0; display: grid; gap: 1rem 2rem; border-top: 1px solid var(--ink); padding-top: 1rem; }
@media (min-width: 760px) { .related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related .lbl { color: var(--ink-3); font-size: .72rem; display: block; margin-bottom: .45rem; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.related a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .5rem; align-items: baseline; text-decoration: none; font-size: 1rem; line-height: 1.3; padding: .15rem 0; }
.related a:hover b { color: var(--accent-ink); }
.related a span { font-family: var(--f-label); font-weight: 600; font-size: .85rem; color: var(--accent-ink); letter-spacing: .04em; }
.related a b { font-weight: 400; }
.related .none { color: var(--ink-3); font-style: italic; font-size: .95rem; }

/* shelf hero */
.shelf-hero .h-num { font-style: italic; font-weight: 300; color: var(--accent-ink); }
.sig-plate { background-color: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1rem 1.4rem; text-align: center; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 20px 20px; }
.sig-plate .formula { font-size: clamp(2rem, 6vw, 3rem); white-space: nowrap; overflow-x: hidden; }   /* fitFormulas shrinks it to fit; never a scrollbar */
.sig-plate .lbl { color: var(--ink-3); font-size: .72rem; display: block; margin-top: .4rem; }
.entry-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.entry-list a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .1rem .6rem; align-items: baseline; padding: .6rem .2rem .62rem; border-bottom: 1px solid var(--rule); text-decoration: none; }
.entry-list a:hover { background: var(--accent-wash); }
.entry-list .rn { font-family: var(--f-label); font-weight: 600; color: var(--accent-ink); font-size: .95rem; letter-spacing: .04em; }
.entry-list b { font-weight: 500; font-size: 1.1rem; line-height: 1.25; }
.entry-list small { grid-column: 2 / 4; font-family: var(--f-label); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.practised { width: 1rem; height: 1rem; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--ink-3); display: inline-grid; place-items: center; flex: none; }
.practised.on { background: var(--accent); box-shadow: none; }
.practised.on::after { content: ""; width: .42rem; height: .22rem; border-left: 1.6px solid var(--paper); border-bottom: 1.6px solid var(--paper); transform: rotate(-45deg) translate(.02rem, -.04rem); }
.rail ol a .practised { align-self: center; }
.rail.shelf-rail ol a { grid-template-columns: 2.2rem 1fr auto; }

/* ---------- top bar menus and search ---------- */
.topbar { position: relative; }
.topnav .menu-btn::after { content: ""; width: .38rem; height: .38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-.15rem); margin-left: .1rem; transition: transform .2s; }
.topnav .menu-btn[aria-expanded="true"] { color: var(--ink); background: var(--inset); }
.topnav .menu-btn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-.05rem); }
.topnav .wide-only { display: none; }
@media (min-width: 760px) { .topnav .wide-only { display: inline-flex; } }
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + .4rem); z-index: 50; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .45); padding: 1.2rem 1.3rem 1rem; max-height: min(78vh, 46rem); overflow: auto;
}
.mega[hidden] { display: none; }
.mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: 1.2rem 1.8rem; }
.mega-col h3 { margin: 0 0 .4rem; font-weight: 400; font-size: 1.2rem; line-height: 1.2; display: flex; align-items: baseline; gap: .45rem; }
.mega-col h3 a { text-decoration: none; }
.mega-col h3 a:hover { color: var(--accent-ink); }
.mega-col h3 .rn { font-style: italic; color: var(--accent-ink); }
.mega-col ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--accent); }
.mega-col li a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .3rem; padding: .28rem .2rem; text-decoration: none; font-size: .98rem; line-height: 1.3; color: var(--ink-2); border-bottom: 1px dashed var(--rule); }
.mega-col li a:hover { color: var(--ink); background: var(--accent-wash); }
.mega-col li a span { font-family: var(--f-label); font-weight: 600; font-size: .82rem; color: var(--accent-ink); }
.mega-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.mega-foot a { font-family: var(--f-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; text-decoration: none; color: var(--ink-2); }
.mega-foot a:hover { color: var(--ink); }
.search-btn svg { width: 1.05rem; height: 1.05rem; }
.search-btn kbd { font-family: var(--f-mono); font-size: .7rem; padding: .05rem .3rem; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-3); letter-spacing: 0; }
.search-dlg { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--ink) 40%, transparent); display: grid; place-items: start center; padding: 9vh 16px 16px; }
.search-dlg[hidden] { display: none; }
.search-box { width: min(42rem, 100%); background: var(--panel); border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); overflow: hidden; border: 1px solid var(--rule); }
.search-box .sb-in { display: flex; align-items: center; gap: .6rem; padding: 0 1rem; border-bottom: 1px solid var(--rule); }
.search-box .sb-in svg { width: 1.2rem; height: 1.2rem; color: var(--ink-3); flex: none; }
.search-box input { flex: 1; min-width: 0; font: 1.25rem var(--f-display); padding: 1rem 0; border: 0; background: transparent; color: var(--ink); outline: none; }
.search-results { list-style: none; margin: 0; padding: .4rem; max-height: min(62vh, 34rem); overflow: auto; }
.search-results li a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .1rem .8rem; align-items: baseline; padding: .55rem .7rem; border-radius: 7px; text-decoration: none; }
.search-results li a.sel, .search-results li a:hover { background: var(--accent-wash); }
.search-results .k { font-family: var(--f-label); font-weight: 600; font-size: .85rem; color: var(--accent-ink); }
.search-results b { font-weight: 500; font-size: 1.08rem; }
.search-results small { grid-column: 2 / 4; color: var(--ink-3); font-size: .9rem; line-height: 1.35; }
.search-results .kind { font-family: var(--f-label); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.search-results .empty { padding: 1rem; color: var(--ink-3); font-style: italic; }
.hero-search { margin-top: 1.8rem; display: flex; align-items: center; gap: .7rem; width: 100%; max-width: 32rem; padding: .75rem 1rem; border-radius: 10px; border: 1px solid var(--ink-3); background: var(--panel); color: var(--ink-3); font: 1.12rem var(--f-display); cursor: text; text-align: left; box-shadow: var(--shadow); }
.hero-search:hover { border-color: var(--ink); }
.hero-search svg { width: 1.2rem; height: 1.2rem; flex: none; }
.hero-search kbd { margin-left: auto; font-family: var(--f-mono); font-size: .75rem; padding: .1rem .4rem; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--rule); }

/* ---------- hub: shelves ---------- */
.shelf-grid { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shelf-card { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: border-color .2s, box-shadow .25s; }
.shelf-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
.shelf-card:hover { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 1px var(--accent); }
.sc-art { display: grid; place-items: center; min-height: 8.2rem; padding: 1.4rem 1rem 1rem; border-bottom: 1px solid var(--rule); text-decoration: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 18px 18px; }
.sc-art .formula { font-size: clamp(1.8rem, 4vw, 2.4rem); white-space: nowrap; }
.sc-list { list-style: none; margin: .4rem 0 0; padding: 0 1.2rem; }
.sc-list a { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .34rem 0; border-top: 1px dashed var(--rule); font-size: 1rem; line-height: 1.3; color: var(--ink-2); text-decoration: none; }
.sc-list a:hover { color: var(--ink); }
.sc-list a span { font-family: var(--f-label); font-weight: 600; font-size: .85rem; color: var(--accent-ink); }
.shelf-card .tc-head { padding-top: 1rem; }
.shelf-card .tc-head h3 a { text-decoration: none; }
.shelf-card .tc-foot a { text-decoration: none; }

/* ---------- formula sheet ---------- */
.sheet { display: grid; gap: 2.6rem; }
.sheet-shelf h2 { margin: 0 0 .8rem; font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.4rem); display: flex; align-items: baseline; gap: .6rem; border-top: 1px solid var(--ink); padding-top: 1rem; }
.sheet-shelf h2 em { color: var(--accent-ink); font-weight: 300; }
.sheet-shelf h2 a { text-decoration: none; }
.sheet-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .7rem; }
.sheet-row { display: grid; grid-template-rows: auto 1fr auto; gap: .35rem; background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: .7rem .9rem .6rem; text-decoration: none; transition: background .2s; }
.sheet-row:hover { background: var(--paper); }
.sheet-row .sr-top { display: flex; gap: .5rem; align-items: baseline; }
.sheet-row .sr-top span { font-family: var(--f-label); font-weight: 600; font-size: .85rem; color: var(--accent-ink); }
.sheet-row .sr-top b { font-weight: 500; font-size: 1.02rem; line-height: 1.25; }
.sheet-row .formula { font-size: 1.45rem; text-align: center; padding: .35rem 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
.sheet-row small { color: var(--ink-3); font-size: .86rem; line-height: 1.35; }
.sheet-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
@media print {
  .topbar, .site-foot, .progress, .sheet-tools, .toast, .rail { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .hero { padding: 0 0 1rem; display: block; }
  .hero h1 { font-size: 28pt; margin: 0 0 .3rem; }
  .lede { font-size: 10pt; }
  .sheet { gap: 1rem; }
  .sheet-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
  .sheet-row { box-shadow: none; break-inside: avoid; padding: .3rem .5rem; }
  .sheet-row .formula { font-size: 13pt; }
  .sheet-shelf { break-inside: avoid-page; }
}
@media (min-width: 820px) { .how.how-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.how.how-5 li b { font-size: 1.3rem; }
/* language switch: EN | DA */
.lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; margin: 0 .15rem; }
.lang-switch a { font-family: var(--f-label); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-decoration: none; color: var(--ink-3); padding: .18rem .45rem; border-radius: 999px; line-height: 1.1; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { background: var(--ink); color: var(--paper); }
/* narrow phones: the top bar must fit 375 px in both languages */
@media (max-width: 560px) {
  .topbar { gap: .4rem; }
  .wordmark span { display: none; }
  .topnav { gap: 0; }
  .topnav a, .topnav button.tn { padding: .35rem .38rem; letter-spacing: .03em; font-size: .86rem; }
  .topnav .sep { display: none; }
  .theme-btn, .search-btn { width: 1.9rem; }
  .lang-switch { margin: 0; }
  .lang-switch a { padding: .16rem .32rem; font-size: .72rem; }
}
.sheet-subject { margin: 1rem 0 -1.6rem; font-size: .95rem; color: var(--accent-ink); }
/* long formulas must never widen the page: step lists keep their columns at the available width */
.dsteps { grid-template-columns: minmax(0, 1fr); }
.dsteps > li, .wsteps > li, .wsteps > li > div, .yourturn, .worked, .mistake { min-width: 0; }
.dsteps .math, .wsteps .math { max-width: 100%; }

/* long single words (Danish compounds like "Fødselsdagsparadokset") must never push the page sideways */
h1, h2, h3, .ch-title, .lbl { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 420px) { .ch-title { font-size: 2rem; } }

/* calculus notation (shelf 16, also used on the formula sheet, the hub and in search):
   .lim  = "lim" with "x → a" written small underneath;  .ilim = the limits of an integral, b above a, beside ∫ */
.lim { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; margin-right: .12em; font-style: normal; }
.lim > span { font-size: .55em; line-height: 1.1; margin-top: .12em; white-space: nowrap; }
.ilim { display: inline-flex; flex-direction: column; justify-content: space-between; vertical-align: middle; font-size: .58em; line-height: 1.15; margin: 0 .2em 0 -.05em; text-align: left; }
.ilim > span { display: block; }
.ilim > span:first-child { margin-bottom: .55em; }
/* a wide signature formula (a limit over a fraction) must shrink to fit the hero, not widen it: let the plate be narrower than its formula */
.sig-plate { min-width: 0; }

/* entry heads: grid columns may shrink below their content (a long formula or title shrinks/wraps instead of pushing the page sideways) */
.eh-text { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 939px) { .entry-head { grid-template-columns: minmax(0, 1fr); } }
.entry-head > *, .eh-text > * { min-width: 0; }

/* front page: the search bar is exactly as wide as the row of buttons under it */
.hero-go { display: grid; width: fit-content; max-width: 100%; }
.hero-go .hero-search { max-width: none; contain: inline-size; }   /* its own text never widens the box */
.hero-go .hs-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-go .cta .btn { flex: 1 1 auto; justify-content: center; text-align: center; }   /* when the buttons wrap, each line still spans the full width */