commit 47d4409bcc0d36a0f8f2d41c635d3181fa18d0fc
Author: Your Name <you@example.com>
Date:   Thu Feb 19 01:16:17 2026 +0200

    initial: existing TutorialDock Python app + conversion design and plan

diff --git a/docs/plans/2026-02-19-tauri-conversion-design.md b/docs/plans/2026-02-19-tauri-conversion-design.md
new file mode 100644
index 0000000..719ee2e
--- /dev/null
+++ b/docs/plans/2026-02-19-tauri-conversion-design.md
@@ -0,0 +1,244 @@
+# TutorialDock: PyWebView to Tauri Conversion Design
+
+**Date:** 2026-02-19
+**Status:** Approved
+
+## Overview
+
+Convert TutorialDock from a single-file Python app (PyWebView + Flask) to a Tauri v2 desktop app with a full Rust backend and Vite + TypeScript frontend. The app must remain 100% portable (everything next to the exe, no AppData, no registry, no installer).
+
+## Decisions
+
+| Decision | Choice |
+|----------|--------|
+| Backend | Full Rust rewrite (no Python dependency) |
+| Video serving | Tauri custom protocol (`tutdock://`) with range requests |
+| Frontend tooling | Vite + TypeScript |
+| ffmpeg strategy | Discovery (PATH -> next to exe -> state/ffmpeg/) with auto-download + progress UI |
+| Platform | Windows only, portable exe only |
+| API surface | Exact 1:1 mapping of all 24 PyWebView API methods as Tauri commands |
+| Window state | Manual save/restore via prefs.json (no tauri-plugin-window-state) |
+| Dialogs | tauri-plugin-dialog for folder picker and subtitle file picker |
+
+## Project Structure
+
+```
+tutorial-app/
+├── src-tauri/
+│   ├── src/
+│   │   ├── main.rs              # Entry point, Tauri builder, plugin registration
+│   │   ├── commands.rs          # All 24 #[tauri::command] functions
+│   │   ├── library.rs           # Library struct + all library operations
+│   │   ├── prefs.rs             # Prefs struct, defaults, load/save
+│   │   ├── state.rs             # atomic_write_json, load_json_with_fallbacks, backup rotation
+│   │   ├── ffmpeg.rs            # Discovery, download, duration_seconds, ffprobe_video_metadata
+│   │   ├── video_protocol.rs    # Custom tutdock:// protocol with range request handling
+│   │   ├── subtitles.rs         # SRT->VTT, sidecar discovery, embedded extraction
+│   │   ├── fonts.rs             # Google Fonts + Font Awesome download & caching
+│   │   ├── recents.rs           # Recent folders list management
+│   │   └── utils.rs             # natural_key, file_fingerprint, pretty_title, path helpers
+│   ├── Cargo.toml
+│   ├── tauri.conf.json
+│   └── build.rs
+├── src/
+│   ├── index.html
+│   ├── main.ts                  # Boot sequence, tick loop, global event wiring
+│   ├── api.ts                   # Typed invoke() wrappers for all 24 commands
+│   ├── types.ts                 # All TypeScript interfaces
+│   ├── player.ts                # Video element control, seek, volume, playback rate
+│   ├── playlist.ts              # Playlist rendering, drag-and-drop reorder, tree SVG
+│   ├── subtitles.ts             # Subtitle menu, track management
+│   ├── ui.ts                    # Zoom, splits, topbar, info panel, notes, toasts
+│   ├── tooltips.ts              # Tooltip system
+│   ├── styles/
+│   │   ├── main.css             # Variables, body, app layout, topbar
+│   │   ├── player.css           # Video wrap, controls, seek bar, volume
+│   │   ├── playlist.css         # List items, tree view, scrollbar
+│   │   ├── panels.css           # Panel headers, dock grid, notes, info
+│   │   ├── components.css       # Buttons, switches, dropdowns, tooltips, toasts
+│   │   └── animations.css       # Keyframes
+│   └── vite-env.d.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```
+
+## Rust Backend
+
+### State Management
+
+Three pieces of managed Tauri state:
+- `Mutex<Library>` — video library + per-folder state
+- `Mutex<Prefs>` — global preferences
+- `AppPaths` — resolved portable paths (immutable after startup)
+
+### Module Details
+
+**state.rs** — Atomic JSON persistence
+- `atomic_write_json(path, data, backup_count=8)`: tmp-file write, rotate .bak1-.bak8, .lastgood copy
+- `load_json_with_fallbacks(path)`: try primary -> .lastgood -> .bak1-.bak10
+
+**utils.rs** — Pure utility functions
+- `natural_key()`: natural sort (split on digits, mixed comparison)
+- `file_fingerprint()`: SHA-256 of size + first 256KB + last 256KB, 20-char hex
+- `compute_library_id()`: SHA-256 of sorted fingerprints, 16-char hex
+- `pretty_title_from_filename()`: strip index prefix, underscores to spaces, smart title case
+- `is_within_root()`, `clamp()`, `truthy()`, `folder_display_name()`
+
+**prefs.rs** — Global preferences
+- Struct with serde Serialize/Deserialize
+- Fields: ui_zoom, split_ratio, dock_ratio, always_on_top, window (x/y/width/height), last_folder_path, last_library_id
+- Versioned (version: 19), merged on load
+
+**recents.rs** — Recent folders (max 50, deduplicated, most-recent-first)
+
+**ffmpeg.rs** — ffmpeg/ffprobe management
+- `discover()`: PATH -> next to exe -> state/ffmpeg/
+- `download_ffmpeg(progress_callback)`: download from github.com/BtbN/FFmpeg-Builds, extract
+- `duration_seconds()`: ffprobe first, ffmpeg stderr fallback
+- `ffprobe_video_metadata()`: full JSON probe, video/audio/subtitle stream extraction
+- Windows CREATE_NO_WINDOW for all subprocess calls
+
+**subtitles.rs**
+- `srt_to_vtt()`: BOM removal, comma->dot timestamps
+- `auto_subtitle_sidecar()`: case-insensitive matching, language code awareness, priority candidates
+- `store_subtitle_for_fid()`: convert and save to state/subtitles/
+- `extract_embedded_subtitle()`: ffmpeg extraction to VTT
+
+**library.rs** — Core library management
+- Scan folder for video files (VIDEO_EXTS set)
+- Build content-based fingerprints (survives renames/moves)
+- Load/create/merge per-library state
+- Playlist ordering with saved order + natural sort for new files
+- Tree display flags (depth-1 only)
+- Folder stats (finished/remaining counts, overall progress, remaining time)
+- Background duration scanner via tokio::spawn
+- "Once finished, always finished" sticky flag
+
+**video_protocol.rs** — Custom protocol handler
+- Routes: /video/{index}, /sub/{libid}/{fid}, /fonts.css, /fonts/{file}, /fa.css, /fa/webfonts/{file}
+- Video: Range header parsing, 206 Partial Content, 512KB chunk streaming
+- MIME type mapping from file extension
+- Path traversal prevention
+
+**commands.rs** — 24 Tauri commands (1:1 with Python API class)
+1. select_folder() — native folder dialog + set_root
+2. open_folder_path(folder)
+3. get_recents()
+4. remove_recent(path)
+5. get_library()
+6. set_current(index, timecode)
+7. tick_progress(index, current_time, duration, playing)
+8. set_folder_volume(volume)
+9. set_folder_autoplay(enabled)
+10. set_folder_rate(rate)
+11. set_order(fids)
+12. start_duration_scan()
+13. get_prefs()
+14. set_prefs(patch)
+15. set_always_on_top(enabled)
+16. save_window_state()
+17. get_note(fid)
+18. set_note(fid, note)
+19. get_current_video_meta()
+20. get_current_subtitle()
+21. get_embedded_subtitles()
+22. extract_embedded_subtitle(track_index)
+23. get_available_subtitles()
+24. load_sidecar_subtitle(file_path)
+25. choose_subtitle_file() — native file dialog + set subtitle
+
+### Rust Crates
+
+| Crate | Purpose |
+|-------|---------|
+| tauri | App framework, windows, commands, custom protocols |
+| serde + serde_json | JSON serialization |
+| sha2 | SHA-256 fingerprinting |
+| tokio | Async runtime (duration scan, downloads) |
+| reqwest | HTTP client (ffmpeg + font downloads) |
+| zip | Extracting ffmpeg archive |
+| which | Finding executables on PATH |
+| tauri-plugin-dialog | Native file/folder dialogs |
+
+## Frontend
+
+### TypeScript Modules
+
+**types.ts** — Interfaces for all API responses (LibraryInfo, VideoItem, Prefs, VideoMeta, SubtitleInfo, etc.)
+
+**api.ts** — Typed invoke() wrappers for all 24 commands. Every `window.pywebview.api.foo()` becomes `api.foo()`.
+
+**main.ts** — Boot sequence, tick loop (250ms interval, progress save ~1s, library refresh ~3s, window state save), global keyboard shortcuts, Tauri event listeners (ffmpeg download progress).
+
+**player.ts** — Video element with `tutdock://localhost/video/{index}` src, play/pause/seek/volume/speed/fullscreen, overlay, autoplay-next on ended.
+
+**playlist.ts** — Render list items with progress bars and tree connectors, drag-and-drop reorder via pointer events, custom scrollbar.
+
+**subtitles.ts** — Subtitle menu (sidecar + embedded + file picker + disable), track management via `tutdock://localhost/sub/...`.
+
+**ui.ts** — Zoom control, split ratio dragging, topbar actions (always-on-top, autoplay, open folder, recent dropdown, reset progress, reload), info panel, notes textarea with debounced auto-save, toast notifications.
+
+**tooltips.ts** — Event delegation on [data-tip] elements, zoom-aware positioning.
+
+### CSS Split
+
+| File | Content |
+|------|---------|
+| main.css | :root variables, body, #zoomRoot, .app, .topbar, .brand |
+| player.css | .videoWrap, video, .controls, seek/volume bars, time display |
+| playlist.css | #list, .listItem, tree SVG, .listScrollbar, #emptyHint |
+| panels.css | .panel, .panelHeader, #dockGrid, .notesArea, .infoGrid |
+| components.css | .toolbarBtn, .splitBtn, .toggleSwitch, .dropdownPortal, #toast, #fancyTooltip |
+| animations.css | @keyframes logoSpin, logoWiggle, transitions |
+
+### Video Source URLs
+
+- Current: `http://127.0.0.1:{port}/video/{index}`
+- New: `tutdock://localhost/video/{index}`
+
+Same change for subtitles, fonts, and font awesome assets.
+
+## Custom Protocol Routing
+
+| URL Pattern | Response |
+|-------------|----------|
+| tutdock://localhost/video/{index} | Video file (200/206 with range support) |
+| tutdock://localhost/sub/{libid}/{fid} | VTT subtitle file |
+| tutdock://localhost/fonts.css | Combined Google Fonts CSS |
+| tutdock://localhost/fonts/{filename} | Font woff2 files |
+| tutdock://localhost/fa.css | Font Awesome CSS |
+| tutdock://localhost/fa/webfonts/{filename} | Font Awesome webfont files |
+
+## Startup Flow
+
+1. Resolve exe directory, create state/ subdirectories, set WEBVIEW2_USER_DATA_FOLDER
+2. Load prefs.json, restore window size/position
+3. Create Tauri window, register tutdock:// protocol, register 24 commands
+4. Frontend boot(): apply zoom/splits, load last library if exists
+5. ffmpeg discovery (async): PATH -> exe dir -> state/ffmpeg/ -> auto-download with progress UI
+6. Font caching (async, silent): Google Fonts + Font Awesome
+
+## Portable State Layout
+
+```
+TutorialDock.exe
+state/
+├── prefs.json              (+ .lastgood, .bak1-.bak8)
+├── recent_folders.json     (+ backups)
+├── library_{id}.json       (per unique library, + backups)
+├── webview_profile/        (WebView2 data)
+├── fonts/                  (cached Google Fonts)
+│   ├── fonts.css
+│   ├── fonts_meta.json
+│   └── *.woff2
+├── fontawesome/            (cached Font Awesome)
+│   ├── fa.css
+│   ├── fa_meta.json
+│   └── webfonts/*.woff2
+├── subtitles/              (converted subtitle files)
+│   └── {fid}_*.vtt
+└── ffmpeg/                 (auto-downloaded)
+    ├── ffmpeg.exe
+    └── ffprobe.exe
+```
diff --git a/docs/plans/2026-02-19-tauri-conversion-plan.md b/docs/plans/2026-02-19-tauri-conversion-plan.md
new file mode 100644
index 0000000..f0882ca
--- /dev/null
+++ b/docs/plans/2026-02-19-tauri-conversion-plan.md
@@ -0,0 +1,1703 @@
+# TutorialDock Tauri Conversion — Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Convert TutorialDock from a single-file Python+PyWebView+Flask app into a Tauri v2 desktop app with full Rust backend and Vite+TypeScript frontend, preserving identical functionality and UI.
+
+**Architecture:** Tauri v2 with custom `tutdock://` protocol for video/asset serving, 10 Rust backend modules (utils, state, prefs, recents, ffmpeg, subtitles, fonts, library, video_protocol, commands), and 9 TypeScript frontend modules. 100% portable — all state next to the exe.
+
+**Tech Stack:** Rust (Tauri v2, serde, sha2, tokio, reqwest), TypeScript (Vite), tauri-plugin-dialog
+
+**Source reference:** The original Python app is at `tutorial.py` (5,282 lines). All porting work references specific line ranges in that file.
+
+---
+
+## Phase 1: Project Scaffolding
+
+### Task 1: Initialize Tauri v2 + Vite + TypeScript project
+
+**Files:**
+- Create: `src-tauri/Cargo.toml`
+- Create: `src-tauri/tauri.conf.json`
+- Create: `src-tauri/build.rs`
+- Create: `src-tauri/src/main.rs` (minimal stub)
+- Create: `src/index.html` (minimal stub)
+- Create: `src/main.ts` (minimal stub)
+- Create: `src/vite-env.d.ts`
+- Create: `package.json`
+- Create: `tsconfig.json`
+- Create: `vite.config.ts`
+
+**Step 1: Create package.json with Tauri + Vite + TypeScript dependencies**
+
+```json
+{
+  "name": "tutorialdock",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^2"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^2",
+    "typescript": "^5.5",
+    "vite": "^6"
+  }
+}
+```
+
+**Step 2: Create tsconfig.json**
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}
+```
+
+**Step 3: Create vite.config.ts**
+
+```typescript
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  clearScreen: false,
+  server: {
+    port: 1420,
+    strictPort: true,
+    watch: { ignored: ["**/src-tauri/**"] },
+  },
+});
+```
+
+**Step 4: Create src/vite-env.d.ts**
+
+```typescript
+/// <reference types="vite/client" />
+```
+
+**Step 5: Create minimal src/index.html**
+
+A bare-bones HTML file that loads main.ts. Just enough to verify the build works.
+
+```html
+<!doctype html>
+<html><head><meta charset="utf-8"/><title>TutorialDock</title></head>
+<body><div id="zoomRoot"><div class="app">Loading...</div></div>
+<script type="module" src="/main.ts"></script></body></html>
+```
+
+**Step 6: Create minimal src/main.ts**
+
+```typescript
+console.log("TutorialDock frontend loaded");
+```
+
+**Step 7: Create src-tauri/Cargo.toml**
+
+```toml
+[package]
+name = "tutorialdock"
+version = "1.0.0"
+edition = "2021"
+
+[dependencies]
+tauri = { version = "2", features = ["protocol-asset"] }
+tauri-plugin-dialog = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+sha2 = "0.10"
+tokio = { version = "1", features = ["full"] }
+reqwest = { version = "0.12", features = ["stream"] }
+zip = "2"
+which = "7"
+regex = "1"
+once_cell = "1"
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[features]
+default = ["custom-protocol"]
+custom-protocol = ["tauri/custom-protocol"]
+```
+
+**Step 8: Create src-tauri/build.rs**
+
+```rust
+fn main() {
+    tauri_build::build()
+}
+```
+
+**Step 9: Create src-tauri/tauri.conf.json**
+
+Key settings:
+- `identifier`: `com.tutorialdock.app`
+- `productName`: `TutorialDock`
+- `app.windows[0]`: title "TutorialDock", width 1320, height 860, decorations true
+- `app.security.csp`: allow `tutdock:` protocol in media-src, font-src, style-src
+- `bundle.active`: false (no installer — portable exe only)
+- Register `tutdock` as allowed custom protocol under `app.security.assetProtocol`
+
+```json
+{
+  "$schema": "https://raw.githubusercontent.com/nicedoc/tauri-schema/main/schema.json",
+  "productName": "TutorialDock",
+  "version": "1.0.0",
+  "identifier": "com.tutorialdock.app",
+  "build": {
+    "frontendDist": "../dist",
+    "devUrl": "http://localhost:1420",
+    "beforeDevCommand": "npm run dev",
+    "beforeBuildCommand": "npm run build"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "TutorialDock",
+        "width": 1320,
+        "height": 860,
+        "minWidth": 640,
+        "minHeight": 480
+      }
+    ],
+    "security": {
+      "csp": "default-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src 'self' tutdock: blob:; font-src 'self' tutdock:; style-src 'self' 'unsafe-inline' tutdock:; img-src 'self' data: tutdock:; connect-src 'self' tutdock: https:"
+    }
+  },
+  "bundle": {
+    "active": false
+  },
+  "plugins": {
+    "dialog": {}
+  }
+}
+```
+
+**Step 10: Create minimal src-tauri/src/main.rs**
+
+```rust
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_dialog::init())
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
+```
+
+**Step 11: Install dependencies and verify build**
+
+Run: `npm install`
+Run: `npm run tauri dev`
+Expected: App window opens showing "Loading..." text. Console shows "TutorialDock frontend loaded".
+
+**Step 12: Commit**
+
+```
+feat: scaffold Tauri v2 + Vite + TypeScript project
+```
+
+---
+
+## Phase 2: Rust Foundation Modules
+
+### Task 2: Implement utils.rs
+
+**Files:**
+- Create: `src-tauri/src/utils.rs`
+- Modify: `src-tauri/src/main.rs` (add `mod utils;`)
+
+**Port from:** `tutorial.py` lines 90-93 (`clamp`), 159-166 (`is_within_root`), 168-176 (`truthy`), 186-192 (`folder_display_name`), 195-205 (`_deduplicate_list`), 400-464 (`natural_key`, `_smart_title_case`, `pretty_title_from_filename`), 696-731 (`file_fingerprint`), 734-749 (`compute_library_id_from_fids`)
+
+**Functions to implement:**
+- `clamp(v: f64, a: f64, b: f64) -> f64`
+- `is_within_root(root: &Path, target: &Path) -> bool`
+- `truthy(v: &serde_json::Value) -> bool`
+- `folder_display_name(path_str: &str) -> String`
+- `deduplicate_list(items: &[String]) -> Vec<String>`
+- `natural_key(s: &str) -> Vec<NaturalKeyPart>` — enum with `Num(u64)` and `Text(String)` variants, implements `Ord`
+- `smart_title_case(text: &str) -> String` — same SMALL_WORDS set as Python
+- `pretty_title_from_filename(filename: &str) -> String` — same regex patterns: `LEADING_INDEX_RE`, underscore→space, strip leading punct
+- `file_fingerprint(path: &Path) -> String` — SHA-256 of `b"VIDFIDv1\0"` + size + `b"\0"` + first 256KB + last 256KB, truncated to 20 hex chars
+- `compute_library_id(fids: &[String]) -> String` — SHA-256 of `b"LIBFIDv2\0"` + sorted fids joined by `\n`, truncated to 16 hex chars
+
+**Key detail for `file_fingerprint`:** Must produce identical output to the Python version for backward compatibility with existing library state files. The Python code uses `hashlib.sha256` with the exact byte sequence `b"VIDFIDv1\0"` + ascii size string + `b"\0"` + head bytes + tail bytes. The Rust version must match byte-for-byte.
+
+**Step 1: Write utils.rs with all functions**
+
+Implement all functions listed above. Use `sha2::Sha256` for hashing, `regex::Regex` with `once_cell::sync::Lazy` for compiled patterns.
+
+**Step 2: Write unit tests at bottom of utils.rs**
+
+```rust
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_natural_key_sorting() {
+        let mut items = vec!["10.mp4", "2.mp4", "1.mp4", "20.mp4"];
+        items.sort_by(|a, b| natural_key(a).cmp(&natural_key(b)));
+        assert_eq!(items, vec!["1.mp4", "2.mp4", "10.mp4", "20.mp4"]);
+    }
+
+    #[test]
+    fn test_pretty_title() {
+        assert_eq!(pretty_title_from_filename("01_introduction_to_python.mp4"), "Introduction to Python");
+        assert_eq!(pretty_title_from_filename("02. advanced topics.mp4"), "Advanced Topics");
+        assert_eq!(pretty_title_from_filename("(3) the_basics.mkv"), "The Basics");
+    }
+
+    #[test]
+    fn test_clamp() {
+        assert_eq!(clamp(5.0, 0.0, 10.0), 5.0);
+        assert_eq!(clamp(-1.0, 0.0, 10.0), 0.0);
+        assert_eq!(clamp(15.0, 0.0, 10.0), 10.0);
+    }
+
+    #[test]
+    fn test_deduplicate() {
+        let input = vec!["a".into(), "b".into(), "a".into(), "c".into()];
+        assert_eq!(deduplicate_list(&input), vec!["a", "b", "c"]);
+    }
+
+    #[test]
+    fn test_smart_title_case() {
+        assert_eq!(smart_title_case("introduction to the basics"), "Introduction to the Basics");
+    }
+}
+```
+
+**Step 3: Add `mod utils;` to main.rs**
+
+**Step 4: Run tests**
+
+Run: `cd src-tauri && cargo test utils`
+Expected: All tests pass.
+
+**Step 5: Commit**
+
+```
+feat: implement utils.rs — natural sort, fingerprinting, title formatting
+```
+
+---
+
+### Task 3: Implement state.rs
+
+**Files:**
+- Create: `src-tauri/src/state.rs`
+- Modify: `src-tauri/src/main.rs` (add `mod state;`)
+
+**Port from:** `tutorial.py` lines 95-156 (`atomic_write_json`, `load_json_with_fallbacks`)
+
+**Functions to implement:**
+- `atomic_write_json(path: &Path, data: &serde_json::Value, backup_count: usize)` — write to `.tmp`, rotate `.bak1`–`.bakN`, atomic rename via `std::fs::rename`, write `.lastgood`
+- `load_json_with_fallbacks(path: &Path, backup_count: usize) -> Option<serde_json::Value>` — try path → `.lastgood` → `.bak1`–`.bak{N+2}`
+
+**Key detail:** The backup rotation logic must match Python exactly: iterate `backup_count` down to 1, rename `.bakI` to `.bak{I+1}`, then rename current file to `.bak1`. Default `backup_count` = 8.
+
+**Step 1: Write state.rs**
+
+**Step 2: Write unit tests using temp directories**
+
+```rust
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use tempfile::TempDir;
+
+    #[test]
+    fn test_atomic_write_and_read() {
+        let dir = TempDir::new().unwrap();
+        let path = dir.path().join("test.json");
+        let data = serde_json::json!({"hello": "world"});
+        atomic_write_json(&path, &data, 8);
+        let loaded = load_json_with_fallbacks(&path, 8).unwrap();
+        assert_eq!(loaded, data);
+    }
+
+    #[test]
+    fn test_fallback_to_lastgood() {
+        let dir = TempDir::new().unwrap();
+        let path = dir.path().join("test.json");
+        let data = serde_json::json!({"version": 1});
+        atomic_write_json(&path, &data, 8);
+        // Corrupt primary
+        std::fs::write(&path, "not json").unwrap();
+        let loaded = load_json_with_fallbacks(&path, 8).unwrap();
+        assert_eq!(loaded, data);
+    }
+
+    #[test]
+    fn test_backup_rotation() {
+        let dir = TempDir::new().unwrap();
+        let path = dir.path().join("test.json");
+        for i in 0..5 {
+            atomic_write_json(&path, &serde_json::json!({"v": i}), 8);
+        }
+        // .bak1 should be version 3 (second-to-last write)
+        let bak1 = dir.path().join("test.json.bak1");
+        let bak1_data: serde_json::Value = serde_json::from_str(&std::fs::read_to_string(bak1).unwrap()).unwrap();
+        assert_eq!(bak1_data["v"], 3);
+    }
+}
+```
+
+Add `tempfile = "3"` to `[dev-dependencies]` in Cargo.toml.
+
+**Step 3: Run tests**
+
+Run: `cd src-tauri && cargo test state`
+Expected: All tests pass.
+
+**Step 4: Commit**
+
+```
+feat: implement state.rs — atomic JSON persistence with backup rotation
+```
+
+---
+
+### Task 4: Implement prefs.rs
+
+**Files:**
+- Create: `src-tauri/src/prefs.rs`
+- Modify: `src-tauri/src/main.rs` (add `mod prefs;`)
+
+**Port from:** `tutorial.py` lines 806-858 (`Prefs` class)
+
+**Structs to implement:**
+
+```rust
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct WindowState {
+    pub width: i32,
+    pub height: i32,
+    pub x: Option<i32>,
+    pub y: Option<i32>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Prefs {
+    pub version: u32,
+    pub ui_zoom: f64,
+    pub split_ratio: f64,
+    pub dock_ratio: f64,
+    pub always_on_top: bool,
+    pub window: WindowState,
+    pub last_folder_path: Option<String>,
+    pub last_library_id: Option<String>,
+    #[serde(default)]
+    pub updated_at: u64,
+}
+```
+
+**Functions:**
+- `Prefs::default()` — version 19, ui_zoom 1.0, split_ratio 0.62, dock_ratio 0.62, window 1320x860
+- `Prefs::load(state_dir: &Path) -> Prefs` — load from `prefs.json` using `state::load_json_with_fallbacks`, merge with defaults (the Python way: defaults first, then overlay loaded values; handle window dict merge specially)
+- `Prefs::save(&self, state_dir: &Path)` — save via `state::atomic_write_json`
+- `Prefs::update(&mut self, patch: serde_json::Value, state_dir: &Path)` — apply partial updates, handle window dict merge, set `updated_at`, save
+
+**Step 1: Write prefs.rs**
+
+**Step 2: Write tests**
+
+Test default creation, save/load round-trip, partial update with window merge.
+
+**Step 3: Run tests**
+
+Run: `cd src-tauri && cargo test prefs`
+
+**Step 4: Commit**
+
+```
+feat: implement prefs.rs — preferences with save/load/update
+```
+
+---
+
+### Task 5: Implement recents.rs
+
+**Files:**
+- Create: `src-tauri/src/recents.rs`
+- Modify: `src-tauri/src/main.rs` (add `mod recents;`)
+
+**Port from:** `tutorial.py` lines 208-235
+
+**Functions:**
+- `load_recents(state_dir: &Path) -> Vec<String>` — load from `recent_folders.json`, validate structure, deduplicate, max 50
+- `save_recents(state_dir: &Path, paths: &[String])` — write with version 2 + timestamp + items
+- `push_recent(state_dir: &Path, path_str: &str)` — load, remove if exists, insert at front, save
+- `remove_recent(state_dir: &Path, path_str: &str)` — load, remove, save
+
+**Step 1: Write recents.rs**
+
+**Step 2: Write tests**
+
+Test push (adds to front, deduplicates), remove, max 50 limit.
+
+**Step 3: Run tests, commit**
+
+```
+feat: implement recents.rs — recent folders management
+```
+
+---
+
+### Task 6: Implement ffmpeg.rs
+
+**Files:**
+- Create: `src-tauri/src/ffmpeg.rs`
+- Modify: `src-tauri/src/main.rs` (add `mod ffmpeg;`)
+
+**Port from:** `tutorial.py` lines 82-88 (`_subprocess_no_window_kwargs`), 467-513 (`find_ffprobe_ffmpeg`), 516-569 (`duration_seconds`), 572-694 (`ffprobe_video_metadata`)
+
+**Structs:**
+
+```rust
+pub struct FfmpegPaths {
+    pub ffprobe: Option<PathBuf>,
+    pub ffmpeg: Option<PathBuf>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct VideoMetadata {
+    pub v_codec: Option<String>,
+    pub width: Option<u32>,
+    pub height: Option<u32>,
+    pub fps: Option<f64>,
+    pub v_bitrate: Option<u64>,
+    pub pix_fmt: Option<String>,
+    pub color_space: Option<String>,
+    pub a_codec: Option<String>,
+    pub channels: Option<u32>,
+    pub sample_rate: Option<String>,
+    pub a_bitrate: Option<u64>,
+    pub subtitle_tracks: Vec<SubtitleTrack>,
+    pub container_bitrate: Option<u64>,
+    pub duration: Option<f64>,
+    pub format_name: Option<String>,
+    pub container_title: Option<String>,
+    pub encoder: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct SubtitleTrack {
+    pub index: u32,
+    pub codec: String,
+    pub language: String,
+    pub title: String,
+}
+```
+
+**Functions:**
+- `discover(exe_dir: &Path, state_dir: &Path) -> FfmpegPaths` — check `which::which("ffprobe")` / `which::which("ffmpeg")`, then `exe_dir/ffprobe.exe`, then `state_dir/ffmpeg/ffprobe.exe`
+- `download_ffmpeg(state_dir: &Path, progress_tx: tokio::sync::mpsc::Sender<DownloadProgress>)` — async, download from `github.com/BtbN/FFmpeg-Builds/releases`, extract with `zip` crate, place in `state_dir/ffmpeg/`
+- `duration_seconds(path: &Path, paths: &FfmpegPaths) -> Option<f64>` — try ffprobe `-show_entries format=duration`, fallback to ffmpeg stderr `Duration:` parsing
+- `ffprobe_video_metadata(path: &Path, ffprobe: &Path) -> Option<VideoMetadata>` — run ffprobe with `-print_format json -show_streams -show_format`, parse all stream types
+
+**Key Windows detail:** All `Command::new()` calls must use `.creation_flags(0x08000000)` (CREATE_NO_WINDOW) to prevent console flashes. This replaces the Python `_subprocess_no_window_kwargs`.
+
+**Step 1: Write ffmpeg.rs — discovery + duration_seconds + metadata**
+
+**Step 2: Write ffmpeg.rs — download function (async with progress)**
+
+The download function should:
+1. Create `state_dir/ffmpeg/` if it doesn't exist
+2. GET the zip from GitHub releases with `reqwest` streaming
+3. Emit progress events as bytes download
+4. Extract only `ffmpeg.exe` and `ffprobe.exe` from the zip
+5. Place them in `state_dir/ffmpeg/`
+
+**Step 3: Write unit tests for duration parsing and metadata extraction**
+
+Tests for `duration_seconds` and `ffprobe_video_metadata` need actual ffprobe/ffmpeg installed, so mark those as `#[ignore]` for CI. Test the string parsing logic (ffmpeg stderr Duration: extraction) with mock data.
+
+**Step 4: Run tests, commit**
+
+```
+feat: implement ffmpeg.rs — discovery, download, metadata extraction
+```
+
+---
+
+### Task 7: Implement subtitles.rs
+
+**Files:**
+- Create: `src-tauri/src/subtitles.rs`
+- Modify: `src-tauri/src/main.rs` (add `mod subtitles;`)
+
+**Port from:** `tutorial.py` lines 751-798 (`srt_to_vtt_bytes`), 1219-1295 (`_auto_subtitle_sidecar`), 1297-1317 (`_store_subtitle_for_fid`), 1451-1520 (`extract_embedded_subtitle`)
+
+**Functions:**
+- `srt_to_vtt(srt_text: &str) -> String` — remove BOM, add `WEBVTT` header, convert timestamps (comma→dot), strip cue indices
+- `auto_subtitle_sidecar(video_path: &Path) -> Option<PathBuf>` — priority-based matching: exact → normalized → English lang suffix → other lang suffix. Same `normalize()` logic (lowercase, replace `-_` with space, collapse spaces)
+- `store_subtitle_for_fid(fid: &str, src_path: &Path, subs_dir: &Path) -> Option<SubtitleStored>` — convert SRT→VTT if needed, save as `{fid}_{sanitized_name}.vtt`
+- `extract_embedded_subtitle(video_path: &Path, track_index: u32, ffmpeg_path: &Path, subs_dir: &Path, fid: &str) -> Result<SubtitleStored, String>` — run ffmpeg `-map 0:{track_index} -c:s webvtt`
+
+**Step 1: Write subtitles.rs**
+
+**Step 2: Write unit tests for srt_to_vtt**
+
+```rust
+#[test]
+fn test_srt_to_vtt_basic() {
+    let srt = "1\n00:00:01,000 --> 00:00:04,000\nHello world\n\n2\n00:00:05,000 --> 00:00:08,000\nSecond line\n";
+    let vtt = srt_to_vtt(srt);
+    assert!(vtt.starts_with("WEBVTT"));
+    assert!(vtt.contains("00:00:01.000 --> 00:00:04.000"));
+    assert!(!vtt.contains(","));
+}
+
+#[test]
+fn test_srt_to_vtt_bom() {
+    let srt = "\u{FEFF}1\n00:00:01,500 --> 00:00:03,500\nWith BOM\n";
+    let vtt = srt_to_vtt(srt);
+    assert!(vtt.starts_with("WEBVTT"));
+    assert!(!vtt.contains("\u{FEFF}"));
+}
+```
+
+**Step 3: Run tests, commit**
+
+```
+feat: implement subtitles.rs — SRT/VTT conversion, sidecar discovery
+```
+
+---
+
+### Task 8: Implement fonts.rs
+
+**Files:**
+- Create: `src-tauri/src/fonts.rs`
+- Modify: `src-tauri/src/main.rs` (add `mod fonts;`)
+
+**Port from:** `tutorial.py` lines 241-393 (`ensure_google_fonts_local`, `ensure_fontawesome_local`, helpers)
+
+**Functions:**
+- `ensure_google_fonts_local(fonts_dir: &Path)` — async, download CSS from Google Fonts API for Sora/Manrope/IBM Plex Mono, regex-extract woff2 URLs, download font files, rewrite CSS to use local `/fonts/{file}` paths. Track via `fonts_meta.json` with version 7.
+- `ensure_fontawesome_local(fa_dir: &Path)` — async, download Font Awesome 6.5.2 all.min.css from cdnjs, download all webfont files, rewrite URLs to `/fa/webfonts/{file}`. Track via `fa_meta.json` with version 3.
+- `safe_filename_from_url(url: &str) -> String` — SHA-256 hash of URL for unique local filename
+
+**Key detail:** The CSS URL rewriting must produce paths that the `tutdock://` custom protocol can serve. Current Python rewrites to `/fonts/{file}` — we rewrite to `tutdock://localhost/fonts/{file}`.
+
+Actually, looking at this more carefully: the CSS files reference fonts via relative URLs. Since the CSS is served via `tutdock://localhost/fonts.css`, relative URLs like `url(/fonts/xyz.woff2)` won't resolve correctly. We need to rewrite to absolute `tutdock://localhost/fonts/xyz.woff2` URLs in the CSS, OR serve the CSS inline, OR use the same `/fonts/` path since Tauri's custom protocol can handle it. The simplest approach: keep the URLs as `/fonts/{file}` in the CSS and have the frontend load fonts.css via a `<link>` tag with `href="tutdock://localhost/fonts.css"` — the browser should resolve relative URLs against the protocol origin.
+
+**Step 1: Write fonts.rs**
+
+**Step 2: Test (manual — requires network)**
+
+This module is hard to unit-test without network. Add an `#[ignore]` integration test that downloads to a temp dir.
+
+**Step 3: Commit**
+
+```
+feat: implement fonts.rs — Google Fonts and Font Awesome caching
+```
+
+---
+
+### Task 9: Implement library.rs
+
+**Files:**
+- Create: `src-tauri/src/library.rs`
+- Modify: `src-tauri/src/main.rs` (add `mod library;`)
+
+**Port from:** `tutorial.py` lines 861-1993 (entire `Library` class)
+
+This is the largest module. It contains all library management logic.
+
+**Structs:**
+
+```rust
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct VideoMeta {
+    pub pos: f64,
+    pub watched: f64,
+    pub duration: Option<f64>,
+    pub finished: bool,
+    pub note: String,
+    pub last_open: u64,
+    pub subtitle: Option<SubtitleRef>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct SubtitleRef {
+    pub vtt: String,
+    pub label: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct LibraryState {
+    pub version: u32,
+    pub library_id: String,
+    pub last_path: String,
+    pub updated_at: u64,
+    pub current_fid: Option<String>,
+    pub current_time: f64,
+    pub volume: f64,
+    pub autoplay: bool,
+    pub playback_rate: f64,
+    pub order_fids: Vec<String>,
+    pub videos: HashMap<String, VideoMeta>,
+}
+
+pub struct Library {
+    pub root: Option<PathBuf>,
+    pub files: Vec<PathBuf>,
+    pub fids: Vec<String>,
+    pub relpaths: Vec<String>,
+    pub rel_to_fid: HashMap<String, String>,
+    pub fid_to_rel: HashMap<String, String>,
+    pub state: LibraryState,
+    pub state_path: Option<PathBuf>,
+    // ffmpeg paths
+    pub ffprobe: Option<PathBuf>,
+    pub ffmpeg: Option<PathBuf>,
+    // metadata cache
+    pub meta_cache: HashMap<String, VideoMetadata>,
+}
+```
+
+**Supported video extensions (same as Python):**
+```rust
+const VIDEO_EXTS: &[&str] = &[
+    ".mp4", ".m4v", ".mov", ".webm", ".mkv",
+    ".avi", ".mpg", ".mpeg", ".m2ts", ".mts", ".ogv"
+];
+```
+
+**Methods to implement (all map 1:1 to Python):**
+
+1. `set_root(folder: &str, state_dir: &Path) -> Result<LibraryInfo, String>` — Port of `Library.set_root()` (lines 933-1082). Scan folder for video files, compute fingerprints, load/create state, merge, apply saved order, save, start duration scan.
+
+2. `get_library_info() -> LibraryInfo` — Port of `Library.get_library_info()` (lines 1726-1799). Build full response with items, tree flags, stats.
+
+3. `update_progress(index, current_time, duration, playing) -> Result<(), String>` — Port of `Library.update_progress()` (lines 1801-1835). Update pos, watched (high-water mark), duration, finished (sticky), last_open.
+
+4. `set_current(index, timecode)` — Port of lines 1837-1845.
+
+5. `set_folder_volume(volume)`, `set_folder_autoplay(enabled)`, `set_folder_rate(rate)` — Port of lines 1847-1870.
+
+6. `set_order(fids)` — Port of lines 1872-1908. Reorder playlist, rebuild file lists.
+
+7. `get_note(fid)`, `set_note(fid, note)` — Port of lines 1920-1941.
+
+8. `get_current_video_metadata()` — Port of lines 1695-1724. Probe + cache.
+
+9. `get_subtitle_for_current(state_dir)` — Port of lines 1319-1400. Check stored → sidecar → embedded.
+
+10. `set_subtitle_for_current(file_path, state_dir)` — Port of lines 1402-1421.
+
+11. `get_embedded_subtitles()` — Port of lines 1423-1449.
+
+12. `extract_embedded_subtitle(track_index, state_dir)` — Port of lines 1451-1520.
+
+13. `get_available_subtitles()` — Port of lines 1522-1650.
+
+14. `load_sidecar_subtitle(file_path, state_dir)` — Port of lines 1652-1677.
+
+15. `reset_watch_progress()` — Port of lines 1679-1693.
+
+16. `save_state()` — Port of lines 1084-1088.
+
+**Helper methods:**
+- `_sorted_default(relpaths)` — natural sort
+- `_apply_saved_order(all_fids, fid_to_rel, order_fids)` — port of lines 902-931
+- `_folder_stats(fids, state)` — port of lines 1090-1138
+- `_tree_flags(rels)` — port of lines 1140-1191
+- `_basic_file_meta(fid)` — port of lines 1193-1209
+- `_auto_subtitle_sidecar(video_path)` — delegates to `subtitles::auto_subtitle_sidecar`
+
+**Background duration scanner:**
+
+Port of `_duration_scan_worker` (lines 1952-1991). In Rust, this runs as a `tokio::spawn` task. It needs a way to communicate scanned durations back to the Library state. Use an `Arc<Mutex<Library>>` pattern, or use channels to send updates back.
+
+Implementation approach: The scan function takes an `Arc<Mutex<LibraryState>>` and the file list, iterates through files, calls `ffmpeg::duration_seconds` for each, and updates the state directly under the lock. Same as the Python threading pattern.
+
+**Step 1: Write library.rs — structs + set_root + save_state**
+
+Start with the core: `Library::new()`, `set_root()`, `save_state()`, and the helper functions it depends on (`_sorted_default`, `_apply_saved_order`).
+
+**Step 2: Write library.rs — get_library_info + helpers**
+
+Add `get_library_info()`, `_folder_stats()`, `_tree_flags()`, `_basic_file_meta()`.
+
+**Step 3: Write library.rs — progress tracking methods**
+
+Add `update_progress()`, `set_current()`, `set_folder_volume()`, `set_folder_autoplay()`, `set_folder_rate()`, `set_order()`.
+
+**Step 4: Write library.rs — notes + metadata + subtitles**
+
+Add `get_note()`, `set_note()`, `get_current_video_metadata()`, all subtitle methods, `reset_watch_progress()`.
+
+**Step 5: Write library.rs — background duration scanner**
+
+Implement as an async function that can be spawned with `tokio::spawn`.
+
+**Step 6: Write unit tests**
+
+Test `_tree_flags`, `_apply_saved_order`, `_folder_stats` with mock data. Test `set_root` with a temp directory containing dummy files (can't test video-specific features without real videos).
+
+**Step 7: Run tests, commit**
+
+```
+feat: implement library.rs — full library management with progress tracking
+```
+
+---
+
+### Task 10: Implement video_protocol.rs
+
+**Files:**
+- Create: `src-tauri/src/video_protocol.rs`
+- Modify: `src-tauri/src/main.rs` (add `mod video_protocol;`)
+
+**Port from:** `tutorial.py` lines 1995-2118 (Flask routes: `_send_file_range`, video, subtitle, fonts routes)
+
+**Function:**
+- `register_protocol(builder: tauri::Builder) -> tauri::Builder` — register `tutdock` custom protocol with Tauri
+
+The protocol handler function receives a `tauri::http::Request` and returns a `tauri::http::Response`. It must:
+
+1. Parse the URL path from the request
+2. Route to the appropriate handler:
+   - `/video/{index}` → read file from Library, serve with range support
+   - `/sub/{libid}/{fid}` → read VTT from state/subtitles/, serve as `text/vtt`
+   - `/fonts.css` → serve fonts CSS file
+   - `/fonts/{filename}` → serve font file
+   - `/fa.css` → serve Font Awesome CSS
+   - `/fa/webfonts/{filename}` → serve FA webfont file
+3. For video: parse `Range` header, return 206 with `Content-Range` or 200 with full body
+
+**Key detail about Tauri custom protocols:** In Tauri v2, custom protocols are registered via `tauri::Builder::register_asynchronous_uri_scheme_protocol()`. The handler receives the full request and must return a response. Unlike Flask streaming, we read file chunks into a `Vec<u8>` body (Tauri protocol responses don't support streaming generators). For large video files, we serve the requested range only (typically a few MB at a time due to browser range requests), so memory usage stays bounded.
+
+**MIME type mapping** (same as Python lines 2081-2093):
+```rust
+fn mime_for_video(ext: &str) -> &str {
+    match ext {
+        ".mp4" | ".m4v" => "video/mp4",
+        ".webm" => "video/webm",
+        ".ogv" => "video/ogg",
+        ".mov" => "video/quicktime",
+        ".mkv" => "video/x-matroska",
+        ".avi" => "video/x-msvideo",
+        ".mpeg" | ".mpg" => "video/mpeg",
+        ".m2ts" | ".mts" => "video/mp2t",
+        _ => "application/octet-stream",
+    }
+}
+```
+
+**Step 1: Write video_protocol.rs — protocol registration + URL routing**
+
+**Step 2: Write video_protocol.rs — range request handling for video**
+
+Port the range parsing logic from `_send_file_range`. Read only the requested byte range from disk.
+
+**Step 3: Write video_protocol.rs — subtitle, fonts, FA handlers**
+
+Simple file-serving handlers with appropriate MIME types and path traversal prevention.
+
+**Step 4: Commit**
+
+```
+feat: implement video_protocol.rs — tutdock:// custom protocol with range requests
+```
+
+---
+
+### Task 11: Implement commands.rs
+
+**Files:**
+- Create: `src-tauri/src/commands.rs`
+- Modify: `src-tauri/src/main.rs` (add `mod commands;`)
+
+**Port from:** `tutorial.py` lines 2125-2276 (API class)
+
+All 25 commands as thin `#[tauri::command]` wrappers. Each acquires state locks and delegates to the appropriate module.
+
+**Commands list with signatures:**
+
+```rust
+#[tauri::command]
+async fn select_folder(
+    library: State<'_, Mutex<Library>>,
+    paths: State<'_, AppPaths>,
+    app: AppHandle,
+) -> Result<LibraryInfo, String>
+
+#[tauri::command]
+fn open_folder_path(folder: String, library: State<Mutex<Library>>, paths: State<AppPaths>) -> Result<LibraryInfo, String>
+
+#[tauri::command]
+fn get_recents(paths: State<AppPaths>) -> Result<RecentsResponse, String>
+
+#[tauri::command]
+fn remove_recent(path: String, paths: State<AppPaths>) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn get_library(library: State<Mutex<Library>>) -> Result<LibraryInfo, String>
+
+#[tauri::command]
+fn set_current(index: usize, timecode: f64, library: State<Mutex<Library>>) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn tick_progress(index: usize, current_time: f64, duration: Option<f64>, playing: bool, library: State<Mutex<Library>>) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn set_folder_volume(volume: f64, library: State<Mutex<Library>>) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn set_folder_autoplay(enabled: bool, library: State<Mutex<Library>>) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn set_folder_rate(rate: f64, library: State<Mutex<Library>>) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn set_order(fids: Vec<String>, library: State<Mutex<Library>>) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn start_duration_scan(library: State<Mutex<Library>>) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn get_prefs(prefs: State<Mutex<Prefs>>) -> Result<PrefsResponse, String>
+
+#[tauri::command]
+fn set_prefs(patch: serde_json::Value, prefs: State<Mutex<Prefs>>, paths: State<AppPaths>) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn set_always_on_top(enabled: bool, prefs: State<Mutex<Prefs>>, paths: State<AppPaths>, app: AppHandle) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn save_window_state(prefs: State<Mutex<Prefs>>, paths: State<AppPaths>, app: AppHandle) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn get_note(fid: String, library: State<Mutex<Library>>) -> Result<NoteResponse, String>
+
+#[tauri::command]
+fn set_note(fid: String, note: String, library: State<Mutex<Library>>) -> Result<OkResponse, String>
+
+#[tauri::command]
+fn get_current_video_meta(library: State<Mutex<Library>>) -> Result<VideoMetaResponse, String>
+
+#[tauri::command]
+fn get_current_subtitle(library: State<Mutex<Library>>, paths: State<AppPaths>) -> Result<SubtitleResponse, String>
+
+#[tauri::command]
+fn get_embedded_subtitles(library: State<Mutex<Library>>) -> Result<EmbeddedSubsResponse, String>
+
+#[tauri::command]
+fn extract_embedded_subtitle(track_index: u32, library: State<Mutex<Library>>, paths: State<AppPaths>) -> Result<SubtitleResponse, String>
+
+#[tauri::command]
+fn get_available_subtitles(library: State<Mutex<Library>>) -> Result<AvailableSubsResponse, String>
+
+#[tauri::command]
+fn load_sidecar_subtitle(file_path: String, library: State<Mutex<Library>>, paths: State<AppPaths>) -> Result<SubtitleResponse, String>
+
+#[tauri::command]
+async fn choose_subtitle_file(library: State<'_, Mutex<Library>>, paths: State<'_, AppPaths>, app: AppHandle) -> Result<SubtitleResponse, String>
+```
+
+**Special commands:**
+- `select_folder` uses `tauri_plugin_dialog::FileDialogBuilder::new().pick_folder()` for native dialog
+- `choose_subtitle_file` uses `FileDialogBuilder::new().add_filter("Subtitles", &["srt", "vtt"]).pick_file()`
+- `set_always_on_top` calls `app.get_webview_window("main").unwrap().set_always_on_top(enabled)`
+- `save_window_state` reads position/size from the window object via `window.outer_position()` and `window.outer_size()`
+
+**Step 1: Write commands.rs — all 25 commands**
+
+**Step 2: Commit**
+
+```
+feat: implement commands.rs — all 25 Tauri commands
+```
+
+---
+
+### Task 12: Wire up main.rs
+
+**Files:**
+- Modify: `src-tauri/src/main.rs`
+
+**Port from:** `tutorial.py` lines 5231-5282 (`main` function)
+
+**Final main.rs structure:**
+
+```rust
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+mod commands;
+mod ffmpeg;
+mod fonts;
+mod library;
+mod prefs;
+mod recents;
+mod state;
+mod subtitles;
+mod utils;
+mod video_protocol;
+
+use std::path::PathBuf;
+use std::sync::Mutex;
+use tauri::Manager;
+
+pub struct AppPaths {
+    pub exe_dir: PathBuf,
+    pub state_dir: PathBuf,
+    pub fonts_dir: PathBuf,
+    pub fa_dir: PathBuf,
+    pub subs_dir: PathBuf,
+    pub webview_profile_dir: PathBuf,
+}
+
+fn main() {
+    // 1. Resolve exe directory for portability
+    let exe_dir = std::env::current_exe()
+        .expect("cannot resolve exe path")
+        .parent()
+        .expect("exe has no parent")
+        .to_path_buf();
+
+    let state_dir = exe_dir.join("state");
+
+    // Create all subdirectories
+    let paths = AppPaths {
+        exe_dir: exe_dir.clone(),
+        state_dir: state_dir.clone(),
+        fonts_dir: state_dir.join("fonts"),
+        fa_dir: state_dir.join("fontawesome"),
+        subs_dir: state_dir.join("subtitles"),
+        webview_profile_dir: state_dir.join("webview_profile"),
+    };
+    std::fs::create_dir_all(&paths.fonts_dir).ok();
+    std::fs::create_dir_all(&paths.fa_dir.join("webfonts")).ok();
+    std::fs::create_dir_all(&paths.subs_dir).ok();
+    std::fs::create_dir_all(&paths.webview_profile_dir).ok();
+
+    // 2. Set WebView2 user data folder for portability
+    std::env::set_var("WEBVIEW2_USER_DATA_FOLDER", &paths.webview_profile_dir);
+
+    // 3. Load preferences
+    let prefs = prefs::Prefs::load(&state_dir);
+
+    // 4. Initialize library (empty — will be loaded from frontend or from last_folder_path)
+    let mut lib = library::Library::new();
+
+    // Discover ffmpeg
+    let ff_paths = ffmpeg::discover(&paths.exe_dir, &paths.state_dir);
+    lib.ffprobe = ff_paths.ffprobe;
+    lib.ffmpeg = ff_paths.ffmpeg;
+
+    // Restore last folder if exists
+    if let Some(ref last_path) = prefs.last_folder_path {
+        if std::path::Path::new(last_path).is_dir() {
+            let _ = lib.set_root(last_path, &state_dir);
+        }
+    }
+
+    // 5. Build Tauri app
+    let builder = tauri::Builder::default()
+        .plugin(tauri_plugin_dialog::init())
+        .manage(Mutex::new(lib))
+        .manage(Mutex::new(prefs))
+        .manage(paths)
+        .invoke_handler(tauri::generate_handler![
+            commands::select_folder,
+            commands::open_folder_path,
+            commands::get_recents,
+            commands::remove_recent,
+            commands::get_library,
+            commands::set_current,
+            commands::tick_progress,
+            commands::set_folder_volume,
+            commands::set_folder_autoplay,
+            commands::set_folder_rate,
+            commands::set_order,
+            commands::start_duration_scan,
+            commands::get_prefs,
+            commands::set_prefs,
+            commands::set_always_on_top,
+            commands::save_window_state,
+            commands::get_note,
+            commands::set_note,
+            commands::get_current_video_meta,
+            commands::get_current_subtitle,
+            commands::get_embedded_subtitles,
+            commands::extract_embedded_subtitle,
+            commands::get_available_subtitles,
+            commands::load_sidecar_subtitle,
+            commands::choose_subtitle_file,
+        ]);
+
+    // Register custom protocol
+    let builder = video_protocol::register_protocol(builder);
+
+    // Configure window from saved prefs
+    builder
+        .setup(|app| {
+            let prefs = app.state::<Mutex<prefs::Prefs>>();
+            let p = prefs.lock().unwrap();
+            let win = app.get_webview_window("main").unwrap();
+
+            if let Some(x) = p.window.x {
+                if let Some(y) = p.window.y {
+                    let _ = win.set_position(tauri::Position::Physical(
+                        tauri::PhysicalPosition::new(x, y)
+                    ));
+                }
+            }
+            let _ = win.set_size(tauri::Size::Physical(
+                tauri::PhysicalSize::new(p.window.width as u32, p.window.height as u32)
+            ));
+            let _ = win.set_always_on_top(p.always_on_top);
+
+            // Spawn async font caching (silent, non-blocking)
+            let paths = app.state::<AppPaths>();
+            let fonts_dir = paths.fonts_dir.clone();
+            let fa_dir = paths.fa_dir.clone();
+            tokio::spawn(async move {
+                let _ = fonts::ensure_google_fonts_local(&fonts_dir).await;
+                let _ = fonts::ensure_fontawesome_local(&fa_dir).await;
+            });
+
+            // If ffmpeg not found, emit event to frontend for download UI
+            let ff_check = {
+                let lib = app.state::<Mutex<library::Library>>();
+                let l = lib.lock().unwrap();
+                l.ffprobe.is_none() && l.ffmpeg.is_none()
+            };
+            if ff_check {
+                let handle = app.handle().clone();
+                let sd = paths.state_dir.clone();
+                tokio::spawn(async move {
+                    let _ = handle.emit("ffmpeg-download-needed", ());
+                    // Download and emit progress
+                    // After download, emit ffmpeg-download-complete
+                });
+            }
+
+            Ok(())
+        })
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
+```
+
+**Step 1: Write final main.rs**
+
+**Step 2: Verify Rust compiles**
+
+Run: `cd src-tauri && cargo check`
+Expected: No errors.
+
+**Step 3: Commit**
+
+```
+feat: wire up main.rs — Tauri bootstrap with all modules
+```
+
+---
+
+## Phase 3: Frontend — CSS Extraction
+
+### Task 13: Extract and split CSS
+
+**Files:**
+- Create: `src/styles/main.css`
+- Create: `src/styles/player.css`
+- Create: `src/styles/playlist.css`
+- Create: `src/styles/panels.css`
+- Create: `src/styles/components.css`
+- Create: `src/styles/animations.css`
+
+**Port from:** `tutorial.py` lines 2287-3747 (the `<style>` block inside the HTML string)
+
+Extract the CSS verbatim from the Python HTML string. Split by logical section:
+
+**main.css** — Lines 2287-2510:
+- `:root` variables (--zoom, --bg0, --bg1, --stroke, --text, --accent, etc.)
+- `*`, `html`, `body` base styles
+- `#zoomRoot` transform-based zoom
+- `.app` layout
+- `.topbar` with pseudo-element patterns
+- `.brand`, `.appIcon`, `.brandText`, `.appName`, `.tagline`
+- `.actions`, `.actionGroup`, `.actionDivider`
+
+**player.css** — From the `<style>` block:
+- `.videoWrap`, `video` element
+- `.videoOverlay`
+- `.controls` layout
+- `.seekRow`, `.seekBar` (range input)
+- `.timeChip`
+- `.volSlider` (range input)
+- Fullscreen styles
+
+**playlist.css** — From the `<style>` block:
+- `.listWrap`, `#list`
+- `.listItem` with all states (hover, active, current, finished)
+- `.treeSvg` connector styles
+- `.listScrollbar`, `.scrollThumb`
+- `#emptyHint`
+
+**panels.css** — From the `<style>` block:
+- `.panel`, `.panelHeader`
+- `#contentGrid` (3-column grid)
+- `.dividerWrap`, `.dividerLine`
+- `#dockGrid` (sub-grid)
+- `.notesArea`, `.notesBox` (textarea)
+- `.infoGrid`, `.infoRow`, `.infoKey`, `.infoVal`
+
+**components.css** — From the `<style>` block:
+- `.zoomControl`, `.zoomBtn`, `.zoomValue`
+- `.toolbarBtn` with pseudo-elements
+- `.splitBtn`, `.drop` (split button)
+- `.toggleSwitch`, `.switchTrack`, `.switchLabel`
+- `.dropdownPortal`, `.recentMenu`, `.recentRow`
+- `#toast`
+- `#fancyTooltip`
+- `.subsMenu`, `.subsMenuItem`
+- `.speedMenu`, `.speedItem`
+
+**animations.css** — From the `<style>` block:
+- `@keyframes logoSpin`
+- `@keyframes logoWiggle`
+- Any transition/animation definitions that are standalone
+
+**Key change:** All CSS stays identical. The only modification is that font references change:
+- `href="/fonts.css"` → `href="tutdock://localhost/fonts.css"`  (in index.html)
+- `href="/fa.css"` → `href="tutdock://localhost/fa.css"` (in index.html)
+
+The CSS files themselves are unchanged — they reference `/fonts/` and `/fa/webfonts/` paths, which the custom protocol handles.
+
+**Step 1: Extract CSS from tutorial.py lines 2287-3747 into the 6 files**
+
+Read the `<style>` section carefully and split by logical boundary. Keep exact formatting and values.
+
+**Step 2: Create src/main.ts to import all CSS files**
+
+```typescript
+import './styles/main.css';
+import './styles/player.css';
+import './styles/playlist.css';
+import './styles/panels.css';
+import './styles/components.css';
+import './styles/animations.css';
+```
+
+**Step 3: Verify styles load correctly**
+
+Run: `npm run tauri dev`
+Expected: Window opens with correct dark background, CSS variables applied. No content yet, but no CSS errors in console.
+
+**Step 4: Commit**
+
+```
+feat: extract CSS from Python HTML string into 6 modular files
+```
+
+---
+
+## Phase 4: Frontend — TypeScript Modules
+
+### Task 14: Create types.ts
+
+**Files:**
+- Create: `src/types.ts`
+
+**Derive all interfaces from:** The return types of every API command. Reference `tutorial.py` method return values in the `API` class (lines 2125-2276) and `Library` class (lines 1726-1799 for `get_library_info`).
+
+**All interfaces to define:**
+
+```typescript
+// Library and video items
+export interface LibraryInfo { ... }  // 20+ fields from get_library_info()
+export interface VideoItem { ... }    // 17 fields per video
+export interface FolderStats { ... }
+
+// Preferences
+export interface WindowState { width: number; height: number; x: number | null; y: number | null; }
+export interface Prefs { version: number; ui_zoom: number; split_ratio: number; dock_ratio: number; always_on_top: boolean; window: WindowState; last_folder_path: string | null; last_library_id: string | null; }
+
+// API responses
+export interface OkResponse { ok: boolean; error?: string; }
+export interface PrefsResponse { ok: boolean; prefs: Prefs; }
+export interface RecentsResponse { ok: boolean; items: RecentItem[]; }
+export interface RecentItem { name: string; path: string; }
+export interface NoteResponse { ok: boolean; note: string; }
+export interface VideoMetaResponse { ok: boolean; fid: string; basic: BasicFileMeta; probe: ProbeMeta | null; ffprobe_found: boolean; }
+export interface BasicFileMeta { ext: string; size: number; mtime: number; folder: string; }
+export interface ProbeMeta { v_codec?: string; width?: number; height?: number; fps?: number; v_bitrate?: number; pix_fmt?: string; color_space?: string; a_codec?: string; channels?: number; sample_rate?: string; a_bitrate?: number; subtitle_tracks?: SubtitleTrack[]; container_bitrate?: number; duration?: number; format_name?: string; container_title?: string; encoder?: string; }
+export interface SubtitleTrack { index: number; codec: string; language: string; title: string; }
+export interface SubtitleResponse { ok: boolean; has?: boolean; url?: string; label?: string; cancelled?: boolean; error?: string; }
+export interface AvailableSubsResponse { ok: boolean; sidecar: SidecarSub[]; embedded: EmbeddedSub[]; }
+export interface SidecarSub { path: string; label: string; format: string; }
+export interface EmbeddedSub { index: number; label: string; codec: string; language: string; }
+
+// ffmpeg download progress events
+export interface FfmpegProgress { percent: number; downloaded_bytes: number; total_bytes: number; }
+```
+
+**Step 1: Write types.ts**
+
+**Step 2: Commit**
+
+```
+feat: create types.ts — all TypeScript interfaces for API
+```
+
+---
+
+### Task 15: Create api.ts
+
+**Files:**
+- Create: `src/api.ts`
+
+**Port from:** Every `window.pywebview.api.*` call in the JavaScript (tutorial.py lines 3748-5221)
+
+```typescript
+import { invoke } from '@tauri-apps/api/core';
+import type { LibraryInfo, OkResponse, PrefsResponse, RecentsResponse, NoteResponse, VideoMetaResponse, SubtitleResponse, AvailableSubsResponse } from './types';
+
+export const api = {
+  selectFolder: () => invoke<LibraryInfo>('select_folder'),
+  openFolderPath: (folder: string) => invoke<LibraryInfo>('open_folder_path', { folder }),
+  getRecents: () => invoke<RecentsResponse>('get_recents'),
+  removeRecent: (path: string) => invoke<OkResponse>('remove_recent', { path }),
+  getLibrary: () => invoke<LibraryInfo>('get_library'),
+  setCurrent: (index: number, timecode: number = 0) => invoke<OkResponse>('set_current', { index, timecode }),
+  tickProgress: (index: number, currentTime: number, duration: number | null, playing: boolean) =>
+    invoke<OkResponse>('tick_progress', { index, currentTime, duration, playing }),
+  setFolderVolume: (volume: number) => invoke<OkResponse>('set_folder_volume', { volume }),
+  setFolderAutoplay: (enabled: boolean) => invoke<OkResponse>('set_folder_autoplay', { enabled }),
+  setFolderRate: (rate: number) => invoke<OkResponse>('set_folder_rate', { rate }),
+  setOrder: (fids: string[]) => invoke<OkResponse>('set_order', { fids }),
+  startDurationScan: () => invoke<OkResponse>('start_duration_scan'),
+  getPrefs: () => invoke<PrefsResponse>('get_prefs'),
+  setPrefs: (patch: Record<string, unknown>) => invoke<OkResponse>('set_prefs', { patch }),
+  setAlwaysOnTop: (enabled: boolean) => invoke<OkResponse>('set_always_on_top', { enabled }),
+  saveWindowState: () => invoke<OkResponse>('save_window_state'),
+  getNote: (fid: string) => invoke<NoteResponse>('get_note', { fid }),
+  setNote: (fid: string, note: string) => invoke<OkResponse>('set_note', { fid, note }),
+  getCurrentVideoMeta: () => invoke<VideoMetaResponse>('get_current_video_meta'),
+  getCurrentSubtitle: () => invoke<SubtitleResponse>('get_current_subtitle'),
+  getEmbeddedSubtitles: () => invoke<{ ok: boolean; tracks: SubtitleTrack[] }>('get_embedded_subtitles'),
+  extractEmbeddedSubtitle: (trackIndex: number) => invoke<SubtitleResponse>('extract_embedded_subtitle', { trackIndex }),
+  getAvailableSubtitles: () => invoke<AvailableSubsResponse>('get_available_subtitles'),
+  loadSidecarSubtitle: (filePath: string) => invoke<SubtitleResponse>('load_sidecar_subtitle', { filePath }),
+  chooseSubtitleFile: () => invoke<SubtitleResponse>('choose_subtitle_file'),
+  resetWatchProgress: () => invoke<OkResponse>('reset_watch_progress'),
+};
+```
+
+**Step 1: Write api.ts**
+
+**Step 2: Commit**
+
+```
+feat: create api.ts — typed Tauri invoke wrappers
+```
+
+---
+
+### Task 16: Create index.html with full markup
+
+**Files:**
+- Modify: `src/index.html`
+
+**Port from:** `tutorial.py` lines 2278-3747 (the HTML body markup, NOT the `<style>` or `<script>` tags)
+
+Extract the complete HTML structure from the Python string. This includes:
+- `#zoomRoot > .app` container
+- `.topbar` with brand, actions, zoom control, buttons
+- `#recentMenu` dropdown portal
+- `#contentGrid` with left panel (player), divider, right panel (playlist)
+- Video element, controls, seek bar, volume
+- Dock grid with notes and info panels
+- `#toast`, `#fancyTooltip`
+
+**Key changes from original:**
+- Remove `<style>` block (now in CSS files)
+- Remove `<script>` block (now in TS modules)
+- Add `<link rel="stylesheet" href="tutdock://localhost/fonts.css">`
+- Add `<link rel="stylesheet" href="tutdock://localhost/fa.css">`
+- Add `<script type="module" src="/main.ts"></script>`
+- All inline event handlers (`onclick`, `oninput`, etc.) will be removed — they'll be wired up in TypeScript modules instead
+
+**Step 1: Write complete index.html**
+
+**Step 2: Commit**
+
+```
+feat: extract HTML markup into index.html
+```
+
+---
+
+### Task 17: Create player.ts
+
+**Files:**
+- Create: `src/player.ts`
+
+**Port from:** `tutorial.py` JavaScript — all video element interaction code
+
+**Exports:**
+
+```typescript
+export function initPlayer(): void;           // Get DOM refs, wire event listeners
+export function loadVideo(index: number, timecode?: number, pauseAfterLoad?: boolean, autoplayOnLoad?: boolean): Promise<void>;
+export function togglePlay(): void;
+export function nextPrev(delta: number): void;
+export function updatePlayPauseIcon(): void;
+export function updateTimeReadout(): void;
+export function updateSeekFill(): void;
+export function updateVolFill(): void;
+export function updateVideoOverlay(): void;
+export function setVolume(vol: number): void;
+export function setPlaybackRate(rate: number): void;
+export function getCurrentIndex(): number;
+export function isPlaying(): boolean;
+export function getVideoElement(): HTMLVideoElement;
+
+// For the tick loop
+export function getVideoTime(): number;
+export function getVideoDuration(): number | null;
+```
+
+**Key change:** Video src becomes `tutdock://localhost/video/${index}` instead of `http://127.0.0.1:${port}/video/${index}`.
+
+**Step 1: Write player.ts**
+
+Port all video-related JavaScript functions. Wire up event listeners on the video element, seek bar, volume slider, play/pause button, prev/next buttons, fullscreen button.
+
+**Step 2: Commit**
+
+```
+feat: create player.ts — video playback controls
+```
+
+---
+
+### Task 18: Create playlist.ts
+
+**Files:**
+- Create: `src/playlist.ts`
+
+**Port from:** `tutorial.py` JavaScript — `renderList()`, drag-and-drop, scrollbar, tree SVG
+
+**Exports:**
+
+```typescript
+export function initPlaylist(): void;         // Wire scroll events, scrollbar
+export function renderList(): void;           // Build/rebuild playlist DOM
+export function updateScrollbar(): void;      // Update custom scrollbar thumb
+export function renderTreeSvg(item: VideoItem): string;  // SVG tree connectors
+export function highlightCurrent(index: number): void;   // Scroll to and highlight
+```
+
+The drag-and-drop reorder logic from the Python JS uses pointer events (pointerdown/pointermove/pointerup) on list items, with a gap-based reorder algorithm. Port this exactly.
+
+**Step 1: Write playlist.ts**
+
+**Step 2: Commit**
+
+```
+feat: create playlist.ts — playlist rendering and drag-and-drop
+```
+
+---
+
+### Task 19: Create subtitles.ts
+
+**Files:**
+- Create: `src/subtitles.ts`
+
+**Port from:** `tutorial.py` JavaScript — subtitle menu, track management
+
+**Exports:**
+
+```typescript
+export function initSubtitles(): void;
+export function refreshSubtitles(): Promise<void>;
+export function openSubsMenu(): Promise<void>;
+export function closeSubsMenu(): void;
+export function applySubtitle(url: string, label: string): void;
+export function clearSubtitles(): void;
+export function ensureSubtitleTrack(): HTMLTrackElement;
+```
+
+**Key change:** Subtitle URLs become `tutdock://localhost/sub/${libId}/${fid}` instead of HTTP.
+
+**Step 1: Write subtitles.ts**
+
+**Step 2: Commit**
+
+```
+feat: create subtitles.ts — subtitle menu and track management
+```
+
+---
+
+### Task 20: Create ui.ts
+
+**Files:**
+- Create: `src/ui.ts`
+
+**Port from:** `tutorial.py` JavaScript — zoom, splits, topbar, info panel, notes, toasts, recent menu, speed menu
+
+**Exports:**
+
+```typescript
+export function initUI(): void;                    // Wire all topbar/layout events
+export function applyZoom(z: number): void;
+export function applySplit(ratio: number): void;
+export function applyDockSplit(ratio: number): void;
+export function updateInfoPanel(): Promise<void>;
+export function updateOverall(): void;
+export function updateNowHeader(item: VideoItem | null): void;
+export function loadNoteForCurrent(): Promise<void>;
+export function notify(msg: string): void;          // Toast notification
+export function openRecentMenu(): Promise<void>;
+export function closeRecentMenu(): void;
+export function openSpeedMenu(): void;
+export function closeSpeedMenu(): void;
+export function updateSpeedIcon(rate: number): void;
+```
+
+This is the second-largest frontend module. It handles:
+- Zoom control (+/- buttons, click-to-reset)
+- Split ratio dragging (main divider + dock divider) via pointerdown/pointermove/pointerup
+- Always-on-top toggle switch
+- Autoplay toggle switch
+- Open folder button (split button with dropdown for recents)
+- Recent folders menu (position, open, close, click, remove)
+- Speed control menu
+- Info panel (all metadata key-value pairs)
+- Notes textarea with debounced auto-save (350ms timeout)
+- Toast notifications
+- Reset progress button
+- Reload button
+
+**Step 1: Write ui.ts**
+
+**Step 2: Commit**
+
+```
+feat: create ui.ts — layout, panels, topbar, notes, toasts
+```
+
+---
+
+### Task 21: Create tooltips.ts
+
+**Files:**
+- Create: `src/tooltips.ts`
+
+**Port from:** `tutorial.py` JavaScript — the `initTooltips()` IIFE (lines 5124-5218)
+
+**Exports:**
+
+```typescript
+export function initTooltips(): void;
+```
+
+Implements:
+- Event delegation on mouseover/mouseout for `[data-tip]` elements
+- 250ms show delay (instant if tooltip already visible)
+- 80ms hide delay
+- Zoom-aware positioning (reads CSS `--zoom` variable)
+- Viewport-clamped positioning (stays within window bounds)
+
+**Step 1: Write tooltips.ts — direct port of the IIFE**
+
+**Step 2: Commit**
+
+```
+feat: create tooltips.ts — zoom-aware tooltip system
+```
+
+---
+
+### Task 22: Create main.ts — boot and tick loop
+
+**Files:**
+- Modify: `src/main.ts`
+
+**Port from:** `tutorial.py` JavaScript — `boot()`, `tick()`, `pywebviewready` event, all initialization
+
+**This is the orchestrator module. It:**
+
+1. Imports all CSS files
+2. Imports and calls init functions from all modules
+3. Implements `boot()`:
+   - Call `api.getPrefs()`, apply zoom/split/dock ratios
+   - Call `api.getLibrary()` — if ok, call `onLibraryLoaded()`
+   - Set up Tauri event listeners for ffmpeg download progress
+4. Implements `onLibraryLoaded(info)`:
+   - Set volume, playback rate, autoplay from library state
+   - Call `renderList()`
+   - Call `loadVideo()` for current index
+   - Call `updateOverall()`, `updateInfoPanel()`
+5. Implements `tick()` — 250ms interval:
+   - If playing: call `api.tickProgress()` every ~1s
+   - Refresh library info every ~3s (to pick up duration scan updates)
+   - Call `api.saveWindowState()` periodically
+6. Implements `chooseFolder()` — calls `api.selectFolder()` then `onLibraryLoaded()`
+7. Implements `reloadLibrary()` — calls `api.getLibrary()` then re-renders
+8. Wires global keyboard shortcuts
+
+**No `pywebviewready` event needed** — Tauri's frontend JS loads and runs immediately since the webview is local. Just call `boot()` on DOMContentLoaded (or at module top level since Vite modules are deferred).
+
+**Step 1: Write main.ts with boot, tick, and all initialization**
+
+**Step 2: Commit**
+
+```
+feat: create main.ts — boot sequence, tick loop, global wiring
+```
+
+---
+
+## Phase 5: Integration and Build
+
+### Task 23: Integration verification
+
+**Step 1: Run full dev build**
+
+Run: `npm run tauri dev`
+
+**Step 2: Verify each feature works:**
+
+Checklist:
+- [ ] App window opens with correct size
+- [ ] Dark theme with correct styling
+- [ ] Open folder dialog works
+- [ ] Video plays with seek support
+- [ ] Playlist renders with tree structure
+- [ ] Progress tracking saves and restores
+- [ ] Notes save and load
+- [ ] Volume/speed/autoplay controls work
+- [ ] Subtitle loading (sidecar, embedded)
+- [ ] Zoom control works
+- [ ] Split ratio dragging works
+- [ ] Always-on-top toggle works
+- [ ] Recent folders menu works
+- [ ] Drag-and-drop reorder works
+- [ ] Tooltips appear on hover
+- [ ] Toast notifications show
+- [ ] Info panel shows metadata
+- [ ] Window position/size saves on close
+- [ ] ffmpeg download triggers if not found
+
+**Step 3: Fix any integration issues found**
+
+**Step 4: Commit**
+
+```
+fix: integration fixes from end-to-end testing
+```
+
+---
+
+### Task 24: Portable release build
+
+**Step 1: Build the release exe**
+
+Run: `npm run tauri build`
+
+This produces `src-tauri/target/release/TutorialDock.exe`.
+
+**Step 2: Test portability**
+
+1. Copy `TutorialDock.exe` to a fresh directory
+2. Run it
+3. Verify `state/` directory is created next to exe
+4. Verify all functionality works
+5. Close and reopen — verify state persists
+6. Move the exe + state/ to another location — verify it still works
+
+**Step 3: Verify no writes outside exe directory**
+
+Check that nothing was written to:
+- `%APPDATA%`
+- `%LOCALAPPDATA%`
+- Registry
+- Any other system location
+
+**Step 4: Commit**
+
+```
+feat: verified portable release build
+```
+
+---
+
+## Dependency Graph
+
+```
+Task 1 (scaffold)
+  ├── Task 2 (utils.rs)
+  ├── Task 3 (state.rs)
+  │     ├── Task 4 (prefs.rs)
+  │     └── Task 5 (recents.rs)
+  ├── Task 6 (ffmpeg.rs) ← depends on utils
+  ├── Task 7 (subtitles.rs) ← depends on utils
+  ├── Task 8 (fonts.rs) ← depends on state
+  ├── Task 9 (library.rs) ← depends on utils, state, ffmpeg, subtitles
+  ├── Task 10 (video_protocol.rs) ← depends on library
+  ├── Task 11 (commands.rs) ← depends on all Rust modules
+  └── Task 12 (main.rs wiring) ← depends on all Rust modules
+        ├── Task 13 (CSS extraction) ← independent of Rust
+        ├── Task 14 (types.ts)
+        ├── Task 15 (api.ts)
+        ├── Task 16 (index.html)
+        ├── Task 17 (player.ts) ← depends on api, types
+        ├── Task 18 (playlist.ts) ← depends on api, types
+        ├── Task 19 (subtitles.ts) ← depends on api, types
+        ├── Task 20 (ui.ts) ← depends on api, types
+        ├── Task 21 (tooltips.ts) ← independent
+        └── Task 22 (main.ts) ← depends on all TS modules
+              ├── Task 23 (integration)
+              └── Task 24 (release build)
+```
+
+## Notes for the Implementing Engineer
+
+1. **Backward compatibility**: The Rust backend MUST produce identical JSON state files and file fingerprints as the Python version. Users should be able to switch from the Python app to the Tauri app and keep their progress. Test fingerprint and library ID generation against the Python output.
+
+2. **Portability is non-negotiable**: Everything in `state/` next to the exe. No `%APPDATA%`, no registry, no installer. Override any Tauri defaults that write elsewhere.
+
+3. **The CSS must be pixel-identical**: Don't "improve" or reformat the CSS. Extract it verbatim. Any visual difference is a bug.
+
+4. **The custom protocol must handle range requests correctly**: The HTML5 `<video>` element relies on this for seeking. Test with large video files (>1GB) to ensure streaming works.
+
+5. **Thread safety**: The Library struct is behind a `Mutex`. Keep lock durations short. The background duration scanner needs careful lock management — lock, check if duration needed, unlock, compute duration, lock, update state, unlock.
+
+6. **The "once finished, always finished" rule**: If a video's `finished` flag is `true`, it must never be set back to `false`. This is a key UX invariant from the original app.
diff --git a/scripts/rename_folder.py b/scripts/rename_folder.py
new file mode 100644
index 0000000..7bb0d69
--- /dev/null
+++ b/scripts/rename_folder.py
@@ -0,0 +1,33 @@
+import os
+
+
+def rename_folder():
+    # Get the current working directory
+    current_dir = os.getcwd()
+
+    print(f"Current directory: {current_dir}")
+
+    # Prompt user for the current folder name and new folder name
+    current_name = input("Enter the current folder name to rename: ")
+    new_name = input("Enter the new folder name: ")
+
+    # Construct full paths
+    current_path = os.path.join(current_dir, current_name)
+    new_path = os.path.join(current_dir, new_name)
+
+    try:
+        # Rename the folder
+        os.rename(current_path, new_path)
+        print(f"Folder '{current_name}' renamed to '{new_name}' successfully.")
+    except FileNotFoundError:
+        print(f"Error: Folder '{current_name}' does not exist in {current_dir}.")
+    except PermissionError:
+        print(
+            "Error: Permission denied. Try running the script with administrator privileges."
+        )
+    except Exception as e:
+        print(f"An unexpected error occurred: {e}")
+
+
+if __name__ == "__main__":
+    rename_folder()
diff --git a/tutorial.py b/tutorial.py
new file mode 100644
index 0000000..7828f91
--- /dev/null
+++ b/tutorial.py
@@ -0,0 +1,5282 @@
+#!/usr/bin/env python3
+"""TutorialDock - A video tutorial library manager with progress tracking."""
+
+import hashlib
+import json
+import mimetypes
+import os
+import re
+import shutil
+import socket
+import subprocess
+import threading
+import time
+from pathlib import Path
+from typing import Any, Callable, Dict, List, Optional, Tuple
+from urllib.parse import urlparse
+from urllib.request import Request, urlopen
+
+from flask import Flask, Response, abort, request, send_file
+
+# =============================================================================
+# Configuration and Constants
+# =============================================================================
+
+APP_DIR = Path(__file__).resolve().parent
+STATE_DIR = APP_DIR / "state"
+STATE_DIR.mkdir(parents=True, exist_ok=True)
+
+WEBVIEW_PROFILE_DIR = STATE_DIR / "webview_profile"
+WEBVIEW_PROFILE_DIR.mkdir(parents=True, exist_ok=True)
+
+FONTS_DIR = STATE_DIR / "fonts"
+FONTS_DIR.mkdir(parents=True, exist_ok=True)
+FONTS_CSS_PATH = FONTS_DIR / "fonts.css"
+FONTS_META_PATH = FONTS_DIR / "fonts_meta.json"
+
+FA_DIR = STATE_DIR / "fontawesome"
+FA_DIR.mkdir(parents=True, exist_ok=True)
+FA_WEBFONTS_DIR = FA_DIR / "webfonts"
+FA_WEBFONTS_DIR.mkdir(parents=True, exist_ok=True)
+FA_CSS_PATH = FA_DIR / "fa.css"
+FA_META_PATH = FA_DIR / "fa_meta.json"
+
+SUBS_DIR = STATE_DIR / "subtitles"
+SUBS_DIR.mkdir(parents=True, exist_ok=True)
+
+RECENTS_PATH = STATE_DIR / "recent_folders.json"
+RECENTS_MAX = 50
+
+# Register additional MIME types
+mimetypes.add_type("font/woff2", ".woff2")
+mimetypes.add_type("font/woff", ".woff")
+mimetypes.add_type("font/ttf", ".ttf")
+mimetypes.add_type("application/vnd.ms-fontobject", ".eot")
+mimetypes.add_type("image/svg+xml", ".svg")
+mimetypes.add_type("text/vtt", ".vtt")
+
+if os.name == "nt":
+    os.environ["WEBVIEW2_USER_DATA_FOLDER"] = str(WEBVIEW_PROFILE_DIR)
+
+import webview  # noqa: E402  # Must import after setting env vars
+
+# Supported file extensions
+VIDEO_EXTS: set[str] = {
+    ".mp4", ".m4v", ".mov", ".webm", ".mkv",
+    ".avi", ".mpg", ".mpeg", ".m2ts", ".mts",
+    ".ogv"
+}
+SUB_EXTS: set[str] = {".vtt", ".srt"}
+
+BACKUP_COUNT: int = 8
+HOST: str = "127.0.0.1"
+PREFS_PATH: Path = STATE_DIR / "prefs.json"
+
+app = Flask(__name__)
+
+# =============================================================================
+# Utility Functions
+# =============================================================================
+
+
+def _subprocess_no_window_kwargs() -> dict[str, Any]:
+    """Return subprocess kwargs to hide console windows on Windows."""
+    if os.name != "nt":
+        return {}
+    si = subprocess.STARTUPINFO()
+    si.dwFlags |= subprocess.STARTF_USESHOWWINDOW
+    return {"startupinfo": si, "creationflags": subprocess.CREATE_NO_WINDOW}
+
+def clamp(v: float, a: float, b: float) -> float:
+    """Clamp value v to the range [a, b]."""
+    return max(a, min(b, v))
+
+
+def atomic_write_json(path: Path, data: Dict[str, Any], backup_count: int = BACKUP_COUNT) -> None:
+    """
+    Write JSON data to a file atomically with backup rotation.
+    
+    Creates rolling backups (.bak1 through .bakN) and a .lastgood copy
+    for crash recovery.
+    """
+    path.parent.mkdir(parents=True, exist_ok=True)
+    tmp = path.with_suffix(path.suffix + ".tmp")
+    payload = json.dumps(data, ensure_ascii=False, indent=2)
+
+    if path.exists():
+        # Rotate existing backups
+        for i in range(backup_count, 0, -1):
+            src = path.with_suffix(path.suffix + f".bak{i}")
+            dst = path.with_suffix(path.suffix + f".bak{i+1}")
+            if src.exists():
+                try:
+                    if dst.exists():
+                        dst.unlink()
+                    src.rename(dst)
+                except OSError:
+                    pass
+        
+        # Move current to .bak1
+        bak1 = path.with_suffix(path.suffix + ".bak1")
+        try:
+            if bak1.exists():
+                bak1.unlink()
+            path.rename(bak1)
+        except OSError:
+            pass
+
+    # Write atomically via tmp file
+    tmp.write_text(payload, encoding="utf-8")
+    tmp.replace(path)
+
+    # Keep a lastgood copy for recovery
+    try:
+        lastgood = path.with_suffix(path.suffix + ".lastgood")
+        lastgood.write_text(payload, encoding="utf-8")
+    except OSError:
+        pass
+
+
+def load_json_with_fallbacks(path: Path) -> Optional[Dict[str, Any]]:
+    """
+    Load JSON from path, falling back to backups if primary is corrupted.
+    
+    Tries: path -> .lastgood -> .bak1 -> .bak2 -> ...
+    """
+    candidates = [path, path.with_suffix(path.suffix + ".lastgood")]
+    for i in range(1, BACKUP_COUNT + 3):
+        candidates.append(path.with_suffix(path.suffix + f".bak{i}"))
+    
+    for p in candidates:
+        if p.exists():
+            try:
+                return json.loads(p.read_text(encoding="utf-8"))
+            except (json.JSONDecodeError, OSError):
+                continue
+    return None
+
+
+def is_within_root(root: Path, target: Path) -> bool:
+    """Check if target path is within the root directory (prevents path traversal)."""
+    try:
+        root = root.resolve()
+        target = target.resolve()
+        return str(target).startswith(str(root) + os.sep) or target == root
+    except OSError:
+        return False
+
+def truthy(v: Any) -> bool:
+    """Convert various types to boolean (handles string 'true', 'yes', '1', etc.)."""
+    if isinstance(v, bool):
+        return v
+    if isinstance(v, (int, float)):
+        return v != 0
+    if isinstance(v, str):
+        return v.strip().lower() in {"1", "true", "yes", "y", "on"}
+    return False
+
+
+def pick_free_port(host: str = HOST) -> int:
+    """Find and return an available TCP port on the specified host."""
+    with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+        s.bind((host, 0))
+        return s.getsockname()[1]
+
+
+def folder_display_name(path_str: str) -> str:
+    """Get a display-friendly name for a folder path."""
+    try:
+        p = Path(path_str)
+        return p.name or str(p)
+    except (ValueError, OSError):
+        return path_str
+
+
+def _deduplicate_list(items: List[str]) -> List[str]:
+    """Remove duplicates from a list while preserving order."""
+    seen: set[str] = set()
+    result: List[str] = []
+    for item in items:
+        if isinstance(item, str) and item.strip():
+            s = item.strip()
+            if s not in seen:
+                result.append(s)
+                seen.add(s)
+    return result
+
+
+def load_recents() -> List[str]:
+    """Load the list of recently opened folders."""
+    data = load_json_with_fallbacks(RECENTS_PATH)
+    if not isinstance(data, dict):
+        return []
+    items = data.get("items", [])
+    if not isinstance(items, list):
+        return []
+    return _deduplicate_list(items)[:RECENTS_MAX]
+
+
+def save_recents(paths: List[str]) -> None:
+    """Save the list of recently opened folders."""
+    cleaned = _deduplicate_list(paths)[:RECENTS_MAX]
+    atomic_write_json(RECENTS_PATH, {
+        "version": 2,
+        "updated_at": int(time.time()),
+        "items": cleaned
+    })
+
+
+def push_recent(path_str: str) -> None:
+    """Add a folder to the top of the recent folders list."""
+    paths = load_recents()
+    path_str = path_str.strip()
+    paths = [p for p in paths if p != path_str]
+    paths.insert(0, path_str)
+    save_recents(paths)
+
+# Compiled regex patterns (compiled once for efficiency)
+CSS_URL_RE = re.compile(r"url\((https://[^)]+)\)\s*format\('([^']+)'\)")
+
+
+def _http_get_text(url: str, timeout: int = 20) -> str:
+    """Fetch text content from a URL."""
+    req = Request(url, headers={"User-Agent": "Mozilla/5.0"})
+    with urlopen(req, timeout=timeout) as r:
+        return r.read().decode("utf-8", errors="replace")
+
+
+def _http_get_bytes(url: str, timeout: int = 30) -> bytes:
+    """Fetch binary content from a URL."""
+    req = Request(url, headers={"User-Agent": "Mozilla/5.0"})
+    with urlopen(req, timeout=timeout) as r:
+        return r.read()
+
+
+def _safe_filename_from_url(u: str) -> str:
+    """Generate a safe local filename from a URL with a hash for uniqueness."""
+    p = urlparse(u)
+    base = Path(p.path).name or "font.woff2"
+    url_hash = hashlib.sha256(u.encode("utf-8")).hexdigest()[:10]
+    if "." not in base:
+        base += ".woff2"
+    stem, suffix = Path(base).stem, Path(base).suffix
+    return f"{stem}-{url_hash}{suffix}"
+
+
+def ensure_google_fonts_local() -> None:
+    """Download and cache Google Fonts locally for offline use."""
+    wanted = {
+        "Sora": "https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&display=swap",
+        "Manrope": "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap",
+        "IBM Plex Mono": "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap",
+    }
+    
+    meta = load_json_with_fallbacks(FONTS_META_PATH) or {}
+    if (FONTS_CSS_PATH.exists() 
+            and isinstance(meta, dict) 
+            and meta.get("ok") is True 
+            and meta.get("version") == 7):
+        return
+
+    combined_css_parts: List[str] = []
+    downloaded: Dict[str, int] = {}
+    ok = True
+    errors: List[str] = []
+
+    for family, css_url in wanted.items():
+        try:
+            css = _http_get_text(css_url)
+            
+            def replace_match(m: re.Match) -> str:
+                url, fmt = m.group(1), m.group(2)
+                if fmt.lower() != "woff2":
+                    return m.group(0)
+                fn = _safe_filename_from_url(url)
+                local_path = FONTS_DIR / fn
+                if not local_path.exists():
+                    data = _http_get_bytes(url)
+                    local_path.write_bytes(data)
+                    downloaded[fn] = len(data)
+                return f"url(/fonts/{fn}) format('woff2')"
+            
+            css2 = CSS_URL_RE.sub(replace_match, css)
+            combined_css_parts.append(css2.strip())
+        except Exception as e:
+            ok = False
+            errors.append(f"{family}: {e!s}")
+
+    combined_css = "\n\n".join(combined_css_parts).strip()
+    try:
+        FONTS_CSS_PATH.write_text(combined_css, encoding="utf-8")
+    except OSError as e:
+        ok = False
+        errors.append(f"write fonts.css: {e!s}")
+
+    atomic_write_json(FONTS_META_PATH, {
+        "version": 7,
+        "ok": ok,
+        "updated_at": int(time.time()),
+        "downloaded_files": downloaded,
+        "errors": errors
+    })
+
+
+FA_URL_RE = re.compile(r"url\(([^)]+)\)")
+
+def ensure_fontawesome_local() -> None:
+    """Download and cache Font Awesome locally for offline use."""
+    meta = load_json_with_fallbacks(FA_META_PATH) or {}
+    if (FA_CSS_PATH.exists() 
+            and isinstance(meta, dict) 
+            and meta.get("ok") is True 
+            and meta.get("version") == 3):
+        return
+
+    ok = True
+    errors: List[str] = []
+    downloaded: Dict[str, int] = {}
+    css_url = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    
+    try:
+        css = _http_get_text(css_url, timeout=25)
+    except Exception as e:
+        ok = False
+        errors.append(f"download fa css: {e!s}")
+        css = ""
+
+    def _clean_url(u: str) -> str:
+        """Normalize a URL from CSS to an absolute URL."""
+        u = u.strip().strip("'\"")
+        if u.startswith("data:"):
+            return u
+        if u.startswith("//"):
+            return "https:" + u
+        if u.startswith(("http://", "https://")):
+            return u
+        return "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/" + u.lstrip("./").replace("../", "")
+
+    def repl(m: re.Match) -> str:
+        nonlocal ok
+        raw = m.group(1)
+        u = _clean_url(raw)
+        if u.startswith("data:"):
+            return m.group(0)
+        fn = Path(urlparse(u).path).name
+        if not fn:
+            return m.group(0)
+        local_path = FA_WEBFONTS_DIR / fn
+        if not local_path.exists():
+            try:
+                data = _http_get_bytes(u, timeout=30)
+                local_path.write_bytes(data)
+                downloaded[fn] = len(data)
+            except Exception as e:
+                ok = False
+                errors.append(f"download {fn}: {e!s}")
+                return m.group(0)
+        return f"url(/fa/webfonts/{fn})"
+
+    css2 = FA_URL_RE.sub(repl, css)
+    try:
+        FA_CSS_PATH.write_text(css2, encoding="utf-8")
+    except OSError as e:
+        ok = False
+        errors.append(f"write fa.css: {e!s}")
+
+    atomic_write_json(FA_META_PATH, {
+        "version": 3,
+        "ok": ok,
+        "updated_at": int(time.time()),
+        "downloaded_files": downloaded,
+        "errors": errors,
+        "source_css": css_url
+    })
+
+
+# =============================================================================
+# File and String Processing
+# =============================================================================
+
+_NUM_SPLIT_RE = re.compile(r"(\d+)")
+
+
+def natural_key(s: str) -> List[Any]:
+    """
+    Generate a sort key for natural sorting (e.g., '2' before '10').
+    
+    Splits string into numeric and non-numeric parts, converting numeric
+    parts to integers for proper ordering.
+    """
+    parts = _NUM_SPLIT_RE.split(s)
+    return [int(p) if p.isdigit() else p.casefold() for p in parts]
+
+
+_LEADING_INDEX_RE = re.compile(r"^\s*(?:\(?\s*)?(?P<num>\d+)(?:\s*[.\-_]\s*\d+)*(?:\s*[.)\]-]\s*|\s+)")
+
+# Words that should remain lowercase in title case (except at start)
+_SMALL_WORDS: set[str] = {
+    "a", "an", "the", "and", "or", "but", "for", "nor", "as", "at",
+    "by", "in", "of", "on", "per", "to", "vs", "via", "with", "into", "from"
+}
+
+
+def _smart_title_case(text: str) -> str:
+    """Convert text to title case, keeping small words lowercase (except at start)."""
+    words = re.split(r"(\s+)", text.strip())
+    out: List[str] = []
+    for i, w in enumerate(words):
+        if w.isspace():
+            out.append(w)
+            continue
+        # Preserve words with digits or all-caps acronyms
+        if any(ch.isdigit() for ch in w) or w.isupper():
+            out.append(w)
+            continue
+        lw = w.lower()
+        # First word always capitalized, small words stay lowercase elsewhere
+        if i != 0 and lw in _SMALL_WORDS:
+            out.append(lw)
+        else:
+            out.append(lw[:1].upper() + lw[1:])
+    return "".join(out).strip()
+
+def pretty_title_from_filename(filename: str) -> str:
+    """
+    Convert a filename to a human-readable title.
+    
+    Removes leading indices, underscores, and applies smart title case.
+    Example: '01_introduction_to_python.mp4' -> 'Introduction to Python'
+    """
+    base = Path(filename).stem
+    # Replace underscores with spaces
+    base = re.sub(r"[_]+", " ", base)
+    base = re.sub(r"\s+", " ", base).strip()
+    # Remove leading index numbers (e.g., "01.", "1)", "(2)")
+    m = _LEADING_INDEX_RE.match(base)
+    if m:
+        base = base[m.end():].strip()
+    # Remove leading punctuation
+    base = re.sub(r"^\s*[-–—:.\)]\s*", "", base).strip()
+    base = re.sub(r"\s+", " ", base).strip()
+    # Fall back to original stem if nothing left
+    if not base:
+        base = Path(filename).stem
+    return _smart_title_case(base)
+
+
+def _windows_where(exe_name: str) -> Optional[str]:
+    """Find an executable using Windows 'where' command."""
+    try:
+        out = subprocess.check_output(
+            ["where", exe_name],
+            stderr=subprocess.STDOUT,
+            text=True,
+            **_subprocess_no_window_kwargs()
+        )
+        for line in out.splitlines():
+            line = line.strip()
+            if line and Path(line).exists():
+                return line
+    except (subprocess.SubprocessError, OSError):
+        pass
+    return None
+
+
+def find_ffprobe_ffmpeg() -> Tuple[Optional[str], Optional[str]]:
+    """
+    Locate ffprobe and ffmpeg executables.
+    
+    Searches in PATH, then Windows 'where', then local app directory.
+    """
+    ffprobe = shutil.which("ffprobe")
+    ffmpeg = shutil.which("ffmpeg")
+    
+    # Try Windows 'where' command
+    if os.name == "nt":
+        if not ffprobe:
+            ffprobe = _windows_where("ffprobe.exe") or _windows_where("ffprobe")
+        if not ffmpeg:
+            ffmpeg = _windows_where("ffmpeg.exe") or _windows_where("ffmpeg")
+    
+    # Check for local copies in app directory
+    if not ffprobe:
+        exe_name = "ffprobe.exe" if os.name == "nt" else "ffprobe"
+        cand = APP_DIR / exe_name
+        if cand.exists():
+            ffprobe = str(cand)
+    if not ffmpeg:
+        exe_name = "ffmpeg.exe" if os.name == "nt" else "ffmpeg"
+        cand = APP_DIR / exe_name
+        if cand.exists():
+            ffmpeg = str(cand)
+    
+    return ffprobe, ffmpeg
+
+
+def duration_seconds(
+    path: Path,
+    ffprobe_path: Optional[str],
+    ffmpeg_path: Optional[str]
+) -> Optional[float]:
+    """Get video duration in seconds using ffprobe or ffmpeg."""
+    # Try ffprobe first (more reliable)
+    if ffprobe_path:
+        try:
+            cmd = [
+                ffprobe_path, "-v", "error",
+                "-show_entries", "format=duration",
+                "-of", "default=nw=1:nk=1",
+                str(path)
+            ]
+            out = subprocess.check_output(
+                cmd,
+                stderr=subprocess.STDOUT,
+                text=True,
+                timeout=20,
+                **_subprocess_no_window_kwargs()
+            ).strip()
+            if out:
+                d = float(out)
+                if d > 0:
+                    return d
+        except (subprocess.SubprocessError, ValueError, OSError):
+            pass
+    
+    # Fall back to parsing ffmpeg stderr
+    if ffmpeg_path:
+        try:
+            p = subprocess.run(
+                [ffmpeg_path, "-hide_banner", "-i", str(path)],
+                stdout=subprocess.PIPE,
+                stderr=subprocess.PIPE,
+                text=True,
+                timeout=20,
+                **_subprocess_no_window_kwargs()
+            )
+            err = p.stderr or ""
+            marker = "Duration:"
+            idx = err.find(marker)
+            if idx != -1:
+                s = err[idx + len(marker):].strip()
+                timepart = s.split(",")[0].strip()
+                hh, mm, ss = timepart.split(":")
+                total = int(hh) * 3600 + int(mm) * 60 + float(ss)
+                if total > 0:
+                    return float(total)
+        except (subprocess.SubprocessError, ValueError, OSError):
+            pass
+    
+    return None
+
+
+def ffprobe_video_metadata(path: Path, ffprobe_path: Optional[str]) -> Optional[Dict[str, Any]]:
+    """Extract detailed video metadata using ffprobe, including subtitle tracks."""
+    if not ffprobe_path:
+        return None
+    
+    try:
+        cmd = [
+            ffprobe_path, "-v", "error",
+            "-print_format", "json",
+            "-show_streams", "-show_format",
+            str(path)
+        ]
+        out = subprocess.check_output(
+            cmd,
+            stderr=subprocess.STDOUT,
+            text=True,
+            timeout=25,
+            **_subprocess_no_window_kwargs()
+        )
+        data = json.loads(out)
+        streams = data.get("streams", [])
+        fmt = data.get("format", {})
+        
+        if not isinstance(streams, list):
+            streams = []
+        
+        meta: Dict[str, Any] = {}
+        video_stream: Optional[Dict] = None
+        audio_stream: Optional[Dict] = None
+        subtitle_tracks: List[Dict[str, Any]] = []
+        
+        # Find first video/audio streams and all subtitle streams
+        for idx, s in enumerate(streams):
+            if not isinstance(s, dict):
+                continue
+            codec_type = s.get("codec_type")
+            if codec_type == "video" and video_stream is None:
+                video_stream = s
+            elif codec_type == "audio" and audio_stream is None:
+                audio_stream = s
+            elif codec_type == "subtitle":
+                # Extract subtitle track info
+                tags = s.get("tags", {})
+                if not isinstance(tags, dict):
+                    tags = {}
+                sub_info = {
+                    "index": s.get("index", idx),
+                    "codec": s.get("codec_name", "unknown"),
+                    "language": tags.get("language", tags.get("LANGUAGE", "")),
+                    "title": tags.get("title", tags.get("TITLE", "")),
+                }
+                subtitle_tracks.append(sub_info)
+        
+        # Extract video metadata
+        if video_stream:
+            meta["v_codec"] = video_stream.get("codec_name")
+            meta["width"] = video_stream.get("width")
+            meta["height"] = video_stream.get("height")
+            
+            # Parse frame rate
+            frame_rate = video_stream.get("r_frame_rate") or video_stream.get("avg_frame_rate")
+            if isinstance(frame_rate, str) and "/" in frame_rate:
+                try:
+                    num, den = frame_rate.split("/", 1)
+                    fps = float(num) / float(den)
+                    if fps > 0:
+                        meta["fps"] = fps
+                except (ValueError, ZeroDivisionError):
+                    pass
+            
+            # Video bitrate
+            vb = video_stream.get("bit_rate")
+            if vb is not None:
+                try:
+                    meta["v_bitrate"] = int(vb)
+                except ValueError:
+                    pass
+            
+            # Pixel format and color info
+            meta["pix_fmt"] = video_stream.get("pix_fmt")
+            meta["color_space"] = video_stream.get("color_space")
+        
+        # Extract audio metadata
+        if audio_stream:
+            meta["a_codec"] = audio_stream.get("codec_name")
+            meta["channels"] = audio_stream.get("channels")
+            meta["sample_rate"] = audio_stream.get("sample_rate")
+            ab = audio_stream.get("bit_rate")
+            if ab is not None:
+                try:
+                    meta["a_bitrate"] = int(ab)
+                except ValueError:
+                    pass
+        
+        # Add subtitle tracks
+        if subtitle_tracks:
+            meta["subtitle_tracks"] = subtitle_tracks
+        
+        # Extract format metadata
+        if isinstance(fmt, dict):
+            if fmt.get("bit_rate") is not None:
+                try:
+                    meta["container_bitrate"] = int(fmt.get("bit_rate"))
+                except ValueError:
+                    pass
+            if fmt.get("duration") is not None:
+                try:
+                    meta["duration"] = float(fmt.get("duration"))
+                except ValueError:
+                    pass
+            meta["format_name"] = fmt.get("format_name")
+            
+            # Extract container tags (title, encoder, etc)
+            ftags = fmt.get("tags", {})
+            if isinstance(ftags, dict):
+                if ftags.get("title"):
+                    meta["container_title"] = ftags.get("title")
+                if ftags.get("encoder"):
+                    meta["encoder"] = ftags.get("encoder")
+        
+        return meta if meta else None
+    except (subprocess.SubprocessError, json.JSONDecodeError, OSError):
+        return None
+
+def file_fingerprint(path: Path) -> str:
+    """
+    Generate a content-based fingerprint that survives file renames/moves.
+    
+    Uses sha256 of: file size + first 256KB + last 256KB
+    This allows identifying the same video even if renamed or moved.
+    """
+    CHUNK_SIZE = 256 * 1024  # 256KB
+    
+    try:
+        size = path.stat().st_size
+    except OSError:
+        size = 0
+
+    h = hashlib.sha256()
+    h.update(b"VIDFIDv1\0")
+    h.update(str(size).encode("ascii", errors="ignore"))
+    h.update(b"\0")
+
+    try:
+        with path.open("rb") as f:
+            # Read head
+            head = f.read(CHUNK_SIZE)
+            h.update(head)
+            # Read tail if file is large enough
+            if size > CHUNK_SIZE:
+                try:
+                    f.seek(max(0, size - CHUNK_SIZE))
+                    tail = f.read(CHUNK_SIZE)
+                    h.update(tail)
+                except OSError:
+                    pass
+    except OSError:
+        pass
+
+    return h.hexdigest()[:20]
+
+
+def compute_library_id_from_fids(fids: List[str]) -> str:
+    """
+    Compute a stable library ID from a list of file fingerprints.
+    
+    The same set of files will always produce the same library ID,
+    regardless of file order.
+    """
+    # Filter and sort for deterministic output
+    valid_fids = sorted(fid for fid in fids if isinstance(fid, str) and fid)
+    
+    h = hashlib.sha256()
+    h.update(b"LIBFIDv2\0")
+    for fid in valid_fids:
+        h.update(fid.encode("ascii", errors="ignore"))
+        h.update(b"\n")
+    return h.hexdigest()[:16]
+
+def srt_to_vtt_bytes(srt_text: str) -> bytes:
+    """
+    Convert SRT subtitle format to WebVTT format.
+    
+    Handles BOM removal and timestamp format conversion (comma -> dot).
+    """
+    # Remove BOM if present
+    text = srt_text.replace("\ufeff", "")
+    lines = text.splitlines()
+    out: List[str] = ["WEBVTT", ""]
+    
+    i = 0
+    while i < len(lines):
+        line = lines[i].strip("\r\n")
+        
+        # Skip empty lines
+        if not line.strip():
+            out.append("")
+            i += 1
+            continue
+
+        # Skip cue index numbers (e.g., "1", "2", "3")
+        if re.fullmatch(r"\d+", line.strip()):
+            i += 1
+            if i >= len(lines):
+                break
+            line = lines[i].strip("\r\n")
+
+        # Process timestamp lines
+        if "-->" in line:
+            # Convert SRT timestamp format (comma) to VTT format (dot)
+            line = line.replace(",", ".")
+            out.append(line)
+            i += 1
+            
+            # Collect subtitle text until empty line
+            while i < len(lines):
+                t = lines[i].rstrip("\r\n")
+                if not t.strip():
+                    out.append("")
+                    i += 1
+                    break
+                out.append(t)
+                i += 1
+        else:
+            i += 1
+
+    return ("\n".join(out).strip() + "\n").encode("utf-8")
+
+
+# =============================================================================
+# State Management Classes
+# =============================================================================
+
+
+class Prefs:
+    """Thread-safe preferences manager with persistent storage."""
+    
+    DEFAULT_PREFS: Dict[str, Any] = {
+        "version": 19,
+        "ui_zoom": 1.0,
+        "split_ratio": 0.62,
+        "dock_ratio": 0.62,
+        "always_on_top": False,
+        "window": {"width": 1320, "height": 860, "x": None, "y": None},
+        "last_folder_path": None,
+        "last_library_id": None,
+    }
+    
+    def __init__(self) -> None:
+        self.lock = threading.Lock()
+        self.data: Dict[str, Any] = dict(self.DEFAULT_PREFS)
+        self.data["window"] = dict(self.DEFAULT_PREFS["window"])
+        
+        # Load saved preferences
+        loaded = load_json_with_fallbacks(PREFS_PATH)
+        if isinstance(loaded, dict):
+            # Handle window dict specially to merge rather than replace
+            win = loaded.get("window")
+            if isinstance(win, dict):
+                self.data["window"].update(win)
+            # Update other preferences
+            for k, v in loaded.items():
+                if k != "window":
+                    self.data[k] = v
+
+    def get(self) -> Dict[str, Any]:
+        """Get a deep copy of current preferences."""
+        with self.lock:
+            # Deep copy via JSON round-trip
+            return json.loads(json.dumps(self.data))
+
+    def update(self, patch: Dict[str, Any]) -> None:
+        """Update preferences with a partial dict and save to disk."""
+        with self.lock:
+            # Handle window dict specially
+            if "window" in patch and isinstance(patch["window"], dict):
+                self.data.setdefault("window", {})
+                if not isinstance(self.data["window"], dict):
+                    self.data["window"] = {}
+                self.data["window"].update(patch["window"])
+                patch = {k: v for k, v in patch.items() if k != "window"}
+            
+            self.data.update(patch)
+            self.data["updated_at"] = int(time.time())
+            atomic_write_json(PREFS_PATH, self.data)
+
+PREFS = Prefs()
+
+
+class Library:
+    """
+    Manages a video library with progress tracking, ordering, and metadata.
+    
+    Thread-safe for concurrent access from Flask routes and background scanners.
+    State is persisted to disk and survives application restarts.
+    """
+    
+    def __init__(self) -> None:
+        # Library contents
+        self.root: Optional[Path] = None
+        self.files: List[Path] = []
+        self.fids: List[str] = []  # File fingerprints
+        self.relpaths: List[str] = []
+        self.rel_to_fid: Dict[str, str] = {}
+        self.fid_to_rel: Dict[str, str] = {}
+
+        # Persistent state
+        self.state_path: Optional[Path] = None
+        self.state: Dict[str, Any] = {}
+        self.lock = threading.Lock()
+
+        # Background duration scanner
+        self._scan_lock = threading.Lock()
+        self._scan_thread: Optional[threading.Thread] = None
+        self._scan_stop = False
+
+        # Metadata cache
+        self._meta_cache: Dict[str, Dict[str, Any]] = {}  # fid -> probe meta
+        self._meta_lock = threading.Lock()
+        self._ffprobe, self._ffmpeg = find_ffprobe_ffmpeg()
+
+    @property
+    def ffprobe_found(self) -> bool:
+        """Check if ffprobe is available for metadata extraction."""
+        return bool(self._ffprobe)
+
+    def _sorted_default(self, relpaths: List[str]) -> List[str]:
+        """Sort relative paths using natural sort order."""
+        return sorted(relpaths, key=natural_key)
+
+    def _apply_saved_order(
+        self,
+        all_fids: List[str],
+        fid_to_rel: Dict[str, str],
+        order_fids: Optional[List[str]]
+    ) -> List[str]:
+        """Apply saved ordering to file IDs, handling additions and removals."""
+        if not order_fids or not isinstance(order_fids, list):
+            # Default: sort by relative path using the provided fid_to_rel mapping
+            rel_to_fid_local = {v: k for k, v in fid_to_rel.items()}
+            return [
+                rel_to_fid_local[rp]
+                for rp in self._sorted_default(list(fid_to_rel.values()))
+                if rp in rel_to_fid_local
+            ]
+
+        existing = set(all_fids)
+        ordered: List[str] = []
+        used: set[str] = set()
+        
+        # Add files in saved order
+        for fid in order_fids:
+            if isinstance(fid, str) and fid in existing and fid not in used:
+                ordered.append(fid)
+                used.add(fid)
+
+        # Append any new files not in saved order
+        remaining = [fid for fid in all_fids if fid not in used]
+        remaining.sort(key=lambda fid: natural_key(fid_to_rel.get(fid, fid)))
+        return ordered + remaining
+
+    def set_root(self, folder: str) -> Dict[str, Any]:
+        """
+        Set a new root folder for the library.
+        
+        Scans for video files, loads/creates state, and starts duration scanning.
+        Returns library info dict on success, raises ValueError for invalid folder.
+        """
+        root = Path(folder).expanduser().resolve()
+        if not root.exists() or not root.is_dir():
+            raise ValueError("Invalid folder")
+
+        # Discover video files
+        all_files: List[Path] = [
+            p for p in root.rglob("*")
+            if p.is_file() and p.suffix.lower() in VIDEO_EXTS
+        ]
+
+        # Build relative paths and fingerprints
+        relpaths: List[str] = []
+        fids: List[str] = []
+        rel_to_fid: Dict[str, str] = {}
+        fid_to_rel: Dict[str, str] = {}
+
+        for p in all_files:
+            try:
+                rel = str(p.relative_to(root)).replace("\\", "/")
+            except ValueError:
+                rel = p.name
+            fid = file_fingerprint(p)
+            relpaths.append(rel)
+            fids.append(fid)
+            rel_to_fid[rel] = fid
+            # On fingerprint collision, keep first (rare)
+            fid_to_rel.setdefault(fid, rel)
+
+        library_id = compute_library_id_from_fids(fids)
+        state_path = STATE_DIR / f"library_{library_id}.json"
+        loaded = load_json_with_fallbacks(state_path) or {}
+
+        # Create baseline state for new libraries
+        now = int(time.time())
+        baseline: Dict[str, Any] = {
+            "version": 19,
+            "library_id": library_id,
+            "last_path": str(root),
+            "updated_at": now,
+            "current_fid": fids[0] if fids else None,
+            "current_time": 0.0,
+            "volume": 1.0,
+            "autoplay": True,  # Default ON for new folders
+            "playback_rate": 1.0,
+            "order_fids": [],
+            "videos": {},  # fid -> video metadata
+        }
+
+        # Merge with loaded state if same library
+        state = dict(baseline)
+        if isinstance(loaded, dict) and loaded.get("library_id") == library_id:
+            for key in baseline.keys():
+                if key in loaded:
+                    state[key] = loaded[key]
+            for key, value in loaded.items():
+                if key not in state:
+                    state[key] = value
+
+        state["last_path"] = str(root)
+
+        # Normalize video metadata
+        vids = state.get("videos", {})
+        if not isinstance(vids, dict):
+            vids = {}
+
+        normalized: Dict[str, Any] = {}
+        for fid in fids:
+            m = vids.get(fid) if isinstance(vids.get(fid), dict) else {}
+            watched = float(m.get("watched") or 0.0)
+            normalized[fid] = {
+                "pos": float(m.get("pos") if m.get("pos") is not None else watched),
+                "watched": watched,
+                "duration": m.get("duration"),
+                "finished": bool(m.get("finished")),  # Once done, stays done
+                "note": str(m.get("note") or ""),
+                "last_open": int(m.get("last_open") or 0),
+                "subtitle": m.get("subtitle"),  # {"vtt": "...", "label": "..."}
+            }
+        state["videos"] = normalized
+
+        # Normalize settings
+        try:
+            state["volume"] = clamp(float(state.get("volume", 1.0)), 0.0, 1.0)
+        except (ValueError, TypeError):
+            state["volume"] = 1.0
+
+        state["autoplay"] = truthy(state.get("autoplay", True))
+        
+        try:
+            state["playback_rate"] = clamp(float(state.get("playback_rate", 1.0)), 0.25, 3.0)
+        except (ValueError, TypeError):
+            state["playback_rate"] = 1.0
+
+        # Clean up order_fids to only include existing files
+        if not isinstance(state.get("order_fids"), list):
+            state["order_fids"] = []
+        else:
+            fid_set = set(fids)
+            state["order_fids"] = [
+                fid for fid in state["order_fids"]
+                if isinstance(fid, str) and fid in fid_set
+            ]
+
+        ordered_fids = self._apply_saved_order(fids, fid_to_rel, state.get("order_fids"))
+
+        # Build ordered file lists
+        ordered_relpaths = [
+            fid_to_rel.get(fid) for fid in ordered_fids
+        ]
+        ordered_relpaths = [rp for rp in ordered_relpaths if isinstance(rp, str)]
+        ordered_files: List[Path] = []
+        for rp in ordered_relpaths:
+            p = (root / rp)
+            if p.exists():
+                ordered_files.append(p)
+
+        # current fid
+        cur_fid = state.get("current_fid")
+        if not isinstance(cur_fid, str) or cur_fid not in set(ordered_fids):
+            cur_fid = ordered_fids[0] if ordered_fids else None
+        state["current_fid"] = cur_fid
+
+        try:
+            state["current_time"] = max(0.0, float(state.get("current_time", 0.0)))
+        except Exception:
+            state["current_time"] = 0.0
+
+        with self.lock:
+            self.root = root
+            self.files = ordered_files
+            self.fids = ordered_fids
+            self.relpaths = ordered_relpaths
+            self.rel_to_fid = rel_to_fid
+            self.fid_to_rel = {fid: fid_to_rel.get(fid, fid) for fid in ordered_fids}
+            self.state_path = state_path
+            self.state = state
+
+        self.save_state()
+        self.start_duration_scan()
+
+        PREFS.update({"last_folder_path": str(root), "last_library_id": library_id})
+        push_recent(str(root))
+        return self.get_library_info()
+
+    def save_state(self) -> None:
+        with self.lock:
+            if not self.state_path: return
+            self.state["updated_at"] = int(time.time())
+            atomic_write_json(self.state_path, self.state)
+
+    def _folder_stats(self, fids: List[str], state: Dict[str, Any]) -> Dict[str, Any]:
+        vids = state.get("videos", {})
+        if not isinstance(vids, dict): vids = {}
+
+        finished = 0
+        remaining = 0
+        total_dur = 0.0
+        total_watch = 0.0
+        known = 0
+
+        # simple "top folders" based on current relpaths (still useful)
+        top_counts: Dict[str, int] = {}
+        fid_to_rel = self.fid_to_rel or {}
+
+        for fid in fids:
+            rp = fid_to_rel.get(fid, "")
+            parts = rp.split("/")
+            top = parts[0] if len(parts) > 1 else "(root)"
+            top_counts[top] = top_counts.get(top, 0) + 1
+
+            m = vids.get(fid) if isinstance(vids.get(fid), dict) else {}
+            d = m.get("duration", None)
+            w = float(m.get("watched") or 0.0)
+            fin = bool(m.get("finished") or False)
+            finished += 1 if fin else 0
+            remaining += 0 if fin else 1
+            if isinstance(d, (int, float)) and d and d > 0:
+                known += 1
+                total_dur += float(d)
+                total_watch += min(w, float(d))
+
+        remaining_sec = 0.0
+        for fid in fids:
+            m = vids.get(fid) if isinstance(vids.get(fid), dict) else {}
+            d = m.get("duration", None)
+            if isinstance(d, (int, float)) and d and d > 0:
+                w = float(m.get("watched") or 0.0)
+                remaining_sec += max(0.0, float(d) - min(w, float(d)))
+
+        top_list = sorted(top_counts.items(), key=lambda kv: (-kv[1], natural_key(kv[0])))
+
+        return {
+            "finished_count": finished,
+            "remaining_count": remaining,
+            "remaining_seconds_known": remaining_sec if known > 0 else None,
+            "top_folders": top_list[:12],
+            "durations_known": known,
+            "overall_progress": (total_watch / total_dur) if total_dur > 0 else None,
+        }
+
+    def _tree_flags(self, rels: List[str]) -> Dict[str, Dict[str, Any]]:
+        """
+        Calculate tree display flags for each file.
+        
+        Limits depth to 1 level (immediate parent folder only) to avoid
+        overly deep nesting in the UI.
+        """
+        # First, normalize paths to only consider immediate parent folder
+        normalized: List[str] = []
+        for rp in rels:
+            parts = rp.split("/")
+            if len(parts) >= 2:
+                # Use only immediate parent + filename
+                normalized.append(parts[-2] + "/" + parts[-1])
+            else:
+                # File in root
+                normalized.append(parts[-1])
+        
+        last_index: Dict[str, int] = {}
+        first_index: Dict[str, int] = {}
+
+        for i, rp in enumerate(normalized):
+            parts = rp.split("/")
+            last_index[""] = i
+            first_index.setdefault("", i)
+            for d in range(1, len(parts)):
+                folder = "/".join(parts[:d])
+                last_index[folder] = i
+                if folder not in first_index:
+                    first_index[folder] = i
+
+        out: Dict[str, Dict[str, Any]] = {}
+        for i, rp in enumerate(rels):
+            norm_rp = normalized[i]
+            parts = norm_rp.split("/")
+            depth = len(parts) - 1  # Max 1 now
+            parent = norm_rp.rsplit("/", 1)[0] if "/" in norm_rp else ""
+            is_last = (last_index.get(parent, i) == i)
+            has_prev_in_parent = i > first_index.get(parent, i)
+
+            pipes: List[bool] = []
+            for j in range(depth):
+                folder = "/".join(parts[:j+1])
+                pipes.append(last_index.get(folder, i) > i)
+
+            out[rp] = {
+                "depth": depth,
+                "pipes": pipes,
+                "is_last": is_last,
+                "has_prev_in_parent": has_prev_in_parent
+            }
+        return out
+
+    def _basic_file_meta(self, fid: str) -> Dict[str, Any]:
+        with self.lock:
+            root = self.root
+            fid_to_rel = dict(self.fid_to_rel)
+        if not root: return {}
+        rp = fid_to_rel.get(fid)
+        if not rp: return {}
+        try:
+            p = (root / rp).resolve()
+            if not is_within_root(root, p) or not p.exists(): return {}
+            st = p.stat()
+            ext = p.suffix.lower()
+            folder = str(Path(rp).parent).replace("\\", "/")
+            if folder == ".": folder = "(root)"
+            return {"ext": ext[1:] if ext.startswith(".") else ext, "size": st.st_size, "mtime": int(st.st_mtime), "folder": folder}
+        except Exception:
+            return {}
+
+    def _get_cached_meta(self, fid: str) -> Dict[str, Any]:
+        with self._meta_lock:
+            return dict(self._meta_cache.get(fid, {}))
+
+    def _set_cached_meta(self, fid: str, meta: Dict[str, Any]) -> None:
+        with self._meta_lock:
+            self._meta_cache[fid] = dict(meta)
+
+    def _auto_subtitle_sidecar(self, video_path: Path) -> Optional[Path]:
+        """Find subtitle file with same name as video (case-insensitive, flexible matching).
+        
+        Handles patterns like:
+        - video.srt / video.vtt (exact match)
+        - video.en.srt / video.en.vtt (with language code)
+        - video.eng.srt / video.english.srt (other language patterns)
+        - Flexible matching: ignores dashes, underscores, extra spaces
+        """
+        import re
+        
+        def normalize(s: str) -> str:
+            """Normalize string for flexible comparison."""
+            s = s.lower()
+            # Remove common separators and normalize spaces
+            s = re.sub(r'[-_]+', ' ', s)
+            # Collapse multiple spaces
+            s = re.sub(r'\s+', ' ', s)
+            return s.strip()
+        
+        base_stem = video_path.stem
+        base_norm = normalize(base_stem)
+        parent = video_path.parent
+        
+        # Check all files in the same directory
+        try:
+            candidates = []
+            for f in parent.iterdir():
+                if not f.is_file():
+                    continue
+                ext = f.suffix.lower()
+                if ext not in [".vtt", ".srt"]:
+                    continue
+                
+                f_stem = f.stem
+                f_norm = normalize(f_stem)
+                
+                # Exact match (video.srt) - case insensitive
+                if f_stem.lower() == base_stem.lower():
+                    candidates.append((0, f))  # Priority 0 = exact match
+                    continue
+                
+                # Normalized exact match
+                if f_norm == base_norm:
+                    candidates.append((1, f))  # Priority 1 = normalized exact
+                    continue
+                
+                # Check if it starts with the video name and has a language suffix
+                # e.g., "video.en" matches "video", "video.eng" matches "video"
+                if f_stem.lower().startswith(base_stem.lower() + "."):
+                    lang_part = f_stem[len(base_stem) + 1:].lower()
+                    if lang_part in ["en", "eng", "english"]:
+                        candidates.append((2, f))  # Priority 2 = English with exact base
+                    else:
+                        candidates.append((4, f))  # Priority 4 = other lang with exact base
+                    continue
+                
+                # Normalized match with language suffix
+                # Remove potential language code from subtitle stem for comparison
+                f_stem_no_lang = re.sub(r'\.(en|eng|english|fr|de|es|it|pt|ru|ja|ko|zh)$', '', f_stem, flags=re.IGNORECASE)
+                f_norm_no_lang = normalize(f_stem_no_lang)
+                
+                if f_norm_no_lang == base_norm:
+                    # Check if it had an English language code
+                    lang_match = re.search(r'\.(en|eng|english)$', f_stem, flags=re.IGNORECASE)
+                    if lang_match:
+                        candidates.append((3, f))  # Priority 3 = English with normalized base
+                    else:
+                        candidates.append((5, f))  # Priority 5 = other/no lang with normalized base
+            
+            # Sort by priority and return best match
+            if candidates:
+                candidates.sort(key=lambda x: x[0])
+                return candidates[0][1]
+        except Exception:
+            pass
+        return None
+
+    def _store_subtitle_for_fid(self, fid: str, src_path: Path) -> Optional[Dict[str, Any]]:
+        try:
+            ext = src_path.suffix.lower()
+            if ext not in SUB_EXTS:
+                return None
+
+            # create stable file name based on fid + subtitle source basename
+            name_part = re.sub(r"[^a-zA-Z0-9._-]+", "_", src_path.stem)[:60] or "subtitle"
+            out_name = f"{fid}_{name_part}.vtt"
+            out_path = (SUBS_DIR / out_name).resolve()
+
+            if ext == ".vtt":
+                out_path.write_bytes(src_path.read_bytes())
+            else:
+                data = src_path.read_text(encoding="utf-8", errors="replace")
+                out_path.write_bytes(srt_to_vtt_bytes(data))
+
+            rel = f"subtitles/{out_name}"
+            return {"vtt": rel, "label": src_path.name}
+        except Exception:
+            return None
+
+    def get_subtitle_for_current(self) -> Dict[str, Any]:
+        with self.lock:
+            root = self.root
+            state = dict(self.state)
+            cur = state.get("current_fid")
+            vids = state.get("videos", {})
+            files = list(self.files) if self.files else []
+            fids = list(self.fids) if self.fids else []
+
+        if not root or not cur or not isinstance(vids, dict):
+            return {"ok": True, "has": False}
+
+        # Check for already-stored subtitle
+        m = vids.get(cur)
+        if isinstance(m, dict) and isinstance(m.get("subtitle"), dict):
+            sub = m["subtitle"]
+            vtt = sub.get("vtt")
+            if isinstance(vtt, str):
+                p = (STATE_DIR / vtt).resolve()
+                if p.exists():
+                    return {"ok": True, "has": True, "url": f"/sub/{state.get('library_id')}/{cur}", "label": sub.get("label", "Subtitles")}
+
+        # Get video path from files/fids
+        vp = None
+        try:
+            if cur in fids:
+                idx = fids.index(cur)
+                if idx < len(files):
+                    vp = files[idx]
+        except (ValueError, IndexError):
+            pass
+        
+        if not vp or not vp.exists():
+            return {"ok": True, "has": False}
+        
+        # 1. First try: sidecar subtitle file (case-insensitive)
+        sc = self._auto_subtitle_sidecar(vp)
+        if sc and sc.exists():
+            # store it so it becomes persistent and portable (stored next to script)
+            stored = self._store_subtitle_for_fid(cur, sc)
+            if stored:
+                with self.lock:
+                    mm = self.state["videos"].get(cur, {})
+                    if not isinstance(mm, dict):
+                        mm = {}
+                    mm["subtitle"] = stored
+                    self.state["videos"][cur] = mm
+                self.save_state()
+                return {"ok": True, "has": True, "url": f"/sub/{state.get('library_id')}/{cur}", "label": stored.get("label", "Subtitles")}
+
+        # 2. Second try: embedded subtitles (prefer English)
+        if self._ffprobe and self._ffmpeg:
+            try:
+                meta = ffprobe_video_metadata(vp, self._ffprobe)
+                if meta and "subtitle_tracks" in meta:
+                    tracks = meta["subtitle_tracks"]
+                    if tracks:
+                        # Try to find English track first
+                        english_track = None
+                        first_track = None
+                        for t in tracks:
+                            if first_track is None:
+                                first_track = t
+                            lang = (t.get("language") or "").lower()
+                            title = (t.get("title") or "").lower()
+                            if "eng" in lang or "english" in title or lang == "en":
+                                english_track = t
+                                break
+                        
+                        # Use English if found, otherwise first track
+                        chosen = english_track or first_track
+                        if chosen:
+                            track_idx = chosen.get("index")
+                            if track_idx is not None:
+                                # Extract the subtitle
+                                result = self.extract_embedded_subtitle(track_idx)
+                                if result.get("ok"):
+                                    return {"ok": True, "has": True, "url": result.get("url"), "label": result.get("label", "Subtitles")}
+            except Exception:
+                pass
+
+        return {"ok": True, "has": False}
+
+    def set_subtitle_for_current(self, file_path: str) -> Dict[str, Any]:
+        with self.lock:
+            root = self.root
+            cur = self.state.get("current_fid")
+        if not root or not cur:
+            return {"ok": False, "error": "No video loaded"}
+        p = Path(file_path).expanduser()
+        if not p.exists() or not p.is_file():
+            return {"ok": False, "error": "Subtitle file not found"}
+        stored = self._store_subtitle_for_fid(cur, p)
+        if not stored:
+            return {"ok": False, "error": "Unsupported subtitle type (use .srt or .vtt)"}
+        with self.lock:
+            mm = self.state["videos"].get(cur, {})
+            if not isinstance(mm, dict):
+                mm = {"pos": 0.0, "watched": 0.0, "duration": None, "finished": False, "note": "", "last_open": 0, "subtitle": None}
+            mm["subtitle"] = stored
+            self.state["videos"][cur] = mm
+        self.save_state()
+        return {"ok": True, "url": f"/sub/{self.state.get('library_id')}/{cur}", "label": stored.get("label", "Subtitles")}
+
+    def get_embedded_subtitles(self) -> Dict[str, Any]:
+        """Get list of embedded subtitle tracks for current video."""
+        with self.lock:
+            root = self.root
+            files = list(self.files) if self.files else []
+            fids = list(self.fids) if self.fids else []
+            state = dict(self.state)
+        
+        if not root or not files or not fids:
+            return {"ok": False, "tracks": []}
+        
+        cur = state.get("current_fid")
+        if not isinstance(cur, str) or cur not in set(fids):
+            return {"ok": False, "tracks": []}
+        
+        try:
+            idx = fids.index(cur)
+            video_path = files[idx]
+        except (ValueError, IndexError):
+            return {"ok": False, "tracks": []}
+        
+        # Use ffprobe to get subtitle tracks
+        meta = ffprobe_video_metadata(video_path, self._ffprobe)
+        if not meta or "subtitle_tracks" not in meta:
+            return {"ok": True, "tracks": []}
+        
+        return {"ok": True, "tracks": meta["subtitle_tracks"]}
+
+    def extract_embedded_subtitle(self, track_index: int) -> Dict[str, Any]:
+        """Extract an embedded subtitle track using ffmpeg."""
+        with self.lock:
+            root = self.root
+            files = list(self.files) if self.files else []
+            fids = list(self.fids) if self.fids else []
+            cur = self.state.get("current_fid")
+            library_id = self.state.get("library_id")
+        
+        if not root or not files or not fids or not cur:
+            return {"ok": False, "error": "No video loaded"}
+        
+        if not self._ffmpeg:
+            return {"ok": False, "error": "ffmpeg not found"}
+        
+        try:
+            idx = fids.index(cur)
+            video_path = files[idx]
+        except (ValueError, IndexError):
+            return {"ok": False, "error": "Video not found"}
+        
+        # Extract subtitle to VTT format
+        SUBS_DIR.mkdir(parents=True, exist_ok=True)
+        out_name = f"{cur}_embedded_{track_index}.vtt"
+        out_path = SUBS_DIR / out_name
+        
+        try:
+            cmd = [
+                self._ffmpeg, "-y", "-i", str(video_path),
+                "-map", f"0:{track_index}",
+                "-c:s", "webvtt",
+                str(out_path)
+            ]
+            subprocess.run(
+                cmd,
+                capture_output=True,
+                timeout=60,
+                **_subprocess_no_window_kwargs()
+            )
+            
+            if not out_path.exists():
+                return {"ok": False, "error": "Failed to extract subtitle"}
+            
+            # Get track label
+            meta = ffprobe_video_metadata(video_path, self._ffprobe)
+            label = "Embedded"
+            if meta and "subtitle_tracks" in meta:
+                for t in meta["subtitle_tracks"]:
+                    if t.get("index") == track_index:
+                        lang = t.get("language", "")
+                        title = t.get("title", "")
+                        if title:
+                            label = title
+                        elif lang:
+                            label = lang.upper()
+                        break
+            
+            # Store in state
+            stored = {"vtt": f"subtitles/{out_name}", "label": label}
+            with self.lock:
+                mm = self.state["videos"].get(cur, {})
+                if not isinstance(mm, dict):
+                    mm = {}
+                mm["subtitle"] = stored
+                self.state["videos"][cur] = mm
+            self.save_state()
+            
+            return {"ok": True, "url": f"/sub/{library_id}/{cur}", "label": label}
+        except Exception as e:
+            return {"ok": False, "error": str(e)}
+
+    def get_available_subtitles(self) -> Dict[str, Any]:
+        """Get all available subtitle options (sidecar files + embedded tracks)."""
+        import re
+        
+        with self.lock:
+            root = self.root
+            files = list(self.files) if self.files else []
+            fids = list(self.fids) if self.fids else []
+            state = dict(self.state)
+        
+        cur = state.get("current_fid")
+        if not root or not files or not fids or not cur:
+            return {"ok": False, "sidecar": [], "embedded": []}
+        
+        try:
+            idx = fids.index(cur)
+            video_path = files[idx]
+        except (ValueError, IndexError):
+            return {"ok": False, "sidecar": [], "embedded": []}
+        
+        sidecar_subs = []
+        embedded_subs = []
+        
+        # Find all sidecar subtitle files
+        def normalize(s: str) -> str:
+            s = s.lower()
+            s = re.sub(r'[-_]+', ' ', s)
+            s = re.sub(r'\s+', ' ', s)
+            return s.strip()
+        
+        base_stem = video_path.stem
+        base_norm = normalize(base_stem)
+        parent = video_path.parent
+        
+        seen_labels = set()  # To dedupe vtt/srt with same name
+        
+        try:
+            for f in parent.iterdir():
+                if not f.is_file():
+                    continue
+                ext = f.suffix.lower()
+                if ext not in [".vtt", ".srt"]:
+                    continue
+                
+                f_stem = f.stem
+                f_norm = normalize(f_stem)
+                
+                # Check if this subtitle matches the video
+                is_match = False
+                
+                # Exact match
+                if f_stem.lower() == base_stem.lower():
+                    is_match = True
+                # Normalized match
+                elif f_norm == base_norm:
+                    is_match = True
+                # With language suffix (exact base)
+                elif f_stem.lower().startswith(base_stem.lower() + "."):
+                    is_match = True
+                # With language suffix (normalized base)
+                else:
+                    f_stem_no_lang = re.sub(r'\.(en|eng|english|fr|fra|french|de|deu|german|es|spa|spanish|it|ita|italian|pt|por|portuguese|ru|rus|russian|ja|jpn|japanese|ko|kor|korean|zh|chi|chinese|nl|nld|dutch|pl|pol|polish|sv|swe|swedish|ar|ara|arabic)$', '', f_stem, flags=re.IGNORECASE)
+                    if normalize(f_stem_no_lang) == base_norm:
+                        is_match = True
+                
+                if is_match:
+                    # Extract language from filename
+                    lang_match = re.search(r'\.([a-z]{2,3})$', f_stem, flags=re.IGNORECASE)
+                    if lang_match:
+                        lang = lang_match.group(1).upper()
+                        # Map common codes to full names
+                        lang_map = {"EN": "English", "ENG": "English", "FR": "French", "FRA": "French", 
+                                   "DE": "German", "DEU": "German", "ES": "Spanish", "SPA": "Spanish",
+                                   "IT": "Italian", "ITA": "Italian", "PT": "Portuguese", "POR": "Portuguese",
+                                   "RU": "Russian", "RUS": "Russian", "JA": "Japanese", "JPN": "Japanese",
+                                   "KO": "Korean", "KOR": "Korean", "ZH": "Chinese", "CHI": "Chinese",
+                                   "NL": "Dutch", "NLD": "Dutch", "PL": "Polish", "POL": "Polish",
+                                   "SV": "Swedish", "SWE": "Swedish", "AR": "Arabic", "ARA": "Arabic"}
+                        label = lang_map.get(lang, lang)
+                    else:
+                        label = "Subtitles"
+                    
+                    # Dedupe: if we already have this label, skip (prefer vtt over srt)
+                    dedupe_key = label.lower()
+                    if dedupe_key in seen_labels:
+                        continue
+                    seen_labels.add(dedupe_key)
+                    
+                    sidecar_subs.append({
+                        "path": str(f),
+                        "label": label,
+                        "format": ext[1:].upper()
+                    })
+        except Exception:
+            pass
+        
+        # Sort sidecar subs: English first, then alphabetically
+        def sub_sort_key(s):
+            label = s.get("label", "").lower()
+            if "english" in label or label == "en":
+                return (0, label)
+            return (1, label)
+        sidecar_subs.sort(key=sub_sort_key)
+        
+        # Get embedded subtitles
+        if self._ffprobe:
+            try:
+                meta = ffprobe_video_metadata(video_path, self._ffprobe)
+                if meta and "subtitle_tracks" in meta:
+                    for track in meta["subtitle_tracks"]:
+                        lang = track.get("language", "")
+                        title = track.get("title", "")
+                        if title:
+                            label = title
+                        elif lang:
+                            label = lang.upper()
+                        else:
+                            label = f"Track {track.get('index', '?')}"
+                        
+                        embedded_subs.append({
+                            "index": track.get("index"),
+                            "label": label,
+                            "codec": track.get("codec", ""),
+                            "language": lang
+                        })
+            except Exception:
+                pass
+        
+        return {"ok": True, "sidecar": sidecar_subs, "embedded": embedded_subs}
+
+    def load_sidecar_subtitle(self, file_path: str) -> Dict[str, Any]:
+        """Load a specific sidecar subtitle file."""
+        with self.lock:
+            cur = self.state.get("current_fid")
+            library_id = self.state.get("library_id")
+        
+        if not cur:
+            return {"ok": False, "error": "No video loaded"}
+        
+        p = Path(file_path)
+        if not p.exists() or not p.is_file():
+            return {"ok": False, "error": "Subtitle file not found"}
+        
+        stored = self._store_subtitle_for_fid(cur, p)
+        if not stored:
+            return {"ok": False, "error": "Unsupported subtitle type"}
+        
+        with self.lock:
+            mm = self.state["videos"].get(cur, {})
+            if not isinstance(mm, dict):
+                mm = {}
+            mm["subtitle"] = stored
+            self.state["videos"][cur] = mm
+        self.save_state()
+        
+        return {"ok": True, "url": f"/sub/{library_id}/{cur}", "label": stored.get("label", "Subtitles")}
+
+    def reset_watch_progress(self) -> Dict[str, Any]:
+        # Reset only progress fields; keep notes, duration, subtitles, volume, rate, etc.
+        with self.lock:
+            vids = self.state.get("videos", {})
+            if not isinstance(vids, dict): return {"ok": False, "error": "No library"}
+            for fid, m in list(vids.items()):
+                if not isinstance(m, dict): continue
+                m["pos"] = 0.0
+                m["watched"] = 0.0
+                m["finished"] = False
+                vids[fid] = m
+            self.state["videos"] = vids
+            self.state["current_time"] = 0.0
+        self.save_state()
+        return {"ok": True}
+
+    def get_current_video_metadata(self) -> Dict[str, Any]:
+        with self.lock:
+            root = self.root
+            files = list(self.files) if self.files else []
+            fids = list(self.fids) if self.fids else []
+            state = dict(self.state)
+
+        if not root or not files or not fids:
+            return {"ok": False, "error": "No library", "ffprobe_found": self.ffprobe_found}
+
+        cur = state.get("current_fid")
+        if not isinstance(cur, str) or cur not in set(fids):
+            cur = fids[0]
+
+        idx = fids.index(cur)
+        p = files[idx]
+        basic = self._basic_file_meta(cur)
+        cached = self._get_cached_meta(cur)
+
+        out = {"ok": True, "fid": cur, "basic": basic, "probe": cached or None, "ffprobe_found": self.ffprobe_found}
+        if cached:
+            return out
+
+        probe = ffprobe_video_metadata(p, self._ffprobe)
+        if probe:
+            self._set_cached_meta(cur, probe)
+            out["probe"] = probe
+        else:
+            out["probe"] = None
+        return out
+
+    def get_library_info(self) -> Dict[str, Any]:
+        with self.lock:
+            root = self.root
+            files = list(self.files)
+            fids = list(self.fids)
+            rels = list(self.relpaths)
+            state = dict(self.state)
+
+        if not root:
+            return {"ok": False, "error": "No folder selected"}
+
+        has_subdirs = any("/" in rp for rp in rels)
+        tree = self._tree_flags(rels) if has_subdirs else {}
+        vids = state.get("videos", {})
+        if not isinstance(vids, dict): vids = {}
+
+        items = []
+        for i, (fid, f) in enumerate(zip(fids, files)):
+            rel = rels[i] if i < len(rels) else str(f.relative_to(root)).replace("\\", "/")
+            meta = vids.get(fid, {"pos": 0.0, "watched": 0.0, "duration": None, "finished": False, "note": "", "last_open": 0, "subtitle": None})
+            nice = pretty_title_from_filename(f.name)
+            tf = tree.get(rel, {"depth": 0, "pipes": [], "is_last": False, "has_prev_in_parent": False})
+            items.append({
+                "index": i,
+                "fid": fid,
+                "name": f.name,
+                "title": nice,
+                "relpath": rel,
+
+                "depth": int(tf.get("depth", 0)),
+                "pipes": tf.get("pipes", []),
+                "is_last": bool(tf.get("is_last", False)),
+                "has_prev_in_parent": bool(tf.get("has_prev_in_parent", False)),
+
+                "pos": float(meta.get("pos") or 0.0),
+                "watched": float(meta.get("watched") or 0.0),
+                "duration": meta.get("duration"),
+                "finished": bool(meta.get("finished") or False),
+                "note_len": len(str(meta.get("note") or "")),
+                "last_open": int(meta.get("last_open") or 0),
+                "has_sub": isinstance(meta.get("subtitle"), dict),
+            })
+
+        stats = self._folder_stats(fids, state)
+
+        cur_fid = state.get("current_fid")
+        cur_idx = fids.index(cur_fid) if isinstance(cur_fid, str) and cur_fid in fids else 0
+
+        next_up = None
+        for j in range(cur_idx + 1, len(items)):
+            if not items[j]["finished"]:
+                next_up = items[j]; break
+
+        return {
+            "ok": True,
+            "folder": str(root),
+            "library_id": state.get("library_id"),
+            "count": len(files),
+            "current_index": cur_idx,
+            "current_fid": fids[cur_idx] if fids else None,
+            "current_time": float(state.get("current_time", 0.0)),
+            "folder_volume": float(state.get("volume", 1.0)),
+            "folder_autoplay": bool(state.get("autoplay", True)),
+            "folder_rate": float(state.get("playback_rate", 1.0)),
+            "items": items,
+            "has_subdirs": has_subdirs,
+            "overall_progress": stats["overall_progress"],
+            "durations_known": stats["durations_known"],
+            "finished_count": stats["finished_count"],
+            "remaining_count": stats["remaining_count"],
+            "remaining_seconds_known": stats["remaining_seconds_known"],
+            "top_folders": stats["top_folders"],
+            "next_up": {"index": next_up["index"], "title": next_up["title"]} if next_up else None,
+        }
+
+    def update_progress(self, index: int, current_time: float, duration: Optional[float], playing: bool) -> Dict[str, Any]:
+        now = int(time.time())
+        with self.lock:
+            if not self.root or not self.files or not self.fids:
+                return {"ok": False, "error": "No library"}
+
+            index = max(0, min(int(index), len(self.files) - 1))
+            fid = self.fids[index]
+            current_time = max(0.0, float(current_time or 0.0))
+            if duration is not None:
+                try: duration = float(duration)
+                except Exception: duration = None
+
+            self.state["current_fid"] = fid
+            self.state["current_time"] = current_time
+
+            meta = self.state["videos"].get(fid, {"pos": 0.0, "watched": 0.0, "duration": None, "finished": False, "note": "", "last_open": 0, "subtitle": None})
+
+            meta["pos"] = current_time
+            meta["watched"] = max(float(meta.get("watched") or 0.0), current_time)
+            if isinstance(duration, (int, float)) and duration and duration > 0:
+                meta["duration"] = duration
+
+            # once finished, always finished (do NOT flip it back)
+            d2 = meta.get("duration")
+            if isinstance(d2, (int, float)) and d2 and d2 > 0:
+                meta["finished"] = bool(meta.get("finished") or (current_time >= max(0.0, float(d2) - 2.0)))
+
+            if playing:
+                meta["last_open"] = now
+
+            self.state["videos"][fid] = meta
+
+        self.save_state()
+        return {"ok": True}
+
+    def set_current(self, index: int, timecode: float = 0.0) -> Dict[str, Any]:
+        with self.lock:
+            if not self.root or not self.files or not self.fids:
+                return {"ok": False, "error": "No library"}
+            index = max(0, min(int(index), len(self.files) - 1))
+            self.state["current_fid"] = self.fids[index]
+            self.state["current_time"] = max(0.0, float(timecode or 0.0))
+        self.save_state()
+        return {"ok": True}
+
+    def set_folder_volume(self, volume: float) -> Dict[str, Any]:
+        with self.lock:
+            if not self.root: return {"ok": False, "error": "No library"}
+            try: v = float(volume)
+            except Exception: v = 1.0
+            self.state["volume"] = clamp(v, 0.0, 1.0)
+        self.save_state()
+        return {"ok": True}
+
+    def set_folder_autoplay(self, enabled: bool) -> Dict[str, Any]:
+        with self.lock:
+            if not self.root: return {"ok": False, "error": "No library"}
+            self.state["autoplay"] = bool(enabled)
+        self.save_state()
+        return {"ok": True}
+
+    def set_folder_rate(self, rate: float) -> Dict[str, Any]:
+        with self.lock:
+            if not self.root: return {"ok": False, "error": "No library"}
+            try: r = float(rate)
+            except Exception: r = 1.0
+            self.state["playback_rate"] = clamp(r, 0.25, 3.0)
+        self.save_state()
+        return {"ok": True}
+
+    def set_order(self, fids: List[str]) -> Dict[str, Any]:
+        with self.lock:
+            if not self.root or not self.files or not self.fids:
+                return {"ok": False, "error": "No library"}
+            if not isinstance(fids, list) or not all(isinstance(x, str) for x in fids):
+                return {"ok": False, "error": "order must be a list of fids"}
+
+            existing = set(self.fids)
+            seen, cleaned = set(), []
+            for fid in fids:
+                if fid in existing and fid not in seen:
+                    cleaned.append(fid); seen.add(fid)
+
+            # append remaining
+            remaining = [fid for fid in self.fids if fid not in seen]
+            remaining.sort(key=lambda fid: natural_key(self.fid_to_rel.get(fid, fid)))
+            new_fids = cleaned + remaining
+
+            # rebuild lists
+            fid_to_rel = dict(self.fid_to_rel)
+            rel_to_file = {str(p.relative_to(self.root)).replace("\\", "/"): p for p in self.root.rglob("*") if p.is_file() and p.suffix.lower() in VIDEO_EXTS}
+            new_rels = [fid_to_rel.get(fid) for fid in new_fids]
+            new_rels = [rp for rp in new_rels if isinstance(rp, str)]
+            new_files = [rel_to_file[rp] for rp in new_rels if rp in rel_to_file]
+
+            cur = self.state.get("current_fid")
+            if not isinstance(cur, str) or cur not in set(new_fids):
+                cur = new_fids[0] if new_fids else None
+
+            self.fids = new_fids
+            self.relpaths = new_rels
+            self.files = new_files
+            self.state["order_fids"] = cleaned
+            self.state["current_fid"] = cur
+
+        self.save_state()
+        return {"ok": True}
+
+    def get_video_path(self, index: int) -> Path:
+        with self.lock:
+            if not self.root or not self.files:
+                raise FileNotFoundError("No library")
+            index = max(0, min(int(index), len(self.files) - 1))
+            p, root = self.files[index], self.root
+        if not is_within_root(root, p):
+            raise PermissionError("Invalid path")
+        return p
+
+    def get_note(self, fid: str) -> str:
+        with self.lock:
+            vids = self.state.get("videos", {})
+            if not isinstance(vids, dict): return ""
+            meta = vids.get(fid)
+            if not isinstance(meta, dict): return ""
+            return str(meta.get("note") or "")
+
+    def set_note(self, fid: str, note: str) -> Dict[str, Any]:
+        note = str(note or "")
+        with self.lock:
+            if not self.root: return {"ok": False, "error": "No library"}
+            vids = self.state.get("videos", {})
+            if not isinstance(vids, dict):
+                vids = {}; self.state["videos"] = vids
+            meta = vids.get(fid)
+            if not isinstance(meta, dict):
+                meta = {"pos": 0.0, "watched": 0.0, "duration": None, "finished": False, "note": "", "last_open": 0, "subtitle": None}
+            meta["note"] = note
+            vids[fid] = meta
+        self.save_state()
+        return {"ok": True, "len": len(note)}
+
+    def start_duration_scan(self) -> None:
+        with self._scan_lock:
+            if self._scan_thread and self._scan_thread.is_alive():
+                return
+            self._scan_stop = False
+            t = threading.Thread(target=self._duration_scan_worker, daemon=True)
+            self._scan_thread = t
+            t.start()
+
+    def _duration_scan_worker(self) -> None:
+        ffprobe, ffmpeg = self._ffprobe, self._ffmpeg
+        if not ffprobe and not ffmpeg:
+            return
+
+        with self.lock:
+            if not self.root or not self.files or not self.fids:
+                return
+            root = self.root
+            files = list(self.files)
+            fids = list(self.fids)
+
+        for fid, f in zip(fids, files):
+            if self._scan_stop:
+                return
+
+            with self.lock:
+                if not self.root or str(self.root) != str(root):
+                    return
+                meta = self.state["videos"].get(fid)
+                if not isinstance(meta, dict):
+                    continue
+                d = meta.get("duration")
+                if isinstance(d, (int, float)) and d and d > 0:
+                    continue
+
+            dur = duration_seconds(f, ffprobe, ffmpeg)
+            if dur and dur > 0:
+                with self.lock:
+                    if not self.root or str(self.root) != str(root):
+                        return
+                    m = self.state["videos"].get(fid, {"pos": 0.0, "watched": 0.0, "duration": None, "finished": False, "note": "", "last_open": 0, "subtitle": None})
+                    m["duration"] = float(dur)
+                    # do NOT unset finished if it was already true
+                    try:
+                        m["finished"] = bool(m.get("finished") or (float(m.get("watched") or 0.0) >= max(0.0, float(dur) - 2.0)))
+                    except Exception:
+                        pass
+                    self.state["videos"][fid] = m
+                self.save_state()
+
+LIB = Library()
+
+def _send_file_range(path: Path) -> Response:
+    file_size = path.stat().st_size
+    range_header = request.headers.get("Range", None)
+
+    if not range_header:
+        def gen():
+            with path.open("rb") as f:
+                while True:
+                    chunk = f.read(1024 * 512)
+                    if not chunk: break
+                    yield chunk
+        resp = Response(gen(), status=200, mimetype="application/octet-stream")
+        resp.headers["Content-Length"] = str(file_size)
+        resp.headers["Accept-Ranges"] = "bytes"
+        resp.headers["Cache-Control"] = "no-store"
+        return resp
+
+    try:
+        units, rng = range_header.split("=", 1)
+        if units.strip() != "bytes": raise ValueError
+        start_s, end_s = rng.split("-", 1)
+        start = int(start_s) if start_s else 0
+        end = int(end_s) if end_s else (file_size - 1)
+        if start < 0 or end < start: raise ValueError
+        end = min(end, file_size - 1)
+    except Exception:
+        return abort(416)
+
+    length = end - start + 1
+    def gen():
+        with path.open("rb") as f:
+            f.seek(start)
+            remaining = length
+            while remaining > 0:
+                chunk = f.read(min(1024 * 512, remaining))
+                if not chunk: break
+                remaining -= len(chunk)
+                yield chunk
+
+    resp = Response(gen(), status=206, mimetype="application/octet-stream")
+    resp.headers["Content-Range"] = f"bytes {start}-{end}/{file_size}"
+    resp.headers["Content-Length"] = str(length)
+    resp.headers["Accept-Ranges"] = "bytes"
+    resp.headers["Cache-Control"] = "no-store"
+    return resp
+
+@app.get("/")
+def index():
+    return Response(HTML, mimetype="text/html")
+
+@app.get("/fonts.css")
+def fonts_css():
+    if not FONTS_CSS_PATH.exists():
+        return Response("", mimetype="text/css")
+    return Response(FONTS_CSS_PATH.read_text(encoding="utf-8", errors="replace"), mimetype="text/css")
+
+@app.get("/fonts/<path:filename>")
+def fonts_file(filename: str):
+    path = (FONTS_DIR / filename).resolve()
+    if not path.exists() or not str(path).startswith(str(FONTS_DIR.resolve())):
+        abort(404)
+    mime, _ = mimetypes.guess_type(str(path))
+    return send_file(str(path), mimetype=mime or "application/octet-stream", conditional=True, etag=True, max_age=0)
+
+@app.get("/fa.css")
+def fa_css():
+    if not FA_CSS_PATH.exists():
+        return Response("", mimetype="text/css")
+    return Response(FA_CSS_PATH.read_text(encoding="utf-8", errors="replace"), mimetype="text/css")
+
+@app.get("/fa/webfonts/<path:filename>")
+def fa_webfont(filename: str):
+    path = (FA_WEBFONTS_DIR / filename).resolve()
+    if not path.exists() or not str(path).startswith(str(FA_WEBFONTS_DIR.resolve())):
+        abort(404)
+    mime, _ = mimetypes.guess_type(str(path))
+    return send_file(str(path), mimetype=mime or "application/octet-stream", conditional=True, etag=True, max_age=0)
+
+@app.get("/video/<int:index>")
+def video(index: int):
+    try:
+        p = LIB.get_video_path(index)
+    except Exception:
+        return abort(404)
+
+    ext = p.suffix.lower()
+    mime_map = {
+        ".mp4": "video/mp4",
+        ".m4v": "video/mp4",
+        ".webm": "video/webm",
+        ".ogv": "video/ogg",
+        ".mov": "video/quicktime",
+        ".mkv": "video/x-matroska",
+        ".avi": "video/x-msvideo",
+        ".mpeg": "video/mpeg",
+        ".mpg": "video/mpeg",
+        ".m2ts": "video/mp2t",
+        ".mts": "video/mp2t",
+    }
+    resp = _send_file_range(p)
+    resp.mimetype = mime_map.get(ext, "application/octet-stream")
+    return resp
+
+@app.get("/sub/<libid>/<fid>")
+def subtitle(libid: str, fid: str):
+    # libid is informational; fid is the actual key we store subtitles under
+    with LIB.lock:
+        state = dict(LIB.state)
+        vids = state.get("videos", {})
+        if not isinstance(vids, dict):
+            abort(404)
+        m = vids.get(fid)
+        if not isinstance(m, dict):
+            abort(404)
+        sub = m.get("subtitle")
+        if not isinstance(sub, dict):
+            abort(404)
+        rel = sub.get("vtt")
+        if not isinstance(rel, str):
+            abort(404)
+    p = (STATE_DIR / rel).resolve()
+    if not p.exists() or not str(p).startswith(str(SUBS_DIR.resolve().parent)):
+        abort(404)
+    return send_file(str(p), mimetype="text/vtt", conditional=True, etag=True, max_age=0)
+
+def run_flask(port: int):
+    import logging
+    logging.getLogger("werkzeug").setLevel(logging.ERROR)
+    app.run(host=HOST, port=port, debug=False, use_reloader=False, threaded=True)
+
+class API:
+    def select_folder(self) -> Dict[str, Any]:
+        win = webview.windows[0]
+        res = win.create_file_dialog(webview.FOLDER_DIALOG if not hasattr(webview, 'FileDialog') else webview.FileDialog.FOLDER, allow_multiple=False)
+        if not res: return {"ok": False, "cancelled": True}
+        folder = res[0]
+        try: return LIB.set_root(folder)
+        except Exception as e: return {"ok": False, "error": str(e)}
+
+    def open_folder_path(self, folder: str) -> Dict[str, Any]:
+        try: return LIB.set_root(folder)
+        except Exception as e: return {"ok": False, "error": str(e)}
+
+    def get_recents(self) -> Dict[str, Any]:
+        items = load_recents()
+        valid: List[str] = []
+        for p in items:
+            try:
+                if Path(p).expanduser().exists() and Path(p).expanduser().is_dir():
+                    valid.append(p)
+            except Exception:
+                pass
+        # if anything invalid was removed, persist the cleaned list
+        if valid != items:
+            save_recents(valid)
+        out = [{"name": folder_display_name(p), "path": p} for p in valid]
+        return {"ok": True, "items": out}
+
+    def remove_recent(self, path: str) -> Dict[str, Any]:
+        """Remove a specific folder from the recent folders list."""
+        items = load_recents()
+        if path in items:
+            items.remove(path)
+            save_recents(items)
+        return {"ok": True}
+
+    def get_library(self) -> Dict[str, Any]:
+        return LIB.get_library_info()
+
+    def set_current(self, index: int, timecode: float = 0.0) -> Dict[str, Any]:
+        return LIB.set_current(index, timecode)
+
+    def tick_progress(self, index: int, current_time: float, duration: Optional[float], playing: bool) -> Dict[str, Any]:
+        return LIB.update_progress(index, current_time, duration, playing)
+
+    def set_folder_volume(self, volume: float) -> Dict[str, Any]:
+        return LIB.set_folder_volume(volume)
+
+    def set_folder_autoplay(self, enabled: bool) -> Dict[str, Any]:
+        return LIB.set_folder_autoplay(bool(enabled))
+
+    def set_folder_rate(self, rate: float) -> Dict[str, Any]:
+        return LIB.set_folder_rate(float(rate))
+
+    def set_order(self, fids: List[str]) -> Dict[str, Any]:
+        return LIB.set_order(fids)
+
+    def start_duration_scan(self) -> Dict[str, Any]:
+        LIB.start_duration_scan()
+        return {"ok": True}
+
+    def get_prefs(self) -> Dict[str, Any]:
+        return {"ok": True, "prefs": PREFS.get()}
+
+    def set_prefs(self, patch: Dict[str, Any]) -> Dict[str, Any]:
+        if not isinstance(patch, dict): return {"ok": False, "error": "patch must be an object"}
+        if "ui_zoom" in patch:
+            try: patch["ui_zoom"] = float(patch["ui_zoom"])
+            except Exception: patch.pop("ui_zoom", None)
+        if "split_ratio" in patch:
+            try: patch["split_ratio"] = float(patch["split_ratio"])
+            except Exception: patch.pop("split_ratio", None)
+        if "dock_ratio" in patch:
+            try: patch["dock_ratio"] = float(patch["dock_ratio"])
+            except Exception: patch.pop("dock_ratio", None)
+        if "always_on_top" in patch:
+            patch["always_on_top"] = bool(patch["always_on_top"])
+        PREFS.update(patch)
+        return {"ok": True}
+
+    def set_always_on_top(self, enabled: bool) -> Dict[str, Any]:
+        enabled = bool(enabled)
+        PREFS.update({"always_on_top": enabled})
+        try:
+            win = webview.windows[0]
+            if hasattr(win, "on_top"):
+                setattr(win, "on_top", enabled)
+        except Exception:
+            pass
+        return {"ok": True}
+
+    def save_window_state(self) -> Dict[str, Any]:
+        try:
+            win = webview.windows[0]
+            w = getattr(win, "width", None)
+            h = getattr(win, "height", None)
+            x = getattr(win, "x", None)
+            y = getattr(win, "y", None)
+            patch: Dict[str, Any] = {"window": {}}
+            if isinstance(w, int) and w > 100: patch["window"]["width"] = w
+            if isinstance(h, int) and h > 100: patch["window"]["height"] = h
+            if isinstance(x, int): patch["window"]["x"] = x
+            if isinstance(y, int): patch["window"]["y"] = y
+            PREFS.update(patch)
+            return {"ok": True}
+        except Exception as e:
+            return {"ok": False, "error": str(e)}
+
+    def get_note(self, fid: str) -> Dict[str, Any]:
+        if not isinstance(fid, str): return {"ok": False, "error": "bad fid"}
+        return {"ok": True, "note": LIB.get_note(fid)}
+
+    def set_note(self, fid: str, note: str) -> Dict[str, Any]:
+        if not isinstance(fid, str): return {"ok": False, "error": "bad fid"}
+        return LIB.set_note(fid, note)
+
+    def get_current_video_meta(self) -> Dict[str, Any]:
+        return LIB.get_current_video_metadata()
+
+    def get_current_subtitle(self) -> Dict[str, Any]:
+        return LIB.get_subtitle_for_current()
+
+    def get_embedded_subtitles(self) -> Dict[str, Any]:
+        """Get list of embedded subtitle tracks for current video."""
+        return LIB.get_embedded_subtitles()
+
+    def extract_embedded_subtitle(self, track_index: int) -> Dict[str, Any]:
+        """Extract an embedded subtitle track and return its URL."""
+        return LIB.extract_embedded_subtitle(track_index)
+
+    def get_available_subtitles(self) -> Dict[str, Any]:
+        """Get all available subtitle options (sidecar + embedded)."""
+        return LIB.get_available_subtitles()
+
+    def load_sidecar_subtitle(self, file_path: str) -> Dict[str, Any]:
+        """Load a specific sidecar subtitle file."""
+        return LIB.load_sidecar_subtitle(file_path)
+
+    def choose_subtitle_file(self) -> Dict[str, Any]:
+        win = webview.windows[0]
+        dialog_type = webview.OPEN_DIALOG if not hasattr(webview, 'FileDialog') else webview.FileDialog.OPEN
+        res = win.create_file_dialog(
+            dialog_type,
+            allow_multiple=False,
+            file_types=("Subtitle files (*.srt;*.vtt)",)
+        )
+        if not res:
+            return {"ok": False, "cancelled": True}
+        return LIB.set_subtitle_for_current(res[0])
+
+    def reset_watch_progress(self) -> Dict[str, Any]:
+        return LIB.reset_watch_progress()
+
+HTML = r"""<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>TutorialDock</title>
+<link rel="stylesheet" href="/fonts.css">
+<link rel="stylesheet" href="/fa.css">
+<style>
+:root{
+  --zoom:1;
+  /* Base backgrounds */
+  --bg0:#060709; --bg1:#0a0c10;
+  /* Strokes - consistent opacity scale */
+  --stroke:rgba(255,255,255,.07);
+  --strokeLight:rgba(255,255,255,.04);
+  --strokeMed:rgba(255,255,255,.10);
+  /* Text - consistent hierarchy */
+  --text:rgba(240,244,255,.91);
+  --textMuted:rgba(155,165,190,.68);
+  --textDim:rgba(120,132,165,.50);
+  /* Surfaces */
+  --surface:rgba(255,255,255,.025);
+  --surfaceHover:rgba(255,255,255,.045);
+  --surfaceActive:rgba(255,255,255,.06);
+  /* Shadows */
+  --shadow:0 16px 48px rgba(0,0,0,.50);
+  --shadow2:0 8px 24px rgba(0,0,0,.32);
+  /* Radii */
+  --r:6px; --r2:5px;
+  /* Fonts */
+  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --sans:"Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
+  --brand:"Sora","Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
+  /* Icons */
+  --icon:rgba(175,185,210,.65);
+  --iconStrong:rgba(220,228,248,.85);
+  /* Accent - consistent blue */
+  --accent:rgb(95,175,255);
+  --accentGlow:rgba(95,175,255,.12);
+  --accentBorder:rgba(95,175,255,.22);
+  --accentBg:rgba(95,175,255,.07);
+  /* Success - consistent green */
+  --success:rgb(75,200,130);
+  --successBg:rgba(75,200,130,.07);
+  --successBorder:rgba(75,200,130,.20);
+  /* Tree */
+  --tree:rgba(195,205,230,.10);
+  --treeNode:rgba(200,212,238,.52);
+}
+*{box-sizing:border-box;}
+html,body{height:100%;}
+body{
+  margin:0; padding:0; font-family:var(--sans); color:var(--text); overflow:hidden;
+  width:100vw; height:100vh;
+  background:
+    radial-gradient(800px 500px at 10% 5%, rgba(95,175,255,.08), transparent 60%),
+    radial-gradient(700px 500px at 90% 8%, rgba(75,200,130,.05), transparent 65%),
+    linear-gradient(180deg, var(--bg1), var(--bg0));
+  letter-spacing:.04px;
+}
+#zoomRoot{
+  transform:scale(var(--zoom));
+  transform-origin:0 0;
+  width:calc(100vw / var(--zoom));
+  height:calc(100vh / var(--zoom));
+  overflow:hidden;
+  box-sizing:border-box;
+}
+.app{height:100%; display:flex; flex-direction:column; position:relative; overflow:hidden;}
+.fa, i.fa-solid, i.fa-regular, i.fa-light, i.fa-thin{color:var(--icon)!important;}
+
+.topbar{
+  display:flex; align-items:center; gap:14px;
+  padding:12px 14px;
+  height:72px;
+  flex:0 0 72px;
+  border-bottom:1px solid var(--stroke);
+  background:
+    linear-gradient(135deg, transparent 0%, transparent 48%, rgba(255,255,255,.015) 50%, transparent 52%, transparent 100%) 0 0 / 8px 8px,
+    linear-gradient(180deg, rgba(22,26,38,1), rgba(18,22,32,1));
+  min-width:0; z-index:5; position:relative;
+  box-sizing:border-box;
+}
+.topbar::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background:
+    radial-gradient(circle, rgba(180,210,255,.096) 2px, transparent 2.5px) 0 0 / 12px 12px,
+    radial-gradient(circle, rgba(220,230,255,.08) 2px, transparent 2.5px) 6px 6px / 12px 12px;
+  pointer-events:none;
+  z-index:1;
+  -webkit-mask-image: linear-gradient(90deg, black 0%, rgba(0,0,0,.5) 20%, transparent 40%);
+  mask-image: linear-gradient(90deg, black 0%, rgba(0,0,0,.5) 20%, transparent 40%);
+}
+.topbar::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
+  pointer-events:none;
+  z-index:0;
+}
+
+.brand{display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; position:relative; z-index:1;}
+.appIcon{
+  display:flex; align-items:center; justify-content:center;
+  flex:0 0 auto;
+  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
+  overflow:visible;
+  transition: transform .4s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
+  cursor:pointer;
+  position:relative;
+}
+.appIconGlow{
+  position:absolute;
+  inset:-15px;
+  border-radius:50%;
+  pointer-events:none;
+  opacity:0;
+  transition:opacity .4s ease;
+}
+.appIconGlow::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:50%;
+  background:radial-gradient(circle, rgba(100,180,255,.25), rgba(130,230,180,.15), transparent 70%);
+  transform:scale(.5);
+  transition:transform .4s ease;
+}
+.appIconGlow::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:50%;
+  background:conic-gradient(from 0deg, rgba(100,180,255,.5), rgba(130,230,180,.5), rgba(210,160,255,.5), rgba(100,180,255,.5));
+  mask:radial-gradient(circle, transparent 45%, black 47%, black 53%, transparent 55%);
+  -webkit-mask:radial-gradient(circle, transparent 45%, black 47%, black 53%, transparent 55%);
+  animation:none;
+}
+@keyframes logoSpin{
+  0%{transform:rotate(0deg);}
+  100%{transform:rotate(360deg);}
+}
+@keyframes logoWiggle{
+  0%,100%{transform:rotate(0deg) scale(1);}
+  10%{transform:rotate(-12deg) scale(1.15);}
+  20%{transform:rotate(10deg) scale(1.12);}
+  30%{transform:rotate(-8deg) scale(1.18);}
+  40%{transform:rotate(6deg) scale(1.14);}
+  50%{transform:rotate(-4deg) scale(1.2);}
+  60%{transform:rotate(3deg) scale(1.16);}
+  70%{transform:rotate(-2deg) scale(1.12);}
+  80%{transform:rotate(1deg) scale(1.08);}
+  90%{transform:rotate(0deg) scale(1.04);}
+}
+.appIcon:hover{
+  animation:logoWiggle .8s ease-out;
+  filter: drop-shadow(0 0 20px rgba(100,180,255,.5)) drop-shadow(0 0 40px rgba(130,230,180,.3)) drop-shadow(0 12px 24px rgba(0,0,0,.4));
+}
+.appIcon:hover .appIconGlow{
+  opacity:1;
+}
+.appIcon:hover .appIconGlow::before{
+  transform:scale(1.2);
+}
+.appIcon:hover .appIconGlow::after{
+  animation:logoSpin 3s linear infinite;
+}
+.appIcon i{
+  font-size:36px;
+  line-height:1;
+  background:linear-gradient(135deg, rgba(100,180,255,.98), rgba(130,230,180,.92), rgba(210,160,255,.82));
+  -webkit-background-clip:text;
+  background-clip:text;
+  color:transparent!important;
+  -webkit-text-stroke: 0.5px rgba(0,0,0,.16);
+  opacity:.98;
+  transition:all .3s ease;
+  position:relative;
+  z-index:2;
+}
+.appIcon:hover i{
+  background:linear-gradient(135deg, rgba(130,210,255,1), rgba(160,250,200,1), rgba(230,180,255,1));
+  -webkit-background-clip:text;
+  background-clip:text;
+}
+.brandText{min-width:0; position:relative; z-index:1;}
+.appName{
+  font-family:var(--brand);
+  font-weight:900;
+  font-size:18px;
+  line-height:1.02;
+  letter-spacing:.35px;
+  margin:0; padding:0;
+  transition:text-shadow .3s ease;
+}
+.brand:hover .appName{
+  text-shadow:0 0 20px rgba(100,180,255,.4), 0 0 40px rgba(130,230,180,.2);
+}
+.tagline{
+  margin-top:5px;
+  font-size:11.5px;
+  line-height:1.2;
+  color:rgba(180,188,210,.76);
+  letter-spacing:.18px;
+  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
+  max-width:52vw;
+  transition:color .3s ease;
+}
+.brand:hover .tagline{
+  color:rgba(200,210,230,.9);
+}
+
+.actions{
+  display:flex; align-items:center; gap:8px;
+  flex:0 0 auto; flex-wrap:nowrap; white-space:nowrap;
+  position:relative; z-index:7;
+}
+.actionGroup{
+  display:flex; align-items:center; gap:6px;
+}
+.actionDivider{
+  width:1px; height:28px;
+  background:linear-gradient(180deg, transparent, rgba(255,255,255,.12) 20%, rgba(255,255,255,.12) 80%, transparent);
+  margin:0 4px;
+}
+
+/* Zoom control */
+.zoomControl{
+  display:flex; align-items:center; gap:0;
+  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
+  border:1px solid rgba(255,255,255,.08);
+  border-radius:8px;
+  padding:2px;
+  box-shadow:0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.05);
+}
+.zoomBtn{
+  width:28px; height:28px;
+  border:none; background:transparent;
+  border-radius:6px;
+  color:var(--text);
+  cursor:pointer;
+  display:flex; align-items:center; justify-content:center;
+  transition:all .15s ease;
+}
+.zoomBtn:hover{
+  background:rgba(255,255,255,.08);
+}
+.zoomBtn:active{
+  background:rgba(255,255,255,.12);
+  transform:scale(.95);
+}
+.zoomBtn .fa{font-size:10px; opacity:.8;}
+.zoomValue{
+  min-width:48px;
+  text-align:center;
+  font-family:var(--mono);
+  font-size:11px;
+  font-weight:600;
+  color:var(--text);
+  opacity:.9;
+  cursor:pointer;
+  padding:4px 6px;
+  border-radius:4px;
+  transition:background .15s ease;
+}
+.zoomValue:hover{
+  background:rgba(255,255,255,.06);
+}
+
+/* Toolbar buttons */
+.toolbarBtn{
+  width:34px; height:34px;
+  border:1px solid rgba(255,255,255,.08);
+  border-radius:8px;
+  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
+  color:var(--text);
+  cursor:pointer;
+  display:flex; align-items:center; justify-content:center;
+  transition:all .2s cubic-bezier(.4,0,.2,1);
+  position:relative;
+  overflow:hidden;
+  box-shadow:0 2px 6px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06);
+}
+.toolbarBtn::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.15), transparent 70%);
+  opacity:0;
+  transition:opacity .2s ease;
+}
+.toolbarBtn:hover{
+  border-color:rgba(255,255,255,.15);
+  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
+  transform:translateY(-1px);
+  box-shadow:0 4px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
+}
+.toolbarBtn:hover::before{opacity:1;}
+.toolbarBtn:active{
+  transform:translateY(0);
+  box-shadow:0 1px 4px rgba(0,0,0,.15);
+}
+.toolbarBtn .fa{font-size:13px; opacity:.85; transition:transform .2s ease;}
+.toolbarBtn:hover .fa{transform:scale(1.1);}
+
+/* Primary split button styling */
+.splitBtn.primary{
+  border-color:rgba(95,175,255,.25);
+  background:linear-gradient(180deg, rgba(95,175,255,.12), rgba(95,175,255,.04));
+  box-shadow:0 2px 8px rgba(0,0,0,.15), 0 4px 20px rgba(95,175,255,.1), inset 0 1px 0 rgba(255,255,255,.1);
+}
+.splitBtn.primary:hover{
+  border-color:rgba(95,175,255,.4);
+  box-shadow:0 4px 12px rgba(0,0,0,.2), 0 8px 32px rgba(95,175,255,.15), inset 0 1px 0 rgba(255,255,255,.15);
+}
+.splitBtn.primary .drop{
+  border-left-color:rgba(95,175,255,.2);
+}
+.btn{
+  display:inline-flex; align-items:center; justify-content:center; gap:8px;
+  padding:9px 14px;
+  border-radius:var(--r2);
+  border:1px solid rgba(255,255,255,.08);
+  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
+  color:var(--text);
+  cursor:pointer; user-select:none;
+  box-shadow:
+    0 2px 4px rgba(0,0,0,.2),
+    0 8px 24px rgba(0,0,0,.25),
+    inset 0 1px 0 rgba(255,255,255,.08),
+    inset 0 -1px 0 rgba(0,0,0,.1);
+  transition:all .2s cubic-bezier(.4,0,.2,1);
+  font-size:12.5px; font-weight:700; letter-spacing:.02em;
+  position:relative;
+  overflow:hidden;
+}
+.btn::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 50%);
+  opacity:0;
+  transition:opacity .2s ease;
+}
+.btn:hover{
+  border-color:rgba(255,255,255,.15);
+  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
+  transform:translateY(-2px);
+  box-shadow:
+    0 4px 8px rgba(0,0,0,.2),
+    0 12px 32px rgba(0,0,0,.3),
+    inset 0 1px 0 rgba(255,255,255,.12),
+    inset 0 -1px 0 rgba(0,0,0,.1);
+}
+.btn:hover::before{opacity:1;}
+.btn:active{
+  transform:translateY(0);
+  box-shadow:
+    0 1px 2px rgba(0,0,0,.2),
+    0 4px 12px rgba(0,0,0,.2),
+    inset 0 1px 0 rgba(255,255,255,.06);
+}
+.btn.primary{
+  border-color:rgba(95,175,255,.3);
+  background:linear-gradient(180deg, rgba(95,175,255,.2), rgba(95,175,255,.08));
+  color:#fff;
+  text-shadow:0 1px 2px rgba(0,0,0,.3);
+}
+.btn.primary::before{
+  background:linear-gradient(180deg, rgba(255,255,255,.15), transparent 60%);
+}
+.btn.primary:hover{
+  border-color:rgba(95,175,255,.45);
+  background:linear-gradient(180deg, rgba(95,175,255,.28), rgba(95,175,255,.12));
+  box-shadow:
+    0 4px 8px rgba(0,0,0,.2),
+    0 12px 32px rgba(95,175,255,.2),
+    0 0 0 1px rgba(95,175,255,.1),
+    inset 0 1px 0 rgba(255,255,255,.15);
+}
+.btn .fa{font-size:14px; opacity:.95; color:var(--iconStrong)!important; transition:transform .2s ease; position:relative; z-index:1;}
+.btn.primary .fa{color:#fff!important;}
+.btn:hover .fa{transform:scale(1.1);}
+
+.splitBtn{
+  display:inline-flex;
+  border-radius:var(--r2);
+  overflow:hidden;
+  border:1px solid rgba(255,255,255,.08);
+  box-shadow:
+    0 2px 4px rgba(0,0,0,.2),
+    0 8px 24px rgba(0,0,0,.25),
+    inset 0 1px 0 rgba(255,255,255,.06);
+  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
+  position:relative; z-index:8;
+  transition:all .2s ease;
+}
+.splitBtn:hover{
+  border-color:rgba(255,255,255,.14);
+  box-shadow:
+    0 4px 8px rgba(0,0,0,.2),
+    0 12px 32px rgba(0,0,0,.3),
+    inset 0 1px 0 rgba(255,255,255,.08);
+  transform:translateY(-1px);
+}
+.splitBtn .btn{border:none; box-shadow:none; border-radius:0; background:transparent; padding:9px 12px; transform:none;}
+.splitBtn .btn::before{display:none;}
+.splitBtn .btn:hover{background:rgba(255,255,255,.06); transform:none; box-shadow:none;}
+.splitBtn .drop{
+  width:40px; padding:8px 0;
+  border-left:1px solid rgba(255,255,255,.08);
+  display:flex; align-items:center; justify-content:center;
+  transition:background .15s ease;
+  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
+}
+.splitBtn .drop:hover{background:rgba(255,255,255,.06);}
+.splitBtn .drop .fa{font-size:16px; opacity:.88; color:var(--iconStrong)!important; transition:transform .2s ease;}
+.splitBtn .drop:hover .fa{transform:translateY(2px);}
+
+.dropdownPortal{
+  position:fixed; z-index:99999;
+  min-width:320px; max-width:560px; max-height:360px;
+  overflow:auto;
+  border-radius:7px;
+  border:1px solid rgba(255,255,255,.12);
+  background:rgba(18,20,26,.94);
+  box-shadow:0 26px 70px rgba(0,0,0,.70);
+  backdrop-filter:blur(16px);
+  padding:6px;
+  display:none;
+  transform:scale(var(--zoom));
+  transform-origin:top left;
+  scrollbar-width:thin;
+  scrollbar-color:rgba(255,255,255,.14) rgba(255,255,255,.02);
+}
+.dropdownPortal::-webkit-scrollbar{width:4px; height:4px;}
+.dropdownPortal::-webkit-scrollbar-track{background:rgba(255,255,255,.015);}
+.dropdownPortal::-webkit-scrollbar-thumb{background:rgba(255,255,255,.11); border-radius:999px;}
+.dropdownPortal::-webkit-scrollbar-button{width:0; height:0; display:none;}
+
+.dropItem{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:6px; cursor:pointer; user-select:none; color:rgba(246,248,255,.92); font-weight:760; font-size:12.7px; letter-spacing:.12px; line-height:1.25; transition:all .15s ease; position:relative;}
+.dropItem:hover{background:rgba(255,255,255,.06); padding-right:36px;}
+.dropItem:active{transform:none;}
+.dropIcon{width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; opacity:.9; transition:transform .2s ease;}
+.dropItem:hover .dropIcon{transform:scale(1.1);}
+.dropIcon .fa{font-size:14px; color:var(--iconStrong)!important;}
+.dropName{white-space:nowrap; flex:1 1 auto; min-width:0; transition:mask-image .15s ease, -webkit-mask-image .15s ease;}
+.dropItem:hover .dropName{overflow:hidden; mask-image:linear-gradient(90deg, #000 80%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, #000 80%, transparent 100%);}
+.dropRemove{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:8px; background:rgba(255,100,100,.15); border:1px solid rgba(255,100,100,.25); color:rgba(255,180,180,.9); display:none; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:all .15s ease;}
+.dropItem:hover .dropRemove{display:flex;}
+.dropRemove:hover{background:rgba(255,100,100,.25); border-color:rgba(255,100,100,.4); color:rgba(255,220,220,1);}
+.dropEmpty{padding:10px 10px; color:rgba(165,172,196,.78); font-size:12.5px;}
+
+.seg{display:inline-flex; border:1px solid rgba(255,255,255,.09); border-radius:var(--r2); overflow:hidden; background:rgba(255,255,255,.02); box-shadow:var(--shadow2); transition:border-color .15s ease;}
+.seg:hover{border-color:rgba(255,255,255,.14);}
+.seg .btn{border:none; box-shadow:none; border-radius:0; padding:8px 9px; background:transparent; font-weight:820; transform:none;}
+.seg .btn:hover{background:rgba(255,255,255,.06); transform:none; box-shadow:none;}
+.seg .btn:active{background:rgba(255,255,255,.08);}
+.seg .mid{border-left:1px solid rgba(255,255,255,.10); border-right:1px solid rgba(255,255,255,.10); min-width:62px; font-variant-numeric:tabular-nums;}
+
+.switch{
+  display:inline-flex; align-items:center; justify-content:center; gap:8px;
+  padding:6px 10px;
+  border-radius:8px;
+  border:1px solid rgba(255,255,255,.08);
+  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
+  box-shadow:0 2px 6px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05);
+  cursor:pointer; user-select:none;
+  font-size:11.5px; font-weight:650; letter-spacing:.01em;
+  color:var(--text);
+  line-height:1;
+  transition:all .2s ease;
+}
+.switch:hover{
+  border-color:rgba(255,255,255,.14);
+  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
+  box-shadow:0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
+}
+.switch input{display:none;}
+.track{
+  width:32px; height:18px;
+  border-radius:999px;
+  background:rgba(255,255,255,.06);
+  border:1px solid rgba(255,255,255,.10);
+  position:relative;
+  transition:all .25s cubic-bezier(.4,0,.2,1);
+  flex:0 0 auto;
+  display:flex; align-items:center;
+}
+.knob{
+  margin-left:2px;
+  width:14px; height:14px;
+  border-radius:999px;
+  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.18));
+  box-shadow:0 2px 6px rgba(0,0,0,.25);
+  transition:transform .2s cubic-bezier(.4,0,.2,1), background .2s ease, box-shadow .2s ease;
+}
+.switch input:checked + .track{
+  background:linear-gradient(90deg, rgba(95,175,255,.25), rgba(130,200,255,.2));
+  border-color:rgba(95,175,255,.3);
+  box-shadow:0 0 12px rgba(95,175,255,.15);
+}
+.switch input:checked + .track .knob{
+  transform:translateX(14px);
+  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(200,230,255,.8));
+  box-shadow:0 2px 8px rgba(95,175,255,.3), 0 0 0 2px rgba(95,175,255,.15);
+}
+
+.content{flex:1 1 auto; min-height:0; padding:12px; display:grid; grid-template-columns:calc(62% - 7px) 14px calc(38% - 7px); gap:0; overflow:hidden;}
+.panel{border:1px solid var(--stroke); border-radius:var(--r); background:linear-gradient(180deg, var(--surface), rgba(255,255,255,.015)); box-shadow:0 8px 32px rgba(0,0,0,.35); overflow:hidden; min-height:0; display:flex; flex-direction:column; backdrop-filter:blur(12px);}
+.panelHeader{padding:12px 12px 10px; border-bottom:1px solid var(--stroke); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex:0 0 auto; min-width:0;}
+.nowTitle{font-weight:860; font-size:13.4px; letter-spacing:.14px; max-width:60ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+.nowSub{margin-top:4px; color:var(--textMuted); font-size:11.6px; font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80ch;}
+
+.progressPill{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; border:1px solid var(--strokeMed); background:radial-gradient(400px 100px at 20% 0%, var(--accentGlow), transparent 60%), var(--surface); box-shadow:var(--shadow2); min-width:220px;}
+.progressLabel{font-size:11.2px; font-weight:820; letter-spacing:.12px; text-transform:uppercase; color:rgba(190,198,220,.78); margin-right:2px;}
+.progressBar{width:120px; height:8px; border-radius:999px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.05); overflow:hidden;}
+.progressBar>div{height:100%; width:0%; background:linear-gradient(90deg, rgba(100,180,255,.95), rgba(130,230,180,.88));}
+.progressPct{font-family:var(--mono); font-size:11.6px; color:rgba(230,235,255,.92); font-variant-numeric:tabular-nums; letter-spacing:.10px; min-width:58px; text-align:right;}
+
+.videoWrap{position:relative; background:#000; flex:0 0 auto;}
+video{width:100%; height:auto; display:block; background:#000; aspect-ratio:16/9; outline:none; cursor:pointer;}
+video::cue{
+  background:transparent;
+  color:#fff;
+  font-family:var(--sans);
+  font-size:1.1em;
+  font-weight:600;
+  text-shadow:
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000,
+    -2px 0 0 #000,
+    2px 0 0 #000,
+    0 -2px 0 #000,
+    0 2px 0 #000;
+}
+
+.videoOverlay{
+  position:absolute;
+  inset:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  pointer-events:none;
+  z-index:5;
+}
+.overlayIcon{
+  position:relative;
+  width:100px;
+  height:100px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  opacity:0;
+  transition:opacity 0.8s ease;
+  border-radius:50%;
+  background:rgba(20,25,35,.5);
+  backdrop-filter:blur(8px) saturate(1.3);
+  -webkit-backdrop-filter:blur(8px) saturate(1.3);
+  border:1.5px solid rgba(255,255,255,.15);
+  box-shadow:
+    0 8px 32px rgba(0,0,0,.5),
+    0 0 0 1px rgba(0,0,0,.3);
+}
+.overlayIcon.show{
+  opacity:1;
+}
+.overlayIcon.pulse{
+  animation:overlayPulse 0.4s ease-out;
+}
+@keyframes overlayPulse{
+  0%{transform:scale(1);}
+  50%{transform:scale(1.15);}
+  100%{transform:scale(1);}
+}
+.overlayIcon::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:50%;
+  background:
+    radial-gradient(circle at 30% 30%, rgba(255,255,255,.1), transparent 50%),
+    radial-gradient(circle at 70% 70%, rgba(95,175,255,.08), transparent 50%);
+  pointer-events:none;
+}
+.overlayIcon.show:hover{
+  border-color:rgba(255,255,255,.22);
+  box-shadow:
+    0 12px 40px rgba(0,0,0,.6),
+    0 0 0 1px rgba(0,0,0,.4),
+    0 0 40px rgba(95,175,255,.1);
+}
+.overlayIcon i{
+  font-size:36px;
+  color:rgba(255,255,255,.92)!important;
+  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
+  position:relative;
+  z-index:2;
+  transition:transform 0.3s ease, color 0.3s ease;
+  margin-left:4px; /* center play icon visually */
+}
+.overlayIcon.pause i{
+  margin-left:0;
+}
+.overlayIcon.show:hover i{
+  transform:scale(1.1);
+  color:rgba(255,255,255,1)!important;
+}
+
+.controls{display:flex; flex-direction:column; gap:10px; padding:12px; border-top:1px solid var(--stroke); flex:0 0 auto; background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.0));}
+.controlsRow{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
+.group{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
+
+.iconBtn{
+  width:40px; height:36px;
+  border-radius:8px;
+  border:1px solid rgba(255,255,255,.08);
+  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
+  box-shadow:
+    0 2px 6px rgba(0,0,0,.12),
+    inset 0 1px 0 rgba(255,255,255,.06);
+  display:inline-flex; align-items:center; justify-content:center;
+  cursor:pointer; user-select:none;
+  transition:all .2s cubic-bezier(.4,0,.2,1);
+  position:relative;
+  overflow:hidden;
+}
+.iconBtn::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.15), transparent 70%);
+  opacity:0;
+  transition:opacity .2s ease;
+}
+.iconBtn:hover{
+  border-color:rgba(255,255,255,.15);
+  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
+  transform:translateY(-1px);
+  box-shadow:
+    0 4px 12px rgba(0,0,0,.2),
+    inset 0 1px 0 rgba(255,255,255,.1);
+}
+.iconBtn:hover::before{opacity:1;}
+.iconBtn:active{
+  transform:translateY(0);
+  box-shadow:0 1px 4px rgba(0,0,0,.15);
+}
+.iconBtn.primary{
+  border-color:rgba(95,175,255,.25);
+  background:linear-gradient(180deg, rgba(95,175,255,.15), rgba(95,175,255,.05));
+  box-shadow:
+    0 2px 8px rgba(0,0,0,.15),
+    0 4px 16px rgba(95,175,255,.08),
+    inset 0 1px 0 rgba(255,255,255,.1);
+}
+.iconBtn.primary::before{
+  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.2), transparent 70%);
+}
+.iconBtn.primary:hover{
+  border-color:rgba(95,175,255,.4);
+  background:linear-gradient(180deg, rgba(95,175,255,.22), rgba(95,175,255,.08));
+  box-shadow:
+    0 4px 12px rgba(0,0,0,.2),
+    0 8px 24px rgba(95,175,255,.12),
+    inset 0 1px 0 rgba(255,255,255,.15);
+}
+.iconBtn .fa{font-size:15px; color:var(--iconStrong)!important; opacity:.9; transition:transform .2s ease; position:relative; z-index:1;}
+.iconBtn:hover .fa{transform:scale(1.1);}
+
+.timeChip{display:inline-flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; border:1px solid var(--strokeMed); background:var(--surface); box-shadow:var(--shadow2); font-family:var(--mono); font-size:12px; color:var(--text); letter-spacing:.15px; font-variant-numeric:tabular-nums; transition:border-color .15s ease;}
+.timeDot{width:8px; height:8px; border-radius:999px; background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.90), rgba(130,230,180,.55)); box-shadow:0 0 0 3px rgba(130,230,180,.10); opacity:.95; transition:transform .3s ease; animation:pulse 2s ease-in-out infinite;}
+@keyframes pulse{0%,100%{transform:scale(1);opacity:.95;} 50%{transform:scale(1.15);opacity:1;}}
+
+.seekWrap{display:flex; align-items:center; gap:10px; width:100%; position:relative;}
+.seekTrack{
+  position:absolute;
+  left:0; right:0; top:50%;
+  height:10px;
+  transform:translateY(-50%);
+  border-radius:999px;
+  background:rgba(255,255,255,.06);
+  border:1px solid rgba(255,255,255,.10);
+  box-shadow:0 8px 18px rgba(0,0,0,.28);
+  overflow:hidden;
+  pointer-events:none;
+}
+.seekFill{
+  height:100%;
+  width:0%;
+  background:linear-gradient(90deg, rgba(95,175,255,.7), rgba(130,200,255,.5) 60%, rgba(180,230,200,.4));
+  border-radius:999px 0 0 999px;
+  box-shadow:0 0 12px rgba(95,175,255,.3);
+  transition:width .1s linear;
+}
+.seek{-webkit-appearance:none; appearance:none; width:100%; height:18px; border-radius:999px; background:transparent; border:none; box-shadow:none; outline:none; position:relative; z-index:2; cursor:pointer; margin:0;}
+.seek::-webkit-slider-runnable-track{background:transparent; height:18px;}
+.seek::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:999px; border:2px solid rgba(255,255,255,.25); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(200,220,255,.8)); box-shadow:0 4px 12px rgba(0,0,0,.4), 0 0 0 4px rgba(95,175,255,.15); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; margin-top:0;}
+.seek:hover::-webkit-slider-thumb{transform:scale(1.15); box-shadow:0 6px 16px rgba(0,0,0,.5), 0 0 0 6px rgba(95,175,255,.2);}
+.seek:active::-webkit-slider-thumb{transform:scale(1.05); box-shadow:0 2px 8px rgba(0,0,0,.4), 0 0 0 8px rgba(95,175,255,.25);}
+.seek::-moz-range-track{background:transparent; height:18px;}
+.seek::-moz-range-thumb{width:18px; height:18px; border-radius:999px; border:2px solid rgba(255,255,255,.25); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(200,220,255,.8)); box-shadow:0 4px 12px rgba(0,0,0,.4); cursor:pointer;}
+
+.miniCtl{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; border:1px solid var(--strokeMed); background:var(--surface); box-shadow:var(--shadow2); position:relative; transition:border-color .15s ease;}
+.miniCtl:hover{border-color:rgba(255,255,255,.16);}
+.miniCtl .fa{font-size:14px; color:var(--iconStrong)!important; opacity:.95; flex:0 0 auto;}
+
+.volWrap{position:relative; width:120px; height:14px; display:flex; align-items:center;}
+.volTrack{
+  position:absolute;
+  left:0; right:0; top:50%;
+  height:6px;
+  transform:translateY(-50%);
+  border-radius:999px;
+  background:rgba(255,255,255,.06);
+  border:1px solid rgba(255,255,255,.10);
+  overflow:hidden;
+  pointer-events:none;
+}
+.volFill{
+  height:100%;
+  width:100%;
+  background:linear-gradient(90deg, rgba(95,175,255,.6), rgba(130,200,255,.4));
+  border-radius:999px 0 0 999px;
+  box-shadow:0 0 8px rgba(95,175,255,.2);
+  transition:width .05s linear;
+}
+.vol{-webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:999px; background:transparent; border:none; outline:none; position:relative; z-index:2; cursor:pointer; margin:0;}
+.vol::-webkit-slider-runnable-track{background:transparent; height:14px;}
+.vol::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:999px; border:2px solid rgba(255,255,255,.25); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(200,220,255,.8)); box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 0 3px rgba(95,175,255,.12); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;}
+.vol:hover::-webkit-slider-thumb{transform:scale(1.15); box-shadow:0 3px 10px rgba(0,0,0,.4), 0 0 0 4px rgba(95,175,255,.18);}
+.vol::-moz-range-track{background:transparent; height:14px;}
+.vol::-moz-range-thumb{width:14px; height:14px; border-radius:999px; border:2px solid rgba(255,255,255,.25); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(200,220,255,.8)); box-shadow:0 2px 8px rgba(0,0,0,.35); cursor:pointer;}
+
+.volTooltip{
+  position:absolute;
+  bottom:calc(100% + 12px);
+  left:0;
+  padding:8px 12px;
+  border-radius:var(--r2);
+  background:
+    radial-gradient(ellipse 120% 100% at 20% 0%, rgba(95,175,255,.12), transparent 50%),
+    linear-gradient(175deg, rgba(28,34,48,.97), rgba(16,20,30,.98));
+  border:1px solid rgba(255,255,255,.12);
+  color:#fff;
+  font-family:var(--mono);
+  font-size:13px;
+  font-weight:600;
+  letter-spacing:.03em;
+  white-space:nowrap;
+  pointer-events:none;
+  opacity:0;
+  transform:translateX(-50%) translateY(4px);
+  transition:opacity .15s ease, transform .15s ease, left .05s linear;
+  box-shadow:
+    0 0 0 1px rgba(0,0,0,.3),
+    0 4px 8px rgba(0,0,0,.2),
+    0 12px 24px rgba(0,0,0,.25),
+    inset 0 1px 0 rgba(255,255,255,.08);
+  backdrop-filter:blur(16px);
+  z-index:100;
+}
+.volTooltip::before{
+  content:"";
+  position:absolute;
+  top:0; left:0; right:0;
+  height:1px;
+  background:linear-gradient(90deg, transparent, rgba(95,175,255,.4) 50%, transparent);
+  border-radius:var(--r2) var(--r2) 0 0;
+}
+.volTooltip::after{
+  content:"";
+  position:absolute;
+  top:100%;
+  left:50%;
+  transform:translateX(-50%);
+  border:6px solid transparent;
+  border-top-color:rgba(20,26,36,.95);
+}
+.volTooltip.show{
+  opacity:1;
+  transform:translateX(-50%) translateY(0);
+}
+
+.speedBox{display:flex; align-items:center; gap:10px; position:relative;}
+.speedBtn{border:none; outline:none; background:transparent; color:rgba(246,248,255,.92); font-family:var(--mono); font-size:12px; letter-spacing:.10px; padding:0 2px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; gap:8px; transition:color .15s ease;}
+.speedBtn span:first-child{min-width:3.5ch; text-align:right;}
+.speedBtn:hover{color:rgba(255,255,255,1);}
+.speedCaret .fa{font-size:12px; opacity:.85; color:var(--icon)!important; transition:transform .2s ease;}
+.speedBtn:hover .speedCaret .fa{transform:translateY(2px);}
+.speedMenu{
+  position:absolute; right:0; bottom:calc(100% + 10px);
+  min-width:180px; padding:8px;
+  border-radius:7px; border:1px solid rgba(255,255,255,.12);
+  background:rgba(18,20,26,.94);
+  box-shadow:0 26px 70px rgba(0,0,0,.70);
+  backdrop-filter:blur(16px);
+  display:none; z-index:30;
+  transform:translateY(8px) scale(.96); opacity:0;
+  transition:transform .18s cubic-bezier(.175,.885,.32,1.275), opacity .15s ease;
+}
+.speedMenu.show{display:block; transform:translateY(0) scale(1); opacity:1;}
+.speedItem{padding:10px 10px; border-radius:6px; cursor:pointer; user-select:none; font-family:var(--mono); font-size:14px; color:rgba(246,248,255,.92); letter-spacing:.10px; display:flex; align-items:center; justify-content:space-between; gap:10px; transition:all .12s ease;}
+.speedItem:hover{background:rgba(255,255,255,.06); transform:translateX(3px);}
+.speedItem .dot{width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); flex:0 0 auto; transition:all .15s ease;}
+.speedItem.active .dot{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.92), rgba(100,180,255,.55)); box-shadow:0 0 0 3px rgba(100,180,255,.10); border-color:rgba(100,180,255,.24);}
+
+.subsBox{position:relative;}
+.subsMenu{
+  position:absolute; left:50%; bottom:calc(100% + 10px);
+  transform:translateX(-50%);
+  min-width:220px; padding:8px;
+  border-radius:7px; border:1px solid rgba(255,255,255,.12);
+  background:rgba(18,20,26,.94);
+  box-shadow:0 26px 70px rgba(0,0,0,.70);
+  backdrop-filter:blur(16px);
+  display:none; z-index:30;
+}
+.subsMenu.show{display:block;}
+.subsMenuHeader{padding:6px 12px 4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(150,160,190,.6);}
+.subsMenuItem{padding:10px 12px; border-radius:5px; cursor:pointer; user-select:none; font-size:12px; font-weight:600; color:rgba(246,248,255,.92); letter-spacing:.08px; display:flex; align-items:center; gap:10px; transition:background .12s ease;}
+.subsMenuItem:hover{background:rgba(255,255,255,.06);}
+.subsMenuItem .fa{font-size:13px; color:var(--iconStrong)!important; opacity:.85; width:18px; text-align:center;}
+.subsMenuItem.embedded{color:rgba(180,220,255,.95);}
+.subsDivider{height:1px; background:rgba(255,255,255,.08); margin:6px 4px;}
+.subsEmpty{padding:10px 12px; color:rgba(165,172,196,.7); font-size:11.5px; text-align:center;}
+
+.dividerWrap{display:flex; align-items:stretch; justify-content:center;}
+.divider{width:14px; cursor:col-resize; position:relative; background:transparent; border:none;}
+.divider::after{
+  content:""; position:absolute; top:50%; left:50%;
+  width:4px; height:54px; transform:translate(-50%,-50%);
+  border-radius:999px;
+  background:
+    radial-gradient(circle, rgba(255,255,255,.10) 35%, transparent 40%) 0 0/4px 12px,
+    radial-gradient(circle, rgba(255,255,255,.10) 35%, transparent 40%) 0 6px/4px 12px;
+  opacity:.20; pointer-events:none; transition:opacity .15s ease;
+}
+.divider:hover::after{opacity:.52;}
+
+.listWrap{
+  flex:1 1 auto; min-height:0; position:relative; overflow:hidden;
+}
+.list{
+  position:absolute; inset:0;
+  overflow-y:scroll; overflow-x:hidden;
+  --fade-top:75px; --fade-bottom:75px;
+  mask-image:linear-gradient(180deg, transparent 0%, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
+  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
+  transition:--fade-top 0.8s ease, --fade-bottom 0.8s ease;
+  scrollbar-width:none;
+}
+.list::-webkit-scrollbar{display:none;}
+@property --list-fade-top {
+  syntax: '<length>';
+  initial-value: 30px;
+  inherits: false;
+}
+@property --list-fade-bottom {
+  syntax: '<length>';
+  initial-value: 30px;
+  inherits: false;
+}
+.list.at-top{--fade-top:0px;}
+.list.at-bottom{--fade-bottom:0px;}
+
+.listScrollbar{
+  position:absolute;
+  top:12px; right:6px; bottom:12px;
+  width:3px;
+  border-radius:2px;
+  pointer-events:none;
+  opacity:0;
+  transition:opacity .4s ease;
+  z-index:10;
+}
+.listWrap:hover .listScrollbar, .listScrollbar.active{opacity:1;}
+.listScrollbarThumb{
+  position:absolute;
+  top:0; left:0; right:0;
+  min-height:24px;
+  background:linear-gradient(180deg, rgba(95,175,255,.3), rgba(95,175,255,.15));
+  border:1px solid rgba(95,175,255,.2);
+  border-radius:2px;
+  box-shadow:0 2px 8px rgba(0,0,0,.2);
+  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
+  cursor:grab;
+}
+.listScrollbarThumb:hover{
+  background:linear-gradient(180deg, rgba(95,175,255,.45), rgba(95,175,255,.25));
+  border-color:rgba(95,175,255,.35);
+}
+.listScrollbarThumb:active{
+  cursor:grabbing;
+}
+.listScrollbar.active .listScrollbarThumb{
+  background:linear-gradient(180deg, rgba(95,175,255,.5), rgba(95,175,255,.3));
+  border-color:rgba(95,175,255,.4);
+  box-shadow:0 2px 12px rgba(95,175,255,.15);
+}
+
+.row{position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:11px 12px; border-bottom:1px solid var(--strokeLight); cursor:pointer; user-select:none; transition:background .2s ease, box-shadow .2s ease; box-shadow:inset 3px 0 0 transparent;}
+.row:hover{background:var(--surfaceHover); box-shadow:inset 3px 0 0 rgba(95,175,255,.45);}
+.row:active{transform:none;}
+.row.active{background:linear-gradient(90deg, var(--accentBg), transparent); box-shadow:inset 3px 0 0 rgba(95,175,255,.7), 0 0 0 1px var(--accentGlow) inset;}
+.row.dragging{opacity:.55;}
+
+.left{min-width:0; display:flex; align-items:flex-start; gap:10px; flex:1 1 auto;}
+.numBadge{flex:0 0 auto; min-width:38px; height:22px; padding:0 8px; border-radius:999px; border:1px solid var(--strokeMed); background:radial-gradient(200px 60px at 20% 0%, var(--accentGlow), transparent 55%), var(--surface); box-shadow:var(--shadow2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11.8px; letter-spacing:.08px; color:var(--text); font-variant-numeric:tabular-nums; margin-top:1px; transition:all .2s ease; transform:translateX(0);}
+.row:hover .numBadge{border-color:var(--accentBorder); background:radial-gradient(200px 60px at 20% 0%, var(--accentGlow), transparent 50%), var(--surfaceHover); transform:translateX(4px);}
+
+.treeSvg{flex:0 0 auto; margin-top:1px; overflow:visible;}
+.treeSvg line{stroke:rgb(65,75,95); stroke-width:1.5;}
+.treeSvg circle{fill:rgba(230,240,255,.70); stroke:rgba(100,180,255,.22); stroke-width:1; transition:all .15s ease;}
+.row:hover .treeSvg circle{fill:rgba(240,250,255,.85); stroke:rgba(100,180,255,.35);}
+
+.textWrap{min-width:0; flex:1 1 auto; transition:transform .2s ease; transform:translateX(0);}
+.row:hover .textWrap{transform:translateX(4px);}
+.name{font-size:12.9px; font-weight:820; letter-spacing:.12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s ease;}
+.row:hover .name{color:rgba(255,255,255,.98);}
+.small{margin-top:4px; font-size:11.4px; color:var(--textMuted); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s ease;}
+.row:hover .small{color:rgba(175,185,210,.85);}
+
+.tag{flex:0 0 auto; display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; border:1px solid var(--stroke); background:var(--surface); color:var(--textMuted); font-size:11px; font-weight:820; letter-spacing:.12px; text-transform:uppercase; margin-top:2px; transition:all .15s ease;}
+.tag.now{border-color:var(--accentBorder); color:rgba(215,240,255,.90); background:var(--accentBg);}
+.tag.done{border-color:var(--successBorder); color:rgba(210,255,230,.88); background:var(--successBg);}
+.tag.hidden{display:none;}
+.row:hover .tag{transform:scale(1.02);}
+
+.row.drop-before::before,.row.drop-after::after{
+  content:""; position:absolute; left:10px; right:10px; border-top:2px solid var(--accent);
+  pointer-events:none; filter:drop-shadow(0 0 10px var(--accentGlow));
+}
+.row.drop-before::before{top:-1px;}
+.row.drop-after::after{bottom:-1px;}
+
+.empty{padding:14px 12px; color:var(--textMuted); font-size:12.5px; line-height:1.4;}
+
+.dock{flex:1 1 auto; min-height:0; border-top:1px solid rgba(255,255,255,.09); display:grid; grid-template-columns:62% 14px 38%; background:radial-gradient(900px 240px at 20% 0%, rgba(100,180,255,.06), transparent 60%), rgba(0,0,0,.10); overflow:hidden;}
+.dockPane{min-height:0; display:flex; flex-direction:column; overflow:hidden;}
+.dockInner{padding:12px; min-height:0; display:flex; flex-direction:column; gap:10px; height:100%;}
+.dockHeader{padding:12px 14px 11px; border:1px solid rgba(255,255,255,.08); border-radius:7px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); flex:0 0 auto; box-shadow:0 14px 36px rgba(0,0,0,.25);}
+#notesHeader{border-bottom-right-radius:7px;}
+#infoHeader{border-bottom-left-radius:7px; margin-right:12px;}
+.dockTitle{font-family:var(--brand); font-weight:800; letter-spacing:.02px; font-size:13.5px; color:rgba(246,248,255,.95); display:flex; align-items:center; gap:10px;}
+.dockTitle .fa{color:var(--iconStrong)!important; opacity:.88; font-size:14px;}
+
+.notesArea{flex:1 1 auto; min-height:0; overflow:hidden; position:relative;}
+.notesSaved{
+  position:absolute;
+  bottom:12px; right:12px;
+  padding:6px 10px;
+  border-radius:6px;
+  background:linear-gradient(135deg, rgba(100,200,130,.2), rgba(80,180,120,.15));
+  border:1px solid rgba(100,200,130,.25);
+  color:rgba(150,230,170,.95);
+  font-size:11px;
+  font-weight:600;
+  letter-spacing:.02em;
+  display:flex; align-items:center; gap:6px;
+  opacity:0;
+  transform:translateY(4px);
+  transition:opacity .4s ease, transform .4s ease;
+  pointer-events:none;
+  box-shadow:0 4px 12px rgba(0,0,0,.2);
+}
+.notesSaved.show{
+  opacity:1;
+  transform:translateY(0);
+}
+.notesSaved .fa{font-size:10px; color:rgba(130,220,160,.95)!important;}
+.notes{width:100%; height:100%; resize:none; border-radius:6px; border:1px solid rgba(255,255,255,.10); background:radial-gradient(900px 280px at 18% 0%, rgba(100,180,255,.09), transparent 62%), rgba(255,255,255,.02); color:rgba(246,248,255,.92); padding:12px 12px; outline:none; font-family:var(--sans); font-size:12.9px; line-height:1.45; letter-spacing:.08px; box-shadow:0 18px 45px rgba(0,0,0,.40); overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;}
+.notes::-webkit-scrollbar{width:2px; height:2px;}
+.notes::-webkit-scrollbar-track{background:transparent;}
+.notes::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:0;}
+.notes::-webkit-scrollbar-button{width:0; height:0; display:none;}
+.notes::placeholder{color:rgba(165,172,196,.55);}
+
+.infoGrid{
+  flex:1 1 auto;
+  min-height:0;
+  overflow:auto;
+  padding-right:12px;
+  padding-top:8px;
+  padding-bottom:8px;
+  scrollbar-width:none;
+  --fade-top:30px;
+  --fade-bottom:30px;
+  mask-image:linear-gradient(180deg, transparent 0%, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
+  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
+  transition:--fade-top 0.8s ease, --fade-bottom 0.8s ease;
+}
+@property --fade-top {
+  syntax: '<length>';
+  initial-value: 30px;
+  inherits: false;
+}
+@property --fade-bottom {
+  syntax: '<length>';
+  initial-value: 30px;
+  inherits: false;
+}
+.infoGrid.at-top{--fade-top:0px;}
+.infoGrid.at-bottom{--fade-bottom:0px;}
+.infoGrid::-webkit-scrollbar{width:0; height:0;}
+
+.kv{
+  display:grid;
+  grid-template-columns:78px 1fr;
+  gap:4px 14px;
+  align-items:baseline;
+  padding:12px 14px;
+  border-radius:var(--r2);
+  border:1px solid var(--strokeLight);
+  background:linear-gradient(170deg, rgba(20,25,35,.65), rgba(14,18,26,.75));
+  box-shadow:var(--shadow2), inset 0 1px 0 rgba(255,255,255,.02);
+  margin-bottom:8px;
+}
+.k{
+  font-family:var(--sans);
+  font-size:9px;
+  font-weight:800;
+  text-transform:uppercase;
+  letter-spacing:.12em;
+  color:var(--textDim);
+  padding-top:3px;
+  white-space:nowrap;
+}
+.v{
+  font-family:var(--brand);
+  font-size:12.5px;
+  font-weight:650;
+  color:var(--text);
+  letter-spacing:-.01em;
+  word-break:break-word;
+  overflow-wrap:anywhere;
+  line-height:1.35;
+  padding-left:6px;
+}
+.v.mono{
+  font-family:var(--mono);
+  font-size:11px;
+  font-weight:500;
+  color:var(--textMuted);
+  letter-spacing:.01em;
+  font-variant-numeric:tabular-nums;
+  background:linear-gradient(90deg, var(--accentBg), transparent 80%);
+  padding:2px 6px;
+  border-radius:3px;
+  margin:-2px 0;
+}
+
+.dockDividerWrap{display:flex; align-items:stretch; justify-content:center;}
+.dockDivider{width:14px; cursor:col-resize; position:relative; background:transparent; border:none;}
+.dockDivider::after{
+  content:""; position:absolute; top:50%; left:50%;
+  width:4px; height:44px; transform:translate(-50%,-50%);
+  border-radius:999px;
+  background:
+    radial-gradient(circle, rgba(255,255,255,.10) 35%, transparent 40%) 0 0/4px 12px,
+    radial-gradient(circle, rgba(255,255,255,.10) 35%, transparent 40%) 0 6px/4px 12px;
+  opacity:.18; pointer-events:none; transition:opacity .15s ease;
+}
+.dockDivider:hover::after{opacity:.44;}
+
+.playlistHeader{font-weight:900; letter-spacing:.16px; font-size:13.8px; cursor:help; display:flex; align-items:center; gap:10px;}
+.playlistHeader .fa{color:var(--iconStrong)!important; opacity:.92;}
+
+@media (max-width:1100px){
+  .content{grid-template-columns:1fr; gap:12px; padding:12px;}
+  .dividerWrap{display:none;}
+  .actions{flex-wrap:wrap;}
+  .seg{width:100%;}
+  .dock{grid-template-columns:1fr;}
+  .dockDividerWrap{display:none;}
+  .tagline{max-width:70vw;}
+}
+
+/* Notification toast */
+#toast{
+  position:fixed;
+  left:28px;
+  bottom:28px;
+  z-index:999999;
+  transform:translateY(20px) scale(var(--zoom));
+  transform-origin:bottom left;
+  pointer-events:none;
+  opacity:0;
+  transition:opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1);
+}
+#toast.show{
+  opacity:1;
+  transform:translateY(0) scale(var(--zoom));
+}
+.toastInner{
+  pointer-events:none;
+  display:flex; align-items:center; gap:12px;
+  padding:12px 14px;
+  border-radius:7px;
+  border:1px solid rgba(255,255,255,.14);
+  background:rgba(18,20,26,.92);
+  box-shadow:0 26px 70px rgba(0,0,0,.70);
+  backdrop-filter:blur(16px);
+}
+.toastIcon{width:18px; height:18px; display:flex; align-items:center; justify-content:center;}
+.toastIcon .fa{font-size:14px; color:rgba(230,236,252,.82)!important; opacity:.95;}
+.toastMsg{
+  font-size:12.8px;
+  font-weight:760;
+  letter-spacing:.12px;
+  color:rgba(246,248,255,.92);
+}
+
+/* Toolbar icon buttons */
+.toolbarIcon{
+  width:36px; height:36px;
+  border-radius:var(--r2);
+  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
+  border:1px solid rgba(255,255,255,.1);
+  color:rgba(246,248,255,.88);
+  font-size:14px;
+  transition:all .2s cubic-bezier(.4,0,.2,1);
+  position:relative;
+  overflow:hidden;
+  box-shadow:
+    0 2px 4px rgba(0,0,0,.12),
+    0 4px 12px rgba(0,0,0,.15),
+    inset 0 1px 0 rgba(255,255,255,.08);
+}
+.toolbarIcon::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 50%);
+  opacity:0;
+  transition:opacity .2s ease;
+}
+.toolbarIcon:hover{
+  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
+  border-color:rgba(255,255,255,.18);
+  color:rgba(255,255,255,.98);
+  transform:translateY(-2px);
+  box-shadow:
+    0 4px 8px rgba(0,0,0,.15),
+    0 8px 20px rgba(0,0,0,.2),
+    inset 0 1px 0 rgba(255,255,255,.12);
+}
+.toolbarIcon:hover::before{opacity:1;}
+.toolbarIcon:active{
+  transform:translateY(0);
+  box-shadow:0 2px 6px rgba(0,0,0,.18);
+}
+
+/* Fancy tooltip */
+.tooltip{
+  position:fixed;
+  pointer-events:none;
+  z-index:99999;
+  border-radius:var(--r);
+  padding:16px 20px;
+  opacity:0;
+  transform:translateY(8px) scale(.97);
+  transition:opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1), left .12s ease, top .12s ease;
+  max-width:320px;
+  font-family:var(--sans);
+  overflow:hidden;
+  background:rgba(20,24,32,.5);
+  backdrop-filter:blur(8px) saturate(1.3);
+  -webkit-backdrop-filter:blur(8px) saturate(1.3);
+  border:1px solid rgba(255,255,255,.12);
+  box-shadow:
+    0 0 0 1px rgba(0,0,0,.3),
+    0 4px 8px rgba(0,0,0,.15),
+    0 12px 24px rgba(0,0,0,.25),
+    0 24px 48px rgba(0,0,0,.2);
+}
+.tooltip.visible{
+  opacity:1;
+  transform:translateY(0) scale(1);
+}
+.tooltip::before{
+  content:"";
+  position:absolute;
+  top:0; left:0; right:0;
+  height:1px;
+  background:linear-gradient(90deg, transparent 5%, rgba(95,175,255,.5) 30%, rgba(75,200,130,.4) 70%, transparent 95%);
+  border-radius:var(--r) var(--r) 0 0;
+}
+.tooltip::after{
+  content:"";
+  position:absolute;
+  top:1px; left:1px; right:1px;
+  height:40%;
+  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);
+  border-radius:var(--r) var(--r) 0 0;
+  pointer-events:none;
+}
+.tooltip-title{
+  font-family:var(--brand);
+  font-weight:800;
+  font-size:14px;
+  margin-bottom:8px;
+  letter-spacing:-.01em;
+  background:linear-gradient(135deg, #fff 0%, rgba(180,210,255,1) 50%, rgba(150,230,200,1) 100%);
+  -webkit-background-clip:text;
+  background-clip:text;
+  color:transparent;
+  text-shadow:none;
+  position:relative;
+  z-index:1;
+}
+.tooltip-desc{
+  font-family:var(--sans);
+  font-size:12px;
+  font-weight:500;
+  color:rgba(190,200,225,.88);
+  line-height:1.55;
+  letter-spacing:.01em;
+  position:relative;
+  z-index:1;
+}
+.tooltip-desc:empty{display:none;}
+.tooltip-desc:empty ~ .tooltip-title{margin-bottom:0;}
+</style>
+</head>
+<body>
+<div id="zoomRoot">
+  <div class="app">
+    <div class="topbar">
+      <div class="brand">
+        <div class="appIcon" aria-hidden="true"><div class="appIconGlow"></div><i class="fa-solid fa-graduation-cap"></i></div>
+        <div class="brandText">
+          <div class="appName">TutorialDock</div>
+          <div class="tagline">Watch local tutorials, resume instantly, and actually finish them.</div>
+        </div>
+      </div>
+
+      <div class="actions">
+        <div class="actionGroup">
+          <label class="switch" data-tooltip="On Top" data-tooltip-desc="Keep this window above others (global)">
+            <input type="checkbox" id="onTopChk">
+            <span class="track"><span class="knob"></span></span>
+            <span>On top</span>
+          </label>
+
+          <label class="switch" data-tooltip="Autoplay" data-tooltip-desc="Autoplay next/prev (saved per folder)">
+            <input type="checkbox" id="autoplayChk">
+            <span class="track"><span class="knob"></span></span>
+            <span>Autoplay</span>
+          </label>
+        </div>
+
+        <div class="actionDivider"></div>
+
+        <div class="actionGroup">
+          <div class="zoomControl" data-tooltip="UI Zoom" data-tooltip-desc="Adjust the interface zoom level">
+            <button class="zoomBtn" id="zoomOutBtn"><i class="fa-solid fa-minus"></i></button>
+            <span class="zoomValue" id="zoomResetBtn">100%</span>
+            <button class="zoomBtn" id="zoomInBtn"><i class="fa-solid fa-plus"></i></button>
+          </div>
+        </div>
+
+        <div class="actionDivider"></div>
+
+        <div class="actionGroup">
+          <div class="splitBtn primary">
+            <button class="btn primary" id="chooseBtn" data-tooltip="Open Folder" data-tooltip-desc="Browse and select a folder containing videos"><i class="fa-solid fa-folder-open"></i> Open folder</button>
+            <button class="btn drop" id="chooseDropBtn" data-tooltip="Recent Folders" data-tooltip-desc="Open a recently used folder"><i class="fa-solid fa-chevron-down"></i></button>
+          </div>
+        </div>
+
+        <div class="actionDivider"></div>
+
+        <div class="actionGroup">
+          <button class="toolbarBtn" id="resetProgBtn" data-tooltip="Reset Progress" data-tooltip-desc="Reset DONE / NOW progress for this folder (keeps notes, volume, etc.)"><i class="fa-solid fa-clock-rotate-left"></i></button>
+          <button class="toolbarBtn" id="refreshBtn" data-tooltip="Reload" data-tooltip-desc="Reload the current folder"><i class="fa-solid fa-arrows-rotate"></i></button>
+        </div>
+      </div>
+    </div>
+
+    <div class="dropdownPortal" id="recentMenu"></div>
+
+    <div class="content" id="contentGrid">
+      <div class="panel">
+        <div class="panelHeader">
+          <div style="min-width:0;">
+            <div class="nowTitle" id="nowTitle">No video loaded</div>
+            <div class="nowSub" id="nowSub">-</div>
+          </div>
+
+          <div class="progressPill" data-tooltip="Overall Progress" data-tooltip-desc="Folder completion (time-based, using cached durations when available)">
+            <div class="progressLabel">Overall</div>
+            <div class="progressBar"><div id="overallBar"></div></div>
+            <div class="progressPct" id="overallPct">-</div>
+          </div>
+        </div>
+
+        <div class="videoWrap">
+          <video id="player" preload="metadata"></video>
+          <div class="videoOverlay" id="videoOverlay">
+            <div class="overlayIcon" id="overlayIcon">
+              <i class="fa-solid fa-play" id="overlayIconI"></i>
+            </div>
+          </div>
+        </div>
+
+        <div class="controls">
+          <div class="controlsRow">
+            <div class="group">
+              <button class="iconBtn" id="prevBtn" data-tooltip="Previous" data-tooltip-desc="Go to previous video"><i class="fa-solid fa-backward-step"></i></button>
+
+              <button class="iconBtn primary" id="playPauseBtn" data-tooltip="Play/Pause" data-tooltip-desc="Toggle video playback">
+                <i class="fa-solid fa-play" id="ppIcon"></i>
+              </button>
+
+              <button class="iconBtn" id="nextBtn" data-tooltip="Next" data-tooltip-desc="Go to next video"><i class="fa-solid fa-forward-step"></i></button>
+
+              <div class="timeChip" data-tooltip="Time" data-tooltip-desc="Current position / Total duration">
+                <div class="timeDot"></div>
+                <div><span id="timeNow">00:00</span> <span style="color:rgba(165,172,196,.65)">/</span> <span id="timeDur">00:00</span></div>
+              </div>
+            </div>
+
+            <div class="group">
+              <div class="subsBox">
+                <button class="iconBtn" id="subsBtn" data-tooltip="Subtitles" data-tooltip-desc="Load or select subtitles"><i class="fa-regular fa-closed-captioning"></i></button>
+                <div class="subsMenu" id="subsMenu" role="menu"></div>
+              </div>
+
+              <div class="miniCtl" data-tooltip="Volume" data-tooltip-desc="Adjust volume (saved per folder)">
+                <i class="fa-solid fa-volume-high"></i>
+                <div class="volWrap">
+                  <div class="volTrack">
+                    <div class="volFill" id="volFill"></div>
+                  </div>
+                  <input type="range" id="volSlider" class="vol" min="0" max="1" step="0.01" value="1">
+                </div>
+                <div class="volTooltip" id="volTooltip">100%</div>
+              </div>
+
+              <div class="miniCtl" data-tooltip="Speed" data-tooltip-desc="Playback speed (saved per folder)">
+                <svg id="speedIcon" width="14" height="14" viewBox="0 0 24 24" style="overflow:visible; color:var(--iconStrong);">
+                  <path d="M12 22C6.5 22 2 17.5 2 12S6.5 2 12 2s10 4.5 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".5"/>
+                  <path d="M12 22c5.5 0 10-4.5 10-10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".3"/>
+                  <g transform="rotate(0, 12, 13)">
+                    <line x1="12" y1="13" x2="12" y2="5" stroke="rgba(255,255,255,.85)" stroke-width="2.5" stroke-linecap="round"/>
+                  </g>
+                  <circle cx="12" cy="13" r="2" fill="currentColor" opacity=".7"/>
+                </svg>
+                <div class="speedBox">
+                  <button class="speedBtn" id="speedBtn" aria-label="Playback speed">
+                    <span id="speedBtnText">1.0x</span>
+                    <span class="speedCaret" aria-hidden="true"><i class="fa-solid fa-chevron-up"></i></span>
+                  </button>
+                  <div class="speedMenu" id="speedMenu" role="menu" aria-label="Speed menu"></div>
+                </div>
+              </div>
+
+              <button class="iconBtn" id="fsBtn" data-tooltip="Fullscreen" data-tooltip-desc="Toggle fullscreen mode"><i class="fa-solid fa-expand"></i></button>
+            </div>
+          </div>
+
+          <div class="seekWrap">
+            <div class="seekTrack">
+              <div class="seekFill" id="seekFill"></div>
+            </div>
+            <input type="range" id="seek" class="seek" min="0" max="1000" step="1" value="0" aria-label="Seek">
+          </div>
+        </div>
+
+        <div class="dock" id="dockGrid">
+          <div class="dockPane">
+            <div class="dockInner">
+              <div class="dockHeader" id="notesHeader" data-tooltip="Notes" data-tooltip-desc="Your notes are automatically saved for each video file. Write timestamps, TODOs, or reminders.">
+                <div class="dockTitle"><i class="fa-solid fa-note-sticky"></i> Notes</div>
+              </div>
+              <div class="notesArea">
+                <textarea class="notes" id="notesBox" placeholder="Write timestamps, TODOs, reminders…"></textarea>
+                <div class="notesSaved" id="notesSaved"><i class="fa-solid fa-check"></i> Saved</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="dockDividerWrap">
+            <div class="dockDivider" id="dockDivider" data-tooltip="Resize" data-tooltip-desc="Drag to resize panels"></div>
+          </div>
+
+          <div class="dockPane">
+            <div class="dockInner">
+              <div class="dockHeader" id="infoHeader" data-tooltip="Info" data-tooltip-desc="Metadata and progress info for the current folder and video. Updates automatically.">
+                <div class="dockTitle"><i class="fa-solid fa-circle-info"></i> Info</div>
+              </div>
+              <div class="infoGrid" id="infoGrid">
+                <div class="kv">
+                  <div class="k">Folder</div><div class="v" id="infoFolder">-</div>
+                  <div class="k">Next up</div><div class="v" id="infoNext">-</div>
+                  <div class="k">Structure</div><div class="v mono" id="infoStruct">-</div>
+                </div>
+
+                <div class="kv">
+                  <div class="k">Title</div><div class="v" id="infoTitle">-</div>
+                  <div class="k">Relpath</div><div class="v mono" id="infoRel">-</div>
+                  <div class="k">Position</div><div class="v mono" id="infoPos">-</div>
+                </div>
+
+                <div class="kv">
+                  <div class="k">File</div><div class="v mono" id="infoFileBits">-</div>
+                  <div class="k">Video</div><div class="v mono" id="infoVidBits">-</div>
+                  <div class="k">Audio</div><div class="v mono" id="infoAudBits">-</div>
+                  <div class="k">Subtitles</div><div class="v mono" id="infoSubsBits">-</div>
+                </div>
+
+                <div class="kv">
+                  <div class="k">Finished</div><div class="v mono" id="infoFinished">-</div>
+                  <div class="k">Remaining</div><div class="v mono" id="infoRemaining">-</div>
+                  <div class="k">ETA</div><div class="v mono" id="infoEta">-</div>
+                </div>
+
+                <div class="kv">
+                  <div class="k">Volume</div><div class="v mono" id="infoVolume">-</div>
+                  <div class="k">Speed</div><div class="v mono" id="infoSpeed">-</div>
+                  <div class="k">Durations</div><div class="v mono" id="infoKnown">-</div>
+                </div>
+
+                <div class="kv">
+                  <div class="k">Top folders</div><div class="v mono" id="infoTop">-</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="dividerWrap">
+        <div class="divider" id="divider" data-tooltip="Resize" data-tooltip-desc="Drag to resize panels"></div>
+      </div>
+
+      <div class="panel">
+        <div class="panelHeader" style="align-items:center;">
+          <div class="playlistHeader" id="plistHeader" data-tooltip="Playlist" data-tooltip-desc="Drag items to reorder. The blue line shows where it will drop."><i class="fa-solid fa-list"></i> Playlist</div>
+          <div style="flex:1 1 auto;"></div>
+        </div>
+        <div class="listWrap">
+          <div class="list" id="list"></div>
+          <div class="listScrollbar" id="listScrollbar"><div class="listScrollbarThumb" id="listScrollbarThumb"></div></div>
+        </div>
+        <div class="empty" id="emptyHint" style="display:none;">
+          No videos found (searched recursively).<br/>Native playback is happiest with MP4 (H.264/AAC) or WebM.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div id="toast" aria-live="polite">
+  <div class="toastInner">
+    <div class="toastIcon"><i class="fa-solid fa-circle-info"></i></div>
+    <div class="toastMsg" id="toastMsg">-</div>
+  </div>
+</div>
+
+<div class="tooltip" id="fancyTooltip"><div class="tooltip-title"></div><div class="tooltip-desc"></div></div>
+
+<script>
+const player=document.getElementById("player"), listEl=document.getElementById("list");
+const nowTitle=document.getElementById("nowTitle"), nowSub=document.getElementById("nowSub");
+const overallBar=document.getElementById("overallBar"), overallPct=document.getElementById("overallPct");
+const emptyHint=document.getElementById("emptyHint");
+const chooseBtn=document.getElementById("chooseBtn"), chooseDropBtn=document.getElementById("chooseDropBtn");
+const recentMenu=document.getElementById("recentMenu");
+const refreshBtn=document.getElementById("refreshBtn");
+const resetProgBtn=document.getElementById("resetProgBtn");
+const prevBtn=document.getElementById("prevBtn"), nextBtn=document.getElementById("nextBtn");
+const playPauseBtn=document.getElementById("playPauseBtn"), ppIcon=document.getElementById("ppIcon");
+const timeNow=document.getElementById("timeNow"), timeDur=document.getElementById("timeDur");
+const zoomOutBtn=document.getElementById("zoomOutBtn"), zoomInBtn=document.getElementById("zoomInBtn"), zoomResetBtn=document.getElementById("zoomResetBtn");
+const onTopChk=document.getElementById("onTopChk"), autoplayChk=document.getElementById("autoplayChk");
+const contentGrid=document.getElementById("contentGrid"), divider=document.getElementById("divider");
+const dockGrid=document.getElementById("dockGrid"), dockDivider=document.getElementById("dockDivider");
+const notesBox=document.getElementById("notesBox");
+const seek=document.getElementById("seek"), volSlider=document.getElementById("volSlider"), fsBtn=document.getElementById("fsBtn");
+const speedBtn=document.getElementById("speedBtn"), speedBtnText=document.getElementById("speedBtnText"), speedIcon=document.getElementById("speedIcon");
+const speedMenu=document.getElementById("speedMenu");
+const subsBtn=document.getElementById("subsBtn");
+const subsMenu=document.getElementById("subsMenu");
+const infoFolder=document.getElementById("infoFolder"), infoNext=document.getElementById("infoNext"), infoStruct=document.getElementById("infoStruct");
+const infoTitle=document.getElementById("infoTitle"), infoRel=document.getElementById("infoRel"), infoPos=document.getElementById("infoPos");
+const infoFileBits=document.getElementById("infoFileBits"), infoVidBits=document.getElementById("infoVidBits"), infoAudBits=document.getElementById("infoAudBits"), infoSubsBits=document.getElementById("infoSubsBits");
+const infoFinished=document.getElementById("infoFinished"), infoRemaining=document.getElementById("infoRemaining"), infoEta=document.getElementById("infoEta");
+const infoVolume=document.getElementById("infoVolume"), infoSpeed=document.getElementById("infoSpeed"), infoKnown=document.getElementById("infoKnown"), infoTop=document.getElementById("infoTop");
+const infoGridEl=document.getElementById("infoGrid");
+
+// Handle info panel scroll fades
+let updateInfoFades = ()=>{};
+if(infoGridEl){
+  updateInfoFades = ()=>{
+    const atTop = infoGridEl.scrollTop < 5;
+    const atBottom = infoGridEl.scrollTop + infoGridEl.clientHeight >= infoGridEl.scrollHeight - 5;
+    infoGridEl.classList.toggle("at-top", atTop);
+    infoGridEl.classList.toggle("at-bottom", atBottom);
+  };
+  infoGridEl.addEventListener("scroll", updateInfoFades);
+  setTimeout(updateInfoFades, 100);
+  setTimeout(updateInfoFades, 500);
+}
+
+// Handle playlist scroll fades
+let updateListFades = ()=>{};
+const listScrollbar = document.getElementById("listScrollbar");
+const listScrollbarThumb = document.getElementById("listScrollbarThumb");
+let scrollbarHideTimer = null;
+let scrollbarDragging = false;
+let scrollbarDragStartY = 0;
+let scrollbarDragStartScrollTop = 0;
+
+function updateScrollbar(){
+  if(!listEl || !listScrollbarThumb) return;
+  const scrollHeight = listEl.scrollHeight;
+  const clientHeight = listEl.clientHeight;
+  if(scrollHeight <= clientHeight){
+    listScrollbar.style.display = "none";
+    return;
+  }
+  listScrollbar.style.display = "block";
+  const scrollRatio = clientHeight / scrollHeight;
+  const thumbHeight = Math.max(24, clientHeight * scrollRatio);
+  const maxScroll = scrollHeight - clientHeight;
+  const scrollTop = listEl.scrollTop;
+  const trackHeight = clientHeight - 24; // account for top/bottom margins
+  const thumbTop = maxScroll > 0 ? (scrollTop / maxScroll) * (trackHeight - thumbHeight) : 0;
+  listScrollbarThumb.style.height = thumbHeight + "px";
+  listScrollbarThumb.style.top = thumbTop + "px";
+}
+
+// Scrollbar drag handlers
+if(listScrollbarThumb){
+  listScrollbarThumb.style.pointerEvents = "auto";
+  listScrollbar.style.pointerEvents = "auto";
+  
+  const startDrag = (e)=>{
+    e.preventDefault();
+    scrollbarDragging = true;
+    scrollbarDragStartY = e.type.includes("touch") ? e.touches[0].clientY : e.clientY;
+    scrollbarDragStartScrollTop = listEl.scrollTop;
+    listScrollbar.classList.add("active");
+    document.body.style.userSelect = "none";
+  };
+  
+  const doDrag = (e)=>{
+    if(!scrollbarDragging) return;
+    const clientY = e.type.includes("touch") ? e.touches[0].clientY : e.clientY;
+    const deltaY = clientY - scrollbarDragStartY;
+    const trackHeight = listEl.clientHeight - 24;
+    const thumbHeight = Math.max(24, listEl.clientHeight * (listEl.clientHeight / listEl.scrollHeight));
+    const scrollableTrack = trackHeight - thumbHeight;
+    const maxScroll = listEl.scrollHeight - listEl.clientHeight;
+    if(scrollableTrack > 0){
+      const scrollDelta = (deltaY / scrollableTrack) * maxScroll;
+      listEl.scrollTop = scrollbarDragStartScrollTop + scrollDelta;
+    }
+  };
+  
+  const endDrag = ()=>{
+    if(scrollbarDragging){
+      scrollbarDragging = false;
+      document.body.style.userSelect = "";
+      if(scrollbarHideTimer) clearTimeout(scrollbarHideTimer);
+      scrollbarHideTimer = setTimeout(()=>{ listScrollbar.classList.remove("active"); }, 1200);
+    }
+  };
+  
+  listScrollbarThumb.addEventListener("mousedown", startDrag);
+  listScrollbarThumb.addEventListener("touchstart", startDrag);
+  window.addEventListener("mousemove", doDrag);
+  window.addEventListener("touchmove", doDrag);
+  window.addEventListener("mouseup", endDrag);
+  window.addEventListener("touchend", endDrag);
+}
+
+if(listEl){
+  updateListFades = ()=>{
+    const atTop = listEl.scrollTop < 5;
+    const atBottom = listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight - 5;
+    listEl.classList.toggle("at-top", atTop);
+    listEl.classList.toggle("at-bottom", atBottom);
+    updateScrollbar();
+    // Show scrollbar briefly when scrolling
+    if(listScrollbar && !scrollbarDragging){
+      listScrollbar.classList.add("active");
+      if(scrollbarHideTimer) clearTimeout(scrollbarHideTimer);
+      scrollbarHideTimer = setTimeout(()=>{ listScrollbar.classList.remove("active"); }, 1200);
+    }
+  };
+  listEl.addEventListener("scroll", updateListFades);
+  setTimeout(updateListFades, 100);
+  setTimeout(updateListFades, 500);
+}
+
+function updateSpeedIcon(rate){
+  // Custom SVG gauge icons for different speed states
+  const icon = document.getElementById("speedIcon");
+  if(!icon) return;
+  // SVG gauge with needle position based on rate
+  // 0.5x = -60deg (8 o'clock), 1.0x = 0deg (12 o'clock), 2.0x = 75deg (5 o'clock)
+  let needleAngle = 0;
+  let needleColor = "rgba(255,255,255,.85)";
+  
+  if(rate <= 0.5){
+    needleAngle = -60;
+    needleColor = "rgba(100,180,255,.9)";
+  } else if(rate < 1.0){
+    // Interpolate from -60 (0.5x) to 0 (1.0x)
+    const t = (rate - 0.5) / 0.5;
+    needleAngle = -60 + t * 60;
+    // Color from blue to white
+    needleColor = `rgba(${Math.round(100 + t*155)},${Math.round(180 + t*75)},${Math.round(255)},0.9)`;
+  } else if(rate <= 1.0){
+    needleAngle = 0;
+    needleColor = "rgba(255,255,255,.85)";
+  } else if(rate < 2.0){
+    // Interpolate from 0 (1.0x) to 75 (2.0x)
+    const t = (rate - 1.0) / 1.0;
+    needleAngle = t * 75;
+    // Color from white to orange
+    needleColor = `rgba(255,${Math.round(255 - t*115)},${Math.round(255 - t*155)},0.9)`;
+  } else {
+    needleAngle = 75;
+    needleColor = "rgba(255,140,100,.9)";
+  }
+  
+  // Check if needle group exists, if so just update transform for smooth animation
+  const needleGroup = icon.querySelector('.speed-needle');
+  const needleLine = icon.querySelector('.speed-needle line');
+  if(needleGroup && needleLine){
+    needleGroup.style.transform = `rotate(${needleAngle}deg)`;
+    needleLine.style.stroke = needleColor;
+  } else {
+    icon.innerHTML = `
+      <path d="M12 22C6.5 22 2 17.5 2 12S6.5 2 12 2s10 4.5 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".5"/>
+      <path d="M12 22c5.5 0 10-4.5 10-10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".3"/>
+      <g class="speed-needle" style="transform-origin:12px 13px; transform:rotate(${needleAngle}deg); transition:transform 0.8s cubic-bezier(.4,0,.2,1);">
+        <line x1="12" y1="13" x2="12" y2="5" stroke="${needleColor}" stroke-width="2.5" stroke-linecap="round" style="transition:stroke 0.8s ease;"/>
+      </g>
+      <circle cx="12" cy="13" r="2" fill="currentColor" opacity=".7"/>
+    `;
+  }
+}
+
+const toast=document.getElementById("toast");
+const toastMsg=document.getElementById("toastMsg");
+let toastTimer=null;
+
+let prefs=null, library=null, currentIndex=0, lastTick=0, suppressTick=false;
+let draggingDivider=false, saveSplitTimer=null, saveZoomTimer=null;
+let draggingDockDivider=false, saveDockTimer=null;
+let dragFromIndex=null, dropTargetIndex=null, dropAfter=false;
+let seeking=false;
+let subtitleTrackEl=null;
+
+function notify(msg){
+  toastMsg.textContent = msg;
+  toast.classList.add("show");
+  if(toastTimer) clearTimeout(toastTimer);
+  toastTimer=setTimeout(()=>{ toast.classList.remove("show"); }, 2600);
+}
+
+function clamp(n,a,b){return Math.max(a, Math.min(b,n));}
+function fmtTime(sec){
+  sec=Math.max(0, Math.floor(sec||0));
+  const h=Math.floor(sec/3600), m=Math.floor((sec%3600)/60), s=sec%60;
+  if(h>0) return `${h}:${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`;
+  return `${m}:${String(s).padStart(2,"0")}`;
+}
+function fmtBytes(n){
+  n=Number(n||0); if(!isFinite(n)||n<=0) return "-";
+  const u=["B","KB","MB","GB","TB"]; let i=0;
+  while(n>=1024&&i<u.length-1){n/=1024;i++;}
+  return `${n.toFixed(i===0?0:1)} ${u[i]}`;
+}
+function fmtDate(ts){ if(!ts) return "-"; try{ return new Date(ts*1000).toLocaleString(); }catch(e){ return "-"; } }
+
+function applyZoom(z){
+  const zoom=clamp(Number(z||1.0),0.75,2.0);
+  document.documentElement.style.setProperty("--zoom", String(zoom));
+  zoomResetBtn.textContent = `${Math.round(zoom*100)}%`;
+  document.body.getBoundingClientRect();
+  return zoom;
+}
+function applySplit(ratio){
+  const r=clamp(Number(ratio||0.62),0.35,0.80);
+  // Use calc to ensure the percentages account for the 14px divider
+  contentGrid.style.gridTemplateColumns = `calc(${(r*100).toFixed(2)}% - 7px) 14px calc(${(100-r*100).toFixed(2)}% - 7px)`;
+  return r;
+}
+function applyDockSplit(ratio){
+  const r=clamp(Number(ratio||0.62),0.35,0.80);
+  dockGrid.style.gridTemplateColumns = `calc(${(r*100).toFixed(2)}% - 7px) 14px calc(${(100-r*100).toFixed(2)}% - 7px)`;
+  return r;
+}
+async function savePrefsPatch(patch){ await window.pywebview.api.set_prefs(patch); }
+
+function computeResumeTime(item){
+  if(!item) return 0.0;
+  if(item.finished) return 0.0; // DONE stays done; rewatch from start
+  const pos=Number(item.pos||0.0), dur=Number(item.duration||0.0);
+  if(dur>0) return clamp(pos, 0.0, Math.max(0.0, dur-0.25));
+  return Math.max(0.0, pos);
+}
+function updateOverall(){
+  if(!library){ overallBar.style.width="0%"; overallPct.textContent="-"; return; }
+  if(library.overall_progress===null||library.overall_progress===undefined){ overallBar.style.width="0%"; overallPct.textContent="-"; return; }
+  const p=clamp(library.overall_progress,0,1);
+  overallBar.style.width=`${(p*100).toFixed(1)}%`;
+  overallPct.textContent=`${(p*100).toFixed(1)}%`;
+}
+function updateTimeReadout(){
+  const t=player.currentTime||0, d=player.duration||0;
+  timeNow.textContent=fmtTime(t);
+  timeDur.textContent=d?fmtTime(d):"00:00";
+}
+function updatePlayPauseIcon(){
+  if(player.paused||player.ended){
+    ppIcon.className="fa-solid fa-play";
+  }else{
+    ppIcon.className="fa-solid fa-pause";
+  }
+}
+function clearDropIndicators(){ listEl.querySelectorAll(".row").forEach(r=>r.classList.remove("drop-before","drop-after")); }
+function currentItem(){ if(!library||!library.items) return null; return library.items[currentIndex]||null; }
+
+function fmtBitrate(bps){
+  const n=Number(bps||0); if(!isFinite(n)||n<=0) return null;
+  const kb=n/1000.0; if(kb<1000) return `${kb.toFixed(0)} kbps`;
+  return `${(kb/1000).toFixed(2)} Mbps`;
+}
+
+async function refreshCurrentVideoMeta(){
+  const it=currentItem();
+  if(!it){ infoFileBits.textContent="-"; infoVidBits.textContent="-"; infoAudBits.textContent="-"; infoSubsBits.textContent="-"; return; }
+  try{
+    const res=await window.pywebview.api.get_current_video_meta();
+    if(!res||!res.ok){ infoFileBits.textContent="-"; infoVidBits.textContent="-"; infoAudBits.textContent="-"; infoSubsBits.textContent="-"; return; }
+    const b=res.basic||{}, p=res.probe||null, ffFound=!!res.ffprobe_found;
+
+    const bits=[];
+    if(b.ext) bits.push(String(b.ext).toUpperCase());
+    if(b.size) bits.push(fmtBytes(b.size));
+    if(b.mtime) bits.push(`modified ${fmtDate(b.mtime)}`);
+    if(b.folder) bits.push(`folder ${b.folder}`);
+    infoFileBits.textContent = bits.join("  •  ") || "-";
+
+    if(p){
+      const v=[];
+      if(p.v_codec) v.push(String(p.v_codec).toUpperCase());
+      if(p.width&&p.height) v.push(`${p.width}×${p.height}`);
+      if(p.fps) v.push(`${Number(p.fps).toFixed(2)} fps`);
+      if(p.pix_fmt) v.push(p.pix_fmt);
+      const vb=fmtBitrate(p.v_bitrate); if(vb) v.push(vb);
+      infoVidBits.textContent = v.join("  •  ") || "-";
+
+      const a=[];
+      if(p.a_codec) a.push(String(p.a_codec).toUpperCase());
+      if(p.channels) a.push(`${p.channels} ch`);
+      if(p.sample_rate) a.push(`${(Number(p.sample_rate)/1000).toFixed(1)} kHz`);
+      const ab=fmtBitrate(p.a_bitrate); if(ab) a.push(ab);
+      infoAudBits.textContent = a.join("  •  ") || "-";
+
+      // Subtitle info
+      const subs = p.subtitle_tracks || [];
+      if(subs.length > 0){
+        const subInfo = subs.map(s => {
+          const lang = s.language?.toUpperCase() || "";
+          const title = s.title || "";
+          return title || lang || s.codec || "Track";
+        }).join(", ");
+        infoSubsBits.textContent = `${subs.length} embedded (${subInfo})`;
+      }else if(it.has_sub){
+        infoSubsBits.textContent = "External file loaded";
+      }else{
+        infoSubsBits.textContent = "None";
+      }
+    }else{
+      infoVidBits.textContent = ffFound ? "(ffprobe available, metadata not read for this file)" : "(ffprobe not found)";
+      infoAudBits.textContent = "-";
+      infoSubsBits.textContent = it.has_sub ? "External file loaded" : "-";
+    }
+  }catch(e){
+    infoFileBits.textContent="-"; infoVidBits.textContent="-"; infoAudBits.textContent="-"; infoSubsBits.textContent="-";
+  }
+}
+
+function updateInfoPanel(){
+  const it=currentItem();
+  infoFolder.textContent = library?.folder || "-";
+  infoNext.textContent = library?.next_up ? library.next_up.title : "-";
+  infoStruct.textContent = library ? (library.has_subdirs ? "Subfolders detected" : "Flat folder") : "-";
+  infoTitle.textContent = it?.title || "-";
+  infoRel.textContent = it?.relpath || "-";
+
+  const t=player.currentTime||0;
+  const d=Number.isFinite(player.duration)?player.duration:0;
+  infoPos.textContent = d>0 ? `${fmtTime(t)} / ${fmtTime(d)}` : fmtTime(t);
+
+  if(library){
+    infoFinished.textContent = `${library.finished_count ?? 0}`;
+    infoRemaining.textContent = `${library.remaining_count ?? 0}`;
+    infoEta.textContent = (library.remaining_seconds_known!=null) ? fmtTime(library.remaining_seconds_known) : "-";
+    infoKnown.textContent = `${library.durations_known||0}/${library.count||0}`;
+    infoTop.textContent = (library.top_folders||[]).map(([n,c])=>`${n}:${c}`).join("  •  ") || "-";
+    infoVolume.textContent = `${Math.round(clamp(Number(library.folder_volume ?? 1),0,1)*100)}%`;
+    infoSpeed.textContent = `${Number(library.folder_rate ?? 1).toFixed(2)}x`;
+  }else{
+    infoFinished.textContent="-"; infoRemaining.textContent="-"; infoEta.textContent="-";
+    infoKnown.textContent="-"; infoTop.textContent="-"; infoVolume.textContent="-"; infoSpeed.textContent="-";
+  }
+}
+
+async function loadNoteForCurrent(){
+  const it=currentItem();
+  if(!it){ notesBox.value=""; return; }
+  try{
+    const res=await window.pywebview.api.get_note(it.fid);
+    notesBox.value = (res&&res.ok) ? (res.note||"") : "";
+  }catch(e){ notesBox.value=""; }
+}
+let noteSaveTimer=null;
+let notesSavedTimer=null;
+const notesSaved=document.getElementById("notesSaved");
+notesBox.addEventListener("input", ()=>{
+  if(!library) return;
+  const it=currentItem(); if(!it) return;
+  if(noteSaveTimer) clearTimeout(noteSaveTimer);
+  if(notesSavedTimer) clearTimeout(notesSavedTimer);
+  if(notesSaved) notesSaved.classList.remove("show");
+  noteSaveTimer=setTimeout(async ()=>{
+    try{ 
+      await window.pywebview.api.set_note(it.fid, notesBox.value||""); 
+      // Show saved indicator
+      if(notesSaved){
+        notesSaved.classList.add("show");
+        notesSavedTimer = setTimeout(()=>{ notesSaved.classList.remove("show"); }, 2000);
+      }
+    }catch(e){}
+  }, 350);
+});
+
+function renderTreeSvg(it){
+  const depth=Number(it.depth||0);
+  const pipes=Array.isArray(it.pipes)?it.pipes:[];
+  const isLast=!!it.is_last;
+  const hasPrev=!!it.has_prev_in_parent;
+
+  const unit=14;
+  const pad=8;
+  const height=28;
+  const mid=Math.round(height/2);
+  const extend=20; // How far to extend lines beyond SVG for visual connection
+
+  const width = pad + Math.max(1, depth) * unit + 18;
+
+  const ns="http://www.w3.org/2000/svg";
+  const svg=document.createElementNS(ns,"svg");
+  svg.setAttribute("class","treeSvg");
+  svg.setAttribute("width", String(width));
+  svg.setAttribute("height", String(height));
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.style.overflow = "visible";
+
+  const xCol = (j)=> pad + j*unit + 0.5;
+
+  // Continuation pipes - these always extend full height + beyond
+  for(let j=0; j<depth-1; j++){
+    if(pipes[j]){
+      const ln=document.createElementNS(ns,"line");
+      ln.setAttribute("x1", String(xCol(j)));
+      ln.setAttribute("y1", String(-extend));
+      ln.setAttribute("x2", String(xCol(j)));
+      ln.setAttribute("y2", String(height + extend));
+      svg.appendChild(ln);
+    }
+  }
+
+  if(depth<=0){
+    const c=document.createElementNS(ns,"circle");
+    c.setAttribute("cx", String(pad + 3));
+    c.setAttribute("cy", String(mid));
+    c.setAttribute("r", "3.2");
+    c.setAttribute("opacity","0.40");
+    svg.appendChild(c);
+    return svg;
+  }
+
+  const parentCol = depth-1;
+  const px = xCol(parentCol);
+
+  // Vertical line at parent column - extends up if has prev, down if not last
+  if(hasPrev || !isLast){
+    const vln=document.createElementNS(ns,"line");
+    vln.setAttribute("x1", String(px));
+    vln.setAttribute("y1", String(hasPrev ? -extend : mid));
+    vln.setAttribute("x2", String(px));
+    vln.setAttribute("y2", String(isLast ? mid : height + extend));
+    svg.appendChild(vln);
+  }
+
+  // Horizontal connector
+  const hx1 = px;
+  const hx2 = px + unit;
+  const h=document.createElementNS(ns,"line");
+  h.setAttribute("x1", String(hx1));
+  h.setAttribute("y1", String(mid));
+  h.setAttribute("x2", String(hx2));
+  h.setAttribute("y2", String(mid));
+  svg.appendChild(h);
+
+  const node=document.createElementNS(ns,"circle");
+  node.setAttribute("cx", String(hx2));
+  node.setAttribute("cy", String(mid));
+  node.setAttribute("r", "3.4");
+  svg.appendChild(node);
+
+  return svg;
+}
+
+async function reorderPlaylistByGap(fromIdx, targetIdx, after){
+  if(!library || !library.items) return;
+  const base = library.items.slice().sort((a,b)=>a.index-b.index).map(x=>x.fid);
+  if(fromIdx<0||fromIdx>=base.length) return;
+  if(targetIdx<0||targetIdx>=base.length) return;
+
+  const moving=base[fromIdx];
+  base.splice(fromIdx,1);
+
+  let insertAt=targetIdx;
+  if(fromIdx<targetIdx) insertAt -= 1;
+  if(after) insertAt += 1;
+  insertAt = clamp(insertAt, 0, base.length);
+  base.splice(insertAt, 0, moving);
+
+  try{
+    const res=await window.pywebview.api.set_order(base);
+    if(res && res.ok){
+      const info=await window.pywebview.api.get_library();
+      if(info && info.ok){
+        library=info;
+        currentIndex=library.current_index||0;
+        renderList(); updateOverall(); updateInfoPanel();
+        await refreshCurrentVideoMeta();
+      }
+    }
+  }catch(e){}
+}
+
+function renderList(){
+  listEl.innerHTML="";
+  if(!library||!library.items||library.items.length===0){
+    emptyHint.style.display="block";
+    return;
+  }
+  emptyHint.style.display="none";
+
+  const tree=!!library.has_subdirs;
+  const padN=String(library.items.length).length;
+
+  for(let displayIndex=0; displayIndex<library.items.length; displayIndex++){
+    const it=library.items[displayIndex];
+
+    const row=document.createElement("div");
+    row.className="row"+(it.index===currentIndex ? " active":"");
+    row.draggable=true;
+    row.dataset.index=String(it.index);
+
+    row.onclick=()=>{ if(dragFromIndex!==null) return; loadIndex(it.index, computeResumeTime(it), true); };
+
+    row.addEventListener("dragstart",(e)=>{
+      dragFromIndex=Number(row.dataset.index);
+      row.classList.add("dragging");
+      e.dataTransfer.effectAllowed="move";
+      try{ e.dataTransfer.setData("text/plain", String(dragFromIndex)); }catch(_){}
+    });
+
+    row.addEventListener("dragend", async ()=>{
+      row.classList.remove("dragging");
+      if(dragFromIndex!==null && dropTargetIndex!==null){
+        await reorderPlaylistByGap(dragFromIndex, dropTargetIndex, dropAfter);
+      }
+      dragFromIndex=null; dropTargetIndex=null; dropAfter=false; clearDropIndicators();
+    });
+
+    row.addEventListener("dragover",(e)=>{
+      e.preventDefault();
+      e.dataTransfer.dropEffect="move";
+      const rect=row.getBoundingClientRect();
+      const y=e.clientY - rect.top;
+      const after=y > rect.height/2;
+      dropTargetIndex=Number(row.dataset.index);
+      dropAfter=after;
+      clearDropIndicators();
+      row.classList.add(after ? "drop-after" : "drop-before");
+    });
+
+    row.addEventListener("drop",(e)=>e.preventDefault());
+
+    const left=document.createElement("div");
+    left.className="left";
+
+    const num=document.createElement("div");
+    num.className="numBadge";
+    num.textContent=String(displayIndex+1).padStart(padN,"0");
+    left.appendChild(num);
+
+    if(tree) left.appendChild(renderTreeSvg(it));
+
+    const textWrap=document.createElement("div");
+    textWrap.className="textWrap";
+
+    const name=document.createElement("div");
+    name.className="name";
+    name.textContent = it.title || it.name;
+
+    const small=document.createElement("div");
+    small.className="small";
+    const d=it.duration, w=it.watched||0;
+    const note=it.note_len ? "  •  note" : "";
+    const sub = it.has_sub ? "  •  subs" : "";
+    small.textContent = (d ? `${fmtTime(w)} / ${fmtTime(d)}` : `${fmtTime(w)} watched`) + note + sub + `  -  ${it.relpath}`;
+
+    textWrap.appendChild(name);
+    textWrap.appendChild(small);
+    left.appendChild(textWrap);
+
+    const tag=document.createElement("div");
+    tag.className="tag";
+    if(it.index===currentIndex){ tag.classList.add("now"); tag.textContent="Now"; }
+    else if(it.finished){ tag.classList.add("done"); tag.textContent="Done"; }
+    else { tag.classList.add("hidden"); tag.textContent=""; }
+
+    row.appendChild(left);
+    row.appendChild(tag);
+    listEl.appendChild(row);
+  }
+  // Update scroll fades after content changes
+  setTimeout(updateListFades, 50);
+}
+
+function ensureDropdownPortal(){
+  try{
+    if(recentMenu && recentMenu.parentElement !== document.body){ document.body.appendChild(recentMenu); }
+    recentMenu.classList.add("dropdownPortal");
+  }catch(e){}
+}
+let recentOpen=false;
+
+function positionRecentMenu(){
+  const r=chooseDropBtn.getBoundingClientRect();
+  const pad=8;
+  const zoom=clamp(Number(prefs?.ui_zoom||1),0.75,2.0);
+  const baseW=460, baseH=360;
+  const effW=baseW*zoom, effH=baseH*zoom;
+  const left=clamp(r.right-effW, 10, window.innerWidth-effW-10);
+  const top=clamp(r.bottom+pad, 10, window.innerHeight-effH-10);
+  recentMenu.style.left=`${left}px`;
+  recentMenu.style.top=`${top}px`;
+  recentMenu.style.width=`${baseW}px`;
+  recentMenu.style.maxHeight=`${baseH}px`;
+}
+function closeRecentMenu(){ recentOpen=false; recentMenu.style.display="none"; }
+
+async function openRecentMenu(){
+  ensureDropdownPortal();
+  try{
+    const res=await window.pywebview.api.get_recents();
+    recentMenu.innerHTML="";
+    if(!res||!res.ok||!res.items||res.items.length===0){
+      const div=document.createElement("div");
+      div.className="dropEmpty";
+      div.textContent="No recent folders yet.";
+      recentMenu.appendChild(div);
+    }else{
+      for(const it of res.items){
+        const row=document.createElement("div");
+        row.className="dropItem";
+        row.dataset.tooltip=it.name;
+        row.dataset.tooltipDesc=it.path;
+
+        const icon=document.createElement("div");
+        icon.className="dropIcon";
+        icon.innerHTML='<i class="fa-solid fa-folder"></i>';
+
+        const name=document.createElement("div");
+        name.className="dropName";
+        name.textContent=it.name;
+
+        const removeBtn=document.createElement("div");
+        removeBtn.className="dropRemove";
+        removeBtn.innerHTML='<i class="fa-solid fa-xmark"></i>';
+        removeBtn.onclick=async (e)=>{
+          e.stopPropagation();
+          try{
+            await window.pywebview.api.remove_recent(it.path);
+            row.remove();
+            if(recentMenu.querySelectorAll(".dropItem").length===0){
+              const div=document.createElement("div");
+              div.className="dropEmpty";
+              div.textContent="No recent folders yet.";
+              recentMenu.innerHTML="";
+              recentMenu.appendChild(div);
+            }
+          }catch(err){}
+        };
+
+        row.appendChild(icon); row.appendChild(name); row.appendChild(removeBtn);
+        row.onclick=async ()=>{
+          closeRecentMenu();
+          const info=await window.pywebview.api.open_folder_path(it.path);
+          if(!info||!info.ok) { notify("Folder not available."); return; }
+          await onLibraryLoaded(info,true);
+        };
+        recentMenu.appendChild(row);
+      }
+    }
+    positionRecentMenu();
+    recentMenu.style.display="block";
+    recentOpen=true;
+  }catch(e){ closeRecentMenu(); }
+}
+
+chooseDropBtn.onclick=async (e)=>{
+  e.preventDefault(); e.stopPropagation();
+  if(recentOpen) closeRecentMenu();
+  else await openRecentMenu();
+};
+window.addEventListener("resize", ()=>{ if(recentOpen) positionRecentMenu(); });
+window.addEventListener("scroll", ()=>{ if(recentOpen) positionRecentMenu(); }, true);
+window.addEventListener("click", ()=>{ if(recentOpen) closeRecentMenu(); });
+recentMenu.addEventListener("click", (e)=>e.stopPropagation());
+
+divider.addEventListener("mousedown",(e)=>{ draggingDivider=true; document.body.style.userSelect="none"; e.preventDefault(); });
+dockDivider.addEventListener("mousedown",(e)=>{ draggingDockDivider=true; document.body.style.userSelect="none"; e.preventDefault(); });
+
+window.addEventListener("mouseup", async ()=>{
+  if(draggingDivider){
+    draggingDivider=false; document.body.style.userSelect="";
+    if(prefs && typeof prefs.split_ratio==="number"){ await savePrefsPatch({split_ratio:prefs.split_ratio}); }
+  }
+  if(draggingDockDivider){
+    draggingDockDivider=false; document.body.style.userSelect="";
+    if(prefs && typeof prefs.dock_ratio==="number"){ await savePrefsPatch({dock_ratio:prefs.dock_ratio}); }
+  }
+});
+
+window.addEventListener("mousemove",(e)=>{
+  if(draggingDivider){
+    const rect=contentGrid.getBoundingClientRect();
+    const x=e.clientX-rect.left;
+    prefs=prefs||{};
+    prefs.split_ratio=applySplit(x/rect.width);
+    if(saveSplitTimer) clearTimeout(saveSplitTimer);
+    saveSplitTimer=setTimeout(()=>{ if(prefs) savePrefsPatch({split_ratio:prefs.split_ratio}); }, 400);
+  }
+  if(draggingDockDivider){
+    const rect=dockGrid.getBoundingClientRect();
+    const x=e.clientX-rect.left;
+    prefs=prefs||{};
+    prefs.dock_ratio=applyDockSplit(x/rect.width);
+    if(saveDockTimer) clearTimeout(saveDockTimer);
+    saveDockTimer=setTimeout(()=>{ if(prefs) savePrefsPatch({dock_ratio:prefs.dock_ratio}); }, 400);
+  }
+});
+
+zoomOutBtn.onclick=()=>{
+  prefs.ui_zoom=applyZoom(Number(prefs.ui_zoom||1.0)-0.1);
+  if(saveZoomTimer) clearTimeout(saveZoomTimer);
+  saveZoomTimer=setTimeout(()=>savePrefsPatch({ui_zoom:prefs.ui_zoom}),120);
+  if(recentOpen) positionRecentMenu();
+};
+zoomInBtn.onclick=()=>{
+  prefs.ui_zoom=applyZoom(Number(prefs.ui_zoom||1.0)+0.1);
+  if(saveZoomTimer) clearTimeout(saveZoomTimer);
+  saveZoomTimer=setTimeout(()=>savePrefsPatch({ui_zoom:prefs.ui_zoom}),120);
+  if(recentOpen) positionRecentMenu();
+};
+zoomResetBtn.onclick=()=>{
+  prefs.ui_zoom=applyZoom(1.0);
+  if(saveZoomTimer) clearTimeout(saveZoomTimer);
+  saveZoomTimer=setTimeout(()=>savePrefsPatch({ui_zoom:prefs.ui_zoom}),120);
+  if(recentOpen) positionRecentMenu();
+};
+
+onTopChk.addEventListener("change", async ()=>{
+  const enabled=!!onTopChk.checked;
+  try{
+    await window.pywebview.api.set_always_on_top(enabled);
+    prefs.always_on_top=enabled;
+    await savePrefsPatch({always_on_top:enabled});
+    notify(enabled ? "On top enabled." : "On top disabled.");
+  }catch(e){ onTopChk.checked=!!prefs.always_on_top; }
+});
+
+autoplayChk.addEventListener("change", async ()=>{
+  if(!library) return;
+  const enabled=!!autoplayChk.checked;
+  try{
+    const res=await window.pywebview.api.set_folder_autoplay(enabled);
+    if(res && res.ok){
+      library.folder_autoplay=enabled; updateInfoPanel();
+      notify(enabled ? "Autoplay: ON" : "Autoplay: OFF");
+    }
+  }catch(e){}
+});
+
+resetProgBtn.addEventListener("click", async ()=>{
+  if(!library) return;
+  try{
+    const res=await window.pywebview.api.reset_watch_progress();
+    if(res && res.ok){
+      notify("Progress reset for this folder.");
+      const info=await window.pywebview.api.get_library();
+      if(info && info.ok){
+        library=info;
+        currentIndex=library.current_index||0;
+        renderList(); updateOverall(); updateInfoPanel();
+        await loadIndex(currentIndex, 0.0, true, false);
+      }
+    }
+  }catch(e){}
+});
+
+async function togglePlay(){
+  try{
+    if(player.paused||player.ended) await player.play();
+    else player.pause();
+  }catch(e){}
+  updatePlayPauseIcon();
+}
+playPauseBtn.onclick=togglePlay;
+player.addEventListener("click",(e)=>{ e.preventDefault(); togglePlay(); });
+
+prevBtn.onclick=()=>nextPrev(-1);
+nextBtn.onclick=()=>nextPrev(+1);
+
+fsBtn.onclick=async ()=>{
+  try{
+    if(document.fullscreenElement) await document.exitFullscreen();
+    else await player.requestFullscreen();
+  }catch(e){}
+};
+
+const volFill = document.getElementById("volFill");
+function updateVolFill(){
+  if(volFill){
+    const pct = clamp(Number(volSlider.value||1.0),0,1) * 100;
+    volFill.style.width = pct + "%";
+  }
+}
+// Initial update
+updateVolFill();
+
+volSlider.addEventListener("input", ()=>{
+  const v=clamp(Number(volSlider.value||1.0),0,1);
+  suppressTick=true; player.volume=v; suppressTick=false;
+  if(library) library.folder_volume=v;
+  updateInfoPanel();
+  updateVolFill();
+  // Update volume tooltip text and position
+  const volTooltip = document.getElementById("volTooltip");
+  if(volTooltip && volTooltip.classList.contains("show")) {
+    volTooltip.textContent = Math.round(v * 100) + "%";
+    // Slider thumb is 14px wide, so track range is (sliderWidth - 14px)
+    // Thumb center at v=0 is at 7px, at v=1 is at (sliderWidth - 7px)
+    const sliderWidth = volSlider.offsetWidth;
+    const thumbRadius = 7;
+    const trackRange = sliderWidth - thumbRadius * 2;
+    const thumbCenter = thumbRadius + v * trackRange;
+    // Add offset for: padding(10) + icon(14) + gap(10)
+    volTooltip.style.left = (10 + 14 + 10 + 8 + thumbCenter) + "px";
+  }
+});
+volSlider.addEventListener("mousedown", ()=>{ 
+  volSlider.dragging=true;
+  const volTooltip = document.getElementById("volTooltip");
+  if(volTooltip) {
+    const v = clamp(Number(volSlider.value||1.0),0,1);
+    volTooltip.textContent = Math.round(v * 100) + "%";
+    const sliderWidth = volSlider.offsetWidth;
+    const thumbRadius = 7;
+    const trackRange = sliderWidth - thumbRadius * 2;
+    const thumbCenter = thumbRadius + v * trackRange;
+    volTooltip.style.left = (10 + 14 + 10 + 8 + thumbCenter) + "px";
+    volTooltip.classList.add("show");
+  }
+});
+volSlider.addEventListener("touchstart", ()=>{ 
+  volSlider.dragging=true;
+  const volTooltip = document.getElementById("volTooltip");
+  if(volTooltip) {
+    const v = clamp(Number(volSlider.value||1.0),0,1);
+    volTooltip.textContent = Math.round(v * 100) + "%";
+    const sliderWidth = volSlider.offsetWidth;
+    const thumbRadius = 7;
+    const trackRange = sliderWidth - thumbRadius * 2;
+    const thumbCenter = thumbRadius + v * trackRange;
+    volTooltip.style.left = (10 + 14 + 10 + 8 + thumbCenter) + "px";
+    volTooltip.classList.add("show");
+  }
+});
+volSlider.addEventListener("change", async ()=>{
+  volSlider.dragging=false;
+  const volTooltip = document.getElementById("volTooltip");
+  if(volTooltip) volTooltip.classList.remove("show");
+  updateVolFill();
+  if(!library) return;
+  try{
+    const v=clamp(Number(volSlider.value||1.0),0,1);
+    await window.pywebview.api.set_folder_volume(v);
+    library.folder_volume=v; updateInfoPanel();
+  }catch(e){}
+});
+window.addEventListener("mouseup", ()=>{ 
+  volSlider.dragging=false; 
+  const volTooltip = document.getElementById("volTooltip");
+  if(volTooltip) volTooltip.classList.remove("show");
+});
+window.addEventListener("touchend", ()=>{ 
+  volSlider.dragging=false;
+  const volTooltip = document.getElementById("volTooltip");
+  if(volTooltip) volTooltip.classList.remove("show");
+});
+
+const SPEEDS=[0.5,0.75,1.0,1.25,1.5,1.75,2.0];
+function closeSpeedMenu(){ speedMenu.classList.remove("show"); }
+function openSpeedMenu(){ speedMenu.classList.add("show"); }
+function buildSpeedMenu(active){
+  speedMenu.innerHTML="";
+  for(const s of SPEEDS){
+    const row=document.createElement("div");
+    row.className="speedItem"+(Math.abs(s-active)<0.0001?" active":"");
+    row.setAttribute("role","menuitem");
+
+    const left=document.createElement("div");
+    left.style.display="flex"; left.style.alignItems="center"; left.style.gap="10px";
+    const dot=document.createElement("div"); dot.className="dot";
+    const txt=document.createElement("div");
+    txt.textContent=`${s.toFixed(2)}x`;
+
+    left.appendChild(dot); left.appendChild(txt);
+    row.appendChild(left);
+
+    row.onclick=async ()=>{
+      closeSpeedMenu();
+      const r=clamp(Number(s),0.25,3);
+      player.playbackRate=r;
+      if(library) library.folder_rate=r;
+      speedBtnText.textContent=`${r.toFixed(2)}x`;
+      updateSpeedIcon(r);
+      buildSpeedMenu(r); updateInfoPanel();
+      suppressTick=true;
+      if(library){ try{ await window.pywebview.api.set_folder_rate(r); }catch(e){} }
+      suppressTick=false;
+    };
+    speedMenu.appendChild(row);
+  }
+}
+speedBtn.addEventListener("click",(e)=>{
+  e.preventDefault(); e.stopPropagation();
+  if(speedMenu.classList.contains("show")) closeSpeedMenu();
+  else openSpeedMenu();
+});
+window.addEventListener("click", ()=>{ closeSpeedMenu(); });
+speedMenu.addEventListener("click",(e)=>e.stopPropagation());
+
+seek.addEventListener("input", ()=>{
+  seeking=true;
+  const d=player.duration||0;
+  if(d>0){
+    const t=(Number(seek.value)/1000)*d;
+    timeNow.textContent=fmtTime(t);
+  }
+  updateSeekFill();
+});
+seek.addEventListener("change", ()=>{
+  const d=player.duration||0;
+  if(d>0){
+    const t=(Number(seek.value)/1000)*d;
+    try{ player.currentTime=t; }catch(e){}
+  }
+  seeking=false;
+  updateSeekFill();
+});
+const seekFill = document.getElementById("seekFill");
+function updateSeekFill(){
+  if(seekFill){
+    const pct = (Number(seek.value) / 1000) * 100;
+    seekFill.style.width = pct + "%";
+  }
+}
+player.addEventListener("timeupdate", ()=>{
+  if(!seeking){
+    const d=player.duration||0, t=player.currentTime||0;
+    if(d>0) seek.value=String(Math.round((t/d)*1000));
+    updateSeekFill();
+    updateTimeReadout();
+  }
+  updateInfoPanel();
+});
+player.addEventListener("loadedmetadata", async ()=>{
+  const d=player.duration||0;
+  timeDur.textContent=d?fmtTime(d):"00:00";
+  await refreshCurrentVideoMeta();
+});
+player.addEventListener("ended", ()=>nextPrev(+1));
+player.addEventListener("play", ()=>{
+  updatePlayPauseIcon();
+  updateVideoOverlay();
+});
+player.addEventListener("pause", ()=>{
+  updatePlayPauseIcon();
+  updateVideoOverlay();
+});
+
+// Video overlay play/pause
+const videoOverlay = document.getElementById("videoOverlay");
+const overlayIcon = document.getElementById("overlayIcon");
+const overlayIconI = document.getElementById("overlayIconI");
+let overlayHideTimer = null;
+
+function updateVideoOverlay(){
+  if(!overlayIcon || !overlayIconI) return;
+  const paused = player.paused;
+  
+  if(paused){
+    // Show play icon when paused
+    overlayIconI.className = "fa-solid fa-play";
+    overlayIcon.classList.remove("pause");
+    overlayIcon.classList.add("show");
+  } else {
+    // Hide when playing
+    overlayIcon.classList.remove("show");
+  }
+}
+
+// Show pause icon on hover when playing
+if(videoOverlay){
+  const videoWrap = videoOverlay.parentElement;
+  
+  videoWrap.addEventListener("mouseenter", ()=>{
+    if(!player.paused && overlayIcon){
+      overlayIconI.className = "fa-solid fa-pause";
+      overlayIcon.classList.add("pause");
+      overlayIcon.classList.add("show");
+    }
+  });
+  
+  videoWrap.addEventListener("mouseleave", ()=>{
+    if(!player.paused && overlayIcon){
+      overlayIcon.classList.remove("show");
+    }
+  });
+  
+  // Allow clicking overlay to toggle play/pause
+  videoOverlay.style.pointerEvents = "auto";
+  videoOverlay.style.cursor = "pointer";
+  videoOverlay.addEventListener("click", ()=>{
+    if(player.paused){
+      player.play();
+    } else {
+      player.pause();
+    }
+    // Pulse animation
+    overlayIcon.classList.add("pulse");
+    setTimeout(()=> overlayIcon.classList.remove("pulse"), 400);
+  });
+}
+
+// Initial state
+setTimeout(updateVideoOverlay, 100);
+
+function ensureSubtitleTrack(){
+  if(!subtitleTrackEl){
+    subtitleTrackEl = document.createElement("track");
+    subtitleTrackEl.kind = "subtitles";
+    subtitleTrackEl.label = "Subtitles";
+    subtitleTrackEl.srclang = "en";
+    subtitleTrackEl.default = true;
+    player.appendChild(subtitleTrackEl);
+  }
+}
+async function refreshSubtitles(){
+  ensureSubtitleTrack();
+  try{
+    const res=await window.pywebview.api.get_current_subtitle();
+    if(res && res.ok && res.has){
+      subtitleTrackEl.src = res.url;
+      subtitleTrackEl.label = res.label || "Subtitles";
+      // Attempt to show
+      setTimeout(()=>{
+        try{
+          if(player.textTracks && player.textTracks.length>0){
+            for(const tt of player.textTracks){
+              if(tt.kind==="subtitles") tt.mode="showing";
+            }
+          }
+        }catch(e){}
+      }, 50);
+      notify("Subtitles loaded.");
+    }else{
+      subtitleTrackEl.src = "";
+    }
+  }catch(e){}
+}
+
+let subsMenuOpen = false;
+
+function closeSubsMenu(){
+  subsMenuOpen = false;
+  subsMenu.classList.remove("show");
+}
+
+async function openSubsMenu(){
+  if(!library) return;
+  subsMenu.innerHTML = "";
+  
+  try{
+    const available = await window.pywebview.api.get_available_subtitles();
+    if(available && available.ok){
+      // Sidecar subtitle files
+      if(available.sidecar && available.sidecar.length > 0){
+        const header = document.createElement("div");
+        header.className = "subsMenuHeader";
+        header.textContent = "External Files";
+        subsMenu.appendChild(header);
+        
+        for(const sub of available.sidecar){
+          const item = document.createElement("div");
+          item.className = "subsMenuItem";
+          item.innerHTML = `<i class="fa-solid fa-file-lines"></i> ${sub.label} <span style="opacity:.5;font-size:10px;margin-left:auto;">${sub.format}</span>`;
+          item.onclick = async ()=>{
+            closeSubsMenu();
+            const res = await window.pywebview.api.load_sidecar_subtitle(sub.path);
+            if(res && res.ok && res.url){
+              applySubtitle(res.url, res.label);
+              notify("Subtitles loaded.");
+            }else{
+              notify(res?.error || "Failed to load subtitle");
+            }
+          };
+          subsMenu.appendChild(item);
+        }
+      }
+      
+      // Embedded subtitle tracks
+      if(available.embedded && available.embedded.length > 0){
+        if(available.sidecar && available.sidecar.length > 0){
+          const div = document.createElement("div");
+          div.className = "subsDivider";
+          subsMenu.appendChild(div);
+        }
+        
+        const header = document.createElement("div");
+        header.className = "subsMenuHeader";
+        header.textContent = "Embedded Tracks";
+        subsMenu.appendChild(header);
+        
+        for(const track of available.embedded){
+          const item = document.createElement("div");
+          item.className = "subsMenuItem embedded";
+          item.innerHTML = `<i class="fa-solid fa-film"></i> ${track.label} <span style="opacity:.5;font-size:10px;margin-left:auto;">${track.codec}</span>`;
+          item.onclick = async ()=>{
+            closeSubsMenu();
+            const res = await window.pywebview.api.extract_embedded_subtitle(track.index);
+            if(res && res.ok && res.url){
+              applySubtitle(res.url, res.label);
+              notify("Embedded subtitle loaded.");
+            }else{
+              notify(res?.error || "Failed to extract subtitle");
+            }
+          };
+          subsMenu.appendChild(item);
+        }
+      }
+      
+      // Add divider if we had any subs
+      if((available.sidecar && available.sidecar.length > 0) || (available.embedded && available.embedded.length > 0)){
+        const div = document.createElement("div");
+        div.className = "subsDivider";
+        subsMenu.appendChild(div);
+      }
+    }
+  }catch(e){}
+  
+  // Add "Load from file" option
+  const loadItem = document.createElement("div");
+  loadItem.className = "subsMenuItem";
+  loadItem.innerHTML = '<i class="fa-solid fa-file-import"></i> Load from file...';
+  loadItem.onclick = async ()=>{
+    closeSubsMenu();
+    try{
+      const res = await window.pywebview.api.choose_subtitle_file();
+      if(res && res.ok && res.url){
+        applySubtitle(res.url, res.label);
+        notify("Subtitles loaded.");
+      }else if(res && res.error){
+        notify(res.error);
+      }
+    }catch(e){}
+  };
+  subsMenu.appendChild(loadItem);
+  
+  // Add "Disable" option if subtitles are active
+  const disableItem = document.createElement("div");
+  disableItem.className = "subsMenuItem";
+  disableItem.innerHTML = '<i class="fa-solid fa-xmark"></i> Disable subtitles';
+  disableItem.onclick = ()=>{
+    closeSubsMenu();
+    try{
+      if(player.textTracks){
+        for(const tt of player.textTracks){
+          tt.mode = "hidden";
+        }
+      }
+      notify("Subtitles disabled.");
+    }catch(e){}
+  };
+  subsMenu.appendChild(disableItem);
+  
+  subsMenu.classList.add("show");
+  subsMenuOpen = true;
+}
+
+function applySubtitle(url, label){
+  ensureSubtitleTrack();
+  subtitleTrackEl.src = url;
+  subtitleTrackEl.label = label || "Subtitles";
+  setTimeout(()=>{
+    try{
+      if(player.textTracks && player.textTracks.length>0){
+        for(const tt of player.textTracks){
+          if(tt.kind==="subtitles") tt.mode="showing";
+        }
+      }
+    }catch(e){}
+  }, 50);
+}
+
+function clearSubtitles(){
+  try{
+    // Hide all text tracks
+    if(player.textTracks && player.textTracks.length>0){
+      for(const tt of player.textTracks){
+        tt.mode = "hidden";
+      }
+    }
+    // Clear subtitle track source
+    if(subtitleTrackEl){
+      subtitleTrackEl.src = "";
+    }
+  }catch(e){}
+}
+
+subsBtn.addEventListener("click", async (e)=>{
+  e.stopPropagation();
+  if(!library) return;
+  if(subsMenuOpen){
+    closeSubsMenu();
+  }else{
+    await openSubsMenu();
+  }
+});
+
+window.addEventListener("click", ()=>{ if(subsMenuOpen) closeSubsMenu(); });
+subsMenu.addEventListener("click", (e)=>e.stopPropagation());
+
+async function chooseFolder(){
+  closeRecentMenu();
+  const info=await window.pywebview.api.select_folder();
+  if(!info||!info.ok) return;
+  await onLibraryLoaded(info,true);
+  notify("Folder loaded.");
+}
+async function onLibraryLoaded(info,startScan){
+  library=info;
+  currentIndex=library.current_index||0;
+
+  // Clear any active subtitles
+  clearSubtitles();
+
+  const v=clamp(Number(library.folder_volume ?? 1.0),0,1);
+  suppressTick=true; player.volume=v; volSlider.value=String(v); suppressTick=false;
+  updateVolFill();
+
+  const r=clamp(Number(library.folder_rate ?? 1.0),0.25,3);
+  player.playbackRate=r;
+  speedBtnText.textContent=`${r.toFixed(2)}x`;
+  updateSpeedIcon(r);
+  buildSpeedMenu(r);
+
+  autoplayChk.checked=!!library.folder_autoplay;
+
+  updateOverall(); renderList(); updateInfoPanel();
+
+  if(startScan){ try{ await window.pywebview.api.start_duration_scan(); }catch(e){} }
+  await loadIndex(currentIndex, Number(library.current_time||0.0), true, false);
+}
+async function reloadLibrary(){
+  const info=await window.pywebview.api.get_library();
+  if(!info||!info.ok) return;
+  await onLibraryLoaded(info,false);
+  notify("Reloaded.");
+}
+function updateNowHeader(it){
+  nowTitle.textContent = it ? (it.title || it.name) : "No video loaded";
+  nowSub.textContent = it ? it.relpath : "-";
+}
+async function loadIndex(idx,timecode=0.0,pauseAfterLoad=true,autoplayOnLoad=false){
+  if(!library||!library.items||library.items.length===0) return;
+  idx=Math.max(0, Math.min(idx, library.items.length-1));
+  currentIndex=idx;
+
+  const keepVol=clamp(Number(library.folder_volume ?? player.volume ?? 1.0),0,1);
+  const keepRate=clamp(Number(library.folder_rate ?? player.playbackRate ?? 1.0),0.25,3);
+
+  suppressTick=true;
+  player.src=`/video/${currentIndex}`;
+  player.load();
+
+  const it=library.items[currentIndex]||null;
+  updateNowHeader(it);
+
+  await window.pywebview.api.set_current(currentIndex, Number(timecode||0.0));
+  renderList(); updateInfoPanel();
+  await loadNoteForCurrent();
+  await refreshCurrentVideoMeta();
+
+  player.onloadedmetadata = async ()=>{
+    try{ player.volume=keepVol; volSlider.value=String(keepVol); updateVolFill(); }catch(e){}
+    try{ player.playbackRate=keepRate; }catch(e){}
+    speedBtnText.textContent=`${keepRate.toFixed(2)}x`;
+    updateSpeedIcon(keepRate);
+    buildSpeedMenu(keepRate);
+
+    try{ const t=Number(timecode||0.0); if(t>0) player.currentTime=t; }catch(e){}
+
+    // subtitle check (auto sidecar + saved)
+    await refreshSubtitles();
+
+    if(autoplayOnLoad){
+      try{ await player.play(); }catch(e){}
+    }else if(pauseAfterLoad){
+      player.pause();
+    }
+
+    suppressTick=false;
+    updateTimeReadout(); updatePlayPauseIcon(); updateInfoPanel();
+    await refreshCurrentVideoMeta();
+  };
+}
+function nextPrev(delta){
+  if(!library||!library.items||library.items.length===0) return;
+  const newIdx=Math.max(0, Math.min(currentIndex+delta, library.items.length-1));
+  const it=library.items[newIdx];
+  const auto=!!library.folder_autoplay;
+  loadIndex(newIdx, computeResumeTime(it), !auto, auto);
+}
+
+chooseBtn.onclick=chooseFolder;
+refreshBtn.onclick=reloadLibrary;
+
+async function tick(){
+  const now=Date.now();
+  if(now-lastTick<950) return;
+  lastTick=now;
+
+  if(library && !suppressTick){
+    const t=player.currentTime||0.0;
+    const d=Number.isFinite(player.duration)?player.duration:null;
+    const playing=!player.paused && !player.ended;
+    try{ await window.pywebview.api.tick_progress(currentIndex,t,d,playing); }catch(e){}
+  }
+
+  if(now % 3000 < 1000){
+    try{
+      const info=await window.pywebview.api.get_library();
+      if(info && info.ok){
+        const oldIndex = currentIndex;
+        const oldCount = library?.items?.length || 0;
+        library=info; currentIndex=library.current_index||currentIndex;
+        autoplayChk.checked=!!library.folder_autoplay;
+
+        const v=clamp(Number(library.folder_volume ?? player.volume ?? 1.0),0,1);
+        if(!volSlider.dragging && Math.abs(v-Number(volSlider.value))>0.001){ volSlider.value=String(v); updateVolFill(); }
+
+        const r=clamp(Number(library.folder_rate ?? player.playbackRate ?? 1.0),0.25,3);
+        player.playbackRate=r;
+        speedBtnText.textContent=`${r.toFixed(2)}x`;
+        updateSpeedIcon(r);
+        buildSpeedMenu(r);
+
+        updateOverall(); updateInfoPanel(); updateNowHeader(currentItem());
+        // Only re-render list if index changed or item count changed
+        if(oldIndex !== currentIndex || oldCount !== (library?.items?.length || 0)){
+          renderList();
+        }
+      }
+    }catch(e){}
+  }
+
+  try{ await window.pywebview.api.save_window_state(); }catch(e){}
+}
+setInterval(tick, 250);
+
+async function boot(){
+  ensureDropdownPortal();
+  const pres=await window.pywebview.api.get_prefs();
+  prefs=(pres && pres.ok) ? (pres.prefs||{}) : {};
+  prefs.ui_zoom=applyZoom(prefs.ui_zoom||1.0);
+  prefs.split_ratio=applySplit(prefs.split_ratio||0.62);
+  prefs.dock_ratio=applyDockSplit(prefs.dock_ratio||0.62);
+  onTopChk.checked=!!prefs.always_on_top;
+
+  await savePrefsPatch({
+    ui_zoom:prefs.ui_zoom,
+    split_ratio:prefs.split_ratio,
+    dock_ratio:prefs.dock_ratio,
+    always_on_top:!!prefs.always_on_top
+  });
+
+  const info=await window.pywebview.api.get_library();
+  if(info && info.ok){
+    await onLibraryLoaded(info,true);
+    notify("Ready.");
+    return;
+  }
+
+  updateOverall(); updateTimeReadout(); updatePlayPauseIcon(); updateInfoPanel();
+  buildSpeedMenu(1.0);
+  notify("Open a folder to begin.");
+}
+
+// Fancy tooltip system
+(function initTooltips(){
+  const fancyTooltip = document.getElementById("fancyTooltip");
+  if(!fancyTooltip) return;
+  
+  const tooltipTitle = fancyTooltip.querySelector(".tooltip-title");
+  const tooltipDesc = fancyTooltip.querySelector(".tooltip-desc");
+  let showTimeout = null;
+  let hideTimeout = null;
+  let currentEl = null;
+
+  function getZoom(){
+    const z = getComputedStyle(document.documentElement).getPropertyValue('--zoom');
+    return parseFloat(z) || 1;
+  }
+
+  function positionTooltip(el){
+    const zoom = getZoom();
+    const margin = 16;
+    
+    fancyTooltip.style.transform = `scale(${zoom})`;
+    fancyTooltip.style.transformOrigin = 'top left';
+    
+    const rect = el.getBoundingClientRect();
+    const tipRect = fancyTooltip.getBoundingClientRect();
+    const tipW = tipRect.width;
+    const tipH = tipRect.height;
+    
+    let left = rect.left + rect.width/2 - tipW/2;
+    let top = rect.bottom + 8;
+    
+    if(left < margin) left = margin;
+    if(left + tipW > window.innerWidth - margin) left = window.innerWidth - tipW - margin;
+    
+    if(top + tipH > window.innerHeight - margin){
+      top = rect.top - tipH - 8;
+      fancyTooltip.style.transformOrigin = 'bottom left';
+    } else {
+      fancyTooltip.style.transformOrigin = 'top left';
+    }
+    
+    if(top < margin) top = margin;
+    
+    fancyTooltip.style.left = left + "px";
+    fancyTooltip.style.top = top + "px";
+  }
+
+  function showFancyTooltip(el){
+    const title = el.dataset.tooltip || "";
+    const desc = el.dataset.tooltipDesc || "";
+    if(!title) return;
+    
+    // Cancel any pending hide
+    clearTimeout(hideTimeout);
+    hideTimeout = null;
+    
+    // Update content
+    tooltipTitle.textContent = title;
+    tooltipDesc.textContent = desc;
+    positionTooltip(el);
+    currentEl = el;
+    
+    // If already visible, we're done (instant switch)
+    if(fancyTooltip.classList.contains("visible")){
+      return;
+    }
+    
+    // Otherwise, delay before showing
+    clearTimeout(showTimeout);
+    showTimeout = setTimeout(()=>{
+      fancyTooltip.classList.add("visible");
+    }, 250);
+  }
+
+  function hideFancyTooltip(){
+    clearTimeout(showTimeout);
+    showTimeout = null;
+    
+    // Small delay before hiding to allow moving to another tooltip element
+    hideTimeout = setTimeout(()=>{
+      fancyTooltip.classList.remove("visible");
+      currentEl = null;
+    }, 80);
+  }
+
+  document.querySelectorAll("[data-tooltip]").forEach(el=>{
+    el.addEventListener("mouseenter", ()=>showFancyTooltip(el));
+    el.addEventListener("mouseleave", hideFancyTooltip);
+    el.addEventListener("mousedown", ()=>{
+      clearTimeout(showTimeout);
+      clearTimeout(hideTimeout);
+      fancyTooltip.classList.remove("visible");
+      currentEl = null;
+    });
+  });
+})();
+
+window.addEventListener("pywebviewready", ()=>{ boot(); });
+</script>
+</body>
+</html>
+"""
+
+# =============================================================================
+# Application Entry Point
+# =============================================================================
+
+
+def main() -> None:
+    """Initialize and run the TutorialDock application."""
+    # Download and cache fonts for offline use (fail silently)
+    try:
+        ensure_google_fonts_local()
+    except Exception:
+        pass
+    try:
+        ensure_fontawesome_local()
+    except Exception:
+        pass
+
+    # Restore last opened folder if it exists
+    prefs = PREFS.get()
+    last_path = prefs.get("last_folder_path")
+    if isinstance(last_path, str) and last_path.strip():
+        try:
+            if Path(last_path).expanduser().exists():
+                LIB.set_root(last_path)
+        except Exception:
+            pass
+
+    # Start Flask server on a free port
+    port = pick_free_port(HOST)
+    flask_thread = threading.Thread(target=run_flask, args=(port,), daemon=True)
+    flask_thread.start()
+
+    # Get window dimensions from saved preferences
+    window_prefs = prefs.get("window", {}) if isinstance(prefs.get("window"), dict) else {}
+    width = int(window_prefs.get("width") or 1320)
+    height = int(window_prefs.get("height") or 860)
+    x = window_prefs.get("x")
+    y = window_prefs.get("y")
+    on_top = bool(prefs.get("always_on_top", False))
+
+    # Create and start the webview window
+    api = API()
+    webview.create_window(
+        "TutorialDock",
+        url=f"http://{HOST}:{port}/",
+        width=width,
+        height=height,
+        x=x if isinstance(x, int) else None,
+        y=y if isinstance(y, int) else None,
+        on_top=on_top,
+        js_api=api,
+    )
+    webview.start(debug=False)
+
+
+if __name__ == "__main__":
+    main()
\ No newline at end of file
diff --git a/tutorials.bat b/tutorials.bat
new file mode 100644
index 0000000..e4b096c
--- /dev/null
+++ b/tutorials.bat
@@ -0,0 +1,6 @@
+@echo off
+set SCRIPT_DIR=%~dp0
+pushd "%SCRIPT_DIR%"
+start "" /B pythonw "tutorial.py"
+popd
+exit
\ No newline at end of file