body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(-20px);
font-family: serif;
background: #ffffff;
margin: 40px;
padding-bottom: 40px;
}

h1 {
margin-bottom: 5px;
}

.instruction {
margin-bottom: 30px;
}

#score {
margin: 0 auto;
max-width: 1600px;
}

svg {
width: 100%;
height: 500px;
}

.symbol {
fill: none;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 1;
}

.symbol.fill {
fill: #000;
stroke: none;
}

.symbol-image {
opacity: 1;
pointer-events: none;
}

.key {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin: 40px 0 30px;
font-size: 15px;
}

.key p {
margin: 4px 0;
}

.controls {
margin-top: 24px;
text-align: center;
}

button {
margin-right: 10px;
padding: 6px 14px;
font-family: serif;
}
.panel {
width: min(1600px, 90vw);
}

.keyboard {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(10%);
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0px 0.595px;
  width: min(720px, calc(100vw - 48px));
  user-select: none;
}

.kb {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 14px;
  padding: 0;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  touch-action: manipulation;
  transform: translateX(var(--kb-shift, 0));
  transition: transform 90ms ease, filter 140ms ease;
}

.kb:active {
  transform: translateX(var(--kb-shift, 0)) translateY(1px) scale(0.98);
  filter: brightness(0.98) saturate(0.98);
}

.kb[data-key="1"],
.kb[data-key="4"] {
  --kb-shift: 30%;
}

.kb[data-key="3"],
.kb[data-key="6"] {
  --kb-shift: -30%;
}

.kb:focus {
  outline: none;
}

.kb:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.28);
  outline-offset: 2px;
}

.kb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* key1.png is cropped tighter than the others, so visually it reads larger */
.kb[data-key="1"] .kb-img {
  transform: scale(0.8514);
  transform-origin: center;
}

.kb[data-key="2"] .kb-img {
  transform: scale(0.88506);
  transform-origin: center;
}

.kb[data-key="3"] .kb-img {
  transform: scale(1.01);
  transform-origin: center;
}

.kb[data-key="4"] .kb-img {
  transform: scale(0.8514);
  transform-origin: center;
}

.kb[data-key="6"] .kb-img {
  transform: scale(0.8514);
  transform-origin: center;
}

.kb[data-key="2"] {
  transform: translateY(-3px) translateX(var(--kb-shift, 0));
}

.kb[data-key="2"]:active {
  transform: translateY(-3px) translateX(var(--kb-shift, 0)) translateY(1px) scale(0.98);
}

.kb[data-key="3"] {
  transform: translateY(5px) translateX(var(--kb-shift, 0));
}

.kb[data-key="3"]:active {
  transform: translateY(5px) translateX(var(--kb-shift, 0)) translateY(1px) scale(0.98);
}

.kb[data-key="4"] {
  transform: translateY(-7px) translateX(var(--kb-shift, 0));
}

.kb[data-key="4"]:active {
  transform: translateY(-7px) translateX(var(--kb-shift, 0)) translateY(1px) scale(0.98);
}

.kb[data-key="6"] {
  transform: translateY(-9px) translateX(var(--kb-shift, 0));
}

.kb[data-key="6"]:active {
  transform: translateY(-9px) translateX(var(--kb-shift, 0)) translateY(1px) scale(0.98);
}