:root{--color-cream:#fdfbf7;--color-white:#fff;--color-dark:#1a1a1a;--color-gray:#888;--font-sans:"Outfit", sans-serif;--font-serif:"Playfair Display", serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-cream);color:var(--color-dark);font-family:var(--font-sans);overflow-x:hidden}.bg-collage-container{z-index:-1;background-color:var(--color-cream);pointer-events:auto;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));align-content:start;gap:0;width:130vw;height:300vh;padding:0;display:grid;position:absolute;top:-15%;left:-15%;overflow:hidden;transform:rotate(6deg)scale(1.1)}.bg-collage-container:after{content:"";background:radial-gradient(circle at center, transparent 40%, var(--color-cream) 100%);pointer-events:none;z-index:5;position:absolute;inset:0}.bg-photo{aspect-ratio:3/4;object-fit:cover;filter:grayscale()contrast(1.1)brightness(.9);opacity:.18;cursor:pointer;border:1px solid #1a1a1a66;width:100%;transition:all .7s cubic-bezier(.25,1,.5,1)}.bg-photo:hover,.bg-photo:active{z-index:10;filter:grayscale(0%)contrast(1.05)brightness();opacity:1;border:3px solid #fff;border-radius:6px;position:relative;box-shadow:0 25px 50px #0006;transform:scale(1.08)rotate(1.5deg)!important}.main-content{text-align:center;z-index:10;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex;position:relative}.hero-section{z-index:10;justify-content:center;align-items:center;min-height:100vh;padding-top:5vh;display:flex;position:relative}.envelope-wrapper{perspective:1200px;width:90vw;max-width:500px;margin:0 auto;position:relative}.envelope-back{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:1;background:#fff3;border:1px solid #fff6;border-radius:12px;transition:all .8s cubic-bezier(.25,1,.5,1);position:absolute;inset:0;box-shadow:0 20px 50px #0000001a}.envelope-front{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:4;background:linear-gradient(#fff6 0%,#ffffffb3 100%);border:1px solid #ffffff80;border-top-color:#ffffffe6;border-radius:0 0 12px 12px;height:75%;transition:all .8s cubic-bezier(.25,1,.5,1);position:absolute;bottom:0;left:0;right:0;box-shadow:0 -10px 20px #00000008}.birthday-title{font-family:var(--font-serif);color:var(--color-dark);text-align:center;opacity:1;text-shadow:0 5px 15px #fffc;margin-bottom:2rem;padding:0 1rem;font-size:clamp(2rem,8vw,3rem);transition:all .8s;transform:translateY(0)}.pull-hint{font-size:clamp(.7rem,3vw,.9rem);font-family:var(--font-sans);color:#b34f4f;pointer-events:none;font-weight:600;animation:2s ease-in-out infinite pulse;position:absolute;top:10px;left:50%;transform:translate(-50%)}@keyframes pulse{0%,to{opacity:.5;transform:translate(-50%)translateY(0)}50%{opacity:1;transform:translate(-50%)translateY(-3px)}}.letter{z-index:2;text-align:center;background:#fff;border:1px solid #0000000d;border-radius:4px;height:clamp(260px,70vw,350px);max-height:clamp(260px,70vw,350px);margin:10px 5% 15px;padding:45px clamp(15px,5vw,30px) 20px;transition:max-height 1.2s cubic-bezier(.25,1,.5,1),transform .8s,height 1.2s;position:relative;overflow:hidden;transform:translateY(-15px);box-shadow:0 -5px 25px #0000001a}.envelope-wrapper.open .letter{z-index:6;height:auto;max-height:3000px;transform:translateY(0)}.envelope-wrapper.open .envelope-front,.envelope-wrapper.open .envelope-back{opacity:0;pointer-events:none;transform:translateY(80px)}.note-text{font-family:var(--font-serif);color:var(--color-dark);white-space:pre-wrap;font-size:clamp(1.2rem,4vw,1.5rem);line-height:1.6;position:relative}.inline-gift-section{border-top:1px dashed #0000001a;flex-direction:column;align-items:center;margin-top:3rem;margin-bottom:1rem;padding-top:2rem;display:flex}.gift-button{background:var(--color-dark);color:var(--color-white);font-family:var(--font-sans);cursor:pointer;border:none;border-radius:50px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;transition:all .3s;box-shadow:0 5px 15px #0000001a}.gift-button:hover{background:#333;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.gift-reveal{flex-direction:column;align-items:center;animation:.8s forwards floatUp;display:flex}@keyframes floatUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.gift-image{border-radius:8px;max-width:100%;margin-bottom:1rem;box-shadow:0 10px 25px #0000001a}.gift-title{font-family:var(--font-serif);color:var(--color-dark);font-size:1.6rem;font-style:italic}.admin-container{background:var(--color-white);border-radius:20px;max-width:800px;margin:4rem auto;padding:3rem;box-shadow:0 10px 30px #0000000d}.admin-title{font-family:var(--font-serif);text-align:center;margin-bottom:2rem;font-size:2.5rem}.admin-form-group{text-align:left;margin-bottom:1.5rem}.admin-label{color:var(--color-gray);margin-bottom:.5rem;font-weight:600;display:block}.admin-input,.admin-textarea{width:100%;font-family:var(--font-sans);border:1px solid #e0e0e0;border-radius:8px;padding:1rem;font-size:1rem;transition:border-color .3s}.admin-input:focus,.admin-textarea:focus{border-color:var(--color-dark);outline:none}.admin-textarea{resize:vertical;min-height:150px}.admin-button{background:var(--color-dark);color:var(--color-white);font-family:var(--font-sans);cursor:pointer;border:none;border-radius:8px;width:100%;padding:1rem 2rem;font-size:1.1rem;font-weight:600;transition:background .3s}.admin-button:hover{background:#333}@media (max-width:500px){.hero-section{padding-top:0}.birthday-title{margin-bottom:1rem;padding:0 1rem;font-size:2rem}.bg-collage-container{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.admin-container{margin:2rem 1rem;padding:1.5rem}.admin-title{font-size:1.8rem}}