:root{--cobalt:#2536c9;--cobalt-deep:#141d86;--butter:#ffc93c;--bubble:#ff6fae;--bubble-deep:#e2468c;--cream:#fff4dc;--flame:#ff8a1f;--display:"Unbounded", system-ui, sans-serif;--text:"Onest", system-ui, sans-serif;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font:400 1.0625rem/1.55 var(--text);color:var(--cream);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}body{background:radial-gradient(120% 80% at 50% 20%, #2e42e0 0%, var(--cobalt) 45%, #1b2aa8 100%) fixed;background-color:var(--cobalt);min-height:100svh;margin:0;overflow-x:hidden}button{font:inherit;color:inherit;touch-action:manipulation;-webkit-user-select:none;user-select:none}:focus-visible{outline:3px solid var(--butter);outline-offset:4px;border-radius:6px}.confetti{pointer-events:none;z-index:10;width:100%;height:100%;position:fixed;inset:0}.hero{--glow:1;min-height:100svh;padding:max(2rem, env(safe-area-inset-top)) 16px max(2.5rem, env(safe-area-inset-bottom));text-align:center;isolation:isolate;flex-direction:column;justify-content:center;align-items:center;gap:clamp(1rem,3vh,1.75rem);display:flex;position:relative}.hero:before{content:"";z-index:-1;opacity:var(--glow);pointer-events:none;background:radial-gradient(40% 35% at 50% 62%,#ffaa3c47,#0000 70%);transition:opacity .6s;position:absolute;inset:0}.hero__greeting{font-family:var(--display);letter-spacing:-.01em;animation:fade-up .7s var(--ease-out) 60ms backwards;margin:0;font-size:clamp(1.1rem,3.2vw,1.75rem);font-weight:500}.name{font-family:var(--display);letter-spacing:-.035em;justify-content:center;margin:0 0 clamp(.5rem,3vh,1.5rem);font-size:clamp(3rem,15vw,12.5rem);font-weight:900;line-height:.9;display:flex}.name__letter{cursor:pointer;color:var(--butter);text-shadow:.045em .055em 0 var(--cobalt-deep);transform-origin:50% 90%;transition:transform .22s var(--ease-out);animation:letter-in .9s var(--ease-out) calc(.22s + var(--i) * 70ms) backwards;display:inline-block}.name__letter:nth-child(3n+2){color:var(--bubble)}.name__letter:nth-child(3n){color:var(--cream)}.name__letter.is-popped{animation:letter-pop .45s var(--ease-out)}@media (hover:hover) and (pointer:fine){.name__letter:hover{transform:translateY(-6%)rotate(-4deg)}}@keyframes letter-in{0%{opacity:0;transform:translateY(45%)rotate(-8deg)scale(.9)}}@keyframes letter-pop{40%{transform:translateY(-14%)rotate(6deg)scale(1.06)}}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}}.cake{width:clamp(230px,62vw,330px);animation:fade-up .9s var(--ease-out) .65s backwards;flex-direction:column;align-items:center;display:flex}.cake__candles{z-index:1;justify-content:center;gap:clamp(14px,4.5vw,24px);margin-bottom:-6px;padding-top:44px;display:flex;position:relative}.candle{cursor:pointer;background:linear-gradient(90deg, #ffffff59 0 25%, transparent 25% 70%, #00000014 70%), repeating-linear-gradient(-45deg, var(--cream) 0 7px, var(--bubble) 7px 12px);border:0;border-radius:4px 4px 2px 2px;align-self:flex-end;width:15px;height:58px;padding:0;position:relative}.candle:nth-child(2n){height:68px}.candle:before{content:"";position:absolute;inset:-40px -10px -4px}.candle:after{content:"";background:#3a2a1a;border-radius:1px;width:2px;height:7px;margin-left:-1px;position:absolute;bottom:100%;left:50%}.candle__flame{background:radial-gradient(60% 45% at 50% 72%, #fffbe8 0 30%, var(--butter) 55%, var(--flame) 100%);transform-origin:50% 90%;width:14px;height:26px;animation:flicker 1.6s ease-in-out calc(var(--i) * -.37s) infinite alternate;transition:opacity .22s var(--ease-out), scale .26s var(--ease-out), rotate .12s ease-out;border-radius:50%/62% 62% 38% 38%;margin-left:-7px;position:absolute;bottom:calc(100% + 4px);left:50%;box-shadow:0 0 14px 4px #ffbe468c,0 0 42px 14px #ff962838}.candle.is-out{cursor:default}.candle.is-out .candle__flame{opacity:0;scale:.25 .1}.candle__smoke{filter:blur(3px);opacity:0;pointer-events:none;background:#fff4dcb3;border-radius:50%;width:8px;height:8px;margin-left:-4px;position:absolute;bottom:calc(100% + 6px);left:50%}.candle.is-out .candle__smoke{animation:smoke 1.6s var(--ease-out) forwards}@keyframes flicker{0%{transform:rotate(-2deg)scale(1)}35%{transform:rotate(2deg)scale(.94,1.06)}70%{transform:rotate(-1deg)scale(1.04,.95)}to{transform:rotate(1.5deg)scale(.97,1.04)}}@keyframes smoke{0%{opacity:.8;transform:translate(0)scale(1)}to{opacity:0;transform:translate(10px,-70px)scale(4,5)}}.cake__tier{border-radius:14px 14px 6px 6px;position:relative;box-shadow:inset 0 -10px #00000014}.cake__tier--top{background:var(--cream);width:74%;height:62px}.cake__tier--top:before{content:"";background:radial-gradient(circle at 50% 0, var(--bubble) 11px, transparent 11.5px) -2px 10px / 22px 22px repeat-x, linear-gradient(var(--bubble), var(--bubble)) 0 0 / 100% 12px no-repeat;border-radius:14px 14px 0 0;height:26px;position:absolute;inset:0 0 auto}.cake__tier--bottom{background:radial-gradient(circle, var(--cream) 2.2px, transparent 2.6px) 6px 10px / 34px 26px, radial-gradient(circle, var(--bubble) 2.2px, transparent 2.6px) 23px 23px / 34px 26px, var(--butter);width:100%;height:86px}.cake__plate{background:var(--cream);width:118%;height:14px;box-shadow:0 10px 0 -2px var(--cobalt-deep);border-radius:999px}.hint{opacity:.85;text-wrap:balance;max-width:30ch;min-height:3.1em;animation:fade-up .7s var(--ease-out) .9s backwards;margin:.75rem 0 0}.btn{border:2px solid var(--cream);background:var(--cream);color:var(--cobalt);cursor:pointer;transition:transform .14s var(--ease-out), background-color .2s ease, border-color .2s ease, color .2s ease;border-radius:999px;padding:.8rem 1.4rem;font-weight:500}.btn:active{transform:scale(.97)}.btn--ghost{color:var(--cream);animation:fade-up .7s var(--ease-out) 1s backwards;background:0 0;border-color:#fff4dc66}@media (hover:hover) and (pointer:fine){.btn--ghost:hover{background:#fff4dc1a}}.mic{align-items:center;gap:.6rem;display:inline-flex}.mic[hidden]{display:none}.mic__icon{display:grid}.mic__dot,.mic__meter{display:none}.mic[data-state=pending]{opacity:.7;cursor:progress}.mic[data-state=on]{background:var(--bubble);border-color:var(--bubble);color:var(--cream)}.mic[data-state=on] .mic__icon{display:none}.mic[data-state=on] .mic__dot{background:var(--cream);border-radius:50%;width:10px;height:10px;display:block;position:relative}.mic__dot:after{content:"";background:var(--cream);animation:on-air 1.4s var(--ease-out) infinite;border-radius:50%;position:absolute;inset:0}@keyframes on-air{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.8)}}.mic[data-state=on] .mic__meter{align-items:center;gap:3px;height:18px;display:flex}.mic__meter i{background:currentColor;border-radius:2px;width:3px;height:100%;transition:transform 90ms linear;transform:scaleY(.2)}@media (hover:hover) and (pointer:fine){.mic[data-state=on]:hover{background:var(--bubble-deep);border-color:var(--bubble-deep)}}.gift{min-height:100svh;padding:4rem 16px max(4rem, env(safe-area-inset-bottom));flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;display:none}[data-stage=out] .gift,[data-stage=opened] .gift{animation:fade-up .8s var(--ease-out) backwards;display:flex}.gift__stage{place-items:center;width:100%;display:grid}.gift__stage>*{grid-area:1/1}.box{cursor:pointer;width:190px;height:190px;animation:nudge 3.2s var(--ease-in-out) 1.4s infinite;background:0 0;border:0;margin-bottom:3rem;padding:0;transition:visibility 0s .7s;position:relative}.box__body,.box__lid{background:linear-gradient(90deg, transparent 42%, var(--butter) 42% 58%, transparent 58%), var(--bubble);border-radius:8px;position:absolute}.box__body{box-shadow:inset 0 -12px 0 #0000001a, 10px 10px 0 var(--cobalt-deep);transition:opacity .3s ease .25s, transform .4s var(--ease-out) .25s;inset:32% 4% 0}.box__lid{background:linear-gradient(90deg, transparent 42%, var(--butter) 42% 58%, transparent 58%), var(--bubble-deep);height:20%;transition:transform .55s var(--ease-out), opacity .3s ease .25s;inset:16% 0 auto}.box__lid:before,.box__lid:after{content:"";border:8px solid var(--butter);border-radius:50%/60% 60% 40% 40%;width:40px;height:30px;position:absolute;bottom:88%;left:50%}.box__lid:before{transform-origin:100% 100%;transform:translate(-100%)rotate(-24deg)}.box__lid:after{transform-origin:0 100%;transform:rotate(24deg)}.box__label{white-space:nowrap;font-family:var(--display);font-size:1.05rem;font-weight:500;transition:opacity .2s;position:absolute;top:calc(100% + 1.25rem);left:50%;translate:-50%}@media (hover:hover) and (pointer:fine){.box:hover .box__lid{transform:translateY(-8px)rotate(-3deg)}}@keyframes nudge{0%,78%,to{transform:rotate(0)}84%{transform:rotate(-4deg)}90%{transform:rotate(3.5deg)}95%{transform:rotate(-1.5deg)}}[data-stage=opened] .box{visibility:hidden;pointer-events:none;animation:none}[data-stage=opened] .box__lid{opacity:0;transform:translate(-45%,-170%)rotate(-32deg)}[data-stage=opened] .box__body{opacity:0;transform:scale(.9)}[data-stage=opened] .box__label{opacity:0}.letter{background:var(--cream);width:min(100% - 14px,36rem);color:var(--cobalt-deep);box-shadow:12px 12px 0 var(--cobalt-deep);visibility:hidden;opacity:0;transition:opacity .4s ease, transform .7s var(--ease-out), visibility 0s .7s;border-radius:6px;margin-right:14px;padding:clamp(1.75rem,5vw,3rem);font-size:clamp(1.02rem,2.4vw,1.15rem);line-height:1.65;transform:translateY(60px)rotate(2deg)scale(.96)}[data-stage=opened] .letter{visibility:visible;opacity:1;transition:opacity .4s ease .3s, transform .8s var(--ease-out) .3s, visibility 0s;transform:rotate(-1deg)}.letter__title{font-family:var(--display);letter-spacing:-.02em;color:var(--bubble-deep);margin:0 0 1rem;font-size:clamp(1.8rem,5vw,2.4rem);font-weight:800}.letter__title:focus{outline:none}.letter__line{margin:0 0 1em}.letter__sign{text-align:right;font-family:var(--display);margin:1.5rem 0 0;font-weight:500}.letter>*{opacity:0;transition:opacity .3s ease, transform .3s var(--ease-out);transform:translateY(12px)}[data-stage=opened] .letter>*{opacity:1;transition:opacity .5s ease, transform .6s var(--ease-out);transform:none}[data-stage=opened] .letter>:first-child{transition-delay:.55s}[data-stage=opened] .letter>:nth-child(2){transition-delay:.64s}[data-stage=opened] .letter>:nth-child(3){transition-delay:.73s}[data-stage=opened] .letter>:nth-child(4){transition-delay:.82s}[data-stage=opened] .letter>:nth-child(5){transition-delay:1s}.relight{visibility:hidden;opacity:0;transition:opacity .3s ease, transform .14s var(--ease-out), visibility 0s .3s}[data-stage=opened] .relight{visibility:visible;opacity:1;transition:opacity .4s ease 1.3s, transform .14s var(--ease-out), visibility 0s}@media (prefers-reduced-motion:reduce){.name__letter,.hero__greeting,.cake,.hint,.btn--ghost,[data-stage=out] .gift,[data-stage=opened] .gift{animation-name:fade}.name__letter.is-popped,.mic__dot:after,.box,.candle__flame,.candle.is-out .candle__smoke{animation:none}.letter,[data-stage=opened] .letter,.letter>*,[data-stage=opened] .box__lid,[data-stage=opened] .box__body{transform:none}[data-stage=opened] .letter{transform:rotate(-1deg)}@keyframes fade{0%{opacity:0}}}