:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;min-width:320px}button{all:unset;cursor:pointer}.ap-card{position:relative;width:min(440px,92vw);padding:clamp(24px,6vw,40px);border-radius:28px;background:#ffffff0f;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 40px #00000080,inset 0 1px #ffffff1a;color:#e8e8f0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-user-select:none;user-select:none;overflow:hidden}.ap-card:before{content:"";position:absolute;inset:0;border-radius:28px;background:linear-gradient(135deg,rgba(160,100,255,.08) 0%,transparent 60%);pointer-events:none}.ap-artwork{position:relative;width:clamp(100px,28vw,130px);height:clamp(100px,28vw,130px);margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.ap-artwork--playing .ap-ring{animation-play-state:running}.ap-ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(180,120,255,.35);animation:ring-pulse 2.4s ease-out infinite paused}.ap-ring-2{inset:-16px;border-color:#b478ff2e;animation-delay:.8s}@keyframes ring-pulse{0%{transform:scale(1);opacity:1}to{transform:scale(1.18);opacity:0}}.ap-cover-img{width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 6px 28px #00000080}.ap-cover-placeholder{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#6b35c8,#c026d3);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 28px #6b35c880}.ap-cover-placeholder svg{width:44%;height:44%;color:#ffffffe6}.ap-artwork--playing .ap-cover-img{animation:art-spin 18s linear infinite}@keyframes art-spin{to{transform:rotate(360deg)}}.ap-info{text-align:center;margin-bottom:20px}.ap-title{font-size:clamp(1rem,4vw,1.2rem);font-weight:700;color:#fff;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.ap-artist{font-size:clamp(.8rem,3vw,.9rem);color:#ffffff80;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-waveform{display:flex;align-items:center;justify-content:center;gap:3px;height:32px;margin-bottom:18px}.ap-waveform span{display:block;width:3px;border-radius:2px;background:#b478ff59;height:6px;transition:height .2s}.ap-waveform--playing span{background:linear-gradient(to top,#a855f7,#e879f9);animation:wave 1.2s ease-in-out infinite}.ap-waveform--playing span:nth-child(1){animation-delay:0s}.ap-waveform--playing span:nth-child(2){animation-delay:.06s}.ap-waveform--playing span:nth-child(3){animation-delay:.12s}.ap-waveform--playing span:nth-child(4){animation-delay:.18s}.ap-waveform--playing span:nth-child(5){animation-delay:.24s}.ap-waveform--playing span:nth-child(6){animation-delay:.3s}.ap-waveform--playing span:nth-child(7){animation-delay:.36s}.ap-waveform--playing span:nth-child(8){animation-delay:.42s}.ap-waveform--playing span:nth-child(9){animation-delay:.36s}.ap-waveform--playing span:nth-child(10){animation-delay:.3s}.ap-waveform--playing span:nth-child(11){animation-delay:.24s}.ap-waveform--playing span:nth-child(12){animation-delay:.18s}.ap-waveform--playing span:nth-child(13){animation-delay:.12s}.ap-waveform--playing span:nth-child(14){animation-delay:.06s}.ap-waveform--playing span:nth-child(15){animation-delay:0s}.ap-waveform--playing span:nth-child(16){animation-delay:.06s}.ap-waveform--playing span:nth-child(17){animation-delay:.12s}.ap-waveform--playing span:nth-child(18){animation-delay:.18s}.ap-waveform--playing span:nth-child(19){animation-delay:.24s}.ap-waveform--playing span:nth-child(20){animation-delay:.3s}@keyframes wave{0%,to{height:6px}50%{height:26px}}.ap-progress-wrap{margin-bottom:24px}.ap-time-row{display:flex;justify-content:space-between;font-size:.72rem;color:#fff6;margin-top:8px;font-variant-numeric:tabular-nums}.ap-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;outline:none;cursor:pointer;background:linear-gradient(to right,#a855f7 var(--p, 0%),rgba(255,255,255,.12) var(--p, 0%))}.ap-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #a855f780;transition:box-shadow .2s,transform .15s;cursor:grab}.ap-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px #a855f766;transform:scale(1.15)}.ap-slider:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.2)}.ap-slider::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #a855f780;cursor:grab}.ap-controls{display:flex;align-items:center;justify-content:center;gap:clamp(16px,6vw,32px);margin-bottom:24px}.ap-ctrl-btn{background:#ffffff12;border:1px solid rgba(255,255,255,.1);border-radius:50%;width:clamp(44px,12vw,52px);height:clamp(44px,12vw,52px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#ffffffb3;transition:background .2s,color .2s,transform .15s}.ap-ctrl-btn svg{width:22px;height:22px}.ap-ctrl-btn:hover{background:#a855f733;color:#fff;transform:scale(1.08)}.ap-ctrl-btn:active{transform:scale(.94)}.ap-ctrl-btn:disabled{opacity:.25;cursor:default;pointer-events:none}.ap-play-btn{background:linear-gradient(135deg,#a855f7,#ec4899);border:none;border-radius:50%;width:clamp(60px,16vw,72px);height:clamp(60px,16vw,72px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 24px #a855f78c,0 2px 8px #0000004d;transition:box-shadow .25s,transform .15s}.ap-play-btn svg{width:30px;height:30px}.ap-play-btn--playing{box-shadow:0 0 #a855f799,0 6px 24px #a855f78c,0 2px 8px #0000004d;animation:play-glow 2s ease-in-out infinite}@keyframes play-glow{0%,to{box-shadow:0 6px 24px #a855f78c,0 2px 8px #0000004d}50%{box-shadow:0 6px 36px #a855f7d9,0 2px 8px #0000004d}}.ap-play-btn:hover{transform:scale(1.07)}.ap-play-btn:active{transform:scale(.95)}.ap-volume-row{display:flex;align-items:center;gap:10px}.ap-vol-btn{background:none;border:none;cursor:pointer;color:#ffffff80;display:flex;align-items:center;flex-shrink:0;padding:4px;transition:color .2s;min-width:36px;min-height:36px;justify-content:center;border-radius:50%}.ap-vol-btn svg{width:20px;height:20px}.ap-vol-btn:hover{color:#fff;background:#ffffff14}.ap-vol-slider{height:4px;flex:1}@media(prefers-reduced-motion:reduce){.ap-artwork--playing .ap-cover-img,.ap-ring,.ap-waveform--playing span,.ap-play-btn--playing{animation:none}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}#root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background-color:#0d0d1a;background-image:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(120,40,200,.35) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(200,30,180,.25) 0%,transparent 55%),radial-gradient(ellipse 50% 60% at 60% 30%,rgba(30,80,220,.2) 0%,transparent 50%);animation:bg-shift 12s ease-in-out infinite alternate}@keyframes bg-shift{0%{background-position:0% 0%,100% 100%,60% 30%}to{background-position:5% 8%,95% 92%,55% 38%}}