@layer reset,root,base,utils,range,main,mediaqueries;@layer reset{*,*:before,*:after{box-sizing:border-box}*{margin:0;min-width:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}}@layer root{:root{--spacing: .25rem;--clr-gray-50: hsl(0 0% 96%);--clr-gray-100: hsl(0 0% 51%);--clr-gray-150: hsla(0 0% 50%);--clr-gray-200: hsl(0 0% 20%);--clr-black-50: hsl(0 0% 3%);--clr-blue-50: hsl(196 100% 47%);--clr-primary: var(--clr-blue-50);--g-body-bg: var(--clr-gray-50);--g-body-fg: var(--clr-black-50);--g-container-w: 69.75rem;--g-font-family: "Poppins", system-ui, sans-serif;--g-heading-leading: var(--g-leading);--g-leading: calc(1em + .5rem) ;--g-margin: calc(var(--spacing) * 4);--g-obj-pos: top center;--g-selection-bg: var(--g-body-fg);--g-selection-fg: hsl(0 0% 100%);--g-transition: .3s cubic-bezier(.4, 0, .2, 1)}}@layer base{*:focus{outline:0}::selection{background:var(--g-selection-bg);color:var(--g-selection-fg);text-shadow:none}body{-webkit-font-smoothing:antialiased;background-color:var(--g-body-bg);color:var(--g-body-fg);font-family:var(--g-font-family);margin:unset;min-block-size:100dvh;position:relative}html{line-height:var(--g-leading);scroll-behavior:smooth}a{color:inherit;cursor:pointer;text-decoration:none}img{block-size:auto}figure,fieldset{all:unset}hr{background-color:currentColor;block-size:1px;border:unset;display:block;margin:unset;padding:unset}mark{background:transparent;color:inherit}button,input,select,textarea{font:inherit}textarea{resize:vertical}h1,h2,h3,h4,h5,h6{line-height:var(--g-heading-leading)}p{-webkit-hyphens:auto;hyphens:auto}}@layer utils{.u-container{margin-inline:auto;max-inline-size:var(--g-container-w);padding-inline:var(--g-margin);inline-size:100%}.u-grid\:center{display:grid;place-items:center}.u-icon{--width: auto;block-size:auto;inline-size:var(--width);max-inline-size:100%}}@layer range{input[type=range]{--block-size: .1875rem;--progress-color: var(--clr-primary);--thumb-border: 0;--thumb-color: var(--clr-primary);--thumb-height: 1rem;--thumb-radius: 100vmax;--thumb-width: 1rem;--track-border: 0;--track-color: hsl(0 0% 0% / .25);--track-radius: 100vmax;-webkit-appearance:none;appearance:none;background:transparent;inline-size:100%;display:block}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{block-size:var(--block-size);border-radius:var(--track-radius);border:var(--track-border);box-shadow:0 0 #000,0 0 #0d0d0d;cursor:pointer;inline-size:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--thumb-color);block-size:var(--thumb-height);border-radius:var(--thumb-radius);border:var(--thumb-border);box-shadow:0 0 #000,0 0 #0d0d0d;cursor:pointer;inline-size:var(--thumb-width);margin-block-start:calc((var(--block-size) - var(--thumb-height)) / 2)}input[type=range]::-moz-range-progress{background-color:var(--progress-color);block-size:var(--block-size);border-radius:var(--track-radius)}input[type=range]::-moz-range-track{block-size:var(--block-size);border-radius:var(--track-radius)}input[type=range]::-moz-range-thumb{background:var(--thumb-color);block-size:var(--thumb-height);border-radius:var(--thumb-radius);border:var(--thumb-border);box-shadow:0 0 #000,0 0 #0d0d0d;cursor:pointer;inline-size:var(--thumb-width)}input[type=range]::-ms-fill-lower{background-color:var(--progress-color);border-radius:var(--track-radius)}input[type=range]::-ms-fill-upper{border-radius:var(--track-radius)}input[type=range]::-ms-thumb{background:var(--thumb-color);block-size:var(--thumb-height);border-radius:var(--thumb-radius);border:var(--thumb-border);box-shadow:0 0 #000,0 0 #0d0d0d;cursor:pointer;inline-size:var(--thumb-width)}input[type=range]:focus::-ms-fill-lower{background:var(--progress-color)}}@layer main{body{padding-block-end:8.375rem;padding-block-start:4.25rem}.main-logo{display:inline-block;margin-block-end:5.625rem;margin-inline-start:-1.25rem}.main-logo__image{block-size:auto;display:block;max-inline-size:17rem}.main-content-header{display:grid;gap:2rem;grid-template-columns:repeat(4,1fr);margin-block-end:2.5rem}.main-content-header__item{background-color:#fff;border-radius:1.875rem;border:1px solid hsl(0 0% 100% / .96);box-shadow:-1.375rem -1.375rem 3.125rem #ffffffd1,1.375rem 1.375rem 3.125rem #00000021;display:grid;min-block-size:9.8125rem;padding-inline:var(--g-margin);place-items:center}.main-content-header__item.is-active{border-color:#94e2ff;box-shadow:-1.375rem -1.375rem 3.125rem #ffffffd1,1.375rem 1.375rem 3.125rem #0096cc36}.main-content-header__image{--width: auto;block-size:auto;inline-size:var(--width);max-inline-size:100%}.main-content-body{background-color:#ffffffed;border-radius:2.875rem;border:1px solid hsl(0 0% 100%);box-shadow:-1.375rem -1.375rem 3.125rem #ffffffd1,1.375rem 1.375rem 3.125rem #00000021;display:grid;grid-template-columns:1.605fr 3fr;min-block-size:31.25rem;overflow:hidden}.main-content-body__sidebar{background-color:#fff}.main-footer{align-items:center;color:var(--clr-gray-150);display:flex;flex-direction:column;font-size:.875rem;gap:1rem;margin-block-start:5.5rem;text-align:center}.main-footer__copyright{margin-block-start:.5rem}.main-content-body__content{background:linear-gradient(129.26deg,#0000000d 8.81% 91.19%);display:grid;padding:var(--g-margin);padding-top:90px;place-content:flex-start center}.main-content-player{align-items:center;color:var(--clr-gray-200);display:flex;flex-direction:column;inline-size:18.125rem;max-inline-size:18.125rem}.main-content-player__title{display:block;font-size:1.1875rem;font-weight:600;margin-block-end:1.5rem}.main-content-player-bag{align-items:center;background-color:#00b0f029;border-radius:100vmax;color:var(--clr-gray-100);display:inline-flex;font-size:.75rem;font-weight:500;gap:.5rem;margin-bottom:1rem;padding:.25rem .8rem}.main-content-player-bag__icon{block-size:auto;inline-size:.875rem}.main-content-player-info{align-items:center;display:flex;flex-direction:column}.main-content-player-info__label{font-size:1.125rem;font-weight:600}.main-content-player-info__value{font-size:1.125rem;font-weight:400}.main-content-player-progress{inline-size:100%}.main-content-player-progress__header{display:flex;gap:var(--g-margin);justify-content:space-between;margin-block-end:.25rem}.main-content-player-buttons{align-items:center;display:flex;gap:calc(var(--g-margin) * 1.5);justify-content:center}.main-content-player__buttons{margin-block-start:1.25rem}.main-content-player-volume{align-items:center;display:flex;gap:var(--g-margin);inline-size:100%;margin-block-start:1.25rem;max-inline-size:15.875rem}.main-content-player-volume__input{flex-grow:1}.main-content-body__sidebar{padding-block:2.5rem;padding-inline:2.5rem}.main-content-list__item{align-items:center;cursor:pointer;display:flex;gap:.6rem;padding:0}.main-content-list__icon,.main-content-list__duration{flex-shrink:0}.main-content-list__icon,.main-content-player-buttons--prev,.main-content-player-buttons--play,.main-content-player-buttons--next{color:var(--clr-primary)}.main-content-player-buttons--random,.main-content-player-buttons--repeat,.main-content-player-volume__icon{color:var(--clr-gray-100)}.main-content-list__content{display:flex;flex-direction:column;flex-grow:1;line-height:1.7}.main-content-list__title{font-size:1rem;font-weight:700}.main-content-list__subtitle,.main-content-list__duration{color:var(--clr-gray-100);font-size:.75rem;font-weight:500}.main-content-list{display:flex;flex-direction:column;gap:.75rem;max-block-size:42rem;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none}.main-content-list::-webkit-scrollbar{display:none}.main-content-player-volume__icon{flex-shrink:0}}#time-range-input,#volume-range-input{height:3px}.main-content-player-volume,.main-content-player-volume__mute,.main-content-player-volume__mute p{text-align:center;display:inline-block}.main-content-player-volume__mute svg{color:var(--clr-blue-50);width:22px;display:inline-block;width:47px;border:1px solid var(--clr-blue-50);border-radius:50%;padding:14px}@layer mediaqueries{@media (width <= 73.125rem){.main-logo{margin-inline-start:0}}@media (width <= 48rem){.main-logo__image{max-inline-size:12rem}body{padding-block-end:calc(var(--g-margin) * 3);padding-block-start:calc(var(--g-margin) * 3)}.main-content-header{gap:var(--g-margin);margin-block-end:calc(var(--g-margin) * 1.5)}.main-content-header__item{border-radius:var(--g-margin);min-block-size:unset;padding-block:var(--g-margin)}.main-content-body{border-radius:var(--g-margin)}.main-logo{display:table;margin-block-end:calc(var(--g-margin) * 2.5);margin-inline:auto}.main-footer{margin-block-start:calc(var(--g-margin) * 3)}.main-content-body{display:flex;flex-direction:column-reverse;gap:unset}.main-content-body__content{padding:calc(var(--g-margin) * 2)}.main-content-body__sidebar{padding-block:calc(var(--g-margin) * 1.5);padding-inline:calc(var(--g-margin) * 2)}}}