.keyboard-button{background-color:#000;color:#fff;border:.5px solid rgba(0,0,0,.1);padding-bottom:8px;width:60px;height:65px;border-radius:15px 15px 12px 12px;cursor:pointer;position:relative;will-change:transform;transition:all .1s ease-in-out 0s;user-select:none;background-image:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,0)),linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,0));background-position:100% 100%,100% 100%;background-size:100% 100%,100% 100%;background-repeat:no-repeat;box-shadow:inset -4px -10px 0 rgba(255,255,255,.4),inset -4px -8px 0 rgba(0,0,0,.3),0 2px 1px rgba(0,0,0,.3),0 2px 1px rgba(255,255,255,.1);transform:perspective(70px) rotateX(5deg) rotateY(0deg)}.keyboard-button:after{background-image:linear-gradient(180deg,rgba(255,255,255,.2),rgba(0,0,0,.5));box-shadow:inset 4px 0 0 rgba(255,255,255,.1),inset 4px -8px 0 rgba(0,0,0,.3)}.keyboard-button:after,.keyboard-button:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;border-radius:15px;transition:all .1s ease-in-out 0s}.keyboard-button:before{background-image:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,0)),linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,0));background-position:100% 100%,100% 100%;background-size:100% 100%,100% 100%;background-repeat:no-repeat}.keyboard-button:active{will-change:transform;transform:perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(.96);height:64px;border:.25px solid rgba(0,0,0,.2);box-shadow:inset -4px -8px 0 rgba(255,255,255,.2),inset -4px -6px 0 rgba(0,0,0,.8),0 1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.2);transition:all .1s ease-in-out 0s}.keyboard-button:after:active{background-image:linear-gradient(180deg,rgba(0,0,0,.5),rgba(255,255,255,.2))}.keyboard-button:active:before{content:"";display:block;position:absolute;top:5%;left:20%;width:50%;height:80%;background-color:rgba(255,255,255,.1);animation:overlay .1s ease-in-out 0s;pointer-events:none}.keyboard-button:focus{outline:none}.invis{color:#0000}.delete-button{background-color:#000;color:#fff;font-size:24px;border:.5px solid rgba(0,0,0,.1);padding-bottom:8px;width:300px;height:65px;border-radius:15px 15px 12px 12px;cursor:pointer;position:relative;will-change:transform;transition:all .1s ease-in-out 0s;user-select:none;background-image:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,0)),linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,0));background-position:100% 100%,100% 100%;background-size:100% 100%,100% 100%;background-repeat:no-repeat;box-shadow:inset -4px -10px 0 rgba(255,255,255,.4),inset -4px -8px 0 rgba(0,0,0,.3),0 2px 1px rgba(0,0,0,.3),0 2px 1px rgba(255,255,255,.1);transform:perspective(70px) rotateX(5deg) rotateY(0deg)}.delete-button:after{background-image:linear-gradient(180deg,rgba(255,255,255,.2),rgba(0,0,0,.5));box-shadow:inset 4px 0 0 rgba(255,255,255,.1),inset 4px -8px 0 rgba(0,0,0,.3)}.delete-button:after,.delete-button:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;border-radius:15px;transition:all .1s ease-in-out 0s}.delete-button:before{background-image:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,0)),linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,0));background-position:100% 100%,100% 100%;background-size:100% 100%,100% 100%;background-repeat:no-repeat}.delete-button:active{will-change:transform;transform:perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(.96);height:64px;border:.25px solid rgba(0,0,0,.2);box-shadow:inset -4px -8px 0 rgba(255,255,255,.2),inset -4px -6px 0 rgba(0,0,0,.8),0 1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.2);transition:all .1s ease-in-out 0s}.delete-button:after:active{background-image:linear-gradient(180deg,rgba(0,0,0,.5),rgba(255,255,255,.2))}.delete-button:active:before{content:"";display:block;position:absolute;top:5%;left:20%;width:50%;height:80%;background-color:rgba(255,255,255,.1);animation:overlay .1s ease-in-out 0s;pointer-events:none}@keyframes overlay{0%{opacity:0}to{opacity:1}}.delete-button:focus{outline:none}.tooltip{position:absolute;top:-20px;left:50%;transform:translateX(-50%);opacity:0;background:black;color:white;padding:4px 8px;border-radius:6px;font-size:12px;white-space:nowrap;pointer-events:none;transition:opacity .3s ease,top .3s ease;z-index:10}.group:hover .tooltip{top:-35px;opacity:1}.tooltip:before{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:black;z-index:-1}.delete-button.active,.keyboard-button.active{transform:perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(.96);height:64px;border:.25px solid rgba(0,0,0,.2);box-shadow:inset -4px -8px 0 rgba(255,255,255,.2),inset -4px -6px 0 rgba(0,0,0,.8),0 1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.2)}