/* Agentic Mermaid — sparse, document-first, and brand-stable.

   Three layers, deliberately separated so renderer themes cannot retint the
   public shell:

     1. BRAND   (:root, --brand-*)  constant. The logo chip, the grain
                                    texture, the type. No theme or scheme
                                    block may set these — this is the
                                    isolation seam.
     2. THEME   ([data-theme])      optional triplet for diagrams/reference
                                    sheets. Production public pages do not ship
                                    a global theme picker.
     3. SCHEME  ([data-scheme])     light | dark. Polarity-dependent tokens for
                                    diagram plates, the mark ring, and code.
*/

/* ============================ 1 · BRAND ============================
   Isolated from every theme and scheme. The brand elements (.brand .mark,
   body::before, the type) read ONLY from this layer, never from
   --bg/--fg/--accent, so changing the palette can't restyle the logo, the
   texture, or the type. */
:root {
  /* the logo chip — lighter, tonal green-on-green, with a deep-green glyph
     (never white). The chip's living surface is the WebGL shader, painted from
     the --m-* tokens below; --brand-pine is only the pre-canvas fallback and
     tracks the shader mid. A --m-sweep darker than the chip keeps the sweep
     visible on a light chip. (Tonal alt: --brand-pine #2E9E7E, --brand-on
     #DEF4EC, --m-deep #257E63, --m-mid #2E9E7E, --m-sweep #BFE9D8.) */
  --brand-pine: #6FC2A2;   /* chip fallback ≈ the shader mid */
  --brand-on:   #0A4434;   /* the graph glyph — deep forest */
  --m-deep:     #5CB897;   /* shader gradient, foot */
  --m-mid:      #79C9AB;   /* shader gradient, head */
  --m-sweep:    #C2EAD9;   /* the descending sweep — a gentle lift, lighter than the chip */
  /* the grain *recipe* (body::before: desaturated feTurbulence) is brand-constant
     — no theme restyles it. Its --grain opacity is calibrated per scheme (see the
     SCHEME layer) so the texture *feels* even: dark noise on a light base needs
     more than light noise lifting off a dark base. */

  /* Type direction: calibration sheet / standards manual / instrument panel.
     Prefer distinctive local faces, then fall back to durable system families;
     diagrams keep their renderer font and are intentionally not rethemed here. */
  --serif: Charter, 'Bitstream Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:  'Avenir Next', Avenir, 'Segoe UI', system-ui, sans-serif;
  --mono:  'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', ui-monospace, monospace;
  --font-serif: var(--serif);
  --font-sans: var(--sans);
  --font-mono: var(--mono);

  --prose-max: 46.25rem;
  --page-gutter: 24px;
  --wide-max: 960px;
  --wide-width: min(var(--wide-max), calc(100vw - var(--page-gutter) - var(--page-gutter)));
  --content-max: calc(var(--wide-max) + var(--page-gutter) + var(--page-gutter));
  /* One site column: pages, masthead, footer, and Examples share the same
     960px content span; --wide-width keeps full-bleed media inside the viewport. */
  --measure: var(--wide-width);
  --ease-standard: ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-ui: 0.2s;
  --dur-control: 0.16s;
  --dur-press: 0.1s;
  --dur-diagram-fade: 0.35s;
  --dur-mark: 0.24s;
  --dur-stagger: 0.04s;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --control-h: 40px;
  --control-px: 12px;
}

/* ============================ 2 · THEME ============================
   Default palette is Paper — a warm cream-and-ink ground with a terracotta
   accent. Every theme below sets only the triplet; the hierarchy is derived
   once, here, from those three values, so it recomputes automatically whenever
   a [data-theme] block swaps them. Pine (our green) lives on as
   [data-theme="pine-light"] / [data-theme="pine-dark"]. */
:root {
  --bg:     #F5F0E4;
  --fg:     #221E16;
  --accent: #9A4A24;

  /* derived hierarchy — a coherent mono ramp from the triplet. The three ink
     steps stay visibly distinct on Paper: ink 14.6:1, soft 8.0:1 (≥7:1),
     faint 5.4:1 on --bg and 4.9:1 on --surface (≥4.5:1 AA for muted text). */
  --paper:        var(--bg);
  --ink:          var(--fg);
  --ink-soft:     color-mix(in srgb, var(--fg) 80%, var(--bg));
  --ink-faint:    color-mix(in srgb, var(--fg) 68%, var(--bg));
  --surface:      color-mix(in srgb, var(--fg) 5%,  var(--bg));
  --surface-subtle: color-mix(in srgb, var(--fg) 3%,  var(--bg));
  --surface-raised: color-mix(in srgb, var(--fg) 6%,  var(--bg));
  --chip:         color-mix(in srgb, var(--fg) 9%,  var(--bg));
  --line:         color-mix(in srgb, var(--fg) 13%, var(--bg));
  --line-strong:  color-mix(in srgb, var(--fg) 24%, var(--bg));
  --surface-card: var(--surface);
  --surface-border: var(--line);
  --surface-border-strong: var(--line-strong);
  --shadow-hairline: 0 1px 0 color-mix(in srgb, var(--fg) 5%, transparent);
  --link:         var(--accent);
  --accent-hover: color-mix(in srgb, var(--accent) 68%, var(--fg));
  --accent-tint:  color-mix(in srgb, var(--accent) 14%, var(--bg));
  --code-fg:      var(--fg);

  /* status + terminal + legacy tokens (kept stable / derived across themes).
     Light-polarity status ink on Paper: danger 6.5:1, warn 6.0:1 (the dark
     pastels live in the [data-scheme="dark"] block). */
  --warn: #7E5214; --warn-tint: color-mix(in srgb, var(--warn) 14%, var(--bg)); --danger: #96352A;
  --term-bg: var(--code-bg); --term-fg: var(--fg); --term-dim: var(--ink-soft); --term-accent: var(--accent);
  --accent-press: var(--accent-hover); --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-card: var(--radius-lg); --radius-input: var(--radius-md);
  --control-bg: var(--surface); --control-bg-hover: var(--chip); --control-fg: var(--ink-soft); --control-border: var(--line-strong);
  --popover-bg: var(--surface); --shadow-control: 0 0 0 1px var(--line); --shadow-popover: 0 18px 44px rgba(0,0,0,0.28);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;
  --t-display: clamp(2.7rem, 6.5vw, 4rem);
  --t-h1: clamp(2.2rem, 4.2vw, 3rem);
  --t-h2: clamp(1.55rem, 2.4vw, 1.85rem);
  --t-h3: 1.25rem;
  --t-lead: 1.25rem;
  --t-body: 1.0625rem;
  --t-sm: 0.875rem;
  --t-label: 0.8125rem;
  --t-control: 0.8125rem;
  --t-mono: 0.84375rem;
  --lh-tight: 1.1;
  --lh-title: 1.08;
  --lh-heading: 1.25;
  --lh-body: 1.6;
  --lh-lead: 1.48;
  --lh-code: 1.68;
  --lh-ui: 1.35;
  --track-heading: -0.018em;
  --track-display: -0.022em;
}

