.connected-diagram{margin-top:30px;border:1px solid #344653;border-radius:16px;background:#080f18;overflow:hidden;padding:20px 10px}
.process-diagram{display:block;width:100%;height:auto;font-family:Manrope,Arial,sans-serif;overflow:visible}
.process-diagram.diagram-mobile{display:none}
.diagram-boundary{fill:#112129;stroke:#526944;stroke-width:1.5;stroke-dasharray:7 7}
.diagram-boundary-label{fill:#d3fb52;font-size:19px;font-weight:600;letter-spacing:.06em}
.diagram-wire{fill:none;stroke:#78dcec;stroke-width:2.4}
.diagram-hit{fill:none;stroke:transparent;stroke-width:22;cursor:pointer}
.diagram-packet{fill:none;stroke:#eaffad;stroke-width:5;stroke-dasharray:12 220;opacity:0;pointer-events:none}
.diagram-edge[data-kind=association] .diagram-wire{stroke:#a9bac8;stroke-dasharray:7 6}
.diagram-edge[data-kind=manual] .diagram-wire{stroke:#efbf73}
.diagram-edge[data-kind=mapping] .diagram-wire{stroke:#bda5f2}
.diagram-payload{font-size:20px;fill:#cbd7e1;paint-order:stroke;stroke:#080f18;stroke-width:8;stroke-linejoin:round;cursor:pointer}
.diagram-node>.comic-frame{fill:#f0ead9;stroke:#14202c;stroke-width:4;filter:drop-shadow(4px 5px 0 #0007)}
.diagram-node-label{fill:#172432;font-size:22px;font-weight:800;pointer-events:none}
.comic-speech{fill:#f5f0df;stroke:#172432;stroke-width:2.5}
.comic-panel-number{fill:#d3fb52;stroke:#172432;stroke-width:2}
.comic-panel-index{fill:#172432;font-size:18px;font-weight:800;pointer-events:none}
.diagram-edge.is-selected .diagram-wire{stroke-width:3.5}
.diagram-edge.is-selected .diagram-payload{fill:#eaffad}
.diagram-node.is-source>.comic-frame{stroke:#d3fb52;stroke-width:4}
.diagram-node.is-target>.comic-frame{stroke:#78dcec;stroke-width:4}
.diagram-edge:focus-visible{outline:none}.diagram-edge:focus-visible .diagram-wire{stroke:#d3fb52;stroke-width:5}
.diagram-edge.is-flowing .diagram-packet{opacity:1;animation:diagram-travel 2.4s linear infinite}
.diagram-edge-number{fill:#0b131d;stroke:#78dcec;stroke-width:2}
.diagram-number{fill:#eaffad;font:600 22px Manrope,Arial;pointer-events:none}
.flow-routes{display:flex;flex-wrap:wrap;gap:10px;margin-block:24px}
.flow-route{display:inline-flex;align-items:center;gap:10px;min-height:44px;background:#101c29;border:1px solid #526477;border-radius:8px;padding:10px 14px;text-align:left;font-size:16px;line-height:1.5}
.flow-route[aria-pressed=true]{border-color:#d3fb52;background:#1a292c}
.flow-route .route-number{color:#d3fb52;font-size:14px;font-weight:600;flex-shrink:0}
.flow-route .flow-payload{font-size:16px}
@keyframes diagram-travel{to{stroke-dashoffset:-232}}
@media(max-width:1100px){.process-diagram.diagram-desktop{display:none}.process-diagram.diagram-mobile{display:block;max-width:440px;margin-inline:auto}.connected-diagram{padding:10px 0}.flow-routes{gap:8px}.flow-route{padding:10px 12px}.diagram-boundary-label{font-size:23px}.diagram-node-label{font-size:24px}.diagram-number{font-size:24px}.comic-panel-index{font-size:22px}.process-panel .flow-inspector{font-size:17px}}
@media(prefers-reduced-motion:reduce){.diagram-edge.is-flowing .diagram-packet{display:none!important}}
