#kt-app { --key-unit: 2.65rem; min-width: 0; }
#kt-app [hidden] { display: none !important; }
#kt-layout { width: auto; min-width: 12rem; }
#kt-app .keyboard-tester-settings, #kt-app .keyboard-tester-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-block: 1rem; }
#kt-app button, #kt-app select { min-height: 44px; max-width: 100%; }
#kt-app .keyboard-tester-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-block: 1rem; }
#kt-app .keyboard-tester-metrics p { margin: 0; padding: .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#kt-capture { padding: 1rem; border: 2px solid var(--border); border-radius: .75rem; min-width: 0; max-width: 100%; overflow-x: auto; }
#kt-app[data-mode="active"] #kt-capture { border-color: var(--accent); }
#kt-app :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
#kt-app .keyboard-tester-diagram-scroll { padding: .5rem; min-height: calc(6 * var(--key-unit) + 2rem); box-sizing: content-box; }
#kt-diagram { display: grid; grid-template-areas: "function navigation numpad" "alphanumeric navigation numpad"; grid-template-columns: max-content max-content max-content; gap: 1rem; width: max-content; }
#kt-app .keyboard-tester-keygroup { position: relative; width: calc(var(--columns) * var(--key-unit)); height: calc(var(--rows) * var(--key-unit)); }
#kt-app .keyboard-tester-function { grid-area: function; }
#kt-app .keyboard-tester-alphanumeric { grid-area: alphanumeric; }
#kt-app .keyboard-tester-navigation { grid-area: navigation; align-self: end; }
#kt-app .keyboard-tester-numpad { grid-area: numpad; align-self: end; }
#kt-diagram kbd { box-sizing: border-box; position: absolute; left: calc(var(--x) * var(--key-unit)); top: calc(var(--y) * var(--key-unit)); width: calc(var(--w) * var(--key-unit) - .2rem); height: calc(var(--h) * var(--key-unit) - .2rem); display: flex; align-items: center; justify-content: center; padding: .15rem; background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-bottom-width: 3px; border-radius: .3rem; font: 600 .65rem/1.1 system-ui, sans-serif; white-space: normal; overflow-wrap: anywhere; }
#kt-diagram .keyboard-tester-seen::after { content: '✓'; position: absolute; right: .1rem; top: 0; font-size: .6rem; }
#kt-diagram .keyboard-tester-held { outline: 2px solid var(--accent); outline-offset: -3px; border-bottom-color: var(--accent); text-decoration: underline; }
#kt-app .keyboard-tester-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
#kt-status { min-height: 3em; }
#kt-app details { margin-block: 1rem; }
#kt-app summary { cursor: pointer; padding-block: .5rem; }
#kt-last-event { display: grid; grid-template-columns: minmax(5rem, 1fr) minmax(0, 3fr); gap: .3rem 1rem; }
#kt-last-event dd { margin: 0; overflow-wrap: anywhere; }
#kt-extra-positions { overflow-wrap: anywhere; }
#kt-app .keyboard-tester-table-scroll { overflow-x: auto; }
#kt-observed-table { width: 100%; border-collapse: collapse; }
#kt-observed-table th, #kt-observed-table td { text-align: start; padding: .5rem; border-bottom: 1px solid var(--border); }
@media (max-width: 1100px) {
  #kt-diagram { grid-template-areas: "function function" "alphanumeric alphanumeric" "navigation numpad"; grid-template-columns: max-content max-content; }
  #kt-app .keyboard-tester-diagram-scroll { min-height: calc(11.75 * var(--key-unit) + 3rem); }
}
@media (max-width: 600px) {
  #kt-app { --key-unit: 2.35rem; }
  #kt-app .keyboard-tester-metrics { grid-template-columns: 1fr; gap: .35rem; }
  #kt-app .keyboard-tester-metrics p { padding: .5rem; }
  #kt-capture { padding: .5rem; }
}
@media (forced-colors: active) {
  #kt-diagram .keyboard-tester-held { outline-color: Highlight; border-bottom-color: Highlight; }
  #kt-app :focus-visible { outline-color: Highlight; }
}