/* ============================================================
   English 轻松学 — 词典页（Dictionary）
   黑白印刷 + 一支黄色荧光笔。直角、细线、无阴影、无胶囊。
   改配色只动下面 :root 与暗色块。
   容器规则：顶栏 / 页眉行 / 各版块 / 笔记三栏 / 页尾 共用 --max + --gutter，左右边缘永远对齐；
             新组件不要自己写 max-width / 左右 padding，复用 .wrap。
   字号规则：全部用 rem，<html data-size="1~4"> 控制 html 的 font-size，整站一起缩放。
   ============================================================ */

:root{
  --bg:#F3F3EF;          /* 桌面：页面底色 */
  --sheet:#FFFFFF;       /* 纸：顶栏、hero、笔记正文 */
  --ink:#141412;         /* 墨 */
  --ink-2:#4B4B46;
  --ink-3:#86867E;
  --line:#D8D8D0;        /* 细线 */
  --rule:#141412;        /* 粗线 */
  --mark:#FFD60A;        /* 荧光笔 */
  --mark-soft:#FFF0A3;
  --on-mark:#141412;     /* 荧光黄上面的字，亮暗色都是黑 */
  --go:#0B6B4D;          /* 墨绿：链接、已读、答对 */
  --go-soft:#E1F0E9;
  --bad:#C2372C;
  --bad-soft:#FBE6E3;
  --max:1400px;          /* 唯一的容器宽度 */
  --gutter:24px;         /* 唯一的左右留白 */
  --header-h:60px;
  --f-en:"Source Serif 4","Noto Serif SC",Georgia,serif;                  /* 英文词条、例句、数字 */
  --f-head:"Source Serif 4","Noto Serif SC","Songti SC",serif;            /* 标题：英文衬线 + 思源宋体 */
  --f-body:"Source Serif 4","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; /* 正文：中文黑体，夹在里面的英文自动是衬线 */
  --f-ui:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --f-ipa:"Noto Sans","Segoe UI","Lucida Sans Unicode",sans-serif;        /* 音标：要有完整 IPA 字符 */
  color-scheme:light;
}
html[data-mode="dark"]{
  --bg:#0E0E0D; --sheet:#181816; --ink:#F1F0EA; --ink-2:#BEBDB4; --ink-3:#86857D;
  --line:#33332E; --rule:#F1F0EA;
  --mark:#FFD60A; --mark-soft:#4B4105; --on-mark:#141412;
  --go:#62D0A6; --go-soft:#12362A; --bad:#FF8B7E; --bad-soft:#3F1B17;
  color-scheme:dark;
}

/* ---------- 基础 ---------- */

html{ font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px); overflow-x:clip; }
html[data-size="1"]{ font-size:15px; }
html[data-size="3"]{ font-size:17.5px; }
html[data-size="4"]{ font-size:19px; }
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:1.0625rem; line-height:1.85; -webkit-font-smoothing:antialiased; overflow-x:clip; }
a{ color:var(--go); text-underline-offset:.2em; text-decoration-thickness:1px; }
a:hover{ color:var(--ink); background:var(--mark-soft); }
img{ max-width:100%; height:auto; }
button{ font-family:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--mark); outline-offset:2px; }
h1,h2,h3{ font-family:var(--f-head); font-weight:700; line-height:1.4; margin:0; }
small{ font-size:.82em; font-weight:400; color:var(--ink-3); }
.en{ font-family:var(--f-en); }
.ipa{ font-family:var(--f-ipa); color:var(--ink-3); font-weight:400; white-space:nowrap; }
.pos{ font-family:var(--f-en); font-style:italic; color:var(--ink-3); }
mark{ background:var(--mark-soft); color:inherit; padding:.04em .18em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.skip-link{ position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--sheet); padding:8px 14px; z-index:999; }
.skip-link:focus{ left:8px; }

/* 容器 */
.wrap,.topbar-inner,.note-layout{ max-width:var(--max); margin:0 auto; padding-inline:var(--gutter); }
.page{ padding-bottom:16px; }

/* 小标签：黑底白字，贴在框线上（词典里「用法说明」那种） */
.label{ display:inline-block; background:var(--ink); color:var(--sheet); font-family:var(--f-ui); font-size:.75rem; font-weight:700; letter-spacing:.1em; line-height:1.7; padding:0 .7em; }

/* 按钮：直角，黑底；悬停变荧光黄 */
.btn,.quiz-submit,.quiz-retry{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:48px; padding:0 1.6em; font-family:var(--f-ui); font-size:1rem; font-weight:700; line-height:1.3; text-decoration:none; border:2px solid var(--ink); cursor:pointer; transition:background .12s,color .12s,border-color .12s; }
.btn-primary,.quiz-submit{ background:var(--ink); color:var(--sheet); }
.btn-primary:hover,.quiz-submit:hover:not(:disabled){ background:var(--mark); border-color:var(--mark); color:var(--on-mark); }
.btn-ghost,.quiz-retry{ background:transparent; color:var(--ink); }
.btn-ghost:hover,.quiz-retry:hover{ background:var(--mark-soft); color:var(--ink); }

/* 朗读：小方框 */
.say{ display:inline-grid; place-items:center; width:1.75em; height:1.75em; margin-left:.4em; vertical-align:middle; padding:0; background:transparent; border:1px solid var(--line); cursor:pointer; color:var(--ink-2); font-size:.9rem; font-style:normal; }
.say svg{ width:1em; height:1em; }
.say:hover,.say.is-playing{ background:var(--mark); border-color:var(--mark); color:var(--on-mark); }

/* ---------- 顶栏：一行 ---------- */

