/* agentbranch landing page. Light, calm and plain: white, thin lines, small type,
   and soft state colours: grey for main, blue for an open branch, green for a
   verified merge, red for a check that failed. */

:root {
  --ink: #111111; --muted: #5a5a5a; --faint: #8a8a8a;
  --line: #e6e6e6; --line-2: #d9d9d9; --panel: #fafafa; --bg: #ffffff;
  --accent: #c8102e;
  --ok: #4b6525; --ok-soft: #f1fbd2; --ok-border: #d6efa0;
  --run: #2457c5; --run-soft: #eef3ff; --run-border: #c9d9ff;
  --no: #c62e42; --no-soft: #fdf0f1; --no-border: #f5c9cf;
  --idle: #6b6b6b; --idle-soft: #f4f4f4; --idle-border: #e6e6e6;
  --main-line: #c4c4c4;
  --r: 10px;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 20px; -webkit-text-size-adjust: 100% }
html, body { margin: 0; padding: 0 }
body {
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px }
a { color: inherit; text-decoration: underline; text-decoration-color: #c9c9c9; text-underline-offset: 3px }
a:hover { text-decoration-color: var(--ink) }
code, pre { font-family: var(--mono); font-variant-ligatures: none }
code { font-size: .86em }
:not(pre) > code { background: var(--idle-soft); border-radius: 4px; padding: .08em .36em; overflow-wrap: anywhere }
:focus-visible { outline: 2px solid var(--run); outline-offset: 2px; border-radius: 4px }
svg.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none }
b, strong { font-weight: 600 }

/* faint branch graphs behind everything, as texture */
.bgart { position: fixed; right: -60px; bottom: -70px; width: min(56vw, 900px); opacity: .065; pointer-events: none; z-index: -1; user-select: none }
.bgart.two { right: auto; bottom: auto; left: -90px; top: 70px; width: min(34vw, 520px); opacity: .045; transform: rotate(-14deg) }

.label { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin: 0 0 9px }
.card { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); min-width: 0 }
.pad { padding: 18px 20px }

/* state pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 500 12px/1.5 var(--sans); padding: 1px 9px; border-radius: 999px; border: 1px solid;
  color: var(--idle); background: var(--idle-soft); border-color: var(--idle-border);
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.pill svg { width: 12px; height: 12px; stroke-width: 2.4 }
.pill.run { color: var(--run); background: var(--run-soft); border-color: var(--run-border) }
.pill.ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-border) }
.pill.no { color: var(--no); background: var(--no-soft); border-color: var(--no-border) }

/* ----------------------------------------------------------- top bar */
/* the top bar and the hero span the viewport, like the story board */
.topbar, .hero { --gut: 24px; width: calc(100vw - 2 * var(--gut)); margin-left: calc(50% - 50vw + var(--gut)) }
.topbar { display: flex; align-items: center; gap: 22px; padding: 10px 0; border-bottom: 1px solid var(--line) }
.top-cta { display: flex; align-items: center; gap: 8px }
.logo { font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; color: var(--ink); white-space: nowrap }
.logo .dot, h1 .dot { color: var(--accent) }
.logo:hover .dot { opacity: .65 }
.topbar .links { display: flex; gap: 18px; margin-left: auto; font-size: 13.5px }
.topbar .links a { color: var(--muted); text-decoration: none }
.topbar .links a:hover { color: var(--ink) }

