:root{--bg:#f6f8fb;--paper:#fff;--ink:#1c2b5a;--muted:#5b6788;--line:#d9e2f0;--mark:#9be3d6;--accent:#0f8f84;--grid:#e3ebf6}
:root[data-theme=dark]{--bg:#10151f;--paper:#171e2b;--ink:#dbe5ff;--muted:#8d9ac0;--line:#2a3550;--mark:#1d6b63;--accent:#4fd1c0;--grid:#1d2638}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.top{position:sticky;top:0;z-index:10;display:flex;gap:12px;align-items:center;padding:10px 16px;background:var(--paper);border-bottom:2px solid var(--line)}
.top h1{font:700 1.2rem Literata,Georgia,serif;margin:0;white-space:nowrap}
.top input{flex:1;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:.95rem}
.top button{border:0;background:none;color:var(--ink);font-size:1.4rem;cursor:pointer;padding:4px 8px}
#menuBtn{display:none}
.layout{display:grid;grid-template-columns:260px 1fr;max-width:1100px;margin:0 auto}
nav{position:sticky;top:58px;align-self:start;height:calc(100vh - 58px);overflow:auto;padding:20px 12px 20px 16px}
nav a{display:block;padding:9px 12px;margin-bottom:4px;border-left:3px solid transparent;color:var(--muted);text-decoration:none;font-weight:500;border-radius:0 8px 8px 0}
nav a:hover,nav a.on{color:var(--ink);background:var(--paper);border-left-color:var(--accent)}
main{padding:24px 20px 80px;min-width:0}
section{background:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;border:1px solid var(--line);border-radius:14px;padding:28px 28px 20px;margin-bottom:28px;box-shadow:inset 6px 0 0 #e8756f33}
h2{font:700 1.9rem/1.2 Literata,Georgia,serif;margin:0 0 18px}
h2 span{background:linear-gradient(transparent 55%,var(--mark) 55%);padding:0 4px}
h3{font:700 1.15rem Literata,Georgia,serif;margin:26px 0 8px}
p{margin:8px 0}
mark{background:linear-gradient(transparent 50%,var(--mark) 50%);color:inherit;padding:0 2px;font-weight:700}
ul,ol{margin:6px 0 6px;padding-left:1.3em}
li{margin:4px 0}
.def{padding:10px 14px;margin:10px 0;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--paper) 85%,transparent)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:12px 0}
.col{border:1px solid var(--line);border-radius:10px;padding:10px 16px;background:var(--paper)}
.col h4{margin:4px 0;font:700 1rem Literata,serif;color:var(--accent)}
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px;background:var(--paper)}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
th{background:var(--mark);color:var(--ink)}
.chain{list-style:none;padding:0 0 0 18px;border-left:3px solid var(--accent);margin:12px 0}
.chain li{position:relative;padding:4px 0 10px 14px}
.chain li::before{content:"";position:absolute;left:-26px;top:12px;width:11px;height:11px;border-radius:50%;background:var(--accent)}
.chain small{display:block;color:var(--muted)}
.hide{display:none}
@media(max-width:800px){
 #menuBtn{display:block}.top h1{font-size:1rem}
 .layout{grid-template-columns:1fr}
 nav{position:fixed;inset:58px 0 0 0;height:auto;background:var(--bg);transform:translateX(-100%);transition:transform .2s;z-index:9}
 nav.open{transform:none}
 main{padding:14px 10px 60px}section{padding:20px 16px 12px}h2{font-size:1.5rem}body{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}