:root{color-scheme:light;--blue:#2f6683;--gold:#b28b4d;--antique-gold:#b28a4b;--ew:650px;--eh:371px;--ch:940px}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 25%,#fff 0,#f1f6f8 46%,#e5eff4 100%);color:var(--blue);font-family:Georgia,'Times New Roman',serif;text-align:center}
main{width:min(100%,730px);margin:auto;padding:46px 28px 45px}
.top{font:12px/1.8 Arial,sans-serif;letter-spacing:.28em;color:#648ca2;margin:0 0 54px}
.stage{position:relative;isolation:isolate;width:100%;height:var(--eh);perspective:1400px;perspective-origin:50% 35%;overflow:visible}
.envelope{position:absolute;top:0;left:50%;width:var(--ew);height:var(--eh);margin-left:calc(var(--ew) / -2);transform-style:preserve-3d;z-index:2;filter:drop-shadow(0 22px 17px #3c536245)}
.pocket{z-index:4;filter:drop-shadow(0 2px 2px #55778a35)}
.back,.lining,.fold,.flap,.flap-front,.flap-back{position:absolute;inset:0}
.back{border-radius:3px;background:repeating-linear-gradient(0deg,#f3fbff0a 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#45677708 0 1px,transparent 1px 8px),linear-gradient(135deg,#92b5c7,#abc9d6 50%,#88adbf);box-shadow:inset 0 0 0 1px #6f93a6aa,inset 0 0 0 4px #d9c08b55,0 1px 1px #fff9}
.lining{inset:3px;background:repeating-linear-gradient(0deg,#eff8fb0c 0 1px,transparent 1px 5px),linear-gradient(180deg,#779daf,#a8c6d2 80%);clip-path:polygon(0 0,100% 0,50% 60%)}
.fold{z-index:4}
.left{background:repeating-linear-gradient(0deg,#f4fbfd0b 0 1px,transparent 1px 5px),linear-gradient(135deg,#b5d2dc 0,#a3c4d0 72%,#90b4c5);clip-path:polygon(0 0,54% 55%,0 100%)}
.right{background:repeating-linear-gradient(0deg,#f4fbfd09 0 1px,transparent 1px 5px),linear-gradient(225deg,#aacbd7 0,#98bdcb 78%,#82a8ba);clip-path:polygon(100% 0,46% 55%,100% 100%)}
.bottom{background:repeating-linear-gradient(0deg,#f4fbfd0b 0 1px,transparent 1px 5px),linear-gradient(0deg,#b5d1da,#a4c5d1 60%,#8eb2c2);clip-path:polygon(0 100%,50% 55%,100% 100%)}
.bottom:after{content:'';position:absolute;inset:0;clip-path:polygon(0 100%,50% 55%,100% 100%,50% 55.45%);background:#f3fbff55}
.flap{z-index:6;transform-origin:50% 0;transform-style:preserve-3d}
.flap-front,.flap-back{clip-path:polygon(0 0,100% 0,50% 55%);backface-visibility:visible;-webkit-backface-visibility:visible}
.flap-front{background:repeating-linear-gradient(0deg,#f6fcff0c 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,#52758508 0 1px,transparent 1px 8px),linear-gradient(175deg,#bfd8e1 0,#a9c9d5 70%,#92b5c5);filter:drop-shadow(0 3px 2px #49687955)}
.flap-back{display:none}
.flap-gilding,.pocket-gilding{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.gild-line,.gild-edge,.gild-flourish,.corner-flourish path{fill:none;stroke:var(--antique-gold);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.gild-line{stroke-width:.65;opacity:.72}.gild-flourish{stroke-width:.72;opacity:.82}.gild-edge{stroke-width:.7;opacity:.6}.corner-flourish path{stroke-width:.65;opacity:.8}
.seal{position:absolute;z-index:8;top:calc(var(--eh) * .53);left:50%;transform:translate(-50%,-50%);width:clamp(70px,13vw,96px);aspect-ratio:1;border-radius:50%;border:1px solid #76501e;padding:3px;background:linear-gradient(145deg,#f1d795,#a87933 48%,#e0bf73 76%,#825923);box-shadow:0 8px 13px #344c5b55,inset 0 0 0 1px #f5dda0;cursor:pointer;touch-action:manipulation}
.seal:before{content:'';position:absolute;z-index:-1;inset:-2px;border-radius:50%;background:linear-gradient(145deg,#efd590,#9b6c2d 45%,#dfbd70 78%,#7e5725);border:1px solid #9b7031;box-shadow:0 2px 4px #4b331e44}
.seal:after{content:'';position:absolute;inset:1px;border:1px solid #f8e7b5;border-radius:50%;pointer-events:none}
.seal img{display:block;position:relative;width:100%;height:100%;object-fit:cover;border-radius:50%;border:1px solid #8f642c;box-shadow:inset 0 0 0 1px #f5dfaa}
.card{position:absolute;top:0;left:50%;width:min(100%,600px);margin-left:calc(min(100%,600px) / -2);z-index:3;background:#fffaf0;border:4px solid #bea16d;border-radius:2px;padding:30px 35px 28px;box-shadow:0 12px 25px #71665324;opacity:0;visibility:hidden;transform-origin:50% 0;outline:none}
.card:before{content:'';position:absolute;inset:9px;border:1px solid #d9c395;pointer-events:none}
.ornament{display:block;width:85px;height:30px;margin:0 auto 16px;color:var(--gold)}
.invite{font-size:17px;line-height:1.5;letter-spacing:.025em;color:#5387a0}
.painting{display:block;width:62%;height:auto;border:8px solid #fff8e9;outline:3px solid #bea16d;margin:27px auto 70px}
h1{font-size:46px;font-weight:normal;line-height:1.17;margin:0 0 26px}
.date{font-size:33px;line-height:1.3;color:#a98146;margin:0 0 30px;white-space:nowrap}
.card p{font-size:19px;line-height:1.75;margin:0 auto 23px;max-width:480px}
.card .joy{font-size:23px;line-height:1.5;margin:24px auto 26px}
.joy strong{display:block;color:var(--gold);font-size:39px;line-height:1.3;margin-top:8px}
.card .sign{font-size:19px;margin:25px auto 0;line-height:1.65}
.sign span{font-size:22px}
.bottomorn{margin:20px auto 0;transform:rotate(180deg);width:65px;height:26px}
.controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;margin:48px auto 0;position:relative;z-index:10}
.controls button{appearance:none;border:1px solid #6e9eb7;border-radius:40px;background:transparent;color:#36728f;padding:15px 24px;font:17px/1.25 Arial,sans-serif;cursor:pointer;min-height:49px;touch-action:manipulation}
.controls .primary{background:#477f9e;color:#fff;border-color:#477f9e}
button:focus-visible{outline:3px solid #a87c37;outline-offset:5px}
.controls button:hover{box-shadow:0 3px 12px #577d9120}
button:disabled{cursor:wait}
.note{font:14px/1.6 Arial,sans-serif;color:#678ea3;margin:20px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stage[data-state="open"] .card{visibility:visible;opacity:1}
.stage[data-state="open"] .envelope,.stage[data-state="open"] .seal{visibility:hidden}
@media(max-width:600px){main{padding:35px 16px 32px}.top{font-size:10px;letter-spacing:.24em;margin-bottom:44px}.card{padding:23px 21px 24px;border-width:3px}.card:before{inset:7px}.ornament{width:72px;height:28px;margin-bottom:12px}.invite{font-size:clamp(10px,3vw,15px)}.painting{width:64%;border-width:6px;outline-width:2px;margin:23px auto 44px}h1{font-size:clamp(30px,7.4vw,43px);line-height:1.18;margin-bottom:22px}.date{font-size:clamp(21px,5.5vw,30px);margin-bottom:26px}.card p{font-size:clamp(14px,3.7vw,18px);line-height:1.75;margin-bottom:21px}.card .joy{font-size:clamp(17px,4.3vw,23px);margin:21px auto}.joy strong{font-size:32px}.card .sign{font-size:16px;margin-top:22px}.sign span{font-size:20px}.bottomorn{margin-top:15px;width:60px;height:23px}.controls{margin-top:37px;gap:10px}.controls button{font-size:14px;padding:13px 19px}.note{font-size:12px;margin-top:18px}.seal{padding:3px}.seal:before{inset:-2px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}