@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
      
      :root{
        --pink: #ff74a4;
        --violet: #9f6ea3;
        --lightblack: #515C6F;
        --white: #ffffff;
        --darkwhite: #cecaca;
        --pinkshadow: #ffcbdd;
        --lightbshadow: rgba(0,0,0,0.15);
      }
     
      .wrapper{
        margin: 0 auto;
        width: 360px;
        padding: 25px 30px;
        overflow: hidden;
        position: relative;
        border-radius: 15px;
        background: var(--white);
        box-shadow: 0px 6px 15px var(--lightbshadow);
      }
      .wrapper i{
        cursor: pointer;
      }
      .top-bar, .progress-area .song-timer, 
      .controls, .music-list .header, .music-list ul li{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .top-bar i{
        font-size: 30px;
        color: var(--lightblack);
      }
      .top-bar i:first-child{
        margin-left: -7px;
      }
      .top-bar span{
        font-size: 18px;
        margin-left: -3px;
        color: var(--lightblack);
      }
      .img-area{
        width: 100%;
        height: 256px;
        overflow: hidden;
        margin-top: 25px;
        border-radius: 15px;
        box-shadow: 0px 6px 12px var(--lightbshadow);
      }
      .img-area img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .song-details{
        text-align: center;
        margin: 30px 0;
      }
      .song-details p{
        color: var(--lightblack);
      }
      .song-details .name{
        font-size: 21px;
      }
      .song-details .artist{
        font-size: 18px;
        opacity: 0.9;
        line-height: 35px;
      }
      .progress-area{
        height: 6px;
        width: 100%;
        border-radius: 50px;
        background: #f0f0f0;
        cursor: pointer;
      }
      .progress-area .progress-bar{
        height: inherit;
        width: 0%;
        position: relative;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 100%);
      }
      .progress-bar::before{
        content: "";
        position: absolute;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        top: 50%;
        right: -5px;
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
        background: inherit;
        transition: opacity 0.2s ease;
      }
      .progress-area:hover .progress-bar::before{
        opacity: 1;
        pointer-events: auto;
      }
      .progress-area .song-timer{
        margin-top: 2px;
      }
      .song-timer span{
        font-size: 13px;
        color: var(--lightblack);
      }
      .controls{
        margin: 40px 0 5px 0;
      }
      .controls i{
        font-size: 28px;
        user-select: none;
        background: linear-gradient(var(--pink) 0%, var(--violet) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .controls i:nth-child(2),
      .controls i:nth-child(4){
        font-size: 43px;
      }
      .controls #prev{
        margin-right: -13px;
      }
      .controls #next{
        margin-left: -13px;
      }
      .controls .play-pause{
        height: 54px;
        width: 54px;
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(var(--white) 0%, var(--darkwhite) 100%);
        box-shadow: 0px 0px 5px var(--pink);
      }
      .play-pause::before{
        position: absolute;
        content: "";
        height: 43px;
        width: 43px;
        border-radius: inherit;
        background: linear-gradient(var(--pink) 0%, var(--violet) 100%);
      }
      .play-pause i{
        height: 43px;
        width: 43px;
        line-height: 43px;
        text-align: center;
        background: inherit;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute;
      }
      
      .music-list{
        position: absolute;
        background: var(--white);
        width: 100%;
        left: 0;
        bottom: -55%;
        opacity: 0;
        pointer-events: none;
        z-index: 5;
        padding: 15px 30px;
        border-radius: 15px;
        box-shadow: 0px -5px 10px rgba(0,0,0,0.1);
        transition: all 0.15s ease-out;
      }
      .music-list.show{
        bottom: 0;
        opacity: 1;
        pointer-events: auto;
      }
      .header .row{
        display: flex;
        align-items: center;
        font-size: 19px;
        color: var(--lightblack);
      }
      .header .row i{
        cursor: default;
      }
      .header .row span{
        margin-left: 5px;
      }
      .header #close{
        font-size: 22px;
        color: var(--lightblack);
      }
      .music-list ul{
        margin: 10px 0;
        max-height: 260px;
        overflow: auto;
      }
      .music-list ul::-webkit-scrollbar{
        width: 0px;
      }
      .music-list ul li{
        list-style: none;
        display: flex;
        cursor: pointer;
        padding-bottom: 10px;
        margin-bottom: 5px;
        color: var(--lightblack);
        border-bottom: 1px solid #E5E5E5;
      }
      .music-list ul li:last-child{
        border-bottom: 0px;
      }
      .music-list ul li .row span{
        font-size: 17px;
      }
      .music-list ul li .row p{
        opacity: 0.9;
      }
      ul li .audio-duration{
        font-size: 16px;
      }
      ul li.playing{
        pointer-events: none;
        color: var(--violet);
      }