/* 共用阅读样式：正文限宽，图表独立滚动，目录不挤占手机正文。 */
:root {
  --ink:#202624; --muted:#64716b; --faint:#87918d; --rule:#dce4df;
  --paper:#ffffff; --accent:#176e61; --success:#24794d; --error:#ae403d; --warn:#8d641c;
  --band-a:#f6f0df; --band-b:#eaf0f8; --band-c:#e8f3ed;
  --sans:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC",-apple-system,system-ui,sans-serif;
  --serif:"Songti SC","Noto Serif CJK SC",Georgia,serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:2rem; }
body { max-width:52rem; margin:auto; padding:2.5rem 1.5rem 4rem; color:var(--ink); background:var(--paper); font:17px/1.85 var(--sans); letter-spacing:0; }
body.lesson { max-width:78rem; }
a { color:var(--accent); text-underline-offset:3px; overflow-wrap:anywhere; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
button,input { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none!important; }
h1,h2,h3,p,li,td,th,figcaption,summary { overflow-wrap:anywhere; }
h1 { font-size:2rem; line-height:1.4; margin:.5rem 0 .8rem; }
h2 { font-size:1.35rem; line-height:1.5; margin:2.6rem 0 1rem; padding-bottom:.65rem; border-bottom:1px solid var(--rule); }
h3 { font-size:1.08rem; line-height:1.6; margin:1.7rem 0 .6rem; }
p { margin:.9rem 0; }
ul,ol { padding-left:1.4rem; }
li { margin:.45rem 0; }
strong { font-weight:650; }
code,.mono { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.86em; background:#f1f5f2; padding:.12em .3em; border-radius:3px; overflow-wrap:anywhere; }
.masthead { max-width:53rem; border-top:4px solid var(--accent); border-bottom:1px solid var(--rule); padding:1.2rem 0 1.5rem; margin:0 0 1.8rem; }
.masthead .course { font-size:.8rem; color:var(--accent); font-weight:650; }
.masthead .goal { font-size:1rem; color:var(--muted); margin:0; }
.lessonnav { font-size:.84rem; margin-top:1rem; color:var(--muted); line-height:1.9; }
.course-sequence { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.8rem; }
.course-layout { display:grid; grid-template-columns:12rem minmax(0,1fr); gap:2.5rem; align-items:start; }
.course-content { min-width:0; max-width:53rem; }
.lesson-toc { position:sticky; top:1.5rem; max-height:calc(100dvh - 3rem); overflow:auto; font-size:.83rem; border-right:1px solid var(--rule); padding-right:1rem; }
.lesson-toc summary { font-weight:650; padding:.5rem 0; cursor:pointer; }
.lesson-toc ol { padding-left:1.15rem; margin:.4rem 0; }
.lesson-toc a { color:var(--muted); text-decoration:none; display:block; padding:.22rem 0; }
.lesson-toc a:hover,.lesson-toc a[aria-current="location"] { color:var(--accent); }
.lede { font-size:1.12rem; line-height:1.8; }
.note { padding:.3rem 0 .3rem 1rem; border-left:3px solid var(--rule); color:var(--muted); font-size:.93rem; margin:1.3rem 0; }
.callout { background:#eff6f3; border-left:3px solid var(--accent); padding:1rem 1.2rem; margin:1.4rem 0; }
.evidence { border-left:3px solid #496e9d; padding:.4rem 0 .4rem 1.1rem; margin:1.5rem 0; }
.evidence blockquote { margin:.5rem 0; font-family:var(--serif); font-size:1.1rem; }
.evidence-label,.tag { font-size:.78rem; color:var(--muted); font-weight:600; }
.evidence cite { font-style:normal; font-size:.84rem; }
.table-scroll { max-width:100%; overflow-x:auto; margin:1.4rem 0; scrollbar-width:thin; }
.table-scroll:focus-visible { outline:2px solid var(--accent); }
table { width:100%; border-collapse:collapse; margin:1.3rem 0; font-size:.88rem; line-height:1.7; }
.table-scroll table { margin:0; min-width:32rem; }
th { text-align:left; background:#f2f6f3; border-bottom:2px solid #b9cac0; padding:.7rem .75rem; vertical-align:top; }
td { border-bottom:1px solid var(--rule); padding:.7rem .75rem; vertical-align:top; }
tbody tr:last-child td { border-bottom:1px solid #b9cac0; }
td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; }
figure { margin:1.6rem 0; max-width:100%; }
figure img,figure svg { display:block; width:100%; height:auto; }
.diagram-scroll { overflow-x:auto; }
.diagram-scroll img,.diagram-scroll svg { min-width:620px; }
figcaption { font-size:.8rem; color:var(--muted); line-height:1.6; margin:.7rem 0 0; }
.flow-line { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0; }
.flow-line li { flex:1 1 7rem; margin:0; padding:.7rem .9rem; background:#eff4f1; border-bottom:2px solid #a5c4b5; font-size:.9rem; }
.flow-line li:not(:last-child)::after { content:" →"; color:var(--accent); }
.comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin:1.4rem 0; }
.comparison>div { padding-top:.5rem; border-top:2px solid var(--rule); min-width:0; }
.comparison h3 { margin:.5rem 0; }
.scenario { margin:1.5rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1rem 0; }
.scenario-options { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.scenario-options button { border:1px solid var(--rule); border-radius:4px; background:#fff; padding:.55rem .8rem; color:var(--muted); font-size:.87rem; }
.scenario-options button[aria-selected="true"] { background:var(--accent); color:#fff; border-color:var(--accent); }
.scenario-panel { min-width:0; }
.scenario-panel h3 { margin-top:.5rem; }
.formula { padding:1rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font-size:1.05rem; font-variant-numeric:tabular-nums; }
.calculator { border:1px solid var(--rule); border-radius:6px; padding:1.2rem; margin:1.4rem 0; }
.calc-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem; }
.calc-fields label { font-size:.85rem; color:var(--muted); }
.calc-fields input { display:block; width:100%; margin-top:.35rem; border:1px solid #b5c5bc; border-radius:4px; padding:.5rem .65rem; color:var(--ink); background:#fff; }
.calc-result { margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--rule); font-variant-numeric:tabular-nums; }
.quiz { border:1px solid var(--rule); border-radius:6px; padding:1rem 1.1rem; margin:1.3rem 0; }
.qnum { font-size:.75rem; color:var(--muted); }
.qtext { font-weight:600; line-height:1.65; }
.quiz .opt { display:block; width:100%; text-align:left; color:var(--ink); background:#f7f9f7; border:1px solid var(--rule); border-radius:4px; padding:.7rem .8rem; margin:.5rem 0; font-size:.9rem; }
.quiz .opt:hover:not(:disabled) { border-color:var(--accent); }
.quiz .opt.is-correct { color:#19623c; background:#eaf5ed; border-color:var(--success); }
.quiz .opt.is-wrong { color:var(--error); background:#fbefed; border-color:var(--error); }
.quiz .opt.is-muted { opacity:.65; }
.quiz .explain { display:none; font-size:.9rem; border-top:1px solid var(--rule); padding-top:.8rem; }
.quiz.answered .explain { display:block; }
.verdict { font-weight:650; }
.verdict.ok { color:var(--success); }
.comparison > .table-scroll:only-child { grid-column:1 / -1; }
.verdict.no { color:var(--error); }
.scorebar { font-size:.85rem; color:var(--muted); margin:1.3rem 0; }
.quiz-reset { border:0; background:none; color:var(--accent); text-decoration:underline; font-size:.85rem; padding:.3rem 0; }
.ask { padding:1rem 0; border-top:2px solid var(--accent); border-bottom:1px solid var(--rule); margin:2rem 0; }
.ask h3 { margin:.3rem 0; color:var(--accent); }
.ask .why { font-size:.87rem; color:var(--muted); }
.sources,.footnote { border-top:1px solid var(--rule); margin-top:2rem; padding-top:1rem; color:var(--muted); font-size:.85rem; }
.sources h2 { border:none; font-size:1rem; margin:0 0 .8rem; }
body.card { max-width:57rem; font-size:15.5px; }
body.card h1 { font-size:1.6rem; }
.course-index h1 { margin-bottom:.8rem; }
.course-list { list-style:none; padding:0; }
.course-list li { display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:1rem; padding:1.2rem 0; margin:0; border-bottom:1px solid var(--rule); }
.course-number { font-size:1.25rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.course-list h2 { border:0; padding:0; margin:0 0 .35rem; font-size:1.1rem; }
.course-list p { font-size:.9rem; color:var(--muted); margin:0; }
@media (max-width:1000px) {
  .course-layout { grid-template-columns:minmax(0,1fr); gap:1rem; }
  .lesson-toc { position:static; max-height:none; border-right:0; border-bottom:1px solid var(--rule); padding:0 0 1rem; }
  .lesson-toc ol { columns:2; column-gap:1.5rem; }
  .masthead,.course-content { max-width:53rem; }
  body.lesson { max-width:56rem; }
}
@media (max-width:600px) {
  body { padding:1.2rem 1rem 3rem; font-size:16px; }
  h1 { font-size:1.65rem; } h2 { font-size:1.2rem; }
  .masthead { margin-bottom:1rem; }
  .lesson-toc ol { columns:1; }
  .comparison,.calc-fields { grid-template-columns:minmax(0,1fr); }
  .scenario-options button { flex:1 1 40%; }
  .flow-line { flex-direction:column; }
  .flow-line li { flex:auto; }
}
@media print {
  body,body.lesson,body.card { max-width:none; padding:0; font-size:10.5pt; line-height:1.6; }
  .course-layout { display:block; }
  .course-content { max-width:none; }
  .lesson-toc,.lessonnav,.course-sequence,.quiz-reset { display:none; }
  .table-scroll,.diagram-scroll { overflow:visible; }
  .table-scroll table { min-width:0; }
  .diagram-scroll img,.diagram-scroll svg { min-width:0; }
  .scenario-panel[hidden] { display:block!important; }
  .scenario-options { display:none; }
  figure,.quiz,.ask { break-inside:avoid; }
  h2,h3 { break-after:avoid; }
  a { color:var(--ink); }
}