:root {
  --bg: #f6f5f2;
  --fg: #1d1d1f;
  --muted: #6b6b70;
  --key: #ffffff;
  --key-fg: #1d1d1f;
  --black-key: #2b2b2f;
  --black-key-fg: #f2f2f2;
  --border: #d4d2cc;
  --accent: #3a5ccc;
  --right: #2e9e5b;
  --wrong: #d0453a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141416;
    --fg: #ececee;
    --muted: #9a9aa2;
    --key: #2a2a2e;
    --key-fg: #ececee;
    --black-key: #0b0b0c;
    --black-key-fg: #d8d8dc;
    --border: #3a3a40;
    --accent: #6f8cf0;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, sans-serif;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 16px;
  text-align: center;
}

h1 { margin: 0 0 16px; font-size: 1.6rem; }

button {
  font: inherit;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--key);
  color: var(--key-fg);
  cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: default; }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

#status { font-size: 1.25rem; min-height: 2em; margin: 8px 0 20px; }
#status.right { color: var(--right); }
#status.wrong { color: var(--wrong); }

.answers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.answers button {
  padding: 18px 4px;
  font-size: 1.05rem;
  font-weight: 600;
  border-width: 2px;
}
.answers button.black {
  background: var(--black-key);
  color: var(--black-key-fg);
}
.answers button small { display: block; font-weight: 400; font-size: 0.75rem; opacity: 0.8; }
.answers button.correct { border-color: var(--right); box-shadow: 0 0 0 2px var(--right); }
.answers button.chosen-wrong { border-color: var(--wrong); box-shadow: 0 0 0 2px var(--wrong); }

.controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.octaves {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}
.octaves button { padding: 4px 14px; font-size: 1.1rem; }
.octaves strong { min-width: 1ch; }
.octaves + .octaves { margin-top: 12px; }
.segmented { display: flex; }
.segmented button { padding: 4px 14px; font-size: 0.95rem; }
.segmented button:first-child { border-radius: 10px 0 0 10px; }
.segmented button:last-child { border-radius: 0 10px 10px 0; border-left: 0; }
.segmented button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.answers button[hidden] { display: none; }
.muted { color: var(--muted); font-size: 0.9rem; }

kbd {
  font: 0.75em ui-monospace, monospace;
  opacity: 0.7;
  margin-left: 4px;
}

.hint { color: var(--muted); font-size: 0.85rem; margin-top: 24px; }

@media (max-width: 420px) {
  .answers { grid-template-columns: repeat(3, 1fr); }
  kbd, .hint { display: none; }
}