.key{border-radius:var(--r-key);min-height:44px;font-size:var(--fs-sm);color:var(--ink);text-align:center;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform var(--t-key) var(--ease);border:0;justify-content:center;align-items:center;gap:8px;padding:6px 12px;font-weight:600;line-height:1.15;text-decoration:none;display:inline-flex;position:relative}.key:disabled,.key[aria-disabled=true]{cursor:default}.key--steel{background:var(--steel);box-shadow:var(--well), 0 3px 0 2px #a8a39b, 0 5px 8px 1px #3c2c1e47, inset 0 1px 0 #fff;text-shadow:0 1px #ffffffbf}.key--steel:active:not(:disabled),.key--steel[aria-pressed=true],.key--steel[aria-current=page],input:checked+.key--steel{box-shadow:var(--well), 0 1px 0 2px #a8a39b, inset 0 2px 4px #3c2c1e2e;transform:translateY(2px)}.key--steel:disabled{opacity:.55}.key--small{min-width:44px;min-height:44px;font-size:var(--fs-2xs);border-radius:8px;gap:6px;padding:3px 9px}.key--small:after{content:"";position:absolute;inset:0}.key--enamel{border-radius:var(--r-key-lg);min-height:68px;font:600 19px / 1.1 var(--serif);letter-spacing:-.012em;font-optical-sizing:auto;text-wrap:balance;background:linear-gradient(#fffdfa 0%,#f1ede6 60%,#e8e3dc 100%);padding:14px 12px 10px;overflow:hidden;box-shadow:0 0 0 2px #ebe7e1,0 0 0 3px #50423466,0 5px 0 2px #cfc7bb,0 8px 14px #3c2c1e4d,inset 0 1px #fff}.key--enamel:before{content:"";background:var(--swatch,transparent);height:6px;position:absolute;top:0;left:0;right:0}.key--enamel[data-swatch=sand]{--swatch:linear-gradient(180deg, var(--sand), var(--sand-2))}.key--enamel[data-swatch=slate]{--swatch:linear-gradient(180deg, var(--slate), var(--slate-2))}.key--enamel[data-swatch=orange]{--swatch:linear-gradient(180deg, #f27537, var(--accent))}.key--enamel[data-swatch=graphite]{--swatch:linear-gradient(180deg, #4a4e54, var(--graphite))}.key--enamel>.led{position:absolute;top:14px;right:12px}.key--enamel:active:not(:disabled),.key--enamel[aria-pressed=true]{transform:translateY(4px);box-shadow:0 0 0 2px #ebe7e1,0 0 0 3px #50423466,0 1px 0 2px #cfc7bb,0 2px 4px #3c2c1e4d,inset 0 2px 5px #3c2c1e24}.key--enamel:disabled:not([aria-pressed=true]){color:#26201c80}@media (width>=760px){.key--enamel{min-height:78px;font-size:23px}}.key--main{min-height:48px;font:650 19px / 1 var(--serif);letter-spacing:-.012em;font-optical-sizing:auto;color:#181310;background:radial-gradient(80% 120% at 50% 0%, #ffffff59, #fff0 60%), linear-gradient(180deg, #f27537 0%, var(--accent) 48%, #e45810 100%);border-radius:12px;padding:8px 16px;box-shadow:0 4px #9d3604,0 7px 12px -2px #5a220073,inset 0 1px #ffffff8c}.key--main:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 #9d3604,0 2px 4px #5a220066,inset 0 2px 6px #78280040}.key--main .key-sub{font:600 var(--fs-xs) / 1.15 var(--sans);letter-spacing:0;margin-top:4px;display:block}.key--main.key--stack{flex-direction:column;gap:0}.key:focus-visible{outline-offset:4px}