diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 82e9687..8e10169 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -6,6 +6,11 @@ on:
   pull_request:
     branches: [main]
 
+# Cancel superseded runs on the same ref to save CI minutes.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -13,18 +18,30 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+      # Installs Node and pnpm at the exact versions pinned in mise.toml.
+      - name: Setup toolchain (mise)
+        uses: jdx/mise-action@v2
+        with:
+          cache: true
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> "$GITHUB_ENV"
 
-      - name: Setup Node
-        uses: actions/setup-node@v4
+      - name: Cache pnpm store
+        uses: actions/cache@v4
         with:
-          node-version: 24
-          cache: pnpm
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Format check
+        run: pnpm format:check
+
       - name: Typecheck
         run: pnpm typecheck
 
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 1023f2a..338823a 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -17,13 +17,18 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
-
-      - uses: actions/setup-node@v4
+      # Installs Node and pnpm at the exact versions pinned in mise.toml.
+      - name: Setup toolchain (mise)
+        uses: jdx/mise-action@v2
         with:
-          node-version: 24
-          cache: pnpm
-          registry-url: https://registry.npmjs.org
+          cache: true
+
+      # Configure npm auth for changesets publish.
+      - name: Configure npm registry
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" > ~/.npmrc
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - run: pnpm install --frozen-lockfile
 
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..f33ebba
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,5 @@
+# Generated / vendored — never reformat.
+dist
+node_modules
+pnpm-lock.yaml
+CHANGELOG.md
diff --git a/README.md b/README.md
index bf63aba..0e14320 100644
--- a/README.md
+++ b/README.md
@@ -45,18 +45,18 @@ The quickest knob is the `accentColor` prop, which drives the scrubber fill, act
 
 For deeper control, every visual is driven by CSS custom properties on the `.kino` root. Override them in your own stylesheet, or pass a `theme` object of property/value pairs to set them inline.
 
