.diag-wrap{max-width:1100px;margin:30px auto 70px;color:var(--text-main);padding:0 10px}.diag-links{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}.diag-links a,.diag-button{border:1px solid #66528c;background:#211934;color:#eee;border-radius:8px;padding:10px 15px;text-decoration:none;cursor:pointer;font:inherit}.diag-links a:hover,.diag-button:hover{background:#443064}.diag-button:disabled{opacity:.45;cursor:not-allowed}.diag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.diag-card,.diag-panel{display:block;background:rgba(19,14,34,.93);border:1px solid #382c54;border-radius:12px;padding:24px;color:#eee;text-decoration:none}.diag-card:hover{border-color:#a67be6;transform:translateY(-2px)}.diag-card h2,.diag-panel h2{font-size:1.25rem;margin:10px 0}.diag-card p,.diag-panel p,.diag-intro{color:#b5adc9;line-height:1.6}.diag-card strong{color:#c3a4fa}.diag-symbol{font-size:2.2rem;color:#c7a2ff}.diag-panel{margin-top:18px}.diag-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:14px 0}.diag-controls label{color:#c9c1d8}.diag-controls input,.diag-controls select{accent-color:#b58af4}.diag-controls input[type=number]{width:100px;background:#181226;color:white;border:1px solid #62527d;padding:9px;border-radius:6px}.diag-status{color:#d8c3ff;min-height:24px}.keyboard-layout{overflow-x:auto;padding:15px 0}.keyboard-row{display:flex;gap:5px;margin-bottom:6px;min-width:780px}.key{height:45px;min-width:42px;flex:1;display:flex;align-items:center;justify-content:center;background:#211a30;border:1px solid #594970;border-bottom:3px solid #594970;border-radius:6px;font-size:.75rem;color:#ddd;user-select:none}.key.wide{flex:1.7}.key.space{flex:5}.key.pressed{background:#287e66;border-color:#65e5b1;color:#fff}.key.down{box-shadow:0 0 0 2px #e2c5ff inset}.diag-metrics{display:flex;gap:25px;flex-wrap:wrap}.diag-metrics strong{color:#d9b9ff}.display-stage{position:fixed;inset:0;z-index:99999;background:#000;display:none;align-items:center;justify-content:center}.display-stage.on{display:flex}.display-pattern{position:absolute;inset:0}.display-overlay{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:#171223e8;color:white;padding:12px 16px;border-radius:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;max-width:95%;font:14px system-ui}.display-overlay button{background:#453364;color:white;border:1px solid #b99ce4;border-radius:6px;padding:8px 12px;cursor:pointer}.display-overlay.hidden{opacity:0;pointer-events:none}.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:700px){.diag-wrap{margin-top:15px}.diag-panel{padding:16px}.diag-metrics{gap:12px}.display-overlay{font-size:12px}}

/* Persistent diagnostics shortcut, shown on every site page */
.diagnostics-shortcut{position:fixed;right:18px;bottom:18px;z-index:9999;display:inline-flex;align-items:center;gap:8px;background:#6836b8;color:#fff!important;border:1px solid #b993ff;border-radius:999px;padding:12px 18px;text-decoration:none!important;font-weight:700;font-size:14px;box-shadow:0 5px 22px #0009;transition:transform .15s,background .15s}
.diagnostics-shortcut:hover,.diagnostics-shortcut:focus-visible{background:#8550d3;transform:translateY(-2px)}
@media(max-width:600px){.diagnostics-shortcut{right:10px;bottom:10px;padding:10px 13px;font-size:12px}}

/* Keyboard v3: clearly separated main, navigation, and numeric blocks */
.kb-scroll{overflow-x:auto;max-width:100%;padding:12px 0}.keyboard-layout{display:flex;gap:18px;width:max-content;min-width:0;padding:14px;background:#100d1b;border:1px solid #4e3c6e;border-radius:14px;outline-offset:3px}.kb-main,.kb-side,.kb-navigation,.kb-numpad{display:flex;flex-direction:column;gap:5px}.kb-side{justify-content:space-between}.kb-row{display:flex;gap:5px;margin:0;min-width:0}.kb-key{box-sizing:border-box;display:flex;align-items:center;justify-content:center;white-space:pre-line;text-align:center;flex:none;width:41px;height:43px;border-radius:7px;background:#282036;border:1px solid #635176;border-bottom:3px solid #635176;color:#f0eaf9;font:600 11px/1.2 system-ui;user-select:none}.kb-main .kb-row{width:720px}.kb-main .kb-row .kb-key{flex:1;width:0}.kb-main .kb-row .kb-key.kb-wide{flex:1.65}.kb-main .kb-row .kb-key.kb-space{flex:5}.kb-main .kb-row .kb-key.kb-mod{font-size:10px}.kb-side .kb-row{justify-content:flex-end}.kb-navigation .kb-row{min-height:43px}.kb-numpad{padding-top:10px}.kb-key.pressed{background:#277b60;border-color:#68e8b1;color:white}.kb-key.down{box-shadow:inset 0 0 0 2px #f2d5ff}.diag-controls select{background:#211934;border:1px solid #66528c;border-radius:8px;color:#fff;padding:9px;margin-left:6px;max-width:230px}.diagnostics-shortcut{left:18px!important;right:auto!important;bottom:18px!important}@media(max-width:600px){.diagnostics-shortcut{left:10px!important;right:auto!important;bottom:10px!important}}