#energy-flow { margin-block:24px 28px; color:#233b30; }
.energy-flow-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-block:0 15px; }
.energy-flow-heading h2 { margin:3px 0 0; font-size:26px; font-weight:650; letter-spacing:-.65px; line-height:1.2; }
.energy-flow-eyebrow { margin:0; color:#8c9b90; font:600 10px/1.4 Arial,sans-serif; letter-spacing:2.1px; }
.energy-flow-tools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.energy-data-status { display:inline-flex; align-items:center; gap:6px; color:#51745e; font-size:11px; }
.energy-data-status i { width:6px; height:6px; border-radius:50%; background:#71927a; }
.energy-data-status.is-stale { color:#805624; }.energy-data-status.is-stale i { background:#b7894e; }
.energy-animation-toggle { border:1px solid #d8dfd3; background:#fff; color:#647467; border-radius:7px; padding:7px 10px; font-family:inherit; font-weight:500; font-size:10px; line-height:1.4; }
.energy-animation-toggle:hover { color:#263d2f; border-color:#9cad9c; }
.energy-animation-toggle:disabled { cursor:default; opacity:.48; }
.energy-flow-stage { padding:20px 23px 13px; border:1px solid #dfe5d9; border-radius:18px; background:linear-gradient(155deg,#fff 14%,#f8faf4 66%,#edf2e7); box-shadow:0 8px 30px #2d432a06; overflow:hidden; }
.energy-total-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; direction:ltr; position:relative; z-index:1; }
.energy-total { display:flex; align-items:center; gap:12px; justify-self:start; }
.energy-total-steam { justify-self:end; }
.energy-total-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#eaf2f4; color:#2b7197; }
.energy-total-steam .energy-total-icon { color:#b46730; background:#fbecd9; }
.energy-total-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.energy-total h3 { margin:0 0 4px; color:#586d60; font-size:11px; font-weight:500; }
.energy-total p { display:flex; align-items:baseline; gap:7px; margin:0; direction:ltr; }
.energy-total strong { font-size:31px; line-height:1.15; font-weight:700; letter-spacing:-1.1px; font-variant-numeric:tabular-nums; color:#28668a; }
.energy-total-steam strong { color:#a65c28; }
.energy-total p span { color:#586d60; font:500 12px Arial,sans-serif; }
.energy-total small { display:block; color:#586d60; font-size:10px; margin-top:4px; }
.energy-storage-label { text-align:center; }.energy-storage-label span { display:block; color:#586d60; font-size:10px; margin-bottom:5px; }.energy-storage-label strong { color:#4d6b50; font:600 14px Arial,sans-serif; letter-spacing:.7px; }
.energy-flow-scene { width:100%; max-width:1260px; margin:-9px auto 7px; direction:ltr; }
.energy-scene-svg { display:block; width:100%; height:auto; overflow:visible; font-family:Arial,sans-serif; }
.energy-scene-compact { display:none; }
.energy-pipe { stroke-width:8; stroke-linejoin:round; stroke-linecap:round; fill:none; }
.energy-pipe-power { stroke:#467f9e; }.energy-pipe-steam { stroke:#c78549; }
.energy-particle { fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:3 32; stroke-dashoffset:0; pointer-events:none; animation:energy-flow-travel 3s linear infinite; }
.energy-particle-power { stroke:#c6e6f2; }.energy-particle-steam { stroke:#fff1ce; animation-duration:3.8s; }
.energy-flow-paused .energy-particle { animation-play-state:paused; }
.energy-flow-caption { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px 22px; color:#586d60; font-size:10px; position:relative; z-index:1; }
.energy-flow-caption span { display:inline-flex; align-items:center; gap:6px; }.energy-flow-caption i { width:18px; height:3px; border-radius:2px; display:inline-block; }.energy-legend-power { background:#467f9e; }.energy-legend-steam { background:#c78549; }
.energy-module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:13px; }
.energy-module-card { background:#fff; border:1px solid #dfe5da; border-radius:13px; padding:16px 18px 10px; }
.energy-module-card header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:17px; }.energy-module-card h3 { margin:0; font-size:13px; font-weight:650; color:#3e5845; }
.energy-module-quality { color:#586d60; font-size:11px; }.energy-module-quality.is-stale { color:#805624; }
.energy-module-charge { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }.energy-module-charge>span { font-size:11px; color:#586d60; }.energy-module-charge strong { font-size:26px; font-weight:650; letter-spacing:-.65px; color:#8a6334; }.energy-module-charge strong small { font-size:12px; margin-inline-start:3px; }
.energy-soc-track { height:6px; margin:7px 0 17px; border:1px solid #e4e9dd; border-radius:3px; background:repeating-linear-gradient(90deg,#edf0e5 0,#edf0e5 calc(10% - 2px),#fff calc(10% - 2px),#fff 10%); overflow:hidden; direction:ltr; }.energy-soc-track i { display:block; height:100%; background:linear-gradient(90deg,#d7a26b,#b8753d); }
.energy-module-card dl { margin:0; }.energy-module-card dl>div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-block:8px; }.energy-module-card dt { font-size:11px; color:#586d60; }.energy-module-card dd { margin:0; color:#48604b; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }.energy-module-card dd span { font:400 11px Arial,sans-serif; color:#586d60; }.energy-module-card dd small { display:inline-block; font-size:11px; font-weight:400; margin-inline-start:5px; color:#805624; }
.energy-module-card [data-energy-metric="mediaTemperature"] { padding-bottom:9px; margin-bottom:10px; border-bottom:1px solid #edf0e8; }.energy-module-card [data-energy-metric="mediaTemperature"] dt { max-width:65%; }.energy-module-card [data-energy-metric="mediaTemperature"] dd { white-space:nowrap; }
.energy-module-alert { font-size:10px; line-height:1.5; color:#805624; margin:9px 0 0; }.energy-module-time { color:#586d60; margin:11px 0 0; padding-top:8px; border-top:1px solid #edf0e8; font-size:11px; }
.energy-flow-method { color:#586d60; font-size:10px; line-height:1.6; margin:10px 3px 0; }
@keyframes energy-flow-travel { to { stroke-dashoffset:-70; } }
@media(max-width:760px) {
  #energy-flow { margin-block:21px; }.energy-flow-heading { align-items:flex-start; gap:12px; }.energy-flow-heading h2 { font-size:22px; }.energy-flow-tools { gap:7px; justify-content:flex-end; }.energy-data-status { font-size:11px; }
  .energy-flow-stage { padding:16px 12px 12px; border-radius:14px; }.energy-total-row { gap:12px; grid-template-columns:1fr 1fr; }.energy-storage-label { display:none; }.energy-total { gap:7px; align-items:flex-start; }.energy-total-icon { width:28px; height:28px; border-radius:8px; margin-top:2px; }.energy-total-icon svg { width:17px; height:17px; }.energy-total h3 { font-size:10px; }.energy-total strong { font-size:25px; }.energy-total small { font-size:11px; }.energy-total p span { font-size:10px; }
  .energy-flow-scene { margin:6px auto 8px; }.energy-scene-wide { display:none; }.energy-scene-compact { display:block; }.energy-flow-caption { font-size:11px; gap:7px 13px; }
  .energy-module-grid { gap:8px; }.energy-module-card { padding:12px 10px 9px; border-radius:10px; }.energy-module-card header { display:block; margin-bottom:11px; }.energy-module-card h3 { font-size:12px; }.energy-module-quality { display:block; font-size:10px; margin-top:4px; }.energy-module-charge { display:block; }.energy-module-charge>span { font-size:11px; }.energy-module-charge strong { display:block; font-size:22px; margin-top:4px; }.energy-soc-track { margin-bottom:11px; }.energy-module-card dl>div { display:block; margin-bottom:11px; }.energy-module-card dt { font-size:11px; margin-bottom:3px; }.energy-module-card dd { font-size:14px; }.energy-module-card dd span { font-size:11px; }.energy-module-time { font-size:10px; line-height:1.5; }.energy-module-alert { font-size:10px; }.energy-flow-method { font-size:11px; }
}
@media(max-width:390px) { .energy-total-icon { display:none; }.energy-module-grid { gap:6px; }.energy-module-card { padding-inline:8px; } }
@media(max-width:760px) { .energy-module-card [data-energy-metric="mediaTemperature"] dt { max-width:none; }.energy-module-card [data-energy-metric="mediaTemperature"] dd small { display:block; margin-inline-start:0; white-space:normal; } }
@media(prefers-reduced-motion:reduce) { .energy-particle { animation:none!important; }.energy-animation-toggle { display:none; } }
@media(forced-colors:active) { .energy-flow-stage,.energy-module-card { border-color:CanvasText; }.energy-particle { display:none; }.energy-soc-track i { background:Highlight; }.energy-data-status i { background:CanvasText; } }