:root{--pink:#e8559a;--pink-soft:#fbe3ee;--text:#1d1d1f;--muted:#8a8a8e;--line:#eee}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--text);font-family:-apple-system,"Helvetica Neue",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.side{position:fixed;top:0;left:0;bottom:0;width:200px;padding:2rem 1.25rem;border-right:1px solid var(--line);background:#fff}
.name{font-size:.75rem;letter-spacing:.08em;color:var(--muted);margin-bottom:2rem}
nav a{display:block;padding:.45rem .7rem;border-radius:6px;color:var(--text);text-decoration:none;font-size:.9rem}
nav a:hover{background:var(--pink-soft)}nav a.active{background:var(--pink-soft);color:var(--pink);font-weight:500}
main{margin-left:200px;max-width:780px;padding:2.5rem 2rem}
h2{font-weight:500;font-size:1.1rem;margin:0 0 1.5rem}
.track{display:flex;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.track img{width:72px;height:72px;border-radius:6px;object-fit:cover;flex:none}
.info{flex:1;min-width:0}.info h3{margin:0;font-weight:500;font-size:.95rem}.date{color:var(--muted);font-size:.78rem;margin-top:.15rem}
.player{display:flex;align-items:center;gap:.7rem;margin-top:.5rem}
.play{width:34px;height:34px;border-radius:50%;border:none;background:var(--pink);color:#fff;font-size:.75rem;cursor:pointer;flex:none}
.play:hover{background:#d13f85}
canvas{flex:1;height:36px;width:100%;cursor:pointer;min-width:0}.time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.75rem;flex:none}
.muted{color:var(--muted)}
@media(max-width:640px){.side{position:sticky;bottom:auto;width:auto;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-right:0;border-bottom:1px solid var(--line);z-index:5}
.name{margin:0}nav a{display:inline-block}main{margin-left:0;padding:1.5rem 1rem}.track img{width:56px;height:56px}}