/* css/keyboard.css */
.keyboard {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  user-select: none;
}
.kb-col { display: flex; flex-direction: column; gap: 6px; }
.kb-row { display: flex; gap: 6px; }
.key {
  height: 38px;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--key-bg);
  color: var(--key-fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
  padding: 0 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12), inset 0 -2px 0 rgba(0, 0, 0, .05);
  transition: background 60ms, color 60ms, transform 50ms, box-shadow 50ms;
}
.key.spacer { background: transparent; border: none; box-shadow: none; }
.key.pressed {
  background: var(--key-pressed);
  color: var(--key-pressed-fg);
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), inset 0 0 8px rgba(0, 0, 0, .25);
}
.key.tested:not(.pressed) { background: var(--key-tested); color: var(--key-tested-fg); }