/* ============================================================
 * 视觉体系 2.0 —— 编辑部式排版(Editorial)+ 香槟金
 * 参考顶级婚礼/奢侈品网页的设计语言:
 *   - 衬线大标题 + 意大利斜体英文 Cormorant Garamond
 *   - 大量留白、细线框、纸张颗粒质感
 *   - 深色收尾章节形成节奏对比
 * ============================================================ */
:root {
  /* 由 JS 按当前 WebView / 浏览器容器实时更新，100dvh 是无 JS 兜底。 */
  --page-height: 100dvh;
  --page-width: 100vw;
  --frame-inset: clamp(8px, 2.6vmin, 16px);
  --frame-inner-inset: calc(var(--frame-inset) + 4px);
  --page-pad-x: max(calc(var(--frame-inner-inset) + 12px), env(safe-area-inset-left), env(safe-area-inset-right));
  --page-pad-y: max(calc(var(--frame-inner-inset) + 14px), clamp(24px, 6dvh, 72px));
  --content-width: min(calc(var(--page-width) - var(--page-pad-x) - var(--page-pad-x)), 430px);
  --cream: #f7f2e8;         /* 纸张底色 */
  --cream-deep: #efe7d8;    /* 深一度背景 */
  --ink: #3d352c;           /* 暖咖主文字 */
  --ink-soft: #8d8172;      /* 次级文字 */
  --gold: #ac8a4d;          /* 香槟金 */
  --gold-soft: #d3bf97;
  --gold-line: rgba(172, 138, 77, 0.32);
  --rose: #c65a6e;
  --red: #b93a2e;           /* 囍印章红 */
  --card: #fffcf5;
  --night: #221d16;         /* 结尾深色章节 */
  --night-ink: #ece3d2;
  --shadow: 0 18px 50px rgba(105, 85, 55, 0.12);
  --shadow-soft: 0 8px 26px rgba(105, 85, 55, 0.08);
  --display: "Cormorant Garamond", Georgia, serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 开启后，每个章节占满实际容器并强制逐页吸附。 */
html.invitation-opened {
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
}
html.invitation-opened #page { touch-action: pan-x pinch-zoom; }

/* 请柬开启前固定在封面，避免上滑提前看到详情。 */
html.invitation-locked,
html.invitation-locked body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
html.invitation-locked body {
  position: fixed;
  inset: 0;
}
html.invitation-locked #hero { touch-action: none; }

/* 开启后让封面彻底退场，详情页向上滑也不会回到开启按钮。 */
html.invitation-opened #hero,
html.invitation-opened .marquee,
html.invitation-opened .chapter-nav a[href="#hero"] {
  display: none;
}

body {
  font-family: var(--serif);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 252, 244, 0.9), transparent 60%),
    var(--cream);
  color: var(--ink);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: var(--sans); }

/* 微信分享抓图兜底：保留在 DOM 中，但不参与页面布局与读屏。 */
.wechat-share-cover {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 300px;
  height: 300px;
  opacity: 0;
  pointer-events: none;
}

::selection { background: rgba(172, 138, 77, 0.25); }

/* ------------------------------------------------------------
 * 全局质感层:纸张颗粒 + 细边框画框
 * ------------------------------------------------------------ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page-frame {
  position: fixed;
  top: calc(var(--frame-inset) + env(safe-area-inset-top));
  right: calc(var(--frame-inset) + env(safe-area-inset-right));
  bottom: calc(var(--frame-inset) + env(safe-area-inset-bottom));
  left: calc(var(--frame-inset) + env(safe-area-inset-left));
  z-index: 80;
  pointer-events: none;
  border: 1px solid var(--gold-line);
}
.page-frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(172, 138, 77, 0.14);
}

/* ------------------------------------------------------------
 * 滚动进度金线(顶部)
 * ------------------------------------------------------------ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 95;
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  box-shadow: 0 0 8px rgba(172, 138, 77, 0.5);
}

/* ------------------------------------------------------------
 * 章节导航圆点(右侧)
 * ------------------------------------------------------------ */
.chapter-nav {
  position: fixed;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 85;
  display: flex;
  flex-direction: column;
  gap: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.chapter-nav.show { opacity: 1; pointer-events: auto; }
.chapter-nav a {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(172, 138, 77, 0.35);
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.chapter-nav a.active {
  background: var(--gold);
  transform: scale(1.7);
  box-shadow: 0 0 0 3px rgba(172, 138, 77, 0.18);
}

/* ------------------------------------------------------------
 * 花瓣氛围层
 * ------------------------------------------------------------ */
#petal-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 70;
}

/* ------------------------------------------------------------
 * Loading:袜子追逐战
 * ------------------------------------------------------------ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity 0.85s ease, visibility 0.85s;
}
#loader.done { opacity: 0; visibility: hidden; }

.chase {
  position: relative;
  width: min(94vw, 560px);
  height: 210px;
}

.chase-ground {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 12px;
  border-bottom: 2px dotted rgba(172, 138, 77, 0.55);
}

.chase-boy {
  position: absolute;
  left: 2%;
  bottom: 16px;
  width: 26%;
  animation: chase-forward 2.8s ease-in-out infinite;
}
.chase-boy img {
  width: 100%;
  animation: run-bob 0.42s ease-in-out infinite;
}

.chase-corgi {
  position: absolute;
  left: 37%;
  bottom: 14px;
  width: 27%;
  animation: chase-escape 2.8s ease-in-out infinite;
}
.chase-corgi img {
  width: 100%;
  animation: run-bob-fast 0.3s ease-in-out infinite;
}

.chase-girl {
  position: absolute;
  right: 2%;
  bottom: 14px;
  width: 24%;
}
.chase-girl img {
  width: 100%;
  transform-origin: 50% 100%;
  animation: girl-welcome 1.1s ease-in-out infinite;
}

@keyframes run-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-9px) rotate(2.5deg); }
}
@keyframes run-bob-fast {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-7px) rotate(-3deg); }
}
@keyframes girl-welcome {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.04) rotate(-2.5deg); }
}
@keyframes chase-forward {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(16px); }
}
@keyframes chase-escape {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-14px); }
}

.dust {
  position: absolute;
  bottom: 6px;
  left: -6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(172, 138, 77, 0.45);
  opacity: 0;
  animation: dust-puff 0.65s ease-out infinite;
}
.dust.d-2 { animation-delay: 0.22s; bottom: 14px; }
.dust.d-3 { animation-delay: 0.44s; bottom: 2px; }
@keyframes dust-puff {
  0% { opacity: 0.6; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(-30px, -8px) scale(1.5); }
}

.speedline {
  position: absolute;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(172, 138, 77, 0.55), transparent);
  animation: speed-dash 0.55s linear infinite;
}
.sl-1 { top: 34%; left: 4%; width: 68px; }
.sl-2 { top: 52%; left: 0; width: 52px; animation-delay: 0.18s; }
.sl-3 { top: 24%; left: 30%; width: 58px; animation-delay: 0.32s; }
@keyframes speed-dash {
  0% { transform: translateX(26px); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(-46px); opacity: 0; }
}

.loader-caption {
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--ink-soft);
}
.loader-text {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 7px;
  color: var(--gold);
  padding-left: 7px;
}
.loader-text .dots i {
  font-style: normal;
  animation: dot-blink 1.2s infinite;
}
.loader-text .dots i:nth-child(2) { animation-delay: 0.2s; }
.loader-text .dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-blink { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }

/* ------------------------------------------------------------
 * 音乐按钮
 * ------------------------------------------------------------ */
.music-btn {
  position: fixed;
  top: calc(22px + env(safe-area-inset-top));
  right: 22px;
  z-index: 85;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: rgba(255, 252, 245, 0.82);
  backdrop-filter: blur(8px);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
}
.music-btn[hidden] { display: none; }
.music-btn svg { width: 20px; height: 20px; }

/* 音乐按钮里的迷你黑胶(与播放器弹窗里的唱片同款) */
.mb-disc {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #2b2620 0 1.2px, #383026 1.2px 2.4px);
  box-shadow:
    0 2px 6px rgba(50, 38, 20, 0.35),
    inset 0 0 0 0.5px rgba(211, 191, 151, 0.4);
  animation: spin 5s linear infinite;
  animation-play-state: paused;
}
/* 中心金色小标签 */
.mb-disc::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d3bf97, var(--gold) 70%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 252, 245, 0.5);
}
/* 唱片高光 */
.mb-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 252, 245, 0.22) 50%, transparent 60%);
}
.music-btn.playing .mb-disc { animation-play-state: running; }
.music-btn.paused .mb-disc { opacity: 0.6; }
.music-btn.playing svg { animation: spin 5s linear infinite; }
.music-btn.paused svg { animation: none; opacity: 0.5; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
 * 00 海报封面
 * ------------------------------------------------------------ */
.screen {
  position: relative;
  width: 100%;
  height: var(--page-height);
  min-height: var(--page-height);
  max-height: var(--page-height);
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: max(calc(var(--page-pad-y) + env(safe-area-inset-top)), 48px);
  padding-bottom: max(calc(var(--page-pad-y) + env(safe-area-inset-bottom)), 64px);
}

.hero-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 140vw;
  max-width: 700px;
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(211, 191, 151, 0.42) 0%,
    rgba(211, 191, 151, 0.14) 45%,
    transparent 70%);
  pointer-events: none;
}

.hero-body {
  position: relative;
  z-index: 2;
  width: var(--content-width);
  max-width: 100%;
  text-align: center;
  transform: scale(var(--fit-scale, 1));
  transform-origin: center center;
}

/* 顶部小标语:两侧细线 */
.h-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 6px;
  color: var(--gold);
  margin-bottom: 22px;
}
.h-kicker i {
  display: block;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.h-kicker i:last-child {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}

.h-names {
  font-size: clamp(34px, 10.5vw, 46px);
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 1.25;
}
.h-names .n-char { display: inline-block; }
.h-amp {
  display: inline-block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.72em;
  color: var(--gold);
  margin: 0 12px;
}
.h-names-en {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 5px;
  color: var(--ink-soft);
  margin-top: 10px;
}
.h-names-en em {
  font-style: normal;
  color: var(--rose);
  font-size: 10px;
  margin: 0 10px;
  vertical-align: 1px;
}

/* 插画:拱门相框式构图 */
.hero-figure {
  position: relative;
  width: min(70vw, 320px);
  margin: 26px auto 10px;
  padding: 26px 18px 0;
}
.fig-arch {
  position: absolute;
  inset: 0 6px;
  bottom: 8px;
  border: 1.5px solid var(--gold-line);
  border-radius: 999px 999px 14px 14px;
  pointer-events: none;
}
.fig-arch::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(172, 138, 77, 0.24);
  border-radius: 999px 999px 10px 10px;
}
.hero-figure img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 18px 24px rgba(105, 85, 55, 0.22));
}
.hero-figure::after {
  content: "";
  position: relative;
  z-index: 1;
  display: block;
  width: 62%;
  height: 14px;
  margin: -8px auto 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(105, 85, 55, 0.22), transparent 70%);
}

/* 日期:金色流光扫过 */
.h-date {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 6px;
  margin-top: 14px;
  background: linear-gradient(100deg,
    var(--gold) 30%, #ecd9a9 45%, #fff3d6 50%, #ecd9a9 55%, var(--gold) 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gold-sheen 4.5s ease-in-out infinite;
}
@keyframes gold-sheen {
  0%, 25% { background-position: 110% 0; }
  70%, 100% { background-position: -60% 0; }
}
.h-tagline {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--ink-soft);
  margin-top: 8px;
}

.open-btn {
  margin-top: 28px;
  padding: 14px 50px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(255, 252, 245, 0.72);
  backdrop-filter: blur(4px);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 4px;
  font-family: var(--serif);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 20px rgba(172, 138, 77, 0.16);
}
.open-btn:active { transform: scale(0.96); }
.open-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(172, 138, 77, 0.28), transparent);
  animation: shine 2.8s ease-in-out infinite;
}
@keyframes shine { 60%, 100% { left: 130%; } }

/* 囍印章 */
.h-stamp {
  position: absolute;
  z-index: 3;
  top: calc(26px + env(safe-area-inset-top));
  left: 26px;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(185, 58, 46, 0.75);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(185, 58, 46, 0.85);
  font-size: 26px;
  transform: rotate(-8deg);
}
.h-stamp::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(185, 58, 46, 0.45);
  border-radius: 7px;
}

.scroll-hint {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease;
}
.scroll-hint.show { opacity: 1; }
.scroll-hint span {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: drop 1.8s ease-in-out infinite;
}
@keyframes drop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ------------------------------------------------------------
 * 跑马灯
 * ------------------------------------------------------------ */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  background: var(--cream-deep);
  padding: 11px 0;
}
.marquee-track {
  display: flex;
  gap: 38px;
  width: max-content;
  animation: marquee 26s linear infinite;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--gold);
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------
 * 通用分区:编辑部式章节头
 * ------------------------------------------------------------ */
.scene {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--page-pad-y);
  padding-bottom: var(--page-pad-y);
}
.scene:nth-of-type(even) { background: var(--cream-deep); }

.section-inner {
  width: var(--content-width);
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
  transform: scale(var(--fit-scale, 1));
  transform-origin: center center;
}

.sc-head {
  position: relative;
  margin-bottom: 44px;
  padding-top: 30px;
}
/* 巨大的英文幽灵字,作为章节背景装饰 */
.sc-ghost {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 17vw, 84px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(172, 138, 77, 0.2);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.sc-en {
  position: relative;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 5px;
  color: var(--gold);
  margin-bottom: 10px;
}
.sc-title {
  position: relative;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 10px;
  padding-left: 10px;
}
.sc-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* JS 注入花体线条后,隐藏默认直线 */
.sc-head.has-flourish .sc-title::after { display: none; }
.sc-flourish {
  display: block;
  width: 130px;
  height: 14px;
  margin: 14px auto 0;
  overflow: visible;
}
.sc-flourish path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0.85;
}
.sc-flourish circle { fill: var(--gold); }
.ending .sc-flourish path { stroke: var(--gold-soft); }
.ending .sc-flourish circle { fill: var(--gold-soft); }

/* ------------------------------------------------------------
 * 01 诚挚邀请
 * ------------------------------------------------------------ */
.invite-gallery {
  position: relative;
  width: calc(100% + 24px);
  margin: -18px -12px 56px;
  line-height: 0;
}
.invite-gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
  background: var(--cream-deep);
  box-shadow: var(--shadow-soft);
}
.invite-gallery-track::-webkit-scrollbar { display: none; }
.invite-gallery-slide {
  flex: 0 0 100%;
  aspect-ratio: 1.15 / 1;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow: hidden;
}
.invite-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.invite-gallery-dots {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 99px;
  background: rgba(34, 29, 22, 0.24);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.invite-gallery-dots:empty { display: none; }
.invite-gallery-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: width 0.3s ease, background 0.3s ease;
}
.invite-gallery-dots i.active {
  width: 16px;
  border-radius: 4px;
  background: #fff;
}
#invite .sc-head {
  margin-bottom: 36px;
  padding-top: 0;
}
.invite-text {
  font-size: 16px;
  line-height: 2.5;
  letter-spacing: 2px;
}
.invite-names {
  margin-top: 34px;
  font-size: 19px;
  letter-spacing: 3px;
}
.invite-names em {
  font-style: normal;
  color: var(--gold);
  font-size: 13px;
  margin: 0 12px;
}

/* ------------------------------------------------------------
 * 相册章节 × 3:拼贴网格 / 单图渐变轮播 / 主图 + 胶片条
 * ------------------------------------------------------------ */
.album-note {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--ink-soft);
}

/* A 影棚时光:错落双列网格,一次展示四张 */
.album-collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 12px;
  padding-top: 10px;
}
.album-collage figure {
  margin: 0;
  overflow: hidden;
  line-height: 0;
  border-radius: 4px;
  background: var(--cream-deep);
  box-shadow: var(--shadow-soft);
}
.album-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.album-collage figure:nth-child(1) { aspect-ratio: 3 / 3.9; }
.album-collage figure:nth-child(2) { aspect-ratio: 3 / 3.2; margin-top: 20px; }
.album-collage figure:nth-child(3) { aspect-ratio: 3 / 3.2; margin-top: -20px; }
.album-collage figure:nth-child(4) { aspect-ratio: 3 / 3.9; }

/* B 公路来信:单图淡入淡出轮播 */
.album-fader {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 3.5;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--cream-deep);
  box-shadow: var(--shadow);
}
.album-fader img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.3s ease;
}
.album-fader img.active { opacity: 1; }

