.diagram-card{--flow:#f5a016;color:#fff;background:radial-gradient(ellipse at 50% 25%,#23546766,transparent 65%),#103b53;border:1px solid #365a70;border-radius:20px;padding:26px 28px;box-shadow:0 24px 45px -35px #04243880;min-width:0;overflow:hidden}.diagram-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;color:#b5d5dc;font-size:13px;letter-spacing:.04em;line-height:1.35}.diagram-top>span{max-width:65%;text-transform:uppercase;font-weight:650}.motion-toggle{flex:none;display:flex;align-items:center;gap:7px;background:#254d62;color:#d0e6eb;border:1px solid #4e7184;border-radius:5px;padding:6px 9px;font-size:12px;letter-spacing:0}.motion-toggle:hover{background:#326077}.engineering-diagram{width:100%;height:auto;margin:13px 0 24px;overflow:visible}.engineering-diagram text{font:15px Source,Arial,sans-serif;fill:#cfe3e7}.engineering-diagram .diagram-label{font-size:12px;letter-spacing:1px;fill:#afd3dc}.diagram-description{padding-top:18px;border-top:1px solid #3c6377;min-height:136px}.diagram-description h3{font-family:Source,Arial,sans-serif;font-size:22px;line-height:1.25;letter-spacing:-.01em;color:#fff;margin-bottom:12px}.diagram-description p{font-size:18px;line-height:1.5;color:#c1d4de}.diagram-card .technical-note{font-size:12px;line-height:1.5;color:#9fbcc9;margin:18px 0 0}.stage-controls{display:flex;gap:7px;margin:14px 0 24px;flex-wrap:wrap}.stage-controls button{flex:1;border:1px solid #466e83;background:#153e55;color:#c8dce5;font-size:15px;line-height:1.3;font-weight:600;border-radius:6px;padding:11px 8px;white-space:nowrap}.stage-controls button[aria-pressed=true]{background:#f5a016;border-color:#f5a016;color:#092f4c;font-weight:750}.stage-controls button:hover{border-color:#b2cdd6}.pipe-base{fill:none;stroke:#64818f;stroke-width:32}.flow-line{fill:none;stroke:#86d6e0;stroke-width:9;stroke-dasharray:15 13;animation:waterflow 2s linear infinite}.highlight-ring{fill:none;stroke:#f5a016;stroke-width:2;opacity:0;filter:drop-shadow(0 0 5px #f5a01655);transition:opacity .3s}.fill-card[data-phase=separate] .ring-separate,.fill-card[data-phase=treat] .ring-treat,.fill-card[data-phase=fill] .ring-fill{opacity:1}.fill-card[data-phase=treat] .treatment-grains{animation:grains 2s ease-in-out infinite}.gauge-hand{transform-origin:300px 123px;transition:transform .6s}.fill-card[data-phase=fill] .gauge-hand{transform:rotate(62deg)}.energy-pipe{fill:none;stroke:#f5a01638;stroke-width:10;stroke-linejoin:round;stroke-linecap:round}.energy-flow{fill:none;stroke:#f5a016;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:8 13;animation:waterflow 2s linear infinite}.fan{animation:spin 6s linear infinite}.house-hotspot{cursor:pointer}.house-hotspot circle{fill:#f5a016;stroke:#ffdc99;stroke-width:1;transition:r .2s,fill .2s}.engineering-diagram .house-hotspot text{font-size:16px;font-weight:750;fill:#092f4c;pointer-events:none}.house-hotspot:hover circle,.house-hotspot:focus circle{fill:#ffca69;r:21px}.house-card[data-phase=outdoor] [data-hotspot=outdoor] circle,.house-card[data-phase=inside] [data-hotspot=inside] circle,.house-card[data-phase=distribution] [data-hotspot=distribution] circle{stroke-width:5;stroke:#fff6}.pv-night-flow,.moon{opacity:0}.pv-card[data-phase=evening] .sun,.pv-card[data-phase=evening] .pv-day-flow{opacity:0}.pv-card[data-phase=evening] .moon,.pv-card[data-phase=evening] .pv-night-flow{opacity:1}.pv-card[data-phase=evening] .solar-panels{opacity:.4}.pv-card[data-phase=evening] .battery-level{fill:#f5a016}.pv-card .sun,.pv-card .moon,.pv-card .solar-panels{transition:opacity .5s}.cycle-flow{fill:none;stroke:#f5a016;stroke-width:5;stroke-dasharray:10 15;animation:waterflow 2.2s linear infinite}.callout-line{fill:none;stroke:#93b4c4;stroke-width:1}.frost-drips{opacity:0}.frost-card[data-phase=cold] .frost-drips{opacity:1;animation:drip 1.3s linear infinite}.valve-piston{transition:transform .5s}.frost-card[data-phase=cold] .valve-piston{transform:translateY(-15px)}.frost-card[data-phase=cold] .frost-flow{stroke:#78d5f0;animation-duration:4s}.engineering-diagram .temp-big{font-size:22px;fill:#f4d39c;font-weight:650}.engineering-diagram .temp-small{font-size:15px;fill:#bcd1dd}
.separator-diagram .callout,.separator-diagram .drain-label{font-size:12px;fill:#e4edf1}.separator-diagram .callout.small{font-size:10px}.separator-diagram .magnetic-capture,.separator-diagram .magnet-callout{opacity:.3;transition:opacity .3s}.separator-diagram .draining,.separator-diagram .drain-label{opacity:0}.separator-diagram .incoming-dirt,.separator-diagram .incoming-magnetic{animation:particles 2s ease-in-out infinite}.separator-diagram .settling{animation:settle 2.5s ease-in-out infinite}.separator-diagram .magnet-ring,.separator-diagram .settling{transition:transform .3s,opacity .3s}.separator-card[data-phase=magnet] .magnetic-capture,.separator-card[data-phase=magnet] .magnet-callout{opacity:1}.separator-card[data-phase=magnet] .magnet-ring{filter:drop-shadow(0 0 5px #f5a01688)}.separator-card[data-phase=clean] .magnet-ring{transform:translateX(30px);opacity:.45}.separator-card[data-phase=clean] .incoming-dirt,.separator-card[data-phase=clean] .incoming-magnetic,.separator-card[data-phase=clean] .flow-arrows,.separator-card[data-phase=clean] .settle-callout,.separator-card[data-phase=clean] .settle-arrow,.separator-card[data-phase=clean] .magnet-callout{opacity:.12;animation:none}.separator-card[data-phase=clean] .magnetic-capture{opacity:0}.separator-card[data-phase=clean] .draining,.separator-card[data-phase=clean] .drain-label{opacity:1}.separator-card[data-phase=clean] .draining{animation:drip 1.6s linear infinite}.separator-card[data-phase=clean] .drain-handle{transform:rotate(90deg);transform-origin:240px 239px}
.loop-base{fill:none;stroke:#436778;stroke-width:16;stroke-linejoin:round}.loop-flow{fill:none;stroke:#f5a016;stroke-width:5;stroke-dasharray:9 13;stroke-linejoin:round;animation:waterflow 2s linear infinite}.direction-arrow{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}.tank-body{fill:#264c61;stroke:#9abcc8;stroke-width:2}.tank-line{stroke:#648797;stroke-width:1}.circulation-diagram .tank-label{font-size:14px;fill:#eef5f7}.tap-pipe{fill:none;stroke:#b1cbd4;stroke-width:10;stroke-linejoin:round}.tap-mark{fill:none;stroke:#b1cbd4;stroke-width:4;stroke-linecap:round}.water-drop{fill:#8ad8ef;opacity:.8;animation:drip 2s linear infinite}.sensor-box{fill:#f5a016;stroke:#294e62;stroke-width:2}.sensor-cable{stroke:#b5c9d3;stroke-width:1;stroke-dasharray:4 4;fill:none}.circulation-diagram .sensor-label{font-size:11px;fill:#c2d7e0}.pump-halo{fill:#f5a01612;stroke:#f5a01644;stroke-width:1}.pump-disc{fill:#f5a016;stroke:#092b42;stroke-width:3}.pump-rotor{fill:#173c51;transform-origin:310px 213px;animation:spin 2s linear infinite}.circulation-card[data-phase=away] .loop-flow{stroke:#738d9b;animation:none}.circulation-card[data-phase=away] .water-drop{opacity:0}.circulation-card[data-phase=away] .pump-rotor{animation:none}.circulation-card[data-phase=away] .pump-disc{fill:#a7bdc6}.diagram-card[data-viewport=outside] *{animation-play-state:paused!important}.diagram-card.is-paused *{animation-play-state:paused!important}
@keyframes waterflow{to{stroke-dashoffset:-84}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes particles{0%{transform:translateX(-13px);opacity:.4}50%{opacity:1}100%{transform:translateX(14px);opacity:.4}}@keyframes settle{0%,100%{transform:translateY(-2px)}50%{transform:translateY(6px)}}@keyframes grains{0%,100%{opacity:.5}50%{opacity:1}}@keyframes drip{0%{transform:translateY(-4px);opacity:.2}50%{opacity:1}100%{transform:translateY(9px);opacity:.2}}
@media(max-width:1100px){.diagram-card{padding:23px}.diagram-top{font-size:11px}.diagram-description h3{font-size:21px}.diagram-description p{font-size:17px}.stage-controls button{font-size:14px;padding:10px 6px}}
@media(max-width:800px){.diagram-card{padding:24px}.diagram-top{font-size:13px}.diagram-description p{font-size:19px}.diagram-description{min-height:0}.engineering-diagram{margin-block:18px 24px}.stage-controls button{font-size:16px;padding:12px 9px}}
@media(max-width:460px){.diagram-card{padding:21px 17px;border-radius:14px}.diagram-top{font-size:11px}.engineering-diagram text{font-size:16px}.engineering-diagram .diagram-label{font-size:12px;letter-spacing:0}.stage-controls button{font-size:14px;padding:11px 7px}.diagram-description h3{font-size:22px}.diagram-description p{font-size:18px}.diagram-card .technical-note{font-size:12px}.fill-card .stage-controls{gap:5px}.fill-card .stage-controls button{font-size:12px}.diagram-top>span{max-width:63%}.motion-toggle{font-size:11px}.engineering-diagram .temp-big{font-size:21px}.engineering-diagram .temp-small{font-size:15px}}