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:round(down,calc(var(--media-player-width)*var(--video-height-ratio)),1px);--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)}.media-player button{align-items:center;background-color:transparent;border:none;color:#fff;cursor:pointer;display:flex;height:var(--controls-height);justify-content:center;opacity:.75;padding:0;transition:var(--controls-opacity-transition);width:var(--controls-height)}.media-player .video-container{.controls-container .left-controls button,.controls-container>button{transition:var(--controls-opacity-transition),width var(--hide-button-transition-time) ease-out,transform var(--hide-button-transition-time) ease-out}}.media-player .media-container{button:focus-visible,input:focus-visible{outline:1px solid var(--primary-color)}}.media-player{--video-player-header-bar-height:12.5dvh;--audio-player-header-bar-height:12.5dvh;--border-radius:24px;--caption-toggle-transition-time:250ms;--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),round(down,max(var(--edge-gap),min(var(--target-y),calc(var(--adjusted-dvh) - var(--edge-gap) - 100%))),1px));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.caption-toggle-transition{transition:transform var(--caption-toggle-transition-time) ease-out}.media-player.resizing{&:not(.showing-queue) .queue,.audio-container,.media-container img,.menu{display:none!important}}.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;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}i{position:absolute}.queue-button .queue-visible-icon{opacity:0}}.media-player.audio-only .drop-down-button-container{justify-content:center;.left,.right{position:absolute}}.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{--hide-controls-transition-time:500ms;--timeline-transition-time:100ms;--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;position:relative;width:100%}.media-container:not(:fullscreen){height:var(--media-container-height)}&.caption-toggle-transition .media-container{transition:height var(--caption-toggle-transition-time) ease-out}}.media-player .background-image{filter:blur(80px);height:100%;object-fit:cover;position:absolute;transform:scale(0);width:100%}.media-player.audio-only .media-container:fullscreen .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 .media-container:fullscreen .video-container{border-radius:0}.media-player{video{height:100%;max-width:100%}&:not(.docked) .media-container: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-gesture-canvas{cursor:pointer;flex:1;width:100%}&.hide-controls .video-gesture-canvas{cursor:none}}.media-player{.video-container .overlay{--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));display:flex;flex-direction:column;height:100%;position:absolute;transition:opacity 50ms ease-out;width:100%}.media-container:fullscreen .video-container .overlay{background:linear-gradient(to bottom,var(--edge-color),var(--midpoint-color) calc(var(--video-player-header-bar-height) / 2),transparent calc(var(--video-player-header-bar-height) + 7.5dvh),transparent calc(100% - 56px),var(--midpoint-color) calc(100% - 28px),var(--edge-color))}&.hide-controls .video-container .overlay{opacity:0;transition:opacity var(--hide-controls-transition-time) ease-in}&.hide-controls-complete .video-container .overlay{transform:scale(10)}}.media-player{.logo-container{display:flex;justify-content:center;opacity:.85;position:absolute;transform:scale(0);width:100%}.video-container .logo-container{height:var(--video-player-header-bar-height);margin-top:1dvh;top:0}.video-container .logo-container svg{width:var(--video-player-header-bar-height)}.media-container:fullscreen .video-container .logo-container{transform:scale(1)}.audio-container .logo-container{margin-bottom:2.5dvh}.audio-container .logo-container,.audio-container .logo-container svg{height:var(--audio-player-header-bar-height)}.media-container:fullscreen .audio-container .logo-container{position:unset;transform:scale(1)}}.media-player .media-handle-container{display:flex;height:var(--controls-height);overflow:hidden;.corner{aspect-ratio:1/1;position:relative}}.media-player{.media-container:fullscreen .media-handle-container{height:0}.audio-container .media-handle-container{margin:0 8px 4px}.media-container:fullscreen .audio-container .media-handle-container{margin:0}}.media-player .move-handle{align-items:center;cursor:grab;display:flex;justify-content:center;opacity:.75;transition:var(--controls-opacity-transition);width:100%;&: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);transition:transform var(--hide-button-transition-time) ease-out,var(--controls-opacity-transition);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);transition:transform var(--hide-button-transition-time) ease-out,var(--controls-opacity-transition);&.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;position:absolute;transform:scale(0);transform-origin:top}&.audio-only .audio-container{transform:scale(1)}.media-container:fullscreen .audio-container{padding-block:16px}}.media-player .audio-container .image{aspect-ratio:1/1;cursor:pointer;object-fit:cover;width:0}.media-player .audio-container .image-container{overflow:hidden;transform:scale(0);.left.image,.right.image{border-radius:8px;height:112px}.top.image{height:0}&.top{display:flex;justify-content:center;width:100%}}.media-player.moving .audio-container .image-container{transition:transform var(--edge-transition-time) ease-out,margin var(--edge-transition-time) ease-out;.image{transition:width var(--edge-transition-time) ease-out}}.media-player[data-snap-edge=left] .audio-container .left.image,.media-player[data-snap-edge=right] .audio-container .right.image{width:112px}.media-player[data-snap-edge=left] .audio-container .left.image-container{margin-left:16px;transform:scale(1)}.media-player[data-snap-edge=right] .audio-container .right.image-container{margin-right:16px;transform:scale(1)}.media-player .audio-container .center-container{margin-inline:8px;position:relative}.media-player .audio-container .center-container .text{text-wrap:nowrap;box-sizing:border-box;color:#fff;overflow:hidden;padding-inline:8px;text-align:right;text-overflow:ellipsis;transform:scale(0);transform-origin:right;width:100%;&.left{position:absolute;text-align:left;transform-origin:left}}.media-plater.moving .audio-container .center-container .text{transition:transform var(--edge-transition-time) ease-out}.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 .controls-container{display:flex;position:relative}.media-player .video-container .controls-container{padding:0 var(--controls-padding) var(--controls-padding)}.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;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{border:1px solid hsla(0,0%,100%,.1)}.audio-container .menu{border:1px solid hsla(0,0%,100%,.25);box-shadow:0 0 48px rgba(0,0,0,.5)}.media-container:not(:fullscreen) .audio-container .menu{backdrop-filter:none;background-color:rgba(31,31,31,.9)}}.media-player{.button-menu{transform-origin:bottom right}.video-container .button-menu{bottom:calc(100% + 8px);max-width:calc(100% - 32px);right:12px}.audio-container .button-menu{bottom:100%;max-width:calc(100% - 12px);right:4px}}.media-player{.caption-menu{padding-inline:var(--inline-gap)}.caption-menu .caption-duration{font-size:16px;min-width:80px}&[data-caption-duration="1"] .decrease-button,&[data-caption-duration="10000"] .increase-button{opacity:.25!important}&.showing-caption-menu .caption-menu{opacity:1;transform:scale(1)}.media-container:not(:fullscreen) .audio-container .caption-menu .list{max-height:calc(106px - 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;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"}i{transform:scale(0)}}.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)}}.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}.media-container:fullscreen .fullscreen-icon,.media-container:not(:fullscreen) .normal-screen-icon{opacity:0}}.media-player .media-container .more-button{transform:scale(0);width:0}.media-player.showing-more-button .audio-container .more-button{transform:scale(1);width:var(--controls-height)}.media-player.showing-more-button .media-container:not(:fullscreen) .audio-container{.caption-button,.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);padding:4px;button{transform:scale(0);width:0}}@container video-container (height < 240px){.media-player .media-container: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 .media-container:fullscreen .more-controls-menu{max-height:calc(var(--controls-height)*2)!important;max-width:calc(var(--controls-height)*5)!important}.media-player .media-container:not(:fullscreen) .more-controls-menu{max-height:var(--controls-height)!important;max-width:unset!important}}@container video-container (height < 160px){.media-player .media-container:fullscreen .more-controls-menu{max-height:var(--controls-height)!important;max-width:unset!important}}.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:100px;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:100px;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;opacity:.75;width:unset}}.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-inline: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:100px;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{height:var(--controls-height);margin-top:4px}&.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 .media-container:fullscreen .audio-container{--scaling-factor:min(1dvw,3dvh);padding-block:calc(var(--scaling-factor)*3);.center-container{margin-inline:calc(var(--scaling-factor)*1.5)}.top.image{border-radius:calc(var(--scaling-factor)*3)}.left.image,.right.image{border-radius:calc(var(--scaling-factor)*1.5);height:calc(var(--scaling-factor)*22.5)}.text{padding-inline:calc(var(--scaling-factor)*1.5)}.controls-container .left-controls button,.controls-container>button{height:calc(var(--scaling-factor)*7.5);width:calc(var(--scaling-factor)*7.5)}.controls-container .more-button{width:0}[class*=-icon]{font-size:calc(var(--scaling-factor)*4.5)}.media-name{font-size:calc(var(--scaling-factor)*3)}.host-name{font-size:calc(var(--scaling-factor)*2.625)}.duration-container{height:calc(var(--scaling-factor)*7.5);margin-top:calc(var(--scaling-factor)*.75)}.timeline-container{height:calc(var(--scaling-factor)*7.5);margin-inline:calc(var(--scaling-factor)*.75)}.timeline-container,.volume-slider-container{--height:calc(var(--scaling-factor)*0.75)}.duration-container .current-time,.duration-container .duration{font-size:calc(var(--scaling-factor)*3);height:calc(var(--scaling-factor)*7.5);margin-inline:calc(var(--scaling-factor)*1.5)}.timeline-thumb:before,.volume-thumb:before{height:calc(var(--scaling-factor)*2.25);left:calc(var(--scaling-factor)*-1.125);top:calc(var(--scaling-factor)*-1.125)}}.media-player .media-container:fullscreen .audio-container .menu{--inline-gap:calc(var(--scaling-factor)*2.25);--gradient-size:calc(var(--scaling-factor)*1.5);backdrop-filter:blur(calc(var(--scaling-factor)*1.5));border:calc(var(--scaling-factor)*.1875) solid hsla(0,0%,100%,.25);border-radius:calc(var(--scaling-factor)*2.625);box-shadow:0 0 calc(var(--scaling-factor)*9) rgba(0,0,0,.5);.line{height:calc(var(--scaling-factor)*.1875)}.line,.separator{border-radius:calc(var(--scaling-factor)*1.5)}.separator{height:calc(var(--scaling-factor)*.375)}.list button{font-size:calc(var(--scaling-factor)*3);height:calc(var(--scaling-factor)*7.5)}.list .name{max-width:calc(var(--scaling-factor)*37.5)}.decrease-button,.increase-button{height:calc(var(--scaling-factor)*7.5);width:calc(var(--scaling-factor)*7.5)}.decrease-button i{transform:translateY(calc(var(--scaling-factor)*.75)) rotate(90deg)}.increase-button i{transform:translateY(calc(var(--scaling-factor)*-.9375)) rotate(-90deg)}.caption-duration{font-size:calc(var(--scaling-factor)*3);height:calc(var(--scaling-factor)*7.5);min-width:calc(var(--scaling-factor)*15)}&.button-menu{right:calc(var(--scaling-factor)*.75)}&.caption-menu .list{max-height:calc(var(--scaling-factor)*12.375)}}.media-player{&[data-snap-edge=left] .media-container:fullscreen .audio-container .left.image,&[data-snap-edge=right] .media-container:fullscreen .audio-container .right.image{width:calc(var(--scaling-factor)*22.5)}&[data-snap-edge=right] .media-container:fullscreen .audio-container .right.image-container{margin-right:calc(var(--scaling-factor)*3)}&[data-snap-edge=left] .media-container:fullscreen .audio-container .left.image-container{margin-left:calc(var(--scaling-factor)*3)}&.previewing .media-container:fullscreen .audio-container .timeline-container,&.scrubbing .media-container:fullscreen .audio-container .timeline-container{--height:calc(var(--scaling-factor)*1.125)}&.showing-volume-slider .media-container:fullscreen .audio-container .volume-slider,.media-container:fullscreen .audio-container .more-controls-menu .volume-slider,.media-container:fullscreen .audio-container .volume-slider:focus-visible{width:calc(var(--scaling-factor)*15)}&.volume-slider-active .media-container:fullscreen .audio-container .volume-slider-container{--height:calc(var(--scaling-factor)*1.125)}}.media-player.audio-button-transition .audio-container .controls-container button{transition:var(--controls-opacity-transition),width var(--hide-button-transition-time) ease-out,transform var(--hide-button-transition-time) ease-out}.media-player.showing-more-button .media-container:fullscreen .audio-container{.more-button{width:calc(var(--scaling-factor)*7.5)}.caption-button,.fullscreen-button,.speed-button{transform:scale(0);width:0}}@media (orientation:portrait){.media-container:fullscreen .audio-container{--scaling-factor:min(1.5dvw,1dvh)!important;.left.image-container,.right.image-container{margin:0!important;transform:scale(0)!important}.left.image,.right.image{width:0!important}.top.image-container{margin-bottom:calc(var(--scaling-factor)*3);transform:scale(1)!important}.top.image{height:unset;width:calc(var(--scaling-factor)*50)}.caption-menu .list{max-height:calc(var(--scaling-factor)*62.375)!important}}}.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}@media (any-hover:hover){.media-player button:hover{opacity:1}}@container video-container (width < 680px){.controls-container{.mute-button,.quality-button{transform:scale(0)!important;width:0!important}}.more-controls-menu{.mute-button,.quality-button{transform:scale(1)!important;width:var(--controls-height)!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}}