:root{
  --bg:#ffffff; --bg2:#f7f7f5; --bg3:#efefec;
  --fg:#1a1a19; --fg2:#4a4a46; --fg3:#78786f;
  --line:#e2e2dd; --line2:#cfcfc8;
  --acc:#a8480c; --acc2:#c2570f; --accbg:#fdf3ec;
  --code:#f5f4f1; --codefg:#33322d;
  --warn:#8a5a00; --warnbg:#fdf6e3;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sb:290px; --toc:230px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16171a; --bg2:#1c1e22; --bg3:#24262b;
    --fg:#e8e8e6; --fg2:#b6b7b4; --fg3:#85878a;
    --line:#2c2f34; --line2:#3b3f45;
    --acc:#f0a35a; --acc2:#f7b877; --accbg:#2a2018;
    --code:#1b1d21; --codefg:#d5d6d3;
    --warn:#e0b25f; --warnbg:#272014;
  }
}
:root[data-theme="light"]{
  --bg:#ffffff; --bg2:#f7f7f5; --bg3:#efefec;
  --fg:#1a1a19; --fg2:#4a4a46; --fg3:#78786f;
  --line:#e2e2dd; --line2:#cfcfc8;
  --acc:#a8480c; --acc2:#c2570f; --accbg:#fdf3ec;
  --code:#f5f4f1; --codefg:#33322d;
  --warn:#8a5a00; --warnbg:#fdf6e3;
}
:root[data-theme="dark"]{
  --bg:#16171a; --bg2:#1c1e22; --bg3:#24262b;
  --fg:#e8e8e6; --fg2:#b6b7b4; --fg3:#85878a;
  --line:#2c2f34; --line2:#3b3f45;
  --acc:#f0a35a; --acc2:#f7b877; --accbg:#2a2018;
  --code:#1b1d21; --codefg:#d5d6d3;
  --warn:#e0b25f; --warnbg:#272014;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.65;overflow-x:hidden}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Топбар ── */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  height:56px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;color:var(--fg);font-weight:650;
  letter-spacing:-.01em;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand svg{color:var(--acc);flex:none}
.brand i{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--fg3);
  letter-spacing:.02em;margin-top:-3px}
.burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;
  padding:0 7px;background:none;border:1px solid var(--line);border-radius:7px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--fg);border-radius:2px}
.theme{margin-left:auto;display:grid;place-items:center;width:34px;height:34px;flex:none;
  background:none;border:1px solid var(--line);border-radius:7px;color:var(--fg2);cursor:pointer}
.theme:hover{color:var(--acc);border-color:var(--line2)}

.search{position:relative;margin-left:auto;width:min(340px,38vw)}
.search input{width:100%;height:34px;padding:0 12px;font:inherit;font-size:14px;
  background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:8px;outline:none}
.search input:focus{border-color:var(--acc);background:var(--bg)}
.res{position:absolute;top:40px;right:0;width:min(460px,88vw);max-height:60vh;overflow-y:auto;
  background:var(--bg);border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.16);display:none}
.res.on{display:block}
.res a{display:block;padding:9px 13px;border-bottom:1px solid var(--line);color:var(--fg)}
.res a:last-child{border-bottom:none}
.res a:hover{background:var(--bg2);text-decoration:none}
.res b{display:block;font-size:14px;font-weight:600}
.res span{display:block;font-size:12px;color:var(--fg3)}
.res .empty{padding:14px;font-size:14px;color:var(--fg3)}

/* ── Каркас ── */
.shell{display:grid;grid-template-columns:var(--sb) minmax(0,1fr) var(--toc);
  max-width:1560px;margin:0 auto;align-items:start}
.sidebar{position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
  padding:20px 8px 60px 16px;border-right:1px solid var(--line);scrollbar-width:thin}
.nav ul{list-style:none;margin:0 0 18px;padding:0}
.nav-g{margin:20px 0 7px;padding:0 10px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg3)}
.nav li a{display:block;padding:6px 10px;border-radius:7px;color:var(--fg2);
  border-left:2px solid transparent}
.nav li a:hover{background:var(--bg2);color:var(--fg);text-decoration:none}
.nav li a b{display:block;font-size:14px;font-weight:550;line-height:1.35}
.nav li a i{display:block;font-style:normal;font-size:11.5px;color:var(--fg3);line-height:1.35;
  margin-top:1px}
.nav li.cur>a{background:var(--accbg);color:var(--acc);border-left-color:var(--acc)}
.nav li.cur>a b{font-weight:680}
.nav li.cur>a i{color:var(--acc2)}
.scrim{display:none}

.content{min-width:0;padding:34px 44px 80px;max-width:920px}

/* ── Правое оглавление ── */
.toc{position:sticky;top:56px;max-height:calc(100vh - 56px);overflow-y:auto;
  padding:34px 18px 60px 6px;scrollbar-width:thin}
.toc-h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:9px}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc li a{display:block;padding:4px 0 4px 12px;margin-left:-1px;font-size:12.5px;line-height:1.4;
  color:var(--fg3);border-left:2px solid transparent}
.toc li a:hover{color:var(--fg);text-decoration:none}
.toc li a.on{color:var(--acc);border-left-color:var(--acc)}
.toc li.l3 a{padding-left:24px;font-size:12px}

