@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--ink:#68425c;--muted:#9b778d;--rose:#c96793;--deep:#a94f79;--white:#fffafc}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',system-ui,sans-serif;color:var(--ink)}body{background:linear-gradient(145deg,#fff3f6 0%,#fbe5f1 42%,#eadffb 100%);overflow-x:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #9c4d83;outline-offset:4px}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden}.glow{position:absolute;width:60vw;height:60vw;max-width:700px;max-height:700px;border-radius:50%;filter:blur(35px);opacity:.35}.glow-a{background:#ffbad4;top:-25%;left:-15%;animation:drift 14s ease-in-out infinite alternate}.glow-b{background:#bdb0f9;bottom:-35%;right:-10%;animation:drift 17s ease-in-out infinite alternate-reverse}@keyframes drift{to{transform:translate(9%,8%)}}.spark{position:absolute;opacity:.5;color:#fff;font-size:12px;animation:twinkle 3s ease-in-out infinite alternate}@keyframes twinkle{to{opacity:.1;transform:scale(.5)}}.topbar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px max(22px,env(safe-area-inset-right));font-size:12px;letter-spacing:.1em}.brand{font-weight:700;color:var(--deep)}.sound{border:1px solid #ffffffa6;background:#ffffff80;border-radius:99px;color:var(--ink);padding:10px 13px;backdrop-filter:blur(8px)}main{position:relative;z-index:1}.scene{display:none;min-height:100svh;padding:95px 20px 85px;align-items:center;justify-content:center;text-align:center}.scene.active{display:flex;animation:appear .7s ease both}@keyframes appear{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.scene-content{width:100%;max-width:690px;margin:auto}.eyebrow{display:block;color:#a56e8e;font-size:10px;font-weight:700;letter-spacing:.26em;margin-bottom:20px}.moon{font-size:80px;line-height:1;color:#e9afc9;text-shadow:0 0 38px #ff9cce;animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-12px)}}h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;line-height:1.25;margin:14px 0 16px}h1{font-size:clamp(37px,8vw,68px)}h2{font-size:clamp(30px,6vw,49px)}em{font-weight:500;color:var(--deep)}p{font-size:15px;line-height:1.85;color:#85677c;margin:0 auto 25px;max-width:540px}.intro p{max-width:440px}.primary{border:0;background:linear-gradient(135deg,#cf78a1,#b65b8b);color:white;border-radius:50px;padding:16px 28px;box-shadow:0 12px 30px #b85d8b45;font-weight:700;transition:transform .2s,box-shadow .2s}.primary:hover{transform:translateY(-3px);box-shadow:0 16px 35px #b85d8b66}.tiny{display:block;margin-top:20px;color:#aa8b9e;font-size:11px;letter-spacing:.04em}.envelope-wrap{display:block;position:relative;margin:65px auto 42px;width:min(300px,80vw);height:205px;border:0;background:transparent;filter:drop-shadow(0 22px 20px #b36e9a35);transition:transform .3s}.envelope-wrap:hover{transform:translateY(-5px)}.envelope-back,.envelope-front,.envelope-flap,.paper-peek,.seal{position:absolute;display:block}.envelope-back{inset:0;background:#e8a5c4;border-radius:7px}.paper-peek{width:82%;height:78%;top:10%;left:9%;background:#fffaf6;padding-top:35px;font-family:Georgia,serif;font-style:italic;font-size:20px;color:#ad6388;transition:transform .9s;z-index:1}.envelope-front{inset:0;background:#f3bed5;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);z-index:2;border-radius:5px}.envelope-flap{inset:0;background:#e89cbd;clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:top;transition:transform .7s;z-index:4}.seal{top:47%;left:calc(50% - 22px);width:44px;height:44px;line-height:44px;border-radius:50%;background:#bf658f;color:white;z-index:5;box-shadow:0 3px 12px #a64f7855}.envelope-wrap.open .envelope-flap{transform:rotateX(180deg);z-index:0}.envelope-wrap.open .paper-peek{transform:translateY(-85px)}.envelope-wrap.open .seal{opacity:0}.letter-scene{max-width:740px}.letter{position:relative;text-align:left;background:#fffdf9ed;border:1px solid #fff;padding:clamp(26px,6vw,55px);border-radius:7px;box-shadow:0 20px 70px #af7a9d30;margin:12px 0 26px;transform:rotate(-.5deg)}.letter:before{content:'♡';position:absolute;top:22px;right:28px;color:#d9a4bc;font-size:28px}.letter-date{font-size:12px;color:#aa7b92;margin-bottom:18px}.letter h2{font-size:clamp(26px,5vw,38px)}.letter p{font-size:14px;line-height:2;max-width:none;color:#765b6a;margin-bottom:17px}.letter-lines p{opacity:0;transform:translateY(12px);transition:opacity .7s,transform .7s}.letter-lines p.revealed{opacity:1;transform:translateY(0)}.signature{margin-top:28px;text-align:right;font-family:Georgia,serif;font-style:italic;line-height:1.8;color:var(--deep)}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:35px 0}.polaroid{min-width:0;border:0;background:#fff;padding:10px 10px 17px;box-shadow:0 12px 24px #a5749940;transform:rotate(-4deg);transition:transform .3s}.polaroid:nth-child(2){transform:rotate(3deg) translateY(12px)}.polaroid:nth-child(3){transform:rotate(-2deg)}.polaroid:hover,.polaroid:focus-visible{transform:rotate(0) translateY(-7px)}.photo-frame{display:block;width:100%;aspect-ratio:4/5;background:#f4d6e5;overflow:hidden}.photo-frame img{width:100%;height:100%;object-fit:cover}.photo-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:45px;color:#bf7da0}.photo-placeholder[hidden]{display:none}.photo-placeholder small{font-size:10px;margin-top:10px;color:#a87894}.polaroid-label{display:block;font-family:Georgia,serif;font-style:italic;font-size:clamp(10px,2vw,14px);margin-top:12px;color:#986f85}.photo-message{min-height:50px;font-size:13px;color:var(--deep);margin-bottom:20px}.big-heart{font-size:clamp(115px,30vw,180px);line-height:1.2;color:#d56f9c;text-shadow:0 0 20px #ffa5cb,0 0 75px #ed90c3;animation:beat 1.8s ease-in-out infinite}@keyframes beat{50%{transform:scale(1.09)}}.final p{max-width:520px}.promise{font-family:Georgia,serif;font-style:italic;color:#a26788;background:#ffffff8a;border:1px solid #ffffffaa;border-radius:15px;padding:19px 22px;max-width:480px;margin:26px auto}.secondary{display:block;margin:20px auto 0;border:0;background:transparent;color:#a56b8d;text-decoration:underline;text-underline-offset:5px}footer{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:17px 24px calc(17px + env(safe-area-inset-bottom));color:#9c7b91;font-size:10px;letter-spacing:.1em;pointer-events:none}.dots{display:flex;gap:7px}.dots i{display:block;width:5px;height:5px;border-radius:50%;background:#d9b6c9}.dots i.current{background:#ae5c86;transform:scale(1.5)}.floating-heart{position:fixed;z-index:20;bottom:-30px;pointer-events:none;animation:rise var(--duration,4s) linear forwards;color:#c86695;text-shadow:0 0 12px #fff}@keyframes rise{to{transform:translate(var(--drift,0px),-110vh) rotate(35deg);opacity:0}}@media(max-width:560px){.scene{padding:90px 19px 82px}.photo-grid{gap:8px}.polaroid{padding:6px 6px 11px}.photo-message{font-size:12px}.letter p{font-size:13px}.topbar{padding:16px 18px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}