@font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/greatvibes.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/playfair-normal.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 800;font-display:swap;src:url('/assets/fonts/playfair-italic.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/garamond-normal.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/garamond-italic.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/jost-normal.woff2') format('woff2');}

/* ================= theme tokens ================= */
[data-theme="red-love"]{
  --night-top:#1a060b; --night-mid:#3a0f1c; --night-bot:#5c1626;
  --paper:#fbf1e2; --paper-edge:#e7d3b4; --paper-shadow:rgba(20,4,8,.55);
  --ink:#3a1420; --ink-soft:#7a4152;
  --accent:#a3142e; --accent-bright:#d92d4c; --accent-deep:#5c0f1e;
  --gold:#c9973f; --blush:#f4c9d1; --focus:#ffd9a0;
  --stem:#7c8f5e; --stem-dark:#89a06a;
}
[data-theme="sunset"]{
  --night-top:#2c1b3a; --night-mid:#7a3f4c; --night-bot:#d97a4a;
  --paper:#fff6ea; --paper-edge:#f0dcb8; --paper-shadow:rgba(60,25,10,.45);
  --ink:#4a2a1a; --ink-soft:#8a5a3a;
  --accent:#d9622f; --accent-bright:#f4954f; --accent-deep:#a83f1e;
  --gold:#e0b04a; --blush:#f7c9a0; --focus:#ffe2a6;
  --stem:#8a9a5e; --stem-dark:#9aab6a;
}
[data-theme="starry"]{
  --night-top:#05060f; --night-mid:#0d1b3d; --night-bot:#1b2a52;
  --paper:#f5f3fb; --paper-edge:#dcd6ee; --paper-shadow:rgba(4,6,20,.55);
  --ink:#1e1832; --ink-soft:#544a72;
  --accent:#5b4b8a; --accent-bright:#8067c9; --accent-deep:#332a5c;
  --gold:#e8d27a; --blush:#c9c2e8; --focus:#f0d98a;
  --stem:#6a7a5e; --stem-dark:#7a8c6a;
}
[data-theme="secret-garden"]{
  --night-top:#040d08; --night-mid:#123320; --night-bot:#1f4d33;
  --paper:#f7f0e4; --paper-edge:#e3d6b8; --paper-shadow:rgba(6,20,12,.5);
  --ink:#1f3324; --ink-soft:#4d6b52;
  --accent:#c9587a; --accent-bright:#e58aa0; --accent-deep:#7a2f45;
  --gold:#cdae5a; --blush:#f0c9d6; --focus:#ffe2a6;
  --stem:#6a8a5e; --stem-dark:#7a9a6a;
}
[data-theme="golden-glow"]{
  --night-top:#0d0508; --night-mid:#2b0f18; --night-bot:#4a1626;
  --paper:#fbeee0; --paper-edge:#e8d2b0; --paper-shadow:rgba(10,2,5,.6);
  --ink:#3a1420; --ink-soft:#7a4152;
  --accent:#ff2d55; --accent-bright:#ff6083; --accent-deep:#8a1030;
  --gold:#e8c15a; --blush:#f7c9d6; --focus:#ffd9a0;
  --stem:#7c8f5e; --stem-dark:#89a06a;
}
/* "custom" theme: only --custom-bg/--custom-accent/--custom-gold/--custom-paper are supplied
   inline per-letter; every other token is derived from them with color-mix() so buyers only
   ever have to pick 4 colors. */
