media-container *{box-sizing:border-box}media-container{position:relative;isolation:isolate;container:root / inline-size;overflow:clip;border-radius:var(--frosted-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:before,media-container:after{content:"";position:absolute;pointer-events:none;border-radius:inherit;z-index:10}media-container:before{inset:1px;box-shadow:inset 0 0 0 1px #ffffff26}media-container:after{inset:0;box-shadow:inset 0 0 0 1px #0000001a}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,#00000080,#0000004d,#0000);-webkit-backdrop-filter:saturate(1.5) brightness(.9);backdrop-filter:saturate(1.5) brightness(.9);transition:opacity .15s 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;transition-duration:.1s;transition-delay:0ms}.surface{background-color:#ffffff1a;-webkit-backdrop-filter:blur(64px) brightness(.9) saturate(1.5);backdrop-filter:blur(64px) brightness(.9) saturate(1.5);box-shadow:inset 0 0 0 1px #ffffff26,0 0 0 1px #00000026,#00000026 0 1px 3px,#00000026 0 1px 2px -1px}@media (prefers-reduced-transparency: reduce){.surface{background-color:#000000b3;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #fff3}}@media (prefers-contrast: more){.surface{background-color:#000000e6;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #fff3}}.control-bar{position:absolute;bottom:.75rem;inset-inline:.75rem;padding:.25rem;display:flex;align-items:center;gap:.125rem;border-radius:calc(infinity * 1px);will-change:scale,transform,filter,opacity;scale:.9;opacity:0;filter:blur(8px);transition-property:scale,transform,filter,opacity;transition-delay:.5s;transition-duration:.3s;transition-timing-function:ease-out;transform-origin:bottom;color:#fff}media-container:hover>.control-bar,media-container:has([data-paused])>.control-bar,media-container:has([aria-expanded=true])>.control-bar{opacity:1;scale:1;filter:blur(0px);transition-delay:0ms;transition-duration:.1s}.time-controls{display:flex;align-items:center;flex:1;gap:.75rem;padding-inline:.375rem}media-current-time-display,media-duration-display{text-shadow:0 1px 0 oklab(0 0 0 / .25);font-variant-numeric:tabular-nums}.button{display:grid;flex-shrink:0;padding:.5rem;cursor:pointer;background:transparent;border:none;border-radius:calc(infinity * 1px);color:#ffffffe6;-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]{background-color:#ffffff1a;color:#fff;text-decoration:none}.button:focus-visible{outline-color:#3280ff;outline-color:oklch(62.3% .214 259.815);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 / .25))}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: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:.25rem}.slider-track[data-orientation=vertical]{width:.25rem;height:100%}.slider:focus-visible .slider-track{outline-color:#3280ff;outline-color:oklch(62.3% .214 259.815);outline-offset:6px}.slider-thumb{width:.625rem;height:.625rem;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;transition-property:opacity,height,width;transition-duration:.15s;transition-timing-function:ease-out}.slider-thumb:active{width:.75rem;height:.75rem}.slider:hover .slider-thumb,.slider:focus-within .slider-thumb{opacity:1}.slider-track[data-orientation=horizontal] .slider-thumb{cursor:ew-resize}.slider-track[data-orientation=vertical] .slider-thumb{cursor:ns-resize}.slider-pointer{background-color:#fff3;border-radius:inherit}.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 .625rem;border-radius:calc(infinity * 1px);font-size:.75rem}.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}