feat: add step markers to recording timeline

apps/showcase_ui/src/app/components/floating-video-player/floating-video-player.component.scss

@@ -724,6 +724,38 @@
           box-shadow: 0 0 8px rgba(2, 132, 199, 0.4);
         }
 
+        .video-markers {
+          position: absolute;
+          inset: 0;
+          z-index: 6;
+          pointer-events: none;
+
+          .video-marker {
+            position: absolute;
+            top: 50%;
+            width: 12px;
+            height: 12px;
+            padding: 0;
+            border: 2px solid #fff;
+            border-radius: 50%;
+            background: #64748b;
+            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
+            transform: translate(-50%, -50%);
+            cursor: pointer;
+            pointer-events: auto;
+            transition: transform 0.15s ease, background 0.15s ease;
+
+            &.passed { background: #0284c7; }
+            &.failed { background: #ef4444; }
+            &:hover, &:focus-visible {
+              z-index: 1;
+              transform: translate(-50%, -50%) scale(1.35);
+              outline: 2px solid #38bdf8;
+              outline-offset: 2px;
+            }
+          }
+        }
+
         .step-ticks-wrapper {
           position: absolute;
           left: 0;