/* C 落日山野:大图 + 底部缩略图胶片条 */
.album-film .af-main {
  margin: 0;
  aspect-ratio: 3 / 3.2;
  overflow: hidden;
  line-height: 0;
  border-radius: 4px;
  background: var(--cream-deep);
  box-shadow: var(--shadow);
}
.album-film .af-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.26s ease;
}
.af-strip {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.af-strip button {
  flex: 0 0 auto;
  width: 60px;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
  background: none;
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.af-strip button.active {
  opacity: 1;
  border-color: var(--gold);
  transform: translateY(-3px);
}
.af-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------
 * 02 婚礼信息:船票 / 场刊式信息单
 * ------------------------------------------------------------ */
.info-sheet {
  position: relative;
  background: var(--card);
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 34px 30px 30px;
  text-align: center;
}
.info-sheet::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(172, 138, 77, 0.16);
  border-radius: 2px;
  pointer-events: none;
}

.info-date-big {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 5px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}
.info-date-big::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.info-block {
  padding: 16px 0 14px;
  border-bottom: 1px dashed rgba(172, 138, 77, 0.28);
}
.info-block:last-of-type { border-bottom: none; }
.info-cap {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 5px;
}
.info-main { font-size: 16px; letter-spacing: 1.5px; }
.info-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }

.btn-primary {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 22px;
  padding: 14px 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #c2a468, var(--gold));
  color: #fffcf5;
  font-size: 14px;
  letter-spacing: 3px;
  font-family: var(--serif);
  box-shadow: 0 8px 22px rgba(172, 138, 77, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 3px 10px rgba(172, 138, 77, 0.3);
}

/* 地图选择底部菜单 */
.map-picker {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.map-picker[hidden] { display: none; }
.map-picker-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(34, 29, 22, 0.48);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.map-picker-sheet {
  position: relative;
  width: min(100%, 460px);
  padding: 25px max(24px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  border-radius: 22px 22px 0 0;
  background: var(--card);
  box-shadow: 0 -18px 50px rgba(34, 29, 22, 0.18);
  transform: translateY(105%);
  transition: transform 0.32s cubic-bezier(0.22, 0.75, 0.25, 1);
}
.map-picker.show .map-picker-backdrop { opacity: 1; }
.map-picker.show .map-picker-sheet { transform: translateY(0); }
.map-picker-title {
  font-size: 18px;
  letter-spacing: 2px;
  text-align: center;
}
.map-picker-address {
  margin: 2px 0 18px;
  color: var(--ink-soft);
  font-size: 12px;
  text-align: center;
}
.map-option {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 13px 15px;
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  background: #fffdf8;
}
.map-option-icon {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, #f7d068, #83c86b 44%, #62a7e7 74%, #d47b8e);
  color: white;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
}
.map-option.amap .map-option-icon { background: #2f7ef7; }
.map-option b,
.map-option small { display: block; }
.map-option b { font-size: 15px; font-weight: 500; letter-spacing: 1px; }
.map-option small { margin-top: 1px; color: var(--ink-soft); font-family: var(--sans); font-size: 11px; }
.map-picker-close {
  width: 100%;
  margin-top: 13px;
  padding: 11px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
}

/* 按钮涟漪(JS 生成) */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 250, 235, 0.45);
  transform: scale(0);
  animation: ripple-out 0.65s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-out {
  to { transform: scale(3.2); opacity: 0; }
}

/* 3D 倾斜卡片:开启透视 */
.tilt-wrap { perspective: 700px; }
.info-sheet, .card-form {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ------------------------------------------------------------
 * 03 流程:竖向时间轴
 * ------------------------------------------------------------ */
.schedule-list {
  position: relative;
  text-align: left;
  padding-left: 6px;
}
.sch-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 0 0 30px 26px;
}
.sch-item:last-child { padding-bottom: 0; }
/* 时间轴竖线 */
.sch-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: -4px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-soft), rgba(172, 138, 77, 0.15));
}
.sch-item:last-child::before { display: none; }
/* 时间轴圆点 */
.sch-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 65%);
}
.sch-time {
  flex: none;
  width: 62px;
  font-size: 19px;
  color: var(--gold);
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
}
.sch-title { font-size: 16px; letter-spacing: 2px; }
.sch-desc { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }

/* ------------------------------------------------------------
 * 04 温馨提示
 * ------------------------------------------------------------ */
.tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tip-card {
  background: var(--card);
  border: 1px solid rgba(172, 138, 77, 0.22);
  border-radius: 4px;
  padding: 22px 14px 18px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tip-card:active { transform: translateY(-3px); }
.tip-icon { font-size: 26px; line-height: 1; }
.tip-title {
  font-size: 14px;
  letter-spacing: 3px;
  margin: 12px 0 6px;
  position: relative;
}
.tip-title::after {
  content: "";
  display: block;
  width: 18px;
  height: 1px;
  margin: 8px auto 0;
  background: var(--gold-soft);
}
.tip-text {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-top: 8px;
}

/* ------------------------------------------------------------
 * 05/06 表单
 * ------------------------------------------------------------ */
.card-form {
  position: relative;
  background: var(--card);
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 30px 26px 26px;
  text-align: left;
}
.card-form::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(172, 138, 77, 0.14);
  border-radius: 2px;
  pointer-events: none;
}
.card-form > * { position: relative; }

.seg { display: flex; gap: 10px; margin-bottom: 20px; }
.seg label { flex: 1; }
.seg input { display: none; }
.seg span {
  display: block;
  text-align: center;
  padding: 12px 0;
  border: 1px solid rgba(172, 138, 77, 0.35);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--ink-soft);
  transition: all 0.25s ease;
}
.seg input:checked + span {
  background: linear-gradient(135deg, #c2a468, var(--gold));
  border-color: transparent;
  color: #fffcf5;
  box-shadow: 0 4px 14px rgba(172, 138, 77, 0.3);
}

.field { margin-bottom: 15px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.field label {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(172, 138, 77, 0.3);
  border-radius: 3px;
  background: rgba(247, 242, 232, 0.5);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  resize: none;
}
.field input:focus, .field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(172, 138, 77, 0.12);
}
.field input::placeholder, .field textarea::placeholder { color: #bcb0a0; }

.form-msg {
  min-height: 20px;
  margin-top: 10px;
  font-size: 12.5px;
  text-align: center;
  color: var(--gold);
  letter-spacing: 1px;
}

/* 留言列表 */
.wish-list { margin-top: 28px; text-align: left; }
.wish-item {
  position: relative;
  background: var(--card);
  border: 1px solid rgba(172, 138, 77, 0.2);
  border-radius: 4px;
  padding: 15px 18px 13px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-soft);
}
.wish-item::before {
  content: "“";
  position: absolute;
  top: 2px;
  right: 12px;
  font-family: var(--display);
  font-size: 40px;
  line-height: 1;
  color: rgba(172, 138, 77, 0.18);
}
.wish-item .w-name {
  font-family: var(--display);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 1px;
}
.wish-item .w-text {
  font-size: 13.5px;
  margin-top: 3px;
}
.wish-empty {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: 2px;
}

/* ------------------------------------------------------------
 * 07 结尾:深色夜幕章节
 * ------------------------------------------------------------ */
.scene.ending {
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(172, 138, 77, 0.14), transparent 65%),
    var(--night);
  color: var(--night-ink);
}
.ending .sc-title { color: var(--night-ink); }
.ending .sc-ghost { -webkit-text-stroke-color: rgba(211, 191, 151, 0.22); }
.ending .split-lines span { color: rgba(236, 227, 210, 0.85); }

.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}
.cd-cell {
  width: 66px;
  padding: 14px 0 11px;
  background: rgba(255, 252, 245, 0.04);
  border: 1px solid rgba(211, 191, 151, 0.3);
  border-radius: 4px;
  backdrop-filter: blur(2px);
}
.cd-cell b {
  display: block;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}
.cd-cell span {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  color: rgba(236, 227, 210, 0.55);
  letter-spacing: 2.5px;
}
.cd-sep {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: rgba(211, 191, 151, 0.5);
  padding-bottom: 14px;
}

.ending-text {
  font-size: 15px;
  line-height: 2.4;
  letter-spacing: 2px;
}
.ending-names {
  margin-top: 34px;
  font-size: 23px;
  letter-spacing: 3px;
}
.ending-names b { font-weight: 500; }
.ending-names i {
  font-style: italic;
  font-family: var(--display);
  color: var(--gold-soft);
  margin: 0 14px;
  font-size: 0.8em;
}
.ending-date {
  font-family: var(--display);
  font-size: 12px;
  color: rgba(236, 227, 210, 0.55);
  letter-spacing: 4px;
  margin-top: 10px;
}
/* 结尾章节的萤火光点(JS 生成) */
.ending .fly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ecd9a9;
  box-shadow: 0 0 10px 2px rgba(236, 217, 169, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: fly-float linear infinite;
}
@keyframes fly-float {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.9; }
  75%  { opacity: 0.4; }
  100% { transform: translate(var(--dx, 20px), -130px) scale(1.05); opacity: 0; }
}

.footer-note {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10.5px;
  color: rgba(236, 227, 210, 0.35);
  letter-spacing: 2px;
}

/* ------------------------------------------------------------
 * 动效初始状态(JS 可用时才隐藏,避免无 JS 白屏)
 * ------------------------------------------------------------ */
.js .reveal,
.js .hero-body > *,
.js .h-stamp { opacity: 0; }
.js .split-lines span {
  display: block;
  opacity: 0;
  transform: translateY(16px);
}
.js .screen.is-current .reveal,
.js .screen.is-current .tip-card,
.js .screen.is-current .split-lines span,
.js .screen.is-current .sc-en,
.js .screen.is-current .sc-title,
.js .screen.is-current .sch-item {
  opacity: 1 !important;
  transform: none !important;
}

/* ------------------------------------------------------------
 * 画框四角:烫金花角
 * ------------------------------------------------------------ */
.pf-corner {
  position: absolute;
  width: 17px;
  height: 17px;
  opacity: 0.75;
}
.pf-corner::before, .pf-corner::after {
  content: "";
  position: absolute;
  background: var(--gold);
}
.pf-corner::before { width: 100%; height: 1.5px; }
.pf-corner::after { width: 1.5px; height: 100%; }
.pf-corner.tl { top: -1px; left: -1px; }
.pf-corner.tr { top: -1px; right: -1px; transform: rotate(90deg); }
.pf-corner.br { bottom: -1px; right: -1px; transform: rotate(180deg); }
.pf-corner.bl { bottom: -1px; left: -1px; transform: rotate(270deg); }

/* ------------------------------------------------------------
 * 金箔姓名:渐变 + 流光(逐字)
 * ------------------------------------------------------------ */
.h-names .n-char {
  background: linear-gradient(105deg,
    #8a6a33 25%, var(--gold) 40%, #f0dcae 50%, var(--gold) 60%, #8a6a33 75%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gold-sheen 5s ease-in-out infinite;
}

/* ------------------------------------------------------------
 * 封面柔光光影(light leak)
 * ------------------------------------------------------------ */
.light-leak {
  position: absolute;
  inset: -12%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(42% 30% at 72% 18%, rgba(255, 238, 195, 0.5), transparent 70%),
    radial-gradient(34% 26% at 16% 58%, rgba(255, 228, 188, 0.34), transparent 70%);
  animation: leak-drift 16s ease-in-out infinite alternate;
}
@keyframes leak-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(4%, 3%) rotate(4deg); }
}

/* ------------------------------------------------------------
 * 信息卡竖排点缀文字
 * ------------------------------------------------------------ */
.v-script {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 10.5px;
  letter-spacing: 7px;
  color: var(--gold);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------
 * 中段深色章节(当日流程)· 明暗节奏
 * ------------------------------------------------------------ */
.scene.dark {
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(172, 138, 77, 0.14), transparent 65%),
    var(--night);
  color: var(--night-ink);
}
.scene.dark .sc-title { color: var(--night-ink); }
.scene.dark .sc-ghost { -webkit-text-stroke-color: rgba(211, 191, 151, 0.22); }
.scene.dark .sc-flourish path { stroke: var(--gold-soft); }
.scene.dark .sc-flourish circle { fill: var(--gold-soft); }
.scene.dark .sch-title { color: var(--night-ink); }
.scene.dark .sch-desc { color: rgba(236, 227, 210, 0.58); }
.scene.dark .sch-item::before {
  background: linear-gradient(180deg, rgba(211, 191, 151, 0.6), rgba(211, 191, 151, 0.1));
}

/* 深色章节的巨大囍字暗纹 */
.scene.dark::before, .scene.ending::before {
  content: "囍";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  z-index: 0;
  font-family: var(--serif);
  font-size: min(76vw, 400px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(211, 191, 151, 0.08);
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------
 * 倒计时翻牌
 * ------------------------------------------------------------ */
.cd-cell { perspective: 320px; }
.cd-cell b { backface-visibility: hidden; }
.cd-cell b.tick { animation: cd-flip 0.55s cubic-bezier(0.3, 0.9, 0.4, 1); }
@keyframes cd-flip {
  0% { transform: rotateX(-88deg); opacity: 0.15; }
  100% { transform: rotateX(0); opacity: 1; }
}

/* ------------------------------------------------------------
 * 信息卡按钮排 / 联系新人
 * ------------------------------------------------------------ */
.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-ghost {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 0;
  border: 1px solid rgba(172, 138, 77, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--gold);
  font-size: 12.5px;
  letter-spacing: 2px;
  font-family: var(--serif);
  transition: transform 0.25s ease, background 0.25s ease;
}
.btn-ghost:active { transform: scale(0.96); background: rgba(172, 138, 77, 0.08); }
.contact-row {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 1px;
}
.contact-row a {
  color: var(--gold);
  text-decoration: none;
  margin: 0 9px;
  padding-bottom: 2px;
  border-bottom: 1px dashed rgba(172, 138, 77, 0.5);
}

/* ------------------------------------------------------------
 * 分享按钮 + 微信分享引导蒙层
 * ------------------------------------------------------------ */
.share-btn { top: calc(74px + env(safe-area-inset-top)); }
.share-guide {
  position: fixed;
  inset: 0;
  z-index: 125;
  background: rgba(18, 14, 9, 0.82);
  backdrop-filter: blur(3px);
  animation: sg-in 0.35s ease;
}
.share-guide[hidden] { display: none; }
@keyframes sg-in { from { opacity: 0; } }
.sg-arrow {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 20px;
  width: 58px;
  height: 88px;
  color: #f2e7cf;
  animation: sg-bounce 1.4s ease-in-out infinite;
}
.sg-arrow svg { width: 100%; height: 100%; }
@keyframes sg-bounce { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(0); } }
.sg-body {
  position: absolute;
  top: 150px;
  left: 30px;
  right: 30px;
  text-align: center;
  color: #f2e7cf;
}
.sg-title {
  font-size: 19px;
  letter-spacing: 5px;
  font-weight: 500;
}
.sg-text {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 2.1;
  letter-spacing: 1.5px;
  color: rgba(242, 231, 207, 0.85);
}
.sg-close {
  margin-top: 22px;
  padding: 10px 34px;
  border: 1px solid rgba(242, 231, 207, 0.55);
  border-radius: 999px;
  background: transparent;
  color: #f2e7cf;
  font-size: 12.5px;
  letter-spacing: 3px;
  font-family: var(--serif);
}

/* ------------------------------------------------------------
 * 结尾浅色描边按钮(保存海报)
 * ------------------------------------------------------------ */
.btn-outline-light {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 12px 34px;
  border: 1px solid rgba(211, 191, 151, 0.55);
  border-radius: 999px;
  background: rgba(255, 252, 245, 0.05);
  color: var(--gold-soft);
  font-size: 13px;
  letter-spacing: 3px;
  font-family: var(--serif);
  transition: transform 0.25s ease;
}
.btn-outline-light:active { transform: scale(0.96); }

/* ------------------------------------------------------------
 * 弹层:海报 / 入场券
 * ------------------------------------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }
.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(18, 14, 9, 0.82);
  backdrop-filter: blur(4px);
}
.modal-body {
  position: relative;
  width: min(80vw, 330px);
  text-align: center;
  animation: modal-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes modal-in {
  from { transform: translateY(26px) scale(0.94); opacity: 0; }
}
.poster-body img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.modal-hint {
  margin-top: 15px;
  font-size: 12.5px;
  letter-spacing: 2px;
  color: rgba(242, 231, 207, 0.8);
}
.modal-close {
  position: absolute;
  top: -50px;
  right: -2px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(242, 231, 207, 0.45);
  background: transparent;
  color: #f2e7cf;
  font-size: 19px;
  line-height: 1;
}

/* 电子入场券 */
.ticket {
  position: relative;
  background: var(--card);
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  padding: 32px 22px 30px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* 两侧打孔 */
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: #1f1911;
}
.ticket::before { left: -12px; }
.ticket::after { right: -12px; }
.tk-kicker {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--gold);
}
.tk-guest {
  margin-top: 16px;
  font-size: 23px;
  letter-spacing: 2px;
  color: var(--ink);
}
.tk-guest em {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: 4px;
}
.tk-line {
  display: block;
  width: 76%;
  margin: 18px auto 16px;
  border-bottom: 1px dashed rgba(172, 138, 77, 0.4);
}
.tk-names { font-size: 15.5px; letter-spacing: 2px; }
.tk-names em {
  font-style: italic;
  font-family: var(--display);
  color: var(--gold);
  margin: 0 8px;
  font-size: 0.85em;
}
.tk-info { font-size: 13px; margin-top: 5px; letter-spacing: 1px; }
.tk-venue { color: var(--gold); }
.tk-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.tk-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(185, 58, 46, 0.55);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(185, 58, 46, 0.65);
  font-size: 19px;
  transform: rotate(9deg);
}
/* 入场券弹出后,囍章"啪"地盖上(modal 由 display:none 变可见时动画自动重播) */
#ticket-modal:not([hidden]) .tk-stamp {
  animation: stamp-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.45s backwards;
}
@keyframes stamp-in {
  0%   { opacity: 0; transform: rotate(28deg) scale(2.4); }
  55%  { opacity: 1; transform: rotate(9deg) scale(0.92); }
  78%  { transform: rotate(9deg) scale(1.08); }
  100% { transform: rotate(9deg) scale(1); }
}

