/* Thalia — usethalia.com, 0.8.5 design (owner pick: direction C, "Mac indie craft").
   The page is built like a well-made instrument: the app icon set down as an
   object, real keycaps, plates that show the app at its real size, and colour
   fields that change from section to section. Two colours, both the app's own:
   blue from the icon, amber from "Waiting for you". Besley (SIL OFL, served
   from /assets/fonts) for display, system-ui for text, the mono face for code.
   Colours, shadows and radii come from the token files (tokens.css verbatim,
   web-tokens.css, site-tokens.css); this file holds no colour literals.
   Product elements (capture slots, trace strip, receipts, approval card,
   snapshot pill) are rendered at build time by scripts/site-content.mjs.
   CSP: style-src 'self' only, so no inline styles anywhere.
   The trope gate (scripts/site-gates.mjs) checks this file on every build. */
/* Idyll — generated from tokens.json */
:root, [data-theme="light"] {
  --paper: #ffffff;
  --side: #f6f6f8;
  --sidebar: #efeff2;
  --float: #ffffff;
  --inset: #f2f2f5;
  --terminal: var(--paper);
  --glass-chrome: rgba(255, 255, 255, 0.78);
  --glass-tint-primary: rgba(47, 107, 224, 0.085);
  --ink: #1c1c1f;
  --ink-2: rgba(23, 27, 42, 0.74);
  --ink-3: rgba(23, 27, 42, 0.64);
  --hairline: rgba(24, 28, 44, 0.108);
  --field-edge: rgba(28, 28, 31, 0.50);
  --fill-hover: rgba(28, 28, 31, 0.05);
  --fill-secondary: rgba(28, 28, 31, 0.06);
  --fill-zebra: rgba(28, 28, 31, 0.025);
  --accent-fill: #2f6be0;
  --accent-text: #2459c2;
  --on-accent: #ffffff;
  --accent-soft: rgba(47, 107, 224, 0.10);
  --focus-ring: var(--accent-fill);
  --live-edge: var(--accent-fill);
  --needs-you-fill: #b4620a;
  --needs-you-text: #8a4a00;
  --needs-you-soft: rgba(180, 98, 10, 0.12);
  --verified-fill: #1e8e3e;
  --verified-text: #126a36;
  --verified-soft: rgba(30, 142, 62, 0.12);
  --failed-fill: #c8281f;
  --failed-text: #ae2018;
  --on-failed: #ffffff;
  --failed-soft: rgba(200, 40, 31, 0.12);
  --diff-add-bg: rgba(30, 142, 62, 0.10);
  --diff-del-bg: rgba(200, 40, 31, 0.10);
  --diff-add-word: rgba(30, 142, 62, 0.24);
  --diff-del-word: rgba(200, 40, 31, 0.22);
  --diff-add-gutter: var(--verified-fill);
  --diff-del-gutter: var(--failed-fill);
  --trace-read: rgba(28, 28, 31, 0.30);
  --trace-run: rgba(28, 28, 31, 0.50);
  --trace-edit: var(--accent-fill);
  --trace-failed: var(--failed-fill);
  --trace-track: var(--fill-secondary);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #2f6be0;
}
[data-theme="dark"] {
  --paper: #161618;
  --side: #1b1b1e;
  --sidebar: #1a1a1d;
  --float: #232327;
  --inset: #1f1f23;
  --terminal: #0e0e10;
  --glass-chrome: rgba(35, 35, 39, 0.78);
  --glass-tint-primary: rgba(111, 187, 255, 0.085);
  --ink: #efeff2;
  --ink-2: rgba(241, 242, 244, 0.74);
  --ink-3: rgba(241, 242, 244, 0.64);
  --hairline: rgba(255, 255, 255, 0.12);
  --field-edge: rgba(255, 255, 255, 0.36);
  --fill-hover: rgba(255, 255, 255, 0.05);
  --fill-secondary: rgba(255, 255, 255, 0.08);
  --fill-zebra: rgba(255, 255, 255, 0.03);
  --accent-fill: #6fbbff;
  --accent-text: #6fbbff;
  --on-accent: #0a1626;
  --accent-soft: rgba(111, 187, 255, 0.16);
  --focus-ring: var(--accent-fill);
  --live-edge: var(--accent-fill);
  --needs-you-fill: #ffb340;
  --needs-you-text: #ffb340;
  --needs-you-soft: rgba(255, 179, 64, 0.12);
  --verified-fill: #30d158;
  --verified-text: #30d158;
  --verified-soft: rgba(48, 209, 88, 0.12);
  --failed-fill: #ff6b6b;
  --failed-text: #ff6b6b;
  --on-failed: #1a0a0a;
  --failed-soft: rgba(255, 107, 107, 0.12);
  --diff-add-bg: rgba(48, 209, 88, 0.14);
  --diff-del-bg: rgba(255, 107, 107, 0.14);
  --diff-add-word: rgba(48, 209, 88, 0.28);
  --diff-del-word: rgba(255, 107, 107, 0.28);
  --diff-add-gutter: var(--verified-fill);
  --diff-del-gutter: var(--failed-fill);
  --trace-read: rgba(239, 239, 242, 0.30);
  --trace-run: rgba(239, 239, 242, 0.50);
  --trace-edit: var(--accent-fill);
  --trace-failed: var(--failed-fill);
  --trace-track: var(--fill-secondary);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-focus: 0 0 0 2px #161618, 0 0 0 4px #6fbbff;
}
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --radius-pane: 0;
  --radius-keycap: 4px;
  --radius-control: 6px;
  --radius-inset: 8px;
  --radius-float: 10px;
  --radius-composer: 12px;
  --radius-dot: 50%;
  --stroke-hairline: 1px;
  --stroke-live-edge: 1px;
  --stroke-focus: 2px;
  --stroke-focus-offset: 2px;
  --stroke-dot-hollow: 1.5px;
  --stroke-trace: 3px;
  --stroke-ring: 2px;
  --row-dense: 28px;
  --row-step: 24px;
  --row-list: 32px;
  --row-menu: 36px;
  --row-settings: 44px;
  --row-settings-sub: 56px;
  --hit-min: 28px;
  --btn-small: 22px;
  --btn-regular: 28px;
  --btn-composer: 28px;
  --btn-large: 32px;
  --chip-height: 20px;
  --dot: 6px;
  --icon-row: 14px;
  --icon-toolbar: 16px;
  --icon-empty: 28px;
  --chevron: 9px;
  --decision-bar: 44px;
  --composer-min: 44px;
  --composer-max: 240px;
  --composer-bar: 32px;
  --composer-width-max: 800px;
  --measure: 680px;
  --thread-min: 600px;
  --sidebar-width: 240px;
  --sidebar-min: 200px;
  --sidebar-max: 320px;
  --context-width: 320px;
  --context-min: 280px;
  --context-max: 400px;
  --file-list-width: 240px;
  --dock-collapsed: 28px;
  --dock-min: 200px;
  --palette-width: 640px;
  --banner-height: 32px;
  --welcome-width: 480px;
  --settings-content-max: 720px;
  --attach-chip: 24px;
  --opacity-press: 0.75;
  --opacity-disabled: 0.45;
  --opacity-ink-2: 0.74;
  --opacity-ink-3: 0.64;
  --opacity-chevron: 0.4;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.display { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.title { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.ui { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.uiStrong { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.overline { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; }
.caption { font-family: var(--font-sans); font-size: 11.5px; line-height: 15px; font-weight: 400; }
.document { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 400; }
.docHeading { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; }
.docHeading3 { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: 12.5px; line-height: 19px; font-weight: 400; }
.monoSmall { font-family: var(--font-mono); font-size: 11.5px; line-height: 15px; font-weight: 400; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* Idyll on the web (WEBSITE-IDYLL-PLAN.md §4). Loaded after /tokens.css,
   which is Idyll's tokens.css verbatim (scripts/sync-idyll-tokens.mjs).
   Web-only tokens live here and never in tokens.json: the reading-distance
   type scale, the section spacing above space-48, and the content width.
   The site follows the system theme (OD-W4): Idyll's dark values are applied
   under prefers-color-scheme by the generated block below. */
:root {
  color-scheme: light dark;
  /* system-ui renders SF Pro on every Mac that can run Thalia; no sans webfont (OD-W1). */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono Web", ui-monospace, "SF Mono", Menlo, monospace;

  --web-display-size: clamp(34px, 2.2rem + 1.6vw, 56px);
  --web-display-line: 1.08;
  --web-display-tracking: -0.02em;
  --web-title-size: clamp(24px, 1.2rem + 0.9vw, 32px);
  --web-title-line: 1.2;
  --web-title-tracking: -0.01em;
  --web-heading-size: 19px;
  --web-heading-line: 26px;
  --web-lede-size: 20px;
  --web-lede-line: 30px;
  --web-body-size: 17px;
  --web-body-line: 27px;
  --web-overline-size: 12px;
  --web-overline-line: 16px;
  --web-overline-tracking: 0.06em;
  --web-caption-size: 13px;
  --web-caption-line: 18px;
  --web-mono-size: 14px;
  --web-mono-line: 22px;
  --web-mono-evidence-size: 13px;
  --web-mono-evidence-line: 20px;
  --web-ui-size: 15px;
  --web-ui-line: 20px;

  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --web-content-max: 1200px;
  --web-gutter: 16px;
  --web-header: 56px;
}
@media (min-width: 600px) { :root { --web-gutter: 24px; } }
@media (min-width: 1024px) { :root { --web-gutter: 48px; } }

/* idyll:dark:start: generated by scripts/sync-idyll-tokens.mjs from tokens.css [data-theme="dark"]; do not edit by hand. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161618;
    --side: #1b1b1e;
    --sidebar: #1a1a1d;
    --float: #232327;
    --inset: #1f1f23;
    --terminal: #0e0e10;
    --glass-chrome: rgba(35, 35, 39, 0.78);
    --glass-tint-primary: rgba(111, 187, 255, 0.085);
    --ink: #efeff2;
    --ink-2: rgba(241, 242, 244, 0.74);
    --ink-3: rgba(241, 242, 244, 0.64);
    --hairline: rgba(255, 255, 255, 0.12);
    --field-edge: rgba(255, 255, 255, 0.36);
    --fill-hover: rgba(255, 255, 255, 0.05);
    --fill-secondary: rgba(255, 255, 255, 0.08);
    --fill-zebra: rgba(255, 255, 255, 0.03);
    --accent-fill: #6fbbff;
    --accent-text: #6fbbff;
    --on-accent: #0a1626;
    --accent-soft: rgba(111, 187, 255, 0.16);
    --focus-ring: var(--accent-fill);
    --live-edge: var(--accent-fill);
    --needs-you-fill: #ffb340;
    --needs-you-text: #ffb340;
    --needs-you-soft: rgba(255, 179, 64, 0.12);
    --verified-fill: #30d158;
    --verified-text: #30d158;
    --verified-soft: rgba(48, 209, 88, 0.12);
    --failed-fill: #ff6b6b;
    --failed-text: #ff6b6b;
    --on-failed: #1a0a0a;
    --failed-soft: rgba(255, 107, 107, 0.12);
    --diff-add-bg: rgba(48, 209, 88, 0.14);
    --diff-del-bg: rgba(255, 107, 107, 0.14);
    --diff-add-word: rgba(48, 209, 88, 0.28);
    --diff-del-word: rgba(255, 107, 107, 0.28);
    --diff-add-gutter: var(--verified-fill);
    --diff-del-gutter: var(--failed-fill);
    --trace-read: rgba(239, 239, 242, 0.30);
    --trace-run: rgba(239, 239, 242, 0.50);
    --trace-edit: var(--accent-fill);
    --trace-failed: var(--failed-fill);
    --trace-track: var(--fill-secondary);
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.18);
    --shadow-focus: 0 0 0 2px #161618, 0 0 0 4px #6fbbff;
  }
}
/* idyll:dark:end */

/* Increase Contrast: the app's values for ink-2 and ink-3. */
@media (prefers-contrast: more) {
  :root { --ink-2: rgba(23, 27, 42, 0.88); --ink-3: rgba(23, 27, 42, 0.80); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --ink-2: rgba(241, 242, 244, 0.88); --ink-3: rgba(241, 242, 244, 0.80); }
}

/* Thalia on the web, 0.8.5 (website/COPY-SIGNOFF-085.md, owner pick: direction C).
   Loaded after tokens.css (Idyll verbatim) and web-tokens.css. It re-values the
   Idyll names the components already use, so one palette runs through the whole
   site, and adds the page's own fields, type and objects.
   Two colours, both from the app: blue sampled from the app icon's tile, and
   amber, the colour the app already uses for "Waiting for you": the moment it
   needs a person. Paper is warm and dark mode is designed, not inverted.
   Colour literals live in the token files and nowhere else; shadows and filters
   are named tokens here (scripts/site-gates.mjs checks styles.css and
   release.css for both). */
:root {
  --blue: #121c8f;
  --blue-deep: #0b1263;
  --blue-glow: #7cc8ff;
  --amber: #f2a63b;
  --amber-field: #f2a63b;
  --amber-text: #8f5309;
  --amber-ink: #3a2306;
  --on-blue: #f5efe2;
  --on-blue-2: rgba(245, 239, 226, 0.78);
  --night: #0e0f1f;
  --night-ink: #f1ecdf;
  --night-2: #b9bfdc;
  --clock: #121c8f;
  --plate-ring: rgba(23, 22, 42, 0.14);
  --plate-back: #ffffff;

  --paper: #f5efe2;
  --side: #efe8d8;
  --sidebar: #ebe3d0;
  --float: #fbf8f0;
  --inset: #ece5d4;
  --glass-chrome: rgba(245, 239, 226, 0.86);
  --ink: #17162a;
  --ink-2: #4a465c;
  --ink-2-page: #4a465c;
  --ink-3: #5c576d;
  --hairline: rgba(23, 22, 42, 0.16);
  --field-edge: rgba(23, 22, 42, 0.56);
  --fill-hover: rgba(23, 22, 42, 0.05);
  --fill-secondary: rgba(23, 22, 42, 0.07);
  --accent-fill: #f2a63b;
  --accent-text: #121c8f;
  --on-accent: #3a2306;
  --accent-soft: rgba(18, 28, 143, 0.1);
  --focus-ring: #121c8f;
  --needs-you-fill: #f2a63b;
  --needs-you-text: #8f5309;
  --needs-you-soft: rgba(242, 166, 59, 0.2);

  --field-bg: #f5efe2;
  --field-ink: #17162a;
  --key-face: #f6f3ea;
  --key-ink: #2a2833;
  --shadow-key: inset 0 -1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff, 0 3px 0 #c9c2b3, 0 4px 6px rgba(0, 0, 0, 0.18);
  --shadow-keysm: inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 2px 0 #c9c2b3, 0 3px 4px rgba(0, 0, 0, 0.18);
  --key-face-night: #34333f;
  --key-ink-night: #ece7dc;
  --shadow-keynight: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 0 #121119, 0 3px 4px rgba(0, 0, 0, 0.5);
  --shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #b4741c, 0 10px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 0 #b4741c, 0 4px 10px -6px rgba(0, 0, 0, 0.45);
  --shadow-ring: 0 0 0 1px var(--plate-ring);
  --shadow-lift: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  --shadow-amber: 0 0 0 1px rgba(58, 35, 6, 0.25), 0 24px 40px -24px rgba(58, 35, 6, 0.5);
  --shadow-night: 0 0 0 1px rgba(255, 255, 255, 0.12);
  --filter-icon: drop-shadow(0 50px 50px rgba(2, 4, 40, 0.55)) drop-shadow(0 8px 12px rgba(2, 4, 40, 0.4));
  --filter-iconsm: drop-shadow(0 14px 14px rgba(2, 4, 40, 0.45));
  --filter-iconmid: drop-shadow(0 24px 24px rgba(2, 4, 40, 0.5));

  --radius-key: 7px;
  --radius-keysm: 5px;
  --radius-hero: 14px;

  --font-serif: "Besley", ui-serif, Georgia, "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1240px;
  --cap: 210px;
  --web-content-max: 1240px;
  --web-gutter: var(--gutter);
  --web-header: 72px;
}

@font-face { font-family: "Besley"; src: url("/assets/fonts/besley.6680c90cef.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Besley"; src: url("/assets/fonts/besley-italic.5a77825189.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }

@media (prefers-color-scheme: dark) {
  :root {
    --blue: #0d1572;
    --blue-deep: #070b44;
    --amber: #e9a03a;
    --amber-field: #d7922f;
    --amber-text: #eaa443;
    --on-blue: #efe8d8;
    --on-blue-2: rgba(239, 232, 216, 0.76);
    --night: #08091a;
    --clock: #8fb6ff;
    --plate-ring: rgba(239, 232, 216, 0.14);
    --plate-back: #161618;

    --paper: #1b1a17;
    --side: #201f1b;
    --sidebar: #23221e;
    --float: #26251f;
    --inset: #23221e;
    --glass-chrome: rgba(27, 26, 23, 0.86);
    --ink: #efe8d8;
    --ink-2: #b8b0a0;
    --ink-2-page: #b8b0a0;
    --ink-3: #a39b8b;
    --hairline: rgba(239, 232, 216, 0.16);
    --field-edge: rgba(239, 232, 216, 0.5);
    --fill-hover: rgba(239, 232, 216, 0.06);
    --fill-secondary: rgba(239, 232, 216, 0.09);
    --accent-fill: #e9a03a;
    --accent-text: #8fb6ff;
    --on-accent: #3a2306;
    --accent-soft: rgba(143, 182, 255, 0.16);
    --focus-ring: #8fb6ff;
    --needs-you-fill: #e9a03a;
    --needs-you-text: #eaa443;
    --needs-you-soft: rgba(233, 160, 58, 0.16);

    --field-bg: #1b1a17;
    --field-ink: #efe8d8;
    --key-face: #34333f;
    --key-ink: #ece7dc;
    --shadow-key: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 0 #121119, 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-keysm: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 0 #121119, 0 3px 4px rgba(0, 0, 0, 0.5);
  }
}
@media (prefers-contrast: more) {
  :root { --ink-2: #2d2a3d; --ink-3: #3d394d; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --ink-2: #d9d1c1; --ink-3: #cbc3b3; }
}


/* JetBrains Mono, a Latin subset (scripts/subset-mono-font.mjs, SIL OFL),
   under its own family name: tokens.css declares "JetBrains Mono" faces that
   point at the app's full TTFs (fonts/*.ttf, not served), and a family the
   site never names is never fetched. --font-mono (web-tokens.css) names this
   face. One 400 face; mono is never bold or italic on the site.
   font-display: optional, so a late font never moves the layout. */
@font-face { font-family: "JetBrains Mono Web"; src: url("/assets/fonts/jetbrains-mono-latin.aece9e2384.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--space-24);-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:18px;line-height:1.55;font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
picture{display:block}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance}
p,ul,ol,dl,dd,figure,pre{margin:0}
a{color:var(--accent-text);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:var(--stroke-focus) solid var(--focus-ring);outline-offset:var(--stroke-focus-offset);border-radius:var(--radius-control)}
code,samp,pre{font-family:var(--font-mono);font-weight:400}
code{font-size:.88em}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:var(--space-8) var(--space-12);border-radius:var(--radius-control);background:var(--paper);color:var(--ink)}
.skip:focus{left:var(--space-16);top:var(--space-16)}
.nowrap{white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Fields: a section sets its own ground and re-points the text colours. */
.blue,.field-blue{background:var(--blue);color:var(--on-blue);--ink:var(--on-blue);--ink-2:var(--on-blue-2);--ink-3:var(--on-blue-2);--accent-text:var(--on-blue);--focus-ring:var(--blue-glow);--hairline:var(--on-blue-2)}
.field-night{background:var(--night);color:var(--night-ink);--ink:var(--night-ink);--ink-2:var(--night-2);--ink-3:var(--night-2);--accent-text:var(--night-ink);--focus-ring:var(--blue-glow);--hairline:var(--night-2);--clock:var(--amber);--amber-text:var(--amber);--key-face:var(--key-face-night);--key-ink:var(--key-ink-night)}
.field-amber{background:var(--amber-field);color:var(--amber-ink);--ink:var(--amber-ink);--ink-2:var(--amber-ink);--ink-3:var(--amber-ink);--accent-text:var(--amber-ink);--focus-ring:var(--amber-ink);--hairline:var(--amber-ink);--amber-text:var(--amber-ink)}

/* ---------- Keycaps: what 0.8.5 prints on its own controls ---------- */
kbd{font:600 15px/1 var(--font-sans);display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 9px;border-radius:var(--radius-key);color:var(--key-ink);background:var(--key-face);box-shadow:var(--shadow-key);vertical-align:middle;white-space:nowrap}
.keycaps{display:inline-flex;gap:5px;vertical-align:middle}
kbd.sm,.keys kbd,.compare-table kbd,.claim kbd,.document kbd{min-width:26px;height:26px;padding:0 6px;border-radius:var(--radius-keysm);font-size:13px;box-shadow:var(--shadow-keysm);margin-block:3px}

.word kbd{font-size:13px;font-weight:500;min-width:52px;place-items:end start;padding:0 7px 6px}
.keycaps.sm kbd{min-width:26px;height:26px;padding:0 6px;border-radius:var(--radius-keysm);font-size:13px;box-shadow:var(--shadow-keysm)}
.field-night kbd{box-shadow:var(--shadow-keynight)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-12);border:0;border-radius:var(--radius-control);font:600 16px/1.2 var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:44px;padding:0 var(--space-16)}
.btn:active{opacity:var(--opacity-press)}
.btn-ghost{background:var(--fill-secondary);color:var(--ink)}
.btn-ghost:hover{background:var(--fill-hover);color:var(--ink);text-decoration:none}
/* The one primary: a raised amber key. */
.btn-primary,.signup button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-12);border:0;color:var(--on-accent);background:var(--accent-fill);font:600 19px/1 var(--font-sans);padding:18px 26px 18px 22px;min-height:0;border-radius:var(--radius-hero);box-shadow:var(--shadow-button);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn-primary:hover,.signup button:hover{color:var(--on-accent);text-decoration:none}
.btn-primary:active,.signup button:active{opacity:1;transform:translateY(3px);box-shadow:var(--shadow-pressed)}
.btn-primary:focus-visible,.signup button:focus-visible{outline-offset:4px;border-radius:var(--radius-hero)}
.btn svg{width:20px;height:20px}
.text-link{font-weight:500;text-decoration:none}
.text-link:hover{text-decoration:underline}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px}
.cta-note{font-size:15px;line-height:1.45;color:var(--ink-2);max-width:22em}

/* ---------- Header: blue on every page, like the hero it sits over ---------- */
.site-header{background:var(--blue);color:var(--on-blue);--ink:var(--on-blue);--ink-2:var(--on-blue-2);--focus-ring:var(--blue-glow);--accent-text:var(--on-blue)}
.site-header .bar{display:flex;align-items:center;gap:var(--space-24);padding-block:22px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:inherit;font:600 24px/1 var(--font-serif);letter-spacing:-0.01em;text-decoration:none}
.brand img{width:30px;height:30px}
.nav{display:flex;align-items:center;gap:28px;font-size:15px;line-height:20px}
.nav>a{color:var(--on-blue-2);text-decoration:none;white-space:nowrap}
.nav>a:hover,.nav>a[aria-current="page"]{color:var(--on-blue)}
.nav>a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.nav-cta{display:flex;align-items:center;gap:var(--space-12)}
.nav-cta a{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--space-16);border-radius:var(--radius-control);background:var(--accent-fill);color:var(--on-accent);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.nav-cta a:hover{color:var(--on-accent);text-decoration:underline}
.status{display:inline-flex;align-items:center;gap:var(--space-8);font-size:14px;color:var(--on-blue-2);white-space:nowrap}
.status::before{content:"";width:var(--dot);height:var(--dot);border-radius:var(--radius-dot);background:var(--amber)}
.nav-cta .status:last-child{order:-1}

/* ---------- Home: hero (blue field) ---------- */
.hero{padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:1.45fr .75fr;align-items:center;gap:24px;padding-top:56px}
.hero h1{font:500 clamp(44px,2rem + 3.6vw,86px)/.98 var(--font-serif);letter-spacing:-0.025em;margin:0 0 32px}
.hero h1 em{font-style:italic;font-weight:400;color:var(--blue-glow)}
.hero .lede{font-size:21px;line-height:1.5;color:var(--on-blue-2);max-width:36em;margin:0 0 36px;text-wrap:pretty}
.hero .lede strong{color:var(--on-blue);font-weight:600}
.hero .cta-note{color:var(--on-blue-2)}
.icon-stage{display:grid;place-items:center}
.icon-stage img{width:min(100%,420px);transform:rotate(-7deg);filter:var(--filter-icon)}
.hero-plate{margin-top:88px}
.hero-plate .fig{transform:translateY(52px)}
.hero-plate .plate{box-shadow:var(--shadow-lift);border-radius:var(--radius-hero)}

/* ---------- Plates: a tight crop of the app at its real size ----------
   The 2x capture is shown at 1x: the <img> width attribute is the plate's
   point width. A figure number in amber italic, a caption in the margin. */
.fig{display:grid;grid-template-columns:minmax(0,1fr) var(--cap);gap:0 32px;align-items:start}
.plate{display:block;width:fit-content;max-width:100%;border-radius:var(--radius-inset);overflow:hidden;box-shadow:var(--shadow-ring);background:var(--plate-back)}
.plate img{max-width:100%;height:auto}
.fig figcaption{font-size:14px;line-height:1.45;color:var(--ink-2);padding-top:4px;text-wrap:pretty}
.fig figcaption b{display:block;font:italic 600 15px/1.2 var(--font-serif);color:var(--amber-text);margin-bottom:4px;font-feature-settings:"lnum","tnum"}
.fig.under{grid-template-columns:minmax(0,1fr)}
.fig.under figcaption{padding-top:14px;max-width:34em}
.hero-plate .fig{--ink-2:var(--ink-2-page)}
.hero-plate .fig figcaption{padding-top:16px}
.field-night .fig .plate{box-shadow:var(--shadow-night)}
.field-night .fig figcaption b{color:var(--amber)}
.field-amber .fig .plate{box-shadow:var(--shadow-amber)}

/* ---------- Home sections: building blocks ----------
   .split is a heading and its words beside the picture; .flip swaps the sides.
   Fields (.field-night, .field-amber) change the ground between sections. */
.beats,.asks,.plain,.questions{padding:120px 0}
h2{font:500 clamp(36px,1.6rem + 2.6vw,66px)/1.03 var(--font-serif);letter-spacing:-0.02em;margin:0 0 22px}
.beats+.asks,.asks+.beats{padding-top:0}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 56px;align-items:start}
.split+.split{margin-top:120px}
.split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.flip>:first-child{order:2}
.split h2{font-size:clamp(34px,1.5rem + 2.2vw,60px);margin:0 0 22px}
.split p{margin:0 0 14px;font-size:19px;color:var(--ink-2);max-width:34em;text-wrap:pretty}
.split p.cond{font-size:14px}
.stack{display:grid;gap:56px}
.jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 56px;margin-top:56px}
.job h3,.rows h3{font:600 28px/1.15 var(--font-serif);letter-spacing:-0.01em;margin:0 0 14px}
.job p{font-size:19px;color:var(--ink-2);margin:0 0 24px;text-wrap:pretty}
.rows{display:grid;gap:96px;margin-top:64px}
.rows .split+.split{margin-top:0}
.choices{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:20px!important}
.choices span{display:inline-flex;align-items:center;gap:10px}
.mac-copy{font-size:21px!important;line-height:1.55;max-width:34em;text-wrap:pretty}
.rel-list{list-style:none;margin:40px 0 32px;padding:0;display:grid;gap:0}
.rel-list li{display:grid;grid-template-columns:minmax(120px,.25fr) 1fr;gap:24px;padding:16px 0;border-top:1px solid var(--hairline);font-size:19px}
.rel-list time{font:italic 500 22px/1.3 var(--font-serif)}
.jobs{display:grid;grid-template-columns:minmax(0,1fr);gap:96px;margin-top:56px}
.job{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 56px;align-items:start}
.job>.fig{grid-column:2;grid-row:1 / span 3}
.job>h3,.job>p{grid-column:1}
.job:has(img[src^="/assets/shots/plate-multifile-"]){grid-template-columns:minmax(0,1fr)}
.job:has(img[src^="/assets/shots/plate-multifile-"])>.fig{grid-column:1;grid-row:auto;margin-top:24px}
.job h3,.rows h3{font:600 28px/1.15 var(--font-serif);letter-spacing:-0.01em;margin:0 0 14px}
.job p{font-size:19px;color:var(--ink-2);margin:0 0 24px;text-wrap:pretty}
.rows{display:grid;gap:96px;margin-top:64px}
.rows .split+.split{margin-top:0}
.choices{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:20px!important}
.choices span{display:inline-flex;align-items:center;gap:10px}
.mac-copy{font-size:21px!important;line-height:1.55;max-width:34em;text-wrap:pretty}
.rel-list{list-style:none;margin:40px 0 32px;padding:0;display:grid;gap:0}
.rel-list li{display:grid;grid-template-columns:minmax(120px,.25fr) 1fr;gap:24px;padding:16px 0;border-top:1px solid var(--hairline);font-size:19px}
.rel-list time{font:italic 500 22px/1.3 var(--font-serif)}
.stack.row{grid-template-columns:auto auto;justify-content:start;gap:40px}
.fig.narrow .plate{max-width:min(100%,250px)}
.amber,.review{padding:136px 0}
.field-night .split p{color:var(--night-2)}
.field-amber .split p{color:var(--amber-ink)}
.field-amber .fig .plate{box-shadow:var(--shadow-amber)}
.field-night a{color:var(--night-ink)}
.plain .split{align-items:start}
.plain .ruled{max-width:none}
.questions .split h2{font-size:clamp(30px,1.4rem + 1.6vw,48px)}
.faq-list{max-width:none}

/* ---------- Home: close (blue field) ---------- */
.close{padding:120px 0 112px;text-align:center}
.close img.icon{width:132px;margin:0 auto 36px;transform:rotate(-7deg);filter:var(--filter-iconmid)}
.close h2{font-size:clamp(36px,1.5rem + 3vw,76px);margin:0 auto 40px;max-width:13em}
.close .cta-note{margin:26px auto 0;max-width:34em;color:var(--on-blue-2)}
.close .cta-note a{color:var(--on-blue)}
.close .brew{margin:36px auto 0;display:grid;justify-items:center;gap:var(--space-8)}
.close .brew-block{justify-content:center}
.close .brew .inset-code{background:var(--blue-deep);color:var(--on-blue)}
.close .brew .btn-ghost{background:var(--blue-deep);color:var(--on-blue)}

/* The launch list (prelaunch only), set on the blue close. */
.launch-list{text-align:left;max-width:520px;margin:48px auto 0}
.launch-list h3{font:600 28px/1.2 var(--font-serif);margin-bottom:var(--space-8);text-align:center}
.launch-list>p{color:var(--on-blue-2);margin-bottom:var(--space-16);text-align:center}
.signup{width:100%;scroll-margin-top:var(--space-32)}
.email-label{display:block;margin-bottom:var(--space-8);font-size:15px;font-weight:500}
.form-row{display:flex;gap:var(--space-12)}
.form-row input{flex:1;min-width:0;min-height:56px;padding:0 var(--space-16);border:var(--stroke-hairline) solid var(--field-edge);border-radius:var(--radius-key);background:var(--field-bg);color:var(--field-ink);font:400 17px/1.2 var(--font-sans)}
.signup button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.signup button{min-height:56px;padding:0 var(--space-24);font-size:17px}
.signup button:disabled{opacity:var(--opacity-disabled);cursor:wait}
.consent{display:flex;align-items:center;gap:var(--space-8);margin:var(--space-12) 0 var(--space-4);font-size:15px;color:var(--on-blue-2);cursor:pointer}
.consent input{width:18px;height:18px;margin:0;accent-color:var(--accent-fill)}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#form-status{margin-top:var(--space-12);padding:var(--space-12);border-radius:var(--radius-inset);background:var(--blue-deep);color:var(--on-blue);font-size:15px;line-height:1.5}
#form-status:empty{display:none}
#form-status.error{color:var(--on-blue);outline:2px solid var(--amber)}
.signup .small{margin-top:var(--space-8);font-size:14px;line-height:1.45;color:var(--on-blue-2)}

/* ---------- Footer (deep blue) ---------- */
.site-footer{background:var(--blue-deep);color:var(--on-blue-2);font-size:14px;line-height:1.5;padding:40px 0 48px;--focus-ring:var(--blue-glow)}
.site-footer .foot{display:grid;grid-template-columns:auto 1fr;gap:24px 64px;align-items:center}
.site-footer .brand{color:var(--on-blue);font-size:22px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:flex-end}
.site-footer nav a{color:var(--on-blue-2);text-decoration:none}
.site-footer nav a:hover{color:var(--on-blue);text-decoration:underline}
.site-footer .legal{grid-column:1/-1;display:grid;gap:var(--space-4);max-width:60em}

/* ---------- Pages with a head and chapters: How it works, Safety ---------- */
.page-head{padding-block:88px 56px}
.page-head h1,.document h1,.download-hero h1{font:500 clamp(40px,2rem + 2.6vw,72px)/1.02 var(--font-serif);letter-spacing:-0.025em;text-wrap:balance}
.page-head .lede{font-size:21px;line-height:1.5;color:var(--ink-2);max-width:34em;margin-top:24px;text-wrap:pretty}
.page-head .small{margin-top:var(--space-16);font-size:15px;line-height:1.45;color:var(--ink-2)}
.toc{margin-top:var(--space-32)}
.toc ol{list-style:none;margin:0;padding:var(--space-16) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-24);border-top:2px solid var(--ink);font-size:16px}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline}
.chapter{padding-block:96px}
.chapter>.wrap{display:grid;gap:var(--space-48)}
.chapter-head{display:grid;gap:var(--space-12);max-width:34em}
.chapter-head h2{font-size:clamp(34px,1.5rem + 2vw,56px);margin:0}
.chapter-head>p{font-size:19px;color:var(--ink-2);text-wrap:pretty}
.chapter:nth-of-type(even) .chapter-head{justify-self:end;text-align:right}
.chapter .prose{display:grid;gap:var(--space-16);max-width:34em}
.chapter:nth-of-type(even) .prose{justify-self:end}
.prose p{color:var(--ink-2)}
.more{margin-top:var(--space-8)}
.claims-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-48) 72px}
.chapter:nth-of-type(3n) .claims-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-48) 48px}
.claim{display:grid;gap:var(--space-8);align-content:start}
.claim h3{font:600 24px/1.2 var(--font-serif);letter-spacing:-0.01em}
.claim p:not(.cond){color:var(--ink-2)}
.cond,.small{font-size:14px;line-height:1.45;color:var(--ink-2)}
.keys{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 var(--space-48)}
.keys li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-12) 0;border-top:1px solid var(--hairline);color:var(--ink-2)}
.chapter.field-amber,.chapter.field-night{padding-block:112px}
.final{padding-block:112px;background:var(--blue);color:var(--on-blue);--ink:var(--on-blue);--ink-2:var(--on-blue-2);--accent-text:var(--on-blue);--focus-ring:var(--blue-glow)}
.final h2{font-size:clamp(36px,1.5rem + 3vw,64px);max-width:14em;margin-bottom:var(--space-16)}
.final .closing-copy{color:var(--on-blue-2);font-size:20px;line-height:1.5;max-width:34em;margin-bottom:var(--space-32)}
.final .cta-row{gap:20px 28px}
.final-icon{width:72px;margin:0 0 var(--space-24);transform:rotate(-7deg)}
.final .text-link{color:var(--on-blue);text-decoration:underline;text-underline-offset:4px}

