.theme-ai-family-draft--birthday {
  --birthday-ink: #3b3736;
  --birthday-muted: #756b64;
  --birthday-paper: #fffaf7;
  --birthday-soft: #f7ece5;
  --birthday-gold: #cba16b;
  --birthday-gold-deep: #a97b43;
  background: var(--birthday-paper);
  color: var(--birthday-ink);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

.birthday-preview-shell {
  --birthday-ink: #3b3736;
  --birthday-muted: #756b64;
  --birthday-paper: #fffaf7;
  --birthday-soft: #f7ece5;
  --birthday-gold: #cba16b;
  --birthday-gold-deep: #a97b43;
  background: var(--birthday-paper);
  color: var(--birthday-ink);
  margin-inline: auto;
  max-width: 52rem;
  min-height: 100vh;
  overflow: clip;
}

.birthday-preview-shell[data-birthday-gated] [data-birthday-content] { display: none; }
.birthday-preview-shell[data-birthday-gated][data-birthday-opened="true"] [data-birthday-content] { display: block; }
.birthday-opening[hidden],
.theme-ai-family-draft--birthday .ai-birthday-cover[hidden] { display: none !important; }

/* Keep the AI birthday invitation behind its opening cover until consent. */
.theme-ai-family-draft--birthday:not([data-ai-birthday-opened="true"]) > .invitation-reorder-section:not(:first-child),
.theme-ai-family-draft--birthday:not([data-ai-birthday-opened="true"]) > .ai-draft-footer,
.theme-ai-family-draft--birthday:not([data-ai-birthday-opened="true"]) > .ai-birthday-quick-nav,
.theme-ai-family-draft--birthday:not([data-ai-birthday-opened="true"]) [data-birthday-opening] ~ * { display: none; }

.theme-ai-family-draft--birthday .invitation-reorder-section {
  --invitation-motion-line: rgb(203 161 107 / 45%);
  background: var(--birthday-paper);
}

.theme-ai-family-draft--birthday .invitation-reorder-section::before {
  border-color: rgb(203 161 107 / 68%);
  border-radius: 0;
  inset: 1.35rem;
  transform: none;
}

.theme-ai-family-draft--birthday .invitation-reorder-section::after {
  background: #d5b27e;
  border: .14rem solid rgb(255 255 255 / 82%);
  border-radius: 52% 48% 50% 50%;
  box-shadow: -2.15rem 1.2rem 0 -.12rem #f3e6d5, 2rem 1.45rem 0 -.1rem #b98a50;
  height: 2.6rem;
  opacity: .72;
  right: 1.2rem;
  top: 1.4rem;
  transform: rotate(8deg);
  width: 2rem;
}

.theme-ai-family-draft--birthday .invitation-reorder-section > * {
  position: relative;
  z-index: 1;
}

.ai-birthday-cover {
  align-items: center;
  background:
    radial-gradient(circle at 12% 16%, rgb(203 161 107 / 20%) 0 .25rem, transparent .3rem),
    radial-gradient(circle at 84% 20%, rgb(203 161 107 / 22%) 0 .3rem, transparent .36rem),
    var(--birthday-paper);
  display: flex;
  min-height: min(100svh, 54rem);
  overflow: hidden;
  padding: clamp(2.5rem, 8vw, 5rem) clamp(1.35rem, 7vw, 4rem);
  position: relative;
  text-align: center;
}

.ai-birthday-cover::before,
.ai-birthday-cover::after {
  border: 1px solid rgb(203 161 107 / 48%);
  content: "";
  pointer-events: none;
  position: absolute;
}

.ai-birthday-cover::before { inset: 1.35rem; }
.ai-birthday-cover::after { border-radius: 50%; height: 12rem; left: -5rem; top: -4rem; width: 12rem; }

.ai-birthday-cover-content {
  margin-inline: auto;
  max-width: 30rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

.ai-birthday-kicker,
.ai-birthday-label {
  color: var(--birthday-gold-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  margin: 0 0 .9rem;
  text-transform: uppercase;
}

.ai-birthday-cover h1,
.ai-birthday-section h2,
.ai-birthday-music h2 {
  color: var(--birthday-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.ai-birthday-cover h1 { font-size: clamp(2.25rem, 10vw, 4.4rem); }
.ai-birthday-event-title { color: var(--birthday-muted); font-size: 1.05rem; margin: .75rem 0 1.25rem; }

.ai-birthday-portrait,
.ai-birthday-portrait-fallback {
  align-items: center;
  aspect-ratio: 1;
  background: var(--birthday-soft);
  border: .28rem solid var(--birthday-gold);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  margin: 0 auto 1.6rem;
  height: min(16rem, 64vw);
  object-fit: cover;
  overflow: hidden;
  width: min(16rem, 64vw);
}

.ai-birthday-portrait-fallback { color: var(--birthday-gold-deep); font-family: Georgia, serif; font-size: 2rem; }

.ai-birthday-recipient { color: var(--birthday-muted); line-height: 1.55; margin: 1.4rem 0; }
.ai-birthday-recipient strong { color: var(--birthday-ink); display: block; font-family: Georgia, serif; font-size: 1.3rem; margin-top: .2rem; }

.ai-birthday-open,
.ai-birthday-music-button {
  align-items: center;
  border: 1px solid var(--birthday-gold-deep);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.5rem;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.ai-birthday-open { background: var(--birthday-gold); color: #fff; min-width: min(100%, 20rem); }
.ai-birthday-open:hover, .ai-birthday-open:focus-visible { background: var(--birthday-gold-deep); transform: translateY(-2px); }
.ai-birthday-open span { margin-left: .7rem; }
.ai-birthday-open-note { color: var(--birthday-muted); font-size: .86rem; margin: .85rem 0 0; }

.ai-birthday-countdown { display: grid; gap: .55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.8rem auto 0; max-width: 22rem; }
.ai-birthday-countdown-item { background: rgb(203 161 107 / 72%); border-radius: .8rem; color: #fff; padding: .7rem .35rem; }
.ai-birthday-countdown-item strong { display: block; font-size: clamp(1.35rem, 5vw, 2rem); line-height: 1; }
.ai-birthday-countdown-item span { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }

.ai-birthday-section,
.ai-birthday-music { background: var(--birthday-paper); padding: clamp(3.5rem, 10vw, 6rem) clamp(1.5rem, 8vw, 4.5rem); text-align: center; }
.ai-birthday-section--soft { background: var(--birthday-soft); }
.ai-birthday-section h2, .ai-birthday-music h2 { font-size: clamp(2rem, 8vw, 3.5rem); }
.ai-birthday-section > p:not(.ai-birthday-label), .ai-birthday-music > p:not(.ai-birthday-label) { color: var(--birthday-muted); line-height: 1.7; margin: 1rem auto 0; max-width: 36rem; }

.ai-birthday-section-image { border: .2rem solid var(--birthday-gold); display: block; margin: 1.5rem auto 0; max-width: 22rem; width: 100%; }
.ai-birthday-gallery { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; }
.ai-birthday-gallery img { aspect-ratio: 1; display: block; height: 100%; object-fit: cover; width: 100%; }
.ai-birthday-music-button { background: var(--birthday-gold); color: #fff; margin-top: 1.3rem; }
.ai-birthday-music-button:hover, .ai-birthday-music-button:focus-visible { background: var(--birthday-gold-deep); }
.ai-birthday-audio { margin-inline: auto; max-width: 30rem; }
.ai-birthday-audio audio { margin-top: 1rem; max-width: 100%; width: 100%; }
.ai-birthday-audio-status { color: var(--birthday-muted); font-size: .86rem; margin: .65rem 0 0; }
.ai-birthday-footer { background: var(--birthday-gold); color: #fff; padding: 1.5rem; text-align: center; }

.ai-birthday-quick-nav {
  align-items: center;
  background: rgb(203 161 107 / 94%);
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: 999px;
  bottom: max(1rem, env(safe-area-inset-bottom));
  box-shadow: 0 .5rem 1.5rem rgb(59 55 54 / 20%);
  display: flex;
  gap: .15rem;
  justify-content: center;
  left: 50%;
  max-width: calc(100% - 1.2rem);
  padding: .3rem .4rem;
  position: fixed;
  transform: translateX(-50%);
  width: max-content;
  z-index: 20;
}

.ai-birthday-quick-nav a {
  align-items: center;
  border-radius: 999px;
  color: #2f2925;
  display: inline-flex;
  font-size: 1.45rem;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: .35rem .55rem;
  text-decoration: none;
}

.ai-birthday-quick-nav button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #2f2925;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1.45rem;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: .35rem .55rem;
}

.ai-birthday-quick-nav a:hover,
.ai-birthday-quick-nav a:focus-visible {
  background: rgb(255 250 247 / 72%);
  color: var(--birthday-ink);
}

.ai-birthday-quick-nav button:hover,
.ai-birthday-quick-nav button:focus-visible {
  background: rgb(255 250 247 / 72%);
  color: var(--birthday-ink);
}

.ai-birthday-quick-nav button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.ai-birthday-quick-nav a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 23rem) {
  .ai-birthday-quick-nav { gap: 0; padding-inline: .25rem; }
  .ai-birthday-quick-nav a { min-width: 44px; padding-inline: .35rem; }
}

@media (max-width: 32rem) {
  .ai-birthday-cover { padding-inline: 1rem; }
  .ai-birthday-cover::before { inset: .8rem; }
  .ai-birthday-gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-ai-family-draft--birthday *,
  .theme-ai-family-draft--birthday *::before,
  .theme-ai-family-draft--birthday *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Birthday family redesign: one playful system, with a distinct visual voice per family. */
.birthday-preview-shell,
.theme-ai-family-draft--birthday {
  --birthday-ink: #273542;
  --birthday-muted: #66727b;
  --birthday-paper: #fffdf8;
  --birthday-soft: #edf6f1;
  --birthday-accent: #4d9a78;
  --birthday-accent-deep: #27664f;
  --birthday-spark: #f2ad68;
}

.birthday-preview-shell[data-birthday-family="rimbun-editorial"],
.theme-ai-family-draft--birthday[data-birthday-family="rimbun-editorial"] { --birthday-paper: #f5fbf4; --birthday-soft: #e5f2e7; --birthday-accent: #4b9770; --birthday-accent-deep: #245b43; --birthday-spark: #ec9b63; }
.birthday-preview-shell[data-birthday-family="senja-terakota"],
.theme-ai-family-draft--birthday[data-birthday-family="senja-terakota"] { --birthday-paper: #fff8ef; --birthday-soft: #f8e3d2; --birthday-accent: #dd7951; --birthday-accent-deep: #94462f; --birthday-spark: #e6ad5b; }
.birthday-preview-shell[data-birthday-family="fresh-botanical-starter"],
.theme-ai-family-draft--birthday[data-birthday-family="fresh-botanical-starter"] { --birthday-paper: #f7fcf4; --birthday-soft: #e4f3dc; --birthday-accent: #5ca66d; --birthday-accent-deep: #2f7043; --birthday-spark: #efb468; }
.birthday-preview-shell[data-birthday-family="embun-minimal"],
.theme-ai-family-draft--birthday[data-birthday-family="embun-minimal"] { --birthday-paper: #f7f8ff; --birthday-soft: #e8ebfb; --birthday-accent: #747cca; --birthday-accent-deep: #464f97; --birthday-spark: #e5a46b; }
.birthday-preview-shell[data-birthday-family="kertas-ceria"],
.theme-ai-family-draft--birthday[data-birthday-family="kertas-ceria"] { --birthday-paper: #fffdf0; --birthday-soft: #fff0c6; --birthday-accent: #e49b37; --birthday-accent-deep: #9e6020; --birthday-spark: #e77268; }
.birthday-preview-shell[data-birthday-family="langit-malam"],
.theme-ai-family-draft--birthday[data-birthday-family="langit-malam"] { --birthday-paper: #f6f5ff; --birthday-soft: #e5e4fb; --birthday-accent: #6968bf; --birthday-accent-deep: #3c3c83; --birthday-spark: #edaf62; }
.birthday-preview-shell[data-birthday-family="lengkung-modern"],
.theme-ai-family-draft--birthday[data-birthday-family="lengkung-modern"] { --birthday-paper: #f4fbff; --birthday-soft: #e1f2f8; --birthday-accent: #438eaf; --birthday-accent-deep: #2d6078; --birthday-spark: #e3a45b; }
.birthday-preview-shell[data-birthday-family="monogram-kontemporer"],
.theme-ai-family-draft--birthday[data-birthday-family="monogram-kontemporer"] { --birthday-paper: #fcf7fc; --birthday-soft: #f2e5f1; --birthday-accent: #9a659a; --birthday-accent-deep: #684166; --birthday-spark: #e0a35f; }
.birthday-preview-shell[data-birthday-family="nusa-geometrik"],
.theme-ai-family-draft--birthday[data-birthday-family="nusa-geometrik"] { --birthday-paper: #fffaf0; --birthday-soft: #f7eac9; --birthday-accent: #c18b33; --birthday-accent-deep: #805d25; --birthday-spark: #e87958; }
.birthday-preview-shell[data-birthday-family="taman-cat-air"],
.theme-ai-family-draft--birthday[data-birthday-family="taman-cat-air"] { --birthday-paper: #f5fcfa; --birthday-soft: #def3ed; --birthday-accent: #3eaa8b; --birthday-accent-deep: #26745f; --birthday-spark: #eea568; }

.birthday-opening,
.theme-ai-family-draft--birthday .ai-birthday-cover {
  align-items: center;
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--birthday-spark) 30%, transparent) 0 .28rem, transparent .34rem),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--birthday-accent) 22%, transparent) 0 .38rem, transparent .44rem),
    linear-gradient(135deg, var(--birthday-paper), color-mix(in srgb, var(--birthday-soft) 52%, var(--birthday-paper)));
  color: var(--birthday-ink);
  min-height: max(42rem, 100svh);
  padding: clamp(2.25rem, 7vw, 5rem) 1rem 8.75rem;
}

.birthday-opening::before,
.theme-ai-family-draft--birthday .ai-birthday-cover::before {
  border: 2px dashed color-mix(in srgb, var(--birthday-accent) 44%, transparent);
  border-radius: 2rem;
  inset: .8rem;
}

.birthday-opening::after,
.theme-ai-family-draft--birthday .ai-birthday-cover::after {
  background: color-mix(in srgb, var(--birthday-spark) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--birthday-spark) 40%, transparent);
  height: 18rem;
  left: auto;
  right: -7rem;
  top: -6rem;
  width: 18rem;
}

.birthday-opening-content,
.theme-ai-family-draft--birthday .ai-birthday-cover-content {
  background: color-mix(in srgb, var(--birthday-paper) 89%, transparent);
  border: 1px solid color-mix(in srgb, var(--birthday-accent) 35%, transparent);
  border-radius: 2rem;
  box-shadow: 0 1.4rem 3.4rem color-mix(in srgb, var(--birthday-accent-deep) 15%, transparent);
  max-width: 29rem;
  padding: 1.15rem 1.15rem 1.35rem;
  width: 100%;
}

.birthday-opening-confetti {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.birthday-opening-confetti span {
  background: var(--birthday-spark);
  border-radius: 999px;
  height: .5rem;
  position: absolute;
  transform: rotate(24deg);
  width: 1.6rem;
}

.birthday-opening-confetti span:nth-child(1) { left: 13%; top: 27%; }
.birthday-opening-confetti span:nth-child(2) { background: var(--birthday-accent); right: 13%; top: 35%; transform: rotate(-35deg); }
.birthday-opening-confetti span:nth-child(3) { border-radius: 50%; height: .7rem; left: 18%; top: 68%; width: .7rem; }
.birthday-opening-confetti span:nth-child(4) { background: var(--birthday-accent); right: 17%; top: 76%; transform: rotate(55deg); }
.birthday-opening-confetti span:nth-child(5) { background: var(--birthday-spark); left: 8%; top: 52%; transform: rotate(-15deg); }

.birthday-opening-badge {
  color: var(--birthday-accent-deep);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  margin-bottom: .9rem;
  text-transform: uppercase;
}

.birthday-opening-portrait-frame {
  margin: 0 auto 1rem;
  position: relative;
  width: min(15.5rem, 64vw);
}

.birthday-opening-portrait-frame::after {
  border: .12rem solid var(--birthday-spark);
  border-radius: 1.5rem 1.5rem 4rem 1.5rem;
  content: "";
  inset: -.55rem -.4rem .35rem .45rem;
  pointer-events: none;
  position: absolute;
  transform: rotate(4deg);
}

.birthday-opening-portrait-frame figcaption {
  color: var(--birthday-accent-deep);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: .55rem;
  text-transform: uppercase;
}

.birthday-opening .ai-birthday-portrait,
.birthday-opening .ai-birthday-portrait-fallback,
.theme-ai-family-draft--birthday .ai-birthday-portrait {
  border: .35rem solid var(--birthday-paper);
  border-radius: 1.4rem 1.4rem 3.6rem 1.4rem;
  box-shadow: 0 0 0 .18rem var(--birthday-accent), .7rem .7rem 0 color-mix(in srgb, var(--birthday-spark) 58%, transparent);
  height: auto;
  margin: 0;
  max-height: 15rem;
  object-fit: cover;
  width: 100%;
}

.birthday-opening .ai-birthday-portrait-fallback { aspect-ratio: 1; height: auto; }
.birthday-opening .ai-birthday-kicker { margin-top: 1.3rem; }
.birthday-opening .ai-birthday-cover h1,
.birthday-opening h1 { color: var(--birthday-ink); font-size: clamp(2.4rem, 10vw, 4.4rem); letter-spacing: -.04em; }
.birthday-opening .ai-birthday-event-title { color: var(--birthday-accent-deep); font-weight: 600; }
.birthday-opening .ai-birthday-recipient { margin-bottom: .9rem; }
.birthday-opening .ai-birthday-recipient strong { color: var(--birthday-ink); }

.birthday-opening .ai-birthday-countdown,
.theme-ai-family-draft--birthday .ai-birthday-countdown {
  gap: .55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.2rem;
  max-width: 25rem;
}

.birthday-opening .ai-birthday-countdown-item,
.theme-ai-family-draft--birthday .ai-birthday-countdown-item {
  background: var(--birthday-accent);
  border-radius: .95rem .95rem .95rem .35rem;
  box-shadow: 0 .3rem 0 color-mix(in srgb, var(--birthday-accent-deep) 22%, transparent);
  padding: .7rem .25rem .62rem;
}

.birthday-opening .ai-birthday-countdown-item strong,
.theme-ai-family-draft--birthday .ai-birthday-countdown-item strong { font-variant-numeric: tabular-nums; }
.birthday-opening .ai-birthday-countdown-item span,
.theme-ai-family-draft--birthday .ai-birthday-countdown-item span { font-size: .58rem; }

.birthday-opening .ai-birthday-open,
.theme-ai-family-draft--birthday .ai-birthday-open {
  background: var(--birthday-accent-deep);
  border: 2px solid var(--birthday-accent-deep);
  border-radius: 999px;
  box-shadow: 0 .45rem 0 color-mix(in srgb, var(--birthday-accent-deep) 24%, transparent);
  margin-top: 1.55rem;
  min-height: 52px;
  width: min(100%, 20rem);
}

.birthday-opening .ai-birthday-open:hover,
.birthday-opening .ai-birthday-open:focus-visible,
.theme-ai-family-draft--birthday .ai-birthday-open:hover,
.theme-ai-family-draft--birthday .ai-birthday-open:focus-visible { background: var(--birthday-accent); border-color: var(--birthday-accent); }
.birthday-opening .ai-birthday-open-note { color: var(--birthday-muted); margin-top: 1rem; }

.birthday-preview-shell .birthday-invitation-content,
.theme-ai-family-draft--birthday .invitation-reorder-section { animation: birthday-content-in .7s ease both; }

.birthday-preview-shell .ai-birthday-quick-nav,
.theme-ai-family-draft--birthday .ai-birthday-quick-nav {
  background: color-mix(in srgb, var(--birthday-accent) 91%, var(--birthday-paper));
  border-color: color-mix(in srgb, var(--birthday-paper) 78%, transparent);
}

@keyframes birthday-content-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 32rem) {
  .birthday-opening,
  .theme-ai-family-draft--birthday .ai-birthday-cover { align-items: flex-start; min-height: max(39rem, 100svh); padding: .8rem .55rem 8rem; }
  .birthday-opening-content,
  .theme-ai-family-draft--birthday .ai-birthday-cover-content { border-radius: 1.5rem; padding: .45rem .6rem .55rem; }
  .birthday-opening-badge { margin-bottom: .45rem; }
  .birthday-opening-portrait-frame { margin-bottom: .25rem; width: min(8.3rem, 45vw); }
  .birthday-opening .ai-birthday-portrait,
  .theme-ai-family-draft--birthday .ai-birthday-portrait { aspect-ratio: 1 / 1.08; height: min(8.5rem, 45vw); }
  .birthday-opening-portrait-frame figcaption { font-size: .58rem; margin-top: .25rem; }
  .birthday-opening .ai-birthday-kicker { display: none; }
  .birthday-opening .ai-birthday-event-title { margin: .3rem 0 .5rem; }
  .birthday-opening .ai-birthday-recipient { margin: .55rem 0 .4rem; }
  .birthday-opening .ai-birthday-countdown,
  .theme-ai-family-draft--birthday .ai-birthday-countdown { gap: .4rem; margin-top: .9rem; }
  .birthday-opening .ai-birthday-countdown-item,
  .theme-ai-family-draft--birthday .ai-birthday-countdown-item { padding-block: .4rem .35rem; }
  .birthday-opening .ai-birthday-open,
  .theme-ai-family-draft--birthday .ai-birthday-open { margin-top: .9rem; min-height: 48px; }
  .birthday-opening .ai-birthday-open-note { margin-top: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .birthday-preview-shell *,
  .birthday-preview-shell *::before,
  .birthday-preview-shell *::after,
  .theme-ai-family-draft--birthday *,
  .theme-ai-family-draft--birthday *::before,
  .theme-ai-family-draft--birthday *::after { animation: none !important; }
}