html body .area-page .energy-animation{padding:0;display:block;position:relative;min-height:0;aspect-ratio:4/3;background:radial-gradient(ellipse at 50% 70%,#edf4f8,#fff 75%)}
.energy-animation svg{width:100%;height:100%;display:block}
.energy-piece polygon{fill:currentColor;fill-opacity:.7}
.energy-piece polygon:first-child{fill-opacity:.4}
.energy-piece polygon:nth-child(2){fill-opacity:.85}
.energy-piece{color:#83c6ea;animation:energy-three-state 12s ease-in-out infinite}
.energy-module-blue{--energy-hybrid-color:#83c6ea}
.energy-module-yellow{--energy-hybrid-color:#ffd54b}
@keyframes energy-three-state{
  0%,25%{color:#83c6ea}
  33.333%,58.333%{color:#ffd54b}
  66.667%,91.667%{color:var(--energy-hybrid-color,#83c6ea)}
  100%{color:#83c6ea}
}
.energy-legend{position:absolute;bottom:22px;left:0;right:0;height:34px;display:block;text-align:center;font:700 clamp(16px,1.5vw,24px)/1.3 'Segoe UI',Arial,sans-serif;letter-spacing:.12em}
.energy-legend span{position:absolute;left:0;right:0;opacity:0}
.energy-legend span:first-child{color:#176484;animation:energy-label-gas 12s ease-in-out infinite}
.energy-legend span:nth-child(2){color:#916e00;animation:energy-label-electric 12s ease-in-out infinite}
.energy-legend span:nth-child(3){color:#806000;animation:energy-label-hybrid 12s ease-in-out infinite}
@keyframes energy-label-gas{0%,25%{opacity:1}33.333%,100%{opacity:0}}
@keyframes energy-label-electric{0%,25%{opacity:0}33.333%,58.333%{opacity:1}66.667%,100%{opacity:0}}
@keyframes energy-label-hybrid{0%,58.333%{opacity:0}66.667%,91.667%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.energy-piece,.energy-legend span{animation:none}.energy-piece{color:#83c6ea}.energy-legend span:first-child{opacity:1}}