/* moonfory — a specimen sheet, not a landing page.
   Paper, ink and one oxide accent; rules instead of cards; serif for the
   voice and monospace for the bytes. */

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

:root {
  --paper: #f5f0e6;
  --paper-2: #efe8db;
  --ink: #17130e;
  --ink-soft: #3a332a;
  --muted: #6f6457;
  --rule: #d8cec0;
  --rule-soft: #e5ddd1;
  --oxide: #b23a1b;
  --oxide-soft: #f0d9cf;
  --teal: #2c6a64;
  --teal-soft: #d7e6e2;
  --code-bg: #ece4d6;
  --code-ink: #241e17;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas,
    "Liberation Mono", monospace;

  --measure: 68ch;
  --page: 1120px;

  /* scrollbar — see the note in the scrollbars section */
  --rail: var(--rule);
  --slide: #a3947e;
  --slide-soft: #bcae9b;
  --slide-deep: #8f2c13;
  --rail-v: linear-gradient(
    90deg,
    transparent calc(50% - 0.5px),
    var(--rail) calc(50% - 0.5px),
    var(--rail) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  --rail-h: linear-gradient(
    180deg,
    transparent calc(50% - 0.5px),
    var(--rail) calc(50% - 0.5px),
    var(--rail) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
  background-position: -1px -1px;
}

::selection {
  background: var(--oxide);
  color: var(--paper);
}

/* ---------- scrollbars ----------
   The browser's own bar is a foreign object on this sheet: rounded, grey,
   lit from nowhere. We draw our own instead — a hairline rail with a warm
   graphite block sliding along it. Squared, flat, no arrows: the same rule
   and block language as the rest of the page, so the bar reads as the
   margin of the sheet rather than furniture bolted onto it.

   Chromium and WebKit are drawn with the pseudo-elements below. Firefox
   (and anything else without them) gets its own thin two-tone bar from the
   `@supports` block near the end — deliberately guarded, because setting
   `scrollbar-color` anywhere would make Chrome discard this drawing and
   fall back to its native bar. */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* Transparent track: the paper grid keeps showing through. Only a 1px
   rule is drawn down the middle, so the block travels along a line. */
::-webkit-scrollbar-track {
  background-color: transparent;
  background-image: var(--rail-v);
}

::-webkit-scrollbar-track:horizontal {
  background-image: var(--rail-h);
}

/* 12px of bar, 6px of block: transparent side borders inset the fill so
   the block sits centred on the rail instead of filling the whole lane. */
::-webkit-scrollbar-thumb {
  background-color: var(--slide);
  background-clip: content-box;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  min-height: 56px;
  min-width: 56px;
}

::-webkit-scrollbar-thumb:horizontal {
  border-left: 0;
  border-right: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Code blocks scroll on their own. Same rail, thinner, quieter — the lane
   is tinted to the block so it disappears into it. */
.code::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.code::-webkit-scrollbar-track {
  background-color: var(--code-bg);
  background-image: var(--rail-v);
}

.code::-webkit-scrollbar-track:horizontal {
  background-image: var(--rail-h);
}

.code::-webkit-scrollbar-thumb {
  background-color: var(--slide-soft);
  background-clip: content-box;
  border: 2px solid transparent;
  min-height: 40px;
  min-width: 40px;
}

/* The accent, last: a scrollbar thumb only gets a hover state, and this
   has to out-rank the per-block rest colours above. */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--oxide);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--slide-deep);
}

a {
  color: var(--oxide);
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: underline;
}

code,
pre,
kbd,
samp {
  font-family: var(--mono);
  font-size: 0.86em;
}

p code,
li code,
td code {
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 0.08em 0.36em;
  border-radius: 2px;
  border: 1px solid var(--rule-soft);
}

/* ---------- top bar ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 5vw, 64px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.wordmark .slash {
  color: var(--oxide);
  margin: 0 0.04em;
}

.wordmark small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

.nav {
  display: flex;
  gap: 22px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.nav a {
  color: var(--ink-soft);
}

.nav a[aria-current="page"] {
  color: var(--oxide);
  border-bottom: 2px solid var(--oxide);
  padding-bottom: 2px;
}

/* ---------- hero ---------- */

.hero {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 76px) clamp(20px, 5vw, 64px) 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

/* The first screen is the hero's whole job: eyebrow, headline, lede,
   actions and the byte tape, all of it above the fold. So its height is
   the viewport minus the sticky bar (100px: 18px of padding twice, the
   wordmark, and its rule), and the type is capped by height as well as
   width — a five-line headline at 84px is what pushed the buttons off
   the screen and turned the tape column into dead air. */
.hero--screen {
  min-height: calc(100svh - 100px);
  padding-top: clamp(20px, 3.4vh, 40px);
  padding-bottom: clamp(20px, 3.4vh, 40px);
}

/* The same two-column rhythm reused further down the page, without the
   screen height. */
.hero--split {
  padding: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxide);
  margin: 0 0 clamp(12px, 1.8vh, 18px);
}

