:root {
  --phone-max: 430px;
  --red-950: #170104;
  --red-900: #3a0308;
  --red-800: #65070d;
  --red-700: #941017;
  --red-600: #b41a20;
  --gold: #f7d889;
  --gold-soft: #ffe9aa;
  --gold-deep: #b9762a;
  --ivory: #fff4d7;
  --ink: #4c1512;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html {
  background: #080002;
  color: var(--gold);
  font-family: "Songti SC", "STSong", "Hiragino Sans GB", "Microsoft YaHei", serif;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 224, 148, 0.16), transparent 28rem),
    linear-gradient(90deg, #080002, #240205 18%, #350408 50%, #240205 82%, #080002);
  touch-action: none;
  user-select: none;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

button {
  font: inherit;
}

.visually-hidden {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.invite {
  position: relative;
  width: min(100vw, var(--phone-max));
  height: 100svh;
  min-height: 560px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--red-950);
  box-shadow: 0 0 56px rgba(0, 0, 0, 0.62);
}

.invite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.13;
  background:
    linear-gradient(rgba(255, 234, 166, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 234, 166, 0.12) 1px, transparent 1px);
  background-size: 26px 26px;
  mix-blend-mode: soft-light;
}

.page-transition {
  --panel-bg:
    radial-gradient(circle at 50% 18%, rgba(255, 232, 166, 0.2), transparent 10rem),
    repeating-linear-gradient(115deg, rgba(255, 238, 176, 0.055) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, #b1161d, #6a060c 58%, #210104);
  --panel-line: rgba(255, 232, 166, 0.48);
  --seal-bg: rgba(94, 5, 10, 0.88);
  --seal-ink: #ffe5a1;
  position: fixed;
  inset: 0 auto auto 50%;
  z-index: 66;
  width: min(100vw, var(--phone-max));
  height: 100svh;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.page-transition::before,
.page-transition::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background: var(--panel-bg);
  box-shadow: inset 0 0 38px rgba(12, 0, 2, 0.28);
  will-change: transform;
}

.page-transition::before {
  left: 0;
  border-right: 1px solid var(--panel-line);
  transform: translateX(-104%);
}

.page-transition::after {
  right: 0;
  border-left: 1px solid var(--panel-line);
  transform: translateX(104%);
}

.page-transition span {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(68px, 19vw, 88px);
  height: clamp(68px, 19vw, 88px);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  color: var(--seal-ink);
  background: var(--seal-bg);
  box-shadow:
    inset 0 0 0 9px rgba(255, 232, 166, 0.055),
    0 18px 40px rgba(21, 0, 3, 0.34);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82) rotate(-10deg);
}

.page-transition span::before {
  content: "囍";
  font-size: clamp(38px, 11vw, 54px);
  line-height: 1;
}

body.is-page-turning .page-transition {
  opacity: 1;
}

body.is-page-turning .page-transition::before {
  animation: turnPanelLeft 0.93s cubic-bezier(0.18, 0.84, 0.18, 1) both;
}

body.is-page-turning .page-transition::after {
  animation: turnPanelRight 0.93s cubic-bezier(0.18, 0.84, 0.18, 1) both;
}

body.is-page-turning .page-transition span {
  animation: turnSeal 0.93s cubic-bezier(0.16, 0.84, 0.2, 1) both;
}

body[data-transition="paper"] .page-transition {
  --panel-bg:
    radial-gradient(circle at 50% 16%, rgba(143, 23, 22, 0.12), transparent 10rem),
    repeating-linear-gradient(135deg, rgba(122, 24, 20, 0.04) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 247, 225, 0.99), rgba(241, 212, 164, 0.98));
  --panel-line: rgba(143, 23, 22, 0.3);
  --seal-bg: rgba(255, 250, 232, 0.94);
  --seal-ink: #8f1716;
}

body[data-transition="curtain"] .page-transition {
  --panel-bg:
    linear-gradient(90deg, rgba(255, 232, 166, 0.08), transparent 22%, rgba(40, 0, 5, 0.24) 55%, transparent),
    repeating-linear-gradient(90deg, rgba(255, 232, 166, 0.05) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #bc1620, #71070e 54%, #210104);
}

body[data-transition="phoenix"] .page-transition,
body[data-transition="seal-slide"] .page-transition,
body[data-transition="brocade"] .page-transition,
body[data-transition="red-seal"] .page-transition {
  --panel-bg:
    radial-gradient(circle at 58% 34%, rgba(255, 232, 166, 0.22), transparent 8rem),
    repeating-linear-gradient(45deg, rgba(255, 232, 166, 0.06) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #a4131b, #65060d 56%, #1e0104);
}

body[data-transition="ivory-wash"] .page-transition,
body[data-transition="gallery-cut"] .page-transition,
body[data-transition="arch-light"] .page-transition,
body[data-transition="map-paper"] .page-transition {
  --panel-bg:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.8), transparent 12rem),
    repeating-linear-gradient(135deg, rgba(143, 23, 22, 0.025) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #fff8e8, #edcf93);
  --panel-line: rgba(143, 23, 22, 0.24);
  --seal-bg: rgba(255, 250, 232, 0.92);
  --seal-ink: #8f1716;
}

.scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(14px, 2.4svh, 22px);
  padding:
    calc(var(--safe-top) + clamp(30px, 5.5svh, 52px))
    clamp(22px, 6vw, 34px)
    calc(var(--safe-bottom) + clamp(38px, 6svh, 56px));
  overflow: hidden;
  opacity: 0;
  transform: translateY(100%) scale(0.985);
  transition:
    opacity 0.58s ease,
    transform 0.72s cubic-bezier(0.18, 0.84, 0.22, 1);
  will-change: transform, opacity;
}

.scene.is-active {
  z-index: 4;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.scene.is-prev {
  transform: translateY(-100%) scale(0.985);
}

.scene.is-next {
  transform: translateY(100%) scale(0.985);
}

.scene.is-under-cover {
  z-index: 3;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: none;
}

.scene.is-under-cover .animate {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.scene-cover.is-opening {
  z-index: 8;
  opacity: 1;
  background: transparent;
  transform: translateY(0) scale(1);
  pointer-events: none;
}

.scene-cover.is-opening::before {
  opacity: 0;
}

.scene-cover,
.scene-invitation,
.scene-photo {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 228, 150, 0.16), transparent 17rem),
    repeating-linear-gradient(110deg, rgba(255, 238, 176, 0.045) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, #ab171e 0%, #76090f 46%, #260205 100%);
}

.light-scene {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.82), transparent 18rem),
    linear-gradient(180deg, #fff6dc 0%, #edcd8d 100%);
}

.scene-photo::before,
.scene-invitation::before,
.scene-cover::before {
  content: "囍";
  position: absolute;
  right: -0.18em;
  top: 8svh;
  color: rgba(255, 232, 166, 0.075);
  font-size: clamp(160px, 56vw, 260px);
  line-height: 1;
  pointer-events: none;
}

.scene-photo {
  grid-template-rows: auto auto;
  align-content: center;
}

.scene-photo::before {
  z-index: 0;
  right: -0.12em;
  top: 4svh;
  color: rgba(255, 232, 166, 0.08);
}

