/* 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. */

/* Recursive, by the Recursive Project Authors, under the SIL Open Font
   License: fonts/OFL.txt. Taken from @fontsource-variable/recursive 5.3.0,
   with the slant and cursive axes fixed (slnt=0, CRSV=0.5) to halve the
   files, using fontTools:
   fonttools varLib.instancer recursive-latin-full-normal.woff2 slnt=0 CRSV=0.5
   It keeps weight, CASL (casual, for headings) and MONO (for code). */
@font-face {
  font-family: "Recursive";
  font-style: normal;
  font-weight: 300 1000;
  font-display: swap;
  src: url("fonts/recursive-latin.9d676ffe.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: "Recursive";
  font-style: normal;
  font-weight: 300 1000;
  font-display: swap;
  src: url("fonts/recursive-latin-ext.dfe878ee.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;
}
/* The home page's hand-written note and a callout's label: the same
   font's slanted, cursive cut, Basic Latin only, made from the full file:
   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-7: #f5ae73; --orange-9: #f76b15; --orange-11: #cc4e00;
  --orange-dark-7: #7e451d; --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);
  --accent-soft: light-dark(var(--orange-7), var(--orange-dark-7));
  --on-accent: var(--sand-dark-1);
  --font: "Recursive", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Recursive", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The page */
* { box-sizing: border-box; }
html { -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: 19px;
  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; gap: 12px; min-height: 44px; color: var(--band-fg); text-decoration: none; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; font-variation-settings: "CASL" 1; }
.brand img { display: block; width: 32px; height: 32px; }
.top-nav { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 17px; }
.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; }
.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: 16px; }
.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: 16px; font-weight: 700; }
.search-summary { font-size: 14px; color: var(--faint); }
.search-empty { padding: 8px 10px; font-size: 15px; color: var(--faint); }

/* 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. GitHub 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: 16px; }
  .top-link { padding: 0 10px; }
}
@media (max-width: 479.98px) {
  .top-link[href^="https://github.com"] { display: none; }
}
@media (max-width: 359.98px) {
  .top-nav { font-size: 15px; }
  .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.
   Narrower, the side columns become panels the page bar opens: on this
   page first, then on a phone 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: 13px; 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: 16px; 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: 15px; 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); }

/* The article */
.article { flex: 999 1 560px; min-width: 0; max-width: 720px; }
.eyebrow-page { margin-bottom: 0; font-size: 15px; }
.article h1 { margin: 6px 0 14px; font-size: 48px; line-height: 1.1; font-weight: 820; letter-spacing: -0.015em; font-variation-settings: "CASL" 1; text-wrap: balance; }
.prose > p:first-child { font-size: 21px; color: var(--muted); text-wrap: pretty; }
.prose h2 { margin: 48px 0 14px; font-size: 27px; line-height: 1.2; font-weight: 750; font-variation-settings: "CASL" 1; text-wrap: balance; scroll-margin-top: calc(var(--bar, 0px) + 16px); }
.prose .step { color: var(--faint); }
.prose h3 { margin: 32px 0 10px; font-size: 21px; line-height: 1.3; font-weight: 750; scroll-margin-top: calc(var(--bar, 0px) + 16px); }
.prose h4 { margin: 24px 0 8px; font-size: 19px; line-height: 1.3; font-weight: 750; }
.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-variation-settings: "MONO" 1; 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-variation-settings: "MONO" 1; font-size: 16px; line-height: 1.7; }
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-variation-settings: "MONO" 1; font-size: 15px; color: var(--faint); }
figure.code pre { margin: 0; }

/* 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 */
table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
table code { overflow-wrap: anywhere; }
th, td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); text-wrap: balance; }
/* `anywhere` lets a column shrink to one letter, so a name in the first
   column would break mid-word beside a long description. As a box of
   its own, a name stays on one line up to its limit and wraps beyond
   it. */
td:first-child code { display: inline-block; width: max-content; max-width: 20em; overflow-wrap: break-word; }
/* On a phone, table words hyphenate; code never does, as the hyphen
   would read as part of a name. Two columns stay side by side. Three or
   more don't fit, so each row is stacked: its first cell, then the
   others, each under its column's heading, which tables.js copies to
   the cell. */
@media (max-width: 599.98px) {
  th, td { hyphens: auto; }
  th code, td code { hyphens: manual; }
  td:first-child code { max-width: 11em; }
  table:has(thead th:nth-child(3)) { border-top: 1px solid var(--line); }
  table:has(thead th:nth-child(3)), table:has(thead th:nth-child(3)) :is(tbody, tr, td) { display: block; }
  table:has(thead th:nth-child(3)) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table:has(thead th:nth-child(3)) tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table:has(thead th:nth-child(3)) td { padding: 0; border: 0; }
  table:has(thead th:nth-child(3)) td + td { margin-top: 8px; }
  table:has(thead th:nth-child(3)) td:empty { display: none; }
  table:has(thead th:nth-child(3)) td code { overflow-wrap: break-word; }
  table:has(thead th:nth-child(3)) td:first-child code { max-width: 100%; }
  td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
}
@media (max-width: 359.98px) {
  td:first-child code { max-width: 9em; }
}
/* The line under a problem page's sample message. */
.prose #what-youll-see + pre + p { margin-top: 10px; font-size: 16px; 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: 15px; 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: 16px; 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: 15px; color: var(--faint); }
.pager-title { font-weight: 700; }
.issue { margin-top: 28px; font-size: 16px; color: var(--faint); }
.issue a { color: var(--faint); }

/* Problem pages: the kind's badge */
.sev-line { margin: 0 0 6px; font-size: 17px; color: var(--muted); }
.sev { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 3px; font-family: var(--mono); font-variation-settings: "MONO" 1; font-size: 14px; 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-size: 16px; font-weight: 400; font-variation-settings: "CASL" 0; 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: 17px; 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: 16px; }
.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: 14px; line-height: 1.8; }
@media (min-width: 960px) {
  .home pre, .home pre.code { padding: 22px 24px; font-size: 15.5px; }
}

/* 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(40px, 6vw, 58px); line-height: 1.03; font-weight: 820; letter-spacing: -0.02em; font-variation-settings: "CASL" 1; text-wrap: balance; }
.hero-sub { margin: 0; max-width: 30em; font-size: 21px; 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: 16px; 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: 750; 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(12px, calc((100vw - 68px) / 23.4), 14px); }
.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: 20px; 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: 16px; 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: 34px; line-height: 1.15; font-weight: 800; font-variation-settings: "CASL" 1; text-wrap: balance; }
.split > pre.code { margin-top: 20px; font-size: 15px; }
.split > p { margin-top: 16px; color: var(--muted); text-wrap: pretty; }

.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: 25px; line-height: 1.25; font-weight: 750; font-variation-settings: "CASL" 1; color: var(--fg); padding: 0 3px; background: linear-gradient(transparent 56%, var(--accent-soft) 56%, var(--accent-soft) 92%, transparent 92%); }
.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: 27px; line-height: 1.3; font-weight: 700; font-variation-settings: "CASL" 1; }
.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; }
  /* 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(12px, calc((50vw - 106px) / 29.4), 15px); }
  .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 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: 16px; 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: 1099.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: 17px; }
  .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: 1099.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: 860px) {
  .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: 17px; }
  .contents:not(:popover-open) { display: none; }
  .contents .panel-head { display: flex; }
  .contents a { padding-block: 7px; }
  .article h1 { font-size: 38px; }
  .layout, .top-inner, .foot-inner, .page-bar-inner { padding-inline: 16px; }
}
@media (max-width: 860px) 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; } }
}