@font-face{font-family:Bagel Fat One;font-style:normal;font-display:swap;font-weight:400;src:url(./bagel-fat-one-latin-400-normal-CB1T13M1.woff2)format("woff2"),url(./bagel-fat-one-latin-400-normal-BFAfIXLM.woff)format("woff")}@font-face{font-family:Nunito Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(./nunito-cyrillic-ext-wght-normal-D4X5GqEv.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Nunito Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(./nunito-cyrillic-wght-normal-CY6AOgYE.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Nunito Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(./nunito-vietnamese-wght-normal-U01xdrZh.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Nunito Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(./nunito-latin-ext-wght-normal-CXYtwYOx.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Nunito Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(./nunito-latin-wght-normal-BzFMHfZw.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--cream:#fff7f0;--paper:#fff8ea;--pink:#f6c9cf;--pink-mid:#f6a3b0;--pink-soft:#fde3e6;--accent:#d9546b;--ink:#3a2230;--muted:#7a6170;--gold:#ffc93c;--lilac:#cdb8e8;--sky:#a8d4e6;--mint:#a9c7a0;--display:"Bagel Fat One", "Nunito Variable", system-ui, sans-serif;--body:"Nunito Variable", system-ui, sans-serif;--pop:cubic-bezier(.3, 1.6, .5, 1);--soft:cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}body{background:var(--cream);min-height:100dvh;color:var(--ink);font-family:var(--body);background-image:radial-gradient(#d9546b1a 1.4px,#0000 1.6px);background-size:22px 22px;margin:0;line-height:1.55;overflow-x:hidden}body:not(.opened){overflow:hidden}[hidden]{display:none!important}button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}:focus-visible{outline:3px solid var(--ink);outline-offset:3px}h1,h2{font-family:var(--display);margin:0;font-weight:400;line-height:1.05}#confetti{z-index:40;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}#sound{z-index:30;border:2px solid var(--ink);background:var(--paper);width:48px;height:48px;box-shadow:0 3px 0 var(--ink);border-radius:50%;place-items:center;display:grid;position:fixed;top:14px;right:14px}#sound[aria-pressed=true] .mute{display:none}#sound[aria-pressed=true] svg{animation:1.2s ease-in-out infinite bob}#intro{z-index:20;background:var(--pink);background-image:radial-gradient(#ffffff8c 2px,#0000 2.4px);background-size:26px 26px;place-content:center;justify-items:center;gap:22px;padding:16px;transition:opacity .5s,transform .5s;display:grid;position:fixed;inset:0}#intro.gone{opacity:0;pointer-events:none;transform:scale(1.08)}#envelope{aspect-ratio:3/2;perspective:900px;background:0 0;border:0;width:min(82vw,340px);padding:0;position:relative}#envelope.idle{animation:2.4s ease-in-out infinite wobble}#envelope span{will-change:transform, opacity;display:block;position:absolute}.env-back{background:#e98a9b;border-radius:14px;inset:0;box-shadow:0 14px #3a22301f}.env-letter{z-index:1;background:var(--paper);font-family:var(--display);background-image:repeating-linear-gradient(#0000 0 22px,#d9546b24 22px 24px);border-radius:10px;place-items:start center;padding-top:9%;font-size:clamp(20px,6vw,26px);inset:7% 6% 8%;display:grid!important}.env-front{z-index:2;background:var(--pink-mid);clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);border-radius:14px;inset:0}.env-flap{z-index:3;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;backface-visibility:visible;background:#f08ea0;height:58%;inset:0 0 auto}.env-seal{z-index:4;width:52px;top:calc(46% - 23px);left:calc(50% - 26px)}.env-seal svg{fill:var(--accent);filter:drop-shadow(0 2px #3a223040);display:block}#env-hint{background:var(--paper);border-radius:999px;margin:0;padding:6px 16px;font-weight:800;animation:1.6s ease-in-out infinite bob}main{overflow:hidden}section,footer{text-align:center;padding:72px 16px;position:relative}.reveal{opacity:0;transition:opacity .9s var(--soft), transform .9s var(--soft);transition-delay:var(--d,0s);transform:translateY(28px)}.reveal.in{opacity:1;transform:none}.hint{max-width:30ch;color:var(--muted);margin:10px auto 0}.hero{background:linear-gradient(var(--pink) 0%, var(--pink-soft) 70%, transparent);place-content:center;justify-items:center;min-height:100dvh;padding-top:90px;display:grid}#balloons{pointer-events:none;position:absolute;inset:0}.balloon,.toy{z-index:2;pointer-events:auto;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;will-change:transform;transform-origin:50% 35%;position:absolute;top:0;left:0}.balloon.held,.toy.held{z-index:5;cursor:grabbing}.balloon .sway{animation:4s ease-in-out infinite float;animation-delay:var(--delay);transition:opacity .25s,scale .25s}.balloon.held .sway{animation-play-state:paused;scale:1.1}.balloon svg{pointer-events:none;width:100%;display:block}.balloon.popped .sway{opacity:0;scale:1.6}.balloon.popped{pointer-events:none}.over{background:var(--ink);color:var(--paper);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;margin:0 0 12px;padding:4px 14px;font-size:.9rem;font-weight:800}.opened .over{opacity:1;transition-delay:.2s;transform:none}#hero-title{color:var(--ink);font-size:clamp(44px,14vw,96px);position:relative}.line{display:block}.letter{opacity:0;display:inline-block}.opened .letter{animation:drop .7s var(--pop) both;animation-delay:calc(.4s + var(--i) * 50ms)}.line+.line .letter{color:var(--accent)}.name{font-family:var(--display);opacity:0;background:linear-gradient(transparent 62%, var(--gold) 62% 88%, transparent 88%);margin:10px 0 0;padding:0 10px;font-size:clamp(36px,11vw,72px);line-height:1.1;position:relative}.opened .name{animation:pop .8s var(--pop) 1.3s both}.age{background:var(--gold);width:88px;height:88px;box-shadow:0 0 0 6px var(--paper), 0 0 0 8px var(--ink);opacity:0;border-radius:50%;place-content:center;margin:26px auto 0;display:grid;position:relative;rotate:12deg}.opened .age{animation:pop .8s var(--pop) 1.7s both}.age b{font-family:var(--display);font-size:34px;font-weight:400;line-height:1}.age span{font-size:.8rem;font-weight:800}.tip{opacity:0;background:#fff8ead9;border-radius:999px;margin:26px 0 0;padding:6px 14px;font-size:.92rem;font-weight:700}.opened .tip{animation:pop .6s var(--pop) 2.2s both}.scroll{color:var(--muted);margin:28px 0 0;font-weight:800;animation:1.6s ease-in-out infinite bob}.scroll:after{content:"";border-bottom:3px solid;border-right:3px solid;width:12px;height:12px;margin:8px auto 0;display:block;rotate:45deg}.photos h2,.cake h2{font-size:clamp(34px,9vw,52px)}#polaroids{flex-wrap:wrap;justify-content:center;gap:22px 16px;max-width:760px;margin:36px auto 0;display:flex}.polaroid{width:min(42vw,200px);rotate:var(--tilt);transition:opacity .7s, transform .7s var(--pop), rotate .3s var(--pop), scale .3s var(--pop);background:#fff;border:0;border-radius:6px;padding:10px 10px 0;box-shadow:0 10px 22px #3a223029}.polaroid:hover,.polaroid:focus-visible{rotate:0deg;scale:1.05}.polaroid:active{scale:.97}.polaroid img{aspect-ratio:4/5;object-fit:cover;border-radius:3px;width:100%;display:block}.polaroid span{font-family:var(--display);padding:8px 2px 12px;font-size:.95rem;display:block}#letter{width:100%;max-width:none;height:100%;max-height:none;color:var(--ink);background:0 0;border:0;margin:0;padding:16px;overflow:hidden}#letter[open]{place-items:center;display:grid}#letter::backdrop{background:#f6c9cfe6}.letter-hearts{pointer-events:none;position:absolute;inset:0}.letter-hearts span{font-size:calc(28px * var(--s));animation:rise 7s linear var(--d) infinite;position:absolute;bottom:-40px}.letter-paper{background:var(--paper);width:min(100%,460px);box-shadow:0 0 0 4px var(--paper), 0 0 0 6px var(--pink-mid), 0 24px 50px #3a223040;text-align:center;animation:arrive .7s var(--pop);border-radius:18px;padding:64px 26px 26px;position:relative}.letter-paper.turn .washi{z-index:2;opacity:.85;clip-path:polygon(4% 0,96% 0,100% 20%,96% 40%,100% 60%,96% 80%,100% 100%,4% 100%,0 80%,4% 60%,0 40%,4% 20%,0 0);width:96px;height:26px;position:absolute}.washi-l{background:repeating-linear-gradient(90deg,#f6a3b0 0 10px,#fbd0d7 10px 18px);top:-13px;left:calc(50% - 48px);rotate:-3deg}.washi-r{background:radial-gradient(circle,#fff 3px,#0000 3.5px) 0 0/14px 13px,#a8d4e6;bottom:-13px;left:calc(50% - 48px);rotate:4deg}.stk{z-index:3;pointer-events:none;width:84px;position:absolute;top:-30px}.stk-l{left:-16px;rotate:-12deg}.stk-r{right:-16px;rotate:10deg}.stk[data-kind=hbd]{width:104px;top:-24px}.stk[data-kind=stamp]{width:70px;top:-34px}.stk.stick{animation:stick .55s var(--pop) both}.stk-r.stick{animation-delay:.12s}.doodle{z-index:1;pointer-events:none;font-size:18px;animation:2.4s ease-in-out infinite twinkle;position:absolute}.d1{color:var(--lilac);top:34%;left:10px}.d2{color:var(--pink-mid);animation-delay:.6s;top:50%;right:10px}.d3{color:var(--gold);animation-delay:1.2s;top:64%;left:12px}.d4{color:var(--gold);font-size:14px;animation-delay:1.8s;top:28%;right:12px}#letter-text{animation:turn .45s var(--pop)}.letter-ribbon{background:var(--pink-mid);clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);padding:10px 20px;position:absolute;top:16px;left:-14px;right:-14px}.letter-ribbon h2{font-size:clamp(26px,7vw,34px)}.letter-paper:after{content:none;color:var(--pink-mid);font-size:28px;position:absolute;top:-18px;right:22px;rotate:14deg}#letter-text{--rule:36px;min-height:calc(var(--rule) * 5);font-size:1.12rem;font-weight:600;line-height:var(--rule);background:repeating-linear-gradient(transparent 0 calc(var(--rule) - 6px), #d9546b38 calc(var(--rule) - 6px) calc(var(--rule) - 4px), transparent calc(var(--rule) - 4px) var(--rule));cursor:pointer;margin:26px 0 8px;padding:0 4px}#letter-text.typing:after{content:"|";color:var(--accent);margin-left:2px;animation:.8s steps(2,end) infinite blink}.sign{font-family:var(--display);color:var(--accent);margin:0 0 8px;font-size:1.5rem}.letter-dots{justify-content:center;gap:8px;margin:10px 0 18px;display:flex}.letter-dots span{background:var(--pink);border-radius:50%;width:9px;height:9px;transition:width .3s,background .3s}.letter-dots span.on{background:var(--accent);border-radius:9px;width:26px}.letter-actions{justify-content:space-between;gap:12px;display:flex}.letter-actions button{border-radius:999px;min-height:48px;padding:0 20px;font-weight:800}#letter-prev{border:2px solid var(--ink);background:var(--paper)}#letter-next{background:var(--accent);color:var(--paper);border:0;margin-left:auto;box-shadow:0 4px #a33a4f}#letter-next:active{transform:translateY(3px);box-shadow:0 1px #a33a4f}.cake-wrap{width:min(80vw,320px);margin:26px auto 0;position:relative}.cake-art{width:100%;display:block;overflow:visible}#candle{background:0 0;border:0;border-radius:40px;width:76px;height:46%;position:absolute;top:0;left:50%;translate:-50% -6%}#flame{--blow:1;transform-box:fill-box;transform-origin:50% 100%;scale:var(--blow);transition:scale .3s,opacity .3s;animation:.18s ease-in-out infinite alternate flicker}#flame.gust{animation:.45s ease-out gust,.18s ease-in-out .45s infinite alternate flicker}#flame.out{opacity:0;scale:.1}#smoke{transform-box:fill-box;transform-origin:50% 100%}#smoke.rise{animation:1.6s ease-out both smoke}#hearts{pointer-events:none;position:absolute;inset:0}.heart{animation:heart 2.8s ease-out var(--d) both;font-size:26px;position:absolute;bottom:40%}#wish{min-height:2.4em;font-family:var(--display);color:var(--accent);opacity:0;transition:opacity .4s, transform .6s var(--pop);margin:18px 0 0;font-size:clamp(26px,7vw,36px);transform:scale(.6)}#wish.show{opacity:1;transform:none}.after-wish{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}#reopen{background:var(--accent);min-height:48px;color:var(--paper);border:0;border-radius:999px;padding:0 22px;font-weight:800;box-shadow:0 4px #a33a4f}#relight,#again{border:2px solid var(--ink);background:var(--paper);min-height:48px;box-shadow:0 4px 0 var(--ink);border-radius:999px;padding:0 22px;font-weight:800;transition:transform .15s,box-shadow .15s}#again{border-color:var(--accent);background:var(--accent);color:var(--paper);box-shadow:0 4px #a33a4f}#relight:active,#again:active{box-shadow:0 0 0 var(--ink);transform:translateY(4px)}.toys h2{font-size:clamp(34px,9vw,52px)}#toybox{background:var(--pink-soft);width:min(100%,560px);height:380px;box-shadow:inset 0 0 0 4px var(--paper), inset 0 0 0 6px var(--pink-mid), inset 0 -18px 0 #d9546b1f;background-image:radial-gradient(#d9546b29 1.6px,#0000 1.8px);background-size:18px 18px;border-radius:28px;margin:26px auto 18px;position:relative;overflow:hidden}.toy img{pointer-events:none;width:100%;height:100%;display:block}.toy.held img{filter:drop-shadow(0 8px 6px #3a223033)}#shake{border:2px solid var(--ink);background:var(--gold);min-height:48px;box-shadow:0 4px 0 var(--ink);border-radius:999px;padding:0 22px;font-weight:800;transition:transform .15s,box-shadow .15s}#shake:active{box-shadow:0 0 0 var(--ink);transform:translateY(4px)}footer{background:var(--pink);padding-bottom:96px}#end-text{max-width:22ch;font-family:var(--display);margin:0 auto 22px;font-size:clamp(26px,7vw,38px);line-height:1.15}#viewer{width:min(92vw,440px);color:var(--ink);text-align:center;background:#fff;border:0;border-radius:10px;padding:14px 14px 18px}#viewer[open]{animation:pop .45s var(--pop)}#viewer::backdrop{background:#3a223099}#viewer figure{margin:0}#viewer img{border-radius:4px;width:100%;display:block}#viewer figcaption{font-family:var(--display);margin:12px 0;font-size:1.3rem}#viewer-close{background:var(--accent);min-height:44px;color:var(--paper);border:0;border-radius:999px;padding:0 20px;font-weight:800}@keyframes bob{50%{transform:translateY(-6px)}}@keyframes wobble{0%,70%,to{transform:rotate(0)}76%{transform:rotate(-4deg)}82%{transform:rotate(4deg)}88%{transform:rotate(-2deg)}}@keyframes float{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-16px)rotate(3deg)}}@keyframes drop{0%{opacity:0;transform:translateY(-60px)rotate(-12deg)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}@keyframes spin{to{rotate:372deg}}@keyframes blink{to{opacity:0}}@keyframes flicker{0%{transform:scaleY(1)skew(-2deg)}to{transform:scaleY(1.08)skew(2deg)}}@keyframes gust{30%{transform:skew(-28deg)scaleY(.7)}}@keyframes smoke{0%{opacity:0;transform:translateY(0)scale(.5)}25%{opacity:.85}to{opacity:0;transform:translateY(-40px)scale(1.4)}}@keyframes stick{0%{opacity:0;transform:scale(1.8)rotate(-25deg)}to{opacity:1;transform:none}}@keyframes twinkle{50%{opacity:.6;transform:scale(1.35)rotate(15deg)}}@keyframes arrive{0%{opacity:0;transform:translateY(60px)scale(.6)rotate(-6deg)}to{opacity:1;transform:none}}@keyframes turn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:none}}@keyframes rise{0%{opacity:0;transform:translateY(0)rotate(-10deg)}10%{opacity:.9}to{opacity:0;transform:translateY(-110vh)rotate(10deg)}}@keyframes heart{0%{opacity:0;transform:translate(0)scale(.4)}15%{opacity:1}to{opacity:0;transform:translate(var(--drift), -220px) scale(1.2)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}