diff --git a/src/components/VideoPreview.tsx b/src/components/VideoPreview.tsx
index d684c1e5..ce89b639 100644
--- a/src/components/VideoPreview.tsx
+++ b/src/components/VideoPreview.tsx
@@ -70,14 +70,15 @@ export default function VideoPreview({
   useEffect(() => {
     if (!file) return;
 
-    if (urlRef.current) URL.revokeObjectURL(urlRef.current);
     setIsLoading(true);
     const id = ++lastId.current;
-    const url = URL.createObjectURL(file);
 
+    // Clean up and revoke the old object URL before allocating a new one
     if (urlRef.current) {
       URL.revokeObjectURL(urlRef.current);
     }
+
+    const url = URL.createObjectURL(file);
     urlRef.current = url;
 
     const video = videoRef.current;
@@ -92,7 +93,6 @@ export default function VideoPreview({
     };
 
     onLoadedRef.current = handleLoaded;
-
     video.addEventListener("loadeddata", handleLoaded);
 
     return () => {
@@ -155,7 +155,7 @@ export default function VideoPreview({
     // Preview container is 16:9
     const containerW = 16;
     const containerH = 9;
-    const containerRatio = containerW / containerH;   // 1.777…
+    const containerRatio = containerW / containerH;
     const outputRatio = preset.width / preset.height;
 
     if (recipe.framing === "fit") {
@@ -217,14 +217,14 @@ export default function VideoPreview({
       <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)]"
+        className="relative w-full rounded-lg overflow-hidden bg-[#0a0a0a] aspect-video focus:outline-none focus-visible:ring-2 focus-visible:ring-film-500"
         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"
+            className="absolute inset-0 animate-pulse bg-gray-700 rounded-xl transition-opacity duration-300"
             aria-label="Loading video preview"
           />
         )}
@@ -246,18 +246,18 @@ export default function VideoPreview({
             {overlay.mode === "fit" ? (
               // Letterbox: semi-transparent bars outside the content area
               <>
-                <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/50" style={{ height: overlay.barTop }} />
+                <div className="absolute left-0 right-0 bottom-0 bg-black/50" style={{ height: overlay.barBottom }} />
+                <div className="absolute top-0 bottom-0 left-0 bg-black/50" style={{ width: overlay.barLeft }} />
+                <div className="absolute top-0 bottom-0 right-0 bg-black/50" style={{ width: overlay.barRight }} />
               </>
             ) : (
               // Fill/crop: dashed border around the surviving area, dimmed outside
               <>
-                <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-red-900/50" style={{ height: overlay.barTop }} />
+                <div className="absolute left-0 right-0 bottom-0 bg-red-900/50" style={{ height: overlay.barBottom }} />
+                <div className="absolute top-0 bottom-0 left-0 bg-red-900/50" style={{ width: overlay.barLeft }} />
+                <div className="absolute top-0 bottom-0 right-0 bg-red-900/50" style={{ width: overlay.barRight }} />
                 <div
                   className="absolute border-2 border-dashed border-film-400"
                   style={{
@@ -291,8 +291,8 @@ export default function VideoPreview({
             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)]"
+                ? "bg-film-600 text-white"
+                : "bg-black/60 text-white/70 hover:bg-black/80"
             }`}
             aria-pressed={showOverlay}
             aria-label={showOverlay ? "Hide framing overlay" : "Show framing overlay"}
@@ -309,8 +309,8 @@ export default function VideoPreview({
             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)]"
+                ? "bg-film-600 text-white"
+                : "bg-black/60 text-white/70 hover:bg-black/80"
             }`}
             aria-pressed={showComparison}
             aria-label={showComparison ? "Hide comparison preview" : "Show comparison preview"}
@@ -325,7 +325,7 @@ export default function VideoPreview({
           <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"
+            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-black/60 text-white/70 hover:bg-black/80 flex items-center gap-1"
             aria-label="Grab frame as PNG"
             title="Download current frame as PNG"
           >
@@ -342,4 +342,4 @@ export default function VideoPreview({
       )}
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/hooks/useVideoEditor.ts b/src/hooks/useVideoEditor.ts
index d53006ad..64272b1f 100644
--- a/src/hooks/useVideoEditor.ts
+++ b/src/hooks/useVideoEditor.ts
@@ -292,31 +292,35 @@ export function useVideoEditor() {
 
   useEffect(() => {
     if (typeof window === "undefined") return;
-    try {
-      const params = new URLSearchParams();
-      const recipeKeys = Object.keys(DEFAULT_RECIPE) as Array<keyof EditRecipe>;
+    const timeoutId = window.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];
 
-        if (currentVal !== defaultVal) {
-          params.set(key, currentVal === null ? "null" : String(currentVal));
-        }
-      });
+          if (currentVal !== defaultVal) {
+            params.set(key, currentVal === null ? "null" : String(currentVal));
+          }
+        });
 
-      const newQuery = params.toString();
-      const currentQuery = window.location.search.replace(/^\?/, "");
+        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);
+        if (newQuery !== currentQuery) {
+          const newUrl = newQuery
+            ? `${window.location.pathname}?${newQuery}`
+            : window.location.pathname;
+          window.history.replaceState(null, "", newUrl);
+        }
+      } catch (e) {
+        // ignore
       }
-    } catch (e) {
-      // ignore
-    }
+    }, 500);
+
+    return () => window.clearTimeout(timeoutId);
   }, [recipe]);
 
   useEffect(() => {