/* Themes: data-theme on <html>. "paper" follows the OS light/dark setting;
   the others are fixed IDE-style palettes (IntelliJ Light, Darcula, the
   IntelliJ New UI dark theme and High Contrast). The --tk-* variables color
   syntax-highlighted code. */
:root, [data-theme="paper"] {
  --bg: #fbfaf7; --fg: #1d1d1b; --muted: #6b6b66; --rule: #e4e1da; --accent: #9a3b1f; --card: #ffffff;
  --tk-kw: #9a3b1f; --tk-str: #4d7a2a; --tk-num: #1f5f9a; --tk-cmt: #8a8780; --tk-fn: #6b4aa0; --tk-attr: #8a5a12;
  --font-body: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-ui: ui-sans-serif, system-ui, sans-serif;
  --font-head: var(--font-body);
  --max: 42rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), [data-theme="paper"] {
    --bg: #151514; --fg: #ecebe6; --muted: #a09e97; --rule: #2e2d2a; --accent: #e08a62; --card: #1d1d1b;
    --tk-kw: #e08a62; --tk-str: #a5c27a; --tk-num: #7fb0e0; --tk-cmt: #8d8b84; --tk-fn: #c3a6f0; --tk-attr: #e0b46a;
  }
}
[data-theme="intellij-light"] {
  --bg: #ffffff; --fg: #080808; --muted: #6f737a; --rule: #ebecf0; --accent: #0033b3; --card: #f7f8fa;
  --tk-kw: #0033b3; --tk-str: #067d17; --tk-num: #1750eb; --tk-cmt: #8c8c8c; --tk-fn: #00627a; --tk-attr: #871094;
}
[data-theme="darcula"] {
  --bg: #2b2b2b; --fg: #a9b7c6; --muted: #808080; --rule: #3c3f41; --accent: #cc7832; --card: #313335;
  --tk-kw: #cc7832; --tk-str: #6a8759; --tk-num: #6897bb; --tk-cmt: #808080; --tk-fn: #ffc66d; --tk-attr: #9876aa;
}
[data-theme="new-dark"] {
  --bg: #1e1f22; --fg: #bcbec4; --muted: #868a91; --rule: #2b2d30; --accent: #56a8f5; --card: #2b2d30;
  --tk-kw: #cf8e6d; --tk-str: #6aab73; --tk-num: #2aacb8; --tk-cmt: #7a7e85; --tk-fn: #56a8f5; --tk-attr: #c77dbb;
}
[data-theme="high-contrast"] {
  --bg: #000000; --fg: #ffffff; --muted: #c7c7c7; --rule: #5a5a5a; --accent: #ffd700; --card: #0d0d0d;
  --tk-kw: #ffd700; --tk-str: #3dff9a; --tk-num: #6cc7ff; --tk-cmt: #bdbdbd; --tk-fn: #ff8ad8; --tk-attr: #ffb070;
}
/* IDE themes read like an editor: sans body, monospace headings and UI,
   section headings as comments. */
[data-theme="intellij-light"], [data-theme="darcula"], [data-theme="new-dark"], [data-theme="high-contrast"] {
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --font-ui: var(--font-head);
}
[data-theme="intellij-light"] h2::before, [data-theme="darcula"] h2::before,
[data-theme="new-dark"] h2::before, [data-theme="high-contrast"] h2::before { content: "// "; color: var(--tk-cmt); font-weight: 400; }
[data-theme="intellij-light"] .posts a.title, [data-theme="darcula"] .posts a.title,
[data-theme="new-dark"] .posts a.title, [data-theme="high-contrast"] .posts a.title { color: var(--tk-fn); }

* { box-sizing: border-box; }
html { font-size: 106.25%; color-scheme: light dark; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 1rem/1.65 var(--font-body);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); text-underline-offset: 0.18em; }
a:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 3.5rem 1.25rem 4rem; }
header.site { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
header.site .name { font-family: var(--font-head); font-weight: 600; color: var(--fg); text-decoration: none; letter-spacing: 0.01em; }
nav.site { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; font-family: var(--font-ui); font-size: 0.9rem; }
nav.site a { color: var(--muted); text-decoration: none; }
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--fg); }
.theme-picker select {
  font: inherit; font-size: 0.85rem; color: var(--fg); background: var(--card);
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.15rem 0.35rem;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1, h2, h3 { font-family: var(--font-head); }
h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 0.75rem; }
.lede { font-size: 1.15rem; color: var(--muted); margin: 0 0 2rem; }
.meta { font-family: var(--font-ui); font-size: 0.85rem; color: var(--muted); }
.links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-family: var(--font-ui); font-size: 0.95rem; }
.posts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.posts li { border-bottom: 1px solid var(--rule); padding: 1.1rem 0; }
.posts a.title { font-family: var(--font-head); font-weight: 600; color: var(--fg); text-decoration: none; font-size: 1.05rem; }
.posts a.title:hover { color: var(--accent); }
.posts p { margin: 0.35rem 0 0; color: var(--muted); }
figure { margin: 2rem 0; }
figure img { width: 100%; height: auto; display: block; border-radius: 6px; background: var(--rule); }
figcaption { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); margin-top: 0.5rem; }
.note {
  font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.5;
  background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  padding: 0.85rem 1rem; border-radius: 4px; margin: 2rem 0;
}
footer.site { margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.intro { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
.intro h1 { margin: 0; }
.portrait { display: block; width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); background: var(--rule); }
.post h3 { font-size: 1.1rem; margin: 2rem 0 0.5rem; }
.post hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
.post a { overflow-wrap: anywhere; }
code { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; background: var(--card); border: 1px solid var(--rule); border-radius: 3px; padding: 0.08em 0.3em; overflow-wrap: anywhere; color: var(--tk-fn); }
pre { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 0.85rem 1rem; overflow-x: auto; line-height: 1.5; margin: 1.25rem 0; }
pre code { background: none; border: 0; padding: 0; font-size: 0.82rem; overflow-wrap: normal; color: var(--fg); }
.tk-kw { color: var(--tk-kw); font-weight: 600; }
.tk-str { color: var(--tk-str); }
.tk-num { color: var(--tk-num); }
.tk-cmt { color: var(--tk-cmt); font-style: italic; }
.tk-fn { color: var(--tk-fn); }
.tk-attr { color: var(--tk-attr); }
@media (max-width: 30rem) {
  .wrap { padding-top: 2rem; } h1 { font-size: 1.7rem; }
  .intro { flex-direction: column; align-items: flex-start; gap: 1rem; } .portrait { width: 7rem; height: 7rem; }
}