@font-face {
  font-family: "Antarctic-Regular";
  src: url("fonts/Antarctic.otf?v=20260803-4") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ZtNeueRalewe-Regular";
  src: url("fonts/ZTNeueRalewe-Regular.ttf?v=20260803-4") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ZtNeueRalewe-Bold";
  src: url("fonts/ZTNeueRalewe-Bold.ttf?v=20260803-4") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-width: 25.125rem;
  --ink: #0c0619;
  --ink-hero: #18073b;
  --font-display: "Antarctic-Regular", "Segoe Script", "Comic Sans MS", cursive;
  --font-text: "ZtNeueRalewe-Regular", "Raleway", Arial, sans-serif;
  --font-text-bold: "ZtNeueRalewe-Bold", "Raleway", Arial, sans-serif;
}

html {
  font-size: min(16px, calc(100vw / 25.125));
  background: #f7f2fb;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  background: #f7f2fb;
}

img {
  display: block;
}

.i-phone-17-1,
.i-phone-17-1 * {
  box-sizing: border-box;
}

.i-phone-17-1 {
  background: #ffffff;
  width: var(--page-width);
  max-width: 100vw;
  height: 346.85125rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(24, 7, 59, 0.12);
}

.i-phone-17-1:has(.guest-form.has-children) {
  height: 353.16375rem;
}

.main-image {
  width: 25.125rem;
  height: 52.9375rem;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}

.icon {
  width: 9.1875rem;
  height: 9.5rem;
  position: absolute;
  left: 7.9375rem;
  top: 8.6875rem;
  overflow: visible;
}

.main-text2 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
  width: 21.1875rem;
  height: 10.5rem;
  position: absolute;
  left: 1.9375rem;
  top: 8.1875rem;
}

.div,
.div2 {
  color: var(--ink-hero);
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 5rem;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}

.div {
  text-align: left;
}

.div2 {
  text-align: center;
}

.text-inviting {
  position: absolute;
  left: 0;
  top: 0;
  width: 25.125rem;
  height: 74.625rem;
  pointer-events: none;
}

.text-inviting .ellipse-1 {
  background: #eee3ff;
  border-radius: 50%;
  width: 32.125rem;
  height: 32.1875rem;
  position: absolute;
  left: -3.5rem;
  top: 42.9375rem;
}

.text-2,
.text-1 {
  display: contents;
}

._19-09-2026 {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-text);
  font-size: 2.25rem;
  line-height: 3.0625rem;
  font-weight: 400;
  width: 23.125rem;
  height: 3.0625rem;
  position: absolute;
  left: 1rem;
  top: 48.46875rem;
}

.div3 {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 400;
  width: 23.125rem;
  height: 8rem;
  position: absolute;
  left: 1rem;
  top: 55.28125rem;
}

.text-inviting .div4 {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-text);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 400;
  width: 23.125rem;
  height: 5.0625rem;
  position: absolute;
  left: 1rem;
  top: 64.53125rem;
}

.d-98-ed-57-e-6-c-3-e-48-ea-8-a-9-d-b-0-a-297294943-photoroom-1,
.main-text,
.text,
.group-9,
.intersect {
  display: none;
}

.div5 {
  color: var(--ink);
  text-align: left;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 400;
  width: 13.8125rem;
  height: 4rem;
  position: absolute;
  left: 1rem;
  top: 81.375rem;
}

.text-3 {
  background: #fff5d2;
  border-radius: 50%;
  width: 15.75rem;
  height: 15.75rem;
  position: absolute;
  left: 1rem;
  top: 86.625rem;
}

._6-143905 {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-text);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 400;
  width: 11.25rem;
  height: 6.75rem;
  position: absolute;
  left: 2.25rem;
  top: 4.5rem;
}

.text-4 {
  background: #eee3ff;
  border-radius: 50%;
  width: 12.375rem;
  height: 12.375rem;
  position: absolute;
  left: 11.75rem;
  top: 96.1875rem;
}

._19-17-00 {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-text);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 400;
  width: 6.125rem;
  height: 3.375rem;
  position: absolute;
  left: 3.125rem;
  top: 4.5rem;
}

.image-flower-1 {
  width: 13rem;
  height: 11.8125rem;
  position: absolute;
  left: 12.125rem;
  top: 70.5rem;
  object-fit: cover;
}

.vector-1 {
  width: 30.130625rem;
  height: 19.64875rem;
  position: absolute;
  left: -2.546875rem;
  top: 87.49375rem;
  overflow: visible;
}

.image-flower-2 {
  width: 12.5rem;
  height: 18.75rem;
  position: absolute;
  left: 0;
  top: 104.4375rem;
  overflow: visible;
  object-fit: contain;
}

.image-people {
  width: 19.463125rem;
  height: 31.7525rem;
  position: absolute;
  left: 0;
  top: 132.315625rem;
  overflow: visible;
  z-index: 2;
}

.vector-2 {
  width: 22.8125rem;
  height: 33.1875rem;
  position: absolute;
  left: 0;
  top: 130.875rem;
  overflow: visible;
  z-index: 3;
}

