:root {
  --bg: #09110f;
  --surface: #101b18;
  --surface-2: #16231f;
  --surface-3: #1b2c27;
  --text: #eef8f2;
  --muted: #9db2a8;
  --line: #29433a;
  --green: #69e38f;
  --cyan: #53d7d5;
  --amber: #f2bd61;
  --red: #ff7d7d;
  --blue: #86a9ff;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --sidebar: 278px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 5%, rgba(83,215,213,.09), transparent 28rem),
    radial-gradient(circle at 10% 30%, rgba(105,227,143,.07), transparent 30rem),
    var(--bg);
  font: 15px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--green); }
code, kbd, .mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
code { color: #b9f6cc; background: rgba(105,227,143,.08); border: 1px solid rgba(105,227,143,.14); padding: .08rem .32rem; border-radius: 5px; }
pre { overflow: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #07100d; }
pre code { padding: 0; border: 0; background: none; }

.layout { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: var(--sidebar); overflow-y: auto;
  padding: 22px 18px 28px;
  background: rgba(10,18,16,.96);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 20px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #3e7e62; border-radius: 12px; background: linear-gradient(145deg,#193a2c,#0c1c16); color: var(--green); font: 800 18px/1 monospace; box-shadow: inset 0 0 18px rgba(105,227,143,.08); }
.brand strong { display:block; letter-spacing:.03em; }
.brand small { color: var(--muted); }
.nav-label { margin: 21px 10px 7px; color: #719083; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav { display:grid; gap: 3px; }
.nav a { display:flex; align-items:center; gap:9px; padding: 8px 10px; color: #bed0c7; border-radius: 8px; font-size: 14px; }
.nav a::before { content:""; width:6px; height:6px; border:1px solid #527467; border-radius:2px; transform:rotate(45deg); }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { color: #07120d; background: var(--green); font-weight: 800; }
.nav a.active::before { border-color:#07120d; background:#07120d; }
.side-meta { margin: 22px 8px 0; padding: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); font-size: 12px; }

.main { margin-left: var(--sidebar); min-width: 0; }
.topbar { position: sticky; top:0; z-index:12; display:flex; align-items:center; gap:12px; min-height:66px; padding: 10px clamp(18px,4vw,52px); background: rgba(9,17,15,.82); border-bottom:1px solid rgba(41,67,58,.75); backdrop-filter: blur(16px); }
.menu-button { display:none; }
.search-wrap { position:relative; flex:1; max-width:620px; }
.search-wrap input { width:100%; height:40px; padding:0 42px 0 14px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:10px; outline:none; }
.search-wrap input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(105,227,143,.10); }
.search-hint { color:var(--muted); font-size:12px; white-space:nowrap; }
.content { width:min(1180px,100%); margin:0 auto; padding: 44px clamp(18px,4vw,52px) 80px; }

.eyebrow { color:var(--green); font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.2; letter-spacing:-.02em; scroll-margin-top:90px; }
h1 { margin:.35rem 0 1rem; font-size:clamp(2.1rem,5vw,4.6rem); max-width:950px; }
h2 { margin:2.7rem 0 1rem; font-size:clamp(1.45rem,3vw,2.15rem); }
h3 { margin:1.6rem 0 .65rem; font-size:1.1rem; }
.lede { max-width:850px; color:#bdd0c7; font-size:clamp(1.02rem,2vw,1.2rem); }
.hero { padding: 12px 0 32px; border-bottom:1px solid var(--line); }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 15px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text); font-weight:700; }
.button.primary { color:#07120d; border-color:var(--green); background:var(--green); }

.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,rgba(22,35,31,.98),rgba(14,25,21,.98)); box-shadow:0 1px 0 rgba(255,255,255,.02); }
.card h3 { margin-top:0; }
.card p:last-child { margin-bottom:0; }
.metric { padding:18px; border-top:2px solid var(--green); }
.metric strong { display:block; font:800 1.7rem/1 monospace; color:var(--text); }
.metric span { color:var(--muted); font-size:13px; }
.tag { display:inline-block; margin:.1rem .25rem .1rem 0; padding:.15rem .5rem; border-radius:999px; color:#bfeedd; background:rgba(105,227,143,.09); border:1px solid rgba(105,227,143,.20); font-size:12px; }
.tag.warn { color:#ffe0a6; background:rgba(242,189,97,.08); border-color:rgba(242,189,97,.25); }
.tag.danger { color:#ffc0c0; background:rgba(255,125,125,.08); border-color:rgba(255,125,125,.25); }
.tag.info { color:#bed1ff; background:rgba(134,169,255,.08); border-color:rgba(134,169,255,.25); }

.callout { margin:18px 0; padding:16px 18px; border-left:4px solid var(--cyan); background:rgba(83,215,213,.06); border-radius:0 10px 10px 0; }
.callout strong { display:block; margin-bottom:4px; }
.callout.warn { border-left-color:var(--amber); background:rgba(242,189,97,.06); }
.callout.danger { border-left-color:var(--red); background:rgba(255,125,125,.06); }
.callout.ok { border-left-color:var(--green); background:rgba(105,227,143,.06); }

.table-wrap { overflow:auto; margin:16px 0 24px; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; min-width:690px; background:rgba(9,17,15,.45); }
th,td { padding:11px 13px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
th { position:sticky; top:0; z-index:1; color:#d6e8df; background:#16231f; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:rgba(105,227,143,.025); }
.num { text-align:right; white-space:nowrap; }

.flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:26px; margin:20px 0; }
.flow .step { position:relative; min-height:110px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.flow .step:not(:last-child)::after { content:"→"; position:absolute; right:-20px; top:37%; color:var(--green); font-size:21px; }
.step small { display:block; color:var(--muted); }
.step strong { display:block; margin:.25rem 0; }
.tree { margin:16px 0; padding:18px; border:1px solid var(--line); border-radius:12px; background:#08110e; font-family:monospace; white-space:pre-wrap; color:#cfe3d9; }
.file { color:var(--cyan); }
.method { color:var(--green); }
.state { color:var(--amber); }

.toc { margin:22px 0; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); }
.toc strong { display:block; margin-bottom:7px; }
.toc ul { columns:2; margin:0; padding-left:19px; }
.toc li { margin:4px 0; }
.method-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.method-row { padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.015); }
.method-row code { display:inline-block; margin-bottom:5px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.no-results { display:none; padding:20px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); text-align:center; }
.search-hidden { display:none !important; }
.page-footer { margin-top:55px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }

@media (max-width: 980px){
  .grid.four,.grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sidebar { transform:translateX(-105%); transition:transform .2s ease; box-shadow:var(--shadow); }
  body.nav-open .sidebar { transform:translateX(0); }
  .main { margin-left:0; }
  .menu-button { display:inline-grid; place-items:center; width:40px; height:40px; padding:0; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:9px; }
}
@media (max-width: 680px){
  .grid.two,.grid.three,.grid.four,.method-list { grid-template-columns:1fr; }
  .toc ul { columns:1; }
  .search-hint { display:none; }
  .flow { grid-template-columns:1fr; gap:12px; }
  .flow .step:not(:last-child)::after { content:"↓"; left:50%; right:auto; top:auto; bottom:-21px; }
  h1 { font-size:2.2rem; }
}

@media print {
  :root { --bg:#fff; --text:#111; --muted:#555; --surface:#fff; --surface-2:#f4f4f4; --line:#ccc; }
  body { background:#fff; color:#111; }
  .sidebar,.topbar,.hero-actions { display:none!important; }
  .main { margin:0; }
  .content { width:100%; padding:0; }
  .card,.table-wrap,.callout { break-inside:avoid; box-shadow:none; }
  a { color:#111; }
}