:root {
  --ground: #0A0A0B; --text: #EDEDEF; --mute: #8A8A90; --line: rgba(255,255,255,.12); --field: #111114;
  --accent-text: #5E6AFF; --signal: #FFD23F; --on-signal: #0A0A0B;
  --card: #16161A; --card-ink: #EDEDEF; --card-line: rgba(255,255,255,.22); --card-shadow: #2A2A31; --card-mute: #8A8A90; --card-field: #0A0A0B; --card-rule: rgba(255,255,255,.12); --card-link: #7C86FF; --dot: #FFFFFF; --card-body: #C4C4CA;
  --ink: #0A0A0B; --paper: #F7F5F0; --accent: #3D4BFF; --on-accent: #FFFFFF; --mute-paper: #6B6B70;
  --sans: Geist, system-ui, sans-serif; --head: "Inter Tight", Geist, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --logo: "Space Mono", ui-monospace, monospace;
  color-scheme: dark;
}
[data-theme="light"] {
  --ground: #F7F5F0; --text: #0A0A0B; --mute: #6B6B70; --line: rgba(10,10,11,.14); --field: #FFFFFF;
  --accent-text: #3D4BFF; --signal: #FFD23F; --on-signal: #0A0A0B;
  --card: #F7F5F0; --card-ink: #0A0A0B; --card-line: #0A0A0B; --card-shadow: #0A0A0B; --card-mute: #6B6B70; --card-field: #FFFFFF; --card-rule: rgba(10,10,11,.15); --card-link: #3D4BFF; --dot: #0A0A0B; --card-body: #3A3A40;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 16px/1.5 var(--sans); }
a { color: inherit; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; margin: 0; }
h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.035em; }
code, kbd, .mono { font-family: var(--mono); }
.eyebrow { font: 400 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.band-blue :focus-visible, .on-band :focus-visible { outline: 2px solid #fff; box-shadow: 0 0 0 4px var(--ink); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px max(clamp(16px, 4vw, 48px), calc((100% - 1200px) / 2)); background: var(--ground); border-bottom: 1px solid var(--line); }
.logo { display: inline-block; white-space: nowrap; font: 700 20px var(--logo); letter-spacing: -.04em; text-decoration: none; }
/* the mark runs from the baseline to the top of the l (Space Mono's ascender is .676em), .3em before the word */
.mark { display: inline-block; height: .676em; width: auto; vertical-align: baseline; margin-right: .3em; overflow: visible; }
.mark .car { fill: currentColor; }
.mark .rail { fill: var(--accent); }
.links { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); font: 400 14px var(--mono); }
.links a { color: var(--mute); text-decoration: none; }
.links a:hover, .links a[aria-current] { color: var(--text); }
.links a.signin { color: var(--text); border: 1px solid var(--line); padding: 6px 12px; }
.links button { font: inherit; color: var(--mute); background: none; border: 1px solid transparent; padding: 6px 8px; cursor: pointer; }
.links button:hover { color: var(--text); }
.links .theme-btn { border-color: var(--line); color: var(--text); width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1; }
kbd { font: 400 11px var(--mono); border: 1px solid var(--line); padding: 0 5px; margin-left: 6px; color: var(--mute); }
@media (hover: none) { kbd { display: none } }
@media (max-width: 640px) { .links { gap: 8px; font-size: 13px; } .links a.signin { padding: 6px 8px; } }

/* buttons, copy box */
.btn { display: inline-block; font: 500 16px var(--sans); padding: 12px 22px; background: var(--signal); color: var(--on-signal); border: 0; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-line { background: none; color: var(--text); border: 1px solid var(--line); }
.copybox { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--line); background: var(--field); color: var(--mute); font: 400 14px var(--mono); }
.copybox code { padding: 12px 16px; overflow-x: auto; white-space: nowrap; font: inherit; }
.copybox button { font: 500 14px var(--mono); color: var(--text); background: none; border: 0; border-left: 1px solid var(--line); padding: 0 16px; cursor: pointer; }
.copybox button:hover { color: var(--accent-text); }
/* On narrow phones show the whole prompt, wrapped, rather than a sliver behind a horizontal scroll. */
@media (max-width: 420px) { .copybox code { white-space: normal; overflow-wrap: anywhere; } }

/* grounds: .paper is a lifted section, dark on the night theme and white on the light theme; .band-blue is the one bold blue band */
.paper { --ground: #111114; --field: #0A0A0B; --accent-text: #7C86FF; position: relative; border-top: 1px solid var(--line); background: var(--ground); color: var(--text); padding: clamp(40px, 5vw, 80px) clamp(16px, 4vw, 48px); isolation: isolate; }
[data-theme="light"] .paper { --ground: #FFFFFF; --text: #0A0A0B; --mute: #6B6B70; --line: rgba(10,10,11,.14); --field: #F7F5F0; --accent-text: #3D4BFF; border-top: 0; }
.paper::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, var(--dot) 3.5px, transparent 4px), radial-gradient(circle, var(--dot) 2.2px, transparent 2.5px); background-size: 20px 20px; background-position: 0 0, 10px 10px; -webkit-mask: linear-gradient(180deg, transparent 15%, #000 100%); mask: linear-gradient(180deg, transparent 15%, #000 100%); opacity: .08; }
.closing { padding: clamp(40px, 5vw, 80px) clamp(16px, 4vw, 48px); }
.band-blue { background: var(--accent); color: #fff; --text: #fff; --mute: #DFE2FF; --line: rgba(255,255,255,.4); }
.band-blue h1, .band-blue h2, .band-blue .eyebrow { color: #fff; }
.card { position: relative; background: var(--card); color: var(--card-ink); border: 1.5px solid var(--card-line); box-shadow: 8px 8px 0 var(--card-shadow); padding: clamp(20px, 3vw, 36px); }
.card small, .card .muted { font: 400 12px var(--mono); letter-spacing: .12em; color: var(--card-mute); }
.card a { color: var(--card-link); }
.card :focus-visible { outline-color: var(--accent); box-shadow: none; }
.tag-free { font: 500 11px var(--mono); color: var(--card-link); }

/* footer */
.footer { background: var(--ground); border-top: 1px solid var(--line); padding: 48px max(clamp(16px, 4vw, 48px), calc((100% - 1200px) / 2)) 0; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; gap: 32px; }
.footer-grid h2 { font: 400 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.footer-grid p { color: var(--mute); max-width: 32ch; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--accent-text); }
.keys li { color: var(--mute); }
.keys kbd { color: var(--text); margin: 0 6px 0 0; }
.footer-bottom { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.big-word { grid-column: 1 / -1; display: block; padding-bottom: .25em; font: 700 clamp(56px, 17vw, 250px)/.85 var(--logo); letter-spacing: -.04em; color: var(--line); user-select: none; white-space: nowrap; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* overlays, palette shell, toast */
.overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding: 12vh 16px 16px; background: rgba(10,10,11,.6); }
.overlay[hidden] { display: none; }
.overlay-box { width: min(560px, 100%); background: var(--card); color: var(--card-ink); border: 1.5px solid var(--card-line); box-shadow: 8px 8px 0 var(--card-shadow); padding: 24px; max-height: 76vh; overflow: auto; }
.overlay-box h2 { font-size: 24px; margin-bottom: 12px; }
.overlay-box .keys li { color: var(--card-mute); }
.overlay-box .keys kbd { color: var(--card-ink); border-color: var(--card-line); }
.overlay-box .toggle { display: block; margin-top: 16px; font-size: 14px; }
.link-btn { margin-top: 12px; padding: 0; font: 400 14px var(--sans); color: var(--mute); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--accent-text); }

/* ⌘K palette (cmdk.html): a modal <dialog> in the top layer */
.palette { width: min(640px, calc(100% - 32px)); max-width: none; max-height: min(72vh, 620px); margin: 10vh auto auto; padding: 0; flex-direction: column; overflow: hidden; background: var(--field); color: var(--text); border: 1px solid var(--line); box-shadow: 0 24px 64px rgba(0,0,0,.55); }
.palette[open] { display: flex; }
.palette::backdrop { background: rgba(10,10,11,.72); }
html:has(.palette[open]) { overflow: hidden; }
.pal-q { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--line); }
.pal-q:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.pal-glass { color: var(--mute); font-size: 18px; }
.pal-q input { flex: 1; min-width: 0; padding: 16px 0; font: 400 18px var(--sans); color: var(--text); background: none; border: 0; outline: none; }
.pal-q input::placeholder { color: var(--mute); opacity: 1; }
.pal-q input::-webkit-search-cancel-button { display: none; }
.pal-close { flex: none; font: 400 11px var(--mono); color: var(--mute); background: none; border: 1px solid var(--line); padding: 2px 7px; cursor: pointer; }
.pal-close:hover { color: var(--text); }
.pal-close-t { display: none; }
.pal-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 8px; }
.pal-grp { padding: 12px 20px 4px; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pal-it { display: flex; align-items: center; gap: 12px; padding: 9px 20px; font-size: 15px; cursor: pointer; }
.pal-it[aria-selected="true"] { background: rgba(61,75,255,.14); box-shadow: inset 2px 0 0 var(--accent); }
[data-theme="light"] .pal-it[aria-selected="true"] { background: rgba(61,75,255,.07); } /* keeps --mute at 4.5:1 */
.pal-it .ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; font: 500 11px var(--mono); color: var(--text); background: var(--ground); border: 1px solid var(--line); }
.pal-it .tx { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pal-it small { margin-left: 4px; font: 400 12px var(--mono); color: var(--mute); }
.pal-it .r { flex: none; margin-left: auto; display: flex; align-items: center; gap: 8px; font: 400 12px var(--mono); color: var(--mute); }
.pal-it .r b { font-weight: 500; padding: 0 6px; background: var(--accent); color: var(--on-accent); }
.pal-it .r kbd { margin: 0; }
.pal-note { padding: 14px 20px; font-size: 14px; color: var(--mute); }
.pal-foot { display: flex; gap: 20px; margin: 0; padding: 10px 20px; border-top: 1px solid var(--line); font: 400 11px var(--mono); color: var(--mute); }
.pal-foot kbd { margin: 0 4px 0 0; }
@media (max-width: 640px) { .pal-it .pv, .pal-it small { display: none; } }
/* Touch: a full-screen search sheet; no key hints */
@media (hover: none) {
  .palette { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; inset: 0; border: 0; box-shadow: none; }
  .pal-q { padding: 4px 8px 4px 16px; }
  .pal-close { font: 500 15px var(--sans); color: var(--text); border: 0; padding: 10px 8px; }
  .pal-close-k { display: none; }
  .pal-close-t { display: inline; }
  .pal-it { min-height: 48px; padding: 10px 16px; }
  .pal-grp { padding-left: 16px; }
  .pal-foot { display: none; }
}
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 95; background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,.2); padding: 10px 16px; font: 500 14px var(--mono); transition: opacity .15s, transform .15s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* home */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.accent { color: var(--accent-text); }
.wrap { max-width: 1200px; margin: 0 auto; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.actions.handoff { flex-direction: column; align-items: flex-start; gap: 10px; }
.handoff-label { margin: 0; font: 400 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.hero { --nav-h: 63px; position: relative; display: grid; align-items: center; min-height: calc(78svh - var(--nav-h)); /* the next section peeks in, so the page reads as more than one screen */ padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 48px); overflow: hidden; }
.hero .dots { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--accent) 2.4px, transparent 2.8px); background-size: 18px 18px; opacity: .25; -webkit-mask: linear-gradient(100deg, transparent 55%, #000 95%); mask: linear-gradient(100deg, transparent 55%, #000 95%); }
.hero-inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; gap: 32px; align-items: center; }
.hero-text { display: grid; gap: 20px; justify-items: start; min-width: 0; }
@media (min-width: 960px) { .hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; } }
/* the live-session terminal: dark in both themes, so its colours are fixed, not tokens */
.session { margin: 0; width: 100%; max-width: 560px; justify-self: end; background: #111114; color: #EDEDEF; border: 1px solid rgba(255,255,255,.14); font: 400 13.5px/1.9 var(--mono); min-width: 0; }
@media (max-width: 959px) { .session { max-width: none; justify-self: stretch; } }
.session-bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.14); color: #A0A0A6; font-size: 12px; }
.session-body { padding: 16px 18px 12px; }
.session-key { margin: 0 0 8px; color: var(--signal); overflow-wrap: anywhere; }
.session-calls { list-style: none; margin: 0; padding: 0; }
.call { display: flex; justify-content: space-between; gap: 12px; opacity: 1; }
.call > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.call .arg { color: #A0A0A6; }
.call .ok { color: #7F8AFF; white-space: nowrap; }
.cursor { display: inline-block; width: 8px; height: 15px; margin-top: 6px; background: var(--signal); vertical-align: -2px; }
.session-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; border-top: 1px solid rgba(255,255,255,.14); padding: 10px 18px; color: #A0A0A6; font-size: 12px; }
.session-foot b { color: var(--signal); font-weight: 500; }
/* light theme: a white terminal; yellow never sits as text on white, so the key and "1 key" become ink on a yellow fill */
[data-theme="light"] .session { background: #FFFFFF; color: #0A0A0B; border: 1.5px solid #0A0A0B; }
[data-theme="light"] .session-bar, [data-theme="light"] .session-foot { color: #6B6B70; border-color: rgba(10,10,11,.14); }
[data-theme="light"] .session-key { width: fit-content; max-width: 100%; padding: 0 6px; background: var(--signal); color: #0A0A0B; }
[data-theme="light"] .session-foot b { padding: 0 4px; background: var(--signal); color: #0A0A0B; }
[data-theme="light"] .call .arg { color: #6B6B70; }
[data-theme="light"] .call .ok { color: #3D4BFF; }
[data-theme="light"] .cursor { background: #0A0A0B; }
.session.live .call { opacity: 0; animation: 12s infinite; animation-delay: calc(var(--i) * 1s); }
.session.live .cursor { animation: blink 1s steps(1) infinite; }
/* call0-call5 assume exactly six lines, 1 s apart (--i), in a 12 s loop. */
.session.live .call:nth-child(1) { animation-name: call0; }
@keyframes call0 { 0% { opacity: 0; transform: translateY(4px); } 3% { opacity: 1; transform: none; } 86.0% { opacity: 1; } 92.0%, 100% { opacity: 0; } }
.session.live .call:nth-child(2) { animation-name: call1; }
@keyframes call1 { 0% { opacity: 0; transform: translateY(4px); } 3% { opacity: 1; transform: none; } 77.67% { opacity: 1; } 83.67%, 100% { opacity: 0; } }
.session.live .call:nth-child(3) { animation-name: call2; }
@keyframes call2 { 0% { opacity: 0; transform: translateY(4px); } 3% { opacity: 1; transform: none; } 69.33% { opacity: 1; } 75.33%, 100% { opacity: 0; } }
.session.live .call:nth-child(4) { animation-name: call3; }
@keyframes call3 { 0% { opacity: 0; transform: translateY(4px); } 3% { opacity: 1; transform: none; } 61.0% { opacity: 1; } 67.0%, 100% { opacity: 0; } }
.session.live .call:nth-child(5) { animation-name: call4; }
@keyframes call4 { 0% { opacity: 0; transform: translateY(4px); } 3% { opacity: 1; transform: none; } 52.67% { opacity: 1; } 58.67%, 100% { opacity: 0; } }
.session.live .call:nth-child(6) { animation-name: call5; }
@keyframes call5 { 0% { opacity: 0; transform: translateY(4px); } 3% { opacity: 1; transform: none; } 44.33% { opacity: 1; } 50.33%, 100% { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
.hero h1 { text-wrap: balance; max-width: 14ch; }
.eyebrow .sq { display: inline-block; width: 8px; height: 8px; background: var(--signal); margin-right: 10px; }
[data-theme="light"] .eyebrow .sq { outline: 1px solid var(--ink); }
.subline { font-size: 1.6em; line-height: 1.3; margin: 0; max-width: 28ch; text-wrap: balance; }
.lede { color: var(--mute); max-width: 60ch; margin: 0; }
.rotator { display: flex; align-items: center; gap: 16px; margin: 0; font: 500 20px var(--head); }
.rotator-visual { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3em; }
/* The slot roll (home.mjs): only the .on word sizes the box; the others wait below it (translateY 100%), and the
   outgoing one leaves upwards (.out). Transitions run only while .rolling, so resetting words never animates. */
.rotator-roll { position: relative; display: inline-grid; justify-items: start; overflow: hidden; }
.rotator-roll > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(100%); }
.rotator-roll > span:not(.on) { position: absolute; left: 0; top: 0; }
.rotator-roll > span.on { opacity: 1; transform: none; }
.rotator-roll > span.out { transform: translateY(-100%); }
.rotator-roll.rolling { transition: width .6s ease-out; }
.rotator-roll.rolling > span { transition: transform .6s ease-out, opacity .6s ease-out; }
.rotator-roll.role > span { color: var(--accent-text); border-bottom: 2px solid var(--accent); }
.agent-icon { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: .3em; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; align-items: center; }
.tabs button[role="tab"] { font: 400 14px var(--mono); padding: 8px 14px; background: none; color: var(--text); border: 1px solid var(--line); cursor: pointer; }
.band-blue .tabs button[role="tab"] { color: #fff; border-color: #fff; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.band-blue .tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tabs .n { opacity: .7; margin-left: 4px; }
.tabs [aria-selected="true"] .n { opacity: 1; }
.tab-heading { display: none; font-size: 24px; margin: 24px 0 12px; }
html:not(.js) .tab-heading { display: block; }
.js .tabpanel:not(.on) { display: none; }
.js .agent-panel:not(.on) { visibility: hidden; } /* every job panel sits in the same cell, so the yard keeps the tallest panel's height */
html:not(.js) .agent-panel { grid-row: auto; } /* without JS every job's panel shows, one under the other */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; padding-right: 8px; }
.pcard { padding: 20px; box-shadow: 6px 6px 0 var(--card-shadow); display: grid; gap: 8px; align-content: start; }
.pcard h4 { font: 600 20px var(--head); margin: 0; }
.pcard p { margin: 0; font-size: 14px; color: var(--card-mute); }
.pcard a { font: 500 14px var(--mono); }
.all-link { margin: 40px 0 0; }
.train-section { padding: clamp(48px, 6vw, 96px) clamp(16px, 4vw, 48px); overflow: hidden; }
.job-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 24px 0; }
.job-bar .tabs { margin: 0; }
/* The yard: the rail runs in from the page edge and ends at the panel. The train enters from the left edge too,
   and on leaving it slides behind the panel, so the yard clips only on the right. */
.yard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: center; gap: 24px; min-height: 220px; clip-path: inset(-48px 0 -48px -100vw); }
.rail { grid-column: 1; grid-row: 1; align-self: center; height: 0; margin: 0 -24px 0 -100vw; border-top: 4px dotted var(--line); transform: translateY(26px); }
/* DOM order is loco, car 1, car 2, car 3, the panel's row order. row-reverse at every width puts the loco at the
   front (right, nearest the panel) with car 1 coupled behind it, so the train reads front to back like the panel.
   The box is as wide as the train and sits against the panel; a train wider than the column runs off to the left. */
.train { position: relative; z-index: 0; grid-column: 1; grid-row: 1; justify-self: end; width: max-content; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; }
.train > * { flex: none; }
.train::after { content: ""; flex: none; align-self: flex-end; width: 220px; height: 8px; margin-bottom: 4px; opacity: 0; background-image: radial-gradient(circle, var(--text) 1.3px, transparent 1.7px); background-size: 7px 8px; -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); }
.yard .loco { width: 96px; height: 40px; position: relative; border-radius: 0 100% 18% 0 / 0 100% 40% 0; background-image: radial-gradient(circle, #0A0A0B 2.4px, transparent 2.8px); background-size: 7px 7px; }
.yard .loco::before { content: ""; position: absolute; left: 91px; top: 21px; width: 7px; height: 7px; background: radial-gradient(circle, var(--signal) 2.4px, transparent 2.8px); }
.yard .car { font: 500 13px var(--mono); padding: 8px 12px; background: #0A0A0B; color: #fff; border: 1px solid #0A0A0B; }
.agent-panel { position: relative; z-index: 1; grid-column: 2; grid-row: 1; background: #0A0A0B; color: #fff; border: 1px solid #0A0A0B; padding: 20px; }
.band-blue .rail { border-top-color: rgba(255,255,255,.5); }
.agent-panel { --text: #EDEDEF; --mute: #8A8A90; --line: rgba(255,255,255,.12); --accent-text: #5E6AFF; }
/* The train's motion (home.mjs), after combine-v3 option 2: pull in, hold at the panel, leave; about 7 s.
   .arrive pulls in and stops (a picked job); .paused freezes either; .parked is the still train. */
.train.run { animation: deliver 7s cubic-bezier(.6, 0, .3, 1) both; }
.train.run::after { animation: wake 7s linear both; }
.train.arrive { animation: arrive 2.66s cubic-bezier(.6, 0, .3, 1) both; }
.train.arrive::after { animation: wake-out 2.66s linear both; }
.train.paused, .train.paused::after { animation-play-state: paused; }
@keyframes deliver { 0% { transform: translateX(-100vw); } 38%, 62% { transform: none; } 100% { transform: translateX(calc(100% + 460px)); } }
@keyframes arrive { from { transform: translateX(-100vw); } to { transform: none; } }
@keyframes wake { 0%, 30% { opacity: .7; } 38%, 62% { opacity: 0; } 70%, 100% { opacity: .7; } }
@keyframes wake-out { 0%, 78% { opacity: .7; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .train, .train::after { animation: none !important; }
  .rotator-roll, .rotator-roll > span { transition: none !important; }
}
.agent-panel table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; }
.agent-panel th, .agent-panel td { text-align: left; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.agent-panel thead th { font: 400 11px var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .1em; }
.free { color: var(--accent-text); font: 500 12px var(--mono); }
s { color: var(--mute); }
.pay { margin: 0; font: 500 14px var(--mono); text-align: right; }
.cards { display: grid; gap: 40px; margin-bottom: 64px; padding-right: 8px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.feature h2 { margin: 8px 0 12px; font-size: clamp(24px, 2.6vw, 34px); }
.feature p { margin: 0; }
.feature .eyebrow { color: var(--card-link); }
.illo { width: 100%; max-width: 400px; justify-self: end; } /* all four illustrations share one width, so their edges line up */
.ledger { display: grid; gap: 0; font-size: 14px; border: 1.5px solid var(--card-line); background: var(--card-field); }
.ledger > div { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--card-rule); }
.ledger s { color: var(--card-mute); }
.ledger .total { font-weight: 600; border-bottom: 0; }
.illo.term { background: var(--card-field); color: var(--card-ink); border: 1.5px solid var(--card-line); padding: 12px; font-size: 13px; }
.js .illo.term { display: grid; grid-template-columns: minmax(0, 1fr); }
.js .illo.term > .tabpanel { display: block; grid-row: 2; grid-column: 1; visibility: hidden; }
.js .illo.term > .tabpanel.on { visibility: visible; }
.term .tabs { margin: 0 0 10px; gap: 4px; }
.term .tabs button[role="tab"] { font-size: 12px; padding: 4px 8px; color: var(--card-mute); border-color: var(--card-rule); }
.term .tabs button[aria-selected="true"] { background: var(--card-ink); color: var(--card-field); border-color: var(--card-ink); }
.term pre { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.term .copy { font: 500 12px var(--mono); background: none; color: var(--card-ink); border: 1px solid var(--card-line); padding: 4px 10px; cursor: pointer; }
.term .after { margin-top: 10px; color: var(--card-mute); font-size: 13px; }
.term .after code { color: var(--card-ink); }
.term :focus-visible { outline-color: var(--accent); }
/* The four card illustrations (home.mjs gives each its own motion()). Every base rule is the final, complete frame;
   the keyframes run only under .live, so no JS, reduced motion, M and off-screen all show the still. */
.illo[data-anim="key"] { color: var(--card-ink); }
.illo .wire { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 3 5; }
.illo .box { opacity: .25; }
.illo .box rect { fill: none; stroke: currentColor; stroke-width: 2; }
.illo .box .bar { fill: currentColor; stroke: none; }
.illo .key path { fill: var(--signal); stroke: currentColor; stroke-width: 1.5; }
.illo .key circle { fill: var(--card); stroke: currentColor; stroke-width: 1.5; }
.illo .glow { fill: url(#key-glow); }
#key-glow stop { stop-color: var(--signal); }
.illo.live .wire { animation: wire 6s linear infinite; }
.illo.live .box { animation: 6s ease-in-out infinite; }
.illo.live .box:nth-of-type(1) { animation-name: box1; }
.illo.live .box:nth-of-type(2) { animation-name: box2; }
.illo.live .box:nth-of-type(3) { animation-name: box3; }
.illo.live .glow { animation: glow 6s ease-in-out infinite; }
@keyframes wire { to { stroke-dashoffset: -48; } }
@keyframes box1 { 0%, 12% { opacity: 1; } 22%, 86% { opacity: .25; } 96%, 100% { opacity: 1; } }
@keyframes box2 { 0%, 24% { opacity: 1; } 34%, 86% { opacity: .25; } 96%, 100% { opacity: 1; } }
@keyframes box3 { 0%, 36% { opacity: 1; } 46%, 86% { opacity: .25; } 96%, 100% { opacity: 1; } }
@keyframes glow { 0%, 44% { opacity: 0; } 58%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }

.illo[data-anim="free"] s { position: relative; text-decoration: none; }
.illo[data-anim="free"] s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; border-top: 1.5px solid; transform-origin: left; }
.illo[data-anim="free"] .tag-free { display: inline-block; }
.sum { display: inline-grid; justify-items: end; }
.sum > * { grid-area: 1 / 1; }
.sum .was { opacity: 0; }
.illo.live[data-anim="free"] s::after, .illo.live[data-anim="free"] .tag-free { animation: 8s ease-out infinite; }
.illo.live[data-anim="free"] > :nth-child(1) s::after { animation-name: strike1; }
.illo.live[data-anim="free"] > :nth-child(2) s::after { animation-name: strike2; }
.illo.live[data-anim="free"] > :nth-child(3) s::after { animation-name: strike3; }
.illo.live[data-anim="free"] > :nth-child(1) .tag-free { animation-name: stamp1; }
.illo.live[data-anim="free"] > :nth-child(2) .tag-free { animation-name: stamp2; }
.illo.live[data-anim="free"] > :nth-child(3) .tag-free { animation-name: stamp3; }
.illo.live .sum > * { animation: 8s ease-in-out infinite; }
.illo.live .sum .was { animation-name: was; }
.illo.live .sum .now { animation-name: now; }
@keyframes strike1 { 0%, 8% { transform: scaleX(0); } 14%, 90% { transform: none; } 95%, 100% { transform: scaleX(0); } }
@keyframes strike2 { 0%, 26% { transform: scaleX(0); } 32%, 90% { transform: none; } 95%, 100% { transform: scaleX(0); } }
@keyframes strike3 { 0%, 44% { transform: scaleX(0); } 50%, 90% { transform: none; } 95%, 100% { transform: scaleX(0); } }
@keyframes stamp1 { 0%, 14% { opacity: 0; transform: scale(.6); } 17% { opacity: 1; transform: scale(1.15); } 20%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes stamp2 { 0%, 32% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; transform: scale(1.15); } 38%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes stamp3 { 0%, 50% { opacity: 0; transform: scale(.6); } 53% { opacity: 1; transform: scale(1.15); } 56%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes was { 0%, 60% { opacity: 1; } 68%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes now { 0%, 62% { opacity: 0; } 70%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* card 3: the visible command types itself out (--n is its longest line), then a decorative "Connected ✓" */
.term pre code { display: inline-block; }
.term .connected { margin-left: 12px; font: 500 12px var(--mono); color: var(--card-link); opacity: 0; }
.illo.live pre code { animation: type calc(min(var(--n), 80) * 28ms) steps(var(--n)) both; }
.illo.live .connected { animation: fade-in .4s calc(min(var(--n), 80) * 28ms + .3s) both; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* card 4: each new row slides down from one row above the top edge (clipped) as the older ones move down a row,
   all by transform so the box never changes height; */
.illo[data-anim="log"] { overflow: hidden; }
.ledger .ms { font: 500 12px var(--mono); color: var(--card-mute); }
.illo.live[data-anim="log"] > div { animation: 6s ease-in-out infinite; }
.illo.live[data-anim="log"] > :nth-child(1) { animation-name: log1; }
.illo.live[data-anim="log"] > :nth-child(2) { animation-name: log2; }
.illo.live[data-anim="log"] > :nth-child(3) { animation-name: log3; }
@keyframes log1 { 0%, 52% { opacity: 0; transform: translateY(-100%); } 60%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes log2 { 0%, 28% { opacity: 0; transform: translateY(-200%); } 36%, 52% { opacity: 1; transform: translateY(-100%); } 60%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes log3 { 0%, 4% { opacity: 0; transform: translateY(-300%); } 12%, 28% { opacity: 1; transform: translateY(-200%); } 36%, 52% { opacity: 1; transform: translateY(-100%); } 60%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
.faq h2 { margin-bottom: 24px; text-align: center; }
.faq-list { display: grid; gap: 20px; max-width: 880px; margin: 0 auto; }
.faq-card { padding: 0; box-shadow: 6px 6px 0 var(--card-shadow); }
.faq-card summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(20px, 3vw, 28px); cursor: pointer; list-style: none; }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq-card h3 { font-size: 20px; margin: 0; }
.faq-icon { position: relative; flex: none; width: 14px; height: 14px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: transform .2s ease; }
.faq-icon::after { transform: rotate(90deg); }
.faq-card[open] .faq-icon::after { transform: rotate(0deg); }
.faq-card p { margin: 0; padding: 0 clamp(20px, 3vw, 28px) 22px; }
@media (prefers-reduced-motion: reduce) { .faq-icon::before, .faq-icon::after { transition: none; } }
.cta-panel { background: var(--ink); color: #fff; border: 1px solid var(--line); padding: clamp(24px, 4vw, 56px); display: grid; gap: 24px; }
.cta-panel h2 { color: #fff; }
.cta-panel .copybox { background: #111114; color: #8A8A90; border-color: rgba(255,255,255,.2); }
.cta-panel .copybox button { color: #fff; }
@media (max-width: 800px) { .feature { grid-template-columns: 1fr; } .illo { justify-self: start; } .yard { grid-template-columns: 1fr; clip-path: none; } .agent-panel { grid-column: 1; grid-row: 2; } .rail { margin-right: -100vw; } }
.card h2, .card h3 { color: var(--card-ink); }

/* narrow screens */
.hero-text > * { max-width: 100%; min-width: 0; }
.hero .copybox, .cta-panel .copybox { max-width: 100%; }
.pgrid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.cards, .cta-panel { min-width: 0; }
.feature > * { min-width: 0; }
.yard > * { min-width: 0; }
.term pre, .copybox code { max-width: 100%; overflow-x: auto; }
.rotator { flex-wrap: wrap; }
.tabs { max-width: 100%; }
@media (max-width: 800px) { .feature { grid-template-columns: minmax(0, 1fr); } .yard { grid-template-columns: minmax(0, 1fr); } .yard .loco { width: 64px; } .yard .loco::before { left: 56px; } .yard .car { font-size: 12px; padding: 6px 10px; } .subline { font-size: 1.3em; } }
@media (max-width: 640px) {
  .nav { padding: 10px 12px; gap: 8px; }
  .logo { font-size: 18px; }
  .links { gap: 4px; font-size: 12px; }
  .links a, .links button { padding: 6px 6px; }
  .links a.signin { padding: 6px 8px; }
  .links kbd { display: none; }
  .links a, .links button { white-space: nowrap; }
  .logo { font-size: 16px; }
  .links .cmdk-btn { min-width: 32px; }
  .logo { gap: 6px; }
  .links .theme-btn { width: 30px; height: 30px; }
}
.cta-panel { grid-template-columns: minmax(0, 1fr); } .cta-panel h2 { overflow-wrap: anywhere; } .copybox { min-width: 0; } .copybox code { min-width: 0; }
@media (max-width: 400px) {
  .nav { padding: 10px 10px; gap: 6px; }
  .logo { font-size: 15px; gap: 5px; }
  .links { gap: 0; font-size: 11px; }
  .links a, .links button { padding: 6px 5px; }
  .links a.signin { padding: 6px 6px; margin-left: 2px; }
  .links .cmdk-btn { min-width: 32px; } /* still a fair tap target */
  .links .theme-btn { width: 28px; height: 28px; padding: 0; }
}

/* /agents: the agents document in a terminal-styled column */
.agents-page { min-width: 0; padding: clamp(40px, 5vw, 64px) clamp(16px, 4vw, 48px) clamp(48px, 6vw, 96px); }
.agents-page .head, .agents-doc { max-width: 860px; margin: 0 auto; }
.agents-page h1 { margin: 14px 0 10px; overflow-wrap: anywhere; }
.agent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.raw-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 14px var(--mono); }
.raw-links a { color: var(--accent-text); }
.agents-doc { margin-top: 40px; background: var(--field); border: 1px solid var(--line); padding: clamp(18px, 4vw, 40px); font: 400 14px/1.7 var(--mono); min-width: 0; overflow-wrap: anywhere; }
.agents-doc h2 { font: 700 22px var(--mono); letter-spacing: -.02em; margin: 0 0 12px; }
.agents-doc h2::before { content: "# "; color: var(--accent-text); }
.agents-doc h3 { font: 500 16px var(--mono); letter-spacing: 0; margin: 32px 0 10px; }
.agents-doc h3::before { content: "## "; color: var(--accent-text); }
.agents-doc p { margin: 0 0 12px; }
.agents-doc ul { margin: 0 0 12px; padding-left: 2ch; }
.agents-doc li { margin: 4px 0; }
.agents-doc li::marker { content: "- "; color: var(--mute); }
.agents-doc a { color: var(--accent-text); }
.agents-doc code { color: var(--text); background: var(--ground); padding: 0 4px; }
.agents-doc pre { margin: 0 0 12px; padding: 12px 14px; background: var(--ground); border: 1px solid var(--line); overflow-x: auto; max-width: 100%; }
.agents-doc pre code { padding: 0; background: none; overflow-wrap: normal; }
.agents-doc > p:last-child { margin: 24px 0 0; color: var(--mute); }