body[data-full-zhuyin="true"] .zhuyin { display:none !important; }
.reading-options { gap:10px; flex-wrap:wrap; }
.reading-toggle[aria-pressed="true"].full-phonetics-toggle { background:#eaf1de; border-color:#8da969; }
.phonetic { display:inline-flex; flex-direction:row-reverse; align-items:center; gap:.12em; margin-inline:.06em; vertical-align:middle; white-space:nowrap; line-height:1.2; }
.phonetic phonetic-base { display:block; line-height:1.15; }
.phonetic-run { display:inline; min-width:0; white-space:normal; overflow-wrap:anywhere; }
phonetic-word { display:inline-block; max-width:100%; vertical-align:baseline; white-space:normal; overflow-wrap:normal; word-break:normal; }
phonetic-head,phonetic-tail { display:inline-block; vertical-align:baseline; white-space:nowrap; }
.simple-brand>.brand-title { display:inline; width:auto; height:auto; border-radius:0; background:none; }
body[data-full-zhuyin="true"] .simple-brand>.phonetic-run { width:auto; height:auto; }
.phonetic rt { display:grid; grid-template-columns:1em .55em; align-items:center; column-gap:.05em; padding-block:.3em; font-family:"Microsoft JhengHei","PingFang TC",sans-serif; font-size:max(16px,.48em); font-weight:500; letter-spacing:0; line-height:1; color:#415832; user-select:none; box-sizing:content-box; }
.phonetic phonetic-sounds { display:flex; position:relative; flex-direction:column; align-items:center; width:1em; line-height:1; letter-spacing:0; }
.phonetic phonetic-symbol { display:block; width:1em; height:1em; line-height:1; text-align:center; }
.phonetic phonetic-neutral { position:absolute; width:1em; height:.6em; line-height:.6; left:0; top:-.65em; text-align:center; }
.phonetic phonetic-tone { display:block; width:.55em; height:1em; font-size:1em; line-height:1; text-align:center; }
body[data-zhuyin="shown"] .zhuyin { display:none!important; }
body[data-zhuyin="shown"] .word-tiles>span:has(.phonetic) { width:auto; height:auto; border:0; background:none; }
.word-tiles .phonetic phonetic-base { display:grid; place-items:center; width:1.18em; height:1.18em; border:1px solid #d8e0c4; background:linear-gradient(#e8eddc,#e8eddc) center/100% 1px no-repeat,linear-gradient(#e8eddc,#e8eddc) center/1px 100% no-repeat; }
.word-tiles .phonetic { margin-inline:0; }
.word-tiles .phonetic rt { font-size:clamp(23px,.46em,34px); min-height:3.1em; padding-block:.12em; }
body[data-full-zhuyin="true"] #app, body[data-full-zhuyin="true"] #dialog { line-height:2.5; }
body[data-full-zhuyin="true"] .simple-header { flex-wrap:wrap; row-gap:12px; }
body[data-full-zhuyin="true"] .simple-brand { white-space:normal; line-height:2.3; }
body[data-full-zhuyin="true"] .child-nav>button { min-width:0; gap:6px; flex-wrap:wrap; padding:12px 5px; }
body[data-full-zhuyin="true"] .child-nav>button>.icon { display:none; }
body[data-full-zhuyin="true"] .child-nav>button>span { white-space:normal; line-height:2.6; overflow-wrap:anywhere; }
body[data-full-zhuyin="true"] .word-tiles>span { height:auto; }
body[data-full-zhuyin="true"] .word-tiles rt { font-size:clamp(23px,.46em,34px); }
body[data-full-zhuyin="true"] .card-content .meaning,
body[data-full-zhuyin="true"] .card-content .example,
body[data-full-zhuyin="true"] .recall-definition,
body[data-full-zhuyin="true"] .question-panel h2,
body[data-full-zhuyin="true"] .answer-option,
body[data-full-zhuyin="true"] .writing-example { line-height:2.8; }
body[data-full-zhuyin="true"] .reading-toggle { line-height:2.5; flex-wrap:wrap; justify-content:center; }
body[data-full-zhuyin="true"] .reading-options { align-items:stretch; }
body[data-full-zhuyin="true"] .reading-toggle .phonetic rt { font-size:16px; }
body[data-full-zhuyin="true"] .card-foot .text-btn,
body[data-full-zhuyin="true"] .compose-entry { line-height:2.4; white-space:normal; }
body[data-full-zhuyin="true"] .word-card .card-meta { line-height:2.4; }
body[data-full-zhuyin="true"] .learn-title { flex-wrap:wrap; }
body[data-full-zhuyin="true"] .learn-title>div:first-child { min-width:0; max-width:100%; }
body[data-full-zhuyin="true"] .word-card .card-meta>span { min-width:0; overflow-wrap:anywhere; }
body[data-full-zhuyin="true"] .learn-tools { flex-wrap:wrap; margin-left:auto; max-width:100%; }
body[data-full-zhuyin="true"] .simple-footer { display:block; text-align:center; line-height:2.6; }
body[data-full-zhuyin="true"] .child-screen .word-card .card-content { padding-top:18px; }
@media(max-width:700px) {
 body[data-full-zhuyin="true"] .simple-header { justify-content:center; }
 body[data-full-zhuyin="true"] .simple-brand { font-size:22px; }
 body[data-full-zhuyin="true"] .child-nav>button>span { font-size:20px; }
 body[data-full-zhuyin="true"] .child-nav { gap:8px; }
 body[data-full-zhuyin="true"] .child-nav>button { flex:2; position:relative; }
 body[data-full-zhuyin="true"] .child-nav>button:last-child { flex:3; }
 body[data-full-zhuyin="true"] .child-nav b { position:absolute; right:2px; top:2px; font-size:11px; min-width:16px; line-height:1.4; }
 body[data-full-zhuyin="true"] .child-nav rt { font-size:16px; }
 body[data-full-zhuyin="true"] .reading-options .reading-toggle { flex:1; min-width:125px; padding:8px; }
 body[data-full-zhuyin="true"] .card-foot .text-btn,
 body[data-full-zhuyin="true"] .compose-entry { font-size:18px; }
 body[data-full-zhuyin="true"] .compose-entry>.icon { display:none; }
 body[data-full-zhuyin="true"] .draw-bar.study-heading { display:grid; grid-template-columns:1fr 1.3fr; gap:12px; padding:12px; align-items:stretch; }
 body[data-full-zhuyin="true"] .filter-trigger { width:100%; padding:8px; text-align:center; justify-content:center; }
 body[data-full-zhuyin="true"] .filter-trigger>.icon,
 body[data-full-zhuyin="true"] .filter-trigger small,
 body[data-full-zhuyin="true"] .draw-button>.icon { display:none; }
 body[data-full-zhuyin="true"] .child-screen .btn.draw-button { width:100%; padding:8px; font-size:26px; line-height:2.4; }
 body[data-full-zhuyin="true"][data-page="learn"] .simple-app { padding-bottom:125px; }
}
/* Learning text has a larger reading size than navigation and status labels. */
:is(.teacher-bubble h1,.teacher-choice,.teacher-feedback,.meaning,.example,.recall-card>h2,.recall-definition,.question-panel h2,.answer-option,.writing-preview,.writing-example,.saved-response,.annotation-word,.definition-title,.detail-word) .phonetic rt { font-size:max(20px,.48em); }
.word-tiles .phonetic rt { font-size:clamp(23px,.46em,34px); }
body[data-full-zhuyin=true] :is(.teacher-bubble h1,.teacher-choice,.recall-definition,.meaning,.example,.writing-preview) { line-height:2.15; }
body[data-full-zhuyin=true] .teacher-bubble h1 { font-size:32px; }
body[data-full-zhuyin=true] .teacher-voice-tools .phonetic-run { white-space:nowrap; }
.writing-reading { margin:18px 0; padding:14px 16px; border:1px solid #dce5cc; border-radius:14px; background:#f5f7ec; }
.writing-reading h4 { font-size:19px; color:#6c8250; margin:0 0 12px; }
.writing-preview { height:140px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; white-space:pre-wrap; overflow-wrap:anywhere; font-size:27px; line-height:2.8; color:#486333; }
.writing-preview.is-empty { color:#859274; font-size:21px; }
body[data-full-zhuyin="true"] #writing-response { min-height:110px; height:140px; }
body[data-full-zhuyin="true"] #writing-form>button[type="submit"] { position:sticky; bottom:0; z-index:1; margin-top:14px; box-shadow:0 -10px 18px #fffef9; }
body[data-full-zhuyin="true"] .page-heading { flex-wrap:wrap; gap:16px; }
body[data-full-zhuyin="true"] .page-heading>div { min-width:0; max-width:100%; }
body[data-full-zhuyin="true"] .center-actions { flex-wrap:wrap; }
body[data-full-zhuyin="true"] .saved-response { line-height:2.8; }
body[data-full-zhuyin="true"] .recall-definition p,
body[data-full-zhuyin="true"] .recall-definition blockquote,
body[data-full-zhuyin="true"] .answer-feedback p { line-height:2.8; }
@media(max-width:700px) {
 .writing-reading { padding:12px; }
 .writing-preview { font-size:25px; height:130px; }
 body[data-full-zhuyin="true"] .rating-buttons { grid-template-columns:1fr; }
 body[data-full-zhuyin="true"] .rating-buttons button { min-width:0; }
 body[data-full-zhuyin="true"] .center-actions>.btn { min-width:0; max-width:100%; }
 body[data-full-zhuyin="true"] .answer-option { padding:15px; gap:12px; }
}