/* Original BMAD+ editorial system. CSS custom properties are the token source. */
:root {
  color-scheme: light;
  --paper: oklch(96.1% .012 88);
  --paper-raised: oklch(98.4% .008 88);
  --ink: oklch(24% .015 75);
  --ink-muted: oklch(43% .017 75);
  --line-soft: oklch(82% .018 80);
  --line-strong: oklch(56% .02 75);
  --red: oklch(52% .17 31);
  --red-dark: oklch(43% .145 31);
  --red-pale: oklch(93% .026 45);
  --on-ink: oklch(96.1% .012 88);
  --on-ink-muted: oklch(81% .018 80);
  --background: var(--paper);
  --surface: var(--paper-raised);
  --foreground: var(--ink);
  --text-muted: var(--ink-muted);
  --border: var(--line-soft);
  --control-border: var(--line-strong);
  --primary: var(--red);
  --primary-hover: var(--red-dark);
  --accent-surface: var(--red-pale);
  --inverse: var(--ink);
  --on-inverse: var(--on-ink);
  --muted-inverse: var(--on-ink-muted);
  --ring: var(--red);
  --button-text: var(--paper-raised);
  --terminal: oklch(21% .012 75);
  --terminal-text: oklch(93% .01 88);
  --terminal-muted: oklch(76% .014 80);
  --terminal-accent: oklch(74% .13 40);
  --teal: oklch(42% .085 190);
  --teal-pale: oklch(93% .03 190);
  --ochre: oklch(46% .1 75);
  --ochre-pale: oklch(94% .04 85);
  --font-text: Arial, Helvetica, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius: .25rem;
  --duration: 140ms;
  --ease: ease-out;
  --page-width: 80rem;
}
/* Dark scheme: a rebuilt warm neutral scale (not an inversion) with a lighter vermilion.
   Every text pair keeps WCAG 2.2 AA; see SEO.md for the measured ratios. */
/* The dark values apply by system preference unless the page is pinned to light, and whenever it is
   pinned to dark (the header switch writes data-theme). The values are listed twice because a media query and an attribute selector cannot share a rule. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: oklch(18.5% .01 75);
    --paper-raised: oklch(22.5% .012 75);
    --ink: oklch(93% .012 88);
    --ink-muted: oklch(77% .016 80);
    --line-soft: oklch(34% .014 75);
    --line-strong: oklch(62% .018 78);
    --red: oklch(70% .15 36);
    --red-dark: oklch(76% .13 38);
    --red-pale: oklch(25.5% .03 40);
    --on-ink: oklch(93% .012 88);
    --on-ink-muted: oklch(77% .016 80);
    --inverse: oklch(13.5% .008 75);
    --button-text: oklch(17% .01 75);
    --terminal: oklch(13.5% .008 75);
    --teal: oklch(76% .1 185);
    --teal-pale: oklch(25% .03 190);
    --ochre: oklch(80% .11 80);
    --ochre-pale: oklch(26% .04 80);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: oklch(18.5% .01 75);
  --paper-raised: oklch(22.5% .012 75);
  --ink: oklch(93% .012 88);
  --ink-muted: oklch(77% .016 80);
  --line-soft: oklch(34% .014 75);
  --line-strong: oklch(62% .018 78);
  --red: oklch(70% .15 36);
  --red-dark: oklch(76% .13 38);
  --red-pale: oklch(25.5% .03 40);
  --on-ink: oklch(93% .012 88);
  --on-ink-muted: oklch(77% .016 80);
  --inverse: oklch(13.5% .008 75);
  --button-text: oklch(17% .01 75);
  --terminal: oklch(13.5% .008 75);
  --teal: oklch(76% .1 185);
  --teal-pale: oklch(25% .03 190);
  --ochre: oklch(80% .11 80);
  --ochre-pale: oklch(26% .04 80);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Layout breakpoints below the header are container queries in em: columns collapse when the text grows
   (browser text size, text-only zoom), not only when the window narrows. */
