/* ── the-monospace-web · reset.css ─────────────────────────────────────────
   By Oskar Wickström - MIT
   https://github.com/owickstrom/the-monospace-web                          */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0; padding: 0; border: 0;
  font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ── the-monospace-web · index.css ──────────────────────────────────────── */
@import url('https://fonts.cdnfonts.com/css/jetbrains-mono-2');

:root {
  --font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --line-height: 1.20rem;
  --border-thickness: 2px;
  --text-color: #000;
  --text-color-alt: #666;
  --background-color: #fff;
  --background-color-alt: #eee;
  --font-weight-normal: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 800;
  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-weight: var(--font-weight-normal);
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fff; --text-color-alt: #8a8a8a;
    --background-color: #000; --background-color-alt: #131313;
  }
}
:root[data-theme="dark"] {
  --text-color: #fff; --text-color-alt: #8a8a8a;
  --background-color: #000; --background-color-alt: #131313;
}
:root[data-theme="light"] {
  --text-color: #000; --text-color-alt: #666;
  --background-color: #fff; --background-color-alt: #eee;
}

* { box-sizing: border-box; }
* + * { margin-top: var(--line-height); }

html {
  display: flex; width: 100%; margin: 0; padding: 0;
  flex-direction: column; align-items: center;
  background: var(--background-color); color: var(--text-color);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative; width: 100%; margin: 0;
  padding: var(--line-height) 2ch calc(var(--line-height) * 5);
  max-width: calc(min(80ch, round(down, 100%, 1ch)));
  line-height: var(--line-height);
  overflow-x: hidden;
}
@media screen and (max-width: 480px) {
  :root { font-size: 14px; }
  body { padding: var(--line-height) 1ch calc(var(--line-height) * 5); }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  margin: calc(var(--line-height) * 2) 0 var(--line-height);
  line-height: var(--line-height);
  scroll-margin-top: var(--line-height);
}
h1 {
  font-size: 2rem; line-height: calc(2 * var(--line-height));
  margin-bottom: calc(var(--line-height) * 2); text-transform: uppercase;
}
h2 { font-size: 1rem; text-transform: uppercase; }

hr {
  position: relative; display: block; height: var(--line-height);
  margin: calc(var(--line-height) * 1.5) 0; border: none; color: var(--text-color);
}
hr:after {
  display: block; content: ""; position: absolute;
  top: calc(var(--line-height) / 2 - var(--border-thickness));
  left: 0; width: 100%;
  border-top: calc(var(--border-thickness) * 3) double var(--text-color);
  height: 0;
}

a:link, a:visited { color: var(--text-color); }

p { margin-bottom: var(--line-height); word-break: break-word; word-wrap: break-word; hyphens: auto; }
strong { font-weight: var(--font-weight-bold); }
em { font-style: italic; }
mark { background: var(--text-color); color: var(--background-color); padding: 0 0.4ch; }

sub, sup {
  position: relative; display: inline-block; margin: 0;
  line-height: 0; width: calc(1ch / 0.75); font-size: .75rem;
}
sub { vertical-align: sub; }
sup { vertical-align: super; }

table {
  position: relative; top: calc(var(--line-height) / 2);
  width: calc(round(down, 100%, 1ch));
  border-collapse: collapse; margin: 0 0 calc(var(--line-height) * 2);
}
th, td {
  border: var(--border-thickness) solid var(--text-color);
  padding:
    calc((var(--line-height) / 2))
    calc(1ch - var(--border-thickness) / 2)
    calc((var(--line-height) / 2) - (var(--border-thickness)));
  line-height: var(--line-height); vertical-align: top; text-align: left;
}
table tbody tr:first-child > * { padding-top: calc((var(--line-height) / 2) - var(--border-thickness)); }
th { font-weight: var(--font-weight-bold); }
.width-min { width: 0%; white-space: nowrap; }
.width-auto { width: 100%; }

img, video { display: block; width: 100%; object-fit: contain; overflow: hidden; }
img { font-style: italic; color: var(--text-color-alt); }

details {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin-bottom: var(--line-height);
}
summary { font-weight: var(--font-weight-medium); cursor: pointer; text-transform: uppercase; }
details[open] summary { margin-bottom: var(--line-height); }
details > summary::marker { display: inline-block; content: '▶ '; margin: 0; }
details[open] > summary::marker { content: '▼ '; }
details :last-child { margin-bottom: 0; }

pre { white-space: pre; overflow-x: auto; margin: var(--line-height) 0; overflow-y: hidden; }
figure pre { margin: 0; }
pre, code { font-family: var(--font-family); }
code { font-weight: var(--font-weight-medium); }

figure { margin: calc(var(--line-height) * 2) 3ch; overflow-x: auto; overflow-y: hidden; }
figcaption { display: block; font-style: italic; margin-top: var(--line-height); color: var(--text-color-alt); }

