@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500;600&family=Caveat:wght@400;500&display=swap');
:root{--paper:#f7ede9;--cream:#fffcf5;--ink:#50313c;--rose:#a84f66;--rose-dark:#813e53;--muted:#92777c;--line:#ddc8c6;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--script:'Caveat',cursive}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;min-height:100svh;color:var(--ink);background:var(--paper);font:14px/1.7 var(--sans);background-image:radial-gradient(#ad79850c .8px,transparent .8px);background-size:5px 5px;overflow-x:clip}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--rose-dark);outline-offset:5px}[hidden]{display:none!important}.background-art{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1;background:radial-gradient(ellipse at 10% 10%,#efd5d763,transparent 55%),radial-gradient(ellipse at 95% 80%,#e5c4ca65,transparent 55%)}.orbit{position:absolute;width:460px;height:600px;border:1px solid #b4788920;border-radius:50%;transform:rotate(-35deg)}.orbit-one{top:-250px;left:-320px}.orbit-two{bottom:-280px;right:-320px}.doodle{position:absolute;color:#b5788b69;font:64px var(--serif);animation:drift 6s ease-in-out infinite}.doodle-one{left:7%;top:35%;transform:rotate(-22deg)}.doodle-two{right:8%;top:16%;font-size:34px;animation-delay:-2s}.doodle-three{right:4%;bottom:12%;font-size:100px;animation-delay:-3s}.doodle-four{left:9%;bottom:13%;font-size:21px}.topbar{max-width:1000px;margin:auto;min-height:100px;padding:24px 7% 15px;display:flex;align-items:center;justify-content:flex-end;gap:25px;text-align:right;font-size:8px;letter-spacing:.14em;color:var(--muted)}.tiny-heart{font-size:19px;color:var(--rose)}main{max-width:1100px;margin:auto}.eyebrow{font-size:8px;letter-spacing:.17em;font-weight:500;text-transform:uppercase}.introduction{max-width:650px;margin:0 auto;text-align:center;padding:35px 25px 0}.introduction>.eyebrow{font-size:8px;margin:10px 0 19px}h1{position:relative;width:fit-content;margin:0 auto;font:500 clamp(58px,12vw,93px)/.96 var(--serif);letter-spacing:-.035em}h1 em,h2 em,.big-question em{font-weight:400;color:var(--rose)}.title-star{position:absolute;font-size:34px;right:-25px;top:-10px;color:var(--rose)}.intro-copy{font-size:12px;color:var(--muted);line-height:1.9;margin:23px 0 0}.handwritten{font-family:var(--script);font-weight:400}.mail-scene{position:relative;width:100%;max-width:390px;height:280px;margin:10px auto 0;display:flex;align-items:center;justify-content:center;perspective:1000px}.envelope{position:relative;width:280px;height:185px;border:0;padding:0;background:transparent;filter:drop-shadow(0 18px 15px #75425220);transform:rotate(-7deg);transition:transform .45s;isolation:isolate;animation:envelope-arrive 1s cubic-bezier(.2,.7,.2,1) both}.envelope:hover{transform:rotate(-3deg) translateY(-5px)}.envelope-back{position:absolute;inset:0;background:#d9a7ac;border-radius:7px}.peek-letter{position:absolute;top:7px;left:18px;right:18px;height:150px;background:var(--cream);border:1px solid #e3d1bc;border-radius:3px;color:var(--rose);display:flex;flex-direction:column;align-items:center;padding-top:20px;transition:transform .6s .2s}.peek-letter>span{font-size:8px;letter-spacing:.13em}.peek-letter i{font:45px var(--script)}.envelope-front{position:absolute;inset:0;background:linear-gradient(145deg,#f0d1cc,#e7babb);clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);border-radius:5px;z-index:3}.envelope-front::after{content:'';position:absolute;inset:0;background:#f1d2cd;clip-path:polygon(0 100%,50% 45%,100% 100%)}.envelope-flap{position:absolute;inset:0;background:linear-gradient(#edc8c4,#dca8b0);clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:center top;transition:transform .65s,filter .65s;z-index:4}.wax-seal{position:absolute;top:76px;left:calc(50% - 25px);width:50px;height:50px;border-radius:46% 54% 49% 51%;display:grid;place-items:center;background:radial-gradient(circle at 32% 25%,#bd7181,#8c4057 80%);border:3px double #d38b9860;color:#ecc1b9;font:23px var(--serif);box-shadow:0 4px 8px #69304030;z-index:5;transition:opacity .2s,transform .35s}.envelope-address{position:absolute;bottom:22px;left:0;right:0;z-index:6;color:#996473;font:22px var(--script)}.envelope-note{position:absolute;right:4px;top:6px;font-size:27px;color:var(--rose);z-index:5;transform:rotate(9deg)}.envelope-note span{display:block;font:35px var(--script);text-align:center;line-height:.8}.postmark{position:absolute;left:0;bottom:20px;width:100px;height:100px;border:1px solid #ad7c8855;outline:1px solid #ad7c882b;outline-offset:-6px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;transform:rotate(-17deg);color:#a3717b;background:#f7ede955;z-index:7;pointer-events:none}.postmark span{font-size:6px;letter-spacing:.11em}.postmark b{font:24px var(--script);font-weight:400}.envelope.is-opening .envelope-flap{transform:rotateX(180deg);filter:brightness(.93)}.envelope.is-opening .wax-seal{opacity:0;transform:scale(.5)}.envelope.is-opening .peek-letter{transform:translateY(-55px)}.open-invitation{background:none;border:0;color:var(--rose-dark);font-size:11px;min-height:48px;padding:10px 8px;letter-spacing:.02em}.open-invitation span{display:inline-block;margin-left:8px;animation:point 1.8s ease-in-out infinite}.open-invitation:disabled{opacity:.7;cursor:default}.microcopy{font-size:9px;color:var(--muted);margin:2px 0 30px}.intro-foot{display:flex;justify-content:space-between;align-items:center;text-align:left;border-top:1px solid var(--line);padding:18px 0;color:var(--muted);font-size:7px;letter-spacing:.14em}.intro-foot>span+span{font:32px var(--serif);color:var(--rose)}
.letter-section{max-width:640px;padding:30px 22px 0;margin:0 auto;text-align:center;animation:letter-arrive .65s ease-out both}.letter-kicker{margin:15px 0 34px;color:var(--muted)}.letter-paper{position:relative;text-align:left;padding:35px 26px 24px;background:var(--cream);box-shadow:0 24px 60px #6b374315,0 2px 8px #6b374308;border:1px solid #e7dcd0;transform:rotate(-1deg);border-radius:2px;background-image:repeating-linear-gradient(transparent 0,transparent 31px,#ceb9b006 32px)}.letter-paper::after{content:'';position:absolute;inset:8px;border:1px solid #b8987a1a;pointer-events:none}.tape{position:absolute;left:calc(50% - 50px);top:-16px;width:100px;height:32px;background:#dec5a55c;transform:rotate(-5deg);backdrop-filter:blur(2px);clip-path:polygon(2% 0,98% 3%,100% 94%,0 100%)}.letter-top{display:flex;justify-content:space-between;align-items:center;font-size:7px;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid #e6d9ce;padding-bottom:15px}.letter-top>span+span{font:25px var(--serif);color:var(--rose)}.salutation{font-size:34px;color:var(--rose);margin:25px 0 9px}h2{font:500 64px/.9 var(--serif);letter-spacing:-.035em;margin:0 0 23px}.letter-copy{font-size:12px;color:#876d71;line-height:1.9;max-width:370px}.letter-copy p{margin:15px 0}.heart-divider{display:flex;gap:14px;align-items:center;justify-content:center;font:30px var(--serif);color:var(--rose);margin:25px 0 20px}.heart-divider span{height:1px;width:50px;background:var(--line)}.big-question{text-align:center;font:500 clamp(44px,10vw,64px)/1 var(--serif);letter-spacing:-.03em;margin:0 0 15px}.question-caption{text-align:center;font-size:9px;color:var(--muted);max-width:230px;margin:0 auto 23px}.answer-buttons{display:grid;gap:10px}.primary,.secondary{min-height:53px;padding:14px 17px;border-radius:7px;font-size:12px;line-height:1.5;width:100%;transition:background .2s,transform .2s}.primary{color:#fff8f1;background:linear-gradient(120deg,#ab546d,#91445b);border:1px solid #98475d;box-shadow:0 5px 15px #8b455419}.primary:hover{background:var(--rose-dark)}.secondary{background:transparent;border:1px solid var(--line);color:var(--muted)}.secondary:hover{background:#eddfd9}.primary:active,.secondary:active{transform:scale(.98)}.signature{font-size:28px;color:var(--rose);text-align:right;margin:25px 0 15px}.signature span{font:21px var(--serif);display:inline-block;transform:rotate(15deg)}.paper-number{font-size:6px;letter-spacing:.14em;color:#aa9591;display:block;border-top:1px solid #eadfd3;padding-top:15px}.bottom-note{font:italic 20px/1.3 var(--serif);color:var(--muted);margin:30px 0}
.result-section{max-width:620px;margin:auto;padding:50px 28px;text-align:center;animation:letter-arrive .6s ease-out}.result-section:focus{outline:none}.result-art{position:relative;height:130px;width:160px;margin:10px auto 30px}.result-art>span:first-child{font:125px var(--serif);position:absolute;left:0;top:0;color:var(--rose);transform:rotate(-15deg)}.result-art>span+span{font:70px var(--serif);position:absolute;right:0;bottom:0;color:#c897a0;transform:rotate(15deg)}.result-section>.eyebrow{color:var(--rose);margin-bottom:20px}.result-section h2{font-size:clamp(48px,11vw,75px);line-height:1}.result-message{font-size:13px;color:var(--muted);max-width:360px;margin:25px auto}.keepsake{background:var(--cream);border:1px solid var(--line);padding:30px 16px;box-shadow:0 12px 30px #663a4509;position:relative;margin:35px auto;max-width:360px;transform:rotate(-3deg)}.keepsake::before{content:'♡';position:absolute;right:12px;top:5px;color:var(--rose);font:25px var(--serif)}.keepsake>span{display:block;font-size:7px;letter-spacing:.13em;color:var(--muted)}.keepsake b{display:block;font:45px var(--serif);margin:17px 0}.keepsake i{font-weight:400;color:var(--rose)}.result-signature{font-size:28px;color:var(--rose)}.restart{max-width:300px;margin:15px auto}.demo-note{font-size:9px;color:var(--muted)}.result-section.declined .result-art>span+span{color:#c5b4ad}.noscript{margin:40px 25px;padding:25px;border:1px solid var(--line);background:var(--cream)}.noscript h2{font-size:40px}.noscript p{font-size:12px}footer{max-width:900px;margin:25px auto 0;padding:25px 7%;font-size:8px;color:var(--muted);display:flex;justify-content:space-between;gap:20px}footer a{text-decoration:none;white-space:nowrap}dialog{max-width:400px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:0;background:var(--cream);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 25px 70px #50313c30}dialog::backdrop{background:#50313c60;backdrop-filter:blur(7px)}body:has(dialog[open]){overflow:hidden}.dialog-content{position:relative;padding:32px 25px 25px;text-align:center}.close{position:absolute;top:6px;right:6px;width:44px;height:44px;background:none;border:0;font-size:27px;color:var(--muted)}.dialog-icon{font-size:43px;display:block;margin:10px 0 18px}.dialog-content .eyebrow{color:var(--muted);font-size:7px;margin:15px 0}.dialog-content h2{font-size:43px;line-height:1.05;margin:15px 0}.dialog-content>p:not(.eyebrow){font-size:12px;color:var(--muted);margin:20px 0 25px}.dialog-content .secondary{margin-top:10px}.heart-rain{position:fixed;inset:0;overflow:hidden;z-index:200;pointer-events:none}.heart-rain span{position:absolute;top:-50px;font:25px var(--serif);color:var(--rose);animation:heart-fall 2.8s ease-in forwards}.heart-rain span:nth-child(3n){color:#d4a4a5}.heart-rain span:nth-child(3n+1){color:#c9ad7a}@keyframes heart-fall{to{transform:translate(var(--drift),110vh) rotate(50deg);opacity:0}}@keyframes drift{50%{translate:0 -12px;rotate:5deg}}@keyframes point{50%{transform:translateY(-4px)}}@keyframes envelope-arrive{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}@keyframes letter-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(min-width:700px){.topbar{padding-top:30px}.introduction{padding-top:45px}.mail-scene{height:320px;margin-top:25px}.envelope{width:325px;height:215px}.wax-seal{top:90px}.envelope-address{bottom:28px;font-size:25px}.postmark{left:-20px;bottom:25px}.envelope-note{right:-5px;top:5px}.letter-section{padding-top:40px}.letter-paper{padding:40px 55px 30px}.letter-copy{font-size:14px}.answer-buttons{grid-template-columns:1fr 1fr}.salutation{font-size:40px}.letter-paper h2{font-size:85px}.orbit-one{left:-170px}.orbit-two{right:-170px}.doodle-one{left:19%}.doodle-three{right:15%}.result-section{padding-top:70px}.result-message{font-size:14px}}
@media(max-width:350px){.introduction{padding-left:20px;padding-right:20px}.introduction>.eyebrow{font-size:7px}h1{font-size:56px}.title-star{right:-18px;font-size:26px}.mail-scene{height:245px}.envelope{width:240px;height:160px}.wax-seal{top:63px;width:44px;height:44px;left:calc(50% - 22px)}.envelope-address{font-size:20px;bottom:16px}.postmark{width:85px;height:85px;bottom:12px}.envelope-note{font-size:24px;right:0;top:0}.letter-paper{padding-left:20px;padding-right:20px}.letter-top{font-size:6px}.open-invitation{font-size:10px}}
.date-game{margin:35px 0 30px;background:#fffcf5b8;padding:24px 20px;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px #6b374308;scroll-margin-top:85px;text-align:left}.date-game-top{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:25px;color:var(--rose)}.date-game-top>.eyebrow{font-size:7px;line-height:1.8}.date-game-top>span+span{font:30px var(--serif)}#date-panel:focus{outline:none}.date-heading{font:500 clamp(34px,8vw,43px)/1.05 var(--serif);letter-spacing:-.025em;margin:0 0 16px}.date-subtitle{font-size:11px;color:var(--muted);line-height:1.9}.date-step{font-size:7px;letter-spacing:.13em;color:var(--rose);margin:22px 0 12px}.date-choices{display:grid;gap:9px}.date-choice{width:100%;min-height:53px;text-align:left;padding:13px 15px;background:#fffaf4;border:1px solid var(--line);border-radius:7px;font-size:12px;color:var(--ink);transition:background .2s,border-color .2s}.date-choice:hover{background:#f0dddf;border-color:var(--rose)}.date-choice:active{transform:scale(.985)}.date-back{background:none;border:0;color:var(--muted);padding:16px 0 2px;min-height:48px;font-size:11px}.date-ticket{position:relative;border:1px dashed #ba8590;border-radius:8px;padding:25px 15px;background:#f7ede9;text-align:center;margin:25px 0}.date-ticket .eyebrow{font-size:7px;color:var(--rose)}.date-ticket p{font:500 23px/1.3 var(--serif);margin:18px 0}.ticket-plus{font:25px var(--script);color:var(--rose)}.date-ticket small{font-size:9px;color:var(--muted);display:block;line-height:1.9;max-width:230px;margin:auto}.date-promise{font-size:24px;text-align:center;color:var(--rose);line-height:1.3;margin:25px 0}body:has(.result-section:not([hidden]):not(.declined)) .keepsake{margin-bottom:15px}
.whatsapp-reply{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;margin:20px auto 10px;max-width:350px}.whatsapp-help{font-size:10px;color:var(--muted);line-height:1.8;text-align:center;margin:10px 0 20px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.heart-rain{display:none}}