/* every renderer theme, as a triplet (bg / fg / accent). set [data-theme] on
   <html>; default (:root above) is Paper. order: light, then dark. */
[data-theme="pine-light"]        { --bg:#F4F8F6; --fg:#16231E; --accent:#1A7351; }
[data-theme="zinc-light"]        { --bg:#FFFFFF; --fg:#27272A; --accent:#2563EB; }
[data-theme="github-light"]      { --bg:#FFFFFF; --fg:#1F2328; --accent:#0969DA; }
[data-theme="solarized-light"]   { --bg:#FDF6E3; --fg:#586E75; --accent:#268BD2; }
[data-theme="catppuccin-latte"]  { --bg:#EFF1F5; --fg:#4C4F69; --accent:#8839EF; }
[data-theme="nord-light"]        { --bg:#ECEFF4; --fg:#2E3440; --accent:#5E81AC; }
[data-theme="tokyo-night-light"] { --bg:#D5D6DB; --fg:#343B58; --accent:#34548A; }
[data-theme="salmon"]            { --bg:#FFFBF5; --fg:#521000; --accent:#D23C00; }
[data-theme="tufte"]             { --bg:#FFFFF8; --fg:#111111; --accent:#7A0000; }
[data-theme="dusk"]              { --bg:#2A2521; --fg:#E9DFCC; --accent:#CC8A57; }
[data-theme="paper-dark"]        { --bg:#16130D; --fg:#ECE3CE; --accent:#C9824F; }
[data-theme="pine-dark"]         { --bg:#0F1512; --fg:#E7ECE9; --accent:#6FC2A2; }
[data-theme="zinc-dark"]         { --bg:#18181B; --fg:#FAFAFA; --accent:#60A5FA; }
[data-theme="github-dark"]       { --bg:#0D1117; --fg:#E6EDF3; --accent:#4493F8; }
[data-theme="tokyo-night"]       { --bg:#1A1B26; --fg:#A9B1D6; --accent:#7AA2F7; }
[data-theme="tokyo-night-storm"] { --bg:#24283B; --fg:#A9B1D6; --accent:#7AA2F7; }
[data-theme="catppuccin-mocha"]  { --bg:#1E1E2E; --fg:#CDD6F4; --accent:#CBA6F7; }
[data-theme="nord"]              { --bg:#2E3440; --fg:#D8DEE9; --accent:#88C0D0; }
[data-theme="dracula"]           { --bg:#282A36; --fg:#F8F8F2; --accent:#BD93F9; }
[data-theme="solarized-dark"]    { --bg:#002B36; --fg:#93A1A1; --accent:#268BD2; }
[data-theme="one-dark"]          { --bg:#282C34; --fg:#ABB2BF; --accent:#C678DD; }
[data-theme="salmon-dark"]       { --bg:#1F1008; --fg:#F5DCC8; --accent:#FF6B35; }
[data-theme="tufte-dark"]        { --bg:#1C1C1A; --fg:#E8E4DC; --accent:#C87070; }
/* a few renderer accents are intentionally mid-toned; darken/lighten link ink
   toward foreground so links still clear WCAG AA against their theme ground. */
[data-theme="solarized-light"], [data-theme="nord-light"] { --link: color-mix(in srgb, var(--accent) 25%, var(--fg)); --accent-hover: color-mix(in srgb, var(--accent) 40%, var(--fg)); }
[data-theme="solarized-dark"] { --link: color-mix(in srgb, var(--accent) 35%, var(--fg)); --accent-hover: color-mix(in srgb, var(--accent) 50%, var(--fg)); }

/* ============================ 3 · SCHEME ===========================
   Polarity-dependent tokens + the light/dark diagram swap. Light is the default
   (Pine Light and every light theme); dark themes opt in via data-scheme, set by
   the switcher (and the inline head guard) alongside data-theme. */
:root, [data-scheme="light"] {
  --diagram-bg: #FFFFFF;                        /* frames the light diagram render */
  --mark-ring:  rgba(0,0,0,0.10);
  --card-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 1px 2px -1px rgba(0,0,0,0.06),
    0 2px 4px 0 rgba(0,0,0,0.04);
  --code-bg:    color-mix(in srgb, var(--bg) 95%, var(--fg));
  --grain:      0.15;                           /* dark noise on a light base needs more to match */
}
[data-scheme="dark"] {
  --diagram-bg: #141D19;                       /* frames the dark diagram render */
  --mark-ring:  rgba(255,255,255,0.10);
  --card-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  --code-bg:    color-mix(in srgb, var(--bg) 82%, #000);
  --grain:      0.07;                           /* light noise on a dark base reads strongly */
  /* dark polarity flips the status inks back to pastels on a dark tint */
  --warn: #E0A75A; --warn-tint: #2A2418; --danger: #E08A80;
}

/* keep native UI (scrollbars, form controls, the canvas) in the right polarity
   the instant the attributes are set, even before the rest of CSS applies */
:root, :root[data-scheme="light"] { color-scheme: light; }
:root[data-scheme="dark"] { color-scheme: dark; }

/* Public shell has no global theme picker; transitions stay for ordinary hover,
   focus, and copied-status state changes, while diagram themes remain editor-only. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

body, .doc, .masthead, .masthead .links a, h1, h2, h3, p, a, strong, .lead, .muted,
pre, pre code, code, blockquote, th, td, hr, figure .plate, footer, .footlinks a, .footlinks .sep,
.brand {
  transition: background-color var(--dur-ui) var(--ease-standard), color var(--dur-ui) var(--ease-standard), border-color var(--dur-ui) var(--ease-standard);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: var(--lh-body); font-feature-settings: "kern" 1, "liga" 1; }
::selection { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); color: var(--ink); }
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 50; transform: translateY(-160%); padding: 8px 10px; border-radius: 8px; background: var(--paper); color: var(--link); box-shadow: 0 0 0 1px var(--line-strong); }
.skip-link:focus { transform: translateY(0); }
:target { scroll-margin-top: 24px; }
.gallery figure:target, table tr:target { outline: 2px solid var(--accent); outline-offset: 4px; }
/* a faint grain so the flat surface gains some texture — brand-constant
   (opacity from --grain), so it survives every theme unchanged */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- the document column ---- */
.doc { max-width: var(--content-max); margin: 0 auto; padding: 8px var(--page-gutter) 128px; }
/* Running prose reads at --prose-max (~66ch); everything that manages its own
   width — code, tables, figures, the layout strips, and the card sections
   (quick-start, channels, why-typed, copy-prompt-card, agent-hero) — keeps the
   full column. The homepage lead opts back out below (.home-main). */
.doc > p:not(.endmark),
.doc > blockquote,
.doc > dl,
.doc > ul:not(.fact-strip, .doc-index, .start-rail),
.doc > ol,
.doc .page-header > .lead,
.doc .machine-context > p { max-width: var(--prose-max); }

/* ---- masthead: one quiet line, like a document title bar ---- */
.masthead { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-7) var(--page-gutter) 0; }
.masthead .bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 7px; font-family: var(--serif); font-weight: 600; font-size: 1.125rem; line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand .mark { width: 24px; height: 24px; border-radius: 6px; background: var(--brand-pine); color: var(--brand-on); display: inline-grid; place-items: center; }
.mark { position: relative; overflow: hidden; box-shadow: 0 0 0 1px var(--mark-ring); }
.mark > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mark > .glyph { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.mark > .glyph svg { width: 100%; height: 100%; display: block; color: var(--brand-on); filter: drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.18)); }
.masthead .links { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px; }
.masthead .links a:not(.link-editor) { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--ink-faint); font-size: var(--t-sm); line-height: var(--lh-heading); }
.masthead .links a:not(.link-editor):hover { color: var(--ink); text-decoration: none; }
.masthead .links a:not(.link-editor)[aria-current="page"] { color: var(--ink); }
.masthead .links .link-editor {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
}
.masthead hr { border: 0; margin: var(--sp-5) 0 0; }

/* ---- prose: headings, text, lists, rules ---- */
h1, h2 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: var(--lh-title); letter-spacing: var(--track-heading); text-wrap: balance; }
.page-header { margin: var(--sp-8) 0 var(--sp-7); }
.page-header h1 { margin-top: 0; }
/* page-header meta slot: source/updated/read-time on one consistent treatment */
.page-meta { margin: 0 0 var(--sp-5); color: var(--ink-faint); font-family: var(--mono); font-size: var(--t-label); line-height: var(--lh-ui); }
.about-diagram { margin: var(--sp-6) auto var(--sp-3); text-align: center; }
.about-diagram svg { max-width: 100%; height: auto; }
h1 { font-size: var(--t-h1); margin: var(--sp-8) 0 var(--sp-4); }
.home-main .page-header { margin-top: var(--sp-8); }
.home-main h1 { font-size: var(--t-display); line-height: 1.03; letter-spacing: var(--track-display); text-wrap: wrap; }
.home-main h1 .line { display: inline; }
.home-main .page-header > .lead { max-width: none; font-size: clamp(1.2rem, 1.7vw, 1.42rem); line-height: var(--lh-lead); text-wrap: wrap; }
h2 { font-size: var(--t-h2); margin: var(--sp-9) 0 var(--sp-4); }
h3 { font-family: var(--sans); color: var(--ink); font-size: var(--t-h3); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -0.01em; margin: var(--sp-7) 0 var(--sp-2); text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-soft); margin: 0 0 var(--sp-6); text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
p { margin: 0 0 var(--sp-5); }
a { color: var(--link); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--dur-control) var(--ease-standard), text-decoration-color var(--dur-control) var(--ease-standard); }
a:hover { text-decoration-color: currentColor; }
/* keyboard focus ring, theme-aware (forced-colors has its own below);
   full-strength accent clears 3:1 on both --bg (5.5:1) and --surface (5.0:1) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
strong { color: var(--ink); font-weight: 700; }
.muted { color: var(--ink-faint); }
small { color: var(--ink-faint); font-size: var(--t-sm); }
ul, ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-6); }
li { margin: var(--sp-2) 0; }
li::marker { color: var(--ink-faint); }
hr { border: 0; margin: var(--sp-6) 0; }
.go { color: var(--link); font-weight: 600; white-space: nowrap; }
/* long .go labels (e.g. getting-started's prompt link) must wrap on phones
   rather than push the page wider than the viewport */
@media (max-width: 640px) { .go { white-space: normal; } }
.go::after { content: " \2192"; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 22px 0 0; }
.primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); padding: 0 12px; border-radius: var(--radius-md); font-family: var(--sans); font-size: var(--t-control); font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color var(--dur-control) var(--ease-out), color var(--dur-control) var(--ease-out), border-color var(--dur-control) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.primary-action { border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--surface-border-strong)); background: var(--accent); color: var(--bg); }
.primary-action:hover { background: var(--accent-hover); color: var(--bg); text-decoration: none; transform: translateY(-1px); }
.secondary-action { border: 1px solid var(--control-border); background: var(--control-bg); color: var(--control-fg); }
.secondary-action:hover { background: var(--control-bg-hover); color: var(--ink); text-decoration: none; transform: translateY(-1px); }
.primary-action:active, .secondary-action:active { transform: scale(0.97); }
.page-actions .copy-prompt-status { flex-basis: 100%; padding: 0; }
.start-rail { list-style: none; padding: 0; margin: 8px 0 20px; border-top: 1px solid var(--line); }
.start-rail li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.start-rail strong { display: block; margin-bottom: 3px; }
.start-rail p { margin: 0 0 8px; }
.start-rail pre { margin: 10px 0 0; }
.start-rail .go { display: inline-block; margin-top: 4px; }
.doc-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 18px; padding-left: 0; list-style: none; }
.doc-index li { margin: 0; }
.doc-index-grouped { gap: 18px; }
.doc-index-grouped > li { padding: 12px 0 0; border-top: 1px solid var(--line); }
.doc-index-grouped > li > strong { display: block; margin-bottom: 8px; color: var(--ink); }
.doc-index-grouped ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.doc-index-grouped a { color: var(--ink-soft); }
.doc-index-grouped a:hover { color: var(--link); text-decoration: none; }
.doc-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--t-sm); }
.doc-pager a { color: var(--ink-soft); }
.doc-pager .doc-pager-next { margin-left: auto; }
.workflow-list { padding-left: 22px; }
.workflow-list li { margin: 9px 0; }
.section-kicker { margin: 0 0 8px; color: var(--ink-soft); font-family: var(--mono); font-size: var(--t-label); font-weight: 650; line-height: var(--lh-ui); }
.quick-start { margin: var(--sp-7) 0 var(--sp-6); padding: var(--sp-4); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-hairline); }
.quick-start h2 { margin-top: 0; }
.quick-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding: 0; margin: 16px 0 16px; list-style: none; }
.quick-steps li { margin: 0; padding-top: 10px; border-top: 1px solid var(--surface-border); }
.quick-steps strong { display: block; margin-bottom: 2px; }
@media (max-width: 720px) { .quick-steps { grid-template-columns: 1fr; } }

/* ---- example showcase: editor examples, rendered at build time ---- */
.example-showcase { width: var(--wide-width); margin: 34px 0 0 50%; transform: translateX(-50%); }
.example-group { margin-top: 54px; }
.example-group > h2 { margin-bottom: 8px; }
.example-sample { margin: 26px 0 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.example-sample-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.example-sample-head h3 { margin: 2px 0 8px; }
.example-sample-head p { margin-bottom: 0; max-width: 62ch; }
.example-meta { color: var(--ink-faint); font-size: var(--t-label); line-height: var(--lh-ui); }
/* The agent task an example answers — prompt, then the trace before serialize.
   Folded in from the former gallery; mirrors .gallery-prompt/.gallery-ops. */
.example-prompt, .example-trace { margin: 9px 0 0; max-width: 62ch; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.46; }
.example-prompt span, .example-trace span { display: inline-block; min-width: 52px; margin-right: 6px; }
.example-trace code { font-size: var(--t-label); white-space: normal; }
.example-sample-grid { display: grid; grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.35fr); gap: 18px; align-items: stretch; }
.example-source, .example-render { min-width: 0; margin: 0; border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-hairline); }
.example-source pre { height: 100%; min-height: 280px; max-height: 520px; margin: 0; border: 0; border-radius: var(--radius-lg); background: transparent; overflow: auto; }
.example-render { display: grid; grid-template-rows: minmax(260px, 1fr) auto; overflow: hidden; }
.example-svg { display: grid; align-items: center; justify-items: center; min-height: 260px; padding: 18px; background: var(--diagram-bg); overflow: auto; }
.example-svg svg { display: block; width: 100%; max-width: 100%; height: auto; }
.example-render figcaption { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: var(--t-label); line-height: var(--lh-ui); }
@media (max-width: 720px) {
  .example-sample-head { display: block; }
  .example-sample-head .go { margin-top: 10px; display: inline-block; }
  .example-sample-grid { grid-template-columns: 1fr; }
  .example-source pre { min-height: 180px; max-height: 360px; }
}

/* ---- comparisons ---- */
.comparisons { margin-top: var(--sp-6); }
.comparison-case { margin: 0 0 var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.comparison-case-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.comparison-case-head h2 { margin: 0; }
.comparison-summary, .warning-guide { margin: var(--sp-5) 0 var(--sp-6); padding: var(--sp-4); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-hairline); }
.comparison-summary p, .warning-guide p { max-width: var(--prose-max); }
.comparison-summary ul { margin-bottom: 0; }
.comparison-takeaway { margin: -4px 0 12px; max-width: 70ch; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.5; }
.comparison-note { margin: -6px 0 12px; color: var(--ink-faint); font-size: var(--t-label); line-height: var(--lh-ui); }
.comparison-focus { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink-faint); font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; }
.comparison-focus:hover { border-color: var(--control-border); background: var(--control-bg-hover); color: var(--ink); }
.comparison-dialog-close { min-height: 40px; padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--control-bg); color: var(--control-fg); font-family: var(--sans); font-size: var(--t-label); font-weight: 700; cursor: pointer; }
.comparison-dialog-close:hover { background: var(--control-bg-hover); color: var(--ink); }
.comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: stretch; }
.comparison-panel { min-width: 0; display: grid; grid-template-rows: auto minmax(260px, 1fr); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-hairline); overflow: hidden; }
.comparison-panel h3 { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink-faint); font-family: var(--sans); font-size: var(--t-label); line-height: var(--lh-ui); font-weight: 650; }
.comparison-render { min-width: 0; min-height: 260px; display: grid; place-items: center; padding: 12px; background: var(--diagram-bg); overflow: auto; }
.comparison-render svg { display: block; max-width: 100%; height: auto; }
.comparison-mermaid { margin: 0; border: 0; background: transparent; color: var(--code-fg); white-space: pre; font-size: 0.76rem; }
.comparison-dialog { width: min(96vw, 1400px); max-height: 92vh; padding: 0; border: 1px solid var(--surface-border-strong); border-radius: var(--radius-lg); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-popover); }
.comparison-dialog::backdrop { background: rgb(34 30 22 / 0.42); backdrop-filter: blur(2px); }
.comparison-dialog-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.comparison-dialog-bar h2 { margin: 0; font-size: var(--t-h3); }
.comparison-dialog-note { margin: 4px 0 0; color: var(--ink-faint); font-size: var(--t-label); line-height: var(--lh-ui); }
.comparison-dialog-body { padding: 16px; overflow: auto; }
.comparison-dialog-body .comparison-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.comparison-dialog-body .comparison-render { min-height: 420px; }
@media (max-width: 980px) { .comparison-grid, .comparison-dialog-body .comparison-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .comparison-case-head { align-items: flex-start; flex-direction: column; } .comparison-dialog-body .comparison-render { min-height: 300px; } }

/* ---- agent-first prompt surfaces ---- */
.agent-hero { margin: 12px 0 20px; }
.agent-hero-primary { margin: var(--sp-6) 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-hairline); }
.agent-hero-primary h2 { margin-top: 0; }
.agent-prompt-first { margin-top: var(--sp-4); }
.agent-hero-primary .copy-prompt-primary { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.agent-hero-head p { margin-bottom: 14px; }
.meta-label, .agent-kicker { margin: 0 0 8px; line-height: var(--lh-ui); }
.copy-prompt-card {
  overflow: hidden;
  margin: var(--sp-4) 0 var(--sp-3);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-hairline);
}
.copy-prompt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 7px 8px 7px 14px;
  border-bottom: 1px solid var(--line);
}
.copy-prompt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--control-px);
  cursor: pointer;
  transition: background-color var(--dur-control) var(--ease-out), color var(--dur-control) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.copy-prompt-icon {
  width: 13px;
  height: 13px;
  color: currentColor;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.copy-prompt-btn[data-copy-state="ok"] .copy-prompt-icon,
.prompt-action[data-copy-state="ok"] .copy-prompt-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* the full prompt collapses behind a native disclosure; the copy bar above
   stays visible and still copies the hidden text (textContent survives) */
.prompt-details > summary { display: flex; align-items: center; gap: 10px; min-height: var(--control-h); padding: 6px 14px; cursor: pointer; list-style: none; color: var(--ink-soft); font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; line-height: var(--lh-ui); transition: color var(--dur-control) var(--ease-out), background-color var(--dur-control) var(--ease-out); }
.prompt-details > summary::-webkit-details-marker { display: none; }
.prompt-details > summary:hover { color: var(--ink); background: var(--control-bg-hover); }
/* the disclosure caret: points right when closed, down when open */
.prompt-details > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-control) var(--ease-out); }
.prompt-details[open] > summary::before { transform: rotate(45deg); }
.prompt-details[open] > summary { border-bottom: 1px solid var(--line); }
.prompt-details .prompt-summary-open { display: none; }
.prompt-details[open] .prompt-summary-open { display: inline; }
.prompt-details[open] .prompt-summary-closed { display: none; }
.agent-prompt { margin: 0; border-radius: 0; border: 0; background: transparent; overflow-x: hidden; white-space: pre-wrap; overflow-wrap: break-word; }
.agent-prompt code { font-size: var(--t-mono); line-height: var(--lh-code); white-space: pre-wrap; overflow-wrap: break-word; font-feature-settings: "liga" 0, "calt" 0, "tnum" 1; }
.copy-prompt-hint, .copy-prompt-status { min-height: 0; margin: 0; padding: 0 14px 11px; color: var(--ink-faint); font-size: var(--t-label); line-height: var(--lh-ui); }
.copy-prompt-hint code { font-size: 0.95em; }
.copy-prompt-status:empty { display: none; }
.agent-config { margin-top: 14px; }
.agent-config pre { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }
.agent-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 0; }
.agent-trace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 22px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-family: var(--mono); font-size: var(--t-label); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.agent-trace span { display: inline-flex; align-items: center; }
.agent-trace span + span::before { content: "→"; margin-right: 8px; color: var(--ink-faint); }
/* ---- why typed edits: regenerate vs mutate, side by side ---- */
.why-typed { margin: var(--sp-9) 0 var(--sp-6); }
.contrast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: var(--sp-5) 0 var(--sp-4); }
.contrast-col { padding: var(--sp-4); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-hairline); }
.contrast-col > .meta-label { margin: 0 0 10px; }
.contrast-col ul { margin: 0; padding-left: 18px; }
.contrast-col li { margin: 6px 0; font-size: var(--t-sm); line-height: 1.5; }
.contrast-col-mutate { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
@media (max-width: 720px) { .contrast-grid { grid-template-columns: 1fr; } }

/* ---- channel tabs: one typed edit through Library, CLI, and MCP.
   Without JS the panels stack with their own labels; theme.js adds
   .tabs-ready, reveals the tab bar, and drives panel visibility. ---- */
.channels { margin: var(--sp-9) 0 var(--sp-6); }
.tabbed-card { overflow: hidden; margin: var(--sp-4) 0 var(--sp-3); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-hairline); }
.tab-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); }
.tab-bar [role="tab"] { min-height: var(--control-h); padding: 0 var(--control-px); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink-faint); font-family: var(--sans); font-size: var(--t-control); font-weight: 700; cursor: pointer; transition: background-color var(--dur-control) var(--ease-out), color var(--dur-control) var(--ease-out); }
.tab-bar [role="tab"]:hover { background: var(--control-bg-hover); color: var(--ink); }
.tab-bar [role="tab"][aria-selected="true"] { border-color: var(--control-border); background: var(--control-bg); color: var(--ink); }
.tab-panel > pre { margin: 0; border-radius: 0; background: transparent; }
.tab-panel-label { padding: 12px 18px 0; margin: 0; }
.tabbed-card:not(.tabs-ready) .tab-bar { display: none; }
.tabbed-card:not(.tabs-ready) .tab-panel + .tab-panel { border-top: 1px solid var(--line); }
.tabs-ready .tab-panel-label { display: none; }

