/* =============================================================================
   otaku.sh — site.css, the one-pager's whole stylesheet.

   Three parts. First the product's own faces and tokens, copied from the
   otaku repo's otaku/web/static/app.css (0.4.0) so the page is set in the
   same paper, ink and type as the client it shows — copied rather than
   linked, so the page depends on no demo build and on nothing the token
   contract (docs/web_tokens.md there) does not promise to keep. Every
   name is the page's own: the client's tokens and the three classes
   borrowed from it are renamed under the page's `st-` prefix, so nothing
   in this file shares a name with the client's stylesheet — the demos are
   framed and could not collide anyway, but a name that cannot collide
   needs no argument. Then the page's own rules; nothing in them invents a
   colour, a face or a size.
   ========================================================================== */

/* --- faces: self-hosted, the product's files, nothing from a font service -- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/Archivo-v25-latin.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: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/Archivo-v25-latin-ext.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: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/Newsreader-v26-latin.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: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/Newsreader-v26-latin-ext.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: 'Newsreader'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('fonts/Newsreader-v26-italic-latin.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: 'Newsreader'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('fonts/Newsreader-v26-italic-latin-ext.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/IBMPlexMono-v2.3-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexMono-v2.3-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/IBMPlexMono-v2.3-600.woff2') format('woff2'); }

/* --- tokens: the product's, under the page's prefix -------------------------- */
:root {
  color-scheme: light;

  /* -- ground ------------------------------------------------------------- */
  --st-desk:        oklch(0.928 0.005 175);  /* the surface the page lies on */
  --st-spine-bg:    oklch(0.912 0.005 175);  /* the app's left rail         */
  --st-paper:       oklch(0.984 0.005 95);   /* the page, panels, dialogs   */
  --st-well:        oklch(0.955 0.008 95);   /* inside an editable field    */
  --st-edit-bg:     oklch(0.996 0.003 95);   /* an open field, being typed  */
  --st-band:        oklch(0.968 0.007 95);   /* footers, rails, index       */

  /* -- ink ---------------------------------------------------------------- */
  --st-ink:         oklch(0.215 0.008 120);  /* titles, primary button      */
  --st-body:        oklch(0.27 0.012 90);    /* running prose               */
  --st-muted:       oklch(0.45 0.01 150);    /* labels, secondary text      */
  --st-faint:       oklch(0.68 0.008 150);   /* read-only, hints, absent    */

  /* -- rules -------------------------------------------------------------- */
  --st-line:        oklch(0.865 0.006 165);  /* panel edges, hard rules     */
  --st-line-soft:   oklch(0.90 0.012 95);    /* rules inside paper          */

  /* -- accent and status -------------------------------------------------- */
  --st-accent:      oklch(0.55 0.13 55);     /* rules, marks, selection     */
  --st-accent-ink:  oklch(0.51 0.125 50);    /* accent used as text         */
  --st-accent-tint: oklch(0.55 0.13 55 / 0.08);
  --st-dialogue:    oklch(0.47 0.13 244);    /* spoken lines                */
  --st-dialogue-weight: inherit;             /* their weight, if not the prose's */
  --st-em:          inherit;                 /* the model's *emphasis*: italic, no colour of its own */
  --st-strong:      inherit;                 /* its **weight** mark, likewise */
  --st-strong-weight: 600;                   /* a real cut, not a synthesised 700 */
  --st-ok:          oklch(0.58 0.11 150);    /* answering, resident         */
  --st-danger:      oklch(0.5 0.14 30);      /* delete, stop, and failures  */

  /* -- three voices, one job each ----------------------------------------- */
  --st-font-prose:   'Newsreader', 'Literata', Georgia, serif;
  --st-font-display: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
  --st-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* -- type scale --------------------------------------------------------- */
  --st-size-display: 31px;  /* a reading column's own title                */
  --st-size-title:   26px;  /* panel subject, display face, 800            */
  --st-size-head:    19px;  /* group head, display face, 800               */
  --st-size-page:    19px;  /* the story, prose face                       */
  --st-size-lead:    18px;  /* panel ledes, margin prose, the composer     */
  --st-size-read:    17px;  /* long prose in a panel                       */
  --st-size-row:     17px;  /* a list row, prose face                      */
  --st-size-note:    16px;  /* notes and captions, prose face              */
  --st-size-ui:      14px;  /* every button, display face                  */
  --st-size-mono:    14px;  /* fields, filters, model names                */
  --st-size-mono-sm: 13px;  /* facts, urls                                 */
  --st-size-small:   12px;  /* counts                                      */
  --st-size-label:   11px;  /* section eyebrow                             */
  --st-size-foot:    10px;  /* panel footer                                */
  --st-size-tag:      9px;  /* kind tags, turn rubric                      */

  --st-leading-page:  1.68;
  --st-leading-read:  1.72;
  --st-leading-row:   1.35;
  --st-row-h:         29px;    /* one list row, whatever face fills it     */

  --st-track-eyebrow: 0.18em;  /* panel title                              */
  --st-track-label:   0.22em;  /* section head                             */
  --st-track-foot:    0.12em;  /* footers                                  */
  --st-track-tag:     0.20em;

  /* -- metrics ------------------------------------------------------------ */
  --st-radius:      0px;      /* print discipline: nothing is rounded      */
  --st-hair:        1px;
  --st-mark:        2px;      /* the selection rule on a row               */
  --st-rule-w:      26px;     /* the accent rule of a panel title          */

  --st-btn-pad:     8px 16px; /* ONE box for every button                  */
  --st-field-pad:   7px 11px;
  --st-panel-pad:   26px;
  --st-page-pad:    72px;
  --st-dialog-pad:  26px 28px;

  /* -- shell -------------------------------------------------------------- */
  --st-spine-w:     64px;
  --st-rail-w:      250px;
  --st-page-max:    820px;

  /* -- scrollbars --------------------------------------------------------- */
  --st-scrollbar-w:  10px;    /* the app styles its own scrollbars        */
  --st-scrollbar-thumb: oklch(0.60 0.011 165);  /* ink-family: it reads as drawn */
  --st-scrollbar-track: oklch(0.945 0.006 165); /* the channel it runs in   */

  /* -- panel ladder ------------------------------------------------------- */
  --st-col-lamp:     10px;    /* the resident/answering lamp gutter      */
  --st-col-size:     66px;    /* a model's size column                   */
  --st-col-count:    46px;    /* a count column                          */
  --st-col-ago:      30px;    /* a "2h ago" column                       */
  --st-reader-w:     400px;   /* the right pane, identical in all lenses  */
  --st-measure:      860px;   /* a reading line, wherever prose is set    */
  --st-premise-w:    700px;   /* the premise measure                      */
  --st-panel-wide:  1600px;   /* models: list plus detail                  */
  --st-panel-story: 1620px;   /* stories and a story share one box         */
  --st-panel-read:  1100px;   /* context: one reading column               */
  --st-dialog-w:    440px;    /* every dialog                             */
  --st-docket-w:    488px;    /* a slip: usage, settings                   */
  --st-docket-h:    390px;    /* a slip torn to a set length: balance      */

  /* -- depth -------------------------------------------------------------- */
  --st-shadow-page:  0 12px 40px oklch(0.25 0.02 170 / 0.10);
  --st-shadow-panel: 0 24px 80px oklch(0.22 0.02 70 / 0.35);
  --st-shadow-slip:  0 8px 24px oklch(0.22 0.02 70 / 0.16);
  --st-scrim:        oklch(0.928 0.005 175 / 0.82);
  --st-scrim-blur:   4px;
}