main { container-type: inline-size; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-text); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { color: var(--foreground); background: var(--accent-surface); }
button, input, select { font: inherit; }
a { color: inherit; text-underline-offset: .2em; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button[hidden] { display: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 5px var(--ring); border-radius: var(--radius); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
h2 { font-size: var(--text-3xl); line-height: 1.15; letter-spacing: -.04em; }
h2 > span { display: block; }
h3, h4 { line-height: 1.35; }
p { max-width: 66ch; }
section[id] { scroll-margin-block-start: var(--space-8); }
code, pre { font-family: var(--font-mono); }
code { font-weight: 500; overflow-wrap: anywhere; }
.wrap { width: min(var(--page-width), calc(100% - 3rem)); margin-inline: auto; }
.section { padding-block: var(--space-20); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -8rem; z-index: 20; padding: var(--space-3) var(--space-4); background: var(--surface); color: var(--foreground); }
.skip-link:focus { inset-block-start: var(--space-4); }
.site-header { display: flex; gap: var(--space-8); align-items: center; min-height: 5rem; border-bottom: 1px solid var(--border); }
.wordmark { display: inline-flex; align-items: baseline; text-decoration: none; font-size: var(--text-2xl); font-weight: 800; line-height: 1; letter-spacing: -.08em; min-height: 44px; padding-block: var(--space-2); }
.wordmark span { color: var(--primary); font-weight: 400; margin-inline-start: var(--space-1); font-size: var(--text-3xl); line-height: .6; }
.primary-nav { display: none; gap: var(--space-8); margin-inline-start: auto; }
.primary-nav a, .header-cta { display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-3); text-decoration: none; font-size: var(--text-sm); font-weight: 600; }
.primary-nav a:hover, .header-cta:hover, .footer-bottom a:hover { color: var(--primary); }
.github-link svg { flex: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-4); margin-inline-start: auto; }
.language-menu { position: relative; }
.language-menu > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); min-height: 44px; cursor: pointer; list-style: none; font-size: var(--text-sm); }
summary::-webkit-details-marker { display: none; }
.language-menu nav { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + .5rem); z-index: 5; min-width: 11rem; padding: var(--space-2); background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); }
.language-menu nav a { display: block; padding: var(--space-3) var(--space-4); text-decoration: none; }
.language-menu nav a:hover { background: var(--accent-surface); }
.language-menu a[aria-current] { text-decoration: underline; font-weight: 700; }
.eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }
.edition-mark { display: inline-grid; place-items: center; color: var(--primary); font-size: var(--text-xl); line-height: 1; }
h1 { font-size: clamp(2.5rem, 8vw, 6.5rem); line-height: 1.02; letter-spacing: -.065em; padding-block-end: var(--space-2); }
h1 > span { display: block; }
h1 > span:last-child { font-style: italic; color: var(--primary); letter-spacing: -.065em; }
.hero-lead { margin-top: var(--space-6); max-width: 45ch; font-size: var(--text-lg); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-4) var(--space-6); min-height: 56px; border: 1px solid var(--primary); border-radius: var(--radius); color: var(--button-text); background: var(--primary); font-size: var(--text-sm); font-weight: 700; text-decoration: none; transition: background-color var(--duration) var(--ease); }
.button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button > span { font-size: var(--text-lg); line-height: 1; }
.text-link { display: inline-flex; gap: var(--space-4); align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 600; text-decoration: underline; }
.hero-note { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); max-width: 52ch; }
.section-intro { display: grid; gap: var(--space-8); align-items: start; }
.section-intro p { color: var(--text-muted); }
.section-intro .annotation { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--foreground); }
.disclosure-mark { display: inline-block; position: relative; width: 1rem; height: 1rem; flex: 0 0 1rem; }
.disclosure-mark::before, .disclosure-mark::after { content: ''; position: absolute; inset-block-start: .5rem; inset-inline-start: 0; width: 1rem; height: 1px; background: currentColor; }
.disclosure-mark::after { transform: rotate(90deg); }
details[open] > summary .disclosure-mark::after { transform: none; }
/* Described transcript of a video: one item per shot, its start time, what is on screen and what is said. */
.described-list { list-style: none; margin: 0; padding: 0; }
.described-list li { padding-block: var(--space-3); border-block-start: 1px solid var(--border); }
.described-list li:first-child { border-block-start: 0; padding-block-start: 0; }
.described-list p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.described-list p + p { margin-block-start: var(--space-2); }
.described-list .described-time { font-family: var(--font-mono); font-weight: 600; color: var(--foreground); }
.described-label { font-weight: 600; color: var(--foreground); }
.packs-section { background: var(--accent-surface); border-block: 1px solid var(--border); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-12) 0; border-block: 1px solid var(--border); }
.facts > div { display: flex; flex-direction: column-reverse; padding-block: var(--space-6); padding-inline-end: var(--space-3); }
.facts > div + div { border-inline-start: 1px solid var(--border); padding-inline-start: var(--space-4); }
.facts dt { color: var(--text-muted); font-size: var(--text-xs); }
.facts dd { margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: -.04em; line-height: 1.3; }
.install-block { margin-top: var(--space-12); padding: var(--space-6); background: var(--inverse); color: var(--on-inverse); }
.command-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-xs); color: var(--muted-inverse); }
.command-heading strong { font-weight: 500; color: var(--on-inverse); }
.command-line { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.command-line code { font-size: var(--text-lg); line-height: 1.5; font-weight: 500; }
.copy-button { flex-shrink: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--muted-inverse); border-radius: var(--radius); color: var(--on-inverse); background: transparent; font-size: var(--text-sm); min-width: 8rem; }
.copy-button:hover { color: var(--inverse); background: var(--on-inverse); }
.copy-status { min-height: 1.5em; font-size: var(--text-xs); margin-top: var(--space-2); color: var(--muted-inverse); }
.prerequisite { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-4); }
.start-steps { list-style: none; padding: 0; margin: var(--space-12) 0; display: grid; gap: var(--space-8); }
.start-steps li { display: flex; gap: var(--space-6); }
.start-steps li > span { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--primary); line-height: 1.2; }
.start-steps h3 { font-size: var(--text-base); }
.start-steps p { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }
.update-note { display: grid; gap: var(--space-6); border-block: 1px solid var(--border); padding-block: var(--space-8); }
.update-note h3 { font-size: var(--text-lg); max-width: 28ch; }
.update-note p { font-size: var(--text-sm); color: var(--text-muted); }
.update-note code { display: block; margin-top: var(--space-4); font-size: var(--text-sm); }
.update-note .text-link { margin-top: var(--space-3); }
.faq-section { display: grid; gap: var(--space-8); padding-top: 0; }
.faq-section > h2 { max-width: 15ch; }
.faq-list details { border-top: 1px solid var(--border); }
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); font-weight: 600; padding-block: var(--space-6); list-style: none; cursor: pointer; line-height: 1.5; }
.faq-list p { color: var(--text-muted); font-size: var(--text-sm); padding-block-end: var(--space-6); padding-inline-end: var(--space-8); }
.button-light { color: var(--foreground); background: var(--surface); border-color: var(--surface); }
.button-light:hover { background: var(--background); border-color: var(--background); }
.button-light:focus-visible { box-shadow: 0 0 0 2px var(--primary), 0 0 0 5px var(--surface); }
.site-footer { padding-block: var(--space-12) var(--space-8); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--border); }
.footer-top > p { color: var(--text-muted); font-size: var(--text-sm); }
.footer-top > a:last-child { margin-inline-start: auto; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); padding-top: var(--space-6); color: var(--text-muted); font-size: var(--text-xs); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a[aria-current] { font-weight: 700; color: var(--foreground); }
@media (min-width: 768px) {
  .wrap { width: min(var(--page-width), calc(100% - 6rem)); }
  .primary-nav { display: flex; }
  .header-actions { margin-inline-start: var(--space-6); gap: var(--space-6); }
}
@container (min-width: 48em) {
  h1 { font-size: clamp(3rem, 5.6vw, 6.5rem); }
  .section-intro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-16); }
  .facts dd { font-size: var(--text-5xl); }
  .facts > div { padding-block: var(--space-6); }
  .facts > div + div { padding-inline-start: var(--space-8); }
  .start-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .start-steps li { display: block; }
  .start-steps li > span { display: block; margin-bottom: var(--space-4); }
  .install-block { padding: var(--space-8); }
  .command-line code { font-size: var(--text-xl); }
  .update-note { grid-template-columns: 1fr 1.5fr; gap: var(--space-16); }
  .faq-section { grid-template-columns: 1fr 1.5fr; gap: var(--space-16); }
}
@container (min-width: 64em) {
  .section { padding-block: var(--space-24); }
  .hero-lead { font-size: var(--text-lg); }
  h2 { font-size: var(--text-4xl); }
  .faq-section { padding-top: 0; }
}
@media (max-width: 767px) {
  .header-cta { font-size: var(--text-xs); gap: var(--space-2); }
  .site-header { gap: var(--space-3); }
  .header-actions { gap: var(--space-2); }
  .hero-lead { font-size: var(--text-base); }
  .footer-top > p { flex-basis: calc(100% - 9rem); }
  .footer-top > a:last-child { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid CanvasText; }
  .button, .copy-button, .language-menu nav { border: 1px solid ButtonText; }
}

