.blog-site { --reading-width: 740px; }
.blog-site a:focus-visible, .blog-site input:focus-visible, .blog-site select:focus-visible, .blog-site summary:focus-visible, .blog-site pre:focus-visible, .blog-site .table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.blog-intro { padding-top: 52px; padding-bottom: 44px; }
.blog-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; margin-bottom: 30px; }
.blog-breadcrumb a { color: var(--muted); }
.blog-intro h1 { max-width: 880px; font-size: clamp(36px, 4.5vw, 60px); line-height: 1.17; font-weight: 650; text-wrap: initial; margin-bottom: 22px; }
.blog-lead { max-width: 780px; color: var(--muted); font-size: 19px; line-height: 1.8; }
.blog-language-note { font-size: 14px; color: var(--muted); margin-top: 18px; }
.blog-list-section { padding-bottom: 64px; }
.blog-filters { display: flex; gap: 20px; align-items: end; padding-block: 24px; border-block: 1px solid var(--rule); }
.blog-filters > div:first-child { flex: 1; max-width: 500px; }
.blog-filters label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.blog-filters input, .blog-filters select { min-height: 46px; width: 100%; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); background: var(--surface); font: inherit; font-size: 15px; }
.blog-filters input::placeholder { color: var(--subtle); opacity: 1; }
.blog-clear { min-height: 46px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); background: var(--surface); cursor: pointer; font: inherit; font-size: 14px; }
.blog-clear:hover { background: var(--surface-soft); }
.blog-count { font-size: 13px; color: var(--muted); padding-top: 22px; padding-bottom: 8px; }
.blog-row { display: grid; grid-template-columns: 195px minmax(0, 1fr); gap: 40px; padding-block: 30px; border-bottom: 1px solid var(--rule); }
.blog-row[hidden], .blog-filters[hidden], .blog-empty[hidden] { display: none; }
.blog-row-meta { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.blog-row-meta > span:first-child { color: var(--accent); font-weight: 600; }
.blog-row h2, .blog-row h3 { font-size: 24px; line-height: 1.45; font-weight: 600; text-wrap: initial; margin-bottom: 10px; }
.blog-row h2 a, .blog-row h3 a { color: var(--ink); }
.blog-row h2 a:hover, .blog-row h3 a:hover { color: var(--accent); }
.blog-row p { max-width: 82ch; color: var(--muted); font-size: 15px; line-height: 1.8; }
.reading-time { display: block; color: var(--muted); font-size: 13px; margin-top: 12px; }
.blog-empty { padding-block: 50px; color: var(--muted); }
.blog-context { padding-top: 32px; padding-bottom: 64px; border-top: 1px solid var(--rule); }
.blog-context h2 { font-size: 25px; line-height: 1.5; margin-bottom: 12px; }
.blog-context > p { max-width: 800px; color: var(--muted); line-height: 1.9; }
.blog-product-links { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-block: 22px; }
.blog-product-links a, .blog-source-note a, .blog-prose a, .blog-attribution a, .blog-byline a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.blog-source-note { font-size: 13px; }
.blog-article-shell { padding-top: 44px; padding-bottom: 64px; }
.blog-article-header { max-width: 980px; padding-bottom: 38px; border-bottom: 1px solid var(--rule); }
.blog-article-header h1 { max-width: 930px; font-size: clamp(32px, 3.7vw, 49px); line-height: 1.24; text-wrap: initial; overflow-wrap: anywhere; font-weight: 650; margin-bottom: 22px; }
.blog-article-header .blog-lead { max-width: 880px; font-size: 18px; }
.blog-byline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 14px; margin-top: 26px; }
.blog-byline span { margin-inline: 6px; }
.blog-dates { color: var(--muted); font-size: 13px; line-height: 1.85; margin-top: 8px; font-variant-numeric: tabular-nums; }
.blog-reading-layout { display: grid; grid-template-columns: 210px minmax(0, var(--reading-width)); gap: 52px; align-items: start; padding-top: 44px; }
.blog-toc { position: sticky; top: 108px; max-height: calc(100vh - 130px); overflow-y: auto; padding-right: 10px; }
.blog-toc summary { font-size: 14px; font-weight: 600; cursor: pointer; padding-block: 4px; }
.blog-toc ol { list-style: none; margin-top: 16px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.blog-toc a { display: block; color: var(--muted); font-size: 13px; line-height: 1.65; }
.blog-toc a:hover { color: var(--accent); }
.blog-reading-column { min-width: 0; }
.blog-prose { color: var(--ink); font-size: 17px; line-height: 1.95; overflow-wrap: anywhere; }
html[lang='en'] .blog-prose { line-height: 1.85; }
.blog-prose p, .blog-prose ul, .blog-prose ol, .blog-prose blockquote, .blog-prose pre, .blog-prose .table-scroll, .blog-prose .math-tex[data-display='true'] { margin-top: 0; margin-bottom: 24px; }
.blog-prose h2 { font-size: 27px; line-height: 1.5; margin-top: 48px; margin-bottom: 20px; scroll-margin-top: 110px; font-weight: 650; text-wrap: initial; }
.blog-prose h3 { font-size: 21px; line-height: 1.55; margin-top: 32px; margin-bottom: 16px; scroll-margin-top: 110px; font-weight: 600; text-wrap: initial; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose ul, .blog-prose ol { padding-left: 1.5em; }
.blog-prose li { margin-bottom: 9px; }
.blog-prose blockquote { border-left: 3px solid var(--rule); padding-left: 22px; color: var(--muted); }
.blog-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; background: var(--surface-soft); padding: 2px 5px; border-radius: 3px; }
.blog-prose pre { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; white-space: pre; background: var(--surface-soft); border: 1px solid var(--rule); padding: 20px; border-radius: 4px; font-size: 14px; line-height: 1.7; tab-size: 4; overflow-wrap: normal; }
.blog-prose pre code { padding: 0; background: transparent; font-size: inherit; border-radius: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--rule); border-radius: 4px; }
.blog-prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; min-width: 520px; overflow-wrap: normal; word-break: normal; }
.blog-prose th, .blog-prose td { padding: 12px 15px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.blog-prose th { font-weight: 600; background: var(--surface-soft); }
.blog-prose tr:last-child td { border-bottom: 0; }
.blog-prose .math-tex[data-display='true'] { display: block; max-width: 100%; overflow-x: auto; padding-block: 8px; overscroll-behavior-x: contain; }
.blog-prose .katex { font-size: 1.05em; }
.blog-prose .katex-display { margin: 0; text-align: left; }
.blog-prose img { max-width: 100%; height: auto; }
.blog-attribution { border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 44px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.blog-attribution h2 { font-size: 19px; color: var(--ink); margin-bottom: 12px; }
.blog-attribution p { margin-bottom: 14px; }
.blog-related { max-width: 1002px; margin-top: 72px; border-top: 1px solid var(--rule); padding-top: 30px; }
.blog-related > h2 { font-size: 26px; }
.blog-related .blog-row { grid-template-columns: 170px minmax(0, 1fr); gap: 40px; }
.blog-related .blog-row h3 { font-size: 21px; }
.blog-related > .link-more { display: inline-block; margin-top: 26px; }
@media (max-width: 1000px) {
  .blog-reading-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 32px; }
  .blog-row { gap: 28px; grid-template-columns: 165px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .blog-intro { padding-top: 28px; padding-bottom: 28px; }
  .blog-breadcrumb { margin-bottom: 24px; }
  .blog-intro h1 { font-size: 37px; line-height: 1.25; }
  .blog-lead { font-size: 17px; }
  .blog-filters { flex-wrap: wrap; gap: 16px 12px; }
  .blog-filters > div:first-child { flex: 1 0 100%; max-width: none; }
  .blog-filters > div:nth-child(2) { flex: 1; }
  .blog-row, .blog-related .blog-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 26px; }
  .blog-row-meta { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  .blog-row h2 { font-size: 22px; }
  .blog-context { padding-bottom: 44px; }
  .blog-context h2 { font-size: 23px; }
  .blog-article-shell { padding-top: 28px; padding-bottom: 44px; }
  .blog-article-header { padding-bottom: 26px; }
  .blog-article-header h1 { font-size: 32px; line-height: 1.3; }
  .blog-article-header .blog-lead { font-size: 16px; }
  .blog-reading-layout { display: block; padding-top: 24px; }
  .blog-toc { position: static; max-height: none; border-bottom: 1px solid var(--rule); padding-bottom: 22px; margin-bottom: 28px; }
  .blog-toc ol { gap: 10px; }
  .blog-toc a { font-size: 14px; }
  .blog-prose { font-size: 16px; line-height: 1.95; }
  .blog-prose h2 { font-size: 24px; margin-top: 36px; }
  .blog-prose h3 { font-size: 20px; }
  .blog-prose pre { padding: 15px; font-size: 13px; }
  .blog-related { margin-top: 48px; }
}