.blog-page{min-height:100svh;display:flex;flex-direction:column;--wrap:1120px;--serif:"Paper Serif","TeX Gyre Pagella",Palatino,"Palatino Linotype","Songti SC","Noto Serif CJK SC","Noto Serif SC","STSong","SimSun",serif;--reading-width:720px}

:lang(zh-Hant) .blog-page{--serif:"Paper Serif","TeX Gyre Pagella",Palatino,"Songti TC","Noto Serif CJK TC","Noto Serif TC","PMingLiU",serif}
:lang(ja) .blog-page{--serif:"Paper Serif","TeX Gyre Pagella",Palatino,"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif JP",serif}
:lang(ko) .blog-page{--serif:"Paper Serif","TeX Gyre Pagella",Palatino,"AppleMyungjo","Nanum Myeongjo","Noto Serif CJK KR","Noto Serif KR",serif}
.blog-page>main{flex:1}
.blog-page .topbar{border-bottom-color:var(--line)}
.blog-page .brand{flex-shrink:0}
.blog-nav{display:flex;gap:22px;align-items:center;margin-left:24px;font-size:14px}
.blog-nav a{color:var(--text-2)}
.blog-nav a[aria-current]{color:var(--text)}
.blog-languages{position:relative;font:13px/1.5 var(--sans);color:var(--text-2)}
.blog-languages summary{display:flex;align-items:center;gap:7px;min-height:36px;padding:6px 8px;cursor:pointer;list-style:none;border-radius:6px}
.blog-languages summary::-webkit-details-marker{display:none}
.blog-languages summary:hover{background:var(--bg-hover)}
.blog-languages[open] .blog-language-chevron{transform:rotate(180deg)}
.blog-languages>nav{position:absolute;right:0;top:calc(100% + 8px);width:190px;max-width:calc(100vw - 32px);max-height:70vh;overflow-y:auto;z-index:20;padding:6px;background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 8px 24px rgb(0 0 0/.08)}
.blog-language{display:block;padding:8px 12px;color:var(--text-2);border-radius:4px;white-space:nowrap}
.blog-language:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
.blog-language[aria-current]{color:var(--accent);background:var(--accent-soft)}
.blog-demo{font-size:13px;margin-left:8px}
.blog-theme[hidden]{display:none}
.blog-skip{position:fixed;top:8px;left:16px;z-index:20;padding:8px 16px;background:var(--bg);transform:translateY(-160%)}
.blog-skip:focus{transform:none}