/* ---- fact strip: capability evidence in one scannable row ---- */
.fact-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 var(--sp-5); padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.fact-strip li { margin: 0; font-size: var(--t-sm); line-height: var(--lh-ui); }
.fact-strip a { color: var(--ink-soft); }
.fact-strip a:hover { color: var(--link); text-decoration: none; }
.fact-strip strong { color: var(--ink); }

.machine-context { margin-top: var(--sp-9); }
.agent-entrypoints { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 22px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: var(--lh-ui); }
.agent-entrypoints strong { color: var(--ink); }
.agent-entrypoints a { color: var(--ink-soft); }
.agent-entrypoints a:hover { color: var(--link); text-decoration: none; }

/* ---- code: inline + fenced, like markdown ---- */
code { font-family: var(--mono); font-size: 0.9em; font-feature-settings: "liga" 0, "calt" 0, "tnum" 1; }
:not(pre) > code { background: var(--surface-card); padding: 1px 6px; border-radius: var(--radius-sm); }
pre { background: var(--surface-card); border-radius: var(--radius-md); padding: 15px 18px; overflow: auto; margin: 0 0 var(--sp-5); }
pre code { font-size: var(--t-mono); line-height: var(--lh-code); color: var(--code-fg); background: none; padding: 0; }
.unicode-diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.unicode-diagram code { display: block; width: max-content; max-width: none; min-width: 100%; font-size: clamp(0.75rem, 1.1vw, 0.84rem); line-height: var(--lh-heading); white-space: pre; }
.c { color: var(--ink-faint); } .k { color: var(--link); } .ok { color: var(--link); }

