/* statac.dev, design A ("Plain & Honest").
   A dark band for the header; then contents | article | on this page,
   stacking on a phone. The home page is laid out by the snippets it calls. */

/* Parkly Soft, by Dan Cederholm of SimpleBits, under the SimpleBits
   licence: simplebits.com/licenses. For titles and H2s only. It has capitals
   alone: lowercase is drawn as capitals. The overrides centre the
   capitals on the line, which its own metrics set high. */
@font-face {
  font-family: "Parkly Soft";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 85%;
  descent-override: 15%;
  line-gap-override: 0%;
  src: url("fonts/parkly-soft.937f29e2.woff2") format("woff2");
}
/* IBM Plex Sans and IBM Plex Mono, by IBM, under the SIL Open Font
   License: fonts/plex-sans-OFL.txt and fonts/plex-mono-OFL.txt. Taken
   unchanged from @fontsource-variable/ibm-plex-sans 5.3.0 and
   @fontsource/ibm-plex-mono 5.3.0. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/plex-sans-latin-wght-normal.c8fcea91.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/plex-sans-latin-ext-wght-normal.6dc714b7.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plex-mono-latin-400-normal.ed8aa1e7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plex-mono-latin-ext-400-normal.a5a7bac2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plex-mono-latin-700-normal.9f6ee48c.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plex-mono-latin-ext-700-normal.8536e1b1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Recursive, by the Recursive Project Authors, under the SIL Open Font
   License: fonts/OFL.txt. For the home page's hand-written note and a
   callout's label: its slanted, cursive cut, Basic Latin only, made from
   @fontsource-variable/recursive 5.3.0 with fontTools:
   fonttools varLib.instancer recursive-latin-full-normal.woff2 slnt=-15 CRSV=1 CASL=1 MONO=0 wght=400:800
   pyftsubset <that file> --unicodes="U+0020-007E,U+2018,U+2019" --flavor=woff2 */
@font-face {
  font-family: "Recursive Note";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/recursive-note.2ffc4387.woff2") format("woff2");
}

/* The colours are steps of Radix Colors 3.0.0, Copyright (c) 2021 Radix,
   under the MIT License: github.com/radix-ui/colors. Only the steps in use are copied.
   Each step has a job: 1-2 grounds, 3-5 fills, 6-8 borders, 9-10 solid
   colour, 11-12 text. light-dark() takes the light scale or the dark one
   by color-scheme, which data-theme sets where the reader has chosen. */
