/* https://raw.githubusercontent.com/JSlote/kbd.css/refs/heads/master/kbd.min.css */
.kbd,
kbd {
  display: inline-block;
  padding: .17em .6em .17em .4em;
  margin: 0 .2em;
  position: relative;
  top: -.2em;
  color: #333;
  font: 400 .8em/1 sans-serif;
  text-decoration: none;
  box-shadow: inset 0 -.2em .12em -.15em rgba(255, 255, 255, .7);
  cursor: default;
  border-radius: .3em;
  background: -ms-radial-gradient(top, ellipse cover, #ddd 0, #fff 100%);
  background: radial-gradient(ellipse at top right, #ddd 0, #fff 100%)
}

.kbd::after,
.kbd::before,
kbd::after,
kbd::before {
  content: '';
  position: absolute;
  left: -.17em;
  right: -.17em;
  top: .1em;
  bottom: -.4em;
  border-radius: .4em
}

.kbd::before,
kbd::before {
  z-index: -1;
  border: 1px solid gray;
  background: #a8a8a8;
  background: radial-gradient(circle 3em at -1.7em 0, #fff 0, #fff 70%, rgba(255, 255, 255, 0)80%)
}

.kbd::after,
kbd::after {
  z-index: -2;
  background: #a8a8a8;
  background: radial-gradient(ellipse 1em 1.7em at top right, #aaa 0, #aaa 70%, #ccc 100%)
}

.kbd-down {
  top: 0;
  box-shadow: inset 0 -.2em .3em -.1em rgba(200, 200, 200, .5)
}

.kbd-down::after,
.kbd-down::before {
  top: -.1em;
  bottom: -.2em
}

.kbd-down::before {
  box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 1)
}