.pronunciation-tools{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 18px;min-height:35px}
.pronunciation-button{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid #cbdfe2;border-radius:9px;background:#f3f9f8;color:#17666b;font-size:13px;font-weight:750;line-height:1.2}
.pronunciation-button:hover,.pronunciation-button[aria-expanded="true"]{background:#e2f2f0;border-color:#9ccfca}
.pronunciation-button:focus-visible{outline:3px solid #7dbeb8;outline-offset:2px}
.pronunciation-button svg{flex:none}
.audio-status{font-size:12px;color:#627b87;line-height:1.35}
.audio-status:not(:empty){flex-basis:100%;line-height:1.55}
.audio-status a{color:#087e7c;text-decoration:underline;font-weight:750}
.reading-popover{position:absolute;left:0;top:calc(100% + 7px);z-index:10;width:min(440px,calc(100vw - 72px));background:#173249;color:#fff;border:1px solid #34536a;border-radius:12px;box-shadow:0 13px 30px #102b4060;padding:15px 17px;text-align:left}
.reading-popover[hidden]{display:none}
.reading-popover small{display:block;color:#a8c6d1;font-size:11px;font-weight:800;letter-spacing:.06em;line-height:1.45}
.reading-note{display:block;color:#d0e0e7;font-size:12px;line-height:1.55;margin-top:11px}
.word-pairs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.word-pair{display:flex;flex-direction:column;gap:3px;min-width:54px;max-width:100%;padding:7px 9px;border:2px solid var(--pair-color);border-radius:9px;background:#fff;color:#223747;transition:background .16s,transform .16s;overflow-wrap:anywhere}
.word-pair span{font-size:14px;line-height:1.3;font-weight:800;color:var(--pair-color)}
.word-pair strong{font-size:15px;line-height:1.35;color:#20374a;font-weight:700}
.spoken-word{color:var(--pair-color);border-bottom:2px solid var(--pair-color);border-radius:2px;padding:0 1px;transition:background .16s,color .16s}
.tone-0{--pair-color:#15617b}.tone-1{--pair-color:#97540d}.tone-2{--pair-color:#694d9a}.tone-3{--pair-color:#1d735e}.tone-4{--pair-color:#a23f63}
.spoken-word.is-speaking{background:#ffd575;color:#152d42;border-color:#d88c27;box-shadow:0 0 0 3px #ffd575}
.word-pair.is-speaking{background:#ffdc87;border-color:#ffc052;transform:translateY(-2px);box-shadow:0 4px 15px #0003}
.word-pair.is-speaking span,.word-pair.is-speaking strong{color:#152d42}
.original-line{margin-top:14px;font-size:14px;color:#667a88;line-height:1.6}
.example .pronunciation-tools{margin:9px 0 0}
.example .pronunciation-button{padding:6px 9px;font-size:12px}
#quiz-feedback .pronunciation-tools,#translation-pronunciation .pronunciation-tools{margin-top:12px}