/* -------------------------------------------------------------- hero */
section { margin-top: 76px }
.hero { margin-top: 0; padding-top: 20px }
h1 { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 0 0 6px }
.lede { font-size: 15px; line-height: 1.5; color: var(--faint); margin: 0; max-width: none }
.lede b { color: var(--muted); font-weight: 600 }
.sub b, .sc-cap b { color: var(--ink) }
.go {
  display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 8px;
  background: var(--accent); color: #fff; font: 600 14.5px var(--sans); text-decoration: none; white-space: nowrap;
}
.go:hover { background: #a60d26 }
.quietbtn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 600 14.5px var(--sans); text-decoration: none; white-space: nowrap;
}
.quietbtn:hover { background: #0000000a }
.go.sm { padding: 7px 14px; font-size: 13.5px }
.quietbtn.sm { padding: 6px 12px; font-size: 13.5px }
.quietbtn.sm svg { width: 14px; height: 14px }
.quietbtn svg { width: 16px; height: 16px }

/* ------------------------------------------------------------ hero story
   One example in seven steps, all on screen at once, as a board that spans the
   viewport. A rail runs through the step badges in reading order. With JS (and
   motion allowed) .story.live plays each step as it scrolls into view; otherwise
   every step shows its final frame. Inside a step, "a" pops in, "dr" draws a
   stroke and "drop" slides down, each after --d seconds. Generated by
   docs/make_story.py. */
:root { --warn: #9a6700; --warn-soft: #fff8e1; --warn-border: #f2d48a }
.lead-in { margin: 14px 0 8px; font-size: 13.5px; color: var(--muted) }
.lead-in b { color: var(--ink) }
.story { position: relative; margin: 0 }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 0 2px 12px }
.st-head .label { margin: 0 }
.st-tags { display: flex; gap: 6px; flex-wrap: wrap }

.st-stage { --gap: 16px; --pad: 18px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap) }
.scene { position: relative; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: var(--pad); background: var(--bg) }
.scene[data-s="7"] { grid-column: 1 / -1 }
.t-ink { --tone: var(--ink); --tone-soft: var(--idle-soft); --tone-border: var(--line-2) }
.t-run { --tone: var(--run); --tone-soft: var(--run-soft); --tone-border: var(--run-border) }
.t-ok { --tone: var(--ok); --tone-soft: var(--ok-soft); --tone-border: var(--ok-border) }
.t-no { --tone: var(--no); --tone-soft: var(--no-soft); --tone-border: var(--no-border) }
.t-warn { --tone: var(--warn); --tone-soft: var(--warn-soft); --tone-border: var(--warn-border) }
.p-ink { --prev: var(--ink) } .p-run { --prev: var(--run) } .p-ok { --prev: var(--ok) } .p-no { --prev: var(--no) } .p-warn { --prev: var(--warn) }

/* the rail: an incoming stub in the previous step's colour, the badge, then this step's line */
.sc-head { position: relative; display: flex; align-items: center; height: 40px; margin-bottom: 12px }
.sc-ic { position: relative; z-index: 1; flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--tone); background: var(--tone-soft); border: 1.5px solid var(--tone-border); transition: color .4s, background .4s, border-color .4s, box-shadow .4s }
.sc-ic svg { width: 19px; height: 19px }
.t-ink .sc-ic { color: #fff; background: var(--ink); border-color: var(--ink) }
.sc-rail, .sc-head::before { height: 2px; background: repeating-linear-gradient(90deg, var(--c) 0 7px, transparent 7px 13px); background-size: 13px 2px; animation: railflow .9s linear infinite; opacity: .75; transition: opacity .4s }
.sc-rail { --c: var(--tone); flex: 1; margin-left: 6px; margin-right: calc(-1 * var(--pad) - var(--gap) / 2) }
.sc-head::before { --c: var(--prev); content: ""; position: absolute; top: 19px; left: calc(-1 * var(--pad) - var(--gap) / 2); width: calc(var(--pad) + var(--gap) / 2 - 6px) }
.scene[data-s="1"] .sc-head::before { display: none }
.scene[data-s="7"] .sc-rail { margin-right: 6px }
.sc-end { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--ok) }
.sc-end svg { width: 13px; height: 13px; stroke-width: 3 }
@keyframes railflow { to { background-position: 13px 0 } }

