@keyframes animate-in{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes moving{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}@media (max-width: 768px){:root{--aside-row-gap: var(--gap-2)}}@media (max-width: 430px){:root{--key-height: 90}}@media (min-height: 800px) and (min-width: 768px){:root{--key-height: 150}}html{scroll-behavior:smooth}@media (max-width: 768px){html{font-size:87.5%}}body{background-color:var(--body-bg, hsl(240, 10%, 17%));font-family:Roboto,Segoe UI,BlinkMacSystemFont,system-ui,-apple-system,sans-serif;color:hsla(var(--text-hsl, hsl(0, 0%, 100%)),.5);margin:0;min-height:var(--h-full);display:grid;overflow:hidden}body.dragging{cursor:grabbing!important}@media (max-width: 768px){body.dragging{padding-right:var(--scrollbar-size)}}body.dragging *{pointer-events:none!important}body.dragging *.dragging{cursor:grabbing!important;pointer-events:initial!important}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.loader{position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--primary);transition:opacity var(--loader-anim-dur-ms) ease-out}.control{--control-bg: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-bg) );--control-hover: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-hover) );--control-focus: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-focus) );--control-focus-hover: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-focus-hover) );--control-active: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-active) );--control-progress: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-progress) );--control-disabled: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-disabled) )}.control.primary{--control-color: var(--primary);--control-color-50: var(--primary-50);--control-color-h: var(--primary-h);--control-color-s: var(--primary-s);--control-color-l: var(--primary-l);--control-hsl: var(--primary-hsl)}.control.secondary{--control-color: var(--secondary);--control-color-50: var(--secondary-50);--control-color-h: var(--secondary-h);--control-color-s: var(--secondary-s);--control-color-l: var(--secondary-l);--control-hsl: var(--secondary-hsl)}svg.icon{fill:currentColor;width:-moz-max-content;width:max-content;aspect-ratio:1/1;width:var(--icon-size)}.btn{--control-color: var(--primary);--control-color-h: var(--primary-h);--control-color-s: var(--primary-s);--control-color-l: var(--primary-l);--control-bg: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-bg) );--control-hover: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-hover) );--control-focus: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-focus) );--control-focus-hover: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-focus-hover) );--control-active: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-active) );--control-progress: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-progress) );--control-disabled: hsla( var(--control-color-h), var(--control-color-s), var(--control-color-l), var(--alpha-disabled) )}.btn.primary{--control-color: var(--primary);--control-color-50: var(--primary-50);--control-color-h: var(--primary-h);--control-color-s: var(--primary-s);--control-color-l: var(--primary-l);--control-hsl: var(--primary-hsl)}.btn.secondary{--control-color: var(--secondary);--control-color-50: var(--secondary-50);--control-color-h: var(--secondary-h);--control-color-s: var(--secondary-s);--control-color-l: var(--secondary-l);--control-hsl: var(--secondary-hsl)}.sound-controls .eq-control .btn.range{display:none}.sound-controls:has(#eq-sliders:checked) .eq-control .btn.range{display:inline-flex}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none!important;color:var(--primary);border-radius:50%;border-width:0;border-style:solid;border-color:var(--control-color);box-shadow:inset 0 0 0 var(--btn-size) var(--control-bg);background-color:var(--control-bg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-family:inherit;text-transform:uppercase;padding:.5em;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color .6s ease-out}.btn:hover{transition-duration:.2s;background-color:var(--control-focus)}.btn:active,.btn:focus,.btn:focus-visible{transition-duration:.2s;background-color:var(--control-active);box-shadow:inset 0 0 0 0 var(--control-active)}.btn svg{pointer-events:none}.btn-prev,.btn-next{--icon-size: var(--btn-size);padding:var(--gap-3);width:var(--btn-size-xl);height:var(--btn-size-xl);border-width:2px;padding:var(--gap-1)}.btn-play{border-width:3px;padding:var(--gap-5);width:var(--btn-size-3xl);height:var(--btn-size-3xl)}.btn-volume{border:0;width:var(--btn-size-xl);height:var(--btn-size-xl);margin-top:calc(var(--gap-4) * -1);margin-bottom:-5px;background-color:transparent;box-shadow:inset 0 0 0 0 transparent}.btn-volume .icon-volume-off,.btn-volume.muted .icon-volume{display:none}.btn-volume.muted .icon-volume-off{display:block}.btn-toggle{--icon-size: var(--btn-size);padding:var(--gap-3);width:var(--btn-size-xl);height:var(--btn-size-xl);background-color:var(--surface-dark);transition:transform .45s ease-out}.btn-toggle:hover{background-color:var(--surface-darker)}.btn-toggle:active,.btn-toggle:focus,.btn-toggle:focus-visible{background-color:var(--surface-darkest)}.btn-toggle.active{transform:scale(.75)}.btn-toggle .icon{transition:transform .45s ease-out}.btn-eq-toggle{width:auto;height:var(--btn-size);border-radius:calc(var(--border-radius) / 2);border-width:2px;font-weight:700}.btn-eq-toggle.active{color:#000c;background-color:var(--control-color)}.track-title .btn-search{width:var(--btn-size-lg);height:var(--btn-size-lg)}.track-playlist .btn-search{width:var(--btn-size);height:var(--btn-size)}.btn-magnify{position:relative;z-index:1;width:var(--btn-size);height:var(--btn-size);padding:calc(var(--btn-size) / 8)}.btn-group{display:flex;gap:var(--gap-2);position:relative;z-index:1}.checkbox{--checkbox-bg-color: var(--control-bg);--checkbox-color: var(--control-color);--checkbox-label-size: 1rem;--checkbox-radius: 4px;--checkbox-size: 1.125rem;--checkbox-border-width: 2px;--checkbox-border-color: var(--checkbox-color);--checkbox-border-color-disabled: var(--input-border-color-disabled);--checkbox-opacity-hover: var(--alpha-hover);--checkbox-opacity-focus: var(--alpha-focus);--checkbox-opacity-focus-hover: var(--alpha-focus-hover);--checkbox-opacity-active: var(--alpha-active);--checkbox-opacity-disabled: var(--alpha-disabled);z-index:2;position:relative;display:flex;align-items:baseline}.checkbox>input{height:var(--checkbox-size);width:var(--checkbox-size);-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;left:0;top:calc(var(--checkbox-size) / 4);border-radius:50%;background-color:var(--checkbox-color);outline:none;opacity:0;transform:scale(2);pointer-events:none;transition:opacity .3s,transform .2s}.checkbox>input:checked+.checkbox__icon:after,.checkbox>input:indeterminate+.checkbox__icon:after{transform:scale(1)}.checkbox>input:indeterminate+.checkbox__icon:after{content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="white" d="M20 14H4V10H20V14Z" /%3E%3C/svg%3E')}.checkbox>input:focus{opacity:var(--checkbox-opacity-focus)}.checkbox>input:active{opacity:var(--checkbox-opacity-active);transform:scale(0);transition:transform 0s,opacity 0s}.checkbox>input:disabled{opacity:0}.checkbox>input:disabled~*{cursor:initial}.checkbox>input:disabled+.checkbox__icon{opacity:var(--checkbox-opacity-disabled)}.checkbox>input:disabled+.checkbox__icon:before{--checkbox-color: var(--checkbox-border-color-disabled);--checkbox-border-color: var(--checkbox-color)}.checkbox>input:disabled+.checkbox__icon+.checkbox__label{opacity:var(--checkbox-opacity-disabled)}.checkbox>input~*{cursor:pointer}.checkbox:hover>input{opacity:var(--checkbox-opacity-hover)}.checkbox:hover>input:focus{opacity:var(--checkbox-opacity-focus-hover)}.checkbox:hover>input:disabled{opacity:0}.checkbox__icon{display:inline-block;width:var(--checkbox-size);height:var(--checkbox-size);position:relative;top:calc(var(--checkbox-size) / 4);flex-shrink:0}.checkbox__icon:before,.checkbox__icon:after{display:inline-block;border-radius:var(--checkbox-radius);width:100%;height:100%;top:0;left:0;position:absolute}.checkbox__icon:before{content:"";border-color:var(--checkbox-border-color);background-color:var(--checkbox-bg-color);border-style:solid;border-width:var(--checkbox-border-width);transition:border-color .2s ease-in}.checkbox__icon:after{line-height:0;padding:1px;content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="white" d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" /%3E%3C/svg%3E');background-color:var(--checkbox-color);transform:scale(0);transition:transform .2s ease-in}.checkbox__label{font-size:var(--checkbox-label-size);line-height:1.4;margin-left:calc(var(--checkbox-size) / 2)}.radio{--radio-circle-size: calc(var(--radio-size, 2rem) / 2);--radio-border-width: 2px;--radio-hsl: var(--control-hsl);--radio-color: var(--control-color);z-index:0;position:relative;display:inline-flex;align-items:center;font-size:calc(var(--radio-circle-size) * .75);line-height:1.5;transition:color .2s ease-out;width:-moz-max-content;width:max-content;-webkit-user-select:none;-moz-user-select:none;user-select:none}.radio:hover{color:hsla(var(--radio-hsl, 0, 0%, 0%),.6)}.radio>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:-1;position:absolute;left:calc(var(--radio-circle-size) / -2);top:calc(50% - var(--radio-circle-size));display:block;margin:0;border-radius:9999px;width:var(--radio-size);height:var(--radio-size);background-color:hsla(var(--radio-hsl, 0, 0%, 0%),.6);outline:none;opacity:0;transform:scale(0);pointer-events:none;transition:opacity .3s,transform .2s}.radio>span{display:inline-flex;align-items:center;width:100%;cursor:pointer;color:hsla(var(--text-hsl),.5)}.radio>span:before{content:"";display:inline-block;box-sizing:border-box;margin:var(--radio-border-width) calc(var(--radio-circle-size) / 4) var(--radio-border-width) 0;border:solid var(--radio-border-width);border-color:hsla(var(--text-hsl, 0, 0%, 0%),.5);border-radius:9999px;width:var(--radio-circle-size, 1rem);height:var(--radio-circle-size, 1rem);vertical-align:top;transition:border-color .2s;background-color:var(--surface)}.radio>span:after{content:"";display:block;position:absolute;top:calc(50% - var(--radio-circle-size) / 2);left:0;border-radius:50%;width:calc(var(--radio-circle-size) / 2);height:calc(var(--radio-circle-size) / 2);background-color:var(--radio-color);transform:translate(calc(var(--radio-circle-size) / 4),calc(var(--radio-circle-size) / 4)) scale(0);transition:transform .2s}.radio>input:checked{background-color:var(--radio-color)}.radio>input:checked+span{color:hsla(var(--radio-hsl),1)}.radio>input:checked+span:before{border-color:var(--radio-color)}.radio>input:checked+span:after{transform:translate(calc(var(--radio-circle-size) / 4),calc(var(--radio-circle-size) / 4)) scale(1)}.radio:hover>input{opacity:var(--alpha-hover);transform:scale(1)}.radio>input:focus{opacity:var(--alpha-focus-hover);transform:scale(1)}.radio:hover>input:focus{opacity:var(--alpha-focus);transform:scale(1)}.radio>input:active{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.radio>input:active+span:before{border-color:var(--radio-color)}.radio>input:disabled{opacity:0}.radio>input:disabled+span{color:hsla(var(--radio-hsl, 0, 0%, 0%),var(--alpha-disabled));cursor:initial}.radio>input:disabled+span:before{border-color:currentColor}.radio>input:disabled+span:after{background-color:currentColor}.radio-group{display:flex;flex-direction:column}.switch{--switch-hsl: var(--control-hsl);--switch-hsl-opacity: .2;--switch-color: var(--control-color);--switch-size: .625rem;--switch-label-size: var(--switch-size);--switch-border-width: 0;--switch-bg-color: var(--switch-color);--switch-border-color: var(--switch-color);--switch-border-color-disabled: var(--control-disabled);--switch-opacity-hover: var(--alpha-hover);--switch-opacity-focus: var(--alpha-focus);--switch-opacity-focus-hover: var(--alpha-focus-hover);--switch-opacity-disabled: var(--alpha-disabled);--switch-disabled: var(--control-disabled);z-index:2;position:relative;display:inline-flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;margin-top:calc(var(--switch-border-width) * -2);gap:var(--switch-size)}.switch [type=checkbox]{height:var(--switch-size);width:var(--switch-size);-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1;position:absolute;left:0;border-radius:50%;background-color:var(--switch-color);outline:none;opacity:0;transform:scale(3);pointer-events:none;transition:opacity .3s ease-out,transform .2s ease-out,left .15s ease-in-out}.switch [type=checkbox]:checked{left:calc(var(--switch-size) * 1.5)}.switch [type=checkbox]:focus{opacity:var(--switch-opacity-focus)}.switch [type=checkbox]:active{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.switch:hover [type=checkbox]{opacity:var(--switch-opacity-hover)}.switch:hover:focus{opacity:var(--switch-opacity-focus-hover)}.switch:hover:disabled{opacity:0}.switch:hover .switch__label{color:var(--font-color-high)}.switch__icon{box-sizing:content-box;border-radius:9999px;background-color:hsla(var(--switch-hsl),var(--switch-hsl-opacity));border-color:var(--switch-border-color);border-style:solid;border-width:var(--switch-border-width);display:inline-block;width:calc(var(--switch-size) * 2.5);height:var(--switch-size);position:relative;top:calc(var(--switch-size) / 2 - var(--switch-size) / 8 * 3 + var(--switch-border-width));flex-shrink:0;cursor:pointer;transition-duration:.15s;transition-timing-function:ease-out;transition-property:background-color,border-color,border-width}.switch__icon:after,.switch__icon:before{display:inline-block;border-radius:calc(var(--switch-size) / 2);background-color:var(--switch-color);width:var(--switch-size);height:var(--switch-size);top:0;left:0;position:absolute;line-height:0}.switch__icon:after{box-shadow:0 0 0 calc(var(--switch-size) / 4) var(--primary-50);content:"";transition-delay:0s;transition-duration:.15s,.15s;transition-timing-function:ease-out,ease-in-out;transition-property:background-color,left}.switch__icon:before{transition-delay:0s,.15s,0s;transition-duration:.15s;transition-timing-function:ease-out,ease-out,ease-in-out;transition-property:background-color,box-shadow,width}.switch__icon:has([type=checkbox]:checked){--switch-hsl-opacity: 1}.switch__icon:has([type=checkbox]:checked):after{left:calc(var(--switch-size) * 1.5);background-color:var(--body-bg)}.switch__icon:has([type=checkbox]:checked)+.switch__label{opacity:1}.switch__icon:has([type=checkbox]:disabled){background-color:var(--switch-border-color-disabled);border-color:var(--switch-border-color-disabled);opacity:var(--switch-opacity-disabled);cursor:initial}.switch__icon:has([type=checkbox]:disabled)+.switch__label{opacity:var(--switch-opacity-disabled)}.switch__label{cursor:pointer;font-size:.75rem;font-weight:500;line-height:1.4;transition:opacity .3s ease-out;color:var(--font-color-sub);transition:color .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.range{--range-hsl: var(--control-hsl);--range-color: var(--control-color);--range-color-50: var(--control-color-50);--range-hover: var(--control-hover);--range-focus: var(--control-focus);--range-focus-hover: var(--control-focus-hover);--range-active: var(--control-active);--range-disabled: var(--control-disabled);--range-track: var(--control-bg);--range-thumb-bg-shadow: inset 0 0 0 var(--range-size) var(--range-color);width:100%;min-width:var(--range-min-w);font-size:1rem;line-height:1.5}.range>input{--range-bg-gradient-percentage: calc(var(--bg-percentage, 0) * 1%);-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;top:24px;display:block;margin:0 0 calc(var(--btn-size-lg) * -1);width:100%;height:var(--btn-size-lg);background-color:transparent;cursor:pointer}.range>input:last-child{position:static;margin:0}.range>span{display:inline-block;margin-bottom:var(--btn-size-lg);padding-top:2px;pointer-events:none}.range>input:focus{outline:none}.range>input:disabled{cursor:default;opacity:var(--alpha-disabled);pointer-events:none}.range>input:disabled+span{color:hsla(var(--text-hsl, 0, 0%, 0%),var(--alpha-disabled))}.range>input::-webkit-slider-runnable-track{margin:var(--range-spacing) 0;border-radius:9999px;width:100%;height:var(--range-size);background-color:var(--range-track)}.range>input:not(.bg-hue)::-webkit-slider-runnable-track{background-image:linear-gradient(to right,var(--range-color) 0%,var(--range-color) var(--range-bg-gradient-percentage),transparent var(--range-bg-gradient-percentage))}.range>input::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:.2px solid var(--range-color-50);border-radius:9999px;height:var(--range-size);width:var(--range-size);box-shadow:0 0 0 0 var(--range-hover),var(--range-thumb-bg-shadow);transform:scale(5);-webkit-transition:box-shadow .2s;transition:box-shadow .2s}.range:hover>input::-webkit-slider-thumb{box-shadow:0 0 0 var(--range-size) var(--range-hover),var(--range-thumb-bg-shadow)}.range>input:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--range-size) var(--range-focus),var(--range-thumb-bg-shadow)}.range:hover>input:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--range-size) var(--range-focus-hover),var(--range-thumb-bg-shadow)}.range>input:active::-webkit-slider-thumb{box-shadow:0 0 0 var(--range-size) var(--range-active) ! important,var(--range-thumb-bg-shadow)}.range>input:disabled::-webkit-slider-runnable-track{background-color:hsla(var(--text-hsl, 0, 0%, 0%),var(--alpha-disabled))}.range>input:disabled::-webkit-slider-thumb{pointer-events:none;transform:scale(2.5)}.range>input::-moz-range-track{margin:var(--range-spacing) 0;border-radius:9999px;width:100%;height:var(--range-size);background-color:var(--range-track)}.range>input:not(.bg-hue)::-moz-range-track{background-image:linear-gradient(to right,var(--range-color) 0%,var(--range-color) var(--range-bg-gradient-percentage),transparent var(--range-bg-gradient-percentage))}.range>input::-moz-range-thumb{-webkit-appearance:none;appearance:none;-moz-appearance:none;border:none;border-radius:9999px;height:var(--range-size);width:var(--range-size);background-color:var(--range-color);transform:scale(6);-moz-transition:box-shadow .2s;transition:box-shadow .2s}.range>input::-moz-range-progress{border-radius:9999px;height:var(--range-size);background-color:var(--range-color)}.range:hover>input:hover::-moz-range-thumb{box-shadow:0 0 0 var(--range-size) var(--range-hover)}.range>input:focus::-moz-range-thumb{box-shadow:0 0 0 var(--range-size) var(--range-focus-hover)}.range:hover>input:focus::-moz-range-thumb{box-shadow:0 0 0 var(--range-size) var(--range-focus)}.range>input:active::-moz-range-thumb{box-shadow:0 0 0 var(--range-size) var(--range-active)!important}.range>input:disabled::-moz-range-track{background-color:hsla(var(--text-hsl, 0, 0%, 0%),var(--alpha-disabled))}.range>input:disabled::-moz-range-thumb{transform:scale(2.5)}.range>input::-moz-focus-outer{border:none}.range>input::-ms-track{box-sizing:border-box;margin:var(--range-spacing) 0;border:none;border-radius:9999px;padding:0 var(--range-spacing);width:100%;height:var(--range-size);background-color:transparent}.range>input:not(.bg-hue)::-ms-track{background-image:linear-gradient(to right,var(--range-color) 0%,var(--range-color) var(--bg-percentage),transparent var(--bg-percentage))}.range>input::-ms-fill-lower{border-radius:9999px;height:var(--range-size);background-color:var(--range-color)}.range>input::-ms-fill-upper{border-radius:9999px;height:var(--range-size);background-color:var(--range-track)}.range>input::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0 var(--range-spacing);border:none;border-radius:9999px;height:var(--range-size);width:var(--range-size);background-color:var(--range-color);transform:scale(6);-ms-transition:box-shadow .2s;transition:box-shadow .2s}.range:hover>input::-ms-thumb{box-shadow:0 0 0 var(--range-size) hsla(var(--range-color-h),var(--range-color-s),var(--range-color-l),.04)}.range>input:focus::-ms-thumb{box-shadow:0 0 0 var(--range-size) hsla(var(--range-color-h),var(--range-color-s),var(--range-color-l),var(--alpha-focus-hover))}.range:hover>input:focus::-ms-thumb{box-shadow:0 0 0 var(--range-size) hsla(var(--range-color-h),var(--range-color-s),var(--range-color-l),var(--alpha-focus))}.range>input:active::-ms-thumb{box-shadow:0 0 0 var(--range-size) var(--range-active)!important}.range>input:disabled::-ms-fill-lower{background-color:hsla(var(--text-hsl, 0, 0%, 0%),var(--alpha-disabled))}.range>input:disabled::-ms-fill-upper{background-color:hsla(var(--text-hsl, 0, 0%, 0%),var(--alpha-disabled));opacity:var(--alpha-disabled)}.range>input:disabled::-ms-thumb{transform:scale(2.5)}input.bg-hue::-webkit-slider-runnable-track{background-image:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}input.bg-hue::-moz-range-track{background-image:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}input.bg-hue::-ms-track{background-image:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.range-control{padding:var(--gap-2) var(--gap-4);border-radius:var(--border-radius-sm);background-color:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:var(--gap-4);-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:color .2s ease-out;height:var(--range-control-h);width:100%}.range-control .range{transition:color .2s ease-out}.range-control:hover,.range-control:hover .range{color:var(--font-color-hover)}.range-control.vertical{width:calc(var(--gap-8) + (var(--gap-1) + 2px) * 2);flex-direction:column;padding:var(--gap-2) 2px;gap:var(--gap-1);height:auto}.range-control.vertical:has(>output) output{order:-1}.range-control .range.vertical{transform:rotate(-90deg);min-width:var(--range-min-h);margin:calc(var(--range-min-h) / 2 - var(--gap-2)) 0}.knob{--knob-track-color: var(--control-bg);--knob-thumb-color: var(--control-hover);--knob-point-color: var(--control-color);--knob-progress-color: var(--control-progress);--knob-transition-duration: .6s;position:relative;height:var(--knob-size);width:var(--knob-size);min-width:initial;margin-top:1rem}.knob .range{display:inline-flex;height:100%;width:100%;min-width:100%;overflow:hidden;position:absolute;top:0;left:0;z-index:1}.knob:hover{--knob-thumb-color: var(--control-focus);--knob-transition-duration: .2s}.knob:hover output{display:inline-block}.knob:active{--knob-thumb-color: var(--control-active)}.knob input[type=range]{--range-size: calc(var(--knob-size) / 5);--knob-range-w: calc(var(--knob-size) * 8 - var(--range-size) / 2);--knob-range-translate-x: calc(-50% + var(--range-size) / 10);--knob-range-translate-y: calc( var(--knob-range-w) / -2 + var(--bg-percentage) / 100 * var(--knob-range-w) - var(--knob-size) / 2 );position:absolute;left:50%;top:50%;height:var(--knob-size);width:calc(var(--knob-range-w) + var(--range-size));transform:translate(var(--knob-range-translate-x, -50%),var(--knob-range-translate-y, -50%)) rotate(-90deg);opacity:0;cursor:ns-resize;-webkit-user-select:none;-moz-user-select:none;user-select:none}.knob output{display:none;position:absolute;bottom:calc(100% + var(--gap-1));left:50%;transform:translate(-50%);font-size:11px;line-height:1;pointer-events:none}.knob svg{width:100%;height:100%;position:relative;z-index:0}.source-logo{grid-area:logo;display:flex;justify-self:end}.source-logo a{border-radius:var(--border-radius);box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);display:flex;aspect-ratio:1/1;padding:var(--gap-1);height:var(--logo-size);width:var(--logo-size);border-radius:9999px;background-color:var(--surface);transition:opacity .2s ease-out}.source-logo a:hover{opacity:.9}.source-logo .primary{fill:var(--primary);stroke:var(--primary)}.source-logo .secondary{fill:var(--secondary);stroke:var(--secondary)}.source-controls{box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);padding:var(--gap-2) var(--gap-4);border-radius:var(--border-radius);background-color:var(--surface);min-width:var(--logo-size);margin-left:auto;align-self:end}.btn-toggle-source{grid-area:source}.eq-control-type-radio{font-size:12px}.eq-control.vertical{position:relative}.eq-control.vertical .range:not(.range-in-knob)+output{--range-output-position-y: calc( var(--bg-percentage) / 100 * var(--range-min-w) );display:none;position:absolute;bottom:calc(var(--range-output-position-y, 50%) + var(--btn-size-xl) + var(--gap-4));font-size:11px;line-height:1;pointer-events:none}.eq-control.vertical .range:not(.range-in-knob):hover+output{display:block}.eq-controls{display:flex;grid-area:eq;overflow-y:hidden;overflow-x:auto}.eq-controls.disabled .section{opacity:.4;pointer-events:none}.eq-controls .scroll{display:grid;grid-template-rows:1fr;grid-auto-flow:column;gap:2px;width:100%;justify-content:space-between;padding-left:var(--gap-2);padding-right:var(--gap-2)}.eq-canvas{border-radius:var(--border-radius-sm);background-color:var(--surface);margin-left:var(--gap-2);margin-right:var(--gap-2);grid-area:canvas;height:var(--eq-canvas-h);max-width:100%;position:relative;z-index:0;overflow:hidden}.eq-canvas-grid{position:absolute;top:0;left:0;z-index:1}.eq-canvas-bars{position:absolute;top:0;left:0;z-index:2}.eq-canvas-control{position:absolute;top:0;left:0;z-index:3}.eq{padding-left:0;padding-right:0}.vfx-presets{position:absolute;top:var(--gap-2);left:var(--gap-2)}.vfx-presets.active form{transform:translate(0)}.vfx-presets .btn-toggle{position:relative;z-index:1}.vfx-presets form{border-radius:var(--border-radius);background-color:var(--surface-darkest);position:absolute;top:var(--btn-xl);left:0;padding:var(--gap-2);transition:transform .3s ease-out;transform:translate(-150%)}.vfx-presets .radio{margin-bottom:var(--gap-2)}.vfx-presets .radio:nth-last-of-type(2){margin-bottom:0}.vfx-presets .radio__label{margin-left:var(--gap-1)}.audio-player{--canvas-h: calc(var(--h-full) - var(--aside-h) - var(--gap-4) * 2);--audio-controls-w: calc( var(--track-img-size) + var(--logo-size) + var(--gap-4) * 3 );--main-w: calc(var(--audio-controls-w) + var(--gap-4));display:grid;grid-template-areas:"canvas main" "aside main";grid-template-rows:var(--canvas-h) var(--aside-h);grid-template-columns:1fr var(--main-w);padding:var(--gap-4);position:relative;height:var(--h-full);width:100%;margin:0;transition:opacity .3s ease-out .15s,grid-template-columns .2s ease-out,grid-template-rows .2s ease-out;background-color:var(--surface)}@media (max-width: 768px){.audio-player{--canvas-h: calc(var(--h-full) - var(--aside-h) - var(--gap-2) * 2);--main-w: 100%;padding:var(--gap-2);grid-template-areas:"canvas" "aside" "main" "main";grid-template-columns:1fr;grid-template-rows:var(--h-third) var(--aside-h) repeat(2,minmax(min-content,50%));overflow-y:auto;overflow-x:hidden;margin-top:0!important}}body.dragging .audio-player{overflow:hidden}.audio-player.aside-collapsed{--aside-h: 0rem;overflow:hidden}@media (max-width: 768px){.audio-player.aside-collapsed{--aside-h: 4rem;grid-template-rows:var(--canvas-h) var(--aside-h) repeat(2,minmax(min-content,50%))}.audio-player.aside-collapsed.main-collapsed{--aside-h: 0rem}}.audio-player.piano-collapsed{--aside-h: calc(4rem + var(--gap-1))}@media (max-width: 768px){.audio-player.piano-collapsed{margin-top:calc(var(--gap-4) * -1)}}.audio-player.main-collapsed{--main-w: 0rem}@media (max-width: 768px){.audio-player.main-collapsed{--main-w: 100%}}hr{color:hsla(var(--text-hsl),var(--alpha-line));border-color:currentColor;border-top:1px solid;height:0}.aside-canvas{box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);padding:var(--gap-2) var(--gap-4);border-radius:var(--border-radius);background-color:var(--surface);grid-area:canvas;display:grid;grid-template-rows:100%;grid-template-columns:100%}.\!canvas{display:flex!important;position:relative!important;height:100%!important;width:100%!important;overflow:hidden!important}.canvas{display:flex;position:relative;height:100%;width:100%;overflow:hidden}.\!canvas canvas{min-height:100%!important;max-width:100%!important;display:block!important}.canvas canvas{min-height:100%;max-width:100%;display:block}.\!canvas picture{display:flex!important;position:absolute!important;top:0!important;left:0!important;opacity:.08!important;z-index:-1!important;height:100%!important;width:100%!important}.canvas picture{display:flex;position:absolute;top:0;left:0;opacity:.08;z-index:-1;height:100%;width:100%}.\!canvas picture img{-o-object-fit:cover!important;object-fit:cover!important;-o-object-position:center top!important;object-position:center top!important;width:100%!important;filter:blur(8px)!important}.canvas picture img{-o-object-fit:cover;object-fit:cover;-o-object-position:center top;object-position:center top;width:100%;filter:blur(8px)}.\!canvas>.btn-toggle{position:absolute!important;z-index:2!important}.canvas>.btn-toggle{position:absolute;z-index:2}.\!canvas>.btn-toggle-main{right:0!important;top:0!important;transform-origin:right top!important}.canvas>.btn-toggle-main{right:0;top:0;transform-origin:right top}@media (max-width: 768px){.\!canvas>.btn-toggle-main{display:none!important;pointer-events:none!important}.canvas>.btn-toggle-main{display:none;pointer-events:none}}.\!canvas>.btn-toggle-main.active .icon{transform:scaleX(-1)!important}.canvas>.btn-toggle-main.active .icon{transform:scaleX(-1)}.\!canvas>.btn-toggle-aside{left:0!important;bottom:0!important;transform-origin:left bottom!important}.canvas>.btn-toggle-aside{left:0;bottom:0;transform-origin:left bottom}@media (max-width: 768px){.aside-collapsed.main-collapsed .canvas>.btn-toggle-aside{display:none;pointer-events:none}.aside-collapsed.main-collapsed .\!canvas>.btn-toggle-aside{display:none!important;pointer-events:none!important}}.\!canvas>.btn-toggle-aside.active .icon{transform:scaleY(-1)!important}.canvas>.btn-toggle-aside.active .icon{transform:scaleY(-1)}.\!canvas>.btn-toggle-fullscreen{right:0!important;bottom:0!important;padding:var(--gap-2)!important;transform-origin:right bottom!important}.canvas>.btn-toggle-fullscreen{right:0;bottom:0;padding:var(--gap-2);transform-origin:right bottom}.main{display:grid;grid-area:main;max-width:var(--main-w);margin-left:var(--gap-4);position:relative;transition:max-width var(--layout-anim-dur-ms) ease-out}@media (max-width: 768px){.main{max-height:99999px;margin-left:0;margin-top:var(--gap-2);transform:translateY(0);transition:max-height 1ms ease-in-out,transform calc(var(--layout-anim-dur-ms) * 2) ease-out;transition-delay:0ms,calc(var(--layout-anim-dur-ms) * -1)}.aside-collapsed .main{max-height:0px;margin-top:0;transform:translateY(100%);transition-delay:var(--layout-anim-dur-ms),0ms}}.audio-controls{--playlist-max-h: 1fr;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4,max-content) var(--playlist-max-h) max-content;grid-auto-flow:row;grid-template-areas:"header" "track-title" "track-controls" "sound-controls" "playlist" "footer";gap:var(--gap-4);height:100%;width:var(--audio-controls-w);position:absolute;left:0;top:0;transition:opacity var(--layout-anim-dur-ms) ease-out;opacity:1}@media (max-width: 768px){.audio-controls{--playlist-max-h: max-content;width:100%;gap:var(--gap-2);position:static;grid-template-areas:"track-title" "track-controls" "header" "sound-controls" "playlist" "footer"}}.main-collapsed .audio-controls{opacity:0}@media (max-width: 768px){.main-collapsed .audio-controls{opacity:1}.aside-collapsed .audio-controls{opacity:0}.piano-collapsed .audio-controls{margin-top:calc(var(--gap-2) * -1)}}@media (min-width: 992px) and (max-height: 799px){.audio-player{--audio-controls-w: calc( var(--track-img-size) + var(--logo-size) + var(--gap-4) * 3 + var(--track-img-size) + var(--logo-size) + var(--gap-4) * 4 );--main-w: calc(var(--audio-controls-w) + var(--gap-4))}.audio-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(4,max-content) minmax(0,1fr);grid-template-areas:"header playlist" "track-title playlist" "track-controls playlist" "sound-controls playlist" "footer playlist";min-width:0}.audio-controls>.track-playlist{min-width:0}}.header{grid-area:header;height:var(--header-h);max-height:var(--header-h);transition:max-height .2s ease-out,opacity .2s ease-out;position:relative}.header-content{display:grid;grid-template-areas:"picture logo" "picture source";justify-content:space-between;gap:var(--gap-4);grid-template-columns:1fr max-content;grid-template-rows:1fr max-content;place-items:start;position:absolute;top:0;left:0;width:100%;height:var(--header-h)}.header.collapsed{overflow:hidden;max-height:0;opacity:0}.footer{box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);padding:var(--gap-2) var(--gap-4);border-radius:var(--border-radius);background-color:var(--surface);grid-area:footer;text-align:right;font-size:12px}.footer a{color:var(--primary);text-decoration:none}.footer a:hover{text-decoration:underline}.aside-visual{display:grid;grid-template-columns:1fr;grid-template-rows:max-content 1fr;grid-area:aside;gap:var(--gap-4);max-height:var(--aside-h);position:relative;z-index:1;margin-top:var(--gap-4);transition:max-height var(--layout-anim-dur-ms) ease-out}@media (max-width: 768px){.aside-visual{margin-top:var(--gap-2);gap:var(--gap-2)}.main-collapsed .aside-visual{margin-top:0;max-height:0}}.piano-collapsed .aside-visual{grid-template-rows:max-content}.visual-controls{transition:opacity .3s ease-in;opacity:1}.aside-collapsed .visual-controls{opacity:0;transition-duration:var(--layout-anim-dur-ms);transition-timing-function:ease-out}@media (max-width: 768px){.aside-collapsed .visual-controls{opacity:1}}.color-controls{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:max-content;gap:var(--gap-4)}.color-controls .range-control{border-radius:var(--border-radius);box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95)}.piano{border-radius:var(--border-radius);box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);--white-key-bg: hsla(0, 0%, 100%, 1);--black-key-bg: var(--body-bg);--playing-key-bg: var(--primary);--active-key-bg: var(--secondary);height:var(--piano-h);max-height:var(--piano-h);transition:max-height .2s ease-out,opacity .3s ease-out;position:relative}.piano.collapsed{overflow:hidden;height:0;max-height:0;opacity:0;pointer-events:none}@media (max-width: 768px){.piano{margin-bottom:var(--gap-2)}}.piano-content{background-color:var(--surface);border-radius:var(--border-radius);box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);height:var(--piano-h);padding:var(--gap-2);display:grid;gap:1px;grid-template-columns:max-content 1fr;grid-template-rows:max-content;position:absolute;top:0;left:0}.piano-svg{width:auto;height:100%;max-height:100%;flex-shrink:0}.piano-svg:hover rect{transition-duration:.2s}.piano-svg:not(:hover) rect.active:not(:hover){fill:var(--active-key-bg)}.piano-svg:has(rect.playing) rect.active:not(:hover){fill:var(--white-key-bg)}.piano-svg rect{cursor:pointer;transition:fill .3s ease-out}.piano-svg rect:hover{fill:var(--playing-key-bg)!important;transition-duration:.2s}.piano-svg rect.white{fill:var(--white-key-bg)}.piano-svg rect.black{fill:var(--black-key-bg)}.piano-svg rect.playing{fill:var(--playing-key-bg)!important}.piano-controls{border-radius:var(--border-radius);background-color:var(--surface);flex-shrink:0;padding:var(--gap-2)}.piano-controls .radio>span{display:inline-flex;align-items:center;font-size:12px}.piano-controls .radio>span .icon{margin-right:var(--gap-1)}@media (max-width: 768px){.piano-controls .radio>span .radio__label{display:none}}.piano-keys{display:flex;flex-shrink:0;overflow:hidden}.piano-keys-container{border-radius:var(--border-radius);background-color:var(--surface);padding:var(--gap-2);overflow:hidden}.btn-toggle-piano{grid-area:piano}::-webkit-scrollbar{height:var(--scrollbar-size, 8px);width:var(--scrollbar-size, 8px)}::-webkit-scrollbar-button{background-repeat:no-repeat}::-webkit-scrollbar-button:horizontal:decrement{background-position:center top}::-webkit-scrollbar-button:horizontal:increment{background-position:center bottom}::-webkit-scrollbar-button:horizontal:start:increment{display:none}::-webkit-scrollbar-button:horizontal:end:decrement{display:none}::-webkit-scrollbar-button:vertical:decrement{background-position:left center}::-webkit-scrollbar-button:vertical:increment{background-position:right center}::-webkit-scrollbar-button:vertical:start:increment{display:none}::-webkit-scrollbar-button:vertical:end:decrement{display:none}.theme--dark ::-webkit-scrollbar-button{height:var(--scrollbar-btn-size, 12px);width:var(--scrollbar-size, 12px)}.theme--dark ::-webkit-scrollbar-button:horizontal:decrement{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="rgba(255, 255, 255, 0.08)" d="M20,24V0L1.2,12L20,24z" /></svg>')}.theme--dark ::-webkit-scrollbar-button:horizontal:decrement:hover{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="rgba(255, 255, 255, 0.16)" d="M20,24V0L1.2,12L20,24z" /></svg>')}.theme--dark ::-webkit-scrollbar-button:horizontal:increment{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="rgba(255, 255, 255, 0.08)" d="M4,0v24l18.9-12L4,0z" /></svg>')}.theme--dark ::-webkit-scrollbar-button:horizontal:increment:hover{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="rgba(255, 255, 255, 0.16)" d="M4,0v24l18.9-12L4,0z" /></svg>')}.theme--dark ::-webkit-scrollbar-button:vertical:decrement{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="rgba(255, 255, 255, 0.08)" d="M0,20h24L12,1.2L0,20z" /></svg>')}.theme--dark ::-webkit-scrollbar-button:vertical:decrement:hover{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="rgba(255, 255, 255, 0.16)" d="M0,20h24L12,1.2L0,20z" /></svg>')}.theme--dark ::-webkit-scrollbar-button:vertical:increment{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="rgba(255, 255, 255, 0.08)" d="M24,4H0l12,18.9L24,4z" /></svg>')}.theme--dark ::-webkit-scrollbar-button:vertical:increment:hover{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="rgba(255, 255, 255, 0.16)" d="M24,4H0l12,18.9L24,4z" /></svg>')}.theme--dark ::-webkit-scrollbar-track{background-color:#ffffff0a}.theme--dark ::-webkit-scrollbar-thumb{background-color:#ffffff0a}.theme--dark ::-webkit-scrollbar-thumb:hover{background-color:#ffffff14}.theme--dark ::-webkit-resizer{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="rgba(255, 255, 255, 0.24)" d="M5,6.41L6.41,5L17,15.59V9H19V19H9V17H15.59L5,6.41Z" /></svg>')}::-webkit-scrollbar-track{border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{border-radius:var(--border-radius)}::-webkit-scrollbar-corner{background-color:transparent;background-image:none;border:0}::-webkit-resizer{background-color:transparent;background-size:calc(var(--scrollbar-size, 8px) * 2)}.theme--dark ::-webkit-resizer{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.3)" d="M5,6.41L6.41,5L17,15.59V9H19V19H9V17H15.59L5,6.41Z"/></svg>')}@-moz-document url-prefix(){html{scrollbar-width:auto}.theme--dark{scrollbar-color:rgba(255,255,255,.08) rgba(255,255,255,.08)}.theme--light{scrollbar-color:rgba(255,255,255,.05) rgba(255,255,255,.05)}}.track-title{box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);padding:var(--gap-2) var(--gap-4);border-radius:var(--border-radius);background-color:var(--surface);--track-search-h: 2.5rem;color:var(--font-color-high);width:100%;display:grid;grid-area:track-title;grid-template-areas:"toggle" "search";grid-template-columns:1fr;grid-template-rows:max-content max-content;-webkit-user-select:none;-moz-user-select:none;user-select:none}.track-title:hover{color:var(--font-color-hover)}.header-collapsed .track-title{margin-top:calc(var(--gap-4) * -1)}@media (max-width: 768px){.header-collapsed .track-title{margin-top:0}}.track-title h2{margin:0;display:flex;flex-direction:column;flex-wrap:wrap;font-weight:400;font-size:1.125rem;line-height:1.2;padding-bottom:var(--gap-1)}.track-title h2 .divider{margin-left:var(--gap-2);margin-right:var(--gap-2)}.track-controls{background-color:var(--surface);border-radius:var(--border-radius);box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);padding-top:0;padding-bottom:var(--gap-2);grid-area:track-controls;display:grid;grid-template-columns:max-content 1fr max-content;grid-template-rows:max-content max-content;grid-template-areas:"progress progress progress" "piano buttons source";gap:var(--gap-2);position:relative;place-items:center}.track-controls .loader{opacity:0}.track-controls.loading>.track-buttons{opacity:0}.track-controls.loading>.track-progress{opacity:0}.track-controls.loading>.loader{opacity:1}.track-progress{border-radius:var(--border-radius);--range-size: 4px;display:flex;background-color:var(--surface-light);align-items:center;justify-content:center;grid-area:progress;gap:var(--gap-4);font-size:.875rem;padding:0 var(--gap-4);color:var(--font-color-high)}.track-buttons{grid-area:buttons;display:flex;justify-content:center;align-items:center;gap:var(--gap-2)}.track-picture{box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);padding:var(--gap-2) var(--gap-4);border-radius:var(--border-radius);background-color:var(--surface);grid-area:picture}.track-picture picture{display:flex;aspect-ratio:1/1;max-height:var(--track-img-size);max-width:var(--track-img-size)}.track-picture picture img{-o-object-fit:cover;object-fit:cover;-o-object-position:center top;object-position:center top;width:100%}.track-playlist{background-color:var(--surface);border-radius:var(--border-radius);box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);grid-area:playlist;padding:var(--gap-2);padding-right:0;margin:0;color:hsla(var(--text-hsl, hsl(0, 0%, 80%)),.5);height:100%;overflow:hidden;display:grid;grid-template-rows:max-content 1fr;-webkit-user-select:none;-moz-user-select:none;user-select:none}.track-playlist h3{line-height:1;font-size:14px;font-weight:700;text-transform:uppercase;padding:var(--gap-2);padding-top:var(--gap-1)}.track-playlist-wrap{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;height:100%;overflow-x:hidden;overflow-y:auto}.track-playlist ol{list-style-type:none;padding-inline-start:0;margin:0;margin-right:var(--gap-2);transition:all .18s ease-in-out;perspective:100px}.track-item{border-radius:var(--border-radius);background-color:var(--surface);font-size:12px;line-height:1.25;margin-bottom:2px;transition:color .2s ease-out;display:grid;grid-template-areas:"time label" "time search";grid-template-columns:max-content minmax(min-content,1fr);grid-template-rows:repeat(2,max-content);grid-auto-flow:column;padding:var(--gap-2);padding-right:2px;transform-origin:top;position:relative}.track-item.animate{opacity:0;animation:animate-in var(--playlist-anim-dur-ms) ease forwards;animation-delay:var(--playlist-anim-delay-ms)}.track-item.moving{animation:moving var(--playlist-anim-dur-ms) ease-out forwards}.track-item:hover{color:#fff}.track-item:hover .btn-magnify{opacity:1}.track-item .track-toggle{grid-area:label;display:inline-grid;grid-template-areas:"artist toggle" "song toggle";grid-template-columns:minmax(min-content,1fr) max-content;grid-template-rows:repeat(2,max-content);-moz-column-gap:var(--gap-2);column-gap:var(--gap-2);row-gap:var(--gap-1)}.track-item .track-toggle strong{align-self:end}.track-item time{grid-area:time;font-size:11px;margin-right:var(--gap-3)}.track-item .btn-magnify{align-self:center;grid-area:toggle;opacity:0}.track-toggle{cursor:pointer;display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none}.track-toggle .btn-magnify{align-self:center}.track-toggle:has(input:checked){color:#fff}.track-toggle:has(input:checked) .btn-magnify{color:#fff;opacity:1}.track-toggle:has(input:checked)+.track-search{opacity:1;z-index:0;pointer-events:initial;max-height:var(--track-search-h, 2rem);margin-top:var(--gap-2)}.track-search{grid-area:search;align-self:center;transition:opacity .15s ease-out;overflow:hidden;opacity:0;z-index:-1;max-height:0;pointer-events:none;transition:max-height .15s ease-out,opacity .15s ease-out}.track-search .btn-group{padding:0;justify-content:space-between;align-items:center}.sound-controls{background-color:var(--surface);border-radius:var(--border-radius);box-shadow:0 .125rem 1rem -.25rem hsla(var(--primary-h),var(--saturation-h),var(--secondary-l),.4),0 .5rem 2rem -.75rem hsla(var(--primary-h),0%,0%,.95);display:grid;-moz-column-gap:1px;column-gap:1px;row-gap:1px;grid-area:sound-controls;grid-template-columns:1fr var(--volume-w);grid-template-rows:repeat(2,max-content);grid-template-areas:"header volume" "eq volume"}.sound-controls .eq-control .control.range{display:none}.sound-controls:has(#eq-sliders:checked) .eq-control .control.range{display:inline-flex}@media (max-width: 768px){.header-collapsed .sound-controls{margin-top:calc(var(--gap-2) * -1)}}.sound-controls-header{padding:var(--gap-2) var(--gap-4);border-radius:var(--border-radius);background-color:var(--surface);grid-area:header;display:flex;gap:var(--gap-4);align-items:center;justify-content:space-between}.sound-control{border-radius:var(--border-radius);background-color:var(--surface);display:grid;grid-template-columns:100%;grid-template-rows:repeat(2,max-content);grid-template-areas:"canvas" "eq";row-gap:var(--gap-2);padding:var(--gap-2);-webkit-user-select:none;-moz-user-select:none;user-select:none;text-align:center;justify-content:center;align-content:space-between}.sound-control .section{display:grid;text-align:center;place-items:center;grid-template-columns:repeat(2,max-content);grid-template-rows:repeat(2,max-content);row-gap:var(--gap-1);-moz-column-gap:2px;column-gap:2px;transition:color .2s ease-out,opacity .2s ease-out}.sound-control .section:only-child{-moz-column-gap:0;column-gap:0}.sound-control .section:hover .label{color:var(--font-color-hover);opacity:.8}.sound-control .label{line-height:1;font-size:14px;font-weight:700;transition:color .2s ease-out;grid-column:1/span 2;text-transform:uppercase;color:var(--font-color-sub)}.sound-control .unit{font-size:12px;font-weight:700;line-height:1;pointer-events:none;color:var(--font-color-sub)}.sound-control .min,.sound-control .max{font-size:11px;line-height:1;pointer-events:none;color:var(--font-color-sub)}.sound-control .sliders{display:flex}.volume-control{--range-size: 4px;--range-min-h: var(--volume-h);width:var(--volume-w);grid-area:volume;justify-content:center;display:flex;flex-direction:column;justify-content:flex-end}.volume-control:hover output{color:var(--font-color-hover)}.volume-control .range{--bg-percentage: var(--volume)}.volume-control .section{grid-template-columns:1fr}.volume-control output{font-weight:500;color:var(--font-color-high)}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.my-2{margin-top:.5rem;margin-bottom:.5rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-4{margin-right:1rem}.mr-auto{margin-right:auto}.block{display:block}.grid{display:grid}.hidden{display:none}.h-3{height:.75rem}.h-6{height:1.5rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.rounded{border-radius:.25rem}.border{border-width:1px}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}