/* A dark theme is this list and nothing more. The page follows the OS;
   `data-theme` on <html> pins it either way, and custom.css outranks both. */
[data-theme="dark"] {
  color-scheme: dark;
  --st-desk:        oklch(0.22 0.006 175);
  --st-spine-bg:    oklch(0.19 0.006 175);
  --st-paper:       oklch(0.26 0.008 90);
  --st-well:        oklch(0.23 0.008 90);
  --st-band:        oklch(0.24 0.008 90);
  --st-ink:         oklch(0.94 0.006 95);
  --st-body:        oklch(0.88 0.008 95);
  --st-muted:       oklch(0.70 0.01 150);
  --st-faint:       oklch(0.55 0.008 150);
  --st-line:        oklch(0.38 0.008 165);
  --st-line-soft:   oklch(0.33 0.008 95);
  --st-accent:      oklch(0.68 0.13 55);
  --st-accent-ink:  oklch(0.74 0.12 55);
  --st-accent-tint: oklch(0.68 0.13 55 / 0.14);
  --st-dialogue:    oklch(0.76 0.12 244);
  --st-scrollbar-thumb: oklch(0.50 0.01 165);
  --st-scrollbar-track: oklch(0.30 0.008 90);
  --st-shadow-page:  none;
  --st-shadow-panel: 0 24px 80px oklch(0 0 0 / 0.5);
  --st-shadow-slip:  0 8px 24px oklch(0 0 0 / 0.4);
  --st-scrim:        oklch(0.22 0.006 175 / 0.84);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --st-desk:        oklch(0.22 0.006 175);
    --st-spine-bg:    oklch(0.19 0.006 175);
    --st-paper:       oklch(0.26 0.008 90);
    --st-well:        oklch(0.23 0.008 90);
    --st-band:        oklch(0.24 0.008 90);
    --st-ink:         oklch(0.94 0.006 95);
    --st-body:        oklch(0.88 0.008 95);
    --st-muted:       oklch(0.70 0.01 150);
    --st-faint:       oklch(0.55 0.008 150);
    --st-line:        oklch(0.38 0.008 165);
    --st-line-soft:   oklch(0.33 0.008 95);
    --st-accent:      oklch(0.68 0.13 55);
    --st-accent-ink:  oklch(0.74 0.12 55);
    --st-accent-tint: oklch(0.68 0.13 55 / 0.14);
    --st-dialogue:    oklch(0.76 0.12 244);
    --st-scrollbar-thumb: oklch(0.50 0.01 165);
    --st-scrollbar-track: oklch(0.30 0.008 90);
    --st-shadow-page:  none;
    --st-shadow-panel: 0 24px 80px oklch(0 0 0 / 0.5);
    --st-shadow-slip:  0 8px 24px oklch(0 0 0 / 0.4);
    --st-scrim:        oklch(0.22 0.006 175 / 0.84);
  }
}