.sc-kick { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; font: 600 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tone) }
.sc-kick b { font: 600 11.5px var(--mono); letter-spacing: 0; opacity: .6 }
.t-ink .sc-kick { color: var(--muted) }
h2.sc-h { margin: 0 0 6px; max-width: none; font-size: 19px; font-weight: 600; letter-spacing: -.014em; line-height: 1.25 }
.sc-cap { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 64ch }
.sc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 10px; padding: 14px; background-color: #fff; background-image: radial-gradient(#ececec 1px, transparent 1.2px); background-size: 14px 14px; background-position: 7px 7px }
.sc-scroll { min-width: 0 }
.sc-svg { display: block; width: 100%; height: auto; overflow: visible }

/* before a step has played, its rail and badge wait in grey */
.live .scene:not(.on) .sc-ic { color: var(--faint); background: var(--panel); border-color: var(--line) }
.live .scene:not(.on) .sc-rail, .live .scene:not(.on) .sc-head::before { opacity: .25; animation-play-state: paused }
.live .scene.on .sc-ic { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 9%, transparent) }

/* in-step animation */
.sc-svg .a, .sc-svg .dimlater { transform-box: fill-box; transform-origin: center }
.live .scene:not(.on) .a, .live .scene:not(.on) .dr { opacity: 0 }
.live .scene.on .a { animation: rise .5s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--d, 0) * 1s) }
.live .scene.on .sc-svg .a { animation-name: pop; animation-timing-function: cubic-bezier(.2, 1.35, .4, 1) }
.live .scene.on .sc-svg .drop, .live .scene.on tr.drop { animation-name: drop; animation-timing-function: ease-out }
.live .scene.on .dr { stroke-dasharray: 1 1; animation: draw .7s ease-out both; animation-delay: calc(var(--d, 0) * 1s) }
.dimlater { opacity: .32 }
.live .scene:not(.on) .dimlater { opacity: 1 }
.live .scene.on .dimlater { animation: dim .5s ease both; animation-delay: calc(var(--d2, 0) * 1s) }
@keyframes rise { from { opacity: 0; transform: translateY(8px) } }
@keyframes pop { from { opacity: 0; transform: scale(.55) } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px) } }
@keyframes draw { from { stroke-dashoffset: 1; opacity: 0 } 6% { opacity: 1 } to { stroke-dashoffset: 0; opacity: 1 } }
@keyframes dim { from { opacity: 1 } to { opacity: .32 } }

