.water-view { --water-blue: #075985; }
.water-intro { margin: 24px 0; text-align: center; }
.water-intro h2 { color: var(--water-blue); font-size: clamp(1.8rem, 5vw, 2.7rem); }
.water-panel { padding: 24px; background: #f0faff; border: 2px solid #bae6fd; border-radius: 28px; }
.water-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; }
.water-landscape { width: 100%; display: block; border-radius: 20px; background: #dff4ff; }
.water-landscape text { font-family: 'Nunito', sans-serif; font-weight: 800; fill: #164e63; font-size: 19px; }
.water-path { opacity: .12; transition: opacity .25s; }
[data-step="0"] .water-evaporation, [data-step="1"] .water-cloud, [data-step="2"] .water-rain, [data-step="3"] .water-return { opacity: 1; }
.water-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.water-steps button { min-height: 56px; padding: 12px; border: 2px solid #7dd3fc; border-radius: 18px; background: white; color: #075985; font: inherit; font-weight: 800; cursor: pointer; }
.water-steps button[aria-pressed="true"] { background: #075985; color: white; border-color: #075985; box-shadow: 0 4px 0 #0c4a6e; }
.water-view button:focus-visible { outline: 3px solid #a855f7; outline-offset: 4px; }
.water-copy { min-height: 345px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.water-copy h3 { color: #075985; font-size: 1.6rem; }
.water-copy p { line-height: 1.65; margin: 0; }
#water-tip { padding: 12px; background: white; border-radius: 12px; font-size: .95rem; }
#water-next { margin-top: auto; }
.water-quiz { margin-top: 24px; padding: 24px; border-radius: 22px; background: #fff9e8; }
.water-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.water-answers button { white-space: normal; min-height: 76px; text-align: left; border: 2px solid transparent; }
.water-answers .water-correct { background: #dcfce7; border-color: #15803d; color: #14532d; }
.water-answers .water-retry { background: #fef3c7; border-color: #a16207; color: #713f12; }
#water-progress { color: #075985; font-weight: 800; margin: 12px 0; }
#water-question { min-height: 3.5em; line-height: 1.6; }
#water-feedback { min-height: 6em; margin-top: 16px; font-weight: 800; color: #075985; line-height: 1.6; }
@media (max-width: 700px) { .water-answers { grid-template-columns: 1fr; } #water-question { min-height: 6.5em; } #water-feedback { min-height: 11em; } }
@media (max-width: 700px) { .water-layout { grid-template-columns: 1fr; } .water-panel { padding: 14px; } .water-steps { grid-template-columns: 1fr 1fr; } .water-copy { min-height: 365px; } .water-quiz { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .water-path { transition: none; } }