/* Ruled lists */
.ruled{display:grid;max-width:880px}
.ruled>div{display:grid;grid-template-columns:minmax(160px,.8fr) 2fr;gap:var(--space-4) var(--space-24);padding:var(--space-16) 0;border-top:1px solid var(--hairline)}
.ruled dt{font:600 20px/1.3 var(--font-serif)}
.ruled dd{color:var(--ink-2)}

/* ---------- Capture slots (scripts/site-content.mjs) ----------
   A real screenshot shows at most at its native point size (the <img>
   width attribute is the capture's width / 2). Until the harness supplies it,
   a neutral frame says what is pending; it never draws the UI. */
.slot-window img{width:100%;border-radius:var(--radius-hero);box-shadow:var(--shadow-lift)}
.slot-crop img,.slot-wide img{border-radius:var(--radius-inset);box-shadow:var(--shadow-ring)}
.slot-pending{display:grid;align-content:center;justify-items:center;gap:var(--space-8);padding:var(--space-24);text-align:center;background:var(--inset);color:var(--ink-2);font-size:14px;line-height:1.45}
.slot-pending.slot-window{aspect-ratio:16/10;border-radius:var(--radius-hero)}
.slot-pending.slot-crop{aspect-ratio:3/2;max-width:var(--measure);border-radius:var(--radius-inset)}
.slot-pending.slot-wide{min-height:120px;border-radius:var(--radius-inset)}
.chapter>.wrap>*{min-width:0}
.slot-pending p{max-width:44ch}
.slot-tag{display:block;margin-bottom:var(--space-4);font-weight:600;color:var(--ink)}
.slot-from{color:var(--ink-3)}
.field-night .slot-pending{background:transparent;outline:1px solid var(--hairline);outline-offset:-1px}
figure>figcaption{margin-top:var(--space-12);font-size:14px;line-height:1.45;color:var(--ink-2)}
.preview-note{max-width:var(--max);margin:var(--space-16) auto 0;padding:var(--space-8) var(--gutter);font-size:14px;line-height:1.45;color:var(--ink-2)}
.preview-note strong{color:var(--ink)}

