.overlay,body{display:flex;justify-content:center}:root{--bg-gradient:linear-gradient(135deg, #831843 0%, #be185d 40%, #831843 70%, #4c1d95 100%);--font-handwritten:'Great Vibes',cursive;--font-sans:'Montserrat',sans-serif;--gold:#f43f5e;--gold-glow:rgba(244, 63, 94, 0.4);--glass-bg:rgba(255, 255, 255, 0.12);--glass-border:rgba(255, 255, 255, 0.25)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-gradient);min-height:100vh;overflow-x:hidden;overflow-y:auto;align-items:flex-start;color:#fff}.overlay{position:fixed;inset:0;background:#500724;align-items:center;z-index:100;transition:opacity .8s,transform .8s;padding:1rem}.overlay.fade-out{opacity:0;pointer-events:none;transform:scale(1.05)}#main-content.fade-in,.memory-photo.is-visible{opacity:1;transform:translateY(0)}.welcome-box{text-align:center;padding:5rem 2.5rem;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.3)}.welcome-box h2{font-size:1.8rem;margin-bottom:.5rem;font-weight:300;color:#fff}.welcome-box p{color:#fbcfe8;margin-bottom:2rem;font-weight:300}#main-content{opacity:0;transform:translateY(20px);transition:opacity 1.5s ease-out,transform 1.5s ease-out;width:min(92%,720px);margin:25vh auto 5rem;z-index:10}.images{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:92px;gap:.65rem;width:min(100%,720px);margin-top:15rem;margin-right:auto;margin-left:auto}.memory-photo{display:block;position:relative;overflow:hidden;min-width:0;border:2px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(255,255,255,.12);box-shadow:0 8px 18px rgba(28,5,31,.25);cursor:zoom-in;opacity:0;transform:translateY(24px);transition:transform .25s,box-shadow .25s}.memory-photo.is-visible{transition:opacity .7s,transform .7s,box-shadow .25s}.memory-photo:focus-visible,.memory-photo:hover{z-index:1;transform:translateY(-4px) rotate(1deg);box-shadow:0 14px 24px rgba(28,5,31,.35);outline:0}.memory-photo:first-child{grid-column:span 2;grid-row:span 2}.memory-photo:nth-child(6n+2),.memory-photo:nth-child(6n+5){grid-row:span 2}.memory-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s}.memory-photo:focus-visible img,.memory-photo:hover img{transform:scale(1.08)}.photo-viewer{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.5rem;background:rgba(20,3,23,.86);cursor:zoom-out}.photo-viewer[hidden]{display:none}.photo-viewer img{max-width:min(920px,92vw);max-height:88vh;border:3px solid rgba(255,255,255,.85);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.55);object-fit:contain}.photo-viewer__button{position:absolute;top:50%;display:grid;place-items:center;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(112,26,117,.78);color:#fff;font-size:2rem;line-height:1;cursor:pointer;transform:translateY(-50%);transition:background .2s,transform .2s}.photo-viewer__button:focus-visible,.photo-viewer__button:hover{background:#be185d;outline:0;transform:translateY(-50%) scale(1.08)}.photo-viewer__button--previous{left:max(1rem,calc(50% - 470px))}.photo-viewer__button--next{right:max(1rem,calc(50% - 470px))}@media (max-width:560px){#main-content{margin-top:13vh}.images{grid-auto-rows:72px;gap:.45rem}.photo-viewer{padding:1rem 3.75rem}.photo-viewer__button{width:2.6rem;height:2.6rem}.photo-viewer__button--previous{left:.65rem}.photo-viewer__button--next{right:.65rem}.memory-photo{border-radius:10px}}.hidden{display:none!important}.card-container{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:24px;padding:3rem 2rem;text-align:center;box-shadow:0 25px 50px -12px rgba(0,0,0,.4),0 0 40px var(--gold-glow);position:relative}.balloon,.balloon::after,.btn-audio{position:absolute}.title-main{font-family:var(--font-handwritten);font-size:clamp(3rem, 5.3vw, 4.5rem);color:#fff1f2;text-shadow:0 2px 10px rgba(244,63,94,.5);line-height:1;margin-bottom:.5rem}.title-name{font-size:clamp(2rem, 5vw, 2.5rem);letter-spacing:4px;text-transform:uppercase;font-weight:600;color:#fff;margin-bottom:1.5rem;background:linear-gradient(to right,#fff,#fbcfe8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.message,.message-cm{font-size:1rem;line-height:1.6;font-weight:300}.message{color:#fce7f3}.message-cm{margin-top:1rem}.message-cm.sign{margin-top:.5rem;text-align:right;font-size:.8rem;color:#fbcfe8}.btn-primary{background:linear-gradient(135deg,#ec4899 0,#db2777 50%,#7e22ce 100%);color:#fff;border:none;padding:.8rem 2rem;font-size:1rem;font-family:var(--font-sans);font-weight:600;border-radius:50px;cursor:pointer;box-shadow:0 4px 15px rgba(219,39,119,.4);transition:transform .2s,box-shadow .2s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(219,39,119,.6)}.btn-audio{bottom:-20px;left:50%;transform:translateX(-50%);background:#701a75;border:1px solid var(--glass-border);width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 10px rgba(0,0,0,.3);transition:background .3s}.btn-audio:hover{background:#831843}.icon-audio{font-size:1.2rem}#balloon-container{position:fixed;inset:0;pointer-events:none;z-index:5}.balloon{bottom:-150px;width:60px;height:75px;border-radius:50%/40% 40% 60% 60%;cursor:pointer;pointer-events:auto;animation:10s linear infinite floatUp}.balloon::after{content:"";bottom:-12px;left:29px;width:2px;height:12px;background-color:rgba(255,255,255,.5)}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:0}10%,90%{opacity:1}100%{transform:translateY(-120vh) rotate(10deg);opacity:0}}