:root{--eerie-black_a95: hsla(204, 9%, 11%, .5);--eerie-black_a50: hsla(204, 9%, 11%, .5);--eerie-black: hsl(204, 9%, 11%);--gainsboro: hsl(225, 7%, 89%);--charcoal: hsl(203, 9%, 28%);--silver-sand: hsl(208, 12%, 78%);--light-sky-blue: hsl(200, 100%, 73%);--prussian-blue: hsl(196, 100%, 14%);--black: hsl(0, 0%, 0%);--black_a50: hsla(0, 0%, 0%, .5);--black_a20: hsla(0, 0%, 0%, .2);--light-sky-blue_a8: hsla(200, 100%, 73%, .08);--light-sky-blue_a12: hsla(200, 100%, 73%, .12);--prussian-blue_a15: hsl(196, 100%, 14%, .15);--silver-sand_a8: hsla(208, 12%, 78%, .08);--silver-sand_a12: hsla(208, 12%, 78%, .12);--background: var(--eerie-black);--background-opacity: var(--eerie-black_a95);--on-background: var(--gainsboro);--surface-variant: var(--charcoal);--on-surface-variant: var(--silver-sand);--on-surface-variant-hover: var(--light-sky-blue_a8);--on-surface-variant-focus: var(--light-sky-blue_a12);--primary: var(--light-sky-blue);--on-primary: var(--prussian-blue);--new-color: #CD4549;--new-shadow: #B1A7A7;--gradient: linear-gradient(180deg, hsla(204, 9%, 11%, .9) 60%, transparent 120%);--ff-inter: "Inter", sans-serif;--headline-sm: 2.2rem;--title-lg: 2.2rem;--label-lg: 1.7rem;--label-md: 1.4rem;--fw-400: 400;--fw-500: 500;--shadow-1: 0 1px 4px 1px var(--black_a20);--shadow-2: 0 1px 4px 1px var(--black_a50);--radius-24: 24px;--radius-16: 16px;--radius-12: 12px;--radius-pill: 100px;--radius-circle: 50%;--transition-1: .2s cubic-bezier(.2, 0, 0, 1);--transition-2: .3s cubic-bezier(.2, 0, 0, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;word-wrap:break-word}li{list-style:none}a,img,span,input,button{display:block}a{color:inherit;display:inline;color:var(--light-sky-blue)}img{height:auto}input,button{background:none;border:none;font:inherit}input{width:100%}button{cursor:pointer}html{font-family:var(--ff-inter);font-size:10px;scroll-behavior:smooth}body{color:var(--on-background);font-size:1.6rem;line-height:1.5;min-height:100vh;min-width:250px;background-size:150%;background-repeat:no-repeat;background-position:top;overflow:overlay}body.modalActive{overflow:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--radius-pill)}body:hover::-webkit-scrollbar-thumb{background-color:var(--surface-variant)}.material-symbols-rounded{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" -25,"opsz" 24;width:1em;height:1em;overflow:hidden;-webkit-user-select:none;user-select:none}.wrapper{display:flex;align-items:center}.title-lg{font-size:var(--title-lg);font-weight:var(--fw-400)}.btn-icon{color:var(--on-surface-variant);width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-circle)}.btn-icon:hover{background-color:var(--on-surface-variant-hover)}.btn-icon:is(:focus,:focus-visible){background-color:var(--on-surface-variant-focus)}.img-cover{width:100%;height:100%;object-fit:cover}.headline-sm{font-size:var(--headline-sm);font-weight:var(--fw-400)}.label-lg,.label-md{font-weight:var(--fw-500)}.label-lg{font-size:var(--label-lg);letter-spacing:.1px;margin-top:5px;padding:5px 0}.label-md{font-size:var(--label-md);letter-spacing:.5px}#sidebarMenu{height:171px;position:fixed;overflow:none;width:94%;z-index:100;transform:translateY(-171px)}.main-content-wrapper a{width:100%;height:40px;display:block;background:var(--prussian-blue);text-align:center;padding-top:8px;border:1px solid var(--silver-sand_a8);color:var(--on-background);text-decoration:none;cursor:pointer;border-radius:3px}.main-content-wrapper a.active-menu{color:var(--light-sky-blue)}#sidebarMenu::-webkit-scrollbar{width:12px}#sidebarMenu::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #0000004d;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px}#sidebarMenu::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px #0000004d;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background:#0000002e;height:50px}.sidebarMenuInner{margin:0;padding:0;border-top:1px solid rgba(255,255,255,.1)}#sidebarMenu.burger-opened{transform:translatey(0);top:50px}input[type=checkbox]{transition:all .3s;box-sizing:border-box;display:none}.sidebarIconToggle{transition:all .3s;box-sizing:border-box;cursor:pointer;z-index:99;height:22px;width:22px;display:none;margin-top:5px}.spinner{transition:all .3s;box-sizing:border-box;position:absolute;height:3px;width:100%;background-color:var(--on-background)}.horizontal{transition:all .3s;box-sizing:border-box;position:relative;float:left;margin-top:3px}.diagonal.part-1{position:relative;transition:all .3s;box-sizing:border-box;float:left}.diagonal.part-2{transition:all .3s;box-sizing:border-box;position:relative;float:left;margin-top:3px}.burger-opened>.horizontal{transition:all .3s;box-sizing:border-box;opacity:0}.burger-opened>.diagonal.part-1{transition:all .3s;box-sizing:border-box;transform:rotate(135deg);margin-top:8px}.burger-opened>.diagonal.part-2{transition:all .3s;box-sizing:border-box;transform:rotate(-135deg);margin-top:-9px}.top-bar{position:fixed;top:0;left:0;min-width:250px;width:100%;height:64px;padding-inline:16px;justify-content:space-between;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);box-shadow:var(--shadow-1);z-index:2}.top-bar .sidebarIconToggle{display:block}.top-bar .left-menus{display:none}.top-bar .left-menus>a,.top-bar .language-menus>div{padding-right:10px;cursor:pointer}.top-bar .left-menus>a:hover,.top-bar .language-menus>div:hover{text-decoration:underline}.top-bar .left-menus>a.active-menu,.top-bar .language-menus>div.active-menu{color:var(--light-sky-blue)}.logo,.volume{display:none}.player{--padding: 24px;background-image:var(--gradient);padding:var(--padding);padding-block-start:calc(64px + var(--padding));min-height:100vh;display:flex;flex-direction:column;text-align:center;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);overflow:hidden}.player .container{width:100%;display:grid;gap:24px;margin-bottom:15%}.player .router-container{padding:24px;margin-bottom:24px;box-shadow:var(--shadow-1);background-color:var(--prussian-blue_a15);border-radius:10px;text-align:left}.music-banner{aspect-ratio:1/1;background-color:var(--surface-variant);margin-inline:auto;align-self:center;overflow:hidden;border-radius:10px}.label-wrapper{justify-content:center;opacity:.8;margin-block:8px 4px}.label-wrapper span:first-child:after{content:"|";display:inline-block;margin-inline:4px}.artist{opacity:.6;margin-block-end:36px}.seek-control{margin-block-end:20px}.range-wrapper{position:relative}.range{appearance:none;cursor:pointer}.range::-webkit-slider-runnable-track{appearance:none;background-color:var(--surface-variant);height:6px;width:100%;border-radius:var(--radius-pill)}.range-fill{content:"";position:absolute;top:0;left:0;width:0;height:6px;background-color:var(--primary);border-radius:var(--radius-pill);pointer-events:none}.range::-webkit-slider-thumb{appearance:none;background-color:var(--primary);width:16px;height:16px;margin-block-start:-5px;border-radius:var(--radius-pill);transition:var(--transition-1)}.range::-webkit-slider-thumb:hover{box-shadow:0 0 0 12px var(--on-surface-variant-hover)}.range::-webkit-slider-thumb:is(:focus,:focus-visible){box-shadow:0 0 0 12px var(--on-surface-variant-focus)}.duration-label{justify-content:space-between;margin-block-start:12px}.player-control{justify-content:space-evenly}.player-control .toggle.active{color:var(--primary)}.player-control .play{background-color:var(--surface-variant);color:var(--primary)}.player-control .play.active{background-color:var(--primary);color:var(--on-primary)}.player-control .btn-icon.active .default-icon,.player-control .btn-icon .active-icon{display:none}.player-control .btn-icon .default-icon,.player-control .btn-icon.active .active-icon{display:block}.playlist{position:fixed;height:7%;width:100vw;bottom:0;background-color:var(--background-opacity);padding:0;box-shadow:var(--shadow-1);overflow-y:overlay;transition:var(--transition-2);z-index:4}.playlist:hover::-webkit-scrollbar-thumb{background-color:var(--surface-variant)}.playlist.active{transform:translate(-180px);visibility:visible}.music-list{padding:10px;gap:20px;display:flex;align-items:flex-start;justify-content:center}.music-list>li{width:100px}.music-item{position:relative;border-radius:var(--radius-12);background-color:var(--surface-variant);overflow:hidden}.music-item .item-icon{position:absolute;background-color:var(--eerie-black_a50);color:var(--gainsboro);bottom:0;right:3px;font-size:11px;border-radius:3px}.album-container{position:relative}.is-new-album{position:absolute;top:8px;right:16px;color:var(--new-color);text-shadow:1px 1px 1px var(--new-shadow)}.is-new-album-mini{position:absolute;top:0;right:6px;color:var(--new-color);text-shadow:1px 1px 1px var(--new-shadow);font-size:10px}.music-item.playing .item-icon{opacity:1}.music-item .item-icon .material-symbols-rounded{color:var(--primary);font-size:3rem}.music-item:is(:hover,:focus-visible,:active,.playing),.music-item-active{outline:1px solid var(--primary)}.overlay{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:var(--black);opacity:0;pointer-events:none;transition:var(--transition-2);z-index:3}.overlay.active{pointer-events:all;opacity:.5}.music-links{display:flex;justify-content:center;flex-wrap:wrap;gap:5px}.music-links .music-link{padding:5px;height:40px;width:40px}.music-links .music-link img{width:32px}.music-links .music-link img:hover{width:34px}@media (min-width: 575px){body{background-size:100%}.player{justify-content:flex-start}.logo{display:none}.playlist{height:120px}.top-bar .left-menus{display:flex}.top-bar .sidebarIconToggle{display:none}}@media (min-width: 992px){:root{--headline-sm: 3.6rem;--label-lg: 2.2rem}body{background-size:40% 100%;background-position:left center}article{display:block}.btn-icon{width:54px;height:54px}.btn-icon .material-symbols-rounded{font-size:2.8rem}.player{--padding: 48px;text-align:left;flex-grow:1;align-items:center;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px)}.player .container{max-width:1200px;grid-template-columns:.8fr 1fr;grid-template-rows:1fr;gap:48px;max-height:500px;height:100%}.music-banner{aspect-ratio:unset;max-width:max-content;width:100%;height:100%}.music-content{display:flex;flex-direction:column;min-width:100%}.music-content :is(.headline-sm,.label-lg,.label-md){max-width:85%}.label-wrapper{justify-content:flex-start;margin-block-end:8px}.artist{--label-md: 1.8rem}.song{--label-md: 1.6rem}.total{--label-md: 1.6rem;margin-top:10px}.seek-control{margin-block-start:auto;display:grid;grid-template-columns:1fr 150px;align-items:center;gap:24px}.volume{display:flex;align-items:center;gap:4px;margin-block-start:-30px}.volume .btn-icon{flex-shrink:0}.volume .range-fill{width:100%}.player-control{margin-inline-end:174px;min-width:max-content;gap:8px}.player .container{margin-bottom:0}.logo{position:relative;top:auto;left:auto;transform:none;display:flex;align-items:center;justify-content:space-between}.logo .logo-separator{width:auto;font-size:20px;padding:0 10px 5px}.logo .band-logo{max-height:20px}.music-links{margin-top:5px;justify-content:left}}@media (min-width: 1200px){.player .router-container{max-width:1200px;min-width:1200px}.logo{position:relative;top:auto;left:auto;transform:none}.logo .band-logo{max-height:25px}.logo .logo-separator{font-size:30px}}@media (min-width: 1600px){.logo{float:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.logo .band-logo{max-height:30px}.logo .logo-separator{font-size:40px}}.icon{width:16px;display:inline;cursor:pointer;vertical-align:middle}.text-block{margin-top:10px}.ok-icon{margin-left:5px}