💖 Happy Birthday My Beautiful Wife 💖

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_220":221,"_222":223},"routes/_app.x.$handle.$name",{"_106":105,"_38":50,"_115":92,"_33":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":128,"_129":130,"_131":31,"_132":133,"_134":64,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":31},"version",4,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","b9390506-81dc-4530-8321-9af7ea1aa603","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","styles.css","latestPath","fileId","019e6a53-d1ce-71ae-9d97-f84624d005a1","name","fileType","content","/* ===== VARIABLES & RESET ===== */\n:root {\n --blush: #FFD6E0;\n --lavender: #E8D5F5;\n --cream: #FFF8F0;\n --peach: #FFDAB9;\n --baby-blue: #D6EAFF;\n --gold: #FFD700;\n --warm-gold: #F0C060;\n --deep-pink: #FF6B8A;\n --soft-pink: #FFB6C1;\n --rose: #FF7EB3;\n --purple: #C084FC;\n --dark-bg: #1a0a2e;\n --glass-bg: rgba(255,255,255,0.15);\n --glass-border: rgba(255,255,255,0.25);\n --text-primary: #4A2040;\n --text-secondary: #7A5070;\n --font-hand: 'Dancing Script', cursive;\n --font-body: 'Quicksand', sans-serif;\n --font-display: 'Pacifico', cursive;\n --font-letter: 'Caveat', cursive;\n}\n* { margin:0; padding:0; box-sizing:border-box; }\nhtml { scroll-behavior: smooth; overflow-x: hidden; }\nbody {\n font-family: var(--font-body);\n background: var(--cream);\n color: var(--text-primary);\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n}\n\n/* ===== LOADER ===== */\n.loader {\n position:fixed; inset:0; z-index:10000;\n background: linear-gradient(135deg, var(--blush), var(--lavender), var(--baby-blue));\n display:flex; align-items:center; justify-content:center;\n transition: opacity 0.8s, visibility 0.8s;\n}\n.loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }\n.loader-content { text-align:center; }\n.loader-bear { font-size:80px; animation: loaderBounce 1s ease-in-out infinite; }\n@keyframes loaderBounce {\n 0%,100% { transform: translateY(0) scale(1); }\n 50% { transform: translateY(-20px) scale(1.1); }\n}\n.loader-text { font-family:var(--font-hand); font-size:24px; color:var(--text-primary); margin:15px 0; }\n.loader-hearts { display:flex; gap:8px; justify-content:center; font-size:20px; }\n.loader-hearts span { animation: heartPop 1.2s ease-in-out infinite; }\n.loader-hearts span:nth-child(1){animation-delay:0s}\n.loader-hearts span:nth-child(2){animation-delay:.15s}\n.loader-hearts span:nth-child(3){animation-delay:.3s}\n.loader-hearts span:nth-child(4){animation-delay:.45s}\n.loader-hearts span:nth-child(5){animation-delay:.6s}\n@keyframes heartPop {\n 0%,100% { transform:scale(1); opacity:.6; }\n 50% { transform:scale(1.4); opacity:1; }\n}\n.loader-bar { width:200px; height:6px; background:rgba(255,255,255,.3); border-radius:3px; margin:20px auto 0; overflow:hidden; }\n.loader-bar-fill {\n width:0; height:100%; border-radius:3px;\n background: linear-gradient(90deg, var(--deep-pink), var(--gold), var(--rose));\n animation: loaderFill 2.5s ease-in-out forwards;\n}\n@keyframes loaderFill { to { width:100%; } }\n\n/* ===== FIXED BUTTONS ===== */\n.music-btn,.theme-btn {\n position:fixed; z-index:9999;\n width:48px; height:48px;\n border-radius:50%; border:none;\n background:rgba(255,255,255,.2);\n backdrop-filter:blur(10px);\n -webkit-backdrop-filter:blur(10px);\n border:1px solid rgba(255,255,255,.3);\n font-size:20px; cursor:pointer;\n transition:all .3s;\n box-shadow:0 4px 15px rgba(0,0,0,.1);\n}\n.music-btn{top:20px;right:20px}\n.theme-btn{top:20px;right:78px}\n.music-btn:hover,.theme-btn:hover {\n transform:scale(1.1);\n box-shadow:0 6px 25px rgba(255,107,138,.3);\n}\n\n/* ===== GLASS CARD ===== */\n.glass-card {\n background:rgba(255,255,255,.2);\n backdrop-filter:blur(20px);\n -webkit-backdrop-filter:blur(20px);\n border:1px solid rgba(255,255,255,.3);\n border-radius:24px;\n box-shadow:0 8px 32px rgba(0,0,0,.08);\n}\n\n/* ===== GLOW BUTTON ===== */\n.glow-btn {\n position:relative;\n padding:16px 40px;\n background: linear-gradient(135deg, var(--deep-pink), var(--rose), var(--purple));\n color:white; border:none; border-radius:50px;\n font-family:var(--font-hand);\n font-size:22px; font-weight:700;\n cursor:pointer; overflow:hidden;\n transition:all .4s;\n box-shadow:0 6px 30px rgba(255,107,138,.4);\n}\n.glow-btn:hover {\n transform:translateY(-3px) scale(1.05);\n box-shadow:0 10px 40px rgba(255,107,138,.6);\n}\n.glow-btn .btn-glow {\n position:absolute; inset:-2px;\n background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);\n animation:btnShimmer 2s infinite;\n}\n@keyframes btnShimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }\n\n/* ===== SECTION COMMON ===== */\n.section {\n min-height:100vh;\n display:flex; flex-direction:column;\n align-items:center; justify-content:center;\n position:relative; overflow:hidden;\n padding:60px 20px;\n}\n.section-header { text-align:center; margin-bottom:40px; z-index:2; }\n.section-title {\n font-family:var(--font-display);\n font-size:clamp(28px,6vw,48px);\n background:linear-gradient(135deg,var(--deep-pink),var(--purple),var(--warm-gold));\n background-size:200%;\n -webkit-background-clip:text;\n -webkit-text-fill-color:transparent;\n background-clip:text;\n animation:gradientText 4s ease-in-out infinite;\n margin-bottom:10px;\n}\n@keyframes gradientText {\n 0%,100%{background-position:0% 50%}\n 50%{background-position:100% 50%}\n}\n.section-sub {\n font-family:var(--font-hand);\n font-size:clamp(16px,3vw,22px);\n color:var(--text-secondary);\n}\n\n/* ===== HERO ===== */\n.hero {\n background:linear-gradient(180deg,#0d0221 0%,#1a0a3e 30%,#2d1b69 60%,#1a0a2e 100%);\n color:white; padding:0;\n}\n.hero-canvas {\n position:absolute; inset:0;\n width:100%; height:100%; z-index:1;\n}\n.hero-overlay {\n position:absolute; inset:0;\n background:radial-gradient(ellipse at 50% 80%,rgba(255,182,193,.15),transparent 70%);\n z-index:2;\n}\n.hero-content {\n position:relative; z-index:3;\n text-align:center; padding:20px;\n display:flex; flex-direction:column;\n align-items:center; gap:20px;\n}\n.hero-mascot { opacity:0; animation:mascotEnter 2s ease-out 3s forwards; }\n@keyframes mascotEnter {\n 0%{opacity:0;transform:translateX(-100px)}\n 100%{opacity:1;transform:translateX(0)}\n}\n.chibi-walk { animation:chibiWalk 2s ease-in-out infinite; }\n@keyframes chibiWalk {\n 0%,100%{transform:translateY(0) rotate(0deg)}\n 25%{transform:translateY(-5px) rotate(-2deg)}\n 75%{transform:translateY(-5px) rotate(2deg)}\n}\n.hero-cake {\n font-size:60px; opacity:0;\n animation:cakeAppear 1.5s ease-out 3.5s forwards;\n filter:drop-shadow(0 0 20px rgba(255,215,0,.5));\n}\n@keyframes cakeAppear {\n 0%{opacity:0;transform:scale(0) rotate(-20deg)}\n 60%{transform:scale(1.2) rotate(5deg)}\n 100%{opacity:1;transform:scale(1) rotate(0deg)}\n}\n.hero-title {\n font-family:var(--font-display);\n font-size:clamp(32px,8vw,64px);\n background:linear-gradient(135deg,var(--soft-pink),var(--gold),var(--blush));\n -webkit-background-clip:text;\n -webkit-text-fill-color:transparent;\n background-clip:text;\n min-height:1.2em;\n}\n.hero-subtitle {\n font-family:var(--font-hand);\n font-size:clamp(18px,4vw,28px);\n color:var(--soft-pink);\n opacity:0; min-height:1.2em;\n}\n.hero-btn { opacity:0; animation:btnAppear 1s ease-out 7s forwards; }\n@keyframes btnAppear {\n 0%{opacity:0;transform:translateY(20px)}\n 100%{opacity:1;transform:translateY(0)}\n}\n.scroll-indicator {\n position:absolute; bottom:30px; z-index:3;\n font-size:28px; color:rgba(255,255,255,.5);\n opacity:0;\n animation:scrollBounce 2s ease-in-out infinite, btnAppear 1s ease-out 8s forwards;\n}\n@keyframes scrollBounce {\n 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)}\n}\n\n/* ===== TIMELINE ===== */\n.timeline-section {\n background:linear-gradient(180deg,var(--cream),var(--blush) 50%,var(--lavender));\n padding-bottom:80px;\n}\n.timeline-container { position:relative; max-width:700px; width:100%; }\n.timeline-line {\n position:absolute; left:50%; top:0; bottom:0;\n width:3px;\n background:linear-gradient(180deg,var(--deep-pink),var(--purple),var(--warm-gold));\n transform:translateX(-50%);\n border-radius:2px;\n}\n.timeline-card {\n position:relative; padding:15px 0;\n opacity:0; transform:translateY(40px);\n transition:all .8s cubic-bezier(.16,1,.3,1);\n}\n.timeline-card.visible { opacity:1; transform:translateY(0); }\n.timeline-card[data-anim=\"left\"] .tl-card-inner { margin-right:calc(50% + 20px); }\n.timeline-card[data-anim=\"right\"] .tl-card-inner { margin-left:calc(50% + 20px); }\n.tl-card-inner {\n padding:24px; position:relative;\n transition:transform .3s, box-shadow .3s;\n}\n.tl-card-inner:hover {\n transform:translateY(-5px);\n box-shadow:0 15px 40px rgba(255,107,138,.2);\n}\n.tl-date { font-family:var(--font-hand); font-size:14px; color:var(--deep-pink); margin-bottom:5px; }\n.tl-icon { font-size:36px; margin-bottom:8px; }\n.tl-card-inner h3 { font-family:var(--font-hand); font-size:22px; color:var(--deep-pink); margin-bottom:8px; }\n.tl-card-inner p { font-size:14px; line-height:1.6; color:var(--text-secondary); }\n\n/* ===== REASONS ===== */\n.reasons-section { background:linear-gradient(180deg,var(--lavender),var(--baby-blue),var(--cream)); }\n.reasons-grid {\n display:grid;\n grid-template-columns:repeat(auto-fit,minmax(250px,1fr));\n gap:20px; max-width:900px; width:100%; z-index:2;\n}\n.reason-card {\n padding:28px 20px; text-align:center;\n cursor:pointer; transition:all .4s cubic-bezier(.16,1,.3,1);\n position:relative; overflow:hidden;\n}\n.reason-card::after {\n content:attr(data-mascot);\n position:absolute; bottom:10px; right:10px;\n font-size:24px; opacity:0;\n transition:all .4s; transform:scale(0);\n}\n.reason-card:hover::after,.reason-card.tapped::after { opacity:1; transform:scale(1); }\n.reason-card:hover,.reason-card.tapped {\n transform:translateY(-8px) scale(1.02);\n box-shadow:0 15px 40px rgba(255,107,138,.25);\n border-color:var(--deep-pink);\n}\n.reason-icon { font-size:36px; margin-bottom:12px; display:block; }\n.reason-card p { font-family:var(--font-hand); font-size:18px; color:var(--text-primary); line-height:1.5; }\n\n/* ===== GALLERY ===== */\n.gallery-section { background:linear-gradient(180deg,var(--cream),var(--peach),var(--blush)); }\n.gallery-grid {\n display:grid;\n grid-template-columns:repeat(auto-fit,minmax(180px,1fr));\n gap:24px; max-width:800px; width:100%; z-index:2;\n}\n.polaroid {\n background:white; padding:12px 12px 40px;\n border-radius:4px;\n box-shadow:0 8px 25px rgba(0,0,0,.12);\n transform:rotate(var(--rot,0deg));\n transition:all .5s cubic-bezier(.16,1,.3,1);\n cursor:pointer; position:relative;\n}\n.polaroid:hover {\n transform:rotate(0deg) scale(1.08) translateY(-10px);\n box-shadow:0 20px 50px rgba(255,107,138,.3);\n z-index:10;\n}\n.polaroid-img {\n width:100%; aspect-ratio:1;\n background:linear-gradient(135deg,var(--blush),var(--lavender),var(--baby-blue));\n border-radius:2px;\n display:flex; align-items:center; justify-content:center;\n font-size:60px;\n}\n.polaroid-caption {\n text-align:center; margin-top:12px;\n font-family:var(--font-hand);\n font-size:16px; color:var(--text-secondary);\n}\n\n/* ===== SURPRISE ===== */\n.surprise-section { background:linear-gradient(180deg,var(--blush),var(--lavender),#E8D5F5); }\n.gift-box-wrap { text-align:center; cursor:pointer; z-index:2; }\n.gift-box {\n width:150px; height:130px;\n margin:0 auto; position:relative;\n transition:transform .3s;\n}\n.gift-box:hover { transform:scale(1.05); }\n.gift-body {\n width:150px; height:100px;\n background:linear-gradient(135deg,var(--deep-pink),var(--rose));\n border-radius:8px;\n position:absolute; bottom:0;\n box-shadow:0 8px 30px rgba(255,107,138,.4);\n overflow:hidden;\n}\n.gift-ribbon-v {\n position:absolute; left:50%; top:0;\n width:20px; height:100%;\n background:var(--gold);\n transform:translateX(-50%);\n}\n.gift-ribbon-h {\n position:absolute; top:50%; left:0;\n width:100%; height:20px;\n background:var(--gold);\n transform:translateY(-50%);\n}\n.gift-lid {\n width:160px; height:30px;\n background:linear-gradient(135deg,#FF7EB3,#FF6B8A);\n border-radius:6px;\n position:absolute; top:0; left:-5px;\n box-shadow:0 4px 15px rgba(255,107,138,.3);\n transition:all .6s cubic-bezier(.16,1,.3,1);\n z-index:2;\n}\n.gift-lid.opened { transform:translateY(-80px) rotate(-30deg); opacity:0; }\n.gift-bow {\n font-size:40px;\n position:absolute; top:-30px; left:50%;\n transform:translateX(-50%);\n filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));\n}\n.gift-hint {\n font-family:var(--font-hand);\n font-size:20px; color:var(--text-secondary);\n margin-top:20px;\n animation:pulse 2s ease-in-out infinite;\n}\n@keyframes pulse {\n 0%,100%{opacity:.6;transform:scale(1)}\n 50%{opacity:1;transform:scale(1.05)}\n}\n.gift-reveal {\n display:none; z-index:2;\n max-width:500px; width:100%;\n animation:revealFade 1s ease-out;\n}\n.gift-reveal.show { display:block; }\n@keyframes revealFade {\n 0%{opacity:0;transform:translateY(30px) scale(.9)}\n 100%{opacity:1;transform:translateY(0) scale(1)}\n}\n.gift-message { padding:30px; text-align:center; }\n.gift-msg-icon { font-size:50px; margin-bottom:15px; animation:heartbeat 1.5s ease-in-out infinite; }\n@keyframes heartbeat {\n 0%,100%{transform:scale(1)}\n 15%{transform:scale(1.15)}\n 30%{transform:scale(1)}\n 45%{transform:scale(1.1)}\n}\n.gift-message h3 { font-family:var(--font-hand); font-size:28px; color:var(--deep-pink); margin-bottom:15px; }\n.gift-message p { font-size:15px; line-height:1.7; color:var(--text-secondary); margin-bottom:12px; }\n.gift-sig { font-family:var(--font-hand); font-size:22px; color:var(--deep-pink)!important; margin-top:15px; }\n\n/* ===== MINI GAME ===== */\n.game-section { background:linear-gradient(180deg,var(--baby-blue),var(--lavender),var(--blush)); }\n.game-container { max-width:500px; width:100%; z-index:2; }\n.game-stats {\n display:flex; justify-content:space-between;\n padding:12px 20px; margin-bottom:15px;\n background:rgba(255,255,255,.3);\n backdrop-filter:blur(10px);\n border-radius:16px;\n font-weight:700; font-size:18px;\n color:var(--deep-pink);\n}\n.game-area {\n width:100%; height:350px;\n background:rgba(255,255,255,.15);\n backdrop-filter:blur(10px);\n border-radius:24px;\n border:2px solid rgba(255,255,255,.3);\n position:relative; overflow:hidden;\n touch-action:manipulation;\n}\n.game-start-overlay {\n position:absolute; inset:0;\n display:flex; align-items:center; justify-content:center;\n background:rgba(255,255,255,.1); z-index:5;\n}\n.game-start-overlay.hidden { display:none; }\n.game-start-btn { font-size:20px; }\n.game-heart {\n position:absolute; font-size:30px;\n cursor:pointer; user-select:none;\n transition:transform .15s;\n animation:heartDrift 3s linear forwards;\n z-index:2;\n}\n@keyframes heartDrift {\n 0%{transform:translateY(-50px);opacity:0}\n 10%{opacity:1}\n 90%{opacity:1}\n 100%{transform:translateY(400px);opacity:0}\n}\n.game-heart:active { transform:scale(1.3); }\n.game-result {\n text-align:center; padding:15px;\n font-family:var(--font-hand);\n font-size:22px; color:var(--deep-pink);\n min-height:50px;\n}\n.hug-wrap { text-align:center; margin-top:15px; }\n.hug-btn { font-size:18px; padding:14px 32px; }\n.hug-anim {\n font-size:60px; margin-top:15px;\n min-height:80px;\n display:flex; align-items:center; justify-content:center;\n}\n\n/* ===== LOVE LETTER ===== */\n.letter-section {\n background:linear-gradient(180deg,#2d1b4e,#1a0a3e,#0d0221);\n color:white;\n}\n.petal-canvas {\n position:absolute; inset:0;\n width:100%; height:100%;\n z-index:1; pointer-events:none;\n}\n.letter-container { z-index:2; max-width:550px; width:100%; }\n.letter-paper {\n background:rgba(255,255,255,.08)!important;\n border-color:rgba(255,255,255,.15)!important;\n padding:40px 30px; position:relative;\n}\n.letter-wax {\n font-size:40px;\n position:absolute; top:-20px; left:50%;\n transform:translateX(-50%);\n}\n.letter-content { margin-top:10px; }\n.letter-line {\n font-family:var(--font-letter);\n font-size:20px; line-height:1.8;\n color:rgba(255,255,255,.85);\n opacity:0; transform:translateY(10px);\n transition:all .6s ease-out;\n}\n.letter-line.visible { opacity:1; transform:translateY(0); }\n.letter-sig {\n font-family:var(--font-hand)!important;\n font-size:26px!important;\n color:var(--soft-pink)!important;\n}\n\n/* ===== ENDING ===== */\n.ending-section {\n background:linear-gradient(180deg,#0d0221,#1a0a3e,#0a0015);\n color:white;\n}\n.fireworks-canvas {\n position:absolute; inset:0;\n width:100%; height:100%; z-index:1;\n}\n.ending-content { z-index:2; text-align:center; padding:20px; }\n.ending-couple {\n display:flex; align-items:center;\n justify-content:center; gap:10px;\n margin-bottom:30px;\n}\n.ending-char { font-size:60px; animation:charSway 2s ease-in-out infinite; }\n.char-left{animation-delay:0s}\n.char-right{animation-delay:.5s}\n@keyframes charSway {\n 0%,100%{transform:translateY(0) rotate(-3deg)}\n 50%{transform:translateY(-10px) rotate(3deg)}\n}\n.ending-heart { font-size:40px; animation:heartbeat 1.5s ease-in-out infinite; }\n.ending-title {\n font-family:var(--font-display);\n font-size:clamp(28px,7vw,52px);\n background:linear-gradient(135deg,var(--soft-pink),var(--gold),var(--blush));\n -webkit-background-clip:text;\n -webkit-text-fill-color:transparent;\n background-clip:text;\n margin-bottom:20px;\n}\n.ending-quote {\n font-family:var(--font-hand);\n font-size:clamp(16px,3.5vw,22px);\n color:rgba(255,255,255,.7);\n line-height:1.8;\n max-width:500px; margin:0 auto 30px;\n}\n.ending-lanterns { height:120px; position:relative; margin-bottom:20px; }\n.lantern {\n position:absolute;\n width:24px; height:32px;\n background:radial-gradient(ellipse,var(--gold),#FF8C00);\n border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;\n box-shadow:0 0 20px rgba(255,215,0,.6),0 0 40px rgba(255,215,0,.3);\n animation:lanternFloat 6s ease-in-out infinite;\n}\n@keyframes lanternFloat {\n 0%,100%{transform:translateY(0) rotate(-2deg)}\n 30%{transform:translateY(-30px) rotate(2deg)}\n 60%{transform:translateY(-15px) rotate(-1deg)}\n}\n.replay-btn { font-size:20px; padding:14px 36px; }\n\n/* ===== FLOATING QUOTE ===== */\n.floating-quote {\n position:fixed; bottom:30px; left:50%;\n transform:translateX(-50%);\n background:rgba(255,255,255,.2);\n backdrop-filter:blur(15px);\n -webkit-backdrop-filter:blur(15px);\n border:1px solid rgba(255,255,255,.3);\n border-radius:20px;\n padding:12px 24px;\n font-family:var(--font-hand);\n font-size:16px; color:var(--text-primary);\n z-index:100; opacity:0;\n transition:opacity .6s;\n pointer-events:none;\n max-width:90vw; text-align:center;\n}\n.floating-quote.show { opacity:1; }\n\n/* ===== CONFETTI ===== */\n.confetti-piece {\n position:fixed;\n width:10px; height:10px;\n top:-10px; z-index:9998;\n pointer-events:none;\n animation:confettiDrop 3s ease-in forwards;\n}\n@keyframes confettiDrop {\n 0%{top:-10px;opacity:1;transform:rotate(0deg) scale(1)}\n 100%{top:110vh;opacity:0;transform:rotate(720deg) scale(.5)}\n}\n\n/* ===== HEART BURST ===== */\n.heart-burst {\n position:absolute; font-size:16px;\n pointer-events:none;\n animation:burstOut .8s ease-out forwards;\n z-index:50;\n}\n@keyframes burstOut {\n 0%{opacity:1;transform:translate(0,0) scale(.5)}\n 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1.2)}\n}\n\n/* ===== RESPONSIVE ===== */\n@media(max-width:768px){\n .timeline-line{left:20px}\n .timeline-card[data-anim=\"left\"] .tl-card-inner,\n .timeline-card[data-anim=\"right\"] .tl-card-inner{margin-left:50px;margin-right:0}\n .reasons-grid{grid-template-columns:1fr}\n .gallery-grid{grid-template-columns:repeat(2,1fr);gap:16px}\n .game-area{height:280px}\n .letter-paper{padding:30px 20px}\n}\n@media(max-width:400px){\n .gallery-grid{grid-template-columns:1fr;max-width:250px}\n}\n","/* ============ CSS VARIABLES & THEME ============ */\n:root {\n --pink: #FFB6C1;\n --blush: #FFC0CB;\n --rose: #FF69B4;\n --lavender: #E6E6FA;\n --peach: #FFDAB9;\n --cream: #FFF8DC;\n --baby-blue: #B0E0E6;\n --gold: #FFD700;\n --soft-gold: #F0E68C;\n --choco: #8B4513;\n --choco-light: #D2691E;\n --choco-cream: #F5DEB3;\n --bg: #FFF0F5;\n --bg2: #FFF5EE;\n --text: #5D3A3A;\n --text-light: #8B6969;\n --glass-bg: rgba(255,255,255,0.35);\n --glass-border: rgba(255,255,255,0.5);\n --glow: rgba(255,105,180,0.4);\n --shadow: rgba(139,69,19,0.15);\n}\n\nbody.dark-mode {\n --bg: #1a1028;\n --bg2: #231338;\n --text: #F8D7E8;\n --text-light: #D4A8C4;\n --glass-bg: rgba(40,20,60,0.5);\n --glass-border: rgba(255,182,193,0.2);\n --glow: rgba(255,105,180,0.5);\n --shadow: rgba(0,0,0,0.3);\n}\n\n/* ============ RESET & BASE ============ */\n*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\n\nhtml { scroll-behavior:smooth; overflow-x:hidden; }\n\nbody {\n font-family: 'Quicksand', sans-serif;\n background: var(--bg);\n color: var(--text);\n overflow-x: hidden;\n cursor: url(\"data:image/svg+xml,\") 12 12, auto;\n}\n\n.section {\n min-height: 100vh;\n position: relative;\n padding: 4rem 1.5rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n/* ============ LOADER ============ */\n.loader {\n position: fixed; inset:0; z-index:10000;\n background: linear-gradient(135deg, #FFF0F5, #FFF5EE, #E6E6FA);\n display: flex; align-items:center; justify-content:center;\n transition: opacity 0.8s, visibility 0.8s;\n}\n.loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }\n.loader-content { text-align:center; }\n.loader-cake { font-size:4rem; animation: cakeDance 1s ease-in-out infinite; }\n.cake-emoji { display:inline-block; animation: bounce 0.6s ease-in-out infinite alternate; }\n.cake-sparkles { font-size:1.5rem; margin-top:0.3rem; animation: sparkle 1s ease-in-out infinite; }\n\n@keyframes cakeDance {\n 0%,100% { transform: rotate(-5deg) scale(1); }\n 50% { transform: rotate(5deg) scale(1.1); }\n}\n@keyframes bounce {\n from { transform: translateY(0); }\n to { transform: translateY(-10px); }\n}\n@keyframes sparkle {\n 0%,100% { opacity:1; transform:scale(1); }\n 50% { opacity:0.5; transform:scale(0.9); }\n}\n\n.loader-text {\n font-family: 'Dancing Script', cursive;\n font-size: 1.4rem; color: var(--rose);\n margin: 1rem 0; animation: fadeInUp 1s ease;\n}\n.loader-hearts { font-size:1.5rem; margin:0.5rem 0; }\n.loader-hearts span {\n display:inline-block; animation: heartFloat 1.5s ease-in-out infinite;\n}\n.loader-hearts span:nth-child(2) { animation-delay:0.2s; }\n.loader-hearts span:nth-child(3) { animation-delay:0.4s; }\n.loader-hearts span:nth-child(4) { animation-delay:0.6s; }\n.loader-hearts span:nth-child(5) { animation-delay:0.8s; }\n@keyframes heartFloat {\n 0%,100% { transform: translateY(0) scale(1); }\n 50% { transform: translateY(-12px) scale(1.2); }\n}\n.loader-bar {\n width:200px; height:6px; background:rgba(255,182,193,0.3);\n border-radius:3px; margin:1rem auto; overflow:hidden;\n}\n.loader-bar-fill {\n height:100%; width:0; background: linear-gradient(90deg,var(--rose),var(--gold));\n border-radius:3px; animation: loadFill 2.5s ease-in-out forwards;\n}\n@keyframes loadFill { to { width:100%; } }\n.loader-chars { margin-top:0.8rem; font-size:1.8rem; }\n.loader-chars .lc {\n display:inline-block; margin:0 0.3rem;\n animation: charBounce 0.8s ease-in-out infinite alternate;\n}\n.loader-chars .lc:nth-child(2) { animation-delay:0.15s; }\n.loader-chars .lc:nth-child(3) { animation-delay:0.3s; }\n.loader-chars .lc:nth-child(4) { animation-delay:0.45s; }\n@keyframes charBounce {\n from { transform: translateY(0) rotate(0deg); }\n to { transform: translateY(-8px) rotate(10deg); }\n}\n\n/* ============ BUTTONS ============ */\n.music-btn, .theme-btn {\n position:fixed; z-index:1000; width:48px; height:48px;\n border-radius:50%; border:2px solid var(--glass-border);\n background: var(--glass-bg); backdrop-filter:blur(10px);\n font-size:1.3rem; cursor:pointer; transition: all 0.3s;\n box-shadow: 0 4px 15px var(--shadow);\n}\n.music-btn { top:1rem; right:1rem; }\n.theme-btn { top:1rem; right:4.5rem; }\n.music-btn:hover, .theme-btn:hover { transform:scale(1.15) rotate(15deg); }\n\n/* ============ CURSOR CANVAS ============ */\n.cursor-canvas {\n position:fixed; inset:0; z-index:9999; pointer-events:none;\n}\n\n/* ============ SIDE NAV ============ */\n.side-nav {\n position:fixed; right:1rem; top:50%; transform:translateY(-50%);\n z-index:900; display:flex; flex-direction:column; gap:0.6rem;\n}\n.nav-dot {\n width:36px; height:36px; border-radius:50%;\n background: var(--glass-bg); backdrop-filter:blur(8px);\n border:2px solid var(--glass-border);\n display:flex; align-items:center; justify-content:center;\n font-size:0.9rem; text-decoration:none;\n transition: all 0.3s; box-shadow: 0 2px 8px var(--shadow);\n}\n.nav-dot:hover, .nav-dot.active {\n transform:scale(1.2); background:var(--rose);\n box-shadow: 0 0 15px var(--glow);\n}\n@media(max-width:768px) {\n .side-nav { right:0.3rem; gap:0.4rem; }\n .nav-dot { width:28px; height:28px; font-size:0.7rem; }\n}\n\n/* ============ GLASS CARD ============ */\n.glass-card {\n background: var(--glass-bg);\n backdrop-filter: blur(12px);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n box-shadow: 0 8px 32px var(--shadow);\n padding: 1.5rem;\n transition: transform 0.3s, box-shadow 0.3s;\n}\n.glass-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 40px var(--shadow), 0 0 20px var(--glow);\n}\n\n/* ============ GLOW BUTTON ============ */\n.glow-btn {\n background: linear-gradient(135deg, var(--rose), #FF1493, var(--gold));\n color: white; border:none; padding:0.9rem 2rem;\n border-radius:50px; font-family:'Quicksand',sans-serif;\n font-size:1.1rem; font-weight:700; cursor:pointer;\n position:relative; overflow:hidden;\n box-shadow: 0 4px 20px var(--glow);\n transition: all 0.3s; display:inline-flex; align-items:center; gap:0.5rem;\n}\n.glow-btn:hover {\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 8px 30px var(--glow);\n}\n.glow-btn:active { transform:scale(0.97); }\n.btn-sparkle { animation: sparkle 1.5s infinite; }\n\n/* ============ SECTION HEADERS ============ */\n.section-header { text-align:center; margin-bottom:2.5rem; position:relative; }\n.section-title {\n font-family:'Dancing Script',cursive; font-size:2.8rem;\n background: linear-gradient(135deg, var(--rose), var(--choco-light), var(--gold));\n -webkit-background-clip:text; -webkit-text-fill-color:transparent;\n background-clip:text; margin-bottom:0.5rem;\n}\n.section-sub {\n font-size:1.1rem; color:var(--text-light);\n font-family:'Caveat',cursive; font-size:1.3rem;\n}\n.title-mascot {\n font-size:2rem; animation: bounce 1s infinite alternate;\n margin-top:0.3rem;\n}\n\n/* ============ CHOCOLATE DRIP DIVIDER ============ */\n.section-divider.choco-drip {\n position:absolute; top:-30px; left:0; right:0; z-index:2;\n line-height:0;\n}\n.section-divider svg { width:100%; height:60px; }\n\n/* ============ HERO ============ */\n.hero {\n background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 30%, #4a2040 60%, #1a0a2e 100%);\n overflow:hidden; padding:0; min-height:100vh;\n}\n.hero-canvas { position:absolute; inset:0; z-index:1; }\n.hero-overlay {\n position:absolute; inset:0; z-index:2;\n background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.3) 100%);\n}\n\n/* Floating characters */\n.float-char {\n position:absolute; z-index:3; font-size:2rem;\n animation: floatAround 6s ease-in-out infinite;\n opacity:0.7; pointer-events:none;\n}\n.fc1 { top:10%; left:5%; animation-delay:0s; }\n.fc2 { top:20%; right:8%; animation-delay:1s; font-size:2.5rem; }\n.fc3 { top:60%; left:8%; animation-delay:2s; }\n.fc4 { top:70%; right:12%; animation-delay:0.5s; }\n.fc5 { top:40%; left:3%; animation-delay:1.5s; }\n.fc6 { top:15%; left:50%; animation-delay:3s; font-size:3rem; }\n.fc7 { top:80%; left:20%; animation-delay:2.5s; }\n.fc8 { top:50%; right:5%; animation-delay:1.8s; }\n\n@keyframes floatAround {\n 0%,100% { transform: translate(0,0) rotate(0deg); }\n 25% { transform: translate(10px,-15px) rotate(5deg); }\n 50% { transform: translate(-5px,-25px) rotate(-3deg); }\n 75% { transform: translate(8px,-10px) rotate(4deg); }\n}\n\n.hero-content {\n position:relative; z-index:5; text-align:center;\n padding: 2rem; max-width:800px;\n}\n\n/* COUPLE + CAKE */\n.hero-couple {\n display:flex; align-items:flex-end; justify-content:center;\n gap:1rem; margin-bottom:1.5rem;\n}\n.chibi { position:relative; }\n.chibi-body { font-size:4rem; animation: chibibounce 2s ease-in-out infinite; }\n.chibi-heart-float {\n position:absolute; top:-20px; left:50%; transform:translateX(-50%);\n font-size:1.2rem; animation: heartRise 2s ease-in-out infinite;\n}\n@keyframes chibibounce {\n 0%,100% { transform:translateY(0); }\n 50% { transform:translateY(-8px); }\n}\n@keyframes heartRise {\n 0% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }\n 100% { opacity:0; transform:translateX(-50%) translateY(-30px) scale(0.5); }\n}\n\n/* CAKE */\n.hero-cake-wrap { position:relative; margin:0 1rem; }\n.cake-main { position:relative; font-size:5rem; z-index:2; }\n.cake-drip {\n position:absolute; top:-10px; left:50%; transform:translateX(-50%);\n width:80px; height:30px; background:var(--choco);\n border-radius:0 0 40% 40%; z-index:1;\n animation: dripAnim 3s ease-in-out infinite;\n}\n@keyframes dripAnim {\n 0%,100% { height:20px; } 50% { height:35px; }\n}\n.cake-face {\n position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);\n font-size:2rem; animation: faceWiggle 3s ease-in-out infinite;\n}\n@keyframes faceWiggle {\n 0%,100% { transform:translate(-50%,-50%) rotate(0); }\n 25% { transform:translate(-50%,-50%) rotate(-3deg); }\n 75% { transform:translate(-50%,-50%) rotate(3deg); }\n}\n.cake-candle {\n position:absolute; top:-25px; width:6px; height:20px;\n background: linear-gradient(to bottom, #FFD700, #FF69B4);\n border-radius:3px;\n}\n.cake-candle.c1 { left:30%; } .cake-candle.c2 { left:50%; } .cake-candle.c3 { left:70%; }\n.flame {\n position:absolute; top:-12px; left:50%; transform:translateX(-50%);\n width:10px; height:14px; background: radial-gradient(#FFF,#FFD700,#FF6B35);\n border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;\n animation: flicker 0.3s ease-in-out infinite alternate;\n}\n@keyframes flicker {\n from { transform:translateX(-50%) scale(1) rotate(-3deg); opacity:1; }\n to { transform:translateX(-50%) scale(1.1) rotate(3deg); opacity:0.8; }\n}\n.cake-layer { display:none; }\n.cake-sprinkles {\n position:absolute; width:100%; top:-30px;\n}\n.cake-sprinkles span {\n position:absolute; font-size:0.8rem;\n animation: sprinkleFall 2s ease-in-out infinite;\n animation-delay: var(--d);\n left: calc(50% + var(--x));\n}\n@keyframes sprinkleFall {\n 0% { transform:translateY(-20px) rotate(0); opacity:0; }\n 50% { opacity:1; }\n 100% { transform:translateY(20px) rotate(360deg); opacity:0; }\n}\n.float-treats {\n position:absolute; width:200px; left:50%; top:-20px;\n transform:translateX(-50%);\n}\n.ft {\n position:absolute; font-size:1.5rem;\n animation: treatFloat 4s ease-in-out infinite;\n}\n.ft1 { left:-40px; animation-delay:0s; }\n.ft2 { left:-60px; top:20px; animation-delay:0.8s; }\n.ft3 { right:-40px; animation-delay:1.6s; }\n.ft4 { right:-60px; top:20px; animation-delay:0.4s; }\n.ft5 { left:0; top:-30px; animation-delay:1.2s; }\n@keyframes treatFloat {\n 0%,100% { transform:translateY(0) rotate(0); opacity:0.8; }\n 50% { transform:translateY(-20px) rotate(15deg); opacity:1; }\n}\n\n.hero-title {\n font-family:'Dancing Script',cursive; font-size:3rem; color:#FFD700;\n text-shadow: 0 0 30px rgba(255,215,0,0.5), 0 0 60px rgba(255,105,180,0.3);\n min-height:3.5rem; margin-bottom:0.5rem;\n}\n.hero-subtitle {\n font-family:'Caveat',cursive; font-size:1.4rem; color:#FFB6C1;\n min-height:2rem; margin-bottom:1.5rem;\n}\n.hero-btn { font-size:1.2rem; padding:1rem 2.5rem; }\n.hero-mascots {\n display:flex; justify-content:center; gap:1rem;\n margin-top:1.5rem;\n}\n.hero-mascots .hm {\n font-size:2rem; display:inline-block;\n animation: mascotWave 2s ease-in-out infinite;\n cursor:pointer; transition: transform 0.3s;\n}\n.hm:hover { transform:scale(1.4) rotate(15deg) !important; }\n.hm:nth-child(2) { animation-delay:0.3s; }\n.hm:nth-child(3) { animation-delay:0.6s; }\n.hm:nth-child(4) { animation-delay:0.9s; }\n.hm:nth-child(5) { animation-delay:1.2s; }\n@keyframes mascotWave {\n 0%,100% { transform:translateY(0) rotate(0); }\n 50% { transform:translateY(-6px) rotate(8deg); }\n}\n\n.scroll-indicator {\n position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);\n z-index:5; animation: scrollBounce 2s infinite;\n}\n.scroll-indicator span { color:white; font-size:2rem; }\n@keyframes scrollBounce {\n 0%,100% { transform:translateX(-50%) translateY(0); }\n 50% { transform:translateX(-50%) translateY(10px); }\n}\n\n/* ============ TIMELINE ============ */\n.timeline-section {\n background: linear-gradient(180deg, var(--bg), var(--cream), var(--bg2));\n padding-top:5rem;\n}\n.timeline-container {\n position:relative; max-width:800px; width:100%;\n padding:2rem 0;\n}\n.timeline-line {\n position:absolute; left:50%; top:0; bottom:0; width:3px;\n background: linear-gradient(to bottom, var(--rose), var(--gold), var(--rose));\n transform:translateX(-50%); border-radius:3px;\n}\n.timeline-card {\n position:relative; width:45%; padding:1rem;\n opacity:0; transform:translateY(30px);\n transition: all 0.8s cubic-bezier(0.4,0,0.2,1);\n}\n.timeline-card.visible { opacity:1; transform:translateY(0); }\n.timeline-card[data-anim=\"left\"] { margin-right:auto; text-align:right; }\n.timeline-card[data-anim=\"right\"] { margin-left:auto; text-align:left; }\n.tl-card-inner { position:relative; }\n.tl-date {\n font-family:'Caveat',cursive; font-size:1rem; color:var(--rose);\n margin-bottom:0.3rem;\n}\n.tl-icon { font-size:2rem; margin-bottom:0.5rem; }\n.tl-card-inner h3 {\n font-family:'Dancing Script',cursive; font-size:1.5rem;\n color:var(--choco-light); margin-bottom:0.5rem;\n}\n.tl-card-inner p { font-size:0.95rem; line-height:1.6; }\n.tl-mascot {\n position:absolute; bottom:-10px; right:-10px;\n font-size:1.5rem; animation: bounce 1.5s infinite alternate;\n}\n\n@media(max-width:768px) {\n .timeline-line { left:20px; }\n .timeline-card { width:calc(100% - 50px); margin-left:50px !important; text-align:left !important; }\n}\n\n/* ============ REASONS ============ */\n.reasons-section {\n background: linear-gradient(180deg, var(--bg2), var(--lavender), var(--bg));\n padding-top:5rem;\n}\n.reasons-grid {\n display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr));\n gap:1.5rem; max-width:1000px; width:100%;\n}\n.reason-card {\n text-align:center; padding:2rem 1.5rem; position:relative;\n overflow:hidden; cursor:pointer;\n opacity:0; transform:translateY(20px) scale(0.95);\n transition: all 0.6s ease;\n}\n.reason-card.visible { opacity:1; transform:translateY(0) scale(1); }\n.reason-card:hover { transform:translateY(-8px) scale(1.03) !important; }\n.reason-icon { font-size:2.5rem; margin-bottom:0.8rem; }\n.reason-card p { font-size:1rem; line-height:1.6; }\n.reason-card::after {\n content: attr(data-mascot);\n position:absolute; bottom:5px; right:10px;\n font-size:1.3rem; opacity:0.6;\n transition: all 0.3s;\n}\n.reason-card:hover::after { opacity:1; transform:scale(1.3) rotate(10deg); }\n\n/* ============ GAMES SECTION ============ */\n.games-section {\n background: linear-gradient(180deg, var(--bg), var(--peach), var(--cream), var(--bg2));\n padding-top:5rem;\n}\n.game-tabs {\n display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem;\n margin-bottom:2rem; max-width:900px;\n}\n.game-tab {\n padding:0.6rem 1.2rem; border-radius:25px;\n border:2px solid var(--glass-border);\n background:var(--glass-bg); backdrop-filter:blur(8px);\n font-family:'Quicksand',sans-serif; font-size:0.85rem;\n font-weight:600; cursor:pointer; transition:all 0.3s;\n color:var(--text);\n}\n.game-tab:hover { transform:translateY(-2px); background:var(--pink); }\n.game-tab.active {\n background: linear-gradient(135deg, var(--rose), #FF1493);\n color:white; border-color:var(--rose);\n box-shadow: 0 4px 15px var(--glow);\n}\n.game-panels { width:100%; max-width:700px; }\n.game-panel { display:none; }\n.game-panel.active { display:block; animation: fadeInUp 0.5s ease; }\n.game-container { text-align:center; }\n.game-desc { font-family:'Caveat',cursive; font-size:1.2rem; margin-bottom:1rem; color:var(--text-light); }\n\n/* Game stats */\n.game-stats {\n display:flex; justify-content:center; gap:1.5rem; margin-bottom:1rem;\n}\n.game-score, .game-timer, .game-combo {\n padding:0.4rem 1rem; border-radius:15px;\n background:var(--glass-bg); backdrop-filter:blur(8px);\n border:1px solid var(--glass-border);\n font-weight:700; font-size:1rem;\n}\n\n/* Catch Hearts */\n.game-area, .runner-area {\n width:100%; height:350px; border-radius:20px;\n background: linear-gradient(180deg, rgba(255,182,193,0.15), rgba(255,218,185,0.15));\n border:2px solid var(--glass-border);\n position:relative; overflow:hidden;\n backdrop-filter:blur(5px);\n}\n.game-start-overlay {\n position:absolute; inset:0;\n display:flex; flex-direction:column; align-items:center; justify-content:center;\n background:rgba(255,255,255,0.8); z-index:10;\n border-radius:20px;\n}\n.game-start-overlay.hidden { display:none; }\n.game-icon-big { font-size:4rem; margin-bottom:0.5rem; animation: bounce 1s infinite alternate; }\n.game-start-overlay p { font-family:'Caveat',cursive; font-size:1.2rem; margin-bottom:1rem; }\n.game-result {\n margin-top:1rem; font-family:'Dancing Script',cursive;\n font-size:1.3rem; color:var(--rose); min-height:2rem;\n}\n.game-result.show { animation: fadeInUp 0.5s ease; }\n\n.falling-item {\n position:absolute; font-size:1.8rem; cursor:pointer;\n animation: fallDown var(--speed, 3s) linear forwards;\n z-index:5; transition: transform 0.1s;\n user-select:none;\n}\n.falling-item:hover { transform:scale(1.3); }\n@keyframes fallDown {\n from { top:-40px; } to { top:360px; }\n}\n.catch-burst {\n position:absolute; font-size:0.9rem; pointer-events:none;\n animation: burstUp 0.6s ease forwards;\n}\n@keyframes burstUp {\n from { opacity:1; transform:scale(1); }\n to { opacity:0; transform:translateY(-30px) scale(1.5); }\n}\n\n/* Memory Match */\n.memory-grid {\n display:grid; grid-template-columns:repeat(4,1fr);\n gap:0.5rem; max-width:400px; margin:0 auto;\n}\n.memory-cell {\n aspect-ratio:1; border-radius:15px;\n background: linear-gradient(135deg, var(--rose), var(--pink));\n display:flex; align-items:center; justify-content:center;\n font-size:2rem; cursor:pointer;\n transition: all 0.4s; position:relative;\n box-shadow: 0 4px 12px var(--shadow);\n}\n.memory-cell .card-back { font-size:1.5rem; }\n.memory-cell .card-front {\n position:absolute; backface-visibility:hidden;\n opacity:0; transition: opacity 0.3s;\n}\n.memory-cell.flipped { background: var(--glass-bg); border:2px solid var(--gold); }\n.memory-cell.flipped .card-front { opacity:1; }\n.memory-cell.flipped .card-back { opacity:0; }\n.memory-cell.matched {\n background: linear-gradient(135deg, var(--gold), var(--soft-gold));\n animation: matchPop 0.5s ease;\n pointer-events:none;\n}\n@keyframes matchPop {\n 0% { transform:scale(1); } 50% { transform:scale(1.2) rotate(10deg); } 100% { transform:scale(1); }\n}\n\n/* Quiz */\n.quiz-card { max-width:500px; margin:0 auto; padding:2rem; }\n.quiz-progress { font-size:0.9rem; color:var(--text-light); margin-bottom:1rem; }\n.quiz-question {\n font-family:'Dancing Script',cursive; font-size:1.5rem;\n margin-bottom:1.5rem; min-height:3rem;\n}\n.quiz-options { display:flex; flex-direction:column; gap:0.6rem; }\n.quiz-option {\n padding:0.8rem 1.2rem; border-radius:15px;\n border:2px solid var(--glass-border);\n background:var(--glass-bg); cursor:pointer;\n font-family:'Quicksand',sans-serif; font-size:1rem;\n transition: all 0.3s; text-align:left;\n}\n.quiz-option:hover { border-color:var(--rose); background:rgba(255,105,180,0.1); transform:translateX(5px); }\n.quiz-option.correct { background:rgba(0,200,100,0.2); border-color:#00C864; }\n.quiz-option.wrong { background:rgba(255,50,50,0.15); border-color:#FF3232; }\n.quiz-feedback {\n margin-top:1rem; font-size:1.2rem; min-height:2rem;\n font-family:'Caveat',cursive;\n}\n\n/* Spin Wheel */\n.wheel-container { display:flex; flex-direction:column; align-items:center; }\n.wheel-wrap { position:relative; margin-bottom:1.5rem; }\n.wheel-pointer {\n position:absolute; top:-15px; left:50%; transform:translateX(-50%);\n font-size:2rem; color:var(--rose); z-index:10;\n filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));\n}\n.wheel {\n width:280px; height:280px; border-radius:50%;\n background: conic-gradient(\n #FFB6C1 0deg 45deg, #FFDAB9 45deg 90deg,\n #E6E6FA 90deg 135deg, #B0E0E6 135deg 180deg,\n #FFD700 180deg 225deg, #FFC0CB 225deg 270deg,\n #DDA0DD 270deg 315deg, #98FB98 315deg 360deg\n );\n border:4px solid var(--gold);\n box-shadow: 0 0 20px var(--glow), inset 0 0 20px rgba(255,255,255,0.3);\n transition: transform 4s cubic-bezier(0.17,0.67,0.12,0.99);\n position:relative;\n}\n.wheel-segment {\n position:absolute; width:50%; height:50%;\n display:flex; align-items:center; justify-content:center;\n font-size:0.55rem; font-weight:700; text-align:center;\n transform-origin: 100% 100%; padding:0.3rem;\n color:var(--text);\n}\n.ws1 { transform:rotate(-22.5deg) translateY(-50%); top:0; left:0; }\n.ws2 { transform:rotate(22.5deg) translateY(-50%); top:0; right:0; }\n.ws3 { transform:rotate(67.5deg); }\n.ws4 { transform:rotate(112.5deg); }\n.ws5 { transform:rotate(157.5deg); }\n.ws6 { transform:rotate(202.5deg); }\n.ws7 { transform:rotate(247.5deg); }\n.ws8 { transform:rotate(292.5deg); }\n.wheel-result {\n margin-top:1rem; padding:1rem 2rem;\n font-family:'Dancing Script',cursive; font-size:1.5rem;\n text-align:center; min-height:2rem;\n}\n\n/* Cake Decorator */\n.cake-decorator { display:flex; flex-direction:column; align-items:center; }\n.deco-cake {\n width:300px; height:250px; border-radius:20px;\n background: linear-gradient(180deg, rgba(139,69,19,0.15), rgba(210,105,30,0.1));\n border:2px dashed var(--choco-light);\n position:relative; margin-bottom:1rem;\n display:flex; align-items:center; justify-content:center;\n}\n.deco-cake-base { font-size:6rem; }\n.deco-items { position:absolute; inset:0; pointer-events:none; }\n.deco-placed {\n position:absolute; font-size:1.5rem;\n animation: placeItem 0.3s ease; cursor:grab;\n pointer-events:auto;\n}\n@keyframes placeItem { from { transform:scale(0); } to { transform:scale(1); } }\n.deco-palette {\n display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem;\n margin-bottom:1rem;\n}\n.deco-item-btn {\n width:45px; height:45px; border-radius:12px;\n border:2px solid var(--glass-border); background:var(--glass-bg);\n font-size:1.5rem; cursor:pointer; transition:all 0.3s;\n}\n.deco-item-btn:hover { transform:scale(1.2) rotate(10deg); border-color:var(--rose); }\n.deco-item-btn.selected { border-color:var(--gold); background:rgba(255,215,0,0.2); box-shadow:0 0 10px var(--gold); }\n\n/* Gift Box Game */\n.giftbox-grid {\n display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;\n max-width:400px; margin:0 auto;\n}\n.mystery-gift {\n aspect-ratio:1; border-radius:20px; cursor:pointer;\n display:flex; align-items:center; justify-content:center;\n transition: all 0.5s; position:relative;\n}\n.mg-box {\n font-size:3.5rem; transition: all 0.5s;\n animation: giftWiggle 2s ease-in-out infinite;\n}\n@keyframes giftWiggle {\n 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); }\n}\n.mystery-gift.opened .mg-box { transform:scale(0) rotate(180deg); opacity:0; }\n.mg-reveal {\n position:absolute; inset:0; display:flex; align-items:center;\n justify-content:center; flex-direction:column; text-align:center;\n opacity:0; transition: opacity 0.5s; padding:0.5rem;\n font-size:0.85rem; line-height:1.4;\n}\n.mystery-gift.opened .mg-reveal { opacity:1; }\n.mg-reveal-emoji { font-size:2rem; margin-bottom:0.3rem; }\n\n/* Love Meter */\n.lovemeter-wrap { display:flex; flex-direction:column; align-items:center; }\n.lovemeter-machine {\n background:var(--glass-bg); backdrop-filter:blur(12px);\n border:2px solid var(--glass-border); border-radius:30px;\n padding:2rem; width:200px; text-align:center;\n box-shadow: 0 8px 32px var(--shadow);\n}\n.lm-screen {\n background:rgba(0,0,0,0.1); border-radius:15px;\n padding:1rem; margin-bottom:0.5rem;\n}\n.lm-bar-wrap {\n width:100%; height:150px; background:rgba(255,255,255,0.2);\n border-radius:10px; position:relative; overflow:hidden;\n}\n.lm-bar {\n position:absolute; bottom:0; left:0; right:0;\n height:0%; border-radius:10px;\n background: linear-gradient(to top, var(--rose), #FF1493, var(--gold));\n transition: height 2s cubic-bezier(0.4,0,0.2,1);\n}\n.lm-value {\n font-family:'Dancing Script',cursive; font-size:2rem;\n color:var(--rose); margin-top:0.5rem;\n}\n.lm-label { font-weight:700; font-size:0.9rem; margin-top:0.5rem; }\n.lm-heart { font-size:2rem; margin-top:0.5rem; }\n.lm-result {\n margin-top:1rem; font-family:'Caveat',cursive;\n font-size:1.3rem; min-height:2rem;\n}\n\n/* Kiss Runner */\n.runner-area { position:relative; }\n.runner-player {\n position:absolute; bottom:20px; left:50px;\n font-size:2.5rem; z-index:5;\n transition: bottom 0.3s ease;\n}\n.runner-player.jump { bottom:150px; }\n.runner-item {\n position:absolute; bottom:20px; font-size:2rem;\n animation: runLeft var(--speed,3s) linear forwards;\n}\n@keyframes runLeft {\n from { right:-40px; } to { right:calc(100% + 40px); }\n}\n.runner-controls { font-family:'Caveat',cursive; font-size:1rem; color:var(--text-light); margin-top:0.5rem; }\n\n/* Puzzle */\n.puzzle-grid {\n display:grid; grid-template-columns:repeat(3,1fr);\n gap:4px; max-width:300px; margin:0 auto;\n}\n.puzzle-tile {\n aspect-ratio:1; border-radius:10px;\n background:var(--glass-bg); border:2px solid var(--glass-border);\n display:flex; align-items:center; justify-content:center;\n font-size:1.5rem; cursor:pointer;\n transition: all 0.2s; font-weight:700;\n}\n.puzzle-tile:hover { background:rgba(255,105,180,0.2); }\n.puzzle-tile.empty { opacity:0; cursor:default; }\n\n/* Treasure Hunt */\n.treasure-heart {\n position:fixed; font-size:1.2rem; cursor:pointer;\n opacity:0.08; z-index:800; transition: all 0.5s;\n animation: treasurePulse 3s ease-in-out infinite;\n}\n.treasure-heart:hover { opacity:0.6; transform:scale(1.5); }\n.treasure-heart.found {\n opacity:1; transform:scale(2); animation: matchPop 0.5s ease;\n pointer-events:none;\n}\n@keyframes treasurePulse {\n 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); }\n}\n.th-pos1 { top:28%; left:12%; }\n.th-pos2 { top:55%; right:6%; }\n.th-pos3 { top:72%; left:8%; }\n.th-pos4 { top:42%; right:15%; }\n.th-pos5 { top:62%; left:45%; }\n.th-pos6 { top:88%; right:10%; }\n.treasure-status {\n font-weight:700; font-size:1.1rem; margin-bottom:1rem;\n padding:0.5rem 1.5rem; border-radius:15px;\n background:var(--glass-bg); border:1px solid var(--glass-border);\n}\n.treasure-hints { padding:1rem; font-size:0.9rem; }\n.th { margin:0.3rem 0; opacity:0.8; }\n\n/* HUG */\n.hug-wrap { margin-top:2rem; text-align:center; position:relative; }\n.hug-btn { font-size:1.1rem; }\n.hug-anim {\n position:absolute; inset:0; pointer-events:none;\n display:flex; align-items:center; justify-content:center;\n}\n.hug-emoji {\n font-size:3rem; position:absolute;\n animation: hugFloat 1.5s ease forwards;\n}\n@keyframes hugFloat {\n from { opacity:1; transform:scale(0.5) translateY(0); }\n to { opacity:0; transform:scale(1.5) translateY(-60px); }\n}\n\n/* ============ GALLERY ============ */\n.gallery-section {\n background: linear-gradient(180deg, var(--bg2), var(--cream), var(--lavender));\n padding-top:5rem;\n}\n.gallery-grid {\n display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));\n gap:1.5rem; max-width:900px; width:100%;\n}\n.polaroid {\n background:white; border-radius:8px; padding:0.8rem;\n box-shadow: 0 6px 20px rgba(0,0,0,0.15);\n transform:rotate(var(--rot,0deg));\n transition: all 0.4s; cursor:pointer;\n opacity:0; animation: fadeInUp 0.6s ease forwards;\n}\n.polaroid:hover {\n transform:rotate(0deg) scale(1.08) translateY(-5px);\n box-shadow: 0 12px 30px rgba(255,105,180,0.3);\n}\n.polaroid-img {\n width:100%; aspect-ratio:1; border-radius:4px;\n background: linear-gradient(135deg, var(--pink), var(--lavender), var(--peach));\n display:flex; align-items:center; justify-content:center;\n}\n.polaroid-img span { font-size:4rem; }\n.polaroid-caption {\n text-align:center; margin-top:0.6rem;\n font-family:'Caveat',cursive; font-size:1rem; color:#5D3A3A;\n}\n\n/* ============ LOVE LETTER ============ */\n.letter-section {\n background: linear-gradient(180deg, var(--bg), var(--peach), var(--bg2));\n padding-top:5rem; position:relative; overflow:hidden;\n}\n.petal-canvas { position:absolute; inset:0; pointer-events:none; z-index:1; }\n.letter-container {\n position:relative; z-index:2; max-width:600px; width:100%;\n}\n.letter-envelope {\n width:200px; height:140px; margin:0 auto 2rem;\n cursor:pointer; position:relative; transition:all 0.5s;\n}\n.letter-envelope.opened { transform:scale(0.8); opacity:0; pointer-events:none; }\n.envelope-flap {\n position:absolute; top:0; left:0; right:0; height:50%;\n background: linear-gradient(135deg, #F5DEB3, #DEB887);\n clip-path: polygon(0 0, 50% 100%, 100% 0);\n z-index:2; transition: transform 0.5s;\n transform-origin: top center;\n}\n.letter-envelope:hover .envelope-flap { transform:rotateX(30deg); }\n.letter-envelope.opened .envelope-flap { transform:rotateX(180deg); }\n.envelope-body {\n position:absolute; inset:0;\n background: linear-gradient(180deg, #DEB887, #D2B48C);\n border-radius:5px; display:flex; flex-direction:column;\n align-items:center; justify-content:center;\n}\n.envelope-body span { font-size:2rem; }\n.envelope-body p { font-size:0.8rem; color:#8B6914; margin-top:0.3rem; }\n.letter-paper {\n opacity:0; transform:translateY(30px);\n transition: all 0.8s ease 0.3s;\n font-family:'Caveat',cursive;\n}\n.letter-paper.visible { opacity:1; transform:translateY(0); }\n.letter-wax {\n text-align:center; font-size:2rem; margin-bottom:0.5rem;\n}\n.letter-line {\n font-size:1.15rem; line-height:1.8; color:var(--text);\n opacity:0; transform:translateY(10px);\n transition: all 0.5s ease;\n}\n.letter-line.visible { opacity:1; transform:translateY(0); }\n.letter-sig {\n font-family:'Sacramento',cursive; font-size:1.8rem;\n color:var(--rose);\n}\n\n/* Music */\n.music-section {\n text-align:center; margin-top:2rem; position:relative; z-index:2;\n}\n.vinyl-record {\n width:100px; height:100px; border-radius:50%;\n background: radial-gradient(circle, #333 30%, #111 32%, #333 34%, #111 50%, #333 52%, #111 70%);\n margin:0 auto; display:flex; align-items:center; justify-content:center;\n box-shadow: 0 4px 15px rgba(0,0,0,0.3);\n transition: all 0.3s;\n}\n.vinyl-record.spinning { animation: spin 3s linear infinite; }\n@keyframes spin { from { transform:rotate(0); } to { transform:rotate(360deg); } }\n.vinyl-label {\n width:30px; height:30px; border-radius:50%;\n background:var(--rose); display:flex; align-items:center;\n justify-content:center; font-size:1rem; color:white;\n}\n.music-caption { font-family:'Caveat',cursive; font-size:1rem; margin-top:0.5rem; color:var(--text-light); }\n\n/* ============ ENDING ============ */\n.ending-section {\n background: linear-gradient(180deg, #0a0520 0%, #1a0a3e 30%, #2d1050 60%, #0a0520 100%);\n color:white; overflow:hidden; position:relative;\n}\n.fireworks-canvas { position:absolute; inset:0; z-index:1; }\n.ending-content { position:relative; z-index:5; text-align:center; max-width:600px; }\n.lantern-sky {\n position:absolute; inset:0; z-index:2; pointer-events:none;\n}\n.lantern {\n position:absolute; width:30px; height:40px;\n background: radial-gradient(circle, #FFD700, #FF8C00);\n border-radius:50% 50% 50% 50% / 40% 40% 60% 60%;\n box-shadow: 0 0 20px rgba(255,215,0,0.6);\n animation: lanternRise 8s ease-out forwards;\n opacity:0;\n}\n@keyframes lanternRise {\n 0% { opacity:0; transform:translateY(0); }\n 10% { opacity:0.9; }\n 100% { opacity:0; transform:translateY(-100vh) translateX(var(--drift,20px)); }\n}\n.ending-couple {\n display:flex; align-items:center; justify-content:center;\n gap:1rem; margin-bottom:1.5rem; font-size:3rem;\n}\n.ending-char { animation: chibibounce 2s ease-in-out infinite; }\n.char-right { animation-delay:0.5s; }\n.pulse-heart { animation: pulseHeart 1s ease-in-out infinite; }\n@keyframes pulseHeart {\n 0%,100% { transform:scale(1); } 50% { transform:scale(1.3); }\n}\n.ending-title {\n font-family:'Dancing Script',cursive; font-size:2.5rem;\n color:#FFD700; text-shadow: 0 0 30px rgba(255,215,0,0.5);\n margin-bottom:1rem; min-height:3rem;\n}\n.ending-quote {\n font-family:'Caveat',cursive; font-size:1.3rem;\n color:#FFB6C1; margin-bottom:1.5rem; line-height:1.8;\n}\n.ending-message {\n background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);\n margin-bottom:1.5rem;\n}\n.ending-message p { color:#F8D7E8; line-height:1.7; }\n.gift-sig { font-family:'Sacramento',cursive; font-size:1.6rem; color:#FFD700; margin-top:0.5rem; }\n.ending-actions {\n display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;\n margin-bottom:1.5rem;\n}\n.ending-mascots { font-size:2rem; }\n.ending-mascots span {\n display:inline-block; margin:0 0.3rem;\n animation: mascotWave 2s ease-in-out infinite;\n}\n.ending-mascots span:nth-child(2) { animation-delay:0.3s; }\n.ending-mascots span:nth-child(3) { animation-delay:0.6s; }\n.ending-mascots span:nth-child(4) { animation-delay:0.9s; }\n.ending-mascots span:nth-child(5) { animation-delay:1.2s; }\n.ending-mascots span:nth-child(6) { animation-delay:1.5s; }\n\n/* ============ FLOATING QUOTE ============ */\n.floating-quote {\n position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);\n z-index:500; font-family:'Caveat',cursive; font-size:1.1rem;\n color:var(--rose); background:var(--glass-bg);\n backdrop-filter:blur(10px); border:1px solid var(--glass-border);\n padding:0.6rem 1.5rem; border-radius:25px;\n opacity:0; transition:all 0.5s; pointer-events:none;\n box-shadow: 0 4px 15px var(--shadow);\n}\n.floating-quote.visible { opacity:1; }\n\n/* ============ CONFETTI ============ */\n.confetti-container {\n position:fixed; inset:0; z-index:9998; pointer-events:none;\n}\n.confetti-piece {\n position:absolute; width:10px; height:10px;\n opacity:0.9; animation: confettiFall var(--dur,3s) ease-out forwards;\n}\n@keyframes confettiFall {\n 0% { transform:translateY(-20px) rotate(0) scale(1); opacity:1; }\n 100% { transform:translateY(100vh) rotate(var(--rot,720deg)) scale(0); opacity:0; }\n}\n\n/* ============ ANIMATIONS ============ */\n@keyframes fadeInUp {\n from { opacity:0; transform:translateY(30px); }\n to { opacity:1; transform:translateY(0); }\n}\n@keyframes fadeIn {\n from { opacity:0; } to { opacity:1; }\n}\n\n/* ============ RESPONSIVE ============ */\n@media(max-width:768px) {\n .section { padding:3rem 1rem; }\n .section-title { font-size:2rem; }\n .hero-title { font-size:2rem; }\n .hero-subtitle { font-size:1.1rem; }\n .hero-btn { font-size:1rem; padding:0.8rem 1.5rem; }\n .chibi-body { font-size:2.5rem; }\n .cake-main { font-size:3.5rem; }\n .game-tabs { gap:0.3rem; }\n .game-tab { font-size:0.75rem; padding:0.4rem 0.8rem; }\n .game-area, .runner-area { height:280px; }\n .reasons-grid { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }\n .gallery-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }\n .memory-grid { max-width:300px; }\n .ending-title { font-size:1.8rem; }\n .ending-actions { flex-direction:column; align-items:center; }\n .float-char { font-size:1.5rem; }\n .hero-couple { gap:0.5rem; }\n}\n\n@media(max-width:480px) {\n .section-title { font-size:1.6rem; }\n .hero-title { font-size:1.6rem; }\n .gallery-grid { grid-template-columns:1fr; max-width:250px; }\n .giftbox-grid { grid-template-columns:repeat(2,1fr); }\n}\n\n/* ============ DARK MODE SPECIFICS ============ */\nbody.dark-mode .hero { background: linear-gradient(135deg, #0a0520, #1a0a3e, #2d1050, #0a0520); }\nbody.dark-mode .timeline-section { background: linear-gradient(180deg, var(--bg), #1e1035, var(--bg2)); }\nbody.dark-mode .reasons-section { background: linear-gradient(180deg, var(--bg2), #251545, var(--bg)); }\nbody.dark-mode .games-section { background: linear-gradient(180deg, var(--bg), #1e1035, #251545, var(--bg2)); }\nbody.dark-mode .gallery-section { background: linear-gradient(180deg, var(--bg2), #1e1035, #251545); }\nbody.dark-mode .letter-section { background: linear-gradient(180deg, var(--bg), #1e1035, var(--bg2)); }\nbody.dark-mode .polaroid { background:rgba(40,20,60,0.8); }\nbody.dark-mode .polaroid-caption { color:#F8D7E8; }\nbody.dark-mode .game-start-overlay { background:rgba(30,16,53,0.9); }\nbody.dark-mode .choco-drip svg path { fill: #3d1a00; }\n\n/* Scrollbar */\n::-webkit-scrollbar { width:8px; }\n::-webkit-scrollbar-track { background:var(--bg); }\n::-webkit-scrollbar-thumb {\n background: linear-gradient(var(--rose), var(--gold));\n border-radius:4px;\n}\n","createdAt",["D",1779900764587],"branchVersion","branchId","7db3127a-59eb-11f1-894d-ee650bb23af1","id","7dad82ce-59eb-11f1-894d-ee650bb23af1","love-surprise",["D",1779900338578],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","💖 Magical romantic birthday website for my wife","imageUrl","5a53f2d3-c880-4b75-8ecd-ccdcd100af10","pinnedFileId","019e6a53-d1ce-71ae-9d97-f2bb614ee9e0","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e6a50-74a8-757f-b2c5-1a86b8861bb6","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_114":110},"org",{"_106":105,"_107":108,"_109":110,"_19":60,"_111":112,"_113":31},"branch",{"_13":91,"_38":92,"_48":47,"_93":49,"_94":95,"_96":97,"_98":55,"_99":100,"_101":102,"_103":50,"_104":105},"isOwned",11,"main","projectId","forkedBranchId","0dcdbf12-59e8-11f1-871c-ee650bb23af1","forkedBranchVersion",19,"forkedProjectPrivacy","forkedProjectId","0dcbc554-59e8-11f1-871c-ee650bb23af1","forkedProjectOrgId","019e6a0c-4ec9-7097-bde0-e64983c9687f","projectName","userHandle","Souryadeepp","handle","displayName","Surya Patra","avatar","https://lh3.googleusercontent.com/a/ACg8ocKOgZspCV4SrcXmSU-5BeUdUHdfjQnpbbj_RKcoMXbhjEYCSQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_38":50,"_43":216,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":217,"_86":218,"_88":219,"_90":31},"tree",[195,196,197,198,199],"files",[195,196,197,198,199],"counts",{"_185":68,"_186":156,"_187":68,"_188":189,"_190":191},"contents",[147,148,149,150,151],"upstreamProject",{"_48":100,"_38":50,"_57":58,"_59":-5,"_54":55,"_84":145},"upstreamBranch",{"_48":95,"_43":139,"_140":141,"_38":92,"_93":100,"_13":97,"_94":-5,"_96":-5,"_142":143,"_52":-5,"_90":31,"_54":55,"_104":144,"_69":102,"_103":50},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1779898862406],"updatedAt",["D",1779899460365],"lockfileKey","1779899463172-esm.town_v_souryadeepsurya_love-surprise@19-main","souryadeepsurya",{"_106":144,"_114":146},"https://lh3.googleusercontent.com/a/ACg8ocI_UZ_qX_q_352HoehJc4vlONxvU50ZLuvueq_aGapjOrDPeg=s96-c",{"_48":179,"_38":180,"_36":181,"_153":-5,"_46":47,"_45":156,"_154":31,"_43":182,"_13":68,"_39":26,"_40":183,"_30":31,"_157":-5,"_33":184},{"_48":172,"_38":173,"_36":174,"_153":-5,"_46":47,"_45":175,"_154":64,"_43":176,"_13":156,"_39":26,"_40":177,"_30":31,"_157":-5,"_33":178},{"_48":165,"_38":166,"_36":62,"_153":-5,"_46":47,"_45":167,"_154":64,"_43":168,"_13":156,"_39":169,"_40":170,"_30":31,"_157":-5,"_33":171},{"_48":159,"_38":160,"_36":161,"_153":-5,"_46":47,"_45":156,"_154":31,"_43":162,"_13":68,"_39":26,"_40":163,"_30":31,"_157":-5,"_33":164},{"_48":152,"_38":34,"_36":37,"_153":-5,"_46":47,"_45":14,"_154":64,"_43":155,"_13":156,"_39":26,"_40":42,"_30":31,"_157":-5,"_33":158},"7b9920aa-59ec-11f1-8a51-ee650bb23af1","parentId","latest",["D",1779900764587],1,"label",[34],"7db7dd82-59eb-11f1-894d-ee650bb23af1","particles.txt","019e6a53-d1ce-71ae-9d97-f4d7c5dea9fc",["D",1779900338578],"// ═══════════════════════════════════════════\n// CANVAS ENGINES - Stars, Petals, Fireworks\n// ═══════════════════════════════════════════\n\n// ===== HERO CANVAS: Night sky + interactive stars + lanterns =====\nwindow.initHeroCanvas = function() {\n var canvas = document.getElementById('heroCanvas');\n if (!canvas) return;\n var ctx = canvas.getContext('2d');\n var W, H, mouseX = -1, mouseY = -1;\n\n function resize() { W = canvas.width = canvas.offsetWidth; H = canvas.height = canvas.offsetHeight; }\n resize();\n window.addEventListener('resize', resize);\n canvas.addEventListener('mousemove', function(e) { mouseX = e.offsetX; mouseY = e.offsetY; });\n canvas.addEventListener('touchmove', function(e) {\n if (e.touches[0]) {\n var r = canvas.getBoundingClientRect();\n mouseX = e.touches[0].clientX - r.left;\n mouseY = e.touches[0].clientY - r.top;\n }\n });\n\n // Stars\n var stars = [];\n for (var i = 0; i < 120; i++) {\n stars.push({\n x: Math.random() * 2000, y: Math.random() * 2000,\n r: 0.5 + Math.random() * 2,\n twinkle: Math.random() * Math.PI * 2,\n speed: 0.01 + Math.random() * 0.03\n });\n }\n\n // Lanterns\n var lanterns = [];\n for (var i = 0; i < 8; i++) {\n lanterns.push({\n x: 0.1 + Math.random() * 0.8,\n y: 1.1 + Math.random() * 0.3,\n speed: 0.0003 + Math.random() * 0.0004,\n wobble: Math.random() * Math.PI * 2,\n wobbleSpeed: 0.005 + Math.random() * 0.01,\n size: 8 + Math.random() * 6,\n opacity: 0\n });\n }\n\n // Shooting stars\n var shootingStars = [];\n var shootTimer = 0;\n\n // Floating hearts from cursor\n var floatingHearts = [];\n var lastMX = -1, lastMY = -1;\n\n function spawnHeart(x, y) {\n if (floatingHearts.length > 15) return;\n floatingHearts.push({\n x: x, y: y,\n vx: (Math.random() - 0.5) * 1.5,\n vy: -(1 + Math.random() * 2),\n size: 6 + Math.random() * 8,\n life: 60, maxLife: 60,\n color: ['#FFB6C1','#FF69B4','#FFD700','#DDA0DD','#FF6B8A'][Math.floor(Math.random() * 5)]\n });\n }\n\n function drawHeart(cx, cy, size, color) {\n ctx.save();\n ctx.fillStyle = color;\n ctx.beginPath();\n ctx.moveTo(cx, cy + size * 0.3);\n ctx.bezierCurveTo(cx - size, cy - size * 0.3, cx - size * 0.5, cy - size, cx, cy - size * 0.4);\n ctx.bezierCurveTo(cx + size * 0.5, cy - size, cx + size, cy - size * 0.3, cx, cy + size * 0.3);\n ctx.fill();\n ctx.restore();\n }\n\n function animate() {\n ctx.clearRect(0, 0, W, H);\n\n // Stars with interactive glow near mouse\n for (var i = 0; i < stars.length; i++) {\n var s = stars[i];\n s.twinkle += s.speed;\n var alpha = 0.3 + Math.sin(s.twinkle) * 0.4;\n var sx = (s.x / 2000) * W;\n var sy = (s.y / 2000) * H * 0.7;\n var boost = 0;\n if (mouseX > 0) {\n var dx = mouseX - sx, dy = mouseY - sy;\n var dist = Math.sqrt(dx * dx + dy * dy);\n if (dist < 100) boost = (1 - dist / 100) * 0.5;\n }\n ctx.globalAlpha = Math.min(1, alpha + boost);\n ctx.fillStyle = '#fff';\n ctx.shadowBlur = 4 + boost * 8;\n ctx.shadowColor = boost > 0.2 ? '#FFD700' : '#fff';\n ctx.beginPath();\n ctx.arc(sx, sy, s.r * (1 + boost * 0.5), 0, Math.PI * 2);\n ctx.fill();\n }\n ctx.shadowBlur = 0;\n ctx.globalAlpha = 1;\n\n // Lanterns floating upward\n for (var i = 0; i < lanterns.length; i++) {\n var l = lanterns[i];\n l.y -= l.speed;\n l.wobble += l.wobbleSpeed;\n if (l.y < -0.1) { l.y = 1.1 + Math.random() * 0.2; l.opacity = 0; }\n l.opacity = Math.min(0.85, l.opacity + 0.003);\n var lx = l.x * W + Math.sin(l.wobble) * 15;\n var ly = l.y * H;\n\n ctx.globalAlpha = l.opacity * 0.3;\n var grd = ctx.createRadialGradient(lx, ly, 0, lx, ly, l.size * 3);\n grd.addColorStop(0, 'rgba(255,200,50,0.6)');\n grd.addColorStop(1, 'transparent');\n ctx.fillStyle = grd;\n ctx.fillRect(lx - l.size * 3, ly - l.size * 3, l.size * 6, l.size * 6);\n\n ctx.globalAlpha = l.opacity;\n ctx.fillStyle = '#FF8C00';\n ctx.beginPath();\n ctx.ellipse(lx, ly, l.size * 0.6, l.size * 0.8, 0, 0, Math.PI * 2);\n ctx.fill();\n ctx.fillStyle = '#FFD700';\n ctx.beginPath();\n ctx.ellipse(lx, ly, l.size * 0.4, l.size * 0.5, 0, 0, Math.PI * 2);\n ctx.fill();\n }\n ctx.globalAlpha = 1;\n\n // Shooting stars\n shootTimer++;\n if (shootTimer > 180 + Math.random() * 200) {\n shootTimer = 0;\n shootingStars.push({\n x: W * 0.2 + Math.random() * W * 0.6,\n y: Math.random() * H * 0.3,\n vx: -(3 + Math.random() * 4),\n vy: 2 + Math.random() * 3,\n life: 40, maxLife: 40\n });\n }\n for (var i = shootingStars.length - 1; i >= 0; i--) {\n var ss = shootingStars[i];\n ss.x += ss.vx; ss.y += ss.vy; ss.life--;\n var al = ss.life / ss.maxLife;\n ctx.globalAlpha = al;\n ctx.strokeStyle = '#fff';\n ctx.lineWidth = 2;\n ctx.shadowBlur = 8;\n ctx.shadowColor = '#fff';\n ctx.beginPath();\n ctx.moveTo(ss.x, ss.y);\n ctx.lineTo(ss.x - ss.vx * 8, ss.y - ss.vy * 8);\n ctx.stroke();\n if (ss.life <= 0) shootingStars.splice(i, 1);\n }\n ctx.shadowBlur = 0;\n ctx.globalAlpha = 1;\n\n // Mouse-reactive floating hearts\n if (mouseX > 0 && mouseY > 0 && (Math.abs(mouseX - lastMX) > 5 || Math.abs(mouseY - lastMY) > 5)) {\n if (Math.random() > 0.7) spawnHeart(mouseX, mouseY);\n lastMX = mouseX; lastMY = mouseY;\n }\n for (var i = floatingHearts.length - 1; i >= 0; i--) {\n var h = floatingHearts[i];\n h.x += h.vx; h.y += h.vy; h.vy += 0.02; h.life--;\n ctx.globalAlpha = h.life / h.maxLife;\n drawHeart(h.x, h.y, h.size, h.color);\n if (h.life <= 0) floatingHearts.splice(i, 1);\n }\n ctx.globalAlpha = 1;\n\n requestAnimationFrame(animate);\n }\n animate();\n};\n\n// ===== PETAL CANVAS (Love Letter section) =====\nwindow.initPetalCanvas = function() {\n var canvas = document.getElementById('petalCanvas');\n if (!canvas) return;\n var ctx = canvas.getContext('2d');\n var w, h;\n var petals = [];\n\n function resize() { w = canvas.width = canvas.offsetWidth; h = canvas.height = canvas.offsetHeight; }\n resize();\n window.addEventListener('resize', resize);\n\n var colors = [\n 'rgba(255,182,193,0.7)', 'rgba(255,192,203,0.6)',\n 'rgba(255,160,180,0.5)', 'rgba(255,200,210,0.6)', 'rgba(232,213,245,0.5)'\n ];\n for (var i = 0; i < 30; i++) {\n petals.push({\n x: Math.random() * w, y: Math.random() * h,\n size: 4 + Math.random() * 8,\n speedX: (Math.random() - 0.5) * 0.8,\n speedY: 0.3 + Math.random() * 0.6,\n rotation: Math.random() * Math.PI * 2,\n rotSpeed: (Math.random() - 0.5) * 0.03,\n color: colors[Math.floor(Math.random() * colors.length)]\n });\n }\n\n function animate() {\n ctx.clearRect(0, 0, w, h);\n for (var i = 0; i < petals.length; i++) {\n var p = petals[i];\n p.x += p.speedX + Math.sin(p.rotation) * 0.3;\n p.y += p.speedY;\n p.rotation += p.rotSpeed;\n if (p.y > h + 20) { p.y = -20; p.x = Math.random() * w; }\n if (p.x > w + 20) p.x = -20;\n if (p.x < -20) p.x = w + 20;\n ctx.save();\n ctx.translate(p.x, p.y);\n ctx.rotate(p.rotation);\n ctx.fillStyle = p.color;\n ctx.beginPath();\n ctx.ellipse(0, 0, p.size, p.size * 0.5, 0, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n }\n requestAnimationFrame(animate);\n }\n animate();\n};\n\n// ===== FIREWORKS CANVAS (Ending section) =====\nwindow.initFireworksCanvas = function() {\n var canvas = document.getElementById('fireworksCanvas');\n if (!canvas) return;\n var ctx = canvas.getContext('2d');\n var w, h;\n var fireworks = [];\n var sparks = [];\n\n function resize() { w = canvas.width = canvas.offsetWidth; h = canvas.height = canvas.offsetHeight; }\n resize();\n window.addEventListener('resize', resize);\n\n function launchFirework() {\n var x = w * 0.2 + Math.random() * w * 0.6;\n var targetY = h * 0.1 + Math.random() * h * 0.3;\n fireworks.push({\n x: x, y: h, targetY: targetY,\n speed: 3 + Math.random() * 2,\n color: ['#FF6B8A','#FFD700','#C084FC','#FFB6C1','#87CEEB','#FF7EB3'][Math.floor(Math.random() * 6)]\n });\n }\n\n function explode(fw) {\n var count = 30 + Math.floor(Math.random() * 20);\n for (var i = 0; i < count; i++) {\n var angle = (Math.PI * 2 / count) * i;\n var speed = 1 + Math.random() * 3;\n sparks.push({\n x: fw.x, y: fw.y,\n vx: Math.cos(angle) * speed,\n vy: Math.sin(angle) * speed,\n life: 1, decay: 0.015 + Math.random() * 0.01,\n color: fw.color,\n size: 2 + Math.random() * 2\n });\n }\n }\n\n setInterval(launchFirework, 800);\n\n function animate() {\n ctx.fillStyle = 'rgba(10,0,21,0.15)';\n ctx.fillRect(0, 0, w, h);\n\n for (var i = fireworks.length - 1; i >= 0; i--) {\n var fw = fireworks[i];\n fw.y -= fw.speed;\n ctx.beginPath();\n ctx.arc(fw.x, fw.y, 2, 0, Math.PI * 2);\n ctx.fillStyle = fw.color;\n ctx.fill();\n if (fw.y <= fw.targetY) {\n explode(fw);\n fireworks.splice(i, 1);\n }\n }\n\n for (var i = sparks.length - 1; i >= 0; i--) {\n var s = sparks[i];\n s.x += s.vx; s.y += s.vy;\n s.vy += 0.03;\n s.life -= s.decay;\n if (s.life <= 0) { sparks.splice(i, 1); continue; }\n ctx.globalAlpha = s.life;\n ctx.beginPath();\n ctx.arc(s.x, s.y, s.size * s.life, 0, Math.PI * 2);\n ctx.fillStyle = s.color;\n ctx.fill();\n ctx.globalAlpha = 1;\n }\n\n requestAnimationFrame(animate);\n }\n animate();\n};\n",[160],"ccb6b156-59eb-11f1-bdb4-ee650bb23af1","main.ts",2,["D",1779900471181],"http","import { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n if (path === \"/\" || path === \"\") {\n return serveFile(\"index.html\", import.meta.url);\n }\n if (path === \"/styles.css\") {\n return serveFile(\"styles.css\", import.meta.url);\n }\n if (path === \"/particles.js\") {\n const content = await readFile(\"particles.txt\", import.meta.url);\n return new Response(content, {\n headers: { \"Content-Type\": \"application/javascript; charset=utf-8\" }\n });\n }\n if (path === \"/app.js\") {\n const content = await readFile(\"app.txt\", import.meta.url);\n return new Response(content, {\n headers: { \"Content-Type\": \"application/javascript; charset=utf-8\" }\n });\n }\n if (path === \"/games.js\") {\n const content = await readFile(\"games.txt\", import.meta.url);\n return new Response(content, {\n headers: { \"Content-Type\": \"application/javascript; charset=utf-8\" }\n });\n }\n\n return new Response(\"Not found\", { status: 404 });\n}\n",[166],"09244ea0-59ec-11f1-9b3d-ee650bb23af1","index.html","019e6a53-d1ce-71ae-9d97-ee50c62a1c6b",3,["D",1779900572557],"\n\n\n\n\n💖 Happy Birthday My Beautiful Wife 💖\n\n\n\n\n\n\n\n