ul, ol { padding: 0; margin: 0 0 var(--line-height); }
ul { list-style-type: square; padding: 0 0 0 2ch; }
ol { list-style-type: none; counter-reset: item; padding: 0 0 0 3ch; }
ol ul, ol ol, ul ol, ul ul { padding: 0 0 0 3ch; margin: 0; }
ol li:before {
  content: counters(item, ".") ". ";
  counter-increment: item; font-weight: var(--font-weight-medium);
}
/* hang the counter in the gutter so wrapped lines stay aligned */
ol:not(ol ol) > li { position: relative; }
ol:not(ol ol) > li:before { position: absolute; left: -3ch; width: 3ch; }
li { margin: 0; padding: 0; }
li::marker { line-height: 0; }
::-webkit-scrollbar { height: var(--line-height); width: var(--line-height); }
::-webkit-scrollbar-thumb { background: var(--text-color-alt); }

button {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) / 2 - var(--border-thickness)) calc(1ch - var(--border-thickness));
  margin: 0; font: inherit; font-weight: var(--font-weight-medium);
  height: calc(var(--line-height) * 2);
  background: var(--background-color); color: var(--text-color);
  line-height: normal; text-transform: uppercase; cursor: pointer;
  -webkit-appearance: none;
}
button:hover { background: var(--background-color-alt); }
button:active { transform: translate(2px, 2px); }
button:focus-visible { --border-thickness: 3px; outline: none; }

/* tree connectors - upstream .tree */
.tree, .tree ul {
  position: relative; padding-left: 0;
  list-style-type: none; line-height: var(--line-height);
}
.tree ul { margin: 0; }
.tree ul li {
  position: relative; padding-left: 1.5ch; margin-left: 1.5ch;
  border-left: var(--border-thickness) solid var(--text-color);
}
.tree ul li:before {
  position: absolute; display: block;
  top: calc(var(--line-height) / 2); left: 0; content: "";
  width: 1ch; border-bottom: var(--border-thickness) solid var(--text-color);
}
.tree ul li:last-child { border-left: none; }
.tree ul li:last-child:after {
  position: absolute; display: block; top: 0; left: 0; content: "";
  height: calc(var(--line-height) / 2);
  border-left: var(--border-thickness) solid var(--text-color);
}

.grid {
  --grid-cells: 0;
  display: flex; gap: 1ch;
  width: calc(round(down, 100%, (1ch * var(--grid-cells)) - (1ch * var(--grid-cells) - 1)));
  margin-bottom: var(--line-height);
}
.grid > * { flex: 0 0 calc(round(down, (100% - (1ch * (var(--grid-cells) - 1))) / var(--grid-cells), 1ch)); }
.grid:has(> :last-child:nth-child(1)) { --grid-cells: 1; }
.grid:has(> :last-child:nth-child(2)) { --grid-cells: 2; }
.grid:has(> :last-child:nth-child(3)) { --grid-cells: 3; }
.grid:has(> :last-child:nth-child(4)) { --grid-cells: 4; }

/* the character grid, toggled from the status bar */
.debug .debug-grid {
  --color: color-mix(in srgb, var(--text-color) 12%, var(--background-color) 88%);
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;
  background-image:
    repeating-linear-gradient(var(--color) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);
  background-size: 1ch var(--line-height);
  margin: 0;
}
.debug-grid { display: none; }
.debug .debug-grid { display: block; }

/* ══ reader ═══════════════════════════════════════════════════════════════
   Everything below is this site's own layer on top of the-monospace-web.   */

/* ── links ───────────────────────────────────────────────────────────────
   Every link gets a dotted rule so cross-references read as links even when
   they sit alone in a list or table cell. Hover resolves the rule to solid
   and paints the background. Section-anchor hashes (§) stay clean.        */
a { text-decoration: none; }
#content a {
  border-bottom: 1px dotted color-mix(in srgb, currentColor 55%, transparent);
}
#content a:hover, #content a:focus-visible {
  background: var(--background-color-alt);
  border-bottom: 1px solid currentColor;
  outline: none;
}
#content .anchor {
  border-bottom: none !important;
  background: none;
}

a[target="_blank"]:after {
  content: "↗"; font-size: .75rem; vertical-align: super;
  line-height: 0; color: var(--text-color-alt); margin-left: .25ch;
}

/* ── masthead ────────────────────────────────────────────────────────────
   Upstream's header table: title and subtitle at left, metadata at right,
   everything landing on the same character grid.                          */
