#reader-view{--reader-line:#d9c9a9;--reader-jade:#2c5d63;color:#3a2618}
#reader-view *{box-sizing:border-box}
#reader-view button{font:inherit;cursor:pointer}
.reader-grid{display:grid;grid-template-columns:190px minmax(0,1fr) 340px;height:calc(100dvh - 150px);min-height:520px;border:1px solid var(--reader-line);border-radius:6px;overflow:hidden;background:#f8f4e9}
.reader-toc,.reader-space,.reader-annotation{min-width:0;overflow-y:auto;overscroll-behavior:contain}
.reader-toc{padding:24px 16px;background:#f0e9d8;border-right:1px solid var(--reader-line)}
#reader-view h2{font-size:19px;color:var(--reader-jade);margin:0 0 18px}
.reader-toc h3{font-size:13px;color:#81735c;margin:20px 9px 8px;letter-spacing:3px}
.reader-toc button{display:block;width:100%;padding:10px 9px;text-align:left;color:#625541;background:none;border:0;border-radius:4px}
.reader-toc button.active{background:#e3ddcd;color:#113e32;font-weight:700}
.reader-toc button span{display:inline-block;width:30px;color:#a39173;font-size:12px}
.reader-space{padding:30px clamp(16px,3vw,45px)}
.reader-page{max-width:770px;margin:auto;padding:34px clamp(20px,3vw,48px) 50px;background:#fffdf8;border:1px solid var(--reader-line);box-shadow:0 3px 18px #3a261812;border-radius:3px}
.reader-kicker{display:flex;justify-content:space-between;color:#8f826b;font-size:13px;gap:10px}
#reader-title{font-family:SimSun,"Songti SC",serif;font-size:36px;text-align:center;color:#113e32;margin:22px 0 12px}
.reader-font{margin-bottom:28px;display:flex;align-items:center;justify-content:center;gap:12px;color:#81735c;font-size:13px}
.reader-font button{border:1px solid var(--reader-line);border-radius:4px;background:#f8f4e9;padding:3px 10px;color:#3a2618}
.reader-font button:disabled{opacity:.4;cursor:default}
.reader-hint{text-align:center;font-size:12px;color:#81735c;margin:18px 0 30px}
#reader-original{font-family:SimSun,"Songti SC","STSong",serif;font-size:22px;line-height:2.04}
.reader-passage{padding:8px 10px;margin-bottom:14px;border-left:2px solid transparent;cursor:pointer;white-space:pre-wrap}
.reader-passage.selected{border-left-color:#b59a62;background:#f8f4e9}
#reader-view .reader-concept{padding:0;border:0;border-radius:2px;background:transparent;color:inherit;font:inherit;line-height:inherit;text-decoration:underline dashed #8c6d46;text-underline-offset:6px}
#reader-view .reader-concept.selected{background:#eee0b7;color:#113e32}
#reader-view button:focus-visible,.reader-passage:focus-visible{outline:2px solid #2c5d63;outline-offset:3px}
.reader-annotation{padding:25px 22px;background:#fffdf8;border-left:1px solid var(--reader-line)}
#reader-sources{display:block}
.reader-source-entry{border-bottom:1px solid var(--reader-line)}
.reader-source-entry summary{cursor:pointer;padding:14px 2px;color:#625541;font-size:14px;line-height:1.7}
.reader-source-entry summary small{display:block;margin-left:16px;color:#8f826b;font-size:12px}
.reader-source-entry[open] summary{color:#2c5d63;font-weight:600}
.reader-source-content{padding:4px 8px 12px}
.reader-note-empty,#reader-note-status{font-size:13px;color:#81735c;line-height:1.8}
.reader-base-label{text-align:center;font-size:11px;color:#8f826b;margin:-18px 0 24px}
#reader-selected{margin:16px 0;padding:14px;border-left:3px solid #8c6d46;background:#f5edde;font-family:SimSun,"Songti SC",serif;line-height:1.8}
.reader-note{margin-bottom:22px;white-space:pre-wrap;font-size:16px;line-height:1.9}
.reader-note h3{font-size:13px;color:#2c5d63;margin:0 0 6px}
#reader-status{font-size:14px;color:#81735c}
@media(max-width:1100px){.reader-grid{grid-template-columns:145px minmax(0,1fr) 290px}.reader-space{padding:18px 12px}.reader-annotation{padding:24px 16px}}
@media(max-width:820px){.reader-grid{grid-template-columns:1fr;height:auto;min-height:0}.reader-toc{border-right:0;border-bottom:1px solid var(--reader-line);padding:12px 16px}.reader-toc h2{display:none}#reader-toc{display:flex;gap:10px;overflow-x:auto;align-items:center}.reader-toc h3{flex:none;margin:0}.reader-toc button{flex:none;width:auto;white-space:nowrap}.reader-space{overflow:visible}.reader-page{padding:25px 20px}.reader-annotation{border-left:0;border-top:1px solid var(--reader-line);max-height:55vh}.reader-hint{font-size:11px}}
@media(max-width:820px){.reader-space{padding-bottom:calc(40vh + 35px)}.reader-annotation{position:fixed;z-index:90;bottom:10px;left:10px;right:10px;max-height:40vh;border:1px solid var(--reader-line);border-radius:5px;box-shadow:0 8px 24px #3a261833}}


#card-retry-btn[hidden]{display:none}
#card-retry-btn{margin-bottom:12px}.reader-font{flex-wrap:wrap;gap:8px}
.reader-font button[aria-pressed="true"]{background:#2c5d63;color:#fffdf8;border-color:#2c5d63}
.reader-vertical #reader-original{writing-mode:vertical-rl;text-orientation:mixed;height: min(520px,60vh);min-height:300px;width:100%;overflow-x:auto;overflow-y:hidden;padding:12px 6px 22px;scrollbar-color:#b59a62 #f0e9d8}
.reader-vertical .reader-passage{display:inline-block;box-sizing:border-box;height:100%;margin:0 0 0 14px;padding:10px 12px;vertical-align:top;border-left:0;border-right:2px solid transparent}
.reader-vertical .reader-passage.selected{border-right-color:#b59a62}
.reader-personal-notes{padding:12px 0 20px;border-bottom:1px solid var(--reader-line)}
.reader-note-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.reader-note-heading h3{margin:0;color:#2c5d63;font-size:15px}
.reader-note-heading button,.reader-dialog button{border:1px solid #d9c9a9;background:#f8f4e9;border-radius:4px;padding:6px 10px;color:#2c5d63;cursor:pointer}
.reader-personal-note{padding:14px 0;border-bottom:1px solid #d9c9a9}
.reader-personal-note h3{font-size:16px;color:#2c5d63;margin:0 0 8px}
.reader-personal-note p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}
.reader-personal-note small{color:#8f826b}
.reader-personal-note blockquote{font-size:14px;max-height:120px;overflow:auto}
.reader-passage.has-personal-note{box-shadow:inset 0 -2px #c2a46e}
.reader-dialog{color:#3a2618;background:#fffdf8;border:1px solid #d9c9a9;border-radius:8px;padding:0;width:min(720px,calc(100vw - 28px));max-height:85dvh;overflow:auto;box-shadow:0 20px 70px #3a261850}
.reader-dialog{position:fixed;inset:0;margin:auto}
.reader-dialog::backdrop{background:#3a261866}
.reader-dialog header,.reader-dialog footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;background:#f0e9d8}
.reader-dialog header h2{font-size:22px;margin:0;color:#2c5d63}
.reader-dialog footer{justify-content:flex-end;position:sticky;bottom:0}
.reader-dialog-body{padding:20px 24px}
.reader-dialog label{display:block;margin:15px 0 8px;color:#2c5d63}
.reader-dialog input,.reader-dialog textarea,.reader-dialog select{box-sizing:border-box;border:1px solid #d9c9a9;border-radius:4px;background:#fffdf8;color:#3a2618;padding:10px;font:inherit;max-width:100%}
.reader-dialog input,.reader-dialog textarea{width:100%}
.reader-dialog blockquote{margin:10px 0;padding:12px 16px;border-left:3px solid #b59a62;background:#f5edde;white-space:pre-wrap;line-height:1.9}
.reader-dialog button:focus-visible,.reader-dialog input:focus-visible,.reader-dialog textarea:focus-visible{outline:2px solid #2c5d63;outline-offset:2px}
.reader-occurrence{border-bottom:1px solid #d9c9a9;padding:12px 0}
.reader-occurrence h3{font-size:15px;color:#2c5d63}
.reader-occurrence p{font-size:14px;line-height:1.8;white-space:pre-wrap}
.reader-occurrence mark{background:#eee0b7;color:inherit}
#reader-save-error,#reader-storage-status{color:#9d4838;font-size:13px}
#reader-selection-note{position:fixed;right:24px;bottom:24px;z-index:1100;border:1px solid #d9c9a9;background:#2c5d63;color:#fffdf8;padding:10px 14px;border-radius:5px;cursor:pointer}
#reader-selection-note[hidden]{display:none}
@media(max-width:820px){#reader-selection-note{bottom:calc(40vh + 24px)}.reader-vertical #reader-original{height:48vh;min-height:260px}.reader-dialog header,.reader-dialog-body,.reader-dialog footer{padding:16px}}
/* Full-text concept results follow the supplied reader's result cards. */
#reader-concept-dialog .reader-occurrence{padding:17px 0;border-bottom:1px solid #d9c9a9;min-width:0}
.reader-result-location{font-size:10px;color:#a29170;letter-spacing:1px;margin-bottom:9px}
.reader-result-text{font-family:"Songti SC",SimSun,serif;font-size:17px;line-height:1.9;margin:0 0 9px;white-space:pre-wrap;overflow-wrap:anywhere}
.reader-result-footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#a99a7f;gap:12px}
.reader-result-footer button{border:0;background:transparent;color:#2c5d63;padding:3px 0;font-size:12px}
.reader-concept-search{display:flex;gap:8px;margin:18px 0 10px}
.reader-concept-search input{min-width:0;flex:1;border:1px solid #d9c9a9;border-radius:5px;padding:9px 12px;background:#fffdf8;font:inherit}
.reader-concept-search button,.reader-concept-chips button{border:1px solid #d9c9a9;border-radius:16px;padding:6px 14px;color:#2c5d63;background:#f5edde;cursor:pointer}
.reader-concept-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;font-size:14px}
.reader-current-concepts h3{font-size:15px;color:#2c5d63;margin:14px 0 10px}
.reader-personal-note{background:#faf6ee;border:1px solid #e7dcc8;border-radius:8px;padding:16px;margin:12px 0}
.reader-personal-note h3{font-family:"Songti SC",SimSun,serif;font-size:18px;color:#2c5d63;margin:0 0 8px}
/* Concept search belongs inside the full-text occurrence dialog. */
#reader-concept-dialog .reader-concept-search{margin:0 0 14px}
#reader-concept-dialog .reader-concept-search button{background:#8c6d46;color:#fffdf8;border:0;border-radius:5px}
#reader-search-results:empty{display:none}
/* Compact note controls in the reading sidebar. */
#reader-view .reader-personal-notes button{font-size:12px;line-height:1.4;padding:3px 8px;border-radius:4px;min-height:0;min-width:0;width:auto;flex:0 0 auto}
#reader-view .reader-personal-notes .reader-note-heading{gap:6px}
#reader-view .reader-personal-note .reader-note-heading{justify-content:flex-end;margin-top:8px}
/* Match the page navigation's rounded tabs and selected state. */
.reader-layout-switch{display:inline-flex;align-items:center;gap:5px;padding:4px;border-radius:50px;background:rgba(148,135,120,.14)}
#reader-view .reader-layout-switch button{border:0;border-radius:30px;padding:7px 17px;background:transparent;color:#625541;font-family:SimSun,"Songti SC",serif;font-size:14px;font-weight:500;line-height:1.2;transition:background .2s,color .2s,box-shadow .2s}
#reader-view .reader-layout-switch button[aria-pressed="true"]{background:#948778;color:#f8f4e9;box-shadow:0 2px 8px rgba(0,0,0,.2)}
#reader-view .reader-layout-switch button:hover:not([aria-pressed="true"]){background:rgba(44,93,99,.25)}
/* Unified rounded navigation-style controls across the reader and its dialogs. */
#reader-view button:not(.reader-concept),.reader-dialog button,#reader-selection-note{
 border:0;border-radius:30px;background:rgba(148,135,120,.14);color:#625541;
 font-family:SimSun,"Songti SC",serif;font-weight:500;line-height:1.4;
 transition:background .2s,color .2s,box-shadow .2s;
}
#reader-view button:not(.reader-concept):not(:disabled):hover,.reader-dialog button:not(:disabled):hover,#reader-selection-note:hover{
 background:rgba(44,93,99,.25);
}
#reader-view button:not(.reader-concept).active,
#reader-view button:not(.reader-concept)[aria-pressed="true"],
.reader-dialog button[type="submit"],#reader-concept-detail,#reader-selection-note{
 background:#948778;color:#f8f4e9;box-shadow:0 2px 8px rgba(0,0,0,.2);
}
#reader-view button:not(.reader-concept)[aria-pressed="true"]:hover,
.reader-dialog button[type="submit"]:hover,#reader-concept-detail:hover,#reader-selection-note:hover{
 background:#847767;
}
.reader-dialog button{padding:6px 14px;font-size:13px}
#reader-view .reader-personal-notes button{border-radius:30px;padding:3px 9px;font-size:12px}
#reader-view .reader-toc button{background:transparent}
#reader-view .reader-toc button.active{background:#948778;color:#f8f4e9;box-shadow:0 2px 8px rgba(0,0,0,.2)}
#reader-view .reader-toc button.active span{color:#f8f4e9}
#reader-concept-dialog .reader-concept-search button{border-radius:30px;background:#948778;color:#f8f4e9;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.reader-dialog button:disabled,#reader-view button:disabled{opacity:.45;cursor:default;box-shadow:none}
/* Equal-sized controls in the reading toolbar, including the layout switch. */
#reader-view .reader-font button:not(.reader-concept){
 box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
 width:84px;height:36px;min-width:84px;flex:0 0 84px;padding:0 10px;
 font-size:14px;line-height:1.2;white-space:nowrap;
}
.reader-result-footer{justify-content:flex-end}
/* Larger excerpts with the return action alongside the text. */
#reader-concept-dialog .reader-occurrence{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:8px;align-items:center}
#reader-concept-dialog .reader-result-location{grid-column:1 / -1;margin-bottom:0}
#reader-concept-dialog .reader-result-text{font-size:21px;line-height:1.9;margin:0;min-width:0}
#reader-concept-dialog .reader-result-footer{align-self:center}
#reader-concept-dialog .reader-result-footer button{white-space:nowrap}
@media(max-width:540px){
 #reader-concept-dialog .reader-occurrence{grid-template-columns:minmax(0,1fr)}
 #reader-concept-dialog .reader-result-text{font-size:20px}
 #reader-concept-dialog .reader-result-footer{justify-self:end}
}
/* Highlighting must not change typography within an excerpt. */
#reader-concept-dialog .reader-result-text mark{
 font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;
 line-height:inherit;letter-spacing:inherit;
}
/* Use the same Songti stack as the chapter directory throughout original text. */
#reader-original,#reader-selected,#reader-concept-dialog .reader-result-text,#reader-note-quote{
 font-family:SimSun,"Songti SC",serif;
}
#reader-view #reader-original .reader-concept{
 font-family:inherit;
}
/* Apply the directory typeface to entire passages, including nested controls. */
#reader-view #reader-toc button,
#reader-view #reader-original,
#reader-view #reader-original .reader-passage,
#reader-view #reader-original .reader-passage *,
#reader-view #reader-selected,
#reader-concept-dialog .reader-result-text,
#reader-concept-dialog .reader-result-text *{
 font-family:SimSun,"Songti SC",serif;
}
/* Separate the reading, concepts/commentary, and personal notes columns. */
#reader-view .reader-grid{grid-template-columns:140px minmax(280px,1.35fr) minmax(245px,1fr) minmax(215px,.85fr)}
#reader-view .reader-space{padding:20px 16px}
#reader-view .reader-page{padding:24px 16px 36px}
#reader-view #reader-original{font-size:19px;line-height:1.95}
#reader-view #reader-title{font-size:28px;margin:18px 0 14px}
#reader-view .reader-annotation,#reader-view .reader-notes-column{padding:20px 16px}
.reader-notes-column{min-width:0;overflow-y:auto;overscroll-behavior:contain;background:#fffdf8;border-left:1px solid var(--reader-line)}
#reader-view .reader-notes-column h2,#reader-view .reader-annotation h2{font-size:17px}
#reader-view .reader-note{font-size:14px;line-height:1.85}
#reader-view #reader-selected{font-size:16px;padding:10px}
#reader-view .reader-personal-note{padding:12px;font-size:14px;line-height:1.8}
#reader-view .reader-personal-note h3{font-size:16px}
#reader-view .reader-personal-note blockquote{font-size:14px}
#reader-view .reader-font{gap:6px}
#reader-view .reader-font button:not(.reader-concept){width:64px;min-width:64px;flex-basis:64px;height:32px;padding:0 6px;font-size:12px}
@media(min-width:821px) and (max-width:1100px){
 #reader-view .reader-grid{grid-template-columns:110px minmax(230px,1fr) minmax(210px,.9fr) minmax(190px,.8fr);overflow-x:auto}
 #reader-view .reader-space{padding:12px 8px}
}
@media(max-width:820px){
 #reader-view .reader-grid{grid-template-columns:minmax(0,1fr);height:auto}
 #reader-view .reader-annotation{position:static;max-height:none;box-shadow:none;border:0;border-top:1px solid var(--reader-line);border-radius:0}
 #reader-view .reader-notes-column{overflow:visible;border-left:0;border-top:1px solid var(--reader-line)}
 #reader-view .reader-space{padding-bottom:16px}
 #reader-selection-note{bottom:20px}
}
.reader-notes-column-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
#reader-view .reader-notes-column-heading h2{margin:0}
#reader-view .reader-notes-column-heading button{flex:none;padding:5px 10px;font-size:12px;white-space:nowrap}