.film-controls { padding-top:12px; }
[data-orbit-play-icon] { display:inline-block; position:relative; width:12px; height:12px; }
[data-orbit-play-icon][data-symbol="play"] { width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; }
[data-orbit-play-icon][data-symbol="pause"] { border-inline:3px solid currentColor; width:9px; height:10px; }
[data-orbit-play-icon][data-symbol="replay"] { border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; }
[data-orbit-play-icon][data-symbol="replay"]::after { content:''; position:absolute; right:-2px; top:-2px; width:4px; height:4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; }
.film-controls[hidden] { display:none; }
.film-readout { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.75rem; color:var(--muted); }
.film-readout label { color:var(--ink); }
.film-readout output { font-variant-numeric:tabular-nums; }
.film-progress { display:block; width:100%; min-height:44px; margin:0; padding:0; accent-color:var(--ink); cursor:ew-resize; }
.film-progress:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:3px; }