:root { --body-zh: "Hermes WenKai", "Kaiti SC", serif; --body-en: "Hermes Alegreya", Georgia, serif; }
html[lang="zh-CN"] [data-language="en"], html[lang="en"] [data-language="zh"], html[lang="zh-CN"] .ui-en, html[lang="en"] .ui-zh { display: none; }
.header-links { display: flex; align-items: center; gap: 2rem; font-size: .85rem; }
.header-links > a { color: var(--muted); }
#language { min-height: 44px; }
.article-heading, .article-toc, .article-body { max-width: var(--reading-width); margin-inline: auto; }
.article-heading { padding-bottom:1.5rem; padding-top: clamp(4rem, 8vw, 7rem); }
.article-heading h1 { margin: 1.5rem 0; font: 400 clamp(2.05rem,4.3vw,3.55rem)/1.3 var(--body-zh); letter-spacing: -.035em; text-wrap: balance; }
html[lang="en"] .article-heading h1 { font-family: var(--body-en); line-height: 1.12; }
.article-toc { border-block: 1px solid var(--rule); padding:1.5rem 0; }
.article-toc .kicker { margin-bottom:1rem; }
.article-toc > div { display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1.5rem; }
.article-toc a { font-size: .92rem; line-height: 1.5; }
.article-toc a span { display:inline-block; width:2rem; color:var(--muted); font-size:.7rem; }
a:hover { text-decoration: underline; text-underline-offset: .25em; }
.article-body { padding-block: 1.5rem 4rem; font-size:clamp(1.04rem,1.55vw,1.17rem); line-height:1.95; overflow-wrap:break-word; }
.article-body > h2 { font-size:clamp(1.6rem,2.65vw,2rem); font-weight:400; line-height:1.45; margin:4rem 0 1.7rem; }
.article-body > h3 { font-size:1.35rem; line-height:1.5; font-weight:400; margin:2.8rem 0 1.15rem; }
.article-body > h4 { font-size:1.1rem; line-height:1.65; margin:2.1rem 0 1rem; }
.article-body > p { margin:0 0 1.4rem; }
.article-body strong { font-weight:700; }
.article-body ul { padding-left:1.35rem; }
.article-body li { padding-left:.15rem; margin:.5rem 0; }
.article-body blockquote { border-left:2px solid var(--ink); margin:2rem 0; padding:.2rem 0 .2rem 1.5rem; }
.article-body blockquote p { margin:.4rem 0; }
.article-body hr { border:0; border-top:1px solid var(--rule); margin:3.5rem 0 0; }
.article-body code { font-family:ui-monospace, SFMono-Regular, Consolas, var(--body-zh); font-size:.82em; overflow-wrap:anywhere; }
.article-body table { border-collapse:collapse; width:100%; font-size:.92em; line-height:1.7; margin:2rem 0; }
.article-body td, .article-body th { border-bottom:1px solid var(--rule); padding:.8rem .9rem; vertical-align:top; text-align:left; }
.article-body th { border-top:1px solid var(--ink); }
.article-body td:first-child, .article-body th:first-child { width:5rem; padding-left:0; }
html[lang="en"] .article-body td:first-child, html[lang="en"] .article-body th:first-child { width:7rem; }
.article-body td p, .article-body th p { margin:0; }
[id] { scroll-margin-top:2rem; }
/* A typographic diagram: real text, responsive groups, explicit directional links. */
.mechanism { width:min(1080px,calc(100vw - 2 * var(--page-pad))); position:relative; left:50%; transform:translateX(-50%); margin:2rem 0 3rem; padding:clamp(1.1rem,3vw,2.5rem); border:1px solid var(--rule); font-size:.88rem; line-height:1.7; }
.mechanism h3, .mechanism h4, .mechanism p { margin:0; }
.mechanism h4 { font-size:1.12rem; font-weight:400; line-height:1.45; margin-bottom:.7rem; }
.mechanism p { overflow-wrap:anywhere; }
.diagram-heading { padding-bottom:1.75rem; border-bottom:1px solid var(--rule); margin-bottom:2rem; }
.diagram-heading h3 { font-weight:400; font-size:clamp(1.45rem,2.5vw,1.85rem); line-height:1.4; margin:.6rem 0; }
.diagram-heading > p:last-child { color:var(--muted); max-width:45rem; }
.mechanism .diagram-label { color:var(--muted); letter-spacing:.09em; font-size:.67rem; margin-bottom:.9rem; }
.task-node { padding:1.3rem; border:1px solid var(--ink); max-width:34rem; margin-inline:auto; text-align:center; }
.flow-arrow { height:2.5rem; display:grid; place-items:center; color:var(--muted); font-size:1.3rem; }
.path-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }
.path-node { position:relative; border:1px solid var(--rule); padding:1.15rem; }
.path-type { display:block; color:var(--muted); font-size:.7rem; margin-bottom:.7rem; }
.branch-join { height:1rem; margin-inline:12.5%; border:1px solid var(--rule); border-top:0; }
.write-stage, .library-stage { border:1px solid var(--rule); padding:1.4rem; }
.write-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; list-style:none; padding:1.5rem 0 0; margin:1.2rem 0 0; border-top:1px solid var(--rule); counter-reset:write; }
.mechanism .write-steps li { counter-increment:write; margin:0; padding:0; }
.write-steps li::before { content:counter(write,decimal-leading-zero); display:block; color:var(--muted); font-size:.67rem; margin-bottom:.4rem; }
.library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:1.5rem; border-top:1px solid var(--rule); padding-top:1.4rem; }
.library-layer { padding:0 1.2rem; border-left:1px solid var(--rule); }
.library-layer:first-child { padding-left:0; border:0; }
.library-layer:last-child { padding-right:0; }
.library-layer span { color:var(--muted); font-size:.75rem; display:block; margin-bottom:.8rem; }
.loop-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.reuse-stage, .govern-stage { border:1px dashed var(--rule); padding:1.4rem; display:flex; flex-direction:column; }
.mechanism .loop-steps, .mechanism .govern-stage ul { padding-left:1.2rem; margin:0 0 1.2rem; }
.mechanism .loop-steps li, .mechanism .govern-stage li { margin:.6rem 0; }
.loop-return { margin-top:auto; border-top:1px dashed var(--rule); padding-top:1rem; color:var(--muted); font-size:.8rem; }
@media (max-width:900px) {
 .path-grid, .write-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .branch-join { margin-inline:25%; }
}
@media (max-width:600px) {
 .header-links { gap:1rem; font-size:.75rem; }
 .site-name { font-size:1.6rem; }
 .article-toc > div { grid-template-columns:1fr; gap:.75rem; }
 .article-heading { padding-top:3.5rem; }
 .article-heading h1 { font-size:2rem; letter-spacing:-.02em; }
 .article-body > h2 { margin-top:3rem; }
 .path-grid, .write-steps, .library-grid, .loop-grid { grid-template-columns:1fr; }
 .path-node { padding:1rem; }
 .branch-join { margin-inline:50%; border-right:0; }
 .write-stage, .library-stage, .reuse-stage, .govern-stage { padding:1rem; }
 .write-steps { gap:.8rem; }
 .write-steps li { display:grid; grid-template-columns:1.5rem 1fr; gap:.5rem; }
 .write-steps li::before { margin-top:.25rem; }
 .library-layer { border:0; border-top:1px solid var(--rule); padding:1rem 0; }
 .library-layer:first-child { padding-top:0; }
 .library-layer:last-child { padding-bottom:0; }
 .article-body td, .article-body th { padding:.7rem .5rem; }
 html[lang="en"] .article-body td:first-child, html[lang="en"] .article-body th:first-child { width:5.2rem; }
}
@media print {
 .header-links, .article-toc, .site-footer, .skip-link { display:none; }
 .mechanism { width:100%; left:auto; transform:none; }
 .article-heading { padding-top:1rem; }
 .article-body { font-size:11pt; }
 .path-grid, .write-steps { grid-template-columns:1fr 1fr; }
 .task-node, .path-node, .library-layer { break-inside:avoid; }
}

@media (min-width:901px) { .path-node::after { content:""; position:absolute; top:100%; left:50%; height:1rem; border-left:1px solid var(--rule); } }

@media (min-width: 768px) { html[lang="zh-CN"] .article-heading h1 { font-size:clamp(2rem,3.3vw,2.75rem); white-space:nowrap; text-wrap:nowrap; } }