[data-theme="custom"]{
  --night-mid:var(--custom-bg,#3a0f1c); --accent:var(--custom-accent,#a3142e);
  --gold:var(--custom-gold,#c9973f); --paper:var(--custom-paper,#fbf1e2);
  --night-top:color-mix(in srgb, var(--night-mid) 55%, #000 45%);
  --night-bot:color-mix(in srgb, var(--night-mid) 65%, var(--accent) 35%);
  --paper-edge:color-mix(in srgb, var(--paper) 85%, #000 15%);
  --paper-shadow:color-mix(in srgb, var(--night-top) 60%, transparent);
  --ink:color-mix(in srgb, var(--accent) 30%, #000 70%);
  --ink-soft:color-mix(in srgb, var(--ink) 55%, var(--paper) 45%);
  --accent-bright:color-mix(in srgb, var(--accent) 78%, #fff 22%);
  --accent-deep:color-mix(in srgb, var(--accent) 70%, #000 30%);
  --blush:color-mix(in srgb, var(--accent) 30%, var(--paper) 70%);
  --focus:var(--gold);
  --stem:#7c8f5e; --stem-dark:#89a06a;
}

/* ================= font style variants ================= */
[data-font="manuscript"] .question{ font-family:'Great Vibes',cursive; font-style:normal; font-size:clamp(1.9rem,7.5vw,2.5rem); }
[data-font="manuscript"] .plan-heading{ font-family:'Great Vibes',cursive; font-size:clamp(2.1rem,8vw,2.7rem); }
[data-font="manuscript"] .done-heading{ font-family:'Great Vibes',cursive; font-style:normal; font-size:clamp(2.1rem,7.5vw,2.7rem); }
[data-font="manuscript"] .letter-body p{ font-style:italic; line-height:1.85; }

[data-font="modern"] .salutation{ font-family:'Playfair Display',serif; font-style:italic; font-weight:600; }
[data-font="modern"] .question{ font-family:'Jost',sans-serif; font-style:normal; font-weight:600; letter-spacing:.01em; }
[data-font="modern"] .plan-heading{ font-family:'Jost',sans-serif; font-weight:700; letter-spacing:.02em; }
[data-font="modern"] .done-heading{ font-family:'Jost',sans-serif; font-style:normal; font-weight:700; }
[data-font="modern"] .signature{ font-family:'Jost',sans-serif; font-style:normal; font-weight:600; }
[data-font="modern"] .letter-body p{ font-family:'Jost',sans-serif; line-height:1.75; }

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, var(--night-mid), transparent 60%),
    linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 45%, var(--night-bot) 100%);
  color:var(--paper);
  font-family:'EB Garamond', Georgia, serif;
  display:flex; align-items:center; justify-content:center;
  padding:6vh 1.25rem;
}
body.has-bg-photo{ background:none; }
.bg-photo{
  position:fixed; inset:0; z-index:-1;
  background-size:cover; background-position:center;
}
.bg-photo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.6) 100%);
}

h1,h2,h3{text-wrap:balance; margin:0;}
.display{font-family:'Playfair Display', Georgia, serif;}
.script{font-family:'Great Vibes', 'Segoe Script', cursive; font-weight:400; line-height:1;}
.ui-font{font-family:'Jost', 'Segoe UI', sans-serif;}

/* ================= ambient particles ================= */
#sky{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }

.particle{ position:relative; width:var(--s,16px); height:var(--s,16px); }
.particle.shape-heart::before,.particle.shape-heart::after{
  content:""; position:absolute; top:0;
  width:calc(var(--s,16px) * 0.52); height:calc(var(--s,16px) * 0.8);
  background:var(--c, var(--accent-bright));
  border-radius:calc(var(--s,16px) * 0.5) calc(var(--s,16px) * 0.5) 0 0;
}
.particle.shape-heart::before{left:calc(var(--s,16px) * 0.5); transform:rotate(-45deg); transform-origin:0 100%;}
.particle.shape-heart::after{left:0; transform:rotate(45deg); transform-origin:100% 100%;}
.particle.shape-star{
  background:var(--c, var(--gold));
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.rising{
  position:absolute; bottom:-10vh; left:var(--x,50%); opacity:0;
  animation:rise var(--dur,14s) linear var(--delay,0s) infinite;
  filter:drop-shadow(0 0 6px rgba(217,45,76,.35));
}
@keyframes rise{
  0%{ transform:translate(0,0); opacity:0; }
  8%{ opacity:var(--op,.55); }
  50%{ transform:translate(var(--drift,18px), -55vh); }
  88%{ opacity:var(--op,.55); }
  100%{ transform:translate(0, -105vh); opacity:0; }
}
.balloon{
  position:absolute; top:var(--y,20%); left:var(--x,10%);
  display:flex; flex-direction:column; align-items:center;
  animation:drift var(--dur,9s) ease-in-out var(--delay,0s) infinite alternate;
}
.balloon .string{
  width:1px; height:var(--sl,90px);
  background:linear-gradient(180deg, rgba(244,201,209,.55), rgba(244,201,209,0));
  margin-top:2px;
}
@keyframes drift{
  0%{ transform:translate(0,0) rotate(-3deg); }
  50%{ transform:translate(14px,-16px) rotate(2deg); }
  100%{ transform:translate(-10px,6px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce){
  .rising{animation-duration:40s;}
  .balloon{animation:none;}
}

/* ================= stage ================= */
#stage{ position:relative; z-index:1; width:100%; max-width:34rem; }
.panel{ display:none; animation:appear .7s ease both; }
.panel.active{ display:block; }
@keyframes appear{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

/* ================= envelope ================= */
#panel-envelope{ text-align:center; }
.to-line{ font-size:clamp(1.4rem,5vw,1.9rem); color:var(--blush); margin-bottom:1.75rem; letter-spacing:.02em; }
.envelope-wrap{ position:relative; width:min(78vw,300px); aspect-ratio:3/2; margin:0 auto 2.25rem; perspective:1200px; }
.env-back{ position:absolute; inset:0; background:linear-gradient(160deg, color-mix(in srgb, var(--paper) 88%, var(--gold)), var(--paper-edge)); border-radius:10px; box-shadow:0 22px 45px var(--paper-shadow); }
.env-letter-peek{ position:absolute; left:8%; right:8%; top:-6%; height:88%; background:var(--paper); border-radius:6px; box-shadow:0 -2px 10px rgba(0,0,0,.15); transition:transform .9s cubic-bezier(.2,.8,.2,1); transform:translateY(0); }
.env-flap{ position:absolute; left:0; right:0; top:0; height:58%; background:linear-gradient(160deg, var(--paper-edge), color-mix(in srgb, var(--paper-edge) 80%, #000)); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:top center; transition:transform .8s cubic-bezier(.3,.7,.2,1); border-radius:10px 10px 0 0; z-index:2; }
.seal{ position:absolute; left:50%; top:44%; width:56px; height:56px; transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 30%, var(--accent-bright), var(--accent) 60%, var(--accent-deep) 100%); border-radius:50%; box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 0 0 2px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; z-index:3; transition:opacity .3s ease, transform .5s ease; }
.seal .particle{ --s:24px; --c:var(--gold); }
.envelope-wrap.open .env-flap{ transform:rotateX(180deg); }
.envelope-wrap.open .seal{ opacity:0; transform:translate(-50%,-50%) scale(.4); }
.envelope-wrap.open .env-letter-peek{ transform:translateY(-46%); }

.btn{
  font-family:'Jost',sans-serif; font-size:.98rem; letter-spacing:.02em;
  border:none; cursor:pointer; border-radius:999px; padding:.85rem 1.9rem;
  background:var(--accent); color:var(--paper);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{ background:var(--accent-bright); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.32); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.btn.ghost{ background:transparent; color:var(--blush); box-shadow:none; border:1.5px solid rgba(244,201,209,.5); }
.btn.ghost:hover{ background:rgba(244,201,209,.1); color:var(--paper); }
.hint{ margin-top:.9rem; font-family:'Jost',sans-serif; font-size:.8rem; color:rgba(244,201,209,.65); }

/* ================= paper card ================= */
.card{ position:relative; background:var(--paper); color:var(--ink); border-radius:4px; padding:clamp(1.75rem,5vw,3rem); box-shadow:0 30px 60px var(--paper-shadow), 0 2px 0 rgba(255,255,255,.4) inset; }
.card::before{ content:""; position:absolute; inset:10px; border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); pointer-events:none; }
.salutation{ font-family:'Great Vibes',cursive; font-size:clamp(2.1rem,7vw,2.8rem); color:var(--accent); margin-bottom:.25rem; }
.letter-body p{ font-size:clamp(1.05rem,3.6vw,1.2rem); line-height:1.7; color:var(--ink-soft); margin:0 0 1rem; }
.question{ font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(1.4rem,5vw,1.8rem); color:var(--ink); margin:1.6rem 0 1.4rem; }
.non-tease{ font-family:'Jost',sans-serif; font-size:.85rem; font-style:italic; color:var(--ink-soft); opacity:.85; margin:-.9rem 0 1.3rem; }
.choice-row{ position:relative; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; min-height:64px; }
.btn.oui{ background:var(--accent); color:var(--paper); }
.btn.non{ background:transparent; color:var(--accent); border:1.5px solid var(--accent); box-shadow:none; position:relative; }
.btn.non:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
.non-msg{ font-family:'Jost',sans-serif; font-size:.88rem; color:var(--ink-soft); margin-top:.85rem; min-height:1.2em; }

/* ================= surprise reveal ================= */
.surprise{ text-align:center; margin-top:1.6rem; padding-top:1.4rem; border-top:1px dashed color-mix(in srgb, var(--accent) 25%, transparent); }
.surprise[hidden]{ display:none; }
.surprise-row{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(.5rem,3vw,1.25rem); flex-wrap:wrap; }
.bouquet-svg{ width:min(56%,190px); height:auto; flex-shrink:0; filter:drop-shadow(0 12px 18px var(--paper-shadow)); animation:bloom .7s cubic-bezier(.22,1.4,.36,1) both; }
.surprise-img{ width:min(48%,160px); height:auto; flex-shrink:0; border-radius:14px; background:var(--paper); box-shadow:0 10px 20px var(--paper-shadow), 0 0 0 4px var(--paper); transform:rotate(3deg); animation:bloom .7s cubic-bezier(.22,1.4,.36,1) both; animation-delay:.12s; }
.surprise-caption{ font-family:'EB Garamond',serif; font-style:italic; color:var(--ink-soft); margin:.6rem 0 0; }
@keyframes bloom{ 0%{opacity:0; transform:scale(.55) translateY(18px);} 100%{opacity:1; transform:scale(1) translateY(0);} }
.surprise-row.bounce{ animation:bounce .5s ease; }
@keyframes bounce{ 0%,100%{transform:scale(1);} 35%{transform:scale(1.06) rotate(-2deg);} 65%{transform:scale(1.03) rotate(2deg);} }
@media (prefers-reduced-motion: reduce){ .bouquet-svg,.surprise-img{animation:none;} .surprise-row.bounce{animation:none;} }

/* ================= "made with" badge ================= */
.brand-badge{
  position:fixed; left:50%; bottom:.9rem; transform:translateX(-50%); z-index:20;
  font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.02em; color:var(--paper);
  background:rgba(0,0,0,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:.4rem .9rem; border-radius:999px; text-decoration:none; white-space:nowrap;
  opacity:.55; transition:opacity .2s;
}
.brand-badge:hover{ opacity:.95; }

.burst{ position:fixed; inset:0; pointer-events:none; z-index:5; }
.burst .particle{ position:absolute; --s:14px; animation:pop .9s ease-out forwards; }
@keyframes pop{ 0%{transform:translate(0,0) scale(0); opacity:1;} 100%{transform:translate(var(--tx,0), var(--ty,-120px)) scale(1); opacity:0;} }

/* ================= plan panel ================= */
.plan-heading{ font-family:'Playfair Display',serif; font-size:clamp(1.6rem,6vw,2.1rem); color:var(--accent); margin-bottom:.6rem; }
.plan-body p{ font-size:clamp(1rem,3.4vw,1.12rem); line-height:1.65; color:var(--ink-soft); margin:0 0 1.1rem; }
.plan-body b{ color:var(--accent); }
.field-label{ display:block; font-family:'Jost',sans-serif; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin:1.4rem 0 .6rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{ font-family:'Jost',sans-serif; font-size:.95rem; padding:.6rem 1.15rem; border-radius:999px; border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); background:transparent; color:var(--ink); cursor:pointer; transition:all .15s ease; }
.chip:hover{ border-color:var(--accent); }
.chip.selected{ background:var(--accent); border-color:var(--accent); color:var(--paper); }
.chip:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.custom-time{ display:none; margin-top:.7rem; }
.custom-time.show{ display:flex; gap:.6rem; align-items:center; }
.custom-time input{ font-family:'Jost',sans-serif; font-size:.95rem; padding:.55rem .8rem; border-radius:8px; border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); background:color-mix(in srgb, var(--paper) 92%, #000 2%); color:var(--ink); }
textarea{ width:100%; font-family:'EB Garamond',serif; font-size:1.05rem; color:var(--ink); background:color-mix(in srgb, var(--paper) 92%, #000 2%); border:1.5px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius:10px; padding:.9rem 1rem; resize:vertical; min-height:5rem; }
textarea:focus-visible,.custom-time input:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; }
.confirm-row{ margin-top:1.6rem; text-align:right; }
.confirm-row .btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* ================= done panel ================= */
.done-heading{ font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(1.7rem,6vw,2.2rem); color:var(--accent); margin-bottom:1.1rem; }
.recap{ border-left:3px solid var(--gold); padding:.2rem 0 .2rem 1.1rem; margin:1.2rem 0 1.4rem; }
.recap .line{ font-size:1.08rem; line-height:1.6; color:var(--ink); }
.recap .line b{ color:var(--accent); }
.note-echo{ font-family:'EB Garamond',serif; font-style:italic; color:var(--ink-soft); line-height:1.6; margin:0 0 1.2rem; }
.signature{ font-family:'Great Vibes',cursive; font-size:clamp(1.6rem,5vw,2rem); color:var(--accent); text-align:right; }
.replay{ display:block; text-align:center; margin-top:1.6rem; font-family:'Jost',sans-serif; font-size:.82rem; color:rgba(244,201,209,.7); background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }