body { font-family: system-ui, sans-serif; max-width: 900px; margin: 0 auto; padding: 40px 20px; color: #ccc; line-height: 1.6; background: #1a1a2e; }
h1 { color: #e0e0e0; margin-bottom: 0.2em; }
.subtitle { color: #888; margin-bottom: 2em; }
.subtitle a { color: #6ca0dc; }
a { color: #6ca0dc; }
nav { margin-bottom: 1.5em; }
nav a { color: #6ca0dc; text-decoration: none; }
.playlist { list-style: none; padding: 0; }
.track { margin: 0; padding: 0.6em 0; border-bottom: 1px solid #2a2a3e; }
.track:hover { background: #22223a; }
.track-row { display: flex; align-items: center; gap: 12px; }
.track-cover { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.track-cover-large { max-width: 300px; border-radius: 8px; margin-bottom: 1em; }
.track-info { flex: 1; min-width: 0; }
.track-title { font-weight: 600; text-decoration: none; color: #e0e0e0; }
.track-title:hover { color: #6ca0dc; }
.has-text { font-size: 0.8em; margin-left: 0.3em; }
.ext-links { margin-left: 0.5em; }
.ext-link { text-decoration: none; font-size: 0.9em; margin-right: 0.3em; opacity: 0.5; display: inline-flex; vertical-align: middle; }
.ext-link:hover { opacity: 1; }
.sc-link { color: #f70; }
.yt-link { color: #f00; }
.links { margin: 0.5em 0; }
.track-player { flex-shrink: 0; }
.track-player audio { height: 32px; }
.lyrics { margin-top: 1.5em; color: #aaa; font-style: italic; }
.lyrics p { margin: 0.5em 0; }
@media (max-width: 600px) {
  .track-row { flex-wrap: wrap; }
  .track-player { width: 100%; }
  .track-player audio { width: 100%; }
}