.case-video { position: relative; overflow: hidden; background: #101010; }
.video-toggle { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color: #fff; cursor: pointer; }
.video-toggle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; border: 1px solid #ffffffb3; border-radius: 50%; background: #0006; transform: translate(-50%, -50%); transition: opacity 300ms ease; }
.video-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid #fff; transform: translate(-35%, -50%); transition: opacity 300ms ease; }
.is-playing .video-toggle::before, .is-playing .video-toggle::after { opacity: 0; }
.is-playing .video-toggle::after { width: 12px; height: 15px; border: 0; border-inline: 4px solid #fff; transform: translate(-50%, -50%); }
.is-playing .video-toggle:is(:hover, :focus-visible)::before, .is-playing .video-toggle:is(:hover, :focus-visible)::after { opacity: 1; }
.video-controls { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 14px; padding: 26px 16px 10px; color: #fff; background: linear-gradient(transparent,#0008); }
.video-range { --progress: 0%; width: 100%; height: 28px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.video-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right,#fff 0 var(--progress),#ffffff60 var(--progress) 100%); }
.video-range::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; margin-top: -3px; border-radius: 50%; background: #fff; }
.video-range::-moz-range-track { height: 2px; background: #ffffff60; }
.video-range::-moz-range-progress { height: 2px; background: #fff; }
.video-range::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; }
.video-time { font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.video-fullscreen { display: grid; place-items: center; width: 32px; height: 32px; padding: 7px; border: 0; color: #fff; background: transparent; cursor: pointer; }
.video-fullscreen svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.case-video :is(button,input):focus-visible { outline: 1px solid #fff; outline-offset: -2px; }
.case-video:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; }
.case-video:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; }
@media(max-width:600px) { .video-controls { gap: 8px; padding-inline: 10px; } .video-time { font-size: 9px; } }