:root {
  --bg: #121018; --panel: #1a1626; --border: #2e2640; --muted: #6b6280; --text: #d0cdd8;
  --accent: #8b5cf6; --accent-hover: #a78bfa; --code-bg: #15121f;
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Consolas, monospace;
  --max: 46rem;
}
* { 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: #e9e6f0; }
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; }

#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; }
.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; }

.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; }
}