.speech-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 7px; margin-left: 7px; border: 1px solid #d7e4f6; border-radius: 50%; background: #f1f7ff; color: #3776c8; vertical-align: middle; }
.speech-button:hover { background: #e5f0ff; border-color: #a8c7f1; }
.speech-button:active { transform: translateY(1px); }
.speech-button .icon { width: 19px; height: 19px; }
.speech-button .speech-stop { display: none; }
.speech-button[aria-pressed=true] { background: #2879ec; border-color: #2879ec; color: white; }
.speech-button[aria-pressed=true] .speech-play { display: none; }
.speech-button[aria-pressed=true] .speech-stop { display: inline-flex; }
.speech-button[aria-busy=true] { opacity: .7; }
.question-with-speech { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; }
.question-with-speech .question-word { min-width: 0; }
.question-with-speech .speech-button { margin-left: 0; width: 42px; height: 42px; }
.answer-value .speech-button { vertical-align: middle; }
.spoken-alternative { display: inline-block; margin-right: 12px; }
.usage-word > .speech-button { margin-left: 5px; width: 32px; height: 32px; padding: 6px; }
.usage-word > .speech-button .icon { width: 17px; height: 17px; }
.usage-sentence .speech-button { width: 30px; height: 30px; padding: 5px; }
.han-cell .speech-button { width: 32px; height: 32px; padding: 6px; }
.han-cell .speech-button .icon { width: 17px; height: 17px; }
@media(max-width:720px) {
 .speech-button { width: 34px; height: 34px; }
 .usage-word > .speech-button { margin: 4px 0 0; }
 .han-cell .speech-button { margin: 4px 0 0; }
}