:root{--parchment:#fff3dc;--parchment-deep:#ead3ad;--paper-ink:#4d284f;--rose:#c486a9;--plum:#5b255f;--deep-plum:#24112f;--soft-gold:#c89d55}
.envelope-experience{position:relative;text-align:center;padding:8px 0 0;isolation:isolate}.envelope-hint{color:#e7d0f4;font-size:clamp(19px,2.3vw,25px);line-height:1.7;margin:0 0 17px;min-height:1.7em;text-shadow:0 4px 20px #c28fe63d}.envelope-stage{position:relative;perspective:1400px;min-height:300px}.envelope-button{display:block;position:relative;width:min(390px,92%);height:255px;margin:0 auto;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--deep-plum)!important;box-shadow:none!important;overflow:visible!important;transform-style:preserve-3d;cursor:pointer;isolation:isolate}.envelope-button:hover{background:transparent!important;transform:translateY(-5px) rotateX(1.5deg)!important}.envelope-button:focus-visible{outline:3px solid #eedbff;outline-offset:10px}.envelope-shell{position:absolute;inset:18px 12px 40px;display:block;transform-style:preserve-3d;filter:drop-shadow(0 26px 25px #08030e78);transition:filter .35s ease}.envelope-button:hover .envelope-shell{filter:drop-shadow(0 30px 32px #0b041085) drop-shadow(0 0 18px #d2a7ef35)}.envelope-shadow{position:absolute;left:12%;right:12%;bottom:24px;height:25px;border-radius:50%;background:#07020d85;filter:blur(15px);transition:transform .4s ease,opacity .4s ease}.envelope-back{position:absolute;inset:0;border:1px solid #e6c993;border-radius:10px;background:linear-gradient(145deg,#fff5de 0%,#ead2aa 58%,#f4dfba 100%);box-shadow:inset 0 0 0 1px #fff9e280,inset 0 -15px 30px #8a526b12}.envelope-back:after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.23;background-image:repeating-radial-gradient(circle at 20% 30%,#70435c 0 .6px,transparent .8px 5px);mix-blend-mode:multiply}.inner-letter{position:absolute;z-index:2;left:8%;right:8%;top:11%;height:78%;border-radius:7px 7px 3px 3px;border:1px solid #e0c18d;background:linear-gradient(165deg,#fff9e9,#efd9b7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-size:22px;font-style:italic;color:#6e3a68;box-shadow:0 7px 25px #4e274429;transform:translateY(32px)}.inner-letter:before,.inner-letter:after{content:"";position:absolute;left:10%;right:10%;height:1px;background:#a46d8730}.inner-letter:before{top:22%}.inner-letter:after{bottom:22%}.inner-letter b{font-weight:400;color:#8f3f66;font-size:25px}.envelope-flap{position:absolute;z-index:5;left:0;right:0;top:0;height:58%;transform-origin:50% 0;backface-visibility:visible;transform-style:preserve-3d;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(175deg,#f8e6c4,#d9b884);border-top:1px solid #ffeac1;filter:drop-shadow(0 5px 4px #683c4a20)}.envelope-flap:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#6f405314,transparent 55%);clip-path:inherit}.envelope-front{position:absolute;z-index:4;inset:0;overflow:hidden;border:1px solid #e1c28c;border-radius:8px;background:linear-gradient(155deg,transparent 48%,#d4b17c 49% 50%,#f6e4c2 51%)}.envelope-front:before{content:"";position:absolute;inset:0;background:linear-gradient(25deg,#eed5a9 0 49%,transparent 50%),linear-gradient(-25deg,#f9e9ca 0 49%,transparent 50%);opacity:.92}.envelope-front:after{content:"🌷";position:absolute;left:22px;bottom:17px;font-size:22px;filter:saturate(.6);opacity:.65;transform:rotate(-10deg)}.wax-seal{position:absolute;z-index:7;left:50%;top:49%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#a8577a,#6d274d 48%,#461536 72%);border:3px double #c67b9d;box-shadow:0 7px 11px #3c132d55,inset 0 0 0 4px #5b183d40;color:#eed6df;transition:filter .3s}.wax-seal:before{content:"";position:absolute;inset:-5px;border:2px dotted #bb7694;border-radius:47% 53% 48% 52%}.wax-seal span{font-size:24px;filter:grayscale(.3) sepia(.15)}.open-hint{position:absolute;left:0;right:0;bottom:0;font-size:14px;letter-spacing:.08em;color:#d9bce8;transition:opacity .25s}.envelope-button:hover .open-hint{color:#fff1ff}.envelope-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.envelope-experience[data-state="opening"] .envelope-button{pointer-events:none;animation:envelope-toward 1.55s cubic-bezier(.2,.75,.2,1) both}.envelope-experience[data-state="opening"] .envelope-shadow{animation:shadow-breathe 1.55s ease both}.envelope-experience[data-state="opening"] .wax-seal{animation:seal-break .48s .16s cubic-bezier(.3,1,.55,1) both}.envelope-experience[data-state="opening"] .envelope-flap{animation:flap-open .75s .42s cubic-bezier(.2,.75,.2,1) both}.envelope-experience[data-state="opening"] .inner-letter{animation:letter-peek .95s .72s cubic-bezier(.15,.8,.22,1) both}.envelope-experience[data-state="opening"] .open-hint{opacity:0}.envelope-experience[data-state="letter-open"] .envelope-button{opacity:.48;transform:translateY(105px) scale(.84);pointer-events:none}.envelope-experience[data-state="letter-open"] .envelope-flap{transform:rotateX(180deg);z-index:1}.envelope-experience[data-state="letter-open"] .wax-seal{opacity:0}.envelope-experience[data-state="letter-open"] .inner-letter{transform:translateY(-125px);opacity:.2}.envelope-experience[data-state="letter-open"] .open-hint{opacity:0}
body .letter-document{z-index:8;width:min(710px,100%);margin:-185px auto 0;position:relative;overflow:hidden;text-align:start;border:1px solid #e4c695!important;border-radius:5px 11px 6px 9px!important;padding:55px 60px 42px!important;background:radial-gradient(circle at 12% 7%,#fffdf0 0 1px,transparent 1.5px),radial-gradient(circle at 85% 76%,#b8876d14 0 1px,transparent 1.6px),linear-gradient(145deg,#fff8e8,#f5e4c7 63%,#eed7b2)!important;background-size:13px 17px,19px 23px,auto!important;color:var(--paper-ink)!important;box-shadow:0 38px 95px #07020db5,0 0 42px #c28ce622,inset 0 0 35px #9b6d6110!important;transform-origin:50% 0}.envelope-experience[data-state="opening"] .letter-document:not([hidden]){animation:paper-unfold 1.05s .62s cubic-bezier(.17,.76,.25,1) both}.letter-document:before{content:""!important;position:absolute!important;inset:7px!important;height:auto!important;left:7px!important;right:7px!important;top:7px!important;border:1px solid #9b6d5326!important;border-radius:4px 9px 5px 8px!important;background:transparent!important;pointer-events:none}.letter-document:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.7%,#8f6e5a12 50%,transparent 50.3%),linear-gradient(0deg,transparent 66%,#8f6e5a0d 66.3%,transparent 66.7%);mix-blend-mode:multiply}.letter-document .letter-top{position:relative;z-index:1;border-bottom:1px solid #9d6d8150;padding:0 0 26px;margin-bottom:28px}.letter-document .letter-top span:first-child{color:#5c2e59!important;font-size:28px}.letter-document .heart{color:#8c416b!important;border-color:#9b5a7d52;background:#fff7e552}.letter-document h2,.letter-document p,.letter-document blockquote,.letter-document .paper-separator,.letter-document button{position:relative;z-index:1}.letter-document h2{color:#4a244a;font-size:33px;margin:0 0 27px}.letter-document>p{color:#563753;margin-bottom:22px}.letter-document blockquote{color:#713961!important;border-color:#9e577d!important;background:linear-gradient(90deg,#a7668b0d,transparent)!important}.letter-document .signature{color:#7d3a64!important;font-size:36px}.paper-fold{position:absolute;pointer-events:none;opacity:.45}.paper-fold-one{left:49.8%;top:0;bottom:0;border-left:1px solid #9d775a1c;box-shadow:1px 0 #fff9ed88}.paper-fold-two{left:0;right:0;top:66%;border-top:1px solid #9d775a18;box-shadow:0 1px #fff9ed88}.paper-tulip{position:absolute;z-index:1;font-size:25px;opacity:.48;filter:saturate(.65)}.paper-tulip-top{top:18px;right:24px;transform:rotate(13deg)}.paper-tulip-bottom{left:24px;bottom:25px;transform:rotate(-18deg)}.paper-separator{display:flex;align-items:center;justify-content:center;gap:12px;margin:32px auto 25px;color:#884468}.paper-separator span{width:74px;height:1px;background:linear-gradient(90deg,transparent,#98637f)}.paper-separator span:last-child{transform:scaleX(-1)}.paper-separator b{font-weight:400}.letter-question-button{display:block;margin:0 auto;outline:none;cursor:pointer;border:0!important;padding:.95rem 2.15rem!important;position:relative;letter-spacing:.04rem;font-weight:700;font-size:17px;border-radius:500px!important;overflow:hidden!important;background:#c68ba9!important;color:#fff7eb!important;box-shadow:0 10px 28px #63304c3b!important}.letter-question-button span{position:relative;z-index:2;transition:color .4s}.letter-question-button:before{content:"";position:absolute;z-index:0;inset:0;width:120%;left:-10%;background:#3d173f;transform:skew(30deg);transition:transform .4s cubic-bezier(.3,1,.8,1)}.letter-question-button:hover{transform:translateY(-2px)!important;background:#d8a2ba!important}.letter-question-button:hover:before{transform:translate3d(100%,0,0) skew(30deg)}.letter-question-button:hover span{color:#37183e}.letter-document .close{display:block;margin:22px auto 0;color:#76536e!important;background:transparent!important;box-shadow:none!important;font-size:14px}.letter-document .close:hover{color:#4d274b!important;transform:none!important}.envelope-experience[data-state="closing"] .letter-document{animation:paper-fold-away .48s ease both}.envelope-experience[data-state="closing"] .envelope-button{animation:envelope-return .5s ease both}
#forgiveness-dialog{color:#f7eafa;background:radial-gradient(circle at 50% -10%,#824b8c80,transparent 52%),linear-gradient(145deg,#3a2046f8,#1f102cfb);border:1px solid #c994df70;border-radius:27px;width:min(560px,calc(100% - 28px));padding:38px 34px 34px;text-align:center;box-shadow:0 35px 120px #050108d9,0 0 52px #be73da25;max-height:min(88dvh,720px);overflow:auto;overscroll-behavior:contain}#forgiveness-dialog::backdrop{background:#0a0414c7;backdrop-filter:blur(12px)}#forgiveness-dialog[open]{animation:question-in .38s cubic-bezier(.2,.8,.2,1) both}.dialog-close{position:absolute;right:9px;top:8px;width:40px;min-height:40px;padding:0!important;border-radius:50%;background:transparent!important;color:#cdb0dc;font-size:25px}.dialog-close:hover{background:#ffffff0c!important;color:white;transform:none}.modal-tulip{display:block;font-size:32px;margin-bottom:10px;filter:drop-shadow(0 5px 8px #09020d)}#forgiveness-dialog .eyebrow{font-size:11px;letter-spacing:.15em}#forgiveness-dialog h2{font:400 clamp(28px,6vw,39px)/1.45 var(--romantic);margin:15px auto;color:#fff0ff;max-width:440px}#forgiveness-dialog h2:dir(rtl){font-family:var(--arabic)}.no-warning{min-height:1.7em;margin:8px auto 0;color:#e4bdd3;font-size:16px;line-height:1.7}.face-wrap{height:128px;display:flex;justify-content:center;align-items:center;color:#d69ac3;filter:drop-shadow(0 0 11px #d895c75c);animation:face-arrive .45s ease both}.face-wrap[hidden]{display:none}.face{width:92px;max-height:118px;overflow:visible}.face__eyes,.face__eye-lid,.face__mouth-left,.face__mouth-right,.face__nose,.face__pupil{animation:eyes 1s .15s forwards}.face__eye-lid,.face__pupil{animation-duration:4s;animation-delay:1.1s;animation-iteration-count:infinite}.face__eye-lid{animation-name:eye-lid}.face__pupil{animation-name:pupil}.face__mouth-left{animation-name:mouth-left}.face__mouth-right{animation-name:mouth-right}.face__nose{animation-name:nose}.question-actions{position:relative;width:min(340px,100%);height:58px;margin:24px auto 0;transition:height .35s ease}.question-actions.playful{height:165px;margin-top:8px}.question-actions button{position:absolute;top:0;width:104px;min-height:50px;padding:12px 14px;transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s,background .2s;will-change:transform}#forgive-ok{left:0;background:linear-gradient(135deg,#e1b4d0,#c994e8);color:#35133f;box-shadow:0 0 25px #c997e83d}#forgive-ok:hover{filter:brightness(1.08);transform:translateY(-2px)}#forgive-no{left:0;background:#56355f;color:#f7eafa;border:1px solid #bd8dcc66;transform:translate3d(var(--no-x,130px),var(--no-y,0),0)}#forgive-no:hover{background:#68426f}.question-view.modal-shake{animation:modal-shake .34s ease}.success-view{padding:24px 0 8px;animation:success-pop .6s cubic-bezier(.18,.8,.2,1) both}.success-view[hidden]{display:none}.success-heart{display:grid;place-items:center;width:98px;height:98px;margin:0 auto 20px;border:1px solid #d5a2de66;border-radius:50%;font-size:55px;color:#efc9ec;background:radial-gradient(circle,#b96dc442,transparent 70%);box-shadow:0 0 50px #c277d23d;animation:heart-pulse 1.8s ease infinite}.success-view p{color:#cfb4db;line-height:1.7;margin:0 0 25px}.success-view button{background:var(--accent);color:var(--accent-ink)}.celebration-layer{position:fixed;z-index:40;inset:0;overflow:hidden;pointer-events:none}.celebration-piece{position:absolute;left:var(--x);top:-10%;font-size:var(--size);opacity:0;filter:drop-shadow(0 4px 6px #1d0924);animation:petal-fall var(--duration) var(--delay) cubic-bezier(.2,.6,.35,1) forwards}
@keyframes envelope-toward{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-11px) scale(1.045)}100%{transform:translateY(58px) scale(.88)}}@keyframes shadow-breathe{40%{transform:scaleX(.84);opacity:.65}100%{transform:translateY(55px) scaleX(.72);opacity:.45}}@keyframes seal-break{0%{opacity:1;transform:scale(1) rotate(0)}60%{opacity:.8;transform:scale(1.14) rotate(-8deg)}100%{opacity:0;transform:scale(.55) rotate(18deg)}}@keyframes flap-open{0%{transform:rotateX(0);z-index:5}49%{z-index:5}50%,100%{transform:rotateX(180deg);z-index:1;filter:drop-shadow(0 -4px 4px #683c4a18)}}@keyframes letter-peek{0%{transform:translateY(32px)}100%{transform:translateY(-138px)}}@keyframes paper-unfold{0%,28%{opacity:0;transform:translateY(-250px) scale(.48,.22) rotateX(-28deg) rotateZ(-2deg)}58%{opacity:1;transform:translateY(-98px) scale(.82,.62) rotateX(-8deg) rotateZ(1deg)}100%{opacity:1;transform:translateY(0) scale(1) rotateX(0) rotateZ(0)}}@keyframes paper-fold-away{to{opacity:0;transform:translateY(-90px) scale(.72,.25) rotateX(-20deg)}}@keyframes envelope-return{from{opacity:.48;transform:translateY(105px) scale(.84)}to{opacity:1;transform:none}}@keyframes question-in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}@keyframes face-arrive{from{opacity:0;transform:translateY(12px) scale(.8)}to{opacity:1;transform:none}}@keyframes modal-shake{25%{transform:translateX(-5px) rotate(-.35deg)}50%{transform:translateX(5px) rotate(.35deg)}75%{transform:translateX(-3px)}100%{transform:none}}@keyframes success-pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}@keyframes heart-pulse{50%{transform:scale(1.07);box-shadow:0 0 65px #d08add55}}@keyframes petal-fall{0%{opacity:0;transform:translate3d(0,-5vh,0) rotate(0)}12%{opacity:.9}100%{opacity:0;transform:translate3d(var(--drift),112vh,0) rotate(var(--spin))}}@keyframes eye-lid{0%,40%,45%,100%{transform:translateY(0)}42.5%{transform:translateY(17.5px)}}@keyframes eyes{from{transform:translateY(112.5px)}to{transform:translateY(15px)}}@keyframes pupil{0%,37.5%,40%,45%,87.5%,100%{stroke-dashoffset:0;transform:translate(0,0)}12.5%,25%,62.5%,75%{transform:translate(-35px,0)}42.5%{stroke-dashoffset:35;transform:translate(0,17.5px)}}@keyframes mouth-left{from,50%{stroke-dashoffset:-102}to{stroke-dashoffset:0}}@keyframes mouth-right{from,50%{stroke-dashoffset:102}to{stroke-dashoffset:0}}@keyframes nose{from{transform:translate(0,0)}to{transform:translate(0,22.5px)}}
@media(max-width:750px){.envelope-stage{min-height:270px}.envelope-button{width:min(340px,96%);height:225px}.envelope-shell{inset:15px 9px 34px}.wax-seal{width:58px;height:58px;margin:-29px 0 0 -29px}.wax-seal span{font-size:21px}body .letter-document{margin-top:-155px;padding:46px 25px 34px!important}.letter-document .letter-top span:first-child{font-size:25px}.letter-document h2{font-size:28px}.letter-document .signature{font-size:32px}.paper-tulip-top{right:14px}.paper-tulip-bottom{left:13px}.letter-question-button{font-size:16px;padding:.9rem 1.55rem!important}#forgiveness-dialog{padding:32px 20px 25px;max-height:90dvh}.face-wrap{height:110px}.face{width:78px}.question-actions.playful{height:145px}.question-actions{width:min(300px,100%)}}
@media(prefers-reduced-motion:reduce){.envelope-button,.envelope-shell,.envelope-shadow,.wax-seal,.envelope-flap,.inner-letter,.letter-document,.question-actions,#forgiveness-dialog[open],.face-wrap,.success-view,.success-heart,.celebration-piece{animation:none!important;transition:none!important}.envelope-experience[data-state="opening"] .wax-seal,.envelope-experience[data-state="letter-open"] .wax-seal{opacity:0}.envelope-experience[data-state="opening"] .envelope-flap,.envelope-experience[data-state="letter-open"] .envelope-flap{transform:rotateX(180deg)}body .letter-document{transform:none!important;opacity:1!important}.celebration-piece{display:none}}
.reading-layout{grid-template-columns:minmax(0,760px)!important;justify-content:center}.intro{text-align:right}.letter-note{margin-top:38px!important;padding-top:25px;border-top:1px solid #9d6d8138;font-size:.88em;line-height:2;color:#76536e!important}.signature span{font-size:.72em}.paper-separator b{font-size:20px}.success-heart{font-size:42px}