:root{
  --bg:#ffffff;
  --fg:#1f2328;
  --muted:#656d76;
  --accent:#1769aa;
  --accent-soft:#e8f1f8;
  --accent2:#c2560b;
  --callout-bg:#fff7ec;
  --border:#e3e6e8;
  --code-bg:#1e1e2e;
  --code-fg:#e6e6e6;
  --maxw:880px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.85; font-size:17px;
}
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 20px;
}
.topbar .brand{
  font-weight:700; color:var(--accent); text-decoration:none; font-size:16px;
  white-space:nowrap;
}
.topbar nav{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto;}
.topbar nav a{
  color:var(--muted); text-decoration:none; font-size:14px;
  padding:5px 9px; border-radius:6px;
}
.topbar nav a:hover{color:var(--accent); background:var(--accent-soft);}
.topbar nav a.active{color:var(--accent); background:var(--accent-soft); font-weight:600;}
.container{max-width:var(--maxw); margin:0 auto; padding:34px 22px 90px;}
h1{font-size:30px; line-height:1.3; margin:.2em 0 .5em;}
h2{font-size:24px; margin:1.9em 0 .6em; padding-bottom:.3em; border-bottom:2px solid var(--border);}
h2.part-title{font-size:27px; color:var(--accent); border-bottom:none; margin-top:.5em;}
h3{font-size:20px; margin:1.7em 0 .5em; color:#24292f;}
h4{font-size:16px; margin:1.2em 0 .4em;}
p{margin:.8em 0;}
a{color:var(--accent);}
ul,ol{padding-left:1.6em;}
li{margin:.35em 0;}
img{
  max-width:100%; height:auto; display:block; margin:1.3em auto;
  border:1px solid var(--border); border-radius:8px;
}
blockquote{
  margin:1.3em 0; padding:.9em 1.15em;
  border-left:4px solid var(--accent2);
  background:var(--callout-bg); border-radius:0 8px 8px 0;
  color:#5b3a1a;
}
blockquote p{margin:.4em 0;}
code{
  background:#f3f4f6; padding:.15em .4em; border-radius:4px;
  font-size:.88em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
pre{
  background:var(--code-bg); color:var(--code-fg);
  padding:16px; border-radius:10px; overflow:auto; margin:1.3em 0;
}
pre code{background:none; padding:0; color:inherit; font-size:14px; line-height:1.6;}
table{border-collapse:collapse; width:100%; margin:1.3em 0; font-size:15px;}
th,td{border:1px solid var(--border); padding:8px 12px; text-align:left; vertical-align:top;}
th{background:#f6f8fa; font-weight:600;}
tr:nth-child(even) td{background:#fafbfc;}
hr{border:none; border-top:1px solid var(--border); margin:2em 0;}
.toc{
  background:#f6f8fa; border:1px solid var(--border); border-radius:10px;
  padding:14px 20px; margin:26px 0;
}
.toc h4{margin:.1em 0 .6em; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
.toc ol{margin:0; padding-left:1.4em; columns:2; column-gap:34px;}
.toc li{margin:.3em 0; break-inside:avoid;}
.toc a{text-decoration:none;}
.toc a:hover{text-decoration:underline;}
.meta-table{border-collapse:collapse; width:100%; margin:1.3em 0;}
.meta-table th,.meta-table td{border:1px solid var(--border); padding:9px 13px; text-align:left; vertical-align:top;}
.meta-table th{background:#f6f8fa; width:110px; white-space:nowrap;}
.part-block{margin:1.6em 0 1em;}
.part-block h3{margin:.2em 0 .5em;}
.part-block ol{columns:2; column-gap:34px; padding-left:1.4em;}
.part-block li{break-inside:avoid; margin:.3em 0;}
.part-block a{text-decoration:none;}
.part-block a:hover{text-decoration:underline;}
.pager{
  display:flex; gap:12px; margin-top:50px; padding-top:20px; border-top:1px solid var(--border);
}
.pager a{
  flex:1; padding:13px 16px; border:1px solid var(--border); border-radius:10px;
  text-decoration:none; color:var(--fg); font-size:14px;
}
.pager a:hover{border-color:var(--accent); color:var(--accent);}
.pager .next{text-align:right;}
.pager .disabled{visibility:hidden;}
.footer{color:var(--muted); font-size:13px; text-align:center; margin-top:42px; line-height:1.7;}
.intro{color:var(--muted); font-size:16px;}
.section-note{color:var(--muted); font-size:15px;}
.to-top{
  position:fixed; right:20px; bottom:24px; width:44px; height:44px;
  border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:20px; box-shadow:0 2px 12px rgba(0,0,0,.22);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.to-top.show{opacity:1; pointer-events:auto;}
@media (max-width:640px){
  .toc ol,.part-block ol{columns:1;}
  body{font-size:16px;}
  .topbar nav a{padding:4px 6px; font-size:13px;}
}