/* Shared visual language with steven-kid.github.io. */
:root { --paper:#f5f2eb; --ink:#262e28; --muted:#676e64; --accent:#536b39; --rule:#d9dcd0; }
* { box-sizing:border-box; }
html,body { height:auto; min-height:100%; }
body { background:var(--paper); color:var(--ink); font:16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
::selection { color:var(--ink); background:#dce4ca; }
.wrap { width:auto; max-width:1120px; margin:auto; padding:0 48px; }
a,a:active { color:inherit; }
a:hover { color:var(--accent); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px 0; border-bottom:1px solid var(--rule); text-align:left; }
.wordmark { font:normal 26px Georgia,serif; letter-spacing:-.7px; white-space:nowrap; }
.wordmark span { font-size:24px; color:var(--accent); margin-left:8px; }
.site-nav { display:flex; gap:28px; font-size:13px; }
.site-nav a[aria-current="page"] { color:var(--accent); text-decoration:underline; text-underline-offset:6px; }
main.container { margin:0; }
.blog-intro { padding:72px 0 54px; }
.eyebrow { font-size:10px; color:var(--muted); letter-spacing:.14em; margin:0 0 18px; }
.blog-intro h1 { font:normal clamp(46px,6vw,72px)/1.15 Georgia,serif; letter-spacing:-2px; margin:0 0 20px; }
.blog-intro h1 em { color:var(--accent); font-weight:normal; }
.blog-intro>p:last-child { font-size:15px; color:var(--muted); margin:0; }
.list-label { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:.12em; margin:0 0 18px; }
.home.post-list .post-list-item { border-top:1px solid var(--rule); border-bottom:0; padding:24px 0; }
.home.post-list .post-list-item:last-child { border-bottom:1px solid var(--rule); }
.home .post-block { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.home .post-title { font-size:19px; font-weight:500; margin:0; line-height:1.6; }
a.post-title-link:hover { border:0; color:var(--accent); }
.home .post-info { flex-shrink:0; align-items:center; gap:18px; }
.post-list-date { font:12px/1.6 monospace; color:var(--muted); }
.post-info .post-info-home .post-categories span,.post-info .post-info-details .post-categories span { font-size:10px; background:transparent; color:var(--muted); border:1px solid var(--rule); border-radius:20px; padding:4px 10px; margin:0; }
.archive { max-width:none; margin:0 0 50px; }
.archive-year { font:normal 32px Georgia,serif; color:var(--accent); margin:40px 0 20px; }
.archive .post-item { display:flex; align-items:baseline; gap:28px; padding:18px 0; border-top:1px solid var(--rule); }
.archive .post-info { width:120px; flex-shrink:0; float:none; color:var(--muted); font-size:12px; }
.archive .post-title-link { display:block; margin:0; font-size:16px; color:var(--ink); word-break:normal; overflow-wrap:anywhere; }
main.post { max-width:780px; margin:58px auto 64px; }
.back-link { display:inline-block; color:var(--muted); font-size:12px; margin-bottom:24px; }
main.post .post-title { font:500 clamp(28px,4vw,42px)/1.45 Georgia,"Songti SC","Noto Serif CJK SC",serif; letter-spacing:-.6px; margin:0 0 24px; overflow-wrap:anywhere; }
.post-info { gap:14px; align-items:center; }
.post-info .post-info-details { position:static; padding:0; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.post-info .post-info-details .post-categories,.post-info .post-info-details .post-date { position:static; color:var(--muted); font-size:12px; }
.post-share { margin-bottom:22px; }
.post-content { border-top:1px solid var(--rule); padding-top:20px; overflow-wrap:anywhere; }
.post-content h2,.post-content h3 { margin:42px 0 18px; line-height:1.5; color:var(--ink); font-weight:600; }
.post-content h2 { font-size:25px; }.post-content h3 { font-size:21px; }
.post-content h4,.post-content h5,.post-content h6 { margin:26px 0 12px; line-height:1.6; }
.post-content h2 a:before,.post-content h3 a:before { content:none; }
.post-content a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; word-break:normal; overflow-wrap:anywhere; }
.post-content p { margin:18px 0; }
.post-content blockquote { border-left:3px solid #9ba982; background:#eaeedf; padding:8px 22px; margin:24px 0; color:#525f49; }
.post-content figure { margin:24px 0; max-width:100%; }
.post-content img { height:auto; max-width:100%; border-radius:3px; }
.post-content figcaption { text-align:center; font-size:12px; color:var(--muted); }
.post-content>table { display:table; width:100%; table-layout:fixed; border-collapse:collapse; box-shadow:none; border:1px solid var(--rule); }
.post-content>table th,.post-content>table td { text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.post-content>table th:first-child,.post-content>table td:first-child { width:25%; }
table thead,table tbody tr:nth-child(2n) { background:#eaeedf; }table th,table td { padding:10px 14px!important; }
code,pre { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em; background:#eaeedf; color:#34402f; }
.post-content>figure.highlight { border:1px solid var(--rule); box-shadow:none; border-radius:5px; background:#eeeee5; }
.highlight table,.highlight tbody,.highlight tr,.highlight td { background:transparent!important; }
.highlight td { padding:0!important; }.highlight pre { background:transparent; font-size:13px; line-height:1.75!important; }
pre .keyword,pre .attribute { color:#825125; }pre .string,pre .built_in { color:#4a6634; }pre .comment { color:#787f72; }
pre .number,pre .literal { color:#796281; }
mjx-container[display="true"] { max-width:100%; overflow-x:auto; }
footer { margin-top:54px; padding:0 0 30px; }
footer .copyright { margin:0; padding:24px 0 0; border-color:var(--rule); text-align:left; }
footer .copyright p,footer .copyright a { color:var(--muted); font-size:11px; font-weight:400; }
.footer-line { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
footer .paginator { display:flex; justify-content:space-between; gap:20px; margin-bottom:25px; font-size:12px; }
footer .paginator:empty { display:none; }
@media(max-width:760px) { .wrap { width:auto; padding:0 26px; }.site-header { padding:22px 0; }.site-nav { gap:18px; font-size:12px; }.blog-intro { padding:48px 0 38px; }.home .post-block { display:block; }.home .post-info { margin-top:10px; }.home .post-title { font-size:18px; }main.post { margin:36px auto; }.archive .post-item { gap:14px; }.archive .post-item .post-info { display:block; width:100px; }.archive .post-item .post-title-link { margin:0; font-size:14px; }.post-content { font-size:15px; }.post-content ul,.post-content ol { padding-left:24px; } }
@media(max-width:420px) { .site-nav { gap:14px; }.site-nav .github-link { display:none; }.blog-intro h1 { font-size:46px; }.list-label { font-size:9px; }.archive .post-item { display:block; }.archive .post-item .post-info { margin-bottom:4px; } }

@media(max-width:520px){.site-header{flex-wrap:wrap;gap:16px}.site-nav{gap:18px}.wordmark{font-size:24px}}

.wordmark{font:600 21px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.7px}

.wordmark{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:600 22px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.8px}
.wordmark .brand-mark{display:grid;grid-template-columns:7px 7px;grid-template-rows:7px 7px;gap:3px;margin:0;transform:rotate(-7deg);font:inherit;color:inherit}
.brand-mark i{display:block;background:var(--accent);border-radius:1px}.brand-mark i:nth-child(2){opacity:.38}.brand-mark i:nth-child(3){opacity:.65}
.wordmark .brand-name{font:inherit;letter-spacing:inherit;margin:0;color:inherit}.wordmark .brand-period{font:inherit;margin:0;color:var(--accent)}
.company-link{text-decoration:underline;text-decoration-color:#8b9a77;text-decoration-thickness:1px;text-underline-offset:4px;color:var(--ink)}

.blog-intro{padding:64px 0 42px}.blog-intro h1{margin-bottom:22px}.blog-intro .author-line{font-size:12px;color:var(--muted);margin-top:22px}.author-line .sep{margin:0 10px;color:#a9b19b}
.home.post-list .post-list-item{transition:background .18s}.home.post-list .post-list-item:hover{background:#ecefe3}.home .post-title{font-size:18px}.post-list-date{font-size:11px}.list-label{padding-bottom:4px}.site-header{padding:32px 0}.site-nav{font-size:12px}.archive .post-item:hover{background:#ecefe3}
@media(max-width:520px){.blog-intro{padding:44px 0 34px}.wordmark{font-size:21px}.site-header{gap:18px}.author-line{max-width:290px;line-height:2}}
@media(prefers-reduced-motion:reduce){.home.post-list .post-list-item{transition:none}}

/* Accessible bilingual navigation. */
.language-switch{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--rule);border-radius:7px;flex-shrink:0}.language-switch button{border:0;background:transparent;color:var(--muted);font:500 11px/1.6 var(--sans);padding:4px 8px;border-radius:4px;cursor:pointer}.language-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}.language-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.language-switch button:disabled{cursor:wait}.site-header{gap:20px}.site-nav{margin-left:auto}.language-status{font-size:12px;color:var(--muted);margin:12px 0}.language-status:empty{display:none}html[lang="zh-CN"] .blog-intro h1{letter-spacing:-1px;font-weight:500;font-size:clamp(38px,5vw,56px)}.home .post-block{min-width:0}.home .post-title{overflow-wrap:anywhere}.post-content[lang="en"]{line-height:1.85}.post-content[lang="en"] p{max-width:100%}@media(max-width:760px){.site-header{flex-wrap:wrap}.site-header .wordmark{margin-right:auto}.site-nav{order:3;width:100%;margin-left:0}.language-switch{margin-left:0}.site-nav .github-link{display:inline}.home .post-title{font-size:17px}.site-nav{gap:22px}}

.post-content figure.highlight{max-width:100%;overflow-x:auto}.post-content mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden}.post-content mjx-container:not([display="true"]){display:inline-block;vertical-align:middle}

/* Bookish typography, with a small botanical signature. */
:root {
  --paper:#f8f6f1; --ink:#302d2b; --muted:#746e68; --accent:#7b405f; --rule:#e0dbd2;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Songti SC","STSong",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
body { font-family:var(--serif); font-size:18px; line-height:1.7; -webkit-font-smoothing:auto; }
::selection { background:#e8dce3; color:var(--ink); }
.wordmark { font:600 26px/1.2 var(--serif); letter-spacing:-.6px; gap:12px; }
.wordmark .brand-mark { grid-template-columns:8px 8px; grid-template-rows:8px 8px; gap:2px; transform:rotate(-12deg); }
.brand-mark i { background:#658986; border-radius:0 85% 0 85%; }
.brand-mark i:nth-child(2) { transform:rotate(90deg); opacity:.65; }
.brand-mark i:nth-child(3) { transform:rotate(90deg); opacity:.65; }
.brand-mark i:nth-child(4) { opacity:1; }
.company-link { text-decoration-color:#b399a5; text-underline-offset:4px; }
.company-link:hover { color:var(--accent); }
.eyebrow { font:500 10px/1.6 var(--sans); letter-spacing:.14em; }

.wrap { max-width:1040px; }
.site-nav,.language-switch,.author-line,.list-label,.post-info,.post-list-date,.back-link,footer,.post-content figcaption { font-family:var(--sans); }
.site-header { padding:30px 0; }
.blog-intro { position:relative; padding:64px 0 48px; }
.blog-intro h1 { font:500 clamp(42px,5.5vw,60px)/1.16 var(--serif); letter-spacing:-1.7px; margin:0 0 22px; }
.blog-intro h1 em { font-weight:500; font-style:italic; color:var(--accent); }
.blog-intro>p:not(.eyebrow):not(.author-line) { font-size:19px; color:#605953; max-width:580px; }
.blog-intro .author-line { font-size:12px; margin-top:23px; }
.blog-intro::after { content:"✳"; position:absolute; right:16px; top:83px; font:70px/1 var(--serif); color:#658986; transform:rotate(12deg); }
.home .post-title { font:500 23px/1.4 var(--serif); letter-spacing:-.25px; }
.home.post-list .post-list-item { padding:24px 0; }
.home.post-list .post-list-item:hover,.archive .post-item:hover { background:transparent; }
.home .post-title a:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.post-list-date { font-size:11px; font-variant-numeric:tabular-nums; }
.post-info .post-info-home .post-categories span { border:0; padding:0; color:#867d74; }
.archive-year { font:400 34px/1.3 var(--serif); }
.archive .post-title-link { font:400 20px/1.5 var(--serif); }
main.post { max-width:720px; }
main.post .post-title { font:500 clamp(30px,4vw,44px)/1.2 var(--serif); letter-spacing:-.8px; }
.post-content,.post-content[lang="en"] { font:400 19px/1.75 var(--serif); }
.post-content h2 { font:600 29px/1.35 var(--serif); letter-spacing:-.3px; }
.post-content h3 { font:600 24px/1.4 var(--serif); }
.post-content blockquote { background:#efebe8; border-left:2px solid #9c7088; color:#65545e; }
code,pre { background:#eeece6; color:#3f4542; }
.post-content>figure.highlight { background:#eeece6; border-radius:3px; }
table thead,table tbody tr:nth-child(2n) { background:#eeece6; }
html[lang="zh-CN"] .blog-intro h1 { font-family:var(--serif); font-weight:500; letter-spacing:0; }
html[lang="zh-CN"] .post-content { line-height:1.95; }
@media(max-width:760px) { .wrap { padding:0 24px; }.blog-intro { padding:48px 0 38px; }.blog-intro::after { top:52px; right:0; font-size:42px; }.blog-intro>p:not(.eyebrow):not(.author-line) { max-width:85%; }.blog-intro h1 { font-size:46px; max-width:85%; }.home .post-title { font-size:21px; }.home.post-list .post-list-item { padding:22px 0; }.archive .post-item .post-title-link { font-size:19px; }.post-content,.post-content[lang="en"] { font-size:18px; }.post-content h2 { font-size:26px; }.post-content h3 { font-size:23px; } }
@media(max-width:420px) { .wordmark { font-size:23px; gap:9px; }.site-header { column-gap:12px; }.language-switch button { padding:3px 6px; }.blog-intro h1 { font-size:42px; letter-spacing:-1px; }.blog-intro::after { font-size:32px; top:54px; }.blog-intro>p:not(.eyebrow):not(.author-line) { max-width:100%; font-size:18px; }.list-label { letter-spacing:.08em; } }

.post-content>pre { max-width:100%; overflow-x:auto; padding:18px 20px; border:1px solid var(--rule); border-radius:3px; line-height:1.7; }

/* Shared syntax palette for fenced code and legacy Hexo blocks. */
.post-content .syntax-highlighted { color:#343a40; background:transparent; }
.post-content .hljs-keyword,.post-content .hljs-selector-tag,.post-content .hljs-literal { color:#85445f; }
.post-content .hljs-string,.post-content .hljs-regexp,.post-content .hljs-addition { color:#32675b; }
.post-content .hljs-number,.post-content .hljs-symbol,.post-content .hljs-bullet { color:#925c26; }
.post-content .hljs-title,.post-content .hljs-built_in,.post-content .hljs-type { color:#355f83; }
.post-content .hljs-comment,.post-content .hljs-quote { color:#76766d; font-style:italic; }
.post-content .hljs-meta,.post-content .hljs-attr,.post-content .hljs-attribute { color:#735594; }
.post-content .hljs-deletion { color:#a13e44; }
.post-content .hljs-emphasis { font-style:italic; }
.post-content .hljs-strong { font-weight:600; }
.post-content pre>code { font-size:inherit; background:transparent; padding:0; }
.workflow-diagram { margin:2rem 0; }
.workflow-diagram .diagram-scroll { overflow-x:auto; border:1px solid var(--rule); border-radius:6px; background:#f5f3ee; }
.workflow-diagram svg { display:block; width:100%; min-width:560px; height:auto; font-family:system-ui,-apple-system,sans-serif; }
.workflow-diagram figcaption { margin-top:10px; font-size:14px; line-height:1.7; color:var(--muted); text-align:left; }