.keyboard-surface {overflow-x:auto; padding:20px; background:#e7ebf1; border:2px solid transparent; border-radius:18px; outline:none;}
.keyboard-surface:focus {border-color:#2563eb; box-shadow:0 0 0 3px #2563eb20;}
.keyboard-board {display:flex; gap:16px; min-width:740px; user-select:none;}
.keyboard-main {flex:1; min-width:550px;}
.keyboard-row {display:flex; gap:5px; margin-bottom:6px; height:48px;}
.keyboard-row:first-child {height:36px; margin-bottom:16px;}
.keyboard-key {display:flex; flex:1; min-width:0; align-items:center; justify-content:center; background:#fff; border:1px solid #c1cad6; border-bottom:3px solid #aeb9c8; border-radius:6px; font-size:12px; color:#334155; padding:3px; white-space:pre-line; text-align:center; transition:background .08s;}
.keyboard-key.tested {background:#dcfce7; border-color:#65a880; color:#14532d;}
.keyboard-key.pressed {background:#2563eb; border-color:#1d4ed8; color:#fff; transform:translateY(1px);}
.keyboard-key.optional {border-style:dashed;}
.keyboard-navigation {width:134px; flex-shrink:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:36px 48px 48px 48px 48px 48px; gap:6px;}
.keyboard-numpad {width:178px; flex-shrink:0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:36px repeat(5,48px); gap:6px;}
.keyboard-board:has(.keyboard-numpad) {min-width:980px;}
.keyboard-arrows {flex:3; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr; gap:3px;}
.keyboard-arrows .keyboard-key {font-size:10px; padding:0;}
.key-dot {display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; border:1px solid #aeb9c8;}
.key-dot.untested {background:white;} .key-dot.pressed {background:#2563eb;} .key-dot.tested {background:#86efac;}
.keyboard-legend {font-size:13px;} .keyboard-spacer {flex:1;}

/* Keep all sections visible; navigation and numpad move below on smaller screens. */
@media (max-width: 1399.98px) {
    .keyboard-board, .keyboard-board:has(.keyboard-numpad) { min-width: 0; flex-wrap: wrap; }
    .keyboard-main { flex: 1 0 100%; min-width: 0; }
    .keyboard-navigation, .keyboard-numpad { margin-top: 8px; }
}
@media (max-width: 575.98px) {
    .keyboard-surface { padding: 8px; border-radius: 12px; }
    .keyboard-board { gap: 12px; }
    .keyboard-row { gap: 2px; height: 38px; margin-bottom: 4px; }
    .keyboard-row:first-child { height: 30px; margin-bottom: 10px; }
    .keyboard-key { font-size: clamp(7px, 2vw, 11px); padding: 1px; border-radius: 4px; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
    .keyboard-arrows { gap: 2px; }
    .keyboard-arrows .keyboard-key { font-size: 8px; }
    .keyboard-navigation { width: 112px; grid-template-rows: 32px repeat(5,38px); gap: 4px; }
    .keyboard-numpad { width: 148px; grid-template-rows: 32px repeat(5,38px); gap: 4px; }
    .keyboard-navigation .keyboard-key, .keyboard-numpad .keyboard-key { font-size: 11px; }
}