:root{
  --bg:#ffffff; --fg:#1f2328; --muted:#57606a; --accent:#2563eb; --accent-soft:#eff6ff;
  --border:#e4e7eb; --code-bg:#f6f8fa; --sidebar-bg:#fafbfc;
}
*{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",Helvetica,Arial,sans-serif;
  line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── 顶部导航 ── */
.topnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:10px 24px;gap:20px}
.topnav .brand{font-weight:800;font-size:17px;color:#0b2a6b;white-space:nowrap}
.topnav .brand small{color:var(--muted);font-weight:400;font-size:12px;margin-left:6px}
.topnav nav{display:flex;gap:6px;flex-wrap:wrap;flex:1;overflow-x:auto}
.topnav nav a{font-size:13px;padding:5px 10px;border-radius:6px;color:#334155;white-space:nowrap}
.topnav nav a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
.topnav nav a.active{background:var(--accent);color:#fff}
.topnav .src{font-size:12px;color:var(--muted);white-space:nowrap}

/* ── 布局 ── */
.layout{display:grid;grid-template-columns:260px 1fr;max-width:1280px;margin:0 auto}
.sidebar{position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
  background:var(--sidebar-bg);border-right:1px solid var(--border);padding:16px 12px 40px}
.sidebar h4{margin:12px 4px 8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li a{display:block;padding:5px 10px;border-radius:5px;color:#475569;font-size:13.5px;line-height:1.4}
.sidebar li a:hover{background:#eef2ff;color:var(--accent);text-decoration:none}
.sidebar li.active>a{background:var(--accent-soft);color:var(--accent);font-weight:600}
.sidebar .toc-l2{padding-left:14px}
.sidebar .toc-l3{padding-left:28px}

.content{padding:28px 40px 80px;min-width:0}
.content h1{font-size:30px;margin:0 0 6px;line-height:1.3}
.content .meta{color:var(--muted);font-size:13px;margin-bottom:24px}
.content h2{font-size:24px;margin:44px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--accent);color:#0b2a6b}
.content h3{font-size:19px;margin:30px 0 8px;color:#16325f}
.content h4{font-size:16px;margin:22px 0 6px;color:#333}
.content p{margin:10px 0}
.content ul,.content ol{margin:8px 0;padding-left:24px}
.content li{margin:4px 0}
.content blockquote{margin:14px 0;padding:12px 16px;border-left:4px solid #ffd56a;
  background:#fff8e6;border-radius:0 8px 8px 0;color:#5b4a00}
.content blockquote p{margin:4px 0}
.content hr{border:none;border-top:1px solid var(--border);margin:28px 0}
.content table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 4px 12px rgba(0,0,0,.04)}
.content th,.content td{border:1px solid var(--border);padding:8px 12px;text-align:left;vertical-align:top}
.content th{background:#f1f5f9;font-weight:650}
.content tr:nth-child(even) td{background:#fbfcfd}
.content img{max-width:100%;border-radius:8px}

/* 行内代码 */
.content code{font-family:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  background:var(--code-bg);padding:1px 6px;border-radius:4px;font-size:13.5px;color:#1f2328}
/* 代码块 */
.content pre{background:#f6f8fa;border:1px solid var(--border);border-radius:8px;
  padding:14px 16px;overflow-x:auto;margin:14px 0;font-size:13px;line-height:1.6}
.content pre code{background:none;padding:0;font-size:13px;color:inherit}

/* 上一章/下一章 */
.pager{display:flex;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--border)}
.pager a{flex:1;border:1px solid var(--border);border-radius:10px;padding:14px 18px;
  color:#334155;transition:all .15s}
.pager a:hover{border-color:var(--accent);background:var(--accent-soft);text-decoration:none}
.pager .dir{font-size:12px;color:var(--muted)}
.pager .ttl{font-weight:650;color:#0b2a6b;margin-top:2px}

/* ── 首页 ── */
.hero{background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 60%,#3b82f6 100%);color:#fff;padding:60px 24px}
.hero .inner{max-width:900px;margin:0 auto}
.hero h1{font-size:40px;margin:0 0 12px;line-height:1.2;font-weight:800}
.hero .lead{font-size:18px;opacity:.92;margin:0 0 18px}
.hero .tags{display:flex;gap:8px;flex-wrap:wrap}
.hero .tag{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  padding:4px 12px;border-radius:999px;font-size:13px}
.container{max-width:1100px;margin:0 auto;padding:36px 24px 80px}
.section-title{font-size:24px;font-weight:700;color:#0b2a6b;margin:0 0 6px}
.section-sub{color:var(--muted);margin:0 0 20px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 4px 12px rgba(0,0,0,.04);
  transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.06),0 12px 28px rgba(0,0,0,.08)}
.card .num{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--muted)}
.card .icon{font-size:30px;margin:6px 0 4px}
.card h3{margin:0 0 6px;font-size:19px;color:#0b2a6b}
.card .sub{color:var(--accent);font-size:13px;margin-bottom:10px}
.card p{margin:0;color:#475569;font-size:14px;flex:1}
.card .cta{margin-top:14px;font-size:13px;font-weight:600}
.roadmap{background:#f8fafc;border:1px solid var(--border);border-radius:14px;padding:24px;margin-top:24px}
.roadmap ol{margin:0;padding-left:22px}
.roadmap li{margin:8px 0}
.roadmap li b{color:#0b2a6b}
.footnote{text-align:center;color:var(--muted);font-size:12px;margin-top:40px}

/* 响应式 */
@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .content{padding:20px 16px 60px}
  .topnav{padding:8px 12px}
  .topnav .src{display:none}
  .hero h1{font-size:28px}
}


/* ── Pygments 代码高亮 ── */
pre { line-height: 125%; }
td.linenos .normal { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.codehilite .hll { background-color: #ffffcc }
.codehilite { background: #f0f0f0; }
.codehilite .c { color: #60A0B0; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #F00 } /* Error */
.codehilite .k { color: #007020; font-weight: bold } /* Keyword */
.codehilite .o { color: #666 } /* Operator */
.codehilite .ch { color: #60A0B0; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #60A0B0; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #007020 } /* Comment.Preproc */
.codehilite .cpf { color: #60A0B0; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #60A0B0; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #60A0B0; background-color: #FFF0F0 } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.codehilite .gr { color: #F00 } /* Generic.Error */
.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: #00A000 } /* Generic.Inserted */
.codehilite .go { color: #888 } /* Generic.Output */
.codehilite .gp { color: #C65D09; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite .gt { color: #04D } /* Generic.Traceback */
.codehilite .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #007020 } /* Keyword.Pseudo */
.codehilite .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #902000 } /* Keyword.Type */
.codehilite .m { color: #40A070 } /* Literal.Number */
.codehilite .s { color: #4070A0 } /* Literal.String */
.codehilite .na { color: #4070A0 } /* Name.Attribute */
.codehilite .nb { color: #007020 } /* Name.Builtin */
.codehilite .nc { color: #0E84B5; font-weight: bold } /* Name.Class */
.codehilite .no { color: #60ADD5 } /* Name.Constant */
.codehilite .nd { color: #555; font-weight: bold } /* Name.Decorator */
.codehilite .ni { color: #D55537; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #007020 } /* Name.Exception */
.codehilite .nf { color: #06287E } /* Name.Function */
.codehilite .nl { color: #002070; font-weight: bold } /* Name.Label */
.codehilite .nn { color: #0E84B5; font-weight: bold } /* Name.Namespace */
.codehilite .nt { color: #062873; font-weight: bold } /* Name.Tag */
.codehilite .nv { color: #BB60D5 } /* Name.Variable */
.codehilite .ow { color: #007020; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #BBB } /* Text.Whitespace */
.codehilite .mb { color: #40A070 } /* Literal.Number.Bin */
.codehilite .mf { color: #40A070 } /* Literal.Number.Float */
.codehilite .mh { color: #40A070 } /* Literal.Number.Hex */
.codehilite .mi { color: #40A070 } /* Literal.Number.Integer */
.codehilite .mo { color: #40A070 } /* Literal.Number.Oct */
.codehilite .sa { color: #4070A0 } /* Literal.String.Affix */
.codehilite .sb { color: #4070A0 } /* Literal.String.Backtick */
.codehilite .sc { color: #4070A0 } /* Literal.String.Char */
.codehilite .dl { color: #4070A0 } /* Literal.String.Delimiter */
.codehilite .sd { color: #4070A0; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #4070A0 } /* Literal.String.Double */
.codehilite .se { color: #4070A0; font-weight: bold } /* Literal.String.Escape */
.codehilite .sh { color: #4070A0 } /* Literal.String.Heredoc */
.codehilite .si { color: #70A0D0; font-style: italic } /* Literal.String.Interpol */
.codehilite .sx { color: #C65D09 } /* Literal.String.Other */
.codehilite .sr { color: #235388 } /* Literal.String.Regex */
.codehilite .s1 { color: #4070A0 } /* Literal.String.Single */
.codehilite .ss { color: #517918 } /* Literal.String.Symbol */
.codehilite .bp { color: #007020 } /* Name.Builtin.Pseudo */
.codehilite .fm { color: #06287E } /* Name.Function.Magic */
.codehilite .vc { color: #BB60D5 } /* Name.Variable.Class */
.codehilite .vg { color: #BB60D5 } /* Name.Variable.Global */
.codehilite .vi { color: #BB60D5 } /* Name.Variable.Instance */
.codehilite .vm { color: #BB60D5 } /* Name.Variable.Magic */
.codehilite .il { color: #40A070 } /* Literal.Number.Integer.Long */