:root {
  --marble-size: 24px;
  --marble-gap: 4px;
  --bin-height: 360px;
}

body {
  font-family: "Baloo 2", "Comic Sans MS", "Trebuchet MS", cursive, sans-serif;
}

.marble {
  width: var(--marble-size);
  height: var(--marble-size);
  border-radius: 9999px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, calc(-1 * var(--drop-distance, 0px)));
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  will-change: transform;
}

.sparkle {
  background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

.bin {
  height: var(--bin-height);
}

.bin-shell {
  border-radius: 0 0 24px 24px;
}

.axis-line {
  height: 6px;
}