.life-lesson .water-heading h1{font-size:clamp(56px,7.1vw,108px)}
.life-lesson .water-heading__intro{padding-right:0}
.life-stage{position:relative;flex:1;min-height:520px;aspect-ratio:1.4;background:#06080f;overflow:hidden}
.life-stage canvas,.life-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.life-stage canvas[hidden]{display:none}.life-stage #life-overlay{pointer-events:none}
.life-stage[data-ready=true] .life-fallback{display:none}
.life-lesson .water-visual{background:#06080f}
.life-lesson .water-stages{border-color:#252b3e;grid-template-columns:repeat(5,minmax(0,1fr))}
.life-lesson .water-stages button{color:#b5bfd5;font-size:12px}
.life-lesson .water-stages button[aria-pressed=true]{background:#c0cafa;color:#0c132d}
.life-lesson .water-controls h3{font-size:28px;margin:20px 0}
.life-lesson .water-range{margin:19px 0}
.life-lesson .water-range small,.life-lesson .water-status{font-size:11px;line-height:1.6}
.life-lesson .water-range>span,.life-form,.life-check{font-size:13px}
.life-form{display:block;grid-column:1/-1}
.life-form+.life-form{margin-top:16px}.life-form:has(select:disabled){opacity:.45}
.life-form select{display:block;width:100%;font:inherit;background:transparent;color:var(--ink);border:1px solid var(--line);padding:10px;margin-top:8px;min-height:44px;border-radius:2px}
.life-check{display:flex;gap:10px;align-items:center;min-height:44px;grid-column:1/-1;margin:6px 0}
.life-check input{width:17px;height:17px;accent-color:var(--blue)}
.life-export{display:flex;justify-content:space-between;align-items:center;min-height:44px;background:none;border:0;border-top:1px solid var(--line);padding:12px 0;font-size:12px;color:var(--blue);width:100%;grid-column:1/-1}
.life-download{grid-column:1/-1;font-size:12px;margin:8px 0}.life-download a{display:inline-block;padding:8px 0;text-decoration:underline}
.life-lesson .water-observation{grid-template-columns:150px 1fr minmax(170px,27%);gap:22px}
.life-lesson .water-observation>span{font:11px/1.7 monospace}
.life-lesson .water-observation p{font-size:13px}
.life-lesson .water-observation code{font-size:12px;overflow-wrap:anywhere}
.life-lesson .water-number{font-size:11px}
.life-lesson .water-story__intro a,.life-lesson .water-further p a{text-decoration:underline}
.life-lesson .water-note{font-size:12px}
.life-lesson .water-story__intro{position:static}
.life-lesson .water-further pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.life-lesson button,.life-lesson select,.life-lesson summary{cursor:pointer}
.life-lesson button:focus-visible,.life-lesson select:focus-visible,.life-lesson input:focus-visible,.life-lesson summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.life-lesson button:disabled{opacity:.5;cursor:default}
@media(max-width:1100px){.life-stage{min-height:470px}.life-lesson .water-observation{grid-template-columns:140px 1fr}.life-lesson .water-observation code{grid-column:2}}
@media(max-width:700px){.life-lesson .water-heading h1{font-size:clamp(43px,10.5vw,70px)}.life-stage{min-height:0;height:auto;aspect-ratio:1/1}.life-lesson .water-controls h3{grid-column:1/-1}.life-lesson .water-controls{column-gap:20px}.life-lesson .water-range{min-width:0}.life-lesson .water-range>span{flex-wrap:wrap;gap:5px;font-size:12px}.life-lesson .water-stages button span{font-size:10px}.life-lesson .water-observation{display:block}.life-lesson .water-observation p{margin:12px 0}.life-lesson .water-workbench{min-width:0}.life-lesson .water-equation{overflow-wrap:anywhere}.life-lesson .water-story h2{font-size:clamp(40px,11vw,53px)}}

.life-lesson .water-workbench{grid-template-columns:minmax(0,1fr) 320px}
.life-knobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;grid-column:1/-1;margin:18px 0 12px}
.life-lesson .life-knobs .water-range{margin:7px 0;min-width:0}
.life-lesson .life-knobs .water-range>span{font-size:11px;flex-wrap:wrap;gap:4px}
.life-knobs .water-range small{display:block;font-size:10px}
@media(max-width:700px){.life-lesson .water-stages button{font-size:10px}.life-lesson .water-stages button span{display:block;margin:0 0 6px}}
@media(max-width:700px){.life-lesson .water-workbench{display:block}.life-knobs{gap:8px 18px}.life-lesson .life-knobs .water-range input{min-height:28px}}