/* moonrag — a proof sheet cut from metal and pigment. By day: white gold, platinum and silver, with
   International Klein Blue for the marks an editor would make in the margin. By night: lapis lazuli
   and indigo, the same ultramarine lit from the other side. Hairlines instead of cards, tabular
   numerals instead of badges, crop marks instead of shadows. Nothing here is derived from a
   gradient. */

:root {
  /* Three metals, three jobs: platinum is the sheet, white gold the plate laid on it, silver the
     well a control is recessed into. The ink is graphite, so the blue is the only pigment. */
  --paper: #f2f2f0;
  --surface: #fcfaf4;
  --well: #e9e9e7;
  --ink: #17181a;
  --muted: #4f5357;
  --faint: #6a6e72;
  --rule: #dedfdb;
  --rule-strong: #b4b6b2;
  --accent: #002fa7;
  --accent-soft: #e4e8f5;
  --on-accent: #fcfaf4;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rail: 272px;
  --gap: 56px;
  /* one step, used everywhere: 6 · 10 · 14 · 20 · 26 · 34 · 44 · 56 */
  --s1: 6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 20px;
  --s5: 26px;
  --s6: 34px;
  --s7: 44px;
  --s8: 56px;
  color-scheme: light;
}

[data-theme="dark"] {
  /* Lapis is the ground and indigo the plate lifted off it; the accent is the same ultramarine as
     the day's, lit rather than laid on paper, so the blue survives the change of light. */
  --paper: #0b1733;
  --surface: #191d44;
  --well: #08122a;
  --ink: #e8ebf5;
  --muted: #a2a9c4;
  --faint: #828bad;
  --rule: #232a52;
  --rule-strong: #333b6b;
  --accent: #9fb8f0;
  --accent-soft: #1b2350;
  --on-accent: #0a1128;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
button,
input,
textarea,
select {
  font-variant-ligatures: no-contextual;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}

a:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

code,
pre,
kbd {
  font-family: var(--mono);
  font-size: 12.5px;
}

p code,
li code,
td code,
dd code {
  background: var(--accent-soft);
  padding: 0.08em 0.3em;
  border-radius: 3px;
  overflow-wrap: anywhere;
}

/* ---------- scrollbars, site and in-page ------------------------------------------------ */

@supports selector(::-webkit-scrollbar) {
  html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  html::-webkit-scrollbar-track {
    background: transparent;
  }
  html::-webkit-scrollbar-thumb {
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: color-mix(in srgb, var(--ink) 24%, transparent);
  }
  html.at-top::-webkit-scrollbar-thumb {
    background: transparent;
  }
  .scroll::-webkit-scrollbar,
  pre::-webkit-scrollbar,
  textarea::-webkit-scrollbar,
  table.grid::-webkit-scrollbar,
  .shell-cmd::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scroll::-webkit-scrollbar-track,
  pre::-webkit-scrollbar-track,
  textarea::-webkit-scrollbar-track,
  table.grid::-webkit-scrollbar-track,
  .shell-cmd::-webkit-scrollbar-track {
    background: transparent;
  }
  .scroll::-webkit-scrollbar-thumb,
  pre::-webkit-scrollbar-thumb,
  textarea::-webkit-scrollbar-thumb,
  table.grid::-webkit-scrollbar-thumb,
  .shell-cmd::-webkit-scrollbar-thumb {
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
    background-color: color-mix(in srgb, var(--ink) 12%, transparent);
  }
  .scroll:hover::-webkit-scrollbar-thumb,
  pre:hover::-webkit-scrollbar-thumb,
  textarea:hover::-webkit-scrollbar-thumb,
  table.grid:hover::-webkit-scrollbar-thumb,
  .shell-cmd:hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--ink) 26%, transparent);
  }
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent;
  }
  html.at-top {
    scrollbar-color: transparent transparent;
  }
  .scroll,
  pre,
  textarea,
  table.grid,
  .shell-cmd {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 14%, transparent) transparent;
  }
  .scroll:hover,
  pre:hover,
  textarea:hover,
  table.grid:hover,
  .shell-cmd:hover {
    scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) transparent;
  }
}

/* ---------- header --------------------------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 26px;
  height: 58px;
  padding: 0 26px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  border: 0;
  letter-spacing: -0.01em;
}

.wordmark span {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--faint);
  letter-spacing: 0;
}

header nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}

header nav a {
  border: 0;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}

header nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.icon:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

[data-theme="light"] .moon,
[data-theme="dark"] .sun {
  display: none;
}

/* ---------- shell --------------------------------------------------------------------- */

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 26px;
}

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: var(--gap);
  padding: var(--s7) 0 88px;
  align-items: start;
}

main.wide {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
  /* One column, so the grid gap would land between sections and double their seam. */
  gap: 0;
}

