fix(sync): centralize offset handling and correct drift math

- Refactor(main.js): The manual offset input listener contained duplicated logic for pausing and re-syncing. This has been removed and replaced with `forceResyncWithOffset` imported from `sync.js`.
- Fix(dom.js): The drift calculation in `updateDebugOverlay` and `updatePersistentOverlays` was using static `timestampMs` combined with the dynamic offset, leading to incorrect values after a manual adjustment. Updated to use `currentRadarFrame.videoSyncedTime` for accurate, architecture-aligned drift reporting.

steps/src/dom.js

@@ -185,18 +185,14 @@ export function updateDebugOverlay(currentMediaTime) {
       appState.vizData &&
       appState.vizData.radarFrames[appState.currentFrame]
     ) {
-      // --- START: Corrected Debug Logic ---
       const currentRadarFrame =
         appState.vizData.radarFrames[appState.currentFrame];
-      const targetRadarTimeMs = currentRadarFrame.timestampMs;
-      const offsetMs = parseFloat(offsetInput.value) || 0; // Read the current offset
       
-      // Make the drift calculation "offset-aware"
-      const driftMs = currentMediaTime * 1000 + offsetMs - targetRadarTimeMs;
-      // --- END: Corrected Debug Logic ---
+      // The correct drift is the difference between the video's actual time and the pre-calculated "baked-in" sync time for the current radar frame.
+      const driftMs = (currentMediaTime - currentRadarFrame.videoSyncedTime) * 1000;
 
       // Style the drift value to be green if sync is good, and red if it's off.
-      const driftColor = Math.abs(driftMs) > 40 ? "#FF6347" : "#98FB98"; // Tomato red or Pale green
+      const driftColor = Math.abs(driftMs) > 50 ? "#FF6347" : "#98FB98"; // Tomato red or Pale green
 
       content.push(`Video Time (s): ${currentMediaTime.toFixed(3)}`); // Display current video time
       content.push(`Target Radar Time (ms): ${targetRadarTimeMs.toFixed(0)}`);
@@ -258,11 +254,9 @@ export function updatePersistentOverlays(currentMediaTime) {
   const motionState = frameData.motionState;
   if (currentRadarFrame) {
     const absRadarTime = new Date(
-      appState.videoStartDate.getTime() + currentRadarFrame.timestampMs
+      appState.radarStartTimeMs + currentRadarFrame.timestamp
     );
-    const targetRadarTimeMs = currentRadarFrame.timestampMs;
-    const offsetMs = parseFloat(offsetInput.value) || 0;
-    const driftMs = currentMediaTime * 1000 + offsetMs - targetRadarTimeMs;
+    const driftMs = (currentMediaTime - currentRadarFrame.videoSyncedTime) * 1000;
     const driftColor = Math.abs(driftMs) > 50 ? "#FF6347" : "#98FB98"; // Tomato or Pale Green
     const colorMode = getCurrentColorMode();
     const fps = appState.fps;

steps/src/main.js

@@ -35,6 +35,7 @@ import {
   initSyncUIHandlers,
   updateFrame,
   resetVisualization,
+  forceResyncWithOffset,
 } from "./sync.js";
 import { radarSketch } from "./p5/radarSketch.js";
 import { speedGraphSketch } from "./p5/speedGraphSketch.js";
@@ -893,20 +894,8 @@ function calculateAndSetOffset() {
 offsetInput.addEventListener("keydown", (event) => {
   // Check if the key pressed was 'Enter'
   if (event.key === "Enter") {
-    // Prevent the default browser action for the Enter key (like submitting a form)
     event.preventDefault();
-    
-    // Update state and persist
-    const newOffset = parseFloat(offsetInput.value) || 0;
-    appState.offset = newOffset;
-    localStorage.setItem("visualizerOffset", newOffset);
-    if (appState.vizData) precomputeRadarVideoSync(appState.vizData, appState.offset);
-    console.log(`Manual offset entered: ${appState.offset}ms`);
-
-    // Force a resync of the video to the current frame
-    if (appState.vizData) {
-      updateFrame(appState.currentFrame, true);
-    }
+    forceResyncWithOffset();
   }
 });