/* voice */
.voice-prompt {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.voice-prompt-text {
  margin: 0 0 6px;
  font-size: 1.05rem;
  line-height: 1.6;
}
.voice-prompt-text.voice-words {
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: center;
}
.voice-controls {
  align-items: center;
}
.btn-record.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.voice-clock {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.voice-level {
  flex: 1 1 120px;
  max-width: 220px;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.voice-level-bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ok);
  transition: width 0.08s linear;
}
.voice-audio {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 8px 0;
}
.voice-result:empty {
  display: none;
}
.voice-target summary {
  cursor: pointer;
}
.voice-target .target-row {
  margin-top: 8px;
}
.table-compact th,
.table-compact td {
  padding: 5px 6px;
}
.meter-readout {
  margin: 0 0 6px;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.meter-canvas {
  display: block;
  width: 100%;
  height: 260px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.vowel-wrap {
  max-width: 460px;
}
.vowel-space {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.vowel-space .grid {
  stroke: var(--grid);
}
.vowel-space .tick,
.vowel-space .vs-label {
  fill: var(--muted);
  font: 11px var(--font);
}
.vowel-space .vs-label {
  fill: var(--text);
  font-weight: 600;
}
.vs-dot {
  fill: var(--c);
  stroke: var(--surface);
  stroke-width: 1.5;
}
.vs-dot.vs-first {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
}
.chart-svg .band-ref-women,
.vowel-space .band-ref-women {
  fill: color-mix(in srgb, var(--series-2) 16%, transparent);
  stroke: color-mix(in srgb, var(--series-2) 50%, transparent);
  stroke-width: 1;
}
.chart-svg .band-ref-men,
.vowel-space .band-ref-men {
  fill: color-mix(in srgb, var(--series-1) 16%, transparent);
  stroke: color-mix(in srgb, var(--series-1) 50%, transparent);
  stroke-width: 1;
}
.legend-band-ref-women {
  background: color-mix(in srgb, var(--series-2) 22%, transparent);
  border-color: color-mix(in srgb, var(--series-2) 60%, transparent);
}
.legend-band-ref-men {
  background: color-mix(in srgb, var(--series-1) 22%, transparent);
  border-color: color-mix(in srgb, var(--series-1) 60%, transparent);
}
.compare-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .compare-cols {
    grid-template-columns: 1fr;
  }
}
.compare-col {
  min-width: 0;
}