/* ============================================================= * Design tokens * Override semantics, not raw colors. Light is default; dark is * triggered by [data-theme="dark"] on . * ============================================================= */ :root { /* Color */ --bg: #ffffff; --bg-sidebar: #fafafa; --text: #18181b; --text-muted: #71717a; --accent: #c2410c; --accent-soft: #fb923c; --border: #e4e4e7; --code-bg: #f4f4f5; --hover: #f1f1f3; --rule: #e4e4e7; /* Type */ --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', Menlo, monospace; --text-size: 18px; --text-leading: 1.65; /* Layout */ --sidebar-w: 280px; --content-w: 720px; } [data-theme="dark"] { --bg: #0b0c0e; --bg-sidebar: #08090b; --text: #e8e8ea; --text-muted: #9a9aa0; --accent: #fb923c; --accent-soft: #ea580c; --border: #1d1e22; --code-bg: #14151a; --hover: #131419; --rule: #1d1e22; } /* ============================================================= * Base * ============================================================= */ * { box-sizing: border-box; } * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-serif); font-size: var(--text-size); line-height: var(--text-leading); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================= * Layout * ============================================================= */ body { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } #main { padding: 80px 48px 160px; } #content { max-width: var(--content-w); margin: 0 auto; } #content > *:first-child { margin-top: 0; } /* ============================================================= * Sidebar * ============================================================= */ #sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); padding: 36px 22px 60px; position: sticky; top: 0; height: 100vh; overflow-y: auto; font-family: var(--font-sans); font-size: 14px; scrollbar-color: transparent transparent; transition: scrollbar-color 0.2s; } #sidebar:hover { scrollbar-color: var(--border) transparent; } #sidebar::-webkit-scrollbar-thumb { background: transparent; background-clip: content-box; transition: background 0.2s; } #sidebar:hover::-webkit-scrollbar-thumb { background: var(--border); background-clip: content-box; } .brand { font-family: var(--font-serif); font-size: 24px; font-weight: 600; margin-bottom: 32px; color: var(--text); letter-spacing: -0.015em; padding-left: 8px; } #nav .group { margin-bottom: 22px; } #nav .group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 0 10px; margin-bottom: 6px; } #nav a { display: block; padding: 5px 10px; color: var(--text); text-decoration: none; border-radius: 4px; margin: 1px 0; line-height: 1.4; border-left: 2px solid transparent; transition: background 0.08s ease, color 0.08s ease; } #nav a:hover { background: var(--hover); } #nav a.active { background: var(--hover); color: var(--accent); font-weight: 500; border-left-color: var(--accent); } /* ============================================================= * Content typography * ============================================================= */ #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { font-family: var(--font-serif); letter-spacing: -0.012em; line-height: 1.25; margin-top: 1.8em; margin-bottom: 0.5em; color: var(--text); } #content h1 { font-size: 36px; font-weight: 600; margin-top: 0; border-bottom: 1px solid var(--rule); padding-bottom: 0.32em; margin-bottom: 0.7em; } #content h2 { font-size: 26px; font-weight: 600; } #content h3 { font-size: 21px; font-weight: 600; } #content h4 { font-size: 18px; font-weight: 600; } #content h5, #content h6 { font-size: 16px; font-weight: 600; } #content p { margin: 0 0 1em; } #content strong { font-weight: 600; } #content code { font-family: var(--font-mono); font-size: 0.86em; background: var(--code-bg); padding: 2px 5px; border-radius: 3px; } #content pre { background: var(--code-bg); padding: 16px 20px; border-radius: 6px; overflow-x: auto; font-size: 14px; line-height: 1.55; margin: 1.2em 0; } #content pre code { background: none; padding: 0; font-size: inherit; } #content blockquote { border-left: 3px solid var(--accent-soft); padding: 0.1em 1em; color: var(--text-muted); font-style: italic; margin: 1.2em 0; } #content blockquote p:last-child { margin-bottom: 0; } #content a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } #content ul, #content ol { padding-left: 1.5em; } #content li { margin-bottom: 0.3em; } #content li > p { margin-bottom: 0.4em; } #content table { border-collapse: collapse; width: 100%; font-size: 0.95em; margin: 1.2em 0; } #content th, #content td { border: 1px solid var(--border); padding: 7px 12px; text-align: left; } #content th { background: var(--code-bg); font-weight: 600; } #content hr { border: none; border-top: 1px solid var(--rule); margin: 2.4em 0; } #content img { max-width: 100%; height: auto; } /* ============================================================= * KaTeX overrides * ============================================================= */ .katex { font-size: 1.04em; } .katex-display { margin: 1.2em 0; overflow-x: auto; overflow-y: hidden; padding: 0.2em 0; } .katex-error { color: #b34d2c; background: rgba(179, 77, 44, 0.08); padding: 0 4px; border-radius: 3px; } /* ============================================================= * UI affordances * ============================================================= */ #theme-toggle { position: fixed; bottom: 22px; right: 22px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-sidebar); color: var(--text); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } #theme-toggle:hover { background: var(--hover); } #reload-indicator { position: fixed; bottom: 24px; left: 300px; padding: 6px 12px; background: var(--accent); color: var(--bg); border-radius: 4px; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.02em; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } #reload-indicator.visible { opacity: 0.9; } /* ============================================================= * Responsive & accessibility * ============================================================= */ @media (max-width: 800px) { body { grid-template-columns: 1fr; } #sidebar { position: relative; height: auto; border-right: none; border-bottom: 1px solid var(--border); } #main { padding: 32px 24px 80px; } #content h1 { font-size: 28px; } #content h2 { font-size: 22px; } #reload-indicator { left: 24px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }