/* One stylesheet for home's tree, blueprint band and S5 sections (blueprint.css was folded in here, unchanged and in
   the same cascade order, so home's first paint waits on one request fewer). */
/* Home: the save-point tree (#tree) and the blueprint band (#blueprint). Owned by tm.
   Monochrome: paper, white, ink. Green and red mean a verdict and nothing else.
   Departure Mono is a pixel face: used only at 22 px (twice its 11 px grid), for ids, sheet numbers and balloons. */
@font-face {
  font-family: "Departure Mono";
  src: url("fonts/departure-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.home { --px: "Departure Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }

/* ---------- The tree ---------- */
body.home .tree-block { max-width: 1200px; margin: 0 auto; padding-top: clamp(72px, 10vw, 136px); color: #141414; }
.tree-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: 36px; }
.tree-head h2 { margin: 0; font: 750 clamp(34px, 4.4vw, 58px)/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.tree-head .lead { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.55; color: #3a3936; }
.tree-head code, .tree-cap code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: max(.9em, 13px); }

.tree-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  grid-template-areas: "stage log" "read log" "acts log"; background: #fff; border: 1.5px solid #141414; border-radius: 20px;
  box-shadow: 4px 4px 0 #141414; overflow: hidden; }
.tree-stage { grid-area: stage; position: relative; display: grid; justify-items: center; margin: 22px 22px 0; min-height: 168px; }
.tree-canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.tree-nodes { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.tree-nodes[hidden], .tree-static[hidden] { display: none; }
.tnode { position: absolute; width: 44px; height: calc(var(--n, 21px) + 32px); transform: translateX(-50%); margin: 0; padding: calc(var(--n, 21px) + 8px) 0 0;
  border: 0; border-radius: 8px; background: none; color: #66635d; font: 500 13px/1 "IBM Plex Mono", ui-monospace, monospace; cursor: pointer; }
.tnode[aria-pressed="true"] { color: #141414; font-weight: 600; }
.tnode:focus-visible { outline: 2px solid #141414; outline-offset: 2px; }
.tree-static { align-self: center; justify-self: stretch; margin: 0; padding: 8px 0 20px; list-style: none; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.tree-static .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; }
.tree-static b { display: inline-block; min-width: 44px; padding: 1px 6px; border-radius: 5px; font: 600 13px/1.5 "IBM Plex Mono", ui-monospace, monospace; text-align: center; }
.v-pass { background: #dff3e4; color: #17733e; }
.v-fail { background: #fbe1db; color: #b3261e; }

.tree-read { grid-area: read; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0; padding: 14px 24px; border-top: 1px solid #e4e0d7; }
.tree-read[hidden], .tree-acts[hidden], .tree-log[hidden] { display: none; }
.tree-id { margin: 0; font: 22px/1 var(--px); letter-spacing: 0; color: #141414; }
.tree-note { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 15px; line-height: 1.4; color: #3a3936; }
[data-tree-verdict] { padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: #3a3936; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .24); }
[data-tree-verdict][data-v="PASS"] { background: #dff3e4; color: #17733e; box-shadow: none; }
[data-tree-verdict][data-v="FAIL"] { background: #fbe1db; color: #b3261e; box-shadow: none; }
[data-tree-verdict][data-v="checking"] { background: #141414; color: #f4f2ed; box-shadow: none; }

.tree-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 24px 24px; }
.tbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1.5px solid #141414; border-radius: 999px;
  background: #fff; color: #141414; font: 600 14.5px/1.2 Inter, system-ui, sans-serif; cursor: pointer;
  transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), box-shadow .16s cubic-bezier(.3, 1.5, .5, 1); }
.tbtn kbd { min-width: 22px; padding: 1px 5px; border: 1px solid currentColor; border-radius: 5px; font: 500 13px/1.3 "IBM Plex Mono", ui-monospace, monospace; text-align: center; }
.tbtn-ink { background: #141414; color: #f4f2ed; box-shadow: 3px 3px 0 #141414; }
.tbtn-ink:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 0 0 0 #141414; }
.tbtn:not(.tbtn-ink):not(:disabled):active { transform: translate(1px, 1px); }
.tbtn-quiet { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.tbtn:disabled { cursor: not-allowed; opacity: .42; }
.tbtn:focus-visible { outline: 2px solid #141414; outline-offset: 3px; }

.tree-log { grid-area: log; display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding: 22px; min-height: 100%;
  background: #141414; color: #f4f2ed; font: 13px/1.65 "IBM Plex Mono", ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.tree-log .d { color: #a8a59f; }
.tree-log .p { color: #8fdca7; }
.tree-log .f { color: #ff9b8f; }
.tree-log .cur { display: inline-block; width: .62em; background: #f4f2ed; animation: tree-cur 1s steps(2, start) infinite; }
@keyframes tree-cur { to { visibility: hidden; } }
.tree-cap { margin: 16px 0 0; max-width: 72ch; font-size: 13.5px; line-height: 1.5; color: #66635d; }

@media (max-width: 860px) {
  .tree-head { grid-template-columns: minmax(0, 1fr); }
  .tree-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "read" "acts" "log"; }
  .tree-stage { margin: 16px 16px 0; }
  .tree-read { padding: 12px 16px; }
  .tree-acts { padding: 4px 16px 18px; }
  .tree-acts .tbtn { flex: 1 1 auto; justify-content: center; }
  .tree-log { min-height: 0; height: calc(9 * 1.65em + 36px); padding: 18px 16px; }
}

/* ---------- The blueprint band ---------- */
body.home .bp { margin: clamp(96px, 12vw, 160px) calc(50% - 50vw) 0; padding: clamp(80px, 10vw, 136px) max(24px, calc(50vw - 600px)) clamp(56px, 7vw, 96px);
  background: #141414; color: #f4f2ed; }
.bp-in { max-width: 1200px; margin: 0 auto; }
.bp-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.bp-head h2 { margin: 0; font: 750 clamp(34px, 4.4vw, 58px)/1.02 var(--display); letter-spacing: -.035em; color: #f4f2ed; }
.bp-head .lead { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.55; color: rgba(244, 242, 237, .78); }

.sheet { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start;
  padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid rgba(244, 242, 237, .16); }
.bp-frame { position: relative; aspect-ratio: 640 / 420; border: 1px solid rgba(244, 242, 237, .3); border-radius: 4px;
  background-color: #171716; background-image: radial-gradient(rgba(244, 242, 237, .13) 1px, transparent 1.3px); background-size: 16px 16px; background-position: 8px 8px; }
.bp-frame::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(244, 242, 237, .12); border-radius: 2px; pointer-events: none; }
.bp-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bp-art .ln { fill: none; stroke: #f4f2ed; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bp-art .dash { stroke-dasharray: 4 5; }
.bp-art .face { fill: #141414; stroke: #f4f2ed; stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bp-art .side { fill: #23231f; stroke: #f4f2ed; stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bp-art .fillp { fill: #f4f2ed; stroke: none; }
.bp-art .okc { fill: #17733e; stroke: #f4f2ed; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.bp-art .noc { fill: #b3261e; stroke: #f4f2ed; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.bp-art .pk { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bp-art .pass { fill: none; stroke: #8fdca7; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bp-art .fail { fill: none; stroke: #ff9b8f; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bp.live .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bp.live [data-at] { opacity: 0; transition: opacity .32s steps(4, end); }
.bp.live [data-at].on { opacity: 1; }

.bal { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 32px; height: 32px; border: 1px solid #f4f2ed; border-radius: 50%; background: #141414; color: #f4f2ed; font: 22px/1 var(--px); }

.bp-notes { min-width: 0; }
.bp-n { margin: 0 0 14px; font: 22px/1 var(--px); color: rgba(244, 242, 237, .62); }
.bp-notes h3 { margin: 0; font: 750 clamp(26px, 2.6vw, 34px)/1.08 var(--display); letter-spacing: -.025em; color: #f4f2ed; }
.bp-lead { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: rgba(244, 242, 237, .8); }
.bp-parts { counter-reset: part; display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.bp-parts li { counter-increment: part; position: relative; min-height: 30px; padding-left: 46px;
  font-size: 15px; line-height: 1.55; color: rgba(244, 242, 237, .88); }
.bp-parts li::before { content: counter(part); position: absolute; left: 0; top: -3px; display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid rgba(244, 242, 237, .6); border-radius: 50%; font: 22px/1 var(--px); color: #f4f2ed; }
.bp-notes code { padding: 1px 5px; border-radius: 4px; background: rgba(244, 242, 237, .09); color: #f4f2ed; font: 13.5px/1.5 "IBM Plex Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.bp-tb { margin: 28px 0 0; border: 1px solid rgba(244, 242, 237, .3); border-radius: 4px; }
.bp-tb div { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
.bp-tb div + div { border-top: 1px solid rgba(244, 242, 237, .3); }
.bp-tb dt { padding: 10px 12px; border-right: 1px solid rgba(244, 242, 237, .3); font: 500 13px/1.5 "IBM Plex Mono", ui-monospace, monospace; color: rgba(244, 242, 237, .66); }
.bp-tb dd { margin: 0; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; min-width: 0; }
.bp-tb dd code { background: none; padding: 0; }

@media (max-width: 980px) {
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .bp-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .bal { width: 24px; height: 24px; font: 600 13px/1 "IBM Plex Mono", ui-monospace, monospace; }
}

/* Home below the stage, in the S5 language (s5.css sets the tokens on body.home). Loads last on home and overrides
   home.css and site.css there; other pages keep their look. #tree and #blueprint are tm's (the first part of this file).
   Paper, ink and white cards with 1.5 px ink edges. The hard shadow only on primary actions and each section's main
   card. Hairlines between rows. Terminals near-black with paper text; green and red only on verdicts.
   Bricolage for headings, Inter for reading, Plex Mono for commands, ids and captions, Departure Mono (a pixel face)
   only for the step numbers, at 22 px (twice its 11 px grid; @font-face at the top of this file). One motion idea: the h2s type in (motion.js). */

:root:has(> body.home) { color-scheme: light; }
body.home {
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pixel: "Departure Mono", "IBM Plex Mono", ui-monospace, monospace;
  --rule: rgba(20, 20, 20, .14);
  --edge: 1.5px solid var(--ink);
  --sy: clamp(72px, 9vw, 128px);
  --term-bg: #141414;
  --term-fg: #f4f2ed;
  --term-dim: #a3a09a;
}

/* Sections: one container, a hairline above each, a numeral, the display h2 and one lead, all left-aligned. */
body.home .after-pin { padding-bottom: 0; }
body.home .after-pin::before, body.home .end::before { display: none; }
body.home .appshot { margin-top: clamp(56px, 7vw, 96px); padding-block: var(--sy); border-top: 1px solid var(--rule); }
body.home .block { padding-block: var(--sy);
  background: linear-gradient(var(--rule), var(--rule)) 50% 0 / min(100% - 2 * var(--inline), var(--container)) 1px no-repeat; }
body.home .block-head { display: block; max-width: 62ch; margin-bottom: clamp(40px, 5vw, 64px); }
body.home :is(.appshot, .block) h2 { max-width: 18ch; margin: 0; font: 750 clamp(36px, 1.1rem + 3.4vw, 68px)/1 var(--display);
  font-variation-settings: normal; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
body.home :is(.appshot, .block) .block-head .lead { max-width: 62ch; margin: clamp(18px, 2vw, 24px) 0 0;
  font-size: clamp(17px, 1rem + .25vw, 20px); line-height: 1.55; letter-spacing: -.005em; color: var(--ink-2); }
body.home :is(.appshot, .block) code { font-size: max(.9em, 13px); }
body.home :is(.appshot, .block) .tw-caret::after { background: var(--ink); }

/* Under the stage: the two local-first facts, plainly. */
body.home .hero-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; color: var(--ink-2); font-size: 15px; }
body.home .hero-facts li { display: flex; align-items: baseline; gap: 10px; }
body.home .hero-facts li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--ink); transform: translateY(-2px); }

/* Buttons: the ink pill with the hard shadow and the spring press; the quiet one is white with an ink edge. */
body.home .block .btn-primary { min-height: 48px; padding: 0 24px; border: var(--edge); border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 600 15px/1 var(--font-body); box-shadow: var(--hard); transition: transform .18s var(--press), box-shadow .18s var(--press); }
body.home .block .btn-primary:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
body.home .block .btn-primary:focus-visible { outline-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { body.home .block .btn-primary:hover { background: var(--term-ink); } }
body.home .block .btn-ghost { min-height: 44px; padding: 0 18px; border: var(--edge); border-radius: 999px; background: var(--card); color: var(--ink);
  box-shadow: none; font: 600 14px/1 var(--font-body); }
@media (hover: hover) and (pointer: fine) { body.home .block .btn-ghost:hover { background: var(--paper); box-shadow: none; } }

/* Verdict pills: the only colour. Works and Broken get their tints; the other two stay ink. */
body.home .verdicts .pill { height: 26px; padding: 0 10px; border-radius: 999px; font: 500 13px/1 var(--font-mono); letter-spacing: 0; }
body.home .verdicts .pill-works { background: var(--works-bg); color: var(--works-fg); }
body.home .verdicts .pill-broken { background: var(--broken-bg); color: var(--broken-fg); }
body.home .verdicts .pill-couldnt { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
body.home .verdicts .pill-couldnt::before { border-radius: 1px; transform: rotate(45deg); }
body.home .verdicts .pill-none { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* 01 The web app: three steps, each beside its real screen. */
body.home .story { gap: clamp(64px, 8vw, 120px); }
body.home .story-n { display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0 0 22px; border: var(--edge); border-radius: 10px;
  box-shadow: none; background: var(--card); color: var(--ink); font: 400 22px/1 var(--pixel); }
body.home .story-text h3 { font: 700 clamp(24px, 1rem + 1vw, 32px)/1.1 var(--display); letter-spacing: -.025em; color: var(--ink); }
body.home .story-text h3 + p { max-width: 44ch; margin-top: 16px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
body.home .verdicts { gap: 0; max-width: 46ch; margin-top: 28px; }
body.home .verdicts div { grid-template-columns: 10.5em minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--rule); }
body.home .verdicts div:last-child { border-bottom: 1px solid var(--rule); }
body.home .verdicts dd { color: var(--ink-2); font-size: 15px; }
body.home .appshot .shot { border: var(--edge); border-radius: 16px; background: var(--card); box-shadow: none; }
body.home .appshot .shot img { outline: 0; }
body.home .dev-engine .card::after, body.home .appshot .shot::after { display: none; }
body.home .appshot .shot figcaption { padding: 11px 16px; border-top: var(--edge); color: var(--ink-3); font: 400 13px/1.5 var(--font-mono); }
@media (max-width: 860px) { body.home .story-row .shot { max-width: 300px; } }
@media (max-width: 360px) { body.home .verdicts div { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* 02 What comes back: two ruled columns in the report's own words. */
body.home .back { gap: 48px clamp(32px, 6vw, 96px); }
body.home .back-h { margin: 0; padding-bottom: 14px; border-bottom: var(--edge); font: 700 clamp(22px, 1rem + .6vw, 28px)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
body.home .back li { padding: 18px 0; border-top: 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
body.home .back li b { color: var(--ink); font-weight: 600; }
body.home .back li code.line, body.home .back-note code { margin-top: 10px; padding: 6px 10px; border-radius: 8px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); font: 400 13px/1.5 var(--font-mono); }
body.home .back-note { max-width: 62ch; margin-top: 40px; color: var(--ink-2); }
body.home .back-note code { margin-block: 10px; }

/* 03 Why not rewind or Git: one white card, ruled rows, and a mark per cell beside its words. */
body.home .cmp-wrap { border: var(--edge); border-radius: 16px; background: var(--card); box-shadow: var(--hard); scrollbar-color: var(--ink-3) var(--card); }
body.home .cmp { font-size: 16px; }
body.home .cmp th, body.home .cmp td { border-bottom: 1px solid var(--rule); }
body.home .cmp thead th { background: var(--card); border-bottom: var(--edge); color: var(--ink-3); font: 500 13px/1.4 var(--font-mono); }
body.home .cmp thead th.tm { color: var(--ink); font-weight: 500; }
body.home .cmp tbody th { color: var(--ink); font-weight: 600; }
body.home .cmp td { color: var(--ink-2); }
body.home .cmp td.yes { color: var(--ink); font-weight: 500; }
body.home .cmp td.no { color: var(--ink-3); }
body.home .cmp td:last-child { background: none; box-shadow: inset 1.5px 0 0 var(--ink); }
body.home .cmp { --cmp-pt: 18px; --cmp-px: 22px; }
body.home .cmp td { position: relative; padding-left: calc(var(--cmp-px) + 22px); }
body.home .cmp td::before { content: ""; position: absolute; left: var(--cmp-px); top: calc(var(--cmp-pt) + .775em - 5px); width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
body.home .cmp td.yes::before { background: var(--ink); }
body.home .cmp td.part::before { border: 1.5px solid var(--ink-2); }
body.home .cmp td.no::before { top: calc(var(--cmp-pt) + .775em - 1px); height: 1.5px; border-radius: 0; background: var(--ink-3); }
body.home .cmp-note { margin-top: 20px; color: var(--ink-3); font-size: 14px; }
@media (max-width: 760px) {
  body.home .cmp { --cmp-pt: 14px; --cmp-px: 16px; }
  body.home .cmp th:first-child { background: var(--card); border-right: 1px solid var(--rule); }
  body.home .cmp thead th:first-child { border-bottom: var(--edge); }
  body.home #cmp-scroll-hint { margin: 0 0 16px; }
}

/* 04 Pay once: the plan is the card; the two notes sit beside it. */
body.home .plans { align-items: start; }
body.home .plan { gap: 12px; padding: clamp(24px, 3vw, 36px); border: var(--edge); border-radius: 20px; background: var(--card); box-shadow: var(--hard); }
body.home .plan-k { color: var(--ink-3); font: 500 13px/1.4 var(--font-mono); }
body.home .plan-price { margin-top: 4px; font: 750 clamp(56px, 2rem + 4vw, 96px)/.95 var(--display);
  font-variation-settings: normal; letter-spacing: -.045em; color: var(--ink); }
body.home .plan-price span { font: italic 400 clamp(24px, 1rem + 1vw, 34px)/1 var(--voice); letter-spacing: -.01em; color: var(--ink-2); }
body.home .plan ul { margin-top: 16px; }
body.home .plan li { border-top: 1px solid var(--rule); color: var(--ink-2); }
body.home .plan li:last-child { border-bottom: 1px solid var(--rule); }
body.home .plan ul + .btn { margin-top: 28px; }
body.home .plan .btn[disabled] { opacity: 1; border: 1.5px dashed var(--ink-3); background: var(--paper); color: var(--ink-3); box-shadow: none; transform: none; }
body.home .plan-status { color: var(--ink-2); }
body.home .plan-aside { gap: 0; }
body.home .plan-aside .plan-note { padding: 20px 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
body.home .plan-aside .plan-note:last-child { border-bottom: 1px solid var(--rule); }
body.home .plan-note b { color: var(--ink); font-weight: 600; }

/* 05 For developers: near-black terminals on paper, the Claude Code card, then the one engine. */
body.home .install-h, body.home .agent-setup-h { color: var(--ink); font: 600 16px/1.4 var(--font-body); }
body.home #try .tag-s { padding: 3px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ink-3); color: var(--ink-2); font: 500 13px/1.2 var(--font-mono); }
body.home #try .term-block pre, body.home #try .card-term, body.home #try .agent-prompt { border-radius: 14px; background: var(--term-bg); box-shadow: none; color: var(--term-fg); font-family: var(--font-mono); }
body.home #try .term-block pre { padding: 22px 24px; font-size: 13px; line-height: 1.75; }
body.home #try :is(.term-block, .card-term) .d { color: var(--term-dim); }
body.home #try :is(.term-block, .card-term) :is(.p, .f) { padding: 1px .35ch; border-radius: 4px; font-weight: 500; }
body.home #try :is(.term-block, .card-term) .p { background: var(--works-bg); color: var(--works-fg); }
body.home #try :is(.term-block, .card-term) .f { background: var(--broken-bg); color: var(--broken-fg); }
body.home #try .term-block pre:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
body.home #try .term-block figcaption { margin-top: 14px; color: var(--ink-3); font: 400 13px/1.5 var(--font-mono); }
body.home #try .term-block figcaption code { font-size: 1em; color: var(--ink-2); }
body.home .install-note { max-width: 62ch; color: var(--ink-2); }
body.home .install-note code, body.home .facts code { color: var(--ink); }
body.home .copy-status { color: var(--ink-2); }
body.home .agent-setup { padding: 24px 24px 20px; border: var(--edge); border-radius: 16px; background: var(--card); box-shadow: var(--hard); }
body.home .agent-setup-t { color: var(--ink-2); }
body.home .agent-setup-t a { color: var(--ink); }
body.home .agent-prompt { padding: 14px 16px; border-radius: 10px; font-size: 13px; }
body.home .facts li { border-top: 1px solid var(--rule); color: var(--ink-2); }
body.home .facts b { color: var(--ink); font-weight: 600; }
body.home .dev-engine { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); }
body.home .dev-engine > h3 { max-width: 24ch; font: 700 clamp(26px, 1rem + 1.4vw, 38px)/1.08 var(--display); letter-spacing: -.03em; color: var(--ink); }
body.home .dev-lead { max-width: 62ch; margin: 16px 0 32px; color: var(--ink-2); }
body.home .dev-engine .cards { gap: 16px; }
body.home .dev-engine .card { gap: 12px; min-height: 0; padding: 26px; border: var(--edge); border-radius: 16px; background: var(--card); box-shadow: none; }
body.home .dev-engine .card-k { width: auto; height: auto; place-items: start; border-radius: 0; box-shadow: none; color: var(--ink-3); font: 400 22px/1 var(--pixel); }
body.home .dev-engine .card h3 { margin-top: 8px; font: 700 clamp(21px, 1rem + .5vw, 25px)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
body.home .dev-engine .card-t { color: var(--ink); }
body.home .dev-engine .card-d { color: var(--ink-2); font-size: 15.5px; }
body.home .dev-engine .card-term { margin-top: 4px; padding: 14px 16px; border-radius: 10px; font-size: 13px; line-height: 1.75; }
body.home .dev-engine .card-f { padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; }
body.home .dev-engine .card-f code { font-size: 13px; color: var(--ink); }
body.home .dev-engine .ok { padding: 3px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font: 500 13px/1.2 var(--font-mono); }
body.home #try .cards + .term-block { margin-top: 16px; }
@media (max-width: 600px) {
  body.home #try .term-block pre { padding: 16px; }
  body.home .dev-engine .card { padding: 22px; }
}

/* 06 The last word: left-aligned, the "not" list in one white card, then the ink pill. */
body.home .end { text-align: left; }
body.home .end h2 { max-width: 16ch; margin: 0 0 clamp(32px, 4vw, 48px); }
body.home .not { max-width: none; margin: 0 0 40px; padding: clamp(22px, 3vw, 36px); border: var(--edge); border-radius: 20px; background: var(--card); }
body.home .not-h { margin: 0 0 16px; color: var(--ink-3); font: 500 13px/1.4 var(--font-mono); }
body.home .not ul { gap: 0 clamp(24px, 4vw, 56px); }
body.home .not li { padding: 16px 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
body.home .not b { color: var(--ink); font-weight: 600; }

/* Footer: paper under an ink rule, quiet columns, mono labels, the wordmark in the hero's two voices. */
body.home .ft { padding: clamp(56px, 7vw, 96px) var(--inline) 32px; border-top: var(--edge); background: var(--paper); color: var(--ink-2); font-size: 15px; }
body.home .ft a { color: var(--ink); }
body.home .ft-brand { color: var(--ink); font: 750 22px/1 var(--display); letter-spacing: -.03em; }
body.home .ft-lead { color: var(--ink-2); }
body.home .ft-status { gap: 0; }
body.home .ft-status div { grid-template-columns: 84px minmax(0, 1fr); padding: 9px 0; border-top: 1px solid var(--rule); }
body.home .ft-status div:last-child { border-bottom: 1px solid var(--rule); }
body.home .ft-status dt { color: var(--ink-3); font: 500 13px/1.6 var(--font-mono); }
body.home .ft-h { color: var(--ink-3); font: 500 13px/1.4 var(--font-mono); }
/* Our own symbols for the three agents (not their logos), one orange: #c2410c is 4.6:1 on paper, 3.6:1 on #141414. */
body.home .agent-support li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; }
body.home .agent-sym { grid-row: span 2; margin-top: 3px; color: #c2410c; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) and (pointer: fine) { body.home .agent-support li:hover .agent-sym { transform: translateY(-2px) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { body.home .agent-sym { transition: none; } body.home .agent-support li:hover .agent-sym { transform: none; } }
body.home .agent-support-name { color: var(--ink); font-size: 15px; }
body.home .agent-support-status { color: var(--ink-2); font-size: 14px; }
body.home .ft-grid .agent-support-note { color: var(--ink-3); font-size: 14px; line-height: 1.55; }
body.home .ft-faq details { border-top: 1px solid var(--rule); }
body.home .ft-faq details:last-child { border-bottom: 1px solid var(--rule); }
body.home .ft-faq summary { color: var(--ink); font-weight: 500; }
body.home .ft-faq summary::after { color: var(--ink); }
body.home .ft-faq details p { color: var(--ink-2); }
body.home nav.ft-col a { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { body.home nav.ft-col a:hover { color: var(--ink); text-decoration: underline; } }
body.home .ft-word { margin-top: clamp(48px, 7vw, 96px); padding: .06em 0 .12em; border-top: 1px solid var(--rule); font: 750 min(11.5vw, 176px)/1.05 var(--display);
  font-variation-settings: normal; letter-spacing: -.05em; color: var(--ink); }
body.home .ft-word em { font: italic 400 1.04em/1 var(--voice); letter-spacing: -.02em; color: var(--ink-2); }
/* motion.js still adds .sweep; on paper the page keeps one motion idea, so the wordmark stays still. */
body.home .ft-word.sweep { animation: none; background: none; color: var(--ink); }
body.home .ft-word.sweep em { color: var(--ink-2); }
body.home .ft-legal { color: var(--ink-3); font: 400 13px/1.5 var(--font-mono); }

/* Intro (intro.js builds it; nothing here applies without JS). It lives in this stylesheet, not a file of its own,
   so the intro adds no render-blocking request in front of the hero. The corner dock's styles are sound.css.
   Motion is transform and opacity only. The intro runs under 3.5 s and never under reduced motion. */

/* ---------- intro ---------- */
/* Paper and ink like the page under it, so the reveal is a wipe, never a dark-to-light flash. */
.tmi {
  --tmi-ink: #141414; --tmi-ink-2: #3a3936; --tmi-dim: #66635d; --tmi-paper: #f4f2ed; --tmi-clay: #c2410c;
  --tmi-ease: cubic-bezier(.76, 0, .24, 1);
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top)) clamp(16px, 3vw, 40px) clamp(10px, 1.6vw, 24px);
  overflow: hidden; border-bottom: 1.5px solid var(--tmi-ink); background: var(--tmi-paper); color: var(--tmi-ink);
  transition: transform .7s var(--tmi-ease);
  /* Failsafe: if intro.js stops before it removes the overlay, the overlay leaves on its own. Transform only, so it
     runs on the compositor even while a long task holds the main thread. */
  animation: tmi-failsafe .6s var(--tmi-ease) 4.2s forwards;
}
.tmi-out, .tmi-out-fast { transform: translateY(-100%); }
.tmi-out-fast { transition-duration: .5s; }
.tmi-art { display: flex; flex-direction: column; transition: transform .7s var(--tmi-ease); }
.tmi-out .tmi-art { transform: translateY(22svh); }
.tmi-out-fast .tmi-art { transform: translateY(16svh); transition-duration: .5s; }

.tmi-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.tmi-btn { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--tmi-ink); border-radius: 999px; background: #fff;
  color: var(--tmi-ink); font: 600 14px/1 var(--font-body); cursor: pointer;
  transition-property: background-color, color, transform, box-shadow; transition-duration: .15s; transition-timing-function: ease-out; }
.tmi-btn-sound { background: var(--tmi-ink); color: var(--tmi-paper); box-shadow: 3px 3px 0 var(--tmi-clay); }
.tmi-btn:active { transform: scale(.96); }
.tmi-btn:focus-visible { outline: 2px solid var(--tmi-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tmi-btn:hover { background: var(--tmi-paper); }
  .tmi-btn-sound:hover { background: #2b2a27; }
}

.tmi-meta { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; overflow: hidden; font: 500 14px/1.3 var(--plex); }
.tmi-k { color: var(--tmi-dim); }
.tmi-id { display: inline-block; font-variant-numeric: tabular-nums; }
.tmi-rule { height: 2px; overflow: hidden; background: rgba(20, 20, 20, .12); }
.tmi-rule i { display: block; height: 100%; background: var(--tmi-clay); transform: scaleX(0); transform-origin: left; }

.tmi-mark { --wm: min(22vw, 30svh); position: relative; }
@media (max-width: 640px) { .tmi-mark { --wm: min(26vw, 30svh); } }
/* One block of plain text, in the footer wordmark's two voices. It rises in, and is visible from the first frame
   (no opacity), so it paints at once as the largest text on the screen. */
.tmi-word { margin: 0; font: 750 var(--wm)/.86 var(--display); font-variation-settings: normal; letter-spacing: -.05em; white-space: nowrap;
  animation: tmi-rise 1.1s cubic-bezier(.2, .8, .2, 1) backwards; }
.tmi-word em { font: italic 400 1.04em/.92 var(--voice); letter-spacing: -.02em; color: var(--tmi-ink-2); }
.tmi-n { position: absolute; top: 0; right: 0; display: flex; align-items: flex-end; height: calc(var(--wm) * .86); padding-bottom: .04em;
  font: 750 clamp(32px, 7.5vw, 128px)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tmi-n b { display: inline-block; min-width: 2.2ch; font-weight: inherit; text-align: right; }

@keyframes tmi-rise { from { transform: translateY(.22em); } }
@keyframes tmi-failsafe { to { transform: translateY(-101%); } }
@media (prefers-reduced-motion: reduce) { .tmi { display: none; } }

/* Pause motion: every self-running loop on the page stops on its rest frame. */
html.motion-paused .mus-eq i, html.motion-paused .tw-caret::after, html.motion-paused .tree-log .cur,
html.motion-paused .tmi-word { animation: none !important; }