/* sticky.css — the site should feel like the device.
   Paper background, the panel's four grays as the type ramp, one accent (cyan, sparingly),
   hairline rules, no gradients. Fonts self-hosted in docs/fonts (OFL), preloaded in overrides/main.html. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); }

:root {
  /* the 2-bit panel: white · light gray · dark gray · black */
  --ink-0: #fbfbf9;
  --ink-1: #b9b9b4;
  --ink-2: #5c5c58;
  --ink-3: #141414;
  --paper: #f3f2ee;
  --accent: #0e8fa8;            /* cyan, the only colour on the page */
  --hairline: 1px solid var(--ink-1);
  --md-text-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- light = paper ---- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--paper);
  --md-default-fg-color: var(--ink-3);
  --md-default-fg-color--light: var(--ink-2);
  --md-default-fg-color--lighter: var(--ink-1);
  --md-default-fg-color--lightest: #e6e5e0;
  --md-primary-fg-color: var(--paper);
  --md-primary-bg-color: var(--ink-3);
  --md-primary-bg-color--light: var(--ink-2);
  --md-accent-fg-color: var(--accent);
  --md-accent-fg-color--transparent: rgba(14,143,168,.08);
  --md-typeset-a-color: var(--ink-3);
  --md-code-bg-color: #eae9e4;
  --md-code-fg-color: var(--ink-3);
  --md-footer-bg-color: var(--paper);
  --md-footer-bg-color--dark: var(--paper);
  --md-footer-fg-color: var(--ink-2);
  --md-footer-fg-color--light: var(--ink-2);
  --md-footer-fg-color--lighter: var(--ink-1);
  --md-admonition-fg-color: var(--ink-3);
  --md-typeset-table-color: var(--ink-1);
  --md-typeset-kbd-color: #eae9e4;
  --md-typeset-kbd-accent-color: #fff;
  --md-typeset-kbd-border-color: var(--ink-1);
}
/* ---- dark = slate, the glass at night ---- */
[data-md-color-scheme="slate"] {
  --paper: #15171a;
  --ink-0: #1d1f23;
  --ink-1: #4d4f54;
  --ink-2: #a2a39f;
  --ink-3: #ecebe6;
  --accent: #4cc2d8;
  --md-default-bg-color: var(--paper);
  --md-default-fg-color: var(--ink-3);
  --md-default-fg-color--light: var(--ink-2);
  --md-default-fg-color--lighter: var(--ink-1);
  --md-default-fg-color--lightest: #24262b;
  --md-primary-fg-color: var(--paper);
  --md-primary-bg-color: var(--ink-3);
  --md-primary-bg-color--light: var(--ink-2);
  --md-accent-fg-color: var(--accent);
  --md-accent-fg-color--transparent: rgba(76,194,216,.1);
  --md-typeset-a-color: var(--ink-3);
  --md-code-bg-color: #1e2024;
  --md-code-fg-color: var(--ink-3);
  --md-footer-bg-color: var(--paper);
  --md-footer-bg-color--dark: var(--paper);
  --md-footer-fg-color: var(--ink-2);
  --md-footer-fg-color--light: var(--ink-2);
  --md-footer-fg-color--lighter: var(--ink-1);
  --md-typeset-table-color: var(--ink-1);
}

/* ---- chrome: header and tabs sit on the paper, separated by a hairline ---- */
.md-header { background: var(--md-default-bg-color); color: var(--md-default-fg-color); box-shadow: none; border-bottom: var(--hairline); }
.md-header__button.md-logo { display: none; }
.md-header__title { font-weight: 600; letter-spacing: -.01em; }
.md-header__topic:first-child { font-weight: 600; }
.md-search__form { background: var(--md-code-bg-color); border-radius: .2rem; }
.md-search__input::placeholder, .md-search__icon { color: var(--md-default-fg-color--light); }
.md-tabs { background: var(--md-default-bg-color); color: var(--md-default-fg-color); border-bottom: var(--hairline); }
.md-tabs__link { font-size: .68rem; opacity: 1; color: var(--md-default-fg-color--light); }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--md-default-fg-color); }
.md-tabs__item--active .md-tabs__link { box-shadow: inset 0 -2px 0 var(--accent); }
.md-footer, .md-footer-meta { border-top: var(--hairline); }
.md-footer__inner { padding-top: .6rem; }
.md-footer__title { font-size: .7rem; }
.md-copyright { font-size: .6rem; }
.md-nav__title, .md-nav__item--section > .md-nav__link { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--md-default-fg-color--light); }
.md-nav__link--active, .md-nav__link:hover { color: var(--accent); }
.md-sidebar--secondary .md-nav__link--active { color: var(--accent); }
.md-progress { background: var(--accent); }

/* ==== .sk-* : the shell every page shares. Partials: overrides/partials/sk-header.html ====
   One slim bar: wordmark · seven quiet links · theme · search · GitHub. Sticky, paper behind it, one hairline under it.
   It replaces Material's header AND tabs AND the left sidebar on desktop; under 76.25em the burger opens Material's
   drawer, restyled as paper + ink. Material's ids stay so its JS keeps working. */
.sk-header { position: sticky; top: 0; z-index: 4; height: auto; box-shadow: none !important; border-bottom: var(--hairline);
  background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px);
  color: var(--ink-3); transition: none; }
