:root{
  --bg:#f7f7f5; --bg-card:#ffffff; --text:#1a1a1a; --text-dim:#5a5a5a;
  --accent:#b3261e; --accent-soft:#fbe9e7; --border:#e2e0db;
  --code-bg:#1e1e1e; --code-text:#e8e8e8; --tag-bg:#1a1a1a; --tag-text:#fff;
  --warn-bg:#fff4e5; --warn-border:#e8a33d;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141414; --bg-card:#1d1d1d; --text:#eee; --text-dim:#a8a8a8;
    --accent:#ff6b5e; --accent-soft:#3a1f1c; --border:#333;
    --code-bg:#0d0d0d; --code-text:#e8e8e8; --tag-bg:#ff6b5e; --tag-text:#141414;
    --warn-bg:#332711; --warn-border:#b8802f;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.65;
}
a{color:var(--accent)}
code{background:var(--accent-soft); padding:.1em .35em; border-radius:4px; font-size:.92em}
pre.cmdblock{background:var(--code-bg); color:var(--code-text); padding:1em 1.2em; border-radius:10px; overflow-x:auto}
pre.cmdblock code{background:none; padding:0; color:inherit}

header.hero{
  padding:4rem 1.5rem 3rem; text-align:center;
  background:linear-gradient(180deg, var(--accent-soft), transparent);
  border-bottom:1px solid var(--border);
}
header.hero h1{font-size:2.1rem; margin:.2em 0}
header.hero .sub{color:var(--text-dim); max-width:640px; margin:0 auto; font-size:1.05rem}
header.hero .badges{margin-top:1.5rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
.badge{background:var(--tag-bg); color:var(--tag-text); padding:.35em .9em; border-radius:999px; font-size:.85rem}

nav.toc{
  position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--border);
  padding:.7rem 1rem; display:flex; gap:1.1rem; overflow-x:auto; font-size:.88rem; white-space:nowrap;
}
nav.toc a{color:var(--text-dim); text-decoration:none; padding:.3em 0}
nav.toc a:hover{color:var(--accent)}

main{max-width:820px; margin:0 auto; padding:0 1.3rem 4rem}

.scope-box{
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:1.4rem 1.6rem; margin:2rem 0;
}
.scope-box h2{margin-top:0; font-size:1.15rem}
.scope-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:640px){.scope-grid{grid-template-columns:1fr}}
.scope-grid .yes{border-left:3px solid #2e7d32; padding-left:.9rem}
.scope-grid .no{border-left:3px solid var(--text-dim); padding-left:.9rem; opacity:.85}

section.stage{
  background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
  padding:1.8rem 1.9rem; margin:1.6rem 0;
}
.stage-tag{
  display:inline-block; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent); padding:.25em .75em; border-radius:999px; margin-bottom:.6rem;
}
.stage-head h2{margin:.2em 0 .4em; font-size:1.4rem}
.goal{color:var(--text-dim); font-size:.95rem; border-left:3px solid var(--accent); padding-left:.9rem}

.analogy{background:var(--accent-soft); border-radius:10px; padding:.9rem 1.1rem; margin:1rem 0; font-size:.95rem}
.analogy::before{content:"💡 类比 / Analogy — "; font-weight:600}
.callout{background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:1rem 1.2rem; margin:1.2rem 0}
.callout.warn{background:var(--warn-bg); border-color:var(--warn-border)}

table{width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.92rem}
th,td{text-align:left; padding:.55em .7em; border-bottom:1px solid var(--border); vertical-align:top}
th{color:var(--text-dim); font-weight:600}
.chain-table td:first-child{font-weight:600; white-space:nowrap}

.video-embed{margin:1.4rem 0}
.video-embed .frame-wrap{position:relative; padding-bottom:56.25%; height:0; border-radius:12px; overflow:hidden}
.video-embed .frame-wrap iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0}
.video-embed .caption{font-size:.85rem; color:var(--text-dim); margin-top:.4rem}
.video-embed.missing{
  background:var(--bg); border:1px dashed var(--border); border-radius:12px; padding:1rem 1.2rem;
  color:var(--text-dim); font-size:.9rem;
}

pre.mermaid{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:1rem; overflow-x:auto}

details.self-test{
  margin-top:1.5rem; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:1rem 1.3rem;
}
details.self-test summary{cursor:pointer; font-weight:600}
details.self-test ol{padding-left:1.2em}
details.self-test li{margin:1em 0}
details.self-test details{margin-top:.4em; font-size:.92rem}
details.self-test details summary{font-weight:500; color:var(--accent)}

.quiz-q{margin:1em 0}
.quiz-opt{display:block; padding:.5em .8em; margin:.3em 0; border:1px solid var(--border); border-radius:8px; cursor:pointer}
.quiz-opt:hover{border-color:var(--accent)}
.quiz-opt.correct{border-color:#2e7d32; background:rgba(46,125,50,.12)}
.quiz-opt.wrong{border-color:var(--accent); background:var(--accent-soft)}
.quiz-explain{font-size:.88rem; color:var(--text-dim); margin-top:.5em; display:none}
.quiz-explain.show{display:block}

footer{text-align:center; padding:2.5rem 1rem 4rem; color:var(--text-dim); font-size:.88rem}
footer a{color:var(--text-dim)}