/* ---------- Evidence: signature elements, as real text ---------- */
.evidence code,.trace-steps,.approval-cmd{font-size:var(--web-mono-evidence-size);line-height:var(--web-mono-evidence-line)}
.trace-block{display:grid;gap:var(--space-8);margin-top:var(--space-16)}
.trace-strip{display:block;width:100%;height:var(--stroke-trace);overflow:visible}
.t-track{fill:var(--hairline)}
.t-read{fill:var(--ink-3)}
.t-run{fill:var(--ink-2)}
.t-edit{fill:var(--clock)}
.t-failed{fill:var(--failed-fill)}
.trace-strip[data-moment] .trace-fill{transform-origin:0 50%;animation:idyll-live 1.6s cubic-bezier(.2,.8,.2,1) .4s 1 both}
@keyframes idyll-live{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.trace summary{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--hit-min);cursor:pointer;font-size:14px;line-height:1.45;color:var(--ink-2);list-style:none}
.trace summary::-webkit-details-marker{display:none}
.trace summary::before{content:"▸";color:var(--ink-3)}
.trace[open] summary::before{content:"▾"}
.failed-text{color:var(--failed-text)}
.trace-steps{list-style:none;padding:var(--space-8) 0 0;display:grid;gap:var(--space-2);color:var(--ink-2)}
.trace-steps li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-8)}
.trace-steps code{color:var(--ink);font-size:inherit}
.step-mark{width:1.2em;color:var(--verified-text)}
.step-failed .step-mark{color:var(--failed-text)}
.step-time{color:var(--ink-3)}
.receipt{display:flex;align-items:center;gap:var(--space-12);font-size:14px;line-height:1.45;color:var(--ink-2);text-align:center}
.receipt::before,.receipt::after{content:"";flex:1;min-width:var(--space-24);border-top:1px solid var(--hairline)}
.receipts{list-style:none;padding:0;display:grid;gap:var(--space-12);max-width:var(--measure);margin-top:var(--space-32)}
.approval-card{display:grid;gap:var(--space-12);max-width:var(--measure);padding:var(--space-16);background:var(--float);color:var(--ink);border-radius:var(--radius-float);box-shadow:var(--shadow-ring);font-size:15px;line-height:22px}
.approval-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-12)}
.approval-who{margin-left:auto;font-size:14px;color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:var(--space-4);height:var(--chip-height);padding:0 var(--space-8);border-radius:var(--radius-control);font-size:12px;font-weight:500;background:var(--fill-secondary);color:var(--ink-2)}
.chip::before{content:"";width:var(--dot);height:var(--dot);border-radius:var(--radius-dot);background:currentColor}
.chip-waiting{background:var(--needs-you-soft);color:var(--needs-you-text)}
.approval-cmd{padding:var(--space-8) var(--space-12);background:var(--inset);border-radius:var(--radius-inset);white-space:pre-wrap;overflow-wrap:anywhere}
.approval-cmd code{font-size:inherit}
.approval-why{color:var(--ink-2)}
.approval-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8)}
.ev-button{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--btn-regular);padding:0 var(--space-12);border-radius:var(--radius-control);font-weight:500}
.ev-primary{background:var(--accent-fill);color:var(--on-accent)}
.ev-plain{color:var(--ink-2)}
.ev-deny{margin-left:auto;color:var(--failed-text)}
.snapshot-pair{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-16)}
.pill{display:inline-flex;align-items:center;height:var(--chip-height);padding:0 var(--space-8);border-radius:var(--radius-control);font-family:var(--font-mono);font-size:12px;background:var(--fill-secondary);color:var(--ink-2);white-space:nowrap}
.pill code{font-size:inherit;color:inherit}
.pill-stale{background:var(--needs-you-soft);color:var(--needs-you-text)}
.field-amber .pill{background:var(--amber-ink);color:var(--amber)}
.field-amber .pill-stale{background:var(--amber-ink);color:var(--on-blue)}

