:root{--ink:#612c40;--rose:#934862;--muted:#805e6a;--pink:#efc5d1;--paper:#fff9f6;--line:#9c657334;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--ink);background:var(--pink)}
body{font-family:Manrope,sans-serif;font-size:1rem}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid var(--rose);outline-offset:8px}
button:disabled{cursor:default}
[hidden]{display:none!important}
.botanical-background{position:fixed;inset:0;background:linear-gradient(90deg,#f3d5df52,#efc5d128),url(lilies.png) center/cover;pointer-events:none;animation:botanical 22s ease-in-out infinite alternate}
.botanical-background:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,transparent 20%,#b86c8712 100%)}
@keyframes botanical{to{transform:scale(1.025)}}
.desk{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:0 clamp(24px,5.5vw,100px);overflow:hidden}
.masthead{min-height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #9c657322;gap:20px}
.monogram{font-family:Parisienne,cursive;font-size:2rem;letter-spacing:.015em;color:#a7466e}
.monogram i{font-size:1.1rem;font-weight:400}
.small-label{font-size:.75rem;letter-spacing:.19em;text-transform:uppercase;font-weight:500}
.motion-control{border:0;background:transparent;padding:10px 0;font-size:.78rem;color:var(--muted);text-decoration:underline;text-underline-offset:5px}
.composition{width:100%;max-width:1360px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;padding:64px 0 80px;flex:1}
.eyebrow{display:flex;align-items:center;gap:13px;text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;margin:0 0 30px}
.eyebrow span{width:30px;height:1px;background:var(--rose)}
h1{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(4.2rem,7.8vw,7.7rem);line-height:1.05;letter-spacing:-.035em;margin:0;display:flex;flex-direction:column;align-items:flex-start}
.days-line{display:flex;align-items:baseline;gap:.13em;white-space:nowrap;margin-bottom:.1em}
.days-line strong{font-size:1.65em;font-weight:600;line-height:.95;letter-spacing:-.07em;color:#c34e80;padding-right:.03em}
.days-line>span{font-size:.48em;font-weight:400;color:#8d4d67;letter-spacing:-.025em}
.together-line{font-size:.66em;letter-spacing:-.025em;line-height:1.3}
h1 em{display:block;font-weight:400;font-size:1.04em;color:#a7466e;margin-top:.03em;line-height:1.1}
.dedication{font-family:"Cormorant Garamond",serif;font-size:clamp(1.25rem,1.8vw,1.65rem);line-height:1.5;margin:28px 0 0}
.byline{font-size:.78rem;color:var(--muted);margin:35px 0 0}
.byline span{font-family:Parisienne,cursive;font-size:1.75rem;padding-left:10px;color:var(--ink)}
.envelope-stage{padding:60px 0 28px;perspective:1400px}
.envelope-wrap{width:100%;max-width:510px;margin:auto;transform:rotate(-5deg);transition:transform .8s var(--ease);filter:drop-shadow(0 28px 28px #6d304926) drop-shadow(0 3px 5px #6d30491a)}
.envelope-stage:hover .envelope-wrap{transform:rotate(-2deg) translateY(-7px)}
.envelope{display:block;position:relative;width:100%;aspect-ratio:1.6;border:0;padding:0;background:transparent;perspective:1200px;isolation:isolate;text-align:center}
.envelope-back{position:absolute;inset:0;background:linear-gradient(150deg,#ba718d,#d895ac 75%);border-radius:3px;box-shadow:inset 0 0 0 1px #9b607332}
.envelope-front{position:absolute;inset:0;z-index:3;background:conic-gradient(from 90deg at 50% 55%,#e8a8be 0deg,#f8cedc 90deg,#e7a4bc 180deg,#f5c6d6 270deg,#e8a8be 360deg);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);border-radius:3px;box-shadow:inset 0 -1px 0 #b66b8738}
.envelope-front:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff09 0px,#ffffff09 1px,transparent 1px,transparent 3px);pointer-events:none}
.envelope-flap{position:absolute;inset:0 0 auto;height:59%;background:linear-gradient(165deg,#f9d9e2,#e5a4bb);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:center top;transition:transform 1.1s var(--ease),filter 1.1s;z-index:5;backface-visibility:visible;filter:drop-shadow(0 1px 1px #8d415644)}
.enclosed-paper{position:absolute;inset:6% 5% 3%;background:var(--paper);border:1px solid #dca6b55e;z-index:2;display:flex;align-items:center;flex-direction:column;padding:25px 12px;box-shadow:0 -2px 10px #6d304918;transition:transform 1.2s var(--ease),opacity .4s}
.enclosed-paper>span{font-family:Parisienne,cursive;font-size:clamp(1.6rem,3vw,2.8rem);color:var(--rose)}
.enclosed-paper small{font-family:"Cormorant Garamond",serif;font-size:1rem;margin-top:12px}
.envelope-address{position:absolute;left:0;right:0;bottom:8%;z-index:4;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.envelope-address small{font-size:.6rem;letter-spacing:.25em}
.envelope-address>span{font-family:Parisienne,cursive;font-size:clamp(2.3rem,4vw,3.5rem);line-height:1.2}
.wax-seal{position:absolute;z-index:6;left:50%;top:52%;width:clamp(54px,5.6vw,78px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:48% 52% 49% 46%;background:radial-gradient(circle at 35% 25%,#d98ca5,#a84d6b 72%,#84384e);box-shadow:0 5px 9px #692e4a3b,inset 0 2px 3px #ffe2ed6b,inset 0 -3px 5px #69223766;transition:transform .55s var(--ease),opacity .4s;pointer-events:none}
.wax-seal:before{content:"";position:absolute;inset:7px;border:1px solid #f7c2d273;border-radius:50%;box-shadow:0 1px 1px #692e4a6b}
.wax-seal span{position:relative;left:-1px;top:-2px;display:block;font-family:Parisienne,cursive;font-size:2rem;line-height:1;color:#f7cbd6;text-shadow:0 1px 1px #642338}
.envelope:hover .wax-seal{transform:translate(-50%,-50%) scale(1.08)}
.unsealed .wax-seal{transform:translate(-50%,-65%) rotate(20deg) scale(1.4)!important;opacity:0}
.flap-open .envelope-flap{transform:rotateX(180deg);filter:brightness(.92);z-index:1}
.extracted .enclosed-paper{transform:translateY(-65%) rotate(4deg)}
.reading .envelope-wrap{transform:translateY(30px) rotate(-3deg) scale(.95)}
.desk-footer{min-height:76px;border-top:1px solid #9c657322;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.75rem;gap:20px}
.desk-footer b{font-family:"Cormorant Garamond",serif;font-size:1.5rem;color:var(--ink);font-weight:500;margin-right:6px}
.desk-footer i{font-style:normal;margin-left:8px;font-size:1.2rem}
.composition{position:relative}
.footer-credit{position:absolute;right:0;bottom:10px;margin:0;white-space:nowrap;font-size:.85rem;color:var(--rose)}
.footer-credit>span{font-family:Parisienne,cursive;font-size:1.65rem;margin-left:5px}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:10}
.glint{position:absolute;color:#fff7fa;opacity:0;animation:glimmer 7s ease-in-out infinite;font-size:12px}
@keyframes glimmer{0%,100%{opacity:0;transform:translateY(10px) scale(.6)}50%{opacity:.8;transform:translateY(-14px) scale(1)}}

dialog{border:0;padding:0;margin:auto;width:min(720px,100%);max-width:100%;height:min(950px,100dvh);max-height:100dvh;background:transparent;color:var(--ink);overflow:visible}
dialog::backdrop{background:#49213772;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.reader{height:100%;padding:18px 36px 12px;display:flex;flex-direction:column;gap:12px}
.reader-top{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#fff3f8;min-height:38px}
.reader-top .small-label{text-transform:none}
.close-letter{background:transparent;color:inherit;border:0;display:flex;align-items:center;gap:14px;font-size:.8rem;padding:6px 0 6px 12px}
.close-letter span{font-size:1.8rem;font-weight:400;line-height:1}
.paper-stack{position:relative;flex:1;min-height:0;perspective:1500px;isolation:isolate}
.paper-stack:before,.paper-stack:after{content:"";position:absolute;inset:4px 1px -4px;background:#f1dce0;box-shadow:0 3px 5px #35132322;z-index:-1;transform:rotate(-1.1deg)}
.paper-stack:after{transform:rotate(1.2deg);background:#f8e9e8;inset:2px -2px -2px}
.letter-paper{position:relative;width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);padding:clamp(24px,4.5vw,52px);box-shadow:0 25px 80px #3212254d;transform-origin:left center;scrollbar-width:thin;scrollbar-color:#c28ca0 transparent;outline:none}
.letter-paper:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#c38e9c0b,transparent 5%,transparent 97%,#bc80930f),linear-gradient(180deg,transparent 49.8%,#b89a9512 50%,transparent 50.3%);z-index:0}
.paper-header{position:relative;display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);font-family:"Cormorant Garamond",serif;font-size:1rem;letter-spacing:.1em}
.paper-header i{font-size:.8rem}
.page{position:relative;min-height:75%;padding-top:24px;padding-bottom:32px;font-family:"Cormorant Garamond",serif;font-size:clamp(1.15rem,2.1vw,1.42rem);line-height:1.5}
.page p{margin:0 0 1em}
.page .page-kicker{font-family:Manrope,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin-bottom:20px}
.page h2{font-weight:500;font-size:clamp(1.65rem,3.5vw,2.6rem);line-height:1.12;margin:0 0 22px;letter-spacing:-.025em}
.page h2 em{font-weight:400;color:var(--rose)}
.page .handwritten{font-family:Parisienne,cursive;font-size:1.9rem;color:var(--rose);margin-top:20px}
.page .promise{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.15;letter-spacing:-.025em;margin-top:48px}
.promise em{color:var(--rose)}
.final-page{text-align:center}
.love-lines{line-height:1.45}
.love-lines p{margin:0}
.page .forever{font-family:Parisienne,cursive;font-size:clamp(3.5rem,8vw,5.5rem);line-height:1.1;color:var(--rose);margin:20px 0 10px}
.page .signature{font-family:Parisienne,cursive;font-size:1.9rem;margin-bottom:12px}
.keep-heart{border:1px solid var(--line);background:transparent;width:46px;height:46px;border-radius:50%;font-size:1.5rem;transition:transform .3s,color .3s}
.keep-heart:hover{transform:scale(1.12);color:#b34870}
.paper-number{position:relative;display:block;text-align:right;font-size:.65rem;letter-spacing:.2em;color:var(--muted)}
.page-controls{display:flex;justify-content:space-between;align-items:center;min-height:50px;color:#fff3f8;gap:10px}
.page-controls button{color:inherit;border:1px solid #ffedf33d;border-radius:30px;background:#fff2f20a;padding:12px 18px;font-size:.78rem;display:flex;align-items:center;gap:12px;transition:background .2s}
.page-controls button:hover:not(:disabled){background:#fff2f225}
.page-controls button:disabled{opacity:.35}
.page-status{font-size:.7rem;white-space:nowrap;letter-spacing:.04em}
.swipe-hint{margin:0;text-align:center;color:#f4dce5;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1rem}
.heart-speck{position:fixed;pointer-events:none;z-index:20;font-size:1.2rem;color:#ac426c}
.no-script{position:fixed;bottom:20px;left:20px;background:var(--paper);padding:20px}
.intro{animation:arrival 1.3s var(--ease) both}
.envelope-stage{animation:arrival 1.5s .2s var(--ease) both}
@keyframes arrival{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation-play-state:paused!important}
@media(min-width:1600px){.composition{gap:100px}.envelope-wrap{max-width:610px}}
@media(max-width:760px){
  .desk{padding:0 24px}.masthead{min-height:74px}.masthead>.small-label{display:none}
  .composition{grid-template-columns:1fr;gap:0;text-align:center;padding:34px 0 50px}
  .eyebrow{justify-content:center;margin-bottom:18px;font-size:.65rem;letter-spacing:.15em}
  h1{font-size:clamp(3.9rem,12.5vw,6rem);align-items:center}
  .dedication{font-size:1.15rem;margin-top:18px}.dedication br{display:none}
  .byline{margin-top:10px}.byline span{font-size:1.5rem}
  .envelope-stage{padding:52px 18px 12px}.envelope-wrap{max-width:350px}
  .desk-footer{min-height:64px;font-size:.65rem}
  .envelope-address>span{font-size:2.5rem}.envelope-address small{font-size:.58rem}
  .reader{padding:12px 17px 10px;gap:10px}.reader-top .small-label{font-size:.65rem}
  .letter-paper{padding:24px 27px}.page{font-size:1.2rem;line-height:1.43;padding-top:22px}
  .page-controls button{padding:12px 14px;gap:7px;font-size:.72rem}.page-status{font-size:.65rem}
  .paper-header{padding-bottom:13px}.page .promise{margin-top:32px}
}
@media(max-width:380px){.reader{padding-left:12px;padding-right:12px}.letter-paper{padding:20px}.page{font-size:1.12rem}.page-controls button{padding:11px;font-size:.68rem}.desk{padding:0 18px}}
@media(max-height:730px){.reader{gap:7px}.swipe-hint{display:none}.page{padding-top:18px}.page p{margin-bottom:.8em}.page h2{margin-bottom:18px}.page .forever{margin-top:10px}.page .page-kicker{margin-bottom:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* A bouquet offered into the reader's hands. */
.bouquet-invitation{display:inline-flex;align-items:center;justify-content:center;margin-top:30px;padding:12px 23px;border:1px solid #e6a7bf;border-radius:100px;background:linear-gradient(135deg,#ffe8f1,#f7c5d8);color:#b13269;font-size:.9rem;font-weight:600;letter-spacing:.01em;box-shadow:inset 0 1px 0 #fff9,0 7px 18px #a83d6814;transition:transform .3s,background .3s,box-shadow .3s}
.bouquet-invitation:hover{transform:translateY(-2px);background:linear-gradient(135deg,#ffedf4,#f4b8d0);box-shadow:inset 0 1px 0 #fff9,0 10px 24px #a83d6822}
.letter-bouquet-link{display:block;margin:18px auto 0;border:0;background:transparent;color:var(--rose);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.2rem;padding:7px 0;border-bottom:1px solid var(--line)}
#bouquet-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;background:radial-gradient(ellipse at 50% 40%,#fff8f6 0%,#f3d6e0 58%,#e9bdcd 100%);overflow:auto}
#bouquet-dialog::backdrop{background:#e9bdcd}
.bouquet-room{position:relative;display:grid;grid-template-rows:auto minmax(160px,1fr) auto;min-height:600px;height:100%;max-width:1100px;margin:0 auto;padding:32px 28px 26px;overflow:hidden;text-align:center}
.close-bouquet{position:absolute;right:28px;top:25px;z-index:5;display:flex;align-items:center;gap:12px;background:transparent;border:0;padding:10px;color:var(--muted);font-size:.8rem}
.close-bouquet span{font-size:1.6rem;line-height:1}
.bouquet-heading{position:relative;z-index:2;pointer-events:none}
.bouquet-heading>.small-label{margin:8px 0 16px;color:var(--muted);font-size:.65rem}
.bouquet-heading h2{font-family:"Cormorant Garamond",serif;font-size:clamp(2.3rem,5.3vw,4.6rem);line-height:1;letter-spacing:-.03em;font-weight:400;margin:0;outline:none}
.bouquet-heading h2 em{font-weight:400;color:#a1476b}
.bouquet-presentation{position:relative;min-height:0;isolation:isolate;perspective:1200px;display:flex;align-items:center;justify-content:center;mix-blend-mode:multiply}
.bouquet-float{width:100%;height:100%;display:flex;justify-content:center;align-items:center;transform-origin:50% 80%;border:0;padding:0;background:transparent;cursor:pointer}
.bouquet-art{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(1.32);user-select:none;-webkit-user-select:none;transform-origin:50% 78%;will-change:transform}
.bouquet-actions{position:relative;z-index:3;min-height:110px}
.bouquet-message{font-family:"Cormorant Garamond",serif;font-size:1.22rem;font-style:italic;color:var(--muted);margin:8px 0 15px}
.receive-bouquet{min-width:195px;padding:14px 26px;border:1px solid #85435c;background:#85435c;color:#fff6f9;border-radius:99px;font-size:.85rem;box-shadow:0 8px 22px #88384e1a;transition:background .25s,transform .25s,opacity .25s}
.receive-bouquet:hover{background:#9b4b6a;transform:translateY(-2px)}
.receive-bouquet:disabled{opacity:.55;cursor:default;transform:none}
.receive-bouquet span{margin-left:12px}
.replay-bouquet{display:block;border:0;background:none;margin:8px auto 0;padding:6px;font-size:.72rem;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.bouquet-sparkles{position:absolute;inset:0;pointer-events:none;z-index:4}
.bouquet-spark{position:absolute;top:53%;left:50%;color:#b8587d;font-size:1.4rem;pointer-events:none}
.offering .bouquet-art{animation:offer-bouquet 1.8s cubic-bezier(.18,.72,.2,1) both}
.offering .bouquet-heading{animation:gift-heading 1.2s .3s both}
.offering .bouquet-actions{animation:gift-heading .8s 1s both}
.received .bouquet-art{animation:receive-flowers 1.1s var(--ease) both}
.received .bouquet-float{animation:held-flowers 6s 1.1s ease-in-out infinite}
@keyframes offer-bouquet{0%{opacity:0;transform:translateY(65vh) rotate(-16deg) scale(.48)}18%{opacity:1}64%{transform:translateY(-2%) rotate(3deg) scale(1.015)}100%{opacity:1;transform:translateY(0) rotate(-2deg) scale(1)}}
@keyframes gift-heading{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes receive-flowers{0%{transform:rotate(-2deg) scale(1)}50%{transform:translateY(-3%) rotate(3deg) scale(1.12)}100%{transform:translateY(-1%) rotate(0) scale(1.06)}}
@keyframes held-flowers{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg) translateY(-5px)}}
@media(max-width:760px){
 .bouquet-invitation{margin-top:23px;font-size:.8rem;padding:11px 18px}
 .bouquet-room{padding:58px 12px 18px;min-height:560px}
 .close-bouquet{top:12px;right:12px}
 .bouquet-heading>.small-label{margin:4px 0 12px}
 .bouquet-heading h2{font-size:clamp(2.5rem,10vw,3.5rem)}
 .bouquet-message{font-size:1.12rem}
 .bouquet-actions{min-height:108px}
}
@media(prefers-reduced-motion:reduce){.bouquet-art{will-change:auto}}
.lily-bloom{position:absolute;width:var(--bloom-size);height:var(--bloom-size);pointer-events:none;background:url(lily-bloom.png) center/contain no-repeat;filter:drop-shadow(0 4px 7px #8f45652e);transform-origin:50% 68%;animation:lily-bloom 2.35s cubic-bezier(.18,.76,.23,1) both}
@keyframes lily-bloom{
  0%{opacity:0;transform:translate(-50%,-38%) rotate(calc(var(--bloom-turn) - 28deg)) scale(.06)}
  16%{opacity:1;transform:translate(calc(-50% + var(--bloom-x)*.22),calc(-45% + var(--bloom-y)*.18)) rotate(calc(var(--bloom-turn) - 14deg)) scale(.34)}
  42%{opacity:1;transform:translate(calc(-50% + var(--bloom-x)*.78),calc(-50% + var(--bloom-y)*.76)) rotate(var(--bloom-turn)) scale(1.12)}
  60%{opacity:1;transform:translate(calc(-50% + var(--bloom-x)),calc(-50% + var(--bloom-y))) rotate(var(--bloom-turn)) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--bloom-x)*1.08),calc(-75% + var(--bloom-y) - 18px)) rotate(calc(var(--bloom-turn) + 9deg)) scale(.82)}
}
@media(prefers-reduced-motion:reduce){.lily-bloom{opacity:1;transform:translate(calc(-50% + var(--bloom-x)),calc(-50% + var(--bloom-y)))}}