:root{--bg:#fff7fb;--card:#fff;--accent:#ff9bb3;--accent-2:#ff6f97;--muted:#7a6b72}*{box-sizing:border-box}.html,body,#root{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:linear-gradient(180deg,#fff0f6,#fff7fb 60%);color:var(--muted)}.app-root{width:100%;max-width:none;height:100vh;padding:0}.card-outer{display:flex;align-items:center;justify-content:center}.card{background:var(--card);border-radius:0;padding:48px;width:100vw;min-height:100vh;box-shadow:none;position:relative;overflow:hidden}.title{margin:0 0 16px;font-size:36px;color:var(--accent-2);text-align:center}.image-wrap{display:flex;align-items:center;justify-content:center;padding:10px}.image-wrap img{width:420px;max-width:60%;height:auto;border-radius:14px;border:8px solid rgba(255,155,179,.14)}.image-wrap.hero{position:relative;display:flex;align-items:center;justify-content:center}.image-wrap.hero:after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:16px;box-shadow:inset 0 0 120px #ff96aa0f}.image-wrap.hero img{border-radius:16px}.hero-overlay{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);padding:14px 20px;background:linear-gradient(90deg,#ff6f97f2,#ff9bb3e6);color:#fff;font-weight:700;border-radius:999px;box-shadow:0 8px 30px #ff6e8c1f;font-size:20px;letter-spacing:.6px}@media (max-width:900px){.hero-overlay{font-size:18px;padding:12px 18px}}@media (max-width:600px){.hero-overlay{font-size:16px;padding:10px 14px}}.image-actions{display:none}.buttons{height:140px;position:relative;margin-top:22px}.action-bar{position:absolute;left:36px;right:36px;bottom:28px;display:flex;gap:8px;height:72px}.btn{padding:14px 28px;border-radius:14px;border:0;cursor:pointer;font-weight:700;font-size:1rem;box-shadow:0 8px 22px #0000001a;transition:all .32s cubic-bezier(.2,.9,.2,1),background .22s}.btn:active{transform:translateY(2px)}.btn-yes{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}.btn-no{background:#fff;border:2px solid #ffd3df;color:var(--accent-2)}.btn-no{z-index:20}.btn-yes.yes-fullscreen{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)!important;width:100vw;height:100vh;border-radius:0;padding:0;font-size:2.4rem;z-index:60;transition:all .65s cubic-bezier(.2,.9,.2,1)}.envelope-overlay{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:65}.envelope-overlay .envelope{width:420px;height:260px}.envelope-area{display:flex;align-items:center;justify-content:center;height:220px}.envelope{width:340px;height:200px;position:relative;perspective:900px}.env-body{position:relative;width:100%;height:100%}.env-inner{position:absolute;left:12px;right:12px;bottom:8px;top:34px;background:#fff7fb;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,.9,.2,1)}.env-flap{position:absolute;left:0;right:0;top:0;height:68px;background:linear-gradient(180deg,#fff,#ffe2ed);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .7s cubic-bezier(.2,.9,.2,1)}.envelope.open .env-flap{transform:translateY(-28px) rotateX(180deg)}.envelope.open .env-inner{transform:translateY(-30px)}.letter{padding:22px;text-align:center;color:#6b303f}.letter h2{margin:0 0 8px;color:#a21745;font-size:1.25rem}.letter p{margin:8px 0;font-size:1rem}.hearts-wrap{pointer-events:none;position:absolute;left:0;right:0;bottom:0;top:0;overflow:visible}.hearts-wrap .heart{position:absolute;pointer-events:none;will-change:transform,opacity}.heart svg{width:100%;height:100%;display:block;filter:drop-shadow(0 8px 10px rgba(180,90,120,.12))}.heart path{transition:fill .24s}.heart{transform-origin:center center;opacity:0;animation-name:heartFly;animation-duration:var(--duration,1.8s);animation-delay:var(--delay,0s);animation-timing-function:cubic-bezier(.2,.85,.28,1);animation-fill-mode:forwards}@keyframes heartFly{0%{transform:translate(-50%,-50%) translateY(0) scale(.6) rotate(0);opacity:0}8%{opacity:1;transform:translate(-50%,-50%) translateY(-6px) scale(1) rotate(10deg)}40%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% - calc(var(--dy,200px) * .4))) rotate(calc(var(--rot,0deg))) scale(.98)}70%{transform:translate(calc(-50% + calc(var(--dx,0px) * .6)),calc(-50% - calc(var(--dy,200px) * .75))) rotate(calc(var(--rot,0deg))) scale(1.02);opacity:.95}to{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% - var(--dy,200px))) rotate(calc(var(--rot,0deg))) scale(1.05);opacity:0}}.cats-decor{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}.cat-sticker{position:absolute;transform-origin:center;opacity:.95;filter:drop-shadow(0 8px 14px rgba(180,90,120,.08));transition:transform .4s ease,opacity .4s;animation:catFloat 6s ease-in-out infinite}.cat-sticker:hover{transform:scale(1.05) rotate(-4deg);opacity:1}.cat-sticker.cat-real{border-radius:12px;object-fit:cover;border:6px solid rgba(255,255,255,.7)}@keyframes catFloat{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(2deg)}to{transform:translateY(0) rotate(0)}}.cats-toggle{display:flex;justify-content:center;margin-top:12px;position:relative;z-index:90;pointer-events:auto}.toggle-cats{background:transparent;border:1px solid rgba(255,110,140,.18);padding:8px 12px;border-radius:12px;color:var(--accent-2);cursor:pointer;font-weight:600;box-shadow:0 4px 10px #0000000f}.toggle-cats:active{transform:translateY(2px)}@media (max-width:900px){.title{font-size:24px}.image-wrap img{width:260px;max-width:65%}.card{padding:22px}.buttons{height:140px}.envelope{width:320px;height:180px}}@media (max-width:600px){.title{font-size:20px}.image-wrap img{width:180px}.card{padding:14px}.buttons{height:140px}.envelope{width:280px;height:160px}}