.grid-background[data-v-2a1ccc5a]{--size:45px;--line:color-mix(in hsl,currentColor,transparent 80%);background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) calc(var(--size)*.36) 50% /var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 0 calc(var(--size)*.32) /var(--size) var(--size);inset:0;-webkit-mask:linear-gradient(-20deg,transparent 50%,#fff);mask:linear-gradient(-20deg,transparent 50%,#fff);pointer-events:none;position:fixed;z-index:0}.keypad[data-v-2a1ccc5a]{align-items:center;aspect-ratio:400/310;display:flex;justify-content:center;position:relative;transform-style:preserve-3d;transition:translate .26s ease-out,transform .26s ease-out;width:clamp(280px,35vw,400px)}.keypad__base[data-v-2a1ccc5a]{bottom:0;position:absolute;transition:translate .26s ease-out;width:100%}.keypad__base img[data-v-2a1ccc5a]{transition:translate .12s ease-out;width:100%}.key[data-v-2a1ccc5a]{background:transparent;border:0;cursor:pointer;outline:none;padding:0;transform-style:preserve-3d;transition:translate .26s ease-out}.key[data-v-2a1ccc5a],.key[data-v-2a1ccc5a]:after{position:absolute}.key[data-v-2a1ccc5a]:after{background:repeating-linear-gradient(-45deg,transparent 0 5px,#69f 5px 6px);content:"";inset:0;opacity:0;transition:opacity .26s ease-out;z-index:-1}.key:active .key__content[data-v-2a1ccc5a],.key[data-pressed=true] .key__content[data-v-2a1ccc5a]{translate:0 calc(var(--travel)*1%)}.key__content[data-v-2a1ccc5a],.key__mask[data-v-2a1ccc5a]{display:inline-block;height:100%;width:100%}.key__content[data-v-2a1ccc5a]{container-type:inline-size}.key img[data-v-2a1ccc5a],.key__content[data-v-2a1ccc5a]{transition:translate .12s ease-out}.key img[data-v-2a1ccc5a]{filter:hue-rotate(calc(var(--hue, 0)*1deg)) saturate(var(--saturate,1)) brightness(var(--brightness,1));width:100%}.key__text[data-v-2a1ccc5a]{color:#f0f0f0;font-size:12cqi;height:46%;left:0;padding:1ch;position:absolute;text-align:left;top:5%;transform:rotateX(36deg) rotateY(45deg) rotateX(-90deg) rotate(0);translate:8% 10%;width:86%;z-index:21}.keypad__single[data-v-2a1ccc5a]{bottom:36%;clip-path:polygon(0 0,54% 0,89% 24%,100% 70%,54% 100%,46% 100%,0 69%,12% 23%,47% 0);height:46%;left:54%;-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%;width:40.5%}.keypad__single--left[data-v-2a1ccc5a]{bottom:54.2%;left:29.3%}.keypad__single .key__text[data-v-2a1ccc5a]{font-size:18cqi;height:62%;translate:45% -16%;width:52%}.keypad__single img[data-v-2a1ccc5a]{left:50%;opacity:1;position:absolute;top:0;translate:-50% 1%;width:96%}.keypad__double[data-v-2a1ccc5a]{bottom:17.85%;clip-path:polygon(34% 0,93% 44%,101% 78%,71% 100%,66% 100%,0 52%,0 44%,7% 17%,30% 0);height:65%;left:6%;-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%;width:64%}.keypad__double img[data-v-2a1ccc5a]{left:50%;opacity:1;position:absolute;top:0;translate:-50% 1%;width:99%}.keypad--exploded[data-v-2a1ccc5a]{translate:calc(-50% - 1rem) 0}.keypad--exploded .keypad__base[data-v-2a1ccc5a]{translate:0 25vh}.keypad--exploded .keypad__single[data-v-2a1ccc5a]{translate:0 -10vh}.keypad--exploded .keypad__single--left[data-v-2a1ccc5a]{translate:0 -20vh}.keypad--exploded .keypad__double[data-v-2a1ccc5a]{translate:0 0}.keypad--exploded .key[data-v-2a1ccc5a]:after{opacity:1}@media (max-width:768px){.keypad[data-v-2a1ccc5a]{order:1}section[data-v-2a1ccc5a]{order:2}.keypad--exploded[data-v-2a1ccc5a]{translate:0 calc(50% + 1rem)}}