:root{color-scheme:light;--bg:#faefee;--ink:#65383e;--muted:#a0797b;--rose:#bd5c6b;--rose-dark:#a44757;--paper:#fffcf6;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);min-width:280px;background-image:radial-gradient(ellipse at 50% 36%,#fff9f5 0,transparent 65%)}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #8c4054;outline-offset:6px}button,h1,h2{ -webkit-text-size-adjust:100%}[hidden]{display:none!important}main{min-height:100svh;max-width:780px;margin:auto;display:flex;flex-direction:column;align-items:center;padding:30px 24px 22px;position:relative}.top-mark{font-family:Georgia,serif;font-size:32px;color:var(--rose);height:58px}.screen{text-align:center;width:100%;margin:auto 0;animation:arrive .7s ease both;padding:24px 0 34px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:3px;line-height:1.8;color:var(--muted);margin:0 0 20px}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(35px,5.8vw,53px);letter-spacing:-1.8px;line-height:1.18;margin:0}h1 em,h2 em{color:var(--rose);font-weight:400}.subtitle{font-size:13px;line-height:1.9;color:var(--muted);margin:20px auto 0;max-width:380px}.envelope{position:relative;display:block;width:min(330px,85vw);aspect-ratio:1.53;margin:65px auto 0;border:0;background:transparent;perspective:1000px;filter:drop-shadow(0 17px 20px #a66a6b28);transition:transform .3s}.envelope:hover{transform:translateY(-6px) rotate(-1deg)}.envelope-back{position:absolute;inset:0;background:#edb1b7;border-radius:5px}.envelope-paper{position:absolute;left:7%;right:7%;top:10%;height:78%;background:var(--paper);border-radius:3px;padding:20px;text-align:left;color:var(--ink);font:italic 22px Georgia,serif;transition:transform .7s .35s}.envelope-paper i{display:block;width:84%;height:1px;margin-top:14px;background:#d5b5ad}.envelope-paper i:last-child{width:55%}.envelope-front{position:absolute;inset:0;background:linear-gradient(135deg,#f5c5c9,#edb3bc);clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%);border-radius:5px}.envelope-front:after{content:'';position:absolute;inset:0;background:#f4c2c7;clip-path:polygon(0 100%,50% 43%,100% 100%);border-top:1px solid #e9abb3}.envelope-flap{position:absolute;inset:0;background:linear-gradient(155deg,#fbd5d4,#efb6bd);clip-path:polygon(0 0,100% 0,50% 55%);transform-origin:top;transition:transform .7s ease,z-index 0s .3s;z-index:3}.seal{position:absolute;top:43%;left:calc(50% - 22px);width:44px;height:44px;border-radius:50%;color:#fce3df;background:var(--rose);box-shadow:0 2px 5px #85434e30,inset 0 0 0 3px #c36a77;font-size:22px;line-height:44px;z-index:4;transition:opacity .2s}.envelope-address{position:absolute;left:0;right:0;bottom:22px;font:italic 17px Georgia,serif;color:#ac737d;letter-spacing:.5px}.envelope.opening .envelope-flap{transform:rotateX(180deg);z-index:0}.envelope.opening .envelope-paper{transform:translateY(-65px)}.envelope.opening .seal{opacity:0}.open-hint{font-size:11px;letter-spacing:.6px;color:var(--muted);margin-top:32px}.open-hint span{display:block;font-size:22px;line-height:1.7;color:#bc8b92}footer{font-size:8px;letter-spacing:2px;color:#b89797;text-align:center;line-height:2;flex-shrink:0;padding-top:14px}footer span{display:block;font-size:17px;margin-top:5px;line-height:1.2}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden}.ambient span{position:absolute;color:#cb949b;opacity:.45;font-size:28px;animation:drift 7s ease-in-out infinite}.ambient span:nth-child(1){left:12%;top:29%;transform:rotate(-20deg)}.ambient span:nth-child(2){right:15%;top:17%;font-size:15px;animation-delay:-2s}.ambient span:nth-child(3){right:11%;bottom:24%;font-size:20px;animation-delay:-4s}.ambient span:nth-child(4){left:18%;bottom:18%;font-size:16px;animation-delay:-1s}.reading{max-width:470px;padding-top:10px}.reading>.eyebrow{font-size:9px;letter-spacing:2px}.letter{position:relative;background:var(--paper);padding:30px 36px 20px;text-align:left;box-shadow:0 10px 40px #a96e6810,0 1px 4px #a96e6810;border:1px solid #eadbd0;transform:rotate(-1deg)}.letter:before{content:'';position:absolute;inset:7px;border:1px solid #e6d5cb;pointer-events:none}.letter-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1px;color:#b2938a;margin-bottom:22px}.letter-top span:last-child{font-size:25px;color:var(--rose)}.letter h2{font-size:33px;font-style:italic;letter-spacing:-.8px;margin-bottom:20px;outline:none}.letter-copy{font-family:Georgia,'Times New Roman',serif;font-size:15px;line-height:1.9;color:#785757}.letter-copy p{margin:0 0 15px}.signature{font:italic 20px Georgia,serif;color:var(--rose);margin:24px 0 4px}.signature span{font-size:14px;margin-left:8px}.letter-bottom{text-align:center;font-size:13px;color:#c0a094;margin-top:15px}.primary{background:var(--rose);border:1px solid var(--rose);color:#fff9f4;border-radius:7px;font-size:13px;min-height:48px;padding:14px 25px;box-shadow:0 5px 12px #bd5c6b18;transition:background .2s,transform .2s}.primary:hover{background:var(--rose-dark);transform:translateY(-2px)}.primary span{margin-left:16px}.read-button{margin-top:30px}.question-icon{font-family:Georgia,serif;font-size:76px;color:var(--rose);line-height:1;margin-bottom:30px}.question h2,.celebration h2{font-size:clamp(36px,6vw,53px);outline:none}.question .subtitle{max-width:300px}.choices{position:relative;width:min(100%,360px);height:175px;margin:30px auto 0}.yes,.no{position:absolute;top:42px;width:125px;height:49px}.yes{left:calc(50% - 136px)}.no{left:calc(50% + 11px);border:1px solid #ddc5c7;background:#fff7f2;color:#9b7b7e;border-radius:7px;font-size:13px;user-select:none;-webkit-user-select:none}.no:focus-visible{outline-offset:2px}.little-note{min-height:32px;font:italic 13px Georgia,serif;color:#ac858a;margin:0}.celebration-heart{font-family:Georgia,serif;font-size:88px;color:var(--rose);line-height:1.2;margin-bottom:24px;animation:heartbeat 1.8s ease infinite}.celebration .subtitle{margin-top:25px;line-height:2}.keepsake{max-width:270px;margin:35px auto 24px;padding:20px 12px;border-top:1px solid #e4cdcd;border-bottom:1px solid #e4cdcd;font:italic 15px/1.8 Georgia,serif;color:#967579}.text-button{border:0;background:transparent;color:var(--rose);font-size:11px;padding:12px}.text-button span{margin-left:8px}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}#confetti span{position:absolute;left:var(--x);top:-40px;color:var(--c);font-size:var(--size);animation:fall var(--duration) var(--delay) linear both}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{50%{translate:0 -14px;rotate:8deg}}@keyframes heartbeat{50%{transform:scale(1.08)}}@keyframes fall{to{transform:translate(var(--sway),110vh) rotate(300deg);opacity:.1}}@media(min-width:850px){main{padding-top:35px}.intro{padding-bottom:50px}.envelope{width:345px}.reading{padding-bottom:20px}}@media(max-width:420px){main{padding:20px 21px 18px}.top-mark{height:45px;font-size:27px}.screen{padding-top:18px}.eyebrow{font-size:9px;letter-spacing:2.5px;margin-bottom:18px}h1{font-size:34px;letter-spacing:-1.3px}.subtitle{font-size:12px;margin-top:16px}.envelope{width:285px;max-width:90%;margin-top:56px}.open-hint{margin-top:25px}.letter{padding:22px 25px 16px}.letter-copy{font-size:14px;line-height:1.8}.letter-copy p{margin-bottom:13px}.letter h2{font-size:30px}.letter-top{margin-bottom:17px}.signature{font-size:18px;margin-top:20px}.question h2,.celebration h2{font-size:35px;letter-spacing:-1.3px}.question-icon{font-size:65px}.choices{margin-top:18px}footer{font-size:7px;letter-spacing:1.5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.envelope.opening .envelope-paper{transform:none}}