:root{--travel: 20}.keypad{position:relative;aspect-ratio:400 / 310;display:flex;place-items:center;width:clamp(350px,43.75vw,500px);-webkit-tap-highlight-color:#0000;transition-property:translate,transform;transition-duration:.26s;transition-timing-function:ease-out;transform-style:preserve-3d;opacity:1}.key{transform-style:preserve-3d;border:0;background:#0000;padding:0;cursor:pointer;outline:none}.key[data-pressed=true] .key__content,.key:active .key__content{translate:0 calc(var(--travel) * 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:35% -16%}.key__text{height:46%;width:86%;position:absolute;font-size:12cqi;z-index:21;top:5%;left:0;mix-blend-mode:normal;color:#f0f0f0;translate:8% 10%;transform:rotateX(36deg) rotateY(45deg) rotateX(-90deg) rotate(0);text-align:left;padding:1ch}.keypad__single{position:absolute;width:40.5%;left:54%;bottom:36%;height:46%;clip-path:polygon(0 0,54% 0,89% 24%,100% 70%,54% 100%,46% 100%,0 69%,12% 23%,47% 0%);-webkit-mask:url(../images/applogical/keypad-single.webp) 50% 50% / 100% 100%;mask:url(../images/applogical/keypad-single.webp) 50% 50% / 100% 100%}.keypad__single.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:#ff2b0000;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(../images/applogical/keypad-double.webp) 50% 50% / 100% 100%;mask:url(../images/applogical/keypad-double.webp) 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%}.keypad img{transition:translate .12s ease-out;width:100%}[data-exploded=true] .keypad{translate:calc(-50% - 1rem) 0;transition-delay:0s,.26s}@media (max-width: 768px){[data-exploded=true] .keypad{translate:0 calc(50% + 1rem)}}[data-exploded=true] .keypad__base{--depth: 2.5}[data-exploded=true] .keypad__single{--depth: -1}[data-exploded=true] .keypad__single--left{--depth: -2}[data-exploded=true] .keypad__double{--depth: 0}[data-exploded=true] .keypad__base,[data-exploded=true] .key{translate:0 calc(var(--depth) * 10vh);transition-delay:.52s}.keypad{transition-delay:.26s,.52s}.key,.keypad__base{transition-property:translate;transition-duration:.26s;transition-timing-function:ease-out}[data-exploded=true] .key:after{opacity:1;transition-delay:.52s}.key:after{z-index:-1;content:"";position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;transition-property:opacity;transition-duration:.26s;transition-timing-function:ease-out;background:repeating-linear-gradient(-45deg,#0000 0,#0000 5px,#69f 5px,#69f 6px)}#one{--travel: 26;--hue: 30;--saturate: 1.4;--brightness: 1.2}#two{--travel: 26;--hue: 120;--saturate: 1.4;--brightness: 1.4}#three{--travel: 18;--hue: 0;--saturate: 0;--brightness: .4}#four{--travel: 26;--hue: 200;--saturate: 1.2;--brightness: 1.3}#two .key__text{translate:25% -16%!important;padding-left:.5ch!important;width:65%!important}