adds seeking support

public/styles.css

@@ -237,6 +237,111 @@ canvas {
   transition: opacity 180ms ease, transform 180ms ease;
 }
 
+.playhead {
+  position: absolute;
+  top: -1.75rem;
+  right: 1.1rem;
+  left: 1.1rem;
+  height: 2.2rem;
+}
+
+.time-badge {
+  position: absolute;
+  top: 0;
+  min-width: 3.6rem;
+  padding: 0.22rem 0.45rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--fg);
+  font-size: 0.76rem;
+  font-weight: 800;
+  line-height: 1;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  background: var(--glass-strong);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
+  backdrop-filter: blur(14px);
+}
+
+.current-time {
+  left: 0;
+}
+
+.total-time {
+  right: 0;
+}
+
+.seek-slider {
+  position: absolute;
+  right: 0;
+  bottom: 0.18rem;
+  left: 0;
+  width: 100%;
+  height: 1rem;
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  --progress: 0%;
+}
+
+.seek-slider:disabled {
+  cursor: default;
+}
+
+.seek-slider::-webkit-slider-runnable-track {
+  height: 0.28rem;
+  border-radius: 999px;
+  background:
+    linear-gradient(
+      to right,
+      var(--accent) 0%,
+      var(--accent) var(--progress),
+      rgba(246, 241, 232, 0.28) var(--progress),
+      rgba(246, 241, 232, 0.28) 100%
+    );
+}
+
+.seek-slider::-moz-range-track {
+  height: 0.28rem;
+  border-radius: 999px;
+  background: rgba(246, 241, 232, 0.28);
+}
+
+.seek-slider::-moz-range-progress {
+  height: 0.28rem;
+  border-radius: 999px;
+  background: var(--accent);
+}
+
+.seek-slider::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.36rem;
+  appearance: none;
+  border: 2px solid rgba(7, 7, 7, 0.75);
+  border-radius: 50%;
+  background: var(--fg);
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48);
+}
+
+.seek-slider::-moz-range-thumb {
+  width: 0.86rem;
+  height: 0.86rem;
+  border: 2px solid rgba(7, 7, 7, 0.75);
+  border-radius: 50%;
+  background: var(--fg);
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48);
+}
+
+.seek-slider:disabled::-webkit-slider-thumb {
+  opacity: 0;
+}
+
+.seek-slider:disabled::-moz-range-thumb {
+  opacity: 0;
+}
+
 .video-stage.controls-hidden .controls {
   pointer-events: none;
   opacity: 0;
@@ -288,6 +393,11 @@ audio {
     gap: 0.5rem;
   }
 
+  .playhead {
+    right: 0.75rem;
+    left: 0.75rem;
+  }
+
   .control-button {
     min-width: 0;
     flex: 1;