:root {
/* ==========================================================================
   COLOURS: edit here. Every colour on the site is one of these variables.

   Contents
     1. Colours               5. The index (search, entries)
     2. Base                  6. An agenda page
     3. Masthead and footer   7. Questions, answers, lists
     4. Page heads            8. Mathematics, star textures
   ========================================================================== */

  /* Page: light scheme. The dark scheme overrides these just below. */
  --bg: #fffaf0;            /* page background */
  --surface: #fffdf7;       /* inputs, menus, code blocks, buttons */
  --ink: #131313;           /* body text, headings, rules, the dark buttons */
  --muted: #55524b;         /* secondary text */
  --faint: #8b877e;         /* tertiary text, numbers, icons */
  --rule: #e4ddcc;         /* thin hairlines between items */
  --accent: #23397a;        /* links, focus rings, hovers */
  --accent-soft: #ebeef6;   /* background behind an accent */
  --gold: #8d6a24;
  --good: #3c6e4c;          /* answered claims */
  --good-soft: #e3eee5;
  --mark: #ecf6a4;          /* highlight: selected text, hovered nav and tags */

  /* Page heads: the dark band at the top of every page except the masthead.
     The same in both schemes. */
  --head: #1e2127;              /* About, Docs and agenda pages: flat colour */
  --head-ink: #f3ecdc;          /* text on a head */
  --head-muted: rgba(243, 236, 220, 0.72);
  --head-link: #a5b8ec;         /* links and labels on the landing-page head */
  --head-gold: #d9b86c;         /* details on an agenda head: badge, links, question bar */
  --head-glow: #2a2f3a;         /* the light at the centre of the map of problems */

  /* Landing-page head: a night sky, top to bottom, with stars on top. */
  --sky-top: #05070f;
  --sky-mid: #0a0f1d;
  --sky-bottom: #1e2127;

  --shadow: rgba(0, 0, 0, 0.08);   /* menu drop shadow */

  /* Fonts */
  --display: "Baskervville", "Libre Baskerville", Baskerville, Georgia, serif;
  --sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e2127;
    --surface: #16171b;
    --ink: #ece9e1;
    --muted: #a9a69e;
    --faint: #77746d;
    --rule: #2a2b30;
    --accent: #a5b8ec;
    --accent-soft: #1c2540;
    --gold: #d9b86c;
    --good: #7cc596;
    --good-soft: #14281c;
    --mark: #4a3d1c;
  }
}

/* ==========================================================================
   2. Base
   ========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font: 16.5px/1.65 var(--sans); display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
::selection { background: var(--mark); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.readme-body a, .about-page a, .q-text a, .list .text a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.readme-body a:hover, .about-page a:hover, .q-text a:hover, .list .text a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, .id { font-family: var(--mono); font-size: 0.84em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: var(--surface); padding: 6px 10px; }

/* Monospaced capitals mark everything that is apparatus rather than text. */
.label, .badge, .entry-kind, .entry-no, .section-head small, .contents-title, section h2 small, .status, nav.site, .chip, .menu-button, .pose {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* ==========================================================================
   3. Masthead and footer (the footer rules are further down, under "footer.site")
   ========================================================================== */
header.site { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--ink); }
header.site .wrap { display: flex; align-items: stretch; justify-content: space-between; gap: 0 24px; min-height: 52px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
nav.site { display: flex; align-items: stretch; flex-wrap: wrap; font-size: 0.72rem; border-right: 1px solid var(--ink); }
nav.site a { display: flex; align-items: center; padding: 0 18px; color: var(--ink); border-left: 1px solid var(--ink); }
nav.site a:hover { background: var(--mark); text-decoration: none; }
nav.site a[aria-current=page] { text-decoration: underline; text-underline-offset: 5px; }
/* Sign in, or the visitor's login and sign out: a button that looks like the links beside it. */
nav.site button.signin { display: flex; align-items: center; padding: 0 18px; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); background: none; border: 0; border-left: 1px solid var(--ink); cursor: pointer; }
nav.site button.signin:hover { background: var(--mark); }
button.link { padding: 0; font: inherit; color: var(--accent); background: none; border: 0; cursor: pointer; }
button.link:hover { text-decoration: underline; }
.badge.private { color: var(--gold); }
@media (max-width: 600px) {
  header.site .wrap { padding-right: 0; }
  nav.site { width: calc(100% + 16px); margin-left: -16px; border-top: 1px solid var(--ink); border-right: 0; }
  nav.site a, nav.site button.signin { flex: 1 1 auto; justify-content: center; min-height: 40px; padding: 0 10px; white-space: nowrap; letter-spacing: 0.06em; }
  nav.site a:first-child { border-left: 0; }
}

