/* intro-video-player.css - v2.0.4 */
.setup-video-dialog { --intro-dialog-ratio: 1.777777778; }
.classroom-video-dialog { --intro-dialog-ratio: 1.908548708; }
.setup-video-dialog .v-overlay__content, .classroom-video-dialog .v-overlay__content {
    /* Keep Vuetify's 24px margins in both orientations, even with an inline max-width. */
    width: min(728px, calc(100% - 48px), calc((100vh - 48px) * var(--intro-dialog-ratio))) !important;
    width: min(728px, calc(100% - 48px), calc((100dvh - 48px) * var(--intro-dialog-ratio))) !important;
}
.intro-video { position: relative; width: 100%; aspect-ratio: var(--intro-video-ratio, 16 / 9); background: #111; color: #fff; }
.intro-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.intro-video-center, .intro-video-bar { position: absolute; z-index: 1; color: #fff; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8); }
.intro-video-center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; background: rgba(33,33,33,.85); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,.28); }
.intro-video-bar { left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 16px; background: rgba(20,22,28,.5); }
.intro-video-bar button { display: grid; place-items: center; min-width: 28px; min-height: 28px; color: inherit; background: none; border: 0; cursor: pointer; }
.intro-video-bar span { font-size: 12px; font-variant-numeric: tabular-nums; }
.intro-video-bar input { flex: 1; min-width: 24px; accent-color: #fff; cursor: pointer; }
.intro-video-bar select { color: #fff; background: #262a30; border-radius: 4px; padding: 4px 2px; font-size: 12px; cursor: pointer; }
.intro-video-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: #111; }
.intro-video-error button { border: 1px solid #fff; border-radius: 8px; padding: 8px 16px; }
.intro-video button:focus-visible, .intro-video input:focus-visible, .intro-video select:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.intro-video button:disabled { opacity: .5; cursor: wait; }
.intro-video svg { width: 20px; height: 20px; fill: currentColor; }
.intro-video-center svg { width: 28px; height: 28px; }
.intro-video--hidden { cursor: none; }
.intro-video--hidden .intro-video-bar, .intro-video--hidden .intro-video-center { opacity: 0; pointer-events: none; }
.intro-video--hidden.intro-video--keyboard .intro-video-bar:has(:focus-visible), .intro-video--hidden.intro-video--keyboard .intro-video-center:focus-visible { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
    .intro-video:not(:hover):not(.intro-video--keyboard):not(.intro-video--touch) .intro-video-bar,
    .intro-video:not(:hover):not(.intro-video--keyboard):not(.intro-video--touch) .intro-video-center.is-playing {
        opacity: 0; pointer-events: none; transition: none !important;
    }
}
.intro-video:fullscreen { width: 100vw; height: 100vh; }
.intro-video--touch .intro-video-bar { flex-wrap: wrap; }
.intro-video--touch .intro-video-bar button { min-width: 44px; min-height: 44px; }
.intro-video--touch .intro-video-bar select { min-height: 44px; }
@media (max-width: 480px) {
    .intro-video-bar { left: 8px; right: 8px; gap: 4px; padding: 6px; }
    .intro-video-bar span { font-size: 10px; }
    .intro-video-bar select { font-size: 11px; }
}