🎂

✨💖✨

Preparing something magical for you...

\n 💖💗💝💖💗\n

\n 🧸\n 🐰\n 🐱\n 🐼\n

\n\n\n\n\n\n\n

\n\n\n\n\n

\n \n

🧸

🐰

🦋

💝

🐱

☁️

🎀

🍫

\n\n

\n \n

🤵

💕

😊

🍫

🍰

\n 🍬\n 🍓\n 🫐\n 🍒\n

\n 🧁\n 🍫\n 🍩\n 🍪\n 🎂\n

👰

💖

\n\n

\n \n \n

\n 🧸\n 🐰\n 🍫\n 🐱\n 🐼\n

↓

\n\n\n

\n \n

📖 Our Love Story

Every chapter with you is my favorite

🐻

💫 Day One

🌸

The Day We Met

The universe conspired to bring us together, and my heart knew — you were the one I'd been dreaming of.

🐰

💫 First Smile

😊

When You Smiled

Your smile lit up my entire world. That moment, I knew I'd spend forever trying to make you smile like that.

🧸

💫 Our Adventures

🗺️

Every Adventure Together

From silly late-night talks to spontaneous adventures — every moment with you became a beautiful memory.

🐱

💫 Forever Promise

💍

Choosing You, Always

In every universe, in every timeline, in every lifetime — I would always find my way back to you.

