.envelope{aspect-ratio:1.38;cursor:pointer;background:0 0;border:0;width:min(88vw,460px);padding:0;display:block;position:relative}.envelope>span{display:block;position:absolute}.env-shadow{z-index:0;border-radius:6px;inset:0;box-shadow:0 1px 1px #0000001f,0 2px 6px #00000014,0 12px 24px -8px #0000004d}.env-back{background:linear-gradient(transparent, #0000001f 35.9%, #00000047 35.9%, transparent 64%), var(--liner-tile,none), var(--liner);clip-path:polygon(2px 35.9%,2px 35.9%,50% 35.9%,calc(100% - 2px) 35.9%,calc(100% - 2px) 35.9%,calc(100% - 2px) calc(100% - 2px),2px calc(100% - 2px));z-index:1;inset:-56% 0 0}.sealed .env-back{clip-path:polygon(2px calc(35.9% + 3px),2px calc(35.9% + 3px),50% calc(35.9% + 3px),calc(100% - 2px) calc(35.9% + 3px),calc(100% - 2px) calc(35.9% + 3px),calc(100% - 2px) calc(100% - 2px),2px calc(100% - 2px))}.flap-open .env-back{clip-path:none;-webkit-mask:var(--env-back-open-mask) 0 0 / 100% 100% no-repeat;-webkit-mask:var(--env-back-open-mask) 0 0 / 100% 100% no-repeat;mask:var(--env-back-open-mask) 0 0 / 100% 100% no-repeat}.env-card{aspect-ratio:5/7;z-index:2;border-radius:2px;width:62%;top:55%;left:50%;overflow:hidden;transform:translate(-50%,-50%)rotate(-90deg);box-shadow:0 1px 3px #0003}.env-card svg,.env-card img{width:100%;height:100%;display:block}.env-pocket{background:var(--env-tex) center / cover, var(--env);background-blend-mode:multiply;-webkit-mask:var(--env-pocket-mask) 0 0 / 100% 100% no-repeat;-webkit-mask:var(--env-pocket-mask) 0 0 / 100% 100% no-repeat;mask:var(--env-pocket-mask) 0 0 / 100% 100% no-repeat;z-index:3;border-radius:6px;inset:0}.env-pocket svg{width:100%;height:100%;opacity:var(--fold,1);position:absolute;inset:0}.fold-cast{fill:none;stroke:#0000002e;stroke-width:.9px}.fold-line{fill:none;stroke:#ffffff29;stroke-width:1px;vector-effect:non-scaling-stroke}.env-to{text-align:center;font-family:Homemade Apple,cursive;font-size:calc(clamp(18px, 5.2vw, 28px) * var(--to-scale,1));text-wrap:balance;overflow-wrap:anywhere;color:var(--env-ink);padding:0 9%;line-height:1.6;position:absolute;inset:auto 0 13%}.env-flap-shadow{height:64%;-webkit-mask:var(--env-flap-shadow-mask) 0 0 / 100% 100% no-repeat;-webkit-mask:var(--env-flap-shadow-mask) 0 0 / 100% 100% no-repeat;mask:var(--env-flap-shadow-mask) 0 0 / 100% 100% no-repeat;z-index:4;background:#1e140a57;inset:0 0 auto}.env-flap{transform-origin:50% 0;z-index:5;height:56%;inset:0 0 auto;transform:perspective(1100px)rotateX(0)}.flap-out,.flap-in{-webkit-mask:var(--env-flap-mask) 0 0 / 100% 100% no-repeat;-webkit-mask:var(--env-flap-mask) 0 0 / 100% 100% no-repeat;mask:var(--env-flap-mask) 0 0 / 100% 100% no-repeat;position:absolute;inset:0}.flap-out{background:linear-gradient(#ffffff14, #fff0 55%, #0000000d), var(--env-tex) top / 100% auto, var(--env);background-blend-mode:normal, multiply;border-radius:6px 6px 0 0}.flap-in{-webkit-mask:var(--env-flap-up-mask) 0 0 / 100% 100% no-repeat;-webkit-mask:var(--env-flap-up-mask) 0 0 / 100% 100% no-repeat;mask:var(--env-flap-up-mask) 0 0 / 100% 100% no-repeat;background:linear-gradient(transparent, #0000001f), var(--liner-tile,none), var(--liner);opacity:0;transform:scaleY(-1)}.seal{aspect-ratio:1;filter:drop-shadow(0 1.5px 1.5px #00000047)drop-shadow(0 3px 6px #00000029);z-index:6;width:16%;top:53%;left:50%;transform:translate(-50%,-50%);display:block!important}.seal svg{width:100%;height:100%;display:block;overflow:visible}.envelope-art{cursor:default}.envelope-art .env-to{transition:opacity .35s}.envelope-art .env-to.swap{opacity:0}button.envelope-art{cursor:pointer}