.div6 {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-text);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 400;
  width: 16.25rem;
  height: 6.75rem;
  position: absolute;
  left: 4.4375rem;
  top: 170.318125rem;
}

.image,
.image2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 25.125rem;
  height: 0;
}

.image-color-1,
.image-color-2,
.image-color-3,
.image-color-4,
.image-color-5,
.image-color-6,
.image-color-7 {
  width: 3.6875rem;
  height: 3.6875rem;
  position: absolute;
  object-fit: cover;
}

.image-color-1 {
  left: 3.3125rem;
  top: 178.318125rem;
}

.image-color-2 {
  left: 8.25rem;
  top: 178.318125rem;
}

.image-color-3 {
  left: 13.1875rem;
  top: 178.318125rem;
}

.image-color-4 {
  left: 18.125rem;
  top: 178.318125rem;
}

.image-color-5 {
  left: 5.75rem;
  top: 183.255625rem;
}

.image-color-6 {
  left: 10.6875rem;
  top: 183.255625rem;
}

.image-color-7 {
  left: 15.6875rem;
  top: 183.255625rem;
}

.vector-background {
  width: 32.625rem;
  height: 46.283125rem;
  position: absolute;
  left: -3.75rem;
  top: 193.193125rem;
  overflow: visible;
  z-index: 0;
}

.div7 {
  color: var(--ink);
  text-align: left;
  font-family: var(--font-text);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 400;
  width: 19rem;
  height: 6.75rem;
  position: absolute;
  left: 1rem;
  top: 193.193125rem;
  z-index: 1;
}

.vector-3 {
  width: 4.375rem;
  height: 29.0625rem;
  position: absolute;
  left: 10.4375rem;
  top: 199.9375rem;
  overflow: visible;
  z-index: 1;
}

.image-flower-3 {
  width: 11.625rem;
  height: 13.4375rem;
  position: absolute;
  left: 0;
  top: 204.97625rem;
  object-fit: cover;
  z-index: 2;
}

.image-flower-4 {
  width: auto;
  height: 14.15625rem;
  position: absolute;
  right: 0;
  top: 211.929375rem;
  z-index: 2;
}

.div8 {
  color: var(--ink);
  text-align: right;
  font-family: var(--font-text);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 400;
  width: 21rem;
  height: 6.75rem;
  position: absolute;
  left: 3.125rem;
  top: 229rem;
  z-index: 1;
}

.image-background-1 {
  width: 25.125rem;
  height: 43.5rem;
  position: absolute;
  left: 0;
  top: 245.75rem;
  object-fit: cover;
}

.text-gift {
  position: absolute;
  left: 0;
  top: 0;
  width: 25.125rem;
  height: 288.9375rem;
}

.text-gift .ellipse-1 {
  background: #eee3ff;
  border-radius: 50%;
  width: 32.125rem;
  height: 32.1875rem;
  position: absolute;
  left: -3.4375rem;
  top: 251.35125rem;
}

.text-5 {
  display: contents;
}

.div10 {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 400;
  width: 16rem;
  height: 8rem;
  position: absolute;
  left: 4.625rem;
  top: 256.91375rem;
}

.text-gift .div4 {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-text);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 400;
  width: 23.125rem;
  height: 11.8125rem;
  position: absolute;
  left: 1.0625rem;
  top: 266.16375rem;
}

.div11 {
  color: var(--ink);
  text-align: left;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 400;
  width: 18.625rem;
  height: 4rem;
  position: absolute;
  left: 1rem;
  top: 291.72625rem;
}

