:root { --bg: #101010; --surface: #1a1a1a; --border: #2a2a2a; --text: #e0e0e0; --muted: #888; --accent: #00a4dc; --max-w: 820px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.75; padding: 2rem 1rem; } body > header, article, main { max-width: var(--max-w); margin: 0 auto; } /* Pandoc wraps content in

inside */ header { max-width: var(--max-w); margin: 0 auto 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } h1 { font-size: 2rem; color: #fff; border-bottom: 2px solid var(--accent); padding-bottom: 0.4rem; margin: 1.5rem 0 0.75rem; } h2 { font-size: 1.4rem; color: var(--accent); margin: 1.75rem 0 0.5rem; } h3 { font-size: 1.15rem; color: #fff; margin: 1.25rem 0 0.4rem; } h4 { font-size: 1rem; color: var(--muted); margin: 1rem 0 0.4rem; } p { margin: 0.75rem 0; } hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { padding-left: 1.5rem; margin: 0.75rem 0; } li { margin: 0.3rem 0; } blockquote { border-left: 3px solid var(--accent); padding: 0.5rem 1rem; margin: 1rem 0; background: var(--surface); color: var(--muted); border-radius: 0 4px 4px 0; } code { background: var(--surface); padding: 0.15em 0.4em; border-radius: 3px; font-family: "SF Mono", "Consolas", "Fira Code", monospace; font-size: 0.88em; color: #f8c555; } pre { background: var(--surface); padding: 1rem 1.25rem; border-radius: 6px; overflow-x: auto; margin: 1rem 0; border: 1px solid var(--border); } pre code { background: none; padding: 0; color: var(--text); } table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; } th, td { border: 1px solid var(--border); padding: 0.5rem 0.8rem; text-align: left; } th { background: var(--surface); color: var(--accent); font-weight: 600; } tr:nth-child(even) td { background: var(--surface); } /* Responsive */ @media (max-width: 600px) { body { padding: 1rem 0.75rem; } h1 { font-size: 1.5rem; } table, thead, tbody, th, td, tr { display: block; } th { display: none; } td { border: none; border-bottom: 1px solid var(--border); } }