:root{--key-base-size:clamp(34px, 3.2vw, 50px);--key-gap:clamp(3px, .35vw, 6px);--cluster-gap:clamp(10px, 1.2vw, 18px)}.keyboard-container{scrollbar-width:thin;scrollbar-color:#2d3142 transparent;-webkit-overflow-scrolling:touch;justify-content:safe center;align-items:center;width:100%;padding:14px 4px;display:flex;overflow-x:auto}.keyboard-frame{gap:var(--cluster-gap);user-select:none;touch-action:manipulation;background:linear-gradient(#11131c 0%,#07080c 100%);border:1px solid #ffffff17;border-radius:14px;margin:0 auto;padding:clamp(12px,1.4vw,20px);display:inline-flex;box-shadow:0 24px 48px -12px #000000e6,0 0 0 1px #000c,inset 0 1px #ffffff1f}.keyboard-cluster{gap:var(--key-gap);flex-direction:column;display:flex}.keyboard-row{gap:var(--key-gap);display:flex}.key-spacer{width:calc(var(--key-base-size) * var(--key-u,1) + var(--key-gap) * (var(--key-u,1) - 1));height:var(--key-base-size);pointer-events:none;visibility:hidden}.key-split-col{justify-content:space-between;gap:var(--key-gap);width:calc(var(--key-base-size) * var(--key-u,1) + var(--key-gap) * (var(--key-u,1) - 1));height:var(--key-base-size);flex-direction:column;display:flex}.key-subspacer{height:calc((var(--key-base-size) - var(--key-gap)) / 2);pointer-events:none;visibility:hidden;width:100%}.key--half-height{height:calc((var(--key-base-size) - var(--key-gap)) / 2)!important;width:100%!important}.key--half-height .key-cap{padding:1px 2px}.key--half-height .key-legend{font-size:clamp(8px,.75vw,11px)}.key{--key-u:1;--key-h:1;width:calc(var(--key-base-size) * var(--key-u,1) + var(--key-gap) * (var(--key-u,1) - 1));height:calc(var(--key-base-size) * var(--key-h,1) + var(--key-gap) * (var(--key-h,1) - 1));cursor:default;will-change:transform, box-shadow;background:#11131a;border-radius:6px;transition:transform 60ms cubic-bezier(.2,0,0,1),box-shadow 60ms,background-color .12s;position:relative;box-shadow:0 3px #050608,0 4px 6px #0009}.key--has-gap{margin-left:calc(var(--key-base-size) * var(--gap-before,.5) + var(--key-gap) * var(--gap-before,.5))}.key-cap{background:linear-gradient(#1e212d 0%,#14161f 100%);border:1px solid #ffffff24;border-color:#ffffff24 #0006 #0009 #ffffff0f;border-radius:5px;flex-direction:column;justify-content:center;align-items:center;padding:2px 4px;transition:inherit;display:flex;position:absolute;inset:1px 1px 3px}.key-legend{color:#94a3b8;letter-spacing:-.2px;text-align:center;font-family:JetBrains Mono,monospace;font-size:clamp(9px,.85vw,12px);font-weight:600;line-height:1;transition:color .1s}.key-sublegend{color:#64748b;font-family:JetBrains Mono,monospace;font-size:clamp(8px,.65vw,10px);font-weight:500;line-height:1;position:absolute;top:3px;left:5px}.key-altgr-legend{color:#0ea5e9;font-family:JetBrains Mono,monospace;font-size:clamp(8px,.65vw,10px);font-weight:500;line-height:1;position:absolute;bottom:3px;right:5px}.key-dwell-badge{color:#22c55ecc;pointer-events:none;font-family:JetBrains Mono,monospace;font-size:8px;font-weight:600;line-height:1;position:absolute;bottom:2px;left:4px}.key--active{transform:translateY(2.5px);box-shadow:0 .5px #050608,0 0 18px #38bdf899}.key--active .key-cap{background:linear-gradient(#38bdf866 0%,#0ea5e940 100%);border-top-color:#38bdf8;border-bottom-color:#38bdf866}.key--active .key-legend,.key--active .key-sublegend{color:#fff;text-shadow:0 0 8px #38bdf8e6}.key--tested{box-shadow:0 3px #052e16,0 4px 10px #22c55e40}.key--tested .key-cap{background:linear-gradient(#144626 0%,#0d2b18 100%);border:1px solid #4ade8099;border-color:#4ade8099 #052e1699 #052e16cc #4ade804d}.key--tested .key-legend{color:#4ade80;text-shadow:0 0 6px #4ade8066}.key--tested .key-sublegend{color:#86efac}.key--tested .key-dwell-badge{color:#4ade80}.key--chatter{animation:1s ease-in-out infinite chatter-alert-pulse;box-shadow:0 3px #450a0a,0 0 20px #ef4444a6}.key--chatter .key-cap{background:linear-gradient(#590e18 0%,#34070d 100%);border:1px solid #7f1d1d;border-color:#ef4444 #7f1d1d #7f1d1d #ef4444}.key--chatter .key-legend,.key--chatter .key-sublegend{color:#fca5a5;text-shadow:0 0 8px #ef4444e6}.key--chatter .key-dwell-badge{color:#ef4444;font-weight:700}@keyframes chatter-alert-pulse{0%,to{box-shadow:0 0 8px #ef444480}50%{box-shadow:0 0 24px #ef4444f2}}.key--double-register{animation:1s ease-in-out infinite double-register-alert-pulse;box-shadow:0 3px #451a03,0 0 20px #f59e0bb3}.key--double-register .key-cap{background:linear-gradient(#602506 0%,#361403 100%);border:1px solid #9a3412;border-color:#f59e0b #9a3412 #9a3412 #f59e0b}.key--double-register .key-legend,.key--double-register .key-sublegend{color:#fde68a;text-shadow:0 0 8px #f59e0be6}.key--double-register .key-dwell-badge{color:#f59e0b;font-weight:700}@keyframes double-register-alert-pulse{0%,to{box-shadow:0 0 8px #f59e0b80}50%{box-shadow:0 0 24px #f59e0bf2}}.key-hover-tooltip{-webkit-backdrop-filter:blur(14px);pointer-events:none;z-index:9999;background:#0a0c12f5;border:1px solid #ffffff24;border-radius:8px;min-width:170px;padding:10px 14px;position:fixed;box-shadow:0 14px 30px -4px #000000d9}@media (prefers-reduced-motion:reduce){.key{transition:none!important}.key--chatter,.key--double-register{animation:none!important}}