/* Code inset (the Homebrew command, checksums). */
.brew-block{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);max-width:var(--measure)}
.brew-block .inset-code{flex:1 1 20rem;min-width:0}
.copy-button{cursor:pointer;flex:none}
.copy-button[hidden]{display:none}
.inset-code{display:block;max-width:var(--measure);padding:var(--space-12);border-radius:var(--radius-inset);background:var(--inset);font-size:var(--web-mono-evidence-size);line-height:var(--web-mono-evidence-line);color:var(--ink);overflow-wrap:anywhere}

/* ---------- Document pages: guides, privacy, terms, brand, 404 ---------- */
.document{max-width:calc(740px + 2 * var(--gutter));margin-inline:auto;padding:72px var(--gutter) 112px;font-size:18px;line-height:1.65}
.document h1{margin-bottom:var(--space-24)}
.document .lead{font:400 24px/1.45 var(--font-serif);color:var(--ink);margin-bottom:var(--space-24);text-wrap:pretty}
.document h2{font-size:clamp(28px,1.3rem + 1.2vw,40px);line-height:1.1;letter-spacing:-0.02em;margin:var(--space-48) 0 var(--space-16)}
.document h3{font:600 22px/1.25 var(--font-serif);margin:var(--space-32) 0 var(--space-8)}
.document p{margin-bottom:var(--space-16);color:var(--ink-2)}
.document code{overflow-wrap:anywhere}
.document .doc-date{font-family:var(--font-mono);font-size:14px;color:var(--ink-3);margin-bottom:var(--space-8)}
.document ul,.document ol{margin:0 0 var(--space-16) 1.25em;padding:0;color:var(--ink-2)}
.document li{margin-bottom:var(--space-8)}
.document li strong{color:var(--ink)}
.document .shot{margin:var(--space-32) 0 var(--space-48)}
.document .shot img{width:100%;border-radius:var(--radius-hero);box-shadow:var(--shadow-ring)}
.document .crumb{font-size:16px;color:var(--ink-2);margin-bottom:var(--space-16)}
.document .crumb a{color:var(--ink-2)}
.compare-table{width:100%;border-collapse:collapse;margin:var(--space-8) 0 var(--space-24);font-size:16px;line-height:1.5}
.compare-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.compare-table th,.compare-table td{text-align:left;vertical-align:top;padding:var(--space-12);border-bottom:1px solid var(--hairline);color:var(--ink-2)}
.compare-table thead th{color:var(--ink);font:600 18px/1.3 var(--font-serif);border-bottom:2px solid var(--ink)}
.compare-table tbody th{color:var(--ink);font-weight:600;width:22%}
.keys-table tbody th{width:60%}
.keys-table td{white-space:nowrap}
.brand-logo{width:128px;margin:var(--space-32) 0 var(--space-12);border-radius:var(--radius-hero)}
.lost{padding-block:120px}
.lost .cta-row{margin-top:var(--space-32)}
.document .help-index{list-style:none;margin:var(--space-32) 0;padding:0}
.help-index li{margin:0;padding:var(--space-16) 0;border-top:1px solid var(--hairline)}
.help-index a{font:600 26px/1.2 var(--font-serif);letter-spacing:-0.01em}
.help-index p{margin:var(--space-4) 0 0}

