:root {
  --paper:#fff;
  --ink:#1f2928;
  --muted:#65716f;
  --line:#e2e8e5;
  --accent:#246d63;
  --link:#246d63;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; color:var(--ink); background:var(--paper); font:18px/1.8 var(--font); -webkit-font-smoothing:antialiased; }
::selection { background:#dceee8; }
a { color:var(--link); text-underline-offset:4px; text-decoration-thickness:1px; }
a:hover { color:#194c46; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.skip-link { position:fixed; z-index:100; top:12px; left:16px; transform:translateY(-160%); background:#fff; padding:10px 18px; border:1px solid var(--line); }
.skip-link:focus { transform:none; }
.site-header { border-bottom:1px solid #eef1ef; }
.header-inner { width:min(1120px,calc(100% - 48px)); min-height:72px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wordmark { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:18px; font-weight:600; text-decoration:none; }
.wordmark img { width:24px; height:24px; }
.header-nav { display:flex; gap:28px; font-size:16px; }
.header-nav a { color:var(--muted); text-decoration:none; }
.header-nav a[aria-current] { color:var(--ink); text-decoration:underline; text-underline-offset:7px; }
.article-wrap { width:min(964px,100%); margin:auto; padding:64px 32px 0; }
.article-hero { padding-bottom:32px; margin-bottom:34px; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:30px; line-height:1.4; letter-spacing:-.7px; font-weight:650; }
h1 .project-name { display:block; font-size:44px; letter-spacing:-1.5px; line-height:1.15; margin-bottom:18px; }
.hero-deck { margin:18px 0 24px; color:var(--muted); font-size:18px; }
.hero-meta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; font-size:15px; line-height:1.6; }
.byline { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); }
.byline a { color:var(--ink); text-decoration:none; }
.article-links { display:flex; flex-wrap:wrap; gap:18px; }
.article-grid { display:block; }
.article-body { overflow-wrap:anywhere; }
.article-body p { margin:0 0 22px; }
.article-body strong { font-weight:600; }
.article-body h2 { margin:48px 0 18px; font-size:24px; line-height:1.4; font-weight:650; letter-spacing:-.35px; scroll-margin-top:28px; }
.article-body ol { padding-left:1.4em; }
.article-body li { margin:10px 0; }
.article-body code { font:inherit; }
.article-figure { margin:28px 0 30px; }
.article-figure figcaption { margin:12px 0 0; color:var(--muted); font-size:15px; line-height:1.65; }
.site-footer { width:min(900px,calc(100% - 64px)); margin:48px auto 0; padding:24px 0 32px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; color:var(--muted); font-size:15px; }
.blog-index { width:min(900px,calc(100% - 64px)); margin:64px auto 0; min-height:65vh; }
.eyebrow { margin:0 0 14px; color:var(--muted); font-size:15px; letter-spacing:.06em; }
.index-description { color:var(--muted); margin:20px 0 32px; }
.post-row { display:grid; grid-template-columns:112px 1fr; gap:28px; border-block:1px solid var(--line); padding:28px 0; }
.post-row time { color:var(--muted); font-size:15px; }
.post-row h2 { margin:0; font-size:24px; line-height:1.5; font-weight:600; }
.post-row h2 a { color:var(--ink); text-decoration:none; }
.post-row p { color:var(--muted); margin:14px 0; }
.read-link { font-size:16px; }
@media(max-width:680px) {
  .header-inner { width:calc(100% - 40px); min-height:64px; }
  .header-nav { gap:20px; }
  .header-nav .repo-link { display:none; }
  .article-wrap { padding:34px 20px 0; }
  h1 { font-size:24px; letter-spacing:-.3px; }
  h1 .project-name { font-size:34px; letter-spacing:-1px; margin-bottom:14px; }
  .hero-deck { margin:16px 0 20px; }
  .hero-meta { justify-content:flex-start; gap:12px; }
  .article-hero { padding-bottom:26px; margin-bottom:28px; }
  .article-body h2 { margin-top:38px; font-size:22px; }
  .article-links { gap:16px; }
  .article-figure { margin:24px 0 28px; }
  .site-footer { width:calc(100% - 40px); margin-top:36px; }
  .blog-index { width:calc(100% - 40px); margin-top:36px; }
  .post-row { grid-template-columns:1fr; gap:12px; }
  .post-row h2 { font-size:22px; }
}

/* Native research diagrams */
/* Native diagram labels keep the article's font and a fixed 18px size.
   All selectors are scoped: no wildcard, global text, or SVG type overrides. */
.native-diagram { --ng-ink:#202b2a; --ng-muted:#626e6b; --ng-accent:#26786c; --ng-line:#d9e0dd; box-sizing:border-box; position:relative; padding:22px 24px; border:0; border-top:1px solid var(--ng-line); border-bottom:1px solid var(--ng-line); border-radius:0; background:#fff; color:var(--ng-ink); font:inherit; font-size:18px; line-height:1.5; overflow-wrap:normal; }
.native-diagram strong { color:inherit; font-size:18px; font-weight:600; }
.native-diagram .ng-label { color:var(--ng-muted); margin-bottom:20px; }
.native-diagram .ng-flow-arrow { display:block; position:relative; width:100%; height:1px; background:var(--ng-accent); align-self:center; }
.native-diagram .ng-flow-arrow::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid var(--ng-accent); border-right:1px solid var(--ng-accent); transform:rotate(45deg); }
.native-diagram .ng-coupling-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,.9fr) minmax(0,1fr); gap:24px; align-items:center; }
.native-diagram .ng-domain { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; padding:20px 10px; border-top:1px solid var(--ng-line); border-bottom:1px solid var(--ng-line); text-align:center; }
.native-diagram .ng-domain > span { color:var(--ng-muted); }
.native-diagram .ng-coupling-edges { display:flex; flex-direction:column; gap:22px; padding:0 4px; }
.native-diagram .ng-edge { display:flex; flex-direction:column; gap:8px; color:var(--ng-accent); text-align:center; }
.native-diagram .ng-edge > i { display:block; height:1px; width:100%; background:var(--ng-accent); position:relative; }
.native-diagram .ng-edge > i::after { content:""; position:absolute; top:-3px; width:6px; height:6px; border-top:1px solid var(--ng-accent); }
.native-diagram .ng-edge-left > i::after { left:0; border-left:1px solid var(--ng-accent); transform:rotate(-45deg); }
.native-diagram .ng-edge-right > i::after { right:0; border-right:1px solid var(--ng-accent); transform:rotate(45deg); }
.native-diagram .ng-constraint { margin-top:22px; color:var(--ng-muted); text-align:center; }
.native-diagram .ng-system-flow { display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr); column-gap:12px; align-items:stretch; position:relative; padding-bottom:68px; }
.native-diagram .ng-stage { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; padding:18px 2px; border-top:1px solid var(--ng-line); border-bottom:1px solid var(--ng-line); text-align:center; }
.native-diagram .ng-stage > span { color:var(--ng-muted); }
.native-diagram .ng-stage-plan { color:var(--ng-accent); border-color:var(--ng-accent); }
.native-diagram .ng-system-flow > .ng-flow-arrow { align-self:start; margin-top:32px; }
.native-diagram .ng-system-return { position:absolute; bottom:28px; left:9%; right:9%; height:40px; border:1px solid var(--ng-accent); border-top:0; }
.native-diagram .ng-system-return::before { content:""; position:absolute; left:-3px; top:0; width:6px; height:6px; border-top:1px solid var(--ng-accent); border-left:1px solid var(--ng-accent); transform:rotate(45deg); }
.native-diagram .ng-system-return-label { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); padding:0 12px; background:#fff; color:var(--ng-accent); white-space:nowrap; }
.native-diagram .ng-supports { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-top:20px; border-top:1px solid var(--ng-line); }
.native-diagram .ng-supports > div { display:flex; flex-direction:column; gap:6px; text-align:center; }
.native-diagram .ng-supports > div > span { color:var(--ng-muted); }
.native-diagram.ng-selection { padding-block:18px; }
.native-diagram.ng-selection .ng-label { margin-bottom:12px; }
.native-diagram .ng-selection-row { display:grid; grid-template-columns:minmax(0,1.7fr) 42px minmax(0,1fr); gap:28px; align-items:center; }
.native-diagram .ng-candidate-table { width:100%; border-collapse:collapse; font:inherit; color:var(--ng-ink); text-align:left; }
.native-diagram .ng-candidate-table th,.native-diagram .ng-candidate-table td { border:0; border-bottom:1px solid var(--ng-line); padding:2px 12px; font:inherit; text-align:left; vertical-align:middle; }
.native-diagram .ng-candidate-table th { font-weight:600; }
.native-diagram .ng-candidate-table th:first-child { padding-left:0; }
.native-diagram .ng-candidate-table td:last-child,.native-diagram .ng-candidate-table th:last-child { padding-right:0; }
.native-diagram .ng-candidate-table thead { color:var(--ng-muted); }
.native-diagram .ng-infeasible { color:var(--ng-muted); }
.native-diagram .ng-selected { display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center; }
.native-diagram .ng-selected > strong { color:var(--ng-accent); }
.native-diagram .ng-selected > span { color:var(--ng-muted); }
.native-diagram .ng-allocation { display:grid; grid-template-columns:1fr 1fr; gap:3px; width:140px; height:12px; margin:5px 0; }
.native-diagram .ng-allocation > i { border:1px solid var(--ng-accent); background:#fff; }
.native-diagram .ng-selection-note { margin-top:14px; color:var(--ng-muted); }
.native-diagram.ng-ai4ai { padding-block:18px; }
.native-diagram .ng-role-flow { display:grid; grid-template-columns:minmax(0,1fr) 42px minmax(0,1.2fr) 42px minmax(0,1fr); gap:22px; align-items:start; position:relative; padding-bottom:55px; }
.native-diagram .ng-role { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:12px 4px; border-top:1px solid var(--ng-line); text-align:center; }
.native-diagram .ng-role > span { color:var(--ng-muted); }
.native-diagram .ng-role-detail-compact { display:none; }
.native-diagram .ng-role-runtime { border-color:var(--ng-accent); color:var(--ng-accent); }
.native-diagram .ng-role-flow > .ng-flow-arrow { margin-top:26px; align-self:start; }
.native-diagram .ng-ai-return { position:absolute; left:9%; right:9%; bottom:17px; height:38px; border:1px solid var(--ng-accent); border-top:0; }
.native-diagram .ng-ai-return::before { content:""; position:absolute; left:-3px; top:0; width:6px; height:6px; border-top:1px solid var(--ng-accent); border-left:1px solid var(--ng-accent); transform:rotate(45deg); }
.native-diagram .ng-ai-return-label { position:absolute; bottom:4px; left:50%; transform:translateX(-50%); padding:0 12px; background:#fff; color:var(--ng-accent); white-space:nowrap; }
@media(max-width:700px) {
 .native-diagram { padding:20px 16px; }
 .native-diagram .ng-label { margin-bottom:18px; }
 .native-diagram .ng-coupling-row { grid-template-columns:1fr; gap:18px; }
 .native-diagram .ng-domain { padding:15px 8px; gap:6px; }
 .native-diagram .ng-coupling-edges { display:grid; grid-template-columns:1fr 1fr; gap:18px; min-height:76px; padding:0 4px; }
 .native-diagram .ng-edge { position:relative; justify-content:center; padding:0 12px; gap:0; }
 .native-diagram .ng-edge > i { width:1px; height:70px; position:absolute; top:3px; }
 .native-diagram .ng-edge-left > i { left:0; }
 .native-diagram .ng-edge-right > i { right:0; }
 .native-diagram .ng-edge-left > i::after { left:-3px; top:0; transform:rotate(45deg); }
 .native-diagram .ng-edge-right > i::after { right:-3px; top:auto; bottom:0; transform:rotate(135deg); }
 .native-diagram .ng-constraint { margin-top:18px; }
 .native-diagram .ng-system-flow { grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:18px 10px; padding:0 0 80px 12px; }
 .native-diagram .ng-stage { padding:15px 4px; gap:8px; }
 .native-diagram .ng-stage > span { white-space:nowrap; }
 .native-diagram .ng-system-flow > .ng-stage:nth-of-type(1) { grid-column:1; grid-row:1; }
 .native-diagram .ng-system-flow > .ng-stage:nth-of-type(2) { grid-column:3; grid-row:1; }
 .native-diagram .ng-system-flow > .ng-stage:nth-of-type(3) { grid-column:3; grid-row:3; }
 .native-diagram .ng-system-flow > .ng-stage:nth-of-type(4) { grid-column:1; grid-row:3; }
 .native-diagram .ng-system-flow > .ng-flow-arrow:nth-of-type(1) { grid-column:2; grid-row:1; }
 .native-diagram .ng-system-flow > .ng-flow-arrow:nth-of-type(2) { grid-column:3; grid-row:2; width:1px; height:24px; justify-self:center; margin:0; }
 .native-diagram .ng-system-flow > .ng-flow-arrow:nth-of-type(2)::after { top:auto; right:-3px; bottom:0; transform:rotate(135deg); }
 .native-diagram .ng-system-flow > .ng-flow-arrow:nth-of-type(3) { grid-column:2; grid-row:3; }
 .native-diagram .ng-system-flow > .ng-flow-arrow:nth-of-type(3)::after { right:auto; left:0; transform:rotate(225deg); }
 .native-diagram .ng-system-return { top:45px; bottom:124px; left:0; right:auto; width:12px; height:auto; border:1px solid var(--ng-accent); border-right:0; }
 .native-diagram .ng-system-return::before { left:auto; right:0; top:-3px; transform:rotate(135deg); }
 .native-diagram .ng-system-return-label { bottom:22px; }
 .native-diagram .ng-supports { grid-template-columns:1fr; gap:12px; padding-top:18px; }
 .native-diagram .ng-supports > div { flex-direction:row; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; text-align:left; }
 .native-diagram .ng-selection-row { grid-template-columns:1fr; gap:18px; }
 .native-diagram .ng-selection-row > .ng-flow-arrow { width:1px; height:22px; justify-self:center; }
 .native-diagram .ng-selection-row > .ng-flow-arrow::after { top:auto; right:-3px; bottom:0; transform:rotate(135deg); }
 .native-diagram .ng-selected { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 12px; }
 .native-diagram .ng-selected > span:first-child { grid-column:1/-1; }
 .native-diagram .ng-allocation { width:100%; margin:0; }
 .native-diagram .ng-selected > span:last-child { grid-column:1/-1; }
 .native-diagram .ng-selection-note { margin-top:18px; }
 .native-diagram .ng-candidate-table th,.native-diagram .ng-candidate-table td { padding:5px 7px; }
 .native-diagram .ng-role-flow { grid-template-columns:1fr; gap:14px; padding:0 20px 54px 0; }
 .native-diagram .ng-role { flex-direction:row; justify-content:space-between; padding:10px 4px; gap:8px; white-space:nowrap; }
 .native-diagram .ng-role-detail-wide { display:none; }
 .native-diagram .ng-role-detail-compact { display:inline; }
 .native-diagram .ng-role-flow > .ng-flow-arrow { width:1px; height:20px; margin:0; justify-self:center; }
 .native-diagram .ng-role-flow > .ng-flow-arrow::after { top:auto; right:-3px; bottom:0; transform:rotate(135deg); }
 .native-diagram .ng-ai-return { top:24px; bottom:78px; left:auto; right:0; width:14px; height:auto; border:1px solid var(--ng-accent); border-left:0; }
 .native-diagram .ng-ai-return::before { top:-3px; left:0; transform:rotate(-45deg); }
 .native-diagram .ng-ai-return-label { bottom:0; }
}