/* Fixed illustrative geometry; only direction and sequence receive motion. */
.gs-monitor .gsmx-figure{--gsmx-line:#c7d5cb;box-sizing:border-box;max-width:860px;margin:24px 0;padding:24px;border:1px solid var(--gsmx-line);border-radius:14px;background:#f5f6ef;color:#203e38}
.gs-monitor .gsmx-figure *{box-sizing:border-box;min-width:0}
.gs-monitor .gsmx-figure h3{margin:0 0 20px;font:400 clamp(22px,2.5vw,27px)/1.3 Georgia,serif;color:inherit;text-wrap:balance}
.gs-monitor .gsmx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.gs-monitor .gsmx-node{position:relative;padding:14px 10px;border:1px solid var(--gsmx-line);border-radius:10px;text-align:center;background:#fff9}
.gs-monitor .gsmx-node svg{display:block;width:88px;height:88px;margin:0 auto 12px;fill:none;stroke:#203e38;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gs-monitor .gsmx-fill{fill:#aac2af;stroke:none}
.gs-monitor .gsmx-stock .gsmx-node:nth-child(2) .gsmx-fill{fill:none}
.gs-monitor .gsmx-node strong,.gs-monitor .gsmx-node span,.gs-monitor .gsmx-node b{display:block;font-size:16px;line-height:1.6}
.gs-monitor .gsmx-node span{margin-top:4px;color:#51635b}
.gs-monitor .gsmx-node b{margin-top:10px;font-size:16px;font-variant-numeric:tabular-nums}
.gs-monitor .gsmx-node .gsmx-link{position:absolute;left:calc(100% + 1px);top:58px;width:32px;height:2px;margin:0;background:var(--gsmx-line);color:#203e38}
.gs-monitor .gsmx-link:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}
.gs-monitor .gsmx-link i{position:absolute;left:40%;top:-3px;width:8px;height:8px;border-radius:50%;background:#8b6350}
.gs-monitor .gsmx-node .gsmx-operation{height:auto;top:45px;background:none;font-size:24px;line-height:1}
.gs-monitor .gsmx-operation:after{display:none}
.gs-monitor .gsmx-capacity .gsmx-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gs-monitor .gsmx-capacity svg{width:150px;height:86px;max-width:100%}
.gs-monitor .gsmx-figure figcaption{margin-top:17px;font-size:16px;line-height:1.8;color:#51635b}
@media(prefers-reduced-motion:no-preference){
.gs-monitor .gsmx-figure.has-motion .gsmx-node{animation:gsmx-step 10s ease-in-out infinite;animation-play-state:paused}
.gs-monitor .gsmx-figure.has-motion .gsmx-node:nth-child(2){animation-delay:2.5s}
.gs-monitor .gsmx-figure.has-motion .gsmx-node:nth-child(3){animation-delay:5s}
.gs-monitor .gsmx-figure.has-motion .gsmx-link i{animation:gsmx-flow 10s linear infinite;animation-fill-mode:backwards;animation-play-state:paused}
.gs-monitor .gsmx-figure.has-motion .gsmx-node:nth-child(2) .gsmx-link i{animation-delay:2.5s}
.gs-monitor .gsmx-capacity.has-motion .gsmx-node{animation-delay:0s}
.gs-monitor .gsmx-figure.is-playing .gsmx-node,.gs-monitor .gsmx-figure.is-playing .gsmx-link i{animation-play-state:running}
}
@keyframes gsmx-step{0%,28%,100%{background-color:#fff9}7%,18%{background-color:#e2ecdf}}
@keyframes gsmx-flow{0%,13%{left:0;opacity:0}15%{opacity:1}25%{left:calc(100% - 4px);opacity:1}27%,100%{left:calc(100% - 4px);opacity:0}}
@media(max-width:620px){
.gs-monitor .gsmx-figure{padding:20px 16px}
.gs-monitor .gsmx-steps{grid-template-columns:1fr;gap:29px}
.gs-monitor .gsmx-node{display:grid;grid-template-columns:60px minmax(0,1fr);gap:2px 14px;align-items:center;text-align:left;padding:14px}
.gs-monitor .gsmx-node svg{grid-row:1/3;width:60px;height:60px;margin:0}
.gs-monitor .gsmx-node span{margin:0}
.gs-monitor .gsmx-node .gsmx-link{left:calc(50% - 1px);top:calc(100% + 1px);width:2px;height:29px}
.gs-monitor .gsmx-link:after{right:-3px;top:auto;bottom:0;transform:rotate(135deg)}
.gs-monitor .gsmx-link i{left:-3px;top:40%}
.gs-monitor .gsmx-node .gsmx-operation{top:calc(100% + 4px);width:24px;height:24px;left:calc(50% - 12px);text-align:center}
.gs-monitor .gsmx-capacity .gsmx-node{display:block;text-align:center;padding:12px 7px}
.gs-monitor .gsmx-capacity svg{width:140px;height:80px;margin:0 auto 10px}
.gs-monitor .gsmx-capacity .gsmx-node b{font-size:14px}
@media(prefers-reduced-motion:no-preference){.gs-monitor .gsmx-figure.has-motion .gsmx-link i{animation-name:gsmx-flow-mobile}}
}
@keyframes gsmx-flow-mobile{0%,13%{top:0;opacity:0}15%{opacity:1}25%{top:calc(100% - 4px);opacity:1}27%,100%{top:calc(100% - 4px);opacity:0}}
@media(prefers-reduced-motion:reduce){.gs-monitor .gsmx-figure *{animation:none!important;transition:none!important}}
@media print{.gs-monitor .gsmx-figure{break-inside:avoid;background:#fff}.gs-monitor .gsmx-figure *{animation:none!important;transition:none!important}}
