*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}.scene,body,html{background:#f5f5f7}.scene{align-items:center;display:flex;justify-content:center;min-height:100vh;padding:clamp(1rem,4vw,3rem) clamp(.75rem,3vw,2rem)}@keyframes cardIn{0%{opacity:0;transform:translateY(32px) scale(.97)}60%{opacity:1;transform:translateY(-4px) scale(1.004)}to{opacity:1;transform:translateY(0) scale(1)}}.card{animation:cardIn .55s cubic-bezier(.22,.68,0,1.2) both;background:#fff;border:1px solid #e4e4e7;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.09),0 40px 80px rgba(0,0,0,.06);font-family:IBM Plex Mono,monospace;overflow:hidden;width:clamp(320px,90vw,420px)}.card-header{background:#fafafa;border-bottom:1px solid #f0f0f2;justify-content:space-between;padding:12px 18px 10px}.card-header,.header-left{align-items:center;display:flex}.header-left{gap:8px}.header-title{color:#71717a;font-size:11px;letter-spacing:.5px}.pool-ball{align-items:center;background:radial-gradient(circle at 35% 30%,#fff 0,#1a1a1a 55%,#000 100%);border-radius:50%;box-shadow:inset -2px -2px 5px rgba(0,0,0,.45),inset 1px 1px 4px hsla(0,0%,100%,.35),0 2px 6px rgba(0,0,0,.18);cursor:default;display:flex;flex-shrink:0;height:28px;justify-content:center;position:relative;width:28px}.pool-ball:before{background:hsla(0,0%,100%,.2);content:"";height:6px;left:5px;top:5px;transform:rotate(-30deg);width:10px}.ball-stripe,.pool-ball:before{border-radius:50%;position:absolute}.ball-stripe{inset:0;overflow:hidden}.ball-stripe:after,.ball-stripe:before{background:hsla(0,0%,100%,.92);content:"";height:38%;left:0;position:absolute;right:0}.ball-stripe:before{top:18%}.ball-stripe:after{bottom:18%}.ball-n{color:#fff;font-family:IBM Plex Mono,monospace;font-size:9px;font-weight:600;letter-spacing:0;text-shadow:0 1px 3px rgba(0,0,0,.8);z-index:2}.now-wrap{border-bottom:1px solid #f0f0f2;padding:18px 18px 14px}.now-top{gap:14px;margin-bottom:16px}.cover,.now-top{align-items:center;display:flex}.cover{background:#f4f4f5;border:1px solid #e4e4e7;border-radius:10px;flex-shrink:0;font-size:26px;height:clamp(60px,16vw,72px);justify-content:center;overflow:hidden;position:relative;transition:transform .2s ease;width:clamp(60px,16vw,72px)}.cover:hover{transform:scale(1.04)}.cover img{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.now-info{flex:1;min-width:0}.now-label{color:#a1a1aa;font-size:8px;letter-spacing:1.5px;margin-bottom:4px;text-transform:uppercase}.now-track{color:#18181b;font-size:clamp(14px,4vw,16px);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-artist,.now-track{font-family:IBM Plex Sans,sans-serif}.now-artist{color:#71717a;font-size:12px;margin-top:3px}.waveform{align-items:center;cursor:pointer;display:flex;gap:2px;height:28px;margin-bottom:10px}.wv{background:#e4e4e7;border-radius:2px;flex:1;min-height:2px;transition:background .15s}.wv.played{background:#18181b}.prog-row{align-items:center;display:flex;gap:8px;margin-bottom:14px}.prog-bg{background:#e4e4e7;cursor:pointer;flex:1}.prog-bg,.prog-fill{border-radius:99px;height:3px;position:relative}.prog-fill{background:#18181b;transition:width .2s linear;width:0}.prog-fill:after{background:#18181b;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px #e4e4e7;content:"";height:11px;position:absolute;right:-5px;top:-5px;width:11px}.t{color:#a1a1aa;font-family:IBM Plex Mono,monospace;font-size:9px;min-width:30px}.t-r{text-align:right}.controls{gap:10px;margin-bottom:14px}.cbtn,.controls{align-items:center;display:flex;justify-content:center}.cbtn{background:none;border:none;border-radius:7px;color:#71717a;cursor:pointer;padding:6px;transition:color .15s,background .15s}.cbtn:hover{background:#f4f4f5;color:#18181b}.cbtn svg{height:16px;width:16px}.cbtn.main{background:#18181b;border:none;border-radius:10px;color:#fff;height:40px;transition:background .15s,transform .1s;width:40px}.cbtn.main:hover{background:#27272a;color:#fff;transform:scale(1.06)}.cbtn.main:active{transform:scale(.96)}.cbtn.main svg{height:15px;width:15px}.vol-wrap{align-items:center;display:flex;gap:6px;margin-left:4px}.vol-wrap input[type=range]{-webkit-appearance:none;appearance:none;background:#e4e4e7;border-radius:99px;cursor:pointer;height:3px;outline:none;width:clamp(48px,12vw,64px)}.vol-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#18181b;border-radius:50%;cursor:pointer;height:12px;width:12px}.vol-pct{color:#a1a1aa;font-size:9px;min-width:26px}.pl-scroll{max-height:160px;overflow-y:auto;scrollbar-color:#e4e4e7 transparent;scrollbar-width:thin}.pl-scroll::-webkit-scrollbar{width:3px}.pl-scroll::-webkit-scrollbar-thumb{background:#e4e4e7;border-radius:99px}.pl-item{align-items:center;border-bottom:.5px solid #f4f4f5;cursor:pointer;display:flex;gap:9px;padding:7px 18px;transition:background .1s}.pl-item:last-child{border-bottom:none}.pl-item.active,.pl-item:hover{background:#fafafa}.pl-num{color:#d4d4d8;flex-shrink:0;font-family:IBM Plex Mono,monospace;font-size:9px;text-align:right;width:13px}.pl-dot{animation:pulse 1.2s ease-in-out infinite;background:#18181b;border-radius:50%;flex-shrink:0;height:6px;width:6px}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.pl-thumb{align-items:center;background:#f4f4f5;border:1px solid #e4e4e7;border-radius:5px;display:flex;flex-shrink:0;font-size:13px;height:28px;justify-content:center;overflow:hidden;width:28px}.pl-thumb img{height:100%;object-fit:cover;width:100%}.pl-info{flex:1;min-width:0}.pl-name{color:#18181b;font-family:IBM Plex Sans,sans-serif;font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl-item:not(.active) .pl-name{color:#52525b;font-weight:400}.pl-artist{color:#a1a1aa;font-family:IBM Plex Sans,sans-serif;font-size:9px;margin-top:1px}.pl-dur{color:#d4d4d8;flex-shrink:0;font-family:IBM Plex Mono,monospace;font-size:9px}.pl-header{background:#fafafa;border-bottom:.5px solid #f0f0f2;color:#a1a1aa;font-size:9px;letter-spacing:1px;padding:8px 18px 4px;text-transform:uppercase}.card-foot{align-items:center;background:#fafafa;border-top:1px solid #f0f0f2;display:flex;justify-content:space-between;padding:8px 18px}.foot-txt{color:#a1a1aa;font-size:9px;letter-spacing:.4px}@media(max-width:400px){.now-wrap{padding:14px 14px 12px}.pl-item{padding:6px 14px}.pl-header{padding:8px 14px 4px}.card-foot{padding:7px 14px}.card-header{padding:10px 14px 8px}.controls{gap:7px}}