:root {
  --bg: #fdfdfc; --fg: #23272e; --muted: #6b7280;
  --accent: #1a56a8; --line: #e4e4e1; --code-bg: #f3f4f6;
  --code-fg: #1f2933; --warn-bg: #fff8e6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d; --fg: #e4e6ea; --muted: #9aa3b2;
    --accent: #7aa7ee; --line: #2c313a; --code-bg: #22262e;
    --code-fg: #dfe3e9; --warn-bg: #2a2415;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.7 "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 42rem; margin: 0 auto; padding: 3.5rem 1.25rem 6rem; }
header.site { margin-bottom: 3rem; border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; }
header.site .brand { font-size: 1.05rem; letter-spacing: .01em; font-weight: 600; }
header.site .brand a { color: inherit; text-decoration: none; }
header.site .tag { color: var(--muted); font-size: .92rem; margin-top: .25rem; font-family: ui-sans-serif, system-ui, sans-serif; }
nav.top { margin-top: .85rem; display: flex; gap: 1.25rem; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .88rem; }
nav.top a { color: var(--accent); text-decoration: none; }
nav.top a:hover { text-decoration: underline; }
h1 { font-size: 1.95rem; line-height: 1.22; margin: 0 0 .35rem; letter-spacing: -.015em; }
h2 { font-size: 1.32rem; margin: 2.6rem 0 .85rem; letter-spacing: -.01em; }
h3 { font-size: 1.08rem; margin: 1.9rem 0 .6rem; }
.meta { color: var(--muted); font-size: .87rem; font-family: ui-sans-serif, system-ui, sans-serif; margin-bottom: 1.75rem; }
p { margin: 0 0 1.15rem; }
a { color: var(--accent); }
code, pre {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: .855em;
}
code { background: var(--code-bg); color: var(--code-fg); padding: .12em .38em; border-radius: 4px; }
pre {
  background: var(--code-bg); color: var(--code-fg); padding: 1rem 1.15rem;
  border-radius: 8px; overflow-x: auto; line-height: 1.55; margin: 1.15rem 0;
  border: 1px solid var(--line);
}
pre code { background: none; padding: 0; font-size: .845em; }
blockquote {
  margin: 1.4rem 0; padding: .15rem 0 .15rem 1.15rem;
  border-left: 3px solid var(--line); color: var(--muted); font-style: italic;
}
table { width: 100%; border-collapse: collapse; margin: 1.35rem 0; font-size: .93rem; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .045em; color: var(--muted); }
ul, ol { padding-left: 1.35rem; margin: 0 0 1.15rem; }
li { margin-bottom: .42rem; }
.note {
  background: var(--warn-bg); border: 1px solid var(--line); border-radius: 8px;
  padding: .95rem 1.15rem; margin: 1.5rem 0; font-size: .955rem;
}
.note strong { display: block; margin-bottom: .3rem; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
.list-post { margin: 2.25rem 0 0; padding: 0; list-style: none; }
.list-post li { margin-bottom: 1.85rem; }
.list-post a.title { font-size: 1.14rem; font-weight: 600; text-decoration: none; color: var(--fg); }
.list-post a.title:hover { color: var(--accent); }
.list-post .excerpt { color: var(--muted); margin: .35rem 0 0; font-size: .96rem; }
.list-post .meta { margin: .25rem 0 0; }
footer.site {
  margin-top: 4.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .86rem; font-family: ui-sans-serif, system-ui, sans-serif;
}
.toc {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 1rem 1.25rem; margin: 1.75rem 0 2.25rem; font-size: .92rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.toc strong { display: block; margin-bottom: .5rem; font-size: .78rem; letter-spacing: .055em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: .28rem; }
.grid-cards { display: grid; gap: .9rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.grid-cards li { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.15rem; margin: 0; }
.grid-cards a { text-decoration: none; font-weight: 600; color: var(--fg); }
.grid-cards a:hover { color: var(--accent); }
.grid-cards .d { color: var(--muted); font-size: .92rem; margin-top: .3rem; }
@media (max-width: 34rem) {
  body { font-size: 16px; }
  h1 { font-size: 1.65rem; }
}