:root{--burgundy: #7a2e35;--cream: #f6efe4;--linen-color: #cfdbe4;--ease: cubic-bezier(.2, .8, .2, 1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}body{background:var(--linen-color);color:var(--burgundy);font-family:Special Elite,Courier New,monospace;user-select:none;-webkit-user-select:none}button{font:inherit;color:inherit}.app{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--linen) center / 512px,var(--linen-color)}.stage{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none;opacity:0;transition:opacity 1.4s var(--ease)}.stage.shown{opacity:1}.pointing-hand{--hand: clamp(88px, 30vw, 170px);position:absolute;left:0;top:0;z-index:1;pointer-events:none;visibility:hidden;opacity:0;will-change:transform,opacity}.pointing-hand img{display:block;width:var(--hand);margin-left:calc(var(--hand) * -.38);margin-top:calc(var(--hand) * -.06);transform-origin:38% 6%;filter:drop-shadow(2px 4px 4px rgba(42,31,46,.25));animation:hand-tap 1.3s var(--ease) infinite;-webkit-user-select:none;user-select:none}@keyframes hand-tap{0%,to{transform:rotate(var(--tilt, 0deg)) translateY(12px)}50%{transform:rotate(var(--tilt, 0deg)) translateY(2px)}}@media(prefers-reduced-motion:reduce){.pointing-hand img{animation:none;transform:rotate(var(--tilt, 0deg)) translateY(6px)}}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(40,46,66,.22) 100%)}.intro{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(40,46,66,.18) 100%),var(--linen) center / 512px,var(--linen-color)}.enter{font-family:Pinyon Script,cursive;font-size:clamp(34px,10vw,56px);line-height:1.2;padding:12px 20px;color:var(--burgundy);background:none;border:0;cursor:pointer;transition:opacity .3s var(--ease)}.enter:hover{opacity:.75}.enter:disabled{cursor:default;animation:breathe 1.8s var(--ease) infinite}@keyframes breathe{50%{opacity:.6}}.music,.close{position:absolute;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(122,46,53,.55);background:var(--cream);box-shadow:2px 3px #2a1f2e24;display:grid;place-items:center;cursor:pointer;transition:transform .25s var(--ease)}.music:active,.close:active{transform:scale(.92)}.music{left:calc(16px + env(safe-area-inset-left));top:calc(16px + env(safe-area-inset-top))}.close{right:calc(16px + env(safe-area-inset-right));top:calc(16px + env(safe-area-inset-top));z-index:2}.photo-strips{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.grove-strip{position:absolute;left:0;right:0;pointer-events:auto}.grove-strip.top{top:calc(64px + env(safe-area-inset-top))}.strip{overflow:hidden;touch-action:none;cursor:grab;padding:10px 0 16px}.strip:active{cursor:grabbing}.strip-track{display:flex;width:max-content;will-change:transform}.print{margin:0 8px;padding:6px 6px 20px;background:var(--cream);border:1px solid rgba(122,46,53,.35);box-shadow:3px 5px #2a1f2e21,0 14px 28px #2a1f2e1f;transform:rotate(var(--tilt));flex:none}.print img{display:block;height:min(17vh,190px);width:auto;max-width:60vw;object-fit:cover;pointer-events:none}.birthday-title{--pink: #ec6f9c;--pink-deep: #c93d6c;position:absolute;left:0;right:0;bottom:0;height:33vh;padding-bottom:calc(1vh + env(safe-area-inset-bottom));margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Roboto,sans-serif;font-weight:900;font-size:clamp(18px,6vw,34px);line-height:1;color:#fff;pointer-events:none}.ribbon{position:relative;z-index:1;margin-bottom:.12em}.ribbon .band{position:relative;display:block;padding:.5em 1.1em .45em;background:linear-gradient(#f590b6,var(--pink) 55%,#e2578a);text-transform:uppercase;letter-spacing:.14em;box-shadow:0 3px 0 var(--pink-deep),0 8px 16px #50142840;text-shadow:0 1px 0 rgba(150,30,70,.45)}.ribbon .tail{position:absolute;top:.45em;width:1.7em;height:100%;background:var(--pink-deep)}.ribbon .tail.left{left:-1.15em;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,38% 50%)}.ribbon .tail.right{right:-1.15em;clip-path:polygon(0 0,100% 0,62% 50%,100% 100%,0 100%)}.birthday-title .name{position:relative;display:flex;font-size:min(26vw,15vh,160px);letter-spacing:-.02em;text-shadow:0 1px 0 #f7a8c6,0 2px 0 var(--pink),0 3px 0 var(--pink),0 4px 0 #e2578a,0 5px 0 #e2578a,0 6px 0 var(--pink-deep),0 7px 0 var(--pink-deep),0 12px 18px rgba(80,20,40,.35)}.bday-letter{display:inline-block;animation:letter-pop .7s cubic-bezier(.3,1.7,.5,1) calc(1.15s + var(--i) * .08s) both,letter-wave 2.2s ease-in-out calc(2s + var(--i) * .13s) infinite}@keyframes letter-pop{0%{scale:0;rotate:-20deg}to{scale:1;rotate:0deg}}@keyframes letter-wave{0%,60%,to{translate:0 0}30%{translate:0 -.09em}}.sparkle{position:absolute;width:.3em;height:.3em;fill:#ffe066;filter:drop-shadow(0 1px 1px rgba(80,20,40,.3));animation:twinkle 1.8s ease-in-out infinite}.sparkle.s1{left:-.32em;top:.05em}.sparkle.s2{right:-.3em;top:.35em;width:.22em;height:.22em;fill:#fff;animation-delay:.6s}.sparkle.s3{left:-.12em;bottom:-.05em;width:.18em;height:.18em;fill:#fff;animation-delay:1.1s}.sparkle.s4{right:-.08em;top:-.12em;width:.2em;height:.2em;animation-delay:.3s}@keyframes twinkle{0%,to{scale:.4;rotate:0deg;opacity:.3}50%{scale:1;rotate:45deg;opacity:1}}@media(prefers-reduced-motion:reduce){.bday-letter,.sparkle{animation:none}}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}.confetti.shown{opacity:1;transition-delay:.5s}.carousel{position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}.carousel.hidden{opacity:0;transform:translateY(18px)}.carousel-track{display:flex;gap:8px;padding:12px 16px 8px;overflow-x:auto;scrollbar-width:none}.carousel-track::-webkit-scrollbar{display:none}.carousel-track:before,.carousel-track:after{content:"";flex:1 0 0}.mini{flex:none;width:52px;height:74px;padding:0;border:0;background-size:100% 100%;box-shadow:2px 3px #2a1f2e24,0 6px 14px #2a1f2e24;display:grid;place-items:center;cursor:pointer;pointer-events:auto}.carousel.hidden .mini{pointer-events:none}.mini span{font-family:Nunito,sans-serif;font-weight:800;font-size:11px;line-height:1;padding:0 4px;text-align:center;color:var(--burgundy)}.mini.ghost{visibility:hidden}.letter-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.letter{position:relative;background-size:100% 100%;container-type:inline-size;filter:drop-shadow(0 18px 30px rgba(28,34,51,.25))}.letter-body{position:absolute;top:19%;right:20%;bottom:16%;left:20%;padding:4cqw 0;-webkit-mask-image:linear-gradient(transparent,#000 5cqw,#000 calc(100% - 5cqw),transparent);mask-image:linear-gradient(transparent,#000 5cqw,#000 calc(100% - 5cqw),transparent);display:flex;flex-direction:column;align-items:center;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y;user-select:text;-webkit-user-select:text}.letter-body::-webkit-scrollbar{display:none}.letter-text{margin:auto 0 0;font-size:clamp(12px,4cqw,21px);line-height:1.5;text-align:center;white-space:pre-line;overflow-wrap:anywhere}.letter-sign{margin:7cqw 0 auto;display:flex;flex-direction:column;align-items:center;gap:2.5cqw;width:70%}.letter-sign .rule{width:100%;height:2px;background:var(--burgundy);opacity:.85}.letter-sign .sig{font-family:Pinyon Script,cursive;font-size:clamp(22px,9cqw,46px);line-height:1.1}@media(prefers-reduced-motion:reduce){.enter:disabled{animation:none}}