/* moonxml — set on kraft: buff stock, letterpress ink, one brick-red rule.
   Four pages, this stylesheet, and no build step.

   The system, in one paragraph: kraft stock with a fibre grain and four
   register marks, a type area ruled in hairlines at a book's measure, a
   transitional serif for the text and a typewriter face for every label,
   chapter numerals in the margin, code ruled top and bottom like a printed
   listing, figures captioned as plates, and a single brick red used only
   where a press would have inked a second roller. */

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

:root {
  /* buff kraft, the colour of a manila envelope */
  --paper: #e9dcbd;
  --paper-deep: #dfd0ac;
  --paper-edge: #cdb98f;
  --paper-lift: #f2e8ce;

  /* letterpress ink: warm black, never pure */
  --ink: #2a2118;
  --ink-soft: #55483a;
  --ink-faint: #8d7c5f;

  --rule: #c8b389;
  --rule-strong: #ab9463;

  /* the second roller */
  --brick: #7d2f22;
  --brick-soft: #e6cbc0;

  /* the rare mark of a correction */
  --olive: #4a5636;

  --code-bg: #e4d6b3;
  --code-rule: #c8b389;

  /* register marks */
  --mark: #ab9463;

  /* the scroll channel and the thumb that runs in it */
  --scroll-track: color-mix(in srgb, var(--paper-deep) 62%, transparent);
  --scroll-thumb: #ab9463;
  --scroll-thumb-hot: var(--brick);

  --display: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --text: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --typewriter: "American Typewriter", "Courier New", "Nimbus Mono PS", "Liberation Mono", ui-monospace, monospace;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace;

  --measure: 66ch;
}

[data-theme="dark"] {
  /* unlit pressroom */
  --paper: #191510;
  --paper-deep: #221c15;
  --paper-edge: #100d09;
  --paper-lift: #241e16;

  --ink: #e7dbbe;
  --ink-soft: #b8a88a;
  --ink-faint: #7d6e54;

  --rule: #362e23;
  --rule-strong: #4d4232;

  --brick: #d4826a;
  --brick-soft: #3b2721;

  --olive: #9cb07c;

  --code-bg: #1e1913;
  --code-rule: #382f24;

  --mark: #4d4232;

  --scroll-track: color-mix(in srgb, var(--paper-deep) 85%, transparent);
  --scroll-thumb: #574a37;
  --scroll-thumb-hot: #d4826a;
}

* { box-sizing: border-box; }

/* Every link is set in the second roller. The browser's blue-and-underline is
   not a colour this page has, so prose, callouts and table cells all begin
   from the same rule; the places that carry their own rule — the wordmark, the
   top navigation, the footer — opt out of it below. */
a {
  color: var(--brick);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration: underline; }
.brand, .brand:hover, nav.top-nav a, nav.top-nav a:hover, footer.site a,
footer.site a:hover, a.nav-icon, a.nav-icon:hover, .api-nav a, .api-nav a:hover {
  text-decoration: none;
}
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.72 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "pnum" 0;
}

/* ------------------------------------------------------------------- stock
   Fibre grain from a turbulence filter, chain lines from a gradient, and a
   warm edge where the sheet has handled. All of it below the type. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(to right, color-mix(in srgb, var(--rule-strong) 12%, transparent) 0 1px, transparent 1px 31px),
    radial-gradient(135% 95% at 50% 0%, transparent 42%, color-mix(in srgb, var(--paper-edge) 85%, transparent) 100%);
  background-size: 180px 180px, auto, auto;
}

[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: 0.16; }

/* The type area, ruled, with a register mark at each corner. */
body::after {
  content: "";
  position: fixed;
  inset: 17px;
  pointer-events: none;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--rule-strong) 42%, transparent);
  background-image:
    linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-size:
    14px 1px, 1px 14px,
    14px 1px, 1px 14px,
    14px 1px, 1px 14px,
    14px 1px, 1px 14px;
  background-position:
    -1px -1px, -1px -1px,
    calc(100% - 13px) -1px, calc(100% - 1px) -1px,
    -1px calc(100% - 1px), -1px calc(100% - 13px),
    calc(100% - 13px) calc(100% - 1px), calc(100% - 1px) calc(100% - 13px);
  opacity: 0.9;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 44px;
}

