.vocal-app {
  width: min(100%, 520px);
}

.vocal-intro {
  max-width: 390px;
  margin: 18px auto 28px;
  color: #666;
  font-size: .95rem;
  line-height: 1.55;
}

.vocal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 330px);
  margin: 0 auto;
}

.listening-zone {
  min-height: 76px;
  margin-top: 12px;
}

.replay-btn {
  padding: 9px 16px;
  border: 1px solid #dce8f4;
  border-radius: 999px;
  background: #f5f9fd;
  color: #4f6478;
  cursor: pointer;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
}

.replay-btn:focus-visible,
.action-btn:focus-visible {
  outline: 3px solid rgba(76,155,232,.28);
  outline-offset: 2px;
}

.vocal-instruction {
  margin-top: 12px;
  color: #666;
  font-size: .92rem;
}

.vocal-hands {
  min-height: 210px;
  opacity: 0;
  transition: opacity .18s ease;
}

.vocal-hands.revealed {
  opacity: 1;
}

.vocal-next {
  width: min(100%, 330px);
  margin: 8px auto 0;
}

.vocal-end {
  padding-top: 35px;
}

@media (prefers-reduced-motion: reduce) {
  .vocal-hands { transition: none; }
}