/* Read-aloud (v20) */
.ra-ico{width:18px;height:18px;flex:none;vertical-align:-3px}
.ra-listen{display:inline-flex;align-items:center;gap:8px;background:#1b4d43;color:#fff;border:0;border-radius:14px;padding:10px 18px;font-weight:800;box-shadow:0 1px 0 #0e2f28;cursor:pointer}
.ra-listen:hover{background:#24554d}
.ra-listen.on{background:#f3c96b;color:#2b2210;box-shadow:0 0 0 3px rgba(243,201,107,.35)}
.reading-toolbar .ra-listen{margin-right:auto;margin-left:12px}
@media(max-width:550px){.reading-toolbar .ra-listen{margin-left:0}}

/* sentence and word marks */
::highlight(ra-sentence){background-color:rgba(243,201,107,.42);color:inherit}
::highlight(ra-word){background-color:rgba(232,160,40,.75);color:#1d1606}
[data-paper="night"] ::highlight(ra-sentence){background-color:rgba(243,201,107,.28)}
[data-paper="night"] ::highlight(ra-word){background-color:rgba(243,201,107,.85);color:#111}
.ra-reading{background:rgba(243,201,107,.32);border-radius:8px;box-shadow:0 0 0 4px rgba(243,201,107,.32)}
[data-paper="night"] .ra-reading{background:rgba(243,201,107,.18);box-shadow:0 0 0 4px rgba(243,201,107,.18)}
.ans button.ra-reading{outline:3px solid #e2b04a;outline-offset:1px}

/* controls bar while the story is read aloud */
body.ra-on .reading-space{padding-bottom:96px}
.ra-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 24px);padding:10px 14px;border-radius:18px;background:#13332d;color:#f4efe2;box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.06) inset;font:600 14px/1.2 ui-sans-serif,system-ui,sans-serif}
.ra-bar button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:11px;padding:9px 13px;font:inherit;font-weight:800;cursor:pointer;background:rgba(255,255,255,.1);color:inherit}
.ra-bar button:hover{background:rgba(255,255,255,.18)}
.ra-bar button:focus-visible,.ra-bar select:focus-visible,.ra-listen:focus-visible,.ra-q:focus-visible,.ra-fb:focus-visible{outline:3px solid #f3c96b;outline-offset:2px}
.ra-bar .ra-main{background:#f3c96b;color:#2b2210;min-width:98px;justify-content:center}
.ra-bar .ra-main:hover{background:#f7d688}
.ra-speed{display:inline-flex;gap:2px;background:rgba(0,0,0,.22);border-radius:12px;padding:3px}
.ra-speed button{padding:7px 10px;background:none;font-weight:700}
.ra-speed button.on{background:#f4efe2;color:#13332d}
.ra-voice{display:inline-flex;align-items:center;gap:6px}
.ra-voice span{opacity:.8;font-weight:700}
.ra-voice select{max-width:150px;border-radius:10px;border:0;padding:8px;background:#f4efe2;color:#13332d;font:inherit;font-weight:700}
.ra-tip{opacity:.7;font-weight:600;font-size:12.5px}
@media(max-width:700px){.ra-tip{display:none}.ra-bar{bottom:10px;gap:6px;padding:8px}.ra-bar button{padding:8px 10px}.ra-voice span{display:none}.ra-voice select{max-width:110px}}

/* question and feedback buttons */
.qz .qn{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ra-q{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1.5px solid #c9dcd5;background:#fff;color:#1b4d43;border-radius:999px;padding:5px 12px 5px 9px;font:800 12.5px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.02em;text-transform:none;cursor:pointer}
.ra-q:hover{background:#eef6f2}
.ra-q .ra-ico{width:16px;height:16px}
.ra-q.on{background:#f3c96b;border-color:#e2b04a;color:#2b2210}
.ra-fb{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin:-4px 8px -4px 0;border:0;border-radius:50%;background:rgba(0,0,0,.07);color:inherit;cursor:pointer;vertical-align:middle}
.ra-fb .ra-ico{width:16px;height:16px}
.ra-fb.on{background:#f3c96b;color:#2b2210}
@media(prefers-reduced-motion:reduce){.ra-bar{transition:none}}
.ra-look{margin:10px 0 2px}