*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-text-size-adjust:100%;overflow:hidden}body{background:linear-gradient(135deg,#fff1f5 0%,#ffe4ef 55%,#dbeafe 100%);min-height:100svh}#root{min-height:100svh}.start-screen{background:linear-gradient(135deg,#fff1f5 0%,#ffe4ef 55%,#dbeafe 100%);justify-content:center;align-items:center;width:100%;height:100svh;padding:1.5rem;display:flex;position:relative;overflow:hidden}.start-screen__gif{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:1rem;height:auto;position:absolute}.start-screen__gif--intro{border-radius:0 1rem 1rem 0;width:min(200px,52vw);max-height:min(40svh,280px);top:50%;left:0;transform:translateY(-50%)}.start-screen__gif--rest{width:min(160px,40vw);max-height:min(24svh,180px);bottom:clamp(1rem,5svh,2rem);right:clamp(.75rem,4vw,1.5rem)}.start-screen__gif--button-left{width:min(140px,36vw);max-height:min(28svh,200px);top:calc(50% - 2.25rem);right:calc(50% + min(110px,29vw) - clamp(.65rem,2.8vw,1.1rem));transform:translateY(-50%)}.start-screen__gif--button-right{width:min(140px,36vw);max-height:min(28svh,200px);top:calc(50% + .35rem);left:calc(50% + min(110px,29vw) - clamp(2.85rem,7.5vw,3.7rem));transform:translateY(-50%)}.start-screen__button{cursor:pointer;color:#fff;letter-spacing:.12em;-webkit-tap-highlight-color:transparent;background:radial-gradient(circle at 35% 25%,#ff8c8c 0%,#ff3b3b 30%,#d91313 65%,#9a0000 100%);border:none;border-radius:50%;width:min(220px,58vw);height:min(220px,58vw);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:clamp(1.4rem,6vw,1.75rem);font-weight:900;transition:transform .1s,box-shadow .1s;transform:translateY(0);box-shadow:0 24px #7d0000,0 34px 45px #0000004d,inset 0 10px 16px #ffffff59}.start-screen__button--pressed,.start-screen__button:active{transform:translateY(20px);box-shadow:0 4px #7d0000,0 10px 20px #0003,inset 0 4px 10px #fff3}.birthday-message-cursor{vertical-align:text-bottom;background-color:#2d2416;width:2px;height:1.1em;margin-left:1px;animation:.8s step-end infinite cursorBlink;display:inline-block}@keyframes cursorBlink{0%,to{opacity:1}50%{opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}.envelope-scene{z-index:400;background:linear-gradient(135deg,#fff1f5 0%,#ffe4ef 55%,#dbeafe 100%);justify-content:center;align-items:center;padding:1.5rem;animation:.6s both fadeInUp;display:flex;position:fixed;inset:0;overflow:hidden}.envelope__music-trigger{opacity:0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;pointer-events:none;border:0;width:1px;height:1px;margin:0;padding:0;position:absolute;overflow:hidden}.audio-prime-layer{z-index:50000;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;justify-content:center;align-items:flex-end;padding-bottom:2.5rem;display:flex;position:fixed;inset:0}.audio-prime-hint{letter-spacing:.02em;color:#2d2416b8;background:#fffef9e0;border-radius:999px;padding:.65rem 1.1rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:.95rem;font-weight:600;animation:2s ease-in-out infinite audioPrimePulse;box-shadow:0 8px 24px #2d24161f}@keyframes audioPrimePulse{0%,to{opacity:.82;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}.envelope{perspective:900px;width:min(90vw,340px);height:min(58vw,230px);transform-style:preserve-3d;animation:.8s cubic-bezier(.34,1.4,.64,1) both envelopeEntrance;position:relative}.envelope--letter-out .envelope__back,.envelope--letter-out .envelope__pocket,.envelope--letter-out .envelope__flap{opacity:.15;pointer-events:none;transition:opacity .7s}.envelope__back{background:linear-gradient(160deg,#f9c5d8 0%,#e8a4bc 100%);border-radius:6px;transition:opacity .7s;position:absolute;inset:0;box-shadow:0 14px 36px #2d24162e}.envelope__pocket{z-index:2;clip-path:polygon(0 42%,50% 68%,100% 42%,100% 100%,0 100%);background:linear-gradient(#0000 42%,#eeb8cc 42%,#e8a0b8 100%);border-radius:6px;position:absolute;inset:0}.envelope__flap{z-index:4;transform-origin:top;clip-path:polygon(0 0,50% 100%,100% 0);background:linear-gradient(#f4b8cc 0%,#e8a4bc 100%);justify-content:center;align-items:flex-start;height:54%;padding-top:28%;transition:transform .85s cubic-bezier(.4,0,.2,1),z-index 0s .42s;display:flex;position:absolute;top:0;left:0;right:0}.envelope--open .envelope__flap{z-index:0;transform:rotateX(180deg)}.envelope__seal{color:#fff;background:radial-gradient(circle at 35% 30%,#ff8c8c,#d91313 70%);border-radius:50%;justify-content:center;align-items:center;width:2.4rem;height:2.4rem;font-size:1rem;line-height:1;transition:opacity .3s;display:flex;box-shadow:0 3px #9a0000,0 6px 12px #0003}.envelope--open .envelope__seal{opacity:0}.envelope__letter{z-index:1;background:#fffef9;border-radius:8px;height:88%;padding:0;transition:transform 1.15s cubic-bezier(.34,1.25,.64,1),top 1.15s cubic-bezier(.34,1.25,.64,1),left 1.15s cubic-bezier(.34,1.25,.64,1),right 1.15s cubic-bezier(.34,1.25,.64,1),width 1.15s cubic-bezier(.34,1.25,.64,1),height 1.15s cubic-bezier(.34,1.25,.64,1),box-shadow 1.15s;position:absolute;bottom:8%;left:10%;right:10%;overflow:hidden;transform:translateY(8%);box-shadow:0 4px 14px #2d24161f}.envelope__letter--out{z-index:10;width:min(92vw,24rem);height:min(78svh,560px);max-height:calc(100svh - 3rem);position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 20px 48px #2d241638}.envelope__letter-scroll{z-index:1;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#e8a4bccc transparent;height:100%;padding:1.35rem 1.15rem 1.5rem;position:relative;overflow:hidden auto}.envelope__letter-scroll--photo{overflow:hidden}.envelope__letter-scroll::-webkit-scrollbar{width:5px}.envelope__letter-scroll::-webkit-scrollbar-thumb{background:#e8a4bcd9;border-radius:999px}.envelope__letter-photo{object-fit:cover;object-position:center;opacity:0;z-index:0;border-radius:inherit;pointer-events:none;backface-visibility:hidden;width:100%;height:100%;position:absolute;inset:0;transform:scale(1.02)translateZ(0)}.envelope__letter-photo--settled{opacity:1;transform:scale(1)translateZ(0)}.envelope__letter-photo--revealed{z-index:2;will-change:opacity, transform;animation:photoReveal var(--photo-reveal-ms,1.4s) cubic-bezier(.22, 1, .36, 1) forwards}.envelope__letter-text{z-index:1;color:#2d2416;white-space:pre-wrap;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:clamp(.88rem,3.8vw,1.02rem);font-weight:500;line-height:1.7;position:relative}.envelope__song-button{color:#fffef9;letter-spacing:.02em;cursor:pointer;background:linear-gradient(135deg,#ff8fab 0%,#f72585 100%);border:0;border-radius:999px;margin:1.15rem auto 0;padding:.72rem 1.35rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:.92rem;font-weight:700;transition:transform .2s,box-shadow .2s;animation:.45s cubic-bezier(.22,1,.36,1) both songButtonIn;display:block;box-shadow:0 10px 24px #f7258547}.envelope__song-button:hover{transform:translateY(-1px);box-shadow:0 12px 28px #f7258557}.envelope__song-button:active{transform:translateY(0)}.envelope__photo-countdown{color:#f72585;background:#fffef9f0;border-radius:50%;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;margin:1rem auto 0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:1.15rem;font-weight:700;animation:.35s cubic-bezier(.22,1,.36,1) both countdownPop;display:flex;box-shadow:0 6px 16px #2d24161f}@keyframes songButtonIn{0%{opacity:0;transform:translateY(10px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes countdownPop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.envelope__letter-photo--hiding{opacity:1;will-change:opacity, transform;animation:photoHide var(--photo-reveal-ms,1.4s) cubic-bezier(.4, 0, .2, 1) forwards;transform:scale(1)translateZ(0)}.envelope__letter-text--returning{opacity:0;animation:textFadeIn var(--photo-reveal-ms,1.4s) cubic-bezier(.22, 1, .36, 1) forwards}@keyframes photoReveal{0%{opacity:0;transform:scale(1.02)translateZ(0)}to{opacity:1;transform:scale(1)translateZ(0)}}@keyframes textFadeOut{0%{opacity:1}45%{opacity:1}to{opacity:0}}.envelope__letter-text--faded{animation:textFadeOut var(--photo-reveal-ms,1.4s) cubic-bezier(.4, 0, .2, 1) forwards}@keyframes photoHide{0%{opacity:1;transform:scale(1)translateZ(0)}to{opacity:0;transform:scale(1.02)translateZ(0)}}@keyframes textFadeIn{0%{opacity:0}55%{opacity:0}to{opacity:1}}@keyframes envelopeEntrance{0%{opacity:0;transform:translateY(2rem)scale(.85)}to{opacity:1;transform:translateY(0)scale(1)}}