:root{--plum:#392d41;--pink:#eedce7}.builder{max-width:1240px;margin:auto;padding:48px 24px 80px}.builder h1,.recipient-page h1{font-size:clamp(2rem,5vw,3.7rem);line-height:1.05;margin:8px 0 20px}.builder-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:start}.composer fieldset{border:1px solid #dfd4d8;border-radius:20px;padding:24px;margin:0 0 24px;background:#fffaf6}.composer legend{font-size:1.15rem;font-weight:700;padding:0 10px}.composer label{display:block;font-weight:650;margin-bottom:18px}.composer input,.composer textarea,.composer select{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid #b8aab0;border-radius:10px;background:white;color:#29212d;font:inherit;box-sizing:border-box}.composer textarea{resize:vertical}.hint{font-size:.88rem;font-weight:400;line-height:1.6;color:#685c68}.preview-pane{position:sticky;top:24px;text-align:center}.card-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;background:#efe7ed;padding:20px;box-shadow:0 15px 50px #392d4120;min-height:400px}.card-stage[hidden],.preview-controls[hidden]{display:none}.greeting{position:relative;background:#fffdf8;padding:14px;border-radius:12px;opacity:0;transform:translateY(30px) scale(.93);transition:opacity .8s,transform .8s;visibility:hidden}.greeting-image{display:block;width:100%;max-height:580px;object-fit:contain;border-radius:7px}.recipient-line,.sender-line{font-size:1.12rem;font-weight:650;margin:12px 4px}.greeting-message{white-space:pre-wrap;overflow-wrap:anywhere;font-size:1.1rem;line-height:1.7;margin:20px 8px}.recipient-line:empty,.sender-line:empty,.greeting-message:empty{display:none}.envelope{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;color:var(--plum);background:linear-gradient(150deg,#edc8d9,#f9e8d7);overflow:hidden;transition:transform .85s,opacity .6s}.envelope:before,.envelope:after{content:"";position:absolute;width:80%;height:100%;background:#e9c8d6;bottom:-48%;transform:rotate(35deg);left:-20%;box-shadow:0 -2px 3px #392d4110}.envelope:after{left:auto;right:-20%;transform:rotate(-35deg);background:#f3d8df}.envelope-flap{position:absolute;left:0;right:0;top:0;height:52%;background:#f9e5e8;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .6s}.envelope-label{position:relative;z-index:2;display:block;font-family:Georgia,serif;font-size:clamp(1.6rem,3vw,2.2rem);padding:20px}.envelope-label span{display:block;font:600 .95rem system-ui;margin-top:20px}.opened .envelope{transform:translateY(110%);opacity:0;pointer-events:none}.opened .envelope-flap{transform:rotateX(180deg)}.opened .greeting{opacity:1;transform:none;visibility:visible}.particles{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}.particle{position:absolute;top:-40px;left:var(--x);font-size:var(--size);opacity:0}.opened.seasonal .particle{animation:drift var(--duration) linear var(--delay) infinite}.paused .particle{animation-play-state:paused!important}.preview-controls,.share-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0}.preview-controls button,.share-actions button{cursor:pointer;font:inherit}.delivery-note{padding:16px;background:#f3eaf0;border-radius:10px;font-size:.9rem;line-height:1.6}.recipient-page{max-width:640px;margin:40px auto 80px;padding:0 20px;text-align:center}.return-link{margin-top:25px}#shareStatus{overflow-wrap:anywhere;line-height:1.6}.card-link-output{width:100%;min-height:100px;font:inherit}.no-animation .envelope{display:none}.no-animation .greeting{transition:none}.no-animation .particle{display:none}@keyframes drift{0%{transform:translateY(-20px) rotate(0);opacity:0}10%{opacity:.65}90%{opacity:.65}100%{transform:translateY(900px) rotate(160deg);opacity:0}}@media(max-width:800px){.builder-layout{grid-template-columns:1fr;gap:20px}.preview-pane{position:static}.composer fieldset{padding:18px}.builder{padding:30px 16px}.card-stage{padding:12px}.site-header{flex-wrap:wrap;gap:14px}}@media(prefers-reduced-motion:reduce){.greeting,.envelope,.envelope-flap{transition:none!important}.particle{animation:none!important;display:none}}

/* Builder polish: tactile paper, hand-marked details, and visual choices. */
.builder-page {
  background:
    linear-gradient(rgb(255 250 243 / 92%), rgb(255 250 243 / 96%)),
    repeating-linear-gradient(7deg, #8d67490a 0 1px, transparent 1px 8px),
    #fffaf3;
}

.builder {
  max-width: 1280px;
  padding-top: 34px;
}

.builder-heading {
  max-width: 760px;
  margin-bottom: 30px;
}

.builder-heading h1 {
  margin: 4px 0 12px;
  font-family: Georgia, "Times New Roman", serif;
}

.builder-heading > p:last-child {
  max-width: 630px;
  color: #664f43;
  font-size: 1.08rem;
  line-height: 1.6;
}

.builder-layout {
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: clamp(28px, 5vw, 66px);
}

.composer fieldset {
  position: relative;
  margin-bottom: 26px;
  padding: 26px;
  border-color: #d9c9be;
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 5%, #b86d4510 0 1px, transparent 1.5px),
    repeating-linear-gradient(3deg, #6e4a3505 0 1px, transparent 1px 9px),
    #fffdf9;
  box-shadow: 5px 7px 0 #eadfd5;
}

.composer legend {
  color: #38251e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
}

.composer legend span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  margin-right: 7px;
  place-items: center;
  border-radius: 50%;
  background: #a62624;
  color: white;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
}

.field-row {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 14px;
}

.composer input,
.composer textarea,
.composer select {
  border-color: #bda99d;
  border-radius: 6px;
  background: #fff;
}

.composer input:focus,
.composer textarea:focus,
.composer select:focus {
  outline: 3px solid #d7985c4d;
  border-color: #934f32;
}

.theme-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 10px;
  font-weight: 750;
}

.theme-heading small {
  color: #846d61;
  font-weight: 600;
}

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

.design-choice {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 92px;
  padding: 7px;
  align-items: center;
  gap: 10px;
  border: 1px solid #d6c6bb;
  border-radius: 7px;
  background: #fff;
  color: #38251e;
  cursor: pointer;
  text-align: left;
}

.design-choice:hover,
.design-choice.is-selected {
  border-color: #1f6b45;
  box-shadow: inset 0 0 0 2px #1f6b45;
}

.design-choice.is-selected::after {
  position: absolute;
  content: "";
}

.design-choice img {
  width: 72px;
  height: 76px;
  border-radius: 4px;
  object-fit: cover;
  background: #201a26;
}

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

.design-choice strong {
  line-height: 1.2;
}

.design-choice small {
  margin-top: 5px;
  color: #8a6f60;
}

.preview-pane {
  top: 94px;
}

.preview-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hand-note {
  color: #9b503e;
  font-family: "Bradley Hand", "Segoe Print", cursive;
  font-size: 1.05rem;
  transform: rotate(-2deg);
}

.card-stage {
  min-height: 610px;
  padding: 18px;
  border: 1px solid #d7cad2;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #eee3ec 0 49%, #e8dce6 49% 51%, #f2e9ef 51%),
    #efe7ed;
  box-shadow: 9px 12px 0 #ded2db, 0 24px 60px #392d4122;
}

.greeting {
  min-height: 570px;
  border-radius: 6px;
  background: #fffdf8;
}

.greeting-image {
  max-height: 470px;
}

.envelope {
  border-radius: 6px;
  background: linear-gradient(150deg, #d7a7ba, #f5ddcf);
}

.envelope-label {
  font-family: Georgia, "Times New Roman", serif;
}

.envelope-stamp {
  position: absolute;
  top: 28px;
  right: 30px;
  z-index: 3;
  display: grid;
  width: 48px;
  height: 58px;
  place-items: center;
  border: 4px double #a85d5b;
  color: #8e3739;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  transform: rotate(4deg);
}

.email-details {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed #cbb9ac;
}

.email-details summary {
  cursor: pointer;
  font-weight: 750;
}

.email-details label {
  margin-top: 14px;
}

.delivery-note {
  border-radius: 6px;
  background: #f1e8ed;
}

#shareStatus:not(:empty) {
  padding: 12px;
  border-left: 4px solid #1f6b45;
  background: #edf6ef;
}

@media (max-width: 920px) {
  .builder-layout { grid-template-columns: 1fr; }
  .preview-pane { position: static; }
  .card-stage { min-height: 500px; }
  .greeting { min-height: 460px; }
  .greeting-image { max-height: 360px; }
}

@media (max-width: 560px) {
  .field-row,
  .design-choices { grid-template-columns: 1fr; }
  .composer fieldset { padding: 18px 14px; box-shadow: 3px 5px 0 #eadfd5; }
  .design-choice { grid-template-columns: 62px 1fr; }
  .design-choice img { width: 62px; height: 68px; }
  .preview-caption { align-items: center; }
  .card-stage { min-height: 470px; padding: 10px; }
}