/* One shared, paused-offscreen sequence. The complete result is the fallback. */
.group-story{--gp-start:translateX(-22px);--gp-end:translateX(22px);margin-top:40px;padding:26px 30px 18px;border:1px solid #73907d66;border-radius:20px;background:#294237;color:#294a3c}
.group-story svg{display:block;flex:none;width:30px;height:30px}.group-story .concept-paper{fill:none}
.gp-captions{display:grid;margin-bottom:28px;color:#f7faef}.gp-caption{grid-area:1/1;display:flex;align-items:baseline;gap:17px;visibility:hidden}.gp-caption[data-gp-caption="2"]{visibility:visible}.gp-caption>span{flex:none;color:#e4b88c;font-size:11px;font-variant-numeric:tabular-nums}.gp-caption>strong{font-size:21px;line-height:1.35;font-weight:550;letter-spacing:-.02em}
.gp-diagram{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,.95fr) 46px minmax(0,1fr);gap:18px;align-items:center}
.gp-source,.gp-pool,.gp-destinations{min-width:0}.gp-source{border:1px solid #b9cbb7;border-radius:14px;background:#fbfcf6;padding:20px}
.gp-company-name{display:flex;align-items:center;gap:9px;font-size:17px}.gp-company-name>strong{min-width:0;overflow-wrap:anywhere;line-height:1.3}.gp-company-name>svg{width:32px;height:32px}
.gp-source-label{display:block;font-size:11px;color:#657e69;margin:18px 0 9px}
.gp-resources,.gp-pool-resources,.gp-arrivals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.gp-resource{display:flex;align-items:center;gap:7px;padding:9px 8px;border:1px solid #c5d2bf;border-radius:8px;background:#e8eee0;font-size:11px;min-width:0}.gp-resource>span{min-width:0;overflow-wrap:anywhere;hyphens:auto}.gp-resource>svg{width:25px;height:25px}
.gp-release{position:relative;display:grid;margin-top:16px;border:1px solid #96b38c;border-radius:8px;background:#e2edd9;overflow:visible;min-height:38px}
.gp-release-action,.gp-release-result{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;font-size:12px;line-height:1.35;font-weight:600;text-align:center}.gp-release-action{visibility:hidden}.gp-release-result>svg{width:22px;height:22px}.gp-release-action>svg{width:18px;height:18px}.gp-cursor{position:absolute;right:10px;bottom:-17px;opacity:0;color:#244438;filter:drop-shadow(0 1px 1px #fff)}.gp-cursor>svg{width:26px;height:26px;fill:#fbfcf6}
.gp-route{position:relative;width:100%;height:46px;display:grid;place-items:center;color:#dfb488}.gp-route-line{width:100%;display:block;opacity:.55}.gp-route-line>svg{width:100%;height:32px}.gp-packet{display:grid;place-items:center;position:absolute;left:50%;top:50%;margin:-17px 0 0 -17px;width:34px;height:34px;background:#f6e5d2;border:1px solid #d2a477;border-radius:50%;opacity:0;color:#56735b}.gp-packet>svg{width:23px;height:23px}
.gp-pool{background:#f6e5d2;border:1px solid #d7b38c;border-radius:14px;padding:21px 17px}
.gp-pool-heading{display:flex;align-items:center;gap:10px}.gp-pool-heading>svg{width:35px;height:35px;color:#9a6c45}.gp-pool-heading>div{display:grid;gap:5px;min-width:0}.gp-pool-heading span{font-size:11px;color:#806746}.gp-pool-heading strong{font-size:19px;line-height:1.3;font-weight:550;overflow-wrap:anywhere}
.gp-pool-resources{margin-top:20px}.gp-pool-resources>.gp-resource{background:#fffaf1;border-color:#ddc7aa}.gp-owner{display:block;text-align:center;font-size:10px;color:#806746;margin-top:13px;line-height:1.4}
.gp-destinations{display:grid;gap:12px}.gp-destination{border:1px solid #bdcfb5;border-radius:12px;background:#f7faef;padding:13px 14px}.gp-destination .gp-company-name{font-size:14px}.gp-destination .gp-company-name>svg{width:26px;height:26px}.gp-signal{display:block;flex:none;margin-left:auto;width:7px;height:7px;border-radius:50%;background:#85a37a}
.gp-arrivals{margin-top:10px}.gp-arrivals>.gp-resource{font-size:10px;padding:6px;gap:5px}.gp-arrivals .gp-resource>svg{width:21px;height:21px}.gp-availability{display:flex;align-items:center;gap:5px;font-size:10px;line-height:1.4;color:#52714e;margin-top:9px}.gp-availability>i{width:5px;height:5px;border-radius:50%;background:#73976a;flex:none}
.gp-example{margin:18px 0 0;color:#b9ccbe;font-size:10px;text-align:center;line-height:1.5}
/* Stage changes keep the geometry fixed; only opacity and transforms animate. */
.group-story[data-flow-state="playing"] .gp-caption{visibility:hidden}
.group-story[data-flow-state="playing"][data-flow-stage="0"] [data-gp-caption="0"],.group-story[data-flow-state="playing"][data-flow-stage="1"] [data-gp-caption="1"],.group-story[data-flow-state="playing"][data-flow-stage="2"] [data-gp-caption="2"]{visibility:visible}
.group-story[data-flow-state="playing"][data-flow-stage="0"] :is(.gp-pool-resources,.gp-owner),.group-story[data-flow-state="playing"]:is([data-flow-stage="0"],[data-flow-stage="1"]) :is(.gp-arrivals,.gp-availability,.gp-signal){opacity:0}
@media(prefers-reduced-motion:no-preference){
 .group-story[data-flow-state="playing"][data-flow-stage="0"] .gp-release{animation:gp-approve 3.3s step-end both}
 .group-story[data-flow-state="playing"][data-flow-stage="0"] .gp-release-action{visibility:visible;animation:gp-action-out 3.3s step-end both}
 .group-story[data-flow-state="playing"][data-flow-stage="0"] .gp-release-result{animation:gp-result-in 3.3s step-end both}
 .group-story[data-flow-state="playing"][data-flow-stage="0"] .gp-cursor{animation:gp-click 3.9s ease both}
 .group-story[data-flow-state="playing"][data-flow-stage="1"] .gp-route-1 .gp-packet,.group-story[data-flow-state="playing"][data-flow-stage="2"] .gp-route-2 .gp-packet{animation:gp-transfer 2s ease-in-out both}
 .group-story[data-flow-state="playing"][data-flow-stage="1"] .gp-route-1 .gp-packet-machine,.group-story[data-flow-state="playing"][data-flow-stage="2"] .gp-route-2 .gp-packet-machine{animation-delay:1.2s}
 .group-story[data-flow-state="playing"][data-flow-stage="1"] .gp-pool-resources>.gp-resource{animation:gp-arrive 1.2s ease 1.5s both}
 .group-story[data-flow-state="playing"][data-flow-stage="1"] .gp-pool-resources>.gp-resource+ .gp-resource{animation-delay:2.7s}
 .group-story[data-flow-state="playing"][data-flow-stage="1"] .gp-owner{animation:gp-arrive 1s ease 3.3s both}
 .group-story[data-flow-state="playing"][data-flow-stage="2"] .gp-arrivals>.gp-resource{animation:gp-arrive 1.2s ease 1.6s both}
 .group-story[data-flow-state="playing"][data-flow-stage="2"] .gp-arrivals>.gp-resource+ .gp-resource{animation-delay:2.8s}
 .group-story[data-flow-state="playing"][data-flow-stage="2"] .gp-destination:nth-child(2) .gp-arrivals>.gp-resource{animation-delay:2.2s}
 .group-story[data-flow-state="playing"][data-flow-stage="2"] .gp-destination:nth-child(2) .gp-arrivals>.gp-resource+ .gp-resource{animation-delay:3.4s}
 .group-story[data-flow-state="playing"][data-flow-stage="2"] .gp-availability{animation:gp-arrive 1s ease 3.7s both}
 .group-story[data-flow-state="playing"][data-flow-stage="2"] .gp-signal{animation:gp-signal 2s ease 3.5s both}
 .group-story[data-flow-paused] *{animation-play-state:paused!important}
}
@keyframes gp-approve{0%{background:#f5bb87;border-color:#d8a071}100%{background:#e2edd9;border-color:#96b38c}}
@keyframes gp-action-out{0%{opacity:1}100%{opacity:0}}
@keyframes gp-result-in{0%{opacity:0}100%{opacity:1}}
@keyframes gp-click{0%,35%{opacity:0;transform:translate(14px,10px)}60%,78%{opacity:1;transform:translate(0,0)}84%{opacity:1;transform:scale(.83)}90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translate(3px,5px)}}
@keyframes gp-transfer{0%{opacity:0;transform:var(--gp-start) scale(.8)}20%,75%{opacity:1}100%{opacity:0;transform:var(--gp-end) scale(.9)}}
@keyframes gp-arrive{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gp-signal{0%{opacity:0;transform:scale(.7)}30%,65%{opacity:1;transform:scale(1.5)}45%,100%{opacity:1;transform:scale(1)}}
@media(max-width:1050px){.group-story{padding:22px}.gp-diagram{gap:12px;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr)}.gp-source{padding:15px}.gp-pool{padding:18px 13px}.gp-company-name{font-size:15px}.gp-resources,.gp-pool-resources,.gp-arrivals{grid-template-columns:1fr}.gp-pool-heading strong{font-size:17px}.gp-destination{padding:12px}.gp-captions{margin-bottom:22px}.gp-caption>strong{font-size:19px}}
@media(max-width:760px){
 .group-story{--gp-start:translateY(-18px);--gp-end:translateY(18px);padding:17px;margin-top:28px;max-width:480px;margin-inline:auto}
 .gp-caption{gap:10px}.gp-caption>strong{font-size:16px;line-height:1.4}.gp-caption>span{font-size:9px;line-height:1.6}.gp-captions{margin-bottom:18px}
 .gp-diagram{grid-template-columns:minmax(0,1fr);gap:7px}.gp-source{padding:12px 14px}.gp-company-name{font-size:15px;gap:8px}.gp-company-name>svg{width:25px;height:25px}.gp-source-label{margin:9px 0 7px;font-size:10px}
 .gp-resources,.gp-pool-resources,.gp-arrivals{grid-template-columns:repeat(2,minmax(0,1fr))}.gp-resource{font-size:10px;padding:6px;gap:5px}.gp-resource>svg{width:21px;height:21px}
 .gp-release{margin-top:9px;min-height:31px}.gp-release-action,.gp-release-result{font-size:10px;padding:6px}.gp-release-result>svg{width:18px;height:18px}.gp-cursor{bottom:-10px}.gp-cursor>svg{width:22px;height:22px}
 .gp-route{height:28px;width:40px;justify-self:center}.gp-route-line{width:28px;transform:rotate(90deg)}.gp-route-line>svg{height:28px}.gp-packet{width:28px;height:28px;margin:-14px 0 0 -14px}.gp-packet>svg{width:20px;height:20px}
 .gp-pool{padding:11px 14px}.gp-pool-heading{gap:9px}.gp-pool-heading>svg{width:27px;height:27px}.gp-pool-heading>div{gap:2px}.gp-pool-heading span{font-size:9px}.gp-pool-heading strong{font-size:16px}.gp-pool-resources{margin-top:9px}.gp-owner{font-size:9px;margin-top:7px;text-align:left}
 .gp-destinations{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gp-destination{padding:10px}.gp-destination .gp-company-name{display:grid;grid-template-columns:1fr auto;font-size:11px;gap:5px}.gp-destination .gp-company-name>strong{grid-column:1/-1;grid-row:2}.gp-destination .gp-company-name>svg{width:21px;height:21px}.gp-signal{grid-column:2;grid-row:1;width:5px;height:5px}.gp-arrivals{grid-template-columns:1fr;gap:5px;margin-top:8px}.gp-arrivals>.gp-resource{font-size:9px;padding:4px;gap:5px}.gp-arrivals .gp-resource>svg{width:18px;height:18px}.gp-availability{font-size:9px;margin-top:8px;gap:4px}.gp-example{margin-top:13px;font-size:9px}
}