/* ---------- Common questions (home FAQ pattern on the guides): a plain list ---------- */
.faq-list details{border-top:1px solid var(--hairline)}
.faq-list summary{list-style:none;cursor:pointer;padding:var(--space-16) 0;font:600 22px/1.3 var(--font-serif)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{content:"▸";display:inline-block;width:1.2em;font-size:.7em;color:var(--ink-3)}
.faq-list details[open] summary::before{content:"▾"}
.faq-list details p{padding:0 0 var(--space-24) 1.7em;color:var(--ink-2);max-width:var(--measure)}

/* ---------- Small screens ---------- */
@media (max-width:900px){
  .nav>a:not(.keep){display:none}
  .hero-grid,.split,.split.flip,.claims-list,.chapter:nth-of-type(3n) .claims-list{grid-template-columns:minmax(0,1fr)}
  .fig{grid-template-columns:minmax(0,1fr)}
  .fig figcaption{padding-top:12px}
  .fig figcaption b{display:inline;margin:0 .4em 0 0}
  .hero-grid{padding-top:24px;gap:8px}
  .icon-stage{order:-1;justify-self:start}
  .icon-stage img{width:150px;margin:4px 0 28px 6px;filter:var(--filter-iconsm)}
  .hero .lede{font-size:18px}
  .hero-plate{margin-top:56px}
  .hero-plate .fig{transform:translateY(40px)}
  .hero-plate .plate{border-radius:var(--radius-float)}
  .amber,.review{padding:88px 0}
  .beats,.asks,.plain,.questions{padding:80px 0}
  .split+.split{margin-top:72px}
  .split.flip>:first-child{order:0}
  .stack.row{grid-template-columns:minmax(0,1fr)}
  .jobs,.rel-list li,.job{grid-template-columns:minmax(0,1fr)}
  .job>.fig{grid-column:1;grid-row:auto}
  .jobs{gap:64px}
  .rows{gap:64px}
  .jobs,.rel-list li,.job{grid-template-columns:minmax(0,1fr)}
  .job>.fig{grid-column:1;grid-row:auto}
  .jobs{gap:64px}
  .rows{gap:64px}
  .scroll .plate{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .scroll .plate img{max-width:none}
  .scroll figcaption::after{content:" Swipe to read the whole line."}
  .site-footer .foot{grid-template-columns:1fr}
  .site-footer nav{justify-content:flex-start}
  .btn-primary{font-size:18px}
  .page-head{padding-block:56px 40px}
  .chapter{padding-block:72px}
  .chapter:nth-of-type(even) .chapter-head,.chapter:nth-of-type(even) .prose{justify-self:start;text-align:left}
}
@media (max-width:640px){
  .site-header .bar{gap:var(--space-12)}
  .nav{gap:var(--space-12)}
  .status{display:none}
  .ruled>div{grid-template-columns:1fr}
  .form-row{flex-direction:column}
  .approval-who,.ev-deny{margin-left:0}
  .document{font-size:17px}
  .document .lead{font-size:21px}
  .compare-table{font-size:15px}
}
@media (max-width:480px){
  .signup button{flex:1 1 100%}
}
@media (max-width:480px){
  .nav>a.keep{display:none}
}
@media (max-width:360px){
  .site-header .brand span{display:none}
}

/* ---------- Accessibility preferences ---------- */
@media (forced-colors:active){
  .btn,.nav-cta a,.signup button,.ev-button{border:var(--stroke-hairline) solid ButtonText}
  .status::before,.chip::before{background:CanvasText}
  .slot-pending,.approval-card,.plate,kbd{border:var(--stroke-hairline) solid CanvasText}
  .t-track,.t-read,.t-run,.t-edit,.t-failed{fill:CanvasText}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important}
}

/* shots:roi:start — generated by scripts/build-images.mjs; do not edit by hand. */
/* shots:roi:end */

/* Release-only rules. The build bundles this file into the release
   stylesheet (styles-release.<hash>.css) that only release pages load, so it
   never styles a prelaunch page. Keep rules here that style markup which
   exists only in release:with branches or on the generated /download and
   /changelog pages (scripts/release-pages.mjs). Token variables only (no colour literals). */
.download-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-12);border:0;border-radius:var(--radius-hero);background:var(--accent-fill);color:var(--on-accent);font:600 19px/1 var(--font-sans);padding:18px 26px 18px 22px;box-shadow:var(--shadow-button);text-decoration:none;white-space:nowrap}
.download-button:hover{color:var(--on-accent);text-decoration:none}
.download-button:active{transform:translateY(3px);box-shadow:var(--shadow-pressed)}
.download-button:focus-visible{outline-offset:4px;border-radius:var(--radius-hero)}
@media (forced-colors:active){.download-button{border:var(--stroke-hairline) solid ButtonText}}