.topbar{ position:sticky; top:0; z-index:50; background:var(--sheet); border-bottom:2px solid var(--rule); }
.topbar-inner{ min-height:var(--header-h); display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:baseline; gap:.5em; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand:hover{ background:none; color:var(--ink); }
.brand-en{ font-family:var(--f-en); font-weight:700; font-size:1.5rem; letter-spacing:-.01em; line-height:1; }
.brand-cn{ font-family:var(--f-head); font-weight:700; font-size:1.02rem; background:var(--mark); color:var(--on-mark); padding:0 .35em; line-height:1.55; }
.brand-ipa{ font-size:.78rem; }
.topnav{ display:flex; gap:26px; }
.topnav-link{ font-family:var(--f-ui); font-size:.94rem; font-weight:500; color:var(--ink); text-decoration:none; padding:2px 0; white-space:nowrap; background:linear-gradient(var(--mark),var(--mark)) left bottom/0 .5em no-repeat; transition:background-size .15s; }
.topnav-link:hover,.topnav-link.is-active{ color:var(--ink); background:linear-gradient(var(--mark),var(--mark)) left bottom/100% .5em no-repeat; }
.topnav-link.is-active{ font-weight:700; }
html[data-mode="dark"] .topnav-link:hover,html[data-mode="dark"] .topnav-link.is-active{ background:linear-gradient(var(--mark-soft),var(--mark-soft)) left bottom/100% .5em no-repeat; box-shadow:inset 0 -2px var(--mark); }
.tools{ display:flex; gap:6px; }
.tool{ width:36px; height:36px; display:grid; place-items:center; padding:0; background:transparent; border:1px solid var(--line); cursor:pointer; font-family:var(--f-en); font-size:1rem; font-weight:600; }
.tool:hover{ border-color:var(--ink); background:var(--mark-soft); }
.icon-sun{ display:none; }
html[data-mode="dark"] .icon-sun{ display:block; }
html[data-mode="dark"] .icon-moon{ display:none; }

/* ---------- 页眉行：左边「你在这里」，右边拇指索引（词典书口的标签） ---------- */

.runhead{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; min-height:44px; }
.crumbs{ padding-top:14px; font-family:var(--f-ui); font-size:.84rem; color:var(--ink-3); line-height:1.6; }
.crumbs a{ color:var(--ink-3); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); }
.crumb-current{ color:var(--ink); font-weight:500; }
.crumb-sep{ margin:0 .5em; opacity:.6; }
.thumbs{ display:flex; align-items:flex-start; gap:4px; flex:none; margin-left:auto; }
.thumbs-label{ font-family:var(--f-ui); font-size:.75rem; color:var(--ink-3); padding:8px 6px 0 0; letter-spacing:.08em; }
.thumb{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:78px; height:34px; padding:0 12px 5px; background:var(--ink); color:var(--sheet); text-decoration:none; font-family:var(--f-en); font-weight:700; font-size:.94rem; line-height:1.2; white-space:nowrap; border-radius:0 0 12px 12px; transition:height .12s; }
.thumb:hover{ height:42px; background:var(--ink); color:var(--mark); }
.thumb.is-active,.thumb.is-active:hover{ height:44px; background:var(--mark); color:var(--on-mark); }

/* ---------- 版块标题 ---------- */

.section{ padding-top:56px; }
.section-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; padding-bottom:12px; border-bottom:2px solid var(--rule); }
.section-head h2{ font-size:1.55rem; }
.section-head .en{ font-style:italic; font-weight:400; color:var(--ink-3); font-size:1.1rem; }
.section-head p{ margin:0 0 0 auto; color:var(--ink-2); font-size:.97rem; font-family:var(--f-ui); }
.section-body{ padding-top:20px; }
.section-body > p{ max-width:46em; }

/* ---------- 首页 hero：一个大词条 ---------- */