/* ── Hero ── */
.hero{padding:26px 0 34px;border-bottom:1px solid var(--line);margin-bottom:34px}
.hero-kicker{display:inline-block;padding:4px 11px;margin-bottom:16px;font-size:12px;font-weight:600;
  letter-spacing:.03em;color:var(--acc);background:var(--accbg);border-radius:99px}
.hero-h{margin:0 0 14px;font-size:clamp(30px,4.6vw,46px);line-height:1.12;font-weight:730;
  letter-spacing:-.025em}
.hero-h span{color:var(--acc)}
.hero-p{margin:0 0 24px;font-size:17px;line-height:1.6;color:var(--fg2);max-width:620px}
.hero-btns{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:32px}
.btn{display:inline-block;padding:10px 20px;font-size:15px;font-weight:600;border-radius:9px;
  border:1px solid var(--line2);color:var(--fg)}
.btn:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc2);border-color:var(--acc2);color:#fff}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px}
.hero-stats div{padding:13px 15px;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
.hero-stats b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.hero-stats span{display:block;font-size:12px;color:var(--fg3);margin-top:2px}

/* ── Контент ── */
.md h1{font-size:clamp(27px,3.4vw,36px);line-height:1.2;font-weight:720;letter-spacing:-.022em;
  margin:0 0 22px}
.md h2{font-size:23px;font-weight:670;letter-spacing:-.012em;line-height:1.3;
  margin:46px 0 14px;padding-top:18px;border-top:1px solid var(--line)}
.md h3{font-size:18px;font-weight:660;line-height:1.35;margin:30px 0 10px}
.md h4{font-size:15.5px;font-weight:660;margin:22px 0 8px;color:var(--fg2)}
.md h2 .headerlink,.md h3 .headerlink,.md h4 .headerlink{
  margin-left:8px;font-size:.75em;color:var(--line2);opacity:0;text-decoration:none}
.md h2:hover .headerlink,.md h3:hover .headerlink,.md h4:hover .headerlink{opacity:1}
.md p{margin:0 0 15px}
.md ul,.md ol{margin:0 0 15px;padding-left:24px}
.md li{margin:5px 0}
.md li>ul,.md li>ol{margin:5px 0}
.md hr{border:none;border-top:1px solid var(--line);margin:34px 0}
.md strong{font-weight:680}
.md blockquote{margin:18px 0;padding:12px 18px;border-left:3px solid var(--acc);
  background:var(--warnbg);border-radius:0 8px 8px 0;color:var(--fg2)}
.md blockquote p:last-child{margin:0}

.md code{font-family:var(--mono);font-size:.875em;padding:2px 5px;border-radius:5px;
  background:var(--code);color:var(--codefg);border:1px solid var(--line)}
.md pre{margin:18px 0;padding:15px 17px;background:var(--code);border:1px solid var(--line);
  border-radius:10px;overflow-x:auto;line-height:1.5}
.md pre code{padding:0;border:none;background:none;font-size:12.6px;white-space:pre;color:var(--codefg)}

.tw{margin:18px 0;overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.md table{border-collapse:collapse;width:100%;font-size:14px}
.md th,.md td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
.md th{background:var(--bg2);font-weight:650;font-size:13px;white-space:nowrap}
.md tr:last-child td{border-bottom:none}
.md tbody tr:hover{background:var(--bg2)}
.md td code{white-space:nowrap}

/* ── Низ страницы ── */
.pagenav{display:flex;gap:14px;justify-content:space-between;margin:52px 0 0;
  padding-top:24px;border-top:1px solid var(--line)}
.pn{flex:1;max-width:47%;padding:13px 17px;border:1px solid var(--line);border-radius:10px;
  color:var(--fg)}
.pn:hover{border-color:var(--acc);text-decoration:none}
.pn span{display:block;font-size:11.5px;color:var(--fg3);margin-bottom:3px}
.pn b{font-size:14.5px;font-weight:620;color:var(--acc)}
.pn.next{text-align:right}
.foot{margin-top:46px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--fg3)}
.foot p{margin:0 0 8px}
.foot .dis{font-size:12px;line-height:1.55}

/* ── Адаптив ── */
@media (max-width:1240px){
  .shell{grid-template-columns:var(--sb) minmax(0,1fr)}
  .toc{display:none}
  .content{padding:30px 32px 70px}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .burger{display:flex}
  .brand i{display:none}
  .search{width:auto;flex:1;max-width:none}
  .sidebar{position:fixed;top:56px;left:0;width:298px;max-width:86vw;z-index:45;
    background:var(--bg);transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:2px 0 20px rgba(0,0,0,.16)}
  body.navopen .sidebar{transform:none}
  body.navopen .scrim{display:block;position:fixed;inset:56px 0 0;z-index:40;
    background:rgba(0,0,0,.42)}
  .content{padding:24px 18px 60px}
  .md pre code{font-size:11.6px}
  .pagenav{flex-direction:column}
  .pn{max-width:none}
  .pn.next{text-align:left}
}
@media print{
  .topbar,.sidebar,.toc,.pagenav,.scrim{display:none}
  .shell{display:block}
  .content{max-width:none;padding:0}
}
