.diagram-wrapper{width:100%;overflow:hidden}.diagram-controls{gap:var(--space-2);padding:var(--space-4) 0;flex-wrap:wrap;display:flex}.diagram-controls button{padding:var(--space-2) var(--space-4);border:1px solid var(--color-surface-3);background:var(--color-surface-1);color:var(--color-text-muted);font-family:var(--font-body);cursor:pointer;font-size:13px;transition:all .2s}.diagram-controls button:hover{border-color:var(--color-surface-4);color:var(--color-text)}.diagram-controls button.active{border-color:var(--color-primary);color:var(--color-primary);background:#ffe00014}.diagram-canvas{-webkit-overflow-scrolling:touch;position:relative;overflow-x:auto}svg.diagram-flow{width:100%;min-width:700px;height:auto;display:block}.diagram-node rect{transition:all .3s}.diagram-node{cursor:pointer}.diagram-node:hover rect{filter:brightness(1.2)}.cat-api rect{fill:var(--color-surface-2);stroke:#3b82f6;stroke-width:1.5px}.cat-api text.label{fill:#60a5fa}.cat-worker rect{fill:var(--color-surface-1);stroke:#a855f7;stroke-width:1.5px}.cat-worker text.label{fill:#c084fc}.cat-raw rect{fill:var(--color-surface-1);stroke:var(--color-faction-bugs);stroke-width:1.5px}.cat-raw text.label{fill:var(--color-faction-bugs)}.cat-norm rect{fill:var(--color-surface-1);stroke:var(--color-success);stroke-width:1.5px}.cat-norm text.label{fill:#4ade80}.cat-seed rect{fill:var(--color-surface-1);stroke:#ec4899;stroke-width:1.5px}.cat-seed text.label{fill:#f472b6}.cat-frontend rect{fill:var(--color-surface-1);stroke:#06b6d4;stroke-width:1.5px}.cat-frontend text.label{fill:#22d3ee}.diagram-arrow{stroke-width:1.5px;fill:none}.arrow-api{stroke:#3b82f6}.arrow-worker{stroke:#a855f7}.arrow-amber{stroke:var(--color-faction-bugs)}.arrow-green{stroke:var(--color-success)}.arrow-seed{stroke:#ec4899}.arrow-frontend{stroke:#06b6d4}.arrow-dashed{stroke-dasharray:6 4}.diagram-dimmed{opacity:.12;transition:opacity .3s}.diagram-highlighted{opacity:1;transition:opacity .3s}.diagram-annotation{font-family:var(--font-body);fill:var(--color-text-muted);font-size:11px}.diagram-annotation-bg{fill:var(--color-surface-0)}.diagram-legend{gap:var(--space-4);padding:var(--space-4) 0;color:var(--color-text-muted);flex-wrap:wrap;font-size:12px;display:flex}.diagram-legend-item{align-items:center;gap:var(--space-2);display:flex}.diagram-legend-dot{flex-shrink:0;width:10px;height:10px}.diagram-detail-overlay{z-index:40;opacity:0;pointer-events:none;background:#00000080;transition:opacity .3s;position:fixed;inset:0}.diagram-detail-overlay.open{opacity:1;pointer-events:auto}.diagram-detail-panel{background:var(--color-surface-1);border-left:1px solid var(--color-surface-3);width:min(400px,90vw);height:100vh;padding:var(--space-8);z-index:50;transition:right .3s;position:fixed;top:0;right:-420px;overflow-y:auto}.diagram-detail-panel.open{right:0}.diagram-detail-panel h3{font-family:var(--font-display);color:var(--color-text);margin-bottom:var(--space-1);font-size:16px}.diagram-detail-subtitle{color:var(--color-text-muted);margin-bottom:var(--space-6);font-size:12px}.diagram-detail-close{top:var(--space-4);right:var(--space-4);color:var(--color-text-muted);cursor:pointer;padding:var(--space-2);background:0 0;border:none;font-size:18px;position:absolute}.diagram-detail-close:hover{color:var(--color-text)}.diagram-detail-panel p{color:var(--color-text-muted);margin:var(--space-2) 0;white-space:pre-line;font-size:13px;line-height:1.6}.diagram-detail-panel pre{background:var(--color-surface-0);border:1px solid var(--color-surface-3);padding:var(--space-4);font-size:12px;font-family:var(--font-mono);color:var(--color-text);white-space:pre;margin:var(--space-2) 0;overflow-x:auto}.diagram-detail-heading{color:var(--color-text-muted);margin-top:var(--space-6);font-size:12px;font-weight:500}.diagram-tag{margin:2px;padding:2px 8px;font-size:11px;font-weight:500;display:inline-block}.tag-interval{color:#c084fc;background:#a855f71f}.tag-upsert{color:#4ade80;background:#22c55e1f}.tag-once{color:#f472b6;background:#ec48991f}.tag-read{color:#22d3ee;background:#06b6d41f}.diagram-schema-table{border-collapse:collapse;width:100%;margin:var(--space-2) 0}.diagram-schema-table th{text-align:left;color:var(--color-text-muted);border-bottom:1px solid var(--color-surface-3);padding:4px 8px;font-size:11px}.diagram-schema-table td{color:var(--color-text);font-size:12px;font-family:var(--font-mono);padding:4px 8px}.diagram-schema-table tr:nth-child(2n) td{background:#13131366}.diagram-layer-label{fill:var(--color-text-muted);font-size:11px;font-weight:500}.diagram-sublabel{font-size:9px}@media (max-width:768px){.diagram-canvas:after{content:"Scroll u2192";top:var(--space-2);right:var(--space-2);color:var(--color-text-muted);background:var(--color-surface-1);opacity:.8;pointer-events:none;padding:2px 8px;font-size:11px;position:absolute}}