*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Segoe UI,Arial,sans-serif;color:#243447;background:#f5f8fc;overflow:hidden}header{height:76px;padding:12px 22px;background:linear-gradient(110deg,#123e69,#2473ad);color:#fff;display:flex;justify-content:space-between;align-items:center}h1{font-size:23px;margin:0 0 4px}header p{margin:0;font-size:13px;opacity:.9}button{border:0;border-radius:8px;padding:9px 12px;font-weight:600;cursor:pointer;color:#21415e;background:#fff}header button{margin-left:5px}.states{height:45px;background:white;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 2px 8px #7892aa33}.states span{padding:6px 12px;border-radius:18px;background:#edf2f7;font-size:12px;font-weight:700;transition:.25s}.states span.active{transform:scale(1.08);color:white;background:#2473ad;box-shadow:0 0 0 4px #2473ad22}main{height:calc(100vh - 121px);position:relative}#stage{width:100%;height:100%;overflow:hidden;cursor:grab;background:radial-gradient(#d9e3ed 1px,transparent 1px);background-size:20px 20px}#stage:active{cursor:grabbing}#flow{width:100%;height:100%;transform-origin:center}.lane{stroke-width:1.5}.lane-title{font-size:15px;font-weight:700;fill:#34495e}.node{cursor:pointer;transition:.2s}.node rect,.node path{stroke-width:1.5}.node text{font-size:12px;fill:#283747;pointer-events:none}.node:hover{filter:drop-shadow(0 4px 5px #526b7f88)}.node.selected{filter:drop-shadow(0 0 9px #1476cc)}.node.selected rect,.node.selected path{stroke:#126bb0;stroke-width:4}.node.dim{opacity:.28}.edge{fill:none;stroke:#4c5661;stroke-width:1.5;marker-end:url(#arrow)}.edge.active{stroke:#1377bd;stroke-width:4;filter:drop-shadow(0 0 3px #53a7df)}.edge-label{font-size:11px;fill:#34495e}.activity{fill:#fff8cf;stroke:#e7b423}.document{fill:#d8efd9;stroke:#5b9e64}.milestone{fill:#9fd8d5;stroke:#238a86}.pulse{animation:pulse 1.2s infinite}@keyframes pulse{50%{filter:drop-shadow(0 0 12px #1886d0)}}#card{position:absolute;right:18px;top:18px;width:350px;max-height:calc(100% - 36px);overflow:auto;background:#fff;border-radius:16px;padding:22px;box-shadow:0 12px 40px #29476255;transform:translateX(390px);transition:.3s;z-index:5}#card.open{transform:none}#close{position:absolute;right:10px;top:8px;font-size:21px;background:transparent}.tag{display:inline-block;border-radius:20px;padding:5px 9px;background:#eaf3fb;color:#17649b;font-size:11px;font-weight:700}.status{padding:12px;border-radius:9px;color:white;background:#2473ad;font-weight:800;text-align:center;margin:14px 0}.section{margin:15px 0}.section b{display:block;color:#6b7c8e;font-size:11px;text-transform:uppercase;margin-bottom:5px}.note{background:#fff4cf;border-left:4px solid #efb31c;padding:11px;border-radius:6px}.nav{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e3e9ef;padding-top:13px;margin-top:16px}.nav button{background:#eaf1f7}.nav span{font-size:12px}.hint{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);background:#173f61e8;color:white;padding:8px 15px;border-radius:20px;font-size:12px;z-index:4}@media(max-width:800px){header p{display:none}header{height:68px}header button{font-size:0;padding:9px}header button:first-letter{font-size:15px}.states{overflow:auto;justify-content:flex-start;padding:0 10px}.states b{display:none}#card{left:10px;right:10px;bottom:10px;top:auto;width:auto;max-height:65%;transform:translateY(110%)}#card.open{transform:none}.hint{display:none}}
#close{z-index:20;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#edf3f8!important;color:#173f61!important}
#close:hover{background:#d8e7f2!important}
.supports{margin:8px 0 0 20px;padding:0}.supports li{margin:5px 0}
.node circle{pointer-events:none}.node text[fill="#fff"]{fill:#fff!important}

#P10 text{font-size:10px}.supports li{font-weight:600;color:#304b63}

.node.selected rect{fill:#2f80c5!important;stroke:#0d4f83!important}.node.selected text{fill:#fff!important}.node.selected.document-node rect{fill:#35a85b!important}.edge{transition:.25s}.node.dim~.edge{opacity:.12}.edge:not(.active){opacity:.12}.states:not(:has(.active))~main .edge{opacity:1}.support-mini{fill:#d8efd9;stroke:#5b9e64;stroke-width:1}.support-text{font-size:8px!important;fill:#24452b!important}

.edge-label-bg{fill:#fff;stroke:#9eb0c0;stroke-width:1;filter:drop-shadow(0 1px 2px #526b7f44)}
.edge-label{font-size:11px;font-weight:700;fill:#263b4d;dominant-baseline:middle}
.edge-label-group{pointer-events:none}