/* ----------------------------------------------------------- running head */

header.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(5px);
}

header.top::after {
  content: "";
  display: block;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  height: 3px;
  opacity: 0.8;
}

header.top .wrap { display: flex; align-items: center; gap: 24px; height: 58px; }

.brand {
  font-family: var(--typewriter);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}
.brand .lt, .brand .gt { color: var(--brick); }
.brand b { font-weight: 700; letter-spacing: 0; }

nav.top-nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }

nav.top-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--typewriter);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
nav.top-nav a:hover { color: var(--brick); border-bottom-color: var(--brick); }
nav.top-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.theme-toggle, .nav-icon {
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  border-radius: 999px;
  width: 27px;
  height: 27px;
  cursor: pointer;
  font-family: var(--typewriter);
  font-size: 11px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.theme-toggle:hover, .nav-icon:hover { color: var(--brick); border-color: var(--brick); }
a.nav-icon { text-decoration: none; }

/* The half-moon is drawn rather than typed: a glyph's ink sits wherever its
   font puts it, and a typed ◐ lands a pixel high in every face that has one.
   Two shapes in a grid are centred by construction. */
.theme-toggle {
  /* the glyph is not shown, and a flex line keeps its zero-width box from
     taking a grid row of its own above the drawn mark */
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50%);
  background-clip: border-box;
}

/* ------------------------------------------------------------- title page */

.hero { padding: 88px 0 40px; }

.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 54px; align-items: start; }

.eyebrow {
  font-family: var(--typewriter);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brick);
  margin: 0 0 24px;
}

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(41px, 5.4vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.022em;
  margin: 0 0 26px;
  text-wrap: balance;
  hyphens: manual;
}

h1 em {
  font-style: italic;
  color: var(--brick);
  padding-bottom: 2px;
  border-bottom: 2px solid color-mix(in srgb, var(--brick) 34%, transparent);
}

.lede {
  font-size: 19.5px;
  line-height: 1.64;
  color: var(--ink-soft);
  max-width: 41ch;
  margin: 0 0 26px;
  text-align: justify;
  hyphens: auto;
  hanging-punctuation: first last;
  text-wrap: pretty;
}

/* the imprint line under a title page */
.colophon-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
  font-family: var(--typewriter);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 3px double var(--rule-strong);
  padding: 10px 0;
  margin-top: 30px;
}
/* the same line, with its imprint centred between the rules */
.colophon-line.centered { justify-content: center; }
.colophon-line b { color: var(--brick); font-weight: 700; }
.colophon-line .sep { color: var(--rule-strong); }

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

pre, code, kbd { font-family: var(--mono); font-size: 12.5px; }
kbd {
  font-family: var(--typewriter);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  border: 1px solid var(--rule);
  padding: 1px 4px;
  color: var(--ink-soft);
}
code { font-size: 0.88em; }

pre {
  background: color-mix(in srgb, var(--code-bg) 78%, transparent);
  border-top: 1px solid var(--code-rule);
  border-bottom: 1px solid var(--code-rule);
  padding: 17px 22px;
  overflow-x: auto;
  margin: 0 0 20px;
  line-height: 1.7;
  position: relative;
  font-variant-numeric: tabular-nums;
}

pre::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  border-top: 1px solid color-mix(in srgb, var(--code-rule) 70%, transparent);
}

pre .cm { color: var(--ink-faint); font-style: italic; }
pre .k { color: var(--olive); }
pre .s { color: var(--brick); }
pre .f { color: var(--ink); font-style: italic; }
pre .n { color: var(--brick); opacity: 0.75; user-select: none; padding-right: 14px; display: inline-block; min-width: 2ch; text-align: right; }

code { background: color-mix(in srgb, var(--paper-deep) 70%, transparent); padding: 1px 4px; }
p code, li code, td code { border: 1px solid var(--rule); background: color-mix(in srgb, var(--paper-lift) 55%, transparent); }

