:root {
  --paper: #fbfaf7;
  --surface: #ffffff;
  --ink: #1a1e23;
  --muted: #5d6671;
  --rule: #e4e1d9;
  --user: #2f5bd3;
  --user-tint: #e8eefc;
  --kernel: #b4531e;
  --kernel-tint: #fbeee5;
  --done: #2c7a4b;
  --done-tint: #e4f3ea;
  --halt: #a83a3a;
  --halt-tint: #f8e7e7;
  --idle: #8a929b;
  --idle-tint: #eef0f2;
  --code-bg: #f3f1ec;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111417;
    --surface: #171b1f;
    --ink: #e6e9ec;
    --muted: #9aa3ad;
    --rule: #2a3036;
    --user: #86a6ff;
    --user-tint: #1b2643;
    --kernel: #f08c50;
    --kernel-tint: #3a2417;
    --done: #62c98f;
    --done-tint: #17301f;
    --halt: #ef8080;
    --halt-tint: #3a1d1d;
    --idle: #7c858f;
    --idle-tint: #20252a;
    --code-bg: #1b2025;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.65 var(--serif);
  font-optical-sizing: auto;
}

.top {
  border-bottom: 1px solid var(--rule);
  padding-block: 14px;
}
.top .inner { display: flex; align-items: baseline; gap: 18px; }
.brand { font: 600 17px var(--sans); color: var(--ink); text-decoration: none; letter-spacing: 0.01em; }
.crumb { font: 14px var(--sans); color: var(--muted); }
.crumb a { color: var(--muted); }

.inner {
  max-width: 760px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
main.inner { padding-block: 40px 96px; }

.kicker { font: 600 13px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kernel); margin: 0 0 8px; }
h1 { font: 700 clamp(34px, 6vw, 46px)/1.1 var(--serif); margin: 0 0 18px; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font: 700 27px/1.25 var(--serif); margin: 56px 0 14px; text-wrap: balance; }
h3 { font: 600 20px/1.3 var(--serif); margin: 32px 0 8px; }
p { margin: 0 0 18px; }
.lead { font-size: 21px; line-height: 1.55; color: var(--ink); }
a { color: var(--user); text-underline-offset: 3px; }
strong { font-weight: 650; }
dfn { font-style: normal; font-weight: 650; }

code { font: 0.86em var(--mono); background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
pre {
  font: 14.5px/1.6 var(--mono);
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 8px 0 28px;
}
pre code { background: none; padding: 0; font-size: inherit; }
.k { color: var(--kernel); font-weight: 600; }
.t { color: var(--user); }
.s { color: var(--done); }
.c { color: var(--muted); font-style: italic; }
.n { color: var(--halt); }

ul, ol { padding-left: 22px; margin: 0 0 18px; }
li { margin-bottom: 6px; }

table { width: 100%; border-collapse: collapse; font: 15px/1.5 var(--sans); margin: 8px 0 28px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; }

figure { margin: 30px 0 36px; }
.diagram {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px 18px;
  overflow-x: auto;
}
.diagram svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.diagram svg.tall { display: none; }
@media (max-width: 640px) {
  .diagram { padding: 16px 10px; overflow-x: visible; }
  .diagram svg.wide { display: none; }
  .diagram svg.tall { display: block; max-width: 420px; }
}
figcaption { font: 14px/1.5 var(--sans); color: var(--muted); margin-top: 10px; }

/* diagram vocabulary */
svg text { font-family: var(--sans); fill: var(--ink); }
svg .lbl { font-size: 14px; font-weight: 600; }
svg .sm { font-size: 12px; fill: var(--muted); }
svg .xs { font-size: 11px; fill: var(--muted); letter-spacing: 0.04em; }
svg .mono { font-family: var(--mono); font-size: 12px; }
svg .ink-line { stroke: var(--ink); stroke-width: 1.4; fill: none; }
svg .rule-line { stroke: var(--rule); stroke-width: 1; fill: none; }
svg .muted-line { stroke: var(--muted); stroke-width: 1.2; fill: none; }
svg .dash { stroke-dasharray: 4 4; }
svg .user { fill: var(--user-tint); stroke: var(--user); stroke-width: 1.4; }
svg .user-solid { fill: var(--user); }
svg .kernel { fill: var(--kernel-tint); stroke: var(--kernel); stroke-width: 1.4; }
svg .kernel-solid { fill: var(--kernel); }
svg .done { fill: var(--done-tint); stroke: var(--done); stroke-width: 1.4; }
svg .halt { fill: var(--halt-tint); stroke: var(--halt); stroke-width: 1.4; }
svg .idle { fill: var(--idle-tint); stroke: var(--idle); stroke-width: 1.2; }
svg .plain { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
svg .user-stroke { stroke: var(--user); stroke-width: 1.6; fill: none; }
svg .kernel-stroke { stroke: var(--kernel); stroke-width: 1.6; fill: none; }
svg .done-stroke { stroke: var(--done); stroke-width: 1.6; fill: none; }
svg .halt-stroke { stroke: var(--halt); stroke-width: 1.6; fill: none; }
svg .on-solid { fill: var(--surface); }
svg .fill-user { fill: var(--user); }
svg .fill-kernel { fill: var(--kernel); }
svg .fill-done { fill: var(--done); }
svg .fill-halt { fill: var(--halt); }
svg .fill-ink { fill: var(--ink); }
svg .fill-muted { fill: var(--muted); }

details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
details:first-of-type { border-top: 1px solid var(--rule); }
summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 28px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 0; font: 400 22px/1 var(--sans); color: var(--muted); }
details[open] summary::after { content: "\2212"; }
details p { margin: 10px 0 0; color: var(--ink); }

.track { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: 24px 26px; margin: 28px 0; }
.track h2 { margin: 0 0 6px; font-size: 24px; }
.track > p { color: var(--muted); font-size: 16px; }
.chapters { list-style: none; padding: 0; margin: 14px 0 0; counter-reset: ch; }
.chapters li { counter-increment: ch; display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); margin: 0; font-size: 17px; }
.chapters li::before { content: counter(ch); font: 600 13px var(--mono); color: var(--muted); min-width: 18px; }
.chapters .soon { color: var(--muted); }
.chapters .soon span { font: 12px var(--sans); margin-left: 8px; }

.pager { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule); margin-top: 64px; padding-top: 20px; font: 15px var(--sans); }

:focus-visible { outline: 2px solid var(--user); outline-offset: 3px; }
@media (max-width: 520px) {
  body { font-size: 17px; }
  .lead { font-size: 19px; }
  h2 { font-size: 24px; margin-top: 44px; }
}