:root {
  color-scheme: light;
  --paper: #edf1ed;
  --ink: #294b43;
  --muted: #7c8c83;
  --card-height: min(calc(100svh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), calc(100vw * 16 / 9));
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
@supports (height: 100dvh) {
  :root { --card-height: min(calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), calc(100vw * 16 / 9)); }
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-radius: 8px; }
.invitation {
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}
.gallery { width: 100%; position: relative; }
.invitation-slider { width: calc(var(--card-height) * 9 / 16); height: var(--card-height); overflow: visible; }
.swiper-slide { border-radius: 4px; background: white; overflow: hidden; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.swiper-slide:not(.swiper-slide-active) { cursor: pointer; }
.controls { display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; flex: 0 0 36px; position: relative; z-index: 2; }
.navigation, .pagination, .reading-tools { display: flex; align-items: center; }
.pagination { gap: 0; }
.page { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .4s ease; }
.page::before, .page-fill { content: ""; position: absolute; height: 5px; width: 5px; top: 50%; left: 50%; border-radius: 8px; transform: translate(-50%, -50%); background: #b8c5b9; transition: width .4s ease, background .3s; }
.page.is-active { width: 44px; }
.page.is-active::before { width: 30px; background: var(--ink); }
.page-number, .page-label { display: none; }
.page-fill { display: none; }
.page.is-active .page-fill { display: block; width: 30px; background: #adc5a5; clip-path: inset(0 calc(100% - var(--progress, 0) * 100%) 0 0); }
.autoplay { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.autoplay svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.5; }
.play-icon { display: none; fill: currentColor; stroke: none; }
.autoplay[aria-pressed="false"] .pause-icon { display: none; }
.autoplay[aria-pressed="false"] .play-icon { display: block; }
.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; }
.no-script { text-align: center; font-size: 12px; }
html:not(.js) .swiper-wrapper { overflow-x: auto; scroll-snap-type: x mandatory; }
html:not(.js) .swiper-slide { scroll-snap-align: start; flex-shrink: 0; }
html:not(.js) .controls { display: none; }
@media (max-width: 600px) { .swiper-slide { border-radius: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}