/* ------------------------------------------------------------
 * 祝福弹幕(结尾章节)
 * ------------------------------------------------------------ */
.danmaku {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.dm-item {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 252, 245, 0.07);
  border: 1px solid rgba(211, 191, 151, 0.26);
  color: rgba(236, 227, 210, 0.85);
  font-size: 12.5px;
  letter-spacing: 1px;
  animation: dm-move linear infinite;
}
.dm-item b {
  font-weight: 500;
  color: var(--gold-soft);
  margin-right: 7px;
}
@keyframes dm-move {
  to { transform: translateX(calc(-100vw - 110%)); }
}

/* ------------------------------------------------------------
 * 轻提示 Toast
 * ------------------------------------------------------------ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(62px + env(safe-area-inset-bottom));
  z-index: 130;
  transform: translateX(-50%) translateY(14px);
  padding: 11px 24px;
  border-radius: 999px;
  background: rgba(40, 33, 24, 0.92);
  color: #f5ecd9;
  font-size: 13px;
  letter-spacing: 1.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------------
 * 迷你音乐播放器弹窗(从右上角音乐按钮弹出)
 * ------------------------------------------------------------ */
.player-pop {
  position: fixed;
  inset: 0;
  z-index: 110;
}
.player-pop[hidden] { display: none; }
.pp-mask {
  position: absolute;
  inset: 0;
  background: rgba(18, 14, 9, 0.35);
  backdrop-filter: blur(3px);
  animation: pp-mask-in 0.35s ease;
}
@keyframes pp-mask-in { from { opacity: 0; } }

.pp-card {
  position: absolute;
  top: calc(74px + env(safe-area-inset-top));
  right: 18px;
  width: 240px;
  padding: 20px 20px 22px;
  border-radius: 16px;
  border: 1px solid var(--gold-line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 252, 244, 0.95), transparent 70%),
    var(--card);
  box-shadow: 0 24px 60px rgba(60, 45, 25, 0.28);
  text-align: center;
  transform-origin: calc(100% - 25px) -20px;
  animation: pp-in 0.55s cubic-bezier(0.22, 1.4, 0.36, 1);
}
/* 卡片顶部指向音乐按钮的小尖角 */
.pp-card::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 18px;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  background: var(--card);
  border-top: 1px solid var(--gold-line);
  border-left: 1px solid var(--gold-line);
}
@keyframes pp-in {
  from { transform: scale(0.3) translateY(-8px); opacity: 0; }
}
.player-pop.closing .pp-card {
  animation: pp-out 0.28s cubic-bezier(0.5, 0, 0.75, 0.4) forwards;
}
.player-pop.closing .pp-mask { animation: pp-mask-out 0.28s ease forwards; }
@keyframes pp-out {
  to { transform: scale(0.3) translateY(-8px); opacity: 0; }
}
@keyframes pp-mask-out { to { opacity: 0; } }

.pp-close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1;
}
.pp-kicker {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--gold);
}

/* ---------- 黑胶唱片舞台 ---------- */
.pp-stage {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 16px auto 4px;
}
.pp-disc {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 6px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #2b2620 0 2.5px, #383026 2.5px 5px);
  box-shadow:
    0 10px 26px rgba(50, 38, 20, 0.4),
    inset 0 0 0 1px rgba(211, 191, 151, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 6s linear infinite;
  animation-play-state: paused;
}
.player-pop.playing .pp-disc { animation-play-state: running; }
.pp-label {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d3bf97, var(--gold) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 252, 245, 0.45);
}
/* 中心轴孔 */
.pp-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #2b2620;
}
/* 唱片高光扫过 */
.pp-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 38%, rgba(255, 252, 245, 0.14) 50%, transparent 62%);
}
/* 唱臂:播放时摆到唱片上 */
.pp-arm {
  position: absolute;
  top: -4px;
  right: 8px;
  width: 3px;
  height: 52px;
  border-radius: 2px;
  background: linear-gradient(var(--gold), var(--gold-soft));
  transform-origin: 50% 6px;
  transform: rotate(-38deg);
  transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.5, 1);
  box-shadow: 0 2px 6px rgba(60, 45, 25, 0.3);
}
.pp-arm::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
}
.pp-arm::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -2.5px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--ink);
}
.player-pop.playing .pp-arm { transform: rotate(-12deg); }

/* 飘出的音符 */
.pp-note {
  position: absolute;
  left: 50%;
  top: 42%;
  font-size: 13px;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
}
.player-pop.playing .pp-note { animation: pp-note 2.6s ease-out infinite; }
.pp-note.n1 { animation-delay: 0s; }
.pp-note.n2 { animation-delay: 0.9s; font-size: 16px; }
.pp-note.n3 { animation-delay: 1.7s; }
@keyframes pp-note {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.7); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(34px, -64px) rotate(22deg) scale(1.15); }
}

.pp-title {
  margin-top: 10px;
  font-size: 13.5px;
  letter-spacing: 1.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 律动条 */
.pp-eq {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3.5px;
  height: 14px;
  margin-top: 6px;
}
.pp-eq i {
  width: 2.5px;
  height: 4px;
  border-radius: 2px;
  background: var(--gold-soft);
  transition: height 0.3s ease;
}
.player-pop.playing .pp-eq i { animation: pp-eq 0.9s ease-in-out infinite; }
.player-pop.playing .pp-eq i:nth-child(1) { animation-delay: 0s; }
.player-pop.playing .pp-eq i:nth-child(2) { animation-delay: 0.18s; }
.player-pop.playing .pp-eq i:nth-child(3) { animation-delay: 0.36s; }
.player-pop.playing .pp-eq i:nth-child(4) { animation-delay: 0.1s; }
.player-pop.playing .pp-eq i:nth-child(5) { animation-delay: 0.27s; }
@keyframes pp-eq {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

/* ---------- 进度条 ---------- */
.pp-progress {
  position: relative;
  height: 18px;
  margin: 10px 2px 0;
  cursor: pointer;
  touch-action: none;
}
.pp-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: rgba(172, 138, 77, 0.18);
}
.pp-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
}
.pp-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
  border: 2px solid var(--gold);
  box-shadow: 0 1px 5px rgba(60, 45, 25, 0.3);
}
.pp-times {
  display: flex;
  justify-content: space-between;
  margin: 2px 2px 0;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-soft);
}

/* ---------- 播放按钮 ---------- */
.pp-play {
  width: 48px;
  height: 48px;
  margin-top: 12px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, #c4a468, var(--gold));
  color: #fffcf5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(172, 138, 77, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pp-play:active { transform: scale(0.9); }
.pp-play svg { width: 22px; height: 22px; }
.pp-play .ic-pause { display: none; }
.player-pop.playing .pp-play .ic-play { display: none; }
.player-pop.playing .pp-play .ic-pause { display: block; }
/* 播放时按钮呼吸光环 */
.player-pop.playing .pp-play {
  animation: pp-pulse 2s ease-in-out infinite;
}
@keyframes pp-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(172, 138, 77, 0.45), 0 0 0 0 rgba(172, 138, 77, 0.35); }
  50%      { box-shadow: 0 8px 20px rgba(172, 138, 77, 0.45), 0 0 0 9px rgba(172, 138, 77, 0); }
}

@media (max-width: 360px) {
  .pp-card { right: 12px; width: 224px; }
}

/* 低动效偏好:直接展示 */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .hero-body > *, .js .h-stamp, .js .split-lines span {
    opacity: 1 !important;
    transform: none !important;
  }
  #petal-canvas { display: none; }
  .marquee-track { animation: none; }
  .chase img, .chase-boy, .chase-corgi, .dust, .speedline { animation: none !important; }
  .h-date { animation: none; background-position: 50% 0; }
  .h-names .n-char { animation: none; background-position: 50% 0; }
  .light-leak { animation: none; }
  .cd-cell b.tick { animation: none; }
  .dm-item { display: none; }
  .ending .fly { display: none; }
  .ripple { display: none; }
  .pp-disc, .pp-note, .pp-eq i, .pp-play, .mb-disc { animation: none !important; }
  .js .tip-card { opacity: 1 !important; transform: none !important; }
  #ticket-modal:not([hidden]) .tk-stamp { animation: none; }
}

/* ------------------------------------------------------------
 * 视觉版本:婚礼版
 * ------------------------------------------------------------ */
html[data-theme="wedding"] {
  --cream: #fff8f7;
  --cream-deep: #fff0f2;
  --ink: #46343a;
  --ink-soft: #8c6f76;
  --gold: #b88a52;
  --gold-soft: #e8cca2;
  --gold-line: rgba(184, 138, 82, 0.34);
  --rose: #b94763;
  --red: #a93442;
  --card: #fffdfb;
  --night: #4a2630;
  --night-ink: #fff6f2;
  --shadow: 0 24px 58px rgba(146, 78, 95, 0.15);
  --shadow-soft: 0 12px 34px rgba(146, 78, 95, 0.11);
}

html[data-theme="wedding"] body {
  background:
    radial-gradient(95% 58% at 50% 0%, rgba(255, 255, 255, 0.96), transparent 66%),
    radial-gradient(70% 40% at 8% 18%, rgba(255, 210, 218, 0.48), transparent 64%),
    radial-gradient(58% 32% at 92% 24%, rgba(232, 204, 162, 0.32), transparent 68%),
    linear-gradient(180deg, #fffafa 0%, #fff4f5 48%, #fff9f3 100%);
}

html[data-theme="wedding"] body::before,
html[data-theme="wedding"] body::after {
  content: "";
  position: fixed;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

html[data-theme="wedding"] body::before {
  top: 7vh;
  right: -70px;
  width: 180px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 22%, rgba(185, 71, 99, 0.2) 0 18px, transparent 19px),
    radial-gradient(circle at 60% 38%, rgba(232, 204, 162, 0.34) 0 24px, transparent 25px),
    radial-gradient(circle at 42% 62%, rgba(185, 71, 99, 0.18) 0 20px, transparent 21px);
}

html[data-theme="wedding"] body::after {
  left: -88px;
  bottom: 10vh;
  width: 210px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 68% 26%, rgba(184, 138, 82, 0.28) 0 22px, transparent 23px),
    radial-gradient(circle at 44% 52%, rgba(185, 71, 99, 0.18) 0 26px, transparent 27px),
    radial-gradient(circle at 72% 70%, rgba(255, 210, 218, 0.42) 0 28px, transparent 29px);
}

html[data-theme="wedding"] .grain {
  opacity: 0.34;
  mix-blend-mode: soft-light;
}

html[data-theme="wedding"] .page-frame {
  border-color: rgba(184, 138, 82, 0.38);
  border-radius: 28px;
}

html[data-theme="wedding"] .page-frame::before {
  inset: 7px;
  border-style: dotted;
  border-color: rgba(185, 71, 99, 0.22);
  border-radius: 22px;
}

html[data-theme="wedding"] .hero,
html[data-theme="wedding"] .scene {
  overflow: hidden;
}

html[data-theme="wedding"] .hero::before,
html[data-theme="wedding"] .scene::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: 0;
  pointer-events: none;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), transparent 38%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.68), transparent 46%);
  opacity: 0.72;
}

html[data-theme="wedding"] .hero-glow {
  top: 12%;
  width: 120vw;
  background:
    radial-gradient(circle, rgba(255, 213, 221, 0.58) 0%, rgba(255, 213, 221, 0.18) 44%, transparent 70%);
}

html[data-theme="wedding"] .h-kicker {
  color: var(--rose);
  letter-spacing: 4px;
}

html[data-theme="wedding"] .h-kicker i {
  background: linear-gradient(90deg, transparent, rgba(185, 71, 99, 0.7));
}

html[data-theme="wedding"] .h-kicker i:last-child {
  background: linear-gradient(90deg, rgba(185, 71, 99, 0.7), transparent);
}

html[data-theme="wedding"] .h-names {
  color: var(--ink);
  text-shadow: 0 10px 28px rgba(185, 71, 99, 0.12);
}

html[data-theme="wedding"] .h-amp {
  color: var(--rose);
}

html[data-theme="wedding"] .h-names-en em {
  color: var(--gold);
}

html[data-theme="wedding"] .hero-figure {
  width: min(74vw, 330px);
  margin-top: 22px;
  padding: 34px 22px 0;
}

html[data-theme="wedding"] .fig-arch {
  inset: 0 0 12px;
  border-color: rgba(184, 138, 82, 0.48);
  border-radius: 170px 170px 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 244, 245, 0.28)),
    radial-gradient(circle at 22% 16%, rgba(185, 71, 99, 0.16), transparent 18%),
    radial-gradient(circle at 78% 18%, rgba(232, 204, 162, 0.26), transparent 19%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.28);
}

html[data-theme="wedding"] .fig-arch::after {
  inset: 10px;
  border-style: solid;
  border-color: rgba(185, 71, 99, 0.18);
}

html[data-theme="wedding"] .hero-figure::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 56px;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 74%, rgba(185, 71, 99, 0.8) 0 5px, transparent 6px),
    radial-gradient(circle at 22% 54%, rgba(255, 210, 218, 0.95) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 56%, rgba(255, 210, 218, 0.95) 0 8px, transparent 9px),
    radial-gradient(circle at 91% 76%, rgba(185, 71, 99, 0.78) 0 5px, transparent 6px),
    linear-gradient(90deg, transparent, rgba(184, 138, 82, 0.44), transparent);
  border-radius: 999px;
}

html[data-theme="wedding"] .hero-figure img {
  filter: drop-shadow(0 22px 28px rgba(116, 63, 76, 0.24));
}

html[data-theme="wedding"] .h-date {
  background: linear-gradient(100deg, var(--rose) 18%, #e8cca2 48%, #fff4df 52%, var(--rose) 82%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="wedding"] .h-tagline {
  color: var(--ink-soft);
}

html[data-theme="wedding"] .open-btn,
html[data-theme="wedding"] .btn-primary {
  border: 0;
  background: linear-gradient(135deg, #b94763, #d98797 54%, #b88a52);
  color: #fffdfb;
  box-shadow: 0 16px 34px rgba(185, 71, 99, 0.24);
}

html[data-theme="wedding"] .h-stamp {
  color: rgba(169, 52, 66, 0.9);
  border-color: rgba(169, 52, 66, 0.68);
  background: rgba(255, 253, 251, 0.48);
  box-shadow: 0 12px 24px rgba(169, 52, 66, 0.12);
}

html[data-theme="wedding"] .marquee {
  background: rgba(255, 253, 251, 0.62);
  border-color: rgba(185, 71, 99, 0.14);
  color: rgba(70, 52, 58, 0.7);
}

html[data-theme="wedding"] .scene:nth-of-type(even) {
  background:
    radial-gradient(70% 42% at 50% 0%, rgba(255, 255, 255, 0.72), transparent 64%),
    var(--cream-deep);
}

html[data-theme="wedding"] .sc-ghost {
  -webkit-text-stroke-color: rgba(185, 71, 99, 0.16);
}

html[data-theme="wedding"] .sc-en {
  color: var(--rose);
}

html[data-theme="wedding"] .sc-title {
  color: var(--ink);
}

html[data-theme="wedding"] .sc-title::after {
  width: 68px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--gold), transparent);
}

html[data-theme="wedding"] .invite-gallery,
html[data-theme="wedding"] .info-card,
html[data-theme="wedding"] .tip-card,
html[data-theme="wedding"] .card-form,
html[data-theme="wedding"] .wish-list,
html[data-theme="wedding"] .ticket-card {
  background: rgba(255, 253, 251, 0.84);
  border-color: rgba(185, 71, 99, 0.18);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

html[data-theme="wedding"] .invite-gallery {
  border-radius: 168px 168px 20px 20px;
  padding: 10px;
}

html[data-theme="wedding"] .invite-gallery img,
html[data-theme="wedding"] .invite-gallery-slide {
  border-radius: 150px 150px 14px 14px;
}

html[data-theme="wedding"] .invite-text {
  color: var(--ink);
}

html[data-theme="wedding"] .invite-names {
  color: var(--rose);
}

html[data-theme="wedding"] .info-script,
html[data-theme="wedding"] .info-date,
html[data-theme="wedding"] .schedule-time {
  color: var(--rose);
}

html[data-theme="wedding"] .info-card::before,
html[data-theme="wedding"] .card-form::before {
  border-color: rgba(184, 138, 82, 0.24);
}

html[data-theme="wedding"] #schedule {
  background:
    radial-gradient(72% 42% at 50% 0%, rgba(185, 71, 99, 0.32), transparent 66%),
    linear-gradient(180deg, #4a2630 0%, #3c2028 100%);
}

html[data-theme="wedding"] #schedule .sc-en,
html[data-theme="wedding"] #schedule .schedule-time,
html[data-theme="wedding"] .ending .sc-en {
  color: var(--gold-soft);
}

html[data-theme="wedding"] #schedule .sc-ghost,
html[data-theme="wedding"] .ending .sc-ghost {
  -webkit-text-stroke-color: rgba(255, 246, 242, 0.18);
}

html[data-theme="wedding"] #schedule .schedule-item {
  background: rgba(255, 246, 242, 0.08);
  border-color: rgba(232, 204, 162, 0.24);
  box-shadow: 0 16px 34px rgba(28, 15, 19, 0.16);
}

