/* Hallmark · shape: Workbench · genre: atmospheric · theme: brand · redesign: full · job: try
 * paper: oklch(15% 0.006 285) · accent: oklch(65% 0.18 287) · display: Geist · body: Geist · hero: Stage · nav: floating pill · footer: mast · imagery: screenshots 9 (ui fixtures) · product built in hero · signature: the live session list, statuses moving the way they do in the app
 * axes: dark/grotesk/violet · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the page argues breadth more than one point; the hero leads with one live session list instead of the feature list, and every section opens on its own head */

/* Hallmark · dismissed 19 · "See how it works" jumps to the window capture, the one thing to do while the installers are coming soon */
/* Hallmark · dismissed 59 · ten sections because each of the app's surfaces (window, side pane, design canvas, MCP tools, headless engine, themes) is its own screen, and the roadmap already shares the download band */
/* Hallmark · answered F25 · on a phone the replica shows the session list, the signature; the chat pane is the desktop window's second column and the window capture below shows it */
/* Hallmark · reworded "won't" and "it's" in two heads to curly apostrophes · F1 asks for typographic quotes */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved, 1 for the owner (the Download label beside "coming soon") */
/* Hallmark · finish-review: subagent · fix · 6 findings · 5 resolved, 1 for the owner (two generic heads) · gap: the tools sit under the call log, not beside it */

