.mechanical-keyboard{display:inline-block;padding:.12em .38em .2em;border:1px solid var(--clr-border);border-radius:.38em;color:inherit;line-height:1;background:var(--clr-surface-alt);box-shadow:0 .16em 0 var(--clr-border),0 .24em .45em #0000001f;transform:translateY(-.08em);transform-origin:center bottom;transition:color .15s ease,border-color .15s ease,box-shadow 80ms ease-out,transform 80ms ease-out}.mechanical-keyboard-held{box-shadow:0 .02em 0 var(--clr-border),0 .06em .12em #00000014;transform:translateY(.07em) scaleY(.98)}.mechanical-keyboard-released{animation:mechanical-keyboard-release .18s cubic-bezier(.22,1,.36,1)}.mechanical-keyboard-pressed{animation:mechanical-keyboard-press .28s cubic-bezier(.22,1,.36,1)}@keyframes mechanical-keyboard-release{0%{box-shadow:0 .02em 0 var(--clr-border),0 .06em .12em #00000014;transform:translateY(.07em) scaleY(.98)}58%{transform:translateY(-.105em) scaleY(1.005)}to{transform:translateY(-.08em) scale(1)}}@keyframes mechanical-keyboard-press{0%,to{box-shadow:0 .16em 0 var(--clr-border),0 .24em .45em #0000001f;transform:translateY(-.08em) scale(1)}28%{box-shadow:0 .02em 0 var(--clr-border),0 .06em .12em #00000014;transform:translateY(.07em) scaleX(1.01) scaleY(.97)}62%{box-shadow:0 .17em 0 var(--clr-border),0 .25em .48em #00000021;transform:translateY(-.105em) scaleY(1.005)}82%{transform:translateY(-.07em) scale(.998)}}@media(prefers-reduced-motion:reduce){.mechanical-keyboard-pressed,.mechanical-keyboard-released{animation:none}}