.keyboard-capture{overflow:auto;padding:18px;border:1px solid var(--glass-border);border-radius:20px;background:var(--glass-bg-strong)}.keyboard-capture:focus{outline:3px solid var(--accent);outline-offset:3px}.keyboard-board{display:flex;gap:14px;min-width:940px;user-select:none}.keyboard-main{flex:1;min-width:0}.keyboard-row{display:flex;gap:5px;margin-bottom:6px}.keyboard-row:first-child{margin-bottom:14px}.keyboard-key{display:flex;align-items:center;justify-content:center;flex:var(--key-width,1);min-width:0;height:45px;padding:4px;border:1px solid var(--glass-border);border-bottom-width:3px;border-radius:8px;background:var(--glass-bg);color:var(--text-primary);font:600 11px/1.2 system-ui,sans-serif;text-align:center;overflow-wrap:anywhere}.keyboard-key.is-tested{background:#c5efdb;border-color:#53b98a;color:#195b3c}.keyboard-key.is-held{background:#217eb9;border-color:#165583;color:#fff;transform:translateY(1px)}.keyboard-nav{width:134px;flex-shrink:0}.keyboard-small-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.keyboard-arrows{margin-top:63px}.keyboard-pad{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,45px);gap:5px;width:182px;flex-shrink:0;margin-top:59px}.keyboard-pad .keyboard-key{height:auto}.keyboard-pad .key-tall{grid-row:span 2}.keyboard-pad .key-wide{grid-column:span 2}.keyboard-help{margin:14px 0 18px}.keyboard-readout{display:flex;flex-wrap:wrap;gap:20px;padding:18px;border:1px solid var(--glass-border);border-radius:14px}.keyboard-readout>div{flex:1;min-width:160px}.keyboard-readout span{font-size:.78rem;color:var(--text-muted)}.keyboard-readout strong{display:block;font-size:.9rem;margin-top:6px;overflow-wrap:anywhere}.keyboard-readout p{width:100%;font-size:.82rem;margin:0;color:var(--text-muted)}.keyboard-guide{margin-top:18px;padding:16px;border:1px solid var(--glass-border);border-radius:14px}.keyboard-guide summary{font-size:.9rem;font-weight:750;cursor:pointer}.keyboard-guide p{font-size:.85rem;line-height:1.95;color:var(--text-muted);margin:12px 0 0}.keyboard-lab :is(a,button,select,input):focus-visible{outline:3px solid var(--accent);outline-offset:3px}.keyboard-lab button:disabled{opacity:.5}
@media(max-width:767px){.keyboard-heading{align-items:start;flex-direction:column}.keyboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.keyboard-capture{padding:12px}.keyboard-board{min-width:890px}.keyboard-settings>label{min-width:100%}.keyboard-stats>div{padding:12px}.keyboard-readout{gap:14px}}
.keyboard-lab.section{padding-block:35px}.keyboard-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.keyboard-heading h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:850;line-height:1.7;margin:8px 0}.keyboard-heading p,.keyboard-help{font-size:.86rem;color:var(--text-muted);line-height:1.9;margin:0}.keyboard-kicker{color:var(--accent);font-size:.85rem;font-weight:750}.keyboard-settings{display:flex;align-items:end;flex-wrap:wrap;gap:16px;padding:18px;border:1px solid var(--glass-border);border-radius:16px;background:var(--glass-bg)}.keyboard-settings>label{font-size:.83rem;font-weight:700;flex:1;min-width:190px}.keyboard-settings select{display:block;width:100%;min-height:44px;margin-top:8px;border:1px solid var(--glass-border);border-radius:10px;padding:8px;background:var(--glass-bg-strong);color:var(--text-primary)}.keyboard-settings .keyboard-checkbox{display:flex;align-items:center;gap:8px;min-height:44px}.keyboard-checkbox input{width:18px;height:18px;accent-color:var(--accent)}.keyboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}.keyboard-stats>div{border:1px solid var(--glass-border);border-radius:14px;padding:14px 18px;background:var(--glass-bg-strong)}.keyboard-stats span{font-size:.79rem;color:var(--text-muted)}.keyboard-stats strong{display:block;font-size:1.5rem;margin-top:6px;color:var(--accent)}.keyboard-session{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}.keyboard-session>span{font-size:.83rem;color:var(--text-muted)}.keyboard-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:.78rem;margin-bottom:12px}.keyboard-legend span{display:flex;align-items:center;gap:6px}.keyboard-legend i{width:12px;height:12px;border-radius:4px;border:1px solid var(--glass-border)}.key-legend--idle{background:var(--glass-bg)}.key-legend--tested{background:#b6ebd0}.key-legend--held{background:#217eb9}
.keyboard-lab.section{padding-block:20px}.keyboard-heading{margin-bottom:14px;gap:12px}.keyboard-heading h1{font-size:clamp(1.4rem,2.5vw,1.85rem);margin:3px 0}.keyboard-settings{padding:12px;gap:12px}.keyboard-settings select{margin-top:5px}.keyboard-stats{gap:8px;margin:10px 0}.keyboard-stats>div{padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}.keyboard-stats strong{font-size:1.15rem;margin:0;white-space:nowrap}.keyboard-session{margin-bottom:8px}.keyboard-session i{font-size:.5rem;color:var(--accent);margin-left:5px}.keyboard-legend{margin-bottom:8px;gap:12px}.keyboard-capture{padding:12px;border-radius:14px}.keyboard-help{margin:8px 0 10px;font-size:.79rem}.keyboard-readout{padding:10px 14px;gap:10px}.keyboard-readout strong{margin-top:3px;font-size:.84rem}.keyboard-readout p:empty{display:none}.keyboard-guide{margin-top:10px;padding:12px}.keyboard-guide summary{font-size:.83rem}@media(max-width:767px){.keyboard-heading{gap:8px}.keyboard-settings{gap:8px}.keyboard-stats>div{padding:8px;display:block}.keyboard-stats strong{margin-top:3px}.keyboard-readout>div{min-width:140px}}