:root{--ink:#30253c;--pink:#f9bfd3;--rose:#e96996;--cream:#fff9f1;--paper:#fffdf7;--purple:#6452a6;--shadow:0 18px 50px rgba(67,43,82,.18)}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:#f5dce7;overflow-x:hidden}button{font:inherit}.page{min-height:100svh;position:relative;isolation:isolate;overflow:hidden}.shell{width:min(100%,520px);min-height:100svh;margin:auto;padding:24px 22px 32px;position:relative}.eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;font-weight:800;opacity:.6}.next{position:fixed;right:max(20px,calc((100vw - 520px)/2 + 20px));bottom:19px;z-index:20;border:0;border-radius:99px;padding:12px 18px;background:#fff;color:var(--purple);box-shadow:0 8px 24px #42264a33;font-weight:800;text-decoration:none;transition:.25s}.next:hover{transform:translateY(-3px)}.fade{animation:fade .8s both}@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Chat */.chat-page{background:#e9dfd3}.chat-page:before{content:"";position:absolute;inset:0;opacity:.18;background-image:radial-gradient(#947c68 1px,transparent 1px);background-size:22px 22px}.chat{max-width:520px;margin:auto;min-height:100svh;background:#efeae2;position:relative;z-index:1;padding-bottom:72px}.chat-head{height:70px;background:#075e54;color:white;display:flex;align-items:center;gap:12px;padding:10px 16px;box-shadow:0 2px 7px #0002}.avatar{height:43px;width:43px;border-radius:50%;display:grid;place-items:center;background:#f7b8cb;font-size:24px}.chat-head h1{font-size:1rem;margin:0}.chat-head p{margin:3px 0 0;font-size:.72rem;opacity:.75}.bubble{position:relative;max-width:78%;width:max-content;margin:14px 15px;padding:9px 11px 17px;border-radius:8px;font-size:.94rem;line-height:1.35;box-shadow:0 1px 1px #0002;opacity:0;transform:translateY(12px);animation:pop .45s forwards}.bubble.me{background:#d9fdd3;margin-left:auto;border-top-right-radius:0}.bubble.her{background:white;border-top-left-radius:0}.time{position:absolute;bottom:3px;right:8px;font-size:.61rem;color:#718079}.open-chat{display:block;color:#075e54;font-weight:800;text-decoration:underline;cursor:pointer}.bubble:nth-of-type(2){animation-delay:.8s}.bubble:nth-of-type(3){animation-delay:1.55s}.bubble:nth-of-type(4){animation-delay:2.3s}@keyframes pop{to{opacity:1;transform:none}}.chat-input{height:58px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);padding:8px 12px;background:#f0f2f5;display:flex;gap:9px;align-items:center;color:#65747c}.input-fake{background:#fff;border-radius:99px;padding:12px 15px;flex:1;font-size:.82rem}
/* Welcome */.welcome{background:linear-gradient(145deg,#413264,#8974b4 52%,#f5b6cb);color:#fff}.welcome:before,.welcome:after{content:"✦";position:absolute;font-size:12rem;opacity:.09}.welcome:before{top:-30px;left:-30px}.welcome:after{right:-50px;bottom:20px}.welcome .shell{display:flex;flex-direction:column;justify-content:center;text-align:center}.sparkles{letter-spacing:17px;color:#ffd6a9;font-size:1.25rem}.welcome h1{font:clamp(3rem,12vw,4.8rem) 'Cormorant Garamond',serif;line-height:.9;margin:20px 0 18px}.welcome h1 span{font-style:italic;color:#ffe2c4}.welcome p{line-height:1.6;opacity:.83}.tap{margin-top:42px;font-size:.83rem;letter-spacing:.1em;animation:pulse 1.6s infinite}@keyframes pulse{50%{opacity:.45;transform:scale(.97)}}
/* Letter */.letter-page{background:linear-gradient(135deg,#efc4b8,#e8b0c3)}.letter-page .shell{display:grid;place-items:center;text-align:center}.envelope{height:335px;width:min(100%,390px);position:relative;cursor:pointer;filter:drop-shadow(0 18px 17px #63354a33)}.env-back{position:absolute;inset:70px 0 0;background:#d77d92;border-radius:5px}.env-front{position:absolute;inset:70px 0 0;background:linear-gradient(145deg,#e9a2b2,#cd6f88);clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%)}.flap{position:absolute;top:70px;width:100%;height:145px;background:#eeacba;clip-path:polygon(0 0,100% 0,50% 78%);transform-origin:top;transition:.8s}.paper{position:absolute;z-index:-1;top:85px;left:8%;width:84%;height:245px;padding:27px 25px;background:var(--paper);color:#5d4855;box-shadow:0 3px 10px #0002;text-align:left;transition:.8s}.handwriting{font:1.5rem 'Caveat',cursive;line-height:1.25}.envelope.open .flap{transform:rotateX(180deg);z-index:-2}.envelope.open .paper{transform:translateY(-145px);z-index:2}.letter-hint{margin-top:8px;font-size:.9rem}.letter-page .next{opacity:0;pointer-events:none}.letter-page.opened .next{opacity:1;pointer-events:auto}
/* Flowers */.flowers-page{background:linear-gradient(#fde8eb,#f8ced9 70%,#a8ca9a)}.center{text-align:center}.flowers-page h1,.stars-page h1,.gift-page h1,.cinema-page h1{font:3.1rem 'Cormorant Garamond',serif;margin:8px 0}.flowers{display:grid;grid-template-columns:repeat(3,1fr);gap:27px 10px;margin-top:55px}.flower{border:0;background:none;cursor:pointer;position:relative;height:112px;transition:.25s}.flower:hover{transform:translateY(-7px)}.bloom{font-size:4rem;display:block;filter:drop-shadow(0 8px 6px #9a567533)}.quality{font-size:.8rem;font-weight:800;margin-top:7px;opacity:0;transform:translateY(4px);transition:.25s}.flower.open .quality{opacity:1;transform:none}.flower.open .bloom{animation:bloom .45s}@keyframes bloom{50%{transform:scale(1.2) rotate(8deg)}}.flower-note{min-height:48px;margin:15px auto;padding:13px;border-radius:18px;background:#ffffff8c;font:1.25rem 'Caveat',cursive;max-width:320px}
/* Stars */.stars-page{background:#10122b;color:#fff}.stars-page:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#d5c4ff 1px,transparent 1.5px);background-size:47px 49px,83px 87px;background-position:10px 22px,35px 12px;opacity:.55}.constellation{position:relative;height:465px;margin-top:20px}.line{position:absolute;left:17%;top:27%;width:61%;height:44%;border:1px solid #9088d944;border-width:1px 0 1px 1px;transform:rotate(16deg)}.star{position:absolute;border:0;color:#fff;background:transparent;font-size:1.65rem;cursor:pointer;filter:drop-shadow(0 0 8px #fff);animation:twinkle 2s infinite}.star:nth-child(2){left:11%;top:60%}.star:nth-child(3){left:33%;top:19%;animation-delay:.6s}.star:nth-child(4){left:66%;top:35%;animation-delay:1.2s}.star:nth-child(5){left:80%;top:68%;animation-delay:1.6s}@keyframes twinkle{50%{transform:scale(.7);opacity:.55}}.memory{position:absolute;bottom:15px;left:0;right:0;margin:auto;width:88%;padding:15px;border:1px solid #ffffff33;border-radius:16px;background:#24264dcc;text-align:center;min-height:52px}
/* Polaroids */.polaroid-page{background:#f6e7d5}.string{height:2px;background:#6e5348;margin:60px -22px 0}.photos{display:flex;justify-content:space-around;gap:10px;margin-top:-3px}.polaroid{width:31%;background:#fff;padding:8px 8px 19px;box-shadow:3px 5px 12px #754f4529;cursor:pointer;transform-origin:top center;transition:.5s;position:relative;perspective:700px}.polaroid:before{content:"";position:absolute;width:1px;height:38px;background:#856753;top:-38px;left:50%}.polaroid:nth-child(1){transform:rotate(-7deg)}.polaroid:nth-child(2){transform:rotate(4deg);margin-top:38px}.polaroid:nth-child(3){transform:rotate(-3deg);margin-top:15px}.polaroid .photo{height:130px;background:var(--tone,#e9b2c1);display:grid;place-items:center;font-size:3rem}.polaroid small{display:block;text-align:center;margin-top:8px;font-family:'Caveat',cursive}.polaroid.flipped{transform:rotateY(180deg)!important;background:#6a4a71;color:#fff}.polaroid.flipped .photo{font-size:0;background:transparent}.polaroid.flipped .photo:after{content:attr(data-message);font:1.15rem 'Caveat',cursive;text-align:center;padding:7px}.polaroid.flipped small{font-size:0}.polaroid.flipped small:after{content:'a little note for you';font-size:1rem}
/* Scrapbook */.scrap-page{background:#ceb8a2}.book{margin-top:25px;background:#f8edcf;min-height:620px;padding:32px 22px;box-shadow:0 10px 25px #51362255;position:relative}.book:before{content:"";position:absolute;left:50%;top:0;height:100%;border-left:3px solid #d5bea7}.book h1{font:2.8rem 'Caveat',cursive;text-align:center;margin:0}.memories{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}.memory-card{padding:8px;background:white;transform:rotate(var(--tilt));box-shadow:2px 4px 8px #896b4c44}.memory-card .photo{height:120px;display:grid;place-items:center;font-size:3rem;background:var(--tone,#eab6b4)}.memory-card p{font:1rem 'Caveat',cursive;margin:8px 2px 1px}.tape{width:62px;height:18px;background:#ead2a388;position:absolute;top:-8px;left:calc(50% - 31px);transform:rotate(-4deg)}
/* Cinema */.cinema-page{background:#211521;color:#fff}.theatre{height:420px;margin-top:25px;position:relative;background:#101016;border-radius:0 0 10px 10px;overflow:hidden;box-shadow:inset 0 0 50px #000}.screen{position:absolute;top:56px;left:12%;width:76%;height:235px;background:#e5b5c2;display:grid;place-items:center;font-size:5rem;transition:.5s}.curtain{position:absolute;z-index:2;top:0;height:100%;width:50%;background:repeating-linear-gradient(90deg,#8d1e38,#a62946 20px,#78152c 40px);transition:1.4s}.curtain.left{left:0}.curtain.right{right:0}.theatre.playing .left{transform:translateX(-100%)}.theatre.playing .right{transform:translateX(100%)}.play{display:block;margin:22px auto;border:1px solid #f2c6cf;border-radius:99px;padding:12px 22px;background:transparent;color:#fff;cursor:pointer}
/* Night */.night-page{background:linear-gradient(#090d26,#283265 64%,#e8a6a9);color:#fff}.moon{font-size:5rem;margin-top:25px;filter:drop-shadow(0 0 20px #f9eac2)}.night-title{font:3rem 'Cormorant Garamond',serif;margin:12px 0}.lanterns{height:450px;position:relative}.lantern{position:absolute;width:82px;height:100px;padding:7px;background:#fff;color:#513b4d;box-shadow:0 0 20px #ffe19699;text-align:center;animation:float 5s infinite ease-in-out}.lantern:before{content:"";position:absolute;top:-48px;left:50%;height:48px;border-left:1px solid #fff8}.lantern:nth-child(1){left:10%;bottom:50px;animation-delay:0s}.lantern:nth-child(2){left:42%;bottom:120px;animation-delay:-2s}.lantern:nth-child(3){right:8%;bottom:25px;animation-delay:-3s}@keyframes float{50%{transform:translateY(-55px) rotate(4deg)}}.lantern b{display:block;margin-top:21px;font:1.05rem 'Caveat',cursive}.final-note{position:absolute;bottom:50px;left:0;right:0;text-align:center;font:1.55rem 'Caveat',cursive}