@import url('./fonts/fonts.css');
:root{font-family:'DM Sans',sans-serif;color:#24393e;background:#f7f8f5;font-synthesis:none;--blue:#214c9c;--muted:#7d8a8d;--line:#dce2df}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,a,select,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #3d68b9;outline-offset:5px}button:disabled{cursor:wait;opacity:.5}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.app{max-width:1800px;margin:auto;padding:0 48px}.masthead{height:87px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;color:#243e56;text-decoration:none;font-size:12px;font-weight:650;letter-spacing:2.2px}.brand-mark{width:36px;height:36px;color:var(--blue);stroke-width:1.3}.brand-divider{height:18px;width:1px;background:#ccd5d1;margin:0 9px}.brand-note{font-size:12px;letter-spacing:.2px;font-weight:400;color:#7b898b}.text-button{display:flex;align-items:center;gap:12px;background:none;border:0;font-size:12px;padding:10px 0 10px 10px;color:#68797b}.text-button svg{width:17px;height:17px}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:42px 2px 31px;gap:25px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:1.8px;display:flex;align-items:center;gap:10px;color:#718184}.tiny-line{width:21px;height:1px;background:#5c7b86}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:63px;line-height:1.12;font-weight:400;letter-spacing:-1.7px;margin:13px 0 0;color:#263d42}h1 em{font-weight:400;color:#49708b}em{font-weight:400}.intro>p{font-size:12px;line-height:1.9;color:#78878a;margin:0 2px 3px 0}.experiment{height:clamp(420px,57.3svh,750px);min-height:420px;position:relative;overflow:hidden;border:1px solid #d3dedd;border-radius:5px;background:#f4f8f8;box-shadow:0 3px 10px #18394b03,inset 0 0 40px #25466506;isolation:isolate}.experiment:fullscreen{height:100vh;border:0;border-radius:0}.experiment:fullscreen .tray-top{padding:30px}.experiment:fullscreen .toolbar{bottom:40px}#water{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px;cursor:none}.tray-grain{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px #395c7710;border-radius:inherit}.tray-top{position:absolute;top:0;left:0;right:0;padding:25px 27px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;gap:12px}.specimen{display:flex;gap:15px;align-items:center}.specimen-number{font-family:'Libre Caslon Display',Georgia,serif;font-size:33px;color:#8299a5;font-weight:400;border-right:1px solid #cddadd;padding-right:15px;line-height:1.2}.specimen-caption{display:block;font-size:8px;letter-spacing:1.7px;color:#81969c;margin-bottom:6px}.specimen h2{font-weight:450;font-size:12px;letter-spacing:.1px;margin:0;color:#466478}.tray-actions{display:flex;align-items:center;gap:10px;pointer-events:auto}.live-badge{display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:1.1px;color:#7b929c;margin-right:13px}.live-badge i{background:#779a9a;width:4px;height:4px;border-radius:50%;box-shadow:0 0 0 3px #779a9a10}.live-badge.paused i{background:#9ba6a6;box-shadow:none}.icon-button{border:0;background:transparent;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:5px;color:#69828f;transition:background .2s,color .2s}.icon-button:hover{background:#4565890c;color:#214c9c}.icon-button svg{width:18px;height:18px}.loading{position:absolute;top:45%;width:100%;text-align:center;font-size:12px;letter-spacing:.4px;color:#718c9e;display:flex;align-items:center;justify-content:center;gap:10px;transition:opacity .8s}.loading.hidden{opacity:0;pointer-events:none}.loading-drop{width:8px;height:8px;background:#2c5cae;border-radius:50% 50% 50% 10%;transform:rotate(-45deg);animation:breathe 1.5s infinite}.guide{position:absolute;left:13%;top:50%;pointer-events:none;display:flex;align-items:center;color:#5b7ca3;opacity:0;transition:opacity 1s}.guide.visible{opacity:.75}.guide-ring{position:absolute;width:27px;height:27px;border:1px solid #6991c499;border-radius:50%;left:-13px;animation:breathe 3s infinite}.guide-line{width:45px;border-top:1px dashed #8ea6bf99;margin-left:22px}.guide-label{position:absolute;top:26px;left:-4px;white-space:nowrap;font-size:10px;font-style:italic;color:#8296a8}.canvas-caption{position:absolute;left:0;right:0;bottom:98px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:11px;color:#748d9a;pointer-events:none;transition:opacity .8s;letter-spacing:.1px}.canvas-caption.quiet{opacity:.35}.caption-mark{font-family:Georgia,serif;font-size:17px;color:#6f91af}.toolbar{position:absolute;left:50%;bottom:27px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;border:1px solid #dce4e4;padding:7px 10px 7px 7px;border-radius:9px;background:#fcfdfbe8;backdrop-filter:blur(18px);box-shadow:0 5px 22px #35557208;white-space:nowrap}.tool-switch{display:flex;gap:3px}.tool{border:1px solid transparent;background:none;display:flex;gap:8px;align-items:center;padding:9px 13px;border-radius:5px;color:#7a8c95;font-size:11px;transition:.2s}.tool svg{width:18px;height:18px}.tool:hover{background:#edf2f3}.tool.active{background:#eaf0f6;border-color:#d9e4ed;color:#315d90}.toolbar-divider{width:1px;height:22px;background:#e0e6e5;margin:0 3px}.pigments{display:flex;gap:9px;padding:0 3px}.swatch{width:17px;height:17px;background:var(--swatch);border:3px solid #fff;box-shadow:0 0 0 1px transparent;border-radius:50%;padding:0;transition:.2s}.swatch.selected{box-shadow:0 0 0 1px #8da4bf}.swatch:hover{transform:scale(1.12)}.toolbar>.icon-button{width:29px}.tray-corner{position:absolute;bottom:28px;left:28px;font-size:7px;letter-spacing:1.6px;color:#91a4ad;pointer-events:none;writing-mode:vertical-rl;transform:rotate(180deg)}.cursor{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px;pointer-events:none;opacity:0;border:1px solid #254e9940;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:opacity .2s, width .2s,height .2s,margin .2s;mix-blend-mode:multiply}.cursor span{width:2px;height:2px;background:#234a9980;border-radius:50%}.cursor.ink{width:36px;height:36px;margin:-18px;border-color:#254e9960}.cursor.down{border-color:#254e99a0}.settings{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 2px 22px;border-bottom:1px solid var(--line)}.settings-left{display:flex;gap:31px;align-items:center}.field{display:flex;flex-direction:column;gap:9px}.field label{font-size:8px;letter-spacing:1.5px;font-weight:600;color:#889699;display:flex;justify-content:space-between;gap:18px}.field label span{font-size:9px;font-weight:450;letter-spacing:0;text-transform:none;color:#4e7184}.select-wrap{position:relative}.select-wrap:after{content:'';width:5px;height:5px;border-right:1px solid #819699;border-bottom:1px solid #819699;transform:rotate(45deg);position:absolute;right:4px;top:5px;pointer-events:none}select{border:0;background:transparent;color:#496576;font-size:11px;appearance:none;cursor:pointer;padding:0 21px 2px 0;max-width:100%}.preset-field{min-width:154px}.settings-divider{height:28px;width:1px;background:#e0e5e1}.viscosity-field{width:150px;gap:6px}.viscosity-field input{appearance:none;width:100%;height:3px;border-radius:3px;background:linear-gradient(to right,#7499b8 38%,#dce4e5 38%);margin:4px 0 0;cursor:pointer}.viscosity-field input::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:#f9faf8;border:2px solid #6f92b1;border-radius:50%;box-shadow:0 0 0 3px #f7f8f5}.viscosity-field input::-moz-range-thumb{width:7px;height:7px;background:#f9faf8;border:2px solid #6f92b1;border-radius:50%}.range-labels{display:flex;justify-content:space-between;font-size:8px;color:#a0abad;line-height:1}.demo-button{display:flex;align-items:center;gap:9px;font-size:11px;border:1px solid #cdd9db;background:transparent;padding:12px 14px;border-radius:5px;color:#4f6e80;white-space:nowrap;transition:.2s}.demo-button svg{width:13px;height:13px;stroke-width:1.6}.demo-arrow{padding-left:18px;color:#9aabb1}.demo-button:hover{background:#eaf0f2;border-color:#9fb6c3}footer{display:flex;justify-content:space-between;align-items:center;padding:17px 2px 22px;color:#95a09f;font-size:9px;gap:20px}footer p{margin:0}.footer-right{display:flex;gap:8px;align-items:center}.footer-right label{font-size:7px;letter-spacing:1.1px;margin-right:4px}.footer-right select{font-size:9px;color:#748b93;padding-right:0}.detail-dot{width:2px;height:2px;border-radius:50%;background:#a8b8ba;margin:0 4px}.resolution{font-size:7px;letter-spacing:.7px}dialog{border:1px solid #dbe3e1;border-radius:8px;padding:44px;max-width:510px;width:calc(100% - 32px);background:#fafbf8;color:#526e79;box-shadow:0 30px 100px #19374d22}dialog::backdrop{background:#1c344a55;backdrop-filter:blur(6px)}.dialog-close{position:absolute;right:16px;top:14px}dialog h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:40px;letter-spacing:-.5px;color:#2c4852;margin:20px 0}dialog h2 em{color:#577e9a}dialog>p,dialog li{font-size:12px;line-height:1.85}dialog ol{padding-left:17px;margin:23px 0}dialog li{padding-left:8px;margin:12px 0}dialog strong{font-weight:550;color:#365966}.note{border-top:1px solid #dce5e2;padding-top:21px;margin-top:24px}.note>span{font-size:8px;letter-spacing:1.5px;color:#8b9a9d}.note p{font-size:10px;line-height:1.9;color:#7b929b}.note a{color:#527b9b;text-underline-offset:3px}.keyboard-hints{display:flex;gap:15px;flex-wrap:wrap;border-top:1px solid #e2e9e5;padding-top:20px;margin-top:22px;font-size:9px;color:#8d9a9e}.keyboard-hints>span{display:flex;gap:5px;align-items:center}kbd{border:1px solid #d7e1df;border-radius:3px;font-size:8px;font-family:inherit;padding:3px 5px;color:#6b838e}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);background:#254b63;color:#f5f8fa;padding:12px 20px;font-size:12px;border-radius:6px;opacity:0;transition:.3s;pointer-events:none;z-index:5;box-shadow:0 5px 25px #13324220;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}@media(min-width:1600px){.app{padding:0 70px}.intro{padding-top:48px;padding-bottom:36px}.experiment{height:60svh}}@media(max-width:1050px){.app{padding:0 28px}.settings-left{gap:22px}.intro{padding-top:33px}.live-badge{display:none}h1{font-size:57px}.viscosity-field{width:130px}.demo-arrow{display:none}.toolbar{gap:8px}}@media(max-width:750px){.app{padding:0 20px}.masthead{height:71px}.brand-note,.brand-divider{display:none}.intro{padding:28px 0 25px;align-items:flex-start;flex-direction:column;gap:13px}.intro>p{font-size:11px;line-height:1.7}.intro>p br{display:none}.eyebrow{font-size:7px;letter-spacing:1.5px}h1{font-size:48px;margin-top:11px;letter-spacing:-1.3px}.experiment{height:54svh;min-height:390px}.tray-top{padding:19px 17px}.specimen-number{font-size:28px;padding-right:11px}.specimen{gap:11px}.specimen-caption{font-size:6px;letter-spacing:1.3px}.specimen h2{font-size:10px}.tray-actions{gap:2px}.tray-actions .icon-button{width:27px;height:30px}.toolbar{bottom:22px;padding:6px;gap:4px;border-radius:8px}.tool{padding:9px;gap:6px;font-size:10px}.tool svg{width:16px;height:16px}.toolbar-divider{margin:0 3px}.pigments{gap:6px;padding:0 2px}.swatch{width:15px;height:15px;border-width:2px}.toolbar>.icon-button{width:25px}.canvas-caption{font-size:9px;bottom:86px;padding:0 15px}.tray-corner{display:none}.settings{align-items:flex-end;gap:20px;padding:22px 0 20px;flex-wrap:wrap}.settings-left{width:100%;justify-content:space-between;gap:15px}.preset-field{min-width:0;width:45%}.viscosity-field{width:40%;max-width:185px}.speed-field{display:none}.settings-left .settings-divider:last-of-type{display:none}.field label{font-size:7px}.demo-button{width:100%;justify-content:center;padding:10px;font-size:10px}.demo-arrow{display:block;padding-left:8px}footer{font-size:8px;align-items:flex-start;gap:12px;padding-top:16px;flex-direction:column}.resolution{font-size:6px}.footer-right{gap:7px}.cursor{display:none}.guide{left:15%}.guide-label{font-size:8px}.desktop-text{font-size:10px}dialog{padding:34px 27px}dialog h2{font-size:37px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:380px){.toolbar{gap:3px;padding:6px}.tool{padding:9px}.tool span{display:none}.tool svg{width:20px;height:20px}.toolbar-divider{margin:0 4px}.pigments{gap:9px}.swatch{width:17px;height:17px}.toolbar>.icon-button{width:30px}.brand{font-size:10px;gap:8px;letter-spacing:1.8px}h1{font-size:43px}.specimen h2{font-size:9px}}

/* Keep the vessel visible while graphics prepare, then reveal its first frame. */
#water{opacity:0;transition:opacity .6s ease}.experiment.ready #water{opacity:1}.experiment[aria-busy="true"] .cursor{display:none}.loading{padding:0 24px;line-height:1.7}.embed-help{display:none}.footer-copy{display:flex;align-items:center;gap:18px}.footer-link{background:none;border:0;padding:0;color:#758d98;font-size:9px;text-decoration:underline;text-underline-offset:3px}.footer-link:hover{color:#315d90}.embed-code-label{display:block;font-size:8px;letter-spacing:1.4px;color:#83999f;margin:25px 0 9px}.embed-code{width:100%;resize:vertical;min-height:140px;max-height:260px;border:1px solid #d7e2e0;border-radius:5px;background:#f1f5f3;color:#456475;padding:13px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;line-height:1.7}.copy-embed{margin-top:13px;justify-content:space-between;min-width:160px}.embed-help-note{font-size:10px!important;color:#8b9da2}
/* A hosted or self-hosted iframe uses its own bounded container. */
html.embed-mode,html.embed-mode body{width:100%;height:100%;overflow:hidden;background:transparent}.embed-mode{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.embed-mode .app{width:100%;height:100%;max-width:none;margin:0;padding:0}.embed-mode main{height:100%;display:flex;flex-direction:column}.embed-mode .masthead,.embed-mode .intro,.embed-mode footer{display:none}.embed-mode .experiment{flex:1 1 auto;height:auto;min-height:220px;border-radius:8px 8px 0 0}.embed-mode .settings{flex:0 0 auto;min-height:78px;padding:14px 18px;gap:18px;background:#f7f8f5;border:1px solid #d3dedd;border-top:0;border-radius:0 0 8px 8px}.embed-mode .settings-left{gap:22px}.embed-mode .tray-top{padding:18px 20px}.embed-mode .embed-help{display:flex}.embed-mode .tray-corner,.embed-mode .live-badge{display:none}.embed-mode .toolbar{bottom:20px}.embed-mode .canvas-caption{bottom:87px}.embed-mode .experiment:fullscreen{height:100dvh;min-height:0;border:0;border-radius:0}.embed-mode .guide-label{font-size:9px}.embed-mode dialog{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
@media(max-width:750px){.footer-copy{gap:10px;flex-wrap:wrap}.embed-mode .settings{flex-wrap:nowrap;min-height:76px;gap:14px;padding:12px 15px}.embed-mode .settings-left{width:auto;flex:1;gap:16px}.embed-mode .preset-field{width:48%;max-width:170px}.embed-mode .viscosity-field{width:45%;max-width:150px}.embed-mode .demo-button{width:34px;height:34px;min-width:34px;padding:0;overflow:hidden;font-size:0;gap:0}.embed-mode .demo-button svg{width:14px;height:14px;flex-shrink:0}.embed-mode .demo-arrow{display:none}.embed-mode .specimen-number{font-size:25px}.embed-mode .tray-top{padding:15px}.embed-mode .tray-actions{gap:2px}.embed-mode .copy-embed{width:auto;min-width:160px;height:auto;font-size:11px;padding:12px 14px}.embed-mode .specimen-caption{font-size:6px}.embed-mode .specimen h2{font-size:10px}}
@media(max-width:350px){.embed-mode .settings-divider{display:none}.embed-mode .settings-left{gap:12px}.embed-mode .viscosity-field{width:43%}.embed-mode .preset-field{width:52%}.embed-mode .specimen-caption{display:none}.embed-mode .specimen-number{display:none}.embed-mode .tray-top{padding:13px}.embed-mode .canvas-caption{font-size:8px}}
@media(max-height:420px){.embed-mode .settings{min-height:66px;padding-top:9px;padding-bottom:9px}.embed-mode .specimen-caption,.embed-mode .canvas-caption{display:none}.embed-mode .tray-top{padding:11px 15px}.embed-mode .toolbar{bottom:12px}.embed-mode .experiment{min-height:140px}}
.experiment[aria-busy="true"] #water{pointer-events:none}.experiment.portrait .guide{left:50%;top:13%}.experiment.portrait .guide-line{transform:rotate(90deg);transform-origin:left center;margin-left:0}.experiment.portrait .guide-label{top:15px;left:23px}.embed-mode .loading{font-size:11px}
.standalone-download{display:inline-block;color:#527b9b;font-size:11px;text-underline-offset:4px;margin-top:7px}
/* Color mixing stays below the vessel, keeping the touch toolbar uncluttered. */
.settings{flex-wrap:wrap}.settings-left{flex:1 1 460px}.settings-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}.mix-toggle{display:flex;align-items:center;justify-content:center;gap:9px;min-width:122px;border:1px solid #cdd9db;border-radius:5px;background:transparent;padding:12px;color:#587586;font-size:11px;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}.mix-toggle:hover{background:#eaf0f2;border-color:#9fb6c3}.mix-toggle[aria-pressed="true"]{background:#edf2f7;border-color:#a5bbcf;color:#315d90}.mix-toggle-track{width:23px;height:13px;background:#d8e2e5;border-radius:9px;padding:2px;flex-shrink:0;transition:background .2s}.mix-toggle-track>span{display:block;width:9px;height:9px;border-radius:50%;background:#fbfcfb;box-shadow:0 1px 2px #24476322;transform:translateX(0);transition:transform .2s}.mix-toggle[aria-pressed="true"] .mix-toggle-track{background:linear-gradient(110deg,#244ab2,#1685ac,#343577)}.mix-toggle[aria-pressed="true"] .mix-toggle-track>span{transform:translateX(10px)}.mix-toggle[aria-busy="true"]{min-width:122px}.experiment.color-busy #water{pointer-events:none}
@media(max-width:750px){.settings-actions{display:grid;grid-template-columns:1fr 1.2fr;width:100%;gap:10px;margin-left:0}.settings-left{flex:1 1 100%}.settings-actions .mix-toggle,.settings-actions .demo-button{min-width:0;width:100%;padding:10px;font-size:10px}.settings-actions .demo-arrow{display:none}.mix-toggle{gap:7px}.embed-mode .settings{flex-wrap:wrap;gap:12px}.embed-mode .settings-left{flex:1 1 100%;width:100%}.embed-mode .settings-actions{width:100%;display:grid;grid-template-columns:1fr 1.2fr}.embed-mode .settings-actions .demo-button{width:100%;height:auto;min-width:0;padding:10px;font-size:10px;gap:8px;overflow:visible}.embed-mode .settings-actions .demo-button svg{width:13px;height:13px}.embed-mode .settings-actions .demo-arrow{display:none}.embed-mode .settings-actions .mix-toggle{padding:10px}}
@media(max-height:420px){.embed-mode .settings{gap:8px}.embed-mode .settings-actions .mix-toggle,.embed-mode .settings-actions .demo-button{padding-top:8px;padding-bottom:8px}}
/* The physical water frame keeps its aspect in every viewport, including native fullscreen. */
.experiment{container-type:size;container-name:water-viewport;background:#f7f8f5}.water-frame{position:absolute;inset:0;overflow:hidden;border-radius:inherit;container-type:size;container-name:water}.experiment.frame-locked .water-frame{inset:auto;left:50%;top:50%;width:min(100cqw,calc(100cqh * var(--water-aspect)));height:min(100cqh,calc(100cqw / var(--water-aspect)));transform:translate(-50%,-50%);background:#f4f8f8}.experiment:fullscreen{height:100dvh;min-height:0;background:#f7f8f5}.experiment:fullscreen .water-frame{border-radius:5px;box-shadow:0 0 0 1px #d3dedd}.palette-button{display:flex;align-items:center;gap:6px;background:#fbfcf9d9;border:1px solid #d7e2e3;border-radius:5px;padding:8px 10px;font-size:10px;color:#527486;white-space:nowrap;transition:background .2s,border-color .2s}.palette-button:hover{background:#edf3f5;border-color:#afc3d0}.palette-button svg{width:16px;height:16px}.palette-dialog{cursor:auto;max-width:440px;text-align:left}.palette-dialog h2{font-size:35px;margin-bottom:13px}.palette-editor{display:flex;flex-direction:column;margin:23px 0 17px;border-top:1px solid #dce5e2}.palette-row{display:flex;align-items:center;gap:15px;min-height:72px;border-bottom:1px solid #dce5e2;cursor:pointer}.palette-number{font-family:'Libre Caslon Display',Georgia,serif;font-size:24px;color:#8ca2ac}.palette-copy{display:flex;flex:1;flex-direction:column;gap:5px}.palette-copy strong{font-size:12px;font-weight:500}.palette-copy>span{font-size:10px;color:#83969e}.palette-color{appearance:none;-webkit-appearance:none;width:64px;height:40px;padding:4px;border:1px solid #cedddf;border-radius:6px;background:#fafcf9;cursor:pointer}.palette-color::-webkit-color-swatch-wrapper{padding:0}.palette-color::-webkit-color-swatch{border:0;border-radius:3px}.palette-color::-moz-color-swatch{border:0;border-radius:3px}.palette-note{font-size:10px!important;line-height:1.8!important;color:#879ba2}.experiment:fullscreen .palette-dialog{font-family:'DM Sans',sans-serif}
@container experiment (max-width:650px){.tray-top,.experiment:fullscreen .tray-top{padding:15px}.specimen{gap:10px}.specimen-number{font-size:27px;padding-right:10px}.specimen-caption{font-size:6px;letter-spacing:1.2px}.specimen h2{font-size:10px}.live-badge{display:none}.tray-actions{gap:3px}.tray-actions .icon-button{width:27px;height:30px}.palette-button{padding:7px 8px;font-size:9px}.palette-button svg{width:14px;height:14px}.toolbar,.experiment:fullscreen .toolbar{bottom:20px;gap:4px;padding:6px}.tool{padding:9px;gap:6px;font-size:10px}.tool svg{width:16px;height:16px}.toolbar-divider{margin:0 3px}.pigments{gap:6px;padding:0 2px}.swatch{width:15px;height:15px;border-width:2px}.toolbar>.icon-button{width:25px}.canvas-caption{bottom:86px;font-size:9px}.tray-corner{display:none}}
@container experiment (max-width:390px){.specimen-number{display:none}.specimen-caption{display:none}.specimen h2{font-size:9px}.palette-button{gap:5px;padding:7px;font-size:9px}.toolbar,.experiment:fullscreen .toolbar{gap:3px;padding:6px}.tool{padding:9px}.tool span{display:none}.tool svg{width:20px;height:20px}.toolbar-divider{margin:0 4px}.pigments{gap:9px}.swatch{width:17px;height:17px}.toolbar>.icon-button{width:30px}.embed-mode .specimen h2{font-size:9px}}
@container experiment (max-width:310px){.tray-top,.experiment:fullscreen .tray-top{padding:10px}.palette-button span{display:none}.palette-button{width:29px;height:29px;justify-content:center;padding:0}.toolbar,.experiment:fullscreen .toolbar{gap:2px;padding:5px}.tool{padding:7px}.toolbar-divider{margin:0 2px}.pigments{gap:7px}.toolbar>.icon-button{width:26px}.canvas-caption{font-size:8px;padding:0 10px}}
@container water (max-height:300px){.tray-top,.experiment:fullscreen .tray-top{padding:9px 12px}.specimen-caption,.canvas-caption{display:none}.toolbar,.experiment:fullscreen .toolbar{bottom:11px}.guide-label{display:none}}
.palette-detail{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:17px;margin-top:19px;border-top:1px solid #dce5e2}.palette-detail label{font-size:8px;letter-spacing:1.4px;color:#83999f}.palette-detail select{padding:7px 18px 7px 8px;border:1px solid #d4e0e1;border-radius:4px;font-size:11px}.detail-help{font-size:9px;line-height:1.7;color:#84979f}.palette-dialog>.detail-help{font-size:10px}.footer-right{flex-wrap:wrap;max-width:350px}.footer-right>.detail-help{flex-basis:100%;margin-top:1px}
/* A single fitted view keeps the water proportional in every layout. */
.experiment{display:flex;flex-direction:column;container-name:experiment;height:clamp(420px,57.3svh,750px);min-height:420px}.water-viewport{position:relative;flex:1 1 auto;min-height:0;container-type:size;container-name:water-viewport}.fullscreen-bar{display:none;flex:0 0 50px;height:50px;min-height:0;align-items:center;justify-content:space-between;gap:20px;padding:7px 15px;border-bottom:1px solid #e0e7e4;background:#f7f8f5}.fullscreen-bar>span{font-size:9px;letter-spacing:1.8px;color:#708b97}.exit-fullscreen{display:flex;align-items:center;gap:9px;border:1px solid #cbdadb;border-radius:5px;background:#fcfdfb;color:#476c81;font-size:11px;padding:8px 11px;white-space:nowrap}.exit-fullscreen:hover{background:#eaf1f3}.exit-fullscreen svg{width:15px;height:15px}.experiment:fullscreen,.embed-mode .experiment:fullscreen{height:100dvh;min-height:0}.experiment:fullscreen .fullscreen-bar{display:flex}.embed-mode .experiment{height:auto;min-height:220px}
@media(min-width:1600px){.experiment{height:max(420px,60svh)}.embed-mode .experiment{height:auto}}
@media(max-width:750px){.experiment{height:max(390px,54svh);min-height:390px}.embed-mode .experiment{height:auto;min-height:220px}}
@media(max-height:420px){.embed-mode .experiment{min-height:140px}.fullscreen-bar{flex-basis:50px;height:50px}.palette-dialog{max-height:calc(100dvh - 20px);overflow:auto}}
@container experiment (max-width:240px){.specimen{display:none}.tray-top{justify-content:flex-end}.palette-button span{display:inline}.palette-button{width:auto;padding:6px;gap:4px}.tool{padding:6px}.tool svg{width:16px;height:16px}.toolbar,.experiment:fullscreen .toolbar{padding:4px;gap:1px}.toolbar-divider{height:18px;margin:0 2px}.pigments{gap:6px}.swatch{width:14px;height:14px;border-width:2px}.toolbar>.icon-button{width:22px}.toolbar>.icon-button svg{width:16px;height:16px}}
@container experiment (max-width:180px){.palette-button span{display:none}.palette-button{width:27px;height:27px;justify-content:center;padding:0}.toolbar,.experiment:fullscreen .toolbar{max-width:calc(100% - 10px);overflow-x:auto;scrollbar-width:none}.toolbar>*{flex-shrink:0}.toolbar::-webkit-scrollbar{display:none}.canvas-caption{display:none}}

/* Controls share one visible, keyboard- and touch-accessible hit area. */
.select-wrap{display:block;width:100%;min-width:0}
.select-wrap::after{display:none}
select,.palette-detail select,.footer-right select{appearance:none;-webkit-appearance:none;min-height:44px;border:1px solid #b5c8cd;border-radius:5px;background-color:#fbfcfa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23536f7d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px 16px;background-position:right 12px center;padding:10px 38px 10px 12px;font-size:14px;line-height:1.4;color:#365968}
.select-wrap>select{display:block;width:100%;max-width:none;min-width:0}
select:hover:not(:disabled){border-color:#6c8a99}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #2c65a6;outline-offset:3px}
.field{min-width:0;gap:8px}
.preset-field{width:210px;min-width:180px;flex:1 1 200px}
.speed-field{width:150px;min-width:140px}
.field label{font-size:10px;letter-spacing:1.3px;color:#526c77}
.field label span{font-size:11px;color:#3e6278}
.range-labels{font-size:11px;color:#526c77}
.icon-button,.toolbar>.icon-button,.tray-actions .icon-button{width:44px;min-width:44px;height:44px;min-height:44px}
.palette-button,.tool,.mix-toggle,.demo-button,.exit-fullscreen,.text-button{min-height:44px}
.tool{font-size:13px;color:#506c7c;line-height:1.3}
.toolbar{max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:center;gap:6px;padding:8px}
.pigments{gap:2px;padding:0}
.swatch{position:relative;width:44px;min-width:44px;height:44px;border:0;padding:0;background:transparent;box-shadow:none}
.swatch::before{content:'';position:absolute;inset:11px;border:2px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #8aa2ad;transition:transform .15s}
.swatch.selected{box-shadow:none}
.swatch.selected::before{box-shadow:0 0 0 2px #386a9f}
.swatch:hover{transform:none}
.swatch:hover::before{transform:scale(1.08)}
.tray-actions{gap:4px}
.palette-button{min-width:44px;font-size:12px}
.mix-toggle,.demo-button{font-size:13px}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#547e99 var(--range-progress,38%),#94a9b1 var(--range-progress,38%))}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border:2px solid #547e99;border-radius:50%;background:#fbfcfa;box-shadow:none}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#94a9b1}
input[type=range]::-moz-range-progress{height:4px;background:#547e99}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:2px solid #547e99;border-radius:50%;background:#fbfcfa}
.fullscreen-bar{flex-basis:60px;height:60px}
.exit-fullscreen{font-size:13px}
dialog{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.dialog-close{position:sticky;float:right;top:0;margin:0 0 8px 12px;z-index:2;background:#fafbf8;outline-offset:-3px}
.palette-color{min-width:64px;min-height:44px}
.palette-detail{gap:12px;flex-wrap:wrap}
.palette-detail select{flex:1;min-width:160px;max-width:100%}
.download-dialog{max-width:440px;text-align:left}
.download-dialog h2{font-size:35px;line-height:1.15}
.download-field{margin:24px 0 12px}
.download-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:20px}
.download-actions .demo-button{min-width:90px;width:auto;padding:10px 14px}
.download-actions .download-primary{background:#315d90;border-color:#315d90;color:#fff}
.download-actions .download-primary:hover{background:#244b78}
.footer-link{min-height:44px;font-size:12px;color:#4e6b7c}
.footer-copy{flex-wrap:wrap}
.footer-copy p,.detail-help{font-size:11px;line-height:1.6;color:#526c77}
.footer-right{max-width:420px;align-items:center}
.footer-right label{font-size:10px;color:#526c77}
.footer-right select{min-width:150px;padding-right:38px}
.keyboard-note{font-size:12px;color:#526c77;margin-top:22px}
.keyboard-hints{font-size:11px;line-height:1.5;margin-top:12px}
.keyboard-hints kbd{font-size:11px}
.canvas-caption{color:#526c77}
.intro>p,.eyebrow{color:#526c77}
@container experiment (max-width:650px){
 .tray-top,.experiment:fullscreen .tray-top{padding:12px;justify-content:flex-end}
 .specimen{display:none}
 .tray-actions{gap:4px}
 .tray-actions .icon-button{width:44px;height:44px}
 .palette-button{font-size:12px;padding:10px}
 .toolbar,.experiment:fullscreen .toolbar{width:calc(100% - 20px);max-width:400px;bottom:14px;padding:6px;gap:6px 4px;overflow:visible}
 .tool-switch{flex:1 0 100%;min-width:0}
 .tool{flex:1;min-width:0;min-height:44px;padding:8px;font-size:12px;white-space:normal;justify-content:center}
 .tool span{display:inline;min-width:0}
 .tool svg{width:18px;height:18px}
 .toolbar-divider:first-of-type{display:none}
 .toolbar-divider{margin:0 2px}
 .pigments{gap:0;padding:0}
 .swatch,.toolbar>.icon-button{width:44px;min-width:44px;height:44px}
 .canvas-caption{bottom:139px;font-size:11px;line-height:1.5}
}
@container experiment (max-width:280px){.palette-button span{display:none}.palette-button{width:44px;height:44px;justify-content:center;padding:10px}.toolbar,.experiment:fullscreen .toolbar{gap:4px 2px;padding:4px}.toolbar-divider{display:none}.canvas-caption{display:none}}
@container experiment (max-width:240px){
 .tray-top,.experiment:fullscreen .tray-top{padding:8px}
 .tray-actions{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:thin}
 .tray-actions>*{flex-shrink:0}
 .toolbar,.experiment:fullscreen .toolbar{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin}
 .toolbar>*{flex-shrink:0}
 .tool-switch{flex:0 0 auto}
}
@media(max-width:750px){
 .experiment{height:max(460px,60svh);min-height:460px}
 .desktop-text{font-size:12px}
 .intro>p{font-size:14px}
 .settings{padding:24px 0;gap:18px}
 .settings-left,.embed-mode .settings-left{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px;width:100%;flex:1 1 100%}
 .settings-left .settings-divider{display:none}
 .preset-field,.embed-mode .preset-field{grid-column:1/-1;width:100%;max-width:none;min-width:0}
 .viscosity-field,.embed-mode .viscosity-field,.speed-field{display:flex;width:100%;max-width:none;min-width:0}
 .field label{font-size:10px}
 select,.palette-detail select,.footer-right select{font-size:16px}
 .settings-actions{gap:10px;grid-template-columns:1fr 1fr}
 .settings-actions .mix-toggle,.settings-actions .demo-button{font-size:12px;min-height:44px;padding:10px 8px}
 .demo-button svg{width:16px;height:16px}
 dialog{padding:24px 20px;width:calc(100% - 24px)}
 .embed-code{font-size:14px}
 footer{gap:12px}
 .footer-right{gap:8px}
}
@media(max-height:420px){.fullscreen-bar{flex-basis:60px;height:60px}.experiment:fullscreen,.embed-mode .experiment:fullscreen{min-height:0}}
@media(forced-colors:active){select,.palette-detail select,.footer-right select{appearance:auto;background-image:none;padding-inline-end:8px}}

/* Keep every control outside the fitted, interactive water volume. */
.experiment,.embed-mode .experiment{height:auto;min-height:0;container-type:inline-size}
.experiment>.water-viewport{flex:0 0 auto;height:clamp(420px,57.3svh,750px);min-height:0}
.experiment>.tray-top,.embed-mode .experiment>.tray-top,.experiment:fullscreen>.tray-top{position:static;inset:auto;flex:0 0 auto;width:100%;padding:14px 16px;border-bottom:1px solid #d3dedd;background:#f7f8f5;pointer-events:auto}
.water-controls{flex:0 0 auto;min-width:0;padding:12px 16px;border-top:1px solid #d3dedd;background:#f7f8f5}
.water-controls>.toolbar,.experiment:fullscreen .water-controls>.toolbar{position:static;inset:auto;transform:none;width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;justify-content:center;flex-wrap:wrap;gap:8px}
.water-controls>.canvas-caption,.embed-mode .water-controls>.canvas-caption{position:static;inset:auto;display:flex;margin:10px 0 0;padding:0;min-width:0;white-space:normal;line-height:1.6;text-align:center}
.water-controls>.canvas-caption.quiet{opacity:1}
.embed-mode .experiment>.water-viewport{flex:1 0 140px;height:auto;min-height:140px}
.experiment:fullscreen,.embed-mode .experiment:fullscreen{height:100dvh;min-height:0;overflow:auto;overscroll-behavior:contain}
.experiment:fullscreen>.water-viewport{flex:1 0 140px;height:auto;min-height:140px}
.experiment:fullscreen>.fullscreen-bar{position:sticky;top:0;z-index:5;flex-shrink:0}
.experiment:fullscreen>.tray-top{padding:8px 12px;justify-content:flex-end}
.experiment:fullscreen .specimen{display:none}
@media(min-width:1600px){.experiment>.water-viewport{height:max(420px,60svh)}}
@media(max-width:750px){.experiment>.water-viewport{height:max(460px,60svh)}}
@container experiment (max-width:650px){
 .experiment>.tray-top,.embed-mode .experiment>.tray-top,.experiment:fullscreen>.tray-top{padding:10px 12px;justify-content:flex-end}
 .water-controls{padding:12px}
 .water-controls .tool-switch{flex:1 0 100%;min-width:0}
 .water-controls .tool{flex:1;min-width:0;justify-content:center;padding:9px;font-size:12px}
 .water-controls .tool span{display:inline;min-width:0}
 .water-controls>.canvas-caption{font-size:11px}
}
@container experiment (max-width:350px){.water-controls .toolbar-divider{display:none}}
@container experiment (max-width:280px){.water-controls>.canvas-caption{display:none}}
@container experiment (max-width:240px){
 .water-controls>.toolbar,.experiment:fullscreen .water-controls>.toolbar{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin}
 .water-controls .tool-switch{flex:0 0 auto}
}
/* Offer the demonstration before the visitor reaches the water. */
.gesture-start{display:flex;flex:0 0 auto;justify-content:flex-start;padding:12px 16px;border-bottom:1px solid #d3dedd;background:#f7f8f5}
.gesture-start .demo-button{width:auto;min-width:180px;min-height:44px;height:auto;padding:12px 18px;gap:10px;overflow:visible;font-size:14px;background:#315d90;border-color:#315d90;color:#fff}
.gesture-start .demo-button:hover:not(:disabled){background:#244b78}
.gesture-start .demo-button svg{width:18px;height:18px;flex-shrink:0}
.settings-actions,.embed-mode .settings-actions{display:flex}
@media(max-width:750px){.gesture-start{padding:12px}.gesture-start .demo-button{width:100%;min-width:0;justify-content:center}.settings-actions .mix-toggle{width:100%;min-width:0}}