@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fbf0ed;color:#4d3438;font-family:Cairo,sans-serif}button,input{font:inherit}.screen{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 25%,#fff9f7,#ead9d3);padding:20px}.envelope-wrap{text-align:center;width:min(380px,90vw)}.envelope{height:220px;background:#d9c1a6;position:relative;margin-bottom:28px;box-shadow:0 20px 55px #76564a33}.envelope:after{content:"";position:absolute;inset:0;background:linear-gradient(35deg,transparent 49%,#f4e6dc 50% 53%,transparent 54%),linear-gradient(-35deg,transparent 49%,#f4e6dc 50% 53%,transparent 54%)}.seal{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#9e3f45;color:#fff;display:grid;place-items:center}.letter-tag{position:absolute;z-index:3;top:22px;right:22px;background:#fffaf7;padding:8px 13px;font:11px "Playfair Display";transform:rotate(2deg)}.letter-tag b{font-size:14px}.lock-icon{font-size:24px;color:#a76a72}.screen small{display:block;letter-spacing:.18em;font-size:9px;color:#a58a8d;margin:8px}.screen input{width:100%;border:1px solid #e2ceca;background:#fffaf8;border-radius:30px;padding:12px;text-align:center;outline:none}.screen button{margin-top:12px;border:0;background:#a84952;color:#fff;border-radius:30px;padding:11px 35px;cursor:pointer}.screen #wrong{color:#a84952;font-size:11px;height:18px}.hidden{display:none!important}main{overflow:hidden}.opening{min-height:100vh;display:grid;place-items:center;background:linear-gradient(#fdf5f2,#f4e3df);position:relative}.flowers{font-size:78px;line-height:1.05;text-align:center;filter:drop-shadow(0 15px 30px #a95f7033);animation:bloom 2s ease}.music{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:min(420px,88vw);background:#fff8f5e8;border:1px solid #ead4d0;border-radius:18px;padding:10px 14px;display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px);box-shadow:0 10px 30px #76564a15}.music span{font-size:22px}.music div{flex:1;text-align:right}.music b,.music small{display:block}.music small{font-size:9px;color:#a68e92}.music button{border:0;background:#e8b4bc;border-radius:50%;width:38px;height:38px;color:#fff;cursor:pointer}.page{min-height:100vh;padding:110px 8vw;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.tiny{font-size:10px;letter-spacing:.2em;color:#bd777f}.message{background:linear-gradient(180deg,#fdf5f2,#f6e6e1)}.page h1,.page h2{font-family:"Playfair Display",serif;font-weight:600}.message h1,.final h1{font-size:clamp(45px,8vw,82px);line-height:1.05;margin:20px 0}.page em{color:#b65f6c}.message p{max-width:650px;color:#8f777c;line-height:2;font-size:14px}.next,.memories-btn{margin-top:25px;border:1px solid #d7a4aa;background:#fff8f6;color:#8f4d57;border-radius:30px;padding:10px 25px;cursor:pointer}.together{background:#f1dedb}.together h2{font-size:clamp(50px,8vw,90px);margin:12px}.counter{display:grid;grid-template-columns:repeat(4,100px);gap:12px;margin:30px 0}.counter div{background:#fff8f6;border:1px solid #e6ccca;border-radius:14px;padding:17px 8px}.counter b{font:32px "Playfair Display";display:block;color:#9b5660}.counter small{font-size:9px;color:#a18b8e}.together p,.date{color:#927c80}.date{margin-top:10px}.memories{background:#fbefec}.memories h2{font-size:clamp(45px,7vw,78px);margin:10px}.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(1000px,95vw);margin-top:35px}.photos figure{height:390px;margin:0;background:#fff;border:9px solid #fff;box-shadow:0 15px 30px #68474d18;position:relative;overflow:hidden}.photos img{width:100%;height:100%;object-fit:cover}.photos figure:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,#0007);z-index:1}.photos figure span{position:absolute;z-index:2;top:12px;right:12px;color:#fff;font-size:24px}.photos figcaption{position:absolute;z-index:2;bottom:12px;right:15px;color:#fff;font-size:11px}.note{background:#f0ded9}.hearts{color:#a95c68;letter-spacing:15px;margin-bottom:20px}.note-card{background:#fff9f6;max-width:680px;padding:60px 8%;box-shadow:0 20px 60px #68474d22;border:1px solid #e7ceca}.note-card h2{font-size:45px;margin:0 0 20px}.note-card p{color:#8f777c;line-height:2}.note-card div{color:#a95c68;font-family:"Playfair Display";font-style:italic;margin-top:25px}.final{background:radial-gradient(circle,#ead0d3,#f9ece9 55%,#fdf5f2)}.final p{color:#927c80;max-width:600px;line-height:2}.heart-big{font-size:70px;color:#b64e5b;margin:25px;animation:pulse 1.6s infinite}.final strong{color:#9b4d58;font:24px "Playfair Display"}@keyframes bloom{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes pulse{50%{transform:scale(1.15);text-shadow:0 0 30px #c86673}}@media(max-width:700px){.counter{grid-template-columns:repeat(2,100px)}.photos{grid-template-columns:1fr 1fr}.photos figure{height:300px}.page{padding:100px 5vw}.flowers{font-size:58px}}