/* Application adaptation of React Bits Meta Balls / Click Spark; see JS license notice. */
/* The known yellow scene is refracted in the WebGL sphere. The thin clear body
   samples the actual surface with CSS backdrop filtering instead of a DOM capture. */
/* A decorative yellow halo underneath would tint the clear body. The only
   yellow behind the glass is the actual refracted content, not a wash layer. */
.player-orb:has(.meditation-metaballs) .orb-halo {
  display: none;
}
.orb:has(> .meditation-metaballs) {
  background: transparent;
  box-shadow:
    0 14px 26px rgb(21 21 21 / 0.055),
    0 3px 7px rgb(21 21 21 / 0.035);
}
.meditation-metaballs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(145deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.01));
  -webkit-backdrop-filter: blur(2px) saturate(1.18);
  backdrop-filter: blur(2px) saturate(1.18);
  pointer-events: none;
}
.meditation-meta-canvas,
.meditation-meta-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.meditation-meta-canvas[hidden],
.meditation-meta-fallback[hidden] {
  display: none;
}
/* No animation in the reduced-motion or unavailable-context fallback. */
.meditation-meta-fallback {
  background: linear-gradient(145deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.02));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.82),
    inset 0 0 0 3px rgb(21 21 21 / 0.055),
    inset 0 -9px 15px rgb(21 21 21 / 0.025);
}
.meditation-meta-fallback::before {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  content: "";
  background:
    radial-gradient(circle at 34% 47%, var(--metaball-yellow, #f5d547) 0 21%, transparent 22%),
    radial-gradient(circle at 60% 39%, var(--metaball-yellow, #f5d547) 0 23%, transparent 24%),
    radial-gradient(circle at 53% 64%, var(--metaball-yellow, #f5d547) 0 19%, transparent 20%);
}
.meditation-meta-fallback::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  background:
    radial-gradient(ellipse 29% 9% at 34% 25%, rgb(255 255 255 / 0.94), transparent 100%),
    radial-gradient(ellipse 16% 4% at 71% 78%, rgb(255 255 255 / 0.85), transparent 100%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 0.95),
    inset 0 -2px 2px rgb(21 21 21 / 0.055);
}
.habit-confetti-canvas {
  position: fixed;
  width: 180px;
  height: 180px;
  z-index: 2147483646;
  pointer-events: none;
  user-select: none;
  contain: strict;
}