.kbd-stage{width:100%;overflow-x:hidden}.kbd-stage .test-area{width:100%;max-width:1280px;margin:0 auto;padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:#0000001a;box-sizing:border-box}.kbd-content{color:#fff}.kbd-stage .mt-sub{margin-top:10px;opacity:.92;line-height:1.55}.kbd-stage .mt-footer{margin-top:12px;opacity:.85;font-size:14px;line-height:1.45}.kbd-inputbar{margin-top:14px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#00000024;box-sizing:border-box}.kbd-inputlabel{font-size:14px;opacity:.9;white-space:nowrap}.kbd-typed{flex:1;min-height:22px;font-size:14px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.95}.kbd-clear{width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#ffffff14;color:#fff;cursor:pointer}.kbd-clear:hover{background:#ffffff1f}.kbd-wrap{margin-top:14px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#0000001a;max-width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.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:max-content}.kbd-block{display:flex;flex-direction:column;gap:var(--g)}.kbd-row{display:flex;gap:var(--g)}.kbd-spacer{width:calc(var(--u) * .5)}.kbd-spacer-y{display:none}.kbd-key{--w: 1;width:calc(var(--u) * var(--w));height:var(--u);border-radius:12px;display:inline-flex;align-items:center;justify-content:center;user-select:none;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);background:#ffffff14;color:#ffffffeb;font-size:13px;letter-spacing:.1px;white-space:nowrap;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease,transform 80ms ease}.kbd-key.is-seen{background:#ffc1074d;border-color:#ffc107ad;box-shadow:0 0 0 2px #ffc10733}.kbd-key.is-down{background:#2ecc7199;border-color:#2ecc71d1;box-shadow:0 0 0 2px #2ecc713d,0 10px 18px #0000002e;transform:translateY(1px)}.w-12{--w: 1.2}.w-13{--w: 1.3}.w-15{--w: 1.5}.w-18{--w: 1.8}.w-20{--w: 2}.w-22{--w: 2.2}.w-24{--w: 2.4}.w-28{--w: 2.8}.w-60{--w: 6}.kbd-actions{margin-top:12px;display:flex;justify-content:flex-end;gap:10px}.kbd-btn{padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#ffffff14;color:#fff;cursor:pointer}.kbd-btn:hover{background:#ffffff1f}.kbd-arrows{display:flex;flex-direction:column;gap:var(--g);align-items:center;margin-top:auto}.kbd-arrows-up{display:flex;justify-content:center}.kbd-arrows-row{display:flex;gap:var(--g)}.kbd-numpad{height:var(--kbdH)}.np-grid{display:grid;grid-template-columns:repeat(3,var(--u)) var(--u);grid-template-rows:repeat(5,1fr);gap:var(--g);height:100%}.np-grid .kbd-key{width:100%;height:100%;min-height:var(--u)}.np-minus{grid-column:4;grid-row:1}.np-plus{grid-column:4;grid-row:2 / span 2}.np-enter{grid-column:4;grid-row:4 / span 2}.np-zero{grid-column:1 / span 2;grid-row:5}.kbd-side{height:var(--kbdH);--sideW: calc(var(--u) * 4.2 + var(--g) * 2);width:var(--sideW);flex:0 0 var(--sideW)}.kbd-side .kbd-arrows{margin-top:auto}.kbd-side .kbd-key{--w: 1.25}.kbd-side .kbd-arrows .kbd-key{--w: 1}.kbd-side .kbd-key[data-code=PrintScreen],.kbd-side .kbd-key[data-code=ScrollLock],.kbd-side .kbd-key[data-code=Pause],.kbd-side .kbd-key[data-code=PageUp],.kbd-side .kbd-key[data-code=PageDown]{--w: 1.35}.kbd-side .kbd-row{width:100%}.kbd-side .kbd-row .kbd-key{width:auto;flex:calc(var(--w) * 10) 1 0;min-width:0}.kbd-side .kbd-arrows,.kbd-side .kbd-arrows-up,.kbd-side .kbd-arrows-row{width:100%}.kbd-side .kbd-arrows-up .kbd-key,.kbd-side .kbd-arrows-row .kbd-key{width:auto;flex:1 1 0;min-width:0}.kbd-side .kbd-arrows-up{justify-content:center}.kbd-side .kbd-arrows-up .kbd-key{flex:0 0 auto;width:calc(var(--u) * 1.4);min-width:calc(var(--u) * 1.4)}.kbd-main{width:var(--mainW);flex:0 0 var(--mainW)}.kbd-main>.kbd-row{width:100%;box-sizing:border-box}.kbd-main>.kbd-row .kbd-key{width:auto;flex:calc(var(--w) * 10) 1 0;min-width:var(--u)}.kbd-main .kbd-spacer{flex:0 0 calc(var(--u) * .5)}.kbd-main>.kbd-row:first-child .kbd-spacer{display:none}@media(min-width:1100px){.kbd{--u: clamp(18px, 2.35vw, 56px)}}@media(max-width:980px){.kbd{--u: clamp(20px, 5.4vw, 46px);width:max-content}.kbd-wrap{overflow-x:auto}.kbd-main{width:var(--mainW);flex:0 0 var(--mainW)}.kbd-main>.kbd-row .kbd-key{flex:0 0 calc(var(--u) * var(--w));width:calc(var(--u) * var(--w))}.kbd-key{padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.np-grid .kbd-key{box-sizing:border-box}.kbd-key[data-code=Backspace],.kbd-key[data-code=PrintScreen],.kbd-key[data-code=ScrollLock],.kbd-key[data-code=PageUp],.kbd-key[data-code=PageDown]{font-size:10px}}@media(min-width:981px){.kbd-wrap{overflow-x:hidden}.kbd{width:100%}.kbd-main{width:auto;flex:1 1 auto;min-width:0}.kbd-main>.kbd-row .kbd-key{width:auto;flex:calc(var(--w) * 10) 1 0;min-width:var(--u)}}