:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px}.page{min-height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;padding:0;position:relative;overflow:hidden;background:linear-gradient(130deg,#0f172a,#1d4ed8,#7c3aed);background-size:300% 300%;animation:sky-shift 10s ease infinite}.sparkle{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle at 20% 30%,#ffffff66 0 2px,transparent 3px),radial-gradient(circle at 80% 20%,#ffffff55 0 2px,transparent 3px),radial-gradient(circle at 25% 80%,#ffffff66 0 2px,transparent 3px),radial-gradient(circle at 70% 75%,#ffffff55 0 2px,transparent 3px);animation:sparkle-float 3.2s linear infinite alternate}.glitter{position:absolute;inset:-20%;pointer-events:none;background:conic-gradient(from 0deg,#fff0,#ffffff1f,#fff0,#fde68a1f,#fff0);mix-blend-mode:soft-light;opacity:.35;animation:glitter-spin 14s linear infinite}.party-lights{position:absolute;top:.6rem;left:0;right:0;display:flex;justify-content:space-evenly;z-index:2;pointer-events:none}.party-light{width:.8rem;height:.8rem;border-radius:999px;background:#fde047;box-shadow:0 0 16px #fde047aa;animation:party-blink 1.4s ease-in-out infinite}.party-light:nth-child(2n){background:#22d3ee;box-shadow:0 0 16px #22d3eeaa;animation-delay:-.6s}.party-light:nth-child(3n){background:#f472b6;box-shadow:0 0 16px #f472b6aa;animation-delay:-.9s}.streamers{position:absolute;inset:0;pointer-events:none;z-index:2}.streamer{--x: 10%;--dur: 4s;--sway: 10deg;position:absolute;top:-1.6rem;left:var(--x);width:.45rem;height:5.5rem;border-radius:999px;background:linear-gradient(180deg,#fef08a,#f43f5e);transform-origin:top center;opacity:.88;animation:streamer-sway var(--dur) ease-in-out infinite}.streamer:nth-child(2n){background:linear-gradient(180deg,#67e8f9,#2563eb)}.streamer:nth-child(3n){background:linear-gradient(180deg,#86efac,#16a34a)}.orbit{position:absolute;border-radius:999px;filter:blur(1px);pointer-events:none}.orbit-a{width:20rem;height:20rem;left:-5rem;bottom:-4rem;background:radial-gradient(circle,#22d3ee88,#22d3ee00 70%);animation:orbit-drift-a 9s ease-in-out infinite}.orbit-b{width:22rem;height:22rem;right:-6rem;top:-5rem;background:radial-gradient(circle,#f472b688,#f472b600 70%);animation:orbit-drift-b 11s ease-in-out infinite}.pulse{position:absolute;border-radius:999px;border:2px solid #ffffff30;pointer-events:none;z-index:1}.pulse-a{width:min(76vw,22rem);aspect-ratio:1;animation:pulse-ring 2.5s ease-out infinite}.pulse-b{width:min(56vw,16rem);aspect-ratio:1;animation:pulse-ring 2.5s ease-out infinite .9s}.confetti{position:absolute;inset:0;pointer-events:none;z-index:1}.confetti-piece{--x: 50vw;--delay: 0s;--duration: 3.8s;position:absolute;top:-10vh;left:var(--x);width:.52rem;height:1rem;border-radius:999px;background:linear-gradient(180deg,#fef08a,#f472b6);opacity:.86;animation:confetti-fall var(--duration) linear var(--delay) infinite}.confetti-piece:nth-child(2n){background:linear-gradient(180deg,#67e8f9,#7c3aed)}.confetti-piece:nth-child(3n){background:linear-gradient(180deg,#86efac,#22d3ee)}.hat-stage{display:grid;place-items:center;height:100dvh;width:100%;z-index:3}.portrait-stage{position:relative;width:min(92vw,22rem);aspect-ratio:1 / 1;border-radius:1.25rem;overflow:hidden;background:linear-gradient(160deg,#1f2937,#334155);box-shadow:0 22px 42px #00000052}.portrait-image,.portrait-placeholder{width:100%;height:100%;display:block;object-fit:cover}.portrait-placeholder{background:radial-gradient(circle at 50% 30%,#ffffff22 0 18%,transparent 19%),radial-gradient(circle at 50% 70%,#ffffff1c 0 25%,transparent 26%),linear-gradient(145deg,#1e293b,#475569)}.hat{--tilt: 0deg;--size: 1;position:absolute;top:23%;left:50%;width:64%;transform:translate(-50%,-55%) rotate(var(--tilt)) scale(var(--size));transform-origin:center center;filter:drop-shadow(0 24px 34px #00000060);animation:hat-bounce 1.9s ease-in-out infinite,hat-spin 7s ease-in-out infinite;z-index:4}.hat-image{width:100%;height:auto;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.photo-upload{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.photo-picker{position:absolute;right:.7rem;bottom:.7rem;width:2.8rem;height:2.8rem;border-radius:999px;display:grid;place-items:center;font-size:1.25rem;background:#0f172acc;color:#fff;border:1px solid #ffffff36;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:5}@keyframes hat-bounce{0%,to{transform:translate(-50%,-55%) rotate(var(--tilt)) scale(var(--size))}50%{transform:translate(-50%,-60%) rotate(var(--tilt)) scale(var(--size))}}@keyframes hat-spin{0%,to{rotate:-1.2deg}50%{rotate:1.8deg}}@keyframes sky-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes sparkle-float{0%{transform:translateY(0) scale(1)}to{transform:translateY(-14px) scale(1.03)}}@keyframes orbit-drift-a{0%,to{transform:translate(0)}50%{transform:translate(18px,-20px)}}@keyframes orbit-drift-b{0%,to{transform:translate(0)}50%{transform:translate(-22px,24px)}}@keyframes confetti-fall{0%{transform:translate3d(0,-8vh,0) rotate(0);opacity:0}8%{opacity:.9}to{transform:translate3d(0,112vh,0) rotate(520deg);opacity:.2}}@keyframes pulse-ring{0%{transform:scale(.72);opacity:.46}to{transform:scale(1.27);opacity:0}}@keyframes glitter-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes party-blink{0%,to{transform:scale(.85);opacity:.7}50%{transform:scale(1.2);opacity:1}}@keyframes streamer-sway{0%,to{transform:rotate(calc(-1 * var(--sway)))}50%{transform:rotate(var(--sway))}}@media(min-width:760px){.portrait-stage{width:min(66vw,26rem)}.hat{width:62%}.confetti-piece{width:.6rem;height:1.15rem}}.simple-page{min-height:100dvh;display:grid;place-items:center;padding:1rem;background:#f3f4f6}.avatar-stage{position:relative;width:min(62vw,11.5rem);aspect-ratio:1 / 1;border-radius:999px;overflow:visible;background:transparent;box-shadow:0 12px 28px #0000002e}.avatar-image{width:100%;height:100%;object-fit:cover;object-position:center 24%;display:block;border-radius:999px}.avatar-stage .hat{top:-6%;left:50%;width:122%;transform:translate(-50%,-60%) rotate(var(--tilt)) scale(var(--size));transform-origin:center bottom;animation:none;filter:drop-shadow(0 5px 10px #00000048)}.simple-page .hat{position:absolute;top:18%;left:50%;width:62%;transform:translate(-50%,-48%) rotate(var(--tilt)) scale(var(--size));transform-origin:center bottom;animation:none;filter:drop-shadow(0 6px 10px #0000003a)}.simple-page .hat-image{width:100%}.party-title{position:absolute;bottom:.75rem;left:50%;transform:translate(-50%);margin:0;padding:0;font-size:clamp(2.2rem,10vw,4.5rem);font-weight:900;line-height:.9;letter-spacing:.02em;text-align:center;white-space:normal;color:transparent;background:linear-gradient(90deg,#fde047,#f472b6,#22d3ee,#fde047);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px #ffffff33;text-shadow:0 4px 16px #00000045;animation:party-title-shine 3.2s linear infinite,party-title-bounce 1.8s ease-in-out infinite;z-index:6}@keyframes party-title-shine{0%{background-position:0% 50%}to{background-position:200% 50%}}.refresh-stack{position:absolute;left:50%;top:calc(50% + 130px);bottom:auto;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.55rem;z-index:7}.refresh-hint{margin:0;color:#fff;font-size:clamp(.8rem,2.8vw,1rem);font-weight:600;text-shadow:0 3px 10px #00000045}.refresh-button{transform:translateZ(0);border:0;border-radius:999px;padding:.65rem 1.25rem;font-size:1rem;font-weight:800;color:#fff;background:linear-gradient(120deg,#f97316,#ec4899,#22d3ee,#facc15);background-size:200% 100%;box-shadow:0 10px 24px #0000003f;cursor:pointer;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;animation:refresh-shine 2.4s linear infinite}.refresh-button:hover{transform:translateY(-2px) scale(1.05);filter:brightness(1.07);box-shadow:0 14px 26px #00000048}.refresh-button:active{transform:translateY(0) scale(.98)}@keyframes party-title-bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-4px)}}@keyframes refresh-shine{0%{background-position:0% 50%}to{background-position:200% 50%}}@media(max-width:480px){.refresh-stack{top:calc(50% + 118px)}.party-title{bottom:.5rem;font-size:clamp(1.9rem,9.5vw,3.2rem)}}