/* Foreground water sits above the marbles; the shared flask wall clips every layer. */
.beaker-stage #water-overlay{position:absolute;left:0;right:0;top:var(--water-y,130px);bottom:20px;width:220px;overflow:hidden;border-radius:0;pointer-events:none;z-index:4;background:linear-gradient(180deg,color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 23%,transparent),color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 28%,transparent) 44%,color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 35%,transparent)),linear-gradient(104deg,#dfffff0f 0%,transparent 25% 70%,#061e3620 100%);box-shadow:inset 0 2px 0 #edffff59,inset 0 7px 12px #d9ffff09,inset 0 -14px 18px #08233b1c;isolation:isolate;transition:none}
/* Keep the visible surface at the same immediate height used by collision physics. */
.beaker-stage .liquid,.beaker-stage.sifting .liquid,.beaker-stage.fusing .liquid{transition:background .6s ease,border-color .6s ease,box-shadow .6s ease}
/* Quiet, straight reflections cannot be mistaken for a splash from the flask center. */
.beaker-stage #water-overlay:before{content:'';position:absolute;left:0;right:0;top:0;width:100%;height:2px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,#edffff45 18%,#edffff25 78%,transparent);box-shadow:none;pointer-events:none;animation:none;transform:none}
.beaker-stage #water-overlay:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 12%,#eaffff13 20%,transparent 29% 68%,#d8ffff0e 76%,transparent 84%);opacity:.55;mix-blend-mode:screen;animation:none;transform:none}
.beaker-stage .liquid:before{left:0;right:0;top:0;width:100%;height:2px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,#edffff30 18%,#edffff1a 78%,transparent);box-shadow:none;opacity:.6;animation:none;transform:none}

/* Depth softens the rim and adds a liquid-colored film, while symbols stay sharp. */
.beaker-stage #beaker-atoms .atom.flask-ball.is-submerged{opacity:var(--water-opacity,.89);filter:brightness(var(--water-brightness,.93)) saturate(1.2);border-color:color-mix(in srgb,var(--atom-color) 52%,#c5f3ff);box-shadow:inset 1px 2px 4px #dbfcff40,inset -3px -4px 6px #073d5466,0 2px 4px #052c4840,0 0 7px color-mix(in srgb,var(--atom-color) 30%,transparent);color:#f3fcff;text-shadow:0 1px 2px #092944,0 0 3px #0c1e38;transition:opacity .2s ease,filter .2s ease,border-color .2s ease,box-shadow .2s ease}
.beaker-stage #beaker-atoms .atom.flask-ball.is-submerged:before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(166deg,#eaffff38 0%,transparent 27% 50%,color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 32%,transparent) 72%,#b6f8ff1f 100%);box-shadow:inset 0 -2px 3px color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 34%,transparent);opacity:var(--water-depth,.7)}
/* Attached foam follows the body itself; moving bubbles are emitted by the simulation. */
.beaker-stage #beaker-atoms .atom.flask-ball.is-submerged:after{inset:-2px;border:0;box-shadow:none;border-radius:50%;background:radial-gradient(circle at 15% 30%,transparent 0 .55px,#edfaffba .7px 1.1px,transparent 1.4px),radial-gradient(circle at 36% 8%,#f0ffff9c 0 .6px,transparent 1.2px),radial-gradient(circle at 70% 12%,transparent 0 .65px,#e8ffffb3 .8px 1.2px,transparent 1.5px),radial-gradient(circle at 91% 40%,#eaffffab 0 .65px,transparent 1.3px),radial-gradient(circle at 84% 74%,transparent 0 .5px,#e4ffffa6 .7px 1.05px,transparent 1.4px),radial-gradient(circle at 60% 95%,#eaffff8c 0 .65px,transparent 1.2px),radial-gradient(circle at 25% 87%,transparent 0 .6px,#ecffffa3 .8px 1.15px,transparent 1.45px),radial-gradient(circle at 7% 62%,#eaffffad 0 .7px,transparent 1.3px);opacity:var(--water-depth,.7);pointer-events:none;will-change:auto}
.beaker-stage.sifting #beaker-atoms .atom.flask-ball.is-submerged:after,.beaker-stage.fused #beaker-atoms .atom.flask-ball.is-submerged:after{background:none}

/* The simulation supplies finite lifetimes and trajectories for these particles. */
.beaker-stage #water-surface-effects{position:absolute;inset:0;width:220px;height:230px;overflow:hidden;z-index:6;pointer-events:none}
.beaker-stage #water-fizz{position:absolute;inset:0;width:220px;height:230px;overflow:hidden;z-index:5;pointer-events:none}
/* Reactions begin beneath the entering ball, behind its label and inside the water. */
.beaker-stage #water-reaction{position:absolute;inset:0;width:220px;height:230px;overflow:hidden;clip-path:inset(var(--water-y,130px) 0 20px);z-index:2;pointer-events:none}
.beaker-stage .ball-reaction-wave{position:absolute;left:0;top:0;width:58px;height:34px;border:0;border-bottom:1.2px solid color-mix(in srgb,var(--reaction-color,var(--splash-color,var(--liquid-base,#b876ff))) 45%,#dff5ff);border-radius:0 0 52% 48% / 0 0 68% 72%;background:none;box-shadow:none;filter:blur(.2px);opacity:.3;transform:translate(-50%,0);transform-origin:50% 0;pointer-events:none;will-change:transform,opacity}
.beaker-stage .ball-reaction-plume{position:absolute;left:0;top:0;width:62px;height:56px;border:0;border-radius:0;background:conic-gradient(from 145deg at 50% 0%,transparent 0deg,color-mix(in srgb,var(--reaction-color,var(--splash-color,var(--liquid-base,#b876ff))) 55%,transparent) 18deg,color-mix(in srgb,var(--reaction-color,var(--splash-color,var(--liquid-base,#b876ff))) 72%,#dff5ff33) 35deg,color-mix(in srgb,var(--reaction-color,var(--splash-color,var(--liquid-base,#b876ff))) 50%,transparent) 52deg,transparent 70deg 360deg);mask-image:linear-gradient(180deg,#000 0%,#000c 28%,#0005 60%,transparent 100%);box-shadow:none;filter:blur(.75px);opacity:.3;transform:translate(-50%,0);transform-origin:50% 0;pointer-events:none;will-change:transform,opacity}
.beaker-stage .water-ring{position:absolute;left:0;top:0;width:30px;height:7px;border:1px solid color-mix(in srgb,var(--splash-color,var(--liquid-base,#b876ff)) 24%,#edffff);border-top-color:#eaffff70;border-bottom-width:1.35px;border-radius:47% 53% 49% 51% / 44% 48% 52% 56%;background:radial-gradient(ellipse,transparent 36%,#eaffff0e 63%,transparent 82%);box-shadow:0 0 5px color-mix(in srgb,var(--splash-color,var(--liquid-base,#b876ff)) 36%,transparent),inset 0 0 3px #e4ffff29;transform-origin:center;pointer-events:none;will-change:transform,opacity}
.beaker-stage .water-ring:after{content:'';position:absolute;inset:1px 3px -2px 2px;border-bottom:1px solid #eaffff6b;border-radius:46% 54% 51% 49%;pointer-events:none}
.beaker-stage .water-entry-dimple{position:absolute;left:0;top:0;width:28px;height:9px;border-radius:48% 52% 48% 52%;border:.8px solid color-mix(in srgb,var(--splash-color,var(--liquid-base,#b876ff)) 35%,#d6f4ff);border-top-color:#d9ffff38;border-bottom-color:#edffffba;background:radial-gradient(ellipse at 50% 28%,#102c426b 0%,color-mix(in srgb,var(--splash-color,var(--liquid-base,#b876ff)) 25%,#12334938) 50%,transparent 78%);box-shadow:inset 0 2px 3px #0c304552,0 2px 3px #dfffff20;transform-origin:50% 20%;pointer-events:none;will-change:transform,opacity}
.beaker-stage .splash-crown{position:absolute;left:0;top:0;width:42px;height:18px;pointer-events:none;transform-origin:50% 100%;background:linear-gradient(180deg,#f4ffffd9 0%,color-mix(in srgb,var(--splash-color,var(--liquid-base,#b876ff)) 73%,#eaffff) 34%,color-mix(in srgb,var(--splash-color,var(--liquid-base,#b876ff)) 55%,transparent) 80%,transparent 100%);clip-path:polygon(0 24%,11% 52%,16% 8%,27% 47%,34% 0,44% 48%,52% 7%,62% 49%,72% 1%,79% 47%,89% 18%,94% 55%,100% 31%,96% 84%,80% 95%,50% 100%,20% 95%,4% 84%);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--splash-color,var(--liquid-base,#b876ff)) 60%,transparent));will-change:transform,opacity}
.beaker-stage .splash-crown:after{content:'';position:absolute;left:6%;right:6%;bottom:1px;height:7px;border:1px solid #edffffb3;border-radius:50%;background:#eaffff16}
.beaker-stage .water-splash-droplet{position:absolute;left:0;top:0;width:4px;height:6px;border-radius:50% 50% 44% 44%;border:1px solid color-mix(in srgb,var(--splash-color,var(--liquid-base,#b876ff)) 40%,#f5ffff);background:radial-gradient(circle at 27% 20%,#ffffffed 0 16%,transparent 42%),color-mix(in srgb,var(--splash-color,var(--liquid-base,#b876ff)) 72%,transparent);box-shadow:0 0 7px color-mix(in srgb,var(--splash-color,var(--liquid-base,#b876ff)) 65%,transparent);pointer-events:none;will-change:transform,opacity}
/* Retire the old surface-anchored oval cloud and large central color plume. */
.beaker-stage .water-impact-cloud,.beaker-stage .color-plume{display:none}
.beaker-stage .atom-fizz-bubble{position:absolute;left:0;top:0;width:3px;height:3px;min-width:1px;min-height:1px;border-radius:50%;border:.75px solid color-mix(in srgb,var(--bubble-color,var(--liquid-base,#ba73ff)) 24%,#f5ffff);background:radial-gradient(circle at 25% 20%,#ffffffed 0 19%,transparent 47%),color-mix(in srgb,var(--bubble-color,var(--liquid-base,#ba73ff)) 23%,transparent);box-shadow:0 0 5px color-mix(in srgb,var(--bubble-color,var(--liquid-base,#ba73ff)) 49%,transparent),inset 0 -.5px 1px #ccffff69;opacity:.8;pointer-events:none;will-change:transform,opacity}
.beaker-stage .flask-glass{z-index:7}
.beaker-stage .flask-glass .flask-shine{opacity:.45}.beaker-stage .flask-glass .flask-shine-thin{opacity:.31}
@media(prefers-reduced-motion:reduce){.beaker-stage #water-overlay{transition:none}.beaker-stage #water-overlay:before,.beaker-stage #water-overlay:after{animation:none}.beaker-stage #beaker-atoms .atom.flask-ball.is-submerged{transition:none}.beaker-stage .water-ring,.beaker-stage .water-splash-droplet,.beaker-stage .atom-fizz-bubble,.beaker-stage .splash-crown,.beaker-stage .water-impact-cloud,.beaker-stage .water-entry-dimple,.beaker-stage .ball-reaction-wave,.beaker-stage .ball-reaction-plume{display:none;will-change:auto}}