:root {
  --ground: #fbfaf7; --panel: #f2f0ea; --ink: #1d1c1a; --muted: #6b6860; --rule: #dedad0; --accent: #2f6fb5;
}
/* light by default; dark only when the reader picks it with the toggle */
:root[data-theme="dark"] { --ground: #17171a; --panel: #212126; --ink: #e9e7e1; --muted: #9a978e; --rule: #34343b; --accent: #7fb2e8; }
/* light text on a dark ground renders heavier on macOS; grayscale antialiasing evens it out */
:root[data-theme="dark"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#theme-toggle { position: absolute; top: 0.7rem; right: 0.9rem; z-index: 6; width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center;
  font: 1rem/1 system-ui, sans-serif; color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; }
#theme-toggle:hover { color: var(--ink); border-color: var(--muted); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.jumping body { visibility: hidden; }
section, h2, h3 { scroll-margin-top: 4.6rem; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.62 Georgia, "Iowan Old Style", "Times New Roman", serif; overflow-x: hidden; }
main { max-width: 47rem; margin: 0 auto; padding: 2.5rem 1.25rem 6rem; }
section { padding-top: 2rem; }
section + section { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
h1, h2, h3 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.75rem; margin: 0.8rem 0 1.4rem; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; margin: 2.2rem 0 0.6rem; }
h3 { font-size: 1.12rem; margin: 1.7rem 0 0.4rem; }
a { color: var(--accent); }
/* a list that follows a lead-in paragraph sits as close to it as its own items sit to each other */
p:has(+ ul), p:has(+ ol) { margin-bottom: 0; }
p + ul, p + ol { margin-top: 0; }
code { font: 0.86em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel); padding: 0.1em 0.3em; border-radius: 3px; }
pre { background: var(--panel); padding: 0.9rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 6px; }
pre code { background: none; padding: 0; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.2rem 0; }
table { border-collapse: collapse; margin-left: auto; margin-right: auto; font: 0.85rem system-ui, sans-serif; font-variant-numeric: tabular-nums; }
th, td { padding: 0.3rem 0.65rem; border-bottom: 1px solid var(--rule); text-align: right; }
th { color: var(--muted); font-weight: 600; }
th[align="center"], td[align="center"] { text-align: center; }
th[align="left"], td[align="left"] { text-align: left; }
.loading { color: var(--muted); font-family: system-ui, sans-serif; }

/* intro */
#intro { max-width: 47rem; margin: 0 auto; padding: 3rem 1.25rem 0.5rem; }
#intro h1 { font-size: 2.1rem; margin: 0 0 1.2rem; }

/* strip: the arc as a track of numbered points (--n of them) with labels, the passed part in the accent */
#strip { position: sticky; top: 0; z-index: 5; background: var(--ground); border-bottom: 1px solid var(--rule); font: 0.74rem/1.2 system-ui, sans-serif; }
#strip .row { margin: 0 auto; padding: 0.6rem 1.25rem 0.5rem; max-width: 52rem; display: flex; align-items: flex-start; gap: 1.5rem; }
#strip ol { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); position: relative; }
#strip ol::before, #strip ol::after { content: ""; position: absolute; top: 0.75rem; height: 2px; left: calc(50% / var(--n, 3)); right: calc(50% / var(--n, 3)); background: var(--rule); z-index: 0; }
#strip ol::after { right: auto; width: calc((100% - 100% / var(--n, 3)) * var(--progress, 0)); background: var(--accent); transition: width 0.25s; }
#strip li { position: relative; z-index: 1; text-align: center; }
#strip a { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: var(--muted); text-decoration: none; }
#strip a i { font-style: normal; font-weight: 700; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--ground); border: 2px solid var(--rule); color: var(--muted); }
#strip a.passed i { border-color: var(--accent); color: var(--accent); }
#strip a.current i { background: var(--accent); border-color: var(--accent); color: var(--ground); }
#strip a.current span { color: var(--ink); font-weight: 600; }
#strip a:hover span { color: var(--ink); }
/* narrow screens: the points keep the full width; only the current label shows, centered under its point
   (--i of --n) and held inside the track's edges; --w is the label's width, measured by site.js */
@media (max-width: 30rem) {
  #strip ol { padding-bottom: calc(0.3rem + 1.2em); }
  #strip li { position: static; }
  #strip a i { position: relative; z-index: 1; }
  #strip a span { visibility: hidden; position: absolute; bottom: 0; width: max-content; white-space: nowrap; font-weight: 600;
    left: clamp(0px, calc((var(--i) + 0.5) * 100% / var(--n, 3) - var(--w, 5rem) / 2), calc(100% - var(--w, 5rem))); }
  #strip a.current span { visibility: visible; }
}

/* anchors: every heading is numbered and linkable */
.anchor { color: var(--muted); text-decoration: none; font-variant-numeric: tabular-nums; }
h1 .anchor, h2 .anchor, h3 .anchor { color: var(--accent); margin-right: 0.15em; }