@font-face{font-family:Nunito;src:url('./assets/fonts/nunito-latin.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url('./assets/fonts/cormorant-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
:root{--ink:#714457;--rose:#a6446c;--pink:#f5b7cf;--cream:#fffaf3;--sans:Nunito,'Trebuchet MS',sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:#ffe8ee;color:var(--ink);font:500 14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
main{overflow:clip}
h1,h2,p,figure{margin:0}
h1,h2{font-weight:800;line-height:1.12;letter-spacing:-.045em}
em{font-style:normal;color:var(--rose)}
a{color:inherit}
svg{display:block;max-width:100%}
::selection{background:#f3afc9}
.botanical-library{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;top:12px;left:12px;z-index:10;padding:10px 18px;border-radius:20px;background:var(--cream);transform:translateY(-160%)}
.skip-link:focus{transform:none}
a:focus-visible,button:focus-visible{outline:3px solid #975283;outline-offset:5px}
h1:focus,h2:focus{outline:none}
.scene{position:relative;isolation:isolate;min-height:100svh;padding:90px max(25px,env(safe-area-inset-right)) max(42px,env(safe-area-inset-bottom)) max(25px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden}
.scene::before{content:'✦';position:absolute;top:24%;left:9%;font-size:20px;color:#bd84a0;opacity:.6;animation:twinkle 3.5s ease-in-out infinite;z-index:-1}
.scene::after{content:'✧';position:absolute;right:9%;bottom:23%;font-size:32px;color:#bd84a0;opacity:.6;animation:float 5s ease-in-out infinite;z-index:-1}
.storybook-chrome{position:absolute;inset:calc(18px + env(safe-area-inset-top)) 22px auto;z-index:4;height:44px;display:flex;align-items:center;justify-content:center}
.back-button{position:absolute;left:0;width:44px;height:44px;border:1px solid #bd91a54d;background:#fffaf37d;border-radius:50%;font:22px var(--sans);color:var(--ink);cursor:pointer;touch-action:manipulation}
.back-button:disabled{visibility:hidden}
.page-dots{display:flex;gap:8px;align-items:center}
.page-dots i{width:6px;height:6px;border-radius:50%;background:#94627c55;transition:width .3s ease,background .3s ease}
.page-dots .current{width:19px;border-radius:9px;background:#aa587b}
.page-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.story-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-width:170px;min-height:54px;margin-top:32px;padding:14px 24px;border:1.5px solid #d58bab;border-radius:24px;background:#f7c6d9;box-shadow:0 5px 0 #dca0b8,0 9px 16px #c57c9612;color:#71354f;font:800 13px/1.5 var(--sans);text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.story-button span{font-size:20px;line-height:1}
.story-button:active{transform:translateY(4px);box-shadow:0 1px 0 #dca0b8;background:#f2b2ce}
@media(hover:hover){.story-button:hover{background:#f4b9d1;transform:translateY(-2px)}.story-button:active{transform:translateY(4px)}}
.opening{background:#ffe8ee}
.dedication{font-size:10px;letter-spacing:.07em;margin-bottom:22px}
.opening-title{position:relative}
.tiny-intro{display:block;font-size:16px;font-weight:700;transform:rotate(-8deg);margin-bottom:10px}
h1{font-size:clamp(58px,16vw,88px);color:#92476a;text-shadow:0 4px 0 #fff7f8;line-height:.99}
h1 em{display:block;color:#bc547f;transform:rotate(-5deg);margin-top:8px}
.title-spark{position:absolute;right:-27px;top:35px;width:24px;color:#bd8550;animation:twinkle 3s ease-in-out infinite}
.first-flower{position:relative;width:235px;height:235px;margin:9px 0 3px}
.first-flower::before{content:'';position:absolute;inset:31px 25px 20px;border-radius:48% 52% 45% 55%;background:#fff7ef;z-index:-1;transform:rotate(-12deg);box-shadow:0 0 0 7px #fff7ef77}
.first-flower>svg{width:100%;height:100%;filter:drop-shadow(0 3px 0 #fff)}
.flower-sway{transform-origin:170px 315px;animation:sway 4s ease-in-out infinite alternate}
.flower-whisper{position:absolute;right:-5px;bottom:58px;font:700 13px var(--sans);color:#976479;transform:rotate(-9deg);background:#fffaf3;padding:3px 9px;border-radius:12px}
.opening-caption{font-size:12px}
.opening-button{margin-top:23px}
.softness{background:#ece4ff}
.softness-inner{width:100%;max-width:620px}
.softness-star{width:34px;height:42px;margin:0 auto 24px;color:#ac7ca8;animation:twinkle 3s ease-in-out infinite}
.softness h2{font-size:clamp(30px,8.1vw,48px);line-height:1.3;letter-spacing:-.035em}
.softness h2>span{display:inline-block;font-size:.66em;margin-bottom:20px;color:#78588a;transform:rotate(-4deg)}
.softness h2 em{color:#8955a4}
.blushing-cloud{position:relative;width:168px;height:77px;background:#fffcf8;border-radius:55px;margin:70px auto 10px;box-shadow:0 6px 0 #d3c1e7;animation:float 4s ease-in-out infinite}
.blushing-cloud::before,.blushing-cloud::after{content:'';position:absolute;background:inherit;border-radius:50%;z-index:-1}
.blushing-cloud::before{width:80px;height:80px;left:24px;top:-35px}
.blushing-cloud::after{width:62px;height:62px;right:21px;top:-20px}
.cloud-eye{position:absolute;top:27px;width:6px;height:8px;background:#72546b;border-radius:50%}.cloud-eye.left{left:60px}.cloud-eye.right{right:60px}
.cloud-smile{position:absolute;left:77px;top:35px;width:14px;height:8px;border:2px solid #72546b;border-top:0;border-radius:0 0 12px 12px}
.cloud-cheek{position:absolute;top:40px;width:20px;height:9px;background:#f7b6ce;border-radius:50%}.cloud-cheek.left{left:37px}.cloud-cheek.right{right:37px}
.drifting-petal{position:absolute;width:27px;opacity:.7;animation:petal-drift 6s ease-in-out infinite;z-index:-1}.petal-one{left:8%;top:40%;rotate:-30deg}.petal-two{right:8%;bottom:30%;rotate:120deg;animation-delay:-3s}
.beauty{background:#fff0df}
.beauty-inner{max-width:540px;width:100%}
.beauty-flower{width:91px;margin:0 auto 32px;filter:drop-shadow(0 4px 0 #fff);animation:sway 4s ease-in-out infinite alternate}
.beauty h2{font-size:clamp(33px,9vw,48px)}
.reminder-content{padding:30px 0 8px}
.reminder-content p{font-size:clamp(17px,4.6vw,24px);line-height:1.85;font-weight:600;letter-spacing:-.02em}
.reminder-content em{display:block;font-weight:800;font-size:1.13em;margin-top:12px;color:#a34a6b}
.drawn-underline{width:210px;height:18px;margin:0 auto;stroke:#cc86a0;stroke-width:2;stroke-linecap:round}
.scene:not([hidden]) .drawn-underline path{stroke-dasharray:1;animation:draw 1s .4s both}
.flowers{background:#eaf3ec}
.bouquet-heading h2{font-size:clamp(34px,9vw,49px)}
.bouquet-heading h2 em{color:#a74d70}
.bouquet{position:relative;width:min(100%,345px);isolation:isolate;margin-top:12px}
.bouquet-halo{position:absolute;z-index:-1;inset:8% 9% 25%;background:#fff9e9;border-radius:48% 52% 45% 55%;border:5px solid #fffdf5;transform:rotate(-9deg)}
.bouquet-art{width:100%;height:auto;filter:drop-shadow(0 2px 0 #fff);animation:float 5s ease-in-out infinite}
.bouquet figcaption{margin-top:-22px;font-size:12px}.bouquet figcaption em{font-style:normal;color:#6b655d}
.bouquet .story-button{margin-top:24px}
.closing{background:#ffe5ed}
.note-intro h2{font-size:clamp(34px,9vw,49px);max-width:350px}.note-intro h2 em{display:block;margin-top:7px}
.envelope{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;width:min(100%,340px);height:200px;margin:56px auto 16px;background:#fff8f4;border:2px solid #d99bb4;border-radius:8px;box-shadow:0 8px 0 #f3bfd2,0 13px 25px #b17b9017;text-decoration:none;transform:rotate(-5deg);transition:transform .2s ease;touch-action:manipulation}
.envelope:active{transform:rotate(-2deg) scale(.97)}
.envelope-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#dda5bd;stroke-width:1}
.seal{position:relative;display:grid;place-items:center;width:57px;height:57px;border-radius:50%;background:#c76e94;color:#fff8f4;border:4px double #f9c8da;box-shadow:0 4px 0 #dc9bb6;animation:seal-pulse 3s ease-in-out infinite}
.seal svg{width:35px}
.envelope-label{position:absolute;bottom:21px;font-size:11px;font-weight:700;background:#fff8f4;padding:3px 9px}
.note-scene{background:#fff3e9}
.letter{position:relative;width:min(100%,355px);padding:38px 30px 37px;text-align:left;background:#fffdf7;border:1px solid #ead3c9;box-shadow:7px 8px 0 #f5d8d7;transform:rotate(-3deg);border-radius:3px}
.letter::before{content:'';position:absolute;width:83px;height:27px;background:#c7d9eed9;top:-14px;left:calc(50% - 41px);transform:rotate(5deg);border-inline:2px dotted #fffcf480}
.letter-flower{width:49px;margin-bottom:25px}
.letter h2{font-size:28px}.letter h2 em{display:block;margin-top:4px}
.letter-copy{font-size:15px;line-height:1.9;margin-top:26px}
.signature{position:relative;margin-top:34px}.signature p{font-size:11px;margin-bottom:6px}.signature>span{font:italic 35px/1.2 Cormorant,Georgia,serif;color:#a04c70}.signature svg{position:absolute;right:0;bottom:0;width:30px;color:#ae6b85}
.note-scene>.story-button{margin-top:43px}
.sign-off{background:#f5e4f6}
.kiss-art{position:relative;width:230px;height:200px;margin-bottom:5px}
.big-heart{display:block;width:220px;height:200px;filter:drop-shadow(0 5px 0 #d6a1c7);animation:heart-bob 3s ease-in-out infinite}
.sign-off::before,.sign-off::after{display:none}
.storybook .scene:not([hidden]) .letter{animation:letter-unfold .75s cubic-bezier(.16,1,.3,1) both}
.storybook .scene:not([hidden]) .bouquet-heading{animation:little-pop .6s .08s both}
.storybook .scene:not([hidden]) .reminder-content{animation:little-pop .65s .15s both}
@keyframes little-pop{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes letter-unfold{from{opacity:0;transform:translateY(45px) rotate(2deg) scale(.92)}to{opacity:1;transform:translateY(0) rotate(-3deg) scale(1)}}
.kiss-spark{position:absolute;font-size:38px;color:#b683aa}.spark-one{left:3px;top:7px;animation:twinkle 3s infinite}.spark-two{right:-3px;bottom:29px;animation:twinkle 3s 1s infinite}.kiss-mini{position:absolute;right:12px;top:-7px;color:#bd6089;font-size:29px;rotate:15deg}
.sign-off h2{font-size:clamp(62px,18vw,91px);color:#ab4d80;transform:rotate(-6deg);text-shadow:0 4px 0 #fff7fc}.sign-off h2 span{color:#d984a9}
.last-caption{margin-top:20px;font-size:13px}
.sign-off footer{margin-top:49px}.footer-dedication{font-size:9px;letter-spacing:.18em;color:#835773}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes sway{from{rotate:-3deg}to{rotate:3deg}}
@keyframes twinkle{0%,100%{opacity:.4;scale:.8}50%{opacity:1;scale:1.15}}
@keyframes petal-drift{0%,100%{translate:0 0;rotate:-8deg}50%{translate:8px 18px;rotate:12deg}}
@keyframes seal-pulse{0%,100%{scale:1}50%{scale:1.06}}
@keyframes heart-bob{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(5deg) scale(1.05)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(min-width:600px){.scene{padding-top:100px;padding-bottom:65px}.storybook-chrome{max-width:650px;margin-inline:auto}.first-flower{width:285px;height:285px}.opening-title h1{font-size:86px}.dedication{font-size:12px;margin-bottom:27px}.opening-caption{font-size:14px}.story-button{font-size:14px;min-height:56px;min-width:190px}.bouquet{width:365px}.scene::before{left:25%}.scene::after{right:25%}.softness h2{font-size:45px}.letter{width:375px;padding:42px 36px}.letter h2{font-size:32px}.note-intro h2{max-width:450px}.envelope{width:365px;height:215px}.reminder-content{padding-top:35px}}
@media(max-height:740px) and (max-width:599px){.scene{padding-top:74px;padding-bottom:28px}.dedication{margin-bottom:12px}.tiny-intro{font-size:14px}.opening-title h1{font-size:54px}.first-flower{width:190px;height:190px}.opening-button{margin-top:20px}.bouquet{width:270px}.bouquet-heading h2{font-size:31px}.beauty-flower{width:70px;margin-bottom:24px}.envelope{margin-top:35px;height:180px}.kiss-art{height:177px}.big-heart{font-size:155px}.sign-off footer{margin-top:35px}.letter{padding:30px 26px}.letter-flower{width:40px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.scene[hidden]{display:flex!important}.scene{break-after:page;min-height:90vh}.storybook-chrome,.story-button,.skip-link{display:none!important}}