/* Halterio landing, halterio.com. The app's look: charcoal frost on a dim wallpaper, Geist, the Halterio Dark accent. */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Geist"; src: url("/fonts/Geist.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Project chips in the session list replica */
  --chip-fieldnotes: oklch(62% 0.13 265 / 0.5); --chip-api-server: oklch(66% 0.15 45 / 0.45); --chip-ledger: oklch(76% 0.13 165 / 0.4); --chip-ios: oklch(70% 0.13 295 / 0.45); --chip-docs: oklch(86% 0.16 95 / 0.35);
  /* Light screenshots sit on the app's light shell */
  --color-shot-light: oklch(93% 0.003 285);
  /* Theme swatches: the real palettes, from crates/theme/src/builtins.rs */
  --sw-halterio-dark: #060606; --sw-halterio-dark-shell: #0d0d0d; --sw-halterio-dark-accent: #8b7cf6; --sw-halterio-dark-fg: #e8e8ea;
  --sw-halterio-light: #ffffff; --sw-halterio-light-shell: #f3f3f5; --sw-halterio-light-accent: #5b43e8; --sw-halterio-light-fg: #303035;
  --sw-dark: #1e1e1e; --sw-dark-shell: #181818; --sw-dark-accent: #007acc; --sw-dark-fg: #d4d4d4;
  --sw-light: #ffffff; --sw-light-shell: #f3f3f3; --sw-light-accent: #0078d4; --sw-light-fg: #1f1f1f;
  --sw-catppuccin-mocha: #1e1e2e; --sw-catppuccin-mocha-shell: #181825; --sw-catppuccin-mocha-accent: #cba6f7; --sw-catppuccin-mocha-fg: #cdd6f4;
  --sw-catppuccin-latte: #eff1f5; --sw-catppuccin-latte-shell: #e6e9ef; --sw-catppuccin-latte-accent: #8839ef; --sw-catppuccin-latte-fg: #4c4f69;
  --sw-tokyo-night: #1a1b26; --sw-tokyo-night-shell: #16161e; --sw-tokyo-night-accent: #7aa2f7; --sw-tokyo-night-fg: #c0caf5;
  --sw-tokyo-night-light: #d5d6db; --sw-tokyo-night-light-shell: #cbccd1; --sw-tokyo-night-light-accent: #34548a; --sw-tokyo-night-light-fg: #343b59;
  --sw-dracula: #282a36; --sw-dracula-shell: #21222c; --sw-dracula-accent: #bd93f9; --sw-dracula-fg: #f8f8f2;
  --sw-github-light: #ffffff; --sw-github-light-shell: #f6f8fa; --sw-github-light-accent: #0969da; --sw-github-light-fg: #1f2328;
  --sw-github-dark: #0d1117; --sw-github-dark-shell: #010409; --sw-github-dark-accent: #2f81f7; --sw-github-dark-fg: #e6edf3;
  --sw-ayu-light: #fcfcfc; --sw-ayu-light-shell: #f8f9fa; --sw-ayu-light-accent: #f29718; --sw-ayu-light-fg: #5c6166;
  --sw-ayu-dark: #10141c; --sw-ayu-dark-shell: #0d1017; --sw-ayu-dark-accent: #e6b450; --sw-ayu-dark-fg: #bfbdb6;
  --sw-ayu-mirage: #242936; --sw-ayu-mirage-shell: #1f2430; --sw-ayu-mirage-accent: #ffcc66; --sw-ayu-mirage-fg: #cccac2;
  --sw-gruvbox-light: #fbf1c7; --sw-gruvbox-light-shell: #f2e5bc; --sw-gruvbox-light-accent: #076678; --sw-gruvbox-light-fg: #3c3836;
  --sw-gruvbox-dark: #282828; --sw-gruvbox-dark-shell: #1d2021; --sw-gruvbox-dark-accent: #8ec07c; --sw-gruvbox-dark-fg: #ebdbb2;
  --sw-rose-pine-dawn: #faf4ed; --sw-rose-pine-dawn-shell: #f2e9e1; --sw-rose-pine-dawn-accent: #907aa9; --sw-rose-pine-dawn-fg: #575279;
  --sw-rose-pine-moon: #232136; --sw-rose-pine-moon-shell: #1f1d2e; --sw-rose-pine-moon-accent: #c4a7e7; --sw-rose-pine-moon-fg: #e0def4;
  --sw-nord: #2e3440; --sw-nord-shell: #292e39; --sw-nord-accent: #88c0d0; --sw-nord-fg: #d8dee9;
  --sw-one-dark-pro: #282c34; --sw-one-dark-pro-shell: #21252b; --sw-one-dark-pro-accent: #528bff; --sw-one-dark-pro-fg: #abb2bf;
  --sw-atom-one-dark: #282c34; --sw-atom-one-dark-shell: #21252b; --sw-atom-one-dark-accent: #528bff; --sw-atom-one-dark-fg: #abb2bf;
  --sw-night-owl: #011627; --sw-night-owl-shell: #01111d; --sw-night-owl-accent: #82aaff; --sw-night-owl-fg: #d6deeb;
  --sw-night-owl-light: #fbfbfb; --sw-night-owl-light-shell: #f0f0f0; --sw-night-owl-light-accent: #4876d6; --sw-night-owl-light-fg: #403f53;
  --sw-winter-is-coming-dark-blue: #011627; --sw-winter-is-coming-dark-blue-shell: #01111d; --sw-winter-is-coming-dark-blue-accent: #219fd5; --sw-winter-is-coming-dark-blue-fg: #d6deeb;
  --sw-winter-is-coming-light: #ffffff; --sw-winter-is-coming-light-shell: #f3f3f3; --sw-winter-is-coming-light-accent: #2f86d2; --sw-winter-is-coming-light-fg: #1857a4;
  --sw-palenight: #292d3e; --sw-palenight-shell: #232635; --sw-palenight-accent: #82aaff; --sw-palenight-fg: #eeffff;
  --sw-synthwave-84: #262335; --sw-synthwave-84-shell: #241b2f; --sw-synthwave-84-accent: #ff7edb; --sw-synthwave-84-fg: #ffffff;
  --sw-shades-of-purple: #2d2b55; --sw-shades-of-purple-shell: #222244; --sw-shades-of-purple-accent: #fad000; --sw-shades-of-purple-fg: #ffffff;
  --sw-cobalt2: #193549; --sw-cobalt2-shell: #15232d; --sw-cobalt2-accent: #ffc600; --sw-cobalt2-fg: #ffffff;
  --sw-andromeda: #23262e; --sw-andromeda-shell: #1e2027; --sw-andromeda-accent: #00e8c6; --sw-andromeda-fg: #d5ced9;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { line-height: 1.6; position: relative; text-rendering: optimizeLegibility; }
a { text-decoration: none; }
code, kbd, pre { font-family: var(--font-outlier); }
h1, h2, h3, h4 { font-weight: var(--display-weight); }
h3 { letter-spacing: -0.015em; }
p a, li a { color: var(--color-accent-soft); text-decoration: underline; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-2xl)); padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-inner); z-index: var(--z-modal); font-weight: 500; }
.skip:focus-visible { top: var(--space-md); }

