:root{color-scheme:light;--bg-surface: radial-gradient(circle at top, #ffeef5 0%, #ffe0eb 30%, #ffd7e8 55%, #ffd1e6 80%, #ffcde3 100%);--bg-card: rgba(255, 255, 255, .9);--text-strong: #1d1420;--text-muted: #6d5564;--divider: rgba(255, 255, 255, .45);--accent: #ff2d78;--shadow-soft: 0 30px 80px rgba(255, 91, 150, .25);--shadow-card: 0 25px 60px rgba(31, 8, 17, .08);--radius-large: 38px;--ease-out-silk: cubic-bezier(.22, 1, .36, 1);--ease-in-out-silk: cubic-bezier(.45, 0, .2, 1)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:SF Pro Display,Helvetica Neue,PingFang SC,Segoe UI,sans-serif;line-height:1.5;color:var(--text-strong);background:#fedbe7;-webkit-font-smoothing:antialiased}#app{min-height:100vh}.intro-overlay{position:fixed;inset:0;z-index:4;display:grid;place-items:center;background:radial-gradient(circle at top,#ffeef5f5,#ffd1e6f0 55%,#ffb4d2e6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .7s var(--ease-out-silk),transform .7s var(--ease-out-silk);overflow:hidden}.intro-bouquet{position:absolute;left:50%;bottom:clamp(-10px,-2vw,-18px);top:auto;width:min(920px,160vw);height:auto;opacity:1;filter:drop-shadow(0 18px 32px rgba(255,80,150,.18));transform:translate3d(-50%,0,0) rotate(-3deg);animation:bouquet-sway 6.4s var(--ease-in-out-silk) infinite;pointer-events:none;z-index:0}@keyframes bouquet-sway{0%{transform:translate3d(-50%,0,0) rotate(-3deg) scale(1)}50%{transform:translate3d(-50%,-10px,0) rotate(-2deg) scale(1.01)}to{transform:translate3d(-50%,0,0) rotate(-3deg) scale(1)}}html.intro-complete .intro-bouquet{opacity:0;transform:translate3d(-50%,8px,0) rotate(-5deg) scale(1.01);transition:opacity .6s var(--ease-out-silk),transform .6s var(--ease-out-silk)}html.intro-complete .intro-overlay{opacity:0;transform:translate3d(0,-10px,0);pointer-events:none}.intro-overlay .envelope-wrap{position:relative;z-index:1;transform:rotate(-12deg) translate3d(10px,-10px,0);transform-origin:50% 70%}.intro-overlay .envelope{position:relative;z-index:1}.envelope{position:relative;width:min(320px,78vw);height:calc(min(320px,78vw)*.64);border:0;background:transparent;padding:0;cursor:pointer;transform:translateZ(0);transform-style:preserve-3d;perspective:1100px;-webkit-tap-highlight-color:transparent}.envelope:focus-visible{outline:3px solid rgba(255,45,120,.55);outline-offset:10px;border-radius:22px}.envelope-shadow{position:absolute;inset:10% 8% -12%;background:radial-gradient(circle at 50% 50%,rgba(70,10,30,.22),transparent 60%);filter:blur(18px);transform:translate3d(0,18px,0);opacity:.55}.envelope-back,.envelope-front{position:absolute;inset:0;border-radius:22px}.envelope-back{background:linear-gradient(145deg,#ffd2e6,#ffb6d2 55%,#ff9ec2);box-shadow:0 35px 90px #ff509659}.envelope-front{background:linear-gradient(145deg,#ffffff8c,#ffbedc80);clip-path:polygon(0 0,100% 0,100% 100%,50% 60%,0 100%);opacity:.9}.envelope-paper{position:absolute;left:10%;right:10%;bottom:10%;height:88%;border-radius:18px;background:linear-gradient(180deg,#fffffffa,#fff6faf5);box-shadow:0 18px 40px #2d0a141f;transform:translate3d(0,22%,0);opacity:.95}.envelope-paper:before{content:"";position:absolute;inset:14% 14% auto;height:48%;border-radius:14px;background:repeating-linear-gradient(to bottom,rgba(255,45,120,.12) 0,rgba(255,45,120,.12) 2px,transparent 2px,transparent 16px);opacity:.7}.envelope-flap{position:absolute;inset:0;border-radius:22px;background:linear-gradient(145deg,#ffd1e6,#ff8fb7);clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:50% 0%;transform:rotateX(0);backface-visibility:hidden;box-shadow:inset 0 -8px 22px #ffffff40}.envelope-seal{position:absolute;left:50%;top:56%;width:56px;height:56px;transform:translate(-50%,-50%);background:radial-gradient(circle at 30% 30%,#ffffffb3,#ff2d78f2);border-radius:18px;box-shadow:0 18px 32px #ff2d7840;display:grid;place-items:center}.envelope-seal:after{content:"♡";color:#fffffff2;font-size:1.3rem;transform:translateY(-1px)}.envelope-hint{position:absolute;left:50%;bottom:-2.6rem;transform:translate(-50%);font-size:.98rem;letter-spacing:.08em;color:#5a1e3cb8;background:#fff9;padding:.6rem 1rem;border-radius:999px;box-shadow:0 16px 30px #ff5a962e}.intro-overlay .envelope{animation:envelope-breathe 2.8s var(--ease-in-out-silk) infinite}html.intro-opening .intro-overlay .envelope{animation:none}html.intro-opening .envelope-flap{animation:flap-open .7s var(--ease-out-silk) forwards}html.intro-opening .envelope-paper{animation:paper-rise 1s var(--ease-out-silk) .08s forwards}html.intro-opening .envelope{animation:envelope-lift .95s var(--ease-out-silk) forwards}html.intro-opening .envelope-seal{animation:seal-fade .35s ease .12s forwards}html.intro-opening .envelope-hint{opacity:0;transform:translate(-50%) translateY(6px);transition:opacity .25s ease,transform .25s ease}@keyframes envelope-breathe{0%{transform:translateZ(0) scale(1)}50%{transform:translate3d(0,-6px,0) scale(1.015)}to{transform:translateZ(0) scale(1)}}@keyframes flap-open{0%{transform:rotateX(0)}60%{transform:rotateX(172deg)}82%{transform:rotateX(154deg)}to{transform:rotateX(160deg)}}@keyframes paper-rise{0%{transform:translate3d(0,28%,0) rotate(-.6deg)}60%{transform:translate3d(0,-26%,0) rotate(.25deg)}78%{transform:translate3d(0,-14%,0) rotate(0)}to{transform:translate3d(0,-18%,0) rotate(0)}}@keyframes envelope-lift{0%{transform:translateZ(0) scale(1) rotate(0)}55%{transform:translate3d(0,-14px,0) scale(1.03) rotate(-.6deg)}78%{transform:translate3d(0,-9px,0) scale(1.02) rotate(.25deg)}to{transform:translate3d(0,-10px,0) scale(1.02) rotate(0)}}@keyframes seal-fade{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.92)}}.experience-shell{position:relative;min-height:100vh;background:var(--bg-surface);overflow:hidden}.experience-shell:before,.experience-shell:after{content:"";position:absolute;width:60vw;height:60vw;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 60%);filter:blur(10px);z-index:0}.experience-shell:before{top:-20vw;left:-10vw}.experience-shell:after{bottom:-25vw;right:-5vw}.petal-layer{position:fixed;inset:0;pointer-events:none;z-index:1}.petal{position:absolute;top:-10vh;width:var(--petal-size, 28px);height:calc(var(--petal-size, 28px) * 1.4);opacity:0;transform-origin:center;animation:petal-fall var(--fall-duration, 18s) linear infinite;animation-delay:var(--fall-delay, 0s);will-change:transform,opacity;contain:layout paint}.petal:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#fff9fb,#ffc5d8 55%,#ff8fb7);border-radius:45% 55% 60% 40%;transform-origin:50% 55%;filter:hue-rotate(var(--petal-hue, 0deg)) drop-shadow(0 12px 18px rgba(255,125,170,.2));animation:petal-twist var(--spin-duration, 4.2s) var(--ease-in-out-silk) infinite}.petal:after{content:"";position:absolute;inset:22% 18% auto 8%;width:70%;height:60%;border-radius:50%;background:#ffffff8c;pointer-events:none}@keyframes petal-fall{0%{transform:translate3d(0,-20vh,0);opacity:0}15%{opacity:.9}50%{transform:translate3d(var(--sway-distance, 30px),50vh,0)}to{transform:translate3d(calc(var(--sway-distance, 30px) * -1),120vh,0);opacity:0}}@keyframes petal-twist{0%{transform:rotate(-18deg) scale(.92)}45%{transform:rotate(26deg) scale(1.03)}to{transform:rotate(-40deg) scale(.94)}}.experience{width:min(1200px,100%);margin:0 auto;padding:clamp(2rem,6vw,5rem) clamp(1.25rem,4vw,3.5rem) clamp(3rem,5vw,5rem);display:flex;flex-direction:column;gap:clamp(2rem,4vw,4rem);position:relative;z-index:2}html:not(.intro-complete) .experience{opacity:0;filter:blur(14px) saturate(1.08);transform:translate3d(0,22px,0) scale(.99);pointer-events:none;transition:opacity .8s var(--ease-out-silk),filter .8s var(--ease-out-silk),transform .8s var(--ease-out-silk)}html.intro-complete .experience{opacity:1;filter:none;transform:translateZ(0) scale(1);pointer-events:auto}html:not(.intro-complete) .floating-audio{opacity:0;transform:translate3d(0,10px,0) scale(.96);pointer-events:none;transition:opacity .6s var(--ease-out-silk),transform .6s var(--ease-out-silk)}html.intro-complete .floating-audio{opacity:1;transform:translateZ(0) scale(1);pointer-events:auto}.section-block{--initial-translate: translate3d(0, 60px, 0);background:var(--bg-card);border-radius:var(--radius-large);box-shadow:var(--shadow-card);padding:clamp(2rem,5vw,3.8rem);display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem);opacity:0;transform:var(--initial-translate) scale(.98);transition:opacity .9s var(--ease-out-silk),transform .9s var(--ease-out-silk);will-change:transform,opacity}.section-block[data-direction=left]{--initial-translate: translate3d(-70px, 0, 0)}.section-block[data-direction=right]{--initial-translate: translate3d(70px, 0, 0)}.section-block[data-direction=bottom]{--initial-translate: translate3d(0, 90px, 0)}.section-block[data-direction=center]{--initial-translate: translate3d(0, 50px, 0)}.section-block.in-view{opacity:1;transform:translateZ(0) scale(1)}.hero{text-align:center;gap:clamp(1.2rem,3vw,2rem)}.hero .eyebrow,.hero .intro,.hero .letter-note,.hero .hero-device,.hero .signature{opacity:0;transform:translate3d(0,14px,0);transition:opacity .9s var(--ease-out-silk),transform .9s var(--ease-out-silk);will-change:transform,opacity}.hero.in-view .eyebrow,.hero.in-view .intro,.hero.in-view .letter-note,.hero.in-view .hero-device,.hero.in-view .signature{opacity:1;transform:translateZ(0)}.hero.in-view .eyebrow{transition-delay:.12s}.hero.in-view .intro{transition-delay:.28s}.hero.in-view .letter-note{transition-delay:.42s}.hero.in-view .hero-device{transition-delay:.56s}.hero.in-view .signature{transition-delay:.68s}.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:.85rem;color:var(--text-muted);margin:0 auto .5rem}.hero-title{margin:0 auto;font-size:clamp(2.6rem,7vw,4.6rem);font-weight:600;max-width:18ch;position:relative;display:inline-block;opacity:0;transform:translateY(30px) scale(.97);animation:hero-rise 1s ease-out forwards}.hero-title:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.7) 45%,transparent 70%);transform:translate(-120%);opacity:0;pointer-events:none;animation:hero-shimmer 1.8s ease-out .6s forwards}.hero-title span{display:block;color:transparent;background-image:linear-gradient(120deg,var(--accent),#ff7da1,var(--accent));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;letter-spacing:.1em;text-transform:uppercase;margin-top:.6rem;animation:hero-gradient 6s linear 1s infinite}.hero .intro{margin:0 auto;max-width:46ch;color:var(--text-muted);font-size:1.05rem}.letter-note{margin:0 auto;max-width:48ch;color:var(--text-strong);font-size:1.05rem;line-height:1.9;font-style:italic}.hero-device{margin:0 auto;max-width:760px;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-soft)}.hero-device img{width:100%;height:auto;display:block}.signature{margin:0 0 0 auto;font-family:Cormorant Garamond,Songti SC,STZhongsong,serif;font-size:1.2rem;letter-spacing:.05em;color:var(--accent)}.feature-sections{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,3rem)}.feature{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center;gap:clamp(1.5rem,4vw,3rem);transition:transform .9s var(--ease-out-silk),opacity .9s var(--ease-out-silk),box-shadow .9s var(--ease-out-silk);will-change:transform,opacity}.feature:after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),rgba(255,138,176,.15),transparent 70%);opacity:0;transform:scale(.6) rotate(0);transition:opacity .9s var(--ease-out-silk),transform 1.2s var(--ease-out-silk);will-change:transform,opacity;z-index:-1}.feature.feature--reverse{direction:rtl}.feature.feature--reverse>*{direction:ltr}.feature-media,.feature-copy{transition:transform .8s ease,opacity .8s ease}.feature-media{transform:translateY(20px) scale(.98)}.feature-copy{transform:translateY(30px);opacity:.85}.feature.is-before{opacity:.35;transform:translate(-80px) scale(.95);filter:blur(.5px)}.feature.is-before .feature-media{transform:translate(-25px) scale(.95)}.feature.is-after{opacity:.45;transform:translate(80px) scale(.95);filter:blur(.5px)}.feature.is-after .feature-media{transform:translate(25px) scale(.95)}.feature.is-active{opacity:1;transform:translateZ(0) scale(1);box-shadow:0 30px 80px #dc5a9659;filter:none}.feature.is-active:after{opacity:.35;transform:scale(1) rotate(25deg);animation:aura-drift 10s var(--ease-in-out-silk) infinite}.feature.is-active .feature-media{transform:translateY(0) scale(1)}.feature.is-active .feature-copy{transform:translateY(0);opacity:1}.feature-media img{width:100%;border-radius:28px;display:block;box-shadow:var(--shadow-soft)}.feature-copy h2{margin:0 0 1rem;font-size:clamp(2rem,4vw,3rem)}.feature-copy p{margin:0 0 1.1rem;color:var(--text-muted)}.poem-lines{display:flex;flex-direction:column;gap:.6rem;font-size:1.05rem;line-height:1.9;color:var(--text-strong)}.poem-lines p{margin:0;opacity:.25;transform:translateY(18px);transition:transform .55s var(--ease-out-silk),opacity .55s var(--ease-out-silk);transition-delay:calc(var(--line-index, 0) * 60ms)}.feature.is-active .poem-lines p{opacity:1;transform:translateY(0)}.feature-copy ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}.feature-copy li{display:flex;gap:.5rem;font-size:.95rem;color:var(--text-muted)}.feature-copy li:before{content:"•";color:var(--accent);font-weight:700}.scroll-hint{position:sticky;top:clamp(1.5rem,4vw,2.5rem);align-self:flex-end;font-size:.85rem;color:var(--text-muted);display:inline-flex;align-items:center;gap:.35rem}.scroll-hint:after{content:"";width:1px;height:40px;background:var(--divider);display:inline-block}.floating-audio{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1.2rem,3vw,2rem);border:none;width:64px;height:64px;border-radius:50%;background:linear-gradient(120deg,#ff9abb,#ff2d78);color:#fff;box-shadow:0 20px 45px #ff6d9e66;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:3}.floating-audio:active{transform:translateY(1px) scale(.98)}@media(hover:hover){.floating-audio:hover{transform:translateY(-2px) scale(1.03)}}.floating-audio .audio-icon{font-size:1.2rem}.floating-audio[data-playing=true]{background:linear-gradient(120deg,#ff8fb4,#d71c5a)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.love-letter{background:linear-gradient(135deg,#fff9fb,#fffafc);position:relative;overflow:hidden;margin-top:clamp(2rem,4vw,4rem)}.love-letter:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(255,180,210,.08) 28px,rgba(255,180,210,.08) 29px);pointer-events:none;z-index:0}.love-letter:after{content:"";position:absolute;left:clamp(2rem,5vw,3.8rem);top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,rgba(255,120,170,.15) 20%,rgba(255,120,170,.15) 80%,transparent);pointer-events:none;z-index:0}.letter-container{position:relative;z-index:1;max-width:800px;margin:0 auto}.letter-header{text-align:center;margin-bottom:clamp(2rem,4vw,3rem);padding-bottom:clamp(1.5rem,3vw,2rem);border-bottom:2px solid rgba(255,120,170,.15)}.letter-title{font-size:clamp(2rem,4vw,2.8rem);font-weight:600;color:var(--accent);margin:0 0 1rem;font-family:Cormorant Garamond,"Noto Serif SC",STZhongsong,serif;letter-spacing:.05em}.letter-decoration{font-size:1.5rem;color:#ff78aa80;opacity:0;transform:scale(.8);transition:opacity .9s var(--ease-out-silk) .3s,transform .9s var(--ease-out-silk) .3s}.love-letter.in-view .letter-decoration{opacity:1;transform:scale(1)}.letter-body{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3rem)}.letter-section{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out-silk),transform .9s var(--ease-out-silk);transition-delay:calc(var(--section-index, 0) * .12s)}.love-letter.in-view .letter-section{opacity:1;transform:translateY(0)}.letter-section-title{font-size:clamp(1.5rem,3vw,1.8rem);font-weight:600;color:var(--text-strong);margin:0 0 1.2rem;padding-left:.8rem;border-left:4px solid var(--accent);font-family:Cormorant Garamond,"Noto Serif SC",STZhongsong,serif}.letter-paragraph{font-size:clamp(1rem,2vw,1.15rem);line-height:2;color:var(--text-strong);margin:0 0 1rem;text-align:justify;text-indent:2em;opacity:0;transform:translate(-10px);transition:opacity .6s var(--ease-out-silk),transform .6s var(--ease-out-silk);transition-delay:calc(var(--para-index, 0) * 50ms + .2s)}.love-letter.in-view .letter-paragraph{opacity:1;transform:translate(0)}.letter-footer{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:2px solid rgba(255,120,170,.15);text-align:right}.letter-signature{display:inline-block;text-align:right;opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease-out-silk) .8s,transform .9s var(--ease-out-silk) .8s}.love-letter.in-view .letter-signature{opacity:1;transform:translateY(0)}.letter-signature p{margin:.3rem 0;font-size:1.5rem;color:var(--accent)}.letter-date{font-size:.95rem!important;color:var(--text-muted)!important;font-family:Cormorant Garamond,"Noto Serif SC",STZhongsong,serif;font-style:italic}@media(max-width:768px){.feature.feature--reverse{direction:ltr}.section-block{border-radius:28px}.love-letter:after{left:1.5rem}.letter-paragraph{text-indent:2em;font-size:1.05rem}}@media(prefers-reduced-motion:reduce){.intro-overlay{transition:none}.intro-overlay .envelope,.envelope-flap,.envelope-paper,.intro-bouquet{animation:none!important}html:not(.intro-complete) .experience{opacity:0;filter:none;transform:none}html.intro-complete .experience{transition:none}.petal{animation:none;display:none}.section-block{opacity:1;transform:none}.hero-title,.hero-title:after,.hero-title span{animation:none!important}.hero-title,.hero .eyebrow,.hero .intro,.hero .letter-note,.hero .hero-device,.hero .signature{opacity:1;transform:none}.feature,.feature-media,.feature-copy,.poem-lines p{transition:none!important;transform:none!important;filter:none!important}.letter-section,.letter-paragraph,.letter-decoration,.letter-signature{opacity:1!important;transform:none!important;transition:none!important}}@keyframes aura-drift{0%{transform:scale(1) rotate(18deg)}50%{transform:scale(1.06) rotate(34deg)}to{transform:scale(1) rotate(18deg)}}@keyframes hero-rise{0%{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes hero-shimmer{0%{transform:translate(-120%);opacity:0}40%{opacity:.8}to{transform:translate(140%);opacity:0}}@keyframes hero-gradient{0%{background-position:0% 50%}to{background-position:200% 50%}}