/* IELTS Writing workbook — shared styles.
   Layout: one-column workbook in three sessions; sticky step rail grouped by session; one step per view (hash-routed); essay text set like an exam script.
   Hub: topic cards in a two-column grid with per-topic progress. */
:root{
  --paper:#f5f6f9; --sheet:#ffffff; --ink:#18202b; --muted:#5a6575; --line:#dde2ea;
  --accent:#2944a3; --accent-ink:#ffffff; --accent-soft:#e7ecf9;
  --mark:#fff0a0; --clause:#e2f2e9; --clause-ink:#1d6b47; --link-ink:#a24a24; --margin:#eab3ad;
  --good:#1f7a4d; --bad:#b23a2e; --star:#c99400;
  --b5:#3d7f63; --b6:#2f6fa8; --b7:#6c4fb0; --b8:#a8462a;
  --f-serif:"Source Serif 4", Georgia, "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --f-sans:"IBM Plex Sans", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --railh:49px;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11151b; --sheet:#181d25; --ink:#e5e8ee; --muted:#9aa3b1; --line:#2b323d;
    --accent:#8ea4ff; --accent-ink:#0f1420; --accent-soft:#1f2740;
    --mark:#5a4f14; --clause:#173a2b; --clause-ink:#7fd1a8; --link-ink:#f0a988; --margin:#6b3a36;
    --good:#5ccb92; --bad:#ff8a7a; --star:#f2c94c;
    --b5:#6cc49c; --b6:#6fb0ea; --b7:#b39bf0; --b8:#f08f6d;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#11151b; --sheet:#181d25; --ink:#e5e8ee; --muted:#9aa3b1; --line:#2b323d;
  --accent:#8ea4ff; --accent-ink:#0f1420; --accent-soft:#1f2740;
  --mark:#5a4f14; --clause:#173a2b; --clause-ink:#7fd1a8; --link-ink:#f0a988; --margin:#6b3a36;
  --good:#5ccb92; --bad:#ff8a7a; --star:#f2c94c;
  --b5:#6cc49c; --b6:#6fb0ea; --b7:#b39bf0; --b8:#f08f6d;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:15.5px;line-height:1.65}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
.wrap{max-width:920px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}
.hint{font-size:13px;color:var(--muted);margin:0}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* masthead */
.mast{padding-block:28px 26px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none;font-size:14px;margin-bottom:18px}
.back:hover{text-decoration:underline}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--f-serif);font-weight:700;font-size:clamp(34px,6vw,52px);line-height:1.08;margin:.2em 0 .3em;text-wrap:balance}
h1 .en{font-weight:400;font-style:italic;color:var(--accent);margin-left:.15em}
.lede{max-width:62ch;color:var(--muted);margin:0}
.meta{display:flex;flex-wrap:wrap;gap:10px 32px;margin:22px 0 0}
.meta div{display:flex;flex-direction:column}
.meta dt{font-size:12px;color:var(--muted)}
.meta dd{margin:0;font-family:var(--f-mono);font-size:14px}

/* step rail */
/* step menu: wraps onto as many lines as it needs; each session keeps its steps together */
.rail{position:static;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
@media (min-width:760px){.rail{position:sticky;top:env(safe-area-inset-top,0px)}}
.rail-in{max-width:920px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.rail-grp{display:flex;flex-wrap:wrap;align-items:center;gap:2px 2px}
.rail-day{flex:0 0 auto;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 9px;margin-right:4px;white-space:nowrap}
.rail a{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;white-space:nowrap}
.rail a:hover{background:var(--accent-soft)}
.rail a .n{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--muted)}
.rail a.done .n{color:var(--good)}
.rail a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.rail a[aria-current="page"] .n{color:var(--accent-ink)}

/* target level */
.lvbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:22px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--sheet)}
.lvbar .lbl{font-weight:600;font-size:14.5px}
.lvbar .hint{flex:1 1 220px}
.lvtag{display:inline-block;font-family:var(--f-mono);font-size:11px;border-radius:999px;padding:0 6px;margin-left:5px;color:var(--sheet);background:var(--band);vertical-align:1px}
.phlist[data-lv="6"] .ph:not([data-lv="6"]), .phlist[data-lv="7"] .ph:not([data-lv="7"]), .phlist[data-lv="8"] .ph:not([data-lv="8"]){display:none}
.ev-note{font-size:14px;color:var(--muted);margin:10px 0 0}