/* The wallpaper the frost sits on: two fixed blooms, never animated. */
.wallpaper { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(30% 42% at 70% 34%, var(--color-bloom-1), transparent 74%),
  radial-gradient(26% 36% at 8% 78%, var(--color-bloom-2), transparent 74%),
  var(--color-paper); }

/* ---------- Controls, all eight states ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-inner); background: var(--color-ink); color: var(--color-paper); font: 500 var(--text-md)/1 var(--font-body); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn.ghost, .btn.quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.btn.ghost:hover, .btn.quiet:hover { background: var(--color-wash-1); border-color: var(--color-muted); }
.btn.small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn.tiny { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } .btn:active { transform: none; } }

/* ---------- Nav: a floating pill on the one blur ---------- */
.site-header { position: sticky; top: var(--space-sm); z-index: var(--z-sticky-nav); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); border-radius: var(--radius-pill); background: var(--color-frost); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 0 0 1px var(--color-frost-line); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 500; letter-spacing: -0.01em; color: var(--color-ink); border-radius: var(--radius-inner); }
.brand img { width: 24px; height: 20px; }
.brand:hover { color: var(--color-ink-2); }
.brand:focus-visible, .nav a:focus-visible, .site-footer a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav { display: flex; align-items: center; gap: var(--space-lg); }
.nav a:not(.btn) { font-size: var(--text-sm); color: var(--color-ink-2); border-radius: var(--space-2xs); transition: color var(--dur-short) var(--ease-out); }
.nav a:not(.btn):hover { color: var(--color-ink); }
.nav a:not(.btn):active { color: var(--color-muted); }
.nav .btn { border-radius: var(--radius-pill); }
@media (max-width: 52rem) { .nav a:not(.btn) { display: none; } }

/* ---------- Hero: Stage, the copy on five columns, the live list on seven ---------- */
.hero { min-height: calc(100svh - 76px); display: grid; align-items: center; padding-block: var(--space-xl) var(--space-2xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.hero-copy { display: grid; justify-items: start; gap: var(--space-lg); }
.hero-copy h1 { font-size: clamp(2.75rem, 3.6vw + 0.75rem, 4.25rem); line-height: 1.02; max-width: 12ch; }
.hero-copy .lead { color: var(--color-ink-2); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero-note { font-size: var(--text-sm); color: var(--color-muted); max-width: 40ch; }
.harnesses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); margin: var(--space-xs) 0 0; padding: var(--space-md) 0 0; list-style: none; border-top: 1px solid var(--color-rule); max-width: 34rem; }
.harness { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 0; font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }
.hero-visual { margin: 0; display: grid; gap: var(--space-sm); }
.win-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
html:not(.js) [data-loop-toggle] { display: none; }
@media (prefers-reduced-motion: reduce) { [data-loop-toggle] { display: none; } }
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-top: var(--space-2xl); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); justify-items: start; }
  .hero-copy { display: contents; }
  .hero-visual { order: 1; width: 100%; margin-top: var(--space-md); }
  .harnesses { order: 2; width: 100%; }
  .harness { font-size: var(--text-xs); }
}

/* Provider marks: the app's own SVGs (crates/ui/assets/icons/*-mark.svg), masked so they take the text colour.
   Claude keeps its orange, every other mark is monochrome, as in the app's picker rail. */