:root {
  --sand-1: #fdfdfc; --sand-3: #f1f0ef; --sand-4: #e9e8e6; --sand-6: #dad9d6; --sand-10: #82827c; --sand-11: #63635e; --sand-12: #21201c;
  --sand-dark-1: #111110; --sand-dark-2: #191918; --sand-dark-3: #222221; --sand-dark-4: #2a2a28; --sand-dark-6: #3b3a37; --sand-dark-7: #494844; --sand-dark-10: #7c7b74; --sand-dark-11: #b5b3ad; --sand-dark-12: #eeeeec;
  --orange-9: #f76b15; --orange-11: #cc4e00;
  --orange-dark-11: #ffa057;
  --amber-3: #fff7c2; --amber-6: #f3d673; --amber-9: #ffc53d; --amber-11: #ab6400;
  --amber-dark-3: #302008; --amber-dark-6: #5c3d05; --amber-dark-11: #ffca16;
  --sky-3: #e1f6fd; --sky-6: #a9daed; --sky-9: #7ce2fe; --sky-11: #00749e;
  --sky-dark-3: #112840; --sky-dark-6: #1b537b; --sky-dark-11: #75c7f0;
  --red-11: #ce2c31;
  --blue-11: #0d74ce; --blue-dark-11: #70b8ff;
  --grass-11: #2a7e3b; --grass-dark-11: #71d083;
  --violet-11: #6550b9; --violet-dark-11: #baa7ff;

  --bg: light-dark(var(--sand-1), var(--sand-dark-2));
  --surface: light-dark(var(--sand-3), var(--sand-dark-3));
  --line: light-dark(var(--sand-6), var(--sand-dark-6));
  --fg: light-dark(var(--sand-12), var(--sand-dark-12));
  --muted: color-mix(in oklab, var(--faint), var(--fg) 40%);
  --faint: light-dark(var(--sand-11), var(--sand-dark-11));
  --prompt: light-dark(var(--sand-10), var(--sand-dark-10));
  --code-bg: light-dark(var(--sand-4), var(--sand-dark-4));
  /* The header, the footer and the terminal are dark in either look. */
  --band: light-dark(var(--sand-dark-2), var(--sand-dark-1));
  --band-surface: var(--sand-dark-3);
  --band-line: var(--sand-dark-7);
  --band-fg: var(--sand-dark-12);
  --band-muted: var(--sand-dark-11);
  --terminal: var(--sand-dark-1);
  --terminal-line: var(--sand-dark-6);
  --terminal-fg: var(--sand-dark-12);
  --terminal-dim: var(--sand-dark-11);
  --accent: var(--orange-9);
  --on-accent: var(--sand-dark-1);
  --font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display: "Parkly Soft", var(--font);
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The page */
* { box-sizing: border-box; }
/* The type scale. Each size is written as its px at an 18px body, such
   as calc(16rem / 18), so text follows the size the reader has chosen
   and this one value scales it all: 112.5% is 18px at the default. */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--fg); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; padding: 8px 14px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.skip:focus { left: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* macOS thickens light text on a dark ground. These two thin it there,
   and do nothing on other systems. */
.top, .foot, pre.code.terminal, .hero, .home pre, :root[data-theme="dark"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

/* Header band */
.top { background: var(--band); color: var(--band-fg); }
.top-inner { max-width: 1440px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.brand { display: flex; align-items: center; min-height: 44px; color: var(--band-fg); text-decoration: none; }
.brand img { display: block; width: auto; height: 32px; }
.top-nav { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: calc(16rem / 18); }
.top-link { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--band-fg); text-decoration: none; }
.top-link svg { flex: none; width: 0.8em; height: 0.8em; margin-left: 5px; fill: none; stroke: var(--band-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.top-link:hover, .top-link[aria-current] { color: #ffffff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* Search: the box in the header */
.search { display: block; position: relative; flex: 0 1 280px; min-width: 200px; }
.search form { margin: 0; }
/* Under 16px, iOS zooms the page when the box is focused. */
.search input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--band-line); border-radius: 5px; background: var(--band-surface); color: var(--band-fg); font: inherit; font-size: max(16px, calc(16rem / 18)); }
.search input::placeholder { color: var(--band-muted); }
.search-results { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(440px, calc(100vw - 32px)); margin: 0; padding: 6px; list-style: none; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
.search-results[hidden] { display: none; }
.search-results a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 5px; color: var(--fg); text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { background: var(--surface); }
.search-title { font-size: calc(15rem / 18); font-weight: 700; }
.search-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: calc(13.5rem / 18); color: var(--faint); }
.search-excerpt mark { background: none; color: var(--fg); font-weight: 600; }
.search-empty { padding: 8px 10px; font-size: calc(14rem / 18); color: var(--faint); }
.search-meant { padding: 0; border: 0; background: none; color: var(--fg); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Light or dark: one button beside the search box. Hidden until
   assets/theme.js runs, as it does nothing without it. It shows the look
   in force, and is ringed in the accent while that isn't the device's. */
.top-tools { display: flex; flex: 0 1 auto; align-items: center; gap: 12px; }
.theme { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--band-line); border-radius: 5px; background: var(--band-surface); color: var(--band-muted); cursor: pointer; }
.theme[hidden] { display: none; }
.theme:hover { color: var(--band-fg); }
.theme[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme[data-look="light"] .theme-dark, .theme[data-look="dark"] .theme-light { display: none; }
/* One row where there is room for it, the search box giving way first.
   Narrower, the name, the search box and the button share the first row
   and the links take the second. The source is in the footer too, so
   its link goes where the three won't fit. */
@media (min-width: 900px) {
  .top-inner { flex-wrap: nowrap; }
  .top-nav { flex: none; flex-wrap: nowrap; }
  .top-tools { flex: 0 1 332px; min-width: 0; }
  .top-tools .search { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 899.98px) {
  .top-inner { gap: 0 12px; padding-block: 8px 4px; }
  .top-tools { order: 1; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
  .top-tools .search { flex: 1 1 auto; min-width: 0; max-width: 320px; }
  .top-nav { order: 2; flex: 1 1 100%; margin-inline: -10px; font-size: calc(15rem / 18); }
  .top-link { padding: 0 10px; }
}
@media (max-width: 479.98px) {
  .top-link[href^="https://git.statac.dev"] { display: none; }
}
@media (max-width: 359.98px) {
  .top-nav { font-size: calc(14rem / 18); }
  .top-link { padding: 0 8px; }
}

/* Contents | article | on this page. The article stops at a comfortable
   line length; past it, the width goes to the side columns and the gaps.
   Each side column appears only where the article keeps about 640px
   beside it; narrower, it becomes a panel the page bar opens: on this
   page first, then the contents too. */
.layout { flex: 1 0 auto; width: 100%; max-width: 1440px; margin: 0 auto; padding: 36px 24px 72px; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px 48px; }
.eyebrow { margin: 0 0 6px; font-size: calc(12.5rem / 18); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* Both carry popover, for their panels. As columns, these undo the
   browser's look for a popover, and show them though none is open. */
.contents, .on-page { position: static; inset: auto; width: auto; height: auto; margin: 0; border: 0; padding: 0; overflow: visible; color: inherit; background: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contents .panel-head, .panel-close { display: none; }
.panel-close { place-items: center; flex: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--faint); cursor: pointer; }
.panel-close:hover { color: var(--fg); }
.panel-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.contents { flex: 1 1 220px; max-width: 280px; display: flex; flex-direction: column; gap: 24px; font-size: calc(16rem / 18); line-height: 1.4; }
.contents ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.contents a { display: block; padding: 4px 10px; margin-left: -10px; border-radius: 4px; color: var(--fg); text-decoration: none; }
.contents a:hover { background: var(--surface); }
.contents a[aria-current="page"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }

.on-page { display: block; flex: 1 1 170px; max-width: 240px; position: sticky; top: 16px; font-size: calc(14rem / 18); line-height: 1.4; }
.on-page ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; border-left: 2px solid var(--line); }
.on-page a { display: block; margin-left: -2px; padding-left: 12px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; }
.on-page a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); }
/* assets/nav.js marks the section being read. */
.on-page a[aria-current] { color: var(--fg); border-left-color: var(--accent); }
/* A page with no headings has no on this page column. Keeping its space
   holds the article where it stands on every other page, not against
   the right edge. The problem list takes the space itself. */
@media (min-width: 1240px) {
  .layout:not(:has(.on-page, .problem-list))::after { content: ""; flex: 1 1 170px; max-width: 240px; }
}

/* The article */
.article { flex: 999 1 560px; min-width: 0; max-width: 720px; }
.eyebrow-page { margin-bottom: 0; font-size: calc(14rem / 18); }
.article h1 { margin: 8px 0 16px; font-size: calc(44rem / 18); line-height: 1.02; letter-spacing: 0.012em; font-weight: 400; font-family: var(--display); font-synthesis: none; text-wrap: balance; }
/* A page's summary, under its title: what the page covers. */
.summary { margin: 0 0 28px; font-size: calc(20rem / 18); color: var(--muted); text-wrap: pretty; }
.prose h2 { margin: 48px 0 14px; font-size: calc(25rem / 18); line-height: 1.15; letter-spacing: 0.025em; font-weight: 400; font-family: var(--display); font-synthesis: none; text-wrap: balance; scroll-margin-top: calc(var(--bar, 0px) + 16px); }
.prose .step { color: var(--faint); }
.prose h3 { margin: 32px 0 10px; font-size: calc(19.5rem / 18); line-height: 1.3; font-weight: 600; scroll-margin-top: calc(var(--bar, 0px) + 16px); }
.prose h4 { margin: 24px 0 8px; font-size: 1rem; line-height: 1.35; font-weight: 600; }
.prose p, .prose ul, .prose ol, .prose dl, .prose pre, .prose table, .prose figure, .prose blockquote, .prose .callout { margin: 14px 0 0; }
.prose p { text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li + li { margin-top: 6px; }
.prose li > ul, .prose li > ol { margin-top: 6px; }
.prose dt { margin-top: 16px; font-weight: 700; }
.prose dd { margin: 4px 0 0; padding-left: 20px; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.prose blockquote { padding-left: 18px; border-left: 3px solid var(--line); color: var(--muted); }

/* Code */
code { font-family: var(--mono); font-size: 0.84em; background: var(--code-bg); padding: 1px 5px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; overflow-wrap: break-word; }
pre { padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; overflow-x: auto; font-family: var(--mono); font-size: calc(15rem / 18); line-height: 1.7; }
/* Code breaks only where snippets/markdown/inline_code.html lets it:
   short code never, long code at a space or after a slash. A break at a
   hyphen would read as part of a name. */
:not(pre) > code:not(.long), code.long > span { white-space: nowrap; }
pre code { background: none; padding: 0; font-size: inherit; border-radius: 0; }

/* snippets/markdown/code.html: a command with its prompt, never copied,
   and a message as the terminal draws it. */
pre.code.command { color: var(--fg); }
pre.command .line:not(:empty)::before { content: "$ "; color: var(--prompt); user-select: none; }
pre.code.terminal { background: var(--terminal); border-color: var(--terminal-line); color: var(--terminal-fg); }
pre.terminal .sev { margin: 0; padding: 0 6px; border-radius: 2px; font-size: inherit; }
pre.terminal .dim, .home pre.command .dim { color: var(--terminal-dim); }
pre.command .dim { color: var(--faint); }
pre.terminal .caret { color: var(--accent); }
figure.code { margin-inline: 0; }
figure.code figcaption { margin-bottom: 6px; font-family: var(--mono); font-size: calc(14rem / 18); color: var(--faint); }
figure.code pre { margin: 0; }

/* A screenshot comes in both looks, snippets/screenshot.html; only the
   one for the look in force is shown, so only that one is fetched. */
.screenshot { margin-inline: 0; }
.screenshot a { display: block; width: fit-content; max-width: 100%; }
.screenshot img { display: block; border: 1px solid var(--line); border-radius: 8px; }
.screenshot .dark, :root[data-theme="dark"] .screenshot .light { display: none; }
:root[data-theme="dark"] .screenshot .dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .screenshot .light { display: none; }
  :root:not([data-theme="light"]) .screenshot .dark { display: block; }
}
.screenshot a { cursor: zoom-in; }

/* The lightbox a screenshot opens in, assets/lightbox.js. It fills the
   window, so that a click anywhere lands on it and closes it. */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: none; cursor: zoom-out; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(0 0 0 / 0.8); backdrop-filter: blur(4px); }
/* As wide as the screenshot is shown, --w by --h, within the window. */
.lightbox img { display: block; width: min(var(--w) * 1px, 100%, (100dvh - 32px) * var(--w) / var(--h)); height: auto; border-radius: 8px; box-shadow: 0 16px 48px rgb(0 0 0 / 0.4); }
.lightbox-close { position: fixed; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.5); color: #fff; cursor: pointer; }
.lightbox-close:hover { background: rgb(0 0 0 / 0.8); }
.lightbox-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
:root:has(.lightbox[open]) { overflow: hidden; }
/* It fades in, and out where the browser can keep it on top meanwhile. */
@media (prefers-reduced-motion: no-preference) {
  .lightbox, .lightbox::backdrop { transition: opacity 0.2s ease-out, display 0.2s allow-discrete, overlay 0.2s allow-discrete; }
  .lightbox:not([open]), .lightbox:not([open])::backdrop { opacity: 0; }
  .lightbox img { transition: scale 0.2s ease-out; }
  @starting-style {
    .lightbox[open], .lightbox[open]::backdrop { opacity: 0; }
    .lightbox[open] img { scale: 0.96; }
  }
}

/* The colours of each kind of code, by the classes `code_colours: true`
   gives it. They are step 11 of the Radix scales above. In the light look
   each is taken a fifth of the way to the text colour, for 4.5 to 1 on the
   code's surface. */
:root {
  --syntax-name: light-dark(color-mix(in oklab, var(--blue-11) 80%, var(--sand-12)), var(--blue-dark-11));
  --syntax-string: light-dark(color-mix(in oklab, var(--grass-11) 80%, var(--sand-12)), var(--grass-dark-11));
  --syntax-constant: light-dark(color-mix(in oklab, var(--violet-11) 80%, var(--sand-12)), var(--violet-dark-11));
  --syntax-keyword: light-dark(color-mix(in oklab, var(--orange-11) 80%, var(--sand-12)), var(--orange-dark-11));
}
.code { color: var(--fg); background-color: var(--surface); }
.hl-variable, .hl-property, .hl-tag, .hl-operator { color: var(--syntax-name); }
.hl-string, .hl-inserted { color: var(--syntax-string); }
.hl-number, .hl-constant, .hl-attribute, .hl-function, .hl-type, .hl-link { color: var(--syntax-constant); }
.hl-keyword, .hl-heading, .hl-deleted { color: var(--syntax-keyword); }
.hl-comment, .hl-punctuation { color: var(--faint); }
.hl-emphasis, .hl-strong { color: var(--fg); }
.hl-comment, .hl-emphasis { font-style: italic; }
.hl-tag, .hl-heading, .hl-strong { font-weight: 700; }
.hl-link { text-decoration: underline; }

/* Callouts */
.callout {
  --callout-bg: light-dark(var(--sky-3), var(--sky-dark-3));
  --callout-line: light-dark(var(--sky-6), var(--sky-dark-6));
  --callout-title: light-dark(var(--sky-11), var(--sky-dark-11));
  padding: 16px 20px; background: var(--callout-bg); border: 1px solid var(--callout-line); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;
}
.callout.warning {
  --callout-bg: light-dark(var(--amber-3), var(--amber-dark-3));
  --callout-line: light-dark(var(--amber-6), var(--amber-dark-6));
  --callout-title: light-dark(var(--amber-11), var(--amber-dark-11));
}
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout-title { color: var(--callout-title); font-family: "Recursive Note", var(--font); font-style: italic; font-weight: 700; }
.callout-body { text-wrap: pretty; }

/* Tables. Statac wraps each in .scroll: one too wide for the column
   scrolls inside it, not the page. The padding keeps a focus ring at the
   table's edge from being cut off. */
.scroll { overflow-x: auto; margin-inline: -6px; padding-inline: 6px; }
table { width: 100%; border-collapse: collapse; font-size: calc(16rem / 18); line-height: 1.5; }
th, td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: calc(12.5rem / 18); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); text-wrap: balance; }
:is(th, td):last-child { padding-right: 0; }
/* Code keeps its case in an upper-cased heading: the case is part of
   what it says. */
thead code { font-size: 1em; letter-spacing: 0; text-transform: none; }
/* The second column of a table given {.noted}, under the first. */
.cell-note { display: block; margin-top: 4px; min-width: 10em; max-width: 16em; font-size: calc(15rem / 18); line-height: 1.4; color: var(--muted); text-wrap: pretty; }
tbody th { font-size: inherit; letter-spacing: 0; text-transform: none; color: inherit; text-wrap: wrap; }
/* On a phone, table words hyphenate, and a table marked stacks, by
   snippets/markdown/table.html or tables.js, stacks each row: its first
   cell in bold, then the others, each under its column's heading. */
@media (max-width: 599.98px) {
  th, td { hyphens: auto; }
  table.stacks { border-top: 1px solid var(--line); }
  table.stacks, table.stacks :is(tbody, tr, th, td) { display: block; }
  table.stacks thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.stacks tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.stacks tbody :is(th, td) { padding: 0; border: 0; }
  table.stacks tr > :first-child { font-weight: 700; }
  table.stacks .cell-note { max-width: none; font-weight: 400; }
  table.stacks tr > * + td { margin-top: 8px; }
  /* A matrix keeps its grid: closer columns let more of it fit. */
  table.matrix :is(th, td):not(:last-child) { padding-right: 8px; }
  table.stacks td:empty { display: none; }
  table.stacks td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-size: calc(12.5rem / 18); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
}

/* A reference, built by snippets/markdown/table.html: an entry for each
   name, its values on the name's line and its description under it. */
.prose .ref { border-top: 1px solid var(--line); }
.ref > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.prose .ref :is(dt, dd) { margin: 0; padding: 0; }
.ref dt code { font-weight: 700; }
.ref-value { font-size: calc(16rem / 18); color: var(--muted); }
.ref-label { color: var(--faint); }
.ref :is(.ref-text, .ref-example) { flex-basis: 100%; }
.ref-text { text-wrap: pretty; }
/* The line under a problem page's sample message. */
.prose #what-youll-see + pre + p { margin-top: 10px; font-size: calc(15rem / 18); color: var(--faint); }
/* A problem page's name, the command that explains it and the line
   that quietens it: a boxed table with its headings down the side. */
table.named { border: 1px solid var(--line); border-radius: 6px; border-collapse: separate; border-spacing: 0; }
.named th, .named td { padding: 12px 16px; }
.named th { width: 170px; font-size: calc(14rem / 18); letter-spacing: 0; text-transform: none; }
.named tr:last-child > * { border-bottom: 0; }
@media (max-width: 599.98px) {
  .named th, .named td { display: block; width: auto; }
  .named th { padding-bottom: 0; border-bottom: 0; }
  .named td { padding-top: 4px; }
}

/* Footnotes */
.footnotes { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--line); font-size: calc(15rem / 18); color: var(--muted); }
.footnotes ol { padding-left: 24px; }

/* Previous, next, and the issue line */
.pager { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.pager-link { flex: 0 1 320px; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--fg); }
.pager-link:hover { border-color: var(--accent); }
.pager-next { margin-left: auto; align-items: flex-end; text-align: right; }
.pager-dir { font-size: calc(14rem / 18); color: var(--faint); }
.pager-title { font-weight: 700; }
.issue { margin-top: 28px; font-size: calc(15rem / 18); color: var(--faint); }
.issue a { color: var(--faint); }

/* Problem pages: the kind's badge */
.sev-line { margin: 0 0 6px; font-size: calc(16rem / 18); color: var(--muted); }
.sev { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 3px; font-family: var(--mono); font-size: calc(13.5rem / 18); font-weight: 700; text-decoration: none; }
.sev-error { background: var(--red-11); color: #ffffff; }
.sev-warning { background: var(--amber-9); color: var(--sand-12); }
.sev-note { background: var(--sky-9); color: var(--sand-12); }
a.sev:hover { text-decoration: underline; }
.article.problem-list { max-width: none; }
.problem-list .prose > p:first-child { max-width: 720px; }
.problem-list .prose h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.problem-list .prose h2 .sev { margin: 0; }
.problem-list .kinds { font-family: var(--font); font-size: calc(15rem / 18); font-weight: 400; color: var(--faint); }
.problem-list .prose ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14em, 100%), 1fr)); gap: 0 24px; padding: 0; list-style: none; }
.problem-list .prose li { margin: 0; border-bottom: 1px solid var(--line); }
.problem-list .prose li a { display: block; padding: 5px 0; font-size: calc(16rem / 18); text-decoration: none; }
.problem-list .prose li a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* Footer band */
.foot { background: var(--band); color: var(--band-muted); font-size: calc(15rem / 18); }
.foot-inner { max-width: 1440px; margin: 0 auto; padding: 26px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
/* The home page is narrower than the rest: its header and footer keep to it. */
body:has(> main.home) :is(.top-inner, .foot-inner) { max-width: 1120px; }
.foot p { margin: 0; }
.foot a { color: var(--band-fg); }

/* The home page: content/index.md, laid out by the snippets it calls.
   The hero and each band share the page's columns through subgrid. */
.home {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: [full-start] 16px [main-start gap-start mid] minmax(0, 1fr) [main-end] 16px [full-end];
  align-content: start;
}
.home > * { grid-column: main-start / main-end; min-width: 0; margin: 0; }
.home pre, .home pre.code { padding: 16px; background: var(--terminal); border: 1px solid var(--terminal-line); border-radius: 6px; color: var(--terminal-fg); font-size: calc(13.5rem / 18); line-height: 1.8; }
@media (min-width: 960px) {
  .home pre, .home pre.code { padding: 22px 24px; font-size: calc(14.5rem / 18); }
}

/* snippets/hero.html. What it wraps is laid out as if written beside its
   text, so a paragraph after the scribble goes under both. */
.hero { grid-column: full-start / full-end; display: grid; grid-template-columns: subgrid; background: var(--band); color: var(--band-fg); }
.hero-body { display: contents; }
.hero-text, .hero-body > * { grid-column: main-start / main-end; min-width: 0; margin: 0; }
.hero-text { padding: 40px 0 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero h1 { margin: 0; font-size: clamp(calc(44rem / 18), 10vw, calc(64rem / 18)); line-height: 1; letter-spacing: 0.012em; font-weight: 400; font-family: var(--display); font-synthesis: none; text-wrap: balance; }
.hero-strap { margin: -8px 0 0; font-size: calc(26rem / 18); line-height: 1.3; color: var(--band-fg); text-wrap: balance; }
.hero-sub { margin: 0; max-width: 30em; font-size: calc(20rem / 18); line-height: 1.5; color: var(--band-muted); text-wrap: pretty; }
.hero-row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero-meta { font-size: calc(15rem / 18); color: var(--band-muted); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 4px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }
.btn:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--on-accent); }
/* On a phone each command keeps to a line, 39 characters at 0.6em each,
   and what serve prints wraps. */
