:root{--stripe-a: #f9c9d6;--stripe-b: #f5b7c9;--paper: #fff8ee;--paper-2: #f8e9da;--paper-3: #f4dfc9;--ink: #8a4f60;--ink-soft: #b96b7d;--accent: #e8566d;--accent-2: #f0849b;--blue: #618ed8;--gold: #ecae4a}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:Quicksand,system-ui,sans-serif;color:var(--ink);background:radial-gradient(120vw 70vh at 50% 30%,rgba(255,246,248,.65),transparent 70%),repeating-linear-gradient(90deg,var(--stripe-a) 0 26px,var(--stripe-b) 26px 52px);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}img{-webkit-user-drag:none}section[hidden],[hidden]{display:none!important}#bg-decor{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}#bg-decor span{position:absolute;bottom:-8vh;font-size:22px;opacity:0;animation:floatUp 11s linear infinite}#bg-decor span:nth-child(1){left:6%;animation-delay:0s;font-size:18px}#bg-decor span:nth-child(2){left:16%;animation-delay:2.8s;font-size:14px}#bg-decor span:nth-child(3){left:26%;animation-delay:6.2s;font-size:20px}#bg-decor span:nth-child(4){left:36%;animation-delay:1.4s;font-size:13px}#bg-decor span:nth-child(5){left:45%;animation-delay:8.4s;font-size:16px}#bg-decor span:nth-child(6){left:55%;animation-delay:4.4s;font-size:24px}#bg-decor span:nth-child(7){left:64%;animation-delay:9.6s;font-size:15px}#bg-decor span:nth-child(8){left:73%;animation-delay:.9s;font-size:18px}#bg-decor span:nth-child(9){left:81%;animation-delay:5.3s;font-size:13px}#bg-decor span:nth-child(10){left:88%;animation-delay:7.1s;font-size:19px}#bg-decor span:nth-child(11){left:94%;animation-delay:3.2s;font-size:15px}#bg-decor span:nth-child(12){left:50%;animation-delay:10.2s;font-size:14px}@keyframes floatUp{0%{transform:translateZ(0) rotate(-8deg);opacity:0}8%{opacity:.5}50%{transform:translate3d(14px,-55vh,0) rotate(10deg);opacity:.45}92%{opacity:.25}to{transform:translate3d(-10px,-112vh,0) rotate(-6deg);opacity:0}}#install-view{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 30px calc(20px + env(safe-area-inset-bottom))}#install-main,#install-done{display:flex;flex-direction:column;align-items:center}.gift{font-size:86px;line-height:1;filter:drop-shadow(0 12px 18px rgba(190,80,110,.3));animation:giftBounce 2.4s ease-in-out infinite}@keyframes giftBounce{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}.psst{margin-top:26px;font-family:Caveat,cursive;font-size:30px;color:var(--ink-soft)}#install-view h1{margin-top:4px;font-family:Caveat,cursive;font-weight:700;font-size:clamp(38px,11vw,48px);line-height:1.12;color:var(--ink)}#install-view h1 em{font-style:normal;color:var(--accent)}#install-view .sub{margin-top:14px;font-size:16px;font-weight:500;color:var(--ink-soft)}#install-btn{margin-top:30px;border:none;cursor:pointer;font-family:Quicksand,sans-serif;font-weight:700;font-size:18px;color:#fff;padding:16px 34px;border-radius:999px;background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 12px 26px #e8566d66;transition:transform .15s ease,box-shadow .15s ease;animation:btnGlow 2.2s ease-in-out infinite}#install-btn:active{transform:scale(.95);box-shadow:0 6px 14px #e8566d59}@keyframes btnGlow{0%,to{box-shadow:0 12px 26px #e8566d66}50%{box-shadow:0 12px 32px #e8566d9e}}#install-help{margin-top:22px;max-width:300px;font-size:13.5px;line-height:1.55;color:var(--ink-soft);background:#fff9;border-radius:14px;padding:12px 16px}#install-done h1{margin-top:20px}.footer-note{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:0;right:0;font-family:Caveat,cursive;font-size:19px;color:#8a4f608c}#app-view{position:relative;z-index:1}#stage{position:fixed;inset:0;transition:opacity .28s ease}#stage.fading{opacity:0}#app-head{position:absolute;top:calc(12px + env(safe-area-inset-top));left:0;right:0;text-align:center;z-index:5;transition:opacity .4s ease}#app-head h1{font-family:Caveat,cursive;font-weight:700;font-size:34px;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.45)}#app-head.gone,#tap-hint.gone{opacity:0;pointer-events:none}#env-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}#env-scene.away{transform:translateY(118vh);opacity:0;transition:transform .8s cubic-bezier(.55,0,.75,.4),opacity .7s ease .1s}#envelope{position:relative;width:min(80vw,330px);aspect-ratio:10 / 7;cursor:pointer;outline:none}.env-back{position:absolute;inset:0;z-index:1;border-radius:16px;background:linear-gradient(180deg,#fdf1e2,#f6e3cd);box-shadow:0 22px 44px #b0546e52}.env-inner{position:absolute;inset:3% 4%;z-index:1;border-radius:12px;background:#fff;background-image:radial-gradient(rgba(240,132,155,.35) 1.6px,transparent 1.7px);background-size:16px 16px}.env-front{position:absolute;inset:0;z-index:3;border-radius:16px;background:linear-gradient(180deg,var(--paper),var(--paper-2) 78%,var(--paper-3));clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -10px 22px #d8987a2e}.env-label{position:absolute;left:50%;bottom:13%;transform:translate(-50%);z-index:3;font-family:Caveat,cursive;font-weight:600;font-size:clamp(20px,6.2vw,26px);color:var(--ink-soft);white-space:nowrap}.deco{position:absolute;z-index:3;font-size:15px}.deco-1{right:7%;bottom:9%;transform:rotate(14deg)}.deco-2{left:7%;bottom:9%;transform:rotate(-12deg)}.env-flap{position:absolute;top:0;left:0;right:0;height:54%;z-index:4;transform-origin:50% 0;border-radius:16px 16px 0 0;background:linear-gradient(180deg,#fbeede,#f4ddc4);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 3px rgba(176,84,110,.12));transition:transform .5s cubic-bezier(.6,.04,.3,1)}#envelope.open .env-flap{transform:rotateX(180deg)}#envelope.flap-down .env-flap{z-index:1;filter:none}.seal{position:absolute;left:50%;top:54%;translate:-50% -50%;z-index:5;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#f4798f,var(--accent) 65%);display:grid;place-items:center;box-shadow:0 5px 12px #be3c5573,inset 0 -3px 6px #961e3740;animation:sealPulse 1.9s ease-in-out infinite;transition:transform .35s ease,opacity .35s ease}.seal span{color:#fff;font-size:24px;line-height:1;transform:translateY(-1px)}@keyframes sealPulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}#envelope.open .seal{transform:scale(0);opacity:0;animation:none}#tap-hint{margin-top:30px;font-family:Caveat,cursive;font-weight:600;font-size:24px;color:var(--ink-soft);animation:hintBob 1.7s ease-in-out infinite;transition:opacity .4s ease}@keyframes hintBob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}#photo-slot{position:absolute;inset:calc(10px + env(safe-area-inset-top)) 16px calc(68px + env(safe-area-inset-bottom));z-index:2;display:grid;place-items:center;pointer-events:none}#card-photo,#letter-img{grid-area:1 / 1;max-width:100%;max-height:100%;border-radius:12px}#card-photo{border:6px solid #fff;box-shadow:0 16px 38px #963c5852;will-change:transform}#card-photo.dim{opacity:0}#letter-img{opacity:0;box-shadow:0 16px 38px #963c584d}#letter-img.show{opacity:1;transition:opacity 1s ease}#restart-btn{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;translate:-50%;z-index:6;border:1.5px solid rgba(185,107,125,.4);background:#ffffffc7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink-soft);font-family:Quicksand,sans-serif;font-weight:600;font-size:14px;padding:9px 20px;border-radius:999px;cursor:pointer;opacity:0;pointer-events:none}#restart-btn.show{opacity:1;pointer-events:auto;transition:opacity .5s ease}#restart-btn:active{transform:scale(.94)}@media(prefers-reduced-motion:reduce){#bg-decor span,.gift,.seal,#tap-hint,#install-btn{animation:none}}