:root {
  --bg: #e9ebe6; --paper: #ffffff; --ink: #202122; --muted: #54595d;
  --line: #c8ccd1; --link: #2a6b3c; --th: #eaecf0; --box: #f8f9fa;
  --code-bg: #f1f2f0; --warn-bg: #fef6e7; --warn-line: #d9a514;
  --client: #dff0e2; --server: #e3ebf7; --both: #efe6f5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121416; --paper: #1b1d20; --ink: #e2e4e6; --muted: #a2a9b1;
    --line: #3a3f45; --link: #86cf96; --th: #272b30; --box: #212428;
    --code-bg: #272b30; --warn-bg: #332a12; --warn-line: #c9981a;
    --client: #20362a; --server: #1f2c40; --both: #33263d;
  }
}
:root[data-theme="dark"] {
  --bg: #121416; --paper: #1b1d20; --ink: #e2e4e6; --muted: #a2a9b1;
  --line: #3a3f45; --link: #86cf96; --th: #272b30; --box: #212428;
  --code-bg: #272b30; --warn-bg: #332a12; --warn-line: #c9981a;
  --client: #20362a; --server: #1f2c40; --both: #33263d;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.7 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
main { max-width: 1000px; margin: 0 auto; padding: 20px 16px 64px; }
article {
  background: var(--paper); border: 1px solid var(--line);
  padding: 20px clamp(16px, 3.5vw, 36px) 36px;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
nav.crumb { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
h1 {
  font: 400 clamp(26px, 5vw, 32px)/1.3 Georgia, "Linux Libertine", "Songti SC", "SimSun", serif;
  margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.sub { color: var(--muted); font-size: 13px; margin: 6px 0 16px; }
h2 {
  font: 400 24px/1.3 Georgia, "Linux Libertine", "Songti SC", "SimSun", serif;
  margin: 32px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
h3 { font-size: 18px; margin: 24px 0 8px; }
h4 { font-size: 15px; margin: 18px 0 6px; }
p { margin: 8px 0; }
code {
  font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: .93em;
  background: var(--code-bg); padding: 1px 4px; border-radius: 2px;
}
pre {
  background: var(--code-bg); border: 1px solid var(--line); padding: 10px 14px;
  overflow-x: auto; font-size: 13px; line-height: 1.55; margin: 10px 0;
}
pre code { background: none; padding: 0; font-size: 1em; }
.formula {
  font-family: Georgia, "Times New Roman", serif; font-size: 17px; text-align: center;
  background: var(--box); border: 1px solid var(--line); padding: 10px 14px; margin: 12px 0; overflow-x: auto;
}
.hatnote { font-style: italic; color: var(--muted); padding-left: 1.6em; margin: 0 0 10px; }
.nb { color: var(--muted); font-size: 12px; }
.notice {
  background: var(--warn-bg); border: 1px solid var(--line); border-left: 8px solid var(--warn-line);
  padding: 8px 14px; margin: 14px 0;
}
.toc {
  display: inline-block; background: var(--box); border: 1px solid var(--line);
  padding: 8px 18px 10px 12px; margin: 14px 0 4px; font-size: 14px;
}
.toc strong { display: block; text-align: center; margin-bottom: 4px; }
.toc ol { margin: 0; padding-left: 22px; }
.toc ol ol { padding-left: 20px; }
.tablewrap { overflow-x: auto; margin: 10px 0; }
table.wikitable { border-collapse: collapse; font-size: 14px; background: var(--box); }
table.wikitable th, table.wikitable td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
table.wikitable th { background: var(--th); font-weight: 600; white-space: nowrap; }
table.wikitable td.c { background: var(--client); }
table.wikitable td.s { background: var(--server); }
table.wikitable td.b { background: var(--both); }
table.wikitable td.na { color: var(--muted); font-style: italic; }
table.packet { min-width: 100%; }
table.packet thead th { text-align: center; }
table.packet td.pid { white-space: nowrap; }
table.packet td.pid i { color: var(--muted); }
.infobox {
  float: right; width: 290px; margin: 0 0 14px 22px; border-collapse: collapse;
  border: 1px solid var(--line); font-size: 13px; background: var(--box);
}
.infobox caption { background: var(--th); border: 1px solid var(--line); border-bottom: 0; font-weight: 600; padding: 6px; font-size: 14px; }
.infobox th, .infobox td { padding: 5px 9px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.infobox th { width: 78px; font-weight: 600; }
dl.faq dt { font-weight: 600; margin-top: 14px; }
dl.faq dd { margin: 2px 0 0; }
footer { color: var(--muted); font-size: 12px; margin-top: 32px; border-top: 1px solid var(--line); padding-top: 10px; }
.tldr {
  background: var(--box); border: 1px solid var(--line); border-left: 8px solid var(--link);
  padding: 10px 14px; margin: 14px 0 18px;
}
.tldr p { margin: 0; }
.cardlist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px; margin: 14px 0 4px; padding: 0; list-style: none;
}
.cardlist li { border: 1px solid var(--line); background: var(--box); padding: 7px 12px; }
.cardlist a { font-weight: 600; }
.cardlist span { display: block; color: var(--muted); font-size: 12px; }
dl.terms dt { font-weight: 600; margin-top: 14px; }
dl.terms dd { margin: 2px 0 0; }
.notfound { text-align: center; padding: 40px 0 20px; }
.notfound a { margin: 0 10px; }
@media (max-width: 680px) {
  .infobox { float: none; width: 100%; margin: 0 0 14px; }
}