#agenticFlowView{position:absolute;left:0;top:0;width:1720px;height:860px;font-family:Sketch,'Comic Sans MS',cursive;color:#233b60}
.ag-return{position:absolute;top:0;left:0;width:1720px;height:100px;overflow:visible}.ag-return text{font:27px Sketch;fill:#3768a0}
.ag-stages{position:absolute;top:105px;left:0;right:0;bottom:0;display:grid;grid-template-columns:380px 470px 380px 400px;gap:30px}
.ag-stage{--stroke:#439468;--fill:#edf8ef;border:2px solid var(--stroke);border-radius:13px 16px 12px 15px;background:var(--fill);padding:23px 18px;position:relative;box-shadow:3px -3px 0 -1px #fcfcfd,4px -4px 0 -1px var(--stroke)}
.ag-stage:not(:last-child):after{content:'→';position:absolute;right:-31px;top:45%;font:42px Sketch;color:#3768a0;z-index:2}
.ag-execution{--stroke:#9564cf;--fill:#f6effc}.ag-validation{--stroke:#5188d6;--fill:#edf5fe}.ag-shipping{--stroke:#bc9142;--fill:#fff8e8}
.ag-stage h2{font:38px Sketch;margin:0 0 25px;display:flex;align-items:center;gap:16px;color:var(--stroke);letter-spacing:0}.ag-stage h2>span{border:2px solid currentColor;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:32px}
.ag-block{border:1.5px solid color-mix(in srgb,var(--stroke) 55%,white);border-radius:11px 14px 12px 9px;padding:17px 21px;margin-bottom:15px;background:#ffffff65}
.ag-block h3,.ag-safeguards h3{font:28px Sketch;margin:0 0 14px;color:var(--stroke)}
.ag-item{display:flex;align-items:center;gap:18px;font-size:25px;line-height:1.25;min-height:48px;margin:16px 0}.ag-logo{width:35px;height:35px;object-fit:contain;flex-shrink:0}.ag-symbol{width:35px;flex-shrink:0;text-align:center;font-size:35px;color:#3768a0}
.ag-trigger .ag-item{margin:25px 0}.ag-trigger .ag-block{margin-bottom:20px}.ag-trigger .ag-block:last-child{padding-bottom:28px}
.ag-execution .ag-block{padding:16px 23px;margin-bottom:13px}.ag-execution .ag-block h3{margin-bottom:10px}.ag-block p{font:23px/1.25 Sketch;color:#314a70;margin:0}.ag-repos{--stroke:#2d929e;background:#edfbfc}.ag-tools{--stroke:#bd6482;background:#fff0f5}.ag-skills{--stroke:#9464c8;background:#f3eaff}.ag-env{--stroke:#5088d1;background:#ebf5ff}
.ag-brands{display:flex;gap:32px;margin-bottom:10px}.ag-brands .ag-item{margin:0;font-size:23px;gap:10px;min-height:35px}.ag-tool-logos{display:flex;justify-content:space-between;gap:10px;margin:16px 0}.ag-tool-logos>div{display:flex;align-items:center;flex-direction:column;gap:6px;font-size:20px}.ag-tool-logos .ag-logo{width:30px;height:30px}.ag-simulator{display:block;font-size:20px;margin-top:8px;color:#4b6c91}
.ag-validation-list{background:#ffffff55;border-radius:13px;padding:17px 15px;height:620px}.ag-validation-list .ag-item{font-size:24px;margin:16px 0 35px;gap:16px}.ag-safeguards{border:1.5px solid #d8b26b;border-radius:12px;padding:16px 12px;background:#fff6dc}.ag-safeguards h3{font-size:27px;margin:0 6px 15px;color:#956b22}.ag-release-step{display:flex;align-items:center;gap:15px;background:#fffdf4;border:1px solid #efdeb7;border-radius:10px;padding:16px 13px;font-size:25px;line-height:1.2;min-height:75px}.ag-pr{margin-bottom:18px;font-size:29px}.ag-release-step small{display:block;font-size:18px;margin-top:9px;white-space:nowrap}.ag-down{text-align:center;font:30px/1 Sketch;color:#3768a0;height:28px}.ag-brand-label{display:flex;flex-direction:column;align-items:center;width:65px;flex-shrink:0}.ag-brand-label small{font-size:16px;margin-top:6px}.ag-brand-label .ag-logo{width:38px;height:38px}
.ag-logo.linear{filter:invert(40%) sepia(70%) saturate(1300%) hue-rotate(220deg)}.ag-logo.grafana,.ag-logo.gitlab,.ag-logo.argo{filter:invert(52%) sepia(95%) saturate(1800%) hue-rotate(345deg)}.ag-logo.googlebigquery,.ag-logo.growthbook{filter:invert(40%) sepia(95%) saturate(1300%) hue-rotate(175deg)}

.ag-environment-options{margin:0;padding-left:23px;font:23px/1.35 Sketch;color:#314a70}.ag-environment-options li+li{margin-top:8px}

/* Consistent vector icons and connectors, independent of font glyphs. */
.ag-line-icon{display:block;width:35px;height:35px;flex:0 0 35px;color:#3768a0}
.ag-stage:not(:last-child):after{content:none}
.ag-stages{grid-template-columns:380px 56px 470px 56px 380px 56px 400px;gap:0}
#agenticFlowView,.ag-return{width:1798px}
.ag-stage-arrow{width:40px;height:28px;align-self:center;justify-self:center;color:#3768a0;overflow:visible}
.ag-down{display:flex;align-items:center;justify-content:center;height:32px}
.ag-down .ag-line-icon{width:22px;height:26px;flex-basis:22px}
.ag-simulator{display:flex;align-items:center;gap:9px}
.ag-simulator .ag-line-icon{width:22px;height:26px;flex-basis:22px}
.ag-stages>.ag-stage-arrow{position:static;inset:auto;display:block;pointer-events:none}
.ag-stages>.ag-trigger{grid-column:1;grid-row:1}.ag-stages>.ag-execution{grid-column:3;grid-row:1}.ag-stages>.ag-validation{grid-column:5;grid-row:1}.ag-stages>.ag-shipping{grid-column:7;grid-row:1}
.ag-stages>.ag-stage-arrow:nth-of-type(1){grid-column:2;grid-row:1}.ag-stages>.ag-stage-arrow:nth-of-type(2){grid-column:4;grid-row:1}.ag-stages>.ag-stage-arrow:nth-of-type(3){grid-column:6;grid-row:1}

.ag-stages>.ag-two-way{height:44px}

.ag-stages{grid-template-columns:380px 56px 470px 86px 380px 56px 400px}
#agenticFlowView{width:1828px}
.ag-stages>.ag-two-way{width:64px;height:64px}

/* Approved validation and release mockup. */
#agenticFlowView{width:1928px;height:1010px}
.ag-stages{top:30px;grid-template-columns:380px 56px 470px 86px 480px 56px 400px}
.ag-validation-intro{font:24px/1.3 Sketch;margin:0 5px 24px;color:#314a70}
.ag-validation-cards{display:flex;flex-direction:column;gap:15px}
.ag-validation-card{border:1.5px solid #75a4e7;border-radius:12px;background:#e8f3ff;padding:16px}
.ag-validation-card summary{list-style:none;display:flex;align-items:center;gap:17px;font:28px/1.2 Sketch;color:#316ba5;cursor:pointer;padding:3px 2px 13px}
.ag-validation-card summary::-webkit-details-marker{display:none}
.ag-validation-card summary:focus-visible{outline:2px solid #316ba5;outline-offset:5px;border-radius:4px}
.ag-validation-card p{font:23px/1.3 Sketch;color:#233b60;margin:0;background:#f7fbff;border-radius:10px;padding:13px 14px}
.ag-validation-card:not([open]) summary{padding-bottom:3px}
.ag-repo-pr{display:flex;align-items:center;gap:18px;border-top:1px solid #8bc9dc;padding-top:16px;margin-top:17px;font:26px Sketch;color:#6f48b0}
.ag-env-option{display:flex;align-items:center;gap:14px;font:23px/1.3 Sketch;margin:13px 0}
.ag-env .ag-simulator{font:23px/1.3 Sketch;gap:14px;color:#233b60;margin-top:13px}
.ag-env .ag-simulator .ag-line-icon{width:35px;height:35px;flex-basis:35px}
.ag-execution .ag-block{margin-bottom:17px;padding-top:19px;padding-bottom:19px}
.ag-safeguards{padding:20px 14px}
.ag-safeguards h3{font-size:29px;margin-bottom:27px}
.ag-release-step{min-height:126px;font-size:26px}
.ag-down{height:44px}
.ag-down .ag-line-icon{height:30px}
.ag-stages>.ag-two-way{width:64px;height:72px;stroke-width:2.8}

/* Match the image's compact proportions and readable, evenly filled cards. */
#agenticFlowView{height:880px}
.ag-stages{top:16px;bottom:16px}
.ag-stage{padding:22px 20px}
.ag-stage h2{font-size:40px;margin-bottom:24px;gap:15px}
.ag-trigger,.ag-execution,.ag-shipping{display:flex;flex-direction:column}
.ag-trigger .ag-block{flex:1;margin:0 0 18px;padding:20px}
.ag-trigger .ag-block:last-child{margin-bottom:0;padding-bottom:20px}
.ag-trigger .ag-item{font-size:27px;margin:24px 0;gap:17px}
.ag-trigger .ag-logo,.ag-trigger .ag-line-icon{width:40px;height:40px;flex-basis:40px}
.ag-block h3{font-size:30px}
.ag-execution .ag-block{margin:0 0 16px;padding:22px 23px}
.ag-execution .ag-block:last-child{margin-bottom:0}
.ag-execution .ag-env{flex:1.12}
.ag-execution .ag-repos{flex:1}
.ag-execution .ag-tools{flex:.8}
.ag-execution .ag-block h3{margin-bottom:20px}
.ag-env-option,.ag-env .ag-simulator{font-size:26px;gap:18px;margin:18px 0}
.ag-env .ag-simulator{margin-bottom:0}
.ag-brands{gap:40px;margin:22px 0}
.ag-brands .ag-item{font-size:28px;gap:14px}
.ag-brands .ag-logo{width:46px;height:46px}
.ag-repo-pr{font-size:28px;padding-top:22px;margin-top:22px}
.ag-tool-logos{margin:25px 0 8px}
.ag-tool-logos .ag-logo{width:43px;height:43px}
.ag-tool-logos>div{font-size:23px;gap:12px}
.ag-validation-intro{margin:0 4px 20px;font-size:25px}
.ag-validation-cards{gap:14px}
.ag-validation-card{padding:15px}
.ag-validation-card summary{font-size:28px;padding-bottom:12px}
.ag-validation-card p{font-size:23px;padding:12px 13px}
.ag-safeguards{flex:1;display:flex;flex-direction:column;padding:24px 16px}
.ag-safeguards h3{font-size:30px;margin:0 4px 24px}
.ag-release-step{flex:1;min-height:100px;font-size:27px;padding:17px 14px}
.ag-release-step small{font-size:18px}
.ag-down{height:38px;flex:0 0 38px}
