:root{color:#2f2630;background:#42c7bd;font-family:Caveat,Comic Sans MS,cursive;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px;overflow-x:hidden}button{border:0;color:inherit;font:inherit;cursor:pointer}.app{position:relative;min-height:100svh;overflow-x:hidden;background:radial-gradient(circle at 18% 12%,rgba(255,249,215,.45) 0 8%,transparent 9%),radial-gradient(circle at 84% 22%,rgba(244,118,128,.2) 0 7%,transparent 8%),linear-gradient(180deg,#4dd3c8,#32b9b2 52%,#2ba8a5)}.texture{position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(30deg,rgba(255,255,255,.24) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.24) 87.5%,rgba(255,255,255,.24)),linear-gradient(150deg,rgba(255,255,255,.16) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.16) 87.5%,rgba(255,255,255,.16));background-size:54px 54px}.confetti-rain{position:fixed;z-index:2;inset:0;overflow:hidden;pointer-events:none}.confetti-piece{position:absolute;top:-24px;left:var(--x);width:var(--size);height:calc(var(--size) * 1.55);border-radius:2px;background:var(--color);box-shadow:0 1px #4c36371f;opacity:.92;animation:confettiFall var(--duration) var(--delay) linear infinite}.confetti-piece-1{border-radius:50%}.confetti-piece-2{width:calc(var(--size) * 1.45);height:calc(var(--size) * .65)}.intro-stage,.gift-stage,.letters-stage{position:relative;z-index:1;min-height:100svh}.intro-stage{display:grid;width:100%;padding:18px;place-items:center;background:transparent}.intro-stage img{position:absolute;filter:drop-shadow(0 12px 0 rgba(94,73,64,.12)) drop-shadow(0 18px 18px rgba(45,70,66,.22));-webkit-user-select:none;user-select:none}.portrait{bottom:3rem;width:280px;animation:floatUp 1.6s cubic-bezier(.2,.9,.2,1) both}.crown{bottom:21rem;width:100px;animation:dropCrown 1.15s .55s cubic-bezier(.17,.88,.28,1.15) both}.birthday{top:8svh;width:min(86vw,430px);animation:dropTitle 1.2s 1s cubic-bezier(.17,.88,.28,1.1) both,titleWiggle 3.2s 2.2s ease-in-out infinite}.intro-stage.is-leaving .portrait{animation:exitBottom .75s ease-in both}.intro-stage.is-leaving .crown,.intro-stage.is-leaving .birthday{animation:exitTop .75s ease-in both}.gift-stage{display:grid;place-items:center;padding:28px}.gift-button{width:min(66vw,310px);aspect-ratio:1;padding:0;background:transparent;filter:drop-shadow(0 20px 0 rgba(87,61,58,.13)) drop-shadow(0 22px 22px rgba(47,67,62,.24));animation:giftArrive .75s cubic-bezier(.17,.88,.28,1.15) both,giftShake 3.8s .75s ease-in-out infinite}.gift-button img{width:100%;display:block}.gift-stage.is-opening .gift-button{animation:giftOpen .72s ease-out both}.letters-stage{padding:22px 16px 38px}.letters-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;width:min(100%,560px);margin:0 auto}.letter-card{position:relative;display:grid;min-height:82px;place-items:center;padding:8px;border-radius:8px;background:#fff8e038;box-shadow:0 8px #4c36371a,0 10px 18px #314e4929;animation:letterFly .7s calc(var(--i) * 34ms) cubic-bezier(.18,.82,.25,1.08) both;transition:transform .18s ease,background .18s ease}.letter-card:active,.letter-card.is-active{transform:translateY(3px) scale(.98)}.letter-card.is-open{background:#ffeeb95c}.letter-card img{width:min(32vw,128px);max-height:68px;object-fit:contain;filter:drop-shadow(0 4px 0 rgba(114,79,70,.1))}.letter-card span{position:absolute;top:9px;right:12px;min-width:24px;color:#6d4b50;font-size:clamp(1.1rem,5vw,1.5rem);font-weight:700;line-height:1}.paper-overlay{position:fixed;z-index:4;inset:0;display:grid;place-items:center;padding:22px;pointer-events:none;background:#2e726d00;opacity:0;transition:opacity .26s ease,background .26s ease}.paper-overlay.is-visible{pointer-events:auto;opacity:1;background:#2e726d47}.paper{display:grid;align-content:center;width:min(88vw,390px);min-height:min(58svh,430px);padding:clamp(28px,8vw,44px) clamp(24px,7vw,42px);border:2px solid rgba(111,76,66,.28);border-radius:7px;background:linear-gradient(90deg,rgba(240,124,132,.18) 0 2px,transparent 2px 100%) 30px 0 / 100% 100% no-repeat,repeating-linear-gradient(180deg,transparent 0 34px,rgba(70,154,156,.18) 35px 36px),#fff7dc;box-shadow:0 16px #5f423c1f,0 26px 36px #283d3a47;transform:translateY(16px) rotate(-1deg) scale(.96);transition:transform .26s ease}.paper-overlay.is-visible .paper{transform:translateY(0) rotate(-1deg) scale(1)}.paper-number{color:#c26d68;font-size:clamp(1.45rem,7vw,2rem);font-weight:700;line-height:1}.paper-text{margin-top:16px;color:#4d3840;font-size:clamp(2rem,9.5vw,3.2rem);font-weight:700;line-height:.96;overflow-wrap:anywhere}@keyframes floatUp{0%{transform:translateY(115svh) rotate(-4deg)}to{transform:translateY(0) rotate(-2deg)}}@keyframes gentleBob{50%{transform:translateY(-10px) rotate(1deg)}}@keyframes dropCrown{0%{transform:translateY(-55svh) rotate(-18deg)}to{transform:translateY(0) translate(-6px) rotate(-12deg)}}@keyframes crownWiggle{45%{transform:translateY(-7px) rotate(-4deg)}}@keyframes dropTitle{0%{transform:translateY(-75svh) rotate(5deg)}to{transform:translateY(0) rotate(-2deg)}}@keyframes titleWiggle{0%,to{transform:rotate(-2deg)}45%{transform:rotate(1deg)}65%{transform:rotate(-4deg)}}@keyframes exitBottom{to{transform:translateY(115svh) rotate(7deg);opacity:0}}@keyframes exitTop{to{transform:translateY(-80svh) rotate(-8deg);opacity:0}}@keyframes giftArrive{0%{transform:scale(.62) translateY(26px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes giftShake{0%,28%,to{transform:rotate(0)}7%{transform:rotate(-4deg)}14%{transform:rotate(4deg)}21%{transform:rotate(-3deg)}25%{transform:rotate(2deg)}}@keyframes giftOpen{0%{transform:scale(1)}45%{transform:scale(1.08) rotate(-4deg)}to{transform:scale(.45) translateY(20px);opacity:0}}@keyframes letterFly{0%{transform:translateY(-38px) scale(.48) rotate(-10deg);opacity:0}to{transform:translateY(0) scale(1) rotate(0);opacity:1}}@keyframes confettiFall{0%{transform:translate3d(0,-10svh,0) rotate(0)}to{transform:translate3d(var(--drift),112svh,0) rotate(var(--spin))}}@media(min-width:760px){.letters-stage{padding-block:34px 54px}.letters-grid{gap:14px}.letter-card{min-height:96px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}