/* 線上鍵盤測試 */
.tool { display: flex; flex-direction: column; gap: 16px; }
.lead { margin: 0; text-align: center; color: var(--muted); }
.toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.seg { display: inline-flex; border: 2px solid var(--accent); border-radius: 999px; overflow: hidden; }
.seg button { min-height: 40px; padding: 4px 18px; font: inherit; font-weight: 700; color: var(--ink); background: var(--panel); border: 0; cursor: pointer; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.seg button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.board-scroll { overflow-x: auto; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.board { display: grid; gap: 4px; min-width: 40rem; grid-auto-rows: 2.6rem; }
.key {
  display: grid; place-items: center; min-width: 0; font-size: .8125rem; font-weight: 700; color: var(--ink);
  background: #F0F3F1; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; user-select: none;
}
.key.tested { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.key.down { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateY(2px); border-bottom-width: 1px; }

.info { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.info div { padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.info dt { font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.info dd { margin: 2px 0 0; font-size: 1.375rem; font-weight: 700; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; min-height: 2rem; }
.progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.progress strong { font-size: 1.25rem; }
.reset {
  min-height: 44px; padding: 6px 20px; font: inherit; font-weight: 700; color: var(--ink); background: var(--panel);
  border: 2px solid var(--line); border-radius: 999px; cursor: pointer;
}
.reset:hover, .reset:focus-visible { border-color: var(--accent); outline: none; }
.notes { margin: 0; padding-left: 1.25rem; color: var(--muted); }