/* --- the product's label and faint, copied under the page's own prefix ------ */
.st-label {
  font-family: var(--st-font-mono); font-size: var(--st-size-label);
  letter-spacing: var(--st-track-label); text-transform: uppercase;
  color: var(--st-muted);
}
.st-label--ink { color: var(--st-ink); font-weight: 500; }
.st-faint { color: var(--st-faint); }

/* --- base: the product's resets, which the tokens alone do not bring ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--st-desk);
  color: var(--st-body);
  font-family: var(--st-font-display);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
a { color: var(--st-accent-ink); text-decoration: none; }
a:hover { color: var(--st-accent); }
::selection { background: var(--st-accent-tint); }
:focus, :focus-visible { outline: none; } /* as the client: no focus ring anywhere */
/* without this, the stage's `display: block` on iframes outranks the `hidden`
   attribute, and the terminal frame shows as an empty box under the web one */
[hidden] { display: none !important; }

/* --- the page ---------------------------------------------------------------- */
html { scroll-behavior: smooth; }
html, body { height: auto; }
body { background: var(--st-desk); }

.st-desk { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 0 18px; }

/* an install line: a well the width of its command, with its verb inside */
.st-cmd {
  display: inline-flex; align-items: center; gap: 18px;
  min-width: 0; max-width: 100%; /* so the well can shrink to a phone and let the row wrap it */
  background: var(--st-well); border: var(--st-hair) solid var(--st-line-soft);
  padding: 10px 14px;
}
.st-cmd code { font-family: var(--st-font-mono); font-size: var(--st-size-mono-lg, 15px); color: var(--st-ink); white-space: nowrap; overflow-x: auto; }
.st-cmd code::-webkit-scrollbar { display: none; }
.st-copy {
  flex: none; font-family: var(--st-font-mono); font-size: var(--st-size-label);
  letter-spacing: var(--st-track-foot); text-transform: uppercase; color: var(--st-accent-ink);
}
.st-copy:hover { color: var(--st-accent); }
.st-copy[data-done] { color: var(--st-ok); }
/* copy verb outside the well */
.st-cmd + .st-copy { align-self: center; }
.st-install__alt { display: inline-flex; align-items: baseline; gap: 12px; font-family: var(--st-font-mono); font-size: var(--st-size-mono-sm); color: var(--st-muted); }
.st-install__alt .st-label { letter-spacing: 0.1em; }

