/* Volta site. It wears the app's Default style: the same neutral greys, corners and glass
   (volta/desktop/docs/design-system.md), Inter for text, and one colour, the app's Volta
   accent, on the primary action and the few marks that mean "this one". */

/* Tokens. Night and dusk are the app's dark and light appearances: the page is the app's
   frame colour, a surface is a pane, a raised surface is a control. */
:root, html[data-mode="night"] { color-scheme: dark;
  --background: hsl(240 6.67% 5.9%); --surface: hsl(240 3.85% 10.2%); --surface-2: hsl(240 2.5% 15.7%);
  --border: hsl(240 1.49% 26.3% / .6); --border-strong: hsl(240 1.49% 26.3%);
  --foreground: hsl(240 5.88% 90%); --body: hsl(240 5.03% 64.9%); --muted: hsl(240 4% 52%);
  --hover: rgb(255 255 255 / .08); --shadow: 0 30px 80px -30px rgb(0 0 0 / .7); --shadow-sm: 0 10px 30px -14px rgb(0 0 0 / .6);
  --accent-ink: #8ab0ff; --success: #3fb950; --warning: #d29922; --danger: #f87171; --merged: #8957e5; }
html[data-mode="dusk"] { color-scheme: light;
  --background: hsl(240 6.25% 93.7%); --surface: #fff; --surface-2: hsl(0 0% 94.1%);
  --border: hsl(240 1.82% 82%); --border-strong: hsl(240 1.82% 76%);
  --foreground: hsl(240 5.88% 10%); --body: hsl(240 3.88% 34%); --muted: hsl(240 3.88% 44%);
  --hover: rgb(0 0 0 / .06); --shadow: 0 24px 60px -32px rgb(24 24 27 / .3); --shadow-sm: 0 8px 20px -10px rgb(24 24 27 / .22);
  --accent-ink: #0049e6; --success: #1a7f37; --warning: #9a6700; --danger: #dc2626; --merged: #8250df; }
:root { --accent: #2e70ff; --accent-foreground: #fff;
  --r-row: 8px; --r-ctl: 10px; --r-card: 14px; --r-pane: 12px;
  --header: 3.5rem;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground);
  font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--muted); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
figure { margin: 0; }
.page { min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; }
.wide { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Header: the app's pane glass. The page colour, solid along the top edge and thinning to
   70% at its foot, over a blur; no rule under it. */
header.site { position: sticky; top: 0; z-index: 40; background: var(--background); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.site { background: linear-gradient(var(--background), color-mix(in srgb, var(--background) 70%, transparent));
    -webkit-backdrop-filter: blur(20px) saturate(1.12); backdrop-filter: blur(20px) saturate(1.12); }
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; height: var(--header); }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none;
  font: 600 1.05rem/1 var(--sans); letter-spacing: -.01em; }
.stack { color: var(--foreground); }
.brand .stack { width: 1.4rem; height: 1.4rem; }
nav.links { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--body); }
nav.links > a:not(.button) { text-decoration: none; padding: .4rem .8rem; border-radius: 999px; }
nav.links > a:not(.button):hover, nav.links > a[aria-current="page"] { color: var(--foreground); }
nav.links > a:not(.button):hover, #mode:hover { background: var(--hover); }
#mode { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 999px;
  background: none; color: inherit; cursor: pointer; }
#mode:hover { color: var(--foreground); }
#mode svg { width: 1.05rem; height: 1.05rem; }
nav.links .button { margin-left: .5rem; }

/* Buttons: the app's control. Primary is the accent; there is one per screen. */
/* Every button on the site is a pill. */
.button, .waitlist button { display: inline-block; padding: .7rem 1.5rem; border: 0; border-radius: 999px;
  background: var(--foreground); color: var(--background); font: 600 .95rem/1.2 var(--sans);
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, transform .08s ease; }
.button.primary, .waitlist button { background: var(--accent); color: var(--accent-foreground); }
.button.primary:hover, .waitlist button:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.button.ghost { background: var(--surface-2); color: var(--foreground); }
.button.ghost:hover { background: color-mix(in srgb, var(--surface-2) 85%, var(--foreground)); }
.button.pill { display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.35rem; border-radius: 999px; background: var(--foreground); color: var(--background); }
.button.pill:hover { background: color-mix(in srgb, var(--foreground) 88%, var(--background)); }
.button.pill svg { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }
.button.pill .apple { margin-top: -.12em; }
.button.small { padding: .45rem 1.05rem; font-size: .85rem; }
.button:active, .waitlist button:active, #mode:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .button:active, .waitlist button:active, #mode:active { transform: none; } }

