diff --git a/docs/packages/cli.mdx b/docs/packages/cli.mdx
index fad6ea4bd28..092ea058ce5 100644
--- a/docs/packages/cli.mdx
+++ b/docs/packages/cli.mdx
@@ -363,7 +363,7 @@ thin with counts on it was cut short.
 | Flag                | Description                                                                                                                                       |
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `--output, -o`      | Output directory. Default `./capture`, then `./capture-2/`, `./capture-3/`, … if that name is taken.                                               |
-| `--timeout`         | Page load timeout in ms (default 120000)                                                                                                          |
+| `--timeout`         | Page load timeout in ms, or a duration such as `30s` or `2m` (default 120000)                                                                     |
 | `--capture-budget`  | Budget in ms for everything after the page loads (default 120000). Cooperative — it stops new work, but cannot interrupt work already running.     |
 | `--skip-assets`     | Do not download images and SVGs                                                                                                                   |
 | `--skip-vision`     | Do not run AI image captioning                                                                                                                    |
@@ -1588,7 +1588,7 @@ npx hyperframes grade-compare --for frame.png --luts warm.cube,cool.cube
 | `--project`                    | Base directory for relative paths                        |
 | `--out`                        | Output PNG (default `<project>/grade-compare.png`)       |
 | `--baseline` / `--no-baseline` | Include the ungraded frame as an `original` cell (on)    |
-| `--timeout`                    | Render-ready timeout (default 5000 ms)                   |
+| `--timeout`                    | Render-ready timeout in ms, or a duration such as `30s` (default 5000 ms) |
 | `--json`                       | Machine-readable results                                 |
 
 ### Deprecated: `validate`, `inspect`, and `layout`
diff --git a/docs/packages/player.mdx b/docs/packages/player.mdx
index 5fdfa28926e..538db4258a8 100644
--- a/docs/packages/player.mdx
+++ b/docs/packages/player.mdx
@@ -44,7 +44,9 @@ import "@hyperframes/player";
 Set `autoplay muted` only when playback should start without a user gesture.
 
 Add or remove `controls` at any time. When shown, the controls reflect the current
-playback state, position and speed.
+playback state, position and speed. Clicking or dragging the scrubber keeps a
+playing film playing from the new spot, as a `<video>`'s own controls do, and
+leaves a paused film paused.
 
 ## Attributes
 
@@ -93,6 +95,7 @@ const player = document.querySelector("hyperframes-player");
 player.play();
 player.pause();
 player.seek(2.5);
+player.seek(2.5, { keepPlaying: true });
 
 player.currentTime = 5;
 player.playbackRate = 1.5;
@@ -102,6 +105,10 @@ console.log(player.duration, player.paused, player.ready);
 console.log(player.compositionWidth, player.compositionHeight);
 ```
 
+`seek()` and setting `currentTime` pause at the new time. Pass `{ keepPlaying: true }`
+to keep a playing film playing from there, as setting a `<video>`'s `currentTime`
+does; a paused film stays paused.
+
 In Studio previews, scrubbing keeps the last complete picture visible while video
 layers decode at the requested time. Rapid seeks keep only the latest queued
 destination, and the captions and video layers appear together once it is ready.
diff --git a/docs/reference/lint-rules.mdx b/docs/reference/lint-rules.mdx
index b8aad8358d4..c6e287daf1e 100644
--- a/docs/reference/lint-rules.mdx
+++ b/docs/reference/lint-rules.mdx
@@ -916,9 +916,9 @@ Source: the project lint pass in `packages/lint/src/project.ts`, `packages/lint/
 
 ### `duplicate_audio_track`
 
-**Warning.** Two audible elements overlap on the same track index, so their audio doubles up.
+**Warning.** Two audible clips overlap in time on the same `data-track-index`. Both play at once: the render mixes every audible clip whatever its track, and `data-track-index` only picks the Studio lane, so Studio draws the two over each other in that lane. An overlap like this is either an accidental duplicate or two sounds sharing one lane.
 
-**Fix:** Use non-overlapping time windows or different track indices.
+**Fix:** If both should sound (a whoosh into a hit), give one its own `data-track-index`; the mix does not change. If one is a leftover duplicate, remove it or move it so the windows do not overlap.
 
 ### `texture_mask_asset_not_found`
 
