:root{
  --fg:#1a1a1a; --bg:#fbfbf9; --muted:#5c5c5c; --rule:#d8d4cc;
  --accent:#1f4e79; --accent2:#7a1f1f; --box:#eef2f7; --boxrule:#aac0d8;
  --eg:#eef5ee; --egrule:#bcd5bc; --egtag:#2d6a2d;
  --goal:#fff8e8; --goalrule:#e6d39a;
  --step:#f6f2fb; --steprule:#cbb8e0;
}
*{box-sizing:border-box}
html{font-size:18px}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC",Georgia,"Times New Roman",serif;
  line-height:1.85; text-rendering:optimizeLegibility;
}
article{max-width:840px; margin:0 auto; padding:2.5rem 1.5rem 8rem}

/* top navigation bar */
nav.topbar{max-width:840px; margin:0 auto; padding:.7rem 1.5rem; display:flex; gap:1.2rem;
  align-items:center; font-size:.9rem; border-bottom:1px solid var(--rule); flex-wrap:wrap}
nav.topbar a{color:var(--accent); text-decoration:none}
nav.topbar a:hover{text-decoration:underline}
nav.topbar .sep{color:var(--rule)}
nav.topbar .cur{color:var(--muted)}

header.chap{border-bottom:2px solid var(--accent); margin-bottom:2.2rem; padding-bottom:1rem}
header.chap.hs{border-bottom-color:var(--egtag)}
header.chap .kicker{color:var(--accent); font-size:.85rem; letter-spacing:.16em; text-transform:uppercase}
header.chap.hs .kicker{color:var(--egtag)}
h1{font-size:1.85rem; line-height:1.3; margin:.4rem 0 .2rem; font-weight:700}
h1 .en{display:block; font-size:1rem; color:var(--muted); font-weight:400; font-style:italic; margin-top:.4rem}
h2{font-size:1.32rem; margin:2.4rem 0 1rem; padding-top:.4rem; border-top:1px solid var(--rule)}
h3{font-size:1.1rem; margin:1.7rem 0 .6rem}
p{margin:1rem 0; text-align:justify}
a{color:var(--accent)}
.muted{color:var(--muted)}
em,i{font-style:italic}
strong{font-weight:700}
mjx-container[display="true"]{margin:1.2rem 0 !important}
mjx-container{overflow-x:auto; overflow-y:hidden}

/* theorem-like boxes (translation + explanation) */
.thm,.lem,.cor,.def,.prop,.remark{
  background:var(--box); border:1px solid var(--boxrule); border-left:4px solid var(--accent);
  border-radius:4px; padding:.85rem 1.2rem; margin:1.3rem 0;
}
.thm .tag,.lem .tag,.cor .tag,.def .tag,.prop .tag,.remark .tag{
  font-weight:700; color:var(--accent); margin-right:.5em;
}
.thm,.lem,.cor,.prop{font-style:normal}
.proof{margin:1rem 0 1.5rem; padding-left:1rem; border-left:2px solid var(--rule)}
.proof .qed{float:right}
.proof .ptag{font-style:italic; color:var(--muted); margin-right:.4em}

/* worked examples (green) */
.eg{background:var(--eg); border:1px solid var(--egrule); border-left:4px solid var(--egtag);
  border-radius:4px; padding:.85rem 1.15rem; margin:1.3rem 0}
.eg .tag{font-weight:700; color:var(--egtag); margin-right:.4em}

/* goal / why box (amber) */
.goal{background:var(--goal); border:1px solid var(--goalrule); border-radius:4px;
  padding:.7rem 1.1rem; margin:1.2rem 0}
.goal .tag{font-weight:700; color:#9a7d1a; margin-right:.4em}

/* step-by-step derivation (purple) */
.steps{counter-reset:step; margin:1.3rem 0; padding:0; list-style:none}
.steps>li{position:relative; background:var(--step); border:1px solid var(--steprule);
  border-radius:4px; padding:.7rem 1rem .7rem 2.6rem; margin:.6rem 0}
.steps>li::before{counter-increment:step; content:counter(step);
  position:absolute; left:.7rem; top:.7rem; width:1.4rem; height:1.4rem; border-radius:50%;
  background:var(--steprule); color:#3a2a55; font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center}
.calc{font-size:.97rem}

/* definition / vocab list */
.varlist dt{font-weight:700; margin-top:.7rem}
.varlist dd{margin:.1rem 0 0 1.4rem}

/* figures: SVG diagrams */
figure{margin:1.8rem 0; text-align:center}
figure svg{max-width:100%; height:auto; background:#fff; border:1px solid var(--rule); border-radius:4px}
figcaption{color:var(--muted); font-size:.9rem; margin-top:.6rem}

/* quick check */
.qcheck{background:#fbf6ef; border:1px dashed var(--goalrule); border-radius:4px;
  padding:.7rem 1.1rem; margin:1.4rem 0; font-size:.97rem}
.qcheck .tag{font-weight:700; color:var(--accent2); margin-right:.4em}

.fn{font-size:.9rem; color:var(--muted)}
.footnotes{margin-top:3rem; border-top:1px solid var(--rule); padding-top:1rem; font-size:.92rem}
.footnotes ol{padding-left:1.4rem}
hr{border:none; border-top:1px solid var(--rule); margin:2rem 0}
.refs{font-size:.96rem}
.refs p{margin:.55rem 0; padding-left:2em; text-indent:-2em}
table{border-collapse:collapse; margin:1.4rem auto; font-size:.96rem}
th,td{border:1px solid var(--rule); padding:.4rem .8rem; text-align:center}
caption{color:var(--muted); font-size:.9rem; margin-bottom:.4rem}
.note-zh{color:var(--muted); font-size:.92rem}

/* svg diagram helpers (used inline in figures) */
svg text{font-family:"Source Han Serif SC","Noto Serif CJK SC",Georgia,serif}