@supports not (background: color-mix(in srgb, red 50%, transparent)) { .sk-header { background: var(--paper); } }
/* at night a white e-ink capture sliding under a 14 %-clear bar blooms through as a grey slab — near-opaque in slate, the blur still softens edges */
[data-md-color-scheme="slate"] .sk-header { background: color-mix(in srgb, var(--paper) 95%, transparent); }
.sk-bar { display: flex; align-items: center; gap: 1.2rem; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; height: 2.8rem; }
.sk-wordmark { font-weight: 650; font-size: .95rem; letter-spacing: -.02em; color: var(--ink-3); text-decoration: none; line-height: 1; padding: .3rem 0; }
.sk-wordmark:hover, .sk-wordmark:focus-visible { color: var(--ink-3); }
.sk-nav { display: none; list-style: none; margin: 0 0 0 .4rem; padding: 0; gap: 1.35rem; flex: 1 1 auto; min-width: 0; }
.sk-nav li { margin: 0; padding: 0; }
.sk-nav__link { display: inline-block; position: relative; font-size: .76rem; font-weight: 500; letter-spacing: -.005em; color: var(--ink-2);
  text-decoration: none; padding: .95rem 0; line-height: 1; white-space: nowrap; transition: color .2s; }
.sk-nav__link:hover, .sk-nav__link:focus-visible { color: var(--ink-3); outline: none; }
.sk-nav__link.is-active { color: var(--ink-3); }
.sk-nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.sk-tools { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.sk-header .md-icon, .sk-header .md-header__button { color: var(--ink-2); padding: .4rem; margin: 0; }
.sk-header .md-icon:hover, .sk-header .md-header__button:hover { color: var(--ink-3); opacity: 1; }
.sk-header .md-icon svg, .sk-header .md-header__button svg { width: 1.1rem; height: 1.1rem; fill: currentcolor; display: block; }
.sk-github { display: inline-flex; }
.sk-burger { display: inline-flex; margin-left: -.4rem !important; }
.sk-header .md-header__option { display: inline-flex; }
/* search: a quiet pill; Material grows it on focus */
.sk-header .md-search { margin: 0; }
.sk-header .md-search__form { height: 1.7rem; border-radius: 999px; background: var(--ink-0); border: var(--hairline); box-shadow: none; }
.sk-header .md-search__input { font-size: .72rem; height: 1.7rem; padding-left: 2.1rem; color: var(--ink-3); }
.sk-header .md-search__input::placeholder { color: var(--ink-2); }
.sk-header .md-search__icon[for="__search"] { top: .3rem; left: .5rem; width: 1rem; height: 1rem; color: var(--ink-2); }
.sk-header .md-search__icon svg, .sk-header .md-search__options svg { width: 1rem; height: 1rem; }
.sk-header .md-search__options { top: .3rem; }
.sk-header .md-search__output { border-radius: 14px; margin-top: .4rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.35), 0 0 0 1px var(--ink-1); overflow: hidden; }
[data-md-toggle="search"]:checked ~ .sk-header .md-search__form { border-radius: 14px 14px 0 0; background: var(--paper); }
@media screen and (min-width: 60em) {
  .sk-header .md-search__inner { width: 9rem; }
  .sk-search-btn { display: none; }
}
@media screen and (min-width: 76.25em) {
  .sk-nav { display: flex; }
  .sk-burger { display: none; }
  .sk-header ~ .md-container .md-sidebar--primary { display: none; }   /* the bar IS the nav on desktop */
}
@media screen and (max-width: 76.1875em) {
  .sk-bar { height: 2.6rem; gap: .6rem; padding: 0 .8rem; }
  .sk-wordmark { font-size: .9rem; }
}
@media screen and (max-width: 59.9375em) {
  .sk-header .md-search__form { border-radius: 0; border: 0; background: transparent; }
  [data-md-toggle="search"]:checked ~ .sk-header .md-search { background: var(--paper); }
  [data-md-toggle="search"]:checked ~ .sk-header .md-search__inner { background: var(--paper); }
  .sk-header .md-search__input { padding-left: 2.6rem; }
}
/* the drawer (phone/tablet): paper, ink, hairlines — no primary-colour banner */
.md-nav--primary .md-nav__title[for="__drawer"] { background: var(--paper); color: var(--ink-3); border-bottom: var(--hairline); height: auto; padding: 1.4rem .8rem .8rem; font-size: .85rem; font-weight: 650; letter-spacing: -.02em; text-transform: none; }
.md-nav--primary .md-nav__title .md-nav__button { display: none; }
.md-nav--primary .md-nav__title { background: var(--paper); color: var(--ink-3); box-shadow: none; }
.md-nav--primary .md-nav__item { border-top: 0; }
.md-nav--primary .md-nav__link { font-size: .8rem; color: var(--ink-3); }
.md-nav--primary .md-nav__link--active { color: var(--accent); }
.md-nav--primary .md-nav__item--active > .md-nav__link { color: var(--accent); }
.md-nav--primary .md-nav__list > .md-nav__item--section > .md-nav__link { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.md-nav--primary .md-nav__source { background: var(--ink-0); border-bottom: var(--hairline); color: var(--ink-3); }
.md-overlay { background: rgba(20,20,20,.35); }
[data-md-color-scheme="slate"] .md-overlay { background: rgba(0,0,0,.6); }

/* ==== the reading column. Scoped to pages wearing the bar (`.sk-header ~ .md-container`) so Home's manual
   block keeps Material's ramp. One centred 42 rem prose column (≈70ch at 1.05 rem),
   the TOC to its right on wide screens, the landing's type scale and section rhythm. ==== */
.sk-header ~ .md-container .md-main__inner { max-width: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42rem) minmax(0, 1fr); column-gap: 0; align-items: start; }
.sk-header ~ .md-container .md-content { grid-column: 2; max-width: none; padding: clamp(1.5rem, 5vh, 3rem) 1.25rem 3rem; }
.sk-header ~ .md-container .md-content__inner { margin: 0; padding: 0; }
.sk-header ~ .md-container .md-content__inner::before { display: none; }
.sk-header ~ .md-container .md-content__button { display: none; }   /* the footer carries the GitHub link; no edit pencil on the page */
.sk-header ~ .md-container .md-sidebar--secondary { display: none; grid-column: 3; justify-self: start; width: 12rem; margin-left: 2.5rem;
  padding: clamp(1.5rem, 5vh, 3rem) 0 0; position: sticky; top: 2.8rem; }
