:root { --bg:#f5f6f8; --card:#fff; --text:#1f2933; --muted:#667085; --accent:#0f9d8a; --accent-d:#0b7a6b; --line:#e3e7ec; --note:#eef7f5; --warn:#fff6e5; --side:#263238; --side-t:#cfd8dc; }
@media (prefers-color-scheme: dark) { :root { --bg:#15191c; --card:#1d2328; --text:#e6eaed; --muted:#9aa5ae; --line:#2c353b; --note:#18302c; --warn:#33291a; --side:#0f1315; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.65 "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); display:flex; min-height:100vh; }
aside { width:300px; flex:none; background:var(--side); color:var(--side-t); padding:20px 0; position:sticky; top:0; height:100vh; overflow:auto; }
.brand { padding:0 22px 16px; border-bottom:1px solid #ffffff22; margin-bottom:10px; }
.brand a { color:#fff; font-weight:600; font-size:18px; text-decoration:none; display:block; }
.brand span { font-size:13px; opacity:.7; }
details.grp > summary { cursor:pointer; padding:10px 22px; font-weight:600; color:#fff; list-style:none; }
details.grp > summary::before { content:"▸ "; }
details.grp[open] > summary::before { content:"▾ "; }
aside ul { list-style:none; margin:0; padding:0 0 8px; }
aside li a { display:block; padding:7px 22px 7px 40px; color:var(--side-t); text-decoration:none; font-size:15px; border-left:3px solid transparent; }
aside li a:hover { background:#ffffff12; }
aside li a.active { background:#ffffff1c; color:#fff; border-left-color:var(--accent); }
main { flex:1; min-width:0; padding:36px 48px 60px; }
article { max-width:960px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:34px 44px 40px; }
h1 { margin:0 0 6px; font-size:30px; } h2 { margin:34px 0 10px; font-size:22px; border-bottom:1px solid var(--line); padding-bottom:6px; } h3 { margin:24px 0 8px; font-size:18px; }
p, li { max-width:78ch; text-align:justify; hyphens:auto; } li { margin:3px 0; }
a { color:var(--accent-d); }
code { background:#0000000f; padding:1px 6px; border-radius:4px; font-size:.92em; }
.tw { overflow-x:auto; margin:14px 0; } table { border-collapse:collapse; width:100%; font-size:15px; }
th, td { border:1px solid var(--line); padding:7px 11px; text-align:left; vertical-align:top; } th { background:#00000008; font-weight:600; }
figure { margin:20px 0; text-align:center; } figure img { max-width:100%; border:1px solid var(--line); border-radius:6px; box-shadow:0 1px 4px #0002; }
figcaption { font-size:14px; color:var(--muted); margin-top:6px; }
.note { background:var(--note); border-left:4px solid var(--accent); padding:4px 18px; margin:16px 0; border-radius:4px; } .note p { margin:8px 0; }
.pager { max-width:960px; margin:18px auto 0; display:flex; justify-content:space-between; gap:12px; } .pager a { background:var(--card); border:1px solid var(--line); padding:10px 16px; border-radius:8px; text-decoration:none; }
footer { max-width:960px; margin:24px auto 0; color:var(--muted); font-size:13px; text-align:center; }
.burger { display:none; position:fixed; top:10px; left:10px; z-index:20; font-size:22px; background:var(--side); color:#fff; border:0; border-radius:6px; padding:4px 11px; }
@media (max-width: 900px) { aside { position:fixed; left:-310px; z-index:10; transition:left .2s; } body.menu aside { left:0; } main { padding:60px 14px 40px; } article { padding:22px 18px; } .burger { display:block; } }
@media print { aside, .burger, .pager { display:none; } body { display:block; background:#fff; } main { padding:0; } article { border:0; padding:0; max-width:none; } h2 { break-after:avoid; } figure { break-inside:avoid; } }