.how-explainer{display:block}.how-explainer .how-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:34px}.how-explainer .how-grid article:first-child{border-top:1px solid var(--line);padding-top:20px}.how-explainer .how-grid article:first-child .step-number{top:24px}
.energy-flow{background:#fff;border-color:#d5dfd9}.energy-flow .animation-title{padding:24px 30px;flex-direction:row;align-items:center}.energy-flow .animation-title>span{font-size:14px}
.flow-panel{--scene-ink:#f2f7ff;--scene-muted:#c2d4ea;--flow:#bef36a;background:#0b2448;color:var(--scene-ink);transition:background .8s,color .8s}[data-phase="day"] .flow-panel{--scene-ink:#16392c;--scene-muted:#456356;--flow:#086cab;background:#e9f1f6}
.flow-intro{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:32px 38px 0;min-height:158px}.flow-stage-copy{max-width:750px}.flow-eyebrow{font-size:14px;font-weight:800;letter-spacing:1.3px;color:var(--scene-muted);margin:0 0 12px}.flow-stage-copy h4{font-size:clamp(25px,3vw,36px);line-height:1.25;letter-spacing:-.8px;color:var(--scene-ink);margin:0}.flow-rate{flex:0 0 auto;border-left:1px solid #8babc455;padding-left:28px;min-width:190px}.flow-rate span,.flow-rate small{display:block;font-size:14px;color:var(--scene-muted);line-height:1.6}.flow-rate strong{font-size:38px;font-weight:700;letter-spacing:-1.5px;color:var(--scene-ink);line-height:1.4}.flow-rate strong small{display:inline;font-size:17px;font-weight:500;letter-spacing:0;margin-left:4px}
.energy-scene{display:block;width:100%;height:auto;aspect-ratio:1400/720;overflow:hidden}.energy-house{transform:translate(340px,0) scale(.75)}.house-night,.house-day{transition:opacity 1s}.house-day{opacity:0}[data-phase="day"] .house-day{opacity:1}[data-phase="day"] .house-night{opacity:0}.grid-equipment{transform:translate(48px,266px);filter:drop-shadow(0 12px 12px #03142545);transition:opacity .8s}[data-phase="day"] .grid-equipment{opacity:.62}.scene-label{font-family:Manrope,Arial,sans-serif;font-size:28px;font-weight:750;fill:var(--scene-ink)}.scene-sub-label{font-family:Manrope,Arial,sans-serif;font-size:22px;fill:var(--scene-muted)}.grid-label{transform:translate(190px,218px)}.home-label{transform:translate(587px,548px)}
.flow-line{fill:none;stroke-linecap:round;stroke-linejoin:round}.flow-track{stroke:#9abbd2;stroke-width:5;opacity:.27}.flow-night,.flow-day{transition:opacity .5s}.flow-day{opacity:0}[data-phase="day"] .flow-night{opacity:0}[data-phase="day"] .flow-day{opacity:1}.flow-glow{stroke:var(--flow);stroke-width:15;opacity:.14}.flow-solid{stroke:var(--flow);stroke-width:5}.flow-current{stroke:var(--flow);stroke-width:10;stroke-dasharray:1 38;animation:energy-current 1.25s linear infinite;animation-play-state:paused}.flow-arrow{fill:var(--flow)}.battery-halo{fill:#bef36a12;stroke:var(--flow);stroke-width:3;rx:7}.battery-halo-wide{transform:translate(904px,344px)}.battery-callout{transform:translate(1040px,445px)}.battery-callout>rect:first-child{fill:#102c47;stroke:#a9c3d64d;stroke-width:1}[data-phase="day"] .battery-callout>rect:first-child{fill:#ffffffed;stroke:#32654833}.battery-icon-shell{fill:none;stroke:var(--flow);stroke-width:3}.battery-icon-fill{fill:var(--flow);transform:scaleY(var(--battery-fill,.25));transform-origin:26px 72px}.battery-leader{stroke:var(--scene-muted);stroke-width:2;fill:none;opacity:.7}.flow-small-screen{display:none}
.flow-route{display:flex;align-items:center;justify-content:center;gap:18px;padding:0 24px 26px;font-size:18px;font-weight:650;color:var(--scene-ink);text-align:center}.flow-route strong{color:var(--flow)}.flow-route-arrow{font-size:27px;font-weight:400}.flow-controls{display:flex;align-items:center;gap:10px;padding:20px 28px;border-bottom:1px solid #dfe7e0;background:#fff}.flow-controls[hidden]{display:none}.flow-phase-button,.flow-play{min-height:48px;min-width:100px;border:1px solid #c9d7cc;border-radius:6px;background:#fff;color:#264435;padding:12px 18px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}.flow-phase-button[aria-pressed="true"]{background:#173d31;color:#fff;border-color:#173d31}.flow-play{margin-left:auto;min-width:154px}.flow-phase-button:hover,.flow-play:hover{border-color:#315f3c}.flow-phase-button:focus-visible,.flow-play:focus-visible{outline:3px solid #688f38;outline-offset:3px}.flow-timeline{height:4px;background:#e0e9dd;overflow:hidden;flex:1;margin:0 18px}.flow-timeline span{display:block;height:100%;width:calc(var(--phase-progress,0)*100%);background:#5c893f}.energy-flow figcaption{font-size:14px;line-height:1.75;padding:20px 28px}[data-running="true"] .flow-current{animation-play-state:running}@keyframes energy-current{to{stroke-dashoffset:-78}}
@media(max-width:850px){.flow-intro{padding:26px 25px 0;min-height:155px}.flow-rate{min-width:155px;padding-left:20px}.flow-rate strong{font-size:32px}.flow-stage-copy h4{font-size:28px}.how-explainer .how-grid{gap:24px}.how-explainer .how-grid h3{font-size:22px}}
@media(max-width:600px){.energy-flow .animation-title{padding:20px;display:block}.energy-flow .animation-title h3{font-size:21px}.energy-flow .animation-title>span{display:block;margin-top:9px;font-size:12px}.flow-intro{display:block;padding:24px 22px 0;min-height:255px}.flow-stage-copy h4{font-size:26px;letter-spacing:-.5px}.flow-eyebrow{font-size:13px;margin-bottom:10px}.flow-rate{border-left:0;padding:18px 0 0;min-width:0}.flow-rate>span{display:inline;margin-right:8px;font-size:13px}.flow-rate strong{display:inline;font-size:30px}.flow-rate strong small{font-size:15px}.flow-rate>small{font-size:13px}.energy-scene{aspect-ratio:780/820}.energy-house{transform:translate(-10px,-8px) scale(.56)}.grid-equipment{transform:translate(45px,507px) scale(1.05)}.grid-label{transform:translate(193px,755px)}.home-label{transform:translate(168px,423px)}.scene-label{font-size:32px}.scene-sub-label{font-size:27px}.flow-wide-screen{display:none}.flow-small-screen{display:initial}.battery-callout{transform:translate(490px,442px)}.battery-callout>rect:first-child{width:275px}.flow-route{font-size:16px;gap:10px;padding:0 18px 24px}.flow-route-arrow{font-size:24px}.flow-controls{padding:16px;gap:8px;flex-wrap:wrap}.flow-phase-button{flex:1;min-width:0;padding:10px 12px}.flow-play{flex:1;min-width:130px;padding:10px 12px}.flow-timeline{display:none}.energy-flow figcaption{padding:20px;font-size:14px}.how-explainer .how-grid{grid-template-columns:1fr;gap:22px}}
@media(prefers-reduced-motion:reduce){.flow-current{animation:none!important}.flow-panel,.house-night,.house-day,.flow-night,.flow-day,.grid-equipment{transition:none}}

[data-running="false"] .flow-panel,[data-running="false"] .house-night,[data-running="false"] .house-day,[data-running="false"] .flow-night,[data-running="false"] .flow-day{transition:none}

[data-phase="day"] .flow-glow{stroke:#fff;stroke-width:16;opacity:.9}