diff --git a/packages/cli/scripts/build-copy.mjs b/packages/cli/scripts/build-copy.mjs
index 2840596d10c..0709e057139 100644
--- a/packages/cli/scripts/build-copy.mjs
+++ b/packages/cli/scripts/build-copy.mjs
@@ -133,7 +133,7 @@ async function main() {
   // Skills bundled into the published CLI. Branches don't all carry the same
   // skills/ tree (it gets restructured), so each entry is existsSync-guarded:
   // a missing skill dir warns + skips instead of crashing the build.
-  for (const skill of ["hyperframes", "hyperframes-cli", "gsap", "media-use"]) {
+  for (const skill of ["hyperframes", "hyperframes-cli", "media-use"]) {
     const src = join(REPO_ROOT, "skills", skill);
     if (!existsSync(src)) {
       console.warn(`[build-copy] skill not found, skipping: skills/${skill}`);
diff --git a/packages/cli/src/buildCopy.test.ts b/packages/cli/src/buildCopy.test.ts
new file mode 100644
index 00000000000..bb82cc595e3
--- /dev/null
+++ b/packages/cli/src/buildCopy.test.ts
@@ -0,0 +1,16 @@
+import { existsSync, readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const copySource = readFileSync(new URL("../scripts/build-copy.mjs", import.meta.url), "utf-8");
+
+describe("build-copy bundled skills", () => {
+  it("names only skills that exist in the repo's skills/ tree", () => {
+    const list = copySource.match(/for \(const skill of \[([^\]]+)\]\)/)?.[1] ?? "";
+    const skills = [...list.matchAll(/"([^"]+)"/g)].map((m) => m[1]);
+    expect(skills.length).toBeGreaterThan(0);
+    const missing = skills.filter(
+      (name) => !existsSync(new URL(`../../../skills/${name}/SKILL.md`, import.meta.url)),
+    );
+    expect(missing).toEqual([]);
+  });
+});
diff --git a/packages/cli/src/commands/capture.test.ts b/packages/cli/src/commands/capture.test.ts
index 16ee6307cf3..81c83f02c6d 100644
--- a/packages/cli/src/commands/capture.test.ts
+++ b/packages/cli/src/commands/capture.test.ts
@@ -253,6 +253,37 @@ describe("capture command — vision control", () => {
     );
   });
 
+  it.each([
+    ["1s", 1_000],
+    ["2m", 120_000],
+    ["45000", 45_000],
+    [undefined, 120_000],
+  ])("passes --timeout %s into capture as %i ms", async (timeout, expectedMs) => {
+    vi.spyOn(console, "log").mockImplementation(() => {});
+    await captureCommand.run!({
+      args: { url: "https://example.com", output: "/tmp/hf-timeout", timeout, json: true },
+    } as never);
+    expect(captureWebsiteMock).toHaveBeenCalledWith(
+      expect.objectContaining({ timeout: expectedMs }),
+      undefined,
+    );
+  });
+
+  it("warns and keeps the default page-load timeout when --timeout is not a duration", async () => {
+    vi.spyOn(console, "log").mockImplementation(() => {});
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    await captureCommand.run!({
+      args: { url: "https://example.com", output: "/tmp/hf-timeout", timeout: "abc", json: true },
+    } as never);
+    expect(captureWebsiteMock).toHaveBeenCalledWith(
+      expect.objectContaining({ timeout: 120_000 }),
+      undefined,
+    );
+    expect(error).toHaveBeenCalledWith(
+      expect.stringContaining('--timeout "abc" is not a duration'),
+    );
+  });
+
   it.each([
     [true, 0],
     [false, 1],
diff --git a/packages/cli/src/commands/capture.ts b/packages/cli/src/commands/capture.ts
index 9657746c8d0..ae3488f7a56 100644
--- a/packages/cli/src/commands/capture.ts
+++ b/packages/cli/src/commands/capture.ts
@@ -8,8 +8,10 @@ import { diag } from "../ui/diagnostics.js";
 import type { CapturePhaseProgress } from "../capture/types.js";
 import { parseCaptureDeadline } from "../capture/captureWatchdog.js";
 import { jsonFailure } from "../utils/jsonError.js";
+import { parseTimeoutMs } from "../utils/timeoutArg.js";
 
 const CAPTURE_PHASE_PREFIX = "HYPERFRAMES_CAPTURE_PHASE ";
+const DEFAULT_CAPTURE_TIMEOUT_MS = 120_000;
 
 function emitCapturePhase(event: CapturePhaseProgress): void {
   diag.notice(`${CAPTURE_PHASE_PREFIX}${JSON.stringify(event)}`);
@@ -94,7 +96,8 @@ export default defineCommand({
     },
     timeout: {
       type: "string",
-      description: "Page load timeout in ms (default: 120000)",
+      description:
+        "Page load timeout: a number of ms, or a duration such as 30s or 2m (default: 120000)",
     },
     "capture-budget": {
       type: "string",
@@ -236,7 +239,7 @@ export default defineCommand({
           skipAssets: args["skip-assets"] as boolean,
           skipVision: args["skip-vision"] as boolean,
           maxScreenshots,
-          timeout: args.timeout ? parseInt(args.timeout as string) : undefined,
+          timeout: parseTimeoutMs(args.timeout, DEFAULT_CAPTURE_TIMEOUT_MS),
           postNavigationBudgetMs: captureBudgetMs,
           captureDeadlineMs: parseCaptureDeadline(process.env.HYPERFRAMES_CAPTURE_DEADLINE_MS),
           json: isJson,
diff --git a/packages/cli/src/commands/grade-compare.test.ts b/packages/cli/src/commands/grade-compare.test.ts
index 6aa63a4d4fd..85c4a1b8713 100644
--- a/packages/cli/src/commands/grade-compare.test.ts
+++ b/packages/cli/src/commands/grade-compare.test.ts
@@ -121,6 +121,33 @@ describe("parseGradeCompareArgs", () => {
       parseGradeCompareArgs({ for: "frame.png", grades: "grades.json", luts: "a.cube" }),
     ).toThrow("Exactly one of --grades or --luts is required");
   });
+
+  it.each([
+    ["1s", 1_000],
+    ["1500ms", 1_500],
+    ["8000", 8_000],
+    [undefined, 5_000],
+  ])("reads --timeout %s as %i ms", (timeout, expectedMs) => {
+    const parsed = parseGradeCompareArgs({ for: "frame.png", grades: "grades.json", timeout });
+    expect(parsed.timeoutMs).toBe(expectedMs);
+  });
+
+  it("warns and keeps the 5000 ms default when --timeout is not a duration", () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const parsed = parseGradeCompareArgs({
+        for: "frame.png",
+        grades: "grades.json",
+        timeout: "abc",
+      });
+      expect(parsed.timeoutMs).toBe(5_000);
+      expect(error).toHaveBeenCalledWith(
+        expect.stringContaining('--timeout "abc" is not a duration'),
+      );
+    } finally {
+      error.mockRestore();
+    }
+  });
 });
 
 describe("buildGradeCompareHtml", () => {
diff --git a/packages/cli/src/commands/grade-compare.ts b/packages/cli/src/commands/grade-compare.ts
index 446fc64c0a2..78bf33ab09c 100644
--- a/packages/cli/src/commands/grade-compare.ts
+++ b/packages/cli/src/commands/grade-compare.ts
@@ -31,6 +31,7 @@ import { serveStaticProjectHtml } from "../utils/staticProjectServer.js";
 import { withMeta } from "../utils/updateCheck.js";
 import { failCaught } from "../utils/jsonError.js";
 import { CliUsageError } from "../utils/commandResult.js";
+import { parseTimeoutMs } from "../utils/timeoutArg.js";
 
 const COMPOSITION_ID = "grade-compare";
 const COMPOSITION_DURATION = "1";
@@ -40,6 +41,7 @@ const MAX_COLUMNS = 4;
 const GRID_PADDING = 16;
 const LABEL_HEIGHT = 32;
 const FFMPEG_EXTRACT_TIMEOUT_MS = 30_000;
+const DEFAULT_RENDER_READY_TIMEOUT_MS = 5_000;
 
 export interface GradeCompareCell {
   label: string;
@@ -289,7 +291,7 @@ export function parseGradeCompareArgs(args: {
       ? { kind: "grades", path: resolveFromBase(projectDir, gradesArg) }
       : { kind: "luts", value: lutsArg ?? "" },
     json: args.json === true,
-    timeoutMs: Number.parseInt(readOptionalString(args.timeout) ?? "", 10) || 5000,
+    timeoutMs: parseTimeoutMs(args.timeout, DEFAULT_RENDER_READY_TIMEOUT_MS),
   };
 }
 
@@ -612,7 +614,8 @@ export default defineCommand({
     },
     timeout: {
       type: "string",
-      description: "Render-ready timeout in ms before capture (default: 5000)",
+      description:
+        "Render-ready timeout before capture: a number of ms, or a duration such as 30s (default: 5000)",
     },
     baseline: {
       type: "boolean",
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 2cd09524479..ac088c0a5cd 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -63,6 +63,7 @@ import {
 } from "@hyperframes/parsers";
 import { decodableAudioStream } from "@hyperframes/parsers/media-streams";
 import { cliSourced } from "../utils/sourceTag.js";
+import { shellArg } from "../utils/shellArg.js";
 
 function resolveScaffoldTemplateId(exampleFlag: string | undefined, hasMediaFile: boolean): string {
   const example = exampleFlag === "agent" ? "blank" : exampleFlag;
@@ -1044,7 +1045,7 @@ export default defineCommand({
       console.log();
       console.log(`  ${c.accent("2.")} Open this project with your AI coding agent:`);
       console.log(
-        `     ${c.accent(`cd ${name}`)} then start ${c.accent("Claude Code")}, ${c.accent("Cursor")}, or your preferred agent`,
+        `     ${c.accent(`cd ${shellArg(name)}`)} then start ${c.accent("Claude Code")}, ${c.accent("Cursor")}, or your preferred agent`,
       );
       console.log();
       console.log(`  ${c.accent("3.")} Try a starter prompt:`);
@@ -1056,13 +1057,13 @@ export default defineCommand({
       );
       console.log();
       console.log(`  ${c.accent("4.")} Preview in the browser:`);
-      console.log(`     ${c.accent(`cd ${name}`)} && ${c.accent("npm run dev")}`);
+      console.log(`     ${c.accent(`cd ${shellArg(name)}`)} && ${c.accent("npm run dev")}`);
       console.log();
       console.log(`  ${c.accent("5.")} Check the composition:`);
-      console.log(`     ${c.accent(`cd ${name}`)} && ${c.accent("npm run check")}`);
+      console.log(`     ${c.accent(`cd ${shellArg(name)}`)} && ${c.accent("npm run check")}`);
       console.log();
       console.log(`  ${c.accent("6.")} Render to MP4 when ready:`);
-      console.log(`     ${c.accent(`cd ${name}`)} && ${c.accent("npm run render")}`);
+      console.log(`     ${c.accent(`cd ${shellArg(name)}`)} && ${c.accent("npm run render")}`);
       console.log();
       console.log(`  ${c.dim(`Full docs: ${cliSourced("https://hyperframes.heygen.com")}`)}`);
       return;
diff --git a/packages/cli/src/commands/layout-audit.browser.js b/packages/cli/src/commands/layout-audit.browser.js
index 332fb480f3a..0f2239bcdf0 100644
--- a/packages/cli/src/commands/layout-audit.browser.js
+++ b/packages/cli/src/commands/layout-audit.browser.js
@@ -91,7 +91,8 @@
     return `${selectorFor(parent)} > ${element.tagName.toLowerCase()}:nth-of-type(${index})`;
   }
 
-  function uniqueSelectorFor(element) {
+  function uniqueSelectorFor(subject) {
+    const element = authoredElement(subject);
     const preferred = selectorFor(element);
     try {
       if (document.querySelectorAll(preferred).length === 1) return preferred;
diff --git a/packages/cli/src/commands/layout-audit.browser.test.ts b/packages/cli/src/commands/layout-audit.browser.test.ts
index 8d17357e837..ee54ccf3f26 100644
--- a/packages/cli/src/commands/layout-audit.browser.test.ts
+++ b/packages/cli/src/commands/layout-audit.browser.test.ts
@@ -1456,7 +1456,7 @@ describe("layout-audit.browser coordinate-frame findings", () => {
       ["flags", "", true],
       ["clears", "data-layout-allow-overflow", false],
     ])(
-      "%s a graded video's canvas overflowing a clipping wrapper, per the video's own flag",
+      "%s a graded video's canvas overflowing a clipping wrapper by the video's selector and flag",
       (_, flag, flagged) => {
         document.body.innerHTML = `
           <div id="root" data-composition-id="main" data-width="1920" data-height="1080">
@@ -1476,7 +1476,7 @@ describe("layout-audit.browser coordinate-frame findings", () => {
         installAuditScript();
 
         const overflow = runAudit().filter((issue) => issue.code === "container_overflow");
-        expect(overflow.map((issue) => issue.selector)).toEqual(flagged ? ["#art"] : []);
+        expect(overflow.map((issue) => issue.selector)).toEqual(flagged ? ["#clip"] : []);
       },
     );
 
diff --git a/packages/cli/src/commands/render/plan.ts b/packages/cli/src/commands/render/plan.ts
index b150a150488..4054375e424 100644
--- a/packages/cli/src/commands/render/plan.ts
+++ b/packages/cli/src/commands/render/plan.ts
@@ -131,6 +131,7 @@ export interface RenderPlan {
   renderTarget: string;
   fps: Fps;
   quality: RenderQuality;
+  qualityPreset: keyof typeof QUALITY_ALIASES;
   authoringSkill?: string;
   invalidAuthoringSkill?: string;
   /** Which resolution step provided authoringSkill: an explicit --skill flag, or the project's own config. */
@@ -638,6 +639,7 @@ export function createRenderPlan(args: RenderCommandArgs, now = new Date()): Ren
     renderTarget,
     fps,
     quality,
+    qualityPreset: qualityRaw as keyof typeof QUALITY_ALIASES,
     authoringSkill,
     invalidAuthoringSkill,
     authoringSkillSource,
diff --git a/packages/cli/src/commands/render/present.test.ts b/packages/cli/src/commands/render/present.test.ts
new file mode 100644
index 00000000000..e4d9cb25301
--- /dev/null
+++ b/packages/cli/src/commands/render/present.test.ts
@@ -0,0 +1,45 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { createRenderPlan, type RenderCommandArgs } from "./plan.js";
+import { presentRenderPlan } from "./present.js";
+
+describe("presentRenderPlan", () => {
+  let projectDir: string;
+  let printed: string[];
+
+  beforeEach(() => {
+    projectDir = mkdtempSync(join(tmpdir(), "hf-render-present-"));
+    writeFileSync(
+      join(projectDir, "index.html"),
+      '<main data-composition-id="main" data-width="1920" data-height="1080" data-fps="30"></main>',
+    );
+    printed = [];
+    vi.spyOn(console, "log").mockImplementation((line?: unknown) => {
+      printed.push(String(line ?? ""));
+    });
+    vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    rmSync(projectDir, { recursive: true, force: true });
+  });
+
+  async function settingsLine(args: Omit<RenderCommandArgs, "dir">): Promise<string | undefined> {
+    await presentRenderPlan(createRenderPlan({ dir: projectDir, workers: "2", ...args }));
+    return printed.find((line) => line.includes("2 workers"));
+  }
+
+  it.each([
+    [{}, "looks (CRF 16)"],
+    [{ quality: "draft" }, "draft"],
+    [{ quality: "standard" }, "standard"],
+    [{ quality: "delivery" }, "delivery"],
+    [{ crf: "20" }, "looks (CRF 20)"],
+    [{ "video-bitrate": "10M" }, "looks (10M)"],
+  ])("names the quality it encodes with for %o", async (args, label) => {
+    expect(await settingsLine(args)).toContain(`30fps · ${label} · 2 workers`);
+  });
+});
diff --git a/packages/cli/src/commands/render/present.ts b/packages/cli/src/commands/render/present.ts
index 62a3708d964..051f3acfaa8 100644
--- a/packages/cli/src/commands/render/present.ts
+++ b/packages/cli/src/commands/render/present.ts
@@ -37,7 +37,7 @@ function presentRenderSummary(plan: RenderPlan): void {
     c.accent("\u25C6") + "  Rendering " + c.accent(nameLabel) + c.dim(" \u2192 " + plan.outputPath),
   );
   console.log(
-    c.dim(`   ${fpsToFfmpegArg(plan.fps)}fps \u00B7 ${plan.quality} \u00B7 ${workerLabel}`),
+    c.dim(`   ${fpsToFfmpegArg(plan.fps)}fps \u00B7 ${qualityLabel(plan)} \u00B7 ${workerLabel}`),
   );
   if (plan.outputResolution) {
     console.log(c.dim("   Output resolution: " + plan.outputResolution));
@@ -50,6 +50,12 @@ function presentRenderSummary(plan: RenderPlan): void {
   console.log("");
 }
 
+function qualityLabel(plan: Pick<RenderPlan, "qualityPreset" | "crf" | "videoBitrate">): string {
+  if (plan.crf !== undefined) return `${plan.qualityPreset} (CRF ${plan.crf})`;
+  if (plan.videoBitrate) return `${plan.qualityPreset} (${plan.videoBitrate})`;
+  return plan.qualityPreset;
+}
+
 /** The GPU line's accelerated modes, or undefined when neither is. */
 function formatGpuModes(plan: RenderPlan): string | undefined {
   const modes: string[] = [];
diff --git a/packages/cli/src/docs/rendering.md b/packages/cli/src/docs/rendering.md
index b64c35af207..d04e66db31a 100644
--- a/packages/cli/src/docs/rendering.md
+++ b/packages/cli/src/docs/rendering.md
@@ -1,6 +1,6 @@
 # Rendering
 
-Render compositions to MP4 with `npx hyperframes render`.
+Render compositions to MP4 (or another `--format`) with `npx hyperframes render`.
 
 ## Local Mode (default)
 
@@ -16,7 +16,9 @@ Requires: Docker installed and running.
 
 - `-f, --fps` — 1-240 or a rational such as 30000/1001 (default: root `data-fps`, else 30)
 - `-q, --quality` — draft, looks, delivery, or standard/high (default: looks)
-- `-w, --workers` — Parallel workers 1-8 (default: auto)
+- `--format` — Output format: `mp4`, `webm`, `mov`, `gif`, `png-sequence`, or `hls` (default: `mp4`). MOV and WebM keep transparency; `png-sequence` writes RGBA frames to a directory; `hls` writes a VOD playlist directory (H.264/AAC, SDR only, no GPU encoding)
+- `--gif-loop` — GIF loop count, `0` for infinite (`0`-`65535`). Only used with `--format gif`
+- `-w, --workers` — Parallel workers 1-24 or `auto`; higher values are capped at 24 (default: auto)
 - `--crf` — Override encoder CRF (mutually exclusive with `--video-bitrate`)
 - `--video-bitrate` — Target video bitrate such as `10M` (mutually exclusive with `--crf`)
 - `--keyframe-interval` — MP4 only: a keyframe at least every N seconds (default: encoder's choice)
diff --git a/packages/cli/src/utils/desktopApp.ts b/packages/cli/src/utils/desktopApp.ts
index f0c9f7f8451..b765518b5c5 100644
--- a/packages/cli/src/utils/desktopApp.ts
+++ b/packages/cli/src/utils/desktopApp.ts
@@ -8,6 +8,7 @@ import { createProjectConfig } from "./projectConfig.js";
 import { isCI } from "./attendedTerminal.js";
 import { isAgentDriven } from "../telemetry/agent_runtime.js";
 import { readRecord, removeRecord, writeRecord } from "./projectRecords.js";
+import { shellArg } from "./shellArg.js";
 
 // The HyperFrames desktop app, then builds named in HYPERFRAMES_DESKTOP_BUNDLE_IDS / _APP_NAMES (comma-separated).
 const list = (name: string): string[] =>
@@ -247,8 +248,7 @@ function leaveIntent(dir: string, cta?: string, doc?: "storyboard"): () => void
 }
 
 function shownDir(dir: string, cwd: string): string {
-  const shown = relative(cwd, dir) || ".";
-  return /\s/.test(shown) ? JSON.stringify(shown) : shown;
+  return shellArg(relative(cwd, dir) || ".");
 }
 
 /** The `hyperframes open` line for a project, relative to where the person is. */
diff --git a/packages/cli/src/utils/shellArg.test.ts b/packages/cli/src/utils/shellArg.test.ts
new file mode 100644
index 00000000000..ab407e85c04
--- /dev/null
+++ b/packages/cli/src/utils/shellArg.test.ts
@@ -0,0 +1,56 @@
+import { execFileSync } from "node:child_process";
+import { mkdirSync, mkdtempSync, realpathSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterAll, describe, expect, it } from "vitest";
+import { shellArg } from "./shellArg.js";
+
+const NAMES = [
+  "my-video",
+  "서울여행",
+  "films/a",
+  "my first video",
+  "it's mine",
+  "it's",
+  "a&b",
+  "$HOME",
+  "o'neil $x",
+  "서울 여행 브이로그",
+];
+
+describe("shellArg", () => {
+  it("leaves a plain name alone and quotes one the shell would split or expand", () => {
+    expect(NAMES.map((name) => shellArg(name, "darwin"))).toEqual([
+      "my-video",
+      "서울여행",
+      "films/a",
+      '"my first video"',
+      `"it's mine"`,
+      `"it's"`,
+      '"a&b"',
+      "'$HOME'",
+      `'o'\\''neil $x'`,
+      '"서울 여행 브이로그"',
+    ]);
+  });
+
+  it("uses double quotes on Windows, where a backslash path needs none", () => {
+    expect(shellArg("films\\a", "win32")).toBe("films\\a");
+    expect(shellArg("my first video", "win32")).toBe('"my first video"');
+    expect(shellArg("it's mine", "win32")).toBe(`"it's mine"`);
+  });
+
+  const root = mkdtempSync(join(tmpdir(), "hf-shell-arg-"));
+  afterAll(() => rmSync(root, { recursive: true, force: true }));
+
+  it.skipIf(process.platform === "win32")("prints a cd that a POSIX shell runs as written", () => {
+    for (const name of NAMES) {
+      mkdirSync(join(root, name), { recursive: true });
+      const pwd = execFileSync("/bin/sh", ["-c", `cd ${shellArg(name)} && pwd -P`], {
+        cwd: root,
+        encoding: "utf8",
+      });
+      expect(pwd.trim()).toBe(realpathSync(join(root, name)));
+    }
+  });
+});
diff --git a/packages/cli/src/utils/shellArg.ts b/packages/cli/src/utils/shellArg.ts
new file mode 100644
index 00000000000..80204037424
--- /dev/null
+++ b/packages/cli/src/utils/shellArg.ts
@@ -0,0 +1,11 @@
+const PLAIN = /^[\p{L}\p{M}\p{N}_./@:+,=-]+$/u;
+const PLAIN_WINDOWS_PATH = /^[\p{L}\p{M}\p{N}_./@:+,=\\-]+$/u;
+const SPECIAL_IN_DOUBLE_QUOTES = /["$`\\!]/;
+
+/** `text` as one word of a command printed for the person to paste into their shell. */
+export function shellArg(text: string, platform: NodeJS.Platform = process.platform): string {
+  if (platform === "win32") return PLAIN_WINDOWS_PATH.test(text) ? text : `"${text}"`;
+  if (PLAIN.test(text)) return text;
+  if (!SPECIAL_IN_DOUBLE_QUOTES.test(text)) return `"${text}"`;
+  return `'${text.replaceAll("'", "'\\''")}'`;
+}
diff --git a/packages/cli/src/warmCheckProtocol.ts b/packages/cli/src/warmCheckProtocol.ts
index 3b2860dc40f..9eef23b767c 100644
--- a/packages/cli/src/warmCheckProtocol.ts
+++ b/packages/cli/src/warmCheckProtocol.ts
@@ -7,7 +7,7 @@ import { fileURLToPath } from "node:url";
 import { hyperframesCacheDir } from "@hyperframes/core/cache-dir";
 import { hyperframesOwnerArgs, withoutHyperframesOwner } from "@hyperframes/core/browser-marker";
 
-export const WARM_IDLE_MS = 5 * 60_000;
+const WARM_IDLE_MS = 5 * 60_000;
 export const HANDSHAKE_TIMEOUT_MS = 2_000;
 
 export const warmServerArgs = (
diff --git a/packages/lint/src/project.test.ts b/packages/lint/src/project.test.ts
index fb8fb638ad4..9b0be9176e8 100644
--- a/packages/lint/src/project.test.ts
+++ b/packages/lint/src/project.test.ts
@@ -1307,6 +1307,23 @@ describe("audio-aware project rules", () => {
       expect(codes).toContain("duplicate_audio_track");
     });
 
+    it("says both clips still play, since the track index only picks the Studio lane", async () => {
+      const sfx = (id: string, start: string, duration: string) =>
+        `<audio id="${id}" src="${id}.wav" data-start="${start}" data-duration="${duration}" data-track-index="6"></audio>`;
+      const project = makeProject(
+        composition(sfx("whoosh", "5.13", "0.7") + sfx("land", "5.79", "0.34")),
+      );
+      const { results } = await lintProject(project);
+      const finding = results
+        .flatMap((result) => result.result.findings)
+        .find((f) => f.code === "duplicate_audio_track");
+      expect(finding?.message).toContain("whoosh.wav at 5.13-5.83s and land.wav at 5.79-6.13s");
+      expect(finding?.message).toContain("Both play at once whatever their track");
+      expect(finding?.fixHint).toContain(
+        "give one its own data-track-index; the mix does not change",
+      );
+    });
+
     it("stays quiet when one of the overlapping videos is muted", async () => {
       const codes = await codesFor(
         composition(video('data-has-audio="true"', 0) + video("muted", 2)),
diff --git a/packages/lint/src/project.ts b/packages/lint/src/project.ts
index 1d53f085787..e7aee0d622e 100644
--- a/packages/lint/src/project.ts
+++ b/packages/lint/src/project.ts
@@ -929,8 +929,9 @@ function lintDuplicateAudioTracks(projectDir: string, rootHtml: string): Hyperfr
         findings.push({
           code: "duplicate_audio_track",
           severity: "warning",
-          message: `Multiple audible <audio>/<video> elements on track ${a.trackIndex} overlap (${a.src} at ${formatSeconds(a.start)}-${formatSeconds(a.end)}s, ${b.src} at ${formatSeconds(b.start)}-${formatSeconds(b.end)}s). This causes layered audio playback.`,
-          fixHint: "Use non-overlapping time windows or different track indices.",
+          message: `Audible clips overlap on Studio track ${a.trackIndex}: ${a.src} at ${formatSeconds(a.start)}-${formatSeconds(a.end)}s and ${b.src} at ${formatSeconds(b.start)}-${formatSeconds(b.end)}s. Both play at once whatever their track (the render mixes every audible clip; data-track-index only picks the Studio lane), and Studio draws them over each other in that lane.`,
+          fixHint:
+            "If both should sound (a whoosh into a hit), give one its own data-track-index; the mix does not change. If one is a leftover duplicate, remove it or move it so the windows do not overlap.",
         });
       }
     }
diff --git a/packages/player/README.md b/packages/player/README.md
index c6f89d9c106..8e54af78100 100644
--- a/packages/player/README.md
+++ b/packages/player/README.md
@@ -28,7 +28,7 @@ If you need a classic `<script>` tag instead of ESM, use the explicit global bui
 
 The player loads the composition in a sandboxed iframe, auto-detects its dimensions and duration, and scales it responsively to fit the container.
 
-Add or remove `controls` at any time. When shown, the controls reflect the current playback state, position and speed.
+Add or remove `controls` at any time. When shown, the controls reflect the current playback state, position and speed. Clicking or dragging the scrubber keeps a playing film playing from the new spot, as a `<video>`'s own controls do, and leaves a paused film paused.
 
 ### With a framework
 
@@ -144,10 +144,11 @@ const player = document.querySelector("hyperframes-player");
 // Playback
 player.play();
 player.pause();
-player.seek(2.5); // jump to 2.5 seconds
+player.seek(2.5); // jump to 2.5 seconds and pause there
+player.seek(2.5, { keepPlaying: true }); // jump, and keep playing if it was playing
 
 // Properties
-player.currentTime; // number (read/write)
+player.currentTime; // number (read/write); setting it jumps and pauses, like seek()
 player.duration; // number (read-only)
 player.paused; // boolean (read-only)
 player.ready; // boolean (read-only)
diff --git a/packages/player/src/controls.test.ts b/packages/player/src/controls.test.ts
index d41e29565cc..5eaee9e5980 100644
--- a/packages/player/src/controls.test.ts
+++ b/packages/player/src/controls.test.ts
@@ -165,3 +165,85 @@ describe("createControls idle hide", () => {
     vi.useRealTimers();
   });
 });
+
+describe("createControls scrubbing", () => {
+  function setup() {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const calls: string[] = [];
+    const api = createControls(host, {
+      ...noopCallbacks(),
+      onPlay: () => {
+        calls.push("play");
+        api.updatePlaying(true);
+      },
+      onPause: () => {
+        calls.push("pause");
+        api.updatePlaying(false);
+      },
+      onSeek: (fraction) => calls.push(`seek ${fraction}`),
+      onScrubStart: () => calls.push("scrub start"),
+      onScrubEnd: () => calls.push("scrub end"),
+    });
+    const scrubber = host.querySelector<HTMLElement>(".hfp-scrubber")!;
+    scrubber.getBoundingClientRect = () => ({ left: 0, width: 100 }) as DOMRect;
+    const playButton = host.querySelector<HTMLElement>(".hfp-play-btn")!;
+    const teardown = () => {
+      api.destroy();
+      host.remove();
+    };
+    return { api, calls, scrubber, playButton, teardown };
+  }
+
+  it("holds a playing film while the scrubber is pressed and plays on at release", () => {
+    const { api, calls, scrubber, playButton, teardown } = setup();
+    api.updatePlaying(true);
+
+    scrubber.dispatchEvent(new MouseEvent("mousedown", { clientX: 20 }));
+    document.dispatchEvent(new MouseEvent("mousemove", { clientX: 70 }));
+
+    expect(calls).toEqual(["pause", "scrub start", "seek 0.2", "seek 0.7"]);
+    expect(playButton.classList.contains("hfp-playing")).toBe(true);
+
+    document.dispatchEvent(new MouseEvent("mouseup"));
+
+    expect(calls).toEqual(["pause", "scrub start", "seek 0.2", "seek 0.7", "scrub end", "play"]);
+    expect(playButton.classList.contains("hfp-playing")).toBe(true);
+    teardown();
+  });
+
+  it("leaves a paused film paused", () => {
+    const { calls, scrubber, playButton, teardown } = setup();
+
+    scrubber.dispatchEvent(new MouseEvent("mousedown", { clientX: 30 }));
+    document.dispatchEvent(new MouseEvent("mouseup"));
+
+    expect(calls).toEqual(["scrub start", "seek 0.3", "scrub end"]);
+    expect(playButton.classList.contains("hfp-playing")).toBe(false);
+    teardown();
+  });
+
+  it("plays on once after a touch scrub, without the tap replaying as mouse events", () => {
+    const { api, calls, scrubber, teardown } = setup();
+    api.updatePlaying(true);
+
+    const touch = new Touch({ identifier: 0, target: scrubber, clientX: 40 });
+    scrubber.dispatchEvent(new TouchEvent("touchstart", { touches: [touch] }));
+    const touchEnd = new TouchEvent("touchend", { cancelable: true });
+    document.dispatchEvent(touchEnd);
+
+    expect(calls).toEqual(["pause", "scrub start", "seek 0.4", "scrub end", "play"]);
+    expect(touchEnd.defaultPrevented).toBe(true);
+    teardown();
+  });
+
+  it("leaves taps elsewhere on the page alone", () => {
+    const { teardown } = setup();
+
+    const touchEnd = new TouchEvent("touchend", { cancelable: true });
+    document.dispatchEvent(touchEnd);
+
+    expect(touchEnd.defaultPrevented).toBe(false);
+    teardown();
+  });
+});
diff --git a/packages/player/src/controls.ts b/packages/player/src/controls.ts
index b6485b63b92..1a9240991c3 100644
--- a/packages/player/src/controls.ts
+++ b/packages/player/src/controls.ts
@@ -294,21 +294,30 @@ export function createControls(
   };
 
   let scrubbing = false;
+  let playAfterScrub = false;
 
-  scrubber.addEventListener("mousedown", (e) => {
-    e.stopPropagation();
+  const startScrub = () => {
     scrubbing = true;
+    playAfterScrub = isPlaying;
+    if (playAfterScrub) callbacks.onPause();
     callbacks.onScrubStart?.();
+  };
+  const endScrub = () => {
+    scrubbing = false;
+    callbacks.onScrubEnd?.();
+    if (playAfterScrub) callbacks.onPlay();
+  };
+
+  scrubber.addEventListener("mousedown", (e) => {
+    e.stopPropagation();
+    startScrub();
     handleScrubAt(e.clientX);
   });
   const onMouseMove = (e: MouseEvent) => {
     if (scrubbing) handleScrubAt(e.clientX);
   };
   const onMouseUp = () => {
-    if (scrubbing) {
-      scrubbing = false;
-      callbacks.onScrubEnd?.();
-    }
+    if (scrubbing) endScrub();
   };
   document.addEventListener("mousemove", onMouseMove);
   document.addEventListener("mouseup", onMouseUp);
@@ -316,8 +325,7 @@ export function createControls(
   scrubber.addEventListener(
     "touchstart",
     (e) => {
-      scrubbing = true;
-      callbacks.onScrubStart?.();
+      startScrub();
       const touch = e.touches[0];
       if (touch) handleScrubAt(touch.clientX);
     },
@@ -329,11 +337,10 @@ export function createControls(
       if (touch) handleScrubAt(touch.clientX);
     }
   };
-  const onTouchEnd = () => {
-    if (scrubbing) {
-      scrubbing = false;
-      callbacks.onScrubEnd?.();
-    }
+  const onTouchEnd = (e: TouchEvent) => {
+    if (!scrubbing) return;
+    if (e.cancelable) e.preventDefault();
+    endScrub();
   };
   document.addEventListener("touchmove", onTouchMove, { passive: true });
   document.addEventListener("touchend", onTouchEnd);
@@ -368,6 +375,7 @@ export function createControls(
       time.textContent = `${formatTime(clampedCurrent)} / ${formatTime(duration)}`;
     },
     updatePlaying(playing: boolean) {
+      if (scrubbing && playAfterScrub) return;
       const changed = playing !== isPlaying;
       isPlaying = playing;
       playBtn.classList.toggle("hfp-playing", playing);
diff --git a/packages/player/src/hyperframes-player.test.ts b/packages/player/src/hyperframes-player.test.ts
index 56f84e3a48b..d77a6773296 100644
--- a/packages/player/src/hyperframes-player.test.ts
+++ b/packages/player/src/hyperframes-player.test.ts
@@ -812,12 +812,16 @@ describe("HyperframesPlayer seek() sync path", () => {
     postMessage?: ReturnType<typeof vi.fn>;
   };
   type PlayerInternal = HTMLElement & {
-    seek: (t: number) => void;
+    seek: (t: number, options?: { keepPlaying?: boolean }) => void;
     play: () => void;
     pause: () => void;
     stopMedia: () => void;
     iframe: HTMLIFrameElement;
     _currentTime: number;
+    _ready: boolean;
+    _assetsReady: boolean;
+    currentTime: number;
+    paused: boolean;
     duration: number;
     _parentMedia: Array<{
       el: { pause: ReturnType<typeof vi.fn>; src: string };
@@ -1169,6 +1173,107 @@ describe("HyperframesPlayer seek() sync path", () => {
     player.seek(11);
     expect(player._currentTime).toBe(11);
   });
+
+  function fakeTimeline(duration: number) {
+    const state = { time: 0, playing: false };
+    const timeline: TimelineStub = {
+      duration: () => duration,
+      time: () => state.time,
+      seek: (t) => void (state.time = t),
+      play: () => void (state.playing = true),
+      pause: () => void (state.playing = false),
+    };
+    return { timeline, state };
+  }
+
+  function recordPlayAndPause(): string[] {
+    const events: string[] = [];
+    for (const type of ["play", "pause"]) player.addEventListener(type, () => events.push(type));
+    return events;
+  }
+
+  it("keeps playing from the new time when seek() is asked to keep playing", () => {
+    const { timeline, state } = fakeTimeline(10);
+    stubContentWindow({ __timelines: { main: timeline }, postMessage: vi.fn() });
+    player.play();
+    const events = recordPlayAndPause();
+
+    player.seek(3, { keepPlaying: true });
+
+    expect(player.paused).toBe(false);
+    expect(player.currentTime).toBe(3);
+    expect(state).toEqual({ time: 3, playing: true });
+    expect(events).toEqual([]);
+  });
+
+  it("stays paused when seek() is asked to keep playing a paused film", () => {
+    const { timeline, state } = fakeTimeline(10);
+    stubContentWindow({ __timelines: { main: timeline }, postMessage: vi.fn() });
+    const events = recordPlayAndPause();
+
+    player.seek(3, { keepPlaying: true });
+
+    expect(player.paused).toBe(true);
+    expect(state).toEqual({ time: 3, playing: false });
+    expect(events).toEqual([]);
+  });
+
+  it("asks a cross-origin runtime to play on after a seek that keeps playing", () => {
+    const post = vi.fn();
+    stubContentWindow({ postMessage: post });
+    player._ready = true;
+    player._assetsReady = true;
+    player.play();
+    post.mockClear();
+
+    player.seek(3, { keepPlaying: true });
+
+    const actions = post.mock.calls
+      .map(([message]) => message.action)
+      .filter((action) => action === "seek" || action === "play");
+    expect(actions).toEqual(["seek", "play"]);
+    expect(post).toHaveBeenCalledWith(
+      expect.objectContaining({ action: "seek", timeSeconds: 3 }),
+      "*",
+    );
+    expect(player.paused).toBe(false);
+  });
+
+  it("keeps a playing film playing from where the viewer releases the scrubber", () => {
+    const { timeline, state } = fakeTimeline(10);
+    stubContentWindow({ __timelines: { main: timeline }, postMessage: vi.fn() });
+    player.setAttribute("controls", "");
+    player.play();
+    const events = recordPlayAndPause();
+    const scrubber = player.shadowRoot!.querySelector<HTMLElement>(".hfp-scrubber")!;
+    scrubber.getBoundingClientRect = () => ({ left: 0, width: 100 }) as DOMRect;
+
+    scrubber.dispatchEvent(new MouseEvent("mousedown", { clientX: 20 }));
+    document.dispatchEvent(new MouseEvent("mousemove", { clientX: 70 }));
+    document.dispatchEvent(new MouseEvent("mouseup"));
+
+    expect(player.paused).toBe(false);
+    expect(player.currentTime).toBe(7);
+    expect(state).toEqual({ time: 7, playing: true });
+    expect(events).toEqual(["pause", "play"]);
+  });
+
+  it("leaves a paused film paused when the viewer clicks the scrubber", () => {
+    const { timeline, state } = fakeTimeline(10);
+    stubContentWindow({ __timelines: { main: timeline }, postMessage: vi.fn() });
+    player.setAttribute("controls", "");
+    player.seek(0);
+    const events = recordPlayAndPause();
+    const scrubber = player.shadowRoot!.querySelector<HTMLElement>(".hfp-scrubber")!;
+    scrubber.getBoundingClientRect = () => ({ left: 0, width: 100 }) as DOMRect;
+
+    scrubber.dispatchEvent(new MouseEvent("mousedown", { clientX: 70 }));
+    document.dispatchEvent(new MouseEvent("mouseup"));
+
+    expect(player.paused).toBe(true);
+    expect(state).toEqual({ time: 7, playing: false });
+    expect(events).toEqual([]);
+  });
 });
 
 describe("HyperframesPlayer loop end-state handling", () => {
@@ -3807,7 +3912,7 @@ describe("HyperframesPlayer asset-ready gate", () => {
     _onIframeLoad(): void;
     play(): void;
     pause(): void;
-    seek(timeInSeconds: number): void;
+    seek(timeInSeconds: number, options?: { keepPlaying?: boolean }): void;
     shaderLoader: {
       showAssetsLoading(): void;
       hide(): void;
@@ -4386,6 +4491,29 @@ describe("HyperframesPlayer asset-ready gate", () => {
     player.remove();
   });
 
+  it("keeps a queued play if a seek asks to keep playing while assets are still buffering", async () => {
+    const player = await createConnectedPlayer();
+
+    const { doc, video } = createStalledVideoDoc();
+    stubIframeContentDocument(player.iframe, doc);
+
+    const playSpy = vi.fn();
+    player.addEventListener("play", playSpy);
+
+    player._waitForAssetsReady(doc);
+    player.play();
+    player.seek(1.5, { keepPlaying: true });
+
+    video.dispatchEvent(new Event("canplay"));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(player.assetsReady).toBe(true);
+    expect(player._paused).toBe(false);
+    expect(playSpy).toHaveBeenCalledTimes(1);
+
+    player.remove();
+  });
+
   it("settles a play() called twice while buffering into exactly one playback start (pre-existing idempotency, not the pause/seek cancel)", async () => {
     const player = await createConnectedPlayer();
 
diff --git a/packages/player/src/hyperframes-player.ts b/packages/player/src/hyperframes-player.ts
index 3c257631bce..475131a8e36 100644
--- a/packages/player/src/hyperframes-player.ts
+++ b/packages/player/src/hyperframes-player.ts
@@ -487,10 +487,11 @@ class HyperframesPlayer extends HTMLElement {
     this._media.stopAdoptedMedia();
   }
 
-  seek(timeInSeconds: number) {
-    // seek()'s own contract is that it lands paused, so a play still queued
-    // from the asset-buffering window is cancelled here too — same reason as
-    // pause() above.
+  seek(timeInSeconds: number, options?: { keepPlaying?: boolean }) {
+    const playOn = options?.keepPlaying === true && (!this._paused || this._pendingPlay);
+    // A plain seek() lands paused, so a play still queued from the
+    // asset-buffering window is cancelled here too — same reason as pause()
+    // above. keepPlaying plays on from the new time, as <video>'s currentTime does.
     this._pendingPlay = false;
     if (!this._trySyncSeek(timeInSeconds) && !this._tryDirectTimelineSeek(timeInSeconds)) {
       this._sendControl("seek", {
@@ -523,6 +524,7 @@ class HyperframesPlayer extends HTMLElement {
     this._paused = true;
     this.controlsApi?.updatePlaying(false);
     this.controlsApi?.updateTime(this._currentTime, this._duration);
+    if (playOn) this._play(false);
   }
 
   setColorGrading(target: ColorGradingTarget, grading: unknown) {
diff --git a/packages/studio/src/components/StudioOverlays.tsx b/packages/studio/src/components/StudioOverlays.tsx
index e27da1467c1..b20d1556ec9 100644
--- a/packages/studio/src/components/StudioOverlays.tsx
+++ b/packages/studio/src/components/StudioOverlays.tsx
@@ -75,19 +75,21 @@ export const StudioOverlays = memo(function StudioOverlays({
           }}
         />
       )}
-      {/* One bottom-right stack so the feedback card and toasts queue instead
-          of covering each other. Empty when nothing is showing. */}
-      <div className="absolute bottom-6 right-6 z-91 flex flex-col items-end gap-2">
-        {toasts.map((toast) => (
-          <StudioToast
-            key={toast.id}
-            message={toast.message}
-            tone={toast.tone}
-            leaving={toast.leaving}
-            onDismiss={() => dismissToast(toast.id)}
-          />
-        ))}
-        <StudioFeedbackCard />
+      {/* Toasts centre in the room the feedback card leaves, so the two never cover each other. */}
+      <div className="pointer-events-none absolute inset-x-6 bottom-6 z-91 flex items-end gap-2">
+        <div className="flex min-w-0 flex-1 flex-col items-center gap-2 *:pointer-events-auto">
+          {toasts.map((toast) => (
+            <StudioToast
+              key={toast.id}
+              message={toast.message}
+              tone={toast.tone}
+              onDismiss={() => dismissToast(toast.id)}
+            />
+          ))}
+        </div>
+        <div className="pointer-events-auto">
+          <StudioFeedbackCard />
+        </div>
       </div>
     </>
   );
diff --git a/packages/studio/src/components/StudioToast.test.tsx b/packages/studio/src/components/StudioToast.test.tsx
new file mode 100644
index 00000000000..22278b7fa74
--- /dev/null
+++ b/packages/studio/src/components/StudioToast.test.tsx
@@ -0,0 +1,41 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { mountReactHarness } from "../hooks/domSelectionTestHarness";
+import { StudioToast } from "./StudioToast";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function mount(tone: "error" | "info") {
+  const dismissed: string[] = [];
+  mountReactHarness(
+    <StudioToast message="Saved" tone={tone} onDismiss={() => dismissed.push(tone)} />,
+  );
+  return dismissed;
+}
+
+describe("StudioToast", () => {
+  it("dismisses an info toast on a click anywhere on it, with no Dismiss button", () => {
+    const dismissed = mount("info");
+    expect(document.querySelector("button")).toBeNull();
+    act(() => document.querySelector<HTMLElement>("[role=status]")?.click());
+    expect(dismissed).toEqual(["info"]);
+  });
+
+  it("keeps an error toast up on a click on it, so its text can be selected and copied", () => {
+    const dismissed = mount("error");
+    act(() => document.querySelector<HTMLElement>("[role=alert]")?.click());
+    expect(dismissed).toEqual([]);
+  });
+
+  it("gives a persisting error toast a Dismiss button that dismisses it once", () => {
+    const dismissed = mount("error");
+    act(() => document.querySelector<HTMLElement>("[aria-label=Dismiss]")?.click());
+    expect(dismissed).toEqual(["error"]);
+  });
+});
diff --git a/packages/studio/src/components/StudioToast.tsx b/packages/studio/src/components/StudioToast.tsx
index a00fb1b08aa..7f7244f2055 100644
--- a/packages/studio/src/components/StudioToast.tsx
+++ b/packages/studio/src/components/StudioToast.tsx
@@ -1,50 +1,34 @@
+import { X } from "../icons/SystemIcons";
+import { toastPersists } from "../hooks/useToast";
+
 interface StudioToastProps {
   message: string;
-  tone?: "error" | "info";
-  /** Plays the exit animation when true (owner removes the node after ~160ms). */
-  leaving?: boolean;
-  onDismiss?: () => void;
+  tone: "error" | "info";
+  onDismiss: () => void;
 }
 
-export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastProps) {
-  const isError = tone === "error";
+export function StudioToast({ message, tone, onDismiss }: StudioToastProps) {
+  const persists = toastPersists(tone);
   return (
     <div
-      role={isError ? "alert" : "status"}
-      className={`motion-reduce:animate-none ${leaving ? "hf-toast-exit" : "hf-toast-enter"}`}
+      role={tone === "error" ? "alert" : "status"}
+      onClick={persists ? undefined : onDismiss}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") onDismiss();
+      }}
+      className={`hf-notice-in flex min-h-12 w-fit max-w-[min(680px,100%)] items-center gap-1.5 rounded-3xl bg-text-0 py-1.5 pr-1.5 pl-5 text-[14px] leading-5 font-medium wrap-anywhere text-bg-0 shadow-notice not-has-[button]:pr-5 ${persists ? "" : "cursor-pointer"}`}
     >
-      <div
-        className={`relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-2xl py-3 pl-4 pr-2 text-[12px] ${toastSurface(isError)}`}
-      >
-        <span
-          className={`min-w-0 wrap-break-word leading-5 ${isError ? "text-danger-ink" : "text-text-0"}`}
+      <span className="min-w-0 flex-1 text-pretty">{message}</span>
+      {persists && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="relative ml-2 grid h-9 w-9 shrink-0 place-items-center rounded-full text-bg-0/72 transition-[background-color,color,scale] duration-hover ease-out hover:bg-bg-0/16 hover:text-bg-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bg-0 active:scale-[0.96]"
+          aria-label="Dismiss"
         >
-          {message}
-        </span>
-        {onDismiss && (
-          <button
-            type="button"
-            onClick={onDismiss}
-            className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-hover hover:text-neutral-300"
-            aria-label="Dismiss"
-          >
-            <svg
-              width="10"
-              height="10"
-              viewBox="0 0 10 10"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-            >
-              <path d="M2 2l6 6M8 2l-6 6" />
-            </svg>
-          </button>
-        )}
-      </div>
+          <X size={14} />
+        </button>
+      )}
     </div>
   );
 }
-
-export function toastSurface(isError: boolean): string {
-  return `border shadow-popover bg-raised ${isError ? "border-danger/40" : "border-border"}`;
-}
diff --git a/packages/studio/src/components/feedback/StudioFeedbackCard.tsx b/packages/studio/src/components/feedback/StudioFeedbackCard.tsx
index 9ed8f7ad482..5c379f288b4 100644
--- a/packages/studio/src/components/feedback/StudioFeedbackCard.tsx
+++ b/packages/studio/src/components/feedback/StudioFeedbackCard.tsx
@@ -1,5 +1,4 @@
 import { memo, useState, useCallback, useRef, useEffect } from "react";
-import { toastSurface } from "../StudioToast";
 import {
   trackStudioFeedback,
   trackStudioFeedbackShown,
@@ -213,7 +212,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
       }}
     >
       <div
-        className={`flex w-[min(340px,calc(100vw-48px))] flex-col gap-2.5 overflow-hidden rounded-2xl px-3.5 py-3 ${toastSurface(failed)}`}
+        className={`flex w-[min(340px,calc(100vw-48px))] flex-col gap-2.5 overflow-hidden rounded-2xl px-3.5 py-3 ${cardSurface(failed)}`}
       >
         <div className="flex items-start gap-3">
           <p
@@ -359,3 +358,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
     </div>
   );
 });
+
+function cardSurface(isError: boolean): string {
+  return `border shadow-popover bg-raised ${isError ? "border-danger/40" : "border-border"}`;
+}
diff --git a/packages/studio/src/components/ui/Menu.test.tsx b/packages/studio/src/components/ui/Menu.test.tsx
index 3322657f5ae..f6b2caba2b0 100644
--- a/packages/studio/src/components/ui/Menu.test.tsx
+++ b/packages/studio/src/components/ui/Menu.test.tsx
@@ -6,7 +6,15 @@ import React, { act, useState } from "react";
 import { compile } from "tailwindcss";
 import { afterEach, beforeAll, describe, expect, it } from "vitest";
 import { loadStylesheet, STYLES_DIR } from "../../styles/styleSources";
-import { ContextMenu, Menu, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator } from "./Menu";
+import {
+  ContextMenu,
+  floatingMotion,
+  Menu,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+} from "./Menu";
 import { Popover } from "./Popover";
 import { isTypingTarget } from "../../utils/typingTarget";
 import { shouldIgnorePlaybackShortcutTarget } from "../../player/lib/playbackShortcuts";
@@ -443,3 +451,24 @@ describe("open motion", () => {
     expect(compileStudioCss([rowRadius])).toMatch(/calc\(var\(--radius-lg\) \+ 6px\)/);
   });
 });
+
+describe("floatingMotion", () => {
+  it("transitions every property its starting and ending styles set", () => {
+    const classes = floatingMotion("duration-open").split(/\s+/);
+    const transitioned = classes.flatMap(
+      (c) => c.match(/^transition-\[(.+)\]$/)?.[1].split(",") ?? [],
+    );
+    const animated = classes
+      .flatMap(
+        (c) =>
+          c
+            .match(
+              /^data-\[(?:starting|ending)-style\]:(?:\[([\w-]+):|(opacity|scale|translate|rotate)-)/,
+            )
+            ?.slice(1) ?? [],
+      )
+      .filter(Boolean);
+    expect(new Set(animated)).toEqual(new Set(["opacity", "scale"]));
+    for (const property of animated) expect(transitioned).toContain(property);
+  });
+});
diff --git a/packages/studio/src/components/ui/Menu.tsx b/packages/studio/src/components/ui/Menu.tsx
index ebefc3f04b4..5e0046d017c 100644
--- a/packages/studio/src/components/ui/Menu.tsx
+++ b/packages/studio/src/components/ui/Menu.tsx
@@ -47,7 +47,7 @@ const VIEWPORT_MARGIN = 8;
 export function floatingMotion(openDuration: "duration-open" | "duration-tooltip") {
   return cn(
     "origin-[var(--transform-origin)] outline-hidden",
-    "transition-[opacity,transform] ease-out-quint",
+    "transition-[opacity,scale] ease-out-quint",
     openDuration,
     "data-[ending-style]:duration-close data-[ending-style]:ease-in",
     "data-[starting-style]:[opacity:var(--popup-enter-opacity)]",
diff --git a/packages/studio/src/hooks/useToast.ts b/packages/studio/src/hooks/useToast.ts
index 209bfc7e21d..24d6683d621 100644
--- a/packages/studio/src/hooks/useToast.ts
+++ b/packages/studio/src/hooks/useToast.ts
@@ -4,19 +4,18 @@ import type { AppToast } from "../utils/studioHelpers";
 
 interface ToastItem extends AppToast {
   id: number;
-  /** True while the exit animation plays, just before removal. */
-  leaving?: boolean;
 }
 
 const AUTO_DISMISS_MS = 4000;
-const EXIT_MS = 160;
 const MAX_TOASTS = 3;
 
+/** Error toasts persist until dismissed so failures can't silently vanish. */
+export const toastPersists = (tone: AppToast["tone"]) => tone === "error";
+
 let nextToastId = 1;
 
 /**
- * Stacked toasts (max 3). Info toasts auto-dismiss after 4s; error toasts
- * persist until explicitly dismissed so failures can't silently vanish.
+ * Stacked toasts (max 3). Info toasts auto-dismiss after 4s; error toasts persist.
  */
 export function useToast() {
   const [toasts, setToasts] = useState<ToastItem[]>([]);
@@ -30,7 +29,7 @@ export function useToast() {
     }
   }, []);
 
-  const removeToast = useCallback(
+  const dismissToast = useCallback(
     (id: number) => {
       clearTimer(id);
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -38,17 +37,6 @@ export function useToast() {
     [clearTimer],
   );
 
-  const dismissToast = useCallback(
-    (id: number) => {
-      clearTimer(id);
-      // Mark leaving so the exit animation plays, then remove.
-      setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, leaving: true } : t)));
-      const timer = setTimeout(() => removeToast(id), EXIT_MS);
-      timersRef.current.set(id, timer);
-    },
-    [clearTimer, removeToast],
-  );
-
   const showToast = useCallback(
     (message: string, tone: AppToast["tone"] = "error"): number => {
       const id = nextToastId++;
@@ -61,7 +49,7 @@ export function useToast() {
         }
         return next;
       });
-      if (tone !== "error") {
+      if (!toastPersists(tone)) {
         const timer = setTimeout(() => dismissToast(id), AUTO_DISMISS_MS);
         timersRef.current.set(id, timer);
       }
diff --git a/packages/studio/src/player/lib/thumbnailFrameSink.test.ts b/packages/studio/src/player/lib/thumbnailFrameSink.test.ts
new file mode 100644
index 00000000000..bc74cc2d00e
--- /dev/null
+++ b/packages/studio/src/player/lib/thumbnailFrameSink.test.ts
@@ -0,0 +1,92 @@
+// @vitest-environment happy-dom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { scaledFrames } from "./thumbnailFrameSink";
+
+const drawImage = vi.fn();
+const createImageBitmapMock = vi.fn();
+const bitmap = { close: vi.fn() };
+
+function sample(over: Partial<{ rotation: number; flipped: boolean }> = {}) {
+  const frame = { displayWidth: 3456, displayHeight: 2234, close: vi.fn() };
+  return {
+    frame,
+    rotation: 0,
+    flipped: false,
+    toVideoFrame: vi.fn(() => frame),
+    drawWithFit: vi.fn(),
+    close: vi.fn(),
+    ...over,
+  };
+}
+
+async function collect(samples: (ReturnType<typeof sample> | null)[], fit: "cover" | "contain") {
+  const sink = {
+    async *samplesAtTimestamps() {
+      yield* samples;
+    },
+  };
+  const out: ({ canvas: HTMLCanvasElement } | null)[] = [];
+  const times = (async function* () {})();
+  for await (const item of scaledFrames(sink, times, { width: 360, height: 240 }, fit))
+    out.push(item as { canvas: HTMLCanvasElement } | null);
+  return out;
+}
+
+describe("scaledFrames", () => {
+  beforeEach(() => {
+    vi.stubGlobal("createImageBitmap", createImageBitmapMock.mockResolvedValue(bitmap));
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue({
+      drawImage,
+    } as unknown as RenderingContext);
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+    vi.clearAllMocks();
+  });
+
+  it("crops and scales a straight frame in createImageBitmap, centred for cover", async () => {
+    const s = sample();
+    const [out] = await collect([s], "cover");
+
+    expect(s.drawWithFit).not.toHaveBeenCalled();
+    const [frame, x, y, w, h, options] = createImageBitmapMock.mock.calls[0]!;
+    expect(frame).toBe(s.frame);
+    expect(options).toMatchObject({ resizeWidth: 360, resizeHeight: 240 });
+    expect(w / h).toBeCloseTo(360 / 240, 3);
+    expect(x + w / 2).toBeCloseTo(3456 / 2, 3);
+    expect(y + h / 2).toBeCloseTo(2234 / 2, 3);
+    expect(drawImage).toHaveBeenCalledWith(bitmap, 0, 0, 360, 240);
+    expect([out!.canvas.width, out!.canvas.height]).toEqual([360, 240]);
+    expect(s.frame.close).toHaveBeenCalled();
+    expect(bitmap.close).toHaveBeenCalled();
+    expect(s.close).toHaveBeenCalled();
+  });
+
+  it("contain keeps the whole frame", async () => {
+    await collect([sample()], "contain");
+    const [, x, y, w, h] = createImageBitmapMock.mock.calls[0]!;
+    expect([x, y, w, h]).toEqual([0, 0, 3456, 2234]);
+  });
+
+  it("leaves turned and flipped frames to the sample's own draw, which applies the turn", async () => {
+    const turned = sample({ rotation: 90 });
+    const flipped = sample({ flipped: true });
+    await collect([turned, flipped], "cover");
+
+    expect(createImageBitmapMock).not.toHaveBeenCalled();
+    expect(turned.drawWithFit).toHaveBeenCalledWith(expect.anything(), { fit: "cover" });
+    expect(flipped.drawWithFit).toHaveBeenCalled();
+  });
+
+  it("passes a missing frame through and closes the sample even when the scale fails", async () => {
+    expect(await collect([null], "cover")).toEqual([null]);
+
+    const s = sample();
+    createImageBitmapMock.mockRejectedValueOnce(new Error("decode failed"));
+    await expect(collect([s], "cover")).rejects.toThrow("decode failed");
+    expect(s.frame.close).toHaveBeenCalled();
+    expect(s.close).toHaveBeenCalled();
+  });
+});
diff --git a/packages/studio/src/player/lib/thumbnailFrameSink.ts b/packages/studio/src/player/lib/thumbnailFrameSink.ts
new file mode 100644
index 00000000000..b03f4fab48c
--- /dev/null
+++ b/packages/studio/src/player/lib/thumbnailFrameSink.ts
@@ -0,0 +1,83 @@
+/** The slice of a Mediabunny video sample the strip reads. */
+interface FrameSample {
+  rotation: number;
+  flipped?: boolean;
+  toVideoFrame(): VideoFrame;
+  drawWithFit(
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    options: { fit: "contain" | "cover" },
+  ): void;
+  close(): void;
+}
+
+interface FrameSampleSink {
+  samplesAtTimestamps(timestamps: AsyncIterable<number>): AsyncIterable<FrameSample | null>;
+}
+
+type FrameCanvas = HTMLCanvasElement | OffscreenCanvas;
+type Box = { width: number; height: number };
+
+function newCanvas({ width, height }: Box): FrameCanvas {
+  if (typeof document === "undefined") return new OffscreenCanvas(width, height);
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+
+/** The part of a source that fills a box of the target's shape, centred. */
+function coverCrop(source: Box, target: Box) {
+  const scale = Math.max(target.width / source.width, target.height / source.height);
+  const width = Math.min(source.width, target.width / scale);
+  const height = Math.min(source.height, target.height / scale);
+  return { x: (source.width - width) / 2, y: (source.height - height) / 2, width, height };
+}
+
+async function drawScaled(
+  sample: FrameSample,
+  context: CanvasRenderingContext2D,
+  target: Box,
+  fit: "contain" | "cover",
+): Promise<void> {
+  const frame = sample.toVideoFrame();
+  const source = { width: frame.displayWidth, height: frame.displayHeight };
+  const crop = fit === "cover" ? coverCrop(source, target) : { x: 0, y: 0, ...source };
+  const bitmap = await createImageBitmap(frame, crop.x, crop.y, crop.width, crop.height, {
+    resizeWidth: target.width,
+    resizeHeight: target.height,
+    resizeQuality: "medium",
+  }).finally(() => frame.close());
+  try {
+    context.drawImage(bitmap, 0, 0, target.width, target.height);
+  } finally {
+    bitmap.close();
+  }
+}
+
+/**
+ * Strip frames cropped and scaled by the browser off the main thread: drawing a 4K frame onto a strip-sized canvas
+ * holds the main thread for 100 ms or more. Turned or flipped frames keep the sample's own draw, which turns them.
+ */
+export async function* scaledFrames(
+  sink: FrameSampleSink,
+  times: AsyncIterable<number>,
+  target: Box,
+  fit: "contain" | "cover",
+): AsyncGenerator<{ canvas: FrameCanvas } | null> {
+  for await (const sample of sink.samplesAtTimestamps(times)) {
+    if (!sample) {
+      yield null;
+      continue;
+    }
+    try {
+      const canvas = newCanvas(target);
+      const context = canvas.getContext("2d") as CanvasRenderingContext2D | null;
+      if (!context) throw new Error("Thumbnail canvas has no 2d context");
+      if (sample.rotation === 0 && !sample.flipped) await drawScaled(sample, context, target, fit);
+      else sample.drawWithFit(context, { fit });
+      yield { canvas };
+    } finally {
+      sample.close();
+    }
+  }
+}
diff --git a/packages/studio/src/player/lib/thumbnailVideoDecoder.test.ts b/packages/studio/src/player/lib/thumbnailVideoDecoder.test.ts
index e0dee377dd0..a5bd3358e0c 100644
--- a/packages/studio/src/player/lib/thumbnailVideoDecoder.test.ts
+++ b/packages/studio/src/player/lib/thumbnailVideoDecoder.test.ts
@@ -11,6 +11,15 @@ const sourceRetryRules: string[] = [];
 const cancelledReads: ReturnType<typeof vi.fn>[] = [];
 const canvasesAtTimestamps = vi.fn();
 const canvasSinks: unknown[] = [];
+const drawImage = vi.fn();
+const createImageBitmapMock = vi.fn();
+const fourKSample = () => ({
+  rotation: 0,
+  flipped: false,
+  toVideoFrame: () => ({ displayWidth: 3456, displayHeight: 2234, close: vi.fn() }),
+  drawWithFit: vi.fn(),
+  close: vi.fn(),
+});
 const getKeyPacket = vi.fn(async (_time: number) => null as { timestamp: number } | null);
 const input = {
   getPrimaryVideoTrack: vi.fn(),
@@ -37,11 +46,16 @@ vi.mock("mediabunny", () => ({
     getPrimaryVideoTrack = input.getPrimaryVideoTrack;
     dispose = input.dispose;
   },
-  CanvasSink: class {
+  // Each frame the canvas seam yields becomes one straight (unturned) sample of a 4K source.
+  VideoSampleSink: class {
     constructor() {
       canvasSinks.push(this);
     }
-    canvasesAtTimestamps = canvasesAtTimestamps;
+    async *samplesAtTimestamps(timestamps: AsyncIterable<number>) {
+      for await (const wrapped of canvasesAtTimestamps(timestamps)) {
+        yield wrapped === null ? null : fourKSample();
+      }
+    }
   },
   EncodedPacketSink: class {
     getKeyPacket = getKeyPacket;
@@ -89,6 +103,11 @@ beforeEach(() => {
   HTMLCanvasElement.prototype.toBlob = function toBlob(callback) {
     callback(new Blob(["frame"], { type: "image/jpeg" }));
   };
+  HTMLCanvasElement.prototype.getContext = (() => ({ drawImage })) as never;
+  vi.stubGlobal(
+    "createImageBitmap",
+    createImageBitmapMock.mockImplementation(async () => ({ close: vi.fn() })),
+  );
   input.getPrimaryVideoTrack.mockResolvedValue({
     getDisplayWidth: vi.fn(async () => 1080),
     getDisplayHeight: vi.fn(async () => 1920),
@@ -96,6 +115,28 @@ beforeEach(() => {
   });
 });
 
+describe("decodeVideoThumbnail frame scaling", () => {
+  it("never hands a full-size frame to a canvas draw: the browser crops and scales it to the strip's size", async () => {
+    recordDecodes([]);
+    await decodeVideoThumbnail(
+      { source, sourceStart: 0, sourceRangeDuration: 10, frameCount: 2 },
+      new AbortController().signal,
+    );
+
+    expect(createImageBitmapMock).toHaveBeenCalled();
+    for (const [, , , cropWidth, cropHeight, options] of createImageBitmapMock.mock.calls) {
+      expect(options.resizeWidth).toBeLessThan(cropWidth);
+      expect(options.resizeHeight).toBeLessThan(cropHeight);
+    }
+    // What lands on the canvas is the small bitmap, never a 4K frame.
+    for (const [image, , , width, height] of drawImage.mock.calls) {
+      expect(image).not.toHaveProperty("displayWidth");
+      expect(width).toBeLessThan(1000);
+      expect(height).toBeLessThan(1000);
+    }
+  });
+});
+
 describe("videoThumbnailTimestamps", () => {
   it("uses the midpoint for a poster, and each slice's left edge then the end for a strip", () => {
     expect(videoThumbnailTimestamps(2, 6, 1)).toEqual([5]);
@@ -706,20 +747,6 @@ describe("decodeVideoThumbnail's shared source", () => {
     expect(dispose).not.toHaveBeenCalled();
   });
 
-  it("keeps the reader when an offscreen frame will not encode", async () => {
-    const offscreen = { width: 1, height: 1, convertToBlob: () => Promise.reject(new Error("no")) };
-    canvasesAtTimestamps.mockImplementationOnce(async function* (
-      timestamps: AsyncIterable<number>,
-    ) {
-      for await (const _time of timestamps) yield { canvas: offscreen };
-    });
-    await expect(decodeVideoThumbnail(clip(0), signal)).rejects.toThrow("encode failed");
-    recordDecodes([]);
-    await decodeVideoThumbnail(clip(6), signal);
-    expect(input.getPrimaryVideoTrack).toHaveBeenCalledTimes(1);
-    expect(dispose).not.toHaveBeenCalled();
-  });
-
   it("keeps the reader of a clip scrolled away from, for the next clip", async () => {
     vi.useFakeTimers();
     try {
diff --git a/packages/studio/src/player/lib/thumbnailVideoDecoder.ts b/packages/studio/src/player/lib/thumbnailVideoDecoder.ts
index 8a26744f4ac..e1dc928384a 100644
--- a/packages/studio/src/player/lib/thumbnailVideoDecoder.ts
+++ b/packages/studio/src/player/lib/thumbnailVideoDecoder.ts
@@ -4,6 +4,7 @@ import {
   type ThumbnailLoadedResult,
   type ThumbnailValue,
 } from "./thumbnailScheduler";
+import { scaledFrames } from "./thumbnailFrameSink";
 import { MediaFetchError, reportMediaFetchFailure } from "./mediaFetch";
 import {
   acquireThumbnailSource,
@@ -395,12 +396,11 @@ async function decodeMissingFrames(
         }
       }
       const target = targetDimensions(info.aspect, budgets);
-      const sink = new mediabunny.CanvasSink(track, {
-        width: target.width,
-        height: target.height,
-        fit: request.fit ?? "cover",
-        poolSize: 1,
-      });
+      const frames = new mediabunny.VideoSampleSink(track);
+      const sink: ThumbnailCanvasSink = {
+        canvasesAtTimestamps: (timestamps) =>
+          scaledFrames(frames, timestamps, target, request.fit ?? "cover"),
+      };
       const times = decodeTimesAtNearbyKeyframes();
       await decodeFrames(sink, times, slots, signal, resources, source.progress);
     }
diff --git a/packages/studio/src/styles/components.css b/packages/studio/src/styles/components.css
index ae76e180bce..b1f31c060d7 100644
--- a/packages/studio/src/styles/components.css
+++ b/packages/studio/src/styles/components.css
@@ -605,7 +605,7 @@
   }
 }
 
-/* Toast enter/exit (StudioToast) */
+/* Feedback card enter/exit (StudioFeedbackCard) */
 @keyframes hf-toast-in {
   from {
     opacity: 0;
@@ -646,6 +646,24 @@
   }
 }
 
+/* A toast rises in and leaves at once (StudioToast). */
+@keyframes hf-notice-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+}
+
+.hf-notice-in {
+  animation: hf-notice-in 200ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hf-notice-in {
+    animation: none;
+  }
+}
+
 /* Overlay/backdrop entrance — the heaviest visual changes shouldn't pop in */
 @keyframes hf-backdrop-in {
   from {
diff --git a/packages/studio/src/styles/theme.css b/packages/studio/src/styles/theme.css
index d62a08ca821..fc95e023864 100644
--- a/packages/studio/src/styles/theme.css
+++ b/packages/studio/src/styles/theme.css
@@ -285,6 +285,9 @@
     0 16px 40px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.55)),
     0 0 0 1px light-dark(rgb(0 0 0 / 0.07), rgb(0 0 0 / 0.45));
 
+  /* The toast pill: a close contact shadow under a soft lift. */
+  --shadow-notice: 0 2px 4px rgb(0 0 0 / 0.12), 0 14px 36px -8px rgb(0 0 0 / 0.4);
+
   /* The primary button reads as a raised key rather than a floating panel: a tight
    * contact shadow, a soft ambient one, and an inner top highlight. */
   --shadow-btn-primary:
diff --git a/scripts/package-size-budgets.json b/scripts/package-size-budgets.json
index 1523d7e3d6c..8c684fb9f11 100644
--- a/scripts/package-size-budgets.json
+++ b/scripts/package-size-budgets.json
@@ -32,7 +32,7 @@
     "unpacked": 885314
   },
   "@hyperframes/player": {
-    "packed": 157145,
+    "packed": 159100,
     "unpacked": 541601
   },
   "@hyperframes/producer": {