.voice-input-panel { display: flex; align-items: flex-start; gap: 1rem; border: 1px solid color-mix(in oklab, var(--color-secondary) 32%, var(--color-base-300)); border-radius: var(--radius-box); padding: 1.1rem 1.2rem; background: color-mix(in oklab, var(--color-secondary) 7%, var(--color-base-100)); color: var(--color-base-content); text-align: left; }
.voice-input-panel__mark { display: inline-flex; width: 3rem; height: 3rem; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in oklab, var(--color-secondary) 18%, transparent); color: var(--color-secondary); font-size: 1.25rem; font-weight: 900; }
.voice-input-panel__mark--quiet { background: color-mix(in oklab, var(--color-error) 13%, transparent); color: var(--color-error); }
.voice-input-panel__body { min-width: 0; flex: 1; }
.voice-input-panel__eyebrow { color: var(--color-secondary); font-size: .75rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.voice-input-panel__title { margin-top: .3rem; font-size: 1.15rem; font-weight: 900; line-height: 1.2; }
.voice-input-panel__copy { max-width: 44rem; margin: .45rem 0 1rem; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); font-size: .92rem; line-height: 1.5; }
.voice-input-panel button { margin-top: .1rem; }

@media (max-width: 600px) {
  .voice-input-panel { flex-direction: column; }
  .voice-input-panel button { width: 100%; }
}