/* Erlenmeyer flask: the liquid clip and physics share a 220 x 230 coordinate space. */
:root{--neon-alkali:#ff46b1;--neon-alkaline:#ffad32;--neon-transition:#42caff;--neon-post:#23f4c3;--neon-metalloid:#b4ff3d;--neon-nonmetal:#ba73ff;--neon-halogen:#ffe946;--neon-noble:#4cf3ff;--neon-lanthanide:#ff60e1;--neon-actinide:#ff618e}
.beaker-stage{min-height:245px;margin-bottom:-8px;transform:scale(.94);transform-origin:center}
.beaker-stage .beaker{position:relative;width:220px;height:230px;flex:none;transform:none;filter:drop-shadow(0 15px 17px #0005);animation:none}
.beaker-stage.sifting .beaker,.beaker-stage.fusing .beaker,.beaker-stage.fused .beaker{animation:none;transform:none;opacity:1;filter:drop-shadow(0 15px 17px #0005)}
.beaker-stage .beaker-wall{position:absolute;inset:0;width:220px;height:230px;border:0;border-radius:0;background:none;box-shadow:none;overflow:hidden;clip-path:polygon(40% 7.83%,60% 7.83%,60% 28.7%,91.82% 87.83%,91.82% 91.3%,8.18% 91.3%,8.18% 87.83%,40% 28.7%)}
.beaker-stage .glass-shine{display:none}
.flask-glass{position:absolute;inset:0;width:220px;height:230px;z-index:5;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 4px #9bdfff35)}
.flask-glass .flask-outline{fill:url(#flaskGlassGradient);stroke:#b3d6ed;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.flask-glass .flask-rim{fill:#22304a;stroke:#d6efff;stroke-width:1.7}
.flask-glass .flask-rim-inner{fill:#111b30;stroke:#8facce;stroke-width:1;opacity:.92}
.flask-glass .flask-shine{fill:none;stroke:#e4f8ff;stroke-width:3.3;stroke-linecap:round;opacity:.39}
.flask-glass .flask-shine-thin{fill:none;stroke:#c5eaff;stroke-width:1.2;stroke-linecap:round;opacity:.24}
.flask-glass .flask-mark{fill:none;stroke:#c2e5f7;stroke-width:1.3;stroke-linecap:round;opacity:.45}
.flask-glass .flask-foot{fill:none;stroke:#cceaff;stroke-width:2;stroke-linecap:round;opacity:.28}

/* Keep the chosen neon hues visible as ribbons instead of dissolving to a gray average. */
.beaker-stage .liquid,.beaker-stage.sifting .liquid,.beaker-stage.fusing .liquid{position:absolute;left:0;right:0;bottom:20px;width:220px;border-radius:0;border-top:1px solid color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 68%,#f1ffff);background:linear-gradient(180deg,color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 82%,#18203a) 0%,color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 72%,#16142e) 72%,color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 60%,#101b2b) 100%);box-shadow:inset 0 -18px 26px #0e12232b,0 0 30px color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 38%,transparent);transition:height .5s ease,background .6s ease,border-color .6s ease,box-shadow .6s ease;isolation:isolate;z-index:0}
.beaker-stage .liquid:before{content:'';position:absolute;left:0;top:-5px;width:100%;height:10px;border-radius:50%;background:color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 70%,#ecffff);border-top:1px solid #edffff86;box-shadow:0 0 11px color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 68%,transparent);opacity:.83;z-index:3}
.beaker-stage .liquid:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,#ffffff18,transparent 25% 68%,#08172a1a);z-index:2}
.beaker-stage .liquid-colors{position:absolute;inset:0;overflow:hidden;isolation:isolate;border-radius:0;pointer-events:none;z-index:1}
.beaker-stage .dye-cloud{position:absolute;bottom:-30%;width:110%;height:160%;border-radius:46%;background:radial-gradient(ellipse at 42% 40%,var(--dye-color) 0%,color-mix(in srgb,var(--dye-color) 92%,transparent) 30%,transparent 68%);mix-blend-mode:normal;filter:blur(5px) saturate(1.35);opacity:.68;animation:flask-liquid-current 6.5s ease-in-out infinite alternate;animation-delay:var(--dye-delay,0s);transform-origin:50% 65%}
.beaker-stage .dye-cloud:nth-child(even){bottom:-15%;mix-blend-mode:screen;opacity:.38;animation-duration:7.6s;animation-direction:alternate-reverse}
.beaker-stage.sifting .dye-cloud{animation-duration:2.4s;opacity:.7}.beaker-stage.sifting .dye-cloud:nth-child(even){opacity:.42}
.beaker-stage .color-plume{width:90px;height:145px;top:0;background:radial-gradient(ellipse at 45% 25%,var(--dye-color) 0%,color-mix(in srgb,var(--dye-color) 87%,transparent) 32%,transparent 72%);filter:blur(3px) saturate(1.4);mix-blend-mode:screen;z-index:3}
.beaker-stage .beaker-halo{width:280px;height:255px;left:50%;top:0;translate:-50% 0;background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 24%,transparent),transparent 68%);transition:background .5s}
.beaker-stage.fused .beaker-halo{background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--liquid-base,var(--mixture-color,#ba73ff)) 19%,transparent),transparent 68%)}

/* Every selected element is a separately positioned glass marble. */
.beaker-stage #beaker-atoms{position:absolute;inset:0;width:220px;height:230px;display:block;overflow:visible;z-index:3;pointer-events:none}
.beaker-stage #beaker-atoms .atom.flask-ball{position:absolute;left:0;top:0;display:grid;place-items:center;flex:none;padding:0;margin:0;gap:0;animation:none!important;translate:none;rotate:none;border-radius:50%;border:1px solid color-mix(in srgb,var(--atom-color) 75%,#ffffff);background:radial-gradient(circle at 28% 23%,#ffffffed 0 3%,#ffffff46 9%,transparent 21%),radial-gradient(circle at 35% 26%,color-mix(in srgb,var(--atom-color) 84%,#fff) 0%,var(--atom-color) 36%,color-mix(in srgb,var(--atom-color) 62%,#16283d) 73%,#15243e 100%);box-shadow:inset 1px 1px 3px #ffffff80,inset -3px -4px 5px #0612216b,0 1px 3px #07112066,0 0 9px color-mix(in srgb,var(--atom-color) 45%,transparent);color:#f9fdff;text-shadow:0 1px 2px #0d1838,0 0 3px #0d1838;font-family:'Space Grotesk',Arial,sans-serif;font-size:11px;font-weight:700;line-height:1;letter-spacing:-.35px;pointer-events:none;will-change:transform}
.beaker-stage #beaker-atoms .atom.flask-ball:after{content:'';position:absolute;inset:2px;border:1px solid #ffffff14;border-top-color:#ffffff44;border-radius:50%;pointer-events:none}
.beaker-stage .empty-beaker{inset:70px 0 30px;gap:0;color:#9ec4dd;pointer-events:none}.beaker-stage .empty-beaker>span{font-size:26px;color:#b1cce0;opacity:.55;text-shadow:0 0 13px #82cfff39}
.beaker-stage .beaker-bubbles{position:absolute;inset:0 0 20px;width:220px;border-radius:0;overflow:hidden;z-index:4;pointer-events:none}
.beaker-stage .beaker-bubble{border:1px solid color-mix(in srgb,var(--bubble-color) 64%,#fff);background:radial-gradient(circle at 28% 22%,#fff 0 9%,#ffffff55 13%,transparent 30%),color-mix(in srgb,var(--bubble-color) 27%,transparent);box-shadow:0 0 9px color-mix(in srgb,var(--bubble-color) 58%,transparent),inset 0 0 4px #ffffff59}
@keyframes flask-liquid-current{from{transform:translate(-10%,-3%) rotate(-24deg) scale(.92)}to{transform:translate(9%,8%) rotate(32deg) scale(1.15)}}
@media(max-width:760px){.beaker-stage{min-height:228px;transform:scale(.8);margin-bottom:-22px}.beaker-stage .beaker-halo{width:260px;height:245px;top:0}}
@media(prefers-reduced-motion:reduce){.beaker-stage .dye-cloud{animation:none!important;will-change:auto}.beaker-stage .liquid,.beaker-stage .beaker-halo{transition:none}.beaker-stage #beaker-atoms .atom.flask-ball{will-change:auto}.beaker-stage .color-plume,.beaker-stage .beaker-bubble{display:none}}