/* Arrow colors sampled from 02-indoor-air-v5-960.webp. */
#try-ventilation{scroll-margin-top:80px}
#try-ventilation .hv{--flow-blue:#20a8fc;--flow-orange:#fb6f20;--brand:var(--flow-blue);--brand-pool:var(--flow-blue);--air-exhaust:var(--flow-orange);--window-control:var(--flow-orange)}
.hv .hv-control-map{z-index:2;overflow:visible}
.hv .hv-switch[data-control="erv"]{--hv-control:var(--flow-blue)}
.hv .hv-switch[data-control="window"]{--hv-control:var(--flow-orange)}
.hv .hv-region{pointer-events:none;cursor:pointer;outline:none!important;box-shadow:none!important}
.hv-region .hv-outline{fill:color-mix(in srgb,var(--hv-control) 7%,transparent);stroke:var(--hv-control);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;pointer-events:none;opacity:1;transition:fill .2s,stroke-width .2s,filter .2s}
.hv-region .hv-outline-halo{fill:none;stroke:#fff;stroke-width:6;opacity:.7;pointer-events:none}
.hv-region .hv-outline>*,.hv-region .hv-outline-halo>*{vector-effect:non-scaling-stroke}
.hv-region .hv-hit{fill:transparent;stroke:transparent;stroke-width:44;pointer-events:all}
.hv-region .hv-hit>*{pointer-events:all}
.hv-region[data-control="window"] .hv-hit{stroke-width:60}
.hv-region.hv-linked .hv-outline,.hv-region:focus-visible .hv-outline{stroke-width:4.5;fill:color-mix(in srgb,var(--hv-control) 15%,transparent);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--hv-control) 38%,transparent))}
.hv-region[aria-checked="true"] .hv-outline{stroke-width:3.8;fill:color-mix(in srgb,var(--hv-control) 11%,transparent)}
.hv-region.hv-linked[aria-checked="true"] .hv-outline{stroke-width:4.5;fill:color-mix(in srgb,var(--hv-control) 17%,transparent)}
.hv .hv-modes .hv-switch{border-color:var(--hv-control);border-top-width:4px;background:color-mix(in srgb,var(--hv-control) 8%,var(--paper));transition:background .2s,box-shadow .2s,outline-color .2s}
.hv .hv-modes .hv-switch[aria-checked="true"]{background:color-mix(in srgb,var(--hv-control) 15%,var(--paper))}
.hv .hv-modes .hv-switch.hv-linked{background:color-mix(in srgb,var(--hv-control) 23%,var(--paper));box-shadow:0 0 0 5px color-mix(in srgb,var(--hv-control) 18%,transparent);outline-offset:2px}
.hv .hv-pair{background:var(--hv-control);color:var(--ink)}
.hv .hv-modes .st,.hv .hv-modes [aria-checked="true"] .st{color:var(--ink-soft)}
.hv .hv-switch[aria-checked="true"] .sw::after{background:var(--ink)}
@media(max-width:374px){.hv .hv-control-label{font-size:12px}.hv .hv-modes .hv-switch{gap:4px;padding:8px 6px}.hv-region .hv-outline{stroke-width:2.5}.hv-region.hv-linked .hv-outline{stroke-width:3.5}}
@media(prefers-reduced-motion:reduce){.hv-region .hv-outline{transition:none}}
/* Same blue supply and orange return as the adjacent illustrations; sand gold for window airflow. */
#try-ventilation .hv{--flow-window:#b29a60;--window-control:var(--flow-window)}
#try-ventilation #ribbonWindow stop{stop-color:var(--flow-window)}
#try-ventilation .hv-switch[data-control="window"]{--hv-control:var(--flow-window)}
#try-ventilation .hv-pair{color:var(--ink)}
#try-ventilation #hvSvg .ribbon-flow,#try-ventilation #hvSvg .ribbon-window{animation:none;transition:opacity .7s ease}
#try-ventilation #hvSvg .air-ribbon{stroke:none;transform-box:view-box;filter:drop-shadow(0 1px 1px #ffffff40)}
#try-ventilation #hvSvg[data-erv="on"] .ribbon-supply .air-ribbon{animation:ribbon-down 1.9s linear infinite}
#try-ventilation #hvSvg[data-erv="on"] .ribbon-return .air-ribbon{animation:ribbon-up 1.9s linear infinite}
#try-ventilation #hvSvg[data-win="open"] .ribbon-window .air-ribbon{animation:ribbon-in 1.9s linear infinite}
#try-ventilation #hvSvg .air-ribbon.ribbon-second{animation-delay:-.95s}
#try-ventilation #hvSvg[data-erv="on"] .ribbon-duct-travel{animation:ribbon-duct-flow 1.5s linear infinite}
#try-ventilation #hvSvg .plume{opacity:0;animation:none}
@keyframes ribbon-down{0%{transform:translate(3px,-9px);opacity:.12}20%{opacity:1}75%{opacity:1}100%{transform:translate(-9px,24px);opacity:.12}}
@keyframes ribbon-up{0%{transform:translate(0,16px);opacity:.12}20%{opacity:1}75%{opacity:1}100%{transform:translate(0,-15px);opacity:.12}}
@keyframes ribbon-in{0%{transform:translate(-10px,-2px);opacity:.12}20%{opacity:1}75%{opacity:1}100%{transform:translate(30px,6px);opacity:.12}}
@keyframes ribbon-duct-flow{to{stroke-dashoffset:-92}}
@media(prefers-reduced-motion:reduce){#try-ventilation #hvSvg .air-ribbon,#try-ventilation #hvSvg .ribbon-duct-travel{animation:none!important;transform:none;opacity:1}}

/* Controls have their own palette; airflow colors remain unchanged. */
#try-ventilation .hv{--outline-window:#EA580C;--outline-erv:#2563EB}
#try-ventilation .hv-switch[data-control="window"]{--hv-control:var(--outline-window)}
#try-ventilation .hv-switch[data-control="erv"]{--hv-control:var(--outline-erv)}
#try-ventilation .hv-pair{color:#fff}

/* The blue house fades over the gray house when ventilation is on. */
#try-ventilation .hv-home-image-on{opacity:0;pointer-events:none;transition:opacity .7s ease}
#try-ventilation .hv-scene:has(#hvSvg[data-erv="on"]) .hv-home-image-on{opacity:1}
@media(prefers-reduced-motion:reduce){#try-ventilation .hv-home-image-on{transition:none}}

/* Winter cues follow the same calendar state as temperatures and explanatory text. */
#try-ventilation .hv-scene[data-season="winter"] #ribbonWindow stop{stop-color:#76bddf}
#try-ventilation .hv:has(.hv-scene[data-season="winter"]){--flow-window:#76bddf}