:root{
  --bg:#000; --fg:#ddd; --muted:#999; --card:#0a0a0a; --border:#1a1a1a;
  --accent:#cfcfcf;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent)}
.page{min-height:100dvh;display:flex;flex-direction:column}
.topbar{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem;position:sticky;top:0;background:linear-gradient(#000,rgba(0,0,0,.7));border-bottom:1px solid var(--border);backdrop-filter:saturate(120%) blur(6px)}
.topbar h1{margin:0;text-align:center;font-size:1.1rem;color:#fff;font-weight:600}
.back{color:#aaa;text-decoration:none;border:1px solid var(--border);padding:.35rem .6rem;border-radius:.6rem}
.container{width:min(1200px,92vw);margin:2rem auto 4rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.card{display:flex;flex-direction:column;gap:.5rem;background:var(--card);border:1px solid var(--border);border-radius:1rem;overflow:hidden;text-decoration:none}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.card-title{color:#eee;font-weight:600;padding:.7rem}
.card:hover .card-title{text-decoration:underline}

.song-hero{display:grid;grid-template-columns:180px 1fr;gap:1.25rem;align-items:start;margin-bottom:1.5rem}
.cover{width:180px;height:180px;object-fit:cover;border-radius:1rem;border:1px solid var(--border);background:#111}
.meta h2{margin:.2rem 0 .6rem}
.subtitle{color:var(--muted);margin:.2rem 0 .8rem}
.tiny{display:inline-block;margin-top:.5rem;color:#bbb;font-size:.9rem}
.lyrics h3{margin:1.2rem 0 .6rem}
pre{white-space:pre-wrap;background:#0a0a0a;border:1px solid var(--border);padding:1rem;border-radius:1rem;line-height:1.5}

@media (max-width:700px){
  .song-hero{grid-template-columns:1fr}
  .cover{width:100%;height:auto;aspect-ratio:1/1}
}