section {
  padding: var(--s8) 0 var(--s8);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 78px;
}

section:first-child {
  border-top: 0;
  padding-top: 0;
}

section:last-child {
  padding-bottom: 0;
}

/* The seam between two sections is the rule and the padding on either side of it, so no child is
   allowed to add a margin of its own at the top or the bottom. */
section > :first-child {
  margin-top: 0;
}

section > :last-child {
  margin-bottom: 0;
}

/* ---------- typography ---------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 var(--s3);
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
  max-width: 16ch;
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s3);
}

h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  margin: var(--s6) 0 var(--s3);
}

.section-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  margin-bottom: var(--s3);
}

.section-label b {
  color: var(--accent);
  font-weight: 400;
}

.lead {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--s5);
  max-width: 62ch;
}

p,
ul,
ol {
  max-width: 68ch;
}

p {
  margin: 0 0 var(--s3);
  color: var(--ink);
}

.muted {
  color: var(--muted);
}

small {
  font-size: 12.5px;
  color: var(--muted);
}

ul {
  margin: 0 0 16px;
  padding-left: 18px;
}

li {
  margin-bottom: var(--s1);
}

li::marker {
  color: var(--faint);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s5) 0 0;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
}

.button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.button.primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--ink));
  border-color: color-mix(in srgb, var(--accent) 88%, var(--ink));
  color: var(--on-accent);
}

[data-theme="dark"] .button.primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, #ffffff);
  border-color: color-mix(in srgb, var(--accent) 88%, #ffffff);
}

/* ---------- figures ------------------------------------------------------------------- */

.figure {
  position: relative;
  margin: var(--s5) 0 0;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 4px;
}

.figure::before,
.figure::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: var(--accent);
  border-style: solid;
  pointer-events: none;
}

.figure::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.figure::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

.figure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
}

.figure-head .spacer {
  margin-left: auto;
}

.figure-body {
  padding: 18px 16px 16px;
}

.caption {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--faint);
  margin: var(--s2) 0 0;
  max-width: 68ch;
}

/* A code block, a table, a list of fields and a row of buttons carry no bottom margin: the gap is
   the follower's. A caption is the exception — it belongs to what it sits under. */
pre + *,
table.grid + *,
dl.fields + *,
.shell-cmd + *,
.actions + * {
  margin-top: var(--s4);
}

pre + .caption,
table.grid + .caption,
.figure + .caption {
  margin-top: var(--s2);
}

/* ---------- controls ------------------------------------------------------------------ */

.segmented {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
}

.segmented button {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 10px 6px;
  cursor: pointer;
}

.segmented button:last-child {
  border-right: 0;
}

.segmented button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.figure-body > .segmented {
  margin: 0 0 var(--s3);
}

.control {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 56px;
  align-items: center;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 var(--s2);
}

.control:last-of-type {
  margin-bottom: var(--s3);
}

.control output {
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* A range is a rule with a needle on it: a two-pixel track in the rule colour, a three-pixel
   accent bar for the handle. No pill, no shadow — the same language as the crop marks. */
input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--rule-strong);
  border-radius: 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px;
  height: 14px;
  margin-top: -6px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
}

input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--rule-strong);
  border-radius: 0;
}

input[type="range"]::-moz-range-thumb {
  width: 3px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
}

input[type="range"]:hover::-webkit-slider-thumb {
  background: color-mix(in srgb, var(--accent) 82%, var(--ink));
}

textarea {
  display: block;
  width: 100%;
  min-height: 150px;
  margin: 0 0 var(--s3);
  resize: none;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--well);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
}

textarea:focus,
input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- chunk strip --------------------------------------------------------------- */

.strip {
  margin-top: var(--s3);
}

.chunk {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--s2);
  padding: 9px 10px 9px 0;
  border-top: 1px dashed var(--rule-strong);
}

.chunk:first-child {
  border-top: 0;
}

.chunk-no {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  text-align: right;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.chunk-text {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

.chunk-path {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  margin-top: 5px;
}

.chunk-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ---------- hits ---------------------------------------------------------------------- */

.hits {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.hits th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--faint);
  text-align: left;
  padding: 0 0 var(--s2);
  border-bottom: 1px solid var(--rule);
}

.hits td {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

.hits tr:last-child td {
  border-bottom: 0;
}

.hits .score {
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  width: 52px;
}

.hits .rank-no {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  width: 18px;
  font-variant-numeric: tabular-nums;
}

.hits .source {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  margin-top: 3px;
}

.hits tr.top .score {
  color: var(--accent);
}

.hits tr.top .rank-no {
  color: var(--accent);
}

/* ---------- metrics ------------------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: var(--s6) 0 0;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.metric {
  background: var(--paper);
  padding: 16px 18px 18px;
}

.metric b {
  display: block;
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.2;
}

.metric span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.45;
}

/* ---------- tables -------------------------------------------------------------------- */

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: var(--s4) 0 0;
}

table.grid th,
table.grid td {
  text-align: left;
  padding: 11px 18px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.5;
}

table.grid th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--faint);
  letter-spacing: 0.06em;
  padding-bottom: var(--s2);
  border-bottom-color: var(--rule-strong);
}

