html,body,#root{width:100%;height:100%;overflow:hidden;background:#06000f}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}.app{position:relative;width:100vw;height:100dvh;overflow:hidden}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:1rem;pointer-events:none}.overlay.scrollable{align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.5rem 1rem}.card-float{pointer-events:auto;animation:float 7s ease-in-out 2.8s infinite;margin:auto}@property --border-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.card{position:relative;text-align:center;color:#fff5f7;padding:clamp(1.8rem,5vw,3.2rem) clamp(1.8rem,6vw,4.5rem);width:min(490px,90vw);border-radius:4px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1.5px solid transparent;background-image:linear-gradient(#04000e85,#04000e85),conic-gradient(from var(--border-angle),rgba(255,55,115,0) 0deg,rgba(255,75,135,.75) 55deg,rgba(210,80,230,.9) 115deg,rgba(255,55,115,0) 170deg,rgba(255,55,115,0) 210deg,rgba(190,65,245,.6) 265deg,rgba(255,55,115,0) 320deg,rgba(255,75,135,.6) 360deg);background-origin:padding-box,border-box;background-clip:padding-box,border-box;box-shadow:0 0 50px #c82d5f38,0 0 100px #96194b1f,inset 0 0 30px #c82d5f0a;animation:borderSpin 7s linear infinite,cardGlow 4.5s ease-in-out infinite alternate}@keyframes borderSpin{to{--border-angle: 360deg}}@keyframes cardGlow{0%{box-shadow:0 0 45px #c82d5f2e,0 0 90px #96194b1a}to{box-shadow:0 0 65px #dc3c7361,0 0 130px #b4235f33,0 0 200px #8c195014}}.fi{opacity:0;animation:fadeUp 1.3s ease var(--d, .4s) forwards}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-11px)}}.ornament{font-family:Montserrat,sans-serif;font-weight:200;font-size:clamp(.52rem,1.7vw,.68rem);letter-spacing:.3em;color:#ff94af61;margin-bottom:clamp(.9rem,2.5vw,1.5rem)}.ornament:last-child{margin-bottom:0;margin-top:clamp(.9rem,2.5vw,1.5rem)}.date{font-family:Montserrat,sans-serif;font-weight:200;font-size:clamp(.53rem,1.4vw,.64rem);letter-spacing:.5em;color:#ffb9c894;text-transform:uppercase;margin-bottom:clamp(.7rem,2vw,1.2rem)}.subtitle{font-family:Cormorant Garamond,serif;font-weight:300;font-style:italic;font-size:clamp(.78rem,2.2vw,.95rem);letter-spacing:.22em;color:#ffd2dea6;margin-bottom:.3rem}.name{font-family:Cormorant Garamond,serif;font-weight:300;font-style:italic;font-size:clamp(2.4rem,9vw,4.2rem);line-height:1.05;color:#fff5f8;margin-bottom:clamp(1rem,3vw,1.8rem);animation:nameGlow 3.5s ease-in-out infinite alternate}.letter{display:inline-block;opacity:0;transform:translateY(14px) scale(.82);transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}.letter.show{opacity:1;transform:translateY(0) scale(1)}@keyframes nameGlow{0%{text-shadow:0 0 22px rgba(255,75,135,.55),0 0 65px rgba(255,75,135,.28)}to{text-shadow:0 0 38px rgba(255,120,165,.9),0 0 100px rgba(255,75,135,.52),0 0 160px rgba(195,45,105,.22)}}.divider{width:clamp(48px,14vw,75px);height:1px;background:linear-gradient(90deg,transparent,rgba(255,155,188,.52),transparent);margin:0 auto clamp(1rem,3vw,1.8rem)}.message{font-family:Cormorant Garamond,serif;font-weight:300;font-style:italic;font-size:clamp(.87rem,2.6vw,1.05rem);line-height:2.15;color:#ffecf2c7;margin-bottom:clamp(1rem,3vw,1.8rem)}.signature{font-family:Cormorant Garamond,serif;font-weight:300;font-style:italic;font-size:clamp(.68rem,1.8vw,.82rem);letter-spacing:.18em;color:#ffb2c673;margin-bottom:clamp(.8rem,2.5vw,1.3rem)}.card-appear{animation:cardAppear .9s cubic-bezier(.16,1,.3,1) forwards,borderSpin 7s linear infinite,cardGlow 4.5s ease-in-out infinite alternate}@keyframes cardAppear{0%{opacity:0;transform:scale(.88) translateY(24px)}to{opacity:1;transform:scale(1) translateY(0)}}.card{pointer-events:auto}.carousel{position:relative;width:100%;aspect-ratio:4 / 3;border-radius:3px;overflow:hidden;margin-bottom:clamp(1rem,3vw,1.8rem);box-shadow:0 0 30px #c82d5f4d}.carousel-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease;pointer-events:none}.carousel-img.active{opacity:1}.carousel-dots{position:absolute;bottom:.6rem;left:50%;transform:translate(-50%);display:flex;gap:.45rem;pointer-events:auto}.dot{width:6px;height:6px;border-radius:50%;border:none;background:#ffffff59;cursor:pointer;transition:background .3s}.dot.active{background:#ffffffe6}.envelope-wrap{display:flex;flex-direction:column;align-items:center;gap:1.4rem;cursor:pointer;pointer-events:auto;-webkit-user-select:none;user-select:none}.env-hint{font-family:Montserrat,sans-serif;font-weight:200;font-size:clamp(.6rem,1.8vw,.72rem);letter-spacing:.45em;color:#ffb4c899;text-transform:uppercase;animation:hintPulse 2.2s ease-in-out infinite}@keyframes hintPulse{0%,to{opacity:.5}50%{opacity:1}}.envelope{position:relative;width:clamp(220px,55vw,340px);aspect-ratio:3 / 2;transition:transform .4s ease}.envelope:hover{transform:scale(1.04)}.env-back{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(160deg,#1a0030,#0d001e);border:1.5px solid rgba(255,120,168,.3);border-radius:3px;box-shadow:0 0 40px #c8285a40,0 0 80px #9614461f}.env-flap{position:absolute;top:0;right:0;bottom:0;left:0}.env-left{clip-path:polygon(0 0,0 100%,51% 53%);background:#1d002e;z-index:1}.env-right{clip-path:polygon(100% 0,49% 53%,100% 100%);background:#180028;z-index:1}.env-bottom{clip-path:polygon(0 100%,51% 52%,100% 100%);background:#200035;z-index:1}.env-top{clip-path:polygon(0 0,51% 52%,100% 0);background:linear-gradient(175deg,#40006a,#2c0050 60%,#1e0038);z-index:2;transform-origin:50% 0%;transition:transform .7s cubic-bezier(.4,0,.2,1)}.env-open .env-top,.env-lifting .env-top{transform:rotateX(175deg)}.env-seams{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:3;pointer-events:none}.env-letter{position:absolute;bottom:8%;left:50%;transform:translate(-50%);width:52%;aspect-ratio:4 / 3;background:linear-gradient(150deg,#fff8fb,#ffe8f2);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 2px 20px #c8285a40;transition:transform .65s cubic-bezier(.16,1,.3,1);z-index:1}.env-lifting .env-letter,.env-open .env-letter{transform:translate(-50%) translateY(-62%)}.poem-window{overflow:hidden;height:calc(3 * 2.15em);position:relative;margin-bottom:clamp(1rem,3vw,1.8rem);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%)}.poem-ticker{animation:poemScroll 22s linear infinite}.poem-line{font-family:Cormorant Garamond,serif;font-weight:300;font-style:italic;font-size:clamp(.87rem,2.6vw,1.05rem);line-height:2.15;color:#ffecf2cc;padding:0 .2rem}@keyframes poemScroll{0%{transform:translateY(0)}to{transform:translateY(-50%)}}.joke-btn{position:fixed;transform:translate(-50%,-50%);z-index:30;pointer-events:auto;cursor:pointer;font-family:Montserrat,sans-serif;font-weight:300;font-size:clamp(.82rem,2.4vw,1rem);letter-spacing:.06em;color:#ffc8dad9;background:#32004b99;border:1px solid rgba(255,140,178,.35);border-radius:24px;padding:.6em 1.5em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;box-shadow:0 0 18px #c8326433;transition:color .15s,border-color .15s,box-shadow .15s}.joke-popup{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);z-index:40;pointer-events:none;font-family:Cormorant Garamond,serif;font-style:italic;font-size:clamp(.85rem,2.5vw,1rem);color:#ffdce8e6;background:#1e0032bf;border:1px solid rgba(255,130,170,.3);border-radius:8px;padding:.65rem 1.4rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:popupIn .35s cubic-bezier(.34,1.56,.64,1) forwards;white-space:nowrap}@keyframes popupIn{0%{opacity:0;transform:translate(-50%) translateY(12px) scale(.9)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@media (max-width: 480px){.card{padding:1.4rem 1.2rem;width:88vw}}@media (max-height: 500px) and (orientation: landscape){.overlay{align-items:flex-start;overflow-y:auto;pointer-events:auto;padding:.5rem}.card{padding:.9rem 1.5rem;width:min(420px,80vw)}.name{font-size:clamp(1.6rem,5vw,2.5rem)}.card-float{animation:none}}