:root{
  --ink:#1e1c19; --ink2:#3d3833; --muted:#75706a; --faint:#a39d95;
  --bg:#faf9f7; --card:#ffffff; --line:#e7e3dd;
  --accent:#c15f3c; --accent-soft:#fbeee8;
  --blue:#3b6ea5; --blue-soft:#eaf1f8;
  --green:#3f7d58; --green-soft:#e9f3ec;
  --amber:#a67322; --amber-soft:#fdf3e2;
  --red:#b0453a; --red-soft:#fceceb;
  --code-bg:#22201d; --code-ink:#e8e4de;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,'Courier New',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:20px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:17px; line-height:1.85; -webkit-font-smoothing:antialiased;
}
.layout{display:flex; max-width:1500px; margin:0 auto}

/* ============ 侧边目录 ============ */
.toc{
  width:280px; flex:0 0 280px; position:sticky; top:0; height:100vh;
  overflow-y:auto; padding:28px 16px 60px 24px; border-right:1px solid var(--line);
  background:#f5f3f0;
}
.toc h2{font-size:13px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase; margin:0 0 14px 8px; font-weight:700}
.toc a{
  display:block; padding:6px 10px; margin:1px 0; border-radius:7px; text-decoration:none;
  color:var(--ink2); font-size:14.5px; line-height:1.45; border-left:2px solid transparent;
}
.toc a:hover{background:#ebe7e1}
.toc a.lv1{font-weight:650; margin-top:12px; color:var(--ink)}
.toc a.lv2{padding-left:22px; font-size:13.5px; color:var(--muted)}
.toc a.active{background:var(--accent-soft); color:var(--accent); border-left-color:var(--accent); font-weight:600}
.toc .tocnum{color:var(--faint); font-variant-numeric:tabular-nums; margin-right:6px; font-size:12.5px}

/* ============ 正文 ============ */
main{flex:1; min-width:0; padding:0 clamp(20px,4vw,68px) 140px}
.hero{padding:70px 0 46px; border-bottom:2px solid var(--ink); margin-bottom:44px}
.hero .kicker{color:var(--accent); font-weight:700; letter-spacing:.18em; font-size:12.5px; text-transform:uppercase}
.hero h1{font-size:clamp(34px,5vw,52px); line-height:1.18; margin:14px 0 16px; letter-spacing:-.02em}
.hero p{font-size:19px; color:var(--muted); margin:0; max-width:760px}
.hero .meta{margin-top:26px; display:flex; gap:10px; flex-wrap:wrap}
.hero .meta span{background:#fff; border:1px solid var(--line); border-radius:100px; padding:5px 14px; font-size:13.5px; color:var(--ink2)}

section{margin:0 0 12px; scroll-margin-top:16px}
h2.sec{
  font-size:30px; margin:58px 0 6px; letter-spacing:-.01em; line-height:1.3;
  padding-top:26px; border-top:1px solid var(--line);
}
h2.sec .no{color:var(--accent); font-variant-numeric:tabular-nums; margin-right:12px; font-weight:800}
.sec-sub{color:var(--muted); font-size:16px; margin:0 0 30px}
h3{font-size:22px; margin:42px 0 12px; letter-spacing:-.005em; line-height:1.4}
h4{font-size:17.5px; margin:26px 0 8px; color:var(--ink2)}
p{margin:12px 0}
ul,ol{margin:12px 0; padding-left:24px}
li{margin:7px 0}
strong{font-weight:650; color:#000}
code{
  font-family:var(--mono); font-size:.875em; background:#efece7; color:#8a3f22;
  padding:2px 6px; border-radius:5px; word-break:break-word;
}

/* 标签 */
.tag{
  display:inline-block; vertical-align:middle; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  padding:2.5px 9px; border-radius:5px; margin-left:10px; position:relative; top:-2px;
}
.tag.core{background:var(--accent); color:#fff}
.tag.adv{background:#e7e3dd; color:var(--muted)}

/* 代码块 */
pre{
  background:var(--code-bg); color:var(--code-ink); border-radius:12px; padding:20px 22px;
  overflow-x:auto; font-family:var(--mono); font-size:14.5px; line-height:1.75; margin:16px 0;
  box-shadow:0 1px 3px rgba(0,0,0,.13);
}
pre code{background:none; color:inherit; padding:0; font-size:inherit}
pre .c{color:#8f8a82}
pre .k{color:#e5a663}
pre .s{color:#94c78a}
pre .o{color:#7fb0d8}
pre .r{color:#e08a7e}

/* 卡片 */
.box{border-radius:12px; padding:18px 22px 18px 20px; margin:20px 0; border-left:4px solid}
.box .bt{font-weight:700; font-size:14.5px; letter-spacing:.02em; margin-bottom:6px}
.box p{margin:6px 0}
.box p:last-child{margin-bottom:0}
.box.meta2{background:var(--amber-soft); border-color:var(--amber)}
.box.meta2 .bt{color:var(--amber)}
.box.tip{background:var(--green-soft); border-color:var(--green)}
.box.tip .bt{color:var(--green)}
.box.warn{background:var(--red-soft); border-color:var(--red)}
.box.warn .bt{color:var(--red)}
.box.note{background:var(--blue-soft); border-color:var(--blue)}
.box.note .bt{color:var(--blue)}

/* 表格 */
table{width:100%; border-collapse:collapse; margin:20px 0; font-size:15px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; overflow:hidden}
th{background:#f2efeb; text-align:left; padding:11px 14px; font-size:13.5px; letter-spacing:.03em;
  color:var(--ink2); border-bottom:1px solid var(--line); font-weight:700}
td{padding:11px 14px; border-bottom:1px solid #f0ece6; vertical-align:top; line-height:1.65}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fbfaf8}

/* 流程示意图 */
.flow{display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin:26px 0; justify-content:center}
.flow .node{
  background:var(--card); border:2px solid var(--line); border-radius:12px; padding:14px 16px;
  min-width:132px; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.flow .node .n-t{font-weight:700; font-size:15px}
.flow .node .n-s{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5}
.flow .node.hl{border-color:var(--accent); background:var(--accent-soft)}
.flow .arrow{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 10px; min-width:96px}
.flow .arrow .cmd{font-family:var(--mono); font-size:12px; color:var(--accent); background:var(--accent-soft);
  padding:2px 8px; border-radius:5px; white-space:nowrap; margin-bottom:2px}
.flow .arrow .line{font-size:20px; color:var(--faint); line-height:1}

/* 分支图 */
.gitgraph{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; margin:22px 0; overflow-x:auto}
.gitgraph svg{display:block; margin:0 auto; max-width:100%}
.gg-cap{text-align:center; color:var(--muted); font-size:13.5px; margin-top:12px}

/* 对比双栏 */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0}
.cols .col{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 20px}
.cols .col h4{margin-top:0}
.cols .col.good{border-top:3px solid var(--green)}
.cols .col.bad{border-top:3px solid var(--red)}
@media(max-width:820px){.cols{grid-template-columns:1fr}}

/* 步骤 */
.steps{counter-reset:s; list-style:none; padding:0; margin:20px 0}
.steps > li{counter-increment:s; position:relative; padding:2px 0 14px 46px; margin:0}
.steps > li::before{
  content:counter(s); position:absolute; left:0; top:2px; width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:14px; font-weight:700; display:flex;
  align-items:center; justify-content:center; font-family:var(--mono);
}
.steps > li .st{font-weight:650; font-size:17px}

.footer{margin-top:70px; padding-top:26px; border-top:2px solid var(--ink); color:var(--muted); font-size:14.5px}

@media(max-width:1000px){
  .toc{display:none}
  main{padding:0 20px 80px}
}
@media print{
  .toc{display:none} main{padding:0}
  pre{background:#f4f2ef; color:#222; box-shadow:none; border:1px solid #ddd}
  pre .c,pre .k,pre .s,pre .o,pre .r{color:#222}
  h2.sec{page-break-after:avoid}
}

/* ============ 从内联 style 属性搬过来的工具类 ============
   原文件把这些写在标签的 style="" 里，但本站 CSP 是 style-src 'self'，
   内联样式会被浏览器拦掉，所以统一收到这里。 */
.w-90{width:90px}
.w-110{width:110px}
.w-150{width:150px}
.w-170{width:170px}
.w-180{width:180px}
.w-200{width:200px}
.w-230{width:230px}
.w-250{width:250px}
.w-280{width:280px}
.w-290{width:290px}
.note-sm{color:var(--muted); font-size:13px}
.note-sm.accent{color:var(--accent)}
.fs-sm{font-size:13px}
.fs-md{font-size:15px}
.p-tight{margin:6px 0; color:var(--ink2)}
.p-after{margin-top:6px; color:var(--muted); font-size:15px}
.ul-tight{padding-left:20px}
.cmd-blue{background:var(--blue-soft) !important; color:var(--blue) !important}

/* ============ 回博客的导航条 ============
   放在 main 内部而不是页面顶部，这样左侧目录的 sticky 布局完全不受影响。 */
.backbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 0 0; font-size:14px;
}
.backbar a{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  color:var(--muted); border:1px solid var(--line); background:var(--card);
  border-radius:100px; padding:5px 15px; transition:color .15s, border-color .15s;
}
.backbar a:hover{color:var(--accent); border-color:var(--accent)}
.backbar .bb-mark{font-family:var(--mono); font-weight:700; color:var(--accent)}
@media print{.backbar{display:none}}