/* css/components/slideshow-controls.css — control bar over the photo frame */

.controls { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px 16px 6px 8px; border-radius: 999px; background: rgba(20, 24, 29, .78); opacity: .45; transition: opacity .2s; white-space: nowrap; }
.controls:hover,
.controls:focus-within { opacity: 1; }
.slideshow .controls button { width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; }
.slideshow .controls button:hover { background: rgba(233, 228, 216, .14); }
.controls svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.controls__speed { display: flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 14px; color: var(--color-muted); }
.controls__speed-input { width: clamp(70px, 12vw, 150px); accent-color: var(--color-lamp); }
.controls__speed-out { min-width: 2.6em; color: var(--color-paper); font-variant-numeric: tabular-nums; }