.keypad-wrapper{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:center;width:100%;min-height:100vh;padding:2rem}.keypad-section{width:50ch;max-width:calc(100vw - 4rem);perspective:1200px;transform-style:preserve-3d}@media (max-width:767px){.keypad-wrapper{flex-direction:column;padding:1.5rem;gap:0;overflow-x:hidden}.keypad-section{width:100%;max-width:340px;margin:0 auto}.keypad-form,.keypad-section{overflow:visible}}.keypad-title{letter-spacing:-.05rem;line-height:1;font-size:clamp(1.5rem,5vw,2.5rem);font-weight:700;margin-bottom:1rem}.keypad-description{opacity:.7;font-weight:300;margin-bottom:1.5rem;line-height:1.5}.keypad-form{display:flex;flex-direction:column;gap:.75rem}.keypad-input{flex:1;padding:.75rem 1rem;background:rgba(16,40,55,.2);border:2px solid hsla(40,5%,89%,.25);border-radius:8px;outline:none;color:#fff;font-size:.95rem;transition:all .3s ease}.keypad-input:focus{border-color:#fe5f01;background:rgba(16,40,55,.3);box-shadow:0 0 0 3px rgba(254,95,1,.1)}.keypad-input::-moz-placeholder{color:hsla(40,5%,89%,.4)}.keypad-input::placeholder{color:hsla(40,5%,89%,.4)}.keypad-submit{padding-inline:1.5rem;border-radius:6px;background:transparent;border:1px solid hsla(40,5%,89%,.25);cursor:pointer;color:inherit;font-size:.875rem;transition:all .2s}.keypad-submit:hover{background:rgba(254,95,1,.1);border-color:rgba(254,95,1,.5)}.keypad{position:relative;aspect-ratio:400/310;display:flex;place-items:center;width:clamp(280px,35vw,400px);margin-left:1rem;-webkit-tap-highlight-color:transparent;transition:translate .26s ease-out,transform .26s ease-out}.key,.keypad{transform-style:preserve-3d}.key{border:0;background:transparent;padding:0;cursor:pointer;outline:none}.key--pressed .key__content,.key:active .key__content{translate:0 calc(var(--travel, 26) * 1%)}.key__content{width:100%;display:inline-block;height:100%;transition:translate .12s ease-out;container-type:inline-size}.keypad__single .key__text{width:60%;height:62%;translate:42% -16%;line-height:.85;font-size:11cqi}.key__text{width:86%;font-size:12cqi;z-index:21;top:5%;left:0;color:#f0f0f0;translate:8% 10%;transform:rotateX(36deg) rotateY(45deg) rotateX(-90deg) rotate(0deg);text-align:left;padding:1ch;line-height:1.2}.key__text,.keypad__single{height:46%;position:absolute}.keypad__single{width:40.5%;left:54%;bottom:36%;clip-path:polygon(0 0,54% 0,89% 24%,100% 70%,54% 100%,46% 100%,0 69%,12% 23%,47% 0);-webkit-mask:url(https://assets.codepen.io/605876/keypad-single.png?format=auto&quality=86) 50% 50%/100% 100%;mask:url(https://assets.codepen.io/605876/keypad-single.png?format=auto&quality=86) 50% 50%/100% 100%}.keypad__single--left{left:29.3%;bottom:54.2%}.keypad__single .key__text{font-size:18cqi}.keypad__single img{top:0;opacity:1;width:96%;position:absolute;left:50%;translate:-50% 1%}.key__mask{width:100%;height:100%;display:inline-block}.keypad__double{position:absolute;background:transparent;width:64%;height:65%;left:6%;bottom:17.85%;clip-path:polygon(34% 0,93% 44%,101% 78%,71% 100%,66% 100%,0 52%,0 44%,7% 17%,30% 0);-webkit-mask:url(https://assets.codepen.io/605876/keypad-double.png?format=auto&quality=86) 50% 50%/100% 100%;mask:url(https://assets.codepen.io/605876/keypad-double.png?format=auto&quality=86) 50% 50%/100% 100%}.keypad__double img{top:0;opacity:1;width:99%;position:absolute;left:50%;translate:-50% 1%}.key img{filter:hue-rotate(calc(var(--hue, 0) * 1deg)) saturate(var(--saturate,1)) brightness(var(--brightness,1))}.keypad__base{position:absolute;bottom:0;width:100%}.key img,.keypad__base img{transition:translate .12s ease-out;width:100%}@media (max-width:768px){.keypad-wrapper{flex-direction:column}.keypad{order:1}.keypad-section{order:2}}