.mark { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.mark-claude { --mark: url("/assets/marks/claude.svg"); color: var(--color-claude); }
.mark-openai { --mark: url("/assets/marks/openai.svg"); }
.mark-cursor { --mark: url("/assets/marks/cursor.svg"); }
.mark-devin { --mark: url("/assets/marks/devin.svg"); }
.mark-grok { --mark: url("/assets/marks/grok.svg"); }
.mark-hermes { --mark: url("/assets/marks/hermes.svg"); }
.mark-pi { --mark: url("/assets/marks/pi.svg"); }
.mark-opencode { --mark: url("/assets/marks/opencode.svg"); }
.mark-antigravity { --mark: url("/assets/marks/antigravity.svg"); }

/* ---------- The session list replica: the product, built, in a slot a capture can replace ---------- */
.win[data-slot] { border-radius: var(--radius-card); overflow: hidden; display: grid; grid-template-columns: 300px minmax(0, 1fr); height: clamp(540px, 74svh, 660px); font-size: 13px; line-height: 1.35; user-select: none; background: var(--color-frost); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 0 0 1px var(--color-frost-line), 0 40px 100px -40px var(--color-shade); color: var(--color-ink); }
.win-sidebar { background: var(--color-wash-1); border-right: 1px solid var(--color-frost-line); display: flex; flex-direction: column; min-height: 0; }
.win-main { display: flex; flex-direction: column; min-height: 0; }
.rp-bar { height: 44px; display: flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-md); color: var(--color-muted); flex: none; }
.rp-bar svg { width: 15px; height: 15px; }
.rp-bar .tb-icons, .rp-bar .right { display: inline-flex; gap: var(--space-md); }
.rp-bar .right { margin-left: auto; }
.rp-bar .tab-title { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 500; color: var(--color-ink); }
.rp-bar .tab-title .mark { width: 13px; height: 13px; }
.sb-nav { padding: var(--space-3xs) var(--space-sm) 0; display: grid; gap: 1px; }
.sb-nav-row { display: flex; align-items: center; gap: var(--space-sm); height: 28px; padding: 0 var(--space-xs); border-radius: var(--space-xs); }
.sb-nav-row svg { width: 15px; height: 15px; flex: none; color: var(--color-ink-2); }
.sb-nav-row .count { margin-left: auto; font: 400 11px/1 var(--font-outlier); background: var(--color-wash-2); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); min-width: 20px; text-align: center; }
.sb-section { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-md) var(--space-2xs) var(--space-lg); font-size: 12px; color: var(--color-muted); }
.sb-section svg { width: 12px; height: 12px; }
.sb-list { position: relative; flex: 1; overflow: hidden; padding: 0 var(--space-xs); min-height: 0; }
.sb-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(180deg, transparent, var(--color-shade)); pointer-events: none; }
.sb-row { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-inner); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); min-width: 0; overflow: hidden; }
.sb-row.selected { background: var(--color-wash-2); }
.sb-row .l1 { display: flex; align-items: center; font-size: 12px; color: var(--color-muted); }
.sb-row .l1 .meta { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2xs); }
.sb-row[data-status="done"] .meta { color: var(--color-success); }
.sb-row[data-status="working"] .meta { color: var(--color-accent-soft); }
.sb-row[data-status="needs"] .meta { color: var(--color-warning); }
.sb-row .meta .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sb-row[data-status="needs"] .dot { background: transparent; border: 1.5px solid currentColor; border-right-color: transparent; width: 8px; height: 8px; }
.is-running .sb-row[data-status="needs"] .dot { animation: spin 1s linear infinite; }
.sb-row .l2 { display: flex; align-items: center; gap: var(--space-xs); font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.sb-row .l2 .title { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, var(--color-ink) 88%, transparent); mask-image: linear-gradient(90deg, var(--color-ink) 88%, transparent); }
.sb-row .mark { width: 13px; height: 13px; }
.sb-row .mono { width: 16px; height: 16px; border-radius: var(--space-2xs); display: grid; place-items: center; font: 400 9px/1 var(--font-outlier); background: var(--chip, var(--color-wash-3)); flex: none; }
.sb-row .l3 { display: flex; align-items: center; gap: var(--space-xs); font-size: 11px; line-height: 1; color: var(--color-muted); }
.sb-row .l3 svg { width: 11px; height: 11px; flex: none; }
.sb-row .l3 .branch { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-row .l3 .right { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-xs); flex: none; font-family: var(--font-outlier); }
.sb-row .l3 .add, .sb-row .l3 .pr { color: var(--color-success); }
.sb-row .l3 .del { color: var(--color-error); }
.sb-row .l3 .pr { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.sb-row .ask { display: none; font-size: 12px; color: var(--color-warning); padding-top: var(--space-3xs); }
.sb-row[data-status="needs"] .ask { display: block; }
.sb-footer { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-frost-line); }
.sb-footer .avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--color-wash-3); display: grid; place-items: center; font-size: 10px; }
.sb-footer .right { margin-left: auto; display: inline-flex; gap: var(--space-sm); color: var(--color-muted); }
.sb-footer .right svg { width: 15px; height: 15px; }
.transcript { flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, var(--color-ink) var(--space-2xl)); mask-image: linear-gradient(transparent, var(--color-ink) var(--space-2xl)); padding: var(--space-lg) var(--space-xl) 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-lg); }
.bubble { align-self: flex-end; max-width: 80%; background: var(--color-wash-2); border-radius: var(--space-md); padding: var(--space-sm) var(--space-md); font-size: 13.5px; line-height: 1.5; }
.assistant { font-size: 13.5px; line-height: 1.55; display: grid; gap: var(--space-sm); max-width: 52ch; }
.assistant code { font-size: 12px; background: var(--color-accent-wash); color: var(--color-accent-soft); padding: 0.1em 0.4em; border-radius: 5px; }
.toolgroup { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--space-xs); background: var(--color-wash-1); box-shadow: 0 0 0 1px var(--color-frost-line); color: var(--color-ink-2); font-size: 12px; justify-self: start; }
.toolgroup svg { width: 13px; height: 13px; }
.stream::after { content: ""; display: inline-block; width: 7px; height: 13px; background: var(--color-ink); margin-left: var(--space-2xs); vertical-align: -2px; }
.is-running .stream::after { animation: caret 1s steps(2) 5; }
@keyframes caret { to { opacity: 0; } }
.composer { margin: var(--space-md) var(--space-lg) 0; border-radius: var(--space-md); box-shadow: 0 0 0 1px var(--color-frost-line); background: var(--color-shade); display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); flex: none; }
.composer svg { width: 16px; height: 16px; flex: none; color: var(--color-muted); }
.composer .placeholder { color: var(--color-muted); font-size: 13.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer .model { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: 12.5px; white-space: nowrap; flex: none; }
.composer .model .mark { width: 13px; height: 13px; }
.composer .send { width: 30px; height: 30px; border-radius: 50%; background: var(--color-ink); color: var(--color-paper); display: grid; place-items: center; font-size: 15px; }
.statusline { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-xl) var(--space-md); font-size: 12px; color: var(--color-muted); flex: none; white-space: nowrap; overflow: hidden; }
.statusline > span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.statusline .right { margin-left: auto; }
.statusline svg { width: 12px; height: 12px; }
.ring { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(var(--color-accent) var(--p, 39%), var(--color-wash-3) 0); display: inline-block; margin-right: var(--space-2xs); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sb-row .dot, .stream::after { animation: none !important; } }
@media (max-width: 85rem) { .win[data-slot] { grid-template-columns: 272px minmax(0, 1fr); } .statusline > span:nth-child(2) { display: none; } .transcript { padding-inline: var(--space-lg); } }
@media (max-width: 60rem) { .win[data-slot] { grid-template-columns: minmax(0, 1fr); height: 560px; } .win-main { display: none; } .win-sidebar { border-right: 0; } }