/* views */
.view{padding-block:30px 40px}
.day{display:flex;gap:16px;align-items:flex-start;padding:14px 18px;border-radius:10px;border:1px solid var(--accent);background:var(--accent-soft);margin-bottom:26px}
.day .d{font-family:var(--f-serif);font-weight:700;font-size:21px;color:var(--accent);white-space:nowrap;line-height:1.3}
.day p{margin:0;font-size:14.5px}
.step-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.step-no{flex:0 0 auto;font-family:var(--f-mono);font-size:13px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 9px;margin-top:7px}
h2{font-family:var(--f-serif);font-size:clamp(24px,3.6vw,31px);line-height:1.25;margin:0;text-wrap:balance}
.step-head p{margin:6px 0 0;color:var(--muted);max-width:64ch}
.step-head p b{color:var(--ink)}
h3{font-size:17px;margin:36px 0 12px;font-weight:600;text-wrap:balance}
h3 .sub{font-weight:400;color:var(--muted);font-size:14px;margin-left:8px}
.section-label{font-family:var(--f-mono);font-size:12px;color:var(--accent);letter-spacing:.06em;margin-right:8px}

.btn{font-size:14px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);cursor:pointer;line-height:1.3;text-decoration:none}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:none}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--sheet);color:var(--accent);cursor:pointer;flex:0 0 auto}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn.on,[data-say].on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
input[type=text],textarea,select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 10px;width:100%}
select{width:auto;padding:6px 8px;background:var(--sheet)}
textarea{resize:vertical;line-height:1.55}

