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