.key{--k-rx:0deg;--k-ry:0deg;--k-sink:0px;--k-wall:1;--k-light:0;--k-shade-x:50%;--k-shade-y:50%;--k-spec-x:50%;--k-spec-y:50%;--k-focus-sep:0 0 0 0 transparent;--k-bulk:1;--k-travel:1;isolation:isolate;transform:perspective(var(--kc-persp)) rotateX(var(--k-rx)) rotateY(var(--k-ry)) translateY(calc(var(--k-sink) * var(--k-travel)));transform-origin:50%;background-image:linear-gradient(178deg, var(--k-face-1) 0%, var(--k-face-2) 38%, var(--k-face-3) 72%, var(--k-face-4) 100%);box-shadow:var(--k-focus-sep), 0 calc(1px * var(--k-wall) * var(--k-bulk)) 0 0 var(--k-wall-1), 0 calc(2px * var(--k-wall) * var(--k-bulk)) 0 0 var(--k-wall-2), 0 calc(3px * var(--k-wall) * var(--k-bulk)) 0 0 var(--k-wall-3), 0 calc(4px * var(--k-wall) * var(--k-bulk)) 0 0 var(--k-wall-4), 0 calc(5px * var(--k-wall) * var(--k-bulk)) 0 0 var(--k-bounce), 0 calc(2px * var(--k-wall) * var(--k-bulk)) calc(3px * var(--k-wall) * var(--k-bulk)) -1px var(--kc-ao), 0 calc(8px * var(--k-wall) * var(--k-bulk)) calc(18px * var(--k-bulk)) -6px var(--kc-cast);transition:transform .18s var(--eo), box-shadow .18s var(--eo);position:relative}.key--solid{--k-face-1:var(--kc-solid-f1);--k-face-2:var(--kc-solid-f2);--k-face-3:var(--kc-solid-f3);--k-face-4:var(--kc-solid-f4);--k-wall-1:var(--kc-solid-w1);--k-wall-2:var(--kc-solid-w2);--k-wall-3:var(--kc-solid-w3);--k-wall-4:var(--kc-solid-w4);--k-bounce:var(--kc-solid-bounce);--k-shade:var(--kc-solid-shade);--k-spec:var(--kc-solid-spec);color:var(--kc-solid-text)}.key--ghost{--k-face-1:var(--kc-ghost-f1);--k-face-2:var(--kc-ghost-f2);--k-face-3:var(--kc-ghost-f3);--k-face-4:var(--kc-ghost-f4);--k-wall-1:var(--kc-ghost-w1);--k-wall-2:var(--kc-ghost-w2);--k-wall-3:var(--kc-ghost-w3);--k-wall-4:var(--kc-ghost-w4);--k-bounce:var(--kc-ghost-bounce);--k-shade:var(--kc-ghost-shade);--k-spec:var(--kc-ghost-spec);color:var(--ink)}.key:before,.key:after{z-index:-1;border-radius:inherit;content:"";opacity:var(--k-light);pointer-events:none;transition:opacity .18s var(--eo);position:absolute;inset:0}.key:before{background:radial-gradient(120% 160% at var(--k-shade-x) var(--k-shade-y), var(--k-shade) 0%, 24%, transparent 74%)}.key:after{background:radial-gradient(115% 150% at var(--k-spec-x) var(--k-spec-y), var(--k-spec) 0%, 18%, transparent 68%)}@media (hover:hover){.key:hover{--k-light:.62;--k-shade-y:82%;--k-spec-y:12%}}.key:active{--k-sink:3px;--k-wall:.32;--k-light:.78}.key:focus-visible{--k-focus-sep:0 0 0 3px var(--bone);--k-light:.5;--k-spec-x:50%;--k-spec-y:0%;outline:3px solid var(--accent-hot);outline-offset:3px}@media (prefers-reduced-motion:reduce){.key{transition:none}.key:active{--k-sink:0px;--k-wall:1}}