#cx-architecture{--cg-cyan:#64d7d3;--cg-purple:#b28ae5;--cg-pink:#df6db7;color:#eaf2ff}
#cx-architecture *{box-sizing:border-box}#cx-architecture p{margin:0}#cx-architecture .cxg-panel{position:relative;padding:22px 25px 18px;border:1px solid #35445e;border-radius:18px;background:#101824;isolation:isolate}#cx-architecture .cxg-panel+.cxg-panel{margin-top:24px}#cx-architecture .cxg-panel:before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:3px;border-radius:2px;background:linear-gradient(90deg,#d62b8a,#9067da,#42cbd0)}
#cx-architecture .cxg-panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}#cx-architecture .cxg-panel-head>div{display:flex;align-items:center;gap:12px}#cx-architecture .cxg-panel-head h3{font-size:25px;line-height:1.2;color:#fff;margin:0}#cx-architecture .cxg-index{font-size:16px;color:#91dfdf;padding:5px 9px;border:1px solid #40576c;border-radius:7px;background:#182c3c}#cx-architecture .cxg-panel-head p{font-size:16px;line-height:1.4;color:#c4d4e6}#cx-architecture .cxg-return-key{display:inline-block;width:20px;height:3px;background:#c987d5;vertical-align:middle;margin-right:8px;border-radius:3px}
#cx-architecture .cxg-scene{position:relative}#cx-architecture .cxg-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}#cx-architecture .cxg-seq-scene{padding-top:57px}#cx-architecture .cxg-seq-nodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px}#cx-architecture .cxg-node{position:relative;z-index:1;border:1px solid #43617a;border-radius:12px;padding:12px 13px;background:#193342;min-width:0;display:flex;align-items:center;gap:12px}#cx-architecture .cxg-node img{display:block;flex:none;width:58px;height:58px;object-fit:contain}#cx-architecture .cxg-node strong{display:block;font-size:18px;line-height:1.25;color:#f6f8ff;margin-bottom:5px}#cx-architecture .cxg-node div>span{display:block;font-size:16px;line-height:1.3;color:#c8d9e9}#cx-architecture .cxg-spark{background:#29213f;border-color:#69528f}#cx-architecture .cxg-prism{background:#153c42;border-color:#36828b}#cx-architecture .cxg-atlas{background:#42283b;border-color:#8a547a}#cx-architecture .cxg-human{background:#1d344b;border-color:#587e9b}#cx-architecture .cxg-person{width:47px;height:47px;flex:none;display:grid;place-items:center;border-radius:50%;color:#9ce4e2;background:#204958}#cx-architecture .cxg-person svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2}
#cx-architecture .cxg-reading{font-size:16px;line-height:1.45;color:#bfcee1;margin-top:17px;padding-top:13px;border-top:1px solid #2d3a4c}#cx-architecture .cxg-reading strong{color:#f1eaff;font-weight:600}
#cx-architecture .cxg-par-scene{display:grid;grid-template-columns:1.05fr 1.2fr 1.12fr 1fr 1.12fr;grid-template-rows:1fr 1fr;column-gap:39px;row-gap:24px;align-items:center;padding-top:6px}#cx-architecture .cxg-par-scene .cxg-node{flex-direction:column;justify-content:center;text-align:center;gap:7px;padding:11px 8px;min-height:108px}#cx-architecture .cxg-par-scene .cxg-node strong{font-size:17px;margin-bottom:4px}#cx-architecture .cxg-project{grid-column:1;grid-row:1/3;background:#3b2738;border-color:#89516e}#cx-architecture .cxg-architect{grid-column:2;grid-row:1;background:#252d47;border-color:#626b9a}#cx-architecture .cxg-manager{grid-column:2;grid-row:2;background:#2d2545;border-color:#805aae}#cx-architecture .cxg-tests{grid-column:4;grid-row:1/3;background:#173744;border-color:#367d88}#cx-architecture .cxg-human-gate{grid-column:5;grid-row:1}#cx-architecture .cxg-deploy{grid-column:5;grid-row:2;background:#1c3a3c;border-color:#41878a}#cx-architecture .cxg-model{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:28px;padding:4px 7px;border-radius:6px;background:#18464d;border:1px solid #438d94;color:#adf0e6;font-family:Arial,sans-serif;font-size:16px;font-weight:700;line-height:1;flex:none}#cx-architecture .cxg-claude{background:#6b3a30;color:#ffe0cf;border-color:#b27360}#cx-architecture .cxg-human-gate .cxg-person{width:32px;height:32px}#cx-architecture .cxg-human-gate .cxg-person svg{width:26px;height:26px}
#cx-architecture .cxg-devpool{grid-column:3;grid-row:1/3;position:relative;z-index:1;padding:0 0 3px;text-align:center;min-width:0}#cx-architecture .cxg-dev-title{display:block;color:#c9b3f1;font-size:16px;line-height:1.3;margin-bottom:10px}#cx-architecture .cxg-devs{display:grid;gap:5px}#cx-architecture .cxg-dev{display:flex;align-items:center;justify-content:center;gap:9px;padding:4px 6px;border:1px solid #55739a;background:#203249;border-radius:9px;position:relative;min-width:0}#cx-architecture .cxg-dev strong{font-size:16px;color:#e7efff;line-height:1.2;font-weight:600}#cx-architecture .cxg-dev .cxg-model{min-width:37px;height:23px;padding:3px 5px;font-size:16px}#cx-architecture .cxg-dev-caption{display:block;color:#9adbd9;font-size:16px;line-height:1.3;margin-top:9px}
#cx-architecture .cxg-link{fill:none;stroke:#65939f;stroke-width:1.6;vector-effect:non-scaling-stroke}#cx-architecture .cxg-link-return{stroke:#a876be;stroke-width:1.4}#cx-architecture .cxg-link-advice{stroke:#a993d2;stroke-dasharray:4 4}#cx-architecture .cxg-flow{fill:none;stroke:#90eee5;stroke-width:2.7;stroke-linecap:round;stroke-dasharray:9 191;stroke-dashoffset:200;vector-effect:non-scaling-stroke;animation:cxg-flow-travel 5.2s linear infinite;animation-play-state:paused;opacity:0}#cx-architecture .cxg-sequential .cxg-flow{animation-delay:var(--flow-delay,0s)}#cx-architecture .cxg-panel[data-motion=on] .cxg-flow{opacity:.95;animation-play-state:running}#cx-architecture .cxg-shared{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;font-size:16px;line-height:1.5;color:#c8d5e5;padding-top:18px}#cx-architecture .cxg-shared>span{width:7px;height:7px;flex:none;border-radius:50%;background:#76ddd6;box-shadow:0 0 10px #59c5c94d}#cx-architecture .cxg-shared strong{color:#8ce0db}
@keyframes cxg-flow-travel{to{stroke-dashoffset:0}}
@media(max-width:1120px){#cx-architecture .cxg-panel{padding:20px}#cx-architecture .cxg-seq-nodes{gap:27px}#cx-architecture .cxg-node{gap:8px;padding:10px 8px}#cx-architecture .cxg-node img{width:44px;height:44px}#cx-architecture .cxg-node strong{font-size:17px}#cx-architecture .cxg-par-scene{column-gap:25px}#cx-architecture .cxg-panel-head{align-items:flex-start}#cx-architecture .cxg-panel-head p{max-width:300px}#cx-architecture .cxg-node div>span{font-size:16px}}
@media(max-width:850px){#cx-architecture .cxg-panel-head{display:block}#cx-architecture .cxg-panel-head p{margin:10px 0 0;max-width:none}#cx-architecture .cxg-seq-nodes .cxg-node{flex-direction:column;text-align:center;gap:7px;min-height:122px}#cx-architecture .cxg-par-scene{grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-template-areas:"project architect" "manager manager" "devs devs" "tests tests" "human human" "deploy deploy";gap:25px 20px;padding-top:8px}#cx-architecture .cxg-project{grid-area:project}#cx-architecture .cxg-architect{grid-area:architect}#cx-architecture .cxg-manager{grid-area:manager}#cx-architecture .cxg-devpool{grid-area:devs}#cx-architecture .cxg-tests{grid-area:tests}#cx-architecture .cxg-human-gate{grid-area:human}#cx-architecture .cxg-deploy{grid-area:deploy}#cx-architecture .cxg-par-scene .cxg-node{min-height:65px;flex-direction:row;gap:12px;text-align:left;padding:10px 14px;justify-content:flex-start}#cx-architecture .cxg-par-scene .cxg-project,#cx-architecture .cxg-par-scene .cxg-architect{flex-direction:column;text-align:center;gap:6px;min-height:113px;padding:10px 8px}#cx-architecture .cxg-devpool{padding:0}#cx-architecture .cxg-devs{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}#cx-architecture .cxg-dev{flex-direction:column;gap:7px;padding:9px 3px}#cx-architecture .cxg-dev-title{margin-bottom:9px}#cx-architecture .cxg-dev-caption{margin-top:8px}#cx-architecture .cxg-model{min-width:44px}#cx-architecture .cxg-par-scene .cxg-node div>span{line-height:1.2}}
@media(max-width:560px){#cx-architecture .cxg-panel{padding:18px 13px;border-radius:14px}#cx-architecture .cxg-panel:before{left:16px;right:16px}#cx-architecture .cxg-panel+.cxg-panel{margin-top:20px}#cx-architecture .cxg-panel-head h3{font-size:23px}#cx-architecture .cxg-panel-head>div{gap:9px}#cx-architecture .cxg-panel-head p{font-size:16px}#cx-architecture .cxg-seq-scene{padding:0 0 0 37px}#cx-architecture .cxg-seq-nodes{display:flex;flex-direction:column;gap:24px}#cx-architecture .cxg-seq-nodes .cxg-node{flex-direction:row;text-align:left;min-height:73px;gap:10px;padding:10px 9px}#cx-architecture .cxg-node img{width:42px;height:42px}#cx-architecture .cxg-node strong{font-size:17px}#cx-architecture .cxg-node div>span{font-size:16px}#cx-architecture .cxg-person{width:42px;height:42px}#cx-architecture .cxg-person svg{width:29px;height:29px}#cx-architecture .cxg-reading{font-size:16px;line-height:1.4;margin-top:14px;padding-top:12px}#cx-architecture .cxg-par-scene{gap:26px 13px}#cx-architecture .cxg-devs{gap:3px}#cx-architecture .cxg-dev .cxg-model{min-width:0;width:33px;height:24px;padding:3px;font-size:16px}#cx-architecture .cxg-dev strong{font-size:16px}#cx-architecture .cxg-dev{padding:9px 0;gap:7px}#cx-architecture .cxg-dev strong{white-space:nowrap}#cx-architecture .cxg-shared{justify-content:flex-start;padding:17px 4px 0;gap:5px;font-size:16px}}
@media(prefers-reduced-motion:reduce){#cx-architecture .cxg-flow{animation:none!important;opacity:0!important}}

#cx-architecture .cxg-dev-title,#cx-architecture .cxg-dev-caption{position:relative;z-index:1;background:#101824;width:fit-content;margin-left:auto;margin-right:auto;padding-left:6px;padding-right:6px}

/* Brand artwork: original OpenAI knot and Claude mark, with no text-token badges. */
#cx-architecture .cxg-node>img.cxg-brand{width:30px;height:30px;min-width:30px;object-fit:contain;flex:none;margin:0}
#cx-architecture .cxg-dev>img.cxg-brand{display:block;width:24px;height:24px;object-fit:contain;flex:none;margin:0}
#cx-architecture .cxg-node div>span.cxg-agent-model{display:flex;align-items:center;gap:6px}
#cx-architecture .cxg-agent-model>img{display:block;width:18px;height:18px;min-width:18px;object-fit:contain;flex:none;margin:0}
@media(min-width:561px) and (max-width:850px){#cx-architecture .cxg-node div>span.cxg-agent-model{justify-content:center}}