.keyboard-placeholder {
  position: relative;
  z-index: 3;
  width: min(920px, 94vw);
  min-height: 255px;
  margin-top: -4px;
  padding: 13px 24px 20px;
  overflow: hidden;
  border: 1px solid #6f7061;
  border-radius: 8px 8px 18px 18px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.08), transparent 10%, transparent 88%, rgba(0, 0, 0, 0.13)),
    linear-gradient(180deg, #b9b69f, #918f7b);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.37),
    0 19px 28px rgba(0, 0, 0, 0.5);
  transform: rotateX(39deg);
  transform-origin: center top;
}

.keyboard-placeholder__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
  color: #45473e;
  font-family: var(--condensed);
  font-size: 7px;
  letter-spacing: 1.3px;
}

.keyboard-placeholder__top > span:nth-child(2) {
  text-align: center;
}

.keyboard-next {
  justify-self: end;
  color: #2f4e32;
  font: 600 7px/1 var(--mono);
  letter-spacing: 0.8px;
}

.keyboard-placeholder__keys {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.key-row {
  display: flex;
  gap: 5px;
  width: 100%;
}

.key {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 31px;
  padding: 3px;
  border: 1px solid #64645a;
  border-bottom-width: 3px;
  border-radius: 3px 3px 5px 5px;
  color: #252721;
  background: linear-gradient(145deg, #eee9ce, #b9b69f 78%);
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, 0.52),
    0 2px 2px rgba(34, 34, 28, 0.26);
  font: 600 clamp(7px, 1vw, 10px)/1 var(--mono);
  text-align: center;
  text-transform: none;
  user-select: none;
  transition:
    color 90ms ease,
    background 90ms ease,
    border-color 90ms ease,
    box-shadow 90ms ease,
    transform 90ms ease;
}

.key span {
  margin-right: 4px;
  font-size: 0.78em;
  opacity: 0.76;
}

.key--letter {
  color: #11130f;
  font-size: clamp(10px, 1.3vw, 14px);
  font-weight: 600;
}

.key--dark {
  height: 22px;
  border-color: #292b28;
  color: #e4e1ca;
  background: linear-gradient(145deg, #62635b, #343630 75%);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
  font-size: clamp(6px, 0.8vw, 8px);
}

.key-spacer {
  flex: 0.8 1 0;
}

.key-spacer--small {
  flex-basis: 0.35%;
}

.key--wide {
  flex-grow: 2.05;
}

.key--tab {
  flex-grow: 1.55;
  justify-content: flex-start;
  padding-left: 7px;
  font-size: clamp(6px, 0.8vw, 8px);
}

.key--slash {
  flex-grow: 1.4;
}

.key--caps {
  flex-grow: 1.85;
  justify-content: flex-start;
  padding-left: 7px;
  font-size: clamp(5px, 0.75vw, 8px);
}

.key--enter {
  flex-grow: 2.15;
  font-size: clamp(6px, 0.8vw, 8px);
}

.key--shift {
  flex-grow: 2.35;
  justify-content: flex-start;
  padding-left: 7px;
  font-size: clamp(6px, 0.8vw, 8px);
}

.key--shift-right {
  flex-grow: 3.05;
  justify-content: flex-end;
  padding-right: 7px;
}

.key-row--bottom {
  padding-inline: 2.5%;
}

.key--modifier {
  flex-grow: 0.9;
  max-width: 58px;
  font-size: clamp(6px, 0.8vw, 8px);
}

.key--space {
  flex-grow: 6.2;
  color: rgba(37, 39, 33, 0.6);
  font-size: clamp(5px, 0.7vw, 7px);
  letter-spacing: 1px;
}

.key-spacer--arrows {
  flex-grow: 0.4;
}

.key--arrow {
  flex-grow: 0.72;
  max-width: 36px;
  font-size: 11px;
}

.key.is-expected {
  z-index: 2;
  border-color: #347d3d;
  color: #09230e;
  background: linear-gradient(145deg, #d9ffd8, #78db7f 78%);
  box-shadow:
    inset 1px 1px rgba(255, 255, 255, 0.65),
    0 0 0 2px rgba(64, 222, 79, 0.28),
    0 0 13px rgba(69, 255, 86, 0.56);
  animation: expected-key 1.05s ease-in-out infinite alternate;
}

.key.is-expected-modifier {
  border-color: #707d34;
  color: #252c0b;
  background: linear-gradient(145deg, #f4f5c8, #c5ca68 78%);
  box-shadow: 0 0 10px rgba(222, 232, 91, 0.46);
  animation: expected-key 1.05s ease-in-out infinite alternate;
}

.key.is-pressed,
.key.is-pressed-correct,
.key.is-pressed-error {
  animation: none;
  transform: translateY(3px);
  border-bottom-width: 1px;
}

.key.is-pressed {
  filter: brightness(0.82);
}

.key.is-pressed-correct {
  border-color: #267832;
  color: #071d0a;
  background: linear-gradient(145deg, #c4ffc8, #55d861 78%);
  box-shadow: 0 0 15px rgba(69, 255, 86, 0.72);
}

.key.is-pressed-error {
  border-color: #8e3024;
  color: #2b0804;
  background: linear-gradient(145deg, #ffd1c8, #f16f5b 78%);
  box-shadow: 0 0 15px rgba(255, 76, 52, 0.68);
}

@keyframes expected-key {
  from { filter: brightness(0.92); }
  to { filter: brightness(1.1); }
}

@media (max-width: 760px) {
  .keyboard-placeholder {
    width: 98%;
    min-height: 205px;
    padding: 10px 12px 14px;
    transform: rotateX(31deg);
  }

  .keyboard-placeholder__keys,
  .key-row {
    gap: 3px;
  }

  .key {
    height: 26px;
    border-bottom-width: 2px;
  }

  .key--dark {
    height: 18px;
  }
}

@media (max-width: 480px) {
  .keyboard-placeholder {
    width: 112%;
    min-height: 176px;
    padding: 7px 8px 10px;
    transform: rotateX(24deg) scale(0.88);
    transform-origin: center top;
  }

  .keyboard-placeholder__top span:last-child {
    justify-self: end;
  }

  .keyboard-placeholder__top > span:nth-child(2) { display: none; }

  .keyboard-placeholder__top { grid-template-columns: 1fr auto; }

  .keyboard-placeholder__keys,
  .key-row {
    gap: 2px;
  }

  .key {
    height: 23px;
    padding: 1px;
    font-size: 6px;
  }

  .key--letter {
    font-size: 9px;
  }

  .key--dark {
    height: 16px;
    font-size: 5px;
  }

  .key--caps,
  .key--shift,
  .key--tab,
  .key--enter,
  .key--modifier {
    font-size: 5px;
  }
}