@media screen and (min-width: 76.25em) { .sk-header ~ .md-container .md-sidebar--secondary { display: block; } }
@media screen and (max-width: 76.1875em) { .sk-header ~ .md-container .md-sidebar--primary { grid-column: 1 / -1; } }
/* the TOC: a quiet ink-2 list, the current section marked by a cyan hairline */
.sk-toc .md-nav__title { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; padding: 0 0 .6rem .75rem; }
.sk-toc .md-nav__title .md-nav__icon { display: none; }
.sk-toc .md-nav__list { border-left: var(--hairline); }
.sk-toc .md-nav__item { padding: 0; }
.sk-toc .md-nav__link { font-size: .7rem; line-height: 1.4; color: var(--ink-2); margin: 0; padding: .3rem 0 .3rem .75rem; margin-left: -1px; border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
.sk-toc .md-nav__link:hover { color: var(--ink-3); }
.sk-toc .md-nav__link--active { color: var(--ink-3); border-left-color: var(--accent); }
.sk-toc .md-nav__link .md-ellipsis { white-space: normal; }
.sk-toc .md-nav__item .md-nav__item .md-nav__link { padding-left: 1.5rem; font-size: .66rem; }
/* type scale — the landing's, read at a desk */
.sk-header ~ .md-container .md-typeset { font-size: 1.05rem; line-height: 1.55; color: var(--ink-3); }
.sk-header ~ .md-container .md-typeset h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; margin: .4rem 0 .7rem; color: var(--ink-3); }
.sk-header ~ .md-container .md-typeset h1 + p, .sk-header ~ .md-container .md-typeset h1 + p > em { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.4; color: var(--ink-2); font-style: normal; margin-bottom: 1.6rem; }
.sk-header ~ .md-container .md-typeset h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.12; color: var(--ink-3);
  margin: 0 0 .8rem; padding-top: clamp(2.5rem, 6vh, 4rem); border-top: var(--hairline); }
.sk-header ~ .md-container .md-typeset h2:not(:first-child) { margin-top: clamp(2.5rem, 6vh, 4rem); }
.sk-header ~ .md-container .md-typeset h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; margin: 2rem 0 .6rem; }
.sk-header ~ .md-container .md-typeset h4 { font-size: 1rem; font-weight: 600; margin: 1.6rem 0 .5rem; }
.sk-header ~ .md-container .md-typeset p, .sk-header ~ .md-container .md-typeset ul, .sk-header ~ .md-container .md-typeset ol, .sk-header ~ .md-container .md-typeset dl { margin: 0 0 1rem; }
.sk-header ~ .md-container .md-typeset li { margin-bottom: .35rem; }
.sk-header ~ .md-container .md-typeset .headerlink { font-size: .7em; margin-left: .35em; }
.sk-header ~ .md-container .md-typeset code { font-size: .82em; }
.sk-header ~ .md-container .md-typeset pre > code { font-size: .78rem; line-height: 1.6; }
.sk-header ~ .md-container .md-typeset table:not([class]) { font-size: .8rem; }
.sk-header ~ .md-container .md-typeset .admonition, .sk-header ~ .md-container .md-typeset details { font-size: .9rem; }
.sk-header ~ .md-container .md-typeset .glass > figcaption { font-size: .8rem; }
.sk-header ~ .md-container .sticky-budget { font-size: .62rem; margin: 0 0 .8rem; }
/* phone: the same column, the phone's measure */
@media screen and (max-width: 44rem) {
  .sk-header ~ .md-container .md-content { padding: 1.4rem 1rem 2.5rem; }
  .sk-header ~ .md-container .md-typeset { font-size: .95rem; line-height: 1.5; }
  .sk-header ~ .md-container .md-typeset h1 { font-size: 2.2rem; }
  .sk-header ~ .md-container .md-typeset h1 + p { font-size: 1.1rem; }
  .sk-header ~ .md-container .md-typeset h2 { font-size: 1.55rem; padding-top: 2.2rem; }
  .sk-header ~ .md-container .md-typeset h2:not(:first-child) { margin-top: 2.2rem; }
  .sk-header ~ .md-container .md-typeset pre > code { font-size: .72rem; }
  .sk-header ~ .md-container .md-typeset table:not([class]) { font-size: .74rem; }
}