/* The documentation is a reading surface: shared type, colors and spacing, no added motion. */
.site-header { flex-wrap: wrap; }
.primary-nav { display: flex; flex-wrap: wrap; order: 3; width: 100%; gap: 0 var(--space-6); padding-block-end: var(--space-2); margin-inline-start: 0; }
.primary-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
.docs-guide-link { margin-block-start: var(--space-3); }
.update-note .text-link { margin-inline-end: var(--space-6); }
.docs-intro { padding-block: var(--space-12); max-width: 58rem; }
.docs-intro h1 { font-size: var(--text-3xl); line-height: 1.12; letter-spacing: -.04em; overflow-wrap: anywhere; }
.docs-intro .hero-lead { max-width: 62ch; }
.docs-meta { margin-block-start: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }
.docs-meta strong { color: var(--foreground); }
.docs-layout { display: grid; gap: var(--space-12); padding-block-end: var(--space-16); }
.docs-toc { border-block: 1px solid var(--border); padding-block: var(--space-6); align-self: start; }
.docs-toc > p { font-size: var(--text-sm); font-weight: 700; }
.docs-toc ol { list-style: none; margin: var(--space-3) 0; padding: 0; }
.docs-toc li > a { display: flex; align-items: center; min-height: 44px; padding-block: var(--space-2); font-size: var(--text-sm); }
.docs-toc a:hover { color: var(--primary); }
.docs-toc .text-link { font-size: var(--text-xs); }
.docs-body { min-width: 0; max-width: 51rem; }
.docs-body h2 { font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -.035em; }
.docs-body h3 { font-size: var(--text-lg); }
.docs-body p { overflow-wrap: anywhere; }
.doc-section { padding-block: var(--space-12); border-block-start: 1px solid var(--border); }
.doc-section:first-child { padding-block-start: 0; border: 0; }
.doc-section > p { margin-block-start: var(--space-4); color: var(--text-muted); }
.doc-steps { list-style: none; padding: 0; margin: 0; }
.doc-steps > li, .doc-example, .doc-update { margin-block-start: var(--space-10); }
.doc-step-heading { display: flex; align-items: baseline; gap: var(--space-4); }
.doc-step-heading > span { color: var(--primary); font-family: var(--font-display); font-size: var(--text-xl); }
.doc-steps li > p, .doc-example > p, .doc-update > p, .doc-release > p, .doc-news > p { margin-block-start: var(--space-3); }
.doc-code { min-width: 0; padding: var(--space-4); margin-block-start: var(--space-4); background: var(--inverse); color: var(--on-inverse); border: 1px solid var(--inverse); }
.doc-code .command-heading { align-items: center; }
.doc-code .copy-button { min-width: auto; }
.doc-code pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--space-4) 0 0; }
.doc-code code { font-size: var(--text-base); line-height: 1.65; font-weight: 500; }
.doc-code-assistant { background: var(--surface); color: var(--foreground); border-color: var(--border); }
.doc-code-assistant .command-heading, .doc-code-assistant .copy-status { color: var(--text-muted); }
.doc-code-assistant .copy-button { color: var(--foreground); border-color: var(--control-border); }
.doc-code-assistant .copy-button:hover { background: var(--accent-surface); }
.doc-result { font-size: var(--text-sm); color: var(--text-muted); }
.doc-notes, .doc-release ul { padding-inline-start: var(--space-6); margin-block: var(--space-6); max-width: 66ch; }
.doc-notes li, .doc-release li { margin-block-start: var(--space-3); }
.doc-details { border-block-start: 1px solid var(--border); margin-block-start: var(--space-6); }
.doc-details > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); list-style: none; padding-block: var(--space-4); min-height: 44px; font-weight: 600; cursor: pointer; }
.doc-details > div { padding-block-end: var(--space-4); }
.doc-details > div > p { font-size: var(--text-sm); color: var(--text-muted); }
.doc-news { margin-block-start: var(--space-6); padding: var(--space-6); border-inline-start: 2px solid var(--primary); background: var(--accent-surface); }
.doc-news h3, .doc-release h3 { margin-block-start: var(--space-3); }
.doc-news .text-link { margin-block-start: var(--space-3); }
.release-date { font-size: var(--text-sm); color: var(--text-muted); }
.doc-release { border-block-start: 1px solid var(--border); padding-block-start: var(--space-8); margin-block-start: var(--space-8); }
.docs-body [id], .docs-intro[id] { scroll-margin-block-start: var(--space-6); }
.docs-body .faq-list { margin-block-start: var(--space-6); }
@container (min-width: 44em) {
  .docs-intro { padding-block: var(--space-16); }
  .docs-intro h1 { font-size: var(--text-5xl); }
  .docs-body h2 { font-size: var(--text-3xl); }
  .doc-code { padding: var(--space-6); }
}
@media (min-width: 1024px) {
  .site-header { flex-wrap: nowrap; }
  .primary-nav { width: auto; order: initial; padding: 0; margin-inline-start: auto; }
}
@container (min-width: 58em) {
  .docs-layout { grid-template-columns: minmax(12rem, .65fr) minmax(0, 2fr); gap: var(--space-16); }
  .docs-toc { position: sticky; top: var(--space-6); max-height: calc(100vh - 3rem); overflow-y: auto; padding: 0 var(--space-6) 0 0; border-block: 0; border-inline-end: 1px solid var(--border); }
}

