body{background-color:#2c2c2c;justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex}.keyboard-container{background-color:#1a1a1a;border-radius:20px;flex-direction:column;gap:8px;padding:25px;display:flex;box-shadow:0 15px 35px #00000080,inset 0 2px 5px #ffffff1a}.row{justify-content:center;gap:8px;display:flex}.button{color:#fff;cursor:pointer;will-change:transform;-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#000;background-image:linear-gradient(90deg,#000c,#0000),linear-gradient(#000c,#0000);background-position:100% 100%,100% 100%;background-repeat:no-repeat;background-size:100% 100%,100% 100%;border:.5px solid #0000001a;border-radius:15px 15px 12px 12px;flex-direction:column;justify-content:center;align-items:center;width:60px;height:65px;font-size:14px;font-weight:700;transition:all .1s ease-in-out;display:flex;position:relative;transform:perspective(70px)rotateX(5deg)rotateY(0);box-shadow:inset -4px -10px #fff6,inset -4px -8px #0000004d,0 2px 1px #0000004d,0 2px 1px #ffffff1a}.button:after{content:"";z-index:-1;background-image:linear-gradient(#fff3,#00000080);border-radius:15px;transition:all .1s ease-in-out;position:absolute;inset:0;box-shadow:inset 4px 0 #ffffff1a,inset 4px -8px #0000004d}.button:before{content:"";z-index:-1;background-image:linear-gradient(90deg,#000c,#0000),linear-gradient(#000c,#0000);background-position:100% 100%,100% 100%;background-repeat:no-repeat;background-size:100% 100%,100% 100%;border-radius:15px;transition:all .1s ease-in-out;position:absolute;inset:0}.button:active,.button.active{will-change:transform;border:.25px solid #0003;height:64px;transition:all .1s ease-in-out;transform:perspective(80px)rotateX(5deg)rotateY(1deg)translateY(3px)scale(.96);box-shadow:inset -4px -8px #fff3,inset -4px -6px #000c,0 1px #000000e6,0 1px #fff3}.button:active:after,.button.active:after{background-image:linear-gradient(#00000080,#fff3)}.button:active:before,.button.active:before{content:"";pointer-events:none;background-color:#ffffff1a;width:50%;height:80%;animation:.1s ease-in-out overlay;display:block;position:absolute;top:5%;left:20%}@keyframes overlay{0%{opacity:0}to{opacity:1}}.k-tab{width:90px}.k-caps{width:105px}.k-enter{width:120px}.k-shift-l{width:140px}.k-shift-r{width:150px}.k-ctrl{width:80px}.k-space{width:350px}.sub-text{opacity:.7;font-size:10px}