/* Light palette, document defaults, shared shell, and skip navigation. */

/*
 * Metric-matched local fallbacks. The coefficients come from ausset.me's
 * corpus-based font metric pass, so fallback text keeps the intended measure
 * and vertical rhythm without distributing the licensed primary fonts.
 */
@font-face {
  font-family: "Valkyrie A Fallback P052";
  src: local("P052-Roman"), local("P052 Roman"), local("P052");
  font-style: normal;
  font-weight: 400;
  size-adjust: 99.369%;
  ascent-override: 98.421%;
  descent-override: 27.071%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Valkyrie A Fallback P052";
  src: local("P052-Bold"), local("P052 Bold"), local("P052");
  font-style: normal;
  font-weight: 700;
  size-adjust: 96.461%;
  ascent-override: 101.388%;
  descent-override: 27.887%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Valkyrie A Fallback P052";
  src: local("P052-Italic"), local("P052 Italic"), local("P052");
  font-style: italic;
  font-weight: 400;
  size-adjust: 101.68%;
  ascent-override: 96.184%;
  descent-override: 26.455%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Valkyrie A Fallback P052";
  src: local("P052-BoldItalic"), local("P052 Bold Italic"), local("P052");
  font-style: italic;
  font-weight: 700;
  size-adjust: 91.644%;
  ascent-override: 106.717%;
  descent-override: 29.353%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Input Sans Fallback Roboto Condensed";
  src: local("RobotoCondensed-Regular"), local("Roboto Condensed");
  font-style: normal;
  font-weight: 200;
  size-adjust: 125.033%;
  ascent-override: 89.431%;
  descent-override: 15.269%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Input Sans Fallback Roboto Condensed";
  src: local("RobotoCondensed-Regular"), local("Roboto Condensed");
  font-style: normal;
  font-weight: 400;
  size-adjust: 125.033%;
  ascent-override: 89.431%;
  descent-override: 15.269%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Input Sans Fallback Roboto Condensed";
  src:
    local("RobotoCondensed-Italic"), local("Roboto Condensed Italic"),
    local("Roboto Condensed");
  font-style: italic;
  font-weight: 400;
  size-adjust: 128.623%;
  ascent-override: 86.935%;
  descent-override: 14.843%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Input Sans Fallback Roboto Condensed";
  src:
    local("RobotoCondensed-Bold"), local("Roboto Condensed Bold"),
    local("Roboto Condensed");
  font-style: normal;
  font-weight: 700;
  size-adjust: 133.461%;
  ascent-override: 83.783%;
  descent-override: 14.304%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Input Sans Fallback Roboto Condensed";
  src:
    local("RobotoCondensed-BoldItalic"),
    local("Roboto Condensed Bold Italic"), local("Roboto Condensed");
  font-style: italic;
  font-weight: 700;
  size-adjust: 137.316%;
  ascent-override: 81.431%;
  descent-override: 13.903%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Input Sans Fallback Input Mono";
  src: local("InputMono-Regular"), local("InputMono"), local("Input Mono");
  font-style: normal;
  font-weight: 400;
  size-adjust: 77.049%;
  ascent-override: 145.126%;
  descent-override: 24.778%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Input Sans Fallback Input Mono";
  src:
    local("InputMono-Bold"), local("InputMono Bold"), local("Input Mono"),
    local("InputMono");
  font-style: normal;
  font-weight: 700;
  size-adjust: 83.727%;
  ascent-override: 133.551%;
  descent-override: 22.801%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Input Sans Fallback Input Mono";
  src:
    local("InputMono-Italic"), local("InputMono Italic"), local("Input Mono"),
    local("InputMono");
  font-style: italic;
  font-weight: 400;
  size-adjust: 77.049%;
  ascent-override: 145.126%;
  descent-override: 24.778%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Input Sans Fallback Input Mono";
  src:
    local("InputMono-BoldItalic"), local("InputMono BoldIta"),
    local("Input Mono"), local("InputMono");
  font-style: italic;
  font-weight: 700;
  size-adjust: 83.727%;
  ascent-override: 133.551%;
  descent-override: 22.801%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;
  --serif-font: "Valkyrie A", "Palatino nova Pro", "Palatino nova",
    "Valkyrie A Fallback P052", Palatino, "Palatino Linotype", "Book Antiqua",
    "TeX Gyre Pagella", "URW Palladio L", P052, "Noto Serif", Georgia,
    ui-serif, serif;
  --sans-font: "Input Sans", "Input Sans Compressed",
    "Input Sans Fallback Roboto Condensed", "Roboto Condensed",
    "Noto Sans Condensed", "Arial Narrow", "Liberation Sans Narrow", system-ui,
    sans-serif;
  --mono-font: "Input Mono", "SFMono-Regular", "Cascadia Mono",
    "Roboto Mono", "Noto Sans Mono", ui-monospace, monospace;
  --mono-font-prose: "Input Sans Fallback Input Mono", var(--mono-font);

  /*
   * Semantic type roles, derived from the elements in this document.
   * A component reuses a role only when it has the same reading function.
   * Aliases are deliberate: they record distinct elements that currently need
   * the same size without pretending that they are the same element.
   */
  --font-size-metadata: 12px; /* dates, navigation, labels, table heads */
  --font-size-technical: 13px; /* code, controls, compact diagram text */
  --font-size-supporting: 15px; /* cards, tables, and technical explanations */
  --font-size-body: 18px; /* sustained prose */
  --font-size-icon: var(--font-size-body);
  --font-size-lede: 20px; /* decks, ledes, and abstracts */
  --font-size-card-title: var(--font-size-lede);
  --font-size-diagram-symbol: var(--font-size-card-title);
  --font-size-subsection-title: 24px;
  --font-size-data: 32px; /* prominent counters, not headings */
  --font-size-section-title: clamp(32px, 3.5vw, 46px);
  --font-size-document-title: clamp(40px, 5vw, 64px);
  --paper: #f6f4ef;
  --panel: var(--paper);
  --panel-2: #ebe8e1;
  --ink: #292824;
  --muted: #504e49;
  --faint: #68655f;
  --line: #c6c1b7;
  /* Canonical signature color from https://ausset.me/, verified 20 August 2026. */
  --pink-signature: #fe4365;
  --pink-text: #b62648;
  --blue-structural: #286271;
  --green-state: #3f654b;
  --syntax-string: var(--green-state);
  --violet: #625676;
  --yellow: #745d25;
  --danger: #a72243;
  --surface-deep: #efede7;
  --surface-raised: #e8e5de;
  --node-fill: var(--paper);
  --node-stroke: #aaa69d;
  --hover-wash: rgb(41 40 36 / 0.055);
  --code-text: #343b3c;
  --max: 1240px;
  --marker-column: 76px;
  --layout-gap: 18px;
  --reading-measure: 840px;
  --wide-overhang: calc(var(--marker-column) + var(--layout-gap));
  --wide-measure: calc(
    var(--reading-measure) + var(--wide-overhang) + var(--wide-overhang)
  );
  --radius: 3px;
  --shadow: none;
}

* { box-sizing: border-box; }
html {
  border-top: 3px solid var(--pink-signature);
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  text-rendering: geometricPrecision;
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-font);
  font-size: var(--font-size-body);
  font-synthesis-style: none;
  font-synthesis-weight: none;
  line-height: 1.62;
  overflow-x: clip;
}

a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }
pre[data-language] {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
::selection { background: var(--pink-signature); color: #fff; }
:focus-visible {
  outline: 2px solid var(--pink-signature);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 7px 11px;
  background: var(--panel);
  border: 1px solid var(--pink-signature);
  color: var(--pink-text);
  font-family: var(--sans-font);
  font-weight: 700;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.shell { width: calc(100% - 40px); max-width: var(--max); margin-inline: auto; }