.scene-photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  top: calc(var(--safe-top) + 62px);
  bottom: calc(var(--safe-bottom) + 46px);
  border: 1px solid rgba(247, 216, 137, 0.56);
  background:
    radial-gradient(circle at 90% 5%, rgba(255, 232, 166, 0.42) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 9%, rgba(255, 246, 207, 0.84) 0 5px, transparent 6px),
    radial-gradient(circle at 95% 12%, rgba(194, 89, 38, 0.72) 0 6px, transparent 7px),
    radial-gradient(circle at 12% 92%, rgba(255, 232, 166, 0.4) 0 7px, transparent 8px),
    radial-gradient(circle at 20% 88%, rgba(255, 246, 207, 0.78) 0 5px, transparent 6px),
    radial-gradient(circle at 6% 84%, rgba(194, 89, 38, 0.66) 0 6px, transparent 7px),
    repeating-linear-gradient(135deg, rgba(124, 25, 20, 0.035) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 246, 219, 0.97), rgba(247, 223, 181, 0.91));
  box-shadow:
    0 24px 54px rgba(19, 0, 2, 0.26),
    inset 0 0 0 9px rgba(138, 30, 22, 0.035),
    inset 0 0 0 20px rgba(255, 255, 255, 0.16);
  opacity: 0.96;
  pointer-events: none;
}

.scene-photo.light-scene::after {
  background:
    radial-gradient(circle at 90% 5%, rgba(176, 64, 39, 0.24) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 9%, rgba(255, 246, 207, 0.9) 0 5px, transparent 6px),
    radial-gradient(circle at 12% 92%, rgba(176, 64, 39, 0.22) 0 8px, transparent 9px),
    repeating-linear-gradient(135deg, rgba(148, 34, 24, 0.025) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 252, 242, 0.98), rgba(245, 222, 184, 0.94));
  box-shadow: 0 24px 54px rgba(100, 54, 14, 0.2), inset 0 0 0 9px rgba(148, 34, 24, 0.035);
}

.scene.is-active.scene-photo::after {
  animation: stagePaperIn 1.08s cubic-bezier(0.16, 0.84, 0.2, 1) both;
}

.photo-hero::after {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 236, 178, 0.88) 0 5px, transparent 6px),
    radial-gradient(circle at 94% 12%, rgba(194, 89, 38, 0.72) 0 6px, transparent 7px),
    radial-gradient(circle at 12% 86%, rgba(255, 236, 178, 0.72) 0 6px, transparent 7px),
    linear-gradient(120deg, transparent 0 38%, rgba(183, 118, 42, 0.14) 39% 40%, transparent 41% 100%),
    repeating-linear-gradient(135deg, rgba(124, 25, 20, 0.035) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 246, 219, 0.98), rgba(247, 223, 181, 0.92));
}

.red-room-scene::after {
  background:
    linear-gradient(90deg, rgba(143, 23, 22, 0.1), transparent 22%, transparent 78%, rgba(143, 23, 22, 0.1)),
    radial-gradient(circle at 50% 8%, rgba(255, 232, 166, 0.5), transparent 5rem),
    repeating-linear-gradient(90deg, rgba(143, 23, 22, 0.045) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(255, 246, 219, 0.97), rgba(236, 201, 142, 0.92));
}

.bride-profile::after {
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 232, 166, 0.26), transparent 8rem),
    radial-gradient(circle at 85% 11%, rgba(143, 23, 22, 0.16), transparent 5rem),
    repeating-linear-gradient(135deg, rgba(122, 24, 20, 0.032) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 248, 226, 0.98), rgba(242, 210, 160, 0.94));
}

.groom-profile::after {
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(143, 23, 22, 0.12) 50%, transparent 51%),
    radial-gradient(circle at 50% 50%, rgba(255, 232, 166, 0.2), transparent 7rem),
    repeating-linear-gradient(45deg, rgba(122, 24, 20, 0.035) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, rgba(255, 248, 226, 0.98), rgba(240, 207, 154, 0.94));
}

.red-standing-scene::after {
  background:
    linear-gradient(90deg, rgba(143, 23, 22, 0.12), transparent 34%, transparent 72%, rgba(183, 118, 42, 0.12)),
    repeating-linear-gradient(0deg, rgba(143, 23, 22, 0.036) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, rgba(255, 244, 214, 0.98), rgba(235, 199, 137, 0.92));
}

.soft-story::after,
.light-album::after,
.arch-story::after {
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 255, 255, 0.78), transparent 9rem),
    radial-gradient(circle at 86% 10%, rgba(176, 64, 39, 0.18) 0 8px, transparent 9px),
    radial-gradient(circle at 12% 88%, rgba(176, 64, 39, 0.16) 0 8px, transparent 9px),
    repeating-linear-gradient(135deg, rgba(148, 34, 24, 0.022) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 253, 245, 0.99), rgba(246, 224, 190, 0.95));
}

.arch-story::after {
  border-radius: 999px 999px 18px 18px;
}

.scene-photo .scene-border {
  z-index: 2;
  inset: calc(var(--safe-top) + 18px) 18px calc(var(--safe-bottom) + 18px);
}

.scene-border {
  position: absolute;
  inset: calc(var(--safe-top) + 22px) 22px calc(var(--safe-bottom) + 22px);
  pointer-events: none;
  border: 1px solid rgba(247, 216, 137, 0.62);
  box-shadow:
    inset 0 0 0 5px rgba(247, 216, 137, 0.055),
    inset 0 0 44px rgba(247, 216, 137, 0.055);
}

.scene-border::before,
.scene-border::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(247, 216, 137, 0.34);
}

.scene-border::after {
  inset: 28px;
  border-style: solid none;
  opacity: 0.56;
}

.animate {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(24px);
}

