:root{--player-bg:#000;--player-fg:#fff;--player-fg-dim:#ffffff80;--player-fg-strong:#ffffffe6;--player-control-bg:#0009;--player-menu-bg:#1c1c1c99;--player-beacon:#ffffffb3;--player-beacon-ping:#fff6;--player-radius:0px}html.theme-light{--player-bg:#fafafa;--player-fg-dim:#00000080;--player-fg-strong:#000000e6;--player-control-bg:#ffffffd9;--player-beacon:#0009;--player-beacon-ping:#0000004d}html,body{background:var(--player-bg);height:100%;margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow:hidden}#app{background:var(--player-bg);justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.stage{width:100%;max-width:100%;max-height:100%}media-controller{--base:18px;width:100%;height:100%;aspect-ratio:inherit;border-radius:var(--player-radius);font-size:calc(.75 * var(--base));-webkit-font-smoothing:antialiased;--media-primary-color:#fff;--media-secondary-color:transparent;--media-accent-color:var(--player-accent,#fff);--media-menu-background:var(--player-menu-bg);--media-text-color:#fff;--media-control-hover-background:var(--media-secondary-color);--media-range-track-height:calc(.125 * var(--base));--media-range-thumb-height:var(--base);--media-range-thumb-width:var(--base);--media-range-thumb-border-radius:var(--base);--media-control-height:calc(2 * var(--base));overflow:hidden}media-controller[breakpointmd]{--base:20px}media-controller[mediaisfullscreen]{--base:24px}media-controller video{width:100%;height:100%}.media-gradient-bottom{width:100%;height:calc(8 * var(--base));pointer-events:none;z-index:1;opacity:.7;--gradient-steps:#0000 0%, #00000003 8.1%, #0000000c 15.5%, #0000001b 22.5%, #0000002d 29%, #00000042 35.3%, #0000005a 41.2%, #00000073 47.1%, #0000008c 52.9%, #000000a5 58.8%, #000000bd 64.7%, #000000d2 71%, #000000e4 77.5%, #000000f3 84.5%, #000000fc 91.9%, #000 100%;background:linear-gradient(to bottom, var(--gradient-steps));position:absolute;bottom:0;left:0}media-control-bar{height:calc(2 * var(--base));line-height:calc(2 * var(--base));bottom:var(--base);left:var(--base);right:var(--base);z-index:2;--media-text-color:var(--player-bar-fg,#fff);background:var(--player-bar-bg,transparent);border-radius:calc(.4 * var(--base));position:absolute}.control-spacer{flex:1}.media-button{--media-control-hover-background:transparent;--media-tooltip-background:#1c1c1c3d;--media-text-content-height:1.2;--media-tooltip-padding:.7em 1em;--media-tooltip-distance:8px;--media-tooltip-container-margin:18px;opacity:.9;-webkit-backdrop-filter:blur(10px)invert(15%)brightness(80%)opacity(0);border-radius:25%;padding:0;transition:-webkit-backdrop-filter .3s,backdrop-filter .3s,box-shadow .3s,opacity .3s;position:relative}.media-button:hover{-webkit-backdrop-filter:blur(10px)invert(15%)brightness(80%)opacity();box-shadow:0 0 5px #0000004d}.media-button svg{fill:none;stroke:var(--player-bar-fg,#fff);stroke-width:1px;stroke-linecap:round;stroke-linejoin:round}@keyframes bounce-scale-play{0%{transform:scale(.75)}50%{transform:scale(1.15)}to{transform:scale(1)}}media-play-button svg :is(#icon-play,#icon-pause rect){fill:var(--player-bar-fg,#fff);stroke:none}media-play-button #icon-play{opacity:0;transform-box:view-box;transform-origin:50%;transition:all .5s;transform:scale(.5)}media-play-button[mediapaused] #icon-play{opacity:1;animation:.35s ease-in-out bounce-scale-play;transform:scale(1)}@keyframes bounce-pause-left{0%{font-size:10px}50%{font-size:3px}to{font-size:4px}}@keyframes bounce-pause-right{0%{font-size:10px;transform:translate(-8px)}50%{font-size:3px;transform:translate(1px)}to{font-size:4px;transform:translate(0)}}media-play-button #pause-left,media-play-button #pause-right{opacity:1;transform-box:view-box;font-size:4px;transform:translate(0)}media-play-button:not([mediapaused]) #pause-left{animation:.3s ease-out bounce-pause-left}media-play-button:not([mediapaused]) #pause-right{animation:.3s ease-out bounce-pause-right}media-play-button[mediapaused] #pause-left,media-play-button[mediapaused] #pause-right{opacity:0;font-size:10px}media-play-button[mediapaused] #pause-right{transform-origin:100%;transform:translate(-8px)}media-mute-button{position:relative}media-mute-button .muted-path{clip-path:inset(0);opacity:0;transition:clip-path .2s ease-out}media-mute-button #muted-path-2{transition-delay:.2s}media-mute-button:not([mediavolumelevel=off]) #muted-path-1,media-mute-button:not([mediavolumelevel=off]) #muted-path-2{clip-path:inset(0 0 100%)}media-mute-button[mediavolumelevel=off] .muted-path{opacity:1}media-mute-button .vol-path{opacity:1;transition:opacity .4s}media-mute-button[mediavolumelevel=off] .vol-path,media-mute-button[mediavolumelevel=low] #vol-high-path,media-mute-button[mediavolumelevel=medium] #vol-high-path{opacity:0}@keyframes volume-in{0%{visibility:hidden;opacity:0;transform:translateY(50%)rotate(1deg)}50%{visibility:visible;opacity:1;transform:rotate(-2deg)}to{visibility:visible;opacity:1;transform:translateY(0)rotate(0)}}@keyframes volume-out{0%{visibility:visible;opacity:1;transform:translateY(0)rotate(0)}50%{opacity:1;transform:rotate(0)}to{visibility:hidden;opacity:0;transform:translateY(50%)rotate(1deg)}}.media-volume-range-wrapper{opacity:0;visibility:hidden;top:-100%;left:calc(2 * var(--base));width:calc(10 * var(--base));height:calc(2.5 * var(--base));transform-origin:0;position:absolute}media-volume-range{opacity:0;width:calc(10 * var(--base));height:var(--base);border-radius:calc(.25 * var(--base));--media-range-bar-color:var(--media-accent-color);--media-range-padding-left:0;--media-range-padding-right:0;--media-range-track-width:calc(10 * var(--base));--media-range-track-height:var(--base);--media-range-track-border-radius:calc(.25 * var(--base));--media-range-track-backdrop-filter:blur(10px) brightness(80%);--media-range-track-background:#fff3;--media-range-thumb-width:var(--base);--media-range-thumb-border-radius:calc(.25 * var(--base));--media-range-thumb-opacity:0;background:#0003;padding:0;transition:opacity 0s 1s;overflow:hidden}media-volume-range[mediavolume]{opacity:1}media-mute-button:hover+.media-volume-range-wrapper,media-mute-button:focus+.media-volume-range-wrapper,media-mute-button:focus-within+.media-volume-range-wrapper,.media-volume-range-wrapper:hover,.media-volume-range-wrapper:focus,.media-volume-range-wrapper:focus-within{animation:.3s ease-out forwards volume-in}.media-volume-range-wrapper:not(:-webkit-any(:hover,:focus-within)){animation:.3s ease-out volume-out}.media-volume-range-wrapper:not(:is(:hover,:focus-within)){animation:.3s ease-out volume-out}[keyboardcontrol] .media-volume-range-wrapper,[keyboardcontrol] .media-volume-range-wrapper:focus-within,[keyboardcontrol] .media-volume-range-wrapper:focus-within media-volume-range{visibility:visible}.seek-text{stroke:none;fill:var(--player-bar-fg,#fff);font-size:8px;font-weight:600}media-time-range{height:calc(2 * var(--base));border-radius:calc(.25 * var(--base));--media-range-track-backdrop-filter:invert(10%) blur(5px) brightness(110%);--media-range-track-background:#fff3;--media-range-track-pointer-background:#ffffff80;--media-range-track-border-radius:calc(.25 * var(--base));--media-time-range-buffered-color:#fff6;--media-range-bar-color:var(--media-accent-color);--media-range-thumb-background:var(--media-accent-color);--media-range-thumb-transition:opacity .1s linear;--media-range-thumb-opacity:0;--media-preview-box-margin:0 0 -10px}media-time-range:hover{--media-range-thumb-opacity:1;--media-range-track-height:calc(.25 * var(--base))}media-preview-time-display{font-size:calc(.65 * var(--base));padding-top:0}media-live-button{--media-live-button-indicator-color:var(--player-accent,#ff2d55);font-size:calc(.65 * var(--base));letter-spacing:.06em;font-weight:600}media-live-button:not([mediatimeislive]){--media-live-button-indicator-color:#fff6}media-settings-menu{--media-menu-icon-height:20px;--media-menu-item-icon-height:20px;--media-settings-menu-min-width:calc(10 * var(--base));--media-menu-transform-in:translateY(0) scale(1);--media-menu-transform-out:translateY(20px) rotate(3deg) scale(1);padding-block:calc(.15 * var(--base));z-index:3;-webkit-user-select:none;user-select:none;border-radius:8px;margin-bottom:17px;margin-right:10px}media-settings-menu-item,[role=menu]::part(menu-item){--media-icon-color:#fff;margin-inline:calc(.45 * var(--base));height:calc(1.6 * var(--base));font-size:calc(.7 * var(--base));padding:0;padding-left:calc(.4 * var(--base));padding-right:calc(.1 * var(--base));text-shadow:none;border-radius:6px;font-weight:400}[slot=submenu]::part(back button){font-size:calc(.7 * var(--base))}media-settings-menu-item:hover{--media-icon-color:#000;color:#000;background-color:#fff}media-settings-menu-item:hover [slot=submenu]::part(menu-item),[slot=submenu]::part(back indicator){--media-icon-color:#fff}media-settings-menu-item:hover [slot=submenu]::part(menu-item):hover{--media-icon-color:#000;color:#000;background-color:#fff}media-settings-menu-item[submenusize="0"]{display:none}media-settings-menu-button[aria-expanded=true] svg{transform:rotate(30deg)}media-settings-menu-button svg{transition:transform .1s cubic-bezier(.4,0,1,1);transform:rotate(0)}media-controller:not([breakpointmd]) media-pip-button,media-controller:not([breakpointmd]) media-airplay-button,media-controller:not([breakpointmd]) media-seek-backward-button,media-controller:not([breakpointmd]) media-seek-forward-button,media-pip-button[mediapipunavailable],media-airplay-button[mediaairplayunavailable]{display:none}media-fullscreen-button .fs-arrow{translate:0%}media-fullscreen-button:hover .fs-arrow{animation:.35s cubic-bezier(.34,1.56,.64,1) up-left-bounce}media-fullscreen-button:hover #fs-enter-top,media-fullscreen-button:hover #fs-exit-bottom{animation-name:up-right-bounce}media-fullscreen-button:hover #fs-enter-bottom,media-fullscreen-button:hover #fs-exit-top{animation-name:down-left-bounce}@keyframes up-left-bounce{0%{translate:0}50%{translate:-4% -4%}}@keyframes up-right-bounce{0%{translate:0}50%{translate:4% -4%}}@keyframes down-left-bounce{0%{translate:0}50%{translate:-4% 4%}}@keyframes down-right-bounce{0%{translate:0}50%{translate:4% 4%}}.viewers-badge{pointer-events:none;padding-inline:calc(.5 * var(--base));font-size:calc(.65 * var(--base));color:var(--player-bar-fg,#ffffffd9);white-space:nowrap;align-items:center;gap:.375rem;font-weight:500;display:flex}.viewers-badge[hidden]{display:none}.viewers-badge .dot{background:var(--player-accent,#ef4444);border-radius:9999px;width:.375rem;height:.375rem}.logo-overlay{z-index:1;pointer-events:none;line-height:0;display:block;position:absolute;top:.75rem;left:.75rem}a.logo-overlay[href]{pointer-events:auto}.logo-overlay img{opacity:.9;max-width:min(10rem,40vw);max-height:2.5rem}.branding{right:.75rem;bottom:calc(3.5 * var(--base,18px) + .5rem);z-index:1;color:#ffffff80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;border-radius:9999px;padding:.2rem .55rem;font-size:.6875rem;font-weight:500;text-decoration:none;position:absolute}.branding strong{color:#ffffffe6;font-weight:600}.branding:hover{color:#ffffffe6}.state~.branding{bottom:.75rem}.state{background:var(--player-bg);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.state .title{max-width:28rem;color:var(--player-fg-strong);padding:0 1.5rem;font-size:.875rem;font-weight:500}.state .hint{max-width:28rem;color:var(--player-fg-dim);padding:0 1.5rem;font-size:.75rem}.state .offline-poster{object-fit:cover;filter:brightness(.35);width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.state .offline-poster~*{position:relative}.beacon{width:.75rem;height:.75rem;display:flex;position:relative}.beacon .ping{background:var(--player-accent,var(--player-beacon-ping));border-radius:9999px;animation:1.2s cubic-bezier(0,0,.2,1) infinite ping;position:absolute;top:0;bottom:0;left:0;right:0}.beacon .core{background:var(--player-accent,var(--player-beacon));border-radius:9999px;width:.75rem;height:.75rem;position:relative}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}html.theme-minimal .media-gradient-bottom,html.theme-minimal media-settings-menu-button,html.theme-minimal media-pip-button,html.theme-minimal media-airplay-button,html.theme-minimal media-seek-backward-button,html.theme-minimal media-seek-forward-button{display:none}html.theme-light{--player-bar-bg:#ffffffd9;--player-bar-fg:#18181b}html.theme-brand{--player-bar-bg:color-mix(in srgb, var(--player-accent,#fff) 85%, transparent)}html.theme-light .media-gradient-bottom,html.theme-brand .media-gradient-bottom{display:none}html.theme-light media-control-bar,html.theme-brand media-control-bar{padding-inline:calc(.4 * var(--base));-webkit-backdrop-filter:blur(10px)}html.theme-light media-time-range,html.theme-brand media-time-range,html.theme-light media-volume-range,html.theme-brand media-volume-range{--media-range-track-background:color-mix(in srgb, var(--player-bar-fg,#000) 15%, transparent);--media-range-track-pointer-background:color-mix(in srgb, var(--player-bar-fg,#000) 30%, transparent);--media-time-range-buffered-color:color-mix(in srgb, var(--player-bar-fg,#000) 35%, transparent);--media-range-track-backdrop-filter:none}html.theme-light media-live-button:not([mediatimeislive]),html.theme-brand media-live-button:not([mediatimeislive]){--media-live-button-indicator-color:color-mix(in srgb, var(--player-bar-fg,#000) 40%, transparent)}html.theme-brand media-control-bar{--media-accent-color:var(--player-bar-fg,#000)}html.theme-brand media-live-button{--media-live-button-indicator-color:var(--player-bar-fg,#000)}html.theme-brand .viewers-badge .dot{background:var(--player-bar-fg,#000)}html.theme-light{--player-menu-bg:#fafafae6}html.theme-light media-controller{--media-text-color:#18181b;--media-accent-color:var(--player-accent,#18181b)}html.theme-light media-settings-menu-item,html.theme-light [role=menu]::part(menu-item){--media-icon-color:#18181b;color:#18181b}html.theme-light media-settings-menu-item:hover,html.theme-light media-settings-menu-item:hover [slot=submenu]::part(menu-item):hover{--media-icon-color:#fff;color:#fff;background-color:#18181b}
