:root {
  --bg:           #ffffff;
  --bg-subtle:    #f8f8f6;
  --bg-code:      #f3f3f0;
  --border:       #e8e8e4;
  --border-dark:  #d0d0ca;
  --text:         #1a1a18;
  --text-muted:   #6b6b65;
  --text-faint:   #9b9b94;
  --accent:       #2d6a1f;
  --accent-light: #eaf3e0;
  --accent-mid:   #4a9e30;
  --link:         #1a5c9e;
  --warn-bg:      #fffbea;
  --warn-border:  #f0d060;
  --warn-text:    #7a5a00;
  --tip-bg:       #eaf3e0;
  --tip-border:   #7dc55a;
  --tip-text:     #1e4d10;
  --sidebar-w:    280px;
  --header-h:     56px;
  --radius:       8px;
  --radius-sm:    4px;
  --shadow:       0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
code {
  font-family:'DM Mono',monospace;
  font-size:13px;
  background:var(--bg-code);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:1px 6px;
}
pre {
  background:var(--text);
  color:#e8e8e0;
  border-radius:var(--radius);
  padding:1.25rem 1.5rem;
  overflow-x:auto;
  margin:1.5rem 0;
  font-family:'DM Mono',monospace;
  font-size:13px;
  line-height:1.6;
}
pre code { background:none; border:none; padding:0; color:inherit; font-size:inherit; }
/* ── Header ── */
.hdr {
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 1.5rem;
  gap:1rem;
  z-index:100;
  box-shadow:0 1px 0 var(--border);
}
.hdr-logo {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.hdr-logo-mark {
  width:30px; height:30px;
  background:var(--accent);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:14px;
  letter-spacing:-0.5px;
}
.hdr-logo-text {
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--text);
  line-height:1.1;
}
.hdr-logo-sub {
  font-size:10px;
  font-weight:400;
  color:var(--text-faint);
  display:block;
  letter-spacing:0.05em;
}
.hdr-search {
  flex:1;
  max-width:380px;
  margin-left:1rem;
}
.hdr-search input {
  width:100%;
  height:34px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:0 12px 0 36px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  color:var(--text);
  background:var(--bg-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9b94' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 11px center;
  outline:none;
  transition:border-color .15s;
}
.hdr-search input:focus { border-color:var(--accent-mid); }
.hdr-search input::placeholder { color:var(--text-faint); }
.hdr-links {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:13px;
  color:var(--text-muted);
}
.hdr-links a { color:var(--text-muted); }
.hdr-links a:hover { color:var(--text); text-decoration:none; }
.hdr-version {
  background:var(--accent-light);
  color:var(--accent);
  font-family:'DM Mono',monospace;
  font-size:11px;
  font-weight:500;
  padding:2px 8px;
  border-radius:20px;
  border:1px solid var(--tip-border);
}
/* ── Layout ── */
.layout {
  display:flex;
  padding-top:var(--header-h);
  min-height:100vh;
}
/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-w);
  flex-shrink:0;
  position:fixed;
  top:var(--header-h);
  bottom:0;
  left:0;
  overflow-y:auto;
  border-right:1px solid var(--border);
  background:var(--bg-subtle);
  padding:1.5rem 0 3rem;
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border-dark); border-radius:2px; }
.nav-section { margin-bottom:0.25rem; }
.nav-section-title {
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:1rem 1.25rem 0.4rem;
  display:block;
}
.nav-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 1.25rem;
  font-size:13.5px;
  color:var(--text-muted);
  text-decoration:none;
  border-left:2px solid transparent;
  transition:all .12s;
  line-height:1.3;
}
.nav-item:hover {
  color:var(--text);
  background:rgba(0,0,0,.03);
  text-decoration:none;
}
.nav-item.active {
  color:var(--accent);
  border-left-color:var(--accent);
  background:var(--accent-light);
  font-weight:500;
}
.nav-item .nav-icon {
  width:16px;
  height:16px;
  flex-shrink:0;
  opacity:0.5;
}
.nav-item.active .nav-icon { opacity:1; }
.nav-sub { padding-left:2.25rem; }
.nav-sub .nav-item { font-size:13px; padding:4px 1.25rem 4px 0; border-left:none; }
.nav-sub .nav-item.active { color:var(--accent); font-weight:500; background:none; }
/* ── Main content ── */
.main {
  margin-left:var(--sidebar-w);
  flex:1;
  min-width:0;
  display:flex;
}
.content {
  flex:1;
  min-width:0;
  max-width:740px;
  padding:3rem 3rem 6rem;
}
/* ── TOC ── */
.toc {
  width:200px;
  flex-shrink:0;
  position:sticky;
  top:calc(var(--header-h) + 2rem);
  align-self:flex-start;
  padding:0 1.5rem;
  display:none;
}
@media(min-width:1200px) { .toc { display:block; } }
.toc-title {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:0.75rem;
}
.toc-list { list-style:none; }
.toc-list li { margin-bottom:0.25rem; }
.toc-list a {
  font-size:12.5px;
  color:var(--text-muted);
  text-decoration:none;
  display:block;
  padding:2px 0;
  border-left:2px solid var(--border);
  padding-left:10px;
  transition:all .12s;
  line-height:1.4;
}
.toc-list a:hover { color:var(--text); border-color:var(--border-dark); }
.toc-list a.active { color:var(--accent); border-color:var(--accent); font-weight:500; }
/* ── Typography ── */
.page-label {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent-mid);
  margin-bottom:0.75rem;
  display:block;
}
h1 {
  font-family:'Syne',sans-serif;
  font-size:32px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--text);
  margin-bottom:1rem;
}
h2 {
  font-family:'Syne',sans-serif;
  font-size:20px;
  font-weight:700;
  color:var(--text);
  margin:2.5rem 0 0.75rem;
  padding-top:2.5rem;
  border-top:1px solid var(--border);
  letter-spacing:-0.01em;
}
h2:first-of-type { margin-top:2rem; border-top:none; padding-top:0; }
h3 {
  font-family:'Syne',sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--text);
  margin:1.75rem 0 0.5rem;
}
p { margin-bottom:1rem; color:var(--text); }
ul,ol { margin:0.75rem 0 1rem 1.25rem; }
li { margin-bottom:0.35rem; }
li > ul,li > ol { margin:0.35rem 0 0.35rem 1.25rem; }
strong { font-weight:500; }
hr { border:none; border-top:1px solid var(--border); margin:2rem 0; }
/* ── Callouts ── */
.callout {
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  margin:1.5rem 0;
  display:flex;
  gap:0.75rem;
  align-items:flex-start;
}
.callout-icon { flex-shrink:0; margin-top:1px; font-size:16px; }
.callout-body { flex:1; min-width:0; }
.callout-body p { margin:0; font-size:14px; line-height:1.6; }
.callout-body p + p { margin-top:0.5rem; }
.callout-title { font-weight:600; font-size:13px; margin-bottom:0.3rem; }
.callout.tip { background:var(--tip-bg); border:1px solid var(--tip-border); }
.callout.tip .callout-title { color:var(--tip-text); }
.callout.tip .callout-body p { color:var(--tip-text); }
.callout.warn { background:var(--warn-bg); border:1px solid var(--warn-border); }
.callout.warn .callout-title { color:var(--warn-text); }
.callout.warn .callout-body p { color:var(--warn-text); }
.callout.info { background:#eef4fb; border:1px solid #a8c8e8; }
.callout.info .callout-title { color:#1a4a7a; }
.callout.info .callout-body p { color:#1a4a7a; }
/* ── Steps ── */
.steps { margin:1.5rem 0; counter-reset:step; }
.step {
  display:flex;
  gap:1rem;
  margin-bottom:1.5rem;
  align-items:flex-start;
}
.step-num {
  width:28px; height:28px;
  border-radius:50%;
  background:var(--text);
  color:#fff;
  font-family:'Syne',sans-serif;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}
.step-body { flex:1; min-width:0; }
.step-body p { margin:0; }
.step-body p + p { margin-top:0.5rem; }
/* ── Requirements table ── */
.req-table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:14px; }
.req-table th {
  text-align:left;
  font-family:'Syne',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:0.5rem 1rem;
  border-bottom:2px solid var(--border);
}
.req-table td {
  padding:0.65rem 1rem;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.req-table tr:last-child td { border-bottom:none; }
.req-table .req-label { font-weight:500; white-space:nowrap; }
.req-table .badge {
  display:inline-block;
  font-size:11px;
  font-weight:600;
  padding:2px 8px;
  border-radius:20px;
}
.badge-required { background:#fde8e8; color:#b91c1c; }
.badge-optional { background:var(--bg-code); color:var(--text-muted); }
.badge-recommended { background:var(--accent-light); color:var(--accent); }
/* ── Next/Prev ── */
.doc-nav {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:4rem;
  padding-top:2rem;
  border-top:1px solid var(--border);
}
.doc-nav-card {
  flex:1;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  text-decoration:none;
  transition:all .15s;
  min-width:0;
}
.doc-nav-card:hover { border-color:var(--accent-mid); background:var(--accent-light); text-decoration:none; }
.doc-nav-card.next { text-align:right; }
.doc-nav-label { font-size:11px; color:var(--text-faint); font-weight:500; text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:4px; }
.doc-nav-title { font-family:'Syne',sans-serif; font-size:14px; font-weight:700; color:var(--text); display:block; }
/* ── Search results ── */
#search-results {
  position:absolute;
  top:calc(var(--header-h) - 4px);
  left:calc(var(--sidebar-w) + 1rem);
  width:420px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:none;
  z-index:200;
  max-height:400px;
  overflow-y:auto;
}
#search-results.visible { display:block; }
.search-result {
  display:block;
  padding:0.75rem 1rem;
  border-bottom:1px solid var(--border);
  text-decoration:none;
  transition:background .1s;
}
.search-result:last-child { border-bottom:none; }
.search-result:hover { background:var(--bg-subtle); }
.search-result-title { font-weight:500; font-size:14px; color:var(--text); display:block; }
.search-result-section { font-size:12px; color:var(--text-faint); display:block; margin-top:2px; }
.search-result-excerpt { font-size:12px; color:var(--text-muted); display:block; margin-top:3px; line-height:1.4; }
/* ── Mobile ── */
.menu-toggle {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
  color:var(--text);
}
@media(max-width:768px) {
  .menu-toggle { display:flex; }
  .sidebar { transform:translateX(-100%); transition:transform .2s; z-index:90; }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .content { padding:2rem 1.25rem 4rem; }
  .hdr-search { display:none; }
}