.hero{ background:var(--sheet); border-bottom:2px solid var(--rule); }
.hero-inner{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0 56px; padding-block:22px 56px; }
.entry-key{ font-family:var(--f-ui); font-size:.8rem; letter-spacing:.14em; color:var(--ink-3); margin:22px 0 0; }
.headword{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .22em; margin:0; font-family:var(--f-en); font-weight:700; font-size:clamp(4.4rem,11vw,9.4rem); line-height:1; letter-spacing:-.035em; }
.headword-word{ background:linear-gradient(var(--mark),var(--mark)) left 82%/100% .2em no-repeat; padding-right:.04em; }
.headword-side{ display:flex; align-items:center; gap:.5em; font-size:1.25rem; letter-spacing:0; font-weight:400; line-height:1.4; }
.headword-side .say{ font-size:1rem; margin:0; }
.hero h1{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin:22px 0 10px; display:flex; gap:.6em; align-items:baseline; }
.sense-no{ font-family:var(--f-en); font-weight:700; font-size:.8em; flex:none; }
.hero-lead{ margin:0 0 6px 1.75em; max-width:36em; color:var(--ink-2); font-size:1.06rem; }
.hero-eg{ margin:8px 0 26px 1.75em; padding-left:14px; border-left:3px solid var(--mark); font-family:var(--f-en); font-size:1.18rem; font-style:italic; line-height:1.6; }
.hero-eg span + span{ display:block; font-family:var(--f-ui); font-style:normal; font-size:.92rem; color:var(--ink-3); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-left:1.75em; }
.hero-resume{ margin:16px 0 0 1.75em; font-family:var(--f-ui); font-size:.95rem; color:var(--ink-2); }
.hero-aside{ border-left:1px solid var(--line); padding:46px 0 0 32px; align-self:stretch; }
.aside-title{ font-family:var(--f-ui); font-size:.78rem; letter-spacing:.14em; color:var(--ink-3); margin-bottom:8px; }
.stat{ display:grid; grid-template-columns:3.6em 1fr; align-items:baseline; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.stat b{ font-family:var(--f-en); font-size:2.3rem; font-weight:700; line-height:1; text-align:right; font-variant-numeric:lining-nums; }
.stat span{ font-family:var(--f-ui); font-size:.97rem; }
.stat i{ font-family:var(--f-en); color:var(--ink-3); margin-right:.4em; }
.aside-note{ margin:14px 0 0; padding-top:12px; border-top:2px solid var(--rule); font-family:var(--f-ui); font-size:.88rem; color:var(--ink-2); line-height:1.7; }

/* ---------- 索引表：四个程度（首页）、技能下的各程度（技能页） ---------- */

.index-row{ display:grid; grid-template-columns:9.5rem 11rem minmax(0,1fr) 7rem 2rem; gap:0 28px; align-items:center; padding:20px 12px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.index-row:hover{ background:var(--mark-soft); color:var(--ink); }
.index-code{ font-family:var(--f-en); font-weight:700; font-size:2.5rem; line-height:1; letter-spacing:-.02em; white-space:nowrap; }
.index-name{ font-family:var(--f-head); font-weight:700; font-size:1.3rem; }
.index-name small{ display:block; font-family:var(--f-ui); font-size:.86rem; line-height:1.5; }
.index-can{ margin:0; padding:0; list-style:none; font-family:var(--f-ui); font-size:.97rem; color:var(--ink-2); line-height:1.75; }
.index-can li::before{ content:'▸ '; color:var(--ink-3); }
.index-count{ font-family:var(--f-ui); font-size:.9rem; color:var(--ink-3); text-align:right; white-space:nowrap; }
.index-count b{ font-family:var(--f-en); font-size:1.4rem; color:var(--ink); margin-right:.15em; }
.index-go{ font-family:var(--f-en); font-size:1.4rem; text-align:right; }
.index.is-compact .index-row{ grid-template-columns:7rem minmax(0,1fr) 7rem 2rem; padding:12px; }
.index.is-compact .index-code{ font-size:1.6rem; }
.index.is-compact .index-name{ font-size:1.05rem; }

/* ---------- 细线格：六大技能（首页）、小帮手（起步页） ---------- */

.skills{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-left:1px solid var(--line); border-top:1px solid var(--line); margin-top:-2px; }
.skill{ position:relative; display:flex; flex-direction:column; padding:26px 28px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); background:var(--sheet); min-height:200px; }
a.skill:hover{ background:var(--mark-soft); color:var(--ink); }
.skill-no{ position:absolute; right:18px; top:14px; font-family:var(--f-en); font-style:italic; color:var(--ink-3); font-size:.95rem; }
.skill-word{ font-family:var(--f-en); font-weight:700; font-size:2.5rem; line-height:1.1; letter-spacing:-.02em; }
.skill-gloss{ margin-top:6px; font-family:var(--f-head); font-weight:700; font-size:1.15rem; }
.skill-gloss .pos{ font-weight:400; font-size:1rem; margin-right:.3em; }
.skill-what{ font-family:var(--f-ui); color:var(--ink-2); font-size:.95rem; margin-top:2px; line-height:1.75; }
.skill-count{ margin-top:auto; padding-top:14px; font-family:var(--f-ui); font-size:.86rem; color:var(--ink-3); }
.skill-count b{ font-family:var(--f-en); color:var(--ink); font-size:1.05rem; }
.skills.is-helpers .skill{ min-height:0; }
.skills.is-helpers .skill-word{ font-size:1.7rem; }

/* ---------- 30 天路线：月历格 ---------- */

.cal{ list-style:none; margin:-2px 0 0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-left:1px solid var(--line); border-top:1px solid var(--line); background:var(--sheet); }
.day{ display:flex; flex-direction:column; gap:2px; height:100%; min-height:118px; padding:10px 12px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); position:relative; }
.day:hover{ background:var(--mark-soft); color:var(--ink); }
.day-no{ font-family:var(--f-en); font-weight:700; font-size:1.55rem; line-height:1.1; }
.day-skill{ font-family:var(--f-en); font-style:italic; font-size:.84rem; color:var(--ink-3); position:absolute; right:12px; top:12px; }
.day-title{ font-family:var(--f-ui); font-size:.93rem; line-height:1.5; margin-top:auto; padding-top:18px; }
.day.is-done,.day.is-done:hover{ background:var(--mark); color:var(--on-mark); }
.day.is-done .day-skill{ color:var(--on-mark); opacity:.7; }
.day.is-done .day-no::after{ content:' ✓'; font-size:.7em; }
.day.is-today{ box-shadow:inset 0 0 0 3px var(--ink); }
.cal-legend{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:12px; font-family:var(--f-ui); font-size:.88rem; color:var(--ink-2); }
.cal-legend i{ display:inline-block; width:1em; height:1em; vertical-align:-.15em; margin-right:.4em; border:1px solid var(--line); background:var(--sheet); }
.cal-legend .k-done{ background:var(--mark); border-color:var(--mark); }
.cal-legend .k-today{ box-shadow:inset 0 0 0 2px var(--ink); }

/* ---------- 问答：细线手风琴 ---------- */

