body.contributor-flow-open {
        overflow: hidden;
      }

      .contributor-flow-backdrop[hidden] {
        display: none !important;
      }

      .contributor-flow-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1000010;
        display: grid;
        place-items: center;
        padding: 1rem;
        overflow-y: auto;
        background: rgba(1, 7, 18, 0.82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }

      .contributor-flow-backdrop:not([hidden]) {
        animation: contributor-backdrop-in 220ms ease-out both;
      }

      .contributor-flow-modal {
        position: relative;
        width: min(100%, 720px);
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        color: #fff;
        border: 1px solid transparent;
        border-radius: 8px;
        background: linear-gradient(145deg, #101b0d 0%, #071525 58%, #06101c 100%);
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(183, 255, 0, 0.08), 0 0 44px rgba(183, 255, 0, 0.14);
        padding: 1.35rem;
        transform-origin: center;
        animation: contributor-modal-in 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      .contributor-flow-modal::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        padding: 1.5px;
        border-radius: inherit;
        background: conic-gradient(from 0deg at 50% 50%, #4B7CFF 0deg, #8B5CF6 45deg, #675CF6 68deg, #4B7CFF 88deg, #2ED1F4 114deg, #B7FF00 145deg, #B7FF00 220deg, #9BFF3C 244deg, #5BE9A4 272deg, #2ED1F4 315deg, #4B7CFF 360deg);
        background: conic-gradient(in oklch shorter hue from 0deg at 50% 50%, #4B7CFF 0deg, #8B5CF6 45deg, #675CF6 68deg, #4B7CFF 88deg, #2ED1F4 114deg, #B7FF00 145deg, #B7FF00 220deg, #9BFF3C 244deg, #5BE9A4 272deg, #2ED1F4 315deg, #4B7CFF 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }

      .contributor-flow-close {
        position: absolute;
        top: 0.9rem;
        right: 0.9rem;
        width: 2.35rem;
        height: 2.35rem;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 50%;
        color: rgba(255, 255, 255, 0.76);
        background: rgba(255, 255, 255, 0.06);
        transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
      }

      .contributor-flow-close:hover,
      .contributor-flow-close:focus-visible {
        border-color: rgba(183, 255, 0, 0.72);
        color: #fff;
        background: rgba(183, 255, 0, 0.1);
        outline: none;
      }

      .contributor-flow-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin: 0 2.75rem 0.65rem 0;
        color: #B7FF00;
        font-size: 0.72rem;
        font-weight: 850;
        line-height: 1;
        text-transform: uppercase;
      }

      .contributor-flow-kicker::before {
        content: '';
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 50%;
        background: #B7FF00;
        box-shadow: 0 0 16px rgba(183, 255, 0, 0.8);
      }

      .contributor-success-kicker::before {
        display: none;
      }

      .contributor-enrollment-kicker::before {
        display: none;
      }

      .contributor-flow-title {
        max-width: 610px;
        margin: 0;
        color: #fff;
        font-size: clamp(1.55rem, 4.4vw, 2.15rem);
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: 0;
      }

      .contributor-flow-lead {
        max-width: 650px;
        margin: 0.7rem 0 0;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
        line-height: 1.55;
      }

      .contributor-flow-reward-line {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin-top: 1rem;
      }

      .contributor-flow-reward-line strong {
        color: #B7FF00;
        font-size: clamp(1.65rem, 4vw, 2.1rem);
        font-weight: 900;
        line-height: 1;
      }

      .contributor-flow-reward-line span {
        color: rgba(255, 255, 255, 0.58);
        font-size: 0.78rem;
        font-weight: 750;
      }

      .contributor-flow-progress-shot {
        position: relative;
        margin: 1rem 0;
        overflow: hidden;
        border: 1px solid rgba(183, 255, 0, 0.38);
        border-radius: 22px;
        background: #07111d;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.32);
      }

      .contributor-flow-progress-shot img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: inherit;
      }

      .contributor-flow-progress-stamp {
        position: absolute;
        right: 0.7rem;
        bottom: 0.7rem;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.38rem 0.55rem;
        border: 1px solid rgba(183, 255, 0, 0.58);
        border-radius: 6px;
        color: #f4ffda;
        background: rgba(6, 16, 28, 0.88);
        font-size: 0.69rem;
        font-weight: 850;
        backdrop-filter: blur(8px);
      }

      .contributor-flow-scope-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
      }

      .contributor-flow-scope {
        min-width: 0;
        padding: 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.045);
      }

      .contributor-flow-scope h3 {
        margin: 0 0 0.45rem;
        color: #fff;
        font-size: 0.8rem;
        font-weight: 850;
        line-height: 1.25;
      }

      .contributor-flow-scope p {
        margin: 0;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.73rem;
        line-height: 1.48;
      }

      .contributor-flow-scope-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        width: fit-content;
        margin-top: 0.7rem;
        color: #B7FF00;
        font-size: 0.74rem;
        font-weight: 750;
        line-height: 1.35;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .contributor-flow-scope-link:hover {
        color: #d4ff66;
      }

      .contributor-flow-scope-link:focus-visible {
        outline: 2px solid rgba(183, 255, 0, 0.82);
        outline-offset: 3px;
      }

      .contributor-flow-consent {
        display: grid;
        grid-template-columns: 1.2rem minmax(0, 1fr);
        align-items: start;
        gap: 0.72rem;
        margin-top: 0.8rem;
        padding: 0.9rem;
        border: 1px solid rgba(46, 209, 244, 0.38);
        border-radius: 8px;
        background: rgba(46, 209, 244, 0.07);
        cursor: pointer;
      }

      .contributor-flow-consent input {
        width: 1.1rem;
        height: 1.1rem;
        margin: 0.15rem 0 0;
        accent-color: #B7FF00;
      }

      .contributor-flow-consent span {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.78rem;
        line-height: 1.52;
      }

      .contributor-flow-consent a {
        color: #B7FF00;
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      .contributor-flow-consent a:focus-visible {
        outline: 2px solid rgba(183, 255, 0, 0.82);
        outline-offset: 2px;
      }

      .contributor-flow-consent-health {
        border-color: rgba(244, 211, 94, 0.46);
        background: rgba(244, 211, 94, 0.09);
      }

      .contributor-flow-consent-terms {
        border-color: rgba(46, 209, 244, 0.38);
        background: rgba(46, 209, 244, 0.07);
      }

      .contributor-flow-legal {
        margin: 0.65rem 0 0;
        color: rgba(255, 255, 255, 0.48);
        font-size: 0.74rem;
        line-height: 1.5;
      }

      .contributor-flow-legal a {
        color: #B7FF00;
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      .contributor-flow-error {
        margin: 0.7rem 0 0;
        padding: 0.65rem 0.75rem;
        border: 1px solid rgba(248, 113, 113, 0.42);
        border-radius: 7px;
        color: #fecaca;
        background: rgba(127, 29, 29, 0.24);
        font-size: 0.73rem;
        line-height: 1.45;
      }

      .contributor-flow-actions {
        display: flex;
        align-items: stretch;
        gap: 0.65rem;
        margin-top: 1rem;
      }

      .contributor-flow-primary,
      .contributor-flow-secondary {
        min-height: 3rem;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 850;
        line-height: 1.25;
      }

      .contributor-flow-primary {
        flex: 1 1 0;
        padding: 0.72rem 1rem;
        color: #102000;
        border: 1px solid #B7FF00;
        background: #B7FF00;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
        transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
      }

      .contributor-flow-primary:not(:disabled):hover {
        background: #CAFF2F;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
        transform: translateY(-1px);
      }

      .contributor-flow-primary:focus-visible {
        outline: 3px solid rgba(183, 255, 0, 0.82);
        outline-offset: 3px;
      }

      .contributor-flow-primary:disabled {
        cursor: not-allowed;
        opacity: 0.48;
        box-shadow: none;
      }

      .contributor-flow-secondary {
        flex: 1 1 0;
        padding: 0.72rem 0.9rem;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.34);
        background: rgba(255, 255, 255, 0.08);
      }

      .contributor-success-modal {
        width: min(100%, 600px);
        text-align: center;
        overflow: hidden;
        animation: contributor-success-arrive 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      .contributor-success-mark {
        width: 4.2rem;
        height: 4.2rem;
        display: grid;
        place-items: center;
        margin: 0.2rem auto 0.85rem;
        border: 1px solid rgba(183, 255, 0, 0.7);
        border-radius: 50%;
        color: #102000;
        background: #B7FF00;
        box-shadow: 0 0 0 9px rgba(183, 255, 0, 0.08), 0 0 34px rgba(183, 255, 0, 0.35);
        animation: contributor-success-pop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
      }

      .contributor-success-mark svg {
        width: 2rem;
        height: 2rem;
      }

      .contributor-success-modal .contributor-flow-title,
      .contributor-success-modal .contributor-flow-lead {
        margin-right: auto;
        margin-left: auto;
      }

      .contributor-success-modal .contributor-success-kicker {
        display: flex;
        width: fit-content;
        justify-content: center;
        margin: 0 auto 0.65rem;
      }

      .contributor-success-modal .contributor-flow-progress-shot {
        max-width: 470px;
        margin-right: auto;
        margin-left: auto;
      }

      .contributor-success-modal .contributor-flow-kicker,
      .contributor-success-modal .contributor-flow-title,
      .contributor-success-modal .contributor-flow-lead,
      .contributor-success-modal .contributor-flow-progress-shot,
      .contributor-success-modal .contributor-confirmation-note,
      .contributor-success-modal .contributor-flow-actions {
        animation: contributor-success-content 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      .contributor-success-modal .contributor-flow-title { animation-delay: 70ms; }
      .contributor-success-modal .contributor-flow-lead { animation-delay: 110ms; }
      .contributor-success-modal .contributor-flow-progress-shot { animation-delay: 150ms; }
      .contributor-success-modal .contributor-confirmation-note { animation-delay: 230ms; }
      .contributor-success-modal .contributor-flow-actions { animation-delay: 270ms; }

      .contributor-success-confetti {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
      }

      .contributor-success-confetti i {
        position: absolute;
        top: -1rem;
        width: 0.45rem;
        height: 0.85rem;
        border-radius: 2px;
        background: #B7FF00;
        opacity: 0;
        animation: contributor-confetti 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      .contributor-success-confetti i:nth-child(2n) { background: #f4d35e; }
      .contributor-success-confetti i:nth-child(3n) { background: #2ed1f4; }
      .contributor-success-confetti i:nth-child(4n) { width: 0.34rem; height: 0.66rem; }
      .contributor-success-confetti i:nth-child(5n) { width: 0.56rem; height: 0.56rem; border-radius: 50%; }
      .contributor-success-confetti i:nth-child(1) { left: 8%; animation-delay: 0.04s; }
      .contributor-success-confetti i:nth-child(2) { left: 19%; animation-delay: 0.16s; }
      .contributor-success-confetti i:nth-child(3) { left: 32%; animation-delay: 0.09s; }
      .contributor-success-confetti i:nth-child(4) { left: 46%; animation-delay: 0.22s; }
      .contributor-success-confetti i:nth-child(5) { left: 58%; animation-delay: 0.02s; }
      .contributor-success-confetti i:nth-child(6) { left: 71%; animation-delay: 0.18s; }
      .contributor-success-confetti i:nth-child(7) { left: 84%; animation-delay: 0.07s; }
      .contributor-success-confetti i:nth-child(8) { left: 93%; animation-delay: 0.25s; }
      .contributor-success-confetti i:nth-child(9) { left: 4%; animation-delay: 0.31s; }
      .contributor-success-confetti i:nth-child(10) { left: 14%; animation-delay: 0.12s; }
      .contributor-success-confetti i:nth-child(11) { left: 26%; animation-delay: 0.38s; }
      .contributor-success-confetti i:nth-child(12) { left: 39%; animation-delay: 0.21s; }
      .contributor-success-confetti i:nth-child(13) { left: 52%; animation-delay: 0.43s; }
      .contributor-success-confetti i:nth-child(14) { left: 65%; animation-delay: 0.28s; }
      .contributor-success-confetti i:nth-child(15) { left: 77%; animation-delay: 0.36s; }
      .contributor-success-confetti i:nth-child(16) { left: 89%; animation-delay: 0.15s; }
      .contributor-success-confetti i:nth-child(17) { left: 11%; animation-delay: 0.48s; }
      .contributor-success-confetti i:nth-child(18) { left: 23%; animation-delay: 0.33s; }
      .contributor-success-confetti i:nth-child(19) { left: 35%; animation-delay: 0.56s; }
      .contributor-success-confetti i:nth-child(20) { left: 48%; animation-delay: 0.41s; }
      .contributor-success-confetti i:nth-child(21) { left: 61%; animation-delay: 0.6s; }
      .contributor-success-confetti i:nth-child(22) { left: 74%; animation-delay: 0.47s; }
      .contributor-success-confetti i:nth-child(23) { left: 87%; animation-delay: 0.54s; }
      .contributor-success-confetti i:nth-child(24) { left: 97%; animation-delay: 0.39s; }
      .contributor-success-confetti i:nth-child(25) { left: 2%; animation-delay: 0.63s; }
      .contributor-success-confetti i:nth-child(26) { left: 17%; animation-delay: 0.51s; }
      .contributor-success-confetti i:nth-child(27) { left: 29%; animation-delay: 0.68s; }
      .contributor-success-confetti i:nth-child(28) { left: 43%; animation-delay: 0.58s; }
      .contributor-success-confetti i:nth-child(29) { left: 56%; animation-delay: 0.72s; }
      .contributor-success-confetti i:nth-child(30) { left: 82%; animation-delay: 0.64s; }

      @keyframes contributor-success-pop {
        from { opacity: 0; transform: scale(0.72) rotate(-7deg); }
        to { opacity: 1; transform: scale(1) rotate(0); }
      }

      @keyframes contributor-backdrop-in {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes contributor-modal-in {
        from { opacity: 0; transform: translateY(20px) scale(0.96); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }

      @keyframes contributor-success-arrive {
        0% { opacity: 0; transform: translateY(28px) scale(0.9); }
        68% { opacity: 1; transform: translateY(-3px) scale(1.012); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }

      @keyframes contributor-success-content {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes contributor-confetti {
        0% { top: -1rem; opacity: 0; transform: rotate(0); }
        14% { opacity: 1; }
        72% { opacity: 0.9; }
        100% { top: calc(100% + 1rem); opacity: 0; transform: rotate(480deg); }
      }

      @media (max-width: 640px) {
        .contributor-flow-backdrop {
          place-items: end center;
          padding: 0;
        }

        .contributor-flow-modal {
          width: 100%;
          max-height: 92vh;
          border-right: 0;
          border-bottom: 0;
          border-left: 0;
          border-radius: 8px 8px 0 0;
          padding: 1.1rem;
        }

        .contributor-flow-scope-grid {
          grid-template-columns: 1fr;
        }

        .contributor-flow-actions {
          flex-direction: column;
        }

        .contributor-flow-secondary {
          order: 2;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .contributor-flow-backdrop,
        .contributor-flow-modal,
        .contributor-success-mark,
        .contributor-success-confetti i,
        .contributor-success-modal .contributor-flow-kicker,
        .contributor-success-modal .contributor-flow-title,
        .contributor-success-modal .contributor-flow-lead,
        .contributor-success-modal .contributor-flow-progress-shot,
        .contributor-success-modal .contributor-confirmation-note,
        .contributor-success-modal .contributor-flow-actions {
          animation: none !important;
        }
      }