:root{--twilight-soft: #cdd6e8;--twilight-medium: #9bb0d9;--twilight-deep: #6b8acf;--lavender-light: #d6cce6;--lavender-medium: #b6a8d9;--lavender-deep: #8a7ab0;--rose-dusty: #d4a5a5;--rose-faded: #b88a8a;--gold-faded: #d4af7f;--gold-soft: #e8c79a;--cream: #f0eef5;--white: #ffffff;--dark: #1a1b2e;--ink: #0e0f1c;--pink-light: var(--lavender-light);--pink-medium: var(--lavender-medium);--pink-dark: var(--twilight-deep);--pink-deep: var(--lavender-deep);--purple-light: var(--lavender-light);--purple-medium: var(--lavender-medium);--purple-dark: var(--lavender-deep);--gold: var(--gold-faded);--font-display: "Caveat", cursive;--font-body: "Quicksand", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:linear-gradient(135deg,#0e0f1c,#1a1b2e,#14152a);color:var(--cream);overflow-x:hidden;min-height:100vh}#root{width:100%;min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--twilight-medium),var(--lavender-medium));border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--twilight-deep),var(--lavender-deep))}::selection{background:var(--lavender-medium);color:var(--dark)}.app{width:100%;position:relative}.canvas-container{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:0;pointer-events:none}.content{position:relative;z-index:10;pointer-events:none}.content>*{pointer-events:auto}.section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;position:relative;overflow:hidden}.opening{background:radial-gradient(ellipse at center,rgba(155,176,217,.12) 0%,transparent 70%)}.opening h1{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,5rem);text-align:center;color:var(--cream);text-shadow:0 0 30px rgba(155,176,217,.35);animation:float 5s ease-in-out infinite;letter-spacing:.5px}.opening .emoji{display:inline-block;animation:drift 4s ease-in-out infinite}@keyframes drift{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}.scroll-hint{position:absolute;bottom:3rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:bounce 3s ease-in-out infinite;color:var(--twilight-soft);font-size:.9rem;letter-spacing:2px;text-transform:uppercase;opacity:.75}.scroll-arrow{font-size:1.5rem;animation:arrowPulse 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes arrowPulse{0%,to{opacity:1;transform:translateY(0)}50%{opacity:.4;transform:translateY(5px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.story-section{background:radial-gradient(ellipse at var(--bg-x, 50%) var(--bg-y, 50%),rgba(138,122,176,.08) 0%,transparent 60%)}.story-content{max-width:800px;text-align:center;opacity:0;transform:translateY(50px);transition:all 1.1s cubic-bezier(.4,0,.2,1)}.story-content.visible{opacity:1;transform:translateY(0)}.story-title{font-family:var(--font-display);font-size:clamp(2rem,6vw,4rem);margin-bottom:1.5rem;background:linear-gradient(135deg,var(--twilight-soft),var(--lavender-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:500}.story-text{font-size:clamp(1rem,3vw,1.5rem);line-height:1.85;color:#f0eef5d1;font-weight:300}.story-text em{color:var(--rose-dusty);font-style:normal;font-weight:500}.love-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2rem}.love-item{background:linear-gradient(135deg,#9bb0d924,#b6a8d924);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);padding:1rem 1.5rem;border-radius:50px;font-size:1.1rem;color:#f0eef5e6;opacity:0;transform:scale(.9) translateY(20px);transition:all .7s cubic-bezier(.4,0,.2,1)}.love-item.visible{opacity:1;transform:scale(1) translateY(0)}.love-item:hover{transform:scale(1.04);background:linear-gradient(135deg,#9bb0d938,#b6a8d938);box-shadow:0 10px 30px #6b8acf33}.dramatic{background:radial-gradient(ellipse at center,#0e0f1ceb,#0a0a16f5)}.dramatic .story-title{background:linear-gradient(135deg,var(--rose-dusty),var(--lavender-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.memorial{min-height:100vh;background:radial-gradient(ellipse at center,rgba(182,168,217,.1) 0%,rgba(107,138,207,.06) 50%,transparent 100%);display:flex;animation:fadeIn 1.2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.celebration-content{text-align:center;max-width:900px}.memorial-title{font-family:var(--font-display);font-size:clamp(2.2rem,7vw,4.5rem);margin-bottom:1rem;background:linear-gradient(135deg,var(--gold-soft),var(--lavender-light),var(--twilight-soft));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 6s ease-in-out infinite;line-height:1.15}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.memorial-emoji{display:inline-block;animation:drift 4s ease-in-out infinite}.memorial-subtitle{font-size:clamp(1.1rem,2.8vw,1.6rem);color:var(--twilight-soft);margin-bottom:3rem;font-style:italic;opacity:.85}.spotify-section{margin-top:2.5rem;width:100%;max-width:640px;opacity:0;transform:translateY(30px);animation:slideUp 1s ease-out .4s forwards}@keyframes slideUp{to{opacity:1;transform:translateY(0)}}.spotify-header{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.4rem);margin-bottom:.5rem;color:var(--gold-soft);font-weight:500}.spotify-subtext{font-size:.95rem;color:#f0eef5a6;margin-bottom:1.5rem;letter-spacing:.5px}.spotify-container{background:linear-gradient(135deg,#9bb0d914,#b6a8d914);border-radius:20px;padding:1rem;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px #0006;position:relative;overflow:hidden}.spotify-container:before{content:"🌙";position:absolute;top:-10px;right:-10px;font-size:3rem;opacity:.18;animation:float 5s ease-in-out infinite}.spotify-container iframe{border-radius:12px}.youtube-container{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;border-radius:12px;background:#000}@supports not (aspect-ratio: 16 / 9){.youtube-container{aspect-ratio:auto;height:0;padding-bottom:56.25%}}.youtube-container iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;display:block}.second-song-label{margin-top:2rem}.anniversary-section{margin-top:3rem;padding:2rem;background:linear-gradient(135deg,#d4af7f1a,#b6a8d91a);border-radius:20px;border:1px solid rgba(212,175,127,.22);text-align:center;animation:fadeIn 1.2s ease-out .8s forwards;opacity:0;display:flex;flex-direction:column;align-items:center;gap:1rem}.date-block{display:flex;flex-direction:column;align-items:center;gap:.5rem}.date-divider{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.2rem);color:var(--lavender-medium);opacity:.5;margin:.25rem 0}.anniversary-label{font-size:.95rem;color:var(--twilight-soft);text-transform:uppercase;letter-spacing:3px;opacity:.85}.anniversary-date{display:flex;justify-content:center;align-items:center;gap:.5rem}.date-number{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,4.2rem);background:linear-gradient(135deg,var(--gold-faded),var(--gold-soft),var(--lavender-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;animation:shimmer 6s ease-in-out infinite;background-size:200% 200%}.date-separator{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.6rem);color:var(--rose-dusty);opacity:.6}.anniversary-note{margin-top:.5rem;font-size:1rem;color:#f0eef5bf;font-style:italic}.final-message{margin-top:3rem;font-size:clamp(1rem,2.5vw,1.3rem);color:#f0eef5c7;font-style:italic;line-height:1.7;max-width:700px;margin-left:auto;margin-right:auto;opacity:0;animation:fadeIn 1.2s ease-out 1.1s forwards}.signature{margin-top:1rem;font-family:var(--font-display);font-size:1.6rem;color:var(--rose-dusty)}.music-hint{position:fixed;top:1.5rem;right:1.5rem;z-index:100;display:flex;align-items:center;gap:.5rem;background:#ffffff0f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.75rem 1.25rem;border-radius:50px;cursor:pointer;transition:all .3s ease;border:1px solid rgba(255,255,255,.08);text-decoration:none;color:var(--cream)}.music-hint:hover{background:#ffffff1f;transform:scale(1.05)}.music-hint:hover .music-tooltip{opacity:1;transform:translateY(0)}.music-icon{font-size:1.3rem;animation:pulse 3s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}.music-tooltip{position:absolute;top:100%;right:0;margin-top:.5rem;background:#1a1b2ef2;padding:.5rem 1rem;border-radius:10px;font-size:.85rem;white-space:nowrap;opacity:0;transform:translateY(-5px);transition:all .3s ease;border:1px solid rgba(255,255,255,.08)}.days-counter{margin-top:2rem;padding:1rem 2rem;background:linear-gradient(135deg,#d4af7f1a,#b6a8d91a);border-radius:15px;border:1px solid rgba(212,175,127,.18);display:inline-block}.days-counter.subtle{background:linear-gradient(135deg,#9bb0d91a,#8a7ab01a);border-color:#9bb0d938}.days-number{font-family:var(--font-display);font-size:3rem;color:var(--gold-soft)}.days-counter.subtle .days-number{color:var(--twilight-soft)}.days-text{font-size:1rem;color:#f0eef5b3}@media (max-width: 1024px){.story-content{max-width:90%}.celebration-content{max-width:90%;padding:0 1rem}.spotify-section{max-width:90%}}@media (max-width: 768px){.section{padding:1.5rem;min-height:100svh}.opening h1{font-size:clamp(1.8rem,7vw,3rem);padding:0 1rem;line-height:1.3}.music-hint{top:1rem;right:1rem;padding:.5rem 1rem}.music-tooltip{display:none}.love-list{gap:.75rem}.love-item{padding:.75rem 1.25rem;font-size:.95rem}.spotify-container{padding:.5rem}.spotify-section{max-width:100%}.story-title{font-size:clamp(1.5rem,5vw,2.5rem);margin-bottom:1rem}.story-text{font-size:clamp(.95rem,3vw,1.2rem);line-height:1.7}.memorial-title{font-size:clamp(1.6rem,6.5vw,2.8rem)}.memorial-subtitle{font-size:clamp(.95rem,3vw,1.2rem);margin-bottom:2rem}.days-counter{padding:.75rem 1.5rem}.days-number{font-size:2.5rem}.days-text{font-size:.9rem}.scroll-hint{bottom:2rem}.final-message{font-size:1rem;padding:0 1rem}.signature{font-size:1.4rem}.loading-heart{font-size:3rem}.loading-text{font-size:1.1rem;padding:0 1.5rem;text-align:center}}@media (max-width: 480px){.section{padding:1rem}.opening h1{font-size:clamp(1.5rem,6vw,2rem)}.love-item{padding:.6rem 1rem;font-size:.85rem;width:100%;text-align:center}.love-list{flex-direction:column;align-items:stretch}.spotify-container{padding:.4rem}.spotify-header{font-size:clamp(1.2rem,4vw,1.8rem)}.spotify-subtext{font-size:.85rem}.story-content{padding:0 .5rem}.memorial-title{font-size:clamp(1.4rem,6vw,2rem)}.days-number{font-size:2rem}.days-text{font-size:.8rem}}@media (max-width: 768px) and (orientation: landscape){.section{min-height:auto;padding:2rem 1.5rem}.opening{min-height:100svh}.memorial{min-height:auto;padding:3rem 1.5rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@supports (padding-top: env(safe-area-inset-top)){.music-hint{top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right))}.section:first-child{padding-top:max(2rem,env(safe-area-inset-top))}.section:last-child{padding-bottom:max(2rem,env(safe-area-inset-bottom))}}@media (hover: none){.love-item:hover{transform:none;background:linear-gradient(135deg,#9bb0d924,#b6a8d924)}.love-item:active{transform:scale(.98);background:linear-gradient(135deg,#9bb0d938,#b6a8d938)}.music-hint:hover{transform:none}.music-hint:active{transform:scale(.95);background:#ffffff1f}}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0e0f1c,#1a1b2e,#14152a);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:9999;transition:opacity .6s ease,visibility .6s ease}.loading-screen.hidden{opacity:0;visibility:hidden}.loading-heart{font-size:4rem;animation:drift 3s ease-in-out infinite}.loading-text{margin-top:1rem;font-family:var(--font-display);font-size:1.4rem;color:var(--twilight-soft);font-style:italic}