.diagram{position:relative;margin:28px 0;padding:clamp(20px,3vw,32px);background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-2xl);overflow:hidden}.diagram:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(60% 55% at 50% 105%,rgba(212,160,68,.12),transparent 70%)}[data-theme=dark] .diagram:before{background:radial-gradient(60% 55% at 50% 105%,rgba(226,181,90,.1),transparent 70%)}.diagram-tools{position:absolute;top:10px;right:10px;z-index:2;display:flex;gap:6px}.diagram-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--border-primary);border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--fg-tertiary);cursor:pointer;opacity:.6;transition:opacity .15s ease,color .15s ease,border-color .15s ease}.diagram:hover .diagram-btn,.diagram-btn:focus-visible{opacity:1}.diagram-btn:hover{color:var(--fg-accent);border-color:var(--gold-500)}.diagram-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);background:var(--bg-overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.diagram-modal-tools{position:absolute;top:12px;right:12px;z-index:2;display:flex;gap:8px}.diagram-modal-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--border-primary);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--fg-secondary);cursor:pointer;transition:color .15s ease,border-color .15s ease}.diagram-modal-btn:hover{color:var(--fg-accent);border-color:var(--gold-500)}.diagram-modal-inner{position:relative;width:min(92vw,1400px);max-height:90vh;overflow:auto;background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-2xl);padding:clamp(20px,3vw,40px);box-shadow:var(--shadow-xl)}.diagram-modal-svg,.diagram-modal-cap{position:relative;z-index:1}.diagram-modal-svg svg{width:100%;height:auto;display:block;margin:0 auto}.diagram-modal-cap{margin:16px 0 0;text-align:center;font-size:14px;color:var(--fg-tertiary)}@media (prefers-reduced-motion: reduce){.diagram-modal{-webkit-backdrop-filter:none;backdrop-filter:none}}.diagram .diagram-svg{position:relative;z-index:1;overflow-x:auto}.diagram .diagram-cap{position:relative;z-index:1}.diagram svg{max-width:100%;height:auto;display:block;margin:0 auto;background:transparent}.diagram svg g.node rect,.diagram svg rect.actor,.diagram svg .actor>rect{rx:6px;ry:6px}:is(.diagram,.diagram-modal) svg g.node.good .nodeLabel,:is(.diagram,.diagram-modal) svg g.node.good .nodeLabel *,:is(.diagram,.diagram-modal) svg g.node.good text{color:#10281b!important;fill:#10281b!important}:is(.diagram,.diagram-modal) svg g.node.bad .nodeLabel,:is(.diagram,.diagram-modal) svg g.node.bad .nodeLabel *,:is(.diagram,.diagram-modal) svg g.node.bad text{color:#5a1f18!important;fill:#5a1f18!important}:is(.diagram,.diagram-modal) svg g.node.warn .nodeLabel,:is(.diagram,.diagram-modal) svg g.node.warn .nodeLabel *,:is(.diagram,.diagram-modal) svg g.node.warn text{color:#5c2e0e!important;fill:#5c2e0e!important}:is(.diagram,.diagram-modal) svg g.node.accent .nodeLabel,:is(.diagram,.diagram-modal) svg g.node.accent .nodeLabel *,:is(.diagram,.diagram-modal) svg g.node.accent text{color:#4a3410!important;fill:#4a3410!important}.diagram svg g.node{transition:translate .18s ease,filter .18s ease}.diagram svg g.node:hover{translate:0 -3px;filter:drop-shadow(0 2px 4px rgba(42,29,16,.08)) drop-shadow(0 14px 26px rgba(212,160,68,.28))}.diagram svg g.node:hover rect,.diagram svg g.node:hover path{stroke:#e2b55a}.diagram svg rect.actor{transition:filter .18s ease}.diagram svg rect.actor:hover{filter:drop-shadow(0 2px 4px rgba(42,29,16,.08)) drop-shadow(0 12px 22px rgba(212,160,68,.26));stroke:#e2b55a}@media (prefers-reduced-motion: reduce){.diagram svg g.node{transition:none}}.diagram-cap{margin-top:12px;text-align:center;font-size:13px;line-height:1.5;color:var(--fg-tertiary)}.diagram-err{font-family:var(--font-mono);font-size:12px;color:var(--error-500)}.diagram-src{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}