/* ── faucet-stream documentation theme ────────────────────────────────────── Matches the marketing site (faucet-hq.github.io): a cool near-white paper with slate ink in light, a deep teal-charcoal in dark, and the brand teal as the single accent — links, the active nav item, callouts. The rule is strict: wherever a teal fill appears, its text is white. No gradients, no noise. Light/rust = cool paper; navy/coal/ayu = teal-charcoal. Loaded via `additional-css` after mdBook's own CSS, so these rules win. ──────────────────────────────────────────────────────────────────────── */ /* ── Self-hosted brand fonts (Geist + Geist Mono, SIL OFL 1.1) ────────────────── Geist is a clean, high-x-height neo-grotesque — the same easy-to-read quality the Pydantic docs get from ABC Diatype (which is a commercial font we can't ship). Variable woff2 (one file = every weight), self-hosted under src/assets/fonts/ so there is NO external request and the site works offline. License text lives beside the fonts in that directory. `font-display: swap` paints the fallback immediately, then upgrades — no invisible-text flash. ──────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "Geist"; src: url("assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Brand teal, matching the marketing site. --fs-green is the token name kept for stability across the stylesheet, but the value is now the site's teal. */ --fs-green: #0d9488; /* the accent — teal (fills, active nav; white text on it) */ --fs-green-deep: #0f766e; /* hover / link text where more contrast is needed */ --fs-green-bright: #2dd4bf; /* bright teal accent on dark grounds */ --fs-ink: #0f172a; /* slate ink (site --ink) */ /* Font stacks — Geist first, then the native UI font so text renders instantly before the webfont loads and if it ever fails. */ --fs-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-mono: "Geist Mono", ui-monospace, "Source Code Pro", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* Apply the sans site-wide (content, sidebar, menu bar, TOC) — overrides mdBook's bundled Open Sans on . */ html { font-family: var(--fs-sans); } /* Geist Mono for all code surfaces. */ .content code, .content pre, .content pre code, kbd { font-family: var(--fs-mono); } /* ── Light / rust: cool near-white paper, slate ink (matches the site) ──────── */ .light, .rust { --bg: #fbfdfc; /* site paper — cool near-white */ --fg: var(--fs-ink); --sidebar-bg: #f4f8f7; /* site surface-2 — gentle separation from the paper */ --sidebar-fg: var(--fs-ink); --sidebar-non-existant: #94a3b8; --sidebar-active: var(--fs-green); --sidebar-spacer: rgba(15, 23, 42, 0.1); --scrollbar: rgba(15, 23, 42, 0.28); --sidebar-header-border-color: var(--fs-green); --links: #0f766e; /* deep teal, readable (AA) on cool white */ --inline-code-color: #0f766e; --quote-bg: #f0fdfa; /* teal-50 wash */ --quote-border: #cbe9e3; --table-border-color: #e2e8f0; /* site hairline */ --table-header-bg: #f4f8f7; --table-alternate-bg: #f8fafc; --theme-popup-bg: #ffffff; --theme-popup-border: #e2e8f0; --theme-hover: rgba(15, 23, 42, 0.06); } /* ── Navy / coal / ayu: deep teal-charcoal, off-white text (site dark band) ── */ .navy, .coal, .ayu { --bg: #0a1f1b; /* deep teal-charcoal (near the site --night #08201c) */ --fg: #dbeee9; /* off-white, teal-tinted (site --night-ink) */ --sidebar-bg: #071915; --sidebar-fg: #dbeee9; --sidebar-non-existant: #6f958c; --sidebar-active: var(--fs-green-bright); --sidebar-spacer: rgba(255, 255, 255, 0.08); --scrollbar: rgba(255, 255, 255, 0.24); --sidebar-header-border-color: var(--fs-green-bright); --links: var(--fs-green-bright); --inline-code-color: var(--fs-green-bright); --quote-bg: #0e2a24; --quote-border: #16403a; /* site --night-line */ --table-border-color: #16403a; --table-header-bg: #0c2620; --table-alternate-bg: #0b2019; --theme-hover: rgba(255, 255, 255, 0.07); } /* ── Sidebar TOC: black text; the active item is a green pill with white text ─ */ .sidebar .sidebar-scrollbox { padding: 0.8rem 1.05rem; /* more left/right breathing room so items don't hug the edge */ } .chapter li.chapter-item { margin: 0.14rem 0; /* a touch more separation between items */ line-height: 1.85; /* match the roomy rhythm mdBook gives nested sections */ } .chapter li.chapter-item > a, .chapter li.chapter-item > div { border-radius: 6px; padding: 0.36rem 0.6rem; transition: color 0.13s ease; } .chapter li.chapter-item > a:hover { background: color-mix(in srgb, var(--sidebar-fg) 10%, transparent); color: var(--sidebar-fg); } /* Active item = teal text, no pill/background/border (same treatment at every level). Broad selector + !important overrides mdBook's runtime `--sidebar-active` white which would be invisible on the pale sidebar. */ .chapter li.chapter-item > a.active, .sidebar .chapter a.active { background: transparent !important; color: var(--fs-green-deep) !important; font-weight: 600; } .navy .chapter li.chapter-item > a.active, .coal .chapter li.chapter-item > a.active, .ayu .chapter li.chapter-item > a.active, .navy .sidebar .chapter a.active, .coal .sidebar .chapter a.active, .ayu .sidebar .chapter a.active { color: var(--fs-green-bright) !important; } /* Nested sub-sections of the active page (mdBook's
    ): replace the chunky default rail with a soft, thin guide rail, indented so it doesn't collide with the active pill's corner. Sub-items sit quietly; the current one picks up teal text (no pill). */ .sidebar .chapter .section { border-inline-start: 0 !important; margin-inline-start: 0.9rem; padding-inline-start: 0.5rem; } .sidebar .chapter .section li.chapter-item > a { color: color-mix(in srgb, var(--sidebar-fg) 82%, transparent); padding-block: 0.28rem; } .sidebar .chapter .section li.chapter-item > a.active { background: transparent !important; color: var(--fs-green-deep) !important; } .navy .sidebar .chapter .section li.chapter-item > a.active, .coal .sidebar .chapter .section li.chapter-item > a.active, .ayu .sidebar .chapter .section li.chapter-item > a.active { color: var(--fs-green-bright) !important; } .chapter .part-title { color: var(--sidebar-fg); opacity: 0.62; letter-spacing: 0.04em; } /* ── Focus: green ring, not the browser's blue ────────────────────────────── */ .sidebar a:focus:not(:focus-visible), .content a:focus:not(:focus-visible) { outline: none; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--fs-green); outline-offset: 2px; border-radius: 4px; } .sidebar a:focus-visible { outline-offset: -2px; border-radius: 7px; } /* ── Top menu bar: one soft green hairline ────────────────────────────────── */ .menu-bar { border-bottom: 1px solid color-mix(in srgb, var(--fs-green) 22%, transparent); } /* ── Pydantic-style header (header-ui.js) ────────────────────────────────────── An always-visible "Search ⌘K" pill centered in the menu bar, plus a single light/dark toggle on the right. Built on mdBook's own search + theme markup: its five-theme popup, its separate search-toggle icon, and the centered book title are hidden; the search box is relocated into the bar and restyled. ──────────────────────────────────────────────────────────────────────────── */ #mdbook-theme-toggle, #mdbook-theme-list, #mdbook-search-toggle { display: none !important; } .menu-bar.fs-has-search .menu-title { display: none; /* the search pill takes the center instead of the title */ } /* The relocated search wrapper fills the bar's center. */ .menu-bar.fs-has-search #mdbook-search-wrapper { display: flex !important; /* beats mdBook's `.hidden { display:none !important }` */ justify-content: center; /* Absolutely center on the (sticky) menu-bar so the pill lines up with the content column, instead of centering in the asymmetric flex gap between the left hamburger and the right icon group. */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(44rem, calc(100% - 14rem)); /* leave room for the side buttons */ margin: 0; max-height: none; border-bottom: none; padding: 0; z-index: 5; } .menu-bar.fs-has-search #mdbook-searchbar-outer { width: 100%; max-width: 44rem; /* the pill's max width */ margin: 0; } .menu-bar.fs-has-search .search-wrapper { position: relative; width: 100%; } .menu-bar.fs-has-search #mdbook-searchbar { width: 100%; margin: 0; padding: 0.5rem 5rem 0.5rem 3.2rem; /* room for the magnifier + the ⌘K badge */ border-radius: 9px; border: 1px solid var(--table-border-color, rgba(0, 0, 0, 0.18)); background-color: color-mix(in srgb, var(--fg) 4%, var(--bg)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23888' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 1rem center; background-size: 1.05rem; font-size: 1.5rem; line-height: 1.4; color: var(--fg); transition: border-color 0.13s ease, box-shadow 0.13s ease; } .menu-bar.fs-has-search #mdbook-searchbar:focus { border-color: var(--fs-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-green) 18%, transparent); outline: none; } /* The ⌘K hint badge, right-aligned inside the pill. */ .fs-kbd { position: absolute; top: 50%; right: 0.7rem; transform: translateY(-50%); pointer-events: none; font-family: inherit; font-size: 1.15rem; line-height: 1; padding: 0.28em 0.5em; color: color-mix(in srgb, var(--fg) 60%, transparent); background: color-mix(in srgb, var(--fg) 7%, transparent); border: 1px solid var(--table-border-color, rgba(0, 0, 0, 0.16)); border-radius: 5px; } /* Results as a dropdown card under the pill (mdBook toggles its `hidden`). */ .menu-bar.fs-has-search #mdbook-searchresults-outer { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(44rem, 92vw); max-height: 70vh; overflow-y: auto; text-align: left; background: var(--bg); border: 1px solid var(--table-border-color, rgba(0, 0, 0, 0.18)); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); padding: 0.6rem 0.9rem; z-index: 120; } /* The light/dark toggle icon. */ #fs-theme-toggle .fa-svg { display: inline-flex; } #fs-theme-toggle svg { width: 1.5rem; height: 1.5rem; } /* On narrow screens the absolute-centered pill overlaps the hamburger and the right-hand icons (the hidden menu-title normally spaces the button groups apart). So on mobile let the pill flow in-line, taking the space *between* the two button groups — it can no longer sit on top of them. */ @media (max-width: 700px) { .menu-bar.fs-has-search #mdbook-search-wrapper { position: static; transform: none; left: auto; top: auto; width: auto; flex: 1 1 auto; min-width: 0; margin: 0 0.6rem; z-index: auto; align-items: center; /* vertically center the pill with the hamburger + icons */ } .menu-bar.fs-has-search #mdbook-searchbar-outer { max-width: none; } .menu-bar.fs-has-search #mdbook-searchbar { padding-right: 1rem; font-size: 1rem; /* 1.5rem is oversized on a phone */ } .fs-kbd { display: none; } /* keep the results dropdown within the viewport under the in-flow pill */ .menu-bar.fs-has-search #mdbook-searchresults-outer { left: 0; right: 0; width: auto; transform: none; } } /* ── Content links + accents (quiet) ──────────────────────────────────────── */ .content a:not(.header) { text-decoration: none; } .content a:not(.header):hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } ::selection { background: color-mix(in srgb, var(--fs-green) 24%, transparent); } .content a.header:hover { color: var(--fs-green); } /* ── Blockquote → quiet green callout ─────────────────────────────────────── */ .content blockquote { border-inline-start: 3px solid var(--fs-green); background: color-mix(in srgb, var(--fs-green) 7%, transparent); border-radius: 0 6px 6px 0; margin-inline: 0; padding: 1rem 1.2rem; color: inherit; } /* Zero the leading/trailing margins of the callout's own paragraphs so the top and bottom padding stay symmetric — otherwise the last paragraph's margin-bottom stacks on the padding and leaves a big gap under the text while the first line hugs the top edge. */ .content blockquote > :first-child { margin-top: 0; } .content blockquote > :last-child { margin-bottom: 0; } /* ── Tables: clean, soft warm header ──────────────────────────────────────── */ .content table thead th { font-weight: 600; } /* ── Navigation + search pick up green ────────────────────────────────────── */ .nav-chapters:hover { color: var(--fs-green); } #searchbar:focus { border-color: var(--fs-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fs-green) 22%, transparent); outline: none; } mark { background: color-mix(in srgb, var(--fs-green) 30%, transparent); } /* ── Typography ─────────────────────────────────────────────────────────────── Tuned for long-form reading, in the spirit of the Pydantic / Material docs: a comfortable measure, a strong-but-quiet heading hierarchy, generous vertical rhythm, and code that sits calmly in the flow. Prose, code, and tables share one column so everything lines up on the same left edge. · font — system-ui first (SF Pro / Segoe UI): crisp on every OS, the same neutral-grotesk feel Pydantic gets from Inter, with no web-font request. Open Sans (mdBook-bundled) is the fallback. · size — 17px body (16px floor; 17–18px is the long-form optimum). · leading — 1.72 line-height (WCAG 1.4.8 asks for ≥1.5). · measure — ~780px ≈ 75 characters, the readable sweet spot. · gutters — wider page padding so nothing hugs the edges. mdBook uses the 62.5% trick, so 1rem = 10px here. ──────────────────────────────────────────────────────────────────────────── */ :root { --page-padding: 24px; /* symmetric breathing room on both edges */ --content-max-width: 780px; /* the shared column width — a comfortable measure */ } .content { font-family: var(--fs-sans); font-size: 1.7rem; /* 17px */ line-height: 1.72; /* the vertical rhythm / "font gap" */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Paragraphs + lists: even rhythm, so blocks breathe without drifting apart. */ .content p { margin: 0 0 1.1em; } .content ul, .content ol { margin: 0 0 1.1em; padding-inline-start: 1.5em; } .content li { margin: 0.3em 0; } .content li > ul, .content li > ol { margin: 0.3em 0 0.4em; /* nested lists hug their parent item */ } /* Headings: bold and clearly stepped, with room above each new section so the eye can find the seams. `scroll-margin-top` keeps a targeted heading clear of the sticky menu bar when you follow an anchor link. */ .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { font-weight: 700; line-height: 1.25; scroll-margin-top: 4rem; } .content h1, .content h2, .content h3 { letter-spacing: -0.014em; } .content h1 { font-size: 3.1rem; /* 31px */ margin: 0 0 0.8rem; } .content h2 { font-size: 2.3rem; /* 23px */ margin-top: 3rem; padding-bottom: 0.28em; border-bottom: 1px solid var(--table-border-color, rgba(0, 0, 0, 0.1)); } .content h3 { font-size: 1.9rem; /* 19px */ margin-top: 2.2rem; font-weight: 600; } .content h4 { font-size: 1.6rem; /* 16px */ margin-top: 1.8rem; font-weight: 600; } /* Inline code: a quiet tinted chip, a hair smaller so it doesn't tower over the prose x-height. */ .content :not(pre) > code { font-size: 0.88em; padding: 0.12em 0.38em; border-radius: 5px; background: color-mix(in srgb, var(--fs-green) 9%, transparent); } /* Code blocks: rounded, padded, softly bordered, and horizontally scrollable so a long line never blows out the column. Scoped to :not(.mermaid) so mermaid diagram frames (also 
    ) keep their own `.content .mermaid` styling and
   don't pick up a second border. */