.masthead { margin-bottom: var(--line-height); }
.masthead table { top: 0; margin-bottom: 0; }
.masthead th, .masthead td { border: none; padding: 0; }
.masthead th {
  color: var(--text-color-alt); font-weight: var(--font-weight-normal);
  text-transform: uppercase; padding-right: 1ch; white-space: nowrap;
}
.masthead td { text-align: left; }
.masthead h1 {
  margin: 0; font-size: 1.5rem; line-height: calc(2 * var(--line-height));
  letter-spacing: -0.02em;
}
.masthead .subtitle { display: block; color: var(--text-color-alt); }
.masthead h1 a {
  border-bottom: 1px dotted color-mix(in srgb, currentColor 55%, transparent);
}
.masthead h1 a:hover {
  background: var(--background-color-alt);
  border-bottom: 1px solid currentColor;
}
.masthead .meta { white-space: nowrap; }
/* the keyboard hints are noise on a touch screen */
@media screen and (max-width: 640px), (pointer: coarse) {
  .masthead .keys-row { display: none; }
}
.masthead .meta a {
  color: var(--text-color-alt);
  border-bottom: 1px dotted color-mix(in srgb, currentColor 55%, transparent);
}
.masthead .meta a:hover {
  color: var(--text-color);
  border-bottom: 1px solid currentColor;
}

.crumb { color: var(--text-color-alt); word-break: break-all; }
.crumb a {
  color: var(--text-color-alt);
  border-bottom: 1px dotted color-mix(in srgb, currentColor 55%, transparent);
}
.crumb a:hover {
  color: var(--text-color);
  background: var(--background-color-alt);
  border-bottom: 1px solid currentColor;
}
.crumb .sep { opacity: .5; }

/* ── document chrome ─────────────────────────────────────────────────── */
#content > *:first-child { margin-top: 0; }
#content h1 { word-break: break-word; }

/* §-numbering, on every page but the index */
#content.numbered h2:before,
#content.numbered h3:before {
  content: attr(data-sec) "  ";
  color: var(--text-color-alt);
  font-weight: var(--font-weight-normal);
}

/* a click target for the section anchor, revealed on hover */
.anchor {
  color: var(--text-color-alt); opacity: 0;
  margin-left: 1ch; font-weight: var(--font-weight-normal);
}
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor,
h4:hover .anchor, .anchor:focus-visible { opacity: 1; }

/* the `← Index · Part IV` strip under the title */
.nav-up {
  color: var(--text-color-alt);
  margin-bottom: 0;
}
.nav-up a { color: var(--text-color-alt); }
.nav-up a:hover {
  color: var(--text-color);
  border-bottom: 1px solid currentColor;
}

/* the `*Written 2026-07-30…*` dateline */
.dateline { color: var(--text-color-alt); font-style: italic; }
.dateline em { font-style: italic; }

/* ── table of contents ──────────────────────────────────────────────── */
.toc { margin-bottom: calc(var(--line-height) * 2); }
.toc ul.tree { margin: 0; padding: 0; }
.toc .tree > li { margin-top: 0; }
.toc .tree > li + li { margin-top: 0; }
.toc .sec { color: var(--text-color-alt); }
.toc .tree ul li { margin-top: 0; }

/* ── blockquotes as labelled callouts ───────────────────────────────────
   The corpus uses `> **Prediction:** …` throughout. Hoist that label onto
   the top border so the claim reads as a box you can find by scanning.   */
blockquote {
  position: relative;
  border: var(--border-thickness) solid var(--text-color);
  padding: var(--line-height) 1ch calc(var(--line-height) - var(--border-thickness));
  margin: calc(var(--line-height) * 2) 0 calc(var(--line-height) * 2);
}
blockquote > *:first-child { margin-top: 0; }
blockquote > *:last-child { margin-bottom: 0; }
blockquote[data-label]:before {
  content: attr(data-label);
  position: absolute; top: calc(var(--line-height) * -0.5 - var(--border-thickness) / 2);
  left: 2ch; padding: 0 1ch;
  background: var(--background-color); color: var(--text-color);
  font-weight: var(--font-weight-bold); text-transform: uppercase;
  line-height: var(--line-height); white-space: nowrap;
}
blockquote[data-label] { padding-top: calc(var(--line-height) * 1.25); }

/* ── code ───────────────────────────────────────────────────────────── */
code:not(pre code) { background: var(--background-color-alt); padding: 0 0.4ch; }
pre {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) / 2) 1ch;
}
pre code { background: none; padding: 0; }

/* ── tables ─────────────────────────────────────────────────────────── */
/* The scroll box clips, so the table drops upstream's half-line offset here
   and the wrapper carries the spacing instead. */
.table-scroll { overflow-x: auto; margin: var(--line-height) 0 calc(var(--line-height) * 2); }
.table-scroll table { top: 0; margin: 0; min-width: 100%; }
thead th { background: var(--text-color); color: var(--background-color); }
thead th a:link, thead th a:visited { color: var(--background-color); }
tbody tr:hover > * { background: var(--background-color-alt); }

