.energy-story{--flow-green:#2ecc71;--flow-blue:#3b82f6;--flow-ink:#20324a;margin:52px 0 64px;border:1px solid #dfe5eb;border-radius:18px;background:#f9fafb;color:var(--flow-ink);overflow:hidden;scroll-margin-top:100px}
.energy-heading{padding:30px 36px 22px;border-bottom:1px solid #e4e9ee;background:#fff}
.ems-section .energy-heading .eyebrow{color:#547082}
.energy-heading h3{font-size:clamp(25px,3vw,38px);margin:10px 0;color:#172b43}
.energy-subtitle{color:#617184;font-size:15px}
.energy-stage{display:grid;grid-template-columns:1fr;align-items:center}
.energy-diagram-wrap{padding:24px 12px;background:#fff;min-width:0}
.energy-diagram{display:block;width:100%;height:auto;min-width:920px;margin:auto}
.energy-branch,.energy-ac-bus{stroke:#cbd5e1;stroke-width:2;fill:none}
.energy-ac-bus{stroke-width:3}
.energy-story.energy-ready .energy-ac-bus{stroke:var(--flow-green)}
.energy-bus-label{font:13px var(--font);fill:#758497;letter-spacing:1px}
.energy-node{color:#718198}
.energy-node use{transition:color .5s}
.energy-node-label{font:600 19px var(--font);fill:#263e59}
.energy-route{opacity:0;color:var(--flow-green)}
.energy-route path{stroke:currentColor;stroke-width:1.5;stroke-opacity:.4;fill:none}
.energy-route.route-charge{color:var(--flow-blue)}
.energy-particle{animation:energy-travel 2s linear infinite;animation-play-state:paused}
.energy-particle-second{animation-delay:-1s}
.energy-playback-state{font-size:12px;color:#40556b}
.energy-node-mode,.energy-pv-condition{font:14px var(--font);fill:#64748b;display:none}
.energy-node[data-mode=off] .mode-off,.energy-node[data-mode=supply] .mode-supply,.energy-node[data-mode=charge] .mode-charge,.energy-node[data-mode=discharge] .mode-discharge{display:block}
.energy-story:not(.energy-ready) .energy-node-mode{display:none}
.energy-diagram-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.energy-scroll-hint{display:none;font-size:12px;color:#64748b;margin:0 12px 12px}
.energy-narration{padding:8px 36px 26px;min-width:0;border-top:1px solid #e4e9ee}
.energy-scene{padding:18px 0}
.energy-scene-heading{display:flex;gap:12px;align-items:baseline}
.energy-number{font-size:13px;font-weight:600;color:var(--flow-green);font-variant-numeric:tabular-nums}
.energy-scene h4{font-size:clamp(20px,2vw,28px);font-weight:500;line-height:1.2;letter-spacing:-.025em;margin:0}
.energy-scene p{font-size:15px;line-height:1.75;margin:18px 0;color:#5e6d7c}
.energy-scene .energy-route-label{font-size:12px;color:#246143;background:#e7f3ec;border-radius:5px;padding:7px 10px;display:inline-block;margin:0}
.energy-controls{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;border-top:1px solid #e0e6ec;gap:20px;background:#fff}
.energy-steps,.energy-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.energy-controls button{color:#40556b;background:transparent;border:1px solid #d0dae3;border-radius:5px;min-height:42px;padding:8px 14px;font-size:13px}
.energy-steps button{position:relative;overflow:hidden;font-variant-numeric:tabular-nums}
.energy-steps button[aria-pressed=true]{color:#17683f;background:#eaf7ef;border-color:#7dbb98}
.energy-time{font-size:11px;letter-spacing:1px;color:#718094;margin-right:8px}
.energy-disclaimer{padding:0 30px 20px;background:#fff;font-size:11px;line-height:1.7;color:#778492}
.energy-story.energy-ready .energy-scene{display:none}
.energy-story.energy-ready .energy-scene.active{display:block}
.energy-story.energy-ready .energy-narration{min-height:220px;display:flex;align-items:center}
.energy-story.energy-running .energy-particle{animation-play-state:running}
.energy-route[data-active=true]{opacity:1}
.energy-node[data-mode=supply],.energy-node[data-mode=discharge]{color:var(--flow-green)}
.energy-node[data-mode=charge]{color:var(--flow-blue)}
.energy-legend{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;padding:12px;font-size:12px;color:#617184}
.energy-legend span:before{content:"";display:inline-block;width:16px;height:3px;margin:0 7px 3px 0;background:#718198}
.energy-legend .legend-supply:before{background:var(--flow-green)}
.energy-legend .legend-charge:before{background:var(--flow-blue)}
@keyframes energy-travel{to{offset-distance:100%}}
@media(max-width:1100px){.energy-scroll-hint{display:block}.energy-stage{grid-template-columns:1fr}.energy-narration{padding:4px 30px 24px}.energy-story.energy-ready .energy-narration{min-height:190px}.energy-scene{padding:0}.energy-diagram-wrap{padding:18px 24px}.energy-scene p{margin:12px 0}}
@media(max-width:600px){.energy-story{border-radius:12px;margin:32px 0 44px}.energy-heading{padding:22px 20px 18px}.energy-diagram-wrap{padding:24px 2px}.energy-diagram{min-height:195px}.energy-narration{padding:6px 20px 22px}.energy-story.energy-ready .energy-narration{min-height:250px}.energy-controls{padding:16px 20px;flex-direction:column;align-items:stretch;gap:14px}.energy-actions{justify-content:flex-end}.energy-steps{justify-content:space-between}.energy-steps button{flex:1;padding:8px}.energy-disclaimer{padding:0 20px 18px}.energy-scene h4{font-size:23px}}
@media(prefers-reduced-motion:reduce){.energy-story:not(.energy-motion-allowed) .energy-particle{animation:none!important;display:none}.energy-node use{transition:none}}

@media(prefers-reduced-motion:reduce){.energy-story.energy-motion-allowed .energy-particle{animation:energy-travel 2s linear infinite!important;animation-play-state:paused!important}.energy-story.energy-motion-allowed.energy-running .energy-particle{animation-play-state:running!important}.energy-story.energy-motion-allowed .energy-particle-second{animation-delay:-1s!important}}

.energy-story.energy-ready[data-pv-condition=surplus] .condition-surplus,.energy-story.energy-ready[data-pv-condition=partial] .condition-partial,.energy-story.energy-ready[data-pv-condition=unavailable] .condition-unavailable{display:block}