/* ==========================================================================
   4. Page heads
   The landing page has a night sky; About, Docs and agenda pages have a flat colour (--head).
   ========================================================================== */
.hero, .agenda-head { position: relative; color: var(--head-ink); }
.hero::before, .agenda-head::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background:
    var(--stars-a) 0 0 / 420px 420px, var(--stars-b) 140px 60px / 263px 263px,
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%);
  border-bottom: 1px solid var(--ink); }
/* Every page but the landing page: a flat colour, and no rule beneath it on About and Docs. */
.about-page .hero::before, .agenda-head::before { background: var(--head); }
.about-page .hero::before { border-bottom: 0; }
.hero { padding: 76px 0 72px; margin-bottom: 48px; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 5.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 22px; max-width: 19ch; text-wrap: balance; }
.hero p { color: var(--head-ink); max-width: 56ch; margin: 0; font: inherit; }
.hero a { color: var(--head-link); }
.agenda-head a { color: var(--head-gold); }
.hero p + p { margin-top: 16px; }

/* About and Docs text */
.page-fallback { white-space: pre-wrap; font: inherit; }
#page-content img { max-width: 100%; height: auto; }

.about-page { max-width: 680px; margin: 0 auto; padding-bottom: 72px; }
.about-page .hero { padding-bottom: 16px; margin-bottom: 24px; }
.about-page .hero h1:last-child { margin-bottom: 0; }
.about-page .hero p { max-width: none; line-height: 1.7; }
.about-page .hero + section h2 { margin-top: 24px; }
.about-page section { counter-increment: section; }
.about-page section h2 { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 400; margin: 40px 0 12px; padding: 0; border: 0; }
.about-page section h2::before { content: "§ " counter(section); display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); }
.about-page section p { margin: 0 0 16px; line-height: 1.7; }

/* ==========================================================================
   5. The index (search, filters, entries)
   ========================================================================== */
.section-head { display: flex; align-items: baseline; gap: 12px; padding-top: 12px; margin: 0 0 8px; }
.section-head h2 { font-family: var(--display); font-size: 1.6rem; font-weight: 400; margin: 0; padding: 0; border: 0; }
.controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 10px 0 14px; border-bottom: 1px solid var(--rule); font-family: var(--sans); }
.search { position: relative; flex: 1 1 260px; }
.search svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.controls input[type=search] { width: 100%; padding: 8px 12px 8px 33px; border: 1px solid var(--ink); border-radius: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.92rem; }
.controls input[type=search]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chips { display: flex; gap: 18px; flex-wrap: wrap; }
/* Pose an agenda: in the type of the labels, but plainly a button. */
.pose { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; color: var(--bg); background: var(--ink); border: 1px solid var(--ink); }
.pose:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); text-decoration: none; }
.chip { border: 0; background: none; padding: 4px 0; cursor: pointer; }
.chip:hover { color: var(--ink); }
.chip[aria-pressed=true] { color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--ink); }
select { padding: 7px 10px; border: 1px solid var(--rule); border-radius: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.88rem; }
.menu { position: relative; }
.menu-button { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.menu-button::before { content: "Sort:"; color: var(--faint); margin-right: -4px; }
.menu-button span { color: var(--ink); }
.menu-button::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.menu-button[aria-expanded=true]::after { transform: translateY(1px) rotate(-135deg); }
.menu-button:hover span, .menu-button[aria-expanded=true] span { color: var(--accent); }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 100%; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow); white-space: nowrap; font-size: 0.88rem; }
.menu-list:focus { outline: none; }
.menu-list li { padding: 7px 12px 7px 28px; cursor: pointer; position: relative; }
.menu-list li.active { background: var(--accent-soft); color: var(--accent); }
.menu-list { font-family: var(--sans); }
.menu-list li[aria-selected=true]::before { content: "✓"; position: absolute; left: 10px; color: var(--accent); }
@media (max-width: 600px) { .menu-list { left: 0; right: auto; } }
@media (prefers-reduced-motion: reduce) { .menu-button::after { transition: none; } }

