.celebration{position:fixed;inset:0;z-index:10000;isolation:isolate;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#a68bed 0,#7658c7 60%,#4f3b94 100%);color:#fffbed;opacity:1;transition:opacity .24s ease}
.celebration::before{content:"";position:absolute;inset:-80%;z-index:-1;background:repeating-conic-gradient(from 0deg,#ffe44d30 0deg 12deg,transparent 12deg 30deg);animation:celebration-rays 16s linear infinite}
.celebration.is-leaving{opacity:0;pointer-events:none}.celebration canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.celebration-content{position:relative;z-index:1;width:100%;height:100dvh;max-height:1100px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 20px 72px;text-align:center}
.celebration-kicker{margin:0 0 10px;padding:6px 13px;border:3px solid #191713;box-shadow:4px 4px 0 #191713;background:#ffe44d;font-size:clamp(14px,2.2vw,20px);font-weight:400;letter-spacing:0;color:#191713;transform:rotate(2deg)}
.celebration h2{font-family:'Black Han Sans',sans-serif;font-size:clamp(45px,8vw,88px);font-weight:400;line-height:1.1;letter-spacing:-3px;margin:0;color:#fffbed;-webkit-text-stroke:3px #191713;paint-order:stroke fill;text-shadow:5px 6px 0 #191713;transform:rotate(-4deg);animation:celebration-title .5s cubic-bezier(.2,1.4,.3,1) both}
.celebration-host{width:min(67dvh,620px,91vw);aspect-ratio:1;flex-shrink:1;min-height:0;filter:drop-shadow(0 18px 24px #001b2580);animation:celebration-bounce .56s ease-in-out infinite}
.clap-sprite{width:100%;height:100%;background-image:url('/hongchul-clap-sprite.png');background-size:200% 200%;background-repeat:no-repeat;background-position:0 0;animation:celebration-clap .56s steps(1,end) infinite}
.celebration-caption{font-size:clamp(13px,1.8vw,18px);margin:5px 0 0;padding:6px 16px;border:2px solid #191713;box-shadow:4px 4px 0 #191713;line-height:1.6;color:#191713;background:#fffbed;transform:rotate(-2deg)}.celebration-controls{position:absolute;z-index:3;inset:auto 20px 20px;display:flex;justify-content:center;gap:10px}.celebration-controls button{border:2.5px solid #191713;background:#ffe44d;color:#191713;min-height:42px;padding:9px 15px;border-radius:3px;font-size:15px;box-shadow:3px 3px 0 #191713;transform:rotate(1deg)}.celebration-controls button:hover{background:#ff8061}.celebration-controls button:focus-visible{outline:3px solid #fff;outline-offset:4px}.celebration-credit{position:absolute;z-index:3;left:18px;top:14px;font-family:system-ui,sans-serif;font-size:9px;color:#fffbedb0;margin:0}
@keyframes celebration-clap{0%,100%{background-position:0 0}25%{background-position:100% 0}50%{background-position:0 100%}75%{background-position:100% 100%}}
@keyframes celebration-bounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.012)}}
@keyframes celebration-rays{to{transform:rotate(360deg)}}
@keyframes celebration-title{from{opacity:0;transform:translateY(20px) scale(.6) rotate(-8deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(-4deg)}}
@media(max-height:600px){.celebration-content{padding:24px 20px 63px}.celebration-host{width:min(52dvh,80vw)}.celebration h2{font-size:40px}.celebration-kicker{font-size:11px}.celebration-caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){.celebration::before,.celebration h2,.celebration-host,.clap-sprite{animation:none}.clap-sprite{background-position:0 100%}.celebration canvas{display:none}}