@charset "UTF-8";
:root{color-scheme:dark;--bg:#080b18;--text:#f3eee9;--muted:#a7a5b7;--lavender:#cebcf2;--line:rgba(218,208,244,.16);--serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;--sans:"Microsoft YaHei","PingFang SC",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.8;overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #ead8ff;outline-offset:7px}button{touch-action:manipulation}[hidden]{display:none!important}::selection{background:#b9a0dd55;color:white}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}em{font-style:normal;color:var(--lavender)}
#universe,.nebula,.grain{position:fixed;inset:0;pointer-events:none}#universe{width:100%;height:100%;z-index:-3}.nebula{z-index:-2;background:radial-gradient(ellipse at 74% 24%,#72509215,transparent 48%),linear-gradient(180deg,transparent 25%,#080b1866 80%)}.grain{z-index:8;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.reading-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:30}#progress{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#8c88c6,#efc3d6)}
.site-header{max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:28px 5.5%;gap:30px}.wordmark{font-family:var(--serif);font-size:20px;letter-spacing:2px;display:grid;grid-template-columns:30px auto;line-height:1.4}.spark{grid-row:span 2;font-size:34px;color:var(--lavender);align-self:center}.wordmark-en{font:8px/2.4 var(--sans);letter-spacing:2.2px;color:var(--muted)}nav{display:flex;align-items:center;gap:38px;font-size:13px;color:#c5c1d2}nav a{transition:color .2s}nav a:hover{color:white}.nav-last{border:1px solid var(--line);padding:9px 17px;border-radius:30px}.nav-last span{color:var(--lavender);margin-left:18px}.section-shell{max-width:1380px;padding-left:6%;padding-right:6%;margin:auto}.hero{min-height:calc(100svh - 106px);max-height:1050px;position:relative;display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;padding-top:30px;padding-bottom:130px}.hero-copy{position:relative;z-index:2;animation:arrive 1.3s both}.eyebrow{font-size:10px;letter-spacing:2.8px;line-height:1.8;color:#bbb0d2;display:flex;align-items:center;gap:14px}.small-star{font-size:18px}.eyebrow-line{width:22px;height:1px;background:#8a7c9f}.hero h1{font-size:clamp(52px,5.8vw,86px);line-height:1.36;letter-spacing:5px;margin:28px 0 25px}.hero h1 em{background:linear-gradient(110deg,#ead3e4,#c0b9f1 75%);color:transparent;background-clip:text;-webkit-background-clip:text}.hero-description{font-size:16px;line-height:2.1;color:var(--muted);letter-spacing:1px}.text-link{display:inline-flex;align-items:center;gap:22px;font-size:13px;letter-spacing:1px}.hero .text-link{margin-top:30px}.circle-arrow{border:1px solid #bcb0d252;border-radius:50%;display:grid;place-items:center;width:32px;height:32px;transition:transform .3s}.text-link:hover .circle-arrow{transform:translateY(5px)}.dedication{display:flex;align-items:center;gap:15px;font-size:10px;color:#8c879d;letter-spacing:1px;margin-top:50px}.dedication i{width:27px;height:1px;background:var(--line)}
.portrait-universe{position:relative;width:100%;height:560px;isolation:isolate;animation:arrive 1.7s .2s both}.orbit{position:absolute;left:-9%;top:6%;width:122%;height:84%;border:1px solid #c6b2e521;border-radius:50%;transform:rotate(-28deg);pointer-events:none}.orbit-two{left:-5%;top:12%;width:116%;height:75%;transform:rotate(38deg);border-color:#c6b2e510}.orbit-one:before{content:"";position:absolute;top:17%;left:9%;width:5px;height:5px;background:#e8ceef;border-radius:50%;box-shadow:0 0 15px #eccfff}.orbit-star{position:absolute;color:#d6c0ed;z-index:5}.star-one{top:2%;right:13%;font-size:36px;animation:twinkle 5s infinite}.star-two{bottom:10%;left:9%;font-size:27px;animation:twinkle 5s -2s infinite}.photo-note{position:absolute;top:12px;left:12%;font-family:Georgia,serif;font-style:italic;color:#bdb0cf;font-size:13px;transform:rotate(-8deg)}.portrait{position:absolute;padding:0;border:1px solid #ead9ff32;border-radius:4px;overflow:hidden;background:#15131d;box-shadow:0 24px 65px #0007;transition:filter .5s;animation:float 7s ease-in-out infinite}.portrait:hover{filter:brightness(1.12)}.portrait img{display:block;object-fit:cover;width:100%;height:100%}.portrait>span{position:absolute;bottom:0;left:0;right:0;padding:55px 16px 20px;background:linear-gradient(transparent,#14101be6);font-family:var(--serif);font-size:13px;text-align:left;letter-spacing:1px}.portrait small{display:block;font:8px/3 var(--sans);letter-spacing:2px;color:#d1c2e0}.portrait-left{width:43%;height:365px;left:-2%;top:92px;transform:rotate(-12deg);--rotation:-12deg;animation-delay:-2s}.portrait-left img{object-position:50% 52%}.portrait-right{width:43%;height:365px;right:-4%;top:110px;transform:rotate(12deg);--rotation:12deg;animation-delay:-4s}.portrait-center{width:53%;height:360px;left:25%;top:76px;z-index:3;transform:rotate(3deg);--rotation:3deg}.portrait-center img{object-position:63% center}.portrait-center>span{padding:80px 20px 23px;font-size:17px}.photo-caption{position:absolute;bottom:12px;left:35%;display:flex;align-items:center;gap:18px}.photo-caption>span{font:10px Georgia,serif;letter-spacing:2px;color:#b7a4cb;writing-mode:vertical-rl}.photo-caption i{width:1px;height:38px;background:var(--line)}.photo-caption p{font-family:var(--serif);font-size:16px;line-height:1.9;letter-spacing:2px}.scroll-cue{position:absolute;bottom:33px;left:6%;display:flex;align-items:center;gap:12px;font-size:10px;color:#a6a0b5;letter-spacing:2px}.scroll-cue span{width:1px;height:34px;background:linear-gradient(#bfb0de,transparent)}.hero-coordinate{position:absolute;bottom:45px;right:6%;font-size:8px;letter-spacing:3px;color:#7e7992}
.moments{padding-top:95px;padding-bottom:105px}.section-top{border-top:1px solid var(--line);padding-top:25px;display:flex;justify-content:space-between;align-items:center}.section-top>span{font-size:11px;color:#8e879f;letter-spacing:2px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:42px}h2{font-size:clamp(32px,3.4vw,49px);line-height:1.6;letter-spacing:3px}.section-heading>p,.letter-intro>p:not(.eyebrow){font-size:15px;line-height:2.1;color:var(--muted)}.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:60px}.memory-marker{display:flex;align-items:center;gap:22px;margin-bottom:25px}.memory-marker span{font:italic 20px Georgia,serif;color:#a89abf}.memory-marker i{height:1px;background:var(--line);flex:1;position:relative}.memory-marker i:before{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;background:#c7b3e5;border-radius:50%;box-shadow:0 0 12px #cfb4ff88}.memory-label{font-size:11px;color:#c2aedf;letter-spacing:2px;margin-bottom:18px}.memory h3{font-size:24px;line-height:1.7;letter-spacing:1px;margin-bottom:18px}.memory>p:last-child{font-size:14px;line-height:2;color:#9a94aa}.interlude{font-family:var(--serif);text-align:center;margin-top:90px;font-size:22px;letter-spacing:2px;color:#b9b0c7}.interlude span{color:#e2d6ed}
.letter-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;padding-top:100px;padding-bottom:110px;align-items:center;border-top:1px solid var(--line)}.letter-intro h2{margin:26px 0}.handwritten{display:block;font:italic 27px Georgia,serif;color:#b8a0c5;margin-top:40px;transform:rotate(-6deg)}.letter-wrap{perspective:900px}.envelope{min-height:350px;padding:45px 40px 33px;position:relative;overflow:hidden;background:linear-gradient(135deg,#201c30,#121320);border:1px solid #b7a0c438;box-shadow:0 30px 80px #0003;transform:rotate(2deg);text-align:left}.envelope:before,.envelope:after{content:"";position:absolute;inset:auto -20px 0;height:160px;border-top:1px solid #ad94c321;transform:rotate(24deg);transform-origin:left}.envelope:after{transform:rotate(-24deg);transform-origin:right;pointer-events:none}.envelope-star{position:absolute;right:40px;top:25px;font-size:60px;color:#bca9d3}.envelope-to{font-family:var(--serif);font-size:23px;letter-spacing:3px}.envelope-sub{color:#a49ab4;font-size:13px;margin-top:8px;letter-spacing:2px}.seal{position:relative;z-index:1;display:flex;align-items:center;gap:18px;border:1px solid #c9add359;border-radius:30px;background:#2d253a;padding:11px 23px;margin:50px auto 35px;font-size:13px;letter-spacing:2px;box-shadow:0 0 25px #d2a5f40b;transition:background .3s,transform .3s}.seal:hover{background:#46334f;transform:translateY(-3px)}.seal>span:first-child{font-size:24px;line-height:1}.envelope-bottom{font-size:7px;letter-spacing:2px;color:#8f809e;display:block;text-align:center}.letter-paper{background:#eee6db;color:#38313d;padding:38px 42px;box-shadow:0 25px 80px #0005;animation:unfold .9s both;transform-origin:top;font-family:var(--serif);font-size:17px;line-height:2.05}.letter-paper-top{display:flex;align-items:center;justify-content:space-between;font:10px var(--sans);letter-spacing:2px;color:#8e7e91;padding-bottom:25px;border-bottom:1px solid #5b4a671f}.letter-paper-top>span:last-child{font-size:28px}.letter-paper p{margin-top:20px}.letter-paper .salutation{font-size:24px;margin-top:28px}.letter-paper em{color:#80618a}.letter-paper .letter-ending{color:#735278;margin-top:30px;font-size:20px}.signature{display:flex;align-items:center;justify-content:flex-end;gap:20px;margin-top:35px;font-size:12px;color:#88738d}.signature>span:last-child{font-size:30px}
.question{text-align:center;padding-top:110px;padding-bottom:95px;position:relative}.question .eyebrow{justify-content:center}.question-prelude{font-family:var(--serif);font-size:23px;letter-spacing:4px;margin-top:50px;color:#d7c8e1}.question h2{font-size:clamp(33px,4.2vw,60px);line-height:1.65;margin:20px 0;letter-spacing:4px}.question-description{font-size:15px;letter-spacing:1px;color:#a9a0b7}.question-orbit{position:absolute;width:570px;height:570px;max-width:90%;border:1px solid #aa8aca12;border-radius:50%;left:50%;top:50px;transform:translateX(-50%);pointer-events:none}.question-orbit:after{content:"";position:absolute;inset:25px;border:1px solid #aa8aca0b;border-radius:50%}.question-orbit>span{position:absolute;top:35px;right:95px;color:#c8b3db;font-size:22px}.answer-buttons{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:38px}.yes-button{display:flex;align-items:center;justify-content:center;gap:40px;border:1px solid #eed9ff63;border-radius:50px;padding:16px 43px;background:linear-gradient(110deg,#e6d4ed,#bdb6e3);color:#2e233c;font-size:18px;letter-spacing:3px;box-shadow:0 0 40px #c3a4ef19;transition:transform .3s,box-shadow .3s}.yes-button:hover{transform:translateY(-3px);box-shadow:0 0 55px #c3a4ef40}.yes-button>span:last-child{font-size:25px;line-height:1}.yes-button:disabled{cursor:default;opacity:.8}.later-button{border:0;background:transparent;color:#aaa0b8;padding:13px 5px;font-size:14px;letter-spacing:1px;text-decoration:underline;text-underline-offset:7px;text-decoration-color:#aaa0b840}.answer-message{font-size:15px;color:#e2c7dc;min-height:30px;margin-top:25px}.gentle-note{font-size:11px;color:#8f869f;letter-spacing:1px}.next-chapter{margin-top:60px;display:flex;justify-content:center;align-items:center;gap:18px}.next-chapter>span{color:#aa96c0;font-size:27px}.next-chapter p{font-size:11px;line-height:1.9;letter-spacing:1px;color:#857c96}
.together{padding-top:75px;padding-bottom:110px;border-top:1px solid var(--line);text-align:center;animation:arrive 1.5s both}.together-heading .eyebrow{justify-content:center}.together-heart{display:block;font-size:62px;line-height:1.2;margin:30px 0 20px;color:#dbb6d1;text-shadow:0 0 45px #c49be4}.together h2{font-size:clamp(29px,3.3vw,47px);margin-bottom:25px}.together-heading>p:last-child{color:var(--muted);font-size:16px}.couple-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:start;margin-top:70px}.couple-photo{background:#eae1d7;padding:11px 11px 22px;color:#4f3d53;transform:rotate(-4deg);box-shadow:0 15px 45px #0005}.couple-photo:nth-child(2){transform:translateY(-15px) rotate(2deg)}.couple-photo:nth-child(3){transform:rotate(5deg)}.couple-photo button{display:block;width:100%;padding:0;border:0;background:transparent;overflow:hidden}.couple-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .5s}.couple-photo button:hover img{transform:scale(1.04)}.couple-photo figcaption{font-family:var(--serif);font-size:17px;margin-top:14px;letter-spacing:1px}.couple-photo figcaption>span{display:block;font:7px/2.8 var(--sans);letter-spacing:2px;color:#938094}.composite-note{font-size:12px;line-height:2;color:#9e94ad;margin-top:45px}.future-list{max-width:670px;margin:65px auto 0;text-align:left}.future-list p{border-bottom:1px solid var(--line);padding:20px 0;font-family:var(--serif);font-size:20px;letter-spacing:1px;display:flex;gap:25px;align-items:baseline}.future-list span{font:italic 14px Georgia,serif;color:#b2a1c9}.closing{font-family:var(--serif);font-size:clamp(35px,4vw,57px);letter-spacing:4px;line-height:1.8;margin:75px 0 35px}.together>.text-link{color:#a99bb7;font-size:11px}.site-footer{border-top:1px solid var(--line);padding-top:35px;padding-bottom:70px;display:flex;align-items:center;justify-content:space-between;gap:22px;color:#9b90aa;font-size:10px}.site-footer>a{font-family:var(--serif);font-size:14px;letter-spacing:2px}.site-footer>a>span{font-size:23px;vertical-align:middle;margin-right:7px}.site-footer>span{letter-spacing:2px;font-size:8px}.motion-toggle{position:fixed;bottom:20px;right:24px;z-index:10;display:flex;align-items:center;gap:9px;background:#10111bd9;border:1px solid #cfb9e12a;border-radius:25px;padding:8px 14px;font-size:10px;letter-spacing:1px;color:#aaa1bb;backdrop-filter:blur(10px)}.motion-icon{color:#d5bdeb;font-size:12px}.motion-paused .portrait,.motion-paused .orbit-star{animation-play-state:paused!important}
dialog{border:1px solid #c9b2e33d;background:#11101ceF;color:white;max-width:92vw;max-height:94svh;padding:40px 20px 14px;border-radius:8px;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#04050ceA;backdrop-filter:blur(10px)}dialog img{display:block;max-width:80vw;max-height:75svh;object-fit:contain;margin:auto}dialog p{font-size:12px;text-align:center;margin-top:12px;color:#beb1ca}.close-photo{position:absolute;right:7px;top:1px;font-size:30px;width:38px;height:38px;border:0;background:none;line-height:1}.dialog-open{overflow:hidden}.noscript-note{text-align:center;padding:25px;color:#d8c0e9}.js .reveal{opacity:0;transform:translateY(25px);transition:opacity .85s,transform .85s}.js .reveal.visible{opacity:1;transform:none}
@keyframes arrive{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rotation))}50%{transform:translateY(-12px) rotate(var(--rotation))}}@keyframes twinkle{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}@keyframes unfold{from{opacity:0;transform:rotate(2deg) translateY(15px) rotateX(-10deg)}to{opacity:1;transform:rotate(0) translateY(0) rotateX(0)}}
@media(min-width:1600px){.section-shell{padding-left:80px;padding-right:80px}.site-header{padding-left:100px;padding-right:100px}}
@media(max-width:1050px){.hero h1{font-size:61px}.portrait-universe{height:480px}.portrait-left,.portrait-right{height:310px}.portrait-center{height:315px}.portrait>span{font-size:11px}.portrait-center>span{font-size:14px;padding-left:14px;padding-right:10px}.hero-description{font-size:14px}.hero-coordinate{display:none}.letter-section{gap:45px}.letter-paper{padding:28px}.timeline{gap:25px}.memory h3{font-size:21px}.section-heading>p{font-size:13px}.interlude{font-size:19px}.site-header nav{gap:22px}}
@media(max-width:760px){html{scroll-padding-top:30px}.site-header{padding:22px 6%;gap:12px}.wordmark{font-size:16px;grid-template-columns:26px auto;letter-spacing:1px}.wordmark-en{font-size:6px;letter-spacing:1.5px}.spark{font-size:29px}.site-header nav>a:not(.nav-last){display:none}.nav-last{padding:7px 12px;font-size:10px}.nav-last span{margin-left:8px}.hero{grid-template-columns:1fr;min-height:auto;max-height:none;padding-top:34px;padding-bottom:80px}.hero-copy{text-align:center}.hero .eyebrow{justify-content:center;font-size:8px;letter-spacing:2px}.hero h1{font-size:clamp(46px,11vw,69px);line-height:1.35;margin:20px 0;letter-spacing:3px}.hero h1 br:first-of-type{display:none}.hero-description{font-size:14px;line-height:2}.hero .text-link{margin-top:22px;font-size:11px;gap:15px}.dedication{display:none}.portrait-universe{max-width:490px;margin:40px auto 0;height:440px;width:90%}.portrait-left,.portrait-right{height:290px;top:66px;width:43%}.portrait-center{height:300px;top:45px;width:54%;left:24%}.portrait-center>span{font-size:14px}.photo-note{top:0;left:8%;font-size:11px}.star-one{right:4%;top:-10px;font-size:27px}.star-two{bottom:10%}.photo-caption{bottom:0;left:31%;gap:14px}.photo-caption p{font-size:13px}.scroll-cue{left:50%;bottom:10px;transform:translateX(-50%);white-space:nowrap;font-size:8px}.scroll-cue span{height:25px}.moments{padding-top:70px;padding-bottom:70px}.section-top>span{font-size:9px}.eyebrow{font-size:8px;letter-spacing:2px}.section-heading{display:block;margin-top:30px}.section-heading>p{margin-top:23px;font-size:14px}h2{font-size:32px;letter-spacing:2px}.timeline{grid-template-columns:1fr;gap:33px;margin-top:40px}.memory{display:grid;grid-template-columns:40px 1fr;column-gap:15px;position:relative;padding-bottom:8px}.memory-marker{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;gap:15px;margin:0;align-items:flex-start;padding-top:3px}.memory-marker i{width:1px;flex:1;margin-left:9px}.memory-marker i:before{left:-2px;top:0}.memory-label,.memory h3,.memory>p:last-child{grid-column:2}.memory-label{margin-bottom:8px;font-size:10px}.memory h3{font-size:23px;margin-bottom:9px}.memory h3 br{display:none}.memory>p:last-child{font-size:13px}.interlude{font-size:18px;line-height:2;margin-top:45px;text-align:left;letter-spacing:1px}.interlude span{display:block}.letter-section{grid-template-columns:1fr;gap:42px;padding-top:65px;padding-bottom:65px;border-top:0;position:relative}.letter-section:before{content:"";position:absolute;top:0;left:6%;right:6%;height:1px;background:var(--line)}.letter-intro h2{margin:22px 0}.letter-intro>p:not(.eyebrow){font-size:14px}.handwritten{font-size:23px;margin-top:25px}.envelope{padding:30px 26px;min-height:310px;transform:rotate(1deg)}.envelope-to{font-size:22px}.envelope-star{font-size:49px;right:23px;top:14px}.envelope-bottom{font-size:6px;letter-spacing:1px}.seal{margin:43px auto 30px}.letter-paper{padding:25px;font-size:17px}.letter-paper p{margin-top:18px}.question{padding-top:75px;padding-bottom:70px}.question-prelude{margin-top:37px;font-size:20px}.question h2{font-size:clamp(29px,6.9vw,45px);letter-spacing:1px;margin:18px 0}.question-description{font-size:13px}.question-orbit{top:70px;height:370px;width:370px}.question-orbit>span{top:14px;right:65px}.answer-buttons{gap:23px;margin-top:30px}.yes-button{padding:13px 30px;gap:24px;font-size:17px}.later-button{font-size:12px}.answer-message{font-size:13px;line-height:1.9}.gentle-note{font-size:10px}.next-chapter{margin-top:37px}.next-chapter p{font-size:10px}.together{padding-top:55px;padding-bottom:70px}.together h2{font-size:28px;letter-spacing:1px}.together h2 em{display:block}.couple-gallery{grid-template-columns:1fr;gap:38px;max-width:340px;margin:45px auto 0;padding:0 12px}.couple-photo{transform:rotate(-3deg)}.couple-photo:nth-child(2){transform:rotate(3deg)}.couple-photo:nth-child(3){transform:rotate(-2deg)}.composite-note{font-size:11px;margin-top:35px}.future-list{margin-top:35px}.future-list p{font-size:16px;gap:15px;letter-spacing:0}.closing{font-size:34px;margin-top:50px;letter-spacing:2px}.site-footer{flex-direction:column;align-items:flex-start;gap:10px;padding-top:25px;padding-bottom:90px}.site-footer>p{font-size:9px}.motion-toggle{bottom:16px;right:16px;padding:7px 12px;font-size:9px}dialog{padding:38px 12px 14px}dialog img{max-width:82vw;max-height:76svh}}
.hero{overflow:clip}
@media(max-width:760px){.hero h1 br:first-of-type{display:initial}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}