/* Keep the same portrait composition on every screen. */
html{background:#211b17;min-height:100%;scroll-padding-top:20px}
body{width:100%;max-width:414px;margin:0 auto;min-height:100svh;container:wedding / inline-size;box-shadow:0 0 90px #0008}
main{width:100%;max-width:414px;margin:0 auto}
.ambient-scene,.petals,.envelope{width:min(100%,414px);max-width:414px;left:0;right:0;margin-inline:auto}
.music-toggle{right:max(12px,calc((100% - 414px)/2 + 12px));bottom:max(12px,env(safe-area-inset-bottom))}
/* A content-sized frame scrolls with the whole sheet, including long forms. */
dialog,dialog#map-dialog,dialog#lightbox{width:min(386px,calc(100% - 28px));max-width:386px;max-height:90svh;padding:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#c8b39c #fbf3e8;isolation:isolate}
dialog:after{content:none}
.dialog-content{position:relative;min-height:100%;padding:135px 24px 30px;isolation:isolate}
.dialog-content:after{content:'';position:absolute;inset:12px;border:1px solid #d9c6b0;border-radius:20px;pointer-events:none;z-index:-1}
.dialog-content>.eyebrow{text-align:center;font-size:9px;letter-spacing:2px}
.dialog-content>p{font:20px/1.5 var(--serif)}
.dialog-content .dialog-floral{border-radius:26px 26px 0 0;top:0;height:113px}
.dialog-content .dialog-close{top:114px;right:16px}
#map-heading{font-size:28px}
#map-dialog .map-frame iframe{height:260px}
#lightbox .dialog-content{padding:55px 15px 20px}
#lightbox .dialog-close{top:10px}
#lightbox .dialog-content:after{inset:8px}
@container wedding (max-width:350px){.dialog-content{padding-inline:20px}}