.scene.is-active .animate {
  animation: sceneIn 0.82s cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

.scene.is-active .scene-heading.animate {
  animation: headingReveal 0.94s cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.scene.is-active .single-photo.animate,
.scene.is-active .album-layout.animate,
.scene.is-active .profile-layout.animate,
.scene.is-active .portrait-layout.animate,
.scene.is-active .soft-layout.animate,
.scene.is-active .light-album-grid.animate,
.scene.is-active .arch-layout.animate,
.scene.is-active .final-small-photo.animate {
  animation: photoCurtain 1.05s cubic-bezier(0.16, 0.84, 0.2, 1) both;
}

.scene.is-active .invitation-card.animate,
.scene.is-active .final-panel.animate,
.scene.is-active .nav-card.animate {
  animation: paperSettle 1.02s cubic-bezier(0.16, 0.84, 0.2, 1) both;
}

.scene.is-active .animate:nth-child(2) {
  animation-delay: 0.08s;
}

.scene.is-active .animate:nth-child(3) {
  animation-delay: 0.2s;
}

.scene.is-active .animate:nth-child(4) {
  animation-delay: 0.34s;
}

.scene.is-active .scene-heading h2,
.scene.is-active .profile-title h2,
.scene.is-active .vertical-title span,
.scene.is-active .final-panel h2,
.scene.is-active .invitation-card h2,
.scene.is-active .nav-card h2 {
  animation: titleLift 0.88s cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.scene.is-active .scene-heading span,
.scene.is-active .xi-mark,
.scene.is-active .final-xi,
.scene.is-active .nav-xi {
  animation: sealSet 0.82s cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.scene.is-active .scene-border::before {
  animation: lineDraw 1s ease 0.18s both;
}

.scene.is-active .scene-border::after {
  animation: lineDraw 1.08s ease 0.28s both;
}

.scene.is-active .hero-photo img,
.scene.is-active .album-main img,
.scene.is-active .album-thumb img,
.scene.is-active .portrait-photo img,
.scene.is-active .soft-main img,
.scene.is-active .light-main img,
.scene.is-active .light-thumb img,
.scene.is-active .arch-photo img,
.scene.is-active .final-small-photo img {
  animation: imageDrift 7.2s ease-in-out 0.7s infinite alternate;
}

.scene.is-active .cover-copy h1 span {
  animation: coverGlyph 0.86s cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.scene.is-active .cover-copy h1 span:nth-child(2) {
  animation-delay: 0.08s;
}

.scene.is-active .cover-copy h1 span:nth-child(3) {
  animation-delay: 0.16s;
}

.scene.is-active .cover-copy h1 span:nth-child(4) {
  animation-delay: 0.24s;
}

.scene-cover {
  display: block;
  padding: 0;
}

.cover-door {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, transparent 0 55%, rgba(255, 232, 166, 0.22) 55.4%, transparent 55.8%),
    radial-gradient(circle at 71% 54%, rgba(255, 232, 166, 0.14) 0 4.5rem, transparent 4.6rem),
    linear-gradient(90deg, rgba(44, 0, 5, 0.22), transparent 30%, transparent 66%, rgba(18, 0, 3, 0.38)),
    linear-gradient(180deg, #a61118, #69070d 52%, #1d0104);
}

.cover-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 50.2%;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 232, 166, 0.16), transparent 5.6rem),
    repeating-linear-gradient(120deg, rgba(255, 230, 160, 0.035) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, #b0161d, #73070d 56%, #220104);
  box-shadow:
    inset 0 0 42px rgba(34, 0, 4, 0.34),
    0 0 28px rgba(10, 0, 1, 0.22);
  backface-visibility: hidden;
  transform: perspective(760px) rotateY(0deg);
  transition:
    transform 1.02s cubic-bezier(0.17, 0.72, 0.18, 1),
    filter 1.02s ease;
}

.cover-leaf-left {
  left: 0;
  border-right: 1px solid rgba(255, 232, 166, 0.34);
  transform-origin: right center;
}

.cover-leaf-right {
  right: 0;
  border-left: 1px solid rgba(255, 232, 166, 0.34);
  transform-origin: left center;
}

.cover-leaf-left::before,
.cover-leaf-right::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255, 232, 166, 0.18);
  opacity: 0.7;
}

.cover-leaf-left::after {
  content: "";
  position: absolute;
  left: clamp(30px, 8vw, 44px);
  top: calc(var(--safe-top) + clamp(44px, 7svh, 68px));
  width: 74px;
  height: 118px;
  border-top: 1px solid rgba(255, 232, 166, 0.34);
  border-left: 1px solid rgba(255, 232, 166, 0.34);
}

.cover-leaf-right::after {
  content: "龙凤\A 呈祥";
  white-space: pre;
  position: absolute;
  right: 25px;
  top: 22%;
  color: rgba(255, 232, 166, 0.12);
  font-size: clamp(48px, 14vw, 62px);
  font-weight: 800;
  line-height: 1.12;
}

.scene-cover.is-opening .cover-leaf-left {
  transform: perspective(760px) translateX(-104%) rotateY(18deg);
  filter: brightness(0.84);
}

.scene-cover.is-opening .cover-leaf-right {
  transform: perspective(760px) translateX(104%) rotateY(-18deg);
  filter: brightness(0.84);
}

.scene-cover.is-opening .cover-door {
  animation: coverBaseFade 1.04s ease both;
}

.cover-door::before {
  content: "";
  position: absolute;
  inset: 0 0 0 56%;
  border-left: 1px solid rgba(255, 232, 166, 0.44);
  background:
    radial-gradient(ellipse at 72% 38%, rgba(255, 230, 170, 0.08), transparent 16rem),
    repeating-linear-gradient(120deg, rgba(255, 230, 160, 0.04) 0 1px, transparent 1px 18px);
  box-shadow: inset 28px 0 50px rgba(42, 0, 5, 0.2);
}

.cover-door::after {
  content: "龙凤呈祥";
  position: absolute;
  right: 28px;
  top: 19%;
  width: 1em;
  color: rgba(255, 232, 166, 0.1);
  font-size: 56px;
  line-height: 1.08;
  text-shadow: 0 0 18px rgba(255, 232, 166, 0.08);
}

.cover-seal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 48%;
  display: grid;
  place-items: center;
  width: clamp(68px, 19vw, 88px);
  height: clamp(68px, 19vw, 88px);
  border: 1px solid rgba(255, 232, 166, 0.48);
  border-radius: 999px;
  color: rgba(255, 232, 166, 0.6);
  background: rgba(87, 5, 10, 0.55);
  box-shadow:
    inset 0 0 0 10px rgba(255, 232, 166, 0.045),
    0 18px 42px rgba(24, 0, 3, 0.28);
  font-size: clamp(38px, 11vw, 54px);
  transform: translate(-50%, -50%);
}

.scene-cover.is-opening .cover-seal {
  animation: sealBreak 0.58s cubic-bezier(0.12, 0.72, 0.2, 1) both;
}

.cover-copy {
  position: absolute;
  z-index: 5;
  left: clamp(32px, 8vw, 46px);
  top: calc(var(--safe-top) + clamp(50px, 8svh, 78px));
}

.scene-cover.is-opening .cover-copy,
.scene-cover.is-opening .cover-names,
.scene-cover.is-opening .cover-date,
.scene-cover.is-opening .swipe-cue {
  animation: coverTextFade 0.54s ease both;
}