.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ display:flex; gap:.8em; align-items:baseline; padding:16px 12px; cursor:pointer; list-style:none; font-family:var(--f-head); font-weight:700; font-size:1.1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:'Q'; font-family:var(--f-en); font-style:italic; font-weight:400; color:var(--ink-3); }
.faq summary::after{ content:'+'; margin-left:auto; font-family:var(--f-en); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after{ content:'−'; }
.faq summary:hover{ background:var(--mark-soft); }
.faq p{ margin:0; padding:0 12px 18px 2.6em; color:var(--ink-2); max-width:52em; }

/* ---------- 步骤：带大号序号的细线清单 ---------- */

.steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.steps li{ counter-increment:step; display:grid; grid-template-columns:3.2rem minmax(0,1fr); align-items:baseline; padding:14px 12px; border-bottom:1px solid var(--line); }
.steps li::before{ content:counter(step); font-family:var(--f-en); font-weight:700; font-size:1.7rem; line-height:1.2; }

/* ---------- 页头：程度页、技能页、词库页、起步页、术语页 ---------- */

.page-head{ display:grid; grid-template-columns:auto minmax(0,1fr) 360px; gap:0 40px; align-items:start; padding-block:26px 34px; border-bottom:2px solid var(--rule); }
.page-code{ width:fit-content; font-family:var(--f-en); font-weight:700; font-size:clamp(4rem,8vw,6.8rem); line-height:.95; letter-spacing:-.04em; white-space:nowrap; background:linear-gradient(var(--mark),var(--mark)) left 84%/100% .2em no-repeat; }
.page-code.is-word{ font-size:clamp(3.2rem,6.4vw,5.2rem); letter-spacing:-.03em; line-height:1.05; }
.page-head h1{ font-size:2.1rem; margin-top:.2em; }
.page-lead{ margin:6px 0 16px; color:var(--ink-2); max-width:36em; }
.pbar-wrap{ display:flex; align-items:center; gap:12px; max-width:440px; font-family:var(--f-ui); font-size:.86rem; color:var(--ink-2); }
.pbar{ flex:1; height:10px; border:1px solid var(--ink); background:var(--sheet); }
.pbar span{ display:block; height:100%; width:0; background:var(--mark); transition:width .3s; }
.usage{ position:relative; border:1px solid var(--ink); background:var(--sheet); padding:20px 20px 12px; margin-top:14px; }
.usage > .label{ position:absolute; left:14px; top:-.85em; }
.usage ul{ margin:0; padding-left:1.2em; font-family:var(--f-ui); font-size:.97rem; }
.usage li{ margin:.2em 0; }
.usage p{ margin:0 0 .5em; font-family:var(--f-ui); font-size:.97rem; }
.jump{ display:flex; flex-wrap:wrap; gap:4px 26px; padding:14px 0; border-bottom:1px solid var(--line); font-family:var(--f-ui); font-size:.95rem; }
.jump a{ color:var(--ink); text-decoration:none; }
.jump a i{ font-family:var(--f-en); margin-right:.3em; }

/* 一组课文：粗线标题 + 两栏书目录 */
.group{ padding-top:44px; scroll-margin-top:calc(var(--header-h) + 8px); }
.group-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; padding-bottom:10px; border-bottom:2px solid var(--rule); }
.group-head h2{ font-size:1.45rem; }
.group-head h2 .en{ font-size:1.9rem; letter-spacing:-.02em; margin-right:.25em; }
.group-head p{ margin:0; font-family:var(--f-ui); color:var(--ink-2); font-size:.95rem; }
.group-head .count{ margin-left:auto; font-family:var(--f-ui); font-size:.88rem; color:var(--ink-3); }
.group-note{ margin:14px 0 0; font-family:var(--f-ui); font-size:.95rem; color:var(--ink-2); }
.toc-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:56px; }
.toc-row{ display:flex; align-items:baseline; gap:14px; height:100%; padding:13px 8px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.toc-row:hover{ background:var(--mark-soft); color:var(--ink); }
.toc-no{ flex:none; width:2.1em; font-family:var(--f-en); font-weight:700; font-size:1.35rem; line-height:1.2; color:var(--ink-3); font-variant-numeric:tabular-nums lining-nums; }
.toc-title{ font-family:var(--f-ui); font-weight:500; font-size:1.02rem; line-height:1.55; }
.toc-title i{ font-family:var(--f-en); font-weight:400; color:var(--ink-3); margin-left:.5em; font-size:.97em; }
.toc-dots{ flex:1; min-width:16px; border-bottom:2px dotted var(--line); transform:translateY(-.3em); }
.toc-tick{ flex:none; display:none; white-space:nowrap; font-family:var(--f-ui); font-size:.84rem; font-weight:700; color:var(--go); }
.toc-row.is-done .toc-no{ color:var(--on-mark); background:var(--mark); text-align:center; }
.toc-row.is-done .toc-tick{ display:block; }

/* ---------- 术语小词典 ---------- */

.glossary-filter{ display:block; width:100%; max-width:560px; margin:24px 0 0; font:inherit; font-family:var(--f-ui); min-height:48px; padding:0 16px; border:2px solid var(--ink); background:var(--sheet); color:var(--ink); }
.glossary-filter:focus{ outline:none; box-shadow:inset 0 -6px var(--mark); }
.gloss-list{ margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:56px; }
.gloss-item{ padding:14px 8px; border-bottom:1px solid var(--line); }
.gloss-item dt{ font-family:var(--f-head); font-weight:700; font-size:1.15rem; }
.gloss-item dt small{ font-family:var(--f-en); font-style:italic; font-size:.95rem; margin-left:.4em; }
.gloss-item dd{ margin:2px 0 0; color:var(--ink-2); font-size:1rem; line-height:1.75; }
.gloss-eg{ display:block; margin-top:4px; padding-left:12px; border-left:3px solid var(--mark); font-size:.95rem; color:var(--ink-2); }

/* ---------- 笔记页：三栏 ---------- */

.read-progress{ position:fixed; top:0; left:0; right:0; height:4px; z-index:60; pointer-events:none; }
.read-progress > span{ display:block; height:100%; width:0; background:var(--mark); }
.note-layout{ display:grid; grid-template-columns:240px minmax(0,1fr) 200px; gap:32px; align-items:start; padding-block:14px 0; }
.note-side-inner,.note-toc-inner{ position:sticky; top:calc(var(--header-h) + 20px); max-height:calc(100vh - var(--header-h) - 40px); overflow:auto; scrollbar-width:thin; }
.side-title{ font-family:var(--f-en); font-weight:700; font-size:1.35rem; line-height:1.2; padding-bottom:8px; border-bottom:2px solid var(--rule); }
.side-title small{ display:block; font-family:var(--f-ui); font-size:.8rem; margin-top:2px; }
.side-list{ list-style:none; margin:0; padding:0; }
.side-item{ display:flex; align-items:baseline; gap:8px; padding:7px 6px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink-2); font-family:var(--f-ui); font-size:.9rem; line-height:1.5; }
.side-item:hover{ background:var(--mark-soft); color:var(--ink); }
.side-no{ flex:none; width:1.6em; font-family:var(--f-en); font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums lining-nums; }
.side-text{ flex:1; min-width:0; }
.side-tick{ display:none; color:var(--go); font-weight:700; font-size:.85em; }
.side-item.is-done .side-tick{ display:inline; }
.side-item.is-active,.side-item.is-active:hover{ background:var(--mark); color:var(--on-mark); font-weight:700; }
.side-item.is-active .side-no,.side-item.is-active .side-tick{ color:var(--on-mark); }
.side-back{ display:block; margin-top:12px; font-family:var(--f-ui); font-size:.86rem; color:var(--ink-3); text-decoration:none; }
.m-toc{ display:none; }