🐼

💫 Today & Forever

🎂

Your Special Day

Today we celebrate the most wonderful person in the world — you. Happy Birthday, my everything! 💖

🧁

\n\n\n

\n \n

💝 Reasons I Love You

A million reasons, here are just a few

💕

✨

Your laugh is my favorite sound in the entire universe

🌟

The way you make even ordinary days feel magical

💫

Your kindness that touches everyone around you

🌙

How beautiful you look when you're just being yourself

⭐

Your strength that inspires me every single day

🔮

The way you love — deeply, fiercely, completely

🌈

Your eyes that hold entire galaxies inside them

💎

Because you chose me, and I'd choose you a million times over

\n\n\n

\n \n

🎮 Birthday Game World

Play games and unlock surprises!

🕹️

\n\n \n

\n \n \n \n \n \n \n \n \n \n \n

\n\n \n

\n \n

Score: 0

Time: 20s

Combo: x1

💖

Catch falling hearts & chocolates!

\n \n

\n\n \n

Moves: 0

Pairs: 0/8

\n \n

\n\n \n

Question 1/5

\n \n

\n\n \n

▼

1000 Kisses 💋

Movie Night 🎬

Choco Date 🍫

Long Hug 🤗

Princess Day 👑

Dance Night 💃

Breakfast Bed 🥞

