.wbw-panel { margin-block: 1rem; min-width: 0; }
.wbw-status, .wbw-detail { font-size: .85rem; line-height: 1.6; }
.wbw-words { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin-block: .8rem; }
.wbw-panel .wbw-word { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .4rem; min-width: 3rem; min-height: 3rem; max-width: 100%; padding: .7rem .65rem; border: 1px solid var(--rule, #d8ded7); border-radius: .7rem; color: inherit; background: var(--panel, transparent); cursor: pointer; font: inherit; }
.wbw-panel .wbw-word:hover, .wbw-panel .wbw-word:focus-visible, .wbw-panel .wbw-word.is-word-playing { background: var(--soft, #edf1eb); }
.wbw-word:focus-visible, .wbw-retry:focus-visible, .wbw-stop:focus-visible { outline: 3px solid var(--gold, #c48b25); outline-offset: 3px; }
.wbw-panel .wbw-word.is-word-playing { border-color: var(--green, #315849); box-shadow: inset 0 -4px 0 var(--gold, #c48b25); }
.wbw-arabic { font-family: 'Amiri Quran', 'Amiri', serif; font-size: var(--ar-size, 2rem); line-height: 2.3; padding-bottom: .25rem; white-space: nowrap; }
.wbw-meaning, .wbw-transliteration { font-size: .85rem; line-height: 1.4; text-align: center; max-width: 15rem; overflow-wrap: anywhere; }
.wbw-transliteration { font-style: italic; opacity: .85; }
.wbw-detail { padding: .5rem .75rem; border-inline-start: 3px solid var(--gold, #c48b25); min-height: 2.4em; overflow-wrap: anywhere; }
.wbw-status:empty, .wbw-detail:empty, .wbw-panel .wbw-stop[hidden] { display: none; }
.wbw-panel .wbw-stop { min-height: 2.75rem; padding: .35rem .75rem; font-size: .85rem; border: 1px solid var(--rule, #d8ded7); border-radius: .5rem; }
.wbw-retry { min-height: 2.75rem; padding: .5rem .8rem; border: 1px solid var(--rule, #d8ded7); border-radius: .5rem; color: inherit; background: var(--panel, transparent); cursor: pointer; font: inherit; }
.wbw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 420px) { .wbw-words { gap: .35rem; } .wbw-panel .wbw-word { padding-inline: .5rem; } }
@media (forced-colors: active) { .wbw-word.is-word-playing { outline: 3px solid Highlight; } }