:root{--paper:#fffdfc;--pink:#e52b79;--dark:#5a1735;--text:#876974;--line:#eedbe2;--pale:#fcf0f4;--shadow:0 22px 65px #7e254e0b}*{box-sizing:border-box}body{margin:0;background:#fbf1f4;color:var(--dark);font-family:"Segoe UI",Arial,sans-serif;min-height:100svh;overflow-x:hidden;background-image:radial-gradient(ellipse at 50% 55%,#fff9fa 0%,transparent 65%)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a72967;outline-offset:5px}button:disabled{cursor:default;opacity:.4}.shell{max-width:1016px;margin:0 auto;padding:30px 44px 22px;min-height:100svh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center;padding:0 0 25px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--dark);font-size:21px;font-weight:750;letter-spacing:-.8px;display:flex;align-items:center;gap:8px}.brand-heart{color:var(--pink);font-size:26px;transform:rotate(-12deg)}.brand-dot{color:var(--pink);margin-left:-7px}.edition{font-size:9px;letter-spacing:2.1px;color:#a0828e}main{width:100%;max-width:680px;margin:auto; padding:38px 0 24px}.progress-caption{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:650;letter-spacing:1.8px;margin:0 2px 14px}#counter{font-size:11px;letter-spacing:1px;white-space:nowrap}#counter span{color:#b599a5;margin-left:3px}.progress-track{height:3px;background:#ecdbe2;border-radius:3px;margin-bottom:22px;overflow:hidden}#progress{height:100%;width:16.667%;background:var(--pink);transition:width .5s ease}.card{background:var(--paper);border:1px solid #f2e4e8;box-shadow:var(--shadow);border-radius:28px;min-height:500px;padding:38px 52px;position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.card:before{content:"";position:absolute;inset:9px;border:1px solid #f7eff1;border-radius:20px;pointer-events:none}.content{width:100%;position:relative;animation:appear .4s ease}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:#a66c83;margin:16px 0 19px}.eyebrow:before{content:"♥";color:var(--pink);margin-right:8px;font-size:10px}h1,h2{font-size:clamp(34px,4vw,48px);line-height:1.1;letter-spacing:-1.8px;font-weight:800;margin:0 0 20px}h1 em,h2 em{font-family:Georgia,serif;font-weight:500;color:var(--pink);font-size:1.13em}p{font-size:14px;line-height:1.7;color:var(--text);margin:0 auto 24px;max-width:430px}.intro-copy{max-width:350px}.envelope{width:82px;height:62px;position:relative;margin:0 auto 25px;transform:rotate(-9deg);background:#f9d6e2;border-radius:6px;box-shadow:0 8px 14px #c8668a13;border:1px solid #edbbcf}.envelope:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 49%,#f0b8cd 50%,transparent 52%),linear-gradient(215deg,transparent 49%,#f0b8cd 50%,transparent 52%);clip-path:polygon(0 0,100% 0,100% 80%,0 80%)}.envelope:after{content:"♥";display:grid;place-items:center;position:absolute;left:29px;top:17px;font-size:20px;color:#dd397b;transform:rotate(9deg)}.envelope .spark{position:absolute;top:-15px;right:-19px;color:#dd397b;font-size:24px}.actions{display:flex;justify-content:center;align-items:center;gap:13px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;justify-content:center;align-items:center;gap:15px;min-height:48px;border:1px solid transparent;border-radius:999px;padding:13px 26px;font-size:13px;font-weight:650;transition:transform .18s,background .18s,box-shadow .18s;text-decoration:none}.primary{background:var(--pink);color:#fff;box-shadow:0 6px 18px #e52b7929}.primary:hover{background:#d71c6a;transform:translateY(-2px);box-shadow:0 8px 20px #e52b7940}.secondary{background:#f8edf1;color:#8b6071;border-color:#f2e2e9}.secondary:hover{background:#f2e1e8}.arrow{font-size:18px;font-weight:400}.small-note{font-size:10px;color:#b394a2;margin:19px auto 0;min-height:17px;text-align:center}.under-card{font-size:10px;color:#ad8496;text-align:center;letter-spacing:.7px;margin:23px 0 0;max-width:none}.under-card span{font-size:9px;color:#d891b0;margin:0 9px}footer{display:flex;justify-content:space-between;color:#a88b98;font-size:10px;padding-top:15px}footer>span:last-child{letter-spacing:1.5px;font-size:9px}.ambient{position:fixed;color:#edc4d4;pointer-events:none;font-family:Georgia,serif;z-index:-1}.ambient-one{font-size:75px;top:28%;left:7%;transform:rotate(-18deg)}.ambient-two{font-size:48px;top:22%;right:10%}.ambient-three{font-size:38px;bottom:17%;right:8%;transform:rotate(18deg)}.big-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:20px;background:var(--pale);font-size:31px;margin:0 auto 22px;transform:rotate(-6deg)}.back{position:absolute;top:-16px;left:-26px;background:none;border:0;color:#b38b9c;font-size:12px;padding:10px}.back:hover{color:var(--dark)}.step-title{font-size:36px;letter-spacing:-1.2px;margin-bottom:10px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px auto 0;max-width:440px}.choice{border:1px solid #efe0e7;border-radius:13px;background:#fdf6f8;padding:15px 17px;min-height:58px;display:flex;align-items:center;gap:12px;text-align:left;color:var(--dark);font-size:13px;transition:all .15s}.choice:hover{border-color:#e9a7c4;background:#fceaf1}.choice[aria-pressed=true]{background:#fce7ef;border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}.choice .emoji{font-size:23px;line-height:1.2}.choice .check{margin-left:auto;width:17px;height:17px;border:1px solid #e5ccd7;border-radius:50%;flex-shrink:0}.choice[aria-pressed=true] .check{background:var(--pink);border-color:var(--pink)}.choice[aria-pressed=true] .check:after{content:"✓";font-size:11px;color:white;display:block;text-align:center}.fields{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;text-align:left;max-width:400px;margin:27px auto 0}.field{display:flex;flex-direction:column;gap:8px;font-size:11px;color:#9a6d80}.field input{width:100%;min-width:0;border:1px solid #ead9e1;border-radius:12px;padding:14px 12px;color:var(--dark);background:#fdf7f9;font-size:14px;min-height:50px;color-scheme:light}.error{color:#bd2462;font-size:12px;margin:12px 0 0}.receipt{border:1px solid #eedce4;border-radius:16px;background:#fff9fb;max-width:400px;text-align:left;margin:22px auto 0;padding:20px 23px}.receipt-row{display:flex;justify-content:space-between;gap:18px;padding:9px 0;font-size:12px}.receipt-row span{color:#a0808f}.receipt-row strong{text-align:right;font-weight:650}.receipt-total{border-top:1px dashed #e5c4d2;margin-top:10px;padding-top:17px;font-size:14px}.receipt-total strong{color:var(--pink)}.ticket-label{font-size:9px;letter-spacing:2px;color:#ad7890;margin-bottom:9px}.ticket{background:#fff8fb;border:1px solid #f0d8e2;border-radius:15px;padding:22px;margin:20px auto 0;max-width:430px;position:relative}.ticket .date-title{font-size:23px;font-weight:750;letter-spacing:-.6px;margin:10px 0 15px}.ticket .ticket-detail{font-size:13px;line-height:1.8;margin-bottom:8px}.ticket .paid{border-top:1px dashed #e7c9d7;padding-top:15px;margin-top:15px;font-size:10px;letter-spacing:1px;color:#a16b83}.text-button{border:0;background:none;padding:9px;font-size:11px;color:#a78494;text-decoration:underline;text-underline-offset:4px}.text-button:hover{color:var(--dark)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#5a1735;color:#fff;border-radius:12px;padding:13px 20px;font-size:12px;opacity:0;pointer-events:none;transition:all .25s;max-width:90vw;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:4}.confetti-heart{position:absolute;top:-35px;animation:fall 2.8s ease-in forwards;color:var(--pink)}@keyframes fall{to{transform:translateY(110vh) rotate(390deg);opacity:0}}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1400px){.shell{max-width:1150px}.card{min-height:540px}}@media(max-width:650px){.shell{padding:22px 21px 19px}.brand{font-size:18px}.brand-heart{font-size:23px}.edition{font-size:7px;letter-spacing:1.3px}header{padding-bottom:21px}main{padding:28px 0 22px}.card{padding:37px 22px;min-height:490px;border-radius:22px}.card:before{border-radius:15px}h1,h2{font-size:36px;letter-spacing:-1.4px}.eyebrow{font-size:8px;letter-spacing:1.8px}.progress-caption{font-size:7px;letter-spacing:1.1px}.step-title{font-size:31px}.choice{padding:13px 11px;gap:8px;font-size:12px;min-height:60px}.choice .emoji{font-size:21px}.choice .check{width:15px;height:15px}.back{top:-25px;left:-13px}.fields{gap:8px}.field input{font-size:13px;padding:12px 8px}.receipt{padding:15px}.ticket{padding:18px 13px}.ambient-one{left:-30px}.ambient-two{right:-12px}.button{padding:13px 23px}.intro-copy{font-size:13px}.under-card{font-size:9px}.under-card span{margin:0 4px}footer{font-size:9px}.small-note{font-size:9px}.big-icon{margin-bottom:20px}}@media(max-width:360px){.shell{padding-left:12px;padding-right:12px}.edition{display:none}.card{padding-left:18px;padding-right:18px}h1{font-size:32px}.choice{font-size:11px}.choices{gap:7px}.step-title{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.confetti-heart{display:none}}

/* Playful answer on the first slide. */

.no-slot { display: inline-flex; align-items: center; justify-content: center; }
#no { touch-action: none; user-select: none; }
#no.is-escaping { position: absolute; z-index: 2; transition: background .18s; }
.notification-error { color: #bd2462; }
#retry-notification[hidden] { display: none; }

.activity-choices { grid-template-columns: 1fr; }
.choice-copy { min-width: 0; }
.choice-title { display: block; }
.choice-description { display: block; margin-top: 6px; color: var(--text); font-size: 12px; line-height: 1.6; }
.choice .emoji { flex-shrink: 0; }

/* Comfortable reading and touch controls on phones. */
@media (max-width: 480px) {
  .shell { padding: 18px max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  header { padding-bottom: 18px; }
  .edition { display: none; }
  main { padding: 24px 0 20px; }
  .progress-caption { align-items: flex-start; gap: 12px; font-size: 8px; line-height: 1.5; letter-spacing: 1px; }
  #chapter { max-width: 230px; }
  .card { padding: 34px 18px 28px; min-height: 0; }
  .card:before { inset: 7px; }
  h1, h2 { font-size: clamp(27px, 7.8vw, 34px); letter-spacing: -1px; line-height: 1.15; }
  .step-title { font-size: clamp(27px, 7.8vw, 32px); }
  p, .intro-copy { font-size: 14px; line-height: 1.65; }
  .small-note { font-size: 12px; line-height: 1.6; }
  .eyebrow { line-height: 1.5; }
  .actions { margin-top: 24px; }
  .actions > .button { width: 100%; min-height: 52px; padding: 14px 18px; font-size: 14px; }
  #answer-actions { flex-wrap: nowrap; gap: 10px; }
  #answer-actions > .button { width: auto; flex: 1; gap: 8px; padding: 14px 12px; }
  .no-slot { flex-shrink: 0; }
  #no { min-height: 52px; padding: 14px 18px; font-size: 14px; }
  .choices { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .choice { min-height: 60px; padding: 14px; gap: 12px; font-size: 14px; }
  .choice .emoji { font-size: 23px; }
  .choice .check { width: 18px; height: 18px; }
  .choice-description { font-size: 13px; line-height: 1.55; }
  .fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .field { font-size: 13px; }
  .field input { font-size: 16px; min-height: 52px; padding: 14px 12px; }
  .back { top: -26px; left: -8px; min-height: 44px; display: flex; align-items: center; }
  .receipt { padding: 16px; }
  .receipt-row { flex-direction: column; gap: 5px; font-size: 13px; }
  .receipt-row strong { text-align: left; overflow-wrap: anywhere; }
  .receipt-total { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .ticket { padding: 20px 14px; }
  .ticket .ticket-detail { overflow-wrap: anywhere; }
  .ticket-label { font-size: 9px; letter-spacing: 1.2px; line-height: 1.6; }
  .ticket .paid { line-height: 1.6; }
  .text-button { min-height: 44px; font-size: 13px; }
  footer { gap: 12px; line-height: 1.6; flex-wrap: wrap; }
}
@media (hover: none) { .primary:hover { transform: none; } }