.cover-copy h1 {
  display: grid;
  gap: clamp(8px, 1.7svh, 14px);
  margin: 0;
  color: #ffe5a1;
  font-size: clamp(74px, 23vw, 106px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 #7b340a,
    0 14px 30px rgba(25, 0, 3, 0.42),
    0 0 24px rgba(255, 225, 150, 0.18);
}

.cover-copy p {
  margin: clamp(24px, 4svh, 34px) 0 0;
  color: #ffe6a1;
  font: 600 clamp(17px, 4.6vw, 23px) / 1.2 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.cover-names {
  position: absolute;
  z-index: 4;
  left: 51%;
  top: calc(var(--safe-top) + clamp(188px, 29svh, 260px));
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: clamp(18px, 4vw, 28px);
}

.cover-names p {
  margin: 0;
  writing-mode: vertical-rl;
  color: rgba(255, 238, 188, 0.88);
  font-size: clamp(18px, 4.6vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.cover-names span {
  color: rgba(255, 238, 188, 0.56);
  font-size: 0.72em;
  margin-bottom: 8px;
}

.cover-date {
  position: absolute;
  z-index: 4;
  left: clamp(32px, 8vw, 46px);
  right: clamp(32px, 8vw, 46px);
  bottom: calc(var(--safe-bottom) + clamp(92px, 13svh, 124px));
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 232, 166, 0.36);
  color: #ffe6a1;
  font: 700 clamp(17px, 4.5vw, 22px) / 1.25 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.cover-date strong {
  color: #fff4d0;
  font: inherit;
}

.swipe-cue {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 26px);
  margin: 0 auto;
  color: rgba(255, 241, 194, 0.7);
  font: 500 12px / 1.2 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  text-align: center;
}

.swipe-cue::after {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  margin: 8px auto 0;
  border-right: 2px solid rgba(255, 232, 160, 0.72);
  border-bottom: 2px solid rgba(255, 232, 160, 0.72);
  transform: rotate(45deg);
  animation: cueMove 1.8s ease-in-out infinite;
}

.scene-invitation {
  padding-inline: clamp(24px, 6vw, 32px);
}

.invitation-card {
  position: relative;
  z-index: 2;
  width: min(100%, 350px);
  min-height: min(730px, calc(100svh - var(--safe-top) - var(--safe-bottom) - 76px));
  padding: clamp(16px, 3.4svh, 24px) clamp(20px, 5.4vw, 28px);
  border: 1px solid rgba(255, 232, 166, 0.56);
  background:
    linear-gradient(180deg, rgba(159, 19, 25, 0.92), rgba(84, 4, 9, 0.94)),
    repeating-linear-gradient(0deg, rgba(255, 232, 166, 0.04) 0 1px, transparent 1px 9px);
  box-shadow:
    0 26px 52px rgba(17, 0, 2, 0.44),
    inset 0 0 0 8px rgba(255, 232, 166, 0.035);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(7px, 1.45svh, 12px);
  text-align: center;
}

.invitation-card::before,
.invitation-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 232, 166, 0.28);
  pointer-events: none;
}

.invitation-card::after {
  inset: 26px;
  border-style: solid none;
  opacity: 0.7;
}

.xi-mark {
  margin: 0;
  color: #ffe8a6;
  font-size: clamp(50px, 15vw, 72px);
  line-height: 0.9;
  text-shadow: 0 2px 0 rgba(78, 18, 0, 0.65), 0 0 20px rgba(255, 222, 148, 0.18);
}

.invite-kicker,
.couple-line,
.poem-line,
.invite-time,
.invite-place,
.parents,
.invite-closing {
  position: relative;
  z-index: 2;
  margin: 0;
}

.invite-kicker {
  color: rgba(255, 237, 188, 0.9);
  font-size: clamp(15px, 4vw, 19px);
  font-weight: 700;
}

.couple-line {
  margin-top: 0;
  color: #fff7dc;
  font-size: clamp(20px, 5.35vw, 26px);
  font-weight: 800;
  line-height: 1.35;
}

.couple-line span {
  display: inline-grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  margin-inline: 0.15em;
  border: 1px solid rgba(255, 232, 166, 0.4);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.64em;
}

.invitation-card h2 {
  margin: 0;
  color: #ffe9aa;
  font-size: clamp(28px, 7.8vw, 38px);
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(78, 18, 0, 0.62);
}

.poem-line {
  margin-top: 0;
  color: rgba(255, 238, 188, 0.92);
  font-size: clamp(16px, 4.25vw, 20px);
  font-weight: 700;
  line-height: 1.42;
}

.invite-time {
  display: grid;
  gap: 3px;
  margin-top: 0;
  color: #fff9e4;
  font: 700 clamp(15px, 4.05vw, 19px) / 1.35 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.invite-time strong,
.invite-time span {
  display: block;
  font: inherit;
}

.invite-place {
  margin: 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(255, 232, 166, 0.24);
  color: #ffe9aa;
  background: rgba(58, 3, 8, 0.32);
  font-size: clamp(16px, 4.35vw, 21px);
  font-weight: 800;
  line-height: 1.38;
}

.parents {
  margin-top: 0;
  color: rgba(255, 245, 210, 0.9);
  font-size: clamp(14px, 3.7vw, 17px);
  font-weight: 700;
  line-height: 1.38;
}

.invite-closing {
  margin-top: 0;
  color: #ffe9aa;
  font-size: clamp(17px, 4.45vw, 21px);
  font-weight: 800;
  line-height: 1.42;
}

.invitation-card {
  color: var(--ink);
  border-color: rgba(255, 234, 174, 0.72);
  background:
    radial-gradient(circle at 50% 2%, rgba(167, 28, 24, 0.12), transparent 11rem),
    repeating-linear-gradient(135deg, rgba(122, 24, 20, 0.035) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 246, 222, 0.98), rgba(244, 214, 166, 0.96));
  box-shadow:
    0 28px 56px rgba(17, 0, 2, 0.46),
    inset 0 0 0 8px rgba(124, 25, 20, 0.035);
}

.invitation-card::before {
  border-color: rgba(124, 25, 20, 0.24);
}

.invitation-card::after {
  border-color: rgba(183, 118, 42, 0.42);
}

.xi-mark,
.invitation-card h2,
.invite-closing {
  color: #8f1716;
  text-shadow: 0 1px 0 rgba(255, 244, 205, 0.9);
}

.invite-kicker,
.poem-line,
.parents {
  color: rgba(76, 21, 18, 0.82);
}

.couple-line,
.invite-time {
  color: #571714;
}

.couple-line span {
  color: #9e1b19;
  border-color: rgba(143, 23, 22, 0.34);
  background: rgba(255, 250, 232, 0.6);
}

.invite-place {
  border-color: rgba(143, 23, 22, 0.18);
  color: #8f1716;
  background: rgba(255, 251, 235, 0.66);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.54);
}

.scene-heading {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 7px;
  width: min(100%, 344px);
  text-align: center;
}

.scene-photo .scene-heading::before {
  content: "WEDDING INVITATION";
  order: 2;
  margin-top: 2px;
  color: rgba(122, 24, 20, 0.46);
  font: 700 9px / 1 "Times New Roman", serif;
  letter-spacing: 0.22em;
}

.scene-photo .scene-heading::after {
  content: "";
  order: 5;
  width: 118px;
  height: 1px;
  margin-top: 3px;
  background: linear-gradient(90deg, transparent, rgba(183, 118, 42, 0.72), transparent);
}

.scene-heading span {
  order: 1;
  display: grid;
  place-items: center;
  width: clamp(44px, 12vw, 58px);
  height: clamp(44px, 12vw, 58px);
  border: 1px solid rgba(247, 216, 137, 0.76);
  border-radius: 999px;
  color: #ffe9aa;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 236, 178, 0.22), transparent 58%),
    rgba(73, 4, 8, 0.62);
  box-shadow: inset 0 0 0 4px rgba(247, 216, 137, 0.08);
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1;
}

.light-scene .scene-heading span {
  color: #8e1516;
  border-color: rgba(157, 27, 20, 0.34);
  background: rgba(255, 250, 237, 0.68);
}

