:root {
    color-scheme: light;
    --xn1w-ink: #1e2a2a;
    --xn1w-muted: #66746f;
    --xn1w-line: #d8e0dc;
    --xn1w-surface: #ffffff;
    --xn1w-bg: #f6f2ec;
    --xn1w-forest: #243633;
    --xn1w-sage: #3e6b5a;
    --xn1w-coral: #c86757;
    --xn1w-gold: #c88a2d;
}


html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--xn1w-bg);
    color: var(--xn1w-ink);
    font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
}

body:has(.xn1w-envelope-demo) {
    overflow: hidden;
}

a {
    color: inherit;
}

.xn1w-boot {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    place-content: center;
    align-items: center;
    padding: 24px;
    background: var(--xn1w-bg);
}

.xn1w-boot-mark,
.xn1w-brand-mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: var(--xn1w-forest);
    color: #fff;
    font-weight: 900;
    letter-spacing: 0;
}

.xn1w-boot-title {
    font-weight: 900;
    font-size: 22px;
}

.xn1w-boot-text {
    color: var(--xn1w-muted);
    margin-top: 4px;
}

.xn1w-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--xn1w-line);
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    background: #fff;
    color: var(--xn1w-ink);
}

.xn1w-button-primary {
    border-color: var(--xn1w-forest);
    background: var(--xn1w-forest);
    color: #fff;
}

.xn1w-button-accent {
    border-color: var(--xn1w-coral);
    background: var(--xn1w-coral);
    color: #fff;
}

.xn1w-button-ghost {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.xn1w-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.xn1w-marketing-shell {
    min-height: 100vh;
    background: var(--xn1w-bg);
}

.xn1w-envelope-demo {
    min-height: 100vh;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(246, 242, 236, .8) 42%, rgba(229, 228, 222, .96)),
        linear-gradient(135deg, rgba(36, 54, 51, .08), transparent 42%),
        repeating-linear-gradient(90deg, rgba(36, 54, 51, .025) 0 1px, transparent 1px 18px);
    color: var(--xn1w-ink);
}

.xn1w-envelope-demo-header {
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px clamp(16px, 3vw, 42px);
}

.xn1w-envelope-demo-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-weight: 900;
    text-decoration: none;
}

.xn1w-envelope-demo-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: var(--xn1w-forest);
    color: #fff;
    font-weight: 900;
}

.xn1w-envelope-demo-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.xn1w-envelope-demo-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(36, 54, 51, .2);
    border-radius: 8px;
    padding: 9px 14px;
    background: rgba(255, 255, 255, .76);
    color: var(--xn1w-forest);
    font-weight: 900;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(36, 54, 51, .08);
}

.xn1w-envelope-demo-button.is-primary {
    border-color: var(--xn1w-forest);
    background: var(--xn1w-forest);
    color: #fff;
}

.xn1w-envelope-demo-stage {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 94px clamp(16px, 4vw, 64px) 104px;
    perspective: 1400px;
    isolation: isolate;
}

.xn1w-envelope-scene {
    position: relative;
    width: min(78vw, 760px);
    min-width: 300px;
    aspect-ratio: 1.55;
    transform-style: preserve-3d;
}

.xn1w-envelope-shadow {
    position: absolute;
    right: 12%;
    bottom: -7%;
    left: 12%;
    height: 16%;
    border-radius: 50%;
    background: rgba(28, 36, 34, .22);
    filter: blur(18px);
    transform: rotateX(74deg);
}

.xn1w-envelope {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: translateY(8vh) rotateX(9deg) rotateY(-6deg);
}

.xn1w-envelope-back,
.xn1w-envelope-front,
.xn1w-envelope-left,
.xn1w-envelope-right,
.xn1w-envelope-flap {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}

.xn1w-envelope-back {
    border-radius: 8px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .74), rgba(236, 221, 202, .92)),
        repeating-linear-gradient(45deg, rgba(138, 111, 78, .06) 0 1px, transparent 1px 12px);
    border: 1px solid rgba(128, 99, 61, .24);
    box-shadow: 0 34px 72px rgba(36, 54, 51, .22);
}

.xn1w-envelope-front {
    z-index: 4;
    top: 43%;
    clip-path: polygon(0 0, 50% 48%, 100% 0, 100% 100%, 0 100%);
    border-radius: 0 0 8px 8px;
    background:
        linear-gradient(180deg, rgba(251, 240, 223, .98), rgba(229, 199, 160, .98)),
        repeating-linear-gradient(135deg, rgba(128, 99, 61, .06) 0 1px, transparent 1px 14px);
    border: 1px solid rgba(128, 99, 61, .22);
    transform: translateZ(36px);
}

.xn1w-envelope-left {
    z-index: 3;
    clip-path: polygon(0 0, 53% 50%, 0 100%);
    background: linear-gradient(130deg, #f6e8d5, #dec197);
    transform: translateZ(28px);
}

.xn1w-envelope-right {
    z-index: 3;
    clip-path: polygon(100% 0, 47% 50%, 100% 100%);
    background: linear-gradient(230deg, #fff0d9, #e4c69a);
    transform: translateZ(30px);
}

.xn1w-envelope-flap {
    z-index: 5;
    clip-path: polygon(0 0, 100% 0, 50% 57%);
    background:
        linear-gradient(180deg, #fff4e4, #dfbd8c 86%),
        repeating-linear-gradient(90deg, rgba(128, 99, 61, .05) 0 1px, transparent 1px 13px);
    border-radius: 8px 8px 0 0;
    transform-origin: 50% 0;
    transform: translateZ(54px) rotateX(0deg);
}

.xn1w-envelope-seal {
    position: absolute;
    z-index: 7;
    top: 35%;
    left: 50%;
    width: clamp(44px, 7vw, 70px);
    height: clamp(44px, 7vw, 70px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #e8a99c, var(--xn1w-coral) 62%, #9d493d);
    color: #fff;
    box-shadow: 0 13px 28px rgba(128, 66, 55, .34);
    transform: translate3d(-50%, -50%, 74px);
}

.xn1w-envelope-card {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 18%;
    width: 72%;
    min-width: 260px;
    aspect-ratio: .72;
    transform: translate3d(-50%, 20%, 12px) scale(.74) rotateX(2deg);
    transform-style: preserve-3d;
}

.xn1w-invitation-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 2.2vw, 18px);
    padding: clamp(30px, 5vw, 68px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 248, 238, .96)),
        repeating-linear-gradient(0deg, rgba(200, 138, 45, .045) 0 1px, transparent 1px 12px);
    border: 1px solid rgba(143, 102, 48, .28);
    color: var(--xn1w-forest);
    box-shadow: 0 26px 60px rgba(36, 54, 51, .22);
}

.xn1w-invitation-card::before,
.xn1w-invitation-card::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(200, 138, 45, .32);
    pointer-events: none;
}

.xn1w-invitation-card::before {
    inset: 16px;
}

.xn1w-invitation-card::after {
    inset: 25px;
    border-color: rgba(62, 107, 90, .22);
}

.xn1w-invitation-card-border {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(200, 138, 45, .16), transparent 22%, transparent 78%, rgba(200, 138, 45, .16)),
        linear-gradient(180deg, rgba(200, 138, 45, .16), transparent 20%, transparent 80%, rgba(200, 138, 45, .16));
    pointer-events: none;
}

.xn1w-invitation-kicker {
    position: relative;
    z-index: 1;
    color: var(--xn1w-coral);
    font-size: clamp(12px, 1.3vw, 15px);
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
}

.xn1w-invitation-card h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 400;
    line-height: .92;
    text-align: center;
    letter-spacing: 0;
}

.xn1w-invitation-message,
.xn1w-invitation-note {
    position: relative;
    z-index: 1;
    max-width: 540px;
    margin: 0 auto;
    color: rgba(36, 54, 51, .76);
    font-size: clamp(15px, 1.8vw, 20px);
    line-height: 1.5;
    text-align: center;
}

.xn1w-invitation-note {
    color: rgba(36, 54, 51, .58);
    font-size: clamp(12px, 1.3vw, 14px);
}

.xn1w-invitation-details {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--xn1w-forest);
    font-size: clamp(12px, 1.4vw, 15px);
    font-weight: 900;
    text-transform: uppercase;
}

.xn1w-invitation-details span {
    padding: 7px 10px;
    border: 1px solid rgba(36, 54, 51, .14);
    background: rgba(255, 255, 255, .48);
}