/* min() of a width and a height term: on a wide, short window the height
   term wins and keeps the headline — and the buttons under it — in frame. */
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, min(5.4vw, 8.4vh), 66px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(16px, 2.4vh, 24px);
}

.hero h1 em {
  font-style: italic;
  color: var(--oxide);
}

.hero .lede {
  max-width: 46ch;
  font-size: clamp(16.5px, 1.4vw, 19px);
  color: var(--ink-soft);
  margin: 0 0 clamp(20px, 3vh, 28px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.02em;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 140ms ease, color 140ms ease;
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

.btn.primary {
  background: var(--oxide);
  border-color: var(--oxide);
  color: #fff5f0;
}

.btn.primary:hover {
  background: #8f2c13;
  border-color: #8f2c13;
}

/* ---------- byte tape ---------- */

.tape {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0 18px;
}

/* A line of provenance under the bytes, so the panel is a caption plus a
   specimen rather than a short block floating in the right column. */
.tape .foot {
  margin: 16px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.tape .label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 20px;
}

.picker button {
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 120ms ease;
}

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

.picker button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.hex {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--mono);
  font-size: clamp(15px, 1.7vw, 19px);
  min-height: 30px;
}

.hex span {
  padding: 1px 3px;
  border-bottom: 1px solid transparent;
}

.hex span.t0 {
  color: var(--oxide);
  border-color: var(--oxide);
}

.hex span.t1 {
  color: var(--teal);
  border-color: var(--teal);
}

.hex span.t2 {
  color: var(--ink);
}

.hex span.t3 {
  color: var(--muted);
}

.decode {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  min-height: 2.6em;
}

.decode b {
  color: var(--ink);
  font-weight: 600;
}

/* What the three colours in the tape mean, in the same mono voice as the
   bytes they explain. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend span::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
}

.legend .t0::before {
  background: var(--oxide);
}

.legend .t1::before {
  background: var(--teal);
}

.legend .t2::before {
  background: var(--ink);
}

/* ---------- sections ---------- */

.band {
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) clamp(20px, 5vw, 64px);
}

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 18px;
}

h3 {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.lede-2 {
  max-width: var(--measure);
  color: var(--ink-soft);
  margin: 0 0 30px;
}

.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}

.entry {
  padding: 22px 26px 22px 0;
  border-bottom: 1px solid var(--rule);
}

.entry:nth-child(2n) {
  padding-left: 26px;
  padding-right: 0;
  border-left: 1px solid var(--rule);
}

.entry .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--oxide);
  letter-spacing: 0.08em;
}

.entry h3 {
  margin: 6px 0 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 19px;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
}

.entry p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}

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

.code {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--oxide);
  padding: 18px 20px;
  overflow: auto;
  margin: 0 0 22px;
}

.code pre {
  margin: 0;
  color: var(--code-ink);
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre;
}

.code .copy {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--muted);
  padding: 3px 7px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease;
}

.code:hover .copy {
  opacity: 1;
}

.code .copy:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.tok-k {
  color: var(--oxide);
}

.tok-s {
  color: var(--teal);
}

.tok-c {
  color: var(--muted);
  font-style: italic;
}

.tok-n {
  color: #7a5a1e;
}

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

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

th {
  text-align: left;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--ink);
  font-weight: 600;
}

td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-soft);
}

td:first-child {
  color: var(--ink);
}

/* ---------- docs layout ---------- */

