@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
/* The seal travels with the left ribbon instead of falling away. */
.opening-seal{transform:translateX(calc(-50% - var(--release)*55vw)) translateY(calc(var(--loosen)*-6vw)) rotate(calc(var(--loosen)*-7deg))}
.bow-loop-left{transform:translateX(calc(var(--release)*-55vw)) translateY(calc(var(--loosen)*-6vw)) rotate(calc(var(--loosen)*-22deg))}
.bow-loop-right{transform:translateX(calc(var(--release)*55vw)) translateY(calc(var(--loosen)*-6vw)) rotate(calc(var(--loosen)*22deg))}
.journey-ready{padding:36px 28px;margin-top:24px;background:#f1e7d8;border:1px solid var(--line);max-width:none}
.journey-ready .cloud-create-link{display:block;width:100%;max-width:440px;min-height:60px;margin:24px 0 8px;text-align:center;font-size:16px;box-shadow:5px 6px 0 #a27a7b}
.journey-ready .cloud-create-link:hover{transform:translateY(-2px);box-shadow:5px 8px 0 #a27a7b}
.journey-ready>.journey-navigation{margin-top:24px}
.care-brand{display:block;width:128px;height:31px;margin:4px auto 0;object-fit:contain}
.care-caption{position:absolute;top:68%;left:8px;right:8px;margin:0;text-align:center;font:32px/.72 'Pinyon Script',cursive}
.care-sleeve small{margin-top:auto;text-align:center}
.recipient-unbox .care-brand{width:105px;height:27px}
.recipient-unbox .care-caption{font-size:27px;top:68%}
.recipient-unbox .care-sleeve small{display:none}
.recipient-letter>p{font:16px/1.85 var(--sans);white-space:pre-wrap}
.recipient-letter h3{margin-top:18px;margin-bottom:22px}
.cloud-dialog .cloud-letter{margin:26px auto 12px;max-width:560px;padding:40px;overflow-wrap:anywhere}
.cloud-letter h3{text-align:center;font:italic 32px/1.3 var(--serif);margin:0 0 28px}
.cloud-letter p:first-of-type,.cloud-letter p:last-of-type,.cloud-letter p:nth-of-type(2){font:17px/1.85 var(--sans);color:var(--ink);white-space:pre-wrap}
.cloud-letter p:nth-of-type(2){margin:32px 0}
.cloud-for-you{text-align:center;font:italic 27px/1.35 var(--serif)!important;margin-bottom:20px!important}
.cloud-opening{display:flex;flex-direction:column;align-items:center;padding:12px 0 22px;overflow:hidden}
.cloud-box{position:relative;width:205px;height:256px;margin:12px auto 30px;filter:drop-shadow(12px 15px 13px #30121c32);isolation:isolate}
.cloud-insert,.cloud-sleeve{position:absolute;inset:0;box-sizing:border-box}
.cloud-insert{z-index:1;border:12px ridge var(--letter-ribbon);background:var(--letter-paper);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:35px;text-align:center;transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.cloud-wordmark{display:block;width:133px;height:34px;object-fit:contain}.cloud-insert small{font-size:9px;letter-spacing:.07em}
.cloud-sleeve{z-index:2;background:var(--letter-paper);border:1px solid #cebca7;box-shadow:inset 3px 3px #fff9,inset -3px -2px #60222c18;display:flex;align-items:center;flex-direction:column;padding:28px 14px;transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.cloud-sleeve i{margin-top:auto;margin-bottom:18px;font:36px/.72 'Pinyon Script',cursive;text-align:center}.cloud-sleeve small{margin-top:auto;font-size:9px;letter-spacing:.07em}
.cloud-ribbon{position:absolute;z-index:3;top:43%;left:0;right:0;height:30px;background:linear-gradient(180deg,#a35a65,#722033 30%,#501825 75%,#a15c67);transform-origin:left center;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s}
.cloud-seal{position:absolute;z-index:4;top:calc(43% - 12px);left:calc(50% - 27px);width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:var(--letter-ribbon);border:4px double #e6afae99;box-shadow:0 3px 5px #30131c44;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .35s}
.cloud-seal img{width:35px;height:35px}.cloud-opening[data-phase=untied] .cloud-ribbon,.cloud-opening[data-phase=opened] .cloud-ribbon{transform:translateX(-102%);opacity:0}
.cloud-opening[data-phase=untied] .cloud-seal{transform:translateX(-88px) rotate(-13deg)}
.cloud-opening[data-phase=opened] .cloud-sleeve,.cloud-opening[data-phase=opened] .cloud-seal{transform:translateX(-115px)}
.cloud-opening[data-phase=opened] .cloud-insert{transform:translateX(115px)}
.cloud-opening[data-phase=opened] .cloud-box{margin-bottom:10px}
.cloud-open-action{min-width:205px;text-align:center!important;align-self:center!important}
html[lang=th] .cloud-for-you,html[lang=th] .cloud-letter h3{font:400 22px/1.5 var(--sans)!important}
html[lang=th] .eyebrow{letter-spacing:0;font-family:'Noto Sans Thai',sans-serif;font-size:13px}
html[lang=th] .recipient-dialog>p,html[lang=th] .mist-instruction,html[lang=th] .recipient-unbox>p,html[lang=th] .recipient-slide label{font:400 16px/1.7 'Noto Sans Thai',sans-serif}
html[lang=th] .recipient-dialog .button,html[lang=th] .recipient-dialog .outline-button,html[lang=th] .cloud-dialog button{font-family:'Noto Sans Thai',sans-serif;font-size:15px}
html[lang=th] .recipient-letter>p,html[lang=th] .cloud-letter>p{font:400 18px/1.8 'Noto Sans Thai',sans-serif}
@media(max-width:640px){.journey-ready{padding:27px 18px}.journey-ready .cloud-create-link{max-width:none}.cloud-dialog .cloud-letter{padding:30px 24px}.cloud-letter h3{font-size:27px}.cloud-box{width:175px;height:224px}.cloud-sleeve{padding:23px 12px}.cloud-wordmark{width:118px}.cloud-sleeve i{font-size:32px}.cloud-opening[data-phase=opened] .cloud-sleeve,.cloud-opening[data-phase=opened] .cloud-seal{transform:translateX(-88px)}.cloud-opening[data-phase=opened] .cloud-insert{transform:translateX(88px)}}
@media(prefers-reduced-motion:reduce){.cloud-insert,.cloud-sleeve,.cloud-ribbon,.cloud-seal,.journey-ready .cloud-create-link{transition:none!important}}