Star Gazing 🌟

\n \n

\n\n \n

🎂

\n \n \n \n \n \n \n \n \n \n \n

\n \n

\n\n \n

Tap a gift to reveal a love surprise! 🎁

🎁

\n\n \n

Love Power Meter

❤️

\n \n

\n\n \n

Score: 0

🏃‍♀️

💋

Collect kisses, dodge broken hearts!

\n \n

Tap/Click to jump!

\n\n \n

Arrange the tiles to reveal the secret message! 💝

\n\n \n

Find all 6 hidden hearts on this page! Click around to discover them! 🗺️

Hearts found: 0/6

💡 Hint 1: Check near the love story section title

💡 Hint 2: Look at the photo gallery corners

💡 Hint 3: The love letter hides a secret

💡 Hint 4: One is near the game tabs

💡 Hint 5: Float around the reasons section

💡 Hint 6: The finale has the last one

\n\n \n

\n \n

\n\n\n

\n \n

📸 Our Moments

Polaroids from our love story

📷

🌅

Our sunsets together

🌸

Spring walks & laughter

🌙

Stargazing nights

☕

Morning coffee dates

🎄

Holiday magic

💃

Dancing with you

\n\n\n

\n \n

💌 A Love Letter For You

Words from my heart to yours

\n 💌\n