.note-main{ min-width:0; background:var(--sheet); border:1px solid var(--line); border-top:4px solid var(--rule); padding:0 48px 44px; }
.note-running{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); font-family:var(--f-en); font-style:italic; font-size:.95rem; color:var(--ink-3); }
.note-running b{ font-style:normal; font-weight:700; color:var(--ink); }
.note-h1{ font-size:clamp(1.75rem,3vw,2.25rem); margin:26px 0 2px; overflow-wrap:anywhere; }
.note-sub{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .6em; font-family:var(--f-en); font-size:1.4rem; font-weight:600; line-height:1.5; }
.note-sub .pos{ font-size:1rem; font-weight:400; }
.note-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:14px 0 30px; padding:10px 0; border-block:1px solid var(--line); font-family:var(--f-ui); font-size:.88rem; color:var(--ink-3); }
.chip{ border:1px solid var(--line); padding:0 .7em; line-height:1.7; color:var(--ink-2); }
.mini-btn{ display:inline-flex; align-items:center; gap:.5em; min-height:34px; padding:0 12px; background:transparent; border:1px solid var(--ink); font-family:var(--f-ui); font-size:.88rem; font-weight:500; cursor:pointer; }
.mini-btn:hover{ background:var(--mark-soft); }
.mini-btn.is-on{ background:var(--mark); border-color:var(--mark); color:var(--on-mark); }
.note-meta .done-btn{ margin-left:auto; }
.done-box{ width:14px; height:14px; border:2px solid currentColor; display:inline-grid; place-items:center; font-size:11px; line-height:1; }
.done-btn.is-done,.done-btn.is-done:hover{ background:var(--go); border-color:var(--go); color:var(--sheet); }
.done-btn.is-done .done-box::after{ content:'✓'; }
.done-bottom{ display:flex; justify-content:center; margin-top:36px; }

/* 「这课学什么」：带标签的框（render.php 的 en_wrap_overview） */
.overview{ position:relative; border:1px solid var(--ink); padding:22px 24px 10px; margin:0 0 8px; }
.overview > .label{ position:absolute; left:16px; top:-.85em; }
.overview ul{ margin:0 0 .5em; padding-left:1.2em; }
.overview li{ margin:.35em 0; font-size:1rem; line-height:1.8; }

/* ---------- 笔记正文（markdown.php 的输出） ---------- */