footer.site { padding: 2rem 0 2.5rem; font-size: .9rem; color: var(--muted); }
footer.site .wide { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
footer.site .wide::before { content: ""; flex: 0 0 100%; margin-bottom: 1rem; border-top: 1px solid var(--border); }
footer.site nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--foreground); }
footer.site a.social { display: inline-flex; }
footer.site a.social svg { width: 1rem; height: 1rem; }

/* Landing page. */
.intro { padding-top: 4.5rem; padding-bottom: 2.75rem; }
.headline { font: 600 clamp(2rem, 3.4vw, 2.6rem)/1.12 var(--sans); letter-spacing: -.03em; margin: 0; }
.sub { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--body); max-width: 48rem; margin: .6rem 0 0; }
.actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin: 1.6rem 0 0; }
.quiet { color: var(--body); text-decoration: none; font-size: .95rem; }
.quiet:hover { color: var(--foreground); }

/* Hero: the app window on a wallpaper, like the app on a desktop ("Sea of clouds",
   liu qiaojun, CC0). */
.loop { padding-bottom: 8rem; }
.loop .stage { display: flex; justify-content: center; padding: 2.5rem 0; border-radius: var(--r-card); overflow: hidden;
  background: url(../shots/hero-bg.jpg) center 40% / cover no-repeat; }
.loop .stage .shot-img { width: 88%; }
.shot-img { display: block; width: 100%; border-radius: var(--r-pane); border: 1px solid var(--border); box-shadow: var(--shadow); }

/* App clips: a dark and a light take of the same thing, crossfaded on a mode switch.
   They read as moving screenshots: no controls, no clicks. */
.mode-video { position: relative; overflow: hidden; pointer-events: none; background: var(--surface); }
.mode-video video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .35s ease; }
.mode-video video.on { opacity: 1; z-index: 1; }
.mode-video video::-webkit-media-controls, .mode-video video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* Sections. */
.sec { padding-bottom: 10.5rem; }
.sec-head { max-width: 40rem; margin-bottom: 2.5rem; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.claim { font: 600 clamp(1.6rem, 3vw, 2rem)/1.15 var(--sans); letter-spacing: -.025em; margin: 0; }
.caption { color: var(--body); font-size: 1.0625rem; line-height: 1.6; max-width: 36rem; margin: 1.25rem 0 0; text-wrap: pretty; }
.sec-head.center .caption { margin-left: auto; margin-right: auto; }

/* A drawn app window: the frame colour around one pane, as the app sits on a desktop. */
.win { border-radius: calc(var(--r-pane) + .5rem); padding: 0 .5rem .5rem; background: var(--background);
  border: 1px solid var(--border); box-shadow: var(--shadow); }
html[data-mode="dusk"] .win { background: hsl(240 6.25% 96%); }
/* The window's frame is the app's sidebar glass: the frame colour at 30% (the Glass slider at full)
   over a blur, so the glow behind shows through the frame and not through the pane. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glow .win { background: hsl(240 6.67% 5.9% / .3); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
  html[data-mode="dusk"] .glow .win { background: hsl(240 6.25% 93.7% / .3); }
}
.win-bar { display: flex; gap: .45rem; padding: .8rem .5rem; }
.win-bar i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--border-strong); }
.win-body { border-radius: var(--r-pane); background: var(--surface); padding: 1.6rem 1.7rem 1.7rem; }

/* Wires between two drawn things. A stage draws wire i when it gets class w<i>. */
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wires path { fill: none; stroke: var(--border-strong); stroke-width: 2; vector-effect: non-scaling-stroke; }
.wired.anim .wires path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.3,.7,.3,1), opacity .6s ease; }
.wired.w0 .wires path[data-i="0"], .wired.w1 .wires path[data-i="1"],
.wired.w2 .wires path[data-i="2"], .wired.w3 .wires path[data-i="3"] { stroke-dashoffset: 0; }
/* A dashed wire is an open slot, not a connection. */
.wired .wires path.open { stroke-dasharray: .012 .018; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s ease; }
.wired:not(.anim) .wires path.open, .wired.w3 .wires path.open { opacity: 1; }

