.splat-lesson .water-workbench{grid-template-columns:minmax(0,1fr) 310px}.splat-stage{position:relative;min-height:650px;flex:1;aspect-ratio:1.25;overflow:hidden;background:#edf0e8}.splat-stage canvas{width:100%;height:100%;position:absolute;inset:0}.splat-hud{position:absolute;inset:24px 24px auto;display:flex;justify-content:space-between;font:9px monospace;color:#5d7066;pointer-events:none}.splat-foot{position:absolute;bottom:22px;left:20px;right:20px;text-align:center;font:9px/1.6 monospace;color:#5d7066;pointer-events:none}.splat-grab{position:absolute;left:18%;top:20%;width:64%;height:62%;background:none;border:0;cursor:grab;touch-action:none;border-radius:20px}.splat-grab:active{cursor:grabbing}.splat-grab:focus-visible{outline:2px dashed #3151c8;outline-offset:5px}.splat-lesson .water-range{margin:22px 0}.splat-lesson .water-range small{font-size:10px;display:block;line-height:1.6}.splat-lesson .water-controls h3{font-size:26px}.splat-lesson .water-stages button[aria-pressed=true]{background:#dfe5dc;color:#28382e}.splat-note{font:11px/1.8 monospace;color:#596d5e}.splat-viewer{display:grid;grid-template-columns:minmax(0,1fr) 310px;border:1px solid var(--line);margin:55px 0}.view-stage{position:relative;aspect-ratio:1;min-width:0;background:#e6e1d9;overflow:hidden}.view-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.view-stage img[hidden]{display:none}.view-stage.guides:after{content:'';position:absolute;inset:17.5%;border:1px dashed #3151c8;pointer-events:none}.view-stage.guides:before{content:'';position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed #3151c8;z-index:1;pointer-events:none}.view-controls{padding:28px}.view-controls h3{font-size:27px;margin:18px 0}.view-controls p{font-size:13px;line-height:1.9}.view-controls input[type=range]{width:100%;accent-color:var(--blue);min-height:44px}.view-angle{font:12px monospace;color:var(--blue)}.view-controls label{display:block;font-size:12px;margin:20px 0}.view-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:20px 0}.view-buttons button,.view-nav button{min-height:44px;background:transparent;border:1px solid var(--line);font:11px monospace}.view-buttons button[aria-pressed=true]{background:#3151c8;color:white}.view-nav{display:flex;justify-content:space-between}.splat-diagram{display:block;width:100%;height:auto;margin:25px 0;border:1px solid var(--line);background:#e8eae3}.splat-lesson .water-story__intro{position:static}.splat-lesson .water-chapter p{font-size:14px}.splat-lesson pre{white-space:pre-wrap;overflow-wrap:anywhere}.splat-action{display:flex;align-items:center;justify-content:space-between;border:0;border-top:1px solid var(--line);padding:14px 0;min-height:44px;width:100%;background:none;color:var(--blue);font-size:12px}.splat-lesson button:focus-visible,.splat-lesson input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.splat-lesson button{cursor:pointer}.splat-download{font-size:12px;display:block;padding:12px 0}.splat-tests{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:30px 0}.splat-tests article{border:1px solid var(--line);padding:24px}.splat-tests h3{font-size:18px;margin:10px 0}.splat-tests p{font-size:13px;line-height:1.9}
@media(max-width:1000px){.splat-lesson .water-workbench{grid-template-columns:minmax(0,1fr) 280px}}@media(max-width:700px){.splat-lesson .water-workbench,.splat-viewer{display:block}.splat-stage{min-height:0;aspect-ratio:1/1.15}.splat-lesson .water-controls{display:block}.splat-tests{grid-template-columns:1fr}.splat-lesson .water-heading h1{font-size:clamp(40px,10vw,70px)}.splat-hud,.splat-foot{font-size:7px}.splat-lesson .water-stages button span{display:block}}

.splat-panel[hidden],.splat-download[hidden]{display:none}.splat-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-bottom:1px solid var(--line);padding-bottom:10px;margin:22px 0}.splat-tabs button{min-height:44px;font-size:12px;border:0;background:none;color:var(--muted)}.splat-tabs button[aria-selected=true]{background:#e1e6de;color:var(--ink);border-radius:3px}
@media(min-width:701px){.view-stage{height:650px;aspect-ratio:auto}}