@font-face {
  font-family: "Obel Mono";
  src: url("fonts/obel-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Ghost Mark";
  src: url("fonts/ghost-mark.woff2") format("woff2");
  unicode-range: U+15E3;
  font-display: block;
}

/* The film widget's two numbers. --p is how much of the film has been watched through p0ssess
   (0 is Claude alone, 100 is the whole film); --h is where the playhead stands. Both are
   percentages of the film's length, registered so they can be transitioned. */
@property --p { syntax: "<number>"; inherits: true; initial-value: 100; }
@property --h { syntax: "<number>"; inherits: true; initial-value: 75.11; }

/* Dark only: black ground, one violet. */
:root {
  color-scheme: dark;
  --ground: #0b0b0b;
  --surface: #161616;
  --surface-hi: #212121;
  --line: #2a2a2a;
  --ink: #ffffff;
  --ink-body: #c9c9c9;
  --ink-2: #8a8a8a;
  --dot: #6e6e6e;           /* idle island dots and ticks; 3.5:1 on the surface */
  --violet: #7457e0;        /* lines, dots, bars, filled buttons; never small text */
  --violet-deep: #2a1b4e;   /* fills, selection */
  --violet-ink: #a593f2;    /* text and links on dark */
  --bar: #626262;           /* chart bars that lose, unheard sound; 3.2:1 on the ground */
  --st-idle: #808080;       /* Claude Code's 256-color status codes */
  --st-run: #bcbcbc;
  --st-amber: #ffaf00;
  --ghost-mask: #eef1ff;    /* the mark's mask, for its blinking lids */
  --gutter: clamp(20px, 4vw, 56px);
  --sec-pad: clamp(3.4rem, 7vw, 6rem);
  --out: cubic-bezier(0.16, 1, 0.3, 1);      /* arrivals */
  --io: cubic-bezier(0.65, 0, 0.35, 1);      /* travel that stays on screen */
  --spring: cubic-bezier(0.34, 1.5, 0.5, 1); /* the island and a press, nothing else */
  --flow: 0.9rem;           /* space between blocks of copy */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Obel Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scrollbar-color: var(--dot) var(--ground);
  accent-color: var(--violet);
  caret-color: var(--violet-ink);
  scroll-padding-top: 76px;
}
::selection { background: var(--violet-deep); color: var(--ink); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-body);
  font: 400 1.0625rem/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
:where(p, ul, ol, dl, dd, pre, figure, h1, h2, h3, table, fieldset) { margin: 0; }
:where(fieldset) { padding: 0; border: 0; min-inline-size: 0; }
a { color: var(--violet-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color 0.2s var(--out); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--violet-ink); outline-offset: 3px; border-radius: 4px; }
code, pre { font-family: var(--mono); font-size: 0.88em; }
code { color: var(--ink); overflow-wrap: anywhere; }
pre code { font-size: 1em; }
small { font-size: inherit; }
cite { font-style: normal; color: var(--ink); }
q { quotes: "“" "”"; }
button { font: inherit; color: inherit; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; z-index: 30; left: 12px; top: -80px; padding: 0.6rem 1rem;
  background: var(--violet); color: var(--ink); border-radius: 999px; font: 400 0.84rem/1 var(--mono); text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { position: relative; max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--mono); font-weight: 700; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 11.5vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 3.1vw + 0.95rem, 3.1rem); line-height: 1.06; letter-spacing: -0.035em; }
h3 { font-size: 1.14rem; line-height: 1.3; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
.small { font-size: 0.9rem; color: var(--ink-2); }

/* The frameless grid: a hairline with a 24 px violet start, drawn as one line so both parts
   land on the same pixel row. With motion allowed the line draws out of its violet start when
   it scrolls into view (html.anim, below). */
.hl, .sec > .wrap { position: relative; }
.hl::before, .sec > .wrap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, var(--violet) 0 24px, var(--line) 24px);
}
.sec > .wrap::before { top: calc(-1 * var(--sec-pad)); left: var(--gutter); right: var(--gutter); }

/* The mark. ghost.svg is drawn on a 16-unit grid and the wordmark on the same unit, so both
   are sized in whole multiples of --u and stay crisp. The lids cover the top of the two slit
   eyes (columns 6 and 9, rows 5 and 6) in the mask's color; a blink shows them for a moment. */
