.header-player{position:absolute;top:50%;left:clamp(455px,36vw,470px);width:clamp(330px,25vw,360px);display:grid;grid-template-columns:40px 30px minmax(90px,1fr) 36px 28px;align-items:center;gap:10px;box-sizing:border-box;padding:8px 10px;border:1px solid rgba(255,255,255,0);border-radius:var(--radius);background-color:#0000003d;opacity:0;visibility:hidden;pointer-events:none;filter:blur(2px);transform:translate(-50%,calc(-50% - 8px));overflow:hidden;z-index:1;transition:opacity .72s ease,filter .72s ease,transform .72s ease,border-color .72s ease,visibility 0s linear .72s}.header-player.is-blinking,.floating-player.is-blinking{animation:miniPlayerBlink .72s ease-out forwards}.header-player.is-available{border-color:#ffffff0f;opacity:.9;visibility:visible;pointer-events:auto;filter:blur(0);transform:translate(-50%,-50%);overflow:visible;transition:opacity .72s ease,filter .72s ease,transform .72s ease,border-color .72s ease,visibility 0s}body.demo-visible .header-player.is-available{border-color:#fff0;opacity:0;visibility:hidden;pointer-events:none;filter:blur(2px);transform:translate(-50%,calc(-50% - 8px));overflow:hidden;transition:opacity .52s ease,filter .52s ease,transform .52s ease,border-color .52s ease,visibility 0s linear .52s}.header-player-mode{height:30px;border:0;background-color:transparent;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .42s ease-in-out,filter .42s ease-in-out,transform .1s ease}.header-player-mode:active{transform:scale(.94)}.header-player button:focus,.floating-player button:focus,.demo-player button:focus,.header-player input:focus,.floating-player input:focus,.demo-player input:focus{outline:none}.header-player button:focus-visible,.floating-player button:focus-visible,.demo-player button:focus-visible,.header-player input:focus-visible,.floating-player input:focus-visible,.demo-player input:focus-visible{outline:1px solid rgba(0,151,167,.45);outline-offset:2px}.header-player-play-icon{width:40px;height:30px;border:2px solid var(--mix-color);background:transparent;color:var(--mix-color);opacity:.96;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;border-radius:999px;transition:color .42s ease-in-out,opacity .32s ease-in-out,filter .42s ease-in-out,transform .1s ease,background-color .18s ease,border-color .42s ease-in-out,box-shadow .18s ease}body.mini-player-suppressed .header-player.is-available{border-color:#fff0;opacity:0;visibility:hidden;pointer-events:none;filter:blur(2px);transform:translate(-50%,calc(-50% - 8px));overflow:hidden;transition:opacity .52s ease,filter .52s ease,transform .52s ease,border-color .52s ease,visibility 0s linear .52s}.header-player-play-icon i,.floating-player-play-icon i{color:currentColor}.header-player-play-icon:hover i,.header-player-play-icon.is-playing:hover i,.floating-player-play-icon:hover i,.floating-player-play-icon.is-playing:hover i{color:var(--text-white)}.header-player-play-icon:hover{color:var(--text-white);border-color:#10663dc2;background-color:#10663d33;filter:drop-shadow(0 0 8px rgba(16,102,61,.34))}.header-player-play-icon.is-playing{color:var(--mix-color);opacity:.92;filter:none}.header-player.is-raw .header-player-play-icon{color:var(--raw-color);border-color:var(--raw-color)}.header-player-play-icon.is-playing:hover{color:var(--text-white);border-color:#c9472de0;background-color:#c9472d3d;filter:drop-shadow(0 0 8px rgba(201,71,45,.34))}.header-player-play-icon:active{transform:scale(.92);color:var(--text-white);border-color:#10663de0;background-color:#10663d94;filter:drop-shadow(0 0 8px rgba(16,102,61,.42));box-shadow:inset 0 0 10px #0000005c}.header-player-play-icon.is-playing:active{border-color:#c9472de0;background-color:#c9472d94;filter:drop-shadow(0 0 8px rgba(201,71,45,.38))}.header-player-mode{width:30px;min-width:30px;padding:0;color:var(--mix-color);font-size:1.72rem}.header-player-mode i{transform:rotate(-90deg)}.header-player-mode:hover{color:var(--text-white);filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.header-player-mode.is-raw{color:var(--raw-color)}.header-player-mode.is-raw:hover{color:var(--text-white);filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.header-player-mode.is-switching:hover{color:var(--mix-color);filter:none}.header-player-mode.is-raw.is-switching:hover{color:var(--raw-color);filter:none}.header-player-seek{position:relative;z-index:1;width:100%;height:12px;margin:0;appearance:none;-webkit-appearance:none;--seek-progress: 0%;--seek-active: var(--accent);--seek-thumb: var(--accent);background:transparent;accent-color:var(--seek-active);cursor:pointer}.header-player-seek-shell,.floating-player-seek-shell{position:relative;min-width:0;display:flex;align-items:center;--mini-wave-live: .18}.header-player-seek-shell:before,.floating-player-seek-shell:before{content:"";position:absolute;left:0;right:0;top:50%;height:18px;transform:translateY(-50%);opacity:calc(.14 + (var(--mini-wave-live) * .18));background:linear-gradient(180deg,transparent 47%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.16) 52%,transparent 53%),repeating-linear-gradient(90deg,rgba(153,153,153,.22) 0 2px,transparent 2px 5px);clip-path:polygon(0 44%,8% 34%,16% 42%,24% 24%,32% 38%,40% 18%,48% 30%,56% 22%,64% 36%,72% 20%,80% 44%,88% 34%,100% 46%,100% 54%,88% 66%,80% 56%,72% 80%,64% 64%,56% 78%,48% 70%,40% 82%,32% 62%,24% 76%,16% 58%,8% 66%,0 56%);pointer-events:none}.header-player-time,.floating-player-time{min-width:34px;color:var(--mix-color);font-size:.68rem;line-height:1;text-align:center;font-variant-numeric:tabular-nums;border:0;background:transparent;cursor:pointer;transition:color .32s ease-in-out,filter .32s ease-in-out}.header-player-time{transform:translateY(1px)}.header-player-time.is-remaining,.floating-player-time.is-remaining{color:var(--mix-color)}.header-player.is-raw .header-player-time,.header-player.is-raw .header-player-time.is-remaining,.floating-player.is-raw .floating-player-time,.floating-player.is-raw .floating-player-time.is-remaining{color:var(--raw-color)}.header-player-time:hover,.floating-player-time:hover{color:var(--text-white);filter:drop-shadow(0 0 6px rgba(255,255,255,.28))}.header-player-seek::-webkit-slider-runnable-track{height:2px;border-radius:999px;background:linear-gradient(90deg,var(--seek-active) 0 var(--seek-progress),rgba(153,153,153,.36) var(--seek-progress) 100%)}.header-player-seek::-webkit-slider-thumb{width:9px;height:9px;margin-top:-3.5px;border-radius:50%;border:1px solid var(--seek-thumb);-webkit-appearance:none;appearance:none;background:#000;box-shadow:0 0 8px var(--seek-thumb-glow, rgba(0, 151, 167, .35));transition:border-color .24s ease,box-shadow .24s ease}.header-player-seek:active::-webkit-slider-thumb{border-color:var(--text-white);box-shadow:0 0 10px #ffffff73}.header-player-seek::-moz-range-track{height:2px;border-radius:999px;background-color:#9999995c}.header-player-seek::-moz-range-progress{height:2px;border-radius:999px;background-color:var(--seek-active)}.header-player-seek::-moz-range-thumb{width:9px;height:9px;border:1px solid var(--seek-thumb);border-radius:50%;background:#000;box-shadow:0 0 8px var(--seek-thumb-glow, rgba(0, 151, 167, .35));transition:border-color .24s ease,box-shadow .24s ease}.header-player-seek:active::-moz-range-thumb{border-color:var(--text-white);box-shadow:0 0 10px #ffffff73}.header-player-volume{position:relative;width:28px;height:30px;margin-left:-6px}.header-player-volume-button{width:28px;height:30px;border:0;background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .28s ease,filter .28s ease}.header-player-volume-button i{font-size:1rem;line-height:1}.header-player-volume:hover .header-player-volume-button,.header-player-volume:focus-within .header-player-volume-button{color:var(--accent);filter:drop-shadow(0 0 6px rgba(0,151,167,.35))}.header-player-volume.is-clicked .header-player-volume-button{animation:headerVolumeTealPulse .32s ease-out}.header-player-volume.is-reset .header-player-volume-button{animation:headerVolumeAmberPulse .38s ease-out}.header-player-volume-popover{position:absolute;top:calc(100% + 8px);left:50%;width:34px;height:112px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);background-color:#000000e0;opacity:0;pointer-events:none;z-index:3;transform:translate(-50%) translateY(-4px);transition:opacity .22s ease,transform .22s ease}.header-player-volume-popover:before{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);background-color:#000000e0;transform:translate(-50%) rotate(45deg)}.header-player-volume:after{content:"";position:absolute;top:100%;left:50%;width:44px;height:14px;transform:translate(-50%)}.header-player-volume:hover .header-player-volume-popover,.header-player-volume:focus-within .header-player-volume-popover{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}.header-player-volume-input{position:absolute;top:49px;left:50%;width:82px;height:14px;margin:0;appearance:none;-webkit-appearance:none;--volume-progress: 75%;background:transparent;cursor:ns-resize;transform:translate(-50%) rotate(-90deg)}.header-player-volume-input::-webkit-slider-runnable-track{height:3px;border-radius:999px;background:linear-gradient(90deg,var(--hifi-green) 0%,#E6C64A 58%,#D85A4A 100%) 0 / var(--volume-progress) 100% no-repeat,#ffffffc7;transition:background .42s ease-in-out}.header-player-volume-input::-webkit-slider-thumb{width:13px;height:13px;margin-top:-5px;border:1px solid var(--text-white);border-radius:50%;-webkit-appearance:none;appearance:none;background-color:#000000eb;transition:border-color .42s ease-in-out,background-color .42s ease-in-out,box-shadow .42s ease-in-out}.header-player-volume-input::-moz-range-track{height:3px;border-radius:999px;background-color:#ffffffc7;transition:background-color .42s ease-in-out}.header-player-volume-input::-moz-range-progress{height:3px;border-radius:999px;background:linear-gradient(90deg,var(--hifi-green) 0%,#E6C64A 58%,#D85A4A 100%);transition:background .42s ease-in-out}.header-player-volume-input::-moz-range-thumb{width:13px;height:13px;border:1px solid var(--text-white);border-radius:50%;background-color:#000000eb;transition:border-color .42s ease-in-out,background-color .42s ease-in-out,box-shadow .42s ease-in-out}.floating-player{position:fixed;left:50%;bottom:22px;width:min(520px,max(360px,52vw));display:grid;grid-template-columns:42px 34px minmax(100px,1fr) 36px 30px 28px;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);background-color:#000e0f9e;box-shadow:0 14px 34px #00000057,0 0 20px #0097a72e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;z-index:20;transform:translate(-50%) translateY(14px) scale(.985);transition:opacity .48s ease,transform .48s cubic-bezier(.19,1,.22,1),filter .48s ease,visibility 0s linear .48s}.floating-player.is-available{opacity:.94;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(0) scale(1);transition:opacity .48s ease,transform .48s cubic-bezier(.19,1,.22,1),filter .48s ease,visibility 0s}@media(min-width:1121px){.floating-player{width:min(448px,40vw);grid-template-columns:42px 34px minmax(56px,1fr) 34px 28px 26px;gap:9px;padding:9px 10px}.floating-player.is-available{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%) translateY(14px) scale(.985);transition:opacity .48s ease,transform .48s cubic-bezier(.19,1,.22,1),filter .48s ease,visibility 0s linear .48s}}body.demo-visible .floating-player.is-available,body.mini-player-suppressed .floating-player.is-available{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%) translateY(14px) scale(.985);transition:opacity .38s ease,transform .38s cubic-bezier(.19,1,.22,1),filter .38s ease,visibility 0s linear .38s}.floating-player-play-icon,.floating-player-volume-button,.floating-player-eject{border:0;background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.floating-player-play-icon{width:42px;height:34px;border:2px solid var(--mix-color);border-radius:999px;font-size:1rem;color:var(--mix-color);opacity:.96;transition:color .42s ease-in-out,opacity .32s ease-in-out,filter .42s ease-in-out,transform .1s ease,background-color .18s ease,border-color .42s ease-in-out,box-shadow .18s ease}.floating-player.is-raw .floating-player-play-icon{color:var(--raw-color);border-color:var(--raw-color)}.floating-player-play-icon:hover,.floating-player-play-icon.is-playing:hover{color:var(--text-white);border-color:#10663dc2;background-color:#10663d33;filter:drop-shadow(0 0 8px rgba(16,102,61,.34))}.floating-player-play-icon.is-playing:hover{border-color:#c9472de0;background-color:#c9472d3d;filter:drop-shadow(0 0 8px rgba(201,71,45,.34))}.floating-player-play-icon:active{transform:scale(.92);color:var(--text-white);border-color:#10663de0;background-color:#10663d94;filter:drop-shadow(0 0 8px rgba(16,102,61,.42));box-shadow:inset 0 0 10px #0000005c}.floating-player-play-icon.is-playing:active{border-color:#c9472de0;background-color:#c9472d94;filter:drop-shadow(0 0 8px rgba(201,71,45,.38))}.floating-player-eject{width:28px;height:30px;border:1px solid rgba(127,41,41,.54);border-radius:var(--radius);background-color:#ffffff05;font-size:.95rem;transition:background-color .32s ease-in-out,border-color .32s ease-in-out,color .32s ease-in-out,filter .32s ease-in-out,transform .1s ease}.floating-player-eject i{color:#7f2929}.floating-player-eject:hover{color:#7f2929;border-color:#7f29299e;background-color:#7f29291f;filter:drop-shadow(0 0 7px rgba(127,41,41,.34))}.floating-player-eject:hover i{color:#7f2929}.floating-player-eject:active{transform:scale(.9);color:#7f2929;border-color:#7f2929c7;background-color:#7f292933;filter:drop-shadow(0 0 8px rgba(127,41,41,.42));box-shadow:inset 0 0 10px #0000005c}.floating-player-eject:active i{color:#7f2929}@media(hover:none){.demo-play-toggle:hover,.demo-play-toggle.is-playing:hover,.demo-play-toggle:focus,.demo-play-toggle.is-playing:focus{background-color:transparent;border-color:var(--mix-color);color:var(--mix-color);box-shadow:none}.demo-player.is-raw .demo-play-toggle:hover,.demo-player.is-raw .demo-play-toggle.is-playing:hover,.demo-player.is-raw .demo-play-toggle:focus,.demo-player.is-raw .demo-play-toggle.is-playing:focus{border-color:var(--raw-color);color:var(--raw-color)}.demo-play-toggle:not(.is-playing):active{background-color:#10663dc7;border-color:var(--hifi-green);color:var(--text-white);box-shadow:inset 0 0 12px #00000047,0 0 15px #10663d75}.demo-play-toggle.is-playing:active{background-color:#c9472d94;border-color:#c9472de0;color:var(--text-white);box-shadow:inset 0 0 12px #00000047,0 0 15px #c9472d57}.demo-mode:hover,.demo-mode.is-raw:hover,.header-player-mode:hover,.header-player-mode.is-raw:hover,.floating-player-mode:hover,.floating-player-mode.is-raw:hover{color:currentColor;filter:none}.demo-mode:active,.demo-mode.is-raw:active,.header-player-mode:active,.floating-player-mode:active{transform:none;filter:none}.demo-play-toggle:not(:active),.demo-play-toggle.is-playing:not(:active){background-color:transparent!important;border-color:var(--mix-color)!important;color:var(--mix-color)!important;box-shadow:none!important}.demo-player.is-raw .demo-play-toggle:not(:active),.demo-player.is-raw .demo-play-toggle.is-playing:not(:active){border-color:var(--raw-color)!important;color:var(--raw-color)!important}.floating-player-play-icon:hover,.floating-player-play-icon.is-playing:hover{color:var(--mix-color);border-color:var(--mix-color);background-color:transparent;filter:none}.floating-player.is-raw .floating-player-play-icon:hover,.floating-player.is-raw .floating-player-play-icon.is-playing:hover{color:var(--raw-color);border-color:var(--raw-color)}.floating-player-play-icon:not(.is-playing):active{color:var(--text-white);border-color:#10663de0;background-color:#10663d94;filter:drop-shadow(0 0 8px rgba(16,102,61,.42))}.floating-player-play-icon.is-playing:active{color:var(--text-white);border-color:#c9472de0;background-color:#c9472d94;filter:drop-shadow(0 0 8px rgba(201,71,45,.38))}.floating-player-eject:hover{color:var(--text-muted);border-color:#99999947;background-color:#ffffff05;filter:none}.floating-player-eject:hover i{color:#7f2929}.floating-player-eject:active{color:#7f2929;border-color:#7f2929c7;background-color:#7f292933;filter:drop-shadow(0 0 8px rgba(127,41,41,.42))}.floating-player-eject:active i{color:#7f2929}}.floating-player-mode{height:30px;width:34px;min-width:34px;padding:0;border:0;background-color:transparent;color:var(--mix-color);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.82rem;transition:color .42s ease-in-out,filter .42s ease-in-out,transform .1s ease}.floating-player-mode i{transform:rotate(-90deg)}.floating-player-mode:hover{color:var(--text-white);filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.floating-player-mode.is-raw{color:var(--raw-color)}.floating-player-mode.is-raw:hover{color:var(--text-white);filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.floating-player-mode.is-switching:hover{color:var(--mix-color);filter:none}.floating-player-mode.is-raw.is-switching:hover{color:var(--raw-color);filter:none}.floating-player-mode:active{transform:scale(.94)}.floating-player-seek{position:relative;z-index:1;width:100%;height:12px;margin:0;appearance:none;-webkit-appearance:none;--seek-progress: 0%;--seek-active: var(--accent);--seek-thumb: var(--accent);background:transparent;accent-color:var(--seek-active);cursor:pointer}.floating-player-seek::-webkit-slider-runnable-track{height:2px;border-radius:999px;background:linear-gradient(90deg,var(--seek-active) 0 var(--seek-progress),rgba(153,153,153,.36) var(--seek-progress) 100%)}.floating-player-seek::-webkit-slider-thumb{width:9px;height:9px;margin-top:-3.5px;border:1px solid var(--seek-thumb);border-radius:50%;-webkit-appearance:none;appearance:none;background:#000;box-shadow:0 0 8px var(--seek-thumb-glow, rgba(0, 151, 167, .35));transition:border-color .24s ease,box-shadow .24s ease}.floating-player-seek:active::-webkit-slider-thumb{border-color:var(--text-white);box-shadow:0 0 10px #ffffff73}.floating-player-seek::-moz-range-track{height:2px;border-radius:999px;background-color:#9999995c}.floating-player-seek::-moz-range-progress{height:2px;border-radius:999px;background-color:var(--seek-active)}.floating-player-seek::-moz-range-thumb{width:9px;height:9px;border:1px solid var(--seek-thumb);border-radius:50%;background:#000;box-shadow:0 0 8px var(--seek-thumb-glow, rgba(0, 151, 167, .35));transition:border-color .24s ease,box-shadow .24s ease}.floating-player-seek:active::-moz-range-thumb{border-color:var(--text-white);box-shadow:0 0 10px #ffffff73}.floating-player-volume{position:relative;width:30px;height:30px}.floating-player-volume-button{width:30px;height:30px;transition:color .28s ease,filter .28s ease}.floating-player-volume-button i{font-size:1.05rem;line-height:1}.floating-player-volume:hover .floating-player-volume-button,.floating-player-volume:focus-within .floating-player-volume-button{color:var(--accent);filter:drop-shadow(0 0 6px rgba(0,151,167,.35))}.floating-player-volume.is-clicked .floating-player-volume-button{animation:headerVolumeTealPulse .32s ease-out}.floating-player-volume.is-reset .floating-player-volume-button{animation:headerVolumeAmberPulse .38s ease-out}.floating-player-volume-popover{position:absolute;bottom:calc(100% + 8px);left:50%;width:34px;height:112px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);background-color:#000000e0;opacity:0;pointer-events:none;z-index:3;transform:translate(-50%) translateY(4px);transition:opacity .22s ease,transform .22s ease}.floating-player-volume-popover:before{content:"";position:absolute;bottom:-5px;left:50%;width:9px;height:9px;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);background-color:#000000e0;transform:translate(-50%) rotate(45deg)}.floating-player-volume:after{content:"";position:absolute;bottom:100%;left:50%;width:44px;height:14px;transform:translate(-50%)}.floating-player-volume:hover .floating-player-volume-popover,.floating-player-volume:focus-within .floating-player-volume-popover{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}.floating-player-volume-input{position:absolute;top:49px;left:50%;width:82px;height:14px;margin:0;appearance:none;-webkit-appearance:none;--volume-progress: 75%;background:transparent;cursor:ns-resize;transform:translate(-50%) rotate(-90deg)}.floating-player-volume-input::-webkit-slider-runnable-track{height:3px;border-radius:999px;background:linear-gradient(90deg,var(--hifi-green) 0%,#E6C64A 58%,#D85A4A 100%) 0 / var(--volume-progress) 100% no-repeat,#ffffffc7;transition:background .42s ease-in-out}.floating-player-volume-input::-webkit-slider-thumb{width:13px;height:13px;margin-top:-5px;border:1px solid var(--text-white);border-radius:50%;-webkit-appearance:none;appearance:none;background-color:#000000eb;transition:border-color .42s ease-in-out,background-color .42s ease-in-out,box-shadow .42s ease-in-out}.floating-player-volume-input::-moz-range-track{height:3px;border-radius:999px;background-color:#ffffffc7;transition:background-color .42s ease-in-out}.floating-player-volume-input::-moz-range-progress{height:3px;border-radius:999px;background:linear-gradient(90deg,var(--hifi-green) 0%,#E6C64A 58%,#D85A4A 100%);transition:background .42s ease-in-out}.floating-player-volume-input::-moz-range-thumb{width:13px;height:13px;border:1px solid var(--text-white);border-radius:50%;background-color:#000000eb;transition:border-color .42s ease-in-out,background-color .42s ease-in-out,box-shadow .42s ease-in-out}@keyframes headerVolumeTealPulse{0%,to{color:var(--text-muted);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}18%,68%{color:var(--text-white);filter:drop-shadow(0 0 10px rgba(255,255,255,.48))}}@keyframes headerVolumeAmberPulse{0%,to{color:var(--text-muted);filter:drop-shadow(0 0 0 rgba(240,180,41,0))}18%,68%{color:#f0b429;filter:drop-shadow(0 0 12px rgba(240,180,41,.72))}}.demo-player{--demo-caption-space: 28px;background-color:var(--bg-darker);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;container-type:inline-size;overflow:hidden}.demo-player-main{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-rows:var(--demo-caption-space) 82px;align-items:center;column-gap:0;row-gap:0}.demo-control-stack{grid-column:1;grid-row:2;width:64px;height:82px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;align-self:stretch}.demo-play-toggle{width:64px;min-width:64px;height:36px;flex:0 0 36px;border:1px solid var(--mix-color);border-radius:999px;background-color:transparent;color:var(--mix-color);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .42s ease-in-out,color .42s ease-in-out,border-color .42s ease-in-out,box-shadow .42s ease-in-out,transform .1s ease}.demo-play-toggle i{font-size:1.05rem;line-height:1}.demo-play-toggle.is-playing{background-color:transparent;border-color:var(--mix-color);color:var(--mix-color);box-shadow:none}.demo-player.is-raw .demo-play-toggle,.demo-player.is-raw .demo-play-toggle.is-playing{border-color:var(--raw-color);color:var(--raw-color)}.demo-play-toggle:not(.is-playing):hover,.demo-player.is-raw .demo-play-toggle:not(.is-playing):hover{background-color:var(--play-action-green-soft);border-color:var(--play-action-green);color:var(--text-white);box-shadow:0 0 16px #31d27b57}.demo-play-toggle.is-playing:hover,.demo-player.is-raw .demo-play-toggle.is-playing:hover{background-color:#c9472d3d;border-color:#c9472de0;color:var(--text-white);box-shadow:0 0 16px #c9472d52}.demo-play-toggle:not(.is-playing):active,.demo-player.is-raw .demo-play-toggle:not(.is-playing):active{transform:scale(.94);background-color:var(--play-action-green-pressed);border-color:var(--play-action-green);color:var(--text-white);box-shadow:inset 0 0 12px #00000047,0 0 15px #31d27b75}.demo-play-toggle.is-playing:active,.demo-player.is-raw .demo-play-toggle.is-playing:active{transform:scale(.94);background-color:#c9472d94;border-color:#c9472de0;color:var(--text-white);box-shadow:inset 0 0 12px #00000047,0 0 15px #c9472d57}.demo-track-area{grid-column:2;grid-row:2;position:relative;min-width:0;margin-left:10px}.demo-waveform-button{display:block;width:100%;min-width:0;height:82px;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);background:linear-gradient(180deg,#ffffff06,#ffffff01);cursor:pointer;padding:0;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:none}.demo-waveform-button:focus{outline:none}.demo-waveform{width:100%;height:100%;display:block}.demo-mode{grid-row:1;position:relative;width:64px;min-width:64px;height:46px;border:0;border-radius:0;background-color:transparent;color:var(--mix-color);display:block;overflow:visible;padding:0;font-family:inherit;cursor:pointer;transition:color .32s ease-in-out,filter .32s ease-in-out,transform .12s ease;transform:none}.demo-mode i{position:absolute;top:0;left:50%;width:46px;height:46px;font-size:2.95rem;line-height:1;transform:translate(-50%)}.demo-mode span,.demo-mode:not(.is-raw) span,.demo-mode.is-raw span{position:absolute;top:50%;display:block;margin:0;font-size:.63rem;line-height:1;letter-spacing:0;text-align:center;white-space:nowrap;writing-mode:horizontal-tb;text-orientation:mixed;transform-origin:center;pointer-events:none}.demo-mode:not(.is-raw) span{left:2px;transform:translate(-50%,-50%) rotate(-90deg)}.demo-mode.is-raw{color:var(--raw-color)}.demo-mode.is-raw span{right:1px;transform:translate(50%,-50%) rotate(90deg)}.demo-mode:hover,.demo-mode.is-raw:hover{color:var(--text-white);filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.demo-mode.is-switching:hover{color:var(--mix-color);filter:none}.demo-mode.is-raw.is-switching:hover{color:var(--raw-color);filter:none}.demo-mode:active,.demo-mode.is-raw:active{transform:scale(.94)}.demo-hint{grid-column:2;grid-row:1;justify-self:stretch;align-self:start;width:calc(100% - 6px);max-width:100%;margin:0 0 0 6px;padding:0;color:var(--text-muted);font-size:.78rem;line-height:1.45;font-weight:300;text-align:left;pointer-events:none;position:relative;white-space:nowrap}.demo-hint>.ph-arrow-bend-up-right{position:absolute;left:-17px;top:calc(.05em + 9px);color:var(--text-muted);margin:0;transition:opacity .42s ease-in-out}.demo-hint-compact-arrow{display:none}.demo-hint em{display:inline-block;opacity:.72;transform:translateY(4px);transition:opacity .42s ease-in-out}.demo-hint-mix{color:var(--mix-color)}.demo-hint-raw{color:var(--raw-color)}.demo-player.is-playing .demo-hint em,.demo-player.is-playing .demo-hint i{animation:demoHintPulse 1.45s ease-in-out infinite}.demo-meter-shell{grid-column:3;grid-row:2;width:30px;height:82px;margin-left:11.5px;display:grid;grid-template-rows:68px 10px;align-items:end;gap:4px}.demo-meter{position:relative;display:flex;align-items:stretch;justify-content:center;gap:1px;width:100%;height:68px;padding:3px 4px;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);--volume-cap: .65;transition:border-color .42s ease-in-out,box-shadow .42s ease-in-out}.demo-meter:after{content:"";position:absolute;inset:3px 4px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.9) 0 2px,transparent 2px 5px);pointer-events:none;z-index:3}.demo-meter.is-blinking{animation:demoMeterBlink .52s ease-out forwards}.demo-player.is-raw .demo-meter.is-blinking{animation-name:demoMeterBlinkRaw}.demo-meter-channel{position:relative;width:7px;height:100%;--meter-level: 0;overflow:hidden}.demo-meter-channel span{display:none}.demo-meter-channel:before,.demo-meter-channel:after{content:"";position:absolute;inset:0;border-radius:1px}.demo-meter-left:before,.demo-meter-left:after{clip-path:polygon(100% 100%,70% 100%,20% 0,100% 0)}.demo-meter-right:before,.demo-meter-right:after{clip-path:polygon(0 100%,30% 100%,80% 0,0 0)}.demo-meter-channel:before{background:linear-gradient(to top,#10663d0f 0% 48%,#f0b42914 74%,#c0392b1a)}.demo-meter-channel:after{background:linear-gradient(to top,var(--hifi-green) 0%,var(--hifi-green) 48%,#F0B429 74%,#C0392B 100%);filter:drop-shadow(0 0 6px rgba(16,102,61,.34));transform:scaleY(var(--meter-level));transform-origin:50% 100%;transition:transform 45ms steps(3,end),filter .06s linear}.demo-volume{position:absolute;left:50%;top:50%;width:56px;height:12px;margin:0;transform:translate(-50%,-50%) rotate(-90deg);appearance:none;-webkit-appearance:none;background:transparent;opacity:.72;cursor:ns-resize;z-index:4}.demo-volume::-webkit-slider-runnable-track{height:2px;border-radius:999px;background-color:#9999993d;transition:background-color .42s ease-in-out}.demo-volume::-webkit-slider-thumb{width:5px;height:12px;margin-top:-5px;border-radius:999px;-webkit-appearance:none;appearance:none;background-color:#f0b429;transition:background-color .42s ease-in-out,box-shadow .42s ease-in-out}.demo-player.is-raw .demo-volume::-webkit-slider-thumb{background-color:var(--accent)}.demo-volume::-moz-range-track{height:2px;border-radius:999px;background-color:#9999993d;transition:background-color .42s ease-in-out}.demo-volume::-moz-range-thumb{width:5px;height:12px;border:0;border-radius:999px;background-color:#f0b429;transition:background-color .42s ease-in-out,box-shadow .42s ease-in-out}.demo-player.is-raw .demo-volume::-moz-range-thumb{background-color:var(--accent)}.demo-db-values{display:flex;justify-content:center;color:var(--text-muted);font-size:.58rem;font-variant-numeric:tabular-nums;line-height:1}.demo-db-value.is-active{color:#f0b429}.demo-player.is-raw .demo-db-value.is-active{color:var(--accent)}.demo-time{position:absolute;right:2px;top:calc(50% + 14px);bottom:auto;border:0;background:#000000ad;color:var(--mix-color);display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-variant-numeric:tabular-nums;letter-spacing:.4px;cursor:pointer;padding:3px 3px 3px 5px;border-radius:var(--radius);width:65px;min-height:22px;justify-content:flex-end;transition:color .42s ease-in-out,background-color .42s ease-in-out}.demo-time.is-remaining{color:var(--mix-color)}.demo-player.is-raw .demo-time,.demo-player.is-raw .demo-time.is-remaining{color:var(--raw-color)}.demo-time:hover{color:var(--text-white)}.demo-time i{color:var(--text-muted);font-size:.95rem}.demo-time:hover i{color:var(--text-white)}@media(min-width:769px)and (max-width:1120px){.header-player.is-available{opacity:0;visibility:hidden;pointer-events:none;filter:blur(2px);transform:translate(-50%,calc(-50% - 8px));transition:opacity .48s ease,filter .48s ease,transform .48s ease,border-color .48s ease,visibility 0s linear .48s}.floating-player{width:min(448px,40vw);grid-template-columns:42px 34px minmax(56px,1fr) 34px 28px 26px;gap:9px;padding:9px 10px}}@media(min-width:769px)and (max-width:860px){.header-player.is-available{flex-basis:320px;grid-template-columns:40px 30px minmax(72px,1fr) 34px 24px;gap:8px;padding-right:9px}.header-player-volume,.header-player-volume-button{width:24px}}@media(max-width:768px){.header-player{display:none}.floating-player{display:grid;bottom:16px;width:min(360px,52vw);grid-template-columns:40px 30px minmax(72px,1fr) 34px 28px 26px;gap:8px;padding:9px 10px}}@media(max-width:560px){.floating-player{width:66vw;grid-template-columns:34px 30px minmax(44px,1fr) 32px 24px 22px;gap:3px;padding:8px}.floating-player-play-icon{width:34px;height:30px}.floating-player-mode{width:30px;min-width:30px;font-size:1.62rem}.floating-player-volume,.floating-player-volume-button{width:24px}.demo-player{--demo-caption-space: 24px;padding:9px 10px 10px}.demo-player-main{grid-template-columns:56px minmax(0,1fr) auto;grid-template-rows:28px auto 30px;column-gap:5px;row-gap:6px}.demo-control-stack{display:contents}.demo-mode{grid-column:1;grid-row:1;width:56px;height:28px;justify-self:start;transform:none}.demo-play-toggle{grid-column:1;grid-row:3;width:56px;height:30px;justify-self:start}.demo-mode span{display:none}.demo-play-toggle,.demo-mode{font-size:.7rem}.demo-play-toggle i{font-size:.95rem}.demo-mode i{font-size:1.5rem}.demo-mode span{width:22px}.demo-hint{grid-column:2 / -1;grid-row:1;justify-self:start;align-self:center;transform:none;padding-left:0;font-size:.74rem;text-align:left;max-width:100%}.demo-hint i{display:inline-block;margin-right:5px}.demo-track-area{grid-column:1 / 3;grid-row:2}.demo-waveform-button{height:76px}.demo-meter-shell{grid-column:2;grid-row:2;width:22px;height:76px;grid-template-rows:62px 10px}.demo-meter{height:62px;padding:4px 5px}.demo-meter-channel{width:5px}.demo-time{right:4px;top:calc(50% + 14px);bottom:auto;font-size:.72rem;padding:3px 3px 3px 5px;width:62px}.demo-player-main:after{content:"";grid-column:2 / -1;grid-row:3}.demo-mode:hover,.demo-mode.is-raw:hover,.demo-mode:active,.demo-mode.is-raw:active{filter:none;transform:none}}@media(hover:hover)and (pointer:fine)and (max-width:768px){.floating-player{width:min(360px,52vw)}}@media(hover:none)and (pointer:coarse)and (min-width:561px)and (max-width:1024px){.header-player-volume,.floating-player-volume{display:none}.header-player{grid-template-columns:40px 30px minmax(90px,1fr) 36px}.floating-player{grid-template-columns:42px 34px minmax(100px,1fr) 36px 28px}}@media(max-width:448px){.demo-hint-extra{display:none}}.demo-hint-short{display:none}@media(max-width:326px){.demo-hint-standard{display:none}.demo-hint-short{display:inline}}@media(max-width:225px){.demo-hint,.demo-hint .demo-hint-compact-arrow{display:none}}@container (max-width: 600px){.demo-player-main{grid-template-columns:74px minmax(0,1fr) auto;grid-template-rows:30px 82px 36px;column-gap:6px;row-gap:6px}.demo-control-stack{display:contents}.demo-mode{grid-column:1;grid-row:1;position:relative;display:block;width:74px;min-width:74px;height:30px;overflow:visible;align-self:center;justify-self:start;transform:none}.demo-mode i{position:absolute;top:50%;left:18px;width:auto;height:auto;margin:0;font-size:1.72rem;line-height:1;transform:translateY(-50%) rotate(-90deg)}.demo-mode span,.demo-mode:not(.is-raw) span,.demo-mode.is-raw span{position:absolute;top:50%;display:block;margin:0;font-size:.62rem;font-weight:500;line-height:1;letter-spacing:0;text-align:center;white-space:nowrap;writing-mode:horizontal-tb;text-orientation:mixed;transform-origin:center;pointer-events:none}.demo-mode:not(.is-raw) span{left:2px;transform:translateY(-50%) rotate(-90deg)}.demo-mode.is-raw span{right:13px;transform:translateY(-50%) rotate(90deg)}.demo-hint{grid-column:2 / -1;grid-row:1;align-self:center;justify-self:start;width:100%;max-width:100%;margin:0;font-size:.74rem;line-height:1.35;white-space:normal}.demo-hint>.ph-arrow-bend-up-right{display:none}.demo-hint .demo-hint-compact-arrow{display:block;position:absolute;left:-19px;top:calc(50% + 4px);width:auto;margin:0;color:var(--text-muted);font-size:.96rem;line-height:1;transform:translateY(-50%);transition:opacity .42s ease-in-out}.demo-hint em{transform:translate(2px,4px)}.demo-track-area{grid-column:1 / 3;grid-row:2;margin-left:0}.demo-meter-shell{grid-column:3;grid-row:2;width:22px;height:82px;margin-left:0;grid-template-rows:68px 10px}.demo-meter{height:68px}.demo-waveform-button{height:82px}.demo-play-toggle{grid-column:1;grid-row:3;width:68px;min-width:68px;height:36px;justify-self:start}}.demo-player-reveal{transform:translate3d(28px,0,0);transition:opacity 1.05s ease var(--reveal-delay, 0ms),transform 1.05s cubic-bezier(.19,1,.22,1) var(--reveal-delay, 0ms)}@media(hover:none)and (pointer:coarse){.demo-mode:hover,.demo-mode:focus:not(:focus-visible),.header-player-mode:hover,.header-player-mode:focus:not(:focus-visible),.floating-player-mode:hover,.floating-player-mode:focus:not(:focus-visible){color:var(--mix-color);filter:none}.demo-mode.is-raw:hover,.demo-mode.is-raw:focus:not(:focus-visible),.header-player-mode.is-raw:hover,.header-player-mode.is-raw:focus:not(:focus-visible),.floating-player-mode.is-raw:hover,.floating-player-mode.is-raw:focus:not(:focus-visible){color:var(--raw-color);filter:none}.demo-mode:active,.header-player-mode:active,.floating-player-mode:active{color:var(--mix-color);filter:none}.demo-mode.is-raw:active,.header-player-mode.is-raw:active,.floating-player-mode.is-raw:active{color:var(--raw-color);filter:none}.demo-time,.header-player-time,.floating-player-time{pointer-events:none;cursor:default;-webkit-tap-highlight-color:transparent;user-select:none}.header-player-play-icon:not(.is-tap-feedback),.floating-player-play-icon:not(.is-tap-feedback){background-color:transparent!important;border-color:var(--mix-color)!important;color:var(--mix-color)!important;box-shadow:none!important;filter:none!important}.header-player.is-raw .header-player-play-icon:not(.is-tap-feedback),.floating-player.is-raw .floating-player-play-icon:not(.is-tap-feedback){border-color:var(--raw-color)!important;color:var(--raw-color)!important}.demo-play-toggle.is-tap-feedback.is-tap-play,.header-player-play-icon.is-tap-feedback.is-tap-play,.floating-player-play-icon.is-tap-feedback.is-tap-play{transform:scale(.94)!important;color:var(--text-white)!important;border-color:var(--play-action-green)!important;background-color:var(--play-action-green-pressed)!important;box-shadow:inset 0 0 12px #00000047,0 0 15px #31d27b75!important;filter:drop-shadow(0 0 8px rgba(49,210,123,.42))!important}.demo-play-toggle.is-tap-feedback.is-tap-pause,.header-player-play-icon.is-tap-feedback.is-tap-pause,.floating-player-play-icon.is-tap-feedback.is-tap-pause{transform:scale(.94)!important;color:var(--text-white)!important;border-color:#c9472de0!important;background-color:#c9472d94!important;box-shadow:inset 0 0 12px #00000047,0 0 15px #c9472d57!important;filter:drop-shadow(0 0 8px rgba(201,71,45,.38))!important}.demo-play-toggle.is-tap-feedback i,.header-player-play-icon.is-tap-feedback i,.floating-player-play-icon.is-tap-feedback i{color:var(--text-white)!important}.floating-player-eject:hover{color:#7f2929;border-color:#7f29298a;background-color:#ffffff05;filter:none}.floating-player-eject.is-tap-feedback,.floating-player-eject:active{transform:scale(.9)!important;color:var(--text-white)!important;border-color:#7f2929eb!important;background-color:#7f292994!important;box-shadow:inset 0 0 10px #0000005c,0 0 10px #7f292957!important;filter:drop-shadow(0 0 8px rgba(127,41,41,.42))!important}.floating-player-eject.is-tap-feedback i,.floating-player-eject:active i{color:var(--text-white)!important;animation:ejectTapIconFlash .32s ease-out both}}.header-player-volume.is-popover-open .header-player-volume-popover,.floating-player-volume.is-popover-open .floating-player-volume-popover{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}@keyframes ejectTapIconFlash{0%{color:#7f2929;opacity:.72}32%,to{color:#fff;opacity:1}}@keyframes demoMeterBlink{0%{border-color:#f0b429f2;box-shadow:0 0 0 1px #f0b42959,0 0 18px #f0b4294d}to{border-color:#ffffff0f;box-shadow:none}}@keyframes demoMeterBlinkRaw{0%{border-color:#0097a7f2;box-shadow:0 0 0 1px #0097a759,0 0 18px #0097a74d}to{border-color:#ffffff0f;box-shadow:none}}@keyframes miniPlayerBlink{0%{border-color:#ffffffeb;box-shadow:0 14px 34px #00000057,0 0 #fff0}48%{border-color:#ffffffeb;box-shadow:0 14px 34px #00000057,0 0 20px #ffffff4d}to{border-color:#ffffff1f;box-shadow:0 14px 34px #00000057,0 0 20px #0097a72e}}@keyframes demoHintPulse{0%,to{opacity:.38}50%{opacity:1}}.demo-hint i{position:absolute;left:-24px;top:.05em;color:var(--text-muted);margin:0;vertical-align:-.1em;transition:opacity .42s ease-in-out}@media(max-width:639px){.floating-player{grid-template-columns:42px 30px minmax(54px,1fr) 36px 28px;column-gap:3px}.floating-player-volume{display:none}}@media(hover:none)and (pointer:coarse)and (max-width:768px){.demo-volume{display:none}}@media(max-width:369px){.floating-player{grid-template-columns:42px 30px minmax(50px,1fr) 28px}.floating-player-time{display:none}}@media(max-width:299px){.floating-player{grid-template-columns:42px 30px minmax(50px,1fr)}.floating-player-eject{display:none}}@media(max-width:239px){.floating-player{display:none}}.header-player-play-icon:active i,.floating-player-play-icon:active i{color:var(--text-white)}