*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0f0f14;--panel: rgba(24, 24, 32, .72);--text: #f4f4f6;--muted: #a3a3b2;--accent: #7c9cff;--accent-2: #b48cff;--line: rgba(255, 255, 255, .1);--library-w: 22rem}html,body,#root{height:100%}body{font-family:Lato,system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}a{color:inherit}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}.app{position:relative;height:100%;display:flex;flex-direction:column;transition:padding-left .45s ease}.backdrop{position:fixed;top:-10%;right:-10%;bottom:-10%;left:-10%;filter:blur(70px) saturate(140%) brightness(.45);transform:scale(1.1);transition:background-image .8s ease;z-index:-1}.backdrop img{width:100%;height:100%;object-fit:cover;display:block}.backdrop:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 0%,rgba(15,15,20,.7) 75%)}.nav{display:flex;align-items:center;justify-content:space-between;padding:1.25rem clamp(1rem,4vw,3rem)}.brand{display:flex;align-items:center;gap:.6rem;font-size:1.5rem;font-weight:900;letter-spacing:.02em}.wave{display:inline-flex;align-items:flex-end;gap:3px;height:20px}.wave i{width:4px;border-radius:2px;background:linear-gradient(var(--accent-2),var(--accent));animation:bar 1.1s ease-in-out infinite}.wave i:nth-child(1){height:40%;animation-delay:-.2s}.wave i:nth-child(2){height:90%;animation-delay:-.6s}.wave i:nth-child(3){height:60%;animation-delay:-.4s}.wave i:nth-child(4){height:75%;animation-delay:-.9s}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:#ffffff0f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:700;font-size:.9rem;transition:background .25s ease,border-color .25s ease}.btn:hover{background:#ffffff24;border-color:#fff3}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:0 1rem;min-height:0}.state{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--muted)}.spinner{width:32px;height:32px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}.song{text-align:center;max-width:min(90vw,34rem)}.disc{width:clamp(200px,32vh,320px);aspect-ratio:1;margin:0 auto 2rem;border-radius:50%;padding:6px;background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent));box-shadow:0 30px 80px #0000008c;animation:spin 18s linear infinite;animation-play-state:paused;position:relative}.disc.spinning{animation-play-state:running}.disc img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#222}.disc:after{content:"";position:absolute;top:50%;left:50%;width:14%;height:14%;transform:translate(-50%,-50%);border-radius:50%;background:var(--bg);border:3px solid rgba(255,255,255,.15)}.song h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song h3{margin-top:.4rem;font-weight:400;color:var(--muted)}.song h3 a{text-decoration:none}.song h3 a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}.player{width:min(92vw,36rem);padding:1.25rem 1.5rem;border-radius:24px;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:1rem}.time-control{display:flex;align-items:center;gap:.9rem;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}.time-control span{min-width:2.6rem;text-align:center}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:6px;border-radius:999px;cursor:pointer;background:linear-gradient(90deg,var(--accent),var(--accent-2)) 0 / var(--pct, 0%) 100% no-repeat,#ffffff26}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0006;transition:transform .15s ease}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.25)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}.play-control{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,3vw,1.5rem)}.icon-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--text);transition:background .2s ease,transform .15s ease,color .2s ease}.icon-btn:hover{background:#ffffff1a}.icon-btn:active{transform:scale(.92)}.icon-btn.small{width:38px;height:38px;color:var(--muted)}.icon-btn.small:hover{color:var(--text)}.icon-btn.on{color:var(--accent)}.icon-btn.play{width:64px;height:64px;color:#0f0f14;background:#fff;box-shadow:0 10px 30px #7c9cff59}.icon-btn.play:hover{background:#fff;transform:scale(1.05)}.volume{display:flex;align-items:center;gap:.5rem;width:min(100%,12rem);margin:0 auto}.library{position:fixed;top:0;left:0;bottom:0;width:var(--library-w);z-index:20;display:flex;flex-direction:column;background:#121218eb;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-right:1px solid var(--line);transform:translate(-100%);transition:transform .45s cubic-bezier(.5,0,0,1)}.library.open{transform:translate(0);box-shadow:20px 0 60px #00000073}.library-active{padding-left:var(--library-w)}.library-head{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.25rem .75rem 1.5rem}.library-head h2{font-size:1.3rem;font-weight:900}.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:.25rem 1.5rem 1rem}.chip{padding:.35rem .85rem;border-radius:999px;font-size:.8rem;font-weight:700;border:1px solid var(--line);color:var(--muted);transition:all .2s ease}.chip:hover{color:var(--text);border-color:#ffffff40}.chip.active{background:var(--text);color:var(--bg);border-color:var(--text)}.library-songs{list-style:none;overflow-y:auto;padding:0 .75rem 1.5rem;transition:opacity .2s}.library-songs.dim{opacity:.4;pointer-events:none}.library-song{width:100%;display:flex;align-items:center;gap:.85rem;padding:.55rem .75rem;border-radius:12px;text-align:left;transition:background .2s ease}.library-song:hover{background:#ffffff0f}.library-song.selected{background:linear-gradient(90deg,#7c9cff38,#b48cff1f)}.library-song img{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#222}.meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.meta .title{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta .artist{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dur{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}.eq i{width:3px;background:var(--accent);border-radius:1px;animation:bar .9s ease-in-out infinite}.eq i:nth-child(1){height:60%}.eq i:nth-child(2){height:100%;animation-delay:-.3s}.eq i:nth-child(3){height:40%;animation-delay:-.6s}.library-songs::-webkit-scrollbar{width:6px}.library-songs::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:6px}.credit{text-align:center;font-size:.75rem;color:var(--muted);padding:1rem}.credit a:hover{color:var(--text)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bar{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.wave i,.eq i{transform-origin:bottom}@media(max-width:900px){.library-active{padding-left:0}.library{width:min(100vw,var(--library-w))}}@media(max-height:640px){.disc{width:160px;margin-bottom:1rem}.stage{gap:1rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}