:root{color:#16383d;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#4c909a;font-family:Segoe UI,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{min-width:320px;margin:0}.page-shell{--edge:clamp(20px, 3vw, 40px);min-height:100dvh;position:relative}.scene-study{position:fixed;inset:0}.scene-viewport{background:#4c909a;width:100%;height:100%}.scene-viewport canvas{touch-action:none}.site-header,.intro,.site-footer,.scene-actions{z-index:1;pointer-events:none;position:absolute}.site-header{top:max(var(--edge), env(safe-area-inset-top));left:max(var(--edge), env(safe-area-inset-left));right:max(var(--edge), env(safe-area-inset-right));justify-content:space-between;align-items:center;gap:16px;display:flex}.wordmark{letter-spacing:.12em;font-size:24px;font-weight:700}.edition,.eyebrow,.site-footer{letter-spacing:.12em;font-size:11px}.edition,.eyebrow{color:#16383d}.intro{top:calc(max(var(--edge), env(safe-area-inset-top)) + 74px);left:max(var(--edge), env(safe-area-inset-left));right:var(--edge);max-width:460px}.eyebrow{margin:0 0 12px}h1{letter-spacing:-.045em;margin:0;font-size:clamp(34px,4vw,52px);font-weight:500;line-height:1.1}.intro-copy{margin:14px 0 0;font-size:14px;line-height:1.8}.scene-actions{right:max(var(--edge), env(safe-area-inset-right));bottom:max(var(--edge), env(safe-area-inset-bottom));align-items:center;gap:16px;display:flex}.camera-buttons{gap:8px;display:flex}.scene-actions p{margin:0;font-size:12px;line-height:1.6}.scene-actions button{pointer-events:auto;font:inherit;color:inherit;cursor:pointer;background:#edf4e9c7;border:1px solid #42666b;border-radius:999px;padding:10px 16px;font-size:13px}.scene-actions button:hover:enabled{background:#f6faef}.scene-actions button:focus-visible{outline-offset:4px;outline:3px solid #203d42}.scene-actions button:disabled{opacity:.55;cursor:default}.site-footer{left:max(var(--edge), env(safe-area-inset-left));bottom:max(var(--edge), env(safe-area-inset-bottom));gap:3px;line-height:1.7;display:grid}.scene-note{letter-spacing:0}.scene-fallback{text-align:center;background:#4c909a;align-content:center;height:100%;padding:24px;display:grid}.scene-fallback p{margin:0;line-height:1.8}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (width<=600px){.wordmark{font-size:21px}.edition{font-size:10px}.intro{top:calc(max(var(--edge), env(safe-area-inset-top)) + 68px)}.intro-copy{max-width:300px;font-size:13px}.scene-actions{bottom:calc(max(var(--edge), env(safe-area-inset-bottom)) + 85px);flex-direction:column;align-items:flex-end;gap:8px}}@media (height<=480px) and (width>=601px){.page-shell{--edge:18px}.intro{top:calc(max(var(--edge), env(safe-area-inset-top)) + 52px);max-width:290px}.eyebrow{margin-bottom:8px;font-size:10px}h1{font-size:32px}.intro-copy{margin-top:8px;font-size:12px}.site-footer{gap:0;font-size:10px}}@media (height<=480px) and (width>=480px) and (width<=600px){.page-shell{--edge:18px}.intro{top:calc(max(var(--edge), env(safe-area-inset-top)) + 30px)}.eyebrow{margin-bottom:6px;font-size:9px}h1{font-size:24px}.intro-copy{margin-top:6px;font-size:11px;line-height:1.5}.scene-actions{bottom:max(var(--edge), env(safe-area-inset-bottom));flex-direction:column;align-items:flex-end;gap:6px}.scene-actions p{font-size:10px}.scene-actions button{padding:8px 12px;font-size:12px}.site-footer{gap:0;font-size:10px}}.water-native-failure{position:absolute;inset:0}.water-debug{z-index:2;right:var(--edge);top:calc(var(--edge) + 46px);color:#16383d;width:min(330px,100vw - 40px);font-size:12px;position:fixed}.water-debug summary{cursor:pointer;background:#edf4e9ef;border:1px solid #42666b;border-radius:18px;width:fit-content;margin-left:auto;padding:8px 12px}.water-debug summary:focus-visible{outline-offset:3px;outline:3px solid #203d42}.water-debug-body{background:#edf4e9f2;border:1px solid #42666b;border-radius:12px;max-height:calc(100dvh - 210px);margin-top:6px;padding:12px;overflow-y:auto}.water-debug-body p{margin:0 0 10px;line-height:1.5}.water-debug-note{font-size:11px}.water-debug-body label{gap:4px;margin-bottom:9px;display:grid}.water-debug-body input,.water-debug-body select,.water-debug-body button{font:inherit;color:inherit;background:#fffdf4;border:1px solid #718d88;border-radius:5px;width:100%;min-width:0;padding:6px}.water-debug-body input[type=color]{height:30px;padding:2px}.water-debug-grid{grid-template-columns:1fr 1fr;gap:0 10px;display:grid}.water-debug-buttons{gap:6px;margin-bottom:10px;display:flex}.water-debug-buttons button{cursor:pointer}.water-debug pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:10px}@media (width<=600px){.water-debug{top:auto;bottom:calc(var(--edge) + 180px)}.water-debug-body{max-height:min(46dvh,370px)}}@media (height<=480px){.water-debug{top:var(--edge);right:calc(var(--edge) + 125px);width:280px;bottom:auto}.water-debug-body{max-height:calc(100dvh - 125px)}}.native-study .intro,.native-study .site-header,.native-study .site-footer{text-shadow:0 0 4px #edf4e9,0 0 2px #edf4e9}.home-study .site-footer,.home-study .scene-actions p{color:#edf4e9;text-shadow:0 1px 3px #10283d}.water-experiment-caption{left:var(--edge);bottom:calc(var(--edge) + 75px);z-index:1;max-width:calc(100vw - 2 * var(--edge));color:#16383d;pointer-events:none;background:#edf4e9df;border-radius:5px;margin:0;padding:5px 8px;font-size:10px;line-height:1.5;position:fixed}@media (height<=480px){.water-experiment-caption{bottom:calc(var(--edge) + 58px);font-size:9px}}@media (width<=600px) and (height>=481px){.water-experiment-caption{max-width:130px}}.environment-controls{z-index:4;left:var(--edge);bottom:calc(var(--edge) + 80px);max-width:calc(100vw - 2 * var(--edge));color:#16383d;background:#edf4e9ef;border:1px solid #718d88;border-radius:10px;padding:10px 12px;font-size:12px;position:fixed}.environment-controls p{flex-wrap:wrap;gap:6px 12px;margin:0 0 7px;line-height:1.5;display:flex}.environment-controls p span{color:#42666b;font-size:10px}.environment-buttons{flex-wrap:wrap;gap:6px;display:flex}.environment-buttons button{font:inherit;color:#16383d;cursor:pointer;background:#fffdf4;border:1px solid #718d88;border-radius:6px;padding:7px 10px}.environment-buttons button[aria-pressed=true]{color:#fffdf4;background:#365c61}.environment-buttons button:hover:enabled{border-color:#16383d}.environment-buttons button:focus-visible{outline-offset:2px;outline:3px solid #203d42}.environment-buttons button:disabled{opacity:.5;cursor:default}.editing-scene .environment-controls{left:auto;right:var(--edge)}:is(.home-study:has(.environment-controls[data-dark-background=true]) .site-header,.home-study:has(.environment-controls[data-dark-background=true]) .intro,.home-study:has(.environment-controls[data-dark-background=true]) .edition,.home-study:has(.environment-controls[data-dark-background=true]) .eyebrow){color:#edf4e9;text-shadow:0 1px 3px #10283d}.environment-controls .environment-error{color:#783b32;max-width:260px;margin:7px 0 0}@media (width<=600px) and (height>=481px){.environment-controls{bottom:calc(var(--edge) + 180px)}.editing-scene .editor-body{max-height:min(55dvh,100dvh - 310px)}.home-study .water-debug{bottom:calc(var(--edge) + 280px)}}@media (height<=480px){.environment-controls{bottom:calc(var(--edge) + 60px);padding:6px 8px}.environment-controls p{margin-bottom:4px}.environment-buttons button{padding:5px 8px;font-size:11px}.editing-scene .editor-body{max-height:calc(100dvh - 198px)}.home-study .water-experiment-caption{bottom:calc(var(--edge) + 128px)}}.static-island{pointer-events:none;background:radial-gradient(at 55% 64%,#63b5bb 0,#34838f 45%,#17586c 100%);position:absolute;inset:0;overflow:hidden}.static-shore{aspect-ratio:2.1;background:#dfc88f;border-radius:45% 50% 40% 55%;width:min(48vw,480px);position:absolute;top:52%;left:50%;transform:translate(-50%,-50%)rotate(-8deg);box-shadow:0 8px #d5ba80,0 13px 0 8px #ffffff38,0 25px 0 15px #ffffff12}.static-land{border-radius:inherit;background:#84994a;position:absolute;inset:8% 9% 20%}.static-land i{aspect-ratio:.8;background:#446b3c;border-radius:48% 54% 44% 42%;width:16%;position:absolute;top:-25%;left:24%;box-shadow:3px 6px #355430}.static-land i:nth-child(2){width:19%;top:-14%;left:48%}.static-land i:nth-child(3){width:14%;top:-32%;left:72%}.recovery-card{z-index:6;color:#183e43;background:#fffdf1f2;border:1px solid #8aa99c;border-radius:14px;width:min(380px,100vw - 32px);max-height:calc(100dvh - 36px);padding:18px;position:fixed;top:56%;left:50%;overflow:auto;transform:translate(-50%,-50%);box-shadow:0 12px 38px #102d3530}.recovery-card p{margin:8px 0;line-height:1.55}.recovery-note{font-size:12px}.recovery-card pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}.recovery-buttons{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.recovery-buttons button,.static-mode-button,.recovery-debug button{font:inherit;color:#183e43;cursor:pointer;background:#fffdf1;border:1px solid #6b8f8b;border-radius:18px;padding:8px 12px}.recovery-buttons button:disabled{opacity:.55;cursor:default}.recovery-buttons button:focus-visible,.static-mode-button:focus-visible,.recovery-debug button:focus-visible{outline-offset:3px;outline:3px solid #b3dc83}.static-mode-button{z-index:2;right:var(--edge);top:var(--edge);padding:6px 10px;font-size:11px;position:fixed}.native-study .edition{margin-right:88px}.recovery-editor{width:min(330px,100vw - 36px);max-height:calc(100dvh - 150px);top:70px;left:auto;right:18px;transform:none}.recovery-debug{z-index:8;color:#183e43;background:#fffdf1ef;border-radius:10px;max-width:min(360px,100vw - 36px);padding:8px;font-size:11px;position:fixed;top:18px;left:18px}.recovery-debug pre{white-space:pre-wrap;max-height:35dvh;overflow:auto}.recovery-debug button{margin-top:6px;font-size:11px;display:block}@media (width<=600px){.static-shore{width:72vw}.recovery-editor{max-height:38dvh;top:auto;bottom:100px}.recovery-card{padding:13px;font-size:13px}}@media (height<=480px){.recovery-card{width:min(350px,100vw - 36px);padding:12px;top:50%}.recovery-editor{width:250px;max-height:calc(100dvh - 135px);top:50px;bottom:auto}}.edition{margin-right:88px}@media (width<=600px) and (height>=481px){.editing-scene:has(.recovery-card) .editor-body{max-height:calc(100dvh - 350px)}}@media (height<=480px){.editing-scene:has(.recovery-card) .scene-editor{width:calc(100vw - 306px);min-width:200px}.editing-scene:has(.recovery-card) .editor-body{max-height:calc(100dvh - 110px)}.recovery-card:not(.recovery-editor){width:250px;max-height:calc(100dvh - 145px);top:56px;left:auto;right:18px;transform:none}}.public-header{justify-content:flex-start;padding-right:90px}.public-header a{pointer-events:auto;color:inherit;text-decoration:none}.public-header nav{flex-wrap:wrap;gap:4px 12px;margin-left:auto;display:flex}.public-header nav a{letter-spacing:.06em;border-bottom:2px solid #0000;padding:7px 3px;font-size:12px}.public-header a[aria-current=page]{border-bottom-color:currentColor}.public-header a:hover{text-underline-offset:5px;text-decoration:underline}.public-header a:focus-visible,.home-link:focus-visible{outline-offset:4px;border-radius:3px;outline:3px solid #93caa3}.public-shell .intro{pointer-events:auto;color:#16383d;text-shadow:none;background:#fffdf1ed;border-radius:12px;max-height:calc(100dvh - 330px);padding:18px;overflow:auto}.public-shell .intro .eyebrow{color:#42666b;text-shadow:none}.public-shell.home-study:has(.environment-controls[data-dark-background=true]) .intro{color:#16383d;text-shadow:none}.public-shell.home-study:has(.environment-controls[data-dark-background=true]) .intro .eyebrow{color:#42666b;text-shadow:none}:is(.public-shell:has(.recovery-card) .scene-actions,.public-shell:has(.recovery-card) .environment-controls){display:none}.public-shell .intro h1{font-size:clamp(28px,3.6vw,46px)}.public-shell .intro h1:focus-visible{outline-offset:4px;outline:2px solid #42666b}.home-link{color:#16383d;text-underline-offset:4px;margin-top:18px;font-size:13px;display:inline-block}.public-shell .recovery-card{left:auto;right:var(--edge);width:min(330px,100vw - 40px);max-height:calc(100dvh - 240px);top:130px;transform:none}@media (width<=600px) and (height>=481px){.public-header{align-items:flex-start;gap:12px}.public-header .wordmark{font-size:18px}.public-header nav{gap:2px 10px}.public-header nav a{padding:5px 2px;font-size:11px}.public-shell .intro{max-width:320px;max-height:calc(100dvh - 450px);padding:15px;top:112px}.public-shell .recovery-card{max-height:210px;top:auto;bottom:110px}.public-shell:has(.recovery-card) .environment-controls{display:none}}@media (height<=480px){.public-shell{--edge:16px}.public-header{gap:12px}.public-header .wordmark{font-size:19px}.public-header nav{gap:10px}.public-shell .intro{width:min(360px,100vw - 294px);max-height:calc(100dvh - 205px);padding:12px;top:72px}.public-shell .intro h1{font-size:25px}.public-shell .intro-copy{margin-top:8px;font-size:12px;line-height:1.5}.public-shell .home-link{margin-top:10px}.public-shell .recovery-card{width:240px;max-height:calc(100dvh - 165px);top:72px}.public-shell .environment-controls{bottom:var(--edge);padding:6px 8px}.public-shell .scene-actions{bottom:var(--edge);flex-direction:column;align-items:flex-end;gap:4px}.public-shell .site-footer{display:none}.public-shell .scene-actions p{font-size:10px}.public-shell .scene-actions button{padding:7px 10px;font-size:12px}}