.entries { list-style: none; margin: 0; padding: 0 0 72px; counter-reset: entry; }
.entry { counter-increment: entry; position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); padding: 28px 0 26px; border-bottom: 1px solid var(--rule); }
.entry-no::before { content: counter(entry, decimal-leading-zero); }
.entry-no { color: var(--faint); padding-top: 3px; }
.entry-kind { margin-bottom: 6px; }
.entry h3 { font-family: var(--display); font-size: clamp(1.4rem, 2.8vw, 1.75rem); font-weight: 400; line-height: 1.22; margin: 0 0 10px; letter-spacing: -0.005em; }
.entry h3 a { color: var(--ink); }
.entry h3 a::after { content: ""; position: absolute; inset: 0; }
.entry h3 a:hover { text-decoration: none; }
.entry:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.entry .question { font-size: 1.04rem; font-weight: 500; margin: 0 0 8px; max-width: 70ch; }
.entry .summary { color: var(--muted); font-size: 0.97rem; margin: 0 0 14px; max-width: 70ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); }
.meter { display: inline-flex; align-items: center; gap: 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { position: relative; z-index: 1; font-family: var(--sans); font-size: 0.76rem; color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 0; padding: 1px 7px; cursor: pointer; line-height: 1.5; }
.tag:hover { color: var(--ink); border-color: var(--ink); background: var(--mark); text-decoration: none; }
@media (max-width: 600px) { .entry { grid-template-columns: minmax(0, 1fr); } .entry-no { display: none; } }

.badge { color: var(--ink); }
.hero .badge { color: var(--head-link); }
.agenda-head .badge { color: var(--head-gold); }
.bar { display: inline-block; width: 64px; height: 4px; background: var(--rule); overflow: hidden; vertical-align: middle; }
.bar > span { display: block; height: 100%; background: var(--good); }

.empty { color: var(--muted); padding: 32px 0 64px; font-style: italic; }

/* ==========================================================================
   6. An agenda page
   ========================================================================== */
.agenda-head { padding: 28px 0 52px; margin-bottom: 36px; }
.agenda-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.8vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; margin: 10px 0 18px; max-width: 24ch; text-wrap: balance; }
.agenda-head .question { font-size: 1.12rem; line-height: 1.6; font-weight: 500; margin: 0 0 16px; max-width: 64ch; padding-left: 18px; border-left: 2px solid var(--head-gold); }
.agenda-head .summary { font-size: 1rem; color: var(--head-muted); max-width: 70ch; margin: 0; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; padding: 0 0 72px; }
.layout > aside { grid-column: 2; grid-row: 1; }
.layout > .body { grid-column: 1; grid-row: 1; }
.side { position: sticky; top: 84px; padding-top: 14px; display: flex; flex-direction: column; gap: 26px; font-family: var(--sans); font-size: 0.88rem; }
.contents-title { display: block; margin-bottom: 8px; }
.contents ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.contents a { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); padding: 4px 0 4px 14px; margin-left: -1px; border-left: 1.5px solid transparent; }
.contents a:hover { color: var(--ink); text-decoration: none; }
.contents a.current { color: var(--ink); border-left-color: var(--ink); }
.contents a small { color: var(--faint); font-family: var(--mono); font-size: 0.75rem; }
.side .actions { display: flex; flex-direction: column; gap: 8px; }
.side .who { color: var(--muted); }
.side .who a { color: var(--ink); }
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .layout > aside, .layout > .body { grid-column: 1; grid-row: auto; }
  .side { position: static; padding-top: 24px; gap: 20px; }
  .side .contents { display: none; }
  .side .actions { flex-direction: row; flex-wrap: wrap; }
}

