.keyboard-main{display:flex;justify-content:center;margin:0 auto}.keyboard{background-image:linear-gradient(90deg,hsl(0,0%,53%),hsl(0,0%,80%));border-radius:.5em;box-shadow:-.3em -.3em .6em hsla(0,0%,0%,.15),inset 0 0 0 1px hsl(0,0%,67%);flex-direction:column;font-size:clamp(20px,2.5vw,36px);padding:.5em;width:fit-content;max-width:100%}.keyboard,.row{display:flex;gap:.35em}.keyboard button{background-color:hsl(0,0%,93%);border-radius:.125em;box-shadow:-.1em -.08em .08em hsla(0,0%,0%,.08),0 0 0 .02em hsla(0,0%,0%,.12),inset .01em .01em .01em hsla(0,0%,0%,.15),inset -.02em -.02em .01em hsla(0,0%,100%,.4);color:hsl(0,0%,47%);display:block;font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;outline:transparent;position:relative;cursor:default;user-select:none;-webkit-tap-highlight-color:transparent;transition:all 75ms ease-out}.keyboard button.active{box-shadow:.05em .05em .06em hsla(0,0%,0%,.1),0 0 0 .03em hsla(0,0%,0%,.2),inset -.015em -.03em .015em hsla(0,0%,100%,.4);transform:translateY(.05em)}.keyboard button span{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center}.keyboard button>span{margin:auto;padding:.08em 0;position:absolute;top:50%;left:50%;font-size:.38em;line-height:1.5;transform:translate(-50%,-50%) scaleX(.875);width:100%}.btn-2{width:1.125em}.btn-2,.btn-3{height:1.125em}.btn-3{width:2em}.btn-4{width:2.3em}.btn-4,.btn-5{height:1.125em}.btn-5{width:3.05em}.btn-6{width:1.5625em}.btn-6,.btn-7{height:1.375em}.btn-7{width:1.8375em}.btn-longest{width:8.625em;height:1.375em}.lr{top:0;transform:scaleX(.875);justify-content:flex-end;transform-origin:100% 50%}.xs{font-size:.19em;line-height:1;white-space:nowrap}.sm{font-size:.24em;line-height:1.05}@media (max-width:768px){.keyboard{font-size:clamp(16px,3vw,24px)}}@media (max-width:640px){.keyboard{font-size:clamp(12px,3.5vw,20px);padding:.35em}.keyboard,.row{gap:.25em}}