.key{--lip:color-mix(in oklab, var(--tone), var(--on-pastel) 24%);--depth:4px;border-radius:var(--r-key);background:var(--tone);color:var(--on-pastel);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;box-shadow:var(--bevel), 0 var(--depth) 0 var(--lip);border:0;justify-content:center;align-items:center;gap:8px;font-weight:600;line-height:1;text-decoration:none;transition:transform 80ms,box-shadow 80ms;display:inline-flex;transform:translateY(0)}.key:active,.key.is-pressed{transform:translateY(var(--depth));box-shadow:var(--bevel), 0 0 0 var(--lip)}.key:focus-visible{box-shadow:var(--bevel), 0 var(--depth) 0 var(--lip), var(--focus)}.key:disabled{opacity:.45;cursor:not-allowed;transform:none}.key--plain{--tone:var(--surface);--lip:var(--line);color:var(--ink)}.key--sm{min-height:36px;font-size:var(--text-sm);--depth:3px;padding:0 14px}.key--md{min-height:46px;font-size:var(--text-md);padding:0 20px}.key--lg{min-height:56px;font-size:var(--text-lg);--depth:5px;padding:0 28px}.key--icon{aspect-ratio:1;padding:0}