.scene-heading h2 {
  order: 3;
  margin: 0;
  color: #7c1914;
  font-size: clamp(30px, 8.5vw, 44px);
  line-height: 1.08;
  text-shadow: none;
  animation: goldBreath 4.6s ease-in-out infinite;
}

.scene-heading p {
  order: 4;
  margin: 0;
  color: rgba(92, 34, 23, 0.74);
  font: 600 clamp(15px, 4vw, 19px) / 1.45 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.light-scene .scene-heading h2 {
  color: #7a1814;
  text-shadow: none;
}

.light-scene .scene-heading p {
  color: rgba(86, 37, 24, 0.72);
}

.single-photo {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: min(100%, 356px);
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(255, 232, 166, 0.74);
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 250, 232, 0.98), rgba(228, 174, 88, 0.92)),
    var(--ivory);
  box-shadow:
    0 24px 46px rgba(18, 0, 2, 0.42),
    0 0 0 1px rgba(255, 245, 194, 0.16);
}

.single-photo::before,
.single-photo::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.single-photo::before {
  z-index: 4;
  top: -24px;
  right: -15px;
  width: 112px;
  height: 72px;
  background:
    radial-gradient(circle at 20% 58%, #fff1bb 0 8px, #d89c3f 9px 13px, transparent 14px),
    radial-gradient(circle at 43% 36%, #fff5c9 0 7px, #d89c3f 8px 12px, transparent 13px),
    radial-gradient(circle at 67% 54%, #fff1bb 0 8px, #d89c3f 9px 13px, transparent 14px),
    radial-gradient(circle at 86% 28%, #fff5c9 0 6px, #d89c3f 7px 11px, transparent 12px),
    linear-gradient(142deg, transparent 0 44%, rgba(122, 70, 21, 0.38) 45% 47%, transparent 48% 100%);
  filter: drop-shadow(0 6px 8px rgba(82, 22, 8, 0.18));
}

.single-photo::after {
  left: 15px;
  right: 15px;
  bottom: -15px;
  height: 30px;
  border-bottom: 1px solid rgba(183, 118, 42, 0.58);
  border-left: 1px solid rgba(183, 118, 42, 0.32);
  border-right: 1px solid rgba(183, 118, 42, 0.32);
}

.light-scene .single-photo {
  border-color: rgba(148, 44, 26, 0.24);
  background: rgba(255, 253, 244, 0.95);
  box-shadow: 0 24px 44px rgba(89, 45, 10, 0.2);
}

.landscape-photo {
  aspect-ratio: 3 / 2;
  max-height: 50svh;
}

.portrait-photo {
  width: min(74vw, 324px);
  max-height: 62svh;
  aspect-ratio: 2 / 3;
}

.single-photo img {
  border-radius: 15px;
  object-fit: contain;
  background: #250205;
}

.light-scene .single-photo img {
  background: #f4e6ca;
}

.photo-script,
.portrait-layout,
.album-layout,
.profile-layout,
.soft-layout,
.light-album-grid,
.arch-layout {
  position: relative;
  z-index: 3;
}

.photo-script {
  margin: -4px 0 0;
  color: rgba(101, 26, 18, 0.56);
  font: 700 10px / 1 "Times New Roman", serif;
  letter-spacing: 0.25em;
}

.hero-photo {
  width: min(100%, 360px);
  max-height: 52svh;
  aspect-ratio: 3 / 2;
}

.hero-photo img {
  object-fit: cover;
  object-position: center center;
}

.album-layout {
  display: grid;
  grid-template-columns: 1fr minmax(84px, 30%);
  grid-template-rows: auto auto;
  gap: 12px;
  width: min(100%, 350px);
  padding: 9px;
  border: 1px solid rgba(183, 118, 42, 0.44);
  background: rgba(255, 250, 232, 0.72);
  box-shadow: 0 22px 42px rgba(22, 0, 3, 0.22);
}

.album-layout::before,
.profile-layout::before,
.soft-layout::before,
.light-album-grid::before,
.arch-layout::before,
.portrait-layout::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.album-layout::before {
  left: 18px;
  right: 18px;
  top: -14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 23, 22, 0.36), rgba(183, 118, 42, 0.52), transparent);
}

.album-main,
.album-thumb,
.soft-main,
.light-main,
.light-thumb,
.profile-photo,
.arch-photo {
  margin: 0;
  overflow: hidden;
  background: #f4e6ca;
}

.album-main {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
  border-radius: 8px 8px 20px 8px;
}

.album-main img,
.album-thumb img,
.soft-main img,
.light-main img,
.light-thumb img,
.profile-photo img,
.arch-photo img {
  object-fit: cover;
}

.album-thumb {
  aspect-ratio: 3 / 4;
  border: 5px solid #fff7dc;
  border-radius: 10px;
  box-shadow: 0 14px 26px rgba(95, 26, 8, 0.2);
}

.album-thumb img {
  object-position: 50% 31%;
}

.album-note {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 104px;
  padding: 12px 13px;
  border: 1px solid rgba(143, 23, 22, 0.16);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 254, 244, 0.82), rgba(244, 218, 172, 0.64));
}

.album-note strong,
.soft-copy strong,
.arch-caption span,
.light-album-grid p {
  color: #8f1716;
  font-size: clamp(20px, 5.2vw, 26px);
  line-height: 1.15;
}

.album-note span,
.soft-copy span,
.arch-caption p {
  color: rgba(76, 21, 18, 0.76);
  font: 600 clamp(13px, 3.45vw, 16px) / 1.55 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.profile-layout {
  display: grid;
  justify-items: center;
  gap: clamp(16px, 3svh, 24px);
  width: min(100%, 346px);
}

.profile-layout::before {
  top: 50%;
  left: 50%;
  width: min(78vw, 300px);
  height: min(78vw, 300px);
  border: 1px solid rgba(183, 118, 42, 0.24);
  border-radius: 999px;
  transform: translate(-50%, -12%);
}

.profile-layout::after {
  content: "囍";
  position: absolute;
  right: clamp(25px, 8vw, 42px);
  bottom: clamp(20px, 4svh, 36px);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(143, 23, 22, 0.22);
  border-radius: 999px;
  color: rgba(143, 23, 22, 0.46);
  font-size: 21px;
  background: rgba(255, 250, 232, 0.44);
}

.profile-title {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.profile-title span {
  color: rgba(122, 24, 20, 0.46);
  font: 700 10px / 1 "Times New Roman", serif;
  letter-spacing: 0.24em;
}

.profile-title h2 {
  margin: 0;
  color: #7c1914;
  font-size: clamp(42px, 12vw, 58px);
  line-height: 1;
}

.profile-title strong {
  display: inline-grid;
  place-items: center;
  min-width: 8em;
  padding: 9px 20px;
  border: 1px solid rgba(183, 118, 42, 0.52);
  color: #fff7dc;
  background:
    linear-gradient(90deg, rgba(119, 10, 13, 0.98), rgba(161, 24, 27, 0.94));
  box-shadow: inset 0 0 0 4px rgba(255, 232, 166, 0.05);
  font-size: clamp(20px, 5.5vw, 27px);
  line-height: 1.1;
}

.profile-title p {
  margin: 3px 0 0;
  color: rgba(76, 21, 18, 0.74);
  font: 600 clamp(14px, 3.8vw, 18px) / 1.45 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.profile-photo {
  width: min(72vw, 282px);
  aspect-ratio: 1;
  padding: 9px;
  border: 1px solid rgba(183, 118, 42, 0.5);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 252, 236, 0.98), rgba(234, 190, 116, 0.92));
  box-shadow: 0 24px 44px rgba(24, 0, 3, 0.26);
}

.profile-photo img {
  border-radius: 999px;
}

.bride-profile .profile-photo img {
  object-position: 56% 33%;
  transform: scale(1.48);
  transform-origin: 56% 45%;
}

.groom-profile .profile-photo img {
  object-position: 56% 35%;
  transform: scale(1.42);
  transform-origin: 56% 45%;
}

.portrait-layout {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: min(100%, 350px);
}

.portrait-layout::before {
  left: 44px;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(143, 23, 22, 0.34), transparent);
}