.xn1w-envelope-guest-actions {
    position: fixed;
    z-index: 18;
    right: clamp(16px, 3vw, 42px);
    bottom: clamp(18px, 3vw, 42px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
}

.xn1w-envelope-demo-stage.is-open .xn1w-envelope {
    animation: xn1w-envelope-lift 3200ms cubic-bezier(.2, .72, .24, 1) both;
}

.xn1w-envelope-demo-stage.is-open .xn1w-envelope-flap {
    animation: xn1w-envelope-flap-open 1150ms cubic-bezier(.18, .9, .22, 1) 360ms both;
}

.xn1w-envelope-demo-stage.is-open .xn1w-envelope-seal {
    animation: xn1w-envelope-seal-release 900ms ease 240ms both;
}

.xn1w-envelope-demo-stage.is-open .xn1w-envelope-card {
    animation: xn1w-envelope-card-out 3200ms cubic-bezier(.16, .82, .2, 1) 840ms both;
}

.xn1w-envelope-demo-stage.is-open .xn1w-invitation-kicker,
.xn1w-envelope-demo-stage.is-open .xn1w-invitation-card h1,
.xn1w-envelope-demo-stage.is-open .xn1w-invitation-message,
.xn1w-envelope-demo-stage.is-open .xn1w-invitation-details,
.xn1w-envelope-demo-stage.is-open .xn1w-invitation-note {
    opacity: 0;
    animation: xn1w-envelope-text-in 900ms ease both;
}

.xn1w-envelope-demo-stage.is-open .xn1w-invitation-kicker {
    animation-delay: 3000ms;
}

.xn1w-envelope-demo-stage.is-open .xn1w-invitation-card h1 {
    animation-delay: 3150ms;
}

.xn1w-envelope-demo-stage.is-open .xn1w-invitation-message {
    animation-delay: 3330ms;
}

.xn1w-envelope-demo-stage.is-open .xn1w-invitation-details {
    animation-delay: 3510ms;
}

.xn1w-envelope-demo-stage.is-open .xn1w-invitation-note {
    animation-delay: 3690ms;
}

.xn1w-envelope-demo-stage.is-open .xn1w-envelope-guest-actions {
    animation: xn1w-envelope-actions-in 650ms ease 4250ms both;
}

.xn1w-envelope-demo-stage.is-skipped *,
.xn1w-envelope-demo-stage.is-skipped *::before,
.xn1w-envelope-demo-stage.is-skipped *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
}

@keyframes xn1w-envelope-lift {
    0% {
        transform: translateY(8vh) rotateX(9deg) rotateY(-6deg);
    }

    42% {
        transform: translateY(6vh) rotateX(8deg) rotateY(-4deg);
    }

    100% {
        transform: translateY(16vh) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes xn1w-envelope-flap-open {
    0% {
        transform: translateZ(54px) rotateX(0deg);
    }

    100% {
        transform: translateZ(24px) rotateX(-178deg);
    }
}

@keyframes xn1w-envelope-seal-release {
    0% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 74px) scale(1);
    }

    48% {
        opacity: 1;
        transform: translate3d(-50%, -54%, 84px) scale(1.08) rotate(8deg);
    }

    100% {
        opacity: 0;
        transform: translate3d(-50%, -88%, 88px) scale(.72) rotate(20deg);
    }
}

@keyframes xn1w-envelope-card-out {
    0% {
        z-index: 2;
        transform: translate3d(-50%, 20%, 12px) scale(.74) rotateX(2deg);
    }

    30% {
        z-index: 6;
        transform: translate3d(-50%, -30%, 70px) scale(.86) rotateX(1deg);
    }

    60% {
        z-index: 8;
        transform: translate3d(-50%, -92%, 150px) scale(1.05) rotateX(0deg);
    }

    100% {
        z-index: 8;
        transform: translate3d(-50%, -112%, 210px) scale(1.24) rotateX(0deg);
    }
}

@keyframes xn1w-envelope-text-in {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes xn1w-envelope-actions-in {
    0% {
        opacity: 0;
        pointer-events: none;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

@media (max-width: 720px) {
    body:has(.xn1w-envelope-demo) {
        overflow: auto;
    }

    .xn1w-envelope-demo-header {
        position: relative;
        align-items: flex-start;
        flex-direction: column;
    }

    .xn1w-envelope-demo-stage {
        min-height: calc(100vh - 116px);
        padding-top: 24px;
    }

    .xn1w-envelope-scene {
        width: min(92vw, 520px);
    }

    .xn1w-envelope-card {
        width: 78%;
    }

    .xn1w-invitation-card {
        padding: 28px 24px;
    }

    .xn1w-invitation-note {
        display: none;
    }

    .xn1w-envelope-guest-actions {
        position: static;
        margin-top: 20px;
        justify-content: center;
    }

    @keyframes xn1w-envelope-card-out {
        0% {
            z-index: 2;
            transform: translate3d(-50%, 20%, 12px) scale(.72) rotateX(2deg);
        }

        42% {
            z-index: 6;
            transform: translate3d(-50%, -46%, 70px) scale(.85) rotateX(1deg);
        }

        100% {
            z-index: 8;
            transform: translate3d(-50%, -88%, 160px) scale(1.05) rotateX(0deg);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .xn1w-envelope-demo-stage *,
    .xn1w-envelope-demo-stage *::before,
    .xn1w-envelope-demo-stage *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
}

.xn1w-topbar {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px clamp(18px, 4vw, 56px);
    color: #fff;
}

.xn1w-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-weight: 900;
}

.xn1w-brand-mark {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .36);
}

.xn1w-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.xn1w-language {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
}

.xn1w-language button {
    min-width: 38px;
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.xn1w-language button.is-active {
    background: #fff;
    color: var(--xn1w-forest);
}

.xn1w-hero {
    min-height: 86vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    background-image:
        linear-gradient(90deg, rgba(21, 35, 33, .98) 0%, rgba(21, 35, 33, .94) 52%, rgba(21, 35, 33, .64) 72%, rgba(21, 35, 33, .18) 100%),
        url("/assets/invitation-preview.png");
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 104px clamp(18px, 4vw, 56px) 72px;
}

.xn1w-hero-content {
    width: 100%;
    max-width: 680px;
    min-width: 0;
}

.xn1w-kicker {
    color: #f3d4c3;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0;
    margin-bottom: 18px;
}

.xn1w-hero h1 {
    margin: 0;
    font-size: clamp(42px, 7vw, 84px);
    line-height: .96;
    letter-spacing: 0;
}

.xn1w-hero p {
    width: 100%;
    max-width: 620px;
    min-width: 0;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(18px, 2.2vw, 23px);
    line-height: 1.45;
}

.xn1w-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.xn1w-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
    width: 100%;
    max-width: 620px;
}

.xn1w-stat {
    border-top: 1px solid rgba(255, 255, 255, .24);
    padding-top: 12px;
}

.xn1w-stat strong {
    display: block;
    font-size: 22px;
}

.xn1w-stat span {
    color: rgba(255, 255, 255, .74);
    font-size: 13px;
}

.xn1w-section {
    padding: 56px clamp(18px, 4vw, 56px);
}

.xn1w-section-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.xn1w-section-header {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 32px;
    align-items: end;
    margin-bottom: 28px;
}

.xn1w-section h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: 0;
}

.xn1w-section-header p {
    margin: 0;
    color: var(--xn1w-muted);
    line-height: 1.55;
}

.xn1w-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.xn1w-card {
    border: 1px solid var(--xn1w-line);
    border-radius: 8px;
    background: var(--xn1w-surface);
    padding: 22px;
    box-shadow: 0 16px 36px rgba(36, 54, 51, .06);
}

.xn1w-step-number {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f0ec;
    color: var(--xn1w-sage);
    font-weight: 900;
    margin-bottom: 16px;
}

.xn1w-card h3 {
    margin: 0;
    font-size: 18px;
}

.xn1w-card p {
    margin: 10px 0 0;
    color: var(--xn1w-muted);
    line-height: 1.5;
}

.xn1w-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.xn1w-feature {
    min-height: 148px;
}

.xn1w-feature i {
    color: var(--xn1w-coral);
    font-size: 22px;
}

.xn1w-preview-band {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 30px;
    align-items: center;
}

.xn1w-preview-image {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--xn1w-line);
    box-shadow: 0 22px 50px rgba(36, 54, 51, .12);
}

.xn1w-check-list {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.xn1w-check-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--xn1w-muted);
}

.xn1w-check-list i {
    color: var(--xn1w-sage);
}

.xn1w-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 28px clamp(18px, 4vw, 56px);
    border-top: 1px solid var(--xn1w-line);
    color: var(--xn1w-muted);
}

.xn1w-public-message {
    min-height: 100vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

.xn1w-public-message h1,
.xn1w-public-message p {
    width: 520px;
    max-width: calc(100vw - 48px);
    overflow-wrap: break-word;
}

.xn1w-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.xn1w-form-grid .wide {
    grid-column: 1 / -1;
}

.xn1w-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 800;
}

.xn1w-field input,
.xn1w-field textarea,
.xn1w-field select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--xn1w-line);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--xn1w-ink);
    background: #fff;
}

.xn1w-field textarea {
    min-height: 100px;
    resize: vertical;
}

.xn1w-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.xn1w-invitation-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    background: #f5f0e9;
}

.xn1w-invitation-hero {
    display: grid;
    place-content: center;
    padding: 42px;
    color: #fff;
    background:
        linear-gradient(rgba(36, 54, 51, .82), rgba(36, 54, 51, .74)),
        url("/assets/invitation-preview.png") center / cover;
}

.xn1w-invitation-page-template {
    background: #f7f4ef;
    display: block;
}

.xn1w-invitation-page-template .xn1w-invitation-hero {
    background: #f7f4ef;
    color: inherit;
    min-height: 100vh;
    padding: 0;
    place-content: center;
}

.xn1w-invitation-paper {
    width: 100%;
    max-width: 580px;
    min-height: 520px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    color: var(--xn1w-ink);
    padding: 42px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .18);
}

.xn1w-invitation-paper h1 {
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1;
    margin: 0;
}

.xn1w-rsvp-panel {
    padding: 34px;
    background: #fff;
    border-left: 1px solid var(--xn1w-line);
}

.xn1w-rsvp-panel h2 {
    margin-top: 0;
}