/* scene parts: lines, database, avatars, chips, nodes, labels */
.sc-svg .ln { fill: none; stroke-width: 2.2; stroke-linecap: round }
.sc-svg .ln.main { stroke: var(--main-line); stroke-width: 3 }
.sc-svg .ln.run { stroke: var(--run) }
.sc-svg .ln.ok { stroke: var(--ok) }
.sc-svg .ln.no { stroke: var(--no); stroke-width: 1.8 }
.sc-svg .ln.warn { stroke: var(--warn); stroke-width: 1.8 }
.sc-svg .ln.fan { stroke: var(--run-border); stroke-width: 1.4 }
.sc-svg .fork { fill: #fff; stroke-width: 2.2 }
.sc-svg .fork.run { stroke: var(--run) }
.sc-svg .fork.ok { stroke: var(--ok) }
.sc-svg .db-body { fill: #fff; stroke: var(--idle); stroke-width: 1.4 }
.sc-svg .db-top { fill: var(--panel); stroke: var(--idle); stroke-width: 1.4 }
.sc-svg .db-ring { fill: none; stroke: var(--line-2); stroke-width: 1.2 }
.sc-svg .t-db { font: 600 12px var(--sans); fill: var(--ink) }
.sc-svg .t-dbs { font: 400 11px var(--mono); fill: var(--faint) }
.tall .t-db { font-size: 10px }
.sc-svg .av circle { stroke-width: 1.4 }
.sc-svg .av text { font-family: var(--mono); font-weight: 600 }
.sc-svg .av.run circle { fill: var(--run-soft); stroke: var(--run-border) }
.sc-svg .av.run text { fill: var(--run) }
.sc-svg .av.ok circle { fill: var(--ok-soft); stroke: var(--ok-border) }
.sc-svg .av.ok text { fill: var(--ok) }
.sc-svg .coord circle { fill: var(--ink) }
.sc-svg .coord use { color: #fff }
.sc-svg .chip rect { stroke-width: 1.1 }
.sc-svg .chip text { font-family: var(--mono); font-variant-ligatures: none }
.sc-svg .chip.run rect { fill: var(--run-soft); stroke: var(--run-border) } .sc-svg .chip.run .cd { fill: var(--run) } .sc-svg .chip.run text { fill: var(--run) }
.sc-svg .chip.ok rect { fill: var(--ok-soft); stroke: var(--ok-border) } .sc-svg .chip.ok .cd { fill: var(--ok) } .sc-svg .chip.ok text { fill: var(--ok) }
.sc-svg .chip.no rect { fill: var(--no-soft); stroke: var(--no-border) } .sc-svg .chip.no .cd { fill: var(--no) } .sc-svg .chip.no text { fill: var(--no); text-decoration: line-through }
.sc-svg .chip .cd { stroke: none }
.sc-svg .node path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.sc-svg .node .halo { fill: none; stroke-width: 1.3 }
.sc-svg .node.ok circle { fill: var(--ok) } .sc-svg .node.ok path { stroke: #fff } .sc-svg .node.ok .halo { stroke: var(--ok-border) }
.sc-svg .node.no circle { fill: var(--no-soft); stroke: var(--no); stroke-width: 1.4 } .sc-svg .node.no path { stroke: var(--no) } .sc-svg .node.no .halo { stroke: var(--no-border); stroke-dasharray: 2 3 }
.sc-svg .node.warn circle { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1.4 } .sc-svg .node.warn path { stroke: var(--warn) } .sc-svg .node.warn .halo { stroke: var(--warn-border); stroke-dasharray: 2 3 }
.sc-svg .node .halo { fill: none !important }
.sc-svg .t-lab { font: 600 11px var(--sans); fill: var(--faint); letter-spacing: .06em; text-transform: uppercase }
.sc-svg .t-mol { font: 500 11.5px var(--sans); fill: var(--muted) }
.sc-svg .t-faint { font: 400 11.5px var(--sans); fill: var(--faint) }
.sc-svg .t-note { font: 400 11.5px var(--sans); fill: var(--faint); font-style: italic }
.sc-svg .t-ok { font: 600 11.5px var(--sans); fill: var(--ok) }
.sc-svg .t-bad { font: 600 12px var(--sans); fill: var(--no) }
.sc-svg .t-bad2 { font: 400 11.5px var(--sans); fill: var(--no); opacity: .8 }
.sc-svg .t-warn { font: 600 12px var(--sans); fill: var(--warn) }
.sc-svg .t-warn2 { font: 400 11.5px var(--sans); fill: var(--warn); opacity: .85 }
.sc-svg .t-main { font: 500 11px var(--mono); fill: var(--idle) }
.sc-svg .s { font-size: 9.5px }
.sc-svg .tbl { fill: #fff; stroke: var(--line-2) }
.sc-svg .t-th { font: 600 10px var(--sans); fill: var(--faint); letter-spacing: .06em; text-transform: uppercase }
.sc-svg .t-row { font: 400 11px var(--mono); fill: var(--ink); font-variant-ligatures: none }
.sc-svg .t-row.v { fill: var(--ok); font-weight: 600 }
.sc-svg .t-row.w { fill: var(--faint) }
.tall .t-row { font-size: 10px }
.sc-svg .ln.thin { stroke-width: 1.6; stroke-linejoin: round }
.sc-svg .tip { fill: #fff; stroke: var(--run); stroke-width: 1.8 }
.sc-svg .spec rect { fill: var(--run-soft); stroke: var(--run-border); stroke-width: 1.2 }
.sc-svg .spec use { color: var(--run); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.sc-svg .t-spec { font: 600 13.5px var(--sans); fill: var(--ink) }
.sc-svg .t-writes { font: 400 11px var(--mono); fill: var(--run); font-variant-ligatures: none }
.sc-svg .t-more { font: 600 11.5px var(--mono); fill: var(--run) }
.sc-svg .tick path { fill: none; stroke: var(--ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.sc-svg .tick text { font: 500 12px var(--sans); fill: var(--ok) }
.sc-svg .rule { stroke: var(--line); stroke-width: 1 }
.sc-svg .t-row.b { font-weight: 600 }
.sc-svg .t-badm { font: 500 11px var(--mono); fill: var(--no); font-variant-ligatures: none }
.sc-svg .codechip rect { fill: var(--panel); stroke: var(--line-2) }
.sc-svg .codechip text { font: 400 11px var(--mono); fill: var(--muted); font-variant-ligatures: none }

/* a tiny association plot: one peak of variants per gene */
svg.locus { display: block; width: 72px; height: 28px; overflow: visible }
svg.locus circle { fill: #c9c9c9 }
svg.locus .base { stroke: var(--line); stroke-width: 1; fill: none }
svg.locus .lead { fill: var(--run) }
svg.locus.sm { display: inline-block; width: 44px; height: 17px; vertical-align: middle; margin: -2px 10px 0 0 }

/* step 1: the question */
.s1, .s2 { gap: 14px }
.s2 { justify-content: flex-start }
.ask { display: flex; gap: 12px; align-items: flex-start }
.coord-av { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center }
.coord-av svg { width: 26px; height: 26px }
.bubble { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 12px 14px; background: var(--panel) }
.bubble .who { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint) }
.bubble .q { margin: 0; font-size: 16px; line-height: 1.42; color: var(--ink) }
.ev { margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px }
.ev div { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.ev dt code { font-size: 11.5px; color: var(--run); background: var(--run-soft); border: 1px solid var(--run-border); border-radius: 999px; padding: 0 7px }
.ev dd { margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted) }
.bubble .scale { margin: 9px 0 0; font-size: 12px; color: var(--faint) }
.genes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px }
.genes li { display: flex; flex-direction: column; align-items: center; padding: 7px 2px 6px; border: 1px solid var(--line); border-radius: 9px; background: #fff; min-width: 0 }
.genes svg.locus { width: 100%; max-width: 72px; height: auto }
.genes b { margin-top: 3px; font: 600 12px var(--mono); color: var(--ink) }
.genes span { font: 400 10.5px var(--mono); color: var(--faint) }

/* step 1: the context budget, one square per context window */
.ctx { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px 10px; background: var(--panel) }
.ctx .label { margin-bottom: 8px }
.ctx-grid { display: grid; grid-template-columns: repeat(50, minmax(0, 1fr)); gap: 3px }
.ctx-grid i, .ctx-key i { aspect-ratio: 1; border-radius: 2.5px; background: var(--run-border) }
.ctx-grid i.ana, .ctx-key i.ana { background: #8fa9e6 }
.ctx-grid i.win, .ctx-key i.win { background: var(--ink) }
.ctx-grid i.win { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--ink) }
.ctx-key { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted) }
.ctx-key li { display: inline-flex; align-items: center; gap: 6px }
.ctx-key i { width: 10px; flex: none }
.ctx-key b { font: 600 12px var(--mono); color: var(--ink) }
.ctx-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted) }
.ctx-note b { color: var(--ink) }

/* step 7: the answer */
.answer { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) minmax(0, 1fr); gap: 26px; align-items: center; width: 100% }
.answer pre { font-size: 11.5px; line-height: 1.6; padding: 12px 14px; overflow-x: auto }
.ladder ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.ladder li { position: relative; padding-left: 16px; border-left: 2px solid var(--line) }
.ladder li:last-child { border-left-color: var(--ok) }
.ladder p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 5px; font-size: 13px; color: var(--muted) }
.ladder p b { font: 600 15px var(--mono); color: var(--ink); min-width: 2ch }
.ladder p code { font-size: 11px }
.gs { display: flex; flex-wrap: wrap; gap: 3px }
.g { font: 500 10px/1.65 var(--mono); padding: 0 5px; border-radius: 5px; border: 1px solid var(--idle-border); color: var(--idle); background: var(--idle-soft) }
.g.run { color: var(--run); background: var(--run-soft); border-color: var(--run-border) }
.g.ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-border); font-weight: 600 }
.g.off { color: #c4c4c4; background: transparent; border-color: var(--line); border-style: dashed }
.g.out { color: var(--no); background: var(--no-soft); border-color: var(--no-border); text-decoration: line-through }
.ladder .why { display: block; margin-top: 4px; font-size: 11.5px; color: var(--no) }
.result .label, .ladder .label { margin-bottom: 10px }
.result table { width: 100%; border-collapse: collapse; font-size: 13px }
.result th { text-align: left; font: 600 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 6px 7px 0; border-bottom: 1px solid var(--line) }
.result th code { text-transform: none; letter-spacing: 0; font-size: 10.5px }
.result td { padding: 9px 6px 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap }
.result td.sym { font: 600 12.5px var(--mono) }
.result td.num { font-family: var(--mono); font-size: 12.5px }
.result td.who { white-space: normal }
.result .who .pill { font-family: var(--mono); font-size: 10.5px; padding: 0 6px; margin: 2px 3px 2px 0 }
.res-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted) }

@media (max-width: 1480px) {
  .st-stage { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .answer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .answer .result { grid-column: 1 / -1 }
}
@media (max-width: 980px) {
  .st-stage { grid-template-columns: minmax(0, 1fr) }
  .answer { grid-template-columns: minmax(0, 1fr) }
  .sc-rail { margin-right: 0 }
  .sc-head::before { display: none }
}
@media (max-width: 700px) {
  .topbar, .hero { --gut: 14px }
  .st-stage { --pad: 14px }
  h2.sc-h { font-size: 17.5px }
  .sc-body { padding: 10px }
  .sc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .sc-svg { min-width: 520px }
  .genes { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .ctx-grid { grid-template-columns: repeat(25, minmax(0, 1fr)) }
  .ev { grid-template-columns: minmax(0, 1fr) }
  .bubble .q { font-size: 15px }
  .answer pre { font-size: 10px; padding: 10px 12px; overflow-x: auto }
  .result { overflow-x: auto }
}

/* code windows: light panels */
.codewin { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; min-width: 0 }
.codewin .bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg) }
.lights { display: flex; gap: 6px; flex: none }
.lights i { width: 9px; height: 9px; border-radius: 50%; background: #e3e3e3 }
.codewin .name { flex: 1; min-width: 0; font: 400 12px var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.copy { font: 500 12px var(--sans); color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 9px; cursor: pointer }
.copy:hover { color: var(--ink); background: #0000000a }
.copy.done { color: var(--ok); border-color: var(--ok-border); background: var(--ok-soft) }
pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.7; color: var(--ink); tab-size: 4 }
pre .k { font-weight: 600 }
pre .s { color: var(--ok) }
pre .f { color: var(--run) }
pre .c, pre .p { color: var(--faint) }
pre .p { user-select: none }
pre.out .ok { color: var(--ok) }
.out-win { margin-top: 10px }

.n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font: 600 11.5px var(--sans); color: var(--muted); background: var(--bg) }

.status { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-size: 13px; color: var(--faint) }

/* ------------------------------------------------------- sections */
h2 { font-size: 22px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; margin: 0 0 16px; max-width: 40ch }
h3 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.4; margin: 0 0 6px }
.grid { display: grid; gap: 12px }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.card p { margin: 0; color: var(--muted); font-size: 14px }
.fine { margin: 12px 0 0; font-size: 13.5px; color: var(--muted) }

/* what it does: five short points */
.what { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px }
.what li { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); padding: 16px 16px 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted) }
.what b { display: block; margin-bottom: 4px; font-size: 14.5px; color: var(--ink) }
.ic { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); margin-bottom: 12px }
.ic svg { width: 15px; height: 15px; stroke-width: 1.8 }

