.fx-waterfall-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.fx-waterfall-wrap canvas{
  width:100%;
  height:100%;
  display:block;
}

.fx-dial{
  position:relative;
  width:220px;
  height:220px;
  border-radius:50%;
  flex-shrink:0;
  background:
    radial-gradient(circle,
      transparent 0 23%,
      rgba(var(--dial-color), .35) 23% 23.6%,
      transparent 23.6% 47%,
      rgba(var(--dial-color), .3) 47% 47.6%,
      transparent 47.6% 71%,
      rgba(var(--dial-color), .25) 71% 71.6%,
      transparent 71.6% 100%
    );
  overflow:hidden;
}
.fx-dial::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(var(--dial-color), .6), transparent 60deg, transparent 360deg);
  animation: fx-sweep 4.5s linear infinite;
}
.fx-dial::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:8px;height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;
  background:rgba(var(--dial-color), .9);
  box-shadow:0 0 12px rgba(var(--dial-color), .8);
}
.fx-dial .blip{
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(var(--dial-color), .95);
  box-shadow:0 0 8px rgba(var(--dial-color), .7);
  opacity:0;
  animation: fx-blip 4.5s ease-in-out infinite;
}

@keyframes fx-sweep{
  to{ transform:rotate(360deg); }
}
@keyframes fx-blip{
  0%, 78%, 100%{ opacity:0; }
  82%, 92%{ opacity:1; }
}

.fx-bars{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:36px;
}
.fx-bars span{
  display:block;
  width:4px;
  min-height:3px;
  border-radius:2px;
  background:rgba(var(--dial-color), .55);
  animation: fx-bar 1.2s ease-in-out infinite;
}
@keyframes fx-bar{
  0%, 100%{ height:15%; }
  50%{ height:100%; }
}

@media (max-width:700px){
  .fx-dial{ width:160px; height:160px; }
}