:root{--ink:#653d58;--pink:#ff8fba;--pink2:#ffd6e5;--lav:#e8dcff;--blue:#d8f2ff;--cream:#fff9ec;--yellow:#fff1ae;--shadow:0 18px 45px #a3628530}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{overflow-x:hidden;color:var(--ink);font-family:"DM Sans",Arial,sans-serif;background:linear-gradient(155deg,#fff8ed,#ffe1ed 45%,#dceeff);font-size:16px}.particles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}.particles i{position:absolute;color:#ff8fba;animation:float 7s ease-in-out infinite}.stage{position:relative;z-index:2;min-height:100svh;width:min(100%,920px);margin:auto;padding:clamp(22px,5vw,52px) 20px;display:flex;align-items:center;justify-content:center;text-align:center}.scene{width:100%;animation:arrive .5s both}.scene-intro,.question-card,.celebration,.envelope-scene{background:#ffffffa8;border:1px solid #fff;border-radius:32px;box-shadow:var(--shadow);padding:clamp(26px,5vw,54px);backdrop-filter:blur(8px)}.eyebrow{color:#bf557f;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem}.hero h1{font-family:Pacifico,cursive;font-size:clamp(2.4rem,10vw,5.5rem);line-height:1.15;margin:.4rem 0 1rem;color:#d95185;text-shadow:0 4px 0 #fff}.hero p,.scene-intro p{font-size:clamp(1.05rem,3vw,1.35rem);margin:.5rem auto;max-width:540px}.characters{display:flex;justify-content:center;align-items:end;gap:clamp(8px,5vw,48px);height:205px;margin:18px auto}.char{position:relative;width:120px;height:145px;filter:drop-shadow(0 10px 9px #8d55752a);animation:bob 2.2s ease-in-out infinite}.bunny .ear{position:absolute;width:31px;height:76px;background:#fff;border:4px solid #f7c4da;border-radius:50% 50% 42% 42%;top:-28px}.bunny .ear:first-child{left:22px;transform:rotate(-13deg)}.bunny .ear:nth-child(2){right:22px;transform:rotate(13deg)}.piggy .ear{position:absolute;width:43px;height:43px;border-radius:50%;background:#ff9cba;top:-7px}.piggy .ear:first-child{left:9px}.piggy .ear:nth-child(2){right:9px}.face{position:absolute;inset:10px 0 0;border-radius:48% 48% 42% 42%;background:#fff;box-shadow:inset 0 -7px #f7e1ea}.piggy .face{background:#ffb1c9;box-shadow:inset 0 -7px #ef8cad}.eye{position:absolute;top:47px;width:11px;height:17px;border-radius:50%;background:#55334b}.eye:after{content:"";position:absolute;width:4px;height:5px;border-radius:50%;background:white;top:2px;left:2px}.eye.left{left:37px}.eye.right{right:37px}.cheek{position:absolute;top:69px;width:23px;height:11px;border-radius:50%;background:#ff9fbd88}.cheek.left{left:17px}.cheek.right{right:17px}.mouth{position:absolute;top:77px;left:53px;width:14px;height:9px;border-bottom:3px solid #8c4b68;border-radius:0 0 50% 50%}.snout{position:absolute;top:64px;left:43px;width:34px;height:24px;border-radius:50%;background:#ff88ae}.snout:before,.snout:after{content:"";position:absolute;background:#b95678;width:5px;height:6px;border-radius:50%;top:8px}.snout:before{left:9px}.snout:after{right:9px}.heart{position:absolute;right:-8px;bottom:4px;color:#ff6298;font-size:31px;transform:rotate(-12deg)}.char.reacting{animation:jump .45s ease-in-out 2}.char.shy .face{filter:saturate(.85)}.piggy.laugh{animation:wiggle .55s ease-in-out 2}.cta, .answer, .music{appearance:none;border:0;cursor:pointer;border-radius:999px;background:linear-gradient(135deg,#ff78ab,#ec6296);color:white;padding:15px 23px;margin-top:24px;font:700 1rem inherit;box-shadow:0 9px 20px #d45f8b43;transition:transform .2s,box-shadow .2s}.cta:hover,.answer:hover,.music:hover{transform:translateY(-3px);box-shadow:0 13px 24px #d45f8b52}.cta:focus-visible,.answer:focus-visible,.music:focus-visible{outline:4px solid #7258c8;outline-offset:4px}.music{position:fixed;right:16px;top:16px;z-index:5;font-size:.86rem;padding:10px 15px;background:#ffffffcf;color:#a94470;box-shadow:0 4px 15px #9f618435}.music[hidden]{display:none}.question-card{max-width:700px}.progress{height:9px;background:#f4dce6;border-radius:99px;overflow:hidden;margin:0 auto 24px;max-width:420px}.progress i{display:block;height:100%;background:linear-gradient(90deg,#ff91ba,#a88cec);border-radius:inherit;transition:width .35s}.question-card h2{font-size:clamp(1.55rem,5vw,2.3rem);line-height:1.25;margin:7px 0 18px}.mini-chars{height:118px;margin:0}.mini-chars .char{transform:scale(.7);transform-origin:bottom}.answers{display:grid;gap:11px;max-width:460px;margin:0 auto}.answer{margin:0;background:#fff;color:#944d70;border:2px solid #f3c7d8;box-shadow:none;text-align:left;padding:14px 18px}.answer.selected{background:#ffedf4;border-color:#f57cae}.reaction{min-height:67px;margin:19px auto 0;font-weight:700;color:#a64e77}.next{display:none}.next.show{display:inline-block}.celebration h1{font-family:Pacifico,cursive;color:#da5b8c;font-size:clamp(2.7rem,10vw,5rem);margin:0}.celebration p{font-size:clamp(1.05rem,3vw,1.3rem)}.envelope{position:relative;width:min(270px,75vw);height:175px;background:#f5a1bb;border-radius:10px;margin:28px auto 12px;box-shadow:0 15px 30px #b15e7c48;overflow:hidden;animation:bob 2.2s ease-in-out infinite}.envelope:before,.envelope:after{content:"";position:absolute;width:0;height:0;border-style:solid}.envelope:before{top:0;left:0;border-width:88px 135px 0;border-color:#ffc6d8 transparent transparent}.envelope:after{bottom:0;left:0;border-width:0 135px 90px;border-color:transparent transparent #ffb4ca}.seal{position:absolute;z-index:2;top:64px;left:calc(50% - 22px);font-size:44px;filter:drop-shadow(0 2px 2px #9b4e6740)}.envelope.open{animation:none;overflow:visible}.envelope.open:before{transform-origin:top;animation:flap .7s forwards}.paper-preview{position:absolute;left:24px;right:24px;bottom:18px;height:120px;background:#fff8e9;border-radius:5px;z-index:-1}.envelope.open .paper-preview{animation:paper .8s .25s forwards}.letter-stage{align-items:flex-start;padding-top:32px}.letter{width:min(100%,760px);background:var(--cream);border:9px double #f4b6c9;border-radius:18px;box-shadow:var(--shadow);padding:clamp(28px,7vw,66px) clamp(20px,6vw,70px);text-align:left;position:relative;overflow:hidden}.letter:before,.letter:after{content:"🌸";position:absolute;font-size:2rem}.letter:before{top:16px;left:18px}.letter:after{right:18px;bottom:16px}.letter h1{font-family:Pacifico,cursive;text-align:center;color:#cf5d89;font-size:clamp(2rem,8vw,3.5rem);margin:0 0 30px}.letter p{line-height:1.8;font-size:clamp(1rem,2.5vw,1.12rem);margin:0 0 1.15em;opacity:0;transform:translateY(12px);animation:reveal .65s forwards}.letter .divider{text-align:center;color:#d77a9e;letter-spacing:.32em}.signature{font-family:Pacifico,cursive;color:#bd557d;text-align:right}.letter .end-card{text-align:center;margin-top:30px}.final-scene{width:100%}.final-scene .characters{margin-top:0}.final-scene h2{font-family:Pacifico,cursive;color:#d75687;font-size:clamp(2rem,7vw,3.3rem);margin:.3rem}.final-scene p{font-size:1.1rem}.burst{position:absolute;pointer-events:none;font-size:24px;animation:burst 1.1s ease-out forwards}@keyframes arrive{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}@keyframes bob{50%{transform:translateY(-10px)}}@keyframes jump{50%{transform:translateY(-24px) rotate(-5deg)}}@keyframes wiggle{25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}@keyframes float{50%{transform:translateY(-40px) rotate(15deg);opacity:.55}}@keyframes burst{to{transform:translate(var(--x),var(--y)) scale(.3) rotate(180deg);opacity:0}}@keyframes flap{to{transform:rotateX(180deg)}}@keyframes paper{to{transform:translateY(-120px);z-index:1}}@keyframes reveal{to{opacity:1;transform:none}}@media (min-width:700px){.characters{height:245px}.char{transform:scale(1.15)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.particles{display:none}}