.portrait-layout .single-photo {
  width: min(65vw, 264px);
  max-height: 60svh;
}

.portrait-layout > p {
  grid-column: 1 / -1;
  justify-self: center;
  margin: -2px 0 0;
  color: rgba(76, 21, 18, 0.74);
  font: 700 clamp(16px, 4.4vw, 21px) / 1.3 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.vertical-title {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: #7c1914;
}

.vertical-title span,
.vertical-title small {
  writing-mode: vertical-rl;
}

.vertical-title span {
  font-size: clamp(35px, 9.5vw, 48px);
  line-height: 1;
}

.vertical-title small {
  color: rgba(76, 21, 18, 0.68);
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: 0.2em;
}

.soft-layout {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(100%, 338px);
}

.soft-layout::before {
  top: 47px;
  left: 50%;
  width: min(68vw, 260px);
  height: min(68vw, 260px);
  border: 1px solid rgba(143, 23, 22, 0.12);
  border-radius: 999px 999px 22px 22px;
  transform: translateX(-50%);
}

.soft-main {
  width: min(65vw, 254px);
  max-height: 52svh;
  aspect-ratio: 2 / 3;
  padding: 8px;
  border: 1px solid rgba(143, 23, 22, 0.18);
  border-radius: 999px 999px 26px 26px;
  background: rgba(255, 253, 244, 0.92);
  box-shadow: 0 24px 44px rgba(89, 45, 10, 0.18);
}

.soft-main img {
  border-radius: 999px 999px 20px 20px;
  object-position: 50% 35%;
}

.soft-copy {
  width: min(100%, 304px);
  padding: 12px 18px;
  border-top: 1px solid rgba(143, 23, 22, 0.2);
  border-bottom: 1px solid rgba(143, 23, 22, 0.2);
  text-align: center;
}

.soft-copy strong,
.soft-copy span {
  display: block;
}

.soft-copy span {
  margin-top: 6px;
}

.light-album-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  width: min(100%, 348px);
}

.light-album-grid::before {
  left: 24px;
  right: 24px;
  bottom: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 23, 22, 0.2), transparent);
}

.light-main {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
  padding: 8px;
  border: 1px solid rgba(143, 23, 22, 0.18);
  border-radius: 12px 12px 32px 12px;
  background: rgba(255, 253, 244, 0.92);
  box-shadow: 0 22px 38px rgba(89, 45, 10, 0.16);
}

.light-main img,
.light-thumb img {
  border-radius: inherit;
}

.light-main img {
  border-radius: 8px 8px 25px 8px;
  object-position: 50% 38%;
}

.light-thumb {
  aspect-ratio: 4 / 5;
  padding: 7px;
  border: 1px solid rgba(143, 23, 22, 0.14);
  border-radius: 12px;
  background: rgba(255, 253, 244, 0.88);
}

.light-thumb.one img {
  object-position: 50% 35%;
}

.light-thumb.two img {
  object-position: 50% 34%;
}

.light-album-grid p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 3px;
  text-align: center;
  font-size: clamp(17px, 4.4vw, 22px);
}

.arch-layout {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 342px);
}

.arch-layout::before {
  top: 20px;
  left: 50%;
  width: min(74vw, 300px);
  height: min(74vw, 300px);
  border: 1px solid rgba(143, 23, 22, 0.12);
  border-radius: 999px 999px 26px 26px;
  transform: translateX(-50%);
}

.arch-photo {
  width: min(70vw, 282px);
  max-height: 61svh;
  aspect-ratio: 2 / 3;
  padding: 8px;
  border: 1px solid rgba(143, 23, 22, 0.18);
  border-radius: 999px 999px 28px 28px;
  background: rgba(255, 253, 244, 0.95);
  box-shadow: 0 24px 44px rgba(89, 45, 10, 0.18);
}

.arch-photo img {
  border-radius: 999px 999px 21px 21px;
  object-position: 50% 38%;
}

.arch-caption {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.arch-caption p {
  margin: 0;
  font-size: clamp(15px, 4vw, 18px);
}

.scene-final-photo {
  padding: calc(var(--safe-top) + 32px) clamp(24px, 6vw, 34px) calc(var(--safe-bottom) + 40px);
  background: #120103;
}

.final-bg {
  position: absolute;
  inset: -32px;
  margin: 0;
  z-index: 0;
}

.final-bg img {
  object-fit: cover;
  object-position: 50% 38%;
  filter: blur(10px) saturate(0.78) brightness(0.48);
  transform: scale(1.06);
}

.scene-final-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(114, 8, 13, 0.86), rgba(54, 2, 7, 0.58) 52%, rgba(18, 1, 3, 0.92)),
    radial-gradient(circle at 50% 0%, rgba(255, 228, 150, 0.26), transparent 22rem);
}

.final-panel,
.final-small-photo {
  position: relative;
  z-index: 2;
}

.final-panel {
  width: min(100%, 350px);
  padding: clamp(18px, 4svh, 26px) 20px;
  border: 1px solid rgba(255, 232, 166, 0.56);
  background: rgba(94, 5, 10, 0.74);
  box-shadow: 0 22px 46px rgba(16, 0, 2, 0.42), inset 0 0 0 6px rgba(255, 232, 166, 0.04);
  text-align: center;
  backdrop-filter: blur(8px);
}

.final-xi {
  display: block;
  color: #ffe9aa;
  font-size: clamp(50px, 14vw, 70px);
  line-height: 0.9;
}

.final-panel h2 {
  margin: 8px 0 0;
  color: #ffe9aa;
  font-size: clamp(34px, 9.5vw, 48px);
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(83, 22, 0, 0.6);
}

.final-panel p {
  margin: 10px 0 0;
  color: rgba(255, 247, 220, 0.92);
  font: 700 clamp(15px, 4.05vw, 19px) / 1.45 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.final-panel .names {
  color: #fff8dd;
  font-size: clamp(24px, 6.8vw, 34px);
}

.final-panel strong {
  display: block;
  margin-top: 14px;
  color: #ffe9aa;
  font-size: clamp(24px, 6.8vw, 34px);
  line-height: 1.2;
}

.final-small-photo {
  width: min(64vw, 278px);
  max-height: 39svh;
  aspect-ratio: 2 / 3;
  margin: clamp(18px, 3svh, 24px) 0 0;
  padding: 7px;
  border: 1px solid rgba(255, 232, 166, 0.72);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 245, 210, 0.96);
  box-shadow: 0 24px 46px rgba(14, 0, 2, 0.4);
}

