.keyboard-stage{display:block!important;padding:28px!important;outline:none;min-height:0!important}.keyboard-stage:focus-visible{outline:2px solid var(--accent,#f05b35);outline-offset:4px}.keyboard-status,.keyboard-legend{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px}.keyboard-status{margin-bottom:24px}.keyboard-legend{margin-top:22px;justify-content:flex-start;gap:22px}.keyboard-legend span{display:flex;align-items:center;gap:7px}.keyboard-scroll{overflow:auto;padding:4px 0 12px}.keyboard-board{display:flex;gap:14px;min-width:850px}.keyboard-main{flex:1}.keyboard-row{display:flex;gap:5px;margin-bottom:5px}.keyboard-key{min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;height:42px;background:#f5f3ee;border:1px solid #d5d1c9;border-bottom:3px solid #c3c0b9;border-radius:6px;font-family:inherit;font-size:11px;color:#707680;transition:background .08s,color .08s,transform .08s;user-select:none;white-space:nowrap}.keyboard-key.seen{color:#c54424;border-color:#df9d89;background:#fff0e9}.keyboard-key.pressed{background:#f05b35;color:#ffffff;border-color:#f05b35;transform:translateY(2px)}.keyboard-extra{display:grid;grid-template-columns:repeat(3,42px);gap:5px;align-content:start}.keyboard-extra .keyboard-key:last-child{grid-column:3}.keyboard-numpad{display:grid;grid-template-columns:repeat(4,34px);gap:5px;align-content:start}.key-dot{width:8px;height:8px;border-radius:2px;background:#fff0e9;display:inline-block;border:1px solid #df9d89}.key-dot.pressed{background:#f05b35}.is-listening .keyboard-status>.status{color:#f05b35}.mouse-check-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;margin:24px 0}.mouse-inspector{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:350px;padding:30px;user-select:none;touch-action:none}.mouse-outline{width:160px;height:226px;border:1px solid #aaa79f;border-radius:80px 80px 58px 58px;background:linear-gradient(135deg,#f8f6f1,#e1ddd5);padding:12px;box-shadow:inset 0 1px 0 #ffffff,0 20px 35px #0004;position:relative}.mouse-top{display:flex;height:108px;gap:5px}.mouse-part{color:#686d73;border:1px solid #c5c0b7;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;flex:1;transition:background .1s}.mouse-part span{font-size:11px}.mouse-part b{font-size:20px}.mouse-left{border-radius:60px 7px 8px 8px}.mouse-right{border-radius:7px 60px 8px 8px}.mouse-middle{flex:0 0 24px;border-radius:12px;height:62px;margin-top:20px;background:repeating-linear-gradient(#c5c0b7 0 3px,#e8e4dc 3px 6px)}.mouse-middle b{font-size:13px}.mouse-part.seen{border-color:#f05b35;color:#f05b35}.mouse-part.pressed{background:#f05b35;color:#ffffff}.mouse-brand{text-align:center;font-size:11px;letter-spacing:3px;line-height:1.8;color:#92918a;margin-top:32px}.mouse-brand small{font-size:8px;letter-spacing:2px}.mouse-readings{padding:30px}.mouse-readout{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #dcd8d0;padding:20px 0;font-size:13px}.mouse-readout strong{color:#f05b35;font-family:monospace;white-space:nowrap}.mouse-readings>.hint{margin-top:24px}.drag-panel{padding:26px;margin-bottom:18px}.drag-panel h3{margin-top:0}.drag-track{height:68px;position:relative;background:#eeeae2;border:1px dashed #c9c1b5;border-radius:36px;margin-top:24px;margin-bottom:16px;overflow:hidden}.drag-handle{position:absolute;left:0;top:4px;width:58px;height:58px;border:1px solid #d74c29;background:#f05b35;color:#ffffff;border-radius:50%;font-size:26px;cursor:grab;touch-action:none;z-index:1}.drag-handle.dragging{cursor:grabbing;background:#fc8d71;box-shadow:0 0 30px #f05b3525}.drag-track-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:4px;color:#979184;pointer-events:none}.typing-controls .field{display:flex;flex-direction:column;gap:8px;font-size:11px;color:#6e7479}.typing-controls select{background:#ffffff;color:#27323c;border:1px solid #d8d3cb;padding:11px 35px 11px 13px;border-radius:9px;font:inherit;font-size:13px}.typing-controls{align-items:flex-end}.typing-panel{padding:30px;margin:22px 0 16px}.typing-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:25px}.typing-passage{font-size:24px;line-height:1.9;letter-spacing:.035em;color:#aaa69f;max-height:180px;overflow-y:auto;overflow-wrap:anywhere;white-space:pre-wrap;position:relative;scrollbar-width:thin;scrollbar-color:#46513f transparent;font-weight:500}.typing-passage span{border-radius:2px}.typing-passage .typed-correct{color:#16713b;background:#e7f4eb}.typing-passage .typed-wrong{color:#b42318;background:#fee4e2;text-decoration:underline wavy;text-underline-offset:5px}.typing-passage .typing-composing{color:#516c87;background:#edf2f7;border-bottom:2px dashed #6b8298}.typing-feedback{display:flex;align-items:center;gap:18px;margin-top:16px;font-size:12px}.typing-feedback b{font-family:var(--mono,monospace);margin-left:4px}.typing-match-count{color:#16713b}.typing-error-count{color:#b42318}.typing-feedback [data-composition-note]{color:#516c87}.typing-passage .typing-caret{border-left:2px solid #f05b35;margin-left:-2px;color:#f05b35;background:#f05b3515}.typing-input{display:block;box-sizing:border-box;width:100%;resize:vertical;min-height:100px;margin-top:25px;padding:18px;background:#faf9f6;border:1px solid #d9d3c9;border-radius:12px;color:#24303b;font:inherit;font-size:17px;line-height:1.7;outline:none}.typing-input:focus{border-color:#f05b35;box-shadow:0 0 0 3px #f05b3510}.typing-input:disabled{opacity:.5}.typing-input::placeholder{color:#95938c}.typing-progress{height:3px;background:#e3ded4;border-radius:2px;margin-top:20px;overflow:hidden}.typing-progress i{display:block;height:100%;background:#16713b;transition:width .15s}.typing-recap{padding:25px;margin-top:20px}.typing-recap h3{margin-top:0}.typing-recap p{font-size:14px;line-height:1.8;color:#67717a}.stat-value small{font-size:14px;margin-left:6px;color:#7b7c77}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){.keyboard-stage{padding:18px!important}.keyboard-status{align-items:flex-start}.mouse-check-grid{grid-template-columns:1fr}.mouse-inspector{min-height:310px}.typing-panel{padding:20px}.typing-passage{font-size:20px;max-height:150px}.typing-controls .field{flex:1;min-width:100px}.typing-controls select{width:100%}.typing-caption .status{font-size:12px}.mouse-readings{padding:22px}}

.keyboard-stage{background:#eeebe5!important;border-color:#d4cec4!important;border-radius:15px!important}
.keyboard-board{background:#e4e0d8;border:1px solid #d2ccc1;border-radius:12px;padding:13px;box-shadow:0 5px 0 #d7d2c8,0 13px 20px #2b262009}
.keyboard-key{box-shadow:inset 0 1px 0 #fff;font-weight:500;height:44px}
.keyboard-key.seen{box-shadow:inset 0 1px 0 #fff5}
.keyboard-key.pressed{box-shadow:0 3px 9px #f05b3533;border-bottom-color:#bf3f21}
.keyboard-coverage{padding:22px 3px 10px}
.keyboard-coverage>div:first-child{display:flex;justify-content:space-between;align-items:center;font:11px var(--mono,monospace);letter-spacing:1px;color:#737a80}
.keyboard-coverage strong{font:600 24px var(--mono,monospace);color:#f05b35}
.keyboard-coverage-track{height:6px;background:#e2ddd4;border-radius:5px;overflow:hidden;margin:10px 0}
.keyboard-coverage-track i{display:block;height:100%;width:0;background:#f05b35;transition:width .12s}
.keyboard-coverage p{margin:8px 0;font-size:11px}
.mouse-inspector{background:radial-gradient(ellipse at center,#fff,#f1eee7)!important;border-color:#ddd7ce!important}
.mouse-outline{box-shadow:inset 0 1px 0 #fff,0 24px 40px #3d342011}
.mouse-part.pressed{color:#fff!important}
.mouse-events{padding:24px}
.mouse-events-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:17px}
.mouse-events-heading h3{margin:5px 0 0;font-size:19px;letter-spacing:-.6px}
.mouse-events-heading>span{font:10px var(--mono,monospace);color:#858783}
.mouse-events ol{padding:0;margin:0;list-style:none;max-height:240px;overflow:auto;scrollbar-width:thin}
.mouse-events li{display:grid;grid-template-columns:80px 85px 1fr;gap:12px;padding:10px 0;border-top:1px solid #eee9e1;font-size:12px;align-items:center;color:#737b82}
.mouse-events time{font:11px var(--mono,monospace);color:#9a968c}
.mouse-events li b{font:11px var(--mono,monospace);color:#e85d38}
.mouse-events .mouse-event-empty{display:block;padding:20px 0;font-size:12px;color:#91918b}
@media(max-width:760px){.keyboard-board{padding:10px}.mouse-events li{grid-template-columns:64px 68px 1fr;gap:7px}.mouse-events{padding:18px}}
@media(prefers-reduced-motion:reduce){.keyboard-coverage-track i,.keyboard-key{transition:none}}