:root{
  --bg:#0f1117;--surface:#161b27;--surface2:#1e2638;--border:#2a3347;
  --accent:#f97316;--accent2:#3b82f6;--accent3:#10b981;--accent4:#8b5cf6;
  --text:#e2e8f0;--muted:#8892a4;--head:#f8fafc;--code-bg:#0d1117;--tag:#243045;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;font-size:15px}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}

.layout{display:flex;min-height:100vh}
.sidebar{width:270px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);position:sticky;top:0;height:100vh;overflow-y:auto;padding:20px 0}
.main{flex:1;max-width:940px;padding:36px 48px;overflow-x:hidden}

.logo{display:flex;align-items:center;gap:10px;padding:0 18px 18px;border-bottom:1px solid var(--border);margin-bottom:10px}
.logo-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0}
.logo-text{font-weight:700;font-size:15px;color:var(--head)}
.logo-badge{font-size:10px;background:var(--tag);color:var(--muted);padding:2px 6px;border-radius:4px;margin-left:4px}

.nav-section{display:block;padding:7px 18px 3px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:6px}
.nav-item{display:block;padding:5px 18px;font-size:13px;color:var(--muted);cursor:pointer;border-left:2px solid transparent;transition:color .15s,border-color .15s,background .15s}
.nav-item:hover,.nav-item.active{color:var(--text);border-left-color:var(--accent);background:rgba(249,115,22,.06)}
.nav-sub{padding-left:30px;font-size:12px}
.nav-sub2{padding-left:42px;font-size:11.5px}

h1{font-size:30px;font-weight:800;color:var(--head);letter-spacing:-.5px;margin-bottom:8px}
h2{font-size:21px;font-weight:700;color:var(--head);margin:48px 0 14px;padding-top:8px;border-top:1px solid var(--border)}
h3{font-size:16px;font-weight:600;color:var(--head);margin:24px 0 10px}
h4{font-size:12px;font-weight:700;color:var(--accent);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.07em}
p{margin-bottom:12px}
ul,ol{padding-left:20px;margin-bottom:12px}
li{margin-bottom:5px}

code{font-family:'Fira Code','Fira Mono',monospace;font-size:12.5px;background:var(--code-bg);border:1px solid var(--border);padding:1px 5px;border-radius:4px;color:#e06c75}
pre{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:16px 20px;margin:12px 0;overflow-x:auto;font-family:'Fira Code',monospace;font-size:12.5px;line-height:1.65;color:#abb2bf}
pre .kw{color:#c678dd}
pre .fn{color:#61afef}
pre .str{color:#98c379}
pre .cm{color:#5c6370;font-style:italic}
pre .num{color:#d19a66}

.hero{background:linear-gradient(135deg,rgba(249,115,22,.12),rgba(59,130,246,.08));border:1px solid rgba(249,115,22,.2);border-radius:12px;padding:26px 30px;margin-bottom:32px}
.hero-label{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.badge{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:500}
.badge-orange{background:rgba(249,115,22,.15);color:#fb923c;border:1px solid rgba(249,115,22,.3)}
.badge-blue{background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}
.badge-green{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.3)}
.badge-purple{background:rgba(139,92,246,.15);color:#a78bfa;border:1px solid rgba(139,92,246,.3)}
.badge-yellow{background:rgba(234,179,8,.15);color:#fbbf24;border:1px solid rgba(234,179,8,.3)}

.diagram-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;margin:18px 0;overflow-x:auto}
.diagram-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.diagram-svg{width:100%;display:block}
.diagram-svg-max-820{max-width:820px}
.diagram-svg-max-760{max-width:760px}
svg text{font-family:'Inter',system-ui,sans-serif}

table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
th{background:var(--surface2);color:var(--head);font-weight:600;padding:9px 13px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
td{padding:9px 13px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:13px;margin:16px 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px}
.card-icon{font-size:20px;margin-bottom:7px}
.card-title{font-size:13px;font-weight:600;color:var(--head);margin-bottom:3px}
.card-desc{font-size:12px;color:var(--muted)}

.steps{counter-reset:step;margin:16px 0}
.step{display:flex;gap:14px;margin-bottom:16px}
.step-num{counter-increment:step;display:flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700}
.step-content{flex:1;padding-top:2px}
.step-title{font-weight:600;color:var(--head);margin-bottom:4px}

.callout{border-radius:8px;padding:11px 16px;margin:12px 0;display:flex;gap:10px;font-size:13.5px}
.callout-info{background:rgba(59,130,246,.1);border-left:3px solid var(--accent2)}
.callout-warn{background:rgba(249,115,22,.1);border-left:3px solid var(--accent)}
.callout-tip{background:rgba(16,185,129,.1);border-left:3px solid var(--accent3)}
.callout-purple{background:rgba(139,92,246,.1);border-left:3px solid var(--accent4)}
.callout-icon{font-size:15px;flex-shrink:0;padding-top:1px}

.commit-type{display:inline-block;font-family:monospace;font-size:12px;padding:2px 7px;border-radius:4px;font-weight:600}
.ct-feat{background:rgba(16,185,129,.15);color:#34d399}
.ct-fix{background:rgba(239,68,68,.15);color:#f87171}
.ct-docs{background:rgba(59,130,246,.15);color:#60a5fa}
.ct-ref{background:rgba(139,92,246,.15);color:#a78bfa}
.ct-chore{background:rgba(156,163,175,.15);color:#9ca3af}
.ct-test{background:rgba(234,179,8,.15);color:#fbbf24}

.section{scroll-margin-top:20px}
hr{border:none;border-top:1px solid var(--border);margin:26px 0}

.repo-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:3px 10px;font-size:12px;color:var(--text);margin:2px}

.rule-box{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px 18px;margin:14px 0}
.rule-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent4);color:#fff;font-size:11px;font-weight:700;margin-right:8px;flex-shrink:0}

.go-doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:16px 0}
.go-doc-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px;cursor:pointer;transition:border-color .15s}
.go-doc-card:hover{border-color:var(--accent4)}
.go-doc-title{font-size:13px;font-weight:600;color:var(--head);margin-bottom:4px}
.go-doc-desc{font-size:12px;color:var(--muted)}

/* Utilities (replaces inline styles) */
.text-muted{color:var(--muted)}
.mb-0{margin-bottom:0}
.repo-chip-row{margin:12px 0}
.footer-note{color:var(--muted);font-size:12px;text-align:center}
.text-small-muted{font-size:13px;color:var(--muted)}

/* Scrollbar styles */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:#3d4f6b}
::-webkit-scrollbar-corner{background:transparent}
.sidebar::-webkit-scrollbar-track{background:var(--surface)}
.sidebar::-webkit-scrollbar-thumb{background:#2a3347}
.sidebar::-webkit-scrollbar-thumb:hover{background:#3d4f6b}
pre::-webkit-scrollbar-track{background:var(--code-bg)}
pre::-webkit-scrollbar-thumb{background:#1e2638}
pre::-webkit-scrollbar-thumb:hover{background:#2a3347}
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.sidebar{scrollbar-color:#2a3347 var(--surface)}
pre{scrollbar-color:#1e2638 var(--code-bg)}

@media(max-width:768px){
  .layout{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static}
  .main{padding:20px}
}