.love-letter-container {
            padding: 2rem 1.5rem;
            position: relative
        }
:root {
    --primary: #db2777;
    --primary-light: #fce7f3;
}
        .love-letter-background {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200%;
            height: 200%;
            pointer-events: none;
            background: radial-gradient(circle at center, #f9a8d447 0, #fce7f330 50%, #0000 70%)
        }

        .love-letter-heading {
            font-family: "Great Vibes", "Dancing Script", "Playfair Display", "Noto Serif", "Times New Roman", serif;
            font-size: 2.5rem;
            color: #db2777;
            font-weight: 700;
            letter-spacing: .02em;
            text-shadow: 0 2px 8px #fbcfe8;
            font-feature-settings: "kern" 1;
            text-rendering: optimizeLegibility;
            unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2000-206F;
        }

        .love-letter-body {
            font-size: 1.12rem;
            font-style: italic;
            color: #4e3b47;
            line-height: 2;
            font-family: "Noto Serif", "Source Serif Pro", Cambria, serif
        }

        .love-letter-highlight {
            color: #db2777;
            font-weight: 600;
            background: linear-gradient(90deg, #fbcfe833, #f7afd499);
            border-radius: .4em;
            padding: 0 .2em
        }

        .love-letter-flourish {
            display: flex;
            justify-content: center;
            margin-top: 1.5rem;
            opacity: .7
        }

        .bg-donate {
            background: radial-gradient(at 50% 75%, #306beb, #2f69e6 5.79%, #2e66de 10.88%, #2c61d3 15.63%, #295bc6 20.37%, #2655b6 25.46%, #234da4 31.25%, #204590 38.08%, #1c3d7a 46.3%, #193463 56.25%, #152c4d 68.29%, #132639 82.75%, #122430);
            background-size: 100% 100%
        }

        .donate-btn {
            border-radius: .5rem;
            border-width: 2px;
            --tw-border-opacity: 1;
            border-color: rgb(209 213 219/var(--tw-border-opacity));
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255/var(--tw-bg-opacity));
            padding-left: .75rem;
            padding-right: .75rem;
            padding-top: .5rem;
            padding-bottom: .5rem;
            font-size: .875rem;
            line-height: 1.25rem;
            font-weight: 600;
            --tw-text-opacity: 1;
            color: rgb(31 41 55/var(--tw-text-opacity));
            transition: all 0.3s ease;
        }

        .donate-btn:focus {
            outline: 2px solid #0000;
            outline-offset: 2px
        }

        .donate-btn--selected {
            --tw-border-opacity: 1;
            border-color: #db2777;
            --tw-bg-opacity: 1;
            background-color: #fce7f3;
        }

        .banking-label {
            color: rgb(55 65 81/var(--tw-text-opacity));
            font-size: .875rem;
            line-height: 1.25rem;
        }

        .banking-value {
            text-align: right;
            font-weight: 700;
            color: rgb(17 24 39/var(--tw-text-opacity));
            font-size: .875rem;
            line-height: 1.25rem;
        }

        .close-btn {
            display: flex;
            align-items: center;
            gap: .25rem;
            border-radius: .5rem;
            padding-left: 1rem;
            padding-right: 1rem;
            padding-top: .5rem;
            padding-bottom: .5rem;
            font-size: .75rem;
            line-height: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            --tw-text-opacity: 1;
            color: rgb(75 85 99/var(--tw-text-opacity));
            transition: all 0.2s;
            background-color: #f3f4f6;
        }

        .close-btn:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(229 231 235/var(--tw-bg-opacity))
        }

        .month-nav-btn {
            display: flex;
            height: 2rem;
            width: 2rem;
            align-items: center;
            justify-content: center;
            border-radius: .5rem;
            --tw-text-opacity: 1;
            color: rgb(75 85 99/var(--tw-text-opacity));
            transition: all 0.2s;
        }

        .month-nav-btn:hover:not(:disabled) {
            --tw-bg-opacity: 1;
            background-color: rgb(243 244 246/var(--tw-bg-opacity))
        }

        .month-nav-btn:disabled {
            cursor: not-allowed;
            opacity: .5
        }

        .avatar {
            display: flex;
            height: 1.5rem;
            width: 1.5rem;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            --tw-bg-opacity: 1;
            background-color: rgb(252 231 243/var(--tw-bg-opacity));
            font-size: .75rem;
            line-height: 1rem;
            font-weight: 700;
            --tw-text-opacity: 1;
            color: rgb(219 39 119/var(--tw-text-opacity))
        }