/* ── the index page ─────────────────────────────────────────────────────
   Its `### [00 - Overview](…)` sections are the site map; give each one a
   rule above it so the parts separate at a glance.                       */
#content.index h3 {
  border-top: var(--border-thickness) solid var(--text-color);
  padding-top: calc(var(--line-height) / 2);
  margin-top: calc(var(--line-height) * 2);
  font-size: 1rem; text-transform: uppercase;
}
#content.index h3 + p { color: var(--text-color-alt); }
#content.index ul { padding-left: 2ch; }
#content.index li { margin-bottom: 0; }

/* ── footer navigation ──────────────────────────────────────────────── */
.pagenav {
  margin-top: calc(var(--line-height) * 2);
  margin-bottom: 0;
}
.pagenav .cell {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) / 2 - var(--border-thickness) / 2) 1ch;
  margin-top: 0; min-width: 0;
}
.pagenav .cell.empty { border-style: dashed; color: var(--text-color-alt); }
.pagenav .dir { display: block; color: var(--text-color-alt); text-transform: uppercase; }
.pagenav .cell a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagenav .cell:hover { background: var(--background-color-alt); }
.pagenav + .msg { margin-top: var(--line-height); }

/* ── status bar ─────────────────────────────────────────────────────────
   Fixed to the bottom: where you are, how far in, and the two toggles.   */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  margin: 0;
  background: var(--background-color);
  border-top: var(--border-thickness) solid var(--text-color);
  line-height: var(--line-height);
}
.statusbar-inner {
  display: flex; align-items: center; gap: 1ch;
  margin: 0 auto; width: 100%;
  max-width: calc(min(80ch, round(down, 100%, 1ch)));
  padding: calc(var(--line-height) / 2) 2ch;
}
.statusbar-inner > * { margin-top: 0; }
.sb-path {
  flex: 1 1 auto; min-width: 0; color: var(--text-color-alt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-progress { flex: 0 0 auto; white-space: pre; color: var(--text-color-alt); }
.sb-pct { flex: 0 0 auto; color: var(--text-color-alt); white-space: pre; }
.sb-actions { flex: 0 0 auto; display: flex; gap: 1ch; }
.sb-actions button {
  height: calc(var(--line-height) * 1.5); font-size: 0.75rem;
  padding: 0 calc(1ch - var(--border-thickness));
}
button[aria-pressed="true"] { background: var(--text-color); color: var(--background-color); }
@media screen and (max-width: 640px) {
  .statusbar-inner { padding: calc(var(--line-height) / 2) 1ch; }
  .sb-progress { display: none; }
}
@media screen and (max-width: 420px) {
  .sb-pct { display: none; }
}

.msg { color: var(--text-color-alt); }
kbd {
  border: 1px solid var(--text-color-alt); padding: 0 0.5ch;
  font-size: 0.8rem; color: var(--text-color-alt);
}

/* ── find dialog (catalog search) ─────────────────────────────────────── */
.find-dialog {
  border: var(--border-thickness) solid var(--text-color);
  background: var(--background-color); color: var(--text-color);
  padding: 0; margin: auto;
  width: min(56ch, calc(100% - 2ch));
  max-height: min(70vh, 32rem);
}
.find-dialog::backdrop {
  background: color-mix(in srgb, var(--text-color) 35%, transparent);
}
.find-form {
  margin: 0; padding: var(--line-height) 1ch;
  display: flex; flex-direction: column; gap: calc(var(--line-height) / 2);
}
.find-form > * { margin-top: 0; }
.find-label {
  font-weight: var(--font-weight-bold); text-transform: uppercase;
  color: var(--text-color-alt);
}
#find-input {
  font: inherit; color: var(--text-color); background: var(--background-color);
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) / 4) 1ch;
  width: 100%;
}
#find-input:focus { outline: none; background: var(--background-color-alt); }
.find-results {
  list-style: none; padding: 0; margin: 0;
  max-height: min(40vh, 20rem); overflow-y: auto;
  border-top: var(--border-thickness) solid var(--text-color);
}
.find-results li { margin: 0; border-bottom: 1px solid var(--background-color-alt); }
.find-results a {
  display: block; padding: calc(var(--line-height) / 4) 0.5ch;
  border-bottom: none !important; text-decoration: none; color: var(--text-color);
}
.find-results li.is-active a,
.find-results a:hover { background: var(--background-color-alt); }
.find-title { display: block; font-weight: var(--font-weight-medium); }
.find-path { display: block; color: var(--text-color-alt); font-size: 0.85rem; }
.find-empty { padding: var(--line-height) 0.5ch; color: var(--text-color-alt); }
.find-hint { color: var(--text-color-alt); font-size: 0.85rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}