@import "https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&display=swap";*,:before,:after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:Georgia,Times New Roman,serif}#root{min-height:100svh}.scene{-webkit-user-select:none;user-select:none;background:radial-gradient(at 50% 100%,#fdf2f8,#fce7f3 40%,#f3e8ff 80%,#ede9fe);flex-direction:column;justify-content:center;align-items:center;min-height:100svh;display:flex;position:relative;overflow:hidden}.fade-in{animation:.6s both fadeIn}.fade-out{animation:.6s both fadeOut}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fade-up{animation:.8s both fadeUp}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;width:100%;min-height:100svh;padding:32px 20px;display:flex}.page-bouquet{gap:0}.handwritten{font-family:Caveat,cursive}.envelope{cursor:pointer;width:min(320px,80vw);transition:transform .3s;animation:3s ease-in-out infinite floatEnvelope,.8s both fadeUp;position:relative}.envelope:hover{transform:scale(1.05)}.envelope:active{transform:scale(.97)}.envelope-body{z-index:2;background:linear-gradient(145deg,#fff7ed 0%,#fef3c7 50%,#fff7ed 100%);border:1px solid #f5e6d0;border-radius:8px;justify-content:center;align-items:center;width:100%;height:200px;display:flex;position:relative;box-shadow:0 8px 32px #b4785026,0 2px 8px #0000000f}.envelope-flap{z-index:1;filter:drop-shadow(0 -2px 4px #0000000d);border-bottom:65px solid #fde68a;border-left:min(160px,40vw) solid #0000;border-right:min(160px,40vw) solid #0000;width:0;height:0;position:absolute;top:-60px;left:50%;transform:translate(-50%)}.envelope-label{color:#92400e;margin:0;font-size:36px;font-weight:600}.tap-hint{color:#c7a07a;margin:10px 0 0;font-family:Caveat,cursive;font-size:20px}@keyframes floatEnvelope{0%,to{translate:0}50%{translate:0 -8px}}.letter-card{background:repeating-linear-gradient(#0000,#0000 39px,#e8ddd0 39px 40px) 0 38px;border:1px solid #f0e4d0;border-radius:12px;width:100%;max-width:min(460px,85vw);padding:48px 40px;position:relative;box-shadow:0 8px 32px #b478501f,0 2px 8px #0000000a}.letter-card:before{content:"";opacity:.5;background:#f0c8c8;width:1px;position:absolute;top:0;bottom:0;left:36px}.letter-line{color:#5c4033;margin:0;padding:6px 0;font-size:clamp(24px,5vw,32px);line-height:40px;animation:.6s both writeLine}@keyframes writeLine{0%{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}.next-btn{color:#a855f7;cursor:pointer;background:#a855f714;border:2px solid #a855f740;border-radius:40px;padding:10px 32px;font-family:Caveat,cursive;font-size:22px;transition:all .3s}.next-btn:hover{background:#a855f726;border-color:#a855f780;transform:translate(4px)}.final-title{background:linear-gradient(135deg,#ec4899 0%,#a855f7 50%,#ec4899 100%) 0 0/200% 200%;-webkit-text-fill-color:transparent;z-index:10;-webkit-background-clip:text;background-clip:text;margin:0;font-family:Caveat,cursive;font-size:clamp(36px,8vw,68px);font-weight:700;animation:4s ease-in-out infinite shimmer,.8s both fadeUp}.final-sub{color:#b893c6;z-index:10;margin:4px 0 8px;font-family:Caveat,cursive;font-size:clamp(18px,3vw,26px)}@keyframes shimmer{0%,to{background-position:0%}50%{background-position:100%}}.bouquet{z-index:5;width:min(420px,85vw);height:min(480px,95vw);animation:1s cubic-bezier(.34,1.56,.64,1) both riseIn;position:relative}@keyframes riseIn{0%{opacity:0;transform:translateY(80px)scale(.85)}to{opacity:1;transform:translateY(0)scale(1)}}.stems-svg{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.stem-path{animation:.9s ease-out both stemDraw}@keyframes stemDraw{0%{stroke-dasharray:300;stroke-dashoffset:300px}to{stroke-dasharray:300;stroke-dashoffset:0}}.svg-leaf{transform-origin:50%;animation:5s ease-in-out infinite leafSway}@keyframes leafSway{0%,to{transform:rotate(0)}50%{transform:rotate(4deg)}}.baby-breath{z-index:6;background:#ffffffe6;border-radius:50%;width:7px;height:7px;animation:.4s ease-out both bbPop,2.5s ease-in-out infinite bbTwinkle;position:absolute;box-shadow:0 0 6px #fff9}@keyframes bbPop{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes bbTwinkle{0%,to{opacity:.5}50%{opacity:1}}.wrap-svg{z-index:4;filter:drop-shadow(0 4px 12px #db277726);width:100%;height:44%;animation:.7s ease-out .3s both wrapIn;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@keyframes wrapIn{0%{opacity:0;transform:translate(-50%)translateY(30px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.lily{z-index:7;cursor:pointer;width:80px;height:80px;transform:rotate(var(--lily-rot,0deg)) scale(var(--lily-scale,1));margin-top:-40px;margin-left:-40px;transition:filter .3s;animation:.6s cubic-bezier(.34,1.56,.64,1) both flowerPop,6s ease-in-out infinite gentleSway;position:absolute}.lily:hover{filter:brightness(1.12)drop-shadow(0 0 16px #ec489980);z-index:20}@keyframes flowerPop{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@keyframes gentleSway{0%,to{translate:0}50%{translate:0 -5px}}.petal{transform-origin:bottom;width:22px;height:42px;transform:rotate(var(--angle,0deg)) translateY(var(--spread,-12px)) scaleY(var(--petal-scale,.65));border-radius:50% 50% 40% 40%/60% 60% 40% 40%;margin-top:-21px;margin-left:-11px;transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;position:absolute;top:50%;left:50%;overflow:hidden;box-shadow:inset 0 -6px 12px #00000012}.lily.open .petal{box-shadow:inset 0 -6px 12px #00000012,0 2px 10px #ec489926}.petal-vein{opacity:.3;width:1px;height:60%;position:absolute;top:15%;left:50%;transform:translate(-50%)}.pistil{z-index:2;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;transition:transform .4s,box-shadow .4s;position:absolute;top:50%;left:50%;box-shadow:0 0 8px #fbbf2466}.lily.open .pistil{transform:scale(1.2);box-shadow:0 0 14px #fbbf2499}.stamen{transform-origin:bottom;width:2px;height:14px;transform:rotate(var(--s-angle,0deg)) translateY(-8px);z-index:3;background:#a37b2c;border-radius:1px;margin-top:-7px;margin-left:-1px;animation:.4s ease-out both stamenIn;position:absolute;top:50%;left:50%}.stamen-tip{border-radius:50%;width:5px;height:5px;margin-left:-2.5px;position:absolute;top:-1px;left:50%}@keyframes stamenIn{0%{opacity:0;scale:0}to{opacity:1;scale:1}}.sparkle{pointer-events:none;z-index:100;border-radius:50%;animation:1.6s ease-out forwards sparkAnim;position:fixed}@keyframes sparkAnim{0%{opacity:1;transform:scale(0)rotate(0)}40%{opacity:.9;transform:scale(1.4)rotate(180deg)}to{opacity:0;transform:scale(0)rotate(360deg)}}.falling-petal{pointer-events:none;z-index:50;opacity:.75;border-radius:50% 50% 40% 0;width:14px;height:20px;animation:linear forwards petalDrift;position:fixed;top:-30px}@keyframes petalDrift{0%{transform:translateY(0) rotate(var(--rotate,0deg)) translateX(0);opacity:.8}25%{transform:translateY(25vh) rotate(calc(var(--rotate,0deg) + 90deg)) translateX(40px)}50%{transform:translateY(50vh) rotate(calc(var(--rotate,0deg) + 180deg)) translateX(-30px)}75%{transform:translateY(75vh) rotate(calc(var(--rotate,0deg) + 270deg)) translateX(20px)}to{transform:translateY(110vh) rotate(calc(var(--rotate,0deg) + 360deg)) translateX(-10px);opacity:0}}.hint-final{color:#c4a5d0;z-index:10;margin-top:8px;font-family:Caveat,cursive;font-size:16px}.hint-final kbd{background:#ffffffb3;border:1px solid #e0d0e8;border-radius:4px;margin:0 2px;padding:2px 6px;font-family:Caveat,cursive;font-size:13px;display:inline-block;box-shadow:0 1px 2px #0000000f}