:root {
  color-scheme: light;
  --ink: #26332f;
  --muted: #68736e;
  --paper: #fbfaf7;
  --white: #fff;
  --green: #dfe9e2;
  --green-deep: #4f6d5c;
  --coral: #c77963;
  --line: #e5e7e1;
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; object-fit: cover; }

.site-header {
  width: min(1280px, calc(100% - 80px));
  height: 86px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.wordmark span { color: var(--coral); }
.main-nav { height: 100%; display: flex; align-items: center; gap: 38px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #4c5752;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease;
}
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-current { color: var(--coral); }
.nav-link[hidden] { display: none; }
.nav-dropdown { height: 100%; display: flex; align-items: center; position: relative; }
.nav-dropdown summary { list-style: none; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: "⌄"; margin-left: 7px; font-size: 14px; }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu, .nav-dropdown[open] .dropdown-menu { display: grid; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% - 4px);
  left: auto;
  right: 0;
  z-index: 10;
  width: min(340px, calc(100vw - 24px));
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 24px rgb(38 51 47 / 9%);
}
.dropdown-menu-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; padding: 10px 11px; border-bottom: 1px solid var(--line); color: var(--green-deep) !important; font-size: 13px; font-weight: 700; }
.dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: var(--green); outline: 0; }
.dropdown-menu-custom { display: flex; align-items: center; min-height: 44px; padding: 8px 11px; color: var(--green-deep); font-size: 13px; font-weight: 700; }
.gallery-custom-section { padding: 12px 0 48px; }
.gallery-custom-section h2 { font: 400 27px var(--serif); }
.gallery-custom-card { display: grid; gap: 10px; width: min(260px, 100%); color: var(--ink); font-size: 13px; }
.gallery-custom-preview { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--line); background: #fffefa; color: var(--green-deep); font: 400 48px var(--sans); }
.gallery-custom-card:hover .gallery-custom-preview, .gallery-custom-card:focus-visible .gallery-custom-preview { border-color: var(--green-deep); }
.gallery-sticky-bar { position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: 0 4px 14px rgb(38 51 47 / 8%); }
@media (max-width: 620px) {
  body .site-header { height: auto; min-height: 72px; flex-wrap: wrap; justify-content: center; padding: 10px 0; gap: 8px; }
  body .site-header > .wordmark { text-align: center; }
  body .main-nav { height: auto; flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
  body .nav-dropdown { height: auto; }
  body .dropdown-menu { top: var(--site-header-height, 110px); }
}
.gallery-page .occasion-design-section { scroll-margin-top: calc(var(--gallery-bar-height, 140px) + 12px); }
.design-swatch[data-art^="photo-cover-chilli-out"],
.design-swatch[data-art^="photo-cover-frogetful"],
.design-swatch[data-art^="photo-cover-having-some-me-time"],
.design-swatch[data-art^="photo-cover-flower-"],
.card-cover[data-art="photo-cover-chilli-out"],
.card-cover[data-art="photo-cover-frogetful"],
.card-cover[data-art="photo-cover-having-some-me-time"],
.card-cover[data-art^="photo-cover-flower-"] {
  background-position: center;
  background-size: cover;
}
.design-swatch[data-art^="photo-cover-chilli-out"] > span,
.design-swatch[data-art^="photo-cover-frogetful"] > span,
.design-swatch[data-art^="photo-cover-having-some-me-time"] > span,
.design-swatch[data-art^="photo-cover-flower-"] > span { display: none; }
.card-cover[data-art="photo-cover-chilli-out"] { background-image: url("/assets/photos/chilli-out.png"); }
.card-cover[data-art="photo-cover-frogetful"] { background-image: url("/assets/photos/frogetful.png"); }
.card-cover[data-art="photo-cover-having-some-me-time"] { background-image: url("/assets/photos/having-some-me-time.png"); }
.design-swatch[data-art="photo-cover-flower-blossom"],
.card-cover[data-art="photo-cover-flower-blossom"] { background-image: url("/assets/photos/painted-flower-blossom.jpg"); }
.design-swatch[data-art="photo-cover-flower-scarlet"],
.card-cover[data-art="photo-cover-flower-scarlet"] { background-image: url("/assets/photos/painted-flower-scarlet.jpg"); }
.design-swatch[data-art="photo-cover-flower-rose"],
.card-cover[data-art="photo-cover-flower-rose"] { background-image: url("/assets/photos/painted-flower-rose.jpg"); }
.card-cover[data-art^="photo-cover-flower-"] .cover-frame,
.card-cover[data-art^="photo-cover-flower-"] .cover-sun,
.card-cover[data-art^="photo-cover-flower-"] .cover-kicker,
.card-cover[data-art^="photo-cover-flower-"] .cover-title { display: none; }
.card-cover[data-art="photo-cover-chilli-out"] .cover-frame,
.card-cover[data-art="photo-cover-chilli-out"] .cover-sun,
.card-cover[data-art="photo-cover-chilli-out"] .cover-kicker,
.card-cover[data-art="photo-cover-chilli-out"] .cover-title,
.card-cover[data-art="photo-cover-frogetful"] .cover-frame,
.card-cover[data-art="photo-cover-frogetful"] .cover-sun,
.card-cover[data-art="photo-cover-frogetful"] .cover-kicker,
.card-cover[data-art="photo-cover-frogetful"] .cover-title,
.card-cover[data-art="photo-cover-having-some-me-time"] .cover-frame,
.card-cover[data-art="photo-cover-having-some-me-time"] .cover-sun,
.card-cover[data-art="photo-cover-having-some-me-time"] .cover-kicker,
.card-cover[data-art="photo-cover-having-some-me-time"] .cover-title { display: none; }

.hero {
  width: min(1280px, calc(100% - 80px));
  min-height: 570px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  gap: 70px;
  padding: 58px 0 76px;
}
.hero-copy { max-width: 485px; padding: 10px 0 0 24px; }
.eyebrow {
  margin: 0 0 13px;
  color: var(--green-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  line-height: 1.4;
  text-transform: uppercase;
}
h1, h2, p { margin-top: 0; }
h1, h2, .note-quote {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
}
.hero h1 { margin-bottom: 36px; font-size: clamp(46px, 5vw, 66px); line-height: 1.04; }
.hero-intro { max-width: 405px; margin-bottom: 40px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 19px;
  font-size: 13px;
  font-weight: 600;
  transition: background 160ms ease, transform 160ms ease;
}
.button[hidden] { display: none; }
.button:hover { transform: translateY(-2px); }
.button-dark { color: var(--white); background: var(--ink); }
.button-dark:hover { background: var(--green-deep); }
.button span { font-size: 17px; }
.hero-note { margin: 17px 0 0; color: var(--muted); font-size: 12px; }
.hero-image-wrap { position: relative; }
.hero-image { height: 430px; object-position: center 52%; }
@media (min-width: 901px) {
  .home-page { min-height: 100dvh; display: flex; flex-direction: column; }
  .home-page .site-header, .home-page .site-footer, .home-page .hero { width: min(1600px, calc(100% - 96px)); }
  .home-page > main { display: flex; flex: 1; justify-content: center; }
  .home-page .hero { min-height: 570px; gap: clamp(40px, 5vw, 100px); padding: 48px 0; }
  .home-page .hero-copy { max-width: 620px; padding-left: 0; }
  .home-page .hero h1 { font-size: clamp(66px, 5vw, 94px); }
  .home-page .hero-intro { max-width: 500px; font-size: 18px; }
  .home-page .hero-image-wrap { height: 100%; min-height: 470px; }
  .home-page .hero-image { height: 100%; min-height: 470px; }
}
.image-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: var(--paper);
  font-size: 11px;
}
.caption-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

.section-wrap { width: min(1280px, calc(100% - 80px)); margin: 0 auto; }
.occasions { padding: 55px 0 98px; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 26px; }
.section-heading .eyebrow { margin-bottom: 8px; }
.section-heading h2 { margin: 0; font-size: 34px; line-height: 1.2; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--green-deep); font-size: 13px; font-weight: 600; }
.text-link:hover { color: var(--coral); }
.occasion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.occasion-card { display: block; overflow: hidden; background: var(--white); }
.occasion-card img { height: 245px; transition: transform 350ms ease; }
.occasion-card:hover img { transform: scale(1.035); }
.occasion-label { display: flex; justify-content: space-between; padding: 13px 14px; font-size: 14px; font-weight: 600; }
.occasion-label span { color: var(--coral); }
.note-band { padding: 55px 24px 60px; text-align: center; background: var(--green); }
.note-band .eyebrow { margin-bottom: 8px; }
.note-quote { margin: 0 auto 17px; font-size: 34px; line-height: 1.35; }

