:root{color:#2d1b24;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#fff4d9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;min-height:100%;margin:0}button{font:inherit}h1,p{margin:0}.birthday-card{background:radial-gradient(circle at 50% 18%,#ffffffc7,#0000 18rem),radial-gradient(circle at 18% 72%,#ff76923d,#0000 18rem),radial-gradient(circle at 84% 66%,#49968438,#0000 18rem),linear-gradient(135deg,#fff4d9 0%,#ffd9df 48%,#cbe8dd 100%);place-items:center;min-height:100svh;padding:clamp(16px,4vw,44px);display:grid;position:relative;overflow:hidden}.birthday-card:after{content:"";background:linear-gradient(90deg,#5b313d21 1px,#0000 1px) 0 0/36px 100%,linear-gradient(#88566a,#684151);border-top:5px solid #ffffff94;height:min(21svh,170px);position:absolute;inset:auto 0 0;box-shadow:0 -20px 50px #6841512e}.ribbon-field,.confetti-cloud{pointer-events:none;position:absolute;inset:0;overflow:hidden}.ribbon-field span{opacity:.5;filter:blur(.2px);border-radius:999px;width:clamp(190px,28vw,420px);height:clamp(44px,7vw,92px);animation:11s ease-in-out infinite alternate ribbonDrift;position:absolute}.ribbon-field span:first-child{background:#f0647f;top:13%;left:-8vw;transform:rotate(-18deg)}.ribbon-field span:nth-child(2){background:#287c72;animation-delay:1.4s;top:22%;right:-10vw;transform:rotate(17deg)}.ribbon-field span:nth-child(3){opacity:.38;background:#f2b84b;animation-delay:2.1s;bottom:17%;left:18%;transform:rotate(8deg)}.party-stage{z-index:2;text-align:center;grid-template-rows:auto minmax(360px,1fr) auto;place-items:center;gap:clamp(12px,2.4vw,24px);width:min(100%,940px);min-height:min(88svh,780px);display:grid;position:relative}.party-copy{width:min(100%,760px);padding-inline:clamp(4px,2vw,20px)}.eyebrow{color:#7a3244;letter-spacing:.11em;text-transform:uppercase;margin-bottom:.55rem;font-size:clamp(.78rem,1.8vw,.95rem);font-weight:900}h1{color:#321724;letter-spacing:0;text-wrap:balance;font-size:clamp(2.35rem,6.2vw,5.35rem);line-height:.96}.subtitle{color:#523240;text-wrap:balance;max-width:620px;margin:clamp(12px,2vw,18px) auto 0;font-size:clamp(1rem,2.3vw,1.28rem);font-weight:650;line-height:1.55}.scene-wrap{place-items:center;width:min(92vw,820px);min-height:clamp(340px,55svh,500px);display:grid;position:relative}.cat{z-index:3;aspect-ratio:.95;filter:drop-shadow(0 28px 38px #48282d2e);width:clamp(210px,38vw,365px);position:absolute;top:clamp(10px,2.5svh,30px);left:50%;translate:-50%}.cat-tail{transform-origin:10% 90%;border-top:clamp(18px,4vw,34px) solid #8f8a86;border-bottom:0;border-left:0;border-right:clamp(18px,4vw,34px) solid #8f8a86;border-radius:0 999px 0 0;width:33%;height:50%;animation:2.7s ease-in-out infinite alternate tailWave;position:absolute;bottom:18%;right:-4%}.cat-body,.cat-head{background:linear-gradient(145deg,#beb8ae,#8d8782 70%);position:absolute}.cat-body{border-radius:45% 45% 36% 36%;inset:34% 18% 7%}.cat-head{border-radius:46% 46% 42% 42%;inset:3% 9% 38%;box-shadow:inset 0 -14px 24px #50403e1f}.cat-head:after{content:"";opacity:0;background:radial-gradient(circle at 14%,#f0647f6b 0 19%,#0000 20%),radial-gradient(circle at 86%,#f0647f6b 0 19%,#0000 20%);border-radius:999px;width:58%;height:18%;transition:opacity .35s;position:absolute;top:62%;left:50%;translate:-50%}.is-party .cat-head:after{opacity:1}.ear{aspect-ratio:.9;clip-path:polygon(50% 0,100% 100%,0 100%);background:#8d8782;width:27%;position:absolute;top:-18%}.ear:after{content:"";clip-path:inherit;background:#ef9fae;position:absolute;inset:34% 25% 12%}.ear-left{left:13%;rotate:-18deg}.ear-right{right:13%;rotate:18deg}.crown{clip-path:polygon(0 100%,0 28%,24% 64%,50% 0,76% 64%,100% 28%,100% 100%);filter:drop-shadow(0 6px 10px #8b4d0533);background:linear-gradient(#ffd967,#f0a737);width:31%;height:26%;position:absolute;top:-22%;left:50%;translate:-50%}.eye{aspect-ratio:1;background:#28161d;border-radius:999px;width:8%;animation:5.4s infinite blink;position:absolute;top:47%}.eye-left{left:33%}.eye-right{right:33%}.nose{aspect-ratio:1;background:#dd6f86;border-radius:45% 45% 55% 55%;width:8%;position:absolute;top:61%;left:50%;translate:-50%;rotate:45deg}.whisker{background:#331f24a3;width:25%;height:2px;position:absolute;top:65%}.whisker-left{left:8%;rotate:7deg;box-shadow:0 10px #331f2485}.whisker-right{right:8%;rotate:-7deg;box-shadow:0 10px #331f2485}.paw{z-index:4;background:#bcb5ad;border-radius:44% 44% 55% 55%;width:19%;height:18%;position:absolute;bottom:9%}.paw-left{left:28%;rotate:8deg}.paw-right{right:28%;rotate:-8deg}.cake-scene{z-index:5;aspect-ratio:1.55;cursor:pointer;transform-origin:50% 82%;filter:drop-shadow(0 30px 38px #532d3238);background:0 0;border:0;width:clamp(220px,43vw,400px);position:absolute;bottom:clamp(18px,3.5svh,42px)}.cake-scene:focus-visible,.party-button:focus-visible{outline-offset:6px;outline:4px solid #155f58}.plate,.cake-base,.frosting,.sprinkles,.candle{position:absolute;left:50%;translate:-50%}.plate{background:#fff9f0;border-radius:999px;width:92%;height:17%;bottom:5%;box-shadow:inset 0 -8px #edd2c5}.cake-base{background:linear-gradient(90deg,#0000 9%,#ffffff47 10% 14%,#0000 15% 27%,#ffffff38 28% 31%,#0000 32%),linear-gradient(#f091a2,#bd556d);border-radius:18px 18px 30px 30px;width:72%;height:43%;bottom:17%}.frosting{background:#fff7e6;border-radius:999px 999px 20px 20px;width:76%;height:22%;bottom:53%}.frosting:after{content:"";background:radial-gradient(circle at 10% 0,#fff7e6 0 17px,#0000 18px),radial-gradient(circle at 34% 0,#fff7e6 0 20px,#0000 21px),radial-gradient(circle at 62% 0,#fff7e6 0 18px,#0000 19px),radial-gradient(circle at 88% 0,#fff7e6 0 16px,#0000 17px);position:absolute;inset:58% 7% -28%}.sprinkles{z-index:2;background:linear-gradient(90deg,#287c72 0 10%,#0000 10% 22%,#f2b84b 22% 33%,#0000 33% 48%,#7a3244 48% 58%,#0000 58% 72%,#287c72 72% 83%,#0000 83%),0 0;border-radius:999px;width:58%;height:8%;bottom:59%}.candle{z-index:3;background:repeating-linear-gradient(135deg,#0000 0 8px,#ffffffa6 8px 13px),#287c72;border-radius:8px;width:clamp(12px,2.1vw,18px);height:clamp(48px,8vw,68px);bottom:71%}.candle-1{margin-left:-21%}.candle-3{margin-left:21%}.flame{aspect-ratio:.72;transform-origin:50% 90%;background:radial-gradient(circle at 50% 70%,#fff8a8 0 24%,#f2b84b 25% 58%,#f0647f 59% 100%);border-radius:60% 60% 54% 54%;width:135%;transition:opacity .28s,scale .28s;animation:.72s ease-in-out infinite alternate flameFlicker;position:absolute;bottom:93%;left:50%;translate:-50%}.smoke{aspect-ratio:1;opacity:0;border:3px solid #5e555647;border-left-color:#0000;border-radius:999px;width:160%;position:absolute;bottom:105%;left:50%;translate:-50%;scale:.3}.is-party .flame{opacity:0;scale:.15}.is-party .smoke{animation:1.45s ease-out infinite smokeLift}.treat-row{z-index:6;opacity:0;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.8vw,16px);transition:opacity .4s,transform .4s;display:flex;position:absolute;inset:auto 0 clamp(4px,1svh,16px);transform:translateY(18px)}.is-party .treat-row{opacity:1;transform:translateY(0)}.treat-row span{color:#5a2736;min-height:34px;animation:1.8s ease-in-out infinite alternate treatBob;animation-delay:calc(var(--i) * .16s);background:#fff9f0;border:2px solid #7a32442e;border-radius:999px;align-items:center;padding:0 13px;font-size:clamp(.78rem,1.8vw,.92rem);font-weight:850;display:inline-flex;box-shadow:0 12px 24px #5b313d1f}.confetti-cloud span{top:-8%;left:var(--x);background:hsl(calc(var(--i) * 41), 76%, 54%);opacity:0;border-radius:4px;width:clamp(7px,1.2vw,12px);height:clamp(14px,2vw,22px);position:absolute;transform:translateY(-30px)rotate(0)}.is-party .confetti-cloud span{animation:2.7s cubic-bezier(.12,.82,.22,1) infinite confettiFall;animation-delay:var(--delay)}.party-button{z-index:7;color:#fff9f0;cursor:pointer;background:#321724;border:0;border-radius:999px;justify-content:center;align-items:center;gap:10px;min-height:52px;padding:0 22px;font-size:clamp(.98rem,2vw,1.08rem);font-weight:900;transition:transform .2s,background .2s,box-shadow .2s;display:inline-flex;position:relative;box-shadow:0 20px 40px #32172438,inset 0 0 0 1px #ffffff1f}.party-button:hover{background:#155f58;transform:translateY(-2px);box-shadow:0 24px 44px #155f583d,inset 0 0 0 1px #ffffff29}@keyframes ribbonDrift{0%{translate:0}to{translate:18px 24px}}@keyframes tailWave{0%{rotate:-8deg}to{rotate:9deg}}@keyframes blink{0%,92%,to{scale:1}95%{scale:1 .12}}@keyframes flameFlicker{0%{rotate:-5deg;scale:.95 1}to{rotate:7deg;scale:1.08 .94}}@keyframes smokeLift{0%{opacity:0;translate:-50%;scale:.25}30%{opacity:.75}to{opacity:0;translate:-50% -52px;scale:1.25}}@keyframes treatBob{0%{translate:0}to{translate:0 -7px}}@keyframes confettiFall{0%{opacity:0;transform:translateY(-20px)rotate(0)}12%{opacity:.92}to{opacity:0;transform:translateY(112svh)rotate(520deg)}}@media (width<=680px){.party-stage{grid-template-rows:auto minmax(330px,1fr) auto;min-height:min(91svh,760px)}h1{font-size:clamp(2.1rem,11vw,3.6rem)}.subtitle{font-size:1rem}.scene-wrap{width:min(96vw,470px);min-height:clamp(330px,52svh,440px)}.cat{width:clamp(200px,66vw,300px)}.cake-scene{width:clamp(220px,72vw,330px)}.treat-row{max-width:310px;margin-inline:auto}}@media (height<=650px) and (width>=700px){.party-stage{text-align:left;grid-template-rows:1fr auto;grid-template-columns:.92fr 1.08fr;column-gap:clamp(16px,3vw,34px);min-height:calc(100svh - clamp(32px,8vw,88px))}.party-copy{text-align:left;justify-self:end}.subtitle{margin-left:0}.scene-wrap{min-height:350px}.party-button{grid-column:1/-1}}