@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Sans:wght@400;500;600&family=Sacramento&display=swap";:root{color:#522f35;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--wine:#7c263a;--wine-dark:#591d2d;--rose:#c86b78;--blush:#ecd0ca;--cream:#fffaf2;--gold:#c69b55;background:#f8efe9;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html{background:#f8efe9;min-width:320px;min-height:100%}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,input,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible{outline-offset:5px;outline:3px solid #7c263a59}::selection{color:#fffaf2;background:#9b4052}#root{min-height:100vh}.app-shell{background:radial-gradient(circle at 50% 35%,#fffdf8f0,#0000 38%),linear-gradient(145deg,#f8eee8 0%,#f3ddd9 52%,#f8eee8 100%);min-height:100vh}.scene{isolation:isolate;min-height:100svh;padding:3rem 1.5rem;position:relative;overflow:hidden}.scene:before{content:"";z-index:-1;pointer-events:none;border:1px solid #7c263a1f;border-radius:1.7rem;position:absolute;inset:1rem}.scene:after{content:"";z-index:-1;pointer-events:none;border:1px solid #c69b551a;border-radius:1.45rem;position:absolute;inset:1.4rem}.decorations,.glow{z-index:-2;pointer-events:none;position:absolute;inset:0}.glow{filter:blur(10px);opacity:.55;border-radius:50%;width:28rem;height:28rem}.glow-one{background:radial-gradient(circle,#ce7e885c,#0000 67%);top:-13rem;left:-10rem}.glow-two{background:radial-gradient(circle,#e3b58c73,#0000 67%);inset:auto -10rem -14rem auto}.sparkle{left:var(--left);top:var(--top);color:#b98744;font-size:var(--size);opacity:.45;animation:twinkle 3.2s var(--delay) ease-in-out infinite;position:absolute}.petal{top:-2rem;left:var(--left);opacity:0;background:linear-gradient(150deg,#df9da7,#f2cac7);border-radius:80% 15% 70% 30%;width:9px;height:15px;position:absolute;box-shadow:0 3px 7px #74334021}.decorations.is-celebrating .petal{animation:petal-fall var(--duration) var(--delay) cubic-bezier(.24, .62, .45, .96) forwards}.intro{text-align:center;width:min(100%,720px);margin:0 auto;animation:1s both page-in}.eyebrow,.tiny-label{color:var(--gold);letter-spacing:.27em;text-transform:uppercase;margin:0;font-size:.68rem;font-weight:600}.intro h1{color:var(--wine-dark);letter-spacing:-.045em;margin:1rem 0 .7rem;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(3rem,7vw,5.2rem);font-weight:500;line-height:.87}.intro h1:first-line{font-style:italic}.intro-copy{color:#815b5f;max-width:440px;margin:1.2rem auto 1.7rem;font-family:Cormorant Garamond,Georgia,serif;font-size:1.15rem;font-style:italic}.envelope-button{width:min(480px,88vw);color:inherit;cursor:pointer;perspective:1200px;background:0 0;border:0;flex-direction:column;align-items:center;margin:0 auto;padding:0;display:flex;position:relative}.envelope-button:disabled{cursor:default}.envelope{aspect-ratio:1.55;filter:drop-shadow(0 24px 24px #5b26302e);width:min(400px,82vw);transform-style:preserve-3d;margin-top:4.8rem;transition:transform .5s,filter .5s;display:block;position:relative}.envelope-button:hover .envelope{filter:drop-shadow(0 30px 29px #5b26303b);transform:translateY(-7px)rotate(-.6deg)}.envelope-back,.envelope-paper,.envelope-left,.envelope-right,.envelope-bottom,.envelope-flap{display:block;position:absolute;inset:0}.envelope-back{background:#c36a76;border-radius:5px 5px 12px 12px}.envelope-paper{background:repeating-linear-gradient(0deg,#0000 0 24px,#996d6017 25px),#fffaf0;border:1px solid #773e4029;border-radius:4px;transition:transform .8s cubic-bezier(.24,.8,.25,1) .35s;inset:2% 3% 3%}.envelope-left{clip-path:polygon(0 0,54% 54%,0 100%);background:linear-gradient(135deg,#df959c,#c86f7a);border-radius:6px 0 0 11px}.envelope-right{clip-path:polygon(100% 0,46% 54%,100% 100%);background:linear-gradient(225deg,#d98792,#bd5f6e);border-radius:0 6px 11px 0}.envelope-bottom{clip-path:polygon(0 100%,50% 42%,100% 100%);background:linear-gradient(#dd8993,#cf7380);border-radius:0 0 11px 11px}.envelope-flap{z-index:3;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;backface-visibility:visible;background:linear-gradient(160deg,#e59ba3,#c56a77);border-radius:8px 8px 0 0;height:63%;transition:transform .85s cubic-bezier(.4,0,.2,1),z-index 0s .42s}.wax-seal{z-index:5;color:#f7dfc3;background:radial-gradient(circle at 38% 32%,#ffffff40,#0000 18%),linear-gradient(145deg,#9e4052,#702235);border:2px solid #ffdcc26b;border-radius:46% 54% 49% 51%;place-items:center;width:58px;height:58px;transition:opacity .3s,transform .5s;display:grid;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)rotate(-5deg);box-shadow:0 7px 10px #581e2b47,inset 0 0 0 5px #641d2c2e}.wax-seal span{font-family:Georgia,serif;font-size:1.45rem;line-height:1}.letter-peek{z-index:-1;color:#a66b6f;letter-spacing:.1em;background:#fffaf0;border:1px solid #844e4824;border-radius:4px;flex-direction:column;align-items:center;width:86%;height:82%;padding-top:1.3rem;font-family:Cormorant Garamond,serif;font-size:.92rem;font-style:italic;transition:transform .8s cubic-bezier(.2,.75,.2,1) .48s,z-index 0s .7s;display:flex;position:absolute;bottom:13%;left:7%}.letter-peek i{color:var(--gold);margin-top:.25rem;font-style:normal}.open-label{color:var(--wine);letter-spacing:.1em;text-transform:uppercase;background:#fffaf28c;border:1px solid #7c263a40;border-radius:99px;align-items:center;gap:.8rem;margin-top:1.45rem;padding:.75rem 1.35rem;font-size:.76rem;font-weight:600;transition:color .3s,background .3s,transform .3s;display:flex;box-shadow:0 8px 24px #652b3614}.envelope-button:hover .open-label{color:#fff;background:var(--wine);transform:translateY(-2px)}.open-label i{font-family:serif;font-size:1rem;font-style:normal;transition:transform .3s}.envelope-button:hover .open-label i{transform:translate(3px)}.hint,.edit-note{color:#a48582;letter-spacing:.06em;margin:.9rem 0 0;font-size:.68rem}.envelope-scene.is-opening .envelope-flap{z-index:0;transform:rotateX(180deg)}.envelope-scene.is-opening .wax-seal{opacity:0;transform:translate(-50%,-50%)rotate(20deg)scale(.55)}.envelope-scene.is-opening .letter-peek{z-index:4;transform:translateY(-58%)}.envelope-scene.is-opening .envelope{animation:.55s ease-in .9s forwards envelope-exit}.envelope-scene.is-opening .intro>:not(.envelope-button){opacity:0;transition:opacity .5s .75s}.letter-scene{flex-direction:column;justify-content:center;align-items:center;padding-block:4.5rem 2.5rem;display:flex}.back-button,.celebrate-button{z-index:5;color:var(--wine);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffaf3b8;border:1px solid #7c263a30;border-radius:99px;transition:transform .25s,background .25s;position:absolute;box-shadow:0 8px 24px #64293314}.back-button:hover,.celebrate-button:hover{background:#fffaf2;transform:translateY(-2px)}.back-button{letter-spacing:.06em;padding:.62rem 1rem;font-size:.72rem;font-weight:600;top:2.25rem;left:2.5rem}.back-button span{margin-right:.35rem}.letter-wrap{perspective:1500px;width:min(610px,88vw);animation:1.15s cubic-bezier(.2,.8,.25,1) both letter-arrive;position:relative}.letter-shadow{filter:blur(30px);background:#52252b33;border-radius:50%;position:absolute;inset:6% -5% -2%;transform:translateY(20px)}.letter-paper{color:#593a3c;background-color:#fffaf0;background-image:linear-gradient(90deg,#97634806 1px,#0000 1px),linear-gradient(#97634806 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border:1px solid #9b6d502e;min-height:720px;padding:clamp(2.2rem,6vw,4.5rem) clamp(2rem,8vw,5.4rem) 3.4rem;position:relative;transform:rotate(-.7deg);box-shadow:0 28px 55px #58272f2e,inset 0 0 70px #bb8c6212}.letter-paper:before,.letter-paper:after{content:"";pointer-events:none;position:absolute}.letter-paper:before{border:1px solid #b78b514d;inset:14px}.letter-paper:after{border:1px solid #b78b511a;inset:20px}.paper-clip{z-index:2;opacity:.75;border:3px solid #c8a264;border-bottom-color:#0000;border-radius:12px 12px 6px 6px;width:21px;height:62px;position:absolute;top:-14px;right:54px;transform:rotate(8deg)}.letter-header{text-align:center}.ornament{color:var(--gold);justify-content:center;align-items:center;gap:.6rem;margin-top:.8rem;font-size:.65rem;display:flex}.ornament i{background:linear-gradient(90deg, transparent, var(--gold));width:38px;height:1px;display:block}.ornament i:last-child{transform:rotate(180deg)}.letter-content{z-index:1;margin-top:2.15rem;position:relative}.letter-content .dear{margin-bottom:.1rem;font-family:Cormorant Garamond,serif;font-size:1.08rem;font-style:italic}.letter-content h1{color:var(--wine);margin:0;font-family:Sacramento,Cormorant Garamond,cursive;font-size:clamp(3rem,10vw,4.7rem);font-weight:400;line-height:1.1}.birthday-line{color:var(--gold);margin:.4rem 0 1.7rem;font-family:Cormorant Garamond,serif;font-size:1.45rem;font-style:italic;font-weight:600}.letter-content>p:not(.dear,.birthday-line,.wish){margin:0 0 1rem;font-family:Cormorant Garamond,Georgia,serif;font-size:1.08rem;line-height:1.68}.letter-content .wish{color:var(--wine);text-align:center;margin:1.6rem 0 0;font-family:Cormorant Garamond,serif;font-size:1.23rem;font-style:italic;font-weight:600}.letter-footer{z-index:1;text-align:right;margin-top:2rem;position:relative}.letter-footer p{color:#876568;margin:0;font-family:Cormorant Garamond,serif;font-style:italic}.letter-footer strong{color:var(--wine);font-family:Sacramento,cursive;font-size:2.15rem;font-weight:400;line-height:1.1;display:block}.letter-footer span{color:var(--gold)}.flower{z-index:1;opacity:.72;width:95px;height:145px;position:absolute}.flower-top{transform-origin:bottom;top:28px;left:27px;transform:rotate(-18deg)scale(.8)}.flower-bottom{transform-origin:bottom;bottom:22px;right:18px;transform:rotate(157deg)scale(.7)}.stem{background:#879871;width:1.5px;height:110px;position:absolute;bottom:0;left:50%;transform:rotate(8deg)}.leaf{background:#a7ad89;border-radius:100% 0;width:28px;height:12px;position:absolute}.leaf-one{bottom:37px;left:48px;transform:rotate(-20deg)}.leaf-two{bottom:66px;left:23px;transform:rotate(207deg)}.bloom{width:52px;height:52px;position:absolute;top:6px;left:29px}.bloom i{transform-origin:50% 90%;background:linear-gradient(#e4a1a8,#d77f8b);border-radius:60% 60% 50% 50%;width:22px;height:35px;display:block;position:absolute;top:0;left:16px}.bloom i:nth-child(2){transform:rotate(90deg)}.bloom i:nth-child(3){transform:rotate(180deg)}.bloom i:nth-child(4){transform:rotate(270deg)}.bloom b{z-index:1;background:#c89a58;border-radius:50%;width:20px;height:20px;position:absolute;top:19px;left:17px}.celebrate-button{letter-spacing:.08em;text-transform:uppercase;margin-top:1.6rem;padding:.7rem 1.25rem;font-size:.72rem;font-weight:600;position:relative}.celebrate-button span{color:var(--gold);margin-right:.35rem}.edit-note code{color:#7c4b50;background:#ffffff6b;border-radius:4px;padding:.15rem .38rem;font-size:.65rem}@keyframes twinkle{0%,to{opacity:.22;transform:scale(.72)rotate(0)}50%{opacity:.8;transform:scale(1.18)rotate(35deg)}}@keyframes petal-fall{0%{opacity:0;transform:translateY(-5vh)rotate(0)}10%{opacity:.85}to{opacity:0;transform:translate(75px,110vh)rotate(620deg)}}@keyframes page-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes envelope-exit{to{opacity:0;transform:translateY(80px)scale(.82)}}@keyframes letter-arrive{0%{opacity:0;transform:translateY(65px)rotateX(-8deg)scale(.94)}to{opacity:1;transform:translateY(0)rotateX(0)scale(1)}}@media (width<=640px){.scene{padding:2.7rem 1rem}.scene:before{border-radius:1.2rem;inset:.55rem}.scene:after{border-radius:1rem;inset:.85rem}.envelope-scene{align-items:center;display:flex}.intro h1{font-size:clamp(2.7rem,13vw,3.65rem)}.intro-copy{width:90%;font-size:1rem}.envelope{margin-top:3.8rem}.wax-seal{width:49px;height:49px}.open-label{margin-top:1.2rem}.letter-scene{padding:5rem .7rem 2.2rem}.back-button{top:1.55rem;left:1.45rem}.letter-wrap{width:min(94vw,610px)}.letter-paper{min-height:650px;padding:3.6rem 2.3rem 2.8rem}.letter-paper:before{inset:9px}.letter-paper:after{inset:14px}.flower-top{top:12px;left:6px;transform:rotate(-18deg)scale(.58)}.flower-bottom{bottom:4px;right:-2px;transform:rotate(157deg)scale(.52)}.letter-content{margin-top:1.65rem}.letter-content h1{font-size:clamp(2.8rem,15vw,4rem)}.birthday-line{font-size:1.25rem}.letter-content>p:not(.dear,.birthday-line,.wish){font-size:1rem;line-height:1.56}}@media (width<=380px){.letter-paper{padding-inline:1.75rem}.letter-content>p:not(.dear,.birthday-line,.wish){font-size:.94rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.petal{display:none}}