:root {
  --bg:#f6f8fb; --panel:#ffffff; --text:#1c2633; --muted:#5c6b7b; --line:#d8e0ea; --accent:#3e7197; --accent2:#477b6a; --code-bg:#101722; --code-text:#ecf4ff; --tile:#fdfefe; --warn:#fff5df; --shadow:0 10px 28px rgba(30,50,80,.08); --radius:18px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#111821; --panel:#172130; --text:#ecf3fa; --muted:#b8c5d4; --line:#314255; --accent:#8ec5ec; --accent2:#9dd8bf; --tile:#1b2636; --warn:#332815; --shadow:0 10px 28px rgba(0,0,0,.28); }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; line-height:1.65; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.shell { display:grid; grid-template-columns:320px minmax(0, 1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; overflow:auto; padding:24px 18px; background:rgba(255,255,255,.72); border-right:1px solid var(--line); backdrop-filter:blur(12px); }
@media (prefers-color-scheme: dark) { .sidebar { background:rgba(22,31,45,.85); } }
.brand { font-weight:800; letter-spacing:-.02em; font-size:20px; margin:0 0 4px; }
.sub { color:var(--muted); font-size:13px; margin-bottom:16px; }
.search { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--text); margin:10px 0 18px; }
.nav a { display:block; padding:9px 10px; border-radius:12px; color:var(--text); font-size:14px; }
.nav a:hover { background:var(--tile); text-decoration:none; }
.main { padding:34px; max-width:1180px; width:100%; }
.hero { background:linear-gradient(135deg, rgba(232,242,255,.95), rgba(234,248,243,.95)); color:#18334a; border:1px solid #c7d9e9; box-shadow:var(--shadow); border-radius:24px; padding:34px; margin-bottom:24px; }
@media (prefers-color-scheme: dark) { .hero { background:linear-gradient(135deg, #1c2b3d, #1b332d); color:#ecf3fa; border-color:#314255; } }
.hero h1 { margin:0 0 10px; font-size:clamp(30px, 5vw, 54px); line-height:1.05; letter-spacing:-.04em; }
.kicker { display:inline-block; font-size:13px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.card h3 { margin:0 0 8px; font-size:18px; }
.badge { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:3px 9px; font-size:12px; color:var(--muted); background:var(--tile); }
.chapter-title { font-size:clamp(28px,4vw,44px); line-height:1.1; margin:0 0 8px; letter-spacing:-.03em; }
section { margin:24px 0; }
h2 { font-size:26px; margin-top:36px; letter-spacing:-.02em; }
h3 { font-size:20px; margin-top:24px; }
.diagram { background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:14px; box-shadow:var(--shadow); margin:20px 0; }
.diagram img { width:100%; height:auto; display:block; border-radius:16px; }
.callout { border-left:5px solid var(--accent); background:var(--tile); border-radius:14px; padding:14px 16px; }
.warn { background:var(--warn); border:1px solid rgba(165,116,36,.25); border-radius:16px; padding:14px 16px; }
ul.checklist { padding-left:0; list-style:none; }
ul.checklist li { margin:8px 0; padding-left:30px; position:relative; }
ul.checklist li:before { content:'✓'; position:absolute; left:0; color:var(--accent2); font-weight:900; }
pre.code { background:var(--code-bg); color:var(--code-text); padding:16px; border-radius:16px; overflow:auto; border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); line-height:1.48; font-size:13.5px; }
pre.code code { font-family:"JetBrains Mono", "SFMono-Regular", Consolas, monospace; }
pre { line-height: 125%; }
td.linenos .normal { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
pre.code .highlight .hll { background-color: #6e7681 }
pre.code .highlight { background: #0d1117; color: #E6EDF3 }
pre.code .highlight .c { color: #8B949E; font-style: italic } /* Comment */
pre.code .highlight .err { color: #F85149 } /* Error */
pre.code .highlight .esc { color: #E6EDF3 } /* Escape */
pre.code .highlight .g { color: #E6EDF3 } /* Generic */
pre.code .highlight .k { color: #FF7B72 } /* Keyword */
pre.code .highlight .l { color: #A5D6FF } /* Literal */
pre.code .highlight .n { color: #E6EDF3 } /* Name */
pre.code .highlight .o { color: #FF7B72; font-weight: bold } /* Operator */
pre.code .highlight .x { color: #E6EDF3 } /* Other */
pre.code .highlight .p { color: #E6EDF3 } /* Punctuation */
pre.code .highlight .ch { color: #8B949E; font-style: italic } /* Comment.Hashbang */
pre.code .highlight .cm { color: #8B949E; font-style: italic } /* Comment.Multiline */
pre.code .highlight .cp { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Preproc */
pre.code .highlight .cpf { color: #8B949E; font-style: italic } /* Comment.PreprocFile */
pre.code .highlight .c1 { color: #8B949E; font-style: italic } /* Comment.Single */
pre.code .highlight .cs { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Special */
pre.code .highlight .gd { color: #FFA198; background-color: #490202 } /* Generic.Deleted */
pre.code .highlight .ge { color: #E6EDF3; font-style: italic } /* Generic.Emph */
pre.code .highlight .ges { color: #E6EDF3; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
pre.code .highlight .gr { color: #FFA198 } /* Generic.Error */
pre.code .highlight .gh { color: #79C0FF; font-weight: bold } /* Generic.Heading */
pre.code .highlight .gi { color: #56D364; background-color: #0F5323 } /* Generic.Inserted */
pre.code .highlight .go { color: #8B949E } /* Generic.Output */
pre.code .highlight .gp { color: #8B949E } /* Generic.Prompt */
pre.code .highlight .gs { color: #E6EDF3; font-weight: bold } /* Generic.Strong */
pre.code .highlight .gu { color: #79C0FF } /* Generic.Subheading */
pre.code .highlight .gt { color: #FF7B72 } /* Generic.Traceback */
pre.code .highlight .g-Underline { color: #E6EDF3; text-decoration: underline } /* Generic.Underline */
pre.code .highlight .kc { color: #79C0FF } /* Keyword.Constant */
pre.code .highlight .kd { color: #FF7B72 } /* Keyword.Declaration */
pre.code .highlight .kn { color: #FF7B72 } /* Keyword.Namespace */
pre.code .highlight .kp { color: #79C0FF } /* Keyword.Pseudo */
pre.code .highlight .kr { color: #FF7B72 } /* Keyword.Reserved */
pre.code .highlight .kt { color: #FF7B72 } /* Keyword.Type */
pre.code .highlight .ld { color: #79C0FF } /* Literal.Date */
pre.code .highlight .m { color: #A5D6FF } /* Literal.Number */
pre.code .highlight .s { color: #A5D6FF } /* Literal.String */
pre.code .highlight .na { color: #E6EDF3 } /* Name.Attribute */
pre.code .highlight .nb { color: #E6EDF3 } /* Name.Builtin */
pre.code .highlight .nc { color: #F0883E; font-weight: bold } /* Name.Class */
pre.code .highlight .no { color: #79C0FF; font-weight: bold } /* Name.Constant */
pre.code .highlight .nd { color: #D2A8FF; font-weight: bold } /* Name.Decorator */
pre.code .highlight .ni { color: #FFA657 } /* Name.Entity */
pre.code .highlight .ne { color: #F0883E; font-weight: bold } /* Name.Exception */
pre.code .highlight .nf { color: #D2A8FF; font-weight: bold } /* Name.Function */
pre.code .highlight .nl { color: #79C0FF; font-weight: bold } /* Name.Label */
pre.code .highlight .nn { color: #FF7B72 } /* Name.Namespace */
pre.code .highlight .nx { color: #E6EDF3 } /* Name.Other */
pre.code .highlight .py { color: #79C0FF } /* Name.Property */
pre.code .highlight .nt { color: #7EE787 } /* Name.Tag */
pre.code .highlight .nv { color: #79C0FF } /* Name.Variable */
pre.code .highlight .ow { color: #FF7B72; font-weight: bold } /* Operator.Word */
pre.code .highlight .pm { color: #E6EDF3 } /* Punctuation.Marker */
pre.code .highlight .w { color: #6E7681 } /* Text.Whitespace */
pre.code .highlight .mb { color: #A5D6FF } /* Literal.Number.Bin */
pre.code .highlight .mf { color: #A5D6FF } /* Literal.Number.Float */
pre.code .highlight .mh { color: #A5D6FF } /* Literal.Number.Hex */
pre.code .highlight .mi { color: #A5D6FF } /* Literal.Number.Integer */
pre.code .highlight .mo { color: #A5D6FF } /* Literal.Number.Oct */
pre.code .highlight .sa { color: #79C0FF } /* Literal.String.Affix */
pre.code .highlight .sb { color: #A5D6FF } /* Literal.String.Backtick */
pre.code .highlight .sc { color: #A5D6FF } /* Literal.String.Char */
pre.code .highlight .dl { color: #79C0FF } /* Literal.String.Delimiter */
pre.code .highlight .sd { color: #A5D6FF } /* Literal.String.Doc */
pre.code .highlight .s2 { color: #A5D6FF } /* Literal.String.Double */
pre.code .highlight .se { color: #79C0FF } /* Literal.String.Escape */
pre.code .highlight .sh { color: #79C0FF } /* Literal.String.Heredoc */
pre.code .highlight .si { color: #A5D6FF } /* Literal.String.Interpol */
pre.code .highlight .sx { color: #A5D6FF } /* Literal.String.Other */
pre.code .highlight .sr { color: #79C0FF } /* Literal.String.Regex */
pre.code .highlight .s1 { color: #A5D6FF } /* Literal.String.Single */
pre.code .highlight .ss { color: #A5D6FF } /* Literal.String.Symbol */
pre.code .highlight .bp { color: #E6EDF3 } /* Name.Builtin.Pseudo */
pre.code .highlight .fm { color: #D2A8FF; font-weight: bold } /* Name.Function.Magic */
pre.code .highlight .vc { color: #79C0FF } /* Name.Variable.Class */
pre.code .highlight .vg { color: #79C0FF } /* Name.Variable.Global */
pre.code .highlight .vi { color: #79C0FF } /* Name.Variable.Instance */
pre.code .highlight .vm { color: #79C0FF } /* Name.Variable.Magic */
pre.code .highlight .il { color: #A5D6FF } /* Literal.Number.Integer.Long */
.code .k,.code .kd,.code .kn,.code .nt { color:#ff7b72; } .code .s,.code .s1,.code .s2 { color:#a5d6ff; } .code .na,.code .nc { color:#d2a8ff; } .code .m,.code .mi { color:#79c0ff; } .code .c,.code .c1,.code .cm { color:#8b949e; font-style:italic; } .code .nv,.code .n { color:#e6edf3; } .code .o { color:#ff7b72; }
.table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.table th,.table td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .table tr:last-child td { border-bottom:none; } .table th { background:var(--tile); }
footer { margin:48px 0 20px; color:var(--muted); font-size:13px; }
.topbar { display:none; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:5; }
details.mobile-nav summary { cursor:pointer; font-weight:700; }
@media (max-width: 860px) { .shell { display:block; } .sidebar { position:relative; height:auto; display:none; } .topbar { display:block; } .main { padding:18px; } .hero { padding:24px; } }
@media print {
  body { background:#fff; color:#1c2633; font-size:11.5pt; }
  .sidebar,.topbar,.no-print { display:none !important; }
  .shell { display:block; } .main { max-width:none; padding:0; }
  .hero,.card,.diagram { box-shadow:none; break-inside:avoid; }
  pre.code { white-space:pre-wrap; word-break:break-word; font-size:8.8pt; }
  h1,h2,h3 { page-break-after:avoid; } section { break-inside:auto; }
}