:root {
  --bg:#f7f4ed; --panel:#fffdf8; --panel-2:#f0e8db; --text:#25303a; --muted:#64717d; --line:#d8cfc0;
  --accent:#6f7f6d; --accent-2:#9a7758; --accent-3:#5f7896; --code-bg:#17202b; --code-text:#e9eef5;
  --shadow:0 18px 42px rgba(55,48,40,.12); --radius:18px;
}
html[data-theme='dark'], body.dark {
  --bg:#101417; --panel:#171d22; --panel-2:#202830; --text:#eef3f1; --muted:#aeb9b5; --line:#334049;
  --accent:#a9b899; --accent-2:#d1aa7e; --accent-3:#9ab6d1; --code-bg:#0f1720; --code-text:#f4f7fb;
  --shadow:0 20px 45px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
a{color:var(--accent-3);text-decoration:none} a:hover{text-decoration:underline}
.layout{display:grid;grid-template-columns:315px minmax(0,1fr);min-height:100vh}
aside{position:sticky;top:0;height:100vh;overflow:auto;padding:24px;background:linear-gradient(180deg,var(--panel),var(--panel-2));border-right:1px solid var(--line)}
main{padding:32px 38px 80px;max-width:1180px;width:100%}
.brand{font-weight:800;font-size:1.05rem;line-height:1.2;margin-bottom:10px} .brand small{display:block;color:var(--muted);font-weight:600;margin-top:6px}
.nav a{display:block;padding:9px 10px;border-radius:12px;color:var(--text);font-size:.93rem;margin:3px 0} .nav a:hover,.nav a.active{background:rgba(111,127,109,.16);text-decoration:none}
.searchbox{margin:16px 0;padding:12px;border:1px solid var(--line);background:var(--panel);border-radius:16px}
.searchbox input{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:12px;padding:10px 11px;font-size:.95rem}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}button,.btn{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:8px 10px;cursor:pointer;font-weight:700;font-size:.88rem}button:hover,.btn:hover{background:var(--panel-2);text-decoration:none}
.hero{background:linear-gradient(135deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:26px;padding:34px;margin-bottom:28px;box-shadow:var(--shadow)}
.kicker{letter-spacing:.11em;text-transform:uppercase;color:var(--accent-2);font-weight:800;font-size:.78rem} h1{font-size:clamp(2rem,4vw,4rem);line-height:1.02;margin:.3em 0 .25em} h2{font-size:1.72rem;line-height:1.18;margin:38px 0 14px} h3{font-size:1.18rem;margin:26px 0 8px} p{margin:0 0 1rem} .lead{font-size:1.16rem;color:var(--muted);max-width:920px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:18px 0;box-shadow:0 8px 22px rgba(65,54,43,.06)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
details{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px 18px;margin:14px 0} summary{cursor:pointer;font-weight:800;color:var(--text)}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:rgba(111,127,109,.13);border-radius:999px;padding:5px 10px;font-size:.82rem;color:var(--text);font-weight:700}
.checklist li{margin:.35rem 0} .muted-text{color:var(--muted)}
.diagram{width:100%;height:auto;margin:20px 0;border-radius:22px;box-shadow:0 8px 28px rgba(40,38,33,.08)}
.svg-bg{fill:var(--panel)} .svg-title{fill:var(--text);font-size:24px;font-weight:800} .svg-note{fill:var(--muted);font-size:18px} .box rect{fill:var(--panel-2);stroke:var(--line);stroke-width:2} .box text{fill:var(--text);font-size:17px;font-weight:750} .box.muted rect{fill:rgba(111,127,109,.13)} .arrow{stroke:var(--accent-3);stroke-width:3;fill:none;marker-end:url(#arrow);}
.pyramid{fill:rgba(111,127,109,.17);stroke:var(--accent);stroke-width:3} .pyr-line{stroke:var(--accent);stroke-width:2}
pre{margin:0;overflow:auto;border-radius:16px;background:var(--code-bg)!important;border:1px solid rgba(255,255,255,.08);padding:0} .highlight{border-radius:16px;background:var(--code-bg)!important;margin:12px 0 18px;box-shadow:0 10px 26px rgba(0,0,0,.12)} .highlight pre{padding:18px;background:transparent!important;color:var(--code-text)!important;font-size:.92rem;line-height:1.55}
.code-title{font-weight:800;margin:18px 0 8px;color:var(--accent-2)}
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; }
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f8f8f8; }
.highlight .c { color: #3D7B7B; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #F00 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666 } /* Operator */
.highlight .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #9C6500 } /* Comment.Preproc */
.highlight .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.highlight .cs { color: #3D7B7B; font-style: italic } /* 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: #E40000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #008400 } /* Generic.Inserted */
.highlight .go { color: #717171 } /* Generic.Output */
.highlight .gp { color: #000080; 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: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #B00040 } /* Keyword.Type */
.highlight .m { color: #666 } /* Literal.Number */
.highlight .s { color: #BA2121 } /* Literal.String */
.highlight .na { color: #687822 } /* Name.Attribute */
.highlight .nb { color: #008000 } /* Name.Builtin */
.highlight .nc { color: #00F; font-weight: bold } /* Name.Class */
.highlight .no { color: #800 } /* Name.Constant */
.highlight .nd { color: #A2F } /* Name.Decorator */
.highlight .ni { color: #717171; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #00F } /* Name.Function */
.highlight .nl { color: #767600 } /* Name.Label */
.highlight .nn { color: #00F; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #19177C } /* Name.Variable */
.highlight .ow { color: #A2F; font-weight: bold } /* Operator.Word */
.highlight .w { color: #BBB } /* Text.Whitespace */
.highlight .mb { color: #666 } /* Literal.Number.Bin */
.highlight .mf { color: #666 } /* Literal.Number.Float */
.highlight .mh { color: #666 } /* Literal.Number.Hex */
.highlight .mi { color: #666 } /* Literal.Number.Integer */
.highlight .mo { color: #666 } /* Literal.Number.Oct */
.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
.highlight .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
.highlight .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx { color: #008000 } /* Literal.String.Other */
.highlight .sr { color: #A45A77 } /* Literal.String.Regex */
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #00F } /* Name.Function.Magic */
.highlight .vc { color: #19177C } /* Name.Variable.Class */
.highlight .vg { color: #19177C } /* Name.Variable.Global */
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
.highlight .vm { color: #19177C } /* Name.Variable.Magic */
.highlight .il { color: #666 } /* Literal.Number.Integer.Long */
.highlight .c,.highlight .cm,.highlight .c1{color:#8fa99b!important} .highlight .k,.highlight .kd,.highlight .kn{color:#7dd3fc!important} .highlight .s,.highlight .s1,.highlight .s2{color:#f6c177!important} .highlight .na,.highlight .nt{color:#c4b5fd!important} .highlight .nf,.highlight .nx{color:#a7f3d0!important} .highlight .mi,.highlight .mf{color:#fca5a5!important}
mark.search-hit{background:#ffe08a;color:#1d2630;border-radius:4px;padding:0 2px} mark.search-current{background:#ffb86b;outline:2px solid #8a4b16}
.table{width:100%;border-collapse:separate;border-spacing:0;margin:18px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden} .table th,.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top} .table th{background:var(--panel-2);text-align:left} .table tr:last-child td{border-bottom:0}
.footer{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
.mobile-note{display:none}
@media(max-width:900px){.layout{display:block} aside{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)} main{padding:22px 16px 60px} .grid,.grid3{grid-template-columns:1fr} .hero{padding:24px} .mobile-note{display:block}}
@media print{aside,.searchbox,.no-print{display:none!important} .layout{display:block} main{padding:0;max-width:none} body{background:white;color:#111} .hero,.card,details{box-shadow:none;break-inside:avoid} a{color:#1f4c7a}}