media-container *{box-sizing:border-box}media-container{position:relative;isolation:isolate;container:root / inline-size;overflow:clip;border-radius:var(--minimal-border-radius, 2rem);background:#000;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}media-container:after{content:"";position:absolute;pointer-events:none;border-radius:inherit;z-index:10;inset:0;box-shadow:inset 0 0 0 1px #00000026}@media (prefers-color-scheme: dark){media-container:after{box-shadow:inset 0 0 0 1px #ffffff26}}media-container:fullscreen{border-radius:0}media-container>::slotted([slot="media"]),media-container>video,media-container>audio{display:block;width:100%;height:100%}media-container>.overlay{position:absolute;inset:0;display:flex;flex-flow:column nowrap;align-items:start;pointer-events:none;border-radius:inherit;background-image:linear-gradient(to top,#000000b3,#00000080 7.5rem,#0000);transform:translateY(100%);transition-property:transform,opacity;transition-duration:.15s;transition-timing-function:ease-out;transition-delay:.5s;opacity:0}media-container:hover>.overlay,media-container:has([data-paused])>.overlay,media-container:has([aria-expanded=true])>.overlay{opacity:1;transform:translateY(0);transition-duration:.1s;transition-delay:0ms}.control-bar{position:absolute;bottom:0;inset-inline:0;padding:2.5rem .75rem .75rem;display:flex;align-items:center;gap:.875rem;will-change:transform,filter,opacity;transform:translateY(100%);opacity:0;filter:blur(8px);transition-property:transform,filter,opacity;transition-delay:.5s;transition-duration:.3s;transition-timing-function:ease-out;color:#fff}media-container:hover>.control-bar,media-container:has([data-paused])>.control-bar,media-container:has([aria-expanded=true])>.control-bar{opacity:1;transform:translateY(0);filter:blur(0px);transition-delay:0ms;transition-duration:.1s}.time-display-group{display:flex;align-items:center;gap:.25rem}.duration-display{display:contents;color:#ffffff80}media-current-time-display,media-duration-display{text-shadow:0 1px 0 oklab(0 0 0 / .2);font-variant-numeric:tabular-nums}.button-group{display:flex;align-items:center;gap:.375rem}.button{display:grid;flex-shrink:0;padding:.625rem;cursor:pointer;background:transparent;border:none;border-radius:.375rem;color:#fff;-webkit-user-select:none;user-select:none;outline:2px solid transparent;outline-offset:-2px;transition-property:background-color,color,outline-offset;transition-duration:.15s;transition-timing-function:ease-out}.button:hover,.button:focus-visible,.button[aria-expanded=true]{color:#fffc;text-decoration:none}.button:focus-visible{outline-color:#fff;outline-offset:2px}.button[disabled]{cursor:not-allowed;opacity:.5;filter:grayscale(1)}.button .icon{grid-area:1 / 1;width:18px;height:18px;filter:drop-shadow(0 1px 0 oklab(0 0 0 / .4))}media-play-button .icon{opacity:0;transition:opacity .15s linear}media-play-button:not([data-paused]) .pause-icon,media-play-button[data-paused] .play-icon{opacity:1}media-fullscreen-button .icon{display:none}media-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,media-fullscreen-button[data-fullscreen] .fullscreen-exit-icon{display:inline}media-mute-button .icon{display:none}media-mute-button:not([data-volume-level]) .volume-low-icon,media-mute-button[data-volume-level=high] .volume-high-icon,media-mute-button[data-volume-level=medium] .volume-high-icon,media-mute-button[data-volume-level=low] .volume-low-icon,media-mute-button[data-volume-level=off] .volume-off-icon{display:inline}.slider{flex:1;display:flex;align-items:center;justify-content:center;position:relative;border-radius:calc(infinity * 1px);outline:none}.slider[data-orientation=horizontal]{min-width:5rem;width:100%;height:1.25rem}.slider[data-orientation=vertical]{height:4.5rem;width:1.25rem}.slider-track{position:relative;isolation:isolate;background-color:#fff3;border-radius:inherit;overflow:hidden;-webkit-user-select:none;user-select:none;outline:2px solid transparent;outline-offset:-2px;transition:outline-offset .15s ease-out;box-shadow:0 0 0 1px #0000000d}.slider-track[data-orientation=horizontal]{width:100%;height:.1875rem}.slider-track[data-orientation=vertical]{width:.1875rem;height:100%}.slider:focus-visible .slider-track{outline-color:#fff;outline-offset:6px}.slider-thumb{width:.75rem;height:.75rem;background-color:#fff;border-radius:calc(infinity * 1px);-webkit-user-select:none;user-select:none;z-index:10;box-shadow:0 0 0 1px #0000001a,0 1px 3px #00000026,0 1px 2px -1px #00000026;opacity:0;scale:.7;transform-origin:center;transition-property:opacity,scale;transition-duration:.15s;transition-timing-function:ease-out}.slider:hover .slider-thumb,.slider:focus-within .slider-thumb{opacity:1;scale:1}.slider-track[data-orientation=horizontal] .slider-thumb{cursor:ew-resize}.slider-track[data-orientation=vertical] .slider-thumb{cursor:ns-resize}.slider-pointer{display:none}.slider-progress{background-color:#fff;border-radius:inherit}media-preview-time-display{font-variant-numeric:tabular-nums}.popup-animation{transition-property:transform,scale,opacity,filter;transition-duration:.2s;transform:scale(1);transform-origin:bottom;opacity:1;filter:blur(0px)}.popup-animation[data-starting-style],.popup-animation[data-ending-style]{transform:scale(0);opacity:0;filter:blur(8px)}.popup-animation[data-instant]{transition-duration:0ms}media-popover{margin:0;border:none;box-shadow:none;background:transparent;padding:.75rem .25rem;border-radius:calc(infinity * 1px)}media-tooltip{margin:0;border:none;box-shadow:none;background:transparent;color:#fff;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;background-color:#ffffff1a;-webkit-backdrop-filter:blur(64px) brightness(.9) saturate(1.5);backdrop-filter:blur(64px) brightness(.9) saturate(1.5);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}@media (prefers-reduced-transparency: reduce){media-tooltip{background-color:#000000b3}}@media (prefers-contrast: more){media-tooltip{background-color:#000000e6}}.tooltip{display:none;white-space:nowrap}[data-paused]+media-tooltip .play-tooltip,:not([data-paused])+media-tooltip .pause-tooltip{display:block}[data-fullscreen]+media-tooltip .fullscreen-exit-tooltip,:not([data-fullscreen])+media-tooltip .fullscreen-enter-tooltip{display:block}