@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Marck+Script&display=swap";:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Manrope,Segoe UI,sans-serif;font-weight:500;line-height:1.4}*{box-sizing:border-box}body{color:#2e2521;background:radial-gradient(circle at 12% 15%,#fff9ec 0%,#fff5e2 24%,#fff5e200 48%),radial-gradient(circle at 88% 86%,#eef8ff 0%,#e4f1ff 27%,#e4f1ff00 50%),linear-gradient(160deg,#fff3e5 0%,#ffe8da 48%,#ffe9cf 100%);min-width:320px;margin:0}#root{min-height:100svh}.page{place-items:center;min-height:100svh;padding:20px;display:grid;position:relative;overflow:hidden}.ambient{filter:blur(4px);pointer-events:none;border-radius:999px;position:absolute}.ambient-left{background:radial-gradient(circle,#ffd69db8,#ffd69d00);width:clamp(180px,42vw,380px);height:clamp(180px,42vw,380px);top:-8%;left:-12%}.ambient-right{background:radial-gradient(circle,#9ed8ffbf,#9ed8ff00);width:clamp(200px,44vw,420px);height:clamp(200px,44vw,420px);bottom:-14%;right:-16%}.card{z-index:2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;background:#ffffffd1;border:1px solid #ffffffb3;border-radius:28px;width:min(92vw,460px);padding:clamp(24px,5vw,38px);position:relative;box-shadow:0 26px 60px #2b252129,inset 0 1px #ffffffe6}.title{letter-spacing:.01em;color:#7a1f2f;text-wrap:balance;margin:0;font-family:Marck Script,cursive;font-size:clamp(2.2rem,8vw,3.35rem);line-height:1.05}.title.small{font-size:clamp(2rem,6.6vw,2.8rem)}.qr-image{background:#fff;border-radius:18px;width:clamp(210px,52vw,300px);height:auto;margin:clamp(20px,4vw,28px) auto;padding:14px;display:block;box-shadow:0 8px 20px #0a0a0a2e,0 0 0 1px #00000008}.address{letter-spacing:.01em;color:#2b2521;margin:0;font-size:clamp(1rem,3.3vw,1.16rem);font-weight:600;line-height:1.45}.pickup-details{background:linear-gradient(135deg,#fffc,#fff5e8db),linear-gradient(135deg,#ff978533,#5ea1ff29);border:1px solid #ffffffc7;border-radius:18px;margin-top:18px;padding:14px;box-shadow:inset 0 1px #ffffffe6}.pickup-name{letter-spacing:.08em;text-transform:uppercase;color:#8a332d;margin:0 0 5px;font-size:.82rem;font-weight:800}.pickup-address{color:#332a25;margin:0;font-size:.98rem;font-weight:650;line-height:1.35}.pickup-code-row{color:#3d302a;background:#ffffffd1;border-radius:14px;justify-content:space-between;align-items:center;gap:14px;margin-top:10px;padding:10px 12px;display:flex}.pickup-code-row span{letter-spacing:.04em;text-transform:uppercase;font-size:.84rem;font-weight:800}.pickup-code-row strong{letter-spacing:.08em;color:#15110f;font-size:1.55rem;line-height:1}.update-card{width:min(94vw,520px)}.upload-panel{background:#ffffffe0;border:1px solid #e9d5c6e6;border-radius:16px;margin-top:8px;padding:14px}.panel-label{letter-spacing:.08em;text-transform:uppercase;color:#7a332e;margin:0 0 10px;font-size:.84rem;font-weight:800}.file-input{width:100%;font:inherit;color:#3f332d}.code-input{color:#231a16;width:100%;font:inherit;letter-spacing:.08em;background:#ffffffeb;border:1px solid #634c4038;border-radius:12px;outline:none;margin-top:10px;padding:12px 13px;font-size:1.15rem;font-weight:800}.code-input:focus{border-color:#ff8466db;box-shadow:0 0 0 4px #ff978529}.update-pickup-address{text-align:left}.upload-button{width:100%;font:inherit;color:#231a16;cursor:pointer;background:linear-gradient(135deg,#ff9785,#ffb973);border:0;border-radius:12px;margin-top:10px;padding:11px 12px;font-weight:700;transition:transform .16s,filter .16s}.upload-button:hover:not(:disabled){filter:saturate(1.07);transform:translateY(-1px)}.upload-button:disabled{opacity:.7;cursor:not-allowed}.upload-message{color:#5e4f47;margin:8px 0 0;font-size:.9rem;line-height:1.4}.surprise-page{background:radial-gradient(circle at 12% 12%,#ffecd4b8,#ffecd400 45%),radial-gradient(circle at 88% 86%,#d8edffb3,#d8edff00 45%),linear-gradient(160deg,#f8efe3 0%,#f9e6dd 42%,#efe6ff 100%);padding:clamp(14px,4vw,32px)}.surprise-backdrop{mix-blend-mode:soft-light;pointer-events:none;background:repeating-linear-gradient(-16deg,#fff3 0 1px,#fff0 1px 16px);position:absolute;inset:0}.spark{pointer-events:none;opacity:0;border-radius:999px;animation:4.5s ease-in-out infinite sparkPulse;position:absolute}.spark-1{background:radial-gradient(circle,#ffbea6d1,#ffbea600);width:140px;height:140px;top:20%;left:16%}.spark-2{background:radial-gradient(circle,#b0dbffcc,#b0dbff00);width:170px;height:170px;animation-delay:1.4s;top:26%;right:16%}.spark-3{background:radial-gradient(circle,#d6b4ffb3,#d6b4ff00);width:180px;height:180px;animation-delay:2.2s;bottom:10%;left:48%}.surprise-stage{z-index:3;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#ffffffad;border:1px solid #ffffffa6;border-radius:28px;width:min(94vw,760px);padding:clamp(24px,5vw,38px) clamp(14px,3vw,28px) clamp(22px,4vw,32px);position:relative;box-shadow:0 26px 55px #26201c2e,inset 0 1px #ffffffe0}.letter-composition{gap:clamp(8px,1.8vw,14px);display:grid}.letter-row{flex-wrap:wrap;justify-content:center;gap:clamp(5px,1.3vw,10px);display:flex}.cut-letter{--delay:0s;--rotate:0deg;--offset-y:0px;--offset-x:0px;--scale:1;--letter-bg:#fff;--letter-color:#232323;--letter-font:Arial, sans-serif;background:var(--letter-bg);min-width:clamp(42px,8.5vw,82px);height:clamp(58px,12vw,94px);color:var(--letter-color);font-family:var(--letter-font);letter-spacing:-.02em;transform:translate(var(--offset-x), var(--offset-y)) rotate(var(--rotate)) scale(var(--scale));opacity:0;animation:.7s cubic-bezier(.2,1,.18,1) forwards letterDrop;animation-delay:var(--delay);border-radius:8px;justify-content:center;align-items:center;padding-inline:clamp(8px,1.8vw,14px);font-size:clamp(1.6rem,4.6vw,2.95rem);font-weight:800;line-height:1;display:inline-flex;box-shadow:0 8px 14px #0000002e,0 0 0 1px #0000000f}.cut-letter:nth-child(odd){clip-path:polygon(3% 5%,95% 0%,98% 95%,6% 100%,0% 20%)}.cut-letter:nth-child(2n){clip-path:polygon(0% 8%,94% 4%,100% 90%,4% 96%,2% 14%)}.photo-overlay{z-index:4;pointer-events:none;position:absolute;inset:0}.floating-photo{--photo-delay:0s;--photo-x:0vw;--photo-y:0vh;--photo-rot:0deg;aspect-ratio:3/4;object-fit:cover;opacity:0;width:clamp(118px,29vw,250px);transform:translate(-50%, -50%) translate(var(--photo-x), var(--photo-y)) rotate(var(--photo-rot)) scale(.66);animation:5.8s ease-in-out forwards photoReveal;animation-delay:var(--photo-delay);border:7px solid #fff;border-radius:14px;position:absolute;top:50%;left:50%;box-shadow:0 18px 38px #0c0a0957}.fireworks{z-index:6;pointer-events:none;position:absolute;inset:0;overflow:hidden}.firework{--firework-x:50%;--firework-y:28%;--firework-color:#ffd166;--firework-delay:0s;left:var(--firework-x);top:var(--firework-y);opacity:0;width:8px;height:8px;animation:1.6s ease-out forwards fireworkCore;animation-delay:var(--firework-delay);position:absolute}.firework:before{content:"";background:radial-gradient(circle, var(--firework-color), transparent 62%);filter:blur(3px);border-radius:999px;position:absolute;inset:-18px}.firework span{--angle:0deg;--distance:94px;background:linear-gradient(to bottom, #fff, var(--firework-color));width:5px;height:18px;box-shadow:0 0 14px var(--firework-color);opacity:0;transform-origin:bottom;animation:1.35s cubic-bezier(.12,.75,.16,1) forwards fireworkParticle;animation-delay:var(--firework-delay);border-radius:999px;position:absolute;top:50%;left:50%}@keyframes letterDrop{0%{opacity:0;transform:translate(var(--offset-x), calc(var(--offset-y) - 24px)) rotate(calc(var(--rotate) - 10deg)) scale(.7);filter:blur(3px)}70%{opacity:1;filter:blur()}to{opacity:1;transform:translate(var(--offset-x), var(--offset-y)) rotate(var(--rotate)) scale(var(--scale))}}@keyframes photoReveal{0%{opacity:0;transform:translate(-50%, -50%) translate(var(--photo-x), calc(var(--photo-y) + 10vh)) rotate(calc(var(--photo-rot) - 7deg)) scale(.52)}14%{opacity:1;transform:translate(-50%, -50%) translate(var(--photo-x), var(--photo-y)) rotate(var(--photo-rot)) scale(1)}68%{opacity:1;transform:translate(-50%, -50%) translate(calc(var(--photo-x) * .88), calc(var(--photo-y) * .9 - 2vh)) rotate(calc(var(--photo-rot) + 1deg)) scale(1.03)}to{opacity:0;transform:translate(-50%, -50%) translate(calc(var(--photo-x) * .92), calc(var(--photo-y) - 4vh)) rotate(calc(var(--photo-rot) + 4deg)) scale(.92)}}@keyframes fireworkCore{0%,8%{opacity:0;transform:translate(-50%,-50%)scale(.3)}14%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.8)}}@keyframes fireworkParticle{0%{opacity:0;transform:translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(.3)}16%{opacity:1}to{opacity:0;transform:translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(.05)}}@keyframes sparkPulse{0%,to{opacity:0;transform:scale(.65)}45%{opacity:.95;transform:scale(1.15)}}@media (width<=560px){.page{padding:14px}.card,.surprise-stage{border-radius:24px}.surprise-stage{padding-inline:10px}.letter-row{gap:4px}.cut-letter{min-width:clamp(34px,7.1vw,56px);height:clamp(50px,10vw,72px);padding-inline:clamp(6px,1.5vw,10px);font-size:clamp(1.25rem,4.2vw,2.1rem)}.upload-panel{border-radius:14px}.pickup-details{border-radius:16px;margin-top:14px;padding:12px}.pickup-code-row strong{font-size:1.35rem}.floating-photo{border-width:6px;width:clamp(160px,46vw,300px)}.firework span{--distance:70px;width:4px;height:14px}}