.hero pre.code { margin-top: 32px; white-space: pre-wrap; font-size: clamp(calc(12rem / 18), calc((100vw - 68px) / 23.4), calc(13.5rem / 18)); }
.scribble { margin-top: 10px; display: flex; justify-content: flex-end; align-items: flex-end; gap: 6px; font-family: "Recursive Note", var(--font); font-style: italic; font-size: calc(19rem / 18); line-height: 1.3; color: var(--band-fg); }
.scribble::before { content: ""; flex: none; width: 52px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 40' fill='none' stroke='%23F76B15' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 34C36 33 18 28 11 9'/%3E%3Cpath d='M5 15l5-9 8 6'/%3E%3C/svg%3E") no-repeat; }
.hero-body > p:not(.scribble) { margin: 32px 0 40px; font-size: calc(15rem / 18); color: var(--band-muted); text-wrap: pretty; }
.hero-body > p:not(.scribble) a { color: var(--band-fg); }

/* snippets/band.html, by its kind. */
.band { display: grid; grid-template-columns: subgrid; }
.band > * { grid-column: main-start / main-end; min-width: 0; margin: 0; }

.split > h2 { margin-top: 72px; font-size: calc(42rem / 18); line-height: 1.1; letter-spacing: 0.02em; font-weight: 400; font-family: var(--display); font-synthesis: none; text-wrap: balance; }
.split > pre.code { margin-top: 20px; font-size: calc(14rem / 18); }
.split > p { margin-top: 16px; color: var(--muted); text-wrap: pretty; }

.shot > h2 { margin-top: 88px; font-size: calc(42rem / 18); line-height: 1.1; letter-spacing: 0.02em; font-weight: 400; font-family: var(--display); font-synthesis: none; text-wrap: balance; }
.shot > p { margin-top: 16px; max-width: 40em; color: var(--muted); text-wrap: pretty; }
.shot > .screenshot { margin-top: 32px; }
/* The home page is dark whatever the look, so its screenshot is too. */
.home .screenshot .light { display: none; }
.home .screenshot .dark { display: block; }
.tiles > ul { margin-top: 88px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 40px 56px; color: var(--muted); }
.tiles li { margin: 0; text-wrap: pretty; }
.tiles strong:first-child { font-size: calc(24rem / 18); line-height: 1.35; letter-spacing: 0.035em; font-weight: 400; font-family: var(--display); font-synthesis: none; color: light-dark(var(--orange-11), var(--orange-9)); }
.tiles strong:first-child::after { content: "\A"; white-space: pre; }

.closing { margin-bottom: 72px; }
.closing > h2 { margin-top: 72px; padding-top: 40px; border-top: 2px dashed var(--line); font-size: calc(42rem / 18); line-height: 1.2; letter-spacing: 0.025em; font-weight: 400; font-family: var(--display); font-synthesis: none; }
.closing > p { margin-top: 10px; max-width: 40em; text-wrap: pretty; }
.button { margin-top: 20px; }
.button p { margin: 0; }
.button a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 4px; background: var(--fg); color: var(--bg); font-weight: 700; text-decoration: none; }
.button a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 960px) {
  .home { grid-template-columns: [full-start] minmax(24px, 1fr) [main-start] minmax(0, 504px) [gap-start] 64px [mid] minmax(0, 504px) [main-end] minmax(24px, 1fr) [full-end]; }
  .hero { grid-template-rows: 1fr auto auto 1fr; }
  .hero-text { grid-column: main-start / gap-start; grid-row: 1 / 5; align-self: center; padding: 64px 0; }
  .hero h1 { font-size: clamp(calc(52rem / 18), 6.6vw, calc(64rem / 18)); }
  /* Sized so that its longest line, 49 characters at 0.6em each, fits the
     column without scrolling. */
  .hero pre.code { grid-column: mid / main-end; grid-row: 2; margin-top: 0; white-space: pre; font-size: clamp(calc(12rem / 18), calc((50vw - 106px) / 30.4), calc(14rem / 18)); }
  .scribble { grid-column: mid / main-end; grid-row: 3; }
  .hero-body > p:not(.scribble) { grid-row: 5; margin: 0 0 48px; }
  .split > h2 { grid-column: main-start / gap-start; margin-top: 96px; align-self: end; }
  .split > pre.code { grid-column: mid / main-end; grid-row: span 2; margin-top: 96px; align-self: center; }
  .split > p { grid-column: main-start / gap-start; align-self: start; }
  .closing > p { grid-column: main-start / mid; }
  .button { grid-column: mid / main-end; justify-self: end; align-self: center; margin-top: 0; }
}
/* The error sample's longest line is 54 characters at 0.6em each, plus
   the label's 12px of padding. Beside its heading it fits at 14px only
   with narrower sides, and at 12px or more only from 1024px, with room
   for a scrollbar. Narrower, it goes under the heading at full width. */