/* A compact archive with a manuscript preview beside each article. */
.blog-index{--wrap:920px;padding:64px 0 96px}
.blog-index-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:32px}
.blog-index-head h1{font-size:38px;line-height:1.25;letter-spacing:0}
.blog-index-head p{font:18px/1.6 var(--serif);color:var(--text-2);margin-top:14px;text-wrap:pretty}
.blog-rss{font-size:12px;color:var(--text-2);white-space:nowrap}
.blog-list{border-top:1px solid var(--line-strong)}
.blog-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center;padding:30px 0 34px;border-bottom:1px solid var(--line)}
.blog-card-image{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;padding:20px 12px;background:var(--bg-subtle);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.blog-card-image:hover{border-color:var(--line-hover)}
.blog-card-image picture,.blog-card-image .blog-illustration{display:block;width:100%}
.blog-card-image img{width:100%;height:auto}
.blog-card-copy{min-width:0}
.blog-card time{font:12px/1.5 var(--sans);color:var(--text-2)}
.blog-card h2{font-size:28px;line-height:1.35;letter-spacing:0;margin:12px 0}
.blog-card h2 a{color:var(--text)}
.blog-card-copy>p{font:17px/1.65 var(--serif);color:var(--text-2);max-width:42em;text-wrap:pretty}
.blog-deck{font:20px/1.6 var(--serif);color:var(--text-2);max-width:680px;margin:20px auto 0;text-wrap:pretty}

/* A centered title block and text column; the contents sit in the outer margin. */
.blog-article{counter-reset:section figure;padding-bottom:72px}
.blog-article-head{max-width:820px;margin:0 auto;padding:60px 0 38px;text-align:center}
.blog-breadcrumb{display:flex;justify-content:center;align-items:center;gap:12px;font-size:12px;color:var(--text-2);margin-bottom:32px}
.blog-breadcrumb a{color:inherit}
.blog-article h1{font-size:clamp(30px,3.2vw,42px);line-height:1.3;letter-spacing:0;text-wrap:balance}
.blog-article-head .blog-deck{max-width:740px}
.blog-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 13px;align-items:center;margin-top:24px;color:var(--text-2);font:15px/1.6 var(--serif)}
.blog-meta>span:first-child{color:var(--text)}
.blog-hero{max-width:820px;margin:0 auto 48px}
.blog-figure{margin:32px 0}
.blog-figure picture{display:block}
.blog-figure img{width:100%;height:auto}
.blog-figure figcaption{font:15px/1.6 var(--serif);color:var(--text-2);margin:16px auto 0;max-width:var(--reading-width);text-align:center;text-wrap:pretty}
.blog-article .blog-figure figcaption{counter-increment:figure}
.blog-article .blog-figure figcaption::before{content:attr(data-label) " " counter(figure) ". ";font-weight:700;color:var(--text)}
:is(:lang(zh),:lang(ja),:lang(ko)) .blog-article .blog-figure figcaption::before{content:attr(data-label) " " counter(figure) "　"}
.blog-hero .blog-figure{margin:0}
.blog-reading-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--reading-width)) minmax(0,1fr);column-gap:32px;align-items:start}
.blog-prose{grid-column:2;font:20px/1.65 var(--serif);color:var(--text);min-width:0;overflow-wrap:break-word;text-align:justify;hyphens:auto;hyphenate-limit-chars:6 3 3}
.blog-prose>p{margin:0 0 .45em;text-indent:1.5em}
.blog-prose>p:first-child,.blog-prose :is(h2,h3)+p{text-indent:0}
.blog-prose>ul,.blog-prose>ol{margin:1em 0;padding-left:1.7em}
.blog-prose h2{counter-increment:section;position:relative;padding-inline-start:1.5em;font:700 25px/1.4 var(--serif);letter-spacing:0;color:var(--text);margin:38px 0 16px;scroll-margin-top:88px;text-align:left;text-wrap:pretty;hyphens:none}
.blog-prose h2::before{content:counter(section);position:absolute;inset-inline-start:0;top:0;font-variant-numeric:lining-nums}
.blog-prose h2:first-child{margin-top:0}
.blog-prose h3{font:700 21px/1.45 var(--serif);color:var(--text);margin:28px 0 12px;scroll-margin-top:88px;text-align:left}
.blog-prose strong{color:var(--text);font-weight:700}
.blog-prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-line)}
.blog-prose li{padding-left:4px;margin-bottom:8px}
.blog-prose blockquote{margin:28px 2em;font:italic 20px/1.65 var(--serif);color:var(--text-2);text-align:left}
.blog-prose pre{overflow:auto;background:var(--bg-subtle);padding:18px;border:1px solid var(--line);font:15px/1.6 var(--mono);text-align:left;hyphens:none}
.blog-prose code{white-space:normal;overflow-wrap:anywhere;hyphens:none;padding:0 .15em;border-radius:0;background:none;font-size:.88em}
.blog-prose pre code{white-space:pre;overflow-wrap:normal;padding:0;font-size:inherit}
.blog-prose .blog-figure{margin:30px 0;text-indent:0}
.blog-illustration,.blog-art-wide{display:block}
.blog-art-compact{display:none}
.blog-illustration svg{display:block;width:100%;height:auto;font-family:var(--serif);font-synthesis:none}
.blog-illustration text{font-family:var(--serif)}
.blog-illustration .art-mono{font-family:var(--mono)}
.blog-illustration{--art-paper:var(--bg);--art-ink:var(--text);--art-muted:var(--text-2);--art-line:var(--line-strong);--art-tint:var(--bg-subtle);--art-accent:var(--accent);--art-note:var(--accent-soft)}
@media(max-width:600px){.blog-illustration-responsive .blog-art-wide{display:none}.blog-illustration-responsive .blog-art-compact{display:block}}
.blog-toc{grid-column:3;align-self:stretch;font-size:12px;color:var(--text-2);min-width:0;text-wrap:pretty}
.blog-toc nav{position:sticky;top:96px;padding-left:16px;border-left:1px solid var(--line)}
.blog-toc p{color:var(--text);margin-bottom:14px;font-weight:500}
.blog-toc ol{padding-left:1.2em;list-style:decimal}
.blog-toc li{padding-left:3px;margin:0 0 11px;line-height:1.6}
.blog-toc a{color:var(--text-2)}
.blog-toc a:hover{color:var(--accent)}
.blog-toc-back{display:inline-block;margin-top:18px}
:is(:lang(zh),:lang(ja),:lang(ko)) .blog-prose{font-size:19px;line-height:1.9;line-break:strict;hyphens:manual}
:is(:lang(zh),:lang(ja),:lang(ko)) .blog-prose>p{text-indent:2em}
:is(:lang(zh),:lang(ja),:lang(ko)) .blog-prose h2{font-size:24px}
:is(:lang(zh),:lang(ja),:lang(ko)) .blog-figure figcaption{font-size:14px;line-height:1.8}