.button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: 0.86rem; }
.button.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.button:hover { text-decoration: none; border-color: var(--accent); }
.button.primary:hover { background: var(--accent); border-color: var(--accent); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.stat { padding: 10px 12px 8px; }
.stat + .stat { border-left: 1px solid var(--ink); }
.stat b { display: block; font-family: var(--display); font-size: 1.45rem; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 0.78rem; }
.progress { margin-top: 10px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.8rem; }
.progress .bar { flex: 1; }

/* Sections of an agenda page share one heading style, with the count beside. */
.body > section { padding-top: 40px; }
.body > section:first-child { padding-top: 8px; }
section h2 { font-family: var(--display); font-size: 1.6rem; font-weight: 400; margin: 0 0 14px; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

section h2 small a { color: inherit; }
section h2 small a:hover { color: var(--accent); }

.readme-body { line-height: 1.7; overflow-wrap: anywhere; }
.readme-body > :first-child { margin-top: 0; }
.readme-body h1, .readme-body h2, .readme-body h3 { font-family: var(--display); line-height: 1.3; font-weight: 400; border: 0; padding: 0; display: block; }
.readme-body h1 { font-size: 1.5rem; margin: 0 0 20px; }
.readme-body h2 { font-size: 1.4rem; margin: 34px 0 12px; }
.readme-body h3 { font-size: 1.15rem; font-style: italic; margin: 26px 0 10px; }
.readme-body p { margin: 0 0 18px; }
.readme-body li { margin: 6px 0; }
.readme-body img { max-width: 100%; height: auto; }
.readme-body pre { padding: 16px; background: var(--surface); border: 1px solid var(--rule); overflow-x: auto; }
.readme-body .readme-fallback { white-space: pre-wrap; }
.readme-body blockquote { margin-left: 0; padding-left: 20px; border-left: 2px solid var(--rule); color: var(--muted); }
.readme-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; }
.readme-body th, .readme-body td { border-bottom: 1px solid var(--rule); padding: 8px 14px 8px 0; text-align: left; }
.readme-body th { border-bottom: 1px solid var(--ink); font-weight: 600; }
.readme-body hr { border: 0; border-top: 1px solid var(--rule); margin: 30px 0; }
.footnotes { font-size: 0.9em; }
.footnotes .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-footnote-ref], [data-footnote-backref] { scroll-margin-top: 24px; }
.footnotes li { scroll-margin-top: 24px; }


/* ==========================================================================
   7. Questions, answers, lists
   ========================================================================== */
.q-filter { display: flex; gap: 18px; margin: 0 0 6px; }
ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; }
ul.tree ul { margin-left: 10px; padding-left: 22px; border-left: 1px solid var(--rule); }
ul.tree > .q { border-bottom: 1px solid var(--rule); }
ul.tree > .q:last-child { border-bottom: 0; }
.q { padding: 14px 0; }
ul.tree ul .q { padding: 12px 0 2px; }
.q-line { display: flex; gap: 12px; align-items: flex-start; }
.q-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.q-text p { margin: 0 0 8px; }
.q-text p:last-child { margin-bottom: 0; }
.q-title { margin: 0; font-size: 1.15rem; line-height: 1.45; color: var(--ink); }
.q-statement { margin-top: 8px; color: var(--ink); }
.q-motivation { margin-top: 8px; color: var(--muted); font-size: 0.96rem; }
.q-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin: 6px 0 0 32px; }
.q-meta a { color: var(--muted); }
.q-meta a:hover { color: var(--accent); }
.answers { margin: 10px 0 0 32px; display: flex; flex-direction: column; gap: 6px; }
.answer { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 8px 12px; background: var(--good-soft); border-left: 2px solid var(--good); }
.answer .text { font-size: 0.97rem; flex: 1; min-width: 12rem; }
.answer .note { font-size: 0.78rem; }

.mark { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; margin-top: 4px; }
.s-answered { background: var(--good); color: var(--bg); }
.mark.s-open { font-size: 1.4rem; font-weight: 400; color: var(--muted); transform: translateY(-5px); }
.status { padding: 0; flex: none; margin-top: 5px; font-size: 0.64rem; }
.status.s-open { color: var(--accent); }
.status.s-answered { background: none; color: var(--good); }
li.q[hidden] { display: none; }

