.precipScene{
  height:100%;
  display:grid;
  place-items:center;
}

.beaker{
  position:relative;
  width:240px;
  height:300px;
  border-radius: 18px 18px 24px 24px;
  overflow:hidden;
  background: rgba(255,255,255,.55);
  border:2px solid rgba(15,23,42,.18);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}

/* glass shine */
.beakerGlass{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 24%, rgba(255,255,255,.34), transparent 55%),
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 30%, transparent 70%, rgba(255,255,255,.10));
  pointer-events:none;
}

/* liquids */
.liq{
  position:absolute;
  left:0; right:0;
  transition: height .5s ease, opacity .5s ease;
}
.liq.top{
  top:0;
  height:45%;
  background: linear-gradient(to bottom, rgba(59,130,246,.42), rgba(147,197,253,.25));
}
.liq.bottom{
  bottom:0;
  height:55%;
  background: linear-gradient(to top, rgba(34,197,94,.38), rgba(134,239,172,.18));
}

/* swirl effect */
.swirl{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 40%, rgba(59,130,246,.28), transparent 45%),
    radial-gradient(circle at 70% 55%, rgba(34,197,94,.22), transparent 48%),
    radial-gradient(circle at 50% 60%, rgba(251,191,36,.18), transparent 50%);
  filter: blur(.3px);
  transform: scale(1.02);
}
.swirl.active{
  opacity:1;
  animation: swirlMove 1.1s ease-in-out infinite;
}
@keyframes swirlMove{
  0%,100%{ transform: rotate(0deg) scale(1.02); }
  50%{ transform: rotate(8deg) scale(1.05); }
}

/* solid */
.solid{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:0%;
  opacity:0;
  transition: height .35s ease, opacity .35s ease;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.70), rgba(203,213,225,.55) 40%, rgba(148,163,184,.35)),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.65), rgba(203,213,225,.48) 45%, rgba(148,163,184,.30));
  border-top: 1px solid rgba(15,23,42,.10);
}
.solid.show{
  opacity:1;
}

/* sparkles */
.sparkles{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.spark{
  position:absolute;
  width:7px;height:7px;
  border-radius:999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 12px rgba(255,255,255,.55);
  animation: pop 1.2s ease-out forwards;
}
@keyframes pop{
  from{ transform: translateY(0) scale(.7); opacity:1; }
  to{ transform: translateY(-80px) scale(1.4); opacity:0; }
}

/* label */
.beakerLabel{
  position:absolute;
  left:10px;
  bottom:10px;
  right:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.12);
  backdrop-filter: blur(6px);
  font-weight:900;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:10px;
}
.miniTag{
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
  color:#334155;
  font-weight:1000;
}

.legend{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:12px;
  font-size:12px;
  color: var(--rr-muted);
  font-weight:900;
}