.g { --u: 3px; position: relative; display: block; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.g img { display: block; width: 100%; height: 100%; }
.g .lid {
  position: absolute; left: calc(6 * var(--u)); top: calc(5 * var(--u)); width: calc(4 * var(--u)); height: calc(2 * var(--u));
  background: linear-gradient(to right, var(--ghost-mask) 25%, transparent 25% 75%, var(--ghost-mask) 75%);
  opacity: 0;
}
.lockup { --u: 3px; display: flex; align-items: flex-end; gap: calc(3 * var(--u)); text-decoration: none; border-radius: 4px; }
.lockup .g { --u: inherit; }
.wordmark { width: calc(34 * var(--u)); height: calc(9 * var(--u)); margin-bottom: calc(-2 * var(--u)); }
.wm-ink { fill: var(--ink); }
.wm-zero { fill: var(--violet); }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem 0.4rem; }
.topnav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.8rem); font: 400 0.84rem/1.2 var(--mono); }
.topnav a { padding: 0.8rem 0; color: var(--ink-2); text-decoration: none; }
.topnav a:hover { color: var(--ink); }
.topnav .nav-cta {
  padding: 0.62rem 1.05rem; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  transition: border-color 0.2s var(--out), background 0.2s var(--out), scale 0.35s var(--spring);
}
.topnav .nav-cta:hover { border-color: var(--violet); background: var(--violet-deep); }
.topnav .nav-cta:active { scale: 0.965; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.6rem;
  background: var(--violet); color: var(--ink); border-radius: 999px;
  font: 400 0.95rem/1 var(--mono); text-decoration: none;
  transition: scale 0.35s var(--spring), background 0.2s var(--out);
}
.btn:hover { background: #6346d4; color: var(--ink); }
.btn:active { scale: 0.965; }
.more { padding-block: 0.55rem; font: 400 0.92rem/1 var(--mono); }
.replay {
  padding: 6px 12px; font: 400 12px/1.6 var(--mono); color: var(--ink-2); background: none; border: 0; border-radius: 999px; cursor: pointer;
  transition: color 0.2s var(--out), background 0.2s var(--out);
}
.replay:hover { color: var(--ink); background: var(--surface-hi); }

/* A two-way switch drawn as an island: the violet pill slides under the choice, with a little spring. */
.mode {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.mode label {
  position: relative; z-index: 1; display: grid; place-items: center; min-height: 38px; padding: 0 1.05rem;
  border-radius: 999px; font: 400 0.82rem/1 var(--mono); color: var(--ink-2); white-space: nowrap; cursor: pointer;
  transition: color 0.2s var(--out);
}
.mode label:hover { color: var(--ink); }
.mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mode label:has(:checked) { color: var(--ink); }
.mode label:has(:focus-visible) { outline: 2px solid var(--violet-ink); outline-offset: 2px; }
.mode-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  background: var(--violet-deep); border: 1px solid var(--violet); border-radius: 999px;
  transition: translate 0.5s var(--spring);
}
.mode:has(label:nth-of-type(2) :checked) .mode-thumb { translate: 100% 0; }

/* The hero: the promise on the left, the proof beside and under it. One prompt was run twice
   on a ten-minute film; the widget shows what each run caught. */
.hero { padding-block: clamp(1rem, 2vw, 1.5rem) clamp(2.6rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
.lede { max-width: 38rem; margin-top: 1.25rem; font-size: 1.12rem; line-height: 1.55; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.7rem; margin-top: 1.7rem; }
.terms { margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-2); }

.film { --p: 100; --h: 75.11; }
.film:has(#mode-alone:checked) { --p: 0; }
.tracks { transition: --p 1.6s var(--io), --h 0.6s var(--io); }
.film.js .tracks { transition: --h 0.6s var(--io); }
.film.live .tracks { transition: none; }
.film:has(#mode-alone:checked) .v-poss, .film:not(:has(#mode-alone:checked)) .v-alone { display: none; }

.screen { position: relative; align-self: start; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; scroll-margin-top: 80px; transition: --p 1.6s var(--io); }
.film.js .screen { transition: none; }
/* The grid's violet start on the screen's top edge; it runs the full width once the film has been watched. */
.screen::after {
  content: ""; position: absolute; z-index: 1; left: -1px; top: -1px; height: 1px; width: calc(24px + (100% - 22px) * var(--p) / 100);
  background: var(--violet);
}
.frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px 3px 0 0; background: #000; }
.frame img, .frame canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated;
  transition: filter 0.5s var(--out);
}
.tc {
  position: absolute; left: 10px; bottom: 10px; padding: 0.22rem 0.6rem;
  background: rgb(11 11 11 / 0.84); border-radius: 999px; font: 400 0.78rem/1.3 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.unseen {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center;
  font: 400 0.92rem/1.4 var(--mono); color: var(--ink-body); opacity: 0; transition: opacity 0.3s var(--out);
}
.film[data-miss]:has(#mode-alone:checked) .frame :is(img, canvas) { filter: grayscale(1) brightness(0.2); }
.film[data-miss]:has(#mode-alone:checked) .unseen { opacity: 1; }

.said { display: flow-root; min-height: 13.6rem; padding: 0.85rem 1.1rem 1rem; }
.said-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.8rem; }
.said .when { font: 400 0.78rem/1.4 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.said .what { font: 700 1.02rem/1.3 var(--mono); letter-spacing: -0.015em; color: var(--ink); }
.said-by > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; margin-top: 0.55rem; }
.said-by dt { font: 400 0.76rem/1.5 var(--mono); color: var(--ink-2); }
.said-by dd { font-size: 0.95rem; line-height: 1.5; }
.said-by .by-poss dt { color: var(--violet-ink); }
.said-by q { color: var(--ink); }
.qt { margin-left: 0.6em; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.credit { font: 400 0.76rem/1.5 var(--mono); color: var(--ink-2); white-space: nowrap; }
.said-note { margin-top: 0.6rem; font-size: 0.84rem; line-height: 1.45; color: var(--ink-2); }

.readout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.4rem;
  grid-template-areas: "ctl ctl" "say say" "score parts";
}
.ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.mode-say { grid-area: say; max-width: 34rem; font-size: 0.95rem; line-height: 1.5; min-height: 4.5em; }
.tally { grid-area: score; }
.parts { grid-area: parts; }
.tally { display: flex; align-items: baseline; gap: 0.5rem; }
.tally .num { font: 700 clamp(3.4rem, 15vw, 4.4rem)/0.86 var(--mono); letter-spacing: -0.055em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tally .num b { font-weight: inherit; }
.tally small { font: 400 1rem/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.tally .num.tick { animation: tick 0.32s var(--out); }
@keyframes tick { from { translate: 0 -0.08em; color: var(--violet-ink); } }
.parts { list-style: none; padding: 0; display: grid; gap: 0.3rem; justify-self: end; min-width: 11.5rem; }
.parts li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.1rem; }
.parts .k { font-size: 0.8rem; color: var(--ink-2); }
.parts .v { font: 400 0.84rem/1.3 var(--mono); color: var(--ink-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.parts [data-k] { font-weight: 700; color: var(--ink); }
.parts .v b { font-weight: inherit; }

/* The timeline: the film's picture, its measured loudness and the ten scored events on one
   scale. Each lane has a dim layer (what Claude alone had) and a lit layer clipped to --p. */
.lanes { position: relative; container-type: inline-size; margin-top: 40px; touch-action: pan-y; }
.lane { position: relative; }
.lane + .lane { margin-top: 8px; }
.tl { display: block; margin-bottom: 4px; font: 400 0.75rem/1.2 var(--mono); color: var(--ink-2); }
.lane-in { position: relative; }
.strip .lane-in { height: 46px; overflow: hidden; border-radius: 4px; background: var(--surface); }
.strip i { position: absolute; inset: 0; background: url("film-strip.webp") 0 0 / 100% 100% no-repeat; }
.s-dim { filter: grayscale(1) brightness(0.3); }
/* Twenty stills, one every 30 seconds of 596.46: all that Claude alone looked at. */
.s-slits {
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 3px, transparent 3px 5.0297%);
  mask-image: repeating-linear-gradient(to right, #000 0 3px, transparent 3px 5.0297%);
}
.s-lit, .w-lit { clip-path: inset(0 calc((100 - var(--p)) * 1%) 0 0); }
.wave .lane-in { height: 34px; }
.wave svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 0.56; }
.w-dim { stroke: var(--bar); }
.w-lit { stroke: var(--violet); }
/* A few of the sounds the answer names, at the times it gives them. Wide screens only. */
.cues { display: none; }
.evs .lane-in { height: 28px; }
.moments, .evs-lit { position: absolute; inset: 0; display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.ev, .evs-lit i { position: relative; min-width: 0; }
.e1 { flex: 30 1 0; } .e2 { flex: 25 1 0; } .e3 { flex: 60 1 0; } .e4 { flex: 35 1 0; } .e5 { flex: 35 1 0; }
.e6 { flex: 40 1 0; } .e7 { flex: 75 1 0; } .e8 { flex: 70 1 0; } .e9 { flex: 115 1 0; } .e10 { flex: 111.5 1 0; }
.ev > span, .ev > q { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ev::before, .evs-lit i::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; translate: 0 -50%; border-radius: 2px;
  transition: height 0.35s var(--spring);
}
.ev.hit::before { background: var(--ink-2); }
.ev.miss::before { border: 1px dashed var(--bar); }
.evs-lit { pointer-events: none; clip-path: inset(-8px calc((100 - var(--p)) * 1%) -8px 0); }
.evs-lit i::before { background: var(--violet); }
.ev.sel::before, .evs-lit i.sel::before { height: 16px; }
.ev button { position: absolute; inset: 0; width: 100%; padding: 0; background: none; border: 0; border-radius: 3px; cursor: pointer; }
.axis { display: block; overflow: visible; margin-top: 6px; }
.axis .tk { fill: var(--dot); }
.axis text { font: 400 12px var(--mono); fill: var(--ink-2); }
/* The playhead: the ghost rides it. */
.head { position: absolute; z-index: 3; left: 0; top: -40px; bottom: 26px; width: 0; translate: calc(var(--h) * 1cqw) 0; pointer-events: none; }
.head-line { position: absolute; left: -1px; top: 35px; bottom: 0; width: 2px; background: var(--ink); border-radius: 1px; }
.head .rider { --u: 2px; position: absolute; left: -16px; top: 0; }
.step { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.step-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer;
  transition: border-color 0.2s var(--out), scale 0.35s var(--spring);
}
.step-btn:hover { border-color: var(--violet); }
.step-btn:active { scale: 0.94; }
.step-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.film-note { max-width: 62rem; font-size: 0.84rem; line-height: 1.55; color: var(--ink-2); }
.film-note a { white-space: nowrap; }

/* Sections */
.sec { padding-block: var(--sec-pad); }
.sec-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2rem, 4.5vw, 3.6rem); padding-top: 1.6rem; }
.sec-head h2 { max-width: 19ch; }
.sec-head p { max-width: 36rem; font-size: 1.1rem; line-height: 1.58; }
.copy { max-width: 36rem; }
:where(.copy) > * + * { margin-top: var(--flow); }
:where(.copy) > h3 { margin-top: 2.2rem; }
:where(.copy) > h3:first-child { margin-top: 0; }
:where(.copy) > h3 + * { margin-top: 0.7rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
.aside { max-width: 44rem; margin-top: 2.4rem; font-size: 0.95rem; color: var(--ink-2); }

/* Cells on the frameless grid */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem clamp(28px, 4vw, 64px); margin: 0; padding: 0; list-style: none; }
.cell { display: flex; flex-direction: column; padding-top: 1.5rem; }
.cell > * + * { margin-top: 0.85rem; }
.cell > .fig { margin-top: auto; padding-top: 1.2rem; }
.px { display: block; width: 48px; height: 48px; }
.px + h3 { margin-top: 1.1rem; }
/* A real output, shown as it came back (cropped) */
.shot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
/* A real answer, in a box the height of the image beside it: the media, the times the answer
   gives marked on it, and the answer's own words. */
.result {
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
}
.vid-frame { position: relative; min-height: 0; overflow: hidden; background: #000; }
.vid-frame img, .vid-scan { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The frame keeps its lower part, where the countdown clock is. */
.vid-frame img { object-fit: cover; object-position: 50% 100%; }
/* Fifteen small frames, one every two seconds up to 0:28; the last one sits under the still. */
.vid-scan { background: url("apollo-scan.webp") 100% 100% / 1500% auto no-repeat; image-rendering: pixelated; }
.vid-lane { position: relative; z-index: 1; height: 26px; }
.vid-strip { position: absolute; inset: 0; background: url("apollo-strip.webp") 0 0 / 100% 100% no-repeat; }
/* The pin stands at 28 of the clip's 45 seconds. */
.vid-run { position: absolute; inset: 0; transform: translateX(62.22%); }
.vid-pin { position: absolute; z-index: 1; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.vid-pin::before { content: ""; position: absolute; left: -4px; bottom: -5px; width: 10px; height: 10px; background: var(--violet); border: 1px solid var(--ink); border-radius: 50%; }
.vid-said { padding: 0.6rem 0.8rem 0.7rem; font-size: 0.86rem; line-height: 1.45; }
.vid-said q { color: var(--ink); }
.vid-said b { font-weight: 400; color: var(--violet-ink); white-space: nowrap; }
.aud { padding: 0.8rem 0.8rem 0.7rem; }
.aud-wave { position: relative; min-height: 44px; }
.aud-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 0.6; }
.aud-dim { stroke: var(--bar); }
.aud-lit { stroke: var(--violet); }
.aud-head { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.aud-head i { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ink); }
/* The two time ranges the answer gives, on the same scale: 3 s and 2 s of 5.35. */
.aud-marks { display: flex; gap: 3px; height: 4px; margin-top: 7px; padding-right: 6.54%; }
.aud-marks i { background: var(--violet); border-radius: 2px; }
.aud-marks .m1 { flex: 3 1 0; }
.aud-marks .m2 { flex: 2 1 0; }
.aud-lines { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.aud-lines li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7rem; align-items: baseline; font-size: 0.9rem; line-height: 1.45; color: var(--ink); }
.ts { font: 400 0.75rem/1.45 var(--mono); color: var(--violet-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* What you say to Claude, set as a prompt line */
.ask {
  position: relative; padding: 0.55rem 0.8rem 0.6rem 2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  font: 400 0.84rem/1.5 var(--mono); color: var(--ink);
}
.ask::before { content: ">"; position: absolute; left: 0.8rem; color: var(--violet-ink); }
.says { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
/* A big number with its unit beside it */
.fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; }
.fig b { font: 700 2.15rem/1 var(--mono); letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fig b small { font-size: 0.56em; font-weight: 400; color: var(--ink-2); margin-right: 0.1em; }
.amt small { font-size: 0.62em; font-weight: 400; color: var(--ink-2); margin-right: 0.1em; }
.fig span { flex-basis: 100%; font: 400 0.76rem/1.4 var(--mono); color: var(--ink-2); }

/* The hand-off: Claude, the possessed Haiku, the other model. One hairline runs through the
   three pills; the violet wires, the reply and the riding ghost are the moving parts. The
   default state is the still frame: the Haiku possessed, both wires lit, one measured job named. */
.relay { position: relative; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); padding-bottom: 2rem; }
.hops { --pill: 44px; --gap: 1.1rem; position: relative; list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--gap); }
.hop { position: relative; }
.at { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.7rem; height: var(--pill); }
.pill {
  display: inline-flex; flex: none; align-items: center; gap: 0.55rem; height: var(--pill); padding: 0 1.15rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font: 400 0.94rem/1 var(--mono); color: var(--ink); white-space: nowrap;
}
.pip { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.haiku .pill { padding-left: 0.4rem; background: var(--violet-deep); border-color: var(--violet); }
/* Wide enough for the longest model name, so the pill does not jump when the job changes. */
.model .pill { justify-content: center; min-width: calc(22ch + 2.4rem); border-color: var(--violet); }
.seat { display: block; width: 32px; height: 32px; }
.claude .at { z-index: 3; }  /* the rider leaves from here and passes over the Haiku pill */
.after { position: relative; display: grid; align-items: center; min-width: 0; }
.after > * { grid-area: 1 / 1; }
.relay .rider { display: none; }
/* What Claude gets back: the answer's credit, as p0ssess prints it. */
.back {
  justify-self: start; max-width: 100%; padding: 0.3rem 0.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font: 400 0.76rem/1.3 var(--mono); color: var(--ink-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.swap .idle { opacity: 0; color: var(--ink-2); }
p.swap .idle { color: inherit; }
.hop p { margin: 0.45rem 0 0 calc(var(--pill) / 2 + 0.95rem); font-size: 0.93rem; line-height: 1.48; }
/* The line, drawn hop by hop from one pill's middle to the next, and the lit wire on top of it. */
.hop:not(:last-child)::before, .wire {
  content: ""; position: absolute; left: calc(var(--pill) / 2); top: calc(var(--pill) / 2);
  width: 1px; height: calc(100% + var(--gap)); background: var(--line);
}
.wire { z-index: 1; width: 2px; margin-left: -0.5px; background: var(--violet); transform-origin: 0 0; }
.wire i { --far: 0 100%; position: absolute; inset: 0; opacity: 0; }
.wire i::after { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.relay .replay { position: absolute; right: -12px; bottom: 0; }

/* Where one run's money went: one bar, three parts */
.bill { align-self: start; padding-top: 1.3rem; }
.bill figcaption { font: 700 1.02rem/1.3 var(--mono); letter-spacing: -0.015em; color: var(--ink); }
.bill-bar { display: block; margin-top: 1.1rem; border-radius: 3px; }
.bill-bar .b1 { fill: var(--bar); }
.bill-bar .b2 { fill: var(--ink); }
.bill-bar .b3 { fill: var(--violet); }
.bill-bar .gap { fill: var(--ground); }
.bill-rows { list-style: none; padding: 0; margin-top: 0.9rem; }
.bill-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.bill-rows li:first-child { border-top: 0; }
.bill-rows .who { position: relative; padding-left: 1.2rem; font-size: 0.95rem; }
.bill-rows .who::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--bar); }
.bill-rows .r2 .who::before { background: var(--ink); }
.bill-rows .r3 .who::before { background: var(--violet); }
.amt { font: 700 1.25rem/1 var(--mono); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A command with its copy button */
.cmd {
  display: flex; align-items: center; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.cmd pre { flex: 1; min-width: 0; padding: 0.8rem 0.6rem 0.8rem 1rem; color: var(--ink); font-size: 0.86rem; }
/* One command a line. A long one wraps and its continuation hangs, so it still reads as one command. */
.cmd .ln { display: inline-block; width: 100%; padding-left: 2ch; text-indent: -2ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-btn {
  position: relative; flex: none; min-width: 4.2rem; margin-right: 7px; padding: 0.42rem 0.8rem;
  background: var(--violet); color: var(--ink);
  border: 0; border-radius: 999px;
  font: 400 0.8rem/1.2 var(--mono); cursor: pointer;
  transition: transform 0.35s var(--spring), background 0.2s var(--out);
}
.copy-btn:hover { background: #6346d4; }
.copy-btn:active { transform: scale(0.965); }
.copy-btn::after { content: ""; position: absolute; inset: -9px -7px; }  /* a 44 px touch target */

/* Plain rows on the frameless grid */
.wont, .needs { list-style: none; padding: 0; }
.wont li, .needs li { padding: 0.62rem 0; }
.wont code { white-space: nowrap; }

/* Gates: one row per level of stakes. The rule under each row is the 0 to 100 score,
   and its violet part is the scores that clear that gate. */
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; font-weight: 400; padding: 0; }
.gates { display: block; margin-top: 1.2rem; }
.gates thead, .gates tbody { display: block; }
.gates tr { display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem 7.4rem; column-gap: 0.6rem; align-items: baseline; }
.gates thead tr { padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.gates thead th { font-size: 0.84rem; color: var(--ink-2); }
.gates thead th:nth-child(n + 3), .gates .gate, .gates .harm { text-align: right; white-space: nowrap; }
.gates tbody tr { position: relative; padding: 0.55rem 0 0.9rem; border-bottom: 1px solid var(--line); }
.gates tbody tr::before, .gates tbody tr::after { content: ""; position: absolute; left: var(--g); bottom: -1px; background: var(--violet); }
.gates tbody tr::before { width: 2px; height: 11px; }
.gates tbody tr::after { right: 0; height: 3px; }
.g20 { --g: 20%; } .g35 { --g: 35%; } .g60 { --g: 60%; } .g80 { --g: 80%; }
.gates tbody th, .gates .gate, .gates .harm { font-family: var(--mono); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.gates tbody th { grid-column: 1; grid-row: 1; font-size: 1.02rem; }
.gates .gate { grid-column: 2; grid-row: 1; font-size: 1.45rem; line-height: 1; }
.gates .harm { grid-column: 3; grid-row: 1; font-size: 1.05rem; }
.gates .harm small { font-size: 0.74em; font-weight: 400; color: var(--ink-2); margin-right: 0.1em; }
.bars .tot small { font-size: 0.62em; font-weight: 400; color: var(--ink-2); margin-right: 0.1em; }
.gates .eg { grid-column: 1 / -1; grid-row: 2; font-size: 0.93rem; line-height: 1.4; }
.scale { display: flex; justify-content: space-between; margin-top: 0.35rem; font: 400 0.75rem/1.3 var(--mono); color: var(--ink-2); }

/* Cost charts: rows sorted by total, the bar is the total, the shortest bar wins.
   Bars grow from one baseline; the winner is violet and says so, the rest are one gray. */
.chart { align-self: start; padding-top: 1.3rem; }
.est {
  display: inline-block; padding: 0.14rem 0.62rem 0.18rem; margin-bottom: 0.85rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font: 400 0.75rem/1.4 var(--mono); color: var(--ink);
}
.chart .task { color: var(--ink); font-size: 1rem; }
.chart .def { font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); margin-top: 0.35rem; }
.chart figcaption { margin-top: 0.9rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink-2); }
.bars { list-style: none; padding: 0; margin: 0; display: grid; row-gap: 0.7rem; }
.def + .bars { margin-top: 1.1rem; }
.bars li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 0.6rem; align-items: baseline;
  grid-template-areas: "who tag tot" "len len len" "score score call";
}
.bars .who { grid-area: who; color: var(--ink); font-size: 0.95rem; line-height: 1.25; }
.bars .who small { margin-left: 0.2em; font-size: 0.84em; color: var(--ink-2); white-space: nowrap; }
.bars .tot { grid-area: tot; text-align: right; font: 700 1.25rem/1 var(--mono); letter-spacing: -0.03em; color: var(--ink-body); font-variant-numeric: tabular-nums; }
.bars .win .tot { color: var(--ink); }
.bars .len { grid-area: len; display: block; height: 8px; margin: 0.32rem 0 0.26rem; }
.bars svg { display: block; overflow: visible; }
.bars rect { fill: var(--bar); }
.bars .win rect { fill: var(--violet); }
.bars .score, .bars .call { font: 400 0.75rem/1.3 var(--mono); color: var(--ink-2); }
.bars .score { grid-area: score; }
.bars .call { grid-area: call; text-align: right; }
.tag {
  grid-area: tag; align-self: center; padding: 0.08rem 0.5rem 0.12rem;
  background: var(--violet-deep); border: 1px solid var(--violet); border-radius: 999px;
  font: 400 0.75rem/1.3 var(--mono); color: var(--ink); white-space: nowrap;
}
.usage .mode { align-self: flex-start; margin-top: 1.1rem; }
.usage .bars { margin-top: 1.1rem; min-height: 7.4rem; align-content: start; }
.usage:has(#when-late:checked) .u-early, .usage:not(:has(#when-late:checked)) .u-late { display: none; }
.usage figcaption { margin-top: 0.6rem; }

/* Status line states, as pills */
.states { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.states li { display: grid; grid-template-columns: 8.5rem auto; align-items: center; gap: 1rem; }
.states .say { color: var(--ink-2); font-size: 0.93rem; }
.states code {
  justify-self: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.84rem;
  white-space: pre;
}
.mark { font-family: "Ghost Mark", var(--mono); }
.seg { color: var(--st-idle); }
.seg.run { color: var(--st-run); }
.seg.amber .mark { color: var(--st-amber); }

/* Install. Steps and requirements on one side, the release files on the other. Download
   controls stay off until release.js names a release. */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr);
  padding: 0.8rem 0 0.9rem;
}
.steps li::marker { content: none; }
.steps li > p:first-child::before { content: counter(step); float: left; width: 2.1rem; margin-left: -2.1rem; font: 700 1.15rem/1.45 var(--mono); color: var(--ink); }
.steps li > * { grid-column: 2; }
.steps .cmd { margin-top: 0.5rem; }
.get-cols { display: grid; gap: 2.4rem; }
.get-col { min-width: 0; }
:where(.get-col) > * + * { margin-top: var(--flow); }
.get-col > h3:not(:first-child) { margin-top: 2.2rem; }
.get-col > h3 + * { margin-top: 0.7rem; }
.needs { font-size: 0.95rem; }
.release-state { font-size: 0.9rem; color: var(--ink-2); }
.dl { list-style: none; padding: 0; }
.dl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; padding: 0.62rem 0; }
.dl .what { color: var(--ink); line-height: 1.3; }
.dl .file { grid-column: 1; font-size: 0.8rem; color: var(--ink-2); overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl .dl-btn { grid-column: 2; grid-row: 1 / span 2; }
.dl .sum { grid-column: 1 / -1; margin-top: 0.3rem; font-size: 0.75rem; color: var(--ink-2); }
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 1.1rem;
  background: var(--violet); color: var(--ink); border: 1px solid var(--violet); border-radius: 999px;
  font: 400 0.8rem/1 var(--mono); text-decoration: none; white-space: nowrap;
  transition: scale 0.35s var(--spring), background 0.2s var(--out);
}
.dl-btn:hover { background: #6346d4; color: var(--ink); }
.dl-btn:active { scale: 0.965; }
.dl-btn[aria-disabled="true"], .dl-btn[aria-disabled="true"]:hover { background: none; border-color: var(--line); color: var(--ink-2); cursor: default; scale: 1; }
.get-links { display: flex; flex-wrap: wrap; gap: 0.1rem 1.6rem; font: 400 0.84rem/1.6 var(--mono); }
.get-links a { padding-block: 0.2rem; }
.get-links a[aria-disabled="true"] { color: var(--ink-2); text-decoration: none; cursor: default; }
.get .cmd pre { font-size: 0.8rem; line-height: 1.7; }
.get .wrap > .small { max-width: 46rem; margin-top: 2.4rem; }
.first-run { margin-top: 0.7rem; }
.first-run > summary {
  display: inline-flex; align-items: center; gap: 0.6ch;
  min-height: 44px; padding: 0 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font: 400 0.84rem/1.2 var(--mono); color: var(--ink);
  cursor: pointer; list-style: none;
  transition: background 0.2s var(--out), border-color 0.2s var(--out);
}
.first-run > summary::-webkit-details-marker { display: none; }
.first-run > summary::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.first-run > summary:hover { background: var(--surface-hi); }
.first-run[open] > summary { border-color: var(--violet); }
.out { margin-top: 0.8rem; }
.out pre {
  padding: 0.9rem 1rem; background: var(--ground); border: 1px solid var(--line); border-radius: 4px;
  font-size: 0.76rem; line-height: 1.65; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* The island: a pill dock fixed to the top once the page scrolls. Section dots with a liquid
   focus dot, the section's name, and the way to the install steps. */
.island {
  position: fixed; z-index: 20; top: 12px; left: 50%; translate: -50% 0;
  display: flex; align-items: center; height: 46px; max-width: calc(100vw - 24px); padding: 0 5px 0 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.55);
  transition: opacity 0.25s var(--out), translate 0.5s var(--spring), visibility 0s;
}
.island:not(.on) { opacity: 0; translate: -50% -14px; visibility: hidden; transition: opacity 0.2s var(--out), translate 0.3s var(--out), visibility 0s linear 0.3s; }
.isl-home { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; }
.isl-home img { display: block; width: 20px; height: 20px; }
.island .dots { position: relative; margin-inline: 2px; }
.island ol { display: flex; list-style: none; margin: 0; padding: 0; }
.island ol a { position: relative; display: grid; place-items: center; width: 24px; height: 44px; }
.island ol a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); transition: background 0.2s var(--out), transform 0.3s var(--spring); }
.island ol a:hover::before { background: var(--ink); transform: scale(1.3); }
.island ol a:focus-visible { outline-offset: -8px; border-radius: 999px; }
.island ol a::after {
  content: attr(aria-label);
  position: absolute; z-index: 2; top: calc(100% + 6px); left: 50%; translate: -50% -3px;
  padding: 0.28rem 0.7rem;
  background: var(--surface-hi); border: 1px solid var(--line); border-radius: 999px;
  font: 400 12px/1.2 var(--mono); color: var(--ink); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s var(--out), translate 0.25s var(--out);
}
.island ol a:hover::after, .island ol a:focus-visible::after { opacity: 1; translate: -50% 0; }
.island .focus { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 0.18s var(--out); }
.island.ready .focus { opacity: 1; }
.focus circle { fill: var(--violet); transform: translate(var(--x, 0px), 22px); transition: transform 0.42s var(--out); }
.focus .trail { transition-duration: 0.78s; }
.isl-label { display: none; overflow: hidden; width: var(--lw, 0px); white-space: nowrap; font: 400 12px/1 var(--mono); color: var(--ink); transition: width 0.5s var(--spring); }
.isl-label span { display: inline-block; padding: 0 12px 0 6px; }
.isl-cta {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  background: var(--violet); color: var(--ink); border-radius: 999px; font: 400 0.8rem/1 var(--mono); text-decoration: none;
  transition: background 0.2s var(--out), scale 0.35s var(--spring);
}
.isl-cta:hover { background: #6346d4; color: var(--ink); }
.isl-cta:active { scale: 0.965; }
/* At the install steps the dock's own name says it. */
.island.end .isl-cta { display: none; }
.island.end .isl-label span { padding-right: 14px; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.92rem; }
.foot-in { display: flex; gap: 1.2rem; align-items: flex-start; padding-block: 2.6rem 3rem; }
.site-foot p + p { margin-top: 0.4rem; }
.site-foot .small { font-size: 0.82rem; max-width: 44rem; }
.site-foot cite { color: inherit; }
.foot-g { flex: none; width: 32px; height: 32px; }

@media (max-width: 760px) {
  .topnav a:not(.nav-cta) { display: none; }
}

@media (max-width: 480px) {
  :root { --flow: 0.8rem; }
  body { font-size: 1rem; line-height: 1.56; }
  .lede { margin-top: 1rem; font-size: 1.05rem; }
  .cta { gap: 0.7rem 1.3rem; margin-top: 1.3rem; }
  .get .cmd pre { font-size: 0.76rem; }
  .dl-btn { padding: 0 0.95rem; }
  .steps .cmd, .steps .first-run { grid-column: 1 / -1; }
  .states li { grid-template-columns: 1fr; gap: 0.3rem; }
  .cmd pre { padding: 0.7rem 0.75rem 0.5rem; font-size: 0.78rem; }
  /* On a phone the command gets the full width and its button sits under it. */
  .cmd { flex-direction: column; align-items: stretch; }
  .copy-btn { align-self: flex-end; min-width: 3.9rem; margin: 0 7px 7px 0; padding-inline: 0.7rem; }
  .axis .odd { display: none; }
  .mode label { padding: 0 0.85rem; }
}

@media (max-width: 360px) {
  .states code { padding-inline: 0.7rem; font-size: 12px; }
  .mode label { padding: 0 0.6rem; font-size: 0.76rem; }
}

@media (min-width: 620px) {
  .said-by > div { grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0.9rem; }
  .said-by dt { padding-top: 0.2em; }
  .qt { display: block; margin-left: 0; }
  .said { min-height: 10.9rem; }
  .readout { grid-template-areas: "ctl score" "say parts"; column-gap: clamp(1.4rem, 3vw, 2.8rem); }
  .tally { justify-self: end; }
  .mode-say { min-height: 3em; }
  .tally .num { font-size: clamp(3.4rem, 5.4vw, 4.2rem); }
  .isl-label { display: block; }
}

/* Between a phone and the two-column hero, the frame and what was said sit side by side. */
@media (min-width: 620px) and (max-width: 1023.98px) {
  .screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .frame { align-self: start; border-radius: 3px 0 0 3px; }
  .said-by > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .said-by dt { padding-top: 0; }
  .qt { display: inline; margin-left: 0.6em; }
}

@media (min-width: 860px) {
  .lockup { --u: 4px; }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 5.5vw, 96px); }
  .tracks { padding-left: 4.6rem; }
  .tl { position: absolute; right: calc(100% + 14px); top: 50%; translate: 0 -50%; margin: 0; white-space: nowrap; }
  .strip .lane-in { height: 52px; }
  .wave .lane-in { height: 36px; }
  /* The hand-off laid out left to right. */
  .hops { --pill: 52px; --gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; }
  .pill { padding: 0 1.3rem; font-size: 1rem; }
  .haiku .pill { padding-left: 0.55rem; }
  .haiku .at { justify-content: center; }
  .model .at { justify-content: flex-end; }
  .hop p { max-width: 19.5rem; margin: 0.85rem 0 0; }
  .haiku p { margin-inline: auto; text-align: center; }
  .model p { margin-left: auto; text-align: right; }
  .hop:not(:last-child)::before, .wire { left: 0; width: calc(150% + var(--gap)); height: 1px; }
  .haiku::before, .haiku .wire { left: 50%; }
  .wire { height: 2px; margin: -0.5px 0 0; }
  .wire i { --far: 100% 0; }
  .wire i::after { left: -4px; top: -3px; }
  .relay .rider { --u: 4px; }
  .get-cols { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); column-gap: clamp(48px, 5.5vw, 96px); }
}

@media (min-width: 860px) and (pointer: fine) {
  .step { display: none; }
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 482px); column-gap: clamp(40px, 5vw, 88px); row-gap: 1rem;
    grid-template-areas: "pitch screen" "readout readout" "tracks tracks" "note note";
  }
  .pitch { grid-area: pitch; align-self: center; }
  .screen { grid-area: screen; }
  .readout { grid-area: readout; }
  .tracks { grid-area: tracks; }
  .film-note { grid-area: note; }
  .cues { display: block; position: absolute; inset: 0; pointer-events: none; clip-path: inset(-6px calc((100 - var(--p)) * 1%) -6px 0); }
  .cues span {
    position: absolute; top: 50%; translate: 0 -50%; padding: 0.08rem 0.5rem 0.14rem;
    background: var(--ground); border: 1px solid var(--violet); border-radius: 999px;
    font: 400 0.75rem/1.3 var(--mono); color: var(--ink); white-space: nowrap;
  }
  .c1 { left: 6.04%; } .c2 { left: 20.96%; } .c3 { left: 58.35%; } .c4 { right: 0; }
  .readout { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ctl say score parts"; }
  h1 { font-size: min(4.5vw, 4.1rem); }
  .sec-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: clamp(48px, 5.5vw, 96px); align-items: end; }
}

/* Motion that only runs when the script has checked the reader allows it (html.anim). */
html.anim { scroll-behavior: smooth; }
html.anim :is(.hl, .sec > .wrap)::before { transition: clip-path 1.1s var(--out); clip-path: inset(0 0 0 0); }
html.anim :is(.hl, .sec > .wrap):not(.in)::before { clip-path: inset(0 calc(100% - 24px) 0 0); }
html.anim .grid > :nth-child(2)::before, html.anim .wont > :nth-child(2)::before, html.anim .steps > :nth-child(2)::before { transition-delay: 0.07s; }
html.anim .grid > :nth-child(3)::before, html.anim .wont > :nth-child(3)::before, html.anim .steps > :nth-child(3)::before { transition-delay: 0.14s; }
html.anim .wont > :nth-child(n + 4)::before { transition-delay: 0.2s; }
html.anim .bars rect.b { transform-box: fill-box; transform-origin: 0 50%; transition: transform 0.9s cubic-bezier(0.3, 0.6, 0.3, 1); }
html.anim .chart:not(.in) rect.b { transform: scaleX(0); }
html.anim .tag { transition: opacity 0.35s var(--out) var(--tag-delay, 0.5s), translate 0.5s var(--spring) var(--tag-delay, 0.5s); }
html.anim .chart:not(.in) .tag { opacity: 0; translate: -6px 0; }
html.anim .g.blink .lid { animation: lids 0.3s steps(1); }

/* The two answers under the abilities come back once, when their box is on screen. The clip is
   scanned to the pin at a steady speed, then the frame sharpens and the words arrive; the
   recording is played through, and each line arrives as the playhead reaches its time. */
html.anim .result:not(.in) :is(.vid-said, .vid-frame img, .aud-lines li, .aud-marks i) { opacity: 0; }
html.anim .result:not(.in) .vid-scan { background-position: 0% 100%; }
html.anim .result:not(.in) .vid-run { transform: translateX(0); }
html.anim .result:not(.in) .aud-lit { clip-path: inset(0 100% 0 0); }
html.anim .vid.in .vid-scan { animation: vid-scan 1.4s steps(15, jump-none) 0.2s both; }
html.anim .vid.in .vid-run { animation: vid-run 1.4s linear 0.2s both; }
html.anim .vid.in .vid-frame img { animation: come 0.35s var(--out) 1.6s both; }
html.anim .vid.in .vid-said { animation: arrive 0.5s var(--out) 1.75s both; }
html.anim .aud.in .aud-lit { animation: aud-lit 1.6s linear 0.2s both; }
html.anim .aud.in .aud-head { animation: aud-head 1.6s linear 0.2s both; }
html.anim .aud.in .aud-marks i:nth-child(1) { animation: come 0.4s var(--out) 0.2s both; }
html.anim .aud.in .aud-lines li:nth-child(1) { animation: arrive 0.5s var(--out) 0.2s both; }
html.anim .aud.in .aud-marks i:nth-child(2) { animation: come 0.4s var(--out) 1.1s both; }
html.anim .aud.in .aud-lines li:nth-child(2) { animation: arrive 0.5s var(--out) 1.1s both; }
@keyframes vid-scan { from { background-position: 0% 100%; } to { background-position: 100% 100%; } }
@keyframes vid-run { from { transform: translateX(0); } to { transform: translateX(62.22%); } }
@keyframes come { from { opacity: 0; } }
@keyframes aud-lit { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes aud-head { 0% { transform: translateX(0); opacity: 1; } 95% { transform: translateX(100%); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes lids { 0%, 100% { opacity: 0; } 20%, 60% { opacity: 1; } }

/* The film arrives once the script has set it to "Claude alone", so the first thing it does is
   the sweep. If the script never runs, it shows itself after a moment, complete. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.film-ready) .film :is(.screen, .readout, .tracks, .film-note) { animation: arrive 0.6s var(--out) 2.5s both; }
  html.film-ready .film :is(.screen, .readout, .tracks, .film-note) { animation: arrive 0.7s var(--out) both; }
  html.film-ready .film .readout { animation-delay: 0.08s; }
  html.film-ready .film .tracks { animation-delay: 0.16s; }
  html.film-ready .film .film-note { animation-delay: 0.24s; }
}
@keyframes arrive { from { opacity: 0; translate: 0 10px; } }

/* The hand-off plays once when it scrolls into view, and again on Replay: under five seconds, every
   part on one clock. 0-8% rest · 8-24% the ghost rides to the Haiku and the first wire follows
   it · 26-40% the second wire reaches the other model · 40-64% it works · 64-84% the reply comes
   back through the Haiku · then it holds the still frame. --rx, --ry and --rs (set by page.js)
   say where the Haiku's seat is. */
html.anim .relay { --loop: 4.8s; }
html.anim .relay.play .rider { display: block; animation: ride var(--loop) linear both; }
@keyframes ride {
  0%, 8% { translate: 0 0; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  24% { translate: var(--rx, 0px) var(--ry, 0px); scale: var(--rs, 0.667); opacity: 1; animation-timing-function: linear; }
  27%, 100% { translate: var(--rx, 0px) var(--ry, 0px); scale: var(--rs, 0.667); opacity: 0; }
}
html.anim .relay.play .seat { animation: seat var(--loop) linear both; }
@keyframes seat { 0%, 23.5% { opacity: 0; } 27%, 100% { opacity: 1; } }
html.anim .relay.play .haiku .pill { animation: possess var(--loop) linear both; }
@keyframes possess {
  0%, 22% { background-color: var(--surface); border-color: var(--line); }
  27%, 100% { background-color: var(--violet-deep); border-color: var(--violet); }
}
html.anim .relay.play .claude .wire { animation: wire-a var(--loop) linear both; }
@keyframes wire-a {
  0%, 8% { scale: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  24%, 100% { scale: 1; }
}
html.anim .relay.play .haiku .wire { animation: wire-b var(--loop) linear both; }
@keyframes wire-b {
  0%, 26% { scale: 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  40%, 100% { scale: 1; }
}
html.anim .relay.play .haiku .wire i { animation: reply-b var(--loop) linear both; }
@keyframes reply-b {
  0%, 63% { opacity: 0; translate: var(--far); }
  64% { opacity: 1; translate: var(--far); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  73% { opacity: 1; translate: 0 0; }
  74%, 100% { opacity: 0; translate: 0 0; }
}
html.anim .relay.play .claude .wire i { animation: reply-a var(--loop) linear both; }
@keyframes reply-a {
  0%, 73% { opacity: 0; translate: var(--far); }
  74% { opacity: 1; translate: var(--far); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  83% { opacity: 1; translate: 0 0; }
  84%, 100% { opacity: 0; translate: 0 0; }
}
html.anim .relay.play .model .pill { animation: wake var(--loop) linear both; }
@keyframes wake { 0%, 37% { border-color: var(--line); } 41%, 100% { border-color: var(--violet); } }
html.anim .relay.play .swap .live { animation: live var(--loop) linear both; }
@keyframes live { 0%, 38% { opacity: 0; } 43%, 100% { opacity: 1; } }
html.anim .relay.play .swap .idle { animation: idle var(--loop) linear both; }
@keyframes idle { 0%, 37% { opacity: 1; } 41%, 100% { opacity: 0; } }
html.anim .relay.play .back { animation: back var(--loop) linear both; }
@keyframes back { 0%, 83% { opacity: 0; translate: -8px 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 92%, 100% { opacity: 1; translate: 0 0; } }
html.anim .relay.play .pip { animation: got var(--loop) linear both; }
@keyframes got { 0%, 82% { scale: 1; } 85% { scale: 1.9; } 90%, 100% { scale: 1; } }
/* Before its first play, with motion allowed, the hand-off waits at rest. */
html.anim .relay:not(.play):not(.done) .seat { opacity: 0; }
html.anim .relay:not(.play):not(.done) .haiku .pill { background-color: var(--surface); border-color: var(--line); }
html.anim .relay:not(.play):not(.done) .model .pill { border-color: var(--line); }
html.anim .relay:not(.play):not(.done) .wire { scale: 0; }
html.anim .relay:not(.play):not(.done) .swap .live { opacity: 0; }
html.anim .relay:not(.play):not(.done) .swap .idle { opacity: 1; }
html.anim .relay:not(.play):not(.done) .rider { display: block; }
html.anim .relay:not(.play):not(.done) .back { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .tracks, .film.js .tracks, .screen, .mode-thumb, .island, .isl-label, .focus circle, .ev::before, .evs-lit i::before,
  .btn, .dl-btn, .copy-btn, .isl-cta, .step-btn, .topnav .nav-cta, .island ol a::before, .island ol a::after { transition: none; }
  .frame img, .frame canvas, .unseen { transition: none; }
  .tally .num.tick { animation: none; }
}

/* Forced colors drop backgrounds; keep the marks that carry data. */
@media (forced-colors: active) {
  .gates tbody tr::before, .gates tbody tr::after, .head-line { background: Highlight; }
  .bars rect, .bill-bar .b1 { fill: CanvasText; }
  .bars .win rect, .focus circle, .bill-bar .b3 { fill: Highlight; }
  .island ol a::before { background: CanvasText; }
  .tag, .copy-btn, .btn, .dl-btn, .isl-cta, .mode-thumb { border: 1px solid ButtonText; }
  .wire { background: Highlight; }
  .ev.hit::before { background: CanvasText; }
  .evs-lit i::before { background: Highlight; }
  .w-dim { stroke: CanvasText; }
  .w-lit { stroke: Highlight; }
}

@media print {
  html.anim .bars rect.b { transform: none !important; }
  html.anim .tag { opacity: 1 !important; }
  .island { display: none; }
}