.h5-app {
  --content-x: clamp(36px, 9.4vw, 72px);
  --content-top: clamp(54px, 7.6vh, 86px);
  --content-bottom: clamp(86px, 11.5vh, 124px);
  --cover-logo-width: clamp(112px, 30%, 176px);
  --cover-title-gap: clamp(68px, 10vh, 116px);
  --cover-title-size: clamp(2.95rem, 13.2vw, 5.55rem);
  --cover-title-leading: 1.13;
  --cover-title-tracking: 0.018em;
  --cover-subtitle-gap: clamp(24px, 3.3vh, 36px);
  --cover-subtitle-size: clamp(1.08rem, 4.55vw, 2rem);
  --cover-footer-gap: clamp(34px, 4.8vh, 56px);
  --cover-footer-size: clamp(1rem, 3.9vw, 1.72rem);
  --swipe-bottom: clamp(34px, 5vh, 52px);
}

.h5-app {
  position: relative;
  width: 100vw;
  height: var(--viewport-height);
  min-height: var(--viewport-height);
  overflow: hidden;
  background: #0b4f91;
  isolation: isolate;
}

.screen-track {
  width: 100%;
  height: 100%;
  transform: translate3d(0, var(--screen-offset, 0%), 0);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.h5-app.is-editor-editing .screen-track {
  transition: none !important;
}

.h5-screen {
  position: relative;
  width: 100%;
  height: var(--viewport-height);
  min-height: var(--viewport-height);
  overflow: hidden;
  padding: calc(var(--content-top) + var(--safe-top)) calc(var(--content-x) + var(--safe-right)) calc(var(--content-bottom) + var(--safe-bottom)) calc(var(--content-x) + var(--safe-left));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.screen-content {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  transform: translate3d(var(--content-offset-x, 0), var(--content-offset-y, 0), 0);
}

.screen--cover .screen-content {
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: clamp(54px, 7.8vh, 104px);
  padding-bottom: 0;
}

.screen--cover .screen-content > :not(.light-dust) {
  position: relative;
  z-index: 2;
}

.screen--text .screen-content {
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: clamp(18px, 3vh, 34px);
  padding-bottom: clamp(44px, 7vh, 76px);
}

.screen--center .screen-content {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 4vh, 42px);
}

.screen--gallery {
  background-position: center;
}

.screen--gallery .screen-content {
  justify-content: flex-start;
  align-items: center;
  padding-top: clamp(42px, 6.4vh, 74px);
  padding-bottom: clamp(82px, 11vh, 118px);
}

.gallery-shell {
  width: 100%;
}

.screen--gallery .screen-kicker {
  margin: 0 0 clamp(20px, 3.1vh, 34px);
}

.screen--gallery .special-title--svg {
  width: clamp(286px, 76vw, 430px);
  height: auto;
  margin: 0 0 clamp(54px, 8vh, 84px);
  overflow: visible;
}

.screen--gallery .special-title--svg img {
  width: 100%;
}

.photo-carousel {
  width: 100%;
  margin: 0 auto;
}

.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  transform: translate3d(var(--media-offset-x, 0), var(--media-offset-y, 0), 0);
}

.carousel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--photo-object-fit, contain);
  object-position: var(--photo-object-position, center center);
  opacity: 0.96;
  transform: translate3d(100%, 0, 0);
  transition: opacity var(--carousel-transition, 600ms) ease, transform var(--carousel-transition, 600ms) ease;
}

.carousel-photo.is-resetting {
  transition: none;
}

