/* the "How it works" pages: learn.html and source/ */
:root {
  --room: #16181a;
  --ink: #d9dcd6;
  --muted: #9aa09a;
  --panel: #202326;
  --line: #34383b;
  --accent: #e0a458;
  --quote: #9fd3a8;
  --assume: #f2b36b;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--room);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

a { color: var(--accent); }

.docs-top { border-bottom: 1px solid var(--line); padding: 10px 16px; position: sticky; top: 0; background: var(--room); z-index: 1; }
.docs-top nav { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }

main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.learn { max-width: 760px; }
h1 { font-size: 26px; margin: 12px 0; }
h2 { font-size: 20px; margin: 32px 0 8px; }
h3 { font-size: 16px; margin: 20px 0 2px; }
.lead { font-size: 17px; }
.note { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; }
a.ref code { color: var(--accent); }
.quote { color: var(--quote); }
.assume { color: var(--assume); font-weight: 700; }
.parts li, .learn li { margin: 6px 0; }
.files { columns: 2 240px; margin: 4px 0 12px; }
.assumptions { padding-left: 18px; font-size: 14px; }
.assumptions li { margin: 8px 0; }

pre.figure {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  overflow-x: auto;
}

/* source pages */
.source h1 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; word-break: break-all; }
.outline { font-size: 13px; line-height: 1.9; }
.outline a { margin-right: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
pre.code {
  background: #111315;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 0;
  overflow-x: auto;
  line-height: 1.45;
  font-size: 13px;
}
.line { display: block; padding-right: 14px; white-space: pre; }
.line:target, .line:has(.ln:target) { background: #3a3222; }
.ln {
  display: inline-block;
  width: 4.2em;
  padding-right: 1em;
  margin-right: 0.8em;
  text-align: right;
  color: #5b615c;
  text-decoration: none;
  border-right: 1px solid var(--line);
  user-select: none;
}
.line[id] { scroll-margin-top: 60px; }
.ln[id] { scroll-margin-top: 60px; }
.c { color: #93a39a; font-style: italic; }
.c .quote { color: var(--quote); font-style: normal; }
.k { color: #e0a458; }
.t { color: #9cc4e4; }
.s { color: #d7a6c9; }
.n { color: #b5cea8; }
.p { color: #8a8f99; }