@media (min-width: 1024px) {
  .split > pre.code { padding-inline: 16px; font-size: clamp(calc(12rem / 18), min(50vw - 118px, 454px) / 32.4, calc(14rem / 18)); }
}
@media (min-width: 960px) and (max-width: 1023.98px) {
  .split > h2, .split > pre.code, .split > p { grid-column: main-start / main-end; grid-row: auto; }
  .split > pre.code { margin-top: 20px; }
}

/* The page bar: pinned under the header where a side column has become
   a panel, with a button for each. */
.page-bar { display: none; position: sticky; top: 0; z-index: 5; height: var(--bar); background: var(--bg); border-bottom: 1px solid var(--line); }
.page-bar-inner { height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 16px; }
.page-bar-button { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: calc(15rem / 18); white-space: nowrap; cursor: pointer; }
.page-bar-button:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.page-bar-button svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.page-bar-on-page { margin-left: auto; }
.page-bar-label { flex: none; color: var(--faint); }
.page-bar-now { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.page-bar-now:not(:empty) { margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--line); }
/* On a phone the section's name takes the room; the label stays for
   screen readers. */
@media (max-width: 479.98px) {
  .page-bar-on-page:has(.page-bar-now:not(:empty)) .page-bar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .page-bar-now:not(:empty) { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* A side column as a panel: the full height of the window, from its side. */
@media (max-width: 1239.98px) {
  :root { --bar: 49px; }
  .page-bar { display: block; }
  .page-bar-contents, .page-bar:not(:has(.page-bar-on-page)) { display: none; }
  .on-page { position: fixed; inset: 0 0 0 auto; width: min(360px, calc(100vw - 48px)); max-width: none; height: auto; padding: 0 24px 32px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--fg); border-left: 1px solid var(--line); box-shadow: 0 0 32px rgb(0 0 0 / 0.25); font-size: calc(16rem / 18); }
  .on-page:not(:popover-open) { display: none; }
  .on-page ul { gap: 14px; }
  .panel-head { position: sticky; top: 0; z-index: 1; padding: 8px 0; background: var(--bg); }
  .panel-head .eyebrow { margin: 0; }
  .panel-close { display: grid; }
  :is(.contents, .on-page)::backdrop { background: rgb(0 0 0 / 0.35); }
}
@media (max-width: 1239.98px) and (prefers-reduced-motion: no-preference) {
  .on-page { translate: 100% 0; transition: translate 0.2s ease-out, display 0.2s allow-discrete, overlay 0.2s allow-discrete; }
  .on-page:popover-open { translate: 0 0; }
  @starting-style { .on-page:popover-open { translate: 100% 0; } }
}
@media (max-width: 960px) {
  .page-bar-contents { display: flex; }
  .page-bar:not(:has(.page-bar-on-page)) { display: block; }
  .contents { position: fixed; inset: 0 auto 0 0; width: min(360px, calc(100vw - 48px)); max-width: none; height: auto; padding: 0 24px 32px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-right: 1px solid var(--line); box-shadow: 0 0 32px rgb(0 0 0 / 0.25); font-size: calc(16rem / 18); }
  .contents:not(:popover-open) { display: none; }
  .contents .panel-head { display: flex; }
  .contents a { padding-block: 7px; }
}
@media (max-width: 860px) {
  .article h1 { font-size: calc(40rem / 18); }
  .layout, .top-inner, .foot-inner, .page-bar-inner { padding-inline: 16px; }
}
/* Capitals wrap sooner in a phone's column. */
@media (max-width: 599.98px) {
  .article h1 { font-size: calc(37rem / 18); }
  .split > h2, .shot > h2 { font-size: calc(32rem / 18); }
}
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .contents { translate: -100% 0; transition: translate 0.2s ease-out, display 0.2s allow-discrete, overlay 0.2s allow-discrete; }
  .contents:popover-open { translate: 0 0; }
  @starting-style { .contents:popover-open { translate: -100% 0; } }
}