.kbtest-stage{width:100%;overflow-x:hidden}.kbtest-area{width:100%;max-width:1280px;margin:0 auto;padding:18px;border-radius:18px;border:1px solid rgba(0,0,0,.08);background:#f8f9fcf5;box-shadow:0 12px 30px #00000014;box-sizing:border-box}.kbtest-content{color:#121418eb}.kbtest-heading{margin:0;color:#121418f5}.kbtest-sub{margin-top:10px;line-height:1.55;color:#121418c7}.kbtest-inputbar{margin-top:14px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:#fffffffa;box-sizing:border-box}.kbtest-inputlabel{font-size:14px;white-space:nowrap;color:#121418b3}.kbtest-typed{flex:1;min-height:22px;font-size:14px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#121418eb}.kbtest-clear{width:34px;height:34px;border-radius:12px;border:1px solid rgba(0,0,0,.14);background:linear-gradient(180deg,#f8f9fc,#ebeff7);color:#121418e0;box-shadow:0 1px #0000000d,0 10px 18px #00000014;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;font-size:20px;font-weight:600}.kbtest-clear:hover{box-shadow:0 1px #0000000f,0 14px 24px #0000001a}.kbtest-wrap{margin-top:14px;padding:14px;border-radius:18px;border:1px solid rgba(0,0,0,.08);background:#fffffffa;max-width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.kbtest-kbd{--u: clamp(16px, 2.1vw, 50px);--g: 8px;--kbdH: calc(var(--u) * 6 + var(--g) * 5);--mainW: calc(var(--u) * 16 + var(--g) * 13);display:flex;align-items:flex-start;gap:14px;width:-moz-max-content;width:max-content}.kbtest-block{display:flex;flex-direction:column;gap:var(--g)}.kbtest-row{display:flex;gap:var(--g)}.kbtest-spacer{width:calc(var(--u) * .5)}.kbtest-key{--w: 1;width:calc(var(--u) * var(--w));height:var(--u);border-radius:12px;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;border:1px solid rgba(0,0,0,.12);background:linear-gradient(180deg,#f8f9fc,#ebeff7);color:#121418e6;font-size:13px;letter-spacing:.1px;white-space:nowrap;box-shadow:0 1px #0000000d,0 6px 14px #00000014;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease,transform 80ms ease}.kbtest-key:hover{box-shadow:0 1px #0000000f,0 10px 18px #0000001a;transform:translateY(-1px)}.kbtest-key.kbtest-is-seen{background:#ffc10738;border-color:#ffc1078c;box-shadow:0 0 0 2px #ffc10724;transform:none}.kbtest-key.kbtest-is-down{background:#2ecc7157;border-color:#2ecc7199;box-shadow:0 0 0 2px #2ecc7124,0 10px 18px #0000001a;transform:translateY(1px)}.kbtest-key.kbtest-is-seen:hover,.kbtest-key.kbtest-is-down:hover{transform:none}.kbtest-w-12{--w: 1.2}.kbtest-w-13{--w: 1.3}.kbtest-w-15{--w: 1.5}.kbtest-w-18{--w: 1.8}.kbtest-w-20{--w: 2}.kbtest-w-22{--w: 2.2}.kbtest-w-24{--w: 2.4}.kbtest-w-28{--w: 2.8}.kbtest-w-60{--w: 6}.kbtest-actions{margin-top:12px;display:flex;justify-content:flex-end;gap:10px}.kbtest-btn{padding:10px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.14);background:linear-gradient(180deg,#f8f9fc,#ebeff7);color:#121418eb;box-shadow:0 1px #0000000d,0 10px 18px #00000014;cursor:pointer}.kbtest-btn:hover{box-shadow:0 1px #0000000f,0 14px 24px #0000001a}.kbtest-arrows{display:flex;flex-direction:column;gap:var(--g);align-items:center;margin-top:auto}.kbtest-arrows-up{display:flex;justify-content:center}.kbtest-arrows-row{display:flex;gap:var(--g)}.kbtest-numpad{height:var(--kbdH)}.kbtest-np-grid{display:grid;grid-template-columns:repeat(3,var(--u)) var(--u);grid-template-rows:repeat(5,1fr);gap:var(--g);height:100%}.kbtest-np-grid .kbtest-key{width:100%;height:100%;min-height:var(--u)}.kbtest-np-minus{grid-column:4;grid-row:1}.kbtest-np-plus{grid-column:4;grid-row:2 / span 2}.kbtest-np-enter{grid-column:4;grid-row:4 / span 2}.kbtest-np-zero{grid-column:1 / span 2;grid-row:5}.kbtest-side{height:var(--kbdH);--sideW: calc(var(--u) * 4.2 + var(--g) * 2);width:var(--sideW);flex:0 0 var(--sideW)}.kbtest-side .kbtest-arrows{margin-top:auto}.kbtest-side .kbtest-key{--w: 1.25}.kbtest-side .kbtest-arrows .kbtest-key{--w: 1}.kbtest-side .kbtest-key[data-code=PrintScreen],.kbtest-side .kbtest-key[data-code=ScrollLock],.kbtest-side .kbtest-key[data-code=Pause],.kbtest-side .kbtest-key[data-code=PageUp],.kbtest-side .kbtest-key[data-code=PageDown]{--w: 1.35}.kbtest-side .kbtest-row{width:100%}.kbtest-side .kbtest-row .kbtest-key{width:auto;flex:calc(var(--w) * 10) 1 0;min-width:0}.kbtest-side .kbtest-arrows,.kbtest-side .kbtest-arrows-up,.kbtest-side .kbtest-arrows-row{width:100%}.kbtest-side .kbtest-arrows-up .kbtest-key,.kbtest-side .kbtest-arrows-row .kbtest-key{width:auto;flex:1 1 0;min-width:0}.kbtest-side .kbtest-arrows-up{justify-content:center}.kbtest-side .kbtest-arrows-up .kbtest-key{flex:0 0 auto;width:calc(var(--u) * 1.4);min-width:calc(var(--u) * 1.4)}.kbtest-main{width:var(--mainW);flex:0 0 var(--mainW)}.kbtest-main>.kbtest-row{width:100%;box-sizing:border-box}.kbtest-main>.kbtest-row .kbtest-key{width:auto;flex:calc(var(--w) * 10) 1 0;min-width:var(--u)}.kbtest-main .kbtest-spacer{flex:0 0 calc(var(--u) * .5)}.kbtest-main>.kbtest-row:first-child .kbtest-spacer{display:none}@media (min-width: 1100px){.kbtest-kbd{--u: clamp(18px, 2.35vw, 56px)}}@media (max-width: 980px){.kbtest-kbd{--u: clamp(20px, 5.4vw, 46px);width:-moz-max-content;width:max-content}.kbtest-wrap{overflow-x:auto}.kbtest-main{width:var(--mainW);flex:0 0 var(--mainW)}.kbtest-main>.kbtest-row .kbtest-key{flex:0 0 calc(var(--u) * var(--w));width:calc(var(--u) * var(--w))}.kbtest-key{padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.kbtest-key[data-code=Backspace],.kbtest-key[data-code=PrintScreen],.kbtest-key[data-code=ScrollLock],.kbtest-key[data-code=PageUp],.kbtest-key[data-code=PageDown]{font-size:10px}}@media (min-width: 981px){.kbtest-wrap{overflow-x:hidden}.kbtest-kbd{width:100%}.kbtest-main{width:auto;flex:1 1 auto;min-width:0}.kbtest-main>.kbtest-row .kbtest-key{width:auto;flex:calc(var(--w) * 10) 1 0;min-width:var(--u)}}