:root{--paper:#f5f1eb;--ink:#291f1b;--wine:#57171c;--rose:#c7868c;--muted:#7f7068;--line:#d8cbc2;--blush:#ebe0d8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--wine);outline-offset:4px}a{color:inherit}button{color:inherit}button:disabled{opacity:.45;cursor:not-allowed}[hidden]{display:none!important}.reviewbar{min-height:43px;background:#eee5dd;display:flex;align-items:center;justify-content:space-between;padding:7px 3.5%;gap:12px;font-size:10px;letter-spacing:.13em}.viewnav{display:flex;gap:22px}.viewnav button{background:none;border:0;border-bottom:1px solid transparent;padding:6px 0;font-size:11px}.viewnav .active{border-color:var(--wine);color:var(--wine)}select{border:0;background:transparent;font-size:11px;color:var(--wine);padding:4px}header{padding:25px 5%;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line)}header img{width:169px;display:block;mix-blend-mode:multiply}.shoplink{position:absolute;right:5%;font-size:12px;text-decoration:none}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;max-width:1320px;margin:auto;padding:52px 5% 20px}.eyebrow{font-size:10px;letter-spacing:.18em;line-height:1.6;font-weight:400}.intro h1{font:normal clamp(35px,4.4vw,66px)/1.04 Georgia,serif;letter-spacing:-.045em;margin:20px 0 23px}.intro h1 em{font-weight:normal;color:var(--wine)}.lead{font-size:14px;line-height:1.8;max-width:460px;color:var(--muted)}.composition{height:293px;position:relative;margin-top:4px;isolation:isolate}.halo{position:absolute;left:45%;top:43%;width:310px;height:240px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#e8d2c7a8,transparent 68%);z-index:-1}.hero-character{width:155px;height:155px;position:absolute;left:45%;top:0;transform:translateX(-50%);z-index:5}.composition .envelope{position:absolute;top:131px;left:45%;transform:translateX(-50%);width:260px;height:160px}.envelope{display:block;position:relative;background:linear-gradient(125deg,#f3d8c7,#e8c7b3 90%);border-radius:3px;box-shadow:0 18px 30px -22px #6433289c;isolation:isolate}.flap{position:absolute;inset:0;background:linear-gradient(165deg,#f7e4d6,#dcad98);clip-path:polygon(0 0,100% 0,50% 66%);z-index:1;filter:drop-shadow(0 3px 3px #70493944)}.front{position:absolute;inset:0;background:linear-gradient(35deg,#f8e7dd,#efd7c6);clip-path:polygon(0 0,50% 65%,100% 0,100% 100%,0 100%);z-index:2}.front:after{content:"";position:absolute;inset:0;background:linear-gradient(35deg,transparent 49.65%,#fff7 49.8%,#fff7 50%,transparent 50.2%),linear-gradient(-35deg,transparent 49.65%,#c3a69355 49.8%,#c3a69355 50%,transparent 50.2%)}.seal{width:24%;height:auto;position:absolute;left:50%;top:39%;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 2px 1px #98675f4d)}.composition .smallnote{position:absolute;top:309px;left:0;right:0;color:var(--muted);font-size:10px;text-align:center}.editor{padding:0 0 0 35px;border-left:1px solid var(--line)}.stephead{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;text-transform:uppercase;font-size:10px;letter-spacing:.13em;color:var(--muted)}.stepdots{display:flex;gap:5px}.stepdots i{width:24px;height:2px;background:var(--line)}.stepdots i.on{background:var(--wine)}h2{font:normal 31px/1.1 Georgia,serif;letter-spacing:-.025em;margin:0 0 12px}.muted{font-size:13px;color:var(--muted);line-height:1.7}.characters{display:flex;justify-content:space-between;gap:6px;margin:22px 0 19px}.characters button{width:78px;aspect-ratio:1;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;transition:background .2s,border .2s,transform .2s}.characters button[aria-pressed=true]{background:#e8d8cd6b;border-color:#b79082}.characters button:hover{transform:translateY(-3px)}.rule{border-top:1px solid var(--line);margin-bottom:19px}textarea{margin-top:10px;width:100%;min-height:100px;background:transparent;border:1px solid var(--line);padding:14px;font:normal 19px/1.4 Georgia,serif;resize:vertical;color:var(--ink)}.charline{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:7px;gap:10px}.presets{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 24px}.presets button{border:1px solid var(--line);background:transparent;padding:8px 11px;font-size:10px}.presets button:hover{border-color:var(--wine)}.primary{width:100%;padding:18px 21px;background:var(--wine);color:#fff5e9;border:0;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;min-height:52px}.primary:hover{background:#6c252a}.undercta{font-size:10px;color:var(--muted);line-height:1.6;text-align:center;margin:11px 0}.how{max-width:1188px;margin:61px auto 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:24px 2%;font:normal 16px Georgia,serif;color:var(--muted)}footer{padding:29px 5%;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:10px;color:var(--muted);letter-spacing:.04em;margin-top:24px}footer a{text-decoration:none}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;margin:27px 0}.fields label{font-size:11px;color:var(--muted)}.fields input{width:100%;display:block;border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 0;color:var(--ink);font-size:13px}.fields input::placeholder{color:#a8978d}.consentbox{border-top:1px solid var(--line);padding:20px 0 14px}.check{display:flex;gap:10px;font-size:11px;line-height:1.6}.check input{accent-color:var(--wine);width:15px;height:15px;flex-shrink:0;margin:2px 0}.consentbox p{font-size:10px;line-height:1.6;color:var(--muted);margin:14px 0 0 25px}.back{border:0;background:transparent;color:var(--wine);font-size:11px;padding:13px 0}.successicon{border:1px solid var(--rose);border-radius:50%;width:53px;height:53px;display:grid;place-items:center;margin:42px 0 24px;color:var(--wine);font-size:23px}.demo-note{padding:18px;background:var(--blush);font-size:11px;line-height:1.7;color:var(--wine);margin:26px 0}.previewlabel{font-size:10px;text-align:center;letter-spacing:.15em;margin:32px 0 23px;color:var(--muted)}#email-view{background:#e9e1d9;padding:1px 20px 50px}.mail{max-width:560px;margin:auto;background:var(--paper);text-align:center}.maillogo{width:173px;margin:35px auto 30px;mix-blend-mode:multiply}.mailbody{border-top:1px solid var(--line);padding:35px 54px 18px}.mail h1{font:normal 43px/1.1 Georgia,serif;letter-spacing:-.04em;margin:18px 0 23px}.mail h1 em{color:var(--wine);font-weight:normal}.mail p{font-size:13px;color:var(--muted);line-height:1.75}.mail-envelope{background:transparent;border:0;display:block;width:100%;padding:30px 0 37px}.mail-envelope .envelope{width:270px;height:169px;margin:auto}.mailfoot{font-size:9px!important;margin:26px 0 12px}.mailvisit{display:block;padding:22px;border-top:1px solid var(--line);font-size:11px;text-decoration:none}#open-view{padding:35px 20px 55px;background:radial-gradient(ellipse at 50% 30%,#e6cdc1,transparent 62%)}.letter{max-width:590px;margin:auto;text-align:center;padding:32px 55px 27px;background:#faf7f0;box-shadow:0 15px 65px #81605112}.letter-character{width:135px;margin:13px auto}.letter blockquote{font:normal 29px/1.35 Georgia,serif;color:var(--wine);margin:24px 0;white-space:pre-line;overflow-wrap:anywhere}.letter-seal{width:43px;margin-top:14px}.letterline{height:1px;background:var(--line);margin:26px 0}.letter #letter-from{font-size:12px;color:var(--muted)}@media(max-width:850px){.hero{gap:5%;padding:38px 5% 20px}.editor{padding-left:23px}.characters button{width:63px}h2{font-size:27px}.intro h1{font-size:43px}}@media(max-width:800px){.reviewbar{padding:8px 16px;flex-wrap:wrap}.reviewbar>span{font-size:8px}.viewnav{order:3;width:100%;justify-content:center;gap:25px}.shoplink{display:none}header{padding:22px}header img{width:151px}.hero{display:block;padding:33px 22px 16px}.eyebrow{font-size:9px}.intro h1{font-size:43px;margin-top:17px}.lead{font-size:13px}.composition{height:225px;margin-top:10px}.hero-character{width:126px;height:126px;left:50%;top:-3px}.composition .envelope{width:222px;height:137px;top:105px;left:50%}.halo{left:50%}.composition .smallnote{top:253px;font-size:9px}.editor{border-left:0;border-top:1px solid var(--line);padding:26px 0 0;margin-top:61px}.characters{gap:4px}.characters button{width:66px}.how{margin:20px 22px 0;padding:20px 0;gap:14px}.how span{font-size:12px;line-height:1.6;max-width:95px}footer{margin-top:15px;gap:15px;flex-wrap:wrap;font-size:9px}footer span:nth-child(2){display:none}.fields{gap:20px 12px}.mailbody{padding:30px 25px 15px}.mail h1{font-size:38px}.mail-envelope .envelope{width:240px;height:151px}.letter{padding:28px 27px}.letter blockquote{font-size:26px}}
#step-1>.primary{margin-top:27px}

.preview-send{display:block;text-align:center;width:100%;padding:12px 0 0}
.envelope{perspective:900px}
.envelope .flap{transform-origin:50% 0;backface-visibility:visible;transform:rotateX(0);z-index:4}
.envelope .front{z-index:3}
.envelope .seal{z-index:5;pointer-events:none}
.inside-character{position:absolute;width:140px;height:140px;left:50%;margin-left:-70px;top:-130px;z-index:2}
#packing-overlay{position:fixed;inset:0;z-index:100;background:#f5f1ebf7;display:grid;place-items:center;backdrop-filter:blur(8px)}
.packing-scene{width:min(94vw,550px);text-align:center;padding:35px 20px}
.packing-head h2{font-size:34px;margin-top:12px}
.packing-head{transition:opacity .25s}
.packing-stage{height:340px;position:relative;margin-top:15px}
.packing-stage .envelope{position:absolute;width:280px;height:175px;left:50%;top:155px;transform:translateX(-50%)}
#packing-overlay[data-state=packing] .flap{animation:pack-flap 3.7s ease-in-out both}
#packing-overlay[data-state=packing] .inside-character{animation:pack-qutie 3.7s cubic-bezier(.4,0,.2,1) both}
#packing-overlay[data-state=packing] .seal{animation:pack-seal 3.7s ease-in-out both}
@keyframes pack-flap{0%,5%{transform:rotateX(0);z-index:4}25%,75%{transform:rotateX(180deg);z-index:1}100%{transform:rotateX(0);z-index:4}}
@keyframes pack-qutie{0%,28%{transform:translateY(0) scale(1);opacity:1}42%{transform:translateY(-12px) scale(1.07);opacity:1}70%,100%{transform:translateY(155px) scale(.67);opacity:1}}
@keyframes pack-seal{0%,5%,100%{opacity:1}15%,90%{opacity:0}}
.letter{overflow:hidden}
.letter-head{min-height:64px;transition:opacity .2s}
.letter-head h2{margin-top:15px;font-size:28px}
.reveal-stage{height:365px;position:relative;margin-top:0}
.reveal-stage .envelope{position:absolute;left:50%;top:178px;width:290px;height:181px;transform:translateX(-50%)}
.reveal-stage .inside-character{top:32px;opacity:0;transform:scale(.65)}
.letter .letter-words{opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}
.letter[data-state=opening] .flap{animation:reveal-flap 2.8s ease-in-out both}
.letter[data-state=opening] .inside-character{animation:reveal-qutie 2.8s cubic-bezier(.22,.65,.3,1) both}
.letter[data-state=opening] .seal{animation:reveal-seal 2.8s both}
.letter[data-state=opening] .letter-head{opacity:0}
.letter[data-state=revealed] .flap{transform:rotateX(180deg);z-index:1}
.letter[data-state=revealed] .inside-character{top:32px;opacity:1;transform:translateY(-167px) scale(1.16)}
.letter[data-state=revealed] .seal{opacity:1}
.letter[data-state=revealed] .letter-words{opacity:1;transform:none}
.letter-words>p:first-child{margin-top:27px}
@keyframes reveal-flap{0%,8%{transform:rotateX(0);z-index:4}40%,100%{transform:rotateX(180deg);z-index:1}}
@keyframes reveal-qutie{0%,25%{opacity:0;transform:translateY(0) scale(.65)}38%{opacity:1;transform:translateY(-10px) scale(.68)}68%{opacity:1;transform:translateY(-196px) scale(1.32)}100%{opacity:1;transform:translateY(-167px) scale(1.16)}}
@keyframes reveal-seal{0%,8%{opacity:1}18%,67%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){#packing-overlay *, .letter *{animation:none!important;transition:none!important}}
@media(max-width:650px){.packing-head h2{font-size:29px}.packing-stage .envelope{width:252px;height:158px}.reveal-stage{height:337px}.reveal-stage .envelope{width:254px;height:159px;top:172px}.letter-head h2{font-size:25px}.inside-character{width:126px;height:126px;margin-left:-63px}.letter[data-state=revealed] .inside-character{transform:translateY(-157px) scale(1.12)}}

/* Keep focus outlines clear of field labels in every language. */
.fields label>span{display:block;margin-bottom:9px}
.fields input{min-height:44px;line-height:1.45;padding:11px 8px;margin:0;border-radius:0}
.fields input:focus-visible{outline:2px solid var(--wine);outline-offset:-2px}
#packing-overlay[data-embedded=true]{position:absolute;display:block}
#packing-overlay[data-embedded=true] .packing-scene{position:absolute;left:50%;top:var(--qt-visible-center,50%);transform:translate(-50%,-50%);padding-top:12px;padding-bottom:12px}
@media(max-height:650px){.packing-stage{height:280px}.packing-stage .envelope{top:110px}.packing-head h2{font-size:27px}.packing-scene{padding-top:10px;padding-bottom:10px}}

/* Approved QR-React photographic envelopes. */
.envelope{background:none;border:0;box-shadow:none;border-radius:0;perspective:none;aspect-ratio:815/574;height:auto!important}
.envelope-photo{display:block;position:absolute;left:0;bottom:0;width:100%;pointer-events:none}
.envelope-photo img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.envelope-photo-closed{height:100%;z-index:4;opacity:1}
.envelope-photo-open,.envelope-photo-pocket{height:166%;opacity:0}
.envelope-photo-open{z-index:1}
.envelope-photo-pocket{z-index:3;clip-path:inset(36.8% 0 0)}
.composition{height:322px}.composition .envelope{width:240px;top:126px}
.composition .smallnote{top:312px}
.mail-envelope{padding:22px 0 27px}.mail-envelope .envelope{width:270px}
.inside-character{z-index:2}
.packing-stage{height:365px}
#packing-overlay[data-state=packing] .envelope-photo-closed{animation:pack-closed 3.7s ease-in-out both}
#packing-overlay[data-state=packing] .envelope-photo-open,#packing-overlay[data-state=packing] .envelope-photo-pocket{animation:pack-open 3.7s ease-in-out both}
#packing-overlay[data-state=packing] .inside-character{animation:pack-qutie-photo 3.7s cubic-bezier(.4,0,.2,1) both}
@keyframes pack-closed{0%,5%,100%{opacity:1}24%,76%{opacity:0}}
@keyframes pack-open{0%,5%,100%{opacity:0}24%,76%{opacity:1}}
@keyframes pack-qutie-photo{0%,20%{opacity:0;transform:translateY(10px) scale(.85)}30%{opacity:1;transform:translateY(0) scale(1)}43%{opacity:1;transform:translateY(-12px) scale(1.07)}72%,100%{opacity:0;transform:translateY(155px) scale(.67)}}
.reveal-stage{height:350px}
.reveal-stage .envelope{top:143px;width:290px}
.letter[data-state=opening] .envelope-photo-closed{animation:reveal-closed 2.8s both}
.letter[data-state=opening] .envelope-photo-open,.letter[data-state=opening] .envelope-photo-pocket{animation:reveal-open 2.8s both}
.letter[data-state=opening] .inside-character{animation:reveal-qutie-photo 2.8s cubic-bezier(.22,.65,.3,1) both}
.letter[data-state=revealed] .envelope-photo-closed{opacity:0}
.letter[data-state=revealed] .envelope-photo-open,.letter[data-state=revealed] .envelope-photo-pocket{opacity:1}
.letter[data-state=revealed] .inside-character{top:32px;opacity:1;transform:translateY(-170px) scale(1)}
.letter[data-state=opening] .letter-head,.letter[data-state=revealed] .letter-head{opacity:0}
.letter blockquote{margin:14px 0 20px}
@keyframes reveal-closed{0%,8%{opacity:1}38%,100%{opacity:0}}
@keyframes reveal-open{0%,8%{opacity:0}38%,100%{opacity:1}}
@keyframes reveal-qutie-photo{0%,25%{opacity:0;transform:translateY(0) scale(.65)}38%{opacity:1;transform:translateY(-10px) scale(.68)}68%{opacity:1;transform:translateY(-187px) scale(1.16)}100%{opacity:1;transform:translateY(-170px) scale(1)}}
@media(max-width:800px){.composition{height:276px}.composition .envelope{width:222px;top:105px}.composition .smallnote{top:272px}.editor{margin-top:35px}}
@media(max-width:650px){.mail-envelope .envelope{width:240px}.reveal-stage{height:316px}.reveal-stage .envelope{width:254px;top:135px}.letter[data-state=revealed] .inside-character{transform:translateY(-157px) scale(1)}.packing-stage{height:340px}}
@media(max-height:650px){.packing-stage{height:300px}.packing-stage .envelope{top:115px}}
@media(prefers-reduced-motion:reduce){.envelope-photo,.inside-character{animation:none!important;transition:none!important}}