/* ---------- Sections ---------- */
.section { padding-top: var(--section-gap); }
.section.gap-s { padding-top: var(--section-gap-s); }
.section.gap-l { padding-top: var(--section-gap-l); }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); }
.head h2 { grid-column: 1 / span 6; max-width: 20ch; }
.head .lead { grid-column: 8 / span 5; color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.6; max-width: 56ch; }
.head-stack { row-gap: var(--space-lg); }
.head-stack h2, .head-stack .lead { grid-column: 1 / span 7; }
@media (max-width: 60rem) { .head { grid-template-columns: minmax(0, 1fr); } .head h2, .head .lead { grid-column: 1; } }

figure { margin: 0; }
figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
figcaption b { font-weight: 500; color: var(--color-ink-2); }
.shot { width: 100%; height: auto; border-radius: min(1vw, var(--radius-card)); background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-frost-line), 0 40px 90px -50px var(--color-shade); }
.shot.light { background: var(--color-shot-light); }
/* A macOS window capture brings its own corners and shadow on a transparent margin */
.shot.window { background: none; box-shadow: none; border-radius: 0; }
:not(pre) > code { font-size: 0.86em; color: var(--color-ink); background: var(--color-wash-2); padding: 0.1em 0.4em; border-radius: 5px; overflow-wrap: anywhere; }