html[data-theme="wedding"] .tip-icon {
  background: rgba(255, 210, 218, 0.5);
  color: var(--rose);
}

html[data-theme="wedding"] input,
html[data-theme="wedding"] textarea {
  background: rgba(255, 248, 247, 0.76);
  border-color: rgba(185, 71, 99, 0.2);
}

html[data-theme="wedding"] .ending {
  background:
    radial-gradient(80% 44% at 50% 0%, rgba(232, 204, 162, 0.24), transparent 65%),
    linear-gradient(180deg, #4a2630 0%, #28191d 100%);
}

html[data-theme="wedding"] .footer-note {
  color: rgba(255, 246, 242, 0.68);
}

/* ------------------------------------------------------------
 * 视觉版本:黑金大片版
 * ------------------------------------------------------------ */
html[data-theme="noir"] {
  --cream: #090907;
  --cream-deep: #12100d;
  --ink: #f1e6cf;
  --ink-soft: rgba(241, 230, 207, 0.62);
  --gold: #c9a25d;
  --gold-soft: #f3db9c;
  --gold-line: rgba(201, 162, 93, 0.36);
  --rose: #d6b06e;
  --red: #9f2f26;
  --card: rgba(18, 15, 11, 0.84);
  --night: #050504;
  --night-ink: #f7ecd5;
  --shadow: 0 30px 76px rgba(0, 0, 0, 0.48);
  --shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.34);
}

html[data-theme="noir"] body {
  background:
    radial-gradient(80% 42% at 50% -6%, rgba(214, 176, 110, 0.2), transparent 64%),
    radial-gradient(70% 42% at 96% 18%, rgba(125, 99, 56, 0.18), transparent 68%),
    radial-gradient(62% 38% at 4% 72%, rgba(255, 255, 255, 0.05), transparent 66%),
    linear-gradient(180deg, #0b0a08 0%, #050504 50%, #11100d 100%);
  color: var(--ink);
}

html[data-theme="noir"] body::before,
html[data-theme="noir"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

html[data-theme="noir"] body::before {
  background:
    linear-gradient(104deg, transparent 0 35%, rgba(255, 232, 175, 0.09) 45%, transparent 58%),
    linear-gradient(16deg, transparent 0 42%, rgba(255, 255, 255, 0.055) 50%, transparent 57%);
  mix-blend-mode: screen;
  opacity: 0.72;
}

html[data-theme="noir"] body::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(201, 162, 93, 0.025) 0 1px, transparent 1px 72px);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  opacity: 0.48;
}

html[data-theme="noir"] #loader {
  background:
    radial-gradient(76% 46% at 50% 34%, rgba(201, 162, 93, 0.2), transparent 68%),
    #080806;
}

html[data-theme="noir"] .grain {
  opacity: 0.58;
  mix-blend-mode: overlay;
}

html[data-theme="noir"] #petal-canvas {
  opacity: 0.5;
  mix-blend-mode: screen;
}

html[data-theme="noir"] .page-frame {
  border-color: rgba(243, 219, 156, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 0 42px rgba(201, 162, 93, 0.08);
}

html[data-theme="noir"] .page-frame::after {
  border-color: rgba(201, 162, 93, 0.16);
}

html[data-theme="noir"] .pf-corner {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(201, 162, 93, 0.42));
}

html[data-theme="noir"] .music-btn {
  background: rgba(12, 10, 8, 0.76);
  border-color: rgba(243, 219, 156, 0.28);
  color: var(--gold-soft);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

html[data-theme="noir"] .hero,
html[data-theme="noir"] .scene {
  overflow: hidden;
}

html[data-theme="noir"] .hero::before,
html[data-theme="noir"] .scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(75% 40% at 50% 4%, rgba(243, 219, 156, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%);
}

html[data-theme="noir"] .hero::after {
  content: "INVITATION";
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: var(--display);
  font-size: min(23vw, 118px);
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.12em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(243, 219, 156, 0.08);
  white-space: nowrap;
}

html[data-theme="noir"] .hero-glow {
  top: 5%;
  width: 118vw;
  background:
    radial-gradient(circle, rgba(243, 219, 156, 0.22) 0%, rgba(201, 162, 93, 0.09) 40%, transparent 70%);
  filter: blur(2px);
}

html[data-theme="noir"] .light-leak {
  background:
    radial-gradient(40% 26% at 78% 12%, rgba(243, 219, 156, 0.24), transparent 70%),
    radial-gradient(28% 20% at 12% 72%, rgba(255, 255, 255, 0.08), transparent 74%);
  mix-blend-mode: screen;
}

html[data-theme="noir"] .h-kicker {
  color: var(--gold-soft);
  letter-spacing: 7px;
}

html[data-theme="noir"] .h-kicker i {
  background: linear-gradient(90deg, transparent, rgba(243, 219, 156, 0.8));
}

html[data-theme="noir"] .h-kicker i:last-child {
  background: linear-gradient(90deg, rgba(243, 219, 156, 0.8), transparent);
}

html[data-theme="noir"] .h-names {
  font-size: clamp(40px, 11.8vw, 54px);
  text-shadow: 0 22px 40px rgba(0, 0, 0, 0.7);
}

html[data-theme="noir"] .h-names .n-char,
html[data-theme="noir"] .h-date {
  background: linear-gradient(100deg, #7d5a22 12%, #c9a25d 38%, #fff0bf 50%, #c9a25d 62%, #6d4d1d 88%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="noir"] .h-amp {
  color: var(--gold-soft);
}

html[data-theme="noir"] .h-names-en {
  color: rgba(241, 230, 207, 0.54);
}

html[data-theme="noir"] .h-names-en em {
  color: var(--gold);
}

html[data-theme="noir"] .hero-figure {
  width: min(76vw, 340px);
  margin-top: 30px;
  padding: 18px 18px 0;
}

html[data-theme="noir"] .fig-arch {
  inset: 0 4px 10px;
  border-color: rgba(243, 219, 156, 0.36);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(201, 162, 93, 0.14), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 24px 68px rgba(0, 0, 0, 0.42);
}

html[data-theme="noir"] .fig-arch::after {
  inset: 10px;
  border-style: solid;
  border-color: rgba(201, 162, 93, 0.2);
  border-radius: 2px;
}

html[data-theme="noir"] .hero-figure img {
  filter:
    drop-shadow(0 28px 34px rgba(0, 0, 0, 0.58))
    saturate(0.82)
    contrast(1.06);
}

html[data-theme="noir"] .hero-figure::after {
  background: radial-gradient(ellipse, rgba(243, 219, 156, 0.24), transparent 70%);
}

html[data-theme="noir"] .h-date {
  letter-spacing: 8px;
  text-shadow: 0 0 28px rgba(201, 162, 93, 0.16);
}

html[data-theme="noir"] .h-tagline {
  color: rgba(241, 230, 207, 0.58);
}

html[data-theme="noir"] .open-btn,
html[data-theme="noir"] .btn-primary {
  border: 1px solid rgba(243, 219, 156, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 238, 188, 0.16), rgba(201, 162, 93, 0.86) 45%, rgba(99, 71, 25, 0.94));
  color: #fff7df;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38), 0 0 24px rgba(201, 162, 93, 0.12);
}

html[data-theme="noir"] .h-stamp {
  color: rgba(243, 219, 156, 0.78);
  border-color: rgba(243, 219, 156, 0.44);
  background: rgba(8, 7, 6, 0.46);
  box-shadow: 0 0 28px rgba(201, 162, 93, 0.1);
  transform: rotate(-4deg);
}

html[data-theme="noir"] .h-stamp::after {
  border-color: rgba(243, 219, 156, 0.2);
}

html[data-theme="noir"] .marquee {
  background: rgba(8, 7, 6, 0.84);
  border-color: rgba(243, 219, 156, 0.2);
}

html[data-theme="noir"] .marquee-track {
  color: var(--gold-soft);
}

html[data-theme="noir"] .scene:nth-of-type(even) {
  background:
    radial-gradient(72% 38% at 50% 0%, rgba(201, 162, 93, 0.11), transparent 68%),
    #0f0d0a;
}

html[data-theme="noir"] .section-inner {
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

html[data-theme="noir"] .sc-ghost {
  -webkit-text-stroke-color: rgba(243, 219, 156, 0.13);
}

html[data-theme="noir"] .sc-en {
  color: var(--gold-soft);
}

html[data-theme="noir"] .sc-title {
  color: var(--ink);
  letter-spacing: 11px;
}

html[data-theme="noir"] .sc-title::after {
  width: 86px;
  background: linear-gradient(90deg, transparent, rgba(243, 219, 156, 0.9), rgba(201, 162, 93, 0.5), transparent);
  box-shadow: 0 0 12px rgba(201, 162, 93, 0.26);
}

html[data-theme="noir"] .sc-flourish path {
  stroke: var(--gold-soft);
}

html[data-theme="noir"] .invite-gallery {
  padding: 8px;
  border: 1px solid rgba(243, 219, 156, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(201, 162, 93, 0.08)),
    rgba(12, 10, 8, 0.76);
  box-shadow: var(--shadow);
}

html[data-theme="noir"] .invite-gallery-track {
  border-radius: 2px;
  background: #050504;
  box-shadow: none;
}

html[data-theme="noir"] .invite-gallery img {
  filter: saturate(0.82) contrast(1.08) brightness(0.84);
}

html[data-theme="noir"] .invite-text,
html[data-theme="noir"] .ending-text {
  color: rgba(247, 236, 213, 0.82);
}

html[data-theme="noir"] .invite-names,
html[data-theme="noir"] .invite-names em {
  color: var(--gold-soft);
}

html[data-theme="noir"] .info-sheet,
html[data-theme="noir"] .tip-card,
html[data-theme="noir"] .card-form,
html[data-theme="noir"] .wish-item,
html[data-theme="noir"] .ticket,
html[data-theme="noir"] .pp-card,
html[data-theme="noir"] .map-picker-sheet {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), transparent 34%),
    rgba(14, 12, 9, 0.82);
  border-color: rgba(243, 219, 156, 0.26);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-theme="noir"] .info-sheet::before,
html[data-theme="noir"] .card-form::before {
  border-color: rgba(243, 219, 156, 0.13);
}

html[data-theme="noir"] .info-date-big,
html[data-theme="noir"] .info-cap,
html[data-theme="noir"] .v-script,
html[data-theme="noir"] .sch-time,
html[data-theme="noir"] .form-msg,
html[data-theme="noir"] .wish-item .w-name,
html[data-theme="noir"] .tk-kicker,
html[data-theme="noir"] .tk-names em,
html[data-theme="noir"] .tk-venue,
html[data-theme="noir"] .pp-kicker {
  color: var(--gold-soft);
}

html[data-theme="noir"] .info-main,
html[data-theme="noir"] .tip-title,
html[data-theme="noir"] .wish-item .w-text,
html[data-theme="noir"] .tk-guest,
html[data-theme="noir"] .tk-names,
html[data-theme="noir"] .tk-info,
html[data-theme="noir"] .pp-title,
html[data-theme="noir"] .map-option,
html[data-theme="noir"] .map-picker-title {
  color: var(--ink);
}

html[data-theme="noir"] .info-sub,
html[data-theme="noir"] .tip-text,
html[data-theme="noir"] .contact-row,
html[data-theme="noir"] .field label,
html[data-theme="noir"] .tk-guest em,
html[data-theme="noir"] .tk-sub,
html[data-theme="noir"] .pp-times,
html[data-theme="noir"] .map-picker-address,
html[data-theme="noir"] .map-option small {
  color: var(--ink-soft);
}

html[data-theme="noir"] .info-block {
  border-bottom-color: rgba(243, 219, 156, 0.2);
}

html[data-theme="noir"] .btn-ghost,
html[data-theme="noir"] .contact-row a {
  border-color: rgba(243, 219, 156, 0.34);
  color: var(--gold-soft);
}

html[data-theme="noir"] .tip-card {
  border-radius: 2px;
}

html[data-theme="noir"] .tip-icon {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(243, 219, 156, 0.1);
  box-shadow: inset 0 0 0 1px rgba(243, 219, 156, 0.2);
}

html[data-theme="noir"] .field input,
html[data-theme="noir"] .field textarea,
html[data-theme="noir"] input,
html[data-theme="noir"] textarea {
  background: rgba(4, 4, 3, 0.46);
  border-color: rgba(243, 219, 156, 0.24);
  color: var(--ink);
}

html[data-theme="noir"] .field input::placeholder,
html[data-theme="noir"] .field textarea::placeholder {
  color: rgba(241, 230, 207, 0.36);
}

html[data-theme="noir"] .seg span {
  border-color: rgba(243, 219, 156, 0.3);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.03);
}

html[data-theme="noir"] .seg input:checked + span {
  background: linear-gradient(135deg, #d9b970, #8f6326);
  color: #fff7df;
}

html[data-theme="noir"] .scene.dark,
html[data-theme="noir"] .ending {
  background:
    radial-gradient(78% 40% at 50% 0%, rgba(243, 219, 156, 0.16), transparent 66%),
    radial-gradient(60% 36% at 50% 100%, rgba(201, 162, 93, 0.1), transparent 70%),
    linear-gradient(180deg, #080706 0%, #030303 100%);
}

html[data-theme="noir"] .scene.dark::before,
html[data-theme="noir"] .scene.ending::before {
  color: transparent;
  -webkit-text-stroke-color: rgba(243, 219, 156, 0.075);
}

html[data-theme="noir"] .scene.dark .sc-title,
html[data-theme="noir"] .ending .sc-title,
html[data-theme="noir"] .scene.dark .sch-title {
  color: var(--night-ink);
}

html[data-theme="noir"] .scene.dark .sc-ghost,
html[data-theme="noir"] .ending .sc-ghost {
  -webkit-text-stroke-color: rgba(243, 219, 156, 0.12);
}

html[data-theme="noir"] .scene.dark .sch-desc,
html[data-theme="noir"] .ending .split-lines span {
  color: rgba(247, 236, 213, 0.66);
}

html[data-theme="noir"] .sch-item::after {
  border-color: var(--gold-soft);
  background: radial-gradient(circle, var(--gold-soft) 0%, rgba(201, 162, 93, 0.12) 66%);
  box-shadow: 0 0 16px rgba(201, 162, 93, 0.36);
}

html[data-theme="noir"] .scene.dark .sch-item::before {
  background: linear-gradient(180deg, rgba(243, 219, 156, 0.7), rgba(243, 219, 156, 0.08));
}

html[data-theme="noir"] .cd-cell,
html[data-theme="noir"] .dm-item {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(243, 219, 156, 0.24);
}

html[data-theme="noir"] .cd-cell b,
html[data-theme="noir"] .ending-names i,
html[data-theme="noir"] .dm-item b,
html[data-theme="noir"] .btn-outline-light {
  color: var(--gold-soft);
}

html[data-theme="noir"] .ending-date,
html[data-theme="noir"] .footer-note {
  color: rgba(247, 236, 213, 0.5);
}

html[data-theme="noir"] .map-option {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(243, 219, 156, 0.2);
}

html[data-theme="noir"] .map-picker-close {
  color: var(--ink-soft);
}

html[data-theme="noir"] .pp-card::before {
  background: #100d0a;
  border-color: rgba(243, 219, 156, 0.24);
}

html[data-theme="noir"] .toast {
  background: rgba(5, 5, 4, 0.92);
  color: #fff1cf;
  border: 1px solid rgba(243, 219, 156, 0.22);
}

/* ------------------------------------------------------------
 * 视觉版本:美式动画童话版
 * ------------------------------------------------------------ */
html[data-theme="storybook"] {
  --cream: #fff6dc;
  --cream-deep: #dff1ff;
  --ink: #21436b;
  --ink-soft: rgba(33, 67, 107, 0.68);
  --gold: #d79a2d;
  --gold-soft: #ffd879;
  --gold-line: rgba(215, 154, 45, 0.42);
  --rose: #e85272;
  --red: #c83e4d;
  --card: rgba(255, 252, 238, 0.9);
  --night: #173766;
  --night-ink: #fff4d1;
  --shadow: 0 24px 56px rgba(35, 82, 135, 0.18);
  --shadow-soft: 0 12px 30px rgba(35, 82, 135, 0.12);
}

html[data-theme="storybook"] body {
  background:
    radial-gradient(80% 42% at 50% -4%, rgba(255, 246, 220, 0.95), transparent 62%),
    radial-gradient(64% 34% at 12% 18%, rgba(255, 143, 163, 0.28), transparent 66%),
    radial-gradient(56% 30% at 90% 24%, rgba(255, 216, 121, 0.34), transparent 64%),
    linear-gradient(180deg, #98d6ff 0%, #fff6dc 47%, #ffe5ea 100%);
  color: var(--ink);
}

html[data-theme="storybook"] body::before,
html[data-theme="storybook"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

html[data-theme="storybook"] body::before {
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255, 255, 255, 0.78) 0 7%, transparent 7.5%),
    radial-gradient(ellipse at 29% 16%, rgba(255, 255, 255, 0.58) 0 5%, transparent 5.5%),
    radial-gradient(ellipse at 82% 24%, rgba(255, 255, 255, 0.7) 0 8%, transparent 8.5%),
    radial-gradient(ellipse at 72% 21%, rgba(255, 255, 255, 0.5) 0 5%, transparent 5.5%);
  opacity: 0.7;
  animation: story-clouds 18s ease-in-out infinite alternate;
}

html[data-theme="storybook"] body::after {
  background:
    linear-gradient(102deg, transparent 0 35%, rgba(255, 244, 209, 0.34) 46%, transparent 57%),
    linear-gradient(78deg, transparent 0 62%, rgba(255, 244, 209, 0.26) 72%, transparent 82%),
    radial-gradient(circle at 22% 34%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 18%, rgba(255, 216, 121, 0.88) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 62%, rgba(255, 255, 255, 0.82) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 72%, rgba(255, 216, 121, 0.8) 0 1px, transparent 2px);
  mix-blend-mode: screen;
  opacity: 0.78;
}

@keyframes story-clouds {
  from { transform: translate3d(-10px, 0, 0); }
  to { transform: translate3d(14px, -8px, 0); }
}

html[data-theme="storybook"] #loader {
  background:
    radial-gradient(70% 42% at 50% 26%, rgba(255, 216, 121, 0.38), transparent 68%),
    linear-gradient(180deg, #98d6ff 0%, #fff6dc 100%);
}

html[data-theme="storybook"] .grain {
  opacity: 0.28;
  mix-blend-mode: soft-light;
}

html[data-theme="storybook"] #petal-canvas {
  opacity: 0.58;
  mix-blend-mode: screen;
}

html[data-theme="storybook"] .page-frame {
  border: 2px solid rgba(255, 216, 121, 0.75);
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.25),
    0 0 28px rgba(255, 216, 121, 0.18);
}