/* /download: one primary, then the facts as plain sections. */
.download-page{padding-block:72px 112px}
.download-hero{display:grid;justify-items:start;gap:var(--space-16);max-width:var(--measure)}
.download-latest{font-size:15px;line-height:1.45;color:var(--ink-2)}
.download-latest code{font-size:inherit;color:var(--ink)}
.download-hero .lead{display:grid;gap:var(--space-12)}
.download-hero .lead p{font:400 24px/1.45 var(--font-serif);color:var(--ink)}
.download-action{margin-top:var(--space-16)}
.brew-label{margin-top:var(--space-16)}
.download-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-48) var(--space-64);margin-top:var(--space-96)}
.download-details section,.download-changelog{display:grid;gap:var(--space-12);align-content:start}
.download-details h2,.download-changelog>h2{font:500 30px/1.15 var(--font-serif);letter-spacing:-0.01em}
.download-details p,.download-details li{color:var(--ink-2)}
.download-details .ruled>div{grid-template-columns:minmax(96px,.5fr) 2fr}
.checksum{display:block;padding:var(--space-12);border-radius:var(--radius-inset);background:var(--inset);font-size:var(--web-mono-evidence-size);line-height:var(--web-mono-evidence-line);color:var(--ink);overflow-wrap:anywhere}
.download-install ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-12);counter-reset:step}
.download-install li{display:grid;grid-template-columns:var(--space-24) 1fr;gap:var(--space-8);counter-increment:step}
.download-install li::before{content:counter(step);font-family:var(--font-mono);font-size:var(--web-caption-size);color:var(--ink-3)}
.download-changelog{margin-top:var(--space-96)}
.download-page>.wrap>.small{margin-top:var(--space-32);font-size:15px}
.download-hero h1{margin:0}
.download-details p,.download-details li,.changelog-entry li,.changelog-summary{font-size:17px;line-height:1.55}