.docs {
  max-width: var(--page);
  margin: 0 auto;
  padding: 34px clamp(20px, 5vw, 64px) 80px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.rail {
  position: sticky;
  top: 92px;
  font-size: 14px;
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}

.rail .grp {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.rail a {
  display: block;
  color: var(--ink-soft);
  padding: 4px 0;
}

.rail a:hover {
  color: var(--oxide);
  text-decoration: none;
}

.rail .grp + a {
  margin-top: 2px;
}

.rail .grp {
  margin-top: 20px;
}

.rail .grp:first-child {
  margin-top: 0;
}

.article h2 {
  scroll-margin-top: 90px;
  padding-top: 8px;
}

.article h2 + .lede-2 {
  margin-top: -6px;
}

.article p {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.article ul,
.article ol {
  max-width: var(--measure);
  color: var(--ink-soft);
  padding-left: 1.2em;
}

.article li {
  margin: 0.3em 0;
}

.note {
  border-left: 3px solid var(--teal);
  background: var(--teal-soft);
  padding: 14px 18px;
  margin: 0 0 24px;
  color: #1c4743;
  font-size: 15px;
  max-width: var(--measure);
}

.note b {
  color: #123330;
}

/* ---------- API reference ----------
   A generated page is read like a dictionary entry: a name, the line it was
   declared on, the declaration, then the prose. Everything is a rule away
   from the next thing — no cards, no boxes, because a box would say "this
   item ends here" and an entry is only a paragraph of the index. */

.api-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: -10px 0 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.api-group {
  margin: 40px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.api-table td p {
  margin: 0 0 0.55em;
}

.api-table td p:last-child {
  margin-bottom: 0;
}

.api-table td:first-child code {
  white-space: nowrap;
}

/* The kind of a thing, small enough to be a margin note beside its name. */
.api-kind {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  white-space: nowrap;
}

/* An enumeration with nothing to say about each variant: the names are the
   entry, set like the chips elsewhere on the site rather than in a table
   with an empty second column. */
.api-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 26px;
}

.api-variants code {
  background: var(--code-bg);
  border: 1px solid var(--rule-soft);
  padding: 1px 6px;
  color: var(--code-ink);
  font-size: 12px;
}

/* A declaration that wraps instead of scrolling: the arguments are the entry,
   and the tail of a signature should not be behind a scrollbar. The right
   padding keeps the wrapped lines clear of the copy button. */
.code.wrap {
  padding-right: 62px;
}

.code.wrap pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A method's signature: quieter than a code block, and wrapped rather than
   scrolled, because a parameter list is read left to right. */
.sig {
  border-left: 2px solid var(--rule);
  padding: 1px 0 1px 14px;
  margin: 0 0 12px;
}

.sig pre {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--code-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.api-method {
  padding-bottom: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule-soft);
}

.api-method:last-child {
  border-bottom: 0;
  margin-bottom: 8px;
}

.api-method h4 {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}

.api-method h4 a {
  color: var(--ink);
}

/* The anchor, shown as a margin mark: a link that does not pretend to be
   part of the name. */
.api-method h4 a::before {
  content: "#";
  color: var(--slide);
  margin-right: 7px;
}

.api-method h4 a:hover {
  color: var(--oxide);
  text-decoration: none;
}

.api-method h4 a:hover::before {
  color: var(--oxide);
}

.api-method p {
  margin: 0 0 10px;
}

/* How much of a long declaration was left out, under the excerpt. */
.api-more {
  margin: -4px 0 20px;
  font-size: 13px;
  color: var(--muted);
}

.api-impls {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 8px;
}

.api-impls code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-soft);
}

.api-src {
  margin: 30px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--muted);
}

.pager {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 26px 0 0;
  font-size: 14px;
}

.pager a {
  display: block;
  max-width: 48%;
}

.pager a span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.pager .next {
  margin-left: auto;
  text-align: right;
}

.rail a[aria-current="page"] {
  color: var(--oxide);
}

/* A page that is its own contents page needs no rail beside it. */
.docs--single {
  grid-template-columns: minmax(0, 1fr);
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}

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

footer {
  border-top: 2px solid var(--ink);
  background: var(--paper-2);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 30px;
  padding-bottom: 40px;
  font-size: 13.5px;
  color: var(--muted);
}

footer a {
  color: var(--ink-soft);
}

/* ---------- scrollbars, the other engines ----------
   Firefox cannot be told to draw a rail, only to tint its own thin bar.
   Guarded behind `not selector(::-webkit-scrollbar)` so Chromium never
   sees these declarations — with them present Chrome would drop the
   drawn bar above for the native one. */

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--slide) var(--paper);
  }

  .code {
    scrollbar-width: thin;
    scrollbar-color: var(--slide) var(--code-bg);
  }
}

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

/* All tracks get an explicit 0 minimum: a bare `1fr` is `minmax(auto, 1fr)`,
   and that `auto` lets a wide table or a long link push the whole page wider
   than the phone it is being read on. */

@media (max-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  /* Stacked, the hero no longer has a column to balance: let it end where
     its content ends instead of holding a hole open to the fold. */
  .hero--screen {
    min-height: 0;
  }
  .ledger {
    grid-template-columns: minmax(0, 1fr);
  }
  .entry:nth-child(2n) {
    padding-left: 0;
    border-left: 0;
  }
  .docs {
    grid-template-columns: minmax(0, 1fr);
  }
  .rail {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
  }
  .rail .grp {
    flex: 1 0 100%;
    margin: 10px 0 2px;
  }
}

/* A table cannot be narrower than its longest unbroken token, and code
   identifiers are long. Below this width the columns take the page and the
   code inside them is allowed to wrap rather than overflow. */

@media (max-width: 700px) {
  table {
    table-layout: fixed;
  }
  td code,
  th code {
    overflow-wrap: anywhere;
  }
  /* A field's type is `Map[Int32, Int32]`, which does not fit a narrow
     column; the nowrap that keeps a table tidy on a desktop is what makes
     it overflow here. */
  .api-table td:first-child code {
    white-space: normal;
  }
  /* Equal thirds would leave the summary three words wide while the name
     column sits half empty. Auto layout lets the prose take what is left. */
  .api-table {
    table-layout: auto;
  }
  .api-table th:first-child,
  .api-table td:first-child {
    width: 34%;
  }
  .api-table th:nth-child(2),
  .api-table td:nth-child(2) {
    width: 1%;
  }
  /* Five links and a wordmark are more than a phone's width. Wrapping is
     invisible on a desktop, where they already fit on one line. */
  .top {
    flex-wrap: wrap;
    gap: 8px 18px;
  }
  .nav {
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
  }
  .wordmark {
    font-size: 22px;
  }
  .wordmark small {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}

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

/* 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; }
}