/* ═══ CTRL+SPC marketing ═══
*
* The palette is the app's, copied token for token from web/src/styles/tokens.css:
* a strict greyscale canvas, six hued "kind" tags, and one saturated blue that
* belongs to the agent. Nothing here invents a colour the product does not have.
*
* The page's material is the logo. The mark is a keycap — 1px border, a 2.5px
* bottom edge, a mono label — so every object on this page is a keycap, and
* every arrival is a keypress. That is the one idea the page is built from.
*
* Each section plays its animation ONCE, when it comes into view. Nothing is
* tied to scroll position: the reader gets the whole idea at reading speed
* instead of scrubbing it, and can look away and back without losing it. */
:root {
--font-display: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--r-sm: 5px;
--r-md: 8px;
--r-lg: 12px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-back: cubic-bezier(0.34, 1.4, 0.5, 1);
/* light — web/src/styles/tokens.css */
color-scheme: light;
--bg: oklch(1 0 0);
--surface: oklch(0.972 0 0);
--surface-2: oklch(0.942 0 0);
--border: oklch(0.898 0 0);
--border-strong: oklch(0.78 0 0);
--ink: oklch(0.225 0 0);
--muted: oklch(0.465 0 0);
--faint: oklch(0.60 0 0);
--primary: oklch(0.225 0 0);
--on-primary: oklch(1 0 0);
--kind-epic: oklch(0.56 0.15 300);
--kind-sprint: oklch(0.58 0.13 60);
--kind-skill: oklch(0.56 0.15 200);
--kind-credential: oklch(0.56 0.15 20);
--kind-workflow: oklch(0.58 0.13 110);
--agent-send: oklch(0.56 0.26 264);
--on-agent-send: oklch(0.99 0 0);
--card-shadow: 0 1px 2px oklch(0 0 0 / 0.06), 0 1px 1px oklch(0 0 0 / 0.04);
--lift-shadow: 0 10px 30px oklch(0 0 0 / 0.10), 0 2px 6px oklch(0 0 0 / 0.06);
--keycap-edge: oklch(0 0 0 / 0.25);
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg: oklch(0.245 0 0);
--surface: oklch(0.285 0 0);
--surface-2: oklch(0.33 0 0);
--border: oklch(0.38 0 0);
--border-strong: oklch(0.47 0 0);
--ink: oklch(0.93 0 0);
--muted: oklch(0.72 0 0);
--faint: oklch(0.58 0 0);
--primary: oklch(0.93 0 0);
--on-primary: oklch(0.20 0 0);
--kind-epic: oklch(0.72 0.13 300);
--kind-sprint: oklch(0.75 0.12 60);
--kind-skill: oklch(0.72 0.13 200);
--kind-credential: oklch(0.72 0.13 20);
--kind-workflow: oklch(0.75 0.12 110);
--agent-send: oklch(0.62 0.24 264);
--card-shadow: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 1px oklch(0 0 0 / 0.20);
--lift-shadow: 0 10px 30px oklch(0 0 0 / 0.45), 0 2px 6px oklch(0 0 0 / 0.30);
--keycap-edge: oklch(0 0 0 / 0.45);
}
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--primary); color: var(--on-primary); }
:where(a, button, input):focus-visible { outline: 2px solid var(--agent-send); outline-offset: 2px; }
.wrap { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }
/* ═══ the keycap: the page's one material ═══ */
.key {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.15em 0.5em 0.2em;
border: 1px solid var(--border-strong);
border-bottom-width: 2.5px;
border-radius: var(--r-sm);
background: var(--surface);
color: var(--ink);
}
.key--filled {
background: var(--primary);
color: var(--on-primary);
border-color: transparent;
border-bottom-color: var(--keycap-edge);
}
.logo { display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.logo .key { font-size: 0.6875rem; padding: 2px 7px 3px; }
.logo-plus { color: var(--muted); font-size: 0.6875rem; font-weight: 600; }
/* ═══ chrome ═══ */
.masthead {
position: sticky;
top: 0;
z-index: 10;
padding: 0.9rem 0;
background: color-mix(in srgb, var(--bg) 84%, transparent);
backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: border-color 200ms linear;
}
.masthead.is-stuck { border-bottom-color: var(--border); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.masthead a.link { font-family: var(--font-display); font-size: 0.75rem; color: var(--muted); text-decoration: none; }
.masthead a.link:hover { color: var(--ink); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: 0 1.15rem;
border: 1px solid transparent;
border-radius: var(--r-md);
background: var(--agent-send);
color: var(--on-agent-send);
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn[disabled] { opacity: 0.55; cursor: default; filter: none; }
.btn--sm { min-height: 2.25rem; padding: 0 0.9rem; font-size: 0.75rem; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--quiet:hover { background: var(--surface); filter: none; }
/* ═══ the alternating section ═══
* Art on one side, a short block of words on the other, swapping sides down the
* page. Nothing is pinned: each pair is a normal section you scroll past. */
.pitch { padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.pitch-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 6vw, 5rem);
}
.pitch--flip .pitch-art { order: -1; }
.pitch-copy { max-width: 30rem; }
.pitch--flip .pitch-copy { margin-left: auto; }
.eyebrow {
margin: 0 0 0.75rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--faint);
}
.pitch h2 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.75rem, 4.2vw, 3rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.08;
}
.pitch-copy p {
margin: 1rem 0 0;
color: var(--muted);
font-size: clamp(1rem, 1.5vw, 1.125rem);
}
/* the art is a dense square, never a wide sparse field */
.cluster {
position: relative;
width: min(100%, 520px);
aspect-ratio: 1 / 0.95;
margin-inline: auto;
container-type: size;
}
/* ═══ how a scene plays ═══
* Every animated part sits at its FINAL coordinates and is offset back to where
* it came from. Adding `is-in` removes the offset, so one class plays the whole
* scene and the resting layout is the thing written in the geometry below. */
.at {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
--shift: translate(calc(var(--fx, 0) * 1cqw), calc(var(--fy, 0) * 1cqh));
transform: translate(-50%, -50%) var(--shift) scale(var(--fs, 1));
opacity: 0;
transition:
opacity 420ms var(--ease-out) var(--delay, 0ms),
transform 720ms var(--ease-back) var(--delay, 0ms);
}
.is-in .at { transform: translate(-50%, -50%); opacity: 1; }
.box {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
width: calc(var(--w) * 1%);
height: calc(var(--h) * 1%);
opacity: 0;
transform: scale(0.96);
transition:
opacity 420ms var(--ease-out) var(--delay, 0ms),
transform 560ms var(--ease-out) var(--delay, 0ms);
}
.is-in .box { opacity: 1; transform: none; }
/* ═══ the parts ═══ */
.panel {
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
overflow: hidden;
}
/* the panel wears the product's own "let go here" outline while it is filling */
.is-in .panel--catching {
animation: catching 2.6s var(--ease-out) var(--delay, 0ms) 1 both;
}
@keyframes catching {
0%, 100% { outline-color: transparent; background: var(--surface); }
12%, 82% {
outline-color: var(--primary);
background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
}
.panel--catching { outline: 2px dashed transparent; outline-offset: -2px; }
.panel-head {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.75rem;
border-bottom: 1px solid var(--border);
font-family: var(--font-display);
font-size: clamp(0.625rem, 2.4cqw, 0.75rem);
font-weight: 600;
color: var(--muted);
}
.dot {
width: 0.55em;
height: 0.55em;
flex: none;
border-radius: 50%;
background: var(--agent-send);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-send) 20%, transparent);
}
.slot {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
width: calc(var(--w) * 1%);
height: 2rem;
transform: translate(-50%, -50%);
border: 1px dashed var(--border);
border-radius: var(--r-sm);
}
/* the name of the place a thing came from, which is one screen away */
.lab {
width: 17cqw;
text-align: right;
font-family: var(--font-display);
font-size: clamp(0.5rem, 2cqw, 0.625rem);
color: var(--faint);
white-space: nowrap;
}
/* an object: a keycap with a kind on it */
.tile {
display: flex;
align-items: center;
gap: 0.45rem;
width: calc(var(--w, 0) * 1%);
min-width: max-content;
padding: 0.45rem 0.7rem 0.5rem;
border: 1px solid var(--border-strong);
border-bottom-width: 2.5px;
border-radius: var(--r-sm);
background: var(--surface);
box-shadow: var(--card-shadow);
font-family: var(--font-display);
font-size: clamp(0.6875rem, 2.5cqw, 0.8125rem);
font-weight: 600;
white-space: nowrap;
}
.tile::before {
content: '';
flex: none;
width: 0.5em;
height: 0.5em;
border-radius: 2px;
background: var(--kind, var(--muted));
}
.tile--plain::before { display: none; }
.tile em { margin-left: auto; font-style: normal; color: var(--faint); font-weight: 400; }
/* the keycap presses as it lands */
.is-in .tile--lands { animation: press 320ms var(--ease-out) calc(var(--delay, 0ms) + 560ms) 1 both; }
@keyframes press {
0% { border-bottom-width: 2.5px; }
45% { border-bottom-width: 1px; }
100% { border-bottom-width: 2.5px; }
}
.go {
display: grid;
place-items: center;
width: calc(var(--w) * 1%);
height: 2.1rem;
border-radius: var(--r-md);
background: var(--agent-send);
color: var(--on-agent-send);
font-family: var(--font-display);
font-size: clamp(0.625rem, 2.3cqw, 0.75rem);
font-weight: 600;
white-space: nowrap;
}
/* a card: the crew's unit, and the shape a decision arrives in */
.card {
width: calc(var(--w) * 1%);
max-width: 96cqw;
padding: 0.5rem 0.6rem 0.55rem;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
box-shadow: var(--card-shadow);
font-family: var(--font-display);
font-size: clamp(0.5625rem, 2.1cqw, 0.6875rem);
line-height: 1.35;
}
.card b { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.card small { display: block; margin-top: 0.3rem; color: var(--faint); font-size: 0.92em; }
.card--lifted { box-shadow: var(--lift-shadow); border-color: var(--agent-send); }
.meter {
margin-top: 0.4rem;
height: 4px;
border-radius: 2px;
background: var(--surface-2);
overflow: hidden;
}
.meter i {
display: block;
height: 100%;
border-radius: 2px;
background: var(--agent-send);
transform-origin: left center;
transform: scaleX(0);
transition: transform 1100ms var(--ease-out) calc(var(--delay, 0ms) + 260ms);
}
.is-in .meter i { transform: scaleX(var(--fill, 1)); }
/* Arrives later, in flow. Only opacity and transform move, so the space it
will occupy is held from the start and nothing below it jumps. */
.rise {
opacity: 0;
transform: translateY(6px);
transition:
opacity 420ms var(--ease-out) var(--delay, 0ms),
transform 520ms var(--ease-out) var(--delay, 0ms);
}
.is-in .rise { opacity: 1; transform: none; }
/* one thread, holding both halves of the conversation */
.thread { text-align: left; }
.thread > b { margin-bottom: 0.5rem; color: var(--muted); }
.bubble {
margin: 0.35rem 0 0;
padding: 0.4rem 0.55rem 0.45rem;
border-radius: 7px;
max-width: 86%;
line-height: 1.35;
}
.bubble--you { margin-left: auto; background: var(--primary); color: var(--on-primary); }
.bubble--agent {
background: var(--surface-2);
border-left: 3px solid var(--kind-sprint);
border-radius: 3px 7px 7px 3px;
}
.choices { display: flex; gap: 0.3rem; margin-top: 0.45rem; }
.choices span {
flex: 1;
padding: 0.25rem 0;
text-align: center;
border-radius: 4px;
border: 1px solid var(--border-strong);
font-weight: 600;
}
.choices span:first-child { background: var(--agent-send); color: var(--on-agent-send); border-color: transparent; }
/* a line between two things, drawn in */
.wire {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
width: 1px;
height: calc(var(--h, 0) * 1%);
background: var(--line, var(--border-strong));
transform-origin: var(--from, top center);
transform: scale3d(var(--sx, 1), var(--sy, 0), 1);
transition: transform 480ms var(--ease-out) var(--delay, 0ms);
}
.is-in .wire { transform: none; }
.wire--h { width: calc(var(--w) * 1%); height: 1px; --sx: 0; --sy: 1; --from: left center; }
.wire--up { --from: bottom center; }
.wire--dashed { background: none; border-top: 1px dashed var(--border-strong); }
.chip {
padding: 0.28rem 0.6rem 0.32rem;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
font-family: var(--font-display);
font-size: clamp(0.5625rem, 2.1cqw, 0.6875rem);
font-weight: 600;
color: var(--muted);
white-space: nowrap;
}
.badge {
display: grid;
place-items: center;
width: 1.35rem;
height: 1.35rem;
border-radius: 50%;
background: var(--kind-sprint);
color: oklch(0.18 0 0);
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
}
.is-in .badge { animation: nudge 1.6s var(--ease-out) calc(var(--delay, 0ms) + 400ms) 2; }
@keyframes nudge {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.16); }
}
/* the three places context gets stuck, each drawn as the thing it is */
.is-in .vault { animation: dim 900ms var(--ease-out) calc(var(--delay, 0ms) + 700ms) 1 both; }
@keyframes dim { to { opacity: 0.42; } }
.vault-label {
position: absolute;
left: 50%;
top: calc(100% + 0.45rem);
transform: translateX(-50%);
font-family: var(--font-display);
font-size: clamp(0.5rem, 2cqw, 0.625rem);
color: var(--faint);
white-space: nowrap;
}
/* the frame every one of them is drawn inside */
.frame {
position: absolute;
inset: 0;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--surface);
overflow: hidden;
}
/* the strip along the top of a window, with its three controls */
.titlebar {
position: absolute;
inset: 0 0 auto 0;
height: 26%;
display: flex;
align-items: center;
gap: 3px;
padding-inline: 6%;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.titlebar::before,
.titlebar::after,
.titlebar u {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--border-strong);
}
.line {
position: absolute;
height: 1px;
background: var(--border-strong);
}
/* a laptop: a lid on a base */
.vault--machine .frame { border-radius: 6px 6px 2px 2px; }
.vault--machine .screen {
position: absolute;
inset: 12% 9% 16%;
border: 1px solid var(--border);
border-radius: 2px;
background: var(--surface-2);
}
.vault--machine .l1 { left: 18%; right: 34%; top: 38%; }
.vault--machine .l2 { left: 18%; right: 22%; top: 55%; }
.vault--machine .base {
position: absolute;
left: -9%;
right: -9%;
top: calc(100% + 2px);
height: 4px;
border-radius: 0 0 4px 4px;
background: var(--border-strong);
}
.vault--machine .base::after {
content: '';
position: absolute;
left: 38%;
right: 38%;
top: 0;
height: 100%;
background: var(--faint);
border-radius: 0 0 2px 2px;
}
.vault--machine .vault-label { top: calc(100% + 1rem); }
/* a chat: a window of turns, still being typed into */
.vault--chat .bub {
position: absolute;
height: 16%;
border-radius: 5px;
background: var(--surface-2);
border: 1px solid var(--border);
}
.vault--chat .b1 { left: 8%; width: 44%; top: 36%; }
.vault--chat .b2 { right: 8%; width: 34%; top: 58%; background: var(--border); }
.vault--chat .b3 { left: 8%; width: 26%; top: 80%; }
.vault--chat .caret {
position: absolute;
left: 38%;
top: 82%;
width: 1px;
height: 11%;
background: var(--ink);
}
/* a codebase: a file open in an editor, with a gutter */
.vault--code .gutter {
position: absolute;
left: 0;
top: 26%;
bottom: 0;
width: 15%;
border-right: 1px solid var(--border);
background: var(--surface-2);
}
.vault--code .tab {
position: absolute;
left: 22%;
top: 6%;
width: 32%;
height: 20%;
border-radius: 3px 3px 0 0;
background: var(--bg);
border: 1px solid var(--border);
border-bottom: none;
}
.vault--code .l1 { left: 21%; right: 24%; top: 44%; }
.vault--code .l2 { left: 28%; right: 46%; top: 62%; }
.vault--code .l3 { left: 28%; right: 30%; top: 80%; }
/* one surface, reachable from every side */
.plane {
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
background:
repeating-linear-gradient(to right, color-mix(in srgb, var(--border) 55%, transparent) 0 1px, transparent 1px 24px),
var(--surface);
}
/* Who a thing is reachable by, drawn rather than labelled with a blank disc:
one figure is a person, three is a team, and the agent gets a mark that is
plainly not a person. The glyph is a mask, so it takes its colour from the
text beside it and needs no second rule per theme. */
.who {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
font-family: var(--font-display);
font-size: clamp(0.5rem, 2cqw, 0.625rem);
color: var(--muted);
white-space: nowrap;
--glyph: url('data:image/svg+xml;utf8,');
}
.who::before {
content: '';
width: 1.5rem;
height: 1.35rem;
background: currentColor;
-webkit-mask: var(--glyph) center / contain no-repeat;
mask: var(--glyph) center / contain no-repeat;
}
.who--team {
--glyph: url('data:image/svg+xml;utf8,');
}
.who--team::before { width: 2.4rem; }
.who--agent {
color: var(--agent-send);
--glyph: url('data:image/svg+xml;utf8,');
}
/* ═══ hero ═══ */
/* The hero owns the first screen. The panel scene below it is an animation
that plays once, and a reader who can see both at the moment they land
watches neither. */
.hero {
display: grid;
grid-template-rows: 1fr auto;
min-height: calc(100svh - 4.5rem);
padding-block: clamp(1.5rem, 4vh, 3rem);
}
.hero .pitch-inner { align-self: center; }
.wordmark {
display: flex;
align-items: center;
gap: clamp(6px, 1vw, 12px);
margin: 0;
font-size: clamp(2.25rem, 8vw, 5rem);
line-height: 1;
}
.wordmark .key {
padding: 0.1em 0.28em 0.14em;
border-width: clamp(1px, 0.14vw, 2px);
border-bottom-width: clamp(3px, 0.6vw, 7px);
border-radius: clamp(6px, 0.9vw, 12px);
animation: chord 900ms var(--ease-out) 220ms both;
}
.wordmark .key:last-of-type { animation-delay: 480ms; }
.wordmark .logo-plus { font-size: 0.3em; }
@keyframes chord {
0% { transform: translateY(-0.06em); opacity: 0; }
55% { transform: translateY(0.05em); opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}
.hero-lead {
max-width: 26ch;
margin: clamp(1.25rem, 3vh, 2rem) 0 0;
font-size: clamp(1.0625rem, 2vw, 1.375rem);
color: var(--muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
/* The ticker. "No more" is the fixed half of the sentence; the other half rolls
up into place on a wheel, sits still long enough to read, and rolls out the
top. One item every 4.2s, twelve of them, and the wheel stops while the
pointer is on the bar. From 701px up the bar is pinned to the bottom of the
window with the waitlist button on its right; below that it sits in the flow
at the foot of the hero and the button takes its own row. */
.tick {
margin-top: clamp(2rem, 6vh, 4rem);
border-top: 1px solid var(--border);
background: var(--bg);
font-family: var(--font-display);
font-size: clamp(0.8125rem, 1.35vw, 1rem);
}
.tick-in { display: flex; align-items: center; gap: 1.25rem; padding-block: 0.7rem; }
.tick-row { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 0.55rem; }
.tick-fixed { flex: none; line-height: 1.55; font-weight: 600; color: var(--ink); }
.tick-lane {
flex: 1;
position: relative;
height: 1.55em;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
perspective: 340px;
container-type: inline-size;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
}
.tick-item {
position: absolute;
left: 0;
top: 0;
width: max-content;
max-width: none;
line-height: 1.55;
color: var(--muted);
white-space: nowrap;
opacity: 0;
transform: translateY(-112%) rotateX(72deg);
animation: ticker 50400ms linear var(--in) infinite;
}
@keyframes ticker {
0% { opacity: 0; transform: translateY(112%) rotateX(-72deg);
animation-timing-function: var(--ease-out); }
1.11% { opacity: 1; transform: none; }
8.33% { opacity: 1; transform: none;
animation-timing-function: var(--ease-out); }
9.44%, 100% { opacity: 0; transform: translateY(-112%) rotateX(72deg); }
}
/* A line too long for the lane walks itself left far enough to finish, and one
that already fits does not move: the distance is never more than zero. */
.tick-text { display: inline-block; animation: drift 50400ms linear var(--in) infinite; }
@keyframes drift {
0%, 1.6% { transform: translateX(0); }
7.2%, 100% { transform: translateX(min(0px, calc(100cqw - 100%))); }
}
.tick-cta { flex: none; min-height: 2.25rem; }
.tick:hover .tick-item, .tick:hover .tick-text,
.tick:focus-within .tick-item, .tick:focus-within .tick-text { animation-play-state: paused; }
.tk1 { --in: 0ms; }
.tk2 { --in: 4200ms; }
.tk3 { --in: 8400ms; }
.tk4 { --in: 12600ms; }
.tk5 { --in: 16800ms; }
.tk6 { --in: 21000ms; }
.tk7 { --in: 25200ms; }
.tk8 { --in: 29400ms; }
.tk9 { --in: 33600ms; }
.tk10 { --in: 37800ms; }
.tk11 { --in: 42000ms; }
.tk12 { --in: 46200ms; }
/* pinned to the window, with the page given room to clear it */
@media (min-width: 701px) {
body { padding-bottom: 4.25rem; }
.tick {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
margin-top: 0;
}
}
/* in the flow at the foot of the hero, and the button gets its own row */
@media (max-width: 700px) {
.tick-in { display: block; padding-bottom: 0.9rem; }
.tick-cta { display: flex; width: 100%; margin-top: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
.tick-item, .tick-text { animation: none; }
.tick-item { transform: none; opacity: 0; }
li.tk1 { opacity: 1; }
}
/* the hero's pile: every noun the page is about, in one heap */
.pile { position: relative; width: min(100%, 440px); aspect-ratio: 1 / 0.8; margin-inline: auto; container-type: size; }
.pile .tile {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg));
box-shadow: var(--lift-shadow);
animation: dealt 620ms var(--ease-back) var(--delay) both;
}
@keyframes dealt {
from { transform: translate(-50%, -50%) rotate(0deg) translateY(18px) scale(0.9); opacity: 0; }
}
/* the four pairs are one chapter, and it says so */
.chapter {
padding-block: clamp(3.5rem, 9vh, 6rem) 0;
}
.chapter h2 {
margin: 0;
padding-top: clamp(2rem, 5vh, 3rem);
border-top: 1px solid var(--border);
font-family: var(--font-display);
font-size: clamp(2rem, 7vw, 4rem);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1;
}
.chapter + .swap { padding-top: clamp(1.75rem, 4vh, 2.75rem); }
/* ═══ before and after: the setup ═══
* Two panels, played in sequence rather than at once: the prompt writes itself
* out in full, and only then does the panel beside it take the same four things
* as four clicks. The reader watches one, then the other, and the comparison is
* still on screen when the second finishes.
*
* ONE TIMELINE, IN MILLISECONDS, and every delay below is a point on it:
* 0 ─────────────── 10400 the same four things, carried in by hand
* 11200 ──────────── 14200 the same four things, clicked in */
.swap { padding-block: clamp(3.5rem, 9vh, 6.5rem); }
/* These headlines carry the whole contrast, so they run longer than the ones
on the scenes above and are set smaller to hold their line count. */
.swap-copy { max-width: 36rem; margin-bottom: clamp(1.75rem, 4vh, 2.75rem); }
.swap-copy h2 { font-size: clamp(1.5rem, 3.1vw, 2.25rem); line-height: 1.15; }
.swap-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1rem, 2.5vw, 2rem);
}
.side { margin: 0; }
.side-tag {
display: block;
margin-bottom: 0.6rem;
font-family: var(--font-display);
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--faint);
}
.side--after .side-tag { color: var(--agent-send); }
.stage-box {
position: relative;
display: flex;
flex-direction: column;
height: 310px;
container-type: size;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
overflow: hidden;
font-family: var(--font-display);
font-size: clamp(0.5625rem, 2.4cqw, 0.6875rem);
}
.side--after .stage-box { background: var(--bg); border-color: var(--border-strong); }
.bar {
flex: none;
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.7rem;
border-bottom: 1px solid var(--border);
color: var(--muted);
font-weight: 600;
}
.bar .dots { display: flex; gap: 3px; }
.bar .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }
/* everything under a stage box's title bar, clipped to it */
.pane {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* The prompt is written on the right and carried in from the left. Four round
trips, and they are the same four things the panel beside it attaches with
four clicks: the work and its documents, the process, the skills, the key.
The fourth trip is the one worth watching: the key arrives in plain text, in
a prompt, which is where it then lives. */
.pane--split { display: flex; }
.treewrap {
flex: none;
width: 38%;
display: flex;
flex-direction: column;
min-height: 0;
border-right: 1px solid var(--border);
background: var(--surface);
}
.tfilter {
flex: none;
display: flex;
align-items: center;
gap: 0.3rem;
margin: 0.3rem;
padding: 0.22rem 0.35rem 0.26rem;
border: 1px solid var(--border-strong);
border-radius: 4px;
color: var(--faint);
}
.tfilter::before {
content: '';
flex: none;
width: 0.55em;
height: 0.55em;
border: 1.5px solid currentColor;
border-radius: 50%;
}
.tclip { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.treelist { padding: 0 0.28rem 0.3rem; display: grid; align-content: start; gap: 1px; }
.trow {
padding: 0.16rem 0.28rem 0.19rem;
border-radius: 3px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.d1 { padding-left: 0.72rem; }
.d2 { padding-left: 1.2rem; }
.d3 { padding-left: 1.68rem; }
.trow--dir { color: var(--ink); font-weight: 600; }
/* it is a long way down, and the bar says how far */
.tbar {
position: absolute;
top: 2px;
bottom: 2px;
right: 2px;
width: 3px;
border-radius: 2px;
background: var(--surface-2);
}
.tthumb {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 25%;
border-radius: 2px;
background: var(--border-strong);
}
/* ── the cost of carrying one path ──
* Four times over: scroll the tree, land on the row, right-click, choose Copy
* path, cross to the composer, right-click, choose Paste. Each round trip is
* 2.4 seconds and the whole thing runs ten, which is the point of showing it.
* Cycle n begins at 600, 3000, 5400 and 7800ms. */
/* Placed in the same units the cursor moves in, so the menu opens at the
pointer rather than a row above it: the pane is shorter than the box. */
.menu {
position: absolute;
left: calc(var(--x) * 1cqw);
top: calc(var(--y) * 1cqh);
min-width: 7.6em;
padding: 3px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--bg);
box-shadow: var(--lift-shadow);
opacity: 0;
z-index: 3;
}
.menu span {
display: block;
padding: 3px 7px 4px;
border-radius: 3px;
color: var(--muted);
white-space: nowrap;
}
.menu .hot { background: var(--primary); color: var(--on-primary); }
.menu--tree { --x: 20; --y: 46.5; }
.is-in .menu--tree { animation: treemenu 9800ms linear 600ms 1 both; }
@keyframes treemenu {
0%, 2.4% { opacity: 0; }
2.5%, 8.3% { opacity: 1; }
8.4%, 26.9% { opacity: 0; }
27%, 32.8% { opacity: 1; }
32.9%, 51.4% { opacity: 0; }
51.5%, 57.2% { opacity: 1; }
57.3%, 100% { opacity: 0; }
}
/* A path is not what you need off a .env, so the fourth trip opens a different
menu and takes the value itself. That is the trip the section is about. */
.menu--env { --x: 20; --y: 46.5; }
.is-in .menu--env { animation: envmenu 9800ms linear 600ms 1 both; }
@keyframes envmenu {
0%, 75.9% { opacity: 0; }
76%, 81.7% { opacity: 1; }
81.8%, 100% { opacity: 0; }
}
.menu--paste { --x: 62; --y: 46; }
.is-in .menu--paste { animation: pastemenu 9800ms linear 600ms 1 both; }
@keyframes pastemenu {
0%, 14.2% { opacity: 0; }
14.3%, 20% { opacity: 1; }
20.1%, 38.7% { opacity: 0; }
38.8%, 44.5% { opacity: 1; }
44.6%, 63.2% { opacity: 0; }
63.3%, 69% { opacity: 1; }
69.1%, 87.7% { opacity: 0; }
87.8%, 93.5% { opacity: 1; }
93.6%, 100% { opacity: 0; }
}
/* the hunt: four stops, each bringing the next row under the cursor */
.is-in .treelist { animation: hunt 8000ms var(--ease-out) 200ms both; }
@keyframes hunt {
0% { transform: translateY(0); }
5%, 30.6% { transform: translateY(-315px); }
35%, 60.6% { transform: translateY(-460px); }
65%, 90.6% { transform: translateY(-557px); }
95%, 100% { transform: translateY(-630px); }
}
.is-in .tthumb { animation: huntbar 8000ms var(--ease-out) 200ms both; }
@keyframes huntbar {
0% { transform: translateY(0); }
5%, 30.6% { transform: translateY(79px); }
35%, 60.6% { transform: translateY(115px); }
65%, 90.6% { transform: translateY(140px); }
95%, 100% { transform: translateY(158px); }
}
/* the cursor, doing all of it by hand */
.is-in .cursor--copy { animation: pointcopy 9800ms linear 600ms 1 both; }
@keyframes pointcopy {
0% { transform: translate(18.8cqw, 53cqh); opacity: 0; }
1% { transform: translate(18.8cqw, 46.5cqh); opacity: 1; }
2% { transform: translate(18.8cqw, 48.5cqh); }
2.7% { transform: translate(18.8cqw, 46.5cqh); }
5.6% { transform: translate(30cqw, 55.5cqh); }
7.7% { transform: translate(30cqw, 57.5cqh); }
8.4% { transform: translate(30cqw, 55.5cqh); }
11.7% { transform: translate(62cqw, 46cqh); }
13.8% { transform: translate(62cqw, 48cqh); }
14.5% { transform: translate(62cqw, 46cqh); }
17.3% { transform: translate(66cqw, 55cqh); }
19.4% { transform: translate(66cqw, 57cqh); }
20.1% { transform: translate(66cqw, 55cqh); }
24.5% { transform: translate(18.8cqw, 46.5cqh); }
26.5% { transform: translate(18.8cqw, 48.5cqh); }
27.2% { transform: translate(18.8cqw, 46.5cqh); }
30.1% { transform: translate(30cqw, 55.5cqh); }
32.2% { transform: translate(30cqw, 57.5cqh); }
32.9% { transform: translate(30cqw, 55.5cqh); }
36.2% { transform: translate(62cqw, 46cqh); }
38.3% { transform: translate(62cqw, 48cqh); }
39% { transform: translate(62cqw, 46cqh); }
41.8% { transform: translate(66cqw, 55cqh); }
43.9% { transform: translate(66cqw, 57cqh); }
44.6% { transform: translate(66cqw, 55cqh); }
49% { transform: translate(18.8cqw, 46.5cqh); }
51% { transform: translate(18.8cqw, 48.5cqh); }
51.7% { transform: translate(18.8cqw, 46.5cqh); }
54.6% { transform: translate(30cqw, 55.5cqh); }
56.7% { transform: translate(30cqw, 57.5cqh); }
57.4% { transform: translate(30cqw, 55.5cqh); }
60.7% { transform: translate(62cqw, 46cqh); }
62.8% { transform: translate(62cqw, 48cqh); }
63.5% { transform: translate(62cqw, 46cqh); }
66.3% { transform: translate(66cqw, 55cqh); }
68.4% { transform: translate(66cqw, 57cqh); }
69.1% { transform: translate(66cqw, 55cqh); }
73.5% { transform: translate(18.8cqw, 46.5cqh); }
75.5% { transform: translate(18.8cqw, 48.5cqh); }
76.2% { transform: translate(18.8cqw, 46.5cqh); }
79.1% { transform: translate(30cqw, 55.5cqh); }
81.2% { transform: translate(30cqw, 57.5cqh); }
81.9% { transform: translate(30cqw, 55.5cqh); }
85.2% { transform: translate(62cqw, 46cqh); }
87.3% { transform: translate(62cqw, 48cqh); }
88% { transform: translate(62cqw, 46cqh); }
90.8% { transform: translate(66cqw, 55cqh); }
92.9% { transform: translate(66cqw, 57cqh); }
93.6% { transform: translate(66cqw, 55cqh); opacity: 1; }
100% { transform: translate(66cqw, 62cqh); opacity: 0; }
}
/* copied on the click, pasted on the second one */
.tr1 { --delay: 1350ms; }
.tr2 { --delay: 3750ms; }
.tr3 { --delay: 6150ms; }
.tr4 { --delay: 8550ms; }
.v1 { --delay: 2580ms; }
.v2 { --delay: 4980ms; }
.v3 { --delay: 7380ms; }
.v4 { --delay: 9780ms; }
/* ── the prompt is assembled in a message box ── */
/* ── what the paths are being carried into ── */
.chatpane { flex: 1; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0.5rem; }
.chatpane .gap { flex: none; height: 3%; }
.composer {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--bg);
overflow: hidden;
}
.cwrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* The message fits its box now that each trip carries one path, so it does not
scroll: everything the person has assembled by hand stays on screen. */
.cbody {
padding: 0.4rem 0.5rem;
line-height: 1.55;
}
/* A sentence is typed, a path is pasted, and they get a line each so the thing
that lands is exactly the thing that was copied. */
.cline { margin: 0 0 3px; min-height: 1.1em; }
.typed {
display: inline-block;
width: 0;
overflow: hidden;
white-space: nowrap;
vertical-align: bottom;
color: var(--ink);
}
.is-in .typed { animation: type var(--dur) steps(var(--ch)) var(--at) both; }
@keyframes type { from { width: 0; } to { width: var(--w); } }
/* the caret is only alive while its own line is being typed */
.tcaret {
display: inline-block;
width: 1px;
height: 0.95em;
margin-left: 1px;
background: var(--ink);
vertical-align: -1px;
visibility: hidden;
}
.is-in .tcaret {
animation:
caretlive var(--life) steps(1) var(--at) forwards,
blinkc 900ms steps(2, start) var(--at) infinite;
}
@keyframes caretlive { 0%, 99.9% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes blinkc { 50% { opacity: 0; } }
.t1 { --w: 28ch; --ch: 28; --dur: 980ms; --at: 200ms; }
.t2 { --w: 20ch; --ch: 20; --dur: 700ms; --at: 2700ms; }
.t3 { --w: 17ch; --ch: 17; --dur: 595ms; --at: 5100ms; }
.t4 { --w: 22ch; --ch: 22; --dur: 770ms; --at: 7500ms; }
.k1 { --life: 1330ms; --at: 200ms; }
.k2 { --life: 1050ms; --at: 2700ms; }
.k3 { --life: 1050ms; --at: 5100ms; }
.k4 { --life: 3000ms; --at: 7500ms; }
/* a menu item lights when the pointer reaches it, not when the menu opens */
.menu .hot { background: transparent; color: var(--muted); }
.is-in .menu--tree .hot { animation: treehot 9800ms linear 600ms 1 both; }
@keyframes treehot {
0%, 5.5% { background: transparent; color: var(--muted); }
5.6%, 8.4% { background: var(--primary); color: var(--on-primary); }
8.5%, 30% { background: transparent; color: var(--muted); }
30.1%, 32.9% { background: var(--primary); color: var(--on-primary); }
33%, 54.5% { background: transparent; color: var(--muted); }
54.6%, 57.3% { background: var(--primary); color: var(--on-primary); }
57.4%, 100% { background: transparent; color: var(--muted); }
}
.is-in .menu--env .hot { animation: envhot 9800ms linear 600ms 1 both; }
@keyframes envhot {
0%, 79% { background: transparent; color: var(--muted); }
79.1%, 81.8% { background: var(--primary); color: var(--on-primary); }
81.9%, 100% { background: transparent; color: var(--muted); }
}
.is-in .menu--paste .hot { animation: pastehot 9800ms linear 600ms 1 both; }
@keyframes pastehot {
0%, 17.2% { background: transparent; color: var(--muted); }
17.3%, 20.1% { background: var(--primary); color: var(--on-primary); }
20.2%, 41.7% { background: transparent; color: var(--muted); }
41.8%, 44.6% { background: var(--primary); color: var(--on-primary); }
44.7%, 66.2% { background: transparent; color: var(--muted); }
66.3%, 69.1% { background: var(--primary); color: var(--on-primary); }
69.2%, 90.7% { background: transparent; color: var(--muted); }
90.8%, 93.6% { background: var(--primary); color: var(--on-primary); }
93.7%, 100% { background: transparent; color: var(--muted); }
}
.cfoot {
flex: none;
min-height: 1.9rem;
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.45rem;
border-top: 1px solid var(--border);
color: var(--faint);
}
.csend {
margin-left: auto;
padding: 0.2rem 0.6rem 0.24rem;
border-radius: 5px;
background: var(--primary);
color: var(--on-primary);
font-weight: 600;
}
.cnote { position: relative; min-width: 7em; white-space: nowrap; }
.cnote .n2 {
position: absolute;
inset: 0;
opacity: 0;
color: var(--kind-credential);
transition: opacity 240ms var(--ease-out) 3800ms;
}
.cnote .n1 { transition: opacity 240ms var(--ease-out) 3800ms; }
.is-in .cnote .n2 { opacity: 1; }
.is-in .cnote .n1 { opacity: 0; }
.pasted {
display: inline-flex;
vertical-align: middle;
max-width: 100%;
margin: 0;
align-items: center;
gap: 0.3rem;
min-width: 0;
padding: 0.2rem 0.35rem 0.24rem;
border: 1px dashed var(--border-strong);
border-radius: 3px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
}
/* the text is its own item: ellipsis does not apply to a flex container */
.pasted > .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.is-in .pasted { animation: pasteIn 800ms var(--ease-out) var(--delay, 0ms) both; }
@keyframes pasteIn {
0% { opacity: 0; background: color-mix(in srgb, var(--flash, var(--kind-skill)) 32%, transparent); }
10% { opacity: 1; background: color-mix(in srgb, var(--flash, var(--kind-skill)) 32%, transparent); }
100% { opacity: 1; background: transparent; }
}
.pasted--secret {
--flash: var(--kind-credential);
border-color: var(--kind-credential);
color: var(--kind-credential);
}
.paste {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.5rem;
border: 1px dashed var(--border-strong);
border-radius: 4px;
color: var(--muted);
--delay: 3200ms;
}
.blink {
display: inline-block;
width: 6px;
height: 11px;
vertical-align: -1px;
background: var(--ink);
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
/* ── the same four things, attached ──
* The panel's own two controls: Attach for the work, Tools for the workflow,
* the skills and the keys. Four picks, one popover each time, and every row
* arrives wearing the name of what it is.
* 11200 ── 14600, after the ten seconds of copying and pasting beside it. */
/* the rows, and the empty ones waiting */
.slots { display: grid; gap: 6px; padding: 0.6rem 0.6rem 0; }
.slot-row {
position: relative;
height: 2.05rem;
border: 1px dashed var(--border);
border-radius: var(--r-sm);
}
.slot-row .tile { position: absolute; inset: -1px; width: auto; min-width: 0; }
.abar {
position: absolute;
left: 0.6rem;
right: 0.6rem;
bottom: 3.1rem;
display: flex;
gap: 5px;
}
/* the composer's own two controls, the icons the product uses */
.abtn {
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface);
color: var(--ink);
}
.abtn svg { width: 0.95rem; height: 0.95rem; }
.side--after .abtn { background: var(--bg); }
.is-in .abtn { animation: click 260ms var(--ease-out) var(--press) 1; }
.a1 { --press: 11500ms; }
.a2 { --press: 12500ms; }
.pop {
position: absolute;
left: calc(var(--x) * 1%);
bottom: calc(var(--b) * 1%);
min-width: 11em;
padding: 3px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--bg);
box-shadow: var(--lift-shadow);
opacity: 0;
z-index: 3;
}
.pop > b {
display: block;
padding: 3px 7px 4px;
color: var(--faint);
font-weight: 600;
}
.pop > span {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 3px 7px 4px;
border-radius: 3px;
color: var(--muted);
white-space: nowrap;
}
.pop > span::before {
content: '';
flex: none;
width: 0.45em;
height: 0.45em;
border-radius: 2px;
background: var(--kind, var(--border-strong));
}
.pop > span em { margin-left: auto; font-style: normal; }
/* an item is picked when the cursor gets to it, not when the list opens */
.pop > span em { color: inherit; opacity: 0.62; }
.is-in .pick { animation: picked 700ms var(--ease-out) var(--at) 1 both; }
@keyframes picked {
0% { background: transparent; color: var(--muted); }
12% { background: var(--primary); color: var(--on-primary); }
100% { background: var(--primary); color: var(--on-primary); }
}
.p-work { --at: 12000ms; }
.p-flow { --at: 13000ms; }
.p-skill { --at: 13400ms; }
.p-cred { --at: 13800ms; }
.pop--attach { --x: 4; --b: 26; }
.is-in .pop--attach { animation: popattach 3400ms linear 11200ms 1 both; }
@keyframes popattach {
0%, 8.8% { opacity: 0; }
8.9%, 25% { opacity: 1; }
25.1%, 100% { opacity: 0; }
}
.pop--tools { --x: 26; --b: 26; }
.is-in .pop--tools { animation: poptools 3400ms linear 11200ms 1 both; }
@keyframes poptools {
0%, 38.2% { opacity: 0; }
38.3%, 82.4% { opacity: 1; }
82.5%, 100% { opacity: 0; }
}
/* every row says what kind of thing it is, the way the product does */
.slots .tile em { margin-left: auto; font-style: normal; color: var(--faint); font-weight: 400; }
.r1 { --delay: 12000ms; }
.r2 { --delay: 13000ms; }
.r3 { --delay: 13400ms; }
.r4 { --delay: 13800ms; }
.masked { letter-spacing: 0.14em; color: var(--faint); }
.lock {
flex: none;
width: 0.62em;
height: 0.5em;
margin-left: auto;
border: 1px solid var(--faint);
border-radius: 1px;
position: relative;
}
.lock::before {
content: '';
position: absolute;
left: 22%;
right: 22%;
bottom: 100%;
height: 0.28em;
border: 1px solid var(--faint);
border-bottom: none;
border-radius: 2px 2px 0 0;
}
.send {
position: absolute;
left: 0.6rem;
right: 0.6rem;
bottom: 0.6rem;
display: grid;
place-items: center;
height: 1.9rem;
border-radius: var(--r-md);
border: 1px dashed var(--border-strong);
color: var(--faint);
font-weight: 600;
transition:
background 300ms var(--ease-out) 14300ms,
color 300ms var(--ease-out) 14300ms,
border-color 300ms var(--ease-out) 14300ms;
}
.is-in .send {
background: var(--agent-send);
border-color: transparent;
color: var(--on-agent-send);
}
/* the pointer that does the clicking */
.cursor {
position: absolute;
left: 0;
top: 0;
z-index: 4;
width: 11px;
opacity: 0;
color: var(--ink);
filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.35));
}
.is-in .cursor--attach { animation: point 3400ms linear 11200ms 1 both; }
/* Measured: the clip at 4.5/79.2, the wrench at 10.6/79.2, the attach list's row at
24.2/52.7, the tools list's three at 43.7/44.8, 52.7 and 60.7. The stops are
the press times as fractions of this animation's window, 11200 to 14600, so
every dip is the click that opens a popover or takes a row out of it. */
@keyframes point {
0% { transform: translate(4.5cqw, 86cqh); opacity: 0; }
4.4% { transform: translate(4.5cqw, 79.2cqh); opacity: 1; }
8.8% { transform: translate(4.5cqw, 81.7cqh); }
11.2% { transform: translate(4.5cqw, 79.2cqh); }
19.1% { transform: translate(24.2cqw, 52.7cqh); }
23.5% { transform: translate(24.2cqw, 55.2cqh); }
25.9% { transform: translate(24.2cqw, 52.7cqh); }
33.8% { transform: translate(10.6cqw, 79.2cqh); }
38.2% { transform: translate(10.6cqw, 81.7cqh); }
40.6% { transform: translate(10.6cqw, 79.2cqh); }
48.5% { transform: translate(43.7cqw, 44.8cqh); }
52.9% { transform: translate(43.7cqw, 47.3cqh); }
55.3% { transform: translate(43.7cqw, 44.8cqh); }
60.3% { transform: translate(43.7cqw, 52.7cqh); }
64.7% { transform: translate(43.7cqw, 55.2cqh); }
67.1% { transform: translate(43.7cqw, 52.7cqh); }
72.1% { transform: translate(43.7cqw, 60.7cqh); }
76.5% { transform: translate(43.7cqw, 63.2cqh); }
78.8% { transform: translate(43.7cqw, 60.7cqh); }
86.8% { transform: translate(62cqw, 82cqh); opacity: 1; }
100% { transform: translate(62cqw, 88cqh); opacity: 0; }
}
/* One column, and the box keeps the height it has everywhere else: the type
inside it is already at full size by this width, so taking height away is
what pushes a composer's last line out of view. */
@media (max-width: 860px) {
.swap-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.cbody, .typed, .tcaret, .cursor, .abtn, .pop, .pick, .send, .pasted, .trow--copied, .menu,
.treelist, .tthumb, .cnote .n1, .cnote .n2 { transition: none; animation: none; }
.menu, .pop { display: none; }
.pasted { opacity: 1; }
.typed { width: var(--w); }
.tcaret { display: none; }
.cursor { display: none; }
.send { background: var(--agent-send); border-color: transparent; color: var(--on-agent-send); }
}
/* ═══ before and after: where the work lives ═══
* 0 ──────────────── 2500 one work item, in pieces, across three tools
* 2900 ───────────── 5800 the same pieces, in one object, versioned, live */
/* a reach that stops short of what it is reaching for */
.stub {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
width: 1px;
height: calc(var(--h) * 1%);
border-left: 1px dashed var(--border-strong);
opacity: 0;
transform-origin: bottom center;
transition:
opacity 300ms var(--ease-out) var(--delay, 0ms),
transform 420ms var(--ease-out) var(--delay, 0ms);
transform: scaleY(0.3);
}
.is-in .stub { opacity: 0.6; transform: none; }
/* nobody out here has it */
.who--out { filter: grayscale(1); opacity: 0.4; }
/* a version that belongs to the artifact, not to a commit */
.ver {
position: relative;
margin-left: auto;
min-width: 1.6em;
text-align: right;
color: var(--faint);
font-weight: 400;
}
.ver b { font-weight: 400; }
.ver .v-new {
position: absolute;
inset: 0;
opacity: 0;
color: var(--agent-send);
transition: opacity 260ms var(--ease-out) 4700ms;
}
.ver .v-old { transition: opacity 260ms var(--ease-out) 4700ms; }
.is-in .ver .v-new { opacity: 1; }
.is-in .ver .v-old { opacity: 0; }
/* the row that just changed, changing for everyone at once */
.is-in .live-row { animation: freshen 1400ms var(--ease-out) 4700ms 1; }
@keyframes freshen {
30% { border-color: var(--agent-send); background: color-mix(in srgb, var(--agent-send) 8%, transparent); }
}
.pulse {
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: var(--agent-send);
}
.is-in .pulse { animation: ping 1800ms var(--ease-out) 5400ms 2; }
@keyframes ping {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--agent-send) 55%, transparent); }
70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--agent-send) 0%, transparent); }
}
/* ── before: geometry ── */
/* whatever a team happens to use: three of them, none of them talking */
.holder {
display: flex;
flex-direction: column;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--bg);
overflow: hidden;
}
.htitle {
flex: none;
padding: 0.28rem 0.3rem 0.32rem;
border-bottom: 1px solid var(--border);
color: var(--faint);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* one piece of one work item, sitting wherever it landed */
.frag {
position: absolute;
left: 50%;
top: 64%;
opacity: 0;
transform: translate(-50%, calc(-50% - 8px));
transition:
opacity 360ms var(--ease-out) var(--delay, 0ms),
transform 480ms var(--ease-back) var(--delay, 0ms);
}
.is-in .frag { opacity: 1; transform: translate(-50%, -50%); }
/* the one in the conversation does not stay there */
.is-in .frag--gone { animation: gone 1100ms var(--ease-out) 1600ms both; }
@keyframes gone {
0% { opacity: 1; transform: translate(-50%, -50%); }
100% { opacity: 0; transform: translate(-50%, -320%); }
}
.ghost {
position: absolute;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
color: var(--faint);
letter-spacing: 0.24em;
}
.b2-h1 { --x: 4; --y: 6; --w: 28; --h: 36; --delay: 120ms; }
.b2-h2 { --x: 36; --y: 6; --w: 28; --h: 36; --delay: 220ms; }
.b2-h3 { --x: 68; --y: 6; --w: 28; --h: 36; --delay: 320ms; }
.b2-g1 { --delay: 700ms; }
.b2-g2 { --delay: 850ms; }
.b2-g3 { --delay: 1000ms; }
.b2-dots { --delay: 2000ms; }
.b2-s1 { --x: 18; --y: 58; --h: 20; --delay: 2000ms; }
.b2-s2 { --x: 50; --y: 58; --h: 20; --delay: 2100ms; }
.b2-s3 { --x: 82; --y: 58; --h: 20; --delay: 2200ms; }
.b2-f1 { --x: 18; --y: 84; --fy: 4; --delay: 2050ms; }
.b2-f2 { --x: 50; --y: 84; --fy: 4; --delay: 2150ms; }
.b2-f3 { --x: 82; --y: 84; --fy: 4; --delay: 2250ms; }
/* a conversation, which is a place things scroll out of */
.chat-wrap {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
}
.chat {
position: absolute;
inset: auto 0 0 0;
display: flex;
flex-direction: column;
gap: 4px;
padding: 5px 7px 7px;
transition: transform 1100ms var(--ease-out) 1600ms;
}
.is-in .chat { transform: translateY(-40px); }
.bub {
height: 9px;
border-radius: 5px;
border: 1px solid var(--border);
background: var(--surface-2);
}
.bub--them { width: 64%; }
.bub--me { width: 46%; align-self: flex-end; background: var(--border); }
.bub--marked {
width: 82%;
height: auto;
padding: 2px 5px 3px;
color: var(--ink);
background: var(--bg);
border-color: var(--border-strong);
border-left: 3px solid var(--kind-sprint);
border-radius: 3px 5px 5px 3px;
}
/* the work item's own fields, which is why it does not need a board */
.pill {
padding: 0.18rem 0.42rem 0.22rem;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--muted);
white-space: nowrap;
}
.pill--live { border-color: var(--agent-send); color: var(--agent-send); }
.a2-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.side--after .a2-card { background: var(--bg); }
.item-head {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
padding: 0.42rem 0.6rem 0.46rem;
border-bottom: 1px solid var(--border);
}
.item-head b { flex: none; margin-right: 0.15rem; }
.item-body { display: grid; gap: 5px; padding: 0.5rem 0.6rem; }
.item-body .slot-row { height: 1.72rem; }
/* ── after: geometry ── */
.a2-card { --x: 4; --y: 3; --w: 92; --h: 66; --delay: 200ms; }
.a2-p1 { --delay: 3100ms; }
.a2-p2 { --delay: 3180ms; }
.a2-p3 { --delay: 3260ms; }
.a2-r1 { --delay: 3450ms; }
.a2-r2 { --delay: 3600ms; }
.a2-r3 { --delay: 3750ms; }
.a2-r4 { --delay: 3900ms; }
.a2-bus { --x: 12; --y: 77; --w: 76; --delay: 5000ms; --line: var(--border-strong); }
.a2-d1 { --x: 24; --y: 77; --h: 6; --delay: 5060ms; --line: var(--border-strong); }
.a2-d2 { --x: 50; --y: 77; --h: 6; --delay: 5120ms; --line: var(--border-strong); }
.a2-d3 { --x: 76; --y: 77; --h: 6; --delay: 5180ms; --line: var(--border-strong); }
.a2-stem { --x: 50; --y: 69; --h: 8; --delay: 4960ms; --line: var(--border-strong); }
.a2-f1 { --x: 24; --y: 92; --fy: 4; --delay: 5150ms; }
.a2-f2 { --x: 50; --y: 92; --fy: 4; --delay: 5250ms; }
.a2-f3 { --x: 76; --y: 92; --fy: 4; --delay: 5350ms; }
/* A narrow screen has less height for the same card, so the head loses a pill
and everything under the card moves down. These must sit AFTER the geometry
they override: the two carry the same specificity, and order settles it. */
@media (max-width: 860px) {
.a2-p3 { display: none; }
.item-body { padding: 0.42rem 0.5rem; }
.a2-card { --h: 74; }
.a2-stem { --y: 77; --h: 5; }
.a2-bus, .a2-d1, .a2-d2, .a2-d3 { --y: 82; }
.a2-d1, .a2-d2, .a2-d3 { --h: 5; }
.a2-f1, .a2-f2, .a2-f3 { --y: 93; }
}
@media (prefers-reduced-motion: reduce) {
.stub, .frag, .ghost, .chat, .ver .v-old, .ver .v-new, .live-row, .pulse { transition: none; animation: none; }
.chat { transform: translateY(-40px); }
.stub { opacity: 0.6; transform: none; }
.frag { opacity: 1; transform: translate(-50%, -50%); }
}
/* ═══ before and after: where you work ═══
* The before panel does not settle, because the pile does not. It cycles three
* versions of the same evening on a 12s loop, four windows at a time:
* 0s ── four editors, one project each
* 4s ── four terminals, tabbed
* 8s ── four agent chats
* Each act builds, holds, and clears, and the badge asking for a decision ends
* up buried in every one of them.
*
* The after panel plays once: 2800 ── 5600, one list filtered down to what is
* actually waiting on a person. */
.act { position: absolute; inset: 0; }
/* a window in the pile */
.win {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
width: 62%;
height: 50%;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--bg);
box-shadow: var(--lift-shadow);
overflow: hidden;
opacity: 0;
}
.is-in .win { animation: land 12s var(--ease-out) var(--in) infinite; }
@keyframes land {
0% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg)) translateY(16px) scale(0.94); }
4% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg)); }
26% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg)); }
30% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg)) scale(0.98); }
100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg)) scale(0.98); }
}
.win .strip {
display: flex;
align-items: center;
gap: 3px;
min-height: 1.15rem;
padding: 0.2rem 0.4rem;
border-bottom: 1px solid var(--border);
background: var(--surface);
color: var(--faint);
overflow: hidden;
}
.win .strip i { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }
.win .body { padding: 0.4rem 0.45rem; display: grid; gap: 5px; }
.win .ln { height: 4px; border-radius: 2px; background: var(--border); }
.win .name { margin-left: auto; color: var(--faint); }
/* a tab, of which there are always too many */
.tab {
flex: none;
max-width: 6.4em;
padding: 0.1rem 0.34rem 0.14rem;
border: 1px solid var(--border);
border-radius: 3px;
color: var(--faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tab--on { background: var(--bg); color: var(--ink); border-color: var(--border-strong); }
/* an editor: a project's files, in a gutter */
.win--ide .body { padding-left: 1.2rem; position: relative; }
.win--ide .body::before {
content: '';
position: absolute;
left: 0.6rem;
top: 0.3rem;
bottom: 0.3rem;
border-left: 1px solid var(--border);
}
/* a terminal: a dark bar and a prompt */
.win--term { background: oklch(0.16 0 0); border-color: oklch(0.32 0 0); }
.win--term .strip { background: oklch(0.22 0 0); border-bottom-color: oklch(0.3 0 0); }
.win--term .tab { border-color: oklch(0.32 0 0); color: oklch(0.62 0 0); }
.win--term .tab--on { background: oklch(0.16 0 0); color: oklch(0.9 0 0); border-color: oklch(0.42 0 0); }
.win--term .ln { background: oklch(0.32 0 0); }
.win--term .prompt { color: oklch(0.78 0 0); }
/* a chat: bubbles, going nowhere in particular */
.win--chat .body { gap: 4px; }
.win--chat .bub--me { background: var(--primary); border-color: transparent; }
/* something back there is waiting on you, and you cannot see which */
.flag {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
background: var(--kind-sprint);
color: oklch(0.18 0 0);
font-weight: 700;
opacity: 0;
}
.is-in .flag { animation: flagged 12s linear var(--in) infinite; }
@keyframes flagged {
0%, 3% { opacity: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--kind-sprint) 60%, transparent); }
7% { opacity: 1; }
12% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--kind-sprint) 0%, transparent); }
26% { opacity: 1; }
30%, 100% { opacity: 0; }
}
/* ── the panel, drawn the way the panel is drawn ──
* The search field and the filter chevron share one control-shaped box, the
* filters open underneath it as chips and a switch, and the runs are cards with
* a heading and a context line. All of it from web/src/panel3/panel3.css.
* 3900 ── 6000: the chevron is opened and Blocked is turned on. */
.searchrow {
flex: none;
display: flex;
align-items: center;
margin: 0.5rem 0.6rem;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--bg);
}
.side--after .searchrow { background: var(--surface); }
.sfield {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.5rem 0.34rem;
color: var(--faint);
}
.sfield::before {
content: '';
flex: none;
width: 0.6em;
height: 0.6em;
border: 1.5px solid currentColor;
border-radius: 50%;
}
.ftoggle {
flex: none;
display: inline-flex;
align-items: center;
gap: 3px;
align-self: stretch;
padding: 0 8px;
border-left: 1px solid var(--border);
color: var(--muted);
}
.ftoggle .chev {
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
}
.is-in .ftoggle { animation: click 260ms var(--ease-out) 4300ms 1; }
/* the filters, which are not there until the chevron is pressed */
.fpanel {
flex: none;
height: 0;
margin: 0 0.6rem;
padding: 0 0.42rem;
border: 1px solid transparent;
border-radius: 7px;
background: var(--surface);
overflow: hidden;
opacity: 0;
}
.side--after .fpanel { background: var(--bg); }
.is-in .fpanel { animation: openfilters 260ms var(--ease-out) 4380ms both; }
@keyframes openfilters {
from { height: 0; padding-block: 0; opacity: 0; border-color: transparent; }
to { height: 4.5rem; padding-block: 0.42rem; opacity: 1; border-color: var(--border); }
}
.fchips { display: flex; flex-wrap: wrap; gap: 5px; }
.fchip {
min-width: 4.5rem;
padding: 0.2rem 0.62rem 0.24rem;
text-align: center;
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--surface);
color: var(--muted);
}
.side--after .fchip { background: var(--bg); }
.is-in .fchip--pick { animation: chipon 300ms var(--ease-out) 5100ms both; }
@keyframes chipon {
0% { background: var(--bg); border-color: var(--border-strong); color: var(--muted); }
30% { transform: scale(0.95); }
100% { background: var(--primary); border-color: var(--primary); color: var(--on-primary); transform: none; }
}
.fswitch {
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.42rem;
padding-top: 0.42rem;
border-top: 1px solid var(--border);
color: var(--muted);
}
.fswitch .track {
flex: none;
position: relative;
width: 22px;
height: 13px;
border-radius: 999px;
background: var(--border-strong);
}
.fswitch .track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--surface);
}
/* a run, drawn as the panel's card */
/* the list owns its own clip, so a fifth card below the fold is cut by the
list rather than by the panel */
.runs {
flex: 1;
min-height: 0;
overflow: hidden;
display: grid;
align-content: start;
gap: 5px;
padding: 0.5rem 0.6rem;
}
.rcard {
min-width: 0;
padding: 0.4rem 0.5rem 0.44rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface-2);
}
.side--after .rcard { background: var(--surface); }
.rcard b {
display: block;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rcard small {
display: flex;
gap: 0.35rem;
margin-top: 1px;
color: var(--muted);
font-size: 0.92em;
}
.rcard small span + span::before { content: '\00b7'; margin-right: 0.35rem; color: var(--border-strong); }
.rcard--blocked small span:last-child { color: var(--kind-sprint); }
.is-in .run--drop { animation: dropout 420ms var(--ease-out) 5280ms forwards; }
@keyframes dropout { to { opacity: 0; transform: scale(0.97); } }
.is-in .run--keep { animation: keep 520ms var(--ease-out) 5320ms forwards; }
@keyframes keep { from { transform: none; } to { transform: translateY(var(--up)); } }
/* the count in the title bar, one value crossfading into the other */
.count {
position: relative;
margin-left: auto;
min-width: 6.4em;
text-align: right;
white-space: nowrap;
color: var(--faint);
}
.count .c-new {
position: absolute;
inset: 0;
text-align: right;
opacity: 0;
color: var(--kind-sprint);
transition: opacity 240ms var(--ease-out) 5650ms;
}
.count .c-old { transition: opacity 240ms var(--ease-out) 5650ms; }
.is-in .count .c-new { opacity: 1; }
.is-in .count .c-old { opacity: 0; }
.f3-r1 { --delay: 300ms; }
.f3-r2 { --delay: 380ms; --up: -54px; }
.f3-r3 { --delay: 460ms; }
.f3-r4 { --delay: 540ms; }
.f3-r5 { --delay: 620ms; --up: -162px; }
/* ── before: geometry ── */
.p-a { --x: 32; --y: 30; --r: -6; }
.p-b { --x: 63; --y: 28; --r: 4; }
.p-c { --x: 34; --y: 60; --r: 5; }
.p-d { --x: 66; --y: 62; --r: -4; }
.p-flag { --x: 6; --y: 29; }
/* A narrow window has room for two tabs, not three, and the flag needs a corner
of its own rather than a line of someone's output to sit on. */
@media (max-width: 860px) {
.win--ide .strip .tab:nth-of-type(2) { display: none; }
.win--term .strip .tab:nth-of-type(3) { display: none; }
.p-flag { --x: 9; --y: 92; }
}
.act--1 .win, .act--1 .flag { --in: 0ms; }
.act--2 .win, .act--2 .flag { --in: 4000ms; }
.act--3 .win, .act--3 .flag { --in: 8000ms; }
.act .p-b { --in: calc(var(--act, 0ms) + 180ms); }
.act--1 .p-a { --in: 0ms; }
.act--1 .p-b { --in: 180ms; }
.act--1 .p-c { --in: 360ms; }
.act--1 .p-d { --in: 540ms; }
.act--1 .p-flag { --in: 700ms; }
.act--2 .p-a { --in: 4000ms; }
.act--2 .p-b { --in: 4180ms; }
.act--2 .p-c { --in: 4360ms; }
.act--2 .p-d { --in: 4540ms; }
.act--2 .p-flag { --in: 4700ms; }
.act--3 .p-a { --in: 8000ms; }
.act--3 .p-b { --in: 8180ms; }
.act--3 .p-c { --in: 8360ms; }
.act--3 .p-d { --in: 8540ms; }
.act--3 .p-flag { --in: 8700ms; }
/* ── after: geometry ── */
/* Measured: the chevron at 91.1/18.9, the Blocked chip at 32.8/33 once the
filters are open. The stops are the two press times as fractions of this
animation's window, 3900 to 5700, so each dip is the click it belongs to. */
/* Both stops are where the thing being pressed actually is, in the units that
put it there: the chevron is inset from the right edge of the search row, and
the third filter chip is three fixed-width chips along from the panel's left.
Neither is a share of the box, so neither is written as one. */
.cursor--filter { --chev: calc(100% - 1.5rem); --chip: 12.65rem; }
.is-in .cursor--filter { animation: pointfilter 1800ms linear 3900ms 1 both; }
@keyframes pointfilter {
0% { left: var(--chev); top: 26cqh; opacity: 0; }
11% { left: var(--chev); top: 18.9cqh; opacity: 1; }
22.2% { left: var(--chev); top: 21.4cqh; }
27% { left: var(--chev); top: 18.9cqh; }
55% { left: var(--chip); top: 33cqh; }
66.7% { left: var(--chip); top: 35.5cqh; }
71% { left: var(--chip); top: 33cqh; }
90% { left: var(--chip); top: 33cqh; opacity: 1; }
100% { left: var(--chip); top: 40cqh; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.win, .flag, .fchip, .fpanel, .ftoggle, .rcard, .count .c-old, .count .c-new,
.chatlist, .art--new, .cursor--filter, .sheet, .pchip, .psend { transition: none; animation: none; }
.sheet { display: none; }
.pchip { opacity: 1; transform: none; }
.art--new { opacity: 1; transform: none; }
.fpanel { height: 4.5rem; padding-block: 0.42rem; opacity: 1; border-color: var(--border); }
.win { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg)); }
.flag { opacity: 1; }
.act--2, .act--3 { display: none; }
.cursor--filter { display: none; }
}
/* ═══ before and after: what the panel shows ═══
* The before does not settle: conversations arrive at the top on an 11s loop
* and the older ones leave at the bottom, taking whatever was decided in them.
* The after plays once, 300 ── 4200, and nothing leaves. */
/* new threads arrive at the top and old ones leave at the bottom, so both
edges fade rather than cutting */
.chatwrap {
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 76%, transparent);
mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 76%, transparent);
}
.chatlist { display: grid; align-content: start; gap: 5px; padding: 0.5rem 0.6rem; }
.is-in .chatlist { animation: reel2 11000ms linear infinite; }
@keyframes reel2 {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
.crow {
display: grid;
grid-template-columns: 1fr auto;
gap: 0 0.4rem;
padding: 0.36rem 0.5rem 0.4rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-2);
}
.crow b {
min-width: 0;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crow em {
grid-row: 1;
grid-column: 2;
font-style: normal;
color: var(--faint);
}
.crow small {
grid-column: 1 / -1;
min-width: 0;
margin-top: 1px;
color: var(--muted);
font-size: 0.92em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* the thing you will want later, mentioned in passing and owned by nothing */
.crow small u { text-decoration: none; color: var(--kind-sprint); }
/* ── after: the work, with its things on it ── */
.arts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.art {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.16rem 0.42rem 0.2rem;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--bg);
color: var(--muted);
}
.side--after .art { background: var(--surface-2); }
.art::before {
content: '';
flex: none;
width: 0.42em;
height: 0.42em;
border-radius: 2px;
background: var(--kind, var(--border-strong));
}
.art i { font-style: normal; color: var(--faint); }
/* one lands while you watch, onto the work rather than into a thread */
.art--new { opacity: 0; transform: translateY(-6px); }
.is-in .art--new {
animation: landart 520ms var(--ease-back) 3100ms both,
freshen 1600ms var(--ease-out) 3300ms 1;
}
@keyframes landart { to { opacity: 1; transform: none; } }
.w5-c1 { --delay: 300ms; }
.w5-c2 { --delay: 460ms; }
.w5-c3 { --delay: 620ms; }
/* ═══ before and after: away from your desk ═══
* Both panels are the same phone, and the panels are taller than the rest so a
* phone's worth of interface actually fits.
* before 300 ── 5200 the agent asks what it needs and the sheet has none of it
* after 5800 ── 9400 the same two drawers as at a desk, on a phone */
.stage-box--tall { height: 470px; }
.phone {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 216px;
height: 96%;
display: flex;
flex-direction: column;
border: 2px solid var(--border-strong);
border-radius: 22px;
background: var(--bg);
box-shadow: var(--lift-shadow);
overflow: hidden;
}
.side--after .phone { background: var(--surface); }
.phone .notch {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 4px;
border-radius: 2px;
background: var(--border-strong);
z-index: 4;
}
.pbar {
flex: none;
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.9rem 0.55rem 0.4rem;
border-bottom: 1px solid var(--border);
color: var(--muted);
font-weight: 600;
}
.pbody {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 6px;
padding: 0.5rem 0.45rem;
}
.pmsg {
max-width: 86%;
padding: 0.32rem 0.45rem 0.36rem;
line-height: 1.4;
}
.pmsg--me {
align-self: flex-end;
border-radius: 9px 9px 3px 9px;
background: var(--primary);
color: var(--on-primary);
}
.pmsg--them {
align-self: flex-start;
border-radius: 9px 9px 9px 3px;
background: var(--surface-2);
color: var(--ink);
}
.side--after .pmsg--them { background: var(--bg); }
.pmsg span { display: block; }
.pmsg span + span { margin-top: 2px; }
/* the composer at the bottom of a phone */
.pcomp {
flex: none;
display: flex;
align-items: center;
gap: 0.32rem;
margin: 0.45rem;
padding: 0.3rem 0.34rem 0.34rem;
border: 1px solid var(--border-strong);
border-radius: 8px;
min-height: 2rem;
}
.pclip {
flex: none;
display: grid;
place-items: center;
width: 1.2rem;
height: 1.2rem;
border-radius: 5px;
color: var(--muted);
}
.pclip svg { width: 0.85rem; height: 0.85rem; }
.pcomp .ptext { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.psend {
flex: none;
display: grid;
place-items: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 5px;
background: var(--border-strong);
color: var(--bg);
font-weight: 700;
}
/* the attachments already on the message, above the composer */
.pstack { flex: none; display: grid; gap: 4px; margin: 0 0.45rem; }
.pchip {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.24rem 0.42rem 0.28rem;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--bg);
color: var(--ink);
opacity: 0;
transform: translateY(-5px);
}
.side--after .pchip { background: var(--surface-2); }
.pchip::before {
content: '';
flex: none;
width: 0.45em;
height: 0.45em;
border-radius: 2px;
background: var(--kind, var(--border-strong));
}
.pchip em { margin-left: auto; font-style: normal; color: var(--faint); }
.is-in .pchip { animation: landart 460ms var(--ease-back) var(--at) both; }
/* the drawer a phone can open */
.sheet {
position: absolute;
left: 8px;
right: 8px;
bottom: 3.1rem;
padding: 4px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--bg);
box-shadow: var(--lift-shadow);
opacity: 0;
z-index: 3;
}
.side--after .sheet { background: var(--surface); }
.sheet > b {
display: block;
padding: 3px 7px 4px;
color: var(--faint);
font-weight: 600;
}
.sheet > span {
display: flex;
align-items: center;
gap: 0.38rem;
padding: 4px 7px 5px;
border-radius: 4px;
color: var(--muted);
white-space: nowrap;
}
.sheet > span::before {
content: '';
flex: none;
width: 0.45em;
height: 0.45em;
border-radius: 2px;
background: var(--kind, var(--border-strong));
}
.sheet > span em { margin-left: auto; font-style: normal; color: var(--faint); }
.sheet .off { opacity: 0.42; }
.is-in .sheet--chat { animation: sheetchat 5200ms linear 300ms 1 both; }
@keyframes sheetchat {
0%, 63.4% { opacity: 0; }
63.5%, 92% { opacity: 1; }
92.1%, 100% { opacity: 0; }
}
.is-in .sheet--work { animation: sheetwork 3600ms linear 5800ms 1 both; }
@keyframes sheetwork {
0%, 5.5% { opacity: 0; }
5.6%, 25% { opacity: 1; }
25.1%, 100% { opacity: 0; }
}
.is-in .sheet--tools { animation: sheettools 3600ms linear 5800ms 1 both; }
@keyframes sheettools {
0%, 36% { opacity: 0; }
36.1%, 86% { opacity: 1; }
86.1%, 100% { opacity: 0; }
}
.is-in .pk1 { animation: picked 700ms var(--ease-out) 6500ms 1 both; }
.is-in .pk2 { animation: picked 700ms var(--ease-out) 7600ms 1 both; }
.is-in .pk3 { animation: picked 700ms var(--ease-out) 8000ms 1 both; }
.is-in .pk4 { animation: picked 700ms var(--ease-out) 8400ms 1 both; }
.is-in .side--after .psend { animation: sendon 300ms var(--ease-out) 8900ms both; }
@keyframes sendon { to { background: var(--agent-send); color: var(--on-agent-send); } }
/* what the person managed to say, and what happened to it */
.t6 { --w: 29ch; --ch: 29; --dur: 1160ms; --at: 620ms; }
.k6 { --life: 1400ms; --at: 620ms; }
.is-in .sendaway { animation: sendaway 180ms linear 1980ms forwards; }
@keyframes sendaway { to { opacity: 0; } }
.m6-said { --delay: 2000ms; }
.m6-ask { --delay: 2500ms; }
/* Measured on the rendered phone: the clip at 34.6/92.1, the wrench at
39.1/92.1, and the sheet rows at 49.8 across, 65.7, 71.4 and 77.1 down. */
.is-in .cursor--tap1 { animation: tap1 2000ms linear 3300ms 1 both; }
@keyframes tap1 {
0% { transform: translate(34.6cqw, 99cqh); opacity: 0; }
9% { transform: translate(34.6cqw, 92.1cqh); opacity: 1; }
16% { transform: translate(34.6cqw, 94.1cqh); }
22% { transform: translate(34.6cqw, 92.1cqh); }
46% { transform: translate(49.8cqw, 71.4cqh); }
86% { transform: translate(49.8cqw, 71.4cqh); opacity: 1; }
100% { transform: translate(49.8cqw, 78cqh); opacity: 0; }
}
.is-in .cursor--tap2 { animation: tap2 3800ms linear 5900ms 1 both; }
@keyframes tap2 {
0% { transform: translate(34.6cqw, 99cqh); opacity: 0; }
4% { transform: translate(34.6cqw, 92.1cqh); opacity: 1; }
7.9% { transform: translate(34.6cqw, 94.1cqh); }
11% { transform: translate(34.6cqw, 92.1cqh); }
14.5% { transform: translate(49.8cqw, 71.4cqh); }
15.8% { transform: translate(49.8cqw, 73.4cqh); }
18% { transform: translate(49.8cqw, 71.4cqh); }
28% { transform: translate(39.1cqw, 92.1cqh); }
31.6% { transform: translate(39.1cqw, 94.1cqh); }
34% { transform: translate(39.1cqw, 92.1cqh); }
42% { transform: translate(49.8cqw, 65.7cqh); }
44.7% { transform: translate(49.8cqw, 67.7cqh); }
47% { transform: translate(49.8cqw, 65.7cqh); }
52% { transform: translate(49.8cqw, 71.4cqh); }
55.3% { transform: translate(49.8cqw, 73.4cqh); }
58% { transform: translate(49.8cqw, 71.4cqh); }
63% { transform: translate(49.8cqw, 77.1cqh); }
65.8% { transform: translate(49.8cqw, 79.1cqh); }
68% { transform: translate(49.8cqw, 77.1cqh); }
90% { transform: translate(49.8cqw, 77.1cqh); opacity: 1; }
100% { transform: translate(49.8cqw, 84cqh); opacity: 0; }
}
.a6-1 { --at: 6600ms; }
.a6-2 { --at: 7700ms; }
.a6-3 { --at: 8100ms; }
.a6-4 { --at: 8500ms; }
/* ═══ before and after: what the agent sends ═══
* The before panel does not finish, because the transcript does not: the feed
* reels on a 10s loop, the context meter fills and compacts, and the two things
* worth keeping dissolve into the top edge every time round.
*
* The after panel plays once: 300 ── 3600. Two messages, and the output itself
* lands on the work item rather than in the thread. */
.feedwrap {
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%);
mask-image: linear-gradient(to bottom, transparent, #000 24%);
}
.feed { display: grid; gap: 5px; padding: 0.5rem 0.6rem; }
.is-in .feed { animation: reel 10s linear infinite; }
@keyframes reel {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
.call {
justify-self: start;
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.16rem 0.4rem 0.2rem;
border-radius: 4px;
background: var(--surface-2);
color: var(--faint);
}
.call::before {
content: '';
width: 0.36em;
height: 0.36em;
border-radius: 1px;
background: var(--border-strong);
}
.wall { height: 5px; border-radius: 3px; background: var(--border); }
/* the two things in there you will want later */
.keep {
justify-self: start;
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.45rem 0.24rem;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
font-weight: 600;
}
.keep::before {
content: '';
width: 0.45em;
height: 0.45em;
border-radius: 2px;
background: var(--kind, var(--muted));
}
.cut-line {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0.15rem 0;
color: var(--faint);
}
.cut-line::before,
.cut-line::after { content: ''; flex: 1; border-top: 1px dashed var(--border-strong); }
/* the meter that decides what survives */
.ctx {
position: relative;
margin-left: auto;
min-width: 7.2em;
text-align: right;
white-space: nowrap;
}
.ctx b { font-weight: 400; }
.ctx .ctx-b { position: absolute; inset: 0; text-align: right; color: var(--kind-sprint); opacity: 0; }
.is-in .ctx-a { animation: ctxa 10s linear infinite; }
.is-in .ctx-b { animation: ctxb 10s linear infinite; }
@keyframes ctxa { 0%, 56% { opacity: 1; } 60%, 86% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes ctxb { 0%, 56% { opacity: 0; } 60%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
/* ── after: two messages, and the output somewhere else ── */
.note {
padding: 0.45rem 0.55rem 0.5rem;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
box-shadow: var(--card-shadow);
width: calc(var(--w) * 1%);
line-height: 1.35;
}
.side--after .note { background: var(--bg); }
.note b { display: block; font-weight: 600; }
.note .choices { justify-content: flex-start; }
.note .choices span { flex: 0 1 auto; min-width: 4.5em; padding: 0.24rem 0.7rem 0.28rem; }
.note .where {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.35rem;
padding: 0.16rem 0.4rem 0.2rem;
border: 1px solid var(--border-strong);
border-radius: 4px;
color: var(--muted);
}
.note .where::before {
content: '';
width: 0.45em;
height: 0.45em;
border-radius: 2px;
background: var(--kind, var(--muted));
}
/* the output, on its way out of the message and onto the work */
.fly {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
transform: translate(-50%, -50%);
opacity: 0;
}
.is-in .fly { animation: flyto 950ms var(--ease-out) var(--delay) forwards; }
@keyframes flyto {
0% { opacity: 0; transform: translate(-50%, -50%); }
18% { opacity: 1; transform: translate(-50%, -50%); }
100% {
opacity: 0;
transform: translate(-50%, -50%) translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqh)) scale(0.94);
}
}
/* as tall as what is on it, so a shorter box never cuts the bottom row off */
.shelf2 {
height: auto;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
overflow: hidden;
}
.side--after .shelf2 { background: var(--bg); }
.shelf2 .head2 {
padding: 0.34rem 0.55rem 0.38rem;
border-bottom: 1px solid var(--border);
font-weight: 600;
}
.shelf2 .rows2 { display: grid; gap: 5px; padding: 0.45rem 0.55rem; }
.shelf2 .slot-row { height: 1.72rem; }
.is-in .waiting { animation: waitpulse 2s var(--ease-out) 3400ms 3; }
@keyframes waitpulse {
0%, 100% { border-color: var(--border); }
50% { border-color: var(--kind-sprint); }
}
/* ── before: geometry ── */
.k-dec { --kind: var(--kind-epic); }
.k-plan { --kind: var(--kind-skill); }
/* ── after: geometry ── */
.n4-1 { --x: 50; --y: 15; --w: 92; --delay: 500ms; }
.n4-2 { --x: 50; --y: 40; --w: 92; --delay: 2600ms; }
.n4-shelf { --x: 4; --y: 58; --w: 92; --delay: 300ms; }
.n4-f1 { --x: 22; --y: 22; --dx: 4; --dy: 52; --delay: 1100ms; --kind: var(--kind-skill); }
.n4-r1 { --delay: 1900ms; }
.n4-r2 { --delay: 2100ms; }
/* a shorter box: the shelf starts higher so its last row still lands inside */
@media (max-width: 860px) {
.n4-shelf { --y: 55; }
}
@media (prefers-reduced-motion: reduce) {
.feed, .ctx-a, .ctx-b, .fly, .waiting { animation: none; }
.fly { display: none; }
}
/* ═══ before and after: who holds the context ═══
* One gauge on each side, so the two are read against each other. On the left
* three jobs are the person's: typing the context in, saying how to split it,
* and deciding when the context window is full. On the right the orchestrator
* has all three, and no gauge climbs.
* before 200 ── 12800 hand it over, split it, fill, compact, lose it,
* new window, hand the same thing over again
* after 300 ── 3100 fan out, and the pieces drop down the wires */
.gauge { flex: none; margin-left: auto; width: 78px; }
.gauge .meter { display: block; margin-top: 0; }
/* the window's name, which changes when the person gives up on it */
.nm { display: inline-grid; }
.nm b { grid-area: 1 / 1; font-weight: 600; white-space: nowrap; }
.nm-b { opacity: 0; }
.is-in .c8-nm .nm-a { animation: nma 12600ms linear 200ms 1 both; }
.is-in .c8-nm .nm-b { animation: nmb 12600ms linear 200ms 1 both; }
@keyframes nma { 0%, 71.9% { opacity: 1; } 72.5%, 100% { opacity: 0; } }
@keyframes nmb { 0%, 71.9% { opacity: 0; } 72.5%, 100% { opacity: 1; } }
.is-in .c8-gauge .meter i { animation: ctxfill 12600ms linear 200ms 1 both; }
@keyframes ctxfill {
0% { transform: scaleX(0.14); background: var(--border-strong); }
11.9% { transform: scaleX(0.34); background: var(--border-strong); }
19.8% { transform: scaleX(0.42); background: var(--border-strong); }
34.1% { transform: scaleX(0.62); background: var(--border-strong); }
49.2% { transform: scaleX(0.97); background: var(--kind-sprint); }
54.8% { transform: scaleX(0.97); background: var(--kind-sprint); }
58.1% { transform: scaleX(0.36); background: var(--border-strong); }
71.4% { transform: scaleX(0.46); background: var(--border-strong); }
72.2% { transform: scaleX(0.06); background: var(--border-strong); }
100% { transform: scaleX(0.30); background: var(--border-strong); }
}
.pane--stack { display: flex; flex-direction: column; }
.held { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0.55rem 0.65rem; }
.held > * { flex: none; max-height: 3rem; margin-bottom: 5px; overflow: hidden; }
.held .cut-line { align-self: stretch; margin: 0.1rem 0 5px; }
/* what the compact takes does not leave a hole where it was */
@keyframes shrinkaway {
0% { opacity: 1; max-height: 3rem; margin-bottom: 5px; padding-block: 0.2rem 0.24rem; border-block-width: 1px; }
45% { opacity: 0; max-height: 3rem; margin-bottom: 5px; padding-block: 0.2rem 0.24rem; border-block-width: 1px; }
100% { opacity: 0; max-height: 0; margin-bottom: 0; padding-block: 0; border-block-width: 0; }
}
/* the two lines the person types are stacked, so the first one leaving does not
shunt the second one sideways */
.ptext--stack { position: relative; height: 1.3em; }
.c8-line { position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.is-in .c8-clear1 { animation: sendaway 180ms linear 2500ms forwards; }
.is-in .c8-clear2 { animation: sendaway 180ms linear 6500ms forwards; }
.is-in .c8-clear3 { animation: sendaway 180ms linear 7300ms forwards; }
.is-in .c8-gone1 { animation: shrinkaway 640ms var(--ease-out) 7400ms forwards; }
.is-in .c8-gone2 { animation: shrinkaway 640ms var(--ease-out) 9300ms forwards; }
.is-in .c8-fade2 { animation: dropout 420ms var(--ease-out) 9300ms forwards; }
/* the three subagents the person specified, and now has to mind */
.mine { display: flex; align-self: stretch; gap: 5px; }
.minebox {
flex: 1;
min-width: 0;
padding: 0.28rem 0.42rem 0.34rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-2);
color: var(--muted);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.minebox i {
display: block;
margin-top: 0.32rem;
height: 3px;
border-radius: 2px;
background: var(--border-strong);
transform-origin: left center;
transform: scaleX(0.16);
}
.is-in .minebox i { animation: creep 4600ms linear 4500ms both; }
@keyframes creep { from { transform: scaleX(0.16); } to { transform: scaleX(var(--g)); } }
.m1 { --g: 0.54; }
.m2 { --g: 0.78; }
.m3 { --g: 0.4; }
.k-map { --kind: var(--kind-workflow); }
.k-try { --kind: var(--kind-sprint); }
.k-path { --kind: var(--kind-credential); }
.c8-h1 { --delay: 1700ms; }
.c8-h2 { --delay: 1900ms; }
.c8-h3 { --delay: 2100ms; }
.c8-h4 { --delay: 2300ms; }
.c8-mine { --delay: 4300ms; }
/* the dashed line takes up no room until the compact puts it there */
.c8-cut { max-height: 0; opacity: 0; margin-bottom: 0; }
.is-in .c8-cut { animation: cutline 12600ms linear 200ms 1 both; }
@keyframes cutline {
0%, 57.9% { max-height: 0; opacity: 0; margin-bottom: 0; }
61.1% { max-height: 3rem; opacity: 1; margin-bottom: 5px; }
71.4% { max-height: 3rem; opacity: 1; margin-bottom: 5px; }
74.7%, 100% { max-height: 3rem; opacity: 0; margin-bottom: 5px; }
}
/* the four things the person types: hand the context over, say how to split it,
compact when the meter says so, and then hand the same context over again */
.t7 { --w: 27ch; --ch: 27; --dur: 1350ms; --at: 200ms; }
.k7 { --life: 1500ms; --at: 200ms; }
.t8 { --w: 28ch; --ch: 28; --dur: 1400ms; --at: 2600ms; }
.k8 { --life: 1550ms; --at: 2600ms; }
.t9 { --w: 8ch; --ch: 8; --dur: 420ms; --at: 6600ms; }
.k9 { --life: 800ms; --at: 6600ms; }
.t10 { --w: 27ch; --ch: 27; --dur: 1350ms; --at: 9900ms; }
.k10 { --life: 2900ms; --at: 9900ms; }
/* ── after: split, and handed down ── */
.c8-calm .meter { --fill: 0.22; --delay: 400ms; }
.c8-sub .pstack { margin: 0.4rem 0 0; }
.c8-sub .meter { --delay: 1600ms; }
.c8-lead { --x: 50; --y: 15; --w: 52; --fy: -6; --delay: 300ms; }
.c8-stem { --x: 50; --y: 27; --h: 8; --delay: 780ms; }
.c8-fan { --x: 17; --y: 35; --w: 66; --delay: 840ms; }
.c8-d1 { --x: 17; --y: 35; --h: 13; --delay: 920ms; }
.c8-d2 { --x: 50; --y: 35; --h: 13; --delay: 900ms; }
.c8-d3 { --x: 83; --y: 35; --h: 13; --delay: 960ms; }
.c8-sub { --w: 30; --fy: -5; }
.c8-s1 { --x: 17; --y: 68; --delay: 1000ms; --fill: 0.2; }
.c8-s2 { --x: 50; --y: 68; --delay: 1080ms; --fill: 0.3; }
.c8-s3 { --x: 83; --y: 68; --delay: 1160ms; --fill: 0.24; }
.g1 { --at: 1800ms; }
.g2 { --at: 1960ms; }
.g3 { --at: 2140ms; }
.g4 { --at: 2300ms; }
.g5 { --at: 2480ms; }
.g6 { --at: 2640ms; }
/* one column: the subagents get the room the labels need */
@media (max-width: 860px) {
.c8-sub { --w: 32; }
}
/* the narrowest phones: the same six labels, on one line each */
@media (max-width: 460px) {
.c8-sub { padding-inline: 0.35rem; }
.c8-sub .pchip { gap: 0.22rem; padding-inline: 0.26rem; }
}
/* no motion: the window rests full, holding everything, before any of it goes */
@media (prefers-reduced-motion: reduce) {
.is-in .c8-nm .nm-a, .is-in .c8-nm .nm-b, .is-in .c8-gauge .meter i, .is-in .minebox i,
.is-in .c8-gone1, .is-in .c8-gone2, .is-in .c8-fade2, .is-in .c8-cut,
.is-in .c8-clear1, .is-in .c8-clear2, .is-in .c8-clear3 { animation: none; }
.c8-gauge { --fill: 0.97; }
.c8-gauge .meter i { background: var(--kind-sprint); }
.minebox i { transform: scaleX(var(--g)); }
.c8-nm .nm-b, .c8-cut, .c8-clear1, .c8-clear2, .c8-clear3 { display: none; }
}
/* ═══ join ═══ */
.join { padding-block: clamp(3.5rem, 10vh, 7rem) clamp(2.5rem, 6vh, 4rem); text-align: center; }
.join h2 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.875rem, 6vw, 3.5rem);
font-weight: 600;
letter-spacing: -0.025em;
}
.join p { max-width: 36ch; margin: 0.85rem auto 0; color: var(--muted); }
form.waitlist { margin: 2rem auto 0; max-width: 34rem; }
form.waitlist .fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
form.waitlist input {
flex: 1 1 12rem;
min-height: 2.75rem;
padding: 0 0.85rem;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--bg);
color: var(--ink);
font: inherit;
font-size: 0.9375rem;
}
form.waitlist input::placeholder { color: var(--faint); }
form.waitlist .status { margin: 0.85rem 0 0; min-height: 1.5rem; font-size: 0.875rem; color: var(--muted); }
form.waitlist.is-done .fields { display: none; }
form.waitlist.is-done .status { color: var(--ink); font-size: 1.0625rem; }
.hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
footer {
padding: 1.75rem 0 3rem;
border-top: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-family: var(--font-display);
font-size: 0.6875rem;
color: var(--faint);
}
footer a { color: var(--faint); text-decoration: none; }
footer a:hover { color: var(--ink); }
/* ═══ narrow screens ═══ */
@media (max-width: 860px) {
.pitch-inner { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vh, 2.5rem); }
.pitch--flip .pitch-art { order: 0; }
.pitch--flip .pitch-copy { margin-left: 0; }
.pitch-copy { max-width: none; }
.hero .pitch-inner { gap: 2.5rem; }
.cluster, .pile { width: min(100%, 440px); }
}
/* A narrow cluster is short as well as narrow, and the thread card in scene two
needs the height back before it reaches over the top edge. */
@media (max-width: 460px) {
.cluster { aspect-ratio: 1 / 1.12; }
}
@media (max-width: 340px) {
.cluster { aspect-ratio: 1 / 1.22; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.at, .box, .wire, .meter i, .wordmark .key, .pile .tile,
.is-in .panel--catching, .is-in .tile--lands, .is-in .badge, .is-in .vault { transition: none; animation: none; }
.at, .box { opacity: 1; transform: translate(-50%, -50%); }
.box { transform: none; }
.wire { transform: none; }
.meter i { transform: scaleX(var(--fill, 1)); }
.pile .tile { transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg)); opacity: 1; }
}
/* ═══════════════════════════════════════════════════════════════════════
GEOMETRY
Coordinates are percentages of the cluster, which is a dense square rather
than a wide field, so the same numbers hold at every width and no scene
needs a second layout. `--fx/--fy` is where a part travels FROM.
═══════════════════════════════════════════════════════════════════════ */
/* ── hero pile ── */
.p-1 { --x: 30; --y: 22; --r: -8; --delay: 620ms; --kind: var(--kind-workflow); }
.p-2 { --x: 68; --y: 15; --r: 6; --delay: 700ms; --kind: var(--kind-credential); }
.p-3 { --x: 22; --y: 51; --r: 5; --delay: 780ms; --kind: var(--kind-skill); }
.p-4 { --x: 61; --y: 43; --r: -6; --delay: 860ms; --kind: var(--kind-epic); }
.p-5 { --x: 36; --y: 78; --r: 8; --delay: 940ms; --kind: var(--kind-sprint); }
.p-6 { --x: 73; --y: 70; --r: -4; --delay: 1020ms; --kind: var(--agent-send); }
/* ── 1: the four things are already here, beside the agent ── */
.s1-panel { --x: 58; --y: 8; --w: 38; --h: 84; --delay: 60ms; }
.s1-slot { --x: 77; --w: 30; }
.s1-slot-1 { --y: 26; }
.s1-slot-2 { --y: 39; }
.s1-slot-3 { --y: 52; }
.s1-slot-4 { --y: 65; }
.s1-go { --x: 77; --y: 83; --w: 30; --fs: 0.9; --delay: 1060ms; }
/* the product's own sections, named, with one thing sitting in each */
.s1-lab { --x: 11; }
.s1-lab-1 { --y: 26; --delay: 120ms; }
.s1-lab-2 { --y: 39; --delay: 180ms; }
.s1-lab-3 { --y: 52; --delay: 240ms; }
.s1-lab-4 { --y: 65; --delay: 300ms; }
/* they rest in the panel and come from the row beside their section name */
/* one step from a section to the agent, drawn so the gap reads as that step */
.s1-rail { --x: 22; --w: 36; --line: var(--border); }
.s1-rail-1 { --y: 26; --delay: 150ms; }
.s1-rail-2 { --y: 39; --delay: 210ms; }
.s1-rail-3 { --y: 52; --delay: 270ms; }
.s1-rail-4 { --y: 65; --delay: 330ms; }
.s1-tile { --x: 77; --w: 30; --land: 30; }
.s1-workflow { --y: 39; --fx: -41; --delay: 420ms; --kind: var(--kind-workflow); }
.s1-credential { --y: 65; --fx: -41; --delay: 780ms; --kind: var(--kind-credential); }
.s1-skill { --y: 52; --fx: -41; --delay: 600ms; --kind: var(--kind-skill); }
.s1-work { --y: 26; --fx: -41; --delay: 240ms; --kind: var(--kind-epic); }
/* ── 2: you talk to one coordinator; it fans out and reports back ── */
.s2-thread { --x: 50; --y: 20; --w: 88; --fy: -8; --delay: 60ms; }
.s2-q { --delay: 1650ms; }
.s2-send { --x: 46; --y: 34; --h: 10; --delay: 340ms; }
.s2-back { --x: 54; --y: 34; --h: 10; --delay: 1320ms; --line: var(--kind-sprint); }
.s2-lead { --x: 50; --y: 50; --w: 58; --fy: -5; --delay: 480ms; }
.s2-stem { --x: 50; --y: 56; --h: 4; --delay: 680ms; }
.s2-fan { --x: 18; --y: 60; --w: 64; --delay: 740ms; }
.s2-drop-1 { --x: 18; --y: 60; --h: 7; --delay: 820ms; }
.s2-drop-2 { --x: 50; --y: 60; --h: 7; --delay: 800ms; }
.s2-drop-3 { --x: 82; --y: 60; --h: 7; --delay: 860ms; }
.s2-sub { --w: 30; --fy: -5; }
.s2-sub-1 { --x: 18; --y: 75; --delay: 900ms; --fill: 1; }
.s2-sub-2 { --x: 50; --y: 75; --delay: 980ms; --fill: 0.55; }
.s2-sub-3 { --x: 82; --y: 75; --delay: 1060ms; --fill: 0.8; }
.s2-ask { --x: 61; --y: 67; --delay: 1160ms; }
/* ── 3: what was shut in gets out ── */
.s3-vault { --w: 26; --h: 17; }
.s3-vault-1 { --x: 4; --y: 6; --delay: 60ms; }
.s3-vault-2 { --x: 37; --y: 6; --delay: 140ms; }
.s3-vault-3 { --x: 70; --y: 6; --delay: 220ms; }
.s3-art { --y: 47; --fy: -30; }
.s3-art-1 { --x: 22; --fx: -5; --delay: 620ms; }
.s3-art-2 { --x: 50; --fx: 0; --delay: 740ms; }
.s3-art-3 { --x: 78; --fx: 5; --delay: 860ms; }
.s3-plane { --x: 4; --y: 39; --w: 92; --h: 17; --delay: 480ms; }
.s3-drop-1 { --x: 16; --y: 56; --h: 19; --delay: 1020ms; --line: var(--agent-send); }
.s3-drop-2 { --x: 39; --y: 56; --h: 19; --delay: 1080ms; --line: var(--agent-send); }
.s3-drop-3 { --x: 62; --y: 56; --h: 19; --delay: 1140ms; }
.s3-drop-4 { --x: 85; --y: 56; --h: 19; --delay: 1200ms; }
.s3-who { --y: 82; --fy: -6; }
.s3-who-1 { --x: 16; --delay: 1100ms; }
.s3-who-2 { --x: 39; --delay: 1160ms; }
.s3-who-3 { --x: 62; --delay: 1220ms; }
.s3-who-4 { --x: 85; --delay: 1280ms; }
/* Scene one is laid out across rather than down, and it stays that way on a
narrow screen: the same four sections, the same rails, the same panel. Only
the share of the width each column takes changes, because the panel holds
real words and they set the smallest it can be. */
@media (max-width: 860px) {
.lab { width: 24cqw; font-size: clamp(0.4375rem, 2cqw, 0.625rem); }
.s1-lab { --x: 13; }
.s1-rail { --x: 26; --w: 12; }
.s1-panel { --x: 40; --y: 8; --w: 58; --h: 84; }
.s1-slot { --x: 69; --w: 52; }
.s1-go { --x: 69; --w: 52; }
.s1-tile { --x: 69; --w: 52; --land: 52; }
.s1-work, .s1-workflow, .s1-skill, .s1-credential { --fx: -40; }
}
/* the narrowest phones: the panel takes the width the section names give up */
@media (max-width: 460px) {
.lab { width: 22cqw; }
.s1-lab { --x: 12; }
.s1-rail { --x: 24; --w: 10; }
.s1-panel { --x: 35; --w: 63; }
.s1-slot { --x: 66.5; --w: 57; }
.s1-go { --x: 66.5; --w: 57; }
.s1-tile { --x: 66.5; --w: 57; --land: 57; }
}