.finops-diagram{color:#eaf1f7;background:#07131e}.finops-diagram__heading{grid-template-columns:1.25fr .75fr;align-items:end;gap:8vw;margin:80px 7vw 70px;display:grid}.finops-diagram__heading h2{margin-bottom:0}.finops-diagram__heading>p{color:#8397a8;max-width:460px;margin:0 0 8px;line-height:1.7}.finops-diagram__shell{background:#06101b;border:1px solid #7dd1df33;grid-template-columns:minmax(0,1fr) 320px;min-height:610px;display:grid}.finops-diagram__canvas{border-right:1px solid #7dd1df2e;width:100%;min-width:0;height:610px}.finops-diagram .react-flow{--xy-background-color-default:#06101b;--xy-controls-button-background-color-default:#0b1c2a;--xy-controls-button-background-color-hover-default:#102a3d;--xy-controls-button-color-default:#9eb9ca;--xy-controls-button-color-hover-default:#eaf5fb;--xy-controls-button-border-color-default:#7dd1df2e;font-family:var(--sans)}.finops-diagram .react-flow__pane{cursor:grab}.finops-diagram .react-flow__pane:active{cursor:grabbing}.finops-diagram .react-flow__node{width:190px;color:inherit;text-align:left;background:0 0;border:0;border-radius:0}.finops-node{background:linear-gradient(145deg,#0e283cfa,#07141ffa);border:1px solid #7dd1df47;min-height:154px;padding:17px 18px 19px;transition:border-color .18s,background-color .18s,box-shadow .18s;display:grid;position:relative}.finops-node:hover,.finops-node.is-selected{border-color:var(--blue);box-shadow:0 0 0 1px #1e95d447,0 16px 34px #0000002e}.finops-node--input,.finops-node--outcome{border-color:#1e95d48c}.finops-node--outcome{background:linear-gradient(145deg,#196996e0,#071f30fa)}.finops-node>span,.finops-node>small{font:500 8px var(--mono);letter-spacing:.13em}.finops-node>span{color:var(--blue);position:absolute;top:17px;right:17px}.finops-node>small{color:#66849a;text-transform:uppercase}.finops-node>strong{color:#eef8ff;letter-spacing:-.025em;margin-top:19px;font-size:19px;font-weight:500}.finops-node>p{color:#8298a9;margin:9px 0 0;font-size:10px;line-height:1.55}.finops-node .react-flow__handle{background:var(--cyan);opacity:0;border:1px solid #07131e;width:8px;height:8px}.finops-diagram .react-flow__edge-path{transition:stroke .18s}.finops-diagram .finops-edge{fill:none;stroke:#1e95d4;stroke-width:1.6px;stroke-dasharray:3 7;animation:1.25s linear infinite finops-route}.finops-diagram .finops-edge--feedback{stroke:#7dd1df;stroke-width:1.2px;stroke-dasharray:5 7;animation-duration:1.8s}.finops-edge__signal{fill:#80ddf1;filter:drop-shadow(0 0 5px #7dd1dfe6);pointer-events:none}.finops-edge__signal--feedback{fill:#b5e5e7}.finops-edge__trail{fill:#1e95d4;filter:drop-shadow(0 0 4px #1e95d4d9);opacity:.75;pointer-events:none}.finops-edge__trail--feedback{fill:#7dd1df}.finops-edge__label{color:#7d9bb1;font:500 7px var(--mono);letter-spacing:.12em;white-space:nowrap;pointer-events:none;background:#06101be6;border:1px solid #7dd1df24;padding:4px 7px;position:absolute}.finops-diagram__live{color:#6f8da2;font:500 8px var(--mono);letter-spacing:.14em;text-transform:uppercase;align-items:center;gap:9px;margin:18px;display:flex}.finops-diagram__live i{background:#7dd1df;border-radius:50%;width:6px;height:6px;animation:2s ease-out infinite finops-live;box-shadow:0 0 #7dd1df80}.finops-diagram .react-flow__controls{box-shadow:none;border:1px solid #7dd1df33;border-radius:0;overflow:hidden}.finops-diagram .react-flow__controls-button{border-bottom-color:#7dd1df2e}.finops-diagram__detail{background:linear-gradient(#1e95d41a,#0000 55%);flex-direction:column;padding:38px 30px;display:flex}.finops-diagram__detail>span{color:#66849a;font:500 8px var(--mono);letter-spacing:.13em}.finops-diagram__detail h3{color:#f1f8fc;letter-spacing:-.04em;margin:auto 0 20px;font-size:34px;font-weight:400}.finops-diagram__detail p{color:#8da2b2;margin:0;font-size:13px;line-height:1.75}.finops-diagram__detail>div{color:#7890a2;font:500 8px var(--mono);letter-spacing:.08em;text-transform:uppercase;border-top:1px solid #ffffff1f;flex-wrap:wrap;gap:9px 12px;margin-top:auto;padding-top:28px;display:flex}.finops-diagram__detail i{background:var(--cyan);border-radius:50%;align-self:center;width:5px;height:5px}@keyframes finops-route{to{stroke-dashoffset:-10px}}@keyframes finops-live{60%,to{box-shadow:0 0 0 9px #7dd1df00}}@media (width<=900px){.finops-diagram__heading{grid-template-columns:1fr;margin-left:0;margin-right:0}.finops-diagram__shell{grid-template-columns:1fr}.finops-diagram__canvas{border-bottom:1px solid #7dd1df2e;border-right:0}.finops-diagram__detail{min-height:270px}.finops-diagram__detail h3{margin-top:60px}}@media (width<=600px){.finops-diagram__heading{margin-top:55px;margin-bottom:45px}.finops-diagram__heading h2{font-size:44px}.finops-diagram__canvas{height:520px}.finops-diagram__detail{min-height:290px;padding:28px 24px}}@media (prefers-reduced-motion:reduce){.finops-node,.finops-diagram .react-flow__edge-path{transition:none}.finops-diagram .finops-edge,.finops-diagram__live i{animation:none}.finops-edge__signal,.finops-edge__trail{display:none}}