/* ---- blockquote: a left rule, nothing more ---- */
blockquote { margin: 0 0 var(--sp-5); padding: 1px 0 1px 18px; border-left: 2px solid var(--surface-border-strong); color: var(--ink-soft); }

/* ---- tables: markdown style ---- */
table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-5); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td code { font-size: var(--t-label); }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 20px; }
.table-scroll table { margin-bottom: 0; }
/* Warning tier/severity badges: quiet outlined pills whose ink carries the
   semantics — structural/error in danger ink, geometric/warning in warn ink,
   lint in the accent. Values come from the light-polarity status tokens. */
.tier-badge, .sev-badge { display: inline-block; padding: 1px 9px; border: 1px solid currentColor; border-radius: var(--radius-pill); font-size: var(--t-label); line-height: var(--lh-ui); }
.tier-structural, .sev-error { color: var(--danger); }
.tier-geometric, .sev-warning { color: var(--warn); }
.tier-lint { color: var(--accent); }

/* Examples page jump index: one row per category above the 17k-px showcase. */
.example-tools, .warning-tools { display: grid; gap: 6px; margin: 0 0 var(--sp-4); max-width: 32rem; }
.example-tools label, .warning-tools label { color: var(--ink-soft); font-family: var(--mono); font-size: var(--t-label); line-height: var(--lh-ui); }
.example-tools input, .warning-tools input { min-height: var(--control-h); width: 100%; padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--control-bg); color: var(--ink); font: inherit; font-size: var(--t-sm); }
.example-tools input:focus-visible, .warning-tools input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.example-toc { margin: 0 0 var(--sp-7); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--surface-border); border-radius: var(--radius-md); background: var(--surface-card); font-size: var(--t-sm); line-height: 1.55; }
.example-toc p { margin: var(--sp-1) 0; }
.example-toc a { color: var(--ink-soft); }
.example-toc a:hover { color: var(--link); }
.example-toc strong { color: var(--ink); }

