/* «Prod» «Ваше видео» (partials/video.html): loaded only on a site with an effect made from the visitor's own clip
   («Замена персонажа в видео»). The clip goes in as a take: the drop with a camera ringed in the tally's red, then the take
   itself small in a vertical frame — muted, looping, the tally's dot in its corner — its length in the HUD's type, and
   while it goes up a thin red bar with the percent. Phone first: one column, nothing wider than the card. */
.src-video { display: grid; gap: 8px; }
.src-head { flex-wrap: wrap; row-gap: 2px; }
.src-hint { color: var(--fog); font-size: 12.5px; font-weight: 600; }
.src-body { display: grid; gap: 8px; }
.drop-video .drop-icon { background: var(--deck-2); box-shadow: inset 0 0 0 1.5px var(--tally); }
.drop-video .drop-icon svg { stroke: var(--tally); }
.picked-video .picked-thumb { width: 48px; height: 64px; }
.picked-video .picked-thumb video { width: 100%; height: 100%; object-fit: cover; }
.picked-video .picked-thumb::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--tally);
  box-shadow: 0 0 0 2px rgb(6 23 27 / .6); }
.picked-video .picked-text small { font-family: var(--hud); letter-spacing: .02em; }
.src-progress { display: flex; align-items: center; gap: 10px; color: var(--fog); font: 700 12px/1 var(--hud); }
.src-progress progress { flex: 1 1 auto; height: 4px; border: 0; border-radius: 4px; overflow: hidden; -webkit-appearance: none; appearance: none; background: rgb(234 244 241 / .12); }
.src-progress progress::-webkit-progress-bar { background: rgb(234 244 241 / .12); }
.src-progress progress::-webkit-progress-value { background: var(--tally); }
.src-progress progress::-moz-progress-bar { background: var(--tally); }