.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.intro-video-stage { position: relative; aspect-ratio: 16/9; background: #111113; }
.intro-video-stage video { height: 100%; object-fit: contain; }
.video-controls[hidden],.video-loading[hidden],.video-error[hidden],.video-surface-toggle[hidden] { display: none; }
.video-surface-toggle { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; touch-action: manipulation; }
.intro-video-cover { touch-action: manipulation; }
.video-surface-toggle>span { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgb(255 255 255 / .25); border-radius: 50%; background: rgb(17 17 19 / .8); color: #fff; opacity: 0; transition: opacity .2s; }
.video-surface-toggle .icon { width: 23px; height: 23px; }
.has-started:not(.is-playing) .video-surface-toggle>span { opacity: 1; }
.video-controls { position: absolute; z-index: 2; inset: auto 0 0; padding: 20px 18px 8px; background: linear-gradient(transparent,rgb(0 0 0 / .7)); color: #fff; }
.video-timeline { display: flex; align-items: center; flex: 1; min-width: 0; height: 44px; cursor: pointer; }
.video-controls input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; height: 3px; margin: 0; border-radius: 5px; cursor: pointer; background: linear-gradient(to right,#64c895 0 var(--played,0%),rgb(255 255 255 / .45) var(--played,0%) var(--buffered,0%),rgb(255 255 255 / .2) var(--buffered,0%) 100%); }
.video-controls input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff; }
.video-controls input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff; }
.video-controls input[type=range]:disabled { cursor: default; opacity: .7; }
.video-control-row { display: flex; align-items: center; gap: 8px; }
.video-icon-button { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0; border-radius: var(--corner-md); color: #fff; }
.video-icon-button:hover { background: rgb(255 255 255 / .12); }
.video-icon-button .icon { width: 18px; height: 18px; }
.video-icon-button[data-video-fullscreen] { margin-left: auto; }
.video-controls :focus-visible { outline-color: #fff; outline-offset: 2px; }
.video-loading { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; background: rgb(17 17 19 / .25); }
.video-loading>span:first-child { width: 34px; height: 34px; border: 3px solid rgb(255 255 255 / .2); border-top-color: #fff; border-radius: 50%; animation: video-spin .8s linear infinite; }
@keyframes video-spin { to { transform: rotate(360deg); } }
.video-error { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 24px; background: #111113; color: #f1f1f3; text-align: center; }
.video-error strong { font-size: 17px; }
.video-error p { color: #adadb5; font-size: 12px; }
.video-error .button { margin-top: 6px; }
.video-error>a { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #adadb5; margin-top: 7px; }
.video-error>a .icon { width: 12px; height: 12px; }
.video-expanded { overflow: hidden; }
.intro-video-shell.is-expanded { position: fixed; z-index: 100; inset: 0; }
.intro-video-shell:fullscreen,.intro-video-shell.is-expanded { display: flex; flex-direction: column; width: 100%; height: 100%; height: 100dvh; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.intro-video-shell:fullscreen .intro-video-stage,.intro-video-shell.is-expanded .intro-video-stage { flex: 1; min-height: 0; aspect-ratio: auto; }
.intro-video-shell:fullscreen video,.intro-video-shell.is-expanded video { width: 100%; height: 100%; aspect-ratio: auto; }
.intro-video-shell.is-portrait-fullscreen .intro-video-stage { position: absolute; flex: none; left: 50%; top: 50%; width: var(--fullscreen-height); height: var(--fullscreen-width); transform: translate(-50%,-50%) rotate(90deg); }
.intro-video-shell.is-mobile-fullscreen .video-controls { padding: 20px max(18px,env(safe-area-inset-left),env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)); }
@media(max-width:600px) {
  .video-controls { padding: 14px 10px 3px; }
  .video-icon-button { width: 44px; height: 44px; }
  .video-icon-button .icon { width: 17px; height: 17px; }
  .video-surface-toggle>span { width: 44px; height: 44px; }
  .video-surface-toggle .icon { width: 19px; height: 19px; }
  .video-error { padding: 15px; gap: 5px; }
  .video-error strong { font-size: 14px; }
  .video-error .button { min-height: 35px; }
}
@media(prefers-reduced-motion:reduce) {
  .video-loading>span:first-child { animation: none; }
  .video-controls,.video-surface-toggle>span { transition: none; }
}