@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
        :root {
            --sidebar-w: 260px;
            --topbar-h: 56px;
            --accent: #38bdf8;
            --bg: #0f172a;
            --bg2: #0d1526;
            --surface: #1a2744;
            --border: rgba(255,255,255,0.08);
        }
        * { box-sizing: border-box; }
        html {
            scroll-behavior: smooth;
            scroll-padding-top: calc(var(--topbar-h) + 18px);
        }
        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: #e2e8f0;
            margin: 0;
        }
        /* Topbar */
        #topbar {
            position: fixed; top: 0; left: 0; right: 0;
            height: var(--topbar-h);
            background: rgba(13,21,38,0.92);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            z-index: 100;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 1.25rem;
        }
        /* Sidebar */
        #sidebar {
            position: fixed;
            top: var(--topbar-h); left: 0; bottom: 0;
            width: var(--sidebar-w);
            background: var(--bg2);
            border-right: 1px solid var(--border);
            overflow-y: auto;
            z-index: 90;
            padding: 1.25rem 0 2rem;
            transition: transform 0.25s ease;
        }
        #sidebar::-webkit-scrollbar { width: 4px; }
        #sidebar::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 4px; }
        /* Content */
        #content {
            margin-left: var(--sidebar-w);
            margin-top: var(--topbar-h);
            min-height: calc(100vh - var(--topbar-h));
            max-width: 860px;
            padding: 2.5rem 2rem 4rem;
        }
        /* Sidebar navigation */
        .nav-section {
            padding: 0 0.75rem;
            margin-bottom: 0.25rem;
        }
        .nav-section-label {
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #475569;
            padding: 0.9rem 0.75rem 0.35rem;
        }
        .nav-link {
            display: flex; align-items: center; gap: 0.5rem;
            padding: 0.38rem 0.75rem;
            border-radius: 0.4rem;
            color: #94a3b8;
            font-size: 0.82rem;
            font-weight: 500;
            text-decoration: none;
            transition: background 0.15s, color 0.15s;
            cursor: pointer;
        }
        .nav-link:hover { background: rgba(56,189,248,0.08); color: #e2e8f0; }
        .nav-link.active {
            background: rgba(56,189,248,0.14);
            color: var(--accent);
            font-weight: 700;
            box-shadow: inset 3px 0 0 var(--accent);
        }
        .nav-link.external { color: #64748b; font-size: 0.78rem; }
        .nav-link.external:hover { color: #94a3b8; }
        [id] { scroll-margin-top: calc(var(--topbar-h) + 18px); }
        /* Content typography */
        .doc-h1 {
            font-size: 2rem; font-weight: 800;
            letter-spacing: -0.02em; color: #f1f5f9;
            margin: 0 0 0.5rem; line-height: 1.2;
        }
        .doc-h2 {
            font-size: 1.3rem; font-weight: 700;
            color: #f1f5f9; margin: 2.5rem 0 0.75rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border);
        }
        .doc-h2:first-of-type { border-top: none; }
        .doc-h3 {
            font-size: 1rem; font-weight: 600;
            color: #cbd5e1; margin: 1.5rem 0 0.5rem;
        }
        .doc-p {
            color: #94a3b8; font-size: 0.9rem;
            line-height: 1.75; margin: 0 0 1rem;
        }
        pre {
            background: var(--bg2);
            border: 1px solid #1e3a5f;
            border-radius: 0.6rem;
            padding: 1.1rem 1.25rem;
            overflow-x: auto;
            margin: 0.75rem 0 1.25rem;
            font-size: 0.8rem;
            line-height: 1.65;
        }
        code {
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            color: #e2e8f0;
        }
        p code, li code {
            background: rgba(30,58,95,0.6);
            border: 1px solid #1e3a5f;
            border-radius: 0.25rem;
            padding: 0.1em 0.45em;
            font-size: 0.82em;
            color: #7dd3fc;
        }
        .code-comment { color: #546e8a; }
        .code-keyword { color: #c084fc; }
        .code-type    { color: #fcd34d; }
        .code-string  { color: #86efac; }
        .code-func    { color: #67e8f9; }
        .code-num     { color: #fb923c; }
        /* Step image placeholder */
        .step-img {
            width: 100%; border-radius: 0.6rem;
            border: 1px dashed #1e3a5f;
            margin: 1rem 0 1.5rem;
            display: block;
        }
        /* Callout boxes */
        .callout {
            border-radius: 0.5rem;
            padding: 0.9rem 1rem;
            margin: 1rem 0;
            font-size: 0.85rem;
            line-height: 1.6;
        }
        .callout-info  { background: rgba(14,165,233,0.08); border-left: 3px solid #0ea5e9; color: #7dd3fc; }
        .callout-warn  { background: rgba(245,158,11,0.08); border-left: 3px solid #f59e0b; color: #fcd34d; }
        .callout-tip   { background: rgba(34,197,94,0.08); border-left: 3px solid #22c55e; color: #86efac; }
        /* Step badge */
        .step-badge {
            display: inline-flex; align-items: center; justify-content: center;
            width: 1.75rem; height: 1.75rem;
            border-radius: 50%;
            background: var(--accent); color: #0f172a;
            font-size: 0.78rem; font-weight: 800;
            flex-shrink: 0; margin-right: 0.6rem;
        }
        .step-row { display: flex; align-items: center; margin-bottom: 0.4rem; }
        /* Badge tag */
        .badge {
            display: inline-block; padding: 0.15em 0.6em;
            border-radius: 0.3rem; font-size: 0.72rem; font-weight: 600;
            border: 1px solid;
        }
        .badge-req  { background: rgba(239,68,68,0.1); border-color: #ef4444; color: #f87171; }
        .badge-opt  { background: rgba(100,116,139,0.15); border-color: #475569; color: #94a3b8; }
        /* Mobile sidebar overlay */
        #sidebarOverlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.55); z-index: 80;
        }
        @media (max-width: 1023px) {
            #sidebar { transform: translateX(-100%); }
            #sidebar.open { transform: translateX(0); }
            #sidebarOverlay.open { display: block; }
            #content { margin-left: 0; padding: 1.5rem 1rem 3rem; }
        }