body{--controls-opacity-transition:opacity 100ms ease-out;--hide-button-transition-time:150ms;--edge-gap:16px;--edge-gap-2:calc(var(--edge-gap)*2);--media-player-width:392px;--video-height-ratio:1;--media-container-height:calc(var(--media-player-width)*var(--video-height-ratio));--docked-video-container-height:max(150px,25dvh);--audio-container-height:160px;--audio-caption-height:96px;--captioned-audio-container-height:calc(var(--audio-container-height) + var(--audio-caption-height));--controls-height:40px;--queue-block-gap:8px;--queue-block-gap-2:calc(var(--queue-block-gap)*2);--queue-item-height:64px;--queue-item-count:0;--queue-height-limit:calc(var(--adjusted-dvh) - var(--media-container-height) - var(--controls-height));--target-queue-height:0px;--queue-height:min(var(--target-queue-height),var(--queue-height-limit));&.showing-queue{--target-queue-height:calc(var(--queue-item-height)*var(--queue-item-count) + var(--queue-block-gap-2))}&:not(.docked){--queue-height-limit:calc(var(--adjusted-dvh) - var(--media-container-height) - var(--controls-height) - var(--edge-gap-2))}&.docked:not(.audio-only){--media-container-height:var(--docked-video-container-height)}&.audio-only{--media-container-height:var(--audio-container-height)}&.audio-only.captioned{--media-container-height:var(--captioned-audio-container-height)}}main{--margin:calc(var(--media-container-height) + var(--controls-height) + var(--queue-height))}[data-docked=top] main{margin-top:var(--margin)}[data-docked=bottom] main{margin-bottom:var(--margin)}button{cursor:pointer;opacity:.75;transition:var(--controls-opacity-transition);&:active,&:hover{opacity:1}}.media-player{--media-player-header-bar-height:12.5dvh;--border-radius:24px;--queue-transition-time:300ms;--audio-only-transition-time:150ms;--target-x:var(--edge-gap);--target-y:0px;backdrop-filter:blur(6px);background-color:rgba(0,0,0,.1);border-radius:var(--border-radius);box-shadow:0 0 48px rgba(0,0,0,.5);contain:content;container:media-player/inline-size;opacity:0;position:fixed;touch-action:none;transform:translate(var(--target-x),max(var(--edge-gap),min(var(--target-y),calc(var(--adjusted-dvh) - var(--edge-gap) - 100%))));transition:opacity .2s ease-out,border-radius .25s ease-out;z-index:100;&[data-snap-edge=right]{--target-x:calc(100dvw - 100% - var(--edge-gap))}&.docked[data-closest-dock=top]{border-radius:0 0 var(--border-radius) var(--border-radius);transform:none}&.docked[data-closest-dock=bottom]{border-radius:var(--border-radius) var(--border-radius) 0 0;transform:translateY(calc(var(--adjusted-dvh) - 100%))}&.hidden{transform:scale(0)}}.media-player *{user-select:none}.media-player .queue{border-radius:var(--border-radius);box-sizing:border-box;width:100%}.media-player .queue .item-template{height:0;overflow:hidden;position:absolute;transform:scale(0);width:0}.media-player .queue .list{--gradient-size:8px;box-sizing:border-box;height:var(--queue-height);mask-image:linear-gradient(to bottom,transparent,#000 var(--gradient-size),#000 calc(100% - var(--gradient-size)),transparent);overflow-x:hidden;overflow-y:auto;padding:0 8px;position:relative;scrollbar-color:var(--scrollbar-color);touch-action:none;width:100%}.media-player .queue .item{border-radius:16px;height:var(--queue-item-height);position:relative;transition:height var(--queue-transition-time) ease-out,box-shadow var(--queue-transition-time) ease-out,transform var(--queue-transition-time) ease-out;width:100%;&:first-child{margin-top:var(--queue-block-gap)}&:last-child{margin-bottom:var(--queue-block-gap)}&.grabbed{backdrop-filter:blur(8px);box-shadow:0 0 24px rgba(0,0,0,.5);transition:box-shadow var(--queue-transition-time) ease-out;z-index:1}}.media-player.reordering-queue .item{transition:none}.media-player .queue .button-container{align-items:center;box-sizing:border-box;display:flex;height:100%;padding:8px;position:absolute;transform:scale(0);transition:transform .25s ease-out;width:100%;button{background-color:transparent;border:none;border-radius:8px;color:#fff;font-size:16px;height:100%;padding:0;transition:background-color .15s ease-out,width .25s ease-out,transform .25s ease-out;width:100%}button:hover{background-color:hsla(0,0%,100%,.1)}}.media-player{&[data-snap-edge=left] .queue .right.undo-button,&[data-snap-edge=right] .queue .left.undo-button{opacity:0;transform:scale(0);width:0}}.media-player .queue .handle-container{--handle-transition-time:150ms;align-items:center;border-radius:16px;display:flex;height:100%;transition:background-color .15s ease-out,transform .25s ease-out;width:100%;&:active,&:hover{background-color:hsla(0,0%,100%,.1)}}.media-player .queue .content-container{flex:1}.media-player .queue .thumbnail{aspect-ratio:1/1;border-radius:8px;height:48px;margin:8px 12px 8px 8px;object-fit:cover;transition:margin var(--handle-transition-time) ease-out}.media-player.showing-queue-handle[data-snap-edge=left] .queue .thumbnail{margin-left:4px}.media-player .queue .handle{align-items:center;cursor:grab;display:flex;height:100%;justify-content:center;opacity:.75;touch-action:none;transform:scale(0);transition:var(--controls-opacity-transition),transform var(--handle-transition-time) ease-out,width var(--handle-transition-time) ease-out;width:0;&:active,&:hover{opacity:1}}.media-player.showing-queue-handle{&[data-snap-edge=left] .queue .left.handle,&[data-snap-edge=right] .queue .right.handle{transform:scale(1);width:40px}}.media-player .queue .text{color:#fff;font-weight:900;margin:8px 8px 0 0;width:100%}.media-player .queue .media-name{-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;font-size:14px;height:max-content;opacity:.75;overflow:hidden;overflow-wrap:anywhere}.media-player .queue .host-name{font-size:8px;margin-top:4px;opacity:.5}.media-player.showing-queue-handle[data-snap-edge=left] .queue .media-name{margin-right:8px}.media-player .drop-down-button-container{display:flex;height:var(--controls-height);justify-content:space-between;margin-inline:12px;.left,.right,button{display:flex}button{align-items:center;aspect-ratio:1/1;background-color:transparent;border:none;height:var(--controls-height);justify-content:center;opacity:.5;padding:0;transform:scale(0);transition:var(--controls-opacity-transition),transform var(--hide-button-transition-time) ease-out}button:hover{opacity:1}i{position:absolute}.queue-button .queue-visible-icon{opacity:0}}.media-player{&[data-snap-edge=left] .drop-down-button-container .left button,&[data-snap-edge=right] .drop-down-button-container .right button{transform:scale(1)}&.showing-queue .queue-button .queue-visible-icon{opacity:1}}.media-player{.media-container{--fullscreen-audio-scale:1;--timeline-transition-time:100ms;--hide-controls-transition-time:500ms;--show-controls-opacity-transition:opacity 50ms ease-out;--controls-padding:8px;--controls-container-height:calc(var(--controls-height) + var(--controls-padding));container:media-container/size;display:flex;justify-content:center;min-height:150px;overflow:hidden;position:relative;width:100%}&:not(.fullscreen) .media-container{height:var(--media-container-height)}}.media-player .background-image{filter:blur(80px);height:100%;object-fit:cover;position:absolute;transform:scale(0);width:100%}.media-player.fullscreen.audio-only .background-image{transform:scale(1)}.media-player .video-container{align-items:center;background-color:#000;border-radius:0 0 var(--border-radius) var(--border-radius);container:video-container/size;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;transition:opacity var(--audio-only-transition-time) ease-out;width:100%}.media-player.audio-only .video-container{opacity:0}.media-player.audio-only-complete .video-container{transform:scale(0)}.media-player.fullscreen .video-container{border-radius:0}.media-player{video{height:100%;max-width:100%}&:not(.docked):not(.fullscreen) video{height:101%}}.media-player .preview-image{height:100%;object-fit:contain;opacity:0;position:absolute;transition:opacity var(--timeline-transition-time) ease-out;width:100%}.media-player.previewing .preview-image.loaded{opacity:1}.media-player .video-container .gradient{--edge-color:rgba(0,0,0,.66);--midpoint-color:rgba(0,0,0,.44);background:linear-gradient(to bottom,var(--edge-color),var(--midpoint-color) 24px,transparent 48px,transparent calc(100% - 56px),var(--midpoint-color) calc(100% - 28px),var(--edge-color));height:100%;position:absolute;transition:var(--show-controls-opacity-transition);width:100%}.media-player.fullscreen .video-container .gradient{background:linear-gradient(to bottom,var(--edge-color),var(--midpoint-color) calc(var(--media-player-header-bar-height) / 2),transparent calc(var(--media-player-header-bar-height) + 7.5dvh),transparent calc(100% - 56px),var(--midpoint-color) calc(100% - 28px),var(--edge-color))}.media-player .video-container .logo-container{align-items:center;display:flex;height:var(--media-player-header-bar-height);justify-content:center;margin-top:1dvh;opacity:0;position:absolute;top:0;transform:scale(0);transition:var(--show-controls-opacity-transition)}.media-player{&.fullscreen .video-container .logo-container{transform:scale(1)}&.fullscreen:not(.hide-controls) .video-container .logo-container{opacity:.85}}.media-player .media-handle-container{display:flex;height:var(--controls-height);left:0;position:absolute;right:0;top:0;transition:var(--show-controls-opacity-transition);.corner{aspect-ratio:1/1;position:relative}}.media-player{&.fullscreen .media-handle-container{transform:scale(0)}.audio-container .media-handle-container{background:none;margin-inline:8px;margin-bottom:4px;position:unset}&.fullscreen .audio-container .media-handle-container{height:0;margin:0}}.media-player .move-handle{align-items:center;cursor:grab;display:flex;flex:1;justify-content:center;opacity:.75;transition:var(--controls-opacity-transition);&:active,&:hover{opacity:1}&:before{background-color:#fff;border-radius:8px;content:"";height:2px;transform:translateY(3px);transition:height .1s ease-out;width:100%}&:active:before{height:4px}}.media-player .dock-button{position:absolute;transform:scale(0);i{transform:translate(3px,6px);transition:transform .15s ease-out}}.media-player[data-closest-dock=top] .dock-button i{transform:translate(3px) scaleY(-1)}.media-player .undock-button{position:absolute;transform:scale(0);&.left i{transform:translateY(7px) rotate(90deg)}&.right i{transform:translateY(-1px) rotate(-90deg)}}.media-player .resize-handle{align-items:center;cursor:nw-resize;display:flex;height:100%;justify-content:center;opacity:.75;position:absolute;transform:scale(0);transition:transform var(--hide-button-transition-time) ease-out,var(--controls-opacity-transition);width:100%;&.right{cursor:ne-resize}&.right i{transform:scaleX(-1)}&:active,&:hover{opacity:1}&:active{transform:scale(1.1)!important}}@media (880px <= width){.media-player.audio-only{&.docked[data-snap-edge=left] .left.undock-button,&.docked[data-snap-edge=right] .right.undock-button,&:not(.docked)[data-snap-edge=left] .left.dock-button,&:not(.docked)[data-snap-edge=right] .right.dock-button{transform:scale(1)}}}@media (816px <= width){.media-player:not(.audio-only){&.docked[data-snap-edge=left] .left.undock-button,&.docked[data-snap-edge=right] .right.undock-button,&:not(.docked)[data-snap-edge=left] .right.resize-handle,&:not(.docked)[data-snap-edge=right] .left.resize-handle{transform:scale(1)}}}.media-player{.audio-container{--edge-transition-time:200ms;--fullscreen-width:360px;position:absolute;transform:scale(0);transform-origin:top}&.audio-only .audio-container{transform:scale(1)}&.fullscreen .audio-container{padding-block:16px}&.audio-only.fullscreen .audio-container{transform:translateY(calc(50dvh - 50%*var(--fullscreen-audio-scale))) scale(var(--fullscreen-audio-scale))}&.audio-only.fullscreen.captioned .audio-container{transform:scale(var(--fullscreen-audio-scale))}}.media-player .audio-container .image{aspect-ratio:1/1;border-radius:8px;cursor:pointer;height:112px;object-fit:cover;&.top{border-radius:32px;height:calc(var(--fullscreen-width) - 16px);margin:0 16px 16px}}.media-player .audio-container .image-container{overflow:hidden;transform:scale(0);transition:width var(--edge-transition-time) ease-out,transform var(--edge-transition-time) ease-out,margin var(--edge-transition-time) ease-out;width:0;&.top{height:0;width:100%}}.media-player[data-snap-edge=left] .audio-container .left.image-container{margin-left:16px;transform:scale(1);width:112px}.media-player[data-snap-edge=right] .audio-container .right.image-container{margin-right:16px;transform:scale(1);width:112px}@container media-container (orientation: portrait){.audio-container{.left.image-container,.right.image-container{margin:0!important;transform:scale(0)!important;width:0!important}.top.image-container{height:unset!important;transform:scale(1)!important}}}.media-player .audio-container .center-container{margin:0 8px;position:relative;width:280px}.media-player.fullscreen .audio-container .center-container{width:var(--fullscreen-width)}.media-player .audio-container .center-container .text{text-wrap:nowrap;box-sizing:border-box;color:#fff;overflow:hidden;padding:0 8px;text-align:right;text-overflow:ellipsis;transform:scale(0);transform-origin:right;transition:transform var(--edge-transition-time) ease-out;width:100%;&.left{position:absolute;text-align:left;transform-origin:left}}.media-player{&[data-snap-edge=left] .audio-container .left.text,&[data-snap-edge=right] .audio-container .right.text{transform:scale(1)}}.media-player .audio-container .host-name{font-size:14px;opacity:.5}.media-player .audio-container .media-name{font-size:16px;opacity:.75}.media-player.fullscreen[data-snap-edge=right] .audio-container .controls-container{justify-content:right}.media-player{.video-gesture-canvas{cursor:pointer;height:calc(100% - var(--controls-container-height) - var(--controls-height));position:absolute;top:var(--controls-height);width:100%}&.fullscreen .video-gesture-canvas{height:calc(100% - var(--controls-container-height));top:0}&.hide-controls .video-gesture-canvas{cursor:none}&.hide-controls-complete .video-gesture-canvas{height:100%}}.media-player .video-container .controls-container{align-items:center;bottom:0;display:flex;height:var(--controls-height);left:0;padding:0 var(--controls-padding) var(--controls-padding);position:absolute;right:0;transition:var(--show-controls-opacity-transition)}.media-player.hide-controls{.video-container .controls-container,.video-container .gradient,.video-container .logo-container,.video-container .media-handle-container{opacity:0;transition:opacity var(--hide-controls-transition-time) ease-in}}.media-player.hide-controls-complete{.video-container .controls-container,.video-container .gradient,.video-container .logo-container,.video-container .media-handle-container{transform:scale(0)}}.media-player .media-container button{align-items:center;background-color:transparent;border:none;color:#fff;display:flex;height:var(--controls-height);justify-content:center;padding:0;transition:var(--controls-opacity-transition),width var(--hide-button-transition-time) ease-out,transform var(--hide-button-transition-time) ease-out;width:var(--controls-height)}.media-player .media-container{button:focus-visible,input:focus-visible{outline:1px solid var(--primary-color)}}.media-player{.caption-button i{position:absolute}&.captioned .caption-off-icon,&:not(.captioned) .caption-on-icon{opacity:0}}.media-player .menu{--inline-gap:12px;--gradient-size:8px;backdrop-filter:blur(8px);background-color:rgba(0,0,0,.25);border-radius:14px;opacity:0;overflow:hidden;position:absolute;scrollbar-color:var(--scrollbar-color);transform:scale(0);transition:transform .1s ease-out,var(--controls-opacity-transition);.line{height:1px}.line,.separator{background-color:#fff;border-radius:8px;opacity:.5}.separator{height:2px}.list{mask-image:linear-gradient(to bottom,transparent,#000 var(--gradient-size),#000 calc(100% - var(--gradient-size)),transparent);max-height:calc(100cqh - var(--controls-container-height) - var(--controls-height) - var(--controls-height) - 18px);overflow-y:auto;padding-inline:var(--inline-gap)}.list button{align-items:center;display:flex;font-size:16px;justify-content:center;width:100%}.list i{transform:scale(0);transition:transform .1s ease-out,width .1s ease-out,margin .1s ease-out;width:0}.list .name{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list .selected i{margin-right:var(--inline-gap);transform:scale(1);width:unset}.decrease-button i{transform:translateY(4px) rotate(90deg)}.increase-button i{transform:translateY(-5px) rotate(-90deg)}}.media-player{.video-container .menu{box-shadow:0 0 1px hsla(0,0%,100%,.25)}.audio-container .menu{background-color:var(--page-color);border:1px solid hsla(0,0%,100%,.25);box-shadow:0 0 48px rgba(0,0,0,.5)}}.media-player{.button-menu{max-width:calc(100% - 24px);transform-origin:bottom right}.video-container .button-menu{bottom:calc(var(--controls-container-height) + var(--controls-padding));max-height:calc(100% - var(--controls-container-height) - var(--controls-height) - 16px);right:12px}.audio-container .button-menu{bottom:calc(var(--controls-container-height) - 4px);right:4px}}.media-player{.caption-menu{padding-inline:var(--inline-gap)}.caption-duration{align-items:center;color:#fff;display:flex;justify-content:center;min-width:80px;width:100%}&[data-caption-duration="1"] .decrease-button,&[data-caption-duration="10000"] .increase-button{opacity:.25!important}}.media-player{&.showing-caption-menu .caption-menu{opacity:1;transform:scale(1)}&:not(.fullscreen) .audio-container .caption-menu .list{max-height:calc(98px - var(--controls-height))}&.fullscreen:not(.vertical):not(.captioned) .audio-container .caption-menu .list{max-height:calc(50dvh/var(--fullscreen-audio-scale) - var(--controls-height) - 2px)}&.fullscreen:not(.vertical).captioned .audio-container .caption-menu .list{max-height:var(--controls-height)}&.fullscreen.vertical .audio-container .caption-menu .list{max-height:calc(428px - var(--controls-height))}}.media-player .quality-menu{--option-width:100px;--resolution-index:0;--resolution-option-width-transition:width 100ms ease-out;padding-inline:var(--inline-gap);.resolution-container{align-items:center;color:#fff;cursor:pointer;display:flex;mask-image:linear-gradient(to right,transparent,#000 var(--gradient-size),#000 calc(100% - var(--gradient-size)),transparent);opacity:.75;overflow:hidden;transition:var(--controls-opacity-transition),var(--resolution-option-width-transition);width:var(--option-width)}.resolution-container:hover{opacity:1}.slider{align-items:center;display:flex;transform:translate(calc(var(--option-width)*var(--resolution-index)*-1));transition:transform .15s ease-out}.slider div{min-width:var(--option-width);text-align:center;transition:var(--resolution-option-width-transition)}.slider div:first-child{transform:scale(2) translateY(-1px)}.slider div:not(:first-child):after{content:"² px"}}.media-player{&.showing-quality-menu .quality-menu{opacity:1;transform:scale(1)}&[data-resolution="0"] .quality-menu .decrease-button,&[data-resolution="65536"] .quality-menu .increase-button{opacity:.25!important}&[data-preferred-color-depth="10"] .quality-menu .hdr-10 i,&[data-preferred-color-depth="12"] .quality-menu .hdr-12 i{margin-right:var(--inline-gap);transform:scale(1);width:unset}}.media-player{.caption-container{color:#fff;max-width:80%;overflow:hidden}.video-container .caption-container{--target-y:0cqh;--top-gap:44px;--bottom-gap:48px;backdrop-filter:blur(8px);background-color:rgba(0,0,0,.25);border-radius:12px;bottom:0;box-shadow:0 0 1px hsla(0,0%,100%,.25);cursor:grab;font-size:max(16px,2cqmin);max-height:calc(100% - var(--top-gap) - var(--bottom-gap));position:absolute;transform:translateY(calc(0px - max(var(--bottom-gap), min(var(--target-y), calc(100cqh - var(--top-gap) - 100%)))));transform-origin:bottom;transition:opacity var(--timeline-transition-time) ease-out}&.previewing .caption-container{opacity:0}.audio-container .caption-box{align-items:center;display:flex;justify-content:center;overflow:hidden;position:absolute;width:100%}&.captioned .audio-container .caption-box{height:var(--audio-caption-height)}&.captioned.fullscreen:not(.vertical) .audio-container .caption-box{height:calc(100dvh/var(--fullscreen-audio-scale) - 148px)}&.captioned.fullscreen.vertical .audio-container .caption-box{height:calc(100dvh/var(--fullscreen-audio-scale) - 508px)}}.media-player .caption{margin:0;position:absolute;text-align:center;transform:scale(0);&.selected{position:unset;transform:scale(1)}.text{--size-transition-time:200ms;--opacity-transition-time:calc(var(--size-transition-time)/2);--caption-transition:transform var(--size-transition-time) ease-out,margin var(--size-transition-time) ease-out,height var(--size-transition-time) ease-out,opacity var(--opacity-transition-time) ease-out;height:0;margin:0 1em;opacity:0;transform:translateY(-.6em)}.text,.visible.text{transition:var(--caption-transition)}.visible.text{margin:.5em 1em;opacity:1;transform:translateY(0)}}.media-player{.loop-button i{opacity:0;position:absolute}&[data-loop-state="0"] .discover-icon,&[data-loop-state="1"] .loop-queue-icon,&[data-loop-state="2"] .loop-media-icon,&[data-loop-state="3"] .shuffle-icon,&[data-loop-state="4"] .loop-off-icon{opacity:1}}.media-player .speed-button i{transition:transform .1s ease-out}.media-player{.fullscreen-button i{position:absolute}&.fullscreen .fullscreen-icon,&:not(.fullscreen) .normal-screen-icon{opacity:0}}.media-player .media-container .more-button{transform:scale(0);width:0}.media-player.showing-more-button .more-button{transform:scale(1);width:var(--controls-height)}.media-player.showing-more-button{.caption-button,.fullscreen-button,.speed-button{transform:scale(0);width:0}}.media-player.showing-more-button.fullscreen .audio-container{.fullscreen-button,.speed-button{transform:scale(0);width:0}}.media-player .more-controls-menu{display:flex;flex-wrap:wrap;max-height:calc(var(--controls-height)*3);max-width:calc(var(--controls-height)*3);overflow:hidden;padding:4px;button{transform:scale(0);width:0}}@container video-container (height < 240px){.media-player:not(.fullscreen) .more-controls-menu{max-height:calc(var(--controls-height)*2)!important;max-width:calc(var(--controls-height)*5)!important}}@container video-container (height < 200px){.media-player.fullscreen .more-controls-menu{max-height:calc(var(--controls-height)*2)!important;max-width:calc(var(--controls-height)*5)!important}.media-player:not(.fullscreen) .more-controls-menu{max-height:var(--controls-height)!important;max-width:unset!important}}@container video-container (height < 160px){.media-player.fullscreen .more-controls-menu{max-height:var(--controls-height)!important;max-width:unset!important}}.media-player .more-controls-menu{.mute-button,.quality-button{transform:scale(1);width:var(--controls-height)}}.media-player{.play-button i{opacity:0;position:absolute}&[data-play-state=paused] .play-icon,&[data-play-state=playing] .pause-icon,&[data-play-state=replay] .replay-icon{opacity:1}}.media-player{.mute-button i{opacity:0;position:absolute}&[data-volume-level=high] .high-volume-icon,&[data-volume-level=low] .low-volume-icon,&[data-volume-level=mute] .mute-icon{opacity:1}}.media-player .volume-slider-container{--scale:0;--opacity:0.75;--height:4px;--track-width:75%;--active-transition-time:100ms;align-items:center;display:flex;justify-content:center;overflow:hidden;position:relative}.media-player.volume-slider-active .volume-slider-container{--scale:1;--opacity:1;--height:6px}.media-player .volume-slider-track{align-items:center;background-color:hsla(0,0%,100%,.25);border-radius:8px;display:flex;height:var(--height);opacity:var(--opacity);overflow:hidden;position:absolute;transition:height var(--active-transition-time) ease-out,opacity var(--active-transition-time) ease-out;width:var(--track-width);.volume-position{background-color:#fff;border-radius:8px;height:100%;left:-100%;position:absolute;width:100%}}.media-player .volume-thumb{position:absolute;width:var(--track-width);&:before{aspect-ratio:1/1;background-color:#fff;border-radius:50%;content:"";height:12px;left:-6px;position:absolute;top:-6px;transform:scale(var(--scale));transition:transform var(--active-transition-time) ease-out}}.media-player .volume-slider{cursor:pointer;height:100%;margin:0;opacity:0;transition:width var(--hide-button-transition-time) ease-out;width:0}.media-player{&.showing-volume-slider .volume-slider,.more-controls-menu .volume-slider,.volume-slider:focus-visible{width:calc(var(--controls-height)*2)}}.media-player{.current-time,.duration{align-items:center;color:#fff;display:flex;font-size:16px;justify-content:center;margin-inline:8px!important;opacity:.75;width:unset!important}}.media-player .timeline-container{--thumb-scale:0;--preview-time-scale:0;--height:4px;--timeline-position-transition:transform 150ms ease-out;align-items:center;cursor:pointer;display:flex;flex:1;height:100%;margin:0 4px;position:relative;.timeline{align-items:center;background-color:hsla(0,0%,100%,.2);display:flex;height:var(--height);overflow:hidden;position:relative;transition:height var(--timeline-transition-time) ease-out}.position,.timeline{border-radius:8px;width:100%}.position{height:100%;left:-100%;position:absolute;transition:var(--timeline-position-transition)}.cached-position{background-color:hsla(0,0%,100%,.3)}.progress-position{background-color:var(--primary-color)}.timeline-thumb{position:absolute;transition:var(--timeline-position-transition);width:100%}.timeline-thumb:before{aspect-ratio:1/1;background-color:var(--primary-color);border-radius:50%;content:"";height:12px;left:-6px;position:absolute;top:-6px;transform:scale(var(--thumb-scale));transition:transform var(--timeline-transition-time) ease-out}.preview-position{position:absolute;width:100%}.preview-time{background-color:rgba(0,0,0,.1);border-radius:4px 4px 0 0;color:#fff;font-size:16px;padding:3px 4px 4px;position:absolute;top:-29px;transform:scale(var(--preview-time-scale)) translate(-50%);transform-origin:bottom left;transition:transform var(--timeline-transition-time) ease-out}}.media-player{.audio-container .duration-container>*{box-sizing:border-box;height:var(--controls-height)!important;padding-top:4px!important}&.scrubbing .timeline-container{--thumb-scale:1;--height:6px}&.previewing .timeline-container{--preview-time-scale:1;--height:6px}}.media-player:not([data-play-state=playing]) .timeline-container{.progress-position,.timeline-thumb{transition:none}}.media-player .console{background-color:rgba(0,0,0,.5);border-radius:0 0 8px 0;color:#fff;left:0;max-height:calc(100% - 76px);max-width:50%;overflow:scroll;padding:10px 20px;position:absolute;top:0}@container video-container (width < 680px){.controls-container{.mute-button,.quality-button{transform:scale(0)!important;width:0!important}}.more-button,.showing-volume-slider .controls-container .mute-button{transform:scale(1)!important;width:var(--controls-height)!important}.showing-more-controls .more-controls-menu{opacity:1!important;transform:scale(1)!important}}@container video-container (width < 640px){.controls-container .fullscreen-button{transform:scale(0)!important;width:0!important}.more-controls-menu .fullscreen-button{transform:scale(1)!important;width:var(--controls-height)!important}}@container video-container (width < 600px){.controls-container .speed-button{transform:scale(0)!important;width:0!important}.more-controls-menu .speed-button,.showing-speed-button .controls-container .speed-button{transform:scale(1)!important;width:var(--controls-height)!important}}@container video-container (width < 560px){.controls-container .caption-button{transform:scale(0)!important;width:0!important}.more-controls-menu .caption-button{transform:scale(1)!important;width:var(--controls-height)!important}}@container video-container (width < 520px){.controls-container .audio-only-button{transform:scale(0)!important;width:0!important}.more-controls-menu .audio-only-button{transform:scale(1)!important;width:var(--controls-height)!important}}@container video-container (width < 480px){.controls-container .loop-button{transform:scale(0)!important;width:0!important}.more-controls-menu .loop-button{transform:scale(1)!important;width:var(--controls-height)!important}}