:root { --bg: #171a21; --bg-elevated: #1d212b; --text: #f3f4f6; --body-text: #d7dbe2; --muted: #8f96a3; --faint: #687080; --line: #343a46; --line-soft: rgba(143, 150, 163, 0.16); --code-bg: #11141a; --code-border: #303642; --accent: #7aa2f7; --wip: #ff6f91; --title-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --body-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif-font: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

html[data-theme="light"] { --bg: #f5f7fb; --bg-elevated: #eef2f8; --text: #1c2230; --body-text: #343b49; --muted: #6d7584; --faint: #9299a5; --line: #cfd5df; --line-soft: rgba(76, 88, 108, 0.12); --code-bg: #edf1f7; --code-border: #cdd5e0; --accent: #466fc9; --wip: #d94f72; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }

body.blog-post-page, body.blog-index-page { margin: 0; color: var(--body-text); background: radial-gradient(circle at 65% -10%, rgba(122, 162, 247, 0.08), transparent 38rem), var(--bg); font-family: var(--body-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

a { color: inherit; }

.post-topbar, .blog-index-topbar { width: min(1110px, calc(100% - 48px)); margin: 0 auto; padding: 36px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--title-font); font-size: 12px; font-weight: 650; letter-spacing: 0.12em; color: var(--muted); }

.post-date-link, .post-topbar-actions a, .blog-index-topbar a { text-decoration: none; }

.post-date-link:hover, .post-topbar-actions a:hover, .blog-index-topbar a:hover { color: var(--text); }

.post-topbar-actions { display: flex; align-items: center; gap: 20px; letter-spacing: 0; font-size: 14px; }

.theme-toggle { appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 3px; font-size: 20px; line-height: 1; }

.theme-toggle:hover { color: var(--text); }

.post-shell { width: min(1420px, calc(100% - 64px)); margin: 0 auto; padding-bottom: 120px; }

.post-hero { width: min(820px, 100%); margin-left: calc((100% - min(820px, 100%)) / 2); padding: 16px 0 28px; }

.post-hero h1 { max-width: 760px; margin: 18px 0 34px; color: var(--text); font-family: var(--title-font); font-size: clamp(46px, 5vw, 70px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 720; }

.author-block { display: flex; align-items: center; gap: 14px; font-family: var(--title-font); }

.author-avatar { width: 58px; height: 58px; object-fit: cover; border-radius: 50%; filter: saturate(0.9); }

.author-name { color: var(--text); font-size: 17px; font-weight: 700; }

.author-subtitle { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.35; }

.post-description, .post-deck { margin: 26px 0 0; color: var(--muted); font-family: var(--serif-font); font-size: 21px; line-height: 1.55; }

.post-grid { position: relative; display: grid; grid-template-columns: 250px minmax(0, 820px) 250px; gap: 46px; justify-content: center; align-items: start; }

.toc-sidebar { min-width: 0; font-family: var(--title-font); }

.toc-sticky { position: sticky; top: 28px; max-height: calc(100vh - 56px); overflow: auto; padding: 16px 6px 16px 0; scrollbar-width: thin; }

.toc-heading { margin-bottom: 18px; color: var(--text); font-size: 11px; font-weight: 750; letter-spacing: 0.12em; }

#toc ul { list-style: none; margin: 0; padding: 0; }

#toc li { margin: 0; border-left: 2px solid transparent; padding-left: 12px; }

#toc li.toc-h3 { margin-left: 12px; border-left: 1px solid var(--line); padding-left: 12px; }

#toc a { display: block; padding: 6px 0; color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.25; transition: color 120ms ease; }

#toc a:hover { color: var(--text); }

#toc a.active { color: var(--accent); font-weight: 650; }

#toc li:has(a.active) { border-left-color: var(--accent); }

.post-content { min-width: 0; color: var(--body-text); font-family: var(--body-font); font-size: 18px; line-height: 1.72; letter-spacing: -0.005em; }

.post-content > :first-child { margin-top: 0; }

.post-content p { margin: 0 0 28px; }

.post-content h2, .post-content h3, .post-content h4 { color: var(--text); font-family: var(--title-font); scroll-margin-top: 40px; }

.post-content h2 { margin: 64px 0 20px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 30px; line-height: 1.18; letter-spacing: -0.02em; }

.post-content h3 { margin: 42px 0 16px; font-size: 22px; line-height: 1.25; }

.post-content h4 { margin: 32px 0 12px; font-size: 18px; }

.post-content a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

.post-content strong { color: var(--text); }

.post-content code { font-family: var(--mono-font); font-size: 0.86em; }

.post-content p code, .post-content li code { color: var(--text); }

.post-content pre, .post-content .highlight { overflow-x: auto; margin: 30px 0 36px; border: 1px solid var(--code-border); border-radius: 6px; background: var(--code-bg); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); }

.post-content pre { padding: 22px 24px; color: #dddcd6; font-size: 15px; line-height: 1.55; }

html[data-theme="light"] .post-content pre { color: #2b3240; }

.post-content .highlight pre { margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: #f07178; }

.highlight .n, .highlight .na, .highlight .nb, .highlight .bp { color: #d7dbe2; }

.highlight .nf, .highlight .nc { color: #c39af0; }

.highlight .s, .highlight .s1, .highlight .s2, .highlight .mi, .highlight .mf { color: #89b4fa; }

.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp { color: #7d8594; }

.highlight .o, .highlight .ow { color: #f07178; }

html[data-theme="light"] .highlight .n, html[data-theme="light"] .highlight .na, html[data-theme="light"] .highlight .nb, html[data-theme="light"] .highlight .bp { color: #303746; }

.post-content blockquote { margin: 32px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--accent); color: var(--muted); }

.post-content blockquote p:last-child { margin-bottom: 0; }

.post-content img, .post-content video { display: block; max-width: 100%; height: auto; margin: 34px auto; border-radius: 5px; }

.post-content figure { margin: 38px 0; }

.post-content figcaption { margin-top: -22px; color: var(--muted); font-family: var(--title-font); font-size: 13px; line-height: 1.45; }

.post-content table { width: 100%; border-collapse: collapse; margin: 34px 0 46px; font-size: 17px; }

.post-content th { padding: 10px 8px 14px; border-bottom: 2px solid var(--accent); color: var(--text); font-family: var(--title-font); font-size: 12px; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }

.post-content td { padding: 14px 8px; border-bottom: 1px solid var(--line-soft); }

.post-content tr:hover td { background: rgba(122, 162, 247, 0.035); }

.post-content ul, .post-content ol { padding-left: 1.4em; margin-bottom: 28px; }

.post-content li { margin-bottom: 8px; }

.sidenote-rail { position: relative; min-height: 100%; font-family: var(--body-font); font-size: 14px; line-height: 1.45; color: var(--muted); }

.margin-note { position: absolute; left: 0; width: 100%; padding-left: 12px; border-left: 1px solid var(--line); transition: top 180ms ease; }

.margin-note-number { color: var(--accent); font-weight: 700; }

.margin-note p { display: inline; margin: 0; }

.footnote { color: var(--accent); font-family: var(--title-font); font-size: 0.7em; font-weight: 700; text-decoration: none !important; vertical-align: super; }

.footnotes { margin-top: 70px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }

.footnotes::before { content: "Footnotes"; display: block; margin-bottom: 20px; color: var(--text); font-family: var(--title-font); font-size: 23px; font-weight: 700; }

.footnotes ol { padding-left: 1.2em; }

.footnotes .reversefootnote { text-decoration: none; }

.blog-index-shell { width: min(920px, calc(100% - 48px)); margin: 0 auto; padding: 56px 0 120px; }

.blog-index-title { margin: 0 0 70px; color: var(--text); font-family: var(--title-font); font-size: clamp(52px, 8vw, 88px); line-height: 0.95; letter-spacing: -0.05em; }

.blog-year { margin: 50px 0 18px; color: var(--muted); font-family: var(--title-font); font-size: 13px; letter-spacing: 0.12em; }

.blog-post-list { list-style: none; padding: 0; margin: 0; }

.blog-post-list li { border-top: 1px solid var(--line-soft); }

.blog-post-list a { display: grid; grid-template-columns: 105px 1fr; gap: 24px; padding: 28px 0 30px; text-decoration: none; }

.blog-post-list a:hover .blog-list-title { color: var(--accent); }

.blog-list-date { color: var(--muted); font-family: var(--title-font); font-size: 13px; padding-top: 7px; }

.blog-list-title { color: var(--text); font-family: var(--title-font); font-size: 28px; font-weight: 650; letter-spacing: -0.02em; transition: color 120ms ease; }

.blog-list-description { margin-top: 8px; color: var(--muted); font-family: var(--serif-font); font-size: 16px; line-height: 1.45; }

.wip, .blog-wip { color: var(--wip); font-weight: 700; }

@media (max-width: 1180px) { .post-shell { width: min(980px, calc(100% - 48px)); }
  .post-hero { width: min(760px, 100%); margin: 0 auto; }
  .post-grid { grid-template-columns: 190px minmax(0, 760px); gap: 34px; }
  .sidenote-rail { display: none; } }
@media (max-width: 800px) { .post-topbar, .blog-index-topbar, .post-shell, .blog-index-shell { width: calc(100% - 36px); }
  .post-topbar { padding-top: 22px; }
  .post-topbar-actions a { display: none; }
  .post-hero { padding-top: 6px; }
  .post-hero h1 { margin-top: 14px; margin-bottom: 24px; font-size: clamp(42px, 13vw, 60px); }
  .post-grid { display: block; }
  .toc-sidebar { margin: 20px 0 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .toc-sticky { position: static; max-height: none; padding: 18px 0; }
  #toc { column-count: 1; }
  .post-content { font-size: 17px; line-height: 1.7; }
  .post-content h2 { font-size: 27px; }
  .post-content pre { margin-left: -6px; margin-right: -6px; padding: 18px; border-radius: 6px; font-size: 13px; }
  .post-content table { display: block; overflow-x: auto; font-size: 16px; }
  .footnotes { display: block; }
  .blog-index-shell { padding-top: 28px; }
  .blog-index-title { margin-bottom: 44px; }
  .blog-post-list a { grid-template-columns: 1fr; gap: 8px; } }
.post-topbar { justify-content: flex-end; }

.post-topbar-actions { margin-left: auto; }

.topbar-separator { color: var(--faint); user-select: none; }