/* screen-recorder: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.media-result audio { width: 100%; }
.media-result img { max-width: 100%; border-radius: var(--r-control); box-shadow: var(--shadow-2); align-self: flex-start; }
.sr-setup { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.recorder-live { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--mist); }
.recorder-live[hidden] { display: none; }
.recorder-live strong { font-family: var(--display); font-size: 1.5rem; font-variant-numeric: tabular-nums; min-width: 4ch; }
.rec-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bad); animation: rec-blink 1.2s infinite; }
.rec-dot[hidden] { display: none; }
.recorder-live.is-paused .rec-dot { animation: none; background: var(--slate-2); }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
.recorder-countdown { margin: 16px 0 0; font-family: var(--display); font-size: 4rem; font-weight: 700; text-align: center; color: var(--signal-ink); }