@media (max-width: 640px) {
  .warning-table { display: block; }
  .warning-table thead { display: none; }
  .warning-table tbody, .warning-table tr, .warning-table td { display: block; width: 100%; }
  .warning-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .warning-table td { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border: 0; }
  .warning-table td::before { content: attr(data-label); }
}

/* ---- figures: diagrams inline like images, on an untinted plate ---- */
figure { margin: var(--sp-6) 0; }
figure .plate { background: var(--diagram-bg); border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--card-shadow); }
/* a themeable inline diagram inherits --bg/--fg/--accent. Keep the visible
   plate on the same --bg as the SVG so label halos are not a homepage-only skin. */
figure .plate.dia-plate { background: var(--bg); }
figure .plate.dia-plate svg { display: block; width: 100%; height: auto; }
/* diagram crossfades between a light and a dark render depending on the theme */
.dia-wrap { position: relative; }
.dia-wrap .dia { display: block; width: 100%; height: auto; transition: opacity var(--dur-diagram-fade) var(--ease-standard); }
.dia-wrap .dia-light { position: absolute; inset: 0; opacity: 0; }
[data-scheme="light"] .dia-light { opacity: 1; }
[data-scheme="light"] .dia-dark { opacity: 0; }

figure .plate img { display: block; width: 100%; height: auto; }
figure pre { margin: 0; }
figcaption { color: var(--ink-faint); font-size: var(--t-label); line-height: 1.45; margin-top: 8px; }