/* --- the demo: two clients on one stage ------------------------------------ */
.st-tab {
  position: relative; padding: 7px 1px 8px;
  font-family: var(--st-font-mono); font-size: var(--st-size-label);
  letter-spacing: var(--st-track-foot); text-transform: uppercase;
  color: var(--st-muted);
}
.st-tab:hover { color: var(--st-ink); }
.st-tab[aria-selected="true"] { color: var(--st-ink); }
.st-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--st-accent); }
.st-stage { position: relative; display: block; border: var(--st-hair) solid var(--st-line); border-top: 0; background: var(--st-desk); box-shadow: var(--st-shadow-slip); }
.st-stage iframe { display: block; width: 100%; height: min(720px, 86svh); border: 0; }
.st-stage iframe[data-pane="term"] { background: #fafafa; } /* the terminal demo's own ground, until it paints */
.st-expand {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  color: var(--st-muted); background: var(--st-paper);
  border: var(--st-hair) solid var(--st-line);
}
.st-expand svg { display: block; }
.st-expand { color: var(--st-muted); }
.st-expand:hover { color: var(--st-ink); border-color: var(--st-ink); }

/* the stage, expanded: fills the tab, esc or the button returns */
.st-stage--full { position: fixed; inset: 0; z-index: 100; border: 0; box-shadow: none; }
.st-stage--full iframe { height: 100%; }
html.st-noscroll { overflow: hidden; }

/* the same button collapses: icon flips with the stage state */
.st-expand .st-ic--c { display: none; }
.st-stage--full .st-expand .st-ic--x { display: none; }
.st-stage--full .st-expand .st-ic--c { display: block; }

.st-foot__push { margin-left: auto; }
.st-arr { display: inline-block; vertical-align: -0.5px; margin-left: 1px; }

/* the sheet: the book stood on its end. A vertical spine runs the whole left
   edge; the page is a stack of wide bands separated by double rules. */
.st-sheet { display: grid; grid-template-columns: 66px minmax(0, 1fr); width: 100%; max-width: 1280px; background: var(--st-paper); border: var(--st-hair) solid var(--st-line); border-top: 0; border-bottom: 0; box-shadow: var(--st-shadow-page); }
.st-spine { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 0 22px; border-right: var(--st-hair) solid var(--st-line); background: var(--st-band); }
.st-spine__mark { width: 11px; height: 11px; background: var(--st-accent); flex: none; }
.st-spine__text { margin-top: auto; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-family: var(--st-font-display); font-size: 17px; font-weight: 800; letter-spacing: 0.01em; color: var(--st-ink); }
.st-band { padding: 20px 34px 24px; }
.st-band + .st-band { border-top: 3px double var(--st-ink); }
.st-band--thin { padding-top: 14px; padding-bottom: 16px; }
.st-headrow { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.st-title { margin: 0; font-family: var(--st-font-display); font-size: clamp(32px, 6.2vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; color: var(--st-ink); text-wrap: balance; }
.st-headrow nav { margin-left: auto; display: flex; gap: 20px; }
.st-headrow nav a { font-family: var(--st-font-mono); font-size: var(--st-size-mono-sm); letter-spacing: var(--st-track-foot); text-transform: uppercase; color: var(--st-muted); }
.st-headrow nav a:hover { color: var(--st-ink); }
.st-headrow nav a.st-ext { color: var(--st-accent-ink); font-weight: 600; }
.st-headrow nav a.st-ext:hover { color: var(--st-accent); }
.st-lede { margin: 12px 0 0; max-width: 780px; font-family: var(--st-font-prose); font-size: 20px; line-height: 1.62; color: var(--st-body); text-wrap: pretty; }
.st-lede code, .st-feat p code { font-family: var(--st-font-mono); font-size: 0.84em; color: var(--st-body); }
.st-sheet .st-tabs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; margin-bottom: 14px; border-bottom: 0; }
.st-sheet .st-tab[aria-selected="true"]::after { bottom: 0; }
.st-sheet .st-tabs__center { display: flex; gap: 26px; justify-content: center; }
.st-sheet .st-tab { font-size: var(--st-size-mono); letter-spacing: 0.12em; padding: 9px 2px 10px; }
.st-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px; margin-top: 4px; }
.st-feat__name { display: block; font-family: var(--st-font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--st-ink); margin-bottom: 6px; }
.st-feat p { margin: 0; font-family: var(--st-font-prose); font-size: 19px; line-height: 1.62; color: var(--st-muted); text-wrap: pretty; }
.st-band__label { margin-bottom: 12px; font-size: var(--st-size-mono); letter-spacing: 0.12em; }
/* the labels and feature names are headings, so the page has an outline for a
   search engine and for anyone moving through it by heading. The tags carry
   that meaning; the classes still carry every part of the look, except the
   margin a heading brings with it, which was never theirs. */
h2.st-label, h3.st-feat__name { margin-top: 0; }
.st-installrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.st-installrow .st-cmd { padding: 12px 16px; }
.st-installrow .st-cmd code { font-size: 16px; }
.st-installrow .st-copy { font-size: var(--st-size-mono-sm); }
.st-installrow .st-install__alt { font-size: 16px; }
/* the feedback band: one well holding the note and, under a rule, the hint
   and the verb; the hint line is also where the send reports back */
.st-fb { display: flex; flex-direction: column; background: var(--st-well); border: var(--st-hair) solid var(--st-line-soft); }
.st-fb:focus-within { border-color: var(--st-accent); }
.st-fb__text { display: block; width: 100%; padding: 12px 14px; background: none; border: 0; outline: none; resize: vertical; font-family: var(--st-font-prose); font-size: 18px; line-height: 1.6; color: var(--st-ink); }
.st-fb__text::placeholder { color: var(--st-faint); } /* the typed note's own face, only fainter */
/* sent: the note stays, muted like the verb beside it; Safari otherwise fades a
   disabled field with its own opacity and fill colour */
.st-fb__text:disabled { color: var(--st-muted); -webkit-text-fill-color: var(--st-muted); opacity: 1; cursor: default; }
.st-fb__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.st-fb__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding: 9px 14px 10px; border-top: var(--st-hair) solid var(--st-line-soft); }
.st-fb__hint { font-family: var(--st-font-mono); font-size: var(--st-size-mono-sm); letter-spacing: var(--st-track-foot); text-transform: uppercase; color: var(--st-faint); }
.st-fb__hint[data-state="sent"] { color: var(--st-ok); }
.st-fb__hint[data-state="failed"] { color: var(--st-accent-ink); }
.st-fb__send { padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--st-font-mono); font-size: var(--st-size-mono-sm); letter-spacing: var(--st-track-foot); text-transform: uppercase; color: var(--st-accent-ink); }
.st-fb__send:hover { color: var(--st-accent); }
.st-fb__send:disabled { color: var(--st-faint); cursor: default; }
.st-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px 34px 18px; border-top: var(--st-hair) solid var(--st-line); font-family: var(--st-font-mono); font-size: var(--st-size-mono-sm); letter-spacing: var(--st-track-foot); text-transform: uppercase; color: var(--st-faint); }
.st-foot a { color: var(--st-accent-ink); }
.st-foot a:hover { color: var(--st-accent); }
/* ------------------------------------------------------------ a document
   The front page is labels, features and a command — it has no prose, so the
   stylesheet had no headings, paragraphs or lists in it. A page carrying a
   document needs that other half of the vocabulary, and a block that holds a
   diagram drawn in characters without reflowing it. Scoped to .st-doc, so
   none of it reaches the front page — and set here, above the media
   queries, so the phone sizes in them win over these. */
