.video-scroll {
  background: #242424;
  scrollbar-width: auto;
  scrollbar-color: #a0a0a0 #242424;
}
.video-scroll::-webkit-scrollbar { height: 10px; }
.video-scroll::-webkit-scrollbar-track { background: #242424; }
.video-scroll::-webkit-scrollbar-thumb { background: #a0a0a0; border: 2px solid #242424; border-radius: 8px; }
.video-scroll::-webkit-scrollbar-thumb:hover { background: #c0c0c0; }
.video-scroll::-webkit-scrollbar-button { background-color: #242424; width: 12px; }
.video-scroll::-webkit-scrollbar-button:horizontal:decrement {
  background: #242424 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23a0a0a0' d='M8 1 3 5l5 4z'/%3E%3C/svg%3E") center no-repeat;
}
.video-scroll::-webkit-scrollbar-button:horizontal:increment {
  background: #242424 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23a0a0a0' d='m4 1 5 4-5 4z'/%3E%3C/svg%3E") center no-repeat;
}

.video-scroll{padding-bottom:14px;scroll-snap-type:x proximity;scroll-behavior:smooth}
.video-scroll>li{scroll-snap-align:start;flex-shrink:0}
.video-controls{display:flex;gap:8px}
.video-controls button{width:32px;height:32px;border:1px solid #555;border-radius:6px;background:#242424;color:#bdbdbd;font-size:25px;line-height:1;cursor:pointer}
.video-controls button:hover:not(:disabled){background:#383838;color:#eee}
.video-controls button:disabled{opacity:.3;cursor:default}
.video-controls button:focus-visible,.video-scroll:focus-visible{outline:2px solid #a0a0a0;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.video-scroll{scroll-behavior:auto}}