/* ---- document notes: one reusable prose primitive, not a separate docs mode ---- */
.mtoggle, .snref, .mntoggle { display: none; }
.sidenote, .marginnote {
  display: block;
  margin: 10px 0 18px;
  padding: 10px 12px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.sidenote code, .marginnote code { font-size: 0.88em; }
.spark { display: inline-block; width: 58px; height: 15px; vertical-align: -2px; margin: 0 2px; }
.spark polyline { fill: none; stroke: var(--ink-soft); stroke-width: 1.1; }
.spark .end { fill: var(--accent); }
.sparkval { color: var(--link); font-variant-numeric: tabular-nums; }
.endmark { text-align: center; margin: 56px 0 0; color: var(--ink-faint); }
.endmark svg { width: 22px; height: 22px; }

/* ---- gallery: a contact sheet of family renders. Wide/dense families span the
   row so renderer text is not scaled down into unreadable thumbnails; tall
   compact families can span without inheriting the wide-diagram scaling. ---- */
.gallery-page { max-width: var(--content-max); }
.gallery-page > .page-header,
.gallery-page > h1,
.gallery-page > .lead,
.gallery-page > p { max-width: var(--prose-max); margin-left: auto; margin-right: auto; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 28px 24px; margin: 32px 0; }
.gallery figure { margin: 0; }
.gallery .gallery-wide, .gallery .gallery-span { grid-column: 1 / -1; }
.gallery figcaption { margin: 0 0 11px; font-size: 0.9375rem; line-height: 1.42; }
.gallery-prompt, .gallery-ops { margin: 0 0 7px; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.46; }
.gallery-prompt span, .gallery-ops span { display: inline-block; min-width: 52px; margin-right: 6px; }
.gallery-ops code { font-size: var(--t-label); white-space: normal; }
.gallery .plate { background: var(--surface-card); padding: clamp(12px, 2vw, 18px); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); overflow: hidden; }
.gallery .plate svg, .gallery .plate img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }
.gallery figcaption b { color: var(--ink); font-weight: 700; }
@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr; gap: 28px; }
}

