.intro-open{overflow:hidden}.wedding-intro{--intro-ink:#4d5748;--intro-paper:#fffdf1;position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;background:#e7eee8;color:var(--intro-ink);font-family:'MapleStory', 'Malgun Gothic',sans-serif;overflow:auto;opacity:1;transition:opacity .28s ease,transform .28s ease}.wedding-intro::backdrop{background:#e7eee8}.intro-world{position:relative;display:flex;flex-direction:column;width:100%;max-width:520px;min-height:100%;margin:0 auto;background:radial-gradient(ellipse at 50% 35%,#fffdf5,#f3eddb 70%);overflow:hidden;border-inline:1px solid #c8cbb75c}.intro-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:calc(18px + env(safe-area-inset-top)) 20px 12px;font-size:11px;position:relative;z-index:3;color:#868571}.intro-top button{flex:none;background:#ffffff60;color:inherit;border:1px solid #c7c4ac;border-radius:5px;padding:9px 12px;font:inherit}.intro-center{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px 20px 32px}.intro-eyebrow{font-size:9px;letter-spacing:2px;color:#a28d5f;margin:0 0 15px}.intro-stage{position:relative;flex:none;width:100%;height:230px;max-width:390px}.wedding-intro h1{font-size:clamp(21px,6vw,28px);line-height:1.5;margin:22px 0 9px;font-weight:700;letter-spacing:0;word-break:keep-all}.intro-subtitle{font-size:13px;line-height:1.7;margin:0;color:#888776;word-break:keep-all}.intro-actions{width:100%;max-width:290px;margin-top:30px}.intro-actions>button{display:flex;justify-content:center;align-items:center;gap:16px;width:100%;min-height:48px;border:1px solid #968d66;box-shadow:inset 0 1px #fff,0 3px #d8d0ac;background:linear-gradient(#fff8d8,#e7d59b);border-radius:7px;color:#5a543b;font:inherit;font-size:15px;cursor:pointer}.intro-actions>p{font-size:10px;margin:13px 0 0;color:#9c9785}.intro-bottom{display:flex;justify-content:space-between;gap:10px;padding:18px 24px calc(20px + env(safe-area-inset-bottom));font-size:9px;letter-spacing:1.2px;color:#a5a18d;border-top:1px solid #b3ad9226}.wedding-intro button:focus-visible{outline:3px solid #dbad43;outline-offset:4px}.wedding-intro.intro-leaving{opacity:0;transform:scale(1.015);pointer-events:none}.intro-cat{display:block;position:relative;width:94px;height:92px}.wedding-intro .intro-cat svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 1px #41422b30);image-rendering:pixelated}.intro-letter{width:66px;height:66px;object-fit:contain;image-rendering:pixelated}.intro-pair{display:flex;align-items:flex-end;justify-content:center;gap:9px}.intro-pair>span{display:flex;align-items:flex-end;justify-content:center;width:83px;height:136px}.wedding-intro .intro-pair svg.character-art{width:83px;height:136px;flex:none;filter:drop-shadow(0 2px 0 #fff9);image-rendering:pixelated}.wedding-intro .intro-pair .bride-art{height:118px}.intro-ground{position:absolute;left:14%;right:14%;bottom:25px;height:8px;background:#afa57d27;border-radius:50%;filter:blur(2px)}
.intro-post{position:relative;height:100%;width:100%}.intro-post-glow{position:absolute;width:200px;height:200px;left:calc(50% - 100px);top:5px;border:1px solid #d3c39155;border-radius:50%;background:radial-gradient(#ffec9e33,transparent 65%)}.intro-post-glow:after{content:'✦';position:absolute;right:12px;top:20px;color:#d2ae54;font-size:20px;animation:intro-glimmer 2s infinite}.intro-delivery{position:absolute;bottom:32px;left:calc(50% - 73px);width:146px;height:120px;animation:intro-deliver 2.6s ease both}.intro-delivery .intro-cat{position:absolute;bottom:0;left:0}.intro-delivery .intro-letter{position:absolute;bottom:5px;left:76px;transform:rotate(9deg);animation:intro-letter-bob 2s 2.5s ease-in-out infinite}.intro-post>.intro-bulb{position:absolute;width:66px;height:66px;top:12px;left:calc(50% - 33px);image-rendering:pixelated;animation:intro-bulb-in 2.7s both,intro-glimmer 2s 2.7s infinite}.intro-portal-scene{height:100%;position:relative}.intro-portal{position:absolute;left:calc(50% - 76px);top:0;width:152px;height:207px;border-radius:50%;border:5px solid #a9b5ed;background:radial-gradient(ellipse,#eff8ff 15%,#b8bffb 50%,#8f92dc 66%,#cce9ff 70%,transparent 73%);box-shadow:0 0 20px #a6bcff99,inset 0 0 20px #fff;animation:intro-portal-open 1.2s both}.intro-portal i{position:absolute;inset:10px;border:2px dashed #f8fcff;border-radius:50%;animation:intro-rotate 10s linear infinite}.intro-portal i:nth-child(2){inset:22px;animation-direction:reverse;opacity:.4}.intro-portal i:nth-child(3){inset:-10px;border-style:dotted;opacity:.6}.intro-travelers{position:absolute;left:calc(50% - 124px);bottom:26px;display:flex;align-items:flex-end;gap:4px;width:248px;animation:intro-arrive 2.8s ease both}.intro-travelers .intro-cat{width:62px;height:62px}.intro-theme-2 .intro-world{background:radial-gradient(ellipse at 50% 35%,#f4f1ff,#e2e5f3 70%)}.intro-theme-2 .intro-eyebrow{color:#8b89b1}.intro-theme-3 .intro-stage{height:310px}.intro-party-portraits{position:relative;z-index:2;display:flex;justify-content:center;height:142px}.intro-party-portraits .intro-pair{animation:intro-rise 1s both}.intro-dialogue{position:relative;padding:23px 18px 18px;border:2px solid #a19e80;border-radius:9px;background:#fffef2;box-shadow:inset 0 0 0 3px #e9e6d1,0 5px 0 #ada88325;animation:intro-rise 1s .35s both}.intro-dialogue:before{content:'';position:absolute;top:-9px;left:calc(50% - 7px);width:14px;height:14px;background:#fffef2;border-left:2px solid #a19e80;border-top:2px solid #a19e80;transform:rotate(45deg)}.intro-dialogue>span{position:absolute;left:18px;top:-13px;background:#637b68;color:#fff9e8;border:1px solid #405b48;border-radius:3px;font-size:11px;padding:4px 12px}.intro-dialogue p{font-size:17px;line-height:1.8;margin:0 0 10px}.intro-dialogue strong{color:#a57d36;font-weight:400}.intro-dialogue small{font-size:10px;color:#a29b7b}.intro-theme-3 h1{font-size:22px;margin-top:14px}.intro-theme-3 .intro-actions{margin-top:22px}
.intro-theme-4{color:#eef5e9;background:#183d3b}.intro-theme-4 .intro-world{background:radial-gradient(ellipse at 50% 25%,#3a6157,#173c3c 75%)}.intro-theme-4 .intro-top,.intro-theme-4 .intro-subtitle,.intro-theme-4 .intro-bottom{color:#bed0c2}.intro-theme-4 .intro-eyebrow{color:#d9cda2}.intro-theme-4 .intro-top button{background:#254b46;border-color:#6b8c7a}.intro-theme-4 .intro-actions>p{color:#a7c1b2}.intro-theme-4 .intro-stage{height:255px}.intro-winter-scene{position:relative;width:100%;height:100%;overflow:hidden;border-radius:160px 160px 10px 10px;background:linear-gradient(#234a48,#56766a);box-shadow:inset 0 0 40px #102f3533}.intro-moon{position:absolute;width:76px;height:76px;border-radius:50%;top:25px;left:calc(50% - 38px);background:#fffce0;box-shadow:0 0 45px #fbf7ce4d}.intro-trees{position:absolute;left:-10px;right:-10px;bottom:0;height:145px;background:#193d37;clip-path:polygon(0 100%,0 45%,5% 58%,10% 6%,16% 45%,20% 30%,29% 80%,32% 56%,40% 100%,60% 100%,65% 55%,70% 75%,78% 18%,82% 40%,90% 0,100% 55%,100% 100%)}.intro-trees.back{bottom:25px;transform:scaleX(-1);background:#365c50;opacity:.7}.intro-winter-date{position:absolute;top:128px;left:0;right:0;color:#fffbe3;font-family:Georgia,serif;font-size:26px;letter-spacing:3px;text-shadow:0 2px 12px #153b3c;animation:intro-rise 2s .4s both}.intro-winter-date small{display:block;font-size:9px;letter-spacing:3px;margin-top:12px}.intro-snow{position:absolute;inset:0}.intro-snow i{position:absolute;top:-10px;left:var(--x);width:var(--size);height:var(--size);border-radius:50%;background:#fffde9aa;animation:intro-snowfall var(--speed) var(--delay) linear infinite}.intro-lights i{position:absolute;width:4px;height:4px;background:#ffe8a2;border-radius:50%;box-shadow:0 0 9px 3px #ffe8a255;top:45%;left:14%;animation:intro-glimmer 3s infinite}.intro-lights i:nth-child(2){top:65%;left:28%;animation-delay:-1s}.intro-lights i:nth-child(3){top:37%;left:78%;animation-delay:-2s}.intro-lights i:nth-child(4){top:76%;left:83%;animation-delay:-.6s}.intro-lights i:nth-child(5){top:25%;left:38%;animation-delay:-1.6s}
.intro-theme-5 .intro-stage{height:260px}.intro-minimap{position:relative;top:18px;background:#284956;border:2px solid #82969b;border-radius:9px;box-shadow:inset 0 0 0 2px #d2d8bf,0 8px 16px #344c4514;padding:7px}.intro-mini-title{display:flex;justify-content:space-between;font-size:8px;padding:3px 4px 7px;color:#bfd2d3}.intro-mini-title b{color:#ffde78;font-size:10px;font-weight:400}.intro-map-land{height:145px;position:relative;overflow:hidden;border:1px solid #a3bcba;border-radius:5px;background:linear-gradient(#b6d9da 0 59%,#9bbd8e 60% 100%)}.intro-map-route{position:absolute;left:15%;right:16%;height:45px;top:76px;border:5px solid #e9dbb3;border-top:0;border-left:0;border-radius:0 0 22px 0;transform:skewY(-14deg)}.intro-map-start{position:absolute;left:9%;top:110px;font-size:9px;color:#3d614d}.intro-map-house{position:absolute;right:15%;top:44px;width:40px;height:34px;background:#fff7dc;color:#c98a91;font-size:18px;border:2px solid #b8a886;padding-top:4px;box-shadow:0 3px #758e67}.intro-map-house:before{content:'';position:absolute;left:-8px;right:-8px;top:-18px;height:18px;background:#d7a2a2;clip-path:polygon(50% 0,100% 100%,0 100%)}.intro-map-tree{position:absolute;top:50px;left:14%;width:36px;height:42px;background:#729c7d;clip-path:polygon(50% 0,100% 70%,65% 70%,65% 100%,35% 100%,35% 70%,0 70%)}.intro-map-tree.b{top:17px;left:32%;transform:scale(.75);background:#8caf88}.intro-map-tree.c{top:21px;left:3%;transform:scale(.65)}.intro-map-destination{position:absolute;right:6px;top:7px;display:flex;align-items:center;gap:3px;color:#3a615b;font-size:8px;text-align:left}.intro-map-destination .intro-letter{width:24px;height:24px}.intro-map-dot{position:absolute;left:17%;top:98px;width:9px;height:9px;border-radius:50%;border:1px solid #887527;background:#ffe15e;box-shadow:0 0 0 3px #fff7;animation:intro-map-move 2.8s ease both}.intro-mini-caption{color:#f4ebcd;font-size:10px;padding:9px 0 2px}.intro-map-notice{font-size:11px;color:#8a9279;margin-top:32px}.intro-map-notice span{animation:intro-glimmer 1s infinite}
@keyframes intro-deliver{0%{transform:translateX(-135px);opacity:0}15%{opacity:1}65%{transform:translateX(0)}80%{transform:translateY(-5px)}100%{transform:none}}@keyframes intro-letter-bob{50%{transform:translateY(-4px) rotate(4deg)}}@keyframes intro-bulb-in{0%,45%{opacity:0;transform:translateY(12px) scale(.5)}75%{opacity:1;transform:translateY(-3px) scale(1.1)}100%{opacity:1;transform:none}}@keyframes intro-glimmer{50%{opacity:.45}}@keyframes intro-rotate{to{transform:rotate(360deg)}}@keyframes intro-portal-open{from{transform:scale(.1);opacity:0}to{transform:scale(1);opacity:1}}@keyframes intro-arrive{0%{transform:translateX(-65px);opacity:0}35%{opacity:1}80%{transform:translateX(0)}100%{transform:scale(.93);opacity:1}}@keyframes intro-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes intro-snowfall{to{transform:translate(15px,280px)}}@keyframes intro-map-move{0%{left:17%;top:98px}55%{left:64%;top:80px}100%{left:74%;top:86px}}
@media(max-height:680px){.intro-center{padding:10px 20px 20px}.intro-stage{height:190px}.intro-theme-3 .intro-stage{height:270px}.intro-party-portraits{height:112px}.intro-party-portraits .intro-pair{transform:scale(.82);transform-origin:bottom}.intro-dialogue{padding:17px 12px 12px}.intro-dialogue p{font-size:15px;line-height:1.6}.intro-theme-4 .intro-stage{height:220px}.intro-theme-5 .intro-stage{height:245px}.intro-actions{margin-top:20px}.wedding-intro h1{margin-top:14px}.intro-eyebrow{margin-bottom:8px}.intro-top{padding-top:calc(12px + env(safe-area-inset-top))}.intro-bottom{padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.intro-post>.intro-bulb{top:-3px}.intro-post-glow{width:160px;height:160px;left:calc(50% - 80px)}}
@media(prefers-reduced-motion:reduce){.wedding-intro *{animation:none!important;transition:none!important}.intro-map-dot{left:74%;top:68px}.wedding-intro{transition:none}.intro-leaving{transform:none}}
@media(max-width:390px){.topbar #intro-replay{font-size:0;padding:4px 7px}.topbar #intro-replay:after{content:'↻';font:15px sans-serif}}
@media(max-height:600px){.intro-theme-3 .intro-stage{height:228px}.intro-theme-3 .intro-party-portraits{height:92px}.intro-theme-3 .intro-party-portraits .intro-pair{zoom:.75}.intro-theme-3 .intro-dialogue{padding:16px 10px 10px}.intro-theme-3 .intro-dialogue p{font-size:14px;line-height:1.5}.intro-theme-3 h1{font-size:20px}.intro-theme-3 .intro-actions{margin-top:14px}.intro-theme-3 .intro-center{padding-top:6px;padding-bottom:12px}}
.intro-post>.intro-bulb{filter:drop-shadow(0 0 12px #ffe17c)}.intro-travelers{transition:transform .28s ease,opacity .28s ease}.intro-leaving .intro-travelers{transform:scale(.35);opacity:0}

@font-face{font-family:IntroMaple;src:url("ui-font-r1.woff2") format("woff2");font-weight:700;font-display:swap}#wedding-intro{font-family:IntroMaple,Maplestory,sans-serif;font-weight:700}#intro-bgm[aria-pressed="false"]{color:#9b9683;background:#eeeadd}

/* Match the white and sage palette of the main invitation. */
#wedding-intro{--intro-ink:#40564e;--intro-paper:#fff;background:#f0f5f3;color:var(--intro-ink)}
#wedding-intro::backdrop{background:#f0f5f3}
#wedding-intro .intro-world{background:#fff;border-inline-color:#e0e8e4}
#wedding-intro .intro-top,#wedding-intro .intro-eyebrow,#wedding-intro .intro-subtitle{color:#80938a}
#wedding-intro .intro-top button{background:#f6f9f7;border-color:#d1ded7;color:#60796c;box-shadow:inset 0 1px #fff}
#wedding-intro #intro-bgm[aria-pressed="false"]{background:#f2f4f3;color:#929e97}
#wedding-intro .intro-dialogue{background:#fff;border-color:#acbfb3;box-shadow:inset 0 0 0 3px #edf3ef,0 5px 0 #77988712}
#wedding-intro .intro-dialogue:before{background:#fff;border-color:#acbfb3}
#wedding-intro .intro-dialogue>span{background:#7b9c89;border-color:#648573;color:#fff}
#wedding-intro .intro-dialogue strong{color:#6d9380}
#wedding-intro .intro-dialogue small{color:#8e9e94}
#wedding-intro .intro-actions>button{background:linear-gradient(#fff,#f0f6f2);border-color:#9fb6a8;color:#506f5e;box-shadow:inset 0 1px #fff,0 3px #d9e6de}
#wedding-intro .intro-bottom{color:#93a69b;border-color:#e8eeea}
#wedding-intro button:focus-visible{outline-color:#a8c7b5}
#wedding-intro .intro-top{justify-content:flex-end}