/* a listing's caption, set the way a book sets one */
.filename {
  font-family: var(--typewriter);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 7px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.filename::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--rule);
  transform: translateY(-3px);
}

/* ------------------------------------------------------------- chapters */

section { padding: 66px 0; border-top: 3px double var(--rule-strong); }
section:first-of-type { border-top: none; }

.chapter { display: grid; grid-template-columns: 78px 1fr; gap: 28px; align-items: start; }

.chapter-mark {
  font-family: var(--typewriter);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--brick);
  padding-top: 10px;
  border-top: 1px solid var(--brick);
}
.chapter-mark span { display: block; color: var(--ink-faint); letter-spacing: 0.14em; margin-top: 7px; font-size: 9px; }

.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.sec-num { font-family: var(--typewriter); font-size: 10px; color: var(--brick); letter-spacing: 0.2em; }

h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(27px, 3.1vw, 35px);
  letter-spacing: -0.016em;
  margin: 0 0 10px;
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  margin: 30px 0 8px;
}

.sub {
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 28px;
  text-align: justify;
  hyphens: auto;
  hanging-punctuation: first last;
  text-wrap: pretty;
}

/* a drop capital, three lines deep, in the second ink */
.dropcap::first-letter {
  float: left;
  font-size: 3.9em;
  line-height: 0.82;
  padding: 0.06em 0.09em 0 0;
  color: var(--brick);
  font-weight: 600;
}

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

.plate {
  margin: 32px 0 36px;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: 20px 0 12px;
  position: relative;
}
/* crop ticks, as a plate carries */
.plate::before, .plate::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--mark);
  opacity: 0.7;
}
.plate::before { left: -1px; top: -1px; border-right: none; border-bottom: none; }
.plate::after { right: -1px; bottom: -1px; border-left: none; border-top: none; }

.plate-cap {
  display: flex;
  gap: 12px;
  font-family: var(--typewriter);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brick);
  margin: 0 0 15px;
}
.plate-cap em {
  font-style: normal;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: none;
  font-family: var(--text);
  font-size: 12px;
}
.plate-note {
  font-size: 14px;
  color: var(--ink-faint);
  font-style: italic;
  margin: 12px 0 0;
}

/* ------------------------------------------------------------------- grid */

.cols { display: grid; gap: 40px; }
.cols.two { grid-template-columns: 1fr 1fr; }
.cols.three { grid-template-columns: repeat(3, 1fr); }

.feature { border-top: 1px solid var(--ink); padding-top: 13px; }
.feature h3 { margin: 0 0 6px; font-size: 16.5px; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 15.5px; text-align: justify; hyphens: auto; }

/* ------------------------------------------------------------------ table */

table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 0 0 22px; }

th, td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }

th {
  font-family: var(--typewriter);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  border-bottom: 1px solid var(--ink);
}

td code { white-space: nowrap; }
.yes { color: var(--olive); }
.no { color: var(--ink-faint); }

/* ------------------------------------------------- the selector board */

/* before the box, three notes in the margin's voice: what it is, where its
   source is, and where the answers are — ruled like a colophon, not a card */
.demo-brief {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  margin: 0 0 20px;
}
.demo-brief > div { padding: 13px 18px 14px; border-left: 1px solid var(--rule); }
.demo-brief > div:first-child { padding-left: 0; border-left: none; }
.demo-brief > div:last-child { padding-right: 0; }
.demo-brief .lab {
  display: block;
  font-family: var(--typewriter);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 7px;
}
.demo-brief p { margin: 0; font-size: 13.5px; line-height: 1.52; color: var(--ink-soft); }