footer { max-width: var(--content-max); margin: 0 auto; padding: 28px var(--page-gutter) 56px; }
.footlinks { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--t-sm); }
.footlinks + .footlinks { margin-top: 8px; }
.footlinks a { color: var(--ink-soft); }
.footlinks .sep { color: var(--line-strong); }

@media (max-width: 640px) {
  body { font-size: 1rem; }
  h1 { font-size: 2.15rem; }
  .home-main h1 { font-size: clamp(2.45rem, 12vw, 3.2rem); }
  .masthead { padding-top: var(--sp-6); }
  .masthead .bar { gap: 8px 12px; align-items: flex-start; }
  .masthead .links { order: 3; width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px; padding: 2px 0 0; overflow: visible; }
  .masthead .links a,
  .masthead .links .link-editor { min-height: 44px; }
}

/* mark assembly + idle sweep (the only motion); honours reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  @keyframes settle { from { opacity: 0.72; transform: translateY(-1px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes routein { from { opacity: 0.55; } to { opacity: 1; } }
  .mark .glyph .nrank1 { animation: settle var(--dur-mark) var(--ease-out) both; }
  .mark .glyph .nrank3 { animation: settle var(--dur-mark) var(--ease-out) var(--dur-stagger) both; }
  .mark .glyph .edge-long, .mark .glyph .dummy { animation: routein var(--dur-mark) var(--ease-out) var(--dur-stagger) both; }
  /* copy feedback: the checkmark lands on success; a clipboard failure shakes */
  @keyframes copy-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes copy-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
  .copy-prompt-btn[data-copy-state="ok"] .copy-prompt-icon,
  .prompt-action[data-copy-state="ok"] .copy-prompt-icon { animation: copy-pop var(--dur-mark) var(--ease-out); }
  .copy-prompt-btn[data-copy-state="err"],
  .prompt-action[data-copy-state="err"] { animation: copy-shake 0.2s var(--ease-standard); }
  /* homepage loop figure: one entrance on load, on the mark's clock — nodes
     settle left-to-right, edges and labels route in behind them. Among the
     figure's <g> siblings the two edge labels come first, so the six nodes are
     :nth-of-type(3)–(8); the edges are polylines 1–6, left to right. */
  .home-main .dia-plate .node { animation: settle var(--dur-mark) var(--ease-out) both; }
  .home-main .dia-plate .edge,
  .home-main .dia-plate .edge-label { animation: routein var(--dur-mark) var(--ease-out) both; }
  .home-main .dia-plate .node:nth-of-type(4),
  .home-main .dia-plate .edge:nth-of-type(2) { animation-delay: var(--dur-stagger); }
  .home-main .dia-plate .node:nth-of-type(5),
  .home-main .dia-plate .edge:nth-of-type(3) { animation-delay: calc(2 * var(--dur-stagger)); }
  .home-main .dia-plate .node:nth-of-type(6),
  .home-main .dia-plate .edge:nth-of-type(4) { animation-delay: calc(3 * var(--dur-stagger)); }
  .home-main .dia-plate .node:nth-of-type(7),
  .home-main .dia-plate .edge:nth-of-type(5) { animation-delay: calc(4 * var(--dur-stagger)); }
  .home-main .dia-plate .node:nth-of-type(8),
  .home-main .dia-plate .edge:nth-of-type(6),
  .home-main .dia-plate .edge-label { animation-delay: calc(5 * var(--dur-stagger)); }
  /* channel tabs: the incoming panel fades in instead of snapping */
  @keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
  .tabs-ready .tab-panel:not([hidden]) { animation: panel-in var(--dur-control) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

/* Shared affordance primitives: keep links, controls, metadata, surfaces, and
   status feedback on one visual contract instead of page-specific one-offs. */
.copy-prompt-btn,
.masthead .links .link-editor {
  min-height: var(--control-h);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--control-fg);
  font-family: var(--sans);
  font-size: var(--t-control);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--dur-control) var(--ease-out), color var(--dur-control) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.copy-prompt-btn:hover,
