:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.player-shell{min-height:100vh;display:grid;place-items:center;padding:1.5rem}.player{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%;max-width:420px}.player-header{display:flex;align-items:center;gap:.6rem;color:#fffc}.player-title{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#7bed9f,#ffa502,#fd79a8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.now-playing{display:flex;align-items:center;gap:1.25rem;width:100%;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1rem}.album-art{border-radius:.5rem;flex-shrink:0;box-shadow:0 4px 20px #0006}.track-info{display:flex;flex-direction:column;gap:.2rem;min-width:0}.track-name{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:.9rem;color:#ffffff80}.track-bpm{font-size:.7rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#ffffff4d;margin-top:.3rem;letter-spacing:.08em}.visualizer{width:100%;height:120px;border-radius:.75rem;background:#ffffff05;border:1px solid rgba(255,255,255,.06)}.progress-bar{width:100%;height:4px;background:#ffffff14;border-radius:2px;overflow:hidden}.progress-fill{height:100%;border-radius:2px;transition:width .1s linear}.controls{display:flex;align-items:center;gap:1.5rem}.ctrl-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:50%;color:#fafafa;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;transition:all .15s}.ctrl-btn:hover{background:#ffffff1f}.ctrl-btn:active{transform:scale(.95)}.ctrl-play{width:56px;height:56px;border:none;color:#0a0a0a}.ctrl-play:hover{opacity:.85;background:none}.volume-row{display:flex;align-items:center;gap:.6rem;width:100%;color:#ffffff80}.volume-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:#ffffff1f;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent, #7bed9f);cursor:pointer;box-shadow:0 0 6px #0000004d}.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent, #7bed9f);cursor:pointer;border:none}.playlist{width:100%;display:flex;flex-direction:column;gap:.35rem}.playlist-header{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:#ffffff4d;margin-bottom:.25rem;padding-left:.25rem}.playlist-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;background:#ffffff05;border:1px solid rgba(255,255,255,.06);border-radius:.5rem;color:#fafafa;cursor:pointer;transition:all .15s;text-align:left;font-family:inherit;font-size:inherit;width:100%}.playlist-item:hover{background:#ffffff0d}.playlist-item.active{background:#ffffff0d;border-width:1.5px}.playlist-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.playlist-item-info{display:flex;flex-direction:column;flex:1;min-width:0}.playlist-item-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-item-artist{font-size:.75rem;color:#fff6}.playlist-eq{display:flex;align-items:flex-end;gap:2px;height:16px}.playlist-eq span{display:block;width:3px;background:#fff9;border-radius:1px;animation:eq-bounce .6s ease-in-out infinite alternate}.playlist-eq span:nth-child(1){height:6px;animation-delay:0s}.playlist-eq span:nth-child(2){height:12px;animation-delay:.2s}.playlist-eq span:nth-child(3){height:8px;animation-delay:.4s}@keyframes eq-bounce{0%{height:4px}to{height:16px}}.keys-hint{display:flex;gap:1.5rem;font-size:.7rem;color:#ffffff40}