/* Any harness: each harness wired into the Agents page. */
.harness-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 5.5rem; max-width: 68rem; margin: 0 auto; }
.subs { list-style: none; margin: 0; padding: 0 2.25rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.subs li { display: flex; align-items: center; justify-content: center; gap: .6rem; width: max-content; height: 3.2rem; margin: 0 auto; padding: 0 1.3rem;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface); box-shadow: var(--shadow-sm);
  font: 600 1.02rem/1 var(--sans); letter-spacing: -.01em; }
.subs li.acp { border-style: dashed; background: none; box-shadow: none; color: var(--body); font-weight: 500; }
.subs .logo { width: 1.35rem; height: 1.35rem; flex: none; }
.agents-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.agents-head h3 { margin: 0; font: 600 1.35rem/1.2 var(--sans); letter-spacing: -.02em; }
.agents-head h3 span { margin-left: .4rem; color: var(--muted); font-weight: 500; }
.agents-head .new { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: var(--r-ctl);
  background: var(--foreground); color: var(--background); font: 500 .85rem/1 var(--sans); }
.agents-head .new svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.cards li { position: relative; aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  padding: 0 1rem; text-align: center; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--background); }
html[data-mode="dusk"] .cards li { background: hsl(0 0% 97.6%); }
.cards img { width: 6rem; height: 6rem; border-radius: 50%; margin-bottom: .9rem; object-fit: cover; background: var(--surface-2); }
.cards b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .9rem/1.25rem var(--sans); }
.cards small { font: 400 .78rem/1rem var(--sans); color: var(--body); }
.cards .pill { margin-top: .45rem; padding: .2rem .55rem; border-radius: 999px; background: var(--surface-2); font: 500 .7rem/1.2 var(--sans); color: var(--body); }
.cards .kebab { position: absolute; top: .75rem; right: .75rem; width: 1rem; height: 1rem; fill: var(--muted); }
.cards li.new { border-style: dashed; background: none; color: var(--body); gap: .5rem; }
.cards li.new svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cards li.new span { font: 500 .875rem/1.25rem var(--sans); }

/* Text beside a clip. */
.split { display: grid; grid-template-columns: 1fr 1.9fr; gap: 3rem; align-items: center; }

/* Branches to tasks: GitHub's branch list, in GitHub's own colours, wired to the project's tasks. */
.br-stage { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 7rem; align-items: start; max-width: 68rem; margin: 0 auto; }
.br-label { margin: 0 0 .7rem .2rem; font: 500 .8rem/1 var(--sans); color: var(--muted); letter-spacing: .02em; }
/* The glow behind the Agents window, the Tasks panel and the waitlist window: two colours, uneven
   on purpose (Kirill's): one blue, strong inside the top left corner and weaker inside the bottom right, behind the window so it shows through the glass frame. Do not even it out. */
