#dust-library-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
  }

  .dust-particle {
    position: absolute;
    bottom: -30px;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: var(--opacity);

    background: #69D8C5;

    box-shadow:
      0 0 4px rgba(105,216,197,.9),
      0 0 8px rgba(53,170,158,.6),
      0 0 12px rgba(28,77,91,.45);

    animation:
      libraryFloat var(--speed) linear infinite,
      libraryPulse 4s ease-in-out infinite;

    animation-delay: var(--delay);
    will-change: transform;
  }

  .dust-particle:nth-child(3n) {
    background: #C7F3E8;

    box-shadow:
      0 0 4px rgba(199,243,232,.9),
      0 0 8px rgba(105,216,197,.55);
  }

  .dust-particle:nth-child(4n) {
    background: #4FB9B0;

    box-shadow:
      0 0 5px rgba(79,185,176,.9),
      0 0 10px rgba(105,216,197,.65);
  }

  .dust-particle.gold {
    background: #F0C7D8;

    box-shadow:
      0 0 5px rgba(240,199,216,.95),
      0 0 10px rgba(213,137,169,.75),
      0 0 16px rgba(255,239,247,.55);
  }

  @keyframes libraryFloat {
    0% {
      transform: translateY(0) translateX(0) scale(.8);
    }

    25% {
      transform: translateY(-25vh) translateX(12px) scale(1);
    }

    50% {
      transform: translateY(-50vh) translateX(-8px) scale(1.1);
    }

    75% {
      transform: translateY(-75vh) translateX(15px) scale(.95);
    }

    100% {
      transform: translateY(-115vh) translateX(-10px) scale(.8);
    }
  }

  @keyframes libraryPulse {

    0%,
    100% {
      opacity: calc(var(--opacity) * .7);
    }

    50% {
      opacity: var(--opacity);
    }
  }