:root{--color-background:#12141a;--color-surface:#1b1e27;--color-surface-raised:#232732;--color-accent:#6ee7c8;--color-text:#f2f3f5;--color-text-muted:#9aa0ac;--color-status-error:#f2795c;--font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-weight-regular:400;--font-weight-medium:600;--font-size-title:1.125rem;--font-size-body:.9375rem;--font-size-meta:.8125rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--radius-surface:8px;--radius-control:999px;--shadow-elevated:0 4px 16px #00000052;--motion-duration:.16s;--motion-easing:ease-out;--touch-target-min:44px}@media (prefers-reduced-motion:reduce){:root{--motion-duration:0s}}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--color-background);color:var(--color-text);font-family:var(--font-family);font-weight:var(--font-weight-regular);font-size:var(--font-size-body);min-height:100vh}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#app{flex-direction:column;min-height:100vh;padding-bottom:5rem;display:flex}button{color:inherit;background:var(--color-surface);border:1px solid var(--color-surface-raised);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);cursor:pointer;min-height:var(--touch-target-min);transition:background-color var(--motion-duration) var(--motion-easing), border-color var(--motion-duration) var(--motion-easing), transform var(--motion-duration) var(--motion-easing);font-family:inherit}@media (hover:hover){button:not(:disabled):hover{background:var(--color-surface-raised);border-color:var(--color-accent)}}button:not(:disabled):active{transform:scale(.96)}@media (prefers-reduced-motion:reduce){button:not(:disabled):active{transform:none}}button:disabled{opacity:.4;cursor:default}button[aria-pressed=true]{color:var(--color-accent)}.icon-button{padding:var(--space-2);aspect-ratio:1;justify-content:center;align-items:center;display:inline-flex}input[type=search],input[type=range]{min-height:var(--touch-target-min)}.library-view>h2,.now-playing__title,.queue-panel__header h2{margin:0 0 var(--space-3);font-size:var(--font-size-title);font-weight:var(--font-weight-medium)}.library-view{width:100%;padding:var(--space-5);max-width:42rem;margin-inline:auto}.library-view__search{width:100%;max-width:24rem;margin:var(--space-3) 0;padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-surface-raised);border-radius:var(--radius-surface);color:var(--color-text);display:block}.library-view__filter{gap:var(--space-2);margin-bottom:var(--space-4);display:flex}.library-view__list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.track-row{align-items:center;gap:var(--space-2);background:var(--color-surface);border-radius:var(--radius-surface);padding:var(--space-2) var(--space-3);display:flex}.track-row--current{outline:2px solid var(--color-accent)}.track-row--error .track-row__play{color:var(--color-status-error)}.track-row__play{text-overflow:ellipsis;white-space:nowrap;text-align:left;min-width:0;padding:var(--space-1);background:0 0;border:none;flex:1;overflow:hidden}.empty-state{color:var(--color-text-muted);padding:var(--space-4);list-style:none}.persistent-player{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-surface-raised);box-shadow:var(--shadow-elevated);display:flex;position:fixed;bottom:0;left:0;right:0}.persistent-player__track-info{text-overflow:ellipsis;white-space:nowrap;text-align:left;background:0 0;border:none;flex:none;max-width:14rem;overflow:hidden}.persistent-player__progress{flex:1}.persistent-player__time{color:var(--color-text-muted);font-size:var(--font-size-meta);white-space:nowrap}.persistent-player__track-info--error,.now-playing__error{color:var(--color-status-error)}.now-playing,.queue-panel{background:var(--color-background);width:100%;max-width:none;height:100%;max-height:none;padding:var(--space-5);color:inherit;opacity:1;transition:opacity var(--motion-duration) var(--motion-easing), display var(--motion-duration) allow-discrete;border:none;margin:0;position:fixed;inset:0;overflow-y:auto}.now-playing:not([open]),.queue-panel:not([open]){opacity:0}@starting-style{.now-playing[open],.queue-panel[open]{opacity:0}}.now-playing__artwork{background:var(--color-surface);border-radius:var(--radius-surface);width:12rem;height:12rem;color:var(--color-text-muted);margin:var(--space-4) 0;justify-content:center;align-items:center;font-size:3rem;display:flex}.now-playing__controls{gap:var(--space-2);margin:var(--space-3) 0;display:flex}.queue-panel__header,.queue-panel__list{max-width:42rem;margin-inline:auto}.queue-panel__header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.queue-panel__list{gap:var(--space-2);flex-direction:column;margin-top:0;margin-bottom:0;padding:0;list-style:none;display:flex}@media (width<=1023px){button{min-width:var(--touch-target-min)}}@media (width<=1023px) and (width>=640px){.library-view{padding:var(--space-4)}}@media (width<=639px){.library-view{padding:var(--space-3)}.library-view__search{max-width:none}.track-row{padding:var(--space-3)}.track-row__add-to-queue{padding-inline:var(--space-2)}.persistent-player{padding:var(--space-2) var(--space-3)}.persistent-player__secondary{display:none}.persistent-player__track-info{flex:1;max-width:none}.queue-panel{border-radius:var(--radius-surface) var(--radius-surface) 0 0;height:auto;max-height:70vh;inset:auto 0 0}.now-playing__artwork{width:8rem;height:8rem;font-size:2rem}.now-playing__controls{flex-wrap:wrap}}