:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; margin: 0; }
.container { max-width: 900px; margin: auto; padding: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.btn { display:block; padding: .75rem 1rem; border: 1px solid #8884; border-radius: .6rem; text-decoration: none; color: inherit; text-align: center; }
.toolbar { display:flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
#songs { list-style: none; padding: 0; }
#songs li { padding: .5rem .75rem; border: 1px solid #8884; border-radius: .5rem; margin-bottom: .5rem; display:flex; justify-content: space-between; align-items:center; }
#songs button { padding: .4rem .6rem; }
#preview { margin-top: 1rem; padding: .75rem; border: 1px dashed #8886; border-radius: .5rem; }
.pad { padding: .75rem; }
.band { font-size: clamp(16px, 3.2vw, 28px); line-height: 1.6; }
.chord { font-weight: 600; opacity: .85; margin-right: .5ch; }
.lyric { white-space: pre-wrap; }
.tiles.list { display: flex; flex-direction: column; gap: .75rem; }
.tiles.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem;
}