/* Sunstorm Air "See it in a home" explorer (Claude, October 6 2026). Scoped to .ax. */
.ax{background:#fff;color:var(--air-ink,#18384b)}
.ax .ax-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:28px}
.ax .ax-head p:last-child{color:var(--air-muted,#476577);margin:0;max-width:520px}
.ax .ax-head h2{margin-bottom:0}
.ax-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ax-tabs button{font:700 14px/1.2 Montserrat,Arial,sans-serif;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--air-line,#b9d5e2);background:#fff;color:#215c78;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ax-tabs button:hover{border-color:#227598;background:#f4fafd}
.ax-tabs button[aria-selected="true"]{background:#18384b;border-color:#18384b;color:#fff}
.ax-tabs button:focus-visible{outline:3px solid #176589;outline-offset:3px}
.ax-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:start}
.ax-figure{margin:0;border:1px solid var(--air-line,#b9d5e2);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -40px rgba(24,56,75,.6)}
.ax-svg{display:block;width:100%;height:auto}
.ax figcaption{padding:12px 18px 16px;border-top:1px solid #e3eef4;display:grid;gap:8px}
.ax-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font:600 13px/1.4 OpenSans,Arial,sans-serif;color:#9aaab5}
.ax-legend li{display:flex;align-items:center;gap:7px;transition:color .3s}
.ax-legend li::before{content:attr(data-m);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#227598;color:#fff;font:800 11px/1 Montserrat,Arial,sans-serif;transition:background .3s}
.ax-legend{color:#18384b}.ax-js .ax-legend{color:#9aaab5}.ax-js .ax-legend li::before{background:#d8e3ea}.ax-legend li.on{color:#18384b}.ax-js .ax-legend li.on::before{background:#227598}
.ax-note{font:600 12px/1.4 OpenSans,Arial,sans-serif;color:var(--air-muted,#476577)}
.ax-panels{min-width:0}
.ax-panel{border-radius:20px;background:#f0f7fa;padding:24px 24px 20px}
.ax-panel+.ax-panel{margin-top:14px}
.ax-panel[hidden]{display:none}
.ax-kicker{font:800 11px/1.3 Montserrat,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#226886;margin:0 0 10px}
.ax-panel h3{font-size:22px;letter-spacing:-.02em;margin:0 0 10px}
.ax-panel>p{color:#2f4b5c;margin:0 0 16px}
.ax .ax-check-title{font:700 13px/1.4 Montserrat,Arial,sans-serif;color:#18384b;margin:0 0 8px}
.ax-checks{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.ax-checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.ax-checks li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7 9.6 3.4' fill='none' stroke='%23227598' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 0 0 1px #b9d5e2}
.ax-links{display:flex;flex-wrap:wrap;gap:0 22px}

/* drawing states: every part dims unless the chosen situation uses it */
.ax-svg .part,.ax-svg .tint,.ax-svg .m{transition:opacity .45s ease}
.ax-js .ax-svg .part{opacity:.28}
.ax-svg .tint,.ax-svg .flow,.ax-svg .puff,.ax-svg .sun,.ax-svg .drops,.ax-js .ax-svg .sun,.ax-js .ax-svg .drops{opacity:0}
.ax-svg .m circle{fill:#227598;transition:fill .3s}.ax-js .ax-svg .m circle{fill:#d8e3ea}.ax-svg .m text{fill:#fff}
.ax-svg .m.on circle{fill:#227598}
.ax-svg .part.lit{opacity:1}
.ax-svg .ins-thin{transition:fill .4s,stroke .4s}

.ax-body[data-scene="whole"] .t-main,.ax-body[data-scene="older"] .t-main{opacity:1}
.ax-body[data-scene="whole"] .flow.f-main,.ax-body[data-scene="whole"] .flow.f-bed,.ax-body[data-scene="whole"] .flow.f-ret,
.ax-body[data-scene="older"] .flow.f-main,.ax-body[data-scene="older"] .flow.f-bed{opacity:1}
.ax-body[data-scene="whole"] .puff.p-live,.ax-body[data-scene="whole"] .puff.p-bed{opacity:1}
.ax-body[data-scene="hot"] .t-bed,.ax-body[data-scene="hot"] .sun{opacity:1}
.ax-body[data-scene="hot"] .flow.f-main,.ax-body[data-scene="hot"] .puff.p-live{opacity:.9}
.ax-body[data-scene="hot"] .flow.f-bed{opacity:.55;stroke-dasharray:2 26}
.ax-body[data-scene="hot"] .puff.p-bed{opacity:.25}
.ax-body[data-scene="hot"] .ins-thin{fill:#ff9a57;stroke:#e5672b}
.ax-body[data-scene="humid"] .drops{opacity:1}
.ax-body[data-scene="space"] .t-sun,.ax-body[data-scene="space"] .flow.f-mini,.ax-body[data-scene="space"] .puff.p-mini{opacity:1}

@media (prefers-reduced-motion:no-preference){
 .ax-svg .flow{stroke-dasharray:2 16;animation:ax-flow 1.1s linear infinite}
 .ax-svg .flow.f-ret{stroke-dasharray:4 7;animation-duration:1.6s}
 .ax-body[data-scene="hot"] .flow.f-bed{animation-duration:3.2s}
 .ax-svg .puff path{animation:ax-puff 2.4s ease-in-out infinite}
 .ax-svg .puff path+path{animation-delay:.4s}
 .ax-body[data-scene="humid"] .ax-led{animation:ax-cycle 2.2s steps(1,end) infinite}
 .ax-body[data-scene="humid"] .drops path{animation:ax-drip 3s ease-in-out infinite}
 .ax-body[data-scene="humid"] .drops path:nth-child(2){animation-delay:.6s}.ax-body[data-scene="humid"] .drops path:nth-child(3){animation-delay:1.2s}.ax-body[data-scene="humid"] .drops path:nth-child(4){animation-delay:1.8s}
 .ax-body[data-scene="hot"] .ax-rays{animation:ax-rays 2.6s ease-in-out infinite}
 .ax-panel:not([hidden]){animation:ax-in .35s ease both}
}
@media (prefers-reduced-motion:reduce){.ax-svg .flow{stroke-dasharray:2 14}}
@keyframes ax-flow{to{stroke-dashoffset:-36}}
@keyframes ax-puff{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}
@keyframes ax-cycle{0%{opacity:1}35%{opacity:.15}55%{opacity:1}80%{opacity:.15}}
@keyframes ax-drip{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes ax-rays{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ax-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:900px){
 .ax .ax-head{grid-template-columns:1fr;gap:12px}
 .ax-body{grid-template-columns:1fr}
}
@media (max-width:600px){
 .ax-tabs{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
 .ax-tabs::-webkit-scrollbar{display:none}
 .ax-tabs button{flex:none;scroll-snap-align:start;font-size:13px;padding:10px 14px}
 .ax-panel{padding:20px 18px 16px}
 .ax-panel h3{font-size:20px}
 .ax-legend{font-size:12px;gap:6px 12px}
 .ax-figure{border-radius:16px}
 .ax-js .ax-legend li:not(.on){display:none}
}
@media (forced-colors:active){.ax-svg .part{opacity:1}}