.headline-sm,.title-lg{font-weight:var(--fw-400)}.top-bar,body{min-width:250px}.player,body{min-height:100vh}.music-banner,.player,body.modalActive{overflow:hidden}.player-control .play,.player-control .toggle.active{color:var(--primary)}.overlay,.range-fill{left:0;pointer-events:none}.btn-icon,.range{outline:0;cursor:pointer}.btn-icon,.range,button{cursor:pointer}:root{--eerie-black_a95:hsla(204, 9%, 11%, 0.95);--eerie-black_a50:hsla(204, 9%, 11%, 0.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%, 0.5);--black_a20:hsla(0, 0%, 0%, 0.2);--light-sky-blue_a8:hsla(200, 100%, 73%, 0.08);--light-sky-blue_a12:hsla(200, 100%, 73%, 0.12);--silver-sand_a8:hsla(208, 12%, 78%, 0.08);--silver-sand_a12:hsla(208, 12%, 78%, 0.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);--gradient:linear-gradient(180deg, hsla(204, 9%, 11%, 0.90) 60%, transparent 120%);--ff-inter:'Inter',sans-serif;--headline-sm:2.4rem;--title-lg:2.2rem;--label-lg:1.4rem;--label-md:1.2rem;--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:200ms cubic-bezier(0.2, 0, 0, 1);--transition-2:300ms cubic-bezier(0.2, 0, 0, 1)}*,::after,::before{margin:0;padding:0;box-sizing:border-box}li{list-style:none}.btn-icon.loading .loader,.btn-icon.play.loading .loader,.player-control .btn-icon .default-icon,.player-control .btn-icon.active .active-icon,a,button,img,input,span{display:block}a{text-decoration:none;color:inherit}img{height:auto}button,input{background:0 0;border:none;font:inherit}input{width:100%}html{font-family:var(--ff-inter);font-size:10px;scroll-behavior:smooth}body{background-color:var(--black);color:var(--on-background);font-size:1.6rem;line-height:1.5;background-image:url("../images/poster-1.jpg");background-size:150%;background-repeat:no-repeat;background-position:top;overflow:overlay}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-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;user-select:none}.player-control.wrapper,.volume-control.wrapper,.wrapper{display:flex;align-items:center}.title-lg{font-size:var(--title-lg)}.btn-icon{color:var(--on-surface-variant);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)}.label-lg,.label-md{font-weight:var(--fw-500)}.label-lg{font-size:var(--label-lg);letter-spacing:.1px}.label-md{font-size:var(--label-md);letter-spacing:.5px}.top-bar{position:fixed;top:0;left:0;background-color:var(--background-opacity);width:100%;height:64px;padding-inline:16px;justify-content:space-between;backdrop-filter:blur(50px);box-shadow:var(--shadow-1);z-index:2}.music-banner,.player-control .play{background-color:var(--surface-variant)}.logo{gap:12px}.btn-icon.loading .active-icon,.btn-icon.loading .default-icon,.btn-icon.play.loading .active-icon,.btn-icon.play.loading .default-icon,.loader,.player-control .btn-icon .active-icon,.player-control .btn-icon.active .default-icon,.playlist,.volume{display:none}.player{--padding:24px;background-image:var(--gradient);padding:var(--padding);padding-block-start:calc(64px + var(--padding));display:flex;text-align:center;backdrop-filter:blur(30px)}.player .container{width:100%;display:grid;grid-template-rows:1fr max-content;gap:24px}.music-banner{aspect-ratio:1/1;max-width:400px;margin-inline:auto;align-self:center;border-radius:var(--radius-24)}.label-wrapper{justify-content:center;opacity:.8;margin-block:8px 4px}.label-wrapper span:first-child::after{content:"|";display:inline-block;margin-inline:4px}.seek-control{margin-block-end:20px}.range::-webkit-slider-runnable-track{appearance:none;background-color:var(--surface-variant);border-radius:var(--radius-pill)}.range-fill{content:"";position:absolute;top:0;width:0;height:6px;background-color:var(--primary);border-radius:var(--radius-pill)}.overlay,.playlist{top:0;height:100vh;transition:var(--transition-2)}.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 .play.active{background-color:var(--primary);color:var(--on-primary)}.playlist{position:fixed;right:-180px;width:180px;background-color:var(--background);padding:28px;border-top-left-radius:var(--radius-16);border-bottom-left-radius:var(--radius-16);box-shadow:var(--shadow-2);overflow-y:overlay;visibility:hidden;z-index:4}.playlist:hover::-webkit-scrollbar-thumb{background-color:var(--surface-variant)}.playlist.active{transform:translateX(-180px);visibility:visible}.music-list{display:grid;gap:20px}.music-item{position:relative;border-radius:var(--radius-12);background-color:var(--surface-variant);overflow:hidden;margin-bottom:15px;text-align:center}.music-item .item-icon{position:absolute;inset:0;background-color:var(--eerie-black_a50);display:grid;place-items:center;opacity:0}.music-item.playing .item-icon,.range:hover{opacity:1}.music-item .item-icon .material-symbols-rounded{color:var(--primary);font-size:3rem}.music-item:is(:hover,:focus-visible,:active,.playing){outline:1px solid var(--primary)}.overlay{position:fixed;width:100%;background-color:var(--black);opacity:0;z-index:3}.overlay.active{pointer-events:all;opacity:.5}@media (min-width:575px){body{background-size:100%}.player{justify-content:center}.player .container{max-width:540px}}@media (min-width:992px){:root{--headline-sm:4.2rem;--label-lg:2.2rem}body{background-size:40% 100%;background-position:left center}article{display:flex}.btn-icon{width:54px;height:54px}.btn-icon .material-symbols-rounded{font-size:2.8rem}.overlay,.top-bar-actions{display:none}.player{--padding:48px;text-align:left;flex-grow:1;align-items:center;backdrop-filter:blur(100px)}.player .container{max-width:1200px;grid-template-columns:0.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;padding-block-start:48px;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;margin-bottom:12px}.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{min-width:max-content;gap:8px}.playlist{position:static;visibility:visible;border-radius:0;box-shadow:none;flex-shrink:0}.playlist.active{transform:unset}.music-item:is(:hover,:focus-visible,:active,.playing){outline:2px solid var(--primary)}.music-item .item-icon .material-symbols-rounded{font-size:3.6rem}}@media (min-width:1200px){.playlist{padding:32px;width:220px}.music-list{gap:28px}}.range-wrapper{position:relative;height:25px}.range{appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:5px;background:#ddd;opacity:.7;-webkit-transition:.2s;transition:opacity .2s;border-radius:5px;margin-top:9px}.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#2daae2;cursor:pointer}.range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#2daae2;cursor:pointer}.range::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;animate:0.2s;box-shadow:1px 1px 1px #000;background:#3071a9;border-radius:5px;border:.2px solid #010101}.range::-moz-range-track{width:100%;height:5px;cursor:pointer;animate:0.2s;box-shadow:1px 1px 1px #000;background:#3071a9;border-radius:5px;border:.2px solid #010101}.btn-icon{position:relative;display:flex;justify-content:center;align-items:center;width:50px;height:50px;background-color:transparent;border:none}.loader{position:absolute;width:100%;height:100%;border:7px solid rgba(255,255,255,3);border-top-color:#15253F;border-radius:50%;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.controls-wrapper{display:flex;align-items:center;gap:10px}.range-wrapper{width:auto;flex-grow:1}.music-item.current{background-color:red}.m-art{margin-top:12px;margin-bottom:12px}