From 7335196fada0d238ea27201717fe062693e29c6c Mon Sep 17 00:00:00 2001
From: Nayan <xNayanKumar@gmail.com>
Date: Sat, 8 Aug 2026 15:24:00 +0530
Subject: [PATCH] feat(web): the hero stage and its airship mock

The hero is a mock of the editor rather than a screenshot: the same inspector
sections, dock, composer and picker chrome, rebuilt in React so it scales, scrubs
with scroll and stays legible at any width.

A screenshot would have been less code and would have been wrong within a week.
---
 .../hero/airship-mock/agent-timeline.tsx      |   33 +
 .../hero/airship-mock/bottom-bar.tsx          |   70 +
 .../hero/airship-mock/composer-field.tsx      |   40 +
 .../hero/airship-mock/design-dock.tsx         |  214 ++
 .../hero/airship-mock/diff-card.tsx           |   29 +
 .../hero/airship-mock/editor-glyph.tsx        |   40 +
 .../hero/airship-mock/inline-overlay.tsx      |   36 +
 .../hero/airship-mock/inspector-controls.tsx  |  161 ++
 .../hero/airship-mock/inspector-section.tsx   |   38 +
 .../hero/airship-mock/mock-page.tsx           |   56 +
 .../hero/airship-mock/picker-overlay.tsx      |   41 +
 .../src/components/hero/browser-window.tsx    |  113 +
 .../src/components/hero/desktop-backdrop.tsx  |   20 +
 apps/web/src/components/hero/hero-stage.tsx   |  131 ++
 apps/web/src/components/hero/mock-cursor.tsx  |   29 +
 apps/web/src/lib/hero-measure.ts              |   46 +
 apps/web/src/lib/hero-scale.ts                |   61 +
 apps/web/src/lib/measure-hero.ts              |  146 ++
 apps/web/src/lib/use-frame-scrub.ts           |   69 +
 .../src/lib/use-isomorphic-layout-effect.ts   |   12 +
 apps/web/src/styles/hero-desktop.css          |  316 +++
 apps/web/src/styles/hero-overlay.css          | 1147 +++++++++++
 apps/web/src/styles/hero-timeline.css         | 1813 +++++++++++++++++
 23 files changed, 4661 insertions(+)
 create mode 100644 apps/web/src/components/hero/airship-mock/agent-timeline.tsx
 create mode 100644 apps/web/src/components/hero/airship-mock/bottom-bar.tsx
 create mode 100644 apps/web/src/components/hero/airship-mock/composer-field.tsx
 create mode 100644 apps/web/src/components/hero/airship-mock/design-dock.tsx
 create mode 100644 apps/web/src/components/hero/airship-mock/diff-card.tsx
 create mode 100644 apps/web/src/components/hero/airship-mock/editor-glyph.tsx
 create mode 100644 apps/web/src/components/hero/airship-mock/inline-overlay.tsx
 create mode 100644 apps/web/src/components/hero/airship-mock/inspector-controls.tsx
 create mode 100644 apps/web/src/components/hero/airship-mock/inspector-section.tsx
 create mode 100644 apps/web/src/components/hero/airship-mock/mock-page.tsx
 create mode 100644 apps/web/src/components/hero/airship-mock/picker-overlay.tsx
 create mode 100644 apps/web/src/components/hero/browser-window.tsx
 create mode 100644 apps/web/src/components/hero/desktop-backdrop.tsx
 create mode 100644 apps/web/src/components/hero/hero-stage.tsx
 create mode 100644 apps/web/src/components/hero/mock-cursor.tsx
 create mode 100644 apps/web/src/lib/hero-measure.ts
 create mode 100644 apps/web/src/lib/hero-scale.ts
 create mode 100644 apps/web/src/lib/measure-hero.ts
 create mode 100644 apps/web/src/lib/use-frame-scrub.ts
 create mode 100644 apps/web/src/lib/use-isomorphic-layout-effect.ts
 create mode 100644 apps/web/src/styles/hero-desktop.css
 create mode 100644 apps/web/src/styles/hero-overlay.css
 create mode 100644 apps/web/src/styles/hero-timeline.css