.carousel-photo.is-current {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.carousel-photo.is-prev {
  opacity: 0.96;
  transform: translate3d(-100%, 0, 0);
}

.carousel-photo.is-next {
  opacity: 0.96;
  transform: translate3d(100%, 0, 0);
}

.gallery-footer {
  margin: clamp(54px, 8.2vh, 86px) auto 0;
  text-shadow: none;
}

.screen--final {
  background-position: center;
}

.screen--final .screen-content {
  justify-content: flex-start;
  align-items: center;
  padding-top: clamp(82px, 13.5vh, 148px);
  padding-bottom: clamp(56px, 8vh, 86px);
}

.final-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-title-wrap {
  position: relative;
  width: 100%;
  height: clamp(132px, 19vh, 180px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: clamp(26px, 4.7vh, 50px);
  overflow: visible;
}

.screen--final .special-title--svg {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(316px, 78vw, 470px);
  height: auto;
  margin: 0;
  overflow: visible;
  transform: translateX(-50%);
}

.screen--final .special-title--svg img {
  width: 100%;
}

.final-qr-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(18px, 3.2vh, 34px);
}

.final-qr-image,
.final-button-image,
.cover-event-title,
.quote-graphic {
  display: block;
  max-width: 100%;
  height: auto;
  opacity: var(--element-opacity, 1);
  object-fit: var(--photo-object-fit, contain);
  object-position: var(--photo-object-position, center center);
  transform: translate3d(var(--media-offset-x, 0), var(--media-offset-y, 0), 0);
}

.final-line-button {
  display: block;
  width: fit-content;
  margin: 0 auto clamp(54px, 8.4vh, 88px);
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.final-line-button.is-disabled {
  cursor: default;
}

.h5-screen.has-entered .final-button-image,
.h5-screen.was-visited .final-button-image {
  animation: finalButtonBreathe 2.8s ease-in-out infinite;
  animation-delay: 1.1s;
  transform-origin: center;
}

.final-footer {
  margin: 0;
  text-shadow: none;
}

.screen--sections {
  background-position: 46% center;
}

.screen--sections .screen-kicker {
  margin-bottom: clamp(32px, 4.7vh, 52px);
}

.screen-kicker {
  margin: 0 0 clamp(24px, 4vh, 44px);
  color: var(--text-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.8rem, 2.4vw, 1.05rem);
  letter-spacing: 0.42em;
  line-height: 1.4;
}

.screen--text .screen-kicker {
  margin: 0 0 clamp(24px, 3.6vh, 38px);
}

.screen-title {
  margin: 0;
  color: var(--text-gold);
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 10vw, 5.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-shadow: var(--shadow-soft);
}

.screen-title,
.screen-subtitle,
.screen-footer,
.screen-kicker,
.screen-body,
.placeholder-card,
.swipe-hint {
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
  text-wrap: pretty;
}

.cjk-no-orphan {
  display: inline-block;
  white-space: nowrap;
}

.cover-title {
  max-width: 88%;
  margin-top: var(--cover-title-gap);
  font-size: var(--cover-title-size);
  line-height: var(--cover-title-leading);
  letter-spacing: var(--cover-title-tracking);
}

.title-line {
  display: block;
  white-space: nowrap;
}

.title-line--light {
  color: #fffaf6;
}

.title-line--gold {
  color: var(--gradient-end, #f8c75c);
  background: linear-gradient(var(--gradient-direction, 180deg), var(--gradient-start, #fff0b6) 0%, #ffd46d 48%, var(--gradient-end, #f2b64d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.screen-subtitle,
.screen-footer {
  margin: clamp(22px, 4vh, 44px) 0 0;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 4.4vw, 2rem);
  line-height: 1.65;
  letter-spacing: 0;
  text-shadow: var(--shadow-soft);
}

.screen--cover .screen-subtitle {
  margin-top: var(--cover-subtitle-gap);
  color: #fffaf4;
  font-size: var(--cover-subtitle-size);
  line-height: 1.45;
}

.screen--cover .screen-footer {
  margin-top: var(--cover-footer-gap);
  color: #fffaf6;
  font-size: var(--cover-footer-size);
  line-height: 1.5;
}

.cover-event-title {
  margin-top: var(--cover-footer-gap);
}

.brand-logo {
  display: block;
  width: var(--cover-logo-width);
  color: #fff;
}

.brand-logo-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.light-dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.light-dust-dot {
  position: absolute;
  top: var(--dust-y, 40%);
  left: var(--dust-x, 80%);
  width: var(--dust-size, 4px);
  height: var(--dust-size, 4px);
  border-radius: 50%;
  background: var(--dust-color, rgba(255, 219, 126, 0.72));
  box-shadow: 0 0 10px var(--dust-color, rgba(255, 219, 126, 0.48));
  opacity: var(--dust-opacity, 0.22);
  animation: dustDrift var(--dust-duration, 20s) ease-in-out infinite alternate;
  animation-delay: var(--dust-delay, 0s);
}

.screen-body {
  color: var(--text-blue);
  font-family: var(--font-body);
  font-size: clamp(1.12rem, 4.3vw, 1.8rem);
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: 0;
}

.text-reading {
  width: 100%;
}

.text-reading-body {
  transform: translate3d(var(--group-offset-x, 0), var(--group-offset-y, 0), 0);
}

.text-group {
  width: 100%;
  margin: 0 0 var(--paragraph-gap, clamp(24px, 3.4vh, 36px));
}

.text-group:last-of-type {
  margin-bottom: 0;
}

.text-greeting {
  margin: 0 0 var(--paragraph-gap, clamp(22px, 3.3vh, 34px));
  font-family: var(--font-display);
  color: #eec15b;
  background: linear-gradient(var(--gradient-direction, 180deg), var(--gradient-start, #ffe7a0), var(--gradient-end, #eeb34f));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0.08em 0.12em rgba(35, 67, 107, 0.12);
}

.greeting-divider {
  position: relative;
  width: clamp(64px, 19vw, 112px);
  height: 1px;
  margin: calc(var(--paragraph-gap, clamp(22px, 3.3vh, 34px)) * -0.48) 0 calc(var(--paragraph-gap, clamp(22px, 3.3vh, 34px)) * 0.56);
  background: linear-gradient(90deg, rgba(207, 157, 66, 0.18), rgba(207, 157, 66, 0.72), rgba(207, 157, 66, 0.18));
}

.greeting-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(216, 171, 78, 0.9);
  box-shadow: 0 0 5px rgba(216, 171, 78, 0.32);
  transform: translate(-50%, -50%);
}

.text-body-copy {
  margin: 0;
  transform: translate3d(var(--config-offset-x, 0), var(--config-offset-y, 0), 0);
}

.quote-block {
  position: relative;
  width: 100%;
  margin: clamp(24px, 3.4vh, 38px) 0 0;
  padding-top: clamp(15px, 2.2vh, 22px);
  border-top: 1px solid rgba(153, 111, 50, 0.24);
}

.quote-mark {
  position: absolute;
  top: clamp(8px, 1.4vh, 14px);
  left: clamp(-28px, -5vw, -18px);
  pointer-events: none;
}

.quote-copy {
  display: grid;
  gap: var(--paragraph-gap, clamp(8px, 1.2vh, 12px));
}

.quote-copy p {
  margin: 0;
}

.quote-close {
  position: absolute;
  right: clamp(-12px, -2vw, -4px);
  bottom: clamp(-14px, -2vh, -8px);
  pointer-events: none;
  opacity: 0.46;
}

.screen-body p,
.screen-body blockquote {
  margin: 0 0 clamp(20px, 3.2vh, 34px);
}

.screen-body blockquote {
  position: relative;
  margin-top: clamp(22px, 5vh, 54px);
  padding-top: clamp(18px, 3vh, 28px);
  color: #8e6c3d;
  font-size: 0.82em;
  font-weight: 500;
  border-top: 1px solid rgba(144, 103, 52, 0.24);
}

.section-list {
  display: grid;
  gap: var(--section-gap, clamp(28px, 5vh, 58px));
}

.section-item h2 {
  margin: 0 0 clamp(10px, 2vh, 18px);
  color: #9b7331;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 3.4rem);
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 0.08em 0.16em rgba(23, 56, 94, 0.18);
}

.special-title--svg {
  display: block;
  max-width: none;
  height: auto;
  margin: 0 0 clamp(10px, 2vh, 18px);
  opacity: var(--element-opacity, 1);
  overflow: visible;
  pointer-events: none;
}

.screen--sections .special-title--svg {
  height: clamp(56px, 15vw, 78px);
}

.special-title--svg img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  overflow: visible;
  transform: translate3d(var(--title-image-x, 0), var(--title-image-y, 0), 0);
}

.section-item p {
  margin: 0;
}

.section-item .screen-body {
  transform: translate3d(var(--config-offset-x, 0), var(--config-offset-y, 0), 0);
}

.placeholder-card {
  width: min(82vw, 620px);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  color: rgba(13, 70, 147, 0.78);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.72);
  font-size: clamp(1rem, 3.6vw, 1.5rem);
}

.global-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.music-button {
  position: absolute;
  top: calc(14px + var(--safe-top));
  right: calc(14px + var(--safe-right));
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  pointer-events: auto;
}

.music-button svg,
.music-icon {
  width: 32px;
  height: 32px;
}

.music-icon {
  display: block;
}

.music-button.is-playing svg,
.music-button.is-playing .music-icon {
  will-change: transform;
}

.music-button.is-autoplay-blocked .music-icon {
  animation: musicUnlockHint 0.86s ease-in-out 3;
}

.swipe-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--swipe-bottom) + var(--safe-bottom));
  display: grid;
  justify-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  transform: translateX(-50%);
  pointer-events: none;
}

.swipe-hint::before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: rotate(45deg);
  animation: hintFloat 1.8s ease-in-out infinite;
}