/* prompt + keyword notes */
.prompt{background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.prompt-label{font-family:var(--f-mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.prompt-text{font-family:var(--f-serif);font-size:19.5px;line-height:1.6;margin:8px 0 0}
.kw{background:none;border:0;padding:0 1px;border-bottom:2px solid var(--accent);cursor:pointer;font:inherit;color:inherit;text-align:left}
.kw[aria-pressed="true"]{background:var(--accent-soft)}
.kw-note{margin-top:16px;padding:10px 14px;background:var(--accent-soft);border-radius:8px;font-size:14.5px}

/* outline rows */
.core{margin-bottom:12px;padding:10px 14px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:14.5px}
.plan{display:grid;gap:14px}
.prow{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:stretch}
.plan.shown .prow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:760px){.plan.shown .prow{grid-template-columns:minmax(0,1fr)}}
.branch{background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.branch .tag{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.branch h4{margin:0;font-size:15.5px}
.radios{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
.radios label{display:flex;gap:5px;align-items:center;cursor:pointer}
.refcell{background:var(--accent-soft);border-radius:10px;padding:14px 16px;min-width:0}
.refcell .tag{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.idea{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px;font-size:14.5px}
.idea li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px}
.idea em{font-family:var(--f-serif);color:var(--muted)}
.idea .mk{color:var(--muted)}
.idea li.got .mk{color:var(--good);font-weight:700}
.gotlab{display:inline-block;margin-left:6px;font-size:12px;color:var(--good);border:1px solid var(--good);border-radius:999px;padding:0 7px;line-height:1.5}
.model-s{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;font-family:var(--f-serif);font-size:15.5px}
details.hintd summary{cursor:pointer;font-size:13.5px;color:var(--accent)}
details.hintd ul{margin:6px 0 0;padding-left:18px;font-size:13.5px;color:var(--muted)}
details.hintd > div, details.hintd > ol{margin-top:10px}
.actions{display:flex;flex-direction:column;gap:8px;margin-top:18px;align-items:flex-start}
.actions .fb{padding-left:0;font-size:15px}

/* essay sheet */
.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:6px 0}
.para{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:16px 22px}
.para + .para{border-top:1px dashed var(--line)}
.para .lab{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding-top:5px;line-height:1.4}
.para .lab small{display:block;text-transform:none;letter-spacing:0;font-family:var(--f-sans);font-size:12px;margin-top:2px}
.para p{margin:0;font-family:var(--f-serif);font-size:17px;line-height:1.78}
.para.missing{background:var(--accent-soft)}
.para.missing p, .para.later p{font-family:var(--f-sans);font-size:14.5px}
.para.later p{color:var(--muted)}
@media (max-width:600px){.para{grid-template-columns:1fr;gap:4px;padding:14px 16px}}
.mynotes{background:var(--sheet);border:1px dashed var(--line);border-radius:8px;padding:10px 14px;font-size:14px}
.mynotes b{font-weight:600}

.task{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.moves{margin:0;padding-left:0;list-style:none;display:grid;gap:6px;counter-reset:mv}
.moves li{counter-increment:mv;display:grid;grid-template-columns:24px 1fr;gap:8px;font-size:14.5px}
.moves li::before{content:counter(mv);font-family:var(--f-mono);font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;width:22px;height:22px;display:grid;place-items:center;margin-top:1px}
.starters{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.starters .lbl{font-size:13px;color:var(--muted);margin-right:4px}
.starter{border:1px dashed var(--accent);background:none;color:var(--accent);border-radius:6px;padding:3px 9px;font-family:var(--f-serif);font-size:14.5px;cursor:pointer;text-align:left}
.starter:hover{background:var(--accent-soft)}
.ruled{font-family:var(--f-serif);font-size:17px;line-height:32px;padding:0 14px 0 26px;border:1px solid var(--line);border-radius:6px;min-height:calc(32px * 9);
  background-color:var(--sheet);
  background-image:linear-gradient(to right, transparent 14px, var(--margin) 14px, var(--margin) 15px, transparent 15px),
                   repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--line) 31px, var(--line) 32px);
  background-attachment:local,local}
.timer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tm{font-family:var(--f-mono);font-size:26px;font-variant-numeric:tabular-nums;min-width:4.2ch}
.tm.over{color:var(--bad)}

/* model essay */
.toggles{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.toggles .lbl{font-size:13px;color:var(--muted)}
.tg{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--sheet);border-radius:999px;padding:4px 12px;font-size:13.5px;cursor:pointer}
.tg .sw{width:14px;height:10px;border-radius:2px}
.tg[aria-pressed="false"]{opacity:.55}
.essay .c{background:none;border:0;padding:0 1px;border-radius:3px;font:inherit;color:inherit;cursor:pointer;text-align:left}
.essay.show-c .c{background:var(--mark)}
.essay.show-r .r{text-decoration:underline;text-decoration-color:var(--clause-ink);text-decoration-thickness:2px;text-underline-offset:5px}
.essay.show-l .l{color:var(--link-ink);font-weight:600}
.gloss{margin:0 22px 14px 142px;padding:12px 14px;border-radius:8px;background:var(--accent-soft);font-size:14.5px;display:flex;gap:12px;align-items:flex-start}
.gloss .gt{font-family:var(--f-serif);font-weight:600;font-size:16.5px}
@media (max-width:600px){.gloss{margin:0 16px 12px}}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.compare > div{background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.compare h5{margin:0 0 6px;font-size:13px;color:var(--muted);font-weight:500}
.compare p{margin:0;font-family:var(--f-serif);font-size:16px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:640px){.compare{grid-template-columns:1fr}}
.crit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;margin:0}
.crit dt{font-family:var(--f-mono);font-size:12.5px;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:1px 7px;height:max-content;text-align:center;min-width:44px}
.crit dd{margin:0;font-size:15px}
.crit dd b{font-weight:600}
.errs{border-bottom:1px solid var(--line)}
.err{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:6px 16px;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}
.err.head{font-size:12px;color:var(--muted);font-family:var(--f-mono);letter-spacing:.04em;padding-block:8px}
.err .x{font-family:var(--f-serif);font-size:15.5px;color:var(--bad);text-decoration:line-through;text-decoration-thickness:1px}
.err .o{font-family:var(--f-serif);font-size:15.5px;color:var(--good)}
@media (max-width:640px){.err{grid-template-columns:1fr}.err.head{display:none}}

/* segmented */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--sheet);border:1px solid var(--line);border-radius:12px}
.seg button{border:0;background:none;color:var(--muted);padding:6px 14px;border-radius:8px;cursor:pointer;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* phrases */
.tool{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--railh));z-index:15;background:var(--paper);padding-block:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.tool .tr{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.tool label{font-size:13.5px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.st{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tool input[type=range]{width:96px}
.phlist{list-style:none;margin:8px 0 0;padding:0}
.phlist[data-g="1"] .ph[data-g="2"], .phlist[data-g="2"] .ph[data-g="1"]{display:none}
.ph{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:4px 12px;padding:16px 10px;border-bottom:1px solid var(--line);border-radius:8px;scroll-margin-top:260px;transition:background .2s}
.ph.playing{background:var(--accent-soft)}
.ph .idx{font-family:var(--f-mono);font-size:12px;color:var(--muted);padding-top:5px}
.ph .top{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.ph .en{background:none;border:0;padding:0;cursor:pointer;text-align:left}
.ph .en-t{font-family:var(--f-serif);font-size:19.5px;font-weight:600;border-radius:4px}
.ph .en:hover .en-t{color:var(--accent)}
.ph .cn{font-size:14.5px;border-radius:4px}
.ph .ex{margin:6px 0 0;font-family:var(--f-serif);font-size:16.5px;line-height:1.6;border-radius:4px}
.ph .ex .k{background:var(--mark);font-weight:600;border-radius:3px;padding:0 2px}
.ph .excn{margin:2px 0 0;font-size:13.5px;color:var(--muted);border-radius:4px}
.ph .note{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.ph .note b{font-weight:600;color:var(--ink);margin-right:6px;font-size:12px;border:1px solid var(--line);border-radius:4px;padding:0 5px}
.ph .side{display:flex;flex-direction:column;gap:8px;align-items:center}
.star{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--line);cursor:pointer;font-size:16px}
.star[aria-pressed="true"]{color:var(--star);border-color:var(--star)}
.shadow-tag{display:none;font-size:12px;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:0 8px;animation:pulse 1.2s infinite}
.ph.shadowing .shadow-tag{display:inline-block}
@keyframes pulse{50%{opacity:.45}}
.hide-cn .cn:not(.rv), .hide-en .en-t:not(.rv), .hide-en .k:not(.rv), .hide-ex .ex:not(.rv), .hide-ex .excn:not(.rv){color:transparent;background:var(--line);cursor:pointer;user-select:none}
.hide-en .ex .k:not(.rv){background:var(--line)}
.only-new .ph.m{display:none}

/* drills */
.q{padding:16px 0;border-top:1px solid var(--line);display:grid;gap:8px}
.q:last-child{border-bottom:1px solid var(--line)}
.q .qh{display:flex;gap:10px;align-items:flex-start}
.q .qn{font-family:var(--f-mono);font-size:12px;color:var(--muted);padding-top:4px;min-width:22px}
.q .sent{font-family:var(--f-serif);font-size:17px;line-height:1.6;flex:1;min-width:0}
.q .cnq{font-size:16px;flex:1;min-width:0}
.q .ans{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-left:32px}
.q .ans input[type=text]{flex:1 1 220px;width:auto;font-family:var(--f-serif);font-size:16px}
.q .ans textarea{flex:1 1 100%;font-family:var(--f-serif);font-size:16px;min-height:64px}
.blank{border-bottom:1.5px solid var(--ink);display:inline-block;min-width:6em}
.ini{font-family:var(--f-mono);font-size:14px;color:var(--accent);letter-spacing:.06em}
.fb{padding-left:32px;font-size:14px;margin:0}
.fb.ok{color:var(--good);animation:pop .35s ease-out}
.fb.no{color:var(--bad)}
@keyframes pop{0%{transform:translateY(3px);opacity:.2}100%{transform:none;opacity:1}}
.refbox{margin-left:32px;padding:10px 12px;border-radius:8px;background:var(--accent-soft);font-size:14.5px;display:flex;gap:10px;align-items:flex-start}
.refbox .rt{font-family:var(--f-serif);font-size:16px}
.refbox .tip{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}
.sel-ok{border-color:var(--good)!important;box-shadow:0 0 0 1px var(--good)}
.sel-no{border-color:var(--bad)!important;box-shadow:0 0 0 1px var(--bad)}
.score{font-family:var(--f-mono);font-size:13.5px;color:var(--muted)}
.score.all{color:var(--good);font-weight:500}
.notice{font-size:14px;padding:10px 14px;border-radius:8px;background:var(--accent-soft)}

/* grammar */
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;margin:6px 0 12px}
.ante{border-bottom:2px solid var(--accent)}
.rel{font-weight:700;color:var(--accent);background:var(--accent-soft);padding:0 3px;border-radius:3px}
.cl{background:var(--clause);border-radius:2px}
.gs{padding:16px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
.gs .s{font-family:var(--f-serif);font-size:18px;line-height:1.7}
.gs .why{grid-column:1/-1;font-size:14.5px;color:var(--muted);margin:0}
.gs .why b{color:var(--ink);font-weight:600}
.lvl{display:inline-block;font-family:var(--f-mono);font-size:11.5px;border-radius:999px;padding:0 8px;margin-right:8px;color:var(--sheet);background:var(--band)}
.bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:6px}
.band-tab{border:1px solid var(--line);background:var(--sheet);border-radius:10px;padding:10px 12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.band-tab .b{font-family:var(--f-mono);font-size:20px;color:var(--band);font-weight:500}
.band-tab .t{font-size:13px;color:var(--muted)}
.band-tab .t .dn{color:var(--good)}
.band-tab[aria-selected="true"]{border-color:var(--band);box-shadow:inset 0 0 0 1px var(--band)}
@media (max-width:560px){.bands{grid-template-columns:repeat(2,minmax(0,1fr))}}
.band-desc{font-size:14.5px;margin:10px 0 4px;padding:10px 14px;border-left:3px solid var(--band);background:var(--sheet);border-radius:0 8px 8px 0}
.task-line{font-size:13.5px;color:var(--muted)}
.task-line b{color:var(--ink);font-weight:600}

/* revise */
.rz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.rz-grid{grid-template-columns:minmax(0,1fr)}}
.rz-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.rz-col h4{margin:0;font-size:14px;font-weight:600}
.draftview{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:10px 16px;font-family:var(--f-serif);font-size:16.5px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;min-height:120px}
.draftview mark{background:none;color:var(--bad);text-decoration:underline wavy var(--bad);text-underline-offset:4px}
.rz-chips{display:flex;flex-wrap:wrap;gap:6px}
.rz-chip{border:1px solid var(--line);background:var(--sheet);border-radius:999px;padding:3px 10px;font-family:var(--f-serif);font-size:14px;cursor:pointer}
.rz-chip:hover{border-color:var(--accent)}
.rz-chip.on{background:var(--mark);border-color:transparent}
.cmp{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--sheet);overflow:hidden}
.cmp-row{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:8px;padding:9px 14px;font-size:14px;align-items:center}
.cmp-row + .cmp-row{border-top:1px solid var(--line)}
.cmp-row.head{font-size:12px;color:var(--muted);font-family:var(--f-mono);background:var(--paper)}
.cmp-row b{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
.up{color:var(--good)} .down{color:var(--bad)}
.goals{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14.5px}
.goals li{display:flex;gap:8px}
.goals .mk{width:18px;color:var(--muted)}
.goals li.met .mk{color:var(--good);font-weight:700}

/* write */
.wgrid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start;margin-top:16px}
.panel{background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--railh) + 12px);max-height:calc(100vh - 80px);overflow:auto}
.panel.exam .stat{display:none}
.panel .examnote{display:none;font-size:13px;color:var(--muted);margin:0}
.panel.exam .examnote{display:block}
@media (max-width:820px){.wgrid{grid-template-columns:1fr}.panel{position:static;max-height:none}}
.stat{display:flex;flex-direction:column;gap:6px;font-size:14px}
.stat b{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.pcs{display:flex;flex-wrap:wrap;gap:5px}
.pc{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pc.on{background:var(--mark);color:var(--ink);border-color:transparent}
.weak{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:13px}
.weak li b{color:var(--bad);font-weight:600}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.checks label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14.5px}
.checks .cr{font-family:var(--f-mono);font-size:11.5px;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:0 5px;margin-right:4px;white-space:nowrap}
.checks input{margin-top:5px}

/* review */
.sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sum > div{background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:0}
.sum h5{margin:0 0 4px;font-size:13px;color:var(--muted);font-weight:500}
.sum p{margin:0;font-size:15px}
.sum b{font-family:var(--f-mono);font-weight:500}
@media (max-width:640px){.sum{grid-template-columns:1fr}}
.elog-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
.elog-form .full{grid-column:1/-1}
@media (max-width:640px){.elog-form{grid-template-columns:1fr}}
.elog{list-style:none;margin:12px 0 0;padding:0}
.elog li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.etype{font-size:12px;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:0 8px;white-space:nowrap;margin-top:3px}
.eo{font-family:var(--f-serif);font-size:15.5px;color:var(--bad)}
.ef{font-family:var(--f-serif);font-size:15.5px;color:var(--good);border-radius:4px}
.quiz .ef:not(.rv){color:transparent;background:var(--line);cursor:pointer;user-select:none}

.pager{display:flex;justify-content:space-between;gap:12px;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.pager a{text-decoration:none;color:var(--accent);font-weight:500;padding:8px 0}
.pager a.next{margin-left:auto}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:8px;font-size:14px;z-index:50;max-width:calc(100% - 32px)}

/* hub */
.hub-mast{padding-block:44px 8px}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0 8px}
.how > div{border-top:2px solid var(--accent);padding-top:10px;min-width:0}
.how b{display:block;font-family:var(--f-serif);font-size:17px;margin-bottom:2px}
.how p{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:640px){.how{grid-template-columns:1fr}}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 56px}
@media (max-width:700px){.tgrid{grid-template-columns:1fr}}
.tcard{display:flex;flex-direction:column;gap:10px;background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:18px 20px;text-decoration:none;color:inherit;min-width:0;transition:border-color .15s}
.tcard:hover{border-color:var(--accent)}
.tcard .th{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tcard .tn{font-family:var(--f-serif);font-weight:700;font-size:26px;line-height:1.2}
.tcard .te{font-family:var(--f-serif);font-style:italic;color:var(--accent);font-size:18px}
.tcard .tq{font-family:var(--f-serif);font-size:15.5px;line-height:1.55;margin:0;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--muted)}
.chip.g{border-color:var(--accent);color:var(--accent)}
.tprog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-top:auto}
.tprog .bar{flex:1}
.tprog .go{color:var(--accent);font-weight:600;white-space:nowrap}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}