/* Controls belong to the player frame so they remain available in fullscreen. */
.video-player-frame{background:#15191f;color:#fff}
.video-player-frame:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.video-controls{position:absolute;z-index:4;bottom:0;left:0;right:0;padding:40px 20px 12px;background:linear-gradient(transparent,rgba(0,0,0,.78));transition:opacity .18s ease}
.video-controls[hidden]{display:none}
.video-player-frame.controls-idle:not(:has(.video-controls :focus-visible)) .video-controls{opacity:0;pointer-events:none}
.video-player-frame.controls-idle:not(:has(.video-controls :focus-visible)){cursor:none}
.video-seek{--video-progress:0%;display:block;width:100%;height:18px;margin:0 0 3px;cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent;border:0}
.video-seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#55bdf6 var(--video-progress),rgba(255,255,255,.32) var(--video-progress))}
.video-seek::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(to right,#55bdf6 var(--video-progress),rgba(255,255,255,.32) var(--video-progress))}
.video-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border:0;border-radius:50%;background:#55bdf6;opacity:0;transition:opacity .15s}
.video-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#55bdf6;opacity:0}
.video-controls:hover .video-seek::-webkit-slider-thumb,.video-seek:focus-visible::-webkit-slider-thumb{opacity:1}
.video-controls:hover .video-seek::-moz-range-thumb,.video-seek:focus-visible::-moz-range-thumb{opacity:1}
.video-control-row{display:flex;align-items:center;gap:12px;min-width:0}
.video-control-button{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border:0;border-radius:6px;background:transparent;color:#fff;padding:7px;cursor:pointer}
.video-control-button:hover{background:rgba(255,255,255,.15)}
.video-control-button:focus-visible,.video-quality button:focus-visible,.video-controls input:focus-visible{outline:2px solid #55bdf6;outline-offset:2px}
.video-control-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.video-control-button .icon-pause,.video-control-button .icon-muted,.video-control-button .icon-contract{display:none}
.video-player-frame.is-playing .icon-play,.video-player-frame.is-muted .icon-sound,.video-player-frame.is-fullscreen .icon-expand{display:none}
.video-player-frame.is-playing .icon-pause,.video-player-frame.is-muted .icon-muted,.video-player-frame.is-fullscreen .icon-contract{display:block}
.video-time{color:#fff;font:12px/1.4 Inter,sans-serif;letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.video-volume{display:flex;align-items:center;gap:4px}
.video-volume input{--video-volume:100%;width:58px;height:18px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;margin:0;border:0}
.video-volume input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#fff var(--video-volume),rgba(255,255,255,.3) var(--video-volume))}
.video-volume input::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(to right,#fff var(--video-volume),rgba(255,255,255,.3) var(--video-volume))}
.video-volume input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;margin-top:-2.5px;border:0;border-radius:50%;background:#fff}
.video-volume input::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:#fff}
.video-quality{position:relative;margin-left:auto;flex-shrink:0}
.video-quality-trigger{display:flex;align-items:center;justify-content:center;gap:5px;min-width:66px;height:36px;padding:0 9px;border:0;border-radius:6px;color:#fff;background:transparent;font:500 13px/1.4 Inter,"Noto Sans SC",sans-serif;cursor:pointer}
.video-quality-trigger svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.video-quality-trigger:hover,.video-quality.is-open .video-quality-trigger{background:rgba(255,255,255,.1)}
.video-quality.is-open .video-quality-trigger svg{transform:rotate(180deg)}
.video-quality-menu{position:absolute;bottom:calc(100% + 12px);right:0;width:214px;padding:8px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(26,28,33,.95);box-shadow:0 8px 30px rgba(0,0,0,.24);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:video-menu-in .15s ease-out}
.video-quality-menu[hidden]{display:none}
.video-quality-heading{margin:5px 10px 6px;color:#9298a3;font-size:11px;letter-spacing:.05em}
.video-quality-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:43px;padding:8px 10px;border:0;border-radius:6px;text-align:left;font:500 13px/1.4 Inter,"Noto Sans SC",sans-serif;letter-spacing:0;color:#f1f2f5;background:transparent;cursor:pointer}
.video-quality-option>span{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.video-quality-option small{font-size:10px;font-weight:400;color:#a0a6b1}
.video-quality-option svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;visibility:hidden;flex-shrink:0}
.video-quality-option:hover{background:rgba(255,255,255,.08)}
.video-quality-option[aria-checked="true"]{color:#55bdf6;background:rgba(85,189,246,.09)}
.video-quality-option[aria-checked="true"] small{color:#8fb5cc}
.video-quality-option[aria-checked="true"] svg{visibility:visible}
@keyframes video-menu-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.video-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.video-player-frame:fullscreen{width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;background:#000}
.video-player-frame:fullscreen video{width:100%;height:100%}
.video-player-frame:fullscreen .video-controls{padding:50px 32px 20px}
@media(max-width:600px){
  .video-controls{padding:28px 10px 7px}
  .video-control-row{gap:5px}
  .video-control-button{width:32px;height:32px;padding:5px}
  .video-time{font-size:10px}
  .video-volume input{display:none}
  .video-quality-trigger{font-size:12px;height:32px;min-width:62px;padding:0 7px}
  .video-quality-menu{width:192px;bottom:calc(100% + 8px);padding:4px;border-radius:9px}
  .video-quality-heading{display:none}
  .video-quality-option{min-height:29px;padding:5px 9px;font-size:11px}
  .video-quality-option small{font-size:9px}
  .video-player-frame:fullscreen .video-controls{padding:32px 12px 12px}
}
.video-quality-option:disabled{opacity:.45;cursor:not-allowed}
.video-quality-option:disabled:hover{background:transparent}
@media(prefers-reduced-motion:reduce){.video-controls,.video-quality-trigger svg{transition:none}.video-quality-menu{animation:none}}
@media(max-width:450px){
  .video-control-row{gap:4px}
  .video-control-button{width:28px;height:28px;padding:4px}
  .video-volume{display:none}
  .video-time{font-size:9px}
  .video-quality-trigger{font-size:11px;min-width:60px;height:28px}
}