:root {
  color-scheme: light;
  font-family: "Songti SC", "Noto Serif SC", "STSong", serif;
  background: #e9e3dc;
  --turn-duration: 820ms;
  --turn-ease: cubic-bezier(.68, 0, .23, 1);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.72), transparent 34%),
    linear-gradient(140deg, #ded6cd, #f8f5f1 48%, #d9cfc4);
}

button {
  font: inherit;
}

.invitation {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.viewport {
  position: relative;
  width: min(100vw, calc(100vh * .5108557));
  height: min(100vh, calc(100vw * 1.9575));
  overflow: hidden;
  isolation: isolate;
  background: #f6f1eb;
  box-shadow: 0 26px 80px rgba(66, 45, 34, .24);
  touch-action: none;
}

.page-stage,
.reference-page {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.reference-page {
  margin: 0 !important;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity, clip-path, filter;
}

.reference-page > * {
  max-width: none;
}

.reference-page.page-enter-up {
  z-index: 3;
  transform: translate3d(0, 100%, 0) scale(.985);
  clip-path: inset(100% 0 0 0 round 22px 22px 0 0);
  filter: brightness(.86);
}

.reference-page.page-enter-down {
  z-index: 3;
  transform: translate3d(0, -100%, 0) scale(.985);
  clip-path: inset(0 0 100% 0 round 0 0 22px 22px);
  filter: brightness(.86);
}

.reference-page.page-enter-up.is-animating,
.reference-page.page-enter-down.is-animating {
  transform: translate3d(0, 0, 0) scale(1);
  clip-path: inset(0 0 0 0 round 0);
  filter: brightness(1);
  transition:
    transform var(--turn-duration) var(--turn-ease),
    clip-path var(--turn-duration) var(--turn-ease),
    filter var(--turn-duration) ease;
}

.reference-page.page-leave-up {
  z-index: 2;
  transform: translate3d(0, -18%, 0) scale(.94);
  opacity: .48 !important;
  filter: blur(2px) saturate(.72);
  transition:
    transform var(--turn-duration) var(--turn-ease),
    opacity var(--turn-duration) ease,
    filter var(--turn-duration) ease;
}

.reference-page.page-leave-down {
  z-index: 2;
  transform: translate3d(0, 18%, 0) scale(.94);
  opacity: .48 !important;
  filter: blur(2px) saturate(.72);
  transition:
    transform var(--turn-duration) var(--turn-ease),
    opacity var(--turn-duration) ease,
    filter var(--turn-duration) ease;
}

.opening {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: #f6e8d4;
  background:
    linear-gradient(rgba(51, 7, 8, .08), rgba(51, 7, 8, .18)),
    #8d1119;
  transition: opacity .7s ease, transform .9s var(--turn-ease);
}

.opening::before,
.opening::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249,224,189,.8), transparent);
}

.opening::before { top: 17%; }
.opening::after { bottom: 17%; }

.opening.is-hidden {
  opacity: 0;
  transform: translate3d(0, -7%, 0) scale(1.04);
  pointer-events: none;
}

.opening-seal {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(249,224,189,.74);
  color: #f9e0bd;
  font-size: 46px;
  line-height: 1;
  animation: sealBreath 1.9s ease-in-out infinite;
}

.opening p,
.opening span {
  margin: 0;
  letter-spacing: .22em;
}

.opening p { font-size: 18px; }
.opening span { font: 11px/1.4 system-ui, sans-serif; opacity: .72; }

.sound-toggle,
.swipe-hint {
  border: 0;
  color: white;
  cursor: pointer;
}

.sound-toggle {
  position: absolute;
  z-index: 10;
  top: .25rem;
  right: .25rem;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  background: transparent;
}

.sound-toggle img {
  display: block;
  width: .875rem;
  height: .875rem;
  padding: .25rem;
  box-sizing: content-box;
  filter: brightness(1.25) contrast(1.08) drop-shadow(0 0 4px rgba(255,255,255,.72));
}

.sound-toggle.is-playing {
  animation: soundRotate 1.8s linear infinite;
}