.content pre:not(.mermaid) {
  border-radius: 10px;
  padding: 0.2rem 0.1rem; /* mdBook pads the inner ; keep the frame thin */
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  line-height: 1.55;
}
.content pre:not(.mermaid) > code {
  font-size: 0.86em;
}
/* Code panels contrast the page (header-ui.js forceContrastCode): a DARK panel
   on a light page, a LIGHT panel on a dark page. On light pages the dark panel's
   plain text is bumped to bright near-white so it never reads as faded (syntax
   token colors keep their own hues); on dark pages the panel is light and keeps
   its own dark text, so it's left alone. */
.light .content pre code,
.rust .content pre code {
  color: #f5f6f7;
}

/* Tables: airy and rule-based (in the Pydantic / Material spirit) — no boxy
   grid of borders. A bold header underlined by a firm rule, light horizontal
   separators between rows, a quiet hover highlight, and generous padding. */
.content table {
  border-collapse: collapse;
  width: auto;
  margin: 1.4rem 0;
  border: none;
}
.content table th,
.content table td {
  border: none;
  padding: 0.6em 1.1em;
  text-align: left;
  background: transparent;
}
.content table thead th {
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--fg) 28%, transparent);
}
.content table tbody td {
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.content table tbody tr:last-child td {
  border-bottom: none;
}
.content table tbody tr:hover td {
  background: color-mix(in srgb, var(--fs-green) 6%, transparent);
}
/* First column flush-left so the table lines up with the prose. */
.content table th:first-child,
.content table td:first-child {
  padding-left: 0;
}
/* Drop mdBook's zebra striping — the row rules carry the structure. */
.content table tbody tr:nth-child(2n),
.content table tbody tr:nth-child(2n) td {
  background: transparent;
}

/* Horizontal rule: a faint divider instead of mdBook's heavy default. */
.content hr {
  border: none;
  border-top: 1px solid var(--table-border-color, rgba(0, 0, 0, 0.12));
  margin: 2.4rem 0;
}
.content .mermaid {
  width: fit-content;
  max-width: 100%;
  margin: 1.6rem auto; /* center the box on the page */
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--table-border-color, #c6c6bc);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fs-green) 4%, transparent);
  text-align: center; /* center the diagram inside the box */
  overflow-x: auto;
}
.content .mermaid svg {
  /* Render at natural size (paired with mermaid's useMaxWidth:false); the
     enclosing .mermaid box caps width at 100% and scrolls horizontally, so a
     long left-to-right pipeline stays legible instead of being shrunk to a
     thin, unreadable strip. */
  max-width: none;
  height: auto;
}

/* ── "Live" flow diagrams (fs-flow.js) ─────────────────────────────────────────
   Animated pipelines matching the marketing site's hero card: teal node-chips
   connected by flowing packets (the packets are the records moving through).
   Theme-aware via tokens; motion honors prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────────────────── */
.content .fs-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0;
  margin: 1.8rem 0;
}
.fs-flow-node {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--table-border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--fs-green) 6%, var(--bg));
  min-width: 0;
}
.fs-flow-name {
  font-weight: 600;
  font-size: 0.92em;
  line-height: 1.2;
}
.fs-flow-sub {
  font-family: var(--fs-mono);
  font-size: 0.74em;
  color: color-mix(in srgb, var(--fg) 58%, transparent);
}
.fs-flow-edge {
  position: relative;
  flex: 0 0 2.1rem;
  height: 2px;
  margin: 0 0.1rem;
  align-self: center;
  background: color-mix(in srgb, var(--fg) 14%, transparent);
}
/* arrowhead at the tip of each connector */
.fs-flow-edge::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 5px solid color-mix(in srgb, var(--fg) 32%, transparent);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.fs-flow-edge i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--fs-green);
  box-shadow: 0 0 6px color-mix(in srgb, var(--fs-green) 70%, transparent);
  animation: fs-flow-move 1.8s linear infinite;
}
.fs-flow-edge i:nth-child(2) {
  animation-delay: 0.6s;
}
.fs-flow-edge i:nth-child(3) {
  animation-delay: 1.2s;
}
@keyframes fs-flow-move {
  0% {
    left: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fs-flow-edge i {
    animation: none;
  }
  .fs-flow-edge i:nth-child(1) {
    left: 22%;
  }
  .fs-flow-edge i:nth-child(2) {
    left: 50%;
  }
  .fs-flow-edge i:nth-child(3) {
    left: 78%;
  }
}

/* ── "On this page" — right-hand per-page TOC (page-toc.js) ─────────────────────
   A quiet third column of the current page's headings, like the Pydantic /
   Material docs. It only appears on wide viewports where there is genuine room
   for a third column beside the sidebar and the prose; on anything narrower the
   prose stays centered and full-width, and the TOC is hidden. Muted link text,
   the active heading picks up the brand green.
   ──────────────────────────────────────────────────────────────────────────── */
.page-toc {
  display: none;
}
.page-toc-title {
  font-weight: 700;
  font-size: 1.35rem; /* 13.5px */
  letter-spacing: 0.02em;
  margin-bottom: 0.7rem;
  color: var(--fg);
}
.page-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-toc li {
  margin: 0;
}
.page-toc a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* long headings wrap to ≤3 lines, then ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere; /* never clip a word mid-character */
  padding: 0.28rem 0;
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.12s ease;
}
.page-toc a:hover {
  color: var(--fg);
}
.page-toc a.active {
  color: var(--links);
  font-weight: 600;
}
.page-toc-h3 a {
  padding-left: 0.95rem;
  font-size: 0.94em;
}