/* ==== surfaces. Tables, code, notes and details as the landing draws them: ink-0 cards, one hairline,
   14 px corners, mono-caps labels, cyan only where it means something. Same `.sk-header ~ .md-container` scope. ==== */
/* inline code = the landing's chip */
.sk-header ~ .md-container .md-typeset code { background: var(--ink-0); border: var(--hairline); border-radius: 6px; padding: .1em .4em; color: var(--ink-3); }
.sk-header ~ .md-container .md-typeset pre > code, .sk-header ~ .md-container .md-typeset a > code { border: 0; }
.sk-header ~ .md-container .md-typeset a > code { background: var(--ink-0); }
/* code blocks = a card with a quiet copy glyph */
.sk-header ~ .md-container .md-typeset .highlight, .sk-header ~ .md-container .md-typeset > pre { margin: 1.4rem 0; }
.sk-header ~ .md-container .md-typeset .highlight > pre, .sk-header ~ .md-container .md-typeset > pre { margin: 0; }
.sk-header ~ .md-container .md-typeset .highlight > pre > code, .sk-header ~ .md-container .md-typeset > pre > code {
  display: block; background: var(--ink-0); border: var(--hairline); border-radius: 14px; padding: 1rem 2.9rem 1rem 1.2rem; line-height: 1.6; tab-size: 2; }   /* right pad clears the copy button at the end of a scrolled line */
.sk-header ~ .md-container .md-typeset .highlight .md-clipboard { top: .55rem; right: .55rem; width: 1.6rem; height: 1.6rem; color: var(--ink-1); }
.sk-header ~ .md-container .md-typeset .highlight .md-code__nav { top: .55rem; right: .55rem; background: transparent; padding: 0; }
.sk-header ~ .md-container .md-typeset .highlight .md-code__button { color: var(--ink-1); }
.sk-header ~ .md-container .md-typeset .highlight .md-clipboard::after { width: 1rem; height: 1rem; margin: .3rem; }
.sk-header ~ .md-container .md-typeset .highlight:hover .md-clipboard { color: var(--ink-2); }
.sk-header ~ .md-container .md-typeset .highlight .filename { font-family: var(--md-code-font); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); background: var(--ink-0); border: var(--hairline); border-bottom: 0; border-radius: 14px 14px 0 0; padding: .6rem 1.2rem .3rem; margin: 0; }
.sk-header ~ .md-container .md-typeset .highlight .filename + pre > code { border-top-left-radius: 0; border-top-right-radius: 0; }
.sk-header ~ .md-container .md-typeset .highlight span.filename { display: block; }
/* tables = a card that scrolls sideways when it must, never wraps a verb */
.sk-header ~ .md-container .md-typeset__scrollwrap { margin: 1.4rem 0; position: relative; overflow: visible; }
.sk-header ~ .md-container .md-typeset__table { display: block; overflow-x: auto; padding: 0; margin: 0; background: var(--ink-0); border: var(--hairline); border-radius: 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--ink-1) transparent; }
.sk-header ~ .md-container .md-typeset__table table:not([class]) { display: table; width: 100%; margin: 0; border: 0; border-top: 0; font-size: .8rem; line-height: 1.5; }
.sk-header ~ .md-container .md-typeset table:not([class]) th { font-family: var(--md-code-font); font-weight: 500; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); padding: .8rem 1rem .6rem; border-bottom: var(--hairline); text-align: left; vertical-align: bottom; }
.sk-header ~ .md-container .md-typeset table:not([class]) td { padding: .7rem 1rem; border-top: var(--hairline); color: var(--ink-3); }
.sk-header ~ .md-container .md-typeset table:not([class]) tr:first-child td { border-top: 0; }
.sk-header ~ .md-container .md-typeset table:not([class]) th:first-child, .sk-header ~ .md-container .md-typeset table:not([class]) td:first-child { padding-left: 1.2rem; }
.sk-header ~ .md-container .md-typeset table:not([class]) th:last-child, .sk-header ~ .md-container .md-typeset table:not([class]) td:last-child { padding-right: 1.2rem; }
.sk-header ~ .md-container .md-typeset table:not([class]) td code { background: transparent; border: 0; padding: 0; font-size: .86em; white-space: normal; }  /* wrap at spaces (word-break stays normal: never inside a verb) */
.sk-header ~ .md-container .md-typeset table:not([class]) td:first-child code { white-space: nowrap; }
/* the "there is more to the right" hint: a paper fade, present only while there is more (site.js toggles .has-more) */
.sk-header ~ .md-container .md-typeset__scrollwrap::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 3rem; border-radius: 0 14px 14px 0; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--ink-0)); opacity: 0; transition: opacity .3s; }
.sk-header ~ .md-container .md-typeset__scrollwrap.has-more::after { opacity: 1; }
/* long code lines — same fade as tables, on the block; the code element itself scrolls */
.sk-header ~ .md-container .md-typeset .highlight, .sk-header ~ .md-container .md-typeset > pre { position: relative; }
.sk-header ~ .md-container .md-typeset .highlight::after, .sk-header ~ .md-container .md-typeset > pre::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 3rem;
  border-radius: 0 14px 14px 0; pointer-events: none; background: linear-gradient(to right, transparent, var(--ink-0)); opacity: 0; transition: opacity .3s; }
