diff --git a/packages/review/app/src/animation/animation-block.tsx b/packages/review/app/src/animation/animation-block.tsx
index 5b4df5829b..da1885f9c8 100644
--- a/packages/review/app/src/animation/animation-block.tsx
+++ b/packages/review/app/src/animation/animation-block.tsx
@@ -79,6 +79,20 @@ import { SCALE } from "./stage-scale";
 // Read on demand: a Worker may lack import.meta.url.
 const stageUrl = () => new URL("./stage.html", import.meta.url).href;
 
+// An auto-sized stage's height before it has reported one.
+const STAGE_MIN_HEIGHT = 120;
+
+// How long a new stage waits for its frames' measurement before it takes
+// its current frame's height instead.
+const MEASURE_WAIT = 1000;
+
+// Fullscreen, the stage keeps its inline layout and scales to fit the room:
+// at most 2x, past which a drawing made for a column reads as a poster, and
+// at least 0.4x, below which its text cannot be read and the room scrolls.
+const STAGE_MAX_SCALE = 2;
+
+const STAGE_MIN_SCALE = 0.4;
+
 let animeSource: Promise<string> | undefined;
 
 // anime.js's source, for the stage: its own chunk, fetched by the first
@@ -230,7 +244,19 @@ function StageBlock({
   const session = useReviewSession();
   const { diagramFullscreenOnClick } = useWhiteboardSettings();
   const frameRef = useRef<HTMLIFrameElement>(null);
-  const [contentHeight, setContentHeight] = useState(120);
+  const [contentHeight, setContentHeight] = useState(STAGE_MIN_HEIGHT);
+  // The widest the stage's content has reached past its edge, in any frame;
+  // the stage keeps that width and a narrower block scrolls it.
+  const [minWidth, setMinWidth] = useState(0);
+  // The tallest frame of the scenario, from a hidden measuring copy, so the
+  // stage does not change height as the reader steps through frames.
+  const [measuredHeight, setMeasuredHeight] = useState(0);
+  const [measureRun, setMeasureRun] = useState<number | null>(null);
+  const [measureLate, setMeasureLate] = useState(false);
+  const slotSizesRef = useRef(new Map<string, number>());
+  const remeasureTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const measureRuns = useRef(0);
+  const canvasRef = useRef<HTMLDivElement>(null);
   const [slots, setSlots] = useState<SlotLayout[]>([]);
   const [error, setError] = useState<string | null>(null);
   const clip = node.type === "clip";
@@ -263,6 +289,23 @@ function StageBlock({
   // figure's height so the document keeps its place.
   const [expanded, setExpanded] = useState(false);
   const [held, setHeld] = useState(0);
+
+  // The stage's inline width, which it keeps fullscreen, scaled to the room.
+  const [inlineWidth, setInlineWidth] = useState(0);
+
+  const [room, setRoom] = useState<{ width: number; height: number } | null>(
+    null,
+  );
+
+  const roomRef = useRef<HTMLDivElement>(null);
+
+  // What the figure leaves behind when it moves to the overlay: a placeholder
+  // of its height, and the width its stage was laid out at.
+  const holdInline = () => {
+    setHeld(figureRef.current?.offsetHeight ?? 0);
+    setInlineWidth(canvasRef.current?.clientWidth ?? 0);
+  };
+
   const openRef = useRef<HTMLButtonElement>(null);
   const closeRef = useRef<HTMLButtonElement>(null);
 
@@ -340,7 +383,7 @@ function StageBlock({
     if (!tourOpen) {
       captureUiEvent(session, "tour_started", { steps: tour.stops.length });
 
-      if (!expanded) setHeld(figureRef.current?.offsetHeight ?? 0);
+      if (!expanded) holdInline();
     }
 
     setExpanded(false);
@@ -387,7 +430,11 @@ function StageBlock({
   onMessage.current = (message) => {
     switch (message.type) {
       case "size":
-        setContentHeight(Math.ceil(message.height));
+        if (message.height !== undefined)
+          setContentHeight(Math.ceil(message.height));
+
+        if (message.width > 0)
+          setMinWidth((widest) => Math.max(widest, Math.ceil(message.width)));
         break;
       case "slots":
         setSlots(message.slots);
@@ -418,6 +465,66 @@ function StageBlock({
   const bootedRef = useRef<HTMLIFrameElement | null>(null);
   const bootPlayer = useEffectEvent(() => player.boot());
 
+  // The stage's first message, for the stage showing and for a measuring copy.
+  const stageInit = useCallback(
+    async (
+      figure: Element,
+      kind: ReturnType<StagePlayer["boot"]>,
+      paint: boolean,
+    ): Promise<StageInit> => {
+      const [anime, fonts] = await Promise.all([loadAnime(), loadFonts()]);
+
+      return {
+        type: "init",
+        ...kind,
+        html: node.html,
+        kit: STAGE_KIT_CSS,
+        autoSize: node.height === "auto",
+        code: Object.keys(node.code),
+        codeTitles: codeTitles(node, data.anchors),
+        blocks: [...embeddable.keys()],
+        ...readTheme(figure),
+        scale: SCALE,
+        reducedMotion: reducedMotion(),
+        paint,
+        libraries: [anime],
+        fonts,
+      };
+    },
+    [node, data.anchors, embeddable],
+  );
+
+  // What a measuring copy of an animation boots with: the scenario showing,
+  // from its first frame. A clip has one timeline and no frames to measure.
+  const measureKind = (): ReturnType<StagePlayer["boot"]> | null => {
+    if (node.type !== "animation") return null;
+
+    const sequence =
+      node.scenarios?.find((scenario) => scenario.key === player.scenario)
+        ?.frames ?? null;
+
+    const first = sequence
+      ? node.frames.findIndex((frame) => frame.key === sequence[0])
+      : 0;
+
+    return {
+      mode: "frames",
+      frames: node.frames.map(
+        ({ key, title, caption, data: frameData, code }) => ({
+          key,
+          title,
+          caption,
+          data: frameData,
+          code,
+        }),
+      ),
+      markers: [],
+      scenarios: [],
+      frame: Math.max(0, first),
+      ...(sequence && { sequence }),
+    };
+  };
+
   // Hand the stage its runtime and a private port when its page first loads.
   // A later load in the same frame is a page the stage navigated to, which
   // gets neither. A new frame, for an edit or for going fullscreen, boots.
@@ -470,34 +577,35 @@ function StageBlock({
       [channel.port2],
     );
 
-    const init: Omit<StageInit, "libraries" | "fonts"> = {
-      type: "init",
-      ...kind,
-      html: node.html,
-      kit: STAGE_KIT_CSS,
-      autoSize: node.height === "auto",
-      code: Object.keys(node.code),
-      codeTitles: codeTitles(node, data.anchors),
-      blocks: [...embeddable.keys()],
-      ...readTheme(figure),
-      scale: SCALE,
-      reducedMotion: reducedMotion(),
-      paint,
-    };
-
-    Promise.all([loadAnime(), loadFonts()]).then(
-      ([anime, fonts]) =>
-        channel.port1.postMessage({
-          ...init,
-          libraries: [anime],
-          fonts,
-        } satisfies HostMessage),
+    stageInit(figure, kind, paint).then(
+      (init) => channel.port1.postMessage(init satisfies HostMessage),
       () => {
         setError(`The ${noun} libraries or fonts could not be loaded.`);
         endPaint();
       },
     );
-  }, [node, noun, embeddable, endPaint, portRef]);
+  }, [noun, endPaint, portRef, stageInit]);
+
+  // Measure again in a new copy after anything that can move a frame's layout.
+  const remeasure = useCallback(() => {
+    clearTimeout(remeasureTimer.current);
+    setMeasureRun(++measureRuns.current);
+  }, []);
+
+  // A new stage keeps its first height until its frames are measured, so it
+  // grows once, to its tallest frame, rather than to its current one first.
+  useEffect(() => {
+    setMeasuredHeight(0);
+    setMeasureLate(false);
+    slotSizesRef.current.clear();
+    remeasure();
+    const timer = setTimeout(() => setMeasureLate(true), MEASURE_WAIT);
+
+    return () => clearTimeout(timer);
+  }, [stageKey, remeasure]);
+
+  useEffect(() => remeasure(), [player.scenario, theme, remeasure]);
+  useEffect(() => () => clearTimeout(remeasureTimer.current), []);
 
   useEffect(() => () => portRef.current?.close(), [portRef]);
 
@@ -517,6 +625,57 @@ function StageBlock({
 
   const fullscreen = (tourOpen || expanded) && portalTarget !== null;
 
+  // Fullscreen, the room the controls leave the stage, inside its padding.
+  useLayoutEffect(() => {
+    const element = roomRef.current;
+
+    if (!fullscreen || !element) {
+      setRoom(null);
+
+      return;
+    }
+
+    const read = () => {
+      const style = getComputedStyle(element);
+
+      setRoom({
+        width:
+          element.clientWidth -
+          Number.parseFloat(style.paddingLeft) -
+          Number.parseFloat(style.paddingRight),
+        height:
+          element.clientHeight -
+          Number.parseFloat(style.paddingTop) -
+          Number.parseFloat(style.paddingBottom),
+      });
+    };
+
+    read();
+    const observer = new ResizeObserver(read);
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, [fullscreen]);
+
+  // Going fullscreen draws a new canvas; a resize changes its width.
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+
+    if (!canvas) return;
+    let width = canvas.clientWidth;
+    remeasure();
+
+    const observer = new ResizeObserver(() => {
+      if (canvas.clientWidth === width) return;
+      width = canvas.clientWidth;
+      remeasure();
+    });
+
+    observer.observe(canvas);
+
+    return () => observer.disconnect();
+  }, [fullscreen, remeasure]);
+
   // Focus follows the figure in and back out to the control that opened it.
   const wasFullscreen = useRef(false);
 
@@ -611,6 +770,29 @@ function StageBlock({
     followFrame();
   }, [frameAnchor, tour]);
 
+  const stageHeight =
+    node.height !== "auto"
+      ? node.height
+      : measuredHeight || measureLate
+        ? Math.max(contentHeight, measuredHeight)
+        : STAGE_MIN_HEIGHT;
+
+  // Fullscreen, the stage keeps its inline width, so its layout and its
+  // measured height hold, and scales to fit the room: up on a wide screen,
+  // down beside the tour's pane. A narrower stage would fold the drawing.
+  const scaled = fullscreen && inlineWidth > 0;
+
+  const scale =
+    scaled && room
+      ? Math.min(
+          STAGE_MAX_SCALE,
+          Math.max(
+            STAGE_MIN_SCALE,
+            Math.min(room.width / inlineWidth, room.height / stageHeight),
+          ),
+        )
+      : 1;
+
   const figure = (
     <figure
       ref={figureRef}
@@ -628,7 +810,6 @@ function StageBlock({
       <DiagramHeader
         kind={clip ? "CLIP" : "ANIMATION"}
         title={node.title}
-        titleStyle={styles.headerTitle}
         meta={`${activeIndex + 1} / ${stops.length}`}
         action={
           fullscreen ? (
@@ -652,7 +833,7 @@ function StageBlock({
               xstyle={diagramStyles.button}
               aria-label={`Expand ${noun}`}
               onClick={() => {
-                setHeld(figureRef.current?.offsetHeight ?? 0);
+                holdInline();
                 setExpanded(true);
               }}
             >
@@ -681,47 +862,99 @@ function StageBlock({
         </div>
       )}
       <div
+        ref={roomRef}
         {...stylex.props(styles.stage, fullscreen && styles.stageFullscreen)}
       >
         <div
-          {...stylex.props(styles.canvas)}
-          style={{
-            height: node.height === "auto" ? contentHeight : node.height,
-          }}
+          {...stylex.props(styles.zoom)}
+          style={
+            scaled
+              ? { width: inlineWidth * scale, height: stageHeight * scale }
+              : undefined
+          }
         >
-          <iframe
-            key={stageKey}
-            ref={frameRef}
-            src={stageUrl()}
-            title={node.title}
-            sandbox="allow-scripts"
-            onLoad={boot}
-            {...stylex.props(styles.frame)}
-          />
-          <div {...stylex.props(styles.overlays)}>
-            {slots.map((slot) => (
-              <SlotOverlay
-                key={slot.slot}
-                slot={slot}
-                onHeight={(height) =>
-                  send({ type: "slot-size", slot: slot.slot, height })
-                }
-              >
-                {slot.kind === "code"
-                  ? node.code[slot.ref] && (
-                      <CodePeekCard
-                        source={anchorSelection(
-                          animationCode(node.code[slot.ref]!).source,
-                          node.pins,
-                        )}
-                        heightMode="capped"
-                        xstyle={styles.peek}
-                      />
-                    )
-                  : embeddable.get(slot.ref) &&
-                    children([embeddable.get(slot.ref)!])}
-              </SlotOverlay>
-            ))}
+          <div
+            ref={canvasRef}
+            {...stylex.props(
+              styles.canvas,
+              minWidth > 0 && styles.canvasScrolls,
+              scaled && styles.canvasScaled,
+            )}
+            style={{
+              height: stageHeight,
+              ...(scaled && {
+                width: inlineWidth,
+                transform: `scale(${scale})`,
+              }),
+            }}
+          >
+            <div
+              {...stylex.props(styles.sheet)}
+              style={{ minWidth: minWidth || undefined }}
+            >
+              <iframe
+                key={stageKey}
+                ref={frameRef}
+                src={stageUrl()}
+                title={node.title}
+                sandbox="allow-scripts"
+                onLoad={boot}
+                {...stylex.props(styles.frame)}
+              />
+              {node.type === "animation" &&
+                node.height === "auto" &&
+                measureRun !== null && (
+                  <MeasuringStage
+                    key={measureRun}
+                    init={() => {
+                      const kind = measureKind();
+
+                      return stageInit(figureRef.current!, kind!, false).then(
+                        (init) => ({
+                          ...init,
+                          measure: true,
+                          slotSizes: Object.fromEntries(slotSizesRef.current),
+                        }),
+                      );
+                    }}
+                    onMeasured={(height) => {
+                      setMeasuredHeight(height);
+                      setMeasureRun(null);
+                    }}
+                  />
+                )}
+              <div {...stylex.props(styles.overlays)}>
+                {slots.map((slot) => (
+                  <SlotOverlay
+                    key={slot.slot}
+                    slot={slot}
+                    onHeight={(height) => {
+                      send({ type: "slot-size", slot: slot.slot, height });
+
+                      if (slotSizesRef.current.get(slot.slot) === height)
+                        return;
+                      slotSizesRef.current.set(slot.slot, height);
+                      clearTimeout(remeasureTimer.current);
+                      remeasureTimer.current = setTimeout(remeasure, 100);
+                    }}
+                  >
+                    {slot.kind === "code"
+                      ? node.code[slot.ref] && (
+                          <CodePeekCard
+                            source={anchorSelection(
+                              animationCode(node.code[slot.ref]!).source,
+                              node.pins,
+                            )}
+                            heightMode="capped"
+                            xstyle={styles.peek}
+                          />
+                        )
+                      : embeddable.get(slot.ref) &&
+                        children([embeddable.get(slot.ref)!])}
+                  </SlotOverlay>
+                ))}
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -731,6 +964,7 @@ function StageBlock({
           label={player.strip.label}
           items={player.strip.items}
           activeIndex={activeIndex}
+          timer={player.strip.timer}
           onPick={(position) => player.pick(position, "controls")}
           onKeyDown={player.onKeyDown}
         />
@@ -795,6 +1029,66 @@ function StageBlock({
   );
 }
 
+/** A hidden copy of the stage that shows every frame of the scenario in
+ * turn and reports the tallest. Each frame's scripts run while it shows, as
+ * they would for a reader, so nothing they leave behind reaches the stage the
+ * reader sees. */
+function MeasuringStage({
+  init,
+  onMeasured,
+}: {
+  init(): Promise<StageInit>;
+  onMeasured(height: number): void;
+}) {
+  const ref = useRef<HTMLIFrameElement>(null);
+  const portRef = useRef<MessagePort | null>(null);
+  const initRef = useRef(init);
+  const onMeasuredRef = useRef(onMeasured);
+  onMeasuredRef.current = onMeasured;
+
+  // Boot on the first load only; a later one is a page the stage navigated to.
+  const boot = useCallback(() => {
+    const target = ref.current?.contentWindow;
+
+    if (!target || portRef.current) return;
+    const channel = new MessageChannel();
+    portRef.current = channel.port1;
+
+    channel.port1.onmessage = (event: MessageEvent) => {
+      const message = stageMessageSchema.safeParse(event.data);
+
+      if (message.success && message.data.type === "measured")
+        onMeasuredRef.current(message.data.height);
+    };
+
+    target.postMessage(
+      { type: STAGE_BOOT, runtime: stageRuntime.toString() },
+      "*",
+      [channel.port2],
+    );
+    initRef.current().then(
+      (message) => channel.port1.postMessage(message satisfies HostMessage),
+      () => {},
+    );
+  }, []);
+
+  useEffect(() => () => portRef.current?.close(), []);
+
+  return (
+    <iframe
+      ref={ref}
+      src={stageUrl()}
+      title="Measuring copy"
+      sandbox="allow-scripts"
+      aria-hidden="true"
+      tabIndex={-1}
+      inert
+      onLoad={boot}
+      {...stylex.props(styles.frame, styles.measuring)}
+    />
+  );
+}
+
 /** A host component drawn where the stage put its placeholder. */
 function SlotOverlay({
   slot,
@@ -910,11 +1204,6 @@ const styles = stylex.create({
     color: tokens.ink,
     font: `${fontSize.body}/${leading.normal} ${tokens.fontMono}`,
   },
-  headerTitle: {
-    overflow: { default: null, [narrow]: "visible" },
-    textOverflow: { default: null, [narrow]: "clip" },
-    whiteSpace: { default: null, [narrow]: "normal" },
-  },
   figureFullscreen: {
     display: "flex",
     flex: "1 1 auto",
@@ -948,16 +1237,35 @@ const styles = stylex.create({
     display: "flex",
     flex: "1 1 auto",
     flexDirection: "column",
+    alignItems: "center",
     justifyContent: "safe center",
     minHeight: 0,
-    overflowY: "auto",
+    overflow: "auto",
     padding: { default: space.s32, [narrow]: space.s16 },
   },
+  // The scaled stage's footprint, so the room centres and scrolls it whole.
+  zoom: {
+    flex: "0 0 auto",
+    width: "100%",
+  },
   canvas: {
     position: "relative",
     flex: "0 0 auto",
     overflow: "hidden",
   },
+  // The stage asked for a width: it keeps it, and a narrower block scrolls
+  // it sideways rather than folding the drawing.
+  canvasScrolls: {
+    overflowX: "auto",
+  },
+  canvasScaled: {
+    transformOrigin: "0 0",
+  },
+  // The stage and what the host draws over it, at the width the stage asked.
+  sheet: {
+    position: "relative",
+    height: "100%",
+  },
   overlay: {
     position: "fixed",
     inset: 0,
@@ -980,6 +1288,14 @@ const styles = stylex.create({
     backgroundColor: tokens.transparent,
   },
   // Over the stage but out of the pointer's way; each slot takes it back.
+  // Laid out at the stage's width but never seen; still rendered, so the
+  // browser does not throttle its frames.
+  measuring: {
+    position: "absolute",
+    inset: 0,
+    opacity: 0,
+    pointerEvents: "none",
+  },
   overlays: {
     position: "absolute",
     inset: 0,
diff --git a/packages/review/app/src/animation/clip-player.tsx b/packages/review/app/src/animation/clip-player.tsx
index 11f0ae8a65..0f974add6f 100644
--- a/packages/review/app/src/animation/clip-player.tsx
+++ b/packages/review/app/src/animation/clip-player.tsx
@@ -190,7 +190,7 @@ export function useClipPlayer(
         >
           {playing ? pauseIcon : playIcon}
         </ControlButton>
-        <StopCaption stop={stops[activeIndex]} />
+        <StopCaption stops={stops} activeIndex={activeIndex} />
       </>
     ),
   };
diff --git a/packages/review/app/src/animation/frame-player.tsx b/packages/review/app/src/animation/frame-player.tsx
index 14a8623c92..3d8d0354dd 100644
--- a/packages/review/app/src/animation/frame-player.tsx
+++ b/packages/review/app/src/animation/frame-player.tsx
@@ -20,8 +20,10 @@ import {
   StopCaption,
   pauseIcon,
   playIcon,
+  timerState,
+  timerVars,
 } from "./stage-controls";
-import type { StagePlayer, StageSend } from "./stage-player";
+import type { FrameTimer, StagePlayer, StageSend } from "./stage-player";
 import type { StageMessage } from "./stage-protocol";
 
 const DEFAULT_DURATION = 3000;
@@ -40,6 +42,13 @@ export function useFramePlayer(
   const [playing, setPlaying] = useState(false);
   const [settled, setSettled] = useState(-1);
   const [timeUp, setTimeUp] = useState(-1);
+  // The frame's clock, as the strip and the dots draw it, and how far a
+  // pause left it so play resumes from there.
+  const [timer, setTimer] = useState<FrameTimer | null>(null);
+  const heldRef = useRef({ index: -1, fraction: 0 });
+  // Whether the frame showing was drawn without its motion: a new stage's
+  // first frame, or a jump. Play shows such a frame again, with it.
+  const stillRef = useRef(true);
   const indexRef = useRef(index);
   indexRef.current = index;
 
@@ -81,6 +90,7 @@ export function useFramePlayer(
 
       if (next < 0 || next === indexRef.current) return;
       setIndex(next);
+      stillRef.current = instant;
       send({
         type: "frame",
         index: next,
@@ -124,6 +134,7 @@ export function useFramePlayer(
     const next = keys.includes(currentKey) ? indexRef.current : fallback;
 
     if (next !== indexRef.current) setIndex(next);
+    stillRef.current = true;
 
     // Refresh even a preserved key: lifecycle ranges, held scene changes,
     // and its timeline can differ when active order changes.
@@ -173,6 +184,7 @@ export function useFramePlayer(
 
     sequenceRef.current = sequence;
     setSequenceKeys(sequence);
+    stillRef.current = true;
 
     if (sequence && !sequence.includes(frames[indexRef.current]!.key)) {
       indexRef.current = frames.findIndex((item) => item.key === sequence[0]);
@@ -195,18 +207,61 @@ export function useFramePlayer(
     };
   };
 
-  // Play: hold each active-sequence frame for its duration and until its motion ends.
+  // Play: hold each active-sequence frame for its duration and until its
+  // motion ends. The clock runs from where a pause left this frame, and the
+  // cleanup notes how far it got.
   useEffect(() => {
     if (!playing) return;
 
-    const timer = setTimeout(
-      () => setTimeUp(index),
-      frame.duration ?? DEFAULT_DURATION,
-    );
+    const duration = frame.duration ?? DEFAULT_DURATION;
+    const held = heldRef.current;
+    const from = held.index === index ? held.fraction : 0;
+    const remaining = Math.round((1 - from) * duration);
+    const began = performance.now();
+    setTimer({ fraction: from, remaining, running: true });
+    const timeout = setTimeout(() => setTimeUp(index), remaining);
 
-    return () => clearTimeout(timer);
+    return () => {
+      clearTimeout(timeout);
+
+      const ran = Math.min(
+        1,
+        (performance.now() - began) / Math.max(1, remaining),
+      );
+
+      heldRef.current = { index, fraction: from + (1 - from) * ran };
+    };
   }, [playing, index, frame.duration]);
 
+  // Play on a frame drawn without its motion shows it again with it, so a
+  // new stage's first frame, and the first frame after Replay, move too.
+  useEffect(() => {
+    if (!playing || !stillRef.current) return;
+    stillRef.current = false;
+    send({
+      type: "frame",
+      index: indexRef.current,
+      instant: false,
+      direction: "forward",
+      adjacent: true,
+    });
+  }, [playing, index, send]);
+
+  // Paused: the marker holds where it was. A frame reached by hand has no
+  // clock, and forgets the one it held.
+  useEffect(() => {
+    if (playing) return;
+
+    const held = heldRef.current;
+
+    if (held.index === index)
+      setTimer({ fraction: held.fraction, remaining: 0, running: false });
+    else {
+      heldRef.current = { index: -1, fraction: 0 };
+      setTimer(null);
+    }
+  }, [playing, index]);
+
   useEffect(() => {
     if (!playing || timeUp !== index || settled !== index) return;
 
@@ -245,6 +300,7 @@ export function useFramePlayer(
     strip: steps && {
       label: "Steps",
       items: steps.map((item) => ({ key: item.key, text: item.label! })),
+      timer,
     },
     onKeyDown(event: KeyboardEvent) {
       if (event.key === "ArrowRight") go(activeIndex + 1, false);
@@ -267,7 +323,11 @@ export function useFramePlayer(
           onClick={() => {
             if (playing) return setPlaying(false);
 
-            if (activeIndex >= last) go(0, true);
+            // Replay starts the first frame's clock over.
+            if (activeIndex >= last) {
+              heldRef.current = { index: -1, fraction: 0 };
+              go(0, true);
+            }
 
             setPlaying(true);
           }}
@@ -281,7 +341,7 @@ export function useFramePlayer(
         >
           <path d="M9.5 6.5 15 12l-5.5 5.5" />
         </ControlButton>
-        <StopCaption stop={frame} />
+        <StopCaption stops={activeFrames} activeIndex={activeIndex} />
         {!steps && (
           <div {...stylex.props(styles.dots)} role="group" aria-label="Frames">
             {activeFrames.map((item, position) => (
@@ -289,6 +349,7 @@ export function useFramePlayer(
                 key={item.key}
                 title={item.title}
                 current={position === activeIndex}
+                timer={position === activeIndex ? timer : null}
                 onClick={() => pick(position)}
               />
             ))}
@@ -299,16 +360,22 @@ export function useFramePlayer(
   };
 }
 
+/** One frame of a strip without labels. The current dot carries the clock
+ * while playing: a ring swept clockwise over a wash, whole when time is up.
+ * At rest, and while paused, it is the filled dot it always was. */
 function FrameDot({
   title,
   current,
+  timer,
   onClick,
 }: {
   title: string;
   current: boolean;
+  timer: FrameTimer | null;
   onClick(): void;
 }) {
   const tooltip = useTooltip(title, { instant: true });
+  const sweeping = timer?.running === true;
 
   return (
     <button
@@ -316,12 +383,40 @@ function FrameDot({
       type="button"
       aria-label={title}
       aria-current={current ? "step" : undefined}
+      data-frame-timer={timer ? timerState(timer) : undefined}
       onClick={onClick}
-      {...stylex.props(styles.dot, current && styles.dotCurrent)}
-    />
+      {...stylex.props(
+        styles.dot,
+        current && styles.dotCurrent,
+        sweeping && styles.dotSweeping,
+      )}
+      style={sweeping ? timerVars(timer) : undefined}
+    >
+      {sweeping && (
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          viewBox="0 0 8 8"
+          {...stylex.props(styles.sweep)}
+        >
+          <circle
+            cx="4"
+            cy="4"
+            r="3.5"
+            pathLength={1}
+            {...stylex.props(styles.sweepRing)}
+          />
+        </svg>
+      )}
+    </button>
   );
 }
 
+// The ring drawn clockwise from twelve as the frame's time runs.
+const sweep = stylex.keyframes({
+  to: { strokeDashoffset: 0 },
+});
+
 const styles = stylex.create({
   dots: {
     display: "flex",
@@ -329,6 +424,7 @@ const styles = stylex.create({
     gap: space.s6,
   },
   dot: {
+    position: "relative",
     width: "8px",
     height: "8px",
     padding: 0,
@@ -345,4 +441,35 @@ const styles = stylex.create({
     borderColor: tokens.accent,
     backgroundColor: tokens.accent,
   },
+  // While the clock runs, the dot is a wash ring the marker sweeps around.
+  dotSweeping: {
+    borderColor: {
+      default: tokens.accentStripe,
+      [stylex.env.reducedMotion]: tokens.accent,
+    },
+    backgroundColor: {
+      default: tokens.transparent,
+      [stylex.env.reducedMotion]: tokens.accent,
+    },
+  },
+  sweep: {
+    position: "absolute",
+    inset: "-1px",
+    display: { default: "block", [stylex.env.reducedMotion]: "none" },
+    width: "8px",
+    height: "8px",
+    overflow: "visible",
+    transform: "rotate(-90deg)",
+  },
+  sweepRing: {
+    fill: "none",
+    stroke: tokens.accent,
+    strokeWidth: 1.4,
+    strokeDasharray: 1,
+    strokeDashoffset: tokens.frameTimerRest,
+    animationName: sweep,
+    animationDuration: tokens.frameTimerMs,
+    animationTimingFunction: "linear",
+    animationFillMode: "forwards",
+  },
 });
diff --git a/packages/review/app/src/animation/references.browser.test.tsx b/packages/review/app/src/animation/references.browser.test.tsx
index 36791e4529..8c32ce453f 100644
--- a/packages/review/app/src/animation/references.browser.test.tsx
+++ b/packages/review/app/src/animation/references.browser.test.tsx
@@ -4,7 +4,8 @@
 // jumps to each marker of every scenario, then plays to its end. Set
 // VITE_ANIMATION_SHOTS=1 to save a screenshot of each frame under
 // __screenshots__/references/<name>/<path>/ beside this file (gitignored),
-// the way an author looks at their work without opening Desktop:
+// the way an author looks at their work without opening Desktop, and
+// VITE_ANIMATION_WIDTH=<px> to see them folded narrow:
 //
 //   VITE_ANIMATION_SHOTS=1 pnpm --filter @dev.fast/review-canvas exec \
 //     vitest run --config vitest.config.ts --project browser \
@@ -163,8 +164,9 @@ async function mount(reference: Reference) {
   };
 
   const container = document.createElement("div");
-  // The document's width in Desktop, so layouts fold as they would there.
-  container.style.cssText = "width: 860px; margin: 0 auto;";
+  // The document's width in Desktop, so layouts fold as they would there;
+  // VITE_ANIMATION_WIDTH shows a narrower one.
+  container.style.cssText = `width: ${import.meta.env.VITE_ANIMATION_WIDTH || 860}px; margin: 0 auto;`;
   document.body.append(container);
 
   await act(async () => {
diff --git a/packages/review/app/src/animation/stage-controls.tsx b/packages/review/app/src/animation/stage-controls.tsx
index 95e6f8728f..77ba0bea40 100644
--- a/packages/review/app/src/animation/stage-controls.tsx
+++ b/packages/review/app/src/animation/stage-controls.tsx
@@ -4,11 +4,18 @@
 import { fontSize, leading, space, tracking } from "@canvas/scale.stylex";
 import { tokens } from "@canvas/tokens.stylex";
 import { IconButton } from "@canvas/ui/button";
+import { textStyles } from "@canvas/ui/text";
 import { useTooltip } from "@canvas/ui/tooltip";
 import * as stylex from "@stylexjs/stylex";
-import type { KeyboardEvent, ReactNode } from "react";
+import {
+  type CSSProperties,
+  type KeyboardEvent,
+  type ReactNode,
+  useEffect,
+  useRef,
+} from "react";
 
-import type { PlayerStop } from "./stage-player";
+import type { FrameTimer, PlayerStop } from "./stage-player";
 
 export function ControlButton({
   label,
@@ -47,32 +54,100 @@ export const playIcon = <path d="M8.5 6.5v11l9-5.5z" />;
 
 export const pauseIcon = <path d="M9 6.5v11M15 6.5v11" />;
 
-/** The title and caption of the stop showing, read out as it changes. */
-export function StopCaption({ stop }: { stop: PlayerStop | undefined }) {
+/** The title and caption of the stop showing, read out as it changes. Every
+ * stop's caption shares one cell, with only the current one visible, so the
+ * row keeps the height of the longest and never moves as the reader steps.
+ * A caption stops at three lines. */
+export function StopCaption({
+  stops,
+  activeIndex,
+}: {
+  stops: readonly PlayerStop[];
+  activeIndex: number;
+}) {
   return (
     <div {...stylex.props(styles.caption)} aria-live="polite">
-      {stop && <strong data-review-copy-prose>{stop.title}</strong>}
-      {stop?.caption && <span data-review-copy-prose> {stop.caption}</span>}
+      {stops.map((stop, position) => {
+        const current = position === activeIndex;
+
+        return (
+          <div
+            key={stop.key}
+            {...stylex.props(
+              textStyles.clamp3,
+              styles.captionText,
+              !current && styles.captionHidden,
+            )}
+          >
+            <strong data-review-copy-prose={current || undefined}>
+              {stop.title}
+            </strong>
+            {stop.caption && (
+              <span data-review-copy-prose={current || undefined}>
+                {" "}
+                {stop.caption}
+              </span>
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 }
 
-/** A named step per stop, like a progress strip. */
+/** The clock as custom properties: where the marker starts, how much of it
+ * is left to draw, and how long that takes. Reduced motion ignores them. */
+export const timerVars = (timer: FrameTimer) =>
+  // SAFETY: React passes custom properties through to style.setProperty;
+  // only its CSSProperties type leaves them out.
+  ({
+    "--frame-timer-fill": `${timer.fraction * 100}%`,
+    "--frame-timer-rest": `${1 - timer.fraction}`,
+    "--frame-timer-ms": `${timer.remaining}ms`,
+  }) as CSSProperties;
+
+/** The clock's state, a marker for tests. */
+export const timerState = (timer: FrameTimer) =>
+  timer.running ? "running" : "held";
+
+/** A named step per stop, like a progress strip. While frames play, the
+ * marker under the step showing is drawn along it as the frame's time runs,
+ * over a wash of where it will end. The strip stays one row: narrower than
+ * its steps, it scrolls sideways and keeps the step showing in view. */
 export function StepStrip({
   label,
   items,
   activeIndex,
+  timer,
   onPick,
   onKeyDown,
 }: {
   label: string;
   items: { key: string; text: string }[];
   activeIndex: number;
+  timer?: FrameTimer | null;
   onPick(position: number): void;
   onKeyDown(event: KeyboardEvent): void;
 }) {
+  const stripRef = useRef<HTMLDivElement>(null);
+
+  // Scroll the strip alone, not the page: a step off its edge comes in.
+  useEffect(() => {
+    const strip = stripRef.current;
+    const step = strip?.children[activeIndex];
+
+    if (!strip || !(step instanceof HTMLElement)) return;
+    const left = step.offsetLeft - strip.offsetLeft;
+    const right = left + step.offsetWidth;
+
+    if (left < strip.scrollLeft) strip.scrollLeft = left;
+    else if (right > strip.scrollLeft + strip.clientWidth)
+      strip.scrollLeft = right - strip.clientWidth;
+  }, [activeIndex]);
+
   return (
     <div
+      ref={stripRef}
       {...stylex.props(styles.steps)}
       role="group"
       aria-label={label}
@@ -87,16 +162,33 @@ export function StepStrip({
           {...stylex.props(
             styles.step,
             position === activeIndex && styles.stepCurrent,
+            position === activeIndex && timer && styles.stepTimed,
           )}
         >
           <span {...stylex.props(styles.stepIndex)}>{position + 1}</span>
           <span data-review-copy-prose>{item.text}</span>
+          {position === activeIndex && timer && (
+            <i
+              aria-hidden="true"
+              data-frame-timer={timerState(timer)}
+              {...stylex.props(
+                styles.timer,
+                timer.running && styles.timerRunning,
+              )}
+              style={timerVars(timer)}
+            />
+          )}
         </button>
       ))}
     </div>
   );
 }
 
+// The marker drawn along the underline, from where the clock was read to its end.
+const draw = stylex.keyframes({
+  to: { width: "100%" },
+});
+
 const styles = stylex.create({
   icon: {
     width: "16px",
@@ -108,6 +200,7 @@ const styles = stylex.create({
     strokeLinejoin: "round",
   },
   caption: {
+    display: "grid",
     flex: "1 1 auto",
     minWidth: 0,
     marginLeft: space.s6,
@@ -115,28 +208,28 @@ const styles = stylex.create({
     color: tokens.inkMuted,
     lineHeight: leading.px18,
   },
+  captionText: {
+    gridArea: "1 / 1",
+  },
+  captionHidden: {
+    visibility: "hidden",
+  },
   steps: {
-    display: { default: "flex", [stylex.env.narrow]: "grid" },
-    gridTemplateColumns: {
-      default: null,
-      [stylex.env.narrow]: "repeat(4, minmax(0, 1fr))",
-    },
-    overflowX: { default: "auto", [stylex.env.narrow]: "visible" },
+    display: "flex",
+    overflowX: "auto",
     borderTopWidth: "1px",
     borderTopStyle: "solid",
     borderTopColor: tokens.rule,
   },
   step: {
+    position: "relative",
     display: "flex",
     flex: "1 1 0",
     alignItems: "center",
     justifyContent: "center",
     gap: space.s4,
-    minWidth: { default: "fit-content", [stylex.env.narrow]: 0 },
-    padding: {
-      default: `${space.s6} ${space.s10}`,
-      [stylex.env.narrow]: `${space.s6} ${space.s4}`,
-    },
+    minWidth: "fit-content",
+    padding: `${space.s6} ${space.s10}`,
     borderStyle: "none",
     borderBottomWidth: "2px",
     borderBottomStyle: "solid",
@@ -147,7 +240,7 @@ const styles = stylex.create({
     letterSpacing: tracking.chrome,
     textAlign: "center",
     textTransform: "uppercase",
-    whiteSpace: { default: "nowrap", [stylex.env.narrow]: "normal" },
+    whiteSpace: "nowrap",
     cursor: "pointer",
     outline: { default: null, ":focus-visible": `1px solid ${tokens.accent}` },
     outlineOffset: "-2px",
@@ -156,6 +249,32 @@ const styles = stylex.create({
     borderBottomColor: tokens.accent,
     color: tokens.ink,
   },
+  // With a clock, the underline rests as a wash and the marker draws over it.
+  stepTimed: {
+    borderBottomColor: {
+      default: tokens.accentStripe,
+      [stylex.env.reducedMotion]: tokens.accent,
+    },
+  },
+  // Sits on the step's own 2px underline, one height below the padding box.
+  timer: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    transform: "translateY(100%)",
+    width: {
+      default: tokens.frameTimerFill,
+      [stylex.env.reducedMotion]: "100%",
+    },
+    height: "2px",
+    backgroundColor: tokens.accent,
+  },
+  timerRunning: {
+    animationName: { default: draw, [stylex.env.reducedMotion]: "none" },
+    animationDuration: tokens.frameTimerMs,
+    animationTimingFunction: "linear",
+    animationFillMode: "forwards",
+  },
   stepIndex: {
     color: "inherit",
   },
diff --git a/packages/review/app/src/animation/stage-player.ts b/packages/review/app/src/animation/stage-player.ts
index 47ed6cc311..a76cd67233 100644
--- a/packages/review/app/src/animation/stage-player.ts
+++ b/packages/review/app/src/animation/stage-player.ts
@@ -21,6 +21,15 @@ export type PickedBy = "controls" | "tour";
 
 export type StageSend = (message: HostMessage) => void;
 
+/** How far the frame showing has run while playing: the fraction reached
+ * when it was read, the milliseconds left to run, and whether it is running
+ * or holding (paused, or full and waiting for the stage to settle). */
+export interface FrameTimer {
+  fraction: number;
+  remaining: number;
+  running: boolean;
+}
+
 export interface StagePlayer {
   /** The stops of the path showing, in order. */
   stops: readonly PlayerStop[];
@@ -45,8 +54,13 @@ export interface StagePlayer {
   /** The scenario showing, by key. */
   scenario: string | undefined;
   selectScenario(key: string): void;
-  /** The strip of named stops under the stage, when there is one. */
-  strip: { label: string; items: { key: string; text: string }[] } | null;
+  /** The strip of named stops under the stage, when there is one, with the
+   * clock of the stop showing while frames play. */
+  strip: {
+    label: string;
+    items: { key: string; text: string }[];
+    timer?: FrameTimer | null;
+  } | null;
   /** Drawn right under the stage. */
   afterStage?: ReactNode;
   /** The footer's controls and caption. */
diff --git a/packages/review/app/src/animation/stage-protocol.ts b/packages/review/app/src/animation/stage-protocol.ts
index 254f54325f..449fe1e2de 100644
--- a/packages/review/app/src/animation/stage-protocol.ts
+++ b/packages/review/app/src/animation/stage-protocol.ts
@@ -76,6 +76,13 @@ export interface StageInit {
   scenario?: string;
   /** Library sources the stage runs before its own scripts: anime.js. */
   libraries: string[];
+  /** A hidden copy that steps through every frame of its scenario and
+   * reports the tallest, so the stage the reader sees can take that height
+   * before they reach it. */
+  measure?: boolean;
+  /** The heights the host's content takes in each slot, for a measuring
+   * copy, which has no content of its own drawn over it. */
+  slotSizes?: Record<string, number>;
 }
 
 export type HostMessage =
@@ -109,6 +116,10 @@ export type HostMessage =
 /** The tallest an auto-sized stage may report itself. */
 export const STAGE_MAX_HEIGHT = 4000;
 
+/** The widest a stage may ask to stay, scrolling sideways in a narrower
+ * block. */
+export const STAGE_MAX_WIDTH = 4000;
+
 /** The most code and block placeholders a stage may lay out. */
 export const STAGE_MAX_SLOTS = 200;
 
@@ -138,8 +149,17 @@ export type SlotLayout = z.infer<typeof slotLayoutSchema>;
 /** The stage runs an agent's scripts, so the host parses what it sends. */
 export const stageMessageSchema = z.discriminatedUnion("type", [
   z.strictObject({ type: z.literal("ready") }),
+  /** The stage's content height, when it sizes itself, and the width its
+   * content reaches past its right edge, or 0 when it fits. The host keeps
+   * the stage at least as wide as any width it reported. */
   z.strictObject({
     type: z.literal("size"),
+    height: z.number().finite().nonnegative().max(STAGE_MAX_HEIGHT).optional(),
+    width: z.number().finite().nonnegative().max(STAGE_MAX_WIDTH),
+  }),
+  /** A measuring copy's tallest frame. */
+  z.strictObject({
+    type: z.literal("measured"),
     height: z.number().finite().nonnegative().max(STAGE_MAX_HEIGHT),
   }),
   z.strictObject({
diff --git a/packages/review/app/src/animation/stage-reference.ts b/packages/review/app/src/animation/stage-reference.ts
index 9ba9db0d52..4825585268 100644
--- a/packages/review/app/src/animation/stage-reference.ts
+++ b/packages/review/app/src/animation/stage-reference.ts
@@ -16,7 +16,9 @@ import type {
   Scene,
   SceneCardOptions,
   SceneChange,
+  SceneGroupOptions,
   SceneItemOptions,
+  SceneLegendEntry,
   SceneLinkOptions,
   SceneOptions,
   SceneSendOptions,
@@ -50,6 +52,8 @@ export type StageReferenceChecks = [
   Check<Matches<Scene, Reference.Scene>>,
   Check<Matches<SceneOptions, Reference.SceneOptions>>,
   Check<Matches<SceneCardOptions, Reference.SceneCardOptions>>,
+  Check<Matches<SceneGroupOptions, Reference.SceneGroupOptions>>,
+  Check<Matches<SceneLegendEntry, Reference.SceneLegendEntry>>,
   Check<Matches<SceneItemOptions, Reference.SceneItemOptions>>,
   Check<Matches<SceneChange, Reference.SceneChange>>,
   Check<Matches<SceneLinkOptions, Reference.SceneLinkOptions>>,
diff --git a/packages/review/app/src/animation/stage-runtime.ts b/packages/review/app/src/animation/stage-runtime.ts
index 7e49e139be..1a7f8576f8 100644
--- a/packages/review/app/src/animation/stage-runtime.ts
+++ b/packages/review/app/src/animation/stage-runtime.ts
@@ -69,6 +69,50 @@ type PaintHandler = (paint: PaintChange) => FrameResult;
 
 type Tone = "accent" | "added" | "removed" | "modified" | "muted";
 
+/** A card's silhouette; whiteboard.css draws each. */
+type Form =
+  | "box"
+  | "pill"
+  | "cut"
+  | "cylinder"
+  | "drum"
+  | "stack"
+  | "window"
+  | "bars";
+
+type Outline = "solid" | "dashed" | "dotted";
+
+/** A resting border colour; a tone takes over while one is set. */
+type Color = "ink" | "accent" | "teal" | "violet";
+
+/** What a review did to the part a card stands for: a resting mark in the
+ * change colours that a frame's tone does not replace. */
+type Change = "added" | "modified" | "removed";
+
+export interface SceneGroupOptions {
+  id: string;
+  /** The cells the group covers; the cards in them sit on its wash. */
+  at: Cell;
+  /** A caps title in its top-left corner. */
+  title?: string;
+  /** The wash and title colour. Default a neutral well. */
+  color?: Color;
+  enter?: string;
+  exit?: string;
+  only?: string[];
+}
+
+/** One row of a scene's legend: a glyph drawn like a card with these marks,
+ * and what it means. */
+export interface SceneLegendEntry {
+  label: string;
+  form?: Form;
+  outline?: Outline;
+  color?: Color;
+  tone?: Tone;
+  change?: Change;
+}
+
 /** Where a scene part sits: 1-based column and row, with optional row and
  * column spans. A wide peek spans columns: [1, 2, 1, 4] is row 2, four wide. */
 export type Cell = [
@@ -85,6 +129,16 @@ export interface SceneCardOptions {
   /** The second line under the title; scene.on changes it per frame. */
   note?: string;
   tone?: Tone;
+  /** What the card is, by silhouette: a cylinder for a database, a drum
+   * for a cache, a stack for a queue, a window for a client, bars for a
+   * service of this codebase. Default box. */
+  form?: Form;
+  /** The border's line; dashed for a service outside the system. */
+  outline?: Outline;
+  /** The border's colour at rest, for grouping cards of a kind. */
+  color?: Color;
+  /** What the change under review did to this part, marked at rest. */
+  change?: Change;
   /** Show from this frame on, hide from this one on, or only on these. */
   enter?: string;
   exit?: string;
@@ -124,9 +178,8 @@ export interface SceneLinkOptions {
 }
 
 export interface SceneSendOptions {
+  /** Colours the chip, and the edge and its label while the frame shows. */
   tone?: Tone;
-  /** Keep the chip at the target instead of fading it out on arrival. */
-  stay?: boolean;
   enter?: string;
   exit?: string;
   /** The only frames in which the chip is visible. */
@@ -155,8 +208,6 @@ export interface SceneOptions {
   columns?: number;
   /** A selector or element to put the scene inside; defaults to document.body. */
   container?: string | HTMLElement;
-  /** Stack cards when their cells become too narrow. Defaults to true. */
-  responsive?: boolean;
 }
 
 export interface Scene {
@@ -178,6 +229,12 @@ export interface Scene {
   ): HTMLElement;
   /** A small pill above the scene; scene.on changes its text per frame. */
   badge(options: { text?: string; tone?: Tone }): HTMLElement;
+  /** A washed box behind the cards in its cells, with a caps title: a
+   * boundary such as a service, a process or a layer. */
+  group(options: SceneGroupOptions): HTMLElement;
+  /** A row under the scene that says what the cards' marks mean, one glyph
+   * and label per entry. */
+  legend(entries: SceneLegendEntry[]): HTMLElement;
   /** Change a card, item, or badge from this frame on: its text or tone.
    * The change holds until the next frame that changes the same part. */
   on(frame: string, part: CardRef, change: SceneChange): void;
@@ -316,7 +373,8 @@ export interface WhiteboardShim {
    * Pass `visible` for a static marker at its authored position. */
   token(options?: TokenOptions): HTMLElement;
   /** Move a token along an arrow during a frame. It fades out on arrival
-   * unless `stay` keeps it at the arrow's head. */
+   * and waits at the arrow's head until the next frame unless `stay` is
+   * false, which fades it on arrival. */
   travel(
     token: HTMLElement | string,
     arrow: SVGGElement,
@@ -337,7 +395,12 @@ export interface WhiteboardShim {
  */
 export function stageRuntime(port: MessagePort): void {
   const root = document.documentElement;
-  const post = (message: StageMessage) => port.postMessage(message);
+
+  // A measuring copy reports its measurement and nothing else.
+  const post = (message: StageMessage) => {
+    if (!init?.measure || message.type === "measured")
+      port.postMessage(message);
+  };
 
   // The host shows the first 2000 characters.
   const fail = (message: string) =>
@@ -771,6 +834,12 @@ export function stageRuntime(port: MessagePort): void {
     timeline?.pause();
     timeline = undefined;
 
+    // A tween starts from its target's value when the timeline is built. A
+    // chip that has already ridden its edge sits at 1, and a timeline built
+    // then, as a scenario change does, would tween it 1 to 1: the chip would
+    // appear at its head without moving. Every ride starts over.
+    for (const travel of travels) travel.progress.value = 0;
+
     if (!queued.size) return;
 
     const next = lib().createTimeline({
@@ -1257,6 +1326,8 @@ export function stageRuntime(port: MessagePort): void {
     group: SVGGElement;
     path: SVGPathElement;
     text?: SVGTextElement;
+    /** The edge's own label, shown when no send of the frame names one. */
+    label?: string;
     clipPath: SVGClipPathElement;
     clipRect: SVGRectElement;
     from: Element;
@@ -1276,6 +1347,18 @@ export function stageRuntime(port: MessagePort): void {
 
   const arrows: ArrowRecord[] = [];
 
+  // The <text> an edge's label is drawn in, made on first need.
+  const labelText = (arrow: ArrowRecord) => {
+    if (!arrow.text) {
+      const text = document.createElementNS(svg, "text");
+      text.setAttribute("class", "wb-label");
+      arrow.group.append(text);
+      arrow.text = text;
+    }
+
+    return arrow.text;
+  };
+
   const layer = <T extends Element>(selector: string, make: () => T): T => {
     const found = document.body.querySelector<T>(`:scope > ${selector}`);
 
@@ -1508,6 +1591,9 @@ export function stageRuntime(port: MessagePort): void {
     return t0 < t1;
   };
 
+  // Milliseconds into a frame before its first send sets off.
+  const SEND_LEAD = 240;
+
   const route = (arrow: ArrowRecord) => {
     const endpointDetached =
       !arrow.from.isConnected ||
@@ -1558,28 +1644,47 @@ export function stageRuntime(port: MessagePort): void {
         if (!crosses(p, q, r, 4)) continue;
         const cx = r.x + r.width / 2;
         const cy = r.y + r.height / 2;
-        // Signed distance of the card's centre from the a→b line.
+        // Signed distance of the card's centre from the a→b line, and how
+        // far the card reaches across that line: its extent along the normal,
+        // so a horizontal edge clears a wide card by its height, not its width.
         const signed = ((bx - ax) * (cy - ay) - (by - ay) * (cx - ax)) / length;
-        const span = Math.abs(signed) + Math.max(r.width, r.height) / 2 + 20;
-        const bow = span * 2 * Math.sign(signed || 1);
+
+        const reach = (Math.abs(nx) * r.width + Math.abs(ny) * r.height) / 2;
+
+        const span = Math.abs(signed) + reach + 20;
+
+        // A card dead on the line is passed on the side nearer the body's
+        // middle, so a top-row edge bows down into the drawing, not out of it.
+        const body = document.body.getBoundingClientRect();
+
+        const toMiddle =
+          (body.x + body.width / 2 - (ax + bx) / 2) * nx +
+          (body.y + body.height / 2 - (ay + by) / 2) * ny;
+
+        const side =
+          Math.abs(signed) > 12 ? Math.sign(signed) : -Math.sign(toMiddle || 1);
+
+        const bow = span * 2 * side;
 
         if (Math.abs(bow) > Math.abs(avoid)) avoid = bow;
       }
     }
 
     const bend = arrow.bend + Math.max(-240, Math.min(240, avoid));
+    // A parallel edge's offset moves the whole line, ends and control alike,
+    // once it is routed, so a fanned pair stays straight and parallel.
     const px = nx * arrow.offset;
     const py = ny * arrow.offset;
 
     let control = {
-      x: (ax + bx) / 2 + ((by - ay) / length) * bend + px,
-      y: (ay + by) / 2 - ((bx - ax) / length) * bend + py,
+      x: (ax + bx) / 2 + ((by - ay) / length) * bend,
+      y: (ay + by) / 2 - ((bx - ax) / length) * bend,
     };
 
     let start = edge(a, control);
     let end = edge(b, control);
 
-    if (bend === 0 && arrow.offset === 0) {
+    if (bend === 0) {
       const boundaryStart = edge(a, control, 0);
       const boundaryEnd = edge(b, control, 0);
       const tangentX = (bx - ax) / length;
@@ -1623,6 +1728,8 @@ export function stageRuntime(port: MessagePort): void {
     start.y += py;
     end.x += px;
     end.y += py;
+    control.x += px;
+    control.y += py;
     const d = `M${start.x} ${start.y}Q${control.x} ${control.y} ${end.x} ${end.y}`;
 
     if (arrow.path.getAttribute("d") !== d) {
@@ -1741,11 +1848,12 @@ export function stageRuntime(port: MessagePort): void {
 
       // Reserve the packet's swept area, not just its current position. This
       // keeps a label still and readable throughout a trip instead of moving
-      // it out of the chip's way on every animation frame.
+      // it out of the chip's way on every animation frame. A sent message's
+      // label is quiet while its chip rides, so it keeps its place.
       const flights: DOMRect[] = [];
 
       for (const travel of travels) {
-        if (travel.arrow !== arrow) continue;
+        if (travel.arrow !== arrow || travel.sent) continue;
         const chip = travel.element.getBoundingClientRect();
 
         if (!chip.width || !chip.height) continue;
@@ -1880,15 +1988,10 @@ export function stageRuntime(port: MessagePort): void {
       to,
       bend: spec.bend ?? 0,
       offset: spec.offset ?? 0,
+      label: spec.label,
     };
 
-    if (spec.label) {
-      const text = document.createElementNS(svg, "text");
-      text.setAttribute("class", "wb-label");
-      text.textContent = spec.label;
-      group.append(text);
-      record.text = text;
-    }
+    if (spec.label) labelText(record).textContent = spec.label;
 
     arrowLayer().append(group);
     arrows.push(record);
@@ -1924,6 +2027,21 @@ export function stageRuntime(port: MessagePort): void {
     }
   };
 
+  const runHandlers = (change: FrameChange) => {
+    const waits: Promise<unknown>[] = [];
+
+    for (const key of ["*", change.frame.key])
+      for (const handler of handlers.get(key) ?? []) {
+        try {
+          waits.push(...finished(handler(change)));
+        } catch (error) {
+          fail(String(error));
+        }
+      }
+
+    return waits;
+  };
+
   const motionPreference = matchMedia("(prefers-reduced-motion: reduce)");
   const prefersReducedMotion = () => motionPreference.matches;
 
@@ -1962,6 +2080,15 @@ export function stageRuntime(port: MessagePort): void {
     root.dataset.frameIndex = String(frame.index);
     applyStates();
 
+    // A chip stays where its frame left it until the reader moves on: the
+    // frame showing hides every other frame's chips.
+    for (const travel of travels)
+      if (travel.frame !== frame.key)
+        // SAFETY: a travel's element is the <div> chip makeToken created.
+        (travel.element as HTMLElement).style.opacity = "0";
+
+    restSends(frame.key);
+
     const change: FrameChange = {
       frame,
       previous,
@@ -1977,16 +2104,7 @@ export function stageRuntime(port: MessagePort): void {
       instant: instantMode,
     };
 
-    const waits: Promise<unknown>[] = [];
-
-    for (const key of ["*", frame.key])
-      for (const handler of handlers.get(key) ?? []) {
-        try {
-          waits.push(...finished(handler(change)));
-        } catch (error) {
-          fail(String(error));
-        }
-      }
+    const waits = runHandlers(change);
 
     waits.push(
       playSegment(
@@ -2403,6 +2521,10 @@ export function stageRuntime(port: MessagePort): void {
     element: Element;
     arrow: ArrowRecord;
     owner: TravelOwner;
+    /** The frame the chip rides in. */
+    frame: string;
+    /** For a scene send: the message, which rests as the edge's label. */
+    sent?: { label: string; tone?: Tone };
     progress: { value: number };
     x?: number;
     y?: number;
@@ -2448,6 +2570,38 @@ export function stageRuntime(port: MessagePort): void {
     lib().set(travel.element, { translateX: x, translateY: y });
   };
 
+  // A frame's messages rest as labels on their edges, in the marker colour,
+  // in place of the edges' own labels: the same picture however the frame
+  // was reached. The chips only ride, when the frame plays.
+  const restSends = (key: string) => {
+    const sent = new Map<ArrowRecord, { labels: string[]; tone?: Tone }>();
+
+    for (const travel of travels) {
+      if (!travel.sent || travel.frame !== key) continue;
+
+      const entry = sent.get(travel.arrow) ?? {
+        labels: [],
+        tone: travel.sent.tone,
+      };
+
+      entry.labels.push(travel.sent.label);
+      sent.set(travel.arrow, entry);
+    }
+
+    for (const arrow of arrows) {
+      const entry = sent.get(arrow);
+      const label = entry ? entry.labels.join(" · ") : (arrow.label ?? "");
+
+      if (entry) arrow.group.dataset.wbSent = entry.tone ?? "accent";
+      else delete arrow.group.dataset.wbSent;
+
+      if (arrow.text && arrow.text.textContent !== label)
+        arrow.text.textContent = label;
+    }
+
+    placeArrowLabels();
+  };
+
   // Tween normalized progress along an edge during a frame. Geometry is read
   // when the token is placed, rather than captured when the timeline is built.
   const travelAlong = (
@@ -2459,6 +2613,7 @@ export function stageRuntime(port: MessagePort): void {
       ease?: string;
       position?: TimelinePosition;
       stay?: boolean;
+      sent?: { label: string; tone?: Tone };
     },
   ) => {
     let owner = travelOwners.get(element);
@@ -2473,11 +2628,20 @@ export function stageRuntime(port: MessagePort): void {
       element,
       arrow: record,
       owner,
+      frame,
+      sent: options.sent,
       progress: { value: 0 },
     };
 
     travels.push(travel);
 
+    // The message rests as a label on its edge: quiet from the frame's start,
+    // while the chip sets off and rides, until the chip dissolves into it at
+    // the head. Drawn without motion, the frame lands on that rest.
+    const text = options.sent ? labelText(record) : undefined;
+
+    if (text) frameTimeline(frame).set(text, { opacity: 0 }, 0);
+
     const segment = frameTimeline(frame)
       .set(owner.active, { value: travel.id }, options.position)
       .set(element, { opacity: 1 }, "<")
@@ -2491,8 +2655,14 @@ export function stageRuntime(port: MessagePort): void {
         "<",
       );
 
-    // A token left at an edge's head covers the node it points at.
-    if (!options.stay) segment.add(element, { opacity: 0, duration: 250 }, "<");
+    if (text)
+      segment
+        .add(element, { opacity: 0, duration: 250 }, "<")
+        .add(text, { opacity: 1, duration: 250 }, "<<");
+    // A token waits at the head until the next frame, so what it carried
+    // can be read; `stay: false` fades it on arrival instead.
+    else if (options.stay === false)
+      segment.add(element, { opacity: 0, duration: 250 }, "<");
   };
 
   // One shared id per element, for pairing parallel edges and lookups.
@@ -2517,6 +2687,14 @@ export function stageRuntime(port: MessagePort): void {
     if (options.highlight) el.dataset.highlight = options.highlight.join(" ");
   };
 
+  // Scenes with a layout pass due next frame. Measuring runs them first, so
+  // it reports the gap and width a scene is about to take.
+  const dueLayouts = new Set<() => void>();
+
+  const layoutScenes = () => {
+    for (const run of [...dueLayouts]) run();
+  };
+
   // A grid of cards, routed edges, and chips that ride them. The scene owns
   // spacing, edge drawing, and chip motion, so every scene reads the same.
   const scene = (options: SceneOptions): Scene => {
@@ -2532,6 +2710,14 @@ export function stageRuntime(port: MessagePort): void {
     // the widest, so it sits between its cards rather than off its line.
     const rowLabels = new Set<string>();
 
+    // How many columns each placed part spans. A scene drawn on half-step
+    // columns, every card two wide so a pair can centre under one, is as
+    // wide as the columns its cards make, not the ones it declares.
+    const spans = new Map<HTMLElement, number>();
+
+    const unitSpan = () =>
+      Math.max(1, Math.min(...spans.values(), Infinity) || 1);
+
     const sizeGap = () => {
       if (!rowLabels.size) return;
       const probe = document.createElement("span");
@@ -2547,62 +2733,46 @@ export function stageRuntime(port: MessagePort): void {
       }
 
       probe.remove();
-      grid.style.columnGap = `${Math.min(160, Math.max(48, Math.ceil(widest) + 16))}px`;
-    };
+      // A grouped scene keeps the wider gap its groups ask for.
+      const floor = grid.querySelector(".wb-group") ? 72 : 48;
 
-    const responsive = options.responsive !== false && columns > 1;
+      grid.style.columnGap = `${Math.min(160, Math.max(floor, Math.ceil(widest) + 16))}px`;
+    };
 
-    // Preserve declared cells on wider layouts. In a narrower container, fold
-    // into fewer columns in reading order, and below that into one, rather
-    // than shrinking cards, tables and labels to fit.
-    const reflow = () => {
+    // The scene keeps its columns at any width: narrower than its cards
+    // need, it overflows the stage, which asks its host for the width and is
+    // scrolled sideways, rather than shrinking cards, tables and labels, or
+    // reflowing the drawing.
+    const layout = () => {
       sizeGap();
-
-      if (!responsive) return;
       const style = getComputedStyle(grid);
 
       const padding =
         parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
 
       const gap = parseFloat(style.columnGap);
-
-      const fits = (count: number) =>
-        grid.clientWidth >= count * 140 + (count - 1) * gap + padding;
-
-      let shown = columns;
-
-      if (!fits(columns)) {
-        shown = 1;
-
-        // An even fold, or two columns: four cards fold to two rows of two,
-        // not three and one.
-        for (let count = columns - 1; count >= 2; count--)
-          if ((columns % count === 0 || count === 2) && fits(count)) {
-            shown = count;
-            break;
-          }
-      }
-
-      grid.classList.toggle("wb-scene-compact", shown === 1);
-      grid.classList.toggle("wb-scene-fold", shown > 1 && shown < columns);
-      grid.style.setProperty("--wb-fold", String(shown));
+      const effective = Math.ceil(columns / unitSpan());
+      grid.style.minWidth = `${effective * 140 + (effective - 1) * gap + padding}px`;
     };
 
     let layoutFrame: number | undefined;
 
+    const runLayout = () => {
+      if (layoutFrame !== undefined) cancelAnimationFrame(layoutFrame);
+      layoutFrame = undefined;
+      dueLayouts.delete(runLayout);
+      layout();
+      wake();
+    };
+
     const scheduleLayout = () => {
       if (layoutFrame !== undefined) return;
-      layoutFrame = requestAnimationFrame(() => {
-        layoutFrame = undefined;
-        reflow();
-      });
+      dueLayouts.add(runLayout);
+      layoutFrame = requestAnimationFrame(runLayout);
     };
 
-    new ResizeObserver(() => {
-      wake();
-      scheduleLayout();
-    }).observe(grid);
-    reflow();
+    new ResizeObserver(() => wake()).observe(grid);
+    layout();
 
     const nodes = new Map<string, HTMLElement>();
     const links = new Map<string, ArrowRecord>();
@@ -2660,11 +2830,12 @@ export function stageRuntime(port: MessagePort): void {
       el.style.gridColumn = colSpan
         ? `${column} / span ${colSpan}`
         : String(column);
-      // Folded into fewer columns, a cell that spans columns takes the row.
-      el.toggleAttribute("data-wb-wide", (colSpan ?? 1) > 1);
+      spans.set(el, colSpan ?? 1);
       rows.set(el, row);
       el.style.gridRow = rowSpan ? `${row} / span ${rowSpan}` : String(row);
       el.style.order = String((row - 1) * columns + column);
+      // A part's span can change the columns the cards make.
+      scheduleLayout();
     };
 
     const cardEl = (ref: CardRef): HTMLElement => {
@@ -2689,6 +2860,16 @@ export function stageRuntime(port: MessagePort): void {
       el.id = options.id;
 
       if (options.code !== undefined) el.dataset.wbOpen = options.code;
+
+      if (options.form && options.form !== "box")
+        el.dataset.form = options.form;
+
+      if (options.outline && options.outline !== "solid")
+        el.dataset.outline = options.outline;
+
+      if (options.color) el.dataset.color = options.color;
+
+      if (options.change) el.dataset.change = options.change;
       place(el, options.at);
       applyLifecycle(el, options);
 
@@ -2806,6 +2987,61 @@ export function stageRuntime(port: MessagePort): void {
 
         return slot;
       },
+      group(options) {
+        const el = document.createElement("div");
+        el.className = "wb-group";
+        el.id = options.id;
+
+        if (options.color) el.dataset.color = options.color;
+        place(el, options.at);
+        applyLifecycle(el, options);
+
+        if (options.title) {
+          const title = document.createElement("div");
+          title.className = "wb-group-title";
+          title.textContent = options.title;
+          el.append(title);
+        }
+
+        // Before the cards in the DOM, so a card always paints over it.
+        grid.prepend(el);
+
+        return el;
+      },
+      legend(entries) {
+        const el = document.createElement("div");
+        el.className = "wb-legend";
+
+        for (const entry of entries) {
+          const row = document.createElement("span");
+          row.className = "wb-legend-entry";
+          const glyph = document.createElement("i");
+          glyph.className = "wb-card wb-legend-glyph";
+
+          if (entry.form && entry.form !== "box")
+            glyph.dataset.form = entry.form;
+
+          if (entry.outline && entry.outline !== "solid")
+            glyph.dataset.outline = entry.outline;
+
+          if (entry.color) glyph.dataset.color = entry.color;
+
+          if (entry.tone) glyph.dataset.tone = entry.tone;
+
+          if (entry.change) glyph.dataset.change = entry.change;
+          const box = document.createElement("span");
+          box.className = "wb-legend-box";
+          box.append(glyph);
+          const label = document.createElement("span");
+          label.textContent = entry.label;
+          row.append(box, label);
+          el.append(row);
+        }
+
+        grid.after(el);
+
+        return el;
+      },
       badge(options) {
         if (!topBar) {
           topBar = document.createElement("div");
@@ -2848,16 +3084,25 @@ export function stageRuntime(port: MessagePort): void {
 
         sendCount.set(stagger, nth + 1);
 
-        // One fixed speed, so a longer edge takes proportionally longer.
+        // One fixed speed, slow enough to read, so a longer edge takes
+        // proportionally longer; a short lead lets the frame's own change
+        // register before the chip moves.
         const duration = Math.min(
-          1500,
-          Math.max(450, Math.round(length / 0.32)),
+          2400,
+          Math.max(900, Math.round(length / 0.16)),
         );
 
+        // At rest the message is the edge's label; between cards in one row
+        // the columns open up to fit it.
+        if (rows.has(a) && rows.get(a) === rows.get(b)) {
+          rowLabels.add(label);
+          scheduleLayout();
+        }
+
         travelAlong(chip, record, frame, {
           duration,
-          position: nth * 200,
-          stay: options.stay,
+          position: SEND_LEAD + nth * 240,
+          sent: { label, tone: options.tone },
         });
       },
     };
@@ -3098,6 +3343,7 @@ export function stageRuntime(port: MessagePort): void {
   // quiet frames later, so a settling frame is still sent.
   let lastLayout = "";
   let lastHeight = -1;
+  let lastWidth = -1;
   let measuring = false;
   let looping = false;
   let quietFrames = 0;
@@ -3116,7 +3362,84 @@ export function stageRuntime(port: MessagePort): void {
         (animation) => animation.pending || animation.playState === "running",
       );
 
+  // How far the content reaches: its bottom, for an auto-sized stage's
+  // height, and its right edge, which past the viewport is the width the
+  // stage needs its host to keep.
+  const contentBounds = () => {
+    // Natural body height includes slot-size feedback from host overlays.
+    // Exclude viewport-sized drawing layers to avoid a resize feedback loop.
+    let bottom = document.body.getBoundingClientRect().bottom;
+    let widest = 0;
+
+    for (const element of document.body.querySelectorAll("*")) {
+      // Global drawing layers are viewport-sized. Their descendants can
+      // have geometry far outside authored overflow viewports, but neither
+      // the layers nor those descendants are layout content.
+      if (element.closest(".wb-arrows, .wb-tokens")) continue;
+
+      // Unpainted, the body is hidden; size the stage as it will show.
+      if (
+        !element.checkVisibility({
+          visibilityProperty: !root.hasAttribute("data-wb-unpainted"),
+          opacityProperty: true,
+        })
+      )
+        continue;
+      const rect = element.getBoundingClientRect();
+      const clipped = clipBounds(element);
+      const left = Math.max(rect.left, clipped.left);
+      const right = Math.min(rect.right, clipped.right);
+      const top = Math.max(rect.top, clipped.top);
+      const visibleBottom = Math.min(rect.bottom, clipped.bottom);
+
+      if (right <= left || visibleBottom <= top) continue;
+      bottom = Math.max(bottom, visibleBottom);
+      widest = Math.max(widest, right);
+    }
+
+    return { bottom, right: widest };
+  };
+
+  // A measuring copy shows each frame of its scenario in turn, as an instant
+  // jump does, all within one task, and reports the tallest. What a frame
+  // leaves behind does not matter: the copy is thrown away.
+  const measureFrames = () => {
+    layoutScenes();
+    const declared = declaredFrames();
+    let previous: FrameChange["previous"];
+    let tallest = 0;
+    instantMode = true;
+    root.setAttribute("data-wb-instant", "");
+
+    for (const active of activeFrames()) {
+      const frame = {
+        ...declared[frameIndex(active.key)]!,
+        index: active.index,
+      };
+
+      current = frameIndex(frame.key);
+      root.dataset.frame = frame.key;
+      root.dataset.frameIndex = String(frame.index);
+      applyStates();
+      runHandlers({ frame, previous, direction: "none", instant: true });
+      playSegment(frame.key, false);
+
+      for (const animation of document.getAnimations())
+        if (finite(animation)) animation.finish();
+
+      tallest = Math.max(tallest, contentBounds().bottom);
+      previous = frame;
+    }
+
+    // STAGE_MAX_HEIGHT in stage-protocol.ts.
+    post({
+      type: "measured",
+      height: Math.min(4000, Math.max(120, Math.ceil(tallest))),
+    });
+  };
+
   const measure = () => {
+    layoutScenes();
     let changed = false;
     clipGeometryCache = new Map();
     arrows.forEach(route);
@@ -3171,44 +3494,38 @@ export function stageRuntime(port: MessagePort): void {
       post({ type: "slots", slots });
     }
 
-    if (init?.autoSize) {
-      // Natural body height includes slot-size feedback from host overlays.
-      // Exclude viewport-sized drawing layers to avoid a resize feedback loop.
-      let bottom = document.body.getBoundingClientRect().bottom;
-
-      for (const element of document.body.querySelectorAll("*")) {
-        // Global drawing layers are viewport-sized. Their descendants can
-        // have geometry far outside authored overflow viewports, but neither
-        // the layers nor those descendants are layout content.
-        if (element.closest(".wb-arrows, .wb-tokens")) continue;
-
-        // Unpainted, the body is hidden; size the stage as it will show.
-        if (
-          !element.checkVisibility({
-            visibilityProperty: !root.hasAttribute("data-wb-unpainted"),
-            opacityProperty: true,
-          })
-        )
-          continue;
-        const rect = element.getBoundingClientRect();
-        const clipped = clipBounds(element);
-        const left = Math.max(rect.left, clipped.left);
-        const right = Math.min(rect.right, clipped.right);
-        const top = Math.max(rect.top, clipped.top);
-        const visibleBottom = Math.min(rect.bottom, clipped.bottom);
-
-        if (right <= left || visibleBottom <= top) continue;
-        bottom = Math.max(bottom, visibleBottom);
-      }
+    const bounds = contentBounds();
+    const viewport = document.documentElement.clientWidth;
+
+    // Content past the stage's right edge, in any animation: the width the
+    // stage needs. Its host keeps it that wide and scrolls a narrower block
+    // sideways, rather than letting the drawing squeeze or fold. 0 when the
+    // content fits. STAGE_MAX_WIDTH in stage-protocol.ts.
+    const width =
+      bounds.right > viewport + 0.5
+        ? Math.min(
+            4000,
+            Math.ceil(
+              bounds.right +
+                parseFloat(getComputedStyle(document.body).paddingRight),
+            ),
+          )
+        : 0;
 
+    if (init?.autoSize) {
       // STAGE_MAX_HEIGHT in stage-protocol.ts.
-      const height = Math.min(4000, Math.max(120, Math.ceil(bottom)));
+      const height = Math.min(4000, Math.max(120, Math.ceil(bounds.bottom)));
 
-      if (height !== lastHeight) {
+      if (height !== lastHeight || width !== lastWidth) {
         changed = true;
         lastHeight = height;
-        post({ type: "size", height });
+        lastWidth = width;
+        post({ type: "size", height, width });
       }
+    } else if (width !== lastWidth) {
+      changed = true;
+      lastWidth = width;
+      post({ type: "size", width });
     }
 
     clipGeometryCache = undefined;
@@ -3301,10 +3618,28 @@ export function stageRuntime(port: MessagePort): void {
 
     await runSources(message.libraries);
     await runScripts([...document.body.querySelectorAll("script")]);
+
+    for (const [slot, height] of Object.entries(message.slotSizes ?? {})) {
+      const element = document.querySelector<HTMLElement>(
+        `[data-wb-slot="${slot}"]`,
+      );
+
+      if (element) element.style.height = `${height}px`;
+    }
+
     arrows.forEach(route);
 
     if (message.mode === "clip") built = true;
     else buildTimeline();
+
+    // Fonts change text metrics; measure with the faces the stage draws in.
+    if (message.measure && message.mode === "frames") {
+      await document.fonts.ready;
+      measureFrames();
+
+      return;
+    }
+
     buildPaintTimeline();
 
     // Not painting in: the paint timeline lands at its end before the first
diff --git a/packages/review/app/src/blocks.browser.test.tsx b/packages/review/app/src/blocks.browser.test.tsx
index 36aac2cf81..9f8ef77133 100644
--- a/packages/review/app/src/blocks.browser.test.tsx
+++ b/packages/review/app/src/blocks.browser.test.tsx
@@ -481,7 +481,7 @@ describe("block components", () => {
     expect(container.querySelector("[role='alert']")).toBeNull();
   });
 
-  it("sizes an animation to host code peeks and shrinks when content is removed", async () => {
+  it("sizes an animation to its tallest frame before the reader steps to it", async () => {
     const { container } = await mountFixture("animation", {
       document: [
         {
@@ -490,8 +490,8 @@ describe("block components", () => {
           title: "Auto size",
           height: "auto",
           frames: [
-            { key: "peek", title: "Code" },
             { key: "small", title: "Small" },
+            { key: "peek", title: "Code" },
           ],
           code: { status: "head/order.ts#L1" },
           html: '<style>html[data-frame="small"] [data-wb-code] { display: none; }</style><div style="padding: 24px"><div style="height: 100px">Content</div><div data-wb-code="status"></div></div>',
@@ -506,37 +506,64 @@ describe("block components", () => {
     const slot = () =>
       container.querySelector<HTMLElement>("[data-animation-slot='code']");
 
+    // The small frame alone is 148px; the stage already fits the code peek.
+    expect(await settled(() => stage.offsetHeight > 148)).toBe(true);
+    const tallest = stage.offsetHeight;
+
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>("button[aria-label='Next frame']")!
+        .click(),
+    );
     expect(
       await settled(() => {
         const peek = slot();
 
         return (
-          peek &&
-          peek.offsetHeight > 0 &&
+          peek?.style.visibility === "visible" &&
           stage.getBoundingClientRect().bottom >=
             peek.getBoundingClientRect().bottom + 23
         );
       }),
     ).toBe(true);
-    const expanded = stage.offsetHeight;
+    expect(stage.offsetHeight).toBe(tallest);
+    expect(container.querySelector("[role='alert']")).toBeNull();
+  });
+
+  it("sizes an animation to its tallest frame when frame handlers build it", async () => {
+    const { container } = await mountFixture("animation", {
+      document: [
+        {
+          id: "block-1",
+          type: "animation",
+          title: "Handler size",
+          height: "auto",
+          frames: [
+            { key: "short", title: "Short", data: { rows: 1 } },
+            { key: "tall", title: "Tall", data: { rows: 6 } },
+          ],
+          code: {},
+          html: '<div class="rows"></div><script>whiteboard.on("*", ({ frame }) => { document.querySelector(".rows").replaceChildren(...Array.from({ length: frame.data.rows }, () => Object.assign(document.createElement("div"), { style: "height: 50px" }))); });</script>',
+        },
+      ],
+    });
+
+    const iframe = (await settled(() => container.querySelector("iframe")))!;
+    const stage = iframe.parentElement!;
+
+    // Six 50px rows, though the reader is on the one-row frame.
+    expect(await settled(() => stage.offsetHeight >= 300)).toBe(true);
+    const tallest = stage.offsetHeight;
+
     await act(async () =>
       container
         .querySelector<HTMLButtonElement>("button[aria-label='Next frame']")!
         .click(),
     );
-    expect(
-      await settled(
-        () => stage.offsetHeight === 148 && stage.offsetHeight < expanded,
-      ),
-    ).toBe(true);
-    await act(async () =>
-      container
-        .querySelector<HTMLButtonElement>(
-          "button[aria-label='Previous frame']",
-        )!
-        .click(),
+    expect(await settled(() => text(container).includes("Tall"))).toBe(true);
+    expect(await settled(() => stage.offsetHeight !== tallest, 500)).toBe(
+      false,
     );
-    expect(await settled(() => stage.offsetHeight === expanded)).toBe(true);
     expect(container.querySelector("[role='alert']")).toBeNull();
   });
 
@@ -655,6 +682,55 @@ describe("block components", () => {
     expect(container.querySelector("[role='alert']")).toBeNull();
   });
 
+  it("plays the first frame's motion when Play starts on it", async () => {
+    const { container } = await mountFixture("animation", {
+      document: [
+        {
+          id: "block-1",
+          type: "animation",
+          title: "Replay",
+          height: 240,
+          frames: [
+            { key: "a", title: "Slides in", duration: 2000 },
+            { key: "b", title: "Rests", duration: 2000 },
+          ],
+          code: { status: "head/order.ts#L1" },
+          html: [
+            '<div id="peek" data-wb-code="status" style="width: 200px; margin: 0 16px"></div>',
+            "<script>",
+            'whiteboard.timeline("a").set("#peek", { translateX: 0 }).add("#peek", { translateX: 120, duration: 900 });',
+            "</script>",
+          ].join(""),
+          pins: { repositoryId: "repo", base: "base", head: "head" },
+        },
+      ],
+    });
+
+    const x = () => {
+      const slot = container.querySelector<HTMLElement>(
+        "[data-animation-slot='code']",
+      );
+
+      return (
+        slot && Number(/translate\(([-\d.]+)px/.exec(slot.style.transform)?.[1])
+      );
+    };
+
+    // Loaded without motion, the first frame rests at its end.
+    const rest = await settled(x);
+
+    expect(rest).toBeGreaterThan(0);
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>("button[aria-label='Play']")!
+        .click(),
+    );
+    // Play shows the frame again with its motion: the peek starts over.
+    expect(await settled(() => x()! < rest! - 20)).toBe(true);
+    expect(await settled(() => x() === rest)).toBe(true);
+    expect(container.querySelector("[role='alert']")).toBeNull();
+  });
+
   it("shows an animation's data-only element during its frames alone", async () => {
     const { container } = await mountFixture("animation", {
       document: [
@@ -830,6 +906,76 @@ describe("block components", () => {
     expect(container.querySelector("[role='alert']")).toBeNull();
   });
 
+  it("rests a frame's message as the label of its edge", async () => {
+    const { container } = await mountFixture("animation", {
+      document: [
+        {
+          id: "block-1",
+          type: "animation",
+          title: "Messages at rest",
+          height: "auto",
+          pins: { repositoryId: "repo", base: "base", head: "head" },
+          frames: [
+            { key: "idle", title: "Idle" },
+            { key: "run", title: "Request" },
+            { key: "later", title: "Later" },
+          ],
+          code: { proof: "head/order.ts#L1" },
+          html: [
+            "<script>",
+            "const s=whiteboard.scene({columns:3});",
+            'const a=s.actor({id:"a",at:[1,1],title:"A"});',
+            'const b=s.actor({id:"b",at:[3,1],title:"B"});',
+            'const edge=s.link(a,b,{label:"call"});',
+            's.send(a,b,"req","run");',
+            'const proof=whiteboard.code("proof");proof.style.width="10px";document.body.append(proof);',
+            'const chip=document.querySelector(".wb-token"),text=edge.querySelector("text");',
+            "const read=()=>({label:text.textContent,sent:edge.dataset.wbSent,labelOn:Number(getComputedStyle(text).opacity)>.5,chipOn:Number(getComputedStyle(chip).opacity)>.5});",
+            // In its frame the message is the label, in the marker, with no
+            // chip in sight; in any other frame the edge wears its own label.
+            'const rest=(key)=>{const r=read();return !r.chipOn&&r.labelOn&&(key==="run"?r.label==="req"&&r.sent==="accent":r.label==="call"&&!r.sent)};',
+            // Each way into a frame reports its own width, so a stale one
+            // cannot pass for the next.
+            'const widths={idle:"200px",later:"220px",run:"260px"};',
+            'whiteboard.on("*",({frame,direction})=>{',
+            'if(direction!=="forward"||frame.key!=="run"){setTimeout(()=>{proof.style.width=rest(frame.key)?widths[frame.key]:"100px"},300);return}',
+            // Played, the chip rides while the label is quiet, then settles.
+            'setTimeout(()=>{const r=read();const riding=r.chipOn&&!r.labelOn;setTimeout(()=>{proof.style.width=riding?(rest("run")?"240px":"120px"):"100px"},2800)},700)});',
+            "</script>",
+          ].join(""),
+        },
+      ],
+    });
+
+    const width = () =>
+      container.querySelector<HTMLElement>("[data-animation-slot='code']")
+        ?.style.width;
+
+    const step = (label: string) =>
+      act(async () =>
+        container
+          .querySelector<HTMLButtonElement>(`button[aria-label='${label}']`)!
+          .click(),
+      );
+
+    const outcome = (...expected: string[]) =>
+      settled(() =>
+        width() === "100px" || expected.includes(width()!)
+          ? width()
+          : undefined,
+      );
+
+    expect(await outcome("200px")).toBe("200px");
+    await step("Next frame");
+    expect(await outcome("240px", "120px")).toBe("240px");
+    await step("Next frame");
+    expect(await outcome("220px")).toBe("220px");
+    // Stepped back into, the frame shows the same rest as a fresh draw.
+    await step("Previous frame");
+    expect(await outcome("260px")).toBe("260px");
+    expect(container.querySelector("[role='alert']")).toBeNull();
+  });
+
   it("clears a later frame's note when the reader steps back", async () => {
     const { container } = await mountFixture("animation", {
       document: [
@@ -1161,46 +1307,89 @@ describe("block components", () => {
     expect(stages.count("ready")).toBe(1);
   });
 
-  it("folds a scene into fewer columns before one, and opens columns to fit a row's link labels", async () => {
-    const scene = (box: string) =>
-      `const ${box} = whiteboard.scene({ columns: 4, container: "#${box}" });` +
-      ["a", "b", "c", "d"]
-        .map(
-          (id, i) =>
-            `${box}.actor({ id: "${box}-${id}", at: [${i + 1}, 1], title: "${id}" });`,
-        )
-        .join("") +
-      `${box}.link("${box}-a", "${box}-b", { label: "init + port to the stage" });` +
-      `${box}.peek("status", { at: [1, 2, 1, 4] });`;
-
+  it("keeps a scene's columns at a minimum width, scrolling the block sideways, and opens columns to fit a row's link labels", async () => {
     const { container } = await mountFixture("animation", {
       document: [
         {
           id: "block-1",
           type: "animation",
-          title: "Folds",
+          title: "Wide scene",
           height: "auto",
           frames: [{ key: "only", title: "Only" }],
           code: { status: "head/order.ts#L1" },
-          // Each scene reports its column count and gap through the error line.
+          // Six cards in a row with a label that opens the gap, and a wide
+          // peek: wider than any block, so the stage asks for its width. Once
+          // the stage is as wide as the scene, or time is up, it reports its
+          // columns, gap and card widths through the error line.
           html:
-            '<div id="narrow" style="width: 760px"></div><div id="wide" style="width: 1400px"></div><script>' +
-            scene("narrow") +
-            scene("wide") +
-            'const report = (id) => { const s = getComputedStyle(document.querySelector(`#${id} .wb-scene`)); return `${id} ${s.gridTemplateColumns.split(" ").length} gap ${parseFloat(s.columnGap) > 48}`; };' +
-            'setTimeout(() => { throw new Error(`${report("narrow")}, ${report("wide")}`); }, 600);' +
+            "<script>const s = whiteboard.scene({ columns: 6 });" +
+            ["a", "b", "c", "d", "e", "f"]
+              .map(
+                (id, i) =>
+                  `s.actor({ id: "${id}", at: [${i + 1}, 1], title: "${id}" });`,
+              )
+              .join("") +
+            's.link("a", "b", { label: "init + port to the stage" });' +
+            's.peek("status", { at: [1, 2, 1, 6] });' +
+            "const deadline = Date.now() + 3000;" +
+            'const check = () => { const grid = document.querySelector(".wb-scene"); const fits = grid.getBoundingClientRect().width <= document.documentElement.clientWidth; if (!fits && Date.now() < deadline) { setTimeout(check, 50); return; } const style = getComputedStyle(grid); const widths = [...grid.querySelectorAll(".wb-card")].map((card) => card.getBoundingClientRect().width); throw new Error(`columns ${style.gridTemplateColumns.split(" ").length} gap ${parseFloat(style.columnGap) > 48} cards ${Math.min(...widths) >= 140} fits ${fits}`); };' +
+            "setTimeout(check, 300);" +
             "</script>",
           pins: { repositoryId: "repo", base: "base", head: "head" },
         },
       ],
     });
 
-    expect(await settled(() => alertText(container).includes("narrow"))).toBe(
+    expect(await settled(() => alertText(container).includes("columns"))).toBe(
       true,
     );
     expect(alertText(container)).toContain(
-      "narrow 2 gap true, wide 4 gap true",
+      "columns 6 gap true cards true fits true",
+    );
+
+    // The block scrolls the stage, at least six cards and their gaps wide.
+    const iframe = container.querySelector("iframe")!;
+    const figure = container.querySelector<HTMLElement>(".animation-block")!;
+    const scroller = iframe.parentElement!.parentElement!;
+    expect(getComputedStyle(scroller).overflowX).toBe("auto");
+    expect(iframe.getBoundingClientRect().width).toBeGreaterThan(
+      figure.clientWidth,
+    );
+    expect(iframe.getBoundingClientRect().width).toBeGreaterThanOrEqual(
+      6 * 140 + 5 * 48 + 48,
+    );
+  });
+
+  it("keeps any stage as wide as its content reaches and scrolls the block sideways", async () => {
+    // A hand-made layout: a lane wider than the block, drawn with no scene.
+    const { container } = await mountFixture(
+      "animation",
+      {
+        document: documentSchema.parse([
+          {
+            id: "block-1",
+            type: "animation",
+            title: "Wide lane",
+            height: 160,
+            frames: [{ key: "a", title: "One" }],
+            code: {},
+            html: '<div class="wb-lane" style="width: 900px">Wide</div>',
+            pins: { repositoryId: "repo", base: "base", head: "head" },
+          },
+        ]),
+      },
+      "width: 480px",
     );
+
+    const iframe = (await settled(() => container.querySelector("iframe")))!;
+    const figure = container.querySelector<HTMLElement>(".animation-block")!;
+    expect(figure.clientWidth).toBeLessThan(900);
+    expect(
+      await settled(() => iframe.getBoundingClientRect().width >= 900),
+    ).toBe(true);
+    expect(
+      getComputedStyle(iframe.parentElement!.parentElement!).overflowX,
+    ).toBe("auto");
   });
 
   it("starts on the first scenario and switches the stage's path from the picker", async () => {
@@ -1255,6 +1444,94 @@ describe("block components", () => {
     ).toBe(true);
   });
 
+  it("runs the frame's clock along the step underline while playing, holds it on pause and drops it on a hand step", async () => {
+    const { container } = await mountFixture("animation", {
+      document: [
+        {
+          id: "block-1",
+          type: "animation",
+          title: "Clock",
+          height: "auto",
+          frames: [
+            { key: "a", title: "Start", label: "START", duration: 1500 },
+            { key: "b", title: "Middle", label: "MIDDLE", duration: 1500 },
+          ],
+          code: {},
+          html: "<p>Stage</p>",
+          pins: { repositoryId: "repo", base: "base", head: "head" },
+        },
+      ],
+    });
+
+    const press = (label: string) =>
+      act(async () =>
+        container
+          .querySelector<HTMLButtonElement>(`button[aria-label='${label}']`)!
+          .click(),
+      );
+
+    const timer = () =>
+      container.querySelector<HTMLElement>(
+        "[aria-label='Steps'] [data-frame-timer]",
+      );
+
+    expect(timer()).toBeNull();
+    await press("Play");
+    expect(await settled(() => timer()?.dataset.frameTimer === "running")).toBe(
+      true,
+    );
+    expect(timer()!.closest("button")!.textContent).toContain("START");
+
+    await press("Pause");
+    expect(await settled(() => timer()?.dataset.frameTimer === "held")).toBe(
+      true,
+    );
+
+    const held = Number.parseFloat(
+      timer()!.style.getPropertyValue("--frame-timer-fill"),
+    );
+
+    expect(held).toBeGreaterThan(0);
+    expect(held).toBeLessThan(100);
+
+    await press("Next frame");
+    expect(timer()).toBeNull();
+  });
+
+  it("sweeps the current dot while an animation without labels plays", async () => {
+    const { container } = await mountFixture("animation", {
+      document: [
+        {
+          id: "block-1",
+          type: "animation",
+          title: "Dots",
+          height: "auto",
+          frames: [
+            { key: "a", title: "Start", duration: 1500 },
+            { key: "b", title: "End", duration: 1500 },
+          ],
+          code: {},
+          html: "<p>Stage</p>",
+          pins: { repositoryId: "repo", base: "base", head: "head" },
+        },
+      ],
+    });
+
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>("button[aria-label='Play']")!
+        .click(),
+    );
+    expect(
+      await settled(
+        () =>
+          container.querySelector(
+            "[aria-label='Frames'] [aria-current='step'][data-frame-timer='running'] svg",
+          ) !== null,
+      ),
+    ).toBe(true);
+  });
+
   it("draws an edited animation again from its first frame", async () => {
     const animation = (caption: string) => ({
       id: "block-1",
@@ -1409,7 +1686,10 @@ describe("block components", () => {
           .click(),
       );
       expect(await settled(() => stages.count("ready") === boots)).toBe(true);
-      expect(document.querySelectorAll("iframe")).toHaveLength(1);
+      // The hidden copy that measures the frames goes once it has.
+      expect(
+        await settled(() => document.querySelectorAll("iframe").length === 1),
+      ).toBe(true);
     }
 
     expect(await settled(slot)).toBeTruthy();
@@ -1449,7 +1729,7 @@ describe("block components", () => {
     ).toBe(true);
   });
 
-  it("mounts a scene in its container and keeps narrow tables readable", async () => {
+  it("mounts a scene in its container, keeps its tables readable and holds its height across frames", async () => {
     const { container } = await mountFixture("animation", {
       document: [
         {
@@ -1477,7 +1757,7 @@ describe("block components", () => {
             'const proof=whiteboard.code("proof");proof.style.width="10px";document.body.append(proof);',
             "function luminance(color){const c=color.match(/[0-9.]+/g).slice(0,3).map(Number).map(v=>{v/=255;return v<=.04045?v/12.92:((v+.055)/1.055)**2.4});return .2126*c[0]+.7152*c[1]+.0722*c[2]}",
             "function readable(el){const x=luminance(getComputedStyle(el).color),y=luminance(getComputedStyle(a.element).backgroundColor);return (Math.max(x,y)+.05)/(Math.min(x,y)+.05)>=4.5}",
-            'function report(key){const bounds=files.element.getBoundingClientRect();const fits=[...files.element.querySelectorAll("th,td")].every(cell=>{const r=document.createRange();r.selectNodeContents(cell);return [...r.getClientRects()].every(b=>b.left>=bounds.left&&b.right<=bounds.right)});const stacked=bounds.top>a.element.getBoundingClientRect().bottom;const note=[...a.element.children].find(el=>el.textContent==="Read an object response");const contrast=readable(note)&&readable(files.element.querySelector("th"));const okay=shell.contains(a.element)&&shell.contains(badge)&&fits&&stacked===(key==="narrow")&&contrast&&(key!=="wide-idle"||b.element.getBoundingClientRect().height===0);proof.style.width=okay?(key==="narrow"?"200px":key==="wide"?"240px":"280px"):"100px"}',
+            'function report(key){const bounds=files.element.getBoundingClientRect();const fits=[...files.element.querySelectorAll("th,td")].every(cell=>{const r=document.createRange();r.selectNodeContents(cell);return [...r.getClientRects()].every(b=>b.left>=bounds.left&&b.right<=bounds.right)});const note=[...a.element.children].find(el=>el.textContent==="Read an object response");const contrast=readable(note)&&readable(files.element.querySelector("th"));const okay=shell.contains(a.element)&&shell.contains(badge)&&fits&&contrast&&(key!=="wide-idle"||b.element.getBoundingClientRect().height===0);proof.style.width=okay?(key==="narrow"?"200px":key==="wide"?"240px":"280px"):"100px"}',
             'whiteboard.on("*",({frame})=>{shell.style.width=frame.key==="narrow"?"320px":"720px";setTimeout(()=>report(frame.key),100)});',
             "</script>",
           ].join(""),
@@ -1506,6 +1786,14 @@ describe("block components", () => {
         width() === "100px" || width() === "240px" ? width() : undefined,
       ),
     ).toBe("240px");
+    // The hidden measuring copy leaves once it has reported the tallest frame;
+    // until then the stage still has its first height.
+    expect(
+      await settled(
+        () =>
+          container.querySelector("iframe[title='Measuring copy']") === null,
+      ),
+    ).toBe(true);
     const iframe = container.querySelector("iframe")!;
     const expandedHeight = iframe.getBoundingClientRect().height;
 
@@ -1519,11 +1807,9 @@ describe("block components", () => {
         width() === "100px" || width() === "280px" ? width() : undefined,
       ),
     ).toBe("280px");
-    expect(
-      await settled(
-        () => iframe.getBoundingClientRect().height < expandedHeight - 30,
-      ),
-    ).toBe(true);
+    // The stage keeps the wide frame's height; the script checked above that
+    // the future content takes no room.
+    expect(iframe.getBoundingClientRect().height).toBe(expandedHeight);
     expect(container.querySelector("[role='alert']")).toBeNull();
   });
 
@@ -2119,6 +2405,110 @@ describe("animation tour", () => {
     expect(overlay()).toBeNull();
   });
 
+  it("keeps the step strip on one row and scrolls it to the step showing", async () => {
+    const { container } = await mountFixture(
+      "animation",
+      {
+        document: documentSchema.parse([
+          {
+            id: "block-1",
+            type: "animation",
+            title: "Many steps",
+            height: 160,
+            frames: Array.from({ length: 8 }, (_, i) => ({
+              key: `s${i}`,
+              title: `Step ${i}`,
+              label: `A LONGER STEP LABEL ${i}`,
+            })),
+            code: {},
+            html: "<p>Stage</p>",
+            pins: { repositoryId: "repo", base: "base", head: "head" },
+          },
+        ]),
+      },
+      "width: 360px",
+    );
+
+    const strip = (await settled(() =>
+      container.querySelector<HTMLElement>("[aria-label='Steps']"),
+    ))!;
+
+    const steps = [...strip.querySelectorAll<HTMLElement>("button")];
+
+    const shown = (step: HTMLElement) => {
+      const rect = step.getBoundingClientRect();
+      const bounds = strip.getBoundingClientRect();
+
+      return rect.left >= bounds.left - 1 && rect.right <= bounds.right + 1;
+    };
+
+    expect(steps).toHaveLength(8);
+    expect(strip.scrollWidth).toBeGreaterThan(strip.clientWidth);
+    expect(new Set(steps.map((step) => step.offsetTop)).size).toBe(1);
+    expect(shown(steps[0]!)).toBe(true);
+    expect(shown(steps[7]!)).toBe(false);
+
+    await act(async () => steps[7]!.click());
+    expect(await settled(() => shown(steps[7]!))).toBe(true);
+
+    await act(async () => steps[0]!.click());
+    expect(await settled(() => shown(steps[0]!))).toBe(true);
+    expect(strip.scrollLeft).toBe(0);
+  });
+
+  it("scales an expanded animation up to the room it is given", async () => {
+    // The overlay spans the host, which is wider than the inline column.
+    const { container } = await mountFixture(
+      "animation",
+      {
+        document: documentSchema.parse([
+          {
+            id: "block-1",
+            type: "animation",
+            title: "Scaled",
+            height: 160,
+            frames: [{ key: "a", title: "One" }],
+            code: {},
+            html: "<p>Stage</p>",
+            pins: { repositoryId: "repo", base: "base", head: "head" },
+          },
+        ]),
+      },
+      "width: 1100px",
+    );
+
+    // The sheet holds the iframe at the stage's width; the canvas above it
+    // is what scales.
+    const inline = (await settled(() => container.querySelector("iframe")))!
+      .parentElement!.parentElement!;
+
+    const inlineWidth = inline.clientWidth;
+
+    const expand = document.querySelector<HTMLButtonElement>(
+      "button[aria-label='Expand animation']",
+    )!;
+
+    await act(async () => expand.click());
+
+    const stage = await settled(
+      () =>
+        document.querySelector<HTMLElement>("[role='dialog'] figure iframe")
+          ?.parentElement?.parentElement,
+    );
+
+    const scaleOf = () =>
+      new DOMMatrixReadOnly(getComputedStyle(stage!).transform).a;
+
+    // The overlay is wider than the column: the stage grows, to at most 2x.
+    expect(await settled(() => scaleOf() > 1)).toBe(true);
+    expect(scaleOf()).toBeLessThanOrEqual(2);
+    expect(stage!.clientWidth).toBe(inlineWidth);
+    expect(stage!.parentElement!.clientWidth).toBeCloseTo(
+      inlineWidth * scaleOf(),
+      0,
+    );
+  });
+
   it("opens its code in the column with the tour, which follows the frames", async () => {
     const { container } = await mountFixture("animation", {
       document: tourAnimation(),
diff --git a/packages/review/app/src/tokens.stylex.ts b/packages/review/app/src/tokens.stylex.ts
index 0050042160..fb81a27405 100644
--- a/packages/review/app/src/tokens.stylex.ts
+++ b/packages/review/app/src/tokens.stylex.ts
@@ -54,6 +54,10 @@ export const tokens = stylex.defineConsts({
   fontMono: "var(--font-mono)",
   fontSans: "var(--font-sans)",
   fontSerif: "var(--font-serif)",
+  // The frame clock, set inline by the step strip and the frame dots.
+  frameTimerFill: "var(--frame-timer-fill)",
+  frameTimerMs: "var(--frame-timer-ms)",
+  frameTimerRest: "var(--frame-timer-rest)",
   ghost: "var(--ghost)",
   ink: "var(--ink)",
   inkFaint: "var(--ink-faint)",
diff --git a/packages/review/app/src/ui/text.ts b/packages/review/app/src/ui/text.ts
index 4cd20ee0e3..77a5c43e0a 100644
--- a/packages/review/app/src/ui/text.ts
+++ b/packages/review/app/src/ui/text.ts
@@ -43,4 +43,11 @@ export const textStyles = stylex.create({
     WebkitBoxOrient: "vertical",
     WebkitLineClamp: 2,
   },
+  // At most three lines, the third cut with an ellipsis.
+  clamp3: {
+    display: "-webkit-box",
+    overflow: "hidden",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: 3,
+  },
 });
diff --git a/packages/review/instructions/animation.md b/packages/review/instructions/animation.md
index b793ad9108..147be07fc3 100644
--- a/packages/review/instructions/animation.md
+++ b/packages/review/instructions/animation.md
@@ -28,8 +28,8 @@ For a few services, processes or stores with messages moving between them, use `
 ```html
 <script>
   const s = whiteboard.scene({ columns: 2 });
-  const client = s.actor({ id: "client", at: [1, 1], title: "Client" });
-  const api = s.actor({ id: "api", at: [2, 1], title: "API" });
+  const client = s.actor({ id: "client", at: [1, 1], title: "Client", form: "window" });
+  const api = s.actor({ id: "api", at: [2, 1], title: "API", form: "bars" });
 
   s.send(client, api, "GET", "send");
   s.on("send", api, { note: "timed out", tone: "removed" });
@@ -38,7 +38,11 @@ For a few services, processes or stores with messages moving between them, use `
 </script>
 ```
 
-A scene names frame keys, so a new scenario means new frames and a few new lines like these. A card's `id` is its element's id, so your own CSS can address it as `#api`.
+A scene names frame keys, so a new scenario means new frames and a few new lines like these. While a frame shows, each message it sends is the label of its edge and the edge takes the marker colour, however the reader reached the frame; stepping into the frame rides a chip from the sender that settles into the label. A card's `id` is its element's id, so your own CSS can address it as `#api`. A scene keeps its columns at any width: when the board is narrower than its cards need, the block scrolls the drawing sideways rather than reflowing it.
+
+Give each card the silhouette of what it stands for, so a reader tells the parts apart before reading a title: `form: "window"` for a client, `"bars"` for a service or worker of this codebase, `"cylinder"` for a database, `"drum"` for a cache, `"stack"` for a queue or topic, `"pill"` for a start or end, `"cut"` for a branch. A third-party service or API gets `outline: "dashed"`. `color` sets a border colour at rest (`teal` for stores, `violet` for queues, `accent` for the part under discussion); a frame's `tone` takes over while set. The same `data-form`, `data-outline` and `data-color` work on a `wb-node` in a hand-made layout.
+
+Draw a boundary around cards that belong together with `s.group({ id, at: [column, row, rowSpan, colSpan], title: "SEARCH SERVICE", color })`: a washed box behind the cards in those cells, titled in its corner. On a board that reviews a change, mark what it did to a part with `change: "added" | "modified" | "removed"` on the card: its dot and left edge take the change colour at rest, and a removed part's title is struck. When the cards carry marks a reader must decode, add `s.legend([{ form: "cylinder", label: "Database" }, { change: "modified", label: "Changed here" }])`, one row under the scene; name only what matters.
 
 ### A hand-made layout: lanes, axes, graphs
 
diff --git a/packages/review/instructions/animations/cache-fill-evict/README.md b/packages/review/instructions/animations/cache-fill-evict/README.md
index 4d199cfd7c..e24ff108d2 100644
--- a/packages/review/instructions/animations/cache-fill-evict/README.md
+++ b/packages/review/instructions/animations/cache-fill-evict/README.md
@@ -14,7 +14,7 @@ A change adds or alters a cache in front of a slower dependency: its read-throug
 
 ## Technique
 
-Scene-based. `whiteboard.scene` places three cards; `scene.store` holds the entries as `cache.item(label, { enter, exit, tone })`. `scene.send` moves each request and reply, and `scene.on(frame, part, { text, tone })` changes notes and tones from a frame on. Items keep their order, so each scenario seeds its own entries, and a moved entry is one item exiting while another enters. The cache card opens code with `code:`; a `whiteboard.on("*")` handler points it at the first name in `frame.code`, so clicking it during an eviction opens the eviction range.
+Scene-based. `whiteboard.scene` places three cards; `scene.store` holds the entries as `cache.item(label, { enter, exit, tone })`. `scene.send` moves each request and reply, and `scene.on(frame, part, { text, tone })` changes notes and tones from a frame on. Items keep their order, so each scenario seeds its own entries, and a moved entry is one item exiting while another enters. The cache card opens code with `code:`; a `whiteboard.on("*")` handler points it at the first name in `frame.code`, so clicking it during an eviction opens the eviction range. The cache is a `drum` and Postgres a `cylinder`, both in `teal`, so the two stores read as stores beside the handler's plain box.
 
 ## Adapt
 
diff --git a/packages/review/instructions/animations/cache-fill-evict/animation.html b/packages/review/instructions/animations/cache-fill-evict/animation.html
index 45301f97ee..201ffbc4b3 100644
--- a/packages/review/instructions/animations/cache-fill-evict/animation.html
+++ b/packages/review/instructions/animations/cache-fill-evict/animation.html
@@ -1,15 +1,30 @@
 <style>
   /* Narrow end cards leave the cache its width and the edges room for a
      message chip to read while it travels. */
-  .wb-scene:not(.wb-scene-compact) :is(#caller, #source) { width: var(--wb-space-120); }
-  .wb-scene:not(.wb-scene-compact) #caller { justify-self: start; }
-  .wb-scene:not(.wb-scene-compact) #source { justify-self: end; }
+  .wb-scene :is(#caller, #source) { width: var(--wb-space-120); }
+  .wb-scene #caller { justify-self: start; }
+  .wb-scene #source { justify-self: end; }
 </style>
 <script>
   const s = whiteboard.scene({ columns: 3 });
   const caller = s.actor({ id: "caller", at: [1, 1], title: "Handler", note: "getUser(id)" });
-  const cache = s.store({ id: "cache", at: [2, 1], title: "UserCache", note: "LRU · capacity 3", code: "lookup" });
-  const source = s.actor({ id: "source", at: [3, 1], title: "Postgres", note: "~120 ms a read" });
+  const cache = s.store({
+    id: "cache",
+    at: [2, 1],
+    title: "UserCache",
+    note: "LRU · capacity 3",
+    form: "drum",
+    color: "teal",
+    code: "lookup",
+  });
+  const source = s.actor({
+    id: "source",
+    at: [3, 1],
+    title: "Postgres",
+    note: "~120 ms a read",
+    form: "cylinder",
+    color: "teal",
+  });
 
   // Items keep their order, so each scenario seeds its own entries, oldest first.
 
diff --git a/packages/review/instructions/animations/queue-workers/README.md b/packages/review/instructions/animations/queue-workers/README.md
index 38d36f9d54..f97f4436b0 100644
--- a/packages/review/instructions/animations/queue-workers/README.md
+++ b/packages/review/instructions/animations/queue-workers/README.md
@@ -13,7 +13,7 @@ A change introduces or tunes a job queue, a worker pool or a channel with a capa
 
 ## Technique
 
-Data-driven. Each frame's `data` holds the full state: the producer's next job and state, the queue contents (head first), the bound, each worker's job and the done list. One `whiteboard.on("*", ...)` handler redraws every card from it, then animates only what changed: it records where each job (`data-job`) was drawn before the redraw and glides it from there with `whiteboard.animate`, fading in jobs that are new. `whiteboard.arrow` draws the edges; the put edge takes `data-tone="removed"` while the producer is blocked.
+Data-driven. Each frame's `data` holds the full state: the producer's next job and state, the queue contents (head first), the bound, each worker's job and the done list. One `whiteboard.on("*", ...)` handler redraws every card from it, then animates only what changed: it records where each job (`data-job`) was drawn before the redraw and glides it from there with `whiteboard.animate`, fading in jobs that are new. `whiteboard.arrow` draws the edges; the put edge takes `data-tone="removed"` while the producer is blocked. The producer and workers are `data-form="bars"`, parts of this codebase, and the queue a violet `data-form="stack"`, so the silhouettes tell them apart before the titles do.
 
 ## Adapt
 
diff --git a/packages/review/instructions/animations/queue-workers/animation.html b/packages/review/instructions/animations/queue-workers/animation.html
index d25fbfbbe3..7a7c314506 100644
--- a/packages/review/instructions/animations/queue-workers/animation.html
+++ b/packages/review/instructions/animations/queue-workers/animation.html
@@ -1,21 +1,21 @@
 <div class="wb-grid pipeline">
-  <div class="wb-card" id="producer" data-wb-open="put">
+  <div class="wb-card" id="producer" data-form="bars" data-wb-open="put">
     <span class="wb-card-title">Producer</span>
     <span class="wb-card-note"></span>
     <div class="wb-items"></div>
   </div>
-  <div class="wb-card" id="queue" data-wb-open="put">
+  <div class="wb-card" id="queue" data-form="stack" data-color="violet" data-wb-open="put">
     <span class="wb-card-title">Queue</span>
     <span class="wb-card-note"></span>
     <div class="wb-items"></div>
   </div>
   <div class="workers">
-    <div class="wb-card" id="w1" data-wb-open="take">
+    <div class="wb-card" id="w1" data-form="bars" data-wb-open="take">
       <span class="wb-card-title">Worker 1</span>
       <span class="wb-card-note"></span>
       <div class="wb-items"></div>
     </div>
-    <div class="wb-card" id="w2" data-wb-open="take">
+    <div class="wb-card" id="w2" data-form="bars" data-wb-open="take">
       <span class="wb-card-title">Worker 2</span>
       <span class="wb-card-note"></span>
       <div class="wb-items"></div>
diff --git a/packages/review/instructions/animations/request-across-layers/README.md b/packages/review/instructions/animations/request-across-layers/README.md
index 2c69186fee..225f661b92 100644
--- a/packages/review/instructions/animations/request-across-layers/README.md
+++ b/packages/review/instructions/animations/request-across-layers/README.md
@@ -14,11 +14,11 @@ A change touches how a request is parsed, validated, mapped or persisted, and th
 
 ## Technique
 
-A scene: `whiteboard.scene({ columns: 4 })` with four `actor`s, solid `link`s for requests and dashed ones for replies, one `send` per hop per frame, and `on(frame, card, { text, tone })` for the payload shape. `highlight` rings the active card; `code` on a card and each frame's `code` link the ranges.
+A scene: `whiteboard.scene({ columns: 4 })` with four `actor`s, solid `link`s for requests and dashed ones for replies, one `send` per hop per frame, and `on(frame, card, { text, tone })` for the payload shape. Each card wears its layer's `form`: a `window` for the client, `bars` for the API and the service, a `cylinder` in `teal` for the database. A `group` boxes the API and the service as the one server, `change: "modified"` marks the API as what the review touched, and a `legend` decodes the three marks. `highlight` rings the active card; `code` on a card and each frame's `code` link the ranges.
 
 ## Adapt
 
-- Rename the actors and code ranges to your layers; keep four or fewer in a row.
+- Rename the actors and code ranges to your layers; keep four or fewer in a row. A third-party API in the chain gets `outline: "dashed"`.
 - Write each note as the payload's real type at that layer, short enough for two lines.
 - Keep one `send` per frame: sends on different edges in one frame start together.
 - Branch with new frame keys (a different body) and a scenario, not by drawing buttons.
diff --git a/packages/review/instructions/animations/request-across-layers/animation.html b/packages/review/instructions/animations/request-across-layers/animation.html
index f6159db060..84c2ead04c 100644
--- a/packages/review/instructions/animations/request-across-layers/animation.html
+++ b/packages/review/instructions/animations/request-across-layers/animation.html
@@ -2,21 +2,49 @@
   const s = whiteboard.scene({ columns: 4 });
 
   // Ring the card that reshapes the payload in each frame.
+  // Each card wears the shape of its layer: a window for the client, bars
+  // for the services this codebase runs, a cylinder for the database.
   const client = s.actor({
     id: "client",
     at: [1, 1],
     title: "Client",
+    form: "window",
     highlight: ["request", "respond", "bad-request"],
   });
-  const api = s.actor({ id: "api", at: [2, 1], title: "API", code: "validate", highlight: ["validate", "rejected"] });
+  const api = s.actor({
+    id: "api",
+    at: [2, 1],
+    title: "API",
+    form: "bars",
+    change: "modified",
+    code: "validate",
+    highlight: ["validate", "rejected"],
+  });
   const service = s.actor({
     id: "service",
     at: [3, 1],
     title: "OrderService",
+    form: "bars",
     code: "service",
     highlight: ["persist", "map"],
   });
-  const db = s.actor({ id: "db", at: [4, 1], title: "Postgres", code: "repository", highlight: ["stored"] });
+  const db = s.actor({
+    id: "db",
+    at: [4, 1],
+    title: "Postgres",
+    form: "cylinder",
+    color: "teal",
+    code: "repository",
+    highlight: ["stored"],
+  });
+
+  // The API and the service are the one codebase; the review changed the API.
+  s.group({ id: "server", at: [2, 1, 1, 2], title: "Order server" });
+  s.legend([
+    { form: "bars", label: "This codebase" },
+    { form: "cylinder", color: "teal", label: "Database" },
+    { change: "modified", label: "Changed in this review" },
+  ]);
 
   // Requests travel solid edges; replies ride dashed ones beside them.
   s.link(client, api);
diff --git a/packages/review/instructions/animations/request-timing/README.md b/packages/review/instructions/animations/request-timing/README.md
index 303bcc4141..051fbb434a 100644
--- a/packages/review/instructions/animations/request-timing/README.md
+++ b/packages/review/instructions/animations/request-timing/README.md
@@ -16,7 +16,7 @@ A clip: markers.json declares the beats, and the script builds one timeline per
 
 ## Adapt
 
-- Rename the four nodes and their `<small>` lines for your path, and keep the column centers in `client`, `api`, `cache`, `db` in step with the grid.
+- Rename the four nodes and their `<small>` lines for your path, keeping each node's `data-form` to what it stands for (a window, bars, a drum, a cylinder), and keep the column centers in `client`, `api`, `cache`, `db` in step with the grid.
 - Change the leg lengths in `hop` and `hold` to the proportions that matter, a slow query or a fast cache, and set `LONGEST` to the longest scenario's sum.
 - Add a scenario (a stale entry, a timeout) with an entry in scenarios.json and one more `build` call that places every marker.
 - Point `code` at your client call, handler, cache and query, and list them on the markers that show them.
diff --git a/packages/review/instructions/animations/request-timing/animation.html b/packages/review/instructions/animations/request-timing/animation.html
index 45f603da41..48d03f7488 100644
--- a/packages/review/instructions/animations/request-timing/animation.html
+++ b/packages/review/instructions/animations/request-timing/animation.html
@@ -1,9 +1,9 @@
 <div class="trip">
   <div class="stops">
-    <div class="wb-node" data-wb-open="client">Client<small>fetchOrder(7)</small></div>
-    <div class="wb-node" data-wb-open="handler">API<small>GET /orders/7</small></div>
-    <div class="wb-node" id="cache" data-wb-open="cache">Cache<small>orders:7</small></div>
-    <div class="wb-node" id="db" data-wb-open="query">Postgres<small>SELECT</small></div>
+    <div class="wb-node" data-form="window" data-wb-open="client">Client<small>fetchOrder(7)</small></div>
+    <div class="wb-node" data-form="bars" data-wb-open="handler">API<small>GET /orders/7</small></div>
+    <div class="wb-node" id="cache" data-form="drum" data-wb-open="cache">Cache<small>orders:7</small></div>
+    <div class="wb-node" id="db" data-form="cylinder" data-color="teal" data-wb-open="query">Postgres<small>SELECT</small></div>
   </div>
   <div class="wb-lane track">
     <span class="wb-token packet out" data-visible data-labelled>GET</span>
diff --git a/packages/review/instructions/animations/state-machine/README.md b/packages/review/instructions/animations/state-machine/README.md
index 41de6bd11c..d99ff57dad 100644
--- a/packages/review/instructions/animations/state-machine/README.md
+++ b/packages/review/instructions/animations/state-machine/README.md
@@ -14,7 +14,7 @@ A change adds, removes or guards a transition, such as an order status, a job li
 
 ## Technique
 
-Data-driven: each frame's `data` is `{ state, transition?: { event, from, to, refused? } }`, complete per frame, and one `whiteboard.on("*", ...)` draws any frame from it. Nodes are `.wb-node` elements in a CSS grid; `whiteboard.arrow` draws the edges and one `whiteboard.token` rides them. The ride is a `whiteboard.animate` over points sampled from the arrow's path, so it skips itself on a jump and under reduced motion; it plays only when stepping forward.
+Data-driven: each frame's `data` is `{ state, transition?: { event, from, to, refused? } }`, complete per frame, and one `whiteboard.on("*", ...)` draws any frame from it. Nodes are `.wb-node` elements in a CSS grid, the start and the final states as `data-form="pill"`; `whiteboard.arrow` draws the edges and one `whiteboard.token` rides them. The ride is a `whiteboard.animate` over points sampled from the arrow's path, so it skips itself on a jump and under reduced motion; it plays only when stepping forward.
 
 ## Adapt
 
diff --git a/packages/review/instructions/animations/state-machine/animation.html b/packages/review/instructions/animations/state-machine/animation.html
index 30a02eda64..1f83012054 100644
--- a/packages/review/instructions/animations/state-machine/animation.html
+++ b/packages/review/instructions/animations/state-machine/animation.html
@@ -12,11 +12,11 @@
 </style>
 
 <div class="machine">
-  <div class="wb-node" data-state="draft">draft<small>editable</small></div>
+  <div class="wb-node" data-state="draft" data-form="pill">draft<small>editable</small></div>
   <div class="wb-node" data-state="queued">queued<small>awaiting payment</small></div>
   <div class="wb-node" data-state="paid">paid<small>awaiting shipment</small></div>
-  <div class="wb-node" data-state="shipped">shipped<small>final</small></div>
-  <div class="wb-node" data-state="cancelled">cancelled<small>final</small></div>
+  <div class="wb-node" data-state="shipped" data-form="pill">shipped<small>final</small></div>
+  <div class="wb-node" data-state="cancelled" data-form="pill">cancelled<small>final</small></div>
 </div>
 <div class="wb-row status">
   <span class="wb-badge" data-wb-open="transitions"></span>
diff --git a/packages/review/instructions/animations/video-platform-architecture/README.md b/packages/review/instructions/animations/video-platform-architecture/README.md
new file mode 100644
index 0000000000..b4f2787b62
--- /dev/null
+++ b/packages/review/instructions/animations/video-platform-architecture/README.md
@@ -0,0 +1,24 @@
+# How a video gets from upload to playback
+
+An architecture scene: the client, the edge, our services and our storage as four groups, with an upload walking down through them and a playback walking back out through the CDN.
+
+## Use when
+
+A change moves work between layers of a system: a new service, a queue between two steps, a cache in front of storage, a third party taking over a step. The reviewer needs to see which layer owns each step and where a request leaves our code.
+
+## Shows
+
+- Upload: the gateway routes to the upload service, the original lands in blob storage, a transcode job waits in a queue, a worker renders renditions and the catalog marks the video ready.
+- Playback: the catalog resolves a manifest, the app fetches segments from the CDN, and the first fetch in a region misses to blob storage; later ones never touch our services.
+- Each layer is a `group`; each card wears its kind as a `form`; the storage cards share `teal`; the queue is `violet`; the CDN, which we do not run, is dashed. A `legend` decodes them.
+
+## Technique
+
+A scene of six half-step columns, every card two wide so the two edge cards sit centred under the one client, and four rows, one row per layer, placed so that every hop is between neighbouring cells: the app over the gateway, the services under the gateway's row, each store under the service that uses it. `s.group` draws the four layers behind their cells: the client in `accent`, the edge plain, services plain, storage in `teal`. Cards take `form`: `window` for the app, `bars` for our services, `drum` with `outline: "dashed"` for the CDN, `cylinder` for the stores and `stack` for the queue. One `send` per frame carries the request or the data between layers; `on` changes notes and tones as a layer takes over; `highlight` rings the card doing the work. `s.legend` lists the six marks once, under the scene.
+
+## Adapt
+
+- Rename the layers and cards to your system; keep three card columns (six half-step ones when a row must centre under another) so the groups stay one row each, and give each layer its own row. Place a card under the one that calls it: an edge between neighbouring cells reads, one that crosses a card bows. Twelve nodes in four columns tangle; nine in three read.
+- Put each real step's range in `code` and name it on the frames that show it.
+- A layer with one card still deserves its group when the boundary is the point.
+- Keep one `send` per frame; a step that fans out is two frames.
diff --git a/packages/review/instructions/animations/video-platform-architecture/animation.html b/packages/review/instructions/animations/video-platform-architecture/animation.html
new file mode 100644
index 0000000000..30f034ce9d
--- /dev/null
+++ b/packages/review/instructions/animations/video-platform-architecture/animation.html
@@ -0,0 +1,76 @@
+<script>
+  // Six half-step columns, every card two wide, so a row of two can sit
+  // centred under a row of one.
+  const s = whiteboard.scene({ columns: 6 });
+
+  // Four layers, one row each, each a group behind its cells. Every hop in
+  // the story is between neighbouring cells, so no edge crosses a card.
+  s.group({ id: "clients", at: [3, 1, 1, 2], title: "Client", color: "accent" });
+  s.group({ id: "edge", at: [2, 2, 1, 4], title: "Edge" });
+  s.group({ id: "services", at: [1, 3, 1, 6], title: "Our services" });
+  s.group({ id: "storage", at: [1, 4, 1, 6], title: "Storage", color: "teal" });
+
+  // Each card wears its kind: a window for the app, bars for our services,
+  // a drum for the CDN's cache, dashed because we do not run it, cylinders
+  // for the stores and a stack for the queue.
+  const app = s.actor({ id: "app", at: [3, 1, 1, 2], title: "Video app", form: "window", highlight: ["post", "watch", "play"] });
+  const gateway = s.actor({ id: "gateway", at: [2, 2, 1, 2], title: "API gateway", form: "bars", highlight: ["receive", "deliver"] });
+  const cdn = s.store({ id: "cdn", at: [4, 2, 1, 2], title: "CDN", note: "edge cache · third party", form: "drum", outline: "dashed", highlight: ["segment", "edge-miss"] });
+
+  const upload = s.actor({ id: "upload", at: [1, 3, 1, 2], title: "Upload service", form: "bars", code: "upload", highlight: ["store", "enqueue"] });
+  const transcoder = s.actor({ id: "transcoder", at: [3, 3, 1, 2], title: "Transcoder", note: "worker pool", form: "bars", code: "transcode", highlight: ["transcode", "renditions"] });
+  const catalog = s.actor({ id: "catalog", at: [5, 3, 1, 2], title: "Catalog service", form: "bars", code: "watch", highlight: ["ready", "lookup", "resolve"] });
+
+  const queue = s.store({ id: "queue", at: [1, 4, 1, 2], title: "Transcode queue", form: "stack", color: "violet" });
+  const blob = s.store({ id: "blob", at: [3, 4, 1, 2], title: "Blob store", note: "originals · renditions", form: "cylinder", color: "teal" });
+  const db = s.store({ id: "db", at: [5, 4, 1, 2], title: "Catalog DB", note: "videos · renditions", form: "cylinder", color: "teal" });
+
+  s.legend([
+    { form: "window", label: "Client" },
+    { form: "bars", label: "Our service" },
+    { form: "cylinder", color: "teal", label: "Store" },
+    { form: "stack", color: "violet", label: "Queue" },
+    { form: "drum", label: "Cache" },
+    { outline: "dashed", label: "Third party" },
+  ]);
+
+  // The catalog always reads its database; the other edges arrive with sends.
+  s.link(catalog, db);
+
+  // Upload: down through the layers, then ready.
+  s.send(app, gateway, "POST /videos", "post");
+  s.send(gateway, upload, "video.mp4", "receive");
+  s.on("receive", upload, { text: "receiving 1.2 GB" });
+  s.send(upload, blob, "original", "store");
+  s.on("store", blob, { text: "v1/original.mp4", tone: "added" });
+  s.on("enqueue", upload, { text: "202 Accepted", tone: "added" });
+  queue.item("v1", { enter: "enqueue", exit: "transcode", tone: "added" });
+  s.send(upload, queue, "transcode v1", "enqueue");
+  s.send(queue, transcoder, "job v1", "transcode");
+  s.on("transcode", transcoder, { text: "rendering 360p · 720p · 1080p", tone: "accent" });
+  s.on("transcode", upload, { tone: "none" });
+  s.send(transcoder, blob, "renditions", "renditions");
+  s.on("renditions", blob, { text: "v1/{360,720,1080}p" });
+  s.send(transcoder, catalog, "v1 ready", "ready");
+  s.on("ready", transcoder, { text: "idle", tone: "none" });
+  s.on("ready", catalog, { text: "v1: ready", tone: "added" });
+  s.on("ready", db, { text: "videos.v1 = ready", tone: "added" });
+
+  // Playback: resolved by our services once, then served from the edge.
+  s.on("watch", catalog, { tone: "none" });
+  s.on("watch", db, { tone: "none" });
+  s.send(app, gateway, "GET /watch/v1", "watch");
+  s.send(gateway, catalog, "watch v1", "lookup");
+  s.on("lookup", db, { text: "read videos.v1" });
+  s.send(catalog, gateway, "manifest", "resolve");
+  s.on("resolve", catalog, { text: "manifest → CDN URLs" });
+  s.send(gateway, app, "manifest", "deliver");
+  s.on("deliver", app, { text: "playing v1", tone: "accent" });
+  s.send(app, cdn, "GET seg-0001", "segment");
+  s.on("segment", cdn, { text: "miss", tone: "modified" });
+  s.send(cdn, blob, "fetch seg-0001", "edge-miss");
+  s.on("edge-miss", blob, { text: "v1/720p/seg-0001" });
+  cdn.item("seg-0001", { enter: "edge-miss", tone: "added" });
+  s.send(cdn, app, "seg-0001", "play");
+  s.on("play", cdn, { text: "cached at the edge", tone: "none" });
+</script>
diff --git a/packages/review/instructions/animations/video-platform-architecture/block.json b/packages/review/instructions/animations/video-platform-architecture/block.json
new file mode 100644
index 0000000000..175c005b5a
--- /dev/null
+++ b/packages/review/instructions/animations/video-platform-architecture/block.json
@@ -0,0 +1,17 @@
+{
+  "title": "How a video gets from upload to playback",
+  "code": {
+    "upload": {
+      "source": "head/services/upload/src/handler.ts#L18-L64",
+      "label": "handleUpload"
+    },
+    "transcode": {
+      "source": "head/services/transcoder/src/worker.ts#L30-L92",
+      "label": "TranscodeWorker.run"
+    },
+    "watch": {
+      "source": "head/services/catalog/src/watch.ts#L12-L58",
+      "label": "resolveWatch"
+    }
+  }
+}
diff --git a/packages/review/instructions/animations/video-platform-architecture/frames.json b/packages/review/instructions/animations/video-platform-architecture/frames.json
new file mode 100644
index 0000000000..80b5bc33df
--- /dev/null
+++ b/packages/review/instructions/animations/video-platform-architecture/frames.json
@@ -0,0 +1,97 @@
+[
+  {
+    "key": "post",
+    "title": "A creator uploads a video",
+    "label": "POST",
+    "caption": "The app posts the file to the API gateway, which fronts every service.",
+    "code": ["upload"]
+  },
+  {
+    "key": "receive",
+    "title": "The gateway hands it to the upload service",
+    "label": "RECEIVE",
+    "caption": "Routing by path: /videos belongs to the upload service.",
+    "code": ["upload"]
+  },
+  {
+    "key": "store",
+    "title": "The original goes to blob storage",
+    "label": "STORE",
+    "caption": "handleUpload streams the original into the blob store before anything else happens.",
+    "code": ["upload"]
+  },
+  {
+    "key": "enqueue",
+    "title": "A transcode job is queued",
+    "label": "ENQUEUE",
+    "caption": "The upload service answers the creator now; the heavy work waits in the queue.",
+    "code": ["upload"]
+  },
+  {
+    "key": "transcode",
+    "title": "A transcoder takes the job",
+    "label": "TRANSCODE",
+    "caption": "A worker takes the job and renders the renditions clients can stream.",
+    "code": ["transcode"]
+  },
+  {
+    "key": "renditions",
+    "title": "Renditions go back to the blob store",
+    "label": "RENDITIONS",
+    "caption": "Each rendition is written beside the original, keyed by video and quality.",
+    "code": ["transcode"]
+  },
+  {
+    "key": "ready",
+    "title": "The catalog marks the video ready",
+    "label": "READY",
+    "caption": "The transcoder tells the catalog service, which updates the catalog database; the video is now playable.",
+    "code": ["transcode"]
+  },
+  {
+    "key": "watch",
+    "title": "A viewer opens a video",
+    "label": "WATCH",
+    "caption": "The app asks the gateway for /watch/v1.",
+    "code": ["watch"]
+  },
+  {
+    "key": "lookup",
+    "title": "The catalog service resolves it",
+    "label": "LOOKUP",
+    "caption": "resolveWatch reads the video's row: its renditions and where they live.",
+    "code": ["watch"]
+  },
+  {
+    "key": "resolve",
+    "title": "A manifest comes back",
+    "label": "RESOLVE",
+    "caption": "The manifest lists segment URLs on the CDN, not the blob store.",
+    "code": ["watch"]
+  },
+  {
+    "key": "deliver",
+    "title": "The gateway returns the manifest",
+    "label": "DELIVER",
+    "caption": "The app can now fetch segments without touching our services again.",
+    "code": ["watch"]
+  },
+  {
+    "key": "segment",
+    "title": "The app fetches a segment from the CDN",
+    "label": "SEGMENT",
+    "caption": "Segments are plain files: the edge serves them, not the catalog."
+  },
+  {
+    "key": "edge-miss",
+    "title": "The edge misses and fetches from blob storage",
+    "label": "EDGE MISS",
+    "caption": "The first viewer in a region pays the fetch from our blob store; the CDN keeps the segment."
+  },
+  {
+    "key": "play",
+    "title": "Segments stream from the edge",
+    "label": "PLAY",
+    "caption": "Later viewers near this edge are served from the CDN's cache, without touching our services."
+  }
+]
diff --git a/packages/review/instructions/animations/video-platform-architecture/scenarios.json b/packages/review/instructions/animations/video-platform-architecture/scenarios.json
new file mode 100644
index 0000000000..aec6745c57
--- /dev/null
+++ b/packages/review/instructions/animations/video-platform-architecture/scenarios.json
@@ -0,0 +1,28 @@
+[
+  {
+    "key": "upload",
+    "label": "Upload",
+    "frames": [
+      "post",
+      "receive",
+      "store",
+      "enqueue",
+      "transcode",
+      "renditions",
+      "ready"
+    ]
+  },
+  {
+    "key": "playback",
+    "label": "Playback",
+    "frames": [
+      "watch",
+      "lookup",
+      "resolve",
+      "deliver",
+      "segment",
+      "edge-miss",
+      "play"
+    ]
+  }
+]
diff --git a/packages/review/instructions/whiteboard.d.ts b/packages/review/instructions/whiteboard.d.ts
index 358bc8b5cb..30e736b463 100644
--- a/packages/review/instructions/whiteboard.d.ts
+++ b/packages/review/instructions/whiteboard.d.ts
@@ -15,6 +15,37 @@
 /** Colors any scene part, arrow, token, or kit element (as data-tone). */
 export type Tone = "accent" | "added" | "removed" | "modified" | "muted";
 
+/** A card's silhouette, so a reader tells kinds apart before reading a
+ * title. Pick by what the card stands for: `cylinder` for a database,
+ * `drum` for a cache, `stack` for a queue or topic, `window` for a client
+ * (a browser, an app), `bars` for a service or worker of this codebase,
+ * `pill` for a start or end, `cut` for a branch. Any kit element takes it as
+ * data-form. */
+export type Form =
+  | "box"
+  | "pill"
+  | "cut"
+  | "cylinder"
+  | "drum"
+  | "stack"
+  | "window"
+  | "bars";
+
+/** A border's line. `dashed` reads as outside the system: a third-party
+ * service or API. As data-outline on a kit element. */
+export type Outline = "solid" | "dashed" | "dotted";
+
+/** A border's colour at rest, for grouping cards of a kind: `teal` suits
+ * stores, `violet` queues, `accent` the part under discussion. A tone from
+ * on() takes over while set. As data-color on a kit element. */
+export type Color = "ink" | "accent" | "teal" | "violet";
+
+/** What the change under review did to the part a card stands for. A
+ * resting mark in the change colours, its dot and a stripe down its left
+ * edge, that a frame's `tone` does not replace; a removed part's title is
+ * struck through. As data-change on a kit element. */
+export type Change = "added" | "modified" | "removed";
+
 /** One frame, as your scripts read it. */
 export interface Frame {
   key: string;
@@ -170,7 +201,7 @@ export interface Whiteboard {
   /** A dot, or a pill with a label, that travel() moves along arrows. */
   token(options?: TokenOptions): HTMLElement;
   /** Move a token along an arrow during a frame, at the arrow's live geometry.
-   * It fades out on arrival unless `stay` keeps it at the head. Trips append
+   * It waits at the head until the next frame unless `stay` is false. Trips append
    * to the frame; `position: 0` starts trips together, a number of
    * milliseconds sequences one after another. Declare trips while the script
    * first runs, not from a frame handler. */
@@ -242,12 +273,11 @@ export type Cell = [
 
 export interface SceneOptions {
   /** Declared columns; default 3. Three cards with short labels fit a row at
-   * the document's width; past four, use a second row. */
+   * the document's width; past four, use a second row. The scene keeps its
+   * columns at any width: a narrower block scrolls it sideways. */
   columns?: number;
   /** Where the scene goes; defaults to the animation's body. */
   container?: string | HTMLElement;
-  /** Fold into fewer columns when narrow, then one. Default true. */
-  responsive?: boolean;
 }
 
 export interface Scene {
@@ -265,14 +295,25 @@ export interface Scene {
   ): HTMLElement;
   /** A pill above the scene, e.g. a version; on() changes its text. */
   badge(options: { text?: string; tone?: Tone }): HTMLElement;
+  /** A washed box behind the cards in its cells, titled in its corner: a
+   * boundary such as a service, a process or a layer. Declare it before or
+   * after its cards. */
+  group(options: SceneGroupOptions): HTMLElement;
+  /** A row under the scene saying what the cards' marks mean: one glyph,
+   * drawn like a card with the entry's marks, and a label each. Name only
+   * what the reader must decode. */
+  legend(entries: SceneLegendEntry[]): HTMLElement;
   /** Change a card's note, or an item's or badge's text, or a tone, from this
    * frame on, until a later frame changes it. Follows the active path. */
   on(frame: string, part: CardRef, change: SceneChange): void;
   /** A straight edge between two cards that follows them. It bows around
    * cards in the way; keep the cells between linked cards empty. */
   link(from: CardRef, to: CardRef, options?: SceneLinkOptions): SVGGElement;
-  /** A chip that rides the edge during a frame at one fixed speed, drawing the
-   * edge if there is none. Keep labels to about 12 characters. */
+  /** A message from one card to another in a frame, drawing the edge if there
+   * is none. While the frame shows, the message is the edge's label and the
+   * edge takes the marker colour, however the frame was reached; stepping
+   * into the frame rides a chip from the sender that settles into the label.
+   * Keep labels to about 12 characters. */
   send(
     from: CardRef,
     to: CardRef,
@@ -315,12 +356,39 @@ export interface SceneCardOptions extends Lifecycle {
   /** The second line; on() changes it per frame. */
   note?: string;
   tone?: Tone;
+  /** What the card is, by silhouette; see Form. Default box. */
+  form?: Form;
+  /** The border's line; see Outline. Default solid. */
+  outline?: Outline;
+  /** The border's colour at rest; see Color. */
+  color?: Color;
+  /** What the change under review did to this part; see Change. */
+  change?: Change;
   /** Frames during which the card is ringed. */
   highlight?: string[];
   /** The code the card opens when clicked: a name in the block's code. */
   code?: string;
 }
 
+export interface SceneGroupOptions extends Lifecycle {
+  id: string;
+  /** The cells the group covers; its cards sit on its wash. */
+  at: Cell;
+  /** A caps title in its top-left corner, e.g. SEARCH SERVICE. */
+  title?: string;
+  /** The wash and title colour; see Color. Default a neutral well. */
+  color?: Color;
+}
+
+export interface SceneLegendEntry {
+  label: string;
+  form?: Form;
+  outline?: Outline;
+  color?: Color;
+  tone?: Tone;
+  change?: Change;
+}
+
 export interface SceneItemOptions extends Lifecycle {
   tone?: Tone;
 }
@@ -342,10 +410,8 @@ export interface SceneLinkOptions extends Lifecycle {
 }
 
 export interface SceneSendOptions extends Lifecycle {
+  /** Colours the chip, and the edge and its label while the frame shows. */
   tone?: Tone;
-  /** Keep the chip at its target instead of fading it out; scope when it shows
-   * with enter, exit or only. */
-  stay?: boolean;
 }
 
 export interface ArrowOptions extends Lifecycle {
diff --git a/packages/review/src/animation-stage-kit.ts b/packages/review/src/animation-stage-kit.ts
index 02f53d2277..4d382d911d 100644
--- a/packages/review/src/animation-stage-kit.ts
+++ b/packages/review/src/animation-stage-kit.ts
@@ -21,6 +21,10 @@ export const STAGE_THEME = {
   "added-bg": "--diff-added-bg",
   "removed-bg": "--diff-removed-bg",
   "modified-bg": "--diff-modified-bg",
+  // Two more outline colours for telling kinds of card apart: the software
+  // map's storage colour, and the merged purple.
+  teal: "--map-storage-border",
+  violet: "--merged",
   // Each face by its role: the chrome's for labels, mono for what a
   // terminal would print, the reading face for prose, and the code font.
   "font-sans": "--chrome-font",
@@ -52,6 +56,8 @@ export const STAGE_VARIABLES: [note: string, names: string[]][] = [
       "added-bg",
       "removed-bg",
       "modified-bg",
+      "teal",
+      "violet",
     ],
   ],
   [
@@ -178,6 +184,14 @@ const CLASSES: [selector: string, use: string][] = [
     ".wb-shape, .wb-shape-text",
     "An SVG shape drawn like a card, and the text inside it.",
   ],
+  [
+    ".wb-group",
+    "A washed box behind a scene's cards with a .wb-group-title; scene.group draws one.",
+  ],
+  [
+    ".wb-legend",
+    "A row of .wb-legend-entry glyphs and labels under a scene; scene.legend draws one.",
+  ],
   [
     "[data-wb-paint]",
     'When an agent writes the block, its parts paint in: data-wb-paint="3" orders a part (numbers first, then document order), "none" shows it and its subtree at once; data-wb-paint-style="fade|draw|wipe|none" picks the effect.',
@@ -245,9 +259,73 @@ body {
 .wb-node { min-width: 88px; text-align: center; }
 .wb-node small { display: block; color: var(--wb-ink-faint); font-size: var(--wb-text-micro); }
 .wb-card-head { display: flex; align-items: center; gap: var(--wb-space-6); }
-.wb-card-dot { flex: none; width: 7px; height: 7px; border-radius: var(--wb-radius-round); background: var(--wb-ink-faint); }
+/* The dot says what state a card is in: it shows only with a tone or a
+   change mark, in that colour, so a plain card carries no unexplained mark. */
+.wb-card-dot { display: none; flex: none; width: 7px; height: 7px; border-radius: var(--wb-radius-round); background: var(--wb-ink-faint); }
+.wb-card:is([data-tone], [data-change]) .wb-card-dot { display: block; }
 .wb-card-title { min-width: 0; overflow-wrap: anywhere; font-weight: var(--wb-weight-semibold); }
 .wb-card-note { color: var(--wb-ink-muted); overflow-wrap: anywhere; font-size: var(--wb-text-micro); min-height: 12px; }
+
+/* A store's text sits in the middle of its drum or cylinder, as a label on
+   a tank does; a pill's too. */
+:is(.wb-card, .wb-node):is([data-form="cylinder"], [data-form="drum"], [data-form="pill"]) { align-items: center; text-align: center; }
+.wb-card:is([data-form="cylinder"], [data-form="drum"], [data-form="pill"]) :is(.wb-card-head, .wb-items) { justify-content: center; }
+/* Shapes: a card's or node's silhouette says what it stands for before
+   its title does. data-form is box (the default), pill, cut (a branch),
+   cylinder (a database), drum (a cache), stack (a queue), window (a
+   client) or bars (a service of this codebase). data-outline is solid,
+   dashed (outside the system) or dotted. data-color is the resting border
+   colour: ink, accent, teal or violet; a tone takes over while set. The
+   scene's cards take these as options. */
+:is(.wb-card, .wb-node)[data-form] { position: relative; }
+:is(.wb-card, .wb-node)[data-form]::before, :is(.wb-card, .wb-node)[data-form]::after { pointer-events: none; }
+:is(.wb-card, .wb-node)[data-form="pill"] { padding-inline: var(--wb-space-16); border-radius: var(--wb-radius-pill); }
+:is(.wb-card, .wb-node)[data-form="cut"] { border-radius: var(--wb-space-12); corner-shape: bevel; }
+:is(.wb-card, .wb-node)[data-form="cylinder"] { padding-top: var(--wb-space-28); padding-bottom: var(--wb-space-12); border-radius: 50% / var(--wb-space-10); }
+:is(.wb-card, .wb-node)[data-form="cylinder"]::before {
+  content: ""; position: absolute; inset: -1px -1px auto; height: var(--wb-space-20);
+  border: 1px solid; border-color: inherit; border-radius: 50%; background: inherit;
+}
+:is(.wb-card, .wb-node)[data-form="drum"] { padding-left: var(--wb-space-28); padding-right: var(--wb-space-16); border-radius: var(--wb-space-12) / 50%; }
+:is(.wb-card, .wb-node)[data-form="drum"]::before {
+  content: ""; position: absolute; inset: -1px auto -1px -1px; width: var(--wb-space-24);
+  border: 1px solid; border-color: inherit; border-radius: 50%; background: inherit;
+}
+:is(.wb-card, .wb-node)[data-form="stack"] {
+  margin-right: var(--wb-space-8); margin-bottom: var(--wb-space-8);
+  box-shadow: 4px 4px 0 -1px var(--wb-surface), 4px 4px 0 0 var(--wb-rule), 8px 8px 0 -1px var(--wb-surface), 8px 8px 0 0 var(--wb-rule);
+}
+:is(.wb-card, .wb-node)[data-form="window"] { padding-top: var(--wb-space-16); }
+:is(.wb-card, .wb-node)[data-form="window"]::before { content: ""; position: absolute; top: var(--wb-space-8); right: 0; left: 0; border-top: 1px solid; border-color: inherit; }
+:is(.wb-card, .wb-node)[data-form="bars"] { padding-inline: var(--wb-space-18); }
+:is(.wb-card, .wb-node)[data-form="bars"]::before, :is(.wb-card, .wb-node)[data-form="bars"]::after { content: ""; position: absolute; top: 0; bottom: 0; border-left: 1px solid; border-color: inherit; }
+:is(.wb-card, .wb-node)[data-form="bars"]::before { left: var(--wb-space-6); }
+:is(.wb-card, .wb-node)[data-form="bars"]::after { right: var(--wb-space-6); }
+/* What the change under review did to a part: its dot and a stripe down its
+   left edge in the change colour, at rest; a removed part's title is struck.
+   A frame's tone still colours the whole card over it. */
+:is(.wb-card, .wb-node)[data-change] { border-left-width: 3px; }
+:is(.wb-card, .wb-node)[data-change="added"] { border-left-color: var(--wb-added); }
+:is(.wb-card, .wb-node)[data-change="modified"] { border-left-color: var(--wb-modified); }
+:is(.wb-card, .wb-node)[data-change="removed"] { border-left-color: var(--wb-removed); }
+.wb-card[data-change="added"] .wb-card-dot { background: var(--wb-added); }
+.wb-card[data-change="modified"] .wb-card-dot { background: var(--wb-modified); }
+.wb-card[data-change="removed"] .wb-card-dot { background: var(--wb-removed); }
+.wb-card[data-change="removed"] .wb-card-title { color: var(--wb-ink-muted); text-decoration: line-through; }
+:is(.wb-card, .wb-node)[data-outline="dashed"] { border-style: dashed; }
+:is(.wb-card, .wb-node)[data-outline="dotted"] { border-style: dotted; }
+:is(.wb-card, .wb-node)[data-color="ink"] { border-color: var(--wb-ink); }
+:is(.wb-card, .wb-node)[data-color="accent"] { border-color: var(--wb-accent); }
+:is(.wb-card, .wb-node)[data-color="teal"] { border-color: var(--wb-teal); }
+:is(.wb-card, .wb-node)[data-color="violet"] { border-color: var(--wb-violet); }
+.wb-card[data-color="ink"] .wb-card-dot { background: var(--wb-ink); }
+.wb-card[data-color="accent"] .wb-card-dot { background: var(--wb-accent); }
+.wb-card[data-color="teal"] .wb-card-dot { background: var(--wb-teal); }
+.wb-card[data-color="violet"] .wb-card-dot { background: var(--wb-violet); }
+.wb-shape[data-color="ink"] { stroke: var(--wb-ink); }
+.wb-shape[data-color="accent"] { stroke: var(--wb-accent); }
+.wb-shape[data-color="teal"] { stroke: var(--wb-teal); }
+.wb-shape[data-color="violet"] { stroke: var(--wb-violet); }
 .wb-well { padding: var(--wb-space-12); border: 1px solid var(--wb-rule-soft); border-radius: var(--wb-radius-surface); background: var(--wb-well); }
 .wb-well :is(.wb-item, .wb-chip, .wb-badge, .wb-code) { background: var(--wb-surface); }
 .wb-rule { margin: var(--wb-space-12) 0; border: 0; border-top: 1px solid var(--wb-rule); }
@@ -311,10 +389,15 @@ body {
 .wb-shape[data-tone="modified"] { stroke: var(--wb-modified); fill: var(--wb-modified-bg); }
 .wb-shape[data-tone="muted"] { stroke-dasharray: 4 3; }
 :is(.wb-card, .wb-node)[data-wb-highlit] { border-color: var(--wb-accent); box-shadow: 0 0 0 3px var(--wb-accent-soft); }
+:is(.wb-card, .wb-node)[data-form="stack"][data-wb-highlit] {
+  box-shadow: 0 0 0 3px var(--wb-accent-soft), 4px 4px 0 -1px var(--wb-surface), 4px 4px 0 0 var(--wb-rule), 8px 8px 0 -1px var(--wb-surface), 8px 8px 0 0 var(--wb-rule);
+}
 .wb-shape[data-wb-highlit] { stroke: var(--wb-accent); stroke-width: 2; }
 
 /* Connectors and tokens. */
-.wb-arrows, .wb-tokens { position: fixed; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+/* Above the cards, which sit above their groups: an edge's head meets a
+   card's border, and a chip stays readable as it passes one. */
+.wb-arrows, .wb-tokens { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
 .wb-line {
   fill: none;
   stroke: var(--wb-ink-faint);
@@ -333,6 +416,17 @@ body {
 .wb-arrow[data-tone="removed"] .wb-line { stroke: var(--wb-removed); marker-end: url(#wb-head-removed); }
 .wb-arrow[data-tone="modified"] .wb-line { stroke: var(--wb-modified); marker-end: url(#wb-head-modified); }
 .wb-arrow[data-wb-headless] .wb-line { marker-end: none; }
+/* An edge carrying one of the frame's messages takes the marker, label too. */
+.wb-arrow[data-wb-sent] .wb-line { stroke: var(--wb-accent); marker-end: url(#wb-head-accent); }
+.wb-arrow[data-wb-sent] .wb-label { fill: var(--wb-accent); }
+.wb-arrow[data-wb-sent="added"] .wb-line { stroke: var(--wb-added); marker-end: url(#wb-head-added); }
+.wb-arrow[data-wb-sent="added"] .wb-label { fill: var(--wb-added); }
+.wb-arrow[data-wb-sent="removed"] .wb-line { stroke: var(--wb-removed); marker-end: url(#wb-head-removed); }
+.wb-arrow[data-wb-sent="removed"] .wb-label { fill: var(--wb-removed); }
+.wb-arrow[data-wb-sent="modified"] .wb-line { stroke: var(--wb-modified); marker-end: url(#wb-head-modified); }
+.wb-arrow[data-wb-sent="modified"] .wb-label { fill: var(--wb-modified); }
+.wb-arrow[data-wb-sent="muted"] .wb-line { stroke: var(--wb-ink-faint); marker-end: url(#wb-head); }
+.wb-arrow[data-wb-sent="muted"] .wb-label { fill: var(--wb-ink-muted); }
 .wb-label {
   fill: var(--wb-ink-muted);
   font: var(--wb-text-micro) var(--wb-font-mono);
@@ -367,16 +461,53 @@ body {
 .wb-token[data-labelled][data-tone="muted"] { color: var(--wb-token-muted-ink); }
 
 /* The scene. */
-.wb-scene { display: grid; gap: var(--wb-space-28) var(--wb-space-48); padding: var(--wb-space-24); align-items: start; justify-items: stretch; min-width: 0; }
-.wb-scene-compact { grid-template-columns: minmax(0, 1fr) !important; row-gap: var(--wb-space-48); }
-.wb-scene-compact > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
-.wb-scene-fold { grid-template-columns: repeat(var(--wb-fold), minmax(0, 1fr)) !important; }
-.wb-scene-fold > * { grid-column: auto !important; grid-row: auto !important; }
-.wb-scene-fold > [data-wb-wide] { grid-column: 1 / -1 !important; }
+.wb-scene { display: grid; gap: var(--wb-space-28) var(--wb-space-48); padding: var(--wb-space-24); align-items: center; justify-items: stretch; min-width: 0; }
+/* A card is as wide as what it says, within bounds, and sits mid-column, so
+   a wide column does not stretch it into a slab. A table keeps its column;
+   a scene's own CSS may set any width. The scene sets its own min-width from
+   the columns its cards make, and the block scrolls it sideways when
+   narrower. */
+.wb-scene > .wb-card:not([data-kind="table"]) { justify-self: center; width: fit-content; min-width: 140px; max-width: 300px; }
 .wb-scene > [data-wb-state="before"], .wb-scene > [data-wb-state="after"],
 .wb-items > [data-wb-state="before"], .wb-items > [data-wb-state="after"],
 .wb-table tr[data-wb-state="before"], .wb-table tr[data-wb-state="after"] { display: none; }
 .wb-scene-top { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wb-space-8); margin-bottom: var(--wb-space-4); }
+/* A group is a washed box behind the cards of its cells, bleeding into the
+   gaps around them, titled in its top-left. Cards paint over it. */
+.wb-scene > .wb-card { position: relative; z-index: 1; }
+/* Groups bleed into the gaps around their cells, so a grouped scene opens
+   its rows and columns to keep the boxes apart and give edges between
+   layers room to be read. The top bleed holds the title clear of the cards
+   below it, ring and all. */
+.wb-scene:has(> .wb-group) { row-gap: var(--wb-space-72); column-gap: var(--wb-space-72); padding: var(--wb-space-32) var(--wb-space-24); }
+.wb-group {
+  position: relative; z-index: 0; align-self: stretch; justify-self: stretch;
+  margin: calc(-1 * var(--wb-space-28)) calc(-1 * var(--wb-space-16)) calc(-1 * var(--wb-space-10));
+  border: 1px solid var(--wb-rule-soft); border-radius: var(--wb-radius-surface); background: var(--wb-well);
+  transition: opacity var(--wb-duration) ease;
+}
+.wb-group-title { position: absolute; top: var(--wb-space-4); left: var(--wb-space-12); color: var(--wb-ink-muted); font: var(--wb-text-micro)/var(--wb-leading-normal) var(--wb-font-mono); letter-spacing: var(--wb-tracking-chrome); text-transform: uppercase; white-space: nowrap; }
+.wb-group[data-color="accent"] { border-color: color-mix(in srgb, var(--wb-accent) 30%, transparent); background: color-mix(in srgb, var(--wb-accent) 7%, transparent); }
+.wb-group[data-color="accent"] .wb-group-title { color: var(--wb-accent); }
+.wb-group[data-color="teal"] { border-color: color-mix(in srgb, var(--wb-teal) 36%, transparent); background: color-mix(in srgb, var(--wb-teal) 8%, transparent); }
+.wb-group[data-color="teal"] .wb-group-title { color: var(--wb-teal); }
+.wb-group[data-color="violet"] { border-color: color-mix(in srgb, var(--wb-violet) 36%, transparent); background: color-mix(in srgb, var(--wb-violet) 8%, transparent); }
+.wb-group[data-color="violet"] .wb-group-title { color: var(--wb-violet); }
+.wb-group[data-color="ink"] { border-color: var(--wb-rule); }
+.wb-group[data-color="ink"] .wb-group-title { color: var(--wb-ink); }
+/* The legend: a card-like glyph per entry, drawn with the card rules and
+   scaled to 0.4 inside a box of the scaled size, and what it stands for.
+   A transform, not zoom: Electron's Chromium reports a zoomed element's
+   rect in unzoomed units, which made the stage measure itself 2.5x tall. */
+.wb-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wb-space-6) var(--wb-space-16); padding: 0 var(--wb-space-24) var(--wb-space-12); color: var(--wb-ink-muted); font: var(--wb-text-micro)/var(--wb-leading-normal) var(--wb-font-mono); letter-spacing: var(--wb-tracking-chrome); text-transform: uppercase; }
+.wb-legend-entry { display: inline-flex; align-items: center; gap: var(--wb-space-6); white-space: nowrap; }
+.wb-legend-box { position: relative; flex: none; width: 20px; height: 13px; }
+.wb-card.wb-legend-glyph { position: absolute; top: 0; left: 0; display: block; width: 50px; min-width: 0; height: 32px; padding: 0; transform: scale(0.4); transform-origin: 0 0; }
+.wb-card.wb-legend-glyph[data-form="cylinder"] { height: 44px; }
+/* Lines that scale to a pixel: the glyph's borders, its lid and rule marks,
+   and its change stripe are drawn 2.5x heavier before the 0.4 scale. */
+.wb-card.wb-legend-glyph, .wb-card.wb-legend-glyph::before, .wb-card.wb-legend-glyph::after { border-width: 2.5px; }
+.wb-card.wb-legend-glyph[data-change] { border-left-width: 7px; }
 :root[data-wb-instant] *, :root[data-wb-instant] *::before, :root[data-wb-instant] *::after {
   transition: none !important;
   animation-duration: 0s !important;