@media (min-width: 1200px) {
  /* Three columns — sidebar | prose | on-this-page — but only once the TOC was
     actually built (`has-page-toc`), so TOC-less pages stay centered. The grid
     is a centered block capped at ~1000px so the prose keeps a sane measure and
     the TOC sits snugly beside it; existing page-padding provides outer gutters.
     Kicks in at 1200px so it shows on ordinary laptop widths, not just very
     wide monitors. */
  #mdbook-content.content.has-page-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: 2.8rem;
    max-width: 1040px;
    margin-inline: auto;
    /* mdBook sets `overflow-y: auto` on .content, which (per spec) forces
       overflow-x to `auto` too and turns this element into the sticky TOC's
       scroll container — so the TOC stuck to nothing and scrolled away. Restore
       `visible` so the sticky nav pins to the viewport instead. */
    overflow: visible;
    /* No `align-items: start` — the TOC wrapper must STRETCH to the full row
       height so the sticky nav inside it has room to stay pinned. */
  }
  #mdbook-content.content.has-page-toc > main {
    grid-column: 1;
    max-width: none; /* the grid column already caps the measure */
    margin: 0;
    min-width: 0; /* let long code/tables scroll instead of stretching the grid */
  }
  #mdbook-content.content.has-page-toc > .nav-wrapper {
    grid-column: 1; /* prev/next sits under the prose, not the TOC */
  }
  .has-page-toc .page-toc-wrap {
    grid-column: 2;
    /* stretches to the full row height by default — this is the sticky room */
  }
  .has-page-toc .page-toc {
    display: block;
    position: sticky;
    top: calc(var(--menu-bar-height, 50px) + 1.4rem);
    max-height: calc(100vh - var(--menu-bar-height, 50px) - 3rem);
    overflow-y: auto;
    padding-left: 1.1rem;
    border-left: 1px solid var(--table-border-color, rgba(0, 0, 0, 0.12));
    font-size: 1.4rem; /* 14px — quieter than body */
    line-height: 1.45;
  }
}