.sk-header ~ .md-container .md-typeset .highlight.has-more::after, .sk-header ~ .md-container .md-typeset > pre.has-more::after { opacity: 1; }
.sk-header ~ .md-container .md-typeset .highlight.has-more .md-clipboard, .sk-header ~ .md-container .md-typeset .highlight.has-more .md-code__nav { opacity: 0; }   /* the fade is the affordance; the copy button returns at the end of the line (Material ≥9.6 names it .md-code__nav) */
.sk-header ~ .md-container .md-typeset .highlight.has-more:hover .md-clipboard, .sk-header ~ .md-container .md-typeset .highlight.has-more:hover .md-code__nav { opacity: 1; }
/* the version chip on the install button must not break mid-token on a phone */
.sk-header ~ .md-container .install-cta small { white-space: nowrap; }
/* two-up grids must not let an unbreakable code line inflate one column (1fr = minmax(auto,1fr)) */
.sk-header ~ .md-container .md-typeset .install-hero > *, .sk-header ~ .md-container .md-typeset .grid > * { min-width: 0; }
@media screen and (min-width: 76.25em) {   /* wide tables borrow 2 rem of gutter each side and drop a size — four columns in 70ch is a squeeze */
  .sk-header ~ .md-container .sk-wide { margin-left: -2rem; margin-right: -2rem; }
  .sk-header ~ .md-container .sk-wide .md-typeset__table table:not([class]) { font-size: .74rem; }
  .sk-header ~ .md-container .sk-wide table:not([class]) th, .sk-header ~ .md-container .sk-wide table:not([class]) td { padding: .6rem .8rem; }
}
@media screen and (max-width: 44rem) {
  .sk-header ~ .md-container .md-typeset__table table:not([class]) { font-size: .74rem; }
  .sk-header ~ .md-container .sk-wide .md-typeset__table table:not([class]) { min-width: 36rem; }   /* 3+ columns: scroll, do not fold into 110 px rows */
  .sk-header ~ .md-container .md-typeset table:not([class]) th, .sk-header ~ .md-container .md-typeset table:not([class]) td { padding: .6rem .8rem; }
  /* prose tables (site.js marks .sk-stack): one card per row, the first column is the row's name, the rest are labelled lines */
  .sk-header ~ .md-container .sk-stack .md-typeset__table table:not([class]) { min-width: 0; display: block; }
  .sk-header ~ .md-container .sk-stack table:not([class]) thead { display: none; }
  .sk-header ~ .md-container .sk-stack table:not([class]) tbody, .sk-header ~ .md-container .sk-stack table:not([class]) tr { display: block; }
  .sk-header ~ .md-container .sk-stack table:not([class]) tr { padding: .9rem 1rem 1rem; border-top: var(--hairline); }
  .sk-header ~ .md-container .sk-stack table:not([class]) tr:first-child { border-top: 0; }
  .sk-header ~ .md-container .sk-stack table:not([class]) td { display: block; padding: .35rem 0 .1rem; border: 0; font-size: .85rem; line-height: 1.5; }   /* block, not grid: a cell's inline runs (text, code, links) must stay one line of prose */
  .sk-header ~ .md-container .sk-stack table:not([class]) td::before { content: attr(data-label); display: block; font-family: var(--md-code-font); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .1rem; }
  .sk-header ~ .md-container .sk-stack table:not([class]) td:first-child { display: block; padding: 0 0 .4rem; font-size: .95rem; }
  .sk-header ~ .md-container .sk-stack table:not([class]) td:first-child::before { display: none; }
  .sk-header ~ .md-container .sk-stack table:not([class]) td:first-child code { font-weight: 600; font-size: .95rem; }
  .sk-header ~ .md-container .sk-stack table:not([class]) td code, .sk-header ~ .md-container .sk-stack table:not([class]) td:first-child code { white-space: normal; overflow-wrap: anywhere; }   /* a row title like "ask failed (422): nothing transcribed" wraps instead of clipping */
  .sk-header ~ .md-container .sk-stack.has-more::after { display: none; }
}
/* notes and details = the same card; the label is the only decoration */
.sk-header ~ .md-container .md-typeset .admonition, .sk-header ~ .md-container .md-typeset details { border-radius: 14px; font-size: .92rem; padding: 0 1.2rem .3rem; margin: 1.4rem 0; }
.sk-header ~ .md-container .md-typeset .admonition-title, .sk-header ~ .md-container .md-typeset summary { padding: .75rem 0 .5rem; margin: 0 0 .7rem; font-size: .62rem; }
.sk-header ~ .md-container .md-typeset .admonition-title::before, .sk-header ~ .md-container .md-typeset summary::before { display: none; }
.sk-header ~ .md-container .md-typeset summary::after { top: .6rem; right: 0; width: .9rem; height: .9rem; background-color: var(--ink-2); }
.sk-header ~ .md-container .md-typeset .admonition > :last-child, .sk-header ~ .md-container .md-typeset details > :last-child { margin-bottom: .8rem; }
.sk-header ~ .md-container .md-typeset .admonition.warning, .sk-header ~ .md-container .md-typeset .admonition.danger, .sk-header ~ .md-container .md-typeset .admonition.bug { border-left: 2px solid var(--accent); }
/* the rest of the furniture */
.sk-header ~ .md-container .md-typeset blockquote { border-left: 2px solid var(--ink-1); color: var(--ink-2); padding-left: 1rem; margin: 1.4rem 0; font-size: 1rem; }
.sk-header ~ .md-container .md-typeset hr { margin: 2.5rem 0; }
.sk-header ~ .md-container .md-typeset kbd { font-size: .75em; padding: .15em .5em; background: var(--ink-0); border: var(--hairline); box-shadow: 0 1px 0 var(--ink-1); border-radius: 6px; }
.sk-header ~ .md-container .md-typeset dl dt { font-weight: 600; margin-top: .8rem; }
.sk-header ~ .md-container .md-typeset dl dd { margin: .2rem 0 0 1.2rem; color: var(--ink-2); }
.sk-header ~ .md-container .md-typeset .tabbed-set { margin: 1.4rem 0; }
.sk-header ~ .md-container .md-typeset .tabbed-labels > label { font-size: .78rem; font-weight: 500; padding: .6rem 1rem; }
.sk-header ~ .md-container .md-typeset .tabbed-content { padding-top: .6rem; }
.sk-header ~ .md-container .md-typeset img:not(.glass img) { border-radius: 14px; }

