:root {
--bg: #fafafa;
--fg: #0f172a;
--muted: #475569;
--accent: #2563eb;
--border: #e5e7eb;
--code-bg: #f9f9f9;
--pre-border: #ddd;
--pre-shadow: #eee;
--blockquote-bg: #f9f9f9;
--blockquote-border: #ccc;
--table-even-bg: #eee;
}

[data-theme="dark"] {
--bg: #020617;
--fg: #e5e7eb;
--muted: #94a3b8;
--accent: #60a5fa;
--border: #1e293b;
--code-bg: #1e293b;
--pre-border: #475569;
--pre-shadow: #00000050;
--blockquote-bg: #0f172a;
--blockquote-border: #475569;
--table-even-bg: #1e293b;
}

body {
max-width: 800px;
margin: auto;
padding: 1em;
line-height: 1.5;
background: var(--bg);
color: var(--fg);
}

.menu { padding: 0; }
.menu li, .menu button { display: inline-block; }
.article-meta, .menu a, .menu button {
text-decoration: none;
background: var(--border);
padding: 5px;
border-radius: 5px;
color: var(--fg);
}
.menu, .article-meta, footer { text-align: center; }
.title { font-size: 1.1em; }
footer a { text-decoration: none; color: var(--accent); }

hr {
border-style: dashed;
color: var(--border);
}

pre {
border: 1px solid var(--pre-border);
box-shadow: 5px 5px 5px var(--pre-shadow);
padding: 1em;
overflow-x: auto;
background: var(--code-bg);
}
code { background: var(--code-bg); }
pre code { background: none; }

img, iframe, video { max-width: 100%; }
main { hyphens: auto; }

blockquote {
background: var(--blockquote-bg);
border-left: 5px solid var(--blockquote-border);
padding: 3px 1em 3px;
}

table {
margin: auto;
border-top: 1px solid var(--fg);
border-bottom: 1px solid var(--fg);
}
table thead th { border-bottom: 1px solid var(--border); }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: var(--table-even-bg); }