/* Learning pages — "夜空书斋里的白色书页":
   night-blue frame and gold accents from the home page, white paper for reading. */
:root{
 --night-950:#0f1430;--night-900:#141a3a;--night-800:#1c2449;--night-700:#283160;--night-600:#3a4478;
 --lav-200:#cfcde6;--lav-100:#e9e7f4;
 --bg:#f2f1f7;--paper:#ffffff;--ink:#1d2232;--ink-2:#4f566b;--ink-3:#7a8096;--line:#e2e0ec;--line-2:#eeedf4;
 --gold:#c9a24a;--gold-soft:#f6efdc;
 --grammar:#3268cb;--grammar-bg:#edf3ff;
 --conj:#197a70;--conj-bg:#eaf6f1;
 --compare:#8d631a;--compare-bg:#fbf3e3;
 --review:#ac5752;--review-bg:#fcf0ed;
 --practice:#7450a0;--practice-bg:#f3edf9;
 --kana:#b0466f;--kana-bg:#fbeef3;
 --read:#2b7a98;--read-bg:#eaf4f8;
 --listen:#5a52b5;--listen-bg:#efeefb;
 --tr:#c25a2c;--tr-bg:#fbefe8;
 --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
 --serif-jp:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
 --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
 --sans-jp:"Noto Sans JP","Yu Gothic UI","Yu Gothic","Meiryo","Hiragino Sans",sans-serif;
 --radius:14px;--shadow:0 1px 2px rgba(20,26,58,.05),0 8px 28px rgba(20,26,58,.06);
 color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- frame ---------- */
.app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:auto;background:linear-gradient(180deg,var(--night-900),var(--night-950));
 color:var(--lav-100);padding:22px 16px 24px;display:flex;flex-direction:column;gap:22px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:0 6px}