html[data-theme="storybook"] .page-frame::after {
  inset: 7px;
  border: 1px dashed rgba(33, 67, 107, 0.22);
  border-radius: 16px;
}

html[data-theme="storybook"] .pf-corner {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 216, 121, 0.62));
}

html[data-theme="storybook"] .music-btn {
  background: rgba(255, 252, 238, 0.78);
  border-color: rgba(33, 67, 107, 0.16);
  color: var(--rose);
  box-shadow: 0 12px 28px rgba(35, 82, 135, 0.16);
}

html[data-theme="storybook"] .hero,
html[data-theme="storybook"] .scene {
  overflow: hidden;
}

html[data-theme="storybook"] .hero::before,
html[data-theme="storybook"] .scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 30% at 50% 0%, rgba(255, 252, 238, 0.88), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 42%);
}

html[data-theme="storybook"] .hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6.5%;
  z-index: 0;
  width: min(112vw, 560px);
  height: 130px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.25;
  background:
    linear-gradient(180deg, transparent 0 40%, #21436b 41% 100%),
    radial-gradient(circle at 17% 40%, #21436b 0 18px, transparent 19px),
    radial-gradient(circle at 31% 24%, #21436b 0 25px, transparent 26px),
    radial-gradient(circle at 50% 8%, #21436b 0 34px, transparent 35px),
    radial-gradient(circle at 69% 24%, #21436b 0 25px, transparent 26px),
    radial-gradient(circle at 83% 40%, #21436b 0 18px, transparent 19px);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 92%, transparent);
}

html[data-theme="storybook"] .hero-glow {
  top: 7%;
  width: 122vw;
  background:
    radial-gradient(circle, rgba(255, 216, 121, 0.54) 0%, rgba(255, 143, 163, 0.2) 42%, transparent 70%);
}

html[data-theme="storybook"] .light-leak {
  background:
    radial-gradient(38% 22% at 74% 12%, rgba(255, 244, 209, 0.56), transparent 70%),
    radial-gradient(28% 18% at 16% 76%, rgba(255, 143, 163, 0.24), transparent 74%);
  mix-blend-mode: screen;
}

html[data-theme="storybook"] .h-kicker {
  color: var(--rose);
  letter-spacing: 4px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="storybook"] .h-kicker i {
  background: linear-gradient(90deg, transparent, rgba(232, 82, 114, 0.76));
}

html[data-theme="storybook"] .h-kicker i:last-child {
  background: linear-gradient(90deg, rgba(232, 82, 114, 0.76), transparent);
}

html[data-theme="storybook"] .h-names {
  font-size: clamp(40px, 12vw, 56px);
  color: #21436b;
  text-shadow:
    0 2px 0 rgba(255, 252, 238, 0.9),
    0 7px 0 rgba(215, 154, 45, 0.54),
    0 20px 34px rgba(35, 82, 135, 0.2);
}

html[data-theme="storybook"] .h-amp {
  color: var(--gold);
  text-shadow:
    0 2px 0 rgba(255, 252, 238, 0.86),
    0 8px 18px rgba(35, 82, 135, 0.16);
}

html[data-theme="storybook"] .h-names-en {
  color: rgba(33, 67, 107, 0.74);
}

html[data-theme="storybook"] .h-names-en em {
  color: var(--rose);
}

html[data-theme="storybook"] .hero-figure {
  width: min(78vw, 350px);
  margin-top: 28px;
  padding: 26px 20px 0;
}

html[data-theme="storybook"] .fig-arch {
  inset: 0 0 10px;
  border: 2px solid rgba(255, 216, 121, 0.78);
  border-radius: 32px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.9) 0 12px, transparent 13px),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.78) 0 15px, transparent 16px),
    linear-gradient(180deg, rgba(142, 201, 255, 0.58), rgba(255, 246, 220, 0.3));
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, 0.22),
    0 20px 42px rgba(35, 82, 135, 0.14);
}

html[data-theme="storybook"] .fig-arch::after {
  inset: 10px;
  border-style: dashed;
  border-color: rgba(33, 67, 107, 0.22);
  border-radius: 24px;
}

html[data-theme="storybook"] .hero-figure::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 14px;
  height: 34px;
  z-index: 2;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(circle at 9% 50%, #ffd879 0 4px, transparent 5px),
    radial-gradient(circle at 24% 50%, #ffd879 0 4px, transparent 5px),
    radial-gradient(circle at 39% 50%, #ffd879 0 4px, transparent 5px),
    radial-gradient(circle at 61% 50%, #ffd879 0 4px, transparent 5px),
    radial-gradient(circle at 76% 50%, #ffd879 0 4px, transparent 5px),
    radial-gradient(circle at 91% 50%, #ffd879 0 4px, transparent 5px),
    linear-gradient(90deg, rgba(33, 67, 107, 0.08), rgba(232, 82, 114, 0.18), rgba(33, 67, 107, 0.08));
  box-shadow: 0 0 18px rgba(255, 216, 121, 0.4);
}

html[data-theme="storybook"] .hero-figure img {
  filter:
    drop-shadow(0 22px 22px rgba(35, 82, 135, 0.2))
    saturate(1.08);
}

html[data-theme="storybook"] .hero-figure::after {
  background: radial-gradient(ellipse, rgba(35, 82, 135, 0.18), transparent 70%);
}

html[data-theme="storybook"] .h-date {
  letter-spacing: 7px;
  background: linear-gradient(100deg, #b87418 15%, #ffd879 38%, #fff9d8 50%, #ffd879 62%, #b87418 86%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 8px 18px rgba(35, 82, 135, 0.1);
}

html[data-theme="storybook"] .h-tagline {
  color: var(--ink-soft);
}

html[data-theme="storybook"] .open-btn,
html[data-theme="storybook"] .btn-primary {
  border: 1px solid rgba(33, 67, 107, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 48%),
    linear-gradient(135deg, #e85272, #ff8fa3 46%, #d79a2d);
  color: #fffdf2;
  box-shadow:
    0 6px 0 rgba(158, 78, 32, 0.22),
    0 18px 34px rgba(232, 82, 114, 0.24);
}

html[data-theme="storybook"] .h-stamp {
  color: #fffdf2;
  border-color: rgba(255, 246, 220, 0.8);
  background: linear-gradient(135deg, #c83e4d, #e85272);
  box-shadow: 0 12px 26px rgba(200, 62, 77, 0.22);
  transform: rotate(-7deg);
}

html[data-theme="storybook"] .h-stamp::after {
  border-color: rgba(255, 246, 220, 0.35);
}

html[data-theme="storybook"] .marquee {
  background: rgba(255, 252, 238, 0.82);
  border-color: rgba(33, 67, 107, 0.12);
  box-shadow: 0 -10px 24px rgba(35, 82, 135, 0.08);
}

html[data-theme="storybook"] .marquee-track {
  color: var(--ink);
}

html[data-theme="storybook"] .scene:nth-of-type(even) {
  background:
    radial-gradient(76% 38% at 50% 0%, rgba(255, 216, 121, 0.35), transparent 68%),
    linear-gradient(180deg, #e7f5ff 0%, #fff6dc 100%);
}

html[data-theme="storybook"] .sc-ghost {
  -webkit-text-stroke-color: rgba(33, 67, 107, 0.12);
}

html[data-theme="storybook"] .sc-en {
  color: var(--rose);
}

html[data-theme="storybook"] .sc-title {
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme="storybook"] .sc-title::after {
  width: 92px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--gold-soft), var(--rose), transparent);
  box-shadow: 0 0 12px rgba(255, 216, 121, 0.56);
}

html[data-theme="storybook"] .sc-flourish path {
  stroke: var(--rose);
}

html[data-theme="storybook"] .sc-flourish circle {
  fill: var(--gold);
}

html[data-theme="storybook"] .invite-gallery,
html[data-theme="storybook"] .info-sheet,
html[data-theme="storybook"] .tip-card,
html[data-theme="storybook"] .card-form,
html[data-theme="storybook"] .wish-item,
html[data-theme="storybook"] .ticket,
html[data-theme="storybook"] .pp-card,
html[data-theme="storybook"] .map-picker-sheet {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 44%),
    var(--card);
  border: 2px solid rgba(215, 154, 45, 0.34);
  box-shadow:
    0 6px 0 rgba(33, 67, 107, 0.08),
    var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme="storybook"] .invite-gallery {
  padding: 10px;
  border-radius: 26px;
  transform: rotate(-1.2deg);
}

html[data-theme="storybook"] .invite-gallery-track,
html[data-theme="storybook"] .invite-gallery img,
html[data-theme="storybook"] .invite-gallery-slide {
  border-radius: 18px;
}

html[data-theme="storybook"] .invite-gallery img {
  filter: saturate(1.08) contrast(1.02);
}

html[data-theme="storybook"] .invite-text,
html[data-theme="storybook"] .ending-text {
  color: var(--ink);
}

html[data-theme="storybook"] .invite-names,
html[data-theme="storybook"] .invite-names em {
  color: var(--rose);
}

html[data-theme="storybook"] .info-sheet {
  border-radius: 24px;
}

html[data-theme="storybook"] .info-sheet::before,
html[data-theme="storybook"] .card-form::before {
  inset: 9px;
  border-style: dashed;
  border-color: rgba(33, 67, 107, 0.16);
  border-radius: 17px;
}

html[data-theme="storybook"] .info-date-big,
html[data-theme="storybook"] .info-cap,
html[data-theme="storybook"] .v-script,
html[data-theme="storybook"] .sch-time,
html[data-theme="storybook"] .form-msg,
html[data-theme="storybook"] .wish-item .w-name,
html[data-theme="storybook"] .tk-kicker,
html[data-theme="storybook"] .tk-names em,
html[data-theme="storybook"] .tk-venue,
html[data-theme="storybook"] .pp-kicker {
  color: var(--rose);
}

html[data-theme="storybook"] .info-main,
html[data-theme="storybook"] .tip-title,
html[data-theme="storybook"] .wish-item .w-text,
html[data-theme="storybook"] .tk-guest,
html[data-theme="storybook"] .tk-names,
html[data-theme="storybook"] .tk-info,
html[data-theme="storybook"] .pp-title,
html[data-theme="storybook"] .map-option,
html[data-theme="storybook"] .map-picker-title {
  color: var(--ink);
}

html[data-theme="storybook"] .info-sub,
html[data-theme="storybook"] .tip-text,
html[data-theme="storybook"] .contact-row,
html[data-theme="storybook"] .field label,
html[data-theme="storybook"] .tk-guest em,
html[data-theme="storybook"] .tk-sub,
html[data-theme="storybook"] .pp-times,
html[data-theme="storybook"] .map-picker-address,
html[data-theme="storybook"] .map-option small {
  color: var(--ink-soft);
}

html[data-theme="storybook"] .info-block {
  border-bottom-color: rgba(33, 67, 107, 0.14);
}

html[data-theme="storybook"] .btn-ghost,
html[data-theme="storybook"] .contact-row a {
  border-color: rgba(33, 67, 107, 0.18);
  background: rgba(255, 255, 255, 0.24);
  color: var(--rose);
}

html[data-theme="storybook"] .scene.dark,
html[data-theme="storybook"] .ending {
  background:
    radial-gradient(80% 42% at 50% 0%, rgba(255, 216, 121, 0.28), transparent 66%),
    radial-gradient(60% 34% at 50% 100%, rgba(232, 82, 114, 0.16), transparent 70%),
    linear-gradient(180deg, #1f5792 0%, #173766 100%);
}

html[data-theme="storybook"] .scene.dark::before,
html[data-theme="storybook"] .scene.ending::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 44%),
    radial-gradient(circle at 28% 18%, rgba(255, 216, 121, 0.32), transparent 18%),
    radial-gradient(circle at 74% 72%, rgba(255, 143, 163, 0.2), transparent 22%);
}

html[data-theme="storybook"] .scene.dark .sc-title,
html[data-theme="storybook"] .ending .sc-title,
html[data-theme="storybook"] .scene.dark .sch-title {
  color: var(--night-ink);
  text-shadow: 0 3px 0 rgba(20, 50, 94, 0.78);
}

html[data-theme="storybook"] .scene.dark .sc-en,
html[data-theme="storybook"] .ending .sc-en,
html[data-theme="storybook"] .scene.dark .sch-time {
  color: var(--gold-soft);
}

html[data-theme="storybook"] .scene.dark .sc-ghost,
html[data-theme="storybook"] .ending .sc-ghost {
  -webkit-text-stroke-color: rgba(255, 244, 209, 0.14);
}

html[data-theme="storybook"] .scene.dark .sch-desc,
html[data-theme="storybook"] .ending .split-lines span {
  color: rgba(255, 244, 209, 0.78);
}

html[data-theme="storybook"] .sch-item {
  padding-left: 30px;
}

html[data-theme="storybook"] .sch-item::before {
  left: 5px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 216, 121, 0.86), rgba(255, 216, 121, 0.12));
}

html[data-theme="storybook"] .sch-item::after {
  left: 0;
  width: 12px;
  height: 12px;
  border-color: var(--gold-soft);
  background: radial-gradient(circle, #fff9d8 0 34%, var(--gold-soft) 35% 66%, rgba(255, 216, 121, 0.16) 67%);
  box-shadow: 0 0 15px rgba(255, 216, 121, 0.46);
}

html[data-theme="storybook"] .tip-card {
  border-radius: 22px;
  transform: rotate(-0.8deg);
}

html[data-theme="storybook"] .tip-card:nth-child(even) {
  transform: rotate(0.8deg);
}

html[data-theme="storybook"] .tip-icon {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 216, 121, 0.7), rgba(255, 143, 163, 0.36));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

html[data-theme="storybook"] .field input,
html[data-theme="storybook"] .field textarea,
html[data-theme="storybook"] input,
html[data-theme="storybook"] textarea {
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(33, 67, 107, 0.18);
  color: var(--ink);
}

html[data-theme="storybook"] .field input::placeholder,
html[data-theme="storybook"] .field textarea::placeholder {
  color: rgba(33, 67, 107, 0.38);
}

html[data-theme="storybook"] .seg span {
  border-color: rgba(33, 67, 107, 0.18);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.38);
}

html[data-theme="storybook"] .seg input:checked + span {
  background: linear-gradient(135deg, #e85272, #ff8fa3);
  color: #fffdf2;
  box-shadow: 0 8px 16px rgba(232, 82, 114, 0.18);
}

html[data-theme="storybook"] .cd-cell,
html[data-theme="storybook"] .dm-item {
  background: rgba(255, 252, 238, 0.08);
  border-color: rgba(255, 216, 121, 0.34);
  border-radius: 16px;
}

html[data-theme="storybook"] .cd-cell b,
html[data-theme="storybook"] .ending-names i,
html[data-theme="storybook"] .dm-item b,
html[data-theme="storybook"] .btn-outline-light {
  color: var(--gold-soft);
}

html[data-theme="storybook"] .ending-date,
html[data-theme="storybook"] .footer-note {
  color: rgba(255, 244, 209, 0.58);
}

html[data-theme="storybook"] .map-option {
  background: rgba(255, 255, 255, 0.36);
  border-color: rgba(33, 67, 107, 0.12);
}

html[data-theme="storybook"] .map-picker-close {
  color: var(--ink-soft);
}

html[data-theme="storybook"] .pp-card {
  border-radius: 24px;
}

html[data-theme="storybook"] .pp-card::before {
  background: rgba(255, 252, 238, 0.92);
  border-color: rgba(215, 154, 45, 0.28);
  border-radius: 18px;
}

html[data-theme="storybook"] .toast {
  background: rgba(33, 67, 107, 0.92);
  color: #fff6dc;
  border: 1px solid rgba(255, 216, 121, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="storybook"] body::before {
    animation: none;
  }
}

/* ------------------------------------------------------------
 * 视觉版本:绒幕礼成版
 * ------------------------------------------------------------ */
html[data-theme="velvet"] {
  --cream: #120607;
  --cream-deep: #1b090b;
  --ink: #f8ead1;
  --ink-soft: rgba(248, 234, 209, 0.64);
  --gold: #c99a4d;
  --gold-soft: #f4d996;
  --gold-line: rgba(244, 217, 150, 0.34);
  --rose: #b71f2d;
  --red: #8f1620;
  --card: rgba(23, 8, 9, 0.84);
  --night: #080304;
  --night-ink: #fff3d4;
  --shadow: 0 34px 90px rgba(0, 0, 0, 0.56);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.38);
}

html[data-theme="velvet"] body {
  background:
    radial-gradient(86% 44% at 50% -8%, rgba(244, 217, 150, 0.2), transparent 66%),
    radial-gradient(82% 52% at 12% 24%, rgba(183, 31, 45, 0.22), transparent 70%),
    radial-gradient(72% 46% at 100% 64%, rgba(118, 9, 16, 0.34), transparent 68%),
    linear-gradient(180deg, #150607 0%, #070203 54%, #1a090a 100%);
  color: var(--ink);
}

html[data-theme="velvet"] body::before,
html[data-theme="velvet"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

html[data-theme="velvet"] body::before {
  inset: -14vh -34vw;
  background:
    linear-gradient(116deg, transparent 0 25%, rgba(105, 8, 14, 0.08) 28%, transparent 34%),
    linear-gradient(106deg, transparent 0 34%, rgba(201, 38, 52, 0.42) 44%, rgba(78, 3, 7, 0.52) 54%, transparent 66%),
    linear-gradient(102deg, transparent 0 56%, rgba(244, 217, 150, 0.13) 58%, transparent 64%),
    repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 24px);
  filter: blur(0.2px);
  opacity: 0.78;
  transform: rotate(-8deg);
  mix-blend-mode: screen;
  animation: velvet-ribbon 18s ease-in-out infinite alternate;
}

html[data-theme="velvet"] body::after {
  background:
    radial-gradient(circle at 22% 18%, rgba(244, 217, 150, 0.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 24%, rgba(244, 217, 150, 0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 76%, rgba(255, 246, 223, 0.62) 0 1px, transparent 1.7px),
    radial-gradient(circle at 34% 68%, rgba(183, 31, 45, 0.72) 0 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(244, 217, 150, 0.025) 0 1px, transparent 1px 58px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.34));
  opacity: 0.56;
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}

@keyframes velvet-ribbon {
  from { transform: rotate(-8deg) translate3d(-18px, 0, 0); }
  to { transform: rotate(-6deg) translate3d(20px, -10px, 0); }
}

html[data-theme="velvet"] #loader {
  background:
    radial-gradient(74% 42% at 50% 34%, rgba(244, 217, 150, 0.2), transparent 68%),
    radial-gradient(80% 50% at 50% 88%, rgba(143, 22, 32, 0.26), transparent 72%),
    #0b0304;
}

html[data-theme="velvet"] .loader-caption,
html[data-theme="velvet"] .loader-text {
  color: var(--gold-soft);
}

html[data-theme="velvet"] .grain {
  opacity: 0.64;
  mix-blend-mode: overlay;
}

html[data-theme="velvet"] #petal-canvas {
  opacity: 0.48;
  mix-blend-mode: screen;
}

html[data-theme="velvet"] .page-frame {
  border-color: rgba(244, 217, 150, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(183, 31, 45, 0.22),
    0 0 48px rgba(183, 31, 45, 0.16);
}

html[data-theme="velvet"] .page-frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(183, 31, 45, 0.2);
}

html[data-theme="velvet"] .page-frame::after {
  inset: 4px;
  border-color: rgba(244, 217, 150, 0.14);
}

html[data-theme="velvet"] .pf-corner {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(244, 217, 150, 0.44));
}

html[data-theme="velvet"] .music-btn {
  background: rgba(16, 4, 5, 0.78);
  border-color: rgba(244, 217, 150, 0.3);
  color: var(--gold-soft);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.44), 0 0 20px rgba(183, 31, 45, 0.12);
}

