:root { --bg:#ffffff; --fg:#14202e; --muted:#51627a; --line:#d9e1ea; --panel:#f4f7fb; --accent:#0a6f8c; --accent-fg:#ffffff; --code:#eef2f7; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0a1220; --fg:#e6edf6; --muted:#9fb0c5; --line:#1f3150; --panel:#0f1d33; --accent:#33d6f5; --accent-fg:#0a1220; --code:#12233d; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
a { color:var(--accent); }
.skip { position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-fg); padding:.5rem 1rem; }
.skip:focus { left:0; z-index:10; }
.top { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.25rem; border-bottom:1px solid var(--line); background:var(--panel); }
.brand { font-weight:700; font-size:1.15rem; color:var(--fg); text-decoration:none; }
.brand span { color:var(--accent); font-weight:600; }
.links { display:flex; align-items:center; gap:1rem; font-size:.95rem; }
.links a { text-decoration:none; }
.links .cta { background:var(--accent); color:var(--accent-fg); padding:.4rem .9rem; border-radius:8px; font-weight:600; }
.wrap { display:grid; grid-template-columns:230px minmax(0,1fr); gap:2rem; max-width:1040px; margin:0 auto; padding:1.5rem 1.25rem 3rem; }
.side ul { list-style:none; margin:0; padding:0; position:sticky; top:1rem; }
.side a { display:block; padding:.45rem .7rem; border-radius:8px; color:var(--muted); text-decoration:none; }
.side a[aria-current="page"] { background:var(--panel); color:var(--fg); font-weight:600; border:1px solid var(--line); }
.side a:hover, .side a:focus-visible { color:var(--fg); }
main { min-width:0; max-width:760px; }
h1 { font-size:2rem; line-height:1.25; margin:.2rem 0 1rem; }
h2 { font-size:1.4rem; margin:2.2rem 0 .6rem; padding-top:.4rem; border-top:1px solid var(--line); }
h3 { font-size:1.1rem; margin:1.6rem 0 .4rem; }
main > h2:first-of-type { border-top:0; }
p, li { max-width:70ch; }
ol, ul { padding-left:1.4rem; }
li { margin:.35rem 0; }
code { background:var(--code); padding:.1rem .35rem; border-radius:5px; font-size:.92em; }
blockquote { margin:1.2rem 0; padding:.6rem 1rem; border-left:4px solid var(--accent); background:var(--panel); border-radius:0 8px 8px 0; }
blockquote p { margin:.3rem 0; }
table { border-collapse:collapse; width:100%; margin:1rem 0; font-size:.95rem; display:block; overflow-x:auto; }
th, td { text-align:left; padding:.55rem .7rem; border:1px solid var(--line); vertical-align:top; }
th { background:var(--panel); }
.foot { border-top:1px solid var(--line); padding:1.25rem; text-align:center; color:var(--muted); font-size:.9rem; }
a:focus-visible, .skip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (max-width: 760px) {
  .wrap { grid-template-columns:1fr; gap:1rem; }
  .side ul { position:static; display:flex; flex-wrap:wrap; gap:.4rem; }
  h1 { font-size:1.65rem; }
}
