:root{--ink:#623743;--rose:#b34d66;--muted:#986f77;--paper:#fffaf6}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#f8eee9;color:var(--ink);font-family:Georgia,'Times New Roman',serif;background-image:radial-gradient(ellipse at 50% 50%,#fffaf5 0%,#f8eee9 60%,#eedcda 100%)}main{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:34px 24px 24px;text-align:center}header,footer,.eyebrow{font-family:Arial,sans-serif;font-size:10px;letter-spacing:3px;font-weight:500}header{color:var(--muted);display:flex;align-items:center;gap:14px}.tiny-heart{font-size:24px;line-height:1}.intro{width:100%;max-width:640px;margin:auto;padding:55px 0 45px}.eyebrow{color:var(--rose);font-size:9px;letter-spacing:3px}h1{font-size:clamp(64px,11vw,100px);font-weight:400;letter-spacing:-5px;margin:15px 0 13px;line-height:1.05}h1 span{color:var(--rose)}.subtitle{font-size:17px;color:var(--muted);font-style:italic;line-height:1.6}.surprise{height:260px;width:300px;margin:10px auto 0;position:relative;display:grid;place-items:center}.halo{position:absolute;width:235px;height:235px;border-radius:50%;background:radial-gradient(circle,#e9c7c578,transparent 70%)}.gift{width:170px;height:175px;background:none;border:0;cursor:pointer;position:relative;z-index:2;animation:jump 2.3s ease-in-out infinite;transition:filter .2s;padding:0}.gift:hover{filter:brightness(1.06)}.gift:focus-visible,button:focus-visible{outline:3px solid #a64864;outline-offset:8px}.gift-art{display:block;position:relative;width:170px;height:175px}.box{position:absolute;left:12px;bottom:0;width:146px;height:120px;background:linear-gradient(115deg,#d98596,#be5c75);border-radius:3px 3px 8px 8px;box-shadow:inset -12px 0 20px #7f28401a,0 12px 25px #76324720}.ribbon{position:absolute;bottom:0;height:120px;width:26px;left:72px;background:linear-gradient(90deg,#ebbaab,#ffe1c8,#e6b09f)}.lid{position:absolute;left:3px;top:44px;width:164px;height:27px;background:linear-gradient(110deg,#e69dab,#cd7389);border-radius:4px;box-shadow:0 5px 5px #74314422;z-index:3}.lid:after{content:'';position:absolute;left:69px;top:0;width:26px;height:27px;background:linear-gradient(90deg,#ebbaab,#ffe1c8,#e6b09f)}.bow{position:absolute;width:53px;height:38px;top:-34px;border:10px solid #f0c5b3;box-shadow:inset 0 0 3px #a5695c33}.bow.left{right:80px;transform:rotate(20deg);border-radius:70% 70% 0 70%}.bow.right{left:80px;transform:rotate(-20deg);border-radius:70% 70% 70% 0}.tag{position:absolute;right:23px;bottom:41px;background:#fff2dd;color:#ad6071;width:31px;height:39px;display:grid;place-items:center;transform:rotate(-14deg);box-shadow:0 2px 6px #6c293322;font-size:25px;z-index:4}.gift-shadow{position:absolute;width:125px;height:15px;bottom:15px;background:#8c4c5425;border-radius:50%;filter:blur(4px);animation:shadow 2.3s ease-in-out infinite}.spark{position:absolute;color:#b98564;animation:twinkle 3s infinite;font-size:26px}.s1{top:45px;left:35px}.s2{right:22px;top:100px;font-size:18px;animation-delay:.8s}.s3{bottom:40px;left:18px;animation-delay:1.5s}.hint{font-style:italic;color:var(--muted);font-size:15px;margin:18px 0}.open-button{border:1px solid #ad6573;background:var(--rose);color:#fff7ef;padding:16px 27px;border-radius:40px;font-family:Arial,sans-serif;font-size:12px;letter-spacing:.6px;cursor:pointer;box-shadow:0 5px 14px #9f516421;transition:transform .2s,background .2s}.open-button:hover{transform:translateY(-3px);background:#9e4058}.open-button span{margin-left:15px}footer{font-size:8px;letter-spacing:2px;color:var(--muted);display:flex;gap:12px;align-items:center}footer span{font-size:17px}.letter{position:relative;max-width:455px;margin:33px auto 0;padding:27px 24px 24px;background:var(--paper);border:1px solid #e5c8c6;border-radius:120px 120px 12px 12px;box-shadow:0 16px 60px #854a5910;animation:reveal .9s both}.letter-heart{display:block;color:var(--rose);font-size:25px;margin:4px 0 20px}.letter .eyebrow{font-size:8px;letter-spacing:2px}h2{font-weight:400;line-height:1.06;font-size:clamp(46px,8vw,64px);letter-spacing:-2px;margin:18px 0}h2 em{font-weight:400;color:var(--rose)}.letter-name{font-size:20px;font-style:italic;margin:17px 0}.divider{width:45px;height:1px;background:#d7b6b2;margin:20px auto}.letter-copy{color:var(--muted);font-size:15px;line-height:1.8}.signature{font-style:italic;font-size:17px}.again{background:none;border:0;border-bottom:1px solid #d2a6ac;padding:7px 0;color:var(--rose);font-size:11px;cursor:pointer;margin-top:6px}.again span{margin-left:8px}.opening .gift{animation:unwrap .7s both}.opening .lid{animation:lid .7s both}.opening .gift-shadow{opacity:0}.revealed .surprise,.revealed #hint,.revealed #open{display:none}.revealed .intro{padding-top:30px}.revealed h1{font-size:64px}.revealed .subtitle{font-size:15px}.petals{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}.petal{position:absolute;top:-50px;width:13px;height:20px;border-radius:90% 0 85% 20%;background:linear-gradient(135deg,#f1bec6bb,#d8829799);animation:fall linear infinite;opacity:0}#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}@keyframes jump{0%,100%{transform:translateY(0) rotate(-3deg)}45%{transform:translateY(-18px) rotate(3deg)}60%{transform:translateY(-18px) rotate(0)}}@keyframes shadow{0%,100%{transform:scaleX(1);opacity:.8}50%{transform:scaleX(.75);opacity:.4}}@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}@keyframes fall{0%{opacity:0;transform:translate3d(0,-30px,0) rotate(0)}10%{opacity:.65}90%{opacity:.5}100%{opacity:0;transform:translate3d(110px,110vh,0) rotate(540deg)}}@keyframes unwrap{40%{transform:scale(1.1) rotate(-5deg)}100%{transform:scale(.5) translateY(35px);opacity:0}}@keyframes lid{100%{transform:translateY(-100px) rotate(-25deg);opacity:0}}@keyframes reveal{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}@media(max-width:480px){main{padding:24px 18px 20px}header{font-size:8px;letter-spacing:2px;gap:8px}.intro{padding:40px 0}.subtitle{font-size:15px}h1{letter-spacing:-3px}.surprise{height:240px}.letter{padding:24px 16px}.revealed .intro{padding-top:25px}.revealed h1{font-size:54px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.petals{display:none}.gift{transform:none}}