.loading-sprout {
  display: none;
  inline-size: 96px;
  block-size: 96px;
  max-inline-size: 100%;
  overflow: visible;
  margin: 0 auto 12px;
  pointer-events: none;
  user-select: none;
}

body[data-entry="checking"] .loading-sprout:not([hidden]) {
  display: block;
}

.loading-sprout[hidden] {
  display: none !important;
}

body.join-page[data-loading="true"] .loading-sprout:not([hidden]){display:block}


    /* Inline SVG uses the host preference and the existing external-style CSP. */
    .sprout-shoot {
      animation: sprout-reset 3s ease-in-out infinite;
    }
    .sprout-stem {
      transform-box: view-box;
      transform-origin: 60px 104px;
      animation: sprout-stem 3s cubic-bezier(.22, .61, .36, 1) infinite;
    }
    .sprout-tip {
      transform-box: view-box;
      transform-origin: 60px 56px;
      animation: sprout-tip 3s cubic-bezier(.22, .61, .36, 1) infinite;
    }
    .sprout-tile {
      transform-box: fill-box;
      transform-origin: center;
      animation: sprout-tile-first 3s cubic-bezier(.22, .61, .36, 1) infinite;
    }
    .sprout-tile-second {
      animation-name: sprout-tile-second;
    }
    .sprout-tile-third {
      animation-name: sprout-tile-third;
    }
    @keyframes sprout-stem {
      0%, 8% { transform: scaleY(0); }
      46%, 100% { transform: scaleY(1); }
    }
    @keyframes sprout-tip {
      0%, 46% { transform: scaleY(0); }
      68%, 100% { transform: scaleY(1); }
    }
    @keyframes sprout-reset {
      0%, 6% { opacity: 0; }
      8%, 86% { opacity: 1; }
      96%, 100% { opacity: 0; }
    }
    /* One shared clock: tiles appear low to high, then fade with the shoot. */
    @keyframes sprout-tile-first {
      0%, 24% { opacity: 0; transform: translateY(3px) scale(.86); }
      36%, 100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes sprout-tile-second {
      0%, 36% { opacity: 0; transform: translateY(3px) scale(.86); }
      48%, 100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes sprout-tile-third {
      0%, 48% { opacity: 0; transform: translateY(3px) scale(.86); }
      60%, 100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .sprout-shoot, .sprout-stem, .sprout-tip, .sprout-tile {
        animation: none;
        transform: none;
        opacity: 1;
      }
    }