.button {
  --button-ink: var(--key-legend-primary); --button-key-h: var(--key-h); --button-pad-inline: var(--key-pad-inline);
  --button-lamp-room: calc(var(--key-lamp) + var(--key-lamp-gap)); --button-lamp-core: var(--led-off); --button-lamp-halo: transparent;
  --button-frame-lit: var(--key-frame-lit); --button-frame-shade: var(--key-frame-shade); --button-ring: transparent; --button-recess-shade: var(--key-recess-shade);
  --button-cap: var(--key-cap); --button-cap-shade: var(--key-cap-shade); --button-sink: 0px;
  --button-lens-spec: 1px; --button-lens-core: 2.6px; --button-lens-rim: 3.4px; --button-lens-edge: 4px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--key-lamp-gap); box-sizing: border-box;
  min-height: var(--button-key-h);
  padding: var(--button-sink) var(--button-pad-inline) 0 calc(var(--button-pad-inline) + var(--button-lamp-room));
  border: 1px solid; border-color: var(--button-frame-shade) var(--button-frame-lit) var(--button-frame-lit) var(--button-frame-shade); border-radius: var(--key-radius);
  background: var(--key-recess); box-shadow: 0 0 0 var(--key-ring) var(--button-ring), 0 1px 0 var(--fascia-lit), var(--button-recess-shade);
  font: var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking); text-decoration: none; white-space: nowrap;
  color: var(--button-ink); text-shadow: var(--key-legend-cut);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.button::before {
  content: '' / ''; position: absolute; z-index: -1; inset: calc(var(--key-cap-gap) + var(--button-sink)) var(--key-cap-gap) calc(var(--key-cap-gap) - var(--button-sink));
  border-radius: calc(var(--key-radius) - 2px);
  background:
    radial-gradient(circle at 40% 36%, rgb(255 255 255 / 0.85) 0 var(--button-lens-spec), transparent calc(var(--button-lens-spec) + 0.6px)) var(--button-lamp-at) / var(--key-lamp) var(--key-lamp) no-repeat,
    radial-gradient(circle, var(--button-lamp-core) 0 var(--button-lens-core), var(--lamp-rim) var(--button-lens-rim), transparent var(--button-lens-edge)) var(--button-lamp-at) / var(--key-lamp) var(--key-lamp) no-repeat,
    radial-gradient(circle, var(--button-lamp-halo), transparent 70%) var(--button-lamp-at) / var(--key-lamp) var(--key-lamp) no-repeat,
    var(--key-grain), var(--button-cap);
  box-shadow: var(--button-cap-shade);
  --button-lamp-at: calc(var(--button-pad-inline) - var(--key-cap-gap)) center;
}
.button.quiet { --button-ink: var(--key-legend-quiet); --button-key-h: var(--tap-min); --button-pad-inline: var(--key-pad-inline-quiet); --button-lamp-room: 0px; }
.button.small-key {
  --button-ink: var(--key-legend-quiet); --button-pad-inline: var(--key-cap-gap); --button-lamp-room: 0px;
  font: 500 var(--engraved-size) / 1 var(--font-ui); letter-spacing: var(--engraved-tracking); font-variant-numeric: tabular-nums;
}
.button:is(.quiet, .small-key)::before { background: var(--key-grain), var(--button-cap); }
.button.filled { --button-ink: var(--key-legend-filled); --button-cap: var(--key-cap-filled); text-shadow: var(--key-legend-cut-filled); --button-lamp-core: var(--lit-hot); --button-lamp-halo: var(--led-halo-on-filled); }
a.button[target='_blank']::after { content: '' / ''; inline-size: var(--key-glyph); block-size: var(--key-glyph); background: currentColor; mask: var(--button-arrow-out) center / contain no-repeat; }
.button[aria-current] { --button-lamp-core: var(--lit); --button-lamp-halo: var(--lit-halo); }
.button:not(:disabled, [aria-disabled='true'], .filled) {
  @media (hover: hover) { &:hover { --button-lamp-core: var(--lit); --button-lamp-halo: var(--lit-halo); } }
  &:is(:active, :focus-visible) { --button-lamp-core: var(--lit); --button-lamp-halo: var(--lit-halo); }
}
.button:not(:disabled, [aria-disabled='true']) {
  @media (hover: hover) { &:hover { --button-frame-lit: var(--accent); --button-frame-shade: var(--accent); } }
  &:active { --button-sink: var(--key-sink); --button-cap-shade: var(--key-cap-shade-pressed); --button-recess-shade: var(--key-recess-shade-pressed); }
}
.button:focus-visible { outline: none; --button-ring: var(--accent); }
:is(.button:disabled, .button[aria-disabled='true']) {
  --button-ink: var(--ink-mute); --button-cap: var(--key-cap); --button-lamp-core: var(--led-off); --button-lamp-halo: transparent; text-shadow: var(--key-legend-cut); cursor: not-allowed;
}
@media (forced-colors: active) {
  .button { background: Canvas; border-color: ButtonText; color: ButtonText; box-shadow: none; text-shadow: none; }
  .button::before { background: ButtonFace; box-shadow: none; }
  .button:not(.quiet, .small-key)::before { background: radial-gradient(circle, ButtonText 0 var(--button-lens-rim), transparent var(--button-lens-edge)) var(--button-lamp-at) / var(--key-lamp) var(--key-lamp) no-repeat, ButtonFace; }
  .button:not(:disabled, [aria-disabled='true'], .quiet, .small-key):is(:hover, :focus-visible, :active, .filled, [aria-current])::before { background: radial-gradient(circle, Highlight 0 var(--button-lens-rim), transparent var(--button-lens-edge)) var(--button-lamp-at) / var(--key-lamp) var(--key-lamp) no-repeat, ButtonFace; }
  .button:focus-visible { outline: var(--key-ring) solid Highlight; outline-offset: var(--key-ring); }
  :is(.button:disabled, .button[aria-disabled='true']) { color: GrayText; border-color: GrayText; }
}