/* The definition is the product specimen: readable code beside its effect. */
.process-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:42px;align-items:center}
.declarative-page{--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
.declarative-page .declarative-hero{padding-top:56px;border-bottom:0}
.declarative-page h1{font-size:clamp(40px,5vw,60px);line-height:1.05;letter-spacing:-.045em;margin-bottom:24px}
.declarative-page h2{font-size:clamp(27px,3vw,35px);line-height:1.16;letter-spacing:-.035em;margin-top:0!important}
.declarative-page p{font-size:15px;line-height:1.75}
.declarative-page .process-lead{font-size:18px;color:var(--text);line-height:1.6}
.declarative-page .eyebrow{font-size:10px}
.declarative-page .actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:24px;font-size:13px}
.process-split>*,.process-file-heading>*,.definition-visual{min-width:0}
.definition-visual{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:8px;margin:0}
.definition-visual figcaption,.process-diff figcaption,.process-plugin figcaption{font:10px/1.7 var(--mono);letter-spacing:.05em;color:var(--muted);margin:0 0 22px}
.definition-file{padding:16px 12px;background:var(--bg);border:1px solid var(--line);border-radius:4px}
.file-label{display:block;font:10px/1.7 var(--mono);color:var(--muted);margin:0 0 12px}
.definition-file pre,.process-code-change pre,.process-source pre{font:11px/1.9 var(--mono);margin:0;overflow-x:auto;white-space:pre;max-width:100%;tab-size:2;color:var(--text)}
.definition-connector{margin:10px 0;text-align:center;color:var(--accent);font-size:23px}
.definition-flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:16px}
.definition-flow li{border:1px solid var(--line);padding:12px 14px;position:relative;background:var(--bg);display:flex;justify-content:space-between;gap:5px;align-items:center;flex-wrap:wrap}
.definition-flow li+li::before{content:'↓';position:absolute;top:-20px;left:20px;color:var(--muted)}
.definition-flow span{font:9px/1.5 var(--mono);color:var(--muted)}
.definition-flow strong{font-size:15px;font-weight:550}.definition-flow small{width:100%;text-align:right;font:10px/1.5 var(--mono);color:var(--muted)}
.definition-flow .definition-gate{border-left:3px solid var(--accent)}
.definition-visual .visual-note{font:11px/1.7 var(--mono);margin:18px 0 0;color:var(--muted)}
.definition-visual .illustration-controls>span{min-height:5em}
.process-route ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;gap:28px}
.process-route li{border-top:2px solid var(--line);padding-top:20px}
.process-route li>span{font:11px var(--mono);color:var(--accent)}
.declarative-page .process-route h2{font-size:18px;margin:16px 0 10px!important;line-height:1.3}
.declarative-page .process-route p{font-size:13px;margin:0}
.process-code-change{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:24px}
.process-addition{margin-top:16px;border-left:2px solid var(--accent);padding:14px 0 14px 14px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.process-addition pre{color:var(--accent)}
.declarative-page .code-note{font:11px/1.8 var(--mono);color:var(--muted);margin-top:22px}
.process-file-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.process-file-heading>a{font-size:13px;white-space:nowrap}
.process-source{margin:20px 0 0;border:1px solid var(--line);border-radius:8px;padding:18px 22px}
.process-source summary{font-size:14px}.process-source pre{margin-top:24px}
.process-aside{padding:18px 0;border-top:1px solid var(--line);margin-top:28px}
.process-aside summary{font-size:14px}.process-aside p{font-size:13px}
.process-diff,.process-plugin{margin:0;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.diff-row{display:flex;gap:14px;align-items:center;padding:16px 0;color:var(--muted);font:12px/1.8 var(--mono)}
.diff-row code{white-space:normal;overflow-wrap:anywhere}.diff-row>span{font-size:20px}
.diff-added{color:var(--accent);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.diff-record{margin-top:28px}.diff-record>*{display:block}.diff-record span{font:10px/1.7 var(--mono);color:var(--muted)}
.diff-record strong{font-size:20px;line-height:1.5;font-weight:500;margin:14px 0}.diff-record small{font-size:12px;color:var(--muted)}
.plugin-piece{padding:18px 14px;border:1px solid var(--line);background:var(--bg);margin-top:12px}
.plugin-piece>span{font:10px/1.7 var(--mono);color:var(--muted);display:block}.plugin-piece strong{font-size:16px;display:block;margin-top:8px;font-weight:550}
.declarative-page .plugin-piece p{font-size:12px;margin:4px 0 0}.plugin-owned{border-left:3px solid var(--accent)}
.process-next{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:44px}.process-next>div:last-child{display:grid;gap:20px;font-size:14px}
@media(max-width:900px){.process-split{grid-template-columns:1fr;gap:28px}.definition-visual{max-width:600px}.process-route ol{gap:18px}.process-file-heading{grid-template-columns:1fr;gap:6px}.process-next{grid-template-columns:1fr;gap:12px}}
@media(max-width:540px){.process-route ol{grid-template-columns:1fr;gap:24px}.definition-visual,.process-code-change,.process-diff,.process-plugin{padding:18px}.definition-file{padding:14px 8px}.definition-file pre,.process-code-change pre{font-size:10px}.definition-flow li{padding:12px}.definition-visual .illustration-controls>span{min-height:6.5em}.process-source{padding:16px}}

.definition-file pre,.process-code-change pre,.process-source pre{padding:0;border:0;background:none;border-radius:0}

:is(.process-diff,.process-plugin) .illustration-controls>span{min-height:5em}
@media(max-width:540px){:is(.process-diff,.process-plugin) .illustration-controls>span{min-height:6.5em}}