.system-diagram{color:#eaf1f7;background:#07131e}.system-diagram__heading{grid-template-columns:1.25fr .75fr;align-items:end;gap:8vw;margin:80px 7vw 70px;display:grid}.system-diagram__heading h2{max-width:820px;margin-bottom:0;font-size:clamp(48px,5.2vw,78px)}.system-diagram__heading>p{color:#8397a8;max-width:470px;margin:0 0 8px;line-height:1.7}.system-diagram__shell{background:#06101b;border:1px solid #7dd1df33;grid-template-columns:minmax(0,1fr) 320px;min-height:630px;display:grid}.system-diagram__canvas{border-right:1px solid #7dd1df2e;width:100%;min-width:0;height:630px}.system-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)}.system-diagram .react-flow__pane{cursor:grab}.system-diagram .react-flow__pane:active{cursor:grabbing}.system-diagram .react-flow__node{width:190px;color:inherit;text-align:left;background:0 0;border:0;border-radius:0}.system-node{background:linear-gradient(145deg,#0e283cfa,#07141ffa);border:1px solid #7dd1df47;min-height:154px;padding:17px 18px 19px;transition:border-color .18s,box-shadow .18s;display:grid;position:relative}.system-node:hover,.system-node.is-selected{border-color:var(--blue);box-shadow:0 0 0 1px #1e95d447,0 16px 34px #0000002e}.system-node--input,.system-node--model{border-color:#7dd1df80}.system-node--human{background:linear-gradient(145deg,#184c5cf5,#071923fa);border-color:#7dd1dfb8}.system-node--outcome{background:linear-gradient(145deg,#196996e0,#071f30fa);border-color:#1e95d4bf}.system-diagram--llm .system-node--model{border-color:#7dd1dfa6;border-radius:18px}.system-node>span,.system-node>small{font:500 8px var(--mono);letter-spacing:.13em;text-transform:uppercase}.system-node>span{color:var(--blue);position:absolute;top:17px;right:17px}.system-node>small{color:#66849a}.system-node>strong{color:#eef8ff;letter-spacing:-.025em;margin-top:19px;font-size:18px;font-weight:500}.system-node>p{color:#8298a9;margin:9px 0 0;font-size:10px;line-height:1.55}.system-node .react-flow__handle{background:var(--cyan);opacity:0;border:1px solid #07131e;width:8px;height:8px}.system-diagram .system-edge{fill:none;stroke:#1e95d4;stroke-width:1.55px;stroke-dasharray:3 7;animation:1.25s linear infinite system-route}.system-diagram .system-edge--approval{stroke:#7dd1df;stroke-width:1.7px;animation-duration:1s}.system-diagram .system-edge--fallback{stroke:#a9cbd3;stroke-width:1.25px;stroke-dasharray:5 7;animation-duration:1.7s}.system-diagram .system-edge--feedback{stroke:#7dd1df;stroke-width:1.15px;stroke-dasharray:5 8;animation-duration:1.9s}.system-edge__signal{fill:#80ddf1;filter:drop-shadow(0 0 5px #7dd1dfe6);pointer-events:none}.system-edge__signal--approval{fill:#b5e5e7}.system-edge__signal--fallback{fill:#b9ccd2}.system-edge__trail{fill:#1e95d4;filter:drop-shadow(0 0 4px #1e95d4d9);opacity:.72;pointer-events:none}.system-edge__trail--approval,.system-edge__trail--feedback{fill:#7dd1df}.system-edge__trail--fallback{fill:#9db7c0}.system-edge__label{z-index:5;color:#b7d5e5;font:600 9px var(--mono);letter-spacing:.1em;white-space:nowrap;pointer-events:none;background:#081825;border:1px solid #7dd1df6b;padding:5px 9px;line-height:1;position:absolute;box-shadow:0 0 0 3px #06101be0,0 6px 16px #00000047}.system-edge__label--approval,.system-edge__label--feedback{color:#d7f4f4;border-color:#7dd1df9e}.system-edge__label--fallback{color:#d1e0e5}.system-diagram__live{color:#6f8da2;font:500 8px var(--mono);letter-spacing:.14em;text-transform:uppercase;align-items:center;gap:9px;margin:18px;display:flex}.system-diagram__live i{background:#7dd1df;border-radius:50%;width:6px;height:6px;animation:2s ease-out infinite system-live;box-shadow:0 0 #7dd1df80}.system-diagram .react-flow__controls{box-shadow:none;border:1px solid #7dd1df33;border-radius:0;overflow:hidden}.system-diagram .react-flow__controls-button{border-bottom-color:#7dd1df2e}.system-diagram__detail{background:linear-gradient(#1e95d41a,#0000 55%);flex-direction:column;padding:38px 30px;display:flex}.system-diagram__detail>span,.system-diagram__detail>small{font:500 8px var(--mono);letter-spacing:.13em;text-transform:uppercase}.system-diagram__detail>span{color:#66849a}.system-diagram__detail>small{color:var(--blue);margin-top:auto}.system-diagram__detail h3{color:#f1f8fc;letter-spacing:-.04em;margin:14px 0 20px;font-size:32px;font-weight:400}.system-diagram__detail>p{color:#8da2b2;margin:0;font-size:13px;line-height:1.75}.system-diagram__detail>div{border-top:1px solid #ffffff1f;flex-wrap:wrap;gap:10px 14px;margin-top:auto;padding-top:26px;display:flex}.system-diagram__detail>div span{color:#7890a2;font:500 8px var(--mono);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:7px;display:flex}.system-diagram__detail>div i{background:var(--cyan);border-radius:50%;width:5px;height:5px}@keyframes system-route{to{stroke-dashoffset:-10px}}@keyframes system-live{60%,to{box-shadow:0 0 0 9px #7dd1df00}}@media (width<=900px){.system-diagram__heading{grid-template-columns:1fr;margin-left:0;margin-right:0}.system-diagram__shell{grid-template-columns:1fr}.system-diagram__canvas{border-bottom:1px solid #7dd1df2e;border-right:0}.system-diagram__detail{min-height:280px}.system-diagram__detail>small{margin-top:58px}}@media (width<=600px){.system-diagram__heading{margin-top:55px;margin-bottom:45px}.system-diagram__heading h2{font-size:43px}.system-diagram__canvas{height:760px}.system-diagram .react-flow__node{width:160px}.system-edge__label{font-size:11px}.system-diagram__detail{min-height:310px;padding:28px 24px}}@media (prefers-reduced-motion:reduce){.system-node{transition:none}.system-diagram .system-edge,.system-diagram__live i{animation:none}.system-edge__signal,.system-edge__trail{display:none}}