/* The map of problems: a constellation on the night sky of the page heads. Names appear only on the path that is lit. */
.sky { margin: 0 0 18px; display: flex; justify-content: center; padding: 12px 0; overflow: hidden; background: var(--stars-a) 0 0 / 420px 420px, var(--stars-b) 140px 60px / 263px 263px, radial-gradient(ellipse at center, var(--head-glow) 0%, var(--head) 70%); }
.sky svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.sky line, .sky .star { transition: opacity .25s, stroke .25s, stroke-opacity .25s; }
.sky line { stroke: var(--head-muted); stroke-opacity: 0; stroke-width: 0.8; }
.sky line.on { stroke: var(--head-gold); stroke-opacity: 0.85; stroke-width: 1.2; }
.sky .star circle { fill: var(--head-gold); fill-opacity: 0.4; stroke: var(--head-gold); stroke-width: 1; filter: url(#glow); }
.sky .star.s-answered circle, .sky .star.readme circle { fill-opacity: 1; }
.sky .star.readme circle { fill: var(--head-ink); stroke: var(--head-ink); }
.sky .star.s-retired circle { fill: var(--head-muted); stroke: var(--head-muted); fill-opacity: 0.2; }
.sky .star text { fill: var(--head-ink); font-family: var(--sans); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .25s; paint-order: stroke; stroke: var(--head); stroke-width: 3px; stroke-linejoin: round; }
.sky svg.lit .star:not(.on):not(.readme) { opacity: 0.4; }
.sky .star.on text { opacity: 1; }
.sky .star.on circle { fill-opacity: 1; }
.sky .star:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .sky line, .sky .star, .sky .star text { transition: none; } }

ol.list, ul.list { margin: 0; padding: 0; list-style: none; }
.list li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.list li:last-child { border-bottom: 0; }
.list .what { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.list .why { color: var(--muted); font-family: var(--sans); font-size: 0.8rem; margin-top: 4px; }
.who { font-size: 0.86rem; }
.who .n { color: var(--muted); }

.note { color: var(--muted); font-size: 0.9rem; }

/* Footer */
footer.site { border-top: 1px solid var(--rule); color: var(--muted); font-family: var(--sans); font-size: 0.82rem; }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; padding-bottom: 30px; }
footer.site nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--ink); }

/* ==========================================================================
   8. Mathematics
   ========================================================================== */
/* KaTeX sets formulas at 1.21em, which outsizes the text and spreads the lines;
   display mathematics scrolls rather than widening the page. */
