html:has(#viewer[open]),body:has(#viewer[open]){overflow:hidden;overscroll-behavior:none}
.media-dialog{--media-inset-top:env(safe-area-inset-top,0px);--media-inset-right:env(safe-area-inset-right,0px)}
.media-dialog .viewer-top{position:fixed;top:var(--preview-controls-top,12px);right:var(--preview-controls-right,12px);transition:top .25s cubic-bezier(.2,.8,.3,1),right .25s cubic-bezier(.2,.8,.3,1)}
#viewer[open]{animation:preview-open .2s ease}
#viewer[open] :is(.stage,.viewer-top,.media-download){animation:preview-content-in .2s ease backwards}
#viewer.preview-exit{animation:preview-close .16s ease both;pointer-events:none}
#viewer.preview-exit :is(.stage,.viewer-top,.media-download){animation:preview-content-out .16s ease both}
#viewer.preview-exit :is(.media-image-commands.is-visible,.media-video-controls,.media-video-commands){animation:media-controls-out .16s ease both}
#viewer[open]::backdrop{animation:preview-backdrop-in .2s ease}
#viewer.preview-exit::backdrop{animation:preview-backdrop-out .16s ease both}
@keyframes preview-open{from{opacity:0}to{opacity:1}}
@keyframes preview-close{from{opacity:1}to{opacity:0}}
@keyframes preview-content-in{from{translate:0 12px}to{translate:0 0}}
@keyframes preview-content-out{from{translate:0 0}to{translate:0 12px}}
@keyframes preview-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes preview-backdrop-out{from{opacity:1}to{opacity:0}}
.media-dialog.preview-zoomed.preview-controls-hidden .viewer-actions{opacity:1;translate:0 0;pointer-events:auto}
.media-dialog .image-preview-stage{overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center}
.preview-image-surface{position:relative;flex:none;line-height:0;transform-origin:center;will-change:transform}
.media-dialog .preview-image-surface>img{display:block;width:auto;height:auto;max-width:88vw;max-height:86dvh;object-fit:contain;cursor:grab}
.preview-dragging .preview-image-surface>img{cursor:grabbing}
.preview-image-tint{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:color}
.media-image-commands{--media-enter-x:-50%;position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));translate:-50% 0;display:flex;gap:8px;z-index:6;align-items:center;opacity:0;visibility:hidden;pointer-events:none;translate:-50% 8px;transition:opacity .16s ease,translate .2s ease,visibility 0s linear .2s}
.media-command{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:22px;padding:0 12px;flex:none}
.media-command:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--glass-ink)}
.media-command:disabled{opacity:.4}
.media-popup{--popup-x:0;position:fixed;inset:auto 16px calc(70px + env(safe-area-inset-bottom)) auto;margin:0;padding:12px 18px;width:min(300px,calc(100vw - 32px));z-index:9;max-height:calc(100dvh - 100px);overflow:auto;transform-origin:100% 0}
.media-video-popup{--popup-shift:18px;transform-origin:100% 100%}
.media-popup label{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:42px;font-size:12px}
.media-popup select{max-width:170px;min-width:0;background:transparent;color:inherit;border:0;border-bottom:1px solid var(--glass-rim);padding:5px 18px 5px 0;font:inherit}
.media-popup input[type=color]{width:42px;height:28px;border:0;background:none;padding:0}
.media-popup input[type=range]{width:140px;accent-color:var(--glass-ink)}
.media-video-controls{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:30px;z-index:5;transition:opacity .2s ease,translate .25s ease;animation:media-controls-in .25s ease backwards}
.media-video-time{font:11px Arial,sans-serif;min-width:0;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.media-video-controls input{flex:1;min-width:30px;width:100%;accent-color:var(--glass-ink)}
.media-dialog.video-dialog .stage{display:flex;justify-content:center;min-width:min(280px,88vw);min-height:0;overflow:hidden}
.media-dialog.video-dialog .stage video{display:block;width:auto;height:auto;max-width:88vw;max-height:calc(86dvh - 56px);min-width:0;object-fit:contain;border-radius:10px}
.media-dialog.video-dialog .viewer-bottom{display:none}
.media-dialog.video-dialog.video-error .viewer-bottom{display:block;position:absolute;inset:auto 12px 80px;padding:12px;background:var(--panel);border-radius:10px;z-index:6}
.media-dialog.preview-controls-hidden .media-video-controls:not(:focus-within):not(:hover){opacity:0;translate:0 12px;pointer-events:none}
.media-dialog:fullscreen{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border-radius:0;background:#171615;display:flex;align-items:center;justify-content:center}
.media-dialog:fullscreen .stage{max-width:100vw;max-height:100dvh;min-width:0!important;width:100%;height:100%}
.media-dialog:fullscreen .stage video{width:100%;height:100%;max-width:100vw;max-height:100dvh;min-width:0;border-radius:0}
.media-dialog:fullscreen .media-video-controls{position:fixed;left:50%;right:auto;bottom:calc(20px + env(safe-area-inset-bottom));width:min(680px,calc(100vw - 40px));transform:translateX(-50%)}
.media-dialog:fullscreen .viewer-top{top:calc(16px + env(safe-area-inset-top))}
@keyframes media-controls-in{from{opacity:0;translate:var(--media-enter-x,0) 10px}to{opacity:1;translate:var(--media-enter-x,0) 0}}
@keyframes media-controls-out{from{opacity:1;translate:var(--media-enter-x,0) 0}to{opacity:0;translate:var(--media-enter-x,0) 10px}}
@media(max-width:600px){.media-video-controls{gap:6px;padding:5px}.media-video-time{font-size:9px}.media-video-controls .media-command{min-width:44px;width:44px;height:44px;padding:0}.media-popup{right:12px}.media-image-commands{bottom:calc(12px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){#viewer[open],#viewer[open]::backdrop,#viewer[open] :is(.stage,.viewer-top,.media-download),.media-popup,.media-video-controls,.media-image-commands,.media-dialog .viewer-top{animation:none;transition:none}}
@media(forced-colors:active){.media-command:focus-visible{outline:1px solid Highlight;outline-offset:-3px}.media-popup select{border-bottom-color:ButtonText}}

.media-image-popup{inset:auto;margin:0}

.media-popup.liquid-glass{overflow:auto}

.media-image-commands.is-visible{opacity:1;visibility:visible;pointer-events:auto;translate:-50% 0;transition-delay:0s}
.media-appearance-choices{display:flex;justify-content:center;gap:10px;padding-bottom:10px;margin-bottom:5px;border-bottom:1px solid var(--glass-rim)}
.media-appearance-choice{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:10px;border:1px solid var(--glass-rim);border-radius:50%;background:transparent;color:inherit}
.media-appearance-choice svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.media-appearance-choice[aria-pressed=true]{background:#8d5b292e;box-shadow:inset 0 0 0 1px var(--glass-ink)}
.media-appearance-choice:hover{background:#8d5b2914}
.media-appearance-choice:active{background:#8d5b2930}
.media-appearance-choice:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--glass-ink)}

#viewer>.media-download{position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));display:grid;place-items:center;width:44px;height:44px;padding:0;z-index:7;transition:opacity .2s ease,translate .25s ease}
.media-download svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.media-dialog.preview-controls-hidden>.media-download:not(:focus-visible):not(:hover){opacity:0;translate:0 12px;pointer-events:none}
#viewer>.media-download:focus-visible{box-shadow:inset 0 0 0 1px var(--glass-ink)}
@media(prefers-reduced-motion:reduce){#viewer>.media-download{animation:none;transition:none}}

.media-dialog.preview-zoomed[open]{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0;display:flex;align-items:center;justify-content:center}
.media-dialog.preview-zoomed .image-preview-stage{flex:1;width:100%;height:100%;max-width:none;max-height:none;border-radius:0}

.media-video-commands{position:fixed;display:flex;gap:8px;align-items:center;z-index:6;transition:opacity .2s ease,translate .25s ease;animation:media-controls-in .25s ease backwards}
.media-video-commands .media-command{min-width:44px;height:44px}
.media-video-commands .media-speed{width:auto;min-width:64px;padding:0 14px;border-radius:999px}
.media-video-commands svg,.media-video-controls svg,.media-volume-popup svg,.video-dialog .viewer-actions .media-command svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.media-video-commands .media-command[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--glass-ink)}
.media-video-popup{width:max-content;min-width:140px;max-width:calc(100vw - 32px);padding:8px}
.media-video-choice{display:block;width:100%;min-height:44px;border:0;border-radius:16px;padding:10px 16px;background:transparent;color:inherit;text-align:left;font:inherit}
.media-video-choice:hover{background:#8d5b2914}
.media-video-choice:active,.media-video-choice[aria-pressed=true]{background:#8d5b2930}
.media-video-choice:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--glass-ink)}
.media-dialog.preview-controls-hidden .media-video-commands:not(:focus-within):not(:hover){opacity:0;translate:0 12px;pointer-events:none}
@media(prefers-reduced-motion:reduce){.media-video-commands{animation:none;transition:none}}
@media(forced-colors:active){.media-video-choice:focus-visible{outline:1px solid Highlight;outline-offset:-3px}}

.media-dialog.native-video :is(.media-video-controls,.media-video-commands){display:none}
.media-dialog.native-video .stage video{max-height:86dvh}

.media-video-seek-feedback{position:fixed;z-index:8;display:flex;align-items:center;justify-content:center;gap:5px;min-width:88px;height:56px;padding:0 14px;border-radius:28px;font:600 14px Arial,sans-serif;pointer-events:none;opacity:0;visibility:hidden;translate:-50% calc(-50% + 8px);transition:opacity .16s ease,translate .2s ease,visibility 0s linear .2s}
.media-video-seek-feedback.is-visible{opacity:1;visibility:visible;translate:-50% -50%;transition-delay:0s}
.media-video-seek-feedback svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.media-video-seek-feedback{transition:none}}

.video-continuing :is(.media-video-controls,.media-video-commands){animation:none}

/* Avoid a full dialog backdrop-filter surface around hardware-decoded video. */
#viewer.video-dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
body:has(#viewer.video-dialog[open]) :is(.masthead,.intro,.library-heading,.toolbar,.browse-meta,.card,footer){filter:blur(4px)}

.media-volume-popup:popover-open{display:flex;align-items:center;gap:10px;min-width:220px}
.media-volume-popup label{gap:10px;min-height:44px}
.media-volume-popup input[type=range]{width:110px;min-height:44px}

@media not all and (forced-colors:active){
.media-video-controls .media-video-seek{-webkit-appearance:none;appearance:none;height:44px;margin:0;padding:0;background:transparent;outline:0;cursor:pointer;border-radius:20px}
.media-video-controls .media-video-seek::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,rgb(var(--glass-color)) 0 var(--seek-progress,0%),var(--glass-shade) var(--seek-progress,0%) 100%)}
.media-video-controls .media-video-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5px;border:1px solid var(--glass-shade);border-radius:50%;background:var(--glass-fallback);box-shadow:inset 0 1px 1px var(--glass-rim)}
.media-video-controls .media-video-seek::-moz-range-track{height:6px;border-radius:999px;background:var(--glass-shade)}
.media-video-controls .media-video-seek::-moz-range-progress{height:6px;border-radius:999px;background:rgb(var(--glass-color))}
.media-video-controls .media-video-seek::-moz-range-thumb{width:16px;height:16px;border:1px solid var(--glass-shade);border-radius:50%;background:var(--glass-fallback);box-shadow:inset 0 1px 1px var(--glass-rim)}
.media-video-controls .media-video-seek:focus-visible{box-shadow:inset 0 0 0 1px var(--glass-ink)}
}

.media-video-subtitles{position:fixed;z-index:6;max-width:calc(88vw - 16px);padding:3px 7px;border-radius:4px;background:#000b;color:#fff;font:clamp(14px,2.2vw,24px)/1.25 Arial,sans-serif;text-align:center;white-space:pre-line;overflow-wrap:anywhere;overflow:hidden;cursor:grab;touch-action:none;user-select:none;opacity:0;visibility:hidden;translate:-50% calc(-50% + 5px);transition:opacity .14s ease,translate .14s ease,visibility 0s linear .16s}
.media-video-subtitles.is-visible{opacity:1;visibility:visible;translate:-50% -50%;transition-delay:0s}
.media-video-subtitles.is-dragging{cursor:grabbing;transition:none}
.media-video-subtitles:focus-visible{outline:0;box-shadow:inset 0 0 0 1px white}
@media(prefers-reduced-motion:reduce){.media-video-subtitles{transition:none}}
@media(forced-colors:active){.media-video-subtitles:focus-visible{outline:1px solid Highlight;outline-offset:-2px}}

.media-popup{overscroll-behavior:contain}