.brand svg{width:28px;height:28px;stroke:var(--gold);stroke-width:1.6;fill:none}
.brand strong{display:block;font:600 17px/1.2 var(--serif);letter-spacing:.06em;color:#fff}
.brand small{display:block;font:11px/1.4 var(--sans-jp);color:var(--lav-200);letter-spacing:.12em}
.levels{display:flex;gap:4px;background:rgba(255,255,255,.06);padding:4px;border-radius:999px}
.levels button{flex:1;border:0;background:none;padding:5px 0;border-radius:999px;font-size:13px;color:var(--lav-200);cursor:pointer}
.levels button[aria-pressed="true"]{background:var(--gold);color:var(--night-950);font-weight:600}
.today{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:14px}
.today h2{margin:0 0 10px;font:600 13px/1.3 var(--sans);letter-spacing:.08em;color:var(--lav-200)}
.today-row{display:flex;align-items:center;gap:12px}
.ring{--p:.4;width:52px;height:52px;border-radius:50%;flex:none;
 background:conic-gradient(var(--gold) calc(var(--p)*360deg),rgba(255,255,255,.12) 0);display:grid;place-items:center}
.ring span{width:42px;height:42px;border-radius:50%;background:var(--night-900);display:grid;place-items:center;font:600 13px var(--sans);color:#fff}
.today ul{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.9;color:var(--lav-100)}
.today b{color:#fff}
.today-go{display:block;margin-top:10px;text-align:center;padding:7px;border-radius:9px;background:var(--gold);color:var(--night-950);font-weight:600;font-size:13.5px;text-decoration:none}
.levels button:disabled{opacity:.45;cursor:not-allowed}
.modules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.modules a{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:10px;text-decoration:none;color:var(--lav-100)}
.modules a:hover{background:rgba(255,255,255,.06)}
.modules a[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 3px 0 0 var(--c)}
.modules .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 26%,transparent);flex:none}
.modules .ico svg{width:17px;height:17px;stroke:#fff;stroke-width:1.8;fill:none}
.modules strong{display:block;font-weight:600;font-size:14.5px;line-height:1.3}
.modules small{display:block;font-size:11.5px;line-height:1.4;color:var(--lav-200)}
.side-foot{margin-top:auto;font-size:12px;color:var(--lav-200);padding:0 6px}
.side-foot a{color:var(--lav-200)}

/* ---------- header band ---------- */
.main{min-width:0}
.band{position:relative;min-height:236px;padding:26px 40px 30px;color:#fff;
 background:linear-gradient(180deg,rgba(15,20,48,.25),rgba(15,20,48,.72)),url(sky-band.webp) center 38%/cover;
 display:flex;flex-direction:column;justify-content:flex-end}
.band::after{content:"";position:absolute;inset:auto 0 -1px 0;height:44px;background:linear-gradient(transparent,var(--bg))}
.crumbs{position:relative;z-index:1;font-size:13px;color:var(--lav-100);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.crumbs a{text-decoration:none;opacity:.85}.crumbs a:hover{opacity:1;text-decoration:underline}
.band h1{position:relative;z-index:1;margin:0;font:600 clamp(34px,4.6vw,52px)/1.15 var(--serif-jp);letter-spacing:.04em;text-shadow:0 2px 18px rgba(10,14,40,.5)}
.band .meaning{position:relative;z-index:1;margin:8px 0 0;font:500 17px/1.6 var(--serif);color:var(--lav-100)}
.badges{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.badge{font-size:12.5px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff}
.badge.gold{background:var(--gold);border-color:var(--gold);color:var(--night-950);font-weight:600}

/* ---------- toolbar ---------- */
.toolbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
 padding:10px 40px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.toggle input{appearance:none;width:34px;height:20px;border-radius:999px;background:#cfd2de;position:relative;margin:0;cursor:pointer;transition:background .2s}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle input:checked{background:var(--grammar)}
.toggle input:checked::after{transform:translateX(14px)}
.toolbar .spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:6px 12px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:var(--c,var(--grammar));color:var(--c,var(--grammar))}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}
.btn[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold);color:#7a5a12}
.btn.practice{--c:var(--practice);background:var(--practice);border-color:var(--practice);color:#fff}
.btn.practice:hover{filter:brightness(1.08);color:#fff}

/* ---------- previous / next / home ---------- */
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;max-width:1056px;margin:16px auto 0;padding:0 40px}
.pg{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);text-decoration:none;color:var(--ink);font-size:14px}
.pg span{display:flex;flex-direction:column;min-width:0}
.pg small{font-size:11.5px;color:var(--ink-3)}
.pg b{font:600 15px/1.4 var(--sans-jp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg.next{justify-content:flex-end;text-align:right}
.pg.home{justify-content:center;font-weight:600;color:var(--night-700);background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 45%,transparent);white-space:nowrap}
a.pg:hover{border-color:var(--grammar);color:var(--grammar)}
a.pg.home:hover{border-color:var(--gold);color:#7a5a12}
.pg.off{opacity:.45}
.pg.off b{font:13px var(--sans);color:var(--ink-3)}

/* ---------- reading layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,760px) 264px;gap:32px;padding:24px 40px 80px;justify-content:center}
.read{min-width:0;display:flex;flex-direction:column;gap:20px}
.card{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px}
.card > h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 20px/1.4 var(--serif);color:var(--ink)}
.card > h2 .mark{width:6px;height:20px;border-radius:3px;background:var(--c,var(--grammar))}
.lead{margin:0;font-size:16.5px;color:var(--ink)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:16px 0 0;font-size:14.5px}
.facts dt{color:var(--ink-3)}.facts dd{margin:0;color:var(--ink-2)}

/* connection table */
.conn{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.conn th,.conn td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.conn th{font-weight:500;color:var(--ink-3);font-size:13px}
.conn tr:last-child td{border-bottom:0}
.conn .jp{font:22px/2.2 var(--sans-jp)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;padding:3px 10px;border-radius:999px;background:var(--conj-bg);color:var(--conj);text-decoration:none;border:1px solid color-mix(in srgb,var(--conj) 25%,transparent);white-space:nowrap}
.chip:hover{background:var(--conj);color:#fff}

/* connection list: rule -> form -> full example, one card per way of connecting */
.conn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.conn-item{border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;background:linear-gradient(90deg,var(--conj-bg),#fff 42%)}
.conn-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.conn-no{width:24px;height:24px;border-radius:50%;background:var(--conj);color:#fff;display:grid;place-items:center;font:600 12.5px var(--sans);flex:none}
.conn-rule{font-weight:600;font-size:15px;color:var(--ink);flex:1;min-width:180px}
.conn-form{font-size:22px;margin:6px 0 2px 34px}
.conn-ex{display:grid;grid-template-columns:auto 1fr;gap:10px;margin:8px 0 0 34px;padding-top:10px;border-top:1px dashed var(--line)}
.conn-ex-tag{font-size:12px;color:var(--conj);border:1px solid color-mix(in srgb,var(--conj) 40%,transparent);border-radius:6px;padding:1px 6px;height:max-content;margin-top:12px}
.conn-ex .jp-line{font-size:19px}
@media (max-width:860px){.conn-form,.conn-ex{margin-left:0}.conn-form{font-size:19px}.conn-ex .jp-line{font-size:17.5px}}

/* senses and examples */
.sense + .sense{margin-top:26px;padding-top:24px;border-top:1px dashed var(--line)}
.sense h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:600 17px/1.5 var(--serif)}
.sense h3 .no{width:26px;height:26px;border-radius:50%;background:var(--grammar);color:#fff;display:grid;place-items:center;font:600 13px var(--sans);flex:none}
.sense > p{margin:0 0 12px;color:var(--ink-2);font-size:15.5px}
.ex{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ex li{padding:12px 14px;border-radius:12px;background:#fafafd;border:1px solid var(--line-2)}
.jp-line{font:21px/2.35 var(--sans-jp);letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
.jp-line ruby,.conn ruby{ruby-align:center}
.jp-line ruby rt{font-size:.5em;color:var(--ink-3);letter-spacing:0}
body.no-kana .jp-line rt{visibility:hidden}
.w{cursor:pointer;border-radius:4px;transition:background .15s}
.w:hover{background:var(--lav-100)}
.f-gram{color:var(--grammar);font-weight:600;background:linear-gradient(transparent 62%,var(--grammar-bg) 0)}
.f-conn{color:var(--conj);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--conj) 55%,transparent)}
.zh{margin:2px 0 0;font-size:14.5px;color:var(--ink-2)}
body.no-zh .zh{display:none}
.ex-tools{display:flex;gap:6px;margin-top:6px}
.icon-btn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{color:var(--grammar);border-color:var(--grammar)}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none}
.icon-btn.playing{color:#fff;background:var(--grammar);border-color:var(--grammar)}

/* notes / compare */
.card.notes{--c:var(--compare)}
.note + .note{margin-top:18px}
.note h3{margin:0 0 4px;font:600 16px/1.5 var(--serif);color:var(--compare)}
.note p{margin:0 0 8px;color:var(--ink-2);font-size:15px}
.pair{display:grid;gap:6px}
.pair .row{display:grid;grid-template-columns:28px 1fr;align-items:start;gap:8px;padding:8px 12px;border-radius:10px}
.pair .bad{background:var(--review-bg)}.pair .good{background:var(--conj-bg)}
.pair .sym{font:700 18px/2.3 var(--sans);text-align:center}
.pair .bad .sym{color:var(--review)}.pair .good .sym{color:var(--conj)}
.pair .bad .jp-line{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--review) 60%,transparent)}
.cmp{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:baseline}
.cmp a,.cmp span.pat{font:600 17px var(--sans-jp);color:var(--compare);text-decoration:none;white-space:nowrap}
.cmp p a.cmp-go{font:500 13px var(--sans);color:var(--practice);white-space:nowrap;margin-left:4px;text-decoration:none}
.cmp p a.cmp-go:hover{text-decoration:underline}
.cmp-all{margin:12px 0 0;font-size:13.5px}.cmp-all a{color:var(--compare)}
.cmp a:hover{text-decoration:underline}
.cmp p{margin:0;color:var(--ink-2);font-size:15px}
.related{display:flex;flex-wrap:wrap;gap:8px}
.related a{font:15px var(--sans-jp);padding:6px 12px;border-radius:10px;background:var(--grammar-bg);color:var(--grammar);text-decoration:none}
.related a:hover{background:var(--grammar);color:#fff}

/* right rail */
.rail{position:sticky;top:64px;align-self:start;display:flex;flex-direction:column;gap:16px}
.rail .card{padding:18px 18px}
.rail h2{margin:0 0 10px;font:600 14px/1.4 var(--sans);letter-spacing:.06em;color:var(--ink-3)}
.toc{list-style:none;margin:0;padding:0;font-size:14px}
.toc a{display:block;padding:5px 10px;border-left:2px solid var(--line);text-decoration:none;color:var(--ink-2)}
.toc a.on{border-color:var(--grammar);color:var(--grammar);font-weight:600}
.status{display:flex;gap:6px;flex-wrap:wrap}
.status button{flex:1;border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 0;font-size:13px;cursor:pointer;color:var(--ink-2)}
.status button[aria-pressed="true"]{background:var(--grammar);border-color:var(--grammar);color:#fff}
.mastery{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
a.btn{text-decoration:none}
.mynote textarea{width:100%;min-height:96px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:10px;font:14px/1.6 var(--sans);color:var(--ink);background:#fcfcfe}
.mynote small{display:block;margin-top:4px;color:var(--ink-3);font-size:12px}
.basics{--c:var(--conj)}
.basics table{width:100%;font-size:13.5px;border-collapse:collapse}
.basics td{padding:4px 2px;border-bottom:1px solid var(--line-2)}
.basics td:last-child{font-family:var(--sans-jp);text-align:right}
.basics a{display:inline-block;margin-top:10px;font-size:13px;color:var(--conj)}

/* word popover */
.pop{position:fixed;z-index:50;width:min(300px,calc(100vw - 24px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(20,26,58,.22);padding:14px 16px}
.pop[hidden]{display:none}
.pop .base{font:600 24px/1.3 var(--sans-jp)}
.pop .reading{font:14px var(--sans-jp);color:var(--ink-3)}
.pop .pos{display:inline-block;margin-top:8px;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--lav-100);color:var(--night-700)}
.pop .mean{margin:6px 0 0;font-size:15px}
.pop .row{display:flex;justify-content:space-between;align-items:center}

/* ---------- practice ---------- */
.band-sm{min-height:180px}
.quiz-wrap{max-width:760px;margin:0 auto;padding:20px 24px 80px}
.quiz-progress{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:16px}
.quiz-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--practice),var(--gold));transition:width .35s}
.q-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:16px;font-size:13px}
.q-type{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--practice-bg);color:var(--practice);font-size:12.5px;font-weight:600;white-space:nowrap}
.q-g{color:var(--grammar);text-decoration:none;font-family:var(--sans-jp)}.q-g:hover{text-decoration:underline}
.q-retry{color:var(--compare);font-size:12.5px}
.q-no{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}
.q-ask{margin:0 0 10px;color:var(--ink-2);font-size:15px}
.q-ask b{color:var(--practice);font:600 18px var(--sans-jp)}
.q-ask-big{font-size:17px;color:var(--ink);line-height:2.1}
.q-ask-big ruby rt{font-size:.5em;color:var(--ink-3)}
.q-word{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:4px 0 18px}
.q-base{font:600 34px/1.9 var(--sans-jp)}
.q-base rt{font-size:.42em;font-weight:400;color:var(--ink-3)}
.q-zh{color:var(--ink-3)}
.q-sent{font-size:23px;margin-bottom:14px}
.blank{display:inline-block;width:3.2em;border-bottom:2px solid var(--practice);margin:0 .15em;vertical-align:-.1em}
.q-zh-big{margin:0 0 6px;font:500 22px/1.6 var(--serif)}
.q-use{margin:0 0 14px;color:var(--ink-3);font-size:14px}.q-use b{color:var(--grammar);font-family:var(--sans-jp)}
.opts{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:4px 12px;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover:not(:disabled){border-color:var(--practice);background:var(--practice-bg)}
.opt:disabled{cursor:default}
.opt-k{width:24px;height:24px;border-radius:50%;background:var(--line-2);display:grid;place-items:center;font-size:12.5px;color:var(--ink-3)}
.opt-t{font-size:16px}
.opt-t[lang="ja"]{font:19px/2.1 var(--sans-jp)}
.opt-t rt{font-size:.5em;color:var(--ink-3)}
.opt.right{border-color:var(--conj);background:var(--conj-bg)}.opt.right .opt-k{background:var(--conj);color:#fff}
.opt.wrong{border-color:var(--review);background:var(--review-bg)}.opt.wrong .opt-k{background:var(--review);color:#fff}
.opt:disabled:not(.right):not(.wrong){opacity:.8}
.why{grid-column:2;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.q-form-row{display:flex;gap:8px}
.q-form-row input{flex:1;min-width:0;font:20px/1.4 var(--sans-jp);padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fcfcfe;color:var(--ink)}
.q-form-row input:focus{outline:none;border-color:var(--practice);box-shadow:0 0 0 3px var(--practice-bg)}
.q-form-row .btn{padding:0 18px;font-size:15px}
.fb{margin-top:16px;border-radius:12px;padding:14px 16px;border:1px solid}
.fb.ok{background:var(--conj-bg);border-color:color-mix(in srgb,var(--conj) 30%,transparent)}
.fb.bad{background:var(--review-bg);border-color:color-mix(in srgb,var(--review) 30%,transparent)}
.fb.pend{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.fb p{margin:4px 0;font-size:14.5px;color:var(--ink-2)}
.fb-title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:16px!important;color:var(--ink)!important}
.fb.ok .fb-title svg{stroke:var(--conj)}.fb.bad .fb-title svg{stroke:var(--review)}
.fb-title svg{width:20px;height:20px;fill:none;stroke-width:2.4}
.fb-ans{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.fb-ans span:first-child,.fb-label{font-size:12.5px!important;color:var(--ink-3)!important}
.fb-ans b{font:600 22px var(--sans-jp);color:var(--ink)}
.fb-mine span{font-family:var(--sans-jp)}
.fb-ref,.fb-full{padding:6px 0;border-top:1px dashed var(--line)}
.fb-full{margin-top:8px}
.fb-zh{margin:10px 0 0;padding-top:8px;border-top:1px dashed var(--line);font-size:15px;color:var(--ink);line-height:1.7}
.fb-zh span{display:inline-block;margin-right:8px;font-size:12.5px;color:var(--ink-3)}
.fb-ref,.fb-full{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fb-ref .ex-tools,.fb-full .ex-tools{margin:0;flex:none}
.fb .jp-line{font-size:19px}
.fb-note{font-size:12.5px!important;color:var(--ink-3)!important}
.self{display:flex;gap:8px;margin-top:10px}
.q-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;justify-content:flex-end}
.q-actions:empty{display:none}
.btn.ghost{background:none;color:var(--ink-3)}
.empty-card h2{margin:0 0 8px;font:600 20px var(--serif)}
.sum-top{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.sum-top h2{margin:0;font:600 22px var(--serif)}.sum-top p{margin:4px 0 0;color:var(--ink-2)}
.ring.big{width:84px;height:84px;background:conic-gradient(var(--practice) calc(var(--p)*360deg),var(--line) 0)}
.ring.big span{width:68px;height:68px;background:#fff;color:var(--ink);font-size:18px}
.sum h3,.card h3.sub{margin:20px 0 8px;font:600 15px var(--sans);color:var(--ink-3);letter-spacing:.04em}
.sum-list,.sum-missed,.plan{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sum-list li,.plan li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:8px 12px;border-radius:10px;background:#fafafd;font-size:14px}
.sum-list a{font:600 16px var(--sans-jp);color:var(--grammar);text-decoration:none}
.sum-list span{color:var(--ink-2)}
.sum-missed li{display:flex;gap:10px;align-items:baseline;font-size:14.5px}
b.ok{color:var(--conj)}

/* ---------- review dashboard ---------- */
.dash{max-width:960px;margin:0 auto;padding:20px 24px 80px;display:flex;flex-direction:column;gap:20px}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stat{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;border-top:3px solid var(--c)}
.stat b{display:block;font:600 28px/1.2 var(--sans);color:var(--c)}
.stat span{font-size:13px;color:var(--ink-3)}
button.stat{font:inherit;text-align:left;cursor:pointer;width:100%;transition:transform .15s,box-shadow .15s}
button.stat:hover{transform:translateY(-2px)}
button.stat[aria-expanded="true"]{outline:2px solid var(--c);outline-offset:-1px}
.stat span small{display:block;font-size:11.5px;margin-top:2px}
.stat-detail{margin-top:14px}
.stat-detail h2{display:flex;align-items:center;gap:8px}
.stat-detail h2 small{font:400 13px var(--sans);color:var(--ink-3)}
.stat-detail .sd-close{margin-left:auto;font-size:13px}
.stat-detail h3{font:600 15px/1.5 var(--sans);margin:14px 0 6px}
.stat-detail h3 small{font-weight:400;color:var(--ink-3)}
.stat-detail h3 a{color:var(--ink);text-decoration:none}
.chips a small{font:12px var(--sans);opacity:.75;margin-left:6px}
.sd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sd-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;padding:7px 10px;border-radius:10px;background:#fafafd;font-size:14px}
.sd-list li span{overflow-wrap:anywhere}
.sd-list li a{font-size:13px;color:var(--ink-3);text-decoration:none}
.sd-list b{font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px;white-space:nowrap}
.sd-list b.ok{background:#e3f4ec;color:#1d7a4f}.sd-list b.ng{background:#fbe9e7;color:#b3412f}.sd-list b.pd{background:#f3eee2;color:#8a6a1e}
.chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-block;padding:5px 12px;border-radius:10px;background:var(--review-bg);color:var(--review);text-decoration:none;font-family:var(--sans-jp)}
.plan li span:first-child{font-family:var(--sans-jp)}.plan li span:last-child{color:var(--ink-3)}
.wb-group{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.wb-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.wb-head h3{margin:0;font:600 17px var(--serif)}.wb-head h3 small{font:13px var(--sans);color:var(--ink-3)}
.wb-tip{flex:1;font-size:13px;color:var(--ink-3)}
.wb-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.wb-list li{display:grid;grid-template-columns:auto auto 1fr auto;align-items:baseline;gap:10px;padding:8px 12px;border-radius:10px;background:#fafafd;font-size:14.5px}
.wb-g{color:var(--grammar);text-decoration:none;font-family:var(--sans-jp);white-space:nowrap}
.wb-q{min-width:0;overflow-wrap:anywhere;font-family:var(--sans-jp)}
.wb-list small{color:var(--ink-3);white-space:nowrap}
.ml{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.ml li{display:grid;grid-template-columns:minmax(120px,auto) auto 1fr auto;align-items:center;gap:8px 14px;padding:8px 12px;border-radius:10px;background:#fafafd}
.ml li > a:first-child{font:600 16px var(--sans-jp);color:var(--grammar);text-decoration:none}
.dots{display:inline-flex;gap:4px}.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--conj)}
.ml-basis{font-size:13px;color:var(--ink-3)}

/* ---------- top right: music switch, back to the home page ---------- */
.corner{position:absolute;top:14px;right:22px;z-index:3}
.corner ~ .crumbs{padding-right:250px}
.corner-tools{display:flex;align-items:center;gap:8px}
.corner-btn{position:relative;display:inline-flex;align-items:center;gap:6px;font:500 13px/1 var(--sans);padding:7px 12px;border-radius:999px;
 color:#fff;text-decoration:none;background:rgba(15,20,48,.38);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);cursor:pointer;white-space:nowrap}
.corner-btn:hover{background:rgba(15,20,48,.6);border-color:rgba(255,255,255,.5)}
.corner-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.corner-btn[aria-pressed="false"]{color:var(--lav-200)}
.corner-btn[aria-pressed="false"] svg{opacity:.6}
.corner-btn[aria-pressed="false"]::after{content:"";position:absolute;left:11px;top:50%;width:20px;height:1.6px;background:currentColor;transform:rotate(-45deg);transform-origin:center}
.corner-btn.waiting svg{animation:note 1.6s ease-in-out infinite}
@keyframes note{50%{transform:translateY(-2px)}}
.topbar .corner-tools{display:none}

/* ---------- mobile ---------- */
.topbar,.tabbar,.drawer-scrim{display:none}
@media (max-width:1120px){
 .layout{grid-template-columns:minmax(0,760px);}
 .rail{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
 .rail .toc-card{display:none}
}
@media (max-width:860px){
 .app{grid-template-columns:1fr}
 .side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:60;transform:translateX(-102%);transition:transform .25s;box-shadow:12px 0 40px rgba(0,0,0,.3)}
 body.drawer .side{transform:none}
 .drawer-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(10,14,40,.45);opacity:0;pointer-events:none;transition:opacity .25s}
 body.drawer .drawer-scrim{opacity:1;pointer-events:auto}
 .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;height:54px;padding:0 12px;background:var(--night-900);color:#fff}
 .topbar .brand strong{font-size:15px}.topbar .brand small{display:none}
 .topbar .lv{margin-left:auto;text-decoration:none;font-size:13px;padding:3px 10px;border-radius:999px;background:var(--gold);color:var(--night-950);font-weight:600}
 .topbar button{border:0;background:none;color:#fff;padding:8px;cursor:pointer}
 .topbar svg{width:22px;height:22px;stroke:#fff;stroke-width:1.8;fill:none}
 .topbar .brand{min-width:0}
 .corner{display:none}
 .corner ~ .crumbs{padding-right:0}
 .topbar .corner-tools{display:flex;gap:2px;margin-right:-6px}
 .topbar .corner-btn{padding:8px;background:none;border:0;backdrop-filter:none}
 .topbar .corner-btn span{display:none}
 .topbar .corner-btn svg{width:21px;height:21px}
 .topbar .corner-btn[aria-pressed="false"]::after{left:8px;width:22px}
 .band{min-height:190px;padding:18px 16px 26px}
 .toolbar{top:54px;padding:8px 12px;gap:6px 10px}
 .toggle{font-size:12.5px;gap:5px;white-space:nowrap}
 .toggle input{width:30px;height:18px}.toggle input::after{width:14px;height:14px}.toggle input:checked::after{transform:translateX(12px)}
 .toolbar .btn{font-size:0;gap:0;padding:7px}
 .toolbar .btn svg{width:18px;height:18px}
 .toolbar .lg{display:none}  /* 中文译文 → 译文, 慢速朗读 → 慢速: one row on a phone */
 .layout{padding:16px 12px 96px;gap:16px}
 .card{padding:20px 16px}
 .jp-line{font-size:19px}
 .conn .jp{font-size:19px}
 .conn thead{display:none}
 .conn tr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 0;border-bottom:1px solid var(--line-2)}
 .conn td{padding:0 4px;border:0}
 .conn td:first-child{grid-column:1/-1;font-size:13px;color:var(--ink-3)}
 .tabbar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:fixed;inset:auto 0 0 0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--ink-3);text-decoration:none}
 .tabbar a svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none}
 .tabbar a[aria-current="page"]{color:var(--c)}
 html{scroll-padding-top:118px}
 .band-sm{min-height:150px}
 .pager{padding:0 12px;gap:6px;margin-top:12px}
 .pg{padding:7px 10px}.pg b{font-size:13.5px}.pg.home{padding:7px 10px;font-size:13px}
 .quiz-wrap,.dash{padding:14px 12px 96px}
 .q-base{font-size:28px}.q-sent{font-size:20px}.opt-t[lang="ja"]{font-size:17.5px}
 .q-form-row input{font-size:18px}
 .stats{grid-template-columns:repeat(2,1fr)}
 .stats .stat:last-child{grid-column:1/-1}
 .sd-list li{grid-template-columns:auto minmax(0,1fr)}
 .sd-list li a{grid-column:2}
 .wb-list li{grid-template-columns:auto minmax(0,1fr);gap:2px 8px}.wb-list .wb-g{white-space:normal;overflow-wrap:anywhere;min-width:0}.wb-list .wb-q{grid-column:1/-1}.wb-list small{grid-column:1/-1}
 .ml li{grid-template-columns:1fr auto}.ml-basis{grid-column:1/-1}.ml li .btn{grid-row:1;grid-column:2}.ml .dots{grid-row:2;grid-column:1}
}
@media (max-width:400px){.toolbar{gap:6px}}  /* 360-wide phones: three toggles + three icon buttons stay on one row */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* pitch accent (vocabulary) */
.pitch{display:inline-flex;align-items:stretch;font-family:var(--sans-jp);line-height:1.5;vertical-align:middle}
.pitch span{padding:1px 1px 1px;border-top:2px solid transparent;border-bottom:2px solid transparent}
.pitch .h{border-top-color:var(--review)}
.pitch .l{border-bottom-color:color-mix(in srgb,var(--review) 35%,transparent)}
.pitch .drop{border-right:2px solid var(--review)}
.pitch .p{font-size:.7em;opacity:.55;align-self:center}
.pitch sup{font:600 .62em var(--sans);color:var(--ink-3);margin-left:5px;align-self:flex-start}
/* vocabulary questions */
.q-listen{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.icon-btn.listen-big{width:64px;height:64px;border-radius:50%;--c:var(--practice)}
.icon-btn.listen-big svg{width:26px;height:26px}
.fb-full .q-word{margin:0 0 4px;align-items:center}
.fb-full .q-base{font-size:26px}

/* 今日计划 (review.html) */
.pl{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.pl > li{border:1px solid var(--line-2);border-radius:12px;padding:10px 14px;background:#fff}
.pl-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pl-h b{font:600 15.5px var(--serif)}
.pl-h > span:not(.pl-ok):not(.pl-todo){font-size:13.5px;color:var(--ink-3);flex:1}
.pl-ok{color:var(--conj);font-weight:700}.pl-todo{color:var(--ink-3)}
.pl .chips{margin:8px 0 0}
.pl-tip{font-size:12.5px;color:var(--ink-3);margin:6px 0 0}
.pl-words{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.pl-words a{font:15px var(--sans-jp);padding:3px 10px;border-radius:999px;background:#f4f4f8;color:var(--ink);text-decoration:none}
.pl-words a.on{background:var(--review-bg);color:var(--review)}
.pl-set{margin-top:12px;font-size:14px}
.pl-set summary{cursor:pointer;color:var(--grammar)}
.pl-form{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:10px}
.pl-form input{width:64px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:15px var(--sans)}
.pl-saved{font-size:13px;color:var(--conj)}
/* back to the entry the learner came from (易混淆／相关 links) */
.back-from{margin:0;font-size:14px}
.back-from a{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:999px;background:var(--compare-bg);color:var(--compare);text-decoration:none;border:1px solid color-mix(in srgb,var(--compare) 30%,transparent)}
.back-from a:hover{filter:brightness(.97)}
.read .card,.read .sense{scroll-margin-top:130px}
/* practice: 题量／题型 and 这道题有问题？ */
.q-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;font-size:13px}
.q-opts .lab{color:var(--ink-3);margin:0 2px 0 6px}.q-opts .lab:first-child{margin-left:0}
.q-opts a{padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2);text-decoration:none}
.q-opts a[aria-current="true"]{background:var(--night-800);border-color:var(--night-800);color:#fff}
.q-report{margin-top:12px;font-size:13.5px}
.q-report summary{cursor:pointer;color:var(--ink-3);display:inline-block}
.q-report summary:hover{color:var(--review)}
.rp-reasons{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 8px}
.rp-reasons label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.q-report textarea{width:100%;min-height:64px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:14px/1.6 var(--sans)}
.rp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.pl-last{margin:10px 0 0;font-size:14.5px}.pl-last a{font-family:var(--sans-jp);font-weight:600}.pl-last span{color:var(--ink-3);font-size:13px}
/* practice: 上一题 / 返回目录 on the left of the action row; the row a 返回目录 link lands on */
.q-nav{display:flex;flex-wrap:wrap;gap:8px;margin-right:auto}
.here{animation:here-flash 2.6s ease-out 1}
@keyframes here-flash{0%,35%{background:var(--gold-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 55%,transparent)}100%{background:transparent;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.here{animation:none;background:var(--gold-soft)}}
/* 今日计划 bar on grammar / word pages opened from today's plan */
.plan-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:1056px;margin:12px auto 0;padding:10px 14px;border-radius:14px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);font-size:14px}
.plan-bar .pb-t{color:var(--night-700)}
.plan-bar .pb-back{margin-left:auto;font-size:13.5px;color:var(--night-700)}
.plan-bar .pb-done{font-size:13.5px;color:var(--ink-3)}
.learned-btn{font-weight:600;border-color:var(--conj);color:var(--conj);background:#fff}
.learned-btn[aria-pressed="true"]{background:var(--conj);color:#fff}
@media (max-width:860px){.plan-bar{margin:10px 12px 0}}
/* 今日计划: 系统推荐 / 自己定 */
.pl-mode{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;margin:2px 0 4px}
.pl-mode button{border:0;background:none;padding:7px 16px;font-size:14px;cursor:pointer;color:var(--ink-2)}
.pl-mode button[aria-pressed="true"]{background:var(--night-800);color:#fff}
.pl-lv{margin-left:5px;font:600 10.5px var(--sans);color:var(--grammar);opacity:.8}
.cp-form{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.cp-part{border:1px solid var(--line-2);border-radius:12px;padding:8px 14px 12px;margin:0}
.cp-part legend{font:600 15px var(--serif);padding:0 6px}
.cp-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:14px;margin-top:6px}
.cp-row label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.cp-l{color:var(--ink-3);min-width:2.5em}
.cp-row input[type=number]{width:64px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:15px var(--sans)}
/* membership line in the sidebar (only when member features are open) */
.side-member{display:block;margin:0 6px 10px;padding:10px 12px;border-radius:12px;text-decoration:none;border:1px solid rgba(246,215,125,.35);background:rgba(246,215,125,.08);color:#fff}
.side-member b{display:block;font-size:14px;color:#f6d77d}.side-member span{display:block;font-size:12px;color:var(--lav-200)}
.side-member.on{background:linear-gradient(135deg,rgba(246,215,125,.22),rgba(217,164,65,.12))}
.m-lock{font-size:11.5px;color:#7a5a12;background:#fff3cf;border-radius:999px;padding:1px 7px;margin-left:6px;white-space:nowrap}
.member-gate .lock{margin-right:6px}
/* AI 老师 (翻译造句, practice page) */
.ai-box{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ai-box .ai-go{border-color:var(--practice);color:var(--practice)}
.ai-box .ai-out{flex-basis:100%}
.ai-lock{font-size:14px;color:var(--ink-3);text-decoration:none}
.ai-lock:hover{color:var(--practice)}
.ai-card{background:#fff;border:1px solid var(--practice-bg);border-radius:12px;padding:14px 16px;margin-top:4px}
.ai-card h4{margin:12px 0 4px;font:600 13px var(--sans);color:var(--practice);letter-spacing:.04em}
.ai-card p{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink-2)}
.ai-verdict{font-weight:600;padding:6px 10px;border-radius:8px;display:inline-block}
.ai-verdict.good{background:var(--conj-bg);color:var(--conj)}
.ai-verdict.ok{background:var(--compare-bg);color:var(--compare)}
.ai-verdict.wrong{background:var(--review-bg);color:var(--review)}
.ai-issues{margin:0;padding-left:18px}
.ai-issues li{font-size:14.5px;line-height:1.8;color:var(--ink-2)}
.ai-issues li b{font:500 15px var(--sans-jp);color:var(--review)}
.ai-issues li b.fix{color:var(--conj)}
.ai-issues li span{display:block;font-size:13.5px;color:var(--ink-3)}
.ai-sent{border-left:3px solid var(--practice-bg);padding:4px 0 4px 12px;margin:6px 0}
.ai-sent .ja{font:500 17px/1.7 var(--sans-jp);color:var(--ink)}
.ai-sent .kana{font-size:13px;color:var(--ink-3)}
.ai-sent .zh{font-size:13.5px}
.ai-sent .zh span{display:block;color:var(--ink-3);font-size:12.5px}
.ai-tip{margin-top:12px!important;background:var(--gold-soft);border-radius:8px;padding:8px 10px}
.ai-thread{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.ai-q{align-self:flex-end;background:var(--practice-bg);color:var(--ink)!important;border-radius:12px 12px 2px 12px;padding:6px 12px;max-width:85%}
.ai-a{background:#f6f6fa;border-radius:12px 12px 12px 2px;padding:8px 12px;white-space:pre-wrap}
.ai-ask{display:flex;gap:8px;margin-top:10px}
.ai-ask input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:14px var(--sans)}
.fb-note.bad{color:var(--review)}
/* visitors who are not signed in (guest.js): the way to register in place of locked content */
.main > [hidden]{display:none!important}
.guest-gate{border:1.5px solid #e9d38f;background:linear-gradient(180deg,#fffaf0,#fff)}
.guest-gate .lock{margin-right:6px}
.guest-gate .gg-btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.g-lock{font-size:12px;color:#7a5a12;background:#fff3cf;border-radius:999px;padding:2px 8px;white-space:nowrap;margin-left:auto}
.g-note{margin:0;padding:12px 16px;color:var(--ink-2);font-size:14px}
.guest-dlg{border:none;border-radius:16px;padding:0;max-width:min(520px,calc(100vw - 32px));background:transparent}
.guest-dlg::backdrop{background:rgba(14,18,40,.45)}
.guest-dlg .card{margin:0}
.ac-why{background:#fffaf0;border:1px solid #f0dfa8;border-radius:12px;padding:10px 14px;color:var(--ink-2)}