.animated {
  opacity: calc(var(--element-opacity, 1) * var(--enter-opacity, 0));
  transform: translate3d(calc(var(--config-offset-x, 0px) + var(--group-offset-x, 0px) + var(--media-offset-x, 0px) + var(--enter-x, 0px)), calc(var(--config-offset-y, 0px) + var(--group-offset-y, 0px) + var(--media-offset-y, 0px) + var(--enter-y, 0px)), 0);
}

.h5-screen.has-entered .animated,
.h5-screen.was-visited .animated {
  opacity: var(--element-opacity, 1);
  transform: translate3d(calc(var(--config-offset-x, 0px) + var(--group-offset-x, 0px) + var(--media-offset-x, 0px)), calc(var(--config-offset-y, 0px) + var(--group-offset-y, 0px) + var(--media-offset-y, 0px)), 0);
  transition: opacity var(--enter-duration, 720ms) var(--enter-easing, ease), transform var(--enter-duration, 720ms) var(--enter-easing, ease);
  transition-delay: var(--enter-delay, 0ms);
}

.h5-app.is-editor-editing:not(.is-editor-playing-entrance) .animated {
  opacity: var(--element-opacity, 1);
  transition: none !important;
}

[data-editor-selected="true"] {
  outline: 1px solid rgba(234, 217, 167, 0.95);
  outline-offset: 4px;
}

