:root{--brand:#0f9d58;--brandd:#0b7a44;--bg:#fff;--side:#eefaf2;--text:#222;--muted:#666;--line:#ddd;--code:#f3f3f3}
@media(prefers-color-scheme:dark){:root{--bg:#121212;--side:#14231a;--text:#eee;--muted:#a8a8a8;--line:#333;--code:#262626;--brandd:#4cc38a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--brandd);text-decoration:none}
a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
header{display:flex;align-items:center;gap:24px;padding:14px 24px;flex-wrap:wrap}
.logo{font:700 28px Georgia,serif;color:var(--text)}.logo b{color:var(--brand)}
.search{flex:1 1 260px;max-width:600px;border:1px solid var(--line);border-radius:12px;padding:4px 16px}
.search input{width:100%;border:0;background:none;color:var(--text);font:inherit;padding:8px 0}
.menus{display:flex;gap:28px;margin-left:auto;font-weight:600}.menus a{color:var(--text)}
.langs{background:var(--brand);display:flex;gap:26px;padding:12px 24px;overflow-x:auto;white-space:nowrap}
.langs a{color:#fff;font-size:18px}.langs a[aria-current]{font-weight:700;text-decoration:underline;text-underline-offset:6px}
footer{border-top:1px solid var(--line);padding:24px;color:var(--muted);text-align:center;margin-top:24px}
.layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}
.toc{background:var(--side);padding:18px 16px;min-height:80vh;font-size:16px;position:sticky;top:0;max-height:100vh;overflow:auto}
.toc h2{font-size:19px;margin:0 0 6px}.toc h3{font-size:17px;margin:20px 0 4px}
.toc ul{list-style:none;padding:0;margin:0}.toc li a{display:block;padding:3px 0;color:var(--text)}
.toc li a[aria-current]{color:var(--brandd);font-weight:700}
article{padding-right:24px;min-width:0;max-width:900px}
.crumbs{font-size:14px;margin:14px 0}.crumbs a{background:var(--side);padding:2px 8px;border-radius:4px}
h1{font-size:34px;line-height:1.25;font-weight:500;margin:12px 0 4px}
article h2{font-size:24px;font-weight:500;margin:0 0 6px}
.pat{border-top:1px solid var(--line);padding:22px 0 6px;scroll-margin-top:12px}
.use{background:var(--side);border-left:4px solid var(--brand);padding:8px 14px;border-radius:4px}
pre{position:relative;background:var(--code);padding:14px 16px;border-radius:8px;overflow-x:auto;font-size:15px;line-height:1.5}
code{font-family:ui-monospace,Consolas,monospace}
.copy{position:absolute;top:6px;right:6px;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:6px;padding:2px 10px;font-size:13px;cursor:pointer}
.np{display:flex;justify-content:space-between;gap:12px;margin:40px 0}
.np a{background:var(--brand);color:#fff;padding:8px 18px;border-radius:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:12px 0 8px}.cards a{border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);display:block}.cards a b{color:var(--brandd);display:block}.cards a span{font-size:14px;color:var(--muted);line-height:1.4;display:block}
.pg h2{margin:26px 0 6px}
@media(max-width:900px){.layout{grid-template-columns:1fr}.toc{position:static;min-height:0;max-height:none}.menus{display:none}h1{font-size:28px}article{padding:0 16px}}
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
th{background:var(--side)}
pre.dia{font-size:13px;line-height:1.35}
article ul{padding-left:22px}