/* the document itself, set on a lifted sheet inside the ruled page */
.demo-box {
  border: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--paper-lift) 88%, transparent);
  padding: 20px 26px 24px;
  margin: 0 0 24px;
}
.demo-cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--typewriter);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 9px;
  margin-bottom: 18px;
}
.demo-box > article { margin: 0; }
.demo-box > article > :last-child { margin-bottom: 0; }
.demo-box h1 { font-size: 30px; margin-bottom: 4px; }
.demo-box ul, .demo-box table { margin-bottom: 12px; }
.demo-box form { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.demo-box label { font-family: var(--typewriter); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
/* the specimen's controls are the page's controls: same rule, same paper,
   same ink, and no piece of the browser's own furniture left showing */
.demo-box input,
.demo-box select {
  font: inherit;
  font-size: 14px;
  padding: 3px 7px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background-color: var(--paper);
  color: var(--ink);
}
.demo-box input:focus-visible,
.demo-box select:focus-visible,
.demo-box .btn:focus-visible {
  outline: 1px solid var(--brick);
  outline-offset: 1px;
}
.demo-box input[disabled] { opacity: 0.5; }
.demo-box input[type="number"] { width: 96px; padding-right: 2px; }
/* the stepper: the browser's two grey triangles, redrawn in ink. The button
   keeps its behaviour — it is still clickable — but not its look. */
.demo-box input[type="number"]::-webkit-outer-spin-button,
.demo-box input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 22px;
  margin: 0;
  opacity: 1;
  cursor: pointer;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 20px;
}
[data-theme="light"] .demo-box input[type="number"]::-webkit-inner-spin-button {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M5 3.4 L8.1 7.4 L1.9 7.4 Z' fill='%238d7c5f'/%3E%3Cpath d='M5 14.6 L1.9 10.6 L8.1 10.6 Z' fill='%238d7c5f'/%3E%3C/svg%3E");
}
[data-theme="dark"] .demo-box input[type="number"]::-webkit-inner-spin-button {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M5 3.4 L8.1 7.4 L1.9 7.4 Z' fill='%23b8a88a'/%3E%3Cpath d='M5 14.6 L1.9 10.6 L8.1 10.6 Z' fill='%23b8a88a'/%3E%3C/svg%3E");
}
/* the drop-down arrow, drawn as a chevron rather than left to the platform */
.demo-box select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 26px;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 6px;
}
[data-theme="light"] .demo-box select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 L5 5 L9 1' fill='none' stroke='%238d7c5f' stroke-width='1.4'/%3E%3C/svg%3E");
}
[data-theme="dark"] .demo-box select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 L5 5 L9 1' fill='none' stroke='%23b8a88a' stroke-width='1.4'/%3E%3C/svg%3E");
}
/* the checkbox: a ruled box that fills with the second roller when it is on */
.demo-box input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  vertical-align: -2px;
  cursor: pointer;
  background-color: var(--paper-lift);
  border: 1px solid var(--rule-strong);
}
.demo-box input[type="checkbox"]:checked {
  background-color: var(--brick);
  border-color: var(--brick);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 5.2 L4 7.5 L8.4 2.6' fill='none' stroke='%23f2e8ce' stroke-width='1.5'/%3E%3C/svg%3E");
}
.demo-box input[type="checkbox"][disabled] { cursor: not-allowed; }
.demo-box .btn {
  font: inherit;
  font-size: 14px;
  padding: 4px 14px;
  border: 1px solid var(--brick);
  background: none;
  color: var(--brick);
  cursor: pointer;
}
.demo-box .btn:hover { background: var(--brick); color: var(--paper-lift); }
.demo-box .flag { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--rule-strong); }
.demo-box .note { font-size: 14px; color: var(--ink-soft); }
/* a link in a specimen is content, not navigation: the page stops the click
   in script, and the cursor says so before the click happens */
.demo-box a { cursor: text; }

