:root { --bg: #0a0a0a; --card: #111111; --border: #222222; --text: #ffffff; --muted: #9a9a9a; --link: #74c0fc; --code-color: #d6deeb; --pre-bg: rgba(10,10,10,0.6); --pre-border: rgba(255,255,255,0.035); --card-bg: rgba(255,255,255,0.01); --card-border: rgba(255,255,255,0.03); --hero-bg: rgba(255,255,255,0.02); --hero-border: rgba(255,255,255,0.06); --section-title-color: #ffffff; --download-grad-start: #2b7cff; --download-grad-end: #1a66d6; --inline-code-bg: rgba(255,255,255,0.02); } /* Light theme overrides (applied via `data-theme="light"` on ) */ [data-theme="light"] { --bg: #f7f9fc; --card: #ffffff; --border: #e6e9ef; --text: #0b1220; --muted: #5a616b; --nav-bg: rgba(255,255,255,0.92); --sidebar-bg: rgba(255,255,255,0.98); --layout-bg: linear-gradient(180deg,#ffffff 0%, #f7f9fc 100%); --link: #1a6fb3; --code-color: #0b1220; --pre-bg: rgba(12,18,28,0.04); --pre-border: rgba(11,18,32,0.06); --card-bg: rgba(255,255,255,0.98); --card-border: rgba(230,233,239,0.7); --hero-bg: rgba(250,251,253,0.6); --hero-border: rgba(230,233,239,0.7); --section-title-color: #0b1220; --download-grad-start: #1d62b8; --download-grad-end: #15509a; --inline-code-bg: rgba(250,251,253,0.6); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } section[id] { scroll-margin-top: 96px; } body { background: var(--bg); color: var(--text); font-family: Inter, sans-serif; transition: background-color 200ms ease, color 200ms ease; } .navbar { position: sticky; top: 0; z-index: 1000; background: var(--nav-bg, rgba(10,10,10,0.85)); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-container { max-width: 1400px; margin: 0 auto; height: 72px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; } .logo { width: 32px; height: 32px; } .logo img { width: 100%; height: 100%; object-fit: contain; } .brand span { font-size: 1.2rem; font-weight: 700; } .docs-nav-title { color: var(--text); font-weight: 600; font-size: large; } .report-link { color: var(--muted); text-decoration: underline; align-content: center; font-weight: 600; padding: 0; border: none; border-radius: 0; transition: color 0.2s ease; } .report-link:hover { color: var(--link); } .theme-toggle { background: transparent; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; margin-right: 12px; padding: 6px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .theme-toggle svg { transition: opacity 200ms ease; } .theme-toggle:hover { color: var(--text); } .theme-issue{ display: flex; } .docs-layout { display: flex; min-height: calc(100vh - 72px); background: var(--layout-bg, linear-gradient(180deg, #090909 0%, #0f0f0f 100%)); } .sidebar { width: 300px; position: sticky; top: 72px; height: calc(100vh - 72px); overflow-y: auto; background: var(--sidebar-bg, rgba(15, 15, 15, 0.98)); border-right: 1px solid var(--border); padding: 40px 28px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03); } .sidebar-group { margin-bottom: 40px; } .section-link { display: block; color: var(--muted); text-decoration: none; font-weight: 700; margin-bottom: 14px; cursor: pointer; transition: color 0.2s ease; } .section-link.active, .section-link:hover { color: var(--text); } .sidebar-subgroup { padding-left: 14px; } .sidebar-subgroup a { display: block; color: var(--muted); text-decoration: none; margin-bottom: 10px; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; } .sidebar-subgroup a:hover, .sidebar-subgroup a.active { color: var(--text); transform: translateX(2px); } .docs-content { flex: 1; max-width: 1000px; padding: 60px 72px; } .docs-hero { margin-bottom: 80px; padding: 40px 48px; border: 1px solid var(--hero-border); border-radius: 24px; background: var(--hero-bg); } /* Hide hero when certain sections (like story) are active */ .docs-hero.hidden { display: none; margin: 0; padding: 0; } .docs-hero h1 { font-size: clamp(2.5rem, 4vw, 3.5rem); margin: 0 0 12px 0; line-height: 1.06; } .docs-hero p { max-width: 720px; color: var(--muted); font-size: 1.02rem; line-height: 1.6; } .docs-section { display: none; margin-bottom: 88px; } .docs-section.active { display: block; animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .docs-content h2 { font-size: 3.1rem; margin: 0 0 50px 0; letter-spacing: -0.02em; line-height: 1.12; } .docs-content h4{ margin-top: 12px; } .docs-content p, .docs-content li { color: var(--muted); line-height: 1.65; font-size: 1rem; margin: 0 0 12px 0; } .docs-content ol { margin: 12px 0 20px; padding-left: 28px; } .docs-content li { margin-bottom: 0.7rem; } .docs-content pre { background: var(--pre-bg); border: 1px solid var(--pre-border); border-radius: 14px; padding: 12px 14px; overflow-x: auto; margin: 12px 0 18px; } .docs-content code { color: var(--code-color); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 0.98rem; } .docs-content a { color: var(--link); text-decoration: none; } .docs-content a:hover { text-decoration: underline; } .docs-content section section { margin-bottom: 60px; } /* Documentation visuals: cards, download button, responsiveness */ .docs-content > section { background: var(--card-bg); border: 1px solid var(--card-border); padding: 16px 18px; border-radius: 12px; } .docs-content section h3 { color: var(--section-title-color); margin: 8px 0 8px 0; font-size: 1.5rem; text-decoration: underline; } .docs-content section p, .docs-content section li { color: var(--muted); margin: 0 0 10px 0; } .download-link { display: inline-block; background: linear-gradient(180deg,var(--download-grad-start),var(--download-grad-end)); color: var(--text); padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; box-shadow: 0 6px 18px rgba(15, 80, 200, 0.12); } .docs-content pre { background: var(--pre-bg); border: 1px solid var(--pre-border); padding: 10px 12px; border-radius: 10px; overflow-x: auto; margin: 8px 0 12px 0; } .docs-content code { background: var(--inline-code-bg); padding: 2px 6px; border-radius: 6px; } @media (max-width: 900px) { .docs-layout { flex-direction: column; } .sidebar { width: 100%; position: relative; top: 0; height: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 18px 16px; } .docs-content { padding: 24px; } }