table.grid td,
table.grid th,
.hits td {
  overflow-wrap: anywhere;
}

table.grid td:first-child {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- code ---------------------------------------------------------------------- */

pre {
  margin: var(--s4) 0 0;
  padding: 15px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: auto;
  line-height: 1.6;
  color: var(--ink);
}

pre code {
  white-space: pre;
  overflow-wrap: normal;
}

.shell-cmd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 12px;
  overflow-x: auto;
}

.shell-cmd::before {
  content: "$";
  color: var(--accent);
}

/* ---------- rail ---------------------------------------------------------------------- */

.rail {
  position: sticky;
  top: 76px;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 4px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}

.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: uppercase;
}

.rail-head b {
  color: var(--accent);
  font-weight: 400;
}

.rail-body {
  padding: 12px 14px 16px;
}

.rail-block {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  margin: 16px 0 var(--s1);
  letter-spacing: 0.04em;
}

.rail-block:first-child {
  margin-top: 2px;
}

.rail-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 42px;
  gap: var(--s1);
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px dotted var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
}

.rail-row:last-child {
  border-bottom: 0;
}

.rail-row .n {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.rail-row .t {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-row .v {
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rail-note {
  margin: 16px 0 0;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--faint);
}

/* ---------- guide + api --------------------------------------------------------------- */

.toc {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
}

.toc a {
  display: block;
  border: 0;
  color: var(--muted);
  padding: 4px 0;
}

.toc a:hover {
  color: var(--accent);
}

.toc a[aria-current] {
  color: var(--accent);
}

.toc .group + .group {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dotted var(--rule-strong);
}

.toc .group b {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: var(--s1);
}

.step {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  margin: 0 0 var(--s3);
}

.step b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--accent);
}

.step h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.note {
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
  background: var(--accent-soft);
  padding: 12px 16px;
  margin: var(--s4) 0;
  font-size: 13.5px;
}

.note p:last-child {
  margin-bottom: 0;
}

article.api {
  padding: var(--s5) 0 6px;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 78px;
}

article.api:last-child {
  border-bottom: 0;
}

article.api h3 {
  margin: 0 0 var(--s2);
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

article.api h3 .kind {
  font-size: 10px;
  color: var(--faint);
  font-weight: 400;
  margin-right: 8px;
  letter-spacing: 0.04em;
}

article.api pre {
  margin: var(--s3) 0;
  font-size: 11.5px;
}

.member {
  margin: var(--s3) 0 0;
}

dl.fields {
  margin: var(--s4) 0 0;
  font-size: 13px;
}

dl.fields dt {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  margin-top: var(--s3);
  letter-spacing: 0.02em;
}

/* Each key and its description are one row, and a dotted seam separates the rows — the same seam
   the chunk list uses. */
dl.fields dd {
  margin: 3px 0 0 0;
  padding-bottom: var(--s3);
  border-bottom: 1px dotted var(--rule);
  color: var(--muted);
}

dl.fields dd:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

/* ---------- back to the top ------------------------------------------------------------- */

.totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    color 120ms ease,
    border-color 120ms ease;
}

.totop span {
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
}

.totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.totop:hover {
  color: var(--accent);
  border-color: var(--accent);
}

footer {
  border-top: 1px solid var(--rule);
  padding: 30px 0 48px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) 22px;
}

footer .spacer {
  margin-left: auto;
}

/* ---------- narrow -------------------------------------------------------------------- */

@media (width <= 900px) {
  main {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--s6);
  }
  section {
    padding: var(--s7) 0;
  }
  section:first-child {
    padding-top: 0;
  }
  .rail {
    position: static;
    order: 2;
    max-height: none;
  }
  h1 {
    max-width: none;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 620px) {
  header {
    gap: var(--s3);
    padding: 0 18px;
  }
  header nav {
    gap: 14px;
    font-size: 12px;
  }
  header nav a.hide-sm {
    display: none;
  }
  .wordmark span {
    display: none;
  }
  .shell {
    padding: 0 18px;
  }
  .control {
    grid-template-columns: 64px minmax(0, 1fr) 48px;
    gap: 8px;
  }
  .lead {
    font-size: 17px;
  }
  .figure-body {
    padding: 16px 14px 14px;
  }
  .totop {
    right: 14px;
    bottom: 14px;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  table.grid {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  pre {
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}