:root{
  --paper:#f6f8fa; --card:#ffffff; --ink:#0f172a; --muted:#5c6875;
  --line:#e3e8ee; --line2:#eef1f5;
  --accent:#0e7490; --accent-soft:#e9f6f9; --accent-ink:#0b5c73;
  --amber:#a16207; --amber-bg:#fdf7e7; --amber-line:#f0dcae;
  --red:#b3261e; --red-bg:#fdf1f0; --red-line:#f2cdc9;
  --blue:#2563eb; --blue-bg:#eef4ff; --blue-line:#cfdcf8;
  --radius:12px;
  --mono:"Cascadia Code",Consolas,"SF Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
.panel{scroll-margin-top:64px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Segoe UI","PingFang HK","Microsoft JhengHei","Noto Sans TC",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.85; letter-spacing:.01em;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:900px;margin:0 auto;padding:0 22px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.topbar::before{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,#2563eb 55%,#0891b2 100%)}
.topbar .wrap{display:flex;align-items:center;gap:14px;height:56px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:15px;
  color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .seal{width:29px;height:auto;border-radius:4px;flex:0 0 auto;
  box-shadow:0 1px 4px rgba(154,39,33,.28)}
.brandtag{font-size:12px;color:var(--muted);letter-spacing:.14em;font-weight:600}
.topbar .crumb{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .spacer{flex:1}
@media(max-width:640px){.brandtag{display:none}.topbar .crumb{display:none}}

/* ---------- index ---------- */
.hero{
  padding:38px 0 30px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 1px 1px,rgba(14,116,144,.10) 1px,transparent 1.6px) 0 0/22px 22px,
    linear-gradient(180deg,#e9f3f6 0%,rgba(246,248,250,0) 100%);
}
.hero-grid{display:flex;align-items:center;gap:30px}
.heromain{flex:1;min-width:0}
.hero-seal{width:96px;flex:0 0 auto;border-radius:6px;
  filter:drop-shadow(0 8px 18px rgba(154,39,33,.25))}
@media(max-width:640px){.hero-seal{width:62px}.hero-grid{gap:18px}}
.hero .kicker{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.hero h1{font-size:32px;line-height:1.35;margin:0 0 8px;font-weight:720;letter-spacing:-.01em}
.hero .sub{color:var(--muted);margin:0;max-width:640px;font-size:15.5px}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:13.5px;color:var(--muted)}
.stat b{color:var(--accent-ink);font-size:17px;font-weight:700;margin-right:4px;font-family:var(--mono)}

.part{margin:30px 0 8px;padding-top:6px}
.part:first-of-type{margin-top:10px}
.parthead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.parthead .pname{font-size:13.5px;font-weight:750;letter-spacing:.14em;color:#fff;
  background:var(--ink);padding:4px 13px;border-radius:6px}
.partelec .parthead .pname{background:var(--accent)}
.parthead .pmeta{font-size:12.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
.parthead::after{content:"";flex:1;height:1px;background:var(--line);min-width:30px}

.unit{margin:26px 0}
.unit h2{font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;padding-left:2px}
.lessons{display:grid;gap:7px}
.lesson{
  display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:9px 16px;transition:.14s;
}
.lesson:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,116,144,.10)}
.lesson.done:hover{text-decoration:none}
.lesson.done{border-left:3px solid var(--accent)}
.lesson.done .t{color:var(--accent-ink)}
.lesson.todo{opacity:.5}
.lesson .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);font-size:13.5px}
.lesson.todo .num{color:var(--muted)}
.lesson .t{font-weight:600;font-size:15.5px}
.lesson .e{display:block;font-size:12.5px;color:var(--muted);font-weight:400;letter-spacing:.02em}
.lesson .meta{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}

/* pending subtopics (inside elective part) */
.pendcard{background:var(--card);border:1px dashed #94b8c6;border-radius:10px;padding:13px 18px;margin:10px 0 26px}
.pendcard .ptopic{font-weight:700;font-size:15px}
.pendcard .pen{font-weight:400;font-size:12.5px;color:var(--muted);font-family:var(--mono)}
.pendcard .pintro{margin:6px 0 9px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.pendcard ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pendcard li{display:flex;gap:10px;align-items:baseline;font-size:14px;
  padding:6px 12px;background:rgba(14,116,144,.06);border-radius:8px}
.pendcard li::before{content:"⏳";font-size:12px}
.pendcard .pzh{color:var(--muted);font-size:13px}

/* ---------- lesson header ---------- */
.lhead{padding:20px 0 4px}
.lhead .kicker{font-size:13px;letter-spacing:.1em;color:var(--accent);font-weight:700;text-transform:uppercase}
.lhead .kicker .vlink{margin-left:9px;font-weight:700;letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.lhead .kicker .vlink:hover{color:var(--accent-ink);text-decoration:none}
.lhead h1{font-size:30px;line-height:1.3;margin:6px 0 3px;font-weight:720}
.lhead .en{color:var(--muted);font-size:15px;margin:0;line-height:1.45}
.btn{
  display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:8px 14px;border-radius:9px;cursor:pointer;
}
.btn:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink);color:#fff}

/* ---------- section nav ---------- */
.secnav{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2);margin:10px 0 0}
.secnav .wrap{display:flex;gap:6px;overflow-x:auto;padding:8px 22px;scrollbar-width:none}
.secnav .wrap::-webkit-scrollbar{display:none}
.secnav a{font-size:14px;color:var(--muted);padding:5px 11px;border-radius:20px;white-space:nowrap}
.secnav a:hover{background:var(--accent-soft);color:var(--accent-ink);text-decoration:none}

/* ---------- article ---------- */
article{padding:14px 0 60px}
article h2{font-size:23px;margin:46px 0 6px;font-weight:700;scroll-margin-top:72px;letter-spacing:-.005em}
article h2::before{content:"";display:block;width:34px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:12px}
article h3{font-size:18px;margin:28px 0 4px;font-weight:660;scroll-margin-top:72px}
article p{margin:12px 0}
article ul,article ol{padding-left:1.3em;margin:12px 0}
article li{margin:5px 0}
article strong{font-weight:680}
article code{background:var(--line2);padding:1px 5px;border-radius:5px;font-size:.92em}
article hr{border:0;border-top:1px solid var(--line);margin:38px 0}

/* tables */
.tablewrap{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:10px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:15.5px}
th,td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line2)}
th{background:#f0f5f8;font-weight:670;font-size:14px;letter-spacing:.02em;white-space:nowrap}
tr:last-child td{border-bottom:0}
td{line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
/* the label column never splits a word: the column widens instead */
article table td:first-child{word-break:normal;overflow-wrap:normal}
article table td:last-child{min-width:104px}

/* slide ref badge */
.sref{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;
  background:var(--accent-soft);color:var(--accent-ink);border:1px solid #c9e4ec;
  padding:1px 8px;border-radius:6px;margin:0 2px;vertical-align:2px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.sref:hover{background:var(--accent);color:#fff;border-color:var(--accent);text-decoration:none}

/* ---------- slide pictures embedded in the notes ---------- */
.inslide{
  margin:14px 0 24px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;
}
.inslide img{display:block;width:100%;height:auto}
.inslide figcaption{
  display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:12.5px;
  color:var(--muted);border-top:1px solid var(--line2);background:#fafcfd;
  font-variant-numeric:tabular-nums;
}
.inslide figcaption b{color:var(--accent-ink);font-weight:700}
.inslide figcaption .vidlink{margin-left:auto;font-size:12.5px}
html[data-slide="off"] .inslide{display:none}

/* ---------- pronunciation chip ---------- */
.say{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-left:4px;padding:0;border:0;background:transparent;
  cursor:pointer;vertical-align:-3px;
}
.say svg{width:16px;height:16px;fill:#8b8579;transition:fill .12s,transform .12s}
.say:hover svg{fill:var(--accent);transform:scale(1.12)}
.say:active svg{transform:scale(.92)}
.say.on svg{fill:#b45309}
td .say{margin-left:6px}

/* callouts */
.callout{border:1px solid var(--line);border-left-width:4px;border-radius:8px;padding:9px 14px;margin:11px 0;background:var(--card)}
.callout .ct{font-weight:700;font-size:15px;margin-bottom:2px;display:block}
.callout p{margin:4px 0}
.callout ul{margin:2px 0 0;padding-left:1.15em}
.callout li{margin:1px 0}
.callout li::marker{color:var(--muted)}
.callout p:last-child{margin-bottom:0}
/* merged callouts: original titles become sub-headings inside one box */
.callout.merged .ct:first-child{margin-bottom:6px}
.callout.merged .ct.sub{
  font-size:15px;line-height:1.5;color:inherit;margin:9px 0 1px;
  padding-top:8px;border-top:1px dashed rgba(0,0,0,.09);
}
.callout.merged .ct.sub + ul,.callout.merged .ct.sub + p{margin-top:1px}
.callout.merged > .ct:first-child + .ct.sub{border-top:0;padding-top:0;margin-top:4px}
.callout.key{background:var(--accent-soft);border-color:#c9e4ec;border-left-color:var(--accent)}
.callout.key .ct{color:var(--accent-ink)}
.callout.trap{background:var(--red-bg);border-color:var(--red-line);border-left-color:var(--red)}
.callout.trap .ct{color:var(--red)}
.callout.note{background:var(--blue-bg);border-color:var(--blue-line);border-left-color:var(--blue)}
.callout.note .ct{color:var(--blue)}
.callout.exam{background:var(--amber-bg);border-color:var(--amber-line);border-left-color:var(--amber)}
.callout.exam .ct{color:var(--amber)}

/* ---------- terminology corrections (official term alerts) ---------- */
.corrbox{margin:18px 0 6px}
.corr{
  background:linear-gradient(180deg,#fdf3e3,#fdf8ee);
  border:1px solid var(--amber-line);border-left:4px solid var(--amber);
  border-radius:8px;padding:10px 15px;margin:10px 0;
}
.corr .ct{
  font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--amber);
  text-transform:uppercase;margin-bottom:5px;
}
.corr .swap{margin:0 0 5px;font-size:17px;line-height:1.6}
.corr .swap s{color:#9a9287;text-decoration-thickness:1.5px}
.corr .swap .arrow{color:var(--muted);margin:0 8px;font-weight:700}
.corr .swap b{color:#7a4a06}
.corr .czh{font-weight:inherit;color:#7a4a06;margin-left:1px}
.corr .why{margin:0;font-size:15px;line-height:1.7;color:#5d5445}
.corr .src{margin:6px 0 0;font-size:12.5px;color:#8a8175}
/* ---------- official term corrections table ---------- */
.corrsec{margin-top:40px}
.corrtab td{vertical-align:top}
.corrtab td:first-child{white-space:nowrap}
.corrtab td s{color:#9a9287}
.corrtab td:nth-child(2) b{white-space:nowrap}

/* ---------- Chinese gloss under English text ---------- */
.glon{border-bottom:0}
article b,article strong{font-weight:680}
.glz{font-size:1em;font-weight:inherit;color:#6b6459;letter-spacing:0;margin-left:1px}
.zh{
  color:#5f5b54;font-size:14.5px;line-height:1.75;background:#f8f5ef;
  border:1px solid #ece7dd;border-radius:8px;padding:9px 13px;margin:8px 0 20px;
}
.zh p{margin:0}
.zh .zhtag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  color:#8b857a;background:#eee8dc;border-radius:4px;padding:1px 5px;
  margin-right:8px;vertical-align:1.5px;
}

/* ---------- slides ---------- */
.slidesec{padding:10px 0 40px}
.slides{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:20px}
.slide{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.slide img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#f3f0ea}
.slide .cap{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;font-size:12.5px;color:var(--muted);gap:8px}
.slide .cap b{color:var(--ink);font-weight:650}
.slide .cap a{font-size:12.5px}

/* ---------- quiz ---------- */
.quizsec{padding:10px 0 50px}
.qbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0 22px}
.qbar .score{font-size:14px;color:var(--muted)}
.qbar .score b{color:var(--accent);font-size:19px}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:14px 0}
.qcard .qh{display:flex;gap:10px;align-items:baseline;margin-bottom:10px}
.qcard .qn{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.06em;white-space:nowrap;flex:none;padding-top:4px}
.qcard .qtext{font-weight:600;line-height:1.7}
.qcard.tf .qtext::after{content:" (True / False)";font-size:12.5px;color:var(--muted);font-weight:400}
.opts{display:grid;gap:8px;margin-top:12px}
.opt{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;padding:10px 13px;cursor:pointer;transition:.12s;background:#fdfcfa}
.opt:hover{border-color:#cfc9bf}
.opt input{accent-color:var(--accent);margin-top:6px;flex:none}
.opt .k{font-weight:700;color:var(--muted);font-size:13px;flex:none;width:14px}
.opt.right{border-color:#7fb8ae;background:#eaf5f2}
.opt.wrong{border-color:#e0a29b;background:#fbeceb}
.explain{margin-top:12px;padding:11px 14px;border-radius:8px;background:#eef4f7;font-size:15px;color:#27303a;display:none}
.explain.show{display:block}
.explain b{color:var(--accent-ink)}
.shortq{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:14px 0}
.shortq .qtext{white-space:pre-wrap}
.shortq .model{display:none;margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;white-space:pre-wrap;font-size:15px;color:#3b3a37}
.shortq.open .model{display:block}
.shortq .model b{color:var(--accent-ink)}

/* ---------- glossary ---------- */
.glosec{padding:10px 0 60px}
.glos{width:100%;border-collapse:collapse;font-size:15.5px}
.glos th{text-align:left}
.glos td:nth-child(1){width:27%}
.glos td:nth-child(2){width:22%}
.glos td:nth-child(4){width:52px;white-space:nowrap;color:var(--muted);font-size:13px}
.glos td.zhcol{transition:filter .15s}
body.blurzh .glos td.zhcol{filter:blur(6px)}
body.blurzh .glos td.zhcol:hover{filter:none}

footer{border-top:1px solid var(--line);padding:26px 0 60px;color:var(--muted);font-size:13.5px}
.fwrap{display:flex;gap:14px;align-items:flex-start}
.fseal{width:30px;flex:0 0 auto;opacity:.9;border-radius:4px;margin-top:2px}
.ftext b{color:var(--ink)}
footer a{color:var(--muted);text-decoration:underline}

@media(max-width:640px){
  body{font-size:16px;line-height:1.8}
  .hero h1{font-size:27px}
  .lhead h1{font-size:25px}
  article h2{font-size:20px}
  .lesson{grid-template-columns:34px 1fr;gap:10px}
  .lesson .meta{grid-column:2;text-align:left;margin-top:2px}
}

/* ---------- right-hand video split panel (notes left, video right) ---------- */
#vidfloat{
  position:fixed;top:0;right:0;width:calc(100vw / 3);height:100vh;z-index:210;
  background:#101216;display:none;flex-direction:column;
  box-shadow:-6px 0 26px rgba(0,0,0,.22);
}
#vidfloat.on{display:flex}
#vidfloat .bar{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;height:34px;
  padding:0 10px 0 6px;background:#161a20;color:#9aa4b2;font-size:12.5px;
}
#vidfloat .bar .x{
  width:26px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;
  color:#cfd6df;font-size:14px;line-height:26px;text-align:center;cursor:pointer;
}
#vidfloat .bar .x:hover{background:#232a33;color:#fff}
#vidfloat .bar a{margin-left:auto;color:#8fb8ad}
#vidfloat .bar a:hover{color:#b8dcd2;text-decoration:underline}
#vidfloat iframe{flex:1 1 auto;width:100%;border:0;display:block;background:#000}
html[data-vid="on"] body{margin-right:calc(100vw / 3)}
@media (max-width:820px){
  html[data-vid="on"] body{margin-right:0}
  #vidfloat{width:100vw;height:58vh}
}

/* ---------- print ---------- */
@media print{
  .topbar,.secnav,.actions,.qbar,.btn,footer,#vidfloat{display:none!important}
  html[data-vid="on"] body{margin-right:0}
  .slides{grid-template-columns:repeat(2,1fr)}
  body{background:#fff;font-size:11.5pt;line-height:1.6}
  .qcard,.shortq,.callout,.slide{break-inside:avoid}
  .explain{display:block!important;background:none;border-top:1px solid #ddd;padding-top:6px}
  article h2{break-after:avoid}
  a[href^="http"]::after{content:""}
}

/* ---------- tabs ---------- */
.secnav a.on{background:var(--accent);color:#fff}
.secnav a.on:hover{background:var(--accent-ink);color:#fff}
.secnav .spacer{flex:1;min-width:8px}
.dbtn{
  flex:none;font:inherit;font-size:12.5px;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:20px;padding:4px 11px;cursor:pointer;
  white-space:nowrap;
}
.dbtn:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- dense mode (default) ---------- */
html[data-d="dense"] body{font-size:16px;line-height:1.65}
html[data-d="dense"] .lhead{padding:24px 0 2px}
html[data-d="dense"] .lhead h1{font-size:27px;margin:6px 0 2px}
html[data-d="dense"] article{padding:8px 0 28px}
html[data-d="dense"] article p{margin:7px 0}
html[data-d="dense"] article h2{margin:26px 0 4px;font-size:20.5px}
html[data-d="dense"] article h2::before{width:26px;height:2px;margin-bottom:8px}
html[data-d="dense"] article h3{margin:17px 0 2px;font-size:16.5px}
html[data-d="dense"] article ul,
html[data-d="dense"] article ol{margin:7px 0}
html[data-d="dense"] article li{margin:2px 0}
html[data-d="dense"] .tablewrap{margin:11px 0}
html[data-d="dense"] table{font-size:14.5px}
html[data-d="dense"] th,
html[data-d="dense"] td{padding:7px 11px}
html[data-d="dense"] th{font-size:13px}
html[data-d="dense"] .callout{padding:10px 14px;margin:12px 0}
html[data-d="dense"] .callout .ct{font-size:14.5px;margin-bottom:1px}
html[data-d="dense"] .zh{padding:7px 11px;margin:6px 0 13px;font-size:13.5px;line-height:1.68}
html[data-d="dense"] .slides{gap:9px}
html[data-d="dense"] .qcard{padding:13px 16px;margin:9px 0}
html[data-d="dense"] .opt{padding:7px 11px}
html[data-d="dense"] .qbar{margin:12px 0 14px}
html[data-d="dense"] .slidesec,
html[data-d="dense"] .quizsec,
html[data-d="dense"] .glosec{padding:6px 0 40px}
html[data-d="dense"] footer{padding:18px 0 40px}

/* ---------- print: show every panel ---------- */
@media print{
  .panel{display:block!important}
  .dbtn{display:none!important}
  .say{display:none!important}
  .inslide{break-inside:avoid}
}