.blog-footer{border-top:1px solid var(--line)}
.blog-image-dark{display:none!important}
html[data-theme=dark] .blog-image-light{display:none!important}
html[data-theme=dark] .blog-image-dark{display:block!important}
@media(prefers-color-scheme:dark){html:not([data-theme=light]) .blog-image-light{display:none!important}html:not([data-theme=light]) .blog-image-dark{display:block!important}}
@media(max-width:1100px){.blog-reading-layout{display:block;max-width:var(--reading-width);margin-inline:auto}.blog-toc{display:none}}
@media(max-width:720px){
  .blog-nav{margin-left:4px;gap:12px;font-size:13px}.blog-product-link,.blog-demo{display:none}.blog-page .topbar-actions{gap:0}.blog-languages summary{min-height:40px}.blog-language{min-height:40px}
  .blog-index{padding:40px 0 64px}.blog-index-head{padding-bottom:28px;gap:16px}.blog-index-head h1{font-size:32px}.blog-index-head p{font-size:17px}.blog-card{grid-template-columns:minmax(0,1fr);gap:22px;padding:26px 0 28px}.blog-card-image{aspect-ratio:16/9;padding:14px 10px}.blog-card h2{font-size:25px}.blog-card-copy>p{font-size:16px}.blog-deck{font-size:18px;margin-top:18px}
  .blog-article-head{padding:36px 0 28px}.blog-article h1{font-size:30px;line-height:1.35}.blog-breadcrumb{margin-bottom:24px}.blog-meta{font-size:13px;gap:6px 9px;margin-top:20px}
  .blog-hero{margin-bottom:36px}.blog-figure figcaption{font-size:13px;padding-inline:4px}.blog-prose{font-size:18px;line-height:1.65;text-align:left}.blog-prose h2{font-size:23px;margin-top:32px}.blog-prose h3{font-size:20px}.blog-prose blockquote{font-size:18px;margin-inline:1em}
  :is(:lang(zh),:lang(ja),:lang(ko)) .blog-prose{font-size:17px;line-height:1.85;text-align:justify}:is(:lang(zh),:lang(ja),:lang(ko)) .blog-prose h2{font-size:22px}:is(:lang(zh),:lang(ja),:lang(ko)) .blog-figure figcaption{font-size:13px}
  .blog-article{padding-bottom:48px}.blog-footer .footer-inner{gap:20px}
}
@media(max-width:360px){.blog-page .brand{font-size:18px;gap:6px}.blog-languages summary>span{display:none}.blog-page .topbar-inner{gap:8px}.blog-article h1{font-size:27px}}
@media print{
  .blog-illustration{--art-paper:#fff;--art-ink:#000;--art-muted:#333;--art-line:#aaa;--art-tint:#fafafa;--art-accent:#333;--art-note:#f4f4f4}
  .blog-page .topbar,.blog-footer,.blog-toc,.blog-breadcrumb,.blog-skip{display:none}
  .blog-page{color:#000;background:#fff}.blog-article{width:100%;--text:#000;--text-2:#333;--reading-width:100%}.blog-article-head{padding-top:0}.blog-article h1{font-size:24pt}.blog-reading-layout{display:block}.blog-prose{font-size:11pt;line-height:1.5}.blog-prose h2{font-size:14pt;break-after:avoid}.blog-prose h3{break-after:avoid}.blog-prose p{orphans:3;widows:3}.blog-figure{break-inside:avoid}.blog-prose a{color:inherit;text-decoration:none}
  :is(:lang(zh),:lang(ja),:lang(ko)) .blog-prose{font-size:11pt;line-height:1.7}:is(:lang(zh),:lang(ja),:lang(ko)) .blog-prose h2{font-size:14pt}
  .blog-page .blog-article .blog-image-dark{display:none!important}.blog-page .blog-article .blog-image-light{display:block!important}
}

:lang(ko) .blog-prose{text-align:left;word-break:keep-all;overflow-wrap:break-word}