.final-small-photo img {
  border-radius: 15px;
  object-fit: contain;
  background: #efe5d3;
}

.scene-final-photo {
  gap: clamp(14px, 2.8svh, 22px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 232, 166, 0.18), transparent 18rem),
    repeating-linear-gradient(115deg, rgba(255, 238, 176, 0.035) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, #a31319 0%, #79090f 48%, #270205 100%);
}

.scene-final-photo::before {
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 232, 166, 0.14), transparent 8rem),
    radial-gradient(circle at 8% 82%, rgba(255, 232, 166, 0.12), transparent 8rem),
    linear-gradient(180deg, rgba(82, 5, 9, 0.18), rgba(20, 0, 3, 0.3));
}

.scene-final-photo::after {
  content: "囍";
  position: absolute;
  z-index: 1;
  right: -0.12em;
  top: 5svh;
  color: rgba(255, 232, 166, 0.08);
  font-size: clamp(170px, 58vw, 250px);
  line-height: 1;
}

.final-panel {
  width: min(100%, 348px);
  padding: clamp(20px, 4svh, 28px) 22px;
  border-color: rgba(255, 232, 166, 0.72);
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(169, 35, 26, 0.12), transparent 9rem),
    repeating-linear-gradient(135deg, rgba(122, 24, 20, 0.035) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 246, 222, 0.98), rgba(243, 213, 164, 0.96));
  box-shadow:
    0 26px 52px rgba(17, 0, 2, 0.44),
    inset 0 0 0 8px rgba(124, 25, 20, 0.035);
  backdrop-filter: none;
}

.final-panel::before,
.final-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.final-panel::before {
  inset: 13px;
  border: 1px solid rgba(143, 23, 22, 0.22);
}

.final-panel::after {
  left: 36px;
  right: 36px;
  bottom: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 118, 42, 0.62), transparent);
}

.final-xi {
  color: #8f1716;
  text-shadow: 0 1px 0 rgba(255, 244, 205, 0.9);
}

.final-panel h2 {
  color: #8f1716;
  text-shadow: 0 1px 0 rgba(255, 244, 205, 0.9);
}

.final-panel p {
  color: rgba(76, 21, 18, 0.82);
}

.final-panel .names {
  color: #571714;
}

.final-panel strong {
  color: #8f1716;
  text-shadow: 0 1px 0 rgba(255, 244, 205, 0.9);
}

.final-small-photo {
  width: min(52vw, 218px);
  max-height: 31svh;
  border-color: rgba(255, 232, 166, 0.74);
  border-radius: 999px 999px 24px 24px;
  background: rgba(255, 246, 222, 0.96);
}

.final-small-photo img {
  border-radius: 999px 999px 17px 17px;
  object-fit: cover;
  object-position: 50% 34%;
}

.scene-navigation {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 232, 166, 0.2), transparent 18rem),
    radial-gradient(circle at 14% 86%, rgba(255, 232, 166, 0.12), transparent 10rem),
    repeating-linear-gradient(115deg, rgba(255, 238, 176, 0.035) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, #a7141a 0%, #77080e 50%, #230104 100%);
}

.scene-navigation::before {
  content: "囍";
  position: absolute;
  right: -0.15em;
  top: 7svh;
  color: rgba(255, 232, 166, 0.08);
  font-size: clamp(170px, 58vw, 252px);
  line-height: 1;
}

.nav-card {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 2svh, 16px);
  width: min(100%, 348px);
  padding: clamp(24px, 5svh, 36px) 24px clamp(26px, 5.5svh, 40px);
  border: 1px solid rgba(255, 232, 166, 0.72);
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(169, 35, 26, 0.12), transparent 9rem),
    repeating-linear-gradient(135deg, rgba(122, 24, 20, 0.035) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 247, 225, 0.98), rgba(244, 216, 171, 0.96));
  box-shadow:
    0 28px 56px rgba(17, 0, 2, 0.46),
    inset 0 0 0 8px rgba(124, 25, 20, 0.035);
  text-align: center;
}

.nav-card::before,
.nav-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.nav-card::before {
  inset: 14px;
  border: 1px solid rgba(143, 23, 22, 0.22);
}

.nav-card::after {
  left: 38px;
  right: 38px;
  bottom: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 118, 42, 0.62), transparent);
}

.nav-xi {
  display: grid;
  place-items: center;
  width: clamp(58px, 16vw, 76px);
  height: clamp(58px, 16vw, 76px);
  border: 1px solid rgba(143, 23, 22, 0.24);
  border-radius: 999px;
  color: #8f1716;
  background: rgba(255, 250, 232, 0.64);
  box-shadow: inset 0 0 0 6px rgba(143, 23, 22, 0.035);
  font-size: clamp(36px, 10vw, 50px);
  line-height: 1;
}

.nav-kicker {
  margin: 0;
  color: rgba(76, 21, 18, 0.65);
  font: 700 12px / 1 "Times New Roman", "Songti SC", serif;
  letter-spacing: 0.3em;
}

.nav-card h2 {
  margin: 0;
  color: #8f1716;
  font-size: clamp(40px, 11vw, 56px);
  line-height: 1.04;
  text-shadow: 0 1px 0 rgba(255, 244, 205, 0.9);
}

.nav-names {
  margin: 0;
  color: #571714;
  font-size: clamp(23px, 6vw, 31px);
  font-weight: 800;
  line-height: 1.2;
}

.nav-info {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 2px;
  padding: 16px 14px;
  border: 1px solid rgba(143, 23, 22, 0.16);
  background: rgba(255, 253, 242, 0.54);
}

.nav-info p {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  align-items: start;
  gap: 10px;
  margin: 0;
  color: rgba(76, 21, 18, 0.84);
  font: 700 clamp(14px, 3.75vw, 17px) / 1.45 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  text-align: left;
}

.nav-info strong {
  color: #8f1716;
  font: inherit;
}

.map-button {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(100%, 260px);
  min-height: 50px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 232, 166, 0.62);
  border-radius: 999px;
  color: #fff7dc;
  background:
    linear-gradient(180deg, rgba(172, 31, 31, 0.98), rgba(111, 8, 14, 0.98));
  box-shadow:
    0 18px 32px rgba(62, 1, 5, 0.28),
    inset 0 0 0 4px rgba(255, 232, 166, 0.06);
  font: 800 clamp(16px, 4.4vw, 20px) / 1.2 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  text-decoration: none;
}

.map-button::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 232, 166, 0.12);
  border-radius: inherit;
}

.map-button span {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border: 1px solid rgba(255, 232, 166, 0.36);
  border-radius: 999px;
  font-size: 0.8em;
}

