:root { --accent:#2f6db5; --ink:#1d2530; --mut:#667; --line:#d7dde5; --bg:#fff; }
* { box-sizing:border-box; }
html { font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.55; color:var(--ink); }
body { margin:0; background:var(--bg); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

header.site { border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:5; }
header.site .inner { max-width:1180px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:baseline; gap:14px; }
header.site .brand { font-size:19px; font-weight:700; color:var(--ink); }
header.site .brand b { color:var(--accent); }
header.site .doc { color:var(--mut); font-size:14px; margin-left:8px; }
label.burger { display:none; margin-left:auto; cursor:pointer; font-size:15px;
  color:var(--accent); border:1px solid var(--line); border-radius:6px; padding:4px 10px; }
#navtoggle { display:none; }

.layout { max-width:1180px; margin:0 auto; display:flex; align-items:flex-start; }
nav.side { width:260px; flex:none; padding:22px 8px 40px 20px; position:sticky; top:49px;
  max-height:calc(100vh - 49px); overflow:auto; font-size:14.5px; }
nav.side a { display:block; color:var(--ink); padding:4px 8px; border-radius:6px; }
nav.side a:hover { background:#eef2f8; text-decoration:none; }
nav.side a.cur { background:#e6eefb; font-weight:600; color:var(--accent); }
nav.side .n { color:var(--accent); font-weight:600; margin-right:4px; }
nav.side ul { list-style:none; margin:4px 0 8px 0; padding-left:18px; }
nav.side ul a { color:#445; font-size:13.5px; padding:2.5px 8px; }

main { flex:1; min-width:0; max-width:850px; padding:26px 20px 60px 34px; }
main h1 { font-size:29px; line-height:1.25; margin:0 0 18px 0; padding-bottom:10px;
  border-bottom:3px solid var(--accent); }
main h1 .n { color:var(--accent); }
main h2 { font-size:21px; margin:34px 0 12px 0; }
main h3 { font-size:17px; margin:24px 0 10px 0; }
main p, main li { text-align:justify; hyphens:auto; }
main ul, main ol { padding-left:24px; }

figure { margin:22px auto; text-align:center; }
figure img { max-width:100%; height:auto; }
figcaption { font-size:13px; color:var(--mut); margin-top:6px; }

table { border-collapse:collapse; margin:16px 0 22px 0; width:100%; font-size:14.5px; }
th, td { border:1px solid #b6bfca; padding:7px 10px; vertical-align:top; text-align:left; }
th { background:#eef1f5; }

blockquote { margin:18px 0; padding:12px 18px; border-left:5px solid var(--accent);
  background:#eef4fb; border-radius:0 8px 8px 0; }
blockquote p { margin:6px 0; }
code { font-family:ui-monospace,Consolas,monospace; font-size:14px; }

.pn { display:flex; justify-content:space-between; gap:16px; margin-top:44px;
  padding-top:16px; border-top:1px solid var(--line); font-size:15px; }
.pn a { max-width:48%; }
footer.site { max-width:1180px; margin:0 auto; padding:14px 20px 30px; color:var(--mut);
  font-size:13px; border-top:1px solid var(--line); }

/* заглавная */
.cover h1 { font-size:34px; border:none; margin-bottom:4px; padding-bottom:0; }
.cover .sub { color:#444; font-size:18px; max-width:560px; margin:6px 0 4px 0; }
.cover .doctype { color:var(--accent); font-weight:700; font-size:20px; margin:10px 0 26px 0; }
.cover .rule { width:230px; height:5px; background:var(--accent); margin:14px 0 20px 0; }
.toc1 { font-weight:600; margin:12px 0 2px 0; font-size:16.5px; }
.toc2 { margin:2px 0 2px 26px; font-size:14.5px; }
.updated { color:var(--mut); font-size:13.5px; margin-top:34px; }

@media (max-width: 920px) {
  label.burger { display:block; }
  nav.side { display:none; position:fixed; top:49px; left:0; right:0; background:#fff;
    width:auto; max-height:calc(100vh - 49px); border-bottom:1px solid var(--line);
    box-shadow:0 8px 20px rgba(0,0,0,.08); padding:14px 20px 20px; }
  #navtoggle:checked ~ .layout nav.side { display:block; }
  main { padding:20px 16px 50px; }
  main p, main li { text-align:left; }
}