/* Shared video/audio timeline. Formats only customize colors and placement. */
.media-timeline { display: flex; align-items: center; gap: 8px; height: 40px; }
.media-timeline__time { flex: none; min-width: 24px; color: var(--timeline-text); font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.media-timeline__time:last-child { text-align: right; }
.media-timeline__seek { display: block; flex: 1; width: 100%; min-width: 0; height: 30px; margin: 0 4px; appearance: none; background: transparent; cursor: pointer; touch-action: none; }
.media-timeline__seek::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--timeline-fill) var(--progress, 0%), var(--timeline-track) var(--progress, 0%)); }
.media-timeline__seek::-webkit-slider-thumb { appearance: none; width: 9px; height: 9px; margin-top: -3.5px; border-radius: 50%; background: var(--timeline-fill); }
.media-timeline__seek::-moz-range-track { height: 2px; border-radius: 2px; background: var(--timeline-track); }
.media-timeline__seek::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--timeline-fill); }
.media-timeline__seek::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--timeline-fill); }