@keyframes soundRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sound-toggle.is-playing { animation: none; }
}

.page-count {
  position: absolute;
  z-index: 10;
  left: 16px;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(255,255,255,.92);
  font: 10px/1 system-ui, sans-serif;
  text-shadow: 0 1px 4px rgba(0,0,0,.38);
  pointer-events: none;
  display: none;
}

.page-count strong {
  font-size: 12px;
  font-weight: 600;
}

.page-count i {
  position: relative;
  display: block;
  width: 1px;
  height: 66px;
  overflow: hidden;
  background: rgba(255,255,255,.34);
}

.page-count b {
  position: absolute;
  inset: 0;
  display: block;
  background: white;
  transform: scaleY(.11);
  transform-origin: top;
  transition: transform .7s var(--turn-ease);
}

.swipe-hint {
  position: absolute;
  z-index: 10;
  bottom: 1rem;
  left: 50%;
  width: .875rem;
  height: .875rem;
  padding: 0;
  background: transparent;
  transform: translateX(-50%);
}

.swipe-hint svg {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  filter: drop-shadow(0 .125rem .075rem rgba(0,0,0,.5));
  animation: guideUp 1.5s ease infinite;
}

.swipe-hint.is-last svg {
  animation: guideUp 1.5s ease infinite;
}

.desktop-caption {
  position: fixed;
  right: 26px;
  bottom: 20px;
  margin: 0;
  color: rgba(70,48,37,.7);
  font-size: 11px;
  letter-spacing: .18em;
  display: none;
}

.notice {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 34px;
  max-width: calc(100vw - 40px);
  padding: 10px 16px;
  color: #fff;
  font: 13px/1.4 system-ui, sans-serif;
  text-align: center;
  border-radius: 999px;
  background: rgba(25,16,12,.78);
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}

.notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes sealBreath {
  50% { transform: scale(1.055); box-shadow: 0 0 30px rgba(249,224,189,.16); }
}

@keyframes guideUp {
  0%, 100% { opacity: .25; transform: translateY(5px); }
  48% { opacity: 1; transform: translateY(-2px); }
}

/* Local fallbacks for the interactive pieces whose original runtime loaded
   remote map/form services. They keep the visual language of the invite while
   remaining fully offline. */
