:root { --bg: #ffffff; --bg-alt: #f5f6f8; --bg-elev: #ffffff; --border: #e2e5ea; --border-strong: #cfd4dc; --fg: #14161a; --fg-dim: #5c636e; --accent: #3b3bd6; --accent-hover: #2e2eb0; --accent-fg: #ffffff; --radius: 3px; --maxw: 1120px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } .btn { display: inline-block; padding: 0.5rem 0.9rem; border-radius: var(--radius); font-weight: 600; font-size: 0.875rem; cursor: pointer; border: 1px solid var(--border-strong); background: var(--bg); color: var(--fg); transition: background 0.12s, border-color 0.12s, color 0.12s; line-height: 1.2; } .btn:hover { text-decoration: none; border-color: var(--fg-dim); } .btn-accent { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } h1, h2, h3 { line-height: 1.25; margin: 0 0 0.4rem; } /* Dark theme — activated by data-theme="dark" on */ html[data-theme="dark"] { --bg: #0e1116; --bg-alt: #161b22; --bg-elev: #161b22; --border: #262c36; --border-strong: #363d48; --fg: #e6edf3; --fg-dim: #9aa4b2; --accent: #7c7cff; --accent-hover: #9a9aff; --accent-fg: #0e1116; } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* polish */ .btn { transition: background 0.15s, border-color 0.15s, transform 0.05s; } .btn:active { transform: translateY(1px); } .btn-accent { box-shadow: 0 1px 2px rgba(59,59,214,0.25); } .container { padding-left: 1.5rem; padding-right: 1.5rem; } /* Code/key surfaces — dark in both themes, readable everywhere */ :root { --code-bg: #0d1424; --code-fg: #e8eaf0; --code-border: #1e2b45; } html[data-theme="dark"] { --code-bg: #0a0f1a; --code-fg: #e8eaf0; --code-border: #24314b; }