.read-aloud {box-sizing:border-box; margin:1.5rem 0; padding:1.1rem; border:1px solid var(--line,#52685b); border-radius:10px; background:var(--surface,#192a23); color:var(--ink,#f1eee4); font:16px/1.5 system-ui,sans-serif; text-align:left;}
.read-aloud * {box-sizing:border-box;}
.read-aloud-heading,.read-aloud-controls,.read-aloud-settings {display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; margin-bottom:.8rem;}
.read-aloud-heading {justify-content:space-between;}
.read-aloud-status {font-size:.875rem;}
.read-aloud button,.read-aloud select {font:inherit; color:inherit; background:var(--bg,#101c18); border:1px solid var(--line,#819184); border-radius:6px; min-height:44px; padding:.5rem .75rem; cursor:pointer; margin:0; text-transform:none; letter-spacing:normal;}
.read-aloud button:first-child {background:#d9c391; color:#17221c; border-color:#d9c391; font-weight:650; min-width:140px;}
.read-aloud button:disabled {opacity:.45; cursor:default;}
.read-aloud :is(button,select):focus-visible {outline:3px solid #d9c391; outline-offset:3px;}
.read-aloud-settings {align-items:flex-end;}
.read-aloud-settings label {display:flex; flex-direction:column; gap:.25rem; font-size:.875rem; flex:1 1 200px; min-width:0;}
.read-aloud-settings label:last-child {flex:0 1 100px;}
.read-aloud select {width:100%; max-width:100%; font-size:1rem;}
.read-aloud progress {display:block; width:100%; height:8px; accent-color:#c9b579;}
.read-aloud .read-aloud-help {font:14px/1.5 system-ui,sans-serif; margin:.7rem 0 0; opacity:.85;}
@media(max-width:480px) {.read-aloud {padding:.85rem;} .read-aloud-heading {align-items:flex-start; flex-direction:column;} .read-aloud-controls button {flex:1 1 auto;}}