:root {
  --bg: #121018; --panel: #1a1626; --border: #2e2640; --muted: #6b6280; --text: #d0cdd8;
  --accent: #8b5cf6; --accent-hover: #a78bfa; --code-bg: #15121f; --heading: #e9e6f0;
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Consolas, monospace;
  --max: 46rem;
}
/* Themes: picked per signed-in user at /settings/ (data-theme on <html>). */
:root[data-theme="slate"] {
  --bg: #0f1419; --panel: #161c24; --border: #28323f; --muted: #66768a; --text: #c9d1d9;
  --accent: #58a6ff; --accent-hover: #8cc2ff; --code-bg: #121820; --heading: #e6edf3;
}
:root[data-theme="forest"] {
  --bg: #0f1511; --panel: #151d17; --border: #26352b; --muted: #637a69; --text: #c8d5cb;
  --accent: #3ddc84; --accent-hover: #7cf0ab; --code-bg: #111a14; --heading: #e4efe6;
}
:root[data-theme="ember"] {
  --bg: #16110f; --panel: #1f1714; --border: #3a2a24; --muted: #85695d; --text: #d8cdc6;
  --accent: #f97316; --accent-hover: #fb923c; --code-bg: #1a1310; --heading: #f1e8e2;
}
:root[data-theme="paper"] {
  --bg: #f7f5f0; --panel: #ffffff; --border: #ddd8cc; --muted: #7a7466; --text: #2a2722;
  --accent: #6d28d9; --accent-hover: #4c1d95; --code-bg: #efece4; --heading: #141210;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
body { margin: 0; color: var(--text); font: 15px/1.65 var(--mono); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; font-weight: 600; color: var(--heading); }
h1 { font-size: 1.7rem; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 2.25rem 0 .75rem; }
h2 a { color: inherit; }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
h1::before, h2::before { content: "# "; color: var(--accent); font-weight: 400; }
.muted { color: var(--muted); }
main, .site-header { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
main { padding-top: 1rem; padding-bottom: 3rem; min-height: 60vh; }
body.home main { max-width: none; padding: 0; }

.site-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; padding-top: 1.25rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
.brand { color: var(--accent-hover); font-weight: 700; margin-right: auto; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-header nav a { color: var(--muted); }
.site-header nav a:hover { color: var(--accent-hover); text-decoration: none; }
.site-header nav a::before { content: "/"; color: var(--border); margin-right: .1rem; }
.site-account { margin-left: auto; color: var(--muted); font-size: .9em; }
.site-account a { color: var(--muted); }
.site-account a:hover { color: var(--accent-hover); text-decoration: none; }
.messages { list-style: none; padding: 0; margin: 1rem 0 0; }

#bg-life { position: fixed; inset: 0; z-index: -1; opacity: .07; pointer-events: none; }
@media print { #bg-life { display: none; } }

/* landing */
.hero-media { position: relative; height: 64vh; min-height: 360px; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--bg); }
#media { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.media-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: .75rem; padding: .5rem .9rem; font-size: .82rem; background: linear-gradient(transparent, rgba(18,16,24,.85)); }
.media-caption { margin: 0; flex: 1; color: var(--text); }
.media-caption b { color: var(--accent-hover); font-weight: 600; }
.media-bar button, .life-controls button { background: var(--panel); color: var(--muted); border: 1px solid var(--border); border-radius: 4px; font: inherit; padding: .15rem .5rem; cursor: pointer; }
.media-bar button:hover, .life-controls button:hover { color: var(--accent-hover); border-color: var(--accent); }
.hero-life { position: relative; height: 70vh; min-height: 380px; overflow: hidden; border-bottom: 1px solid var(--border); }
#life { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.hero-text { text-align: center; width: min(90%, 40rem); margin: 3rem auto 4rem; }
.hero-text h1 { font-size: clamp(1.8rem, 5vw, 3rem); margin: 0; }
.hero-text h1::before { content: none; }
.hero-text .tagline { color: var(--text); margin: .5rem 0 1rem; }
.hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; margin: 0; }
.center { text-align: center; }
.hero-links a { background: color-mix(in srgb, var(--panel) 85%, transparent); border: 1px solid var(--border); padding: .25rem .7rem; border-radius: 4px; }
.hero-links a:hover { border-color: var(--accent); text-decoration: none; }
.bio-links { justify-content: flex-start; margin-top: 1rem; }
.life-controls { position: absolute; right: .75rem; bottom: .75rem; display: flex; gap: .35rem; }
.grid { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem 2.5rem; }
.grid h2 { margin-top: .5rem; }

/* lists */
.post-list, .pub-list, .reading-list, .news-list { list-style: none; padding: 0; margin: 0; }
.post-list li, .reading-list li, .news-list li { padding: .3rem 0; }
.post-list time, .news-list time, .reading-list time, .meta, .pub-venue, .pub-authors { color: var(--muted); font-size: .9rem; }
.post-list time, .reading-list.full time { margin-right: .6rem; }
.pub-list li { padding: .75rem 0; border-bottom: 1px solid var(--border); }
.pub-list span { display: block; }
.pub-title { font-weight: 600; }
.pub-links { margin-top: .25rem; font-size: .9rem; }
.pub-links a { margin-right: .75rem; }
.pub-links details { display: inline; }
.pub-links summary { display: inline; cursor: pointer; color: var(--accent); }
.post-summary { margin: 2rem 0; }
.post-summary h2 { margin: 0 0 .25rem; }
.post-summary h2::before { content: none; }
.tags a { margin-right: .75rem; color: var(--muted); }
.pagination { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; color: var(--muted); }
.button { display: inline-block; padding: .4rem .9rem; border: 1px solid var(--accent); border-radius: 4px; background: var(--panel); color: var(--accent-hover); font: inherit; cursor: pointer; }
.button:hover { background: var(--accent); color: #fff; text-decoration: none; }
.settings fieldset { border: 1px solid var(--border); border-radius: 4px; padding: .75rem 1rem; margin: 0 0 1.25rem; }
.settings legend { color: var(--accent-hover); padding: 0 .4rem; }
.settings label { display: block; padding: .15rem 0; cursor: pointer; }
.settings input { margin-right: .5rem; accent-color: var(--accent); }
.settings .swatch { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.05em; margin-left: .4rem; }
.flash { color: var(--accent-hover); }

.hero { display: flex; gap: 1.75rem; align-items: flex-start; margin: 1.5rem 0; }
.avatar { width: 128px; height: 128px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
@media (max-width: 540px) { .hero { flex-direction: column; } }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.card { display: block; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; color: var(--text); }
.card:hover { border-color: var(--accent); text-decoration: none; }
.card h3 { margin: 0 0 .4rem; color: var(--accent-hover); }
.card p { margin: 0 0 .4rem; font-size: .92rem; }

/* rendered Markdown */
.prose img { max-width: 100%; height: auto; border-radius: 4px; }
.prose blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--muted); }
.prose code { background: var(--code-bg); padding: .1em .35em; border-radius: 3px; font-size: .92em; }
.prose pre { background: var(--code-bg); border: 1px solid var(--border); padding: 1rem; border-radius: 6px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95em; }
.prose th, .prose td { border: 1px solid var(--border); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.prose th:empty { display: none; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.prose .footnote { font-size: .9em; color: var(--muted); }
.prose .arithmatex { overflow-x: auto; }

/* CV print */
.cv-actions { margin: .5rem 0 1rem; }
@media print {
  .no-print, .site-header, .site-footer { display: none !important; }
  html, body { background: #fff; color: #111; font: 10.5pt/1.4 Georgia, "Times New Roman", serif; }
  main { max-width: none; padding: 0; min-height: 0; }
  h1, h2, h3 { color: #111; }
  h1::before, h2::before { content: none; }
  h2 { border-bottom: 1px solid #999; padding-bottom: .15rem; margin: 1.1rem 0 .4rem; font-size: 12pt; }
  a { color: #111; text-decoration: none; }
  .prose th, .prose td { border: 0; padding: .15rem .5rem .15rem 0; }
  .prose td:first-child { white-space: nowrap; color: #555; width: 9em; }
  @page { margin: 1.6cm; }
}

/* games table */
.games { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.games th { text-align: left; color: var(--muted); font-weight: 400; font-size: .85rem; padding: .4rem .5rem; border-bottom: 1px solid var(--border); }
.games td { padding: .8rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.games td:first-child a { font-weight: 600; }
.small { font-size: .88rem; }

/* Video embed at the top of a post (front matter `youtube: <id>`) */
.post .video { position: relative; aspect-ratio: 16 / 9; margin: 1rem 0 1.5rem; }
.post .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }