:root { --bg:#f7fafc; --surface:#ffffff; --text:#182534; --muted:#5e7082; --line:#dbe6ef; --accent:#2f6f95; --accent2:#477b6a; --soft:#eef6fb; --warn:#fff8e8; --codebg:#101722; --radius:16px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:linear-gradient(120deg,#f8fbff,#f6fbf8); line-height:1.62; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.layout { display:grid; grid-template-columns: 300px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; overflow:auto; border-right:1px solid var(--line); background:rgba(255,255,255,.88); backdrop-filter:blur(12px); padding:22px; }
.brand { font-weight:800; letter-spacing:-.02em; margin-bottom:8px; font-size:18px; } .sub { color:var(--muted); font-size:13px; margin-bottom:14px; }
.nav a { display:block; padding:9px 10px; border-radius:12px; color:var(--text); font-size:14px; margin:2px 0; } .nav a.active, .nav a:hover { background:var(--soft); text-decoration:none; }
.content { max-width:1120px; width:100%; padding:36px clamp(18px,4vw,54px) 70px; }
.hero { background:linear-gradient(135deg,#e9f3ff,#eefbf5); border:1px solid var(--line); border-radius:24px; padding:34px; box-shadow:0 18px 50px rgba(31,55,78,.08); margin-bottom:24px; }
h1 { font-size:clamp(30px,4vw,52px); line-height:1.04; letter-spacing:-.045em; margin:.1em 0 .35em; }
h2 { font-size:28px; line-height:1.15; margin:34px 0 12px; letter-spacing:-.02em; } h3 { font-size:19px; margin:22px 0 9px; }
p { margin:0 0 14px; } .kicker,.badge { display:inline-flex; align-items:center; background:#e9f4fb; color:#23516e; border:1px solid #c9dceb; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.card,.chapter-card,section { background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 10px 26px rgba(31,55,78,.05); margin:16px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px; border:1px solid var(--line); background:#fff; } th,td { padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; } th { background:#eef6fb; } tr:last-child td { border-bottom:0; }
.searchbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0; } .search { width:min(680px,100%); padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--text); font-size:16px; } .smallbtn { border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; cursor:pointer; }
.diagram { background:#fff; border:1px solid var(--line); border-radius:20px; padding:10px; margin:16px 0 22px; } .diagram img { display:block; width:100%; height:auto; border-radius:16px; }
.warn { background:var(--warn); border-color:#ead8a8; } .checklist li { margin:6px 0; }
pre.code { position:relative; background:var(--codebg); color:#e6edf3; border-radius:14px; padding:18px; overflow:auto; line-height:1.48; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } pre.code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size:13px; } .copy { position:absolute; top:8px; right:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#d6e3f0; border-radius:9px; padding:4px 7px; cursor:pointer; }
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; 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; }
.code .hll { background-color: #ffffcc }
.code { background: #f8f8f8; }
.code .c { color: #3D7B7B; font-style: italic } /* Comment */
.code .err { border: 1px solid #F00 } /* Error */
.code .k { color: #008000; font-weight: bold } /* Keyword */
.code .o { color: #666 } /* Operator */
.code .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.code .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.code .cp { color: #9C6500 } /* Comment.Preproc */
.code .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.code .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.code .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.code .gd { color: #A00000 } /* Generic.Deleted */
.code .ge { font-style: italic } /* Generic.Emph */
.code .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.code .gr { color: #E40000 } /* Generic.Error */
.code .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.code .gi { color: #008400 } /* Generic.Inserted */
.code .go { color: #717171 } /* Generic.Output */
.code .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.code .gs { font-weight: bold } /* Generic.Strong */
.code .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.code .gt { color: #04D } /* Generic.Traceback */
.code .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.code .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.code .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.code .kp { color: #008000 } /* Keyword.Pseudo */
.code .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.code .kt { color: #B00040 } /* Keyword.Type */
.code .m { color: #666 } /* Literal.Number */
.code .s { color: #BA2121 } /* Literal.String */
.code .na { color: #687822 } /* Name.Attribute */
.code .nb { color: #008000 } /* Name.Builtin */
.code .nc { color: #00F; font-weight: bold } /* Name.Class */
.code .no { color: #800 } /* Name.Constant */
.code .nd { color: #A2F } /* Name.Decorator */
.code .ni { color: #717171; font-weight: bold } /* Name.Entity */
.code .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.code .nf { color: #00F } /* Name.Function */
.code .nl { color: #767600 } /* Name.Label */
.code .nn { color: #00F; font-weight: bold } /* Name.Namespace */
.code .nt { color: #008000; font-weight: bold } /* Name.Tag */
.code .nv { color: #19177C } /* Name.Variable */
.code .ow { color: #A2F; font-weight: bold } /* Operator.Word */
.code .w { color: #BBB } /* Text.Whitespace */
.code .mb { color: #666 } /* Literal.Number.Bin */
.code .mf { color: #666 } /* Literal.Number.Float */
.code .mh { color: #666 } /* Literal.Number.Hex */
.code .mi { color: #666 } /* Literal.Number.Integer */
.code .mo { color: #666 } /* Literal.Number.Oct */
.code .sa { color: #BA2121 } /* Literal.String.Affix */
.code .sb { color: #BA2121 } /* Literal.String.Backtick */
.code .sc { color: #BA2121 } /* Literal.String.Char */
.code .dl { color: #BA2121 } /* Literal.String.Delimiter */
.code .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.code .s2 { color: #BA2121 } /* Literal.String.Double */
.code .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.code .sh { color: #BA2121 } /* Literal.String.Heredoc */
.code .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.code .sx { color: #008000 } /* Literal.String.Other */
.code .sr { color: #A45A77 } /* Literal.String.Regex */
.code .s1 { color: #BA2121 } /* Literal.String.Single */
.code .ss { color: #19177C } /* Literal.String.Symbol */
.code .bp { color: #008000 } /* Name.Builtin.Pseudo */
.code .fm { color: #00F } /* Name.Function.Magic */
.code .vc { color: #19177C } /* Name.Variable.Class */
.code .vg { color: #19177C } /* Name.Variable.Global */
.code .vi { color: #19177C } /* Name.Variable.Instance */
.code .vm { color: #19177C } /* Name.Variable.Magic */
.code .il { color: #666 } /* 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; }
.footer { color:var(--muted); margin-top:40px; font-size:13px; }
@media (max-width: 860px) { .layout { display:block; } .sidebar { position:relative; height:auto; } .content { padding:22px 16px 44px; } h1 { font-size:34px; } }
@media (prefers-color-scheme: dark) { :root { --bg:#0e141b; --surface:#141c25; --text:#e7edf4; --muted:#a9b7c5; --line:#2a3948; --accent:#8cc7e8; --soft:#182b3a; --warn:#2d2717; } body { background:linear-gradient(120deg,#0e141b,#101a17); } .sidebar,.card,.chapter-card,section,.table,.search,.smallbtn,.diagram { background:rgba(20,28,37,.92); } th { background:#182b3a; } .hero { background:linear-gradient(135deg,#142738,#11291f); } }
@media print { .sidebar,.copy,.searchbar { display:none; } .layout { display:block; } .content { max-width:none; padding:0; } }