#root{min-height:100vh;margin:0;padding:0}body{min-height:100vh;display:flex;justify-content:center;background:linear-gradient(0deg,#080808,#057ae0);color:#fff}.header h1{font-size:3.5rem;margin-top:20px;margin-bottom:0}.header p{font-size:1rem;opacity:.7;margin-bottom:4px}.toggleplay{display:flex;justify-content:center}.toggleplay button{width:50px;height:50px;border-radius:50%;border:none;background:#fff;color:#111;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px #0006;transition:transform .15s ease,box-shadow .15s ease}.playlistInfoText{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:6px}.playlistInfoText p{margin:0}.playlist-wrapper{margin-top:0;max-height:200px;overflow-y:auto;background-color:#ffffff4d;border-radius:16px;box-shadow:0 10px 20px #1a18184d;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}.playlist-wrapper::-webkit-scrollbar{width:6px}.playlist-wrapper::-webkit-scrollbar-track{background:transparent}.playlist-wrapper::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:4px}.playlist-wrapper::-webkit-scrollbar-thumb:hover{background:#fff6}.playlist{height:100px;list-style:none}.playlist li button{padding:5px 1px;margin-top:5px;background:transparent;border:none;text-align:left;font-size:1rem;opacity:.7;cursor:pointer}.playlist li button:hover{opacity:1;transform:translate(5px)}.playlist li button:active{transform:scale(.98)}.playlist li button.active:after{content:"♪";margin-left:10px;font-size:1rem}.time{display:flex;justify-content:space-between;margin:1.5rem 1rem;font-size:1rem}.seek{width:100%;height:4px;margin-top:30px}.record{width:250px;height:250px;margin:20px auto}.record img{width:100%;height:100%;border:5px solid white;border-radius:50%;box-shadow:0 0 5px 10px #fff3;animation:spin 4s linear infinite;animation-play-state:paused}.record.spinning img{animation-play-state:running}.track-title{text-align:center;margin-top:40px;font-size:1.5rem;font-weight:700;opacity:.9}.links{color:#fff}.links h5{margin-bottom:0}.links ul{margin-top:0}.links ul li{list-style:none;opacity:.7}.links ul li:hover{opacity:1}.links ul li:active{transform:scale(.98)}.links ul li a{color:#fff;font-size:small}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}