Waterfall Phase 1.2 - Add vertical grid lines for time visualization

waterfall.html

@@ -40,6 +40,15 @@
             transform: translateX(-50%);
         }
         
+        .grid-line {
+            position: absolute;
+            top: 25px;
+            bottom: 0;
+            width: 1px;
+            background: rgba(119, 119, 119, 0.15);
+            pointer-events: none;
+        }
+        
         .waterfall-row {
             display: flex;
             align-items: center;

waterfall.js

@@ -50,11 +50,12 @@ function renderWaterfall() {
     
     let html = '';
     
-    // Add time scale header
+    // Add time scale header with grid lines
     html += '<div class="waterfall-timescale">';
     for (let sec = 0; sec <= Math.ceil(maxTime); sec++) {
         const pos = sec * scale;
         html += `<div class="time-marker" style="left: ${300 + pos}px">${sec}s</div>`;
+        html += `<div class="grid-line" style="left: ${300 + pos}px"></div>`;
     }
     html += '</div>';