@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101114;--panel:#181a20;--muted:#9a9da8;--text:#f4f5f7;--accent:#a6e36e;--line:#2a2c34}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% -15%,#283044 0,transparent 42%),var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;padding:0 0 112px 250px}
.sidebar{position:fixed;inset:0 auto 0 0;width:230px;background:#0b0c0f;border-right:1px solid var(--line);padding:30px 20px;display:flex;flex-direction:column;z-index:3}
.brand{display:flex;align-items:center;gap:12px;font:600 11px/1.35 'Manrope',sans-serif;letter-spacing:2px}.brand b{font-size:13px;letter-spacing:2.5px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--accent);color:#12150e;font:800 24px 'Manrope'}
.nav-label,.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:700}.nav-label{margin:54px 0 12px 10px}.nav{border:0;background:none;color:#b9bbc4;text-align:left;padding:13px 12px;border-radius:9px;font-size:17px;cursor:pointer}.nav span{font-size:14px;margin-left:12px}.nav.active,.nav:hover{background:#20232a;color:var(--accent)}.side-note{margin-top:auto;color:#656975;font-size:9px;letter-spacing:2px}
main{max-width:1250px;margin:auto;padding:52px 5vw 55px}h1,h2,h3,p{margin-top:0}h1{font:800 clamp(34px,5vw,58px)/1.08 'Manrope',sans-serif;letter-spacing:-2px;margin:15px 0 12px;max-width:700px}.sub{color:var(--muted);font-size:15px}.search{margin-top:30px;display:flex;align-items:center;gap:12px;max-width:520px;padding:12px 16px;background:#1b1e25;border:1px solid #30333d;border-radius:12px;color:var(--muted)}.search input{background:none;border:0;outline:0;color:var(--text);width:100%;font:inherit}.section-head{display:flex;align-items:end;justify-content:space-between;margin:55px 0 20px}.section-head h2{font:700 26px 'Manrope';margin:8px 0 0}.count{font-size:10px;letter-spacing:1.5px;color:var(--muted)}
.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:22px}.track{background:#191b21;border:1px solid #252832;border-radius:13px;padding:12px;cursor:pointer;transition:.2s;min-width:0}.track:hover{transform:translateY(-3px);background:#22252d;border-color:#414653}.art{width:100%;aspect-ratio:1;border-radius:9px;background:linear-gradient(135deg,#34435b,#a16b70);display:grid;place-items:center;font:800 48px 'Manrope';color:#ffffffaa;overflow:hidden}.art img{width:100%;height:100%;object-fit:cover}.track h3{font-size:14px;margin:13px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track p{font-size:12px;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty{text-align:center;margin:80px auto;color:var(--muted)}.empty-icon{font-size:50px;color:var(--accent)}.empty h3{color:var(--text);font:700 22px 'Manrope';margin:12px 0}.empty p{line-height:1.7}.empty code{color:var(--accent)}
.player{position:fixed;z-index:5;bottom:0;left:0;right:0;min-height:92px;background:#17191f;border-top:1px solid #343741;display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,1.5fr) minmax(120px,1fr);align-items:center;gap:25px;padding:14px 28px}.now-playing{display:flex;align-items:center;gap:12px;min-width:0}.mini-art{width:52px;height:52px;border-radius:8px;background:#343b4a;display:grid;place-items:center;color:var(--accent);font-size:22px;flex-shrink:0}.now-playing strong,.now-playing span{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-playing strong{font-size:13px}.now-playing span{font-size:11px;color:var(--muted);margin-top:5px}.controls{max-width:520px;width:100%;justify-self:center}.control-buttons{display:flex;align-items:center;justify-content:center;gap:22px}.control-buttons button{border:0;background:none;color:#c7c9d0;font-size:17px;cursor:pointer}.control-buttons button:hover{color:var(--accent)}.control-buttons .play{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#151810;font-size:14px}.timeline{display:flex;align-items:center;gap:10px;margin-top:8px;color:var(--muted);font-size:10px}.timeline input,.volume input{width:100%;accent-color:var(--accent);cursor:pointer}.volume{display:flex;align-items:center;gap:12px;color:var(--muted);max-width:150px;justify-self:end}
@media(max-width:760px){body{padding:0 0 150px}.sidebar{position:static;width:auto;height:auto;padding:15px 18px;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:9px}.brand-mark{width:34px;height:34px;font-size:19px}.nav-label,.side-note{display:none}.sidebar{display:block}.nav{margin-top:12px;padding:8px 10px}.nav span{font-size:12px}main{padding:34px 20px}.section-head{margin-top:38px}.track-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.track{padding:9px}.player{grid-template-columns:1fr auto;gap:8px;padding:12px 15px;min-height:135px}.now-playing{grid-column:1}.controls{grid-column:1/-1;grid-row:2}.volume{grid-column:2;grid-row:1;width:85px}.control-buttons{gap:25px}}