/* ==========================================================================
   nanoswe — modern retro terminal
   Monospace throughout, phosphor green on near-black, terminal-window chrome,
   subtle scanlines. Inspired by nanochat's ASCII report-card aesthetic.
   ========================================================================== */

:root {
  /* ---- Light (default): warm paper terminal ---- */
  color-scheme: light;

  /* Surfaces */
  --bg:        #fcfcfb;
  --bg-2:      #f5f5f3;
  --panel:     #ffffff;
  --panel-bar: #f3f3f1;
  --code-bg:   #f4f4f2;

  /* Ink */
  --text:      #2c342e;
  --bright:    #141a16;
  --muted:     #5f6a62;
  --faint:     #949c95;

  /* Lines */
  --border:        #ececea;
  --border-strong: #dcdcd9;

  /* Phosphor (darkened for contrast on paper) */
  --green:     #128a4a;
  --green-dim: #4f9265;
  --amber:     #a86a08;
  --cyan:      #0e7d88;
  --red:       #cf4436;
  --glow:      rgba(18, 138, 74, .16);
  --glow-soft: rgba(18, 138, 74, .09);

  --scan-opacity: .28;

  --mono: "Berkeley Mono", ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code",
          Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --measure: 760px;
  --wide: 1080px;
  /* Leaderboard column: wide enough that all six board columns fit unscrolled. */
  --board: 940px;
}

:root[data-theme="dark"] {
  /* ---- Dark: phosphor green on near-black ---- */
  color-scheme: dark;

  --bg:        #0a0e0c;
  --bg-2:      #0c110e;
  --panel:     #0e1411;
  --panel-bar: #121a15;
  --code-bg:   #0c1210;

  --text:      #c3d3c8;
  --bright:    #e9f6ee;
  --muted:     #708577;
  --faint:     #4c5b52;

  --border:        #1c2a22;
  --border-strong: #2a3b31;

  --green:     #4ff58a;
  --green-dim: #2f9d5f;
  --amber:     #ffb454;
  --cyan:      #58d3de;
  --red:       #ff6b6b;
  --glow:      rgba(79, 245, 138, .30);
  --glow-soft: rgba(79, 245, 138, .14);

  --scan-opacity: .5;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--green); color: #05100a; }

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Header / nav ---------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 24px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  color: var(--bright);
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  display: block;
  height: 30px;
  width: auto;
}
:root .logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.brand .glyph { color: var(--green); }
.brand .name { color: var(--bright); }
.brand .name b { color: var(--green); font-weight: 700; }
.brand .tag {
  font-size: 10.5px;
  color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
}

.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-links a {
  color: var(--muted);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color .12s, background .12s;
}
.nav-links a:hover { color: var(--bright); background: var(--glow-soft); text-decoration: none; }
.nav-links a.active { color: var(--bright); }
.nav-links a.active::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  margin: 4px 8px 0;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.theme-toggle:hover {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: var(--glow-soft);
}
.theme-toggle .ico { font-size: 13px; line-height: 1; }

/* ---------- Layout ----------------------------------------------------- */