/* ── Landing hero + cards (introduction.md) ───────────────────────────────── */
.fs-hero {
  text-align: center;
  padding: 2rem 1rem 0.5rem;
}
.fs-hero img,
.fs-hero .fs-wordmark {
  max-width: 420px;
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* Inline, theme-aware wordmark: "faucet" follows the page text color so it stays
   legible on every theme (invisible dark-on-dark is the bug this fixes); "stream"
   and the mark are the brand teal, brightened on dark grounds. */
.fs-wordmark text {
  font-family: var(--fs-sans);
}
.fs-wordmark .wm-mark {
  stroke: var(--fs-green);
}
.fs-wordmark .wm-dots {
  fill: var(--fs-green);
}
.fs-wordmark .wm-faucet {
  fill: var(--fg);
}
.fs-wordmark .wm-stream {
  fill: var(--fs-green);
}
.navy .fs-wordmark .wm-mark,
.coal .fs-wordmark .wm-mark,
.ayu .fs-wordmark .wm-mark {
  stroke: var(--fs-green-bright);
}
.navy .fs-wordmark .wm-dots,
.coal .fs-wordmark .wm-dots,
.ayu .fs-wordmark .wm-dots,
.navy .fs-wordmark .wm-stream,
.coal .fs-wordmark .wm-stream,
.ayu .fs-wordmark .wm-stream {
  fill: var(--fs-green-bright);
}
.fs-hero .fs-tagline {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--fs-green-deep);
  margin: 1rem auto 1.4rem;
  max-width: 34rem;
  line-height: 1.45;
}
.navy .fs-hero .fs-tagline,
.coal .fs-hero .fs-tagline,
.ayu .fs-hero .fs-tagline {
  color: var(--fs-green-bright);
}
.fs-cta {
  display: inline-flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.fs-cta a {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  border-bottom: none !important;
  transition: transform 0.12s ease, background 0.12s ease;
}
.fs-cta a:hover {
  transform: translateY(-1px);
}
.fs-cta a.primary {
  background: var(--fs-green);
  color: #fff !important;
}
.fs-cta a.primary:hover {
  background: var(--fs-green-deep);
}
.fs-cta a.secondary {
  border: 1px solid var(--fs-green) !important;
  color: var(--fs-green-deep) !important;
}
.navy .fs-cta a.secondary,
.coal .fs-cta a.secondary,
.ayu .fs-cta a.secondary {
  border-color: var(--fs-green-bright) !important;
  color: var(--fs-green-bright) !important;
}
.fs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.fs-card {
  border: 1px solid var(--table-border-color, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  padding: 1rem 1.15rem;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.fs-card:hover {
  border-color: var(--fs-green);
  transform: translateY(-2px);
}
.fs-card h3 {
  margin-top: 0;
  color: var(--fs-green-deep);
}
.navy .fs-card h3,
.coal .fs-card h3,
.ayu .fs-card h3 {
  color: var(--fs-green-bright);
}