/* ==== the footer. One hairline, the pager, a quiet meta row — the same column as the prose. ==== */
.sk-footer { background: var(--paper); color: var(--ink-2); border-top: var(--hairline); margin-top: clamp(3rem, 8vh, 5rem); }
.sk-footer__inner { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem 3rem; }
.sk-footer__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.6rem 0; border-bottom: var(--hairline); }
.sk-pager { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--ink-3); min-width: 0; }
.sk-pager--next { text-align: right; align-items: flex-end; }
.sk-pager__label { font-family: var(--md-code-font); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sk-pager__title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; transition: color .2s; }
.sk-pager--prev .sk-pager__title::before { content: "← "; color: var(--ink-1); }
.sk-pager--next .sk-pager__title::after { content: " →"; color: var(--ink-1); }
.sk-pager:hover .sk-pager__title, .sk-pager:focus-visible .sk-pager__title { color: var(--accent); }
.sk-pager:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.sk-footer__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 2rem 0 1.2rem; }
.sk-footer__brand { max-width: 22rem; }
.sk-footer__brand .sk-wordmark { display: inline-block; margin-bottom: .5rem; }
.sk-footer__brand p { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--ink-2); }
.sk-footer__links { list-style: none; margin: 0; padding: .1rem 0 0; display: flex; flex-direction: column; gap: .45rem; text-align: right; }
.sk-footer__links a { font-size: .78rem; color: var(--ink-3); text-decoration: none; transition: color .2s; }
.sk-footer__links a:hover, .sk-footer__links a:focus-visible { color: var(--accent); }
.sk-footer__credit { margin: 0; padding-top: 1.2rem; border-top: var(--hairline); font-family: var(--md-code-font); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
@media screen and (max-width: 44rem) {
  .sk-footer__inner { padding: 0 1rem 2.5rem; }
  .sk-footer__pager { padding: 1.2rem 0; gap: .8rem; }
  .sk-pager__title { font-size: .9rem; }
  .sk-footer__meta { flex-direction: column; gap: 1.4rem; padding: 1.6rem 0 1.2rem; }
  .sk-footer__links { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.2rem; text-align: left; }
}
@media print { .sk-footer { display: none !important; } }

/* ---- type: a magazine ramp, generous leading ---- */
.md-typeset { font-size: .82rem; line-height: 1.65; }
.md-typeset h1 { font-weight: 650; letter-spacing: -.025em; color: var(--md-default-fg-color); font-size: 2.1em; margin-bottom: .6em; }
.md-typeset h2 { font-weight: 600; letter-spacing: -.015em; font-size: 1.35em; margin-top: 2.2em; padding-top: 1.1em; border-top: var(--hairline); }
.md-typeset h3 { font-weight: 600; font-size: 1.05em; }
.md-typeset h1 + p, .md-typeset h1 + p > em { font-size: 1.02em; color: var(--md-default-fg-color--light); }
.md-typeset a { color: var(--md-typeset-a-color); text-decoration: underline; text-decoration-color: var(--ink-1); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.md-typeset a:hover, .md-typeset a:focus { color: var(--accent); text-decoration-color: var(--accent); }
.md-typeset code { font-size: .86em; border-radius: .15rem; padding: .05em .35em; }
.md-typeset pre > code { font-size: .74rem; line-height: 1.55; }
.md-typeset .highlight > pre, .md-typeset > pre, .md-typeset .highlight { border-radius: .2rem; }
.md-typeset pre > code { border: var(--hairline); border-radius: .2rem; }
.md-typeset hr { border-bottom: var(--hairline); }
.md-typeset strong { font-weight: 600; }
.md-typeset kbd { font-family: var(--md-code-font); border-radius: .15rem; box-shadow: 0 1px 0 var(--ink-1); }
.headerlink { color: var(--ink-1) !important; }

/* ---- tables: hairlines only ---- */
.md-typeset table:not([class]) { font-size: .72rem; border: 0; border-top: 2px solid var(--md-default-fg-color); box-shadow: none; border-radius: 0; }
.md-typeset table:not([class]) th { font-weight: 600; background: transparent; border-bottom: var(--hairline); color: var(--md-default-fg-color); }
.md-typeset table:not([class]) td { border-top: var(--hairline); vertical-align: top; }
.md-typeset table:not([class]) code { word-break: normal; overflow-wrap: normal; }  /* wrap at spaces, never inside a verb */
.md-typeset table:not([class]) td:first-child { white-space: nowrap; }
.md-typeset table:not([class]) tr:hover { background: transparent; box-shadow: none; }

/* ---- admonitions echo the card grammar: a flat card, title in mono caps, one hairline, no colour flood ---- */
.md-typeset .admonition, .md-typeset details {
  border: var(--hairline); border-left-width: 1px; border-radius: .25rem; box-shadow: none;
  background: var(--ink-0); font-size: .76rem; margin: 1.4em 0;
}
.md-typeset .admonition-title, .md-typeset summary {
  background: transparent !important; font-family: var(--md-code-font); font-weight: 500; font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--md-default-fg-color--light);
  border-bottom: var(--hairline); padding-left: 2.2rem; margin: 0;
}
.md-typeset .admonition-title::before, .md-typeset summary::before { background-color: var(--md-default-fg-color--light) !important; }
.md-typeset .admonition.warning, .md-typeset .admonition.danger, .md-typeset .admonition.tip, .md-typeset .admonition.note,
.md-typeset .admonition.info, .md-typeset .admonition.example, .md-typeset .admonition.quote, .md-typeset .admonition.success,
.md-typeset .admonition.question, .md-typeset .admonition.abstract, .md-typeset .admonition.failure, .md-typeset .admonition.bug { border-color: var(--ink-1); }
.md-typeset .admonition.warning > .admonition-title::before, .md-typeset .admonition.danger > .admonition-title::before { background-color: var(--accent) !important; }
.md-typeset .admonition.warning > .admonition-title, .md-typeset .admonition.danger > .admonition-title { color: var(--accent); }

/* ---- imagery: only real framebuffers. Frame them like the glass — thin bezel, soft corner ---- */
.md-typeset img { border: var(--hairline); border-radius: .35rem; background: #fff; padding: .25rem; max-width: 100%; }
.md-typeset img[src$=".svg"] { border: 0; background: transparent; padding: 0; }
.md-typeset p > img + em, .md-typeset img + em { display: block; font-size: .7rem; color: var(--md-default-fg-color--light); margin-top: .4em; }

/* ---- .glass: a capture inside the same device bezel the landing draws (landing.css .bezel), self-contained so
   inner pages never import landing.css. Body 106 × 65.5 mm; the screen inset is the real panel window.
   The <img> carries width/height so the box is reserved before the bytes arrive — no layout shift. ---- */
.md-typeset figure.glass { display: block; width: 100%; max-width: 100%; margin: 1.6em 0 1.8em; padding: 0; text-align: left; }
.md-typeset .glass__bezel { position: relative; width: 100%; aspect-ratio: 106 / 65.5; border-radius: 7.5% / 12%;
  background: #f6f5f1; border: 1px solid #d8d7d2;
  box-shadow: 0 1px 0 #fff inset, 0 30px 60px -30px rgba(20,20,20,.35), 0 8px 20px -12px rgba(20,20,20,.25); }
[data-md-color-scheme="slate"] .md-typeset .glass__bezel { background: #24272c; border-color: #3a3d43;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -30px rgba(0,0,0,.8); }
.md-typeset .glass__bezel::before, .md-typeset .glass__bezel::after { /* the three top-edge buttons: AI · up · down */
  content: ""; position: absolute; top: -2.2%; height: 2.4%; border-radius: 2px 2px 0 0; background: #c9c8c3; }
.md-typeset .glass__bezel::before { left: 12%; width: 9%; }
.md-typeset .glass__bezel::after { left: 72%; width: 6%; box-shadow: 9cqw 0 0 #c9c8c3; }
.md-typeset .glass__bezel { container-type: inline-size; }
[data-md-color-scheme="slate"] .md-typeset .glass__bezel::before, [data-md-color-scheme="slate"] .md-typeset .glass__bezel::after { background: #3a3d43; }
[data-md-color-scheme="slate"] .md-typeset .glass__bezel::after { box-shadow: 9cqw 0 0 #3a3d43; }
.md-typeset .glass__bezel > img { position: absolute; left: 9.4%; top: 10.3%; width: 81.2%; height: 79.4%; object-fit: cover; display: block;
  margin: 0; padding: 0; border: 0; border-radius: 3px; background: #e9e8e2; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; filter: contrast(1.02); }
.md-typeset .glass > figcaption { font-style: italic; font-size: .7rem; line-height: 1.5; color: var(--md-default-fg-color--light);
  margin: .7em .2em 0; text-align: left; max-width: none; }
.md-typeset .glass > figcaption code { font-style: normal; }
/* standing on the desk: portrait captures (480 × 800) */
.md-typeset figure.glass--portrait { width: 17rem; max-width: 100%; margin-left: auto; margin-right: auto; }
.md-typeset .glass--portrait .glass__bezel { aspect-ratio: 65.5 / 106; border-radius: 12% / 7.5%; }
.md-typeset .glass--portrait .glass__bezel::before, .md-typeset .glass--portrait .glass__bezel::after { display: none; }
.md-typeset .glass--portrait .glass__bezel > img { left: 10.3%; top: 9.4%; width: 79.4%; height: 81.2%; }
/* several captures side by side: 2-up from tablet width, stacked on a phone */
.md-typeset .glass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.4rem 1.6rem; margin: 1.6em 0 1.8em; }
.md-typeset .glass-grid > figure.glass { margin: 0; }
.md-typeset .glass-grid > figure.glass--portrait { width: auto; }
.md-typeset .glass-grid--portrait { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); max-width: 30rem; margin-left: auto; margin-right: auto; }

/* ---- lists and task lists ---- */
.md-typeset ul li::marker { color: var(--ink-1); }
.md-typeset .task-list-indicator::before { background-color: var(--ink-1); }
.md-typeset [type=checkbox]:checked + .task-list-indicator::before { background-color: var(--accent); }

/* ---- code copy button, tabs ---- */
.md-clipboard { color: var(--ink-1); }
.md-typeset .tabbed-labels > label { font-size: .7rem; }
.md-typeset .tabbed-set > input:checked + .tabbed-labels > label, .md-typeset .tabbed-labels--linked > label { color: var(--md-default-fg-color); }
.md-typeset .tabbed-set .tabbed-labels::before { background: var(--accent); }

/* ---- reading budget strip (set per page via front matter, rendered in overrides/main.html) ---- */
.sticky-budget { font-family: var(--md-code-font); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--md-default-fg-color--light); margin: 0 0 1.2rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.sticky-budget b { color: var(--accent); font-weight: 500; }

/* ---- motion: the e-ink refresh. A real panel does not fade a picture in; it inverts — black, white, black, white, then the
   image — so that is how a capture arrives here: 400 ms, a filter on the box (the frames under it can be swapped while it is
   opaque), no fade. Used by the landing (hero + every frame change) and by .glass figures the first time they scroll in. ---- */
@keyframes sk-eink { 0%, 29% { filter: brightness(0); } 30%, 54% { filter: brightness(0) invert(1); } 55%, 74% { filter: brightness(0); } 75%, 99% { filter: brightness(0) invert(1); } 100% { filter: none; } }
.sk-js .sk-reveal.glass { transform: none; transition-duration: .3s; }             /* the bezel is furniture: it appears, it does not slide */
.sk-js .sk-reveal.glass.is-in .glass__bezel > img { animation: sk-eink .4s both .1s; }   /* the glass repaints */
/* ---- motion: a block rises 10 px into place the first time it scrolls in (site.js adds .sk-reveal below the fold only) ---- */
.sk-js .sk-reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.sk-js .sk-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sk-js .sk-reveal { opacity: 1; transform: none; transition: none; } .sk-js .sk-reveal.glass.is-in .glass__bezel > img { animation: none; } }

/* ---- motion: e-ink does not animate, and neither should the manual for people who asked it not to ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 44rem) {
  .md-typeset { font-size: .78rem; }
  .md-typeset h1 { font-size: 1.7em; }
  .md-typeset pre > code { font-size: .68rem; }
}
@media print { .md-header, .md-tabs, .md-sidebar, .md-footer, .md-top { display: none !important; } .md-typeset a { text-decoration: none; } }

/* ==== diagrams: an inline SVG (pymdownx.snippets) takes the page's ink and accent, so it is right in both schemes
   and legible at any size. On a phone it keeps a readable minimum width and scrolls, like a table. Callouts (<g class="co">)
   are staged in one after another — 300 ms each, 90 ms apart, opacity only — and are simply present under reduced motion. ==== */
.md-typeset figure.sk-diagram { display: block; width: auto; max-width: none; margin: 1.6em 0 1.8em; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--ink-1) transparent; }
.md-typeset .sk-diagram__svg { display: block; width: 100%; height: auto; min-width: 34rem; overflow: visible; }
.md-typeset .sk-diagram > figcaption { font-style: italic; font-size: .8rem; line-height: 1.5; color: var(--ink-2); margin: .7em .2em 0; text-align: left; max-width: none; }
.md-typeset .sk-diagram .co { animation: sk-co-in .3s cubic-bezier(.2,.7,.2,1) both; }
.md-typeset .sk-diagram .co:nth-of-type(2) { animation-delay: .09s; } .md-typeset .sk-diagram .co:nth-of-type(3) { animation-delay: .18s; }
.md-typeset .sk-diagram .co:nth-of-type(4) { animation-delay: .27s; } .md-typeset .sk-diagram .co:nth-of-type(5) { animation-delay: .36s; }
.md-typeset .sk-diagram .co:nth-of-type(6) { animation-delay: .45s; } .md-typeset .sk-diagram .co:nth-of-type(7) { animation-delay: .54s; }
.md-typeset .sk-diagram .co:nth-of-type(8) { animation-delay: .63s; }
@keyframes sk-co-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .md-typeset .sk-diagram .co { animation: none; } }
@media (max-width: 44rem) { .md-typeset .sk-diagram__svg { min-width: 30rem; } }
.md-typeset .sk-diagram--firstboot .sk-diagram__svg { min-width: 38rem; }
.md-typeset .sk-diagram--card .sk-diagram__svg { max-width: 40rem; min-width: 30rem; }   /* five boxes in a row need the width; scrolls on a phone */
@media screen and (min-width: 76.25em) { .sk-header ~ .md-container .md-typeset figure.sk-diagram { margin-left: -4rem; margin-right: -4rem; } }   /* borrow the gutter: 13 px labels stay ≥ 12 px */