/* the answers, one query a row */
.demos { margin-bottom: 26px; }
.demos th:nth-child(1) { width: 40%; }
.demos th:nth-child(2) { width: 58px; }
.demos td { font-size: 13.5px; line-height: 1.5; padding: 8px 16px 8px 0; }
.demos td code {
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--brick);
  font-size: 12px;
}
.demos .n {
  font-family: var(--typewriter);
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 22px;
}
.demos .eng {
  font-family: var(--typewriter);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  margin-right: 9px;
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--olive) 35%, transparent);
}
.demos .none { color: var(--ink-faint); font-style: italic; }
/* a row points at its answer: hovering it marks the nodes in the document */
.demos tbody tr { transition: background-color 120ms ease; }
.demos tbody tr[data-hit] { cursor: pointer; }
.demos tbody tr[data-hit]:hover,
.demos tbody tr[data-hit]:focus,
.demos tbody tr.pinned { background: color-mix(in srgb, var(--brick) 7%, transparent); }
.demos tbody tr[data-hit]:focus-visible { outline: 1px solid var(--brick); outline-offset: -2px; }
.demos tbody tr.pinned td:first-child code { border-color: var(--brick); }
.demos tbody td:first-child code { transition: border-color 120ms ease; }
.demos tbody tr[data-hit]:hover td:first-child code { border-color: var(--brick); }
.demo-hint {
  font-size: 13px;
  color: var(--ink-soft);
  border-left: 2px solid var(--brick);
  padding-left: 12px;
  margin: 0 0 22px;
}
.demo-box .hit {
  /* a margin rule and a tint, not an outline: two lit siblings would draw
     their outlines into each other, and a block's outline is its neighbours' */
  box-shadow: inset 3px 0 0 var(--brick);
  background-color: color-mix(in srgb, var(--brick) 12%, transparent);
  transition: background-color 120ms ease;
}

/* --------------------------------------------------------------- api page */

.api-layout { display: grid; grid-template-columns: 196px 1fr; gap: 50px; align-items: start; }

.api-nav {
  position: sticky;
  top: 78px;
  font-size: 14px;
  border-right: 1px solid var(--rule);
  padding-right: 18px;
}
.api-nav h4 {
  font-family: var(--typewriter);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 24px 0 8px;
  font-weight: 400;
}
.api-nav h4 a { color: var(--brick); }
.api-nav h4:first-child { margin-top: 0; }
.api-nav a { display: block; color: var(--ink-soft); text-decoration: none; padding: 3px 0; font-family: var(--mono); font-size: 11.5px; }
.api-nav a:hover { color: var(--brick); }

.api-search {
  width: 100%;
  font-family: var(--typewriter);
  font-size: 12px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--paper-lift) 50%, transparent);
  border: 1px solid var(--rule);
  color: var(--ink);
  margin-bottom: 4px;
}
.api-search::placeholder { color: var(--ink-faint); letter-spacing: 0.1em; }
.api-search:focus { outline: 1px solid var(--brick); border-color: var(--brick); }

.api-item { border-top: 1px solid var(--rule); padding: 14px 0 8px; }
.api-item pre { background: none; border: none; padding: 0; margin: 0; font-size: 12px; }
.api-item pre::before { display: none; }
.api-item .sig { color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.api-item .sig .kw { color: var(--olive); }
.api-item .sig .ty { color: var(--brick); }
.api-item .sig .nm { font-weight: 600; }
.api-item .doc { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); max-width: 72ch; }
.api-item .doc code { font-size: 12.5px; }
.api-item .kind {
  font-family: var(--typewriter);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 8px;
}
.api-hidden { display: none; }

/* ------------------------------------------------------------------- call */

.callout {
  border-top: 3px double var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-lift) 42%, transparent);
  padding: 16px 20px;
  margin: 0 0 26px;
  font-size: 15.5px;
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
}
.callout b { color: var(--ink); }

/* ------------------------------------------------------------------ steps */

ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
ol.steps > li { position: relative; padding-left: 54px; padding-bottom: 38px; border-left: 1px solid var(--rule); margin-left: 15px; }
ol.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -15px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--typewriter);
  font-size: 11px;
  display: grid;
  place-items: center;
}
ol.steps h3 { margin: 2px 0 8px; }
ol.steps p { text-align: justify; hyphens: auto; max-width: var(--measure); }

/* ---------------------------------------------------------------- ornament */

.fleuron {
  text-align: center;
  color: var(--brick);
  opacity: 0.62;
  font-size: 15px;
  letter-spacing: 0.7em;
  margin: 46px 0 0;
  user-select: none;
}

.divider {
  text-align: center;
  color: var(--rule-strong);
  font-size: 13px;
  letter-spacing: 1.1em;
  margin: 4px 0 34px;
  user-select: none;
}

/* ----------------------------------------------------------------- footer */

