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..1d5e21b0c97 100644
--- a/docs/packages/player.mdx
+++ b/docs/packages/player.mdx
@@ -138,6 +138,41 @@ player.addEventListener("timeupdate", (event) => {
 | `error`        | `{ message }`     | Load or runtime error; a video adds its `MediaError` `code`  |
 | `playbackerror` | `{ source, error }` | The browser blocked playback, for example unmuted autoplay |
 
+## Custom icons and loading mark
+
+Put an element with a `slot` attribute inside the player to replace a control glyph or the loading mark. Anything you leave out keeps the default.
+
+| Slot                | Shown when                                                  | Default size |
+| ------------------- | ----------------------------------------------------------- | ------------ |
+| `play-icon`         | Paused                                                      | 24 px        |
+| `pause-icon`        | Playing                                                     | 24 px        |
+| `volume-high-icon`  | Unmuted, volume 0.5 or higher                               | 20 px        |
+| `volume-low-icon`   | Unmuted, volume below 0.5                                   | 20 px        |
+| `volume-muted-icon` | Muted                                                       | 20 px        |
+| `loading-mark`      | Preparing shader transitions, loading assets, and buffering | 78 px        |
+
+```html title="index.html"
+<hyperframes-player src="/compositions/intro.html" controls>
+  <svg slot="play-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path d="M8 5v14l11-7z" />
+  </svg>
+  <svg slot="pause-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path d="M6 5h4v14H6zM14 5h4v14h-4z" />
+  </svg>
+  <img slot="loading-mark" src="/brand-mark.svg" width="78" height="78" alt="" />
+</hyperframes-player>
+```
+
+Glyphs take the control bar's color through `currentColor`, and you set their size. Put `slot` on the `<svg>` or `<img>` itself, as a direct child of the player; a wrapper element needs `display: contents` to keep the glyph centered. A custom mark replaces the HyperFrames light sweep and glow, so add your own CSS animation if you want motion.
+
+Until the element is defined, its children show as plain content. Hide them:
+
+```css title="styles.css"
+hyperframes-player:not(:defined) > [slot] {
+  display: none;
+}
+```
+
 ## Advanced: iframe access
 
 The composition runs inside an `<iframe>` in the player's Shadow DOM. For most
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..0ade147d586 100644
--- a/packages/player/README.md
+++ b/packages/player/README.md
@@ -276,6 +276,55 @@ player.addEventListener("ended", () => {
 });
 ```
 
+## Custom icons and loading mark
+
+Put an element with a `slot` attribute inside the player to replace a control glyph or the loading mark. Anything you leave out keeps the default.
+
+| Slot                | Shown when                                                  | Default size |
+| ------------------- | ----------------------------------------------------------- | ------------ |
+| `play-icon`         | Paused                                                      | 24 px        |
+| `pause-icon`        | Playing                                                     | 24 px        |
+| `volume-high-icon`  | Unmuted, volume 0.5 or higher                               | 20 px        |
+| `volume-low-icon`   | Unmuted, volume below 0.5                                   | 20 px        |
+| `volume-muted-icon` | Muted                                                       | 20 px        |
+| `loading-mark`      | Preparing shader transitions, loading assets, and buffering | 78 px        |
+
+```html
+<hyperframes-player src="./my-composition/index.html" controls>
+  <svg
+    slot="play-icon"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M8 5v14l11-7z" />
+  </svg>
+  <svg
+    slot="pause-icon"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M6 5h4v14H6zM14 5h4v14h-4z" />
+  </svg>
+  <img slot="loading-mark" src="./brand-mark.svg" width="78" height="78" alt="" />
+</hyperframes-player>
+```
+
+Glyphs take the control bar's color through `currentColor`, and you set their size. Put `slot` on the `<svg>` or `<img>` itself, as a direct child of the player; a wrapper element needs `display: contents` to keep the glyph centered. A custom mark replaces the HyperFrames light sweep and glow, so add your own CSS animation if you want motion.
+
+Until the element is defined, its children show as plain content. Hide them:
+
+```css
+hyperframes-player:not(:defined) > [slot] {
+  display: none;
+}
+```
+
 ## Sizing
 
 The player fills its container and scales the composition to fit while preserving aspect ratio. Set a size on the element or its parent:
diff --git a/packages/player/src/controls.test.ts b/packages/player/src/controls.test.ts
index d41e29565cc..b1678292b58 100644
--- a/packages/player/src/controls.test.ts
+++ b/packages/player/src/controls.test.ts
@@ -1,5 +1,12 @@
 import { describe, it, expect, vi } from "vitest";
 import { type ControlsCallbacks, createControls } from "./controls";
+import {
+  PAUSE_ICON,
+  PLAY_ICON,
+  VOLUME_HIGH_ICON,
+  VOLUME_LOW_ICON,
+  VOLUME_MUTED_ICON,
+} from "./styles";
 
 function noopCallbacks(): ControlsCallbacks {
   return {
@@ -165,3 +172,114 @@ describe("createControls idle hide", () => {
     vi.useRealTimers();
   });
 });
+
+describe("createControls page glyph slots", () => {
+  function setup(...glyphSlots: string[]) {
+    const host = document.createElement("div");
+    const glyphs = glyphSlots.map((name) => {
+      const glyph = document.createElement("span");
+      glyph.slot = name;
+      host.appendChild(glyph);
+      return glyph;
+    });
+    document.body.appendChild(host);
+    const shadow = host.attachShadow({ mode: "open" });
+    const api = createControls(shadow, noopCallbacks());
+    const cleanup = () => {
+      api.destroy();
+      host.remove();
+    };
+    return { shadow, api, glyphs, cleanup };
+  }
+
+  function slotAt(root: ParentNode, selector: string): HTMLSlotElement {
+    const slot = root.querySelector(selector);
+    if (!(slot instanceof HTMLSlotElement)) throw new Error(`no slot at ${selector}`);
+    return slot;
+  }
+
+  function onlyAssigned(slot: HTMLSlotElement): Element | undefined {
+    const assigned = slot.assignedElements();
+    return assigned.length === 1 ? assigned[0] : undefined;
+  }
+
+  function markup(html: string): string {
+    const parsed = document.createElement("div");
+    parsed.innerHTML = html;
+    return parsed.innerHTML;
+  }
+
+  it("shows today's glyphs in every named control slot when the page supplies none", () => {
+    const { shadow, api, cleanup } = setup();
+    const seen = new Map<string, HTMLSlotElement>();
+    const record = (selector: string) => {
+      const slot = slotAt(shadow, selector);
+      seen.set(slot.name, slot);
+    };
+    record(".hfp-ico-play slot");
+    record(".hfp-ico-pause slot");
+    record(".hfp-mute-btn slot");
+    api.updateVolume(0.2);
+    record(".hfp-mute-btn slot");
+    api.updateMuted(true);
+    record(".hfp-mute-btn slot");
+
+    const expected: Record<string, string> = {
+      "play-icon": PLAY_ICON,
+      "pause-icon": PAUSE_ICON,
+      "volume-high-icon": VOLUME_HIGH_ICON,
+      "volume-low-icon": VOLUME_LOW_ICON,
+      "volume-muted-icon": VOLUME_MUTED_ICON,
+    };
+    expect([...seen.keys()].sort()).toEqual(Object.keys(expected).sort());
+    for (const [name, icon] of Object.entries(expected)) {
+      const slot = seen.get(name);
+      expect(slot?.assignedElements()).toEqual([]);
+      expect(slot?.innerHTML).toBe(markup(icon));
+    }
+    cleanup();
+  });
+
+  it("puts the page's play and pause glyphs in the play button and still marks it playing", () => {
+    const {
+      shadow,
+      api,
+      glyphs: [play, pause],
+      cleanup,
+    } = setup("play-icon", "pause-icon");
+    const playSlot = slotAt(shadow, ".hfp-ico-play slot");
+
+    expect(onlyAssigned(playSlot)).toBe(play);
+    expect(onlyAssigned(slotAt(shadow, ".hfp-ico-pause slot"))).toBe(pause);
+
+    api.updatePlaying(true);
+    expect(playSlot.closest(".hfp-play-btn")?.classList.contains("hfp-playing")).toBe(true);
+    cleanup();
+  });
+
+  it("keeps the default volume glyphs the page left out and shows its own muted glyph", () => {
+    const {
+      shadow,
+      api,
+      glyphs: [muted],
+      cleanup,
+    } = setup("volume-muted-icon");
+    const muteSlot = () => slotAt(shadow, ".hfp-mute-btn slot");
+
+    expect(muteSlot().name).toBe("volume-high-icon");
+    expect(muteSlot().assignedElements()).toEqual([]);
+
+    api.updateVolume(0.2);
+    expect(muteSlot().name).toBe("volume-low-icon");
+    expect(muteSlot().assignedElements()).toEqual([]);
+
+    api.updateVolume(0);
+    expect(muteSlot().name).toBe("volume-low-icon");
+    expect(muteSlot().assignedElements()).toEqual([]);
+
+    api.updateMuted(true);
+    expect(muteSlot().name).toBe("volume-muted-icon");
+    expect(onlyAssigned(muteSlot())).toBe(muted);
+    cleanup();
+  });
+});
diff --git a/packages/player/src/controls.ts b/packages/player/src/controls.ts
index b6485b63b92..b57dd443f70 100644
--- a/packages/player/src/controls.ts
+++ b/packages/player/src/controls.ts
@@ -50,6 +50,13 @@ export function formatTime(seconds: number): string {
   return `${m}:${sec.toString().padStart(2, "0")}`;
 }
 
+function iconSlot(name: string, fallbackSvg: string): HTMLSlotElement {
+  const slot = document.createElement("slot");
+  slot.name = name;
+  slot.innerHTML = fallbackSvg;
+  return slot;
+}
+
 export function createControls(
   parent: ShadowRoot | HTMLElement,
   callbacks: ControlsCallbacks,
@@ -80,7 +87,7 @@ export function createControls(
   // Both glyphs stay in the DOM, stacked; toggling `hfp-playing` crossfade-morphs
   // between them (see styles.ts) instead of swapping innerHTML, which would kill
   // the transition.
-  playBtn.innerHTML = `<span class="hfp-ico hfp-ico-play">${PLAY_ICON}</span><span class="hfp-ico hfp-ico-pause">${PAUSE_ICON}</span>`;
+  playBtn.innerHTML = `<span class="hfp-ico hfp-ico-play"><slot name="play-icon">${PLAY_ICON}</slot></span><span class="hfp-ico hfp-ico-pause"><slot name="pause-icon">${PAUSE_ICON}</slot></span>`;
   playBtn.setAttribute("aria-label", "Play");
 
   const scrubber = document.createElement("div");
@@ -126,8 +133,17 @@ export function createControls(
   const muteBtn = document.createElement("button");
   muteBtn.className = "hfp-mute-btn";
   muteBtn.type = "button";
-  muteBtn.innerHTML = VOLUME_HIGH_ICON;
   muteBtn.setAttribute("aria-label", "Mute");
+  const volumeIcons = {
+    high: iconSlot("volume-high-icon", VOLUME_HIGH_ICON),
+    low: iconSlot("volume-low-icon", VOLUME_LOW_ICON),
+    muted: iconSlot("volume-muted-icon", VOLUME_MUTED_ICON),
+  };
+  const showVolumeIcon = (muted: boolean, volume: number) => {
+    const icon = muted ? volumeIcons.muted : volume < 0.5 ? volumeIcons.low : volumeIcons.high;
+    if (muteBtn.firstChild !== icon) muteBtn.replaceChildren(icon);
+  };
+  showVolumeIcon(false, 1);
 
   const volumeSliderWrap = document.createElement("div");
   volumeSliderWrap.className = "hfp-volume-slider-wrap";
@@ -168,13 +184,6 @@ export function createControls(
   let speedIndex = presets.indexOf(1); // start at 1x
   if (speedIndex === -1) speedIndex = 0;
 
-  const getVolumeIcon = (muted: boolean, volume: number): string => {
-    if (muted) return VOLUME_MUTED_ICON;
-    if (volume === 0) return VOLUME_LOW_ICON;
-    if (volume < 0.5) return VOLUME_LOW_ICON;
-    return VOLUME_HIGH_ICON;
-  };
-
   playBtn.addEventListener("click", (e) => {
     e.stopPropagation();
     if (isPlaying) callbacks.onPause();
@@ -195,7 +204,7 @@ export function createControls(
     volumeFill.style.width = `${fraction * 100}%`;
     volumeSlider.setAttribute("aria-valuenow", String(Math.round(fraction * 100)));
     if (isMuted && fraction > 0) callbacks.onMuteToggle();
-    muteBtn.innerHTML = getVolumeIcon(isMuted, fraction);
+    showVolumeIcon(isMuted, fraction);
     callbacks.onVolumeChange(fraction);
   };
 
@@ -250,7 +259,7 @@ export function createControls(
     volumeFill.style.width = `${newVol * 100}%`;
     volumeSlider.setAttribute("aria-valuenow", String(Math.round(newVol * 100)));
     if (isMuted && newVol > 0) callbacks.onMuteToggle();
-    muteBtn.innerHTML = getVolumeIcon(isMuted, newVol);
+    showVolumeIcon(isMuted, newVol);
     callbacks.onVolumeChange(newVol);
   });
 
@@ -386,14 +395,14 @@ export function createControls(
     },
     updateMuted(muted: boolean) {
       isMuted = muted;
-      muteBtn.innerHTML = getVolumeIcon(muted, currentVolume);
+      showVolumeIcon(muted, currentVolume);
       muteBtn.setAttribute("aria-label", muted ? "Unmute" : "Mute");
     },
     updateVolume(volume: number) {
       currentVolume = volume;
       volumeFill.style.width = `${volume * 100}%`;
       volumeSlider.setAttribute("aria-valuenow", String(Math.round(volume * 100)));
-      muteBtn.innerHTML = getVolumeIcon(isMuted, volume);
+      showVolumeIcon(isMuted, volume);
     },
     setVolumeControlsHidden(hidden: boolean) {
       volumeWrap.style.display = hidden ? "none" : "";
diff --git a/packages/player/src/hyperframes-player.test.ts b/packages/player/src/hyperframes-player.test.ts
index 56f84e3a48b..769c9ea1b51 100644
--- a/packages/player/src/hyperframes-player.test.ts
+++ b/packages/player/src/hyperframes-player.test.ts
@@ -696,6 +696,60 @@ describe("HyperframesPlayer adoptedStyleSheets", () => {
   });
 });
 
+describe("HyperframesPlayer page glyph slots", () => {
+  function slotAt(root: ParentNode | null, selector: string): HTMLSlotElement {
+    const slot = root?.querySelector(selector);
+    if (!(slot instanceof HTMLSlotElement)) throw new Error(`no slot at ${selector}`);
+    return slot;
+  }
+
+  function onlyAssigned(slot: HTMLSlotElement): Element | undefined {
+    const assigned = slot.assignedElements();
+    return assigned.length === 1 ? assigned[0] : undefined;
+  }
+
+  beforeEach(async () => {
+    await import("./hyperframes-player.js");
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("keeps the page's play glyph in the controls after they are rebuilt or the player moves", () => {
+    const player = document.createElement("hyperframes-player");
+    player.setAttribute("controls", "");
+    const glyph = document.createElement("span");
+    glyph.slot = "play-icon";
+    player.appendChild(glyph);
+    document.body.appendChild(player);
+    const expectGlyphShown = () => {
+      expect(glyph.parentElement).toBe(player);
+      expect(onlyAssigned(slotAt(player.shadowRoot, ".hfp-ico-play slot"))).toBe(glyph);
+    };
+
+    expectGlyphShown();
+
+    player.removeAttribute("controls");
+    player.setAttribute("controls", "");
+    expectGlyphShown();
+
+    player.remove();
+    document.body.appendChild(player);
+    expectGlyphShown();
+  });
+
+  it("shows the page's loading mark in the loader card", () => {
+    const player = document.createElement("hyperframes-player");
+    const mark = document.createElement("img");
+    mark.slot = "loading-mark";
+    player.appendChild(mark);
+    document.body.appendChild(player);
+
+    expect(onlyAssigned(slotAt(player.shadowRoot, ".hfp-shader-loader-mark slot"))).toBe(mark);
+  });
+});
+
 // ── Media MutationObserver scoping ──
 //
 // The observer that catches late-attached `<audio data-start>` from
diff --git a/packages/player/src/shader-loader-element.ts b/packages/player/src/shader-loader-element.ts
index fbd2a34a3e9..c61264aef94 100644
--- a/packages/player/src/shader-loader-element.ts
+++ b/packages/player/src/shader-loader-element.ts
@@ -62,7 +62,9 @@ export function createShaderLoader(): ShaderLoaderElements {
   const markFrame = document.createElement("div");
   markFrame.className = "hfp-shader-loader-mark";
   markFrame.draggable = false;
-  markFrame.innerHTML = [
+  const markSlot = document.createElement("slot");
+  markSlot.name = "loading-mark";
+  markSlot.innerHTML = [
     '<svg width="78" height="78" viewBox="0 0 100 100" fill="none" aria-hidden="true" draggable="false">',
     `<path d="${MARK_LEFT}" fill="url(#hfp-shader-loader-grad-left)"/>`,
     `<path d="${MARK_RIGHT}" fill="url(#hfp-shader-loader-grad-right)"/>`,
@@ -83,7 +85,8 @@ export function createShaderLoader(): ShaderLoaderElements {
   sheen.className = "hfp-shader-loader-sheen";
   sheen.style.setProperty("mask-image", MARK_SHAPE_MASK);
   sheen.style.setProperty("-webkit-mask-image", MARK_SHAPE_MASK);
-  markFrame.appendChild(sheen);
+  markSlot.appendChild(sheen);
+  markFrame.appendChild(markSlot);
 
   const titleContainer = document.createElement("div");
   titleContainer.className = "hfp-shader-loader-title";
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..bc8c5c5358f 100644
--- a/scripts/package-size-budgets.json
+++ b/scripts/package-size-budgets.json
@@ -32,8 +32,8 @@
     "unpacked": 885314
   },
   "@hyperframes/player": {
-    "packed": 157145,
-    "unpacked": 541601
+    "packed": 159700,
+    "unpacked": 547900
   },
   "@hyperframes/producer": {
     "packed": 890000,