/* get started */
.start { display: grid; gap: 12px }
.start pre { font-size: 12.5px }

/* agents */
.agents .card { display: flex; flex-direction: column; gap: 4px }
.agents .card p { margin-bottom: 10px }
.agents #code-mcp { white-space: pre-wrap; word-break: break-word }

/* faq */
.faq { border-top: 1px solid var(--line); max-width: 860px }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 2px; font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px;
  border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px) }
.faq summary:hover { color: var(--run) }
.faq .ans { padding: 0 2px 18px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 72ch }
.faq .ans p { margin: 0 0 10px }
.faq .ans p:last-child { margin-bottom: 0 }
.faq .ans a { color: var(--ink) }
.faq pre.mini { margin: 4px 0 12px; padding: 10px 12px; font-size: 12px; line-height: 1.6; background: var(--panel); border: 1px solid var(--line); border-radius: 8px }
.bench { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 13.5px; margin: 6px 0 10px }
.bench th { text-align: left; font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 10px 7px 0; border-bottom: 1px solid var(--line) }
.bench td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); color: var(--ink) }
.bench .num { text-align: right; font-family: var(--mono); font-size: 12.5px; white-space: nowrap }
.bench th.num { font: 600 11px var(--sans) }
.bench td.num:last-child { color: var(--run) }
.faq .src { font-size: 13px; color: var(--faint) }