-| Custom property | Default | Role |
-| --- | --- | --- |
-| `--kino-accent` | `oklch(50.8% 0.118 165.612)` | Accent color (progress, active items, ranges) |
-| `--kino-radius` | `12px` | Corner radius of glass surfaces |
-| `--kino-surface` | `color-mix(in oklab, black 55%, transparent)` | Glass surface fill |
-| `--kino-surface-strong` | `color-mix(in oklab, black 70%, transparent)` | Stronger surface (idle play button) |
-| `--kino-border` | `color-mix(in oklab, white 14%, transparent)` | Hairline borders |
-| `--kino-text` | `oklch(98% 0 0)` | Primary text and icons |
-| `--kino-text-dim` | `color-mix(in oklab, white 65%, transparent)` | Secondary text (timecode) |
-| `--kino-blur` | `18px` | Backdrop blur radius |
-| `--kino-shadow` | `0 8px 40px rgba(0, 0, 0, 0.45)` | Surface drop shadow |
-| `--kino-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | Shared transition easing |
+| Custom property         | Default                                       | Role                                          |
+| ----------------------- | --------------------------------------------- | --------------------------------------------- |
+| `--kino-accent`         | `oklch(50.8% 0.118 165.612)`                  | Accent color (progress, active items, ranges) |
+| `--kino-radius`         | `12px`                                        | Corner radius of glass surfaces               |
+| `--kino-surface`        | `color-mix(in oklab, black 55%, transparent)` | Glass surface fill                            |
+| `--kino-surface-strong` | `color-mix(in oklab, black 70%, transparent)` | Stronger surface (idle play button)           |
+| `--kino-border`         | `color-mix(in oklab, white 14%, transparent)` | Hairline borders                              |
+| `--kino-text`           | `oklch(98% 0 0)`                              | Primary text and icons                        |
+| `--kino-text-dim`       | `color-mix(in oklab, white 65%, transparent)` | Secondary text (timecode)                     |
+| `--kino-blur`           | `18px`                                        | Backdrop blur radius                          |
+| `--kino-shadow`         | `0 8px 40px rgba(0, 0, 0, 0.45)`              | Surface drop shadow                           |
+| `--kino-ease`           | `cubic-bezier(0.22, 1, 0.36, 1)`              | Shared transition easing                      |
 
 ```css
 .kino {
@@ -70,15 +70,15 @@ For deeper control, every visual is driven by CSS custom properties on the `.kin
 
 The player is keyboard-first. Shortcuts are ignored while a text input, textarea, select, or contenteditable element is focused, and modifier-key combinations (Ctrl/Cmd/Alt) are passed through.
 
-| Key | Action |
-| --- | --- |
-| `Space` / `K` | Play / pause |
-| `<` / `>` | Decrease / increase playback rate (0.25 step) |
-| `M` | Toggle mute |
-| `C` | Toggle captions |
-| `S` | Open the speed menu |
-| `F` | Toggle fullscreen |
-| `0`-`9` | Seek to 0%-90% of the duration |
+| Key           | Action                                        |
+| ------------- | --------------------------------------------- |
+| `Space` / `K` | Play / pause                                  |
+| `<` / `>`     | Decrease / increase playback rate (0.25 step) |
+| `M`           | Toggle mute                                   |
+| `C`           | Toggle captions                               |
+| `S`           | Open the speed menu                           |
+| `F`           | Toggle fullscreen                             |
+| `0`-`9`       | Seek to 0%-90% of the duration                |
 
 ## Capability gating
 
diff --git a/demo/file-provider.ts b/demo/file-provider.ts
index 39ab0ed..66dc29e 100644
--- a/demo/file-provider.ts
+++ b/demo/file-provider.ts
@@ -16,7 +16,9 @@ export function createFileProvider(src: string, poster?: string): Provider {
     capabilities: {
       canSetQuality: false,
       hasStoryboard: false,
-      canPiP: typeof document !== "undefined" && "pictureInPictureEnabled" in document,
+      canPiP:
+        typeof document !== "undefined" &&
+        "pictureInPictureEnabled" in document,
       canFullscreen: true,
       canSetRate: true,
       hasTextTracks: false,
diff --git a/docs/superpowers/plans/2026-06-25-kino-video-player.md b/docs/superpowers/plans/2026-06-25-kino-video-player.md
index 560944e..0f39bff 100644
--- a/docs/superpowers/plans/2026-06-25-kino-video-player.md
+++ b/docs/superpowers/plans/2026-06-25-kino-video-player.md
@@ -25,15 +25,15 @@ These types are defined in Task 2 (`src/core/types.ts`) and referenced verbatim
 
 ```ts
 export type QualityLevel = {
-  id: string            // rendition id from the engine
-  height: number        // e.g. 1080
-  bitrate: number       // bits/sec
-  selected: boolean     // currently the pinned manual selection
+  id: string // rendition id from the engine
+  height: number // e.g. 1080
+  bitrate: number // bits/sec
+  selected: boolean // currently the pinned manual selection
 }
 
 export type TextTrackInfo = {
   id: string
-  kind: string          // "subtitles" | "captions" | ...
+  kind: string // "subtitles" | "captions" | ...
   label: string
   lang: string
   mode: "showing" | "hidden" | "disabled"
@@ -43,7 +43,7 @@ export type Capabilities = {
   canSetQuality: boolean
   hasStoryboard: boolean
   canPiP: boolean
-  canFullscreen: boolean   // custom-chrome fullscreen (false on iPhone)
+  canFullscreen: boolean // custom-chrome fullscreen (false on iPhone)
   canSetRate: boolean
   hasTextTracks: boolean
 }
@@ -54,11 +54,11 @@ export type MediaState = {
   paused: boolean
   currentTime: number
   duration: number
-  buffered: Array<[number, number]>   // [start, end] seconds
+  buffered: Array<[number, number]> // [start, end] seconds
   rate: number
-  volume: number                       // 0..1
+  volume: number // 0..1
   muted: boolean
-  readyState: number                   // HTMLMediaElement.readyState
+  readyState: number // HTMLMediaElement.readyState
   seeking: boolean
   ended: boolean
   error: MediaError | null
@@ -138,11 +138,13 @@ kino/                                  (repo root /Users/karn/code/karnstack/kin
 ### Task 1: Repo scaffold, tooling, and theme stylesheet
 
 **Files:**
+
 - Create: `package.json`, `tsconfig.json`, `tsup.config.ts`, `vitest.config.ts`, `eslint.config.js`, `.prettierrc`, `.gitignore`, `LICENSE`, `README.md`
 - Create: `src/index.ts`, `src/mux.ts`, `src/styles/kino.css`
 - Create: `src/util/format-time.ts`, `src/util/format-time.test.ts`
 
 **Interfaces:**
+
 - Produces: a buildable/testable package; `formatTime(seconds: number): string`.
 
 - [ ] **Step 1: Create the repo and pnpm package**
@@ -290,9 +292,16 @@ import "@testing-library/jest-dom/vitest"
   background: black;
   overflow: hidden;
 }
-.kino * { box-sizing: border-box; }
+.kino * {
+  box-sizing: border-box;
+}
 .kino mux-video,
-.kino video { position: absolute; inset: 0; width: 100%; height: 100%; }
+.kino video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
 .kino-glass {
   background: var(--kino-surface);
   backdrop-filter: blur(var(--kino-blur));
@@ -302,7 +311,11 @@ import "@testing-library/jest-dom/vitest"
   box-shadow: var(--kino-shadow);
 }
 @media (prefers-reduced-motion: reduce) {
-  .kino *, .kino *::before, .kino *::after { transition-duration: 0.01ms !important; }
+  .kino *,
+  .kino *::before,
+  .kino *::after {
+    transition-duration: 0.01ms !important;
+  }
 }
 ```
 
@@ -363,10 +376,12 @@ git commit -m "chore: scaffold @karnstack/kino package, tooling, theme css"
 ### Task 2: Core types and the player store
 
 **Files:**
+
 - Create: `src/core/types.ts` (the Shared Type Contract verbatim)
 - Create: `src/core/fake-provider.ts`, `src/core/store.tsx`, `src/core/store.test.tsx`
 
 **Interfaces:**
+
 - Consumes: nothing.
 - Produces:
   - `PlayerContext` (React context holding a `Provider`)
@@ -382,17 +397,35 @@ git commit -m "chore: scaffold @karnstack/kino package, tooling, theme css"
 import type { MediaState, Provider, PlayerActions } from "./types"
 
 const DEFAULT_CAPS = {
-  canSetQuality: true, hasStoryboard: false, canPiP: true,
-  canFullscreen: true, canSetRate: true, hasTextTracks: false,
+  canSetQuality: true,
+  hasStoryboard: false,
+  canPiP: true,
+  canFullscreen: true,
+  canSetRate: true,
+  hasTextTracks: false,
 }
 
 export function defaultState(): MediaState {
   return {
-    paused: true, currentTime: 0, duration: 0, buffered: [],
-    rate: 1, volume: 1, muted: false, readyState: 0, seeking: false,
-    ended: false, error: null, qualities: [], activeQualityId: "auto",
-    textTracks: [], activeTextTrackId: null, fullscreen: false, pip: false,
-    storyboard: null, capabilities: { ...DEFAULT_CAPS },
+    paused: true,
+    currentTime: 0,
+    duration: 0,
+    buffered: [],
+    rate: 1,
+    volume: 1,
+    muted: false,
+    readyState: 0,
+    seeking: false,
+    ended: false,
+    error: null,
+    qualities: [],
+    activeQualityId: "auto",
+    textTracks: [],
+    activeTextTrackId: null,
+    fullscreen: false,
+    pip: false,
+    storyboard: null,
+    capabilities: { ...DEFAULT_CAPS },
   }
 }
 
@@ -421,7 +454,10 @@ export function createFakeProvider(initial?: Partial<MediaState>) {
   const provider: Provider = {
     mount: () => {},
     getState: () => state,
-    subscribe: (l) => { listeners.add(l); return () => listeners.delete(l) },
+    subscribe: (l) => {
+      listeners.add(l)
+      return () => listeners.delete(l)
+    },
     actions,
     destroy: () => listeners.clear(),
   }
@@ -452,7 +488,7 @@ test("useMediaSelector re-renders only when the selected slice changes", () => {
   render(
     <PlayerContext.Provider value={provider}>
       <Counted />
-    </PlayerContext.Provider>
+    </PlayerContext.Provider>,
   )
   const before = renders
   act(() => provider.set({ currentTime: 5 })) // unrelated slice
@@ -469,8 +505,9 @@ test("usePlayer exposes actions that drive state", () => {
   }
   render(
     <PlayerContext.Provider value={provider}>
-      <Btn /><Time />
-    </PlayerContext.Provider>
+      <Btn />
+      <Time />
+    </PlayerContext.Provider>,
   )
   act(() => screen.getByText("seek").click())
   expect(screen.getByTestId("t").textContent).toBe("9")
@@ -495,13 +532,17 @@ function useProvider(): Provider {
 
 export function useMediaSelector<T>(
   selector: (s: MediaState) => T,
-  isEqual: (a: T, b: T) => boolean = Object.is
+  isEqual: (a: T, b: T) => boolean = Object.is,
 ): T {
   const provider = useProvider()
-  const cache = useRef<{ has: boolean; value: T }>({ has: false, value: undefined as never })
+  const cache = useRef<{ has: boolean; value: T }>({
+    has: false,
+    value: undefined as never,
+  })
   const getSnapshot = () => {
     const next = selector(provider.getState())
-    if (cache.current.has && isEqual(cache.current.value, next)) return cache.current.value
+    if (cache.current.has && isEqual(cache.current.value, next))
+      return cache.current.value
     cache.current = { has: true, value: next }
     return next
   }
@@ -536,9 +577,11 @@ git commit -m "feat: core media types, fake provider, selector store"
 ### Task 3: Storyboard VTT parser
 
 **Files:**
+
 - Create: `src/util/storyboard.ts`, `src/util/storyboard.test.ts`
 
 **Interfaces:**
+
 - Produces:
   - `parseStoryboard(vttText: string, baseUrl: string): Storyboard`
   - `type Storyboard = { tiles: Tile[]; thumbnailAt(time: number): Tile | null }`
@@ -563,7 +606,12 @@ test("parses cues into tiles with xywh and time ranges", () => {
   expect(sb.tiles).toHaveLength(2)
   expect(sb.tiles[0]).toMatchObject({
     url: "https://image.mux.com/ID/storyboard.jpg",
-    x: 0, y: 0, w: 320, h: 180, start: 0, end: 5,
+    x: 0,
+    y: 0,
+    w: 320,
+    h: 180,
+    start: 0,
+    end: 5,
   })
   expect(sb.tiles[1].x).toBe(320)
 })
@@ -591,9 +639,18 @@ test("returns empty storyboard for blank input", () => {
 
 ```ts
 export type Tile = {
-  url: string; x: number; y: number; w: number; h: number; start: number; end: number
+  url: string
+  x: number
+  y: number
+  w: number
+  h: number
+  start: number
+  end: number
+}
+export type Storyboard = {
+  tiles: Tile[]
+  thumbnailAt(time: number): Tile | null
 }
-export type Storyboard = { tiles: Tile[]; thumbnailAt(time: number): Tile | null }
 
 function toSeconds(stamp: string): number {
   // hh:mm:ss.mmm or mm:ss.mmm
@@ -618,7 +675,12 @@ export function parseStoryboard(vttText: string, baseUrl: string): Storyboard {
     const [, file, x, y, w, h] = m
     tiles.push({
       url: new URL(file, baseUrl).href,
-      x: +x, y: +y, w: +w, h: +h, start, end,
+      x: +x,
+      y: +y,
+      w: +w,
+      h: +h,
+      start,
+      end,
     })
   }
   return {
@@ -646,9 +708,11 @@ git commit -m "feat: storyboard vtt parser with tile lookup"
 ### Task 4: Keyboard map
 
 **Files:**
+
 - Create: `src/util/keymap.ts`, `src/util/keymap.test.ts`
 
 **Interfaces:**
+
 - Produces: `resolveKey(e: KeyboardEvent): KeyAction | null` and `type KeyAction` (a discriminated union below). Plus `isTypingTarget(el: EventTarget | null): boolean`.
 
 - [ ] **Step 1: Write the failing test** `src/util/keymap.test.ts`
@@ -662,9 +726,18 @@ test("space toggles play", () => {
   expect(resolveKey(ev({ key: " " }))).toEqual({ type: "toggle-play" })
 })
 test("arrows seek and adjust volume", () => {
-  expect(resolveKey(ev({ key: "ArrowRight" }))).toEqual({ type: "seek-by", delta: 5 })
-  expect(resolveKey(ev({ key: "ArrowLeft" }))).toEqual({ type: "seek-by", delta: -5 })
-  expect(resolveKey(ev({ key: "ArrowUp" }))).toEqual({ type: "volume-by", delta: 0.1 })
+  expect(resolveKey(ev({ key: "ArrowRight" }))).toEqual({
+    type: "seek-by",
+    delta: 5,
+  })
+  expect(resolveKey(ev({ key: "ArrowLeft" }))).toEqual({
+    type: "seek-by",
+    delta: -5,
+  })
+  expect(resolveKey(ev({ key: "ArrowUp" }))).toEqual({
+    type: "volume-by",
+    delta: 0.1,
+  })
 })
 test("letters map to feature toggles", () => {
   expect(resolveKey(ev({ key: "f" }))).toEqual({ type: "toggle-fullscreen" })
@@ -673,7 +746,10 @@ test("letters map to feature toggles", () => {
   expect(resolveKey(ev({ key: "s" }))).toEqual({ type: "open-speed" })
 })
 test("digits seek to percent", () => {
-  expect(resolveKey(ev({ key: "5" }))).toEqual({ type: "seek-percent", percent: 50 })
+  expect(resolveKey(ev({ key: "5" }))).toEqual({
+    type: "seek-percent",
+    percent: 50,
+  })
 })
 test("modifier keys are ignored", () => {
   expect(resolveKey(ev({ key: " ", metaKey: true }))).toBeNull()
@@ -704,26 +780,43 @@ export type KeyAction =
 export function isTypingTarget(el: EventTarget | null): boolean {
   if (!(el instanceof HTMLElement)) return false
   const tag = el.tagName
-  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable
+  return (
+    tag === "INPUT" ||
+    tag === "TEXTAREA" ||
+    tag === "SELECT" ||
+    el.isContentEditable
+  )
 }
 
 export function resolveKey(e: KeyboardEvent): KeyAction | null {
   if (e.ctrlKey || e.metaKey || e.altKey) return null
   switch (e.key) {
     case " ":
-    case "k": return { type: "toggle-play" }
-    case "ArrowRight": return { type: "seek-by", delta: 5 }
-    case "ArrowLeft": return { type: "seek-by", delta: -5 }
-    case "ArrowUp": return { type: "volume-by", delta: 0.1 }
-    case "ArrowDown": return { type: "volume-by", delta: -0.1 }
-    case "f": return { type: "toggle-fullscreen" }
-    case "m": return { type: "toggle-mute" }
-    case "c": return { type: "toggle-captions" }
-    case "s": return { type: "open-speed" }
-    case "<": return { type: "rate-by", delta: -0.25 }
-    case ">": return { type: "rate-by", delta: 0.25 }
+    case "k":
+      return { type: "toggle-play" }
+    case "ArrowRight":
+      return { type: "seek-by", delta: 5 }
+    case "ArrowLeft":
+      return { type: "seek-by", delta: -5 }
+    case "ArrowUp":
+      return { type: "volume-by", delta: 0.1 }
+    case "ArrowDown":
+      return { type: "volume-by", delta: -0.1 }
+    case "f":
+      return { type: "toggle-fullscreen" }
+    case "m":
+      return { type: "toggle-mute" }
+    case "c":
+      return { type: "toggle-captions" }
+    case "s":
+      return { type: "open-speed" }
+    case "<":
+      return { type: "rate-by", delta: -0.25 }
+    case ">":
+      return { type: "rate-by", delta: 0.25 }
   }
-  if (/^[0-9]$/.test(e.key)) return { type: "seek-percent", percent: Number(e.key) * 10 }
+  if (/^[0-9]$/.test(e.key))
+    return { type: "seek-percent", percent: Number(e.key) * 10 }
   return null
 }
 ```
@@ -742,6 +835,7 @@ git commit -m "feat: keyboard action map"
 ### Task 5: Mux provider over raw `<mux-video>`
 
 **Files:**
+
 - Create: `src/mux/mux-video-element.ts` (registers the custom element)
 - Create: `src/mux/urls.ts`, `src/mux/urls.test.ts` (pure helpers, jsdom-unit-tested WITHOUT importing the element)
 - Create: `src/mux/provider.ts` (imports the element + helpers; its element behavior is verified in the demo at Task 11, NOT in a jsdom unit test, so no test imports `provider.ts`)
@@ -749,6 +843,7 @@ git commit -m "feat: keyboard action map"
 **CRITICAL:** Importing `@mux/mux-video` pulls browser-only playback code that is unreliable under jsdom. Therefore NO vitest test file may import `provider.ts` (which top-imports the element). Pure logic is extracted to `urls.ts` and tested there. The provider's element wiring is exercised only by the Vite demo (Task 11).
 
 **Interfaces:**
+
 - Consumes: types from Task 2; `parseStoryboard` (Task 3, used later by scrubber, not here).
 - Produces:
   - `createMuxProvider(opts: MuxProviderOptions): Provider` (in `provider.ts`)
@@ -770,16 +865,18 @@ import { buildImageUrl, detectIOS } from "./urls"
 
 test("buildImageUrl composes signed storyboard url", () => {
   expect(buildImageUrl("ID", "storyboard", "JWT")).toBe(
-    "https://image.mux.com/ID/storyboard.vtt?token=JWT"
+    "https://image.mux.com/ID/storyboard.vtt?token=JWT",
   )
 })
 test("buildImageUrl omits token when unsigned", () => {
   expect(buildImageUrl("ID", "thumbnail")).toBe(
-    "https://image.mux.com/ID/thumbnail.webp"
+    "https://image.mux.com/ID/thumbnail.webp",
   )
 })
 test("detectIOS true for iPhone UA, false for desktop", () => {
-  expect(detectIOS("Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)")).toBe(true)
+  expect(
+    detectIOS("Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)"),
+  ).toBe(true)
   expect(detectIOS("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15)")).toBe(false)
 })
 ```
@@ -795,7 +892,7 @@ export function buildImageUrl(
   playbackId: string,
   kind: "storyboard" | "thumbnail",
   token?: string,
-  ext = kind === "storyboard" ? "vtt" : "webp"
+  ext = kind === "storyboard" ? "vtt" : "webp",
 ): string {
   const base = `${IMAGE_HOST}/${playbackId}/${kind}.${ext}`
   return token ? `${base}?token=${token}` : base
@@ -814,7 +911,13 @@ Run: `pnpm test src/mux/urls.test.ts` — Expected: PASS.
 import "./mux-video-element"
 import { defaultState } from "../core/fake-provider"
 import { buildImageUrl, detectIOS } from "./urls"
-import type { MediaState, Provider, PlayerActions, QualityLevel, TextTrackInfo } from "../core/types"
+import type {
+  MediaState,
+  Provider,
+  PlayerActions,
+  QualityLevel,
+  TextTrackInfo,
+} from "../core/types"
 
 export type MuxProviderOptions = {
   playbackId: string
@@ -834,7 +937,12 @@ type MuxVideoEl = HTMLVideoElement & {
   videoRenditions?: {
     length: number
     selectedIndex: number
-    [i: number]: { id: string; height: number; bitrate: number; selected: boolean }
+    [i: number]: {
+      id: string
+      height: number
+      bitrate: number
+      selected: boolean
+    }
     addEventListener(t: string, cb: () => void): void
     removeEventListener(t: string, cb: () => void): void
   }
@@ -846,11 +954,19 @@ export function createMuxProvider(opts: MuxProviderOptions): Provider {
   let state: MediaState = {
     ...defaultState(),
     rate: opts.defaultRate ?? 1,
-    storyboard: { vttUrl: buildImageUrl(opts.playbackId, "storyboard", opts.tokens?.storyboard) },
+    storyboard: {
+      vttUrl: buildImageUrl(
+        opts.playbackId,
+        "storyboard",
+        opts.tokens?.storyboard,
+      ),
+    },
     capabilities: {
       canSetQuality: !ios,
       hasStoryboard: true,
-      canPiP: typeof document !== "undefined" && "pictureInPictureEnabled" in document,
+      canPiP:
+        typeof document !== "undefined" &&
+        "pictureInPictureEnabled" in document,
       canFullscreen: !ios,
       canSetRate: true,
       hasTextTracks: true,
@@ -858,7 +974,10 @@ export function createMuxProvider(opts: MuxProviderOptions): Provider {
   }
   const listeners = new Set<() => void>()
   const emit = () => listeners.forEach((l) => l())
-  const patch = (p: Partial<MediaState>) => { state = { ...state, ...p }; emit() }
+  const patch = (p: Partial<MediaState>) => {
+    state = { ...state, ...p }
+    emit()
+  }
 
   const readQualities = (): QualityLevel[] => {
     const r = el?.videoRenditions
@@ -866,7 +985,12 @@ export function createMuxProvider(opts: MuxProviderOptions): Provider {
     const out: QualityLevel[] = []
     for (let i = 0; i < r.length; i++) {
       const item = r[i]
-      out.push({ id: item.id, height: item.height, bitrate: item.bitrate, selected: item.selected })
+      out.push({
+        id: item.id,
+        height: item.height,
+        bitrate: item.bitrate,
+        selected: item.selected,
+      })
     }
     return out
   }
@@ -877,36 +1001,84 @@ export function createMuxProvider(opts: MuxProviderOptions): Provider {
     for (let i = 0; i < tt.length; i++) {
       const t = tt[i]
       if (t.kind !== "subtitles" && t.kind !== "captions") continue
-      out.push({ id: t.id || String(i), kind: t.kind, label: t.label, lang: t.language, mode: t.mode })
+      out.push({
+        id: t.id || String(i),
+        kind: t.kind,
+        label: t.label,
+        lang: t.language,
+        mode: t.mode,
+      })
     }
     return out
   }
   const syncFromEl = () => {
     if (!el) return
     const ranges: Array<[number, number]> = []
-    for (let i = 0; i < el.buffered.length; i++) ranges.push([el.buffered.start(i), el.buffered.end(i)])
+    for (let i = 0; i < el.buffered.length; i++)
+      ranges.push([el.buffered.start(i), el.buffered.end(i)])
     patch({
-      paused: el.paused, currentTime: el.currentTime, duration: el.duration || 0,
-      buffered: ranges, rate: el.playbackRate, volume: el.volume, muted: el.muted,
-      readyState: el.readyState, seeking: el.seeking, ended: el.ended,
-      qualities: readQualities(), textTracks: readTextTracks(),
+      paused: el.paused,
+      currentTime: el.currentTime,
+      duration: el.duration || 0,
+      buffered: ranges,
+      rate: el.playbackRate,
+      volume: el.volume,
+      muted: el.muted,
+      readyState: el.readyState,
+      seeking: el.seeking,
+      ended: el.ended,
+      qualities: readQualities(),
+      textTracks: readTextTracks(),
     })
   }
 
-  const MEDIA_EVENTS = ["play","pause","timeupdate","durationchange","progress","volumechange","ratechange","seeking","seeked","ended","loadedmetadata","canplay","waiting","error"]
+  const MEDIA_EVENTS = [
+    "play",
+    "pause",
+    "timeupdate",
+    "durationchange",
+    "progress",
+    "volumechange",
+    "ratechange",
+    "seeking",
+    "seeked",
+    "ended",
+    "loadedmetadata",
+    "canplay",
+    "waiting",
+    "error",
+  ]
 
   const actions: PlayerActions = {
-    play: () => { void el?.play?.() },
+    play: () => {
+      void el?.play?.()
+    },
     pause: () => el?.pause(),
-    seek: (t) => { if (el) el.currentTime = t },
-    setRate: (r) => { if (el) el.playbackRate = r },
-    setVolume: (v) => { if (el) el.volume = Math.min(1, Math.max(0, v)) },
-    setMuted: (m) => { if (el) el.muted = m },
+    seek: (t) => {
+      if (el) el.currentTime = t
+    },
+    setRate: (r) => {
+      if (el) el.playbackRate = r
+    },
+    setVolume: (v) => {
+      if (el) el.volume = Math.min(1, Math.max(0, v))
+    },
+    setMuted: (m) => {
+      if (el) el.muted = m
+    },
     setQuality: (id) => {
       const r = el?.videoRenditions
       if (!r) return
-      if (id === "auto") { r.selectedIndex = -1; patch({ activeQualityId: "auto" }); return }
-      for (let i = 0; i < r.length; i++) if (r[i].id === id) { r[i].selected = true; r.selectedIndex = i }
+      if (id === "auto") {
+        r.selectedIndex = -1
+        patch({ activeQualityId: "auto" })
+        return
+      }
+      for (let i = 0; i < r.length; i++)
+        if (r[i].id === id) {
+          r[i].selected = true
+          r.selectedIndex = i
+        }
       patch({ activeQualityId: id })
     },
     setTextTrack: (id) => {
@@ -919,10 +1091,18 @@ export function createMuxProvider(opts: MuxProviderOptions): Provider {
       }
       patch({ activeTextTrackId: id })
     },
-    enterFullscreen: (wrapper) => { void wrapper.requestFullscreen?.() },
-    exitFullscreen: () => { void document.exitFullscreen?.() },
-    enterPiP: () => { void el?.requestPictureInPicture?.() },
-    exitPiP: () => { void document.exitPictureInPicture?.() },
+    enterFullscreen: (wrapper) => {
+      void wrapper.requestFullscreen?.()
+    },
+    exitFullscreen: () => {
+      void document.exitFullscreen?.()
+    },
+    enterPiP: () => {
+      void el?.requestPictureInPicture?.()
+    },
+    exitPiP: () => {
+      void document.exitPictureInPicture?.()
+    },
   }
 
   return {
@@ -946,18 +1126,25 @@ export function createMuxProvider(opts: MuxProviderOptions): Provider {
       for (const ev of MEDIA_EVENTS) el.addEventListener(ev, syncFromEl)
       el.videoRenditions?.addEventListener("change", syncFromEl)
       document.addEventListener("fullscreenchange", () =>
-        patch({ fullscreen: document.fullscreenElement != null })
+        patch({ fullscreen: document.fullscreenElement != null }),
       )
       el.addEventListener("enterpictureinpicture", () => patch({ pip: true }))
       el.addEventListener("leavepictureinpicture", () => patch({ pip: false }))
       container.appendChild(el)
     },
     getState: () => state,
-    subscribe: (l) => { listeners.add(l); return () => listeners.delete(l) },
+    subscribe: (l) => {
+      listeners.add(l)
+      return () => listeners.delete(l)
+    },
     actions,
     destroy() {
-      if (el) { for (const ev of MEDIA_EVENTS) el.removeEventListener(ev, syncFromEl); el.remove() }
-      el = null; listeners.clear()
+      if (el) {
+        for (const ev of MEDIA_EVENTS) el.removeEventListener(ev, syncFromEl)
+        el.remove()
+      }
+      el = null
+      listeners.clear()
     },
   }
 }
@@ -979,10 +1166,12 @@ git commit -m "feat: mux provider over raw mux-video element"
 ### Task 6: Player root (layout, theme, auto-hide, keyboard)
 
 **Files:**
+
 - Create: `src/ui/icons.tsx` (inline SVGs: Play, Pause, Volume, VolumeMuted, Cc, Settings, Pip, Fullscreen, FullscreenExit, Gauge)
 - Create: `src/ui/player.tsx`, `src/ui/player.test.tsx`
 
 **Interfaces:**
+
 - Consumes: `PlayerContext`, `useMediaSelector`, `usePlayer` (Task 2); `resolveKey`, `isTypingTarget` (Task 4).
 - Produces:
   - `<Player>` component: `{ provider: Provider; accentColor?: string; theme?: Record<string,string>; className?: string; children?: ReactNode }`
@@ -1003,8 +1192,10 @@ test("renders children overlay and applies accent var", () => {
   const provider = createFakeProvider()
   const { container } = render(
     <Player provider={provider} accentColor="rgb(1,2,3)">
-      <Player.Overlay><span>hi</span></Player.Overlay>
-    </Player>
+      <Player.Overlay>
+        <span>hi</span>
+      </Player.Overlay>
+    </Player>,
   )
   expect(screen.getByText("hi")).toBeInTheDocument()
   const root = container.querySelector(".kino") as HTMLElement
@@ -1015,7 +1206,9 @@ test("space toggles playback via keyboard", () => {
   const provider = createFakeProvider({ paused: true })
   const { container } = render(<Player provider={provider} />)
   const root = container.querySelector(".kino") as HTMLElement
-  act(() => { fireEvent.keyDown(root, { key: " " }) })
+  act(() => {
+    fireEvent.keyDown(root, { key: " " })
+  })
   expect(provider.getState().paused).toBe(false)
 })
 ```
@@ -1031,7 +1224,8 @@ import { PlayerContext, usePlayer } from "../core/store"
 import { resolveKey, isTypingTarget } from "../util/keymap"
 import type { Provider } from "../core/types"
 
-const WrapperContext = createContext<React.RefObject<HTMLDivElement | null> | null>(null)
+const WrapperContext =
+  createContext<React.RefObject<HTMLDivElement | null> | null>(null)
 export const useWrapperRef = () => useContext(WrapperContext)
 
 type PlayerProps = {
@@ -1042,7 +1236,13 @@ type PlayerProps = {
   children?: ReactNode
 }
 
-export function Player({ provider, accentColor, theme, className, children }: PlayerProps) {
+export function Player({
+  provider,
+  accentColor,
+  theme,
+  className,
+  children,
+}: PlayerProps) {
   const wrapperRef = useRef<HTMLDivElement | null>(null)
   const videoHostRef = useRef<HTMLDivElement | null>(null)
 
@@ -1054,7 +1254,8 @@ export function Player({ provider, accentColor, theme, className, children }: Pl
   }, [provider])
 
   const style: React.CSSProperties = { ...(theme as React.CSSProperties) }
-  if (accentColor) (style as Record<string, string>)["--kino-accent"] = accentColor
+  if (accentColor)
+    (style as Record<string, string>)["--kino-accent"] = accentColor
 
   return (
     <PlayerContext.Provider value={provider}>
@@ -1099,7 +1300,11 @@ export function useControlsVisible(): boolean {
     root.addEventListener("pointermove", show)
     root.addEventListener("focusin", show)
     show()
-    return () => { clearTimeout(timer); root.removeEventListener("pointermove", show); root.removeEventListener("focusin", show) }
+    return () => {
+      clearTimeout(timer)
+      root.removeEventListener("pointermove", show)
+      root.removeEventListener("focusin", show)
+    }
   }, [wrapperRef, state.paused])
   return visible || state.paused
 }
@@ -1158,9 +1363,11 @@ git commit -m "feat: player root with theme, overlay slot, keyboard"
 ### Task 7: Scrubber with buffered shading, drag-seek, and hover thumbnail
 
 **Files:**
+
 - Create: `src/ui/scrubber.tsx`, `src/ui/scrubber.test.tsx`
 
 **Interfaces:**
+
 - Consumes: `useMediaSelector`, `usePlayer` (Task 2), `parseStoryboard` (Task 3), `formatTime` (Task 1).
 - Produces: `<Scrubber />` (no props; reads everything from context).
 
@@ -1174,18 +1381,40 @@ import { Scrubber } from "./scrubber"
 
 test("renders progress fill proportional to currentTime/duration", () => {
   const provider = createFakeProvider({ duration: 100, currentTime: 25 })
-  render(<PlayerContext.Provider value={provider}><Scrubber /></PlayerContext.Provider>)
+  render(
+    <PlayerContext.Provider value={provider}>
+      <Scrubber />
+    </PlayerContext.Provider>,
+  )
   const fill = screen.getByTestId("kino-progress")
   expect(fill.style.width).toBe("25%")
 })
 
 test("clicking the track seeks", () => {
   const provider = createFakeProvider({ duration: 100, currentTime: 0 })
-  render(<PlayerContext.Provider value={provider}><Scrubber /></PlayerContext.Provider>)
+  render(
+    <PlayerContext.Provider value={provider}>
+      <Scrubber />
+    </PlayerContext.Provider>,
+  )
   const track = screen.getByTestId("kino-track")
   // jsdom has no layout; stub getBoundingClientRect
-  track.getBoundingClientRect = () => ({ left: 0, width: 200, top: 0, height: 4, right: 200, bottom: 4, x: 0, y: 0, toJSON: () => ({}) })
-  act(() => { track.dispatchEvent(new MouseEvent("pointerdown", { clientX: 100, bubbles: true })) })
+  track.getBoundingClientRect = () => ({
+    left: 0,
+    width: 200,
+    top: 0,
+    height: 4,
+    right: 200,
+    bottom: 4,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  })
+  act(() => {
+    track.dispatchEvent(
+      new MouseEvent("pointerdown", { clientX: 100, bubbles: true }),
+    )
+  })
   expect(provider.getState().currentTime).toBe(50)
 })
 ```
@@ -1215,10 +1444,15 @@ export function Scrubber() {
   useEffect(() => {
     if (!hasStoryboard || !storyboardUrl) return
     let alive = true
-    fetch(storyboardUrl).then((r) => r.text()).then((txt) => {
-      if (alive) setSb(parseStoryboard(txt, storyboardUrl))
-    }).catch(() => {})
-    return () => { alive = false }
+    fetch(storyboardUrl)
+      .then((r) => r.text())
+      .then((txt) => {
+        if (alive) setSb(parseStoryboard(txt, storyboardUrl))
+      })
+      .catch(() => {})
+    return () => {
+      alive = false
+    }
   }, [hasStoryboard, storyboardUrl])
 
   const pct = duration > 0 ? (currentTime / duration) * 100 : 0
@@ -1231,7 +1465,10 @@ export function Scrubber() {
     const t = timeFromClientX(e.clientX)
     actions.seek(t)
     const move = (ev: PointerEvent) => actions.seek(timeFromClientX(ev.clientX))
-    const up = () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up) }
+    const up = () => {
+      window.removeEventListener("pointermove", move)
+      window.removeEventListener("pointerup", up)
+    }
     window.addEventListener("pointermove", move)
     window.addEventListener("pointerup", up)
   }
@@ -1242,27 +1479,48 @@ export function Scrubber() {
   const tile = sb && hover ? sb.thumbnailAt(hover.time) : null
 
   return (
-    <div className="kino-scrubber" onPointerMove={onPointerMove} onPointerLeave={() => setHover(null)}>
+    <div
+      className="kino-scrubber"
+      onPointerMove={onPointerMove}
+      onPointerLeave={() => setHover(null)}
+    >
       {hover && (
         <div className="kino-preview" style={{ left: hover.x }}>
           {tile && (
-            <div className="kino-preview-img" style={{
-              width: tile.w, height: tile.h,
-              backgroundImage: `url(${tile.url})`,
-              backgroundPosition: `-${tile.x}px -${tile.y}px`,
-            }} />
+            <div
+              className="kino-preview-img"
+              style={{
+                width: tile.w,
+                height: tile.h,
+                backgroundImage: `url(${tile.url})`,
+                backgroundPosition: `-${tile.x}px -${tile.y}px`,
+              }}
+            />
           )}
           <span className="kino-preview-time">{formatTime(hover.time)}</span>
         </div>
       )}
-      <div ref={trackRef} data-testid="kino-track" className="kino-track" onPointerDown={onPointerDown}>
+      <div
+        ref={trackRef}
+        data-testid="kino-track"
+        className="kino-track"
+        onPointerDown={onPointerDown}
+      >
         {buffered.map(([s, e], i) => (
-          <div key={i} className="kino-buffered" style={{
-            left: `${duration ? (s / duration) * 100 : 0}%`,
-            width: `${duration ? ((e - s) / duration) * 100 : 0}%`,
-          }} />
+          <div
+            key={i}
+            className="kino-buffered"
+            style={{
+              left: `${duration ? (s / duration) * 100 : 0}%`,
+              width: `${duration ? ((e - s) / duration) * 100 : 0}%`,
+            }}
+          />
         ))}
-        <div data-testid="kino-progress" className="kino-progress" style={{ width: `${pct}%` }} />
+        <div
+          data-testid="kino-progress"
+          className="kino-progress"
+          style={{ width: `${pct}%` }}
+        />
         <div className="kino-thumb" style={{ left: `${pct}%` }} />
       </div>
     </div>
@@ -1286,9 +1544,11 @@ git commit -m "feat: scrubber with buffered shading, drag-seek, storyboard previ
 ### Task 8: Idle overlay (hover-zoom play + speed pre-select)
 
 **Files:**
+
 - Create: `src/ui/idle-overlay.tsx`, `src/ui/idle-overlay.test.tsx`
 
 **Interfaces:**
+
 - Consumes: `useMediaSelector`, `usePlayer`.
 - Produces: `<IdleOverlay />` — shown only while `currentTime === 0 && paused && !ended`.
 
@@ -1302,7 +1562,11 @@ import { IdleOverlay } from "./idle-overlay"
 
 test("shows speed options and starts playback at chosen rate", () => {
   const provider = createFakeProvider({ paused: true, currentTime: 0 })
-  render(<PlayerContext.Provider value={provider}><IdleOverlay /></PlayerContext.Provider>)
+  render(
+    <PlayerContext.Provider value={provider}>
+      <IdleOverlay />
+    </PlayerContext.Provider>,
+  )
   act(() => screen.getByRole("button", { name: "1.5x" }).click())
   expect(provider.getState().rate).toBe(1.5)
   expect(provider.getState().paused).toBe(false)
@@ -1310,7 +1574,11 @@ test("shows speed options and starts playback at chosen rate", () => {
 
 test("hidden once playback has progressed", () => {
   const provider = createFakeProvider({ paused: false, currentTime: 12 })
-  render(<PlayerContext.Provider value={provider}><IdleOverlay /></PlayerContext.Provider>)
+  render(
+    <PlayerContext.Provider value={provider}>
+      <IdleOverlay />
+    </PlayerContext.Provider>,
+  )
   expect(screen.queryByLabelText("Play")).toBeNull()
 })
 ```
@@ -1324,8 +1592,12 @@ import { useMediaSelector, usePlayer } from "../core/store"
 import { PlayIcon } from "./icons"
 
 const SPEEDS: Array<{ label: string; rate: number }> = [
-  { label: "0.8x", rate: 0.8 }, { label: "1x", rate: 1 }, { label: "1.2x", rate: 1.2 },
-  { label: "1.5x", rate: 1.5 }, { label: "1.7x", rate: 1.7 }, { label: "2x", rate: 2 },
+  { label: "0.8x", rate: 0.8 },
+  { label: "1x", rate: 1 },
+  { label: "1.2x", rate: 1.2 },
+  { label: "1.5x", rate: 1.5 },
+  { label: "1.7x", rate: 1.7 },
+  { label: "2x", rate: 2 },
   { label: "Max", rate: 2.5 },
 ]
 
@@ -1336,16 +1608,27 @@ export function IdleOverlay() {
   const ended = useMediaSelector((s) => s.ended)
   if (!paused || currentTime > 0 || ended) return null
 
-  const startAt = (rate: number) => { actions.setRate(rate); actions.play() }
+  const startAt = (rate: number) => {
+    actions.setRate(rate)
+    actions.play()
+  }
 
   return (
     <div className="kino-idle">
-      <button className="kino-idle-play" aria-label="Play" onClick={() => actions.play()}>
+      <button
+        className="kino-idle-play"
+        aria-label="Play"
+        onClick={() => actions.play()}
+      >
         <PlayIcon />
       </button>
       <div className="kino-idle-speeds kino-glass">
         {SPEEDS.map((s) => (
-          <button key={s.label} className="kino-speed-chip" onClick={() => startAt(s.rate)}>
+          <button
+            key={s.label}
+            className="kino-speed-chip"
+            onClick={() => startAt(s.rate)}
+          >
             {s.label}
           </button>
         ))}
@@ -1371,9 +1654,11 @@ git commit -m "feat: idle overlay with hover-zoom play and speed pre-select"
 ### Task 9: Popover primitive and Speed/Quality/Captions menus
 
 **Files:**
+
 - Create: `src/ui/popover.tsx`, `src/ui/menus.tsx`, `src/ui/menus.test.tsx`
 
 **Interfaces:**
+
 - Consumes: `useMediaSelector`, `usePlayer`.
 - Produces:
   - `<Popover trigger={ReactNode} shortcut?: string>{children}</Popover>` — snappy glass popover; `shortcut` renders a keyboard badge in the trigger tooltip.
@@ -1389,7 +1674,11 @@ import { SpeedMenu, QualityMenu } from "./menus"
 
 test("speed menu sets rate", () => {
   const provider = createFakeProvider({ rate: 1 })
-  render(<PlayerContext.Provider value={provider}><SpeedMenu /></PlayerContext.Provider>)
+  render(
+    <PlayerContext.Provider value={provider}>
+      <SpeedMenu />
+    </PlayerContext.Provider>,
+  )
   act(() => screen.getByRole("button", { name: /1x speed/i }).click()) // open
   act(() => screen.getByRole("menuitemradio", { name: "1.5x" }).click())
   expect(provider.getState().rate).toBe(1.5)
@@ -1397,8 +1686,14 @@ test("speed menu sets rate", () => {
 
 test("quality menu hidden when capability is off", () => {
   const provider = createFakeProvider()
-  provider.set({ capabilities: { ...provider.getState().capabilities, canSetQuality: false } })
-  const { container } = render(<PlayerContext.Provider value={provider}><QualityMenu /></PlayerContext.Provider>)
+  provider.set({
+    capabilities: { ...provider.getState().capabilities, canSetQuality: false },
+  })
+  const { container } = render(
+    <PlayerContext.Provider value={provider}>
+      <QualityMenu />
+    </PlayerContext.Provider>,
+  )
   expect(container.firstChild).toBeNull()
 })
 ```
@@ -1410,19 +1705,39 @@ test("quality menu hidden when capability is off", () => {
 ```tsx
 import { useState, type ReactNode } from "react"
 
-export function Popover({ trigger, shortcut, label, children }: {
-  trigger: ReactNode; shortcut?: string; label: string; children: ReactNode
+export function Popover({
+  trigger,
+  shortcut,
+  label,
+  children,
+}: {
+  trigger: ReactNode
+  shortcut?: string
+  label: string
+  children: ReactNode
 }) {
   const [open, setOpen] = useState(false)
   return (
     <div className="kino-popover-root" onPointerLeave={() => setOpen(false)}>
-      <button className="kino-ctrl" aria-label={label} aria-expanded={open} onClick={() => setOpen((o) => !o)}>
+      <button
+        className="kino-ctrl"
+        aria-label={label}
+        aria-expanded={open}
+        onClick={() => setOpen((o) => !o)}
+      >
         {trigger}
       </button>
       {!open && shortcut && (
-        <span className="kino-tip kino-glass">{label}<kbd>{shortcut}</kbd></span>
+        <span className="kino-tip kino-glass">
+          {label}
+          <kbd>{shortcut}</kbd>
+        </span>
+      )}
+      {open && (
+        <div className="kino-menu kino-glass" role="menu">
+          {children}
+        </div>
       )}
-      {open && <div className="kino-menu kino-glass" role="menu">{children}</div>}
     </div>
   )
 }
@@ -1444,10 +1759,24 @@ export function SpeedMenu() {
   if (!canSetRate) return null
   const label = rate === 2.5 ? "Max" : `${rate}x`
   return (
-    <Popover label={`${label} speed`} shortcut="S" trigger={<><GaugeIcon /><span className="kino-ctrl-label">{label}</span></>}>
+    <Popover
+      label={`${label} speed`}
+      shortcut="S"
+      trigger={
+        <>
+          <GaugeIcon />
+          <span className="kino-ctrl-label">{label}</span>
+        </>
+      }
+    >
       {RATES.map((r) => (
-        <button key={r} role="menuitemradio" aria-checked={r === rate} className="kino-menu-item"
-          onClick={() => actions.setRate(r)}>
+        <button
+          key={r}
+          role="menuitemradio"
+          aria-checked={r === rate}
+          className="kino-menu-item"
+          onClick={() => actions.setRate(r)}
+        >
           {r === 2.5 ? "Max" : `${r}x`}
         </button>
       ))}
@@ -1463,11 +1792,24 @@ export function QualityMenu() {
   if (!canSetQuality || qualities.length === 0) return null
   return (
     <Popover label="Quality" trigger={<SettingsIcon />}>
-      <button role="menuitemradio" aria-checked={active === "auto"} className="kino-menu-item"
-        onClick={() => actions.setQuality("auto")}>Auto</button>
+      <button
+        role="menuitemradio"
+        aria-checked={active === "auto"}
+        className="kino-menu-item"
+        onClick={() => actions.setQuality("auto")}
+      >
+        Auto
+      </button>
       {qualities.map((q) => (
-        <button key={q.id} role="menuitemradio" aria-checked={active === q.id} className="kino-menu-item"
-          onClick={() => actions.setQuality(q.id)}>{q.height}p</button>
+        <button
+          key={q.id}
+          role="menuitemradio"
+          aria-checked={active === q.id}
+          className="kino-menu-item"
+          onClick={() => actions.setQuality(q.id)}
+        >
+          {q.height}p
+        </button>
       ))}
     </Popover>
   )
@@ -1481,11 +1823,24 @@ export function CaptionsMenu() {
   if (!hasTextTracks || tracks.length === 0) return null
   return (
     <Popover label="Captions" shortcut="C" trigger={<CcIcon />}>
-      <button role="menuitemradio" aria-checked={active === null} className="kino-menu-item"
-        onClick={() => actions.setTextTrack(null)}>Off</button>
+      <button
+        role="menuitemradio"
+        aria-checked={active === null}
+        className="kino-menu-item"
+        onClick={() => actions.setTextTrack(null)}
+      >
+        Off
+      </button>
       {tracks.map((t) => (
-        <button key={t.id} role="menuitemradio" aria-checked={active === t.id} className="kino-menu-item"
-          onClick={() => actions.setTextTrack(t.id)}>{t.label || t.lang}</button>
+        <button
+          key={t.id}
+          role="menuitemradio"
+          aria-checked={active === t.id}
+          className="kino-menu-item"
+          onClick={() => actions.setTextTrack(t.id)}
+        >
+          {t.label || t.lang}
+        </button>
       ))}
     </Popover>
   )
@@ -1508,9 +1863,11 @@ git commit -m "feat: glass popover primitive and speed/quality/captions menus"
 ### Task 10: Control bar, buttons, and assembled chrome
 
 **Files:**
+
 - Create: `src/ui/buttons.tsx`, `src/ui/control-bar.tsx`, `src/ui/control-bar.test.tsx`
 
 **Interfaces:**
+
 - Consumes: all UI pieces above + `useControlsVisible`, `useWrapperRef`.
 - Produces: `<PlayPauseButton/>`, `<VolumeControl/>`, `<FullscreenButton/>`, `<PipButton/>`, and `<ControlBar/>` that lays them out with `<Scrubber/>` and the menus, fading via `useControlsVisible`.
 
@@ -1523,8 +1880,16 @@ import { ControlBar } from "./control-bar"
 import { createFakeProvider } from "../core/fake-provider"
 
 test("play/pause button toggles and shows time", () => {
-  const provider = createFakeProvider({ paused: true, duration: 68, currentTime: 3 })
-  render(<Player provider={provider}><ControlBar /></Player>)
+  const provider = createFakeProvider({
+    paused: true,
+    duration: 68,
+    currentTime: 3,
+  })
+  render(
+    <Player provider={provider}>
+      <ControlBar />
+    </Player>,
+  )
   expect(screen.getByText("0:03 / 1:08")).toBeInTheDocument()
   act(() => screen.getByRole("button", { name: "Play" }).click())
   expect(provider.getState().paused).toBe(false)
@@ -1543,7 +1908,12 @@ import { useMediaSelector } from "../core/store"
 import { formatTime } from "../util/format-time"
 import { Scrubber } from "./scrubber"
 import { SpeedMenu, QualityMenu, CaptionsMenu } from "./menus"
-import { PlayPauseButton, VolumeControl, PipButton, FullscreenButton } from "./buttons"
+import {
+  PlayPauseButton,
+  VolumeControl,
+  PipButton,
+  FullscreenButton,
+} from "./buttons"
 
 export function ControlBar() {
   const visible = useControlsVisible()
@@ -1555,7 +1925,9 @@ export function ControlBar() {
       <div className="kino-controls-row">
         <PlayPauseButton />
         <VolumeControl />
-        <span className="kino-time">{formatTime(currentTime)} / {formatTime(duration)}</span>
+        <span className="kino-time">
+          {formatTime(currentTime)} / {formatTime(duration)}
+        </span>
         <div className="kino-controls-spacer" />
         <SpeedMenu />
         <QualityMenu />
@@ -1586,11 +1958,13 @@ git commit -m "feat: control bar, buttons, assembled chrome"
 ### Task 11: `<MuxPlayer>` drop-in and Vite demo playground
 
 **Files:**
+
 - Create: `src/mux/mux-player.tsx`
 - Modify: `src/mux.ts` (export `MuxPlayer`)
 - Create: `demo/index.html`, `demo/main.tsx`, `demo/vite.config.ts`
 
 **Interfaces:**
+
 - Consumes: `Player`, `ControlBar`, `IdleOverlay`, `createMuxProvider`.
 - Produces: `<MuxPlayer>` with the prop surface from the spec.
 
@@ -1610,15 +1984,26 @@ export type MuxPlayerProps = MuxProviderOptions & {
   children?: ReactNode
 }
 
-export function MuxPlayer({ accentColor, theme, className, children, ...opts }: MuxPlayerProps) {
+export function MuxPlayer({
+  accentColor,
+  theme,
+  className,
+  children,
+  ...opts
+}: MuxPlayerProps) {
   // Recreate the provider only when the identity of the media changes.
   const provider = useMemo(
     () => createMuxProvider(opts),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [opts.playbackId, opts.tokens?.playback]
+    [opts.playbackId, opts.tokens?.playback],
   )
   return (
-    <Player provider={provider} accentColor={accentColor} theme={theme} className={className}>
+    <Player
+      provider={provider}
+      accentColor={accentColor}
+      theme={theme}
+      className={className}
+    >
       <IdleOverlay />
       <ControlBar />
       {children}
@@ -1660,6 +2045,7 @@ git commit -m "feat: MuxPlayer drop-in and demo playground"
 ### Task 12: README, license, Changesets, first release prep
 
 **Files:**
+
 - Create/modify: `README.md`, `.changeset/config.json`, `.changeset/initial.md`
 - Create: `.github/workflows/ci.yml`
 
@@ -1688,17 +2074,20 @@ gh repo create karngyan/kino --public --source=. --remote=origin --push
 ### Task 13: Swap kino into karnstack's lesson player
 
 **Files:**
+
 - Modify: `MONOREPO:/Users/karn/code/karnstack/karnstack/apps/web/package.json` (add dep)
 - Modify: `MONOREPO:/Users/karn/code/karnstack/karnstack/apps/web/src/components/course/lesson-video.tsx`
 - Reference (unchanged): `apps/web/src/lib/mux/sign-playback.ts`, `apps/web/src/lib/mux/lesson-blurups.ts`
 
 **Interfaces:**
+
 - Consumes: `MuxPlayer` and `Player.Overlay` semantics from kino.
 - Produces: the same `LessonVideo` public props as today (no caller changes in the course routes).
 
 - [ ] **Step 1: Link kino into karnstack for dev**
 
 In kino: `pnpm build`. In `MONOREPO:.../apps/web`, add the dependency. Two options, pick one and record it:
+
 - Workspace path dep: add `"@karnstack/kino": "file:../../../kino"` to `apps/web/package.json` then `pnpm install` from the monorepo root. (kino is outside the pnpm workspace globs, so a `file:` dep is correct.)
 - Or `pnpm --filter web add @karnstack/kino@file:../../../kino`.
 
@@ -1715,7 +2104,7 @@ import { MuxPlayer } from "@karnstack/kino/mux"
 // remove: import MuxPlayer from "@mux/mux-player-react/lazy"
 
 // inside the `if (lastReady)` branch, replace the <MuxPlayer .../> with:
-<MuxPlayer
+;<MuxPlayer
   playbackId={activeTokens.playbackId}
   tokens={{
     playback: activeTokens.playback,
@@ -1769,6 +2158,7 @@ git commit -m "feat: adopt @karnstack/kino for the lesson video player"
 ## Self-Review
 
 **Spec coverage:**
+
 - Provider architecture, MediaState, Capabilities, store -> Tasks 2, 5.
 - Subpath exports / no-Tailwind CSS / theming -> Tasks 1, 12.
 - Mux verified API (raw element, renditions, image URLs, iOS gating, Mux Data, PiP, fullscreen) -> Task 5, demo-verified Task 11.
@@ -1779,4 +2169,7 @@ git commit -m "feat: adopt @karnstack/kino for the lesson video player"
 **Placeholder scan:** No "TBD/TODO". The one deliberate v0.0.1 simplification (`open-speed` keyboard focus into the menu) is called out explicitly in Task 6 and completed via the menus in Task 9; not a hidden gap.
 
 **Type consistency:** `MediaState`, `Capabilities`, `Provider`, `PlayerActions`, `QualityLevel`, `TextTrackInfo`, `MuxProviderOptions`, `buildImageUrl`, `detectIOS`, `parseStoryboard`/`Storyboard`/`Tile`, `resolveKey`/`KeyAction`, `formatTime`, `useMediaSelector`/`usePlayer`/`PlayerContext`, `Player`/`Player.Overlay`/`useControlsVisible`/`useWrapperRef` — names used consistently across all referencing tasks.
+
+```
+
 ```
diff --git a/docs/superpowers/specs/2026-06-25-kino-video-player-design.md b/docs/superpowers/specs/2026-06-25-kino-video-player-design.md
index 6288bd6..48fe996 100644
--- a/docs/superpowers/specs/2026-06-25-kino-video-player-design.md
+++ b/docs/superpowers/specs/2026-06-25-kino-video-player-design.md
@@ -7,7 +7,7 @@ Status: approved, pre-implementation
 
 `kino` is a premium, themeable React video player UI with a **provider
 abstraction** underneath. The glass controls, popovers, keyboard handling, and
-theming are written once against a normalized media interface; each *provider*
+theming are written once against a normalized media interface; each _provider_
 adapts a concrete playback engine to that interface. Mux is the first provider.
 
 It ships as a **public** OSS package `@karnstack/kino` from a standalone repo
@@ -132,7 +132,7 @@ shape the implementation:
   provider maps these to MediaState.
 - **Quality / renditions** via the Media Renditions API on the element:
   `videoRenditions` list with `{ id, width, height, bitrate, frameRate, codec,
-  selected }`, `selectedIndex`, and a `change` event. Switch by setting
+selected }`, `selectedIndex`, and a `change` event. Switch by setting
   `videoRenditions.selectedIndex = n` or `rendition.selected = true`; reset for
   Auto/ABR. **Not available on iOS** (native HLS) → capability-gate off. With
   signed URLs, resolution caps must be baked into the JWT claims
diff --git a/mise.toml b/mise.toml
new file mode 100644
index 0000000..2052c6f
--- /dev/null
+++ b/mise.toml
@@ -0,0 +1,5 @@
+# Pinned toolchain — single source of truth for local dev and CI.
+# Exact versions keep every environment byte-for-byte reproducible.
+[tools]
+node = "24.18.0"  # latest Node.js 24 LTS (Krypton)
+pnpm = "10.34.4"  # latest pnpm 10.x (lockfileVersion 9.0)
diff --git a/package.json b/package.json
index efba171..33e15dd 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,10 @@
     "video-player"
   ],
   "type": "module",
+  "packageManager": "pnpm@10.34.4",
+  "engines": {
+    "node": ">=24"
+  },
   "sideEffects": [
     "**/*.css",
     "./dist/mux.js"
@@ -46,7 +50,8 @@
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "peerDependencies": {
     "react": ">=19",
diff --git a/src/core/fake-provider.ts b/src/core/fake-provider.ts
index bcab539..37a1578 100644
--- a/src/core/fake-provider.ts
+++ b/src/core/fake-provider.ts
@@ -1,18 +1,37 @@
 import type { MediaState, Provider, PlayerActions } from "./types"
 
 const DEFAULT_CAPS = {
-  canSetQuality: true, hasStoryboard: false, canPiP: true,
-  canFullscreen: true, canSetRate: true, hasTextTracks: false,
+  canSetQuality: true,
+  hasStoryboard: false,
+  canPiP: true,
+  canFullscreen: true,
+  canSetRate: true,
+  hasTextTracks: false,
 }
 
 export function defaultState(): MediaState {
   return {
-    paused: true, currentTime: 0, duration: 0, buffered: [],
-    rate: 1, volume: 1, muted: false, readyState: 0, seeking: false,
-    ended: false, error: null, qualities: [], activeQualityId: "auto", videoHeight: 0,
-    textTracks: [], activeTextTrackId: null, activeCueText: "",
-    fullscreen: false, pip: false,
-    storyboard: null, capabilities: { ...DEFAULT_CAPS },
+    paused: true,
+    currentTime: 0,
+    duration: 0,
+    buffered: [],
+    rate: 1,
+    volume: 1,
+    muted: false,
+    readyState: 0,
+    seeking: false,
+    ended: false,
+    error: null,
+    qualities: [],
+    activeQualityId: "auto",
+    videoHeight: 0,
+    textTracks: [],
+    activeTextTrackId: null,
+    activeCueText: "",
+    fullscreen: false,
+    pip: false,
+    storyboard: null,
+    capabilities: { ...DEFAULT_CAPS },
   }
 }
 
@@ -41,7 +60,10 @@ export function createFakeProvider(initial?: Partial<MediaState>) {
   const provider: Provider = {
     mount: () => {},
     getState: () => state,
-    subscribe: (l) => { listeners.add(l); return () => listeners.delete(l) },
+    subscribe: (l) => {
+      listeners.add(l)
+      return () => listeners.delete(l)
+    },
     actions,
     destroy: () => listeners.clear(),
   }
diff --git a/src/core/store.test.tsx b/src/core/store.test.tsx
index e6087c7..19713cf 100644
--- a/src/core/store.test.tsx
+++ b/src/core/store.test.tsx
@@ -1,5 +1,10 @@
 import { render, screen, act } from "@testing-library/react"
-import { PlayerContext, useMediaSelector, usePlayer, usePlayerActions } from "./store"
+import {
+  PlayerContext,
+  useMediaSelector,
+  usePlayer,
+  usePlayerActions,
+} from "./store"
 import { createFakeProvider } from "./fake-provider"
 
 function Time() {
@@ -18,7 +23,7 @@ test("useMediaSelector re-renders only when the selected slice changes", () => {
   render(
     <PlayerContext.Provider value={provider}>
       <Counted />
-    </PlayerContext.Provider>
+    </PlayerContext.Provider>,
   )
   const before = renders
   act(() => provider.set({ currentTime: 5 })) // unrelated slice
@@ -37,8 +42,9 @@ test("usePlayerActions does not re-render on unrelated state changes but drives
   }
   render(
     <PlayerContext.Provider value={provider}>
-      <Btn /><Time />
-    </PlayerContext.Provider>
+      <Btn />
+      <Time />
+    </PlayerContext.Provider>,
   )
   const before = renders
   act(() => provider.set({ currentTime: 5 })) // unrelated slice
@@ -55,8 +61,9 @@ test("usePlayer exposes actions that drive state", () => {
   }
   render(
     <PlayerContext.Provider value={provider}>
-      <Btn /><Time />
-    </PlayerContext.Provider>
+      <Btn />
+      <Time />
+    </PlayerContext.Provider>,
   )
   act(() => screen.getByText("seek").click())
   expect(screen.getByTestId("t").textContent).toBe("9")
diff --git a/src/core/store.tsx b/src/core/store.tsx
index 0a5a338..cad5d14 100644
--- a/src/core/store.tsx
+++ b/src/core/store.tsx
@@ -11,13 +11,17 @@ function useProvider(): Provider {
 
 export function useMediaSelector<T>(
   selector: (s: MediaState) => T,
-  isEqual: (a: T, b: T) => boolean = Object.is
+  isEqual: (a: T, b: T) => boolean = Object.is,
 ): T {
   const provider = useProvider()
-  const cache = useRef<{ has: boolean; value: T }>({ has: false, value: undefined as never })
+  const cache = useRef<{ has: boolean; value: T }>({
+    has: false,
+    value: undefined as never,
+  })
   const getSnapshot = () => {
     const next = selector(provider.getState())
-    if (cache.current.has && isEqual(cache.current.value, next)) return cache.current.value
+    if (cache.current.has && isEqual(cache.current.value, next))
+      return cache.current.value
     cache.current = { has: true, value: next }
     return next
   }
diff --git a/src/index.ts b/src/index.ts
index 6fd2a9b..42c3c29 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,11 @@
 export { formatTime } from "./util/format-time"
 export type * from "./core/types"
-export { PlayerContext, usePlayer, usePlayerActions, useMediaSelector } from "./core/store"
+export {
+  PlayerContext,
+  usePlayer,
+  usePlayerActions,
+  useMediaSelector,
+} from "./core/store"
 export {
   Player,
   useControlsVisible,
diff --git a/src/mux/urls.test.ts b/src/mux/urls.test.ts
index 0ef2f38..2f2779f 100644
--- a/src/mux/urls.test.ts
+++ b/src/mux/urls.test.ts
@@ -2,15 +2,17 @@ import { buildImageUrl, detectIOS } from "./urls"
 
 test("buildImageUrl composes signed storyboard url", () => {
   expect(buildImageUrl("ID", "storyboard", "JWT")).toBe(
-    "https://image.mux.com/ID/storyboard.vtt?token=JWT"
+    "https://image.mux.com/ID/storyboard.vtt?token=JWT",
   )
 })
 test("buildImageUrl omits token when unsigned", () => {
   expect(buildImageUrl("ID", "thumbnail")).toBe(
-    "https://image.mux.com/ID/thumbnail.webp"
+    "https://image.mux.com/ID/thumbnail.webp",
   )
 })
 test("detectIOS true for iPhone UA, false for desktop", () => {
-  expect(detectIOS("Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)")).toBe(true)
+  expect(
+    detectIOS("Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)"),
+  ).toBe(true)
   expect(detectIOS("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15)")).toBe(false)
 })
diff --git a/src/mux/urls.ts b/src/mux/urls.ts
index 2caacfd..77d0d9b 100644
--- a/src/mux/urls.ts
+++ b/src/mux/urls.ts
@@ -4,7 +4,7 @@ export function buildImageUrl(
   playbackId: string,
   kind: "storyboard" | "thumbnail",
   token?: string,
-  ext = kind === "storyboard" ? "vtt" : "webp"
+  ext = kind === "storyboard" ? "vtt" : "webp",
 ): string {
   const base = `${IMAGE_HOST}/${playbackId}/${kind}.${ext}`
   return token ? `${base}?token=${token}` : base
diff --git a/src/ui/buttons.tsx b/src/ui/buttons.tsx
index 1b87155..7c8b3d6 100644
--- a/src/ui/buttons.tsx
+++ b/src/ui/buttons.tsx
@@ -20,7 +20,11 @@ export function PlayPauseButton() {
   const actions = usePlayerActions()
   const paused = useMediaSelector((s) => s.paused)
   return (
-    <Tooltip label={paused ? "Play" : "Pause"} shortcut={<SpaceKey />} align="start">
+    <Tooltip
+      label={paused ? "Play" : "Pause"}
+      shortcut={<SpaceKey />}
+      align="start"
+    >
       <button
         type="button"
         className="kino-ctrl"
@@ -63,7 +67,9 @@ export function SkipForwardButton() {
         aria-label={`Forward ${SKIP_SECONDS} seconds`}
         onClick={() =>
           actions.seek(
-            duration ? Math.min(duration, currentTime + SKIP_SECONDS) : currentTime + SKIP_SECONDS
+            duration
+              ? Math.min(duration, currentTime + SKIP_SECONDS)
+              : currentTime + SKIP_SECONDS,
           )
         }
       >
diff --git a/src/ui/control-bar.test.tsx b/src/ui/control-bar.test.tsx
index c640ca3..d6cd233 100644
--- a/src/ui/control-bar.test.tsx
+++ b/src/ui/control-bar.test.tsx
@@ -4,8 +4,16 @@ import { ControlBar } from "./control-bar"
 import { createFakeProvider } from "../core/fake-provider"
 
 test("play/pause button toggles and shows time", () => {
-  const provider = createFakeProvider({ paused: true, duration: 68, currentTime: 3 })
-  render(<Player provider={provider}><ControlBar /></Player>)
+  const provider = createFakeProvider({
+    paused: true,
+    duration: 68,
+    currentTime: 3,
+  })
+  render(
+    <Player provider={provider}>
+      <ControlBar />
+    </Player>,
+  )
   expect(screen.getByText("0:03")).toBeInTheDocument()
   expect(screen.getByText(/1:08/)).toBeInTheDocument()
   act(() => screen.getByRole("button", { name: "Play" }).click())
diff --git a/src/ui/idle-overlay.test.tsx b/src/ui/idle-overlay.test.tsx
index 041fa38..f7ad362 100644
--- a/src/ui/idle-overlay.test.tsx
+++ b/src/ui/idle-overlay.test.tsx
@@ -8,7 +8,7 @@ test("shows speed options and starts playback at chosen rate", () => {
   render(
     <PlayerContext.Provider value={provider}>
       <IdleOverlay />
-    </PlayerContext.Provider>
+    </PlayerContext.Provider>,
   )
   act(() => screen.getByRole("button", { name: "1.5x" }).click())
   expect(provider.getState().rate).toBe(1.5)
@@ -20,7 +20,7 @@ test("hidden once playback has progressed", () => {
   render(
     <PlayerContext.Provider value={provider}>
       <IdleOverlay />
-    </PlayerContext.Provider>
+    </PlayerContext.Provider>,
   )
   expect(screen.queryByLabelText("Play")).toBeNull()
 })
diff --git a/src/ui/menus.test.tsx b/src/ui/menus.test.tsx
index 44b092e..0c24cf7 100644
--- a/src/ui/menus.test.tsx
+++ b/src/ui/menus.test.tsx
@@ -9,7 +9,7 @@ test("speed menu sets rate", () => {
   render(
     <PlayerContext.Provider value={provider}>
       <SpeedMenu />
-    </PlayerContext.Provider>
+    </PlayerContext.Provider>,
   )
   act(() => screen.getByRole("button", { name: /speed/i }).click()) // open
   act(() => screen.getByRole("menuitemradio", { name: "1.5x" }).click())
@@ -21,7 +21,7 @@ test("speed menu opens on the kino:open-speed event", () => {
   const { container } = render(
     <Player provider={fakeProvider}>
       <SpeedMenu />
-    </Player>
+    </Player>,
   )
   expect(screen.queryByRole("menuitemradio", { name: "1.5x" })).toBeNull()
   const wrapper = container.querySelector(".kino") as HTMLElement
@@ -39,7 +39,7 @@ test("quality menu hidden when capability is off", () => {
   const { container } = render(
     <PlayerContext.Provider value={provider}>
       <QualityMenu />
-    </PlayerContext.Provider>
+    </PlayerContext.Provider>,
   )
   expect(container.firstChild).toBeNull()
 })
diff --git a/src/ui/menus.tsx b/src/ui/menus.tsx
index 19491db..1f6229f 100644
--- a/src/ui/menus.tsx
+++ b/src/ui/menus.tsx
@@ -27,7 +27,9 @@ export function SpeedMenu() {
       label="Speed"
       shortcut="S"
       openOn="kino:open-speed"
-      trigger={<span className="kino-ctrl-label kino-speed-label">{label}</span>}
+      trigger={
+        <span className="kino-ctrl-label kino-speed-label">{label}</span>
+      }
     >
       {RATES.map((r) => (
         <button
@@ -63,7 +65,9 @@ export function QualityMenu() {
     <Popover
       label="Quality"
       align="end"
-      trigger={<span className="kino-quality-badge">{heightKeyword(badgeHeight)}</span>}
+      trigger={
+        <span className="kino-quality-badge">{heightKeyword(badgeHeight)}</span>
+      }
     >
       <button
         role="menuitemradio"
diff --git a/src/ui/player.test.tsx b/src/ui/player.test.tsx
index 79f3468..9e51f82 100644
--- a/src/ui/player.test.tsx
+++ b/src/ui/player.test.tsx
@@ -9,7 +9,7 @@ test("renders children overlay and applies accent var", () => {
       <Player.Overlay>
         <span>hi</span>
       </Player.Overlay>
-    </Player>
+    </Player>,
   )
   expect(screen.getByText("hi")).toBeInTheDocument()
   const root = container.querySelector(".kino") as HTMLElement
diff --git a/src/ui/rolling-time.tsx b/src/ui/rolling-time.tsx
index d263626..2cc449e 100644
--- a/src/ui/rolling-time.tsx
+++ b/src/ui/rolling-time.tsx
@@ -29,7 +29,7 @@ export function RollingTime({ value }: { value: string }) {
           <span key={i} className="kino-roll-sep" aria-hidden="true">
             {ch}
           </span>
-        )
+        ),
       )}
     </span>
   )
diff --git a/src/ui/scrubber.test.tsx b/src/ui/scrubber.test.tsx
index f019d61..3ac2e34 100644
--- a/src/ui/scrubber.test.tsx
+++ b/src/ui/scrubber.test.tsx
@@ -8,7 +8,7 @@ test("renders progress fill proportional to currentTime/duration", () => {
   render(
     <PlayerContext.Provider value={provider}>
       <Scrubber />
-    </PlayerContext.Provider>
+    </PlayerContext.Provider>,
   )
   const fill = screen.getByTestId("kino-progress")
   expect(fill.style.width).toBe("25%")
@@ -19,7 +19,7 @@ test("clicking the track seeks", () => {
   render(
     <PlayerContext.Provider value={provider}>
       <Scrubber />
-    </PlayerContext.Provider>
+    </PlayerContext.Provider>,
   )
   const track = screen.getByTestId("kino-track")
   // jsdom has no layout; stub getBoundingClientRect
@@ -36,7 +36,7 @@ test("clicking the track seeks", () => {
   })
   act(() => {
     track.dispatchEvent(
-      new MouseEvent("pointerdown", { clientX: 100, bubbles: true })
+      new MouseEvent("pointerdown", { clientX: 100, bubbles: true }),
     )
   })
   expect(provider.getState().currentTime).toBe(50)
diff --git a/src/ui/settings-sheet.test.tsx b/src/ui/settings-sheet.test.tsx
index 4e1ece4..1f28c22 100644
--- a/src/ui/settings-sheet.test.tsx
+++ b/src/ui/settings-sheet.test.tsx
@@ -25,7 +25,13 @@ test("captions section only appears when tracks exist", () => {
       hasTextTracks: true,
     },
     textTracks: [
-      { id: "en", kind: "captions", label: "English", lang: "en", mode: "hidden" },
+      {
+        id: "en",
+        kind: "captions",
+        label: "English",
+        lang: "en",
+        mode: "hidden",
+      },
     ],
   })
   render(
diff --git a/src/ui/tooltip.tsx b/src/ui/tooltip.tsx
index 1da3ff8..546434d 100644
--- a/src/ui/tooltip.tsx
+++ b/src/ui/tooltip.tsx
@@ -44,7 +44,10 @@ export function Tooltip({
   return (
     <span className="kino-popover-root">
       {children}
-      <span className={`kino-tip kino-glass kino-tip-${align}`} aria-hidden="true">
+      <span
+        className={`kino-tip kino-glass kino-tip-${align}`}
+        aria-hidden="true"
+      >
         {label}
         {renderShortcut(shortcut)}
       </span>
diff --git a/src/util/storyboard.test.ts b/src/util/storyboard.test.ts
index f39a6e3..9a29d5d 100644
--- a/src/util/storyboard.test.ts
+++ b/src/util/storyboard.test.ts
@@ -14,7 +14,12 @@ test("parses cues into tiles with xywh and time ranges", () => {
   expect(sb.tiles).toHaveLength(2)
   expect(sb.tiles[0]).toMatchObject({
     url: "https://image.mux.com/ID/storyboard.jpg",
-    x: 0, y: 0, w: 320, h: 180, start: 0, end: 5,
+    x: 0,
+    y: 0,
+    w: 320,
+    h: 180,
+    start: 0,
+    end: 5,
   })
   expect(sb.tiles[1]?.x).toBe(320)
 })
diff --git a/src/util/storyboard.ts b/src/util/storyboard.ts
index f6a012d..bde6658 100644
--- a/src/util/storyboard.ts
+++ b/src/util/storyboard.ts
@@ -7,7 +7,10 @@ export type Tile = {
   start: number
   end: number
 }
-export type Storyboard = { tiles: Tile[]; thumbnailAt(time: number): Tile | null }
+export type Storyboard = {
+  tiles: Tile[]
+  thumbnailAt(time: number): Tile | null
+}
 
 function toSeconds(stamp: string): number {
   // hh:mm:ss.mmm or mm:ss.mmm