.katex { font-size: 1.08em; line-height: 1; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   Star textures (the landing page and the map of problems)
   Two tiled SVGs of dots, layered in .hero::before. Nothing here is meant to be edited by hand.
   ========================================================================== */
:root {
  --stars-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23fff8e6'%3E%3Ccircle cx='136' cy='63' r='1.2' fill-opacity='0.38'/%3E%3Ccircle cx='345' cy='40' r='1.0' fill-opacity='0.38'/%3E%3Ccircle cx='213' cy='16' r='0.8' fill-opacity='0.6'/%3E%3Ccircle cx='101' cy='231' r='0.45' fill-opacity='0.85'/%3E%3Ccircle cx='52' cy='94' r='1.2' fill-opacity='0.7'/%3E%3Ccircle cx='26' cy='246' r='0.45' fill-opacity='0.94'/%3E%3Ccircle cx='20' cy='361' r='0.65' fill-opacity='0.6'/%3E%3Ccircle cx='227' cy='240' r='1.0' fill-opacity='0.84'/%3E%3Ccircle cx='76' cy='244' r='1.2' fill-opacity='0.46'/%3E%3Ccircle cx='41' cy='299' r='1.0' fill-opacity='0.39'/%3E%3Ccircle cx='87' cy='286' r='0.8' fill-opacity='0.82'/%3E%3Ccircle cx='196' cy='388' r='0.65' fill-opacity='0.53'/%3E%3Ccircle cx='334' cy='294' r='0.55' fill-opacity='0.4'/%3E%3Ccircle cx='126' cy='208' r='0.65' fill-opacity='0.79'/%3E%3Ccircle cx='121' cy='412' r='0.45' fill-opacity='0.66'/%3E%3Ccircle cx='69' cy='144' r='0.8' fill-opacity='0.6'/%3E%3Ccircle cx='404' cy='33' r='1.0' fill-opacity='0.69'/%3E%3Ccircle cx='368' cy='132' r='1.2' fill-opacity='0.56'/%3E%3Ccircle cx='209' cy='335' r='0.45' fill-opacity='0.85'/%3E%3Ccircle cx='397' cy='199' r='1.2' fill-opacity='0.39'/%3E%3Ccircle cx='307' cy='130' r='1.0' fill-opacity='0.95'/%3E%3Ccircle cx='345' cy='120' r='0.8' fill-opacity='0.88'/%3E%3Ccircle cx='146' cy='395' r='0.65' fill-opacity='0.45'/%3E%3Ccircle cx='49' cy='25' r='0.65' fill-opacity='0.43'/%3E%3Ccircle cx='104' cy='164' r='0.8' fill-opacity='0.4'/%3E%3Ccircle cx='189' cy='231' r='0.55' fill-opacity='0.84'/%3E%3Ccircle cx='363' cy='117' r='0.8' fill-opacity='0.94'/%3E%3Ccircle cx='287' cy='160' r='0.55' fill-opacity='0.44'/%3E%3Ccircle cx='74' cy='97' r='0.55' fill-opacity='0.36'/%3E%3Ccircle cx='349' cy='77' r='0.65' fill-opacity='0.35'/%3E%3Ccircle cx='176' cy='155' r='1.0' fill-opacity='0.54'/%3E%3Ccircle cx='53' cy='361' r='1.0' fill-opacity='0.74'/%3E%3Ccircle cx='311' cy='192' r='1.2' fill-opacity='0.83'/%3E%3Ccircle cx='165' cy='168' r='0.45' fill-opacity='0.64'/%3E%3Ccircle cx='168' cy='80' r='0.55' fill-opacity='0.61'/%3E%3Ccircle cx='46' cy='252' r='0.45' fill-opacity='0.35'/%3E%3Ccircle cx='64' cy='43' r='0.65' fill-opacity='0.72'/%3E%3Ccircle cx='30' cy='87' r='0.8' fill-opacity='0.44'/%3E%3Ccircle cx='106' cy='146' r='0.65' fill-opacity='0.63'/%3E%3Ccircle cx='48' cy='205' r='0.8' fill-opacity='0.64'/%3E%3Ccircle cx='131' cy='61' r='1.2' fill-opacity='0.56'/%3E%3Ccircle cx='111' cy='348' r='0.55' fill-opacity='0.66'/%3E%3Ccircle cx='86' cy='400' r='0.65' fill-opacity='0.44'/%3E%3Ccircle cx='228' cy='11' r='1.0' fill-opacity='0.53'/%3E%3Ccircle cx='270' cy='38' r='0.65' fill-opacity='0.66'/%3E%3Ccircle cx='381' cy='149' r='0.55' fill-opacity='0.67'/%3E%3Ccircle cx='327' cy='138' r='0.55' fill-opacity='0.72'/%3E%3Ccircle cx='331' cy='318' r='0.55' fill-opacity='0.83'/%3E%3Ccircle cx='344' cy='311' r='0.55' fill-opacity='0.47'/%3E%3Ccircle cx='207' cy='307' r='0.45' fill-opacity='0.82'/%3E%3Ccircle cx='198' cy='81' r='1.0' fill-opacity='0.92'/%3E%3Ccircle cx='188' cy='394' r='0.65' fill-opacity='0.92'/%3E%3Ccircle cx='153' cy='93' r='0.55' fill-opacity='0.63'/%3E%3Ccircle cx='142' cy='203' r='1.0' fill-opacity='0.85'/%3E%3Ccircle cx='201' cy='274' r='1.2' fill-opacity='0.4'/%3E%3Ccircle cx='277' cy='382' r='1.2' fill-opacity='0.8'/%3E%3Ccircle cx='201' cy='75' r='1.2' fill-opacity='0.55'/%3E%3Ccircle cx='336' cy='408' r='0.8' fill-opacity='0.63'/%3E%3Ccircle cx='312' cy='36' r='0.55' fill-opacity='0.45'/%3E%3Ccircle cx='53' cy='63' r='0.8' fill-opacity='0.83'/%3E%3Ccircle cx='61' cy='347' r='0.8' fill-opacity='0.74'/%3E%3Ccircle cx='147' cy='230' r='0.55' fill-opacity='0.36'/%3E%3Ccircle cx='336' cy='305' r='0.45' fill-opacity='0.67'/%3E%3Ccircle cx='392' cy='182' r='0.55' fill-opacity='0.85'/%3E%3Ccircle cx='89' cy='106' r='0.65' fill-opacity='0.65'/%3E%3Ccircle cx='321' cy='137' r='1.0' fill-opacity='0.6'/%3E%3Ccircle cx='55' cy='382' r='0.65' fill-opacity='0.89'/%3E%3Ccircle cx='278' cy='342' r='1.0' fill-opacity='0.6'/%3E%3Ccircle cx='385' cy='211' r='1.0' fill-opacity='0.44'/%3E%3Ccircle cx='214' cy='367' r='0.55' fill-opacity='0.72'/%3E%3C/g%3E%3C/svg%3E");
  --stars-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='263' height='263'%3E%3Cg fill='%23fff8e6'%3E%3Ccircle cx='119' cy='147' r='0.8' fill-opacity='0.62'/%3E%3Ccircle cx='225' cy='50' r='1.0' fill-opacity='0.64'/%3E%3Ccircle cx='161' cy='49' r='0.8' fill-opacity='0.53'/%3E%3Ccircle cx='24' cy='213' r='1.4' fill-opacity='0.73'/%3E%3Ccircle cx='157' cy='104' r='0.8' fill-opacity='0.74'/%3E%3Ccircle cx='162' cy='41' r='0.45' fill-opacity='0.85'/%3E%3Ccircle cx='17' cy='9' r='0.55' fill-opacity='0.71'/%3E%3Ccircle cx='205' cy='86' r='1.0' fill-opacity='0.86'/%3E%3Ccircle cx='137' cy='168' r='0.8' fill-opacity='0.35'/%3E%3Ccircle cx='22' cy='172' r='0.8' fill-opacity='0.95'/%3E%3Ccircle cx='262' cy='221' r='1.4' fill-opacity='0.5'/%3E%3Ccircle cx='199' cy='135' r='0.45' fill-opacity='0.39'/%3E%3Ccircle cx='202' cy='105' r='0.65' fill-opacity='0.58'/%3E%3Ccircle cx='252' cy='223' r='0.45' fill-opacity='0.48'/%3E%3Ccircle cx='244' cy='14' r='0.8' fill-opacity='0.94'/%3E%3Ccircle cx='105' cy='19' r='1.4' fill-opacity='0.47'/%3E%3Ccircle cx='178' cy='89' r='0.65' fill-opacity='0.55'/%3E%3Ccircle cx='254' cy='199' r='0.45' fill-opacity='0.43'/%3E%3Ccircle cx='186' cy='3' r='0.8' fill-opacity='0.83'/%3E%3Ccircle cx='47' cy='147' r='0.8' fill-opacity='0.66'/%3E%3Ccircle cx='259' cy='202' r='0.8' fill-opacity='0.74'/%3E%3Ccircle cx='31' cy='111' r='0.55' fill-opacity='0.35'/%3E%3Ccircle cx='227' cy='256' r='1.0' fill-opacity='0.53'/%3E%3Ccircle cx='233' cy='55' r='0.8' fill-opacity='0.95'/%3E%3Ccircle cx='158' cy='152' r='0.45' fill-opacity='0.94'/%3E%3Ccircle cx='56' cy='68' r='1.0' fill-opacity='0.55'/%3E%3C/g%3E%3C/svg%3E");
}