/* footer */
footer { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; margin-top: 60px; padding: 18px 0 30px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint) }
.logo.small { font-size: 16px }

/* -------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .top-cta { margin-left: auto }
  .what { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
  .topbar .links { gap: 14px }
  .g2 { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 700px) {
  .wrap { padding: 0 16px }
  .bgart { width: 460px; right: -150px; bottom: -90px; opacity: .055 }
  .bgart.two { display: none }
  section { margin-top: 56px }
  .hero { padding-top: 16px }
  h1 { font-size: 23px }
  h2 { font-size: 19px }
  .g2, .g3, .g4, .features, .tested-more, .roadmap ul, .bd-points, .cs-notes { grid-template-columns: minmax(0, 1fr) }
  .diagram { padding: 6px }
  .diagram .wide { display: none }
  .diagram .tall { display: block; max-width: 420px; margin: 0 auto }
  .p-br .bv-r { grid-template-columns: minmax(0, 1fr) 50px 84px }
  .bv-rows { font-size: 12.5px }
  .bd-points { gap: 16px }
  .merge-wrap { gap: 24px }
  .status { margin-left: 0; flex-wrap: wrap }
  .what { grid-template-columns: minmax(0, 1fr); gap: 8px }
  .what li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; padding: 14px }
  .what li .ic { grid-row: 1 / 3; margin: 0 }
  .what li b { margin: 4px 0 2px }
  pre, .start pre { font-size: 12px; padding: 12px 14px }
  .faq summary { font-size: 15px; padding: 14px 2px }
  .faq .ans { font-size: 14px }
  }
@media (max-width: 420px) {
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
}

/* on phones the board's diagrams keep a readable size and scroll sideways inside their panel */
@media (max-width: 700px) {
  .sc-scroll { position: relative; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent) }
  .sc-scroll.end { -webkit-mask-image: none; mask-image: none }
  .sc-body:has(.sc-scroll)::after { content: "scroll sideways to see the whole step"; display: block; margin-top: 6px; font-size: 11.5px; color: var(--faint); text-align: right }
}
.st-tags .pill { white-space: normal }
@media (max-width: 700px) {
  .result table { min-width: 600px }
  .result td.who { white-space: nowrap }
}

/* Small phones: the header keeps FAQ, Quickstart and an icon-only GitHub */
@media (max-width: 480px) {
  .top-cta .quietbtn { font-size: 0; gap: 0; padding-left: 9px; padding-right: 9px }
  .top-cta .quietbtn svg { margin: 0 }
  .topbar .links a { font-size: 13px }
}