diff --git a/apps/web/src/components/hero/airship-mock/agent-timeline.tsx b/apps/web/src/components/hero/airship-mock/agent-timeline.tsx
new file mode 100644
index 0000000..637fe82
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/agent-timeline.tsx
@@ -0,0 +1,33 @@
+import { MOCK_TOOL_CALLS } from "#/content/mock-page";
+
+/**
+ * The agent's tool calls, streaming.
+ *
+ * Rendered in Claude Code's own transcript grammar — a filled marker and a bold
+ * tool name for the call, an indented `⎿` elbow for its result — because that is
+ * exactly what airship's real overlay renders. Someone who has used the tool
+ * should recognise this before they read a word of it.
+ *
+ * Every row is present in the DOM from the start and revealed by the timeline;
+ * nothing is mounted or unmounted, so the transcript's height never jumps
+ * mid-stream.
+ */
+export function AgentTimeline() {
+  return (
+    <div className="ap-tl">
+      {MOCK_TOOL_CALLS.map((call, index) => (
+        <div key={call.tool + call.args}>
+          <div className={`ap-tl-head ap-tl-head-${index + 1}`}>
+            <span className="ap-tl-marker">&#9679;</span>
+            <span className="ap-tl-tool">{call.tool}</span>
+            <span className="ap-tl-args">{call.args}</span>
+          </div>
+          <div className={`ap-tl-res ap-tl-res-${index + 1}`}>
+            <span className="ap-tl-elbow">&#8971;</span>
+            <span>{call.result}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/hero/airship-mock/bottom-bar.tsx b/apps/web/src/components/hero/airship-mock/bottom-bar.tsx
new file mode 100644
index 0000000..3c2ac98
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/bottom-bar.tsx
@@ -0,0 +1,70 @@
+import { EditorGlyph } from "#/components/hero/airship-mock/editor-glyph";
+
+/**
+ * The floating bottom bar.
+ *
+ * Compact and understated on purpose: a small radius, a hairline border and a
+ * ring rather than a pill with a drop shadow. It is the one piece of chrome that
+ * is always on screen, and the version of it that announces itself gets tiring
+ * within a minute.
+ *
+ * Left to right: undo/redo, the tool group, inspect, the Edit|View toggle, and
+ * the pending-tweak counter — which is the only thing on the bar that moves.
+ */
+export function BottomBar() {
+  return (
+    <div className="ap-bar">
+      <span className="ap-tool-group">
+        <span className="ap-tool">
+          <EditorGlyph name="undo" size={20} />
+        </span>
+      </span>
+
+      <span className="ap-bar-sep" />
+
+      <span className="ap-tool-group">
+        <span className="ap-tool ap-tool-on">
+          <EditorGlyph name="cursor" size={20} />
+        </span>
+        <span className="ap-tool">
+          <EditorGlyph name="hand" size={20} />
+        </span>
+        <span className="ap-tool">
+          <EditorGlyph name="text" size={20} />
+        </span>
+      </span>
+
+      <span className="ap-bar-sep" />
+
+      <span className="ap-tool-group">
+        <span className="ap-tool">
+          <EditorGlyph name="inspect" size={20} />
+        </span>
+      </span>
+
+      <span className="ap-bar-sep" />
+
+      <span className="ap-seg-group">
+        <span className="ap-seg ap-seg-on">
+          <EditorGlyph name="edit" size={14} />
+          Edit
+        </span>
+        <span className="ap-seg">
+          <EditorGlyph name="view" size={14} />
+          View
+        </span>
+      </span>
+
+      {/*
+        Collapsed to zero width until the first tweak lands, so the bar has no
+        empty slot waiting to be filled — it simply grows.
+      */}
+      <span className="ap-tweak-badge-wrap">
+        <span className="ap-tweak-badge">
+          <span className="ap-tweak-count-1">1</span>
+          <span className="ap-tweak-count-2">2</span>
+        </span>
+      </span>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/hero/airship-mock/composer-field.tsx b/apps/web/src/components/hero/airship-mock/composer-field.tsx
new file mode 100644
index 0000000..4c92542
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/composer-field.tsx
@@ -0,0 +1,40 @@
+import { EditorGlyph } from "#/components/hero/airship-mock/editor-glyph";
+import { MOCK_PROMPT, MOCK_SELECTION } from "#/content/mock-page";
+
+/**
+ * Where you say what you want.
+ *
+ * One bordered box holding the selection chip, the prompt and the send button —
+ * which is the shape of airship's real composer, and the shape of the claim: the
+ * chip says *what*, the sentence says *what about it*, and that is the entire
+ * interface.
+ *
+ * The prompt is real text clipped from the right by the timeline rather than a
+ * string assembled by a timer. That keeps the typing honest under the pause
+ * button and under `prefers-reduced-motion`, and means it costs nothing when the
+ * hero is scrolled out of view.
+ */
+export function ComposerField() {
+  return (
+    <div className="ap-composer">
+      <div className="ap-field">
+        <div className="ap-chips">
+          <span className="ap-sel-chip">
+            {MOCK_SELECTION.tag}
+            <span className="ap-chip-x">&#215;</span>
+          </span>
+        </div>
+
+        <div className="ap-input">
+          <span className="ap-placeholder">Describe the change…</span>
+          <span className="ap-typed">{MOCK_PROMPT}</span>
+          <span className="ap-caret" />
+        </div>
+
+        <span className="ap-send">
+          <EditorGlyph name="chevronUp" size={16} />
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/hero/airship-mock/design-dock.tsx b/apps/web/src/components/hero/airship-mock/design-dock.tsx
new file mode 100644
index 0000000..62ff265
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/design-dock.tsx
@@ -0,0 +1,214 @@
+import { AgentTimeline } from "#/components/hero/airship-mock/agent-timeline";
+import { ComposerField } from "#/components/hero/airship-mock/composer-field";
+import { DiffCard } from "#/components/hero/airship-mock/diff-card";
+import { EditorGlyph } from "#/components/hero/airship-mock/editor-glyph";
+import {
+  NumField,
+  PaintRow,
+  Segmented,
+  Select,
+  SwapValue,
+} from "#/components/hero/airship-mock/inspector-controls";
+import { InspectorSection } from "#/components/hero/airship-mock/inspector-section";
+import { MOCK_PROMPT, MOCK_SELECTION, MOCK_STATUS } from "#/content/mock-page";
+import { TWEAKS } from "#/content/timeline";
+
+/*
+ * The nine align cells, in the real panel's order: horizontal, vertical, then
+ * distribute-and-tidy.
+ */
+const ALIGN_GROUPS = [
+  ["alignLeft", "alignCenterH", "alignRight"],
+  ["alignTop", "alignCenterV", "alignBottom"],
+  ["distributeH", "distributeV", "tidy"],
+] as const;
+
+const TABS = [
+  { glyph: "logo", label: "Agent" },
+  { glyph: "design", label: "Edit" },
+  { glyph: "code", label: "CSS" },
+  { glyph: "layers", label: "DOM" },
+] as const;
+
+/**
+ * One dock, four tabs.
+ *
+ * ── A deliberate departure from the real editor ──────────────────────────────
+ * airship actually runs TWO docks: chat on the left at 340px, inspector on the
+ * right at 360px. This mock folds the chat in as an *Agent* tab instead.
+ *
+ * That is a simplification for the hero specifically, and it is worth being
+ * honest about. Two 200px panels flanking a 285px strip of page reads as clutter
+ * at this render scale, and it splits attention exactly where the page is trying
+ * to make one point. One panel with the agent in front says the same thing more
+ * quietly — and the Edit / CSS / DOM tabs beside it still show that a full
+ * inspector is part of the product.
+ *
+ * Everything INSIDE the tabs is transcribed 1:1 as usual. It is the arrangement
+ * that is editorial, not the components.
+ */
+export function DesignDock() {
+  return (
+    <div className="ap-dock ap-dock-right">
+      <div className="ap-head">
+        <span className="ap-brand">
+          <EditorGlyph name="logo" size={20} />
+          <span className="ap-brand-name">Airship</span>
+        </span>
+        <span className="ap-head-actions">
+          <span className="ap-iconbtn">
+            <EditorGlyph name="plus" size={16} />
+          </span>
+          <span className="ap-iconbtn">
+            <EditorGlyph name="panelRight" size={16} />
+          </span>
+        </span>
+      </div>
+
+      {/*
+        Empty and filled states stack in one relative box and cross-fade, so
+        neither ever reflows the dock.
+      */}
+      <div className="ap-insp-stage">
+        <div className="ap-empty ap-insp-empty">
+          <EditorGlyph className="ap-empty-art" name="logo" size={48} />
+          <span className="ap-empty-title">Ask airship to change anything</span>
+          <span className="ap-empty-body">
+            Pick an element first to scope it.
+          </span>
+        </div>
+
+        <div className="ap-insp ap-insp-filled">
+          <div className="ap-insp-tabs">
+            {TABS.map((tab) => (
+              <span
+                className={`ap-insp-tab ap-tab-${tab.label.toLowerCase()}`}
+                key={tab.label}
+              >
+                <EditorGlyph name={tab.glyph} size={18} />
+                {tab.label}
+              </span>
+            ))}
+          </div>
+
+          {/* Both tab bodies stacked; the timeline decides which is in front. */}
+          <div className="ap-tab-stage">
+            <div className="ap-tab-body ap-tab-body-agent">
+              <div className="ap-transcript">
+                <div className="ap-msg-user">{MOCK_PROMPT}</div>
+
+                <div className="ap-msg-assistant">
+                  <AgentTimeline />
+
+                  <div className="ap-turn-status">
+                    <span className="ap-dot" />
+                    {/* Both labels in one grid cell, so the row does not
+                        re-wrap when "Applying…" becomes "Done". */}
+                    <span className="ap-status-label">
+                      <span className="ap-status-working">
+                        {MOCK_STATUS.working}
+                      </span>
+                      <span className="ap-status-done">{MOCK_STATUS.done}</span>
+                    </span>
+                  </div>
+
+                  <DiffCard />
+                </div>
+              </div>
+
+              <ComposerField />
+            </div>
+
+            <div className="ap-tab-body ap-tab-body-edit">
+              <div className="ap-insp-scroll">
+                <InspectorSection className="ap-insp-row" label="Source">
+                  <span className="ap-src">
+                    {MOCK_SELECTION.sourceFile}:{MOCK_SELECTION.sourceLine}
+                  </span>
+                </InspectorSection>
+
+                <div className="ap-align-row ap-insp-row">
+                  {ALIGN_GROUPS.map((group) => (
+                    <span className="ap-align-grp" key={group[0]}>
+                      {group.map((glyph) => (
+                        <span className="ap-align-btn" key={glyph}>
+                          <EditorGlyph name={glyph} size={20} />
+                        </span>
+                      ))}
+                    </span>
+                  ))}
+                </div>
+
+                <InspectorSection className="ap-insp-row" label="Size">
+                  <div className="ap-grid">
+                    <NumField letter="W" value="122" />
+                    <NumField letter="H" value="45" />
+                  </div>
+                </InspectorSection>
+
+                <InspectorSection className="ap-insp-row" label="Auto layout" />
+
+                <InspectorSection className="ap-insp-row" label="Text" />
+
+                <InspectorSection className="ap-insp-row" label="Appearance">
+                  <div className="ap-grid">
+                    <NumField glyph="opacity" suffix="%" value="100" />
+                    <NumField
+                      className="ap-field-radius"
+                      glyph="radius"
+                      value={
+                        <SwapValue
+                          from={TWEAKS.radius.from}
+                          name="radius"
+                          to={TWEAKS.radius.to}
+                        />
+                      }
+                    />
+                  </div>
+                  <div className="ap-row">
+                    <span className="ap-row-label">Blend</span>
+                    <Select value="Normal" />
+                  </div>
+                </InspectorSection>
+
+                <InspectorSection className="ap-insp-row" label="Fill">
+                  <div className="ap-rows">
+                    <div className="ap-rows-row">
+                      <PaintRow
+                        alpha="100"
+                        hex={
+                          <SwapValue
+                            from={TWEAKS.fill.from}
+                            name="fill"
+                            to={TWEAKS.fill.to}
+                          />
+                        }
+                        hexClassName="ap-field-fill"
+                        swatchClassName="ap-swatch-fill"
+                      />
+                      <span className="ap-row-icon">
+                        <EditorGlyph name="minus" size={16} />
+                      </span>
+                    </div>
+                  </div>
+                </InspectorSection>
+
+                <InspectorSection className="ap-insp-row" label="Stroke">
+                  <div className="ap-row">
+                    <span className="ap-row-label">Position</span>
+                    <Segmented
+                      activeIndex={1}
+                      options={["In", "Center", "Out"]}
+                    />
+                  </div>
+                </InspectorSection>
+
+                <InspectorSection className="ap-insp-row" label="Effects" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/hero/airship-mock/diff-card.tsx b/apps/web/src/components/hero/airship-mock/diff-card.tsx
new file mode 100644
index 0000000..df8dc9c
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/diff-card.tsx
@@ -0,0 +1,29 @@
+import { MOCK_DIFF } from "#/content/mock-page";
+
+/**
+ * The diff the agent produced, before you accept it.
+ *
+ * Collapsed to `max-height: 0` rather than unmounted, so it can grow open on the
+ * timeline. The header carries the two things you check first — which file, and
+ * how much changed — and only then the body.
+ */
+export function DiffCard() {
+  return (
+    <div className="ap-diff">
+      <div className="ap-diff-head">
+        <span className="ap-diff-file">{MOCK_DIFF.file}</span>
+        <span className="ap-diff-stat">{MOCK_DIFF.stat}</span>
+      </div>
+      <div className="ap-diff-body">
+        {MOCK_DIFF.lines.map((line, index) => (
+          <div
+            className={`ap-diff-line ap-diff-${line.kind} ap-diff-line-${index + 1}`}
+            key={line.text}
+          >
+            {line.text}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/hero/airship-mock/editor-glyph.tsx b/apps/web/src/components/hero/airship-mock/editor-glyph.tsx
new file mode 100644
index 0000000..d03ead2
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/editor-glyph.tsx
@@ -0,0 +1,40 @@
+import { GLYPHS, type GlyphName } from "#/content/editor-glyphs";
+
+/**
+ * Every glyph in the hero's editor, rendered from one place.
+ *
+ * `aria-hidden` is not a prop: the entire hero is an illustration, and there is
+ * no glyph in it that carries meaning a screen reader should hear. Hard-coding
+ * it here means `noSvgWithoutTitle` is satisfied once rather than at twenty call
+ * sites, and it cannot be forgotten at the twenty-first.
+ *
+ * The body is injected as markup because the path data is vendored-shaped
+ * constant text; turning it into JSX elements would buy nothing and would let
+ * the formatter reflow coordinates that are meant to stay byte-stable.
+ */
+export function EditorGlyph({
+  className,
+  name,
+  size = 24,
+}: {
+  className?: string;
+  name: GlyphName;
+  size?: number;
+}) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="none"
+      height={size}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {/* biome-ignore lint/security/noDangerouslySetInnerHtml: GLYPHS is a
+          module-level constant of literal SVG markup, keyed by a union type —
+          there is no path through which caller input reaches this string. */}
+      <g dangerouslySetInnerHTML={{ __html: GLYPHS[name].body }} />
+    </svg>
+  );
+}
diff --git a/apps/web/src/components/hero/airship-mock/inline-overlay.tsx b/apps/web/src/components/hero/airship-mock/inline-overlay.tsx
new file mode 100644
index 0000000..4f07f55
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/inline-overlay.tsx
@@ -0,0 +1,36 @@
+import { BottomBar } from "#/components/hero/airship-mock/bottom-bar";
+import { DesignDock } from "#/components/hero/airship-mock/design-dock";
+import { MockPage } from "#/components/hero/airship-mock/mock-page";
+import { PickerOverlay } from "#/components/hero/airship-mock/picker-overlay";
+
+/**
+ * Airship in inline mode: the overlay injected straight into the running app.
+ *
+ * `.ap-mock` is authored at a fixed 1200×636 and shrunk with a single
+ * `transform: scale()`, so every number in hero-overlay.css is the real editor's
+ * number rather than a pre-divided one. It is also the scope the `--ap-*` editor
+ * palette is generated into, and — because it carries a transform — the
+ * containing block the docks position against.
+ *
+ * Order matters: the page paints first, the picker's chrome layer sits above it,
+ * and the docks sit above that. In the real overlay the same stack is enforced
+ * with z-index for the same reason — a selection outline drawn under a panel is
+ * a selection you cannot see.
+ *
+ * One dock, with the agent in front. The real editor runs two — chat left,
+ * inspector right — and folding them together is a deliberate simplification for
+ * the hero; see the note in design-dock.tsx. What is NOT negotiable is that the
+ * agent is the tab you land on: an earlier draft showed only the inspector and,
+ * without meaning to, argued that airship is a visual CSS editor that happens to
+ * write files.
+ */
+export function InlineOverlay() {
+  return (
+    <div className="ap-mock">
+      <MockPage />
+      <PickerOverlay />
+      <DesignDock />
+      <BottomBar />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/hero/airship-mock/inspector-controls.tsx b/apps/web/src/components/hero/airship-mock/inspector-controls.tsx
new file mode 100644
index 0000000..0fa9734
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/inspector-controls.tsx
@@ -0,0 +1,161 @@
+import type { ReactNode } from "react";
+import { EditorGlyph } from "#/components/hero/airship-mock/editor-glyph";
+import type { GlyphName } from "#/content/editor-glyphs";
+
+/*
+ * The four control primitives the inspector is built from.
+ *
+ * All static: this is a picture of a panel, not a panel. Nothing here takes an
+ * onChange, and the values that appear to change during the loop are driven by
+ * CSS on `.ap-ctl-value`, not by state — which is what lets the whole animation
+ * survive `animation-play-state: paused` and `prefers-reduced-motion` without a
+ * single line of JavaScript.
+ */
+
+/**
+ * A number field. Borderless until touched; the glyph is also the scrub handle,
+ * which is why it is 20px and sits inside the field rather than beside it.
+ *
+ * `letter` renders a mono character (W, H, X, Y) where the real panel has no
+ * pictogram for the property — the letter IS the icon there.
+ */
+export function NumField({
+  className,
+  glyph,
+  letter,
+  suffix,
+  value,
+  valueClassName,
+}: {
+  className?: string;
+  glyph?: GlyphName;
+  letter?: string;
+  suffix?: string;
+  value: ReactNode;
+  valueClassName?: string;
+}) {
+  return (
+    <div className={className ? `ap-ctl-num ${className}` : "ap-ctl-num"}>
+      <span className="ap-ctl-glyph">
+        {glyph ? <EditorGlyph name={glyph} size={20} /> : null}
+        {letter ? <span className="ap-ctl-glyph-txt">{letter}</span> : null}
+      </span>
+      <span
+        className={
+          valueClassName ? `ap-ctl-value ${valueClassName}` : "ap-ctl-value"
+        }
+      >
+        {value}
+      </span>
+      {suffix ? <span className="ap-ctl-suffix">{suffix}</span> : null}
+    </div>
+  );
+}
+
+/**
+ * A value that changes during the loop, rendered as both states at once.
+ *
+ * CSS cannot rewrite text, so the two readings are stacked in a single grid cell
+ * and cross-faded. The grid — rather than absolute positioning — is what makes
+ * the field size to the WIDER of the two ("9999", not "6"), so the panel does
+ * not reflow at the moment the value changes. That reflow is exactly the sort of
+ * thing that reads as a glitch rather than as an edit.
+ */
+export function SwapValue({
+  from,
+  name,
+  to,
+}: {
+  from: string;
+  name: string;
+  to: string;
+}) {
+  return (
+    <span className="ap-swap">
+      <span className={`ap-swap-from ap-swap-from-${name}`}>{from}</span>
+      <span className={`ap-swap-to ap-swap-to-${name}`}>{to}</span>
+    </span>
+  );
+}
+
+/** A dropdown. Bordered at rest — it opens something, so it looks like it does. */
+export function Select({ value }: { value: string }) {
+  return (
+    <span className="ap-select">
+      {value}
+      <EditorGlyph name="chevronDown" size={16} />
+    </span>
+  );
+}
+
+/**
+ * A segmented control. Text options stay pills; an all-icon group becomes square
+ * 24px cells, because a row of icon pills reads as five separate buttons.
+ */
+export function Segmented({
+  activeIndex,
+  icons,
+  options,
+}: {
+  activeIndex: number;
+  icons?: readonly GlyphName[];
+  options?: readonly string[];
+}) {
+  const cell = (index: number) =>
+    index === activeIndex ? "ap-ctl-seg-btn ap-ctl-seg-on" : "ap-ctl-seg-btn";
+
+  // Two branches rather than one loop with a ternary inside. A shared loop needs
+  // `item as GlyphName` to satisfy the union, which discards exactly the check
+  // that makes the glyph names safe in the first place.
+  if (icons) {
+    return (
+      <span className="ap-ctl-seg ap-ctl-seg-icon">
+        {icons.map((name, index) => (
+          <span className={cell(index)} key={name}>
+            <EditorGlyph name={name} size={16} />
+          </span>
+        ))}
+      </span>
+    );
+  }
+
+  return (
+    <span className="ap-ctl-seg">
+      {(options ?? []).map((label, index) => (
+        <span className={cell(index)} key={label}>
+          {label}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+/** A colour swatch over a conic checkerboard, plus its hex and alpha fields. */
+export function PaintRow({
+  alpha,
+  hex,
+  hexClassName,
+  swatchClassName,
+}: {
+  alpha: string;
+  hex: ReactNode;
+  hexClassName?: string;
+  swatchClassName?: string;
+}) {
+  return (
+    <span className="ap-paint-row">
+      <span
+        className={
+          swatchClassName ? `ap-ctl-swatch ${swatchClassName}` : "ap-ctl-swatch"
+        }
+      />
+      <NumField
+        className={
+          hexClassName ? `ap-paint-hex ${hexClassName}` : "ap-paint-hex"
+        }
+        value={hex}
+      />
+      <NumField className="ap-paint-pct" suffix="%" value={alpha} />
+    </span>
+  );
+}
diff --git a/apps/web/src/components/hero/airship-mock/inspector-section.tsx b/apps/web/src/components/hero/airship-mock/inspector-section.tsx
new file mode 100644
index 0000000..feefbeb
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/inspector-section.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { EditorGlyph } from "#/components/hero/airship-mock/editor-glyph";
+
+/**
+ * One collapsible section of the inspector.
+ *
+ * The header puts its title first and its chevron last, so every arrow in the
+ * panel lines up in a single column down the right edge however long the title
+ * is. That is a deliberate choice in the real panel and it is the detail that
+ * makes a stack of twelve sections read as one control rather than twelve.
+ *
+ * A section with no `children` renders header-only — which is also what the real
+ * panel does for SOURCE and FILTERS, and what keeps this mock legible: at the
+ * hero's render scale, twelve expanded sections would be grey noise.
+ */
+export function InspectorSection({
+  children,
+  className,
+  label,
+}: {
+  children?: ReactNode;
+  className?: string;
+  label: string;
+}) {
+  return (
+    <div className={className ? `ap-sect ${className}` : "ap-sect"}>
+      <div className="ap-sect-head">
+        {label}
+        <EditorGlyph
+          className="ap-sect-chev"
+          name={children ? "chevronUp" : "chevronDown"}
+          size={16}
+        />
+      </div>
+      {children ? <div className="ap-sect-body">{children}</div> : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/hero/airship-mock/mock-page.tsx b/apps/web/src/components/hero/airship-mock/mock-page.tsx
new file mode 100644
index 0000000..ff478bc
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/mock-page.tsx
@@ -0,0 +1,56 @@
+import { EditorGlyph } from "#/components/hero/airship-mock/editor-glyph";
+import { MOCK_PAGE } from "#/content/mock-page";
+
+/**
+ * The app being edited: this site, in miniature.
+ *
+ * Not a fictional product — `make run` points the CLI at apps/web, so the page
+ * inside the hero's browser window really is the page around it. The button the
+ * agent changes is the same button a reader can see a few hundred pixels above.
+ *
+ * `.ap-cta` carries the id the measuring effect looks for, and its radius and
+ * fill come from custom properties the timeline drives. Everything else here is
+ * scenery — it exists so the picker has somewhere plausible to hover.
+ */
+export function MockPage() {
+  return (
+    <div className="ap-page">
+      <div className="ap-page-nav">
+        <span className="ap-page-brand">
+          <EditorGlyph name="logo" size={24} />
+          {MOCK_PAGE.brand}
+        </span>
+        <span className="ap-page-links">
+          {MOCK_PAGE.nav.map((item) => (
+            <span key={item}>{item}</span>
+          ))}
+        </span>
+      </div>
+
+      <div className="ap-page-hero">
+        {/*
+          A <p>, not an <h2>. This is a picture of a heading inside an
+          aria-hidden illustration; giving it a real heading element puts a
+          phantom entry in the document outline that no reader can reach.
+        */}
+        <p className="ap-page-heading">{MOCK_PAGE.heading}</p>
+        <p className="ap-page-sub">{MOCK_PAGE.sub}</p>
+        <div className="ap-page-actions">
+          <span className="ap-cta" id="ap-cta">
+            {MOCK_PAGE.ctaLabel}
+          </span>
+          <span className="ap-cta-secondary">{MOCK_PAGE.secondaryLabel}</span>
+        </div>
+      </div>
+
+      <div className="ap-page-cards">
+        {MOCK_PAGE.cards.map((card) => (
+          <div className="ap-page-card" key={card.title}>
+            <p className="ap-page-card-title">{card.title}</p>
+            <p className="ap-page-card-body">{card.body}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/hero/airship-mock/picker-overlay.tsx b/apps/web/src/components/hero/airship-mock/picker-overlay.tsx
new file mode 100644
index 0000000..4b61b11
--- /dev/null
+++ b/apps/web/src/components/hero/airship-mock/picker-overlay.tsx
@@ -0,0 +1,41 @@
+import { MOCK_SELECTION } from "#/content/mock-page";
+
+const HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"] as const;
+
+/**
+ * What the picker draws over the element under the cursor.
+ *
+ * Both boxes are absolutely positioned on a full-mock chrome layer and share one
+ * geometry, set by the measuring effect into `--pick-*`. That mirrors the real
+ * overlay, where hover and selection are two boxes on the same layer rather than
+ * one box that changes style — they need to be able to coexist, and they differ
+ * in more than colour: hover is 1.5px over a wash, selection is 2px with no fill
+ * and a white outer ring so it stays visible against a light app.
+ */
+export function PickerOverlay() {
+  const geometry = {
+    height: "var(--pick-h, 44px)",
+    left: "var(--pick-x, 56px)",
+    top: "var(--pick-y, 366px)",
+    width: "var(--pick-w, 148px)",
+  };
+
+  return (
+    <div className="ap-chrome-layer">
+      <div className="ap-hover-box" style={geometry}>
+        <span className="ap-box-label ap-box-label-dim">
+          {MOCK_SELECTION.tag}
+        </span>
+      </div>
+
+      <div className="ap-sel-box" style={geometry}>
+        <span className="ap-box-label">
+          {MOCK_SELECTION.tag} · {MOCK_SELECTION.size}
+        </span>
+        {HANDLES.map((handle) => (
+          <span className={`ap-handle ap-handle-${handle}`} key={handle} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/hero/browser-window.tsx b/apps/web/src/components/hero/browser-window.tsx
new file mode 100644
index 0000000..55109b2
--- /dev/null
+++ b/apps/web/src/components/hero/browser-window.tsx
@@ -0,0 +1,113 @@
+import type { ReactNode } from "react";
+
+/**
+ * The Safari window the app is served into.
+ *
+ * The URL reads `localhost:3000` — the dev server's port, not airship's. In
+ * inline mode the overlay is injected into the app's own page, so the address
+ * never changes; that is the claim the whole hero is making, and getting the
+ * port wrong here would quietly contradict it.
+ */
+export function BrowserWindow({ children }: { children: ReactNode }) {
+  return (
+    <div className="browser-window">
+      <div className="browser-chrome">
+        <div className="browser-dots">
+          <span className="dot dot-red" />
+          <span className="dot dot-yellow" />
+          <span className="dot dot-green" />
+        </div>
+
+        <div className="safari-pill">
+          <NavArrow className="safari-btn safari-back" />
+          <NavArrow className="safari-btn safari-fwd" forward />
+        </div>
+
+        <div className="safari-url-wrap">
+          <div className="safari-pill browser-url">
+            localhost:3000
+            <ReloadIcon />
+          </div>
+        </div>
+
+        <div className="safari-pill">
+          <ShareIcon />
+        </div>
+      </div>
+
+      <div className="browser-content">{children}</div>
+    </div>
+  );
+}
+
+function NavArrow({
+  className,
+  forward,
+}: {
+  className: string;
+  forward?: boolean;
+}) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="none"
+      height="9"
+      viewBox="0 0 10 10"
+      width="9"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d={forward ? "M3.8 2L6.8 5L3.8 8" : "M6.2 2L3.2 5L6.2 8"}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.3"
+      />
+    </svg>
+  );
+}
+
+function ReloadIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="safari-reload"
+      fill="none"
+      height="8"
+      viewBox="0 0 10 10"
+      width="8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 5a3 3 0 1 1-.9-2.1M8 1.4v1.9H6.1"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.1"
+      />
+    </svg>
+  );
+}
+
+function ShareIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="safari-btn"
+      fill="none"
+      height="9"
+      viewBox="0 0 10 10"
+      width="9"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 1v5.4M3.2 2.6L5 .9l1.8 1.7M2 5.6v3h6v-3"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.1"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/components/hero/desktop-backdrop.tsx b/apps/web/src/components/hero/desktop-backdrop.tsx
new file mode 100644
index 0000000..eebae91
--- /dev/null
+++ b/apps/web/src/components/hero/desktop-backdrop.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+/**
+ * The wallpaper the hero's window sits on: a full-bleed band, edge to edge.
+ *
+ * It used to carry a menu bar and a dock as well, and was boxed at 800px with
+ * rounded corners so the three together read as a screenshot of a Mac. Once the
+ * band spans the viewport that conceit stops working — chrome authored at 8.5px
+ * to be seen inside a shrunken desktop is simply small type at 1:1 — so the
+ * wallpaper now stands on its own and the window is the only thing on it.
+ *
+ * `overflow: clip` stays: nothing overhangs any more, but it is what guarantees
+ * a full-width band can never produce a horizontal scrollbar.
+ *
+ * The cursor is still rendered as a SIBLING of this element rather than as a
+ * child — see the comment in hero-stage.tsx, which owns that constraint.
+ */
+export function DesktopBackdrop({ children }: { children: ReactNode }) {
+  return <div className="desktop-bg">{children}</div>;
+}
diff --git a/apps/web/src/components/hero/hero-stage.tsx b/apps/web/src/components/hero/hero-stage.tsx
new file mode 100644
index 0000000..cd6fbcb
--- /dev/null
+++ b/apps/web/src/components/hero/hero-stage.tsx
@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { InlineOverlay } from "#/components/hero/airship-mock/inline-overlay";
+import { BrowserWindow } from "#/components/hero/browser-window";
+import { DesktopBackdrop } from "#/components/hero/desktop-backdrop";
+import { MockCursor } from "#/components/hero/mock-cursor";
+import { cn } from "#/lib/cn";
+import { measureHero } from "#/lib/measure-hero";
+import { seekTo, useFrameScrub } from "#/lib/use-frame-scrub";
+import { useIsomorphicLayoutEffect } from "#/lib/use-isomorphic-layout-effect";
+
+/**
+ * The hero's animated still-life of the editor.
+ *
+ * `.mock-cursor` is a SIBLING of `.desktop-bg` rather than a child, and that is
+ * load-bearing: its `left`/`top` are percentages, and they must resolve against
+ * `.hero-visual` rather than against the desktop's padding box — which would
+ * offset every measured target by 80px.
+ *
+ * The whole thing is `aria-hidden`: it is an illustration of the product, and
+ * narrating a fake cursor moving across a fake inspector is noise. Everything it
+ * demonstrates is stated in prose in the sections below it.
+ */
+export function HeroStage() {
+  const [paused, setPaused] = useState(false);
+  const togglePaused = useCallback(() => setPaused((p) => !p), []);
+  const scrubFrame = useFrameScrub();
+  const stageRef = useRef<HTMLDivElement>(null);
+
+  /*
+   * The whole measuring layer: one effect, run before paint and again on every
+   * resize, rAF-debounced so a drag emits one measurement per frame rather than
+   * one per resize event.
+   *
+   * StrictMode's double-mount is fine — everything it writes is a custom
+   * property derived from the current layout, so the second run recomputes the
+   * same values.
+   */
+  useIsomorphicLayoutEffect(() => {
+    const hero = stageRef.current;
+    if (!hero) {
+      return;
+    }
+
+    let frame = 0;
+    const apply = () => measureHero(hero);
+    const onResize = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(apply);
+    };
+
+    apply();
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  /*
+   * Development only: `?frame=N` pins the loop. Runs in its own effect, after
+   * the measuring one, so the cursor's targets are measured before its track is
+   * seeked — otherwise a pinned frame would show the pointer at its fallback
+   * position rather than at the element it is supposed to be on.
+   */
+  useEffect(() => {
+    const hero = stageRef.current;
+    if (!hero || scrubFrame === null) {
+      return;
+    }
+    return seekTo(hero, scrubFrame);
+  }, [scrubFrame]);
+
+  return (
+    <div className={cn("hero-visual", paused && "is-paused")} ref={stageRef}>
+      <div aria-hidden="true">
+        <DesktopBackdrop>
+          <BrowserWindow>
+            <InlineOverlay />
+          </BrowserWindow>
+        </DesktopBackdrop>
+
+        <MockCursor />
+      </div>
+
+      {/*
+        Not aria-hidden: an infinite animation must be stoppable, and a control
+        the keyboard cannot reach does not count as stoppable.
+      */}
+      <button
+        aria-label={
+          paused ? "Play the demo animation" : "Pause the demo animation"
+        }
+        className="animation-pause-btn"
+        onClick={togglePaused}
+        type="button"
+      >
+        {paused ? <PlayIcon /> : <PauseIcon />}
+      </button>
+    </div>
+  );
+}
+
+function PauseIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      height="13"
+      viewBox="0 0 14 14"
+      width="13"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect fill="currentColor" height="10" rx="1" width="3.4" x="3" y="2" />
+      <rect fill="currentColor" height="10" rx="1" width="3.4" x="7.6" y="2" />
+    </svg>
+  );
+}
+
+function PlayIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      height="13"
+      viewBox="0 0 14 14"
+      width="13"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M4 2.4l7.2 4.6L4 11.6z" fill="currentColor" />
+    </svg>
+  );
+}
diff --git a/apps/web/src/components/hero/mock-cursor.tsx b/apps/web/src/components/hero/mock-cursor.tsx
new file mode 100644
index 0000000..f0e9699
--- /dev/null
+++ b/apps/web/src/components/hero/mock-cursor.tsx
@@ -0,0 +1,29 @@
+/**
+ * The pointer that drives the whole loop.
+ *
+ * A sibling of `.desktop-bg`, not a child: its `left`/`top` are percentages, and
+ * they have to resolve against `.hero-visual` — whose box matches the desktop
+ * exactly — rather than against the desktop's padding box, which would offset
+ * every measured target by the 80px side padding.
+ */
+export function MockCursor() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="mock-cursor"
+      fill="none"
+      height="14"
+      viewBox="0 0 14 14"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 1.4l9.2 5.4-3.8 1-1.9 3.6z"
+        fill="currentColor"
+        stroke="rgba(0,0,0,0.45)"
+        strokeLinejoin="round"
+        strokeWidth="0.9"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/lib/hero-measure.ts b/apps/web/src/lib/hero-measure.ts
new file mode 100644
index 0000000..820dc8d
--- /dev/null
+++ b/apps/web/src/lib/hero-measure.ts
@@ -0,0 +1,46 @@
+/*
+ * The pure maths behind the hero's measuring layer.
+ *
+ * Everything here is a function of numbers in and strings out — no DOM, no
+ * refs, no side effects. That split is not tidiness for its own sake: it keeps
+ * the effect in hero-stage.tsx down to about forty lines of orchestration.
+ */
+
+/** A rectangle, in the coordinate space of whatever measured it. */
+export interface Rect {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+}
+
+/**
+ * A point expressed as a percentage of a container.
+ *
+ * The cursor's `left`/`top` are percentages so it keeps its position when the
+ * hero is resized between measurements — a pixel offset would be silently wrong
+ * for the frame or two before the resize handler catches up.
+ */
+export function toPercent(
+  point: { x: number; y: number },
+  container: Rect
+): { x: string; y: string } {
+  /*
+   * Rounded to 3dp — about a thousandth of the stage, far below a device pixel.
+   *
+   * The precision is not cosmetic. These strings are written to custom
+   * properties that live `@keyframes` read, and in Chrome writing such a
+   * property restarts the animation. Full float precision meant every resize
+   * produced a different string for the same position, so `measureHero` could
+   * never tell "nothing moved" from "moved imperceptibly".
+   */
+  return {
+    x: `${(((point.x - container.left) / container.width) * 100).toFixed(3)}%`,
+    y: `${(((point.y - container.top) / container.height) * 100).toFixed(3)}%`,
+  };
+}
+
+/** The centre of a rect, in the same space the rect was measured in. */
+export function centerOf(rect: Rect): { x: number; y: number } {
+  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+}
diff --git a/apps/web/src/lib/hero-scale.ts b/apps/web/src/lib/hero-scale.ts
new file mode 100644
index 0000000..ea928b1
--- /dev/null
+++ b/apps/web/src/lib/hero-scale.ts
@@ -0,0 +1,61 @@
+/*
+ * The hero mock's scale, resolved before first paint.
+ *
+ * `.ap-mock` is authored at a fixed 1200px and shrunk with `transform: scale()`
+ * to whatever width the browser window in the hero actually got. Only the
+ * measuring effect in hero-stage.tsx knows that width exactly — but it cannot
+ * run until React has hydrated, and the server-rendered HTML paints long before
+ * that. Whatever the CSS fallback says is therefore what a visitor sees first.
+ *
+ * A single fallback was fine when the stage was a fixed 800px card: one number
+ * was correct at every viewport. Once the band went full-bleed the window's
+ * width became a function of the viewport, no constant is right below the cap,
+ * and first paint was out by up to 66% — a visible snap on load.
+ *
+ * So: a tiny inlined script that runs before the first paint, computing the
+ * scale from the only input it needs (viewport width) and letting the real
+ * measurement refine it after hydration. The numbers below are
+ * transcribed from hero-desktop.css and hero-overlay.css; if the geometry there
+ * changes, it changes here.
+ */
+
+/** Author-space width of `.ap-mock` — see hero-overlay.css. */
+export const MOCK_WIDTH = 1200;
+
+/** `.browser-window`'s `max-width` — see hero-desktop.css. */
+export const WINDOW_MAX_WIDTH = 1040;
+
+/**
+ * `.desktop-bg`'s horizontal padding at each breakpoint, widest first — see the
+ * band rules in hero-desktop.css. The window is the band's width minus twice
+ * this, capped at WINDOW_MAX_WIDTH.
+ */
+export const BAND_PADDING_X = [
+  { padding: 12, upTo: 640 },
+  { padding: 16, upTo: 847 },
+  { padding: 48, upTo: Number.POSITIVE_INFINITY },
+] as const;
+
+/** The scale the mock should render at, for a given viewport content width. */
+export function heroScaleFor(viewportWidth: number): number {
+  const step =
+    BAND_PADDING_X.find((s) => viewportWidth <= s.upTo) ?? BAND_PADDING_X[2];
+  const content = Math.min(WINDOW_MAX_WIDTH, viewportWidth - step.padding * 2);
+  return Math.max(0, content) / MOCK_WIDTH;
+}
+
+/**
+ * Runs before first paint, inlined into the document head — see __root.tsx.
+ *
+ * Written onto <html> rather than onto `.hero-visual`, because at the time this
+ * runs the document is still being parsed and the hero does not exist yet.
+ * Custom properties inherit, so the value reaches `.ap-mock` all the same, and
+ * the inline style `measureHero` later writes onto `.hero-visual` overrides it
+ * — the seed is the opening bid, the measurement is the final answer.
+ *
+ * `clientWidth`, not `innerWidth`: it excludes the scrollbar, which is what the
+ * band's own `width: 100%` will resolve against. Stringified verbatim into a
+ * <script>, so it must be self-contained — no imports, no closure over module
+ * scope — and the try/catch keeps a failure here from blocking the parser.
+ */
+export const HERO_SCALE_SEED_SCRIPT = `(function(){try{var w=document.documentElement.clientWidth;var p=w<=${BAND_PADDING_X[0].upTo}?${BAND_PADDING_X[0].padding}:w<=${BAND_PADDING_X[1].upTo}?${BAND_PADDING_X[1].padding}:${BAND_PADDING_X[2].padding};var c=Math.min(${WINDOW_MAX_WIDTH},w-p*2);if(c>0){document.documentElement.style.setProperty("--ap-mock-scale",String(c/${MOCK_WIDTH}))}}catch(e){}})()`;
diff --git a/apps/web/src/lib/measure-hero.ts b/apps/web/src/lib/measure-hero.ts
new file mode 100644
index 0000000..22b3c28
--- /dev/null
+++ b/apps/web/src/lib/measure-hero.ts
@@ -0,0 +1,146 @@
+import { centerOf, type Rect, toPercent } from "#/lib/hero-measure";
+import { MOCK_WIDTH } from "#/lib/hero-scale";
+
+function rectOf(root: ParentNode, selector: string): Rect | null {
+  const el = root.querySelector(selector);
+  if (!el) {
+    return null;
+  }
+  const r = el.getBoundingClientRect();
+  return { height: r.height, left: r.left, top: r.top, width: r.width };
+}
+
+/**
+ * Measure the hero and write everything the CSS animation needs back onto it.
+ *
+ * Called on mount and again on every (debounced) resize.
+ *
+ * @param hero The `.hero-visual` element to write custom properties onto.
+ */
+export function measureHero(hero: HTMLElement): void {
+  /*
+   * Writing a custom property that a live `@keyframes` reads makes Chrome tear
+   * the animation down and start it again from zero. The cursor's whole path is
+   * expressed in these, so an unguarded `setProperty` on every resize event
+   * restarted the pointer's track while the other seventy carried on,
+   * permanently out of step.
+   *
+   * Hence: round to a stable precision, and skip the write when nothing moved.
+   * A resize that does not change the hero's geometry then costs nothing at all
+   * — which is the common case on a wide viewport, where the band is full-bleed
+   * but the window inside it is pinned to its max-width and does not move.
+   */
+  let changed = false;
+  const setVar = (name: string, value: string) => {
+    if (hero.style.getPropertyValue(name) === value) {
+      return;
+    }
+    hero.style.setProperty(name, value);
+    changed = true;
+  };
+
+  // The shared clock, read before anything is written, so it can be restored if
+  // a genuine change does force a restart.
+  const clock = readClock(hero);
+
+  // 1. Mock scale — how far 1200 author pixels must shrink to fit the window.
+  const content = rectOf(hero, ".browser-content");
+  if (!(content && content.width > 0)) {
+    return;
+  }
+  const scale = content.width / MOCK_WIDTH;
+  setVar("--ap-mock-scale", String(scale));
+
+  const stage = hero.getBoundingClientRect();
+  const container: Rect = {
+    height: stage.height,
+    left: stage.left,
+    top: stage.top,
+    width: stage.width,
+  };
+
+  // 2. Cursor targets: the centre of a real element each time, as a percentage
+  //    of the stage so it survives a resize between one measurement and the
+  //    next.
+  //
+  //    These are the four places the pointer actually goes in the story — the
+  //    button it picks, the composer it types into, the send button, and the
+  //    two controls in the panel. Everything else on the desktop is scenery and
+  //    is never clicked.
+  const targets: [string, string][] = [
+    ["sel", "#ap-cta"],
+    ["prompt", ".ap-input"],
+    ["send", ".ap-send"],
+    ["tab", ".ap-tab-edit"],
+    ["radius", ".ap-field-radius"],
+  ];
+
+  for (const [name, selector] of targets) {
+    const rect = rectOf(hero, selector);
+    if (!rect) {
+      continue;
+    }
+    const { x, y } = toPercent(centerOf(rect), container);
+    setVar(`--${name}-x`, x);
+    setVar(`--${name}-y`, y);
+  }
+
+  // 3. The picker's box, in `.ap-mock` AUTHOR space — it is drawn inside the
+  //    scaled container, so it has to be sized in the same units its siblings
+  //    use, not in the screen pixels the rect came back in.
+  const mock = rectOf(hero, ".ap-mock");
+  const cta = rectOf(hero, "#ap-cta");
+  if (mock && cta) {
+    setVar("--pick-x", px((cta.left - mock.left) / scale));
+    setVar("--pick-y", px((cta.top - mock.top) / scale));
+    setVar("--pick-w", px(cta.width / scale));
+    setVar("--pick-h", px(cta.height / scale));
+  }
+
+  if (changed) {
+    restoreClock(hero, clock);
+  }
+}
+
+/** `12.3456` → `"12.35px"`. Two decimals is below one device pixel at any DPR. */
+function px(value: number): string {
+  return `${value.toFixed(2)}px`;
+}
+
+interface Clock {
+  paused: boolean;
+  time: CSSNumberish | null;
+}
+
+/** Where the shared `--ap-loop` clock currently is, and whether it is running. */
+function readClock(hero: HTMLElement): Clock | null {
+  const reference = hero.querySelector(".mock-cursor")?.getAnimations()[0];
+  if (!reference) {
+    return null;
+  }
+  return {
+    paused: reference.playState === "paused",
+    time: reference.currentTime,
+  };
+}
+
+/**
+ * Put every track back on the shared clock after a genuine geometry change.
+ *
+ * Deferred a frame because Chrome recreates the affected animations during the
+ * next style recalculation — restoring synchronously would set the time on the
+ * objects that are about to be discarded.
+ */
+function restoreClock(hero: HTMLElement, clock: Clock | null): void {
+  if (!clock) {
+    return;
+  }
+  requestAnimationFrame(() => {
+    for (const animation of hero.getAnimations({ subtree: true })) {
+      if (clock.paused) {
+        animation.pause();
+      }
+      animation.currentTime = clock.time;
+    }
+  });
+}
diff --git a/apps/web/src/lib/use-frame-scrub.ts b/apps/web/src/lib/use-frame-scrub.ts
new file mode 100644
index 0000000..10dee04
--- /dev/null
+++ b/apps/web/src/lib/use-frame-scrub.ts
@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import { FRAME_MS } from "#/content/timeline";
+
+/**
+ * `?frame=62` — freeze the hero's loop at one percent of its run.
+ *
+ * A ~30-track choreography cannot be reviewed by watching it: by the time you
+ * notice a value swapped a beat too early, it is gone.
+ *
+ * Read from `window.location` rather than the route's search schema on purpose:
+ * this is a development affordance, and routing it through validated search
+ * params would put a debug flag in the app's public contract.
+ *
+ * @returns the frame to pin at, or `null` to run normally.
+ */
+export function useFrameScrub(): number | null {
+  const [frame, setFrame] = useState<number | null>(null);
+
+  useEffect(() => {
+    const raw = new URLSearchParams(window.location.search).get("frame");
+    if (raw === null) {
+      return;
+    }
+    const parsed = Number(raw);
+    if (Number.isFinite(parsed)) {
+      // Wrap rather than clamp, so `?frame=105` shows frame 5 — which is what
+      // you want when stepping across the seam to check it.
+      setFrame(((parsed % 100) + 100) % 100);
+    }
+  }, []);
+
+  return frame;
+}
+
+/**
+ * Seek every animation under `root` to a given frame and pause it.
+ *
+ * Driven through the Web Animations API rather than by overriding
+ * `animation-delay` in CSS. The CSS route looks simpler and is wrong: the scrub
+ * class can only be applied after the first paint, by which point every track
+ * has already started, and changing `animation-delay` on a running animation
+ * shifts its timeline relative to a start time that is now in the past. The
+ * result is a frame that is confidently displayed and quietly incorrect — the
+ * worst possible property for a debugging tool.
+ *
+ * `currentTime` is absolute and unambiguous, so what you asked for is what you
+ * get.
+ *
+ * @returns a function that resumes everything, for the effect's cleanup.
+ */
+export function seekTo(root: HTMLElement, frame: number): () => void {
+  const time = frame * FRAME_MS;
+  const animations = root.getAnimations({ subtree: true });
+
+  for (const animation of animations) {
+    // Pause BEFORE seeking. Assigning `currentTime` to a still-running animation
+    // sets it, but the animation then advances by however long it takes to reach
+    // the `pause()` on the next line — about a frame — and lands ~0.17% late.
+    // That is invisible during a hold and completely wrong on a fast beat.
+    animation.pause();
+    animation.currentTime = time;
+  }
+
+  return () => {
+    for (const animation of animations) {
+      animation.play();
+    }
+  };
+}
diff --git a/apps/web/src/lib/use-isomorphic-layout-effect.ts b/apps/web/src/lib/use-isomorphic-layout-effect.ts
new file mode 100644
index 0000000..427c5c2
--- /dev/null
+++ b/apps/web/src/lib/use-isomorphic-layout-effect.ts
@@ -0,0 +1,12 @@
+import { useEffect, useLayoutEffect } from "react";
+
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server.
+ *
+ * React warns that `useLayoutEffect` does nothing during SSR, and it is right —
+ * but the warning is noise for an effect that measures the DOM, because there is
+ * no DOM to measure until the browser has one. Swapping the import on the server
+ * silences the warning without changing what runs where.
+ */
+export const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
diff --git a/apps/web/src/styles/hero-desktop.css b/apps/web/src/styles/hero-desktop.css
new file mode 100644
index 0000000..903cf9e
--- /dev/null
+++ b/apps/web/src/styles/hero-desktop.css
@@ -0,0 +1,316 @@
+/*
+ * The full-bleed band the hero sits on: wallpaper, the Safari window, the
+ * cursor, and the pause button.
+ *
+ * Static geometry only. Every `animation:` binding lives in hero-timeline.css,
+ * so this file can be read as "what it looks like" without also being "when".
+ *
+ * The band used to be an 800px rounded card carrying a menu bar and a dock as
+ * well, so that the three together read as a screenshot of a Mac. Edge to edge
+ * that conceit inverts: chrome authored at 8.5px to be legible inside a shrunken
+ * desktop is just small type at 1:1. The wallpaper now stands on its own, and
+ * the window it carries is ~1040px rather than 744px — which is the point of the
+ * change, because it takes the mock inside from `scale(0.62)` to ~0.87 and its
+ * composer prompt, the one line here anybody has to read, from 8px to ~11px.
+ *
+ * One structural fact is load-bearing and is enforced by the markup in
+ * components/hero/hero-stage.tsx rather than by anything here: `.mock-cursor` is
+ * a SIBLING of `.desktop-bg`, not a child, because its left/top are percentages
+ * and they must resolve against `.hero-visual`, whose box matches `.desktop-bg`
+ * exactly. Both are `width: 100%` with no margin, so that still holds.
+ */
+
+/* ── the stage ─────────────────────────────────────────────────────────── */
+
+.hero-visual {
+  /*
+   * Cursor targets, as percentages of this element. These are FALLBACKS — the
+   * measuring effect in hero-stage.tsx overwrites each one with a real measured
+   * position after mount. They are what the pre-hydration frame paints with, and
+   * what the loop runs against if a measurement ever fails.
+   *
+   * Transcribed from a real measurement at a 1440px viewport, where the window
+   * sits at its 1040px cap. They were previously a different set entirely, taken
+   * when this element was capped at 800px — once it went full-bleed the box these
+   * resolve against became the viewport, every number was wrong by 20–50 points,
+   * and the cursor teleported on hydration.
+   *
+   * Being percentages of a full-width box, they are only exact at 1440. That is
+   * the trade the full-bleed band costs: below the window's cap the true values
+   * drift with viewport width, and only the measurement knows them.
+   */
+  --sel-x: 20.94%;
+  --sel-y: 52%;
+  --prompt-x: 74.5%;
+  --prompt-y: 85.54%;
+  --send-x: 82.56%;
+  --send-y: 85.59%;
+  --tab-x: 72.89%;
+  --tab-y: 23.72%;
+  --radius-x: 79.46%;
+  --radius-y: 68.45%;
+  position: relative;
+  width: 100%;
+}
+
+/* ── the band ──────────────────────────────────────────────────────────── */
+
+.desktop-bg {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* Nothing overhangs any more — this is now purely the guarantee that a band
+     as wide as the viewport can never produce a horizontal scrollbar. */
+  overflow: clip;
+  overflow-clip-margin: 0;
+  width: 100%;
+  /*
+   * No `aspect-ratio`. At 800px wide, 16/10 was a 500px card. Kept at full
+   * width it would be a 900px-tall band on a 1440 display and taller still on a
+   * wide monitor — the band's height comes from the window it holds plus this
+   * padding instead.
+   */
+  padding: 56px 48px;
+  background:
+    url("/wallpaper-day.avif") center / cover no-repeat,
+    var(--pk-color-surface-input);
+}
+
+/* ── browser window ────────────────────────────────────────────────────── */
+
+/*
+ * Sized by its content, not by the space available.
+ *
+ * `flex: 1 0 0` was the obvious choice and is wrong: `.desktop-bg` no longer has
+ * an aspect-ratio, so the column has no definite height and a zero flex-basis
+ * would have nothing to resolve against. Letting `.browser-content` declare the
+ * mock's aspect ratio instead makes this element's height a function of its
+ * width at every breakpoint — which is also what lets the band be sized by the
+ * window rather than the other way round.
+ *
+ * 1040px is the cap, and it is the number that sets the whole band's proportion:
+ * at 1040 the content box is ~551px tall, so the band lands near 680px with its
+ * padding. It is also 1040/1200 of `.ap-mock`'s authored width, which puts
+ * `--ap-mock-scale` at ~0.87 — close enough to 1 that the mock renders at very
+ * nearly the size it was drawn at. Raising it much past here starts to cost more
+ * vertical fold than the extra legibility buys.
+ */
+.browser-window {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1040px;
+  overflow: hidden;
+  border-radius: var(--pk-radius-lg);
+  box-shadow:
+    0 0 0 0.5px rgb(0 0 0 / 0.15),
+    0 6px 20px 4px rgb(0 0 0 / 0.15);
+}
+
+.browser-chrome {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 12px;
+  background: var(--pk-color-surface-chrome);
+  border-radius: var(--pk-radius-lg) var(--pk-radius-lg) 0 0;
+}
+
+.browser-dots {
+  display: flex;
+  gap: 6px;
+}
+
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+
+.dot-red {
+  background: #f87171;
+}
+
+.dot-yellow {
+  background: #fbbf24;
+}
+
+.dot-green {
+  background: #4ade80;
+}
+
+.safari-pill {
+  display: flex;
+  flex-shrink: 0;
+  gap: 4px;
+  align-items: center;
+  padding: 3px 6px;
+  background: rgb(255 255 255 / 0.5);
+  border: 1px solid rgb(255 255 255 / 0.06);
+  border-radius: 100px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 0.03);
+}
+
+.safari-btn {
+  display: block;
+  color: var(--pk-color-text-primary);
+  opacity: 0.5;
+}
+
+.safari-back {
+  opacity: 0.26;
+}
+
+.safari-url-wrap {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+}
+
+.browser-url {
+  position: relative;
+  justify-content: center;
+  width: 100%;
+  max-width: 280px;
+  padding: 3px 10px;
+  font-family: system-ui, sans-serif;
+  font-size: 8px;
+  color: var(--pk-color-text-muted);
+  background: var(--pk-color-surface-panel);
+  border-color: var(--pk-color-surface-panel);
+  box-shadow: 0 1px 5px rgb(0 0 0 / 0.02);
+}
+
+.safari-reload {
+  position: absolute;
+  right: 8px;
+  color: var(--pk-color-text-muted);
+  opacity: 0.4;
+}
+
+/*
+ * The viewport the app is served into. `.ap-mock` inside it is the only
+ * positioned coordinate space the overlay's docks resolve against — see
+ * hero-overlay.css.
+ */
+.browser-content {
+  position: relative;
+  /* `flex: 0 0 auto`, not `flex: 1`: this element's height comes from the
+     aspect-ratio below, and growing to fill would override it. */
+  flex: 0 0 auto;
+  width: 100%;
+  /*
+   * Matches `.ap-mock`'s authored 1200×636, so the scaled mock fills this box
+   * exactly at any width. Change one without the other and you get a gap along
+   * the bottom edge, or a clipped bottom bar.
+   *
+   * 636 is not arbitrary: it is a realistic browser viewport ratio (1.89,
+   * against ~1.85 for a maximised window on a 16:10 display). It used to be
+   * chosen to make the window's total height land in the 394px an 800px desktop
+   * had left over; now the band has no fixed height and this ratio is what sets
+   * one, so it is the cause rather than the consequence.
+   */
+  aspect-ratio: 1200 / 636;
+  overflow: hidden;
+  background: var(--pk-color-surface-page);
+  border-radius: 0 0 var(--pk-radius-lg) var(--pk-radius-lg);
+}
+
+/* ── cursor ────────────────────────────────────────────────────────────── */
+
+.mock-cursor {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 30;
+  width: 14px;
+  height: 14px;
+  color: #fff;
+  pointer-events: none;
+  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4));
+  will-change: transform, left, top;
+}
+
+/* ── pause button ──────────────────────────────────────────────────────── */
+
+/*
+ * Bottom-left of the band, white on the wallpaper, at every width.
+ *
+ * This used to be two designs behind an 848px query: a tertiary-grey button
+ * parked below the card on narrow screens, because below 848 the wallpaper went
+ * away and there was nothing dark to sit on. The band keeps its wallpaper at
+ * every width now, so the corner treatment is simply always right and the
+ * fallback has nothing left to fall back to.
+ */
+.animation-pause-btn {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: #fff;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--pk-radius-lg);
+  transition:
+    color 150ms ease,
+    background 150ms ease,
+    transform 150ms ease;
+}
+
+.animation-pause-btn:hover,
+.animation-pause-btn:focus-visible {
+  color: #fff;
+  background: rgb(255 255 255 / 0.28);
+  backdrop-filter: blur(12px);
+}
+
+.animation-pause-btn:active {
+  transform: scale(0.92);
+  transition:
+    color 150ms ease,
+    background 150ms ease,
+    transform 100ms ease-out;
+}
+
+/* ── narrow ────────────────────────────────────────────────────────────── */
+
+/*
+ * The band survives narrow widths intact, which is new.
+ *
+ * When it was an 800px card the whole conceit was dropped below 848px — the
+ * wallpaper was thrown away and a bare window was left behind, because a
+ * shrunken desktop read as a bug. Full-bleed there is no desktop to shrink: the
+ * wallpaper is just a painting the width of the screen, and that works at 375px
+ * exactly as well as at 1440. Only the gutters come in.
+ *
+ * The cursor still goes at 847, though. Its targets are real measured elements
+ * inside a mock that is scaled down along with everything else, and past this
+ * point it is chasing controls too small to make sense of.
+ */
+@media (max-width: 847px) {
+  .desktop-bg {
+    padding: 32px 16px;
+  }
+
+  .mock-cursor {
+    display: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .desktop-bg {
+    padding: 24px 12px;
+  }
+}
diff --git a/apps/web/src/styles/hero-overlay.css b/apps/web/src/styles/hero-overlay.css
new file mode 100644
index 0000000..971f3ff
--- /dev/null
+++ b/apps/web/src/styles/hero-overlay.css
@@ -0,0 +1,1147 @@
+/*
+ * Airship's inline-mode overlay, recreated in miniature: the app's own page with
+ * the picker, the inspector dock and the bottom bar floating over it.
+ *
+ * ── The one rule for editing this file ───────────────────────────────────────
+ * Every number here is TRANSCRIBED from packages/overlay/src/styles/*.css.ts at
+ * 1:1. Nothing is pre-multiplied by a scale factor. The whole mock is authored
+ * at real pixels inside `.ap-mock` and then shrunk with a single `transform:
+ * scale()`, because the alternative — hand-shrinking ~120 distinct values, each
+ * one an opportunity to round differently — is how a mock stops looking like the
+ * product it is quoting.
+ *
+ * So: if the real editor says 24px, write 24px. If it says 10px mono uppercase
+ * with 0.6px tracking, write exactly that. The scale is somebody else's problem.
+ *
+ * Colours come from `--ap-*`, generated from packages/editor-tokens/EDITOR.md
+ * and scoped to `.ap-mock` by @airship/site-tokens' postbuild. They are dark and
+ * owe nothing to the light page around them, which is correct: airship's chrome
+ * is dark whatever the app it is injected into looks like. The `color-scheme:
+ * dark` below is the same statement made to the browser, and overrides the
+ * page's `color-scheme: light` for this subtree only.
+ *
+ * ── The one intentional deviation ────────────────────────────────────────────
+ * The real docks are `position: fixed`. Here they are `position: absolute`.
+ * A `transform` ancestor already makes `fixed` behave as `absolute`, so this
+ * changes nothing visually — but relying on that quirk would be fragile, and
+ * being explicit means `.ap-mock` is unambiguously the containing block.
+ */
+
+.ap-mock {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1200px;
+  height: 636px;
+  font-family: var(--ap-font-sans);
+  color-scheme: dark;
+  /* Overwritten after mount from the real measured width of .browser-content.
+     0.62 is 744/1200 — the width the desktop simulation gives it at 800px. */
+  /*
+   * The fallback is what the SSR'd frame paints at, because nothing has measured
+   * anything yet — so it must be the answer for the common case, not a
+   * placeholder. 1040/1200 is exact at every viewport wide enough for
+   * `.browser-window` to reach its 1040px cap, which is 1136px and up.
+   *
+   * It was 0.62 (744/1200) for the 800px stage that used to hold this, and
+   * leaving it there after the band went full-bleed made first paint render the
+   * mock 40% too small and then snap. If either 1040 in hero-desktop.css or the
+   * 1200 above changes, this changes with them.
+   */
+  transform: scale(var(--ap-mock-scale, 0.8667));
+  transform-origin: top left;
+}
+
+/* ── the app underneath ────────────────────────────────────────────────── */
+
+/*
+ * airship's own landing page, in miniature. Not a fictional product: `make run`
+ * points the CLI at this app, so this really is what you would be looking at.
+ *
+ * It uses `--pk-*`, not `--ap-*` — it is the page, not the chrome, so it is
+ * drawn from the same tokens as the page around it and cannot drift from them.
+ */
+.ap-page {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--pk-font-sans);
+  color: var(--pk-color-text-primary);
+  background: var(--pk-color-surface-page);
+}
+
+/* Full-width, and partly behind the docks — which is exactly what a real page
+   looks like with the overlay open. */
+.ap-page-nav {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  padding: 0 40px;
+  border-bottom: 1px solid var(--pk-color-border-faint);
+}
+
+.ap-page-brand {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: -0.4px;
+}
+
+.ap-page-brand svg {
+  width: 24px;
+  height: 24px;
+}
+
+.ap-page-links {
+  display: flex;
+  gap: 28px;
+  font-size: 15px;
+  color: var(--pk-color-text-secondary);
+}
+
+/*
+ * A normal left-aligned hero.
+ *
+ * With one dock (covering 820–1200) the whole left two-thirds of the page stays
+ * visible, so the layout needs no tricks: the CTA lands around x=56, nowhere
+ * near the panel. A two-dock draft had to centre this inside a 460px band to
+ * keep the selected element out from behind the chat — which worked, but made
+ * the page inside look like a page designed around its own editor.
+ */
+.ap-page-hero {
+  display: flex;
+  flex-direction: column;
+  max-width: 520px;
+  padding: 64px 56px 0;
+}
+
+.ap-page-heading {
+  margin: 0;
+  font-size: 36px;
+  font-weight: 500;
+  line-height: 1.14;
+  letter-spacing: -0.9px;
+}
+
+.ap-page-sub {
+  margin: 16px 0 0;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--pk-color-text-secondary);
+}
+
+.ap-page-actions {
+  display: flex;
+  gap: 18px;
+  align-items: center;
+  margin-top: 30px;
+}
+
+/*
+ * THE element. The picker selects it, the inspector edits it, and the payoff
+ * beat changes it — so its radius and background are custom properties the
+ * timeline animates, rather than literals it would have to override.
+ */
+.ap-cta {
+  display: inline-flex;
+  align-items: center;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  background: var(--ap-cta-fill, #1c1917);
+  border-radius: var(--ap-cta-radius, 6px);
+}
+
+.ap-cta-secondary {
+  font-family: var(--pk-font-mono);
+  font-size: 14px;
+  color: var(--pk-color-text-secondary);
+}
+
+.ap-page-cards {
+  display: flex;
+  gap: 14px;
+  max-width: 680px;
+  padding: 52px 56px 0;
+}
+
+.ap-page-card {
+  flex: 1;
+  padding: 16px 18px;
+  background: var(--pk-color-surface-panel);
+  border: 1px solid var(--pk-color-border-faint);
+  border-radius: 10px;
+}
+
+.ap-page-card-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.ap-page-card-body {
+  margin: 5px 0 0;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--pk-color-text-secondary);
+}
+
+/* ── picker overlay ────────────────────────────────────────────────────── */
+
+/*
+ * Drawn on a layer that spans the whole mock and takes raw coordinates, exactly
+ * as the real overlay's `.chrome-layer` does — so a box is positioned by where
+ * the element IS, not by where its parent happens to be.
+ */
+.ap-chrome-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  pointer-events: none;
+}
+
+/* Hover: 1.5px, over a 15% wash. Selection: 2px, no fill, plus a white ring so
+   the outline survives on a light UI. */
+.ap-hover-box {
+  position: absolute;
+  background: var(--ap-primary-bg-hover);
+  border: 1.5px solid var(--ap-primary);
+  border-radius: var(--ap-radius-xs);
+  opacity: 0;
+}
+
+.ap-sel-box {
+  position: absolute;
+  border: 2px solid var(--ap-primary);
+  border-radius: var(--ap-radius-xs);
+  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16);
+  opacity: 0;
+}
+
+.ap-handle {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  background: var(--ap-selection-handle);
+  border: 1px solid var(--ap-primary);
+  border-radius: 1px;
+  opacity: 0;
+}
+
+.ap-handle-n,
+.ap-handle-nw,
+.ap-handle-ne {
+  top: -4px;
+}
+.ap-handle-s,
+.ap-handle-sw,
+.ap-handle-se {
+  bottom: -4px;
+}
+.ap-handle-w,
+.ap-handle-nw,
+.ap-handle-sw {
+  left: -4px;
+}
+.ap-handle-e,
+.ap-handle-ne,
+.ap-handle-se {
+  right: -4px;
+}
+.ap-handle-n,
+.ap-handle-s {
+  left: calc(50% - 3.5px);
+}
+.ap-handle-e,
+.ap-handle-w {
+  top: calc(50% - 3.5px);
+}
+
+/* The identity badge, above the box's top-left corner. */
+.ap-box-label {
+  position: absolute;
+  top: -3px;
+  left: -1px;
+  padding: 2px 5px;
+  font-family: var(--ap-font-mono);
+  font-size: 10px;
+  line-height: 1.4;
+  color: #fff;
+  white-space: nowrap;
+  background: var(--ap-primary);
+  border-radius: 3px;
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.ap-box-label-dim {
+  opacity: 0.7;
+}
+
+/* ── docks ─────────────────────────────────────────────────────────────── */
+
+.ap-dock {
+  position: absolute;
+  top: 20px;
+  bottom: 20px;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--ap-surface-panel);
+  border: 1px solid var(--ap-border-default);
+  border-radius: var(--ap-radius-md);
+  /* A hairline ring, not a drop shadow. Panels in this system separate from
+     what is behind them with a border; only floated chrome casts. */
+  box-shadow: var(--ap-elevation-card);
+}
+
+/* 320, not the real editor's 360. At this render scale the wider panel took a
+   quarter of the window and read as the subject rather than as the tool. */
+.ap-dock-right {
+  right: 20px;
+  width: 320px;
+}
+
+.ap-head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ap-space-sm) var(--ap-space-lg);
+  border-bottom: 1px solid var(--ap-border-default);
+}
+
+.ap-brand {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  color: var(--ap-text-primary);
+}
+
+.ap-brand-name {
+  font-size: 12px;
+  font-weight: 560;
+  letter-spacing: -0.1px;
+}
+
+.ap-head-actions {
+  display: inline-flex;
+  gap: 2px;
+}
+
+.ap-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--ap-icon-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: var(--ap-radius-xs);
+}
+
+/* ── inspector ─────────────────────────────────────────────────────────── */
+
+/*
+ * The empty state and the filled panel occupy the same box and cross-fade.
+ * Stacking them means neither ever changes the dock's layout, so the transition
+ * is a single compositor-friendly opacity change rather than a reflow of a
+ * 360px column.
+ *
+ * Idle is the base state: empty visible, panel hidden. The timeline moves it.
+ */
+.ap-insp-stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.ap-insp-empty {
+  position: absolute;
+  inset: 0;
+}
+
+.ap-insp {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  opacity: 0;
+}
+
+.ap-insp-tabs {
+  display: flex;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--ap-border-default);
+}
+
+.ap-insp-tab {
+  display: inline-flex;
+  flex: 1;
+  /* 3px, not the 6px control gutter: four tabs in 320px is one more than the
+     real panel carries in 360, and the gutter is the first thing to give. */
+  gap: 3px;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ap-space-xs) 3px;
+  font-family: inherit;
+  font-size: var(--ap-font-size-title);
+  color: var(--ap-text-primary);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  opacity: 0.55;
+}
+
+.ap-insp-tab-on {
+  border-bottom-color: var(--ap-primary);
+  opacity: 1;
+}
+
+/*
+ * The scrollbar is hidden, as it is in the real panel: this is chrome, and a
+ * scrollbar track inside a 360px dock is a stripe of noise beside every control.
+ * The timeline scrolls it by translating the inner column instead.
+ */
+.ap-insp-body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ap-insp-scroll {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Empty state — the brand mark over two lines, centred. */
+.ap-empty {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 20px;
+  text-align: center;
+}
+
+.ap-empty-art {
+  width: 48px;
+  height: 48px;
+  color: var(--ap-icon-muted);
+  opacity: 0.55;
+}
+
+.ap-empty-title {
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--ap-text-secondary);
+}
+
+.ap-empty-body {
+  max-width: 32ch;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--ap-text-tertiary);
+}
+
+/* Source chip — the file:line the selection resolved to. */
+.ap-src {
+  font-family: var(--ap-font-mono);
+  font-size: var(--ap-font-size-caption);
+  color: var(--ap-text-secondary);
+  opacity: 0.75;
+}
+
+/*
+ * Section header. Title first, chevron LAST — so every arrow in the panel lines
+ * up in one column down the right edge, whatever the header says.
+ */
+.ap-sect {
+  border-bottom: 1px solid var(--ap-border-default);
+}
+
+.ap-sect-head {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ap-space-xs) var(--ap-space-lg);
+  font-family: var(--ap-font-mono);
+  font-size: var(--ap-font-size-caption);
+  color: var(--ap-text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  opacity: 0.6;
+}
+
+.ap-sect-chev {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--ap-icon-muted);
+}
+
+.ap-sect-body {
+  padding: var(--ap-control-group-gap) var(--ap-space-lg);
+}
+
+/* Two columns of glyph-fielded controls — NOT a label rail. The label rail only
+   appears on rows that span the full width. */
+.ap-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--ap-control-row-gap) var(--ap-control-gutter);
+  align-items: center;
+}
+
+.ap-span2 {
+  grid-column: 1 / -1;
+}
+
+.ap-row {
+  display: flex;
+  gap: var(--ap-control-gutter);
+  align-items: center;
+  margin: var(--ap-control-row-gap) 0;
+}
+
+.ap-row-label {
+  flex: 0 0 68px;
+  font-size: 12px;
+  color: var(--ap-text-tertiary);
+}
+
+/* The nine align cells, in three groups. */
+.ap-align-row {
+  display: flex;
+  gap: var(--ap-space-xs);
+  justify-content: space-between;
+  padding: var(--ap-space-sm) var(--ap-space-lg);
+  border-bottom: 1px solid var(--ap-border-default);
+}
+
+.ap-align-grp {
+  display: inline-flex;
+  gap: 1px;
+}
+
+.ap-align-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--ap-icon-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: var(--ap-radius-xs);
+}
+
+/* ── controls ──────────────────────────────────────────────────────────── */
+
+/*
+ * The number field is borderless until touched — a panel of twenty bordered
+ * boxes reads as a form, and this is an instrument. The glyph doubles as the
+ * scrub handle, which is why it is 20px rather than 16px.
+ */
+.ap-ctl-num {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  min-width: 0;
+  height: var(--ap-control-height);
+  padding-left: 2px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--ap-radius-sm);
+}
+
+.ap-ctl-glyph {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--ap-icon-muted);
+}
+
+.ap-ctl-glyph-txt {
+  font-family: var(--ap-font-mono);
+  font-size: 11px;
+  line-height: 1;
+  opacity: 0.85;
+}
+
+.ap-ctl-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 2px;
+  font-family: var(--ap-font-mono);
+  font-size: 12px;
+  color: var(--ap-text-primary);
+  white-space: nowrap;
+}
+
+.ap-ctl-suffix {
+  font-family: var(--ap-font-mono);
+  font-size: 11px;
+  color: var(--ap-text-tertiary);
+}
+
+/* Unlike the number fields, the dropdown IS bordered at rest — it opens
+   something, and an affordance that opens something has to look like one. */
+.ap-select {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--ap-control-height);
+  padding: 0 8px;
+  font-family: var(--ap-font-sans);
+  font-size: 12px;
+  color: var(--ap-text-primary);
+  text-align: left;
+  background: var(--ap-input-bg);
+  border: 1px solid var(--ap-input-border);
+  border-radius: var(--ap-radius-sm);
+}
+
+.ap-select svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--ap-icon-secondary);
+}
+
+.ap-ctl-seg {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--ap-surface-active);
+  border-radius: var(--ap-radius-sm);
+}
+
+.ap-ctl-seg-btn {
+  padding: 3px 8px;
+  font-family: inherit;
+  font-size: 11px;
+  color: var(--ap-text-primary);
+  background: transparent;
+  border: none;
+  border-radius: var(--ap-radius-xs);
+  opacity: 0.6;
+}
+
+.ap-ctl-seg-on {
+  background: var(--ap-primary);
+  opacity: 1;
+}
+
+/* An all-icon group becomes square cells rather than pills. */
+.ap-ctl-seg-icon {
+  flex-wrap: nowrap;
+}
+
+.ap-ctl-seg-icon .ap-ctl-seg-btn {
+  display: inline-flex;
+  flex: 1 1 0;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+}
+
+/* The conic checkerboard is what makes a semi-transparent fill readable. */
+.ap-ctl-swatch {
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background-color: var(--ap-swatch-color, #1c1917);
+  background-size: 6px 6px;
+  border: 1px solid var(--ap-border-default);
+  border-radius: var(--ap-radius-sm);
+}
+
+.ap-paint-row {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  min-width: 0;
+}
+
+.ap-paint-hex {
+  flex: 1 1 auto;
+}
+
+.ap-paint-pct {
+  flex: 0 0 72px;
+}
+
+.ap-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ap-rows-row {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+}
+
+.ap-rows-row > *:first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.ap-row-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  color: var(--ap-icon-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: var(--ap-radius-xs);
+  opacity: 0.55;
+}
+
+/* ── bottom bar ────────────────────────────────────────────────────────── */
+
+.ap-bar {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  z-index: 50;
+  display: inline-flex;
+  gap: 2px;
+  align-items: center;
+  padding: 4px;
+  background: var(--ap-surface-panel);
+  border: 1px solid var(--ap-border-default);
+  border-radius: var(--ap-radius-md);
+  box-shadow: var(--ap-elevation-card);
+  transform: translateX(-50%);
+}
+
+.ap-bar-sep {
+  align-self: stretch;
+  width: 1px;
+  margin: 4px 2px;
+  background: var(--ap-border-default);
+}
+
+.ap-tool-group {
+  display: inline-flex;
+  gap: 2px;
+  align-items: center;
+}
+
+/* 28px, not 24px: these are the only controls in the system you aim at rather
+   than read, and they sit on a floating bar with nothing to align to. */
+.ap-tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: var(--ap-icon-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: var(--ap-radius-xs);
+}
+
+.ap-tool-on {
+  color: var(--ap-text-primary);
+  background: var(--ap-primary);
+}
+
+.ap-seg-group {
+  display: inline-flex;
+  gap: 2px;
+  align-items: center;
+  padding: 2px;
+  background: var(--ap-surface-active);
+  border: 1px solid var(--ap-border-default);
+  border-radius: var(--ap-radius-sm);
+}
+
+.ap-seg {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ap-text-primary);
+  background: transparent;
+  border: none;
+  border-radius: var(--ap-radius-xs);
+  opacity: 0.65;
+}
+
+.ap-seg svg {
+  width: 14px;
+  height: 14px;
+}
+
+.ap-seg-on {
+  background: var(--ap-surface-panel);
+  box-shadow: var(--ap-elevation-card);
+  opacity: 1;
+}
+
+/*
+ * The pending-tweak counter. It rides on the bar because that is where the send
+ * affordance lives in inline mode — the count is "how much is waiting to go".
+ */
+.ap-tweak-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #fff;
+  background: var(--ap-primary);
+  border-radius: var(--ap-radius-pill);
+  transform: scale(0);
+}
+
+.ap-tweak-badge-wrap {
+  display: inline-flex;
+  align-items: center;
+  width: 0;
+  overflow: hidden;
+}
+
+/* ── the Agent tab ─────────────────────────────────────────────────────── */
+
+/*
+ * The two tab bodies stack in one box and cross-fade, so switching tabs never
+ * resizes the dock and both stay measurable — which the cursor's targets depend
+ * on.
+ */
+.ap-tab-stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.ap-tab-body {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* Agent is the tab you land on; Edit gets one calm beat at the end. */
+.ap-tab-body-edit {
+  overflow: hidden;
+  opacity: 0;
+}
+
+.ap-tab-agent {
+  border-bottom-color: var(--ap-primary);
+  opacity: 1;
+}
+
+.ap-transcript {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ap-space-md);
+  min-height: 0;
+  padding: var(--ap-space-md) var(--ap-space-lg);
+}
+
+.ap-msg-user {
+  align-self: flex-end;
+  max-width: 88%;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--ap-text-primary);
+  background: var(--ap-surface-selected);
+  /* Notched on the corner nearest its author — bottom-right for the user,
+     bottom-left for the agent. The one asymmetry that makes a transcript
+     readable without avatars, and — since the bubble stopped being an accent
+     fill — the only thing that does. */
+  border-radius: 8px 8px 4px 8px;
+  opacity: 0;
+}
+
+.ap-msg-assistant {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-self: flex-start;
+  width: 96%;
+  padding: 10px 12px;
+  background: var(--ap-surface-active);
+  border: 1px solid var(--ap-border-default);
+  border-radius: 8px 8px 8px 4px;
+  opacity: 0;
+}
+
+/* The agent's timeline, in the same grammar Claude Code uses in a terminal:
+   a filled marker and a bold tool name, then an indented elbow for the result. */
+.ap-tl {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ap-tl-head {
+  display: flex;
+  gap: 5px;
+  align-items: baseline;
+  font-family: var(--ap-font-mono);
+  font-size: 12px;
+  color: var(--ap-text-primary);
+  white-space: nowrap;
+  opacity: 0;
+}
+
+.ap-tl-marker {
+  flex-shrink: 0;
+  color: var(--ap-text-tertiary);
+}
+
+.ap-tl-tool {
+  font-weight: 600;
+}
+
+.ap-tl-args {
+  color: var(--ap-text-tertiary);
+}
+
+.ap-tl-res {
+  display: flex;
+  gap: 4px;
+  align-items: baseline;
+  padding-left: 10px;
+  font-family: var(--ap-font-mono);
+  font-size: 11px;
+  color: var(--ap-text-secondary);
+  white-space: nowrap;
+  opacity: 0;
+}
+
+.ap-tl-elbow {
+  flex-shrink: 0;
+  color: var(--ap-text-tertiary);
+}
+
+.ap-turn-status {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--ap-text-tertiary);
+}
+
+/* Matches `@keyframes __airship-pulse` in the real overlay — same 7px, same 1s,
+   same opacity floor. */
+.ap-dot {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  background: var(--ap-text-tertiary);
+  border-radius: var(--ap-radius-pill);
+}
+
+.ap-status-label {
+  display: inline-grid;
+}
+
+.ap-status-label > span {
+  grid-area: 1 / 1;
+}
+
+/* The diff card. Its header names the file in blue mono and its stat in dimmed
+   mono — the two things you check before reading a single line of the body. */
+.ap-diff {
+  max-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--ap-border-default);
+  border-radius: var(--ap-radius-md);
+  opacity: 0;
+}
+
+.ap-diff-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 10px;
+  font-size: 11px;
+  color: var(--ap-text-primary);
+  background: var(--ap-surface-active);
+}
+
+.ap-diff-file {
+  font-family: var(--ap-font-mono);
+  font-weight: 600;
+  color: var(--ap-text-primary);
+}
+
+.ap-diff-stat {
+  font-family: var(--ap-font-mono);
+  opacity: 0.5;
+}
+
+.ap-diff-body {
+  padding: 6px 0;
+  font: 11px / 1.5 var(--ap-font-mono);
+  background: var(--ap-surface-panel);
+}
+
+.ap-diff-line {
+  padding: 0 10px;
+  white-space: pre;
+  opacity: 0;
+}
+
+.ap-diff-add {
+  color: var(--ap-semantic-success);
+  background: var(--ap-semantic-success-bg);
+}
+
+.ap-diff-del {
+  color: var(--ap-semantic-error);
+  background: var(--ap-semantic-error-bg);
+}
+
+.ap-diff-ctx {
+  opacity: 0.55;
+}
+
+/* ── composer ──────────────────────────────────────────────────────────── */
+
+.ap-composer {
+  flex: 0 0 auto;
+  padding: var(--ap-space-sm) var(--ap-space-md);
+  border-top: 1px solid var(--ap-border-default);
+}
+
+/*
+ * ONE bordered box holding the chips, the textarea and the send button. The
+ * right padding is what clears the absolutely-positioned send — without it the
+ * caret would run underneath the button on a long prompt.
+ */
+.ap-field {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 34px 6px 8px;
+  background: var(--ap-input-bg);
+  border: 1px solid var(--ap-input-border);
+  border-radius: var(--ap-radius-sm);
+}
+
+.ap-chips {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  overflow: hidden;
+}
+
+/* The selection chip — the one accented thing in the composer, because it is the
+   one thing that answers "what am I about to change?". */
+.ap-sel-chip {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  padding: 3px 6px 3px 8px;
+  font-family: var(--ap-font-mono);
+  font-size: 12px;
+  color: var(--ap-text-primary);
+  white-space: nowrap;
+  background: var(--ap-surface-active);
+  border: 1px solid var(--ap-border-default);
+  border-radius: var(--ap-radius-sm);
+  transform: scale(0);
+  transform-origin: left center;
+}
+
+.ap-chip-x {
+  color: var(--ap-text-tertiary);
+}
+
+.ap-input {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+  min-height: 19px;
+  padding: 2px 0;
+  font-size: var(--ap-font-size-title);
+  line-height: 1.45;
+}
+
+.ap-placeholder {
+  position: absolute;
+  color: var(--ap-text-placeholder);
+}
+
+/*
+ * The typed prompt, revealed by clipping rather than by a JS timer.
+ *
+ * `clip-path: inset(0 var(--type-clip) 0 0)` stepped through the timeline means
+ * the typing obeys the pause button and `prefers-reduced-motion` for free. A
+ * `setInterval` would ignore both, and would keep running while the hero is
+ * scrolled off screen.
+ */
+.ap-typed {
+  color: var(--ap-text-primary);
+  white-space: nowrap;
+  clip-path: inset(0 100% 0 0);
+}
+
+.ap-caret {
+  align-self: center;
+  width: 1px;
+  height: 15px;
+  background: var(--ap-text-primary);
+  opacity: 0;
+}
+
+.ap-send {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--ap-text-primary);
+  background: var(--ap-surface-selected);
+  border: 1px solid var(--ap-border-strong);
+  border-radius: var(--ap-radius-sm);
+  opacity: 0.35;
+}
diff --git a/apps/web/src/styles/hero-timeline.css b/apps/web/src/styles/hero-timeline.css
new file mode 100644
index 0000000..8214931
--- /dev/null
+++ b/apps/web/src/styles/hero-timeline.css
@@ -0,0 +1,1813 @@
+/*
+ * ════════════════════════════════════════════════════════════════════════════
+ *  The hero's 11.5-second loop.
+ * ════════════════════════════════════════════════════════════════════════════
+ *
+ * Every `animation:` binding on the page lives in this file; every piece of
+ * static geometry lives in hero-desktop.css and hero-overlay.css. Reading one
+ * file tells you WHEN, reading the others tells you WHAT. Mixing them is how a
+ * choreography this size stops being maintainable.
+ *
+ * ── Four rules, all load-bearing ─────────────────────────────────────────────
+ *
+ * 1. EVERY track is `var(--ap-loop) … infinite` with NO `animation-delay`. Some
+ *    fifty animation instances stay in sync only because they share one clock
+ *    anchored at zero. One track with a different duration desynchronises the
+ *    whole page, and the symptom — things drifting apart over minutes — is
+ *    horrible to diagnose. Exactly TWO tracks deliberately break this; they are
+ *    quarantined at the bottom with the reason written down. To audit: every
+ *    animation under `.hero-visual` should report 11500ms except those two.
+ *
+ * 2. 0% and 100% are written as LITERAL DUPLICATES, never left implicit. Any
+ *    element whose 0% and 100% differ snaps at the loop seam, and that snap is
+ *    nearly impossible to find by eye afterwards. There is a check for it: frame
+ *    0 and frame 99.999 must be pixel-identical.
+ *
+ * 3. Seeking is done through the Web Animations API (`?frame=N`), NOT by
+ *    overriding `animation-delay` here. See lib/use-frame-scrub.ts for why.
+ *
+ * 4. The percentages below are mirrored in content/timeline.ts. Nudge a stop
+ *    here, nudge it there.
+ *
+ * ── What the desktop does: nothing ──────────────────────────────────────────
+ *
+ * The wallpaper, the menu bar and the dock are set dressing. Not one track in
+ * this file touches them, and the browser window never changes focus, so its
+ * traffic lights are simply coloured in hero-desktop.css.
+ *
+ * There used to be an ACT 0: a CLI window opened the loop showing the real
+ * `npx airship --target 3000` banner, then minimised into the dock on a measured
+ * macOS genie warp while the menu bar and both sets of traffic lights swapped
+ * focus. It was the most intricate thing on the page and it was cut, because
+ * intricacy is not the same as usefulness. It spent nearly three seconds — a
+ * quarter of the loop, and the quarter a visitor is most likely to actually
+ * watch — establishing that the tool starts from a shell, which the install
+ * command sitting a few pixels above the animation already says in real,
+ * selectable copy. The loop now opens on the thing only the animation can show.
+ *
+ * ── Pacing ──────────────────────────────────────────────────────────────────
+ *
+ * 1% = 115ms. Easing is `--pk-motion-ease-chrome` unless noted.
+ *
+ * Two rules keep it from feeling either rushed or slack, and both were learned
+ * by getting them wrong:
+ *
+ *   - NOTHING ACTS ON A THING THAT HAS NOT FINISHED HAPPENING. The cursor does
+ *     not leave the composer until the sentence is complete, the send is not
+ *     pressed until the cursor has arrived, the transcript does not answer until
+ *     the composer has cleared, and the button does not change colour until the
+ *     diff that explains it has finished revealing. An earlier cut had the send
+ *     firing while the prompt typed on for another half second, which is what
+ *     made the whole act read as frantic — the eye was being asked to follow two
+ *     things that contradicted each other.
+ *
+ *   - EVERY COMPLETED ACTION GETS A HELD BEAT BEFORE THE NEXT ONE STARTS. The
+ *     finished sentence sits for ~460ms before the pointer moves; the diff sits
+ *     before the payoff; the payoff sits for ~1.3s before teardown. Those holds
+ *     are the difference between a demo and a flipbook, and they are also where
+ *     the animation is cheapest.
+ *
+ * ── The story ───────────────────────────────────────────────────────────────
+ *
+ * Two edits, made two different ways, because that is the product.
+ *
+ * The agent handles the thing that is awkward to say as a number — "make this
+ * warmer" is a judgement — and the inspector handles the thing that IS a number:
+ * the corner radius, scrubbed by hand. Splitting the work by mechanism is what
+ * stops the Edit tab from being scenery, and it is a truer picture than either
+ * half alone. An early draft had the inspector do everything and the agent
+ * merely "apply" it, which argued that airship is a visual CSS editor; the next
+ * had the agent do everything and left the inspector to be looked at.
+ *
+ * ACT 1 · select (0–17%)
+ *    0     The page, the dock's empty state, the cursor at rest in the middle.
+ *          Held ~290ms, so the loop opens on a still rather than mid-gesture.
+ *    2.5   cursor sets off for the CTA; arrives 6.5.
+ *    7.4   hover box fades in on it — 1.5px #0D99FF over a 15% wash. AFTER the
+ *          arrival, not during the approach: a box that blooms while the pointer
+ *          is still travelling reads as the page anticipating the cursor. It
+ *          holds ~265ms, which is what the `button.cta-primary` label beside it
+ *          needs to be read.
+ *   10     press.
+ *   10.4   hover box out, selection box in: 2px plus a white ring. Eight handles
+ *          pop 0.17% apart. Badge gains `· 122 × 45`.
+ *   11.6   the dock fills: empty state cross-fades to the panel and the
+ *          selection chip grows into the composer.
+ *   12–15.4  cursor travels to the composer.
+ *
+ * ACT 2 · the prompt (17–36%)
+ *   15.9   caret blinks on — OWN 1.2s clock, not the loop's.
+ *   16.5   the placeholder gives way and "Make this warmer." starts revealing by
+ *          clipping, in step-end stops 72ms apart.
+ *   17.13  send goes from 0.35 to full — on the FIRST keystroke, which is when a
+ *          composer with a non-empty value actually enables its button, not at
+ *          some staged moment of the animation's choosing.
+ *   26.58  the sentence is complete.
+ *   26.58–30.6  IT SITS THERE. The single most important hold in the loop: it is
+ *          the only window in which a visitor can actually read the prompt, and
+ *          everything after it is downstream of it.
+ *   30.6–33.5  only now does the cursor set off for send.
+ *   34.7   press. 35.4 the composer clears — the prompt unclips, the placeholder
+ *          returns, the caret goes, the chip stays.
+ *
+ * ACT 3 · the agent (36–56%)
+ *   35.5   user bubble pops in — blue, notched bottom-right. AFTER the composer
+ *          emptied, never before it.
+ *   36.6   assistant bubble fades in, holding a 7px dot pulsing on its OWN 1s
+ *          clock beside "Applying 1 edit…".
+ *   38.4–46.8  three tool calls, 3.4% apart, each in two beats — head, then its
+ *          ⎿ result 0.8% later:
+ *            38.4 ⏺ Read  hero-section.tsx    39.2 ⎿ Read 84 lines
+ *            41.8 ⏺ Grep  "cta-primary"       42.6 ⎿ Found 2 matches
+ *            45.2 ⏺ Edit  styles/shell.css    46.0 ⎿ 1 addition, 1 removal
+ *   47.6   diff card grows: max-height 0 → 110px. Head reads `shell.css  +1 −1`.
+ *          After the Edit call it is the result of.
+ *   49.2–51.96  four diff lines reveal 0.62% apart.
+ *   52.6 ★ the button turns #E2603A, on `--ease-overshoot`. Held back until the
+ *          diff has finished landing: the change is the diff's consequence, and
+ *          showing it first turns the diff into a footnote.
+ *   54.8   the dot collapses; status → "Done · 1 file changed".
+ *
+ * ACT 4 · the inspector (56–74%)
+ *          The other half, by hand.
+ *   57     cursor leaves the transcript for the Edit tab; arrives 60.5, presses
+ *          61.2.
+ *   62.9   panel switches to Edit and its rows rise 6px in sequence — SOURCE,
+ *          the align row, SIZE, APPEARANCE, FILL. Fill already reads E2603A: the
+ *          panel re-read the file the agent just changed.
+ *   62.5–66  cursor travels to the corner-radius field.
+ *   67.2   the field lights: hover surface, then the accent border.
+ *   67.9   radius 6 → 9999, and the button starts rounding in the SAME frame —
+ *          inspector edits apply optimistically, before any agent runs.
+ *   74     the pending-tweak badge grows onto the bottom bar reading "1".
+ *
+ * ACT 5 · breathing room (74–85.5%)
+ *          Nothing visible moves for ~1.3s. Selection up, the panel showing both
+ *          values, and the button carrying both edits — one described, one
+ *          scrubbed. This is the frame `prefers-reduced-motion` pins.
+ *
+ *          The transcript does clear underneath during this act (78.5–80.2), but
+ *          it is behind the Edit tab and nobody sees it. Doing the bookkeeping
+ *          here is what buys the teardown its unhurried pace.
+ *
+ * ACT 6 · teardown (85.5–100%)
+ *   85.5   the badge collapses.
+ *   86.5   panel returns to the Agent tab, now empty; the Edit tab's rows empty
+ *          in REVERSE order, bottom-up.
+ *   88     the dock returns to its empty state and the chip shrinks away.
+ *   88   ★ the button reverts — deliberately AFTER the panel starts clearing, so
+ *          it reads as the loop resetting rather than as an undo.
+ *   90.5   selection box and handles fade.
+ *   91.5–95.5  cursor returns to 50%/50%.
+ *   95.5–100 dead air. Every element sits at exactly its 0% declaration.
+ */
+
+/*
+ * The tempo, in one place.
+ *
+ * Every track below reads this rather than naming a duration, so the whole
+ * choreography can be sped up or slowed down without touching fifty
+ * declarations — and, more importantly, so it is impossible to change one of
+ * them and miss the other forty-nine. That failure mode is rule 1.
+ *
+ * It is deliberately NOT read inside any `@keyframes` block: Chrome tears down
+ * and restarts an animation when a custom property its keyframes reference
+ * changes, and this hero already has a measuring layer that has to work around
+ * exactly that (see lib/measure-hero.ts).
+ */
+.hero-visual {
+  --ap-loop: 11.5s;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   Cursor
+   ════════════════════════════════════════════════════════════════════════════ */
+
+.mock-cursor {
+  animation:
+    ap-cursor-move var(--ap-loop) var(--pk-motion-ease-chrome) infinite,
+    ap-cursor-press var(--ap-loop) var(--pk-motion-ease-chrome) infinite;
+}
+
+/*
+ * Every pair below is `arrive%, depart%` — the cursor is STILL for the whole
+ * span between them. The holds are load-bearing: a pointer that arrives and
+ * immediately leaves reads as a pointer being dragged past a target rather than
+ * one that stopped to click it.
+ */
+@keyframes ap-cursor-move {
+  0%,
+  2.5% {
+    top: 50%;
+    left: 50%;
+  }
+  /* the CTA in the page */
+  6.5%,
+  12% {
+    top: var(--sel-y);
+    left: var(--sel-x);
+  }
+  /* the composer — and it STAYS for the whole of the typing, plus the beat
+     afterwards in which the finished sentence can be read */
+  15.4%,
+  30.6% {
+    top: var(--prompt-y);
+    left: var(--prompt-x);
+  }
+  /* the send button */
+  33.5%,
+  36.5% {
+    top: var(--send-y);
+    left: var(--send-x);
+  }
+  /* drifts clear of the transcript while the agent works */
+  39.5%,
+  57% {
+    top: 60%;
+    left: 40%;
+  }
+  /* the Edit tab */
+  60.5%,
+  62.5% {
+    top: var(--tab-y);
+    left: var(--tab-x);
+  }
+  /* the corner-radius field, and stays there through the scrub and the whole
+     breathing beat */
+  66%,
+  91.5% {
+    top: var(--radius-y);
+    left: var(--radius-x);
+  }
+  95.5%,
+  100% {
+    top: 50%;
+    left: 50%;
+  }
+}
+
+/*
+ * Three presses, each 0.6% long (~70ms) and each landing at least 1% after the
+ * cursor has come to rest at that target. `scale` only — the move track owns
+ * left/top, so the two never fight over one property.
+ */
+@keyframes ap-cursor-press {
+  0%,
+  9.7% {
+    transform: scale(1);
+  }
+  10% {
+    transform: scale(0.82);
+  }
+  10.6%,
+  34.4% {
+    transform: scale(1);
+  }
+  34.7% {
+    transform: scale(0.82);
+  }
+  35.3%,
+  60.9% {
+    transform: scale(1);
+  }
+  61.2% {
+    transform: scale(0.82);
+  }
+  61.8%,
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   ACT 1 · the picker
+   ════════════════════════════════════════════════════════════════════════════ */
+
+.ap-hover-box,
+.ap-hover-box .ap-box-label {
+  animation: ap-hover-box var(--ap-loop) ease infinite;
+}
+
+@keyframes ap-hover-box {
+  0%,
+  6.3% {
+    opacity: 0;
+  }
+  7.4%,
+  9.7% {
+    opacity: 1;
+  }
+  /* Handed off to the selection box rather than cross-faded with it: two blue
+     outlines on one rectangle, even for a frame, reads as a doubled border. */
+  10.2%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.ap-sel-box,
+.ap-sel-box .ap-box-label {
+  animation: ap-sel-box var(--ap-loop) ease infinite;
+}
+
+@keyframes ap-sel-box {
+  0%,
+  10.2% {
+    opacity: 0;
+  }
+  10.6%,
+  90.5% {
+    opacity: 1;
+  }
+  91.9%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.ap-handle {
+  animation: ap-handle-pop-0 var(--ap-loop) var(--pk-motion-ease-overshoot)
+    infinite;
+}
+
+.ap-handle-nw {
+  animation-name: ap-handle-pop-0;
+}
+.ap-handle-n {
+  animation-name: ap-handle-pop-1;
+}
+.ap-handle-ne {
+  animation-name: ap-handle-pop-2;
+}
+.ap-handle-e {
+  animation-name: ap-handle-pop-3;
+}
+.ap-handle-se {
+  animation-name: ap-handle-pop-4;
+}
+.ap-handle-s {
+  animation-name: ap-handle-pop-5;
+}
+.ap-handle-sw {
+  animation-name: ap-handle-pop-6;
+}
+.ap-handle-w {
+  animation-name: ap-handle-pop-7;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   ACT 1 · the dock fills
+   ════════════════════════════════════════════════════════════════════════════ */
+
+.ap-insp-empty {
+  animation: ap-empty-out var(--ap-loop) ease infinite;
+}
+
+@keyframes ap-empty-out {
+  0%,
+  10.5% {
+    opacity: 1;
+  }
+  11.6%,
+  88% {
+    opacity: 0;
+  }
+  89.4%,
+  100% {
+    opacity: 1;
+  }
+}
+
+.ap-insp-filled {
+  animation: ap-filled-in var(--ap-loop) ease infinite;
+}
+
+@keyframes ap-filled-in {
+  0%,
+  10.5% {
+    opacity: 0;
+  }
+  11.6%,
+  88% {
+    opacity: 1;
+  }
+  89.4%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/*
+ * The inspector's rows rise with the TAB SWITCH, not with the selection.
+ *
+ * They used to stagger in alongside the dock filling — which was both invisible
+ * and wrong. Invisible because the Agent tab sits in front of the Edit tab until
+ * 62.9%, so nine staggered rises played to nobody; wrong because the moment a
+ * panel renders its rows is the moment you look at it.
+ *
+ * Nine blocks for the nine `.ap-insp-row` sections in design-dock.tsx. Adding a
+ * section there means adding a block here — an unmatched row would simply appear
+ * with no animation at all, which at least fails visibly.
+ */
+.ap-insp-row {
+  animation: ap-insp-row-0 var(--ap-loop) var(--pk-motion-ease-chrome) infinite;
+}
+
+.ap-insp-row:nth-child(1) {
+  animation-name: ap-insp-row-0;
+}
+.ap-insp-row:nth-child(2) {
+  animation-name: ap-insp-row-1;
+}
+.ap-insp-row:nth-child(3) {
+  animation-name: ap-insp-row-2;
+}
+.ap-insp-row:nth-child(4) {
+  animation-name: ap-insp-row-3;
+}
+.ap-insp-row:nth-child(5) {
+  animation-name: ap-insp-row-4;
+}
+.ap-insp-row:nth-child(6) {
+  animation-name: ap-insp-row-5;
+}
+.ap-insp-row:nth-child(7) {
+  animation-name: ap-insp-row-6;
+}
+.ap-insp-row:nth-child(8) {
+  animation-name: ap-insp-row-7;
+}
+.ap-insp-row:nth-child(9) {
+  animation-name: ap-insp-row-8;
+}
+
+/* The chip grows into the composer at the same moment the dock fills — one
+   pick, two panels, and the chip is what says the prompt is scoped. */
+.ap-sel-chip {
+  animation: ap-chip-grow var(--ap-loop) var(--pk-motion-ease-overshoot)
+    infinite;
+}
+
+@keyframes ap-chip-grow {
+  0%,
+  10.6% {
+    transform: scale(0);
+  }
+  11.9%,
+  88% {
+    transform: scale(1);
+  }
+  89.2%,
+  100% {
+    transform: scale(0);
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   ACT 2 · the prompt
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/*
+ * The typing.
+ *
+ * `clip-path: inset(0 X 0 0)` stepped through 16 stops, rather than a JS timer
+ * assembling a string. The whole effect then obeys the pause button and
+ * `prefers-reduced-motion` for free, costs nothing when the hero is off screen,
+ * and stays seekable — `?frame=21` shows a half-typed prompt because the clip is
+ * a function of time, not of how many intervals have fired.
+ *
+ * `step-end` because typing is discrete. A smoothly interpolated clip reads as a
+ * wipe, which is the one thing typing does not look like.
+ *
+ * The stops are 0.63% apart: ~72ms per character, which is a brisk but human 200
+ * characters a minute. Faster and it stops reading as typing; slower and the
+ * seventeen characters of "Make this warmer." eat an act and a half.
+ *
+ * It finishes at 26.58% and the clip HOLDS at zero until 35.35%. That hold is
+ * the point — see the pacing note at the top of the file.
+ */
+.ap-typed {
+  animation: ap-type var(--ap-loop) step-end infinite;
+}
+
+@keyframes ap-type {
+  0%,
+  16.5% {
+    clip-path: inset(0 100% 0 0);
+  }
+  17.13% {
+    clip-path: inset(0 94% 0 0);
+  }
+  17.76% {
+    clip-path: inset(0 88% 0 0);
+  }
+  18.39% {
+    clip-path: inset(0 82% 0 0);
+  }
+  19.02% {
+    clip-path: inset(0 76% 0 0);
+  }
+  19.65% {
+    clip-path: inset(0 70% 0 0);
+  }
+  20.28% {
+    clip-path: inset(0 64% 0 0);
+  }
+  20.91% {
+    clip-path: inset(0 58% 0 0);
+  }
+  21.54% {
+    clip-path: inset(0 52% 0 0);
+  }
+  22.17% {
+    clip-path: inset(0 46% 0 0);
+  }
+  22.8% {
+    clip-path: inset(0 40% 0 0);
+  }
+  23.43% {
+    clip-path: inset(0 34% 0 0);
+  }
+  24.06% {
+    clip-path: inset(0 28% 0 0);
+  }
+  24.69% {
+    clip-path: inset(0 22% 0 0);
+  }
+  25.32% {
+    clip-path: inset(0 16% 0 0);
+  }
+  25.95% {
+    clip-path: inset(0 10% 0 0);
+  }
+  26.58%,
+  35.35% {
+    clip-path: inset(0 0 0 0);
+  }
+  /* Cleared on send, not faded — the composer empties the instant the turn
+     starts, as it does in the real overlay. */
+  35.4%,
+  100% {
+    clip-path: inset(0 100% 0 0);
+  }
+}
+
+.ap-placeholder {
+  animation: ap-placeholder var(--ap-loop) step-end infinite;
+}
+
+@keyframes ap-placeholder {
+  0% {
+    opacity: 1;
+  }
+  /* Goes exactly as the first character lands, not before: a field that is
+     visibly empty and unfocused for a beat looks broken rather than ready. */
+  16.5% {
+    opacity: 0;
+  }
+  35.4% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/*
+ * Send enables on the first keystroke.
+ *
+ * An earlier cut lit it at the end of typing and treated that as a beat, which
+ * is not what the real composer does — it enables the moment the value is
+ * non-empty. Doing it honestly costs nothing now that the act has a proper hold
+ * in it: the tension comes from the cursor travelling to a button that has been
+ * ready and waiting for a third of the act.
+ */
+.ap-send {
+  animation: ap-send-enable var(--ap-loop) ease infinite;
+}
+
+@keyframes ap-send-enable {
+  0%,
+  17.13% {
+    opacity: 0.35;
+    transform: scale(1);
+  }
+  17.9%,
+  34.7% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  35% {
+    opacity: 1;
+    transform: scale(0.9);
+  }
+  35.6% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  35.9%,
+  100% {
+    opacity: 0.35;
+    transform: scale(1);
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   ACT 3 · the agent
+   ════════════════════════════════════════════════════════════════════════════ */
+
+.ap-msg-user {
+  animation: ap-bubble-user var(--ap-loop) var(--pk-motion-ease-overshoot)
+    infinite;
+}
+
+@keyframes ap-bubble-user {
+  0%,
+  35.5% {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  36.6%,
+  79% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  80.2%,
+  100% {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+.ap-msg-assistant {
+  animation: ap-bubble-assistant var(--ap-loop) ease infinite;
+}
+
+@keyframes ap-bubble-assistant {
+  0%,
+  36.6% {
+    opacity: 0;
+  }
+  37.7%,
+  78.8% {
+    opacity: 1;
+  }
+  80%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.ap-tl-head-1 {
+  animation: ap-tl-head-1 var(--ap-loop) ease infinite;
+}
+.ap-tl-head-2 {
+  animation: ap-tl-head-2 var(--ap-loop) ease infinite;
+}
+.ap-tl-head-3 {
+  animation: ap-tl-head-3 var(--ap-loop) ease infinite;
+}
+.ap-tl-res-1 {
+  animation: ap-tl-res-1 var(--ap-loop) ease infinite;
+}
+.ap-tl-res-2 {
+  animation: ap-tl-res-2 var(--ap-loop) ease infinite;
+}
+.ap-tl-res-3 {
+  animation: ap-tl-res-3 var(--ap-loop) ease infinite;
+}
+
+/* The status line swaps at the moment the change lands. */
+.ap-status-working {
+  animation: ap-status-working var(--ap-loop) step-end infinite;
+}
+
+.ap-status-done {
+  animation: ap-status-done var(--ap-loop) step-end infinite;
+}
+
+@keyframes ap-status-working {
+  0% {
+    opacity: 1;
+  }
+  54.8% {
+    opacity: 0;
+  }
+  /* Reset while the whole bubble is already at opacity 0 — otherwise "Done"
+     visibly becomes "Applying…" again on the way out. */
+  80.5% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ap-status-done {
+  0% {
+    opacity: 0;
+  }
+  54.8% {
+    opacity: 1;
+  }
+  80.5% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* The dot collapses rather than fading, so the status line closes up behind it. */
+.ap-dot {
+  animation:
+    ap-dot-hide var(--ap-loop) ease infinite,
+    ap-pulse 1s ease-in-out infinite;
+}
+
+@keyframes ap-dot-hide {
+  0%,
+  54.2% {
+    width: 7px;
+    margin-right: 0;
+  }
+  55.3%,
+  80.2% {
+    width: 0;
+    margin-right: -8px;
+  }
+  81.2%,
+  100% {
+    width: 7px;
+    margin-right: 0;
+  }
+}
+
+/*
+ * The diff card opens AFTER the Edit call it is the result of.
+ *
+ * An earlier cut grew it two tool calls before the edit had even been announced,
+ * and then revealed its lines long after the turn had already reported "Done".
+ * Read in order it claimed the agent produced a diff for work it had not done.
+ *
+ * 110px is the card's MEASURED height plus a little, not a round guess: a 28.5px
+ * header over a 78px body (6px padding either side, four lines at 11px/1.5 =
+ * 16.5px), 108px in `.ap-mock` author space. It was 76px, which cropped the last
+ * line and a half — including `+ background: #E2603A`, the one line in the whole
+ * card that explains the payoff that lands a moment later.
+ *
+ * The couple of pixels of slack are deliberate. The header has no explicit
+ * line-height, so its height is whatever `normal` resolves to for the loaded
+ * font, and that is not identical on every platform; being two pixels generous
+ * costs ~25ms of imperceptible dead tail on the growth and cannot clip.
+ *
+ * `max-height` must be a concrete length to animate at all, so this number
+ * cannot be derived and will NOT follow MOCK_DIFF. Add a line there, add 16.5px
+ * here.
+ */
+.ap-diff {
+  animation: ap-diff-grow var(--ap-loop) var(--pk-motion-ease-panel) infinite;
+}
+
+@keyframes ap-diff-grow {
+  0%,
+  47.6% {
+    max-height: 0;
+    opacity: 0;
+  }
+  49%,
+  78.2% {
+    max-height: 110px;
+    opacity: 1;
+  }
+  79.6%,
+  100% {
+    max-height: 0;
+    opacity: 0;
+  }
+}
+
+.ap-diff-line-1 {
+  animation: ap-diff-line-0 var(--ap-loop) ease infinite;
+}
+.ap-diff-line-2 {
+  animation: ap-diff-line-1 var(--ap-loop) ease infinite;
+}
+.ap-diff-line-3 {
+  animation: ap-diff-line-2 var(--ap-loop) ease infinite;
+}
+.ap-diff-line-4 {
+  animation: ap-diff-line-3 var(--ap-loop) ease infinite;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   ACT 3 · ★ the payoff
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/*
+ * TWO tracks, not one.
+ *
+ * The colour comes from the agent and the radius comes from a hand-scrub in the
+ * inspector — different means, fifteen percent of the loop apart. Binding them
+ * to one keyframe block would collapse that into a single event and lose the
+ * point the hero is making.
+ *
+ * Both are bound to `.ap-cta`, the class the button itself carries, so the page
+ * and the panel physically cannot disagree about what changed.
+ *
+ * `--ease-overshoot` is used here and NOWHERE else in the system. That is what
+ * makes these two moments land rather than merely happen.
+ *
+ * The colour waits until 52.6% — just after the last diff line — for the reason
+ * in the pacing note: the diff is the explanation, and an explanation that
+ * arrives after its conclusion is decoration.
+ */
+.ap-cta {
+  animation:
+    ap-cta-fill var(--ap-loop) var(--pk-motion-ease-overshoot) infinite,
+    ap-cta-radius var(--ap-loop) var(--pk-motion-ease-overshoot) infinite;
+}
+
+@keyframes ap-cta-fill {
+  0%,
+  52.6% {
+    background: #1c1917;
+  }
+  54.2%,
+  88% {
+    background: #e2603a;
+  }
+  89.4%,
+  100% {
+    background: #1c1917;
+  }
+}
+
+@keyframes ap-cta-radius {
+  0%,
+  67.9% {
+    border-radius: 6px;
+  }
+  70.6%,
+  88% {
+    border-radius: 9999px;
+  }
+  89.4%,
+  100% {
+    border-radius: 6px;
+  }
+}
+
+/*
+ * The inspector re-reads the element.
+ *
+ * Same frame as the button, and that simultaneity is the whole point — the panel
+ * is not the cause of the change, it is a view of a file that just changed under
+ * it. `step-end` because a number cross-fading between two readings is
+ * illegible for the length of the fade, and because a real value snaps.
+ *
+ * It swaps at 53.4% while the Agent tab is still in front, so nobody watches it
+ * happen; what they see is the Edit tab coming forward at 62.9% already agreeing
+ * with the page. That is the correct order of discovery.
+ */
+.ap-swap-from-fill {
+  animation: ap-swap-out var(--ap-loop) step-end infinite;
+}
+
+.ap-swap-to-fill {
+  animation: ap-swap-in var(--ap-loop) step-end infinite;
+}
+
+@keyframes ap-swap-out {
+  0% {
+    opacity: 1;
+  }
+  53.4% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ap-swap-in {
+  0% {
+    opacity: 0;
+  }
+  53.4% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.ap-swatch-fill {
+  animation: ap-swatch-fill var(--ap-loop) ease infinite;
+}
+
+@keyframes ap-swatch-fill {
+  0%,
+  52.6% {
+    background-color: #1c1917;
+  }
+  54.2%,
+  88% {
+    background-color: #e2603a;
+  }
+  89.4%,
+  100% {
+    background-color: #1c1917;
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   ACT 4 · the panel comes forward
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/*
+ * The only tab change in the loop, and it is placed in the calmest stretch on
+ * purpose: after the diff has landed and the button has changed, with nothing
+ * else moving. It pays off the idea the Agent tab cannot show on its own — that
+ * the inspector has re-read the element and now agrees with the file — without
+ * spending a single frame competing with the payoff itself.
+ */
+.ap-tab-body-agent {
+  animation: ap-tab-agent-out var(--ap-loop) ease infinite;
+}
+
+.ap-tab-body-edit {
+  animation: ap-tab-edit-in var(--ap-loop) ease infinite;
+}
+
+@keyframes ap-tab-agent-out {
+  0%,
+  61.5% {
+    opacity: 1;
+  }
+  62.9%,
+  86.5% {
+    opacity: 0;
+  }
+  87.9%,
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ap-tab-edit-in {
+  0%,
+  61.5% {
+    opacity: 0;
+  }
+  62.9%,
+  86.5% {
+    opacity: 1;
+  }
+  87.9%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/* The underline follows. */
+.ap-tab-agent {
+  animation: ap-tab-underline-agent var(--ap-loop) step-end infinite;
+}
+
+.ap-tab-edit {
+  animation: ap-tab-underline-edit var(--ap-loop) step-end infinite;
+}
+
+@keyframes ap-tab-underline-agent {
+  0% {
+    border-bottom-color: var(--ap-primary);
+    opacity: 1;
+  }
+  62.2% {
+    border-bottom-color: transparent;
+    opacity: 0.55;
+  }
+  87.1% {
+    border-bottom-color: var(--ap-primary);
+    opacity: 1;
+  }
+  100% {
+    border-bottom-color: var(--ap-primary);
+    opacity: 1;
+  }
+}
+
+@keyframes ap-tab-underline-edit {
+  0% {
+    border-bottom-color: transparent;
+    opacity: 0.55;
+  }
+  62.2% {
+    border-bottom-color: var(--ap-primary);
+    opacity: 1;
+  }
+  87.1% {
+    border-bottom-color: transparent;
+    opacity: 0.55;
+  }
+  100% {
+    border-bottom-color: transparent;
+    opacity: 0.55;
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   ACT 4 · the hand-scrubbed edit
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* A field lights the way it does on focus in the real panel: the hover surface
+   first, then the accent border. It waits for the cursor to arrive at 66. */
+.ap-field-radius {
+  animation: ap-field-focus var(--ap-loop) ease infinite;
+}
+
+@keyframes ap-field-focus {
+  0%,
+  66.1% {
+    border-color: transparent;
+    background: transparent;
+  }
+  67.2%,
+  85% {
+    border-color: var(--ap-primary);
+    background: var(--ap-surface-active);
+  }
+  86.4%,
+  100% {
+    border-color: transparent;
+    background: transparent;
+  }
+}
+
+/*
+ * The number commits at 67.9% and the button starts rounding in the same frame.
+ *
+ * `step-end` on the readout because a real value snaps to what you dragged it
+ * to; an eased 2.7% on the button because a committed value still animates its
+ * way to the new shape. The two are not in conflict — one is the field, the
+ * other is the rendered result of the field.
+ */
+.ap-swap-from-radius {
+  animation: ap-swap-out-radius var(--ap-loop) step-end infinite;
+}
+
+.ap-swap-to-radius {
+  animation: ap-swap-in-radius var(--ap-loop) step-end infinite;
+}
+
+@keyframes ap-swap-out-radius {
+  0% {
+    opacity: 1;
+  }
+  67.9% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ap-swap-in-radius {
+  0% {
+    opacity: 0;
+  }
+  67.9% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* The pending-tweak counter grows onto the bottom bar: one edit made by hand and
+   not yet sent. It is the only thing on that bar that ever moves, and its
+   arrival is what starts the breathing beat. */
+.ap-tweak-badge-wrap {
+  animation: ap-badge-space var(--ap-loop) var(--pk-motion-ease-chrome) infinite;
+}
+
+.ap-tweak-badge {
+  animation: ap-badge-pop var(--ap-loop) var(--pk-motion-ease-overshoot)
+    infinite;
+}
+
+@keyframes ap-badge-space {
+  0%,
+  72.5% {
+    width: 0;
+    margin-left: 0;
+  }
+  74%,
+  85.5% {
+    width: 20px;
+    margin-left: 2px;
+  }
+  86.9%,
+  100% {
+    width: 0;
+    margin-left: 0;
+  }
+}
+
+@keyframes ap-badge-pop {
+  0%,
+  72.5% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  74%,
+  85.5% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  86.9%,
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   Stagger families
+   ════════════════════════════════════════════════════════════════════════════
+   Four families of near-identical blocks, each one idea repeated at a fixed
+   offset. Generated arithmetic rather than hand-typed, and kept together at the
+   bottom so the hand-authored beats above stay readable.
+
+   Each family's COUNT is fixed by content/mock-page.ts and design-dock.tsx —
+   eight handles, nine inspector rows, three tool calls, four diff lines. There
+   are no spare blocks: an unused one is a lie about how many things the
+   transcript shows, and that is exactly how this file drifted before.
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* Eight handles, 0.17% apart — a sweep around the box, not eight things
+   appearing at once. */
+
+@keyframes ap-handle-pop-0 {
+  0%,
+  11.2% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  12.2%,
+  90.5% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  91.7%,
+  100% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+}
+@keyframes ap-handle-pop-1 {
+  0%,
+  11.37% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  12.37%,
+  90.5% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  91.7%,
+  100% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+}
+@keyframes ap-handle-pop-2 {
+  0%,
+  11.54% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  12.54%,
+  90.5% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  91.7%,
+  100% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+}
+@keyframes ap-handle-pop-3 {
+  0%,
+  11.71% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  12.71%,
+  90.5% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  91.7%,
+  100% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+}
+@keyframes ap-handle-pop-4 {
+  0%,
+  11.88% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  12.88%,
+  90.5% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  91.7%,
+  100% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+}
+@keyframes ap-handle-pop-5 {
+  0%,
+  12.05% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  13.05%,
+  90.5% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  91.7%,
+  100% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+}
+@keyframes ap-handle-pop-6 {
+  0%,
+  12.22% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  13.22%,
+  90.5% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  91.7%,
+  100% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+}
+@keyframes ap-handle-pop-7 {
+  0%,
+  12.39% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  13.39%,
+  90.5% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  91.7%,
+  100% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+}
+
+/*
+ * Nine inspector rows, 0.28% apart, rising as the Edit tab comes forward.
+ *
+ * They clear in REVERSE order — row 9 first, row 1 last — which is a panel
+ * emptying from the bottom up rather than a list re-rendering. An earlier cut
+ * claimed to do this in a comment and then cleared them forwards.
+ */
+
+@keyframes ap-insp-row-0 {
+  0%,
+  62.5% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  63.5%,
+  87.46% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  88.76%,
+  100% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes ap-insp-row-1 {
+  0%,
+  62.78% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  63.78%,
+  87.34% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  88.64%,
+  100% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes ap-insp-row-2 {
+  0%,
+  63.06% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  64.06%,
+  87.22% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  88.52%,
+  100% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes ap-insp-row-3 {
+  0%,
+  63.34% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  64.34%,
+  87.1% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  88.4%,
+  100% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes ap-insp-row-4 {
+  0%,
+  63.62% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  64.62%,
+  86.98% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  88.28%,
+  100% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes ap-insp-row-5 {
+  0%,
+  63.9% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  64.9%,
+  86.86% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  88.16%,
+  100% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes ap-insp-row-6 {
+  0%,
+  64.18% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  65.18%,
+  86.74% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  88.04%,
+  100% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes ap-insp-row-7 {
+  0%,
+  64.46% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  65.46%,
+  86.62% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  87.92%,
+  100% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes ap-insp-row-8 {
+  0%,
+  64.74% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  65.74%,
+  86.5% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  87.8%,
+  100% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+/* Three tool calls, 3.4% apart. Each result lands 0.8% after its own head, so
+   a row is always briefly a call with no answer yet — which is what streaming
+   actually looks like. All three clear together at 78.5%, behind the Edit tab.
+
+   3.4% is ~390ms per call: long enough that each row registers as a separate
+   thing the agent did, short enough that the turn does not feel padded. */
+
+@keyframes ap-tl-head-1 {
+  0%,
+  38.4% {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+  39.2%,
+  78.5% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  79.7%,
+  100% {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+}
+@keyframes ap-tl-head-2 {
+  0%,
+  41.8% {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+  42.6%,
+  78.5% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  79.7%,
+  100% {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+}
+@keyframes ap-tl-head-3 {
+  0%,
+  45.2% {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+  46%,
+  78.5% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  79.7%,
+  100% {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+}
+
+@keyframes ap-tl-res-1 {
+  0%,
+  39.2% {
+    opacity: 0;
+  }
+  40%,
+  78.5% {
+    opacity: 1;
+  }
+  79.7%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes ap-tl-res-2 {
+  0%,
+  42.6% {
+    opacity: 0;
+  }
+  43.4%,
+  78.5% {
+    opacity: 1;
+  }
+  79.7%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes ap-tl-res-3 {
+  0%,
+  46% {
+    opacity: 0;
+  }
+  46.8%,
+  78.5% {
+    opacity: 1;
+  }
+  79.7%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/* Four diff lines, 0.62% apart, starting once the card has finished opening. */
+
+@keyframes ap-diff-line-0 {
+  0%,
+  49.2% {
+    opacity: 0;
+  }
+  50.1%,
+  78.5% {
+    opacity: 1;
+  }
+  79.7%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes ap-diff-line-1 {
+  0%,
+  49.82% {
+    opacity: 0;
+  }
+  50.72%,
+  78.5% {
+    opacity: 1;
+  }
+  79.7%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes ap-diff-line-2 {
+  0%,
+  50.44% {
+    opacity: 0;
+  }
+  51.34%,
+  78.5% {
+    opacity: 1;
+  }
+  79.7%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes ap-diff-line-3 {
+  0%,
+  51.06% {
+    opacity: 0;
+  }
+  51.96%,
+  78.5% {
+    opacity: 1;
+  }
+  79.7%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   Tracks that deliberately run on their OWN clock
+   ════════════════════════════════════════════════════════════════════════════
+   NOT `--ap-loop`, and that is the point: these represent things that tick at
+   their own rate regardless of where the story has got to. Locking them to the
+   loop would make a caret blink once every eleven and a half seconds.
+
+   Do not "fix" these. */
+
+/* Matches `@keyframes __airship-pulse` in the real overlay — same 1s, same
+   opacity floor — so the hero and the product breathe at the same rate. */
+@keyframes ap-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+/*
+ * A text caret, blinking at the rate a text caret blinks — but only while the
+ * composer is the thing you are looking at.
+ *
+ * It stays up for the whole of the act, including the beat where the finished
+ * sentence just sits there. An earlier cut hid it with eight characters still to
+ * type, so the prompt appeared to finish itself.
+ */
+.ap-caret {
+  animation:
+    ap-caret-show var(--ap-loop) step-end infinite,
+    ap-caret-blink 1.2s step-end infinite;
+}
+
+@keyframes ap-caret-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  50.01%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ap-caret-show {
+  0% {
+    visibility: hidden;
+  }
+  15.9% {
+    visibility: visible;
+  }
+  35.4% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: hidden;
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   Pause, and reduced motion
+   ════════════════════════════════════════════════════════════════════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  /*
+   * Everything stops, pinned at the breathing beat — around frame 77.
+   *
+   * That single frame is the whole story at rest: the element selected, the
+   * prompt sent and answered, the diff behind the panel, the Edit tab forward,
+   * and BOTH edits on the button — the agent's colour and the hand-scrubbed
+   * radius, with the pending-tweak badge on the bar to say the second one has
+   * not been sent yet.
+   *
+   * Pinning matters more than it looks. For a visitor who has asked their OS to
+   * stop animations this is the ONLY frame they will ever see, so it has to be
+   * the most explanatory one — not the idle frame that happens to sit at 0%.
+   */
+  .hero-visual * {
+    animation: none !important;
+  }
+
+  .animation-pause-btn {
+    display: none;
+  }
+
+  .ap-hover-box,
+  .ap-insp-empty,
+  .ap-tab-body-agent,
+  .ap-caret,
+  .ap-swap-from-radius,
+  .ap-swap-from-fill {
+    opacity: 0;
+  }
+
+  .ap-sel-box,
+  .ap-sel-box .ap-box-label,
+  .ap-handle,
+  .ap-insp-filled,
+  .ap-insp-row,
+  .ap-tab-body-edit,
+  .ap-msg-user,
+  .ap-msg-assistant,
+  .ap-tl-head,
+  .ap-tl-res,
+  .ap-diff,
+  .ap-diff-line,
+  .ap-placeholder,
+  .ap-swap-to-radius,
+  .ap-swap-to-fill,
+  .ap-tweak-badge {
+    opacity: 1;
+  }
+
+  .ap-insp-row {
+    transform: translateY(0);
+  }
+
+  .ap-handle,
+  .ap-sel-chip,
+  .ap-tweak-badge {
+    transform: scale(1);
+  }
+
+  .ap-diff {
+    max-height: 110px;
+  }
+
+  /* The prompt has been sent, so the composer is empty again. */
+  .ap-typed {
+    clip-path: inset(0 100% 0 0);
+  }
+
+  /* The turn is finished. */
+  .ap-dot {
+    width: 0;
+    margin-right: -8px;
+  }
+
+  .ap-status-working {
+    opacity: 0;
+  }
+
+  .ap-status-done {
+    opacity: 1;
+  }
+
+  /* The panel is on its Edit tab. */
+  .ap-tab-agent {
+    border-bottom-color: transparent;
+    opacity: 0.55;
+  }
+
+  .ap-tab-edit {
+    border-bottom-color: var(--ap-primary);
+    opacity: 1;
+  }
+
+  /* Both edits applied: the agent's colour, and the radius scrubbed by hand. */
+  .ap-cta {
+    background: #e2603a;
+    border-radius: 9999px;
+  }
+
+  .ap-swatch-fill {
+    background-color: #e2603a;
+  }
+
+  /* The field the radius was scrubbed in is still focused. */
+  .ap-field-radius {
+    background: var(--ap-surface-active);
+    border-color: var(--ap-primary);
+  }
+
+  /* One tweak made by hand and not yet sent. */
+  .ap-tweak-badge-wrap {
+    width: 20px;
+    margin-left: 2px;
+  }
+
+  /* A pointer frozen mid-gesture reads as a rendering bug. */
+  .mock-cursor {
+    display: none;
+  }
+}
+
+.hero-visual.is-paused * {
+  animation-play-state: paused !important;
+}