Tap to open

💌

My Dearest Love,

From the very first moment I saw you,

I knew my life would never be the same.

You are my sunrise and my starlight,

my calm in every storm,

my reason to believe in magic.

Every laugh we share, every tear you trust me with,

every quiet moment side by side —

these are the treasures of my life.

Happy Birthday, my love.

I'd choose you in every lifetime. ❤️

Forever Yours 💕

\n \n

♫

Our Song 🎵

\n\n\n

\n 🧸\n 💖\n 🐰\n

\"No matter how many birthdays pass,
my heart will always belong to you ❤️\"

You are the most extraordinary person I've ever known. Every day with you is a gift I never take for granted. You make the world more beautiful just by being in it.

Forever & Always Yours 💕

\n \n \n \n

\n 🧸🐰🐱🐼🦋💝\n

\n\n\n

💖

\n\n\n

\n\n\n\n\n\n\n",[173],"7db7160e-59eb-11f1-894d-ee650bb23af1","app.txt","019e6a53-d1ce-71ae-9d97-eb29595eb164",["D",1779900338578],"// ═══════════════════════════════════════════\n// MAIN APP - All interactions, animations, game logic\n// ═══════════════════════════════════════════\n\n(function() {\n\n // ═══════════ LOADING SCREEN ═══════════\n window.addEventListener('load', function() {\n setTimeout(function() {\n document.getElementById('loader').classList.add('hidden');\n initHero();\n }, 2800);\n });\n\n // ═══════════ HERO SECTION ═══════════\n function initHero() {\n typewriterEffect();\n }\n\n function typewriterEffect() {\n var titleEl = document.getElementById('heroTitle');\n var subEl = document.getElementById('heroSubtitle');\n var startBtn = document.getElementById('startBtn');\n if (!titleEl) return;\n\n var title = 'Happy Birthday My Love \\u2764\\uFE0F';\n var sub = 'Every moment with you feels magical.';\n var i = 0;\n\n var cursor = document.createElement('span');\n cursor.style.cssText = 'display:inline-block;width:3px;height:1em;background:#FFD700;margin-left:2px;animation:blink .8s step-end infinite;vertical-align:text-bottom;';\n titleEl.appendChild(cursor);\n\n // Add blink keyframe\n if (!document.getElementById('blink-kf')) {\n var s = document.createElement('style');\n s.id = 'blink-kf';\n s.textContent = '@keyframes blink{50%{opacity:0}}';\n document.head.appendChild(s);\n }\n\n function typeNext() {\n if (i < title.length) {\n titleEl.insertBefore(document.createTextNode(title[i]), cursor);\n i++;\n setTimeout(typeNext, 70 + Math.random() * 40);\n } else {\n setTimeout(function() {\n subEl.textContent = sub;\n subEl.style.opacity = '1';\n subEl.style.transition = 'opacity 1s';\n setTimeout(function() {\n startBtn.style.opacity = '1';\n startBtn.style.transition = 'opacity 1s, transform .4s';\n cursor.style.display = 'none';\n }, 800);\n }, 500);\n }\n }\n setTimeout(typeNext, 500);\n }\n\n // Start button\n var startBtn = document.getElementById('startBtn');\n if (startBtn) {\n startBtn.addEventListener('click', function() {\n var tl = document.getElementById('timeline');\n if (tl) tl.scrollIntoView({ behavior: 'smooth' });\n });\n }\n\n // ═══════════ SCROLL REVEAL ═══════════\n var revealObserver = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\n\n // Timeline cards\n document.querySelectorAll('.timeline-card').forEach(function(el) { revealObserver.observe(el); });\n\n // Reason cards with stagger\n document.querySelectorAll('.reason-card').forEach(function(el, i) {\n var obs = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n setTimeout(function() { entry.target.classList.add('visible'); }, i * 100);\n obs.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n obs.observe(el);\n // Add visible transition\n el.style.opacity = '0';\n el.style.transform = 'translateY(30px)';\n el.style.transition = 'all .6s cubic-bezier(.16,1,.3,1)';\n });\n\n // Add visible styles for reason cards\n if (!document.getElementById('reason-vis')) {\n var s = document.createElement('style');\n s.id = 'reason-vis';\n s.textContent = '.reason-card.visible{opacity:1!important;transform:translateY(0)!important}';\n document.head.appendChild(s);\n }\n\n // ═══════════ HEART BURST ON TAP ═══════════\n function heartBurst(container, clientX, clientY) {\n var rect = container.getBoundingClientRect();\n var x = clientX - rect.left;\n var y = clientY - rect.top;\n var emojis = ['\\u2764\\uFE0F', '\\uD83D\\uDC97', '\\uD83D\\uDC96', '\\uD83D\\uDC95', '\\u2728', '\\uD83C\\uDF38'];\n for (var i = 0; i < 6; i++) {\n var h = document.createElement('span');\n h.className = 'heart-burst';\n h.textContent = emojis[Math.floor(Math.random() * emojis.length)];\n h.style.left = x + 'px';\n h.style.top = y + 'px';\n h.style.setProperty('--tx', (Math.random() - 0.5) * 100 + 'px');\n h.style.setProperty('--ty', -(30 + Math.random() * 60) + 'px');\n container.style.position = 'relative';\n container.appendChild(h);\n setTimeout(function(el) { el.remove(); }, 800, h);\n }\n }\n\n // Timeline card taps\n document.querySelectorAll('.tl-card-inner').forEach(function(card) {\n card.addEventListener('click', function(e) { heartBurst(card, e.clientX, e.clientY); });\n });\n\n // Reason card taps\n document.querySelectorAll('.reason-card').forEach(function(card) {\n card.addEventListener('click', function(e) {\n card.classList.add('tapped');\n heartBurst(card, e.clientX, e.clientY);\n setTimeout(function() { card.classList.remove('tapped'); }, 600);\n });\n });\n\n // ═══════════ GIFT BOX ═══════════\n var giftOpened = false;\n var giftBox = document.getElementById('giftBox');\n if (giftBox) {\n giftBox.addEventListener('click', function() {\n if (giftOpened) return;\n giftOpened = true;\n document.getElementById('giftLid').classList.add('opened');\n var hint = document.getElementById('giftHint');\n if (hint) hint.style.display = 'none';\n\n setTimeout(function() {\n launchConfetti(50);\n var reveal = document.getElementById('giftReveal');\n if (reveal) reveal.classList.add('show');\n }, 600);\n });\n }\n\n function launchConfetti(count) {\n var colors = ['#FF69B4','#FFD700','#FF6B8A','#DDA0DD','#87CEEB','#FFB6C1','#FFA07A','#98FB98'];\n var shapes = ['\\u25CF','\\u25A0','\\u2605','\\u2666','\\u2764','\\u2726'];\n for (var i = 0; i < count; i++) {\n (function(idx) {\n setTimeout(function() {\n var c = document.createElement('div');\n c.className = 'confetti-piece';\n c.textContent = shapes[Math.floor(Math.random() * shapes.length)];\n c.style.left = Math.random() * 100 + 'vw';\n c.style.color = colors[Math.floor(Math.random() * colors.length)];\n c.style.fontSize = (8 + Math.random() * 14) + 'px';\n c.style.animationDuration = (2 + Math.random() * 2) + 's';\n document.body.appendChild(c);\n setTimeout(function() { c.remove(); }, 4000);\n }, idx * 40);\n })(i);\n }\n }\n\n // ═══════════ CATCH THE HEARTS GAME ═══════════\n var gameScore = 0;\n var gameTime = 15;\n var gameRunning = false;\n var gameInterval, spawnInterval;\n\n var gameStartBtn = document.getElementById('gameStartBtn');\n if (gameStartBtn) {\n gameStartBtn.addEventListener('click', startGame);\n }\n\n function startGame() {\n gameScore = 0;\n gameTime = 15;\n gameRunning = true;\n document.getElementById('gameScore').textContent = '0';\n document.getElementById('gameTimer').textContent = '15';\n document.getElementById('gameResult').textContent = '';\n document.getElementById('gameStartOverlay').classList.add('hidden');\n\n // Clear existing hearts\n var area = document.getElementById('gameArea');\n area.querySelectorAll('.game-heart').forEach(function(h) { h.remove(); });\n\n gameInterval = setInterval(function() {\n gameTime--;\n document.getElementById('gameTimer').textContent = gameTime;\n if (gameTime <= 0) endGame();\n }, 1000);\n\n spawnInterval = setInterval(function() {\n if (!gameRunning) return;\n spawnGameHeart();\n }, 500);\n }\n\n function spawnGameHeart() {\n var area = document.getElementById('gameArea');\n if (!area) return;\n var heart = document.createElement('div');\n heart.className = 'game-heart';\n var hearts = ['\\u2764\\uFE0F','\\uD83D\\uDC96','\\uD83D\\uDC97','\\uD83D\\uDC95','\\uD83D\\uDC9D','\\uD83E\\uDE77'];\n heart.textContent = hearts[Math.floor(Math.random() * hearts.length)];\n heart.style.left = (10 + Math.random() * 70) + '%';\n heart.style.fontSize = (24 + Math.random() * 16) + 'px';\n heart.style.animationDuration = (2 + Math.random() * 2) + 's';\n\n function catchHeart(e) {\n e.preventDefault();\n if (!gameRunning) return;\n gameScore++;\n document.getElementById('gameScore').textContent = gameScore;\n heart.style.transform = 'scale(1.5)';\n heart.style.opacity = '0';\n heart.style.transition = 'all .2s';\n setTimeout(function() { heart.remove(); }, 200);\n // Mini burst\n var rect = area.getBoundingClientRect();\n var cx = e.clientX || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);\n var cy = e.clientY || (e.touches && e.touches[0] ? e.touches[0].clientY : 0);\n heartBurst(area, cx, cy);\n }\n\n heart.addEventListener('click', catchHeart);\n heart.addEventListener('touchstart', catchHeart, { passive: false });\n\n area.appendChild(heart);\n setTimeout(function() { if (heart.parentNode) heart.remove(); }, 4000);\n }\n\n function endGame() {\n gameRunning = false;\n clearInterval(gameInterval);\n clearInterval(spawnInterval);\n document.getElementById('gameStartOverlay').classList.remove('hidden');\n document.getElementById('gameStartOverlay').querySelector('button').textContent = '\\uD83C\\uDFAE Play Again!';\n\n var msgs = [\n { min: 0, msg: 'Nice try! Every heart counts \\uD83D\\uDC95' },\n { min: 5, msg: 'Sweet! You caught some love! \\uD83D\\uDC96' },\n { min: 10, msg: 'Amazing! You\\'re a love catcher! \\uD83D\\uDC97' },\n { min: 15, msg: 'Incredible! Love master! \\uD83D\\uDC9D' },\n { min: 20, msg: 'LEGENDARY! My heart is yours! \\u2764\\uFE0F' }\n ];\n var msg = msgs[0].msg;\n for (var i = msgs.length - 1; i >= 0; i--) {\n if (gameScore >= msgs[i].min) { msg = msgs[i].msg; break; }\n }\n document.getElementById('gameResult').textContent = 'You caught ' + gameScore + ' hearts! ' + msg;\n launchConfetti(20);\n }\n\n // ═══════════ VIRTUAL HUG ═══════════\n var hugCount = 0;\n var hugBtn = document.getElementById('hugBtn');\n if (hugBtn) {\n hugBtn.addEventListener('click', function() {\n hugCount++;\n var anim = document.getElementById('hugAnim');\n var msgs = ['\\uD83E\\uDD17 Hug sent!', '\\uD83D\\uDC95 Squeezed tight!', '\\uD83E\\uDDF8 Bear hug!', '\\uD83D\\uDC96 So much love!', '\\uD83E\\uDD70 You\\'re the best!'];\n anim.innerHTML = '