/* /changelog: receipt-style heads, no per-type badges. */
.changelog{list-style:none;margin:0;padding:0;max-width:var(--measure)}
.changelog-entry{display:grid;gap:var(--space-8);padding:var(--space-24) 0;border-top:var(--stroke-hairline) solid var(--hairline)}
.changelog-entry h2,.changelog-entry h3{font:500 28px/1.15 var(--font-serif);letter-spacing:-0.01em}
.changelog-meta{font-size:15px;line-height:1.45;color:var(--ink-2)}
.changelog-meta code{font-size:inherit;color:var(--ink)}
.changelog-latest{display:inline-flex;align-items:center;gap:var(--space-4)}
.changelog-latest::before{content:"";width:var(--dot);height:var(--dot);border-radius:var(--radius-dot);background:var(--amber)}
.changelog-summary{color:var(--ink)}
.changelog-entry ul{margin:0;padding-left:1.1em;display:grid;gap:var(--space-4)}
.changelog-entry li{color:var(--ink-2)}
.changelog-page{padding-bottom:var(--space-96)}
@media (max-width:980px){
  .download-details{grid-template-columns:1fr}
}
@media (forced-colors:active){.changelog-latest::before{background:CanvasText}}
@media (prefers-reduced-motion:reduce){.download-button{transition:none}}