*{box-sizing:border-box}html{height:100%;background:#e7e3cc}body{margin:0;min-height:100%;min-height:100svh;display:grid;place-items:center;background:#e7e3cc}.invitation{position:relative;width:min(100vw,66.6667svh);aspect-ratio:2/3;overflow:hidden;background:#fff9ef}.invitation img{display:block;width:100%;height:100%;object-fit:contain}canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hotspot{position:absolute;left:54%;width:37%;height:5.3%;background:transparent;border:0;border-radius:40px;cursor:pointer;min-height:24px;-webkit-tap-highlight-color:#ae365b22}.rsvp{top:57.1%}.address{top:63.1%}.hotspot:focus-visible{outline:3px solid #52603a;outline-offset:3px}.hotspot:active{background:#ffffff25}#address-info{position:absolute;left:48%;right:3%;top:69%;margin:0;padding:12px;background:#fff9eff5;border:1px solid #b8bf9b;border-radius:9px;font:14px/1.4 Georgia,serif;color:#52603a;box-shadow:0 4px 15px #513b2720}::selection{background:#e8afc2;color:#542b39}@media(min-width:700px){.invitation{max-width:640px}}@media(prefers-reduced-motion:reduce){canvas{display:none}}

[hidden]{display:none!important}.content{position:absolute;inset:0}.envelope{position:absolute;inset:0;z-index:5;background:#f1d3cb;perspective:1000px;transition:opacity .8s .8s,visibility 0s 1.6s}.paper{position:absolute;inset:0;background:#f8e5db}.letter{position:absolute;inset:13% 10% 22%;padding:25% 5% 5%;background:#fff9ef;text-align:center;box-shadow:0 8px 24px #70493a24;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .8s}.letter strong{font:italic 400 clamp(54px,12vw,82px)/1.3 Georgia,serif;color:#ae365b}.pocket{position:absolute;inset:43% 0 0;background:linear-gradient(145deg,#e4acae,#f6d9d0);clip-path:polygon(0 0,50% 29%,100% 0,100% 100%,0 100%)}.flap{position:absolute;inset:0 0 auto;height:62%;background:linear-gradient(165deg,#eec6bf,#f8e0d6);clip-path:polygon(0 0,100% 0,100% 69%,50% 100%,0 69%);transform-origin:top center;transition:transform 1.1s cubic-bezier(.16,1,.3,1);backface-visibility:hidden}.envelope-label{position:absolute;top:17%;left:8%;right:8%;text-align:center;pointer-events:none;transition:opacity .3s;line-height:1.4}.envelope-label span{display:block;font:clamp(14px,3vw,18px)/1.4 Georgia,serif;color:#6c343b}.envelope-label strong{display:block;font:italic 400 clamp(54px,12vw,82px)/1.3 Georgia,serif;color:#ae365b;margin:8px 0}.seal{position:absolute;left:calc(50% - 32px);top:calc(59% - 32px);width:64px;height:64px;border:0;border-radius:50%;background:#ae365b;box-shadow:0 6px 16px #6e253d30;cursor:pointer;transition:opacity .3s,transform .4s}.seal svg{width:32px;height:32px;fill:#fbdde1}.seal:active{transform:scale(.95)}.open-hint{position:absolute;top:74%;width:100%;padding:0 12px;text-align:center;font:clamp(14px,3vw,16px)/1.5 Georgia,serif;color:#6c343b}.envelope.opened{opacity:0;visibility:hidden;pointer-events:none}.opened .flap{transform:rotateX(165deg)}.opened .letter{transform:translateY(-25%);opacity:0}.opened .seal,.opened .open-hint,.opened .envelope-label{opacity:0}.music-toggle{position:absolute;right:10px;top:10px;z-index:8;width:44px;height:44px;display:grid;place-items:center;background:#fff9efed;border:1px solid #b8bf9b;border-radius:50%;color:#52603a;cursor:pointer;-webkit-tap-highlight-color:transparent}.music-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.music-toggle[aria-pressed=true] .sound-off{display:none}.music-toggle[aria-pressed=false] .sound-waves{display:none}:focus-visible{outline:3px solid #52603a;outline-offset:3px}@media(prefers-reduced-motion:reduce){.envelope,.envelope *{transition:none!important}}
.envelope-label strong{color:#a12d52}

html,body{width:100%;height:100%;overflow:hidden}body{min-height:100svh}.invitation{width:100vw;height:100svh;aspect-ratio:auto;max-width:none}.content{position:absolute;inset:auto;top:50%;left:50%;width:max(100%,calc(100svh * 854 / 1842));height:auto;aspect-ratio:854/1842;transform:translate(-50%,-50%)}.invitation img{width:100%;height:100%;object-fit:contain}.rsvp{top:52.8%;height:3.6%}.address{top:56.8%;height:3.6%}#address-info{top:61%}.music-toggle{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}@media(min-width:700px){.invitation{width:min(100vw,calc(100svh * 854 / 1842));max-width:none}}