.ui.primary.button,
.ui.primary.buttons .button {
    background-color: var(--xn1-brand-primary, var(--xn1w-forest)) !important;
    color: #fff !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.primary.button:focus,
.ui.primary.buttons .button:focus,
.ui.primary.button:active,
.ui.primary.buttons .button:active {
    background-color: color-mix(in srgb, var(--xn1-brand-primary, var(--xn1w-forest)) 88%, #000 12%) !important;
    color: #fff !important;
}

.ui.primary.label {
    background-color: var(--xn1-brand-primary, var(--xn1w-forest)) !important;
    border-color: var(--xn1-brand-primary, var(--xn1w-forest)) !important;
    color: #fff !important;
}

.xn1w-plan-actions.ui.grid {
    margin-top: .5rem;
}

.xn1w-plan-panel.ui.segment {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    border-color: color-mix(in srgb, var(--xn1-brand-primary, var(--xn1w-forest)) 14%, transparent);
    border-radius: 8px;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--xn1-brand-primary, var(--xn1w-forest)) 8%, transparent);
}

.xn1w-plan-panel.ui.segment .ui.header {
    margin-bottom: 0;
}

.xn1w-plan-panel.ui.segment .ui.header > .icon {
    color: var(--xn1-brand-primary, var(--xn1w-forest));
}

.xn1w-plan-panel-accent.ui.segment .ui.header > .icon {
    color: var(--xn1-brand-accent, var(--xn1w-coral));
}

.xn1w-plan-muted {
    color: var(--xn1-brand-muted, var(--xn1w-muted));
    line-height: 1.5;
}

@media (max-width: 980px) {
    .xn1w-section-header,
    .xn1w-preview-band,
    .xn1w-invitation-page {
        grid-template-columns: 1fr;
    }

    .xn1w-steps,
    .xn1w-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xn1w-rsvp-panel {
        border-left: 0;
        border-top: 1px solid var(--xn1w-line);
    }
}

