/* skin-video.css — the Resultant UI as a moving recording (js/skin-video.js?v=2).
   .sv is the stage: it holds the still screenshot(s) as .sv-poster and the script adds
   .sv-vid layers on top. The aspect ratio is the recording's, so nothing shifts when video starts. */
.sv { position: relative; display: block; overflow: hidden; aspect-ratio: 1440 / 1118; }
.sv .sv-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; box-shadow: none; filter: none; }
.sv .sv-poster--light { display: none; }
[data-theme="light"] .sv .sv-poster--dark { display: none; }
[data-theme="light"] .sv .sv-poster--light { display: block; }
.sv .sv-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 650ms cubic-bezier(.4, 0, .2, 1); }
.sv .sv-vid.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sv .sv-vid { transition: none; } }

/* homepage banner: the stage takes the frame the bare image had */
.rx-shot .sv { border-radius: var(--shot-radius); box-shadow: 0 0 0 1px var(--rx-rule); }