@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Fraunces:opsz,wght@9..144,700;9..144,850&family=Manrope:wght@400;500;650;800;900&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:#241814;background:#f7ead8;min-width:320px;margin:0}button,input{font:inherit}img{display:block}#root{min-height:100svh}.page{--ink:#241814;--ink-soft:#241814b8;--cream:#fff8ec;--paper:#fffaf1d6;--rose:#d84e4a;--rose-deep:#7b2024;--apricot:#ffb36d;--butter:#ffe29a;--sage:#8da87b;--sky:#8ac6d8;min-height:100svh;color:var(--ink);background:radial-gradient(circle at 14% 10%,#ffd78885,#0000 30%),radial-gradient(circle at 90% 18%,#7ec4cb5c,#0000 31%),radial-gradient(circle at 68% 92%,#ff8c7647,#0000 36%),linear-gradient(135deg,#fff7e8 0%,#f8dcc7 46%,#f4efe1 100%);place-items:center;padding:clamp(18px,4vw,38px);display:grid;position:relative;overflow:hidden}.page:before{content:"";pointer-events:none;opacity:.42;mix-blend-mode:multiply;background:linear-gradient(115deg,#0000 0 46%,#ffffff73 46% 47%,#0000 47% 100%),repeating-linear-gradient(0deg,#5f3a2a0b 0 1px,#0000 1px 18px),repeating-linear-gradient(90deg,#5f3a2a09 0 1px,#0000 1px 22px);position:absolute;inset:0}.page:after{content:"";pointer-events:none;filter:blur(8px);background:radial-gradient(#723f2b2b,#0000 66%);height:38svh;position:absolute;inset:auto -20% -28%}.ambient{pointer-events:none;filter:blur(1px);opacity:.86;border-radius:999px;position:absolute}.ambient-left{background:radial-gradient(circle at 42% 44%,#ffbb689e,#0000 48%),conic-gradient(from 120deg,#d84e4a47,#ffe29a38,#8da87b33,#d84e4a47);width:clamp(230px,48vw,520px);height:clamp(230px,48vw,520px);animation:12s ease-in-out infinite ambientDrift;top:-12%;left:-18%}.ambient-right{background:radial-gradient(circle at 50% 45%,#8ac6d880,#0000 48%),conic-gradient(from -30deg,#ffb36d42,#d84e4a29,#8ac6d857,#ffb36d42);width:clamp(220px,46vw,500px);height:clamp(220px,46vw,500px);animation:14s ease-in-out infinite reverse ambientDrift;bottom:-16%;right:-18%}.card{z-index:2;text-align:center;isolation:isolate;-webkit-backdrop-filter:blur(14px)saturate(1.08);backdrop-filter:blur(14px)saturate(1.08);background:linear-gradient(145deg,#fffdf7f2,#fff1e0db),radial-gradient(circle at 16% 12%,#fffffff5,#0000 28%);border:1px solid #7d473024;border-radius:clamp(26px,6vw,42px);width:min(92vw,472px);padding:clamp(24px,5vw,42px);animation:.72s cubic-bezier(.18,.88,.22,1) both cardEntrance;position:relative;box-shadow:0 34px 70px #5a301d38,inset 0 2px #ffffffd9,0 0 0 10px #ffffff38}.card:before,.card:after{content:"";z-index:-1;pointer-events:none;position:absolute}.card:before{border-radius:inherit;border:1px dashed #7b20243d;inset:13px}.card:after{background:radial-gradient(circle at 32% 30%,#ffffffe6 0 9px,#0000 10px),radial-gradient(circle at 68% 70%,#ffffffa8 0 12px,#0000 13px),linear-gradient(135deg,#d84e4a,#ffb36d);border-radius:28px;width:86px;height:86px;top:-22px;right:-22px;transform:rotate(10deg);box-shadow:0 16px 28px #7b20243d}.title{letter-spacing:-.055em;color:var(--rose-deep);text-wrap:balance;text-shadow:0 2px #ffffffe6;margin:0;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(3rem,13vw,5.2rem);font-weight:700;line-height:.86}.title:first-letter{color:var(--rose)}.title.small{letter-spacing:-.045em;font-size:clamp(2.55rem,8vw,4.2rem)}.qr-image{background:linear-gradient(#fff,#fff) padding-box padding-box,repeating-linear-gradient(45deg,#d84e4a 0 10px,#fff8ec 10px 20px,#8ac6d8 20px 30px,#fff8ec 30px 40px) border-box;border:12px solid #0000;border-radius:26px;width:clamp(226px,57vw,318px);height:auto;margin:clamp(20px,4.5vw,30px) auto 18px;padding:11px;display:block;transform:rotate(-1.2deg);box-shadow:0 22px 44px #3823182e,inset 0 3px #fffc}.address{letter-spacing:.01em;color:#35231d;background:#ffffff9e;border:1px solid #7b20241f;border-radius:999px;width:fit-content;max-width:100%;margin:0 auto;padding:10px 14px;font-size:clamp(1rem,3.2vw,1.14rem);font-weight:800;line-height:1.35}.pickup-details{text-align:left;background:linear-gradient(145deg,#ffffffb3,#ffecd5db),radial-gradient(circle at 94% 12%,#8ac6d847,#0000 34%);border:1px solid #7b20241f;border-radius:24px;margin-top:18px;padding:16px;position:relative;box-shadow:0 12px 28px #5a301d1a,inset 0 1px #ffffffe6}.pickup-details:before{content:"PICKUP";letter-spacing:.12em;color:#7b202447;font-size:.68rem;font-weight:900;position:absolute;top:12px;right:14px}.pickup-name{letter-spacing:.15em;text-transform:uppercase;color:var(--rose-deep);margin:0 0 6px;font-size:.78rem;font-weight:900}.pickup-address{color:#3c2b25;margin:0;font-size:.98rem;font-weight:700;line-height:1.36}.pickup-code-row{color:#fff8ec;background:#231814;border-radius:18px;justify-content:space-between;align-items:center;gap:14px;margin-top:13px;padding:12px 14px;display:flex;box-shadow:0 12px 24px #2418142e}.pickup-code-row span{letter-spacing:.14em;text-transform:uppercase;color:#fff8ecb8;font-size:.76rem;font-weight:900}.pickup-code-row strong{letter-spacing:.1em;color:var(--butter);font-family:Fraunces,Georgia,serif;font-size:clamp(1.55rem,7vw,2.1rem);line-height:1}.update-card{text-align:left;width:min(94vw,560px)}.update-card .title,.update-card .qr-image{text-align:center;margin-left:auto;margin-right:auto}.update-card .qr-image{border-width:9px;border-radius:22px;width:clamp(190px,45vw,250px)}.upload-panel{background:#ffffffa8;border:1px solid #7b20241f;border-radius:22px;margin-top:14px;padding:16px;box-shadow:0 13px 28px #5a301d17}.panel-label{letter-spacing:.15em;text-transform:uppercase;color:var(--rose-deep);margin:0 0 10px;font-size:.78rem;font-weight:950}.file-input{color:#3f302b;width:100%;font:inherit}.file-input::file-selector-button{font:inherit;color:#fff8ec;background:#241814;border:0;border-radius:12px;margin-right:12px;padding:10px 12px;font-weight:850}.code-input{color:#241814;letter-spacing:.08em;background:#ffffffd6;border:1px solid #7b202433;border-radius:16px;outline:none;width:100%;margin-top:12px;padding:13px 14px;font-family:Fraunces,Georgia,serif;font-size:1.35rem;font-weight:800;transition:border-color .18s,box-shadow .18s,transform .18s}.code-input:focus{border-color:#d84e4ab8;transform:translateY(-1px);box-shadow:0 0 0 5px #d84e4a1f}.update-pickup-address{text-align:left}.upload-button{width:100%;font:inherit;letter-spacing:.02em;color:#fff8ec;cursor:pointer;background:linear-gradient(135deg,#241814,#7b2024 48%,#d84e4a);border:0;border-radius:16px;margin-top:12px;padding:13px 14px;font-weight:900;transition:transform .16s,filter .16s,box-shadow .16s;box-shadow:0 16px 28px #7b202438}.upload-button:hover:not(:disabled){filter:saturate(1.08);transform:translateY(-2px);box-shadow:0 18px 34px #7b202442}.upload-button:disabled{opacity:.68;cursor:not-allowed}.upload-message{color:var(--ink-soft);margin:10px 0 0;font-size:.9rem;line-height:1.42}.surprise-page{--stage-max:840px;background:radial-gradient(circle at 50% -10%,#ffe29ab8,#0000 28%),radial-gradient(circle at 7% 78%,#8da87b57,#0000 32%),radial-gradient(circle at 92% 72%,#d84e4a42,#0000 30%),linear-gradient(135deg,#f5ead8 0%,#f8d9c5 48%,#f2efe0 100%);padding:clamp(12px,4vw,34px)}.surprise-backdrop{pointer-events:none;opacity:.68;mix-blend-mode:multiply;background:radial-gradient(circle at 20% 22%,#ffffffb8 0 2px,#0000 3px) 0 0/140px 140px,radial-gradient(circle at 80% 18%,#ffffff85 0 2px,#0000 3px) 0 0/180px 180px,repeating-linear-gradient(-10deg,#3d251d09 0 1px,#0000 1px 15px);position:absolute;inset:0}.spark{pointer-events:none;opacity:0;filter:blur(1px);border-radius:999px;animation:5.2s ease-in-out infinite sparkPulse;position:absolute}.spark-1{background:radial-gradient(circle,#d84e4a59,#0000 66%);width:170px;height:170px;top:18%;left:10%}.spark-2{background:radial-gradient(circle,#ffb36d66,#0000 68%);width:210px;height:210px;animation-delay:1.4s;top:20%;right:8%}.spark-3{background:radial-gradient(circle,#8ac6d857,#0000 68%);width:220px;height:220px;animation-delay:2.2s;bottom:4%;left:42%}.surprise-stage{z-index:3;width:min(94vw, var(--stage-max));-webkit-backdrop-filter:blur(10px)saturate(1.08);backdrop-filter:blur(10px)saturate(1.08);background:linear-gradient(145deg,#fffcf4cc,#ffeedab8),radial-gradient(circle at 78% 12%,#ffffffd6,#0000 30%);border:1px solid #7c4b3721;border-radius:clamp(28px,6vw,48px);padding:clamp(26px,5vw,48px) clamp(12px,3.4vw,34px) clamp(28px,5vw,44px);position:relative;box-shadow:0 34px 76px #4f2e1f33,inset 0 1px #ffffffe0,0 0 0 12px #ffffff38}.surprise-stage:before{content:"mashka / birthday cut";letter-spacing:.18em;text-transform:uppercase;color:#7b202452;font-size:clamp(.58rem,1.8vw,.72rem);font-weight:900;position:absolute;top:clamp(14px,3vw,24px);left:clamp(18px,4vw,34px)}.surprise-stage:after{content:"";opacity:.72;background:repeating-linear-gradient(90deg,#d84e4ab8 0 8px,#fff8ecdb 8px 16px);border-radius:999px;width:72px;height:22px;position:absolute;top:clamp(16px,3vw,24px);right:clamp(18px,4vw,34px);transform:rotate(6deg)}.letter-composition{filter:drop-shadow(0 18px 24px #47261829);gap:clamp(8px,1.8vw,16px);padding-top:clamp(22px,4.5vw,34px);display:grid}.letter-row{flex-wrap:wrap;justify-content:center;gap:clamp(6px,1.3vw,12px);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:linear-gradient(145deg, #ffffff3d, transparent), var(--letter-bg);min-width:clamp(42px,8vw,78px);height:clamp(58px,11.2vw,94px);color:var(--letter-color);font-family:var(--letter-font);letter-spacing:-.04em;transform:translate(var(--offset-x), var(--offset-y)) rotate(var(--rotate)) scale(var(--scale));opacity:0;animation:.74s cubic-bezier(.16,1,.25,1) forwards letterDrop;animation-delay:var(--delay);border-radius:9px;justify-content:center;align-items:center;padding-inline:clamp(8px,1.6vw,14px);font-size:clamp(1.6rem,4.6vw,3rem);font-weight:900;line-height:1;display:inline-flex;position:relative;box-shadow:0 12px 18px #2a191230,0 0 0 1px #0000000f,inset 0 1px #ffffff73}.cut-letter:after{content:"";pointer-events:none;border:1px solid #ffffff2e;border-radius:6px;position:absolute;inset:4px}.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;perspective:900px;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(132px,30vw,270px);transform:translate(-50%, -50%) translate(var(--photo-x), var(--photo-y)) rotate(var(--photo-rot)) rotateX(0deg) scale(.66);animation:5.8s ease-in-out forwards photoReveal;animation-delay:var(--photo-delay);border:8px solid #fffaf0;border-radius:18px;position:absolute;top:51%;left:50%;box-shadow:0 24px 42px #2d1b134d,0 0 0 1px #5232231f}.floating-photo:nth-child(3n){border-bottom-width:22px}.floating-photo:nth-child(4n){filter:saturate(.96)contrast(1.04)}.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, #fff 0 8%, var(--firework-color) 9% 28%, transparent 66%);filter:blur(2px);border-radius:999px;position:absolute;inset:-22px}.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 ambientDrift{0%,to{transform:translate(0,0)rotate(0)scale(1)}50%{transform:translate(18px,12px)rotate(10deg)scale(1.04)}}@keyframes cardEntrance{0%{opacity:0;filter:blur(2px);transform:translateY(26px)rotate(-1.5deg)scale(.97)}to{opacity:1;filter:blur();transform:translateY(0)rotate(0)scale(1)}}@keyframes letterDrop{0%{opacity:0;transform:translate(var(--offset-x), calc(var(--offset-y) - 28px)) rotate(calc(var(--rotate) - 12deg)) scale(.68);filter:blur(3px)saturate(.7)}72%{opacity:1;filter:blur()saturate(1.08)}to{opacity:1;transform:translate(var(--offset-x), var(--offset-y)) rotate(var(--rotate)) scale(var(--scale));filter:blur()saturate()}}@keyframes photoReveal{0%{opacity:0;transform:translate(-50%, -50%) translate(var(--photo-x), calc(var(--photo-y) + 10vh)) rotate(calc(var(--photo-rot) - 9deg)) rotateX(12deg) scale(.52)}13%{opacity:1;transform:translate(-50%, -50%) translate(var(--photo-x), var(--photo-y)) rotate(var(--photo-rot)) rotateX(0deg) 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)) rotateX(-1deg) scale(1.035)}to{opacity:0;transform:translate(-50%, -50%) translate(calc(var(--photo-x) * .92), calc(var(--photo-y) - 4vh)) rotate(calc(var(--photo-rot) + 4deg)) rotateX(-5deg) 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:.92;transform:scale(1.14)}}@media (width<=560px){.page{padding:14px}.card,.surprise-stage{border-radius:28px}.card{width:min(94vw,440px);padding:24px 18px}.qr-image{border-width:9px;border-radius:22px;width:clamp(214px,66vw,292px)}.surprise-stage{min-height:220px;padding-inline:10px}.letter-row{gap:4px}.cut-letter{border-radius:7px;min-width:clamp(33px,7vw,54px);height:clamp(50px,10vw,70px);padding-inline:clamp(6px,1.3vw,10px);font-size:clamp(1.22rem,4.05vw,2.05rem)}.upload-panel{border-radius:18px}.pickup-details{border-radius:20px;margin-top:14px;padding:13px}.pickup-code-row strong{font-size:1.42rem}.floating-photo{border-width:6px;width:clamp(166px,48vw,304px)}.firework span{--distance:70px;width:4px;height:14px}}