.note-body{ font-size:1.0625rem; line-height:1.9; }
.note-body > :first-child{ margin-top:0; }
.note-body h2{ font-size:1.45rem; margin:46px 0 14px; padding-top:14px; border-top:2px solid var(--rule); scroll-margin-top:calc(var(--header-h) + 20px); }
.note-body h3{ font-size:1.14rem; font-family:var(--f-ui); margin:30px 0 8px; display:flex; align-items:baseline; gap:.55em; scroll-margin-top:calc(var(--header-h) + 20px); }
.note-body h3::before{ content:''; flex:none; width:.55em; height:.55em; background:var(--ink); transform:translateY(-.08em); }
.note-body p{ margin:0 0 1em; }
.note-body ul,.note-body ol{ margin:0 0 1.1em; padding-left:1.4em; }
.note-body li{ margin:.35em 0; }
.note-body li::marker{ font-family:var(--f-en); font-weight:700; }
/* 有序列表自己编号：解析器会把「中间空一行」的 1. 2. 3. 拆成好几个相邻的 <ol>，这样写编号才会接着往下数 */
.note-body ol{ list-style:none; counter-reset:oli; padding-left:1.9em; }
.note-body ol + ol{ counter-reset:none; }
.note-body ol > li{ counter-increment:oli; position:relative; }
.note-body ol > li::before{ content:counter(oli) '.'; position:absolute; left:-2.2em; width:1.8em; text-align:right; font-family:var(--f-en); font-weight:700; }
.note-body strong{ font-weight:700; background:var(--mark-soft); padding:.04em .18em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.note-body td strong,.note-body th strong{ background:none; padding:0; box-shadow:inset 0 -.38em var(--mark-soft); }
.note-body em{ font-family:var(--f-en); }
.note-body hr{ border:0; border-top:1px solid var(--line); margin:2em 0; }
.note-body hr.h3-rule,.note-body .sec-divider,.note-body .sub-divider{ display:none; }
.note-body code{ font-family:var(--f-en); background:var(--bg); padding:0 .35em; border:1px solid var(--line); font-size:.95em; }
.note-body pre{ background:var(--bg); border:1px solid var(--line); padding:14px 18px; overflow-x:auto; line-height:1.7; }
.note-body pre code{ background:none; border:0; padding:0; }
.note-body blockquote{ margin:.6em 0 1.1em; padding:2px 0 2px 16px; border-left:3px solid var(--line); color:var(--ink-2); font-family:var(--f-ui); font-size:.97rem; }
.note-body blockquote p{ margin:.4em 0; }

.table-scroll{ overflow-x:auto; margin:1.1em 0 1.6em; -webkit-overflow-scrolling:touch; }
table.vocab{ width:100%; min-width:460px; border-collapse:collapse; font-size:1rem; line-height:1.65; border-top:2px solid var(--rule); border-bottom:2px solid var(--rule); }
table.vocab th{ text-align:left; padding:8px 14px 8px 0; font-family:var(--f-ui); font-size:.8rem; font-weight:700; letter-spacing:.1em; color:var(--ink-3); border-bottom:1px solid var(--ink); white-space:nowrap; }
table.vocab td{ padding:10px 14px 10px 0; border-top:1px solid var(--line); vertical-align:baseline; font-family:var(--f-ui); }
table.vocab td.is-en{ font-family:var(--f-en); font-size:1.05rem; }
table.vocab td.is-hw{ font-weight:700; font-size:1.14rem; }      /* 词条：词汇表第一栏的英文单词（app.js 标记） */
table.vocab td.ipa{ font-family:var(--f-ipa); color:var(--ink-3); white-space:nowrap; }
table.vocab tr:hover td{ background:color-mix(in srgb,var(--mark-soft) 45%,transparent); }
/* 朗读按钮固定在单元格右上角，不跟着文字折到下一行 */
table.vocab td.has-say{ position:relative; padding-right:2.6em; }
table.vocab td.has-say > .say{ position:absolute; right:.6em; top:.72em; margin:0; }

.example-card{ padding:8px 0 8px 16px; margin:10px 0; border-left:3px solid var(--mark); }
.example-card .jp{ font-family:var(--f-en); font-size:1.2rem; line-height:1.6; }
.example-card .cn{ font-family:var(--f-ui); color:var(--ink-2); font-size:.97rem; }

/* 提示框：框线 + 贴在线上的标签（标签文字由 CSS 给，md 不用改） */
.callout{ position:relative; border:1px solid var(--ink); padding:20px 20px 6px; margin:1.9em 0 1.4em; }
.callout::before{ content:'小提示'; position:absolute; left:14px; top:-.85em; background:var(--ink); color:var(--sheet); font-family:var(--f-ui); font-size:.75rem; font-weight:700; letter-spacing:.1em; line-height:1.7; padding:0 .7em; }
.callout p{ margin:0 0 .7em; font-size:1rem; }
.callout-note::before{ content:'重点'; }
.callout-warn{ border-color:var(--bad); }
.callout-warn::before{ content:'常见错误'; background:var(--bad); }

/* 听力对话稿：英文行（带朗读）和下面的中文译文贴在一起 */
.note-body p.has-say{ margin-bottom:.1em; }
.note-body p.has-say + blockquote{ margin-top:0; }

/* 术语小提示 */
.gl{ border-bottom:2px dotted var(--ink-3); cursor:help; color:inherit; }
.gl:hover,.gl:focus{ background:var(--mark-soft); outline:none; }
.gl-pop{ position:absolute; z-index:300; max-width:min(320px,calc(100vw - 20px)); background:var(--ink); color:var(--sheet); padding:10px 14px; font-family:var(--f-ui); font-size:.9rem; line-height:1.65; display:flex; flex-direction:column; gap:2px; }
.gl-pop b{ color:var(--mark); }
html[data-mode="dark"] .gl-pop b{ color:var(--on-mark); box-shadow:inset 0 -.5em var(--mark); width:fit-content; }

/* 遮住中文 */
body.hide-zh .zh-mask:not(.is-revealed){ filter:blur(6px); user-select:none; transition:filter .2s; }
body.hide-zh .zh-mask{ cursor:pointer; }

/* ---------- 测验（class 名跟 quiz.js 对应，勿改名） ---------- */

.quiz-section{ margin-top:54px; display:flex; flex-direction:column; gap:12px; }
.quiz-heading{ font-size:1.45rem; padding-top:14px; border-top:2px solid var(--rule); }
.quiz-lead{ margin:0 0 6px; color:var(--ink-2); font-family:var(--f-ui); font-size:.97rem; }
.quiz-box{ border:2px solid var(--ink); }
.quiz-box > summary{ display:flex; align-items:center; gap:14px; padding:12px 18px; background:var(--ink); color:var(--sheet); cursor:pointer; list-style:none; font-family:var(--f-ui); font-weight:700; }
.quiz-box > summary::-webkit-details-marker{ display:none; }
.quiz-box > summary .en{ font-style:italic; font-weight:600; font-size:1.25rem; }
.quiz-box > summary::after{ content:'+'; font-family:var(--f-en); font-size:1.4rem; line-height:1; margin-left:auto; }
.quiz-box[open] > summary::after{ content:'−'; }
.quiz-box-count{ font-weight:400; font-size:.86rem; opacity:.75; margin-left:.8em; }
.quiz-box-score{ margin-left:auto; background:var(--mark); color:var(--on-mark); padding:0 .8em; font-family:var(--f-en); font-weight:700; }
.quiz-box > summary:has(.quiz-box-score:not([hidden]))::after{ margin-left:0; }
.quiz-box-body{ padding:6px 24px 24px; }
.quiz-question{ padding:20px 0; border-bottom:1px solid var(--line); }
.quiz-question-text{ font-weight:700; margin-bottom:10px; line-height:1.7; }
.quiz-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; counter-reset:opt; }
.quiz-option{ display:flex; align-items:center; gap:12px; min-height:48px; text-align:left; padding:6px 14px 6px 6px; background:var(--sheet); border:1px solid var(--ink-3); color:var(--ink); font-family:var(--f-body); font-size:1.05rem; line-height:1.5; cursor:pointer; }
.quiz-option::before{ counter-increment:opt; content:counter(opt,upper-alpha); flex:none; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--ink-3); font-family:var(--f-en); font-weight:700; font-size:.95rem; }
.quiz-option:hover:not(:disabled){ border-color:var(--ink); background:var(--mark-soft); }
.quiz-option.is-selected{ border-color:var(--ink); background:var(--mark); color:var(--on-mark); }
.quiz-option.is-selected::before{ background:var(--on-mark); color:var(--mark); border-color:var(--on-mark); }
.quiz-option.is-correct{ border-color:var(--go); background:var(--go-soft); font-weight:700; }
.quiz-option.is-correct::before{ background:var(--go); border-color:var(--go); color:var(--sheet); }
.quiz-option.is-wrong{ border-color:var(--bad); background:var(--bad-soft); }
.quiz-option.is-wrong::before{ background:var(--bad); border-color:var(--bad); color:var(--sheet); }
.quiz-option:disabled{ cursor:default; color:var(--ink); }
.quiz-fill-input{ width:100%; min-height:48px; font:inherit; padding:0 14px; border:1px solid var(--ink-3); background:var(--sheet); color:var(--ink); }
.quiz-fill-input:focus{ outline:none; border-color:var(--ink); box-shadow:inset 0 -6px var(--mark); }
.quiz-fill-input.is-correct{ border-color:var(--go); background:var(--go-soft); font-weight:700; }
.quiz-fill-input.is-wrong{ border-color:var(--bad); background:var(--bad-soft); }
.quiz-correct-answer{ margin-top:8px; color:var(--go); font-weight:700; }
.quiz-reorder-picked{ min-height:52px; padding:8px; margin-bottom:8px; border:1px dashed var(--ink-3); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.quiz-reorder-picked.is-correct{ border-style:solid; border-color:var(--go); background:var(--go-soft); }
.quiz-reorder-picked.is-wrong{ border-style:solid; border-color:var(--bad); background:var(--bad-soft); }
.quiz-reorder-pool{ display:flex; flex-wrap:wrap; gap:8px; }
.quiz-reorder-chip{ min-height:40px; padding:4px 14px; border:1px solid var(--ink-3); background:var(--sheet); color:var(--ink); font-family:var(--f-body); font-size:1.05rem; cursor:pointer; }
.quiz-reorder-chip:hover:not(:disabled){ border-color:var(--ink); background:var(--mark-soft); }
.quiz-reorder-chip.is-picked{ background:var(--mark); border-color:var(--mark); color:var(--on-mark); }
.quiz-reorder-chip:disabled{ cursor:default; }
.quiz-reorder-hint{ color:var(--ink-3); font-family:var(--f-ui); font-size:.9rem; }
.quiz-explanation{ margin-top:10px; padding:2px 0 2px 14px; border-left:3px solid var(--mark); font-family:var(--f-ui); font-size:.95rem; color:var(--ink-2); line-height:1.75; }
.quiz-page-nav{ display:flex; gap:6px; justify-content:center; margin:18px 0 0; flex-wrap:wrap; }
.quiz-page-btn{ min-width:38px; height:38px; border:1px solid var(--ink-3); background:var(--sheet); color:var(--ink); font-family:var(--f-en); font-weight:700; cursor:pointer; }
.quiz-page-btn:hover:not(:disabled){ border-color:var(--ink); background:var(--mark-soft); }
.quiz-page-btn.is-active{ background:var(--ink); border-color:var(--ink); color:var(--sheet); }
.quiz-page-btn:disabled{ opacity:.4; cursor:default; }
.quiz-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.quiz-submit:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- 上一课 / 下一课 ---------- */

.note-nav{ display:grid; grid-template-columns:1fr 1fr; margin-top:44px; border-block:2px solid var(--rule); }
.note-nav-link{ display:flex; flex-direction:column; padding:14px 16px; text-decoration:none; color:var(--ink); font-family:var(--f-ui); font-weight:700; line-height:1.5; }
.note-nav-link + .note-nav-link{ border-left:1px solid var(--line); text-align:right; }
a.note-nav-link:hover{ background:var(--mark-soft); color:var(--ink); }
.note-nav-link.is-disabled{ color:var(--ink-3); }
.note-nav-dir{ font-family:var(--f-en); font-style:italic; font-weight:400; color:var(--ink-3); font-size:.95rem; }

/* 右栏：这一课的内容 */
.toc-head{ font-family:var(--f-ui); font-size:.78rem; letter-spacing:.14em; color:var(--ink-3); padding-bottom:8px; border-bottom:2px solid var(--rule); margin-bottom:6px; }
.toc-link{ display:block; padding:5px 8px; font-family:var(--f-ui); font-size:.88rem; line-height:1.5; color:var(--ink-2); text-decoration:none; border-left:3px solid transparent; }
.toc-link.is-sub{ padding-left:20px; font-size:.84rem; color:var(--ink-3); }
.toc-link:hover{ background:var(--mark-soft); color:var(--ink); }
.toc-link.is-current{ border-left-color:var(--ink); background:var(--mark-soft); color:var(--ink); font-weight:700; }

/* ---------- 搜索浮层 ---------- */

.search-overlay{ position:fixed; inset:0; z-index:200; background:color-mix(in srgb,var(--bg) 82%,transparent); display:flex; justify-content:center; align-items:flex-start; padding:9vh 16px 0; }
.search-panel{ width:min(680px,100%); background:var(--sheet); border:2px solid var(--ink); }
.search-input{ width:100%; font:inherit; font-size:1.15rem; padding:16px 20px; border:0; border-bottom:2px solid var(--ink); background:transparent; color:var(--ink); }
.search-input:focus{ outline:none; box-shadow:inset 0 -6px var(--mark); }
.search-results{ max-height:56vh; overflow-y:auto; }
.search-group{ padding:12px 20px 4px; font-family:var(--f-ui); font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--ink-3); }
.search-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 20px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); line-height:1.5; }
.search-row:hover{ background:var(--mark-soft); color:var(--ink); }
.search-main b{ font-family:var(--f-en); font-size:1.1rem; margin-right:.3em; }
.search-sub{ font-family:var(--f-ui); color:var(--ink-3); font-size:.84rem; white-space:nowrap; }
.search-empty{ padding:22px 20px; font-family:var(--f-ui); color:var(--ink-3); }
.search-hint{ padding:8px 20px; font-family:var(--f-ui); font-size:.8rem; color:var(--ink-3); }