/* The window: one capture across all twelve columns, three facts beneath it on hairlines. */
.showcase figcaption { max-width: 70ch; }
.facts { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.facts li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); }
.facts p, .notes p, .tile p, .panel-copy p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* Side pane: a segmented control, like Page | Canvas in the app; each panel is a split. */
.tabs { display: inline-flex; flex-wrap: wrap; gap: var(--space-3xs); padding: var(--space-2xs); border-radius: var(--radius-card); background: var(--color-paper-2); margin-bottom: var(--space-xl); }
.tab { appearance: none; min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-inner); background: transparent; color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.tab:hover { color: var(--color-ink); background: var(--color-wash-1); }
.tab:active { background: var(--color-wash-2); }
.tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tab:disabled { opacity: 0.55; cursor: not-allowed; }
.tab[aria-selected="true"] { color: var(--color-ink); background: var(--color-paper-3); }
@media (max-width: 40rem) { .tabs { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, var(--color-ink) 85%, transparent); mask-image: linear-gradient(90deg, var(--color-ink) 85%, transparent); } .tab { flex: none; } .code pre, .code.code-lg pre, .engine .code pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-xs); padding: var(--space-md); } }
.tab-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.tab-panel[hidden] { display: none; }
.panel-copy { display: grid; gap: var(--space-md); align-content: start; }
.panel-copy ul { margin: var(--space-xs) 0 0; padding: 0; list-style: none; display: grid; color: var(--color-ink-2); font-size: var(--text-sm); }
.panel-copy li { padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.tab-panel figure { max-height: 640px; display: grid; place-items: center; }
.tab-panel .shot { max-height: 640px; width: auto; max-width: 100%; }
@media (max-width: 60rem) { .tab-panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* Design canvas: a bento, the comment tile leads. */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.tile { grid-column: span 5; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); align-content: start; }
.tile-lead, .tile-code { grid-column: span 7; }
.tile-copy { display: grid; gap: var(--space-sm); }
.tile h3 { display: flex; align-items: center; gap: var(--space-sm); }
.tile h3 svg { width: 20px; height: 20px; color: var(--color-accent-soft); flex: none; }
.tile .shot { align-self: end; border-radius: var(--radius-inner); box-shadow: 0 0 0 1px var(--color-frost-line); }
.tile-code { align-content: start; grid-template-rows: auto auto; }
.tile-code .code pre { background: transparent; padding: var(--space-lg) 0 0; border-top: 1px solid var(--color-rule-2); border-radius: 0; }
@media (max-width: 60rem) { .bento { grid-template-columns: minmax(0, 1fr); } .tile, .tile-lead, .tile-code { grid-column: 1; padding: var(--space-lg); } }

/* Code: real terminal text in a well, no window chrome. */
.code pre { margin: 0; padding: var(--space-lg); border-radius: var(--radius-inner); background: var(--color-paper); font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-2); overflow-x: auto; tab-size: 2; }
.code-lg pre { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.code pre:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.code .p { color: var(--color-accent-soft); }
.code .c { color: var(--color-muted); }
.code .k { color: var(--color-ink); }
.code .s { color: var(--color-accent-soft); }
.code .g { color: var(--color-success); }
.code .y { color: var(--color-warning); }

/* Agents for agents: a split, then the tools across four columns. */
.orch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.orch-copy { display: grid; gap: var(--space-lg); }
.orch-copy .lead { color: var(--color-ink-2); }
.tools { margin-top: var(--space-3xl); display: grid; gap: var(--space-lg); }
.tool-list { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.tool { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: 1px solid var(--color-rule-2); }
.tool dt code { font-size: var(--text-sm); background: none; padding: 0; color: var(--color-accent-soft); }
.tool dd { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 60rem) { .orch { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .tool-list { grid-template-columns: minmax(0, 1fr); } }

/* Headed or headless: the commands beside four notes in rows. */
.engine { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.engine-copy { display: grid; gap: var(--space-xl); align-content: start; }
.engine-head { display: grid; gap: var(--space-md); }
.engine-head .lead { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.6; }
.engine .code pre { padding: var(--space-2xl) var(--space-xl); font-size: var(--text-md); line-height: 2; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; }
.notes li { display: grid; gap: var(--space-xs); padding: var(--space-lg) 0; border-top: 1px solid var(--color-rule); }
.notes li:first-child { border-top-color: var(--color-rule-2); }
.notes h3 { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-lg); }
.notes h3 svg { width: 20px; height: 20px; color: var(--color-accent-soft); flex: none; }
@media (max-width: 60rem) { .engine { grid-template-columns: minmax(0, 1fr); } .engine-copy { order: -1; } }

/* Themes: the catalogue, six across. */
.themes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
.theme { --bg: var(--color-paper); --shell: var(--color-paper-2); --accent: var(--color-accent); --fg: var(--color-ink); border-radius: var(--radius-inner); overflow: hidden; background: var(--bg); aspect-ratio: 16 / 10; position: relative; display: grid; grid-template-columns: 34% 1fr; box-shadow: 0 0 0 1px var(--color-frost-line); }
.theme .side { background: var(--shell); padding: var(--space-xs); display: grid; gap: var(--space-2xs); align-content: start; }
.theme .side i { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 25%, transparent); width: 80%; }
.theme .side i:first-child { background: var(--accent); width: 60%; }
.theme .main { padding: var(--space-xs); display: grid; gap: var(--space-2xs); align-content: start; }
.theme .main i { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 18%, transparent); }
.theme .main i:nth-child(2) { width: 70%; } .theme .main i:nth-child(3) { width: 85%; background: color-mix(in srgb, var(--accent) 60%, transparent); } .theme .main i:nth-child(4) { width: 50%; }
.theme .name { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-2xs) var(--space-xs); font-size: 12px; line-height: 1.2; color: var(--fg); background: color-mix(in srgb, var(--bg) 88%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 75rem) { .themes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 60rem) { .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ: the head on four columns beside the questions in rows. */
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.faq-grid h2 { grid-column: 1 / span 4; position: sticky; top: var(--space-3xl); }
.faq { grid-column: 5 / span 8; display: grid; border-top: 1px solid var(--color-rule-2); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; padding: var(--space-md) 0; font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em; border-radius: var(--space-2xs); transition: color var(--dur-short) var(--ease-out); }
.faq summary:hover { color: var(--color-ink-2); }
.faq summary:active { color: var(--color-muted); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--text-xl); line-height: 1; font-weight: 400; color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 var(--space-lg); color: var(--color-ink-2); max-width: 64ch; text-wrap: pretty; }
@media (max-width: 60rem) { .faq-grid { grid-template-columns: minmax(0, 1fr); } .faq-grid h2, .faq { grid-column: 1; } .faq-grid h2 { position: static; } }

/* The close: a band of its own paper, the download, then the roadmap. */
.band { margin-top: var(--section-gap-l); padding-block: var(--section-gap-s); background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 -1px 0 var(--color-rule); }
.download { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.download-copy { display: grid; gap: var(--space-lg); }
.download-copy h2 { font-size: var(--text-display-s); max-width: 14ch; }
.download-copy .lead { color: var(--color-ink-2); }
.platforms-list { list-style: none; margin: 0; padding: 0; display: grid; }
.platform { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-lg) 0; border-top: 1px solid var(--color-rule-2); }
.platform:last-child { border-bottom: 1px solid var(--color-rule-2); }
.platform svg { width: 24px; height: 24px; color: var(--color-ink-2); }
.platform h3 { font-size: var(--text-lg); }
.platform p { color: var(--color-ink-2); font-size: var(--text-sm); }
.platform .tag { font-size: var(--text-sm); color: var(--color-accent-soft); white-space: nowrap; }
.roadmap-block { margin-bottom: var(--section-gap-s); padding-bottom: var(--space-3xl); border-bottom: 1px solid var(--color-rule); }
.roadmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.milestone { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-lg); border-top: 2px solid var(--color-rule-2); }
.milestone.now { border-top-color: var(--color-accent); }
.milestone .v { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.milestone.now .v { color: var(--color-accent-soft); }
.milestone h3 { font-size: var(--text-lg); }
.milestone p { color: var(--color-ink-2); font-size: var(--text-sm); }
@media (max-width: 75rem) { .roadmap { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-xl); } }
@media (max-width: 60rem) { .download { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .roadmap { grid-template-columns: minmax(0, 1fr); } }

/* Footer: a mast, the wordmark large over the links. */
.site-footer { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-paper); color: var(--color-muted); font-size: var(--text-sm); }
.brand.mast { font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -0.045em; gap: var(--space-md); line-height: 1; }
.brand.mast img { width: clamp(48px, 6vw, 84px); height: auto; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.site-footer h4 { margin: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.site-footer ul a { color: var(--color-ink-2); text-decoration: none; border-radius: var(--space-2xs); transition: color var(--dur-short) var(--ease-out); }
.site-footer ul a:hover { color: var(--color-ink); text-decoration: underline; }
.site-footer ul a:active { color: var(--color-muted); }
.site-footer .fine { max-width: 48ch; text-wrap: pretty; }
.site-footer .fine + .fine { margin-top: var(--space-md); }
@media (max-width: 40rem) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* One reveal, a fade, hidden only once the script has run. */
.js .reveal { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.js .reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transition: none; } }