#keyboard-guide{margin:24px 0;padding:24px;background:#edf2e8;border:1px solid #c8d7c1;border-radius:16px;color:#213d31}
#keyboard-guide h3{margin-top:0}.kb-controls{display:flex;gap:20px;flex-wrap:wrap}.kb-controls label{display:grid;gap:6px;font-weight:700}.kb-controls select{font:inherit;padding:8px;background:white;border:1px solid #71866b;border-radius:6px;color:#213d31}.kb-caption{font-size:13px}.kb-board{padding:18px;background:#d8e0d2;border-radius:12px}.kb-row{display:flex;justify-content:center;gap:6px;margin:6px 0}.kb-row-2{padding-left:3%}.kb-row-3{padding-left:7%}.kb-row-5{flex-wrap:wrap;margin-top:16px}.kb-key{min-width:0;flex:1;max-width:70px;height:48px;border:1px solid #b8c3b2;border-bottom-width:4px;border-radius:7px;background:#f6f7f2;color:#65715f;font:600 16px/1 sans-serif;cursor:pointer;padding:3px}.kb-row-5 .kb-key{font-size:12px;min-width:80px;max-width:100px}.kb-assigned{background:#244e3c;color:#fff;border-color:#173b2b}.kb-key[aria-pressed=true]{outline:3px solid #bf7809;outline-offset:1px}.kb-key:focus-visible{outline:3px solid #166ad3;outline-offset:2px}.kb-space{max-width:340px;flex:5}.kb-detail{margin-top:18px;padding:18px;background:white;border-radius:8px;min-height:110px}.kb-detail p{margin-bottom:0}
@media(max-width:600px){#keyboard-guide{padding:12px}.kb-board{padding:6px}.kb-row{gap:3px}.kb-key{height:42px;font-size:13px;border-radius:4px}.kb-controls{gap:10px}.kb-controls select{max-width:100%;font-size:14px}}
@media print{#keyboard-guide{break-inside:avoid}.kb-controls{display:none}.kb-assigned{border:2px solid #213d31}}