@charset "UTF-8";
/* Lilac Dusk is scoped to the opening chapter while the remaining chapters are reviewed. */
body:has(.hero){--paper:#eeebf5;--ink:#433750;--muted:#6d637a;--rose:#87649c;--line:#d0c6dc;--green:#5c496d}
body:has(.hero) .brand span{display:none}
body:has(.hero) .copy{color:var(--muted)}
body:has(.hero) .envelope{background:#b6a1c8}
body:has(.hero) .envelope:after{background:linear-gradient(34deg,#cbb7d9 49.5%,transparent 50%),linear-gradient(-34deg,#d9c9e5 49.5%,transparent 50%)}
body:has(.hero) .letter{background:#faf7ff}
body:has(.hero) .letter .flower{color:#8b849b}
body:has(.hero) .seal{background:#7e5c95;color:#efdcfa}
body:has(.hero) .orbit{border-color:var(--line)}
body:has(.hero) .spark{color:var(--rose)}
body:has(.hero) #progress i{background:var(--line)}
body:has(.hero) #progress i.active{background:var(--rose)}
body:has(.hero) #pageCount{color:var(--muted)}
:root{--paper:#f5eee5;--ink:#393e32;--muted:#74776b;--rose:#a76d68;--line:#d8d7c8;--green:#424e3b;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 Arial,sans-serif;min-height:100svh}.grain{pointer-events:none;position:fixed;inset:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23878574' filter='url(%23n)' opacity='.2' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible{outline:3px solid var(--rose);outline-offset:5px}header{max-width:1280px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:calc(28px + env(safe-area-inset-top)) 6vw 12px}.brand{border:0;background:none;font:italic 24px var(--serif);text-align:left;user-select:none;-webkit-user-select:none}.brand span{display:block;font:8px Arial,sans-serif;letter-spacing:2px;margin-top:8px}.sound{background:transparent;border:1px solid var(--line);border-radius:30px;padding:10px 16px;font-size:13px;min-height:44px}.sound span{font-size:10px;letter-spacing:1px;margin-left:7px}main{max-width:1080px;margin:0 auto;min-height:calc(100svh - 205px);display:flex;align-items:center;justify-content:center;padding:35px 28px}.page{width:100%;animation:arrive .75s ease both}.hero{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.eyebrow{color:var(--rose);font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-bottom:22px}h1,h2,h3,p{margin-top:0}h1{font:normal clamp(52px,6.5vw,86px)/1.05 var(--serif);letter-spacing:-3px;margin-bottom:24px}h1 em,h2 em{font-weight:normal;color:var(--rose)}h2{font:normal clamp(36px,4.5vw,55px)/1.1 var(--serif);letter-spacing:-1.5px;margin-bottom:20px}h3{font:normal 26px/1.2 var(--serif);margin-bottom:12px}.lead{font:20px/1.5 var(--serif)}.copy{color:#64695d;max-width:390px;font-size:14px}.primary{background:var(--green);color:#fffdf5;border:0;border-radius:5px;padding:16px 24px;min-height:52px;font-size:12px;letter-spacing:.3px;box-shadow:0 7px 18px #39432a12;margin-top:18px}.primary span{margin-left:28px}.primary:hover{background:#56634c}.small{font-size:11px;color:var(--muted)}.hand{font:italic 22px var(--serif);color:var(--rose)}.hero-art{position:relative;min-height:420px;display:grid;place-items:center}.orbit{position:absolute;inset:15px;border:1px solid #c9c6b5;border-radius:50%;transform:rotate(-15deg);opacity:.5}.orbit.two{inset:45px -15px;transform:rotate(23deg)}.envelope{position:relative;width:290px;height:207px;background:#d8b3a3;border-radius:4px;box-shadow:10px 25px 45px #695b3822;transform:rotate(-9deg);margin-top:62px}.letter{position:absolute;left:26px;right:26px;top:-80px;height:225px;background:#fffdf5;padding:23px;text-align:center;box-shadow:0 0 1px #9c8b71;transform:rotate(3deg)}.letter .flower{font-size:47px;color:#7f8964;line-height:1.5}.letter p{font:italic 22px var(--serif)}.envelope:after{content:'';position:absolute;inset:0;background:linear-gradient(34deg,#e0c1af 49.5%,transparent 50%),linear-gradient(-34deg,#e9cbb7 49.5%,transparent 50%);border-radius:4px}.seal{position:absolute;z-index:2;bottom:37px;left:126px;width:41px;height:41px;background:#975e56;border-radius:50%;color:#e6c1aa;display:grid;place-items:center;box-shadow:0 2px 5px #744b4255}.art-note{position:absolute;bottom:5px;right:20px;transform:rotate(-7deg)}.spark{position:absolute;color:#9c956e;font:28px var(--serif);animation:float 5s ease-in-out infinite}.s1{top:30px;left:50px}.s2{right:5px;top:110px;animation-delay:-2s}.s3{bottom:60px;left:0;color:#ae7971;font-size:19px}.center{text-align:center;max-width:760px;margin:auto}.center .copy{margin:0 auto 18px}.scrapbook{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center}.polaroid{background:#fffdf5;padding:15px 15px 26px;box-shadow:0 15px 40px #594e3820;transform:rotate(-4deg);max-width:380px;margin:18px auto;position:relative}.polaroid:before{content:'';position:absolute;top:-15px;width:90px;height:30px;background:#c5c6ab88;left:calc(50% - 45px);transform:rotate(6deg)}.photo{height:275px;background:#e1dece;overflow:hidden;display:grid;place-items:center;text-align:center}.photo img{width:100%;height:100%;object-fit:cover}.placeholder{font:italic 24px var(--serif);color:#7b8069}.placeholder span{font:9px Arial;display:block;letter-spacing:2px;margin-top:15px}.polaroid .hand{margin:18px 0 0;text-align:center;font-size:20px}.carousel-controls{display:flex;gap:18px;align-items:center;margin-top:25px}.round{border:1px solid #c6c9b9;background:transparent;border-radius:50%;width:48px;height:48px}.counter{font-size:10px;letter-spacing:2px;color:var(--muted)}.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:35px 0 20px}.note{min-height:190px;border:1px solid #d4cebe;background:#faf5ec;box-shadow:0 8px 20px #66543b09;padding:22px 14px;transition:transform .3s}.note:nth-child(even){transform:rotate(2deg)}.note:nth-child(odd){transform:rotate(-2deg)}.note:hover{transform:translateY(-5px)}.note-icon{font:42px var(--serif);color:var(--rose);display:block;margin:12px}.note-label{font-size:9px;letter-spacing:2px}.note.open{background:#ececde}.note-message{font:17px/1.5 var(--serif);display:block;animation:arrive .5s}.route{position:relative;height:240px;max-width:610px;margin:25px auto 10px}.route svg{width:100%;height:100%;overflow:visible}.route path{stroke:#a5a78a;stroke-width:1.5;fill:none;stroke-dasharray:4 8;animation:travel 12s linear infinite}.route circle{fill:#a8766e}.country{position:absolute;top:100px;font-size:10px;letter-spacing:2px}.country.left{left:3%}.country.right{right:2%}.route .heart{font:32px var(--serif);color:var(--rose)}.distance-lines p{margin:8px 0;font:20px/1.5 var(--serif)}.future-card{max-width:440px;background:#efeee0;border:1px solid #d9d9c7;border-radius:130px 130px 8px 8px;margin:25px auto 0;padding:35px 25px 28px}.future-icon{font:85px var(--serif);color:#7e8967;height:130px;display:grid;place-items:center}.future-card p{color:#686f5d;font-size:13px}.center .carousel-controls{justify-content:center;margin-top:15px}.slow{max-width:570px;margin:auto;text-align:center}.slow p{font:21px/1.65 var(--serif);margin-bottom:18px;animation:arrive 1.5s both;animation-delay:var(--delay)}.slow h2{margin-bottom:35px}.reveal{padding:40px 0;min-height:430px;display:flex;flex-direction:column;justify-content:center;position:relative}.reveal:before{content:'';position:absolute;inset:-30px;background:radial-gradient(ellipse,#ecd4c266,transparent 65%);z-index:-1}.reveal h1{font-size:clamp(52px,8vw,90px);margin:30px 0}.reveal-final{animation:arrive 2s both;animation-delay:2.8s}.reveal-opening{font:23px var(--serif)}.reveal-bridge{font:17px var(--serif);animation:arrive 1.5s both;animation-delay:1.2s}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;left:var(--x);top:-20px;color:var(--rose);animation:fall var(--d) linear both;animation-delay:var(--wait)}footer{max-width:1080px;margin:auto;display:flex;align-items:center;gap:18px;padding:15px 28px calc(25px + env(safe-area-inset-bottom));min-height:65px}.back{border:0;background:none;width:44px;height:44px;font-size:20px}.back:disabled{visibility:hidden}#progress{display:flex;gap:8px;margin:auto}#progress i{width:5px;height:5px;background:#c9cbbb;border-radius:50%}#progress i.active{background:#69765b;width:22px;border-radius:4px}#pageCount{font-size:9px;letter-spacing:2px;width:44px;color:#777d6b}dialog{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:12px;max-width:420px;width:90%;padding:30px}dialog::backdrop{background:#30382d88}.close{float:right;background:none;border:0;font-size:25px;width:44px;height:44px}.secondary{background:transparent;border:1px solid var(--line);padding:12px;min-height:48px;margin:12px 0}#previewPages{display:flex;flex-wrap:wrap;gap:8px}#previewPages button{width:45px;height:45px;border:1px solid var(--line);background:#fff9ef;border-radius:5px}.fade-line{animation:arrive 1.1s both;animation-delay:var(--delay)}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes float{50%{transform:translateY(-12px) rotate(10deg)}}@keyframes travel{to{stroke-dashoffset:-120}}@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}}@media(max-width:680px){header{padding:calc(20px + env(safe-area-inset-top)) 23px 10px}.brand{font-size:21px}.brand span{font-size:7px;letter-spacing:1.5px}.sound{padding:9px 12px}main{padding:25px 27px;min-height:calc(100svh - 180px)}.hero{grid-template-columns:1fr;gap:0}.hero-art{grid-row:1;min-height:245px;width:290px;margin:0 auto 20px}.envelope{width:210px;height:145px;margin-top:45px}.letter{left:20px;right:20px;top:-51px;height:159px;padding:15px}.letter .flower{font-size:32px}.letter p{font-size:17px}.seal{left:89px;bottom:21px;width:33px;height:33px}.orbit{inset:12px 25px}.orbit.two{inset:35px 2px}.s1{top:5px;left:25px}.s2{right:0;top:50px}.s3{bottom:20px}.art-note{font-size:17px;bottom:-4px;right:0}.hero h1{font-size:61px;margin-bottom:15px}.eyebrow{font-size:9px;margin-bottom:14px}.lead{font-size:19px;margin-bottom:12px}.copy{font-size:13px}.primary{margin-top:12px;width:100%}.scrapbook{display:flex;flex-direction:column;gap:25px}.scrapbook .memory-copy{width:100%}.scrapbook h2{font-size:36px}.polaroid{width:260px;margin:8px auto}.photo{height:210px}.polaroid .hand{font-size:18px}.notes{grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}.note{min-height:155px;padding:15px 12px}.note-icon{font-size:32px;margin:7px}.note-message{font-size:16px}.route{height:210px}.country{top:90px;font-size:9px}.distance-lines p{font-size:19px}.slow p{font-size:20px}.slow{padding:20px 0}.reveal{min-height:480px}footer{padding-left:22px;padding-right:22px}h2{font-size:39px}.future-card{margin-top:20px}.center>.copy{max-width:310px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Horizontal gestures belong to the story; vertical scrolling remains native. */
#stage{touch-action:pan-y pinch-zoom}.swipe-hint{font-size:11px;letter-spacing:1px;color:var(--muted);margin-top:28px}.swipe-hint span{display:inline-block;margin-left:12px;font-size:20px}footer{justify-content:center}#progress{margin:0}#stage:focus{outline:none}#stage:focus-visible{outline:2px solid var(--rose);outline-offset:-4px}
.gift{border:0;background:none;padding:0;position:relative;width:100%;text-align:center}.gift .hero-art{pointer-events:none}.gift .art-note{display:none}.gift-instruction{display:block;margin-top:4px;font-size:18px}.gift .letter{transition:transform .9s,top .9s}.gift-open .letter{transform:translateY(-30px) rotate(0deg)}.gift-open .seal{animation:float 3s ease-in-out infinite}.gift-message{display:block;font:20px/1.6 var(--serif);margin-top:18px;animation:arrive 1s}.memory-flip{display:block;width:100%;border:0;color:inherit;text-align:center;transition:transform .5s}.memory-flip.flipped{transform:rotate(3deg)}.photo-caption{display:block;font-size:17px;margin-top:20px}.photo-back{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:20px;font:18px/1.6 var(--serif);height:100%;background:#eae6d7}.photo-back .hand{font-size:23px}.distance-play{margin:25px auto;max-width:540px}.distance-hearts{height:170px;position:relative;display:flex;align-items:center;justify-content:center}.distance-heart{position:absolute;top:35px;font:50px var(--serif);color:var(--rose);z-index:2;transition:opacity .5s}.distance-heart small{display:block;font:9px Arial;letter-spacing:2px;margin-top:15px}.distance-heart.from{left:calc(4% + var(--closeness)*34%)}.distance-heart.to{right:calc(4% + var(--closeness)*34%)}.distance-thread{height:1px;border-top:1px dashed #a5a78a;width:80%;transform:scaleX(calc(1 - var(--closeness)*.8));opacity:calc(1 - var(--closeness))}.meeting-glow{font:60px var(--serif);color:var(--rose);opacity:0;transition:opacity .6s,text-shadow .6s}.together .distance-heart{opacity:0}.together .meeting-glow{opacity:1;text-shadow:0 0 35px #cda391}.distance-play label{display:block}.distance-play input{display:block;width:90%;max-width:360px;margin:18px auto;min-height:44px;accent-color:var(--rose);cursor:ew-resize;touch-action:pan-y}.distance-response{font-size:20px;min-height:34px}.wish-card{display:block;width:100%;color:inherit;transition:background .5s,transform .5s}.wish-card.collected{background:#e2e7d6;transform:rotate(-2deg)}.wish-label{font-size:10px;color:var(--rose);letter-spacing:1px;display:block;margin-top:20px}.someday-jar{display:flex;justify-content:center;gap:12px;border:1px solid var(--line);border-top:0;border-radius:0 0 25px 25px;max-width:175px;margin:0 auto;padding:12px}.someday-jar span{color:#b9b8a8;transition:color .5s}.someday-jar .saved{color:var(--rose);animation:arrive .6s}.heartbeat{display:block;width:78px;height:78px;margin:30px auto 12px;border-radius:50%;border:1px solid #cfa9a0;background:#efddd2;color:var(--rose);box-shadow:0 0 0 10px #ecdcd333;font:43px var(--serif)}.heartbeat span{display:block;animation:beat 2.8s ease-in-out infinite}.note.open{animation:unfold .55s ease both}@keyframes beat{50%{transform:scale(1.15)}}@keyframes unfold{from{opacity:.5;transform:rotateX(25deg) translateY(7px)}to{opacity:1;transform:rotateX(0) translateY(0)}}@media(max-width:680px){.gift{grid-row:1;margin-bottom:25px}.gift .hero-art{margin-bottom:10px}.gift-open .letter{transform:translateY(-20px)}.memory-flip{width:260px}.distance-hearts{height:150px}.gift-message{font-size:18px}.future-card{max-width:360px}}@media(prefers-reduced-motion:reduce){.gift .letter,.wish-card,.memory-flip{transition:none}.heartbeat span,.note.open,.someday-jar .saved{animation:none}}
/* The first gift: a sealed envelope, then a letter lifted into view. */
.envelope-intro{display:flex;flex-direction:column;gap:0;max-width:500px;margin:auto;text-align:center}.opening-scene{width:100%;height:500px;position:relative;perspective:1000px}.opening-envelope{position:absolute;left:50%;top:255px;transform:translateX(-50%);width:290px;height:190px;border:0;padding:0;background:transparent;isolation:isolate}.opening-back{position:absolute;inset:0;background:#b6a1c8;border-radius:5px;box-shadow:0 22px 50px #5f477528}.opening-flap{position:absolute;inset:0;background:#c5afd7;clip-path:polygon(0 0,100% 0,50% 62%);transform-origin:center top;z-index:5;backface-visibility:hidden}.opening-front{position:absolute;inset:0;background:linear-gradient(33deg,#cbb7d9 49.6%,transparent 50%),linear-gradient(-33deg,#d9c9e5 49.6%,transparent 50%);border-radius:5px;z-index:4}.opening-seal{position:absolute;top:81px;left:calc(50% - 22px);width:44px;height:44px;background:#7e5c95;color:#efdcfa;border-radius:50%;display:grid;place-items:center;box-shadow:0 3px 7px #64467b33;z-index:6}.is-sealed .opening-envelope{top:50%;transform:translate(-50%,-50%) rotate(-7deg)}.is-sealed .opening-seal{animation:beat 3s ease-in-out infinite}.opening-letter{position:absolute;top:40px;left:50%;width:266px;min-height:327px;background:#faf7ff;color:#433750;padding:30px 20px 65px;box-shadow:0 6px 30px #58416c14;z-index:2;animation:lift-letter 1.8s ease both}.opening-letter h1{font-size:47px;letter-spacing:-2px;margin:13px 0 20px}.opening-letter .lead{font-size:20px;line-height:1.5}.opening-letter .copy{font-size:12px;margin:20px 0 0}.letter-flower{font:34px Georgia;color:#8b849b}.is-open .opening-flap{animation:open-flap .65s ease both;z-index:1}.is-open .opening-seal{animation:release-seal .35s ease both}.opening-hint{margin:0;animation:arrive .6s 1.8s both}.is-sealed .opening-scene{height:60svh}body:has(.is-sealed) header,body:has(.is-sealed) footer{visibility:hidden}body:has(.is-sealed) main{min-height:calc(100svh - 205px)}@keyframes open-flap{to{transform:rotateX(180deg)}}@keyframes release-seal{to{opacity:0;transform:scale(.7)}}@keyframes lift-letter{0%,30%{transform:translate(-50%,170px) scale(.92);opacity:0}40%{opacity:1}100%{transform:translate(-50%,0) scale(1);opacity:1}}@media(max-width:680px){.opening-scene{height:470px}.opening-envelope{width:270px;height:180px;top:245px}.opening-letter{width:248px;top:32px}.opening-letter h1{font-size:45px}.envelope-intro{display:flex}.opening-hint{margin-top:0}}@media(prefers-reduced-motion:reduce){.opening-letter{animation:none;transform:translateX(-50%)}.is-open .opening-flap{animation:none;transform:rotateX(180deg)}.is-open .opening-seal{display:none}.opening-hint{animation:none}.is-sealed .opening-seal{animation:none}}
.opening-envelope{z-index:3;top:280px}.opening-letter{top:0}.is-sealed .opening-envelope{top:50%}@media(max-width:680px){.opening-envelope{top:280px}.opening-letter{top:0}}
/* Let each thought arrive after the letter has lifted out. */
.is-open .opening-letter h1{animation:arrive .8s 1.8s both}.is-open .opening-letter .lead{animation:arrive .8s 2.9s both}.is-open .opening-letter .copy{animation:arrive .8s 4s both}.is-open .opening-hint{animation:arrive .6s 5.2s both}@media(prefers-reduced-motion:reduce){.is-open .opening-letter h1,.is-open .opening-letter .lead,.is-open .opening-letter .copy,.is-open .opening-hint{animation:none}}