/* ---------- 页尾 ---------- */

.site-foot{ margin-top:72px; border-top:2px solid var(--rule); background:var(--sheet); }
.site-foot .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 24px; padding-block:18px 26px; font-family:var(--f-ui); font-size:.86rem; color:var(--ink-3); }

/* ---------- 响应式 ---------- */

@media (max-width:1180px){
  .note-layout{ grid-template-columns:230px minmax(0,1fr); }
  .note-toc{ display:none; }
  .hero-inner{ grid-template-columns:minmax(0,1fr) 280px; gap:0 36px; }
  .page-head{ grid-template-columns:auto minmax(0,1fr); }
  .page-head .usage{ grid-column:1 / -1; margin-top:30px; }
  .index-row{ grid-template-columns:8rem 9.5rem minmax(0,1fr) 2rem; }
  .index-row .index-count{ display:none; }
  .index.is-compact .index-row{ grid-template-columns:7rem minmax(0,1fr) 2rem; }
  .cal{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:900px){
  .topbar-inner{ flex-wrap:wrap; gap:0 14px; padding-top:8px; }
  .topnav{ order:3; width:100%; gap:22px; overflow-x:auto; padding:6px 0 10px; scrollbar-width:none; }
  .topnav::-webkit-scrollbar{ display:none; }
  .hero-inner{ grid-template-columns:1fr; padding-bottom:36px; }
  .hero-aside{ border-left:0; padding:30px 0 0; }
  .note-layout{ grid-template-columns:minmax(0,1fr); }
  .note-side{ display:none; }
  .note-main{ padding:0 22px 32px; }
  .m-toc{ display:block; border-bottom:1px solid var(--line); }
  .m-toc > summary{ cursor:pointer; padding:10px 0; font-family:var(--f-ui); font-weight:700; font-size:.92rem; }
  .m-toc[open]{ padding-bottom:12px; }
  .m-toc .side-title{ display:none; }
  .note-running{ display:none; }
  /* 栏数多的词汇表在手机上左右滑动看，不把中文挤成一个字一行 */
  table.vocab:has(th:nth-child(4)){ min-width:640px; }
  table.vocab:has(th:nth-child(5)){ min-width:780px; }
  .skills{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cal{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .toc-list,.gloss-list{ grid-template-columns:1fr; }
  .index-row{ grid-template-columns:6.4rem minmax(0,1fr) 1.4rem; gap:0 16px; padding:16px 4px; }
  .index-code{ font-size:1.75rem; }
  .index-can{ grid-column:2 / 3; font-size:.9rem; }
  .index-go{ grid-row:1; grid-column:3; }
  .runhead{ flex-direction:column-reverse; gap:0; }
  .thumbs{ margin-left:0; width:100%; }
  .thumb{ flex:1; min-width:0; padding-inline:4px; }
  .thumbs-label{ display:none; }
}
@media (max-width:640px){
  :root{ --gutter:16px; --header-h:54px; }
  .brand-ipa{ display:none; }
  .hero h1,.hero-lead,.hero-eg,.hero-actions,.hero-resume{ margin-left:0; }
  .hero h1{ display:block; }
  .sense-no{ display:none; }
  .headword-side{ font-size:1.05rem; }
  .hero-actions .btn{ width:100%; }
  .section{ padding-top:44px; }
  .section-head p{ margin-left:0; width:100%; }
  .skills{ grid-template-columns:1fr; }
  .skill{ min-height:0; }
  .cal{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-head{ grid-template-columns:1fr; }
  .note-main{ padding:0 16px 28px; }
  .quiz-options{ grid-template-columns:1fr; }
  .quiz-box-body{ padding:6px 14px 18px; }
  .note-meta .done-btn{ margin-left:0; }
  .note-nav{ grid-template-columns:1fr; }
  .note-nav-link + .note-nav-link{ border-left:0; border-top:1px solid var(--line); text-align:left; }
  .steps li{ grid-template-columns:2.4rem minmax(0,1fr); padding-inline:4px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }
@media print{
  .topbar,.runhead,.note-side,.note-toc,.m-toc,.note-nav,.site-foot,.say,.read-progress,.done-bottom,.note-meta .mini-btn,.search-overlay{ display:none !important; }
  .note-layout{ display:block; padding:0; }
  .note-main{ border:0; padding:0; }
  body{ background:#fff; }
}