.cycle-explanation{display:grid;grid-template-columns:1fr 1fr;gap:35px}.cycle-demo{border:1px solid #b4d7c8;border-radius:16px;overflow:hidden;margin-top:22px;background:#f5faf5}.cycle-toolbar{padding:25px;background:#e2f0e4;display:flex;justify-content:space-between;gap:20px;align-items:center}.cycle-toolbar strong,.cycle-toolbar span{display:block}.cycle-toolbar span{font-size:12px;margin-top:5px}.cycle-controls{display:flex;gap:8px;flex-wrap:wrap}.cycle-controls button{border:1px solid #247d80;border-radius:6px;background:white;color:#15535a;padding:11px 14px;font-size:13px;cursor:pointer}.cycle-controls button[aria-pressed=true]{background:#146f7d;color:white}.cycle-controls button:hover{background:#bde8a8;color:#103e4c}.cycle-controls button:focus-visible{outline:3px solid #123e4b;outline-offset:3px}.cycle-map{display:block;width:100%;height:auto}.cycle-map text{font:17px Arial,sans-serif;fill:#24584b}.cycle-map .map-small{font-size:13px}.cycle-map .river-water{transition:stroke-width 1.2s,stroke 1.2s}.cycle-map .wetland-water{transition:opacity 1.2s;opacity:.85}.cycle-map .gate-panel{transform-origin:0 8px;transition:transform 1s}.ground-exchange path,.ground-return path,.cycle-atmos,.river-stream{fill:none;stroke:#087f8e;stroke-width:4;stroke-dasharray:9 12;marker-end:url(#cycle-arrow);animation:cycle-flow 2s linear infinite}.cycle-atmos{stroke-width:2;animation-duration:3s}.river-stream{stroke:#e8ffff;stroke-width:4;animation-duration:3.5s}.sea-stream{stroke:#087f8e}.ground-return{display:none}.cycle-demo[data-state=lowered] .ground-exchange{display:none}.cycle-demo[data-state=lowered] .ground-return{display:block}.cycle-demo[data-state=lowered] .river-water{stroke-width:43;stroke:#279eb9}.cycle-demo[data-state=lowered] .river-stream{animation-duration:.7s}.cycle-demo[data-state=lowered] .wetland-water{opacity:.2}.cycle-demo[data-state=lowered] .gate-panel{transform:scaleY(.15)}.cycle-status{padding:23px 30px;background:#def0e9;border-top:1px solid #b4d7c8}.cycle-status strong{font-size:19px}.cycle-status p{margin:10px 0 0}.cycle-caveat{margin-top:20px}.cycle-demo.is-paused *{animation-play-state:paused!important}@keyframes cycle-flow{to{stroke-dashoffset:-42}}@media(max-width:760px){.cycle-explanation{grid-template-columns:1fr;gap:0}.cycle-toolbar{display:block;padding:18px}.cycle-controls{margin-top:15px}.cycle-controls button{font-size:12px;padding:10px}.cycle-status{padding:20px}.cycle-map{min-height:350px}.cycle-map text{font-size:19px}.cycle-map .map-small{font-size:15px}}@media(prefers-reduced-motion:reduce){.cycle-demo *{animation:none!important;transition:none!important}}
.cycle-sun,.cycle-dry-sand{opacity:0;transition:opacity 1.2s}.cycle-wet-weather{transition:opacity 1s}.cycle-trees circle{transform-box:fill-box;transform-origin:center;transition:transform 1.2s,fill 1.2s}.cycle-demo[data-state=lowered] .cycle-wet-weather{opacity:0}.cycle-demo[data-state=lowered] .cycle-sun,.cycle-demo[data-state=lowered] .cycle-dry-sand{opacity:1}.cycle-demo[data-state=lowered] .cycle-trees circle{transform:scale(.62);fill:#92ab6e}.cycle-demo[data-state=lowered] .cycle-evaporation{opacity:.3;stroke-width:1.5;animation-duration:9s;stroke-dasharray:3 27}.cycle-demo[data-state=lowered] .cycle-infiltration{opacity:.12;animation-duration:10s}
.cycle-label-dry{display:none}.cycle-demo[data-state=lowered] .cycle-label-wet{display:none}.cycle-demo[data-state=lowered] .cycle-label-dry{display:initial}.cycle-wetland-land,.cycle-reeds,.wetland-water{transition:fill 1.2s,stroke 1.2s,opacity 1.2s}.cycle-demo[data-state=lowered] .cycle-wetland-land{fill:#d6bd70}.cycle-demo[data-state=lowered] .wetland-water{fill:#ae8247;opacity:.8}.cycle-demo[data-state=lowered] .cycle-reeds{stroke:#886035}
.cycle-raised-sky{opacity:1;transition:opacity 1s}.cycle-demo[data-state=lowered] .cycle-raised-sky{opacity:0}

.cycle-demo[data-state=raised] .river-downstream{stroke-width:51}

.cycle-expanded{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:#f5faf5;overflow:auto;color:#103e4c}
.cycle-expanded::backdrop{background:#103e4ccc}
.cycle-expanded-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-end;padding:10px 18px;background:#e2f0e4;border-bottom:1px solid #b4d7c8}
.cycle-expanded-close{border:0;border-radius:7px;background:#167d90;color:#fff;font:700 16px Arial;padding:12px 22px;cursor:pointer;min-height:44px}
.cycle-expanded-close:hover{background:#b7e792;color:#103e4c}.cycle-expanded-close:focus-visible{outline:3px solid #103e4c;outline-offset:2px}
.cycle-expanded .cycle-demo{margin:0;border:0;border-radius:0;width:100%}.cycle-expanded .cycle-map{cursor:default!important;width:100%;height:auto}.cycle-controls [hidden]{display:none}

/* Fit the complete map and controls inside the current viewport. */
.cycle-expanded[open]{display:flex;flex-direction:column;overflow:hidden}
.cycle-expanded-bar{flex:none;position:relative;padding:6px 14px}
.cycle-expanded .cycle-demo{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.cycle-expanded .cycle-toolbar{flex:none;padding:10px 18px;gap:10px}
.cycle-expanded .cycle-map{flex:1;min-height:0!important;width:100%;height:0;object-fit:contain}
.cycle-expanded .cycle-status{flex:none;max-height:18vh;overflow:auto;padding:10px 18px;font-size:13px;line-height:1.4}
.cycle-expanded .cycle-status strong{font-size:16px}.cycle-expanded .cycle-status p{margin:5px 0 0}
@media(max-width:760px){.cycle-expanded .cycle-toolbar{display:flex;flex-wrap:wrap;padding:8px 12px}.cycle-expanded .cycle-toolbar>div:first-child{display:none}.cycle-expanded .cycle-controls{margin:0}.cycle-expanded .cycle-controls button{padding:8px;font-size:12px}.cycle-expanded .cycle-status{max-height:17vh}}