html[data-theme="velvet"] .hero,
html[data-theme="velvet"] .scene {
  overflow: hidden;
  isolation: isolate;
}

html[data-theme="velvet"] .hero::before,
html[data-theme="velvet"] .scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 32%, rgba(255, 236, 187, 0.08) 43%, transparent 54%),
    radial-gradient(78% 34% at 50% 0%, rgba(244, 217, 150, 0.13), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 36%);
}

html[data-theme="velvet"] .hero::after {
  content: "VELVET CEREMONY";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: var(--display);
  font-size: min(21vw, 104px);
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.18em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 217, 150, 0.08);
  white-space: nowrap;
}

html[data-theme="velvet"] .hero-glow {
  top: 2%;
  width: 124vw;
  background:
    radial-gradient(circle, rgba(244, 217, 150, 0.2) 0%, rgba(183, 31, 45, 0.14) 42%, transparent 70%);
  filter: blur(2px);
}

html[data-theme="velvet"] .light-leak {
  background:
    linear-gradient(112deg, transparent 0 36%, rgba(255, 237, 190, 0.22) 46%, transparent 58%),
    radial-gradient(34% 22% at 82% 12%, rgba(244, 217, 150, 0.22), transparent 72%),
    radial-gradient(32% 20% at 18% 76%, rgba(183, 31, 45, 0.24), transparent 76%);
  mix-blend-mode: screen;
}

html[data-theme="velvet"] .hero-body::before {
  content: "NO. 0912  /  ADMIT TO CEREMONY";
  position: absolute;
  right: -44px;
  top: 148px;
  z-index: -1;
  transform: rotate(90deg);
  transform-origin: 100% 50%;
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(244, 217, 150, 0.22);
  white-space: nowrap;
}

html[data-theme="velvet"] .h-kicker {
  color: var(--gold-soft);
  letter-spacing: 7px;
}

html[data-theme="velvet"] .h-kicker i {
  background: linear-gradient(90deg, transparent, rgba(244, 217, 150, 0.92), rgba(183, 31, 45, 0.66));
}

html[data-theme="velvet"] .h-kicker i:last-child {
  background: linear-gradient(90deg, rgba(183, 31, 45, 0.66), rgba(244, 217, 150, 0.92), transparent);
}

html[data-theme="velvet"] .h-names {
  font-size: clamp(42px, 12.6vw, 58px);
  letter-spacing: 8px;
  text-shadow:
    0 22px 42px rgba(0, 0, 0, 0.78),
    0 0 24px rgba(183, 31, 45, 0.18);
}

html[data-theme="velvet"] .h-names .n-char,
html[data-theme="velvet"] .h-date {
  background: linear-gradient(100deg, #6d1418 8%, #c99a4d 34%, #fff1bd 50%, #d7aa5c 64%, #7c121b 92%);
  background-size: 310% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="velvet"] .h-amp {
  color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(244, 217, 150, 0.24);
}

html[data-theme="velvet"] .h-names-en {
  color: rgba(248, 234, 209, 0.56);
}

html[data-theme="velvet"] .h-names-en em {
  color: #df3945;
}

html[data-theme="velvet"] .hero-figure {
  width: min(78vw, 348px);
  margin-top: 28px;
  padding: 18px 18px 0;
}

html[data-theme="velvet"] .fig-arch {
  inset: 0 2px 12px;
  border: 1px solid rgba(244, 217, 150, 0.36);
  border-radius: 12px 120px 12px 120px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 36%),
    linear-gradient(160deg, rgba(143, 22, 32, 0.45), rgba(12, 3, 4, 0.72) 58%, rgba(244, 217, 150, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 213, 0.06),
    0 28px 74px rgba(0, 0, 0, 0.5);
}

html[data-theme="velvet"] .fig-arch::after {
  inset: 10px;
  border-style: solid;
  border-color: rgba(244, 217, 150, 0.18);
  border-radius: 8px 104px 8px 104px;
}

html[data-theme="velvet"] .hero-figure::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 42%;
  height: 52px;
  z-index: 2;
  pointer-events: none;
  transform: rotate(-8deg);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(90deg, rgba(88, 5, 10, 0.28), rgba(191, 31, 45, 0.76) 36%, rgba(122, 9, 17, 0.88) 66%, rgba(255, 219, 148, 0.12));
  box-shadow:
    inset 0 -12px 22px rgba(58, 2, 5, 0.32),
    0 12px 30px rgba(91, 4, 9, 0.26);
  opacity: 0.74;
}

html[data-theme="velvet"] .hero-figure img {
  filter:
    drop-shadow(0 30px 36px rgba(0, 0, 0, 0.64))
    saturate(0.92)
    contrast(1.08);
}

html[data-theme="velvet"] .hero-figure::after {
  background: radial-gradient(ellipse, rgba(244, 217, 150, 0.18), transparent 70%);
}

html[data-theme="velvet"] .h-date {
  letter-spacing: 9px;
  text-shadow: 0 0 26px rgba(244, 217, 150, 0.16);
}

html[data-theme="velvet"] .h-tagline {
  color: rgba(248, 234, 209, 0.64);
}

html[data-theme="velvet"] .open-btn,
html[data-theme="velvet"] .btn-primary {
  border: 1px solid rgba(244, 217, 150, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 247, 218, 0.14), transparent 48%),
    linear-gradient(135deg, #781019, #b71f2d 50%, #c99a4d);
  color: #fff5d9;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(183, 31, 45, 0.18);
}

html[data-theme="velvet"] .h-stamp {
  color: rgba(255, 237, 206, 0.9);
  border-color: rgba(244, 217, 150, 0.52);
  background:
    linear-gradient(135deg, rgba(183, 31, 45, 0.72), rgba(64, 4, 8, 0.62));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34), 0 0 24px rgba(183, 31, 45, 0.22);
  transform: rotate(-10deg);
}

html[data-theme="velvet"] .h-stamp::after {
  border-color: rgba(255, 237, 206, 0.28);
}

html[data-theme="velvet"] .marquee {
  background: rgba(10, 3, 4, 0.86);
  border-color: rgba(244, 217, 150, 0.18);
  box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.22);
}

html[data-theme="velvet"] .marquee-track {
  color: var(--gold-soft);
}

html[data-theme="velvet"] .scene:nth-of-type(even) {
  background:
    radial-gradient(76% 40% at 50% 0%, rgba(183, 31, 45, 0.18), transparent 68%),
    linear-gradient(180deg, #150708 0%, #090303 100%);
}

html[data-theme="velvet"] .section-inner {
  text-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}

html[data-theme="velvet"] .sc-ghost {
  -webkit-text-stroke-color: rgba(244, 217, 150, 0.12);
}

html[data-theme="velvet"] .sc-en {
  color: var(--gold-soft);
}

html[data-theme="velvet"] .sc-title {
  color: var(--ink);
  letter-spacing: 12px;
}

html[data-theme="velvet"] .sc-title::after {
  width: 92px;
  background: linear-gradient(90deg, transparent, rgba(183, 31, 45, 0.9), var(--gold-soft), rgba(183, 31, 45, 0.9), transparent);
  box-shadow: 0 0 14px rgba(244, 217, 150, 0.26);
}

html[data-theme="velvet"] .sc-flourish path {
  stroke: var(--gold-soft);
}

html[data-theme="velvet"] .sc-flourish circle {
  fill: #d53a45;
}

html[data-theme="velvet"] .invite-gallery {
  padding: 8px;
  border: 1px solid rgba(244, 217, 150, 0.26);
  border-radius: 6px 64px 6px 64px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34%),
    rgba(16, 4, 5, 0.82);
  box-shadow: var(--shadow);
  transform: rotate(0.8deg);
}

html[data-theme="velvet"] .invite-gallery-track,
html[data-theme="velvet"] .invite-gallery img,
html[data-theme="velvet"] .invite-gallery-slide {
  border-radius: 3px 52px 3px 52px;
}

html[data-theme="velvet"] .invite-gallery-track {
  background: #080203;
  box-shadow: none;
}

html[data-theme="velvet"] .invite-gallery img {
  filter: saturate(0.88) contrast(1.1) brightness(0.86);
}

html[data-theme="velvet"] .invite-gallery-dots {
  background: rgba(10, 3, 4, 0.62);
  border: 1px solid rgba(244, 217, 150, 0.16);
}

html[data-theme="velvet"] .invite-text,
html[data-theme="velvet"] .ending-text {
  color: rgba(255, 243, 212, 0.82);
}

html[data-theme="velvet"] .invite-names,
html[data-theme="velvet"] .invite-names em {
  color: var(--gold-soft);
}

html[data-theme="velvet"] .info-sheet,
html[data-theme="velvet"] .tip-card,
html[data-theme="velvet"] .card-form,
html[data-theme="velvet"] .wish-item,
html[data-theme="velvet"] .ticket,
html[data-theme="velvet"] .pp-card,
html[data-theme="velvet"] .map-picker-sheet {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(183, 31, 45, 0.12), transparent 56%),
    rgba(17, 5, 6, 0.84);
  border-color: rgba(244, 217, 150, 0.27);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html[data-theme="velvet"] .info-sheet {
  border-radius: 4px 42px 4px 42px;
}

html[data-theme="velvet"] .info-sheet::before,
html[data-theme="velvet"] .card-form::before {
  border-color: rgba(244, 217, 150, 0.14);
}

html[data-theme="velvet"] .info-sheet::after {
  content: "CEREMONY PASS";
  position: absolute;
  left: 18px;
  top: 18px;
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(244, 217, 150, 0.24);
}

html[data-theme="velvet"] .info-date-big,
html[data-theme="velvet"] .info-cap,
html[data-theme="velvet"] .v-script,
html[data-theme="velvet"] .sch-time,
html[data-theme="velvet"] .form-msg,
html[data-theme="velvet"] .wish-item .w-name,
html[data-theme="velvet"] .tk-kicker,
html[data-theme="velvet"] .tk-names em,
html[data-theme="velvet"] .tk-venue,
html[data-theme="velvet"] .pp-kicker {
  color: var(--gold-soft);
}

html[data-theme="velvet"] .info-main,
html[data-theme="velvet"] .tip-title,
html[data-theme="velvet"] .wish-item .w-text,
html[data-theme="velvet"] .tk-guest,
html[data-theme="velvet"] .tk-names,
html[data-theme="velvet"] .tk-info,
html[data-theme="velvet"] .pp-title,
html[data-theme="velvet"] .map-option,
html[data-theme="velvet"] .map-picker-title {
  color: var(--ink);
}

html[data-theme="velvet"] .info-sub,
html[data-theme="velvet"] .tip-text,
html[data-theme="velvet"] .contact-row,
html[data-theme="velvet"] .field label,
html[data-theme="velvet"] .tk-guest em,
html[data-theme="velvet"] .tk-sub,
html[data-theme="velvet"] .pp-times,
html[data-theme="velvet"] .map-picker-address,
html[data-theme="velvet"] .map-option small {
  color: var(--ink-soft);
}

html[data-theme="velvet"] .info-block {
  border-bottom-color: rgba(244, 217, 150, 0.2);
}

html[data-theme="velvet"] .btn-ghost,
html[data-theme="velvet"] .contact-row a {
  border-color: rgba(244, 217, 150, 0.32);
  background: rgba(255, 255, 255, 0.025);
  color: var(--gold-soft);
}

html[data-theme="velvet"] .tip-card {
  border-radius: 4px 28px 4px 28px;
}

html[data-theme="velvet"] .tip-card:nth-child(even) {
  border-radius: 28px 4px 28px 4px;
}

html[data-theme="velvet"] .tip-icon {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 245, 211, 0.28), transparent 44%),
    linear-gradient(135deg, rgba(183, 31, 45, 0.48), rgba(244, 217, 150, 0.12));
  box-shadow: inset 0 0 0 1px rgba(244, 217, 150, 0.22);
}

html[data-theme="velvet"] .field input,
html[data-theme="velvet"] .field textarea,
html[data-theme="velvet"] input,
html[data-theme="velvet"] textarea {
  background: rgba(5, 2, 2, 0.48);
  border-color: rgba(244, 217, 150, 0.24);
  color: var(--ink);
}

html[data-theme="velvet"] .field input:focus,
html[data-theme="velvet"] .field textarea:focus {
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(183, 31, 45, 0.18);
}