/* Hero: the pinned install command, build-time release facts and a real installer transcript. */
.hero-kicker { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-6); max-width: 46ch; font-family: var(--font-text); font-size: var(--text-sm); font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--text-muted); text-wrap: pretty; }
.hero-kicker .edition-mark { flex: none; }
.trust-line { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
.pack-note { font-size: var(--text-xs); border-inline-start: 2px solid var(--primary); padding-inline-start: var(--space-3); }
.footer-legal { display: grid; gap: var(--space-2); max-width: 64ch; }
.footer-legal a { display: inline; min-height: 0; text-decoration: underline; }
.doc-advanced > div > :first-child { margin-block-start: var(--space-4); }

/* Mobile header: primary links fold into a native disclosure (works without JavaScript). */
.site-menu { position: relative; }
.site-menu > summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; list-style: none; }
.menu-icon { display: block; position: relative; width: 1.125rem; height: .875rem; border-block: 2px solid currentColor; }
.menu-icon::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: calc(50% - 1px); border-block-start: 2px solid currentColor; }
.site-menu nav { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + .5rem); z-index: 5; display: grid; min-width: 13rem; padding: var(--space-2); background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); }
.site-menu nav a { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-4); text-decoration: none; font-size: var(--text-sm); font-weight: 600; }
.site-menu nav a:hover { background: var(--accent-surface); }
.site-menu nav a[aria-current] { text-decoration: underline; }
@media (max-width: 767px) {
  .primary-nav { display: none; }
  .site-header { flex-wrap: nowrap; }
  .header-actions { gap: 0; }
  .header-cta { padding-inline-start: var(--space-2); }
}
@media (min-width: 768px) {
  .site-menu { display: none; }
}
@media (forced-colors: active) {
  .site-menu nav { border: 1px solid CanvasText; }
}

/* Theme switch (all pages): hidden until site.js can store the choice. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: inherit; background: transparent; border: 0; border-radius: var(--radius); }
.theme-toggle[hidden] { display: none; }
.theme-icon { display: block; width: 1.05rem; height: 1.05rem; border: 2px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.theme-toggle:hover { color: var(--primary); }
/* On the narrowest phones the header keeps wordmark, menu, language and theme; the page has its own install button. */
@media (max-width: 399px) { .header-cta { display: none; } }

/* BMAD+ landing. Identity: a drafting table. Warm paper, ink hairlines, registration marks, a vermilion
   working color and two signal colors with fixed meanings: teal = verified or real, ochre = simulated or
   open. Layered on the shared tokens in styles.css (light, dark and [data-theme]). Motion is transform and
   opacity only and is absent under prefers-reduced-motion. */
:root {
  --step--1: clamp(.78rem, .76rem + .1vw, .85rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --step-3: clamp(1.85rem, 1.4rem + 2.2vw, 3.25rem);
  --step-4: clamp(2.3rem, 1.5rem + 4vw, 5rem);
  --step-hero: clamp(3.1rem, 1.2rem + 9vw, 9.25rem);
  --on-dark-teal: oklch(80% .1 180);
  --on-dark-ochre: oklch(83% .11 82);
  --shadow: 0 1px 0 oklch(0% 0 0 / .04), 0 12px 32px -16px oklch(0% 0 0 / .28);
  --measure: 62ch;
}
body { overflow-x: clip; }
.landing-anchor, main > section[id] { scroll-margin-block-start: 1rem; }
code { font-size: .92em; }
input:focus-visible, [tabindex]:focus-visible, .chip:focus-visible, .tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 5px var(--ring); border-radius: var(--radius); }

