:root{
  --ink:#1B1D1A;
  --paper:#F7F5EF;
  --paper-2:#EFEDE3;
  --pine:#2E4B3D;
  --pine-deep:#1F362C;
  --pine-soft:#E5ECE7;
  --gold:#B98A2F;
  --gold-soft:#F3E9D3;
  --red:#C2472E;
  --red-soft:#F7E3DC;
  --gray:#5E635B;
  --line:#DCD7C8;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:24px;}
body{
  font-family:"Noto Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.75;font-size:16px;
}
::selection{background:var(--gold-soft);}
.serif{font-family:"Noto Serif SC",Georgia,"Songti SC",serif;}

#progressBar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--red));z-index:100;transition:width .1s linear;}

.site-nav{position:sticky;top:0;z-index:1000;background:var(--pine);color:#F7F5EF;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;box-shadow:0 2px 12px rgba(31,54,44,.18);}
.site-nav .nav-home{font-family:"Noto Serif SC",serif;font-weight:900;color:#F7F5EF;text-decoration:none;font-size:17px;display:flex;align-items:center;gap:8px;}
.site-nav .nav-home .mark{width:30px;height:30px;border-radius:8px;background:var(--gold);color:var(--pine-deep);display:grid;place-items:center;font-size:15px;font-weight:900;}
.site-nav .nav-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.site-nav .nav-links a{text-decoration:none;color:#EDEADF;font-size:14px;font-weight:500;padding:6px 14px;border-radius:6px;border:1px solid rgba(247,245,239,.22);transition:all .2s;}
.site-nav .nav-links a:hover{background:var(--gold);color:var(--pine-deep);border-color:var(--gold);}
.site-nav .nav-links a.active{background:#F7F5EF;color:var(--pine);border-color:#F7F5EF;font-weight:700;}
.main{max-width:1440px;margin:0 auto;padding:0 48px 120px;}
.content{max-width:840px;margin:0 auto;}

.lead-q{
  background:var(--gold-soft);border:1px solid #E7D7AC;border-radius:14px;
  padding:22px 26px;margin:30px 0 26px;position:relative;
}
.lead-q .tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:2px;color:#8A641D;text-transform:uppercase;margin-bottom:8px;}
.lead-q p{font-family:"Noto Serif SC",serif;font-size:19px;font-weight:700;line-height:1.7;color:#4A3A12;}
.lead-q p b{color:#6E4F12;}

.chapter{padding-top:64px;}
.ch-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px;}
.ch-num{
  flex:none;width:56px;height:56px;border-radius:12px;background:var(--pine);color:#F3E9D3;
  display:grid;place-items:center;font-family:"Noto Serif SC",serif;font-size:22px;font-weight:900;
  box-shadow:0 6px 18px rgba(46,75,61,.18);
}
.ch-title{font-family:"Noto Serif SC",serif;font-size:30px;font-weight:900;line-height:1.3;margin-bottom:4px;}
.ch-en{font-size:13px;color:var(--gray);letter-spacing:1.5px;text-transform:uppercase;}
.ch-intro{font-size:16.5px;color:var(--gray);margin:0 0 8px;line-height:1.9;}
.ch-intro b{color:var(--ink);}

.logic{background:var(--pine-soft);border:1px solid #C9D9CE;border-radius:14px;padding:24px 28px;margin:26px 0;}
.logic h4{font-family:"Noto Serif SC",serif;font-size:17px;color:var(--pine-deep);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.logic h4 .ic{width:22px;height:22px;flex:none;border-radius:6px;background:var(--pine);color:#F3E9D3;display:grid;place-items:center;font-size:12px;font-weight:900;}
.logic p{font-size:15.5px;line-height:1.95;color:#24382E;}
.logic p + p{margin-top:10px;}
.logic b{color:var(--pine-deep);}
.logic .lg{color:var(--red);font-weight:700;}

h3.sec{font-family:"Noto Serif SC",serif;font-size:22px;font-weight:900;margin:40px 0 16px;padding-top:6px;}
h3.sec::before{content:"";display:inline-block;width:10px;height:10px;background:var(--gold);border-radius:2px;margin-right:10px;}

.examples{margin:24px 0;}
.ex-block{
  border:1px solid var(--line);border-left:4px solid var(--pine);border-radius:10px;
  background:#FDFCF8;padding:16px 20px;margin-bottom:12px;
}
.ex-block .en{font-family:"Noto Serif SC",Georgia,serif;font-size:16px;font-weight:700;color:#17301F;margin-bottom:4px;}
.ex-block .en .hl{color:var(--red);}
.ex-block .zh{font-size:14px;color:var(--gray);margin-bottom:6px;}
.ex-block .why{font-size:14px;line-height:1.8;}
.ex-block .why b{color:var(--pine-deep);}
.ex-block .arrow{color:var(--gold);font-weight:700;}

.codeblock{
  background:var(--pine-deep);color:#E8EDE8;border-radius:12px;
  padding:16px 20px;margin:12px 0;overflow-x:auto;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.85;white-space:pre;
}
/* 兼容 <pre class="codeblock"><code>…</code></pre> 写法 */
pre.codeblock{
  background:var(--pine-deep);color:#E8EDE8;border-radius:12px;
  padding:16px 20px;margin:12px 0;overflow-x:auto;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.85;white-space:pre;
}
pre.codeblock code{
  font-family:inherit;background:none;color:inherit;padding:0;border-radius:0;
  font-size:inherit;line-height:inherit;
}
.codeblock .cm{color:#8FAE9C;}
.codeblock .kw{color:#E7C56B;}
.codeblock .str{color:#A9CFA8;}
.codeblock .fn{color:#D8B4E2;}
.code-cap{font-size:12.5px;color:var(--gray);margin:14px 0 4px;}

.table-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:12px;background:#FDFCF8;}
table{width:100%;border-collapse:collapse;font-size:14.5px;table-layout:fixed;}
table caption{text-align:left;font-size:13px;color:var(--gray);padding:12px 16px 4px;letter-spacing:.5px;}
th,td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.7;}
th{background:var(--pine-soft);color:var(--pine-deep);font-weight:700;font-size:13.5px;}
tbody tr:last-child td{border-bottom:none;}
td code, p code, li code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--pine-soft);color:var(--pine-deep);
  padding:1px 6px;border-radius:5px;
}

.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px;letter-spacing:.5px;}
.pill.g{background:var(--pine-soft);color:var(--pine-deep);}
.pill.o{background:var(--gold-soft);color:#8A641D;}
.pill.r{background:var(--red-soft);color:var(--red);}

.trap{background:var(--red-soft);border:1px solid #EBC3B6;border-radius:12px;padding:18px 22px;margin:26px 0;}
.trap .t-title{font-size:13px;font-weight:700;color:var(--red);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.trap .t-title::before{content:"!";width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:12px;flex:none;}
.trap p{font-size:14.5px;line-height:1.9;color:#5C2B1D;}
.trap b{color:var(--red);}

.takeaway{
  background:var(--pine-deep);color:#EDEADF;border-radius:14px;padding:22px 26px;margin:36px 0 8px;
  display:flex;gap:16px;align-items:flex-start;
}
.takeaway .tk-ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--gold);color:var(--pine-deep);display:grid;place-items:center;font-weight:900;font-size:15px;}
.takeaway b{color:var(--gold);display:block;font-size:14px;letter-spacing:1px;margin-bottom:4px;}
.takeaway p{font-size:15px;line-height:1.85;color:rgba(237,234,223,.92);}

.quizbox{border:1.5px solid var(--pine);border-radius:14px;background:#FDFCF8;overflow:hidden;margin:24px 0 8px;}
.quizbox .qb-head{background:var(--pine);color:#F3E9D3;padding:10px 18px;font-size:13.5px;font-weight:700;letter-spacing:.5px;}
.quizbox .qb-body{padding:16px 20px 18px;}
.quizbox p{font-size:14.5px;line-height:1.9;margin-bottom:10px;}
.quizbox details{margin:6px 0 14px;padding:10px 14px;background:var(--pine-soft);border-radius:10px;font-size:13.5px;line-height:1.85;}
.quizbox summary{cursor:pointer;font-weight:700;color:var(--pine-deep);outline:none;}
.quizbox details[open] summary{margin-bottom:6px;}
.quizbox details p{margin:6px 0 0;}

.pager{display:flex;justify-content:space-between;gap:16px;margin:48px 0 8px;flex-wrap:wrap;}
.pager a{
  flex:1;min-width:200px;display:block;text-align:center;
  border-radius:12px;padding:16px 18px;text-decoration:none;
  font-weight:700;font-size:15px;
}
.pager .pg-back{background:var(--pine-soft);border:1px solid #C9D9CE;color:var(--pine-deep);}
.pager .pg-home{background:var(--pine);color:#F3E9D3;border:1px solid var(--pine);}

@media (max-width:1024px){
  .main{padding:0 22px 100px;}
  .ch-title{font-size:25px;}
}
@media (max-width:520px){
  body{font-size:15px;}
  .ch-num{width:46px;height:46px;font-size:18px;}
  .lead-q p{font-size:17px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}