:root{--bg: #faf9f5;--surface: #ffffff;--text: #21201d;--muted: #6b6a64;--line: #e8e6df;--accent: #185fa5;--accent-bg: #e6f1fb;--vocab-bg: #dcd9f2;--vocab: #332b80;--vocab-mid: #7f77dd;--conn-bg: #c6e2d7;--conn: #06483a;--conn-mid: #1d9e75;--gram-bg: #f1d6cc;--gram: #6b2711;--gram-mid: #d85a30;--idiom-bg: #f3d4df;--idiom: #6d1f39;--idiom-mid: #d4537e;--lv-a1: #3b6d11;--lv-a1-bg: #eaf3de;--lv-a2: #854f0b;--lv-a2-bg: #faeeda;--lv-b1: #185fa5;--lv-b1-bg: #e6f1fb;--lv-b2: #993c1d;--lv-b2-bg: #faece7;--lv-book: #a32d2d;--lv-book-bg: #fcebeb;--ok: #0f6e56;--ok-bg: #e1f5ee;--bad: #a32d2d;--bad-bg: #fcebeb;--hint-bg: #faeeda;--hint: #633806;--inverse-text: #ffffff;--reading-bg: #fac775;--reading-fg: #412402;--serif: "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius: 10px;--shadow: 0 1px 3px rgb(33 32 29 / .06), 0 8px 24px rgb(33 32 29 / .05);--shadow-pop: 0 4px 12px rgb(33 32 29 / .12), 0 12px 32px rgb(33 32 29 / .14);color-scheme:light}:root[data-theme=dark]{--bg: #171613;--surface: #201f1b;--text: #ece9e1;--muted: #a5a196;--line: #34322c;--accent: #8cbcf0;--accent-bg: #17293c;--vocab-bg: #2a255a;--vocab: #c5bff8;--vocab-mid: #7f77dd;--conn-bg: #123c33;--conn: #8fd9c2;--conn-mid: #1d9e75;--gram-bg: #452219;--gram: #f2b69f;--gram-mid: #d85a30;--idiom-bg: #46212d;--idiom: #f2aac0;--idiom-mid: #d4537e;--lv-a1: #abd47e;--lv-a1-bg: #22301a;--lv-a2: #e4b46d;--lv-a2-bg: #35270f;--lv-b1: #8cbcf0;--lv-b1-bg: #17293c;--lv-b2: #efaa88;--lv-b2-bg: #3a2118;--lv-book: #f0a0a0;--lv-book-bg: #3c1e1e;--ok: #82d6b9;--ok-bg: #12332a;--bad: #f39e9e;--bad-bg: #3a1d1d;--hint-bg: #33280f;--hint: #ebcb8d;--inverse-text: #171613;--reading-bg: #f2bd5e;--reading-fg: #2b1802;--shadow: 0 1px 3px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .4);--shadow-pop: 0 4px 12px rgb(0 0 0 / .55), 0 12px 32px rgb(0 0 0 / .5);color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}.shell{max-width:780px;margin:0 auto;padding:2rem 1.25rem 4rem}a{color:var(--accent)}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.topbar .crumb{margin-bottom:0}button.themetoggle{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;width:36px;height:36px;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .12s ease,transform .06s ease}button.themetoggle:hover{border-color:var(--accent)}button.themetoggle:active{transform:scale(.94)}button.themetoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.brand{font-family:var(--serif);font-size:34px;margin:0 0 .25rem;letter-spacing:-.5px}.brand small{font-size:15px;color:var(--muted);font-family:var(--sans);font-weight:400;margin-left:10px}.bookcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem 1.5rem 1.35rem;margin-top:1.25rem;display:flex;gap:1.35rem;align-items:flex-start}.bookcard h2{font-family:var(--serif);margin:0;font-size:22px;line-height:1.25}.bookcard .meta{color:var(--muted);font-size:14px;margin:4px 0 0}.bookbody{flex:1;min-width:0}.cover{position:relative;flex:none;width:132px;aspect-ratio:3 / 4;border-radius:10px;overflow:hidden;background:var(--accent-bg);border:1px solid var(--line);box-shadow:var(--shadow)}.cover img{width:100%;height:100%;object-fit:cover;display:block}.coverfall{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:52px;color:var(--accent)}.booknum{position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;background:#080a149e;color:#fff;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}@media(max-width:560px){.bookcard{flex-direction:column}.cover{width:108px}}.pickrow{margin-top:.95rem}.picklabel{display:block;margin-bottom:.4rem;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.trpill{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:600;cursor:pointer;transition:transform .06s ease,border-color .12s ease}.trpill:hover{border-color:var(--accent)}.trpill:active{transform:scale(.96)}.trpill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.trpill.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}.trpill.ar{font-size:15px}.langswitch{margin-bottom:.6rem}.ladder{display:flex;gap:8px;flex-wrap:wrap}.lv{border:1px solid transparent;border-radius:999px;padding:6px 16px;font-size:14px;font-weight:600;cursor:pointer;background:var(--surface);color:var(--muted);border-color:var(--line);transition:transform .06s ease}.lv:active{transform:scale(.96)}.lv:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.bookcard .lv{background:var(--surface)}.bookcard .lv:hover{border-color:var(--accent)}.lv.a1.on{background:var(--lv-a1-bg);color:var(--lv-a1);border-color:var(--lv-a1)}.lv.a2.on{background:var(--lv-a2-bg);color:var(--lv-a2);border-color:var(--lv-a2)}.lv.b1.on{background:var(--lv-b1-bg);color:var(--lv-b1);border-color:var(--lv-b1)}.lv.b2.on{background:var(--lv-b2-bg);color:var(--lv-b2);border-color:var(--lv-b2)}.lv.book.on{background:var(--lv-book-bg);color:var(--lv-book);border-color:var(--lv-book)}.chapternav{display:flex;align-items:center;gap:12px;margin:1.2rem 0 0}.chapternav .chcount{font-size:13px;color:var(--muted);font-weight:600}button.chnav{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;width:32px;height:32px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}button.chnav:hover:not(:disabled){border-color:var(--accent)}button.chnav:disabled{opacity:.4;cursor:default}.crumb{font-size:14px;margin-bottom:1rem}.chapter-title{font-family:var(--serif);font-size:28px;margin:1.2rem 0 .2rem}.chapter-note{color:var(--muted);font-size:13.5px;margin-bottom:1rem}.chapter-art{margin:1rem 0 1.2rem;aspect-ratio:16 / 7;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}.chapter-art img{width:100%;height:100%;display:block;object-fit:cover}.legend{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:1rem 0 1.5rem}.legend .chip{font-size:12px;padding:3px 12px;border-radius:999px;font-weight:600}.legend .hint{font-size:12.5px;color:var(--muted)}.chip.vocab{background:var(--vocab-bg);color:var(--vocab)}.chip.conn{background:var(--conn-bg);color:var(--conn)}.chip.gram{background:var(--gram-bg);color:var(--gram)}.chip.idiom{background:var(--idiom-bg);color:var(--idiom)}.para{display:flex;gap:14px;margin:0 0 1.4rem}.para .n{font-size:13px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;margin-top:4px}.para .body{font-family:var(--serif);font-size:18px;line-height:1.85}.body .diff{padding:1px 5px;border-radius:5px;cursor:pointer;transition:filter .1s}.body .diff:hover{filter:brightness(.94)}.diff[data-kind=vocabulary]{background:var(--vocab-bg);color:var(--vocab)}.diff[data-kind=connector]{background:var(--conn-bg);color:var(--conn)}.diff[data-kind=grammar],.diff[data-kind=verb]{background:var(--gram-bg);color:var(--gram)}.diff[data-kind=idiom],.diff[data-kind=expression]{background:var(--idiom-bg);color:var(--idiom)}.player{display:flex;align-items:center;gap:14px;margin:0 0 1.4rem}button.playbtn{font-size:14.5px;font-weight:600;padding:9px 20px;border-radius:999px;cursor:pointer;border:none;background:var(--text);color:var(--inverse-text)}button.playbtn:hover{opacity:.88}.nowp{font-size:13px;color:var(--muted)}.para.active .n{background:var(--text);color:var(--inverse-text);border-color:var(--text)}.para .n[title=▶]{cursor:pointer}.para .n[title=▶]:hover{border-color:var(--text)}.w.reading{background:var(--reading-bg);color:var(--reading-fg);border-radius:3px;box-shadow:0 0 0 2px var(--reading-bg)}.body .diff .w.reading{background:var(--reading-bg)}.pop{position:absolute;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:12px 16px;max-width:320px;font-size:14px;line-height:1.55;animation:pop .12s ease-out}@keyframes pop{0%{opacity:0;transform:translateY(4px)}}.pop .w{font-weight:700;font-size:16.5px}.pop.selection{max-width:360px}.pop.selection .w{font-weight:600;font-size:15px;font-family:var(--serif)}.pop .ipa{color:var(--muted);margin:0 8px;font-size:13.5px}.pop .say{border:none;background:var(--accent-bg);color:var(--accent);border-radius:999px;width:30px;height:30px;cursor:pointer;font-size:14px;vertical-align:middle}.pop .say:hover{filter:brightness(.95)}.pop .illus{margin-top:2px}.pop .tr{font-size:15px;color:var(--vocab);margin-top:3px;font-weight:600}.pop .tr.ar{direction:rtl;text-align:right;font-size:17px}.pop .langs{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}.pop .langpill{border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:11px;padding:3px 9px;cursor:pointer;color:var(--muted)}.pop .langpill.on{background:var(--vocab-bg);color:var(--vocab);border-color:var(--vocab-mid);font-weight:700}.pop .prev{font-size:12.5px;margin-top:8px;color:var(--gram)}.pop .prev b{font-weight:600}select.langsel{font-family:var(--sans);font-size:12px;border:1px solid var(--line);border-radius:6px;padding:3px 6px;background:var(--surface);cursor:pointer;text-transform:none;color:var(--accent);font-weight:700}.gloss-wrap{overflow-x:auto}table.gloss{border-collapse:collapse;width:100%;font-size:14px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.gloss th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--bg);padding:10px 12px;border-bottom:1px solid var(--line)}.gloss td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}.gloss tr:last-child td{border-bottom:none}.gloss .item{font-weight:600}.gloss .ar{direction:rtl}.gloss .ipa{color:var(--muted);white-space:nowrap}.kindtag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}.kindtag.vocabulary{background:var(--vocab-bg);color:var(--vocab)}.kindtag.connector{background:var(--conn-bg);color:var(--conn)}.kindtag.grammar,.kindtag.verb{background:var(--gram-bg);color:var(--gram)}.kindtag.idiom,.kindtag.expression{background:var(--idiom-bg);color:var(--idiom)}h2.qh{font-family:var(--serif);font-size:24px;margin:2.5rem 0 1rem}.qsec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem 1.5rem;margin-bottom:1.25rem}.qsec>h3{margin:0 0 .2rem;font-size:16px;display:flex;align-items:center;gap:10px}.qsec .instr{color:var(--muted);font-size:14px;margin:0 0 1rem}.scorechip{font-size:13px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--accent-bg);color:var(--accent)}.scorechip.perfect{background:var(--ok-bg);color:var(--ok)}.qitem{padding:.9rem 0;border-top:1px solid var(--line)}.qitem .stem{font-size:15px;font-weight:600;margin:0 0 .6rem}.qitem .stem .mark{margin-right:6px}.qitem .ctx{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:15px;margin:-4px 0 .6rem}.qitem.ok .stem{color:var(--ok)}.qitem.bad .stem{color:var(--bad)}select.pmatch{font-family:var(--sans);font-size:14px;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;min-width:170px}select.pmatch:focus{outline:2px solid var(--accent-bg);border-color:var(--accent)}select.pmatch.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);font-weight:600}select.pmatch.bad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad);font-weight:600}.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{border:none;background:var(--surface);padding:8px 18px;font-size:14px;cursor:pointer;color:var(--muted);border-right:1px solid var(--line)}.seg button:last-child{border-right:none}.seg button.sel{background:var(--text);color:var(--inverse-text);font-weight:600}.seg button.sel.ok{background:var(--ok)}.seg button.sel.bad{background:var(--bad)}.seg button.reveal{background:var(--ok-bg);color:var(--ok);font-weight:700}.cards{display:grid;gap:8px}.card{text-align:left;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;border-radius:10px;padding:10px 14px;font-size:14.5px;display:flex;gap:10px;align-items:baseline;transition:border-color .1s,background .1s}.card:hover{border-color:var(--accent)}.card .abc{font-weight:700;font-size:12.5px;color:var(--muted)}.card.sel{border-color:var(--accent);background:var(--accent-bg)}.card.sel .abc{color:var(--accent)}.card.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);font-weight:600}.card.right .abc{color:var(--ok)}.card.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}.card.wrong .abc{color:var(--bad)}.expl{background:var(--hint-bg);color:var(--hint);border-radius:8px;padding:9px 13px;margin-top:.7rem;font-size:13.5px;line-height:1.6}.checkrow{margin-top:1.1rem;display:flex;gap:10px;align-items:center}button.checkbtn{font-size:14.5px;font-weight:600;padding:9px 22px;border-radius:999px;cursor:pointer;border:none;background:var(--text);color:var(--inverse-text)}button.checkbtn:hover{opacity:.88}.loading{color:var(--muted);padding:4rem 0;text-align:center;font-size:15px}.gradehint{color:var(--muted);font-size:14px;text-align:center;margin:1.5rem 0}.gradecard{display:flex;gap:20px;align-items:center;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem 1.6rem;margin:1.5rem 0;border:1.5px solid}.gradecard .pct{font-size:40px;font-weight:800;font-family:var(--sans);letter-spacing:-1px;flex:none}.gradecard .headline{font-weight:700;font-size:16px}.gradecard .msg{font-size:14.5px;margin-top:2px}.gradecard .best{font-size:12.5px;color:var(--muted);margin-top:6px}.gradecard.gold{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}.gradecard.good{background:var(--lv-b1-bg);border-color:var(--lv-b1);color:var(--lv-b1)}.gradecard.retry{background:var(--hint-bg);border-color:var(--hint);color:var(--hint)}