/* Section scaffolding ------------------------------------------------------------------ */
.section-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-12); align-items: end; }
.section-num { font-family: var(--font-display); font-style: italic; font-size: var(--step-4); line-height: .8; color: var(--line-strong); letter-spacing: -.06em; }
.eyebrow { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.section-head h2 { font-size: var(--step-3); line-height: 1.04; letter-spacing: -.045em; max-width: 18ch; }
.section-head h2 > span:last-child { font-style: italic; color: var(--primary); }
.section-lead { color: var(--text-muted); font-size: var(--step-0); max-width: var(--measure); }
.tag { display: inline-flex; align-items: center; gap: .35em; padding: .1rem .55rem; border: 1px solid currentColor; border-radius: 99px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.7; }
.tag-real { color: var(--teal); background: var(--teal-pale); }
.tag-sim { color: var(--ochre); background: var(--ochre-pale); border-style: dashed; }
.tag-note { font-size: var(--text-xs); color: var(--text-muted); }
.edition-mark { color: var(--primary); }

/* Hero ---------------------------------------------------------------------------------- */
.hero2 { position: relative; isolation: isolate; padding-block: var(--space-10) var(--space-8); border-bottom: 1px solid var(--border); }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.hero-rails { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.rails-grid line { stroke: var(--border); stroke-width: 1; }
.rail { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 7; opacity: .55; }
.packet { fill: var(--primary); opacity: .4; transform: translateX(var(--x, 300px)); will-change: transform; }
.packet-late { fill: var(--teal); opacity: .8; }
.gate-line { stroke: var(--teal); stroke-width: 1; opacity: .5; }
.gate-node { fill: var(--background); stroke: var(--teal); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.packet-1 { --x: 180px; } .packet-2 { --x: 520px; } .packet-3 { --x: 340px; } .packet-4 { --x: 760px; } .packet-5 { --x: 90px; } .packet-6 { --x: 610px; }
.packet-late.packet-1 { --x: 700px; } .packet-late.packet-2 { --x: 60px; } .packet-late.packet-3 { --x: 880px; } .packet-late.packet-4 { --x: 300px; } .packet-late.packet-5 { --x: 560px; } .packet-late.packet-6 { --x: 20px; }
@keyframes packet-run { from { transform: translateX(-90px); } to { transform: translateX(1080px); } }
@keyframes node-pulse { 0%, 82%, 100% { transform: scale(1); } 90% { transform: scale(1.5); } }
@media (prefers-reduced-motion: no-preference) {
  .packet { animation: packet-run 14s linear infinite; }
  .packet-2 { animation-duration: 11s; animation-delay: -3s; } .packet-3 { animation-duration: 16s; animation-delay: -7s; }
  .packet-4 { animation-duration: 12s; animation-delay: -5s; } .packet-5 { animation-duration: 15s; animation-delay: -9s; } .packet-6 { animation-duration: 13s; animation-delay: -2s; }
  .packet-late { animation-duration: 19s; animation-delay: -11s; }
  .packet-late.packet-3, .packet-late.packet-5 { animation-delay: -4s; }
  .gate-node { animation: node-pulse 7s ease-in-out infinite; }
  .gate-2 { animation-delay: -1s; } .gate-3 { animation-delay: -2s; } .gate-4 { animation-delay: -3s; } .gate-5 { animation-delay: -4s; } .gate-6 { animation-delay: -5s; }
}
.motion-control { margin-top: var(--space-4); }
.motion-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-3); background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 99px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .02em; }
.motion-toggle:hover { color: var(--foreground); border-color: var(--control-border); }
.motion-toggle::before { content: ''; flex: none; box-sizing: border-box; width: .6rem; height: .7rem; border-inline: .2rem solid currentColor; }
.motion-toggle[aria-pressed="true"]::before { width: 0; height: 0; border: .35rem solid transparent; border-inline-start: .6rem solid currentColor; border-inline-end: 0; }
.motion-paused .packet, .motion-paused .gate-node { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .motion-control { display: none; } }
.hero2-grid { display: grid; gap: var(--space-10); align-items: center; }
.hero2 .hero-kicker { margin-bottom: var(--space-6); }
.hero2 h1 { font-size: var(--step-hero); line-height: .92; letter-spacing: -.06em; padding: 0; }
.hero2 h1 > span:last-child { color: var(--primary); }
.hero2 .hero-lead { max-width: 46ch; font-size: var(--step-1); line-height: 1.5; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-top: var(--space-8); }
.button { text-decoration: none; }
.button-ghost { color: var(--foreground); background: transparent; border-color: var(--control-border); }
.button-ghost:hover { color: var(--button-text); }
.hero2 .install-block { max-width: 36rem; margin-top: var(--space-6); padding: var(--space-4) var(--space-6) var(--space-2); }
.hero2 .command-line { margin-top: var(--space-2); }
.hero2 .command-line code { font-size: var(--text-base); }
.hero2 .trust-line { margin-top: var(--space-4); }
.hero-side { min-width: 0; }
.side-label { margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.hero-route { padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.hero-route ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.hero-route li + li { border-top: 1px solid var(--border); }
.hero-route a { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--space-3); align-items: baseline; padding-block: var(--space-4); text-decoration: none; font-size: var(--step-0); }
.hero-route a:hover { color: var(--primary); }
.route-num { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--primary); line-height: 1; }
.facts-strip { margin-top: var(--space-10); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts-strip > div { padding-inline: var(--space-3); }
.facts-strip > div:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
.facts-strip > div:nth-child(n+3) { border-block-start: 1px solid var(--border); }
.facts-strip dd { font-size: var(--step-3); }

/* Player ------------------------------------------------------------------------------- */
.player { margin: 0; }
.player-frame { aspect-ratio: 16 / 9; background: oklch(12% .01 75); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.player-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: oklch(12% .01 75); }
.player figcaption { padding-top: var(--space-4); }
.player-title { font-size: var(--step-1); font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; }
.player-meta { margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted); }
.player-summary { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }
.transcript, .described { margin-top: var(--space-3); border-top: 1px solid var(--border); }
.described > div { padding-block-end: var(--space-4); }
.transcript summary, .described summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: 600; }
.transcript > div { padding-block-end: var(--space-4); max-height: 18rem; overflow-y: auto; }
.transcript p { font-size: var(--text-sm); color: var(--text-muted); margin-block-start: var(--space-3); }
.video-grid { display: grid; gap: var(--space-10); }