.st-doc { max-width: var(--st-measure); }
.st-doc h2 { margin: 34px 0 12px; font-family: var(--st-font-display); font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--st-ink); }
.st-doc h2:first-child { margin-top: 0; }
.st-doc h3 { margin: 24px 0 10px; font-family: var(--st-font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--st-ink); }
/* the same prose the front page sets — --st-size-read is the app's reading
   panel, not this site, and 17px against the features' 19px read as a
   different page rather than another page of the same one */
.st-doc p, .st-doc li { font-family: var(--st-font-prose); font-size: 19px; line-height: 1.62; color: var(--st-body); text-wrap: pretty; }
.st-doc p { margin: 0 0 14px; }
.st-doc ul { margin: 0 0 14px; padding-left: 22px; }
.st-doc li { margin-bottom: 3px; }
.st-doc li > ul { margin: 6px 0 0; }
.st-doc code { font-family: var(--st-font-mono); font-size: 0.8em; color: var(--st-ink); }
.st-doc strong { font-weight: var(--st-strong-weight); color: var(--st-ink); }
/* the window is drawn in box characters: it cannot reflow, so it scrolls
   inside its own well rather than setting the width of the page */
.st-doc pre { margin: 0 0 18px; padding: 14px 16px; overflow-x: auto; background: var(--st-well); border: var(--st-hair) solid var(--st-line-soft); font-family: var(--st-font-mono); font-size: 14px; line-height: 1.5; color: var(--st-ink); }

