/* Only the opening-word demo; the rest of the site's visual design is unchanged. */
.speech-demo .demo-head{align-items:center;flex-wrap:nowrap}
.speech-demo .demo-run{flex:none;font-size:14px;min-width:205px;justify-content:center;background:var(--yellow);color:var(--navy)}
.speech-demo .demo-run:hover{background:#ffdf76}
.spoken-line{padding:24px 26px;text-align:center;background:#f8f9fb;border-bottom:1px solid var(--line)}
.spoken-label{font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#777e8c}
.spoken-line p{margin:8px 0 0;font-size:clamp(23px,3.2vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.5}
.spoken-word{border-radius:4px;transition:background .15s,color .15s}
.spoken-word.speaking{background:var(--yellow);color:var(--navy);box-shadow:0 0 0 4px var(--yellow)}
.speech-pane{padding:26px 28px 28px;min-width:0}
.speech-pane + .speech-pane{border-left:1px solid var(--line)}
.speech-mic{color:#747c89;font-size:12px}
.speech-with .pane-tag{background:var(--navy);color:var(--yellow)}
.speech-state{font-size:14px;color:#6c7482;min-height:22px;margin:0 0 22px}
.speech-result{font-size:clamp(23px,2.5vw,30px);line-height:1.7;letter-spacing:-.04em;min-height:60px;font-weight:500}
.missing-word{display:inline-block;color:var(--red);background:#fff0ed;text-decoration:line-through;text-decoration-thickness:2px;border-radius:6px;padding:0 6px;position:relative}
.caught-word{display:inline-block;color:var(--green);background:var(--green-soft);border-radius:6px;padding:0 6px}
.speech-outcome{margin:17px 0 0;font-size:13px;font-weight:600;min-height:21px}
.speech-without .speech-outcome{color:var(--red)}
.speech-with .speech-outcome{color:var(--green)}
.speech-demo .pending{opacity:0}
.speech-demo .revealed{animation:word-arrive .25s ease-out both}
@keyframes word-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:880px){.speech-demo .compare{grid-template-columns:1fr 1fr}.speech-demo .demo-head{flex-wrap:wrap;gap:16px}.speech-demo .demo-run{margin-left:0}.speech-pane{padding:22px 20px}.speech-result{font-size:24px}.speech-state{min-height:44px}.speech-mic{display:block}}
@media(max-width:560px){.speech-demo .demo-head{padding:20px}.speech-demo .demo-title{font-size:21px}.speech-demo .demo-run{width:100%}.spoken-line{padding:18px}.speech-demo .compare{grid-template-columns:1fr}.speech-pane{padding:20px}.speech-pane+.speech-pane{border-left:0;border-top:1px solid var(--line)}.speech-pane .pane-head{margin-bottom:10px}.speech-state{min-height:0;margin-bottom:10px;font-size:13px}.speech-result{min-height:42px;font-size:27px}.speech-outcome{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.speech-demo *{animation:none!important;transition:none!important}}