/* Story --------------------------------------------------------------------------------- */
.story-legend { margin: calc(var(--space-6) * -1) 0 var(--space-10); font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted); }
.story-layout { display: grid; gap: var(--space-8); }
.story-rail { display: none; }
.story-rail ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--border); }
.story-rail a { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-2); align-items: baseline; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); margin-inline-start: -1px; border-inline-start: 2px solid transparent; text-decoration: none; font-size: var(--text-sm); color: var(--text-muted); transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.story-rail a.is-active { color: var(--foreground); border-inline-start-color: var(--primary); font-weight: 600; }
.rail-num { font-family: var(--font-mono); font-size: var(--step--1); }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapter { display: grid; gap: var(--space-6); padding-block: var(--space-10); border-top: 1px solid var(--border); }
.chapter:first-child { border-top: 0; padding-top: 0; }
.chapter-num { font-family: var(--font-display); font-style: italic; font-size: var(--step-4); line-height: .9; color: var(--primary); letter-spacing: -.06em; margin-bottom: var(--space-3); }
.chapter h3 { font-size: var(--step-2); font-family: var(--font-display); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; max-width: 20ch; }
.chapter-text > p { margin-top: var(--space-4); color: var(--text-muted); }
.points { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.points li { position: relative; padding-inline-start: var(--space-6); }
.points li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .6em; width: .9rem; height: 1px; background: var(--primary); }
.chapter-text .text-link { margin-top: var(--space-3); }
.chapter-demo { display: grid; gap: var(--space-4); min-width: 0; align-content: start; }
.demo-card { margin: 0; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.demo-card > :last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.demo-card figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.demo-title { margin-inline-start: auto; font-size: var(--text-xs); color: var(--text-muted); }
.term { margin: 0; padding: var(--space-4); overflow-x: auto; background: var(--terminal); color: var(--terminal-text); font-size: .8rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.term code { font-weight: 400; overflow-wrap: normal; font-size: 1em; }
.tl { display: block; min-height: 1.65em; }
.tl-prompt { color: var(--terminal-accent); }
.tl-cmd { color: oklch(96% .01 88); padding-inline-start: 2ch; text-indent: -2ch; }
.tl-dim { color: var(--terminal-muted); }
.tl-ok { color: var(--on-dark-teal); }
.tl-warn { color: var(--on-dark-ochre); }
@keyframes line-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.motion .term:not(.is-live) .tl { opacity: 0; }
.motion .term.is-live .tl { animation: line-in .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.chat { list-style: none; margin: 0; padding: var(--space-4); display: grid; gap: var(--space-3); }
.msg { max-width: 92%; padding: var(--space-3) var(--space-4); border-radius: .75rem; font-size: var(--text-sm); }
.msg p { max-width: none; }
.msg-who { display: block; margin-bottom: var(--space-1); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.msg-you { justify-self: end; background: var(--accent-surface); border-end-end-radius: .2rem; }
.msg-agent { justify-self: start; background: var(--background); border: 1px solid var(--border); border-end-start-radius: .2rem; }
.verdicts, .memfiles { padding: var(--space-4); background: var(--surface); border: 1px dashed var(--control-border); border-radius: var(--radius); }
.verdicts-title { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-3); }
.verdicts ul, .memfiles ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.verdicts li { display: inline-flex; gap: var(--space-2); align-items: baseline; font-size: var(--text-sm); }
.verdicts li span { color: var(--text-muted); font-size: var(--text-xs); }
.meter { display: flex; flex-wrap: wrap; gap: 4px; padding: var(--space-4) var(--space-4) var(--space-2); }
.cell { width: 14px; height: 14px; border-radius: 2px; background: var(--teal); }
.cell.over { background: repeating-linear-gradient(135deg, var(--ochre) 0 3px, transparent 3px 6px); border: 1px solid var(--ochre); }
.meter-text { padding: 0 var(--space-4) var(--space-4); font-size: var(--text-sm); color: var(--text-muted); max-width: none; }
.meter-text strong { color: var(--foreground); }

/* Packs --------------------------------------------------------------------------------- */
.packs-section { background: var(--accent-surface); border-block: 1px solid var(--border); }
.packs-ui { display: grid; gap: var(--space-4); }
.pack-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow); }
.pack-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.pack-head h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); letter-spacing: -.045em; line-height: 1; }
.badge { padding: .1rem .6rem; border: 1px solid var(--control-border); border-radius: 99px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.badge-accent { color: var(--button-text); background: var(--primary); border-color: var(--primary); }
.pack-grid { display: grid; gap: var(--space-8); }
.pack-what { font-size: var(--step-0); max-width: var(--measure); }
.pack-main h4, .pack-side h4 { margin: var(--space-6) 0 var(--space-2); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.pack-side h4:first-child { margin-top: 0; }
.pack-note, .pack-co, .pack-needs { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.pack-intake { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--accent-surface); border-inline-start: 3px solid var(--primary); font-size: var(--text-sm); max-width: none; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips a, .chips-code code, .chip-note { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: 99px; font-size: var(--text-sm); text-decoration: none; background: var(--background); }
.chips a:hover { border-color: var(--primary); color: var(--primary); }
.chip-note { border-style: dashed; color: var(--text-muted); }
.chips-code code { font-size: var(--text-xs); }
.pack-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2) var(--space-6); margin: var(--space-4) 0 0; }
.pack-categories > div { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-1); border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.pack-categories dd { margin: 0; font-family: var(--font-mono); color: var(--primary); }
.callout { margin-top: var(--space-8); padding: var(--space-6); background: var(--inverse); color: var(--on-inverse); border-radius: var(--radius); display: grid; gap: var(--space-3); max-width: 52rem; }
.callout-title { font-family: var(--font-display); font-size: var(--step-2); letter-spacing: -.03em; }
.callout p { color: var(--muted-inverse); }
.callout .callout-title { color: var(--on-inverse); }
.callout a { color: var(--on-inverse); }
.tab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.tab { display: grid; gap: .1rem; text-align: start; padding: var(--space-3) var(--space-4); min-height: 56px; background: var(--surface); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.tab:hover { border-color: var(--primary); transform: translateY(-2px); }
.tab-name { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: -.03em; }
.tab-meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; }
.tab[aria-selected="true"] { background: var(--inverse); color: var(--on-inverse); border-color: var(--inverse); box-shadow: inset 0 -3px 0 var(--primary); }
.tab[aria-selected="true"] .tab-meta { color: var(--muted-inverse); }
.tab.is-accent:not([aria-selected="true"]) { border-color: var(--primary); }
[data-tabs-ready] .pack-panel[hidden] { display: none; }
[data-tabs-ready] .pack-panel { scroll-margin-block-start: 6rem; }

/* Roster -------------------------------------------------------------------------------- */
.roster-tools { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.roster-tools[hidden] { display: none; }
.search-field { display: grid; gap: var(--space-1); max-width: 28rem; }
.search-field label { font-size: var(--text-sm); font-weight: 600; }
.search-field input { min-height: 48px; padding: 0 var(--space-4); background: var(--surface); color: var(--foreground); border: 1px solid var(--control-border); border-radius: var(--radius); }
.chips-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; gap: .4em; align-items: center; min-height: 40px; padding: 0 var(--space-4); background: var(--surface); color: var(--foreground); border: 1px solid var(--control-border); border-radius: 99px; font-size: var(--text-sm); }
.chip span { font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); }
.chip[aria-pressed="true"] { background: var(--inverse); color: var(--on-inverse); border-color: var(--inverse); }
.chip[aria-pressed="true"] span { color: var(--muted-inverse); }
.roster-count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted); }
.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.agent { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.agent[hidden] { display: none; }
.agent-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.agent h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); letter-spacing: -.03em; }
.agent-pack { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.agent-role { color: var(--primary); font-size: var(--text-xs); font-weight: 700; }
.agent-does { color: var(--text-muted); font-size: var(--text-sm); flex: 1; }
.agent-tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.agent-tags span { padding: 0 .5rem; border: 1px solid var(--border); border-radius: 99px; }
.agent-ask { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--terminal); color: var(--terminal-text); border-radius: var(--radius); }
.agent-ask code { flex: 1; font-size: var(--text-xs); font-weight: 400; line-height: 1.5; }
.copy-mini { flex: none; min-height: 28px; padding: 0 var(--space-2); color: var(--terminal-text); background: transparent; border: 1px solid var(--terminal-muted); border-radius: var(--radius); font-size: .7rem; }
.copy-mini:hover { color: var(--terminal); background: var(--terminal-text); }
.agent-specialist { padding: var(--space-3); gap: var(--space-1); }
@container (max-width: 39.9375em) {
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent:not(.agent-specialist) { grid-column: 1 / -1; }
  .agent-specialist .agent-ask code { display: none; }
  .agent-specialist .agent-ask { padding: 0; background: none; }
  .agent-specialist .copy-mini { width: 100%; color: var(--foreground); border-color: var(--control-border); min-height: 36px; }
  .agent-specialist .copy-mini:hover { color: var(--button-text); background: var(--primary); }
  .agent-specialist .agent-head { flex-direction: column; gap: 0; }
}
.roster-empty, .roster-note { margin-top: var(--space-6); color: var(--text-muted); font-size: var(--text-sm); }
.roster-section .text-link { margin-top: var(--space-2); }