html[data-theme="velvet"] .field input::placeholder,
html[data-theme="velvet"] .field textarea::placeholder {
  color: rgba(248, 234, 209, 0.34);
}

html[data-theme="velvet"] .seg span {
  border-color: rgba(244, 217, 150, 0.3);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.028);
}

html[data-theme="velvet"] .seg input:checked + span {
  background: linear-gradient(135deg, #8f1620, #c03542 52%, #c99a4d);
  color: #fff4d5;
  box-shadow: 0 12px 22px rgba(143, 22, 32, 0.18);
}

html[data-theme="velvet"] .scene.dark,
html[data-theme="velvet"] .ending {
  background:
    radial-gradient(78% 42% at 50% 0%, rgba(244, 217, 150, 0.16), transparent 66%),
    radial-gradient(72% 38% at 50% 100%, rgba(143, 22, 32, 0.22), transparent 72%),
    linear-gradient(180deg, #120506 0%, #050202 100%);
}

html[data-theme="velvet"] .scene.dark::before,
html[data-theme="velvet"] .scene.ending::before {
  content: "";
  inset: 0;
  top: 0;
  left: 0;
  transform: none;
  font-size: 0;
  background:
    linear-gradient(108deg, transparent 0 34%, rgba(183, 31, 45, 0.18) 43%, transparent 56%),
    radial-gradient(circle at 50% 44%, rgba(244, 217, 150, 0.08), transparent 36%);
}

html[data-theme="velvet"] .scene.dark::after,
html[data-theme="velvet"] .ending::after {
  content: "囍";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  transform: translate(-50%, -50%) rotate(-7deg);
  font-family: var(--serif);
  font-size: min(74vw, 390px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 217, 150, 0.08);
  pointer-events: none;
  user-select: none;
}

html[data-theme="velvet"] .scene.dark .sc-title,
html[data-theme="velvet"] .ending .sc-title,
html[data-theme="velvet"] .scene.dark .sch-title {
  color: var(--night-ink);
}

html[data-theme="velvet"] .scene.dark .sc-ghost,
html[data-theme="velvet"] .ending .sc-ghost {
  -webkit-text-stroke-color: rgba(244, 217, 150, 0.12);
}

html[data-theme="velvet"] .scene.dark .sch-desc,
html[data-theme="velvet"] .ending .split-lines span {
  color: rgba(255, 243, 212, 0.68);
}

html[data-theme="velvet"] .sch-item {
  padding-left: 32px;
}

html[data-theme="velvet"] .sch-item::before {
  left: 5px;
  width: 2px;
  background: linear-gradient(180deg, rgba(244, 217, 150, 0.72), rgba(183, 31, 45, 0.12));
}

html[data-theme="velvet"] .sch-item::after {
  left: -1px;
  width: 13px;
  height: 13px;
  border-color: var(--gold-soft);
  background: radial-gradient(circle, #fff1bd 0 30%, #c99a4d 32% 62%, rgba(183, 31, 45, 0.18) 64%);
  box-shadow: 0 0 18px rgba(244, 217, 150, 0.36);
}

html[data-theme="velvet"] .cd-cell,
html[data-theme="velvet"] .dm-item {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(244, 217, 150, 0.24);
  box-shadow: inset 0 0 18px rgba(183, 31, 45, 0.08);
}

html[data-theme="velvet"] .cd-cell b,
html[data-theme="velvet"] .ending-names i,
html[data-theme="velvet"] .dm-item b,
html[data-theme="velvet"] .btn-outline-light {
  color: var(--gold-soft);
}

html[data-theme="velvet"] .ending-date,
html[data-theme="velvet"] .footer-note {
  color: rgba(255, 243, 212, 0.5);
}

html[data-theme="velvet"] .btn-outline-light {
  border-color: rgba(244, 217, 150, 0.46);
  background: rgba(183, 31, 45, 0.08);
}

html[data-theme="velvet"] .map-option {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(244, 217, 150, 0.2);
}

html[data-theme="velvet"] .map-picker-close {
  color: var(--ink-soft);
}

html[data-theme="velvet"] .pp-card::before {
  background: #120607;
  border-color: rgba(244, 217, 150, 0.24);
}

html[data-theme="velvet"] .pp-disc,
html[data-theme="velvet"] .mb-disc {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(244, 217, 150, 0.3);
}

html[data-theme="velvet"] .pp-label,
html[data-theme="velvet"] .mb-disc::before,
html[data-theme="velvet"] .pp-play {
  background: radial-gradient(circle at 35% 30%, #fff0bd, #c99a4d 70%);
}

html[data-theme="velvet"] .pp-play {
  color: #170607;
}

html[data-theme="velvet"] .ticket::before,
html[data-theme="velvet"] .ticket::after {
  background: #050202;
}

html[data-theme="velvet"] .tk-stamp {
  color: rgba(255, 237, 206, 0.78);
  border-color: rgba(244, 217, 150, 0.42);
  background: rgba(143, 22, 32, 0.18);
}

html[data-theme="velvet"] .toast {
  background: rgba(8, 2, 3, 0.94);
  color: #fff1cf;
  border: 1px solid rgba(244, 217, 150, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="velvet"] body::before {
    animation: none;
  }
}

/* ------------------------------------------------------------
 * 视觉版本:复古拼贴版(参考婚贝 Welcome MV)
 * 星空剪贴簿底 + 彩虹爱心封面 + 真人抠图白边贴纸 +
 * 马克笔手写英文 + 黄色涂鸦 + 复古电视机信息卡
 * ------------------------------------------------------------ */
html[data-theme="collage"] {
  --cream: #14111a;
  --cream-deep: #1a1524;
  --ink: #fdf6ea;
  --ink-soft: rgba(253, 246, 234, 0.64);
  --gold: #f4c93f;
  --gold-soft: #ffe089;
  --gold-line: rgba(244, 201, 63, 0.4);
  --rose: #ff6f91;
  --red: #e8483b;
  --card: rgba(24, 20, 30, 0.88);
  --night: #0d0b12;
  --night-ink: #fdf6ea;
  --shadow: 0 26px 60px rgba(0, 0, 0, 0.52);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.36);
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --playful: "ZCOOL KuaiLe", "PingFang SC", sans-serif;
  --paper: #fdf6ea;
  --paper-ink: #241f2b;
  --paper-ink-soft: rgba(36, 31, 43, 0.64);
}

/* 星空剪贴簿底 */
html[data-theme="collage"] body {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.9px),
    radial-gradient(circle at 66% 12%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 42%, rgba(255, 224, 137, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 64%, rgba(255, 255, 255, 0.62) 0 1px, transparent 1.7px),
    radial-gradient(circle at 58% 84%, rgba(255, 224, 137, 0.66) 0 1px, transparent 1.9px),
    radial-gradient(circle at 8% 88%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.7px),
    radial-gradient(90% 56% at 82% -6%, rgba(83, 62, 120, 0.4), transparent 68%),
    radial-gradient(80% 50% at 8% 104%, rgba(52, 34, 78, 0.38), transparent 70%),
    linear-gradient(180deg, #17131f 0%, #100d16 52%, #191322 100%);
  color: var(--ink);
}

html[data-theme="collage"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 13.6 10.4 22 12 13.6 13.6 12 22 10.4 13.6 2 12 10.4 10.4Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat left 12% top 16% / 14px 14px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 13.6 10.4 22 12 13.6 13.6 12 22 10.4 13.6 2 12 10.4 10.4Z' fill='%23ffe089'/%3E%3C/svg%3E") no-repeat right 10% top 34% / 10px 10px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 13.6 10.4 22 12 13.6 13.6 12 22 10.4 13.6 2 12 10.4 10.4Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat left 16% bottom 12% / 9px 9px;
  opacity: 0.75;
  animation: collage-twinkle 3.6s ease-in-out infinite alternate;
}

@keyframes collage-twinkle {
  from { opacity: 0.4; }
  to { opacity: 0.92; }
}

html[data-theme="collage"] #loader {
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.9px),
    radial-gradient(circle at 74% 18%, rgba(255, 224, 137, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 78%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.8px),
    radial-gradient(84% 52% at 50% 110%, rgba(52, 34, 78, 0.5), transparent 72%),
    #121019;
}

html[data-theme="collage"] .loader-caption {
  font-family: var(--playful);
  color: var(--ink-soft);
}

html[data-theme="collage"] .loader-text {
  font-family: var(--marker);
  color: var(--gold-soft);
  letter-spacing: 4px;
}

html[data-theme="collage"] .chase-ground {
  border-bottom-color: rgba(253, 246, 234, 0.4);
}

html[data-theme="collage"] .grain {
  opacity: 0.55;
  mix-blend-mode: overlay;
}

html[data-theme="collage"] #petal-canvas {
  opacity: 0.5;
  mix-blend-mode: screen;
}

/* 剪贴簿画框:白色虚线,像手账贴边 */
html[data-theme="collage"] .page-frame {
  border: 2px dashed rgba(253, 246, 234, 0.34);
  border-radius: 18px;
  box-shadow: none;
}

html[data-theme="collage"] .page-frame::after {
  display: none;
}

html[data-theme="collage"] .pf-corner {
  display: none;
}

html[data-theme="collage"] .scroll-progress i {
  background: linear-gradient(90deg, #e8483b, #f2913c, #f4c93f, #58a95c, #3f7fc1, #7b4ea0);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

html[data-theme="collage"] .chapter-nav a {
  background: rgba(253, 246, 234, 0.32);
}

html[data-theme="collage"] .chapter-nav a.active {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(244, 201, 63, 0.22);
}

html[data-theme="collage"] .music-btn {
  background: var(--paper);
  border: 2px solid var(--paper-ink);
  color: var(--paper-ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}

/* ---------- 封面:彩虹爱心 + 贴纸新人 ---------- */
html[data-theme="collage"] .hero {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23dc4434'/%3E%3Cg%3E%3Cpath transform='translate(100 101) scale(1.62) translate(-100 -101)' d='M100 178C58 138 20 112 20 70 20 42 42 24 66 24 82 24 94 32 100 46 106 32 118 24 134 24 158 24 180 42 180 70 180 112 142 138 100 178Z' fill='%23f2913c'/%3E%3Cpath transform='translate(100 101) scale(1.34) translate(-100 -101)' d='M100 178C58 138 20 112 20 70 20 42 42 24 66 24 82 24 94 32 100 46 106 32 118 24 134 24 158 24 180 42 180 70 180 112 142 138 100 178Z' fill='%23f4c93f'/%3E%3Cpath transform='translate(100 101) scale(1.1) translate(-100 -101)' d='M100 178C58 138 20 112 20 70 20 42 42 24 66 24 82 24 94 32 100 46 106 32 118 24 134 24 158 24 180 42 180 70 180 112 142 138 100 178Z' fill='%2358a95c'/%3E%3Cpath transform='translate(100 101) scale(0.88) translate(-100 -101)' d='M100 178C58 138 20 112 20 70 20 42 42 24 66 24 82 24 94 32 100 46 106 32 118 24 134 24 158 24 180 42 180 70 180 112 142 138 100 178Z' fill='%233f7fc1'/%3E%3Cpath transform='translate(100 101) scale(0.66) translate(-100 -101)' d='M100 178C58 138 20 112 20 70 20 42 42 24 66 24 82 24 94 32 100 46 106 32 118 24 134 24 158 24 180 42 180 70 180 112 142 138 100 178Z' fill='%237b4ea0'/%3E%3Cpath transform='translate(100 101) scale(0.46) translate(-100 -101)' d='M100 178C58 138 20 112 20 70 20 42 42 24 66 24 82 24 94 32 100 46 106 32 118 24 134 24 158 24 180 42 180 70 180 112 142 138 100 178Z' fill='%23c2274d'/%3E%3C/g%3E%3C/svg%3E")
      center 40% / max(108vw, 100vh) no-repeat,
    #dc4434;
}

html[data-theme="collage"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    radial-gradient(120% 70% at 50% 108%, rgba(60, 8, 24, 0.5), transparent 62%);
}

html[data-theme="collage"] .hero-glow,
html[data-theme="collage"] .light-leak {
  display: none;
}

html[data-theme="collage"] .h-kicker {
  font-family: var(--marker);
  font-size: clamp(19px, 5.6vw, 24px);
  font-weight: 400;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  transform: rotate(-2deg);
  margin-bottom: 16px;
}

html[data-theme="collage"] .h-kicker i {
  display: none;
}

html[data-theme="collage"] .h-names {
  font-family: var(--playful);
  font-size: clamp(38px, 11.6vw, 52px);
  font-weight: 400;
  letter-spacing: 4px;
  color: #fff;
  transform: rotate(-1.4deg);
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.32),
    0 14px 30px rgba(60, 8, 24, 0.5);
}

/* 姓名不用金箔渐变,改为白色手写 */
html[data-theme="collage"] .h-names .n-char {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  animation: none;
}

html[data-theme="collage"] .h-amp {
  font-family: var(--marker);
  font-style: normal;
  color: var(--gold-soft);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

html[data-theme="collage"] .h-names-en {
  font-family: var(--marker);
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.24);
}

html[data-theme="collage"] .h-names-en em {
  color: var(--gold-soft);
}

/* 新人贴纸:白描边 + 身后黄色涂鸦 */
html[data-theme="collage"] .hero-figure {
  width: min(76vw, 348px);
  margin-top: 20px;
  padding: 14px 10px 0;
}

html[data-theme="collage"] .fig-arch {
  display: none;
}

html[data-theme="collage"] .hero-figure::before {
  content: "";
  position: absolute;
  inset: -14% -20%;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M28 208 90 96 60 170 150 44 112 150 196 60 170 136 224 96' fill='none' stroke='%23f4c93f' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.92;
  transform: none;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  top: -14%;
}

html[data-theme="collage"] .hero-figure img {
  filter:
    drop-shadow(2.5px 0 0 #fff)
    drop-shadow(-2.5px 0 0 #fff)
    drop-shadow(0 2.5px 0 #fff)
    drop-shadow(0 -2.5px 0 #fff)
    drop-shadow(0 18px 22px rgba(40, 4, 16, 0.55));
}

html[data-theme="collage"] .hero-figure::after {
  background: radial-gradient(ellipse, rgba(30, 2, 12, 0.4), transparent 70%);
}

/* 日期:黄色胶带贴纸 */
html[data-theme="collage"] .h-date {
  display: inline-block;
  font-family: var(--marker);
  font-size: 21px;
  letter-spacing: 3px;
  padding: 5px 22px;
  margin-top: 18px;
  background: var(--gold);
  color: var(--paper-ink);
  animation: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  transform: rotate(-2.4deg);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
}

html[data-theme="collage"] .h-tagline {
  font-family: var(--playful);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

html[data-theme="collage"] .open-btn {
  font-family: var(--playful);
  font-size: 15px;
  letter-spacing: 3px;
  border: 3px solid var(--paper-ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.4);
}

html[data-theme="collage"] .h-stamp {
  border: 2.5px dashed rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(194, 39, 77, 0.85);
  color: #fff;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.28);
  transform: rotate(-12deg);
}

html[data-theme="collage"] .h-stamp::after {
  display: none;
}

html[data-theme="collage"] .scroll-hint span {
  background: linear-gradient(180deg, #fff, transparent);
}

/* ---------- 跑马灯:黑底白字 + 彩虹描边 ---------- */
html[data-theme="collage"] .marquee {
  background: #0e0b13;
  border: none;
  border-top: 3px solid;
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, #e8483b, #f2913c, #f4c93f, #58a95c, #3f7fc1, #7b4ea0) 1;
}

html[data-theme="collage"] .marquee-track {
  font-family: var(--marker);
  font-size: 13px;
  letter-spacing: 3px;
  color: #fff;
}

/* ---------- 章节通用 ---------- */
html[data-theme="collage"] .scene:nth-of-type(even) {
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 22% 76%, rgba(255, 224, 137, 0.6) 0 1px, transparent 1.9px),
    radial-gradient(86% 54% at 50% -6%, rgba(83, 62, 120, 0.34), transparent 66%),
    linear-gradient(180deg, #1a1524 0%, #120e1a 100%);
}

html[data-theme="collage"] .sc-ghost {
  font-family: var(--marker);
  font-style: normal;
  -webkit-text-stroke-color: rgba(253, 246, 234, 0.14);
}

html[data-theme="collage"] .sc-en {
  font-family: var(--marker);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gold);
  transform: rotate(-1.6deg);
}

html[data-theme="collage"] .sc-title {
  font-family: var(--playful);
  letter-spacing: 6px;
  color: var(--ink);
  transform: rotate(-1.2deg);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.34);
}

html[data-theme="collage"] .sc-title::after {
  width: 112px;
  height: 12px;
  margin-top: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M4 9C30 4 62 4 116 7 90 8 40 10 12 12' fill='none' stroke='%23f4c93f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

html[data-theme="collage"] .sc-head.has-flourish .sc-title::after {
  display: block;
}

html[data-theme="collage"] .sc-flourish {
  display: none;
}

/* ---------- 01 邀请:白边拍立得相册 ---------- */
html[data-theme="collage"] .invite-gallery {
  position: relative;
  padding: 10px 10px 14px;
  border: none;
  border-radius: 3px;
  background: #fff;
  box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.42);
  transform: rotate(-2deg);
}

html[data-theme="collage"] .invite-gallery::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 3;
  width: 96px;
  height: 26px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(244, 201, 63, 0.88);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
}

html[data-theme="collage"] .invite-gallery-track,
html[data-theme="collage"] .invite-gallery img,
html[data-theme="collage"] .invite-gallery-slide {
  border-radius: 2px;
}

html[data-theme="collage"] .invite-gallery img {
  filter: saturate(1.06) contrast(1.05);
}

html[data-theme="collage"] .invite-gallery-dots {
  background: rgba(14, 11, 19, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

html[data-theme="collage"] .invite-text,
html[data-theme="collage"] .ending-text {
  font-family: var(--playful);
  color: rgba(253, 246, 234, 0.85);
}

/* ---------- 相册章节:白边照片贴纸 + 胶带 ---------- */
html[data-theme="collage"] .album-note {
  font-family: var(--playful);
  color: rgba(253, 246, 234, 0.78);
}

html[data-theme="collage"] .album-collage figure {
  position: relative;
  overflow: visible;
  padding: 6px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.4);
}
html[data-theme="collage"] .album-collage figure:nth-child(1) { transform: rotate(-2.2deg); }
html[data-theme="collage"] .album-collage figure:nth-child(2) { transform: rotate(1.8deg); }
html[data-theme="collage"] .album-collage figure:nth-child(3) { transform: rotate(-1.5deg); }
html[data-theme="collage"] .album-collage figure:nth-child(4) { transform: rotate(2.2deg); }
html[data-theme="collage"] .album-collage figure::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  z-index: 2;
  width: 54px;
  height: 17px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(244, 201, 63, 0.88);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}
html[data-theme="collage"] .album-collage figure:nth-child(even)::before {
  transform: translateX(-50%) rotate(4deg);
  background: rgba(120, 178, 214, 0.88);
}
html[data-theme="collage"] .album-collage img {
  border-radius: 1px;
}

html[data-theme="collage"] .album-fader {
  border: 8px solid #fff;
  border-radius: 2px;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.42);
  transform: rotate(-1.4deg);
}
html[data-theme="collage"] .album-fader::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 12px;
  z-index: 2;
  width: 64px;
  height: 20px;
  transform: rotate(6deg);
  background: rgba(255, 111, 145, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

html[data-theme="collage"] .album-film .af-main {
  border: 8px solid #fff;
  border-radius: 2px;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.42);
  transform: rotate(1.2deg);
}
html[data-theme="collage"] .af-strip {
  padding: 9px 12px;
  border-radius: 4px;
  background: #0e0b13;
  border-top: 3px dashed rgba(253, 246, 234, 0.4);
  border-bottom: 3px dashed rgba(253, 246, 234, 0.4);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.36);
}
html[data-theme="collage"] .af-strip button {
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  opacity: 0.6;
}
html[data-theme="collage"] .af-strip button.active {
  border-color: var(--gold);
  opacity: 1;
}

html[data-theme="collage"] .invite-names,
html[data-theme="collage"] .invite-names em {
  font-family: var(--marker);
  color: var(--gold-soft);
}

/* ---------- 02 婚礼信息:复古电视机 ---------- */
html[data-theme="collage"] .info-sheet {
  border: 12px solid #37323f;
  outline: 3px solid #16121d;
  border-radius: 30px;
  background:
    repeating-linear-gradient(180deg, rgba(38, 26, 18, 0.05) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #fffdf4 0%, #f4ead4 100%);
  box-shadow:
    var(--shadow),
    inset 0 0 40px rgba(70, 48, 22, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="collage"] .info-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  border: none;
  border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.5) 0 8%, transparent 22%);
  opacity: 0.7;
}

html[data-theme="collage"] .info-sheet::after {
  content: "ON AIR · CH 99";
  position: absolute;
  left: 16px;
  top: 14px;
  font-family: var(--marker);
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(194, 39, 77, 0.66);
}

html[data-theme="collage"] .v-script {
  font-family: var(--playful);
  color: rgba(194, 39, 77, 0.5);
}

html[data-theme="collage"] .info-date-big {
  font-family: var(--marker);
  background: none;
  color: #c2274d;
  animation: none;
}

html[data-theme="collage"] .info-cap {
  font-family: var(--marker);
  color: #d06a2c;
}

html[data-theme="collage"] .info-main {
  font-family: var(--playful);
  color: var(--paper-ink);
}

html[data-theme="collage"] .info-sub,
html[data-theme="collage"] .contact-row {
  color: var(--paper-ink-soft);
}

html[data-theme="collage"] .info-block {
  border-bottom: 2px dashed rgba(36, 31, 43, 0.22);
}

html[data-theme="collage"] .btn-primary {
  font-family: var(--playful);
  letter-spacing: 2px;
  border: 2.5px solid var(--paper-ink);
  background: var(--gold);
  color: var(--paper-ink);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.32);
}

html[data-theme="collage"] .btn-ghost,
html[data-theme="collage"] .contact-row a {
  border: 2px solid rgba(36, 31, 43, 0.7);
  background: rgba(255, 255, 255, 0.6);
  color: var(--paper-ink);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.22);
}

/* ---------- 03 流程:星空 + 黄点时间轴 ---------- */
html[data-theme="collage"] .scene.dark {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.9px),
    radial-gradient(circle at 78% 34%, rgba(255, 224, 137, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.8px),
    radial-gradient(88% 60% at 50% 116%, rgba(52, 34, 78, 0.55), transparent 70%),
    #0e0b13;
}

html[data-theme="collage"] .scene.dark::after {
  content: "";
  position: absolute;
  right: -34px;
  top: 9%;
  z-index: 0;
  width: 190px;
  height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Cellipse cx='80' cy='50' rx='62' ry='15' fill='none' stroke='%23ded0bd' stroke-width='6' transform='rotate(-16 80 50)' opacity='.85'/%3E%3Ccircle cx='80' cy='50' r='29' fill='%23c8b8a6'/%3E%3Ccircle cx='70' cy='42' r='6' fill='%23b7a591' opacity='.75'/%3E%3Ccircle cx='90' cy='58' r='4' fill='%23b7a591' opacity='.75'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(8deg);
  opacity: 0.85;
  pointer-events: none;
}

html[data-theme="collage"] .sch-time {
  font-family: var(--marker);
  color: var(--gold);
}

html[data-theme="collage"] .sch-title {
  font-family: var(--playful);
  color: var(--ink);
}

html[data-theme="collage"] .sch-desc {
  color: var(--ink-soft);
}

html[data-theme="collage"] .sch-item::before {
  background: linear-gradient(180deg, rgba(253, 246, 234, 0.5), rgba(253, 246, 234, 0.08));
}

html[data-theme="collage"] .sch-item::after {
  border-color: #fff;
  background: radial-gradient(circle, #ffe089 0 40%, #f4c93f 42% 70%, rgba(244, 201, 63, 0.2) 72%);
  box-shadow: 0 0 14px rgba(244, 201, 63, 0.5);
}

/* ---------- 04 温馨提示:歪贴的白纸卡 ---------- */
html[data-theme="collage"] .tip-card {
  position: relative;
  border: none;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(-1.8deg);
}

html[data-theme="collage"] .tip-card:nth-child(even) {
  transform: rotate(1.6deg);
  border-radius: 3px;
}

html[data-theme="collage"] .tip-card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 58px;
  height: 18px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(244, 201, 63, 0.88);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

html[data-theme="collage"] .tip-card:nth-child(even)::before {
  transform: translateX(-50%) rotate(4deg);
  background: rgba(120, 178, 214, 0.88);
}

html[data-theme="collage"] .tip-icon {
  background: none;
  box-shadow: none;
}

html[data-theme="collage"] .tip-title {
  font-family: var(--playful);
  color: var(--paper-ink);
}

html[data-theme="collage"] .tip-text {
  color: var(--paper-ink-soft);
}

/* ---------- 05/06 表单:白纸 + 胶带 ---------- */
html[data-theme="collage"] .card-form {
  position: relative;
  border: none;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="collage"] .card-form::before {
  content: "";
  position: absolute;
  inset: auto;
  top: -13px;
  left: 50%;
  width: 92px;
  height: 24px;
  border: none;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 111, 145, 0.82);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}

html[data-theme="collage"] .field label {
  font-family: var(--playful);
  color: var(--paper-ink);
}

html[data-theme="collage"] .field input,
html[data-theme="collage"] .field textarea {
  background: #fff;
  border: 2px solid rgba(36, 31, 43, 0.5);
  border-radius: 8px;
  color: var(--paper-ink);
}

html[data-theme="collage"] .field input:focus,
html[data-theme="collage"] .field textarea:focus {
  border-color: var(--paper-ink);
  box-shadow: 0 0 0 3px rgba(244, 201, 63, 0.4);
}

html[data-theme="collage"] .field input::placeholder,
html[data-theme="collage"] .field textarea::placeholder {
  color: rgba(36, 31, 43, 0.36);
}

html[data-theme="collage"] .seg span {
  font-family: var(--playful);
  border: 2px solid rgba(36, 31, 43, 0.55);
  background: #fff;
  color: var(--paper-ink-soft);
}

html[data-theme="collage"] .seg input:checked + span {
  background: var(--gold);
  border-color: var(--paper-ink);
  color: var(--paper-ink);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.28);
}

html[data-theme="collage"] .form-msg {
  color: #c2274d;
}

html[data-theme="collage"] .wish-item {
  border: none;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.34);
  transform: rotate(-1deg);
}

