Ran command: `git diff`

Ran command: `git diff -U0`

fix: resolve console warnings and add configurable debug logging

This commit addresses active console warnings and reduces logging noise in the SpeedGraph component.

### Changes:
- **index.html**: Fixed `[Deprecation]` warning by replacing the non-standard `-webkit-appearance: slider-vertical` with modern CSS properties (`writing-mode: vertical-lr; direction: rtl;`).
- **speedGraphSketch.js**:
  - Resolved `pop() was called without matching push()` error by removing an orphaned `pop()` call in [drawStaticGraphToBuffer](cci//file:///d:/Work/Repo/refactor/steps/src/p5/speedGraphSketch.js:41:2-295:4).
  - Muted "Density Info" messages by gating them behind a configurable debug flag.
- **debug.js**: Added a new [speedGraph](cci:1://file:///d:/Work/Repo/refactor/steps/src/p5/speedGraphSketch.js:7:0-538:2) flag (defaulted to `false`) to `debugFlags` to allow selective enabling of SpeedGraph logs.

steps/index.html

@@ -471,7 +471,7 @@
             <span id="range-value-display" class="bg-black bg-opacity-60 text-white text-[10px] px-1.5 py-0.5 rounded font-mono">80m</span>
             <input type="range" id="range-slider" min="40" max="200" value="80" step="10"
               class="h-32 cursor-pointer accent-blue-600" 
-              style="writing-mode: bt-lr; -webkit-appearance: slider-vertical; appearance: slider-vertical; width: 8px;" />
+              style="writing-mode: vertical-lr; direction: rtl; width: 8px;" />
             <span class="text-[10px] font-bold text-gray-400 uppercase tracking-tighter" style="writing-mode: vertical-lr; transform: rotate(180deg);">Range</span>
           </div>
         </div>

steps/src/debug.js

@@ -13,6 +13,9 @@ export const debugFlags = {
   // Logs related to file loading, parsing, and caching
   fileLoading: false,
 
+  // Logs from the SpeedGraph p5 sketch (density info, etc.)
+  speedGraph: false,
+
   // If true, file caching blocks the main thread for debugging.
   CACHE_BLOCKING: false,
 

steps/src/p5/speedGraphSketch.js

@@ -3,6 +3,7 @@ import { appState } from "../state.js";
 import { videoPlayer, speedGraphContainer, playPauseBtn } from "../dom.js";
 import { updateFrame, pausePlayback } from "../sync.js";
 import { ttcColors } from "../drawUtils.js";
+import { debugFlags } from "../debug.js";
 
 export const speedGraphSketch = function (p) {
   let staticBuffer, minSpeed, maxSpeed, videoDuration;
@@ -97,10 +98,12 @@ export const speedGraphSketch = function (p) {
       // We'll normalize against p95, but ensure it's at least a reasonable number.
       normTracks = Math.max(1, p95Value);
       
+      if (debugFlags.speedGraph) {
         console.log(`[SpeedGraph] Density Info (Confirmed Only: ${confirmedOnly}):`);
         console.log(` - Max tracks: ${maxValue}, 95th Percentile: ${p95Value}`);
         console.log(` - Normalizing against: ${normTracks}`);
       }
+    }
 
     b.push();
     b.stroke(gridColor);
@@ -290,8 +293,6 @@ export const speedGraphSketch = function (p) {
     b.fill(textColor);
     b.text(egoLabel, egoX + segLen + gapBetweenSegAndLabel, legendY + 6);
     b.pop();
-
-    b.pop();
   };
 
   let isDragging = false;