#keyboard-tester {min-width: 0;}
#keyboard-tester .keyboard-toolbar {display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px;}
#keyboard-tester .keyboard-layout-field {flex: 0 1 220px; min-width: 160px;}
#keyboard-tester .keyboard-layout-field .tool-select {width: 100%; min-height: 46px; appearance: none; -webkit-appearance: none; padding-inline-end: 42px; background-image: var(--site-select-arrow); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;}
html[dir="rtl"] #keyboard-tester .keyboard-layout-field .tool-select {background-position: left 14px center;}
#keyboard-tester .keyboard-actions {margin: 0; flex: 1 1 auto;}
#keyboard-tester .keyboard-actions button {min-height: 46px; white-space: normal;}
#keyboard-tester .keyboard-layout-help {margin: 12px 0 16px;}
#keyboard-tester .keyboard-legend {display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 12px; color: var(--site-muted); font-size: 14px;}
#keyboard-tester .keyboard-legend > span {display: inline-flex; align-items: center; gap: 7px;}
#keyboard-tester .keyboard-swatch {display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--site-border); border-radius: 4px; background: var(--site-surface); font-size: 12px; font-style: normal;}
#keyboard-tester .keyboard-focus {padding: 16px; background: var(--site-surface-muted); border-color: var(--site-border); min-width: 0;}
#keyboard-tester .keyboard-focus:focus {border-color: var(--site-accent); outline: none; box-shadow: 0 0 0 3px var(--site-accent-soft);}
#keyboard-tester .keyboard-prompt {color: var(--site-muted); margin: 0 0 14px; line-height: 1.5;}
#keyboard-tester .keyboard-layout {display: grid; grid-template-columns: minmax(0, 1fr) 144px 190px; gap: 8px 16px; overflow: visible; padding: 0; direction: ltr;}
#keyboard-tester .keyboard-section {display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0;}
#keyboard-tester .keyboard-section-heading {font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--site-muted); margin: 0;}
#keyboard-tester .keyboard-section-scroll {overflow-x: auto; padding: 0 0 4px; overscroll-behavior-x: contain;}
#keyboard-tester .keyboard-main-rows {display: grid; gap: 6px; min-width: 640px;}
#keyboard-tester .keyboard-row {display: flex; justify-content: stretch; gap: 5px; min-width: 0;}
#keyboard-tester .keyboard-key {position: relative; display: flex; flex: 1 1 0; min-width: 0; max-width: none; min-height: 40px; padding: 7px 2px; border: 1px solid var(--site-border); border-radius: 5px; background: var(--site-surface); color: var(--site-text); box-shadow: 0 2px 0 var(--site-border); font-size: 12px; font-weight: 600; line-height: 1.2; user-select: none;}
#keyboard-tester .keyboard-key-text {overflow-wrap: anywhere; text-align: center;}
#keyboard-tester .keyboard-key-state {position: absolute; top: 1px; inset-inline-end: 2px; font-size: 9px; line-height: 1;}
#keyboard-tester .keyboard-key-backspace {flex-grow: 2;}
#keyboard-tester .keyboard-key-tab, #keyboard-tester .keyboard-key-backslash {flex-grow: 1.5;}
#keyboard-tester .keyboard-key-capslock {flex-grow: 1.75;}
#keyboard-tester .keyboard-key-enter {flex-grow: 2.25;}
#keyboard-tester .keyboard-key-shiftleft, #keyboard-tester .keyboard-key-shiftright {flex-grow: 2.25;}
#keyboard-tester .keyboard-main-rows[data-layout="abnt2"] .keyboard-key-shiftleft {flex-grow: 1.25;}
#keyboard-tester .keyboard-main-rows[data-layout="abnt2"] .keyboard-key-shiftright {flex-grow: 1.25;}
#keyboard-tester .keyboard-key-space {flex-grow: 5.5;}
#keyboard-tester .keyboard-nav-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 40px; gap: 6px 5px;}
#keyboard-tester .keyboard-nav-grid .keyboard-key {font-size: 10px;}
#keyboard-tester .keyboard-numpad-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, 40px); gap: 6px 5px;}
#keyboard-tester .keyboard-numpad-grid .keyboard-key {font-size: 12px;}
#keyboard-tester .keyboard-numpad-grid .keyboard-key-numlock {font-size: 10px;}
#keyboard-tester .keyboard-key.is-tested, #keyboard-tester .keyboard-swatch.is-tested {background: #e5f6eb; border-color: #70b58b; color: #166534;}
#keyboard-tester .keyboard-key.is-active, #keyboard-tester .keyboard-swatch.is-active {background: #2563eb; color: #fff; border-color: #1d4ed8; box-shadow: none;}
#keyboard-tester .keyboard-key.is-active {transform: translateY(2px);}
#keyboard-tester .keyboard-key-help {margin: 12px 0 0;}
#keyboard-tester .keyboard-swipe-help {display: none; margin: 10px 0 0;}
#keyboard-tester .keyboard-test-stats {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; text-align: center;}
#keyboard-tester .keyboard-test-stats .tool-metric {min-width: 0; padding: 12px 6px; background: var(--site-surface-muted); border-radius: 8px;}
#keyboard-tester .keyboard-test-stats .tool-metric-value {display: block; font-size: 26px; overflow-wrap: anywhere;}
#keyboard-tester .keyboard-test-stats .tool-metric-label {display: block; margin-top: 4px; font-size: 13px; line-height: 1.5;}
#keyboard-tester #keyboard-progress {display: block; width: 100%; height: 8px; accent-color: #16a34a; border: 0; border-radius: 6px; overflow: hidden;}
#keyboard-tester #keyboard-progress::-webkit-progress-bar {background: var(--site-border); border-radius: 6px;}
#keyboard-tester #keyboard-progress::-webkit-progress-value {background: #16a34a; border-radius: 6px;}
#keyboard-tester #keyboard-progress::-moz-progress-bar {background: #16a34a;}
#keyboard-tester .keyboard-metrics {grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px;}
#keyboard-tester .keyboard-metrics .tool-metric-value {font-size: 18px; min-width: 0; overflow-wrap: anywhere;}
#keyboard-tester .keyboard-remaining {margin-top: 16px; border-top: 1px solid var(--site-border); padding-top: 14px;}
#keyboard-tester .keyboard-remaining summary {cursor: pointer; font-weight: 600; min-height: 32px; line-height: 1.5; color: var(--site-text);}
#keyboard-tester .keyboard-remaining ul {display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 0; list-style: none; direction: ltr;}
#keyboard-tester .keyboard-remaining li {padding: 5px 8px; border: 1px solid var(--site-border); border-radius: 5px; color: var(--site-muted); background: var(--site-surface-muted); font-size: 12px; overflow-wrap: anywhere;}
#keyboard-tester #keyboard-status:empty {display: none;}
#keyboard-tester:fullscreen, #keyboard-tester.is-keyboard-fullscreen {padding: 20px; background: var(--site-bg); overflow-y: auto; width: 100%; max-width: none; margin: 0;}
#keyboard-tester.is-keyboard-fullscreen {position: fixed; inset: 0; z-index: 10000; height: 100%; height: 100dvh; box-sizing: border-box;}
#keyboard-tester:fullscreen > .tool-panel, #keyboard-tester.is-keyboard-fullscreen > .tool-panel {width: 100%; max-width: var(--site-content-max); margin: 0 auto;}
html[data-theme="dark"] #keyboard-tester .keyboard-key.is-tested, html[data-theme="dark"] #keyboard-tester .keyboard-swatch.is-tested {background: #173d2c; border-color: #3c8056; color: #b6efc8;}
html[data-theme="dark"] #keyboard-tester .keyboard-key.is-active, html[data-theme="dark"] #keyboard-tester .keyboard-swatch.is-active {background: #285dcc; color: #fff; border-color: #8ab4ff;}
@media (max-width: 1100px) {
    #keyboard-tester .keyboard-layout {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
    #keyboard-tester .keyboard-section-main {grid-column: 1 / -1;}
    #keyboard-tester .keyboard-nav-grid {max-width: 190px;}
    #keyboard-tester .keyboard-numpad-grid {max-width: 230px;}
}
@media (max-width: 740px) {
    #keyboard-tester .keyboard-focus {padding: 12px;}
    #keyboard-tester .keyboard-main-rows {min-width: 640px;}
    #keyboard-tester .keyboard-swipe-help {display: block;}
    #keyboard-tester .keyboard-toolbar {gap: 12px;}
    #keyboard-tester .keyboard-layout-field {flex: 1 1 100%;}
    #keyboard-tester .keyboard-actions {width: 100%;}
    #keyboard-tester .keyboard-test-stats {gap: 7px;}
    #keyboard-tester .keyboard-test-stats .tool-metric-value {font-size: 22px;}
    #keyboard-tester .keyboard-metrics {grid-template-columns: repeat(2, minmax(0, 1fr));}
    #keyboard-tester .keyboard-metrics > :last-child {grid-column: 1 / -1;}
    #keyboard-tester:fullscreen, #keyboard-tester.is-keyboard-fullscreen {padding: 8px;}
}
@media (prefers-reduced-motion: reduce) {
    #keyboard-tester .keyboard-key {transition: none;}
}