.tenkey {
  --tenkey-gap: clamp(.5rem, 2vmin, 1rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--tenkey-gap);
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 24rem;
}

.tenkey button {
  min-inline-size: 0;
  min-block-size: 0;
  border: 2px solid #51606b;
  border-radius: clamp(.75rem, 3vmin, 1.5rem);
  background: linear-gradient(145deg, #34424c, #182127);
  color: #fff;
  font: 700 clamp(1.75rem, 8vmin, 4rem)/1 sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}

.tenkey button:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
}

.tenkey button.is-pressed {
  --tenkey-glow: #56ef85;
  border-color: var(--tenkey-glow);
  box-shadow: 0 0 1rem var(--tenkey-glow),
              0 0 2.5rem color-mix(in srgb, var(--tenkey-glow) 70%, transparent);
  transform: scale(1.08);
}

.tenkey button.is-wrong { --tenkey-glow: #ff4141; }
.tenkey button.is-suspicious { --tenkey-glow: #ff9f1c; }
.tenkey button.is-correct { --tenkey-glow: #3f9cff; }

.tenkey button.is-error-shaking {
  animation: tenkey-error-shake 280ms ease-in-out;
}

.tenkey.is-correct-wave button {
  animation: tenkey-correct-wave 150ms ease-in-out both;
  animation-delay: calc(var(--tenkey-wave-index, 0) * 20ms);
}

@keyframes tenkey-error-shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -.4rem 0; }
  40% { translate: .4rem 0; }
  60% { translate: -.25rem 0; }
  80% { translate: .25rem 0; }
}

@keyframes tenkey-correct-wave {
  0%, 100% { translate: 0 0; }
  45% { translate: 0 -18%; }
}

@media (prefers-reduced-motion: reduce) {
  .tenkey button { transition: none; }
  .tenkey button.is-pressed { transform: none; }
  .tenkey button.is-error-shaking,
  .tenkey.is-correct-wave button {
    animation: none;
  }
}

/* /tenkey の確認ページ専用。再利用時の必須スタイルとは分離したクラス。 */
.tenkey-demo { margin: 0; min-height: 100vh; background: #10171c; color: #fff; }
.tenkey-demo__main { box-sizing: border-box; min-height: 100vh; padding: 1rem; }
.tenkey-demo__panel {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(24rem, 1fr);
  gap: .75rem;
  width: min(100%, 42rem);
  min-height: calc(100vh - 2rem);
  margin-inline: auto;
}
.tenkey-output {
  box-sizing: border-box;
  width: 100%;
  border: 2px solid #758793;
  border-radius: .75rem;
  padding: .75rem 1rem;
  background: #fff;
  color: #182127;
  font-size: clamp(1.5rem, 6vmin, 3rem);
  text-align: end;
}