footer.site {
  border-top: 3px double var(--rule-strong);
  margin-top: 50px;
  padding: 30px 0 60px;
  font-family: var(--typewriter);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; }
footer.site a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
footer.site a:hover { color: var(--brick); border-bottom-color: var(--brick); }
footer.site .spacer { margin-left: auto; }
footer.site .colophon { flex-basis: 100%; font-size: 9px; letter-spacing: 0.16em; opacity: 0.85; }

/* ------------------------------------------------------------- scrollbars
   A scrollbar is furniture, so it gets the same treatment as a rule: a ruled
   channel with a squared thumb running in it, never the system's grey.
   Chromium and Safari take the pseudo-elements; Firefox, which has none, takes
   the standard properties — and because the standard properties would win in
   Chromium and flatten the design, they are only declared where the
   pseudo-elements are missing. */

html { scrollbar-gutter: stable; }

::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-left: 1px solid var(--rule);
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hot); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--scroll-thumb-hot); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* a listing's own channel: narrower, no track rule, and inset by two */
pre::-webkit-scrollbar { width: 9px; height: 9px; }
pre::-webkit-scrollbar-track { background: transparent; border-left: none; }
pre::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 0;
}
pre::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hot); background-clip: content-box; }

/* Firefox: no pseudo-elements to style, so the standard properties do it */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
  pre { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  body::after { inset: 10px; background-image: none; }
  .wrap { padding: 0 26px; }
  .chapter { grid-template-columns: 1fr; gap: 8px; }
  .chapter-mark { border-top: none; padding-top: 0; display: flex; gap: 10px; align-items: baseline; }
  .chapter-mark span { margin-top: 0; }
}

@media (max-width: 860px) {
  body { font-size: 16.8px; }
  .hero { padding-top: 56px; }
  .hero-grid, .cols.two, .cols.three { grid-template-columns: 1fr; gap: 32px; }
  .api-layout { grid-template-columns: 1fr; gap: 30px; }
  .api-nav { position: static; border-right: none; border-bottom: 1px solid var(--rule); padding: 0 0 16px; }
  .api-nav a { display: inline-block; margin-right: 12px; }
  nav.top-nav { gap: 14px; }
  nav.top-nav a.hide-sm { display: none; }
  .lede, .sub, .feature p, .callout, ol.steps p { text-align: left; hyphens: manual; }
  .demo-brief { grid-template-columns: 1fr; }
  .demo-brief > div { padding: 12px 0; border-left: none; border-top: 1px solid var(--rule); }
  .demo-brief > div:first-child { border-top: none; }
  .dropcap::first-letter { float: none; font-size: inherit; color: inherit; padding: 0; }
}

/* A phone takes the navigation onto a line of its own rather than dropping
   any of it: the way back to the repository stays on every page. */
@media (width <= 560px) {
  header.top .wrap { flex-wrap: wrap; height: auto; padding-block: 12px; row-gap: 10px; }
  nav.top-nav { margin-left: 0; width: 100%; justify-content: space-between; gap: 8px; }
  nav.top-nav a { letter-spacing: 0.12em; }
  nav.top-nav a.hide-sm { display: inline; }
}

.hero-grid > * { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

::selection { background: var(--brick-soft); color: var(--ink); }
:focus-visible { outline: 1px solid var(--brick); outline-offset: 2px; }

/* The page scroll bar shows while the page moves or under the pointer and
   hides a moment after; it keeps its place, so nothing shifts. */
@supports selector(::-webkit-scrollbar) {
  html:not(.scrolling)::-webkit-scrollbar-thumb { background: transparent; border-color: transparent; box-shadow: none; }
}
@supports not selector(::-webkit-scrollbar) {
  html:not(.scrolling) { scrollbar-color: transparent transparent; }
}

/* Long identifiers in running text break rather than widen the page. */
:where(p, li, td, dd, h1, h2, h3, h4) code { white-space: pre-wrap; overflow-wrap: anywhere; }
.chapter > *, .cols > * { min-width: 0; }
@media (width <= 560px) {
  main table { display: block; overflow-x: auto; }
}