.nav-note {
  margin: 0;
  color: rgba(76, 21, 18, 0.66);
  font: 700 clamp(14px, 3.8vw, 17px) / 1.5 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.page-dots {
  position: fixed;
  top: 50%;
  right: max(10px, calc((100vw - var(--phone-max)) / 2 + 10px));
  z-index: 60;
  display: grid;
  gap: 7px;
  transform: translateY(-50%);
}

.page-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid rgba(247, 216, 137, 0.7);
  border-radius: 999px;
  background: rgba(247, 216, 137, 0.18);
  cursor: pointer;
}

.page-dots button.is-active {
  height: 21px;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(247, 216, 137, 0.38);
}

.music-toggle {
  position: fixed;
  top: calc(var(--safe-top) + 16px);
  right: max(15px, calc((100vw - var(--phone-max)) / 2 + 15px));
  z-index: 70;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(247, 216, 137, 0.78);
  border-radius: 999px;
  color: var(--gold);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 235, 166, 0.18), transparent 60%),
    rgba(87, 5, 10, 0.82);
  box-shadow: 0 12px 26px rgba(20, 0, 2, 0.42), inset 0 0 0 1px rgba(255, 235, 166, 0.12);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.disc::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.note {
  position: absolute;
  top: -7px;
  right: -5px;
  font-size: 16px;
  line-height: 1;
}

.music-toggle.is-playing .disc {
  animation: spin 3.2s linear infinite;
}

.music-toggle.is-muted {
  opacity: 0.62;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 24px);
  z-index: 80;
  max-width: min(86vw, 340px);
  padding: 10px 14px;
  border: 1px solid rgba(247, 216, 137, 0.45);
  border-radius: 999px;
  color: #fff8e8;
  background: rgba(72, 4, 8, 0.9);
  font: 500 14px / 1.4 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.scene.is-active .album-note,
.scene.is-active .soft-copy,
.scene.is-active .arch-caption,
.scene.is-active .portrait-layout > p,
.scene.is-active .photo-script,
.scene.is-active .nav-info,
.scene.is-active .nav-note {
  animation: detailRise 0.78s cubic-bezier(0.18, 0.84, 0.22, 1) 0.42s both;
}

.scene.is-active .map-button {
  animation:
    detailRise 0.78s cubic-bezier(0.18, 0.84, 0.22, 1) 0.52s both,
    mapButtonGlow 3.2s ease-in-out 1.25s infinite;
}

@keyframes turnPanelLeft {
  0% {
    transform: translateX(-104%) skewX(-1.5deg);
  }

  30%,
  60% {
    transform: translateX(0) skewX(0deg);
  }

  100% {
    transform: translateX(-104%) skewX(1.5deg);
  }
}

@keyframes turnPanelRight {
  0% {
    transform: translateX(104%) skewX(1.5deg);
  }

  30%,
  60% {
    transform: translateX(0) skewX(0deg);
  }

  100% {
    transform: translateX(104%) skewX(-1.5deg);
  }
}

@keyframes turnSeal {
  0%,
  18% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.76) rotate(-10deg);
  }

  36%,
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82) rotate(8deg);
  }
}

@keyframes stagePaperIn {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(30px) scale(0.955);
  }

  62% {
    opacity: 0.98;
    filter: blur(0);
    transform: translateY(-2px) scale(1.004);
  }

  100% {
    opacity: 0.96;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes detailRise {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes mapButtonGlow {
  0%,
  100% {
    box-shadow:
      0 18px 32px rgba(62, 1, 5, 0.28),
      inset 0 0 0 4px rgba(255, 232, 166, 0.06);
  }

  50% {
    box-shadow:
      0 18px 36px rgba(62, 1, 5, 0.34),
      0 0 22px rgba(255, 232, 166, 0.2),
      inset 0 0 0 4px rgba(255, 232, 166, 0.08);
  }
}

@keyframes sceneIn {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes headingReveal {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(22px) scale(0.98);
  }

  62% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-2px) scale(1.01);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes paperSettle {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(28px) scale(0.965);
  }

  64% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-3px) scale(1.006);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes photoCurtain {
  0% {
    opacity: 0;
    filter: blur(6px);
    clip-path: inset(16% 10% 18% 10% round 22px);
    transform: translateY(28px) scale(0.965);
  }

  58% {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0 round 22px);
    transform: translateY(-2px) scale(1.006);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0 round 22px);
    transform: translateY(0) scale(1);
  }
}

@keyframes sealSet {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-12px) scale(1.16) rotate(-8deg);
  }

  68% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(2px) scale(0.98) rotate(2deg);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes lineDraw {
  from {
    opacity: 0;
    transform: scaleX(0.72);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes imageDrift {
  from {
    filter: saturate(1.02) contrast(1.01);
    transform: scale(1);
  }

  to {
    filter: saturate(1.06) contrast(1.02);
    transform: scale(1.035);
  }
}

@keyframes titleLift {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(16px) scale(0.985);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes coverGlyph {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes coverBaseFade {
  0% {
    opacity: 0.28;
  }

  42% {
    opacity: 0.08;
  }

  100% {
    opacity: 0;
  }
}

@keyframes sealBreak {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  44% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.56) rotate(14deg);
  }
}

@keyframes coverTextFade {
  to {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(-8px);
  }
}

@keyframes cueMove {
  0%,
  100% {
    opacity: 0.45;
    transform: translateY(0) rotate(45deg);
  }

  50% {
    opacity: 1;
    transform: translateY(5px) rotate(45deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes goldBreath {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(247, 216, 137, 0));
  }

  50% {
    filter: drop-shadow(0 0 7px rgba(247, 216, 137, 0.2));
  }
}

@media (max-height: 720px) {
  .scene {
    gap: 10px;
    padding-top: calc(var(--safe-top) + 24px);
    padding-bottom: calc(var(--safe-bottom) + 32px);
  }

  .cover-copy {
    top: calc(var(--safe-top) + 42px);
  }

  .cover-copy h1 {
    font-size: clamp(64px, 20vw, 86px);
    gap: 6px;
  }

  .cover-names {
    top: calc(var(--safe-top) + 176px);
  }

  .cover-date {
    bottom: calc(var(--safe-bottom) + 78px);
  }

  .invitation-card {
    min-height: calc(100svh - var(--safe-top) - var(--safe-bottom) - 56px);
    padding-block: 13px;
    gap: 6px;
  }

  .xi-mark {
    font-size: clamp(42px, 13vw, 58px);
  }

  .couple-line {
    font-size: clamp(18px, 4.9vw, 23px);
  }

  .invitation-card h2 {
    font-size: clamp(24px, 7vw, 32px);
  }

  .poem-line,
  .invite-time,
  .invite-closing {
    line-height: 1.28;
  }

  .invite-place {
    padding: 7px 10px;
  }

  .parents {
    font-size: clamp(13px, 3.55vw, 15px);
  }

  .portrait-photo {
    max-height: 58svh;
  }

  .landscape-photo {
    max-height: 46svh;
  }

  .final-small-photo {
    max-height: 34svh;
  }
}

@media (max-width: 360px) {
  .scene {
    padding-left: 22px;
    padding-right: 22px;
  }

  .cover-copy {
    left: 30px;
  }

  .cover-date {
    left: 30px;
    right: 30px;
    gap: 8px;
  }

  .invitation-card {
    padding-inline: 19px;
  }

  .page-dots {
    right: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}