diff --git a/.gitignore b/.gitignore
index cc717af46..df6ac8e63 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,3 +57,7 @@ chromatic.log
 # playwright
 /test-results/
 /playwright-report/
+
+# local performance measurement output
+scripts/perf/lh/
+scripts/perf/reports/
diff --git a/.storybook/preview.css b/.storybook/preview.css
index a6942d212..cf593925f 100644
--- a/.storybook/preview.css
+++ b/.storybook/preview.css
@@ -1,10 +1,10 @@
 /*
  * Snapshot stability for Chromatic.
  *
- * src/app/globals.css applies a 200ms transition to *every* element
- * (`*, *::before, *::after`) and several components animate on mount. A visual
- * regression service screenshots at an arbitrary moment, so those in-flight
- * transitions produce diffs that have nothing to do with a real change.
+ * Components use short, targeted transitions (globals.css no longer transitions
+ * every element) and a few animate on mount. A visual regression service
+ * screenshots at an arbitrary moment, so any in-flight transition produces a
+ * diff that has nothing to do with a real change.
  *
  * Freezing them here makes every story render at its settled end state. This
  * only affects the Storybook preview iframe — the app itself still animates.
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index 8a5782538..3bf2b3993 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -79,7 +79,7 @@ Reframe uses FFmpeg.wasm to process videos entirely in the browser. The processi
    - **Fill mode**: Video is scaled to fill the target dimensions and cropped
 5. **Speed Adjustment** — Playback speed is adjusted using `setpts` (video) and `atempo` (audio) filters
 6. **Audio Processing** — Audio is either kept (with speed adjustment) or removed based on user preference
-7. **Encoding** — Final video is encoded to MP4 (H.264) or WebM (VP9) format
+7. **Encoding** — Final video is encoded to MP4 (H.264) or WebM (VP8 + Vorbis) format
 8. **Download** — Processed video is made available as a Blob URL for download
 
 ---
diff --git a/docs/assets/ui-redesign/after-editor-desktop.jpg b/docs/assets/ui-redesign/after-editor-desktop.jpg
new file mode 100644
index 000000000..35154cf98
Binary files /dev/null and b/docs/assets/ui-redesign/after-editor-desktop.jpg differ
diff --git a/docs/assets/ui-redesign/after-editor-mobile.jpg b/docs/assets/ui-redesign/after-editor-mobile.jpg
new file mode 100644
index 000000000..d33cb3263
Binary files /dev/null and b/docs/assets/ui-redesign/after-editor-mobile.jpg differ
diff --git a/docs/assets/ui-redesign/after-exporting-desktop.jpg b/docs/assets/ui-redesign/after-exporting-desktop.jpg
new file mode 100644
index 000000000..affb53d8f
Binary files /dev/null and b/docs/assets/ui-redesign/after-exporting-desktop.jpg differ
diff --git a/docs/assets/ui-redesign/before-editor-desktop.jpg b/docs/assets/ui-redesign/before-editor-desktop.jpg
new file mode 100644
index 000000000..4aa5a4baf
Binary files /dev/null and b/docs/assets/ui-redesign/before-editor-desktop.jpg differ
diff --git a/docs/assets/ui-redesign/before-editor-mobile.jpg b/docs/assets/ui-redesign/before-editor-mobile.jpg
new file mode 100644
index 000000000..0da1a818d
Binary files /dev/null and b/docs/assets/ui-redesign/before-editor-mobile.jpg differ
diff --git a/docs/assets/ui-redesign/before-exporting-desktop.jpg b/docs/assets/ui-redesign/before-exporting-desktop.jpg
new file mode 100644
index 000000000..a5e68e222
Binary files /dev/null and b/docs/assets/ui-redesign/before-exporting-desktop.jpg differ
diff --git a/scripts/fonts/build-cormorant.sh b/scripts/fonts/build-cormorant.sh
new file mode 100755
index 000000000..19858fca3
--- /dev/null
+++ b/scripts/fonts/build-cormorant.sh
@@ -0,0 +1,47 @@
+#!/usr/bin/env bash
+# Rebuilds the self-hosted Cormorant Garamond files in src/app/fonts/.
+#
+# The UI sets the serif at three styles only (upright 400 for .display,
+# upright 500 for .serif, italic 400 for .marker) and only for its own English
+# copy, so the full Google Fonts variable files (300-700, Latin-1 and more,
+# ~75 KB for the two Latin slices) are cut down to:
+#   - upright: variable, wght limited to 400-500
+#   - italic:  static 400
+# each subset to printable ASCII plus the typographic punctuation the copy may
+# use. Characters outside the subset fall back per glyph to the size-adjusted
+# fallback serif, so nothing renders as a missing-glyph box.
+#
+# Needs fonttools and brotli (dev only, not a project dependency):
+#   python3 -m venv /tmp/fontenv && /tmp/fontenv/bin/pip install fonttools brotli
+#   PYTHON=/tmp/fontenv/bin/python scripts/fonts/build-cormorant.sh
+set -euo pipefail
+
+PYTHON="${PYTHON:-python3}"
+# google/fonts commit that last touched ofl/cormorantgaramond (pinned so the
+# output is reproducible).
+REV=3dd78844021e948ceb633d1dcee3f7885561b5d9
+BASE="https://raw.githubusercontent.com/google/fonts/$REV/ofl/cormorantgaramond"
+OUT="$(cd "$(dirname "$0")/../.." && pwd)/src/app/fonts"
+WORK="$(mktemp -d)"
+trap 'rm -rf "$WORK"' EXIT
+
+curl -fsSL -o "$WORK/upright.ttf" "$BASE/CormorantGaramond%5Bwght%5D.ttf"
+curl -fsSL -o "$WORK/italic.ttf" "$BASE/CormorantGaramond-Italic%5Bwght%5D.ttf"
+curl -fsSL -o "$OUT/OFL.txt" "$BASE/OFL.txt"
+
+# ASCII, nbsp, middle dot, multiplication sign, en/em dash, curly quotes, ellipsis.
+UNICODES="U+0020-007E,U+00A0,U+00B7,U+00D7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026"
+# kern/liga for text, lnum/tnum/pnum for the figures (Cormorant defaults to
+# old-style numerals; .display and .marker switch to lining).
+FEATURES="kern,liga,calt,lnum,tnum,pnum"
+
+"$PYTHON" -m fontTools.varLib.instancer "$WORK/upright.ttf" wght=400:500 -o "$WORK/upright-400-500.ttf"
+"$PYTHON" -m fontTools.varLib.instancer "$WORK/italic.ttf" wght=400 -o "$WORK/italic-400.ttf"
+
+for name in upright-400-500 italic-400; do
+  "$PYTHON" -m fontTools.subset "$WORK/$name.ttf" \
+    --unicodes="$UNICODES" --layout-features="$FEATURES" \
+    --flavor=woff2 --output-file="$OUT/cormorant-garamond-$name.woff2"
+done
+
+ls -l "$OUT"
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 5fb57cb36..4f7fdc524 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -85,7 +85,7 @@ export default function ContactClient() {
   };
 
   return (
-    <main className="min-h-screen bg-[var(--bg)] text-[var(--text)] px-6 py-10">
+    <div className="min-h-screen bg-[var(--bg)] text-[var(--text)] px-6 py-10">
       <div className="mx-auto max-w-3xl">
         <div className="mb-10">
           <Link
@@ -106,7 +106,7 @@ export default function ContactClient() {
             placeholder="Name"
             className="w-full p-3 border rounded"
           />
-          {errors.name && <p className="text-red-400">{errors.name}</p>}
+          {errors.name && <p className="text-[var(--error)]">{errors.name}</p>}
 
           <input
             name="email"
@@ -115,7 +115,7 @@ export default function ContactClient() {
             placeholder="Email"
             className="w-full p-3 border rounded"
           />
-          {errors.email && <p className="text-red-400">{errors.email}</p>}
+          {errors.email && <p className="text-[var(--error)]">{errors.email}</p>}
 
           <textarea
             name="message"
@@ -125,11 +125,11 @@ export default function ContactClient() {
             className="w-full p-3 border rounded"
           />
           {errors.message && (
-            <p className="text-red-400">{errors.message}</p>
+            <p className="text-[var(--error)]">{errors.message}</p>
           )}
 
           {errors.submit && (
-            <p className="text-red-400">{errors.submit}</p>
+            <p className="text-[var(--error)]">{errors.submit}</p>
           )}
 
           {success && (
@@ -138,12 +138,12 @@ export default function ContactClient() {
 
           <button
             disabled={loading}
-            className="w-full p-3 bg-[var(--accent)] text-white rounded"
+            className="w-full p-3 bg-[var(--accent)] text-[var(--on-accent)] rounded"
           >
             {loading ? "Sending..." : "Send Message"}
           </button>
         </form>
       </div>
-    </main>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/app/fonts/OFL.txt b/src/app/fonts/OFL.txt
new file mode 100644
index 000000000..507d70f45
--- /dev/null
+++ b/src/app/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2015 the Cormorant Project Authors (github.com/CatharsisFonts/Cormorant)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/src/app/fonts/cormorant-garamond-italic-400.woff2 b/src/app/fonts/cormorant-garamond-italic-400.woff2
new file mode 100644
index 000000000..b2b9c274f
Binary files /dev/null and b/src/app/fonts/cormorant-garamond-italic-400.woff2 differ
diff --git a/src/app/fonts/cormorant-garamond-upright-400-500.woff2 b/src/app/fonts/cormorant-garamond-upright-400-500.woff2
new file mode 100644
index 000000000..32140781f
Binary files /dev/null and b/src/app/fonts/cormorant-garamond-upright-400-500.woff2 differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 1ca9f7ae8..57e82d3d4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,128 +1,222 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto:wght@400;700&family=Poppins:wght@400;700&family=Montserrat:wght@400;700&display=swap');
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* ── Light mode tokens ── */
+/*
+ * Reframe design tokens — "screening room" palette.
+ *
+ * Near-black, slate, warm brown, charcoal and warm ivory, with the film red
+ * from the logo kept for the few things that must be found instantly: the
+ * Export/Download action, the playhead, the trim range and progress.
+ *
+ * The five core names (--bg, --surface, --border, --text, --muted) are a
+ * public contract used by every component — never rename them. Raw palette
+ * values live only in this file; components use the semantic tokens.
+ */
+
+/* ── Light: warm ivory ── */
 :root {
-  --bg: #ffffff;
-  --surface: #f1f5f9;
-  --border: #cbd5e1;
-  --text: #0f172a;
-  --muted: #64748b;
-  --accent: #3b82f6;
-  --accent-hover: #1d4ed8;
-  --accent-muted: rgba(59, 130, 246, 0.12);
-  --radius: 10px;
-  --shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
-  --film-600: #e63946;
-  --film-400: #ff6b6b;
-  --warning: #f59e0b;
-  --error: #ef4444;
-  --error-bg: #fee2e2;
-  --error-border: #fca5a5;
-  --error-hover: #fecaca;
-  --neo-bg: #eceff5;
-  --neo-hi: rgba(255, 255, 255, 1);
-  --neo-lo: rgba(150, 165, 190, 0.8);
-  --skeu-top: #f8fafc;
-  --skeu-bottom: #cfd6e0;
-  --skeu-edge: rgba(255, 255, 255, 0.9);
-  --skeu-cut: rgba(15, 23, 42, 0.25);
-}
-
-/* ── Dark mode tokens ── */
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  /* Set by next/font in layout.tsx (self-hosted at build time). The fallback
+     stack keeps headings serif if the font file hasn't arrived yet. */
+  --font-serif: var(--font-cormorant), "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
+    Palatino, Georgia, serif;
+  --font-serif-italic: var(--font-cormorant-italic), var(--font-serif);
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* Palette (reference values; use the semantic tokens below in components) */
+  --ink: #0a0a0a;
+  --slate: #313945;
+  --brown: #463729;
+  --charcoal: #535352;
+  --ivory: #f5f5f3;
+  --stone: #807d7a;
+  --mist: #9c9d9c;
+
+  --bg: var(--ivory);
+  --surface: #fafaf8;
+  --surface-2: #ecebe7;
+  --border: #dedcd6;
+  /* Input/handle outlines: ≥3:1 against --bg and --surface (WCAG 1.4.11). */
+  --border-strong: #8a8682;
+  --text: #121211;
+  --text-secondary: var(--charcoal); /* 7.1:1 on ivory */
+  /* --stone (#807d7a) is 3.7:1 on ivory — too light for small text — so muted
+     text uses the same hue, darkened to 5.1:1. */
+  --muted: #6b6865;
+
+  /* Selection / "this is the active choice": warm brown, never red. */
+  --selected: var(--brown);
+  --selected-bg: rgba(70, 55, 41, 0.08);
+  --on-selected: var(--ivory);
+  /* Secondary controls */
+  --control: var(--slate);
+
+  /* Film red, deepened slightly so white text passes AA (5.6:1). */
+  --accent: #c42f3a;
+  --accent-hover: #a8242e;
+  --accent-muted: rgba(196, 47, 58, 0.09);
+  --accent-text: #a8242e;
+  --on-accent: #ffffff;
+  --film-600: #c42f3a;
+  --film-400: #de5560;
+
+  --focus: var(--slate);
+  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
+
+  --success: #2f6b45;
+  --success-bg: #e7efe8;
+  --warning: #855000;
+  --warning-bg: #f6eddd;
+  --error: #a8261d;
+  --error-bg: #f7e6e3;
+  --error-border: #e4b2ab;
+  --error-hover: #f1d6d1;
+
+  /* The viewer stays black in every theme, like a grading monitor. */
+  --viewer: var(--ink);
+  --viewer-frame: #1c1c1b;
+  /* The empty drop zone: a dark "screen". Same as the viewer in light mode;
+     slate-tinted in dark mode so it separates from the near-black page, like
+     the reference's slate-black panels. */
+  --stage: var(--ink);
+  /* Text placed on the viewer/drop-zone screen (always dark). */
+  --viewer-text: var(--ivory);
+  --viewer-muted: var(--mist);
+  --viewer-error: #f3a39b;
+
+  --radius: 6px;
+  --radius-control: 6px;
+  --radius-panel: 8px;
+  --radius-pill: 999px;
+  --shadow: 0 1px 2px rgba(18, 18, 17, 0.05);
+  --shadow-overlay: 0 24px 60px rgba(10, 10, 10, 0.22);
+
+  /* Motion: fast = hover/press, base = state changes, panel = disclosure,
+     enter = once-per-mount entrances. Durations are deliberately short;
+     reduced motion disables all of them (bottom of file). */
+  --dur-fast: 140ms;
+  --dur-base: 220ms;
+  --dur-slow: 220ms;
+  --dur-panel: 280ms;
+  --dur-enter: 560ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  color-scheme: light;
+}
+
+/* ── Dark: near-black screening room ── */
 .dark {
-  --bg: #0f1117;
-  --surface: #1a1d27;
-  --border: #2e3147;
-  --text: #f0f0f5;
-  --muted: #8b8fa8;
-  --accent: #4f6ef7;
-  --accent-hover: #3a57d4;
-  --accent-muted: rgba(79, 110, 247, 0.12);
-  --radius: 10px;
-  --shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-  --warning: #fbbf24;
-  --error: #f87171;
-  --error-bg: #7f1d1d;
-  --error-border: #991b1b;
-  --error-hover: #991b1b;
-  --neo-bg: #242836;
-  --neo-hi: rgba(255, 255, 255, 0.09);
-  --neo-lo: rgba(0, 0, 0, 0.8);
-  --skeu-top: #2b3042;
-  --skeu-bottom: #141722;
-  --skeu-edge: rgba(255, 255, 255, 0.12);
-  --skeu-cut: rgba(0, 0, 0, 0.7);
-}
-
-/* ── High contrast mode tokens ── */
-[data-theme="high-contrast"] {
-  --bg: #000000;
-  --surface: #000000;
-  --border: #FFFFFF;
-
-  --text: #FFFFFF;
-  --muted: #FFFFFF;
+  --bg: var(--ink);
+  --surface: #111215;
+  --surface-2: #1a1c20;
+  --border: #25272c;
+  --border-strong: #6c6c6a; /* 3.7:1 on --bg */
+  --text: var(--ivory);
+  --text-secondary: #cfcdc8;
+  --muted: var(--mist); /* 7.4:1 on --bg */
+
+  --selected: #b39a7f; /* the brown, lifted so it reads on black */
+  --selected-bg: rgba(70, 55, 41, 0.42);
+  --on-selected: var(--ink);
+  --control: #3a4350;
+
+  --accent: #d0343f;
+  --accent-hover: #e0464f;
+  --accent-muted: rgba(208, 52, 63, 0.14);
+  --accent-text: #f08088;
+  --on-accent: #ffffff;
+  --film-600: #d0343f;
+  --film-400: #f08088;
+
+  --focus: var(--ivory);
+
+  --success: #7cc79a;
+  --success-bg: rgba(124, 199, 154, 0.1);
+  --warning: #e2b46a;
+  --warning-bg: rgba(226, 180, 106, 0.1);
+  --error: #f08a80;
+  --error-bg: rgba(240, 138, 128, 0.1);
+  --error-border: rgba(240, 138, 128, 0.35);
+  --error-hover: rgba(240, 138, 128, 0.18);
+
+  --viewer: #000000;
+  --viewer-frame: #1a1c20;
+  --stage: #13171a;
 
-  --accent: #FFFF00;
-  --accent-hover: #FFFF00;
-  --accent-muted: rgba(255, 255, 0, 0.22);
-  --radius: 10px;
   --shadow: none;
+  --shadow-overlay: 0 30px 80px rgba(0, 0, 0, 0.7);
 
-  --error: #FF6666;
-  --success: #66FF66;
-
-  --film-600: #FF6666;
-  --film-400: #66FF66;
-  --neo-bg: #000000;
-  --neo-hi: transparent;
-  --neo-lo: transparent;
-  --skeu-top: #000000;
-  --skeu-bottom: #000000;
-  --skeu-edge: transparent;
-  --skeu-cut: transparent;
-}
-
-/* Ensure export overlay text is readable in high-contrast by forcing dark text */
-[data-theme="high-contrast"] .export-text,
-[data-theme="high-contrast"] .export-text * {
-  color: #000000 !important;
-}
-
-/* Make the main export button readable in high-contrast mode */
-[data-theme="high-contrast"] #export-button {
-  background: #7ee081 !important;
-  color: #000000 !important;
-  border: 2px solid #ffffff !important;
+  color-scheme: dark;
 }
 
-[data-theme="high-contrast"] #export-button:hover,
-[data-theme="high-contrast"] #export-button:focus-visible {
-  background: #69d66d !important;
-  color: #000000 !important;
-}
+/* ── High contrast (set by ThemeProvider when the user asks for more contrast) ── */
+[data-theme="high-contrast"] {
+  --bg: #000000;
+  --surface: #000000;
+  --surface-2: #000000;
+  --border: #ffffff;
+  --border-strong: #ffffff;
+
+  --text: #ffffff;
+  --text-secondary: #ffffff;
+  --muted: #ffffff;
+
+  --selected: #00ffff;
+  --selected-bg: #000000;
+  --on-selected: #000000;
+  --control: #ffffff;
+
+  /* Yellow fill needs black text; --on-accent makes that automatic. */
+  --accent: #ffff00;
+  --accent-hover: #ffff66;
+  --accent-muted: rgba(255, 255, 0, 0.22);
+  --accent-text: #ffff00;
+  --on-accent: #000000;
+  --film-600: #ffff00;
+  --film-400: #ffff00;
+
+  --focus: #00ffff;
+
+  --success: #66ff66;
+  --success-bg: #000000;
+  --warning: #ffcc00;
+  --warning-bg: #000000;
+  --error: #ff6666;
+  --error-bg: #000000;
+  --error-border: #ff6666;
+  --error-hover: #330000;
+
+  --viewer: #000000;
+  --viewer-frame: #ffffff;
+  --stage: #000000;
+  --viewer-text: #ffffff;
+  --viewer-muted: #ffffff;
+  --viewer-error: #ff6666;
+  --shadow: none;
+  --shadow-overlay: none;
 
-[data-theme="high-contrast"] #export-button svg {
-  color: #000000 !important;
+  color-scheme: dark;
 }
 
-/* ── Base styles ── */
+/* ── Base ── */
 html {
   min-height: 100%;
-  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
   margin: 0;
   min-height: 100vh;
-  background-color: var(--neo-bg);
+  background-color: var(--bg);
   color: var(--text);
-  line-height: 1.6;
-  transition: background-color 0.3s ease, color 0.3s ease;
+  font-family: var(--font-sans);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
 }
 
 img,
@@ -141,158 +235,534 @@ h4,
 h5,
 h6 {
   color: var(--text);
-  font-weight: 700;
+  font-weight: 600;
+  letter-spacing: -0.01em;
 }
 
-p,
-li {
-  color: color-mix(in srgb, var(--text) 95%, transparent);
-}
-
-button {
-  transition: all 0.2s ease;
+/* One stroke weight for every lucide icon, to match the hairline UI. */
+svg.lucide {
+  stroke-width: 1.6;
 }
 
 input,
 select,
 textarea {
-  background: var(--bg);
-  border: 1px solid var(--border);
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
   color: var(--text);
 }
 
-input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
-select,
-textarea {
-  background: var(--neo-bg);
-  border-color: transparent;
-  box-shadow: inset 3px 3px 7px var(--neo-lo), inset -3px -3px 7px var(--neo-hi);
-}
-
 input:focus,
 select:focus,
 textarea:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-muted);
+  border-color: var(--focus);
   outline: none;
 }
 
-/* Smooth transitions for all themed elements */
-*,
-*::before,
-*::after {
-  transition-property: background-color, border-color, color, fill, stroke;
-  transition-timing-function: ease;
-  transition-duration: 200ms;
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: var(--selected);
+}
+
+/*
+ * Sliders: a hairline track and an ivory/ink thumb. Native range inputs keep
+ * their keyboard and touch behaviour; only the paint changes. The 24px hit
+ * area is kept for touch.
+ */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 1.5rem;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  touch-action: pan-y;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 2px;
+  border-radius: 2px;
+  background: var(--border-strong);
+}
+input[type="range"]::-moz-range-track {
+  height: 2px;
+  border-radius: 2px;
+  background: var(--border-strong);
+}
+input[type="range"]::-moz-range-progress {
+  height: 2px;
+  border-radius: 2px;
+  background: var(--text);
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  margin-top: -6px;
+  border-radius: 50%;
+  background: var(--surface);
+  border: 1.5px solid var(--text);
+  transition: transform var(--dur-fast) var(--ease-standard);
+}
+input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--surface);
+  border: 1.5px solid var(--text);
+  transition: transform var(--dur-fast) var(--ease-standard);
+}
+input[type="range"]:hover::-webkit-slider-thumb,
+input[type="range"]:active::-webkit-slider-thumb {
+  transform: scale(1.15);
+}
+input[type="range"]:hover::-moz-range-thumb,
+input[type="range"]:active::-moz-range-thumb {
+  transform: scale(1.15);
+}
+input[type="range"]:focus-visible {
+  outline: none;
+}
+input[type="range"]:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--focus-ring);
+}
+input[type="range"]:focus-visible::-moz-range-thumb {
+  box-shadow: var(--focus-ring);
+}
+input[type="range"]:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
+/* One focus treatment for everything keyboard-reachable. */
 :focus-visible {
-  outline: 0;
-  box-shadow: 0 0 0 3px var(--accent-muted);
-  border-radius: var(--radius);
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
 }
 
-detail > summary {
+::selection {
+  background: color-mix(in srgb, var(--selected) 30%, transparent);
+}
+
+details > summary {
   list-style: none;
 }
 details > summary::-webkit-details-marker {
   display: none;
 }
 
-/* ── Neomorphism + skeuomorphism ── */
-.neo-raised {
-  background: var(--neo-bg);
-  border: 1px solid transparent;
-  box-shadow: 12px 12px 26px var(--neo-lo), -12px -12px 26px var(--neo-hi);
-}
-
-.neo-inset {
-  background: var(--neo-bg);
-  border: 1px solid transparent;
-  box-shadow: inset 6px 6px 12px var(--neo-lo), inset -6px -6px 12px var(--neo-hi);
-}
-
-.neo-pressable {
-  background: var(--neo-bg);
-  box-shadow: 6px 6px 13px var(--neo-lo), -6px -6px 13px var(--neo-hi);
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
-}
-.neo-pressable:hover { transform: translateY(-1px); }
-.neo-pressable:active {
-  transform: translateY(0);
-  box-shadow: inset 4px 4px 9px var(--neo-lo), inset -4px -4px 9px var(--neo-hi);
-}
-
-/* Brushed-metal title plate with screws and letterpress text */
-.skeu-plate {
-  position: relative;
-  background:
-    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px),
-    linear-gradient(160deg, var(--skeu-top), var(--skeu-bottom));
-  border: 1px solid var(--skeu-cut);
-  border-radius: 18px;
-  box-shadow:
-    inset 0 1px 0 var(--skeu-edge),
-    inset 0 -3px 6px var(--skeu-cut),
-    0 2px 0 var(--skeu-edge),
-    12px 14px 28px var(--neo-lo),
-    -10px -10px 24px var(--neo-hi);
-}
-.skeu-plate::before,
-.skeu-plate::after {
-  content: "";
-  position: absolute;
-  top: 10px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background:
-    linear-gradient(45deg, transparent 44%, var(--skeu-cut) 44% 56%, transparent 56%),
-    radial-gradient(circle at 30% 30%, var(--skeu-top), var(--skeu-bottom));
-  box-shadow: inset 0 0 0 1px var(--skeu-cut), 0 1px 0 var(--skeu-edge);
-}
-.skeu-plate::before { left: 10px; }
-.skeu-plate::after { right: 10px; }
-
-.skeu-title {
-  text-shadow: 0 1px 0 var(--skeu-edge), 0 -1px 0 var(--skeu-cut);
-}
-
-.skeu-well {
-  background: var(--neo-bg);
-  border-radius: 12px;
-  box-shadow: inset 3px 3px 7px var(--neo-lo), inset -3px -3px 7px var(--neo-hi);
-}
-
-[data-theme="high-contrast"] .skeu-plate,
-[data-theme="high-contrast"] .neo-raised,
-[data-theme="high-contrast"] .neo-inset,
-[data-theme="high-contrast"] .neo-pressable {
-  border: 1px solid var(--border);
-  box-shadow: none;
-}
-
-/* Hanging sign: tilted from a pivot above, with two wires to the screws */
-.skeu-hang {
-  position: relative;
-  margin-top: 28px;
-  transform: rotate(-2.5deg);
-  transform-origin: 50% -28px;
-  transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
-}
-.skeu-hang:hover { transform: rotate(1.5deg); }
-.skeu-wire {
-  position: absolute;
-  bottom: calc(100% - 14px);
-  width: 2px;
-  height: 30px;
-  background: linear-gradient(90deg, var(--skeu-edge), var(--skeu-cut));
-  transform-origin: 50% 100%;
-  pointer-events: none;
-}
-.skeu-wire-l { left: 14px; transform: rotate(14deg); }
-.skeu-wire-r { right: 14px; transform: rotate(-14deg); }
+/* Timecodes and numeric readouts keep a fixed width while they change. */
+.tabular {
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * Theme switches crossfade colours for one short window only. ThemeProvider
+ * adds this class for ~200ms around a toggle, so ordinary interaction never
+ * pays for a transition on every element (the old `*, *::before, *::after`
+ * rule animated colour changes on every node, including during playback).
+ */
+html.theme-transition,
+html.theme-transition *,
+html.theme-transition *::before,
+html.theme-transition *::after {
+  transition-property: background-color, border-color, color, fill, stroke !important;
+  transition-duration: 200ms !important;
+  transition-timing-function: ease !important;
+}
+
+/* Returning visitors who dismissed the privacy notice: hide it before first paint. */
+html[data-privacy-dismissed] [data-privacy-banner] {
+  display: none;
+}
+
+/* ── Shared component classes ── */
+@layer components {
+  /* Editorial type: the serif is for headings and a few numerals only. */
+  .display {
+    font-family: var(--font-serif);
+    font-weight: 400;
+    letter-spacing: -0.015em;
+    line-height: 1.02;
+    /* Cormorant defaults to old-style figures ("1" reads as "ı"). */
+    font-variant-numeric: lining-nums;
+  }
+  .serif {
+    font-family: var(--font-serif);
+    font-weight: 500;
+    letter-spacing: -0.005em;
+    font-variant-numeric: lining-nums;
+  }
+  /* "(Output)", "(2)" — the parenthetical label from the reference. Sentence
+     case, italic serif; never an all-caps eyebrow. */
+  .marker {
+    font-family: var(--font-serif-italic);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 0.9375rem;
+    line-height: 1;
+    color: var(--muted);
+    font-variant-numeric: lining-nums;
+  }
+
+  /* Buttons: pills, three emphasis levels, explicit transitions. */
+  .btn {
+    @apply inline-flex select-none items-center justify-center gap-2 whitespace-nowrap border text-sm font-medium;
+    border-radius: var(--radius-pill);
+    min-height: 2.25rem;
+    padding: 0 1rem;
+    transition:
+      background-color var(--dur-fast) var(--ease-standard),
+      border-color var(--dur-fast) var(--ease-standard),
+      color var(--dur-fast) var(--ease-standard),
+      transform var(--dur-fast) var(--ease-standard);
+  }
+  .btn:active:not(:disabled):not([aria-disabled="true"]) {
+    transform: scale(0.97);
+  }
+  .btn:disabled,
+  .btn[aria-disabled="true"] {
+    @apply cursor-not-allowed opacity-50;
+  }
+  .btn-lg {
+    min-height: 2.875rem;
+    padding: 0 1.375rem;
+    font-size: 0.9375rem;
+  }
+  .btn-sm {
+    min-height: 1.875rem;
+    padding: 0 0.75rem;
+    font-size: 0.75rem;
+  }
+  .btn-primary {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--on-accent);
+    font-weight: 600;
+  }
+  .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+  }
+  /* Ivory/ink pill — the reference's "Book a visit" button. */
+  .btn-solid {
+    background: var(--text);
+    border-color: var(--text);
+    color: var(--bg);
+  }
+  .btn-solid:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--text-secondary);
+    border-color: var(--text-secondary);
+  }
+  .btn-secondary {
+    background: transparent;
+    border-color: var(--border-strong);
+    color: var(--text);
+  }
+  .btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--surface-2);
+    border-color: var(--text-secondary);
+  }
+  .btn-ghost {
+    background: transparent;
+    border-color: transparent;
+    color: var(--text-secondary);
+  }
+  .btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--surface-2);
+    color: var(--text);
+  }
+  .btn-danger {
+    background: var(--error-bg);
+    border-color: var(--error-border);
+    color: var(--error);
+  }
+  .btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--error-hover);
+  }
+  /* Icon-only buttons must still carry an aria-label (and usually a title). */
+  .btn-icon {
+    padding: 0;
+    width: 2.25rem;
+  }
+  .btn-icon.btn-sm {
+    width: 1.875rem;
+  }
+  /* Pressed toggles (framing guide, grid, theme, contrast). */
+  .btn[aria-pressed="true"] {
+    border-color: var(--selected);
+    color: var(--text);
+    background: var(--selected-bg);
+  }
+
+  /*
+   * Selectable option tiles (presets, formats, rotation, framing): small
+   * rectangular frames like the reference's photographs. The chosen tile gets
+   * a warm brown outline; red stays reserved for the primary action.
+   */
+  .choice {
+    @apply border text-sm;
+    border-radius: var(--radius-control);
+    background: transparent;
+    border-color: var(--border);
+    color: var(--text-secondary);
+    transition:
+      background-color var(--dur-fast) var(--ease-standard),
+      border-color var(--dur-fast) var(--ease-standard),
+      color var(--dur-fast) var(--ease-standard);
+  }
+  .choice:hover {
+    border-color: var(--border-strong);
+    color: var(--text);
+  }
+  .choice[aria-pressed="true"],
+  .choice[aria-checked="true"],
+  .choice[data-active="true"] {
+    background: var(--selected-bg);
+    border-color: var(--selected);
+    color: var(--text);
+    box-shadow: inset 0 0 0 1px var(--selected);
+  }
+
+  /* Text inputs */
+  .field {
+    @apply w-full border text-sm;
+    border-radius: var(--radius-control);
+    min-height: 2.25rem;
+    padding: 0 0.75rem;
+    background: var(--surface);
+    border-color: var(--border-strong);
+    color: var(--text);
+    transition: border-color var(--dur-fast) var(--ease-standard);
+  }
+  .field:hover {
+    border-color: var(--text-secondary);
+  }
+  .field::placeholder {
+    color: var(--muted);
+  }
+  .field[aria-invalid="true"] {
+    border-color: var(--error);
+  }
+
+  /* Labels: sentence case, medium weight, no tracking. */
+  .label {
+    @apply text-xs font-medium;
+    color: var(--text-secondary);
+  }
+  .hint {
+    @apply text-xs;
+    color: var(--muted);
+  }
+
+  /* Surfaces are separated by hairlines and tone, not by heavy cards. */
+  .panel {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-panel);
+  }
+
+  /* Section heading row: "(2)  Edit" with a hairline underneath. */
+  .section-head {
+    @apply flex items-baseline gap-3 pb-3;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .kbd {
+    @apply inline-flex items-center justify-center rounded border text-2xs font-medium;
+    min-width: 1.375rem;
+    height: 1.25rem;
+    padding: 0 0.3125rem;
+    background: transparent;
+    border-color: var(--border-strong);
+    color: var(--text-secondary);
+    font-family: var(--font-sans);
+  }
+
+  /* Links that underline from left to right on hover. */
+  .link {
+    color: var(--text);
+    background-image: linear-gradient(currentColor, currentColor);
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+    background-size: 0% 1px;
+    transition: background-size var(--dur-base) var(--ease-out);
+  }
+  .link:hover {
+    background-size: 100% 1px;
+  }
+
+  /* Status callouts: a rule on the leading edge, not a filled box. */
+  .callout {
+    @apply flex items-start gap-3 border p-3 text-sm;
+    border-radius: var(--radius-control);
+  }
+  .callout-error {
+    background: var(--error-bg);
+    border-color: var(--error-border);
+    color: var(--text);
+  }
+  .callout-warning {
+    background: var(--warning-bg);
+    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
+    color: var(--text);
+  }
+  .callout-info {
+    background: var(--surface-2);
+    border-color: var(--border);
+    color: var(--text);
+  }
+
+  /* Determinate progress: a hairline whose fill scales on the GPU. */
+  .progress-track {
+    @apply relative h-[3px] w-full overflow-hidden;
+    border-radius: 3px;
+    background: var(--border);
+  }
+  .progress-fill {
+    @apply absolute inset-0 origin-left;
+    border-radius: 3px;
+    background: var(--accent);
+    transition: transform var(--dur-base) linear;
+  }
+  /* Indeterminate: a short segment travelling along the hairline. */
+  .progress-indeterminate::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    width: 30%;
+    border-radius: 3px;
+    background: var(--accent);
+    animation: progress-travel 1.4s var(--ease-in-out) infinite;
+  }
+
+  /*
+   * Disclosure panels (accordions). Height animates through grid rows, so the
+   * content never has to be measured; closed content becomes visibility:hidden
+   * once the collapse finishes, which removes it from the tab order and the
+   * accessibility tree.
+   */
+  .disclosure {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--dur-panel) var(--ease-standard);
+  }
+  .disclosure[data-open="true"] {
+    grid-template-rows: 1fr;
+  }
+  .disclosure > .disclosure-inner {
+    min-height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-4px);
+    transition:
+      opacity var(--dur-base) var(--ease-standard),
+      transform var(--dur-base) var(--ease-standard),
+      visibility 0s linear var(--dur-panel);
+  }
+  .disclosure[data-open="true"] > .disclosure-inner {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+    transition:
+      opacity var(--dur-panel) var(--ease-standard) 60ms,
+      transform var(--dur-panel) var(--ease-out) 60ms,
+      visibility 0s;
+  }
+
+  /* ── Entrances (run once when an element mounts) ── */
+  /* Fade and rise. Stagger with style={{ "--enter-delay": "120ms" }}. */
+  .enter {
+    animation: enter-rise var(--dur-enter) var(--ease-out) var(--enter-delay, 0ms) both;
+  }
+  /* Headline lines rise out of a mask, as in the reference's titles. */
+  .line-mask {
+    display: block;
+    overflow: hidden;
+    padding-bottom: 0.08em;
+    margin-bottom: -0.08em;
+  }
+  .line-mask > span {
+    display: block;
+    animation: line-rise 640ms var(--ease-out) var(--enter-delay, 0ms) both;
+  }
+  /* A hairline frame that settles into place (opacity + scale only). */
+  .frame-inset {
+    animation: frame-settle 700ms var(--ease-out) 150ms both;
+  }
+  /* Frames wipe open from the bottom edge, like the reference's photographs. */
+  .frame-reveal {
+    animation: frame-wipe 620ms var(--ease-in-out) var(--enter-delay, 0ms) both;
+  }
+}
+
+@keyframes enter-rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes line-rise {
+  from {
+    transform: translateY(105%);
+  }
+  to {
+    transform: none;
+  }
+}
+@keyframes frame-wipe {
+  from {
+    clip-path: inset(100% 0 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+@keyframes frame-settle {
+  from {
+    opacity: 0;
+    transform: scale(1.025);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes progress-travel {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(340%);
+  }
+}
+
+/*
+ * Reduced motion: drop decorative movement and long transitions, but keep
+ * instant state feedback (colour changes still apply, they just don't fade).
+ * Entrances jump straight to their end state; progress bars keep updating.
+ */
 @media (prefers-reduced-motion: reduce) {
-  .skeu-hang, .skeu-hang:hover { transition: none; }
-  .skeu-hang:hover { transform: rotate(-2.5deg); }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+    scroll-behavior: auto !important;
+  }
+  .btn:active:not(:disabled) {
+    transform: none;
+  }
+  /* A one-shot indeterminate segment would vanish; show a static one. */
+  .progress-indeterminate::after {
+    animation: none;
+    transform: translateX(115%);
+  }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 46651aba8..d15a5478b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,37 @@
 import type { Metadata } from "next";
-import { Bebas_Neue, Syne, DM_Sans, Inter, Roboto, Poppins, Montserrat } from "next/font/google";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import "./globals.css";
 import DatadogInit from "@/components/DatadogInit";
 import { ThemeProvider } from "@/components/ThemeProvider";
-import { ThemeToggle } from "@/components/ThemeToggle";
+import { ThemeToggle, ContrastToggle } from "@/components/ThemeToggle";
 import ScrollToTop from "@/components/ScrollToTop";
 import BrandLogo from "@/components/BrandLogo";
+import Link from "next/link";
+import localFont from "next/font/local";
+
+// The editorial serif, served from this origin (COEP-safe, no request to
+// Google) with a size-adjusted fallback so the swap causes no layout shift.
+// The files are subset to the weights and characters the UI uses; rebuild
+// them with scripts/fonts/build-cormorant.sh. Upright is preloaded because
+// the drop-zone headline (the LCP element) uses it; italic is only used for
+// small labels.
+const cormorant = localFont({
+  src: "./fonts/cormorant-garamond-upright-400-500.woff2",
+  weight: "400 500",
+  style: "normal",
+  display: "swap",
+  adjustFontFallback: "Times New Roman",
+  variable: "--font-cormorant",
+});
+const cormorantItalic = localFont({
+  src: "./fonts/cormorant-garamond-italic-400.woff2",
+  weight: "400",
+  style: "italic",
+  display: "swap",
+  preload: false,
+  adjustFontFallback: "Times New Roman",
+  variable: "--font-cormorant-italic",
+});
 
 export const metadata: Metadata = {
   title: "Reframe — Resize, trim, and export videos in your browser",
@@ -48,30 +73,41 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className={`${cormorant.variable} ${cormorantItalic.variable}`}>
       <head>
         <script
           dangerouslySetInnerHTML={{
+            // Runs before first paint so the saved theme, contrast preference
+            // and privacy-notice dismissal never cause a flash or layout shift.
             __html: `(function() {
   try {
-    const theme = localStorage.getItem('theme');
+    var d = document.documentElement;
+    var theme = localStorage.getItem('theme');
     if (theme === 'dark' || (!theme &&
         window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      document.documentElement.classList.add('dark');
+      d.classList.add('dark');
     } else {
-      document.documentElement.classList.remove('dark');
+      d.classList.remove('dark');
+    }
+    var contrast = localStorage.getItem('contrast');
+    if (contrast === 'more' || (!contrast &&
+        window.matchMedia('(prefers-contrast: more)').matches)) {
+      d.dataset.theme = 'high-contrast';
     }
+    var until = Number(localStorage.getItem('reframe_privacy_banner_dismissed_until'));
+    if (until && Date.now() < until) d.setAttribute('data-privacy-dismissed', '');
   } catch(e) {}
 })();`,
           }}
         />
-        <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+        {/* FFmpeg core is fetched from jsDelivr on first export only, so a DNS
+            hint is enough; a preconnect at page load would be wasted. */}
         <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
       </head>
       <body className="min-h-screen bg-[var(--bg)] text-[var(--text)] antialiased">
         <DatadogInit />
       <a href="#main-content"
-          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-[var(--radius)] focus:border focus:border-[var(--border)] focus:bg-[var(--surface)] focus:px-4 focus:py-2 focus:text-[var(--text)]"
+          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-control focus:border focus:border-[var(--border)] focus:bg-[var(--surface)] focus:px-4 focus:py-2 focus:text-[var(--text)]"
         >
           Skip to main content
         </a>
@@ -79,13 +115,33 @@ export default function RootLayout({
           <ErrorBoundary>
             <header
               role="banner"
-              className="sticky top-0 z-50 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg)]/95 px-6 py-3 backdrop-blur"
+              className="enter sticky top-0 z-40 border-b border-[var(--border)] bg-[var(--bg)]"
             >
-              <div className="flex items-center gap-2">
-                <BrandLogo size={24} />
-                <h1 className="text-lg font-semibold">Reframe</h1>
+              <div className="mx-auto flex h-[52px] max-w-[1440px] items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
+                <Link
+                  href="/"
+                  className="flex items-center gap-2.5 rounded-control text-[var(--text)]"
+                  aria-label="Reframe home"
+                >
+                  <BrandLogo size={20} />
+                  <span className="serif text-[1.375rem] leading-none">Reframe</span>
+                </Link>
+                <nav aria-label="Site" className="flex items-center gap-1.5">
+                  <a
+                    href="https://github.com/reframe-oss/reframe"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="btn btn-ghost btn-sm mr-1 hidden sm:inline-flex"
+                  >
+                    <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
+                      <path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.39-5.25 5.67.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z" />
+                    </svg>
+                    Star on GitHub
+                  </a>
+                  <ContrastToggle />
+                  <ThemeToggle />
+                </nav>
               </div>
-              <ThemeToggle />
             </header>
             <main id="main-content" tabIndex={-1}>
               {children}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 88d6f4cc6..528571f1e 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -6,7 +6,7 @@ export default function NotFound() {
     <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center animate-fade-in">
             <div className="flex items-center gap-2 ">
      <Film size={28} />
-         <span className="font-display text-2xl tracking-widest">REFRAME</span>
+         <span className="font-display text-2xl">REFRAME</span>
        </div>
       <span className="font-display text-[clamp(7rem,22vw,16rem)] leading-none text-film-500 select-none">
         404
@@ -14,7 +14,7 @@ export default function NotFound() {
 
       <div className="w-14 h-px bg-film-500 mt-1 mb-6" />
 
-      <h1 className="font-heading text-xs font-semibold uppercase tracking-[0.2em] text-[var(--text)] mb-2">
+      <h1 className="font-heading text-xs font-semibold text-[var(--text)] mb-2">
         Frame not found
       </h1>
 
@@ -24,7 +24,7 @@ export default function NotFound() {
 
       <Link
         href="/"
-        className="flex items-center gap-1.5 px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[11px] font-heading font-semibold uppercase tracking-widest text-[var(--muted)] hover:text-film-600 hover:border-film-400 transition-all duration-200 shadow-sm"
+        className="flex items-center gap-1.5 px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-2xs font-semibold text-[var(--muted)] hover:text-film-500 hover:border-film-400 transition-colors duration-fast shadow-sm"
       >
         ← Back to Reframe
       </Link>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c1908b757..f271fd5f3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,23 +1,13 @@
 import VideoEditor from "@/components/VideoEditor";
 import Footer from "@/components/Footer";
 
+// The <main id="main-content"> landmark lives in layout.tsx; nesting a second
+// one here produced two main landmarks with the same id. The GitHub link now
+// sits in the header instead of a fixed badge that overlapped the controls.
 export default function Home() {
   return (
     <>
-      <a
-        href="https://github.com/reframe-oss/reframe"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="View Reframe on GitHub"
-        className="hidden sm:flex fixed top-4 right-4 md:right-16 z-50 items-center gap-1.5 px-3 py-1.5 rounded-lg neo-pressable text-[10px] font-heading font-semibold uppercase tracking-wider"
-      >
-        ⭐ Star on GitHub
-      </a>
-
-      <main id="main-content" tabIndex={-1}>
-        <VideoEditor />
-      </main>
-
+      <VideoEditor />
       <Footer />
     </>
   );
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
index 252c78aa5..34c77fa29 100644
--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@@ -10,12 +10,12 @@ export const metadata: Metadata = {
 export default function PrivacyPage() {
   return (
     <>
-      <main className="min-h-screen bg-[var(--bg)] text-[var(--text)] pt-24 pb-20">
+      <div className="min-h-screen bg-[var(--bg)] text-[var(--text)] pt-24 pb-20">
         {/* Back link - top left below header */}
         <div className="px-6 mb-6">
           <Link
             href="/"
-            className="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-widest text-[var(--muted)] transition-colors hover:text-[var(--text)]"
+            className="inline-flex items-center gap-2 text-xs font-medium text-[var(--muted)] transition-colors hover:text-[var(--text)]"
           >
             <svg
               className="h-3.5 w-3.5"
@@ -227,7 +227,7 @@ export default function PrivacyPage() {
             </div>
           </div>
         </div>
-      </main>
+      </div>
     </>
   );
 }
diff --git a/src/components/AdjustmentsControl.tsx b/src/components/AdjustmentsControl.tsx
new file mode 100644
index 000000000..9c16be023
--- /dev/null
+++ b/src/components/AdjustmentsControl.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { EditRecipe } from "@/lib/types";
+
+interface Props {
+  recipe: EditRecipe;
+  onChange: (patch: Partial<EditRecipe>) => void;
+}
+
+type AdjustmentKey = "brightness" | "contrast" | "saturation" | "sharpness";
+
+const ADJUSTMENTS: {
+  key: AdjustmentKey;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  neutral: number;
+  format: (v: number) => string;
+}[] = [
+  { key: "brightness", label: "Brightness", min: -1, max: 1, step: 0.1, neutral: 0, format: (v) => (v > 0 ? `+${v.toFixed(1)}` : v.toFixed(1)) },
+  { key: "contrast", label: "Contrast", min: 0, max: 2, step: 0.1, neutral: 1, format: (v) => `${v.toFixed(1)}×` },
+  { key: "saturation", label: "Saturation", min: 0, max: 3, step: 0.1, neutral: 1, format: (v) => `${v.toFixed(1)}×` },
+  { key: "sharpness", label: "Sharpness", min: 0, max: 3, step: 1, neutral: 0, format: (v) => (v === 0 ? "Off" : String(v)) },
+];
+
+export function hasAdjustments(recipe: EditRecipe) {
+  return ADJUSTMENTS.some(({ key, neutral }) => recipe[key] !== neutral);
+}
+
+/** Brightness / contrast / saturation / sharpness sliders with per-control reset. */
+export default function AdjustmentsControl({ recipe, onChange }: Props) {
+  return (
+    <div className="space-y-4">
+      {ADJUSTMENTS.map(({ key, label, min, max, step, neutral, format }) => {
+        const value = recipe[key];
+        const id = `${key}-slider`;
+        return (
+          <div key={key}>
+            <div className="flex items-center justify-between gap-2">
+              <label htmlFor={id} className="label">
+                {label}
+              </label>
+              <div className="flex items-center gap-1">
+                <span className="tabular text-xs text-[var(--muted)]">{format(value)}</span>
+                <button
+                  type="button"
+                  onClick={() => onChange({ [key]: neutral })}
+                  disabled={value === neutral}
+                  className="btn btn-ghost btn-sm h-6 min-h-0 px-1.5 text-2xs"
+                  aria-label={`Reset ${label.toLowerCase()}`}
+                >
+                  Reset
+                </button>
+              </div>
+            </div>
+            <input
+              id={id}
+              type="range"
+              min={min}
+              max={max}
+              step={step}
+              value={value}
+              onChange={(e) => onChange({ [key]: Number(e.target.value) })}
+              aria-valuetext={format(value)}
+              className="mt-1 w-full cursor-pointer"
+            />
+          </div>
+        );
+      })}
+      <p className="hint">Brightness, contrast and saturation preview live; sharpness applies on export.</p>
+    </div>
+  );
+}
diff --git a/src/components/AudioSpeedControl.tsx b/src/components/AudioSpeedControl.tsx
index 127950d62..033bffaa2 100644
--- a/src/components/AudioSpeedControl.tsx
+++ b/src/components/AudioSpeedControl.tsx
@@ -27,11 +27,11 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
   // ----------------------------------------
 
   const getSpeedDescription = (speed: number) => {
-    if (speed <= 0.5) return "Very Slow";
+    if (speed <= 0.5) return "Very slow";
     if (speed < 1) return "Slow";
     if (speed === 1) return "Normal";
     if (speed <= 1.5) return "Fast";
-    return "Very Fast";
+    return "Very fast";
   };
 
   const isModified = recipe.speed !== 1 || !recipe.keepAudio;
@@ -42,19 +42,19 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
   return (
     <div className="space-y-4">
       {/* CLS FIX: Fixed height wrapper (h-6) ensures the layout never jumps. */}
-      <div className="h-6 flex justify-end">
+      <div className="flex h-8 justify-end">
         <button
           type="button"
           aria-label="Reset audio settings to default"
           onClick={() => onChange({ speed: 1, keepAudio: true })}
           className={cn(
-            "text-sm font-heading font-semibold uppercase tracking-wider text-film-600 hover:text-film-700 hover:underline transition-all duration-300 ease-in-out",
-            isModified 
-              ? "opacity-100 translate-y-0 pointer-events-auto delay-200" 
-              : "opacity-0 -translate-y-1 pointer-events-none"
+            "btn btn-ghost btn-sm transition-opacity duration-fast",
+            isModified ? "opacity-100" : "pointer-events-none opacity-0"
           )}
+          tabIndex={isModified ? undefined : -1}
+          aria-hidden={!isModified}
         >
-          Reset to Default
+          Reset audio and speed
         </button>
       </div>
 
@@ -63,13 +63,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         onClick={() => onChange({ keepAudio: !recipe.keepAudio })}
         aria-label={recipe.keepAudio ? "Mute video audio (M)" : "Unmute video audio (M)"}
         aria-pressed={recipe.keepAudio}
-        className={cn(
-          "w-full flex items-center gap-3 p-3 rounded-lg border transition-all duration-150",
-          "hover:scale-[1.01] active:scale-[0.99]",
-          recipe.keepAudio
-            ? "border-film-300 bg-film-50 text-film-700"
-            : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)]"
-        )}
+        className="choice flex w-full items-center gap-3 px-3 py-2.5 text-left"
       >
         {recipe.keepAudio ? (
           <Volume2 size={16} aria-hidden="true" />
@@ -79,12 +73,12 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         <span className="sr-only">
           {recipe.keepAudio ? "Turn audio off" : "Turn audio on"}
         </span>
-        <span className="text-sm font-heading font-semibold flex-1 text-left">
+        <span className="flex-1 text-left text-sm font-medium">
           {recipe.keepAudio ? "Audio on" : "Muted"}
         </span>
         <kbd
           aria-hidden="true"
-          className="ml-auto text-[10px] font-mono px-1.5 py-0.5 rounded border border-current opacity-40"
+          className="kbd ml-auto"
         >
           M
         </kbd>
@@ -95,16 +89,16 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
           <label
             id="speed-label"
             htmlFor="speed-control"
-            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
+            className="label flex items-center gap-1.5"
           >
-            <Gauge size={10} aria-hidden="true" /> Speed
+            <Gauge size={13} aria-hidden="true" /> Speed
           </label>
 
           <div className="text-right">
-            <span className="text-sm font-heading font-bold text-film-600 block">
+            <span className="tabular block text-sm font-medium text-[var(--text)]">
               {currentSpeed}x
             </span>
-            <span id="speed-description" className="text-sm text-[var(--muted)]">
+            <span id="speed-description" className="hint">
               {getSpeedDescription(currentSpeed)}
             </span>
           </div>
@@ -130,9 +124,9 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
           aria-labelledby="speed-label"
           aria-describedby="speed-description"
           aria-valuetext={`${currentSpeed}x speed, ${getSpeedDescription(currentSpeed)}`}
-          className="w-full h-11 accent-film-600 cursor-pointer"
+          className="h-8 w-full cursor-pointer"
         />
-        <div className="flex gap-2 mt-3">
+        <div className="mt-2 flex gap-1.5">
   {[0.5, 1, 1.5, 2].map((speed) => (
     <button
       key={speed}
@@ -140,13 +134,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
       onClick={() => onChange({ speed })}
       aria-label={`Set speed to ${speed}x`}
       aria-pressed={recipe.speed === speed}
-      className={cn(
-        "flex-1 py-1.5 rounded-lg text-xs font-heading font-bold transition-all duration-150",
-        "hover:scale-[1.02] active:scale-[0.98]",
-        recipe.speed === speed
-          ? "bg-film-600 text-white"
-          : "bg-[var(--border)] text-[var(--muted)] hover:bg-film-50 hover:text-film-600"
-      )}
+      className="choice tabular min-h-[32px] flex-1 text-xs font-medium"
     >
       {speed}x
     </button>
@@ -156,7 +144,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
           {SPEED_STEPS.map((s) => (
             <span
               key={s}
-              className="text-sm text-[var(--muted)] truncate text-center min-w-0 px-[1px]"
+              className="tabular min-w-0 truncate px-[1px] text-center text-2xs text-[var(--muted)]"
             >
               {s}x
             </span>
@@ -164,16 +152,16 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         </div>
       </div>
 
-      <div className={cn("transition-opacity duration-200", !recipe.keepAudio && "opacity-50 pointer-events-none")}>
+      <div className={cn(!recipe.keepAudio && "opacity-50 pointer-events-none")}>
         <div className="flex items-center justify-between mb-2">
           <label
             htmlFor="volume-control"
-            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
+            className="label flex items-center gap-1.5"
           >
-            <Volume2 size={10} aria-hidden="true" /> Volume
+            <Volume2 size={13} aria-hidden="true" /> Volume
           </label>
 
-          <span className="text-sm font-heading font-bold text-film-600 block">
+          <span className="tabular block text-sm font-medium text-[var(--text)]">
             {recipe.volume}%
           </span>
         </div>
@@ -186,7 +174,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
           disabled={!recipe.keepAudio}
           value={recipe.volume ?? 100}
           onChange={(e) => onChange({ volume: Number(e.target.value) })}
-          className="w-full h-11 accent-film-600 cursor-pointer"
+          className="h-8 w-full cursor-pointer"
         />
       </div>
 
@@ -201,20 +189,14 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
           }
           aria-pressed={recipe.normalizeAudio}
           aria-describedby="normalize-audio-description"
-          className={cn(
-            "w-full flex items-center gap-3 p-3 rounded-lg border transition-all duration-150",
-            "hover:scale-[1.01] active:scale-[0.99]",
-            recipe.normalizeAudio
-              ? "border-film-300 bg-film-50 text-film-700"
-              : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)]"
-          )}
+          className="choice flex w-full items-center gap-3 px-3 py-2.5 text-left"
         >
           <Gauge size={16} aria-hidden="true" />
           <div className="flex-1 text-left">
-            <span className="text-sm font-heading font-semibold block">
-              Normalize Audio
+            <span className="block text-sm font-medium">
+              Normalize loudness
             </span>
-            <span id="normalize-audio-description" className="text-[10px] text-[var(--muted)]">
+            <span id="normalize-audio-description" className="text-2xs text-[var(--muted)]">
               {recipe.normalizeAudio ? "–14 LUFS (streaming standard)" : "Off"}
             </span>
           </div>
@@ -222,7 +204,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
       )}
 
       {recipe.keepAudio && (recipe.trimStart !== 0 || recipe.trimEnd !== null) && (
-        <div role="note" className="mt-3 p-3 bg-[var(--accent-muted)] border border-[var(--border)] rounded text-sm text-[var(--text)] leading-relaxed flex items-start gap-2 animate-fade-in">
+        <div role="note" className="callout callout-info text-xs">
           <AlertTriangle size={12} aria-hidden="true" className="shrink-0 mt-0.5" />
           <p>
             Note: If audio doesn&apos;t start within the selected range, the output will be silent.
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index c7f7db633..e3d4d2c64 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -9,7 +9,7 @@ interface ColorPickerProps {
 }
 
 const getGlassyClasses = (opacity = 10) =>
-    `backdrop-filter backdrop-blur-lg bg-[var(--surface)] bg-opacity-${opacity} border border-[var(--border)] rounded-lg shadow-lg transition-all duration-300`;
+    `bg-[var(--surface)] border border-[var(--border)] rounded-lg shadow-[var(--shadow-overlay)]`;
 
 function hexToHsv(hex: string): [number, number, number] {
     const r = parseInt(hex.slice(1, 3), 16) / 255;
@@ -220,7 +220,7 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
                     ref={triggerRef}
                     type="button"
                     onClick={() => setOpen(!open)}
-                    className={`flex items-center gap-3 ${getGlassyClasses(20)} p-1.5 border border-[var(--border)] hover:bg-[var(--border)] active:scale-95 transition-transform`}
+                    className={`flex items-center gap-3 ${getGlassyClasses()} p-1.5 border border-[var(--border)] hover:bg-[var(--border)] active:scale-95 transition-transform`}
                     aria-label="Open custom palette"
                 >
                     <span
@@ -234,7 +234,7 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
                     value={hexInput}
                     onChange={handleHexInput}
                     maxLength={6}
-                    className='flex-1 px-2 py-1.5 text-xs rounded border border-[var(--border)] bg-[var(--bg)] text-[var(--text)] font-mono uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-film-500'
+                    className='flex-1 px-2 py-1.5 text-xs rounded border border-[var(--border)] bg-[var(--bg)] text-[var(--text)] font-mono uppercase focus:outline-none focus:ring-2 focus:ring-film-500'
                     spellCheck={false}
                 />
             </div>
@@ -243,7 +243,7 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
                 createPortal(
                     <div
                         ref={panelRef}
-                        className={`absolute z-[9999] p-3 ${getGlassyClasses(40)} border border-[var(--border)] w-60 flex flex-col gap-2.5 shadow-2xl backdrop-blur-xl`}
+                        className={`absolute z-[9999] p-3 ${getGlassyClasses()} border border-[var(--border)] w-60 flex flex-col gap-2.5`}
                         style={{
                             top: panelPos.top,
                             left: panelPos.left,
@@ -289,7 +289,7 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
                                 <button
                                     type="button"
                                     onClick={handleEyeDropper}
-                                    className={`${getGlassyClasses(20)} p-1 border border-[var(--border)] hover:bg-[var(--border)] text-[var(--text)] flex-shrink-0`}
+                                    className={`${getGlassyClasses()} p-1 border border-[var(--border)] hover:bg-[var(--border)] text-[var(--text)] flex-shrink-0`}
                                     aria-label="Pick color from screen"
                                 >
                                     <Pipette size={14} />
@@ -302,8 +302,8 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
                                 ['G', g],
                                 ['B', b],
                             ].map(([ch, v_rgb]) => (
-                                <div key={ch as string} className={`${getGlassyClasses(10)} py-0.5 border border-[var(--border)]`}>
-                                    <div className='text-[10px] text-[var(--muted)] font-medium'>{ch}</div>
+                                <div key={ch as string} className={`${getGlassyClasses()} py-0.5 border border-[var(--border)]`}>
+                                    <div className='text-2xs text-[var(--muted)] font-medium'>{ch}</div>
                                     <div className='text-xs font-semibold text-[var(--text)]'>{v_rgb}</div>
                                 </div>
                             ))}
diff --git a/src/components/ComparisonPreview.tsx b/src/components/ComparisonPreview.tsx
index 061cb6910..5484a14c4 100644
--- a/src/components/ComparisonPreview.tsx
+++ b/src/components/ComparisonPreview.tsx
@@ -216,7 +216,7 @@ export default function ComparisonPreview({ file, recipe, videoRef }: Props) {
         >
           <track kind="captions" />
         </video>
-        <span className="absolute top-2 left-2 px-2 py-1 rounded bg-black/60 text-white text-[10px] font-heading font-bold uppercase tracking-wider pointer-events-none">
+        <span className="absolute top-2 left-2 px-2 py-1 rounded bg-black/60 text-white text-2xs font-bold pointer-events-none">
           Original
         </span>
       </div>
@@ -237,7 +237,7 @@ export default function ComparisonPreview({ file, recipe, videoRef }: Props) {
           </div>
         </div>
 
-        <span className="absolute top-2 right-2 px-2 py-1 rounded bg-black/60 text-white text-[10px] font-heading font-bold uppercase tracking-wider pointer-events-none text-right">
+        <span className="absolute top-2 right-2 px-2 py-1 rounded bg-black/60 text-white text-2xs font-bold pointer-events-none text-right">
           Reframed
           {targetDims && (
             <>
diff --git a/src/components/DownloadResult.tsx b/src/components/DownloadResult.tsx
index 0804cd06d..17e2e042e 100644
--- a/src/components/DownloadResult.tsx
+++ b/src/components/DownloadResult.tsx
@@ -3,10 +3,8 @@
 import { useState, useEffect } from "react";
 import { ExportResult } from "@/lib/types";
 import { formatBytes } from "@/lib/utils";
-import { Download, RotateCcw, Share2, AlertCircle, Volume2, VolumeX } from "lucide-react";
-import LottiePlayer from "./LottiePlayer";
+import { Download, RotateCcw, Share2, AlertCircle, Volume2, VolumeX, Check, ArrowUp } from "lucide-react";
 import { NativeShareButton } from "./NativeShareButton";
-import successAnim from "@/lib/lottie/success.json";
 import { cn } from "@/lib/utils";
 
 const SHARE_TWEET_TEXT =
@@ -56,134 +54,136 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
     }
   };
 
+  // Back to the preview, with focus, so keyboard users land where they edit.
+  const handleKeepEditing = () => {
+    const target = document.getElementById("video-heading");
+    if (!target) return;
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    target.scrollIntoView({ behavior: reduce ? "instant" : "smooth", block: "start" });
+    const preview = document.querySelector<HTMLElement>('[aria-label^="Video preview"]');
+    preview?.focus({ preventScroll: true });
+  };
+
   return (
-    <div className="p-5 rounded-xl neo-raised space-y-4">
-      <div className="flex items-center justify-between">
-  <div className="flex items-center gap-4">
-    <div className="w-12 h-12 shrink-0">
-      <LottiePlayer animationData={successAnim} loop={false} autoplay />
-    </div>
-    <div>
-      <p className="font-heading font-bold text-base text-[var(--text)]">Export complete</p>
-      <p className="text-xs text-[var(--muted)] mt-0.5">Ready to download</p>
-    </div>
-  </div>
-  <button
-    type="button"
-    onClick={onToggleSound}
-    aria-label={soundOnCompletion ? "Mute completion sound" : "Unmute completion sound"}
-    className="p-2 rounded-lg border border-[var(--border)] text-[var(--muted)] hover:bg-[var(--bg)] transition-colors"
-    title={soundOnCompletion ? "Sound on" : "Sound off"}
-  >
-    {soundOnCompletion ? <Volume2 size={14} /> : <VolumeX size={14} />}
-  </button>
-</div>
-
-  {soundError && (
-    <p className="text-xs text-[var(--muted)]">Completion sound could not be played on this device.</p>
-  )}
-
-      <div className="grid grid-cols-2 gap-2 text-sm">
-        <div className="bg-[var(--bg)] rounded-lg p-3 border border-[var(--border)]">
-          <p className="text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)] mb-1">Resolution</p>
-          <p className="font-heading font-bold text-[var(--text)]">{result.width} × {result.height}</p>
-        </div>
-        <div className="bg-[var(--bg)] rounded-lg p-3 border border-[var(--border)]">
-          <p className="text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)] mb-1">File size</p>
-          <p className="font-heading font-bold text-[var(--text)]">{formatBytes(result.size)}</p>
-        </div>
-        {typeof result.exportDurationMs === "number" && (
-          <div className="col-span-2 bg-[var(--bg)] rounded-lg p-3 border border-[var(--border)]">
-            <p className="text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)] mb-1">Export time</p>
-            <p className="font-heading font-bold text-[var(--text)]">Exported in {formatExportDuration(result.exportDurationMs)}</p>
+    <div className="panel enter space-y-5 p-5 sm:p-6">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-start gap-4">
+          <span
+            aria-hidden="true"
+            className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-[var(--success)] text-[var(--success)]"
+          >
+            <Check size={16} />
+          </span>
+          <div>
+            <p className="serif text-3xl leading-tight text-[var(--text)]">Export complete</p>
+            <p className="tabular mt-1 text-xs text-[var(--muted)]">
+              {result.format.toUpperCase()} · {result.width} × {result.height} · {formatBytes(result.size)}
+              {typeof result.exportDurationMs === "number" &&
+                ` · exported in ${formatExportDuration(result.exportDurationMs)}`}
+            </p>
           </div>
-        )}
+        </div>
+        <button
+          type="button"
+          onClick={onToggleSound}
+          aria-label={soundOnCompletion ? "Mute completion sound" : "Unmute completion sound"}
+          aria-pressed={soundOnCompletion}
+          className="btn btn-ghost btn-icon btn-sm"
+          title={soundOnCompletion ? "Completion sound on" : "Completion sound off"}
+        >
+          {soundOnCompletion ? <Volume2 size={14} aria-hidden="true" /> : <VolumeX size={14} aria-hidden="true" />}
+        </button>
       </div>
 
-      <div className="space-y-1.5 pt-2">
-        <div className="flex justify-between items-center text-xs px-1">
-          <label htmlFor="filename-input" className="text-[var(--muted)] font-heading font-semibold uppercase tracking-wider">
-            Filename
+      {soundError && (
+        <p className="hint">The completion sound couldn&apos;t play on this device.</p>
+      )}
+
+      <div className="space-y-1">
+        <div className="flex items-center justify-between text-xs">
+          <label htmlFor="filename-input" className="label">
+            File name
           </label>
-          <span className={cn("transition-colors", name.length >= 100 ? "text-[var(--error)] font-medium" : "text-[var(--muted)]")}>
-            {100 - name.length} chars remaining
+          <span className={cn("tabular", name.length >= 100 ? "text-[var(--error)] font-medium" : "text-[var(--muted)]")}>
+            {100 - name.length} characters left
           </span>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-stretch gap-2">
           <input
             id="filename-input"
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
             maxLength={100}
-            className={cn(
-              "flex-1 px-3 py-2.5 bg-[var(--bg)] border rounded-lg text-sm transition-colors text-[var(--text)] placeholder:text-[var(--muted)]",
-              !isValid && name.length > 0 ? "border-[var(--error)] focus:outline-[var(--error)] focus:ring-1 focus:ring-[var(--error)]" : "border-[var(--border)] focus:outline-[var(--accent)]"
-            )}
-            placeholder="Enter filename"
+            aria-invalid={!isValid && name.length > 0}
+            aria-describedby={!isValid && name.length > 0 ? "filename-error" : undefined}
+            className="field flex-1"
+            placeholder="Enter a file name"
           />
-          <span className="text-sm text-[var(--muted)] shrink-0 font-medium bg-[var(--bg)] px-3 py-2.5 border border-[var(--border)] rounded-lg">
+          <span className="flex items-center rounded-control border border-[var(--border)] bg-[var(--surface-2)] px-3 text-sm text-[var(--muted)]">
             .{result.format}
           </span>
         </div>
         {!isValid && name.length > 0 && (
-          <p className="text-xs text-[var(--error)] px-1 flex items-center gap-1.5 mt-1 animate-fade-in">
-            <AlertCircle size={12} />
-            Filename contains invalid characters (\ / : * ? &quot; &lt; &gt; |)
+          <p id="filename-error" className="flex items-center gap-1.5 text-xs text-[var(--error)]">
+            <AlertCircle size={12} aria-hidden="true" />
+            Remove these characters: \ / : * ? &quot; &lt; &gt; |
           </p>
         )}
       </div>
 
-      <div className="flex flex-wrap gap-2 pt-2">
+      <div className="flex flex-wrap gap-2">
         <a
           href={isValid ? result.blobUrl : undefined}
           download={isValid ? filename : undefined}
-          className={cn(
-            "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
-            isValid 
-              ? "bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] hover:scale-[1.02] active:scale-[0.99] cursor-pointer"
-              : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
-          )}
+          aria-disabled={!isValid}
+          className="btn btn-primary btn-lg min-w-[10rem] flex-1"
           onClick={(e) => {
             if (!isValid) e.preventDefault();
           }}
         >
-          <Download size={15} aria-hidden="true" />
+          <Download size={16} aria-hidden="true" />
           Download {result.format.toUpperCase()}
         </a>
-        <NativeShareButton 
+        <NativeShareButton
           file={result.blob}
           fileName={filename}
-          className="flex-1 min-w-[10rem] py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg"
+          className="btn btn-secondary btn-lg min-w-[8rem] flex-1"
         />
         <a
           href={result.blobUrl}
           target="_blank"
           rel="noopener noreferrer"
-          aria-label="Preview video in new tab"
-          className="flex items-center justify-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] transition-colors"
+          className="btn btn-secondary btn-lg"
+          title="Open the exported video in a new tab"
         >
           Preview
         </a>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] pt-3">
+        <button type="button" onClick={handleKeepEditing} className="btn btn-ghost btn-sm">
+          <ArrowUp size={13} aria-hidden="true" />
+          Keep editing
+        </button>
         <button
           type="button"
-          title="Reset and upload a new video"
-          aria-label="Upload a new video"
+          title="Clear this video and its settings"
           onClick={handleReset}
-          className="flex items-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] transition-colors"
+          className="btn btn-ghost btn-sm"
         >
-          <RotateCcw size={14} aria-hidden="true" />
-          New
+          <RotateCcw size={13} aria-hidden="true" />
+          Start over with a new video
         </button>
         <a
           href={shareHref}
           target="_blank"
           rel="noopener noreferrer"
-          aria-label="Share on X (opens in a new tab)"
-          className="flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 border border-[var(--border)] text-[var(--text)] text-sm font-heading font-bold uppercase tracking-wide rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-colors"
+          className="btn btn-ghost btn-sm"
         >
-          <Share2 size={15} aria-hidden="true" />
-          Share on X
+          <Share2 size={13} aria-hidden="true" />
+          Share Reframe on X
+          <span className="sr-only">(opens in a new tab)</span>
         </a>
       </div>
     </div>
diff --git a/src/components/DraggableTextOverlays.tsx b/src/components/DraggableTextOverlays.tsx
index d6a088aa3..9a612ee2f 100644
--- a/src/components/DraggableTextOverlays.tsx
+++ b/src/components/DraggableTextOverlays.tsx
@@ -247,7 +247,7 @@ export default function DraggableTextOverlays({
             }}
             className={`absolute pointer-events-auto ${
               editingId === overlay.id ? "cursor-text" : "cursor-move"
-            } select-none transition-all ${
+            } select-none transition-colors ${
               isDragging ? "scale-105" : "scale-100"
             } ${
               isSelected
diff --git a/src/components/ExportOverlay.stories.tsx b/src/components/ExportOverlay.stories.tsx
index 599871a68..34110ee44 100644
--- a/src/components/ExportOverlay.stories.tsx
+++ b/src/components/ExportOverlay.stories.tsx
@@ -12,9 +12,8 @@ import ExportOverlay from "./ExportOverlay";
  * timing. It is marked data-chromatic="ignore": Chromatic still renders it,
  * but excludes it from the diff.
  *
- * The Lottie spinner used to need the same treatment. It no longer does —
- * LottiePlayer checks isChromatic() and renders frame 0 statically, so the
- * spinner is deterministic and stays fully covered by the diff.
+ * The engine-loading state uses a CSS indeterminate bar; Chromatic pauses CSS
+ * animations, so it needs no special handling.
  *
  * A word of warning from how this file got here: an earlier version froze both
  * by stubbing window.setInterval and window.requestAnimationFrame. Chromatic's
@@ -31,10 +30,10 @@ const withCarouselIgnored: Decorator = (Story) => (
 
 function IgnoreCarousel({ children }: { children: React.ReactNode }) {
   React.useEffect(() => {
-    // The TipCarousel root, identified by its min-h-[142px] utility.
+    // The TipCarousel root (a data attribute, so restyling can't break it).
     const marked: Element[] = [];
 
-    document.querySelectorAll('[class*="min-h-[142px]"]').forEach((el) => {
+    document.querySelectorAll("[data-tip-carousel]").forEach((el) => {
       el.setAttribute("data-chromatic", "ignore");
       marked.push(el);
     });
@@ -56,6 +55,7 @@ const meta = {
     // builds. null takes its own early-return branch and pins it at zero.
     exportStartedAt: null,
     onCancel: () => {},
+    summary: { format: "MP4", resolution: "1080 × 1920", quality: "Balanced (CRF 23)" },
   },
 } satisfies Meta<typeof ExportOverlay>;
 
@@ -81,3 +81,25 @@ export const Exporting: Story = {
 export const AlmostDone: Story = {
   args: { status: "exporting", progress: 98 },
 };
+
+/** High-contrast palette: yellow progress and black/white surfaces. */
+export const HighContrast: Story = {
+  args: { status: "exporting", progress: 62 },
+  decorators: [
+    (Story) => (
+      <HighContrastFrame>
+        <Story />
+      </HighContrastFrame>
+    ),
+  ],
+};
+
+function HighContrastFrame({ children }: { children: React.ReactNode }) {
+  React.useEffect(() => {
+    document.documentElement.dataset.theme = "high-contrast";
+    return () => {
+      delete document.documentElement.dataset.theme;
+    };
+  }, []);
+  return <>{children}</>;
+}
diff --git a/src/components/ExportOverlay.tsx b/src/components/ExportOverlay.tsx
index baf6c3f96..62040a320 100644
--- a/src/components/ExportOverlay.tsx
+++ b/src/components/ExportOverlay.tsx
@@ -3,17 +3,40 @@
 import FocusTrap from "focus-trap-react";
 import { useEffect, useRef, useCallback, useState } from "react";
 import { ExportStatus } from "@/lib/types";
-import LottiePlayer from "./LottiePlayer";
-import spinnerAnim from "@/lib/lottie/spinner.json";
 import TipCarousel from "./TipCarousel";
 
+export interface ExportSummary {
+  /** e.g. "MP4" */
+  format: string;
+  /** e.g. "1080 × 1920" */
+  resolution: string;
+  /** e.g. "Balanced (CRF 23)" */
+  quality: string;
+}
+
 interface Props {
   status: ExportStatus;
   progress: number;
   exportStartedAt?: number | null;
+  onCancel?: () => void;
+  summary?: ExportSummary;
   /** One line about a change mid-export, e.g. the engine fallback. */
   notice?: string | null;
-  onCancel?: () => void;
+}
+
+/**
+ * Time left, extrapolated from progress so far, or null while it would be a
+ * guess: before 3% or 3 s, and once it's nearly done.
+ */
+export function estimateRemainingMs(progress: number, elapsedMs: number): number | null {
+  if (progress < 3 || progress >= 99 || elapsedMs < 3000) return null;
+  return (elapsedMs * (100 - progress)) / progress;
+}
+
+function formatRemaining(ms: number): string {
+  const seconds = Math.ceil(ms / 1000);
+  if (seconds < 60) return `about ${Math.max(5, Math.ceil(seconds / 5) * 5)} s left`;
+  return `about ${Math.ceil(seconds / 60)} min left`;
 }
 
 function formatElapsed(ms: number): string {
@@ -23,7 +46,7 @@ function formatElapsed(ms: number): string {
   return `${minutes}:${seconds.toString().padStart(2, "0")}`;
 }
 
-export default function ExportOverlay({ status, progress, exportStartedAt, notice, onCancel }: Props) {
+export default function ExportOverlay({ status, progress, exportStartedAt, onCancel, summary, notice }: Props) {
   const visible = status === "loading-engine" || status === "exporting";
   const previousFocusRef = useRef<HTMLElement | null>(null);
   const focusAnchorRef = useRef<HTMLDivElement | null>(null);
@@ -82,6 +105,9 @@ export default function ExportOverlay({ status, progress, exportStartedAt, notic
   if (!visible) return null;
 
   const isLoading = status === "loading-engine";
+  const clamped = Math.max(0, Math.min(100, progress));
+  const remainingMs = estimateRemainingMs(clamped, elapsedMs);
+  const timeText = `${formatElapsed(elapsedMs)} elapsed${remainingMs === null ? "" : `, ${formatRemaining(remainingMs)}`}`;
 
   return (
     <FocusTrap
@@ -96,84 +122,95 @@ export default function ExportOverlay({ status, progress, exportStartedAt, notic
       <div
         role="dialog"
         aria-modal="true"
+        aria-labelledby="export-overlay-title"
+        aria-describedby="export-overlay-desc"
         tabIndex={-1}
-        className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-[var(--bg)]/95 backdrop-blur-sm"
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 animate-fade-in"
       >
-        <div
-          className="text-center space-y-6 max-w-xs px-6 animate-fade-in"
-          aria-live="polite"
-        >
-          <div
-            ref={focusAnchorRef}
-            tabIndex={-1}
-            className="sr-only"
-            aria-hidden="true"
-          />
-          <div className="mx-auto w-20 h-20">
-            <LottiePlayer
-              animationData={spinnerAnim}
-              loop
-              autoplay
-              aria-hidden="true"
-            />
-          </div>
-          <div className="export-text">
-            <h2 className="font-heading font-bold text-xl tracking-tight text-[var(--text)]">
-              {isLoading ? "Loading engine" : "Exporting"}
-            </h2>
-            <p className="text-sm text-[var(--muted)] mt-1">
-              {isLoading
-                ? "Downloading the video engine. This only happens once."
-                : "Processing your video locally."}
-            </p>
-            {notice && (
-              <p role="status" className="text-sm text-[var(--text)] mt-2">
-                {notice}
-              </p>
-            )}
-            <p className="text-xs font-heading font-semibold text-film-600 mt-2 uppercase tracking-wide">
-              Do not close or refresh this tab
+        <div className="panel enter max-h-[calc(100dvh-2rem)] w-full max-w-md overflow-y-auto p-6 shadow-[var(--shadow-overlay)] sm:p-7">
+          <div ref={focusAnchorRef} tabIndex={-1} className="sr-only" aria-hidden="true" />
+
+          {/* Two real stages, so they're numbered: (1) engine, (2) encode. */}
+          <p className="marker" aria-hidden="true">
+            ({isLoading ? "1" : "2"} of 2)
+          </p>
+          <h2 id="export-overlay-title" className="serif mt-2 text-3xl leading-tight">
+            {isLoading ? "Starting the video engine" : "Exporting"}
+          </h2>
+          <p id="export-overlay-desc" className="mt-2 text-sm leading-6 text-[var(--muted)]">
+            {isLoading
+              ? "Downloading FFmpeg (about 30 MB) the first time. After that it loads from your browser cache."
+              : "Your video is processed on this device. Keep this tab open until it finishes."}
+          </p>
+          {notice && (
+            <p role="status" className="mt-3 text-sm leading-6 text-[var(--text)]">
+              {notice}
             </p>
-          </div>
-          <span className="sr-only">
-            {status === "loading-engine"
-              ? `Loading video engine: ${progress}%`
-              : `Exporting: ${progress}%, ${formatElapsed(elapsedMs)} elapsed`}
-          </span>
-            <div className="w-full space-y-2">
-              <div className="h-1 w-full bg-film-100 rounded-full overflow-hidden">
+          )}
+
+          <div className="mt-6">
+            {isLoading ? (
+              // The engine download doesn't report byte progress, so this is
+              // an honest indeterminate state rather than a fake percentage.
+              <>
+                <div className="progress-track progress-indeterminate" aria-hidden="true" />
+                <p className="mt-3 text-sm text-[var(--text-secondary)]">Loading engine…</p>
+              </>
+            ) : (
+              <>
+                {/* Large serif figure with a small italic unit, as in the reference. */}
+                <p aria-hidden="true" className="flex items-baseline gap-1.5 text-[var(--text)]">
+                  <span className="display text-6xl [font-variant-numeric:lining-nums_tabular-nums]">{clamped}</span>
+                  <span className="marker text-3xl text-[var(--text-secondary)]">%</span>
+                  <span className="tabular ml-auto text-right text-xs text-[var(--muted)]">{timeText}</span>
+                </p>
                 <div
+                  className="progress-track mt-4"
                   role="progressbar"
-                  aria-valuenow={progress}
+                  aria-valuenow={clamped}
                   aria-valuemin={0}
                   aria-valuemax={100}
-                  aria-label={isLoading ? "Engine download progress" : "Export progress"}
-                  className="h-full bg-film-600 rounded-full transition-all duration-300"
-                  style={{ width: `${progress}%` }}
-                />
+                  aria-valuetext={`${clamped}%, ${timeText}`}
+                  aria-label="Export progress"
+                >
+                  <div className="progress-fill" style={{ transform: `scaleX(${clamped / 100})` }} />
+                </div>
+              </>
+            )}
+            {/* Announces the stage only. Percentages are announced in 10% steps
+                by the editor's live region, not on every update. */}
+            <span className="sr-only" role="status">
+              {isLoading ? "Loading video engine" : "Exporting video"}
+            </span>
+          </div>
+
+          {summary && (
+            <dl className="mt-6 grid grid-cols-3 divide-x divide-[var(--border)] border-y border-[var(--border)] py-3 text-xs">
+              <div className="pr-3">
+                <dt className="text-[var(--muted)]">Format</dt>
+                <dd className="mt-0.5 font-medium">{summary.format}</dd>
               </div>
-              <div className="flex items-center justify-between gap-4 text-xs font-heading font-semibold text-[var(--muted)]">
-                <span>{progress}%</span>
-                {!isLoading && (
-                  <span>{formatElapsed(elapsedMs)} elapsed</span>
-                )}
+              <div className="px-3">
+                <dt className="text-[var(--muted)]">Size</dt>
+                <dd className="tabular mt-0.5 font-medium">{summary.resolution}</dd>
               </div>
-              <TipCarousel />
-              {!isLoading && (
-              <div className="flex flex-col items-center gap-3 mt-4">
-                <button
-                  type="button"
-                  onClick={() => onCancel?.()}
-                  className="inline-flex items-center justify-center rounded-lg border border-[var(--error-border)] bg-[var(--error-bg)] px-4 py-2 text-sm font-semibold text-[var(--error)] transition-colors hover:bg-[var(--error-hover)] active:scale-[0.98]"
-                >
-                  Cancel Export
-                </button>
-                <p className="text-[var(--text)] text-xs">
-                  Press Escape to cancel
-                </p>
+              <div className="pl-3">
+                <dt className="text-[var(--muted)]">Quality</dt>
+                <dd className="mt-0.5 font-medium">{summary.quality}</dd>
               </div>
-              )}
-            </div>
+            </dl>
+          )}
+
+          <div className="mt-6 flex items-center justify-between gap-3">
+            <span className="text-xs text-[var(--muted)]">
+              <kbd className="kbd">Esc</kbd> to cancel
+            </span>
+            <button type="button" onClick={() => onCancel?.()} className="btn btn-secondary">
+              Cancel export
+            </button>
+          </div>
+
+          {!isLoading && <TipCarousel />}
         </div>
       </div>
     </FocusTrap>
diff --git a/src/components/ExportSettings.tsx b/src/components/ExportSettings.tsx
index 6eee9b9b7..2ea3f86df 100644
--- a/src/components/ExportSettings.tsx
+++ b/src/components/ExportSettings.tsx
@@ -3,7 +3,6 @@
 import { EditRecipe } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import {
-  SlidersHorizontal,
   Info as InfoIcon,
 } from "lucide-react";
 
@@ -48,23 +47,22 @@ export default function ExportSettings({
         <div className="flex items-center justify-between mb-2">
           <label
             htmlFor="quality-control"
-            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
+            className="label flex items-center gap-1.5"
           >
-            <SlidersHorizontal size={10} />
-            Quality
+                        Quality
 
             <span
               className="cursor-help"
               title="CRF (Constant Rate Factor): lower = higher quality, larger file. 18 = best quality, 30 = smallest file."
             >
-              <InfoIcon size={14} />
+              <InfoIcon size={13} aria-hidden="true" />
             </span>
           </label>
 
-          <span className="text-sm font-heading font-bold text-film-600">
+          <span className="text-sm font-medium text-[var(--text)]">
             {label}
 
-            <span className="font-normal text-sm text-[var(--muted)] ml-2">
+            <span className="tabular ml-1.5 text-xs font-normal text-[var(--muted)]">
               CRF {recipe.quality}
             </span>
           </span>
@@ -87,7 +85,7 @@ export default function ExportSettings({
           aria-describedby="quality-description"
           aria-label="Video export quality (CRF)"
           aria-valuetext={`${label} quality, CRF value ${recipe.quality}`}
-          className="w-full accent-film-600 cursor-pointer"
+          className="w-full cursor-pointer"
         />
 
         <div
@@ -95,11 +93,11 @@ export default function ExportSettings({
           className="mt-1 space-y-3"
         >
           <div className="flex justify-between">
-            <span className="text-sm text-[var(--muted)]">
+            <span className="hint">
               Smallest file
             </span>
 
-            <span className="text-sm text-[var(--muted)]">
+            <span className="hint">
               Best quality
             </span>
           </div>
@@ -113,7 +111,7 @@ export default function ExportSettings({
 
           {isGif && (
             <p className="text-xs text-[var(--warning)] font-medium">
-              ⚠ GIF files can be very large. Keep clips under 10 s for best results.
+              GIF files can be very large. Keep clips under 10 s for best results.
             </p>
           )}
         </div>
@@ -122,7 +120,7 @@ export default function ExportSettings({
         <div className="flex items-center justify-between mt-4">
           <label
             htmlFor="sound-on-completion"
-            className="text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)]"
+            className="label"
           >
             Sound on completion
           </label>
@@ -135,7 +133,7 @@ export default function ExportSettings({
               onChange({ soundOnCompletion: e.target.checked })
             }
             aria-label="Play sound when export completes"
-            className="accent-film-600 cursor-pointer"
+            className="h-4 w-4 cursor-pointer"
           />
         </div>
         )}
@@ -145,13 +143,12 @@ export default function ExportSettings({
         <div className="flex items-center justify-between mb-1">
           <label
             htmlFor="stabilization-toggle"
-            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
+            className="label flex items-center gap-1.5"
           >
-            <SlidersHorizontal size={10} />
-            Stabilization
+                        Stabilization
           </label>
 
-          <span className="flex text-sm font-heading font-bold text-film-600">
+          <span className="flex">
             <input
               id="stabilization-toggle"
               type="checkbox"
@@ -162,12 +159,12 @@ export default function ExportSettings({
                 })
               }
               aria-label="Enable video stabilization"
-              className="w-full accent-film-600 cursor-pointer"
+              className="h-4 w-4 cursor-pointer"
             />
           </span>
         </div>
 
-        <p className="text-xs text-[var(--muted)] mb-1">
+        <p className="hint mb-1">
           Reduce camera shake
         </p>
 
@@ -176,7 +173,7 @@ export default function ExportSettings({
             className={cn(
               "text-xs",
               recipe.stabilization
-                ? "text-[var(--error)] font-medium"
+                ? "text-[var(--warning)] font-medium"
                 : "text-[var(--muted)]"
             )}
           >
@@ -188,20 +185,19 @@ export default function ExportSettings({
         <div className="flex items-center justify-between mb-1">
           <label
             htmlFor="denoise-toggle"
-            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
+            className="label flex items-center gap-1.5"
           >
-            <SlidersHorizontal size={10} />
-            Reduce noise
+                        Reduce noise
 
             <span
               className="cursor-help"
               title="Reduces video noise. May slow down export slightly."
             >
-              <InfoIcon size={14} />
+              <InfoIcon size={13} aria-hidden="true" />
             </span>
           </label>
 
-          <span className="flex text-sm font-heading font-bold text-film-600">
+          <span className="flex">
             <input
               id="denoise-toggle"
               type="checkbox"
@@ -213,12 +209,12 @@ export default function ExportSettings({
               }
               aria-label="Enable noise reduction"
               aria-checked={recipe.denoise}
-              className="w-full accent-film-600 cursor-pointer"
+              className="h-4 w-4 cursor-pointer"
             />
           </span>
         </div>
 
-        <p className="text-xs text-[var(--muted)] mb-1">
+        <p className="hint mb-1">
           Reduce low-light video grain
         </p>
 
@@ -227,7 +223,7 @@ export default function ExportSettings({
             className={cn(
               "text-xs",
               recipe.denoise
-                ? "text-red-700 font-medium"
+                ? "text-[var(--warning)] font-medium"
                 : "text-[var(--muted)]"
             )}
           >
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 8b931a221..57380fa04 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -1,9 +1,7 @@
 "use client";
 
 import { useRef, useState, useEffect, useCallback } from "react";
-import { Film, FolderOpen, Info } from "lucide-react";
-import LottiePlayer from "./LottiePlayer";
-import uploadAnim from "@/lib/lottie/upload.json";
+import { Film, Upload } from "lucide-react";
 import { cn, formatBytes, formatDuration } from "@/lib/utils";
 import { MAX_FILE_SIZE, WARNING_FILE_SIZE } from "@/lib/types";
 
@@ -14,78 +12,42 @@ interface Props {
   duration: number;
 }
 
+/** Matches the extension check in useVideoEditor.handleFileSelect. */
+const SUPPORTED_FORMATS = "MP4, MOV, WebM, MKV and AVI";
+
 function UploadRequirements() {
   return (
-    <section
-      aria-labelledby="upload-requirements-title"
-      className="rounded-xl border border-[var(--border)] bg-[var(--surface)] p-4 shadow-[var(--shadow)]"
-    >
-      <div className="flex items-start gap-3">
-        <div
-          aria-hidden="true"
-          className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-muted)] text-film-600"
-        >
-          <Info size={16} />
+    <section aria-labelledby="upload-requirements-title" className="px-1">
+      <h2 id="upload-requirements-title" className="sr-only">
+        Before you upload
+      </h2>
+      <dl className="grid gap-x-8 gap-y-5 text-xs sm:grid-cols-3">
+        <div>
+          <dt className="marker">
+            <span aria-hidden="true">(</span>Formats<span aria-hidden="true">)</span>
+          </dt>
+          <dd className="mt-2 max-w-[34ch] leading-5 text-[var(--muted)]">
+            {SUPPORTED_FORMATS}. MP4 with H.264 video and AAC audio is the most reliable.
+          </dd>
         </div>
-
-        <div className="min-w-0 flex-1">
-          <h3
-            id="upload-requirements-title"
-            className="font-heading text-sm font-semibold text-[var(--text)]"
-          >
-            Upload requirements
-          </h3>
-
-          <p className="mt-1 text-xs text-[var(--muted)]">
-            Check these details before choosing a video.
-          </p>
-
-          <dl className="mt-3 grid gap-3 sm:grid-cols-2">
-            <div>
-              <dt className="text-xs font-semibold text-[var(--text)]">
-                File size
-              </dt>
-              <dd className="mt-1 text-xs leading-5 text-[var(--muted)]">
-                Up to {formatBytes(MAX_FILE_SIZE)}. Files over{" "}
-                {formatBytes(WARNING_FILE_SIZE)} may process more slowly.
-              </dd>
-            </div>
-
-            <div>
-              <dt className="text-xs font-semibold text-[var(--text)]">
-                Supported formats
-              </dt>
-              <dd className="mt-1 text-xs leading-5 text-[var(--muted)]">
-                MP4, MOV, AVI, MKV and WebM.
-              </dd>
-            </div>
-
-            <div>
-              <dt className="text-xs font-semibold text-[var(--text)]">
-                Best compatibility
-              </dt>
-              <dd className="mt-1 text-xs leading-5 text-[var(--muted)]">
-                MP4 with H.264 video and AAC audio is recommended.
-              </dd>
-            </div>
-
-            <div>
-              <dt className="text-xs font-semibold text-[var(--text)]">
-                Processing
-              </dt>
-              <dd className="mt-1 text-xs leading-5 text-[var(--muted)]">
-                Processing happens locally in your browser using FFmpeg.wasm.
-              </dd>
-            </div>
-          </dl>
-
-          <p className="mt-3 border-t border-[var(--border)] pt-3 text-xs leading-5 text-[var(--muted)]">
-            Large, high-resolution or complex videos can exceed browser memory,
-            especially on devices with limited RAM. For smoother exports, close
-            unused tabs and use the recommended MP4 format.
-          </p>
+        <div>
+          <dt className="marker">
+            <span aria-hidden="true">(</span>File size<span aria-hidden="true">)</span>
+          </dt>
+          <dd className="mt-2 max-w-[34ch] leading-5 text-[var(--muted)]">
+            Up to {formatBytes(MAX_FILE_SIZE)}. Export loads the whole file into browser memory, so files
+            over {formatBytes(WARNING_FILE_SIZE)} can fail on devices with little RAM.
+          </dd>
         </div>
-      </div>
+        <div>
+          <dt className="marker">
+            <span aria-hidden="true">(</span>Output<span aria-hidden="true">)</span>
+          </dt>
+          <dd className="mt-2 max-w-[34ch] leading-5 text-[var(--muted)]">
+            MP4, WebM, MKV or GIF, sized for each platform or to your own dimensions.
+          </dd>
+        </div>
+      </dl>
     </section>
   );
 }
@@ -102,54 +64,42 @@ interface FileInfoProps {
 }
 
 function FileInfo({ currentFile, duration, fileError, onChangeClick }: FileInfoProps) {
+  const ext = currentFile?.name.includes(".") ? currentFile.name.split(".").pop() : "video";
   return (
-    <div className="px-4 py-3 bg-[var(--surface)] border border-[var(--border)] rounded-[var(--radius)] shadow-[var(--shadow)]">
-      <div className="flex flex-col lg:flex-row lg:items-center gap-3">
-        <div className="flex items-start gap-3 flex-1 min-w-0">
-          <div className="hidden lg:flex items-center justify-center w-9 h-9 rounded-lg bg-[var(--surface)] border border-[var(--border)] shrink-0">
-            <Film size={16} className="text-film-600" />
-          </div>
-          <Film size={18} className="lg:hidden text-film-600 shrink-0 mt-0.5" />
-          <div className="flex-1 min-w-0">
-            <div className="flex flex-wrap items-center gap-2 mb-0.5">
-              <p className="text-sm font-semibold text-[var(--text)] truncate max-w-[320px] xl:max-w-[420px]">
-                {currentFile?.name}
-              </p>
-              {currentFile && (
-                <span className="px-2 py-0.5 bg-[var(--accent-muted)] text-[var(--text)] font-bold tracking-wider rounded text-[10px] uppercase shrink-0">
-                  {currentFile.name.includes(".")
-                    ? currentFile.name.split(".").pop()
-                    : "VIDEO"}
-                </span>
-              )}
-            </div>
-            <div className="text-xs text-[var(--muted)] mt-1 space-y-0.5">
-              <p>{formatBytes(currentFile?.size ?? 0)}</p>
-              <p>
-                {duration > 0
-                  ? `Duration: ${formatDuration(duration)}`
-                  : "Loading duration..."}
-              </p>
-            </div>
-          </div>
+    <div>
+      <div className="flex items-center gap-3">
+        <div
+          aria-hidden="true"
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-[var(--border-strong)] text-[var(--text-secondary)]"
+        >
+          <Film size={16} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium text-[var(--text)]" title={currentFile?.name}>
+            {currentFile?.name}
+          </p>
+          <p className="tabular text-xs text-[var(--muted)]">
+            <span className="uppercase">{ext}</span>
+            {" · "}
+            {formatBytes(currentFile?.size ?? 0)}
+            {" · "}
+            {duration > 0 ? formatDuration(duration) : "Reading duration…"}
+          </p>
         </div>
-
         <button
           type="button"
           onClick={onChangeClick}
-          className="text-xs font-semibold text-film-600 hover:text-film-700 uppercase tracking-wide"
+          className="btn btn-secondary btn-sm shrink-0"
+          title="Choose a different video (Ctrl+O)"
         >
-          Change
-          <span className="text-[var(--muted)] ml-1">(Ctrl+O)</span>
+          Replace video
         </button>
       </div>
 
-      <p className="text-xs text-[var(--muted)] mt-3 break-words">
-        Supports: MP4, MOV, AVI, MKV, WebM, and most video formats
-      </p>
-
       {fileError && (
-        <p className="text-xs text-[var(--error)] mt-2 font-medium">{fileError}</p>
+        <p role="alert" className="mt-2 text-xs font-medium text-[var(--error)]">
+          {fileError}
+        </p>
       )}
     </div>
   );
@@ -182,61 +132,70 @@ function DropZone({
       id="upload-zone"
       role="button"
       tabIndex={0}
-      aria-label="Video upload area. Drag and drop a video file or press Enter to browse."
+      // Named by its visible text so voice-control users can say what they see.
+      aria-labelledby="upload-zone-title"
+      aria-describedby="upload-zone-hint"
       onDragOver={onDragOver}
       onDragLeave={onDragLeave}
       onDrop={onDrop}
       onClick={onClick}
       onKeyDown={onKeyDown}
+      // A dark "screen" waiting for footage, in every theme. The inset hairline
+      // frame tightens and turns red while a file is dragged over it.
       className={cn(
-        "group flex flex-col items-center justify-center gap-4 py-12 px-6",
-        "border-2 border-dashed rounded-xl cursor-pointer transition-all duration-300 relative overflow-hidden",
-        dragging
-          ? "border-[var(--accent)] bg-[var(--accent-muted)] scale-[1.02] shadow-[var(--shadow)] ring-4 ring-[var(--accent-muted)]"
-          : "border-[var(--border)] bg-[var(--bg)] hover:border-film-400 hover:bg-film-50/40"
+        "group relative flex min-h-[300px] cursor-pointer flex-col items-center justify-center gap-5 overflow-hidden rounded-[4px] border border-[var(--viewer-frame)] bg-[var(--stage)] px-6 py-14 text-center sm:min-h-[360px]",
+        "focus-visible:outline-offset-4"
       )}
     >
-      {dragging && (
-        <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-film-500/20 to-transparent pointer-events-none" />
-      )}
-
-      <div className="w-20 h-20 opacity-80 group-hover:opacity-100 transition-opacity group-hover:scale-110 duration-200">
-        <LottiePlayer animationData={uploadAnim} loop autoplay />
+      {/* The zone itself is visible from the first frame (it holds the main
+          call to action and is the page's LCP element); only this inner
+          hairline frame draws in. */}
+      <span
+        aria-hidden="true"
+        className={cn(
+          "frame-inset pointer-events-none absolute rounded-[2px] border transition-[inset,border-color] duration-base ease-out",
+          dragging
+            ? "inset-2 border-[var(--accent)]"
+            : "inset-4 border-white/15 group-hover:inset-3 group-hover:border-white/30"
+        )}
+      />
+      <div
+        aria-hidden="true"
+        className={cn(
+          "flex h-12 w-12 items-center justify-center rounded-full border text-[var(--viewer-text)] transition-transform duration-base ease-out",
+          dragging ? "-translate-y-1 border-[var(--accent)]" : "border-white/30 group-hover:-translate-y-0.5"
+        )}
+      >
+        <Upload size={18} />
       </div>
-
-      <div className="text-center">
-        <p className="font-heading font-semibold text-[var(--text)] text-base">
-          {dragging ? "Release to upload" : "Drag & Drop your video here"}
+      <div className="relative">
+        <p id="upload-zone-title" className="display text-2xl text-[var(--viewer-text)] sm:text-3xl">
+          {dragging ? "Drop to open this video" : "Choose a video or drag it here"}
         </p>
-        <p className="text-sm text-[var(--muted)] mt-1">or click to browse</p>
-        <p className="text-xs text-[var(--muted)] mt-2 font-heading">
-          Ctrl+O / Cmd+O
+        <p id="upload-zone-hint" className="mt-2 text-sm text-[var(--viewer-muted)]">
+          {SUPPORTED_FORMATS} up to {formatBytes(MAX_FILE_SIZE)}
         </p>
       </div>
-
-      <div className="flex flex-col items-center gap-3">
-        <div className="flex flex-col items-center gap-2">
-          <div className="flex items-center gap-2 px-4 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-sm font-heading font-medium text-[var(--muted)]">
-            <FolderOpen size={14} />
-            MP4 / MOV / AVI / WebM
-          </div>
-          <p className="text-xs text-[var(--muted)]">Max file size: 2 GB</p>
-        </div>
-
-        {error && (
-          <div className="text-xs text-red-700 bg-red-50 border border-red-200 rounded-lg px-3 py-2 flex items-center gap-2">
-            <span className="text-red-500">❌</span>
-            {error}
-          </div>
-        )}
-      </div>
-
-      <p className="text-xs text-[var(--muted)] text-center">
-        Supports: MP4, MOV, AVI, MKV, WebM, and most video formats up to 2GB
-      </p>
-
+      {/* Visual affordance only: the whole zone is the button, so this can't
+          be a nested <button>. */}
+      <span
+        aria-hidden="true"
+        className="relative inline-flex min-h-[2.25rem] items-center gap-3 rounded-pill bg-[var(--viewer-text)] px-4 text-sm font-medium text-[var(--viewer)] transition-transform duration-fast group-active:scale-[0.97]"
+      >
+        Choose video
+        <span className="hidden text-xs opacity-70 sm:inline">Ctrl O</span>
+      </span>
+
+      {/* Errors sit on the dark screen, so they use the dark-theme error tint. */}
+      {error && (
+        <p role="alert" className="relative max-w-md rounded-control border border-[var(--viewer-error)] px-3 py-2 text-xs text-[var(--viewer-text)]">
+          {error}
+        </p>
+      )}
       {fileError && (
-        <p className="text-sm text-[var(--error)] text-center">{fileError}</p>
+        <p role="alert" className="relative max-w-md text-sm text-[var(--viewer-error)]">
+          {fileError}
+        </p>
       )}
     </div>
   );
@@ -279,24 +238,22 @@ export default function FileUpload({
     setWarning("");
 
     if (!file.type.startsWith("video/")) {
-      setError("Please drop a valid video file (MP4, MOV, AVI, WebM, etc.)");
+      setError(`That file isn't a video. Choose a ${SUPPORTED_FORMATS} file.`);
       return;
     }
 
     if (file.size > MAX_FILE_SIZE) {
       setError(
-        `File too large (${formatBytes(file.size)}). Maximum allowed size is 2GB.`
+        `This file is ${formatBytes(file.size)}. The maximum is ${formatBytes(MAX_FILE_SIZE)}.`
       );
       return;
     }
 
     if (file.size > WARNING_FILE_SIZE) {
-      const estimatedMinutes = Math.max(
-        1,
-        Math.round(file.size / (100 * 1024 * 1024))
-      );
+      // No time estimate: export speed depends on codec, resolution and
+      // device far more than on file size, and it hasn't been measured.
       setWarning(
-        `Large file detected (${formatBytes(file.size)}). Processing may take ~${estimatedMinutes} minutes.`
+        `Large file (${formatBytes(file.size)}). Export can take several minutes and may fail on devices with limited memory.`
       );
     }
 
@@ -345,11 +302,12 @@ export default function FileUpload({
   }, [handleFile]);
 
   // ── Drop zone (inner) handler ─────────────────────────
+  // Only resets the zone's highlight: the drop bubbles to the document-level
+  // listener above, which handles the file. Handling it here as well ran
+  // validation and metadata extraction twice for every drop on the zone.
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     setDragging(false);
-    const file = e.dataTransfer.files?.[0];
-    if (file) handleFile(file);
   };
 
   return (
@@ -358,42 +316,25 @@ export default function FileUpload({
       {pageDragging && (
         <div
           aria-live="polite"
-          aria-label="Drop your video file anywhere on the page"
-          className={cn(
-            "fixed inset-0 z-50 flex flex-col items-center justify-center gap-4",
-            "bg-black/60 backdrop-blur-sm",
-            "border-4 border-dashed border-film-500",
-            "transition-all duration-200 pointer-events-none"
-          )}
+          className="animate-fade-in pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6"
         >
-          {/* Animated ring */}
-          <div className="relative flex items-center justify-center">
-            <div className="absolute w-32 h-32 rounded-full border-4 border-film-500/40 animate-ping" />
-            <div className="w-24 h-24 rounded-full bg-film-500/10 border-2 border-film-500 flex items-center justify-center">
-              <Film size={40} className="text-film-400" />
-            </div>
-          </div>
-
-          <div className="text-center">
-            <p className="text-2xl font-bold text-white">
-              Drop your video anywhere
-            </p>
-            <p className="text-film-300 mt-1 text-sm">
-              Release to start uploading
-            </p>
+          <div className="absolute inset-6 rounded-[4px] border border-white/40" aria-hidden="true" />
+          <div className="flex flex-col items-center gap-4 text-center text-[var(--viewer-text)]">
+            <Film size={26} aria-hidden="true" />
+            <p className="display text-4xl">Drop to open this video</p>
           </div>
         </div>
       )}
 
       {/* ── Normal upload UI ── */}
       <div className="space-y-2">
-        {error && (
+        {error && currentFile && (
           <p role="alert" className="text-sm text-[var(--error)]">
             {error}
           </p>
         )}
         {warning && (
-          <p role="alert" className="text-sm text-[var(--warning)]">
+          <p role="status" className="callout callout-warning text-xs">
             {warning}
           </p>
         )}
@@ -405,7 +346,7 @@ export default function FileUpload({
             onChangeClick={() => inputRef.current?.click()}
           />
         ) : (
-          <div className="space-y-3">
+          <div className="space-y-8">
             <DropZone
               dragging={dragging}
               error={error}
diff --git a/src/components/FontSelector.tsx b/src/components/FontSelector.tsx
index a5a72a837..1cd574470 100644
--- a/src/components/FontSelector.tsx
+++ b/src/components/FontSelector.tsx
@@ -146,7 +146,7 @@ export default function FontSelector({
                 <button
                   type="button"
                   onClick={() => onRemoveFont(name)}
-                  className="p-1 rounded text-red-400 hover:bg-red-500/10 transition-colors"
+                  className="p-1 rounded text-[var(--error)] hover:bg-[var(--error-bg)] transition-colors"
                   aria-label={`Remove ${name} font`}
                 >
                   <X size={12} />
@@ -163,7 +163,7 @@ export default function FontSelector({
           {errors.map((error, idx) => (
             <p
               key={idx}
-              className="text-xs text-red-400 bg-red-500/10 px-2 py-1 rounded"
+              className="text-xs text-[var(--error)] bg-[var(--error-bg)] px-2 py-1 rounded"
             >
               {error}
             </p>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index a3dd7c38a..52fd27d25 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -18,18 +18,18 @@ import {
 
 export default function Footer() {
   return (
-    <footer className="w-full bg-[var(--neo-bg)] text-[var(--text)] shadow-[0_-8px_18px_var(--neo-lo)] px-6 py-16 mt-20 transition-colors duration-300">
-      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-y-12 md:gap-x-12">
+    <footer className="w-full border-t border-[var(--border)] bg-[var(--bg)] text-[var(--text)] px-6 py-12 mt-16">
+      <div className="max-w-[1440px] mx-auto grid grid-cols-1 md:grid-cols-12 gap-y-12 md:gap-x-12 lg:px-2">
         {/* Brand Section */}
         <div className="md:col-span-5 space-y-6">
           <div>
-            <h2 className="text-2xl font-bold tracking-tight">Reframe</h2>
-            <p className="text-[10px] font-mono tracking-[0.35em] uppercase opacity-50 mt-1">
+            <h2 className="display text-4xl">Reframe</h2>
+            <p className="text-xs text-[var(--muted)] mt-1">
               Browser Video Studio
             </p>
           </div>
 
-          <p className="text-sm opacity-70 leading-relaxed max-w-md">
+          <p className="text-sm text-[var(--text-secondary)] leading-relaxed max-w-md">
             Professional video processing directly in your browser using{" "}
             <span className="font-medium opacity-100">FFmpeg.wasm</span> — fast, private, and open
             source.
@@ -43,7 +43,7 @@ export default function Footer() {
             ].map((tag) => (
               <span
                 key={tag.label}
-                className="flex items-center gap-1.5 px-3 py-1 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-semibold tracking-wide uppercase opacity-80 hover:opacity-100 hover:border-[var(--accent)] transition-all"
+                className="flex items-center gap-1.5 px-3 py-1 rounded-pill border border-[var(--border)] text-2xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-strong)] transition-colors"
               >
                 {tag.icon}
                 {tag.label}
@@ -54,9 +54,7 @@ export default function Footer() {
 
         {/* Navigation */}
         <div className="md:col-span-3 space-y-5">
-          <h3 className="text-[11px] font-bold uppercase tracking-[0.2em] opacity-60">
-            Navigation
-          </h3>
+          <h3 className="marker"><span aria-hidden="true">(</span>Navigation<span aria-hidden="true">)</span></h3>
 
           <nav className="flex flex-col gap-3 text-sm">
             <a
@@ -64,7 +62,7 @@ export default function Footer() {
               target="_blank"
               rel="noopener noreferrer"
               aria-label="GitHub repository"
-              className="flex items-center gap-2 opacity-70 hover:opacity-100 hover:text-[var(--accent)] transition-all w-fit focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--accent)] rounded"
+              className="flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors w-fit rounded"
             >
               <Github size={14} />
               GitHub
@@ -74,7 +72,7 @@ export default function Footer() {
             <Link
               href="/contact"
               aria-label="Contact page"
-              className="flex items-center gap-2 opacity-70 hover:opacity-100 hover:text-[var(--accent)] transition-all w-fit focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--accent)] rounded"
+              className="flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors w-fit rounded"
             >
               <Mail size={14} />
               Contact
@@ -83,7 +81,7 @@ export default function Footer() {
             <Link
               href="/privacy"
               aria-label="Privacy policy"
-              className="flex items-center gap-2 opacity-70 hover:opacity-100 hover:text-[var(--accent)] transition-all w-fit focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--accent)] rounded"
+              className="flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors w-fit rounded"
             >
               <Lock size={14} />
               Privacy Policy
@@ -97,7 +95,7 @@ export default function Footer() {
               target="_blank"
               rel="noopener noreferrer"
               aria-label="Code of Conduct"
-              className="flex items-center gap-2 opacity-70 hover:opacity-100 hover:text-[var(--accent)] transition-all w-fit focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--accent)] rounded"
+              className="flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors w-fit rounded"
             >
               <HeartHandshake size={14} />
               Code of Conduct
@@ -111,10 +109,10 @@ export default function Footer() {
           {/* Newsletter */}
 
           <div className="space-y-3">
-            <h3 className="text-[11px] font-bold uppercase tracking-[0.2em] opacity-60">Updates</h3>
+            <h3 className="marker"><span aria-hidden="true">(</span>Updates<span aria-hidden="true">)</span></h3>
 
             <form
-              className="flex items-center w-full sm:w-80 bg-[var(--surface)] border border-[var(--border)] rounded-lg px-3 focus-within:border-[var(--accent)] focus-within:ring-1 focus-within:ring-[var(--accent)] transition"
+              className="flex items-center w-full sm:w-80 bg-[var(--surface)] border border-[var(--border)] rounded-pill px-4 focus-within:border-[var(--focus)] focus-within:ring-1 focus-within:ring-[var(--accent)] transition"
               onSubmit={(e) => e.preventDefault()}
               aria-label="Newsletter signup"
             >
@@ -123,14 +121,14 @@ export default function Footer() {
                 required
                 placeholder="Enter your email"
                 aria-label="Email address"
-                className="w-full bg-transparent py-3 px-1 text-[11px] font-semibold tracking-widest uppercase placeholder:opacity-30 outline-none focus:outline-none focus:ring-0 border-none"
+                className="w-full bg-transparent py-3 px-1 text-2xs font-semibold placeholder:text-[var(--muted)] outline-none focus:outline-none focus:ring-0 border-none"
               />
 
               <button
                 type="submit"
                 aria-label="Subscribe to updates"
                 onMouseDown={(e) => e.preventDefault()}
-                className="text-[var(--accent)] hover:text-[var(--accent-hover)] transition p-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--accent)] rounded ml-1"
+                className="text-[var(--text)] hover:text-[var(--text-secondary)] transition-colors p-2 rounded-full ml-1"
               >
                 <ArrowRight size={16} />
               </button>
@@ -140,9 +138,7 @@ export default function Footer() {
           {/* Community */}
 
           <div className="space-y-3">
-            <h3 className="text-[11px] font-bold uppercase tracking-[0.2em] opacity-60">
-              Community
-            </h3>
+            <h3 className="marker"><span aria-hidden="true">(</span>Community<span aria-hidden="true">)</span></h3>
 
             <div className="flex items-center gap-3 flex-wrap">
               {[
@@ -173,7 +169,7 @@ export default function Footer() {
                   target="_blank"
                   rel="noopener noreferrer"
                   aria-label={social.label}
-                  className="relative group p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--accent)]"
+                  className="relative group p-2.5 rounded-full border border-[var(--border)] hover:border-[var(--border-strong)] hover:bg-[var(--surface-2)] transition-colors "
                 >
                   <span className="opacity-70 group-hover:opacity-100">{social.icon}</span>
                 </a>
@@ -184,12 +180,12 @@ export default function Footer() {
       </div>
 
       {/* Bottom Bar */}
-      <div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-[var(--border)] flex flex-col md:flex-row justify-between items-center gap-4 text-[10px] font-semibold uppercase tracking-[0.25em] opacity-50">
+      <div className="max-w-[1440px] mx-auto mt-16 pt-8 border-t border-[var(--border)] flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-[var(--muted)]">
         <p>© {new Date().getFullYear()} Reframe · MIT License</p>
 
         <div className="flex items-center gap-6">
           <div className="flex items-center gap-2">
-            <span className="w-1.5 h-1.5 rounded-full bg-[var(--accent)] shadow-[0_0_8px_var(--accent)]" />
+            <span className="w-1.5 h-1.5 rounded-full bg-[var(--success)]" />
             Processing happens locally
           </div>
 
@@ -206,7 +202,7 @@ export default function Footer() {
             target="_blank"
             rel="noopener noreferrer"
             aria-label="Deploys by Netlify"
-            className="opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--accent)] rounded"
+            className="opacity-100  rounded"
           >
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
diff --git a/src/components/FormatSelector.tsx b/src/components/FormatSelector.tsx
index 4e95651cf..ccbdc045e 100644
--- a/src/components/FormatSelector.tsx
+++ b/src/components/FormatSelector.tsx
@@ -2,7 +2,6 @@
 
 import { EditRecipe } from "@/lib/types";
 import { Film } from "lucide-react";
-import { cn } from "@/lib/utils";
 
 interface Props {
   recipe: EditRecipe;
@@ -19,33 +18,24 @@ const FORMAT_OPTIONS = [
 export default function FormatSelector({ recipe, onChange }: Props) {
   return (
     <div>
-      <div className="flex items-center gap-1 mb-3">
-        <Film size={10} className="text-film-500 opacity-80" />
-        <div className="text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)]">
-          Output Format
-        </div>
+      <div id="format-label" className="mb-2 flex items-center gap-2 text-sm font-medium">
+        <Film size={15} aria-hidden="true" className="text-[var(--muted)]" />
+        Format
       </div>
-      <div className="grid grid-cols-4 gap-2">
+      <div role="group" aria-labelledby="format-label" className="grid grid-cols-4 gap-1.5">
         {FORMAT_OPTIONS.map((option) => (
           <button
             key={option.id}
             type="button"
             onClick={() => onChange({ format: option.id as "mp4" | "webm" | "mkv" | "gif" })}
-            aria-label={`Select ${option.label} format`}
-            aria-pressed={recipe.format === option.id}
-            className={cn(
-              "relative px-3 py-2.5 rounded-lg border-2 border-transparent transition-all",
-              "text-xs font-heading font-semibold uppercase tracking-wider",
-              recipe.format === option.id
-                ? "neo-inset text-film-600"
-                : "neo-pressable text-[var(--muted)] hover:text-film-600"
-            )}
+                        aria-pressed={recipe.format === option.id}
+            className="choice min-h-[36px] px-2 text-xs font-medium"
           >
             {option.label}
           </button>
         ))}
       </div>
-      <p className="text-[10px] text-[var(--muted)] mt-2">
+      <p className="hint mt-2">
         {FORMAT_OPTIONS.find((o) => o.id === recipe.format)?.description}
       </p>
     </div>
diff --git a/src/components/FramingControl.tsx b/src/components/FramingControl.tsx
index 7685b1c29..1fa1bb036 100644
--- a/src/components/FramingControl.tsx
+++ b/src/components/FramingControl.tsx
@@ -21,22 +21,15 @@ export default function FramingControl({ recipe, onChange }: Props) {
             key={mode}
             title={mode === "fit" ? "Fit: Adds black bars (letterbox) to fill empty space" : "Fill: Crops the video to fill the entire frame"}
             onClick={() => onChange({ framing: mode })}
-            className={cn(
-              "flex-1 min-h-[44px] min-w-[44px] flex flex-col items-center justify-center gap-2 py-4 rounded-lg border border-transparent transition-all duration-150",
-              active
-                ? "neo-inset text-film-600"
-                : "neo-pressable text-[var(--muted)]"
-            )}
+            aria-pressed={active}
+            className="choice flex min-h-[44px] min-w-[44px] flex-1 items-center gap-3 px-3 py-2.5 text-left"
           >
-            <Icon size={18} aria-hidden="true" />
-            <span className="sr-only">
-              Set framing to {mode === "fit" ? "fit within frame" : "fill frame by cropping"}
-            </span>
-            <div className="text-center">
-              <p className="text-xs font-heading font-semibold uppercase tracking-wider">
+            <Icon size={16} aria-hidden="true" className={cn("shrink-0", active ? "text-[var(--selected)]" : "text-[var(--muted)]")} />
+            <div>
+              <p className="text-sm font-medium text-[var(--text)]">
                 {mode === "fit" ? "Fit" : "Fill"}
               </p>
-              <p className="text-[10px] text-[var(--muted)] mt-0.5">
+              <p className="text-2xs text-[var(--muted)]">
                 {mode === "fit" ? "Letterbox / pillarbox" : "Crop to frame"}
               </p>
             </div>
diff --git a/src/components/HistoryControls.tsx b/src/components/HistoryControls.tsx
index 1279e060a..6d42b5308 100644
--- a/src/components/HistoryControls.tsx
+++ b/src/components/HistoryControls.tsx
@@ -12,8 +12,7 @@ interface Props {
   onRedo: () => void;
 }
 
-const buttonClass =
-  "inline-flex items-center gap-1.5 min-h-[36px] px-3 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-xs font-heading font-bold uppercase tracking-widest transition-colors";
+const buttonClass = "btn btn-ghost btn-sm";
 
 export default function HistoryControls({ canUndo, canRedo, onUndo, onRedo }: Props) {
   const [isMac, setIsMac] = useState(false);
@@ -36,9 +35,7 @@ export default function HistoryControls({ canUndo, canRedo, onUndo, onRedo }: Pr
         title={`Undo (${undoKeys})`}
         className={cn(
           buttonClass,
-          canUndo
-            ? "text-[var(--text)] hover:bg-[var(--border)]"
-            : "text-[var(--muted)] opacity-50 cursor-not-allowed"
+          !canUndo && "cursor-not-allowed opacity-40"
         )}
       >
         <Undo2 size={14} aria-hidden="true" />
@@ -52,9 +49,7 @@ export default function HistoryControls({ canUndo, canRedo, onUndo, onRedo }: Pr
         title={`Redo (${redoKeys})`}
         className={cn(
           buttonClass,
-          canRedo
-            ? "text-[var(--text)] hover:bg-[var(--border)]"
-            : "text-[var(--muted)] opacity-50 cursor-not-allowed"
+          !canRedo && "cursor-not-allowed opacity-40"
         )}
       >
         <Redo2 size={14} aria-hidden="true" />
diff --git a/src/components/ImageOverlay.tsx b/src/components/ImageOverlay.tsx
index c6630c331..69f883232 100644
--- a/src/components/ImageOverlay.tsx
+++ b/src/components/ImageOverlay.tsx
@@ -61,7 +61,7 @@ export default function ImageOverlayPanel({
   const isSolidOpacity = overlayOpacity > 75;
 
   return (
-    <div className="w-full text-[11px] text-[var(--text)] space-y-3">
+    <div className="w-full text-2xs text-[var(--text)] space-y-3">
       
       {/* Side-by-Side Area */}
       <div className="flex gap-2.5 items-center w-full">
@@ -70,7 +70,7 @@ export default function ImageOverlayPanel({
         <label htmlFor="overlay-file-input" className={`w-14 h-11 shrink-0 rounded-lg overflow-hidden flex flex-col items-center justify-center transition border ${
           overlayFile 
             ? "border-[var(--border)] bg-[var(--bg)] pointer-events-none"
-            : "border-dashed border-[var(--border)] hover:bg-[var(--accent-muted)] text-[var(--muted)] hover:text-[var(--text)] cursor-pointer"
+            : "border-dashed border-[var(--border)] hover:bg-[var(--surface-2)] text-[var(--muted)] hover:text-[var(--text)] cursor-pointer"
         }`}>
           {thumbUrl ? (
             <Image
@@ -84,7 +84,7 @@ export default function ImageOverlayPanel({
           ) : (
             <>
               <Upload size={14} className="opacity-80" />
-              <span className="text-[9px] mt-0.5 font-medium tracking-wide">Upload</span>
+              <span className="text-2xs mt-0.5 font-medium">Upload</span>
             </>
           )}
           <input
@@ -107,10 +107,10 @@ export default function ImageOverlayPanel({
               <div className="flex items-center gap-2 min-w-0 flex-1">
                 <FileImage size={14} className="text-[var(--muted)] shrink-0" />
                 <div className="min-w-0 flex-1">
-                  <p className="text-[10px] font-medium text-[var(--text)] truncate">
+                  <p className="text-2xs font-medium text-[var(--text)] truncate">
                     {overlayFile.name}
                   </p>
-                  <p className="text-[9px] text-[var(--muted)] mt-0.5">
+                  <p className="text-2xs text-[var(--muted)] mt-0.5">
                     {(overlayFile.size / 1024).toFixed(0)} KB
                   </p>
                 </div>
@@ -126,7 +126,7 @@ export default function ImageOverlayPanel({
               </button>
             </>
           ) : (
-            <span className="text-[10px] text-[var(--muted)] italic">
+            <span className="text-2xs text-[var(--muted)] italic">
               No asset selected
             </span>
           )}
@@ -145,13 +145,13 @@ export default function ImageOverlayPanel({
                   key={value}
                   type="button"
                   onClick={() => setOverlayPosition(value)}
-                  className={`rounded border py-0.5 text-center text-[10px] transition flex items-center justify-center gap-0.5 ${
+                  className={`rounded border py-0.5 text-center text-2xs transition flex items-center justify-center gap-0.5 ${
                     overlayPosition === value
-                      ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
-                      : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
+                      ? "border-[var(--selected)] text-[var(--text)] bg-[var(--selected-bg)]"
+                      : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--surface-2)]"
                   }`}
                 >
-                  <span className={overlayPosition === value ? "text-[var(--accent)]" : "text-[var(--muted)]"}>
+                  <span className={overlayPosition === value ? "text-[var(--selected)]" : "text-[var(--muted)]"}>
                     {icon}
                   </span>
                   <span>{label}</span>
@@ -167,10 +167,10 @@ export default function ImageOverlayPanel({
               <button
                 type="button"
                 onClick={() => setOverlaySize(100)}
-                className={`rounded border py-0.5 text-center text-[10px] transition ${
+                className={`rounded border py-0.5 text-center text-2xs transition ${
                   isSmallSize
-                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
+                    ? "border-[var(--selected)] text-[var(--text)] bg-[var(--selected-bg)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--surface-2)]"
                 }`}
               >
                 Small
@@ -178,10 +178,10 @@ export default function ImageOverlayPanel({
               <button
                 type="button"
                 onClick={() => setOverlaySize(250)}
-                className={`rounded border py-0.5 text-center text-[10px] transition ${
+                className={`rounded border py-0.5 text-center text-2xs transition ${
                   isMediumSize
-                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
+                    ? "border-[var(--selected)] text-[var(--text)] bg-[var(--selected-bg)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--surface-2)]"
                 }`}
               >
                 Medium
@@ -189,10 +189,10 @@ export default function ImageOverlayPanel({
               <button
                 type="button"
                 onClick={() => setOverlaySize(450)}
-                className={`rounded border py-0.5 text-center text-[10px] transition ${
+                className={`rounded border py-0.5 text-center text-2xs transition ${
                   isLargeSize
-                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
+                    ? "border-[var(--selected)] text-[var(--text)] bg-[var(--selected-bg)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--surface-2)]"
                 }`}
               >
                 Large
@@ -207,10 +207,10 @@ export default function ImageOverlayPanel({
               <button
                 type="button"
                 onClick={() => setOverlayOpacity(25)}
-                className={`rounded border py-0.5 text-center text-[10px] transition ${
+                className={`rounded border py-0.5 text-center text-2xs transition ${
                   isFaintOpacity
-                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
+                    ? "border-[var(--selected)] text-[var(--text)] bg-[var(--selected-bg)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--surface-2)]"
                 }`}
               >
                 25%
@@ -218,10 +218,10 @@ export default function ImageOverlayPanel({
               <button
                 type="button"
                 onClick={() => setOverlayOpacity(60)}
-                className={`rounded border py-0.5 text-center text-[10px] transition ${
+                className={`rounded border py-0.5 text-center text-2xs transition ${
                   isMediumOpacity
-                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
+                    ? "border-[var(--selected)] text-[var(--text)] bg-[var(--selected-bg)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--surface-2)]"
                 }`}
               >
                 60%
@@ -229,10 +229,10 @@ export default function ImageOverlayPanel({
               <button
                 type="button"
                 onClick={() => setOverlayOpacity(100)}
-                className={`rounded border py-0.5 text-center text-[10px] transition ${
+                className={`rounded border py-0.5 text-center text-2xs transition ${
                   isSolidOpacity
-                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
+                    ? "border-[var(--selected)] text-[var(--text)] bg-[var(--selected-bg)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--surface-2)]"
                 }`}
               >
                 100%
diff --git a/src/components/NativeShareButton.tsx b/src/components/NativeShareButton.tsx
index 51905a126..f17e952d3 100644
--- a/src/components/NativeShareButton.tsx
+++ b/src/components/NativeShareButton.tsx
@@ -82,10 +82,10 @@ export function NativeShareButton({
       disabled={isSharing}
       type="button"
       aria-label="Share video"
-      className={`inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white transition-colors duration-200 bg-blue-600 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
+      className={className || "btn btn-secondary"}
     >
       <svg
-        className="w-5 h-5 mr-2 -ml-1"
+        className="h-4 w-4"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"
@@ -99,7 +99,7 @@ export function NativeShareButton({
           d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
         />
       </svg>
-      {isSharing ? 'Sharing...' : 'Share Video'}
+      {isSharing ? 'Sharing...' : 'Share'}
     </button>
   );
 }
diff --git a/src/components/OnboardingTour.tsx b/src/components/OnboardingTour.tsx
index 861ab7de0..fff97c4e9 100644
--- a/src/components/OnboardingTour.tsx
+++ b/src/components/OnboardingTour.tsx
@@ -142,10 +142,11 @@ function Spotlight({ rect }: SpotlightProps) {
         y={r.top}
         width={r.width}
         height={r.height}
-        rx={8}
+        rx={4}
         fill="none"
-        stroke="rgba(99,102,241,0.8)"
-        strokeWidth={2}
+        stroke="var(--ivory)"
+        strokeOpacity={0.85}
+        strokeWidth={1.5}
       />
     </svg>
   );
@@ -197,29 +198,28 @@ function Tooltip({
       role="dialog"
       aria-modal="true"
       aria-label={`Onboarding step ${stepIndex + 1} of ${totalSteps}: ${step.title}`}
-      className="fixed z-[9999] w-80 rounded-xl shadow-2xl border
+      className="enter fixed z-[9999] w-80 rounded-panel shadow-[var(--shadow-overlay)] border
         bg-[var(--surface)]
         border-[var(--border)]
-        text-[var(--text)]
-        transition-all duration-200"
+        text-[var(--text)]"
       style={{ ...style }}
       tabIndex={-1}
     >
       {/* Progress bar */}
-      <div className="h-1 rounded-t-xl overflow-hidden bg-[var(--border)]">
+      <div className="h-[3px] rounded-t-panel overflow-hidden bg-[var(--border)]">
         <div
-          className="h-full bg-indigo-500 transition-all duration-300"
+          className="h-full bg-[var(--text)]"
           style={{ width: `${((stepIndex + 1) / totalSteps) * 100}%` }}
         />
       </div>
 
       <div className="p-5">
         {/* Step counter */}
-        <p className="text-xs font-semibold tracking-widest uppercase text-indigo-500 mb-1">
-          Step {stepIndex + 1} of {totalSteps}
+        <p className="marker mb-2">
+          ({stepIndex + 1} of {totalSteps})
         </p>
 
-        <h2 className="text-base font-semibold mb-1">{step.title}</h2>
+        <h2 className="serif text-2xl leading-tight mb-2">{step.title}</h2>
         <p className="text-sm text-[var(--muted)] leading-relaxed mb-4">
           {step.description}
         </p>
@@ -227,7 +227,7 @@ function Tooltip({
         <div className="flex items-center justify-between gap-3">
           <button
             onClick={onSkip}
-            className="text-xs text-[var(--muted)] hover:text-[var(--text)] transition-colors underline underline-offset-2"
+            className="link text-xs text-[var(--muted)] hover:text-[var(--text)]"
           >
             Skip tour
           </button>
@@ -236,12 +236,9 @@ function Tooltip({
             ref={(el) => {
               el?.focus();
             }}
-            className="px-4 py-2 rounded-lg text-sm font-medium
-              bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700
-              text-white transition-colors focus-visible:outline focus-visible:outline-2
-              focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+            className="btn btn-solid btn-sm"
           >
-            {isLast ? "Done" : "Next →"}
+            {isLast ? "Done" : "Next"}
           </button>
         </div>
       </div>
diff --git a/src/components/PresetSelector.tsx b/src/components/PresetSelector.tsx
index 76ee404c3..fb3c1f6cc 100644
--- a/src/components/PresetSelector.tsx
+++ b/src/components/PresetSelector.tsx
@@ -41,8 +41,8 @@ function RatioBox({
   return (
     <div
       className={cn(
-        "border-2 flex-shrink-0 rounded-sm transition-colors",
-        active ? "border-film-600" : "border-[var(--muted)] opacity-60",
+        "border-2 flex-shrink-0 rounded-sm",
+        active ? "border-[var(--selected)]" : "border-[var(--muted)] opacity-60",
       )}
       style={{ width: w, height: h }}
     />
@@ -151,18 +151,10 @@ export default function PresetSelector({ recipe, onChange }: Props) {
               aria-label={`${platform} ${label}`}
               aria-pressed={isActive}
               onClick={() => onChange({ preset })}
-              className={cn(
-                "flex flex-col items-center justify-center gap-1 py-2 px-1 rounded-lg border border-transparent text-center transition-all duration-150 cursor-pointer",
-                isActive
-                  ? "neo-inset text-film-600"
-                  : "neo-pressable text-[var(--muted)] hover:text-[var(--text)]",
-              )}
+              className="choice flex min-h-[52px] flex-col items-center justify-center gap-1 px-1 py-2 text-center"
             >
               {icon}
-              <span className={cn(
-                "text-[9px] font-heading font-bold uppercase tracking-wide leading-none",
-                isActive ? "text-film-700" : "text-[var(--muted)]",
-              )}>
+              <span className="text-2xs font-medium leading-none">
                 {label}
               </span>
             </button>
@@ -176,10 +168,11 @@ export default function PresetSelector({ recipe, onChange }: Props) {
         </div>
         <input
           type="text"
-          placeholder="Search formats..."
+          placeholder="Search presets"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          className="w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] py-2 pl-9 pr-3 text-sm font-heading text-[var(--text)] transition-shadow focus:outline-none focus:ring-2 focus:ring-film-400"
+          aria-label="Search presets"
+          className="field pl-9"
         />
       </div>
 
@@ -198,14 +191,11 @@ export default function PresetSelector({ recipe, onChange }: Props) {
                 type="button"
                 onClick={() => handlePresetSelect(preset.id)}
                 title={`${preset.label} — ${preset.width}×${preset.height} — ${getOrientationLabel(preset.width, preset.height)}`}
-                aria-label={`${preset.label.replaceAll(":", " is to ")} output ratio`}
+                // "1 : 1" reads as "one colon one"; two presets share 16 : 9, so
+                // the platform is part of the name too.
+                aria-label={`${preset.label.replaceAll(":", " is to ")} output ratio, ${preset.platform}`}
                 aria-pressed={active}
-                className={cn(
-                  "min-h-[44px] min-w-[44px] flex flex-col items-center justify-center gap-1.5 p-3 rounded-lg border border-transparent text-center transition-all duration-150 cursor-pointer",
-                  active
-                    ? "neo-inset"
-                    : "neo-pressable",
-                )}
+                className="choice flex min-h-[44px] min-w-[44px] flex-col items-center justify-center gap-1.5 p-2.5 text-center"
               >
                 <RatioBox
                   width={preset.width}
@@ -215,15 +205,12 @@ export default function PresetSelector({ recipe, onChange }: Props) {
 
                 <div className="min-w-0 w-full">
                   <p
-                    className={cn(
-                      "text-sm font-heading font-bold leading-tight",
-                      active ? "text-film-700" : "text-[var(--text)]",
-                    )}
+                    className="text-sm font-medium leading-tight text-[var(--text)]"
                   >
                     {preset.label}
                   </p>
 
-                  <p className="mt-0.5 text-[11px] leading-tight text-[var(--muted)]">
+                  <p className="mt-0.5 text-2xs leading-tight text-[var(--muted)]">
                     {preset.platform}
                   </p>
                 </div>
@@ -235,37 +222,26 @@ export default function PresetSelector({ recipe, onChange }: Props) {
         <button
           type="button"
           title="Custom — Set your own dimensions"
-          aria-label="Select custom dimensions preset"
           aria-pressed={recipe.preset === "custom"}
           onClick={() => handlePresetSelect("custom")}
-          className={cn(
-            "min-h-[44px] min-w-[44px] flex flex-col items-center justify-center gap-1.5 p-3 rounded-lg border border-transparent text-center transition-all duration-150 cursor-pointer",
-            recipe.preset === "custom"
-              ? "neo-inset"
-              : "neo-pressable",
-          )}
+          className="choice flex min-h-[44px] min-w-[44px] flex-col items-center justify-center gap-1.5 p-2.5 text-center"
         >
           <Settings2
             size={20}
             className={cn(
               "shrink-0",
               recipe.preset === "custom"
-                ? "text-film-600"
+                ? "text-[var(--selected)]"
                 : "text-[var(--muted)]",
             )}
           />
           <div className="min-w-0 w-full">
             <p
-              className={cn(
-                "text-sm font-heading font-bold",
-                recipe.preset === "custom"
-                  ? "text-film-700"
-                  : "text-[var(--text)]",
-              )}
+              className="text-sm font-medium leading-tight text-[var(--text)]"
             >
               Custom
             </p>
-            <p className="mt-0.5 text-[11px] leading-tight text-[var(--muted)]">
+            <p className="mt-0.5 text-2xs leading-tight text-[var(--muted)]">
               Set your own
             </p>
           </div>
@@ -273,11 +249,11 @@ export default function PresetSelector({ recipe, onChange }: Props) {
       </div>
 
       {recipe.preset === "custom" && (
-        <div className="mt-2 flex items-center gap-4 rounded-lg border border-[var(--border)] bg-[var(--surface)] p-4 shadow-sm animate-fade-in">
+        <div className="mt-2 flex items-end gap-3 rounded-control bg-[var(--surface-2)] p-3">
           <div className="flex-1">
             <label
               htmlFor="custom-width"
-              className="mb-1.5 block text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)]"
+              className="label mb-1 block"
             >
               Width
             </label>
@@ -291,12 +267,12 @@ export default function PresetSelector({ recipe, onChange }: Props) {
               step={2}
               value={recipe.customWidth}
               onChange={(e) => handleWidthChange(Number(e.target.value))}
-              className="w-full min-w-20 rounded-md border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm font-heading transition-all focus:outline-none focus:ring-2 focus:ring-film-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+              className="field tabular min-w-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
             />
           </div>
 
           <div className="flex h-full flex-col items-center justify-center">
-            <span className="font-heading text-sm font-medium text-[var(--muted)]">
+            <span className="pb-2 text-sm text-[var(--muted)]" aria-hidden="true">
               ×
             </span>
           </div>
@@ -304,7 +280,7 @@ export default function PresetSelector({ recipe, onChange }: Props) {
           <div className="flex-1">
             <label
               htmlFor="custom-height"
-              className="mb-1.5 block text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)]"
+              className="label mb-1 block"
             >
               Height
             </label>
@@ -318,15 +294,15 @@ export default function PresetSelector({ recipe, onChange }: Props) {
               step={2}
               value={recipe.customHeight}
               onChange={(e) => handleHeightChange(Number(e.target.value))}
-              className="w-full min-w-20 rounded-md border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm font-heading transition-all focus:outline-none focus:ring-2 focus:ring-film-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+              className="field tabular min-w-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
             />
           </div>
 
           <div className="hidden h-full flex-col justify-end sm:flex">
-            <span className="mb-1.5 block text-center text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)]">
+            <span className="label mb-1 block text-center">
               Ratio
             </span>
-            <div className="flex h-[38px] items-center rounded-md border border-[var(--border)] bg-[var(--bg)] px-3 text-xs font-medium text-film-700">
+            <div className="flex h-9 items-center whitespace-nowrap rounded-control border border-[var(--border)] px-2 text-xs text-[var(--text-secondary)]">
               {getOrientationLabel(
                 recipe.customWidth || 0,
                 recipe.customHeight || 0,
diff --git a/src/components/PrivacyBanner.tsx b/src/components/PrivacyBanner.tsx
index 5b600a63c..7ae5821e6 100644
--- a/src/components/PrivacyBanner.tsx
+++ b/src/components/PrivacyBanner.tsx
@@ -14,23 +14,25 @@ const DISMISS_DURATION_MS = 7 * 24 * 60 * 60 * 1000;
  * banner does not reappear for 7 days.
  */
 export default function PrivacyBanner() {
-  // Start hidden so the server-rendered markup matches the first client paint
-  // (static export → no hydration mismatch); reveal after reading localStorage.
-  const [visible, setVisible] = useState(false);
+  // Rendered visible in the static HTML so first-time visitors see no layout
+  // shift (it used to mount hidden and appear after hydration, pushing the
+  // upload area down — the page's only measured CLS). For visitors who
+  // dismissed it, the inline script in layout.tsx sets
+  // html[data-privacy-dismissed] before first paint, and CSS hides it.
+  const [visible, setVisible] = useState(true);
 
   useEffect(() => {
-    // Genuinely needs an effect: localStorage is unavailable during SSR, so
-    // this can't be computed as derived state without a hydration mismatch.
+    // Genuinely needs an effect: localStorage is unavailable during SSR.
+    // Removes the (already CSS-hidden) node for dismissed visitors.
     try {
       const raw = localStorage.getItem(DISMISS_KEY);
       const dismissedUntil = raw ? Number(raw) : 0;
-      if (!Number.isFinite(dismissedUntil) || Date.now() >= dismissedUntil) {
+      if (Number.isFinite(dismissedUntil) && Date.now() < dismissedUntil) {
         // eslint-disable-next-line react-hooks/set-state-in-effect
-        setVisible(true);
+        setVisible(false);
       }
     } catch {
-      // localStorage unavailable (private mode, blocked storage) — show anyway.
-      setVisible(true);
+      // localStorage unavailable (private mode, blocked storage) — keep showing.
     }
   }, []);
 
@@ -52,15 +54,19 @@ export default function PrivacyBanner() {
     <div
       role="note"
       aria-label="Privacy information"
-      className="relative flex items-start gap-3 rounded-xl border border-[var(--border)] bg-[var(--surface)] p-4 pr-11 animate-fade-in"
+      data-privacy-banner=""
+      // Hairlines above and below instead of a card; same footprint as before
+      // so the pre-paint hide/show never shifts layout.
+      className="enter relative flex items-start gap-3 border-y border-[var(--border)] py-4 pl-1 pr-11"
+      style={{ "--enter-delay": "320ms" } as React.CSSProperties}
     >
       <ShieldCheck
-        size={20}
+        size={18}
         aria-hidden="true"
-        className="mt-0.5 shrink-0 text-[var(--accent)]"
+        className="mt-0.5 shrink-0 text-[var(--success)]"
       />
       <div className="min-w-0 text-sm leading-relaxed">
-        <p className="font-heading font-bold text-[var(--text)]">
+        <p className="font-medium text-[var(--text)]">
           Your videos never leave your device.
         </p>
         <p className="mt-0.5 text-[var(--muted)]">
@@ -72,7 +78,8 @@ export default function PrivacyBanner() {
         type="button"
         onClick={dismiss}
         aria-label="Dismiss privacy notice"
-        className="absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-lg text-[var(--muted)] transition-colors hover:bg-[var(--border)] hover:text-[var(--text)]"
+        title="Dismiss for 7 days"
+        className="btn btn-ghost btn-icon btn-sm absolute right-2 top-2"
       >
         <X size={16} aria-hidden="true" />
       </button>
diff --git a/src/components/ProjectPanel.tsx b/src/components/ProjectPanel.tsx
index 7d0bd9f01..57cb7f4fe 100644
--- a/src/components/ProjectPanel.tsx
+++ b/src/components/ProjectPanel.tsx
@@ -19,8 +19,7 @@ function formatSavedAt(savedAt: number): string {
   return new Date(savedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
 
-const actionClass =
-  "inline-flex items-center justify-center gap-1.5 min-h-[36px] px-3 rounded-lg border border-[var(--border)] text-xs font-heading font-bold uppercase tracking-widest text-[var(--text)] hover:bg-[var(--border)] transition-colors";
+const actionClass = "btn btn-secondary btn-sm w-full";
 
 interface PanelProps {
   hasFile: boolean;
@@ -90,17 +89,14 @@ export default function ProjectPanel({
   return (
     <section
       aria-labelledby="project-panel-title"
-      className="rounded-xl border border-[var(--border)] bg-[var(--surface)] p-4 space-y-3"
+      className="panel space-y-3 p-5"
     >
-      <h2
-        id="project-panel-title"
-        className="flex items-center gap-2 text-[10px] font-heading font-bold uppercase tracking-widest text-[var(--muted)]"
-      >
-        <HardDrive size={12} aria-hidden="true" />
+      <h2 id="project-panel-title" className="flex items-center gap-2 text-sm font-medium text-[var(--text)]">
+        <HardDrive size={15} aria-hidden="true" className="text-[var(--muted)]" />
         Saved on this device
       </h2>
 
-      <div className="space-y-1.5 text-xs text-[var(--muted)] leading-relaxed">
+      <div className="space-y-1.5 text-sm leading-6 text-[var(--muted)]">
         <p>
           Your edit settings are saved in this browser as you work, so you can pick up after a
           refresh. Nothing is uploaded.
@@ -137,7 +133,7 @@ export default function ProjectPanel({
         />
       </div>
 
-      <div aria-live="polite" className="text-xs">
+      <div aria-live="polite" className="text-sm">
         {message && (
           <p className={message.tone === "error" ? "text-[var(--error)]" : "text-[var(--text)]"}>
             {message.text}
@@ -146,8 +142,8 @@ export default function ProjectPanel({
       </div>
 
       {confirmingDelete ? (
-        <div className="rounded-lg border border-[var(--error-border)] bg-[var(--error-bg)] p-3 space-y-2">
-          <p className="text-xs text-[var(--text)]">
+        <div className="space-y-3 rounded-[var(--radius-panel)] border border-[var(--error-border)] bg-[var(--error-bg)] p-4">
+          <p className="text-sm leading-6 text-[var(--text)]">
             Delete the saved edits and the stored copy of the video from this browser, and close the
             current video? Project files you saved are not affected.
           </p>
@@ -159,14 +155,14 @@ export default function ProjectPanel({
                 setConfirmingDelete(false);
                 setMessage({ tone: "ok", text: "Saved data deleted. The editor has been reset." });
               }}
-              className="min-h-[36px] px-3 rounded-lg bg-[var(--error)] text-white text-xs font-heading font-bold uppercase tracking-widest"
+              className="btn btn-danger btn-sm"
             >
               Delete
             </button>
             <button
               type="button"
               onClick={() => setConfirmingDelete(false)}
-              className="min-h-[36px] px-3 rounded-lg border border-[var(--border)] text-xs font-heading font-bold uppercase tracking-widest text-[var(--text)]"
+              className="btn btn-secondary btn-sm"
             >
               Cancel
             </button>
@@ -177,9 +173,9 @@ export default function ProjectPanel({
           type="button"
           onClick={() => setConfirmingDelete(true)}
           disabled={disabled}
-          className="inline-flex items-center gap-1.5 text-xs font-heading font-bold uppercase tracking-widest text-[var(--muted)] hover:text-[var(--error)] transition-colors"
+          className="btn btn-ghost btn-sm -ml-3 hover:text-[var(--error)]"
         >
-          <Trash2 size={12} aria-hidden="true" />
+          <Trash2 size={14} aria-hidden="true" />
           Delete saved data
         </button>
       )}
@@ -198,12 +194,12 @@ export function RecoveryNotice({ recovery, onDiscard }: RecoveryProps) {
   return (
     <div
       role="status"
-      className="rounded-xl border border-film-200 bg-film-50 p-4 text-sm text-film-800 space-y-2"
+      className="panel space-y-2 p-5 text-sm leading-6 text-[var(--text)]"
     >
-      <p className="font-heading font-bold">
+      <p className="serif text-xl">
         {recovery.origin === "session" ? "Pick up where you left off" : "Choose the project's video"}
       </p>
-      <p className="text-film-700">
+      <p className="text-[var(--text-secondary)]">
         {recovery.origin === "session"
           ? "Your edits were saved, but this browser no longer has the video. "
           : "Project files don't include the video. "}
@@ -214,7 +210,7 @@ export function RecoveryNotice({ recovery, onDiscard }: RecoveryProps) {
       <button
         type="button"
         onClick={onDiscard}
-        className="text-xs font-heading font-bold uppercase tracking-widest text-film-600 hover:underline"
+        className="btn btn-ghost btn-sm -ml-3"
       >
         Discard saved edits
       </button>
diff --git a/src/components/RotateControl.tsx b/src/components/RotateControl.tsx
index da58d6789..1a5381d4c 100644
--- a/src/components/RotateControl.tsx
+++ b/src/components/RotateControl.tsx
@@ -21,23 +21,17 @@ export default function RotateControl({ recipe, onChange }: Props) {
             type="button"
             key={deg}
             onClick={() => onChange({ rotate: deg })}
-            aria-label={`Rotate video to ${deg} degrees`}
+            aria-label={`${deg}° rotation`}
             aria-pressed={active}
-            className={cn(
-              "flex flex-1 min-h-[44px] min-w-[44px] flex-col items-center gap-1.5 rounded-lg border px-3 py-3 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]",
-              active
-                ? "border-film-500 bg-film-50 text-film-700 font-heading font-semibold"
-                : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-film-300 hover:bg-film-50/30"
-            )}
+            className="choice tabular flex min-h-[44px] min-w-[44px] flex-1 flex-col items-center gap-1 px-3 py-2.5"
           >
             <RotateCw
               size={15}
               aria-hidden="true"
               style={{ transform: `rotate(${deg}deg)`, transformOrigin: "center" }}
-              className="transition-transform"
+              className={cn(active ? "text-[var(--selected)]" : "text-[var(--muted)]")}
             />
-            <span className="sr-only">Rotate video to {deg} degrees</span>
-            {deg}
+            {deg}°
           </button>
         );
       })}
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
index e27063420..f33c24a7b 100644
--- a/src/components/ScrollToTop.tsx
+++ b/src/components/ScrollToTop.tsx
@@ -6,11 +6,12 @@ export default function ScrollToTop() {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
+    // Passive, and setState bails out when the boolean hasn't changed.
     const handleScroll = () => {
       setIsVisible(window.scrollY > 300);
     };
 
-    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("scroll", handleScroll, { passive: true });
 
     return () => {
       window.removeEventListener("scroll", handleScroll);
@@ -18,9 +19,10 @@ export default function ScrollToTop() {
   }, []);
 
   const scrollToTop = () => {
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     window.scrollTo({
       top: 0,
-      behavior: "smooth",
+      behavior: reduceMotion ? "auto" : "smooth",
     });
   };
 
@@ -32,9 +34,9 @@ export default function ScrollToTop() {
       onClick={scrollToTop}
       aria-label="Scroll to top"
       className="
-        fixed bottom-5 right-5 z-50
+        fixed bottom-24 right-4 z-30
         h-12 w-12 rounded-full
-        bg-[var(--accent)] text-white shadow-[var(--shadow)]
+        bg-[var(--accent)] text-[var(--on-accent)] shadow-[var(--shadow)]
         flex items-center justify-center
         md:hidden
       "
diff --git a/src/components/TextControls.tsx b/src/components/TextControls.tsx
index 48cbef3b6..8218dfb85 100644
--- a/src/components/TextControls.tsx
+++ b/src/components/TextControls.tsx
@@ -98,7 +98,7 @@ export default function TextControls({
               key={overlay.id}
               className={`flex items-center justify-between gap-2 p-2 rounded border transition-colors ${
                 selectedTextId === overlay.id
-                  ? "border-film-500 bg-film-600/10"
+                  ? "border-[var(--selected)] bg-[var(--selected-bg)]"
                   : "border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--border)]"
               }`}
             >
@@ -112,7 +112,7 @@ export default function TextControls({
               <button
                 type="button"
                 onClick={() => handleRemoveText(overlay.id)}
-                className="w-5 h-5 flex items-center justify-center rounded text-red-400 hover:bg-red-500/10 transition-colors"
+                className="w-5 h-5 flex items-center justify-center rounded text-[var(--error)] hover:bg-[var(--error-bg)] transition-colors"
                 aria-label={`Remove text overlay ${idx + 1}`}
               >
                 <Trash2 size={13} />
@@ -202,7 +202,7 @@ export default function TextControls({
                   }
                   className={`px-2 py-1.5 text-xs rounded border transition-colors ${
                     selectedOverlay.fontWeight === weight
-                      ? "border-film-500 bg-film-600/10 text-film-400"
+                      ? "border-[var(--selected)] bg-[var(--selected-bg)] text-[var(--text)]"
                       : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--border)]"
                   }`}
                   style={{
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index bf5498d50..d5d786702 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -10,15 +10,21 @@ import {
 } from "react";
 
 type Theme = "light" | "dark";
+type Contrast = "standard" | "more";
 
 interface ThemeContextValue {
   theme: Theme;
   toggleTheme: () => void;
   setTheme: (theme: Theme) => void;
+  contrast: Contrast;
+  toggleContrast: () => void;
 }
 
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 
+/** How long colours crossfade after an explicit theme/contrast change. */
+const THEME_TRANSITION_MS = 200;
+
 function getCurrentTheme(): Theme {
   if (typeof window !== "undefined") {
     const savedTheme = localStorage.getItem("theme");
@@ -35,8 +41,33 @@ function getCurrentTheme(): Theme {
   return "light";
 }
 
+function getCurrentContrast(): Contrast {
+  if (typeof window !== "undefined") {
+    const saved = localStorage.getItem("contrast");
+    if (saved === "more" || saved === "standard") return saved;
+    if (window.matchMedia("(prefers-contrast: more)").matches) return "more";
+  }
+  return "standard";
+}
+
+/**
+ * Colour transitions are enabled only for a short window around an explicit
+ * toggle — never permanently on every element, which made ordinary
+ * interaction pay for transitions it didn't need.
+ */
+function withThemeTransition(apply: () => void) {
+  const root = document.documentElement;
+  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (!reduceMotion) root.classList.add("theme-transition");
+  apply();
+  if (!reduceMotion) {
+    window.setTimeout(() => root.classList.remove("theme-transition"), THEME_TRANSITION_MS);
+  }
+}
+
 export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>("light");;
+  const [theme, setThemeState] = useState<Theme>("light");
+  const [contrast, setContrastState] = useState<Contrast>("standard");
 
   const applyTheme = useCallback(
     (next: Theme, persist = true) => {
@@ -53,12 +84,25 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     []
   );
 
+  const applyContrast = useCallback((next: Contrast, persist = true) => {
+    setContrastState(next);
+    if (next === "more") {
+      document.documentElement.dataset.theme = "high-contrast";
+    } else {
+      delete document.documentElement.dataset.theme;
+    }
+    if (persist) {
+      localStorage.setItem("contrast", next);
+    }
+  }, []);
+
   useEffect(() => {
     // Genuinely needs an effect: getCurrentTheme() reads localStorage and
     // matchMedia, browser-only APIs unavailable during SSR/render.
     const currentTheme = getCurrentTheme();
     // eslint-disable-next-line react-hooks/set-state-in-effect
     applyTheme(currentTheme, false);
+    applyContrast(getCurrentContrast(), false);
 
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e: MediaQueryListEvent) => {
@@ -66,21 +110,35 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
         applyTheme(e.matches ? "dark" : "light", false);
       }
     };
+    const contrastMq = window.matchMedia("(prefers-contrast: more)");
+    const contrastHandler = (e: MediaQueryListEvent) => {
+      if (!localStorage.getItem("contrast")) {
+        applyContrast(e.matches ? "more" : "standard", false);
+      }
+    };
     mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [applyTheme]);
+    contrastMq.addEventListener("change", contrastHandler);
+    return () => {
+      mq.removeEventListener("change", handler);
+      contrastMq.removeEventListener("change", contrastHandler);
+    };
+  }, [applyTheme, applyContrast]);
 
   const toggleTheme = useCallback(() => {
-    applyTheme(theme === "light" ? "dark" : "light");
+    withThemeTransition(() => applyTheme(theme === "light" ? "dark" : "light"));
   }, [theme, applyTheme]);
 
   const setTheme = useCallback(
-    (next: Theme) => applyTheme(next),
+    (next: Theme) => withThemeTransition(() => applyTheme(next)),
     [applyTheme]
   );
 
+  const toggleContrast = useCallback(() => {
+    withThemeTransition(() => applyContrast(contrast === "more" ? "standard" : "more"));
+  }, [contrast, applyContrast]);
+
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, contrast, toggleContrast }}>
       {children}
     </ThemeContext.Provider>
   );
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index eb6f25efc..ded2e3d26 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { Contrast, Moon, Sun } from "lucide-react";
 import { useTheme } from "./ThemeProvider";
 
-export function ThemeToggle() {
-  const { theme, toggleTheme } = useTheme();
+function useMounted() {
   const [mounted, setMounted] = useState(false);
   useEffect(() => {
     // Genuinely needs an effect: "has this mounted on the client" can't be
@@ -12,55 +12,65 @@ export function ThemeToggle() {
     // eslint-disable-next-line react-hooks/set-state-in-effect
     setMounted(true);
   }, []);
+  return mounted;
+}
+
+// Hairline circles, matching weight and size in the header.
+const iconButton = "btn btn-secondary btn-icon btn-sm";
+
+export function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+  const mounted = useMounted();
 
   const isDark = theme === "dark";
-  
+
   if (!mounted) {
     return (
       <button
         type="button"
         tabIndex={-1}
         aria-label="Toggle theme"
-        className="
-          relative flex items-center justify-center
-          w-9 h-9 rounded-full
-          bg-[var(--surface)]
-          border border-[var(--border)]
-        "
+        className={iconButton}
       />
     );
   }
 
+  const label = isDark ? "Switch to light mode" : "Switch to dark mode";
+
+  return (
+    <button
+      type="button"
+      suppressHydrationWarning={true}
+      onClick={toggleTheme}
+      aria-label={label}
+      title={label}
+      className={iconButton}
+    >
+      {isDark ? <Moon size={14} aria-hidden="true" /> : <Sun size={14} aria-hidden="true" />}
+    </button>
+  );
+}
+
+/** Toggles the high-contrast palette (defaults to the OS `prefers-contrast` setting). */
+export function ContrastToggle() {
+  const { contrast, toggleContrast } = useTheme();
+  const mounted = useMounted();
+  const isMore = contrast === "more";
+
+  if (!mounted) {
+    return <button type="button" tabIndex={-1} aria-label="Toggle high contrast" className={iconButton} />;
+  }
+
   return (
     <button
-       type="button"
-       suppressHydrationWarning={true}
-       onClick={toggleTheme}
-       aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-      className="
-        relative flex items-center justify-center
-        w-9 h-9 rounded-full
-        bg-[var(--surface)]
-        text-[var(--text)]
-        border border-[var(--border)]
-        hover:border-[var(--accent)] hover:bg-[var(--accent-muted)]
-        focus:outline-none focus:ring-2 focus:ring-[var(--accent)] focus:ring-offset-2
-        focus:ring-offset-[var(--bg)]
-        transition-all duration-200
-      "
+      type="button"
+      onClick={toggleContrast}
+      aria-pressed={isMore}
+      aria-label="High contrast"
+      title={isMore ? "Turn off high contrast" : "Turn on high contrast"}
+      className={iconButton}
     >
-    {!mounted ? (
-        <div className="w-4 h-4" /> 
-      ) : isDark ? (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4" aria-hidden="true">
-          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-        </svg>
-      ) : (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4" aria-hidden="true">
-          <circle cx="12" cy="12" r="4" />
-          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
-        </svg>
-      )}
+      <Contrast size={14} aria-hidden="true" />
     </button>
   );
 }
diff --git a/src/components/ThumbnailStrip.tsx b/src/components/ThumbnailStrip.tsx
index 21b1bfc05..c7a868245 100644
--- a/src/components/ThumbnailStrip.tsx
+++ b/src/components/ThumbnailStrip.tsx
@@ -1,461 +1,254 @@
 "use client";
 
 import Image from "next/image";
-import { useEffect, useRef, useState, useCallback } from "react";
-
-interface Thumbnail {
-  time: number;
-  dataUrl: string;
-}
+import { memo, useEffect, useRef, useState, type RefObject } from "react";
+import { cn } from "@/lib/utils";
+import {
+  computeThumbnailTimes,
+  generateThumbnails,
+  pickThumbnailInterval,
+  type ThumbnailFrame,
+} from "@/lib/thumbnails";
+import { trackAction, trackDuration } from "@/lib/telemetry";
 
 interface ThumbnailStripProps {
   videoSrc: string | null;
   duration: number;
-  currentTime: number;
+  /**
+   * The preview <video>. The strip listens to it directly for the playhead
+   * position instead of receiving `currentTime` as a prop — that prop used to
+   * re-render the whole editor on every `timeupdate` during playback.
+   */
+  videoRef?: RefObject<HTMLVideoElement | null>;
   trimStart?: number;
   trimEnd?: number;
   onSeek: (time: number) => void;
   intervalSeconds?: number;
 }
 
-export default function ThumbnailStrip({
+type GenerationState =
+  | { status: "idle" }
+  | { status: "generating"; completed: number; total: number }
+  | { status: "done"; skipped: number }
+  | { status: "error" };
+
+function formatTime(seconds: number) {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+/** Index of the last frame at or before `time` (frames are sorted by time). */
+export function findActiveFrameIndex(frames: { time: number }[], time: number): number {
+  let lo = 0;
+  let hi = frames.length - 1;
+  let found = -1;
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    if ((frames[mid]?.time ?? Infinity) <= time) {
+      found = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  return found;
+}
+
+function ThumbnailStrip({
   videoSrc,
   duration,
-  currentTime,
+  videoRef,
   trimStart = 0,
   trimEnd,
   onSeek,
-  intervalSeconds = 5,
+  intervalSeconds,
 }: ThumbnailStripProps) {
-  const [thumbnails, setThumbnails] = useState<Thumbnail[]>([]);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-  const stripRef = useRef<HTMLDivElement>(null);
-  const offscreenVideoRef = useRef<HTMLVideoElement | null>(null);
-  const lastRunIdRef = useRef(0);
-  const objectUrlsRef = useRef<string[]>([]);
+  const [frames, setFrames] = useState<ThumbnailFrame[]>([]);
+  const [state, setState] = useState<GenerationState>({ status: "idle" });
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const activeIndexRef = useRef(-1);
+  const [attempt, setAttempt] = useState(0);
+  const framesRef = useRef<ThumbnailFrame[]>([]);
 
   const effectiveTrimEnd = trimEnd ?? duration;
+  const interval = intervalSeconds ?? pickThumbnailInterval(duration);
 
-  const revokeAllObjectUrls = useCallback(() => {
-    objectUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
-    objectUrlsRef.current = [];
-  }, []);
-
-  const cancelThumbnailRun = useCallback(() => {
-    lastRunIdRef.current += 1;
-  }, []);
-
-  const generateThumbnails = useCallback(async () => {
+  // Generate frames. Re-runs only when the source, duration or interval
+  // changes — never on editing-slider changes.
+  useEffect(() => {
     if (!videoSrc || duration <= 0) return;
 
-    const runId = ++lastRunIdRef.current;
-    setIsGenerating(true);
-    revokeAllObjectUrls();
-    setThumbnails([]);
-    setProgress(0);
-
-    const video = document.createElement("video");
-    offscreenVideoRef.current = video;
-
-    try {
-      video.src = videoSrc;
-      video.crossOrigin = "anonymous";
-      video.muted = true;
-      video.preload = "auto";
-
-      await new Promise<void>((resolve, reject) => {
-        video.onloadedmetadata = () => resolve();
-        video.onerror = () => reject(new Error("Video load failed"));
-        video.load();
-      });
-
-      if (lastRunIdRef.current !== runId) return;
-
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-
-      const thumbW = 160;
-      const thumbH = 90;
-      canvas.width = thumbW;
-      canvas.height = thumbH;
-
-      const times: number[] = [];
-      const seenTimestamps = new Set<string>();
-
-      for (let t = 0; t <= duration; t += intervalSeconds) {
-        const roundedTime = Math.min(t, duration - 0.1);
-        const formatted = formatTime(roundedTime);
-        
-        if (!seenTimestamps.has(formatted)) {
-          seenTimestamps.add(formatted);
-          times.push(roundedTime);
-        }
-      }
-
-      // Check if the final second boundary is missing from the timeline display
-      const finalTime = duration - 0.1;
-      const finalFormatted = formatTime(finalTime);
-      if (!seenTimestamps.has(finalFormatted) && finalTime > (times[times.length - 1] ?? 0)) {
-        times.push(finalTime);
-      }
-
-      const captured: Thumbnail[] = [];
-
-      for (let i = 0; i < times.length; i++) {
-        if (lastRunIdRef.current !== runId) break;
-
-        const time = times[i] ?? 0;
-        await new Promise<void>((resolve) => {
-          const onSeeked = async () => {
-            video.removeEventListener("seeked", onSeeked);
-
-            if (lastRunIdRef.current !== runId) {
-              resolve();
-              return;
-            }
-
-            ctx.drawImage(video, 0, 0, thumbW, thumbH);
-
-            try {
-              const blob = await new Promise<Blob | null>((blobResolve) => {
-                canvas.toBlob((b) => blobResolve(b), "image/jpeg", 0.7);
-              });
-              if (blob && lastRunIdRef.current === runId) {
-                const url = URL.createObjectURL(blob);
-                objectUrlsRef.current.push(url);
-                captured.push({ time, dataUrl: url });
-
-                if (i === times.length - 1 || captured.length % 5 === 0) {
-                  setThumbnails([...captured]);
-                }
-              }
-            } catch (err) {
-              console.error("Failed to generate thumbnail blob", err);
-            }
-
-            setProgress(Math.round(((i + 1) / times.length) * 100));
-            resolve();
-          };
-          video.addEventListener("seeked", onSeeked);
-          video.currentTime = time;
+    const controller = new AbortController();
+    const times = computeThumbnailTimes(duration, interval);
+    const startedAt = performance.now();
+    // Genuinely needs an effect: drives async canvas/video capture work.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setFrames([]);
+    setState({ status: "generating", completed: 0, total: times.length });
+
+    generateThumbnails(videoSrc, times, {
+      signal: controller.signal,
+      onBatch: (batch, completed, total) => {
+        if (controller.signal.aborted) return;
+        setFrames(batch);
+        setState({ status: "generating", completed, total });
+      },
+    })
+      .then(({ frames: result, skipped }) => {
+        if (controller.signal.aborted) {
+          result.forEach((f) => URL.revokeObjectURL(f.url));
+          return;
+        }
+        framesRef.current = result;
+        setFrames(result);
+        setState({ status: "done", skipped });
+        trackDuration("thumbnails_generated", startedAt, {
+          frames: result.length,
+          skipped,
         });
-      }
+      })
+      .catch((err: unknown) => {
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        setFrames([]);
+        setState({ status: "error" });
+        trackAction("thumbnails_failed", {
+          reason: err instanceof Error && /timed out/i.test(err.message) ? "timeout" : "decode",
+        });
+      });
 
-      if (lastRunIdRef.current === runId) {
-        setIsGenerating(false);
-      }
-    } finally {
-      video.src = "";
-      if (offscreenVideoRef.current === video) {
-        offscreenVideoRef.current = null;
-      }
-    }
-  }, [videoSrc, duration, intervalSeconds, revokeAllObjectUrls]);
+    return () => {
+      controller.abort();
+      // Release frames from the previous source; aborted in-flight batches
+      // are revoked by generateThumbnails itself.
+      framesRef.current.forEach((f) => URL.revokeObjectURL(f.url));
+      framesRef.current = [];
+    };
+  }, [videoSrc, duration, interval, attempt]);
 
+  // Playhead: update state only when the active frame actually changes.
   useEffect(() => {
-    if (videoSrc && duration > 0) {
-      // Genuinely needs an effect: triggers async canvas/video capture work
-      // (seeking, drawing frames, Blob creation), not a derivable value.
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      generateThumbnails();
-    }
+    const video = videoRef?.current;
+    if (!video || frames.length === 0) return;
+    // Compared against a ref so an unchanged index never calls setState
+    // (a functional updater returning the same value can still re-render).
+    const sync = () => {
+      const next = findActiveFrameIndex(frames, video.currentTime);
+      if (next === activeIndexRef.current) return;
+      activeIndexRef.current = next;
+      setActiveIndex(next);
+    };
+    sync();
+    video.addEventListener("timeupdate", sync);
+    video.addEventListener("seeked", sync);
     return () => {
-      cancelThumbnailRun();
-      revokeAllObjectUrls();
+      video.removeEventListener("timeupdate", sync);
+      video.removeEventListener("seeked", sync);
     };
-  }, [cancelThumbnailRun, generateThumbnails, revokeAllObjectUrls, videoSrc, duration]);
-
-  const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60);
-    const s = Math.floor(seconds % 60);
-    return `${m}:${s.toString().padStart(2, "0")}`;
-  };
-
-  const activeIndex = thumbnails.findIndex(
-    (t, i) =>
-      currentTime >= t.time &&
-      (i === thumbnails.length - 1 || currentTime < (thumbnails[i + 1]?.time ?? Infinity))
-  );
+  }, [videoRef, frames]);
 
   if (!videoSrc) return null;
 
+  const generating = state.status === "generating";
+  const percent =
+    state.status === "generating" && state.total > 0
+      ? Math.round((state.completed / state.total) * 100)
+      : 0;
+
   return (
-    <div className="thumbnail-strip-wrapper">
-      <div className="strip-header">
-        <span className="strip-label">
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-            <rect x="0.5" y="0.5" width="11" height="11" rx="1.5" stroke="currentColor" />
-            <rect x="3" y="2.5" width="1.5" height="7" rx="0.5" fill="currentColor" />
-            <rect x="7.5" y="2.5" width="1.5" height="7" rx="0.5" fill="currentColor" />
-          </svg>
-          Frames
-        </span>
-        {isGenerating && (
-          <span className="strip-progress">
-            <span
-              className="progress-bar"
-              style={{ width: `${progress}%` }}
-            />
-            <span className="progress-text">{progress}%</span>
-          </span>
+    <section aria-label="Frame previews" className="w-full">
+      <div className="flex items-center gap-3 pb-2">
+        <h3 className="marker text-sm">
+          <span aria-hidden="true">(</span>Frames<span aria-hidden="true">)</span>
+        </h3>
+        {generating && (
+          <div className="flex flex-1 items-center gap-2" aria-live="polite">
+            <div
+              className="progress-track h-1 max-w-[160px]"
+              role="progressbar"
+              aria-label="Generating frame previews"
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-valuenow={percent}
+            >
+              <div className="progress-fill" style={{ transform: `scaleX(${percent / 100})` }} />
+            </div>
+            <span className="tabular text-2xs text-[var(--muted)]">{percent}%</span>
+          </div>
         )}
-        {!isGenerating && thumbnails.length > 0 && (
-          <span className="strip-meta">
-            {thumbnails.length} frames · every {intervalSeconds}s
+        {state.status === "done" && frames.length > 0 && (
+          <span className="tabular ml-auto text-2xs text-[var(--muted)]">
+            {frames.length} frames, every {Math.round(interval)}s
+            {state.skipped > 0 && ` (${state.skipped} skipped)`}
           </span>
         )}
       </div>
 
-      <div className="strip-scroll-area" ref={stripRef}>
-        {thumbnails.length === 0 && isGenerating && (
-          <div className="strip-skeleton">
-            {Array.from({ length: 8 }).map((_, i) => (
-              <div key={i} className="skeleton-thumb" style={{ animationDelay: `${i * 80}ms` }} />
-            ))}
-          </div>
-        )}
-
-        {thumbnails.length > 0 && (
-          <div className="strip-inner">
-            {thumbnails.map((thumb, i) => {
+      {state.status === "error" ? (
+        <div className="callout callout-info items-center justify-between text-xs">
+          <span>Frame previews couldn&apos;t be generated for this file. Playback and export still work.</span>
+          <button type="button" className="btn btn-secondary btn-sm" onClick={() => setAttempt((a) => a + 1)}>
+            Try again
+          </button>
+        </div>
+      ) : (
+        <div className="overflow-x-auto overflow-y-hidden pb-1 [scrollbar-width:thin]">
+          <div className="flex gap-1">
+            {frames.length === 0 &&
+              generating &&
+              Array.from({ length: 8 }).map((_, i) => (
+                <div
+                  key={i}
+                  aria-hidden="true"
+                  className="h-[54px] w-24 shrink-0 rounded-[3px] bg-[var(--surface-2)]"
+                />
+              ))}
+            {frames.map((thumb, i) => {
               const isActive = i === activeIndex;
-              const inTrimRange =
-                thumb.time >= trimStart && thumb.time <= effectiveTrimEnd;
-              const isHovered = hoveredIndex === i;
-
+              const inTrimRange = thumb.time >= trimStart && thumb.time <= effectiveTrimEnd;
+              const label = `Seek to ${formatTime(thumb.time)}`;
               return (
                 <button
                   key={thumb.time}
-                  className={`thumb-btn ${isActive ? "active" : ""} ${
-                    !inTrimRange ? "out-of-range" : ""
-                  } ${isHovered ? "hovered" : ""}`}
+                  type="button"
                   onClick={() => onSeek(thumb.time)}
-                  onMouseEnter={() => setHoveredIndex(i)}
-                  onMouseLeave={() => setHoveredIndex(null)}
-                  title={`Seek to ${formatTime(thumb.time)}`}
+                  aria-label={label}
+                  aria-current={isActive ? "true" : undefined}
+                  title={label}
+                  className={cn(
+                    "group relative h-[54px] w-24 shrink-0 overflow-hidden rounded-[3px] border-2 bg-[var(--viewer)]",
+                    "transition-[border-color] duration-fast",
+                    // Red marks the playhead frame, as it marks the playhead elsewhere.
+                    isActive ? "border-[var(--accent)]" : "border-transparent hover:border-[var(--border-strong)]"
+                  )}
                 >
                   <Image
-                    src={thumb.dataUrl}
-                    alt={`Frame at ${formatTime(thumb.time)}`}
+                    src={thumb.url}
+                    alt=""
                     width={160}
                     height={90}
                     unoptimized
                     draggable={false}
+                    className={cn(
+                      // Hover-only zoom on the thumbnail image; nothing animates
+                      // during playback except the active border colour.
+                      "h-full w-full object-cover transition-transform duration-base ease-out group-hover:scale-[1.06]",
+                      !inTrimRange && "opacity-35 grayscale"
+                    )}
                   />
-                  <span className="thumb-time">{formatTime(thumb.time)}</span>
-                  {isActive && <span className="active-indicator" />}
+                  <span className="tabular pointer-events-none absolute bottom-0.5 left-1 rounded bg-black/60 px-1 text-[10px] leading-4 text-white">
+                    {formatTime(thumb.time)}
+                  </span>
                 </button>
               );
             })}
           </div>
-        )}
-      </div>
-
-      <style>{`
-        .thumbnail-strip-wrapper {
-          width: 100%;
-          background: var(--surface);
-          border: 1px solid var(--border);
-          border-radius: var(--radius);
-          overflow: hidden;
-          font-family: 'SF Mono', 'Fira Code', monospace;
-          box-shadow: var(--shadow);
-        }
-
-        .strip-header {
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          padding: 8px 14px;
-          background: var(--bg);
-          border-bottom: 1px solid var(--border);
-        }
-
-        .strip-label {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          font-size: 10px;
-          font-weight: 600;
-          letter-spacing: 0.08em;
-          text-transform: uppercase;
-          color: var(--muted);
-        }
-
-        .strip-progress {
-          position: relative;
-          flex: 1;
-          height: 3px;
-          background: var(--border);
-          border-radius: 2px;
-          overflow: hidden;
-          display: flex;
-          align-items: center;
-        }
-
-        .progress-bar {
-          position: absolute;
-          left: 0;
-          top: 0;
-          height: 100%;
-          background: var(--accent);
-          border-radius: 2px;
-          transition: width 0.2s ease;
-        }
-
-        .progress-text {
-          position: absolute;
-          right: -28px;
-          font-size: 9px;
-          color: var(--muted);
-          white-space: nowrap;
-        }
-
-        .strip-meta {
-          margin-left: auto;
-          font-size: 10px;
-          color: var(--muted);
-        }
-
-        .strip-scroll-area {
-          overflow-x: auto;
-          overflow-y: hidden;
-          padding: 10px 10px 6px;
-          scrollbar-width: thin;
-          scrollbar-color: var(--border) transparent;
-        }
-
-        .strip-scroll-area::-webkit-scrollbar {
-          height: 4px;
-        }
-
-        .strip-scroll-area::-webkit-scrollbar-track {
-          background: transparent;
-        }
-
-        .strip-scroll-area::-webkit-scrollbar-thumb {
-          background: var(--border);
-          border-radius: 2px;
-        }
-
-        .strip-skeleton {
-          display: flex;
-          gap: 6px;
-        }
-
-        .skeleton-thumb {
-          width: 106px;
-          height: 60px;
-          border-radius: 6px;
-          background: linear-gradient(90deg, var(--bg) 25%, var(--surface) 50%, var(--bg) 75%);
-          background-size: 200% 100%;
-          animation: shimmer 1.4s infinite;
-          flex-shrink: 0;
-        }
-
-        @keyframes shimmer {
-          0% { background-position: 200% 0; }
-          100% { background-position: -200% 0; }
-        }
-
-        .strip-inner {
-          display: flex;
-          gap: 6px;
-          align-items: flex-end;
-        }
-
-        .thumb-btn {
-          position: relative;
-          padding: 0;
-          border: none;
-          background: none;
-          cursor: pointer;
-          border-radius: 6px;
-          overflow: hidden;
-          flex-shrink: 0;
-          width: 106px;
-          height: 60px;
-          transition: transform 0.15s ease, box-shadow 0.15s ease;
-          outline: 2px solid transparent;
-          outline-offset: 1px;
-        }
-
-        .thumb-btn img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-          display: block;
-          border-radius: 6px;
-          filter: brightness(0.85);
-          transition: filter 0.15s ease;
-        }
-
-        .thumb-btn:hover img,
-        .thumb-btn.hovered img {
-          filter: brightness(1.05);
-        }
-
-        .thumb-btn:hover,
-        .thumb-btn.hovered {
-          transform: translateY(-3px) scale(1.04);
-          box-shadow: var(--shadow);
-          outline-color: var(--accent);
-          z-index: 2;
-        }
-
-        .thumb-btn.active {
-          outline-color: var(--accent);
-          box-shadow: 0 0 0 2px var(--accent), var(--shadow);
-          z-index: 3;
-        }
-
-        .thumb-btn.active img {
-          filter: brightness(1.1);
-        }
-
-        .thumb-btn.out-of-range img {
-          filter: brightness(0.35) saturate(0.2);
-        }
-
-        .thumb-time {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          padding: 3px 4px 3px;
-          background: linear-gradient(transparent, var(--bg));
-          font-size: 9px;
-          color: var(--muted);
-          text-align: center;
-          letter-spacing: 0.04em;
-          pointer-events: none;
-          border-radius: 0 0 6px 6px;
-        }
-
-        .thumb-btn.active .thumb-time {
-          color: var(--text);
-        }
-
-        .active-indicator {
-          position: absolute;
-          top: 4px;
-          right: 4px;
-          width: 6px;
-          height: 6px;
-          border-radius: 50%;
-          background: var(--accent);
-          box-shadow: 0 0 6px var(--accent);
-          animation: pulse-dot 1.5s ease-in-out infinite;
-        }
-
-        @keyframes pulse-dot {
-          0%, 100% { opacity: 1; transform: scale(1); }
-          50% { opacity: 0.5; transform: scale(0.7); }
-        }
-      `}</style>
-    </div>
+        </div>
+      )}
+    </section>
   );
 }
+
+// Memoised: the parent re-renders on every recipe change (slider drags), but
+// the strip only cares about the source, duration and trim range.
+export default memo(ThumbnailStrip);
diff --git a/src/components/TipCarousel.tsx b/src/components/TipCarousel.tsx
index 31ece14d9..f1633eca2 100644
--- a/src/components/TipCarousel.tsx
+++ b/src/components/TipCarousel.tsx
@@ -12,32 +12,32 @@ interface Tip {
 
 const TIPS: Tip[] = [
   {
-    category: "PRIVACY FIRST",
-    title: "100% Local Sandbox",
+    category: "Privacy",
+    title: "Everything stays on this device",
     description: "Your video files never leave your device. All processing happens entirely within your browser's secure client-side sandbox.",
     icon: ShieldCheck,
   },
   {
-    category: "PERFORMANCE BOOST",
-    title: "Keep This Tab Active",
+    category: "Performance",
+    title: "Keep this tab in front",
     description: "Keep this browser tab active and focused. The browser heavily throttles background WebAssembly threads to save power.",
     icon: Zap,
   },
   {
-    category: "WORKFLOW POWER",
-    title: "Keyboard Shortcuts",
+    category: "Workflow",
+    title: "Keyboard shortcuts",
     description: "Press Space to play/pause the preview, M to mute, and Ctrl/Cmd+Enter to trigger an export instantly.",
     icon: Keyboard,
   },
   {
-    category: "ENGINEERING FACT",
+    category: "How it works",
     title: "FFmpeg WebAssembly",
     description: "Reframe compiles powerful C/C++ libraries into WASM, allowing complex video pipelines to run locally in the browser.",
     icon: Cpu,
   },
   {
-    category: "PRO TIP",
-    title: "Export Quality (CRF)",
+    category: "Tip",
+    title: "Quality vs. file size",
     description: "Adjusting the Constant Rate Factor (CRF) slider gives you total control over the sweet spot between visual quality and file size.",
     icon: SlidersHorizontal,
   },
@@ -54,10 +54,13 @@ export default function TipCarousel() {
     timeoutRef.current = setTimeout(() => {
       setActiveIdx((prev) => (prev + 1) % TIPS.length);
       setIsFading(false);
-    }, 300);
+    }, 160);
   };
 
   useEffect(() => {
+    // Auto-advancing content is motion the user didn't ask for; under
+    // reduced motion the tips change only when a dot is chosen.
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
     intervalRef.current = setInterval(rotateTip, 6000);
     return () => {
       if (intervalRef.current) clearInterval(intervalRef.current);
@@ -75,8 +78,10 @@ export default function TipCarousel() {
     timeoutRef.current = setTimeout(() => {
       setActiveIdx(idx);
       setIsFading(false);
-      intervalRef.current = setInterval(rotateTip, 6000);
-    }, 300);
+      if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        intervalRef.current = setInterval(rotateTip, 6000);
+      }
+    }, 160);
   };
 
   const activeTip = TIPS[activeIdx];
@@ -84,45 +89,37 @@ export default function TipCarousel() {
   const IconComponent = activeTip.icon; 
 
   return (
-    <div 
-      className="mt-6 p-4 rounded-xl border bg-[var(--surface)] border-[var(--border)] text-[var(--text)] text-left flex flex-col justify-between min-h-[142px] transition-all duration-300 shadow-sm relative overflow-hidden"
-    >
-      {/* Dynamic Slide Container */}
-      <div 
-        className={`flex-1 transition-all duration-300 transform ${
-          isFading ? "opacity-0 -translate-y-1.5 scale-[0.99]" : "opacity-100 translate-y-0 scale-100"
-        }`}
+    <div data-tip-carousel="" className="mt-5 border-t border-[var(--border)] pt-4 text-left">
+      <div
+        className={`min-h-[92px] transition-opacity duration-base ${isFading ? "opacity-0" : "opacity-100"}`}
+        aria-live="off"
       >
-        <div className="flex items-center gap-2">
-          <IconComponent className="text-film-600" size={14} />
-          <span className="text-[10px] font-heading font-bold uppercase tracking-widest text-film-600">
-            {activeTip.category}
-          </span>
+        <div className="flex items-center gap-1.5 text-xs font-medium text-[var(--selected)]">
+          <IconComponent size={13} aria-hidden="true" />
+          {activeTip.category}
         </div>
-        
-        <h4 className="text-xs font-heading font-bold mt-1 text-[var(--text)] tracking-wide uppercase">
-          {activeTip.title}
-        </h4>
-        
-        <p className="text-[11px] leading-relaxed text-[var(--muted)] mt-1.5">
-          {activeTip.description}
-        </p>
+        <h3 className="serif mt-1.5 text-lg leading-snug text-[var(--text)]">{activeTip.title}</h3>
+        <p className="mt-1 text-xs leading-relaxed text-[var(--muted)]">{activeTip.description}</p>
       </div>
 
-      {/* Pagination Indicators */}
-      <div className="flex items-center justify-center gap-1.5 mt-4">
+      <div className="mt-3 flex items-center justify-center gap-1">
         {TIPS.map((_, idx) => (
           <button
             key={idx}
             type="button"
             onClick={() => handleDotClick(idx)}
-            aria-label={`Go to tip ${idx + 1}`}
-            className={`h-1.5 rounded-full transition-all duration-300 ease-out cursor-pointer ${
-              idx === activeIdx 
-                ? "w-4 bg-film-600"
-                : "w-1.5 bg-[var(--border)] hover:opacity-80"
-            }`}
-          />
+            aria-label={`Show tip ${idx + 1} of ${TIPS.length}`}
+            aria-current={idx === activeIdx ? "true" : undefined}
+            className="flex h-6 w-6 items-center justify-center rounded-full"
+          >
+            <span
+              aria-hidden="true"
+              // Active tip: a short bar rather than a red dot (red is reserved).
+              className={`block h-[3px] rounded-full transition-[width,background-color] duration-base ${
+                idx === activeIdx ? "w-4 bg-[var(--text)]" : "w-1.5 bg-[var(--border-strong)]"
+              }`}
+            />
+          </button>
         ))}
       </div>
     </div>
diff --git a/src/components/TrimControl.tsx b/src/components/TrimControl.tsx
index 8a3f947c2..4c0fb4a39 100644
--- a/src/components/TrimControl.tsx
+++ b/src/components/TrimControl.tsx
@@ -177,7 +177,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
   };
 
   const inputClass =
-    "w-full text-sm px-3 py-2 border border-[var(--border)] rounded-md bg-[var(--bg)] font-heading focus:outline-none focus:ring-2 focus:ring-film-400 text-[var(--text)] transition-shadow [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none";
+    "w-full text-sm px-3 py-2 border border-[var(--border)] rounded-md bg-[var(--bg)] focus:outline-none focus:ring-2 focus:ring-[var(--focus)] text-[var(--text)] transition-shadow [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none";
 
   return (
     <div id="trim-control" className="space-y-3">
@@ -197,9 +197,9 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             if (e.key === "ArrowRight") onChange({ trimStart: Math.min((recipe.trimEnd ?? duration) - 0.1, recipe.trimStart + 0.1) });
           }}
         >
-          <div className="absolute inset-x-0 h-1.5 rounded-full bg-[var(--border)]" />
+          <div className="absolute inset-x-0 h-1.5 rounded-full bg-[var(--surface-2)] shadow-[inset_0_0_0_1px_var(--border)]" />
           <div
-            className="absolute h-1.5 rounded-full bg-film-400 opacity-60"
+            className="absolute h-1.5 rounded-full bg-[var(--accent)]"
             style={{
               left: `${(recipe.trimStart / duration) * 100}%`,
               right: `${((duration - (recipe.trimEnd ?? duration)) / duration) * 100}%`,
@@ -212,7 +212,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             aria-valuemin={0}
             aria-valuemax={duration}
             tabIndex={0}
-            className="absolute w-4 h-4 rounded-full bg-white border-2 border-film-400 shadow cursor-grab active:cursor-grabbing -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-film-400"
+            className="absolute h-5 w-5 -translate-x-1/2 cursor-grab rounded-full border-2 border-[var(--accent)] bg-[var(--surface)] shadow-[var(--shadow)] active:cursor-grabbing"
             style={{ left: `${(recipe.trimStart / duration) * 100}%` }}
             onMouseDown={() => { dragging.current = "start"; }}
             onTouchStart={() => { dragging.current = "start"; }}
@@ -228,7 +228,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             aria-valuemin={0}
             aria-valuemax={duration}
             tabIndex={0}
-            className="absolute w-4 h-4 rounded-full bg-white border-2 border-film-400 shadow cursor-grab active:cursor-grabbing -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-film-400"
+            className="absolute h-5 w-5 -translate-x-1/2 cursor-grab rounded-full border-2 border-[var(--accent)] bg-[var(--surface)] shadow-[var(--shadow)] active:cursor-grabbing"
             style={{ left: `${((recipe.trimEnd ?? duration) / duration) * 100}%` }}
             onMouseDown={() => { dragging.current = "end"; }}
             onTouchStart={() => { dragging.current = "end"; }}
@@ -243,9 +243,9 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
         <div className="flex-1">
           <label
             htmlFor="trim-start"
-            className="font-heading mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-[var(--muted)]"
+            className="font-heading mb-1.5 block text-2xs font-semibold text-[var(--muted)]"
           >
-            Start (sec)
+            Start (seconds)
           </label>
 
           <input
@@ -262,15 +262,13 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             aria-label="Trim start time in seconds"
             aria-invalid={invalidStart}
             aria-describedby={invalidStart ? "trim-start-error" : undefined}
-            className={`${inputClass} ${
-              invalidStart ? "border-[var(--error)]" : "border-[var(--border)]"
-            }`}
+            className={`${inputClass}`}
             placeholder="0"
           />
           {invalidStart && (
             <p
               id="trim-start-error"
-              className="font-heading animate-fade-in mt-1.5 flex items-center gap-1 text-[10px] text-red-500"
+              className="font-heading animate-fade-in mt-1.5 flex items-center gap-1 text-2xs text-[var(--error)]"
             >
               <AlertCircle size={10} className="shrink-0" />
               {startErrorMsg}
@@ -281,9 +279,9 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
         <div className="flex-1">
           <label
             htmlFor="trim-end"
-            className="font-heading mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-[var(--muted)]"
+            className="font-heading mb-1.5 block text-2xs font-semibold text-[var(--muted)]"
           >
-            End (sec)
+            End (seconds)
           </label>
 
           <input
@@ -300,15 +298,13 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             aria-label="Trim end time in seconds"
             aria-invalid={invalidEnd}
             aria-describedby={invalidEnd ? "trim-end-error" : undefined}
-            className={`${inputClass} ${
-              invalidEnd ? "border-[var(--error)]" : "border-[var(--border)]"
-            }`}
+            className={`${inputClass}`}
             placeholder={duration > 0 ? `${duration.toFixed(1)}` : "full length"}
           />
           {invalidEnd && (
             <p
               id="trim-end-error"
-              className="font-heading animate-fade-in mt-1.5 flex items-center gap-1 text-[10px] text-red-500"
+              className="font-heading animate-fade-in mt-1.5 flex items-center gap-1 text-2xs text-[var(--error)]"
             >
               <AlertCircle size={10} className="shrink-0" />
               {endErrorMsg}
@@ -318,14 +314,14 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
       </div>
 
       {duration > 0 && (
-        <p className="text-sm text-[var(--muted)] font-heading mt-1">
+        <p className="tabular hint">
           Clip: {formatDuration(clipLength)} of{" "}
           {formatDuration(duration)}
         </p>
       )}
       {recipe.trimEnd !== null &&
         recipe.trimEnd - recipe.trimStart < MIN_CLIP_DURATION && (
-          <p className="text-[10px] text-[var(--error)] font-heading">
+          <p className="text-xs text-[var(--error)]">
             Clip must be at least 0.1 seconds long.
           </p>
       )}
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 17637669f..16a6f6afa 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { useVideoEditor } from "@/hooks/useVideoEditor";
 import { TextOverlay } from "@/lib/types";
 import FileUpload from "./FileUpload";
@@ -15,258 +15,186 @@ import TextControls from "./TextControls";
 import AudioSpeedControl from "./AudioSpeedControl";
 import FormatSelector from "./FormatSelector";
 import ExportSettings from "./ExportSettings";
-import ExportOverlay from "./ExportOverlay";
+import ExportOverlay, { type ExportSummary } from "./ExportOverlay";
 import DownloadResult from "./DownloadResult";
 import ImageOverlay from "./ImageOverlay";
-import HistoryControls from "./HistoryControls";
-import ProjectPanel, { RecoveryNotice } from "./ProjectPanel";
+import AdjustmentsControl, { hasAdjustments } from "./AdjustmentsControl";
 import { getPresetById } from "@/lib/presets";
+import { pickThumbnailInterval } from "@/lib/thumbnails";
 
-import { cn } from "@/lib/utils";
+import { cn, formatDuration } from "@/lib/utils";
 import {
   Layers,
-  Crop,
   Scissors,
   RotateCw,
   Volume2,
   Type,
   SlidersHorizontal,
-  Zap,
   AlertTriangle,
-  Github,
   Copy,
+  Check,
+  Download,
+  ChevronDown,
+  Keyboard,
 } from "lucide-react";
 import OnboardingTour from "./OnboardingTour";
 import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
+import HistoryControls from "./HistoryControls";
+import ProjectPanel, { RecoveryNotice } from "./ProjectPanel";
 
-interface SectionProps {
-  icon: React.ReactNode;
-  title: string;
-  children: React.ReactNode;
-  delay?: number;
-}
-
-function Section({ icon, title, children, delay = 0 }: SectionProps) {
-  return (
-    <div className="space-y-3 animate-fade-in" style={{ animationDelay: `${delay}ms` }}>
-      <div className="flex items-center gap-2">
-        <span className="text-film-500 opacity-80">{icon}</span>
-        <h3 className="text-sm font-heading font-bold uppercase tracking-widest text-[var(--muted)]">
-          {title}
-        </h3>
-        <div className="flex-1 h-px bg-[var(--border)]" />
-      </div>
-      {children}
-    </div>
-  );
-}
-
-/** Accordion section with collapsible content. */
+/**
+ * Collapsible tool section. The panel animates open and closed through grid
+ * rows (see `.disclosure` in globals.css), so nothing is measured in JS; once
+ * closed, its content is visibility:hidden and leaves the tab order. The
+ * optional summary shows the current value while collapsed, so the panel
+ * doesn't have to be opened to check it.
+ */
 function AccordionSection({
   id,
   icon,
   title,
+  summary,
   children,
   isOpen,
   onToggle,
-  delay = 0,
 }: {
   id: string;
   icon: React.ReactNode;
   title: string;
+  summary?: React.ReactNode;
   children: React.ReactNode;
   isOpen: boolean;
   onToggle: () => void;
-  delay?: number;
 }) {
   return (
-    <div className="animate-fade-in" style={{ animationDelay: `${delay}ms` }}>
-      <button
-        type="button"
-        aria-expanded={isOpen}
-        aria-controls={`${id}-panel`}
-        onClick={onToggle}
-        className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-[var(--border)] transition-all duration-200 group rounded-lg"
-      >
-        <div className="flex items-center gap-2">
-          <span className="text-film-500 opacity-80 group-hover:opacity-100 group-hover:scale-110 transition-transform duration-200">
+    <div>
+      <h3>
+        <button
+          type="button"
+          id={`${id}-header`}
+          aria-expanded={isOpen}
+          aria-controls={`${id}-panel`}
+          onClick={onToggle}
+          className="group flex min-h-[50px] w-full items-center gap-3 px-1 py-2.5 text-left"
+        >
+          <span
+            aria-hidden="true"
+            className="text-[var(--muted)] transition-colors duration-fast group-hover:text-[var(--text)]"
+          >
             {icon}
           </span>
-          <span className="text-sm font-heading font-bold uppercase tracking-widest text-[var(--muted)]">
-            {title}
-          </span>
-        </div>
-        <svg
-          aria-hidden="true"
-          width="12"
-          height="12"
-          viewBox="0 0 12 12"
-          fill="none"
-          className={cn(
-            "text-[var(--muted)] transition-transform duration-200",
-            isOpen && "rotate-180"
+          <span className="flex-1 text-sm font-medium text-[var(--text)]">{title}</span>
+          {summary && (
+            <span className="tabular truncate text-xs text-[var(--muted)]">{summary}</span>
           )}
-        >
-          <path
-            d="M2 4l4 4 4-4"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+          <ChevronDown
+            size={15}
+            aria-hidden="true"
+            className={cn(
+              "shrink-0 text-[var(--muted)] transition-transform duration-panel ease-standard group-hover:text-[var(--text)]",
+              isOpen && "rotate-180"
+            )}
           />
-        </svg>
-      </button>
-
-      <div
-        id={`${id}-panel`}
-        className={cn("transition-all duration-200", isOpen ? "block" : "hidden")}
-      >
-        <div className="px-3 pt-3 pb-0">{children}</div>
+        </button>
+      </h3>
+      <div className="disclosure" data-open={isOpen}>
+        <div
+          id={`${id}-panel`}
+          role="region"
+          aria-labelledby={`${id}-header`}
+          className="disclosure-inner"
+        >
+          <div className="px-1 pb-5 pt-1">{children}</div>
+        </div>
       </div>
     </div>
   );
 }
 
-/** Inline keyboard hint badge. */
-function Kbd({ children }: { children: React.ReactNode }) {
+/** "(2)  Edit" — the reference's parenthetical marker beside a serif title. */
+function SectionHead({
+  id,
+  marker,
+  title,
+  children,
+  visuallyHidden,
+}: {
+  id: string;
+  marker: string;
+  title: string;
+  children?: React.ReactNode;
+  visuallyHidden?: boolean;
+}) {
+  if (visuallyHidden) {
+    return (
+      <h2 id={id} className="sr-only">
+        {title}
+      </h2>
+    );
+  }
   return (
-    <kbd className="inline-flex items-center justify-center min-w-[1.5rem] px-1.5 py-0.5 rounded border border-[var(--border)] bg-[var(--bg)] text-[10px] font-mono text-[var(--muted)] leading-none">
-      {children}
-    </kbd>
+    <div className="section-head">
+      <span className="marker" aria-hidden="true">
+        ({marker})
+      </span>
+      <h2 id={id} className="serif text-2xl leading-none">
+        {title}
+      </h2>
+      {children && <div className="ml-auto flex items-center gap-1">{children}</div>}
+    </div>
   );
 }
 
-/** Collapsible panel that lists all keyboard shortcuts. */
-function KeyboardShortcutsPanel({ isMac }: { isMac: boolean }) {
-  const [open, setOpen] = useState(false);
-  const mod = isMac ? "⌘" : "Ctrl";
-
-  const shortcuts: { keys: React.ReactNode[]; label: string }[] = [
-    {
-      keys: [
-        <Kbd key="mod">{mod}</Kbd>,
-        <span key="plus" className="text-[var(--muted)] text-xs">
-          +
-        </span>,
-        <Kbd key="z">Z</Kbd>,
-      ],
-      label: "Undo",
-    },
-    {
-      keys: isMac
-        ? [
-            <Kbd key="shift">⇧</Kbd>,
-            <span key="plus1" className="text-[var(--muted)] text-xs">
-              +
-            </span>,
-            <Kbd key="mod">⌘</Kbd>,
-            <span key="plus2" className="text-[var(--muted)] text-xs">
-              +
-            </span>,
-            <Kbd key="z">Z</Kbd>,
-          ]
-        : [
-            <Kbd key="mod">Ctrl</Kbd>,
-            <span key="plus" className="text-[var(--muted)] text-xs">
-              +
-            </span>,
-            <Kbd key="y">Y</Kbd>,
-          ],
-      label: "Redo",
-    },
-    {
-      keys: [
-        <Kbd key="ctrl">Ctrl</Kbd>,
-        <span key="plus1" className="text-[var(--muted)] text-xs">
-          +
-        </span>,
-        <Kbd key="shift">Shift</Kbd>,
-        <span key="plus2" className="text-[var(--muted)] text-xs">
-          +
-        </span>,
-        <Kbd key="e">E</Kbd>,
-      ],
-      label: "Export video",
-    },
-    {
-      keys: [<Kbd key="m">M</Kbd>],
-      label: "Toggle audio mute",
-    },
-    {
-      keys: [<Kbd key="r">R</Kbd>],
-      label: "Reset all settings (undoable)",
-    },
-    {
-      keys: [<Kbd key="esc">Esc</Kbd>],
-      label: "Cancel export",
-    },
-    {
-      keys: [
-        <Kbd key="1">1</Kbd>,
-        <span key="dash" className="text-[var(--muted)] text-xs">
-          –
-        </span>,
-        <Kbd key="9">9</Kbd>,
-      ],
-      label: "Switch preset by index",
-    },
-    {
-      keys: [<Kbd key="question">?</Kbd>],
-      label: "Toggle this panel",
-    },
-    {
-      keys: [<Kbd key="i">I</Kbd>],
-      label: "Set trim in point",
-    },
-    {
-      keys: [<Kbd key="o">O</Kbd>],
-      label: "Set trim out point",
-    },
-  ];
-
+const SHORTCUTS: { keys: string[]; label: string }[] = [
+  { keys: ["Space"], label: "Play / pause preview" },
+  { keys: ["⌘/Ctrl", "Enter"], label: "Export video" },
+  { keys: ["⌘/Ctrl", "Shift", "E"], label: "Export video" },
+  { keys: ["Esc"], label: "Cancel export" },
+  { keys: ["⌘/Ctrl", "Z"], label: "Undo" },
+  { keys: ["⌘/Ctrl", "Shift", "Z"], label: "Redo (or Ctrl Y)" },
+  { keys: ["I"], label: "Set trim start at playhead" },
+  { keys: ["O"], label: "Set trim end at playhead" },
+  { keys: ["M"], label: "Mute / unmute audio" },
+  { keys: ["1", "–", "9"], label: "Choose preset by position" },
+  { keys: ["R"], label: "Reset all settings" },
+  { keys: ["⌘/Ctrl", "O"], label: "Open a video" },
+  { keys: ["?"], label: "Show or hide this list" },
+];
+
+/** Collapsible list of keyboard shortcuts (also toggled with "?"). */
+function KeyboardShortcutsPanel({ open, onToggle }: { open: boolean; onToggle: () => void }) {
   return (
-    <div className="rounded-xl animate-fade-in overflow-hidden neo-raised">
+    <div className="border-b border-[var(--border)]">
       <button
         type="button"
         aria-expanded={open}
         aria-controls="keyboard-shortcuts-list"
-        onClick={() => setOpen((v) => !v)}
-        className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-[var(--border)] transition-colors duration-150"
+        onClick={onToggle}
+        className="group flex min-h-[46px] w-full items-center gap-2 px-1 py-2 text-left text-sm text-[var(--text-secondary)] transition-colors duration-fast hover:text-[var(--text)]"
       >
-        <span className="text-[10px] font-heading font-bold uppercase tracking-widest text-[var(--muted)] flex items-center gap-2">
-          <Kbd>⌨</Kbd>
-          Keyboard Shortcuts
-        </span>
-        <svg
-          aria-hidden="true"
-          width="12"
-          height="12"
-          viewBox="0 0 12 12"
-          fill="none"
-          className={cn(
-            "text-[var(--muted)] transition-transform duration-200",
-            open && "rotate-180"
-          )}
-        >
-          <path
-            d="M2 4l4 4 4-4"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
+        <Keyboard size={15} aria-hidden="true" className="text-[var(--muted)] group-hover:text-[var(--text)]" />
+        <span className="flex-1">Keyboard shortcuts</span>
+        <kbd className="kbd">?</kbd>
       </button>
 
       {open && (
-        <ul
-          id="keyboard-shortcuts-list"
-          className="px-4 pb-3 space-y-2 border-t border-[var(--border)]"
-        >
-          {shortcuts.map(({ keys, label }) => (
-            <li key={label} className="flex items-center justify-between gap-3 pt-2">
+        <ul id="keyboard-shortcuts-list" className="enter grid gap-x-8 gap-y-2 px-1 pb-4 pt-1 sm:grid-cols-2" style={{ "--enter-delay": "0ms" } as React.CSSProperties}>
+          {SHORTCUTS.map(({ keys, label }) => (
+            <li key={label + keys.join()} className="flex items-center justify-between gap-3">
               <span className="text-xs text-[var(--muted)]">{label}</span>
-              <span className="flex items-center gap-1 shrink-0">{keys}</span>
+              <span className="flex shrink-0 items-center gap-1">
+                {keys.map((k) =>
+                  k === "–" ? (
+                    <span key={k} className="text-xs text-[var(--muted)]">
+                      –
+                    </span>
+                  ) : (
+                    <kbd key={k} className="kbd">
+                      {k}
+                    </kbd>
+                  )
+                )}
+              </span>
             </li>
           ))}
         </ul>
@@ -275,6 +203,10 @@ function KeyboardShortcutsPanel({ isMac }: { isMac: boolean }) {
   );
 }
 
+function qualityLabel(crf: number) {
+  return crf <= 21 ? "High" : crf <= 25 ? "Balanced" : "Small file";
+}
+
 export default function VideoEditor() {
   const {
     file,
@@ -285,7 +217,6 @@ export default function VideoEditor() {
     result,
     error,
     exportStartedAt,
-    exportNotice,
     updateRecipe,
     handleFileSelect,
     fileError,
@@ -293,16 +224,6 @@ export default function VideoEditor() {
     cancelExport,
     reset,
     resetSettings,
-    undo,
-    redo,
-    canUndo,
-    canRedo,
-    recovery,
-    discardRecovery,
-    storageStatus,
-    buildProjectFile,
-    importProjectFile,
-    deleteSavedData,
     videoRef,
     seekTo,
     overlayFile,
@@ -314,10 +235,24 @@ export default function VideoEditor() {
     overlayOpacity,
     setOverlayOpacity,
     recommendedPreset,
-    currentTime,
+    getCurrentTime,
     toggleSound,
+    exportNotice,
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    recovery,
+    discardRecovery,
+    storageStatus,
+    buildProjectFile,
+    importProjectFile,
+    deleteSavedData,
   } = useVideoEditor();
 
+  const [shortcutsOpen, setShortcutsOpen] = useState(false);
+  const toggleShortcuts = useCallback(() => setShortcutsOpen((v) => !v), []);
+
   useKeyboardShortcuts({
     file,
     recipe,
@@ -326,8 +261,8 @@ export default function VideoEditor() {
     handleExport,
     status,
     cancelExport,
-    onToggleShortcutsModal: () => {},
-    currentTime,
+    onToggleShortcutsModal: toggleShortcuts,
+    getCurrentTime,
     duration,
     undo,
     redo,
@@ -340,10 +275,15 @@ export default function VideoEditor() {
     resize: true,
     trim: false,
     rotation: false,
+    adjust: false,
     text: false,
     audio: false,
+    overlay: false,
     export: false,
   });
+  // Overlay settings are part of the undoable edit and the saved project
+  // (useVideoEditor), so they aren't persisted separately here.
+
   const toggleSection = (key: keyof typeof openSections) =>
     setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
   const downloadRef = useRef<HTMLDivElement>(null);
@@ -390,29 +330,34 @@ export default function VideoEditor() {
     setIsMac(typeof navigator !== "undefined" && /Mac/i.test(navigator.platform));
   }, []);
 
-  const intervalSeconds = useMemo(() => {
-    if (duration <= 30) return 2;
-    if (duration <= 120) return 5;
-    if (duration <= 300) return 15;
-    return 30;
-  }, [duration]);
+  const intervalSeconds = useMemo(() => pickThumbnailInterval(duration), [duration]);
 
   const videoSrc = useMemo(() => (file ? URL.createObjectURL(file) : null), [file]);
 
-  const exportSummary = useMemo(() => {
+  const output = useMemo(() => {
     const preset = getPresetById(recipe.preset);
     const width =
       recipe.preset === "custom" ? recipe.customWidth : (preset?.width ?? recipe.customWidth);
     const height =
       recipe.preset === "custom" ? recipe.customHeight : (preset?.height ?? recipe.customHeight);
-
-    const framingLabel = recipe.framing === "fit" ? "Fit" : "Fill";
-    const speedLabel = `${recipe.speed}× speed`;
-    const qualityLabel =
-      recipe.quality <= 21 ? "High" : recipe.quality <= 25 ? "Balanced" : "Small file";
-
-    return `Exporting to ${width}×${height} ${recipe.format.toUpperCase()} • ${framingLabel} • ${speedLabel} • Quality: ${qualityLabel}`;
-  }, [recipe]);
+    const summary: ExportSummary = {
+      format: recipe.format.toUpperCase(),
+      resolution: `${width} × ${height}`,
+      quality: `${qualityLabel(recipe.quality)} (CRF ${recipe.quality})`,
+    };
+    return {
+      summary,
+      presetLabel: recipe.preset === "custom" ? "Custom" : (preset?.label ?? "Custom"),
+      framing: recipe.framing === "fit" ? "Fit" : "Fill",
+    };
+  }, [
+    recipe.preset,
+    recipe.customWidth,
+    recipe.customHeight,
+    recipe.format,
+    recipe.quality,
+    recipe.framing,
+  ]);
 
   useEffect(() => {
     return () => {
@@ -420,81 +365,70 @@ export default function VideoEditor() {
     };
   }, [videoSrc]);
 
+  const isTrimmed = recipe.trimStart > 0 || recipe.trimEnd !== null;
+  const textCount = recipe.textOverlays?.length ?? 0;
+  const exportDisabled = !file || isProcessing;
+  const exportShortcut = isMac ? "⌘ Enter" : "Ctrl Enter";
+
   return (
-    <div className="min-h-screen relative flex flex-col" style={{ background: "var(--bg)" }}>
+    <div className="relative flex flex-col">
       <ExportOverlay
         status={status}
         progress={progress}
         exportStartedAt={exportStartedAt}
-        notice={exportNotice}
         onCancel={cancelExport}
+        summary={output.summary}
+        notice={exportNotice}
       />
       <OnboardingTour />
 
       <div aria-live="polite" aria-atomic="true" className="sr-only">
-        {status === "exporting" && `Exporting video: ${progress}%`}
-        {status === "done" && "Export complete! Video ready to download."}
+        {status === "exporting" && progress % 10 === 0 && `Exporting video: ${progress}%`}
+        {status === "done" && "Export complete. Video ready to download."}
         {status === "error" && `Export failed: ${error}`}
       </div>
 
       <div
         className={cn(
-          "max-w-6xl mx-auto px-4 py-8 pb-6 flex-1 w-full",
+          "mx-auto w-full max-w-[1440px] flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8",
           // Reserve space on mobile so the fixed export bar never covers content.
           file && "max-lg:pb-28"
         )}
       >
-        <header className="mb-10 flex flex-col items-center justify-center gap-4 animate-fade-in">
-          <div
-            className="inline-block rounded-xl border border-[var(--border)] bg-[var(--surface)] shadow-sm border-l-4 border-l-film-600 mx-auto w-fit min-w-min"
-            style={{
-              padding: "clamp(0.75rem,3vw,1.25rem) clamp(1rem,5vw,2rem)",
-              boxSizing: "border-box",
-            }}
-            aria-label="Reframe — video editor"
-          >
-            <h1
-              className="font-display leading-none tracking-widest2 text-[var(--text)] break-words text-center transition-all"
-              style={{ fontSize: "clamp(2rem,10vw,4rem)", viewTransitionName: "reframe-text" }}
-            >
-              REFRAME
+        {file ? (
+          <h1 className="sr-only">Reframe editor</h1>
+        ) : (
+          // Editorial opening: the headline rises line by line out of a mask,
+          // as the reference's titles do. Copy stays plain and functional.
+          <header className="mb-8 grid gap-5 sm:mb-12 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-end lg:gap-8">
+            <h1 className="display text-[2.125rem] sm:text-5xl xl:text-6xl">
+              <span className="line-mask">
+                <span>Resize, trim and export</span>
+              </span>
+              <span className="line-mask" style={{ "--enter-delay": "90ms" } as React.CSSProperties}>
+                <span>video in your browser</span>
+              </span>
             </h1>
             <p
-              className="font-heading text-[var(--muted)] uppercase tracking-widest text-center"
-              style={{
-                fontSize: "clamp(0.7rem,2vw,0.875rem)",
-                marginTop: "clamp(0.25rem,1vw,0.5rem)",
-              }}
+              className="enter max-w-sm text-sm leading-6 text-[var(--text-secondary)]"
+              style={{ "--enter-delay": "260ms" } as React.CSSProperties}
             >
-              Your video, any format
+              Reformat a clip for any platform without an account, an upload or a watermark.
+              Everything runs on this device.
             </p>
-            <div
-              className="flex md:hidden items-center justify-center gap-2 font-heading font-semibold uppercase tracking-widest text-[var(--muted)] border-t border-[var(--border)]"
-              style={{
-                fontSize: "clamp(0.6rem,1.5vw,0.75rem)",
-                marginTop: "clamp(0.5rem,2vw,0.75rem)",
-                paddingTop: "clamp(0.5rem,2vw,0.75rem)",
-              }}
-            >
-              <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-[var(--accent)] inline-block animate-pulse" />
-              No login. No ads. 100% private.
-            </div>
-          </div>
-          <div
-            className="flex flex-wrap justify-center text-center items-center gap-2 text-sm font-heading font-semibold uppercase tracking-widest text-[var(--muted)] pb-1"
-            style={{ justifyContent: "center", textAlign: "center", margin: "0", width: "auto" }}
-          >
-            <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-[var(--accent)] inline-block animate-pulse" />
-            No login. No ads. 100% private - your video never leaves your device.
-          </div>
-        </header>
-        <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-5">
-          <div className="space-y-4 min-w-0">
-            {!file && recovery && (
-              <RecoveryNotice recovery={recovery} onDiscard={discardRecovery} />
-            )}
+          </header>
+        )}
+
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-start lg:gap-8">
+          {/* ── Workspace: preview first, then the tools that change it ── */}
+          <div className="min-w-0 space-y-8">
+            {!file && recovery && <RecoveryNotice recovery={recovery} onDiscard={discardRecovery} />}
             {!file && <PrivacyBanner />}
-            <div className="bg-[var(--surface)] rounded-xl p-3 border border-[var(--border)] animate-fade-in">
+
+            {/* No entrance on this section: it holds the primary action (and
+                the page's largest paint), so it is shown from the first frame. */}
+            <section aria-labelledby="video-heading" className="space-y-4">
+              <SectionHead id="video-heading" marker="1" title="Source" visuallyHidden={!file} />
               <FileUpload
                 onFileSelect={handleFileSelect}
                 currentFile={file}
@@ -502,290 +436,83 @@ export default function VideoEditor() {
                 duration={duration}
               />
 
-              {!file && (
-                <div className="text-center text-[var(--muted)] py-6">
-                  <p>Upload a video to get started</p>
-                  <p className="text-sm">Supports MP4, MOV, WebM and more</p>
-                </div>
-              )}
-
               {file && (
-                <div className="mt-4 animate-fade-in">
-                  <VideoPreview
-                    file={file}
-                    recipe={recipe}
-                    videoRef={videoRef}
-                    selectedTextId={selectedTextId}
-                    onSelectText={setSelectedTextId}
-                    onUpdateText={handleUpdateTextOverlay}
-                  />
+                <>
+                  <div>
+                    <VideoPreview
+                      file={file}
+                      recipe={recipe}
+                      videoRef={videoRef}
+                      selectedTextId={selectedTextId}
+                      onSelectText={setSelectedTextId}
+                      onUpdateText={handleUpdateTextOverlay}
+                    />
+                  </div>
 
-                  <div className="mt-3">
+                  <div className="border-t border-[var(--border)] pt-3">
                     <ThumbnailStrip
                       videoSrc={videoSrc}
                       duration={duration}
-                      currentTime={currentTime}
+                      videoRef={videoRef}
                       trimStart={recipe.trimStart ?? 0}
                       trimEnd={recipe.trimEnd ?? duration}
                       onSeek={seekTo}
                       intervalSeconds={intervalSeconds}
                     />
                   </div>
-                </div>
+                </>
               )}
-            </div>
+            </section>
 
             {file && file.size > 100 * 1024 * 1024 && (
-              <p className="text-[var(--warning)] text-sm">
-                ⚠️ Large file - processing may take several minutes
+              <p role="status" className="callout callout-warning text-xs">
+                <AlertTriangle size={14} aria-hidden="true" className="mt-0.5 shrink-0 text-[var(--warning)]" />
+                Large file: export can take several minutes. Keep this tab in the foreground.
               </p>
             )}
-            {file && (
-              <div className="flex flex-wrap items-center justify-between gap-2">
-                <HistoryControls
-                  canUndo={canUndo}
-                  canRedo={canRedo}
-                  onUndo={undo}
-                  onRedo={redo}
-                />
-              </div>
-            )}
-            {file && (
-              <div
-                className={cn(
-                  "grid grid-cols-1 gap-4",
-                  isProcessing && "pointer-events-none opacity-50"
-                )}
-              >
-                <div className="bg-[var(--surface)] rounded-xl border border-[var(--border)] p-5 space-y-6">
-                  <AccordionSection
-                    id="trim"
-                    icon={<Scissors size={12} />}
-                    title="Trim"
-                    isOpen={openSections.trim}
-                    onToggle={() => toggleSection("trim")}
-                    delay={50}
-                  >
-                    <TrimControl
-                      recipe={recipe}
-                      onChange={updateRecipe}
-                      duration={duration}
-                      file={file}
-                    />
-                  </AccordionSection>
-
-                  <AccordionSection
-                    id="rotation"
-                    icon={<RotateCw size={12} />}
-                    title="Rotation"
-                    isOpen={openSections.rotation}
-                    onToggle={() => toggleSection("rotation")}
-                    delay={100}
-                  >
-                    <RotateControl recipe={recipe} onChange={updateRecipe} />
-                  </AccordionSection>
-
-                  <AccordionSection
-                    id="text"
-                    icon={<Type size={12} />}
-                    title="Text Overlay"
-                    isOpen={openSections.text}
-                    onToggle={() => toggleSection("text")}
-                    delay={110}
-                  >
-                    <TextControls
-                      recipe={recipe}
-                      onChange={updateRecipe}
-                      selectedTextId={selectedTextId}
-                      onSelectText={setSelectedTextId}
-                    />
-                  </AccordionSection>
-                </div>
-                <div className="rounded-xl p-5 neo-raised space-y-6">
-                  <AccordionSection
-                    id="audio"
-                    icon={<Volume2 size={12} />}
-                    title="Audio & Speed"
-                    isOpen={openSections.audio}
-                    onToggle={() => toggleSection("audio")}
-                    delay={150}
-                  >
-                    <AudioSpeedControl recipe={recipe} onChange={updateRecipe} />
-                  </AccordionSection>
-                  <Section icon={<SlidersHorizontal size={12} />} title="Adjustments" delay={175}>
-                    <div className="space-y-5">
-                      {/* Brightness */}
-                      <div className="space-y-2">
-                        <div className="flex items-center justify-between text-xs">
-                          <label htmlFor="brightness-slider">Brightness</label>
-                          <button
-                            type="button"
-                            onClick={() => updateRecipe({ brightness: 0 })}
-                            className="text-film-500 hover:underline"
-                            aria-label="reset brightness"
-                          >
-                            Reset
-                          </button>
-                        </div>
-                        <input
-                          id="brightness-slider"
-                          type="range"
-                          min="-1"
-                          max="1"
-                          step="0.1"
-                          value={recipe.brightness}
-                          onChange={(e) => updateRecipe({ brightness: Number(e.target.value) })}
-                          aria-label="Adjust brightness"
-                          className="w-full accent-film-600"
-                        />
-                      </div>
-                      {/* Contrast */}
-                      <div className="space-y-2">
-                        <div className="flex items-center justify-between text-xs">
-                          <label htmlFor="contrast-slider">Contrast</label>
-                          <button
-                            type="button"
-                            onClick={() => updateRecipe({ contrast: 1 })}
-                            className="text-film-500 hover:underline"
-                            aria-label="reset-contrast"
-                          >
-                            Reset
-                          </button>
-                        </div>
-                        <input
-                          id="contrast-slider"
-                          type="range"
-                          min="0"
-                          max="2"
-                          step="0.1"
-                          value={recipe.contrast}
-                          onChange={(e) => updateRecipe({ contrast: Number(e.target.value) })}
-                          aria-label="Adjust contrast"
-                          className="w-full accent-film-600"
-                        />
-                      </div>
-                      {/* Saturation */}
-                      <div className="space-y-2">
-                        <div className="flex items-center justify-between text-xs">
-                          <label htmlFor="saturation-slider">Saturation</label>
-                          <button
-                            type="button"
-                            onClick={() => updateRecipe({ saturation: 1 })}
-                            className="text-film-500 hover:underline"
-                            aria-label="reset-saturation"
-                          >
-                            Reset
-                          </button>
-                        </div>
-                        <input
-                          id="saturation-slider"
-                          type="range"
-                          min="0"
-                          max="3"
-                          step="0.1"
-                          value={recipe.saturation}
-                          onChange={(e) => updateRecipe({ saturation: Number(e.target.value) })}
-                          aria-label="Adjust saturation"
-                          className="w-full accent-film-600"
-                        />
-                      </div>
-                      {/* Sharpness */}
-                      <div className="space-y-2">
-                        <div className="flex items-center justify-between text-xs">
-                          <label htmlFor="sharpness-slider">Sharpness</label>
-                          <button
-                            type="button"
-                            onClick={() => updateRecipe({ sharpness: 0 })}
-                            className="text-film-500 hover:underline"
-                          >
-                            Reset
-                          </button>
-                        </div>
-                        <input
-                          id="sharpness-slider"
-                          type="range"
-                          min="0"
-                          max="3"
-                          step="1"
-                          value={recipe.sharpness}
-                          onChange={(e) => updateRecipe({ sharpness: Number(e.target.value) })}
-                          aria-label="Adjust sharpness"
-                          className="w-full accent-film-600"
-                        />
-                      </div>
-                    </div>
-                  </Section>
-                  <Section icon={<SlidersHorizontal size={12} />} title="Output format" delay={190}>
-                    <FormatSelector recipe={recipe} onChange={updateRecipe} />
-                  </Section>
-                  <AccordionSection
-                    id="export"
-                    icon={<SlidersHorizontal size={12} />}
-                    title="Export"
-                    isOpen={openSections.export}
-                    onToggle={() => toggleSection("export")}
-                    delay={200}
-                  >
-                    <ExportSettings recipe={recipe} duration={duration} onChange={updateRecipe} />
-                  </AccordionSection>
-                  <Section icon={<Layers size={12} />} title="Image overlay" delay={120}>
-                    <ImageOverlay
-                      overlayFile={overlayFile}
-                      setOverlayFile={setOverlayFile}
-                      overlayPosition={overlayPosition}
-                      setOverlayPosition={setOverlayPosition}
-                      overlaySize={overlaySize}
-                      setOverlaySize={setOverlaySize}
-                      overlayOpacity={overlayOpacity}
-                      setOverlayOpacity={setOverlayOpacity}
-                    />
-                  </Section>
-                </div>
-              </div>
-            )}
 
             {status === "error" && error && (
-              <div
-                role="status"
-                className="flex items-start gap-3 p-4 bg-film-50 border border-film-200 rounded-xl text-film-800 text-sm animate-fade-in"
-              >
-                <AlertTriangle size={16} className="shrink-0 mt-0.5 text-film-500" />
-                <div className="flex-1">
-                  <p className="font-heading font-bold text-sm">Error</p>
-                  <p className="text-film-600 text-sm mt-1">{error}</p>
+              <div role="alert" className="callout callout-error">
+                <AlertTriangle size={16} aria-hidden="true" className="mt-0.5 shrink-0 text-[var(--error)]" />
+                <div className="min-w-0 flex-1">
+                  <p className="font-medium">
+                    {error.includes("Validation Failed") ? "This file can't be opened" : "Export didn't finish"}
+                  </p>
+                  <p className="mt-0.5 text-[var(--text-secondary)]">{error}</p>
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    {!error.includes("Validation Failed") && (
+                      <button type="button" onClick={handleExport} className="btn btn-primary btn-sm">
+                        Retry export
+                      </button>
+                    )}
+                    <button
+                      type="button"
+                      onClick={() => {
+                        navigator.clipboard
+                          .writeText(error)
+                          .then(() => {
+                            setCopied(true);
+                            setTimeout(() => setCopied(false), 2000);
+                          })
+                          .catch((err) => {
+                            console.error("Failed to copy error to clipboard:", err);
+                          });
+                      }}
+                      className="btn btn-secondary btn-sm"
+                    >
+                      {copied ? <Check size={13} aria-hidden="true" /> : <Copy size={13} aria-hidden="true" />}
+                      {copied ? "Copied" : "Copy error details"}
+                    </button>
+                  </div>
                 </div>
-                <button
-                  type="button"
-                  onClick={() => {
-                    navigator.clipboard
-                      .writeText(error)
-                      .then(() => {
-                        setCopied(true);
-                        setTimeout(() => setCopied(false), 2000);
-                      })
-                      .catch((err) => {
-                        console.error("Failed to copy error to clipboard:", err);
-                      });
-                  }}
-                  className="px-3 py-1.5 bg-[var(--border)] border border-[var(--border)] rounded-lg text-sm font-semibold hover:opacity-80 transition-colors shrink-0 whitespace-nowrap"
-                  aria-label="Copy error message to clipboard"
-                >
-                  {copied ? "Copied!" : "Copy error"}
-                </button>
-                {!error.includes("Validation Failed") && (
-                  <button
-                    type="button"
-                    onClick={handleExport}
-                    className="px-3 py-1.5 bg-[var(--error-bg)] border border-[var(--error-border)] rounded-lg text-sm font-semibold hover:bg-[var(--error-hover)] hover:border-[var(--error)] text-[var(--text)] transition-colors shrink-0 whitespace-nowrap"
-                  >
-                    Retry Export
-                  </button>
-                )}
               </div>
             )}
 
             {status === "done" && result && (
-              <div role="status" className="animate-fade-in" ref={downloadRef}>
+              // Not a live region: the editor's polite region above already
+              // announces completion, and a status role here would read the
+              // whole panel (file name field included) a second time.
+              <div className="animate-fade-in" ref={downloadRef}>
                 <DownloadResult
                   result={result}
                   onReset={reset}
@@ -795,6 +522,107 @@ export default function VideoEditor() {
               </div>
             )}
 
+            {file && (
+              <section
+                aria-labelledby="edit-heading"
+                inert={isProcessing}
+                className={cn(
+                  "enter transition-opacity duration-base",
+                  isProcessing && "opacity-60"
+                )}
+                style={{ "--enter-delay": "120ms" } as React.CSSProperties}
+              >
+                <SectionHead id="edit-heading" marker="2" title="Edit">
+                  <HistoryControls canUndo={canUndo} canRedo={canRedo} onUndo={undo} onRedo={redo} />
+                </SectionHead>
+                <div className="divide-y divide-[var(--border)] border-b border-[var(--border)]">
+                <AccordionSection
+                  id="trim"
+                  icon={<Scissors size={15} />}
+                  title="Trim"
+                  summary={
+                    isTrimmed
+                      ? `${formatDuration(recipe.trimStart)} – ${formatDuration(recipe.trimEnd ?? duration)}`
+                      : "Full length"
+                  }
+                  isOpen={openSections.trim}
+                  onToggle={() => toggleSection("trim")}
+                >
+                  <TrimControl recipe={recipe} onChange={updateRecipe} duration={duration} file={file} />
+                </AccordionSection>
+
+                <AccordionSection
+                  id="rotation"
+                  icon={<RotateCw size={15} />}
+                  title="Rotate"
+                  summary={`${recipe.rotate}°`}
+                  isOpen={openSections.rotation}
+                  onToggle={() => toggleSection("rotation")}
+                >
+                  <RotateControl recipe={recipe} onChange={updateRecipe} />
+                </AccordionSection>
+
+                <AccordionSection
+                  id="adjust"
+                  icon={<SlidersHorizontal size={15} />}
+                  title="Adjust colour"
+                  summary={hasAdjustments(recipe) ? "Modified" : "None"}
+                  isOpen={openSections.adjust}
+                  onToggle={() => toggleSection("adjust")}
+                >
+                  <AdjustmentsControl recipe={recipe} onChange={updateRecipe} />
+                </AccordionSection>
+
+                <AccordionSection
+                  id="text"
+                  icon={<Type size={15} />}
+                  title="Text"
+                  summary={textCount > 0 ? `${textCount} ${textCount === 1 ? "layer" : "layers"}` : "None"}
+                  isOpen={openSections.text}
+                  onToggle={() => toggleSection("text")}
+                >
+                  <TextControls
+                    recipe={recipe}
+                    onChange={updateRecipe}
+                    selectedTextId={selectedTextId}
+                    onSelectText={setSelectedTextId}
+                  />
+                </AccordionSection>
+
+                <AccordionSection
+                  id="audio"
+                  icon={<Volume2 size={15} />}
+                  title="Audio and speed"
+                  summary={`${recipe.speed}× · ${recipe.keepAudio ? "Audio on" : "Muted"}`}
+                  isOpen={openSections.audio}
+                  onToggle={() => toggleSection("audio")}
+                >
+                  <AudioSpeedControl recipe={recipe} onChange={updateRecipe} />
+                </AccordionSection>
+
+                <AccordionSection
+                  id="overlay"
+                  icon={<Layers size={15} />}
+                  title="Image overlay"
+                  summary={overlayFile ? "1 image" : "None"}
+                  isOpen={openSections.overlay}
+                  onToggle={() => toggleSection("overlay")}
+                >
+                  <ImageOverlay
+                    overlayFile={overlayFile}
+                    setOverlayFile={setOverlayFile}
+                    overlayPosition={overlayPosition}
+                    setOverlayPosition={setOverlayPosition}
+                    overlaySize={overlaySize}
+                    setOverlaySize={setOverlaySize}
+                    overlayOpacity={overlayOpacity}
+                    setOverlayOpacity={setOverlayOpacity}
+                  />
+                </AccordionSection>
+                </div>
+              </section>
+            )}
+
             <ProjectPanel
               hasFile={!!file}
               storageStatus={storageStatus}
@@ -803,129 +631,171 @@ export default function VideoEditor() {
               onImportProject={importProjectFile}
               onDeleteSavedData={deleteSavedData}
             />
+
+            <KeyboardShortcutsPanel open={shortcutsOpen} onToggle={toggleShortcuts} />
           </div>
 
-          <div
-            className={cn(
-              "space-y-5 transition-opacity duration-300 sticky top-8 self-start",
-              (isProcessing || !file) && "pointer-events-none opacity-50"
-            )}
+          {/* ── Output: what gets produced, and the action that produces it ── */}
+          {/* On desktop the panel is capped at the viewport height: settings
+              scroll inside it and the summary + Export button stay pinned, so
+              the primary action is always visible. */}
+          <aside
+            aria-labelledby="output-heading"
+            className="enter lg:sticky lg:top-[76px]"
+            style={{ "--enter-delay": "200ms" } as React.CSSProperties}
           >
-            {!file && (
-              <div className="rounded-xl p-4 neo-raised animate-fade-in">
-                <p className="text-[10px] font-heading font-bold text-film-600 uppercase tracking-widest">
-                  Getting Started
-                </p>
-                <p className="text-xs text-[var(--muted)] mt-1">
-                  Upload a video file to enable these export settings.
-                </p>
-              </div>
-            )}
-            <div
-              className="bg-[var(--surface)] rounded-xl border border-[var(--border)] p-5 space-y-6 animate-fade-in"
-              style={{ animationDelay: "50ms" }}
+            <section
+              inert={exportDisabled}
+              className={cn(
+                "panel flex flex-col overflow-hidden transition-opacity duration-base lg:max-h-[calc(100vh-100px)]",
+                exportDisabled && "opacity-60"
+              )}
             >
-              <AccordionSection
-                id="resize"
-                icon={<Layers size={12} />}
-                title="Resize & Aspect Ratio"
-                isOpen={openSections.resize}
-                onToggle={() => toggleSection("resize")}
-                delay={50}
-              >
-                {recommendedPreset && (
-                  <div className="mb-4 rounded-2xl border border-film-200 bg-film-50 p-3 text-sm text-film-700">
-                    <p>
-                      We detected a {recommendedPreset.label.replace(/\s/g, "")} video →
-                      Recommended: {(recommendedPreset.platform.split("·")[0] ?? "").trim()} (
-                      {recommendedPreset.label.replace(/\s/g, "")})
+              <div className="flex items-baseline justify-between gap-2 border-b border-[var(--border)] px-4 pb-3 pt-4">
+                <div className="flex items-baseline gap-3">
+                  {file && (
+                    <span className="marker" aria-hidden="true">
+                      (3)
+                    </span>
+                  )}
+                  <h2 id="output-heading" className="serif text-2xl leading-none">
+                    Output
+                  </h2>
+                </div>
+                <div className="flex items-center gap-1">
+                  <button
+                    type="button"
+                    onClick={handleCopyLink}
+                    className="btn btn-ghost btn-sm"
+                    title="Copy a link that reopens Reframe with these settings"
+                  >
+                    {shareCopied ? <Check size={13} aria-hidden="true" /> : <Copy size={13} aria-hidden="true" />}
+                    {shareCopied ? "Copied" : "Copy settings link"}
+                  </button>
+                </div>
+              </div>
+
+              {!file && (
+                <p className="border-b border-[var(--border)] px-4 py-3 text-xs text-[var(--muted)]">
+                  Open a video to choose its output size, format and quality.
+                </p>
+              )}
+
+              <div className="min-h-0 flex-1 divide-y divide-[var(--border)] overflow-y-auto overscroll-contain px-3">
+                <AccordionSection
+                  id="resize"
+                  icon={<Layers size={15} />}
+                  title="Size and framing"
+                  summary={`${output.presetLabel} · ${output.framing}`}
+                  isOpen={openSections.resize}
+                  onToggle={() => toggleSection("resize")}
+                >
+                  {recommendedPreset && (
+                    <p className="callout callout-info mb-3 text-xs">
+                      This video is {recommendedPreset.label.replace(/\s/g, "")}. Suggested preset:{" "}
+                      {(recommendedPreset.platform.split("·")[0] ?? "").trim()} (
+                      {recommendedPreset.label.replace(/\s/g, "")}).
                     </p>
+                  )}
+                  <div className="space-y-3">
+                    <PresetSelector recipe={recipe} onChange={updateRecipe} />
+                    <FramingControl recipe={recipe} onChange={updateRecipe} />
                   </div>
-                )}
-                <div className="space-y-3">
-                  <PresetSelector recipe={recipe} onChange={updateRecipe} />
-                  <FramingControl recipe={recipe} onChange={updateRecipe} />
+                </AccordionSection>
+
+                <div className="px-1 py-4">
+                  <FormatSelector recipe={recipe} onChange={updateRecipe} />
                 </div>
-              </AccordionSection>
 
-              <div className="pt-2 flex justify-center items-center gap-6">
-                <button
-                  type="button"
-                  onClick={handleCopyLink}
-                  className="flex items-center gap-1.5 text-xs font-heading font-bold uppercase tracking-widest text-film-500 hover:text-film-600 hover:opacity-100 transition-all cursor-pointer"
+                <AccordionSection
+                  id="export"
+                  icon={<SlidersHorizontal size={15} />}
+                  title="Quality and processing"
+                  summary={qualityLabel(recipe.quality)}
+                  isOpen={openSections.export}
+                  onToggle={() => toggleSection("export")}
                 >
-                  <Copy size={12} />
-                  {shareCopied ? "Copied!" : "Copy Link"}
-                </button>
+                  <div className="space-y-5">
+                    <ExportSettings recipe={recipe} duration={duration} onChange={updateRecipe} />
+                  </div>
+                </AccordionSection>
+              </div>
+
+              <div className="shrink-0 space-y-4 border-t border-[var(--border)] px-4 py-4">
+                {file && (
+                  <dl className="grid grid-cols-3 divide-x divide-[var(--border)] text-xs">
+                    <div className="pr-3">
+                      <dt className="text-[var(--muted)]">Format</dt>
+                      <dd className="mt-0.5 font-medium">{output.summary.format}</dd>
+                    </div>
+                    <div className="px-3">
+                      <dt className="text-[var(--muted)]">Size</dt>
+                      <dd className="tabular mt-0.5 font-medium">{output.summary.resolution}</dd>
+                    </div>
+                    <div className="pl-3">
+                      <dt className="text-[var(--muted)]">Quality</dt>
+                      <dd className="mt-0.5 font-medium">{qualityLabel(recipe.quality)}</dd>
+                    </div>
+                  </dl>
+                )}
                 <button
+                  id="export-button"
                   type="button"
-                  onClick={resetSettings}
-                  className="text-sm font-heading font-bold uppercase tracking-widest text-[var(--muted)] hover:text-film-600 transition-all opacity-60 hover:opacity-100"
+                  onClick={handleExport}
+                  disabled={exportDisabled}
+                  title={!file ? "Open a video to enable export" : `Export (${exportShortcut})`}
+                  // Hidden on mobile — replaced by the fixed bottom bar below.
+                  // After a successful export, Download is the primary action,
+                  // so this steps down to secondary.
+                  className={cn(
+                    "btn btn-lg hidden w-full lg:inline-flex",
+                    status === "done" ? "btn-secondary" : "btn-primary"
+                  )}
                 >
-                  Reset settings
+                  <Download size={16} aria-hidden="true" />
+                  {isProcessing ? "Exporting…" : status === "done" ? "Export again" : "Export video"}
                 </button>
+                <div className="hidden items-center justify-between text-2xs text-[var(--muted)] lg:flex">
+                  <span>
+                    <kbd className="kbd">{isMac ? "⌘" : "Ctrl"}</kbd> <kbd className="kbd">Enter</kbd> to export
+                  </span>
+                  <button
+                    type="button"
+                    onClick={resetSettings}
+                    className="link rounded text-[var(--muted)] hover:text-[var(--text)]"
+                    title="Reset every setting to its default (undoable)"
+                  >
+                    Reset settings
+                  </button>
+                </div>
               </div>
-            </div>
-
-            <KeyboardShortcutsPanel isMac={isMac} />
+            </section>
+          </aside>
+        </div>
+      </div>
 
-            {file && (
-              <p className="rounded-xl border border-[var(--border)] bg-[var(--surface)] px-3 py-2 text-xs text-[var(--muted)] leading-relaxed">
-                {exportSummary}
+      {/* Mobile-only export bar — keeps Export reachable without scrolling to the sidebar. */}
+      {file && (
+        <div className="fixed inset-x-0 bottom-0 z-40 border-t border-[var(--border)] bg-[var(--bg)] px-4 py-3 [padding-bottom:calc(0.75rem+env(safe-area-inset-bottom))] sm:px-6 lg:hidden">
+          {/* Same gutters as the page, so on tablets the bar lines up with the content above. */}
+          <div className="flex items-center gap-3">
+            <div className="min-w-0 flex-1 text-xs">
+              <p className="truncate font-medium">
+                {output.summary.format} · {output.summary.resolution}
               </p>
-            )}
-
+              <p className="truncate text-[var(--muted)]">{qualityLabel(recipe.quality)} quality</p>
+            </div>
             <button
-              id="export-button"
               type="button"
               onClick={handleExport}
-              disabled={!file || isProcessing}
-              aria-label="Export video"
-              aria-disabled={!file || isProcessing ? "true" : undefined}
-              title={!file ? "Upload a video to enable export" : undefined}
-              className={cn(
-                // Hidden on mobile — replaced by the fixed bottom bar below.
-                "w-full hidden lg:flex items-center justify-center gap-3 py-5 min-h-[44px] rounded-xl",
-                "font-display text-2xl tracking-widest transition-all duration-200",
-                file && !isProcessing
-                  ? "bg-[var(--accent)] hover:bg-[var(--accent-hover)] hover:scale-[1.02] text-white shadow-[var(--shadow)] active:scale-[0.98] cursor-pointer"
-                  : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
-              )}
+              disabled={isProcessing}
+              className="btn btn-primary btn-lg shrink-0"
             >
-              <Zap size={20} className={cn(file && !isProcessing && "animate-pulse")} />
-              {isProcessing ? "PROCESSING" : "EXPORT"}
+              <Download size={16} aria-hidden="true" />
+              {isProcessing ? "Exporting…" : "Export"}
             </button>
-
-            {file && !isProcessing && (
-              <p className="hidden lg:block text-xs text-center font-mono text-[var(--muted)] opacity-50 mt-1">
-                {isMac ? "⌘" : "Ctrl"} + Enter to export
-              </p>
-            )}
           </div>
         </div>
-      </div>
-
-      {/* Mobile-only export bar — keeps Export reachable without scrolling to the sidebar. */}
-      {file && (
-        <div className="lg:hidden fixed inset-x-0 bottom-0 z-40 border-t border-[var(--border)] bg-[var(--bg)]/95 px-4 py-3 backdrop-blur [padding-bottom:calc(0.75rem+env(safe-area-inset-bottom))]">
-          <button
-            type="button"
-            onClick={handleExport}
-            disabled={isProcessing}
-            aria-label="Export video"
-            aria-disabled={isProcessing ? "true" : undefined}
-            className={cn(
-              "w-full flex items-center justify-center gap-3 py-4 min-h-[44px] rounded-xl",
-              "font-display text-xl tracking-widest transition-all duration-200",
-              !isProcessing
-                ? "bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white shadow-[var(--shadow)] active:scale-[0.98] cursor-pointer"
-                : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
-            )}
-          >
-            <Zap size={18} className={cn(!isProcessing && "animate-pulse")} />
-            {isProcessing ? "PROCESSING" : "EXPORT"}
-          </button>
-        </div>
       )}
     </div>
   );
diff --git a/src/components/VideoPreview.tsx b/src/components/VideoPreview.tsx
index af7d02b03..e3e55442a 100644
--- a/src/components/VideoPreview.tsx
+++ b/src/components/VideoPreview.tsx
@@ -5,7 +5,7 @@ import { useEffect, useRef, useState, useCallback, RefObject } from "react";
 import { EditRecipe, TextOverlay, TimelineTrack, MultiTrackEditorState } from "@/lib/types";
 import { getPresetById } from "@/lib/presets";
 import { cn } from "@/lib/utils";
-import { Camera } from "lucide-react";
+import { Camera, Columns2, Grid3x3, Frame } from "lucide-react";
 import ComparisonPreview from "./ComparisonPreview";
 import DraggableTextOverlays from "./DraggableTextOverlays";
 
@@ -160,34 +160,56 @@ export default function VideoPreview({
     };
   }, [multiTrackState, multiTrackVideoRefs]);
 
+  // Narrow dependencies: these used to re-run on every recipe change (every
+  // slider tick), re-assigning the same values on the media element.
+  const keepAudio = recipe?.keepAudio;
+  const speed = recipe?.speed;
   useEffect(() => {
-    if (!videoRef.current || !recipe) return;
-    videoRef.current.muted = !recipe.keepAudio;
-  }, [recipe, videoRef]);
+    if (!videoRef.current || keepAudio === undefined) return;
+    videoRef.current.muted = !keepAudio;
+  }, [keepAudio, videoRef]);
 
   useEffect(() => {
-    if (!videoRef.current || !recipe) return;
-    videoRef.current.playbackRate = recipe.speed;
-  }, [recipe, videoRef]);
+    if (!videoRef.current || speed === undefined) return;
+    videoRef.current.playbackRate = speed;
+  }, [speed, videoRef]);
 
   /**
    * Track preview container dimensions for text overlay positioning.
+   * ResizeObserver also catches layout-driven size changes (sidebar, panel
+   * expansion) that a window `resize` listener missed, and the guard skips
+   * re-renders when the size hasn't meaningfully changed.
    */
   useEffect(() => {
-    const updateDimensions = () => {
-      if (previewContainerRef.current) {
-        const rect = previewContainerRef.current.getBoundingClientRect();
-        setContainerDimensions({
-          width: rect.width,
-          height: rect.height,
-        });
-      }
+    const el = previewContainerRef.current;
+    if (!el) return;
+
+    let last = { width: -1, height: -1 };
+    const update = (width: number, height: number) => {
+      if (Math.abs(last.width - width) < 1 && Math.abs(last.height - height) < 1) return;
+      last = { width, height };
+      setContainerDimensions(last);
     };
 
-    updateDimensions();
-    window.addEventListener("resize", updateDimensions);
-    return () => window.removeEventListener("resize", updateDimensions);
-  }, []);
+    const rect = el.getBoundingClientRect();
+    update(rect.width, rect.height);
+
+    if (typeof ResizeObserver === "undefined") {
+      const onResize = () => {
+        const r = el.getBoundingClientRect();
+        update(r.width, r.height);
+      };
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      const box = entries[0]?.contentRect;
+      if (box) update(box.width, box.height);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [file]);
 
   const overlay = (() => {
     if (!recipe || !showOverlay) return null;
@@ -258,26 +280,34 @@ export default function VideoPreview({
     }
   };
 
+  // Pressed state comes from `.btn[aria-pressed="true"]` (warm brown outline).
+  const toolButton = (pressed: boolean) => cn("btn btn-sm", pressed ? "btn-secondary" : "btn-ghost");
+
   return (
     <>
       <div
         ref={previewContainerRef}
         role="group"
-        className="relative w-full rounded-lg overflow-hidden bg-[var(--bg)] aspect-video focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
+        // The frame wipes open once when a video is first shown (clip-path on
+        // this wrapper only; the <video> itself is never animated).
+        className="frame-reveal relative aspect-video w-full overflow-hidden rounded-[4px] border border-[var(--viewer-frame)] bg-[var(--viewer)]"
         tabIndex={0}
         onKeyDown={handleKeyDown}
         aria-label="Video preview (press Space to play/pause)"
       >
         {isLoading && (
           <div
-            className="absolute inset-0 animate-pulse bg-[var(--surface)] rounded-xl transition-opacity duration-300"
-            aria-label="Loading video preview"
-          />
+            className="absolute inset-0 flex items-center justify-center text-xs text-white/60"
+            role="status"
+          >
+            Loading preview…
+          </div>
         )}
+        {/* The video itself is never transitioned or animated. */}
         <video
           ref={videoRef}
           controls
-          className={cn("w-full h-full object-contain transition-opacity duration-300", isLoading ? "opacity-0" : "opacity-100")}
+          className={cn("w-full h-full object-contain", isLoading && "invisible")}
           style={{
             filter: recipe
               ? `brightness(${1 + (recipe.brightness ?? 0)}) contrast(${recipe.contrast ?? 1}) saturate(${recipe.saturation ?? 1})`
@@ -331,22 +361,22 @@ export default function VideoPreview({
         {overlay && (
           <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
             {overlay.mode === "fit" ? (
-              // Letterbox: semi-transparent bars outside the content area
+              // Letterbox: the bars the output will add
               <>
-                <div className="absolute left-0 right-0 top-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ height: overlay.barTop }} />
-                <div className="absolute left-0 right-0 bottom-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ height: overlay.barBottom }} />
-                <div className="absolute top-0 bottom-0 left-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ width: overlay.barLeft }} />
-                <div className="absolute top-0 bottom-0 right-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ width: overlay.barRight }} />
+                <div className="absolute left-0 right-0 top-0 bg-black/70" style={{ height: overlay.barTop }} />
+                <div className="absolute left-0 right-0 bottom-0 bg-black/70" style={{ height: overlay.barBottom }} />
+                <div className="absolute top-0 bottom-0 left-0 bg-black/70" style={{ width: overlay.barLeft }} />
+                <div className="absolute top-0 bottom-0 right-0 bg-black/70" style={{ width: overlay.barRight }} />
               </>
             ) : (
-              // Fill/crop: dashed border around the surviving area, dimmed outside
+              // Fill/crop: dim what will be cropped, outline what survives
               <>
-                <div className="absolute left-0 right-0 top-0 bg-[var(--error-bg)]" style={{ height: overlay.barTop }} />
-                <div className="absolute left-0 right-0 bottom-0 bg-[var(--error-bg)]" style={{ height: overlay.barBottom }} />
-                <div className="absolute top-0 bottom-0 left-0 bg-[var(--error-bg)]" style={{ width: overlay.barLeft }} />
-                <div className="absolute top-0 bottom-0 right-0 bg-[var(--error-bg)]" style={{ width: overlay.barRight }} />
+                <div className="absolute left-0 right-0 top-0 bg-black/60" style={{ height: overlay.barTop }} />
+                <div className="absolute left-0 right-0 bottom-0 bg-black/60" style={{ height: overlay.barBottom }} />
+                <div className="absolute top-0 bottom-0 left-0 bg-black/60" style={{ width: overlay.barLeft }} />
+                <div className="absolute top-0 bottom-0 right-0 bg-black/60" style={{ width: overlay.barRight }} />
                 <div
-                  className="absolute border-2 border-dashed border-film-400"
+                  className="absolute border border-dashed border-white/80"
                   style={{
                     top: overlay.barTop,
                     bottom: overlay.barBottom,
@@ -362,12 +392,10 @@ export default function VideoPreview({
         {/* 3x3 Grid Overlay */}
         {showGridOverlay && (
           <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
-            {/* Vertical lines */}
-            <div className="absolute top-0 bottom-0 left-1/3 border-l-2 border-dotted border-black" />
-            <div className="absolute top-0 bottom-0 right-1/3 border-l-2 border-dotted border-black" />
-            {/* Horizontal lines */}
-            <div className="absolute left-0 right-0 top-1/3 border-t-2 border-dotted border-black" />
-            <div className="absolute left-0 right-0 bottom-1/3 border-t-2 border-dotted border-black" />
+            <div className="absolute top-0 bottom-0 left-1/3 border-l border-white/40" />
+            <div className="absolute top-0 bottom-0 right-1/3 border-l border-white/40" />
+            <div className="absolute left-0 right-0 top-1/3 border-t border-white/40" />
+            <div className="absolute left-0 right-0 bottom-1/3 border-t border-white/40" />
           </div>
         )}
 
@@ -382,75 +410,56 @@ export default function VideoPreview({
             onUpdateText={onUpdateText || (() => {})}
           />
         )}
+      </div>
 
-        {/* Toggle button */}
-        {recipe && !isLoading && (
-          <button
-            type="button"
-            onClick={() => setShowOverlay((v) => !v)}
-            className={`absolute top-2 left-2 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto ${
-              showOverlay
-                ? "bg-[var(--accent)] text-white"
-                : "bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)]"
-            }`}
-            aria-pressed={showOverlay}
-            aria-label={showOverlay ? "Hide framing overlay" : "Show framing overlay"}
-            title={showOverlay ? "Hide framing overlay" : "Show framing overlay"}
-          >
-            {showOverlay ? "Hide overlay" : "Show overlay"}
-          </button>
-        )}
-
-        {/* Grid overlay button */}
-        {recipe && !isLoading && (
-          <button
-            type="button"
-            onClick={() => setShowGridOverlay((v) => !v)}
-            className={`absolute top-2 left-32 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto ${
-              showGridOverlay
-                ? "bg-[var(--accent)] text-white"
-                : "bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)]"
-            }`}
-            aria-pressed={showGridOverlay}
-            aria-label={showGridOverlay ? "Hide grid overlay" : "Show grid overlay"}
-            title={showGridOverlay ? "Hide grid overlay" : "Show grid overlay"}
-          >
-            {showGridOverlay ? "Hide grid" : "Show grid"}
-          </button>
-        )}
-
-        {/* Compare button */}
-        {recipe && !isLoading && (
-          <button
-            type="button"
-            onClick={() => setShowComparison((v) => !v)}
-            className={`absolute top-2 right-32 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto ${
-              showComparison
-                ? "bg-[var(--accent)] text-white"
-                : "bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)]"
-            }`}
-            aria-pressed={showComparison}
-            aria-label={showComparison ? "Hide comparison preview" : "Show comparison preview"}
-            title={showComparison ? "Hide comparison preview" : "Show comparison preview"}
-          >
-            Compare
-          </button>
-        )}
-
-        {/* Grab frame button */}
-        {!isLoading && (
+      {/* Viewer toolbar: below the picture so controls never cover the video. */}
+      {!isLoading && (
+        <div role="toolbar" aria-label="Preview tools" className="mt-3 flex flex-wrap items-center gap-1.5">
+          {recipe && (
+            <>
+              <button
+                type="button"
+                onClick={() => setShowOverlay((v) => !v)}
+                className={toolButton(showOverlay)}
+                aria-pressed={showOverlay}
+                title="Show how the output frame crops or letterboxes the video"
+              >
+                <Frame size={14} aria-hidden="true" />
+                Framing guide
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowGridOverlay((v) => !v)}
+                className={toolButton(showGridOverlay)}
+                aria-pressed={showGridOverlay}
+                title="Rule-of-thirds grid"
+              >
+                <Grid3x3 size={14} aria-hidden="true" />
+                Grid
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowComparison((v) => !v)}
+                className={toolButton(showComparison)}
+                aria-pressed={showComparison}
+                title="Compare the original with your adjustments side by side"
+              >
+                <Columns2 size={14} aria-hidden="true" />
+                Compare
+              </button>
+            </>
+          )}
           <button
             type="button"
             onClick={handleGrabFrame}
-            className="absolute top-2 right-2 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] flex items-center gap-1"
-            aria-label="Grab frame as PNG"
-            title="Download current frame as PNG"
+            className="btn btn-ghost btn-sm ml-auto"
+            title="Download the current frame as a PNG"
           >
-            <Camera className="w-3 h-3" />
-            Grab frame
+            <Camera size={14} aria-hidden="true" />
+            Save frame
           </button>
-        )}
-      </div>
+        </div>
+      )}
 
       {showComparison && file && (
         <div className="mt-4">
diff --git a/src/components/__tests__/exportEstimate.overlay.test.ts b/src/components/__tests__/exportEstimate.overlay.test.ts
new file mode 100644
index 000000000..462df2a99
--- /dev/null
+++ b/src/components/__tests__/exportEstimate.overlay.test.ts
@@ -0,0 +1,15 @@
+import { describe, it, expect } from "vitest";
+import { estimateRemainingMs } from "../ExportOverlay";
+
+describe("estimateRemainingMs", () => {
+  it("extrapolates from progress so far", () => {
+    expect(estimateRemainingMs(25, 10_000)).toBe(30_000);
+    expect(estimateRemainingMs(50, 20_000)).toBe(20_000);
+  });
+
+  it("stays quiet while it would be a guess, or when nearly done", () => {
+    expect(estimateRemainingMs(2, 10_000)).toBeNull();
+    expect(estimateRemainingMs(40, 2_000)).toBeNull();
+    expect(estimateRemainingMs(99, 60_000)).toBeNull();
+  });
+});
diff --git a/src/components/__tests__/performance.test.tsx b/src/components/__tests__/performance.test.tsx
new file mode 100644
index 000000000..32fa163c0
--- /dev/null
+++ b/src/components/__tests__/performance.test.tsx
@@ -0,0 +1,258 @@
+import React, { Profiler, createRef } from "react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, act, fireEvent, waitFor } from "@testing-library/react";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+
+// ── ThumbnailStrip: frame generation is mocked; we test React-side behaviour ──
+const generateMock = vi.fn();
+vi.mock("@/lib/thumbnails", async (orig) => {
+  const actual = await orig<typeof import("@/lib/thumbnails")>();
+  return { ...actual, generateThumbnails: (...args: unknown[]) => generateMock(...args) };
+});
+
+import ThumbnailStrip, { findActiveFrameIndex } from "../ThumbnailStrip";
+import VideoPreview from "../VideoPreview";
+import FileUpload from "../FileUpload";
+import { ThemeProvider } from "../ThemeProvider";
+import { ThemeToggle, ContrastToggle } from "../ThemeToggle";
+import { DEFAULT_RECIPE } from "@/lib/constants";
+
+const frames = [0, 2, 4, 6].map((time) => ({ time, url: `blob:f${time}` }));
+
+beforeEach(() => {
+  generateMock.mockReset();
+  URL.createObjectURL = vi.fn(() => "blob:test");
+  URL.revokeObjectURL = vi.fn();
+});
+
+describe("findActiveFrameIndex", () => {
+  it("finds the last frame at or before the playhead", () => {
+    expect(findActiveFrameIndex(frames, -1)).toBe(-1);
+    expect(findActiveFrameIndex(frames, 0)).toBe(0);
+    expect(findActiveFrameIndex(frames, 3.9)).toBe(1);
+    expect(findActiveFrameIndex(frames, 100)).toBe(3);
+  });
+});
+
+describe("ThumbnailStrip", () => {
+  it("re-renders on playback only when the active frame changes", async () => {
+    generateMock.mockResolvedValue({ frames, skipped: 0 });
+    const video = document.createElement("video");
+    const videoRef = { current: video };
+    let commits = 0;
+    render(
+      <Profiler id="strip" onRender={() => commits++}>
+        <ThumbnailStrip videoSrc="blob:src" duration={8} videoRef={videoRef} onSeek={() => {}} />
+      </Profiler>
+    );
+    await screen.findByText(/4 frames/);
+    // Let the initial playhead sync commit before taking the baseline;
+    // findByText can resolve before that effect has flushed.
+    await act(async () => {});
+    const before = commits;
+
+    // 20 timeupdates inside the first frame's range: no commits at all.
+    for (let i = 0; i < 20; i++) {
+      Object.defineProperty(video, "currentTime", { configurable: true, value: 0.05 * i });
+      act(() => {
+        video.dispatchEvent(new Event("timeupdate"));
+      });
+    }
+    expect(commits).toBe(before);
+
+    // Crossing into the next frame: exactly one commit, and the right frame is current.
+    Object.defineProperty(video, "currentTime", { configurable: true, value: 2.1 });
+    act(() => {
+      video.dispatchEvent(new Event("timeupdate"));
+    });
+    expect(commits).toBe(before + 1);
+    expect(screen.getByRole("button", { name: "Seek to 0:02" })).toHaveAttribute("aria-current", "true");
+  });
+
+  it("aborts in-flight generation and revokes frames when the source changes", async () => {
+    generateMock.mockResolvedValueOnce({ frames, skipped: 0 });
+    const { rerender, unmount } = render(
+      <ThumbnailStrip videoSrc="blob:a" duration={8} onSeek={() => {}} />
+    );
+    await screen.findByText(/4 frames/);
+
+    let signal: AbortSignal | undefined;
+    generateMock.mockImplementationOnce((_src, _times, opts: { signal: AbortSignal }) => {
+      signal = opts.signal;
+      return new Promise(() => {});
+    });
+    rerender(<ThumbnailStrip videoSrc="blob:b" duration={8} onSeek={() => {}} />);
+    // Frames from the previous source were released.
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:f0");
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:f6");
+
+    unmount();
+    expect(signal?.aborted).toBe(true);
+  });
+
+  it("shows a recoverable message when generation fails", async () => {
+    generateMock.mockRejectedValueOnce(new Error("Video could not be decoded for thumbnails"));
+    render(<ThumbnailStrip videoSrc="blob:a" duration={8} onSeek={() => {}} />);
+    expect(await screen.findByText(/couldn.t be generated/i)).toBeInTheDocument();
+    generateMock.mockResolvedValueOnce({ frames, skipped: 0 });
+    fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+    expect(await screen.findByText(/4 frames/)).toBeInTheDocument();
+  });
+
+  it("caps work for long videos", async () => {
+    generateMock.mockResolvedValue({ frames: [], skipped: 0 });
+    render(<ThumbnailStrip videoSrc="blob:a" duration={4 * 3600} onSeek={() => {}} />);
+    await waitFor(() => expect(generateMock).toHaveBeenCalled());
+    const times = generateMock.mock.calls[0]![1] as number[];
+    expect(times.length).toBeLessThanOrEqual(48);
+  });
+});
+
+// ── VideoPreview: ResizeObserver guard ─────────────────────────────────────
+describe("VideoPreview sizing", () => {
+  let observerCallback: ResizeObserverCallback | null = null;
+  beforeEach(() => {
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        constructor(cb: ResizeObserverCallback) {
+          observerCallback = cb;
+        }
+        observe() {}
+        disconnect() {}
+      }
+    );
+    vi.spyOn(HTMLMediaElement.prototype, "load").mockImplementation(() => {});
+    vi.spyOn(HTMLMediaElement.prototype, "pause").mockImplementation(() => {});
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("skips re-rendering when the measured size hasn't changed", () => {
+    let commits = 0;
+    const file = new File(["x"], "a.mp4", { type: "video/mp4" });
+    render(
+      <Profiler id="preview" onRender={() => commits++}>
+        <VideoPreview file={file} recipe={{ ...DEFAULT_RECIPE }} videoRef={createRef<HTMLVideoElement>()} />
+      </Profiler>
+    );
+    const fire = (width: number, height: number) =>
+      act(() => observerCallback?.([{ contentRect: { width, height } } as ResizeObserverEntry], {} as ResizeObserver));
+
+    fire(640, 360);
+    const afterFirst = commits;
+    fire(640, 360);
+    fire(640.4, 360.2); // sub-pixel jitter
+    expect(commits).toBe(afterFirst);
+    fire(800, 450);
+    expect(commits).toBe(afterFirst + 1);
+  });
+});
+
+// ── FileUpload: one drop → one selection ───────────────────────────────────
+describe("FileUpload", () => {
+  it("handles a drop on the drop zone exactly once", () => {
+    const onFileSelect = vi.fn();
+    render(<FileUpload onFileSelect={onFileSelect} currentFile={null} fileError="" duration={0} />);
+    const file = new File(["x"], "clip.mp4", { type: "video/mp4" });
+    fireEvent.drop(screen.getByRole("button", { name: /choose a video/i }), { dataTransfer: { files: [file] } });
+    expect(onFileSelect).toHaveBeenCalledTimes(1);
+    expect(onFileSelect).toHaveBeenCalledWith(file);
+  });
+
+  it("describes only the formats the validator accepts", () => {
+    render(<FileUpload onFileSelect={() => {}} currentFile={null} fileError="" duration={0} />);
+    expect(screen.queryByText(/most video formats/i)).toBeNull();
+    expect(screen.getAllByText(/MP4, MOV, WebM, MKV and AVI/).length).toBeGreaterThan(0);
+  });
+});
+
+// ── Themes and reduced motion ──────────────────────────────────────────────
+function mockMatchMedia(matches: (q: string) => boolean) {
+  window.matchMedia = ((query: string) => ({
+    matches: matches(query),
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  })) as typeof window.matchMedia;
+}
+
+describe("theme switching", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.className = "";
+    delete document.documentElement.dataset.theme;
+  });
+
+  it("crossfades colours only briefly around an explicit toggle", async () => {
+    vi.useFakeTimers();
+    mockMatchMedia(() => false);
+    render(
+      <ThemeProvider>
+        <ThemeToggle />
+      </ThemeProvider>
+    );
+    act(() => screen.getByRole("button", { name: /switch to dark/i }).click());
+    expect(document.documentElement.classList.contains("theme-transition")).toBe(true);
+    act(() => {
+      vi.advanceTimersByTime(250);
+    });
+    expect(document.documentElement.classList.contains("theme-transition")).toBe(false);
+    vi.useRealTimers();
+  });
+
+  it("skips the crossfade entirely under prefers-reduced-motion", () => {
+    mockMatchMedia((q) => q.includes("reduced-motion"));
+    render(
+      <ThemeProvider>
+        <ThemeToggle />
+      </ThemeProvider>
+    );
+    act(() => screen.getByRole("button", { name: /switch to dark/i }).click());
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+    expect(document.documentElement.classList.contains("theme-transition")).toBe(false);
+  });
+
+  it("high contrast is reachable, persisted, and follows prefers-contrast by default", () => {
+    mockMatchMedia((q) => q.includes("prefers-contrast: more"));
+    render(
+      <ThemeProvider>
+        <ContrastToggle />
+      </ThemeProvider>
+    );
+    expect(document.documentElement.dataset.theme).toBe("high-contrast");
+    const btn = screen.getByRole("button", { name: "High contrast" });
+    expect(btn).toHaveAttribute("aria-pressed", "true");
+    act(() => btn.click());
+    expect(document.documentElement.dataset.theme).toBeUndefined();
+    expect(localStorage.getItem("contrast")).toBe("standard");
+  });
+});
+
+describe("global stylesheet", () => {
+  const css = readFileSync(path.resolve(__dirname, "../../app/globals.css"), "utf8");
+  const withoutComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
+
+  it("has no always-on universal transition", () => {
+    // A `*` rule may only set transitions inside the reduced-motion override
+    // or the short-lived .theme-transition window.
+    const universalRules = withoutComments.match(/(^|\})\s*\*,[^{]*\{[^}]*transition[^}]*\}/g) ?? [];
+    expect(universalRules).toEqual([]);
+    expect(withoutComments).not.toMatch(/transition:\s*all/);
+  });
+
+  it("defines a reduced-motion override and makes no external font requests", () => {
+    expect(withoutComments).toMatch(/@media \(prefers-reduced-motion: reduce\)/);
+    expect(withoutComments).not.toMatch(/@import url\(/);
+  });
+
+  it("keeps the public token names", () => {
+    for (const token of ["--bg", "--surface", "--border", "--text", "--muted"]) {
+      expect(withoutComments).toContain(`${token}:`);
+    }
+  });
+});
diff --git a/src/components/components.tsx b/src/components/components.tsx
index bd5241a5f..a1edd399f 100644
--- a/src/components/components.tsx
+++ b/src/components/components.tsx
@@ -42,15 +42,15 @@ export function Button({ variant = "primary", className = "", children, ...props
   const variants = {
     primary: `
       bg-[var(--accent)]
-      text-white
-      hover:bg-[var(--accent-hover)] hover:scale-[1.02]
+      text-[var(--on-accent)]
+      hover:bg-[var(--accent-hover)]
       focus:ring-[var(--accent)]
     `,
     secondary: `
       bg-[var(--accent-muted)]
       text-[var(--text)]
       border border-[var(--accent)]
-      hover:bg-[var(--surface)] hover:scale-[1.02]
+      hover:bg-[var(--surface)]
       focus:ring-[var(--accent)]
     `,
     ghost: `
@@ -68,7 +68,7 @@ export function Button({ variant = "primary", className = "", children, ...props
         rounded-[var(--radius)] px-4 py-2 text-sm font-medium
         focus:outline-none focus:ring-2 focus:ring-offset-2
         focus:ring-offset-[var(--bg)]
-        transition-all duration-200
+        transition-colors duration-fast
         disabled:opacity-50 disabled:cursor-not-allowed
         ${variants[variant]}
         ${className}
@@ -90,7 +90,7 @@ export function Input({ className = "", ...props }: React.InputHTMLAttributes<HT
         w-full rounded-[var(--radius)] border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm text-[var(--text)]
         placeholder:text-[var(--muted)]
         focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-muted)]
-        transition-all duration-200
+        transition-colors duration-fast
         ${className}
       `}
       {...props}
diff --git a/src/components/ui/BaseButton.tsx b/src/components/ui/BaseButton.tsx
index e889f045d..ec8f0a4ae 100644
--- a/src/components/ui/BaseButton.tsx
+++ b/src/components/ui/BaseButton.tsx
@@ -17,28 +17,28 @@ interface BaseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const BaseButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, BaseButtonProps>(
   ({ className, variant = "secondary", size = "md", active, children, as = "button", ...props }, ref) => {
     const Component = as as any;
+    // Maps onto the shared .btn classes in globals.css so every button in the
+    // app has the same shape, states and transitions.
     const variants = {
-      primary: "bg-film-600 text-white shadow-lg shadow-film-200 dark:shadow-none hover:bg-film-700",
-      secondary: active
-        ? "border-film-500 bg-film-50 text-film-700 font-heading font-semibold dark:bg-film-900/20 dark:text-film-400 dark:border-film-700"
-        : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-film-300 hover:bg-film-50/30 dark:hover:bg-film-900/10",
-      ghost: "bg-transparent hover:bg-[var(--surface)]",
-      outline: "border border-[var(--border)] bg-transparent hover:border-film-300",
+      primary: "btn-primary",
+      secondary: "btn-secondary",
+      ghost: "btn-ghost",
+      outline: "btn-secondary bg-transparent",
     };
 
     const sizes = {
-      sm: "px-2 py-1 text-[10px]",
-      md: "px-3 py-2 text-xs",
-      lg: "px-4 py-3 text-sm",
-      xl: "py-5 text-2xl tracking-widest font-display",
+      sm: "btn-sm",
+      md: "",
+      lg: "btn-lg",
+      xl: "btn-lg w-full text-base",
     };
 
     return (
       <Component
         ref={ref}
+        aria-pressed={active}
         className={cn(
-          "flex items-center justify-center gap-2 rounded-lg transition-all duration-200",
-          "hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:scale-100",
+          "btn",
           variants[variant],
           sizes[size],
           className
diff --git a/src/hooks/tests/useKeyboardShortcuts.test.tsx b/src/hooks/tests/useKeyboardShortcuts.test.tsx
index 1eaa60532..4685ed89a 100644
--- a/src/hooks/tests/useKeyboardShortcuts.test.tsx
+++ b/src/hooks/tests/useKeyboardShortcuts.test.tsx
@@ -22,7 +22,7 @@ function setup(file: File | null = new File(["x"], "a.mp4")) {
       status: "idle",
       cancelExport: vi.fn(),
       onToggleShortcutsModal: vi.fn(),
-      currentTime: 0,
+      getCurrentTime: () => 0,
       duration: 10,
       undo,
       redo,
diff --git a/src/hooks/tests/useVideoEditor.export.test.ts b/src/hooks/tests/useVideoEditor.export.test.ts
new file mode 100644
index 000000000..c29b87f38
--- /dev/null
+++ b/src/hooks/tests/useVideoEditor.export.test.ts
@@ -0,0 +1,210 @@
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeAll, beforeEach, afterEach } from "vitest";
+import { useVideoEditor } from "../useVideoEditor";
+import { loadFFmpeg, exportVideo, terminateFFmpeg, ExportStalledError } from "@/lib/ffmpeg";
+
+// Real error classes, mocked engine.
+vi.mock("@/lib/ffmpeg", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/lib/ffmpeg")>()),
+  loadFFmpeg: vi.fn(),
+  exportVideo: vi.fn(),
+  terminateFFmpeg: vi.fn(),
+  getEngineMode: vi.fn(() => "multi"),
+}));
+vi.mock("@/lib/sessionDB", () => ({
+  saveSessionFile: vi.fn().mockResolvedValue(undefined),
+  loadSessionFile: vi.fn().mockResolvedValue(null),
+  clearSessionFile: vi.fn().mockResolvedValue(undefined),
+}));
+
+const okResult = {
+  blobUrl: "blob:result",
+  blob: new Blob(),
+  size: 1000,
+  width: 1920,
+  height: 1080,
+  format: "mp4" as const,
+  dispose: () => {},
+};
+
+// jsdom has no media pipeline: make <video> report metadata as soon as a src is set.
+beforeAll(() => {
+  Object.defineProperty(HTMLMediaElement.prototype, "src", {
+    configurable: true,
+    get() {
+      return (this as { _src?: string })._src ?? "";
+    },
+    set(this: HTMLVideoElement & { _src?: string }, v: string) {
+      this._src = v;
+      setTimeout(() => this.onloadedmetadata?.(new Event("loadedmetadata")), 0);
+    },
+  });
+  Object.defineProperty(HTMLVideoElement.prototype, "videoWidth", { configurable: true, get: () => 1920 });
+  Object.defineProperty(HTMLVideoElement.prototype, "videoHeight", { configurable: true, get: () => 1080 });
+  Object.defineProperty(HTMLMediaElement.prototype, "duration", { configurable: true, get: () => 12 });
+  URL.createObjectURL = vi.fn(() => "blob:test");
+  URL.revokeObjectURL = vi.fn();
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  localStorage.clear();
+  window.history.replaceState(null, "", "/");
+  vi.mocked(loadFFmpeg).mockResolvedValue(undefined);
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+/** An MP4 whose first bytes contain the `ftyp` box the magic-byte check looks for. */
+function mp4File() {
+  const bytes = new Uint8Array([0, 0, 0, 24, 0x66, 0x74, 0x79, 0x70, 0x69, 0x73, 0x6f, 0x6d]);
+  return new File([bytes], "clip.mp4", { type: "video/mp4" });
+}
+
+async function editorWithFile() {
+  const hook = renderHook(() => useVideoEditor());
+  act(() => hook.result.current.handleFileSelect(mp4File()));
+  await waitFor(() => expect(hook.result.current.file).not.toBeNull());
+  return hook;
+}
+
+describe("useVideoEditor export lifecycle", () => {
+  it("a failed export keeps the user's settings, restarts the engine, and can be retried", async () => {
+    const { result } = await editorWithFile();
+    act(() => result.current.updateRecipe({ speed: 2, brightness: 0.3 }));
+
+    vi.mocked(exportVideo).mockRejectedValueOnce(new Error("ffmpeg exited with code 1"));
+    await act(() => result.current.handleExport());
+
+    expect(result.current.status).toBe("error");
+    expect(result.current.error).toMatch(/settings are kept/i);
+    expect(result.current.recipe.speed).toBe(2);
+    expect(result.current.recipe.brightness).toBe(0.3);
+    expect(terminateFFmpeg).toHaveBeenCalledTimes(1);
+
+    vi.mocked(exportVideo).mockResolvedValueOnce(okResult);
+    await act(() => result.current.handleExport());
+    expect(result.current.status).toBe("done");
+    expect(result.current.error).toBeNull();
+    expect(result.current.result?.size).toBe(1000);
+  });
+
+  it("a stalled multi-threaded export ends in an actionable error, not a frozen 0%", async () => {
+    const { result } = await editorWithFile();
+    vi.mocked(exportVideo).mockRejectedValueOnce(new ExportStalledError("multi"));
+    await act(() => result.current.handleExport());
+    expect(result.current.status).toBe("error");
+    expect(result.current.error).toMatch(/single-threaded/i);
+    expect(result.current.error).toMatch(/retry export/i);
+    expect(terminateFFmpeg).toHaveBeenCalled();
+
+    vi.mocked(exportVideo).mockResolvedValueOnce(okResult);
+    await act(() => result.current.handleExport());
+    expect(result.current.status).toBe("done");
+  });
+
+  it("starts the encode phase at 0% even though engine load reported 100%", async () => {
+    const { result } = await editorWithFile();
+    vi.mocked(loadFFmpeg).mockImplementationOnce(async (_signal, onProgress) => {
+      onProgress?.(100);
+    });
+    vi.mocked(exportVideo).mockImplementationOnce(() => new Promise(() => {}));
+    act(() => {
+      void result.current.handleExport();
+    });
+    await waitFor(() => expect(result.current.status).toBe("exporting"));
+    expect(result.current.progress).toBe(0);
+  });
+
+  it("passes the already-known duration so export skips a second metadata read", async () => {
+    const { result } = await editorWithFile();
+    vi.mocked(exportVideo).mockResolvedValueOnce(okResult);
+    await act(() => result.current.handleExport());
+    const args = vi.mocked(exportVideo).mock.calls[0]!;
+    expect(args[6]).toBe(12);
+  });
+
+  it("cancelling returns to idle without touching the recipe", async () => {
+    const { result } = await editorWithFile();
+    act(() => result.current.updateRecipe({ format: "webm" }));
+    vi.mocked(exportVideo).mockImplementationOnce(() => new Promise(() => {})); // never settles
+
+    act(() => {
+      void result.current.handleExport();
+    });
+    await waitFor(() => expect(result.current.status).toBe("exporting"));
+    act(() => result.current.cancelExport());
+
+    expect(result.current.status).toBe("idle");
+    expect(result.current.progress).toBe(0);
+    expect(result.current.error).toBeNull();
+    expect(result.current.recipe.format).toBe("webm");
+    expect(terminateFFmpeg).toHaveBeenCalled();
+  });
+
+  it("a cancelled export that later rejects doesn't surface an error", async () => {
+    const { result } = await editorWithFile();
+    let reject!: (e: unknown) => void;
+    vi.mocked(exportVideo).mockImplementationOnce(() => new Promise((_, r) => (reject = r)));
+    let done!: Promise<void>;
+    act(() => {
+      done = result.current.handleExport();
+    });
+    await waitFor(() => expect(result.current.status).toBe("exporting"));
+    act(() => result.current.cancelExport());
+    await act(async () => {
+      reject(new DOMException("Export cancelled", "AbortError"));
+      await done;
+    });
+    expect(result.current.status).toBe("idle");
+    expect(result.current.error).toBeNull();
+  });
+
+  it("exposes the playhead on demand instead of as per-frame state", () => {
+    const { result } = renderHook(() => useVideoEditor());
+    expect(result.current.getCurrentTime()).toBe(0);
+    expect("currentTime" in result.current).toBe(false);
+  });
+});
+
+describe("useVideoEditor URL sync", () => {
+  it("debounces history.replaceState across rapid recipe changes", async () => {
+    vi.useFakeTimers();
+    const spy = vi.spyOn(window.history, "replaceState");
+    const { result } = renderHook(() => useVideoEditor());
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(300);
+    });
+    spy.mockClear();
+
+    for (let i = 1; i <= 10; i++) {
+      act(() => result.current.updateRecipe({ brightness: i / 10 }));
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(20);
+      });
+    }
+    expect(spy).not.toHaveBeenCalled();
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(300);
+    });
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(window.location.search).toContain("brightness=1");
+    spy.mockRestore();
+  });
+
+  it("never writes array fields such as textOverlays into the URL", async () => {
+    vi.useFakeTimers();
+    const { result } = renderHook(() => useVideoEditor());
+    act(() =>
+      result.current.updateRecipe({
+        textOverlays: [{ id: "t1", text: "Hi", x: 50, y: 50, fontSize: 24, color: "#fff", fontWeight: "bold" }],
+      })
+    );
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(300);
+    });
+    expect(window.location.search).not.toContain("textOverlays");
+  });
+});
diff --git a/src/hooks/useKeyboardShortcuts.ts b/src/hooks/useKeyboardShortcuts.ts
index 7fbc0b3fe..c16c3677f 100644
--- a/src/hooks/useKeyboardShortcuts.ts
+++ b/src/hooks/useKeyboardShortcuts.ts
@@ -1,6 +1,6 @@
 import { EditRecipe, ExportStatus } from "@/lib/types";
 import { PRESETS } from "@/lib/presets";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { isMacPlatform, isTextEntryTarget, matchHistoryShortcut } from "@/lib/historyShortcuts";
 
 interface UseKeyboardShortcutsProps {
@@ -12,7 +12,8 @@ interface UseKeyboardShortcutsProps {
   status: ExportStatus;
   cancelExport: () => void;
   onToggleShortcutsModal: () => void;
-  currentTime: number;
+  /** Reads the playhead at key-press time (no per-frame re-subscription). */
+  getCurrentTime: () => number;
   duration: number;
   undo?: () => void;
   redo?: () => void;
@@ -27,15 +28,11 @@ export function useKeyboardShortcuts({
   status,
   cancelExport,
   onToggleShortcutsModal,
-  currentTime,
+  getCurrentTime,
   duration,
   undo,
   redo,
 }: UseKeyboardShortcutsProps) {
-  const currentTimeRef = useRef(currentTime);
-  useEffect(() => {
-    currentTimeRef.current = currentTime;
-  }, [currentTime]);
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Undo/redo works from sliders and buttons too, but never steals the
@@ -52,6 +49,7 @@ export function useKeyboardShortcuts({
       if (
         target.tagName === "INPUT" ||
         target.tagName === "TEXTAREA" ||
+        target.tagName === "SELECT" ||
         target.isContentEditable
       ) return;
 
@@ -87,11 +85,11 @@ export function useKeyboardShortcuts({
           break;
         case "i":
         case "I":
-          updateRecipe({trimStart: Math.floor(currentTimeRef.current)});
+          updateRecipe({ trimStart: Math.floor(getCurrentTime()) });
           break;
         case "o":
         case "O":
-          updateRecipe({trimEnd: Math.floor(currentTimeRef.current)});
+          updateRecipe({ trimEnd: Math.floor(getCurrentTime()) });
           break;
 
         default:
@@ -106,5 +104,5 @@ export function useKeyboardShortcuts({
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [file, recipe, resetSettings, updateRecipe, handleExport, status, cancelExport, onToggleShortcutsModal, currentTime, duration, undo, redo]);
+  }, [file, recipe, resetSettings, updateRecipe, handleExport, status, cancelExport, onToggleShortcutsModal, getCurrentTime, duration, undo, redo]);
 }
diff --git a/src/hooks/useVideoEditor.ts b/src/hooks/useVideoEditor.ts
index a423431a6..34d6f52fd 100644
--- a/src/hooks/useVideoEditor.ts
+++ b/src/hooks/useVideoEditor.ts
@@ -41,6 +41,7 @@ import {
 import {
   addTelemetryRedaction,
   durationBucket,
+  failureCategory,
   HANDLED_ERROR_PREFIX,
   resolutionBucket,
   sizeBucket,
@@ -127,6 +128,33 @@ function clearSavedEditorData() {
   clearSessionFile().catch(console.error);
 }
 
+/** Mirrors recipe changes into the URL at most this often (slider drags fire per pixel). */
+const URL_SYNC_DEBOUNCE_MS = 250;
+
+function outputDimensions(recipe: EditRecipe) {
+  if (recipe.preset === "custom") return { width: recipe.customWidth, height: recipe.customHeight };
+  const preset = getPresetById(recipe.preset);
+  return { width: preset?.width ?? 1920, height: preset?.height ?? 1080 };
+}
+
+/** User-facing message for a failed export; never echoes raw FFmpeg output. */
+export function describeExportError(err: unknown): string {
+  // Both already say what happened and what to do next.
+  if (err instanceof ExportStalledError || err instanceof FFmpegLoadError) return err.message;
+  switch (failureCategory(err)) {
+    case "network":
+      return "Network error while loading the video engine. Check your connection and try again.";
+    case "codec":
+      return "This video format is not supported. Try converting it to MP4 (H.264) first.";
+    case "memory":
+      return "The browser ran out of memory. Try a shorter clip, a smaller output size, or close other tabs.";
+    case "crash":
+      return "The video engine crashed while encoding. Your settings are kept — try again, or choose a different format.";
+    default:
+      return "Export failed. Your settings are kept — try again, or try a different format.";
+  }
+}
+
 export function extractMetadata(
   file: File
 ): Promise<{ width: number; height: number; duration: number }> {
@@ -359,7 +387,6 @@ export function useVideoEditor() {
   const overlayPosition = edit.imageOverlay.position;
   const overlaySize = edit.imageOverlay.size;
   const overlayOpacity = edit.imageOverlay.opacity;
-  const [currentTime, setCurrentTime] = useState(0);
 
   // Phase 1 MVP: Multi-track timeline support
   const [multiTrackState, setMultiTrackState] =
@@ -550,35 +577,36 @@ export function useVideoEditor() {
     };
   }, [resetEdit, updateRecovery]);
 
+  // Debounced: replaceState on every slider tick is wasted work and Safari
+  // throws after 100 calls in 30 seconds.
   useEffect(() => {
     if (typeof window === "undefined") return;
-    try {
-      const params = new URLSearchParams();
-      const recipeKeys = Object.keys(DEFAULT_RECIPE) as Array<keyof EditRecipe>;
+    const timer = setTimeout(() => {
+      try {
+        const params = new URLSearchParams();
+        const recipeKeys = Object.keys(DEFAULT_RECIPE) as Array<keyof EditRecipe>;
 
-      recipeKeys.forEach((key) => {
-        const currentVal = recipe[key];
-        const defaultVal = DEFAULT_RECIPE[key];
+        recipeKeys.forEach((key) => {
+          const currentVal = recipe[key];
+          const defaultVal = DEFAULT_RECIPE[key];
+          // Lists such as textOverlays can't round-trip through a query string.
+          if (typeof defaultVal === "object" && defaultVal !== null) return;
+          if (currentVal !== defaultVal) {
+            params.set(key, currentVal === null ? "null" : String(currentVal));
+          }
+        });
 
-        // Lists such as textOverlays can't round-trip through a query string.
-        if (typeof defaultVal === "object" && defaultVal !== null) return;
-        if (currentVal !== defaultVal) {
-          params.set(key, currentVal === null ? "null" : String(currentVal));
+        const newQuery = params.toString();
+        const currentQuery = window.location.search.replace(/^\?/, "");
+        if (newQuery !== currentQuery) {
+          const newUrl = newQuery ? `${window.location.pathname}?${newQuery}` : window.location.pathname;
+          window.history.replaceState(null, "", newUrl);
         }
-      });
-
-      const newQuery = params.toString();
-      const currentQuery = window.location.search.replace(/^\?/, "");
-
-      if (newQuery !== currentQuery) {
-        const newUrl = newQuery
-          ? `${window.location.pathname}?${newQuery}`
-          : window.location.pathname;
-        window.history.replaceState(null, "", newUrl);
+      } catch {
+        // ignore
       }
-    } catch (e) {
-      // ignore
-    }
+    }, URL_SYNC_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
   }, [recipe]);
 
   // Persist the full recipe (debounced)
@@ -730,15 +758,13 @@ export function useVideoEditor() {
     exportAbortControllerRef.current = abortController;
     exportCancelledRef.current = false;
 
-    const preset = recipe.preset === "custom" ? null : getPresetById(recipe.preset);
-    const outW = preset ? preset.width : recipe.customWidth;
-    const outH = preset ? preset.height : recipe.customHeight;
+    const output = outputDimensions(recipe);
     const clipSeconds = ((recipe.trimEnd ?? duration) - recipe.trimStart) / recipe.speed;
     // Low-cardinality only: never the file name, captions or exact values.
     const attempt = new ExportAttempt(
       {
         format: recipe.format,
-        resolution: resolutionBucket(outW, outH),
+        resolution: resolutionBucket(output.width, output.height),
         input_size: sizeBucket(file.size),
         clip_length: durationBucket(clipSeconds),
         has_text: (recipe.textOverlays?.length ?? 0) > 0,
@@ -763,6 +789,9 @@ export function useVideoEditor() {
 
       const startedAt = Date.now();
       attempt.encoding(getEngineMode());
+      // The engine reports 100% when it finishes loading; without this reset
+      // the export dialog opened at "100%" until FFmpeg's first progress event.
+      trackProgress(0);
       setExportStartedAt(startedAt);
       setStatus("exporting");
 
@@ -809,18 +838,13 @@ export function useVideoEditor() {
       // Reported above as export_failed; the prefix keeps RUM's automatic
       // console-error collection from reporting it a second time.
       console.error(`${HANDLED_ERROR_PREFIX} export failed:`, err);
-      if (err instanceof FFmpegLoadError || err instanceof ExportStalledError) {
-        // Both messages say what happened and what to do next.
-        setError(err.message);
-      } else if (err instanceof Error && err.message.includes("network")) {
-        setError("Network error. Check your internet connection and try again.");
-      } else if (err instanceof Error && err.message.includes("codec")) {
-        setError("This video format is not supported. Try converting to MP4 first.");
-      } else {
-        setError("Export failed. Please try again or use a different video.");
-      }
+      setError(describeExportError(err));
       setExportStartedAt(null);
       setStatus("error");
+      // A failed FFmpeg run can leave the engine's virtual filesystem or heap
+      // in a bad state (e.g. after running out of memory). Start the retry
+      // from a fresh worker; the core files come back from the HTTP cache.
+      terminateFFmpeg();
     } finally {
       if (exportAbortControllerRef.current === abortController) {
         exportAbortControllerRef.current = null;
@@ -1138,13 +1162,12 @@ export function useVideoEditor() {
       videoRef.current.currentTime = time;
     }
   }, []);
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-    const handleTimeUpdate = () => setCurrentTime(video.currentTime);
-    video.addEventListener("timeupdate", handleTimeUpdate);
-    return () => video.removeEventListener("timeupdate", handleTimeUpdate);
-  });
+
+  // Playback position is read from the <video> on demand instead of being
+  // mirrored into React state: a `timeupdate` listener here (re-attached on
+  // every render) re-rendered the whole editor 4–60 times a second during
+  // playback. Components that need the playhead subscribe to the element.
+  const getCurrentTime = useCallback(() => videoRef.current?.currentTime ?? 0, []);
 
   const toggleSound = useCallback(() => {
     setSoundOnCompletion((prev) => !prev);
@@ -1196,7 +1219,7 @@ export function useVideoEditor() {
     overlayOpacity,
     setOverlayOpacity,
     recommendedPreset,
-    currentTime,
+    getCurrentTime,
     toggleSound,
     // Phase 1 MVP: Multi-track timeline support
     multiTrackState,
diff --git a/src/lib/ffmpeg.ts b/src/lib/ffmpeg.ts
index c64dcc8ca..97869675b 100644
--- a/src/lib/ffmpeg.ts
+++ b/src/lib/ffmpeg.ts
@@ -39,8 +39,8 @@ export class ExportStalledError extends Error {
     super(
       `${STALL_MESSAGES[reason]} ` +
         (mode === "multi"
-          ? "Press Retry to try again with the single-threaded engine, which is slower but more reliable."
-          : "Press Retry to try again, or try a shorter clip or a lower resolution.")
+          ? "Press Retry export to try again with the single-threaded engine, which is slower but more reliable."
+          : "Press Retry export to try again, or try a shorter clip or a lower resolution.")
     );
   }
 }
@@ -67,10 +67,17 @@ export function overrunLimitSeconds(expectedSeconds: number): number {
 }
 
 
+/**
+ * A file for the worker. `blob` is the user's File itself: it crosses to the
+ * worker by reference and the worker reads it, so the page never holds a
+ * copy of the bytes (a 300 MB read on the page caused multi-second GC pauses).
+ * `data` (raw bytes) is still accepted.
+ */
 type SerializedFile = {
   name: string;
   type: string;
-  data: ArrayBuffer;
+  blob?: Blob;
+  data?: ArrayBuffer;
 };
 
 type WorkerExportRequest = {
@@ -91,7 +98,10 @@ type WorkerProgressResponse = { type: "progress"; percent: number; outputSeconds
 type WorkerResultResponse = {
   type: "result";
   id: string;
-  data: ArrayBuffer;
+  /** The output, already wrapped by the worker (current workers). */
+  blob?: Blob;
+  /** The output as raw bytes (older workers and tests). */
+  data?: ArrayBuffer;
   mimeType: string;
   size: number;
   width: number;
@@ -219,7 +229,7 @@ function handleWorkerMessage(event: MessageEvent<WorkerResponse>) {
 
   if (data.type === "result") {
     if (pendingExport?.id !== data.id) return;
-    const blob = new Blob([data.data], { type: data.mimeType });
+    const blob = data.blob ?? new Blob([data.data ?? new ArrayBuffer(0)], { type: data.mimeType });
     const blobUrl = URL.createObjectURL(blob);
     pendingExport.resolve({
       blobUrl,
@@ -359,7 +369,7 @@ export async function exportVideo(
   } catch (err) {
     if (!(err instanceof ExportStalledError) || err.mode !== "multi" || signal?.aborted) throw err;
     // The stall set preferSingleThread, so this loads the single-threaded core.
-    // The file is read again: its first copy was transferred to the old worker.
+    // The worker reads the File itself, so the retry just sends it again.
     onEngineFallback?.(err.reason);
     onProgress(0);
     return exportOnce(file, recipe, onProgress, signal, musicOptions, overlayOptions, knownDuration);
@@ -387,11 +397,10 @@ async function exportOnce(
   }
 
   const sessionId = buildSessionId();
-  const arrayBuffer = await file.arrayBuffer();
   const filePayload: SerializedFile = {
     name: file.name,
     type: file.type || "video/mp4",
-    data: arrayBuffer,
+    blob: file,
   };
 
   if (musicOptions?.file && musicOptions.file.size > MAX_FILE_SIZE) {
@@ -402,7 +411,7 @@ async function exportOnce(
     ? {
         name: musicOptions.file.name,
         type: musicOptions.file.type || "audio/mpeg",
-        data: await musicOptions.file.arrayBuffer(),
+        blob: musicOptions.file,
       }
     : undefined;
 
@@ -414,7 +423,7 @@ async function exportOnce(
     ? {
         name: overlayOptions.file.name,
         type: overlayOptions.file.type || "image/png",
-        data: await overlayOptions.file.arrayBuffer(),
+        blob: overlayOptions.file,
       }
     : undefined;
 
@@ -479,9 +488,6 @@ async function exportOnce(
     resetWorker();
   }, 5_000);
 
-  const transfers: Transferable[] = [arrayBuffer];
-  if (musicFilePayload) transfers.push(musicFilePayload.data);
-  if (overlayFilePayload) transfers.push(overlayFilePayload.data);
 
   ffmpegWorker.postMessage(
     {
@@ -494,8 +500,7 @@ async function exportOnce(
       musicOptions: sanitizedMusicOptions,
       overlayFile: overlayFilePayload,
       overlayOptions: sanitizedOverlayOptions,
-    } as WorkerExportRequest,
-    transfers
+    } as WorkerExportRequest
   );
 
   try {
diff --git a/src/lib/ffmpeg.worker.ts b/src/lib/ffmpeg.worker.ts
index cd32fe559..b5d6d7ea6 100644
--- a/src/lib/ffmpeg.worker.ts
+++ b/src/lib/ffmpeg.worker.ts
@@ -37,7 +37,9 @@ export const SRI_HASHES: Record<string, string> = {
 type SerializedFile = {
   name: string;
   type: string;
-  data: ArrayBuffer;
+  /** The user's File, read here rather than on the page (see ffmpeg.ts). */
+  blob?: Blob;
+  data?: ArrayBuffer;
 };
 
 type ExportRequest = {
@@ -165,8 +167,10 @@ function errorMessage(error: unknown): string {
   return error instanceof Error ? error.message : String(error);
 }
 
-function serializeFileBuffer(file: SerializedFile): Uint8Array {
-  return new Uint8Array(file.data);
+async function readFileBytes(file: SerializedFile): Promise<Uint8Array> {
+  if (file.data) return new Uint8Array(file.data);
+  if (file.blob) return new Uint8Array(await file.blob.arrayBuffer());
+  return new Uint8Array(0);
 }
 
 function getOutputConfig(format: string, sessionId: string) {
@@ -222,14 +226,14 @@ async function runExport(request: ExportRequest): Promise<ResultPayload> {
   const paletteName = `palette_${sessionId}.png`;
   const cleanupFiles = new Set<string>([inputName, outputName, fallbackOutputName, paletteName]);
 
-  const fileBytes = serializeFileBuffer(request.file);
+  const fileBytes = await readFileBytes(request.file);
   await ffmpeg.writeFile(inputName, fileBytes, { signal: activeExportAbortController?.signal });
 
   const hasMusicTrack = !!(request.musicFile && recipe.keepAudio);
   const musicInputName = `music_input_${sessionId}.mp3`;
   if (hasMusicTrack) {
     cleanupFiles.add(musicInputName);
-    await ffmpeg.writeFile(musicInputName, serializeFileBuffer(request.musicFile!), {
+    await ffmpeg.writeFile(musicInputName, await readFileBytes(request.musicFile!), {
       signal: activeExportAbortController?.signal,
     });
   }
@@ -239,7 +243,7 @@ async function runExport(request: ExportRequest): Promise<ResultPayload> {
   const overlayInputName = `overlay_${sessionId}.${overlayExt}`;
   if (hasOverlay) {
     cleanupFiles.add(overlayInputName);
-    await ffmpeg.writeFile(overlayInputName, serializeFileBuffer(request.overlayFile!), {
+    await ffmpeg.writeFile(overlayInputName, await readFileBytes(request.overlayFile!), {
       signal: activeExportAbortController?.signal,
     });
   }
@@ -449,7 +453,11 @@ async function handleCommand(message: WorkerCommand) {
           postMessage({ type: "cancelled", id: message.id });
           return;
         }
-        postMessage({ ...result }, [result.data]);
+        // Wrap the output in a Blob here, off the main thread: building it on
+        // the main thread copied the whole file synchronously (over a second
+        // for a large export). A Blob crosses to the page by reference.
+        const { data, ...rest } = result;
+        postMessage({ ...rest, blob: new Blob([data], { type: result.mimeType }) });
       } catch (error) {
         if (activeExportAbortController?.signal.aborted) {
           postMessage({ type: "cancelled", id: message.id });
diff --git a/src/lib/tests/deployConfig.test.ts b/src/lib/tests/deployConfig.test.ts
new file mode 100644
index 000000000..cfed8dedf
--- /dev/null
+++ b/src/lib/tests/deployConfig.test.ts
@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import fs from "node:fs";
+import path from "node:path";
+
+// Guards the hosting config. Production once shipped with none of
+// vercel.json's headers because a legacy `routes: [{ handle: "filesystem" }]`
+// block made Vercel compile the header rule *after* the filesystem phase, so
+// it never applied to static files (verified with `vercel build`). No COOP/COEP meant no multi-threaded FFmpeg.
+
+const root = path.resolve(__dirname, "../../..");
+const read = (file: string) => fs.readFileSync(path.join(root, file), "utf8");
+
+const vercel = JSON.parse(read("vercel.json")) as {
+  routes?: unknown;
+  headers: { source: string; headers: { key: string; value: string }[] }[];
+};
+const catchAll = vercel.headers.find((h) => h.source === "/(.*)");
+const vercelHeaders = Object.fromEntries((catchAll?.headers ?? []).map((h) => [h.key, h.value]));
+
+const REQUIRED = {
+  "Cross-Origin-Opener-Policy": "same-origin",
+  "Cross-Origin-Embedder-Policy": "require-corp",
+  "X-Content-Type-Options": "nosniff",
+  "X-Frame-Options": "DENY",
+  "Referrer-Policy": "strict-origin-when-cross-origin",
+  "Permissions-Policy": "camera=(), microphone=(), geolocation=()",
+};
+
+/** "Key: value" / Key = "value" pairs from netlify.toml or public/_headers. */
+function parseHeaderFile(text: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const line of text.split("\n")) {
+    const m = line.match(/^\s*([A-Za-z-]+)\s*(?::|=)\s*"?([^"#]+?)"?\s*$/);
+    if (m && /-/.test(m[1]!)) out[m[1]!] = m[2]!;
+  }
+  return out;
+}
+
+describe("vercel.json", () => {
+  it("has no legacy `routes` block (it stops `headers` reaching static files)", () => {
+    expect(vercel.routes).toBeUndefined();
+  });
+
+  it("sends the cross-origin isolation and security headers on every path", () => {
+    expect(catchAll).toBeDefined();
+    expect(vercelHeaders).toMatchObject(REQUIRED);
+  });
+
+  it("leaves HSTS to Vercel's stronger default (2 years, preload) instead of overriding it", () => {
+    expect(vercelHeaders["Strict-Transport-Security"]).toBeUndefined();
+  });
+
+  it("does not add a CSP that could block the FFmpeg CDN or the RUM intake", () => {
+    expect(vercelHeaders["Content-Security-Policy"]).toBeUndefined();
+  });
+});
+
+describe("other hosts stay in sync", () => {
+  it.each(["netlify.toml", "public/_headers"])("%s sends the same isolation and security headers", (file) => {
+    expect(parseHeaderFile(read(file))).toMatchObject(REQUIRED);
+  });
+});
+
+describe("cross-origin isolation compatibility", () => {
+  it("the worker fetches the FFmpeg cores with CORS from a CDN that allows it", () => {
+    const worker = read("src/lib/ffmpeg.worker.ts");
+    // Under COEP require-corp, cross-origin loads need CORS (or CORP).
+    // fetch() defaults to mode "cors"; jsdelivr answers with
+    // Access-Control-Allow-Origin: *. The cores are then used as blob: URLs,
+    // which are same-origin.
+    expect(worker).toContain("https://cdn.jsdelivr.net/npm/@ffmpeg/core@");
+    expect(worker).toContain("https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@");
+    expect(worker).not.toMatch(/mode:\s*["']no-cors["']/);
+  });
+
+  it("the app shell loads no third-party scripts, styles or fonts", () => {
+    const layout = read("src/app/layout.tsx");
+    expect(layout).not.toMatch(/<script[^>]+src=["']https?:/);
+    expect(layout).not.toMatch(/<link[^>]+rel=["']stylesheet["'][^>]+https?:/);
+    expect(read("src/app/globals.css")).not.toMatch(/@import\s+url\(["']?https?:/);
+  });
+});
diff --git a/src/lib/tests/ffmpegWorker.test.ts b/src/lib/tests/ffmpegWorker.test.ts
index 05ba9a0ef..50a665754 100644
--- a/src/lib/tests/ffmpegWorker.test.ts
+++ b/src/lib/tests/ffmpegWorker.test.ts
@@ -17,6 +17,8 @@ const h = vi.hoisted(() => {
     execCalls: string[][] = [];
     deleted: string[] = [];
     files = new Map<string, Uint8Array>();
+    /** Every write, kept after cleanup deletes the file. */
+    writes = new Map<string, Uint8Array>();
     terminated = false;
     constructor() {
       FakeFFmpeg.instances.push(this);
@@ -33,6 +35,7 @@ const h = vi.hoisted(() => {
     }
     async writeFile(name: string, data: Uint8Array) {
       this.files.set(name, data);
+      this.writes.set(name, data);
     }
     async exec(args: string[]) {
       this.execCalls.push(args);
@@ -193,6 +196,30 @@ describe("ffmpeg.worker", () => {
     expect([...ffmpeg().files.keys()].some((name) => name.includes("holiday"))).toBe(false);
   });
 
+  it("reads the user's File itself when sent one, instead of the page reading it", async () => {
+    await startWorker({ isolated: false });
+    send({ type: "load" });
+    await waitFor("ready");
+    const req = exportRequest();
+    const bytes = new Uint8Array([1, 2, 3, 4, 5]);
+    send({ ...req, file: { name: "clip.mp4", type: "video/mp4", blob: new Blob([bytes]) } });
+    await waitFor("result");
+    const written = [...ffmpeg().writes.entries()].find(([name]) => name.startsWith("input_"));
+    expect(written?.[1]).toEqual(bytes);
+  });
+
+  it("posts the output as a Blob, so the page never copies the file on its thread", async () => {
+    await startWorker({ isolated: false });
+    send({ type: "load" });
+    await waitFor("ready");
+    send(exportRequest());
+    await waitFor("result");
+    const result = posted.find((m) => m.type === "result") as { blob?: unknown; data?: unknown; mimeType?: string };
+    expect(result.blob).toBeInstanceOf(Blob);
+    expect((result.blob as Blob).type).toBe(result.mimeType);
+    expect(result.data).toBeUndefined();
+  });
+
   it("reports a wasm trap (a rejected string) with its text, not 'undefined'", async () => {
     await startWorker({ isolated: false });
     send({ type: "load" });
diff --git a/src/lib/tests/thumbnails.test.ts b/src/lib/tests/thumbnails.test.ts
new file mode 100644
index 000000000..bb5dbe88b
--- /dev/null
+++ b/src/lib/tests/thumbnails.test.ts
@@ -0,0 +1,156 @@
+import { describe, it, expect, vi } from "vitest";
+import {
+  computeThumbnailTimes,
+  generateThumbnails,
+  pickThumbnailInterval,
+  MAX_THUMBNAILS,
+} from "../thumbnails";
+
+/**
+ * Minimal stand-in for an HTMLVideoElement: fires loadeddata after load(),
+ * and seeked after currentTime is set — unless that time is in `stallAt`.
+ */
+class FakeVideo extends EventTarget {
+  muted = false;
+  preload = "";
+  playsInline = false;
+  src = "";
+  removedSrc = false;
+  seeks: number[] = [];
+  constructor(private opts: { stallAt?: number[]; failLoad?: boolean } = {}) {
+    super();
+  }
+  load() {
+    if (!this.src) return;
+    setTimeout(() => this.dispatchEvent(new Event(this.opts.failLoad ? "error" : "loadeddata")), 0);
+  }
+  removeAttribute(name: string) {
+    if (name === "src") {
+      this.src = "";
+      this.removedSrc = true;
+    }
+  }
+  set currentTime(t: number) {
+    this.seeks.push(t);
+    if (this.opts.stallAt?.includes(t)) return;
+    setTimeout(() => this.dispatchEvent(new Event("seeked")), 0);
+  }
+}
+
+function harness(videoOpts?: ConstructorParameters<typeof FakeVideo>[0]) {
+  const video = new FakeVideo(videoOpts);
+  const canvas = {
+    width: 0,
+    height: 0,
+    getContext: () => ({ drawImage: vi.fn() }),
+    toBlob: (cb: (b: Blob | null) => void) => cb(new Blob(["x"], { type: "image/jpeg" })),
+  };
+  let n = 0;
+  const created: string[] = [];
+  const revoked: string[] = [];
+  const createElement = ((tag: string) => (tag === "video" ? video : canvas)) as unknown as typeof document.createElement;
+  return {
+    video,
+    created,
+    revoked,
+    opts: {
+      createElement,
+      createObjectURL: () => {
+        const url = `blob:thumb-${++n}`;
+        created.push(url);
+        return url;
+      },
+      revokeObjectURL: (url: string) => revoked.push(url),
+    },
+  };
+}
+
+describe("computeThumbnailTimes", () => {
+  it("returns nothing for an unknown or zero duration", () => {
+    expect(computeThumbnailTimes(0, 2)).toEqual([]);
+    expect(computeThumbnailTimes(NaN, 2)).toEqual([]);
+  });
+
+  it("samples at the interval and adds a frame near the end", () => {
+    const times = computeThumbnailTimes(10, 2);
+    expect(times[0]).toBe(0);
+    expect(times).toContain(8);
+    expect(times[times.length - 1]).toBeCloseTo(9.9);
+  });
+
+  it("caps the count for long videos by widening the interval", () => {
+    const times = computeThumbnailTimes(3 * 60 * 60, 30); // 3 hours
+    expect(times.length).toBeLessThanOrEqual(MAX_THUMBNAILS);
+    expect(times.length).toBeGreaterThan(MAX_THUMBNAILS - 2);
+  });
+
+  it("never produces two thumbnails within the same second", () => {
+    const times = computeThumbnailTimes(1.5, 0.2);
+    const seconds = times.map((t) => Math.floor(t));
+    expect(new Set(seconds).size).toBe(seconds.length);
+  });
+
+  it("scales the interval with duration", () => {
+    expect(pickThumbnailInterval(20)).toBe(2);
+    expect(pickThumbnailInterval(600)).toBe(30);
+  });
+});
+
+describe("generateThumbnails", () => {
+  it("captures every frame, reports batches, and releases the decoder", async () => {
+    const h = harness();
+    const onBatch = vi.fn();
+    const { frames, skipped } = await generateThumbnails("blob:src", [0, 2, 4, 6, 8], {
+      ...h.opts,
+      batchSize: 2,
+      onBatch,
+    });
+    expect(frames.map((f) => f.time)).toEqual([0, 2, 4, 6, 8]);
+    expect(skipped).toBe(0);
+    // batches at 2, 4 and the final 5 — not one React update per frame
+    expect(onBatch).toHaveBeenCalledTimes(3);
+    expect(h.video.removedSrc).toBe(true);
+    expect(h.revoked).toEqual([]);
+  });
+
+  it("seeks sequentially, one position at a time", async () => {
+    const h = harness();
+    await generateThumbnails("blob:src", [0, 1, 2], h.opts);
+    expect(h.video.seeks).toEqual([0, 1, 2]);
+  });
+
+  it("skips a position whose seek never completes instead of hanging", async () => {
+    const h = harness({ stallAt: [2] });
+    const { frames, skipped } = await generateThumbnails("blob:src", [0, 2, 4], {
+      ...h.opts,
+      seekTimeoutMs: 20,
+    });
+    expect(frames.map((f) => f.time)).toEqual([0, 4]);
+    expect(skipped).toBe(1);
+  });
+
+  it("aborting stops further seeks and revokes every URL it created", async () => {
+    const h = harness();
+    const controller = new AbortController();
+    const promise = generateThumbnails("blob:src", [0, 1, 2, 3, 4, 5], {
+      ...h.opts,
+      signal: controller.signal,
+      batchSize: 1,
+      onBatch: (frames) => {
+        if (frames.length === 2) controller.abort();
+      },
+    });
+    await expect(promise).rejects.toMatchObject({ name: "AbortError" });
+    expect(h.video.seeks.length).toBeLessThan(6);
+    expect(h.created.length).toBeGreaterThan(0);
+    expect(new Set(h.revoked)).toEqual(new Set(h.created));
+    expect(h.video.removedSrc).toBe(true);
+  });
+
+  it("rejects (and cleans up) when the video can't be decoded", async () => {
+    const h = harness({ failLoad: true });
+    await expect(generateThumbnails("blob:src", [0, 1], h.opts)).rejects.toThrow(/decoded/);
+    expect(h.video.removedSrc).toBe(true);
+    expect(h.created).toEqual([]);
+  });
+});
diff --git a/src/lib/thumbnails.ts b/src/lib/thumbnails.ts
new file mode 100644
index 000000000..02be02dee
--- /dev/null
+++ b/src/lib/thumbnails.ts
@@ -0,0 +1,195 @@
+/**
+ * Thumbnail extraction for the timeline strip.
+ *
+ * Frames are captured by seeking a single offscreen <video> sequentially.
+ * Seeking in parallel would multiply decoder instances and memory for little
+ * gain, so it is deliberately one seek at a time. Work is abortable, every
+ * seek has a timeout (some files never fire `seeked` for certain positions),
+ * and every object URL created is either handed to the caller or revoked.
+ */
+
+/** Upper bound on frames per video so long files don't produce hundreds of seeks. */
+export const MAX_THUMBNAILS = 48;
+
+export interface ThumbnailFrame {
+  time: number;
+  url: string;
+}
+
+export interface GenerateThumbnailsOptions {
+  signal?: AbortSignal;
+  width?: number;
+  height?: number;
+  /** Per-seek timeout; a frame that times out is skipped, not fatal. */
+  seekTimeoutMs?: number;
+  metadataTimeoutMs?: number;
+  /** Frames are reported in batches to keep React updates infrequent. */
+  batchSize?: number;
+  onBatch?: (frames: ThumbnailFrame[], completed: number, total: number) => void;
+  /** Injection points for tests (jsdom has no media pipeline or canvas). */
+  createElement?: typeof document.createElement;
+  createObjectURL?: (blob: Blob) => string;
+  revokeObjectURL?: (url: string) => void;
+}
+
+export interface GenerateThumbnailsResult {
+  frames: ThumbnailFrame[];
+  /** Number of positions that could not be captured (seek timeout / draw failure). */
+  skipped: number;
+}
+
+/** Seconds between thumbnails, scaled to the clip length. */
+export function pickThumbnailInterval(duration: number): number {
+  if (duration <= 30) return 2;
+  if (duration <= 120) return 5;
+  if (duration <= 300) return 15;
+  return 30;
+}
+
+/**
+ * Timestamps to capture: every `intervalSeconds`, widened if needed so the
+ * total never exceeds `max`, de-duplicated to whole seconds (the label
+ * granularity), plus a frame near the end so the strip covers the full clip.
+ */
+export function computeThumbnailTimes(
+  duration: number,
+  intervalSeconds: number,
+  max: number = MAX_THUMBNAILS
+): number[] {
+  if (!Number.isFinite(duration) || duration <= 0 || max <= 0) return [];
+
+  const interval = Math.max(intervalSeconds, duration / max, 0.1);
+  const last = Math.max(0, duration - 0.1);
+  const times: number[] = [];
+  const seen = new Set<number>();
+
+  const push = (t: number) => {
+    const key = Math.floor(t);
+    if (seen.has(key)) return;
+    seen.add(key);
+    times.push(Number(t.toFixed(3)));
+  };
+
+  for (let t = 0; t < last && times.length < max; t += interval) push(t);
+  if (times.length < max && last > (times[times.length - 1] ?? -1)) push(last);
+
+  return times;
+}
+
+function abortError() {
+  return new DOMException("Thumbnail generation aborted", "AbortError");
+}
+
+function waitForEvent(
+  target: HTMLVideoElement,
+  event: string,
+  timeoutMs: number,
+  signal?: AbortSignal
+): Promise<"ok" | "timeout"> {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(abortError());
+      return;
+    }
+    const done = (result: "ok" | "timeout" | Error) => {
+      clearTimeout(timer);
+      target.removeEventListener(event, onEvent);
+      target.removeEventListener("error", onError);
+      signal?.removeEventListener("abort", onAbort);
+      if (result instanceof Error) reject(result);
+      else resolve(result);
+    };
+    const onEvent = () => done("ok");
+    const onError = () => done(new Error("Video could not be decoded for thumbnails"));
+    const onAbort = () => done(abortError());
+    const timer = setTimeout(() => done("timeout"), timeoutMs);
+    target.addEventListener(event, onEvent);
+    target.addEventListener("error", onError);
+    signal?.addEventListener("abort", onAbort, { once: true });
+  });
+}
+
+export async function generateThumbnails(
+  src: string,
+  times: number[],
+  {
+    signal,
+    width = 160,
+    height = 90,
+    seekTimeoutMs = 4000,
+    metadataTimeoutMs = 10000,
+    batchSize = 6,
+    onBatch,
+    createElement = document.createElement.bind(document),
+    createObjectURL = (blob) => URL.createObjectURL(blob),
+    revokeObjectURL = (url) => URL.revokeObjectURL(url),
+  }: GenerateThumbnailsOptions = {}
+): Promise<GenerateThumbnailsResult> {
+  const frames: ThumbnailFrame[] = [];
+  let skipped = 0;
+
+  const video = createElement("video") as HTMLVideoElement;
+  video.muted = true;
+  video.preload = "auto";
+  video.playsInline = true;
+
+  try {
+    // `loadeddata` (not `loadedmetadata`): the first frame must be decoded,
+    // otherwise the seek to 0s resolves immediately and draws a black frame.
+    const firstFrameReady = waitForEvent(video, "loadeddata", metadataTimeoutMs, signal);
+    video.src = src;
+    video.load();
+    if ((await firstFrameReady) === "timeout") {
+      throw new Error("Timed out loading video metadata for thumbnails");
+    }
+
+    const canvas = createElement("canvas") as HTMLCanvasElement;
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D context unavailable");
+
+    for (let i = 0; i < times.length; i++) {
+      if (signal?.aborted) throw abortError();
+      const time = times[i] ?? 0;
+
+      const seeked = waitForEvent(video, "seeked", seekTimeoutMs, signal);
+      video.currentTime = time;
+      if ((await seeked) === "timeout") {
+        skipped++;
+      } else {
+        try {
+          ctx.drawImage(video, 0, 0, width, height);
+          const blob = await new Promise<Blob | null>((resolve) =>
+            canvas.toBlob(resolve, "image/jpeg", 0.7)
+          );
+          if (signal?.aborted) throw abortError();
+          if (blob) frames.push({ time, url: createObjectURL(blob) });
+          else skipped++;
+        } catch (err) {
+          if (err instanceof DOMException && err.name === "AbortError") throw err;
+          skipped++;
+        }
+      }
+
+      const completed = i + 1;
+      if (completed === times.length || completed % batchSize === 0) {
+        onBatch?.(frames.slice(), completed, times.length);
+      }
+    }
+
+    return { frames, skipped };
+  } catch (err) {
+    // Nothing was handed to the caller as a final result, so release it all.
+    frames.forEach((f) => revokeObjectURL(f.url));
+    throw err;
+  } finally {
+    // Detach the source so the browser can release the decoder immediately.
+    video.removeAttribute("src");
+    try {
+      video.load();
+    } catch {
+      // ignore — some environments throw on load() without a source
+    }
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index bd5e6ca31..aae2f66a6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -16,30 +16,82 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      // Two families. The platform UI font (SF Pro / Segoe UI / Roboto) for
+      // every control, label and readout; an editorial serif (Cormorant
+      // Garamond, self-hosted by next/font) for headings and a few numerals.
+      // `heading` stays sans: it is used on small control labels.
+      fontFamily: {
+        sans: ["var(--font-sans)"],
+        heading: ["var(--font-sans)"],
+        display: ["var(--font-serif)"],
+        serif: ["var(--font-serif)"],
+        mono: ["var(--font-mono)"],
+      },
+      fontSize: {
+        // Type scale: metadata → helper → label/body → section → page title.
+        "2xs": ["0.6875rem", { lineHeight: "1rem" }], // 11px
+        xs: ["0.75rem", { lineHeight: "1.125rem" }], // 12px
+        sm: ["0.8125rem", { lineHeight: "1.25rem" }], // 13px
+        base: ["0.9375rem", { lineHeight: "1.5rem" }], // 15px
+        lg: ["1.0625rem", { lineHeight: "1.5rem" }], // 17px
+        xl: ["1.25rem", { lineHeight: "1.75rem" }], // 20px
+        "2xl": ["1.625rem", { lineHeight: "2rem", letterSpacing: "-0.015em" }], // 26px
+        "3xl": ["2.125rem", { lineHeight: "2.5rem", letterSpacing: "-0.02em" }], // 34px
+        // Serif display sizes (headlines and the export percentage).
+        "4xl": ["2.75rem", { lineHeight: "1.02", letterSpacing: "-0.02em" }], // 44px
+        "5xl": ["3.75rem", { lineHeight: "1", letterSpacing: "-0.025em" }], // 60px
+        "6xl": ["4.75rem", { lineHeight: "0.98", letterSpacing: "-0.03em" }], // 76px
+      },
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        // Reframe's film-red accent. Text-weight shades (300–500, 700–900) use
+        // --accent-text, which is tuned per theme for AA contrast on surfaces;
+        // 600 is the solid fill used behind --on-accent text.
         film: {
           50: "var(--accent-muted)",
           100: "var(--accent-muted)",
           200: "color-mix(in srgb, var(--accent) 30%, var(--border))",
           300: "color-mix(in srgb, var(--accent) 55%, var(--border))",
-          400: "var(--accent)",
-          500: "var(--accent)",
+          400: "var(--accent-text)",
+          500: "var(--accent-text)",
           600: "var(--accent)",
-          700: "var(--accent-hover)",
+          700: "var(--accent-text)",
           800: "var(--text)",
           900: "var(--text)",
           950: "var(--bg)",
         },
       },
+      borderRadius: {
+        control: "var(--radius-control)",
+        panel: "var(--radius-panel)",
+        pill: "var(--radius-pill)",
+      },
+      transitionDuration: {
+        fast: "var(--dur-fast)",
+        base: "var(--dur-base)",
+        slow: "var(--dur-slow)",
+        panel: "var(--dur-panel)",
+        enter: "var(--dur-enter)",
+      },
+      transitionTimingFunction: {
+        standard: "var(--ease-standard)",
+        out: "var(--ease-out)",
+        "in-out": "var(--ease-in-out)",
+      },
       keyframes: {
         shimmer: {
           "100%": { transform: "translateX(100%)" },
         },
+        // Used ~20 times via `animate-fade-in` but previously undefined.
+        "fade-in": {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
       },
       animation: {
         shimmer: "shimmer 2s infinite",
+        "fade-in": "fade-in var(--dur-base) var(--ease-standard) both",
       },
     },
   },
diff --git a/test/e2e/export.spec.ts b/test/e2e/export.spec.ts
index d29de6c96..cc2fd5109 100644
--- a/test/e2e/export.spec.ts
+++ b/test/e2e/export.spec.ts
@@ -48,6 +48,25 @@ function probe(path: string): Probe {
   };
 }
 
+/**
+ * Average brightness (8-bit luma) of the top tenth of a frame. Black
+ * letterbox bars are about 16; the test pattern is far brighter.
+ */
+function topStripLuma(path: string, at = 0.5): number {
+  const out = execFileSync(
+    "ffmpeg",
+    [
+      "-hide_banner", "-ss", String(at), "-i", path, "-frames:v", "1",
+      "-vf", "crop=iw:ih/10:0:0,signalstats,metadata=print:key=lavfi.signalstats.YAVG:file=-",
+      "-f", "null", "-",
+    ],
+    { encoding: "utf8", stdio: ["ignore", "pipe", "pipe"] }
+  );
+  const match = out.match(/YAVG=([\d.]+)/);
+  if (!match) throw new Error(`no YAVG in ffmpeg output: ${out.slice(0, 200)}`);
+  return Number(match[1]);
+}
+
 async function openSection(page: Page, name: RegExp) {
   const toggle = page.getByRole("button", { name }).first();
   if ((await toggle.getAttribute("aria-expanded")) === "false") await toggle.click();
@@ -80,22 +99,23 @@ test.describe("export", () => {
   for (const fixture of fixtures) {
     test(`${fixture.file}: trim, rotate and speed up, then export a valid file`, async ({ page }, testInfo) => {
       test.skip(!!fixture.large && !process.env.E2E_LARGE, "set E2E_LARGE=1 to run the ~300 MB fixture");
+      if (fixture.large) test.slow();
 
       await loadEditor(page, fixture.file);
       const isolated = await page.evaluate(() => crossOriginIsolated);
       expect(isolated).toBe(testInfo.project.name === "multi-threaded");
 
       // 1:1 output, so the expected size doesn't depend on the input's shape.
-      await page.getByRole("button", { name: "1 is to 1 output ratio" }).click();
+      await page.getByRole("button", { name: /^1 is to 1 output ratio/ }).click();
 
-      await openSection(page, /^Trim$/i);
+      await openSection(page, /^Trim\b/i);
       await page.getByLabel("Trim start time in seconds").fill("1");
       await page.getByLabel("Trim end time in seconds").fill("5");
 
-      await openSection(page, /^Rotation$/i);
-      await page.getByRole("button", { name: "Rotate video to 90 degrees" }).click();
+      await openSection(page, /^Rotat/i);
+      await page.getByRole("button", { name: "90° rotation" }).click();
 
-      await openSection(page, /Audio & Speed/i);
+      await openSection(page, /^Audio (&|and) speed/i);
       await page.getByRole("button", { name: "Set speed to 2x" }).click();
 
       const out = testInfo.outputPath(`${fixture.file}.mp4`);
@@ -111,20 +131,59 @@ test.describe("export", () => {
     });
   }
 
+  test("every edit in a sequence shows up in the exported file", async ({ page }, testInfo) => {
+    await loadEditor(page, "normal.mp4");
+
+    await openSection(page, /^Trim\b/i);
+    await page.getByLabel("Trim start time in seconds").fill("1");
+    await page.getByLabel("Trim end time in seconds").fill("5");
+
+    // 9:16 with Fit: a landscape clip would be letterboxed with black bars,
+    // so filling the frame proves the 90° rotation was applied.
+    await page.getByRole("button", { name: /^9 is to 16 output ratio/ }).click();
+    await openSection(page, /^Rotat/i);
+    await page.getByRole("button", { name: "90° rotation" }).click();
+
+    await openSection(page, /^Audio (&|and) speed/i);
+    await page.getByRole("button", { name: "Set speed to 2x" }).click();
+    await page.getByRole("button", { name: /^Mute video audio/ }).click();
+
+    const out = testInfo.outputPath("sequence.mp4");
+    await exportAndDownload(page, out);
+    const result = probe(out);
+
+    expect([result.width, result.height], "9:16 preset").toEqual([1080, 1920]);
+    expect(result.duration, "trim 1–5 s at 2×").toBeGreaterThan(1.7);
+    expect(result.duration).toBeLessThan(2.4);
+    expect(result.audioStreams, "muted").toBe(0);
+    expect(topStripLuma(out), "rotated: no letterbox bar at the top").toBeGreaterThan(40);
+  });
+
+  test("without rotation, the same 9:16 export is letterboxed (control for the rotation check)", async ({ page }, testInfo) => {
+    await loadEditor(page, "normal.mp4");
+    await page.getByRole("button", { name: /^9 is to 16 output ratio/ }).click();
+    await openSection(page, /^Trim\b/i);
+    await page.getByLabel("Trim end time in seconds").fill("2");
+    const out = testInfo.outputPath("unrotated.mp4");
+    await exportAndDownload(page, out);
+    expect(topStripLuma(out)).toBeLessThan(25);
+  });
+
   test("no-duration.webm: the editor finds the real length", async ({ page }) => {
     await loadEditor(page, "no-duration.webm");
-    await openSection(page, /^Trim$/i);
+    await openSection(page, /^Trim\b/i);
     // The end field's placeholder and limit are the clip's length (6 s), not
     // empty, 0 or Infinity, so trimming works on screen recordings.
     const end = page.getByLabel("Trim end time in seconds");
     await expect(end).toHaveAttribute("placeholder", "6.0");
     expect(Number(await end.getAttribute("max"))).toBeCloseTo(6, 1);
-    await expect(page.getByText("Duration: 0:06")).toBeVisible();
+    // The file card shows the length (formats differ by UI: "Duration: 0:06", "… · 0:06").
+    await expect(page.getByText(/(^|\s|·\s?)0:06\b/).first()).toBeVisible();
   });
 
   test("no-duration.webm at 2× speed without a trim exports the whole clip", async ({ page }, testInfo) => {
     await loadEditor(page, "no-duration.webm");
-    await openSection(page, /Audio & Speed/i);
+    await openSection(page, /^Audio (&|and) speed/i);
     await page.getByRole("button", { name: "Set speed to 2x" }).click();
     const out = testInfo.outputPath("no-duration-2x.mp4");
     await exportAndDownload(page, out);
diff --git a/test/e2e/smoothness.spec.ts b/test/e2e/smoothness.spec.ts
new file mode 100644
index 000000000..e8030927e
--- /dev/null
+++ b/test/e2e/smoothness.spec.ts
@@ -0,0 +1,143 @@
+import { test, expect, type Page } from "@playwright/test";
+import { join } from "node:path";
+
+// The editor must stay responsive while FFmpeg works: the engine runs in a
+// Web Worker, so the main thread should never be blocked for long.
+const FIXTURES = join(__dirname, "..", "fixtures");
+const LONG_TASK_BUDGET_MS = 200;
+
+declare global {
+  interface Window {
+    __longTasks: { start: number; duration: number }[];
+    __liveObjectUrls: Set<string>;
+  }
+}
+
+/** Records main-thread long tasks and live object URLs from page load. */
+async function instrument(page: Page) {
+  await page.addInitScript(() => {
+    localStorage.setItem("reframe_onboarding_complete", "1");
+    window.__longTasks = [];
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) window.__longTasks.push({ start: entry.startTime, duration: entry.duration });
+    }).observe({ type: "longtask", buffered: true });
+    window.__liveObjectUrls = new Set();
+    const create = URL.createObjectURL.bind(URL);
+    const revoke = URL.revokeObjectURL.bind(URL);
+    URL.createObjectURL = (obj: Blob | MediaSource) => {
+      const url = create(obj);
+      window.__liveObjectUrls.add(url);
+      return url;
+    };
+    URL.revokeObjectURL = (url: string) => {
+      window.__liveObjectUrls.delete(url);
+      revoke(url);
+    };
+  });
+}
+
+async function load(page: Page, fixture: string) {
+  await instrument(page);
+  await page.goto("/");
+  await page.locator('input[type=file][accept="video/*"]').setInputFiles(join(FIXTURES, fixture));
+  await expect(page.getByRole("button", { name: "Export video" }).first()).toBeVisible();
+}
+
+const now = (page: Page) => page.evaluate(() => performance.now());
+const longTasksSince = (page: Page, since: number) =>
+  page.evaluate((t) => window.__longTasks.filter((task) => task.start >= t), since);
+const liveUrls = (page: Page) => page.evaluate(() => window.__liveObjectUrls.size);
+
+/** Live object URLs once the filmstrip has finished making its thumbnails. */
+async function settledUrls(page: Page): Promise<number> {
+  let last = -1;
+  for (let i = 0; i < 40; i++) {
+    const count = await liveUrls(page);
+    if (count === last) return count;
+    last = count;
+    await page.waitForTimeout(1000);
+  }
+  return last;
+}
+const download = (page: Page) => page.getByRole("link", { name: /^Download (MP4|WEBM|MKV|GIF)$/ });
+
+test.describe("smoothness", () => {
+  // The ~300 MB clip still has one native task of 0.4–0.9 s as the result
+  // arrives (after the copies and GC this suite caught were removed; not
+  // CPU contention: a 2-thread cap measured the same). Its budget says so.
+  for (const [fixture, budget] of [["normal.mp4", LONG_TASK_BUDGET_MS], ["large.mp4", 1000]] as const) {
+  test(`${fixture}: no main-thread long task over ${budget} ms while the engine loads and exports`, async ({ page }) => {
+    test.skip(fixture === "large.mp4" && !process.env.E2E_LARGE, "set E2E_LARGE=1 to run the ~300 MB fixture");
+    // A 60 s 1080p encode takes minutes on the single-threaded engine.
+    if (fixture === "large.mp4") test.slow();
+    await load(page, fixture);
+    const start = await now(page);
+    await page.getByRole("button", { name: "Export video" }).first().click();
+    await expect(download(page)).toBeVisible({ timeout: 180_000 });
+    const tasks = await longTasksSince(page, start);
+    const worst = Math.max(0, ...tasks.map((t) => t.duration));
+    testInfoNote(`long tasks during export: ${tasks.length}, worst ${Math.round(worst)} ms`);
+    expect(worst).toBeLessThan(budget);
+  });
+  }
+
+  test("cancel while the engine loads, then while encoding: the editor stays usable and frees what it made", async ({ page }) => {
+    await load(page, "normal.mp4");
+    // The preview and the filmstrip thumbnails hold URLs while the video is open.
+    const before = await settledUrls(page);
+    const exportButton = page.getByRole("button", { name: "Export video" }).first();
+    const cancel = page.getByRole("button", { name: /^Cancel( export)?$/i });
+
+    // 1. During engine start-up (the first export of the page loads it).
+    await exportButton.click();
+    await cancel.click();
+    await expect(page.getByRole("dialog")).toHaveCount(0);
+
+    // 2. During encoding: wait until progress has started.
+    await exportButton.click();
+    await expect(page.getByText(/elapsed/)).toBeVisible({ timeout: 60_000 });
+    await cancel.click();
+    await expect(page.getByRole("dialog")).toHaveCount(0);
+    expect(await liveUrls(page), "no leaked object URLs after cancelling").toBe(before);
+
+    // 3. And a normal export still works afterwards.
+    await exportButton.click();
+    await expect(download(page)).toBeVisible({ timeout: 180_000 });
+    expect(await liveUrls(page), "only the result's URL is added").toBe(before + 1);
+  });
+
+  test("300 MB clip: trim handles and preview scrubbing stay responsive", async ({ page }) => {
+    test.skip(!process.env.E2E_LARGE, "set E2E_LARGE=1 to run the ~300 MB fixture");
+    await load(page, "large.mp4");
+    const start = await now(page);
+
+    // Drag the trim start handle with the keyboard, 30 steps.
+    const trimToggle = page.getByRole("button", { name: /^Trim\b/i }).first();
+    if ((await trimToggle.getAttribute("aria-expanded")) === "false") await trimToggle.click();
+    const handle = page.getByRole("slider", { name: "Trim start" });
+    await handle.focus();
+    const t0 = Date.now();
+    for (let i = 0; i < 30; i++) await page.keyboard.press("ArrowRight");
+    const perStep = (Date.now() - t0) / 30;
+
+    // Scrub the preview to a few positions.
+    for (const time of [10, 30, 50, 5]) {
+      await page.evaluate((t) => {
+        const video = document.querySelector("video");
+        if (video) video.currentTime = t;
+      }, time);
+      await page.waitForTimeout(150);
+    }
+
+    const tasks = await longTasksSince(page, start);
+    const worst = Math.max(0, ...tasks.map((t) => t.duration));
+    testInfoNote(`trim step ${perStep.toFixed(1)} ms; worst long task ${Math.round(worst)} ms`);
+    expect(perStep).toBeLessThan(100);
+    expect(worst).toBeLessThan(LONG_TASK_BUDGET_MS);
+  });
+});
+
+function testInfoNote(text: string) {
+  test.info().annotations.push({ type: "measurement", description: text });
+  console.log(`[smoothness] ${text}`);
+}
diff --git a/vercel.json b/vercel.json
index 60c58b0bd..709d0f724 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,9 +1,4 @@
 {
-  "routes": [
-    {
-      "handle": "filesystem"
-    }
-  ],
   "headers": [
     {
       "source": "/(.*)",
@@ -18,10 +13,6 @@
           "key": "Permissions-Policy",
           "value": "camera=(), microphone=(), geolocation=()"
         },
-        {
-          "key": "Strict-Transport-Security",
-          "value": "max-age=31536000; includeSubDomains"
-        },
         {
           "key": "Cross-Origin-Opener-Policy",
           "value": "same-origin"