@charset "UTF-8";
/* ============================================================ CSS VARIABLES — Light & Dark ============================================================ */
:root { --color-bg: #ffffff; --color-text: #111111; --color-text-muted: #222222; --color-text-faint: #555555; --color-text-meta: #777777; --color-text-nav: #666666; --color-text-footer: #666666; --color-heading: #111111; --color-link: #0a58ca; --color-hr: #7e2a2a; --color-border: #dddddd; --color-border-light: #eeeeee; --color-border-table: #e5e5e5; --color-code-bg: #f5f5f5; --color-code-inline: #f0f0f0; --color-blockquote: #dddddd; --color-table-hover: #fafafa; --color-th-text: #555555; --color-nav-active: #312f67; --color-header-p: #333333; }

html.dark { --color-bg: #111111; --color-text: #e8e8e8; --color-text-muted: #d0d0d0; --color-text-faint: #aaaaaa; --color-text-meta: #888888; --color-text-nav: #999999; --color-text-footer: #888888; --color-heading: #f0f0f0; --color-link: #5b9cf6; --color-hr: #9e4a4a; --color-border: #333333; --color-border-light: #222222; --color-border-table: #2e2e2e; --color-code-bg: #1e1e1e; --color-code-inline: #252525; --color-blockquote: #333333; --color-table-hover: #1a1a1a; --color-th-text: #aaaaaa; --color-nav-active: #8b89d4; --color-header-p: #bbbbbb; }

/* ============================================================ Base Reset ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; scroll-behavior: smooth; scrollbar-gutter: stable; }

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; line-height: 1.5; color: var(--color-text); background: var(--color-bg); max-width: 720px; margin: 0 auto; padding: 8px 20px 64px; }

main { margin: 0; padding: 0; }

/* ============================================================ Typography ============================================================ */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-heading); }

main { margin-top: 0; }

main > *:first-child { margin-top: 0; }

header h1 { font-size: 3rem; }

h1 { font-size: 2.5rem; margin-top: 0; margin-bottom: 0.75rem; }

h2 { font-size: 2.0rem; margin-top: 0rem; margin-bottom: 1rem; }

h3 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.75rem; }

h4 { font-size: 1.15rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; color: var(--color-text-muted); }

strong { font-weight: 700; }

hr { margin: 1rem 0; border: none; border-top: 0.5px solid var(--color-hr); }

/* ============================================================ Links ============================================================ */
a { color: var(--color-link); text-decoration: none; transition: color 0.2s ease, text-decoration-color 0.2s ease; }

a:hover, a:focus { text-decoration: underline; text-underline-offset: 0.15em; }

/* ============================================================ Navigation ============================================================ */
nav { margin-top: 0; margin-bottom: 0.15rem; font-size: 1.15rem; }

nav a { font-weight: 400; }

nav a + a::before { content: " | "; color: var(--color-text-nav); font-weight: 400; }

/* ============================================================ Header ============================================================ */
header { margin-top: 0; padding-top: 0; margin-bottom: 1.25rem; }

header h1 { margin-top: 0; margin-bottom: 0.35rem; }

header p { font-size: 1.2rem; color: var(--color-header-p); margin-bottom: 0.25rem; }

/* ============================================================ Sections ============================================================ */
section { margin-bottom: 2.5rem; }

/* ============================================================ Lists ============================================================ */
ol, ul { margin: 0.5rem 0 1rem 1.25rem; }

li { margin-bottom: 0.3rem; line-height: 1.4; }

/* ============================================================ Posts ============================================================ */
.post { margin-bottom: 3rem; }

.post-title { margin-bottom: 0.35rem; }

.post-date { display: block; font-size: 0.95rem; color: var(--color-text-meta); margin-bottom: 0.9rem; }

/* ============================================================ Code ============================================================ */
pre { background: var(--color-code-bg); padding: 1rem 1.1rem; overflow-x: auto; border-radius: 8px; margin: 1.5rem 0; line-height: 1.5; }

code { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.92rem; }

p code, li code { background: var(--color-code-inline); padding: 0.12rem 0.35rem; border-radius: 4px; }

/* ============================================================ Blockquotes ============================================================ */
blockquote { border-left: 4px solid var(--color-blockquote); padding-left: 1rem; color: var(--color-text-faint); margin: 1.5rem 0; }

/* ============================================================ Images ============================================================ */
img { display: block; max-width: 100%; height: auto; margin: 0.5rem 0 0.5rem; border-radius: 2px; }

/* ============================================================ Hero helpers ============================================================ */
.hero-text { margin-bottom: 0.5rem; }

.hero-image { margin-top: 0.25rem; margin-bottom: 2rem; }

/* ============================================================ Footer ============================================================ */
footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-light); font-size: 0.95rem; color: var(--color-text-footer); }

/* ============================================================ Header link ============================================================ */
header h1 a { color: inherit; text-decoration: none; }

header h1 a:hover { text-decoration: none; opacity: 0.9; }

/* ============================================================ Responsive ============================================================ */
@media (max-width: 600px) { html { font-size: 16px; }
  body { padding: 8px 18px 48px; }
  h1 { font-size: 2.5rem; line-height: 1.1; }
  h2 { font-size: 1.8rem; }
  nav { font-size: 1.05rem; margin-bottom: 0.75rem; } }
/* ============================================================ Tables ============================================================ */
table { font-size: 0.8rem; border-collapse: collapse; width: 100%; border-left: 1px solid var(--color-border-table); }

th, td { padding: 8px 10px; text-align: left; border-right: 1px solid var(--color-border-table); }

th { font-weight: 600; color: var(--color-th-text); }

thead tr { border-bottom: 2px solid var(--color-border-table); }

tbody tr { border-bottom: 1px solid var(--color-border-light); }

tbody tr:hover { background-color: var(--color-table-hover); }

th:last-child, td:last-child { border-right: none; }

/* ============================================================ Nav active state ============================================================ */
nav a.active { font-weight: 700; color: var(--color-nav-active); }