.safe-area-guides .h5-app::before,
.safe-area-guides .h5-app::after {
  content: "";
  position: absolute;
  z-index: 30;
  pointer-events: none;
}

.safe-area-guides .h5-app::before {
  inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  border: 1px dashed rgba(255, 70, 70, 0.8);
}

.safe-area-guides .h5-app::after {
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

@keyframes hintFloat {
  0%,
  100% {
    transform: translateY(2px) rotate(45deg);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-3px) rotate(45deg);
    opacity: 1;
  }
}

@keyframes musicUnlockHint {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.055);
  }
}

@keyframes dustDrift {
  from {
    transform: translate3d(0, 0, 0);
    opacity: var(--dust-opacity, 0.22);
  }
  to {
    transform: translate3d(var(--dust-drift-x, -20px), var(--dust-drift-y, -34px), 0);
    opacity: var(--dust-opacity, 0.22);
  }
}

@keyframes finalButtonBreathe {
  0%,
  100% {
    transform: translate3d(var(--media-offset-x, 0), var(--media-offset-y, 0), 0) scale(1);
  }
  50% {
    transform: translate3d(var(--media-offset-x, 0), var(--media-offset-y, 0), 0) scale(1.022);
  }
}

@media (max-height: 720px) {
  .h5-screen {
    padding-top: calc(36px + var(--safe-top));
    padding-bottom: calc(60px + var(--safe-bottom));
  }

  .screen--text .screen-content {
    padding-top: 8px;
    padding-bottom: 50px;
  }

  .screen--text .screen-kicker {
    margin-bottom: 18px;
  }

.quote-block {
    margin-top: 20px;
    padding-top: 14px;
  }

  .section-list {
    gap: 24px;
  }

  .screen--sections .section-list {
    gap: clamp(30px, 4.8vh, 42px);
  }

  .screen--cover .screen-content {
    padding-top: 42px;
  }

  .cover-title:not(.special-title--svg) {
    margin-top: clamp(54px, 8vh, 74px);
    font-size: clamp(2.65rem, 11.8vw, 4.45rem);
  }

  .screen--cover .screen-subtitle {
    margin-top: 18px;
  }

  .screen--cover .screen-footer {
    margin-top: 26px;
  }
}

.quote-block--svg {
  padding-top: 0;
  border-top: 0;
}

.quote-block--svg .quote-graphic {
  width: 100%;
  max-width: none;
  transform: none;
}