html[data-theme="collage"] .wish-item:nth-child(even) {
  transform: rotate(1.2deg);
}

html[data-theme="collage"] .wish-item .w-name {
  font-family: var(--marker);
  color: #c2274d;
}

html[data-theme="collage"] .wish-item .w-text {
  color: var(--paper-ink);
}

/* ---------- 07 结尾:星空 + 土星 + 热气球 ---------- */
html[data-theme="collage"] .ending {
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.9px),
    radial-gradient(circle at 70% 30%, rgba(255, 224, 137, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 72%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.8px),
    radial-gradient(circle at 14% 64%, rgba(255, 224, 137, 0.6) 0 1px, transparent 1.9px),
    radial-gradient(92% 58% at 50% 118%, rgba(60, 8, 24, 0.6), transparent 74%),
    #0d0a12;
}

html[data-theme="collage"] .scene.dark::before,
html[data-theme="collage"] .scene.ending::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: none;
  font-size: 0;
  pointer-events: none;
  background: none;
}

html[data-theme="collage"] .scene.ending::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: none;
  font-size: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Cellipse cx='80' cy='50' rx='62' ry='15' fill='none' stroke='%23ded0bd' stroke-width='6' transform='rotate(-16 80 50)' opacity='.85'/%3E%3Ccircle cx='80' cy='50' r='29' fill='%23c8b8a6'/%3E%3Ccircle cx='70' cy='42' r='6' fill='%23b7a591' opacity='.75'/%3E%3Ccircle cx='90' cy='58' r='4' fill='%23b7a591' opacity='.75'/%3E%3C/svg%3E") no-repeat right -28px top 8% / 170px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90'%3E%3Cpath d='M30 4C14 4 6 16 6 30 6 44 20 54 26 62L34 62C40 54 54 44 54 30 54 16 46 4 30 4Z' fill='%23e8925a'/%3E%3Cpath d='M30 4C24 4 20 16 20 30 20 44 26 54 28 62L32 62C34 54 40 44 40 30 40 16 36 4 30 4Z' fill='%23f4c93f'/%3E%3Cpath d='M26 62 24 70M34 62 36 70' stroke='%238a5a3b' stroke-width='2'/%3E%3Crect x='23' y='70' width='14' height='11' rx='2' fill='%238a5a3b'/%3E%3C/svg%3E") no-repeat left 7% top 20% / 48px auto;
  opacity: 0.92;
}

html[data-theme="collage"] .ending::after {
  content: "";
  position: absolute;
  left: 10%;
  bottom: 8%;
  z-index: 0;
  width: 30px;
  height: 45px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90'%3E%3Cpath d='M30 4C14 4 6 16 6 30 6 44 20 54 26 62L34 62C40 54 54 44 54 30 54 16 46 4 30 4Z' fill='%233f7fc1'/%3E%3Cpath d='M30 4C24 4 20 16 20 30 20 44 26 54 28 62L32 62C34 54 40 44 40 30 40 16 36 4 30 4Z' fill='%23fdf6ea'/%3E%3Cpath d='M26 62 24 70M34 62 36 70' stroke='%238a5a3b' stroke-width='2'/%3E%3Crect x='23' y='70' width='14' height='11' rx='2' fill='%238a5a3b'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.8;
  pointer-events: none;
}

html[data-theme="collage"] .cd-cell {
  border: 2.5px solid var(--paper-ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.42);
}

html[data-theme="collage"] .cd-cell b {
  color: var(--paper-ink);
}

html[data-theme="collage"] .cd-cell span {
  font-family: var(--marker);
  color: #c2274d;
}

html[data-theme="collage"] .cd-sep {
  color: var(--gold-soft);
}

html[data-theme="collage"] .ending-names b {
  font-family: var(--playful);
  color: var(--ink);
}

html[data-theme="collage"] .ending-names i {
  font-family: var(--marker);
  color: var(--gold-soft);
}

html[data-theme="collage"] .ending-date,
html[data-theme="collage"] .footer-note {
  color: rgba(253, 246, 234, 0.5);
}

html[data-theme="collage"] .btn-outline-light {
  font-family: var(--playful);
  border: 2px dashed rgba(253, 246, 234, 0.72);
  background: rgba(253, 246, 234, 0.06);
  color: var(--ink);
}

html[data-theme="collage"] .dm-item {
  border: none;
  border-radius: 3px;
  background: rgba(253, 246, 234, 0.92);
  color: var(--paper-ink);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.3);
}

html[data-theme="collage"] .dm-item b {
  color: #c2274d;
}

/* ---------- 弹层与杂项 ---------- */
html[data-theme="collage"] .ticket {
  border: none;
  background:
    repeating-linear-gradient(180deg, rgba(38, 26, 18, 0.04) 0 2px, transparent 2px 5px),
    var(--paper);
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.46);
}

html[data-theme="collage"] .ticket::before,
html[data-theme="collage"] .ticket::after {
  background: #14111a;
}

html[data-theme="collage"] .tk-kicker {
  font-family: var(--marker);
  color: #c2274d;
}

html[data-theme="collage"] .tk-guest,
html[data-theme="collage"] .tk-names,
html[data-theme="collage"] .tk-info {
  font-family: var(--playful);
  color: var(--paper-ink);
}

html[data-theme="collage"] .tk-names em {
  font-family: var(--marker);
  color: #d06a2c;
}

html[data-theme="collage"] .tk-guest em,
html[data-theme="collage"] .tk-sub {
  color: var(--paper-ink-soft);
}

html[data-theme="collage"] .tk-line {
  border-top: 2px dashed rgba(36, 31, 43, 0.3);
  background: none;
}

html[data-theme="collage"] .tk-stamp {
  color: #fff;
  border: 2px dashed rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(194, 39, 77, 0.88);
  transform: rotate(-12deg);
}

html[data-theme="collage"] .map-picker-sheet {
  background: var(--paper);
  border: 3px solid var(--paper-ink);
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.4);
}

html[data-theme="collage"] .map-picker-title,
html[data-theme="collage"] .map-option {
  font-family: var(--playful);
  color: var(--paper-ink);
}

html[data-theme="collage"] .map-picker-address,
html[data-theme="collage"] .map-option small,
html[data-theme="collage"] .map-picker-close {
  color: var(--paper-ink-soft);
}

html[data-theme="collage"] .map-option {
  border: 2px solid rgba(36, 31, 43, 0.4);
  background: #fff;
}

html[data-theme="collage"] .pp-card {
  background: var(--paper);
  border: 3px solid var(--paper-ink);
  box-shadow: 8px 9px 0 rgba(0, 0, 0, 0.4);
}

html[data-theme="collage"] .pp-card::before {
  background: var(--paper);
  border-color: var(--paper-ink);
}

html[data-theme="collage"] .pp-kicker {
  font-family: var(--marker);
  color: #c2274d;
}

html[data-theme="collage"] .pp-title {
  font-family: var(--playful);
  color: var(--paper-ink);
}

html[data-theme="collage"] .pp-times {
  color: var(--paper-ink-soft);
}

html[data-theme="collage"] .pp-disc,
html[data-theme="collage"] .mb-disc {
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.3),
    inset 0 0 0 2px rgba(36, 31, 43, 0.7);
}

html[data-theme="collage"] .pp-label,
html[data-theme="collage"] .mb-disc::before,
html[data-theme="collage"] .pp-play {
  background: radial-gradient(circle at 35% 30%, #ffe089, #f4c93f 70%);
}

html[data-theme="collage"] .pp-play {
  color: var(--paper-ink);
}

html[data-theme="collage"] .toast {
  font-family: var(--playful);
  background: rgba(14, 11, 19, 0.94);
  color: var(--ink);
  border: 2px solid rgba(244, 201, 63, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="collage"] body::before {
    animation: none;
  }
}