:root { --bg:#121216; --surface:#1d1d24; --surface-soft:#282832; --text:#f7f6fb; --muted:#a7a5b2; --accent:#d7ff54; --line:rgba(255,255,255,.09); font-family:Inter,ui-sans-serif,system-ui,sans-serif; color:var(--text); background:var(--bg) } *{box-sizing:border-box} body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% -5%,#46472d 0,transparent 28rem),var(--bg)} button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(100%,760px);margin:auto;padding:max(2rem,env(safe-area-inset-top)) 1.25rem 9rem}.hero{padding:.75rem 0 1.8rem}.eyebrow,.album__label{color:var(--accent);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:750;margin:0 0 .45rem}h1{font-size:clamp(2.65rem,10vw,4.5rem);line-height:.9;margin:0;letter-spacing:-.075em}.hero-copy{color:var(--muted);margin:1rem 0 0}.search{display:flex;align-items:center;gap:.65rem;background:var(--surface);border:1px solid var(--line);padding:.8rem 1rem;border-radius:.9rem;color:var(--muted);margin-bottom:1.75rem}.search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text)}.library{display:grid;gap:2.2rem}.album__summary{display:flex;align-items:center;gap:1rem;margin-bottom:.8rem}.cover{height:5.5rem;width:5.5rem;flex:0 0 5.5rem;border-radius:.7rem;object-fit:cover;background:var(--surface-soft);box-shadow:0 .6rem 1.8rem rgba(0,0,0,.25)}.cover--empty{display:grid;place-items:center;color:var(--accent);font-size:2rem;background:linear-gradient(135deg,#3b3d20,#202118)}h2{font-size:1.3rem;line-height:1.05;margin:0;letter-spacing:-.035em}.album__artist{color:var(--muted);margin:.35rem 0 0;font-size:.9rem}.tracks{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}.track{display:grid;grid-template-columns:2rem 1.5rem minmax(0,1fr) auto;align-items:center;min-height:4rem;gap:.4rem;border-bottom:1px solid var(--line)}.track.is-playing{color:var(--accent)}.track__play{border:0;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--surface-soft);color:var(--text);font-size:.65rem}.track__number,time{color:var(--muted);font-size:.78rem}.track__info{display:grid;gap:.15rem;overflow:hidden}.track__info strong,.track__info small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track__info small{color:var(--muted);font-size:.76rem}.empty-state{text-align:center;max-width:31rem;margin:4rem auto;color:var(--muted)}.empty-state__icon{color:var(--accent);font-size:4rem}.empty-state h2{color:var(--text);margin:1rem 0}.empty-state code{color:var(--text)}.player{position:fixed;z-index:2;bottom:0;left:0;right:0;min-height:5.6rem;padding:.7rem max(1rem,env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));display:grid;grid-template-columns:3.8rem minmax(0,1fr) 2.6rem;align-items:center;gap:.8rem;background:rgba(29,29,36,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line)}.player__art{width:3.8rem;height:3.8rem;border-radius:.45rem;object-fit:cover}.player__meta{min-width:0;display:grid;gap:.2rem}.player__meta strong,.player__meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player__meta small{color:var(--muted)}.player__button{width:2.6rem;height:2.6rem;border:0;border-radius:50%;background:var(--accent);color:#20220f}.player__progress{grid-column:1/-1;width:100%;accent-color:var(--accent);height:.2rem;margin:0}@media(min-width:640px){.app-shell{padding-left:2rem;padding-right:2rem}.player{left:50%;transform:translateX(-50%);width:min(760px,100%);border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:1rem 1rem 0 0}}