@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Caveat:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap";:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}:root{color:#e9d5a6;font-synthesis:none;background:#202124;font-family:Cormorant Garamond,serif}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;min-height:100%;margin:0}body{min-height:100vh}button{font:inherit}.page{background:radial-gradient(at 50% 38%,#45413a 0%,#0000 48%),radial-gradient(at 15% 90%,#34302b 0%,#0000 45%),linear-gradient(135deg,#171819 0%,#292a2b 52%,#171819 100%);justify-content:center;align-items:center;width:100%;min-height:100svh;padding:35px;transition:background 1.5s;display:flex;position:relative;overflow:hidden}.page.is-open{background:radial-gradient(at 50% 45%,#fffdf2 0%,#0000 65%),linear-gradient(135deg,#f8efd9 0%,#eee0bd 50%,#f7edda 100%)}.page:before,.page:after{content:"";pointer-events:none;position:absolute}.page:before{border:1px solid #d9bd8066;transition:border-color 1s;inset:22px}.page:after{border:1px solid #e8d6ad22;inset:32px}.page.is-open:before{border-color:#b99a5b88}.page.is-open:after{border-color:#b99a5b44}.flower{color:#e6d2a5;opacity:.45;pointer-events:none;text-shadow:0 3px 20px #0008;transition:color 1s,opacity 1s;animation:7s ease-in-out infinite flowerFloat;position:absolute}.flower-one{font-size:76px;top:7%;left:7%}.flower-two{color:#c9a96e;font-size:58px;animation-delay:1s;top:12%;right:8%}.flower-three{font-size:60px;animation-delay:2s;bottom:9%;left:9%}.flower-four{color:#c9a96e;font-size:82px;animation-delay:.5s;bottom:8%;right:7%}.page.is-open .flower{color:#a88a56;opacity:.28;text-shadow:none}.opening-screen{text-align:center;z-index:1;width:100%;max-width:1100px;animation:1.2s both appear;position:relative}.eyebrow,.footer-note,.letter-label,.letter-bottom{letter-spacing:4px;font-family:Montserrat,sans-serif;font-weight:500}.eyebrow{color:#d8bd83;margin-bottom:15px;font-size:13px}.opening-screen h1{color:#f0dfb8;text-shadow:0 4px 25px #0005;margin:0;font-family:Caveat,cursive;font-size:clamp(70px,10vw,112px);font-weight:600;line-height:.95}.subtitle{color:#e6d6b5;margin:15px 0 30px;font-size:clamp(24px,3vw,32px);font-style:italic}.envelope-hint{color:#f0d9a5;letter-spacing:2.5px;justify-content:center;align-items:center;gap:18px;margin:0 auto 22px;font-family:Montserrat,sans-serif;font-size:clamp(12px,1.5vw,16px);font-weight:700;animation:2s ease-in-out infinite hintPulse;display:flex}.hint-arrow{color:#e6c783;font-size:25px;animation:1.2s ease-in-out infinite arrowBounce}.envelope-button{cursor:pointer;perspective:1200px;-webkit-tap-highlight-color:transparent;background:0 0;border:0;width:min(650px,86vw);height:clamp(290px,42vh,430px);margin:0 auto;padding:0;display:block}.envelope{filter:drop-shadow(0 28px 35px #0009);width:100%;height:100%;transition:transform .5s;position:relative}.envelope-button:hover .envelope{transform:translateY(-9px)scale(1.015)}.envelope-back{background:linear-gradient(145deg,#f8edda,#d8c49d);border:2px solid #c5a76b;border-radius:5px;position:absolute;inset:0}.paper-preview{z-index:1;color:#5b4930;background:#fffaf0;flex-direction:column;justify-content:center;align-items:center;height:82%;font-family:Caveat,cursive;font-size:48px;display:flex;position:absolute;top:12px;left:9%;right:9%}.paper-preview span:last-child{color:#b49355;font-size:36px}.envelope-left,.envelope-right,.envelope-bottom,.envelope-flap{position:absolute;inset:0}.envelope-left{clip-path:polygon(0 0,50% 54%,0 100%);background:linear-gradient(120deg,#f0e3ca,#d9c49e)}.envelope-right{clip-path:polygon(100% 0,50% 54%,100% 100%);background:linear-gradient(240deg,#eadcc0,#cfb98f)}.envelope-bottom{clip-path:polygon(0 100%,50% 49%,100% 100%);background:linear-gradient(160deg,#f4e7cf,#d6c099)}.envelope-flap{clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:top;z-index:3;background:linear-gradient(140deg,#fff4df,#d6bd8c);transition:transform 1.1s}.envelope-name{z-index:4;color:#66502f;letter-spacing:15px;text-shadow:0 1px #fff8e8;white-space:nowrap;font-family:Cormorant Garamond,serif;font-size:clamp(48px,6vw,68px);font-weight:700;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.wax-seal{z-index:5;color:#fff8e8;background:radial-gradient(circle at 35% 30%,#e4cf9d,#927345);border:3px solid #f0d9a5;border-radius:50%;place-items:center;width:76px;height:76px;font-size:36px;transition:opacity .5s;display:grid;position:absolute;top:51%;left:50%;transform:translate(-50%,-50%);box-shadow:0 5px 18px #38201466}.footer-note{color:#cbb98e;margin-top:35px;font-size:12px}.letter-screen{z-index:2;justify-content:center;align-items:center;padding:25px;animation:1.5s both paperAppear;display:flex;position:absolute;inset:0}.letter-paper{color:#493a2b;text-align:center;scrollbar-width:thin;scrollbar-color:#b99a62 transparent;background:radial-gradient(at 12% 15%,#fffef0cc,#0000 40%),radial-gradient(at 90% 85%,#dfc99f55,#0000 45%),repeating-linear-gradient(0deg,#0000,#0000 30px,#b69a6b13 31px),linear-gradient(135deg,#fff9e9 0%,#f1e3c5 100%);border:1px solid #c7aa73;width:min(850px,100%);max-height:calc(100svh - 70px);padding:38px 65px 28px;animation:1.4s both letterUnfold;position:relative;overflow:auto;box-shadow:0 20px 65px #76613d33,inset 0 0 45px #b89b6840}.letter-paper:before{content:"";pointer-events:none;border:1px solid #c8ad7c;position:absolute;inset:12px}.letter-paper:after{content:"";pointer-events:none;border:1px solid #d9c69e88;position:absolute;inset:18px}.paper-flower{color:#a58a5a;opacity:.65;pointer-events:none;z-index:1;font-size:35px;position:absolute}.flower-corner-left{top:24px;left:27px}.flower-corner-right{top:24px;right:27px}.letter-top{color:#927448;letter-spacing:3px;z-index:2;justify-content:center;align-items:center;gap:15px;font-family:Montserrat,sans-serif;font-size:10px;display:flex;position:relative}.letter-date{text-align:center;color:#927448;z-index:2;margin-top:16px;font-family:Caveat,cursive;font-size:20px;position:relative}.ornament{text-align:center;color:#a58a5a;z-index:2;margin:7px 0;font-family:Cormorant Garamond,serif;font-size:22px;position:relative}.letter-label{text-align:center;color:#967a4d;z-index:2;margin:8px 0 10px;font-size:9px;position:relative}.letter-paper h2{text-align:center;color:#705337;z-index:2;margin:8px 0 22px;font-family:Caveat,cursive;font-size:48px;font-weight:600;position:relative}.letter-body{text-align:center;color:#493a2b;z-index:2;max-width:620px;margin:0 auto;font-family:Caveat,cursive;font-size:clamp(22px,2.2vw,26px);font-weight:500;line-height:1.45;position:relative}.letter-body p{margin:0 0 24px;padding:0}.letter-body p:last-child{margin-bottom:0}.signature{text-align:center;color:#795a38;z-index:2;margin:30px auto 20px;position:relative}.signature span{font-family:Caveat,cursive;font-size:36px;font-weight:700;display:block}.signature p{margin:8px 0;font-family:Caveat,cursive;font-size:25px}.signature strong{font-family:Caveat,cursive;font-size:36px;font-weight:700;display:block}.letter-bottom{text-align:center;color:#927448;z-index:2;margin-top:22px;font-size:8px;position:relative}.letter-bottom span{margin:0 8px}@keyframes appear{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes paperAppear{0%{opacity:0;transform:translateY(25px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes letterUnfold{0%{opacity:0;transform:perspective(1200px)rotateX(-8deg)translateY(35px)}to{opacity:1;transform:perspective(1200px)rotateX(0)translateY(0)}}@keyframes hintPulse{0%,to{opacity:.7}50%{opacity:1}}@keyframes arrowBounce{0%,to{transform:translateY(-3px)}50%{transform:translateY(3px)}}@keyframes flowerFloat{0%,to{translate:0}50%{translate:0 -9px}}.page.is-open .envelope-flap{transform:rotateX(180deg)}.page.is-open .wax-seal{opacity:0}.page.is-open .opening-screen{pointer-events:none;animation:.9s forwards fadeAway}@keyframes fadeAway{to{opacity:0;visibility:hidden;transform:scale(1.04)}}@media (width<=600px){.page{padding:25px 17px}.page:before{inset:10px}.page:after{inset:16px}.flower-one{font-size:42px;left:4%}.flower-two{font-size:35px;right:4%}.flower-three{font-size:38px;left:4%}.flower-four{font-size:45px;right:4%}.eyebrow{letter-spacing:2px;font-size:9px}.opening-screen h1{font-size:clamp(58px,13vw,78px)}.subtitle{margin:13px 0 25px;font-size:21px}.envelope-hint{letter-spacing:1.3px;gap:7px;margin-bottom:16px;font-size:9px}.hint-arrow{font-size:18px}.envelope-button{width:88vw;height:clamp(260px,38vh,340px)}.envelope-name{letter-spacing:10px;font-size:43px;bottom:17px}.wax-seal{width:61px;height:61px;font-size:29px}.footer-note{margin-top:25px;font-size:9px}.letter-screen{padding:18px}.letter-paper{width:100%;max-height:calc(100svh - 36px);padding:32px 25px 24px}.letter-paper:before{inset:7px}.letter-paper:after{inset:12px}.letter-top{letter-spacing:2px;font-size:8px}.letter-date{margin-top:13px;font-size:17px}.letter-paper h2{margin-bottom:20px;font-size:40px}.letter-body{font-size:21px;line-height:1.4}.letter-body p{margin-bottom:21px}.signature{margin-top:27px}.signature span,.signature strong{font-size:31px}.signature p{font-size:22px}.letter-bottom{margin-top:17px;font-size:7px}.paper-flower{font-size:24px}}@media (height<=700px) and (width>=601px){.letter-paper{padding-top:22px;padding-bottom:18px}.letter-date{margin-top:8px}.letter-paper h2{margin-bottom:15px;font-size:42px}.letter-body{font-size:21px;line-height:1.3}.letter-body p{margin-bottom:15px}.signature{margin-top:20px}.letter-bottom{margin-top:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.letter-screen{padding-right:300px}.surprise-invitation{text-align:center;color:#705337;cursor:pointer;z-index:4;background:radial-gradient(at 50% 0,#fffef0,#0000 75%),linear-gradient(145deg,#fff9e9,#f1e3c5);border:1px solid #c7aa73;flex-direction:column;justify-content:center;align-items:center;gap:18px;width:215px;min-height:255px;padding:28px 20px;transition:transform .3s,box-shadow .3s;animation:1.5s 1s both invitationAppear;display:flex;position:absolute;top:50%;right:55px;transform:translateY(-50%);box-shadow:0 12px 35px #76613d33,inset 0 0 25px #b89b6840}.surprise-invitation:hover{transform:translateY(-50%)scale(1.035);box-shadow:0 16px 40px #76613d55,inset 0 0 25px #b89b6840}.invitation-label{letter-spacing:2.5px;color:#927448;text-align:center;font-family:Montserrat,sans-serif;font-size:15px;font-weight:700}.invitation-title{color:#705337;text-align:center;font-family:Caveat,cursive;font-size:43px;font-weight:700;line-height:1.1}.invitation-link{letter-spacing:2px;color:#fff8e8;text-shadow:0 1px 3px #2b1c12;background:linear-gradient(145deg,#795638,#4d3525);border:1px solid #a88755;border-radius:4px;padding:12px 18px;font-family:Montserrat,sans-serif;font-size:13px;font-weight:700;animation:1.2s ease-in-out infinite clickMeFlash;box-shadow:0 0 12px #b99a6277}@keyframes invitationAppear{0%{opacity:0;transform:translate(15px,-50%)}to{opacity:1;transform:translateY(-50%)}}@keyframes clickMeFlash{0%,to{opacity:1;transform:scale(1);box-shadow:0 0 10px #b99a6277}50%{opacity:.8;transform:scale(1.09);box-shadow:0 0 18px #c9a96e,0 0 32px #e8d6ad}}.choice-screen{padding-right:25px}.choice-paper{max-width:850px}.choice-buttons{z-index:3;flex-direction:column;align-items:center;gap:12px;margin-top:25px;display:flex;position:relative}.choice-buttons button{color:#705337;cursor:pointer;background:linear-gradient(135deg,#fff9e9,#eee0bd);border:1px solid #b99a62;border-radius:3px;width:min(390px,100%);padding:15px 20px;font-family:Cormorant Garamond,serif;font-size:22px;transition:transform .25s,box-shadow .25s}.choice-buttons button:hover{transform:translateY(-3px);box-shadow:0 5px 15px #92744833}@media (width<=800px){.letter-screen{flex-direction:column;gap:10px;padding:12px 15px}.letter-paper{width:100%;max-height:calc(100svh - 145px);overflow:auto}.surprise-invitation{gap:9px;width:min(340px,100%);min-height:105px;padding:12px 15px;animation:1.2s 1s both invitationMobileAppear;position:relative;top:auto;right:auto;transform:none}.surprise-invitation:hover{transform:scale(1.02)}.invitation-label{font-size:12px}.invitation-title{font-size:34px}.invitation-link{font-size:11px}.choice-screen{padding:18px}.choice-paper{max-height:calc(100svh - 36px)}}@keyframes invitationMobileAppear{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.future-button{text-shadow:0 1px 3px #2b1c12;animation:1.2s ease-in-out infinite clickMeFlash;box-shadow:0 0 12px #b99a6277;color:#fff8e8!important;background:linear-gradient(145deg,#795638,#4d3525)!important;border:1px solid #a88755!important;border-radius:4px!important;padding:12px 18px!important}.future-button:hover{transform:translateY(-2px)scale(1.04)}.chapter-one-photo{object-fit:cover;object-position:center;border:2px solid #c7aa73;border-radius:3px;width:min(100%,520px);max-height:260px;margin:0 auto 22px;display:block;box-shadow:0 8px 22px #76613d33}