/* Ask first ----------------------------------------------------------------------------- */
.ask-section { background: var(--inverse); color: var(--on-inverse); border-block: 1px solid var(--inverse); }
.ask-section .section-num { color: oklch(66% .014 75); }
.ask-section .demo-title { color: var(--muted-inverse); }
.ask-section .eyebrow, .ask-section .section-lead, .ask-section .ask-card > p { color: var(--muted-inverse); }
.ask-section h2 > span:last-child { color: var(--terminal-accent); }
.ask-section a { color: var(--on-inverse); }
.ask-grid { display: grid; gap: var(--space-6); }
.ask-card { padding: var(--space-6); border: 1px solid oklch(100% 0 0 / .16); border-radius: var(--radius); background: oklch(100% 0 0 / .03); display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.ask-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); letter-spacing: -.035em; line-height: 1.1; color: var(--on-inverse); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.flow li, .statuses li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); align-items: baseline; }
.flow-num { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--terminal-accent); }
.flow-name { font-weight: 700; color: var(--on-inverse); font-size: var(--text-sm); }
.flow li p:not(.flow-name), .statuses p:not(.flow-name), .kinds p:not(.flow-name) { color: var(--muted-inverse); font-size: var(--text-sm); }
.statuses { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid oklch(100% 0 0 / .16); display: grid; gap: var(--space-3); }
.statuses li { grid-template-columns: 6.5rem 1fr; }
.statuses code { color: var(--on-dark-teal); }
.statuses li:nth-child(2) code { color: var(--on-dark-ochre); }
.statuses li:nth-child(3) code { color: var(--on-inverse); }
.kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.kinds li { padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--terminal-accent); }
.ask-section .demo-card { background: oklch(100% 0 0 / .05); border-color: oklch(100% 0 0 / .16); box-shadow: none; }
.ask-section .demo-card figcaption { border-color: oklch(100% 0 0 / .16); }
.ask-section .tag-sim { color: var(--on-dark-ochre); background: transparent; }
.ask-section .tag-note, .ask-section .meter-text { color: var(--muted-inverse); }
.ask-section .meter-text strong { color: var(--on-inverse); }
.ask-section .cell { background: var(--on-dark-teal); }
.ask-section .cell.over { background: repeating-linear-gradient(135deg, var(--on-dark-ochre) 0 3px, transparent 3px 6px); border-color: var(--on-dark-ochre); }
.limits { font-size: var(--text-sm); color: var(--muted-inverse); }
.honesty { margin: var(--space-8) 0 0; padding: var(--space-6); border: 1px dashed var(--on-dark-ochre); border-radius: var(--radius); display: grid; gap: var(--space-3); max-width: 58rem; }
.honesty-title { font-family: var(--font-display); font-size: var(--step-2); color: var(--on-dark-ochre); letter-spacing: -.03em; }
.honesty p { color: var(--muted-inverse); max-width: none; }
.honesty .honesty-quote { color: var(--on-inverse); font-family: var(--font-mono); font-size: var(--text-sm); }
.honesty footer { font-size: var(--text-xs); color: var(--muted-inverse); }
.ask-links { margin-top: var(--space-6); }