.glow { position: relative; isolation: isolate; }
.glow::before { content: ""; position: absolute; inset: 0; z-index: -1; filter: blur(48px); opacity: .55; pointer-events: none;
  background: radial-gradient(34% 46% at 14% 16%, #2e70fff7, transparent 70%), radial-gradient(24% 34% at 88% 86%, #2e70ff80, transparent 70%); }
html[data-mode="dusk"] .br-stage .glow::before { opacity: 0; }
.harness-stage .glow::before { opacity: .7; }
.join-win.glow::before { opacity: .4; }
html[data-mode="dusk"] .join-win.glow::before { opacity: .7; }
.panel { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { display: flex; align-items: center; gap: .6rem; height: 3rem; padding: 0 1.1rem; }
.panel-head { display: flex; align-items: center; gap: .6rem; height: 3.4rem; padding: 0 1.1rem; }
.tag { margin-left: auto; padding: .25rem .55rem; border-radius: 999px; font: 500 .7rem/1 var(--sans); font-style: normal; white-space: nowrap; }
.ghp { border: 1px solid #30363d; background: #0d1117; color: #e6edf3;
  font: 400 .9rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; }
.ghp .panel-head { background: #010409; border-bottom: 1px solid #30363d; }
.ghp .panel-head span { color: #9198a1; } .ghp .panel-head b { color: #e6edf3; font-weight: 600; }
.i-gh { width: 1.5rem; height: 1.5rem; fill: #e6edf3; flex: none; }
.ghp li { font: 400 .85rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #4493f8; }
.ghp li + li { border-top: 1px solid #21262d; }
.ghp li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .5s ease; }
.i-br { width: .95rem; height: .95rem; fill: #9198a1; flex: none; }
/* A branch's pull request, as GitHub marks it: green while open, purple once merged. */
.tag.pr { display: grid; padding: 0; }
.tag.pr span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .25rem .55rem; border-radius: 999px;
  transition: opacity .35s ease, transform .35s cubic-bezier(.3,1.5,.5,1); }
.tag.pr svg { flex: none; width: .8rem; height: .8rem; fill: currentColor; }
.tag.pr .open { border: 1px solid #3d444d; color: #9198a1; }
.tag.pr .open svg { fill: #3fb950; }
.tag.pr .merged { background: var(--merged); color: #fff; opacity: 0; transform: scale(.85); }
html[data-mode="dusk"] .ghp { background: #fff; border-color: #d1d9e0; color: #1f2328; }
html[data-mode="dusk"] .ghp .panel-head { background: #f6f8fa; border-color: #d1d9e0; }
html[data-mode="dusk"] .ghp .panel-head span { color: #59636e; } html[data-mode="dusk"] .ghp .panel-head b { color: #1f2328; }
html[data-mode="dusk"] .i-gh { fill: #1f2328; }
html[data-mode="dusk"] .ghp li { color: #0969da; }
html[data-mode="dusk"] .ghp li + li { border-color: #d1d9e0; }
html[data-mode="dusk"] .i-br { fill: #59636e; }
html[data-mode="dusk"] .tag.pr .open { border-color: #d1d9e0; color: #59636e; }
html[data-mode="dusk"] .tag.pr .open svg { fill: #1a7f37; }
/* The Tasks side is the app's task list row: ID, status icon, title, pull request, the
   agent's face, age. */
.tasks { border: 1px solid var(--border); background: var(--surface); }
.tasks .panel-head { font: 600 .95rem/1 var(--sans); border-bottom: 1px solid var(--border); }
.tasks .panel-head svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--body); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tasks li { gap: .75rem; font: 400 .875rem/1 var(--sans); }
.tasks li + li { border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.tasks .id { flex: none; min-width: 4rem; font: 400 .75rem/1 var(--mono); color: var(--body); }
.tasks .status { flex: none; display: grid; }
.st { grid-area: 1 / 1; width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .35s ease, transform .35s cubic-bezier(.3,1.5,.5,1); }
.st.progress { color: var(--warning); }
.st.review { color: #60a5fa; }
.st.done, .opening .st.review { opacity: 0; transform: scale(.6); }
.st.done { color: var(--success); }
.tasks .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks .pr, .tasks .age { flex: none; font-size: .75rem; color: var(--body); white-space: nowrap; }
.tasks .pr:empty { display: none; }
.tasks .age { width: 4rem; text-align: right; }
.face { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.face.owl { display: grid; place-items: center; background: #ffd43b; font-size: .7rem; line-height: 1; }
/* Two moments. A pull request opens on the second branch and its task goes In review.
   Then the first branch merges: at once its task is Done and the branch is crossed out. */
.opening .tag.pr .open, .tasks .opening .pr { opacity: 0; transition: opacity .35s ease; }
.br-stage.pr .opening .tag.pr .open, .br-stage.pr .tasks .opening .pr { opacity: 1; }
.br-stage.pr .opening .st.progress, .br-stage.done .merging .st.review, .br-stage.done .merging .tag.pr .open { opacity: 0; transform: scale(.6); }
.br-stage.pr .opening .st.review, .br-stage.done .merging .st.done, .br-stage.done .merging .tag.pr .merged { opacity: 1; transform: none; }
.br-stage.done .ghp li.merging > span { text-decoration: line-through; opacity: .55; }
.br-stage.anim .tasks li { opacity: 0; transform: translateX(-.4rem); transition: opacity .4s ease .55s, transform .5s cubic-bezier(.3,1.4,.5,1) .55s; }
.br-stage.w0 .tasks li[data-i="0"], .br-stage.w1 .tasks li[data-i="1"], .br-stage.w2 .tasks li[data-i="2"], .br-stage.w3 .tasks li[data-i="3"] { opacity: 1; transform: none; }

/* A card with words on the left and a clip on the right. The pill lists the clip's steps:
   its thumb slides to the current one and fills as the clip plays. */
/* The clip on the left, the words on the right: the section above has them the other way round. */
.tabs-card > .tabs-media { order: -1; }
.tabs-card { display: grid; grid-template-columns: 1fr minmax(17rem, 24rem); gap: 3rem; align-items: center; }
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 2.1rem; padding: 4px;
  border-radius: 999px; background: var(--surface-2); }
.seg .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--steps, 3)); border-radius: 999px; overflow: hidden;
  background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .45s cubic-bezier(.3,.7,.2,1); }
html[data-mode="night"] .seg .thumb { background: hsl(240 2.3% 22%); }
.seg .bar { position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 25%, transparent); transform: scaleX(0); transform-origin: 0 50%; }
.seg button { position: relative; z-index: 1; padding: .55rem .5rem; border: 0; border-radius: 999px; background: none;
  font: 500 .92rem var(--sans); color: var(--body); cursor: pointer; transition: color .3s ease; }
.seg button:hover, .seg button[aria-selected="true"] { color: var(--foreground); }
.seg-desc { display: grid; margin-top: 1.8rem; min-height: 4.8em; }
.seg-desc p { grid-area: 1 / 1; margin: 0; color: var(--body); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty;
  opacity: 0; transform: translateY(.35rem); transition: opacity .35s ease, transform .35s ease; }
.seg-desc p:not(.on) { pointer-events: none; user-select: none; }
.seg-desc p.on { opacity: 1; transform: none; transition-delay: .08s; }
.tabs-media { border-radius: var(--r-pane); overflow: hidden; border: 1px solid var(--border); }

/* More in Volta: one feature at a time. The pill sits on the left, right above the words it
   changes; the clip is on the right. The articles have no box of their own, so the words and
   the clips each stack in one cell of the grid. */
.car-grid { display: grid; grid-template-columns: 1fr 1.9fr; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 3rem; }
.car-grid .claim { grid-area: 2 / 1; margin: 0 0 2rem; }
.car-grid .seg { grid-area: 3 / 1; justify-self: start; width: min(100%, 24rem); margin: 0 0 2rem; }
.car, .car > article { display: contents; }
.car > article > * { opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .4s ease, transform .4s ease, visibility 0s .4s; }
.car > article > :first-child { grid-area: 4 / 1; }
.car > article > .shot-img { grid-area: 1 / 2 / -1 / 2; align-self: center; }
.car > article.on > * { opacity: 1; visibility: visible; transform: none; transition-delay: .05s, .05s, 0s; }
/* The steps as three messages from an agent, drawn as the app draws a conversation
   (desktop `agent-experiment.css`): 14px text, a bubble's padding and 1.125rem corners, a run of
   one sender 0.125rem apart with its joined corners (0.375rem) on the sender's side, the picture
   and the name beside the first. The messages still to come are faint. The typing bubble is the
   app's (3.5625 by 2.125rem, its dots driven by the app's own engine, working-dots.js), sits
   where the next message will, and the message grows out of it as in the app (`BubbleSide`). */
.car-grid:has(.chat) .seg, .car-grid:has(.chat) .car > article > :first-child { display: none; }
.chat { grid-area: 3 / 1 / 5 / 1; position: relative; display: flex; align-items: flex-start; gap: .625rem; --chat-dot: #10B981; }
html[data-mode="dusk"] .chat { --chat-dot: #047857; }
.chat-face { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; }
.chat-name { margin: 0 0 .125rem; font: 500 .8125rem/1.4 var(--sans); color: var(--muted); }
.msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; }
.msgs li { position: relative; }
.msgs button { display: block; box-sizing: border-box; max-width: 21rem; margin: 0; padding: .4375rem .8125rem .5rem; border: 0; border-radius: 1.125rem; overflow: hidden;
  background: var(--surface-2); color: var(--foreground); font: 400 .875rem/1.4 var(--sans); text-align: left; cursor: pointer; transition: opacity .25s ease; }
.msgs li:not(:first-child) button { border-top-left-radius: .375rem; }
.msgs li:not(:last-child) button { border-bottom-left-radius: .375rem; }
.msgs button span, .msgs button b { display: block; }
.msgs button b { font-weight: 600; }
.msgs li.later button { opacity: .32; }
.msgs li.later button:hover { opacity: .6; }
.msgs li.waiting button { visibility: hidden; }
.msgs li.arrive button { transform-origin: bottom left; animation: chat-receive 320ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes chat-receive { from { opacity: 0; transform: translateY(.5rem) scale(.9); } to { opacity: 1; transform: none; } }
.bubble-typing { position: absolute; width: 3.5625rem; height: 2.125rem; border-radius: 1.125rem; background: var(--surface-2);
  transform-origin: bottom left; animation: chat-receive 260ms cubic-bezier(.2, .9, .25, 1.15) both; pointer-events: none; }
/* The app's dots engine names the app's grey for a person typing. */
.bubble-typing { --muted-foreground: 240 4% 52%; }
html[data-mode="dusk"] .bubble-typing { --muted-foreground: 240 3.88% 44%; }
.chat .bubble-typing { border-top-left-radius: .375rem; }
.bubble-typing > i { width: .4375rem; height: .4375rem; border-radius: 50%; }
.car h3 { margin: 0; font: 600 1.35rem/1.2 var(--sans); letter-spacing: -.02em; }

/* Message rows, as the app draws them: your own bubble on the right in the accent, anyone
   else's under their name beside their picture. The waitlist's thank-you is made of them. */
.msg { display: flex; gap: .75rem; margin: 0; }
.msg.mine { justify-content: flex-end; }
.msg[hidden] { display: none; }
.msg > div { min-width: 0; }
.msg .av { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; }
.msg .who { display: flex; align-items: center; gap: .35rem; margin: 0 0 .3rem; font-size: .9rem; color: var(--body); }
.bubble { display: block; width: fit-content; margin: 0 0 .4rem; padding: .5rem .85rem; border-radius: 18px; background: var(--surface-2); }
.msg.mine .bubble { margin: 0; background: var(--accent); color: var(--accent-foreground); }

/* Waitlist: a plain form in an app window. On Join the form gives way to two message
   rows: your answers, then a reply. */
.join { padding-bottom: 7rem; text-align: center; scroll-margin-top: var(--header); }
.join-title { font: 600 clamp(1.8rem, 3.4vw, 2.5rem)/1.1 var(--sans); letter-spacing: -.03em; margin: 0; }
.join .sub { font-size: 1rem; margin: .8rem auto 0; text-wrap: balance; }
.join-win { max-width: 38rem; margin: 2.5rem auto 0; text-align: left; }
.join-box { display: flex; flex-direction: column; overflow: hidden; padding: 1.25rem 2rem 1.6rem; }
.join-chan { display: flex; align-items: center; gap: .4rem; padding-bottom: 1rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border); font-size: .95rem; font-weight: 600; }
.join-chan svg { width: 1rem; height: 1rem; color: var(--muted); }
.waitlist { display: grid; grid-template-columns: 1fr 1fr; gap: 1.45rem 1rem; margin: 0; }
.waitlist .hp { display: none; }
.waitlist .opt { color: var(--muted); font-weight: 400; margin-left: .3rem; }
.waitlist label { position: relative; display: flex; flex-direction: column; gap: .45rem; font-size: .95rem; font-weight: 500; }
.waitlist .full { grid-column: 1 / -1; }
.waitlist input, .waitlist textarea { width: 100%; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: var(--r-ctl);
  background: var(--background); color: var(--foreground); font: 400 1rem/1.4 var(--sans); }
html[data-mode="dusk"] .waitlist input, html[data-mode="dusk"] .waitlist textarea { background: hsl(0 0% 97.6%); }
.waitlist input::placeholder, .waitlist textarea::placeholder { color: var(--muted); }
.waitlist input:focus, .waitlist textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.waitlist textarea { resize: vertical; max-height: 14rem; }
.waitlist input[aria-invalid="true"] { border-color: var(--danger); }
/* Field errors never move the form: they sit in the gap under their field. */
.waitlist .err { position: absolute; left: 0; right: 0; top: 100%; margin-top: .25rem; font-size: .75rem; font-weight: 400; line-height: 1;
  color: var(--danger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Under the pointer the form's button gives its words up for the composer's send arrow. */
.waitlist button { position: relative; justify-self: center; width: auto; margin-top: .3rem; padding: .7rem 1.5rem; overflow: hidden; }
.waitlist button span, .waitlist button svg { transition: transform .28s cubic-bezier(.2, .9, .25, 1), opacity .2s ease; }
.waitlist button span { display: block; }
.waitlist button svg { position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem; opacity: 0; transform: translateY(1.2rem); }
.waitlist button:is(:hover, :focus-visible) span { opacity: 0; transform: translateY(-1.2rem); }
.waitlist button:is(:hover, :focus-visible) svg { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .waitlist button span, .waitlist button svg { transition: none; } }
.note { margin: 1rem 0 0; font-size: .9rem; color: var(--muted); }
.join-form-wrap .note { text-align: center; }
/* On Join: your answers as your own bubbles, then Kirill's row with a small "typing..."
   bubble that his words replace. His words hold their space from the start, so the card
   sizes once. */
.join-done:not([hidden]) { display: grid; gap: .4rem; font-size: .95rem; line-height: 1.5; }
.join-done > * { animation: join-in .45s cubic-bezier(.3,1.2,.5,1) both; }
.join-done .bubble { max-width: 85%; overflow-wrap: anywhere; }
.join-done [data-j="use"] { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.stamp { display: block; font-size: .75rem; color: var(--muted); }
.stamp.mine { justify-self: end; }
.join-role { padding: .2rem .4rem; border-radius: 6px; background: var(--surface-2); font-size: .7rem; font-weight: 500; line-height: 1; }
.join-reply { margin-top: .8rem; animation: none; opacity: 0; transform: translateY(.4rem); transition: opacity .4s ease, transform .5s cubic-bezier(.3,1.2,.5,1); }
.join-reply.typing, .join-reply.said { opacity: 1; transform: none; }
/* Kirill's reply: the app's typing bubble first, in the reply's own place, and the reply grows out of it. */
.join-reply .bubble { position: relative; overflow: hidden; }
.join-reply:not(.said) .bubble { background: none; overflow: visible; }
.join-typing { left: 0; top: 0; display: none; }
.join-reply.typing .join-typing { display: block; }
.join-txt { display: block; }
.join-reply .stamp { transition: opacity .35s ease; }
.join-reply:not(.said) .join-txt, .join-reply:not(.said) .stamp { opacity: 0; }
@keyframes join-in { from { opacity: 0; transform: translateY(.4rem); } }
@media (prefers-reduced-motion: reduce) { .join-done > * { animation: none; } .join-reply { transition: none; } .bubble-typing { animation: none; } }

/* Small pages: Download, You're on the list. */
.message { max-width: 34rem; margin: 0 auto; padding: 6rem 1.5rem 7rem; text-align: center; }
.message .stack { display: block; width: 3rem; height: 3rem; margin: 0 auto 1.5rem; }
.message h1 { font: 600 clamp(2rem, 4vw, 2.6rem)/1.1 var(--sans); letter-spacing: -.03em; margin: .6rem 0 0; }
.message .sub { margin: .9rem auto 0; font-size: 1.1rem; text-wrap: balance; }
.message .actions { justify-content: center; gap: .75rem; margin-top: 2rem; }
.message .note { font-size: .85rem; }
.message:has(+ .get) { padding-bottom: 0; }
.get { max-width: 68rem; margin: 0 auto; padding: 3.2rem 1.5rem 7rem; }
.get .shot-img { height: auto; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
html[data-mode="dusk"] .get .night, html:not([data-mode="dusk"]) .get .dusk { display: none; }
.ways { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; max-width: 45rem; margin: 1.2rem auto 0; padding: 0; color: var(--body); font-size: .95rem; }
.ways strong { display: block; margin-bottom: .2rem; color: var(--foreground); font-weight: 600; }

/* Reading pages: Privacy. */
.legal { max-width: 42rem; padding-top: 4rem; padding-bottom: 6rem; }
.legal h1 { font: 600 clamp(2rem, 4vw, 2.6rem)/1.1 var(--sans); letter-spacing: -.03em; margin: 0 0 .4rem; }
.legal h2 { font: 600 1.15rem/1.3 var(--sans); margin: 2.4rem 0 .6rem; }
.legal p { color: var(--body); line-height: 1.65; margin: .7rem 0 0; }
.legal .updated { color: var(--muted); font-size: .9rem; margin-top: 0; }

/* Changelog: the releases down the page, and every version in a rail beside them that
   follows along and marks where you are. Built by scripts/volta-changelog.py. */
.changelog { display: grid; grid-template-columns: 11rem minmax(0, 44rem); gap: 4rem; justify-content: center;
  max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem 7rem; }
.cl-rail { position: sticky; top: calc(var(--header) + 1.5rem); align-self: start; max-height: calc(100svh - var(--header) - 3rem); overflow-y: auto;
  scrollbar-width: none; font-size: .875rem; }
.cl-rail::-webkit-scrollbar { display: none; }
.cl-rail p { margin: 0 0 .6rem .7rem; font: 500 .8rem/1 var(--sans); color: var(--muted); }
.cl-rail ol { list-style: none; margin: 0; padding: 0; }
.cl-rail a { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .7rem; border-radius: var(--r-row); color: var(--body); text-decoration: none; font-variant-numeric: tabular-nums; }
.cl-rail a span { color: var(--muted); font-size: .8rem; }
.cl-rail a:hover { background: var(--hover); color: var(--foreground); }
.cl-rail a[aria-current="true"] { background: color-mix(in srgb, var(--foreground) 10%, transparent); color: var(--foreground); }
.cl-head h1 { font: 600 clamp(2rem, 4vw, 2.6rem)/1.1 var(--sans); letter-spacing: -.03em; margin: 0; }
.cl-head .sub { font-size: 1.05rem; margin-top: .7rem; }
.release { padding-top: 3rem; margin-top: 3rem; border-top: 1px solid var(--border); scroll-margin-top: var(--header); }
.release-head { margin-bottom: 1.4rem; }
.release-head .meta { display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; font-size: .9rem; color: var(--muted); }
.version { font: 600 2rem/1.2 var(--sans); letter-spacing: -.03em; margin: 0; }
.version a { text-decoration: none; }
.release-head .tag { margin-left: 0; background: var(--surface-2); color: var(--body); }
.release-head .tag.latest { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); }
.release figure { margin-bottom: 1.5rem; }
.release figure img { display: block; width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--border); }
.release figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.release figcaption a { text-decoration: none; }
.release p, .release li { color: var(--body); line-height: 1.65; }
.release strong { color: var(--foreground); font-weight: 600; }
.release h3 { font: 600 1.05rem/1.35 var(--sans); margin: 2rem 0 .6rem; }
.release ul { padding-left: 1.2rem; margin: 0; }
.release li { margin: .35rem 0; }
.release li::marker { color: var(--muted); }
.release code { font: 500 .85em var(--mono); background: var(--surface-2); border-radius: 6px; padding: .1rem .35rem; color: var(--foreground); overflow-wrap: anywhere; }
.release blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 2px solid var(--border-strong); }
.release table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.release th, .release td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); color: var(--body); }
.release th { color: var(--foreground); font-weight: 600; }

@media (max-width: 56rem) {
  .tabs-card, .split { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .car-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 1.5rem; }
  .car-grid .claim { grid-area: 1 / 1; margin: 0; }
  .car-grid .seg { grid-area: 2 / 1; width: 100%; margin: 0; }
  .chat { grid-area: 2 / 1 / 4 / 1; }
  .car > article > :first-child { grid-area: 3 / 1; }
  .car > article > .shot-img { grid-area: 4 / 1; }
  .tabs-card > .tabs-media { order: 0; }
  .changelog { grid-template-columns: minmax(0, 44rem); }
  .cl-rail { display: none; }
  .br-stage { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .br-stage .wires { display: none; }
  .br-stage.anim .tasks li { opacity: 1; transform: none; }
}
@media (max-width: 48rem) {
  .sec { padding-bottom: 5.5rem; }
  .intro { padding-top: 3rem; }
  .loop { padding-bottom: 4.5rem; }
  .loop .stage { padding: 1.25rem; }
  .loop .stage .shot-img { width: 100%; }
  .harness-stage { row-gap: 2rem; }
  .subs { padding: 0; }
  .subs, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subs li { width: 100%; height: 2.8rem; padding: 0 .8rem; font-size: .9rem; }
  .wires { display: none; }
  .cards li { aspect-ratio: auto; padding: 1.1rem .6rem; }
  .cards img { width: 4rem; height: 4rem; margin-bottom: .5rem; }
  nav.links .hide-sm { display: none; }
  footer.site .wide, footer.site nav { justify-content: center; text-align: center; }
}
@media (max-width: 34rem) {
  .ways { grid-template-columns: 1fr; }
  .tasks .pr, .tasks .age { display: none; }
  .tasks .id { min-width: 0; }
  .seg button { padding: .55rem .2rem; font-size: .8rem; white-space: nowrap; }
  .join-box { padding: 1rem 1.1rem 1.25rem; }
  .agents-head .new { display: none; }
}