.reference-page .map[data-v-74037eab] { overflow: hidden; }
.local-map { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(145deg, #dbe5d9, #f4ead8 58%, #d8e3df); }
.local-map-grid { position: absolute; inset: -12%; opacity: .45; background: linear-gradient(25deg, transparent 47%, rgba(255,255,255,.9) 48% 50%, transparent 51%), linear-gradient(115deg, transparent 45%, rgba(255,255,255,.85) 46% 48%, transparent 49%), repeating-linear-gradient(0deg, transparent 0 18px, rgba(139,155,135,.28) 19px 20px), repeating-linear-gradient(90deg, transparent 0 27px, rgba(139,155,135,.25) 28px 29px); transform: rotate(-5deg); }
.local-map-road { position: absolute; height: .12rem; border-radius: .12rem; background: rgba(255,255,255,.9); box-shadow: 0 0 .04rem rgba(98,115,91,.45); transform-origin: left center; }
.local-map-road.road-a { left: -5%; top: 23%; width: 75%; transform: rotate(12deg); }
.local-map-road.road-b { left: 34%; top: 4%; width: 98%; transform: rotate(76deg); }
.local-map-road.road-c { left: 5%; top: 86%; width: 94%; transform: rotate(-18deg); }
.local-map-road.road-d { left: 52%; top: 68%; width: 72%; transform: rotate(-62deg); }
.local-map-water { position: absolute; right: -8%; top: -10%; width: 38%; height: 120%; background: rgba(164,201,206,.52); transform: rotate(18deg); border-left: .08rem solid rgba(255,255,255,.75); }
.local-map-pin { position: absolute; left: 52%; top: 48%; width: .54rem; height: .68rem; border-radius: 60% 60% 60% 0; background: #9c3428; transform: rotate(-45deg); box-shadow: 0 .08rem .12rem rgba(85,35,28,.32); }
.local-map-pin span { position: absolute; width: .18rem; height: .18rem; left: .18rem; top: .18rem; border-radius: 50%; background: #fff; }
.local-map-label { position: absolute; left: 56%; top: 51%; padding: .12rem .18rem; border-radius: .1rem; background: rgba(255,250,239,.94); color: #663d31; box-shadow: 0 .05rem .15rem rgba(86,52,39,.18); white-space: nowrap; transform: translateY(-50%); }
.local-map-label strong, .local-map-label small { display: block; }
.local-map-label strong { font-size: .27rem; }
.local-map-label small { margin-top: .04rem; font-size: .19rem; color: #8d7164; }
.local-map-compass { position: absolute; right: .18rem; top: .16rem; width: .38rem; height: .38rem; display: grid; place-items: center; border: .02rem solid rgba(102,61,49,.55); border-radius: 50%; color: #9c3428; font: 700 .2rem/1 system-ui, sans-serif; background: rgba(255,250,239,.75); }
.local-map-open { position: absolute; right: .18rem; bottom: .16rem; display: grid; place-items: center; width: .52rem; height: .52rem; padding: 0; border: .02rem solid rgba(255,255,255,.95); border-radius: 50%; background: #9c3428; color: #fff; font: .32rem/1 Arial, sans-serif; box-shadow: 0 .05rem .12rem rgba(73,29,24,.25); }
.map-choice { position: absolute; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: .55rem; background: rgba(24,12,10,.48); }
.map-choice.is-open { display: flex; }
.map-choice-card { position: relative; width: 7.6rem; padding: .55rem .45rem .42rem; border-radius: .25rem; background: linear-gradient(145deg, #fffaf4, #f6e3d9); color: #713d31; box-shadow: 0 .16rem .45rem rgba(48,22,17,.3); text-align: center; }
.map-choice-card strong, .map-choice-card small { display: block; }
.map-choice-card strong { font-size: .42rem; letter-spacing: .08em; }
.map-choice-card small { margin-top: .1rem; color: #a4786b; font-size: .23rem; }
.map-choice-close { position: absolute; top: .13rem; right: .15rem; display: grid; place-items: center; width: .42rem; height: .42rem; padding: 0; border: 0; border-radius: 50%; background: rgba(156,52,40,.1); color: #9c3428; font: .34rem/1 Arial, sans-serif; }
.map-choice-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .14rem; margin-top: .35rem; }
.map-choice-actions button { min-height: .68rem; border: .02rem solid rgba(190,120,101,.35); border-radius: .35rem; background: rgba(255,255,255,.8); color: #713d31; font-size: .27rem; }
.map-choice-actions button:active { background: #e9b7a7; }

.reference-page .countdown[data-v-7e4065b9] { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .14rem; align-items: stretch; justify-content: center; }
.reference-page .countdown[data-v-7e4065b9] > .element { width: auto !important; min-width: 0; display: flex !important; align-items: center; justify-content: center; text-align: center; }
.reference-page .countdown[data-v-7e4065b9] .figure, .reference-page .countdown[data-v-7e4065b9] .unit { width: 100%; text-align: center; line-height: 1.15; }
.reference-page .countdown[data-v-7e4065b9] .figure { font-variant-numeric: tabular-nums; }

.page-stage.body .page .element .sign[data-v-673f4f6f] { position: relative; overflow: visible !important; }
.reference-page .sign[data-v-673f4f6f]:has(.general_input), .reference-page .sign[data-v-673f4f6f]:has(.local-attendance) { background: rgba(96, 32, 27, .58) !important; border-color: rgba(255, 245, 232, .92) !important; border-radius: .12rem; }
.reference-page .sign[data-v-673f4f6f] .general_input { display: flex; align-items: center; height: 100%; }
.reference-page .sign[data-v-673f4f6f] .general_input .el-input__wrapper { width: 100%; min-height: 0; padding: 0; box-shadow: none; background: transparent; }
.reference-page .sign[data-v-673f4f6f] .general_input .el-input__inner { width: 100%; height: 100%; padding: 0 .15rem; outline: none; background: transparent; }
.local-attendance { width: 100%; height: 100%; padding: 0 .65rem 0 .15rem; border: 0; background: transparent; color: rgba(255,255,255,1); font-size: .35rem; text-align: left; position: relative; cursor: pointer; }
.local-attendance::after { content: ''; position: absolute; right: .18rem; top: 50%; width: .16rem; height: .16rem; border-right: .035rem solid currentColor; border-bottom: .035rem solid currentColor; transform: translateY(-65%) rotate(45deg); }
.local-attendance-options { display: none; position: absolute; z-index: 50; left: 0; top: calc(100% + .08rem); width: 100%; padding: .12rem; border-radius: .12rem; background: rgba(255,250,244,.98); box-shadow: 0 .1rem .3rem rgba(62,29,22,.25); }
.local-attendance-options.is-open { display: grid; grid-template-columns: repeat(3, 1fr); gap: .08rem; }
.page-stage.body .page .element .sign:has(.local-attendance) { z-index: 30; }
.page-stage.body .page .element:has(.local-attendance) { z-index: 40 !important; }
.local-attendance-options button { min-height: .52rem; border: 0; border-radius: .08rem; background: #f4e0d5; color: #713d31; font-size: .25rem; cursor: pointer; }
.page-stage.body .page .element .local-rsvp-field[data-v-673f4f6f] {
  height: .92rem !important;
  padding: 0 .22rem !important;
  border: 0 !important;
  border-radius: .2rem !important;
  background: linear-gradient(135deg, rgba(255,250,244,.96), rgba(247,226,215,.92)) !important;
  box-shadow: 0 .08rem .2rem rgba(68, 26, 22, .18), inset 0 0 0 .02rem rgba(255,255,255,.75) !important;
  color: #713d31 !important;
}
.page-stage.body .page .element .local-rsvp-field[data-v-673f4f6f] .essential { display: none; }
.local-rsvp-name::before, .local-rsvp-attendance::before { flex: 0 0 auto; margin-right: .12rem; color: #9c3428; font-size: .22rem; letter-spacing: .08em; }
.local-rsvp-name::before { content: '姓名'; }
.local-rsvp-attendance::before { content: '出席'; }
.local-rsvp-name .general_input { flex: 1; }
.page-stage.body .page .element .local-rsvp-name .el-input__inner { padding: 0 .08rem !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: #713d31 !important; font-size: .31rem !important; font-weight: 500; }
.page-stage.body .page .element .local-rsvp-name .el-input__inner::placeholder { color: #b38b7e !important; opacity: 1; }
.local-rsvp-attendance .local-attendance { flex: 1; color: #713d31; font-size: .31rem; font-weight: 500; text-align: center; padding-left: .3rem; padding-right: .5rem; }
.local-rsvp-attendance .local-attendance::after { right: .12rem; width: .13rem; height: .13rem; border-color: #9c3428; transition: transform .18s ease; }
.local-rsvp-attendance .local-attendance[aria-expanded="true"]::after { transform: translateY(-25%) rotate(225deg); }
.local-rsvp-attendance .local-attendance.has-value { color: #713d31; }
.local-rsvp-submit { height: .78rem !important; border: 0 !important; background: transparent !important; }
.page-stage.body .page .element .local-rsvp-submit .button,
.local-blessing-entry { height: .78rem !important; border: .025rem solid rgba(255,255,255,.85) !important; border-radius: .45rem !important; background: rgba(152,52,40,.9) !important; box-shadow: 0 .08rem .18rem rgba(78,24,19,.22), inset 0 .02rem 0 rgba(255,255,255,.18); color: #fff !important; font-size: .31rem !important; letter-spacing: .12em; }
.page-stage.body .page .element .local-rsvp-submit .button { display: flex !important; align-items: center; justify-content: center; line-height: 1 !important; text-align: center; }
.local-attendance-options { padding: .14rem !important; border: .02rem solid rgba(190,120,101,.32); background: rgba(255,250,244,.99) !important; }
.local-attendance-options button { min-height: .58rem; border: .02rem solid rgba(190,120,101,.22); border-radius: .12rem; background: linear-gradient(135deg, #fff8f2, #f6e0d7); color: #713d31; font-size: .27rem; transition: transform .15s ease, background .15s ease; }
.local-attendance-options button:active, .local-attendance-options button:hover { background: #e9b7a7; transform: translateY(-.02rem); }
.local-blessing-entry { position: absolute; left: .725rem; top: 15.18rem; z-index: 18; width: 4.475rem; cursor: pointer; }
.local-blessing-entry { opacity: 0; visibility: hidden; animation: localBlessingReveal 1.5s ease 1.7s both; }
@keyframes localBlessingReveal { 0% { opacity: 0; transform: translateY(.12rem) scale(.92); } 1% { visibility: visible; } 100% { opacity: 1; visibility: visible; transform: none; } }
.blessing-modal { position: absolute; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: .55rem; background: rgba(25,9,9,.55); }
.blessing-modal.is-open { display: flex; }
.blessing-card { position: relative; width: 8.6rem; max-height: 94%; overflow: auto; padding: .55rem .5rem .48rem; border-radius: .28rem; background: linear-gradient(150deg, #fffaf4, #f7e5dc); color: #6b3027; box-shadow: 0 .18rem .55rem rgba(39,10,10,.35); text-align: center; }
.blessing-card h3 { margin: 0; font-size: .52rem; font-weight: 600; }
.blessing-subtitle { margin: .12rem 0 .28rem; font-size: .28rem; color: #a47468; }
.blessing-close { position: absolute; top: .18rem; right: .2rem; z-index: 2; display: grid; place-items: center; width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 50%; background: rgba(156,52,40,.1); color: #9c3428; font-size: .36rem; line-height: 1; font-family: Arial, sans-serif; cursor: pointer; }
.blessing-name, .blessing-message { width: 100%; border: .02rem solid #e6b8a9; border-radius: .12rem; padding: .18rem .2rem; background: rgba(255,255,255,.85); color: #6b3027; font: .29rem/1.35 inherit; outline: none; }
.blessing-message { display: block; min-height: 1.15rem; margin-top: .16rem; resize: none; }
.blessing-payments { display: grid; grid-template-columns: repeat(2, 1fr); gap: .18rem; margin-top: .25rem; }
.payment-card { display: flex; flex-direction: column; align-items: center; gap: .08rem; padding: .13rem; border-radius: .15rem; background: rgba(255,255,255,.8); font-size: .25rem; }
.qr-placeholder { position: relative; width: 2.25rem; height: 2.25rem; border: .1rem solid #fff; background: #fff; overflow: hidden; color: transparent; }
.qr-placeholder::before { content: ''; position: absolute; inset: .12rem; background: repeating-linear-gradient(45deg, #301d1b 0 .08rem, transparent .08rem .16rem), repeating-linear-gradient(-45deg, transparent 0 .1rem, #301d1b .1rem .18rem); opacity: .9; }
.qr-placeholder::after { content: ''; position: absolute; left: .22rem; top: .22rem; width: .43rem; height: .43rem; border: .1rem solid #fff; background: #301d1b; box-shadow: 1.1rem 0 #301d1b, 0 1.1rem #301d1b, 1.1rem 1.1rem #301d1b; }
.qr-placeholder.has-image { background-position: center; background-size: cover; background-repeat: no-repeat; }
.qr-placeholder.has-image::before, .qr-placeholder.has-image::after { display: none; }
.qr-placeholder.has-image img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.blessing-submit { width: 76%; height: .68rem; margin-top: .28rem; border: 0; border-radius: .4rem; background: #9c3428; color: #fff; font-size: .3rem; cursor: pointer; }

@media (max-width: 650px) {
  .viewport {
    width: min(100vw, calc(100dvh * .5108557));
    height: min(100dvh, calc(100vw * 1.9575));
    box-shadow: none;
  }

  .desktop-caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --turn-duration: 260ms; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}