/* CLI ----------------------------------------------------------------------------------- */
.cli-groups { display: grid; gap: var(--space-10) var(--space-12); margin-bottom: var(--space-10); grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.cli-group h3 { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; padding-bottom: var(--space-2); border-bottom: 1px solid var(--foreground); }
.cli-group ul { list-style: none; margin: 0; padding: 0; }
.cli-row { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.cli-name code { font-size: var(--step-1); font-weight: 700; letter-spacing: -.02em; }
.cli-alias { margin-inline-start: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.cli-alias code { font-size: inherit; font-weight: 400; letter-spacing: 0; }
.cli-purpose { color: var(--text-muted); font-size: var(--text-sm); }

/* Copy line (commands and prompts shared by packs and the CLI table) --------------------- */
.copyline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); background: var(--terminal); color: var(--terminal-text); border-radius: var(--radius); min-width: 0; }
.copyline code { flex: 1 1 14rem; min-width: 0; font-size: var(--text-xs); line-height: 1.6; font-weight: 400; overflow-wrap: anywhere; }
.copy-compact { min-width: auto; min-height: 32px; padding: 0 var(--space-3); color: var(--terminal-text); border-color: var(--terminal-muted); font-size: var(--text-xs); }
.copy-compact:hover { color: var(--terminal); background: var(--terminal-text); }
.copyline .copy-status { flex-basis: 100%; margin: 0; min-height: 0; color: var(--terminal-muted); }
.copyline .copy-status:empty { display: none; }

/* Tools and trust ----------------------------------------------------------------------- */
.adapters { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.adapter { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.adapter h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); letter-spacing: -.03em; }
.adapter dl { margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.adapter dl > div { display: grid; gap: .1rem; }
.adapter dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.adapter dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.adapter-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.notes { margin: var(--space-8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); max-width: 60rem; }
.notes li { padding-inline-start: var(--space-6); position: relative; color: var(--text-muted); }
.notes li::before { content: '+'; position: absolute; inset-inline-start: 0; color: var(--primary); font-weight: 700; }
.langs { margin-top: var(--space-6); color: var(--text-muted); font-size: var(--text-sm); max-width: 62ch; }
.langs strong { color: var(--foreground); }
.trust-section { background: var(--surface); border-block: 1px solid var(--border); }
.trust-grid { display: grid; gap: var(--space-4); }
.trust-card { padding: var(--space-6); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: var(--space-3); align-content: start; }
.trust-card h3, .flows h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); letter-spacing: -.035em; line-height: 1.1; }
.trust-card > p, .flows > p { color: var(--text-muted); font-size: var(--text-sm); }
.trust-card .copyline { margin-top: var(--space-2); }
.flows { margin-top: var(--space-10); display: grid; gap: var(--space-4); }
.flow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.flow-item { min-width: 0; padding: var(--space-4); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); overflow-wrap: anywhere; }
.flow-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); }
.flow-top > * { min-width: 0; }
.flow-top h4 { font-size: var(--text-base); }
.flow-item p { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.tag-basis { color: var(--foreground); background: transparent; }
.tag-opt-out { color: var(--ochre); }
.tag-opt-in, .tag-credential { color: var(--teal); }
.basis-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }

/* Start --------------------------------------------------------------------------------- */
.start-section { background: var(--accent-surface); border-top: 1px solid var(--border); }
.start-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); }
.start-head h2 { font-size: var(--step-4); line-height: .98; letter-spacing: -.055em; max-width: 14ch; }
.start-head h2 > span:last-child { font-style: italic; color: var(--primary); }
.start-head p { color: var(--text-muted); max-width: var(--measure); }
.start-section .install-block { margin-top: 0; }
.start-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.faq-section { padding-top: var(--space-20); }

@container (min-width: 40em) {
  .tab-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts-strip > div:nth-child(odd) { border-inline-start: 1px solid var(--border); padding-inline-start: var(--space-4); }
  .facts-strip > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .facts-strip > div:nth-child(n+3) { border-block-start: 0; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 48em) {
  .section-head { grid-template-columns: 8rem minmax(0, 1fr); }
  .section-head .section-lead { grid-column: 2; }
  .pack-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .ask-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cli-row { grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--space-6); }
  .cli-row .copyline { grid-column: 2; }
  .chapter { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); }
  .chapter-text { position: sticky; inset-block-start: var(--space-8); align-self: start; }
  .hero2 { padding-block: var(--space-16) var(--space-10); }
}
@container (min-width: 64em) {
  .hero2-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-12); }
  .tab-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .story-layout { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-10); }
  .story-rail { display: block; position: sticky; inset-block-start: var(--space-8); align-self: start; }
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .section-head { grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr); }
  .section-head .section-lead { grid-column: auto; }
}
@media (max-width: 1279px) {
  .primary-nav .github-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}

/* Scroll-linked reveal: native scroll-driven animation where supported, an observer elsewhere. */
@keyframes reveal-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 4% cover 24%; }
  }
  .io-reveal .reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .io-reveal .reveal:not(.is-in) { opacity: 0; transform: translateY(28px); }
}

@media (forced-colors: active) {
  .tag, .badge, .chip, .tab, .agent, .demo-card, .pack-panel, .motion-toggle { border: 1px solid CanvasText; }
  /* A selected tab or pressed chip is a filled state; keyboard focus is an outline set off from the box,
     so a focused unselected control never looks like a selected one. */
  .tab[aria-selected="true"], .chip[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; box-shadow: none; }
  .tab[aria-selected="true"] .tab-meta, .chip[aria-pressed="true"] span { color: HighlightText; }
  input:focus-visible, [tabindex]:focus-visible, .chip:focus-visible, .tab:focus-visible, .copy-mini:focus-visible, .copy-compact:focus-visible, .motion-toggle:focus-visible, video:focus-visible { outline: 2px solid CanvasText; outline-offset: 3px; box-shadow: none; }
}

/* Print: a readable document, no motion, no controls, expanded content. */
@media print {
  :root { color-scheme: light; --background: #fff; --surface: #fff; --foreground: #000; --text-muted: #333; --border: #999; --inverse: #fff; --on-inverse: #000; --muted-inverse: #333; --terminal: #fff; --terminal-text: #000; --terminal-muted: #444; }
  body { background: #fff; color: #000; }
  .hero-bg, .site-header .header-actions, .primary-nav, .story-rail, .copy-button, .copy-mini, .roster-tools, .player, .skip-link, .theme-toggle, .motion-control { display: none !important; }
  .pack-panel, .agent, .demo-card, .chapter { break-inside: avoid; }
  [data-tabs-ready] .pack-panel[hidden] { display: block; }
  .ask-section, .callout { background: #fff; color: #000; border: 1px solid #000; }
  .ask-section *, .callout * { color: #000 !important; }
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .term { white-space: pre-wrap; border: 1px solid #999; }
}
@media print { .tl { opacity: 1 !important; animation: none !important; } }