@media (max-width: 900px) {
  /* minmax(0, …), as above: a bare 1fr cannot go below its content's narrowest
     width, and the install line does not wrap, so the sheet would grow past a
     phone's screen instead of letting the well scroll */
  .st-sheet { grid-template-columns: minmax(0, 1fr); }
  .st-spine { display: none; }
  .st-band { padding: 20px 20px 26px; }
  .st-cols { grid-template-columns: 1fr; }
  .st-cols[style*="1fr 1fr"] { grid-template-columns: 1fr !important; } /* the two-column pair set in the markup */
  .st-foot { padding: 12px 20px 18px; }
}
/* a phone: the sheet fills the screen edge to edge, the nav drops under the
   title, the type steps down, and the install well takes the whole row */
@media (max-width: 720px) {
  .st-desk { padding: 0; }
  .st-sheet { border-left: 0; border-right: 0; }
  .st-band { padding: 18px 16px 22px; }
  .st-headrow { gap: 10px 16px; }
  .st-headrow nav { margin-left: 0; flex-wrap: wrap; gap: 16px; }
  .st-lede { font-size: 18px; }
  .st-feat__name { font-size: 18px; }
  .st-feat p { font-size: 16.5px; }
  .st-doc p, .st-doc li { font-size: 16.5px; }
  .st-installrow .st-cmd { flex: 1 1 100%; }
  .st-installrow .st-cmd code { font-size: 14px; }
  /* the demo's tab row: the label left and the tabs right, the tabs dropping
     under the label when a screen cannot hold both — not the desktop's three
     columns, whose centre has nowhere to shrink to */
  .st-sheet .st-tabs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
  .st-tabs__spacer { display: none; }
  .st-tab { white-space: nowrap; }
  .st-foot { padding: 12px 16px 16px; }
}