/* Key sampler pad: the source's right-hand pad block (5.49vw square pads, .51vw apart, 1px ink line, .28vw radius;
   phone: 15.38vw pads, 4.62vw apart). A press = scale .96 + border +1px over .1s ease, held 120 ms by the JS. */
.ksp {
  --ksp-ink: #ff0000;
  --ksp-paper: #000;
  --ksp-pad: 5.49vw;
  --ksp-gap: .51vw;
  --ksp-cols: 4;
  --ksp-line: 1px;
  --ksp-radius: .28vw;
  --ksp-font: max(10px, .83vw);
  --ksp-press-scale: .96;
  --ksp-press-dur: .1s;
  --ksp-hit: transparent;          /* optional fill while pressed (the source has none) */
  --ksp-on-bg: var(--ksp-ink);     /* a running loop pad */
  --ksp-on-fg: var(--ksp-paper);
  display: grid;
  grid-template-columns: repeat(var(--ksp-cols), var(--ksp-pad));
  gap: var(--ksp-gap);
  color: var(--ksp-ink);
}
@media (max-width: 1024px) { .ksp { --ksp-pad: 15.38vw; --ksp-gap: 4.62vw; --ksp-radius: 5px; --ksp-font: 11px; } }

.ksp__pad {
  box-sizing: border-box;
  width: var(--ksp-pad); height: var(--ksp-pad);
  margin: 0; padding: 0 .4em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
  background: transparent; color: inherit;
  border: var(--ksp-line) solid currentColor; border-radius: var(--ksp-radius);
  font: inherit; font-size: var(--ksp-font); line-height: 1.2; text-align: center; text-transform: lowercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--ksp-press-dur) ease, border-width var(--ksp-press-dur) ease, background-color var(--ksp-press-dur) ease;
}
.ksp__pad:focus { outline: none; }
.ksp__pad:focus-visible { outline: 1px dashed currentColor; outline-offset: 3px; }
.ksp__key { font-weight: inherit; }
.ksp__pad:active,
.ksp__pad.is-pressed {
  transform: scale(var(--ksp-press-scale));
  border-width: calc(var(--ksp-line) + 1px);
  background-color: var(--ksp-hit);
}
.ksp__pad.is-on { background-color: var(--ksp-on-bg); color: var(--ksp-on-fg); border-color: var(--ksp-on-bg); }

@media (prefers-reduced-motion: reduce) {
  .ksp__pad { transition: none; }
  .ksp__pad:active, .ksp__pad.is-pressed { transform: none; }
}