.inner-page { width: min(1120px, calc(100% - 80px)); margin: 0 auto; }
.page-intro { padding: 71px 0 32px; text-align: center; }
.page-intro h1, .about-copy h1 { margin: 0 0 13px; font-size: 52px; line-height: 1.12; }
.page-intro > p:not(.eyebrow) { margin-bottom: 24px; color: var(--muted); }
.occasion-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.occasion-jump a { padding: 7px 13px; border: 1px solid var(--line); background: var(--white); color: var(--green-deep); font-size: 12px; }
.occasion-jump a:hover { border-color: var(--green-deep); }
.gallery-list { padding: 26px 0 90px; }
.gallery-row { display: grid; grid-template-columns: 1fr 0.92fr; min-height: 340px; align-items: center; gap: 70px; padding: 27px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.gallery-row > img { height: 290px; }
.gallery-row-reverse > img { order: 2; }
.gallery-copy { max-width: 430px; }
.gallery-copy h2 { margin-bottom: 11px; font-size: 36px; line-height: 1.15; }
.gallery-copy > p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.card-sample { display: inline-block; margin-top: 10px; padding: 11px 14px; border-left: 2px solid var(--coral); background: #f1f3ee; font-family: var(--serif); font-size: 17px; }
.gallery-create { display: flex; width: fit-content; margin-top: 14px; }
.occasion-design-section { padding: 12px 0 78px; }
.occasion-design-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.occasion-design-heading h2 { margin: 0; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.occasion-design-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.gallery-page .site-header { gap: 20px; }
.gallery-search { display: block; width: clamp(180px, 26vw, 340px); min-width: 0; }
.gallery-search input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--white); color: var(--ink); font: 400 16px var(--sans); }
.gallery-search input:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.gallery-search-status { margin: 12px 0 24px; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) {
  .gallery-page .main-nav { gap: 18px; }
}
@media (max-width: 760px) {
  .gallery-page .site-header { height: auto; min-height: 86px; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 0; }
  .gallery-page .main-nav { height: auto; flex: 1 0 100%; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
  .gallery-page .nav-dropdown { height: auto; }
  .gallery-search { order: 1; flex: 1 0 100%; width: 100%; }
}
.occasion-design-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 20px; }
.occasion-design-card { display: grid; align-content: start; gap: 10px; min-width: 0; }
.occasion-design-card[hidden] { display: none; }
.occasion-card-trigger { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: transparent; text-align: inherit; cursor: pointer; }
.occasion-card-trigger:focus-visible { outline: 2px solid var(--coral); outline-offset: 5px; }
.occasion-card-scene { display: block; width: 100%; height: 100%; aspect-ratio: 1; perspective: 900px; transform-style: preserve-3d; }
.occasion-card-inside { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 11px; padding: 9%; overflow: hidden; background: #fffefa; box-shadow: 0 16px 34px rgb(38 51 47 / 17%); color: var(--ink); text-align: left; }
.occasion-card-inside-eyebrow { color: var(--green-deep); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; }
.occasion-card-inside strong { font-family: var(--serif); font-size: clamp(17px, 2vw, 24px); font-weight: 400; }
.occasion-card-inside > span:not(.occasion-card-inside-eyebrow) { color: var(--muted); font-size: clamp(10px, 1.15vw, 13px); line-height: 1.55; }
.occasion-card-inside em { align-self: flex-end; color: var(--coral); font-family: var(--serif); font-size: clamp(12px, 1.35vw, 16px); font-style: normal; }
.occasion-card-cover { z-index: 2; }
.occasion-birthday-sunrise-type { position: absolute; z-index: 2; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; color: var(--ink); font: 800 22px/1.05 var(--sans); text-align: center; pointer-events: none; }
.occasion-design-name { margin: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.occasion-design-create { display: flex; justify-content: space-between; width: 100%; min-height: 42px; padding: 10px 12px; font-size: 12px; }

.about-page { padding: 58px 0 70px; }
.about-hero { display: grid; grid-template-columns: 0.95fr 1fr; align-items: center; gap: 76px; }
.about-copy { padding: 15px 0; }
.about-copy h1 { max-width: 500px; margin-bottom: 22px; }
.about-copy p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.8; }
.about-copy .about-lede { color: var(--ink) !important; font-size: 18px !important; }
.about-copy .button { margin-top: 8px; }
.about-image { height: 470px; }
.about-signoff { margin-top: 70px; padding: 34px; text-align: center; background: var(--green); }
.about-signoff .note-quote { margin-bottom: 0; }

.site-footer {
  width: min(1280px, calc(100% - 80px));
  min-height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
}
.site-footer p { margin: 0; color: var(--muted); font-size: 12px; }
.footer-link { color: var(--muted); font-size: 12px; }
.footer-link:hover, .footer-link.is-current { color: var(--coral); }
.footer-small { color: var(--muted); font-size: 11px; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

@media (max-width: 900px) {
  .hero { gap: 38px; }
  .hero-copy { padding-left: 0; }
  .hero-image { height: 380px; }
  .occasion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .occasion-card img { height: 260px; }
  .gallery-row { gap: 38px; }
  .about-hero { gap: 40px; }
}
@media (max-width: 620px) {
  .site-header, .hero, .section-wrap, .site-footer, .inner-page { width: calc(100% - 36px); }
  .site-header { height: 72px; }
  .wordmark { font-size: 19px; }
  .main-nav { gap: 16px; }
  .nav-link { font-size: 12px; }
  .main-nav { gap: 10px; }
  .dropdown-menu { position: fixed; top: 70px; right: 12px; left: auto; width: min(350px, calc(100vw - 24px)); max-height: calc(100dvh - 84px); overflow-y: auto; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 50px 0 58px; }
  .hero-copy { max-width: 470px; }
  .hero h1 { font-size: 49px; }
  .hero-image { height: 300px; }
  .image-caption { right: 10px; bottom: 10px; }
  .occasions { padding: 44px 0 65px; }
  .section-heading { align-items: start; gap: 12px; }
  .section-heading h2 { font-size: 28px; }
  .section-heading > .text-link { max-width: 115px; padding-top: 19px; font-size: 11px; }
  .occasion-grid { gap: 11px; }
  .occasion-card img { height: 165px; }
  .occasion-label { padding: 10px; font-size: 12px; }
  .note-quote { font-size: 28px; }
  .note-band { padding: 45px 22px; }
  .page-intro { padding: 52px 0 24px; }
  .page-intro h1, .about-copy h1 { font-size: 42px; }
  .page-intro > p:not(.eyebrow) { font-size: 14px; }
  .occasion-jump { gap: 7px; }
  .occasion-jump a { padding: 7px 10px; font-size: 11px; }
  .gallery-list { padding: 16px 0 58px; }
  .gallery-row, .gallery-row-reverse { grid-template-columns: 1fr; gap: 19px; padding: 22px 0 28px; }
  .gallery-row > img, .gallery-row-reverse > img { order: 0; height: 235px; }
  .gallery-copy h2 { font-size: 31px; }
  .occasion-design-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .occasion-design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .occasion-card-inside { gap: 7px; }
  .occasion-card-inside strong { font-size: 19px; }
  .occasion-card-inside > span:not(.occasion-card-inside-eyebrow) { font-size: 11px; }
  .occasion-birthday-sunrise-type { font-size: 17px; }
  .about-page { padding: 40px 0 50px; }
  .about-hero { grid-template-columns: 1fr; gap: 25px; }
  .about-copy { padding: 0; }
  .about-image { height: 300px; }
  .about-signoff { margin-top: 38px; padding: 28px 18px; }
  .site-footer { min-height: 125px; flex-wrap: wrap; justify-content: space-between; padding: 22px 0; }
  .site-footer p { order: 3; flex-basis: 100%; }
  .footer-small { font-size: 10px; }
}

.hero-create-link { margin-left: 16px; }
.create-page { width: min(1280px, calc(100% - 80px)); margin: 0 auto; padding: 48px 0 70px; }
.create-intro { margin-bottom: 30px; text-align: center; }
.create-intro .eyebrow { margin-bottom: 8px; }
.create-intro h1 { margin: 0 0 8px; font-size: 46px; line-height: 1.15; }
.create-intro > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.create-layout { display: grid; grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr); gap: 52px; align-items: stretch; }
.create-form { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; min-height: 0; padding-top: 10px; }
.create-options-scroll { display: grid; align-content: start; gap: 20px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 12px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--green-deep) transparent; }
@media (min-width: 901px) {
  .create-layout { height: 837px; }
  .create-form { height: 100%; overflow: hidden; padding: 0 12px 0 0; }
  .create-options-scroll { padding-right: 8px; }
  .create-preview { min-height: 0; }
}
.create-submit { width: 100%; border: 0; font-family: var(--sans); cursor: pointer; }
.subscription-schedule-dialog { width: min(500px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: 0 18px 48px rgb(38 51 47 / 18%); }
.subscription-schedule-dialog::backdrop { background: rgb(28 36 32 / 48%); }
.color-wheel-dialog { width: min(360px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 20px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: 0 18px 48px rgb(38 51 47 / 18%); }
.color-wheel-dialog::backdrop { background: rgb(28 36 32 / 48%); }
.color-wheel-form { display: grid; gap: 14px; }
.color-wheel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.color-wheel-heading .eyebrow { margin: 0 0 4px; }
.color-wheel-heading h2 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 400; }
#color-wheel-canvas { display: block; width: min(280px, calc(100vw - 88px)); height: auto; aspect-ratio: 1; justify-self: center; border-radius: 50%; touch-action: none; cursor: crosshair; }
#color-wheel-canvas:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.color-wheel-control { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.color-wheel-control > span { display: flex; justify-content: space-between; gap: 10px; }
.color-wheel-control output { color: var(--ink); font-variant-numeric: tabular-nums; }
.color-wheel-control input[type="range"] { width: 100%; margin: 0; accent-color: var(--green-deep); }
.color-wheel-control input[type="text"] { min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 500 14px var(--sans); text-transform: uppercase; }
.color-wheel-feedback { min-height: 18px; margin: -5px 0; color: var(--muted); font-size: 12px; }
.color-wheel-actions { display: flex; justify-content: flex-end; gap: 10px; }
.color-wheel-actions .button { min-height: 42px; border: 0; cursor: pointer; }
.color-wheel-actions .button:disabled { opacity: 0.5; cursor: not-allowed; }
.subscription-schedule-form { display: grid; gap: 18px; }
.subscription-schedule-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.subscription-schedule-heading .eyebrow { margin: 0 0 4px; }
.subscription-schedule-heading h2 { margin: 0; font-size: 27px; }
.subscription-schedule-close { padding: 7px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 12px var(--sans); cursor: pointer; }
.subscription-schedule-copy { margin: -8px 0 0; color: var(--muted); font-size: 13px; }
.subscription-delivery-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.subscription-delivery-mode.is-calendar-flow { grid-template-columns: 1fr; }
.subscription-delivery-mode legend { margin-bottom: 7px; color: var(--ink); font-size: 13px; font-weight: 600; }
.subscription-mode-choice { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 13px; cursor: pointer; }
.subscription-mode-choice[hidden] { display: none; }
.subscription-mode-choice input { accent-color: var(--green-deep); }
.subscription-mode-choice:has(input:checked) { border-color: var(--green-deep); background: var(--green); }
.subscription-schedule-feedback { min-height: 20px; margin: -5px 0; color: var(--green-deep); font-size: 13px; }
.subscription-schedule-feedback.is-error { color: #a0443f; }
.subscription-schedule-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.subscription-schedule-actions .button { min-height: 44px; border: 0; cursor: pointer; }
.design-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.design-picker legend { margin-bottom: 10px; color: var(--ink); font-size: 13px; font-weight: 600; }
.design-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.design-choice { position: relative; display: grid; gap: 6px; cursor: pointer; }
.design-choice[hidden] { display: none; }
.design-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.design-swatch { display: grid; height: 66px; place-items: center; overflow: hidden; border: 1px solid var(--line); color: var(--ink); font-family: var(--serif); font-size: 13px; transition: outline-color 140ms ease; }
.design-swatch > span { padding: 2px 6px; background: rgb(255 255 255 / 55%); }
.design-choice input:checked + .design-swatch { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.design-choice input:focus-visible + .design-swatch { outline: 2px solid var(--coral); outline-offset: 3px; }
.custom-editor { display: grid; gap: 16px; max-height: min(68vh, 720px); min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid var(--line); background: #f1f3ee; }
.custom-editor[hidden] { display: none; }
.custom-editor [hidden] { display: none; }
.custom-editor.is-standard-editor { max-height: none; overflow: visible; padding: 0; border: 0; background: transparent; }
.custom-editor-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.custom-editor-heading h2 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.custom-editor-heading .eyebrow { margin-bottom: 4px; }
.custom-history-tools[hidden] { display: none; }
.custom-history-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.custom-history-button { min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); background: #fffefa; color: var(--green-deep); font: 600 11px/1.2 var(--sans); cursor: pointer; }
.custom-history-button:hover:not(:disabled) { border-color: var(--green-deep); }
.custom-history-button:disabled { opacity: 0.45; cursor: not-allowed; }
.custom-workflow-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; background: #e4e9e3; }
.custom-menu-tab { display: grid; min-height: 44px; place-items: center; padding: 7px 8px; border: 0; background: transparent; color: var(--muted); font: 600 12px/1.2 var(--sans); text-align: center; white-space: normal; cursor: pointer; }
.custom-menu-tab[aria-selected="true"] { background: #fffefa; color: var(--ink); box-shadow: 0 1px 3px rgb(38 51 47 / 12%); }
.custom-menu-tab:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.custom-menu-section { display: grid; gap: 13px; }
.custom-menu-section[hidden], .custom-object-editor[hidden] { display: none; }
.custom-object-editor { display: grid; gap: 12px; min-width: 0; }
.custom-cover-color input[type="color"], .custom-add-row input[type="color"], .custom-item-controls input[type="color"] { width: 56px; min-height: 42px; padding: 4px; }
.custom-add-group, .custom-item-controls { display: grid; gap: 11px; min-width: 0; margin: 0; padding: 12px; border: 1px solid #d8ded8; background: #fffefa; }
.custom-add-group legend, .custom-item-controls legend { padding: 0 5px; color: var(--ink); font-size: 12px; font-weight: 600; }
.custom-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.custom-text-options { grid-template-columns: minmax(0, 1fr) 56px auto; }
.custom-add-button { min-height: 42px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-family: var(--sans); cursor: pointer; }
.custom-add-button:hover { background: var(--green); }
.custom-items { display: grid; gap: 6px; max-height: 132px; overflow-y: auto; }
.custom-item-row { min-width: 0; padding: 7px 9px; overflow: hidden; border: 1px solid var(--line); background: #fffefa; color: var(--ink); font: 500 12px/1.4 var(--sans); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.custom-item-row[draggable="true"] { cursor: grab; }
.custom-item-row.is-dragging { opacity: 0.45; cursor: grabbing; }
.custom-item-row.is-drop-target { border-top: 2px solid var(--green-deep); }
.custom-item-row[aria-pressed="true"] { border-color: var(--green-deep); box-shadow: inset 3px 0 var(--green-deep); }
.custom-item-row:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.custom-object-order-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.custom-object-order-controls button:disabled { opacity: 0.45; cursor: not-allowed; }
.custom-item-controls[disabled] { opacity: 0.58; }
.custom-object-text[hidden] { display: none; }
.custom-item-controls .crop-range input[type="range"] { min-height: 22px; margin: 0; accent-color: var(--green-deep); }
.design-swatch[data-art="custom"] { background-color: #fffefa; background-image: radial-gradient(circle at 50% 50%, #c77963 0 12px, transparent 12.5px), radial-gradient(circle at 29% 30%, #84d4b1 0 5px, transparent 5.5px), radial-gradient(circle at 72% 68%, #77c7ee 0 7px, transparent 7.5px); }
.design-swatch[data-art="balloons"], .card-cover[data-art="balloons"] { background-color: #f0e7dc; background-image: radial-gradient(ellipse at 18% 25%, #c77963 0 5%, transparent 5.5%), radial-gradient(ellipse at 79% 20%, #7d9b83 0 5%, transparent 5.5%), radial-gradient(ellipse at 80% 73%, #87aeb1 0 5%, transparent 5.5%), radial-gradient(circle at 20% 80%, #d8b456 0 2%, transparent 2.5%); }
.design-swatch[data-art="blooms"], .design-swatch[data-art="wildflowers"], .card-cover[data-art="blooms"], .card-cover[data-art="wildflowers"] { background-color: #e8eee5; background-image: radial-gradient(circle at 16% 25%, #c77963 0 4%, transparent 4.5%), radial-gradient(circle at 21% 21%, #d9ad67 0 2%, transparent 2.5%), radial-gradient(circle at 82% 75%, #78917b 0 6%, transparent 6.5%), radial-gradient(circle at 87% 68%, #d6a4a0 0 3%, transparent 3.5%); }
.design-swatch[data-art="confetti"], .card-cover[data-art="confetti"] { background-color: #f3e6dc; background-image: radial-gradient(circle at 17% 24%, #c77963 0 3%, transparent 3.5%), radial-gradient(circle at 82% 19%, #829b84 0 4%, transparent 4.5%), radial-gradient(circle at 73% 77%, #d8b456 0 3%, transparent 3.5%), radial-gradient(circle at 20% 77%, #8aa6a1 0 3%, transparent 3.5%), linear-gradient(130deg, transparent 46%, rgb(255 255 255 / 55%) 47% 49%, transparent 50%); }
.design-swatch[data-art="candles"], .card-cover[data-art="candles"] { background-color: #f5efdf; background-image: repeating-linear-gradient(90deg, transparent 0 13%, rgb(199 121 99 / 45%) 13.5% 15%, transparent 15.5% 26%), radial-gradient(ellipse at 50% 18%, #d8b456 0 5%, transparent 5.5%); }
.design-swatch[data-art="ribbons"], .card-cover[data-art="ribbons"] { background-color: #dfe9e2; background-image: repeating-linear-gradient(135deg, transparent 0 18%, rgb(79 109 92 / 16%) 18.5% 22%, transparent 22.5% 40%), linear-gradient(40deg, transparent 65%, rgb(199 121 99 / 55%) 65.5% 70%, transparent 70.5%); }
.design-swatch[data-art="sunrise"], .card-cover[data-art="sunrise"] { background-color: #f2e6d6; background-image: radial-gradient(circle at 50% 25%, #dfb86a 0 10%, transparent 10.5%), linear-gradient(170deg, transparent 47%, rgb(199 121 99 / 28%) 47.5% 53%, transparent 53.5%), linear-gradient(12deg, transparent 68%, rgb(125 155 131 / 26%) 68.5% 73%, transparent 73.5%); }
.design-swatch[data-art="stars"], .card-cover[data-art="stars"] { background-color: #e4eaeb; background-image: radial-gradient(circle at 17% 24%, #d4ac57 0 2%, transparent 2.5%), radial-gradient(circle at 80% 28%, #c77963 0 1.5%, transparent 2%), radial-gradient(circle at 73% 78%, #78917b 0 2.5%, transparent 3%), radial-gradient(circle at 22% 76%, #d4ac57 0 1.5%, transparent 2%), radial-gradient(circle at 51% 17%, rgb(255 255 255 / 85%) 0 5%, transparent 5.5%); }
.design-swatch[data-art="hearts"], .card-cover[data-art="hearts"] { background-color: #f7e2e6; background-image: radial-gradient(circle at 18% 24%, rgb(190 70 94 / 72%) 0 4%, transparent 4.5%), radial-gradient(circle at 83% 76%, rgb(221 133 151 / 64%) 0 7%, transparent 7.5%), radial-gradient(circle at 82% 20%, rgb(170 80 104 / 58%) 0 3%, transparent 3.5%); }
.design-swatch[data-art="frame"], .card-cover[data-art="frame"] { background-color: #fffefa; background-image: linear-gradient(90deg, transparent 9%, rgb(79 109 92 / 26%) 9.5% 10%, transparent 10.5% 89%, rgb(79 109 92 / 26%) 89.5% 90%, transparent 90.5%), linear-gradient(0deg, transparent 12%, rgb(199 121 99 / 24%) 12.5% 13%, transparent 13.5% 87%, rgb(199 121 99 / 24%) 87.5% 88%, transparent 88.5%); }
.design-swatch[data-art="leaves"], .card-cover[data-art="leaves"] { background-color: #e7ede3; background-image: radial-gradient(ellipse at 18% 30%, rgb(96 127 99 / 65%) 0 5%, transparent 5.5%), radial-gradient(ellipse at 80% 70%, rgb(137 165 131 / 70%) 0 8%, transparent 8.5%), radial-gradient(circle at 78% 24%, #d7ae69 0 2%, transparent 2.5%); }
.design-swatch[data-art="clouds"], .card-cover[data-art="clouds"] { background-color: #e5edf0; background-image: radial-gradient(ellipse at 23% 60%, rgb(255 255 255 / 88%) 0 12%, transparent 12.5%), radial-gradient(ellipse at 72% 31%, rgb(255 255 255 / 80%) 0 14%, transparent 14.5%), linear-gradient(160deg, transparent 66%, rgb(125 155 159 / 24%) 66.5% 72%, transparent 72.5%); }
.design-swatch[data-art="stripes"], .card-cover[data-art="stripes"] { background-color: #f0e2d5; background-image: repeating-linear-gradient(135deg, transparent 0 14%, rgb(199 121 99 / 45%) 14.5% 18%, transparent 18.5% 31%), repeating-linear-gradient(45deg, transparent 0 35%, rgb(125 155 131 / 26%) 35.5% 39%, transparent 39.5% 70%); }
.design-swatch[data-art="waves"], .card-cover[data-art="waves"] { background-color: #e4edef; background-image: repeating-linear-gradient(170deg, transparent 0 19%, rgb(108 151 160 / 28%) 19.5% 21%, transparent 21.5% 38%), radial-gradient(circle at 78% 23%, rgb(255 255 255 / 75%) 0 8%, transparent 8.5%); }
.design-swatch[data-art="love-letter"], .card-cover[data-art="love-letter"] { background-color: #f4e7e3; background-image: linear-gradient(135deg, transparent 0 46%, rgb(199 121 99 / 38%) 46.5% 47.5%, transparent 48%), linear-gradient(45deg, transparent 0 46%, rgb(199 121 99 / 24%) 46.5% 47.5%, transparent 48%), radial-gradient(circle at 50% 56%, rgb(199 121 99 / 52%) 0 8%, transparent 8.5%); }
.design-swatch[data-art="pumpkin"], .card-cover[data-art="pumpkin"] { background-color: #e7d5c3; background-image: radial-gradient(ellipse at 50% 63%, #d27842 0 22%, transparent 22.5%), repeating-linear-gradient(90deg, transparent 0 17%, rgb(111 75 66 / 28%) 17.5% 19%, transparent 19.5% 34%), radial-gradient(circle at 81% 18%, #e7c16c 0 3%, transparent 3.5%); }
.design-swatch[data-art="evergreen"], .card-cover[data-art="evergreen"] { background-color: #35574b; background-image: radial-gradient(circle at 24% 24%, #d9b96a 0 3%, transparent 3.5%), radial-gradient(circle at 77% 69%, #c77963 0 4%, transparent 4.5%), repeating-linear-gradient(135deg, transparent 0 17%, rgb(255 255 255 / 12%) 17.5% 19%, transparent 19.5% 35%); }
.design-swatch[data-art="snow"], .card-cover[data-art="snow"] { background-color: #e7eef0; background-image: radial-gradient(circle at 18% 22%, #fff 0 5%, transparent 5.5%), radial-gradient(circle at 74% 31%, #fff 0 7%, transparent 7.5%), radial-gradient(circle at 54% 76%, rgb(122 162 172 / 45%) 0 4%, transparent 4.5%), linear-gradient(165deg, transparent 67%, rgb(122 162 172 / 28%) 67.5% 73%, transparent 73.5%); }
.design-swatch[data-art="harvest"], .card-cover[data-art="harvest"] { background-color: #ead8c6; background-image: radial-gradient(ellipse at 22% 28%, #c77963 0 7%, transparent 7.5%), radial-gradient(ellipse at 72% 68%, #d5a65d 0 10%, transparent 10.5%), repeating-linear-gradient(35deg, transparent 0 22%, rgb(101 119 83 / 24%) 22.5% 25%, transparent 25.5% 42%); }
.design-swatch[data-art="tea"], .card-cover[data-art="tea"] { background-color: #eee5d7; background-image: radial-gradient(ellipse at 50% 61%, #b47d5b 0 16%, transparent 16.5%), radial-gradient(ellipse at 50% 57%, #f8f2e8 0 10%, transparent 10.5%), radial-gradient(ellipse at 50% 37%, rgb(255 255 255 / 75%) 0 3%, transparent 3.5%), linear-gradient(150deg, transparent 0 60%, rgb(111 130 105 / 22%) 60.5% 66%, transparent 66.5%); }
.design-swatch[data-art="rainbow"], .card-cover[data-art="rainbow"] { background-color: #e8ece5; background-image: radial-gradient(ellipse at 50% 100%, transparent 0 30%, #c77963 30.5% 35%, transparent 35.5% 40%, #d7b665 40.5% 45%, transparent 45.5% 50%, #7d9b83 50.5% 55%, transparent 55.5% 60%, #87aeb1 60.5% 65%, transparent 65.5%); }
.design-swatch[data-art="baby-stars"], .card-cover[data-art="baby-stars"] { background-color: #e6e9e4; background-image: radial-gradient(circle at 18% 23%, #d7b665 0 3%, transparent 3.5%), radial-gradient(circle at 78% 28%, #c77963 0 2%, transparent 2.5%), radial-gradient(circle at 65% 73%, #7d9b83 0 3%, transparent 3.5%), radial-gradient(circle at 30% 76%, #fff 0 5%, transparent 5.5%); }
.design-swatch[data-art="moonlight"], .card-cover[data-art="moonlight"] { background-color: #364d55; background-image: radial-gradient(circle at 72% 27%, #e8cc86 0 11%, transparent 11.5%), radial-gradient(circle at 21% 27%, #fff 0 1.5%, transparent 2%), radial-gradient(circle at 32% 69%, #fff 0 2%, transparent 2.5%), radial-gradient(circle at 86% 72%, #fff 0 1.5%, transparent 2%); }
.design-swatch[data-art="heart"], .card-cover.design-swatch[data-art="heart"],
.card-cover[data-art="heart"] {
  background-color: #de2036;
  background-image:
    radial-gradient(circle at 37% 42%, #fff 0 75px, transparent 30.5px),
    radial-gradient(circle at 63% 42%, #fff 0 75px, transparent 30.5px);
}
.card-cover[data-art="heart"]::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 55%;
  left: 50%;
  width: 150px;
  height: 150px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.card-cover[data-art="birthday_1"] {
  background-color: #fff;
  background-image:
    radial-gradient(circle, #c94a4a 0 5px, transparent 0px),
    radial-gradient(circle, #4d79a8 0 5px, transparent 0px),
    radial-gradient(circle, #538267 0 5px, transparent 0px),
    radial-gradient(circle, #d5ad3f 0 5px, transparent 0px);
  background-size: 52px 52px;
  background-position: 2px 4px, 28px 4px, 4px 28px, 28px 28px;
}
.birthday-wrap-pattern { position: absolute; z-index: 1; inset: 0; display: none; flex-direction: column; justify-content: center; gap: 7px; overflow: hidden; pointer-events: none; }
.card-cover[data-art="birthday_2"] { background-color: #172743; background-image: none; }
.card-cover[data-art="birthday_2"] .birthday-wrap-pattern { display: flex; }
.card-cover[data-art="birthday_2"] .cover-frame,
.card-cover[data-art="birthday_2"] .cover-sun,
.card-cover[data-art="birthday_2"] .cover-kicker,
.card-cover[data-art="birthday_2"] .cover-title { display: none; }
.birthday-wrap-row { display: flex; flex: 0 0 auto; gap: 12px; width: max-content; font-family: var(--sans); font-size: 23px; font-weight: 900; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.birthday-wrap-row:nth-child(even) { transform: translateX(-22px); }
.birthday-wrap-phrase { display: flex; }
.birthday-wrap-phrase > span { color: var(--wrap-letter-color); }
@media (max-width: 680px) {
  .birthday-wrap-row { font-size: 18px; letter-spacing: 1.5px; }
}
.design-choice input[value="birthday-03"] + .design-swatch,
.card-scene[data-occasion="birthday"] .card-cover[data-art="confetti"] {
  background-color: #fffdfa;
  background-image:
    radial-gradient(circle at 14% 18%, #ec755c 0 4px, transparent 4.5px),
    radial-gradient(circle at 39% 13%, #f6d35b 0 3px, transparent 3.5px),
    radial-gradient(circle at 69% 19%, #77c7ee 0 5px, transparent 5.5px),
    radial-gradient(circle at 87% 27%, #84d4b1 0 3px, transparent 3.5px),
    radial-gradient(circle at 24% 43%, #bd9fe8 0 3.5px, transparent 4px),
    radial-gradient(circle at 54% 38%, #f19bb9 0 5px, transparent 5.5px),
    radial-gradient(circle at 79% 51%, #f6d35b 0 4px, transparent 4.5px),
    radial-gradient(circle at 10% 67%, #77c7ee 0 4px, transparent 4.5px),
    radial-gradient(circle at 39% 73%, #84d4b1 0 5px, transparent 5.5px),
    radial-gradient(circle at 67% 82%, #ec755c 0 3px, transparent 3.5px),
    radial-gradient(circle at 90% 88%, #bd9fe8 0 4px, transparent 4.5px);
}
.design-choice input[value="birthday-04"] + .design-swatch,
.card-scene[data-occasion="birthday"] .card-cover[data-art="candles"] {
  background-color: #fff9ef;
  background-image:
    radial-gradient(ellipse, #f6d35b 0 48%, transparent 55%),
    radial-gradient(ellipse, #ec755c 0 48%, transparent 55%),
    radial-gradient(ellipse, #77c7ee 0 48%, transparent 55%),
    linear-gradient(#f19bb9, #f19bb9),
    linear-gradient(#84d4b1, #84d4b1),
    linear-gradient(#bd9fe8, #bd9fe8);
  background-size: 10px 12px, 10px 12px, 10px 12px, 19px 78px, 19px 78px, 19px 78px;
  background-position: 34% calc(100% - 89px), 50% calc(100% - 89px), 66% calc(100% - 89px), 34% bottom, 50% bottom, 66% bottom;
  background-repeat: no-repeat;
}
.design-choice input[value="birthday-05"] + .design-swatch,
.card-scene[data-occasion="birthday"] .card-cover[data-art="ribbons"] {
  background-color: #fffdfa;
  background-image:
    linear-gradient(90deg, transparent 43%, #f19bb9 43% 49%, transparent 49% 51%, #77c7ee 51% 57%, transparent 57%),
    linear-gradient(0deg, transparent 43%, #84d4b1 43% 49%, transparent 49% 51%, #f6d35b 51% 57%, transparent 57%);
}
.design-choice input[value="birthday-06"] + .design-swatch {
  background-color: #edf7fa;
  background-image: radial-gradient(circle at 50% 48%, #f6d35b 0 18px, transparent 19px);
}
.card-scene[data-occasion="birthday"] .card-cover[data-art="sunrise"] {
  background-color: #edf7fa;
  background-image: radial-gradient(circle at 50% 48%, #f6d35b 0 80px, transparent 63px);
}
.birthday-sunrise-type { position: absolute; z-index: 0; inset: 0; display: none; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.birthday-sunrise-type text { fill: var(--ink); font-family: var(--sans); font-size: 60px; font-weight: 800; letter-spacing: 6px; text-anchor: middle; }
.card-scene[data-occasion="birthday"] .card-cover[data-art="sunrise"] .birthday-sunrise-type { display: block; }
.card-scene[data-occasion="birthday"] .card-cover[data-art="sunrise"] .cover-sun,
.card-scene[data-occasion="birthday"] .card-cover[data-art="sunrise"] .cover-kicker,
.card-scene[data-occasion="birthday"] .card-cover[data-art="sunrise"] .cover-title { display: none; }
@media (max-width: 680px) {
  .card-scene[data-occasion="birthday"] .card-cover[data-art="sunrise"] { background-image:
    radial-gradient(circle at 50% 48%, #f6d35b 0 54px, transparent 55px);
  }
  .birthday-sunrise-type text { font-size: 22px; letter-spacing: 4.5px; }
}
.design-choice input[value="birthday-07"] + .design-swatch,
.card-scene[data-occasion="birthday"] .card-cover[data-art="stars"] {
  background-color: #172743;
  background-image:
    radial-gradient(circle at 14% 18%, #f6d35b 0 3px, transparent 3.5px),
    radial-gradient(circle at 39% 13%, #f19bb9 0 2px, transparent 2.5px),
    radial-gradient(circle at 69% 19%, #77c7ee 0 3px, transparent 3.5px),
    radial-gradient(circle at 87% 27%, #84d4b1 0 2px, transparent 2.5px),
    radial-gradient(circle at 24% 43%, #bd9fe8 0 2px, transparent 2.5px),
    radial-gradient(circle at 54% 38%, #f6d35b 0 3px, transparent 3.5px),
    radial-gradient(circle at 79% 51%, #f19bb9 0 2px, transparent 2.5px),
    radial-gradient(circle at 10% 67%, #77c7ee 0 3px, transparent 3.5px),
    radial-gradient(circle at 39% 73%, #84d4b1 0 2px, transparent 2.5px),
    radial-gradient(circle at 67% 82%, #f6d35b 0 3px, transparent 3.5px),
    radial-gradient(circle at 90% 88%, #bd9fe8 0 2px, transparent 2.5px);
}
.card-scene[data-occasion="birthday"] .card-cover[data-art="stars"] .cover-frame,
.card-scene[data-occasion="birthday"] .card-cover[data-art="stars"] .cover-sun,
.card-scene[data-occasion="birthday"] .card-cover[data-art="stars"] .cover-title,
.card-scene[data-occasion="birthday"] .card-cover[data-art="stars"] .cover-kicker { display: none; }
.design-swatch[data-art="heart-doodles"], .card-cover[data-art="heart-doodles"] { background-color: #f7e8e9; background-image: radial-gradient(circle at 18% 20%, rgb(197 78 102 / 25%) 0 8%, transparent 8.5%), radial-gradient(circle at 82% 25%, rgb(219 143 155 / 38%) 0 12%, transparent 12.5%), radial-gradient(circle at 73% 80%, rgb(197 78 102 / 24%) 0 10%, transparent 10.5%), linear-gradient(135deg, transparent 47%, rgb(198 95 116 / 22%) 47.5% 50%, transparent 50.5%); }
.design-swatch[data-art="photo"], .card-cover[data-art="photo"]:not(.has-photo) { background-color: #e2e6df; background-image: linear-gradient(135deg, transparent 45%, rgb(255 255 255 / 75%) 46% 48%, transparent 49%), linear-gradient(35deg, transparent 65%, rgb(79 109 92 / 28%) 66% 100%); }
.card-cover[data-art="birthday-golden-hour"] { background-color: #f2e8d9; background-image: radial-gradient(circle at 76% 22%, #e4bd70 0 10%, transparent 10.5%), linear-gradient(180deg, transparent 0 64%, rgb(199 121 99 / 72%) 64.5% 65%, transparent 65.5%), linear-gradient(160deg, transparent 0 70%, rgb(79 109 92 / 65%) 70.5% 86%, transparent 86.5%), linear-gradient(20deg, transparent 0 73%, rgb(129 157 130 / 72%) 73.5% 90%, transparent 90.5%); }
  .card-cover[data-art="birthday-golden-hour"] { background-color: #f4eadc; background-image: radial-gradient(circle at 76% 25%, #e4bd70 0 11%, transparent 11.5%), linear-gradient(180deg, transparent 0 68%, rgb(199 121 99 / 48%) 68.5% 69.5%, transparent 70%), linear-gradient(180deg, transparent 0 75%, rgb(212 173 103 / 35%) 75.5% 83%, transparent 83.5%), linear-gradient(180deg, transparent 0 83%, rgb(79 109 92 / 62%) 83.5% 100%); }
  .card-cover[data-art="birthday-golden-hour"] .cover-title { font-size: 40px; }
.card-cover[data-art="birthday-night-sky"] { background-color: #49434d; background-image: radial-gradient(circle at 17% 20%, #f2d591 0 2px, transparent 2.5px), radial-gradient(circle at 78% 26%, #f2d591 0 2px, transparent 2.5px), radial-gradient(circle at 84% 75%, #d59a83 0 2px, transparent 2.5px), radial-gradient(circle at 23% 79%, #d59a83 0 2px, transparent 2.5px), radial-gradient(circle at 50% 17%, rgb(255 254 250 / 72%) 0 1.5px, transparent 2px), radial-gradient(circle at 39% 71%, rgb(255 254 250 / 62%) 0 1.5px, transparent 2px); }
.card-scene[data-card-design="birthday-07"] .card-cover .cover-title { color: #fffefa; }
.card-scene[data-card-design="birthday-07"] .card-cover .cover-kicker { color: #f2d591; }
.card-cover[data-art="birthday-geometric-svg"] { background-color: #20243c; background-image: none; }
.card-cover[data-art="birthday-geometric-svg"] .cover-frame,
.card-cover[data-art="birthday-geometric-svg"] .cover-sun,
.card-cover[data-art="birthday-geometric-svg"] .cover-kicker,
.card-cover[data-art="birthday-geometric-svg"] .cover-title { display: none; }
.card-cover[data-art="birthday-ribbon-boxes-svg"] { background-color: #fffefa; background-image: none; }
.card-cover[data-art="birthday-ribbon-boxes-svg"] .cover-frame,
.card-cover[data-art="birthday-ribbon-boxes-svg"] .cover-sun,
.card-cover[data-art="birthday-ribbon-boxes-svg"] .cover-kicker,
.card-cover[data-art="birthday-ribbon-boxes-svg"] .cover-title { display: none; }
.card-cover[data-art="birthday-dot-party-svg"] { background-color: #28283a; background-image: none; }
.card-cover[data-art="birthday-dot-party-svg"] .cover-frame,
.card-cover[data-art="birthday-dot-party-svg"] .cover-sun,
.card-cover[data-art="birthday-dot-party-svg"] .cover-kicker,
.card-cover[data-art="birthday-dot-party-svg"] .cover-title { display: none; }
.card-cover[data-art="birthday-balloon-wishes-svg"] { background-color: #42b9c6; background-image: none; }
.card-cover[data-art="birthday-balloon-wishes-svg"] .cover-frame,
.card-cover[data-art="birthday-balloon-wishes-svg"] .cover-sun,
.card-cover[data-art="birthday-balloon-wishes-svg"] .cover-kicker,
.card-cover[data-art="birthday-balloon-wishes-svg"] .cover-title { display: none; }
.card-cover[data-art="birthday-checker-svg"] { background-color: #e97756; background-image: none; }
.card-cover[data-art="birthday-checker-svg"] .cover-kicker { display: none; }
.card-cover[data-art="birthday-checker-svg"] .cover-kicker,
.card-cover[data-art="birthday-checker-svg"] .cover-title { color: #26332f; text-shadow: none; }
.card-cover[data-art="birthday-balloon-svg"] { background-color: #f1eee6; background-image: radial-gradient(circle at 50% 54%, rgb(79 109 92 / 8%) 0 32%, transparent 32.5%); }
.card-cover[data-art="birthday-garland-svg"] { background-color: #f2eee4; background-image: linear-gradient(0deg, transparent 0 78%, rgb(79 109 92 / 14%) 78.5% 79%, transparent 79.5%); }
.card-cover[data-art="birthday-cake"] { background-color: #f5eee7; background-image: linear-gradient(0deg, #c77963 0 6%, transparent 6.5%), linear-gradient(0deg, transparent 0 25%, #d9bba9 25.5% 46%, transparent 46.5%), linear-gradient(0deg, transparent 0 46%, #fffefa 46.5% 55%, transparent 55.5%), repeating-linear-gradient(90deg, transparent 0 12%, rgb(79 109 92 / 52%) 12.5% 13.5%, transparent 14% 25%), radial-gradient(ellipse at 20% 31%, #d2ad67 0 2%, transparent 2.5%), radial-gradient(ellipse at 50% 31%, #c77963 0 2%, transparent 2.5%), radial-gradient(ellipse at 80% 31%, #78917b 0 2%, transparent 2.5%); background-size: 100% 100%, 66% 100%, 66% 100%, 46% 19%, 100% 100%, 100% 100%, 100% 100%; background-position: center; background-repeat: no-repeat; }
.card-cover[data-art="birthday-petals"] { background-color: #f2e9e6; background-image: radial-gradient(ellipse at 22% 24%, #c77963 0 4%, transparent 4.5%), radial-gradient(ellipse at 27% 19%, #d2ad67 0 3%, transparent 3.5%), radial-gradient(ellipse at 77% 25%, #829b84 0 4%, transparent 4.5%), radial-gradient(ellipse at 73% 31%, #d99a9e 0 3%, transparent 3.5%), radial-gradient(ellipse at 18% 76%, #87a7a4 0 4%, transparent 4.5%), radial-gradient(ellipse at 83% 76%, #c77963 0 4%, transparent 4.5%); }
.card-cover[data-art="birthday-sparkler"] { background-color: #3e4844; background-image: radial-gradient(circle at 24% 26%, #e8c775 0 1.5px, transparent 2px), radial-gradient(circle at 75% 25%, #f3e8cf 0 1.5px, transparent 2px), radial-gradient(circle at 78% 75%, #e2a08d 0 1.5px, transparent 2px), radial-gradient(circle at 19% 73%, #90aaa3 0 1.5px, transparent 2px), repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 14deg, rgb(226 160 141 / 42%) 14.5deg 15deg, transparent 15.5deg 30deg); }
.card-cover[data-art="birthday-gift"] { background-color: #ece9df; background-image: linear-gradient(90deg, transparent 43%, #c77963 43.5% 49%, transparent 49.5% 51%, #c77963 51.5% 57%, transparent 57.5%), linear-gradient(0deg, transparent 42%, #d4b56e 42.5% 48%, transparent 48.5% 52%, #d4b56e 52.5% 58%, transparent 58.5%), linear-gradient(135deg, transparent 0 42%, rgb(79 109 92 / 18%) 42.5% 43%, transparent 43.5%); }
.card-cover[data-art="birthday-bunting"] { background-color: #f3ece2; background-image: repeating-linear-gradient(120deg, transparent 0 18%, rgb(199 121 99 / 44%) 18.5% 19%, transparent 19.5% 37%), linear-gradient(0deg, transparent 0 76%, #78917b 76.5% 77.5%, transparent 78%); }
.card-cover[data-art="birthday-confetti"] { background-color: #f2eee8; background-image: radial-gradient(circle at 14% 20%, #c77963 0 3px, transparent 3.5px), radial-gradient(circle at 82% 19%, #d2ad67 0 3px, transparent 3.5px), radial-gradient(circle at 75% 78%, #829b84 0 4px, transparent 4.5px), radial-gradient(circle at 18% 73%, #87a7a4 0 3px, transparent 3.5px), radial-gradient(circle at 53% 16%, #c77963 0 2px, transparent 2.5px), radial-gradient(circle at 43% 84%, #d2ad67 0 2px, transparent 2.5px), linear-gradient(45deg, transparent 49%, rgb(199 121 99 / 36%) 49.5% 50.5%, transparent 51%); }
.card-cover[data-art="birthday-candles"] { background-color: #f3ebde; background-image: radial-gradient(ellipse at 30% 36%, #f1d182 0 3%, transparent 3.5%), radial-gradient(ellipse at 50% 31%, #d78269 0 3%, transparent 3.5%), radial-gradient(ellipse at 70% 36%, #f1d182 0 3%, transparent 3.5%), linear-gradient(90deg, transparent 27%, #78917b 27.5% 32%, transparent 32.5% 47%, #d2ad67 47.5% 52%, transparent 52.5% 67%, #c77963 67.5% 72%, transparent 72.5%), linear-gradient(0deg, transparent 0 53%, #fffefa 53.5% 68%, transparent 68.5%); }
.card-cover[data-art="birthday-orbit"] { background-color: #ece7e3; background-image: radial-gradient(ellipse at 50% 50%, transparent 0 23%, rgb(199 121 99 / 62%) 23.5% 24.5%, transparent 25%), radial-gradient(ellipse at 50% 50%, transparent 0 39%, rgb(79 109 92 / 52%) 39.5% 40.5%, transparent 41%), radial-gradient(circle at 50% 50%, #d6b66e 0 6%, transparent 6.5%); }
.card-cover[data-art="birthday-stripes"] { background-color: #f4ece4; background-image: repeating-linear-gradient(135deg, transparent 0 15%, rgb(199 121 99 / 47%) 15.5% 19%, transparent 19.5% 33%), repeating-linear-gradient(45deg, transparent 0 36%, rgb(79 109 92 / 28%) 36.5% 39%, transparent 39.5% 72%); }
.card-cover[data-art="birthday-wish-stars"] { background-color: #eee9e1; background-image: radial-gradient(circle at 18% 23%, #d2ad67 0 2px, transparent 2.5px), radial-gradient(circle at 78% 20%, #c77963 0 2px, transparent 2.5px), radial-gradient(circle at 78% 76%, #829b84 0 2px, transparent 2.5px), radial-gradient(circle at 22% 75%, #87a7a4 0 2px, transparent 2.5px), radial-gradient(circle at 50% 25%, #d2ad67 0 4px, transparent 4.5px); }
.card-cover[data-art="birthday-topper"] { background-color: #f3e9df; background-image: radial-gradient(ellipse at 50% 28%, #d2ad67 0 12%, transparent 12.5%), linear-gradient(90deg, transparent 49.5%, #78917b 50% 50.5%, transparent 51%), linear-gradient(0deg, transparent 0 66%, rgb(199 121 99 / 35%) 66.5% 67%, transparent 67.5%); }
.birthday-cover-svg { position: absolute; z-index: 1; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.card-cover[data-art="birthday-balloon-svg"] .birthday-balloon-art,
.card-cover[data-art="birthday-garland-svg"] .birthday-garland-art,
.card-cover[data-art="birthday-geometric-svg"] .birthday-geometric-art,
.card-cover[data-art="birthday-checker-svg"] .birthday-checker-art,
.card-cover[data-art="birthday-ribbon-boxes-svg"] .birthday-ribbon-boxes-art,
.card-cover[data-art="birthday-dot-party-svg"] .birthday-dot-party-art,
.card-cover[data-art="birthday-balloon-wishes-svg"] .birthday-balloon-wishes-art,
.card-cover[data-art="birthday-bunting-party-svg"] .birthday-bunting-party-art,
.card-cover[data-art="birthday-layered-party-svg"] .birthday-layered-party-art,
.card-cover[data-art="birthday-tile-pattern-svg"] .birthday-tile-pattern-art,
.card-cover[data-art="birthday-star-confetti-svg"] .birthday-star-confetti-art,
.card-cover[data-art="birthday-cake-topper-svg"] .birthday-cake-topper-art,
.card-cover[data-art="birthday-night-stars-svg"] .birthday-night-stars-art,
.card-cover[data-art="birthday-sunburst-svg"] .birthday-sunburst-art,
.card-cover[data-art="birthday-balloon-field-svg"] .birthday-balloon-field-art,
.card-cover[data-art="birthday-planet-svg"] .birthday-planet-art { display: block; }
.card-cover[data-art="birthday-bunting-party-svg"] { background-color: #fffefa; background-image: none; }
.card-cover[data-art="birthday-bunting-party-svg"] .cover-frame,
.card-cover[data-art="birthday-bunting-party-svg"] .cover-sun,
.card-cover[data-art="birthday-bunting-party-svg"] .cover-kicker,
.card-cover[data-art="birthday-bunting-party-svg"] .cover-title { display: none; }
.card-cover[data-art="birthday-layered-party-svg"] { background-color: #153d57; background-image: none; }
.card-cover[data-art="birthday-layered-party-svg"] .cover-frame,
.card-cover[data-art="birthday-layered-party-svg"] .cover-sun,
.card-cover[data-art="birthday-layered-party-svg"] .cover-kicker,
.card-cover[data-art="birthday-layered-party-svg"] .cover-title { display: none; }
.card-cover[data-art="birthday-tile-pattern-svg"] { background-color: #fff4e5; background-image: none; }
.card-cover[data-art="birthday-tile-pattern-svg"] .cover-frame,
.card-cover[data-art="birthday-tile-pattern-svg"] .cover-sun,
.card-cover[data-art="birthday-tile-pattern-svg"] .cover-kicker,
.card-cover[data-art="birthday-tile-pattern-svg"] .cover-title { display: none; }
.card-cover[data-art="birthday-star-confetti-svg"] { background-color: #fffefa; background-image: none; }
.card-cover[data-art="birthday-star-confetti-svg"] .cover-frame,
.card-cover[data-art="birthday-star-confetti-svg"] .cover-sun,
.card-cover[data-art="birthday-star-confetti-svg"] .cover-kicker,
.card-cover[data-art="birthday-star-confetti-svg"] .cover-title { display: none; }
.card-cover[data-art="birthday-cake-topper-svg"],
.card-cover[data-art="birthday-night-stars-svg"],
.card-cover[data-art="birthday-sunburst-svg"],
.card-cover[data-art="birthday-balloon-field-svg"],
.card-cover[data-art="birthday-planet-svg"] { background-image: none; }
.card-cover[data-art="birthday-cake-topper-svg"] .cover-frame,
.card-cover[data-art="birthday-cake-topper-svg"] .cover-sun,
.card-cover[data-art="birthday-cake-topper-svg"] .cover-kicker,
.card-cover[data-art="birthday-cake-topper-svg"] .cover-title,
.card-cover[data-art="birthday-night-stars-svg"] .cover-frame,
.card-cover[data-art="birthday-night-stars-svg"] .cover-sun,
.card-cover[data-art="birthday-night-stars-svg"] .cover-kicker,
.card-cover[data-art="birthday-night-stars-svg"] .cover-title,
.card-cover[data-art="birthday-sunburst-svg"] .cover-frame,
.card-cover[data-art="birthday-sunburst-svg"] .cover-sun,
.card-cover[data-art="birthday-sunburst-svg"] .cover-kicker,
.card-cover[data-art="birthday-sunburst-svg"] .cover-title,
.card-cover[data-art="birthday-planet-svg"] .cover-frame,
.card-cover[data-art="birthday-planet-svg"] .cover-sun,
.card-cover[data-art="birthday-planet-svg"] .cover-kicker,
.card-cover[data-art="birthday-planet-svg"] .cover-title,
.card-cover[data-art="birthday-balloon-field-svg"] .cover-frame,
.card-cover[data-art="birthday-balloon-field-svg"] .cover-sun,
.card-cover[data-art="birthday-balloon-field-svg"] .cover-kicker,
.card-cover[data-art="birthday-balloon-field-svg"] .cover-title { display: none; }
.card-cover[data-art^="photo-cover-"] { background-size: cover; background-position: center; }
.card-cover[data-art^="photo-cover-"] .cover-frame,
.card-cover[data-art^="photo-cover-"] .cover-sun { display: none; }
.card-cover[data-art^="photo-cover-"] .cover-kicker,
.card-cover[data-art^="photo-cover-"] .cover-title { color: #fffefa; text-shadow: 0 1px 5px rgb(0 0 0 / 65%); }
.card-cover[data-art="photo-cover-birthday-golden-hour"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/birthday-golden-hour.jpg"); }
.card-cover[data-art="photo-cover-birthday-cake-candles"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/birthday-cake-candles.jpg"); }
.card-cover[data-art="photo-cover-birthday-sparklers"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/birthday-sparklers.jpg"); }
.card-cover[data-art="photo-cover-thank-you"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/thank-you.jpg"); }
.card-cover[data-art="photo-cover-congratulations"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/congratulations.jpg"); }
.card-cover[data-art="photo-cover-just-because"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/just-because.jpg"); }
.card-cover[data-art="photo-cover-love"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/love.jpg"); }
.card-cover[data-art="photo-cover-seasonal"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/seasonal.jpg"); }
.card-cover[data-art="photo-cover-get-well"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/get-well.jpg"); }
.card-cover[data-art="photo-cover-new-baby"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/new-baby.jpg"); }
.card-cover[data-art="photo-cover-thinking-of-you"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/thinking-of-you.jpg"); }
.card-cover[data-art="photo-cover-sympathy"] { background-image: linear-gradient(180deg, rgb(10 20 30 / 12%), rgb(10 20 30 / 52%)), url("/assets/photos/sympathy.jpg"); }
.card-cover[data-art="soft-arch"] { background-color: #e8eee8; background-image: radial-gradient(ellipse at 50% 108%, transparent 0 35%, rgb(79 109 92 / 72%) 35.5% 36%, transparent 36.5%), radial-gradient(ellipse at 50% 108%, transparent 0 48%, rgb(199 121 99 / 55%) 48.5% 49%, transparent 49.5%), linear-gradient(160deg, transparent 0 72%, rgb(212 173 103 / 32%) 72.5% 73%, transparent 73.5%); }
.card-cover[data-art="orbit-lines"] { background-color: #e7ecee; background-image: radial-gradient(ellipse at 50% 50%, transparent 0 24%, rgb(79 109 92 / 60%) 24.5% 25%, transparent 25.5% 37%, rgb(199 121 99 / 48%) 37.5% 38%, transparent 38.5% 51%, rgb(123 146 151 / 42%) 51.5% 52%, transparent 52.5%); }
.card-cover[data-art="dotted-garden"] { background-color: #edf0e8; background-image: radial-gradient(circle at 15% 19%, #c77963 0 3px, transparent 3.5px), radial-gradient(circle at 78% 25%, #78917b 0 4px, transparent 4.5px), radial-gradient(circle at 25% 78%, #d3ae68 0 3px, transparent 3.5px), radial-gradient(circle at 84% 76%, #8aa6a1 0 3px, transparent 3.5px), radial-gradient(circle at 52% 13%, rgb(79 109 92 / 32%) 0 2px, transparent 2.5px); }
.card-cover[data-art="folded-ribbon"] { background-color: #f1e9e2; background-image: linear-gradient(135deg, transparent 0 42%, rgb(199 121 99 / 66%) 42.5% 46%, transparent 46.5%), linear-gradient(45deg, transparent 0 57%, rgb(79 109 92 / 56%) 57.5% 61%, transparent 61.5%), linear-gradient(135deg, transparent 0 72%, rgb(212 173 103 / 55%) 72.5% 75%, transparent 75.5%); }
.card-cover[data-art="sunrise-lines"] { background-color: #f3ecdf; background-image: radial-gradient(circle at 50% 43%, #d6af68 0 19%, transparent 19.5%), repeating-linear-gradient(0deg, transparent 0 13%, rgb(79 109 92 / 22%) 13.5% 14%, transparent 14.5% 26%); }
.card-cover[data-art="star-map"] { background-color: #e8ebed; background-image: radial-gradient(circle at 18% 22%, #c77963 0 2px, transparent 2.5px), radial-gradient(circle at 75% 18%, #d2ad67 0 2px, transparent 2.5px), radial-gradient(circle at 83% 70%, #78917b 0 2px, transparent 2.5px), radial-gradient(circle at 24% 79%, #78917b 0 2px, transparent 2.5px), linear-gradient(25deg, transparent 49.7%, rgb(79 109 92 / 26%) 50%, transparent 50.3%), linear-gradient(145deg, transparent 49.7%, rgb(199 121 99 / 22%) 50%, transparent 50.3%); }
.card-cover[data-art="fine-confetti"] { background-color: #f2eee6; background-image: radial-gradient(circle at 14% 21%, #c77963 0 2px, transparent 2.5px), radial-gradient(circle at 34% 72%, #78917b 0 2px, transparent 2.5px), radial-gradient(circle at 78% 28%, #d2ad67 0 2px, transparent 2.5px), radial-gradient(circle at 82% 78%, #8aa6a1 0 2px, transparent 2.5px), linear-gradient(45deg, transparent 49%, rgb(199 121 99 / 42%) 49.5% 50.5%, transparent 51%); }
.card-cover[data-art="gentle-waves"] { background-color: #e5edef; background-image: repeating-linear-gradient(168deg, transparent 0 17%, rgb(79 109 125 / 24%) 17.5% 18%, transparent 18.5% 34%), radial-gradient(ellipse at 50% 100%, rgb(212 173 103 / 30%) 0 12%, transparent 12.5%); }
.card-cover[data-art="pressed-petals"] { background-color: #efe9e4; background-image: radial-gradient(ellipse at 22% 28%, rgb(199 121 99 / 66%) 0 4%, transparent 4.5%), radial-gradient(ellipse at 27% 22%, rgb(212 173 103 / 64%) 0 3%, transparent 3.5%), radial-gradient(ellipse at 77% 70%, rgb(79 109 92 / 62%) 0 5%, transparent 5.5%), radial-gradient(ellipse at 70% 76%, rgb(138 166 161 / 58%) 0 3%, transparent 3.5%); }
.card-cover[data-art="double-frame"] { background-color: #f4f0e8; background-image: linear-gradient(90deg, transparent 9%, rgb(79 109 92 / 46%) 9.5% 10%, transparent 10.5% 89%, rgb(79 109 92 / 46%) 89.5% 90%, transparent 90.5%), linear-gradient(0deg, transparent 12%, rgb(199 121 99 / 40%) 12.5% 13%, transparent 13.5% 87%, rgb(199 121 99 / 40%) 87.5% 88%, transparent 88.5%), linear-gradient(90deg, transparent 15%, rgb(212 173 103 / 42%) 15.5% 16%, transparent 16.5% 83%, rgb(212 173 103 / 42%) 83.5% 84%, transparent 84.5%); }
.card-cover[data-art="moon-orbit"] { background-color: #e7e9e7; background-image: radial-gradient(circle at 68% 28%, #d5b979 0 12%, transparent 12.5%), radial-gradient(ellipse at 50% 50%, transparent 0 37%, rgb(79 109 92 / 44%) 37.5% 38%, transparent 38.5%), radial-gradient(ellipse at 50% 50%, transparent 0 48%, rgb(199 121 99 / 35%) 48.5% 49%, transparent 49.5%); }
.card-cover[data-art="color-blocks"] { background-color: #e8eee8; background-image: linear-gradient(135deg, transparent 0 49%, rgb(199 121 99 / 45%) 49.5% 75%, transparent 75.5%), linear-gradient(45deg, transparent 0 55%, rgb(212 173 103 / 58%) 55.5% 78%, transparent 78.5%), linear-gradient(160deg, transparent 0 62%, rgb(79 109 92 / 50%) 62.5% 82%, transparent 82.5%); }
.card-cover[data-art="letterform"] { background-color: #f1e9e3; background-image: radial-gradient(circle at 50% 50%, rgb(199 121 99 / 16%) 0 35%, transparent 35.5%), linear-gradient(135deg, transparent 49.7%, rgb(79 109 92 / 36%) 50%, transparent 50.3%); }
.card-cover[data-art="letterform"]::before { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: rgb(79 109 92 / 32%); font: 160px/1 var(--serif); content: "e"; }
.card-cover[data-title-style="sans"] .cover-title { font-family: var(--sans); font-size: 34px; font-weight: 700; }
.card-cover[data-title-style="rounded"] .cover-title { font-family: "Fredoka", var(--sans); font-size: 38px; }
.card-cover[data-title-style="block"] .cover-title { font-family: "Bungee", var(--sans); font-size: 27px; line-height: 1.15; }
.card-cover[data-title-style="handwritten"] .cover-title { font-family: "Caveat", cursive; font-size: 54px; }
.card-cover[data-art="birthday-golden-hour"][data-title-style="handwritten"] .cover-title { font-size: 40px; }
.design-name { color: var(--muted); font-size: 11px; font-weight: 500; }
.design-choice input:checked ~ .design-name { color: var(--ink); }
.image-upload-group input[type="file"] { min-height: auto; padding: 9px; font-size: 12px; }
.image-upload-status { color: var(--muted); font-size: 11px; font-weight: 400; }
.image-crop-controls { display: grid; gap: 13px; min-width: 0; margin: -5px 0 0; padding: 14px; border: 1px solid var(--line); background: #fffefa; }
.image-crop-controls[hidden] { display: none; }
.image-crop-controls legend { padding: 0 5px; color: var(--ink); font-size: 13px; font-weight: 600; }
.crop-range { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.crop-range > span { display: flex; justify-content: space-between; gap: 12px; }
.crop-range output { color: var(--ink); font-variant-numeric: tabular-nums; }
.crop-range input[type="range"] { width: 100%; min-height: 22px; margin: 0; accent-color: var(--green-deep); cursor: ew-resize; }
.inside-text-controls { display: grid; gap: 13px; min-width: 0; margin: -5px 0 0; padding: 14px; border: 1px solid var(--line); background: #fffefa; }
.inside-text-controls[hidden] { display: none; }
.inside-text-controls legend { padding: 0 5px; color: var(--ink); font-size: 13px; font-weight: 600; }
.inside-text-controls input[type="color"] { width: 56px; min-height: 42px; padding: 4px; }
.built-in-envelope-controls input[type="color"] { width: 56px; min-height: 42px; padding: 4px; }
.crop-reset-button { justify-self: start; padding: 3px 0; border: 0; border-bottom: 1px solid var(--green-deep); background: transparent; color: var(--green-deep); font: 600 11px/1.5 var(--sans); cursor: pointer; }
.crop-reset-button:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.field-group { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 600; }
.field-group[hidden] { display: none; }
.field-group input, .field-group select, .field-group textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid #d8ded8;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
}
.field-group textarea { min-height: 132px; resize: vertical; }
.field-group input:focus-visible, .field-group select:focus-visible, .field-group textarea:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.field-meta { justify-self: end; margin-top: -3px; color: var(--muted); font-size: 11px; font-weight: 400; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.preview-heading h2 { margin: 0; font-family: var(--serif); font-size: 23px; font-weight: 400; }
.preview-tag { color: var(--green-deep); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }
.card-stage { position: relative; height: 720px; overflow: hidden; background-color: #edf1ec; background-image: radial-gradient(#cbd6cd 0.8px, transparent 0.8px); background-size: 18px 18px; }
.inside-text-toolbar { position: absolute; z-index: 20; display: flex; align-items: center; gap: 6px; width: 278px; height: 46px; max-width: calc(100% - 16px); padding: 6px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 5px 18px rgb(38 51 47 / 18%); transform: translate(-50%, -100%); }
.inside-text-toolbar[hidden] { display: none; }
.inside-text-toolbar select { width: 104px; min-height: 32px; padding: 4px 6px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 500 11px var(--sans); }
.inside-text-toolbar input[type="range"] { width: 78px; accent-color: var(--green-deep); }
.inside-text-toolbar input[type="color"] { width: 32px; height: 32px; padding: 3px; border: 1px solid var(--line); background: var(--white); }
.inside-text-toolbar-close { width: 28px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--muted); font: 18px/1 var(--sans); cursor: pointer; }
.inside-text-toolbar-close:hover { color: var(--coral); }
.card-scene { --card-offset: 0px; --envelope-drop: 0px; --envelope-start: 100px; position: relative; width: min(680px, 100%); height: 100%; margin: 0 auto; perspective: 760px; }
.greeting-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: block;
  width: min(499.2px, calc(96% - 23.04px));
  aspect-ratio: 1;
  height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  cursor: pointer;
  opacity: 1;
  transform: translate(-50%, calc(-50% + var(--card-offset))) scale(1);
  transform-style: preserve-3d;
  transition: transform 750ms cubic-bezier(0.2, 0.7, 0.15, 1);
  touch-action: none;
  cursor: grab;
}
.card-inside, .card-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 34px; text-align: left; }
.card-inside { z-index: 1; gap: 8px; background: #fffefa; box-shadow: 0 16px 34px rgb(38 51 47 / 17%); }
.card-scene[data-occasion="custom"] .card-inside { gap: 0; overflow: hidden; }
.card-scene[data-occasion="custom"] .card-inside .inside-kicker,
.card-scene[data-occasion="custom"] .card-inside .inside-greeting,
.card-scene[data-occasion="custom"] .card-inside .inside-message,
.card-scene[data-occasion="custom"] .card-inside .inside-signoff { display: none; }
.custom-inside-canvas { position: absolute; z-index: 2; inset: 0; display: none; overflow: visible; pointer-events: none; }
.card-scene[data-occasion="custom"] .custom-inside-canvas { display: block; }
.love-burst, .seasonal-burst, .baby-burst, .sunshine-burst { position: absolute; z-index: 3; top: -8px; right: 4%; left: 4%; display: flex; justify-content: space-around; overflow: visible; visibility: hidden; pointer-events: none; }
.love-heart, .seasonal-spark, .baby-star, .sunshine-spark { opacity: 0; }
.love-heart { color: #bf6d70; font: 700 22px/1 var(--sans); }
.love-heart:nth-child(1) { --heart-drift: -74px; --heart-delay: 0ms; --heart-turn: -22deg; }
.love-heart:nth-child(2) { --heart-drift: -48px; --heart-delay: 160ms; --heart-turn: 16deg; }
.love-heart:nth-child(3) { --heart-drift: -22px; --heart-delay: 70ms; --heart-turn: -8deg; }
.love-heart:nth-child(4) { --heart-drift: 22px; --heart-delay: 210ms; --heart-turn: 20deg; }
.love-heart:nth-child(5) { --heart-drift: 50px; --heart-delay: 110ms; --heart-turn: -17deg; }
.love-heart:nth-child(6) { --heart-drift: 78px; --heart-delay: 270ms; --heart-turn: 12deg; }
.seasonal-spark { color: #8baeb0; font-size: 21px; }
.seasonal-spark:nth-child(1) { --season-drift: -66px; --season-delay: 0ms; }
.seasonal-spark:nth-child(2) { --season-drift: -40px; --season-delay: 140ms; }
.seasonal-spark:nth-child(3) { --season-drift: -16px; --season-delay: 60ms; }
.seasonal-spark:nth-child(4) { --season-drift: 18px; --season-delay: 200ms; }
.seasonal-spark:nth-child(5) { --season-drift: 46px; --season-delay: 90ms; }
.seasonal-spark:nth-child(6) { --season-drift: 72px; --season-delay: 250ms; }
.baby-star { color: #d2ad67; font-size: 18px; }
.baby-star:nth-child(1) { --star-drift: -58px; --star-delay: 0ms; }
.baby-star:nth-child(2) { --star-drift: -30px; --star-delay: 190ms; }
.baby-star:nth-child(3) { --star-drift: 0px; --star-delay: 80ms; }
.baby-star:nth-child(4) { --star-drift: 32px; --star-delay: 250ms; }
.baby-star:nth-child(5) { --star-drift: 60px; --star-delay: 130ms; }
.sunshine-burst { justify-content: center; gap: 18px; }
.sunshine-icon { color: #d9ad67; font-size: 26px; opacity: 0; }
.sunshine-spark { align-self: center; color: #d9ad67; font-size: 15px; }
.sunshine-spark:last-child { align-self: flex-start; margin-top: -12px; }
.inside-kicker, .cover-kicker { color: var(--green-deep); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.inside-text-editable { position: absolute; left: 8%; transform: translateY(-50%); touch-action: auto; user-select: none; cursor: default; }
.card-scene.is-complete.is-open:not([data-occasion="custom"]) .inside-text-editable { touch-action: none; cursor: grab; }
.inside-text-editable.is-selected { outline: 1px dashed var(--green-deep); outline-offset: 4px; }
.inside-text-editable.is-dragging { cursor: grabbing; }
.inside-text-editable.is-inline-editing { cursor: text !important; outline: 1px solid var(--coral); outline-offset: 3px; user-select: text; }
.inside-greeting { margin: 0; font-family: var(--serif); font-size: 27px; }
.inside-message { width: 72%; max-width: 350px; color: var(--muted); font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.inside-additional-message { width: 72%; max-width: 350px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.inside-signoff { margin: 0; color: var(--coral); font-family: var(--serif); font-size: 19px; }
body.recipient-card-view .inside-text-editable { touch-action: auto; cursor: default; outline: 0; }
.birthday-burst { position: absolute; z-index: 2; top: -18px; left: 50%; width: 100%; height: 130px; overflow: visible; visibility: hidden; pointer-events: none; transform: translateX(-50%); }
.card-scene.is-open[data-card-motion]:not([data-card-motion="none"]) .birthday-burst,
.card-scene.is-open[data-card-design="birthday-02"] .birthday-burst { visibility: visible; }
.party-balloon { position: absolute; bottom: 0; width: 31px; height: 41px; border-radius: 50% 50% 46% 46%; opacity: 0; }
.balloon-coral { left: 33%; background: #c77963; --balloon-drift: -32px; --balloon-delay: 0ms; }
.balloon-sage { left: 49%; background: #6f927b; --balloon-drift: 12px; --balloon-delay: 140ms; }
.balloon-blue { left: 65%; background: #87aeb1; --balloon-drift: 38px; --balloon-delay: 280ms; }
.balloon-gold { left: 27%; background: #d5ad3f; --balloon-drift: -22px; --balloon-delay: 70ms; }
.balloon-coral-two { left: 56%; background: #c77963; --balloon-drift: 24px; --balloon-delay: 210ms; }
.balloon-sage-two { left: 85%; background: #6f927b; --balloon-drift: 45px; --balloon-delay: 350ms; }
.card-scene[data-card-design="birthday-01"] .party-balloon { width: 22px; height: 30px; }
.card-scene[data-card-design="birthday-01"] .balloon-coral { left: 13%; }
.card-scene[data-card-design="birthday-01"] .balloon-sage { left: 42%; }
.card-scene[data-card-design="birthday-01"] .balloon-blue { left: 71%; }
.card-scene[data-card-design="birthday-01"] .party-balloon::before { bottom: -4px; left: calc(50% - 3px); border-top-width: 5px; border-right-width: 3px; border-left-width: 3px; }
.card-scene[data-card-design="birthday-01"] .balloon-string { height: 18px; }
.balloon-string { position: absolute; top: calc(100% - 1px); left: 50%; width: 1px; height: 24px; background: currentColor; color: #68736e; transform: translateX(-50%); }
.party-balloon::before { position: absolute; bottom: -5px; left: calc(50% - 4px); border-top: 6px solid currentColor; border-right: 4px solid transparent; border-left: 4px solid transparent; color: inherit; content: ""; }
.balloon-coral::before { border-top-color: #c77963; }
.balloon-sage::before { border-top-color: #6f927b; }
.balloon-blue::before { border-top-color: #87aeb1; }
.balloon-gold::before { border-top-color: #d5ad3f; }
.balloon-coral-two::before { border-top-color: #c77963; }
.balloon-sage-two::before { border-top-color: #6f927b; }
.card-scene[data-card-design="birthday-02"] .balloon-coral { --birthday-balloon-color: #f19bb9; }
.card-scene[data-card-design="birthday-02"] .balloon-sage { --birthday-balloon-color: #77c7ee; }
.card-scene[data-card-design="birthday-02"] .balloon-blue { --birthday-balloon-color: #f6d35b; }
.card-scene[data-card-design="birthday-02"] .balloon-gold { --birthday-balloon-color: #84d4b1; }
.card-scene[data-card-design="birthday-02"] .balloon-coral-two { --birthday-balloon-color: #ec755c; }
.card-scene[data-card-design="birthday-02"] .balloon-sage-two { --birthday-balloon-color: #bd9fe8; }
.card-scene[data-card-design="birthday-02"] .party-balloon { background: var(--birthday-balloon-color); color: var(--birthday-balloon-color); }
.card-scene[data-card-design="birthday-02"] .party-balloon::before { border-top-color: currentColor; }
.card-scene[data-card-design="birthday-02"] .balloon-string { color: inherit; }
.confetti { position: absolute; bottom: 8px; width: 8px; height: 13px; border-radius: 2px; opacity: 0; }
.confetti-one { left: 24%; background: #c77963; --confetti-drift: -75px; --confetti-delay: 40ms; --confetti-turn: 160deg; }
.confetti-two { left: 40%; background: #d2ad58; --confetti-drift: -48px; --confetti-delay: 180ms; --confetti-turn: -220deg; }
.confetti-three { left: 55%; background: #87aeb1; --confetti-drift: 24px; --confetti-delay: 80ms; --confetti-turn: 250deg; }
.confetti-four { left: 73%; background: #6f927b; --confetti-drift: 70px; --confetti-delay: 220ms; --confetti-turn: -180deg; }
.confetti-five { left: 31%; background: #d2ad58; --confetti-drift: -94px; --confetti-delay: 310ms; --confetti-turn: 290deg; }
.confetti-six { left: 65%; background: #c77963; --confetti-drift: 68px; --confetti-delay: 350ms; --confetti-turn: -260deg; }
.confetti-seven { left: 47%; background: #87aeb1; --confetti-drift: -6px; --confetti-delay: 260ms; --confetti-turn: 200deg; }
.confetti-eight { left: 80%; background: #d2ad58; --confetti-drift: 88px; --confetti-delay: 120ms; --confetti-turn: -300deg; }
.confetti-nine { left: 12%; background: #c77963; --confetti-drift: -60px; --confetti-delay: 360ms; --confetti-turn: -150deg; }
.confetti-ten { left: 19%; background: #d2ad58; --confetti-drift: -25px; --confetti-delay: 410ms; --confetti-turn: 180deg; }
.confetti-eleven { left: 36%; background: #87aeb1; --confetti-drift: -55px; --confetti-delay: 470ms; --confetti-turn: -240deg; }
.confetti-twelve { left: 52%; background: #6f927b; --confetti-drift: 35px; --confetti-delay: 520ms; --confetti-turn: 210deg; }
.confetti-thirteen { left: 60%; background: #c77963; --confetti-drift: 68px; --confetti-delay: 390ms; --confetti-turn: -200deg; }
.confetti-fourteen { left: 71%; background: #d2ad58; --confetti-drift: 48px; --confetti-delay: 550ms; --confetti-turn: 280deg; }
.confetti-fifteen { left: 86%; background: #87aeb1; --confetti-drift: 83px; --confetti-delay: 440ms; --confetti-turn: -170deg; }
.confetti-sixteen { left: 92%; background: #6f927b; --confetti-drift: 100px; --confetti-delay: 600ms; --confetti-turn: 230deg; }
.card-scene[data-card-design="birthday-02"] .confetti-one,
.card-scene[data-card-design="birthday-02"] .confetti-seven,
.card-scene[data-card-design="birthday-02"] .confetti-thirteen { background: #f19bb9; }
.card-scene[data-card-design="birthday-02"] .confetti-two,
.card-scene[data-card-design="birthday-02"] .confetti-eight,
.card-scene[data-card-design="birthday-02"] .confetti-fourteen { background: #77c7ee; }
.card-scene[data-card-design="birthday-02"] .confetti-three,
.card-scene[data-card-design="birthday-02"] .confetti-nine,
.card-scene[data-card-design="birthday-02"] .confetti-fifteen { background: #f6d35b; }
.card-scene[data-card-design="birthday-02"] .confetti-four,
.card-scene[data-card-design="birthday-02"] .confetti-ten,
.card-scene[data-card-design="birthday-02"] .confetti-sixteen { background: #84d4b1; }
.card-scene[data-card-design="birthday-02"] .confetti-five,
.card-scene[data-card-design="birthday-02"] .confetti-eleven { background: #ec755c; }
.card-scene[data-card-design="birthday-02"] .confetti-six,
.card-scene[data-card-design="birthday-02"] .confetti-twelve { background: #bd9fe8; }
.party-petal { position: absolute; bottom: 4px; width: 13px; height: 21px; border-radius: 100% 0 100% 0; opacity: 0; }
.petal-one { left: 22%; background: #c77963; --petal-drift: -68px; --petal-delay: 0ms; }
.petal-two { left: 36%; background: #d9ad67; --petal-drift: -44px; --petal-delay: 180ms; }
.petal-three { left: 49%; background: #829b84; --petal-drift: -10px; --petal-delay: 80ms; }
.petal-four { left: 62%; background: #d6a4a0; --petal-drift: 30px; --petal-delay: 240ms; }
.petal-five { left: 76%; background: #87aeb1; --petal-drift: 66px; --petal-delay: 120ms; }
.petal-six { left: 88%; background: #d2ad58; --petal-drift: 90px; --petal-delay: 300ms; }
.card-scene.is-open[data-card-motion="birthday"] .party-balloon, .card-scene.is-open[data-card-motion="balloons"] .party-balloon, .card-scene.is-open[data-card-design="birthday-01"] .party-balloon { animation: birthday-balloon-rise 2.7s var(--balloon-delay) cubic-bezier(0.2, 0.65, 0.25, 1) both; }
.card-scene.is-open[data-card-design="birthday-02"] .party-balloon { animation: birthday-balloon-rise 2.7s var(--balloon-delay) cubic-bezier(0.2, 0.65, 0.25, 1) both; }
.card-scene.is-open[data-card-motion="birthday"] .confetti, .card-scene.is-open[data-card-motion="confetti"] .confetti, .card-scene.is-open[data-card-design="birthday-01"] .confetti, .card-scene.is-open[data-card-design="birthday-02"] .confetti { animation: birthday-confetti-rise 2.2s var(--confetti-delay) cubic-bezier(0.15, 0.6, 0.3, 1) both; }
.card-scene.is-open[data-card-motion="petals"] .party-petal { animation: card-petal-rise 2.8s var(--petal-delay) cubic-bezier(0.2, 0.65, 0.25, 1) both; }
.card-scene.is-open[data-card-motion="love-hearts"] .love-burst,
.card-scene.is-open[data-card-motion="seasonal-spark"] .seasonal-burst,
.card-scene.is-open[data-card-motion="snowfall"] .seasonal-burst,
.card-scene.is-open[data-card-motion="baby-stars"] .baby-burst,
.card-scene.is-open[data-card-motion="sunshine"] .sunshine-burst { visibility: visible; }
.card-scene.is-open[data-card-motion="love-hearts"] .love-heart { animation: love-heart-rise 2.8s var(--heart-delay) cubic-bezier(0.2, 0.65, 0.25, 1) both; }
.card-scene.is-open[data-card-motion="seasonal-spark"] .seasonal-spark { color: #d08a54; animation: seasonal-spark-rise 2.5s var(--season-delay) ease-out both; }
.card-scene.is-open[data-card-motion="snowfall"] .seasonal-spark { animation: seasonal-spark-rise 3.6s var(--season-delay) ease-in-out both; }
.card-scene.is-open[data-card-motion="baby-stars"] .baby-star { animation: baby-star-rise 3.2s var(--star-delay) ease-out both; }
.card-scene.is-open[data-card-motion="sunshine"] .sunshine-icon { animation: sunshine-glow 2.4s ease-out both; }
.card-scene.is-open[data-card-motion="sunshine"] .sunshine-spark { animation: baby-star-rise 2.7s ease-out both; }
.card-scene.is-open[data-card-motion="birthday"] .balloon-sage, .card-scene.is-open[data-card-motion="balloons"] .balloon-sage { animation-delay: 140ms; }
.card-scene.is-open[data-card-motion="birthday"] .balloon-blue, .card-scene.is-open[data-card-motion="balloons"] .balloon-blue { animation-delay: 280ms; }
.card-cover { z-index: 2; isolation: isolate; align-items: center; overflow: hidden; text-align: center; background: #dce8df; backface-visibility: hidden; box-shadow: 0 16px 34px rgb(38 51 47 / 17%); transform-origin: left center; transition: transform 850ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.card-cover[data-art="custom"] { background-image: none; }
.card-cover[data-art="custom"] .cover-frame,
.card-cover[data-art="custom"] .cover-sun,
.card-cover[data-art="custom"] .cover-kicker,
.card-cover[data-art="custom"] .cover-title { display: none; }
.custom-canvas { position: absolute; z-index: 2; inset: 0; display: none; overflow: visible; pointer-events: none; }
.custom-canvas, .custom-inside-canvas { inset: auto; top: 50%; left: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%) scale(var(--custom-canvas-scale, 1)); transform-origin: center; }
.card-cover[data-art="custom"] .custom-canvas { display: block; }
.card-scene[data-occasion="custom"] .card-cover .custom-canvas { display: block; }
.custom-canvas[hidden] { display: none; }
.card-cover[data-artwork-only="true"] .cover-kicker,
.card-cover[data-artwork-only="true"] .cover-title { display: none; }
.card-cover[data-artwork-only="true"] .birthday-sunrise-type,
.card-cover[data-artwork-only="true"] .occasion-birthday-sunrise-type { display: none; }
.card-cover .custom-canvas { display: block; z-index: 3; }
.card-scene.is-complete:not(.is-open) .custom-canvas { pointer-events: auto; }
.card-scene.is-complete[data-occasion="custom"][data-custom-menu="cover"]:not(.is-open) .custom-canvas,
.card-scene.is-complete.is-open[data-occasion="custom"][data-custom-menu="inside"] .custom-inside-canvas { pointer-events: auto; }
.custom-canvas::before, .custom-canvas::after,
.custom-inside-canvas::before, .custom-inside-canvas::after { position: absolute; z-index: 40; display: none; background: rgb(79 109 92 / 55%); content: ""; pointer-events: none; }
.custom-canvas.is-snap-x::before, .custom-inside-canvas.is-snap-x::before { top: 0; bottom: 0; left: var(--custom-snap-x); display: block; width: 1px; }
.custom-canvas.is-snap-y::after, .custom-inside-canvas.is-snap-y::after { right: 0; left: 0; top: var(--custom-snap-y); display: block; height: 1px; }
.custom-item { position: absolute; z-index: 1; display: grid; place-items: center; width: var(--custom-item-width, var(--custom-item-size)); height: var(--custom-item-height, var(--custom-item-size)); color: var(--custom-item-color); transform-origin: center; pointer-events: auto; touch-action: none; cursor: grab; }
body.recipient-card-view .custom-canvas .custom-item,
body.recipient-card-view .custom-inside-canvas .custom-item { pointer-events: none; touch-action: auto; cursor: default; }
.custom-item.is-dragging { cursor: grabbing; }
.custom-item-shape { background: var(--custom-item-color); }
.custom-item-image { overflow: hidden; background: transparent; }
.custom-item-photo { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.custom-shape-heart { background: none; color: var(--custom-item-color); }
.custom-heart-glyph { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; fill: currentColor; }
.custom-shape-circle { border-radius: 50%; }
.custom-shape-square { border-radius: 2px; }
.custom-shape-star { clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 57%, 81% 94%, 50% 71%, 19% 94%, 31% 57%, 0 35%, 38% 35%); }
.custom-shape-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.custom-item-text { width: max-content; height: auto; max-width: var(--custom-item-text-max-width, 100%); min-height: var(--custom-item-size); padding: 2px 3px; background: transparent; color: var(--custom-item-color); font-size: var(--custom-item-size); font-weight: 700; letter-spacing: var(--custom-item-letter-spacing, 0px); line-height: 1.05; text-align: center; white-space: pre-wrap; overflow-wrap: break-word; }
.custom-text-content { min-width: 0; }
.custom-item-text.custom-text-curved { display: block; max-width: none; min-height: 0; }
.custom-item-text[data-text-background="rounded"],
.custom-item-text[data-text-background="square"],
.custom-item-text[data-text-background="circle"] { display: grid; place-items: center; padding: 16px; background: var(--custom-item-background-color); }
.custom-item-text[data-text-background="square"] { border-radius: 0; }
.custom-item-text[data-text-background="rounded"] { border-radius: 18px; }
.custom-item-text[data-text-background="circle"] { aspect-ratio: 1; border-radius: 50%; padding: 24px; }
.custom-item-text[data-text-style="outline"] .custom-text-content { color: transparent; -webkit-text-stroke: 1.5px var(--custom-item-color); }
.custom-item-text[data-text-style="outline"] .custom-text-curve text { fill: none; stroke: var(--custom-item-color); stroke-width: 1.5px; stroke-linejoin: round; }
.custom-item-text[data-text-style="shadow"] .custom-text-content,
.custom-item-text[data-text-style="shadow"] .custom-text-curve text { text-shadow: 3px 3px 2px var(--custom-item-accent-color); }
.custom-item-text[data-text-style="3d"] .custom-text-content,
.custom-item-text[data-text-style="3d"] .custom-text-curve text { text-shadow: 1px 1px 0 var(--custom-item-accent-color), 2px 2px 0 var(--custom-item-accent-color), 3px 3px 0 var(--custom-item-accent-color), 4px 4px 0 var(--custom-item-accent-color); }
.custom-item-text[data-text-style="gradient"] .custom-text-content { background: linear-gradient(var(--custom-item-color), var(--custom-item-accent-color)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.card-toolbar-cell button[aria-pressed="true"] { color: var(--green-deep); background: var(--green); box-shadow: inset 0 -2px var(--green-deep); }
.custom-text-curve { display: block; max-width: none; overflow: visible; }
.custom-font-sans { font-family: var(--sans); }
.custom-font-serif { font-family: var(--serif); }
.custom-font-mono { font-family: "SFMono-Regular", Consolas, monospace; }
.custom-font-rounded { font-family: "Fredoka", sans-serif; }
.custom-font-block { font-family: "Bungee", sans-serif; }
.custom-font-handwritten { font-family: "Caveat", cursive; }
.custom-item.is-selected { outline: 2px dashed var(--coral); outline-offset: 3px; }
.card-cover.has-photo::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 52%)); content: ""; }
.cover-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-position-x, 50%) var(--cover-position-y, 50%); transform: scale(var(--cover-zoom, 1)); transform-origin: var(--cover-position-x, 50%) var(--cover-position-y, 50%); }
.cover-frame { position: absolute; z-index: 2; inset: 12px; border: 1px solid rgb(79 109 92 / 35%); }
.cover-kicker, .cover-title { position: relative; z-index: 2; }
.cover-title { max-width: 340px; margin-top: 9px; color: var(--ink); font-family: var(--serif); font-size: 44px; line-height: 1.05; }
.card-cover[data-art="birthday_1"] .cover-kicker,
.card-cover[data-art="birthday_1"] .cover-title {
  -webkit-text-stroke: 10px #fff;
  paint-order: stroke fill;
  text-shadow: 0 0 3px #fff, 0 0 7px #fff;
}
.card-cover[data-art="love-letter"]::before, .card-cover[data-art="heart-doodles"]::before { position: absolute; z-index: 1; top: 24px; left: 50%; color: #c34f69; font: 150px/1 var(--serif); opacity: 0.22; content: "\2665"; transform: translateX(-50%) rotate(-10deg); }
.card-cover[data-art="hearts"]::before, .card-cover[data-art="hearts"]::after { position: absolute; z-index: 1; color: #c34f69; font: 76px/1 var(--serif); opacity: 0.32; content: "\2665"; }
.card-cover[data-art="hearts"]::before { top: 30px; left: 28px; transform: rotate(-14deg); }
.card-cover[data-art="hearts"]::after { right: 28px; bottom: 28px; color: #d9889a; font-size: 92px; transform: rotate(13deg); }
.card-cover[data-art="pumpkin"]::before { position: absolute; z-index: 1; top: 54px; left: 50%; width: 190px; height: 158px; border-radius: 48%; background: repeating-linear-gradient(90deg, #d77738 0 22px, #f19a4d 24px 43px, #c96332 45px 52px); box-shadow: inset 0 -10px 0 rgb(117 63 39 / 14%); content: ""; transform: translateX(-50%); }
.card-cover[data-art="pumpkin"]::after { position: absolute; z-index: 1; top: 37px; left: calc(50% - 11px); width: 24px; height: 35px; border-radius: 4px 80% 4px 80%; background: #597c54; content: ""; transform: rotate(18deg); }
.card-cover[data-art="evergreen"]::before { position: absolute; z-index: 1; top: 20px; left: 50%; width: 205px; height: 260px; background-color: #38634f; background-image: radial-gradient(circle at 50% 17%, #d8b76b 0 5px, transparent 6px), radial-gradient(circle at 36% 35%, #cf6872 0 6px, transparent 7px), radial-gradient(circle at 66% 44%, #e2c06e 0 6px, transparent 7px), radial-gradient(circle at 42% 61%, #d58183 0 6px, transparent 7px), radial-gradient(circle at 59% 76%, #e2c06e 0 6px, transparent 7px), linear-gradient(135deg, rgb(255 255 255 / 12%), transparent 45%); clip-path: polygon(50% 0, 61% 22%, 55% 22%, 72% 43%, 63% 43%, 87% 72%, 64% 72%, 64% 100%, 36% 100%, 36% 72%, 13% 72%, 37% 43%, 28% 43%, 45% 22%, 39% 22%); content: ""; transform: translateX(-50%); }
.card-cover[data-art="evergreen"]::after { position: absolute; z-index: 1; top: 11px; left: calc(50% - 14px); color: #e5c775; font: 30px/1 var(--serif); content: "\2726"; }
.card-cover[data-art="snowman"]::before { position: absolute; z-index: 1; top: 38px; left: 50%; width: 190px; height: 245px; background: radial-gradient(circle at 43% 24%, #37474a 0 3px, transparent 3.5px), radial-gradient(circle at 57% 24%, #37474a 0 3px, transparent 3.5px), radial-gradient(ellipse at 51% 30%, #dc8152 0 4px, transparent 4.5px), radial-gradient(circle at 50% 53%, #52676a 0 5px, transparent 5.5px), radial-gradient(circle at 50% 65%, #52676a 0 5px, transparent 5.5px), radial-gradient(circle at 50% 77%, #52676a 0 5px, transparent 5.5px), radial-gradient(ellipse at 50% 68%, #fffefa 0 39%, transparent 39.5%), radial-gradient(ellipse at 50% 27%, #fffefa 0 24%, transparent 24.5%); content: ""; transform: translateX(-50%); }
.card-cover[data-art="snowman"]::after { position: absolute; z-index: 1; top: 45px; left: calc(50% - 40px); width: 80px; height: 25px; border-radius: 3px 3px 0 0; background: #46645b; box-shadow: 0 19px 0 -7px #c77963; content: ""; }
.card-cover[data-art="evergreen"] .cover-title, .card-cover[data-art="moonlight"] .cover-title { color: #fffefa; text-shadow: 0 1px 8px rgb(28 45 39 / 55%); }
.card-cover[data-art="evergreen"] .cover-kicker, .card-cover[data-art="moonlight"] .cover-kicker { color: #f1d995; text-shadow: 0 1px 7px rgb(28 45 39 / 70%); }
.envelope { position: absolute; top: var(--envelope-start); right: 0; left: 0; width: min(520px, calc(100% - 24px)); aspect-ratio: 1; height: auto; margin: 0 auto; }
.envelope-back { position: absolute; z-index: 1; inset: 0; background: var(--custom-envelope-color, #a9beb0); box-shadow: 0 18px 28px rgb(38 51 47 / 12%); }
.envelope-front { position: absolute; z-index: 3; inset: 0; background: color-mix(in srgb, var(--custom-envelope-color, #a9beb0), #000 8%); clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%); }
.envelope-flap { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 60%; background: color-mix(in srgb, var(--custom-envelope-color, #a9beb0), #fff 28%); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.envelope-card-front { position: absolute; z-index: 7; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 38px; background: var(--custom-envelope-front-color, #d2ded5); box-shadow: 0 18px 28px rgb(38 51 47 / 12%); text-align: center; backface-visibility: hidden; transform-origin: center center; transition: transform 900ms cubic-bezier(0.25, 0.8, 0.2, 1); }
.envelope-card-front > * { position: relative; z-index: 1; }
.envelope-default-stamp,
.envelope-card-front > .envelope-default-stamp { position: absolute; z-index: 4; top: 8%; right: 7%; display: grid; place-items: center; width: clamp(52px, 16vw, 80px); max-width: 20%; aspect-ratio: 4 / 5; border: 2px solid #4f6d5c; outline: 2px dotted #4f6d5c; outline-offset: 2px; background: #fffefa; color: #4f6d5c; font: 700 clamp(22px, 4vw, 34px)/1 var(--sans); pointer-events: none; user-select: none; }
.envelope-default-stamp > span { display: grid; justify-items: center; gap: 4px; }
.envelope-default-stamp small { font: 700 9px/1 var(--sans); letter-spacing: 1px; }
.envelope-card-front-copy { position: absolute !important; top: var(--custom-envelope-front-y, 50%); left: var(--custom-envelope-front-x, 50%); width: calc(100% - 76px); max-width: calc(100% - 76px); margin: 0; color: var(--custom-envelope-front-text-color, var(--ink)); font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; text-align: var(--custom-envelope-front-alignment, center); white-space: pre-line; transform: translate(-50%, -50%); cursor: move; touch-action: none; }
.custom-envelope-back-copy { min-height: 78px !important; resize: vertical; white-space: pre-wrap; }
.custom-object-text textarea, .custom-add-group textarea { min-height: 78px; resize: vertical; white-space: pre-wrap; }
.custom-add-group textarea { min-height: 78px; resize: vertical; white-space: pre-wrap; }
.envelope-card-front-stamps { position: absolute !important; z-index: 2 !important; inset: 0; pointer-events: none; }
.envelope-card-front-stamps::before, .envelope-card-front-stamps::after { position: absolute; z-index: 9; display: none; background: rgb(79 109 92 / 60%); content: ""; pointer-events: none; }
.envelope-card-front-stamps.is-snap-x::before { top: 0; bottom: 0; left: var(--envelope-snap-x); display: block; width: 1px; }
.envelope-card-front-stamps.is-snap-y::after { right: 0; left: 0; top: var(--envelope-snap-y); display: block; height: 1px; }
.envelope-stamp { position: absolute; display: grid; width: var(--envelope-stamp-size); height: var(--envelope-stamp-size); place-items: center; border: 2px solid var(--envelope-stamp-color); outline: 1px dashed var(--envelope-stamp-color); outline-offset: 3px; background: rgb(255 254 250 / 88%); color: var(--envelope-stamp-color); font: 700 calc(var(--envelope-stamp-size) * 0.48)/1 var(--sans); text-align: center; cursor: grab; pointer-events: auto; touch-action: none; user-select: none; }
.envelope-stamp-postmark { width: calc(var(--envelope-stamp-size) * 1.25); font-size: calc(var(--envelope-stamp-size) * 0.2); letter-spacing: 0; }
.envelope-stamp-star { border-radius: 50%; }
.envelope-stamp-heart { border-radius: 46% 46% 50% 50%; }
.envelope-stamp-flower { border-radius: 50% 50% 8% 50%; }
.envelope-stamp:active { cursor: grabbing; }
body.recipient-card-view .envelope-stamp { pointer-events: none; touch-action: auto; cursor: default; }
.custom-envelope-stamp-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.custom-envelope-stamp-list { display: grid; gap: 6px; }
.custom-envelope-stamp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); background: #fffefa; color: var(--ink); font-size: 12px; }
.custom-envelope-stamp-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-envelope-stamp-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.card-scene.is-envelope-flipping .envelope-back,
.card-scene.is-envelope-flipping .envelope-front,
.card-scene.is-envelope-flipping .envelope-flap,
.card-scene.is-envelope-flipping .envelope-address,
.card-scene.is-envelope-flipping .envelope-seal { visibility: visible; animation: envelope-back-reveal 420ms 450ms cubic-bezier(0.2, 0.7, 0.15, 1) both; }
.card-scene.is-envelope-flipping .envelope-card-front,
.card-scene.is-envelope-back-visible .envelope-card-front { transform: rotateY(-180deg) rotateZ(8deg) scale(0.94); pointer-events: none; }
.envelope-address { position: absolute; z-index: 5; right: 0; bottom: 30px; left: 0; display: grid; gap: 3px; text-align: center; transition: opacity 220ms ease; }
.envelope-address span { color: var(--custom-envelope-text-color, #52675a); font-size: 10px; letter-spacing: 0.7px; text-transform: uppercase; }
.card-scene[data-occasion="custom"] .envelope-address span { display: none; }
.envelope-address strong { color: var(--custom-envelope-text-color, var(--ink)); font-family: var(--serif); font-size: 25px; font-weight: 400; }
.envelope-address strong { max-width: 82%; margin: 0 auto; overflow-wrap: anywhere; white-space: pre-line; line-height: 1.2; }
.envelope-seal { position: absolute; z-index: 6; bottom: 18px; left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--coral); transition: opacity 220ms ease; }
.card-scene .greeting-card { pointer-events: none; }
.card-scene.is-closed .greeting-card { visibility: hidden; }
.card-scene.is-closed .envelope { cursor: pointer; }
.card-scene.is-opening .envelope-flap { animation: envelope-open 750ms 120ms cubic-bezier(0.2, 0.7, 0.15, 1) forwards; }
.card-scene.is-pull-ready .envelope-flap, .card-scene.is-dragging .envelope-flap, .card-scene.is-returning .envelope-flap, .card-scene.is-settling .envelope-flap, .card-scene.is-complete .envelope-flap { z-index: 1; transform: translateY(-100%); clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.card-scene.is-pull-ready .envelope-front, .card-scene.is-dragging .envelope-front, .card-scene.is-settling .envelope-front { pointer-events: none; }
.card-scene.is-pull-ready .greeting-card, .card-scene.is-complete .greeting-card { pointer-events: auto; }
.card-scene.is-dragging .greeting-card { pointer-events: auto; cursor: grabbing; transition: none; }
.card-scene.is-dragging .envelope { top: calc(var(--envelope-start) + var(--envelope-drop)); }
.card-scene.is-returning .greeting-card { transition: transform 420ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.card-scene.is-returning .envelope { top: var(--envelope-start); transition: top 420ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.card-scene.is-settling .greeting-card { transform: translate(-50%, -50%) scale(1); transition: transform 760ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.card-scene.is-settling .envelope { top: calc(var(--envelope-start) + 680px); transition: top 760ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.card-scene.is-complete .envelope { top: calc(var(--envelope-start) + 680px); visibility: hidden; }
.envelope-back, .envelope-front, .envelope-flap { transition: opacity 760ms ease; }
.card-scene.is-settling .envelope-back, .card-scene.is-settling .envelope-front, .card-scene.is-settling .envelope-flap,
.card-scene.is-complete .envelope-back, .card-scene.is-complete .envelope-front, .card-scene.is-complete .envelope-flap,
.card-scene.is-complete .envelope-address, .card-scene.is-complete .envelope-seal { opacity: 0; }
.card-scene.is-complete .greeting-card { transform: translate(-50%, -50%) scale(1); }
.card-scene.is-open .card-cover { transform: rotateY(-165deg); }
.card-scene.is-card-closing .greeting-card { pointer-events: none; }
.card-scene.is-reinserting .greeting-card { transition: transform 760ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.card-scene.is-reinserting .envelope { top: var(--envelope-start); visibility: visible; transition: top 760ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.card-scene.is-reinserting .envelope-flap { z-index: 1; transform: translateY(-100%); clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.card-scene.is-flap-closing .envelope-flap { animation: envelope-open 750ms cubic-bezier(0.2, 0.7, 0.15, 1) reverse both; }
.card-scene.is-envelope-turning-front .envelope-back,
.card-scene.is-envelope-turning-front .envelope-front,
.card-scene.is-envelope-turning-front .envelope-flap,
.card-scene.is-envelope-turning-front .envelope-address,
.card-scene.is-envelope-turning-front .envelope-seal { animation: envelope-back-reveal 420ms cubic-bezier(0.2, 0.7, 0.15, 1) reverse both; }
.preview-controls { display: grid; justify-items: center; gap: 3px; min-height: 68px; padding: 8px; text-align: center; }
.card-status { min-height: 24px; margin: 0; color: var(--muted); font-size: 12px; }
.replay-button { padding: 4px 8px; border: 0; background: transparent; color: var(--green-deep); font: 600 12px var(--sans); cursor: pointer; }
.replay-button:hover { color: var(--coral); }
.replay-button span { margin-left: 4px; font-size: 15px; }

@keyframes envelope-open {
  from { transform: translateY(0); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  to { transform: translateY(-100%); clip-path: polygon(0 100%, 100% 100%, 50% 0); }
}
@keyframes envelope-back-reveal {
  from { opacity: 0; transform: rotateY(-65deg) scaleX(0.84); }
  to { opacity: 1; transform: none; }
}
@keyframes birthday-balloon-rise {
  0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.72); }
  14% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--balloon-drift), -235px, 0) scale(1) rotate(9deg); }
}
@keyframes birthday-confetti-rise {
  0% { opacity: 0; transform: translate3d(0, 12px, 0) rotate(0); }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--confetti-drift), -220px, 0) rotate(var(--confetti-turn)); }
}
@keyframes card-petal-rise {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) rotate(0) scale(0.75); }
  14% { opacity: 0.9; }
  80% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(var(--petal-drift), -210px, 0) rotate(115deg) scale(1); }
}
@keyframes love-heart-rise {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.45) rotate(var(--heart-turn)); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--heart-drift), -140px, 0) scale(1) rotate(var(--heart-turn)); }
}
@keyframes seasonal-spark-rise {
  0% { opacity: 0; transform: translate3d(0, -18px, 0) rotate(0) scale(0.65); }
  18% { opacity: 0.95; }
  100% { opacity: 0; transform: translate3d(var(--season-drift), 138px, 0) rotate(110deg) scale(1); }
}
@keyframes baby-star-rise {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.65); }
  22% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(var(--star-drift, 0px), -118px, 0) scale(1.15); }
}
@keyframes sunshine-glow {
  0% { opacity: 0; transform: scale(0.55) rotate(-25deg); }
  45% { opacity: 0.9; transform: scale(1.1) rotate(10deg); }
  100% { opacity: 0.1; transform: scale(1.35) rotate(35deg); }
}

@media (max-width: 900px) {
  .create-layout { display: flex; flex-direction: column; gap: 8px; height: auto; }
  .occasion-control { order: -3; width: min(100%, 650px); margin: 0 auto; }
  .design-picker { order: -2; width: min(100%, 650px); margin: 0 auto; }
  .create-preview { order: -1; }
  .create-form { order: 0; grid-template-rows: auto auto auto auto; gap: 8px; height: auto; max-height: none; overflow: visible; padding: 0; }
  .create-options-scroll { overflow: visible; padding-right: 0; }
  .preview-controls { min-height: 48px; padding: 4px 8px; }
  .create-form { width: min(100%, 650px); margin: 0 auto; }
  .create-preview { width: min(100%, 760px); margin: 0 auto; }
}
@media (max-width: 680px) {
  .hero-create-link { margin: 12px 0 0; }
  .create-page { width: calc(100% - 36px); padding-top: 38px; }
  .create-intro { margin-bottom: 24px; }
  .create-intro h1 { font-size: 38px; }
  .create-layout { grid-template-columns: 1fr; gap: 4px; }
  .create-form, .create-options-scroll { gap: 15px; }
  .create-form { gap: 4px; }
  .create-options-scroll { max-height: min(440px, calc(100vw - 36px)); overflow-y: auto; overscroll-behavior: contain; padding-right: 10px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--green-deep) transparent; }
  .custom-editor { max-height: none; overflow: visible; padding: 12px; }
  .custom-editor { padding: 12px; }
  .custom-workflow-menu { position: sticky; top: 0; z-index: 2; }
  .preview-controls { min-height: 48px; gap: 0; padding: 0 4px; }
  .create-form > .custom-editor-heading { min-height: 0; margin: 0; }
  .create-form > .custom-editor-heading > div:first-child { display: none; }
  .custom-workflow-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .custom-menu-tab { min-height: 40px; padding: 5px 3px; font-size: 10px; line-height: 1.15; }
  .custom-text-options { grid-template-columns: minmax(0, 1fr) 56px; }
  .custom-text-options .custom-add-button { grid-column: 1 / -1; }
  .card-stage { width: min(100%, 440px); aspect-ratio: 1; height: auto; margin: 0 auto; }
  .card-scene { --envelope-start: 6px; }
  .envelope { width: min(480px, calc(100% - 12px)); }
  .greeting-card { width: min(460.8px, calc(96% - 11.52px)); }
  .card-inside, .card-cover { padding: 25px; }
  .cover-title { max-width: 290px; font-size: 35px; }
  .inside-greeting { font-size: 24px; }
  .inside-message { font-size: 13px; }
  .envelope-address { bottom: 25px; }
  .envelope-address strong { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .greeting-card, .card-cover, .envelope, .envelope-card-front { transition: none; }
  .card-scene.is-opening .envelope-flap { animation: none; }
  .envelope-back, .envelope-front, .envelope-flap { transition: none; }
  .card-scene.is-reinserting .greeting-card, .card-scene.is-reinserting .envelope { transition: none; }
  .card-scene.is-flap-closing .envelope-flap,
  .card-scene.is-envelope-turning-front .envelope-back,
  .card-scene.is-envelope-turning-front .envelope-front,
  .card-scene.is-envelope-turning-front .envelope-flap,
  .card-scene.is-envelope-turning-front .envelope-address,
  .card-scene.is-envelope-turning-front .envelope-seal { animation: none; }
  .card-scene.is-open[data-card-motion="birthday"] .party-balloon,
  .card-scene.is-open[data-card-motion="balloons"] .party-balloon,
  .card-scene.is-open[data-card-design="birthday-02"] .party-balloon,
  .card-scene.is-open[data-card-motion="birthday"] .confetti,
  .card-scene.is-open[data-card-motion="confetti"] .confetti,
  .card-scene.is-open[data-card-design="birthday-01"] .confetti,
  .card-scene.is-open[data-card-design="birthday-02"] .confetti,
  .card-scene.is-open[data-card-motion="petals"] .party-petal,
  .card-scene.is-open[data-card-motion="love-hearts"] .love-heart,
  .card-scene.is-open[data-card-motion="seasonal-spark"] .seasonal-spark,
  .card-scene.is-open[data-card-motion="snowfall"] .seasonal-spark,
  .card-scene.is-open[data-card-motion="baby-stars"] .baby-star { animation: none; opacity: 1; }
  .card-scene.is-open[data-card-motion="sunshine"] .sunshine-icon,
  .card-scene.is-open[data-card-motion="sunshine"] .sunshine-spark { animation: none; opacity: 1; }
}

body.recipient-card-view .create-page { width: min(860px, calc(100% - 80px)); }
body.recipient-card-view .create-layout { display: block; height: auto; max-width: 680px; margin: 0 auto; }
body.recipient-card-view .create-form, body.recipient-card-unavailable .create-layout { display: none; }
body.recipient-card-view:not(.recipient-card-unavailable) .create-intro { display: none; }
body.recipient-card-view .occasion-control, body.recipient-card-view .preview-heading { display: none; }
body.recipient-card-unavailable .create-preview { display: none; }
body.recipient-card-view .design-picker, body.recipient-card-view .image-upload-group { display: none; }
body.recipient-card-view .card-stage { background: none; }

@media (max-width: 680px) {
  body.recipient-card-view .create-page { width: calc(100% - 36px); }
  body.recipient-card-view .create-intro h1 { font-size: 34px; }
  body.recipient-card-view .card-stage { aspect-ratio: auto; height: calc(min(440px, 100vw - 36px) * 1.6 + 60px); }
  body.recipient-card-view .card-scene { --envelope-start: calc((min(440px, 100vw - 36px) - 12px) * 0.6 + 24px); }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body:not(.recipient-card-view) .create-intro > p { display: none; }
body:not(.recipient-card-view) .create-layout { display: flex; flex-direction: column; height: auto; gap: 0; max-width: 900px; margin: 0 auto; }
body:not(.recipient-card-view) .create-form { display: contents; }
body:not(.recipient-card-view) .create-options-scroll, body:not(.recipient-card-view) .custom-editor-heading { display: none; }
body:not(.recipient-card-view) .custom-workflow-menu { position: static; order: 0; display: flex; gap: 0; padding: 0; background: transparent; border-bottom: 1px solid var(--line); }
body:not(.recipient-card-view) .custom-menu-tab { flex: 1; min-height: 44px; padding: 10px 4px; border: 0; background: transparent; color: var(--muted); font: 600 12px var(--sans); }
body:not(.recipient-card-view) .custom-menu-tab[aria-selected="true"] { color: var(--green-deep); box-shadow: inset 0 -2px var(--green-deep); }
.card-editor-toolbar { order: 1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-top: 0; background: var(--white); }
.card-toolbar-group { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; min-width: 0; max-width: 100%; }
.card-toolbar-group[data-toolbar-group="custom-selection"] { order: 1; flex-basis: 100%; display: grid; align-items: stretch; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-auto-rows: 1fr; gap: 12px; }
.card-toolbar-section { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fffefa; }
.card-toolbar-section-title { flex-basis: 100%; color: var(--green-deep); font: 600 12px/18px var(--sans); }
.inside-message-editor { order: 1; display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 12px 16px; border: 1px solid var(--line); border-top: 0; background: var(--white); }
.inside-message-editor[hidden] { display: none; }
.inside-message-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; min-width: 0; }
.inside-message-editor .field-group { min-width: 0; margin: 0; gap: 3px; font-size: 11px; }
#inside-message-fields { flex: 1 1 100px; }
#inside-message-fields > label { flex: 1 1 120px; }
#inside-greeting-fields { flex: 0 0 70px; }
#inside-signoff-fields { flex: 0 0 100px; }
#inside-greeting-fields > label, #inside-signoff-fields > label { width: 100%; }
#inside-message-fields:has(#inside-message-preset-field:not([hidden])) { order: 1; flex-basis: 100%; }
.inside-message-editor select, .inside-message-editor input, .inside-message-editor textarea { width: 100%; }
.inside-message-editor select { max-width: 100%; height: 36px; min-height: 36px; padding: 6px 8px; font-size: 12px; }
.inside-message-editor textarea { min-height: 96px; height: 96px; resize: vertical; }
.card-scene[data-simple-inside="true"][data-occasion="custom"] .card-inside .inside-greeting,
.card-scene[data-simple-inside="true"][data-occasion="custom"] .card-inside .inside-message,
.card-scene[data-simple-inside="true"][data-occasion="custom"] .card-inside .inside-signoff { display: block; }
.card-scene[data-simple-inside="true"] .inside-signoff { white-space: pre-line; }
body:not(.recipient-card-view) .card-scene.is-complete.is-open[data-simple-inside="true"] .inside-text-editable { touch-action: none; cursor: grab; }
.card-scene.is-complete.is-open[data-simple-inside="true"][data-occasion="custom"][data-custom-menu="inside"] .custom-inside-canvas { pointer-events: none; }
.card-editor-toolbar #custom-object-font-style-group { display: flex; gap: 6px; }
.card-toolbar-pair { display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; }
.card-toolbar-section[aria-label="Arrange"] .card-toolbar-cell { grid-template-rows: 36px; }
.card-toolbar-section[aria-label="Arrange"] .card-toolbar-cell::before { display: none; }
.card-toolbar-group[data-toolbar-group="history"] { display: flex; gap: 6px; margin-left: auto; }
.card-editor-toolbar .custom-object-order-controls { display: flex; gap: 6px; }
.card-toolbar-group[hidden], .card-editor-toolbar [hidden], .custom-resize-handle[hidden], .custom-rotation-handle[hidden] { display: none !important; }
.card-editor-toolbar label { display: grid; grid-template-rows: 16px 36px; gap: 3px; min-width: 0; margin: 0; color: var(--muted); font: 500 11px/16px var(--sans); }
.card-editor-toolbar label > span { font-size: 11px; white-space: nowrap; }
.card-toolbar-cell { display: grid; grid-template-rows: 16px 36px; gap: 3px; }
.card-toolbar-cell::before { content: ""; }
.card-editor-toolbar output { display: none; }
.card-editor-toolbar select, .card-editor-toolbar button, .card-editor-toolbar input { height: 36px; min-height: 36px; max-width: 180px; margin: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; background: #fffefa; color: var(--ink); font: 500 12px var(--sans); }
.card-editor-toolbar input[type="color"] { width: 42px; min-height: 36px; padding: 3px; }
.card-editor-toolbar button { cursor: pointer; }
.card-editor-toolbar button:disabled { opacity: 0.45; cursor: default; }
.card-editor-toolbar button:hover:not(:disabled) { border-color: var(--green-deep); }
.card-editor-toolbar .image-crop-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.card-editor-toolbar .image-crop-controls legend { display: none; }
.card-editor-toolbar .image-upload-status { flex-basis: 100%; font-size: 11px; }
.card-editor-toolbar .image-upload-status:empty { display: none; }
.card-editor-toolbar .custom-envelope-stamp-list { display: flex; flex-wrap: wrap; }
.card-editor-toolbar .custom-envelope-stamp-row { display: grid; grid-template-rows: 16px 36px; gap: 3px; padding: 0; border: 0; background: transparent; font-size: 11px; }
.card-editor-toolbar .custom-envelope-stamp-row button { font-size: 10px; }
@media (max-width: 960px) {
  .card-toolbar-group[data-toolbar-group="custom-selection"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}
@media (max-width: 680px) {
  .card-editor-toolbar { padding: 12px; gap: 10px; }
  .card-toolbar-group[data-toolbar-group="custom-selection"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 10px; }
  .card-toolbar-section { padding: 10px; gap: 8px; }
}
body:not(.recipient-card-view) .create-preview { order: 2; width: 100%; margin: 0 auto; }
body:not(.recipient-card-view) .preview-heading { display: none; }
body:not(.recipient-card-view) .card-scene .greeting-card,
body:not(.recipient-card-view) .card-scene .envelope { cursor: default; }
body:not(.recipient-card-view) .create-submit { order: 3; align-self: center; margin: 20px 0; border: 0; }
body:not(.recipient-card-view) .card-stage { container-type: size; height: clamp(360px, 68vw, 600px); }
body:not(.recipient-card-view) .card-scene { --envelope-start: calc((100cqh - min(520px, 100cqw - 24px)) / 2); }
@media (max-width: 680px) {
  body:not(.recipient-card-view) .card-scene { --envelope-start: calc((100cqh - min(480px, 100cqw - 12px)) / 2); }
}
.envelope-address, .envelope-seal { display: none; }
.inside-text-toolbar { display: none !important; }
body:not(.recipient-card-view) .envelope-card-front-copy, .custom-item.is-inline-editing, .inside-text-editable.is-inline-editing { cursor: text; }
.custom-item-shape { background: transparent; }
.custom-shape-visual { display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; background: var(--custom-item-color); pointer-events: none; }
.custom-shape-visual.custom-shape-heart { background: transparent; }
.custom-item-image { overflow: visible; }
.custom-resize-handle { position: absolute; z-index: 50; width: 12px; height: 12px; border: 1px solid var(--green-deep); background: white; border-radius: 2px; transform: translate(-50%, -50%); touch-action: none; }
.resize-nw { left: 0; top: 0; cursor: nwse-resize; }
.resize-n { left: 50%; top: 0; cursor: ns-resize; }
.resize-ne { left: 100%; top: 0; cursor: nesw-resize; }
.resize-e { left: 100%; top: 50%; cursor: ew-resize; }
.resize-se { left: 100%; top: 100%; cursor: nwse-resize; }
.resize-s { left: 50%; top: 100%; cursor: ns-resize; }
.resize-sw { left: 0; top: 100%; cursor: nesw-resize; }
.resize-w { left: 0; top: 50%; cursor: ew-resize; }
.custom-resize-handle:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.custom-rotation-handle { position: absolute; z-index: 51; top: -28px; left: 50%; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--green-deep); border-radius: 50%; background: white; color: var(--green-deep); font: 18px/1 var(--sans); transform: translate(-50%, -50%); cursor: grab; touch-action: none; }
.custom-rotation-handle::after { position: absolute; top: 100%; left: 50%; width: 1px; height: 17px; background: var(--green-deep); content: ""; pointer-events: none; }
.custom-rotation-handle:active { cursor: grabbing; }
.custom-rotation-handle:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.custom-item.is-inline-editing { outline: 1px dashed var(--green-deep); min-width: 30px; }
.thank-you-composer { max-width: 560px; margin: 24px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }
.thank-you-feedback:empty { display: none; }
#write-thank-you { display: flex; margin: 0 auto; }
.thank-you-copy, .thank-you-feedback { color: var(--muted); font-size: 13px; line-height: 1.6; }
.thank-you-feedback.is-error { color: #9b3c2e; }
.thank-you-composer[hidden], .thank-you-composer [hidden], .thank-you-page [hidden] { display: none !important; }
.thank-you-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.thank-you-tabs button { flex: 1; min-height: 44px; padding: 8px 4px; border: 0; background: transparent; color: var(--muted); font: 600 12px var(--sans); cursor: pointer; }
.thank-you-tabs button[aria-selected="true"] { color: var(--green-deep); box-shadow: inset 0 -2px var(--green-deep); }
.thank-you-edit-stage { padding: 62px 12px 24px; }
.thank-you-paper, .thank-you-editor-envelope { position: relative; width: min(400px, calc(100% - 24px)); aspect-ratio: 3 / 2; margin: 0 auto; padding: 22px; border: 1px solid #e2ded3; background: #fffdf5; box-shadow: 0 12px 25px rgb(38 51 47 / 12%); color: var(--ink); container-type: inline-size; }
.thank-you-paper { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(14px, 4vw, 22px); text-align: center; }
.thank-you-editor-envelope { display: grid; place-items: center; width: min(440px, 100%); aspect-ratio: 8 / 5; padding: 24px; }
.thank-you-editor-back { overflow: hidden; background: #f4f0e5; }
.thank-you-editor-back::before, .thank-you-editor-back::after { position: absolute; inset: 0; background: #eee9de; clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); content: ""; }
.thank-you-editor-back::after { height: 60%; background: #fffdf5; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.thank-you-text-box { position: relative; min-width: 0; }
.thank-you-envelope-field { width: 100%; }
.thank-you-message-field { flex: 1; min-height: 0; }
.thank-you-name-field { flex: 0 0 auto; width: 80%; align-self: center; }
.thank-you-text-box textarea, .thank-you-text-box input { display: block; width: 100%; min-width: 0; margin: 0; padding: 6px; border: 1px dashed transparent; border-radius: 0; background: transparent; color: var(--ink); font: 400 clamp(14px, 4.8cqw, 19px)/1.5 var(--serif); }
.thank-you-text-box textarea { height: 100%; min-height: 72px; resize: none; }
.thank-you-envelope-field textarea { text-align: center; font-size: clamp(18px, 6cqw, 25px); }
.thank-you-name-field input { text-align: center; font-size: clamp(17px, 5.5cqw, 22px); }
.thank-you-text-box textarea:hover, .thank-you-text-box input:hover { border-color: #d8d3c7; }
.thank-you-text-box textarea:focus-visible, .thank-you-text-box input:focus-visible { outline: 1px dashed var(--green-deep); }
.thank-you-text-toolbar { position: absolute; z-index: 10; bottom: calc(100% + 5px); left: 50%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; width: max-content; max-width: calc(100vw - 70px); padding: 5px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 4px 14px rgb(38 51 47 / 12%); transform: translateX(-50%); }
.thank-you-text-toolbar select { min-width: 0; min-height: 34px; max-width: 106px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 500 11px var(--sans); }
.thank-you-text-toolbar input[type="color"] { width: 36px; height: 34px; padding: 2px; border: 1px solid var(--line); background: var(--white); }
.thank-you-form-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.thank-you-form-actions .button, #write-thank-you { min-height: 44px; padding: 10px 20px; border: 1px solid var(--ink); border-radius: 4px; font: 600 12px/1.4 var(--sans); cursor: pointer; }
.thank-you-form-actions .button-light { background: transparent; color: var(--ink); border-color: var(--line); }
.thank-you-form-actions .button-light:hover { background: var(--white); border-color: var(--green-deep); }
.thank-you-form-actions .button:focus-visible, #write-thank-you:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
.thank-you-form-actions .button:disabled { opacity: 0.6; cursor: wait; transform: none; }
.thank-you-preview { margin-top: 12px; }
.thank-you-page { width: min(680px, calc(100% - 36px)); margin: 0 auto; padding: 36px 0 60px; }
.thank-you-page h1 { margin: 0; font: 400 clamp(26px, 5vw, 36px)/1.2 var(--serif); }
.thank-you-scene { position: relative; width: min(480px, 100%); height: clamp(350px, calc(100vw + 80px), 510px); margin: 0 auto; overflow: hidden; container-type: inline-size; perspective: 900px; }
.thank-you-envelope { position: absolute; top: calc(min(440px, 100cqw - 24px) * 0.375 + 24px); right: 0; left: 0; width: min(440px, calc(100% - 24px)); aspect-ratio: 8 / 5; margin: 0 auto; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.thank-you-envelope-front, .thank-you-envelope-back { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid #e2ded3; background: #fffdf5; box-shadow: 0 12px 25px rgb(38 51 47 / 12%); backface-visibility: hidden; transition: transform 500ms ease; }
.thank-you-envelope-front { z-index: 5; padding: 24px; transition: transform 900ms cubic-bezier(0.25, 0.8, 0.2, 1); }
.thank-you-envelope-copy { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 clamp(18px, 5cqw, 25px)/1.4 var(--serif); }
.thank-you-envelope-back { z-index: 1; }
.thank-you-envelope-back, .thank-you-pocket, .thank-you-flap { visibility: hidden; }
.thank-you-pocket { position: absolute; z-index: 3; inset: 0; background: #eee9de; clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%); }
.thank-you-flap { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 60%; background: #fffdf5; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.thank-you-scene.is-back .thank-you-envelope-front { transform: rotateY(-180deg) rotateZ(8deg) scale(0.94); }
.thank-you-scene.is-back .thank-you-envelope-back, .thank-you-scene.is-back .thank-you-pocket, .thank-you-scene.is-back .thank-you-flap { visibility: visible; }
.thank-you-scene.is-flipping .thank-you-envelope-back, .thank-you-scene.is-flipping .thank-you-pocket, .thank-you-scene.is-flipping .thank-you-flap { animation: envelope-back-reveal 420ms 450ms cubic-bezier(0.2, 0.7, 0.15, 1) both; }
.thank-you-scene.is-opening .thank-you-flap { animation: envelope-open 750ms 120ms cubic-bezier(0.2, 0.7, 0.15, 1) forwards; }
.thank-you-scene.is-closing .thank-you-flap { animation: envelope-open 750ms cubic-bezier(0.2, 0.7, 0.15, 1) reverse both; }
.thank-you-scene.is-turning-front .thank-you-envelope-back, .thank-you-scene.is-turning-front .thank-you-pocket, .thank-you-scene.is-turning-front .thank-you-flap { visibility: visible; animation: envelope-back-reveal 420ms cubic-bezier(0.2, 0.7, 0.15, 1) reverse both; }
.thank-you-scene.is-unsealed .thank-you-flap { z-index: 1; transform: translateY(-100%); clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.thank-you-scene.is-opening .thank-you-envelope, .thank-you-scene.is-unsealed .thank-you-envelope { pointer-events: none; }
.thank-you-received { position: absolute; z-index: 2; top: calc(min(440px, 100cqw - 24px) * 0.375 + 24px - var(--note-pull, 0px)); left: 50%; width: min(400px, calc(100% - 48px)); margin: 0; transform: translateX(-50%); transition: top 450ms ease; cursor: grab; touch-action: none; pointer-events: none; }
.thank-you-scene.is-unsealed .thank-you-received { pointer-events: auto; }
.thank-you-scene.is-dragging .thank-you-received { transition: none; cursor: grabbing; }
.thank-you-envelope { transition: top 420ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.thank-you-scene.is-unsealed .thank-you-envelope { top: calc(min(440px, 100cqw - 24px) * 0.375 + 24px + var(--envelope-drop, 0px)); }
.thank-you-scene.is-dragging .thank-you-envelope { transition: none; }
.thank-you-scene.is-settling .thank-you-envelope { top: calc(min(440px, 100cqw - 24px) * 0.375 + 704px); transition: top 760ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.thank-you-scene.is-extracted .thank-you-envelope { top: calc(min(440px, 100cqw - 24px) * 0.375 + 704px); visibility: hidden; }
.thank-you-envelope-back, .thank-you-pocket, .thank-you-flap { transition: opacity 760ms ease; }
.thank-you-scene.is-settling .thank-you-envelope-back, .thank-you-scene.is-settling .thank-you-pocket, .thank-you-scene.is-settling .thank-you-flap,
.thank-you-scene.is-extracted .thank-you-envelope-back, .thank-you-scene.is-extracted .thank-you-pocket, .thank-you-scene.is-extracted .thank-you-flap { opacity: 0; }
.thank-you-scene.is-settling .thank-you-received, .thank-you-scene.is-extracted .thank-you-received { top: 50%; transform: translate(-50%, -50%); cursor: default; touch-action: pan-y; transition: top 760ms cubic-bezier(0.2, 0.7, 0.15, 1), transform 760ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.thank-you-scene.is-settling .thank-you-received { pointer-events: none; }
.thank-you-scene.is-returning .thank-you-envelope { visibility: visible; transition: top 760ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.thank-you-scene.is-returning .thank-you-received { pointer-events: none; transition: top 760ms cubic-bezier(0.2, 0.7, 0.15, 1), transform 760ms cubic-bezier(0.2, 0.7, 0.15, 1); }
.thank-you-message { flex: 0 1 auto; min-height: 0; margin: 0; overflow-y: auto; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 clamp(14px, 4.8cqw, 19px)/1.5 var(--serif); }
.thank-you-name { flex: 0 0 auto; margin: 0; max-height: 3em; overflow-y: auto; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 clamp(17px, 5.5cqw, 22px)/1.3 var(--serif); }
.thank-you-scene:not(.is-extracted) .thank-you-received .thank-you-message,
.thank-you-scene:not(.is-extracted) .thank-you-received .thank-you-name { overflow-y: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.thank-you-scene:not(.is-extracted) .thank-you-received { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.thank-you-viewer-controls { display: grid; justify-items: center; gap: 12px; text-align: center; }
.card-download-controls { display: grid; justify-items: center; gap: 8px; margin: 16px 0; }
.card-download-controls p { margin: 0; font-size: 13px; }
.card-download-controls .is-error { color: #9b3c2e; }
.thank-you-instruction { margin: 0; color: var(--muted); font-size: 12px; }
.thank-you-instruction:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .thank-you-scene.is-opening .thank-you-flap, .thank-you-scene.is-closing .thank-you-flap { animation: none; }
  .thank-you-scene.is-flipping .thank-you-envelope-back, .thank-you-scene.is-flipping .thank-you-pocket, .thank-you-scene.is-flipping .thank-you-flap,
  .thank-you-scene.is-turning-front .thank-you-envelope-back, .thank-you-scene.is-turning-front .thank-you-pocket, .thank-you-scene.is-turning-front .thank-you-flap { animation: none; }
  .thank-you-envelope-front, .thank-you-envelope-back, .thank-you-pocket, .thank-you-flap, .thank-you-received,
  .thank-you-envelope, .thank-you-scene.is-settling .thank-you-envelope, .thank-you-scene.is-settling .thank-you-received,
  .thank-you-scene.is-extracted .thank-you-envelope, .thank-you-scene.is-extracted .thank-you-received,
  .thank-you-scene.is-returning .thank-you-envelope, .thank-you-scene.is-returning .thank-you-received { transition: none; }
}

.delivery-page { width: min(1120px, calc(100% - 80px)); margin: 0 auto; padding: 35px 0 74px; }
.delivery-layout[hidden], .payment-success[hidden] { display: none; }
.payment-success { display: grid; max-width: 760px; justify-items: center; gap: 12px; margin: 30px auto 42px; padding: 36px 28px; border: 1px solid var(--line); background: #edf1ec; text-align: center; }
.payment-success-mark { display: grid; width: 52px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--green-deep); color: var(--white); font-size: 26px; }
.payment-success .eyebrow { margin: 4px 0 0; }
.payment-success h2 { margin: 0; font-size: 34px; line-height: 1.2; }
.payment-success > p:not(.eyebrow) { max-width: 540px; margin: 0; color: var(--muted); font-size: 14px; }
.payment-success .button { margin-top: 8px; }
.payment-success .button[hidden] { display: none; }

.policy-page { width: min(880px, calc(100% - 80px)); margin: 0 auto; padding: 36px 0 80px; }
.policy-back { margin-bottom: 24px; }
.policy-heading { padding: 22px 0 30px; border-bottom: 1px solid var(--line); }
.policy-heading .eyebrow { margin-bottom: 8px; }
.policy-heading h1 { margin: 0 0 9px; font-size: 48px; line-height: 1.12; }
.policy-heading > p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.policy-content { max-width: 740px; padding-top: 24px; }
.policy-content > p, .policy-content li { color: #53605a; font-size: 14px; line-height: 1.8; }
.policy-content ul { display: grid; gap: 8px; padding-left: 22px; }
.policy-content section { padding: 24px 0 10px; border-bottom: 1px solid var(--line); }
.policy-content h2 { margin: 0 0 10px; font-size: 25px; line-height: 1.25; }
.policy-content section p:last-child, .policy-content section ul:last-child { margin-bottom: 8px; }
.policy-content a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 2px; }
.policy-note { padding-top: 22px; font-size: 12px !important; }
.delivery-back { margin-bottom: 22px; }
.delivery-intro { margin-bottom: 32px; }
.delivery-intro .eyebrow { margin-bottom: 8px; }
.delivery-intro h1 { margin: 0 0 9px; font-size: 42px; line-height: 1.15; }
.delivery-intro > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.delivery-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 64px; align-items: start; }
.delivery-form { display: grid; gap: 30px; }
.delivery-section { display: grid; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.delivery-section .eyebrow { margin-bottom: -9px; }
.delivery-section h2 { margin: 0; font-size: 27px; line-height: 1.2; }
.optional-label { margin-left: 5px; color: var(--muted); font-size: 11px; font-weight: 400; }
.payment-copy { max-width: 560px; margin: -4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.payment-button { width: max-content; border: 0; opacity: 0.5; font-family: var(--sans); cursor: not-allowed; }
.test-email-button { width: max-content; border: 0; font-family: var(--sans); cursor: pointer; }
.delivery-status { min-height: 22px; margin: -7px 0 0; color: var(--green-deep); font-size: 12px; }
.order-summary { padding: 22px; border: 1px solid var(--line); background: #f1f3ee; }
.summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #dce1db; }
.summary-heading h2 { margin: 0; font-family: var(--serif); font-size: 23px; font-weight: 400; }
.summary-list { display: grid; gap: 11px; margin: 18px 0; }
.summary-list > div, .summary-payment { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-size: 12px; }
.summary-list > #summary-recipient-row[hidden] { display: none; }
.summary-list dt, .summary-payment span { color: var(--muted); }
.summary-list dd { margin: 0; text-align: right; }
.summary-message { margin: 0; padding: 12px 0 12px 13px; border-left: 2px solid var(--coral); color: #56615c; font-family: var(--serif); font-size: 16px; line-height: 1.5; }
.summary-payment { padding-top: 16px; margin-top: 17px; border-top: 1px solid #dce1db; }
.summary-payment strong { color: #8b6557; font-size: 11px; }

@media (max-width: 760px) {
  .delivery-page { width: calc(100% - 36px); padding-top: 28px; }
  .delivery-intro h1 { font-size: 36px; }
  .payment-success { margin: 20px auto 32px; padding: 28px 20px; }
  .payment-success h2 { font-size: 29px; }
  .delivery-layout { grid-template-columns: 1fr; gap: 34px; }
  .order-summary { order: -1; }
  .test-email-button, .payment-button { width: 100%; }
}

@media (max-width: 620px) {
  .policy-page { width: calc(100% - 36px); padding-top: 28px; }
  .card-scene[data-occasion="birthday"] .card-cover[data-art="sunrise"] .cover-title { font-size: 25px; }
  .card-scene[data-occasion="birthday"] .card-cover[data-art="sunrise"] .cover-kicker { font-size: 9px; }
  .policy-heading h1 { font-size: 40px; }
  .policy-content h2 { font-size: 23px; }
}

@media (max-width: 620px) {
  .design-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-swatch { height: 60px; }
}

.account-page { width: min(960px, calc(100% - 80px)); margin: 0 auto; padding: 52px 0 88px; }
.account-intro { max-width: 690px; margin-bottom: 35px; }
.account-intro h1 { margin: 0 0 12px; font-size: 48px; line-height: 1.12; }
.account-intro > p:last-child { margin: 0; color: var(--muted); }
.account-status { min-height: 25px; margin: 0 0 12px; color: var(--green-deep); font-size: 13px; }
.account-status.is-error { color: #a0443f; }
.account-auth { width: min(460px, 100%); padding: 26px 0 35px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.account-auth[hidden], .account-dashboard[hidden] { display: none; }
.account-provider-grid[hidden], .account-form[hidden] { display: none; }
.account-auth h2, .account-dashboard-heading h2 { margin: 0 0 18px; font-size: 30px; line-height: 1.2; }
.account-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.account-mode[hidden] { display: none; }
.account-mode-button { min-height: 44px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; }
.account-mode-button:hover { color: var(--ink); }
.account-mode-button.is-selected { border-bottom-color: var(--green-deep); color: var(--ink); }
.account-mode-button:focus-visible, .account-provider-button:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.account-provider-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.account-provider-button { min-height: 44px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; transition: border-color 180ms ease, transform 160ms ease; }
.account-provider-button:hover { border-color: var(--green-deep); transform: translateY(-1px); }
.account-divider { position: relative; margin: 8px 0 18px; text-align: center; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.account-divider::before { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: var(--line); }
.account-divider span { position: relative; display: inline-block; padding: 0 12px; background: var(--paper); }
.account-form-note { margin: -4px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-two-factor-form { margin-top: 24px; }
.account-form { display: grid; gap: 16px; }
.account-auth-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.account-submit { justify-self: start; min-width: 150px; border: 0; cursor: pointer; }
.account-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.account-dashboard-heading .eyebrow { margin-bottom: 7px; }
.account-dashboard-heading h2 { margin-bottom: 5px; }
.account-email { margin: 0; color: var(--muted); font-size: 13px; }
.account-logout { border: 1px solid var(--line); cursor: pointer; }
.account-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.account-section { min-width: 0; padding: 28px 0; border-bottom: 1px solid var(--line); }
.account-section h3 { margin: 0 0 18px; font-family: var(--serif); font-size: 25px; font-weight: 400; }
.account-password-provider-status { margin: 0; color: var(--muted); font-size: 13px; }
.account-danger-section { border-top: 1px solid var(--line); margin-top: 24px; }
.account-danger-section .account-section-heading { align-items: flex-end; margin-bottom: 0; }
.account-danger-section h3 { margin-bottom: 6px; }
.account-danger-copy { margin: 0; color: var(--muted); font-size: 13px; }
.account-delete-button { flex: 0 0 auto; min-height: 42px; padding: 0 14px; border: 1px solid #a0443f; background: transparent; color: #a0443f; font: 600 12px var(--sans); cursor: pointer; }
.account-delete-button:hover { background: #a0443f; color: var(--white); }
.account-delete-confirm { background: #a0443f; }
.account-delete-confirm:disabled { opacity: 0.45; cursor: not-allowed; }
.account-section .field-group input:disabled { background: #f1f3ee; color: var(--muted); }
.account-wide-section { padding-top: 35px; }
.account-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.account-section-heading .eyebrow { margin-bottom: 5px; }
.account-section-heading h3 { margin: 0; }
.account-section-heading .text-link { flex: 0 0 auto; }
.account-two-factor-panel { display: grid; gap: 18px; padding: 16px 0 0; }
.account-two-factor-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); background: var(--green); }
.account-two-factor-meta strong { font-size: 14px; }
.account-two-factor-meta span { color: var(--muted); font-size: 12px; }
.account-two-factor-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.account-otp-box { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; border: 1px solid var(--line); background: var(--white); }
.account-qr-wrap { display: grid; place-items: center; min-width: 180px; min-height: 180px; border: 1px solid var(--line); background: #fff; }
.account-qr-wrap img { width: 180px; height: 180px; }
.account-otp-details { display: grid; gap: 12px; }
.account-otp-details p { margin: 0; color: var(--muted); font-size: 13px; }
.account-otp-details code { display: inline-block; padding: 8px 10px; background: #f3f5f2; color: var(--ink); font-size: 12px; word-break: break-all; }
.account-two-factor-verify { margin-top: 14px; }
.account-contact-form { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; align-items: end; gap: 13px; }
.account-contact-form > .button { min-height: 46px; border: 0; white-space: nowrap; cursor: pointer; }
.account-contact-list, .account-order-list { margin: 22px 0 0; padding: 0; list-style: none; }
.account-empty-row { margin: 0; padding: 16px 0; color: var(--muted); font-size: 13px; }
.account-contact-row, .account-order-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); }
.account-contact-row > div, .account-order-row > div { display: grid; min-width: 0; gap: 2px; }
.account-contact-row strong, .account-order-row strong { font-size: 13px; font-weight: 600; }
.account-contact-row span, .account-order-row > div > span { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; }
.account-remove-button { flex: 0 0 auto; padding: 7px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 12px var(--sans); cursor: pointer; }
.account-order-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.account-order-status { color: var(--green-deep); font-size: 11px; text-transform: capitalize; }
.account-preview-link { color: var(--green-deep); font-size: 12px; font-weight: 600; }
.account-preview-link:hover, .account-remove-button:hover { color: var(--coral); }
.account-tabs { display: flex; gap: 24px; margin: 28px 0 0; border-bottom: 1px solid var(--line); }
.account-tab { min-height: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; }
.account-tab.is-selected { border-bottom-color: var(--green-deep); color: var(--ink); }
.account-tab:focus-visible, .account-calendar-nav:focus-visible, .account-calendar-day:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.account-calendar-panel[hidden], #account-panel[hidden] { display: none; }
.account-calendar-panel { padding: 28px 0; }
.account-calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.account-calendar-heading .eyebrow { margin: 0 0 5px; }
.account-calendar-heading h3 { margin: 0; font-family: var(--serif); font-size: 25px; font-weight: 400; }
.account-calendar-create { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.account-calendar-create.is-disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
.calendar-occasion-picker { position: relative; z-index: 4; }
.calendar-occasion-picker > summary { list-style: none; cursor: pointer; }
.calendar-occasion-picker > summary::-webkit-details-marker { display: none; }
.calendar-occasion-picker > summary::marker { content: ""; }
.calendar-menu-chevron { transition: transform 140ms ease; }
.calendar-occasion-picker[open] .calendar-menu-chevron { transform: rotate(180deg); }
.calendar-occasion-menu { position: absolute; top: calc(100% + 6px); right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: min(340px, calc(100vw - 36px)); padding: 6px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 12px 28px rgb(38 51 47 / 16%); }
.calendar-occasion-picker:not([open]) .calendar-occasion-menu { display: none; }
.calendar-occasion-menu::before { position: absolute; right: 0; bottom: 100%; left: 0; height: 6px; content: ""; }
.calendar-occasion-link { display: flex; min-height: 40px; align-items: center; padding: 7px 9px; color: var(--ink); font-size: 12px; line-height: 1.3; }
.calendar-occasion-link:hover, .calendar-occasion-link:focus-visible { background: var(--green); color: var(--ink); outline: 2px solid var(--green-deep); outline-offset: -2px; }
.account-calendar-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); gap: 34px; }
.account-calendar-month { min-width: 0; }
.account-calendar-controls { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; margin-bottom: 16px; }
.account-calendar-controls h4 { margin: 0; text-align: center; font-family: var(--serif); font-size: 20px; font-weight: 400; }
.account-calendar-nav { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 500 20px var(--sans); cursor: pointer; }
.account-calendar-weekdays, .account-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.account-calendar-weekdays { margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; }
.account-calendar-weekdays span { padding: 7px 0; }
.account-calendar-day, .account-calendar-blank { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border: 1px solid transparent; background: transparent; color: var(--ink); font: 500 13px var(--sans); }
.account-calendar-day { cursor: pointer; }
.account-calendar-day:hover { border-color: var(--line); }
.account-calendar-day.is-selected { border-color: var(--green-deep); background: var(--green); }
.account-calendar-day.has-events { font-weight: 700; }
.account-calendar-marker { position: absolute; right: 4px; bottom: 3px; min-width: 15px; color: var(--green-deep); font-size: 9px; line-height: 1; text-align: center; }
.account-calendar-agenda { min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.account-calendar-agenda h4 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.account-calendar-events { margin: 10px 0 0; padding: 0; list-style: none; }
.account-calendar-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.account-calendar-event > div { display: grid; min-width: 0; gap: 3px; }
.account-calendar-event strong { font-size: 13px; font-weight: 600; }
.account-calendar-event > div > span { color: var(--muted); font-size: 12px; }
.account-calendar-event .account-preview-link { grid-column: 1 / -1; }
.account-calendar-event > .account-calendar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.account-scheduled-action { padding: 4px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--green-deep); font: 600 12px var(--sans); cursor: pointer; }
.account-scheduled-action:hover { color: var(--coral); }
.account-scheduled-action.is-destructive { color: #a0443f; }
.account-subscription-section { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.account-subscription-section .eyebrow { margin: 0 0 5px; }
.account-subscription-section h3 { margin: 0 0 5px; font-family: var(--serif); font-size: 20px; font-weight: 400; }
.account-subscription-section p:not(.eyebrow) { max-width: 560px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.account-subscription-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.account-subscription-actions > span { color: var(--green-deep); font-size: 12px; font-weight: 600; white-space: nowrap; }
.account-subscription-actions .button { min-height: 42px; border: 0; cursor: pointer; }
.delivery-scheduling-note { margin: -6px 0 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.delivery-scheduling-note[hidden] { display: none; }
@media (max-width: 620px) {
  .account-page { width: calc(100% - 36px); padding: 36px 0 58px; }
  .account-intro h1 { font-size: 39px; }
  .account-settings-grid { grid-template-columns: 1fr; gap: 0; }
  .account-dashboard-heading { align-items: flex-start; }
  .account-logout { min-height: 42px; padding: 0 12px; }
  .account-two-factor-meta { flex-direction: column; align-items: flex-start; }
  .account-otp-box { grid-template-columns: 1fr; }
  .account-contact-form { grid-template-columns: 1fr; }
  .account-contact-form > .button { width: 100%; }
  .account-order-row { grid-template-columns: minmax(0, 1fr) auto; }
  .account-order-status { grid-column: 2; grid-row: 1; }
  .account-preview-link { grid-column: 1 / -1; }
  .account-calendar-layout { grid-template-columns: 1fr; gap: 24px; }
  .account-calendar-heading { align-items: flex-end; }
  .account-calendar-create { min-height: 42px; padding: 0 12px; white-space: nowrap; }
  .calendar-occasion-menu { grid-template-columns: 1fr; width: min(260px, calc(100vw - 36px)); }
  .account-calendar-day, .account-calendar-blank { min-height: 42px; aspect-ratio: auto; }
  .account-subscription-section { align-items: flex-start; flex-direction: column; }
  .account-subscription-actions { justify-content: flex-start; }
}
@media (max-width: 380px) {
  .site-header { height: auto; min-height: 72px; flex-wrap: wrap; row-gap: 4px; padding: 10px 0; }
  .main-nav { height: auto; flex: 1 0 100%; justify-content: space-between; gap: 6px; }
  .nav-link { font-size: 11px; }
}