\\uD83E\\uDDF8\\uD83D\\uDC97\\uD83E\\uDDF8

' + msgs[Math.min(hugCount-1, msgs.length-1)] + ' (x' + hugCount + ')

';\n launchConfetti(8);\n });\n }\n\n // Add hug animation\n if (!document.getElementById('hug-kf')) {\n var s = document.createElement('style');\n s.id = 'hug-kf';\n s.textContent = '@keyframes hugPop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}';\n document.head.appendChild(s);\n }\n\n // ═══════════ LOVE LETTER ANIMATION ═══════════\n var letterObs = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n var lines = entry.target.querySelectorAll('.letter-line');\n lines.forEach(function(line, i) {\n setTimeout(function() { line.classList.add('visible'); }, i * 300);\n });\n initPetalCanvas();\n letterObs.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2 });\n\n var letterContent = document.getElementById('letterContent');\n if (letterContent) letterObs.observe(letterContent.closest('.letter-container') || letterContent);\n\n // ═══════════ FALLING PETALS CANVAS ═══════════\n function initPetalCanvas() {\n var canvas = document.getElementById('petalCanvas');\n if (!canvas) return;\n var ctx = canvas.getContext('2d');\n var W, H;\n function resize() { W = canvas.width = canvas.offsetWidth; H = canvas.height = canvas.offsetHeight; }\n resize();\n\n var petals = [];\n for (var i = 0; i < 25; i++) {\n petals.push({\n x: Math.random() * W, y: Math.random() * H - H,\n size: 3 + Math.random() * 5,\n speedY: 0.5 + Math.random() * 1,\n speedX: (Math.random() - 0.5) * 0.5,\n rotation: Math.random() * Math.PI * 2,\n rotSpeed: (Math.random() - 0.5) * 0.03,\n color: ['#FFB6C1','#FF69B4','#DDA0DD','#FFA07A','#FFD700'][Math.floor(Math.random()*5)],\n opacity: 0.3 + Math.random() * 0.5\n });\n }\n\n function animate() {\n ctx.clearRect(0, 0, W, H);\n for (var i = 0; i < petals.length; i++) {\n var p = petals[i];\n p.x += p.speedX + Math.sin(p.rotation) * 0.3;\n p.y += p.speedY;\n p.rotation += p.rotSpeed;\n if (p.y > H + 10) { p.y = -10; p.x = Math.random() * W; }\n\n ctx.save();\n ctx.globalAlpha = p.opacity;\n ctx.translate(p.x, p.y);\n ctx.rotate(p.rotation);\n ctx.fillStyle = p.color;\n ctx.beginPath();\n ctx.ellipse(0, 0, p.size, p.size * 0.6, 0, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n }\n requestAnimationFrame(animate);\n }\n animate();\n }\n\n // ═══════════ FIREWORKS (ENDING) ═══════════\n var fireworksStarted = false;\n var endingObs = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting && !fireworksStarted) {\n fireworksStarted = true;\n initFireworks();\n createEndingLanterns();\n launchConfetti(30);\n endingObs.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2 });\n\n var ending = document.getElementById('ending');\n if (ending) endingObs.observe(ending);\n\n function createEndingLanterns() {\n var container = document.getElementById('endingLanterns');\n if (!container) return;\n for (var i = 0; i < 6; i++) {\n var l = document.createElement('div');\n l.className = 'lantern';\n l.style.left = (10 + Math.random() * 80) + '%';\n l.style.top = Math.random() * 60 + '%';\n l.style.animationDelay = (Math.random() * 3) + 's';\n l.style.animationDuration = (5 + Math.random() * 3) + 's';\n container.appendChild(l);\n }\n }\n\n function initFireworks() {\n var canvas = document.getElementById('fireworksCanvas');\n if (!canvas) return;\n var ctx = canvas.getContext('2d');\n canvas.width = canvas.offsetWidth;\n canvas.height = canvas.offsetHeight;\n var W = canvas.width, H = canvas.height;\n\n var fireworks = [], particles = [], frameCount = 0;\n\n function Firework() {\n this.x = Math.random() * W;\n this.y = H;\n this.targetY = 50 + Math.random() * H * 0.35;\n this.speed = 3 + Math.random() * 3;\n this.color = ['#FF69B4','#FFD700','#FF6B8A','#DDA0DD','#87CEEB','#FFA07A'][Math.floor(Math.random()*6)];\n this.alive = true;\n }\n Firework.prototype.update = function() {\n this.y -= this.speed;\n if (this.y <= this.targetY) { this.alive = false; this.explode(); }\n };\n Firework.prototype.draw = function() {\n ctx.fillStyle = this.color;\n ctx.shadowBlur = 8;\n ctx.shadowColor = this.color;\n ctx.beginPath();\n ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);\n ctx.fill();\n };\n Firework.prototype.explode = function() {\n var count = 25 + Math.floor(Math.random() * 20);\n for (var i = 0; i < count; i++) {\n var angle = (Math.PI * 2 / count) * i;\n var speed = 1 + Math.random() * 3;\n particles.push({\n x: this.x, y: this.y,\n vx: Math.cos(angle) * speed,\n vy: Math.sin(angle) * speed,\n color: this.color,\n life: 50 + Math.random() * 30,\n maxLife: 50 + Math.random() * 30,\n size: 1.5 + Math.random()\n });\n }\n };\n\n function animate() {\n ctx.fillStyle = 'rgba(10,0,21,0.15)';\n ctx.fillRect(0, 0, W, H);\n\n frameCount++;\n if (frameCount % 40 === 0 || (frameCount < 100 && frameCount % 15 === 0)) {\n fireworks.push(new Firework());\n }\n\n for (var i = fireworks.length - 1; i >= 0; i--) {\n fireworks[i].update();\n fireworks[i].draw();\n if (!fireworks[i].alive) fireworks.splice(i, 1);\n }\n\n ctx.shadowBlur = 0;\n for (var j = particles.length - 1; j >= 0; j--) {\n var p = particles[j];\n p.x += p.vx; p.y += p.vy;\n p.vy += 0.03;\n p.life--;\n ctx.globalAlpha = p.life / p.maxLife;\n ctx.fillStyle = p.color;\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\n ctx.fill();\n if (p.life <= 0) particles.splice(j, 1);\n }\n ctx.globalAlpha = 1;\n\n if (frameCount < 500) requestAnimationFrame(animate);\n }\n animate();\n }\n\n // ═══════════ REPLAY BUTTON ═══════════\n var replayBtn = document.getElementById('replayBtn');\n if (replayBtn) {\n replayBtn.addEventListener('click', function() {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n }\n\n // ═══════════ FLOATING ROMANTIC QUOTES ═══════════\n var quotes = [\n 'You are the poem I never knew how to write \\uD83D\\uDC95',\n 'In your eyes, I found my home \\uD83C\\uDFE0',\n 'Every love story is beautiful, but ours is my favourite \\u2728',\n 'My heart beats your name \\uD83D\\uDC97',\n 'With you, forever doesn\\'t feel long enough \\uD83C\\uDF19',\n 'You are my today and all of my tomorrows \\uD83C\\uDF39',\n 'Loving you is like breathing — I can\\'t stop \\uD83D\\uDC95',\n 'You make the world feel less scary \\uD83D\\uDC96'\n ];\n var lastQuoteIdx = -1, quoteTimer;\n\n window.addEventListener('scroll', function() {\n clearTimeout(quoteTimer);\n var pct = window.scrollY / (document.body.scrollHeight - window.innerHeight);\n var idx = Math.floor(pct * quotes.length);\n idx = Math.max(0, Math.min(idx, quotes.length - 1));\n\n if (idx !== lastQuoteIdx) {\n lastQuoteIdx = idx;\n var el = document.getElementById('floatingQuote');\n if (el) {\n el.textContent = quotes[idx];\n el.classList.add('show');\n quoteTimer = setTimeout(function() { el.classList.remove('show'); }, 3000);\n }\n }\n });\n\n // ═══════════ THEME TOGGLE ═══════════\n var themeBtn = document.getElementById('themeBtn');\n if (themeBtn) {\n themeBtn.addEventListener('click', function() {\n document.body.classList.toggle('dark-mode');\n themeBtn.textContent = document.body.classList.contains('dark-mode') ? '\\u2600\\uFE0F' : '\\uD83C\\uDF19';\n });\n }\n\n // Add dark mode styles\n if (!document.getElementById('dark-mode-style')) {\n var s = document.createElement('style');\n s.id = 'dark-mode-style';\n s.textContent = 'body.dark-mode{--cream:#1a0a2e;--text-primary:#F0E6FF;--text-secondary:#D0C0E0;background:#1a0a2e}body.dark-mode .glass-card{background:rgba(30,16,64,.4)!important;border-color:rgba(255,182,193,.15)!important}body.dark-mode .timeline-section{background:linear-gradient(180deg,#1a0a2e,#2D1B4E,#1a0a2e)}body.dark-mode .reasons-section{background:linear-gradient(180deg,#2D1B4E,#1e1040,#1a0a2e)}body.dark-mode .gallery-section{background:linear-gradient(180deg,#1a0a2e,#251545,#2D1B4E)}body.dark-mode .surprise-section{background:linear-gradient(180deg,#251545,#2D1B4E,#1a0a2e)}body.dark-mode .game-section{background:linear-gradient(180deg,#1a0a2e,#15102e,#1e1040)}body.dark-mode .polaroid{background:#2D1B4E;box-shadow:0 8px 25px rgba(255,105,180,.15)}body.dark-mode .polaroid-caption{color:#ccc}body.dark-mode .floating-quote{background:rgba(45,27,78,.8);color:#F0C0D0}';\n document.head.appendChild(s);\n }\n\n // ═══════════ MUSIC TOGGLE (visual only, no audio file) ═══════════\n var musicPlaying = false;\n var musicBtn = document.getElementById('musicBtn');\n if (musicBtn) {\n musicBtn.addEventListener('click', function() {\n musicPlaying = !musicPlaying;\n musicBtn.textContent = musicPlaying ? '\\uD83D\\uDD0A' : '\\uD83C\\uDFB5';\n });\n }\n\n // ═══════════ HERO TAP SPARKLES ═══════════\n var hero = document.getElementById('hero');\n if (hero) {\n hero.addEventListener('click', function(e) {\n var stars = ['\\u2728','\\u2B50','\\uD83D\\uDCAB','\\uD83C\\uDF1F'];\n for (var i = 0; i < 5; i++) {\n var star = document.createElement('div');\n star.textContent = stars[Math.floor(Math.random() * stars.length)];\n star.style.cssText = 'position:fixed;left:' + e.clientX + 'px;top:' + e.clientY + 'px;font-size:' + (14+Math.random()*16) + 'px;pointer-events:none;z-index:100;animation:starPop .8s ease-out forwards;';\n star.style.setProperty('--tx', (Math.random()-.5)*120+'px');\n star.style.setProperty('--ty', -(30+Math.random()*80)+'px');\n document.body.appendChild(star);\n setTimeout(function(el){el.remove()}, 800, star);\n }\n });\n\n if (!document.getElementById('starpop-kf')) {\n var s = document.createElement('style');\n s.id = 'starpop-kf';\n s.textContent = '@keyframes starPop{0%{transform:translate(0,0) scale(.5);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(1.5);opacity:0}}';\n document.head.appendChild(s);\n }\n }\n\n // ═══════════ CURSOR TRAIL (desktop only) ═══════════\n var trailCount = 0;\n document.addEventListener('mousemove', function(e) {\n trailCount++;\n if (trailCount % 4 !== 0) return;\n var dot = document.createElement('div');\n dot.style.cssText = 'position:fixed;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:9999;left:'+e.clientX+'px;top:'+e.clientY+'px;background:'+['#FFB6C1','#FF69B4','#FFD700','#DDA0DD'][Math.floor(Math.random()*4)]+';animation:trailFade .6s ease forwards;';\n document.body.appendChild(dot);\n setTimeout(function(){dot.remove()}, 600);\n });\n\n if (!document.getElementById('trail-kf')) {\n var s = document.createElement('style');\n s.id = 'trail-kf';\n s.textContent = '@keyframes trailFade{0%{transform:scale(1);opacity:.7}100%{transform:scale(0);opacity:0}}';\n document.head.appendChild(s);\n }\n\n})();\n",[180],"pulls","branches","forks","envVars",{"_192":68,"_194":68},"connections",{"_192":68,"_193":68},"count","unfilledCount","emptyCount",{"_48":179,"_38":180,"_36":181,"_153":-5,"_46":47,"_45":156,"_154":31,"_43":213,"_13":68,"_39":26,"_40":183,"_30":31,"_157":-5,"_201":214,"_33":215},{"_48":172,"_38":173,"_36":174,"_153":-5,"_46":47,"_45":175,"_154":64,"_43":210,"_13":156,"_39":26,"_40":177,"_30":31,"_157":-5,"_201":211,"_33":212},{"_48":165,"_38":166,"_36":62,"_153":-5,"_46":47,"_45":167,"_154":64,"_43":207,"_13":156,"_39":169,"_40":170,"_30":31,"_157":-5,"_201":208,"_33":209},{"_48":159,"_38":160,"_36":161,"_153":-5,"_46":47,"_45":156,"_154":31,"_43":204,"_13":68,"_39":26,"_40":163,"_30":31,"_157":-5,"_201":205,"_33":206},{"_48":152,"_38":34,"_36":37,"_153":-5,"_46":47,"_45":14,"_154":64,"_43":200,"_13":156,"_39":26,"_40":42,"_30":31,"_157":-5,"_201":202,"_33":203},["D",1779900764587],"children",[],[34],["D",1779900338578],[],[160],["D",1779900471181],[],[166],["D",1779900572557],[],[173],["D",1779900338578],[],[180],["D",1779900338578],{"_106":105,"_114":110},{"_106":105,"_107":108,"_109":110,"_19":60,"_111":112,"_113":31},{"_13":91,"_38":92,"_48":47,"_93":49,"_94":95,"_96":97,"_98":55,"_99":100,"_101":102,"_103":50,"_104":105},"ctx",{"_84":-5,"_136":253,"_254":255,"_256":257,"_258":31,"_259":31,"_260":31,"_261":64,"_262":-5,"_263":-7,"_264":-7,"_265":68,"_266":31,"_267":31,"_268":-5,"_269":31,"_270":31,"_271":31,"_272":-5},"ENV",{"_224":225,"_226":227,"_228":92,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v4