/* All styles apply only to the trusted water-cycle simulation section. */
[data-water-cycle]{border:1px solid #abd2de;border-radius:18px;overflow:hidden;margin:2rem 0;background:#f2fafb}
[data-water-cycle] .wc-canvas-area{position:relative;background:linear-gradient(#a9dffa 0%,#d9f3ff 55%,#e5f4dd 100%);}
[data-water-cycle] canvas{display:block;width:100%;height:clamp(280px,50vw,450px);touch-action:none;outline-offset:-4px;cursor:grab}
[data-water-cycle] canvas:active{cursor:grabbing}
[data-water-cycle] .wc-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:#315a65}
[data-water-cycle] .wc-controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;padding:1.15rem;background:#e8f4f6}
[data-water-cycle] .wc-controls label{font-weight:650;font-size:.88rem;margin-right:.15rem}
[data-water-cycle] button,[data-water-cycle] select{border:1px solid #80acba;border-radius:9px;background:white;color:#113c4d;padding:.55rem .75rem;font:inherit;font-size:.85rem;cursor:pointer}
[data-water-cycle] button:hover,[data-water-cycle] select:hover{background:#d1eef8}
[data-water-cycle] button:focus-visible,[data-water-cycle] select:focus-visible{outline:3px solid #df9900;outline-offset:2px}
[data-water-cycle] .wc-step{padding:1rem 1.3rem;background:white}
[data-water-cycle] .wc-step h3{margin:.1rem 0 .3rem;font-size:1.1rem;color:#174c65}
[data-water-cycle] .wc-step p{margin:.2rem 0;color:#294657}
[data-water-cycle] .wc-hint{font-size:.8rem;padding:.4rem 1.3rem .85rem;color:#3e6070;margin:0}
@media (prefers-reduced-motion:reduce){[data-water-cycle] *{scroll-behavior:auto!important;transition:none!important}}

/* The interactive demonstration is the lead feature, before article prose. */
[data-water-cycle] .wc-phase{background:#d4f0f7;color:#144c62;border-left:4px solid #2387ac;font-weight:650;font-size:.9rem;margin:.65rem 1rem .9rem;padding:.65rem .8rem;border-radius:.3rem}
[data-water-cycle][data-phase="gas"] .wc-phase{background:#f2f6fa;border-left-color:#779eaf}
[data-water-cycle][data-process="infiltration"] .wc-phase,[data-water-cycle][data-process="groundwater"] .wc-phase{background:#e0f0ff}
[data-water-cycle] .wc-canvas-area{margin-top:.5rem}
@media(max-width:600px){[data-water-cycle] .wc-phase{margin:.5rem .7rem;font-size:.85rem}[data-water-cycle] canvas{height:clamp(270px,70vw,360px)}}