@media (max-width: 640px) {
    .xn1w-topbar {
        position: static;
        background: var(--xn1w-forest);
        align-items: flex-start;
    }

    .xn1w-topbar,
    .xn1w-topbar-actions,
    .xn1w-footer {
        flex-direction: column;
    }

    .xn1w-hero {
        min-height: auto;
        padding-top: 54px;
    }

    .xn1w-hero-content,
    .xn1w-hero-stats {
        width: calc(100vw - 36px);
        max-width: none;
    }

    .xn1w-hero p {
        width: 320px;
        max-width: 100%;
    }

    .xn1w-hero-stats,
    .xn1w-steps,
    .xn1w-feature-grid,
    .xn1w-form-grid {
        grid-template-columns: 1fr;
    }

    .xn1w-public-message p {
        width: 300px;
        max-width: 100%;
    }

    .xn1w-form-grid .wide {
        grid-column: auto;
    }
}
.xn1w-template-option {
    appearance: none;
    border: 1px solid rgba(32, 59, 55, 0.18);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.xn1w-template-option-active {
    border-color: #203b37 !important;
    box-shadow: 0 0 0 2px rgba(32, 59, 55, 0.16) !important;
}

.xn1w-template-card-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.xn1w-template-card-actions .ui.button {
    margin: 0;
}

.xn1w-template-card-actions .ui.primary.button,
.xn1w-template-customizer .ui.primary.button,
.xn1w-template-overlay-flyout .ui.primary.button {
    background: #203b37 !important;
}

.xn1w-template-card-actions .ui.primary.button:hover,
.xn1w-template-customizer .ui.primary.button:hover,
.xn1w-template-overlay-flyout .ui.primary.button:hover {
    background: #172a27 !important;
}

.xn1w-template-card-preview {
    --xn1w-envelope-color: #f2d3a2;
    --xn1w-card-color: #fff8ef;
    --xn1w-accent-color: #203b37;
    --xn1w-line-color: rgba(42, 47, 45, .18);
    align-items: center;
    background: #fbfaf7;
    border-bottom: 1px solid rgba(32, 59, 55, .1);
    display: flex;
    height: 172px;
    justify-content: center;
    overflow: hidden;
    padding: 18px;
    position: relative;
}

.xn1w-mini-envelope {
    height: 112px;
    max-width: 320px;
    position: relative;
    width: 88%;
}

.xn1w-mini-card {
    animation: xn1wMiniCardReveal 4.2s cubic-bezier(.16, 1, .3, 1) infinite;
    background: var(--xn1w-card-color);
    border: 1px solid rgba(32, 59, 55, .14);
    border-radius: 6px;
    box-shadow: 0 16px 30px rgba(32, 59, 55, .16);
    color: #203b37;
    display: grid;
    gap: 4px;
    height: 112px;
    left: 10%;
    padding: 16px;
    place-items: center;
    position: absolute;
    text-align: center;
    top: 0;
    width: 80%;
    z-index: 2;
}

.xn1w-mini-card::before,
.xn1w-mini-card::after {
    content: "";
    pointer-events: none;
    position: absolute;
}

.xn1w-mini-card span {
    background: var(--xn1w-accent-color);
    border-radius: 999px;
    height: 8px;
    width: 44px;
}

.xn1w-mini-card strong {
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.15;
}

.xn1w-mini-card small {
    color: rgba(32, 59, 55, .68);
    font-size: 11px;
}

.xn1w-template-preview-key-modern-lines .xn1w-mini-card::before,
.xn1w-template-preview-key-signature-lines .xn1w-mini-card::before {
    background: var(--xn1w-line-color);
    height: 1px;
    left: 18px;
    right: 18px;
    top: 34px;
}

.xn1w-template-preview-key-modern-lines .xn1w-mini-card::after {
    background: var(--xn1w-line-color);
    bottom: 30px;
    height: 1px;
    left: 26px;
    right: 26px;
}

.xn1w-template-preview-key-serif-divider .xn1w-mini-card::before,
.xn1w-template-preview-key-detail-columns .xn1w-mini-card::before {
    background: var(--xn1w-line-color);
    bottom: 16px;
    left: 50%;
    top: 18px;
    width: 1px;
}

.xn1w-template-preview-key-soft-arch .xn1w-mini-card::before {
    border: 1px solid var(--xn1w-line-color);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    inset: 14px 16px auto;
    height: 62px;
}

.xn1w-mini-envelope-left,
.xn1w-mini-envelope-right,
.xn1w-mini-envelope-bottom,
.xn1w-mini-envelope-flap,
.xn1w-mini-envelope-seal {
    position: absolute;
}

.xn1w-mini-envelope-left,
.xn1w-mini-envelope-right {
    bottom: 0;
    height: 70%;
    width: 50%;
    z-index: 4;
}

.xn1w-mini-envelope-left {
    background: linear-gradient(34deg, color-mix(in srgb, var(--xn1w-envelope-color) 76%, #ffffff), var(--xn1w-envelope-color));
    clip-path: polygon(0 0, 100% 54%, 0 100%);
    left: 0;
}

.xn1w-mini-envelope-right {
    background: linear-gradient(-34deg, color-mix(in srgb, var(--xn1w-envelope-color) 76%, #ffffff), var(--xn1w-envelope-color));
    clip-path: polygon(100% 0, 0 54%, 100% 100%);
    right: 0;
}

.xn1w-mini-envelope-bottom {
    background: linear-gradient(0deg, color-mix(in srgb, var(--xn1w-envelope-color) 86%, #caa05f), var(--xn1w-envelope-color));
    bottom: 0;
    clip-path: polygon(0 100%, 50% 28%, 100% 100%);
    height: 72%;
    width: 100%;
    z-index: 5;
}

.xn1w-mini-envelope-flap {
    animation: xn1wMiniFlap 4.2s cubic-bezier(.16, 1, .3, 1) infinite;
    background: linear-gradient(180deg, color-mix(in srgb, var(--xn1w-envelope-color) 68%, #ffffff), var(--xn1w-envelope-color));
    clip-path: polygon(0 0, 50% 64%, 100% 0);
    height: 78%;
    left: 0;
    top: 30%;
    transform-origin: 50% 0;
    width: 100%;
    z-index: 7;
}

.xn1w-mini-envelope-seal {
    animation: xn1wMiniSeal 4.2s cubic-bezier(.16, 1, .3, 1) infinite;
    background: var(--xn1w-accent-color);
    border-radius: 999px;
    height: 28px;
    left: calc(50% - 14px);
    top: 66%;
    width: 28px;
    z-index: 8;
}

.xn1w-template-workspace {
    align-items: stretch;
}

.xn1w-template-controls {
    min-width: 0;
}

.xn1w-template-preview-panel {
    background: #f8f7f3;
    border: 1px solid rgba(32, 59, 55, 0.14);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    margin-bottom: 18px;
    min-height: 100%;
    overflow: hidden;
}

.xn1w-template-preview-panel-full {
    margin-bottom: 0;
}

.xn1w-template-overlay-flyout .xn1w-template-preview-panel {
    border-radius: 0;
    border-width: 0;
    min-height: calc(100vh - 160px);
}

.xn1w-template-preview-toolbar {
    align-items: flex-start;
    border-bottom: 1px solid rgba(32, 59, 55, 0.12);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 18px 20px;
}

.xn1w-template-preview-toolbar h3 {
    color: #203b37;
    font-size: 20px;
    letter-spacing: 0;
    margin: 8px 0 4px;
}

.xn1w-template-preview-toolbar p {
    color: rgba(32, 59, 55, 0.72);
    margin: 0;
    max-width: 520px;
}

.xn1w-template-preview-stage {
    display: grid;
    min-height: 720px;
    overflow: hidden;
    place-items: center;
}

.xn1w-template-preview-stage .xn1w-envelope-template {
    min-height: 620px;
    padding: 24px;
}

.xn1w-template-preview-stage .xn1w-envelope-scene {
    height: min(70vh, 620px);
    max-width: 840px;
    min-height: 520px;
    width: min(100%, 840px);
}

.xn1w-template-customizer {
    padding: 16px;
}

.xn1w-template-customizer-drawer-layout {
    background: #f8f7f3;
    min-height: calc(100vh - 160px);
    overflow: hidden;
    padding: 0;
    position: relative;
}

.xn1w-template-customizer-preview {
    min-height: calc(100vh - 160px);
}

.xn1w-template-customizer-drawer-layout .xn1w-template-preview-panel {
    border: 0;
    border-radius: 0;
    margin: 0;
    min-height: calc(100vh - 160px);
}

.xn1w-template-editor-drawer {
    background: #fff;
    border: 1px solid rgba(32, 59, 55, 0.16);
    border-radius: 8px;
    box-shadow: 0 22px 58px rgba(32, 59, 55, 0.18);
    display: flex;
    flex-direction: column;
    left: 20px;
    max-width: calc(100% - 40px);
    position: absolute;
    top: 20px;
    bottom: 20px;
    transform: translateX(calc(-100% - 32px));
    transition: transform .22s ease;
    width: 460px;
    z-index: 8;
}

.xn1w-template-customizer-drawer-layout.is-editor-open .xn1w-template-editor-drawer {
    transform: translateX(0);
}

.xn1w-template-editor-drawer-header {
    align-items: center;
    border-bottom: 1px solid rgba(32, 59, 55, 0.12);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 16px;
}

.xn1w-template-editor-drawer-header strong,
.xn1w-template-editor-drawer-header span {
    display: block;
}

.xn1w-template-editor-drawer-header strong {
    color: #203b37;
    font-size: 16px;
}

.xn1w-template-editor-drawer-header span {
    color: rgba(32, 59, 55, 0.64);
    font-size: 12px;
    margin-top: 2px;
}

.xn1w-template-editor-drawer .xn1w-template-customizer-controls {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    overflow-y: auto;
}

.xn1-platform-flyout.ui.flyout.xn1w-template-editor-flyout {
    max-width: min(92vw, 560px);
    width: min(92vw, 540px);
    z-index: 1125;
}

.xn1-platform-flyout.ui.flyout.xn1w-template-editor-flyout > .scrolling.content {
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.xn1w-template-editor-tabs {
    border-bottom: 1px solid rgba(32, 59, 55, 0.12);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.xn1w-template-editor-tabs .item {
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 3px solid transparent;
    color: rgba(32, 59, 55, 0.68);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    min-height: 68px;
    padding: 10px 8px;
    text-align: center;
}

.xn1w-template-editor-tabs .item .icon {
    font-size: 18px;
    margin: 0;
}

.xn1w-template-editor-tabs .item.active {
    border-bottom-color: var(--xn1-brand-primary, #203b37);
    color: var(--xn1-brand-primary, #203b37);
}

.xn1w-template-customizer-controls-tabbed {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    overflow-y: auto;
}

.xn1w-template-editor-tab-panel {
    padding-bottom: 18px;
}

.xn1w-template-editor-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: 0 !important;
}

.xn1w-template-editor-open-button {
    left: 20px;
    position: absolute;
    top: 20px;
    z-index: 6;
}

.xn1w-template-customizer-controls {
    background: #fff;
    border: 1px solid rgba(32, 59, 55, 0.14);
    border-radius: 8px;
    padding: 18px;
}

.xn1w-template-customizer-controls input[type="color"] {
    border: 1px solid rgba(32, 59, 55, 0.18);
    border-radius: 6px;
    height: 44px;
    padding: 4px;
    width: 100%;
}

.xn1w-background-resource-summary {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    margin: 0 !important;
}

.xn1w-background-resource-preview {
    align-items: center;
    background: #f7f4ee;
    border: 1px solid rgba(32, 59, 55, 0.12);
    border-radius: 6px;
    display: flex;
    height: 64px;
    justify-content: center;
    overflow: hidden;
    width: 76px;
}

.xn1w-background-resource-preview img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.xn1w-background-resource-preview .icon {
    color: rgba(32, 59, 55, 0.42);
    font-size: 22px;
    margin: 0;
}

.xn1w-background-resource-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.xn1w-background-resource-copy strong {
    color: #203b37;
    font-size: 13px;
}

.xn1w-background-resource-copy span {
    color: rgba(32, 59, 55, 0.62);
    font-size: 12px;
    line-height: 1.35;
}

.xn1w-background-resource-guidance.ui.message,
.xn1w-background-resource-picker-guidance.ui.message {
    border-radius: 6px;
    box-shadow: none;
    line-height: 1.35;
    margin-top: 10px;
}

.xn1w-background-resource-picker-guidance.ui.message {
    margin-bottom: 16px;
}

.xn1-platform-flyout.ui.flyout.xn1w-resource-picker-overlay-flyout {
    z-index: 1250;
}

.xn1-platform-flyout.ui.flyout.xn1w-step-child-flyout {
    z-index: 1260;
}

.xn1w-resource-picker-overlay {
    padding: 18px;
}

.xn1w-envelope-template {
    --xn1w-envelope-color: #f2d3a2;
    --xn1w-card-color: #fff8ef;
    --xn1w-accent-color: #203b37;
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 620px;
    overflow: hidden;
    padding: 48px 24px;
    perspective: 1800px;
    width: 100%;
}

.xn1w-envelope-scene {
    aspect-ratio: auto;
    height: min(70vh, 620px);
    max-height: 640px;
    max-width: 820px;
    min-height: 520px;
    min-width: 0;
    position: relative;
    width: min(82vw, 820px);
}

.xn1w-envelope-shadow {
    animation: xn1wEnvelopeShadow 4.8s cubic-bezier(.16, 1, .3, 1) both;
    background: radial-gradient(ellipse, rgba(32, 59, 55, 0.22), transparent 68%);
    border-radius: 50%;
    bottom: 22px;
    filter: blur(18px);
    height: 80px;
    left: 10%;
    position: absolute;
    right: auto;
    transform: none;
    width: 80%;
}

.xn1w-envelope {
    animation: xn1wEnvelopeSettle 4.8s cubic-bezier(.16, 1, .3, 1) both;
    bottom: 72px;
    height: clamp(190px, 27vh, 238px);
    inset: auto;
    left: 50%;
    overflow: visible;
    position: absolute;
    right: auto;
    top: auto;
    transform-style: preserve-3d;
    width: min(86%, 760px);
    z-index: 6;
}

.xn1w-envelope-back,
.xn1w-envelope-left,
.xn1w-envelope-right,
.xn1w-envelope-bottom,
.xn1w-envelope-flap {
    backface-visibility: visible;
    inset: auto;
    position: absolute;
}

.xn1w-envelope-back {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .32), transparent 42%),
        var(--xn1w-envelope-color);
    border: 1px solid rgba(32, 59, 55, .16);
    border-radius: 8px;
    inset: 0;
    box-shadow: 0 22px 48px rgba(32, 59, 55, .18);
}

.xn1w-envelope-left,
.xn1w-envelope-right {
    bottom: 0;
    height: 100%;
    top: 0;
    width: 52%;
    z-index: 4;
}

.xn1w-envelope-left {
    background: linear-gradient(32deg, color-mix(in srgb, var(--xn1w-envelope-color) 76%, #ffffff), var(--xn1w-envelope-color));
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    left: 0;
}

.xn1w-envelope-right {
    background: linear-gradient(-32deg, color-mix(in srgb, var(--xn1w-envelope-color) 78%, #ffffff), var(--xn1w-envelope-color));
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    right: 0;
}

.xn1w-envelope-bottom {
    background: linear-gradient(0deg, color-mix(in srgb, var(--xn1w-envelope-color) 86%, #caa05f), var(--xn1w-envelope-color));
    bottom: 0;
    clip-path: polygon(0 100%, 50% 42%, 100% 100%);
    height: 78%;
    left: 0;
    right: auto;
    width: 100%;
    z-index: 5;
}

.xn1w-envelope-flap {
    animation: xn1wEnvelopeFlap 4.8s cubic-bezier(.16, 1, .3, 1) both;
    background: linear-gradient(180deg, color-mix(in srgb, var(--xn1w-envelope-color) 68%, #ffffff), var(--xn1w-envelope-color));
    clip-path: polygon(0 0, 50% 64%, 100% 0);
    height: 100%;
    left: 0;
    top: 0;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    width: 100%;
    z-index: 8;
}

.xn1w-envelope-seal {
    animation: xn1wEnvelopeSeal 4.8s cubic-bezier(.16, 1, .3, 1) both;
    align-items: center;
    background: var(--xn1w-accent-color);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(32, 59, 55, .22);
    color: #fff;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    height: 58px;
    justify-content: center;
    left: calc(50% - 29px);
    letter-spacing: 0;
    position: absolute;
    transform: none;
    top: calc(50% - 20px);
    width: 58px;
    z-index: 9;
}

.xn1w-envelope-card {
    animation: xn1wCardReveal 4.8s cubic-bezier(.16, 1, .3, 1) both;
    aspect-ratio: auto;
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), transparent 42%),
        var(--xn1w-card-color);
    border: 1px solid rgba(32, 59, 55, .14);
    border-radius: 10px;
    box-shadow: 0 28px 64px rgba(32, 59, 55, .2);
    bottom: auto;
    color: #213431;
    height: clamp(330px, 52vh, 430px);
    left: 50%;
    max-height: 430px;
    min-height: 0;
    min-width: 0;
    padding: clamp(22px, 3vw, 42px);
    position: absolute;
    text-align: center;
    top: 52%;
    transform-style: preserve-3d;
    width: min(76%, 620px);
    z-index: 2;
}

.xn1w-template-kicker {
    color: var(--xn1w-accent-color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.xn1w-envelope-card h1 {
    color: var(--xn1w-accent-color);
    font-size: clamp(32px, 4vw, 58px);
    letter-spacing: 0;
    line-height: 1.02;
    margin: 12px 0;
}

.xn1w-template-intro,
.xn1w-template-story {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 auto 14px;
    max-width: 660px;
}

.xn1w-template-details {
    border-top: 1px solid rgba(32, 59, 55, .16);
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
}

.xn1w-template-font-modern .xn1w-envelope-card h1,
.xn1w-template-font-modern .xn1w-invite-card h1 {
    font-weight: 800;
}

.xn1w-template-font-editorial .xn1w-envelope-card h1,
.xn1w-template-font-editorial .xn1w-invite-card h1 {
    font-style: italic;
}

.xn1w-template-seal-minimal .xn1w-envelope-seal {
    border-radius: 6px;
}

.xn1w-template-seal-heart .xn1w-envelope-seal {
    font-size: 0;
}

.xn1w-template-seal-heart .xn1w-envelope-seal::before {
    content: "XO";
    font-size: 13px;
}

.xn1w-invite-template {
    --xn1w-envelope-color: #f2d3a2;
    --xn1w-card-color: #fff8ef;
    --xn1w-accent-color: #203b37;
    --xn1w-text-color: #213431;
    --xn1w-header-text-color: #203b37;
    --xn1w-seal-color: var(--xn1w-accent-color);
    --xn1w-line-color: rgba(42, 47, 45, .18);
    --xn1w-default-card-frame-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1420' fill='none'%3E%3Cg opacity='.9' stroke='%23b98333' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M99 193c70-57 147-79 233-68'/%3E%3Cpath d='M122 151c35 7 61 25 78 54-35 0-61-18-78-54Z' fill='%23d9c39b' fill-opacity='.34'/%3E%3Cpath d='M203 120c28 22 39 50 33 83-31-15-42-43-33-83Z' fill='%23d9c39b' fill-opacity='.28'/%3E%3Cpath d='M274 128c13 32 8 61-15 86-20-27-15-56 15-86Z' fill='%23d9c39b' fill-opacity='.3'/%3E%3Ccircle cx='107' cy='213' r='24' fill='%23fff8ef'/%3E%3Ccircle cx='107' cy='213' r='17' fill='%23e8d7bd' fill-opacity='.7'/%3E%3Cpath d='M107 176c18 17 18 57 0 75-18-18-18-58 0-75Z' fill='%23fff8ef'/%3E%3Cpath d='M70 213c17-18 57-18 75 0-18 18-58 18-75 0Z' fill='%23fff8ef'/%3E%3Cpath d='M81 187c25 0 53 28 53 53-25 0-53-28-53-53Z' fill='%23fff8ef'/%3E%3Cpath d='M133 187c0 25-28 53-53 53 0-25 28-53 53-53Z' fill='%23fff8ef'/%3E%3C/g%3E%3Cg opacity='.9' stroke='%23b98333' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' transform='translate(1000 1420) rotate(180)'%3E%3Cpath d='M99 193c70-57 147-79 233-68'/%3E%3Cpath d='M122 151c35 7 61 25 78 54-35 0-61-18-78-54Z' fill='%23d9c39b' fill-opacity='.34'/%3E%3Cpath d='M203 120c28 22 39 50 33 83-31-15-42-43-33-83Z' fill='%23d9c39b' fill-opacity='.28'/%3E%3Cpath d='M274 128c13 32 8 61-15 86-20-27-15-56 15-86Z' fill='%23d9c39b' fill-opacity='.3'/%3E%3Ccircle cx='107' cy='213' r='24' fill='%23fff8ef'/%3E%3Ccircle cx='107' cy='213' r='17' fill='%23e8d7bd' fill-opacity='.7'/%3E%3Cpath d='M107 176c18 17 18 57 0 75-18-18-18-58 0-75Z' fill='%23fff8ef'/%3E%3Cpath d='M70 213c17-18 57-18 75 0-18 18-58 18-75 0Z' fill='%23fff8ef'/%3E%3Cpath d='M81 187c25 0 53 28 53 53-25 0-53-28-53-53Z' fill='%23fff8ef'/%3E%3Cpath d='M133 187c0 25-28 53-53 53 0-25 28-53 53-53Z' fill='%23fff8ef'/%3E%3C/g%3E%3Cg opacity='.5' stroke='%23cfa35b' stroke-width='1.5'%3E%3Cpath d='M154 119h690'/%3E%3Cpath d='M154 130h690'/%3E%3Cpath d='M154 1290h690'/%3E%3Cpath d='M154 1301h690'/%3E%3C/g%3E%3C/svg%3E");
    --xn1w-card-frame-image: var(--xn1w-default-card-frame-image);
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 620px;
    overflow: hidden;
    padding: 24px;
    perspective: 1800px;
    width: 100%;
}

.xn1w-template-preview-stage .xn1w-invite-template {
    min-height: 720px;
}

.xn1w-template-key-classic-letter {
    --xn1w-default-card-frame-image: url("/assets/templates/classic-letter-frame-v1.png");
}

.xn1w-invite-scene {
    height: min(92vh, 900px);
    max-height: 900px;
    max-width: 1100px;
    min-height: 680px;
    overflow: hidden;
    position: relative;
    width: min(96vw, 1100px);
}

.xn1w-invite-card {
    animation: xn1wInviteCardReveal 5.4s cubic-bezier(.16, 1, .3, 1) both;
    aspect-ratio: 148 / 210;
    background: var(--xn1w-card-color);
    border: 1px solid rgba(32, 59, 55, .14);
    border-radius: 10px;
    bottom: 0;
    box-shadow: 0 28px 64px rgba(32, 59, 55, .2);
    color: var(--xn1w-text-color);
    height: clamp(450px, 62vh, 580px);
    left: 50%;
    max-height: 525px;
    min-height: 0;
    overflow: hidden;
    padding: clamp(28px, 3.2vw, 50px);
    position: absolute;
    text-align: center;
    transform: translate3d(-50%, 0, 0) scale(1);
    transform-origin: 50% 50%;
    width: clamp(330px, 42vw, 430px);
    z-index: 6;
}

.xn1w-invite-card::before,
.xn1w-invite-card::after {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.xn1w-invite-card-frame {
    background-image: var(--xn1w-card-frame-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    inset: clamp(10px, 1.8vw, 22px);
    opacity: .96;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.xn1w-invite-card > :not(.xn1w-invite-card-frame) {
    position: relative;
    z-index: 2;
}

.xn1w-invite-envelope {
    bottom: 8px;
    height: clamp(190px, 28vh, 238px);
    left: 50%;
    overflow: visible;
    position: absolute;
    transform: translate3d(-50%, 0, 0);
    transform-style: preserve-3d;
    width: min(86%, 760px);
    z-index: 6;
}

.xn1w-invite-envelope-back-layer,
.xn1w-invite-envelope-front-layer {
    animation: xn1wInviteEnvelopeExit 5.4s cubic-bezier(.16, 1, .3, 1) both;
    inset: 0;
    position: absolute;
    transform-style: preserve-3d;
}

.xn1w-invite-envelope-back-layer {
    z-index: 4;
}

.xn1w-invite-envelope-front-layer {
    z-index: 8;
}

.xn1w-invite-envelope-front-layer::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--xn1w-envelope-color) 88%, #ffffff), var(--xn1w-envelope-color));
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 48%;
    z-index: 1;
}

.xn1w-invite-envelope-back,
.xn1w-invite-envelope-left,
.xn1w-invite-envelope-right,
.xn1w-invite-envelope-bottom,
.xn1w-invite-envelope-flap,
.xn1w-invite-envelope-seal {
    position: absolute;
}

.xn1w-invite-envelope-back {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .32), transparent 42%),
        var(--xn1w-envelope-color);
    border: 1px solid rgba(32, 59, 55, .16);
    border-radius: 8px;
    box-shadow: 0 22px 48px rgba(32, 59, 55, .18);
    inset: 0;
}

.xn1w-invite-envelope-left,
.xn1w-invite-envelope-right {
    bottom: 0;
    height: 100%;
    top: 0;
    width: 53.5%;
    z-index: 3;
}

.xn1w-invite-envelope-left {
    background: linear-gradient(32deg, color-mix(in srgb, var(--xn1w-envelope-color) 76%, #ffffff), var(--xn1w-envelope-color));
    clip-path: polygon(0 0, 100% 51.5%, 0 100%);
    left: 0;
}

.xn1w-invite-envelope-right {
    background: linear-gradient(-32deg, color-mix(in srgb, var(--xn1w-envelope-color) 78%, #ffffff), var(--xn1w-envelope-color));
    clip-path: polygon(100% 0, 0 51.5%, 100% 100%);
    right: 0;
}

.xn1w-invite-envelope-bottom {
    background: linear-gradient(0deg, color-mix(in srgb, var(--xn1w-envelope-color) 86%, #caa05f), var(--xn1w-envelope-color));
    bottom: -1px;
    clip-path: polygon(0 100%, 50% 38%, 100% 100%);
    height: 82%;
    left: -1px;
    width: calc(100% + 2px);
    z-index: 5;
}

.xn1w-invite-envelope-flap {
    animation: xn1wInviteEnvelopeFlap 5.4s cubic-bezier(.16, 1, .3, 1) both;
    background: linear-gradient(180deg, color-mix(in srgb, var(--xn1w-envelope-color) 68%, #ffffff), var(--xn1w-envelope-color));
    clip-path: polygon(0 0, 50% 64%, 100% 0);
    height: 100%;
    left: 0;
    top: 0;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    width: 100%;
    z-index: 12;
}

.xn1w-invite-envelope-seal {
    animation: xn1wInviteEnvelopeSeal 5.4s cubic-bezier(.16, 1, .3, 1) both;
    align-items: center;
    background: var(--xn1w-seal-color);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(32, 59, 55, .22);
    color: #fff;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    height: 58px;
    justify-content: center;
    left: calc(50% - 29px);
    letter-spacing: 0;
    top: calc(50% - 20px);
    width: 58px;
    z-index: 9;
}

.xn1w-invite-shadow {
    animation: xn1wInviteShadowExit 5.4s cubic-bezier(.16, 1, .3, 1) both;
    background: radial-gradient(ellipse, rgba(32, 59, 55, .2), transparent 68%);
    border-radius: 50%;
    bottom: 0;
    filter: blur(18px);
    height: 76px;
    left: 13%;
    position: absolute;
    width: 74%;
    z-index: 1;
}

.xn1w-invite-card h1 {
    color: var(--xn1w-header-text-color);
    font-size: 44px;
    letter-spacing: 0;
    line-height: 1.02;
    margin: 10px 0 12px;
    overflow-wrap: anywhere;
}

.xn1w-template-divider {
    background: var(--xn1w-line-color);
    height: 1px;
    margin: 16px auto 14px;
    width: 78%;
}

.xn1w-template-primary-details {
    display: grid;
    gap: 6px;
    line-height: 1.35;
}

.xn1w-template-primary-details strong,
.xn1w-template-schedule strong {
    color: color-mix(in srgb, var(--xn1w-header-text-color) 88%, #1d2524);
    font-size: 12px;
    font-weight: 800;
}

.xn1w-template-primary-details span,
.xn1w-template-schedule span,
.xn1w-template-meta-list span,
.xn1w-template-families {
    color: color-mix(in srgb, var(--xn1w-text-color) 78%, #1d2524);
    font-size: 12px;
}

.xn1w-template-schedule {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 14px auto 0;
    max-width: 86%;
}

.xn1w-template-schedule div {
    border-left: 1px solid var(--xn1w-line-color);
    display: grid;
    gap: 4px;
    padding-left: 12px;
    text-align: left;
}

.xn1w-template-schedule div:first-child {
    border-left: 0;
    padding-left: 0;
}

.xn1w-template-families {
    margin: 14px auto 0;
}

.xn1w-template-meta-list {
    border-top: 1px solid var(--xn1w-line-color);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: center;
    line-height: 1.3;
    margin: 14px auto 0;
    max-width: 90%;
    padding-top: 12px;
}

.xn1w-template-note {
    border-top: 1px solid var(--xn1w-line-color);
    color: color-mix(in srgb, var(--xn1w-text-color) 78%, #1d2524);
    font-size: 12px;
    line-height: 1.45;
    margin: 14px auto 0;
    max-width: 88%;
    padding-top: 12px;
}

.xn1w-guest-page-card {
    aspect-ratio: 1000 / 1419;
    border: 0;
    height: auto;
    max-height: none;
    padding: 0;
    width: min(76vw, 578px);
}

.xn1w-template-key-classic-letter .xn1w-invite-card-frame {
    inset: 0;
}

.xn1w-guest-page {
    color: var(--xn1w-text-color);
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    justify-content: flex-start;
    padding: clamp(104px, 13vh, 126px) clamp(62px, 7vw, 78px) clamp(44px, 5.5vh, 58px);
    position: relative;
}

.xn1w-layout-classic-letter {
    padding: clamp(148px, 18.2vh, 172px) clamp(66px, 7.1vw, 82px) clamp(50px, 6.5vh, 64px);
}

.xn1w-guest-step-one {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding-bottom: clamp(56px, 7vh, 70px);
    position: relative;
}

.xn1w-guest-page-step-2,
.xn1w-guest-page-step-3 {
    padding-top: 30px;
}

.xn1w-layout-classic-letter.xn1w-guest-page-step-2,
.xn1w-layout-classic-letter.xn1w-guest-page-step-3 {
    padding-top: clamp(138px, 17vh, 164px);
}

.xn1w-guest-step-ribbon {
    align-items: center;
    background: var(--xn1w-accent-color);
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 700;
    left: 0;
    line-height: 1;
    padding: 9px 14px;
    position: absolute;
    top: 0;
    z-index: 3;
}

.xn1w-guest-page-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
}

.xn1w-template-key-classic-letter .xn1w-guest-page-header {
    margin-top: 0;
}

.xn1w-guest-monogram {
    color: color-mix(in srgb, var(--xn1w-accent-color) 78%, #c89645);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 2.8vh, 28px);
    letter-spacing: 0;
    line-height: 1;
}

.xn1w-guest-page-header h1 {
    color: var(--xn1w-header-text-color);
    font-family: "Segoe Script", "Brush Script MT", Georgia, serif;
    font-size: clamp(24px, 3.35vh, 34px);
    font-weight: 500;
    line-height: .94;
    margin: 0;
    max-width: 100%;
    text-wrap: balance;
}

.xn1w-guest-page-header h1.is-long {
    font-size: clamp(22px, 2.95vh, 30px);
    line-height: .9;
}

.xn1w-guest-page-header h1.is-extra-long {
    font-size: clamp(19px, 2.45vh, 25px);
    line-height: .9;
}

.xn1w-guest-page-header p {
    color: color-mix(in srgb, var(--xn1w-text-color) 82%, #1d2524);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(10px, 1.32vh, 11px);
    letter-spacing: .05em;
    line-height: 1.42;
    margin: 0;
    max-width: 92%;
    text-transform: uppercase;
}

.xn1w-guest-family-line {
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--xn1w-accent-color) 42%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--xn1w-accent-color) 42%, transparent);
    color: color-mix(in srgb, var(--xn1w-text-color) 88%, #000);
    display: flex;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(9px, 1.25vh, 11px);
    gap: 12px;
    justify-content: center;
    min-height: 22px;
    padding: 3px 0;
    text-transform: uppercase;
    width: min(82%, 360px);
}

.xn1w-guest-family-line .icon {
    color: color-mix(in srgb, var(--xn1w-accent-color) 72%, #d1a45c);
    margin: 0;
}

.xn1w-guest-step-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 0;
}

.xn1w-guest-step-invitation {
    display: grid;
    align-items: start;
    column-gap: clamp(20px, 3vw, 34px);
    grid-template-columns: minmax(0, .98fr) minmax(148px, .84fr);
    grid-template-rows: auto auto;
    margin-top: clamp(28px, 4.4vh, 46px);
    min-height: 0;
    row-gap: clamp(12px, 1.7vh, 18px);
}

.xn1w-guest-step-invitation.is-single {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.xn1w-guest-step-invitation.is-single .xn1w-guest-details-panel {
    max-width: 82%;
    width: 100%;
}

.xn1w-guest-ceremony-details {
    width: 100%;
}

.xn1w-guest-details-panel,
.xn1w-guest-ceremony-panel,
.xn1w-guest-memory-panel {
    background: color-mix(in srgb, var(--xn1w-card-color) 86%, #fff);
    border: 1px solid color-mix(in srgb, var(--xn1w-accent-color) 30%, transparent);
    border-radius: 6px;
}

.xn1w-guest-details-panel {
    border: 0;
    background: transparent;
    text-align: left;
}

.xn1w-guest-details-panel h2,
.xn1w-guest-ceremony-panel h2,
.xn1w-guest-step-menu h2,
.xn1w-guest-memory-panel h2 {
    align-items: center;
    color: var(--xn1w-accent-color);
    display: flex;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(14px, 1.9vh, 17px);
    font-weight: 700;
    gap: 10px;
    letter-spacing: .08em;
    line-height: 1.2;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.xn1w-guest-details-panel h2 .icon,
.xn1w-guest-step-menu h2 .icon,
.xn1w-guest-memory-panel h2 .icon {
    color: var(--xn1w-accent-color);
    margin: 0;
}

.xn1w-guest-details-panel dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

.xn1w-guest-details-panel dl div {
    display: grid;
    gap: 3px;
}

.xn1w-guest-details-panel dt {
    align-items: center;
    color: color-mix(in srgb, var(--xn1w-accent-color) 88%, #000);
    display: flex;
    font-size: clamp(8px, 1.15vh, 10px);
    font-weight: 800;
    gap: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.xn1w-guest-details-panel dt .icon {
    margin: 0;
}

.xn1w-guest-details-panel dd {
    color: color-mix(in srgb, var(--xn1w-text-color) 86%, #000);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(9px, 1.28vh, 11px);
    line-height: 1.32;
    margin: 0 0 0 25px;
}

.xn1w-guest-ceremony-panel {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
    padding: clamp(11px, 1.8vh, 16px);
    text-align: center;
}

.xn1w-guest-ceremony-panel h2 {
    justify-content: center;
    margin-bottom: 8px;
}

.xn1w-guest-ceremony-panel p,
.xn1w-guest-ceremony-panel small {
    color: color-mix(in srgb, var(--xn1w-text-color) 82%, #000);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(9px, 1.2vh, 11px);
    line-height: 1.38;
    margin: 0;
}

.xn1w-guest-ceremony-panel small {
    color: color-mix(in srgb, var(--xn1w-accent-color) 74%, #000);
    font-style: italic;
    margin-top: 10px;
}

.xn1w-guest-small-heart {
    color: var(--xn1w-accent-color);
    margin-bottom: 8px;
}

.xn1w-guest-meta-strip {
    border-top: 1px solid var(--xn1w-line-color);
    color: color-mix(in srgb, var(--xn1w-text-color) 76%, #000);
    display: grid;
    font-size: clamp(8px, 1.05vh, 10px);
    gap: 4px;
    grid-column: 1 / -1;
    justify-self: center;
    max-width: min(72%, 360px);
    padding-top: 9px;
    width: 100%;
}

.xn1w-guest-social-item {
    align-items: center;
    color: color-mix(in srgb, var(--xn1w-text-color) 82%, #000);
    display: grid;
    gap: 8px;
    grid-template-columns: 16px minmax(0, 1fr);
    line-height: 1.25;
    min-width: 0;
}

.xn1w-guest-social-item .icon {
    color: var(--xn1w-accent-color);
    font-size: 10px;
    justify-self: center;
    margin: 0;
}

.xn1w-guest-social-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.xn1w-guest-action-row {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xn1w-guest-step-one .xn1w-guest-action-row {
    inset: auto 0 0;
    position: absolute;
}

.xn1w-guest-action-row-centered {
    display: flex;
    justify-content: center;
}

.xn1w-guest-button {
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(11px, 1.45vh, 13px);
    font-weight: 700;
    gap: 10px;
    justify-content: center;
    letter-spacing: .04em;
    line-height: 1.12;
    min-height: 44px;
    padding: 0 14px;
    text-transform: uppercase;
}

.xn1w-guest-button .icon {
    margin: 0;
}

.xn1w-guest-button-primary {
    background: var(--xn1w-accent-color);
    border: 1px solid var(--xn1w-accent-color);
    color: #fff;
}

.xn1w-guest-button-secondary {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--xn1w-accent-color) 68%, #fff);
    color: color-mix(in srgb, var(--xn1w-accent-color) 90%, #000);
}

.xn1w-guest-status-note {
    color: color-mix(in srgb, var(--xn1w-text-color) 72%, #000);
    font-size: 12px;
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
}

.xn1w-guest-step-menu h2,
.xn1w-guest-step-menu p {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.xn1w-guest-step-menu p {
    color: color-mix(in srgb, var(--xn1w-text-color) 78%, #000);
    font-family: Georgia, "Times New Roman", serif;
    margin-top: -8px;
}

.xn1w-guest-menu-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xn1w-guest-menu-option {
    background: color-mix(in srgb, var(--xn1w-card-color) 84%, #fff);
    border: 1px solid color-mix(in srgb, var(--xn1w-accent-color) 34%, transparent);
    border-radius: 6px;
    color: var(--xn1w-text-color);
    cursor: pointer;
    display: grid;
    gap: 6px;
    min-height: 112px;
    padding: 14px 34px 14px 14px;
    position: relative;
    text-align: center;
}

.xn1w-guest-menu-option > .icon {
    color: var(--xn1w-accent-color);
    font-size: 22px;
    justify-self: center;
    margin: 0;
}

.xn1w-guest-menu-option strong {
    color: var(--xn1w-accent-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.xn1w-guest-menu-option span {
    color: color-mix(in srgb, var(--xn1w-text-color) 82%, #000);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    line-height: 1.35;
}

.xn1w-guest-menu-radio {
    border: 1px solid color-mix(in srgb, var(--xn1w-accent-color) 55%, #fff);
    border-radius: 999px;
    height: 18px;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 18px;
}

.xn1w-guest-menu-option.is-selected .xn1w-guest-menu-radio {
    background: radial-gradient(circle, var(--xn1w-accent-color) 0 45%, transparent 49%);
}

.xn1w-guest-memory-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xn1w-guest-memory-panel {
    padding: 16px;
    text-align: left;
}

.xn1w-guest-memory-panel h2 {
    font-size: 14px;
    margin-bottom: 8px;
}

.xn1w-guest-memory-panel p {
    color: color-mix(in srgb, var(--xn1w-text-color) 75%, #000);
    font-size: 12px;
    line-height: 1.45;
    margin: 0 0 12px;
}

.xn1w-guest-upload-box {
    align-items: center;
    border: 1px dashed color-mix(in srgb, var(--xn1w-accent-color) 36%, #999);
    border-radius: 6px;
    color: color-mix(in srgb, var(--xn1w-text-color) 82%, #000);
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-height: 118px;
    text-align: center;
}

.xn1w-guest-upload-box .icon {
    color: var(--xn1w-accent-color);
    font-size: 28px;
    margin: 0;
}

.xn1w-guest-memory-photo-preview {
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(23, 34, 31, .16);
    max-height: 118px;
    max-width: 100%;
    object-fit: cover;
}

.xn1w-guest-memory-panel textarea {
    background: color-mix(in srgb, var(--xn1w-card-color) 92%, #fff);
    border: 1px solid color-mix(in srgb, var(--xn1w-accent-color) 28%, transparent);
    border-radius: 6px;
    color: var(--xn1w-text-color);
    min-height: 118px;
    padding: 12px;
    resize: none;
    width: 100%;
}

.xn1w-guest-note-count {
    color: color-mix(in srgb, var(--xn1w-text-color) 62%, #000);
    display: block;
    font-size: 11px;
    margin-top: 6px;
    text-align: right;
}

.xn1w-template-key-modern-lines .xn1w-invite-card::before {
    border-bottom: 1px solid var(--xn1w-line-color);
    border-top: 1px solid var(--xn1w-line-color);
    inset: 36px 34px;
}

.xn1w-template-key-modern-lines .xn1w-template-intro {
    border-bottom: 1px solid var(--xn1w-line-color);
    padding-bottom: 16px;
}

.xn1w-template-key-modern-lines .xn1w-template-primary-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xn1w-template-key-serif-divider .xn1w-invite-card {
    border-radius: 4px;
    font-family: Georgia, "Times New Roman", serif;
}

.xn1w-template-key-serif-divider .xn1w-invite-card::before {
    border: 1px solid var(--xn1w-line-color);
    inset: 24px;
}

.xn1w-template-key-serif-divider .xn1w-invite-card::after {
    background: var(--xn1w-line-color);
    height: 1px;
    left: 23%;
    right: 23%;
    top: 47%;
}

.xn1w-template-key-serif-divider .xn1w-template-primary-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xn1w-template-key-soft-arch .xn1w-invite-card {
    border-radius: 12px 12px 10px 10px;
}

.xn1w-template-key-soft-arch .xn1w-invite-card::before {
    border: 1px solid var(--xn1w-line-color);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    height: 56%;
    inset: 28px 28px auto;
}

.xn1w-template-key-soft-arch .xn1w-invite-card::after {
    background: var(--xn1w-line-color);
    height: 1px;
    left: 26%;
    right: 26%;
    top: 53%;
}

.xn1w-template-key-soft-arch .xn1w-template-intro {
    margin-top: 22px;
}

.xn1w-template-key-detail-columns .xn1w-invite-card::before {
    background: var(--xn1w-line-color);
    bottom: 110px;
    left: 50%;
    top: 36px;
    width: 1px;
}

.xn1w-template-key-detail-columns .xn1w-template-primary-details,
.xn1w-template-key-detail-columns .xn1w-template-meta-list {
    border-top: 1px solid var(--xn1w-line-color);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 16px;
}

.xn1w-template-key-detail-columns .xn1w-template-primary-details > div,
.xn1w-template-key-detail-columns .xn1w-template-meta-list span {
    border-right: 1px solid var(--xn1w-line-color);
    padding: 4px 8px;
}

.xn1w-template-key-detail-columns .xn1w-template-primary-details > div:nth-child(3n),
.xn1w-template-key-detail-columns .xn1w-template-primary-details > div:last-child,
.xn1w-template-key-detail-columns .xn1w-template-meta-list span:nth-child(3n),
.xn1w-template-key-detail-columns .xn1w-template-meta-list span:last-child {
    border-right: 0;
}

.xn1w-template-key-signature-lines .xn1w-invite-card {
    font-family: Georgia, "Times New Roman", serif;
}

.xn1w-template-key-signature-lines .xn1w-invite-card::before {
    background: var(--xn1w-line-color);
    height: 1px;
    left: 20%;
    right: 20%;
    top: 27%;
}

.xn1w-template-key-signature-lines .xn1w-invite-card::after {
    background: var(--xn1w-line-color);
    height: 1px;
    left: 28%;
    right: 28%;
    top: 62%;
}

.xn1w-template-key-signature-lines .xn1w-invite-card h1 {
    font-family: "Segoe Script", "Brush Script MT", Georgia, serif;
    font-weight: 500;
}

.xn1w-template-card-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.xn1w-template-card-actions .ui.mini.buttons {
    margin-left: auto;
}

.xn1w-template-preview-toolbar-compact {
    justify-content: flex-end;
}

.xn1w-template-font-modern .xn1w-invite-card h1 {
    font-weight: 800;
}

.xn1w-template-font-editorial .xn1w-invite-card h1 {
    font-style: italic;
}

.xn1w-template-seal-minimal .xn1w-invite-envelope-seal {
    border-radius: 6px;
}

.xn1w-template-seal-heart .xn1w-invite-envelope-seal {
    font-size: 0;
}

.xn1w-template-seal-heart .xn1w-invite-envelope-seal::before {
    content: "XO";
    font-size: 13px;
}

    .xn1w-invite-template-gsap .xn1w-invite-card,
    .xn1w-invite-template-gsap .xn1w-invite-envelope,
    .xn1w-invite-template-gsap .xn1w-invite-envelope-back-layer,
    .xn1w-invite-template-gsap .xn1w-invite-envelope-front-layer,
.xn1w-invite-template-gsap .xn1w-invite-envelope-flap,
.xn1w-invite-template-gsap .xn1w-invite-envelope-seal,
.xn1w-invite-template-gsap .xn1w-invite-shadow {
    animation: none;
}

@keyframes xn1wInviteEnvelopeFlap {
    0%, 24% {
        opacity: 1;
        transform: rotateX(0deg) translateY(0);
        z-index: 12;
    }
    44%, 64% {
        opacity: 1;
        transform: rotateX(-172deg) translateY(0);
        z-index: 3;
    }
    100% {
        opacity: 0;
        transform: rotateX(-172deg) translateY(300px);
        z-index: 3;
    }
}

@keyframes xn1wInviteEnvelopeSeal {
    0%, 20% {
        opacity: 1;
        transform: scale(1);
    }
    34%, 100% {
        opacity: 0;
        transform: scale(.62) translateY(-24px);
    }
}

@keyframes xn1wInviteCardReveal {
    0%, 38% {
        clip-path: inset(92% 0 0 0 round 10px);
        opacity: 0;
        transform: translate3d(-50%, 0, 0) scale(.98);
        z-index: 6;
    }
    46% {
        clip-path: inset(68% 0 0 0 round 10px);
        opacity: .98;
        transform: translate3d(-50%, 0, 0) scale(.99);
        z-index: 6;
    }
    68% {
        clip-path: inset(0 0 0 0 round 10px);
        opacity: 1;
        transform: translate3d(-50%, 0, 0) scale(1);
        z-index: 6;
    }
    100% {
        clip-path: inset(0 0 0 0 round 10px);
        opacity: 1;
        transform: translate3d(-50%, 0, 0) scale(1);
        z-index: 6;
    }
}

@keyframes xn1wInviteEnvelopeExit {
    0%, 52% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0);
    }
    74% {
        opacity: .86;
        transform: translate3d(-50%, 130px, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(-50%, 300px, 0);
    }
}

@keyframes xn1wInviteShadowExit {
    0%, 56% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(.72) translateY(70px);
    }
}

@keyframes xn1wMiniFlap {
    0%, 24% {
        transform: rotateX(0);
    }
    44%, 100% {
        transform: rotateX(-168deg);
    }
}

@keyframes xn1wMiniSeal {
    0%, 22% {
        opacity: 1;
        transform: scale(1);
    }
    36%, 100% {
        opacity: 0;
        transform: scale(.58) translateY(-14px);
    }
}

@keyframes xn1wMiniCardReveal {
    0%, 32% {
        transform: translateY(36px) scale(.82);
    }
    64% {
        transform: translateY(-28px) scale(.94);
    }
    100% {
        transform: translateY(-40px) scale(1);
    }
}

@keyframes xn1wEnvelopeFlap {
    0%, 22% {
        transform: rotateX(0deg);
        z-index: 8;
    }
    42%, 100% {
        transform: rotateX(-172deg);
        z-index: 1;
    }
}

@keyframes xn1wEnvelopeSeal {
    0%, 20% {
        opacity: 1;
        transform: scale(1);
    }
    34%, 100% {
        opacity: 0;
        transform: scale(.62) translateY(-24px);
    }
}

@keyframes xn1wCardReveal {
    0%, 34% {
        opacity: .96;
        transform: translate3d(-50%, 18%, -12px) scale(.72);
        z-index: 2;
    }
    62% {
        transform: translate3d(-50%, -28%, 80px) scale(.92);
        z-index: 12;
    }
    100% {
        opacity: 1;
        transform: translate3d(-50%, -56%, 120px) scale(1);
        z-index: 12;
    }
}

@keyframes xn1wEnvelopeSettle {
    0% {
        transform: translateX(-50%) rotateX(7deg) rotateZ(-1deg) translateY(24px);
    }
    100% {
        transform: translateX(-50%) rotateX(0deg) rotateZ(0deg) translateY(0);
    }
}

@keyframes xn1wEnvelopeShadow {
    0% {
        opacity: .24;
        transform: scale(.76);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 760px) {
    .xn1w-template-editor-drawer {
        bottom: 12px;
        left: 12px;
        max-width: calc(100% - 24px);
        top: 12px;
        width: calc(100% - 24px);
    }

    .xn1w-template-editor-open-button {
        left: 12px;
        top: 12px;
    }

    .xn1w-template-editor-drawer .ui.form .two.fields {
        display: block;
    }

    .xn1w-template-preview-toolbar {
        flex-direction: column;
    }

    .xn1w-template-preview-stage,
    .xn1w-template-preview-stage .xn1w-envelope-template {
        min-height: 500px;
    }

    .xn1w-template-preview-stage .xn1w-invite-template {
        min-height: 540px;
    }

    .xn1w-invite-template {
        min-height: 540px;
        padding: 18px 8px;
    }

    .xn1w-invite-scene {
        height: 500px;
        min-height: 500px;
        width: 94vw;
    }

    .xn1w-invite-envelope {
        bottom: 12px;
        height: 168px;
        width: 90%;
    }

    .xn1w-invite-card {
        height: 430px;
        padding: 26px 20px;
        width: min(78vw, 330px);
    }

    .xn1w-guest-page-card {
        aspect-ratio: 1000 / 1419;
        height: auto;
        padding: 0;
        width: min(88vw, 420px);
    }

    .xn1w-layout-classic-letter {
        padding: clamp(100px, 24vw, 128px) clamp(38px, 9vw, 54px) clamp(34px, 8vw, 46px);
    }

    .xn1w-layout-classic-letter.xn1w-guest-page-step-2,
    .xn1w-layout-classic-letter.xn1w-guest-page-step-3 {
        padding-top: clamp(92px, 22vw, 118px);
    }

    .xn1w-guest-page-header h1 {
        font-size: 28px;
    }

    .xn1w-guest-page-header h1.is-long {
        font-size: 25px;
    }

    .xn1w-guest-page-header h1.is-extra-long {
        font-size: 22px;
    }

    .xn1w-guest-page-header p {
        font-size: 9px;
    }

    .xn1w-guest-step-invitation,
    .xn1w-guest-memory-grid,
    .xn1w-guest-action-row {
        grid-template-columns: 1fr;
    }

    .xn1w-guest-ceremony-panel,
    .xn1w-guest-details-panel {
        padding: 0;
    }

    .xn1w-guest-ceremony-panel {
        padding: 12px;
    }

    .xn1w-guest-menu-grid {
        grid-template-columns: 1fr;
    }

    .xn1w-guest-menu-option {
        min-height: 92px;
    }

    .xn1w-envelope-template {
        min-height: 560px;
        padding: 32px 10px;
    }

    .xn1w-envelope-scene {
        height: 500px;
        width: 94vw;
    }

    .xn1w-envelope {
        bottom: 54px;
        height: 170px;
        width: 90%;
    }

    .xn1w-envelope-card {
        height: 340px;
        left: 50%;
        padding: 26px 20px;
        width: 86%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xn1w-invite-envelope-back-layer,
    .xn1w-invite-envelope-front-layer,
    .xn1w-invite-card,
    .xn1w-invite-envelope-flap,
    .xn1w-invite-envelope-seal,
    .xn1w-invite-shadow,
    .xn1w-envelope,
    .xn1w-envelope-card,
    .xn1w-envelope-flap,
    .xn1w-envelope-seal,
    .xn1w-envelope-shadow {
        animation: none;
    }

    .xn1w-invite-envelope-back-layer,
    .xn1w-invite-envelope-front-layer,
    .xn1w-invite-envelope-flap,
    .xn1w-invite-envelope-seal,
    .xn1w-invite-shadow,
    .xn1w-envelope-flap,
    .xn1w-envelope-seal {
        display: none;
    }

    .xn1w-invite-card {
        opacity: 1;
        transform: translate3d(-50%, -8%, 0) scale(1);
        z-index: 12;
    }

    .xn1w-envelope-card {
        transform: translate3d(-50%, -56%, 0) scale(1);
        z-index: 12;
    }
}