Click Effect on Keyboard Macros

/* General Button Styling */

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 1.1em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #444 0%, #222 100%);
  border: 1.5px solid #222;
  border-radius: 10px;
  margin: 4px 4px;
  min-width: 1em;      
  min-height: 1em;
  padding: 0 10px;
  box-shadow:
    0 2px 0 0 #111,               /* dark bottom edge */
    0 4px 12px 0 #000a,           /* outer shadow for 3D lift */
    inset 0 3px 7px 0 #666,       /* top inner highlight */
    inset 0 -4px 8px -2px #000;   /* bottom inner shadow */
  position: relative;
  text-shadow: 0 2px 3px #000b, 0 0 1px #fff;
  white-space: nowrap;
  vertical-align: middle;
  transition: transform 0.05s, box-shadow 0.05s;
  user-select: none;
}

/* Click Effect */

kbd:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 0 #111,
    0 2px 6px 0 #0006,
    inset 0 1px 3px 0 #444,
    inset 0 -1px 4px -2px #000;
}

/* Dark Mode Adjustments */

@media (prefers-color-scheme: dark) {
  kbd {
    background: linear-gradient(180deg, #222 0%, #111 100%);
    border-color: #333;
    color: #fafaff;
    text-shadow: 0 2px 3px #000d, 0 0 1px #fff5;
  }
  span.keyseq {
    color: #fafaff;
  }
}