*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #110c0f;--card-bg: rgba(42, 24, 32, .92);--card-border: rgba(255, 160, 200, .28);--accent: #ff8fab;--accent-glow: rgba(255, 143, 171, .4);--accent2: #c9b1ff;--accent2-glow: rgba(201, 177, 255, .35);--accent3: #ffcf88;--rain: rgba(220, 190, 255, .38);--text: #fff0f8;--text-sub: #c4a0b8;--text-muted: #7a5a72;--progress-bg: rgba(255, 143, 171, .14);--radius: 28px}body{font-family:Quicksand,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;overflow:hidden}.app{display:flex;align-items:center;justify-content:center;min-height:100dvh;position:relative;overflow:hidden;padding:16px;background:radial-gradient(ellipse 80% 55% at 50% 15%,rgba(255,143,171,.09) 0%,transparent 70%),radial-gradient(ellipse 60% 50% at 15% 75%,rgba(201,177,255,.07) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 85% 80%,rgba(255,207,136,.05) 0%,transparent 60%),var(--bg)}.rain-scene{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.raindrop{position:absolute;top:0;width:1.5px;background:linear-gradient(to bottom,transparent,var(--rain) 60%,transparent);border-radius:1px;animation:rain-fall linear infinite}@keyframes rain-fall{0%{transform:rotate(10deg) translateY(-80px)}to{transform:rotate(10deg) translateY(110vh)}}.bokeh{position:fixed;border-radius:50%;pointer-events:none;filter:blur(22px);animation:bokeh-drift ease-in-out infinite alternate}.bokeh1{width:55px;height:55px;background:#ff8fab47;top:12%;left:8%;animation-duration:11s}.bokeh2{width:42px;height:42px;background:#c9b1ff40;top:22%;right:10%;animation-duration:14s;animation-delay:-4s}.bokeh3{width:70px;height:70px;background:#ffcf8824;bottom:22%;left:12%;animation-duration:18s;animation-delay:-9s}.bokeh4{width:35px;height:35px;background:#b4f0ff2e;bottom:28%;right:9%;animation-duration:9s;animation-delay:-2s}@keyframes bokeh-drift{0%{transform:translate(0) scale(1)}to{transform:translate(10px,16px) scale(1.18)}}.card{position:relative;z-index:1;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);padding:22px 26px 18px;width:100%;max-width:370px;overflow:visible;display:flex;flex-direction:column;box-shadow:0 0 0 1px #ffc8e612,0 -1px 28px #ff8fab1a,0 30px 80px #000000bf,inset 0 1px #ffdcf017}.card:before{content:"";position:absolute;top:-1px;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,143,171,.7),rgba(201,177,255,.5),transparent);border-radius:0 0 4px 4px;pointer-events:none}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.logo{display:flex;align-items:center;gap:7px}.logo-icon{font-size:17px;line-height:1;animation:rain-sway 3.5s ease-in-out infinite alternate;filter:drop-shadow(0 0 5px rgba(201,177,255,.7))}@keyframes rain-sway{0%{transform:rotate(-6deg) translateY(0)}to{transform:rotate(6deg) translateY(-2px)}}.logo-text{font-family:Chewy,cursive;font-size:20px;font-weight:400;letter-spacing:.08em;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 8px var(--accent-glow))}.logo-tag{font-family:Space Mono,monospace;font-size:9px;color:var(--text-muted);background:#ff8fab14;border:1px solid rgba(255,143,171,.18);border-radius:20px;padding:2px 8px;letter-spacing:.03em}.key-btn{background:none;border:1px solid rgba(255,143,171,.18);border-radius:10px;color:var(--text-muted);font-size:14px;padding:4px 9px;cursor:pointer;transition:all .2s;line-height:1.5}.key-btn:hover{border-color:var(--accent);color:var(--text)}.key-panel{background:#ff8fab0f;border:1px solid rgba(255,143,171,.15);border-radius:16px;padding:14px;margin-bottom:18px;font-size:12px}.key-hint{color:var(--text-sub);margin-bottom:10px;line-height:1.6}.key-link{color:var(--accent);font-family:Space Mono,monospace}.key-row{display:flex;gap:8px}.key-input{flex:1;background:#ffffff0a;border:1px solid rgba(255,143,171,.2);border-radius:10px;color:var(--text);font-size:12px;padding:7px 10px;outline:none;font-family:Space Mono,monospace}.key-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px #ff8fab1f}.key-save{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:10px;color:#fff;font-size:12px;font-weight:700;padding:7px 14px;cursor:pointer;transition:opacity .2s,transform .1s;font-family:Quicksand,sans-serif}.key-save:hover{opacity:.88;transform:scale(1.02)}.vinyl-stage{position:relative;width:200px;height:200px;margin:0 auto 22px;overflow:visible}.needle{position:absolute;top:10px;left:195px;width:4px;height:95px;transform-origin:top center;transform:rotate(-50deg);transition:transform 1s cubic-bezier(.34,1.56,.64,1);z-index:10;pointer-events:none}.needle.needle-on{transform:rotate(0)}.needle-pivot-dot{position:absolute;top:-5px;left:50%;transform:translate(-50%);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e8d0ff,#9a70d0);box-shadow:0 0 6px #c9b1ff99;z-index:2}.needle-arm{position:absolute;top:0;left:50%;transform:translate(-50%);width:3px;height:90px;background:linear-gradient(to bottom,#c9b1fff2,#a082dcd9,#ff8fabb3);border-radius:2px 2px 1px 1px;box-shadow:0 0 5px #c9b1ff4d}.needle-tip{position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 5px var(--accent-glow)}.artwork-wrap{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%}.artwork-wrap.spinning{animation:spin 22s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.artwork{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;border:2px solid rgba(255,143,171,.25)}.artwork-placeholder{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 40% 38%,#251435,#110a1e);border:2px solid rgba(255,143,171,.18);display:flex;align-items:center;justify-content:center}.vinyl-note{font-size:52px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.6}.vinyl-grooves{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 20px,rgba(0,0,0,.1) 21px,transparent 22px);z-index:1;pointer-events:none}.vinyl-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#2a1535,#110a1e);border:2px solid rgba(255,143,171,.3);z-index:2;pointer-events:none;display:flex;align-items:center;justify-content:center}.vinyl-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}.artwork-glow{position:absolute;top:-18px;right:-18px;bottom:-18px;left:-18px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow),transparent 65%);pointer-events:none;animation:glow-pulse 3s ease-in-out infinite;z-index:-1}@keyframes glow-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.06)}}.loading-pulse{animation:loading-pulse 1.5s ease-in-out infinite!important}@keyframes loading-pulse{0%,to{opacity:.3}50%{opacity:.7}}.track-info{position:relative;text-align:center;height:50px;margin-bottom:10px;display:flex;flex-direction:column;justify-content:center}.marquee-wrap{overflow:hidden;width:100%}.marquee-inner{display:inline-block;white-space:nowrap}@keyframes marquee-scroll{0%,15%{transform:translate(0)}85%,to{transform:translate(var(--tx, 0))}}.track-title{font-family:Chewy,cursive;font-size:19px;font-weight:400;letter-spacing:.04em;color:var(--text);line-height:1.3;margin-bottom:3px}.track-artist{font-size:13px;font-weight:500;color:var(--text-sub);line-height:1.4}.loading-track{position:absolute;bottom:-16px;left:0;right:0;font-size:11px;color:var(--text-muted);font-family:Space Mono,monospace;animation:fade-blink 1.2s ease-in-out infinite alternate}@keyframes fade-blink{0%{opacity:.3}to{opacity:.9}}.error-msg{font-size:13px;color:#ff9eb5;line-height:1.6}.skeleton{background:linear-gradient(90deg,#ff8fab0f 25%,#ff8fab29,#ff8fab0f 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;margin:0 auto}.skeleton-title{height:18px;width:66%;margin-bottom:8px}.skeleton-artist{height:13px;width:42%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.stats{display:flex;justify-content:center;gap:14px;margin-bottom:14px}.stat{font-size:11px;font-family:Space Mono,monospace;color:var(--text-muted);display:flex;align-items:center;gap:4px}.stat-icon{font-size:10px;color:var(--accent);opacity:.7}.queue-pos{color:var(--text-muted)}.progress-bar{position:relative;height:5px;background:var(--progress-bg);border-radius:3px;cursor:pointer;margin-bottom:5px;transition:height .2s}.progress-bar:hover{height:7px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;transition:width .2s linear}.progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);width:13px;height:13px;background:var(--accent);border-radius:50%;transition:transform .2s;box-shadow:0 0 8px var(--accent-glow)}.progress-bar:hover .progress-thumb{transform:translate(-50%,-50%) scale(1)}.time-row{display:flex;justify-content:space-between;font-size:10px;font-family:Space Mono,monospace;color:var(--text-muted);margin-bottom:18px}.controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:16px}.ctrl-btn{background:none;border:none;cursor:pointer;color:var(--text-sub);font-size:20px;padding:8px;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1}.ctrl-btn:hover:not(:disabled){color:var(--accent);transform:scale(1.15);filter:drop-shadow(0 0 6px var(--accent-glow))}.ctrl-btn:disabled{opacity:.22;cursor:not-allowed}.ctrl-skip{font-size:17px}.ctrl-play{width:60px;height:60px;font-size:20px;background:linear-gradient(145deg,var(--accent),#ff6b9d);color:#fff;border-radius:50%;box-shadow:0 0 0 1px #ff8fab59,0 0 28px #ff8fab66,0 6px 20px #00000080;transition:all .2s}.ctrl-play:hover:not(:disabled){transform:scale(1.09);box-shadow:0 0 0 1px #ff8fab73,0 0 42px #ff8fab8c,0 6px 20px #00000080;color:#fff;filter:none}.ctrl-play.playing{background:linear-gradient(145deg,var(--accent2),var(--accent));animation:play-pulse 2.5s ease-in-out infinite}@keyframes play-pulse{0%,to{box-shadow:0 0 28px #ff8fab66,0 6px 20px #00000080}50%{box-shadow:0 0 48px #ff8faba6,0 6px 20px #00000080}}.volume-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}.vol-icon{font-size:14px;min-width:18px;text-align:center}.volume-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:var(--progress-bg);border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 6px var(--accent-glow)}.volume-slider::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}.cozy-strip{display:flex;justify-content:center;align-items:center;gap:16px;padding:10px 0 8px;margin-bottom:12px;border-top:1px solid rgba(255,143,171,.1)}.cozy-item{font-size:18px;line-height:1;opacity:.65;transition:opacity .3s,transform .3s;cursor:default}.cozy-item:hover{opacity:1;transform:scale(1.2) translateY(-2px)}.cozy-item.cat{animation:cat-blink 6s ease-in-out infinite}@keyframes cat-blink{0%,88%,to{opacity:.65}92%{opacity:.12;transform:scaleY(.15)}}.cozy-item.sparkle{animation:twinkle 2.5s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.3;transform:scale(.85) rotate(-10deg)}to{opacity:.9;transform:scale(1.1) rotate(10deg)}}.card-footer{text-align:center;font-size:12px;color:var(--text-muted);font-family:Quicksand,sans-serif;font-weight:500;letter-spacing:.02em}.audius-brand{color:var(--accent);font-weight:700;text-decoration:none;transition:opacity .2s}.audius-brand:hover{opacity:.75}::-webkit-scrollbar{width:0}