.keypad-container[data-v-c933be96]{align-items:center;display:flex;flex-direction:column}[data-key][data-v-c933be96]{display:none;inset:0;place-items:center;position:absolute}[data-key] svg[data-v-c933be96]{width:50%}img[data-v-c933be96]{pointer-events:none}[data-platform=gemini] #one img[data-v-c933be96]{--brightness:1.4;--saturate:.4;--hue:330}[data-platform=gemini] #one .key__text[data-v-c933be96]{color:#fff}[data-platform=gemini] [data-key=gemini][data-v-c933be96]{display:grid}[data-platform=claude] #one img[data-v-c933be96]{--brightness:.6;--saturate:0}[data-platform=claude] #one .key__text[data-v-c933be96]{color:#d97757}[data-platform=claude] [data-key=claude][data-v-c933be96]{display:grid}[data-platform=perplexity] #one img[data-v-c933be96]{--hue:280;--brightness:.8;--saturate:1.2}[data-platform=perplexity] #one .key__text[data-v-c933be96]{color:#fff}[data-platform=perplexity] [data-key=perplexity][data-v-c933be96]{display:grid}[data-platform=macos] #one .key__text[data-v-c933be96]{color:#fff;font-size:22cqi}[data-platform=macos] #one img[data-v-c933be96]{--saturate:0;--brightness:.6}[data-platform=macos] [data-key=macos][data-v-c933be96]{display:grid}.keypad[data-v-c933be96]{aspect-ratio:400/310;display:flex;place-items:center;position:relative;width:clamp(280px,45vw,500px);-webkit-tap-highlight-color:transparent;scale:1;transition:translate .26s ease-out,transform .26s ease-out}.key[data-v-c933be96],.keypad[data-v-c933be96]{transform-style:preserve-3d}.key[data-v-c933be96]{background:transparent;border:0;cursor:pointer;outline:none;padding:0;position:absolute}.key:active .key__content[data-v-c933be96],.key[data-pressed=true] .key__content[data-v-c933be96]{translate:0 calc(var(--travel)*1%)}#one[data-v-c933be96]{bottom:57.2%;left:13.5%}#two[data-v-c933be96]{bottom:48.5%;left:25.8%}#three[data-v-c933be96]{bottom:39.2%;left:38%}#four[data-v-c933be96]{bottom:30.2%;left:50.4%}#five[data-v-c933be96]{bottom:21%;left:62.7%}#five .key__text[data-v-c933be96]{filter:grayscale(1);font-size:34cqi}.key__content[data-v-c933be96]{container-type:inline-size;display:inline-block;height:100%;transition:translate .12s ease-out;width:100%}.key__text[data-v-c933be96]{color:#0a0a0a;display:grid;font-size:18cqi;height:62%;left:0;place-items:center;position:absolute;top:5%;transform:rotateX(36deg) rotateY(45deg) rotateX(-90deg) rotate(0);translate:45% -16%;width:52%;z-index:21}.keypad__single[data-v-c933be96]{clip-path:polygon(0 0,54% 0,89% 24%,100% 70%,54% 100%,46% 100%,0 69%,12% 23%,47% 0);height:24%;-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:21%}.keypad__single img[data-v-c933be96]{--brightness:2;--saturate:0;--hue:0;filter:hue-rotate(calc(var(--hue, 0)*1deg)) saturate(var(--saturate,1)) brightness(var(--brightness,1));left:50%;opacity:1;position:absolute;top:0;translate:-50% 1%;width:96%}.key__mask[data-v-c933be96]{display:inline-block;height:100%;width:100%}.keypad__base[data-v-c933be96]{bottom:0;position:absolute;width:100%}.keypad__base img[data-v-c933be96]{width:100%}.platform-selector[data-v-c933be96]{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.platform-btn[data-v-c933be96]{background:#0003;border:1px solid hsla(0,0%,100%,.2);border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;padding:.5rem 1rem;text-transform:capitalize;transition:all .2s ease}.platform-btn[data-v-c933be96]:hover{background:#ffffff1a;border-color:#ffffff4d}.platform-btn.active[data-v-c933be96]{background:#3e92fa80;border-color:#3e92facc}@media (max-width:768px){.keypad[data-v-c933be96]{width:clamp(240px,80vw,400px)}}