.wrap  { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.prose { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }
main { padding: 44px 0 96px; }

/* ---------- Hero ------------------------------------------------------- */

.hero { margin-bottom: 8px; text-align: center; }

img.banner {
  display: block;
  margin: 8px auto 0;
  width: min(440px, 88%);
  height: auto;
  border-radius: 10px;
}

.hero-out {
  margin: 22px auto 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  max-width: 680px;
}
.hero-out b { color: var(--bright); font-weight: 700; }

.eyebrow {
  color: var(--green);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.page-title {
  color: var(--bright);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.title-logo {
  display: block;
  height: 1.15em;
  width: auto;
  position: relative;
  top: 0.08em;
}
:root[data-theme="dark"] .title-logo.logo-dark { display: inline-block; }

.lede { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin: 0; max-width: 680px; }

/* ---------- Terminal window ------------------------------------------- */

.term {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.table-scroll { overflow-x: auto; }

/* ---------- Leaderboard ----------------------------------------------- */

.section-title {
  text-align: center;
  color: var(--bright);
  font-size: clamp(20px, 3vw, 23px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 50px 0 0;
}
.record-history-title { margin-top: 34px; }

.ext-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 28px auto 0;
}
.ext {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 5px 15px;
  transition: color .12s, border-color .12s, background .12s;
}
.ext:hover {
  color: var(--green);
  text-decoration: none;
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: var(--glow-soft);
}
.ext svg { display: block; }

.targets { margin: 38px auto 0; }
.target-strip {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--board);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.target-label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-right: 4px;
}
.target {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 3px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--panel);
}
.target .tm { color: var(--text); font-weight: 600; }
.target .ts { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.target.beaten { opacity: 0.72; }
.target.beaten .tm { text-decoration: line-through; }
.target.beaten::before { content: "✓"; color: var(--green); font-weight: 700; }

.track { margin: 40px auto 0; max-width: var(--board); }

.track-head { margin-bottom: 14px; text-align: center; }
.track-head h2 {
  color: var(--bright);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.track-head .cost { color: var(--muted); font-weight: 600; }
.track-head .badge {
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
  background: var(--glow-soft);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.04em;
}
.track-head p { margin: 8px 0 0; color: var(--muted); font-size: 14px; max-width: 640px; }

table.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 860px;
}
table.board thead th {
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dim);
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.board tbody td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.board tbody tr:last-child td { border-bottom: 0; }
table.board tbody tr:hover { background: var(--glow-soft); }
table.board tbody tr.wr { background: var(--glow-soft); }
.wr-chip {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  border-radius: 4px;
  vertical-align: 2px;
}

.rank { color: var(--green); font-weight: 700; width: 1%; }
.rank .medal::before { content: "#"; color: var(--green-dim); }
.entry-name { color: var(--bright); font-weight: 700; }
.entry-sub { display: block; font-size: 12.5px; color: var(--faint); font-weight: 400; margin-top: 3px; }
.desc { color: var(--text); }
.num { font-variant-numeric: tabular-nums; }
.score { color: var(--green); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.date { color: var(--muted); white-space: nowrap; }

.btn-launch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  opacity: .85;
  transition: opacity .13s, transform .13s, color .13s;
}
.btn-launch:hover { color: var(--bright); opacity: 1; transform: translateY(-1px); text-decoration: none; }

/* Center the link columns (Model, Evals, Script) */
table.board th:nth-last-child(-n + 3),
table.board td:nth-last-child(-n + 3) { text-align: center; }

.board-note { font-size: 13px; color: var(--faint); margin-top: 14px; }

.cta { text-align: center; color: var(--muted); margin: 44px auto 0; font-size: 14px; }
.cta-post { margin-top: 8px; }

/* ---------- Prose (blog) ---------------------------------------------- */

.post-meta {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 0;
}
.post-meta .dot { color: var(--border-strong); }
.post-meta sup { font-size: 0.7em; vertical-align: super; line-height: 0; }
.post-meta .affils { display: flex; flex-direction: column; gap: 2px; }
.post-meta .date { flex-basis: 100%; margin-top: 6px; }

/* break-word, not anywhere: a bare URL in the references is wider than a phone
   screen and would otherwise push the whole page sideways, but ordinary prose
   should still only break at spaces. */
.article-body {
  font-size: 15.5px;
  line-height: 1.75;
  margin-top: 36px;
  color: var(--text);
  overflow-wrap: break-word;
}
.article-body p { margin: 0 0 22px; }
.article-body b, .article-body strong { color: var(--bright); }
.article-body em { color: var(--bright); font-style: italic; }
.article-body h2 {
  color: var(--bright);
  font-size: 20px;
  font-weight: 700;
  margin: 46px 0 16px;
  line-height: 1.25;
}
.article-body h3 {
  color: var(--bright);
  font-size: 16.5px;
  font-weight: 700;
  margin: 34px 0 12px;
}
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 24px; }
.article-body li { margin: 0 0 8px; }
.article-body li::marker { color: var(--green-dim); }
.article-body blockquote {
  margin: 26px 0;
  padding: 8px 20px;
  border-left: 2px solid var(--green);
  background: var(--glow-soft);
  color: var(--muted);
}
.article-body code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--amber);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.article-body pre {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--code-bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0 0 24px;
}
.article-body pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.article-body a { border-bottom: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.article-body a:hover { text-decoration: none; border-bottom-color: var(--green); }

/* ---------- Blog layout: rail · article · footnote gutter --------------
   One column by default. At 1020px the sticky contents rail appears; at
   1300px footnotes move out into their own right-hand gutter (blog.js
   matches that breakpoint to align each note with its marker).
   ----------------------------------------------------------------------- */

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  column-gap: 40px;
}
.post-rail { display: none; }
.post-main { min-width: 0; }

@media (min-width: 1020px) {
  .post-layout {
    grid-template-columns: 220px minmax(0, 720px);
    padding: 44px 24px 96px;
  }
  .post-main { padding: 0; }
  .post-rail {
    display: block;
    position: sticky;
    top: 84px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 1300px) {
  .post-layout { grid-template-columns: 220px minmax(0, 720px) 260px; }
}

/* Sticky contents rail */

.toc-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc-link {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  transition: color .12s, border-color .12s;
}
.toc-link:hover { color: var(--bright); text-decoration: none; }
.toc-link.sub { padding-left: 26px; font-size: 12.5px; }
.toc-link.active { color: var(--green); border-left-color: var(--green); }

/* Collapsed contents, narrow screens only

   The counterpart to the rail above: that one is hidden below 1020px, this one
   is hidden from 1020px up, so the article never carries two tables of
   contents at once. Closed by default — on a phone the point is to reach the
   text, with the outline a tap away. */

.toc-mobile {
  margin: 26px 0 0;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}
.toc-mobile > summary {
  padding: 11px 16px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  list-style: none;  /* Firefox */
}
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile > summary::after {
  content: "+";
  float: right;
  font-size: 13px;
  line-height: 1;
  color: var(--green);
}
.toc-mobile[open] > summary::after { content: "−"; }
.toc-mobile[open] > summary { border-bottom: 1px solid var(--border); }
.toc-mobile ol { margin: 0; padding: 11px 18px 13px 36px; font-size: 14.5px; }
.toc-mobile li { margin: 0 0 4px; }
.toc-mobile li:last-child { margin: 0; }
.toc-mobile li::marker { color: var(--green-dim); }
.toc-mobile li.sub { font-size: 13.5px; }
/* Padded to a comfortable tap target without spreading the list out. */
.toc-mobile a { display: inline-block; padding: 3px 0; color: var(--muted); }
.toc-mobile a:hover { color: var(--bright); text-decoration: none; }

@media (min-width: 1020px) {
  .toc-mobile { display: none; }
}

/* Inline index of the sections below */

.post-index {
  margin: 30px 0 34px;
  padding: 15px 20px 17px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}
.post-index-title {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.post-index ol { margin: 0; padding-left: 20px; font-size: 14.5px; }
.post-index li { margin: 0 0 5px; }
.post-index li:last-child { margin-bottom: 0; }
.post-index li.sub { margin-left: 18px; font-size: 13.5px; }
.post-index a { color: var(--text); border-bottom: 1px solid transparent; }
.post-index a:hover {
  color: var(--green);
  text-decoration: none;
  border-bottom-color: color-mix(in srgb, var(--green) 40%, transparent);
}

/* Footnotes — inline blocks by default, margin notes once the gutter fits */

.article-body { position: relative; }
.article-body h2, .article-body h3 { scroll-margin-top: 84px; }
.article-body[id] { scroll-margin-top: 110px; }

.fn-ref {
  color: var(--green);
  font-weight: 700;
  font-size: 0.68em;
  vertical-align: super;
  line-height: 0;
  padding-left: 1px;
}

.article-body .fn-ref a {
  color: inherit;
  border-bottom: 0;
  text-decoration: none;
}
.article-body .fn-ref a:hover { text-decoration: underline; text-underline-offset: 2px; }

.sidenote {
  display: block;
  margin: -6px 0 24px;
  padding-left: 13px;
  border-left: 2px solid color-mix(in srgb, var(--green) 30%, transparent);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.sidenote .fn-num { color: var(--green); font-weight: 700; margin-right: 6px; }
.sidenote code { font-size: 0.92em; }
.sidenote a { border-bottom: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }

/* Em dash — monospace crams it into one cell, which reads as a hyphen.
   scaleX stretches the bar without touching its stroke weight; the margins
   give the extra width somewhere to go so it never touches its neighbours. */

.mdash {
  display: inline-block;
  transform: scaleX(1.7);
  margin: 0 0.11em;
}

/* Citations — a bracketed [1] in the text, resolved in References below */

.cite-ref { color: var(--green); font-weight: 600; white-space: nowrap; }
.article-body .cite-ref a { color: inherit; border-bottom: 0; }
.article-body .cite-ref a:hover { text-decoration: underline; text-underline-offset: 2px; }

ol.references {
  margin: 0;
  padding-left: 30px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
ol.references li { margin: 0 0 12px; padding-left: 4px; scroll-margin-top: 96px; }
ol.references li::marker { color: var(--green-dim); }
ol.references li:target { color: var(--text); }
ol.references li:target::marker { color: var(--green); }

@media (min-width: 1300px) {
  .sidenote {
    position: absolute;
    left: 100%;
    width: 260px;
    margin: 0 0 0 40px;
    padding-left: 0;
    border-left: 0;
  }
}

/* ---------- Math ------------------------------------------------------- */

/* Rendered as native MathML by build.py — no KaTeX, no webfont. The page is
   monospace throughout, but variables need a real italic to read as variables,
   so math opts into the serif stack the way a paper would.

   Sized up against the body text, not down: the serif math faces carry a
   smaller x-height than the monospace around them, so matching on font-size
   alone leaves the maths looking shrunken next to the prose it sits in. At
   this size an inline formula would push its own line apart from its
   neighbours, so its line box is pinned to the glyphs; display equations opt
   back out below, where tall constructs need the room. */
math {
  font-family: "Latin Modern Math", "STIX Two Math", Cambria, Georgia, serif;
  font-size: 1.26em;
  line-height: 1;
}
math mi { font-style: italic; }
math mi[mathvariant="normal"], math mtext { font-style: normal; }

/* A display equation: centred, unnumbered, and set on the page itself — no
   panel, border or tint, so it reads as part of the prose rather than as a
   figure. The vertical margins alone do the separating. Wide equations still
   scroll rather than forcing the article to. */
.equation {
  display: flex;
  /* A centred flex line overflows in both directions, and whatever sits left of
     the scroll origin can never be reached. `safe` falls back to flex-start for
     exactly the equations too wide to fit, so they stay scrollable on a phone;
     the plain value below it keeps older browsers centring. */
  justify-content: center;
  justify-content: safe center;
  align-items: center;
  margin: 28px 0;
  padding: 2px 0;
  overflow-x: auto;
  scroll-margin-top: 96px;
}
.equation math { font-size: 1.32em; line-height: normal; }

/* \ref to an equation, matching the accent that citations use. */
.article-body a.eq-ref {
  color: var(--green);
  font-weight: 600;
  border-bottom: 0;
  white-space: nowrap;
}
.article-body a.eq-ref:hover { text-decoration: underline; text-underline-offset: 2px; }

/* \ref whose target does not exist yet — deliberately conspicuous, so an
   unfinished cross-reference cannot quietly ship looking like real prose. */
.ref-missing {
  color: var(--amber);
  font-weight: 700;
  border-bottom: 1px dotted color-mix(in srgb, var(--amber) 55%, transparent);
  cursor: help;
}

/* ---------- Callout ---------------------------------------------------- */

.callout {
  font-size: 14.5px;
  line-height: 1.65;
  background: var(--glow-soft);
  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin: 30px 0;
  color: var(--text);
}
.callout strong { color: var(--bright); }

/* ---------- Figures ----------------------------------------------------
   Each figure ships as a light/dark SVG pair with a transparent background,
   swapped by the theme toggle exactly like the logo. The image sits in a
   terminal-panel frame; multi-panel strips (.wide) keep a minimum rendered
   width and scroll sideways on small screens instead of shrinking. */

.figure { margin: 30px 0 34px; scroll-margin-top: 84px; }

.fig-frame {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 18px 16px;
  overflow-x: auto;
}
.fig-frame img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.figure.wide .fig-frame img { min-width: 640px; }

:root .fig-dark { display: none; }
:root[data-theme="dark"] .fig-light { display: none; }
:root[data-theme="dark"] .fig-dark { display: block; }

.figure figcaption {
  margin: 10px 2px 0;
  font-size: 14px;   /* just under the article body's 15.5px */
  line-height: 1.6;
  color: var(--muted);
}
.figure figcaption .fig-num { color: var(--green); font-weight: 700; }

/* ---------- FAQ -------------------------------------------------------- */

.faq-list { margin-top: 36px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  transition: color .12s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 20px;
  font-weight: 400;
}
.faq-item[open] summary::after { content: "\2212"; color: var(--green); }
.faq-item[open] summary { color: var(--bright); }
.faq-item summary:hover { color: var(--green); }
.faq-answer { padding: 0 0 22px; color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 680px; }
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { margin: 0 0 12px; padding-left: 22px; }
.faq-answer ul:last-child { margin-bottom: 0; }
.faq-answer li { margin: 0 0 10px; }
.faq-answer li:last-child { margin-bottom: 0; }
.fn-ref a { border-bottom: none; color: var(--muted); }
.fn-ref a:hover { color: var(--green); }
.faq-answer .footnote { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.faq-answer code { color: var(--amber); background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 0.9em; }
.faq-answer a { border-bottom: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.faq-answer strong { color: var(--bright); }

/* ---------- Footer ----------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 30px 0;
  margin-top: 48px;
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer .muted { color: var(--faint); font-size: 13px; }
.site-footer .foot-links { display: flex; gap: 16px; }
.site-footer .foot-links a { color: var(--muted); font-size: 13px; }
.site-footer .foot-links a:hover { color: var(--green); }

/* ---------- Responsive ------------------------------------------------- */

@media (max-width: 640px) {
  .nav { padding: 0 16px; }
  .nav-links a { padding: 6px 6px; font-size: 13px; }
  .nav-links a::before, .nav-links a::after { margin: 0 1px; }
  .brand .tag { display: none; }
  .theme-toggle { padding: 5px 7px; margin-left: 4px; }
  .theme-toggle .lbl { display: none; }
  main { padding: 32px 0 72px; }
  .wrap, .prose { padding: 0 16px; }
  .post-meta::before { content: "$ log  "; }
}