@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root{--ink:#55445c;--muted:#88778e;--pink:#e9a9c9;--deep:#b96d9c;--lav:#d8c9ee;--cream:#fffafc;--line:rgba(255,255,255,.72);--shadow:0 18px 55px rgba(139,94,137,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);font-family:'DM Sans',sans-serif;background:linear-gradient(135deg,#fff4f8 0%,#f4efff 48%,#fff6ec 100%);overflow-x:hidden}
button{font:inherit;cursor:pointer}.ambient{position:fixed;border-radius:50%;filter:blur(2px);opacity:.55;pointer-events:none;z-index:-1}.ambient-one{width:330px;height:330px;background:#f7cde0;top:-100px;left:-120px}.ambient-two{width:390px;height:390px;background:#ded3f6;right:-160px;bottom:4%;}.sparkle-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}.sparkle{position:absolute;animation:drift linear forwards;opacity:.8}
.screen{width:100%;min-height:100vh}.hidden{display:none!important}.glass{background:rgba(255,255,255,.66);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.gate-screen{display:grid;place-items:center;padding:24px}.gate-card{width:min(100%,440px);padding:34px 28px 28px;border-radius:32px;text-align:center;position:relative;overflow:hidden}.gate-card:before,.hero:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(245,202,224,.35);top:-130px;right:-90px}.tiny-label{font-size:10px;letter-spacing:2.4px;color:#a58ca7}.bunny{font-size:72px;margin:18px 0 4px;animation:bob 3s ease-in-out infinite}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.6px;color:#b47fa7;margin:0 0 12px}.gate-card h1,.hero h1{font-family:'Playfair Display',serif;font-size:clamp(35px,8vw,48px);line-height:1.12;margin:8px 0 12px;font-weight:600}.gate-card h1 em,.hero h1 em,h2 em{color:#bd79a5;font-weight:500}.muted{color:var(--muted);line-height:1.7;font-size:14px}.pin-title{font-size:12px;font-weight:700;margin:26px 0 10px}.pin-dots{font-size:25px;letter-spacing:9px;color:#c27fa5;min-height:34px}.keypad{display:grid;grid-template-columns:repeat(3,58px);gap:10px;justify-content:center;margin:17px auto 8px}.keypad button{height:54px;width:58px;border:1px solid #f3d9e8;border-radius:18px;background:rgba(255,255,255,.82);color:#9b658d;font-size:19px;box-shadow:0 5px 12px rgba(180,120,160,.08);transition:.2s}.keypad button:active{transform:scale(.92)}.keypad .heart-key{background:#d994b9;color:white}.keypad .soft-key{background:#f5eafa}.error{height:18px;font-size:12px;color:#bd557c;margin:5px}.text-button{border:0;background:none;color:#ad6d98;font-weight:700;padding:10px}.text-button span{font-size:19px}.hint,.small-note{font-size:11px;color:#a493a7;line-height:1.6}.topbar{max-width:1000px;margin:auto;padding:24px 24px 14px;display:flex;justify-content:space-between;align-items:center}.brand{font-family:'Playfair Display',serif;font-size:20px}.brand span{color:#c58bb3}.music-button{border:1px solid #ead6e9;background:rgba(255,255,255,.65);color:#966b91;border-radius:30px;padding:10px 15px;font-size:12px}.music-button span{margin-left:5px}.celebration{padding:0 20px 45px}.hero{max-width:850px;margin:12px auto 28px;border-radius:34px;text-align:center;padding:48px 24px 38px;position:relative;overflow:hidden}.hero-sparkle{color:#c18ab0;letter-spacing:8px;margin-bottom:20px}.hero h1{font-size:clamp(46px,9vw,76px);margin:0}.hero-copy{max-width:430px;margin:15px auto;color:var(--muted);line-height:1.8}.hero-art{height:125px;position:relative;max-width:440px;margin:5px auto 12px;color:#c18bb0}.moon{font-size:75px;position:absolute;left:43%;top:8px;color:#e7b5d0}.cloud{position:absolute;font-size:52px;color:#d5c6ed}.cloud-a{left:8%;top:28px}.cloud-b{right:7%;top:50px}.star{position:absolute;font-size:28px}.star-a{left:27%;top:10px}.star-b{right:28%;top:20px}.flower{position:absolute;left:48%;bottom:0;font-size:35px}.primary-button{border:0;border-radius:30px;padding:14px 23px;background:linear-gradient(110deg,#d58eb4,#bda4dc);color:white;font-weight:700;box-shadow:0 9px 20px rgba(186,130,175,.25)}.primary-button span{margin-left:12px}.countdown-section{max-width:740px;margin:0 auto 70px;padding:28px 20px;border-radius:28px;text-align:center}.countdown-section h2,.section-heading h2,.gift-section h2,.letter-section h2,footer h2{font-family:'Playfair Display',serif;font-size:clamp(25px,5vw,36px);font-weight:500;margin:5px 0 8px}.countdown-grid{display:flex;justify-content:center;gap:12px;margin:24px 0 12px;flex-wrap:wrap}.countdown-grid div{min-width:76px;padding:13px 10px;background:rgba(255,255,255,.75);border:1px solid white;border-radius:17px}.countdown-grid strong{display:block;font-family:'Playfair Display',serif;font-size:29px;color:#b678a1}.countdown-grid span{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#9b8a9e}.section-heading{text-align:center;margin:0 auto 24px}.section-heading .muted{margin-top:8px}.memory-grid{max-width:850px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:190px 190px;gap:16px}.memory-card{margin:0;position:relative;border-radius:23px;overflow:hidden;background:#f5e5f0;box-shadow:var(--shadow);min-height:0}.memory-card:first-child{grid-row:span 2}.memory-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.memory-card:hover img{transform:scale(1.04)}.memory-card figcaption{position:absolute;bottom:0;left:0;right:0;padding:35px 17px 15px;color:white;text-align:left;background:linear-gradient(transparent,rgba(63,39,61,.62))}.memory-card figcaption b,.memory-card figcaption span{display:block}.memory-card figcaption b{font-family:'Playfair Display',serif;font-size:19px}.memory-card figcaption span{font-size:11px;margin-top:3px}.memories-section>.small-note{text-align:center;margin:15px auto 65px}.gift-section,.letter-section{max-width:740px;margin:0 auto 65px;border-radius:30px;padding:35px 24px;text-align:center}.gift-box{width:132px;height:126px;border:0;background:none;position:relative;margin:22px auto 4px;display:block;transition:transform .3s}.gift-box:hover{transform:translateY(-5px) rotate(-3deg)}.gift-base{position:absolute;width:104px;height:72px;left:14px;bottom:0;background:linear-gradient(135deg,#e9a9c9,#c69bda);border-radius:8px 8px 15px 15px;box-shadow:0 12px 20px rgba(181,126,175,.2)}.gift-lid{position:absolute;width:116px;height:24px;left:8px;bottom:65px;background:#f2c2d9;border-radius:7px;z-index:2}.gift-ribbon{position:absolute;width:18px;height:91px;left:57px;bottom:0;background:#fff0f5;z-index:3}.gift-bow{position:absolute;z-index:4;top:0;left:50px;font-size:34px;color:#b76d9a}.gift-hint{font-size:12px;color:#a18ba3}.gift-message{max-width:440px;margin:18px auto 0;padding:20px;border-radius:20px;background:#fff8fc;animation:appear .5s ease}.gift-message>span{font-size:28px}.gift-message h3{font-family:'Playfair Display',serif;font-size:23px;margin:8px}.gift-message p{font-size:13px;line-height:1.8;color:var(--muted)}.letter-section{position:relative}.letter-stamp{height:45px;width:45px;display:grid;place-items:center;border-radius:50%;background:#f3dce9;color:#b978a1;font-size:23px;margin:0 auto 20px}.letter-paper{max-width:560px;margin:22px auto 0;padding:26px 28px;background:rgba(255,251,249,.9);border-radius:5px 22px 22px 22px;text-align:left;box-shadow:0 7px 24px rgba(160,125,145,.08);border-left:3px solid #e8bfd6}.letter-paper p{font-family:'Playfair Display',serif;font-size:15px;line-height:1.9;color:#78647b}.letter-paper .signature{color:#b4779c;font-style:italic;margin-top:22px}footer{text-align:center;padding:10px 20px 35px}.footer-hearts{font-size:23px;color:#c58bb3}footer h2{font-size:30px}footer p{color:var(--muted);font-size:13px}.back-to-top{border:0;background:none;color:#ae7da6;text-decoration:underline;margin-top:12px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:#715a78;color:white;padding:11px 17px;border-radius:30px;font-size:12px;opacity:0;transition:.3s;z-index:20;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes bob{50%{transform:translateY(-9px) rotate(3deg)}}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{to{transform:translateY(110vh) rotate(360deg);opacity:0}}
@media(max-width:600px){.gate-card{padding:28px 17px 22px}.celebration{padding:0 13px 35px}.topbar{padding:18px 5px 10px}.hero{padding:38px 17px 30px;border-radius:26px}.memory-grid{grid-template-columns:1fr 1fr;grid-template-rows:190px 150px}.memory-card:first-child{grid-row:span 2}.memory-card figcaption{padding:28px 10px 11px}.memory-card figcaption b{font-size:16px}.memory-card figcaption span{font-size:10px}.gift-section,.letter-section{padding:30px 17px}.letter-paper{padding:20px 18px}.countdown-grid{gap:7px}.countdown-grid div{min-width:68px}.music-button{padding:9px 11px}}
/* FULL SCREEN PHOTO VIEWER */

.photo-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(25, 15, 30, 0.92);
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.photo-lightbox.active {
    display: flex;
}

.photo-lightbox img {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 0 35px rgba(255,255,255,0.2);
    animation: zoomPhoto 0.35s ease;
}

.close-photo {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    color: white;
    font-size: 45px;
    cursor: pointer;
}

@keyframes zoomPhoto {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}