.masthead .links .link-editor:hover {
  background: var(--control-bg-hover);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-1px);
}
.copy-prompt-btn:active,
.masthead .links .link-editor:active { transform: scale(0.97); }
.copy-prompt-btn[data-copy-state="ok"] { color: var(--link); }
.copy-prompt-btn[data-copy-state="err"], .prompt-action[data-copy-state="err"] { color: var(--danger); }
:where(.meta-label, .agent-kicker, .section-kicker, .copy-prompt-label, .gallery-prompt span, .gallery-ops span, .example-prompt span, .example-trace span) {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 650;
  line-height: var(--lh-ui);
  letter-spacing: 0;
  text-transform: none;
}
:where(th, .warning-table td::before) {
  color: var(--ink-faint);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
:where(.gallery .plate, figure .plate, .sidenote, .marginnote) {
  border-color: var(--surface-border);
}
:where(.agent-entrypoints, .footlinks) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  line-height: 1.45;
}
:where(.copy-prompt-status, .muted, small, figcaption) { color: var(--ink-faint); }

@media (forced-colors: active) {
  :root { --paper: Canvas; --ink: CanvasText; --ink-soft: CanvasText; --ink-faint: CanvasText; --surface: Canvas; --chip: Canvas; --line: CanvasText; --line-strong: CanvasText; --link: LinkText; --control-bg: ButtonFace; --control-bg-hover: ButtonFace; --control-fg: ButtonText; --control-border: ButtonText; --diagram-bg: Canvas; --popover-bg: Canvas; }
  body::before { display: none; }
  .mark { forced-color-adjust: auto; box-shadow: 0 0 0 1px ButtonText; }
  .masthead .links .link-editor,
  .copy-prompt-card,
  .copy-prompt-btn,
  pre,
  code,
  blockquote,
  figure .plate,
  .gallery .plate,
  .sidenote,
  .marginnote { border-color: ButtonText; box-shadow: none; }
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
}

/* ---- print: the document, minus the interactive chrome ---- */
@media print {
  body { background: #fff; color: #000; }
  body::before { display: none; }                    /* no grain on paper */
  .masthead .links, .page-actions, .copy-prompt-btn, .copy-prompt-status,
  .skip-link, .footlinks + .footlinks { display: none; }
  a { color: inherit; text-decoration-color: currentColor; }
}