/* An independent reading surface; homepage typography and theme stay separate. */
html[data-blog-reading] {
  --reading-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Songti SC",STSong,"Noto Serif CJK SC","Source Han Serif SC",serif;
  --reading-ui:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --reading-code:Consolas,Menlo,Monaco,monospace;
  --global-bg-color:#fafaf7;
  --global-card-bg-color:#ffffff;
  --global-text-color:#262b30;
  --global-text-color-light:#626a73;
  --global-theme-color:#36566f;
  --global-hover-color:#213d53;
  --global-divider-color:#dcdedc;
  --global-code-bg-color:#efefeb;
  --reading-soft:#f0f1ed;
  color-scheme:light;
  font-size:16px;
  scroll-padding-top:28px;
}
html[data-blog-reading][data-theme="dark"] {
  --global-bg-color:#191b1e;
  --global-card-bg-color:#202327;
  --global-text-color:#e4e3de;
  --global-text-color-light:#a9adb3;
  --global-theme-color:#b1c7d8;
  --global-hover-color:#d7e5ee;
  --global-divider-color:#3b3f43;
  --global-code-bg-color:#272b30;
  --reading-soft:#23272b;
  color-scheme:dark;
}
.blog-shell-body {
  margin:0;
  padding:0;
  background:var(--global-bg-color);
  color:var(--global-text-color);
  font:16px/1.75 var(--reading-ui);
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.blog-shell-body * { box-sizing:border-box; }
.blog-shell-body [hidden] { display:none!important; }
.blog-shell-body a { text-underline-offset:4px; }
.blog-shell-body button,.blog-shell-body input { font-family:var(--reading-ui); }
.blog-shell-body a,.blog-shell-body button { touch-action:manipulation; }
.blog-shell-body a:focus-visible,.blog-shell-body button:focus-visible,.blog-shell-body input:focus-visible { outline:2px solid var(--global-theme-color); outline-offset:4px; }
.blog-shell-body h1,.blog-shell-body h2,.blog-shell-body h3 { text-wrap:pretty; }
.blog-shell-body ::selection { background:#c9d8e2; color:#172a38; }
.blog-skip-link { position:fixed; top:-100px; left:20px; z-index:100; background:var(--global-card-bg-color); padding:10px 16px; }
.blog-skip-link:focus { top:8px; }
.blog-topbar { position:static; border:0; background:transparent; backdrop-filter:none; }
.blog-topbar-inner {
  width:min(1040px,calc(100% - 64px));
  max-width:none;
  min-height:88px;
  padding:0;
  margin:0 auto;
  border-bottom:1px solid var(--global-divider-color);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.blog-home-button { justify-self:start; display:inline-flex; align-items:center; gap:10px; padding:6px 0; color:var(--global-text-color-light); border:0; border-radius:0; background:none; font:13px/1.6 var(--reading-ui); text-decoration:none; }
.blog-home-button:hover { color:var(--global-theme-color); background:none; }
.blog-wordmark { font:500 19px/1.5 var(--reading-serif); letter-spacing:0; color:var(--global-text-color); text-decoration:none; }
.blog-theme-toggle { justify-self:end; width:auto; height:auto; padding:8px 0; border:0; border-radius:0; color:var(--global-text-color-light); background:none; font:12px/1.6 var(--reading-ui); cursor:pointer; }
.blog-theme-toggle:hover { color:var(--global-theme-color); background:none; }
.blog-content { width:min(1040px,calc(100% - 64px)); max-width:none; margin:0 auto; padding:0; flex:1; min-width:0; }
.blog-content:focus { outline:0; }
.blog-reading-footer { width:min(1040px,calc(100% - 64px)); margin:40px auto 0; padding:26px 0 34px; border-top:1px solid var(--global-divider-color); color:var(--global-text-color-light); display:flex; justify-content:space-between; gap:24px; font:12px/1.8 var(--reading-ui); }
.blog-reading-footer nav { display:flex; gap:24px; flex-wrap:wrap; }
.blog-reading-footer a { color:var(--global-text-color-light); text-decoration:none; }
.blog-reading-footer a:hover { color:var(--global-theme-color); text-decoration:underline; }
.blog-shell-body .blog-page { max-width:none; padding:64px 0 40px; }
.blog-hero { grid-template-columns:minmax(0,1fr) auto; padding:0 0 38px; gap:36px; border-bottom:1px solid var(--global-divider-color); }
.blog-editorial-label { color:var(--global-text-color-light); margin:0 0 18px; font:13px/1.6 var(--reading-ui); letter-spacing:.02em; }
.blog-hero h1 { font:500 clamp(38px,4.8vw,56px)/1.25 var(--reading-serif); letter-spacing:-.025em; margin:0; }
.blog-intro { max-width:680px; margin:20px 0 0; color:var(--global-text-color-light); font:18px/1.8 var(--reading-serif); }
.blog-archive-count { margin:0 0 5px; color:var(--global-text-color-light); font:12px/1.8 var(--reading-ui); white-space:nowrap; }
.blog-archive-count span { padding:0 7px; }
.blog-toolbar { padding:28px 0 38px; align-items:center; }
.blog-search label { font:12px/1.6 var(--reading-ui); text-transform:none; letter-spacing:0; color:var(--global-text-color-light); }
.blog-search-field { min-height:44px; background:transparent; border:0; border-bottom:1px solid var(--global-divider-color); border-radius:0; padding:0; gap:12px; }
.blog-search-field:focus-within { box-shadow:none; border-color:var(--global-theme-color); }
.blog-search-field>i { color:var(--global-text-color-light); font-size:13px; }
.blog-search-field input { font:14px/1.7 var(--reading-ui); padding:10px 0; color:var(--global-text-color); }
.blog-search-field input::placeholder { color:var(--global-text-color-light); opacity:1; }
.blog-toolbar-status,.blog-reset { font:12px/1.7 var(--reading-ui); }
.blog-layout { grid-template-columns:160px minmax(0,1fr); gap:56px; }
.blog-shell-body .blog-sidebar { position:static; top:auto; padding:0; }
.blog-sidebar-heading h2 { font:600 13px/1.6 var(--reading-ui); text-transform:none; letter-spacing:0; }
.blog-sidebar-heading>span { font:11px var(--reading-ui); }
.blog-filter { font:13px/1.7 var(--reading-ui); padding:7px 0; border:0; border-radius:0; background:transparent; }
.blog-filter:hover { background:transparent; color:var(--global-theme-color); }
.blog-filter.is-active { background:transparent; color:var(--global-theme-color); font-weight:600; }
.blog-filter b { font:11px var(--reading-ui); color:var(--global-text-color-light); }
.blog-sidebar-note { display:none; }
.blog-results-heading { margin-bottom:22px; }
.blog-results-heading h2 { font:500 20px/1.6 var(--reading-serif); letter-spacing:0; }
.blog-year-heading h3 { font:500 16px/1.6 var(--reading-serif); letter-spacing:0; }
.blog-year-heading>span { font:12px var(--reading-ui); }
.blog-card-list { gap:0; }
.blog-card { grid-template-columns:100px minmax(0,1fr); gap:26px; padding:27px 0; border:0; border-top:1px solid var(--global-divider-color); border-radius:0; background:transparent; box-shadow:none; }
.blog-card:hover { border-color:var(--global-divider-color); background:none; box-shadow:none; transform:none; }
.blog-card-date { color:var(--global-text-color-light); font:12px/1.8 var(--reading-ui); }
.blog-card-body h3 { font:600 23px/1.5 var(--reading-serif); letter-spacing:0; margin:0 0 11px; }
.blog-card-body h3 a { color:var(--global-text-color); }
.blog-card-body h3 a:hover { color:var(--global-theme-color); }
.blog-card-body>p { font:16px/1.9 var(--reading-serif); color:var(--global-text-color-light); }
.blog-card-footer { margin-top:16px; }
.blog-card-tags { gap:10px 15px; }
.blog-tag,.blog-tag-muted { font:12px/1.7 var(--reading-ui); color:var(--global-text-color-light); border:0; background:none; border-radius:0; padding:2px 0; letter-spacing:0; }
.blog-tag:hover { color:var(--global-theme-color); background:none; text-decoration:underline; }
.blog-card-arrow { color:var(--global-text-color-light); }
.blog-empty { background:transparent; border:1px solid var(--global-divider-color); border-radius:0; padding:36px; }
.blog-empty h3 { font:500 25px/1.5 var(--reading-serif); }
.blog-section-kicker { text-transform:none; letter-spacing:0; font:12px var(--reading-ui); }
.blog-post { --blog-reading-width:720px; --blog-serif:var(--reading-serif); --blog-mono:var(--reading-code); max-width:var(--blog-reading-width); margin:0 auto; padding:58px 0 42px; }
.blog-post-back { font:13px/1.7 var(--reading-ui); letter-spacing:0; color:var(--global-text-color-light); }
.blog-post-back:hover { color:var(--global-theme-color); transform:none; }
.blog-post-header { margin-top:38px; padding-bottom:30px; border-bottom:1px solid var(--global-divider-color); }
.blog-post-kicker { font:12px/1.7 var(--reading-ui); text-transform:none; letter-spacing:.02em; color:var(--global-text-color-light); margin:0 0 18px; }
.blog-post-title { font:600 clamp(30px,3.6vw,40px)/1.5 var(--reading-serif); color:var(--global-text-color); letter-spacing:-.015em; margin:0; }
.blog-post-description { font:18px/1.9 var(--reading-serif); color:var(--global-text-color-light); margin:22px 0 0; }
.blog-post-meta { font:12px/1.8 var(--reading-ui); color:var(--global-text-color-light); margin-top:23px; gap:11px; }
.blog-post-tags { gap:8px 16px; margin-top:14px; }
.blog-post-content,.blog-post-content>p:first-of-type { font:20px/1.95 var(--reading-serif); color:var(--global-text-color); }
.blog-post-content { margin-top:40px; overflow-wrap:break-word; }
.blog-post-content p { margin:0 0 1.4em; }
.blog-post-content h2,.blog-post-content h3,.blog-post-content h4,.blog-post-content h5 { font-family:var(--reading-serif); font-weight:600; line-height:1.6; letter-spacing:0; scroll-margin-top:28px; }
.blog-post-content h2 { font-size:27px; margin:2.2em 0 .9em; }
.blog-post-content h3 { font-size:23px; margin:1.9em 0 .8em; }
.blog-post-content h4 { font-size:21px; }
.blog-post-content strong { font-weight:700; }
.blog-post-content blockquote { background:none; font-size:1em; color:var(--global-text-color-light); border-left:2px solid var(--global-divider-color); padding:2px 0 2px 24px; margin:1.8em 0; }
.blog-post-content a { color:var(--global-theme-color); overflow-wrap:anywhere; }
.blog-post-content pre { font:13px/1.8 var(--reading-code); background:var(--global-code-bg-color); border:0; border-radius:3px; padding:22px; margin:1.8em 0; overflow:auto; max-width:100%; }
.blog-post-content pre code { font:inherit; background:none; padding:0; color:inherit; }
.blog-post-content :not(pre)>code { font-family:var(--reading-code); font-size:.76em; border-radius:2px; }
.blog-post-content img { border-radius:2px; }
.blog-post-content table { font:15px/1.8 var(--reading-ui); border-collapse:collapse; }
.blog-post-content th,.blog-post-content td { border-bottom:1px solid var(--global-divider-color); padding:10px 14px; text-align:left; }
.blog-post-content .MathJax,.blog-post-content mjx-container { max-width:100%; overflow-x:auto; overflow-y:hidden; }
.blog-post-footer { margin-top:54px; padding-top:28px; border-color:var(--global-divider-color); }
.blog-post-pagination { margin-top:30px; gap:28px; }
.blog-post-pagination-link { border:0; border-top:1px solid var(--global-divider-color); border-radius:0; background:none; padding:20px 0; }
.blog-post-pagination-link:hover { background:none; box-shadow:none; transform:none; }
.blog-post-pagination-label { font:12px/1.7 var(--reading-ui); letter-spacing:0; text-transform:none; color:var(--global-text-color-light); }
.blog-post-pagination-title { font:17px/1.8 var(--reading-serif); color:var(--global-text-color); }
.blog-archive-title { font:19px/1.7 var(--reading-serif); }
.blog-archive-item time { font:12px/1.7 var(--reading-ui); }
.code-display-wrapper:focus-within>.copy { opacity:1; }
@media (pointer:coarse) { .code-display-wrapper>.copy { opacity:1; } }
@media (max-width:767px) {
  .blog-topbar-inner,.blog-content,.blog-reading-footer { width:calc(100% - 40px); }
  .blog-topbar-inner { min-height:72px; grid-template-columns:1fr auto; gap:15px; }
  .blog-home-button { font-size:12px; gap:7px; }
  .blog-wordmark { display:none; }
  .blog-theme-toggle { font-size:12px; min-height:44px; }
  .blog-shell-body .blog-page { padding:38px 0 12px; }
  .blog-hero { display:block; padding:0 0 26px; }
  .blog-hero h1 { font-size:40px; }
  .blog-intro { font-size:17px; line-height:1.85; margin-top:18px; }
  .blog-archive-count { margin-top:22px; }
  .blog-toolbar { display:block; padding:22px 0 28px; }
  .blog-search { max-width:none; }
  .blog-toolbar-status { justify-content:space-between; padding-top:15px; }
  .blog-layout { display:block; }
  .blog-shell-body .blog-sidebar { display:block; border-bottom:1px solid var(--global-divider-color); padding:0 0 22px; margin:0 0 27px; }
  .blog-shell-body .blog-sidebar-section { padding:0; margin:0 0 14px; border:0; }
  .blog-shell-body .blog-filter-list { display:flex; flex-wrap:wrap; gap:3px 20px; }
  .blog-shell-body .blog-filter { flex:0 0 auto; padding:7px 0; min-height:38px; width:auto; }
  .blog-card { grid-template-columns:1fr; gap:12px; padding:23px 0; }
  .blog-card-date { display:flex; gap:15px; font-size:12px; }
  .blog-card-body h3 { font-size:23px; }
  .blog-card-body>p { font-size:16px; }
  .blog-post { padding:34px 0 22px; }
  .blog-post-header { margin-top:29px; padding-bottom:25px; }
  .blog-post-title { font-size:30px; line-height:1.55; }
  .blog-post-description { font-size:17px; line-height:1.9; }
  .blog-post-content,.blog-post-content>p:first-of-type { font-size:18px; line-height:1.95; }
  .blog-post-content { margin-top:31px; }
  .blog-post-content h2 { font-size:25px; }
  .blog-post-content h3 { font-size:22px; }
  .blog-post-content pre { font-size:12px; padding:17px; }
  .blog-post-content blockquote { padding-left:18px; }
  .blog-post-pagination { grid-template-columns:1fr; gap:10px; }
  .blog-post-pagination-link-next { text-align:left; }
  .blog-archive-item { align-items:start; gap:15px; }
  .blog-archive-title { font-size:17px; }
  .blog-archive-item time { font-size:11px; white-space:nowrap; }
  .blog-reading-footer { display:block; margin-top:25px; font-size:11px; }
  .blog-reading-footer nav { margin-top:12px; gap:20px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto!important; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}