:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --f: "Lora"; --code: "JetBrains Mono"; --size: 17px; --lh: 1.65;
}
:root, :root[data-theme="light"] {
  --bg: #fbe9ee; --ink: #2a1a1f; --muted: #866a72; --line: #efd3da;
  --code-bg: #f6dde3; --code-ink: #33222a; --kw: #7a3e9d; --str: #2f6f3e; --cm: #8a8a84;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1119; --ink: #f3e3ea; --muted: #a88d9b; --line: #3c2634;
    --code-bg: #291826; --code-ink: #e6d4de; --kw: #d9a0f0; --str: #93d3a8; --cm: #8a7382;
  }
}
:root[data-theme="dark"] {
  --bg: #1d1119; --ink: #f3e3ea; --muted: #a88d9b; --line: #3c2634;
  --code-bg: #291826; --code-ink: #e6d4de; --kw: #d9a0f0; --str: #93d3a8; --cm: #8a7382;
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f), serif; font-size: var(--size); line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

/* ---- Layout ---- */
.page { max-width: 52rem; margin: 0 auto; padding: 3rem 1.25rem 6rem; }
header.top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4rem; font-size: .9em; }
header.top .name { font-family: var(--code), monospace; font-size: .9em; font-weight: 500; letter-spacing: .01em; text-decoration: none; color: inherit; }
header.top nav a { color: var(--muted); text-decoration: none; margin-left: 1.2em; }
header.top nav a:first-child { margin-left: 0; }
header.top nav a:hover { color: var(--ink); }
.date { color: var(--muted); font-size: .85em; margin-bottom: .8em; }
h1 { font-size: 2.1em; line-height: 1.12; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 1.2em; }
h2 { font-size: 1.35em; line-height: 1.25; font-weight: 600; margin: 2em 0 .7em; }
h3 { font-size: 1.1em; line-height: 1.3; font-weight: 600; margin: 1.8em 0 .6em; }
p { margin: 0 0 1.2em; }
a { color: inherit; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }
li { margin: 0 0 .35em; }
li > ul, li > ol { margin-top: .35em; margin-bottom: 0; }
blockquote { margin: 0 0 1.2em; padding: 0 0 0 1em; border-left: 2px solid var(--line); color: var(--muted); }
blockquote p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
img { max-width: 100%; height: auto; border-radius: 6px; }
table { border-collapse: collapse; margin: 0 0 1.5em; font-size: .92em; width: 100%; }
th, td { text-align: left; padding: .45em .6em; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; }
strong { font-weight: 600; }
pre {
  font-family: var(--code), monospace; font-size: .82em; line-height: 1.55;
  background: var(--code-bg); color: var(--code-ink);
  padding: 1em 1.15em; border-radius: 6px; overflow-x: auto; margin: 0 0 1.5em;
}
code { font-family: var(--code), monospace; }
p code, li code, td code, h2 code, h3 code { font-size: .88em; background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }

/* ---- Syntax (Pygments classes -> theme tokens) ---- */
.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt, .ow { color: var(--kw); }
.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss { color: var(--str); }
.c, .ch, .cm, .cp, .cpf, .c1, .cs { color: var(--cm); font-style: italic; }

/* ---- Home ---- */
.intro { font-size: 1.15em; line-height: 1.5; margin: 0 0 3.5rem; max-width: 30em; }
.intro p { margin: 0; }
.section-label { font-family: var(--code), monospace; font-size: .72em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 1em; }
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5em; padding: .55em 0; margin: 0; border-top: 1px solid var(--line); }
.posts li:last-child { border-bottom: 1px solid var(--line); }
.posts a { text-decoration: none; }
.posts a:hover { text-decoration: underline; text-underline-offset: .18em; }
.posts time { font-family: var(--code), monospace; font-size: .78em; color: var(--muted); white-space: nowrap; }

/* ---- Post ---- */
footer.end { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85em; }