/* Fast-start video (fast-start-player.js): the poster doubles as the video's
   background so no state of the player ever shows a bare black box, and a
   spinner sits over it while there is nothing playable yet. */
.fs-frame{position:relative;width:100%}
.fs-frame:has(> video[hidden]){display:none}
.embed-root>.fs-frame{height:100%}
.fs-video{background-color:#1b2430;background-position:center;background-size:contain;background-repeat:no-repeat}
.fs-spinner{position:absolute;z-index:2;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:4px solid rgba(255,255,255,.28);border-top-color:#fff;opacity:0;pointer-events:none;transition:opacity .15s;animation:fs-spin .8s linear infinite;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.fs-spinner.on{opacity:1}
@keyframes fs-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fs-spinner{animation-duration:2.4s}}
/* The cover is the thumbnail laid exactly over the video. Raised (no
   transition) when playback starts, dropped with a short dissolve once the
   first real frame is on screen: thumbnail → motion, never → black. */
.fs-frame>.fs-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .25s ease-out;border-radius:inherit}
.fs-frame>.fs-cover.up{opacity:1;transition:none}
.fs-frame>.fs-cover:not([src]){display:none}
/* Margins belong to the frame, so the overlays line up with the video box. */
.fs-frame>video{margin:0;display:block}