.architecture-model{--architecture-page:#f7f5ee;--architecture-surface:#fffdf6;--architecture-alt:#e7f0e8;--architecture-ink:#17231b;--architecture-muted:#536158;--architecture-line:#93a79e;display:grid;width:100%;gap:18px;margin:0;padding:20px;border:1px solid var(--architecture-line);border-radius:10px;background:var(--architecture-page);color:var(--architecture-ink)}
.architecture-model-head h2{margin:0;font-size:20px}.architecture-model-head p{max-width:760px;margin:3px 0 0;color:var(--architecture-muted)}
.architecture-model-pipeline{display:grid;grid-template-columns:minmax(130px,.55fr) minmax(64px,.28fr) minmax(420px,2fr) minmax(76px,.34fr) minmax(260px,1.1fr);align-items:center;gap:8px;overflow-x:auto;padding:2px}
.architecture-model-boundary{min-width:0;padding:10px;border:1px solid var(--architecture-line);border-radius:9px;background:var(--architecture-alt)}.architecture-model-boundary>h3{margin:0 0 8px;color:var(--architecture-muted);font:800 11px/1.2 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em}
.architecture-model-components{display:grid;min-width:0;align-items:stretch;gap:6px}.architecture-model-node{display:grid;min-width:0;align-content:start;gap:5px;padding:10px;border:1px solid var(--architecture-line);border-radius:7px;background:var(--architecture-surface);overflow-wrap:anywhere}.architecture-model-node strong{font:800 13px/1.25 ui-monospace,monospace}.architecture-model-node p{margin:0;color:var(--architecture-muted);font-size:11px;line-height:1.35}
.architecture-model-edge{display:grid;min-width:58px;place-content:center;gap:5px;color:var(--architecture-muted);text-align:center;font:700 9px/1.2 ui-monospace,monospace}.architecture-model-edge i{display:block;width:100%;height:10px;background:var(--architecture-muted);clip-path:polygon(0 38%,calc(100% - 9px) 38%,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,calc(100% - 9px) 62%,0 62%)}
.architecture-model-components>.architecture-model-edge{min-width:0;padding:2px}.architecture-model-components>.architecture-model-edge i{width:10px;height:22px;margin:auto;clip-path:polygon(38% 0,62% 0,62% calc(100% - 9px),100% calc(100% - 9px),50% 100%,0 calc(100% - 9px),38% calc(100% - 9px))}
.architecture-model-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none}.architecture-model-notes li{padding:9px 11px;border:1px solid var(--architecture-line);background:var(--architecture-surface);font-size:12px}
.architecture-model-compact{width:min(1240px,calc(100vw - 32px));max-height:86vh;overflow:auto;box-shadow:0 18px 54px rgba(16,47,59,.28)}.architecture-model-compact .architecture-model-head p{font-size:12px}
@media(max-width:780px){.architecture-model{padding:14px}.architecture-model-pipeline{grid-template-columns:1fr;overflow:visible}.architecture-model-components{display:grid}.architecture-model-edge{min-width:0;padding:4px}.architecture-model-edge i{width:10px;height:24px;margin:auto;clip-path:polygon(38% 0,62% 0,62% calc(100% - 9px),100% calc(100% - 9px),50% 100%,0 calc(100% - 9px),38% calc(100% - 9px))}.architecture-model-notes{grid-template-columns:1fr}}
@media(prefers-color-scheme:dark){.architecture-model{--architecture-page:#0e1511;--architecture-surface:#17201a;--architecture-alt:#20382b;--architecture-ink:#edf4ee;--architecture-muted:#a9b7ad;--architecture-line:#536158}}