.diagnostics,.keyboard-panel{margin-top:24px}.diagnostic-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}.diagnostic-grid article{padding:20px;background:#12121b;border:1px solid var(--line);border-radius:12px}.diagnostic-grid p,.keyboard-panel p{font-size:13px;line-height:1.65}.diagnostic-grid label{display:block;color:var(--muted);font-size:12px;margin:14px 0 8px}.diagnostic-grid select{max-width:160px}.diagnostic-grid progress{width:100%;accent-color:var(--purple)}button{font:600 12px system-ui;padding:11px 15px;border:1px solid #655080;background:#30223f;color:#f4eaff;border-radius:8px;cursor:pointer}button:hover{background:#48305e}button:disabled{opacity:.45;cursor:default}button:focus-visible,#keyboard-area:focus-visible{outline:3px solid var(--purple);outline-offset:4px}.button.tested{border-color:var(--green)}.button.tested .label:after{content:' ✓';color:var(--green)}.button.active.tested .label:after{color:#241640}.stick-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}.stick-trace path{fill:none;stroke:var(--green);stroke-width:1.5;opacity:.6}.keyboard-actions{display:flex;gap:12px;margin:20px 0}#keyboard-area{padding:18px;background:#12121b;border:1px solid var(--line);border-radius:12px;overflow:auto}#keyboard-area.testing{border-color:var(--purple)}#keyboard-map{min-width:710px;display:flex;flex-direction:column;gap:6px}.key-row{display:flex;gap:5px}.key{flex:1;min-width:0;text-align:center;padding:12px 3px;border:1px solid #494253;border-radius:6px;color:#c1b7cf;font-size:11px;background:#24202e}.key.wide{flex:1.8}.key.space{flex:6}.key.tested{border-color:#69a98b;color:var(--green)}.key.down{background:var(--purple);color:#211332;border-color:#e4d2ff}.key-row.numpad{margin-top:8px}.keyboard-panel .hint{color:var(--muted)}@media(max-width:650px){.diagnostic-grid{grid-template-columns:1fr}.diagnostics .section-heading{align-items:flex-start}.diagnostics .section-heading h2{max-width:190px}#keyboard-area{padding:10px}.keyboard-panel .section-heading{flex-wrap:wrap}}