:root {
  --ink:#10201c; --muted:#5f6f68; --faint:#8a948e; --faint2:#717b75;
  --paper:#fafaf6; --card:#fff; --line:#dde2da; --green:#0a624b;
  --green-bg:#e3eee7; --lime:#b9dc82; --amber:#a06a12; --dark:#081512;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0; background:var(--paper); color:var(--ink); line-height:1.75;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif; font-size:14px;
}
a { color:var(--green) }
code {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:#eef1ec; padding:1px 5px; border-radius:3px; word-break:break-all;
}
pre {
  background:var(--dark); color:#dceada; border-radius:8px; padding:13px 16px;
  overflow-x:auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; line-height:1.65;
}
pre code { background:none; color:inherit; padding:0 }
pre .c { color:#8fa89d }
header.top {
  background:var(--card); border-bottom:1px solid var(--line); position:sticky;
  top:0; z-index:5;
}
.topin {
  max-width:1180px; margin:auto; display:flex; align-items:center; gap:12px;
  padding:10px 20px;
}
.brand {
  display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.04em;
  font-size:15px; text-decoration:none; color:var(--ink);
}
.brand svg { width:26px; height:26px; flex:none }
.topin .tag {
  font-size:11px; color:var(--muted); background:var(--green-bg); border-radius:99px;
  padding:2px 10px; font-weight:700;
}
.topin .sp { flex:1 }
.topin a.lnk { font-size:12.5px; text-decoration:none; padding:5px 10px; border-radius:6px }
.topin a.lnk:hover, .topin a.lnk:focus-visible { background:var(--green-bg) }
.language-switch { white-space:nowrap; font-size:12px; color:var(--faint2) }
.language-switch a { padding:4px 5px; text-underline-offset:3px }
.language-switch [aria-current="page"] { color:var(--ink); font-weight:800; text-decoration:none }
.layout { display:grid; grid-template-columns:230px 1fr; max-width:1180px; margin:auto }
.side {
  position:sticky; top:49px; align-self:start; max-height:calc(100vh - 49px);
  overflow:auto; padding:24px 14px; border-right:1px solid var(--line);
}
.side nav a {
  display:block; padding:5px 10px; border-radius:5px; text-decoration:none;
  color:var(--ink); font-size:12.5px;
}
.side nav a:hover, .side nav a:focus-visible { background:var(--green-bg) }
.side nav a.sub2 { padding-left:22px; font-size:12px; color:var(--muted) }
.side nav .g {
  font-size:10.5px; font-weight:800; letter-spacing:.14em; color:var(--muted);
  text-transform:uppercase; margin:14px 0 3px; padding-left:10px;
}
main { padding:34px 40px 90px; min-width:0 }
section { max-width:820px }
h1 { font-size:26px; letter-spacing:-.02em; margin:0 0 4px }
.lede { color:var(--muted); font-size:13.5px; margin-bottom:8px }
h2 {
  font-size:19px; margin:46px 0 12px; padding-bottom:7px;
  border-bottom:2px solid var(--line); scroll-margin-top:64px;
}
h3 { font-size:15px; margin:26px 0 6px; scroll-margin-top:64px }
h3 .pn {
  font:800 11px ui-monospace,monospace; color:var(--green); margin-right:8px;
  letter-spacing:.08em;
}
p { margin:8px 0 }
table { border-collapse:collapse; width:100%; background:var(--card); font-size:12.5px }
th, td { border:1px solid var(--line); padding:6px 10px; text-align:left; vertical-align:top }
th { background:#eef0e9; font-size:12px; white-space:nowrap }
td.d { white-space:nowrap; font:700 12px ui-monospace,monospace; color:var(--green) }
.note { font-size:12px; color:var(--muted) }
.tblwrap { overflow-x:auto; margin:12px 0 }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:13px 18px; margin:12px 0;
}
.warn { border-left:5px solid var(--amber) }
.hl { border-left:5px solid var(--green) }
.tiles {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:9px; margin:14px 0;
}
.tile { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:11px 13px }
.tile b {
  display:block; font:800 19px/1.2 ui-monospace,monospace;
  letter-spacing:-.04em; color:var(--green);
}
.tile span { font-size:10.5px; color:var(--muted) }
.step { display:flex; gap:12px; margin:14px 0 }
.step .n {
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--green);
  color:#fff; font:800 13px/26px ui-monospace,monospace; text-align:center;
}
.step .bd { min-width:0; flex:1 }
.step .bd b { font-size:13.5px }
ul { padding-left:22px }
li { margin:4px 0; font-size:13.5px }
figure.svgfig {
  margin:14px 0; background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:14px; overflow-x:auto;
}
figure.svgfig svg { max-width:100%; height:auto }
figure.svgfig figcaption { font-size:11.5px; color:var(--muted); margin-top:6px }
.horizon {
  display:grid; grid-template-columns:110px 1fr; border:1px solid var(--line);
  border-radius:8px; overflow:hidden; background:var(--card); margin:10px 0;
}
.horizon .hd {
  background:var(--green-bg); color:var(--green); font-weight:800; font-size:12.5px;
  display:grid; place-items:center; padding:12px; text-align:center; line-height:1.5;
}
.horizon .bd { padding:11px 16px; font-size:13px; line-height:1.8 }
footer {
  margin-top:60px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted); max-width:820px;
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }
@media (max-width:940px) {
  .topin a.optional { display:none }
}
@media (max-width:840px) {
  .layout { grid-template-columns:1fr }
  .side { display:none }
  main { padding:24px 18px 70px }
  .horizon { grid-template-columns:1fr }
  .topin { gap:6px; padding-inline:12px }
  .topin .tag { display:none }
  .language-switch { font-size:11.5px }
}