.birthday-invite-public {
  --invite-paper: #fffdf7;
  --invite-wash: #f6f9f2;
  --invite-ink: #143f3b;
  --invite-muted: #61726c;
  --invite-line: rgba(20, 63, 59, 0.14);
  --invite-forest: #064b3a;
  --invite-teal: #66c8bd;
  --invite-coral: #ee8b78;
  --invite-gold: #d9a84e;
  --invite-sky: #85bff3;
  background:
    linear-gradient(180deg, #fffdf7 0%, #ffffff 34%, #eef5ee 68%, #fffaf1 100%);
}

.birthday-selfserve-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: clamp(18px, 4vw, 36px);
  align-items: stretch;
  padding: 24px clamp(20px, 5vw, 76px) 18px;
}

.birthday-hero-copy,
.birthday-hero-summary,
.builder-panel,
.birthday-live-preview > section {
  border: 1px solid var(--invite-line);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.92);
  box-shadow: 0 20px 54px rgba(57, 43, 26, 0.1);
}

.birthday-hero-copy {
  padding: 26px;
}

.birthday-hero-copy h1 {
  max-width: 860px;
  margin: 0;
  color: var(--invite-forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 58px;
  font-weight: 500;
  line-height: 0.96;
}

.birthday-hero-copy p {
  max-width: 800px;
  margin: 18px 0 0;
  color: var(--invite-muted);
  font-size: 17px;
  line-height: 1.52;
}

.birthday-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.birthday-hero-actions .secondary-cta {
  border-color: rgba(7, 63, 58, 0.22);
  background: rgba(255, 255, 255, 0.78);
  color: var(--invite-forest);
}

.birthday-hero-actions .secondary-cta:hover {
  border-color: rgba(102, 200, 189, 0.56);
  background: #ffffff;
}

.birthday-hero-summary {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px;
}

.birthday-hero-summary span,
.price-card span {
  color: #956d23;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.birthday-hero-summary strong,
.price-card strong {
  color: var(--invite-forest);
  font-size: 42px;
  line-height: 0.92;
}

.birthday-hero-summary p,
.birthday-hero-summary li,
.builder-help,
.form-status,
.url-card p,
.price-card p,
.readiness-card li,
.confirmation-card p,
.preview-copy p,
.preview-copy small {
  color: var(--invite-muted);
  line-height: 1.45;
}

.birthday-hero-summary ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.birthday-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: 18px;
  align-items: start;
  padding: 0 clamp(20px, 5vw, 76px) clamp(42px, 6vw, 76px);
}

.birthday-builder-form {
  display: grid;
  gap: 16px;
}

.builder-journey-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(5, 107, 140, 0.16);
  border-radius: 8px;
  padding: 16px;
  background:
    radial-gradient(circle at 4% 18%, rgba(102, 200, 189, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 225, 0.9));
  box-shadow: 0 18px 44px rgba(57, 43, 26, 0.08);
}

.builder-journey-card h2 {
  margin: 7px 0 0;
  color: var(--invite-forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}

.builder-journey-card p {
  margin: 8px 0 0;
  color: var(--invite-muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.42;
}

.journey-next {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  border: 1px solid rgba(5, 107, 140, 0.16);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--invite-forest);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
}

.journey-pill,
.status-pill,
.mobile-builder-dock span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 26px;
  border: 1px solid rgba(5, 107, 140, 0.2);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--invite-forest);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.journey-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-steps li {
  position: relative;
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid rgba(20, 63, 59, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--invite-muted);
  font-size: 11px;
  font-weight: 950;
}

.journey-steps li.is-ready {
  border-color: rgba(5, 107, 140, 0.24);
  background: linear-gradient(135deg, rgba(151, 225, 217, 0.76), rgba(255, 242, 184, 0.7));
  color: var(--invite-forest);
}

.journey-steps li.is-current {
  border-color: rgba(237, 95, 119, 0.28);
  color: var(--invite-forest);
  box-shadow: 0 0 0 3px rgba(237, 95, 119, 0.08);
}

.journey-preview-link {
  justify-self: end;
  white-space: nowrap;
}

.builder-panel {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 28px);
}

.builder-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.builder-panel-heading span {
  color: #956d23;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.builder-panel-heading h2,
.url-card h2,
.readiness-card h2,
.confirmation-card h2,
.preview-copy h2 {
  margin: 0;
  color: var(--invite-forest);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1;
}

.builder-panel-heading h2 {
  font-size: 38px;
}

.builder-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.builder-panel label,
.public-theme-field legend {
  display: grid;
  gap: 7px;
  color: var(--invite-ink);
  font-size: 13px;
  font-weight: 850;
}

.builder-panel label > span[aria-hidden="true"],
.builder-panel label > span[data-phone-required],
.builder-panel label > span[data-domain-required],
.public-theme-field legend > span {
  color: var(--invite-coral);
}

.domain-helper-copy {
  display: block;
  color: rgba(20, 63, 59, 0.66);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.builder-panel input,
.builder-panel select,
.builder-panel textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(20, 63, 59, 0.16);
  border-radius: 8px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--invite-ink);
  font: inherit;
  outline: none;
}

.builder-panel input:focus,
.builder-panel select:focus {
  border-color: rgba(102, 200, 189, 0.82);
  box-shadow: 0 0 0 4px rgba(102, 200, 189, 0.16);
}

.slug-availability {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  border: 1px solid rgba(20, 63, 59, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.slug-availability .secondary-cta {
  min-height: 40px;
  border-color: rgba(20, 63, 59, 0.18);
  color: var(--invite-forest);
  cursor: pointer;
}

.slug-availability p {
  flex: 1 1 260px;
  margin: 0;
  color: var(--invite-muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.slug-availability p.is-good {
  color: var(--invite-forest);
}

.slug-availability p.is-error {
  color: #b2483b;
}

.public-theme-field {
  display: grid;
  gap: 10px;
  border: 0;
  margin: 0;
  padding: 0;
}

.public-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.public-theme-grid label {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: stretch;
  min-height: 156px;
  border: 1px solid rgba(20, 63, 59, 0.14);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.public-theme-grid input {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

.public-theme-grid .theme-name {
  display: block;
  color: var(--invite-ink);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}

.theme-art {
  position: relative;
  display: block;
  min-height: 104px;
  overflow: hidden;
  border: 1px solid rgba(20, 63, 59, 0.1);
  border-radius: 8px;
  background-color: #fffdf7;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
  pointer-events: none;
}

.theme-art::before,
.theme-art::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.theme-art--candle-party {
  background:
    linear-gradient(90deg, transparent 18%, #c9a6d8 19% 25%, transparent 26% 38%, #ffc981 39% 45%, transparent 46% 58%, #fa8fa5 59% 65%, transparent 66% 78%, #bedb83 79% 85%, transparent 86%),
    radial-gradient(circle at 22% 24%, #ffe989 0 7%, transparent 8%),
    radial-gradient(circle at 42% 20%, #fff4a6 0 8%, transparent 9%),
    radial-gradient(circle at 62% 22%, #ffe989 0 7%, transparent 8%),
    radial-gradient(circle at 82% 24%, #fff4a6 0 7%, transparent 8%),
    linear-gradient(180deg, #fffdf7, #f9f3e4);
}

.theme-art--candle-party::after {
  inset: 16% 11% 10%;
  border-bottom: 7px solid #8ed8d3;
  border-radius: 0 0 50% 50%;
}

.theme-art--princess-garden {
  background:
    radial-gradient(circle at 18% 72%, #f8b7de 0 8%, transparent 9%),
    radial-gradient(circle at 36% 64%, #ffd6eb 0 9%, transparent 10%),
    radial-gradient(circle at 78% 70%, #e9a8d9 0 8%, transparent 9%),
    linear-gradient(135deg, #fff0f9, #eaf8df);
}

.theme-art--princess-garden::before {
  left: 50%;
  top: 25%;
  width: 58px;
  height: 46px;
  transform: translateX(-50%);
  background:
    linear-gradient(135deg, transparent 0 22%, #f6c653 23% 44%, transparent 45%),
    linear-gradient(45deg, transparent 0 22%, #f6c653 23% 44%, transparent 45%),
    linear-gradient(180deg, #f8d76d, #d69d35);
  clip-path: polygon(0 95%, 12% 36%, 30% 70%, 50% 18%, 70% 70%, 88% 36%, 100% 95%);
}

.theme-art--dino-dig {
  background:
    radial-gradient(circle at 24% 78%, #c99b5d 0 8%, transparent 9%),
    radial-gradient(circle at 74% 70%, #b4874d 0 10%, transparent 11%),
    linear-gradient(180deg, #d9f1d0 0 52%, #e4c39b 53%);
}

.theme-art--dino-dig::before {
  left: 28%;
  top: 35%;
  width: 68px;
  height: 42px;
  border-radius: 48% 44% 40% 46%;
  background: #79b665;
  box-shadow: 44px -10px 0 -18px #79b665, -18px 24px 0 -14px #5f9a50, 30px 24px 0 -14px #5f9a50;
}

.theme-art--sports-day {
  background:
    radial-gradient(circle at 18% 26%, rgba(142, 213, 255, 0.95) 0 10px, transparent 11px),
    radial-gradient(circle at 78% 24%, rgba(255, 216, 108, 0.95) 0 10px, transparent 11px),
    radial-gradient(circle at 56% 72%, rgba(255, 128, 196, 0.88) 0 12px, transparent 13px),
    linear-gradient(145deg, #162947 0%, #274e73 52%, #152136 100%);
}

.theme-art--sports-day::before {
  left: 18%;
  top: 58%;
  width: 64%;
  height: 18%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(132, 228, 255, 0.72), rgba(255, 214, 107, 0.86));
  box-shadow:
    0 -18px 28px rgba(255, 255, 255, 0.24),
    0 10px 22px rgba(3, 16, 30, 0.24);
}

.theme-art--space-rocket {
  background:
    radial-gradient(circle at 22% 24%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 68% 20%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 84% 62%, #ffffff 0 2px, transparent 3px),
    linear-gradient(180deg, #111d45, #4c5ea6);
}

.theme-art--space-rocket::before {
  left: 46%;
  top: 26%;
  width: 28px;
  height: 58px;
  transform: rotate(28deg);
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, #ffffff 0 58%, #f26f5d 59%);
  box-shadow: -12px 32px 0 -8px #f6c653, 12px 32px 0 -8px #f6c653;
}

.theme-art--mermaid-lagoon {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.34) 0 5px, transparent 5px 14px),
    linear-gradient(180deg, #b7f2eb, #4fbcc4);
}

.theme-art--mermaid-lagoon::before {
  right: 18%;
  top: 28%;
  width: 54px;
  height: 54px;
  border-radius: 50% 50% 8px 50%;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #d986c9, #7e5ec4);
}

.theme-art--rainbow-art {
  background:
    linear-gradient(135deg, #ff7b7b 0 14%, #ffd36e 15% 29%, #91d66f 30% 44%, #72d7db 45% 59%, #85bff3 60% 74%, #c796e8 75%),
    #fffdf7;
}

.theme-art--rainbow-art::after {
  inset: 18%;
  border: 6px dotted rgba(255, 255, 255, 0.82);
  border-radius: 8px;
}

.theme-art--superhero {
  background:
    linear-gradient(135deg, #245cb8 0 42%, #f3cb4d 43% 56%, #d94747 57%);
}

.theme-art--superhero::before {
  left: 50%;
  top: 50%;
  width: 76px;
  height: 54px;
  transform: translate(-50%, -50%);
  background: #fff7cf;
  clip-path: polygon(50% 0, 61% 25%, 88% 12%, 76% 38%, 100% 50%, 76% 62%, 88% 88%, 61% 75%, 50% 100%, 39% 75%, 12% 88%, 24% 62%, 0 50%, 24% 38%, 12% 12%, 39% 25%);
}

.theme-art--zoo-safari {
  background:
    radial-gradient(circle at 18% 22%, #7aa95c 0 10%, transparent 11%),
    radial-gradient(circle at 82% 18%, #92b36a 0 11%, transparent 12%),
    linear-gradient(180deg, #d9edbe 0 48%, #d8ba79 49%);
}

.theme-art--zoo-safari::before {
  left: 33%;
  top: 40%;
  width: 54px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, #143f3b 0 4px, transparent 5px),
    radial-gradient(circle at 66% 38%, #143f3b 0 4px, transparent 5px),
    linear-gradient(90deg, #d9a84e 0 28%, #8d6b38 29% 35%, #d9a84e 36% 64%, #8d6b38 65% 71%, #d9a84e 72%);
  box-shadow: -18px -16px 0 -8px #d9a84e, 18px -16px 0 -8px #d9a84e;
}

.theme-art--arcade-game {
  background:
    linear-gradient(90deg, #8b74df 0 12px, transparent 12px 24px),
    linear-gradient(180deg, #1b244f 0 12px, #101734 12px 24px);
  background-size: 24px 24px;
}

.theme-art--arcade-game::before {
  left: 50%;
  top: 50%;
  width: 70px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background:
    radial-gradient(circle at 72% 48%, #ff6d9f 0 5px, transparent 6px),
    radial-gradient(circle at 84% 48%, #f6c653 0 5px, transparent 6px),
    linear-gradient(90deg, #66c8bd 0 28%, transparent 29%),
    #fffdf7;
}

.theme-art--rainbow-art {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.22)),
    url("/assets/birthday-invites/rainbow-art-studio-bg.webp") center / cover no-repeat;
}

.theme-art--rainbow-art::before {
  left: 35%;
  bottom: 4%;
  width: 76px;
  height: 100px;
  background: url("/assets/birthday-invites/rainbow-paint-pixie-3d.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 8px 10px rgba(132, 47, 86, 0.2));
}

.theme-art--rainbow-art::after {
  left: 16%;
  right: 12%;
  bottom: 13%;
  height: 28%;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(105deg, #ff75ad, #ffd86e, #7bfff5, #c796e8);
  opacity: 0.72;
  transform: rotate(-8deg);
}

.theme-art--superhero {
  background:
    linear-gradient(180deg, rgba(18, 31, 75, 0.08), rgba(18, 31, 75, 0.28)),
    url("/assets/birthday-invites/superhero-sky-city-bg.webp") center / cover no-repeat;
}

.theme-art--superhero::before {
  left: 44%;
  bottom: 0;
  width: 82px;
  height: 106px;
  transform: none;
  clip-path: none;
  background: url("/assets/birthday-invites/superhero-cape-champion-3d.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 8px 10px rgba(87, 40, 38, 0.24));
}

.theme-art--superhero::after {
  left: 12%;
  top: 16%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7cf 0 38%, #ffd86e 39% 62%, transparent 63%);
  box-shadow: 0 0 26px rgba(255, 216, 110, 0.5);
}

.theme-art--arcade-game {
  background:
    linear-gradient(180deg, rgba(7, 8, 26, 0.04), rgba(7, 8, 26, 0.38)),
    url("/assets/birthday-invites/arcade-neon-playroom-bg.webp") center / cover no-repeat;
}

.theme-art--arcade-game::before {
  left: 40%;
  bottom: 5%;
  width: 86px;
  height: 104px;
  transform: none;
  border-radius: 0;
  background: url("/assets/birthday-invites/arcade-pixel-pal-3d.png") center bottom / contain no-repeat;
  filter:
    drop-shadow(0 8px 10px rgba(17, 24, 58, 0.28))
    drop-shadow(0 0 10px rgba(123, 255, 245, 0.28));
}

.theme-art--arcade-game::after {
  content: "LVL";
  left: 16px;
  top: 16px;
  display: grid;
  width: 52px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(123, 255, 245, 0.36);
  border-radius: 10px;
  background: rgba(2, 2, 18, 0.5);
  color: #7bfff5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px rgba(123, 255, 245, 0.84);
}

.public-theme-grid label:hover,
.public-theme-grid label:has(input:focus-visible),
.public-theme-grid label:has(input:checked) {
  border-color: var(--invite-teal);
  background: rgba(226, 247, 243, 0.84);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(20, 63, 59, 0.08);
}

.theme-character-field {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(20, 63, 59, 0.12);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(198, 255, 246, 0.74), rgba(255, 255, 255, 0.82)),
    #ffffff;
}

.theme-character-field[hidden] {
  display: none;
}

.theme-character-field legend {
  padding: 0 4px;
  color: var(--invite-ink);
  font-size: 13px;
  font-weight: 950;
}

.theme-character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.theme-character-group-label {
  display: grid;
  grid-column: 1 / -1;
  gap: 2px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(5, 107, 140, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(226, 247, 243, 0.82));
}

.theme-character-group-label--more {
  margin-top: 12px;
  background:
    linear-gradient(135deg, rgba(255, 250, 242, 0.94), rgba(255, 255, 255, 0.82));
}

.theme-character-group-label--selected {
  margin-top: 12px;
  background:
    radial-gradient(circle at 92% 20%, rgba(217, 168, 78, 0.2), transparent 42%),
    linear-gradient(135deg, rgba(255, 252, 235, 0.96), rgba(235, 255, 252, 0.88));
}

.theme-character-group-label strong {
  color: var(--invite-forest);
  font-size: 13px;
  font-weight: 950;
}

.theme-character-group-label small {
  color: var(--invite-muted);
  font-size: 11px;
  font-weight: 800;
}

.theme-character-grid label {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 92px;
  border: 1px solid rgba(20, 63, 59, 0.14);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease, background 170ms ease;
}

.theme-character-grid label:hover,
.theme-character-grid label:has(input:focus-visible),
.theme-character-grid label:has(input:checked) {
  border-color: var(--invite-teal);
  background: rgba(235, 255, 252, 0.92);
  box-shadow: 0 16px 30px rgba(5, 107, 140, 0.12);
  transform: translateY(-1px);
}

.theme-character-grid label.is-cross-theme {
  background:
    radial-gradient(circle at 92% 12%, rgba(217, 168, 78, 0.18), transparent 38%),
    rgba(255, 255, 255, 0.76);
}

.theme-character-grid em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(20, 63, 59, 0.08);
  color: var(--invite-forest);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
}

.theme-character-grid input {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

.theme-character-grid strong,
.theme-character-grid small {
  display: block;
}

.theme-character-grid strong {
  color: var(--invite-forest);
  font-size: 13px;
  font-weight: 950;
}

.theme-character-grid small {
  color: var(--invite-muted);
  font-size: 11px;
  font-weight: 800;
}

.character-picker-launch {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  justify-items: start;
  margin-top: 6px;
  padding: 12px;
  border: 1px dashed rgba(5, 107, 140, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 96% 10%, rgba(151, 225, 217, 0.28), transparent 38%),
    rgba(255, 255, 255, 0.72);
}

.character-picker-open {
  min-height: 46px;
  border: 1px solid rgba(20, 63, 59, 0.18);
  border-radius: 999px;
  padding: 0 18px;
  background: linear-gradient(135deg, var(--invite-teal), #fff2b8);
  color: #103d38;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(5, 107, 140, 0.14);
  transition: transform 170ms ease, box-shadow 170ms ease, filter 170ms ease;
}

.character-picker-open:hover,
.character-picker-open:focus-visible {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: 0 18px 34px rgba(5, 107, 140, 0.18);
}

.character-picker-launch small {
  color: var(--invite-muted);
  font-size: 11px;
  font-weight: 850;
}

body.birthday-character-picker-open {
  overflow: hidden;
}

.character-picker-modal[hidden],
.character-picker-empty[hidden],
.theme-character-card[hidden] {
  display: none !important;
}

.character-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 100dvh;
  padding: clamp(12px, 3vh, 28px) 22px;
  overflow: auto;
  overscroll-behavior: contain;
}

.character-picker-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(6, 42, 44, 0.78), rgba(58, 24, 72, 0.62) 52%, rgba(8, 34, 33, 0.72)),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 28px);
  backdrop-filter: blur(12px) saturate(1.08);
}

.character-picker-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(980px, calc(100vw - 28px));
  max-height: min(84dvh, 820px);
  padding: 18px;
  overflow: hidden auto;
  align-self: center;
  justify-self: center;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(235, 255, 252, 0.94) 46%, rgba(255, 248, 225, 0.96)),
    repeating-linear-gradient(45deg, rgba(151, 225, 217, 0.16) 0 1px, transparent 1px 18px),
    #ffffff;
  box-shadow:
    0 28px 80px rgba(8, 34, 33, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.66);
}

.character-picker-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, 0.72) 49% 51%, transparent 52% 100%),
    linear-gradient(0deg, transparent 0 48%, rgba(255, 255, 255, 0.72) 49% 51%, transparent 52% 100%);
  background-position: 8% 12%, 94% 18%, 16% 86%, 82% 78%;
  background-size: 18px 18px;
  opacity: 0.34;
  mix-blend-mode: soft-light;
  animation: characterPickerTwinkle 4.5s ease-in-out infinite alternate;
}

.character-picker-panel > *:not(.character-picker-sparkle) {
  position: relative;
  z-index: 1;
}

.character-picker-sparkle {
  position: absolute;
  z-index: 0;
  width: 42px;
  height: 42px;
  pointer-events: none;
  opacity: 0.66;
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.9) 43% 57%, transparent 58% 100%),
    linear-gradient(0deg, transparent 0 42%, rgba(255, 255, 255, 0.9) 43% 57%, transparent 58% 100%);
  filter: drop-shadow(0 0 12px rgba(102, 200, 189, 0.42));
  transform: rotate(45deg);
  animation: characterPickerSpark 3.8s ease-in-out infinite;
}

.character-picker-sparkle--a {
  right: 88px;
  top: 18px;
}

.character-picker-sparkle--b {
  left: 36px;
  bottom: 28px;
  width: 30px;
  height: 30px;
  animation-delay: 1.2s;
}

.character-picker-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.character-picker-heading strong {
  display: block;
  color: var(--invite-forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
}

.character-picker-heading small {
  display: block;
  margin-top: 4px;
  color: var(--invite-muted);
  font-size: 12px;
  font-weight: 850;
}

.character-picker-close {
  min-height: 40px;
  border: 1px solid rgba(20, 63, 59, 0.14);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--invite-forest);
  font-weight: 950;
  cursor: pointer;
}

.character-picker-tools {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(5, 107, 140, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 5% 50%, rgba(102, 200, 189, 0.28), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 249, 223, 0.9));
  box-shadow:
    0 18px 42px rgba(5, 107, 140, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82);
  overflow: hidden;
  transform-origin: 50% 0;
  animation: characterPickerSearchCast 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.character-picker-tools::before,
.character-picker-tools::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.character-picker-tools::before {
  z-index: -1;
  inset: -35% -18%;
  background:
    radial-gradient(circle at 12% 42%, rgba(255, 255, 255, 0.96) 0 4px, transparent 5px),
    radial-gradient(circle at 31% 28%, rgba(255, 227, 117, 0.82) 0 3px, transparent 4px),
    radial-gradient(circle at 58% 64%, rgba(102, 200, 189, 0.9) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 36%, rgba(255, 255, 255, 0.9) 0 3px, transparent 4px);
  opacity: 0;
  filter: blur(0.2px) drop-shadow(0 0 12px rgba(255, 246, 189, 0.72));
  animation: characterPickerSpellDust 1.18s ease-out 120ms both;
}

.character-picker-tools::after {
  z-index: 0;
  top: 8px;
  bottom: 8px;
  left: -38%;
  width: 34%;
  border-radius: 999px;
  background:
    linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.96) 35%, rgba(255, 238, 132, 0.86) 50%, rgba(151, 225, 217, 0.82) 66%, transparent);
  filter: blur(3px);
  transform: skewX(-16deg);
  animation: characterPickerSpellSweep 900ms cubic-bezier(0.16, 1, 0.3, 1) 130ms both;
}

.character-picker-search {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  color: var(--invite-forest);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.2;
  animation: characterPickerSearchTextIn 520ms ease-out 230ms both;
}

.theme-character-grid label.character-picker-search {
  grid-template-columns: none;
  min-height: 78px;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: text;
}

.theme-character-grid label.character-picker-search:hover,
.theme-character-grid label.character-picker-search:focus-within {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.theme-character-grid .character-picker-search input[data-character-picker-search],
.character-picker-search input[data-character-picker-search] {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  min-height: 54px;
  border: 2px solid rgba(5, 107, 140, 0.42);
  border-radius: 18px;
  padding: 0 18px 0 52px;
  background:
    radial-gradient(circle at 23px 50%, rgba(102, 200, 189, 0.28) 0 12px, transparent 13px),
    #ffffff;
  color: var(--invite-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  opacity: 1;
  cursor: text;
  pointer-events: auto;
  appearance: auto;
  -webkit-appearance: searchfield;
  box-shadow:
    0 16px 34px rgba(5, 107, 140, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.74);
}

.theme-character-grid .character-picker-search input[data-character-picker-search]:focus,
.character-picker-search input[data-character-picker-search]:focus {
  outline: 3px solid rgba(102, 200, 189, 0.34);
  border-color: rgba(5, 107, 140, 0.44);
}

.character-picker-search::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 18px;
  width: 13px;
  height: 13px;
  border: 2px solid #056b67;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    7px 8px 0 -5px #056b67,
    0 0 14px rgba(102, 200, 189, 0.6);
}

.character-picker-search input[data-character-picker-search]::placeholder {
  color: rgba(20, 63, 59, 0.52);
  font-weight: 800;
}

.character-picker-clear {
  position: relative;
  z-index: 1;
  min-height: 54px;
  border: 1px solid rgba(20, 63, 59, 0.2);
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--invite-forest);
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(8, 34, 33, 0.08);
  animation: characterPickerSearchTextIn 520ms ease-out 300ms both;
}

.character-picker-popular {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 0 2px;
}

.character-picker-popular strong {
  flex: 0 0 auto;
  color: var(--invite-muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.character-picker-popular button {
  min-height: 30px;
  border: 1px solid rgba(102, 200, 189, 0.34);
  border-radius: 999px;
  padding: 0 11px;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(235, 255, 252, 0.82));
  color: #0b4b43;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(5, 107, 140, 0.07);
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

.character-picker-popular button:hover,
.character-picker-popular button:focus-visible {
  border-color: rgba(217, 168, 78, 0.48);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(5, 107, 140, 0.12);
}

.character-picker-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.character-picker-tag {
  min-height: 34px;
  border: 1px solid rgba(20, 63, 59, 0.14);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--invite-forest);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.character-picker-tag:hover,
.character-picker-tag:focus-visible,
.character-picker-tag.is-selected {
  border-color: rgba(5, 107, 140, 0.42);
  background: linear-gradient(135deg, rgba(151, 225, 217, 0.86), rgba(255, 242, 184, 0.86));
  box-shadow: 0 10px 24px rgba(5, 107, 140, 0.12);
}

.character-picker-count {
  color: var(--invite-muted);
  font-size: 12px;
  font-weight: 900;
}

.character-picker-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 12px;
  max-height: min(50vh, 480px);
  overflow: auto;
  padding: 4px 6px 10px 2px;
  overscroll-behavior: contain;
  scroll-padding: 10px;
}

.character-picker-results .theme-character-card {
  grid-template-columns: 104px minmax(0, 1fr);
  min-height: 132px;
  border-color: rgba(5, 107, 140, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(239, 255, 252, 0.92)),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    0 14px 28px rgba(8, 34, 33, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

.character-picker-results .theme-character-card > span:last-child {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 100%;
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.62);
}

.character-picker-results .theme-character-card strong {
  color: #083f3a;
  font-size: 14px;
  line-height: 1.16;
}

.character-picker-results .theme-character-card small {
  color: #455e58;
  font-size: 11px;
  line-height: 1.25;
}

.character-picker-results .theme-character-card .theme-character-art {
  width: 104px;
  height: 104px;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.56),
    0 12px 22px rgba(5, 67, 82, 0.1);
}

.character-picker-results.is-filter-refreshing .theme-character-card:not([hidden]) {
  animation: characterPickerCardFade 420ms cubic-bezier(0.2, 1, 0.2, 1) both;
  animation-delay: calc(var(--result-index, 0) * 36ms);
}

.character-picker-results.is-filter-refreshing .theme-character-card:not([hidden]) .theme-character-art::after {
  animation: characterPickerCharacterFloat 520ms cubic-bezier(0.2, 1, 0.2, 1) both;
  animation-delay: calc(var(--result-index, 0) * 36ms);
}

.character-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.character-card-bestfor {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 7px;
  color: #2f5d55;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.25;
}

.character-card-bestfor b {
  color: #0b4b43;
  font-weight: 950;
}

.character-card-bestfor span {
  display: inline-flex;
  border: 1px solid rgba(5, 107, 140, 0.13);
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(255, 248, 225, 0.76);
  color: #7a5418;
  text-transform: capitalize;
}

.character-card-tags span {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(5, 107, 140, 0.08);
  color: #124f48;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.25;
  text-transform: capitalize;
}

.character-picker-empty {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(217, 168, 78, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 235, 0.9);
  color: var(--invite-forest);
  font-weight: 900;
}

@keyframes characterPickerTwinkle {
  from {
    opacity: 0.2;
    transform: translateY(0);
  }
  to {
    opacity: 0.42;
    transform: translateY(-4px);
  }
}

@keyframes characterPickerSpark {
  0%, 100% {
    opacity: 0.32;
    transform: rotate(45deg) scale(0.82);
  }
  48% {
    opacity: 0.88;
    transform: rotate(45deg) scale(1.08);
  }
}

@keyframes characterPickerSearchCast {
  0% {
    opacity: 0;
    transform: translateY(-18px) scaleX(0.38) scaleY(0.72);
    filter: blur(8px) brightness(1.25);
  }
  42% {
    opacity: 1;
    transform: translateY(2px) scaleX(1.03) scaleY(1.02);
    filter: blur(0) brightness(1.12);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes characterPickerSpellSweep {
  0% {
    left: -42%;
    opacity: 0;
  }
  22% {
    opacity: 0.98;
  }
  100% {
    left: 108%;
    opacity: 0;
  }
}

@keyframes characterPickerSpellDust {
  0% {
    opacity: 0;
    transform: translateX(-24px) translateY(10px) scale(0.82);
  }
  34% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateX(34px) translateY(-14px) scale(1.08);
  }
}

@keyframes characterPickerSearchTextIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes characterPickerCardFade {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes characterPickerCharacterFloat {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .character-picker-modal {
    align-items: center;
    justify-items: center;
    padding: 10px;
  }

  .character-picker-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    gap: 11px;
    padding: 14px;
    border-radius: 14px;
  }

  .character-picker-heading {
    align-items: start;
    gap: 10px;
  }

  .character-picker-heading strong {
    font-size: 25px;
  }

  .character-picker-heading small {
    font-size: 11px;
    line-height: 1.35;
  }

  .character-picker-close {
    min-width: 68px;
  }

  .character-picker-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .character-picker-clear {
    width: fit-content;
    min-height: 40px;
  }

  .character-picker-popular {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0 4px;
    scrollbar-width: thin;
  }

  .character-picker-popular button,
  .character-picker-popular strong {
    flex: 0 0 auto;
  }

  .character-picker-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0 4px;
    scrollbar-width: thin;
  }

  .character-picker-tag {
    flex: 0 0 auto;
  }

  .character-picker-results {
    grid-template-columns: minmax(0, 1fr);
    max-height: 45vh;
  }

  .character-picker-results .theme-character-card {
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 124px;
  }

  .character-picker-results .theme-character-card .theme-character-art {
    width: 96px;
    height: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-picker-tools,
  .character-picker-tools::before,
  .character-picker-tools::after,
  .character-picker-search,
  .character-picker-clear,
  .character-picker-results.is-filter-refreshing .theme-character-card:not([hidden]),
  .character-picker-results.is-filter-refreshing .theme-character-card:not([hidden]) .theme-character-art::after {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-picker-panel::before,
  .character-picker-sparkle,
  .character-picker-results.is-filter-refreshing .theme-character-card:not([hidden]),
  .character-picker-results.is-filter-refreshing .theme-character-card:not([hidden]) .theme-character-art::after {
    animation: none !important;
  }
}

.theme-character-art {
  position: relative;
  display: block;
  width: 74px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(5, 107, 140, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.8), transparent 34%),
    url("/assets/birthday-invites/mermaid-lagoon-cinematic-bg.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.theme-character-art::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: center bottom / var(--character-picker-fit, contain) no-repeat;
  filter: drop-shadow(0 8px 10px rgba(5, 67, 82, 0.24));
}

.theme-character-art--mermaid::after {
  background-image: url("/assets/birthday-invites/mermaid-lagoon-3d.png");
}

.theme-character-art--shark::after {
  inset: 9px 1px 2px 1px;
  background-image: url("/assets/birthday-invites/mermaid-lagoon-shark-3d.png");
}

.theme-character-art--axolotl::after {
  inset: 2px 4px 1px 4px;
  background-image: url("/assets/birthday-invites/lagoon-axolotl-3d.png");
  filter:
    drop-shadow(0 8px 10px rgba(126, 43, 91, 0.2))
    drop-shadow(0 0 12px rgba(255, 151, 193, 0.2));
}

.theme-character-art--blue-axolotl::after {
  inset: 2px 1px 1px 1px;
  background-image: url("/assets/birthday-invites/lagoon-blue-axolotl-3d.png");
  filter:
    drop-shadow(0 8px 10px rgba(24, 96, 126, 0.22))
    drop-shadow(0 0 12px rgba(77, 219, 255, 0.22));
}

.theme-character-art--lion,
.theme-character-art--gazelle {
  border-color: rgba(185, 121, 34, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 239, 178, 0.38), rgba(255, 255, 255, 0.08)),
    url("/assets/birthday-invites/zoo-safari-cinematic-bg.png") center / cover no-repeat;
}

.theme-character-art--lion::after {
  inset: 5px 2px 1px 2px;
  background-image: url("/assets/birthday-invites/zoo-safari-lion-3d.png");
  filter: drop-shadow(0 8px 10px rgba(111, 65, 13, 0.26));
}

.theme-character-art--gazelle::after {
  inset: 2px 7px 1px 7px;
  background-image: url("/assets/birthday-invites/zoo-safari-gazelle-3d.png");
  filter: drop-shadow(0 8px 10px rgba(111, 65, 13, 0.22));
}

.theme-character-art--alien-boy,
.theme-character-art--alien-girl,
.theme-character-art--astronaut-boy,
.theme-character-art--astronaut-girl {
  border-color: rgba(126, 232, 255, 0.32);
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.8), transparent 36%),
    var(--space-picker-bg) center / cover no-repeat;
}

.theme-character-art--alien-boy {
  --space-picker-bg: url("/assets/birthday-invites/space-alien-boy-cosmic-bg.webp");
}

.theme-character-art--alien-girl {
  --space-picker-bg: url("/assets/birthday-invites/space-alien-girl-cosmic-bg.webp");
}

.theme-character-art--astronaut-boy {
  --space-picker-bg: url("/assets/birthday-invites/space-astronaut-boy-lunar-bg.webp");
}

.theme-character-art--astronaut-girl {
  --space-picker-bg: url("/assets/birthday-invites/space-astronaut-girl-starlight-bg.webp");
}

.theme-character-art--alien-boy::after,
.theme-character-art--alien-girl::after,
.theme-character-art--astronaut-boy::after,
.theme-character-art--astronaut-girl::after {
  inset: 0 8px 1px;
  filter:
    drop-shadow(0 8px 10px rgba(8, 17, 45, 0.28))
    drop-shadow(0 0 12px rgba(126, 232, 255, 0.24));
}

.theme-character-art--alien-boy::after {
  background-image: url("/assets/birthday-invites/space-alien-boy-3d.png");
}

.theme-character-art--alien-girl::after {
  inset-inline: 10px;
  background-image: url("/assets/birthday-invites/space-alien-girl-3d.png");
}

.theme-character-art--astronaut-boy::after {
  background-image: url("/assets/birthday-invites/space-astronaut-boy-3d.png");
}

.theme-character-art--astronaut-girl::after {
  background-image: url("/assets/birthday-invites/space-astronaut-girl-3d.png");
}

.theme-character-art--paint-pixie,
.theme-character-art--brush-buddy {
  border-color: rgba(255, 79, 138, 0.24);
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.82), transparent 38%),
    url("/assets/birthday-invites/rainbow-art-studio-bg.webp") center / cover no-repeat;
}

.theme-character-art--paint-pixie::after {
  inset: 0 10px 1px;
  background-image: url("/assets/birthday-invites/rainbow-paint-pixie-3d.png");
  filter: drop-shadow(0 8px 10px rgba(132, 47, 86, 0.24));
}

.theme-character-art--brush-buddy::after {
  inset: 1px 6px 1px;
  background-image: url("/assets/birthday-invites/rainbow-brush-buddy-3d.png");
  filter: drop-shadow(0 8px 10px rgba(31, 117, 125, 0.24));
}

.theme-character-art--cape-champion,
.theme-character-art--star-guardian {
  border-color: rgba(232, 62, 66, 0.24);
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.82), transparent 38%),
    url("/assets/birthday-invites/superhero-sky-city-bg.webp") center / cover no-repeat;
}

.theme-character-art--cape-champion::after {
  inset: 0 6px 1px;
  background-image: url("/assets/birthday-invites/superhero-cape-champion-3d.png");
  filter: drop-shadow(0 8px 10px rgba(87, 40, 38, 0.26));
}

.theme-character-art--star-guardian::after {
  inset: 0 8px 1px;
  background-image: url("/assets/birthday-invites/superhero-star-guardian-3d.png");
  filter: drop-shadow(0 8px 10px rgba(58, 52, 123, 0.26));
}

.theme-character-art--pixel-pal,
.theme-character-art--game-champion {
  border-color: rgba(123, 255, 245, 0.28);
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.38), transparent 38%),
    url("/assets/birthday-invites/arcade-neon-playroom-bg.webp") center / cover no-repeat;
}

.theme-character-art--pixel-pal::after {
  inset: 4px 7px 1px;
  background-image: url("/assets/birthday-invites/arcade-pixel-pal-3d.png");
  filter:
    drop-shadow(0 8px 10px rgba(17, 24, 58, 0.28))
    drop-shadow(0 0 10px rgba(123, 255, 245, 0.28));
}

.theme-character-art--game-champion::after {
  inset: 0 11px 1px;
  background-image: url("/assets/birthday-invites/arcade-game-champion-3d.png");
  filter:
    drop-shadow(0 8px 10px rgba(17, 24, 58, 0.3))
    drop-shadow(0 0 10px rgba(255, 93, 207, 0.26));
}

.public-photo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.36fr);
  gap: 12px;
  align-items: stretch;
}

.public-photo-dropzone {
  position: relative;
  overflow: hidden;
  min-height: 160px;
  place-content: center;
  border: 1px dashed rgba(20, 63, 59, 0.28);
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(133, 191, 243, 0.14), rgba(255, 255, 255, 0.72));
  cursor: pointer;
}

.public-photo-dropzone::before {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 30%, rgba(255, 246, 178, 0.5) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 18%, rgba(255, 132, 201, 0.38) 0 2px, transparent 4px),
    radial-gradient(circle at 82% 68%, rgba(117, 238, 229, 0.48) 0 3px, transparent 5px),
    conic-gradient(from 130deg, transparent, rgba(255, 255, 255, 0.58), transparent 28%);
  opacity: 0;
  transform: scale(0.82) rotate(0deg);
}

.public-photo-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.public-photo-dropzone > strong,
.public-photo-dropzone > span {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.public-photo-dropzone > span {
  color: var(--invite-muted);
  font-weight: 650;
}

.public-photo-dropzone.is-dragging {
  border-color: var(--invite-sky);
  background: rgba(220, 237, 252, 0.82);
}

.public-photo-dropzone.is-preparing-photo {
  border-color: rgba(197, 108, 218, 0.56);
  background:
    linear-gradient(135deg, rgba(255, 244, 194, 0.72), rgba(225, 255, 251, 0.9) 46%, rgba(255, 231, 250, 0.78));
  box-shadow:
    0 18px 36px rgba(99, 55, 126, 0.15),
    0 0 0 4px rgba(255, 255, 255, 0.7) inset;
}

.public-photo-dropzone.is-preparing-photo::before {
  animation: photoMagicAura 2.8s linear infinite;
  opacity: 1;
}

.photo-magic-panel {
  position: absolute;
  inset: 10px;
  z-index: 3;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px 12px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 12px;
  padding: 12px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(218, 255, 251, 0.84) 48%, rgba(255, 235, 252, 0.88));
  box-shadow:
    0 18px 38px rgba(40, 39, 84, 0.18),
    0 0 24px rgba(151, 240, 231, 0.28);
  cursor: default;
}

.photo-magic-panel[hidden] {
  display: none;
}

.photo-magic-panel img {
  grid-row: 1 / span 2;
  width: 66px;
  height: 84px;
  object-fit: contain;
  filter:
    drop-shadow(0 9px 10px rgba(59, 28, 74, 0.2))
    drop-shadow(0 0 10px rgba(255, 196, 239, 0.48));
  animation: photoMagicHelper 2.7s ease-in-out infinite;
}

.photo-magic-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.photo-magic-copy strong,
.photo-magic-copy span {
  display: block;
  text-align: left;
}

.photo-magic-copy strong {
  color: #064e45;
  font-size: 15px;
  line-height: 1.1;
}

.photo-magic-copy span {
  color: #4d5f5b;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.photo-magic-meter {
  position: relative;
  min-width: 0;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(20, 63, 59, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

.photo-magic-meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #81eee5, #ffd86f 42%, #ff86c8 72%, #b994ff);
  box-shadow:
    0 0 12px rgba(255, 134, 200, 0.44),
    0 0 18px rgba(129, 238, 229, 0.34);
  transition: width 280ms ease;
}

.photo-magic-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.photo-magic-sparkles i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff6a9;
  box-shadow:
    0 0 8px rgba(255, 246, 169, 0.95),
    0 0 16px rgba(255, 134, 200, 0.45);
  animation: photoMagicSpark 2.4s ease-in-out infinite;
}

.photo-magic-sparkles i:nth-child(1) {
  left: 18%;
  top: 16%;
}

.photo-magic-sparkles i:nth-child(2) {
  right: 18%;
  top: 22%;
  animation-delay: 0.35s;
  background: #bdf8f0;
}

.photo-magic-sparkles i:nth-child(3) {
  left: 40%;
  bottom: 16%;
  animation-delay: 0.7s;
  background: #ffc4e8;
}

.photo-magic-sparkles i:nth-child(4) {
  right: 8%;
  bottom: 18%;
  animation-delay: 1.05s;
}

.photo-magic-sparkles i:nth-child(5) {
  left: 8%;
  bottom: 34%;
  animation-delay: 1.35s;
  background: #d9c5ff;
}

.photo-magic-panel.is-complete {
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.96), transparent 34%),
    linear-gradient(135deg, rgba(235, 255, 249, 0.94), rgba(255, 250, 220, 0.9));
}

@keyframes photoMagicAura {
  0% {
    transform: scale(0.82) rotate(0deg);
  }
  100% {
    transform: scale(1.02) rotate(360deg);
  }
}

@keyframes photoMagicHelper {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}

@keyframes photoMagicSpark {
  0%,
  100% {
    opacity: 0.2;
    transform: translateY(8px) scale(0.65);
  }
  45% {
    opacity: 1;
    transform: translateY(-8px) scale(1.08);
  }
}

@media (max-width: 640px) {
  .photo-magic-panel {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 10px;
  }

  .photo-magic-panel img {
    width: 56px;
    height: 74px;
  }

  .photo-magic-copy strong {
    font-size: 14px;
  }

  .photo-magic-copy span {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-photo-dropzone.is-preparing-photo::before,
  .photo-magic-panel img,
  .photo-magic-sparkles i {
    animation: none !important;
  }
}

.public-photo-preview {
  display: grid;
  gap: 8px;
  margin: 0;
}

.public-photo-preview img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(20, 63, 59, 0.14);
  border-radius: 8px;
  background: #fff;
}

.public-photo-preview figcaption {
  color: var(--invite-muted);
  font-size: 12px;
  line-height: 1.35;
}

.public-photo-preview figcaption.is-working {
  color: #8a6200;
  font-weight: 750;
}

.public-photo-preview figcaption.is-good {
  color: #047857;
  font-weight: 750;
}

.public-photo-preview figcaption.is-error {
  color: #b42318;
  font-weight: 750;
}

.retention-field {
  display: grid;
  gap: 9px;
  margin: 0;
  border: 0;
  padding: 0;
}

.retention-field legend {
  margin-bottom: 8px;
  color: var(--invite-ink);
  font-size: 13px;
  font-weight: 900;
}

.retention-field legend span {
  color: var(--invite-coral);
}

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

.retention-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(20, 63, 59, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.retention-choice:hover,
.retention-choice:has(input:focus-visible),
.retention-choice:has(input:checked) {
  border-color: rgba(102, 200, 189, 0.62);
  background: color-mix(in srgb, var(--invite-teal) 12%, #ffffff);
  transform: translateY(-1px);
}

.retention-choice input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--invite-forest);
  flex: 0 0 18px;
}

.retention-choice strong,
.retention-choice small {
  display: block;
}

.retention-choice strong {
  color: var(--invite-forest);
  font-weight: 950;
}

.retention-choice small {
  margin-top: 3px;
  color: var(--invite-muted);
  font-weight: 650;
  line-height: 1.35;
}

.upgrade-grid,
.consent-grid {
  display: grid;
  gap: 10px;
}

.upgrade-choice,
.consent-grid label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(20, 63, 59, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.upgrade-choice:hover,
.consent-grid label:hover {
  border-color: rgba(102, 200, 189, 0.45);
  background: rgba(255, 255, 255, 0.84);
}

.safari-premium-choice {
  grid-column: 1 / -1;
}

.upgrade-choice--featured {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--invite-teal) 48%, #ffffff);
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.96), transparent 34%),
    linear-gradient(135deg, rgba(231, 255, 250, 0.9), rgba(255, 246, 221, 0.84));
  box-shadow:
    0 16px 34px rgba(20, 63, 59, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.upgrade-choice--featured::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -40px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--invite-coral) 28%, #ffffff) 0 18%, transparent 19% 100%),
    conic-gradient(from 12deg, transparent, color-mix(in srgb, var(--invite-teal) 34%, transparent), transparent 64%);
  opacity: 0.82;
  pointer-events: none;
}

.upgrade-choice--featured:hover {
  border-color: color-mix(in srgb, var(--invite-teal) 72%, #ffffff);
  transform: translateY(-1px);
}

.upgrade-choice--featured em,
.upgrade-choice--featured b,
.chatter-sample-list span {
  position: relative;
  z-index: 1;
}

.upgrade-choice--featured em {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--invite-forest);
  color: #ffffff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.upgrade-choice--featured b {
  display: block;
  margin-top: 8px;
  color: var(--invite-forest);
  font-weight: 950;
}

.chatter-sample-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chatter-sample-list span {
  border: 1px solid rgba(20, 63, 59, 0.12);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--invite-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.upgrade-choice input,
.consent-grid input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--invite-forest);
  flex: 0 0 18px;
}

.upgrade-choice strong,
.upgrade-choice small {
  display: block;
}

.consent-grid label > span {
  display: block;
  color: var(--invite-muted);
  font-weight: 650;
  line-height: 1.42;
}

.consent-grid strong {
  display: block;
  color: var(--invite-forest);
  font-weight: 900;
}

.consent-grid em {
  color: var(--invite-coral);
  font-style: normal;
}

.upgrade-choice small {
  margin-top: 3px;
  color: var(--invite-muted);
  font-weight: 650;
  line-height: 1.35;
}

.website-check {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.builder-actions .primary-cta,
.builder-actions .secondary-cta {
  border: 0;
  cursor: pointer;
}

.mobile-builder-dock {
  display: none;
}

.form-status.is-error {
  color: #b2483b;
  font-weight: 800;
}

.form-status.is-good {
  color: var(--invite-forest);
  font-weight: 850;
}

.birthday-live-preview {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
}

.birthday-live-preview > section {
  padding: 16px;
}

.preview-card {
  --theme-accent: var(--invite-gold);
  --theme-soft: #fff1bd;
  display: grid;
  gap: 12px;
  border-color: color-mix(in srgb, var(--theme-accent) 48%, transparent);
  background: #fffdf7;
}

.preview-card-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.preview-card-heading > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(20, 63, 59, 0.14);
  border-radius: 8px;
  color: var(--invite-forest);
  background: rgba(255, 255, 255, 0.78);
}

.preview-card-heading svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.preview-card-heading strong,
.preview-card-heading small {
  display: block;
}

.preview-card-heading strong {
  color: var(--invite-forest);
  font-weight: 950;
}

.preview-card-heading small {
  color: var(--invite-muted);
  font-size: 12px;
}

.preview-full-link {
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 46%, rgba(20, 63, 59, 0.14));
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--invite-forest);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, var(--theme-soft) 42%, #ffffff));
  font-size: 11px;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
}

.preview-full-link:hover,
.preview-full-link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

.preview-poster {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 370px;
  min-height: 518px;
  overflow: hidden;
  justify-self: center;
  place-items: center;
  align-content: end;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 44%, rgba(20, 63, 59, 0.16));
  border-radius: 8px;
  padding: 132px 24px 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--theme-soft) 18%, #fffdf7));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.preview-sprinkles {
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background:
    radial-gradient(circle at 12% 16%, #66c8bd 0 3px, transparent 4px),
    radial-gradient(circle at 86% 16%, #ee8b78 0 3px, transparent 4px),
    radial-gradient(circle at 20% 74%, #d9a84e 0 3px, transparent 4px),
    radial-gradient(circle at 82% 76%, #8b74df 0 3px, transparent 4px),
    linear-gradient(28deg, transparent 0 18%, #ee8b78 18% 19%, transparent 19% 100%),
    linear-gradient(120deg, transparent 0 25%, #66c8bd 25% 26%, transparent 26% 100%);
  background-size: 112px 96px, 136px 110px, 128px 106px, 144px 118px, 124px 102px, 142px 116px;
}

.preview-candles {
  position: absolute;
  top: 34px;
  left: 50%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 25px);
  gap: 10px;
  transform: translateX(-50%);
}

.preview-candles span {
  position: relative;
  display: block;
  width: 25px;
  height: 128px;
  border-radius: 12px 12px 5px 5px;
  background:
    repeating-linear-gradient(65deg, transparent 0 11px, rgba(20, 63, 59, 0.82) 12px 15px, transparent 16px 23px),
    linear-gradient(180deg, #c9a6d8, #d9b3e6);
}

.preview-candles span:nth-child(2) {
  background:
    repeating-linear-gradient(65deg, transparent 0 11px, rgba(20, 63, 59, 0.82) 12px 15px, transparent 16px 23px),
    linear-gradient(180deg, #ffc981, #f4ae63);
}

.preview-candles span:nth-child(3) {
  background:
    repeating-linear-gradient(65deg, transparent 0 11px, rgba(20, 63, 59, 0.82) 12px 15px, transparent 16px 23px),
    linear-gradient(180deg, #fa8fa5, #ed6f8d);
}

.preview-candles span:nth-child(4) {
  background:
    repeating-linear-gradient(65deg, transparent 0 11px, rgba(20, 63, 59, 0.82) 12px 15px, transparent 16px 23px),
    linear-gradient(180deg, #bedb83, #9fcb6f);
}

.preview-candles span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -27px;
  width: 22px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 52% 52% 48% 48%;
  background: linear-gradient(180deg, #fff8a7 10%, #ffd45c 62%, #f29f3e);
  box-shadow: 0 0 22px rgba(244, 190, 75, 0.42);
}

.preview-photo-lockup {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 176px;
  margin-top: 4px;
}

.preview-photo {
  display: grid;
  width: 128px;
  height: 128px;
  place-items: center;
  overflow: hidden;
  border: 4px solid #ffffff;
  border-radius: 50%;
  outline: 3px dashed color-mix(in srgb, var(--theme-accent) 58%, #66c8bd);
  background: color-mix(in srgb, var(--theme-soft) 36%, white);
  background-position: center;
  background-size: cover;
  color: var(--invite-muted);
  font-weight: 900;
}

.preview-age-badge {
  position: absolute;
  right: 10px;
  bottom: 0;
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 5px solid #ffffff;
  border-radius: 50%;
  background: #fffdf7;
  color: color-mix(in srgb, var(--theme-accent) 74%, #d986c9);
  font-size: 38px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 3px #8ed8d3;
}

.preview-theme-label {
  position: relative;
  z-index: 2;
  color: var(--invite-forest);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.preview-poster h2 {
  position: relative;
  z-index: 2;
  max-width: 290px;
  margin: 0;
  color: color-mix(in srgb, var(--theme-accent) 72%, #e85e9a);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.preview-card.has-medium-name .preview-poster h2 {
  font-size: 29px;
  line-height: 1.02;
}

.preview-card.has-long-name .preview-poster h2 {
  max-width: 318px;
  font-size: 24px;
  line-height: 1.06;
}

.preview-poster p {
  position: relative;
  z-index: 2;
  max-width: 260px;
  margin: 0;
  color: var(--invite-muted);
  font-size: 14px;
  line-height: 1.42;
  text-align: center;
}

.preview-response-panel {
  display: grid;
  width: 100%;
  max-width: 370px;
  justify-self: center;
  gap: 9px;
}

.preview-rsvp-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.preview-rsvp-actions button {
  min-height: 40px;
  border: 1px solid rgba(20, 63, 59, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--invite-ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.preview-response-panel small {
  color: var(--invite-muted);
  line-height: 1.45;
}

.preview-rsvp-actions button:hover,
.preview-rsvp-actions button.is-selected {
  border-color: color-mix(in srgb, var(--theme-accent) 70%, rgba(20, 63, 59, 0.18));
  background: color-mix(in srgb, var(--theme-soft) 45%, white);
}

.preview-card:not([data-theme="candle-party"]) .preview-candles {
  display: block;
  width: 230px;
  height: 132px;
}

.preview-card:not([data-theme="candle-party"]) .preview-candles span {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  border-radius: 8px;
  background: transparent;
}

.preview-card:not([data-theme="candle-party"]) .preview-candles span::before {
  display: none;
}

.preview-card[data-theme="princess-garden"] .preview-poster {
  background:
    radial-gradient(circle at 20% 84%, #f7addd 0 20px, transparent 21px),
    radial-gradient(circle at 82% 82%, #f2a2d5 0 19px, transparent 20px),
    linear-gradient(180deg, #fff3fb 0 60%, #e7f4da 61%);
}

.preview-card[data-theme="princess-garden"] .preview-candles span:nth-child(1),
.preview-card[data-theme="princess-garden"] .preview-candles span:nth-child(4) {
  top: 76px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffe7f6 0 9px, transparent 10px),
    radial-gradient(circle at 50% 12%, #f3a0d5 0 9px, transparent 10px),
    radial-gradient(circle at 88% 50%, #f3a0d5 0 9px, transparent 10px),
    radial-gradient(circle at 50% 88%, #f3a0d5 0 9px, transparent 10px),
    radial-gradient(circle at 12% 50%, #f3a0d5 0 9px, transparent 10px);
}

.preview-card[data-theme="princess-garden"] .preview-candles span:nth-child(1) {
  left: 6px;
}

.preview-card[data-theme="princess-garden"] .preview-candles span:nth-child(4) {
  right: 6px;
}

.preview-card[data-theme="princess-garden"] .preview-candles span:nth-child(2) {
  left: 70px;
  top: 30px;
  width: 90px;
  height: 70px;
  border-radius: 0;
  background: linear-gradient(180deg, #ffe27f, #e3a942);
  clip-path: polygon(0 100%, 13% 32%, 32% 72%, 50% 12%, 68% 72%, 87% 32%, 100% 100%);
}

.preview-card[data-theme="princess-garden"] .preview-candles span:nth-child(3) {
  left: 44px;
  top: 102px;
  width: 144px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #77b862, #b8df83, #77b862);
}

.preview-card[data-theme="princess-garden"] .preview-poster h2 {
  color: #d986c9;
}

.preview-card[data-theme="dino-dig"] .preview-poster {
  background:
    radial-gradient(circle at 18% 82%, #c99b5d 0 32px, transparent 33px),
    radial-gradient(circle at 78% 78%, #b4874d 0 38px, transparent 39px),
    linear-gradient(180deg, #d9f1d0 0 54%, #e5c08f 55%);
}

.preview-card[data-theme="dino-dig"] .preview-candles span:nth-child(1) {
  left: 42px;
  top: 55px;
  width: 118px;
  height: 66px;
  border-radius: 54% 44% 40% 48%;
  background: #7bb664;
  box-shadow: 70px -14px 0 -30px #7bb664, -22px 42px 0 -22px #5f9a50, 48px 44px 0 -22px #5f9a50;
}

.preview-card[data-theme="dino-dig"] .preview-candles span:nth-child(2) {
  right: 34px;
  top: 38px;
  width: 56px;
  height: 46px;
  border-radius: 48% 54% 44% 42%;
  background:
    radial-gradient(circle at 66% 38%, #143f3b 0 4px, transparent 5px),
    #7bb664;
}

.preview-card[data-theme="dino-dig"] .preview-candles span:nth-child(3) {
  left: 18px;
  top: 74px;
  width: 62px;
  height: 26px;
  border-radius: 999px 0 0 999px;
  background: #6aa956;
  transform: rotate(-18deg);
}

.preview-card[data-theme="dino-dig"] .preview-candles span:nth-child(4) {
  right: 10px;
  top: 104px;
  width: 62px;
  height: 32px;
  background:
    radial-gradient(ellipse at 24% 50%, #fff6de 0 12px, transparent 13px),
    radial-gradient(ellipse at 74% 50%, #fff6de 0 12px, transparent 13px);
}

.preview-card[data-theme="dino-dig"] .preview-poster h2 {
  color: #5f9a50;
}

.preview-card[data-theme="sports-day"] .preview-poster {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.32) 0 2px, transparent 2px 44px),
    linear-gradient(180deg, #88ca78, #4f9d63);
}

.preview-card[data-theme="sports-day"] .preview-sprinkles {
  opacity: 0.22;
}

.preview-card[data-theme="sports-day"] .preview-candles span:nth-child(1) {
  left: 50%;
  top: 50px;
  width: 98px;
  height: 98px;
  transform: translateX(-50%);
  border: 4px solid #143f3b;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 45%, #143f3b 46% 54%, transparent 55%),
    linear-gradient(180deg, transparent 45%, #143f3b 46% 54%, transparent 55%),
    #ffffff;
}

.preview-card[data-theme="sports-day"] .preview-candles span:nth-child(2) {
  left: 24px;
  top: 24px;
  width: 54px;
  height: 108px;
  border: 4px solid rgba(255, 255, 255, 0.72);
  border-right: 0;
  background: transparent;
}

.preview-card[data-theme="sports-day"] .preview-candles span:nth-child(3) {
  right: 24px;
  top: 24px;
  width: 54px;
  height: 108px;
  border: 4px solid rgba(255, 255, 255, 0.72);
  border-left: 0;
  background: transparent;
}

.preview-card[data-theme="sports-day"] .preview-candles span:nth-child(4) {
  left: 50%;
  top: 20px;
  width: 2px;
  height: 120px;
  background: rgba(255, 255, 255, 0.72);
}

.preview-card[data-theme="sports-day"] .preview-poster h2,
.preview-card[data-theme="sports-day"] .preview-poster p,
.preview-card[data-theme="sports-day"] .preview-theme-label {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(20, 63, 59, 0.34);
}

.preview-card[data-theme="space-rocket"] .preview-poster {
  background:
    radial-gradient(circle at 18% 20%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 72% 14%, #ffffff 0 3px, transparent 4px),
    radial-gradient(circle at 82% 42%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 24% 78%, #ffffff 0 2px, transparent 3px),
    linear-gradient(180deg, #101734, #3c4c92 72%, #eaf0ff);
}

.preview-card[data-theme="space-rocket"] .preview-sprinkles {
  opacity: 0.2;
}

.preview-card[data-theme="space-rocket"] .preview-candles span:nth-child(1) {
  left: 92px;
  top: 28px;
  width: 52px;
  height: 118px;
  transform: rotate(28deg);
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, #ffffff 0 58%, #f26f5d 59%);
  box-shadow: -20px 58px 0 -12px #f6c653, 20px 58px 0 -12px #f6c653;
}

.preview-card[data-theme="space-rocket"] .preview-candles span:nth-child(2) {
  left: 34px;
  top: 26px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 60% 42%, rgba(16, 23, 52, 0.16) 0 8px, transparent 9px),
    #f6d77c;
}

.preview-card[data-theme="space-rocket"] .preview-candles span:nth-child(3),
.preview-card[data-theme="space-rocket"] .preview-candles span:nth-child(4) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

.preview-card[data-theme="space-rocket"] .preview-candles span:nth-child(3) {
  right: 26px;
  top: 34px;
}

.preview-card[data-theme="space-rocket"] .preview-candles span:nth-child(4) {
  right: 64px;
  top: 94px;
}

.preview-card[data-theme="space-rocket"] .preview-poster h2,
.preview-card[data-theme="space-rocket"] .preview-poster p,
.preview-card[data-theme="space-rocket"] .preview-theme-label {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(16, 23, 52, 0.42);
}

.preview-card[data-theme="mermaid-lagoon"] .preview-poster {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.34) 0 7px, transparent 7px 19px),
    linear-gradient(180deg, #b7f2eb, #4fbcc4);
}

.preview-card[data-theme="mermaid-lagoon"] .preview-candles span:nth-child(1) {
  left: 54px;
  top: 44px;
  width: 118px;
  height: 88px;
  border-radius: 50% 50% 8px 50%;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #d986c9, #7e5ec4);
}

.preview-card[data-theme="mermaid-lagoon"][data-theme-character="axolotl"] .preview-candles span:nth-child(1) {
  left: 52px;
  top: 16px;
  width: 132px;
  height: 166px;
  border-radius: 0;
  background: url("/assets/birthday-invites/lagoon-axolotl-3d.png") center bottom / contain no-repeat;
  box-shadow: none;
  filter:
    drop-shadow(0 12px 14px rgba(126, 43, 91, 0.22))
    drop-shadow(0 0 16px rgba(255, 151, 193, 0.28));
  transform: rotate(2deg);
}

.preview-card[data-theme="mermaid-lagoon"][data-theme-character="blue-axolotl"] .preview-candles span:nth-child(1) {
  left: 48px;
  top: 16px;
  width: 142px;
  height: 166px;
  border-radius: 0;
  background: url("/assets/birthday-invites/lagoon-blue-axolotl-3d.png") center bottom / contain no-repeat;
  box-shadow: none;
  filter:
    drop-shadow(0 12px 14px rgba(24, 96, 126, 0.24))
    drop-shadow(0 0 16px rgba(77, 219, 255, 0.3));
  transform: rotate(-1deg);
}

.preview-card[data-theme="mermaid-lagoon"] .preview-candles span:nth-child(2),
.preview-card[data-theme="mermaid-lagoon"] .preview-candles span:nth-child(3),
.preview-card[data-theme="mermaid-lagoon"] .preview-candles span:nth-child(4) {
  left: 24px;
  width: 184px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.preview-card[data-theme="mermaid-lagoon"][data-theme-character="axolotl"] .preview-candles span:nth-child(n + 2) {
  display: none;
}

.preview-card[data-theme="mermaid-lagoon"][data-theme-character="blue-axolotl"] .preview-candles span:nth-child(n + 2) {
  display: none;
}

.preview-card[data-theme="mermaid-lagoon"] .preview-candles span:nth-child(2) {
  top: 18px;
}

.preview-card[data-theme="mermaid-lagoon"] .preview-candles span:nth-child(3) {
  top: 108px;
}

.preview-card[data-theme="mermaid-lagoon"] .preview-candles span:nth-child(4) {
  top: 138px;
}

.preview-card[data-theme="mermaid-lagoon"] .preview-poster h2,
.preview-card[data-theme="mermaid-lagoon"] .preview-theme-label {
  color: #7e5ec4;
}

.preview-card[data-theme="rainbow-art"] .preview-poster {
  background:
    linear-gradient(135deg, rgba(255, 123, 123, 0.38) 0 14%, rgba(255, 211, 110, 0.4) 15% 29%, rgba(145, 214, 111, 0.42) 30% 44%, rgba(114, 215, 219, 0.42) 45% 59%, rgba(133, 191, 243, 0.4) 60% 74%, rgba(199, 150, 232, 0.42) 75%),
    #fffdf7;
}

.preview-card[data-theme="rainbow-art"] .preview-candles span:nth-child(1) {
  left: 28px;
  top: 42px;
  width: 176px;
  height: 92px;
  border: 10px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: transparent;
  border-style: dotted;
}

.preview-card[data-theme="rainbow-art"] .preview-candles span:nth-child(2),
.preview-card[data-theme="rainbow-art"] .preview-candles span:nth-child(3),
.preview-card[data-theme="rainbow-art"] .preview-candles span:nth-child(4) {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.preview-card[data-theme="rainbow-art"] .preview-candles span:nth-child(2) {
  left: 18px;
  top: 18px;
  background: #ff7b7b;
}

.preview-card[data-theme="rainbow-art"] .preview-candles span:nth-child(3) {
  left: 94px;
  top: 12px;
  background: #72d7db;
}

.preview-card[data-theme="rainbow-art"] .preview-candles span:nth-child(4) {
  right: 18px;
  top: 22px;
  background: #c796e8;
}

.preview-card[data-theme="rainbow-art"] .preview-poster h2 {
  color: #f08ab6;
}

.preview-card[data-theme="superhero"] .preview-poster {
  background:
    linear-gradient(135deg, #245cb8 0 42%, #f3cb4d 43% 56%, #d94747 57%);
}

.preview-card[data-theme="superhero"] .preview-sprinkles {
  opacity: 0.16;
}

.preview-card[data-theme="superhero"] .preview-candles span:nth-child(1) {
  left: 50%;
  top: 40px;
  width: 156px;
  height: 104px;
  transform: translateX(-50%);
  background: #fff7cf;
  clip-path: polygon(50% 0, 61% 25%, 88% 12%, 76% 38%, 100% 50%, 76% 62%, 88% 88%, 61% 75%, 50% 100%, 39% 75%, 12% 88%, 24% 62%, 0 50%, 24% 38%, 12% 12%, 39% 25%);
}

.preview-card[data-theme="superhero"] .preview-candles span:nth-child(2) {
  left: 20px;
  bottom: 0;
  width: 28px;
  height: 76px;
  background: #143f3b;
  box-shadow: 34px -20px 0 #143f3b, 68px 8px 0 #143f3b, 150px -12px 0 #143f3b;
}

.preview-card[data-theme="superhero"] .preview-candles span:nth-child(3),
.preview-card[data-theme="superhero"] .preview-candles span:nth-child(4) {
  display: none;
}

.preview-card[data-theme="superhero"] .preview-poster h2,
.preview-card[data-theme="superhero"] .preview-poster p,
.preview-card[data-theme="superhero"] .preview-theme-label {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(20, 63, 59, 0.38);
}

.preview-card[data-theme="zoo-safari"] .preview-poster {
  background:
    radial-gradient(circle at 16% 16%, #7aa95c 0 34px, transparent 35px),
    radial-gradient(circle at 84% 18%, #92b36a 0 38px, transparent 39px),
    linear-gradient(180deg, #d9edbe 0 54%, #d8ba79 55%);
}

.preview-card[data-theme="zoo-safari"] .preview-candles span:nth-child(1) {
  left: 50%;
  top: 42px;
  width: 116px;
  height: 90px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, #143f3b 0 5px, transparent 6px),
    radial-gradient(circle at 66% 38%, #143f3b 0 5px, transparent 6px),
    linear-gradient(90deg, #d9a84e 0 28%, #8d6b38 29% 35%, #d9a84e 36% 64%, #8d6b38 65% 71%, #d9a84e 72%);
  box-shadow: -34px -24px 0 -16px #d9a84e, 34px -24px 0 -16px #d9a84e;
}

.preview-card[data-theme="zoo-safari"] .preview-candles span:nth-child(2),
.preview-card[data-theme="zoo-safari"] .preview-candles span:nth-child(3),
.preview-card[data-theme="zoo-safari"] .preview-candles span:nth-child(4) {
  bottom: 0;
  width: 10px;
  height: 64px;
  border-radius: 999px 999px 0 0;
  background: #7aa95c;
}

.preview-card[data-theme="zoo-safari"] .preview-candles span:nth-child(2) {
  left: 18px;
  transform: rotate(-14deg);
}

.preview-card[data-theme="zoo-safari"] .preview-candles span:nth-child(3) {
  right: 22px;
  transform: rotate(12deg);
}

.preview-card[data-theme="zoo-safari"] .preview-candles span:nth-child(4) {
  left: 44px;
  height: 48px;
}

.preview-card[data-theme="zoo-safari"] .preview-poster h2 {
  color: #9a6d32;
}

.preview-card[data-theme="arcade-game"] .preview-poster {
  background:
    linear-gradient(90deg, rgba(139, 116, 223, 0.78) 0 14px, rgba(19, 27, 63, 0.96) 14px 28px),
    linear-gradient(180deg, #1b244f, #101734);
  background-size: 28px 100%, auto;
}

.preview-card[data-theme="arcade-game"] .preview-sprinkles {
  opacity: 0.18;
}

.preview-card[data-theme="arcade-game"] .preview-candles span:nth-child(1) {
  left: 50%;
  top: 42px;
  width: 148px;
  height: 86px;
  transform: translateX(-50%);
  border: 4px solid #66c8bd;
  border-radius: 12px;
  background:
    radial-gradient(circle at 74% 54%, #ff6d9f 0 7px, transparent 8px),
    radial-gradient(circle at 88% 54%, #f6c653 0 7px, transparent 8px),
    linear-gradient(90deg, #66c8bd 0 36%, transparent 37%),
    #fffdf7;
}

.preview-card[data-theme="arcade-game"] .preview-candles span:nth-child(2) {
  left: 28px;
  top: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff6d9f;
  box-shadow: 148px 6px 0 -8px #f6c653;
}

.preview-card[data-theme="arcade-game"] .preview-candles span:nth-child(3),
.preview-card[data-theme="arcade-game"] .preview-candles span:nth-child(4) {
  display: none;
}

.preview-card[data-theme="arcade-game"] .preview-poster h2,
.preview-card[data-theme="arcade-game"] .preview-poster p,
.preview-card[data-theme="arcade-game"] .preview-theme-label {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(16, 23, 52, 0.72);
}

.preview-flow-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid rgba(20, 63, 59, 0.12);
  border-radius: 8px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.72);
}

.preview-flow-controls button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--invite-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.preview-flow-controls button:hover,
.preview-flow-controls button.is-selected {
  background: color-mix(in srgb, var(--theme-soft) 62%, #ffffff);
  color: var(--invite-forest);
  transform: translateY(-1px);
}

.invite-flow-preview {
  --flow-title: color-mix(in srgb, var(--theme-accent) 78%, #e85e9a);
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.8);
  --flow-card: rgba(22, 22, 20, 0.72);
  position: relative;
  min-height: 700px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 50%, rgba(20, 63, 59, 0.14));
  border-radius: 8px;
  background: #1d1c1b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  isolation: isolate;
}

.flow-screen {
  position: absolute;
  inset: 0;
  display: grid;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(0.985);
  transition: opacity 320ms ease, transform 320ms ease;
}

.invite-flow-preview[data-mode="intro"] .flow-screen--intro,
.invite-flow-preview[data-mode="invite"] .flow-screen--invite,
.invite-flow-preview[data-mode="success"] .flow-screen--success {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.invite-flow-preview[data-mode="invite"] {
  height: auto;
}

.invite-flow-preview[data-mode="invite"] .flow-screen--invite {
  position: relative;
  inset: auto;
  min-height: inherit;
  overflow: visible;
}

.flow-screen--intro {
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 18%, rgba(102, 200, 189, 0.3), transparent 28%),
    radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--theme-accent) 28%, transparent), transparent 28%),
    linear-gradient(135deg, #fffdf7, color-mix(in srgb, var(--theme-soft) 44%, #ffffff));
}

.flow-screen--intro::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px);
  background-size: 34px 34px;
  mix-blend-mode: soft-light;
}

.flow-intro-backdrop {
  position: absolute;
  inset: -18px;
  opacity: 0.24;
  background:
    radial-gradient(circle at 24% 26%, var(--theme-soft), transparent 32%),
    radial-gradient(circle at 74% 62%, var(--theme-accent), transparent 38%);
  background-position: center;
  background-size: cover;
  filter: blur(16px) saturate(1.12);
  transform: scale(1.05);
}

.flow-intro-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
}

.flow-intro-frame {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(330px, 92%);
  overflow: hidden;
  border: 7px solid #ffffff;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(20, 63, 59, 0.24);
  animation: flow-intro-slap 900ms cubic-bezier(0.2, 1, 0.22, 1) both;
}

.flow-intro-photo {
  display: grid;
  min-height: 410px;
  place-items: center;
  background:
    radial-gradient(circle at 24% 18%, rgba(102, 200, 189, 0.2), transparent 22%),
    url("/assets/live-rooted/mockup/assets/live-rooted-icon.png") center / min(150px, 42%) auto no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--theme-soft) 70%, #ffffff), #ffffff);
  background-position: center;
  background-size: auto, min(150px, 42%) auto, cover;
  color: var(--invite-muted);
  font-weight: 950;
}

.flow-intro-photo span {
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  border: 2px dashed color-mix(in srgb, var(--theme-accent) 58%, var(--invite-teal));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  opacity: 0.82;
}

.flow-intro-copy {
  display: grid;
  gap: 2px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), #ffffff),
    #ffffff;
  text-align: center;
}

.flow-intro-copy p,
.flow-intro-copy h3 {
  margin: 0;
}

.flow-intro-copy p {
  color: color-mix(in srgb, var(--theme-accent) 78%, #d986c9);
  font-weight: 950;
}

.flow-intro-copy h3 {
  color: var(--invite-forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.02;
}

.flow-intro-copy h3,
.flow-invite-copy h3,
.preview-poster h2,
.preview-copy h2 {
  overflow-wrap: anywhere;
  text-wrap: balance;
  hyphens: auto;
}

.invite-flow-preview.has-medium-name .flow-intro-copy h3 {
  font-size: 23px;
  line-height: 1.05;
}

.invite-flow-preview.has-long-name .flow-intro-copy {
  padding: 16px;
}

.invite-flow-preview.has-long-name .flow-intro-copy h3 {
  font-size: 20px;
  line-height: 1.08;
}

.flow-skip-button {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  min-height: 38px;
  border: 1px solid rgba(20, 63, 59, 0.14);
  border-radius: 8px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--invite-forest);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.flow-skip-button:hover {
  background: #ffffff;
  transform: translateY(-2px);
}

.flow-screen--invite {
  color: var(--flow-text);
  background:
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--theme-accent) 36%, transparent), transparent 24%),
    linear-gradient(140deg, #262521 0%, #121312 100%);
}

.flow-theme-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.flow-theme-scene::before,
.flow-theme-scene::after,
.flow-prop {
  content: "";
  position: absolute;
  display: block;
}

.flow-theme-scene::before {
  inset: 0;
  opacity: 0.24;
  background:
    radial-gradient(circle at 13% 16%, #66c8bd 0 4px, transparent 5px),
    radial-gradient(circle at 88% 18%, #ee8b78 0 4px, transparent 5px),
    radial-gradient(circle at 22% 82%, #d9a84e 0 4px, transparent 5px),
    linear-gradient(32deg, transparent 0 20%, #ee8b78 20% 21%, transparent 21% 100%),
    linear-gradient(118deg, transparent 0 25%, #66c8bd 25% 26%, transparent 26% 100%);
  background-size: 130px 108px, 148px 116px, 138px 122px, 144px 116px, 156px 124px;
}

.flow-invite-layout {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 14px;
  padding: 26px;
}

.flow-invite-copy {
  display: grid;
  gap: 8px;
  max-width: 460px;
}

.flow-theme-label {
  justify-self: start;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--flow-muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flow-invite-kicker,
.flow-invite-copy h3,
.flow-invite-copy p {
  margin: 0;
}

.flow-invite-kicker {
  color: var(--flow-muted);
  font-size: 16px;
  font-weight: 850;
}

.flow-invite-copy h3 {
  max-width: 420px;
  color: var(--flow-title);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 8vw, 58px);
  font-weight: 700;
  line-height: 0.94;
}

.invite-flow-preview.has-medium-name .flow-invite-copy h3 {
  font-size: clamp(32px, 7vw, 50px);
  line-height: 0.98;
}

.invite-flow-preview.has-long-name .flow-invite-copy h3 {
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.02;
}

.flow-invite-copy p {
  color: var(--flow-muted);
  font-size: 15px;
  line-height: 1.45;
}

.flow-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}

.flow-details-grid div {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.flow-details-grid div:nth-child(3),
.flow-details-grid div:nth-child(5) {
  grid-column: 1 / -1;
}

.flow-details-grid dt,
.flow-details-grid dd {
  margin: 0;
}

.flow-details-grid dt {
  color: var(--flow-title);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flow-details-grid dd {
  margin-top: 3px;
  color: var(--flow-text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.flow-rsvp-card {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 14px;
  background: var(--flow-card);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
}

.flow-rsvp-card strong {
  color: var(--flow-text);
  font-size: 18px;
  font-weight: 950;
}

.flow-rsvp-card small {
  color: var(--flow-muted);
}

.preview-rsvp-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.preview-rsvp-actions button {
  position: relative;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.13);
  color: var(--flow-text);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  transition: transform 170ms ease, box-shadow 170ms ease, background 170ms ease, border-color 170ms ease;
}

.preview-rsvp-actions button::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% -65%;
  width: 46%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  transform: skewX(-18deg);
  transition: left 320ms ease;
}

.preview-rsvp-actions button:hover,
.preview-rsvp-actions button.is-selected {
  border-color: color-mix(in srgb, var(--theme-accent) 76%, #ffffff);
  background: color-mix(in srgb, var(--theme-accent) 72%, rgba(255, 255, 255, 0.2));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent) 22%, transparent);
  transform: translateY(-2px);
}

.preview-rsvp-actions button:hover::after,
.preview-rsvp-actions button.is-selected::after {
  left: 112%;
}

.preview-message-line {
  color: var(--invite-muted);
  line-height: 1.45;
}

.flow-screen--success {
  place-items: center;
  padding: 26px;
  color: #ffffff;
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--theme-accent) 42%, transparent), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(102, 200, 189, 0.26), transparent 25%),
    linear-gradient(135deg, #171616, #2b241d);
}

.flow-success-fireworks,
.flow-success-card {
  position: relative;
  z-index: 1;
}

.flow-success-card {
  display: grid;
  width: min(350px, 92%);
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 22px;
  background: rgba(26, 26, 24, 0.86);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
  text-align: center;
  backdrop-filter: blur(12px);
  animation: flow-success-pop 520ms cubic-bezier(0.2, 1, 0.24, 1) both;
}

.flow-success-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  min-width: 54px;
  height: 28px;
  padding: 0 12px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.flow-success-popper {
  position: relative;
  justify-self: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 18%, transparent 19%),
    conic-gradient(from 20deg, #f6c653, #ee8b78, #d986c9, #66c8bd, #f6c653);
  animation: flow-popper-bounce 900ms ease-in-out infinite alternate;
}

.flow-success-popper span {
  position: absolute;
  left: 50%;
  bottom: 54px;
  width: 8px;
  height: 38px;
  border-radius: 999px;
  background: #66c8bd;
  transform-origin: bottom center;
}

.flow-success-popper span:nth-child(1) {
  transform: translateX(-50%) rotate(-34deg);
}

.flow-success-popper span:nth-child(2) {
  background: #f6c653;
  transform: translateX(-50%) rotate(0deg);
}

.flow-success-popper span:nth-child(3) {
  background: #ee8b78;
  transform: translateX(-50%) rotate(34deg);
}

.flow-success-card p,
.flow-success-card h3,
.flow-success-card small {
  margin: 0;
}

.flow-success-card > p:first-of-type {
  color: var(--theme-accent);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flow-success-card h3 {
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  line-height: 0.98;
}

.flow-success-card > p:nth-of-type(2),
.flow-success-card small {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.42;
}

.flow-firework,
.flow-confetti-strip,
.flow-confetti-dot {
  position: absolute;
  z-index: 0;
  display: block;
  border-radius: 999px;
}

.flow-firework {
  width: 10px;
  height: 10px;
  animation: flow-firework-burst 1300ms ease-out infinite;
}

.flow-firework-one {
  left: 16%;
  top: 18%;
  color: #f6c653;
}

.flow-firework-two {
  right: 18%;
  top: 23%;
  color: #d986c9;
  animation-delay: 260ms;
}

.flow-firework-three {
  left: 52%;
  bottom: 15%;
  color: #66c8bd;
  animation-delay: 520ms;
}

.flow-confetti-strip {
  width: 7px;
  height: 34px;
  background: #ee8b78;
  animation: flow-confetti-fall 1700ms ease-in-out infinite;
}

.flow-strip-one {
  left: 24%;
  top: 10%;
  transform: rotate(18deg);
}

.flow-strip-two {
  right: 24%;
  top: 12%;
  background: #66c8bd;
  animation-delay: 340ms;
  transform: rotate(-20deg);
}

.flow-strip-three {
  left: 72%;
  bottom: 12%;
  background: #f6c653;
  animation-delay: 680ms;
  transform: rotate(12deg);
}

.flow-confetti-dot {
  width: 13px;
  height: 13px;
  background: #d986c9;
  animation: flow-confetti-pop 1400ms ease-in-out infinite alternate;
}

.flow-dot-one {
  left: 12%;
  bottom: 28%;
}

.flow-dot-two {
  right: 13%;
  bottom: 30%;
  background: #f6c653;
  animation-delay: 220ms;
}

.flow-dot-three {
  left: 48%;
  top: 14%;
  background: #66c8bd;
  animation-delay: 520ms;
}

.invite-flow-preview[data-theme="candle-party"] .flow-theme-scene {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 250, 0.64) 48%, rgba(255, 248, 250, 0.14) 100%) left center / 100% 100% no-repeat,
    url("/assets/birthday-invites/candle-party-pastel-wallpaper.png") center / cover no-repeat;
}

.invite-flow-preview[data-theme="candle-party"] .flow-theme-scene::after {
  inset: auto -24px -58px auto;
  width: 260px;
  height: 180px;
  border-radius: 50%;
  border: 14px solid rgba(142, 216, 211, 0.72);
  border-top-color: transparent;
  transform: rotate(-8deg);
}

.invite-flow-preview[data-theme="princess-garden"] {
  --flow-title: #c742a7;
  --flow-text: #4c243f;
  --flow-muted: rgba(76, 36, 63, 0.75);
  --flow-card: rgba(255, 255, 255, 0.78);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-screen--invite {
  background:
    radial-gradient(circle at 16% 18%, #ffd5ef, transparent 24%),
    linear-gradient(180deg, #fff6fb 0 62%, #dff1d0 63%);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-a {
  left: 13%;
  top: 11%;
  width: 116px;
  height: 86px;
  background: linear-gradient(180deg, #ffe27f, #d9a84e);
  clip-path: polygon(0 100%, 14% 36%, 34% 72%, 50% 10%, 66% 72%, 86% 36%, 100% 100%);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-b,
.invite-flow-preview[data-theme="princess-garden"] .flow-prop-c {
  bottom: 6%;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff9fd 0 15px, transparent 16px),
    radial-gradient(circle at 50% 12%, #f2a2d5 0 15px, transparent 16px),
    radial-gradient(circle at 88% 50%, #f2a2d5 0 15px, transparent 16px),
    radial-gradient(circle at 50% 88%, #f2a2d5 0 15px, transparent 16px),
    radial-gradient(circle at 12% 50%, #f2a2d5 0 15px, transparent 16px);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-b {
  left: 8%;
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-c {
  right: 8%;
}

.invite-flow-preview[data-theme="dino-dig"] {
  --flow-title: #e7ffe0;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.82);
  --flow-card: rgba(34, 76, 42, 0.78);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-screen--invite {
  background:
    linear-gradient(180deg, rgba(52, 117, 54, 0.94) 0 54%, #b98550 55%);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-a {
  right: 8%;
  top: 9%;
  width: 210px;
  height: 120px;
  border-radius: 54% 44% 40% 48%;
  background:
    radial-gradient(circle at 78% 34%, #143f3b 0 6px, transparent 7px),
    #8ac66f;
  box-shadow: -34px 72px 0 -22px #70aa59, 62px 72px 0 -22px #70aa59;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-b,
.invite-flow-preview[data-theme="dino-dig"] .flow-prop-c {
  bottom: 8%;
  width: 78px;
  height: 44px;
  border-radius: 50%;
  background: #fff5d8;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-b {
  left: 10%;
  transform: rotate(-10deg);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-c {
  right: 18%;
  transform: rotate(12deg);
}

.invite-flow-preview[data-theme="sports-day"] {
  --flow-title: #fff0a8;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.82);
  --flow-card: rgba(20, 63, 59, 0.72);
}

.invite-flow-preview[data-theme="sports-day"] .flow-screen--invite {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24) 0 2px, transparent 2px 54px),
    linear-gradient(180deg, #73bd6c, #2f854f);
}

.invite-flow-preview[data-theme="sports-day"] .flow-prop-a {
  right: 12%;
  top: 12%;
  width: 128px;
  height: 128px;
  border: 5px solid #143f3b;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 45%, #143f3b 46% 54%, transparent 55%),
    linear-gradient(180deg, transparent 45%, #143f3b 46% 54%, transparent 55%),
    #ffffff;
}

.invite-flow-preview[data-theme="sports-day"] .flow-prop-b,
.invite-flow-preview[data-theme="sports-day"] .flow-prop-c {
  top: 8%;
  width: 82px;
  height: 190px;
  border: 5px solid rgba(255, 255, 255, 0.6);
}

.invite-flow-preview[data-theme="sports-day"] .flow-prop-b {
  left: 7%;
  border-right: 0;
}

.invite-flow-preview[data-theme="sports-day"] .flow-prop-c {
  right: 7%;
  border-left: 0;
}

.invite-flow-preview[data-theme="space-rocket"] {
  --flow-title: #ffd66e;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.82);
  --flow-card: rgba(17, 23, 52, 0.76);
}

.invite-flow-preview[data-theme="space-rocket"] .flow-screen--invite {
  background:
    radial-gradient(circle at 18% 16%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 76% 12%, #ffffff 0 3px, transparent 4px),
    radial-gradient(circle at 86% 44%, #ffffff 0 2px, transparent 3px),
    linear-gradient(180deg, #101734, #3c4c92 70%, #111734);
}

.invite-flow-preview[data-theme="space-rocket"] .flow-prop-a {
  right: 16%;
  top: 9%;
  width: 82px;
  height: 178px;
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(circle at 50% 30%, #72d7db 0 14px, transparent 15px),
    linear-gradient(180deg, #ffffff 0 58%, #f26f5d 59%);
  box-shadow: -28px 96px 0 -12px #f6c653, 28px 96px 0 -12px #f6c653;
  transform: rotate(28deg);
}

.invite-flow-preview[data-theme="space-rocket"] .flow-prop-b {
  left: 12%;
  top: 12%;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 42%, rgba(16, 23, 52, 0.18) 0 14px, transparent 15px),
    #f6d77c;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] {
  --flow-title: #743fbc;
  --flow-text: #153f43;
  --flow-muted: rgba(21, 63, 67, 0.74);
  --flow-card: rgba(255, 255, 255, 0.72);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-screen--invite {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.36) 0 8px, transparent 8px 23px),
    linear-gradient(180deg, #b7f2eb, #4fbcc4);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-a {
  right: 10%;
  top: 12%;
  width: 160px;
  height: 126px;
  border-radius: 50% 50% 8px 50%;
  background:
    radial-gradient(circle at 26% 28%, rgba(255, 255, 255, 0.24) 0 12px, transparent 13px),
    linear-gradient(135deg, #d986c9, #7e5ec4);
  transform: rotate(45deg);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-b,
.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-c {
  left: 6%;
  width: 88%;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-b {
  top: 18%;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-c {
  bottom: 16%;
}

.invite-flow-preview[data-theme="rainbow-art"] {
  --flow-title: #ec4b94;
  --flow-text: #143f3b;
  --flow-muted: rgba(20, 63, 59, 0.72);
  --flow-card: rgba(255, 255, 255, 0.74);
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-screen--invite {
  background:
    linear-gradient(135deg, rgba(255, 123, 123, 0.44) 0 14%, rgba(255, 211, 110, 0.44) 15% 29%, rgba(145, 214, 111, 0.44) 30% 44%, rgba(114, 215, 219, 0.44) 45% 59%, rgba(133, 191, 243, 0.44) 60% 74%, rgba(199, 150, 232, 0.44) 75%),
    #ffffff;
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-a {
  right: 8%;
  top: 10%;
  width: 210px;
  height: 132px;
  border: 10px dotted rgba(255, 255, 255, 0.86);
  border-radius: 8px;
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-b,
.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-c,
.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-d {
  top: 13%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-b {
  left: 10%;
  background: #ff7b7b;
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-c {
  left: 24%;
  background: #72d7db;
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-d {
  left: 38%;
  background: #c796e8;
}

.invite-flow-preview[data-theme="superhero"] {
  --flow-title: #fff4a6;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.82);
  --flow-card: rgba(13, 28, 76, 0.78);
}

.invite-flow-preview[data-theme="superhero"] .flow-screen--invite {
  background:
    linear-gradient(135deg, #245cb8 0 42%, #f3cb4d 43% 56%, #d94747 57%);
}

.invite-flow-preview[data-theme="superhero"] .flow-prop-a {
  right: 11%;
  top: 10%;
  width: 220px;
  height: 150px;
  background: #fff7cf;
  clip-path: polygon(50% 0, 61% 25%, 88% 12%, 76% 38%, 100% 50%, 76% 62%, 88% 88%, 61% 75%, 50% 100%, 39% 75%, 12% 88%, 24% 62%, 0 50%, 24% 38%, 12% 12%, 39% 25%);
}

.invite-flow-preview[data-theme="superhero"] .flow-prop-b {
  left: 0;
  right: 0;
  bottom: 0;
  height: 116px;
  background:
    linear-gradient(90deg, #102f5f 0 42px, transparent 42px 56px, #102f5f 56px 110px, transparent 110px 124px, #102f5f 124px 170px, transparent 170px 190px, #102f5f 190px);
}

.invite-flow-preview[data-theme="zoo-safari"] {
  --flow-title: #fff0c2;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.82);
  --flow-card: rgba(74, 62, 33, 0.76);
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-screen--invite {
  background:
    radial-gradient(circle at 14% 16%, #7aa95c 0 50px, transparent 52px),
    radial-gradient(circle at 86% 16%, #92b36a 0 62px, transparent 64px),
    linear-gradient(180deg, #b8d98a 0 52%, #d8ba79 53%);
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-a {
  right: 12%;
  top: 11%;
  width: 146px;
  height: 114px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, #143f3b 0 6px, transparent 7px),
    radial-gradient(circle at 66% 38%, #143f3b 0 6px, transparent 7px),
    linear-gradient(90deg, #d9a84e 0 28%, #8d6b38 29% 35%, #d9a84e 36% 64%, #8d6b38 65% 71%, #d9a84e 72%);
  box-shadow: -48px -28px 0 -22px #d9a84e, 48px -28px 0 -22px #d9a84e;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-b,
.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-c,
.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-d {
  bottom: 0;
  width: 16px;
  border-radius: 999px 999px 0 0;
  background: #6d9b55;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-b {
  left: 10%;
  height: 126px;
  transform: rotate(-12deg);
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-c {
  left: 18%;
  height: 92px;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-d {
  right: 13%;
  height: 112px;
  transform: rotate(10deg);
}

.invite-flow-preview[data-theme="arcade-game"] {
  --flow-title: #ff8de1;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.8);
  --flow-card: rgba(17, 22, 56, 0.8);
}

.invite-flow-preview[data-theme="arcade-game"] .flow-screen--invite {
  background:
    linear-gradient(90deg, rgba(139, 116, 223, 0.76) 0 16px, rgba(19, 27, 63, 0.96) 16px 32px),
    linear-gradient(180deg, #1b244f, #101734);
  background-size: 32px 100%, auto;
}

.invite-flow-preview[data-theme="arcade-game"] .flow-prop-a {
  right: 10%;
  top: 10%;
  width: 202px;
  height: 122px;
  border: 5px solid #66c8bd;
  border-radius: 8px;
  background:
    radial-gradient(circle at 76% 54%, #ff6d9f 0 9px, transparent 10px),
    radial-gradient(circle at 89% 54%, #f6c653 0 9px, transparent 10px),
    linear-gradient(90deg, #66c8bd 0 36%, transparent 37%),
    #fffdf7;
}

.invite-flow-preview[data-theme="arcade-game"] .flow-prop-b,
.invite-flow-preview[data-theme="arcade-game"] .flow-prop-c {
  top: 8%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
}

.invite-flow-preview[data-theme="arcade-game"] .flow-prop-b {
  left: 8%;
  background: #ff6d9f;
}

.invite-flow-preview[data-theme="arcade-game"] .flow-prop-c {
  left: 22%;
  background: #f6c653;
}

/* Birthday theme redesign package overrides. Candle Party stays as the benchmark theme. */
:where(.public-theme-grid .theme-art:not(.theme-art--candle-party))::before,
:where(.public-theme-grid .theme-art:not(.theme-art--candle-party))::after {
  inset: auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  opacity: 1;
  transform: none;
  clip-path: none;
}

.theme-art--princess-garden {
  background:
    radial-gradient(circle at 13% 18%, rgba(255, 205, 232, 0.86) 0 10px, transparent 11px),
    radial-gradient(circle at 18% 14%, rgba(255, 247, 173, 0.82) 0 7px, transparent 8px),
    radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.64) 0 13px, transparent 14px),
    repeating-linear-gradient(135deg, rgba(117, 185, 111, 0.12) 0 2px, transparent 2px 28px),
    linear-gradient(155deg, #fff6fb 0%, #ffe3f2 42%, #dff7cf 100%);
}

.theme-art--princess-garden::before {
  right: 20px;
  top: 20px;
  width: 74px;
  height: 46px;
  background: linear-gradient(135deg, #ffd969, #f9a831 72%, #ffe9a5);
  clip-path: polygon(0 100%, 9% 34%, 30% 74%, 50% 0, 70% 74%, 91% 34%, 100% 100%);
  filter: drop-shadow(0 10px 12px rgba(161, 90, 41, 0.16));
  transform: rotate(7deg);
}

.theme-art--princess-garden::after {
  left: -18px;
  top: 8px;
  width: 86px;
  height: 104px;
  border-right: 4px solid rgba(63, 130, 70, 0.48);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 18%, #83c56f 0 9px, transparent 10px),
    radial-gradient(ellipse at 72% 36%, #9bd281 0 10px, transparent 11px),
    radial-gradient(circle at 52% 74%, #f6a2ce 0 10px, transparent 11px);
  transform: rotate(-12deg);
}

.theme-art--dino-dig {
  background:
    radial-gradient(ellipse at 12% 18%, rgba(255, 255, 255, 0.38), transparent 22%),
    radial-gradient(ellipse at 74% 12%, rgba(108, 159, 88, 0.28), transparent 24%),
    repeating-linear-gradient(9deg, transparent 0 24px, rgba(91, 57, 35, 0.1) 24px 27px),
    linear-gradient(180deg, #d8f1cf 0 42%, #d9b66c 42% 68%, #b97942 68% 100%);
}

.theme-art--dino-dig::before {
  right: 18px;
  top: 34px;
  width: 126px;
  height: 68px;
  border-radius: 60% 55% 48% 50%;
  background: linear-gradient(145deg, #74aa59, #4f873c);
  box-shadow: -38px -22px 0 -13px #78b75f, 36px 28px 0 -19px #4f873c, 0 16px 26px rgba(64, 44, 27, 0.16);
}

.theme-art--dino-dig::after {
  right: 72px;
  top: 24px;
  width: 58px;
  height: 15px;
  background: radial-gradient(circle, #31572b 0 4px, transparent 5px) 0 0 / 18px 14px;
  transform: rotate(-4deg);
}

.theme-art--sports-day {
  background:
    radial-gradient(circle at 16% 24%, rgba(142, 213, 255, 0.95) 0 16px, transparent 17px),
    radial-gradient(circle at 78% 22%, rgba(255, 216, 108, 0.95) 0 16px, transparent 17px),
    radial-gradient(circle at 54% 73%, rgba(255, 128, 196, 0.88) 0 18px, transparent 19px),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.16), transparent 50%),
    linear-gradient(145deg, #162947 0%, #274e73 52%, #152136 100%);
}

.theme-art--sports-day::before {
  left: 18%;
  top: 58%;
  width: 64%;
  height: 18%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(132, 228, 255, 0.72), rgba(255, 214, 107, 0.86));
  box-shadow:
    0 -20px 34px rgba(255, 255, 255, 0.24),
    0 14px 26px rgba(3, 16, 30, 0.26);
}

.theme-art--sports-day::after {
  left: 24%;
  top: 22%;
  width: 52%;
  height: 28%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 36%, rgba(255, 255, 255, 0.72) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 48%, rgba(255, 255, 255, 0.5) 0 4px, transparent 5px),
    rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 24px rgba(255, 255, 255, 0.22);
}

.theme-art--space-rocket {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.88) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 42%, rgba(255, 255, 255, 0.52) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 80% 17%, rgba(255, 245, 161, 0.78) 0 3px, transparent 4px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 34px),
    linear-gradient(145deg, #090b27 0%, #13245e 54%, #4f2480 100%);
}

.theme-art--space-rocket::before {
  right: 38px;
  top: 20px;
  width: 40px;
  height: 94px;
  border-radius: 48px 48px 18px 18px;
  background:
    radial-gradient(circle at 50% 33%, #abedff 0 9px, #2458bd 10px 13px, transparent 14px),
    linear-gradient(90deg, #fdf8ef 0 38%, #d9e2ff 38% 63%, #ffffff 63% 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  transform: rotate(27deg);
}

.theme-art--space-rocket::after {
  left: 30px;
  bottom: 18px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffd97b, #e26958 62%, #8a3f98 63%);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.22);
  opacity: 0.82;
}

.theme-art--mermaid-lagoon {
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.76) 0 5px, transparent 6px),
    radial-gradient(circle at 27% 33%, rgba(255, 255, 255, 0.45) 0 8px, transparent 9px),
    radial-gradient(circle at 91% 20%, rgba(255, 255, 255, 0.52) 0 6px, transparent 7px),
    repeating-radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 26px),
    linear-gradient(155deg, #c4fff5 0%, #52d7d1 44%, #1783a5 100%);
}

.theme-art--mermaid-lagoon::before {
  right: 24px;
  top: 22px;
  width: 86px;
  height: 96px;
  background:
    linear-gradient(155deg, #b363d8, #28c6bb 72%) left bottom / 50px 76px no-repeat,
    linear-gradient(205deg, #b363d8, #28c6bb 72%) right bottom / 50px 76px no-repeat;
  clip-path: polygon(50% 0, 100% 100%, 38% 78%, 0 100%);
  filter: drop-shadow(0 14px 18px rgba(13, 92, 103, 0.22));
  transform: rotate(16deg);
}

.theme-art--mermaid-lagoon::after {
  left: -32px;
  bottom: -30px;
  width: 260px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 24% 22%, rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.1));
}

.theme-art--rainbow-art {
  background:
    linear-gradient(20deg, transparent 0 55%, rgba(255, 106, 106, 0.54) 55% 61%, transparent 61%),
    linear-gradient(34deg, transparent 0 45%, rgba(255, 217, 83, 0.62) 45% 51%, transparent 51%),
    linear-gradient(48deg, transparent 0 38%, rgba(85, 216, 176, 0.55) 38% 43%, transparent 43%),
    linear-gradient(62deg, transparent 0 31%, rgba(106, 138, 255, 0.52) 31% 36%, transparent 36%),
    linear-gradient(145deg, #fff8df 0%, #ffeec5 42%, #f6d8ff 100%);
}

.theme-art--rainbow-art::before {
  right: 18px;
  top: 18px;
  width: 140px;
  height: 78px;
  border-radius: 78px 78px 0 0;
  background: conic-gradient(from 180deg at 50% 100%, #ff5c5c, #ffb342, #f8f172, #5ed884, #57a9ff, #8a65db, #ff5c5c);
  -webkit-mask: radial-gradient(ellipse at 50% 100%, transparent 0 42%, #000 43% 100%);
  mask: radial-gradient(ellipse at 50% 100%, transparent 0 42%, #000 43% 100%);
  transform: rotate(4deg);
}

.theme-art--rainbow-art::after {
  left: 22px;
  top: 26px;
  width: 72px;
  height: 13px;
  border: 0;
  border-radius: 999px;
  background: #1e2635;
  box-shadow: 70px 48px 0 22px rgba(255, 255, 255, 0.46);
  transform: rotate(-18deg);
}

.theme-art--superhero {
  background:
    radial-gradient(circle at 80% 16%, rgba(255, 231, 91, 0.95) 0 3px, transparent 4px),
    repeating-radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-38deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 28px),
    linear-gradient(135deg, #1451bd 0 48%, #e83e42 48% 100%);
}

.theme-art--superhero::before {
  right: 22px;
  top: 18px;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  color: #e83e42;
  font-size: 17px;
  font-weight: 1000;
  letter-spacing: -0.03em;
  text-shadow: 1px 1px 0 #fff;
  background: #ffe75b;
  clip-path: polygon(50% 0, 61% 35%, 97% 18%, 74% 50%, 100% 78%, 64% 67%, 50% 100%, 36% 67%, 0 78%, 26% 50%, 3% 18%, 39% 35%);
  content: "POW!";
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18));
  transform: rotate(8deg);
}

.theme-art--superhero::after {
  left: 22px;
  top: 24px;
  width: 92px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 22px 42px 0 rgba(255, 255, 255, 0.36), 5px 74px 0 rgba(255, 255, 255, 0.25);
  transform: rotate(-18deg);
}

.theme-art--zoo-safari {
  background:
    radial-gradient(ellipse at 16% 16%, rgba(61, 112, 52, 0.34), transparent 20%),
    radial-gradient(ellipse at 86% 10%, rgba(87, 138, 60, 0.28), transparent 18%),
    radial-gradient(circle at 82% 42%, rgba(108, 66, 30, 0.22) 0 8px, transparent 9px),
    linear-gradient(180deg, #cae985 0 38%, #ead18a 38% 72%, #a87a42 72% 100%);
}

.theme-art--zoo-safari::before {
  right: 24px;
  top: 34px;
  width: 106px;
  height: 44px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 50%, rgba(73, 54, 26, 0.95) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 50%, rgba(73, 54, 26, 0.95) 0 5px, transparent 6px),
    linear-gradient(90deg, #c79e41, #deb85e);
  box-shadow: -22px 1px 0 8px #d8ad4b, 22px 1px 0 8px #d8ad4b, inset 0 -8px 0 rgba(105, 74, 24, 0.12);
}

.theme-art--zoo-safari::after {
  left: -8px;
  top: -2px;
  width: 140px;
  height: 92px;
  background:
    radial-gradient(ellipse at 18% 38%, #5c9c48 0 18px, transparent 19px),
    radial-gradient(ellipse at 40% 26%, #6aa954 0 24px, transparent 25px),
    radial-gradient(ellipse at 67% 44%, #4d8f40 0 20px, transparent 21px),
    radial-gradient(ellipse at 78% 16%, #79b55e 0 18px, transparent 19px);
  opacity: 0.78;
}

.theme-art--arcade-game {
  background:
    linear-gradient(90deg, rgba(123, 255, 245, 0.12) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(0deg, rgba(255, 93, 207, 0.1) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(circle at 81% 24%, rgba(255, 93, 207, 0.48), transparent 46%),
    radial-gradient(circle at 11% 86%, rgba(123, 255, 245, 0.28), transparent 52%),
    linear-gradient(135deg, #15123f 0%, #2c145f 52%, #09051f 100%);
}

.theme-art--arcade-game::before {
  right: 24px;
  top: 18px;
  width: 88px;
  height: 96px;
  border-radius: 12px 12px 14px 14px;
  background:
    linear-gradient(90deg, #7bfff5 0 6px, transparent 6px 12px) 16px 22px / 12px 12px no-repeat,
    linear-gradient(90deg, #ff5dcf 0 6px, transparent 6px 12px) 52px 44px / 12px 12px no-repeat,
    linear-gradient(180deg, #4e2b96 0 62%, #1c174a 62% 100%);
  box-shadow: 0 0 0 4px rgba(123, 255, 245, 0.26) inset, 0 0 22px rgba(255, 93, 207, 0.38);
}

.theme-art--arcade-game::after {
  left: 26px;
  top: 24px;
  width: 90px;
  height: 32px;
  border: 1px solid rgba(123, 255, 245, 0.24);
  border-radius: 10px;
  background: rgba(2, 2, 18, 0.36);
  box-shadow: 0 0 18px rgba(123, 255, 245, 0.18);
}

.public-theme-grid .theme-art {
  min-height: 118px;
  border-color: rgba(20, 63, 59, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    0 10px 24px rgba(20, 63, 59, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.public-theme-grid label:hover .theme-art,
.public-theme-grid label:has(input:checked) .theme-art {
  border-color: color-mix(in srgb, var(--invite-teal) 72%, #ffffff);
  filter: saturate(1.08);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 16px 28px rgba(20, 63, 59, 0.12);
}

.public-theme-grid .theme-art--princess-garden {
  background:
    radial-gradient(circle at 14% 22%, rgba(245, 176, 220, 0.55) 0 26px, transparent 27px),
    radial-gradient(circle at 20% 78%, #92cb78 0 10px, transparent 11px),
    radial-gradient(circle at 34% 64%, #a7d98c 0 11px, transparent 12px),
    radial-gradient(circle at 85% 72%, rgba(255, 255, 255, 0.72) 0 18px, transparent 19px),
    repeating-linear-gradient(135deg, rgba(117, 185, 111, 0.12) 0 2px, transparent 2px 30px),
    linear-gradient(155deg, #fff6fb 0%, #ffe3f2 40%, #dff7cf 100%);
}

.public-theme-grid .theme-art--princess-garden::before {
  right: 22px;
  top: 26px;
  width: 88px;
  height: 58px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 54%),
    linear-gradient(135deg, #ffd969, #f9a831 72%, #ffe9a5);
  clip-path: polygon(0 100%, 10% 34%, 30% 72%, 50% 0, 70% 72%, 90% 34%, 100% 100%);
  filter: drop-shadow(0 12px 14px rgba(161, 90, 41, 0.18));
  transform: rotate(4deg);
}

.public-theme-grid .theme-art--princess-garden::after {
  left: 14px;
  bottom: 10px;
  width: 74px;
  height: 86px;
  border-left: 5px solid rgba(82, 143, 74, 0.56);
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 18%, #83c56f 0 10px, transparent 11px),
    radial-gradient(circle at 54% 44%, #9bd281 0 11px, transparent 12px),
    radial-gradient(circle at 34% 70%, #f6a2ce 0 10px, transparent 11px);
  transform: rotate(12deg);
}

.public-theme-grid .theme-art--dino-dig {
  background:
    radial-gradient(ellipse at 18% 22%, rgba(255, 255, 255, 0.38), transparent 24%),
    radial-gradient(ellipse at 80% 12%, rgba(108, 159, 88, 0.3), transparent 25%),
    radial-gradient(ellipse at 16% 70%, rgba(255, 240, 195, 0.54) 0 26px, transparent 27px),
    repeating-linear-gradient(9deg, transparent 0 24px, rgba(91, 57, 35, 0.11) 24px 27px),
    linear-gradient(180deg, #d8f1cf 0 42%, #d9b66c 42% 68%, #b97942 68% 100%);
}

.public-theme-grid .theme-art--dino-dig::before {
  right: 24px;
  top: 40px;
  width: 132px;
  height: 70px;
  border-radius: 60% 55% 48% 50%;
  background:
    radial-gradient(circle at 78% 36%, #31572b 0 5px, transparent 6px),
    linear-gradient(145deg, #74aa59, #4f873c);
  box-shadow:
    -38px -18px 0 -13px #78b75f,
    42px 28px 0 -20px #5e9a46,
    inset 0 -12px 0 rgba(58, 105, 44, 0.2),
    0 16px 22px rgba(64, 44, 27, 0.15);
}

.public-theme-grid .theme-art--dino-dig::after {
  left: 25px;
  bottom: 18px;
  width: 86px;
  height: 28px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(122, 84, 41, 0.36) 19px 24px, transparent 25px),
    #f6e2ad;
  box-shadow: 0 0 0 7px rgba(91, 57, 35, 0.06) inset;
  transform: rotate(-4deg);
}

.public-theme-grid .theme-art--sports-day {
  background:
    radial-gradient(circle at 16% 24%, rgba(142, 213, 255, 0.95) 0 16px, transparent 17px),
    radial-gradient(circle at 78% 22%, rgba(255, 216, 108, 0.95) 0 16px, transparent 17px),
    radial-gradient(circle at 54% 73%, rgba(255, 128, 196, 0.88) 0 18px, transparent 19px),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.16), transparent 50%),
    linear-gradient(145deg, #162947 0%, #274e73 52%, #152136 100%);
}

.public-theme-grid .theme-art--sports-day::before {
  left: 18%;
  top: 58%;
  width: 64%;
  height: 18%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(132, 228, 255, 0.72), rgba(255, 214, 107, 0.86));
  box-shadow:
    0 -20px 34px rgba(255, 255, 255, 0.24),
    0 14px 26px rgba(3, 16, 30, 0.26);
}

.public-theme-grid .theme-art--sports-day::after {
  content: "";
  left: 24%;
  top: 22%;
  width: 52%;
  height: 28%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 36%, rgba(255, 255, 255, 0.72) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 48%, rgba(255, 255, 255, 0.5) 0 4px, transparent 5px),
    rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 24px rgba(255, 255, 255, 0.22);
}

.public-theme-grid .theme-art--space-rocket {
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.88) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 44%, rgba(255, 255, 255, 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, rgba(255, 245, 161, 0.78) 0 3px, transparent 4px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 34px),
    linear-gradient(145deg, #090b27 0%, #13245e 54%, #4f2480 100%);
}

.public-theme-grid .theme-art--space-rocket::before {
  right: 46px;
  top: 18px;
  width: 44px;
  height: 98px;
  border-radius: 48px 48px 18px 18px;
  background:
    radial-gradient(circle at 50% 32%, #abedff 0 9px, #2458bd 10px 13px, transparent 14px),
    linear-gradient(90deg, #fdf8ef 0 38%, #d9e2ff 38% 63%, #ffffff 63% 100%);
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.28),
    0 76px 0 -11px #ff7b3f;
  transform: rotate(26deg);
}

.public-theme-grid .theme-art--space-rocket::after {
  left: 26px;
  bottom: 14px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffd97b, #e26958 62%, #8a3f98 63%);
  box-shadow:
    -18px 33px 0 -34px transparent,
    0 0 0 7px rgba(255, 255, 255, 0.24);
  opacity: 0.82;
}

.public-theme-grid .theme-art--mermaid-lagoon {
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.76) 0 5px, transparent 6px),
    radial-gradient(circle at 27% 33%, rgba(255, 255, 255, 0.45) 0 8px, transparent 9px),
    radial-gradient(circle at 91% 20%, rgba(255, 255, 255, 0.52) 0 6px, transparent 7px),
    repeating-radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 28px),
    linear-gradient(155deg, #c4fff5 0%, #52d7d1 44%, #1783a5 100%);
}

.public-theme-grid .theme-art--mermaid-lagoon::before {
  right: 34px;
  top: 24px;
  width: 88px;
  height: 94px;
  background:
    linear-gradient(155deg, #b363d8, #28c6bb 72%) left bottom / 52px 78px no-repeat,
    linear-gradient(205deg, #b363d8, #28c6bb 72%) right bottom / 52px 78px no-repeat;
  clip-path: polygon(50% 0, 100% 100%, 38% 78%, 0 100%);
  filter: drop-shadow(0 14px 18px rgba(13, 92, 103, 0.22));
  transform: rotate(16deg);
}

.public-theme-grid .theme-art--mermaid-lagoon::after {
  left: -26px;
  bottom: -22px;
  width: 260px;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 24% 20%, rgba(255, 255, 255, 0.44), transparent 42%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.1));
}

.public-theme-grid .theme-art--rainbow-art {
  background:
    radial-gradient(circle at 86% 76%, rgba(255, 255, 255, 0.6) 0 30px, transparent 31px),
    linear-gradient(20deg, transparent 0 55%, rgba(255, 106, 106, 0.42) 55% 61%, transparent 61%),
    linear-gradient(34deg, transparent 0 45%, rgba(255, 217, 83, 0.5) 45% 51%, transparent 51%),
    linear-gradient(48deg, transparent 0 38%, rgba(85, 216, 176, 0.46) 38% 43%, transparent 43%),
    linear-gradient(62deg, transparent 0 31%, rgba(106, 138, 255, 0.43) 31% 36%, transparent 36%),
    linear-gradient(145deg, #fff8df 0%, #ffeec5 42%, #f6d8ff 100%);
}

.public-theme-grid .theme-art--rainbow-art::before {
  right: 18px;
  top: 18px;
  width: 146px;
  height: 82px;
  border-radius: 82px 82px 0 0;
  background: conic-gradient(from 180deg at 50% 100%, #ff5c5c, #ffb342, #f8f172, #5ed884, #57a9ff, #8a65db, #ff5c5c);
  -webkit-mask: radial-gradient(ellipse at 50% 100%, transparent 0 42%, #000 43% 100%);
  mask: radial-gradient(ellipse at 50% 100%, transparent 0 42%, #000 43% 100%);
  transform: rotate(4deg);
}

.public-theme-grid .theme-art--rainbow-art::after {
  left: 22px;
  top: 28px;
  width: 78px;
  height: 13px;
  border-radius: 999px;
  background: #1e2635;
  box-shadow: 72px 54px 0 24px rgba(255, 240, 201, 0.58);
  transform: rotate(-18deg);
}

.public-theme-grid .theme-art--superhero {
  background:
    radial-gradient(circle at 80% 16%, rgba(255, 231, 91, 0.95) 0 3px, transparent 4px),
    repeating-radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-38deg, rgba(255, 255, 255, 0.11) 0 2px, transparent 2px 28px),
    linear-gradient(135deg, #1451bd 0 48%, #e83e42 48% 100%);
}

.public-theme-grid .theme-art--superhero::before {
  content: "POW!";
  right: 12px;
  top: 24px;
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  background: #ffe75b;
  color: #e83e42;
  clip-path: polygon(50% 0, 61% 35%, 97% 18%, 74% 50%, 100% 78%, 64% 67%, 50% 100%, 36% 67%, 0 78%, 26% 50%, 3% 18%, 39% 35%);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18));
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -0.03em;
  text-shadow: 1px 1px 0 #fff;
  transform: rotate(8deg);
}

.public-theme-grid .theme-art--superhero::after {
  left: 22px;
  top: 24px;
  width: 96px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 24px 42px 0 rgba(255, 255, 255, 0.36), 5px 74px 0 rgba(255, 255, 255, 0.25);
  transform: rotate(-18deg);
}

.public-theme-grid .theme-art--zoo-safari {
  background:
    radial-gradient(ellipse at 16% 16%, rgba(61, 112, 52, 0.34), transparent 20%),
    radial-gradient(ellipse at 86% 10%, rgba(87, 138, 60, 0.28), transparent 18%),
    radial-gradient(circle at 82% 42%, rgba(108, 66, 30, 0.22) 0 8px, transparent 9px),
    linear-gradient(180deg, #cae985 0 38%, #ead18a 38% 72%, #a87a42 72% 100%);
}

.public-theme-grid .theme-art--zoo-safari::before {
  right: 26px;
  top: 38px;
  width: 112px;
  height: 48px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 50%, rgba(73, 54, 26, 0.95) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 50%, rgba(73, 54, 26, 0.95) 0 5px, transparent 6px),
    linear-gradient(90deg, #c79e41, #deb85e);
  box-shadow:
    -23px 1px 0 8px #d8ad4b,
    23px 1px 0 8px #d8ad4b,
    inset 0 -8px 0 rgba(105, 74, 24, 0.12);
}

.public-theme-grid .theme-art--zoo-safari::after {
  left: -8px;
  top: -2px;
  width: 142px;
  height: 96px;
  background:
    radial-gradient(ellipse at 18% 38%, #5c9c48 0 18px, transparent 19px),
    radial-gradient(ellipse at 40% 26%, #6aa954 0 24px, transparent 25px),
    radial-gradient(ellipse at 67% 44%, #4d8f40 0 20px, transparent 21px),
    radial-gradient(ellipse at 78% 16%, #79b55e 0 18px, transparent 19px);
  opacity: 0.78;
}

.theme-art--zoo-safari,
.public-theme-grid .theme-art--zoo-safari {
  background:
    linear-gradient(180deg, rgba(255, 236, 167, 0.22), rgba(105, 67, 23, 0.12)),
    url("/assets/birthday-invites/zoo-safari-cinematic-bg.png") center / cover no-repeat;
}

.theme-art--zoo-safari::before,
.public-theme-grid .theme-art--zoo-safari::before {
  right: 8px;
  top: 18px;
  width: 78px;
  height: 98px;
  border-radius: 0;
  background: url("/assets/birthday-invites/zoo-safari-lion-3d.png") center bottom / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 10px 14px rgba(75, 45, 13, 0.26));
}

.theme-art--zoo-safari::after,
.public-theme-grid .theme-art--zoo-safari::after {
  left: 10px;
  top: 30px;
  width: 66px;
  height: 102px;
  background: url("/assets/birthday-invites/zoo-safari-gazelle-3d.png") center bottom / contain no-repeat;
  opacity: 1;
  filter: drop-shadow(0 10px 14px rgba(75, 45, 13, 0.2));
}

.theme-art--mermaid-lagoon,
.public-theme-grid .theme-art--mermaid-lagoon {
  background:
    linear-gradient(180deg, rgba(199, 255, 248, 0.2), rgba(7, 93, 123, 0.1)),
    url("/assets/birthday-invites/mermaid-lagoon-cinematic-bg.png") center / cover no-repeat;
}

.theme-art--mermaid-lagoon::before,
.public-theme-grid .theme-art--mermaid-lagoon::before {
  right: 10px;
  top: 14px;
  width: 82px;
  height: 112px;
  border-radius: 0;
  background: url("/assets/birthday-invites/mermaid-lagoon-3d.png") center bottom / contain no-repeat;
  clip-path: none;
  box-shadow: none;
  filter: drop-shadow(0 10px 14px rgba(5, 67, 82, 0.26));
  transform: rotate(2deg);
}

.theme-art--mermaid-lagoon::after,
.public-theme-grid .theme-art--mermaid-lagoon::after {
  left: 8px;
  top: 36px;
  bottom: auto;
  width: 92px;
  height: 96px;
  border-radius: 0;
  background: url("/assets/birthday-invites/mermaid-lagoon-shark-3d.png") center bottom / contain no-repeat;
  opacity: 1;
  filter: drop-shadow(0 10px 14px rgba(5, 67, 82, 0.22));
}

.public-theme-grid .theme-art--arcade-game {
  background:
    linear-gradient(90deg, rgba(123, 255, 245, 0.12) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(0deg, rgba(255, 93, 207, 0.1) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(circle at 81% 24%, rgba(255, 93, 207, 0.48), transparent 46%),
    radial-gradient(circle at 11% 86%, rgba(123, 255, 245, 0.28), transparent 52%),
    linear-gradient(135deg, #15123f 0%, #2c145f 52%, #09051f 100%);
}

.public-theme-grid .theme-art--arcade-game::before {
  right: 26px;
  top: 18px;
  width: 88px;
  height: 98px;
  border-radius: 12px 12px 14px 14px;
  background:
    linear-gradient(90deg, #7bfff5 0 6px, transparent 6px 12px) 16px 22px / 12px 12px no-repeat,
    linear-gradient(90deg, #ff5dcf 0 6px, transparent 6px 12px) 52px 44px / 12px 12px no-repeat,
    linear-gradient(180deg, #4e2b96 0 62%, #1c174a 62% 100%);
  box-shadow: 0 0 0 4px rgba(123, 255, 245, 0.26) inset, 0 0 22px rgba(255, 93, 207, 0.38);
}

.public-theme-grid .theme-art--arcade-game::after {
  content: "START";
  left: 24px;
  top: 26px;
  display: grid;
  width: 86px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(123, 255, 245, 0.24);
  border-radius: 10px;
  background: rgba(2, 2, 18, 0.44);
  color: #7bfff5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgba(123, 255, 245, 0.84);
  box-shadow: 0 0 18px rgba(123, 255, 245, 0.18);
}

/* Customer theme picker thumbnails are scene previews, not full mini layouts. */
.public-theme-grid label {
  min-height: auto;
}

.public-theme-grid .theme-art {
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background-position: center;
  background-size: cover;
}

.public-theme-grid .theme-art::before,
.public-theme-grid .theme-art::after {
  content: none !important;
  display: none !important;
}

.public-theme-grid .theme-art--candle-party {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 232, 244, 0.18)),
    url("/assets/birthday-invites/candle-party-pastel-wallpaper.png") center / cover no-repeat;
}

.public-theme-grid .theme-art--princess-garden {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 244, 250, 0.06)),
    url("/assets/birthday-invites/castle-quest-princess-bg.png") center / cover no-repeat;
}

.public-theme-grid .theme-art--dino-dig {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(80, 44, 22, 0.08)),
    url("/assets/birthday-invites/dino-volcano-valley-bg.webp") center / cover no-repeat;
}

.public-theme-grid .theme-art--sports-day {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(3, 14, 24, 0.18)),
    url("/assets/birthday-invites/sports-day-allstar-cinematic-bg.webp") center / cover no-repeat;
}

.public-theme-grid .theme-art--space-rocket {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(6, 10, 34, 0.16)),
    url("/assets/birthday-invites/space-astronaut-girl-starlight-bg.webp") center / cover no-repeat;
}

.public-theme-grid .theme-art--mermaid-lagoon {
  background:
    linear-gradient(180deg, rgba(199, 255, 248, 0.18), rgba(7, 93, 123, 0.12)),
    url("/assets/birthday-invites/mermaid-lagoon-cinematic-bg.png") center / cover no-repeat;
}

.public-theme-grid .theme-art--rainbow-art {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02)),
    url("/assets/birthday-invites/rainbow-art-studio-bg.webp") center / cover no-repeat;
}

.public-theme-grid .theme-art--superhero {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(18, 31, 75, 0.12)),
    url("/assets/birthday-invites/superhero-sky-city-bg.webp") center / cover no-repeat;
}

.public-theme-grid .theme-art--zoo-safari {
  background:
    linear-gradient(180deg, rgba(255, 236, 167, 0.18), rgba(92, 124, 55, 0.08)),
    url("/assets/birthday-invites/zoo-safari-cinematic-bg.png") center / cover no-repeat;
}

.public-theme-grid .theme-art--arcade-game {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(7, 8, 26, 0.16)),
    url("/assets/birthday-invites/arcade-neon-playroom-bg.webp") center / cover no-repeat;
}

.invite-flow-preview:not([data-theme="candle-party"]) {
  --content-panel: rgba(255, 255, 255, 0.74);
  --panel-border: rgba(255, 255, 255, 0.24);
  --detail-bg: rgba(255, 255, 255, 0.55);
  --detail-border: rgba(20, 63, 59, 0.12);
  --detail-label: var(--flow-title);
  --detail-ink: var(--flow-text);
  --label-bg: rgba(255, 255, 255, 0.18);
  --label-ink: var(--flow-text);
  --rsvp-bg: var(--flow-card);
  --rsvp-ink: var(--flow-text);
  --rsvp-muted: var(--flow-muted);
  --rsvp-border: var(--panel-border);
  --button-bg: color-mix(in srgb, var(--theme-accent) 72%, rgba(255, 255, 255, 0.2));
  --button-bg-2: rgba(255, 255, 255, 0.2);
  --button-bg-3: rgba(255, 255, 255, 0.14);
  --button-ink: var(--flow-text);
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-screen--invite {
  color: var(--flow-text);
  background: var(--theme-bg);
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-theme-scene::before {
  inset: 0;
  opacity: var(--theme-pattern-opacity, 0.92);
  background: var(--theme-pattern);
  mix-blend-mode: var(--theme-pattern-blend, normal);
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-theme-scene::after {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--theme-vignette);
  opacity: 1;
  transform: none;
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-prop {
  inset: auto;
  display: none;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  opacity: 1;
  transform: none;
  clip-path: none;
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-prop::before,
.invite-flow-preview:not([data-theme="candle-party"]) .flow-prop::after {
  content: "";
  position: absolute;
  display: block;
  inset: auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  opacity: 1;
  transform: none;
  clip-path: none;
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-invite-layout {
  align-content: end;
  padding: 22px;
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-invite-copy {
  max-width: none;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 14px;
  background: var(--content-panel);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(12px);
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-theme-label {
  border-color: transparent;
  background: var(--label-bg);
  color: var(--label-ink);
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-details-grid div {
  border-color: var(--detail-border);
  background: var(--detail-bg);
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-details-grid dt {
  color: var(--detail-label);
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-details-grid dd {
  color: var(--detail-ink);
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-rsvp-card {
  border-color: var(--rsvp-border);
  background: var(--rsvp-bg);
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-rsvp-card strong {
  color: var(--rsvp-ink);
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-rsvp-card small {
  color: var(--rsvp-muted);
}

.invite-flow-preview:not([data-theme="candle-party"]) .preview-rsvp-actions button {
  border-color: var(--rsvp-border);
  background: var(--button-bg-2);
  color: var(--button-ink);
}

.invite-flow-preview:not([data-theme="candle-party"]) .preview-rsvp-actions button:nth-child(3) {
  background: var(--button-bg-3);
}

.invite-flow-preview:not([data-theme="candle-party"]) .preview-rsvp-actions button:hover,
.invite-flow-preview:not([data-theme="candle-party"]) .preview-rsvp-actions button.is-selected {
  border-color: transparent;
  background: var(--button-bg);
  color: var(--button-ink);
}

.invite-flow-preview[data-theme="princess-garden"] {
  --theme-bg: linear-gradient(155deg, #fff6fb 0%, #ffe3f2 38%, #dff7cf 100%);
  --theme-pattern:
    radial-gradient(circle at 13% 18%, rgba(255, 205, 232, 0.86) 0 10px, transparent 11px),
    radial-gradient(circle at 18% 14%, rgba(255, 247, 173, 0.82) 0 7px, transparent 8px),
    radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.64) 0 13px, transparent 14px),
    repeating-linear-gradient(135deg, rgba(117, 185, 111, 0.09) 0 2px, transparent 2px 34px);
  --theme-vignette:
    radial-gradient(circle at 88% 2%, rgba(255, 218, 81, 0.46), transparent 22rem),
    radial-gradient(circle at 0% 98%, rgba(89, 172, 91, 0.22), transparent 20rem);
  --flow-title: #be287f;
  --flow-text: #45133a;
  --flow-muted: rgba(92, 32, 76, 0.78);
  --flow-card: rgba(255, 255, 255, 0.76);
  --content-panel: rgba(255, 255, 255, 0.74);
  --label-bg: linear-gradient(135deg, #d63691, #f59dca);
  --label-ink: #ffffff;
  --button-bg: linear-gradient(135deg, #b8267c, #f58bc0);
  --button-bg-2: rgba(196, 67, 134, 0.68);
  --button-bg-3: rgba(196, 67, 134, 0.44);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-a {
  display: block;
  top: 56px;
  right: 32px;
  width: 126px;
  height: 74px;
  background: linear-gradient(135deg, #ffd969, #f9a831 72%, #ffe9a5);
  clip-path: polygon(0 100%, 9% 34%, 30% 74%, 50% 0, 70% 74%, 91% 34%, 100% 100%);
  filter: drop-shadow(0 18px 24px rgba(161, 90, 41, 0.18));
  transform: rotate(7deg);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-a::before {
  left: 11px;
  right: 11px;
  bottom: -11px;
  height: 20px;
  border-radius: 999px;
  background: #e888c8;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35) inset;
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-b {
  display: block;
  left: -34px;
  top: 42px;
  width: 150px;
  height: 330px;
  border-right: 6px solid rgba(63, 130, 70, 0.48);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-b::before {
  inset: 12px 12px auto auto;
  width: 114px;
  height: 250px;
  background:
    radial-gradient(ellipse at 20% 18%, #83c56f 0 11px, transparent 12px),
    radial-gradient(ellipse at 72% 30%, #9bd281 0 12px, transparent 13px),
    radial-gradient(ellipse at 42% 50%, #74bb64 0 11px, transparent 12px),
    radial-gradient(ellipse at 82% 67%, #b2dd95 0 12px, transparent 13px),
    radial-gradient(circle at 55% 81%, #f6a2ce 0 10px, transparent 11px);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-c {
  display: block;
  right: 110px;
  bottom: 116px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, rgba(255, 255, 255, 0.9), transparent 26%), #f0b1d9;
  opacity: 0.56;
}

.invite-flow-preview[data-theme="dino-dig"] {
  --theme-bg: linear-gradient(180deg, #d8f1cf 0 42%, #d9b66c 42% 68%, #b97942 68% 100%);
  --theme-pattern:
    radial-gradient(ellipse at 12% 18%, rgba(255, 255, 255, 0.38), transparent 22%),
    radial-gradient(ellipse at 74% 12%, rgba(108, 159, 88, 0.28), transparent 24%),
    repeating-linear-gradient(9deg, transparent 0 28px, rgba(91, 57, 35, 0.09) 28px 31px);
  --theme-vignette:
    radial-gradient(circle at 82% 14%, rgba(99, 145, 69, 0.35), transparent 19rem),
    radial-gradient(circle at 16% 100%, rgba(103, 59, 35, 0.28), transparent 18rem);
  --flow-title: #714222;
  --flow-text: #3a281a;
  --flow-muted: rgba(81, 53, 31, 0.8);
  --flow-card: rgba(255, 248, 226, 0.77);
  --content-panel: rgba(255, 248, 226, 0.77);
  --label-bg: linear-gradient(135deg, #5d8f43, #9dbb5b);
  --label-ink: #ffffff;
  --detail-bg: rgba(255, 247, 220, 0.66);
  --button-bg: linear-gradient(135deg, #735136, #a06f3e);
  --button-bg-2: rgba(115, 81, 54, 0.72);
  --button-bg-3: rgba(115, 81, 54, 0.48);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-a {
  display: block;
  right: -12px;
  top: 104px;
  width: 238px;
  height: 130px;
  border-radius: 60% 55% 48% 50%;
  background: linear-gradient(145deg, #74aa59, #4f873c);
  box-shadow: inset 0 -18px 0 rgba(58, 105, 44, 0.22), 0 28px 60px rgba(64, 44, 27, 0.18);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-a::before {
  width: 78px;
  height: 116px;
  right: 198px;
  top: -42px;
  border-radius: 54% 54% 32% 58%;
  background: linear-gradient(135deg, #78b75f, #4c8239);
  transform: rotate(-20deg);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-a::after {
  width: 108px;
  height: 45px;
  right: -72px;
  top: 28px;
  border-radius: 999px 8px 999px 999px;
  background: #5e9a46;
  transform: rotate(18deg);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-b {
  display: block;
  right: 92px;
  top: 74px;
  width: 104px;
  height: 24px;
  background: radial-gradient(circle, #31572b 0 5px, transparent 6px) 0 0 / 28px 22px;
  transform: rotate(-4deg);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-c {
  display: block;
  right: 30px;
  bottom: 92px;
  width: 158px;
  height: 74px;
  border-radius: 999px;
  background: rgba(255, 240, 195, 0.44);
  box-shadow: 0 0 0 15px rgba(91, 57, 35, 0.06) inset;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-c::before {
  left: 22px;
  top: 25px;
  width: 114px;
  height: 23px;
  border-radius: 999px;
  background: #f6e2ad;
  box-shadow: 0 0 0 5px rgba(122, 84, 41, 0.1) inset;
}

.invite-flow-preview[data-theme="sports-day"] {
  --theme-bg: linear-gradient(145deg, #55bf61 0%, #2f974e 64%, #116b42 100%);
  --theme-pattern:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px) 0 0 / 72px 100%,
    linear-gradient(0deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px) 0 0 / 100% 78px,
    radial-gradient(circle at 76% 28%, rgba(255, 255, 255, 0.2), transparent 16rem);
  --theme-vignette:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.19), transparent 17rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 62%);
  --flow-title: #ffffff;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.87);
  --flow-card: rgba(6, 46, 34, 0.74);
  --content-panel: rgba(5, 61, 39, 0.44);
  --panel-border: rgba(255, 255, 255, 0.22);
  --label-bg: rgba(255, 255, 255, 0.18);
  --label-ink: #ffffff;
  --detail-bg: rgba(0, 0, 0, 0.13);
  --detail-border: rgba(255, 255, 255, 0.16);
  --detail-label: rgba(255, 255, 255, 0.68);
  --button-bg: linear-gradient(135deg, #e9f88e, #78d86b);
  --button-ink: #0d3927;
  --button-bg-2: rgba(255, 255, 255, 0.24);
  --button-bg-3: rgba(255, 255, 255, 0.15);
}

.invite-flow-preview[data-theme="sports-day"] .flow-prop-a {
  display: block;
  right: 38px;
  top: 54px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 45%, #173129 45% 55%, transparent 55%),
    linear-gradient(0deg, transparent 45%, #173129 45% 55%, transparent 55%),
    #f9fff4;
  box-shadow: 0 0 0 8px rgba(18, 50, 41, 0.55) inset, 0 22px 50px rgba(0, 0, 0, 0.18);
}

.invite-flow-preview[data-theme="sports-day"] .flow-prop-b {
  display: block;
  right: -6px;
  top: 18px;
  width: 168px;
  height: 168px;
  border: 7px solid rgba(255, 255, 255, 0.74);
  border-left: 0;
  border-bottom: 0;
}

.invite-flow-preview[data-theme="sports-day"] .flow-prop-c {
  display: block;
  left: 22px;
  top: 22px;
  width: 178px;
  height: 62px;
  border-radius: 18px;
  background: rgba(10, 63, 43, 0.46);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}

.invite-flow-preview[data-theme="sports-day"] .flow-prop-c::before {
  content: "SPORTS DAY";
  display: grid;
  place-items: center;
  inset: 10px;
  border-radius: 11px;
  color: #e9f88e;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.invite-flow-preview[data-theme="space-rocket"] {
  --theme-bg: linear-gradient(145deg, #090b27 0%, #13245e 54%, #4f2480 100%);
  --theme-pattern:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.88) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 42%, rgba(255, 255, 255, 0.52) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 80% 17%, rgba(255, 245, 161, 0.78) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 62%, rgba(157, 221, 255, 0.56) 0 2px, transparent 3px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 52px);
  --theme-vignette:
    radial-gradient(circle at 78% 10%, rgba(233, 116, 56, 0.32), transparent 15rem),
    radial-gradient(circle at 10% 100%, rgba(114, 222, 255, 0.22), transparent 17rem);
  --flow-title: #ffffff;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.82);
  --flow-card: rgba(8, 10, 35, 0.68);
  --content-panel: rgba(10, 15, 46, 0.54);
  --panel-border: rgba(255, 255, 255, 0.18);
  --label-bg: linear-gradient(135deg, #ff8049, #ffd77c);
  --label-ink: #190e33;
  --detail-bg: rgba(255, 255, 255, 0.08);
  --detail-border: rgba(255, 255, 255, 0.13);
  --detail-label: rgba(255, 255, 255, 0.6);
  --button-bg: linear-gradient(135deg, #ff854d, #ffd779);
  --button-ink: #1a1030;
  --button-bg-2: rgba(255, 255, 255, 0.2);
  --button-bg-3: rgba(255, 255, 255, 0.13);
}

.invite-flow-preview[data-theme="space-rocket"] .flow-prop-a {
  display: block;
  right: 48px;
  top: 44px;
  width: 76px;
  height: 182px;
  border-radius: 48px 48px 28px 28px;
  background: linear-gradient(90deg, #fdf8ef 0 38%, #d9e2ff 38% 63%, #ffffff 63% 100%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  transform: rotate(27deg);
}

.invite-flow-preview[data-theme="space-rocket"] .flow-prop-a::before {
  left: 16px;
  top: 38px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #abedff, #2458bd 72%);
  box-shadow: 0 0 0 6px #f15c4c inset;
}

.invite-flow-preview[data-theme="space-rocket"] .flow-prop-a::after {
  left: 20px;
  bottom: -84px;
  width: 38px;
  height: 96px;
  border-radius: 60% 60% 45% 45%;
  background: linear-gradient(#ffe263, #ff7b3f 50%, transparent 82%);
}

.invite-flow-preview[data-theme="space-rocket"] .flow-prop-b {
  display: block;
  right: 106px;
  bottom: 92px;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffd97b, #e26958 62%, #8a3f98 63%);
  opacity: 0.72;
}

.invite-flow-preview[data-theme="space-rocket"] .flow-prop-b::before {
  left: -34px;
  right: -34px;
  top: 72px;
  height: 24px;
  border: 7px solid rgba(255, 255, 255, 0.66);
  border-right-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-12deg);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] {
  --theme-bg:
    linear-gradient(180deg, rgba(214, 255, 249, 0.06), rgba(0, 87, 112, 0.2)),
    url("/assets/birthday-invites/mermaid-lagoon-cinematic-bg.png") center / cover no-repeat,
    linear-gradient(155deg, #c4fff5 0%, #52d7d1 44%, #1783a5 100%);
  --theme-pattern:
    linear-gradient(118deg, transparent 0 34%, rgba(255, 255, 255, 0.2) 39%, transparent 44% 100%),
    linear-gradient(104deg, transparent 0 52%, rgba(157, 255, 240, 0.18) 56%, transparent 62% 100%),
    repeating-radial-gradient(ellipse at 50% -12%, rgba(255, 255, 255, 0.2) 0 2px, transparent 2px 38px),
    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.58) 0 4px, transparent 5px),
    radial-gradient(circle at 91% 20%, rgba(255, 255, 255, 0.4) 0 5px, transparent 6px);
  --theme-vignette:
    radial-gradient(circle at 58% 10%, rgba(255, 255, 255, 0.24), transparent 16rem),
    radial-gradient(circle at 84% 38%, rgba(9, 77, 111, 0.2), transparent 18rem),
    radial-gradient(circle at 4% 100%, rgba(2, 78, 96, 0.36), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(1, 71, 98, 0.24));
  --flow-title: #064d5a;
  --flow-text: #073c46;
  --flow-muted: rgba(14, 89, 101, 0.78);
  --flow-card: rgba(233, 255, 249, 0.72);
  --content-panel: rgba(233, 255, 249, 0.72);
  --label-bg: linear-gradient(135deg, #4e1e83, #d56cc6);
  --label-ink: #ffffff;
  --detail-bg: rgba(255, 255, 255, 0.45);
  --button-bg: linear-gradient(135deg, #056b8c, #7ff4db);
  --button-bg-2: rgba(5, 107, 140, 0.66);
  --button-bg-3: rgba(5, 107, 140, 0.44);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-a {
  display: block;
  left: -150px;
  top: 22%;
  width: 150px;
  height: 72px;
  opacity: 0.5;
  background:
    radial-gradient(ellipse at 20% 48%, rgba(10, 80, 103, 0.58) 0 10px, transparent 11px),
    radial-gradient(ellipse at 48% 30%, rgba(10, 80, 103, 0.4) 0 7px, transparent 8px),
    radial-gradient(ellipse at 76% 58%, rgba(10, 80, 103, 0.52) 0 9px, transparent 10px);
  animation: lagoonFishSwim 18s linear infinite;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-a::before,
.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-a::after {
  width: 12px;
  height: 14px;
  background: rgba(10, 80, 103, 0.46);
  clip-path: polygon(0 50%, 100% 0, 78% 50%, 100% 100%);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-a::before {
  left: 22px;
  top: 30px;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-a::after {
  right: 16px;
  top: 38px;
  transform: scale(0.82);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-b {
  display: block;
  right: -100px;
  top: 56%;
  width: 92px;
  height: 58px;
  border-radius: 54% 46% 46% 54%;
  background:
    radial-gradient(circle at 72% 36%, rgba(5, 59, 73, 0.74) 0 4px, transparent 5px),
    radial-gradient(ellipse at 45% 55%, rgba(114, 210, 158, 0.82), rgba(23, 122, 126, 0.72) 72%);
  opacity: 0.6;
  animation: lagoonTurtleSwim 25s linear infinite 3s;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-c {
  display: block;
  left: -60px;
  bottom: -44px;
  width: 720px;
  height: 160px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 24% 22%, rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08));
  animation: lagoonSwell 12s ease-in-out infinite alternate;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-a,
.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-b {
  display: none;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-scene-actors,
.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor,
.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor::before,
.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor::after {
  position: absolute;
  display: block;
  pointer-events: none;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-scene-actors {
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor {
  opacity: 0;
  filter:
    drop-shadow(0 12px 16px rgba(0, 57, 81, 0.18))
    drop-shadow(0 0 14px rgba(184, 255, 246, 0.26))
    saturate(1.12);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor::before,
.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor::after {
  content: "";
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-a,
.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-b,
.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-c {
  left: -20%;
  border-radius: 64% 44% 48% 62%;
  background:
    radial-gradient(circle at 77% 39%, #073c46 0 3px, transparent 4px),
    radial-gradient(ellipse at 36% 28%, rgba(255, 255, 255, 0.78), transparent 26%),
    radial-gradient(ellipse at 68% 70%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(135deg, #ffcf7a 0 22%, #ff83ac 46%, #8e77df 100%);
  box-shadow: inset -13px -8px 16px rgba(30, 64, 101, 0.18), inset 12px 10px 16px rgba(255, 255, 255, 0.2);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-a::before,
.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-b::before,
.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-c::before {
  left: -26%;
  top: 20%;
  width: 34%;
  height: 62%;
  border-radius: 16% 82% 82% 16%;
  background: linear-gradient(135deg, #ff83ac, #8e77df 72%);
  clip-path: polygon(100% 50%, 0 0, 20% 50%, 0 100%);
  transform-origin: 100% 50%;
  animation: lagoonTailWag 780ms ease-in-out infinite;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-a::after,
.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-b::after,
.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-c::after {
  left: 42%;
  bottom: -9%;
  width: 26%;
  height: 40%;
  border-radius: 66% 34% 70% 30%;
  background: rgba(255, 210, 231, 0.8);
  clip-path: polygon(50% 0, 100% 86%, 0 70%);
  transform-origin: 50% 0;
  animation: lagoonFinPulse 1.65s ease-in-out infinite;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-a {
  top: 21%;
  width: clamp(64px, 8.2vw, 110px);
  height: clamp(34px, 4.5vw, 58px);
  animation: lagoonFishCruiseRight 19s linear infinite -4s;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-b {
  top: 43%;
  width: clamp(52px, 6.6vw, 92px);
  height: clamp(30px, 3.8vw, 50px);
  background:
    radial-gradient(circle at 77% 39%, #063b4c 0 3px, transparent 4px),
    radial-gradient(ellipse at 36% 28%, rgba(255, 255, 255, 0.78), transparent 26%),
    radial-gradient(ellipse at 68% 70%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(135deg, #82e6ff 0 20%, #36adc8 52%, #236eb5 100%);
  animation: lagoonFishCruiseRight 24s linear infinite -13s;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-b::before {
  background: linear-gradient(135deg, #36adc8, #236eb5 72%);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-b::after {
  background: rgba(184, 242, 255, 0.78);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-c {
  top: 14%;
  width: clamp(44px, 5.2vw, 76px);
  height: clamp(26px, 3.1vw, 42px);
  background:
    radial-gradient(circle at 77% 39%, #073c46 0 2.5px, transparent 3.5px),
    radial-gradient(ellipse at 36% 28%, rgba(255, 255, 255, 0.82), transparent 26%),
    linear-gradient(135deg, #fff0a8 0 24%, #6de5c8 52%, #39a7d6 100%);
  animation: lagoonFishCruiseRight 31s linear infinite -21s;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-c::before {
  background: linear-gradient(135deg, #6de5c8, #39a7d6 72%);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-c::after {
  background: rgba(232, 255, 226, 0.72);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--turtle {
  right: -18%;
  top: 61%;
  width: clamp(84px, 10vw, 128px);
  height: clamp(54px, 6.4vw, 82px);
  border-radius: 52% 44% 46% 56%;
  background:
    radial-gradient(ellipse at 40% 28%, rgba(255, 255, 255, 0.44), transparent 28%),
    radial-gradient(ellipse at 58% 64%, rgba(3, 75, 80, 0.22), transparent 38%),
    linear-gradient(135deg, #8ce1b7, #1c9b95 60%, #0e6f83);
  box-shadow: inset -13px -11px 18px rgba(2, 70, 76, 0.24), inset 12px 11px 18px rgba(255, 255, 255, 0.2);
  animation: lagoonTurtleCruiseLeft 30s linear infinite -8s;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--turtle::before {
  left: -20%;
  top: 31%;
  width: 31%;
  height: 38%;
  border-radius: 54% 44% 48% 58%;
  background:
    radial-gradient(circle at 35% 38%, #073c46 0 3px, transparent 4px),
    linear-gradient(135deg, #90e5bc, #27a994);
  animation: lagoonTurtleHeadBob 3s ease-in-out infinite;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--turtle::after {
  left: 16%;
  top: 12%;
  width: 66%;
  height: 76%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, 0.2), transparent 28%),
    conic-gradient(from 32deg, rgba(7, 102, 110, 0.34) 0 12%, transparent 12% 30%, rgba(7, 102, 110, 0.32) 30% 42%, transparent 42% 68%, rgba(7, 102, 110, 0.3) 68% 82%, transparent 82% 100%);
  animation: lagoonShellPulse 4.8s ease-in-out infinite;
}

.invite-flow-preview[data-theme="rainbow-art"] {
  --theme-bg: linear-gradient(145deg, #fff8df 0%, #ffeec5 42%, #f6d8ff 100%);
  --theme-pattern:
    linear-gradient(20deg, transparent 0 55%, rgba(255, 106, 106, 0.54) 55% 61%, transparent 61%),
    linear-gradient(34deg, transparent 0 45%, rgba(255, 217, 83, 0.62) 45% 51%, transparent 51%),
    linear-gradient(48deg, transparent 0 38%, rgba(85, 216, 176, 0.55) 38% 43%, transparent 43%),
    linear-gradient(62deg, transparent 0 31%, rgba(106, 138, 255, 0.52) 31% 36%, transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.72), transparent 13rem);
  --theme-vignette:
    radial-gradient(circle at 8% 8%, rgba(255, 127, 96, 0.26), transparent 16rem),
    radial-gradient(circle at 92% 94%, rgba(124, 109, 240, 0.22), transparent 18rem);
  --flow-title: #242448;
  --flow-text: #34202d;
  --flow-muted: rgba(81, 57, 73, 0.78);
  --flow-card: rgba(255, 255, 255, 0.72);
  --content-panel: rgba(255, 255, 255, 0.72);
  --label-bg: linear-gradient(135deg, #ff645d, #ffbf47, #48c78e, #5b76e9);
  --label-ink: #ffffff;
  --detail-bg: rgba(255, 255, 255, 0.56);
  --button-bg: linear-gradient(135deg, #ff615d, #ffbf47);
  --button-bg-2: linear-gradient(135deg, #48c78e, #5b76e9);
  --button-bg-3: rgba(91, 118, 233, 0.52);
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-a {
  display: block;
  right: -6px;
  top: 38px;
  width: 280px;
  height: 158px;
  border-radius: 176px 176px 0 0;
  background: conic-gradient(from 180deg at 50% 100%, #ff5c5c, #ffb342, #f8f172, #5ed884, #57a9ff, #8a65db, #ff5c5c);
  -webkit-mask: radial-gradient(ellipse at 50% 100%, transparent 0 42%, #000 43% 100%);
  mask: radial-gradient(ellipse at 50% 100%, transparent 0 42%, #000 43% 100%);
  opacity: 0.93;
  transform: rotate(4deg);
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-b {
  display: block;
  right: 86px;
  bottom: 110px;
  width: 132px;
  height: 104px;
  border-radius: 58% 42% 55% 45%;
  background: #fff0c9;
  box-shadow: 0 0 0 10px rgba(104, 65, 35, 0.12) inset, 0 20px 44px rgba(86, 45, 49, 0.12);
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-b::before {
  left: 26px;
  top: 23px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #ff645d;
  box-shadow: 34px 2px 0 #ffbf47, 62px 28px 0 #48c78e, 10px 50px 0 #5b76e9;
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-c {
  display: block;
  left: 28px;
  top: 52px;
  width: 118px;
  height: 18px;
  border-radius: 999px;
  background: #1e2635;
  transform: rotate(-18deg);
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-prop-c::before {
  right: -40px;
  top: -11px;
  width: 52px;
  height: 40px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: linear-gradient(90deg, #d79b57, #ffe3a6 66%, #1e2635 67%);
}

.invite-flow-preview[data-theme="superhero"] {
  --theme-bg: linear-gradient(135deg, #1451bd 0 48%, #e83e42 48% 100%);
  --theme-pattern:
    radial-gradient(circle at 80% 16%, rgba(255, 231, 91, 0.95) 0 3px, transparent 4px),
    radial-gradient(circle at 83% 20%, rgba(255, 231, 91, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 24%, rgba(255, 231, 91, 0.95) 0 2px, transparent 3px),
    repeating-radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-38deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 28px);
  --theme-vignette:
    radial-gradient(circle at 85% 20%, rgba(255, 224, 58, 0.32), transparent 14rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 60%);
  --flow-title: #fff4a3;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.88);
  --flow-card: rgba(25, 24, 60, 0.74);
  --content-panel: rgba(11, 38, 100, 0.55);
  --panel-border: rgba(255, 255, 255, 0.18);
  --label-bg: linear-gradient(135deg, #ffe75b, #ff973c);
  --label-ink: #25133b;
  --detail-bg: rgba(255, 255, 255, 0.11);
  --detail-border: rgba(255, 255, 255, 0.16);
  --detail-label: rgba(255, 255, 255, 0.72);
  --button-bg: linear-gradient(135deg, #ffe75b, #ff973c);
  --button-ink: #23113d;
  --button-bg-2: rgba(255, 255, 255, 0.21);
  --button-bg-3: rgba(255, 255, 255, 0.13);
}

.invite-flow-preview[data-theme="superhero"] .flow-prop-a {
  display: grid;
  right: 18px;
  top: 44px;
  width: 220px;
  height: 220px;
  place-items: center;
  background: #ffe75b;
  clip-path: polygon(50% 0, 61% 35%, 97% 18%, 74% 50%, 100% 78%, 64% 67%, 50% 100%, 36% 67%, 0 78%, 26% 50%, 3% 18%, 39% 35%);
  color: #e83e42;
  filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.2));
  font-size: 2rem;
  font-weight: 1000;
  letter-spacing: -0.06em;
  text-shadow: 2px 2px 0 #fff;
  transform: rotate(8deg);
}

.invite-flow-preview[data-theme="superhero"] .flow-prop-a::before {
  content: "POW!";
  position: static;
}

.invite-flow-preview[data-theme="superhero"] .flow-prop-b {
  display: block;
  right: -38px;
  bottom: -34px;
  width: 250px;
  height: 250px;
  border-radius: 44% 0 0 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08));
  clip-path: polygon(15% 0, 100% 18%, 100% 100%, 0 100%);
  opacity: 0.48;
}

.invite-flow-preview[data-theme="superhero"] .flow-prop-c {
  display: block;
  left: 28px;
  top: 32px;
  width: 140px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 24px 40px 0 rgba(255, 255, 255, 0.36), 6px 80px 0 rgba(255, 255, 255, 0.25);
  transform: rotate(-18deg);
}

.invite-flow-preview[data-theme="zoo-safari"] {
  --flow-mobile-character-right: clamp(-54px, -10vw, -30px);
  --flow-mobile-character-top: clamp(-2px, 1vw, 12px);
  --flow-mobile-character-width: clamp(246px, 74vw, 328px);
  --flow-mobile-character-height: clamp(294px, 88vw, 408px);
  --flow-mobile-character-copy-offset: clamp(128px, 34vw, 172px);
  --theme-bg:
    linear-gradient(90deg, rgba(255, 242, 192, 0.18), rgba(255, 255, 255, 0.08) 42%, rgba(130, 83, 29, 0.14)),
    url("/assets/birthday-invites/zoo-safari-cinematic-bg.png") center / cover no-repeat;
  --theme-pattern:
    linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 78px),
    radial-gradient(circle at 72% 18%, rgba(255, 236, 157, 0.22), transparent 12rem);
  --theme-vignette:
    linear-gradient(90deg, rgba(73, 48, 16, 0.26), transparent 26%, transparent 74%, rgba(73, 48, 16, 0.26)),
    linear-gradient(180deg, rgba(255, 235, 161, 0.06), rgba(46, 33, 13, 0.18));
  --flow-title: #563813;
  --flow-text: #392811;
  --flow-muted: rgba(61, 43, 17, 0.78);
  --flow-card: rgba(255, 239, 190, 0.76);
  --content-panel: rgba(255, 239, 190, 0.72);
  --panel-border: rgba(255, 255, 255, 0.52);
  --label-bg: linear-gradient(135deg, #6e8f36, #d79628);
  --label-ink: #ffffff;
  --detail-bg: rgba(255, 248, 220, 0.64);
  --detail-border: rgba(255, 255, 255, 0.44);
  --button-bg: linear-gradient(135deg, #6e8f36, #e2a43c);
  --button-bg-2: rgba(118, 142, 58, 0.7);
  --button-bg-3: rgba(181, 128, 40, 0.58);
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-a {
  display: none;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 26px;
  z-index: 1;
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  filter: none;
  opacity: 0;
  animation: none;
}

.safari-premium-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: #d8efe5;
}

.invite-flow-preview[data-theme="zoo-safari"][data-premium-video="safari"] .safari-premium-video {
  display: block;
}

.invite-flow-preview[data-theme="zoo-safari"][data-premium-video="safari"] .flow-theme-scene::before,
.invite-flow-preview[data-theme="zoo-safari"][data-premium-video="safari"] .flow-theme-scene::after {
  background: none;
  opacity: 0;
  animation: none;
}

.invite-flow-preview[data-theme="zoo-safari"][data-premium-video="safari"] .flow-prop,
.invite-flow-preview[data-theme="zoo-safari"][data-premium-video="safari"] .flow-safari-actors,
.invite-flow-preview[data-theme="zoo-safari"][data-premium-video="safari"] .safari-actor,
.invite-flow-preview[data-theme="zoo-safari"][data-premium-video="safari"] .safari-bird {
  display: none !important;
  animation: none !important;
}

.safari-scene-actors,
.safari-actor,
.safari-bird {
  position: absolute;
  display: none;
  pointer-events: none;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-safari-actors {
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor {
  display: block;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  filter:
    drop-shadow(0 12px 16px rgba(75, 45, 13, 0.18))
    saturate(1.04);
  opacity: 0.72;
  will-change: transform;
}

.invite-flow-preview[data-theme="zoo-safari"] :where(
  .safari-actor--giraffe,
  .safari-actor--zebra,
  .safari-actor--featured-character
) {
  display: none !important;
  animation: none !important;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor::before,
.invite-flow-preview[data-theme="zoo-safari"] .safari-actor::after,
.invite-flow-preview[data-theme="zoo-safari"] .safari-bird::before,
.invite-flow-preview[data-theme="zoo-safari"] .safari-bird::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-bird {
  left: -12%;
  top: 13%;
  z-index: 2;
  display: block;
  width: clamp(20px, 4.2vw, 42px);
  height: clamp(12px, 2.5vw, 26px);
  opacity: 0.62;
  filter: drop-shadow(0 6px 8px rgba(63, 42, 18, 0.16));
  animation: safariBirdFly 22s linear infinite;
  will-change: transform, opacity;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-bird::before,
.invite-flow-preview[data-theme="zoo-safari"] .safari-bird::after {
  top: 30%;
  width: 56%;
  height: 42%;
  border-radius: 100% 100% 0 0;
  border-top: clamp(2px, 0.55vw, 4px) solid rgba(69, 48, 24, 0.86);
  transform-origin: 100% 50%;
  animation: safariBirdWingFrames 720ms steps(4, end) infinite;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-bird::before {
  right: 50%;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-bird::after {
  left: 50%;
  transform-origin: 0 50%;
  animation-direction: reverse;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-bird--two {
  top: 22%;
  width: clamp(16px, 3.2vw, 32px);
  height: clamp(10px, 2vw, 21px);
  opacity: 0.44;
  animation-duration: 29s;
  animation-delay: -11s;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-bird--three {
  top: 8%;
  width: clamp(24px, 5vw, 48px);
  height: clamp(14px, 2.8vw, 28px);
  opacity: 0.5;
  animation-duration: 25s;
  animation-delay: -18s;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--giraffe {
  left: -5%;
  top: 18%;
  width: clamp(84px, 18vw, 150px);
  height: clamp(140px, 28vw, 240px);
  background-image: url("/assets/birthday-invites/zoo-safari-giraffe-actor.png");
  animation: safariGiraffeBrowse 18s ease-in-out infinite;
  animation-delay: -5s;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--giraffe::before {
  left: 48%;
  top: 9%;
  width: 28%;
  height: 34%;
  border-radius: 54% 46% 48% 52%;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 241, 166, 0.42), transparent 68%);
  transform-origin: 50% 100%;
  animation: safariGiraffeNeckFrames 2.4s steps(5, end) infinite;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--elephant {
  left: clamp(46%, 49vw, 55%);
  bottom: 24%;
  width: clamp(70px, 13vw, 112px);
  height: clamp(68px, 12vw, 106px);
  background-image: url("/assets/birthday-invites/zoo-safari-elephant-actor.png");
  opacity: 0.42;
  animation: safariElephantWalk 12s ease-in-out infinite;
  animation-delay: -5s;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--elephant::before {
  left: 16%;
  right: 14%;
  bottom: 12%;
  height: 18%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 18% 58%, rgba(56, 43, 28, 0.28) 0 11%, transparent 12%),
    radial-gradient(ellipse at 42% 60%, rgba(56, 43, 28, 0.24) 0 10%, transparent 11%),
    radial-gradient(ellipse at 63% 60%, rgba(56, 43, 28, 0.24) 0 10%, transparent 11%),
    radial-gradient(ellipse at 84% 58%, rgba(56, 43, 28, 0.28) 0 11%, transparent 12%);
  transform-origin: 50% 50%;
  animation: safariWalkFrameLow 1.15s steps(4, end) infinite;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--elephant::after {
  left: 4%;
  top: 48%;
  width: 28%;
  height: 16%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(95, 83, 70, 0.34), transparent);
  transform-origin: 100% 50%;
  animation: safariElephantTrunkFrames 1.8s steps(5, end) infinite;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--zebra {
  right: clamp(28px, 8vw, 86px);
  bottom: 37%;
  width: clamp(48px, 9vw, 82px);
  height: clamp(70px, 13vw, 120px);
  background-image: url("/assets/birthday-invites/zoo-safari-zebra-actor.png");
  opacity: 0.46;
  transform-origin: 50% 100%;
  animation: safariZebraWalk 9s ease-in-out infinite;
  animation-delay: -3s;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--zebra::before {
  left: 20%;
  right: 16%;
  bottom: 10%;
  height: 19%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 16% 62%, rgba(47, 37, 26, 0.38) 0 10%, transparent 11%),
    radial-gradient(ellipse at 38% 58%, rgba(47, 37, 26, 0.32) 0 9%, transparent 10%),
    radial-gradient(ellipse at 61% 60%, rgba(47, 37, 26, 0.32) 0 9%, transparent 10%),
    radial-gradient(ellipse at 84% 62%, rgba(47, 37, 26, 0.38) 0 10%, transparent 11%);
  animation: safariWalkFrameLow 900ms steps(4, end) infinite;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--zebra::after {
  left: 5%;
  bottom: 1%;
  width: 70%;
  height: 16%;
  border-radius: 50%;
  border: 2px solid rgba(95, 168, 191, 0.42);
  border-top-color: rgba(255, 255, 255, 0.36);
  background: radial-gradient(ellipse at 50% 50%, rgba(137, 211, 220, 0.2), transparent 62%);
  transform-origin: 50% 50%;
  animation: safariWaterDrinkFrames 5.8s steps(6, end) infinite;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--monkey {
  left: auto;
  right: clamp(14%, 20vw, 27%);
  top: 5%;
  z-index: 3;
  width: clamp(68px, 13vw, 116px);
  height: clamp(66px, 12vw, 112px);
  background-image: url("/assets/birthday-invites/zoo-safari-monkey-actor.png");
  transform-origin: 54% 18%;
  animation: safariMonkeyClimb 13s ease-in-out infinite;
  animation-delay: -3s;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--monkey::before {
  display: none;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--monkey::after {
  left: 22%;
  top: 46%;
  width: 58%;
  height: 18%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 16% 50%, rgba(73, 49, 26, 0.26), transparent 60%),
    radial-gradient(ellipse at 84% 50%, rgba(73, 49, 26, 0.26), transparent 60%);
  transform-origin: 50% 50%;
  animation: safariMonkeyArmFrames 900ms steps(4, end) infinite;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--jeep {
  --safari-jeep-start-x: 132px;
  --safari-jeep-start-y: -98px;
  --safari-jeep-start-scale: 0.56;
  --safari-jeep-early-x: 84px;
  --safari-jeep-early-y: -72px;
  --safari-jeep-early-scale: 0.68;
  --safari-jeep-mid-x: 28px;
  --safari-jeep-mid-y: -34px;
  --safari-jeep-mid-scale: 0.84;
  --safari-jeep-pre-end-x: -28px;
  --safari-jeep-pre-end-y: 8px;
  --safari-jeep-pre-end-scale: 1;
  --safari-jeep-end-x: -78px;
  --safari-jeep-end-y: 40px;
  --safari-jeep-end-scale: 1.12;
  left: clamp(46%, 53vw, 58%);
  bottom: -5%;
  width: clamp(96px, 17vw, 156px);
  height: clamp(74px, 14vw, 122px);
  background-image: url("/assets/birthday-invites/zoo-safari-jeep-actor.png");
  opacity: 0.6;
  transform-origin: 50% 100%;
  animation: safariJeepRoll 10.5s linear infinite;
  animation-delay: 0s;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--jeep::before {
  display: none;
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--jeep::after {
  left: -24%;
  bottom: 8%;
  width: 54%;
  height: 22%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 78% 50%, rgba(219, 183, 107, 0.22), transparent 64%),
    radial-gradient(ellipse at 42% 52%, rgba(219, 183, 107, 0.14), transparent 72%);
  filter: blur(5px);
  opacity: 0.38;
  animation: safariDustFrames 1.2s steps(5, end) infinite;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-a::before,
.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-a::after {
  display: none;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-b {
  display: block;
  inset: 0 0 auto 0;
  width: auto;
  height: 36%;
  border-radius: 0;
  background:
    linear-gradient(110deg, transparent 0 30%, rgba(255, 244, 180, 0.3) 31% 32%, transparent 33% 100%),
    linear-gradient(100deg, transparent 0 46%, rgba(255, 255, 255, 0.18) 47% 48%, transparent 49% 100%);
  opacity: 0.7;
  animation: safariLightSweep 12s ease-in-out infinite alternate;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-c {
  display: block;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: auto;
  height: 28%;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 18% 88%, rgba(212, 169, 86, 0.28), transparent 24%),
    radial-gradient(ellipse at 82% 90%, rgba(212, 169, 86, 0.22), transparent 25%),
    linear-gradient(180deg, transparent, rgba(190, 128, 42, 0.18));
  opacity: 0.9;
  animation: safariGroundGlow 10s ease-in-out infinite alternate;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-c::after {
  content: "";
  position: absolute;
  right: clamp(5%, 10vw, 16%);
  bottom: clamp(14px, 4vw, 38px);
  width: clamp(110px, 24vw, 210px);
  height: clamp(34px, 8vw, 64px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 40% 38%, rgba(255, 255, 255, 0.28), transparent 38%),
    radial-gradient(ellipse at 50% 50%, rgba(83, 170, 190, 0.5), rgba(61, 131, 154, 0.22) 58%, transparent 72%);
  filter: blur(0.4px);
  opacity: 0.72;
  animation: safariWaterShimmer 3.4s steps(5, end) infinite;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-prop-c::before {
  display: none;
}

.invite-flow-preview[data-theme="arcade-game"] {
  --theme-bg: linear-gradient(135deg, #15123f 0%, #2c145f 52%, #09051f 100%);
  --theme-pattern:
    linear-gradient(90deg, rgba(123, 255, 245, 0.12) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, rgba(255, 93, 207, 0.1) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 81% 24%, rgba(255, 93, 207, 0.48), transparent 13rem),
    radial-gradient(circle at 11% 86%, rgba(123, 255, 245, 0.28), transparent 15rem);
  --theme-vignette: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.2));
  --flow-title: #7bfff5;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.84);
  --flow-card: rgba(6, 5, 24, 0.75);
  --content-panel: rgba(11, 7, 38, 0.58);
  --panel-border: rgba(123, 255, 245, 0.25);
  --label-bg: linear-gradient(135deg, #ff5dcf, #7bfff5);
  --label-ink: #110725;
  --detail-bg: rgba(255, 255, 255, 0.08);
  --detail-border: rgba(123, 255, 245, 0.18);
  --detail-label: rgba(123, 255, 245, 0.86);
  --rsvp-border: rgba(255, 93, 207, 0.25);
  --button-bg: linear-gradient(135deg, #ff5dcf, #7bfff5);
  --button-ink: #140829;
  --button-bg-2: rgba(123, 255, 245, 0.2);
  --button-bg-3: rgba(255, 93, 207, 0.18);
}

.invite-flow-preview[data-theme="arcade-game"] .flow-prop-a {
  display: block;
  right: 34px;
  top: 48px;
  width: 164px;
  height: 206px;
  border-radius: 22px 22px 28px 28px;
  background: linear-gradient(180deg, #4e2b96 0 62%, #1c174a 62% 100%);
  box-shadow: 0 0 0 6px rgba(123, 255, 245, 0.26) inset, 0 0 32px rgba(255, 93, 207, 0.38);
}

.invite-flow-preview[data-theme="arcade-game"] .flow-prop-a::before {
  left: 24px;
  right: 24px;
  top: 28px;
  height: 84px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #7bfff5 0 8px, transparent 8px 16px) 12px 18px / 16px 16px no-repeat,
    linear-gradient(90deg, #ff5dcf 0 8px, transparent 8px 16px) 68px 44px / 16px 16px no-repeat,
    #120926;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.11) inset;
}

.invite-flow-preview[data-theme="arcade-game"] .flow-prop-a::after {
  left: 42px;
  bottom: 38px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ff5dcf;
  box-shadow: 48px 2px 0 #7bfff5, 24px -36px 0 -6px #ffe66b;
}

.invite-flow-preview[data-theme="arcade-game"] .flow-prop-b {
  display: block;
  right: 188px;
  top: 78px;
  width: 18px;
  height: 18px;
  background: #ffe66b;
  box-shadow: 36px 42px 0 #ff5dcf, -42px 84px 0 #7bfff5, 60px 130px 0 #ff5dcf, -12px 178px 0 #ffe66b;
}

.invite-flow-preview[data-theme="arcade-game"] .flow-prop-c {
  display: block;
  left: 18px;
  top: 24px;
  width: 174px;
  height: 54px;
  border: 1px solid rgba(123, 255, 245, 0.24);
  border-radius: 14px;
  background: rgba(2, 2, 18, 0.36);
}

.invite-flow-preview[data-theme="arcade-game"] .flow-prop-c::before {
  content: "PRESS START";
  display: grid;
  place-items: center;
  inset: 9px;
  border-radius: 9px;
  color: #7bfff5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 0 14px rgba(123, 255, 245, 0.9);
}

.flow-theme-age-badge,
.flow-theme-feature,
.flow-theme-feature::before,
.flow-theme-feature::after {
  position: absolute;
  display: none;
  pointer-events: none;
}

.flow-theme-age-badge,
.flow-theme-feature {
  z-index: 2;
}

.flow-theme-age-badge {
  left: 22px;
  top: 22px;
  min-width: 94px;
  min-height: 36px;
  place-items: center;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 0 14px;
  background: var(--label-bg);
  color: var(--label-ink);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.flow-theme-feature {
  z-index: 0;
  right: 28px;
  top: 74px;
  width: 154px;
  height: 154px;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.18));
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-theme-age-badge,
.invite-flow-preview:not([data-theme="candle-party"]) .flow-theme-feature,
.invite-flow-preview:not([data-theme="candle-party"]) .flow-theme-feature::before,
.invite-flow-preview:not([data-theme="candle-party"]) .flow-theme-feature::after {
  display: grid;
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-invite-copy {
  margin-top: 132px;
}

.invite-flow-preview[data-theme="princess-garden"] .flow-theme-feature {
  right: 28px;
  top: 58px;
  width: 138px;
  height: 90px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 56%),
    linear-gradient(135deg, #ffd969, #f9a831 72%, #ffe9a5);
  clip-path: polygon(0 100%, 9% 34%, 30% 74%, 50% 0, 70% 74%, 91% 34%, 100% 100%);
  transform: rotate(6deg);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-theme-feature::before {
  left: 12px;
  right: 12px;
  bottom: -12px;
  height: 22px;
  border-radius: 999px;
  background: #e888c8;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35) inset;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-theme-feature {
  right: 12px;
  top: 96px;
  width: 200px;
  height: 112px;
  border-radius: 60% 55% 48% 50%;
  background:
    radial-gradient(circle at 78% 34%, #31572b 0 6px, transparent 7px),
    linear-gradient(145deg, #74aa59, #4f873c);
  box-shadow:
    inset 0 -18px 0 rgba(58, 105, 44, 0.22),
    0 28px 60px rgba(64, 44, 27, 0.18);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-theme-feature::before {
  right: 168px;
  top: -34px;
  width: 68px;
  height: 100px;
  border-radius: 54% 54% 32% 58%;
  background: linear-gradient(135deg, #78b75f, #4c8239);
  transform: rotate(-20deg);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-theme-feature::after {
  right: -58px;
  top: 24px;
  width: 94px;
  height: 38px;
  border-radius: 999px 8px 999px 999px;
  background: #5e9a46;
  transform: rotate(18deg);
}

.invite-flow-preview[data-theme="sports-day"] .flow-theme-feature {
  right: 36px;
  top: 64px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 45%, #173129 45% 55%, transparent 55%),
    linear-gradient(0deg, transparent 45%, #173129 45% 55%, transparent 55%),
    #f9fff4;
  box-shadow: 0 0 0 8px rgba(18, 50, 41, 0.55) inset;
}

.invite-flow-preview[data-theme="sports-day"] .flow-theme-feature::before {
  inset: -18px;
  border: 7px solid rgba(255, 255, 255, 0.74);
  border-left: 0;
  border-bottom: 0;
}

.invite-flow-preview[data-theme="space-rocket"] .flow-theme-feature {
  right: 52px;
  top: 54px;
  width: 78px;
  height: 184px;
  border-radius: 48px 48px 28px 28px;
  background:
    radial-gradient(circle at 50% 30%, #abedff 0 17px, #2458bd 18px 22px, transparent 23px),
    linear-gradient(90deg, #fdf8ef 0 38%, #d9e2ff 38% 63%, #ffffff 63% 100%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  transform: rotate(27deg);
}

.invite-flow-preview[data-theme="space-rocket"] .flow-theme-feature::before {
  left: 20px;
  bottom: -86px;
  width: 38px;
  height: 96px;
  border-radius: 60% 60% 45% 45%;
  background: linear-gradient(#ffe263, #ff7b3f 50%, transparent 82%);
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-theme-feature {
  right: 36px;
  top: 56px;
  width: 132px;
  height: 190px;
  background: url("/assets/birthday-invites/mermaid-lagoon-3d.png") center bottom / contain no-repeat;
  filter:
    drop-shadow(0 18px 22px rgba(26, 99, 115, 0.24))
    drop-shadow(0 0 14px rgba(120, 229, 219, 0.32));
  animation: mermaidDetailsFloat 5.4s ease-in-out infinite;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-theme-feature::before,
.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-theme-feature::after {
  display: none;
}

.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="shark"] .flow-theme-feature {
  right: 8px;
  top: 34px;
  width: 168px;
  height: 224px;
  background-image: url("/assets/birthday-invites/mermaid-lagoon-shark-3d.png");
  transform: rotate(-3deg);
  animation-name: sharkDetailsFloat;
}

.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="axolotl"] .flow-theme-feature {
  right: 12px;
  top: 38px;
  width: 168px;
  height: 244px;
  background-image: url("/assets/birthday-invites/lagoon-axolotl-3d.png");
  transform: rotate(2deg);
  animation-name: mermaidDetailsFloat;
}

.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="blue-axolotl"] .flow-theme-feature {
  right: 4px;
  top: 38px;
  width: 182px;
  height: 236px;
  background-image: url("/assets/birthday-invites/lagoon-blue-axolotl-3d.png");
  transform: rotate(-1deg);
  animation-name: mermaidDetailsFloat;
}

.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="shark"] .flow-invite-copy h3 {
  max-width: min(100%, 320px);
}

.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="axolotl"] .flow-invite-copy h3 {
  max-width: min(100%, 320px);
}

.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="blue-axolotl"] .flow-invite-copy h3 {
  max-width: min(100%, 320px);
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-theme-feature {
  right: 10px;
  top: 66px;
  width: 250px;
  height: 142px;
  border-radius: 176px 176px 0 0;
  background: conic-gradient(from 180deg at 50% 100%, #ff5c5c, #ffb342, #f8f172, #5ed884, #57a9ff, #8a65db, #ff5c5c);
  -webkit-mask: radial-gradient(ellipse at 50% 100%, transparent 0 42%, #000 43% 100%);
  mask: radial-gradient(ellipse at 50% 100%, transparent 0 42%, #000 43% 100%);
  transform: rotate(4deg);
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-theme-feature::before {
  left: -94px;
  top: -16px;
  width: 124px;
  height: 18px;
  border-radius: 999px;
  background: #1e2635;
  transform: rotate(-18deg);
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-theme-feature::after {
  left: 22px;
  bottom: -42px;
  width: 116px;
  height: 86px;
  border-radius: 58% 42% 55% 45%;
  background:
    radial-gradient(circle at 28% 28%, #ff645d 0 9px, transparent 10px),
    radial-gradient(circle at 58% 30%, #ffbf47 0 9px, transparent 10px),
    radial-gradient(circle at 70% 64%, #48c78e 0 9px, transparent 10px),
    #fff0c9;
  box-shadow: 0 0 0 8px rgba(104, 65, 35, 0.12) inset;
}

.invite-flow-preview[data-theme="superhero"] .flow-theme-feature {
  right: 20px;
  top: 62px;
  width: 178px;
  height: 178px;
  place-items: center;
  background: #ffe75b;
  clip-path: polygon(50% 0, 61% 35%, 97% 18%, 74% 50%, 100% 78%, 64% 67%, 50% 100%, 36% 67%, 0 78%, 26% 50%, 3% 18%, 39% 35%);
  color: #e83e42;
  font-size: 1.7rem;
  font-weight: 1000;
  letter-spacing: -0.06em;
  text-shadow: 2px 2px 0 #fff;
  transform: rotate(8deg);
}

.invite-flow-preview[data-theme="superhero"] .flow-theme-feature::before {
  content: "POW!";
  position: static;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-theme-feature {
  right: clamp(8px, 1.4vw, 18px);
  top: 42px;
  width: clamp(154px, 16vw, 182px);
  height: clamp(172px, 18vw, 202px);
  background: url("/assets/birthday-invites/zoo-safari-lion-3d.png") center top / contain no-repeat;
  filter:
    drop-shadow(0 14px 18px rgba(92, 57, 18, 0.24))
    drop-shadow(0 0 16px rgba(255, 219, 139, 0.28));
  animation: safariCharacterFloat 5.6s ease-in-out infinite;
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-theme-feature::before,
.invite-flow-preview[data-theme="zoo-safari"] .flow-theme-feature::after {
  display: none;
}

.invite-flow-preview[data-theme="zoo-safari"][data-theme-character="gazelle"] .flow-theme-feature {
  right: clamp(8px, 1.4vw, 18px);
  top: 44px;
  width: clamp(128px, 13vw, 152px);
  height: clamp(188px, 19vw, 222px);
  background-image: url("/assets/birthday-invites/zoo-safari-gazelle-3d.png");
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy h3 {
  max-width: min(100%, 250px);
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy p {
  max-width: min(100%, 300px);
}

@media (max-width: 640px) {
  .invite-flow-preview[data-theme="zoo-safari"] .flow-theme-feature {
    right: 14px;
    top: 34px;
    width: clamp(132px, 38vw, 176px);
    height: clamp(148px, 43vw, 208px);
  }

  .invite-flow-preview[data-theme="zoo-safari"][data-theme-character="gazelle"] .flow-theme-feature {
    right: 18px;
    top: 34px;
    width: clamp(112px, 34vw, 152px);
    height: clamp(162px, 48vw, 226px);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy h3 {
    max-width: 100%;
    margin-top: clamp(42px, 13vw, 72px);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy p {
    max-width: 100%;
  }
}

.invite-flow-preview[data-theme="arcade-game"] .flow-theme-age-badge {
  min-width: 154px;
  border-radius: 14px;
  background: rgba(2, 2, 18, 0.56);
  color: #7bfff5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  text-shadow: 0 0 14px rgba(123, 255, 245, 0.9);
}

.invite-flow-preview[data-theme="arcade-game"] .flow-invite-copy h3 {
  font-size: clamp(34px, 6.2vw, 46px);
}

.invite-flow-preview[data-theme="arcade-game"] .flow-theme-feature {
  right: 34px;
  top: 64px;
  width: 152px;
  height: 192px;
  border-radius: 22px 22px 28px 28px;
  background: linear-gradient(180deg, #4e2b96 0 62%, #1c174a 62% 100%);
  box-shadow: 0 0 0 6px rgba(123, 255, 245, 0.26) inset, 0 0 32px rgba(255, 93, 207, 0.38);
}

.invite-flow-preview[data-theme="arcade-game"] .flow-theme-feature::before {
  left: 22px;
  right: 22px;
  top: 26px;
  height: 78px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #7bfff5 0 8px, transparent 8px 16px) 12px 18px / 16px 16px no-repeat,
    linear-gradient(90deg, #ff5dcf 0 8px, transparent 8px 16px) 62px 40px / 16px 16px no-repeat,
    #120926;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.11) inset;
}

.invite-flow-preview[data-theme="arcade-game"] .flow-theme-feature::after {
  left: 40px;
  bottom: 34px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ff5dcf;
  box-shadow: 46px 2px 0 #7bfff5, 24px -34px 0 -6px #ffe66b;
}

@media (max-width: 760px) {
  .flow-theme-age-badge {
    left: 16px;
    top: 16px;
    min-width: 78px;
    min-height: 32px;
    padding: 0 10px;
    font-size: 10px;
  }

  .flow-theme-feature {
    top: 72px;
    right: 12px;
    transform: scale(0.78);
    transform-origin: top right;
  }

  .invite-flow-preview:not([data-theme="candle-party"]) .flow-invite-copy {
    margin-top: 118px;
  }

  .invite-flow-preview[data-theme="mermaid-lagoon"] .flow-theme-feature {
    right: 10px;
    top: 24px;
    width: clamp(82px, 24vw, 102px);
    height: clamp(118px, 36vw, 154px);
    transform: none;
  }

  .invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="shark"] .flow-theme-feature {
    right: -8px;
    top: 18px;
    width: clamp(112px, 34vw, 144px);
    height: clamp(152px, 44vw, 190px);
    transform: rotate(-3deg);
  }

  .invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="axolotl"] .flow-theme-feature {
    right: -2px;
    top: 20px;
    width: clamp(112px, 34vw, 146px);
    height: clamp(168px, 48vw, 206px);
    transform: rotate(2deg);
  }

  .invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="blue-axolotl"] .flow-theme-feature {
    right: -8px;
    top: 20px;
    width: clamp(122px, 36vw, 156px);
    height: clamp(160px, 45vw, 202px);
    transform: rotate(-1deg);
  }

  .invite-flow-preview[data-theme="mermaid-lagoon"] .flow-invite-copy {
    margin-top: clamp(142px, 38vw, 168px);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-theme-feature {
    right: var(--flow-mobile-character-right);
    top: var(--flow-mobile-character-top);
    width: var(--flow-mobile-character-width);
    height: var(--flow-mobile-character-height);
    transform: none;
  }

  .invite-flow-preview[data-theme="zoo-safari"][data-theme-character="gazelle"] .flow-theme-feature {
    right: var(--flow-mobile-character-right);
    top: var(--flow-mobile-character-top);
    width: var(--flow-mobile-character-width);
    height: var(--flow-mobile-character-height);
    transform: none;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy {
    margin-top: var(--flow-mobile-character-copy-offset);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy h3 {
    margin-top: 0;
    max-width: 100%;
  }

  .invite-flow-preview[data-theme="zoo-safari"] {
    min-height: 1080px;
    background-position: center top;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-layout {
    align-content: start;
    gap: clamp(86px, 26vw, 118px);
    padding: 18px;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy {
    background: rgba(255, 242, 199, 0.66);
    backdrop-filter: blur(5px);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-rsvp-card {
    background: rgba(255, 242, 199, 0.72);
    backdrop-filter: blur(6px);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-bird--one {
    top: 62px;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-bird--two {
    top: 150px;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-bird--three {
    top: 30px;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--giraffe {
    left: -38%;
    top: 90px;
    width: 204px;
    height: 318px;
    opacity: 0.4;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--monkey {
    right: -9%;
    top: 42px;
    width: 114px;
    height: 108px;
    opacity: 0.66;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--elephant {
    left: 7%;
    top: clamp(720px, 190vw, 850px);
    bottom: auto;
    width: 88px;
    height: 78px;
    opacity: 0.38;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--zebra {
    right: 8%;
    top: clamp(780px, 206vw, 920px);
    bottom: auto;
    width: 66px;
    height: 96px;
    opacity: 0.4;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--jeep {
    --safari-jeep-start-x: 92px;
    --safari-jeep-start-y: -70px;
    --safari-jeep-start-scale: 0.58;
    --safari-jeep-early-x: 58px;
    --safari-jeep-early-y: -48px;
    --safari-jeep-early-scale: 0.7;
    --safari-jeep-mid-x: 18px;
    --safari-jeep-mid-y: -18px;
    --safari-jeep-mid-scale: 0.86;
    --safari-jeep-pre-end-x: -22px;
    --safari-jeep-pre-end-y: 18px;
    --safari-jeep-pre-end-scale: 1;
    --safari-jeep-end-x: -58px;
    --safari-jeep-end-y: 48px;
    --safari-jeep-end-scale: 1.1;
    left: 43%;
    top: clamp(940px, 246vw, 1080px);
    bottom: auto;
    width: 126px;
    height: 96px;
    opacity: 0.5;
    animation-duration: 9.5s;
    animation-delay: 0s;
  }

  .invite-flow-preview[data-theme="arcade-game"] .flow-theme-age-badge {
    min-width: 116px;
    font-size: 0.8rem;
  }
}

@keyframes flow-intro-slap {
  0% {
    opacity: 0;
    transform: translateY(-58px) scale(0.94) rotate(-2deg);
  }

  62% {
    opacity: 1;
    transform: translateY(8px) scale(1.02) rotate(1deg);
  }

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

@keyframes flow-success-pop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes flow-popper-bounce {
  from {
    transform: translateY(0) rotate(-4deg);
  }

  to {
    transform: translateY(-5px) rotate(4deg);
  }
}

@keyframes flow-firework-burst {
  0% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 1;
    transform: scale(0.4);
  }

  100% {
    box-shadow:
      0 -38px 0 -2px currentColor,
      28px -26px 0 -2px currentColor,
      40px 0 0 -2px currentColor,
      28px 28px 0 -2px currentColor,
      0 40px 0 -2px currentColor,
      -28px 28px 0 -2px currentColor,
      -40px 0 0 -2px currentColor,
      -28px -26px 0 -2px currentColor;
    opacity: 0;
    transform: scale(1.1);
  }
}

@keyframes flow-confetti-fall {
  0% {
    opacity: 0;
    transform: translateY(-18px) rotate(0deg);
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(88px) rotate(210deg);
  }
}

@keyframes flow-confetti-pop {
  from {
    transform: scale(0.72);
  }

  to {
    transform: scale(1.14);
  }
}

@keyframes mermaidDetailsFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

@keyframes sharkDetailsFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }

  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

@keyframes safariJeepDrive {
  from {
    transform: translate3d(-8vw, 0, 0) scale(0.86);
  }

  46% {
    opacity: 0.86;
    transform: translate3d(48vw, -5px, 0) scale(0.96);
  }

  to {
    opacity: 0.56;
    transform: translate3d(112vw, 4px, 0) scale(0.9);
  }
}

@keyframes safariDustTrail {
  from {
    opacity: 0.24;
    transform: translateX(0) scaleX(0.78);
  }

  to {
    opacity: 0.58;
    transform: translateX(-10px) scaleX(1.08);
  }
}

@keyframes safariTreeSway {
  0%,
  100% {
    transform: rotate(-1.4deg) translateY(0);
  }

  50% {
    transform: rotate(2deg) translateY(-4px);
  }
}

@keyframes safariBirdDrift {
  from {
    transform: translate3d(12vw, 0, 0);
  }

  to {
    transform: translate3d(-96vw, -10px, 0);
  }
}

@keyframes safariAnimalParade {
  from {
    transform: translate3d(-50%, 0, 0) scale(1.02);
    opacity: 0.72;
  }

  to {
    transform: translate3d(calc(-50% + 22px), -6px, 0) scale(1.06);
    opacity: 0.84;
  }
}

@keyframes safariLightSweep {
  from {
    transform: translate3d(-18px, 0, 0);
    opacity: 0.48;
  }

  to {
    transform: translate3d(20px, -3px, 0);
    opacity: 0.76;
  }
}

@keyframes safariGroundGlow {
  from {
    transform: translateY(6px) scale(1);
    opacity: 0.64;
  }

  to {
    transform: translateY(-4px) scale(1.03);
    opacity: 0.94;
  }
}

@keyframes safariGiraffeBrowse {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  42% {
    transform: translate3d(10px, -7px, 0) rotate(2deg);
  }

  68% {
    transform: translate3d(16px, 5px, 0) rotate(-3deg);
  }
}

@keyframes safariGiraffeNeckFrames {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0);
  }

  40% {
    transform: rotate(3deg) translateY(-5px);
  }

  70% {
    transform: rotate(-4deg) translateY(4px);
  }
}

@keyframes safariElephantWalk {
  0%,
  100% {
    transform: translate3d(0, 3px, 0) scale(0.82);
    opacity: 0.46;
  }

  32% {
    transform: translate3d(7px, -1px, 0) scale(0.84);
    opacity: 0.52;
  }

  64% {
    transform: translate3d(14px, 3px, 0) scale(0.83);
    opacity: 0.5;
  }

  82% {
    transform: translate3d(8px, 5px, 0) scale(0.82);
    opacity: 0.48;
  }
}

@keyframes safariWalkFrameLow {
  0%,
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 0.48;
  }

  25% {
    transform: translateX(4px) skewX(-8deg);
    opacity: 0.62;
  }

  50% {
    transform: translateX(0) skewX(7deg);
    opacity: 0.42;
  }

  75% {
    transform: translateX(-4px) skewX(-5deg);
    opacity: 0.6;
  }
}

@keyframes safariElephantTrunkFrames {
  0%,
  100% {
    transform: rotate(5deg) translateY(0);
  }

  40% {
    transform: rotate(-8deg) translateY(5px);
  }

  72% {
    transform: rotate(2deg) translateY(-4px);
  }
}

@keyframes safariZebraWalk {
  0%,
  100% {
    transform: translate3d(0, 2px, 0) rotate(-1deg) scale(0.9);
    opacity: 0.66;
  }

  26% {
    transform: translate3d(-10px, -2px, 0) rotate(1deg) scale(0.92);
    opacity: 0.74;
  }

  52% {
    transform: translate3d(-22px, 1px, 0) rotate(-2deg) scale(0.9);
    opacity: 0.7;
  }

  76% {
    transform: translate3d(-8px, 4px, 0) rotate(1deg) scale(0.88);
    opacity: 0.68;
  }
}

@keyframes safariWaterDrinkFrames {
  0%,
  100% {
    transform: translateY(0) scaleX(0.86);
    opacity: 0.28;
  }

  34% {
    transform: translateY(7px) scaleX(1.08);
    opacity: 0.74;
  }

  68% {
    transform: translateY(2px) scaleX(0.98);
    opacity: 0.42;
  }
}

@keyframes safariMonkeyClimb {
  0%,
  100% {
    transform: translate3d(0, 24px, 0) rotate(-5deg);
  }

  34% {
    transform: translate3d(8px, -26px, 0) rotate(5deg);
  }

  58% {
    transform: translate3d(-6px, -8px, 0) rotate(-2deg);
  }

  78% {
    transform: translate3d(10px, 14px, 0) rotate(4deg);
  }
}

@keyframes safariMonkeyArmFrames {
  0%,
  100% {
    transform: rotate(-12deg) translateY(0);
    opacity: 0.48;
  }

  50% {
    transform: rotate(14deg) translateY(-5px);
    opacity: 0.7;
  }
}

@keyframes safariJeepRoll {
  0% {
    transform: translate3d(var(--safari-jeep-start-x, 132px), var(--safari-jeep-start-y, -98px), 0) scale(var(--safari-jeep-start-scale, 0.56)) rotate(5deg);
    opacity: 0;
  }

  9% {
    opacity: 0.6;
  }

  28% {
    transform: translate3d(var(--safari-jeep-early-x, 84px), var(--safari-jeep-early-y, -72px), 0) scale(var(--safari-jeep-early-scale, 0.68)) rotate(3deg);
    opacity: 0.66;
  }

  58% {
    transform: translate3d(var(--safari-jeep-mid-x, 28px), var(--safari-jeep-mid-y, -34px), 0) scale(var(--safari-jeep-mid-scale, 0.84)) rotate(0deg);
    opacity: 0.7;
  }

  86% {
    transform: translate3d(var(--safari-jeep-pre-end-x, -28px), var(--safari-jeep-pre-end-y, 8px), 0) scale(var(--safari-jeep-pre-end-scale, 1)) rotate(-3deg);
    opacity: 0.52;
  }

  100% {
    transform: translate3d(var(--safari-jeep-end-x, -78px), var(--safari-jeep-end-y, 40px), 0) scale(var(--safari-jeep-end-scale, 1.12)) rotate(-5deg);
    opacity: 0;
  }
}

@keyframes safariWheelFrames {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(2px) rotate(12deg);
  }
}

@keyframes safariDustFrames {
  0%,
  100% {
    transform: translateX(0) scaleX(0.74);
    opacity: 0.28;
  }

  50% {
    transform: translateX(-18px) scaleX(1.18);
    opacity: 0.72;
  }
}

@keyframes safariWaterShimmer {
  0%,
  100% {
    transform: translateX(0) scaleX(0.94);
    opacity: 0.62;
  }

  50% {
    transform: translateX(10px) scaleX(1.08);
    opacity: 0.86;
  }
}

@keyframes safariBirdFly {
  0% {
    opacity: 0;
    transform: translate3d(-12vw, 8px, 0) scale(0.92);
  }

  12% {
    opacity: 0.62;
  }

  46% {
    transform: translate3d(54vw, -14px, 0) scale(1);
  }

  86% {
    opacity: 0.58;
  }

  100% {
    opacity: 0;
    transform: translate3d(116vw, 10px, 0) scale(0.86);
  }
}

@keyframes safariBirdWingFrames {
  0%,
  100% {
    transform: rotate(18deg) scaleY(0.72);
  }

  50% {
    transform: rotate(-18deg) scaleY(1.18);
  }
}

@keyframes safariCharacterFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-9px) rotate(2deg);
  }
}

@keyframes lagoonFishSwim {
  from {
    transform: translate3d(-8vw, 0, 0) scale(0.92);
  }

  48% {
    transform: translate3d(58vw, -16px, 0) scale(1);
  }

  to {
    transform: translate3d(116vw, 8px, 0) scale(0.94);
  }
}

@keyframes lagoonTurtleSwim {
  from {
    transform: translate3d(10vw, 0, 0) rotate(-3deg);
  }

  50% {
    transform: translate3d(-56vw, -12px, 0) rotate(3deg);
  }

  to {
    transform: translate3d(-116vw, 8px, 0) rotate(-2deg);
  }
}

@keyframes lagoonSwell {
  from {
    opacity: 0.42;
    transform: translate3d(-18px, 10px, 0) scale(1);
  }

  to {
    opacity: 0.7;
    transform: translate3d(16px, -8px, 0) scale(1.03);
  }
}

@keyframes lagoonFishCruiseRight {
  0% {
    opacity: 0;
    transform: translate3d(-18vw, 0, 0) rotate(-2deg) scale(0.92);
  }

  9% {
    opacity: 0.9;
  }

  42% {
    transform: translate3d(44vw, -20px, 0) rotate(2deg) scale(1);
  }

  78% {
    opacity: 0.88;
    transform: translate3d(86vw, 12px, 0) rotate(-1deg) scale(0.97);
  }

  100% {
    opacity: 0;
    transform: translate3d(124vw, -6px, 0) rotate(1deg) scale(0.9);
  }
}

@keyframes lagoonTailWag {
  0%,
  100% {
    transform: rotate(-13deg) scaleX(0.95);
  }

  50% {
    transform: rotate(14deg) scaleX(1.08);
  }
}

@keyframes lagoonFinPulse {
  0%,
  100% {
    transform: rotate(-10deg) translateY(0);
    opacity: 0.72;
  }

  50% {
    transform: rotate(11deg) translateY(2px);
    opacity: 0.96;
  }
}

@keyframes lagoonTurtleCruiseLeft {
  0% {
    opacity: 0;
    transform: translate3d(18vw, 0, 0) rotate(2deg) scale(0.92);
  }

  10% {
    opacity: 0.82;
  }

  46% {
    transform: translate3d(-44vw, -18px, 0) rotate(-3deg) scale(1);
  }

  82% {
    opacity: 0.78;
    transform: translate3d(-88vw, 10px, 0) rotate(2deg) scale(0.96);
  }

  100% {
    opacity: 0;
    transform: translate3d(-126vw, -4px, 0) rotate(-2deg) scale(0.9);
  }
}

@keyframes lagoonTurtleHeadBob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-4px) rotate(-5deg);
  }
}

@keyframes lagoonShellPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.96;
    transform: scale(1.02);
  }
}

.price-card,
.url-card,
.readiness-card,
.publish-status-card,
.preview-share-card,
.launch-review-card,
.confirmation-card {
  display: grid;
  gap: 8px;
}

.publish-status-card,
.preview-share-card,
.launch-review-card {
  border-color: rgba(5, 107, 140, 0.16);
  background:
    radial-gradient(circle at 96% 0%, rgba(102, 200, 189, 0.2), transparent 36%),
    rgba(255, 253, 247, 0.95);
}

.publish-status-card h2,
.preview-share-card h2,
.launch-review-card h2 {
  margin: 0;
  color: var(--invite-forest);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1;
}

.publish-status-card p,
.preview-share-card p,
.readiness-card p,
.launch-review-card p {
  margin: 0;
  color: var(--invite-muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.launch-review-card > span {
  color: #956d23;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preview-share-card > span {
  color: #056b8c;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preview-share-card a {
  color: var(--invite-forest);
  font-size: 12px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.preview-share-card .secondary-cta {
  justify-self: start;
  min-height: 38px;
  padding: 9px 16px;
  font-size: 12px;
}

.preview-share-card small,
.url-card-note {
  color: var(--invite-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.url-link-line {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(6, 91, 74, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.url-link-line span {
  color: #69776f;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.url-link-line strong {
  color: var(--invite-forest);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.launch-review-card ol {
  display: grid;
  gap: 8px;
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
}

.launch-review-card li {
  position: relative;
  min-height: 34px;
  border: 1px solid rgba(20, 63, 59, 0.12);
  border-radius: 8px;
  padding: 8px 10px 8px 34px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--invite-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.launch-review-card li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(20, 63, 59, 0.24);
  border-radius: 999px;
  background: #fff;
}

.launch-review-card li.is-ready {
  color: var(--invite-forest);
  border-color: rgba(5, 107, 140, 0.2);
  background: linear-gradient(135deg, rgba(151, 225, 217, 0.4), rgba(255, 255, 255, 0.72));
}

.launch-review-card li.is-ready::before {
  border-color: var(--invite-teal);
  background:
    radial-gradient(circle at 50% 50%, var(--invite-forest) 0 40%, transparent 43%),
    #fff;
}

.publish-state-grid {
  display: grid;
  gap: 7px;
}

.publish-state-grid span {
  display: block;
  border: 1px solid rgba(20, 63, 59, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--invite-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.32;
}

.publish-status-card[data-publish-state="ready"] .status-pill,
.publish-status-card[data-publish-state="manual"] .status-pill {
  border-color: rgba(5, 107, 140, 0.28);
  background: linear-gradient(135deg, rgba(151, 225, 217, 0.82), rgba(255, 242, 184, 0.84));
}

.url-card strong {
  color: var(--invite-forest);
  overflow-wrap: anywhere;
}

.readiness-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.readiness-card li {
  position: relative;
  padding-left: 25px;
}

.readiness-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(20, 63, 59, 0.26);
  border-radius: 999px;
  background: #fff;
}

.readiness-card li.is-ready {
  color: var(--invite-forest);
  font-weight: 850;
}

.readiness-card li.is-ready::before {
  border-color: var(--invite-teal);
  background:
    radial-gradient(circle at 50% 50%, var(--invite-forest) 0 40%, transparent 43%),
    #fff;
}

.confirmation-card textarea {
  width: 100%;
  border: 1px solid rgba(20, 63, 59, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--invite-ink);
  font: inherit;
  resize: vertical;
}

.published-link-panel {
  display: grid;
  gap: 10px;
}

.published-link-panel article {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(20, 63, 59, 0.12);
  border-radius: 8px;
  padding: 11px;
  background:
    radial-gradient(circle at 96% 0%, rgba(151, 225, 217, 0.28), transparent 38%),
    rgba(255, 255, 255, 0.7);
}

.published-link-panel article:first-child {
  border-color: rgba(6, 75, 58, 0.26);
  background:
    radial-gradient(circle at 94% 0%, rgba(151, 225, 217, 0.42), transparent 38%),
    linear-gradient(135deg, rgba(255, 253, 247, 0.98), rgba(237, 253, 249, 0.88));
  box-shadow: 0 14px 34px rgba(6, 75, 58, 0.1);
}

.published-link-panel article:first-child span::after {
  content: "Share this now";
  display: inline-flex;
  margin-left: 8px;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(6, 75, 58, 0.12);
  color: var(--invite-forest);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.published-link-panel span {
  color: var(--invite-muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.published-link-panel small {
  color: rgba(20, 63, 59, 0.68);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.published-link-panel a {
  color: var(--invite-forest);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.published-link-panel .secondary-cta {
  justify-self: start;
  min-height: 36px;
  padding: 8px 14px;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .birthday-selfserve-hero,
  .birthday-builder-grid,
  .preview-card {
    grid-template-columns: 1fr;
  }

  .birthday-live-preview {
    position: static;
  }

  .public-theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .theme-character-grid {
    grid-template-columns: 1fr;
  }

  .builder-journey-card {
    grid-template-columns: 1fr;
  }

  .journey-preview-link {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .birthday-invite-public {
    padding-bottom: 104px;
  }

  .birthday-selfserve-hero,
  .birthday-builder-grid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .birthday-selfserve-hero {
    padding-top: 16px;
  }

  .birthday-hero-summary {
    display: none;
  }

  .builder-two-col,
  .public-photo-row,
  .retention-grid,
  .preview-rsvp-actions {
    grid-template-columns: 1fr;
  }

  .public-theme-grid {
    grid-template-columns: 1fr;
  }

  .birthday-hero-copy h1 {
    font-size: 38px;
  }

  .birthday-hero-copy p {
    font-size: 17px;
  }

  .birthday-hero-summary strong,
  .price-card strong {
    font-size: 46px;
  }

  .builder-panel-heading h2 {
    font-size: 30px;
  }

  .preview-copy h2 {
    font-size: 34px;
  }

  .builder-panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .builder-journey-card {
    gap: 12px;
    padding: 14px;
  }

  .builder-journey-card h2 {
    font-size: 26px;
  }

  .journey-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-builder-dock {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 2100;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(5, 107, 140, 0.2);
    border-radius: 14px;
    padding: 10px;
    background: rgba(255, 253, 247, 0.94);
    box-shadow: 0 18px 48px rgba(8, 34, 33, 0.22);
    backdrop-filter: blur(14px) saturate(1.08);
  }

  .mobile-builder-dock strong {
    display: block;
    margin-top: 3px;
    color: var(--invite-forest);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
  }

  .mobile-builder-dock .primary-cta,
  .mobile-builder-dock .secondary-cta {
    min-height: 42px;
    border: 0;
    padding: 0 12px;
    white-space: nowrap;
  }

  .invite-flow-preview {
    min-height: 880px;
  }

  .flow-screen--intro {
    padding: 18px;
  }

  .flow-intro-frame {
    width: min(300px, 94%);
  }

  .flow-intro-photo {
    min-height: 370px;
  }

  .flow-invite-layout {
    padding: 18px;
  }

  .flow-invite-copy h3 {
    font-size: 38px;
  }

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

  .flow-details-grid div:nth-child(3),
  .flow-details-grid div:nth-child(5) {
    grid-column: auto;
  }

  .preview-rsvp-actions {
    grid-template-columns: 1fr;
  }

  .flow-rsvp-card {
    padding: 12px;
  }

  .flow-success-card {
    width: 94%;
    padding: 20px 16px;
  }
}

@media (max-width: 760px) {
  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-layout {
    gap: clamp(96px, 29vw, 128px);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy {
    border-color: rgba(255, 255, 255, 0.32);
    padding: 14px;
    background:
      radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.18), transparent 42%),
      linear-gradient(180deg, rgba(255, 250, 226, 0.58), rgba(255, 250, 226, 0.36));
    box-shadow: 0 18px 42px rgba(75, 45, 13, 0.1);
    backdrop-filter: blur(3px) saturate(1.08);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-theme-feature {
    right: var(--flow-mobile-character-right);
    top: var(--flow-mobile-character-top);
    width: var(--flow-mobile-character-width);
    height: var(--flow-mobile-character-height);
  }

  .invite-flow-preview[data-theme="zoo-safari"][data-theme-character="gazelle"] .flow-theme-feature {
    right: var(--flow-mobile-character-right);
    top: var(--flow-mobile-character-top);
    width: var(--flow-mobile-character-width);
    height: var(--flow-mobile-character-height);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy h3 {
    margin-top: var(--flow-mobile-character-copy-offset);
    text-shadow:
      0 2px 0 rgba(255, 250, 226, 0.86),
      0 12px 30px rgba(255, 238, 167, 0.62);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy p {
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(255, 242, 199, 0.7);
    box-shadow: 0 14px 30px rgba(75, 45, 13, 0.1);
    backdrop-filter: blur(4px);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-details-grid div {
    background: rgba(255, 248, 220, 0.84);
    backdrop-filter: blur(5px);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-rsvp-card {
    background: rgba(255, 242, 199, 0.7);
    backdrop-filter: blur(5px);
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--giraffe {
    left: -38%;
    top: 90px;
    width: 204px;
    height: 318px;
    opacity: 0.4;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--monkey {
    right: -9%;
    top: 42px;
    width: 114px;
    height: 108px;
    opacity: 0.66;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--elephant {
    left: 7%;
    top: clamp(720px, 190vw, 850px);
    bottom: auto;
    width: 88px;
    height: 78px;
    opacity: 0.38;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--zebra {
    right: 8%;
    top: clamp(780px, 206vw, 920px);
    bottom: auto;
    width: 66px;
    height: 96px;
    opacity: 0.4;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--jeep {
    --safari-jeep-start-x: 92px;
    --safari-jeep-start-y: -70px;
    --safari-jeep-start-scale: 0.58;
    --safari-jeep-early-x: 58px;
    --safari-jeep-early-y: -48px;
    --safari-jeep-early-scale: 0.7;
    --safari-jeep-mid-x: 18px;
    --safari-jeep-mid-y: -18px;
    --safari-jeep-mid-scale: 0.86;
    --safari-jeep-pre-end-x: -22px;
    --safari-jeep-pre-end-y: 18px;
    --safari-jeep-pre-end-scale: 1;
    --safari-jeep-end-x: -58px;
    --safari-jeep-end-y: 48px;
    --safari-jeep-end-scale: 1.1;
    left: 43%;
    top: clamp(940px, 246vw, 1080px);
    bottom: auto;
    width: 126px;
    height: 96px;
    opacity: 0.5;
    animation-duration: 9.5s;
    animation-delay: 0s;
  }
}

.flow-character-masthead {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  min-height: clamp(190px, 31vw, 290px);
  margin: clamp(-58px, -5vw, -24px) 0 8px;
  isolation: isolate;
}

.invite-flow-preview .flow-character-masthead .flow-theme-feature {
  position: relative;
  inset: auto;
  z-index: 1;
  display: block;
  width: clamp(190px, 31vw, 290px);
  height: clamp(170px, 28vw, 260px);
  pointer-events: none;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  filter:
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.18))
    drop-shadow(0 0 16px color-mix(in srgb, var(--theme-accent, #66c8bd) 28%, transparent));
  transform: none;
  transform-origin: center;
}

.invite-flow-preview .flow-character-masthead .flow-theme-age-badge {
  position: absolute;
  left: calc(50% + clamp(42px, 8vw, 72px));
  right: auto;
  top: auto;
  bottom: clamp(64px, 12vw, 90px);
  z-index: 4;
  display: grid;
  width: clamp(52px, 10vw, 68px);
  min-width: clamp(52px, 10vw, 68px);
  height: clamp(52px, 10vw, 68px);
  min-height: clamp(52px, 10vw, 68px);
  isolation: isolate;
  place-items: center;
  place-content: center;
  border: 4px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  padding: 6px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98) 0 18%, rgba(255, 255, 255, 0) 42%),
    conic-gradient(from 130deg, color-mix(in srgb, var(--theme-accent, #66c8bd) 70%, #ffffff), #ffffff, color-mix(in srgb, var(--theme-accent, #66c8bd) 82%, #eec86f), #ffffff, color-mix(in srgb, var(--theme-accent, #66c8bd) 70%, #ffffff)),
    radial-gradient(circle, #ffffff 0 58%, color-mix(in srgb, var(--theme-soft, #dff7f4) 70%, #ffffff));
  color: color-mix(in srgb, var(--theme-accent, #66c8bd) 78%, #b061bc);
  font-size: clamp(15px, 3vw, 20px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  text-transform: none;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.16),
    0 0 0 2px color-mix(in srgb, var(--theme-accent, #66c8bd) 36%, #ffffff),
    0 0 28px color-mix(in srgb, var(--theme-accent, #66c8bd) 32%, transparent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateX(-50%) rotate(5deg);
  transform-origin: center;
  animation: flowAgeMedallionFloat 5.8s ease-in-out infinite;
}

.invite-flow-preview .flow-character-masthead .flow-theme-age-badge::before {
  content: none;
  display: none;
}

.invite-flow-preview .flow-character-masthead .flow-theme-age-badge::after {
  content: none;
  display: none;
}

.flow-character-bubble {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 3px;
  max-width: min(100%, 320px);
  border: 1px solid color-mix(in srgb, var(--theme-accent, #66c8bd) 42%, #ffffff);
  border-radius: 19px;
  padding: 9px 13px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--theme-soft, #dff7f4) 50%, #ffffff));
  color: var(--flow-text, #143f3b);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.14),
    0 0 22px color-mix(in srgb, var(--theme-accent, #66c8bd) 20%, transparent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.22;
  text-align: center;
  letter-spacing: 0;
  backdrop-filter: blur(8px);
  transform-origin: center -16px;
  animation:
    flowSpeechBubbleArrive 720ms ease-out both,
    flowSpeechBubbleDream 6.5s ease-in-out 1s infinite;
}

.flow-character-bubble::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  border-top: 1px solid color-mix(in srgb, var(--theme-accent, #66c8bd) 42%, #ffffff);
  border-left: 1px solid color-mix(in srgb, var(--theme-accent, #66c8bd) 42%, #ffffff);
  background: color-mix(in srgb, var(--theme-soft, #dff7f4) 42%, #ffffff);
  transform: translateX(-50%) rotate(45deg);
}

.flow-character-bubble::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 23px;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #66c8bd) 22%, transparent), transparent 62%);
  opacity: 0.74;
  filter: blur(7px);
}

.flow-character-bubble .speech-word {
  position: relative;
  z-index: 1;
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(7px) scale(0.96);
  animation: flowSpeechWordDream 640ms cubic-bezier(0.2, 0.82, 0.22, 1) forwards;
  animation-delay: calc(280ms + var(--speech-delay, 0ms));
}

.flow-character-bubble[data-chatter-active="true"] {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--theme-accent, #66c8bd) 62%, #ffffff);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.16),
    0 0 0 3px color-mix(in srgb, var(--theme-accent, #66c8bd) 15%, transparent),
    0 0 28px color-mix(in srgb, var(--theme-accent, #66c8bd) 28%, transparent);
}

.flow-character-bubble[data-chatter-active="true"]:hover,
.flow-character-bubble[data-chatter-active="true"]:focus-visible {
  outline: none;
  transform: translateY(-2px) scale(1.01);
}

.invite-flow-preview .flow-character-masthead .flow-theme-feature[data-chatter-active="true"] {
  pointer-events: auto;
  cursor: pointer;
}

.invite-flow-preview .flow-character-masthead .flow-theme-feature[data-chatter-active="true"]:hover {
  filter:
    drop-shadow(0 20px 26px rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 22px color-mix(in srgb, var(--theme-accent, #66c8bd) 36%, transparent))
    saturate(1.08);
}

.invite-flow-preview .flow-character-masthead .flow-theme-feature[data-chatter-active="true"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-accent, #66c8bd) 64%, #ffffff);
  outline-offset: 5px;
  border-radius: 18px;
}

.invite-flow-preview .flow-invite-copy {
  overflow: visible;
}

.invite-flow-preview:not([data-theme="candle-party"]) .flow-invite-copy,
.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-invite-copy,
.invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy {
  margin-top: 0;
}

.invite-flow-preview .flow-invite-copy h3,
.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="shark"] .flow-invite-copy h3,
.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="axolotl"] .flow-invite-copy h3,
.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="blue-axolotl"] .flow-invite-copy h3,
.invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy h3,
.invite-flow-preview.has-long-name .flow-invite-copy h3 {
  width: 100%;
  max-width: none;
  margin-top: 0;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
  hyphens: manual;
}

.invite-flow-preview .flow-invite-copy p,
.invite-flow-preview[data-theme="zoo-safari"] .flow-invite-copy p {
  width: 100%;
  max-width: none;
}

.invite-flow-preview[data-theme="candle-party"] .flow-character-masthead .flow-theme-feature {
  width: clamp(230px, 37vw, 340px);
  height: clamp(210px, 34vw, 320px);
  background:
    radial-gradient(ellipse at 17% 8%, #fff4a4 0 14px, #efb84f 15px 21px, transparent 22px),
    radial-gradient(ellipse at 39% 4%, #fff4a4 0 16px, #efb84f 17px 24px, transparent 25px),
    radial-gradient(ellipse at 61% 8%, #fff4a4 0 14px, #efb84f 15px 21px, transparent 22px),
    radial-gradient(ellipse at 82% 4%, #fff4a4 0 16px, #efb84f 17px 24px, transparent 25px),
    linear-gradient(180deg, transparent 0 17%, #caa4d2 18% 100%) 12% 13% / 13% 86% no-repeat,
    linear-gradient(180deg, transparent 0 10%, #ffc47e 11% 100%) 34% 6% / 15% 94% no-repeat,
    linear-gradient(180deg, transparent 0 17%, #ff8fa8 18% 100%) 57% 13% / 14% 86% no-repeat,
    linear-gradient(180deg, transparent 0 10%, #b8dc8c 11% 100%) 78% 6% / 13% 94% no-repeat;
}

.invite-flow-preview[data-theme="candle-party"] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme="candle-party"] .flow-character-masthead .flow-theme-feature::after,
.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-character-masthead .flow-theme-feature::after,
.invite-flow-preview[data-theme="zoo-safari"] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme="zoo-safari"] .flow-character-masthead .flow-theme-feature::after {
  display: none;
}

.invite-flow-preview[data-theme="mermaid-lagoon"] .flow-character-masthead .flow-theme-feature {
  width: clamp(150px, 25vw, 230px);
  height: clamp(250px, 41vw, 390px);
  background-image: url("/assets/birthday-invites/mermaid-lagoon-3d.png");
  transform: none;
}

.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="shark"] .flow-character-masthead .flow-theme-feature {
  width: clamp(230px, 38vw, 360px);
  height: clamp(220px, 35vw, 330px);
  background-image: url("/assets/birthday-invites/mermaid-lagoon-shark-3d.png");
  transform: rotate(-3deg);
}

.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="axolotl"] .flow-character-masthead .flow-theme-feature {
  width: clamp(260px, 42vw, 400px);
  height: clamp(280px, 45vw, 430px);
  background-image: url("/assets/birthday-invites/lagoon-axolotl-3d.png");
  transform: rotate(2deg);
}

.invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="blue-axolotl"] .flow-character-masthead .flow-theme-feature {
  width: clamp(280px, 45vw, 430px);
  height: clamp(280px, 45vw, 430px);
  background-image: url("/assets/birthday-invites/lagoon-blue-axolotl-3d.png");
  transform: rotate(-1deg);
}

.invite-flow-preview[data-theme="zoo-safari"] .flow-character-masthead .flow-theme-feature {
  width: clamp(260px, 43vw, 400px);
  height: clamp(230px, 37vw, 360px);
  background-image: url("/assets/birthday-invites/zoo-safari-lion-3d.png");
  transform: none;
}

.invite-flow-preview[data-theme="zoo-safari"][data-theme-character="gazelle"] .flow-character-masthead .flow-theme-feature {
  width: clamp(220px, 36vw, 340px);
  height: clamp(280px, 46vw, 430px);
  background-image: url("/assets/birthday-invites/zoo-safari-gazelle-3d.png");
}

.invite-flow-preview[data-theme="space-rocket"] .flow-character-masthead .flow-theme-feature {
  transform: rotate(24deg);
}

.invite-flow-preview[data-theme="rainbow-art"] .flow-character-masthead .flow-theme-feature {
  width: clamp(250px, 42vw, 370px);
  height: clamp(140px, 24vw, 220px);
  transform: rotate(3deg);
}

.invite-flow-preview[data-theme="superhero"] .flow-character-masthead .flow-theme-feature {
  width: clamp(200px, 34vw, 300px);
  height: clamp(200px, 34vw, 300px);
  transform: rotate(8deg);
}

.invite-flow-preview[data-theme="arcade-game"] .flow-character-masthead .flow-theme-age-badge {
  min-width: clamp(76px, 15vw, 108px);
  min-height: clamp(48px, 9vw, 64px);
  border-radius: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 760px) {
  .flow-character-masthead {
    min-height: clamp(210px, 62vw, 320px);
    margin-top: -12px;
  }

  .invite-flow-preview .flow-character-masthead .flow-theme-feature {
    width: clamp(230px, 72vw, 340px);
    height: clamp(200px, 64vw, 300px);
  }

  .invite-flow-preview[data-theme="mermaid-lagoon"] .flow-character-masthead .flow-theme-feature {
    width: clamp(170px, 52vw, 260px);
    height: clamp(280px, 84vw, 430px);
  }

  .invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="shark"] .flow-character-masthead .flow-theme-feature,
  .invite-flow-preview[data-theme="zoo-safari"] .flow-character-masthead .flow-theme-feature {
    width: clamp(270px, 82vw, 400px);
    height: clamp(240px, 72vw, 360px);
  }

  .invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="axolotl"] .flow-character-masthead .flow-theme-feature {
    width: clamp(270px, 82vw, 400px);
    height: clamp(300px, 90vw, 460px);
  }

  .invite-flow-preview[data-theme="mermaid-lagoon"][data-lagoon-character="blue-axolotl"] .flow-character-masthead .flow-theme-feature {
    width: clamp(290px, 86vw, 430px);
    height: clamp(300px, 90vw, 460px);
  }

  .invite-flow-preview[data-theme="zoo-safari"][data-theme-character="gazelle"] .flow-character-masthead .flow-theme-feature {
    width: clamp(230px, 68vw, 340px);
    height: clamp(300px, 90vw, 460px);
  }

  .invite-flow-preview .flow-character-masthead .flow-theme-age-badge {
    left: calc(50% + clamp(48px, 16vw, 66px));
    right: auto;
    bottom: clamp(72px, 22vw, 98px);
    transform: translateX(-50%) rotate(5deg);
  }

  .flow-character-bubble {
    max-width: 100%;
    border-radius: 17px;
  }

  .invite-flow-preview[data-theme="zoo-safari"] .flow-invite-layout {
    gap: clamp(18px, 6vw, 34px);
  }
}

@keyframes flowAgeMedallionFloat {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(5deg);
  }

  50% {
    transform: translateX(-50%) translateY(-3px) rotate(2deg);
  }
}

@keyframes flowSpeechBubbleArrive {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

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

@keyframes flowSpeechBubbleDream {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes flowSpeechWordDream {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(7px) scale(0.96);
  }

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

@media (prefers-reduced-motion: reduce) {
  .invite-flow-preview .flow-character-masthead .flow-theme-age-badge,
  .flow-character-bubble,
  .flow-character-bubble .speech-word {
    animation: none;
    opacity: 1;
    filter: none;
  }

  .invite-flow-preview .flow-character-masthead .flow-theme-age-badge {
    transform: translateX(-50%) rotate(5deg);
  }
}

/* Sports Day character pass: shared image cards for builder picker, preview, and live invite masthead. */
.theme-character-art--football,
.theme-character-art--baseball,
.theme-character-art--basketball,
.theme-character-art--soccer,
.theme-character-art--gymnastics,
.theme-character-art--dance,
.theme-character-art--allstar {
  border-color: rgba(255, 210, 99, 0.38);
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(180deg, #102e56, #061c2c);
}

.theme-character-art--football {
  --sports-character-image: url("/assets/birthday-invites/sports-day-football-cutout.png");
}

.theme-character-art--baseball {
  --sports-character-image: url("/assets/birthday-invites/sports-day-baseball-cutout.png");
}

.theme-character-art--basketball {
  --sports-character-image: url("/assets/birthday-invites/sports-day-basketball-cutout.png");
}

.theme-character-art--soccer {
  --sports-character-image: url("/assets/birthday-invites/sports-day-soccer-cutout.png");
}

.theme-character-art--gymnastics {
  --sports-character-image: url("/assets/birthday-invites/sports-day-gymnastics-cutout.png");
}

.theme-character-art--dance {
  --sports-character-image: url("/assets/birthday-invites/sports-day-dance-cutout.png");
}

.theme-character-art--allstar {
  --sports-character-image: url("/assets/birthday-invites/sports-day-allstar-cutout.png");
}

.theme-character-art--football::after,
.theme-character-art--baseball::after,
.theme-character-art--basketball::after,
.theme-character-art--soccer::after,
.theme-character-art--gymnastics::after,
.theme-character-art--dance::after,
.theme-character-art--allstar::after {
  inset: 3px;
  border-radius: 6px;
  background-image: var(--sports-character-image);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 20, 35, 0.28));
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="football"] {
  --sports-character-image: url("/assets/birthday-invites/sports-day-football-cutout.png");
  --sports-glow: rgba(69, 145, 255, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="baseball"] {
  --sports-character-image: url("/assets/birthday-invites/sports-day-baseball-cutout.png");
  --sports-glow: rgba(255, 117, 84, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="basketball"] {
  --sports-character-image: url("/assets/birthday-invites/sports-day-basketball-cutout.png");
  --sports-glow: rgba(255, 149, 52, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="soccer"] {
  --sports-character-image: url("/assets/birthday-invites/sports-day-soccer-cutout.png");
  --sports-glow: rgba(111, 210, 104, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="gymnastics"] {
  --sports-character-image: url("/assets/birthday-invites/sports-day-gymnastics-cutout.png");
  --sports-glow: rgba(255, 111, 188, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="dance"] {
  --sports-character-image: url("/assets/birthday-invites/sports-day-dance-cutout.png");
  --sports-glow: rgba(168, 107, 255, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="allstar"] {
  --sports-character-image: url("/assets/birthday-invites/sports-day-allstar-cutout.png");
  --sports-glow: rgba(255, 202, 79, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="mvp-captain"] {
  --sports-character-image: url("/assets/birthday-invites/sports-mvp-captain.png");
  --sports-glow: rgba(62, 138, 203, 0.4);
}

.preview-card[data-theme="sports-day"][data-theme-character] .preview-candles span:nth-child(1) {
  left: 50%;
  top: 24px;
  width: 126px;
  height: 126px;
  transform: translateX(-50%) rotate(-2deg);
  border: 0;
  border-radius: 0;
  background: var(--sports-character-image) center bottom / contain no-repeat;
  box-shadow: none;
  filter:
    drop-shadow(0 16px 18px rgba(7, 26, 45, 0.34))
    drop-shadow(0 0 24px var(--sports-glow, rgba(255, 202, 79, 0.35)));
}

.preview-card[data-theme="sports-day"][data-theme-character] .preview-candles span:nth-child(2),
.preview-card[data-theme="sports-day"][data-theme-character] .preview-candles span:nth-child(3) {
  top: 42px;
  height: 104px;
  opacity: 0.68;
}

.preview-card[data-theme="sports-day"][data-theme-character] .preview-candles span:nth-child(4) {
  top: 14px;
  height: 140px;
  opacity: 0.7;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-masthead .flow-theme-feature {
  right: auto;
  top: auto;
  width: min(100%, clamp(260px, 34vw, 460px));
  height: clamp(330px, 42vw, 580px);
  border: 0;
  border-radius: 0;
  background: var(--sports-character-image) center bottom / contain no-repeat;
  box-shadow: none;
  filter:
    drop-shadow(0 26px 28px rgba(0, 12, 28, 0.42))
    drop-shadow(0 0 34px var(--sports-glow, rgba(255, 202, 79, 0.34)));
  transform: translate3d(0, 0, 0);
  animation: sportsCharacterCardFloat 5.8s ease-in-out infinite;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-masthead .flow-theme-feature::after {
  display: none;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character="gymnastics"] .flow-character-masthead .flow-theme-feature,
.invite-flow-preview[data-theme="sports-day"][data-theme-character="dance"] .flow-character-masthead .flow-theme-feature,
.invite-flow-preview[data-theme="sports-day"][data-theme-character="allstar"] .flow-character-masthead .flow-theme-feature {
  transform: translate3d(0, 0, 0);
}

@media (max-width: 760px) {
  .invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-masthead .flow-theme-feature {
    width: min(100%, clamp(240px, 76vw, 360px));
    height: clamp(320px, 92vw, 500px);
  }
}

@keyframes sportsCharacterCardFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -12px, 0);
  }
}

/* Sports Day cinematic backgrounds: the theme owns the scene, while catalog characters only swap the masthead art. */
:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character] {
  --sports-bg-image: url("/assets/birthday-invites/sports-day-allstar-cinematic-bg.webp");
  --label-bg: linear-gradient(135deg, #1a87ff, #ffca4f, #ff6fb4);
  --button-bg: linear-gradient(135deg, #fff1ad, #77d6ff);
  --sports-glow: rgba(255, 202, 79, 0.36);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="football"] {
  --sports-bg-image: url("/assets/birthday-invites/sports-day-football-cinematic-bg.webp");
  --label-bg: linear-gradient(135deg, #1e72ff, #6fc7ff);
  --button-bg: linear-gradient(135deg, #fff1ad, #62c9ff);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="baseball"] {
  --sports-bg-image: url("/assets/birthday-invites/sports-day-baseball-cinematic-bg.webp");
  --label-bg: linear-gradient(135deg, #c7472c, #ffb15d);
  --button-bg: linear-gradient(135deg, #ffe1a6, #ff865e);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="basketball"] {
  --sports-bg-image: url("/assets/birthday-invites/sports-day-basketball-cinematic-bg.webp");
  --label-bg: linear-gradient(135deg, #c85b13, #ffb443);
  --button-bg: linear-gradient(135deg, #ffd48a, #ff8a28);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="soccer"] {
  --sports-bg-image: url("/assets/birthday-invites/sports-day-soccer-cinematic-bg.webp");
  --label-bg: linear-gradient(135deg, #1f8a52, #8ee870);
  --button-bg: linear-gradient(135deg, #e7ff91, #5edb73);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="gymnastics"] {
  --sports-bg-image: url("/assets/birthday-invites/sports-day-gymnastics-cinematic-bg.webp");
  --label-bg: linear-gradient(135deg, #d852a8, #a575ff);
  --button-bg: linear-gradient(135deg, #ffd5f0, #b58aff);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="dance"] {
  --sports-bg-image: url("/assets/birthday-invites/sports-day-dance-cinematic-bg.webp");
  --label-bg: linear-gradient(135deg, #7d54ff, #ff73b7);
  --button-bg: linear-gradient(135deg, #e6d2ff, #ff8ccf);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="allstar"] {
  --sports-bg-image: url("/assets/birthday-invites/sports-day-allstar-cinematic-bg.webp");
  --label-bg: linear-gradient(135deg, #1a87ff, #ffca4f, #ff6fb4);
  --button-bg: linear-gradient(135deg, #fff1ad, #77d6ff);
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="mvp-captain"] {
  --sports-bg-image: url("/assets/birthday-invites/sports-day-allstar-cinematic-bg.webp");
  --label-bg: linear-gradient(135deg, #2269d6, #ffca4f);
  --button-bg: linear-gradient(135deg, #fff1ad, #5fb8ff);
}

.preview-card[data-theme="sports-day"][data-theme-character] .preview-poster {
  background:
    linear-gradient(180deg, rgba(4, 14, 24, 0.08), rgba(4, 14, 24, 0.44)),
    var(--sports-bg-image) center / cover no-repeat;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] {
  --theme-bg:
    linear-gradient(90deg, rgba(3, 14, 24, 0.84) 0%, rgba(6, 20, 32, 0.66) 36%, rgba(6, 20, 32, 0.22) 68%, rgba(6, 20, 32, 0.36) 100%),
    var(--sports-bg-image) center / cover no-repeat;
  --theme-pattern:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.22), transparent 17rem),
    radial-gradient(circle at 76% 18%, var(--sports-glow, rgba(255, 202, 79, 0.36)), transparent 20rem),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28% 72%, rgba(255, 255, 255, 0.06));
  --theme-vignette:
    radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.1), transparent 22rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32));
  --flow-title: #fff1ad;
  --flow-text: #ffffff;
  --flow-muted: rgba(255, 255, 255, 0.9);
  --flow-card: rgba(5, 18, 29, 0.78);
  --content-panel: rgba(5, 18, 29, 0.62);
  --panel-border: rgba(255, 255, 255, 0.24);
  --detail-bg: rgba(255, 255, 255, 0.12);
  --detail-border: rgba(255, 255, 255, 0.16);
  --detail-label: rgba(255, 241, 173, 0.82);
  --detail-ink: #ffffff;
  --label-ink: #ffffff;
  --rsvp-bg: rgba(5, 18, 29, 0.78);
  --rsvp-ink: #ffffff;
  --rsvp-muted: rgba(255, 255, 255, 0.8);
  --rsvp-border: rgba(255, 255, 255, 0.24);
  --button-bg-2: rgba(255, 255, 255, 0.18);
  --button-bg-3: rgba(255, 255, 255, 0.12);
  --button-ink: #081723;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-prop-a,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-prop-b,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-prop-c {
  display: none;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .decor,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .sparkles {
  display: none;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-screen--invite {
  overflow: hidden;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-invite-layout,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-invite-copy,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-rsvp-card,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-masthead,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-details-grid {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-invite-copy,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-rsvp-card {
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-masthead {
  min-height: clamp(210px, 28vw, 350px);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-invite-copy h3 {
  max-width: min(100%, 420px);
  font-size: clamp(2.05rem, 6.2vw, 3.25rem);
  line-height: 0.98;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character].has-medium-name .flow-invite-copy h3,
.invite-flow-preview[data-theme="sports-day"][data-theme-character].has-long-name .flow-invite-copy h3 {
  font-size: clamp(1.75rem, 5.2vw, 2.75rem);
  line-height: 1.02;
}

/* Sports Day readability pass for the builder's live preview. */
.invite-flow-preview[data-theme="sports-day"][data-theme-character] {
  --theme-bg:
    linear-gradient(90deg, rgba(3, 14, 24, 0.28) 0%, rgba(3, 14, 24, 0.12) 44%, rgba(3, 14, 24, 0.22) 100%),
    var(--sports-bg-image) center / cover no-repeat;
  --flow-title: #173321;
  --flow-text: #183321;
  --flow-muted: rgba(23, 51, 33, 0.74);
  --flow-card: rgba(248, 255, 238, 0.93);
  --content-panel: rgba(248, 255, 238, 0.91);
  --panel-border: rgba(48, 101, 58, 0.22);
  --detail-bg: rgba(255, 255, 247, 0.92);
  --detail-border: rgba(48, 101, 58, 0.22);
  --detail-label: #3f713a;
  --detail-ink: #172d1f;
  --label-ink: #ffffff;
  --rsvp-bg: rgba(248, 255, 238, 0.93);
  --rsvp-ink: #173321;
  --rsvp-muted: rgba(23, 51, 33, 0.74);
  --rsvp-border: rgba(48, 101, 58, 0.24);
  --button-ink: #172d1f;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-invite-layout {
  padding: clamp(18px, 4vw, 24px);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-invite-copy,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-rsvp-card {
  border-color: var(--panel-border);
  background: var(--content-panel);
  color: var(--flow-text);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(12px) saturate(1.04);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-rsvp-card {
  background: var(--rsvp-bg);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-masthead {
  min-height: clamp(185px, 22vw, 280px);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-masthead .flow-theme-feature {
  width: min(100%, clamp(215px, 28vw, 360px));
  height: clamp(270px, 35vw, 470px);
  filter:
    drop-shadow(0 24px 28px rgba(0, 12, 28, 0.36))
    drop-shadow(0 0 28px var(--sports-glow, rgba(255, 202, 79, 0.3)));
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-bubble {
  max-width: min(100%, 420px);
  border-color: rgba(48, 101, 58, 0.28);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 255, 230, 0.96));
  color: #173321;
  text-shadow: none;
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-bubble::before {
  border-color: rgba(48, 101, 58, 0.28);
  background: rgba(250, 255, 238, 0.98);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-invite-copy h3 {
  max-width: none;
  color: var(--flow-title);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-invite-copy p,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-rsvp-card small {
  color: var(--flow-muted);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-details-grid div {
  border-color: var(--detail-border);
  background: var(--detail-bg);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-details-grid dt {
  color: var(--detail-label);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-details-grid dd,
.invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-rsvp-card strong {
  color: var(--detail-ink);
}

.invite-flow-preview[data-theme="sports-day"][data-theme-character] .preview-rsvp-actions button {
  color: var(--button-ink);
}

@media (max-width: 760px) {
  .invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-masthead {
    min-height: clamp(230px, 68vw, 340px);
  }

  .invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-character-masthead .flow-theme-feature {
    width: min(100%, clamp(220px, 76vw, 330px));
    height: clamp(280px, 86vw, 450px);
  }

  .invite-flow-preview[data-theme="sports-day"][data-theme-character] .flow-invite-copy h3 {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.02;
  }
}

.invite-flow-preview[data-theme="zoo-safari"] .safari-actor--featured-character {
  left: auto;
  right: clamp(18px, 7vw, 62px);
  bottom: clamp(56px, 10vw, 108px);
  z-index: 2;
  width: clamp(76px, 13vw, 118px);
  height: clamp(74px, 13vw, 118px);
  background-image: url("/assets/birthday-invites/zoo-safari-lion-3d.png");
  filter:
    drop-shadow(0 15px 16px rgba(75, 45, 13, 0.22))
    drop-shadow(0 0 14px rgba(255, 223, 153, 0.2))
    saturate(1.04);
  opacity: 0.78;
  transform-origin: 50% 100%;
  animation: safariGroundCharacterWatch 7.5s ease-in-out infinite;
}

.invite-flow-preview[data-theme="zoo-safari"][data-theme-character="gazelle"] .safari-actor--featured-character {
  left: auto;
  right: clamp(22px, 7.5vw, 68px);
  bottom: clamp(50px, 9vw, 96px);
  width: clamp(66px, 11vw, 98px);
  height: clamp(88px, 15vw, 136px);
  background-image: url("/assets/birthday-invites/zoo-safari-gazelle-3d.png");
  opacity: 0.74;
  animation-duration: 8.2s;
}

@media (max-width: 760px) {
  .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--featured-character {
    left: auto;
    right: 14px;
    top: clamp(710px, 184vw, 830px);
    bottom: auto;
    width: 100px;
    height: 100px;
    opacity: 0.46;
  }

  .invite-flow-preview[data-theme="zoo-safari"][data-theme-character="gazelle"] .safari-actor--featured-character {
    left: auto;
    right: 16px;
    top: clamp(700px, 180vw, 820px);
    width: 82px;
    height: 116px;
    opacity: 0.44;
  }
}

@keyframes safariGroundCharacterWatch {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-1deg);
  }

  42% {
    transform: translate3d(5px, -3px, 0) scale(1.025) rotate(1deg);
  }

  68% {
    transform: translate3d(-3px, 1px, 0) scale(0.995) rotate(-1deg);
  }
}

/* Shared birthday theme button and success effects. */
:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme] {
  --birthday-effect-accent: var(--theme-accent, var(--invite-teal));
  --birthday-effect-soft: var(--theme-soft, #e2f7f3);
  --birthday-effect-dark: var(--theme-dark, var(--invite-forest));
  --birthday-effect-glow: color-mix(in srgb, var(--birthday-effect-accent) 38%, transparent);
  --birthday-effect-strong-glow: color-mix(in srgb, var(--birthday-effect-accent) 58%, transparent);
  --birthday-effect-sheen: linear-gradient(105deg, transparent 0 28%, rgba(255, 255, 255, 0.72) 46%, transparent 64% 100%);
  --birthday-effect-particles:
    radial-gradient(circle at 18% 24%, var(--birthday-effect-accent) 0 4px, transparent 5px),
    radial-gradient(circle at 74% 18%, rgba(255, 255, 255, 0.86) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 78%, var(--birthday-effect-soft) 0 5px, transparent 6px);
  --birthday-success-field:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--birthday-effect-soft) 72%, transparent) 0 14%, transparent 15%),
    radial-gradient(circle at 82% 24%, color-mix(in srgb, var(--birthday-effect-accent) 46%, transparent) 0 12%, transparent 13%);
}

:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme="candle-party"] {
  --creative-bg-image: url("/assets/birthday-invites/candle-party-pastel-wallpaper.png");
  --birthday-effect-accent: #f26f5d;
  --birthday-effect-soft: #ffe889;
  --birthday-effect-dark: #2a2218;
  --birthday-effect-particles:
    radial-gradient(circle at 16% 76%, #ffd86e 0 4px, transparent 5px),
    radial-gradient(circle at 38% 18%, #ff8c6b 0 4px, transparent 5px),
    radial-gradient(ellipse at 70% 28%, #fff1a6 0 4px, transparent 5px);
}

:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme="princess-garden"] {
  --birthday-effect-accent: #d63691;
  --birthday-effect-soft: #ffe3f2;
  --birthday-effect-dark: #442446;
  --birthday-effect-particles:
    radial-gradient(circle at 22% 24%, #ffd86e 0 5px, transparent 6px),
    radial-gradient(circle at 70% 22%, #f7addd 0 6px, transparent 7px),
    radial-gradient(circle at 56% 76%, #ffffff 0 4px, transparent 5px);
}

:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme="dino-dig"] {
  --birthday-effect-accent: #5a8f4e;
  --birthday-effect-soft: #d8f1cf;
  --birthday-effect-dark: #47301f;
  --birthday-effect-particles:
    radial-gradient(ellipse at 22% 70%, #735136 0 6px, transparent 7px),
    radial-gradient(ellipse at 52% 18%, #9acb77 0 5px, transparent 6px),
    radial-gradient(circle at 78% 72%, #f0c987 0 4px, transparent 5px);
}

:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme="sports-day"] {
  --birthday-effect-accent: #3f9d55;
  --birthday-effect-soft: #e9f88e;
  --birthday-effect-dark: #123d2c;
  --birthday-effect-particles:
    linear-gradient(90deg, transparent 0 43%, rgba(255, 255, 255, 0.7) 44% 46%, transparent 47% 100%),
    radial-gradient(circle at 78% 24%, #ffffff 0 5px, transparent 6px),
    radial-gradient(circle at 22% 74%, #f3cb4d 0 5px, transparent 6px);
}

:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme="space-rocket"] {
  --birthday-effect-accent: #ff854d;
  --birthday-effect-soft: #dfe8ff;
  --birthday-effect-dark: #101734;
  --birthday-effect-particles:
    radial-gradient(circle at 20% 24%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 74% 18%, #ffffff 0 3px, transparent 4px),
    radial-gradient(circle at 66% 74%, #ffd86e 0 5px, transparent 6px),
    linear-gradient(135deg, transparent 0 42%, rgba(255, 133, 77, 0.7) 44% 47%, transparent 49% 100%);
}

:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme="mermaid-lagoon"] {
  --birthday-effect-accent: #2ebcc6;
  --birthday-effect-soft: #c4fff5;
  --birthday-effect-dark: #034756;
  --birthday-effect-particles:
    radial-gradient(circle at 18% 70%, rgba(255, 255, 255, 0.88) 0 6px, transparent 7px),
    radial-gradient(circle at 42% 22%, rgba(255, 255, 255, 0.78) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 44%, #8d6de0 0 5px, transparent 6px),
    linear-gradient(90deg, transparent 0 35%, rgba(255, 255, 255, 0.36) 44%, transparent 56% 100%);
}

:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme="rainbow-art"] {
  --birthday-effect-accent: #ff615d;
  --birthday-effect-soft: #fff8df;
  --birthday-effect-dark: #4b334c;
  --birthday-effect-sheen: linear-gradient(105deg, rgba(255, 97, 93, 0) 0 8%, rgba(255, 97, 93, 0.42) 20%, rgba(255, 216, 110, 0.5) 34%, rgba(109, 207, 130, 0.48) 48%, rgba(93, 197, 255, 0.5) 62%, rgba(205, 129, 242, 0.46) 76%, rgba(255, 97, 93, 0) 92%);
  --birthday-effect-particles:
    radial-gradient(circle at 18% 24%, #ff615d 0 4px, transparent 5px),
    radial-gradient(circle at 42% 72%, #72d7db 0 4px, transparent 5px),
    radial-gradient(circle at 76% 20%, #ffd86e 0 5px, transparent 6px),
    radial-gradient(circle at 82% 76%, #c796e8 0 5px, transparent 6px);
}

:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme="superhero"] {
  --birthday-effect-accent: #e83e42;
  --birthday-effect-soft: #fff4a3;
  --birthday-effect-dark: #17366f;
  --birthday-effect-particles:
    linear-gradient(135deg, transparent 0 36%, #ffd86e 37% 46%, transparent 47% 100%),
    radial-gradient(circle at 24% 28%, #ffffff 0 4px, transparent 5px),
    radial-gradient(circle at 78% 72%, #245cb8 0 5px, transparent 6px);
}

:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme="zoo-safari"] {
  --birthday-effect-accent: #b97922;
  --birthday-effect-soft: #ffe7a8;
  --birthday-effect-dark: #4c3519;
  --birthday-effect-particles:
    radial-gradient(ellipse at 18% 66%, rgba(191, 145, 58, 0.86) 0 7px, transparent 8px),
    radial-gradient(ellipse at 46% 26%, rgba(113, 154, 69, 0.84) 0 6px, transparent 7px),
    radial-gradient(circle at 74% 74%, rgba(255, 233, 166, 0.9) 0 4px, transparent 5px);
}

:where(.birthday-builder-grid, .preview-card, .invite-flow-preview)[data-theme="arcade-game"] {
  --birthday-effect-accent: #9b69ff;
  --birthday-effect-soft: #7bfff5;
  --birthday-effect-dark: #11183a;
  --birthday-effect-sheen: linear-gradient(180deg, rgba(123, 255, 245, 0.02), rgba(123, 255, 245, 0.42) 50%, rgba(123, 255, 245, 0.02));
  --birthday-effect-particles:
    linear-gradient(90deg, #7bfff5 0 8px, transparent 8px 18px, #ff6d9f 18px 26px, transparent 26px 38px),
    linear-gradient(0deg, transparent 0 36%, rgba(255, 255, 255, 0.44) 37% 39%, transparent 40% 100%);
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-copy-preview-link],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
),
.preview-card[data-theme] .preview-rsvp-actions button,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform 180ms cubic-bezier(0.2, 0.82, 0.2, 1),
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    filter 180ms ease;
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-copy-preview-link],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
)::before,
.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-copy-preview-link],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
)::after,
.preview-card[data-theme] .preview-rsvp-actions button::before,
.preview-card[data-theme] .preview-rsvp-actions button::after,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
)::before,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
)::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-copy-preview-link],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
)::before,
.preview-card[data-theme] .preview-rsvp-actions button::before,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
)::before {
  inset: -45%;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, var(--birthday-effect-strong-glow) 0 10%, transparent 11% 64%),
    var(--birthday-effect-sheen);
  opacity: 0;
  transform: scale(0.62) rotate(0deg);
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
)::after,
.preview-card[data-theme] .preview-rsvp-actions button::after,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
)::after {
  inset: -18%;
  z-index: 0;
  background: var(--birthday-effect-particles);
  background-size: 88px 64px, 76px 58px, 92px 78px, 112px 80px;
  opacity: 0;
  transform: translate3d(-10px, 8px, 0) scale(0.92);
  mix-blend-mode: screen;
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
):hover,
.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
).is-selected,
.preview-card[data-theme] .preview-rsvp-actions button:hover,
.preview-card[data-theme] .preview-rsvp-actions button.is-selected,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
):hover,
.invite-flow-preview[data-theme] .preview-rsvp-actions button.is-selected {
  border-color: color-mix(in srgb, var(--birthday-effect-accent) 76%, #ffffff);
  box-shadow:
    0 14px 34px var(--birthday-effect-glow),
    0 0 0 1px color-mix(in srgb, var(--birthday-effect-accent) 32%, transparent);
  filter: saturate(1.08);
  transform: translateY(-3px) scale(1.01);
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
):hover::before,
.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
).is-selected::before,
.preview-card[data-theme] .preview-rsvp-actions button:hover::before,
.preview-card[data-theme] .preview-rsvp-actions button.is-selected::before,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
):hover::before,
.invite-flow-preview[data-theme] .preview-rsvp-actions button.is-selected::before {
  opacity: 1;
  animation: birthdayButtonGlow 1100ms ease-in-out infinite alternate;
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
):hover::after,
.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
).is-selected::after,
.preview-card[data-theme] .preview-rsvp-actions button:hover::after,
.preview-card[data-theme] .preview-rsvp-actions button.is-selected::after,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
):hover::after,
.invite-flow-preview[data-theme] .preview-rsvp-actions button.is-selected::after {
  opacity: 0.26;
  animation: birthdayButtonParticles 820ms linear infinite;
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
):active,
.preview-card[data-theme] .preview-rsvp-actions button:active,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
):active {
  transform: translateY(1px) scale(0.97);
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
):focus-visible,
.preview-card[data-theme] .preview-rsvp-actions button:focus-visible,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--birthday-effect-accent) 72%, #ffffff);
  outline-offset: 3px;
}

.birthday-builder-grid[data-theme] :where(
  .public-theme-grid label,
  .theme-character-grid label,
  .retention-choice,
  .upgrade-choice
) {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    filter 180ms ease;
}

.birthday-builder-grid[data-theme] :where(
  .public-theme-grid label,
  .theme-character-grid label,
  .retention-choice,
  .upgrade-choice
):hover,
.birthday-builder-grid[data-theme] :where(
  .public-theme-grid label,
  .theme-character-grid label,
  .retention-choice,
  .upgrade-choice
):has(input:focus-visible),
.birthday-builder-grid[data-theme] :where(
  .public-theme-grid label,
  .theme-character-grid label,
  .retention-choice,
  .upgrade-choice
):has(input:checked) {
  border-color: color-mix(in srgb, var(--birthday-effect-accent) 78%, var(--invite-teal));
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--birthday-effect-soft) 72%, transparent) 0 20%, transparent 21%),
    color-mix(in srgb, var(--birthday-effect-soft) 36%, #ffffff);
  box-shadow:
    0 16px 36px color-mix(in srgb, var(--birthday-effect-accent) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--birthday-effect-accent) 20%, transparent);
  filter: saturate(1.04);
  transform: translateY(-3px);
}

.invite-flow-preview[data-mode="success"] .flow-screen--success {
  position: relative;
  overflow: hidden;
  background:
    var(--birthday-success-field),
    radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--birthday-effect-accent) 38%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--birthday-effect-dark) 86%, #000000), #171616);
}

.invite-flow-preview[data-mode="success"] .flow-screen--success::before,
.invite-flow-preview[data-mode="success"] .flow-screen--success::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.invite-flow-preview[data-mode="success"] .flow-screen--success::before {
  inset: -16%;
  z-index: 0;
  background: var(--birthday-effect-particles);
  background-size: 126px 96px, 118px 88px, 146px 116px, 170px 132px;
  opacity: 0.7;
  animation: birthdaySuccessFloat 5.8s linear infinite;
}

.invite-flow-preview[data-mode="success"] .flow-screen--success::after {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.24), transparent 31%),
    linear-gradient(120deg, transparent 0 33%, color-mix(in srgb, var(--birthday-effect-accent) 22%, transparent) 44%, transparent 56% 100%);
  opacity: 0.86;
  animation: birthdaySuccessSpotlight 3.2s ease-in-out infinite alternate;
}

.invite-flow-preview[data-mode="success"] .flow-success-card {
  z-index: 2;
  border-color: color-mix(in srgb, var(--birthday-effect-accent) 46%, #ffffff);
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--birthday-effect-dark) 82%, rgba(255, 255, 255, 0.1)), rgba(18, 18, 17, 0.9));
  box-shadow:
    0 32px 88px rgba(0, 0, 0, 0.34),
    0 0 0 1px color-mix(in srgb, var(--birthday-effect-accent) 24%, transparent),
    0 0 48px color-mix(in srgb, var(--birthday-effect-accent) 28%, transparent);
  animation: birthdaySuccessCardIn 620ms cubic-bezier(0.2, 1, 0.24, 1) both;
}

.invite-flow-preview[data-mode="success"] .flow-success-card::before,
.invite-flow-preview[data-mode="success"] .flow-success-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.invite-flow-preview[data-mode="success"] .flow-success-card::before {
  inset: -44px;
  z-index: 0;
  border-radius: inherit;
  background: var(--birthday-effect-particles);
  background-size: 82px 66px, 94px 74px, 108px 92px, 116px 98px;
  opacity: 0.44;
  animation: birthdaySuccessFloat 4.4s linear infinite reverse;
}

.invite-flow-preview[data-mode="success"] .flow-success-card::after {
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, transparent 0 18%, rgba(255, 255, 255, 0.26) 32%, transparent 46% 100%),
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--birthday-effect-accent) 34%, transparent), transparent 46%);
  opacity: 0.72;
}

.invite-flow-preview[data-mode="success"] .flow-success-card > * {
  position: relative;
  z-index: 2;
}

.invite-flow-preview[data-mode="success"] .flow-success-close {
  z-index: 3;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.invite-flow-preview[data-mode="success"] .flow-success-popper {
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 18%, transparent 19%),
    conic-gradient(from 20deg, var(--birthday-effect-soft), var(--birthday-effect-accent), #d986c9, #66c8bd, var(--birthday-effect-soft));
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--birthday-effect-accent) 12%, transparent),
    0 18px 38px color-mix(in srgb, var(--birthday-effect-accent) 28%, transparent);
}

.invite-flow-preview[data-mode="success"] .flow-success-card > p:first-of-type {
  color: color-mix(in srgb, var(--birthday-effect-soft) 72%, #ffffff);
}

@keyframes birthdayButtonGlow {
  from {
    transform: scale(0.72) rotate(-8deg);
  }

  to {
    transform: scale(1.08) rotate(8deg);
  }
}

@keyframes birthdayButtonParticles {
  0% {
    transform: translate3d(-12px, 8px, 0) scale(0.94);
  }

  100% {
    transform: translate3d(12px, -8px, 0) scale(1.02);
  }
}

@keyframes birthdaySuccessCardIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.88) rotate(-1.5deg);
  }

  58% {
    opacity: 1;
    transform: translateY(-6px) scale(1.035) rotate(0.5deg);
  }

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

@keyframes birthdaySuccessFloat {
  0% {
    transform: translate3d(-18px, 12px, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(18px, -16px, 0) rotate(8deg);
  }
}

@keyframes birthdaySuccessSpotlight {
  from {
    opacity: 0.58;
    transform: translateX(-8px) scale(1);
  }

  to {
    opacity: 0.94;
    transform: translateX(8px) scale(1.03);
  }
}

html[data-birthday-motion="balanced"] .birthday-builder-grid {
  content-visibility: auto;
  contain-intrinsic-size: 1200px;
}

html[data-birthday-motion="balanced"] :where(
  .builder-panel,
  .birthday-live-preview,
  .preview-card,
  .flow-rsvp-card,
  .flow-success-card,
  .flow-intro-frame,
  .flow-intro-copy,
  .flow-screen--success
) {
  backdrop-filter: none !important;
}

html[data-birthday-motion="balanced"] :where(
  .flow-theme-feature,
  .safari-actor,
  .lagoon-actor,
  .theme-art--mermaid-lagoon::before,
  .theme-art--mermaid-lagoon::after,
  .public-theme-grid .theme-art--mermaid-lagoon::before,
  .public-theme-grid .theme-art--mermaid-lagoon::after
) {
  filter: none !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-mode="success"] .flow-screen--success::before,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-mode="success"] .flow-screen--success::after,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-mode="success"] .flow-success-card::before,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-mode="success"] .flow-success-card::after {
  animation: none !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-mode="success"] .flow-screen--success::before,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-mode="success"] .flow-success-card::before {
  opacity: 0.3;
}

html[data-birthday-motion="balanced"] .flow-success-popper {
  animation-duration: 1800ms;
}

html[data-birthday-motion="balanced"] .flow-firework,
html[data-birthday-motion="balanced"] .flow-confetti-strip,
html[data-birthday-motion="balanced"] .flow-confetti-dot {
  animation-iteration-count: 2;
}

html[data-birthday-motion="balanced"] .birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
):hover::before,
html[data-birthday-motion="balanced"] .birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
):hover::after,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
):hover::before,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
):hover::after {
  animation-iteration-count: 1;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="candle-party"] .flow-theme-scene::before,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="candle-party"] .flow-theme-scene::after,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="candle-party"] .flow-prop,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="candle-party"] .flow-prop::before,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="candle-party"] .flow-prop::after {
  animation-duration: 7s !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="mermaid-lagoon"] .flow-prop-c,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="mermaid-lagoon"] .flow-theme-scene::before,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="mermaid-lagoon"] .flow-theme-scene::after {
  animation: none !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor {
  will-change: auto;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-c {
  display: none;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor::before,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor::after {
  animation: none !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-a {
  animation-duration: 34s !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--fish-b {
  animation-duration: 42s !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="mermaid-lagoon"] .lagoon-actor--turtle {
  animation-duration: 50s !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] .decor-b,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] .decor-c,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] .sparkles,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] .decor-c::after {
  animation: none !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] :where(
  .safari-actor--giraffe,
  .safari-actor--elephant,
  .safari-actor--zebra
) {
  animation: none !important;
  opacity: 0.32;
  will-change: auto;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] :where(
  .safari-actor--giraffe,
  .safari-actor--elephant,
  .safari-actor--zebra,
  .safari-actor--monkey,
  .safari-actor--jeep
)::before,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] :where(
  .safari-actor--giraffe,
  .safari-actor--elephant,
  .safari-actor--zebra,
  .safari-actor--monkey,
  .safari-actor--jeep
)::after {
  animation: none !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--monkey {
  animation-duration: 24s !important;
  will-change: auto;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] .safari-actor--jeep {
  animation-duration: 18s !important;
  will-change: auto;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] .safari-bird,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="zoo-safari"] .safari-bird::before {
  animation-duration: 38s !important;
}

/* Castle Quest keeps the old saved key while replacing the Princess Garden visuals. */
.theme-art--princess-garden,
.public-theme-grid .theme-art--princess-garden {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 231, 142, 0.54) 0 16px, transparent 17px),
    radial-gradient(circle at 82% 24%, rgba(245, 181, 228, 0.52) 0 18px, transparent 19px),
    linear-gradient(135deg, rgba(56, 84, 169, 0.28), rgba(255, 239, 250, 0.62)),
    url("birthday-invites/castle-quest-knight-bg.png") center / cover no-repeat;
}

.theme-art--princess-garden::before,
.public-theme-grid .theme-art--princess-garden::before {
  content: none;
  display: none;
}

.theme-art--princess-garden::after,
.public-theme-grid .theme-art--princess-garden::after {
  content: none;
  display: none;
}

.theme-character-art--knight,
.theme-character-art--princess {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(234, 241, 255, 0.6)),
    url("birthday-invites/castle-quest-knight-bg.png") center / cover no-repeat;
}

.theme-character-art--princess {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 232, 248, 0.68)),
    url("birthday-invites/castle-quest-princess-bg.png") center / cover no-repeat;
}

.theme-character-art--knight::after,
.theme-character-art--princess::after {
  content: "";
  position: absolute;
  inset: 4% 18% 0;
  background: url("birthday-invites/castle-quest-knight-3d.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 12px 14px rgba(28, 42, 82, 0.26));
}

.theme-character-art--princess::after {
  inset: 0 16% 0;
  background-image: url("birthday-invites/castle-quest-princess-3d.png");
  filter: drop-shadow(0 12px 16px rgba(153, 54, 128, 0.24));
}

.preview-card[data-theme="princess-garden"] .preview-poster {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(231, 238, 255, 0.86)),
    url("birthday-invites/castle-quest-knight-bg.png") center / cover no-repeat;
  border-color: rgba(63, 104, 189, 0.28);
}

.preview-card[data-theme="princess-garden"][data-theme-character="princess"] .preview-poster {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 231, 247, 0.88)),
    url("birthday-invites/castle-quest-princess-bg.png") center / cover no-repeat;
  border-color: rgba(200, 63, 168, 0.3);
}

.preview-card[data-theme="princess-garden"] .preview-poster h2 {
  color: #253d80;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.74);
}

.preview-card[data-theme="princess-garden"][data-theme-character="princess"] .preview-poster h2 {
  color: #873278;
}

.preview-card[data-theme="princess-garden"] .preview-candles {
  width: min(58%, 230px);
  height: 230px;
  margin: -14px auto 8px;
  background: url("birthday-invites/castle-quest-knight-3d.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 18px 18px rgba(31, 45, 83, 0.25));
}

.preview-card[data-theme="princess-garden"][data-theme-character="princess"] .preview-candles {
  height: 246px;
  background-image: url("birthday-invites/castle-quest-princess-3d.png");
  filter: drop-shadow(0 18px 18px rgba(140, 48, 126, 0.24));
}

.preview-card[data-theme="princess-garden"] .preview-candles span {
  display: none;
}

.invite-flow-preview[data-theme="princess-garden"] {
  --theme-bg:
    linear-gradient(90deg, rgba(35, 48, 100, 0.18), rgba(255, 255, 255, 0.18)),
    url("birthday-invites/castle-quest-knight-bg.png") center / cover no-repeat;
  --theme-pattern:
    radial-gradient(circle at 18% 18%, rgba(255, 209, 102, 0.26) 0 4px, transparent 5px),
    radial-gradient(circle at 76% 24%, rgba(255, 112, 74, 0.2) 0 5px, transparent 6px);
  --theme-vignette: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.4), transparent 54%);
  --flow-title: #192f70;
  --flow-text: #15234f;
  --flow-muted: #2f4988;
  --flow-card: rgba(239, 245, 255, 0.82);
  --content-panel: rgba(235, 243, 255, 0.72);
  --label-bg: linear-gradient(135deg, #3159a8, #879dff);
  --button-bg: linear-gradient(135deg, #3159a8, #6a87f5);
  --button-text: #ffffff;
  --button-shadow: rgba(49, 89, 168, 0.3);
  --button-border: rgba(49, 89, 168, 0.42);
  --theme-burst-color: rgba(255, 197, 88, 0.75);
}

.invite-flow-preview[data-theme="princess-garden"][data-theme-character="princess"] {
  --theme-bg:
    linear-gradient(90deg, rgba(128, 46, 126, 0.14), rgba(255, 255, 255, 0.16)),
    url("birthday-invites/castle-quest-princess-bg.png") center / cover no-repeat;
  --theme-pattern:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.52) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 26%, rgba(200, 63, 168, 0.2) 0 5px, transparent 6px);
  --theme-vignette: radial-gradient(circle at 52% 18%, rgba(255, 255, 255, 0.52), transparent 58%);
  --flow-title: #873278;
  --flow-text: #44244f;
  --flow-muted: #7b4e88;
  --flow-card: rgba(255, 236, 249, 0.82);
  --content-panel: rgba(255, 236, 249, 0.72);
  --label-bg: linear-gradient(135deg, #bf4cb1, #8a78ff);
  --button-bg: linear-gradient(135deg, #bf4cb1, #9f7cff);
  --button-shadow: rgba(191, 76, 177, 0.26);
  --button-border: rgba(191, 76, 177, 0.38);
  --theme-burst-color: rgba(198, 236, 255, 0.8);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-theme-feature {
  right: clamp(18px, 4vw, 70px);
  top: clamp(10px, 4vh, 42px);
  width: clamp(130px, 19vw, 260px);
  height: clamp(170px, 27vw, 330px);
  border-radius: 0;
  background: url("birthday-invites/castle-quest-knight-3d.png") center bottom / contain no-repeat;
  clip-path: none;
  box-shadow: none;
  filter: drop-shadow(0 24px 28px rgba(20, 32, 74, 0.26));
  animation: castleCharacterFloat 5.8s ease-in-out infinite;
}

.invite-flow-preview[data-theme="princess-garden"][data-theme-character="princess"] .flow-theme-feature {
  width: clamp(142px, 21vw, 286px);
  height: clamp(188px, 29vw, 352px);
  background-image: url("birthday-invites/castle-quest-princess-3d.png");
  filter: drop-shadow(0 24px 30px rgba(133, 48, 126, 0.26));
  animation-duration: 6.4s;
}

.invite-flow-preview[data-theme="princess-garden"] .flow-theme-feature::before {
  content: "";
  position: absolute;
  right: -10%;
  top: 12%;
  width: 44%;
  height: 20%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 232, 130, 0.88) 0 18%, transparent 22%),
    radial-gradient(circle, rgba(255, 112, 74, 0.78) 22%, transparent 55%);
  filter: blur(1px);
  opacity: 0.82;
  animation: castleFireFlicker 1.6s ease-in-out infinite alternate;
}

.invite-flow-preview[data-theme="princess-garden"][data-theme-character="princess"] .flow-theme-feature::before {
  right: -2%;
  top: 24%;
  width: 54%;
  height: 30%;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.9) 0 8%, transparent 10%),
    radial-gradient(circle at 72% 52%, rgba(154, 229, 255, 0.82) 0 10%, transparent 13%),
    conic-gradient(from 130deg, rgba(255, 255, 255, 0), rgba(159, 219, 255, 0.78), rgba(212, 156, 255, 0.68), rgba(255, 255, 255, 0));
  filter: blur(0.4px);
  animation: castleMagicSwirl 2.8s ease-in-out infinite;
}

.invite-flow-preview[data-theme="princess-garden"] .flow-theme-feature::after {
  content: "";
  position: absolute;
  left: 8%;
  bottom: 10%;
  width: 38%;
  height: 10%;
  border-radius: 50%;
  background: rgba(18, 32, 75, 0.18);
  filter: blur(10px);
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-a,
.invite-flow-preview[data-theme="princess-garden"] .flow-prop-b,
.invite-flow-preview[data-theme="princess-garden"] .flow-prop-c {
  display: block;
  opacity: 0.86;
  pointer-events: none;
  box-shadow: none;
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-a {
  left: -14%;
  top: 12%;
  width: 120px;
  height: 42px;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg width='132' height='46' viewBox='0 0 132 46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231d316d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='.9'%3E%3Cpath d='M6 27c10-13 22-13 32 0 10-13 22-13 32 0'/%3E%3Cpath d='M72 22c8-10 18-10 26 0 8-10 18-10 26 0' stroke-width='3.4' opacity='.76'/%3E%3Cpath d='M42 15c6-8 14-8 20 0 6-8 14-8 20 0' stroke-width='3' opacity='.62'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: castleBirdFly 18s linear infinite;
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-b {
  right: 13%;
  top: 18%;
  width: 74px;
  height: 178px;
  border-radius: 18px 18px 10px 10px;
  background:
    linear-gradient(180deg, #c52d2d, #8b1e3f 72%, transparent 73%),
    linear-gradient(90deg, rgba(255, 225, 123, 0.9), rgba(255, 225, 123, 0));
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 64%, 0 78%);
  transform-origin: 50% 0;
  animation: castleBannerWave 3.8s ease-in-out infinite;
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-c {
  right: 5%;
  top: 34%;
  width: 144px;
  height: 70px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 15% 45%, rgba(255, 232, 130, 0.9), transparent 18%),
    radial-gradient(circle at 38% 54%, rgba(255, 112, 74, 0.82), transparent 20%),
    radial-gradient(circle at 70% 46%, rgba(255, 187, 92, 0.76), transparent 18%);
  filter: blur(0.2px);
  animation: castleSparklePulse 2s ease-in-out infinite alternate;
}

.invite-flow-preview[data-theme="princess-garden"][data-theme-character="princess"] .flow-prop-a {
  left: -10%;
  top: 18%;
  width: 128px;
  height: 74px;
  background: url("data:image/svg+xml,%3Csvg width='128' height='74' viewBox='0 0 128 74' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%236747a3' stroke-width='2' stroke-linecap='round'%3E%3Cg transform='translate(34 37) rotate(-10)'%3E%3Cellipse cx='-13' cy='-4' rx='17' ry='11' fill='%23d979ff'/%3E%3Cellipse cx='13' cy='-4' rx='17' ry='11' fill='%2386dfff'/%3E%3Cellipse cx='-9' cy='12' rx='11' ry='8' fill='%23ffbde8'/%3E%3Cellipse cx='9' cy='12' rx='11' ry='8' fill='%23b9edff'/%3E%3Cpath d='M0-13v30'/%3E%3C/g%3E%3Cg transform='translate(91 30) rotate(12) scale(.72)'%3E%3Cellipse cx='-13' cy='-4' rx='17' ry='11' fill='%23ffc6ea'/%3E%3Cellipse cx='13' cy='-4' rx='17' ry='11' fill='%239edfff'/%3E%3Cellipse cx='-9' cy='12' rx='11' ry='8' fill='%23d979ff' opacity='.82'/%3E%3Cellipse cx='9' cy='12' rx='11' ry='8' fill='%2386dfff' opacity='.82'/%3E%3Cpath d='M0-13v30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(144, 84, 180, 0.18));
  animation: castleButterflyDrift 13s ease-in-out infinite;
}

.invite-flow-preview[data-theme="princess-garden"][data-theme-character="princess"] .flow-prop-b {
  left: 8%;
  right: auto;
  top: auto;
  bottom: 8%;
  width: 96px;
  height: 58px;
  border-radius: 44px 48px 28px 32px;
  background:
    radial-gradient(circle at 78% 14%, #fff 0 9px, transparent 10px),
    radial-gradient(circle at 64% 12%, #fff 0 8px, transparent 9px),
    radial-gradient(circle at 70% 38%, #27344f 0 2px, transparent 3px),
    linear-gradient(180deg, #ffffff, #f7dff0);
  clip-path: none;
  filter: drop-shadow(0 8px 12px rgba(120, 58, 114, 0.16));
  animation: castleBunnyHop 5.2s ease-in-out infinite;
}

.invite-flow-preview[data-theme="princess-garden"][data-theme-character="princess"] .flow-prop-c {
  right: -16%;
  top: 28%;
  width: 160px;
  height: 86px;
  background: url("data:image/svg+xml,%3Csvg width='160' height='86' viewBox='0 0 160 86' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%236747a3' stroke-width='2' stroke-linecap='round'%3E%3Cg transform='translate(48 43) rotate(9)'%3E%3Cellipse cx='-15' cy='-5' rx='19' ry='12' fill='%23ffbce5'/%3E%3Cellipse cx='15' cy='-5' rx='19' ry='12' fill='%23c7eaff'/%3E%3Cellipse cx='-10' cy='13' rx='12' ry='8' fill='%23f5d0ff'/%3E%3Cellipse cx='10' cy='13' rx='12' ry='8' fill='%23aee8ff'/%3E%3Cpath d='M0-14v30'/%3E%3C/g%3E%3Cg transform='translate(112 34) rotate(-13) scale(.76)'%3E%3Cellipse cx='-15' cy='-5' rx='19' ry='12' fill='%23f5d0ff'/%3E%3Cellipse cx='15' cy='-5' rx='19' ry='12' fill='%23aee8ff'/%3E%3Cellipse cx='-10' cy='13' rx='12' ry='8' fill='%23ffbce5' opacity='.82'/%3E%3Cellipse cx='10' cy='13' rx='12' ry='8' fill='%23c7eaff' opacity='.82'/%3E%3Cpath d='M0-14v30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: castleButterflyDrift 15s ease-in-out -3s infinite;
}

.invite-flow-preview[data-theme="princess-garden"] .flow-prop-a::before,
.invite-flow-preview[data-theme="princess-garden"] .flow-prop-a::after,
.invite-flow-preview[data-theme="princess-garden"] .flow-prop-c::before,
.invite-flow-preview[data-theme="princess-garden"] .flow-prop-c::after {
  content: none !important;
  display: none !important;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="princess-garden"] .flow-theme-feature {
  animation-duration: 8s !important;
  will-change: auto;
}

html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="princess-garden"] .flow-prop-a,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="princess-garden"] .flow-prop-b,
html[data-birthday-motion="balanced"] .invite-flow-preview[data-theme="princess-garden"] .flow-prop-c {
  animation-duration: 22s !important;
  will-change: auto;
}

@media (max-width: 760px) {
  .invite-flow-preview[data-theme="princess-garden"] .flow-theme-feature {
    top: clamp(4px, 2vh, 18px);
    right: 2%;
    width: clamp(110px, 34vw, 164px);
    height: clamp(150px, 44vw, 220px);
  }

  .invite-flow-preview[data-theme="princess-garden"][data-theme-character="princess"] .flow-theme-feature {
    width: clamp(122px, 38vw, 178px);
    height: clamp(166px, 48vw, 236px);
  }
}

@keyframes castleCharacterFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
  50% {
    transform: translate3d(0, -10px, 0) rotate(1deg);
  }
}

@keyframes castleFireFlicker {
  0% {
    transform: scaleX(0.84) rotate(-4deg);
    opacity: 0.58;
  }
  100% {
    transform: scaleX(1.08) rotate(4deg);
    opacity: 0.92;
  }
}

@keyframes castleMagicSwirl {
  0%, 100% {
    transform: rotate(-10deg) scale(0.86);
    opacity: 0.58;
  }
  50% {
    transform: rotate(18deg) scale(1.06);
    opacity: 0.96;
  }
}

@keyframes castleBirdFly {
  0% {
    transform: translate3d(-12vw, 0, 0) scale(0.8);
    opacity: 0;
  }
  12%,
  82% {
    opacity: 0.75;
  }
  100% {
    transform: translate3d(118vw, -26px, 0) scale(1);
    opacity: 0;
  }
}

@keyframes castleBannerWave {
  0%, 100% {
    transform: skewX(-2deg) rotate(-1deg);
  }
  50% {
    transform: skewX(5deg) rotate(2deg);
  }
}

@keyframes castleSparklePulse {
  0% {
    transform: translate3d(0, 0, 0) scale(0.9);
    opacity: 0.38;
  }
  100% {
    transform: translate3d(-8px, 4px, 0) scale(1.08);
    opacity: 0.86;
  }
}

@keyframes castleButterflyDrift {
  0% {
    transform: translate3d(-8vw, 22px, 0) rotate(-7deg);
    opacity: 0;
  }
  16%,
  84% {
    opacity: 0.84;
  }
  50% {
    transform: translate3d(52vw, -22px, 0) rotate(9deg);
  }
  100% {
    transform: translate3d(110vw, 14px, 0) rotate(-4deg);
    opacity: 0;
  }
}

@keyframes castleBunnyHop {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
  35% {
    transform: translate3d(18px, -12px, 0) rotate(2deg);
  }
  70% {
    transform: translate3d(34px, 0, 0) rotate(-1deg);
  }
}

/* Castle Quest character polish: sword glint for the knight, hand-anchored ice sparkles for the princess. */
.invite-flow-preview[data-theme="princess-garden"] .flow-theme-feature::before {
  content: "";
  position: absolute;
  left: 10.5%;
  top: 6.5%;
  width: 18%;
  height: 15%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 7%, rgba(255, 239, 153, 0.72) 8% 16%, transparent 17%),
    linear-gradient(88deg, transparent 0 42%, rgba(255, 255, 255, 0.95) 47%, rgba(255, 241, 166, 0.72) 50%, transparent 56% 100%),
    linear-gradient(178deg, transparent 0 42%, rgba(255, 255, 255, 0.8) 47%, rgba(255, 241, 166, 0.5) 50%, transparent 56% 100%);
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255, 236, 138, 0.72));
  clip-path: polygon(50% 0, 59% 39%, 100% 50%, 59% 61%, 50% 100%, 41% 61%, 0 50%, 41% 39%);
  transform: rotate(-13deg) scale(0.72);
  transform-origin: 50% 50%;
  animation: castleSwordGlint 3.4s ease-in-out infinite;
}

.invite-flow-preview[data-theme="princess-garden"][data-theme-character="princess"] .flow-theme-feature::before {
  left: 5%;
  top: 6%;
  width: 56%;
  height: 41%;
  border-radius: 0;
  background:
    radial-gradient(circle at 16% 56%, rgba(255, 255, 255, 0.98) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 40%, rgba(184, 238, 255, 0.98) 0 2px, transparent 3px),
    radial-gradient(circle at 31% 62%, rgba(255, 255, 255, 0.94) 0 1.5px, transparent 3px),
    radial-gradient(circle at 38% 45%, rgba(215, 180, 255, 0.82) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 30%, rgba(255, 255, 255, 0.9) 0 1.5px, transparent 3px),
    linear-gradient(45deg, transparent 0 45%, rgba(235, 252, 255, 0.95) 46% 51%, transparent 52% 100%) 15% 35% / 14px 14px no-repeat,
    linear-gradient(-45deg, transparent 0 45%, rgba(235, 252, 255, 0.95) 46% 51%, transparent 52% 100%) 15% 35% / 14px 14px no-repeat,
    linear-gradient(45deg, transparent 0 45%, rgba(255, 255, 255, 0.82) 46% 51%, transparent 52% 100%) 32% 52% / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 0 45%, rgba(255, 255, 255, 0.82) 46% 51%, transparent 52% 100%) 32% 52% / 10px 10px no-repeat,
    linear-gradient(90deg, transparent 0 16%, rgba(217, 246, 255, 0.72) 17% 18%, transparent 19% 100%),
    linear-gradient(0deg, transparent 0 37%, rgba(255, 255, 255, 0.9) 38% 39%, transparent 40% 100%);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(178, 234, 255, 0.7));
  transform: rotate(-12deg) scale(0.92);
  animation: castleIceHandSparkles 2.7s ease-in-out infinite;
}

@keyframes castleSwordGlint {
  0%,
  54%,
  100% {
    opacity: 0;
    transform: rotate(-13deg) scale(0.56);
  }
  62% {
    opacity: 0.95;
    transform: rotate(-13deg) scale(0.98);
  }
  70% {
    opacity: 0.22;
    transform: rotate(-13deg) scale(0.74);
  }
}

@keyframes castleIceHandSparkles {
  0%,
  100% {
    opacity: 0;
    transform: rotate(-12deg) translate3d(0, 6px, 0) scale(0.86);
  }
  18% {
    opacity: 0.9;
    transform: rotate(-12deg) translate3d(3px, -2px, 0) scale(1);
  }
  34% {
    opacity: 0.2;
    transform: rotate(-12deg) translate3d(8px, -8px, 0) scale(1.04);
  }
  58% {
    opacity: 0.78;
    transform: rotate(-12deg) translate3d(-3px, -4px, 0) scale(0.95);
  }
  74% {
    opacity: 0;
    transform: rotate(-12deg) translate3d(10px, -12px, 0) scale(1.08);
  }
}

/* Dino Dig visual upgrade: generated volcano valley background and two 3D character choices. */
.theme-character-art--trex,
.theme-character-art--longneck {
  border-color: rgba(183, 95, 47, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 232, 174, 0.3), rgba(38, 84, 54, 0.22)),
    url("/assets/birthday-invites/dino-volcano-valley-bg.webp") center / cover no-repeat;
}

.theme-character-art--trex::after {
  inset: 2px -3px 0 1px;
  background-image: url("/assets/birthday-invites/dino-trex-3d.webp");
  filter: drop-shadow(0 9px 11px rgba(89, 56, 25, 0.28));
}

.theme-character-art--longneck::after {
  inset: 0 5px 1px 5px;
  background-image: url("/assets/birthday-invites/dino-longneck-3d.webp");
  filter: drop-shadow(0 9px 11px rgba(48, 91, 52, 0.24));
}

.theme-art--dino-dig,
.public-theme-grid .theme-art--dino-dig {
  background:
    linear-gradient(180deg, rgba(255, 233, 175, 0.3), rgba(47, 78, 42, 0.18)),
    url("/assets/birthday-invites/dino-volcano-valley-bg.webp") center / cover no-repeat;
}

.theme-art--dino-dig::before,
.public-theme-grid .theme-art--dino-dig::before {
  inset: auto auto 8px 18px;
  width: 78px;
  height: 82px;
  border-radius: 0;
  background: url("/assets/birthday-invites/dino-trex-3d.webp") center bottom / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 8px 10px rgba(79, 48, 21, 0.26));
  transform: none;
}

.theme-art--dino-dig::after,
.public-theme-grid .theme-art--dino-dig::after {
  right: 16px;
  top: 11px;
  width: 92px;
  height: 46px;
  border-radius: 0;
  background:
    linear-gradient(126deg, transparent 0 44%, rgba(255, 236, 150, 0.95) 45% 49%, transparent 50% 100%) 0 0 / 58px 18px no-repeat,
    linear-gradient(126deg, transparent 0 44%, rgba(255, 148, 83, 0.82) 45% 49%, transparent 50% 100%) 28px 18px / 58px 18px no-repeat,
    radial-gradient(circle at 74% 74%, rgba(255, 245, 183, 0.95) 0 5px, transparent 6px);
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 7px rgba(111, 56, 24, 0.22));
}

.preview-card[data-theme="dino-dig"] .preview-poster {
  background:
    linear-gradient(180deg, rgba(255, 245, 218, 0.36), rgba(33, 67, 43, 0.18)),
    url("/assets/birthday-invites/dino-volcano-valley-bg.webp") center / cover no-repeat;
}

.preview-card[data-theme="dino-dig"] .preview-candles span {
  background: none;
  box-shadow: none;
}

.preview-card[data-theme="dino-dig"] .preview-candles span:nth-child(1) {
  left: 28px;
  top: 45px;
  width: 126px;
  height: 116px;
  border-radius: 0;
  background: url("/assets/birthday-invites/dino-trex-3d.webp") center bottom / contain no-repeat;
  filter: drop-shadow(0 10px 12px rgba(85, 50, 21, 0.28));
}

.preview-card[data-theme="dino-dig"][data-theme-character="longneck"] .preview-candles span:nth-child(1) {
  left: 38px;
  top: 19px;
  width: 116px;
  height: 146px;
  background-image: url("/assets/birthday-invites/dino-longneck-3d.webp");
  filter: drop-shadow(0 10px 12px rgba(45, 89, 51, 0.24));
}

.preview-card[data-theme="dino-dig"] .preview-candles span:nth-child(n + 2) {
  display: none;
}

.preview-card[data-theme="dino-dig"] .preview-poster h2 {
  color: #fff5bf;
  text-shadow: 0 2px 10px rgba(46, 33, 20, 0.46);
}

.invite-flow-preview[data-theme="dino-dig"] {
  --theme-bg:
    linear-gradient(90deg, rgba(68, 39, 19, 0.2), rgba(255, 244, 204, 0.08) 38%, rgba(25, 72, 52, 0.2)),
    url("/assets/birthday-invites/dino-volcano-valley-bg.webp") center / cover no-repeat;
  --theme-pattern:
    radial-gradient(ellipse at 18% 12%, rgba(255, 230, 165, 0.2), transparent 9rem),
    radial-gradient(ellipse at 64% 8%, rgba(169, 213, 155, 0.14), transparent 10rem),
    radial-gradient(circle at 76% 20%, rgba(255, 235, 143, 0.26), transparent 12rem),
    radial-gradient(ellipse at 50% 92%, rgba(94, 137, 94, 0.28), transparent 18rem);
  --theme-vignette:
    linear-gradient(90deg, rgba(56, 37, 18, 0.34), transparent 24%, transparent 78%, rgba(45, 72, 30, 0.28)),
    linear-gradient(180deg, rgba(255, 226, 149, 0.05), rgba(38, 65, 34, 0.24));
  --theme-pattern-opacity: 0.9;
  --flow-title: #3b2814;
  --flow-text: #2f2516;
  --flow-muted: rgba(47, 37, 22, 0.82);
  --flow-card: rgba(255, 246, 223, 0.9);
  --content-panel: rgba(255, 246, 223, 0.9);
  --panel-border: rgba(255, 255, 255, 0.52);
  --label-bg: linear-gradient(135deg, #7ea84d, #d78a35);
  --label-ink: #ffffff;
  --detail-bg: rgba(255, 250, 232, 0.88);
  --detail-label: #684118;
  --button-bg: linear-gradient(135deg, #5f8d3e, #d87936);
  --button-bg-2: rgba(121, 91, 45, 0.72);
  --button-bg-3: rgba(121, 91, 45, 0.48);
  --button-shadow: rgba(105, 77, 31, 0.28);
  --button-border: rgba(147, 100, 42, 0.36);
  --theme-burst-color: rgba(255, 216, 116, 0.9);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-theme-scene::before {
  animation: none;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-theme-scene::after {
  animation: dinoSwampGlow 7s ease-in-out infinite alternate;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-card,
.invite-flow-preview[data-theme="dino-dig"] .flow-form-card {
  background: rgba(255, 246, 223, 0.92);
  color: #2f2516;
  box-shadow:
    0 18px 48px rgba(55, 38, 20, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.44);
}

.invite-flow-preview[data-theme="dino-dig"] :where(h1, h2, h3, .flow-title) {
  color: #3b2814;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

.invite-flow-preview[data-theme="dino-dig"] :where(p, label, legend, .flow-copy, .flow-detail dd) {
  color: #2f2516;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-detail dt {
  color: #684118;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-details-grid div {
  border-color: rgba(104, 65, 24, 0.2);
  background: rgba(255, 252, 241, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.invite-flow-preview[data-theme="dino-dig"] :where(input, select, textarea) {
  color: #2f2516;
  background: rgba(255, 253, 244, 0.94);
}

.invite-flow-preview[data-theme="dino-dig"] .flow-character-bubble {
  border-color: rgba(104, 65, 24, 0.2);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 240, 0.98));
  color: #2f2516;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-a,
.invite-flow-preview[data-theme="dino-dig"] .flow-prop-b,
.invite-flow-preview[data-theme="dino-dig"] .flow-prop-c {
  display: block;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-a {
  left: clamp(24px, 8vw, 120px);
  bottom: clamp(34px, 8vw, 106px);
  width: clamp(120px, 18vw, 220px);
  height: clamp(58px, 9vw, 92px);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 22% 42%, rgba(214, 255, 210, 0.28) 0 8%, transparent 9%),
    radial-gradient(ellipse at 58% 54%, rgba(119, 190, 117, 0.34) 0 16%, transparent 17%),
    rgba(88, 126, 80, 0.34);
  filter: blur(0.2px);
  animation: dinoSwampRipple 5.8s ease-in-out infinite;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-a::before,
.invite-flow-preview[data-theme="dino-dig"] .flow-prop-a::after {
  display: none;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-b {
  left: 0;
  top: 11%;
  width: clamp(22px, 3.8vw, 52px);
  height: clamp(12px, 2vw, 28px);
  border-radius: 0;
  background: rgba(37, 47, 35, 0.54);
  clip-path: polygon(0 52%, 19% 42%, 38% 52%, 50% 32%, 62% 52%, 81% 42%, 100% 52%, 76% 60%, 60% 58%, 50% 76%, 40% 58%, 24% 60%);
  filter: drop-shadow(0 5px 6px rgba(44, 35, 25, 0.18));
  animation:
    dinoPterodactylFly 25s linear infinite -8s,
    dinoPterodactylWing 1.55s ease-in-out infinite -0.3s;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-b::before,
.invite-flow-preview[data-theme="dino-dig"] .flow-prop-b::after {
  display: none;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-c {
  right: 11%;
  top: 20%;
  width: clamp(56px, 8vw, 108px);
  height: clamp(64px, 9vw, 126px);
  border-radius: 999px 999px 18px 18px;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255, 212, 118, 0.82) 0 12%, transparent 13%),
    linear-gradient(180deg, rgba(105, 71, 50, 0.42), rgba(52, 42, 31, 0.16));
  clip-path: polygon(50% 0, 62% 25%, 100% 100%, 0 100%, 38% 25%);
  filter: drop-shadow(0 0 16px rgba(255, 151, 64, 0.3));
  animation: dinoVolcanoPulse 5.2s ease-in-out infinite;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-prop-c::before {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 112, 60, 0.4), transparent 38%);
  opacity: 0.75;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme="dino-dig"] .flow-character-masthead .flow-theme-feature::after {
  display: none;
}

.invite-flow-preview[data-theme="dino-dig"] .flow-character-masthead .flow-theme-feature {
  width: clamp(260px, 43vw, 400px);
  height: clamp(250px, 40vw, 380px);
  background-image: url("/assets/birthday-invites/dino-trex-3d.webp");
  transform: none;
}

.invite-flow-preview[data-theme="dino-dig"][data-theme-character="longneck"] .flow-character-masthead .flow-theme-feature {
  width: clamp(230px, 38vw, 360px);
  height: clamp(310px, 50vw, 500px);
  background-image: url("/assets/birthday-invites/dino-longneck-3d.webp");
}

.invite-flow-preview[data-theme="dino-dig"][data-theme-character="longneck"] {
  --label-bg: linear-gradient(135deg, #5f9f70, #dd9d5e);
  --button-bg: linear-gradient(135deg, #5f9f70, #d78f57);
  --theme-burst-color: rgba(213, 242, 148, 0.9);
}

@media (max-width: 760px) {
  .invite-flow-preview[data-theme="dino-dig"] .flow-character-masthead .flow-theme-feature {
    width: clamp(280px, 86vw, 410px);
    height: clamp(260px, 80vw, 390px);
  }

  .invite-flow-preview[data-theme="dino-dig"][data-theme-character="longneck"] .flow-character-masthead .flow-theme-feature {
    width: clamp(230px, 70vw, 340px);
    height: clamp(330px, 100vw, 500px);
  }
}

@keyframes dinoMeteorDrift {
  0% {
    background-position: 12% 8%, 68% 4%, center, center;
    opacity: 0.68;
  }
  50% {
    background-position: 22% 13%, 58% 10%, center, center;
    opacity: 1;
  }
  100% {
    background-position: 33% 18%, 48% 16%, center, center;
    opacity: 0.68;
  }
}

@keyframes dinoMeteorPass {
  0% {
    transform: translate3d(42vw, -16px, 0) rotate(-13deg);
    opacity: 0;
  }
  16%,
  72% {
    opacity: 0.9;
  }
  100% {
    transform: translate3d(-26vw, 48px, 0) rotate(-13deg);
    opacity: 0;
  }
}

@keyframes dinoPterodactylFly {
  0% {
    transform: translate3d(108vw, 2px, 0) scale(0.88);
  }
  46% {
    transform: translate3d(44vw, -10px, 0) scale(0.88);
  }
  100% {
    transform: translate3d(-24vw, 8px, 0) scale(0.88);
  }
}

@keyframes dinoPterodactylWing {
  0%,
  100% {
    clip-path: polygon(0 52%, 19% 42%, 38% 52%, 50% 32%, 62% 52%, 81% 42%, 100% 52%, 76% 60%, 60% 58%, 50% 76%, 40% 58%, 24% 60%);
  }
  50% {
    clip-path: polygon(0 42%, 18% 50%, 36% 54%, 50% 34%, 64% 54%, 82% 50%, 100% 42%, 76% 62%, 60% 58%, 50% 76%, 40% 58%, 24% 62%);
  }
}

@keyframes dinoSwampGlow {
  0% {
    opacity: 0.72;
  }
  100% {
    opacity: 1;
  }
}

@keyframes dinoSwampRipple {
  0%,
  100% {
    transform: scaleX(0.94) translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(1.08) translateY(-4px);
    opacity: 0.78;
  }
}

@keyframes dinoVolcanoPulse {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(0) scale(0.96);
  }
  50% {
    opacity: 0.72;
    transform: translateY(-3px) scale(1.04);
  }
}

.birthday-motion-badge {
  --motion-badge-accent: #99e2de;
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  top: max(10px, env(safe-area-inset-top));
  bottom: auto;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(18, 28, 27, 0.84);
  color: #fff;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  font-family: var(--body-font, Inter, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px) saturate(1.35);
}

.birthday-motion-badge::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--motion-badge-accent);
  box-shadow: 0 0 18px var(--motion-badge-accent);
}

.birthday-motion-badge[data-motion-mode="full"] {
  --motion-badge-accent: #ffd166;
}

.birthday-motion-badge[data-motion-mode="balanced"] {
  --motion-badge-accent: #99e2de;
}

.birthday-motion-badge[data-motion-mode="reduced"] {
  --motion-badge-accent: #c8b8ff;
}

.birthday-motion-badge[data-motion-source="measuring"]::before {
  animation: motionBadgePulse 900ms ease-in-out infinite;
}

@keyframes motionBadgePulse {
  0%,
  100% {
    transform: scale(0.82);
    opacity: 0.65;
  }

  50% {
    transform: scale(1.14);
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .birthday-motion-badge {
    left: max(10px, env(safe-area-inset-left));
    right: auto;
    top: max(10px, env(safe-area-inset-top));
    bottom: auto;
    max-width: min(270px, calc(100vw - 20px));
    justify-content: flex-start;
    border-radius: 14px;
  }
}

/* Space Adventure builder preview: character-specific wallpapers and shared masthead assets. */
:where(.preview-card, .invite-flow-preview)[data-theme="space-rocket"][data-theme-character],
.public-birthday-form[data-theme="space-rocket"] {
  --theme-accent: #7ee8ff;
  --theme-soft: #e7edff;
}

:where(.preview-card, .invite-flow-preview)[data-theme="space-rocket"][data-theme-character="alien-boy"] {
  --space-bg-image: url("/assets/birthday-invites/space-alien-boy-cosmic-bg.webp");
  --space-character-image: url("/assets/birthday-invites/space-alien-boy-3d.png");
  --space-glow: rgba(88, 255, 228, 0.44);
  --label-bg: linear-gradient(135deg, #56f2d6, #86b8ff);
  --button-bg: linear-gradient(135deg, #58ffe4, #9dbbff);
}

:where(.preview-card, .invite-flow-preview)[data-theme="space-rocket"][data-theme-character="alien-girl"] {
  --space-bg-image: url("/assets/birthday-invites/space-alien-girl-cosmic-bg.webp");
  --space-character-image: url("/assets/birthday-invites/space-alien-girl-3d.png");
  --space-glow: rgba(220, 143, 255, 0.5);
  --label-bg: linear-gradient(135deg, #f5b3ff, #9ff5ec);
  --button-bg: linear-gradient(135deg, #f5b3ff, #95fff0);
}

:where(.preview-card, .invite-flow-preview)[data-theme="space-rocket"][data-theme-character="astronaut-boy"] {
  --space-bg-image: url("/assets/birthday-invites/space-astronaut-boy-lunar-bg.webp");
  --space-character-image: url("/assets/birthday-invites/space-astronaut-boy-3d.png");
  --space-glow: rgba(116, 168, 255, 0.48);
  --label-bg: linear-gradient(135deg, #8db8ff, #ffe179);
  --button-bg: linear-gradient(135deg, #82b6ff, #ffe179);
}

:where(.preview-card, .invite-flow-preview)[data-theme="space-rocket"][data-theme-character="astronaut-girl"] {
  --space-bg-image: url("/assets/birthday-invites/space-astronaut-girl-starlight-bg.webp");
  --space-character-image: url("/assets/birthday-invites/space-astronaut-girl-3d.png");
  --space-glow: rgba(255, 162, 217, 0.52);
  --label-bg: linear-gradient(135deg, #ffb2db, #ffe08f);
  --button-bg: linear-gradient(135deg, #ffb2db, #ffd681);
}

:where(.preview-card, .invite-flow-preview)[data-theme="space-rocket"][data-theme-character="rocket-cadet"] {
  --space-bg-image: url("/assets/birthday-invites/space-astronaut-boy-lunar-bg.webp");
  --space-character-image: url("/assets/birthday-invites/space-rocket-cadet.png");
  --space-glow: rgba(255, 138, 61, 0.42);
  --label-bg: linear-gradient(135deg, #ff8a3d, #ffd34c);
  --button-bg: linear-gradient(135deg, #ff8a3d, #ffd34c);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] {
  --theme-bg:
    linear-gradient(90deg, rgba(6, 10, 34, 0.58) 0%, rgba(8, 12, 38, 0.34) 44%, rgba(8, 12, 38, 0.56) 100%),
    var(--space-bg-image) center / cover no-repeat,
    linear-gradient(145deg, #080d27, #233d7c);
  --theme-pattern:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.25) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.22) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 72%, var(--space-glow), transparent 17rem),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 32% 68%, rgba(255, 255, 255, 0.08));
  --theme-vignette:
    radial-gradient(circle at 48% 10%, rgba(255, 255, 255, 0.16), transparent 18rem),
    linear-gradient(180deg, rgba(3, 7, 24, 0.1), rgba(3, 7, 24, 0.45));
  --flow-title: #ffffff;
  --flow-text: #f8fbff;
  --flow-muted: rgba(226, 238, 255, 0.78);
  --flow-card: rgba(13, 18, 52, 0.82);
  --content-panel: rgba(13, 18, 52, 0.74);
  --panel-border: rgba(190, 226, 255, 0.28);
  --detail-bg: rgba(255, 255, 255, 0.13);
  --detail-border: rgba(255, 255, 255, 0.18);
  --detail-label: rgba(196, 238, 255, 0.88);
  --detail-ink: #ffffff;
  --label-ink: #0c1234;
  --rsvp-bg: rgba(13, 18, 52, 0.82);
  --rsvp-ink: #f8fbff;
  --rsvp-muted: rgba(226, 238, 255, 0.78);
  --rsvp-border: rgba(190, 226, 255, 0.28);
  --button-ink: #0c1234;
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-prop-a,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-prop-b,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-prop-c,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-prop-d,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-prop-e,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-prop-f,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .decor,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .sparkles {
  display: none;
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-invite-layout {
  padding: clamp(18px, 4vw, 24px);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-invite-copy,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-rsvp-card {
  border-color: var(--panel-border);
  background: var(--content-panel);
  color: var(--flow-text);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(1.05);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-rsvp-card {
  background: var(--rsvp-bg);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-character-masthead {
  min-height: clamp(165px, 18vw, 230px);
  margin: 0 0 10px;
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-character-masthead .flow-theme-feature {
  width: min(100%, clamp(175px, 22vw, 260px));
  height: clamp(220px, 27vw, 315px);
  border: 0;
  border-radius: 0;
  background: var(--space-character-image) center bottom / contain no-repeat;
  box-shadow: none;
  filter:
    drop-shadow(0 24px 28px rgba(0, 8, 28, 0.38))
    drop-shadow(0 0 30px var(--space-glow));
  transform: none;
  animation: spaceAdventureFloat 5.8s ease-in-out infinite;
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character="alien-girl"] .flow-character-masthead .flow-theme-feature {
  width: min(100%, clamp(168px, 20vw, 240px));
  filter:
    drop-shadow(0 26px 30px rgba(0, 8, 28, 0.46))
    drop-shadow(0 0 34px rgba(118, 255, 239, 0.44))
    saturate(1.16)
    contrast(1.08);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-character-masthead .flow-theme-feature::after {
  display: none;
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-theme-age-badge {
  left: calc(50% + clamp(58px, 8.6vw, 90px));
  bottom: clamp(68px, 12vw, 96px);
  width: clamp(60px, 10.8vw, 78px);
  min-width: clamp(60px, 10.8vw, 78px);
  height: clamp(60px, 10.8vw, 78px);
  min-height: clamp(60px, 10.8vw, 78px);
  border-width: 5px;
  border-color: #1f245f;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96) 0 14%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(145deg, #ffffff 0%, #eef6ff 45%, #f5dcff 100%);
  color: #12183d;
  font-size: clamp(17px, 3.3vw, 22px);
  text-align: center;
  text-shadow: none;
  box-shadow:
    0 16px 32px rgba(0, 8, 28, 0.32),
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 30px rgba(126, 232, 255, 0.42);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-character-bubble {
  max-width: min(100%, 420px);
  border-color: rgba(202, 234, 255, 0.42);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(232, 240, 255, 0.96));
  color: #11183d;
  text-shadow: none;
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-character-bubble::before {
  border-color: rgba(202, 234, 255, 0.42);
  background: rgba(244, 248, 255, 0.98);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-theme-label {
  background: var(--label-bg);
  color: var(--label-ink);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-invite-copy h3 {
  max-width: none;
  color: var(--flow-title);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.34);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-invite-copy p {
  max-width: none;
  color: var(--flow-muted);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-details-grid div {
  border-color: var(--detail-border);
  background: var(--detail-bg);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-details-grid dt {
  color: var(--detail-label);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-details-grid dd,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-rsvp-card h4,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-rsvp-card label,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-rsvp-card legend {
  color: var(--rsvp-ink);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-rsvp-card small,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-rsvp-card p {
  color: var(--rsvp-muted);
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-rsvp-card input,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-rsvp-card select,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-rsvp-card textarea {
  border-color: rgba(202, 234, 255, 0.28);
  background: rgba(248, 251, 255, 0.94);
  color: #11183d;
}

.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-submit,
.invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-response-buttons button.is-selected {
  background: var(--button-bg);
  color: var(--button-ink);
}

@media (max-width: 760px) {
  .invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-invite-layout {
    gap: clamp(30px, 9vw, 50px);
  }

  .invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-character-masthead {
    min-height: clamp(260px, 72vw, 380px);
  }

  .invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-character-masthead .flow-theme-feature {
    width: min(100%, clamp(230px, 76vw, 340px));
    height: clamp(310px, 92vw, 470px);
  }

  .invite-flow-preview[data-theme="space-rocket"][data-theme-character] .flow-invite-copy h3 {
    font-size: clamp(1.9rem, 9.5vw, 2.8rem);
    line-height: 1.03;
  }
}

@keyframes spaceAdventureFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  50% {
    transform: translate3d(0, -12px, 0) rotate(1deg);
  }
}

/* Rainbow, Hero City, and Arcade now use the same polished character-preview system. */
:where(.preview-card, .invite-flow-preview)[data-theme="rainbow-art"][data-theme-character],
.public-birthday-form[data-theme="rainbow-art"] {
  --theme-accent: #ff4f8a;
  --theme-soft: #fff3d9;
}

:where(.preview-card, .invite-flow-preview)[data-theme="superhero"][data-theme-character],
.public-birthday-form[data-theme="superhero"] {
  --theme-accent: #e83e42;
  --theme-soft: #fff4a3;
}

:where(.preview-card, .invite-flow-preview)[data-theme="arcade-game"][data-theme-character],
.public-birthday-form[data-theme="arcade-game"] {
  --theme-accent: #9b69ff;
  --theme-soft: #7bfff5;
}

:where(.preview-card, .invite-flow-preview)[data-theme="rainbow-art"][data-theme-character="paint-pixie"] {
  --creative-bg-image: url("/assets/birthday-invites/rainbow-art-studio-bg.webp");
  --creative-character-image: url("/assets/birthday-invites/rainbow-paint-pixie-3d.png");
  --creative-glow: rgba(255, 79, 138, 0.38);
  --creative-title: #74305d;
  --creative-ink: #49334b;
  --creative-muted: #72586a;
  --label-bg: linear-gradient(135deg, #ff75ad, #ffd86e);
  --label-ink: #53203d;
  --button-bg: linear-gradient(135deg, #ff75ad, #ffd86e);
  --button-ink: #53203d;
}

:where(.preview-card, .invite-flow-preview)[data-theme="rainbow-art"][data-theme-character="brush-buddy"] {
  --creative-bg-image: url("/assets/birthday-invites/rainbow-art-studio-bg.webp");
  --creative-character-image: url("/assets/birthday-invites/rainbow-brush-buddy-3d.png");
  --creative-glow: rgba(47, 190, 203, 0.38);
  --creative-title: #215f78;
  --creative-ink: #25465b;
  --creative-muted: #4e6d74;
  --label-bg: linear-gradient(135deg, #7bfff5, #ffcf6e);
  --label-ink: #143f3b;
  --button-bg: linear-gradient(135deg, #7bfff5, #ffcf6e);
  --button-ink: #143f3b;
}

:where(.preview-card, .invite-flow-preview)[data-theme="superhero"][data-theme-character="cape-champion"] {
  --creative-bg-image: url("/assets/birthday-invites/superhero-sky-city-bg.webp");
  --creative-character-image: url("/assets/birthday-invites/superhero-cape-champion-3d.png");
  --creative-glow: rgba(255, 216, 110, 0.46);
  --creative-title: #fff7d7;
  --creative-ink: #fff8df;
  --creative-muted: rgba(255, 248, 223, 0.96);
  --label-bg: linear-gradient(135deg, #ffd86e, #ff6c63);
  --label-ink: #17366f;
  --button-bg: linear-gradient(135deg, #ffd86e, #ff6c63);
  --button-ink: #17366f;
}

:where(.preview-card, .invite-flow-preview)[data-theme="superhero"][data-theme-character="star-guardian"] {
  --creative-bg-image: url("/assets/birthday-invites/superhero-sky-city-bg.webp");
  --creative-character-image: url("/assets/birthday-invites/superhero-star-guardian-3d.png");
  --creative-glow: rgba(199, 150, 232, 0.46);
  --creative-title: #fff0ff;
  --creative-ink: #fff8ff;
  --creative-muted: rgba(255, 240, 255, 0.96);
  --label-bg: linear-gradient(135deg, #c796e8, #7bfff5);
  --label-ink: #17366f;
  --button-bg: linear-gradient(135deg, #c796e8, #7bfff5);
  --button-ink: #17366f;
}

:where(.preview-card, .invite-flow-preview)[data-theme="arcade-game"][data-theme-character="pixel-pal"] {
  --creative-bg-image: url("/assets/birthday-invites/arcade-neon-playroom-bg.webp");
  --creative-character-image: url("/assets/birthday-invites/arcade-pixel-pal-3d.png");
  --creative-glow: rgba(123, 255, 245, 0.48);
  --creative-title: #ffffff;
  --creative-ink: #f8fbff;
  --creative-muted: rgba(225, 252, 255, 0.94);
  --label-bg: linear-gradient(135deg, #7bfff5, #9b69ff);
  --label-ink: #101734;
  --button-bg: linear-gradient(135deg, #7bfff5, #9b69ff);
  --button-ink: #101734;
}

:where(.preview-card, .invite-flow-preview)[data-theme="arcade-game"][data-theme-character="game-champion"] {
  --creative-bg-image: url("/assets/birthday-invites/arcade-neon-playroom-bg.webp");
  --creative-character-image: url("/assets/birthday-invites/arcade-game-champion-3d.png");
  --creative-glow: rgba(255, 93, 207, 0.46);
  --creative-title: #ffffff;
  --creative-ink: #f8fbff;
  --creative-muted: rgba(255, 235, 250, 0.94);
  --label-bg: linear-gradient(135deg, #ff5dcf, #7bfff5);
  --label-ink: #101734;
  --button-bg: linear-gradient(135deg, #ff5dcf, #7bfff5);
  --button-ink: #101734;
}

.preview-card:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .preview-poster {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(20, 20, 40, 0.22)),
    var(--creative-bg-image) center / cover no-repeat;
}

.preview-card:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .preview-candles span:nth-child(1) {
  left: 50%;
  top: 18px;
  width: 152px;
  height: 152px;
  border: 0;
  border-radius: 0;
  background: var(--creative-character-image) center bottom / contain no-repeat;
  box-shadow: none;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 14px 18px rgba(17, 24, 58, 0.26))
    drop-shadow(0 0 18px var(--creative-glow));
}

.preview-card[data-theme="rainbow-art"][data-theme-character="brush-buddy"] .preview-candles span:nth-child(1),
.preview-card[data-theme="arcade-game"][data-theme-character="pixel-pal"] .preview-candles span:nth-child(1) {
  width: 166px;
  height: 148px;
}

.preview-card:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .preview-candles span:nth-child(2),
.preview-card:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .preview-candles span:nth-child(3),
.preview-card:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .preview-candles span:nth-child(4) {
  display: none;
}

.preview-card:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .preview-poster h2,
.preview-card:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .preview-poster p,
.preview-card:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .preview-theme-label {
  color: var(--creative-title);
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.34);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] {
  --theme-bg:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 42%, rgba(20, 22, 42, 0.18) 100%),
    var(--creative-bg-image) center / cover no-repeat,
    linear-gradient(145deg, var(--theme-soft), #ffffff);
  --theme-pattern:
    radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--theme-accent) 48%, transparent) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.34) 0 4px, transparent 5px),
    radial-gradient(circle at 72% 76%, var(--creative-glow), transparent 18rem);
  --theme-vignette:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.28), transparent 20rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(20, 24, 42, 0.18));
  --flow-title: var(--creative-title);
  --flow-text: var(--creative-ink);
  --flow-muted: var(--creative-muted);
  --content-panel: rgba(255, 255, 255, 0.72);
  --panel-border: rgba(255, 255, 255, 0.34);
  --detail-bg: rgba(255, 255, 255, 0.5);
  --detail-border: rgba(20, 63, 59, 0.14);
  --detail-label: color-mix(in srgb, var(--theme-accent) 70%, #143f3b);
  --detail-ink: var(--creative-ink);
  --rsvp-bg: rgba(255, 255, 255, 0.72);
  --rsvp-ink: var(--creative-ink);
  --rsvp-muted: var(--creative-muted);
  --rsvp-border: rgba(255, 255, 255, 0.34);
  --button-bg-2: rgba(255, 255, 255, 0.18);
  --button-bg-3: rgba(255, 255, 255, 0.12);
}

.invite-flow-preview:is([data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] {
  --content-panel:
    linear-gradient(180deg, rgba(15, 20, 52, 0.9), rgba(18, 24, 58, 0.8));
  --panel-border: rgba(255, 255, 255, 0.38);
  --detail-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.15));
  --detail-border: rgba(255, 255, 255, 0.32);
  --detail-label: color-mix(in srgb, var(--theme-accent) 34%, #ffffff);
  --detail-ink: #ffffff;
  --rsvp-bg:
    linear-gradient(180deg, rgba(15, 20, 52, 0.92), rgba(18, 24, 58, 0.84));
  --rsvp-ink: #ffffff;
  --rsvp-muted: rgba(255, 255, 255, 0.88);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-prop,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .decor,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .sparkles {
  display: none;
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-invite-layout {
  gap: clamp(14px, 2vw, 20px);
  padding: clamp(18px, 4vw, 24px);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-invite-copy,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card {
  border-color: var(--panel-border);
  background: var(--content-panel);
  color: var(--flow-text);
  box-shadow:
    0 22px 54px rgba(17, 24, 58, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(1.05);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card {
  background: var(--rsvp-bg);
}

.invite-flow-preview:is([data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-invite-copy,
.invite-flow-preview:is([data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card {
  box-shadow:
    0 34px 86px rgba(6, 9, 25, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-character-masthead {
  min-height: clamp(172px, 19vw, 250px);
  margin: 0 0 10px;
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-character-masthead .flow-theme-feature {
  width: min(100%, clamp(175px, 22vw, 270px));
  height: clamp(225px, 27vw, 335px);
  border: 0;
  border-radius: 0;
  background: var(--creative-character-image) center bottom / contain no-repeat;
  box-shadow: none;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
  filter:
    drop-shadow(0 24px 28px rgba(17, 24, 58, 0.28))
    drop-shadow(0 0 30px var(--creative-glow));
  transform: none;
  animation: spaceAdventureFloat 5.8s ease-in-out infinite;
}

.invite-flow-preview[data-theme="rainbow-art"][data-theme-character="brush-buddy"] .flow-character-masthead .flow-theme-feature,
.invite-flow-preview[data-theme="arcade-game"][data-theme-character="pixel-pal"] .flow-character-masthead .flow-theme-feature {
  width: min(100%, clamp(190px, 24vw, 300px));
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-character-masthead .flow-theme-feature::after {
  content: none;
  display: none;
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-theme-age-badge {
  left: calc(50% + clamp(58px, 8.6vw, 92px));
  bottom: clamp(68px, 12vw, 100px);
  width: clamp(60px, 10.8vw, 80px);
  min-width: clamp(60px, 10.8vw, 80px);
  height: clamp(60px, 10.8vw, 80px);
  min-height: clamp(60px, 10.8vw, 80px);
  border: 5px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  padding: 7px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 1) 0 17%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(circle, #ffffff 0 58%, color-mix(in srgb, var(--creative-glow) 58%, #ffffff));
  color: color-mix(in srgb, var(--theme-accent) 82%, #11183d);
  font-size: clamp(16px, 3vw, 21px);
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
  text-transform: none;
  box-shadow:
    0 16px 32px rgba(17, 24, 58, 0.24),
    0 0 0 3px color-mix(in srgb, var(--creative-glow) 44%, #ffffff),
    0 0 34px color-mix(in srgb, var(--creative-glow) 42%, transparent);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-character-bubble {
  max-width: min(100%, 430px);
  border-color: color-mix(in srgb, var(--theme-accent) 38%, #ffffff);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--theme-soft) 48%, #ffffff));
  color: #1d2635;
  text-shadow: none;
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-character-bubble::before {
  border-color: color-mix(in srgb, var(--theme-accent) 38%, #ffffff);
  background: color-mix(in srgb, var(--theme-soft) 42%, #ffffff);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-theme-label {
  background: var(--label-bg);
  color: var(--label-ink);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-invite-copy h3 {
  max-width: none;
  color: var(--flow-title);
  font-size: clamp(2.25rem, 6vw, 3.35rem);
  line-height: 1;
  text-shadow: 0 4px 18px rgba(17, 24, 58, 0.26);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-invite-copy p {
  max-width: none;
  color: var(--flow-muted);
}

.invite-flow-preview:is([data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-invite-copy h3,
.invite-flow-preview:is([data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-invite-copy p,
.invite-flow-preview:is([data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-details-grid dt,
.invite-flow-preview:is([data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-details-grid dd {
  text-shadow: 0 2px 10px rgba(5, 7, 18, 0.36);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-details-grid div {
  border-color: var(--detail-border);
  background: var(--detail-bg);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-details-grid dt {
  color: var(--detail-label);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-details-grid dd,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card h4,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card label,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card legend {
  color: var(--rsvp-ink);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card small,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card p {
  color: var(--rsvp-muted);
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card input,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card select,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-rsvp-card textarea {
  border-color: var(--rsvp-border);
  background: rgba(255, 255, 255, 0.94);
  color: #11183d;
}

.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-submit,
.invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-response-buttons button.is-selected {
  background: var(--button-bg);
  color: var(--button-ink);
}

@media (max-width: 760px) {
  .invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-invite-layout {
    gap: clamp(30px, 9vw, 50px);
  }

  .invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-character-masthead {
    min-height: clamp(260px, 72vw, 380px);
  }

  .invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-character-masthead .flow-theme-feature {
    width: min(100%, clamp(230px, 76vw, 350px));
    height: clamp(310px, 92vw, 480px);
  }

  .invite-flow-preview:is([data-theme="rainbow-art"], [data-theme="superhero"], [data-theme="arcade-game"])[data-theme-character] .flow-invite-copy h3 {
    font-size: clamp(1.86rem, 9.2vw, 2.75rem);
    line-height: 1.03;
  }
}

html[data-birthday-motion="reduced"] *,
html[data-birthday-motion="reduced"] *::before,
html[data-birthday-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .flow-screen,
  .flow-intro-frame,
  .flow-success-card,
  .flow-success-popper,
  .flow-firework,
  .flow-confetti-strip,
  .flow-confetti-dot,
  .flow-theme-scene::before,
  .flow-theme-scene::after,
  .flow-prop,
  .flow-theme-feature,
  .safari-actor,
  .preview-rsvp-actions button,
  .preview-flow-controls button,
  .flow-skip-button,
  .birthday-builder-grid[data-theme] :where(
    .primary-cta,
    .secondary-cta,
    .secondary-cta.light,
    [data-check-slug],
    [data-save-draft],
    [data-copy-summary],
    [data-preview-flow],
    [data-flow-play-intro],
    [data-preview-yes],
    [data-preview-maybe],
    [data-preview-no],
    .flow-success-close
  )::before,
  .birthday-builder-grid[data-theme] :where(
    .primary-cta,
    .secondary-cta,
    .secondary-cta.light,
    [data-check-slug],
    [data-save-draft],
    [data-copy-summary],
    [data-preview-flow],
    [data-flow-play-intro],
    [data-preview-yes],
    [data-preview-maybe],
    [data-preview-no],
    .flow-success-close
  )::after,
  .invite-flow-preview[data-mode="success"] .flow-screen--success::before,
  .invite-flow-preview[data-mode="success"] .flow-screen--success::after,
  .invite-flow-preview[data-mode="success"] .flow-success-card::before,
  .invite-flow-preview[data-mode="success"] .flow-success-card::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Final customer-facing birthday theme polish. Keep these near the end so older prototype rules cannot win. */
.theme-art--candle-party,
.public-theme-grid .theme-art--candle-party {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 232, 244, 0.26)),
    url("/assets/birthday-invites/candle-party-pastel-wallpaper.png") center / cover no-repeat;
}

.theme-art--candle-party::before,
.public-theme-grid .theme-art--candle-party::before {
  inset: 10% 12% 8%;
  background:
    radial-gradient(ellipse at 17% 7%, #fff4a4 0 9px, #efb84f 10px 14px, transparent 15px),
    radial-gradient(ellipse at 39% 4%, #fff4a4 0 11px, #efb84f 12px 16px, transparent 17px),
    radial-gradient(ellipse at 61% 7%, #fff4a4 0 9px, #efb84f 10px 14px, transparent 15px),
    radial-gradient(ellipse at 83% 4%, #fff4a4 0 11px, #efb84f 12px 16px, transparent 17px),
    linear-gradient(180deg, transparent 0 18%, #caa4d2 19% 100%) 12% 13% / 13% 86% no-repeat,
    linear-gradient(180deg, transparent 0 10%, #ffc47e 11% 100%) 34% 6% / 15% 94% no-repeat,
    linear-gradient(180deg, transparent 0 18%, #ff8fa8 19% 100%) 57% 13% / 14% 86% no-repeat,
    linear-gradient(180deg, transparent 0 10%, #b8dc8c 11% 100%) 78% 6% / 13% 94% no-repeat;
  filter: drop-shadow(0 12px 14px rgba(93, 48, 20, 0.18));
}

.theme-art--candle-party::after,
.public-theme-grid .theme-art--candle-party::after {
  inset: auto 10% 12% 10%;
  height: 26%;
  border: 5px solid #8fe7e1;
  border-top: 0;
  border-radius: 0 0 999px 999px;
  background: transparent;
  filter: drop-shadow(0 8px 8px rgba(5, 107, 140, 0.12));
}

.theme-art--princess-garden,
.public-theme-grid .theme-art--princess-garden {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
    url("/assets/birthday-invites/castle-quest-princess-bg.png") center / cover no-repeat;
}

.theme-art--princess-garden::before,
.public-theme-grid .theme-art--princess-garden::before {
  inset: 9% 15% 1%;
  background: url("/assets/birthday-invites/castle-quest-princess-3d.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 12px 16px rgba(114, 48, 92, 0.22));
}

.theme-art--princess-garden::after,
.public-theme-grid .theme-art--princess-garden::after {
  inset: 8% auto auto 8%;
  width: 36%;
  aspect-ratio: 1.4;
  background: url("/assets/birthday-invites/castle-quest-knight-bg.png") center / cover no-repeat;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  box-shadow: 0 10px 18px rgba(38, 55, 107, 0.18);
}

.theme-art--dino-dig,
.public-theme-grid .theme-art--dino-dig {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(80, 44, 22, 0.06)),
    url("/assets/birthday-invites/dino-volcano-valley-bg.webp") center / cover no-repeat;
}

.theme-art--dino-dig::before,
.public-theme-grid .theme-art--dino-dig::before {
  inset: 5% 12% 2%;
  background: url("/assets/birthday-invites/dino-trex-3d.webp") center bottom / contain no-repeat;
  filter: drop-shadow(0 13px 16px rgba(74, 43, 20, 0.24));
}

.theme-art--dino-dig::after,
.public-theme-grid .theme-art--dino-dig::after {
  inset: auto 10% 5% auto;
  width: 32%;
  aspect-ratio: 1;
  background: url("/assets/birthday-invites/dino-longneck-3d.webp") center bottom / contain no-repeat;
  filter: drop-shadow(0 10px 14px rgba(65, 78, 34, 0.2));
}

.theme-art--sports-day,
.public-theme-grid .theme-art--sports-day {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    url("/assets/birthday-invites/sports-day-allstar-cinematic-bg.webp") center / cover no-repeat;
}

.theme-art--sports-day::before,
.public-theme-grid .theme-art--sports-day::before {
  inset: 7% 16% 1%;
  background: url("/assets/birthday-invites/sports-day-allstar-3d.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 13px 16px rgba(39, 71, 45, 0.24));
}

.theme-art--sports-day::after,
.public-theme-grid .theme-art--sports-day::after {
  inset: 12% 10% auto auto;
  width: 27%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 45%, #173129 45% 55%, transparent 55%),
    linear-gradient(0deg, transparent 45%, #173129 45% 55%, transparent 55%),
    #f9fff4;
  box-shadow: 0 0 0 6px rgba(18, 50, 41, 0.42) inset;
}

.theme-art--space-rocket,
.public-theme-grid .theme-art--space-rocket {
  background:
    radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.28), transparent 22%),
    url("/assets/birthday-invites/space-astronaut-girl-starlight-bg.webp") center / cover no-repeat;
}

.theme-art--space-rocket::before,
.public-theme-grid .theme-art--space-rocket::before {
  inset: 7% 15% 1%;
  background: url("/assets/birthday-invites/space-astronaut-girl-3d.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 12px 16px rgba(8, 17, 45, 0.28));
}

.theme-art--space-rocket::after,
.public-theme-grid .theme-art--space-rocket::after {
  inset: 12% auto auto 8%;
  width: 35%;
  aspect-ratio: 1;
  background: url("/assets/birthday-invites/space-alien-girl-3d.png") center / contain no-repeat;
  filter: drop-shadow(0 8px 12px rgba(75, 40, 120, 0.2));
}

.theme-art--mermaid-lagoon,
.public-theme-grid .theme-art--mermaid-lagoon {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(5, 107, 140, 0.1)),
    url("/assets/birthday-invites/mermaid-lagoon-cinematic-bg.png") center / cover no-repeat;
}

.theme-art--mermaid-lagoon::before,
.public-theme-grid .theme-art--mermaid-lagoon::before {
  inset: 7% 19% 1%;
  background: url("/assets/birthday-invites/mermaid-lagoon-3d.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 12px 16px rgba(5, 67, 82, 0.24));
}

.theme-art--mermaid-lagoon::after,
.public-theme-grid .theme-art--mermaid-lagoon::after {
  inset: 14% 4% auto auto;
  width: 38%;
  aspect-ratio: 1.2;
  background: url("/assets/birthday-invites/mermaid-lagoon-shark-3d.png") center / contain no-repeat;
  filter: drop-shadow(0 9px 13px rgba(5, 67, 82, 0.2));
}

.theme-art--rainbow-art,
.public-theme-grid .theme-art--rainbow-art {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    url("/assets/birthday-invites/rainbow-art-studio-bg.webp") center / cover no-repeat;
}

.theme-art--rainbow-art::before,
.public-theme-grid .theme-art--rainbow-art::before {
  inset: 14% 10% 4%;
  background: url("/assets/birthday-invites/rainbow-paint-pixie-3d.png") center bottom / contain no-repeat;
  filter:
    drop-shadow(0 10px 14px rgba(132, 47, 86, 0.22))
    drop-shadow(0 0 12px rgba(255, 111, 168, 0.22));
}

.theme-art--rainbow-art::after,
.public-theme-grid .theme-art--rainbow-art::after {
  inset: auto 10% 8% 10%;
  height: 18%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 45%, #ff5c8d 0 6px, transparent 7px),
    radial-gradient(circle at 42% 38%, #ffd34c 0 6px, transparent 7px),
    radial-gradient(circle at 65% 48%, #48d98b 0 6px, transparent 7px),
    radial-gradient(circle at 84% 35%, #55a9ff 0 6px, transparent 7px);
}

.theme-art--superhero,
.public-theme-grid .theme-art--superhero {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
    url("/assets/birthday-invites/superhero-sky-city-bg.webp") center / cover no-repeat;
}

.theme-art--superhero::before,
.public-theme-grid .theme-art--superhero::before {
  inset: 10% 10% 2%;
  background: url("/assets/birthday-invites/superhero-cape-champion-3d.png") center bottom / contain no-repeat;
  filter:
    drop-shadow(0 12px 16px rgba(87, 40, 38, 0.26))
    drop-shadow(0 0 14px rgba(255, 231, 91, 0.24));
}

.theme-art--superhero::after,
.public-theme-grid .theme-art--superhero::after {
  inset: 9% 8% auto auto;
  width: 34%;
  aspect-ratio: 1;
  background: url("/assets/birthday-invites/superhero-star-guardian-3d.png") center / contain no-repeat;
  filter: drop-shadow(0 8px 12px rgba(58, 52, 123, 0.2));
}

.theme-art--arcade-game,
.public-theme-grid .theme-art--arcade-game {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    url("/assets/birthday-invites/arcade-neon-playroom-bg.webp") center / cover no-repeat;
}

.theme-art--arcade-game::before,
.public-theme-grid .theme-art--arcade-game::before {
  inset: 10% 16% 2%;
  background: url("/assets/birthday-invites/arcade-pixel-pal-3d.png") center bottom / contain no-repeat;
  filter:
    drop-shadow(0 12px 16px rgba(17, 24, 58, 0.28))
    drop-shadow(0 0 14px rgba(123, 255, 245, 0.28));
}

.theme-art--arcade-game::after,
.public-theme-grid .theme-art--arcade-game::after {
  inset: auto 10% 10% auto;
  width: 30%;
  aspect-ratio: 1;
  background: url("/assets/birthday-invites/arcade-game-champion-3d.png") center / contain no-repeat;
  filter: drop-shadow(0 10px 14px rgba(255, 93, 207, 0.22));
}

.theme-art--zoo-safari,
.public-theme-grid .theme-art--zoo-safari {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(92, 124, 55, 0.08)),
    url("/assets/birthday-invites/zoo-safari-cinematic-bg.png") center / cover no-repeat;
}

.theme-art--zoo-safari::before,
.public-theme-grid .theme-art--zoo-safari::before {
  inset: 6% 12% 1%;
  background: url("/assets/birthday-invites/zoo-safari-lion-3d.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 13px 16px rgba(111, 65, 13, 0.24));
}

.theme-art--zoo-safari::after,
.public-theme-grid .theme-art--zoo-safari::after {
  inset: auto 8% 4% auto;
  width: 31%;
  aspect-ratio: 0.7;
  background: url("/assets/birthday-invites/zoo-safari-gazelle-3d.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 10px 14px rgba(111, 65, 13, 0.18));
}

.theme-character-art--candle-boy,
.theme-character-art--candle-girl,
.theme-character-art--candle-blonde,
.theme-character-art--candle-spark-magician,
.theme-character-art--castle-blonde,
.theme-character-art--dragon-banner-knight,
.theme-character-art--dino-blonde,
.theme-character-art--raptor-ranger,
.theme-character-art--sports-blonde,
.theme-character-art--mvp-captain,
.theme-character-art--space-blonde,
.theme-character-art--rocket-cadet,
.theme-character-art--lagoon-blonde,
.theme-character-art--reef-captain,
.theme-character-art--rainbow-blonde,
.theme-character-art--paint-wizard,
.theme-character-art--hero-blonde,
.theme-character-art--bolt-defender,
.theme-character-art--safari-blonde,
.theme-character-art--trail-ranger,
.theme-character-art--arcade-blonde,
.theme-character-art--joystick-hero {
  --character-picker-bg: linear-gradient(135deg, #fff9e8, #ffe8f5 54%, #dff9f7);
  --character-picker-image: none;
  --character-picker-fit: contain;
  border-color: color-mix(in srgb, var(--theme-accent, #d9a84e) 42%, #ffffff);
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.88), transparent 36%),
    var(--character-picker-bg);
}

.theme-character-art--candle-boy { --character-picker-image: url("/assets/birthday-invites/candle-party-boy-wish.png"); }
.theme-character-art--candle-girl { --character-picker-image: url("/assets/birthday-invites/candle-party-wish-girl.png"); }
.theme-character-art--candle-blonde { --character-picker-image: url("/assets/birthday-invites/candle-party-blonde-fairy.png"); }
.theme-character-art--candle-spark-magician { --character-picker-image: url("/assets/birthday-invites/candle-spark-magician.png"); }
.theme-character-art--castle-blonde { --character-picker-image: url("/assets/birthday-invites/castle-quest-blonde-princess.png"); }
.theme-character-art--dragon-banner-knight { --character-picker-image: url("/assets/birthday-invites/castle-dragon-banner-knight.png"); }
.theme-character-art--dino-blonde { --character-picker-image: url("/assets/birthday-invites/dino-dig-blonde-explorer.png"); }
.theme-character-art--raptor-ranger { --character-picker-image: url("/assets/birthday-invites/dino-raptor-ranger.png"); }
.theme-character-art--sports-blonde { --character-picker-image: url("/assets/birthday-invites/sports-day-blonde-allstar.png"); }
.theme-character-art--mvp-captain { --character-picker-image: url("/assets/birthday-invites/sports-mvp-captain.png"); }
.theme-character-art--space-blonde { --character-picker-image: url("/assets/birthday-invites/space-rocket-blonde-astronaut.png"); }
.theme-character-art--rocket-cadet { --character-picker-image: url("/assets/birthday-invites/space-rocket-cadet.png"); }
.theme-character-art--lagoon-blonde { --character-picker-image: url("/assets/birthday-invites/lagoon-blonde-princess.png"); }
.theme-character-art--reef-captain { --character-picker-image: url("/assets/birthday-invites/lagoon-reef-captain.png"); }
.theme-character-art--rainbow-blonde { --character-picker-image: url("/assets/birthday-invites/rainbow-art-blonde-painter.png"); }
.theme-character-art--paint-wizard { --character-picker-image: url("/assets/birthday-invites/rainbow-paint-wizard.png"); }
.theme-character-art--hero-blonde { --character-picker-image: url("/assets/birthday-invites/hero-city-blonde-guardian.png"); }
.theme-character-art--bolt-defender { --character-picker-image: url("/assets/birthday-invites/hero-bolt-defender.png"); }
.theme-character-art--safari-blonde { --character-picker-image: url("/assets/birthday-invites/zoo-safari-blonde-guide.png"); }
.theme-character-art--trail-ranger { --character-picker-image: url("/assets/birthday-invites/safari-trail-ranger.png"); }
.theme-character-art--arcade-blonde { --character-picker-image: url("/assets/birthday-invites/arcade-blonde-gamer.png"); }
.theme-character-art--joystick-hero { --character-picker-image: url("/assets/birthday-invites/arcade-joystick-hero.png"); }

.theme-character-art--candle-girl,
.theme-character-art--candle-blonde,
.theme-character-art--candle-spark-magician,
.theme-character-art--castle-blonde,
.theme-character-art--dragon-banner-knight,
.theme-character-art--dino-blonde,
.theme-character-art--raptor-ranger,
.theme-character-art--sports-blonde,
.theme-character-art--mvp-captain,
.theme-character-art--space-blonde,
.theme-character-art--rocket-cadet,
.theme-character-art--lagoon-blonde,
.theme-character-art--reef-captain,
.theme-character-art--rainbow-blonde,
.theme-character-art--paint-wizard,
.theme-character-art--hero-blonde,
.theme-character-art--bolt-defender,
.theme-character-art--safari-blonde,
.theme-character-art--trail-ranger,
.theme-character-art--arcade-blonde,
.theme-character-art--joystick-hero {
  --character-picker-fit: auto 178%;
}

.theme-character-art--candle-boy::after,
.theme-character-art--candle-girl::after,
.theme-character-art--candle-blonde::after,
.theme-character-art--candle-spark-magician::after,
.theme-character-art--castle-blonde::after,
.theme-character-art--dragon-banner-knight::after,
.theme-character-art--dino-blonde::after,
.theme-character-art--raptor-ranger::after,
.theme-character-art--sports-blonde::after,
.theme-character-art--mvp-captain::after,
.theme-character-art--space-blonde::after,
.theme-character-art--rocket-cadet::after,
.theme-character-art--lagoon-blonde::after,
.theme-character-art--reef-captain::after,
.theme-character-art--rainbow-blonde::after,
.theme-character-art--paint-wizard::after,
.theme-character-art--hero-blonde::after,
.theme-character-art--bolt-defender::after,
.theme-character-art--safari-blonde::after,
.theme-character-art--trail-ranger::after,
.theme-character-art--arcade-blonde::after,
.theme-character-art--joystick-hero::after {
  inset: 0 4px 1px;
  background-image: var(--character-picker-image);
  filter:
    drop-shadow(0 8px 10px rgba(64, 44, 27, 0.2))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.22));
}

/* Customer character picker thumbnails must stay inside their portrait frame. */
.theme-character-grid label {
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 112px;
  overflow: hidden;
}

.theme-character-art {
  width: 96px;
  height: 96px;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  background-position: center;
  background-size: cover;
}

.theme-character-art::after {
  inset: 0 !important;
  background-position: center bottom !important;
  background-size: var(--character-picker-safe-fit, auto 108%) !important;
  transform: none !important;
  clip-path: none !important;
  max-width: none;
}

.theme-character-art--candle-blonde,
.theme-character-art--castle-blonde,
.theme-character-art--dino-blonde,
.theme-character-art--sports-blonde,
.theme-character-art--space-blonde,
.theme-character-art--lagoon-blonde,
.theme-character-art--rainbow-blonde,
.theme-character-art--hero-blonde,
.theme-character-art--safari-blonde,
.theme-character-art--arcade-blonde {
  --character-picker-safe-fit: auto 176%;
}

.theme-character-grid strong,
.theme-character-grid small {
  overflow-wrap: anywhere;
}

:where(.preview-card, .invite-flow-preview)[data-theme="candle-party"][data-theme-character="candle-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/candle-party-blonde-fairy.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="candle-party"][data-theme-character="candle-girl"] {
  --creative-character-image: url("/assets/birthday-invites/candle-party-wish-girl.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="candle-party"][data-theme-character="candle-boy"] {
  --creative-character-image: url("/assets/birthday-invites/candle-party-boy-wish.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="candle-party"][data-theme-character="candle-spark-magician"] {
  --creative-character-image: url("/assets/birthday-invites/candle-spark-magician.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="princess-garden"][data-theme-character="castle-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/castle-quest-blonde-princess.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="princess-garden"][data-theme-character="dragon-banner-knight"] {
  --creative-character-image: url("/assets/birthday-invites/castle-dragon-banner-knight.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="dino-dig"][data-theme-character="dino-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/dino-dig-blonde-explorer.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="dino-dig"][data-theme-character="raptor-ranger"] {
  --creative-character-image: url("/assets/birthday-invites/dino-raptor-ranger.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="sports-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/sports-day-blonde-allstar.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character="mvp-captain"] {
  --creative-character-image: url("/assets/birthday-invites/sports-mvp-captain.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="space-rocket"][data-theme-character="space-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/space-rocket-blonde-astronaut.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="space-rocket"][data-theme-character="rocket-cadet"] {
  --creative-character-image: url("/assets/birthday-invites/space-rocket-cadet.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="mermaid-lagoon"][data-theme-character="lagoon-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/lagoon-blonde-princess.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="mermaid-lagoon"][data-theme-character="reef-captain"] {
  --creative-character-image: url("/assets/birthday-invites/lagoon-reef-captain.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="mermaid-lagoon"][data-theme-character="axolotl"] {
  --creative-character-image: url("/assets/birthday-invites/lagoon-axolotl-3d.png");
  --creative-glow: rgba(255, 151, 193, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme="mermaid-lagoon"][data-theme-character="blue-axolotl"] {
  --creative-character-image: url("/assets/birthday-invites/lagoon-blue-axolotl-3d.png");
  --creative-glow: rgba(77, 219, 255, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme="rainbow-art"][data-theme-character="rainbow-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/rainbow-art-blonde-painter.png");
  --creative-glow: rgba(255, 111, 168, 0.46);
  --creative-title: #7a265e;
  --creative-ink: #2d3247;
  --creative-muted: #5f5467;
  --label-bg: linear-gradient(135deg, #ff6fa8, #ffd34c, #57d7ff);
  --label-ink: #16303a;
  --button-bg: linear-gradient(135deg, #ff6fa8, #ffd34c, #57d7ff);
  --button-ink: #16303a;
}

:where(.preview-card, .invite-flow-preview)[data-theme="rainbow-art"][data-theme-character="paint-wizard"] {
  --creative-character-image: url("/assets/birthday-invites/rainbow-paint-wizard.png");
  --creative-glow: rgba(47, 190, 203, 0.46);
  --creative-title: #145f72;
  --creative-ink: #263547;
  --creative-muted: #4c5d69;
  --label-bg: linear-gradient(135deg, #2fbecb, #ffd34c, #ff6fa8);
  --label-ink: #16303a;
  --button-bg: linear-gradient(135deg, #2fbecb, #ffd34c, #ff6fa8);
  --button-ink: #16303a;
}

.invite-flow-preview[data-theme="rainbow-art"]:is(
  [data-theme-character="rainbow-blonde"],
  [data-theme-character="paint-wizard"]
) {
  --content-panel:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 246, 0.9));
  --rsvp-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(252, 248, 255, 0.9));
  --rsvp-border: rgba(117, 64, 104, 0.22);
  --panel-border: rgba(117, 64, 104, 0.22);
  --detail-bg: rgba(255, 255, 255, 0.72);
  --detail-border: rgba(117, 64, 104, 0.2);
  --detail-label: color-mix(in srgb, var(--theme-accent) 54%, #263547);
  --detail-ink: var(--creative-ink);
}

:where(.preview-card, .invite-flow-preview)[data-theme="superhero"][data-theme-character="hero-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/hero-city-blonde-guardian.png");
  --creative-glow: rgba(255, 231, 91, 0.44);
  --creative-title: #ffffff;
  --creative-ink: #f8fbff;
  --creative-muted: rgba(255, 245, 245, 0.96);
  --label-bg: linear-gradient(135deg, #f15f78, #ffe75b);
  --label-ink: #17314a;
  --button-bg: linear-gradient(135deg, #f15f78, #ffe75b);
  --button-ink: #17314a;
}

:where(.preview-card, .invite-flow-preview)[data-theme="superhero"][data-theme-character="bolt-defender"] {
  --creative-character-image: url("/assets/birthday-invites/hero-bolt-defender.png");
  --creative-glow: rgba(255, 211, 76, 0.44);
  --creative-title: #ffffff;
  --creative-ink: #f8fbff;
  --creative-muted: rgba(255, 245, 245, 0.96);
  --label-bg: linear-gradient(135deg, #3a7cf5, #ffd34c);
  --label-ink: #17314a;
  --button-bg: linear-gradient(135deg, #3a7cf5, #ffd34c);
  --button-ink: #17314a;
}

:where(.preview-card, .invite-flow-preview)[data-theme="zoo-safari"][data-theme-character="safari-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/zoo-safari-blonde-guide.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="zoo-safari"][data-theme-character="trail-ranger"] {
  --creative-character-image: url("/assets/birthday-invites/safari-trail-ranger.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="arcade-game"][data-theme-character="arcade-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/arcade-blonde-gamer.png");
  --creative-glow: rgba(255, 116, 212, 0.46);
  --creative-title: #ffffff;
  --creative-ink: #f8fbff;
  --creative-muted: rgba(255, 235, 250, 0.94);
  --label-bg: linear-gradient(135deg, #ff74d4, #7bfff5);
  --label-ink: #101734;
  --button-bg: linear-gradient(135deg, #ff74d4, #7bfff5);
  --button-ink: #101734;
}

:where(.preview-card, .invite-flow-preview)[data-theme="arcade-game"][data-theme-character="joystick-hero"] {
  --creative-character-image: url("/assets/birthday-invites/arcade-joystick-hero.png");
  --creative-glow: rgba(123, 255, 245, 0.46);
  --creative-title: #ffffff;
  --creative-ink: #f8fbff;
  --creative-muted: rgba(235, 255, 252, 0.94);
  --label-bg: linear-gradient(135deg, #7bfff5, #9b69ff);
  --label-ink: #101734;
  --button-bg: linear-gradient(135deg, #7bfff5, #9b69ff);
  --button-ink: #101734;
}

:where(.preview-card, .invite-flow-preview)[data-theme][data-theme-character$="-blonde"] {
  --character-art-fit: auto 178%;
}

:where(.preview-card, .invite-flow-preview):is(
  [data-theme-character="candle-spark-magician"],
  [data-theme-character="dragon-banner-knight"],
  [data-theme-character="raptor-ranger"],
  [data-theme-character="mvp-captain"],
  [data-theme-character="rocket-cadet"],
  [data-theme-character="reef-captain"],
  [data-theme-character="paint-wizard"],
  [data-theme-character="bolt-defender"],
  [data-theme-character="trail-ranger"],
  [data-theme-character="joystick-hero"]
) {
  --character-art-fit: contain;
}

.preview-card:is(
  [data-theme-character$="-blonde"],
  [data-theme-character="candle-boy"],
  [data-theme-character="candle-girl"],
  [data-theme-character="candle-spark-magician"],
  [data-theme-character="dragon-banner-knight"],
  [data-theme-character="raptor-ranger"],
  [data-theme-character="mvp-captain"],
  [data-theme-character="rocket-cadet"],
  [data-theme-character="reef-captain"],
  [data-theme-character="paint-wizard"],
  [data-theme-character="bolt-defender"],
  [data-theme-character="trail-ranger"],
  [data-theme-character="joystick-hero"]
) .preview-candles span:nth-child(1) {
  width: 124px;
  height: 150px;
  border-radius: 0;
  background: var(--creative-character-image) center bottom / var(--character-art-fit, contain) no-repeat;
  box-shadow: none;
  filter:
    drop-shadow(0 12px 16px rgba(35, 25, 20, 0.18))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.28));
}

.preview-card:is(
  [data-theme-character$="-blonde"],
  [data-theme-character="candle-boy"],
  [data-theme-character="candle-girl"],
  [data-theme-character="candle-spark-magician"],
  [data-theme-character="dragon-banner-knight"],
  [data-theme-character="raptor-ranger"],
  [data-theme-character="mvp-captain"],
  [data-theme-character="rocket-cadet"],
  [data-theme-character="reef-captain"],
  [data-theme-character="paint-wizard"],
  [data-theme-character="bolt-defender"],
  [data-theme-character="trail-ranger"],
  [data-theme-character="joystick-hero"]
) .preview-candles span:nth-child(1)::before,
.preview-card:is(
  [data-theme-character$="-blonde"],
  [data-theme-character="candle-boy"],
  [data-theme-character="candle-girl"],
  [data-theme-character="candle-spark-magician"],
  [data-theme-character="dragon-banner-knight"],
  [data-theme-character="raptor-ranger"],
  [data-theme-character="mvp-captain"],
  [data-theme-character="rocket-cadet"],
  [data-theme-character="reef-captain"],
  [data-theme-character="paint-wizard"],
  [data-theme-character="bolt-defender"],
  [data-theme-character="trail-ranger"],
  [data-theme-character="joystick-hero"]
) .preview-candles span:nth-child(n + 2) {
  display: none;
}

.invite-flow-preview:is(
  [data-theme-character$="-blonde"],
  [data-theme-character="candle-boy"],
  [data-theme-character="candle-girl"],
  [data-theme-character="candle-spark-magician"],
  [data-theme-character="dragon-banner-knight"],
  [data-theme-character="raptor-ranger"],
  [data-theme-character="mvp-captain"],
  [data-theme-character="rocket-cadet"],
  [data-theme-character="reef-captain"],
  [data-theme-character="paint-wizard"],
  [data-theme-character="bolt-defender"],
  [data-theme-character="trail-ranger"],
  [data-theme-character="joystick-hero"]
) .flow-character-masthead .flow-theme-feature,
.invite-flow-preview[data-theme][data-theme-character$="-blonde"] .flow-character-masthead .flow-theme-feature,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-boy"] .flow-character-masthead .flow-theme-feature,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-girl"] .flow-character-masthead .flow-theme-feature,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-blonde"] .flow-character-masthead .flow-theme-feature,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-spark-magician"] .flow-character-masthead .flow-theme-feature {
  width: clamp(230px, 38vw, 360px);
  height: clamp(270px, 44vw, 430px);
  border: 0;
  border-radius: 0;
  background: var(--creative-character-image) center bottom / var(--character-art-fit, contain) no-repeat;
  box-shadow: none;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
  filter:
    drop-shadow(0 24px 28px rgba(35, 25, 20, 0.22))
    drop-shadow(0 0 24px color-mix(in srgb, var(--theme-accent, #d9a84e) 28%, transparent));
  transform: none;
}

.invite-flow-preview:is(
  [data-theme-character$="-blonde"],
  [data-theme-character="candle-boy"],
  [data-theme-character="candle-girl"],
  [data-theme-character="candle-spark-magician"],
  [data-theme-character="dragon-banner-knight"],
  [data-theme-character="raptor-ranger"],
  [data-theme-character="mvp-captain"],
  [data-theme-character="rocket-cadet"],
  [data-theme-character="reef-captain"],
  [data-theme-character="paint-wizard"],
  [data-theme-character="bolt-defender"],
  [data-theme-character="trail-ranger"],
  [data-theme-character="joystick-hero"]
) .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview:is(
  [data-theme-character$="-blonde"],
  [data-theme-character="candle-boy"],
  [data-theme-character="candle-girl"],
  [data-theme-character="candle-spark-magician"],
  [data-theme-character="dragon-banner-knight"],
  [data-theme-character="raptor-ranger"],
  [data-theme-character="mvp-captain"],
  [data-theme-character="rocket-cadet"],
  [data-theme-character="reef-captain"],
  [data-theme-character="paint-wizard"],
  [data-theme-character="bolt-defender"],
  [data-theme-character="trail-ranger"],
  [data-theme-character="joystick-hero"]
) .flow-character-masthead .flow-theme-feature::after,
.invite-flow-preview[data-theme][data-theme-character$="-blonde"] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme][data-theme-character$="-blonde"] .flow-character-masthead .flow-theme-feature::after,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-boy"] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-boy"] .flow-character-masthead .flow-theme-feature::after,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-girl"] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-girl"] .flow-character-masthead .flow-theme-feature::after,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-blonde"] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-blonde"] .flow-character-masthead .flow-theme-feature::after,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-spark-magician"] .flow-character-masthead .flow-theme-feature::before,
.invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-spark-magician"] .flow-character-masthead .flow-theme-feature::after {
  display: none !important;
}

@media (max-width: 760px) {
  .invite-flow-preview:is(
    [data-theme-character$="-blonde"],
    [data-theme-character="candle-boy"],
    [data-theme-character="candle-girl"],
    [data-theme-character="candle-spark-magician"],
    [data-theme-character="dragon-banner-knight"],
    [data-theme-character="raptor-ranger"],
    [data-theme-character="mvp-captain"],
    [data-theme-character="rocket-cadet"],
    [data-theme-character="reef-captain"],
    [data-theme-character="paint-wizard"],
    [data-theme-character="bolt-defender"],
    [data-theme-character="trail-ranger"],
    [data-theme-character="joystick-hero"]
  ) .flow-character-masthead .flow-theme-feature,
  .invite-flow-preview[data-theme][data-theme-character$="-blonde"] .flow-character-masthead .flow-theme-feature,
  .invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-boy"] .flow-character-masthead .flow-theme-feature,
  .invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-girl"] .flow-character-masthead .flow-theme-feature,
  .invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-blonde"] .flow-character-masthead .flow-theme-feature,
  .invite-flow-preview[data-theme="candle-party"][data-theme-character="candle-spark-magician"] .flow-character-masthead .flow-theme-feature {
    width: clamp(250px, 78vw, 380px);
    height: clamp(300px, 92vw, 470px);
  }
}

/* Candle Party now follows the same shared character-card structure as the rest of the birthday themes. */
.invite-flow-preview[data-theme="candle-party"] {
  --candle-flame-glow-pattern:
    radial-gradient(ellipse at 5.8% 8%, rgba(255, 245, 168, 0.72) 0 1.2%, rgba(255, 181, 82, 0.26) 1.4% 3.3%, transparent 4.8%),
    radial-gradient(ellipse at 10.6% 34%, rgba(255, 245, 168, 0.62) 0 1.2%, rgba(255, 181, 82, 0.24) 1.4% 3.1%, transparent 4.6%),
    radial-gradient(ellipse at 17.6% 31%, rgba(255, 245, 168, 0.66) 0 1%, rgba(255, 181, 82, 0.22) 1.3% 3%, transparent 4.4%),
    radial-gradient(ellipse at 23.2% 42.2%, rgba(255, 245, 168, 0.58) 0 1%, rgba(255, 181, 82, 0.2) 1.3% 3%, transparent 4.3%),
    radial-gradient(ellipse at 84.8% 8.4%, rgba(255, 245, 168, 0.7) 0 1.2%, rgba(255, 181, 82, 0.24) 1.5% 3.2%, transparent 4.6%),
    radial-gradient(ellipse at 91.4% 7.6%, rgba(255, 245, 168, 0.7) 0 1.2%, rgba(255, 181, 82, 0.24) 1.5% 3.2%, transparent 4.6%),
    radial-gradient(ellipse at 80% 49.6%, rgba(255, 245, 168, 0.56) 0 1%, rgba(255, 181, 82, 0.2) 1.4% 3%, transparent 4.2%),
    radial-gradient(ellipse at 87.2% 53.6%, rgba(255, 245, 168, 0.58) 0 1%, rgba(255, 181, 82, 0.2) 1.4% 3%, transparent 4.2%),
    radial-gradient(ellipse at 94.2% 41.5%, rgba(255, 245, 168, 0.58) 0 1%, rgba(255, 181, 82, 0.2) 1.4% 3%, transparent 4.2%);
  --theme-bg:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 248, 250, 0.1) 42%, rgba(255, 226, 240, 0.16) 100%),
    linear-gradient(135deg, rgba(255, 244, 164, 0.22), transparent 26%, rgba(159, 233, 229, 0.18) 58%, rgba(255, 142, 172, 0.2)),
    url("/assets/birthday-invites/candle-party-pastel-wallpaper.png") center / cover no-repeat,
    linear-gradient(145deg, #fff8dd, #ffe8f7 56%, #dff9f7);
  --theme-pattern:
    var(--candle-flame-glow-pattern),
    repeating-linear-gradient(115deg, transparent 0 34px, rgba(255, 255, 255, 0.2) 35px 37px, transparent 38px 72px),
    radial-gradient(circle at 12% 20%, rgba(255, 142, 172, 0.2) 0 5px, transparent 6px),
    radial-gradient(circle at 76% 24%, rgba(102, 200, 189, 0.18) 0 5px, transparent 6px),
    radial-gradient(circle at 46% 82%, rgba(255, 212, 88, 0.18) 0 4px, transparent 5px);
  --theme-vignette:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)),
    linear-gradient(90deg, rgba(255, 244, 164, 0.12), transparent 28%, rgba(159, 233, 229, 0.12) 72%, rgba(255, 142, 172, 0.1));
  --flow-title: #b84784;
  --flow-text: #42273b;
  --flow-muted: rgba(83, 50, 76, 0.78);
  --flow-card: rgba(255, 250, 254, 0.72);
  --content-panel: rgba(255, 250, 254, 0.64);
  --panel-border: rgba(255, 255, 255, 0.62);
  --detail-bg: rgba(255, 255, 255, 0.5);
  --detail-border: rgba(184, 71, 132, 0.16);
  --detail-label: #b84784;
  --detail-ink: #42273b;
  --label-bg: linear-gradient(135deg, #ff8fac, #ffe889);
  --label-ink: #42273b;
  --rsvp-bg: rgba(255, 250, 254, 0.7);
  --rsvp-ink: #42273b;
  --rsvp-muted: rgba(83, 50, 76, 0.74);
  --rsvp-border: rgba(184, 71, 132, 0.16);
  --button-bg: linear-gradient(135deg, #ff8fac, #9fe9e5);
  --button-bg-2: rgba(255, 255, 255, 0.62);
  --button-bg-3: rgba(255, 255, 255, 0.48);
  --button-ink: #42273b;
}

.invite-flow-preview[data-theme="candle-party"] .flow-screen--invite {
  color: var(--flow-text);
  background: var(--theme-bg);
}

.invite-flow-preview[data-theme="candle-party"] .flow-theme-scene {
  background: var(--theme-bg);
}

.invite-flow-preview[data-theme="candle-party"] .flow-theme-scene::before {
  inset: 0;
  opacity: 0.78;
  background: var(--theme-pattern);
  mix-blend-mode: normal;
  animation: candlePartyFlowDrift 18s ease-in-out infinite alternate;
}

.invite-flow-preview[data-theme="candle-party"] .flow-character-masthead .flow-theme-age-badge {
  left: calc(50% + clamp(98px, 15vw, 220px));
  top: clamp(22px, 4vw, 54px);
  bottom: auto;
}

@media (max-width: 760px) {
  .invite-flow-preview[data-theme="candle-party"] .flow-character-masthead .flow-theme-age-badge {
    left: calc(50% + clamp(84px, 20vw, 108px));
    top: clamp(-112px, -22vw, -84px);
    bottom: auto;
  }
}

.invite-flow-preview[data-theme="candle-party"] .flow-theme-scene::after {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--theme-vignette);
  opacity: 1;
  transform: none;
  animation: candlePartyFlowGlow 9s ease-in-out infinite;
}

.invite-flow-preview[data-theme="candle-party"] .flow-prop {
  display: none;
}

.invite-flow-preview[data-theme="candle-party"] .flow-invite-layout {
  align-content: end;
  padding: 22px;
}

.invite-flow-preview[data-theme="candle-party"] .flow-invite-copy {
  max-width: none;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 14px;
  background: var(--content-panel);
  box-shadow: 0 18px 46px rgba(82, 43, 59, 0.14);
  backdrop-filter: blur(12px);
}

@keyframes candlePartyFlowDrift {
  0% {
    opacity: 0.7;
    background-position: 0 0, 0 0, 0 0, -18vw 0;
  }

  100% {
    opacity: 0.94;
    background-position: 0 8px, 0 -6px, 0 4px, 18vw 0;
  }
}

@keyframes candlePartyFlowGlow {
  0%,
  100% {
    opacity: 0.76;
  }

  50% {
    opacity: 1;
  }
}

.invite-flow-preview[data-theme="candle-party"] .flow-theme-label {
  border-color: transparent;
  background: var(--label-bg);
  color: var(--label-ink);
}

.invite-flow-preview[data-theme="candle-party"] .flow-invite-copy h3,
.invite-flow-preview[data-theme="candle-party"] .flow-invite-copy p {
  width: 100%;
  max-width: none;
  color: var(--flow-text);
}

.invite-flow-preview[data-theme="candle-party"] .flow-invite-copy p {
  color: var(--flow-muted);
}

.invite-flow-preview[data-theme="candle-party"] .flow-details-grid div {
  border-color: var(--detail-border);
  background: var(--detail-bg);
}

.invite-flow-preview[data-theme="candle-party"] .flow-details-grid dt {
  color: var(--detail-label);
}

.invite-flow-preview[data-theme="candle-party"] .flow-details-grid dd {
  color: var(--detail-ink);
}

.invite-flow-preview[data-theme="candle-party"] .flow-rsvp-card {
  border-color: var(--rsvp-border);
  background: var(--rsvp-bg);
}

.invite-flow-preview[data-theme="candle-party"] .flow-rsvp-card strong {
  color: var(--rsvp-ink);
}

.invite-flow-preview[data-theme="candle-party"] .flow-rsvp-card small {
  color: var(--rsvp-muted);
}

.invite-flow-preview[data-theme="candle-party"] .preview-rsvp-actions button {
  border-color: var(--rsvp-border);
  background: var(--button-bg-2);
  color: var(--button-ink);
}

.invite-flow-preview[data-theme="candle-party"] .preview-rsvp-actions button:nth-child(3) {
  background: var(--button-bg-3);
}

.invite-flow-preview[data-theme="candle-party"] .preview-rsvp-actions button:hover,
.invite-flow-preview[data-theme="candle-party"] .preview-rsvp-actions button.is-selected {
  border-color: transparent;
  background: var(--button-bg);
  color: var(--button-ink);
}

/* Cross-theme character catalog: the selected theme keeps its world, while the chosen character supplies the masthead art. */
:where(.preview-card, .invite-flow-preview)[data-theme="candle-party"][data-theme-character] {
  --selected-theme-bg-image: url("/assets/birthday-invites/candle-party-pastel-wallpaper.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="princess-garden"][data-theme-character] {
  --selected-theme-bg-image: url("/assets/birthday-invites/castle-quest-princess-bg.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="dino-dig"][data-theme-character] {
  --selected-theme-bg-image: url("/assets/birthday-invites/dino-volcano-valley-bg.webp");
}

:where(.preview-card, .invite-flow-preview)[data-theme="sports-day"][data-theme-character] {
  --selected-theme-bg-image: var(--sports-bg-image, url("/assets/birthday-invites/sports-day-allstar-cinematic-bg.webp"));
}

:where(.preview-card, .invite-flow-preview)[data-theme="space-rocket"][data-theme-character] {
  --selected-theme-bg-image: url("/assets/birthday-invites/space-astronaut-girl-starlight-bg.webp");
}

:where(.preview-card, .invite-flow-preview)[data-theme="mermaid-lagoon"][data-theme-character] {
  --selected-theme-bg-image: url("/assets/birthday-invites/mermaid-lagoon-cinematic-bg.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="rainbow-art"][data-theme-character] {
  --selected-theme-bg-image: url("/assets/birthday-invites/rainbow-art-studio-bg.webp");
  --creative-bg-image: url("/assets/birthday-invites/rainbow-art-studio-bg.webp");
}

:where(.preview-card, .invite-flow-preview)[data-theme="superhero"][data-theme-character] {
  --selected-theme-bg-image: url("/assets/birthday-invites/superhero-sky-city-bg.webp");
  --creative-bg-image: url("/assets/birthday-invites/superhero-sky-city-bg.webp");
}

:where(.preview-card, .invite-flow-preview)[data-theme="zoo-safari"][data-theme-character] {
  --selected-theme-bg-image: url("/assets/birthday-invites/zoo-safari-cinematic-bg.png");
}

:where(.preview-card, .invite-flow-preview)[data-theme="arcade-game"][data-theme-character] {
  --selected-theme-bg-image: url("/assets/birthday-invites/arcade-neon-playroom-bg.webp");
  --creative-bg-image: url("/assets/birthday-invites/arcade-neon-playroom-bg.webp");
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="candle-boy"] {
  --creative-character-image: url("/assets/birthday-invites/candle-party-boy-wish.png");
  --creative-glow: rgba(98, 203, 209, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="candle-girl"] {
  --creative-character-image: url("/assets/birthday-invites/candle-party-wish-girl.png");
  --creative-glow: rgba(217, 142, 207, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="candle-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/candle-party-blonde-fairy.png");
  --creative-glow: rgba(255, 142, 172, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="candle-spark-magician"] {
  --creative-character-image: url("/assets/birthday-invites/candle-spark-magician.png");
  --creative-glow: rgba(72, 197, 207, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="knight"] {
  --creative-character-image: url("/assets/birthday-invites/castle-quest-knight-3d.png");
  --creative-glow: rgba(65, 107, 215, 0.36);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="princess"] {
  --creative-character-image: url("/assets/birthday-invites/castle-quest-princess-3d.png");
  --creative-glow: rgba(200, 63, 168, 0.36);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="castle-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/castle-quest-blonde-princess.png");
  --creative-glow: rgba(214, 111, 194, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="dragon-banner-knight"] {
  --creative-character-image: url("/assets/birthday-invites/castle-dragon-banner-knight.png");
  --creative-glow: rgba(65, 107, 215, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="trex"] {
  --creative-character-image: url("/assets/birthday-invites/dino-trex-3d.webp");
  --creative-glow: rgba(183, 95, 47, 0.38);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="longneck"] {
  --creative-character-image: url("/assets/birthday-invites/dino-longneck-3d.webp");
  --creative-glow: rgba(95, 159, 112, 0.38);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="dino-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/dino-dig-blonde-explorer.png");
  --creative-glow: rgba(208, 128, 56, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="raptor-ranger"] {
  --creative-character-image: url("/assets/birthday-invites/dino-raptor-ranger.png");
  --creative-glow: rgba(192, 107, 46, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="football"] {
  --creative-character-image: url("/assets/birthday-invites/sports-day-football-cutout.png");
  --sports-character-image: url("/assets/birthday-invites/sports-day-football-cutout.png");
  --creative-glow: rgba(69, 145, 255, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="baseball"] {
  --creative-character-image: url("/assets/birthday-invites/sports-day-baseball-cutout.png");
  --sports-character-image: url("/assets/birthday-invites/sports-day-baseball-cutout.png");
  --creative-glow: rgba(255, 117, 84, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="basketball"] {
  --creative-character-image: url("/assets/birthday-invites/sports-day-basketball-cutout.png");
  --sports-character-image: url("/assets/birthday-invites/sports-day-basketball-cutout.png");
  --creative-glow: rgba(255, 149, 52, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="soccer"] {
  --creative-character-image: url("/assets/birthday-invites/sports-day-soccer-cutout.png");
  --sports-character-image: url("/assets/birthday-invites/sports-day-soccer-cutout.png");
  --creative-glow: rgba(111, 210, 104, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="gymnastics"] {
  --creative-character-image: url("/assets/birthday-invites/sports-day-gymnastics-cutout.png");
  --sports-character-image: url("/assets/birthday-invites/sports-day-gymnastics-cutout.png");
  --creative-glow: rgba(255, 111, 188, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="dance"] {
  --creative-character-image: url("/assets/birthday-invites/sports-day-dance-cutout.png");
  --sports-character-image: url("/assets/birthday-invites/sports-day-dance-cutout.png");
  --creative-glow: rgba(168, 107, 255, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="allstar"] {
  --creative-character-image: url("/assets/birthday-invites/sports-day-allstar-cutout.png");
  --sports-character-image: url("/assets/birthday-invites/sports-day-allstar-cutout.png");
  --creative-glow: rgba(255, 202, 79, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="sports-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/sports-day-blonde-allstar.png");
  --sports-character-image: url("/assets/birthday-invites/sports-day-blonde-allstar.png");
  --creative-glow: rgba(228, 167, 47, 0.4);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="mvp-captain"] {
  --creative-character-image: url("/assets/birthday-invites/sports-mvp-captain.png");
  --sports-character-image: url("/assets/birthday-invites/sports-mvp-captain.png");
  --creative-glow: rgba(62, 138, 203, 0.4);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="alien-boy"] {
  --creative-character-image: url("/assets/birthday-invites/space-alien-boy-3d.png");
  --creative-glow: rgba(71, 212, 211, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="alien-girl"] {
  --creative-character-image: url("/assets/birthday-invites/space-alien-girl-3d.png");
  --creative-glow: rgba(196, 122, 255, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="astronaut-boy"] {
  --creative-character-image: url("/assets/birthday-invites/space-astronaut-boy-3d.png");
  --creative-glow: rgba(71, 124, 255, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="astronaut-girl"] {
  --creative-character-image: url("/assets/birthday-invites/space-astronaut-girl-3d.png");
  --creative-glow: rgba(240, 139, 201, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="space-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/space-rocket-blonde-astronaut.png");
  --creative-glow: rgba(243, 164, 220, 0.46);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="rocket-cadet"] {
  --creative-character-image: url("/assets/birthday-invites/space-rocket-cadet.png");
  --creative-glow: rgba(255, 138, 61, 0.42);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="mermaid"] {
  --creative-character-image: url("/assets/birthday-invites/mermaid-lagoon-3d.png");
  --creative-glow: rgba(120, 229, 219, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="shark"] {
  --creative-character-image: url("/assets/birthday-invites/mermaid-lagoon-shark-3d.png");
  --creative-glow: rgba(77, 219, 255, 0.38);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="axolotl"] {
  --creative-character-image: url("/assets/birthday-invites/lagoon-axolotl-3d.png");
  --creative-glow: rgba(255, 151, 193, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="blue-axolotl"] {
  --creative-character-image: url("/assets/birthday-invites/lagoon-blue-axolotl-3d.png");
  --creative-glow: rgba(77, 219, 255, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="lagoon-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/lagoon-blonde-princess.png");
  --creative-glow: rgba(120, 229, 219, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="reef-captain"] {
  --creative-character-image: url("/assets/birthday-invites/lagoon-reef-captain.png");
  --creative-glow: rgba(120, 229, 219, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="paint-pixie"] {
  --creative-character-image: url("/assets/birthday-invites/rainbow-paint-pixie-3d.png");
  --creative-glow: rgba(255, 79, 138, 0.38);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="brush-buddy"] {
  --creative-character-image: url("/assets/birthday-invites/rainbow-brush-buddy-3d.png");
  --creative-glow: rgba(47, 190, 203, 0.38);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="rainbow-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/rainbow-art-blonde-painter.png");
  --creative-glow: rgba(255, 111, 168, 0.46);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="paint-wizard"] {
  --creative-character-image: url("/assets/birthday-invites/rainbow-paint-wizard.png");
  --creative-glow: rgba(47, 190, 203, 0.46);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="cape-champion"] {
  --creative-character-image: url("/assets/birthday-invites/superhero-cape-champion-3d.png");
  --creative-glow: rgba(255, 216, 110, 0.46);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="star-guardian"] {
  --creative-character-image: url("/assets/birthday-invites/superhero-star-guardian-3d.png");
  --creative-glow: rgba(199, 150, 232, 0.46);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="hero-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/hero-city-blonde-guardian.png");
  --creative-glow: rgba(255, 231, 91, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="bolt-defender"] {
  --creative-character-image: url("/assets/birthday-invites/hero-bolt-defender.png");
  --creative-glow: rgba(255, 211, 76, 0.44);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="lion"] {
  --creative-character-image: url("/assets/birthday-invites/zoo-safari-lion-3d.png");
  --creative-glow: rgba(228, 167, 47, 0.4);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="gazelle"] {
  --creative-character-image: url("/assets/birthday-invites/zoo-safari-gazelle-3d.png");
  --creative-glow: rgba(228, 167, 47, 0.36);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="safari-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/zoo-safari-blonde-guide.png");
  --creative-glow: rgba(228, 167, 47, 0.4);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="trail-ranger"] {
  --creative-character-image: url("/assets/birthday-invites/safari-trail-ranger.png");
  --creative-glow: rgba(92, 124, 55, 0.4);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="pixel-pal"] {
  --creative-character-image: url("/assets/birthday-invites/arcade-pixel-pal-3d.png");
  --creative-glow: rgba(123, 255, 245, 0.48);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="game-champion"] {
  --creative-character-image: url("/assets/birthday-invites/arcade-game-champion-3d.png");
  --creative-glow: rgba(255, 93, 207, 0.46);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="arcade-blonde"] {
  --creative-character-image: url("/assets/birthday-invites/arcade-blonde-gamer.png");
  --creative-glow: rgba(255, 116, 212, 0.46);
}

:where(.preview-card, .invite-flow-preview)[data-theme-character="joystick-hero"] {
  --creative-character-image: url("/assets/birthday-invites/arcade-joystick-hero.png");
  --creative-glow: rgba(123, 255, 245, 0.46);
}

.preview-card[data-theme][data-theme-character] .preview-candles span:nth-child(1) {
  left: 50%;
  top: 18px;
  width: 152px;
  height: 152px;
  border: 0;
  border-radius: 0;
  background: var(--creative-character-image) center bottom / var(--character-art-fit, contain) no-repeat;
  box-shadow: none;
  filter:
    drop-shadow(0 14px 18px rgba(17, 24, 58, 0.24))
    drop-shadow(0 0 18px var(--creative-glow, rgba(255, 255, 255, 0.24)));
  transform: translateX(-50%);
}

.preview-card[data-theme][data-theme-character] .preview-candles span:nth-child(n + 2) {
  display: none;
}

.invite-flow-preview[data-theme][data-theme-character] .flow-character-masthead .flow-theme-feature {
  background: var(--creative-character-image) center bottom / var(--character-art-fit, contain) no-repeat;
}

.invite-flow-preview[data-theme][data-theme-character] .flow-screen--invite {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.42) 36%, rgba(255, 255, 255, 0.18) 70%, rgba(255, 255, 255, 0.08) 100%),
    var(--selected-theme-bg-image, var(--theme-bg));
  background-position: center;
  background-size: cover;
}

.invite-flow-preview[data-theme][data-theme-character] .flow-theme-scene {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08)),
    var(--selected-theme-bg-image, transparent);
  background-position: center;
  background-size: cover;
}

/* Cross-theme character catalog readability QA layer. */
.preview-card[data-theme][data-theme-character] .preview-poster {
  box-shadow:
    0 18px 42px rgba(8, 24, 24, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.preview-card[data-theme][data-theme-character] .preview-poster h2,
.preview-card[data-theme][data-theme-character] .preview-poster p,
.preview-card[data-theme][data-theme-character] .preview-theme-label {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 22px rgba(8, 24, 24, 0.18);
}

.preview-card[data-theme][data-theme-character] .preview-poster p {
  font-weight: 820;
  line-height: 1.45;
}

.invite-flow-preview[data-theme][data-theme-character] .flow-invite-copy,
.invite-flow-preview[data-theme][data-theme-character] .flow-rsvp-card {
  box-shadow:
    0 22px 56px rgba(8, 24, 24, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px) saturate(1.06);
}

.invite-flow-preview[data-theme][data-theme-character] .flow-invite-copy h3,
.invite-flow-preview[data-theme][data-theme-character] .flow-invite-copy p,
.invite-flow-preview[data-theme][data-theme-character] .flow-details-grid dd {
  text-wrap: balance;
}

.invite-flow-preview[data-theme][data-theme-character] .flow-invite-copy h3 {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 30px rgba(0, 0, 0, 0.26);
}

.invite-flow-preview[data-theme][data-theme-character] .flow-invite-copy p {
  font-weight: 780;
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.18);
}

.invite-flow-preview[data-theme][data-theme-character] .flow-details-grid div {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 10px 20px rgba(8, 24, 24, 0.08);
}

.invite-flow-preview[data-theme][data-theme-character] .flow-details-grid dt,
.invite-flow-preview[data-theme][data-theme-character] .flow-details-grid dd {
  font-weight: 950;
}

/* Customer-facing builder finishing pass. */
.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
),
.preview-card[data-theme] .preview-rsvp-actions button,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
) {
  color: var(--invite-forest);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
):hover,
.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
).is-selected,
.preview-card[data-theme] .preview-rsvp-actions button:hover,
.preview-card[data-theme] .preview-rsvp-actions button.is-selected,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
):hover,
.invite-flow-preview[data-theme] .preview-rsvp-actions button.is-selected {
  color: var(--invite-forest);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78),
    0 0 16px rgba(255, 255, 255, 0.56);
}

.birthday-builder-grid[data-theme] .primary-cta:hover,
.birthday-builder-grid[data-theme] .primary-cta:focus-visible,
.birthday-builder-grid[data-theme] .primary-cta.is-selected {
  color: #092f2d;
}

.birthday-builder-grid[data-theme] :where(
  .primary-cta,
  .secondary-cta,
  .secondary-cta.light,
  [data-check-slug],
  [data-save-draft],
  [data-copy-summary],
  [data-preview-flow],
  [data-flow-play-intro],
  [data-preview-yes],
  [data-preview-maybe],
  [data-preview-no],
  .flow-success-close
)::after,
.preview-card[data-theme] .preview-rsvp-actions button::after,
.invite-flow-preview[data-theme] :where(
  .flow-skip-button,
  .preview-rsvp-actions button,
  .flow-success-close
)::after {
  mix-blend-mode: normal;
}

.upgrade-grid {
  margin-top: 2px;
}

.consent-grid {
  margin-top: 4px;
}

.birthday-live-preview {
  justify-items: center;
}

.birthday-live-preview > section {
  width: 100%;
}

.preview-card {
  width: 100%;
  max-width: 540px;
  justify-self: center;
}

.invite-flow-preview {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 760px) {
  .birthday-live-preview {
    gap: 12px;
  }

  .birthday-live-preview > section {
    max-width: 430px;
    margin-inline: auto;
  }

  .preview-card {
    padding: 12px;
  }

  .preview-card-heading {
    align-items: flex-start;
  }

  .preview-card-heading > div {
    flex: 1 1 170px;
    min-width: 0;
  }

  .preview-full-link {
    margin-left: 40px;
  }

  .preview-flow-controls {
    gap: 4px;
  }

  .preview-flow-controls button {
    min-height: 42px;
    padding-inline: 6px;
    font-size: 11px;
  }

  .invite-flow-preview {
    min-height: 620px;
  }

  .flow-screen--intro {
    padding: 18px;
  }

  .flow-intro-frame {
    width: min(100%, 330px);
    margin-inline: auto;
  }
}