/* The Sequencer look: Tokyo Night, JetBrains Mono, flat square cells. */
:root {
  --bg: #1a1b26;
  --bg-dark: #13141c;
  --bg-light: #24283b;
  --selection: #292e42;
  --fg: #a9b1d6;
  --fg-dim: #737aa2;
  --fg-bright: #c0caf5;
  --accent: #7aa2f7;
  --magenta: #ad8ee6;
  --orange: #eb927b;
  --red: #f7768e;
  --yellow: #e0af68;
  --cell: 22px;
  --gap: 2px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-dark);
  color: var(--fg);
  font: 15px/1.5 "JetBrains Mono", ui-monospace, monospace;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--fg-bright); }
h1, h2 { color: var(--fg-bright); font-weight: 700; margin: 0; }
h1 { font-size: 26px; }
h2 { font-size: 17px; margin-bottom: 8px; }
code { background: var(--bg-light); padding: 2px 6px; color: var(--fg-bright); }
button { font: inherit; cursor: pointer; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 28px; background: var(--bg); border-bottom: 1px solid var(--bg-light);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { height: 34px; }
.brand-sub { color: var(--fg-dim); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.site-header nav { display: flex; gap: 6px; }
.site-header nav a { padding: 6px 12px; background: var(--bg-light); color: var(--fg); }
.site-header nav a.active, .site-header nav a:hover { background: var(--accent); color: var(--bg); }

.site-footer { text-align: center; color: var(--fg-dim); font-size: 13px; padding: 30px 20px 40px; }

.intro { margin: 10px 0 26px; }
.intro p { color: var(--fg-dim); margin: 6px 0 0; }
.empty { color: var(--fg-dim); padding: 40px 0; }

/* The list */
.song-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.song-card {
  display: grid; grid-template-columns: 34px 44px 1fr 90px; align-items: center; gap: 14px;
  background: var(--bg); padding: 12px 16px; position: relative;
}
.song-card:hover, .song-card.playing { background: var(--selection); }
.rank { color: var(--fg-dim); text-align: right; }
.song-link { display: flex; align-items: center; gap: 18px; color: var(--fg); min-width: 0; }
.song-link .pattern { height: 64px; width: auto; max-width: 300px; flex: none; }
.song-meta { display: flex; flex-direction: column; min-width: 0; }
.song-meta strong { color: var(--fg-bright); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-meta span { color: var(--fg-dim); font-size: 13px; }
.song-card .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }

.play {
  width: 44px; height: 44px; border: 0; background: var(--accent); color: var(--bg); font-size: 16px;
}
.play:hover { background: var(--fg-bright); }
.play.big { width: 64px; height: 64px; font-size: 22px; flex: none; }
.playing .play { background: var(--red); }

.vote form { margin: 0; }
.vote-button {
  width: 100%; border: 0; padding: 8px 10px; background: var(--bg-light); color: var(--fg-dim); font-size: 15px;
}
.vote-button span { color: var(--fg-bright); font-weight: 700; }
.vote-button:hover { background: var(--selection); color: var(--accent); }
.vote-button.voted { background: var(--accent); color: var(--bg); }
.vote-button.voted span { color: var(--bg); }

.progress { background: transparent; height: 3px; }
.progress div { height: 100%; width: 0; background: var(--accent); }

/* A song */
.song-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.song-head > div:nth-child(2) { flex: 1; min-width: 0; }
.song-head .vote { width: 100px; }
.by { color: var(--fg-dim); margin: 4px 0 0; }

.player { background: var(--bg); padding: 18px; overflow-x: auto; }
.player .progress { margin-top: 12px; background: var(--bg-light); }

.grid { display: grid; gap: var(--gap); width: max-content; --cell: clamp(18px, calc((min(100vw, 1180px) - 300px) / var(--steps) - 2px), 38px); }
.grid .row, .step-numbers { display: grid; grid-template-columns: 160px auto; align-items: center; gap: 12px; }
.step-numbers { grid-template-columns: 170px repeat(var(--steps), var(--cell)); gap: 0 var(--gap); }
.step-numbers span { font-size: 10px; text-align: center; color: #4c5275; }
.step-numbers span.bar { color: var(--fg-dim); }
.step-numbers span.on-head { color: var(--fg-bright); }
.track-name {
  color: var(--fg); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--accent); padding-left: 8px;
}
.track-name.kind-riff { border-color: var(--magenta); }
.track-name.kind-pack { border-color: var(--orange); }
.row.muted { opacity: 0.35; }

.cells {
  position: relative; display: grid; grid-template-columns: repeat(var(--steps), var(--cell)); gap: var(--gap);
}
.cell { height: var(--cell); background: var(--bg-light); }
.cell.dark { background: #1f2233; }
.cell.on-head { background: #34406a; }

.note {
  position: absolute; top: 0; height: var(--cell);
  left: calc(var(--start) * (var(--cell) + var(--gap)));
  width: calc(var(--len) * (var(--cell) + var(--gap)) - var(--gap));
  background: var(--accent); opacity: 0.8;
}
.note.accent { opacity: 1; box-shadow: inset 0 3px 0 var(--fg-bright); }
.note.kind-riff { background: var(--magenta); }
.note.kind-pack { background: var(--orange); }
.note.hit { animation: hit 0.35s ease-out; }
@keyframes hit {
  from { background: #fff; outline: 2px solid var(--fg-bright); outline-offset: 2px; }
  to { outline: 2px solid transparent; outline-offset: 8px; }
}

.description { background: var(--bg); padding: 16px 18px; margin: 16px 0 0; white-space: pre-line; }

.open, .packs { margin-top: 28px; }
.open p { color: var(--fg-dim); margin: 0 0 10px; }
.open .small { font-size: 13px; margin-top: 10px; }
.command { display: flex; background: var(--bg); }
.command code { flex: 1; background: transparent; padding: 12px 14px; overflow-x: auto; white-space: nowrap; }
.command button { border: 0; background: var(--accent); color: var(--bg); padding: 0 18px; }
.packs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.packs li { background: var(--bg); padding: 10px 14px; }
.packs li span { color: var(--fg-dim); font-size: 13px; margin-left: 8px; }

@media (max-width: 760px) {
  .site-header { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
  .song-card { grid-template-columns: 44px 1fr 70px; }
  .rank { display: none; }
  .song-link .pattern { display: none; }
  .song-head { flex-wrap: wrap; }
}