.guest-form {
  position: absolute;
  left: 1rem;
  top: 296.97625rem;
  width: 23.125rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.frame-name,
.frame-choice-1,
.frame-choice-2,
.frame-baby,
.frame-food,
.frame-alcohol {
  width: 23.125rem;
}

.frame-choice-1,
.frame-choice-2 {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.frame-choice-1,
.frame-choice-2 {
  margin-bottom: -0.5rem;
}

.frame-baby {
  display: none;
}

.guest-form.has-children .frame-baby {
  display: block;
}

.div12,
.div15,
.div17 {
  color: var(--ink);
  text-align: left;
  font-family: var(--font-text);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 400;
  position: relative;
  width: 23.125rem;
}

.frame-name .div12 {
  width: 17.5rem;
}

.frame-choice-1 .div12 {
  width: 19.875rem;
}

.frame-choice-2 .div12 {
  width: 10.125rem;
}

.frame-baby .div17 {
  width: 12.4375rem;
}

.card-guest-name,
.card-baby-name,
.card-food,
.card-alcohol {
  background: #f1ebf6;
  border-radius: 6.25rem;
  border: 0.0625rem solid rgba(12, 6, 25, 0.35);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 23.125rem;
  min-height: 2.875rem;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  outline: none;
}

.card-guest-name::placeholder,
.card-baby-name::placeholder,
.card-food::placeholder,
.card-alcohol::placeholder {
  color: #6f6f6f;
  opacity: 1;
}

.card-guest-name:focus,
.card-baby-name:focus,
.card-food:focus,
.card-alcohol:focus {
  border-color: #5d4684;
  box-shadow: 0 0 0 0.1875rem rgba(93, 70, 132, 0.14);
}

.card-guest-name,
.card-baby-name {
  display: block;
  margin-top: 0.5rem;
}

.card-food,
.card-alcohol {
  margin-top: 0.5rem;
}

.div13 {
  color: #6f6f6f;
  text-align: left;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  position: relative;
}

.choice-1,
.choice-2 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  justify-content: flex-start;
  width: 5.3125rem;
  position: relative;
  margin-top: 0;
}

.frame-10,
.frame-11 {
  padding: 0.5rem 0.5rem 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 2.6875rem;
  position: relative;
  cursor: pointer;
}

.frame-12 {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.rectangle-3 {
  border-radius: 50%;
  border: 0.0625rem solid var(--ink);
  flex-shrink: 0;
  width: 1.6875rem;
  height: 1.6875rem;
  position: relative;
}

.rectangle-3::after {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: #5d4684;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  transition: opacity 180ms ease, transform 180ms ease;
}

.radio-input {
  width: 0.0625rem;
  height: 0.0625rem;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-input:checked + .rectangle-3::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.radio-input:focus-visible + .rectangle-3 {
  box-shadow: 0 0 0 0.1875rem rgba(93, 70, 132, 0.18);
}

.div14 {
  color: var(--ink);
  text-align: left;
  font-family: var(--font-text);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 400;
  position: relative;
}

.button {
  background: #5d4684;
  border-radius: 6.25rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23.125rem;
  min-height: 2.875rem;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.button:hover,
.button:focus-visible {
  background: #6b5296;
}

.button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.honeypot {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-text);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  width: 23.125rem;
  min-height: 1.25rem;
  position: absolute;
  left: 0;
  top: calc(100% + 0.25rem);
}

.submission-confirmation {
  background: #eee3ff;
  border: 0.0625rem solid rgba(12, 6, 25, 0.2);
  border-radius: 1.5rem;
  width: calc(100vw - 2rem);
  max-width: 23.125rem;
  min-height: 12rem;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 2rem 1.5rem;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  box-shadow: 0 0.75rem 2rem rgba(24, 7, 59, 0.12);
  overflow-y: auto;
}

.submission-confirmation[hidden] {
  display: none;
}

.submission-confirmation-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 3.25rem;
  font-weight: 400;
}

.submission-confirmation-text {
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
}

.div16 {
  color: #ffffff;
  text-align: center;
  font-family: var(--font-text-bold);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  position: relative;
}

.footer {
  width: 25.125rem;
  height: 9.4375rem;
  position: absolute;
  left: 0;
  top: 337.41375rem;
  transition: top 350ms ease;
}

.i-phone-17-1:has(.guest-form.has-children) .footer {
  top: 343.72625rem;
}

.image-background-2 {
  width: 25.125rem;
  height: 9.4375rem;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}

.frame-19 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
  width: 13.5rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.footer .div4 {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-text);
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}

.div9 {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}

.image-flower-1,
.image-flower-2,
.text-3,
.text-4,
.image-people,
.vector-2,
.image-color-1,
.image-color-2,
.image-color-3,
.image-color-4,
.image-color-5,
.image-color-6,
.image-color-7,
.image-flower-3,
.image-flower-4,
.vector-1,
.vector-3 {
  opacity: 0;
  transition: opacity 900ms ease, transform 900ms ease;
  will-change: opacity, transform;
}

.image-flower-1,
.text-4,
.image-color-5,
.image-color-6,
.image-color-7 {
  transform: translateX(2.5rem);
}

.image-flower-4 {
  transform: translateX(2.5rem);
}

.image-flower-2,
.text-3,
.image-people,
.vector-2,
.image-color-1,
.image-color-2,
.image-color-3,
.image-color-4,
.image-flower-3 {
  transform: translateX(-2.5rem);
}

.vector-1,
.vector-3 {
  transform: translateY(1rem) scale(0.98);
}

.image-flower-1.is-visible,
.image-flower-2.is-visible,
.text-3.is-visible,
.text-4.is-visible,
.image-people.is-visible,
.vector-2.is-visible,
.image-color-1.is-visible,
.image-color-2.is-visible,
.image-color-3.is-visible,
.image-color-4.is-visible,
.image-color-5.is-visible,
.image-color-6.is-visible,
.image-color-7.is-visible,
.image-flower-3.is-visible,
.vector-1.is-visible,
.vector-3.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

.image-flower-4.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.image-color-2,
.image-color-6 {
  transition-delay: 80ms;
}

.image-color-3,
.image-color-7 {
  transition-delay: 160ms;
}

.image-color-4 {
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  .image-flower-1,
  .image-flower-2,
  .text-3,
  .text-4,
  .image-people,
  .vector-2,
  .image-color-1,
  .image-color-2,
  .image-color-3,
  .image-color-4,
  .image-color-5,
  .image-color-6,
  .image-color-7,
  .image-flower-3,
  .image-flower-4,
  .vector-1,
  .vector-3 {
    opacity: 1;
    transform: none;
    transition: none;
  }

}