.cloud-dialog{position:relative;width:min(630px,calc(100vw - 32px));padding:clamp(22px,4vw,46px);background:#fff8ec;border:1px solid #d8c8b6;box-shadow:12px 14px 0 #60222c;max-height:min(88svh,900px)}
.cloud-dialog h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,4vw,42px);margin:0 0 18px;color:#60222c}
.cloud-dialog>div{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.cloud-dialog p{margin:0;font-size:15px;line-height:1.7;color:#60222c}
.cloud-dialog label{display:block;font-size:13px;line-height:1.5;color:#60222c;overflow:hidden}
.cloud-dialog input{display:block;width:100%;max-width:100%;padding:12px;margin-top:7px;border:1px solid #d8c8b6;background:#fffdf7;color:#60222c;font:14px var(--sans);text-overflow:ellipsis}
.cloud-dialog button{align-self:flex-start;max-width:100%;white-space:normal;text-align:left}
.cloud-dialog .cloud-close{position:sticky;top:0;z-index:5;float:right;display:grid;place-items:center;width:40px;height:40px;padding:0;margin:0 0 12px 14px;border:1px solid #b99a98;background:#fff8ec;color:#60222c;font:28px/1 var(--sans);cursor:pointer}
.cloud-dialog .cloud-close:hover{background:#f2e6d9}
.cloud-dialog .cloud-close:focus-visible{outline:2px solid #79132b;outline-offset:3px}
.cloud-dialog.cloud-recipient{padding-top:50px;text-align:center}
.cloud-dialog.cloud-recipient h2{clear:both;max-width:500px;margin:8px auto 24px;line-height:1.25}
.cloud-dialog .cloud-letter{min-height:0;width:100%;box-shadow:5px 6px 0 #79132b;margin:14px 0 8px;animation:cloud-open .55s cubic-bezier(.2,.7,.2,1) both}
.cloud-dialog .cloud-mist{width:100%;margin:8px auto 0;text-align:center}
.cloud-dialog .cloud-mist .mist-instruction{font-size:13px;color:var(--muted);margin-bottom:14px}
.cloud-dialog .cloud-mist .mist-message{white-space:pre-line}
.cloud-dialog .cloud-mist .mist-result{min-height:25px;margin:15px 0}
.cloud-dialog .cloud-mist .mist-skip{display:block;margin:0 auto;text-align:center}
.cloud-letter p:first-child,.cloud-letter p:last-of-type{font-family:var(--serif);font-size:21px;color:#60222c}
.cloud-letter p:nth-child(2){font-family:var(--serif);font-size:clamp(19px,3vw,26px);line-height:1.7;color:#60222c;margin:35px 0}
.cloud-letter>span{display:block;text-align:center;margin-top:32px;font-size:25px}
@keyframes cloud-open{from{opacity:0;transform:translateY(16px) rotate(-1deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(max-width:640px){.cloud-dialog{padding:24px;box-shadow:6px 8px 0 #60222c}.cloud-dialog .cloud-letter{padding:32px 25px}}
@media(prefers-reduced-motion:reduce){.cloud-dialog .cloud-letter{animation:none}}