:root{--fg: #f3f4fb;--muted: #a7adc6;--glass: rgba(16, 18, 32, .42);--glass-strong: rgba(16, 18, 32, .62);--glass-border: rgba(255, 255, 255, .12);--accent: #7c5cff;--font-ui: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-display: "Bricolage Grotesque", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;--font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;font-family:var(--font-ui)}body{font-family:var(--font-ui)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%;background:#05060d;color:var(--fg);overflow:hidden}.app{position:fixed;top:0;right:0;bottom:0;left:0}.stage{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 22px;z-index:6}.brand{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:.02em;text-transform:uppercase;background:linear-gradient(120deg,#7c5cff,#46e0d0 50%,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 30px rgba(124,92,255,.3)}.modes{display:flex;gap:4px;padding:5px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.mode-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--muted);padding:8px 16px;border-radius:999px;font-family:var(--font-ui);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:color .2s,background .2s}.mode-btn:hover{color:var(--fg)}.mode-btn.active{color:#fff;background:linear-gradient(120deg,var(--accent),var(--accent2));box-shadow:0 6px 18px #00000059}.top-actions{display:flex;gap:8px}.chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--glass-border);background:var(--glass);color:var(--fg);padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .12s,background .2s,border-color .2s}.chip:hover{transform:translateY(-1px);background:#ffffff1f}.chip.on{background:linear-gradient(120deg,#22d3ee,#7c5cff);border-color:transparent;color:#04121a}.hero{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;pointer-events:none;z-index:4}.cover{position:relative;width:clamp(190px,26vw,300px);aspect-ratio:1;border-radius:28px;overflow:hidden;box-shadow:0 40px 100px #0000008c,0 0 0 1px #ffffff14 inset,0 0 80px #7c5cff59;display:grid;place-items:center}.cover.spinning{animation:floaty 6s ease-in-out infinite}.cover-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.cover-glyph{font-size:clamp(70px,12vw,130px);font-weight:800;color:#ffffffeb;text-shadow:0 6px 30px rgba(0,0,0,.35);mix-blend-mode:overlay}.cover-sheen{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#ffffff59,#fff0 45%)}.track{text-align:center}.track-title{font-family:var(--font-display);font-size:clamp(24px,3.2vw,36px);font-weight:800;letter-spacing:.01em;text-shadow:0 4px 30px rgba(0,0,0,.6)}.track-artist{margin-top:4px;color:var(--muted);font-size:15px}.playlist{position:absolute;left:22px;bottom:108px;width:300px;max-height:52vh;overflow-y:auto;padding:10px;border-radius:20px;background:var(--glass-strong);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 30px 70px #00000080;z-index:7;animation:rise .25s ease}.playlist-head{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);padding:8px 10px 12px}.plitem{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:none;background:transparent;color:var(--fg);border-radius:14px;cursor:pointer;text-align:left;transition:background .15s}.plitem:hover{background:#ffffff14}.plitem.active{background:#7c5cff38}.pdot{width:40px;height:40px;border-radius:10px;flex:none;box-shadow:0 6px 16px #0006}.pmeta{display:flex;flex-direction:column}.ptitle{font-weight:700;font-size:14px}.partist{font-size:12px;color:var(--muted)}.player{position:absolute;left:50%;bottom:22px;transform:translate(-50%);width:min(920px,calc(100% - 44px));display:flex;align-items:center;gap:18px;padding:12px 18px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 24px 60px #00000080;z-index:6}.list-btn,.ctrl{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--fg);cursor:pointer;display:grid;place-items:center;border-radius:50%;transition:transform .12s,background .2s,color .2s}.list-btn{width:40px;height:40px;color:var(--muted)}.list-btn:hover{color:var(--fg);background:#ffffff1a}.controls{display:flex;align-items:center;gap:8px}.ctrl{width:42px;height:42px;color:var(--muted)}.ctrl:hover{color:var(--fg);transform:scale(1.08)}.ctrl.play{width:54px;height:54px;color:#0a0a14;background:linear-gradient(120deg,#fff,#d9d3ff);box-shadow:0 10px 26px #7c5cff66}.ctrl.play:hover{transform:scale(1.06);color:#0a0a14}.seek{flex:1;display:flex;align-items:center;gap:12px;min-width:120px}.time{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;width:40px;text-align:center;flex:none}.volume{display:flex;align-items:center;gap:8px;color:var(--muted)}.volume .range.vol{width:90px}.range{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:999px;outline:none;cursor:pointer;flex:1;background:#ffffff29}.range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--accent);transition:transform .12s}.range::-webkit-slider-thumb:hover{transform:scale(1.2)}.range::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#fff;box-shadow:0 0 10px #7c5cffcc}.range:disabled{opacity:.6;cursor:default}@keyframes floaty{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 720px){.volume{display:none}.brand{font-size:18px}}