.solar-flow-section{scroll-margin-top:110px}
.sf-root{--sf-ink:#294d3d;--sf-wall:#f3f0e4;--sf-side:#dce5dc;--sf-roof:#cad6c8;--sf-ground:#dfe9d2;--sf-edge:#bed0b1;--sf-window:#9dbfba;--sf-chip:#fffffff2;--sf-chip-border:#dce5d5;--sf-grid:#809a88}
.sf-heading{margin-bottom:32px}
.sf-heading p{max-width:340px}
.sf-layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr);gap:28px;align-items:stretch}
.sf-visual{min-width:0;overflow:hidden;border:1px solid #dce5d6;border-radius:18px;background:white}
.sf-stage{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 35% 8%,#fff8cf 0,transparent 48%),linear-gradient(145deg,#f2f7eb,#e9f0e3);transition:background .6s}
.sf-stage-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 26px 0;color:var(--sf-ink)}
.sf-stage-label{font-size:10px;font-weight:600;letter-spacing:.12em;display:flex;align-items:center;gap:8px}
.sf-stage-label i{width:6px;height:6px;border-radius:50%;background:#81a956;box-shadow:0 0 0 4px #7fa55316}
.sf-pause{font-size:10px;display:flex;align-items:center;gap:7px;border:1px solid #80958545;border-radius:30px;min-height:36px;padding:7px 12px;background:#ffffff85;white-space:nowrap}
.sf-pause:hover{background:#fff}
.sf-pause [aria-hidden]{font-size:15px;line-height:1}
.sf-scene{width:100%;height:auto;aspect-ratio:900/565;overflow:visible;color:var(--sf-ink)}
.sf-ground{fill:var(--sf-ground);transition:fill .6s}
.sf-ground-edge{fill:var(--sf-edge);transition:fill .6s}
.sf-house-front{fill:var(--sf-wall);transition:fill .6s}
.sf-house-side{fill:var(--sf-side);transition:fill .6s}
.sf-house-roof{fill:var(--sf-roof);transition:fill .6s}
.sf-window-pane{fill:var(--sf-window);transition:fill .6s}
.sf-shadow{fill:#284a3420}
.sf-sun{transform-origin:88px 65px}
.sf-sun-rays{transform-origin:88px 65px;animation:sf-sun-spin 60s linear infinite}
.sf-moon,.sf-stars,.sf-disconnect{display:none}
.sf-tree-leaves{fill:#748f62;transition:fill .6s}
.sf-chip rect{fill:var(--sf-chip);stroke:var(--sf-chip-border);stroke-width:1}
.sf-chip text{fill:var(--sf-ink);font-size:13px;font-weight:600;letter-spacing:0}
.sf-chip-leader{fill:none;stroke:#88a181;stroke-width:1.2;stroke-dasharray:3 4}
.sf-chip-number{fill:#eaf1df;stroke:#d8e6cb}
.sf-part{cursor:pointer;outline:none}
.sf-part .sf-selection-outline{fill:none;stroke:#8aac49;stroke-width:3;stroke-dasharray:6 5;opacity:0;transition:opacity .2s}
.sf-part:hover .sf-selection-outline,.sf-part:focus-visible .sf-selection-outline,.sf-part.is-selected .sf-selection-outline{opacity:1}
.sf-part:focus-visible .sf-selection-outline{stroke:#e69a23;stroke-width:5}
.sf-device-mark{font-family:'Segoe UI',Arial,sans-serif;font-size:5px;letter-spacing:1px;fill:#46634e}
.sf-wire-bed{fill:none;stroke:#68847145;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.sf-wire-color{fill:none;stroke:#8ba18c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.sf-wire-flow{fill:none;stroke:#f7ffd5;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 6;opacity:0;animation:sf-current 1.6s linear infinite}
.sf-wire.is-on .sf-wire-color{stroke:var(--wire-color);opacity:1;stroke-width:5}
.sf-wire.is-on .sf-wire-flow{opacity:1}
.sf-wire.is-reversed .sf-wire-flow{animation-direction:reverse}
.sf-wire-label{font-size:10px;letter-spacing:.06em;font-weight:700;fill:var(--sf-ink)}
.sf-wire.solar{--wire-color:#d6a13d}
.sf-wire.battery{--wire-color:#6eab50}
.sf-wire.load{--wire-color:#66a8ad}
.sf-wire.grid{--wire-color:#9d9cd4}
.sf-battery-bars rect{fill:#b2d677}
.sf-battery-bars{animation:sf-battery-glow 3s ease-in-out infinite}
.sf-status-bar{margin:0 24px 20px;padding-top:14px;border-top:1px solid #829b752d;display:flex;align-items:flex-start;gap:8px;color:var(--sf-ink);font-size:11px;line-height:1.6}
.sf-status-bar>i{flex-shrink:0;width:6px;height:6px;background:#7c9f4c;border-radius:50%;margin-top:6px}
.sf-legend{display:flex;flex-wrap:wrap;gap:10px 20px;padding:14px 24px;border-top:1px solid #dce5d6;font-size:10px;color:#61735e;background:#fbfcf8}
.sf-legend span{display:flex;align-items:center;gap:6px}
.sf-legend i{display:inline-block;width:13px;height:3px;border-radius:2px}
.sf-legend small{font-size:9px;color:#819078;margin-left:auto}
.sf-readings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:22px 0;background:white;border-top:1px solid #e3eadc}
.sf-reading{padding:0 18px;min-width:0;border-right:1px solid #e3eadc}
.sf-reading:last-child{border:0}
.sf-reading>span{display:block;font-size:10px;color:#6b7c67;margin-bottom:9px;white-space:nowrap}
.sf-reading strong{display:block;font-size:29px;font-weight:550;letter-spacing:-.06em;color:#254b35}
.sf-reading strong small{font-size:11px;font-weight:400;letter-spacing:0;margin-left:3px;color:#6b7c67}
.sf-reading p{font-size:9px;color:#7d8875;margin:6px 0 0;line-height:1.5}
.sf-controls{min-width:0;display:flex;flex-direction:column;padding:4px 0}
.sf-control-label{display:block;font-size:10px;font-weight:650;letter-spacing:.12em;color:var(--muted);margin-bottom:13px}
.sf-modes{display:flex;gap:5px;padding:5px;border:1px solid #dce4d5;background:#eef2e7;border-radius:10px}
.sf-modes button{flex:1;min-height:45px;font-size:11px;line-height:1.4;padding:9px 6px;border-radius:7px;font-weight:600;transition:background .2s,color .2s}
.sf-modes button:hover{background:#e2ead8}
.sf-modes button[aria-pressed=true]{background:var(--green);color:#fff;box-shadow:0 2px 4px #214e371a}
.sf-mobile-modes{display:none}
.sf-reading strong b{font-weight:550}
.sf-mode-copy{padding:26px 0 22px;min-height:190px}
.sf-mode-copy h3{font-size:28px;line-height:1.22;margin:0 0 15px;max-width:350px}
.sf-mode-copy p{font-size:12px;color:var(--muted);line-height:1.85;margin:0}
.sf-components{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:18px}
.sf-components button{display:flex;align-items:center;gap:7px;text-align:left;border:1px solid #dce4d5;border-radius:7px;min-height:44px;padding:10px;font-size:10px;background:#ffffff85}
.sf-components button span{font-size:9px;font-weight:600;color:#879875}
.sf-components button:hover{background:#eaf0df}
.sf-components button[aria-pressed=true]{border-color:#91ae6b;background:#e7eedc;color:var(--green)}
.sf-detail{border-left:2px solid #9eb96c;padding-left:15px;margin-bottom:22px}
.sf-detail h4{font-size:12px;line-height:1.5;margin-bottom:7px;letter-spacing:0;font-weight:650}
.sf-detail p{font-size:11px;color:var(--muted);line-height:1.85;margin:0}
.sf-controls>.text-link{font-size:11px;align-self:flex-start;margin-top:auto}
.sf-footnote{font-size:10px;line-height:1.8;color:#7b8674;margin:18px 0 0;max-width:1040px}
.sf-footnote strong{font-weight:600;color:#596f51}
.sf-paused .sf-wire-flow,.sf-paused .sf-battery-bars,.sf-paused .sf-sun-rays{animation-play-state:paused}
.sf-root[data-mode=night],.sf-root[data-mode=outage]{--sf-ink:#d9e6d4;--sf-wall:#65786b;--sf-side:#4c645a;--sf-roof:#8c9e8d;--sf-ground:#344f41;--sf-edge:#2b4238;--sf-window:#f8d695;--sf-chip:#243f36f2;--sf-chip-border:#5c7965;--sf-grid:#9ab19d}
.sf-root[data-mode=night] .sf-stage,.sf-root[data-mode=outage] .sf-stage{background:radial-gradient(ellipse at 15% 5%,#4d6760 0,transparent 55%),linear-gradient(145deg,#203d35,#162b27)}
.sf-root[data-mode=night] .sf-sun,.sf-root[data-mode=outage] .sf-sun{display:none}
.sf-root[data-mode=night] .sf-moon,.sf-root[data-mode=outage] .sf-moon,.sf-root[data-mode=night] .sf-stars,.sf-root[data-mode=outage] .sf-stars{display:block}
.sf-root[data-mode=night] .sf-pause,.sf-root[data-mode=outage] .sf-pause{background:#ffffff10;border-color:#ffffff30}
.sf-root[data-mode=night] .sf-pause:hover,.sf-root[data-mode=outage] .sf-pause:hover{background:#ffffff20}
.sf-root[data-mode=night] .sf-tree-leaves,.sf-root[data-mode=outage] .sf-tree-leaves{fill:#54724e}
.sf-root[data-mode=outage] .sf-disconnect{display:block}
.sf-root[data-mode=outage] .sf-grid-pole{opacity:.45}
.sf-root[data-mode=outage] .sf-window-secondary{fill:#6c8673}
.sf-root[data-mode=outage] .sf-status-bar>i{background:#edba75}
@keyframes sf-current{to{stroke-dashoffset:-16}}
@keyframes sf-sun-spin{to{transform:rotate(360deg)}}
@keyframes sf-battery-glow{50%{opacity:.55}}
@media(max-width:1190px){.sf-layout{grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:24px}.sf-reading{padding:0 12px}.sf-reading strong{font-size:26px}.sf-reading>span{font-size:9px}.sf-stage-top{padding:18px 18px 0}.sf-status-bar{margin:0 18px 17px}.sf-mode-copy h3{font-size:25px}.sf-mode-copy{min-height:0}}
@media(max-width:970px){.sf-layout{grid-template-columns:minmax(0,1fr)}.sf-mobile-modes{display:flex;margin:15px 18px 0}.sf-modes.sf-desktop-modes,.sf-desktop-mode-label{display:none}.sf-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}.sf-mode-copy{grid-column:1;grid-row:1/4}.sf-control-label.sf-parts-label{grid-column:2;grid-row:1}.sf-components{grid-column:2;grid-row:2}.sf-detail{grid-column:2;grid-row:3;align-self:start}.sf-controls>.text-link{grid-column:1/-1;justify-self:start;margin-top:6px}.sf-mode-copy{padding-top:0;padding-bottom:15px}.sf-controls>.sf-mode-copy h3{max-width:100%}.sf-scene{max-height:520px}.sf-footnote{font-size:10px}.sf-heading p{max-width:100%}}
@media(max-width:720px){.solar-flow-section{scroll-margin-top:90px}.sf-heading{gap:17px;margin-bottom:25px}.sf-heading h2{font-size:35px}.sf-layout{gap:24px}.sf-stage-top{padding:16px 16px 0;gap:8px}.sf-stage-label{font-size:8px;letter-spacing:.09em}.sf-pause{font-size:9px;min-height:36px;padding:6px 10px}.sf-visual{border-radius:12px}.sf-controls{display:block;padding:0}.sf-modes button{font-size:12px;min-height:45px}.sf-mode-copy{padding:22px 0 23px}.sf-mode-copy h3{font-size:28px;max-width:100%}.sf-mode-copy p{font-size:13px}.sf-components button{font-size:12px;min-height:46px;padding:11px 12px}.sf-components button span{font-size:10px}.sf-detail h4{font-size:13px}.sf-detail p{font-size:12px}.sf-components{margin-bottom:18px}.sf-controls>.text-link{font-size:12px;margin-top:4px}.sf-readings{grid-template-columns:1fr 1fr;padding:0}.sf-reading{padding:17px 19px}.sf-reading:nth-child(-n+2){border-bottom:1px solid #e3eadc}.sf-reading:nth-child(2){border-right:0}.sf-reading>span{font-size:11px;margin-bottom:7px}.sf-reading strong{font-size:29px}.sf-reading p{font-size:10px;margin-top:5px}.sf-status-bar{font-size:10px;margin:0 16px 14px;padding-top:11px;line-height:1.6}.sf-legend{padding:12px 16px;gap:10px 17px;font-size:10px}.sf-legend small{width:100%;margin-left:0;font-size:9px}.sf-chip{display:none}.sf-footnote{font-size:10px;line-height:1.9;margin-top:22px}}
@media(prefers-reduced-motion:reduce){.sf-root *{animation:none!important;transition:none!important}.sf-pause:disabled{opacity:.8;cursor:default}}