:root {
  --bg:#f7f3ec; --panel:#fffaf2; --text:#1f2937; --muted:#64748b; --line:#e5dccf;
  --brand:#6f8f83; --brand2:#b58968; --accent:#476f9a; --soft:#ece3d3; --codebg:#18202a;
}
html[data-theme="dark"] {
  --bg:#111827; --panel:#182233; --text:#edf2f7; --muted:#b9c3d0; --line:#334155;
  --brand:#94b8a8; --brand2:#d6b08b; --accent:#93b7dd; --soft:#263244; --codebg:#101822;
}
* { box-sizing:border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.65; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.topbar { position:sticky; top:0; z-index:20; background:rgba(255,250,242,.92); backdrop-filter: blur(14px); border-bottom:1px solid var(--line); }
html[data-theme="dark"] .topbar { background:rgba(24,34,51,.92); }
.topbar-inner { max-width:1380px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:10px 18px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.logo-mark { width:34px; height:34px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand2)); display:inline-flex; align-items:center; justify-content:center; color:white; }
.spacer { flex:1; }
.btn { border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:12px; padding:7px 10px; cursor:pointer; font-weight:650; }
.btn.icon { min-width:36px; padding:7px 8px; }
.search { display:flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:6px 8px; min-width:300px; }
.search input { border:0; outline:0; background:transparent; color:var(--text); width:100%; font-size:14px; }
.match-counter { font-size:12px; color:var(--muted); min-width:50px; text-align:center; }
.layout { max-width:1380px; margin:0 auto; display:grid; grid-template-columns:310px minmax(0,1fr); gap:22px; padding:22px 18px 48px; }
.sidebar { position:sticky; top:62px; align-self:start; max-height:calc(100vh - 78px); overflow:auto; border:1px solid var(--line); background:var(--panel); border-radius:20px; padding:14px; }
.sidebar h3 { margin:4px 8px 12px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.navlink { display:block; padding:8px 10px; border-radius:12px; color:var(--text); font-size:14px; }
.navlink:hover { background:var(--soft); text-decoration:none; }
.navlink small { display:block; color:var(--muted); font-size:11px; }
.hero { background:linear-gradient(135deg, rgba(111,143,131,.16), rgba(181,137,104,.16)); border:1px solid var(--line); border-radius:28px; padding:34px; margin-bottom:18px; }
.hero h1 { font-size:clamp(30px, 5vw, 58px); line-height:1.05; margin:0 0 12px; letter-spacing:-.04em; }
.hero p { max-width:880px; font-size:18px; color:var(--muted); }
.badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--panel); border:1px solid var(--line); color:var(--muted); font-weight:650; font-size:13px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.card { border:1px solid var(--line); background:var(--panel); border-radius:20px; padding:18px; box-shadow:0 10px 24px rgba(30,41,59,.06); }
.card h3 { margin-top:0; }
.card p { color:var(--muted); }
.chapter { border:1px solid var(--line); background:var(--panel); border-radius:24px; padding:28px; margin-bottom:20px; }
.chapter h1 { margin-top:0; font-size:38px; line-height:1.1; letter-spacing:-.03em; }
.chapter h2 { margin-top:30px; border-top:1px solid var(--line); padding-top:20px; }
.kv { display:grid; grid-template-columns:180px 1fr; gap:8px; margin:16px 0; }
.kv div { padding:10px 12px; border-radius:14px; background:rgba(127,127,127,.06); }
.kv b { color:var(--brand); }
.callout { border-left:5px solid var(--brand); background:rgba(111,143,131,.13); border-radius:16px; padding:16px 18px; margin:18px 0; }
.warn { border-left-color:#b58968; background:rgba(181,137,104,.13); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
ul.clean { padding-left:22px; }
li { margin:5px 0; }
.diagram { margin:18px 0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel); }
.diagram img { width:100%; display:block; }
pre { margin:0; white-space:pre-wrap; word-break:normal; overflow:auto; }
.codebox { background:var(--codebg); border-radius:18px; overflow:hidden; border:1px solid #29374a; margin:18px 0; }
.codehead { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:rgba(255,255,255,.08); color:#e5e7eb; font-size:12px; }
.copy { width:28px; height:28px; border-radius:9px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; }
.highlight { background:transparent !important; padding:14px; overflow:auto; color:#e5e7eb; }
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; }
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f0f0f0; }
.highlight .c { color: #60A0B0; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #F00 } /* Error */
.highlight .k { color: #007020; font-weight: bold } /* Keyword */
.highlight .o { color: #666 } /* Operator */
.highlight .ch { color: #60A0B0; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #60A0B0; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #007020 } /* Comment.Preproc */
.highlight .cpf { color: #60A0B0; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #60A0B0; font-style: italic } /* Comment.Single */
.highlight .cs { color: #60A0B0; background-color: #FFF0F0 } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #F00 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #888 } /* Generic.Output */
.highlight .gp { color: #C65D09; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #04D } /* Generic.Traceback */
.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #007020 } /* Keyword.Pseudo */
.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #902000 } /* Keyword.Type */
.highlight .m { color: #40A070 } /* Literal.Number */
.highlight .s { color: #4070A0 } /* Literal.String */
.highlight .na { color: #4070A0 } /* Name.Attribute */
.highlight .nb { color: #007020 } /* Name.Builtin */
.highlight .nc { color: #0E84B5; font-weight: bold } /* Name.Class */
.highlight .no { color: #60ADD5 } /* Name.Constant */
.highlight .nd { color: #555; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #D55537; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #007020 } /* Name.Exception */
.highlight .nf { color: #06287E } /* Name.Function */
.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
.highlight .nn { color: #0E84B5; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #BB60D5 } /* Name.Variable */
.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
.highlight .w { color: #BBB } /* Text.Whitespace */
.highlight .mb { color: #40A070 } /* Literal.Number.Bin */
.highlight .mf { color: #40A070 } /* Literal.Number.Float */
.highlight .mh { color: #40A070 } /* Literal.Number.Hex */
.highlight .mi { color: #40A070 } /* Literal.Number.Integer */
.highlight .mo { color: #40A070 } /* Literal.Number.Oct */
.highlight .sa { color: #4070A0 } /* Literal.String.Affix */
.highlight .sb { color: #4070A0 } /* Literal.String.Backtick */
.highlight .sc { color: #4070A0 } /* Literal.String.Char */
.highlight .dl { color: #4070A0 } /* Literal.String.Delimiter */
.highlight .sd { color: #4070A0; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4070A0 } /* Literal.String.Double */
.highlight .se { color: #4070A0; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #4070A0 } /* Literal.String.Heredoc */
.highlight .si { color: #70A0D0; font-style: italic } /* Literal.String.Interpol */
.highlight .sx { color: #C65D09 } /* Literal.String.Other */
.highlight .sr { color: #235388 } /* Literal.String.Regex */
.highlight .s1 { color: #4070A0 } /* Literal.String.Single */
.highlight .ss { color: #517918 } /* Literal.String.Symbol */
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #06287E } /* Name.Function.Magic */
.highlight .vc { color: #BB60D5 } /* Name.Variable.Class */
.highlight .vg { color: #BB60D5 } /* Name.Variable.Global */
.highlight .vi { color: #BB60D5 } /* Name.Variable.Instance */
.highlight .vm { color: #BB60D5 } /* Name.Variable.Magic */
.highlight .il { color: #40A070 } /* Literal.Number.Integer.Long */
.search-hit { background:#ffe08a; color:#111827; border-radius:3px; padding:0 2px; }
.search-hit.active { outline:2px solid #d97706; }
.footer { color:var(--muted); text-align:center; padding:30px; }
@media (max-width: 900px) {
  .layout { grid-template-columns:1fr; } .sidebar { position:relative; top:0; max-height:none; }
  .search { min-width:0; flex:1; } .two { grid-template-columns:1fr; } .chapter { padding:20px; } .topbar-inner { flex-wrap:wrap; }
}
@media (max-width: 520px) { .hero { padding:22px; border-radius:20px; } .chapter h1 { font-size:28px; } .kv { grid-template-columns:1fr; } }
@media print { .topbar,.sidebar,.copy { display:none!important; } .layout { display:block; max-width:none; padding:0; } body { background:white; } .chapter,.hero,.card { break-inside:avoid; box-shadow:none; } a::after { content:""; } }