.keypad{grid-template-columns:repeat(3,1fr);gap:4px 8px;display:grid}.keypad__key{height:58px;font-size:28px;font-weight:var(--w-button);color:var(--ink);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;border-radius:18px;place-items:center;display:grid;position:relative}.keypad__key:before{content:"";background:var(--surface);opacity:0;transition:opacity .26s var(--ease-out), transform .32s var(--ease-out);border-radius:99px;position:absolute;inset:2px 14%;transform:scale(.7)}.keypad__key:active:before{opacity:1;transition-duration:60ms;transform:scale(1)}.keypad__key>*{position:relative}@media (hover:hover){.keypad__key:hover:before{opacity:.6;transform:scale(.94)}}