:root {
  --luxury-cream: #fff8eb;
  --luxury-paper: rgba(255, 252, 244, .94);
  --luxury-paper-strong: #fffaf0;
  --luxury-coral: #df8b72;
  --luxury-coral-deep: #b9654f;
  --luxury-peach: #f1b59f;
  --luxury-gold: #c89a52;
  --luxury-gold-soft: #ecd7aa;
  --luxury-cocoa: #62402d;
  --luxury-muted: #947665;
  --luxury-green: #7f9d78;
  --scene-progress: 0%;
  --paper-shadow: 0 18px 42px rgba(98, 64, 45, .14), 0 2px 5px rgba(98, 64, 45, .06);
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 244, 218, .9), transparent 31%),
    radial-gradient(circle at 86% 84%, rgba(222, 147, 118, .18), transparent 28%),
    linear-gradient(145deg, #ecd9c3, #fff8eb 44%, #e8cfba);
  color: var(--luxury-cocoa);
}

.phone {
  border-color: rgba(88, 55, 40, .84);
  background: var(--luxury-cream);
  box-shadow: 0 34px 100px rgba(84, 49, 31, .26), 0 0 0 1px rgba(255, 255, 255, .45) inset;
}

.notch { display: none; }

.header.luxury-header {
  height: 88px;
  padding: 16px 20px 12px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255, 252, 245, .98), rgba(255, 248, 235, .93)),
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .9), transparent 40%);
  box-shadow: 0 1px 0 rgba(200, 154, 82, .22), 0 10px 26px rgba(98, 64, 45, .07);
  backdrop-filter: blur(18px) saturate(1.08);
}

.header.luxury-header::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -46px;
  width: 122px;
  height: 88px;
  border: 10px solid rgba(223, 139, 114, .34);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 55% 42% 55% 48%;
  transform: rotate(16deg);
  pointer-events: none;
}

.header-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.header-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
  background: #f6c9b8;
  border: 3px solid rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 1px rgba(200, 154, 82, .58), 0 7px 16px rgba(98, 64, 45, .14);
}

.header-copy b {
  display: block;
  margin-bottom: 3px;
  color: #74401f;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 21px;
  letter-spacing: .04em;
}

.header-copy small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9a7a68;
  font-size: 12px;
  letter-spacing: .02em;
}

.online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-radius: 50%;
  background: #7d9f72;
  box-shadow: 0 0 0 4px rgba(125, 159, 114, .12);
  animation: luxuryOnline 2.2s ease-in-out infinite;
}

.luxury-progress {
  position: relative;
  z-index: 8;
  height: 2px;
  opacity: 1;
  background: rgba(200, 154, 82, .13);
}

.luxury-progress i {
  width: var(--scene-progress);
  background: linear-gradient(90deg, #e3b08f, #c89a52 72%, #f2ddae);
  box-shadow: 0 0 10px rgba(200, 154, 82, .34);
  transition: width .8s cubic-bezier(.2, .78, .2, 1);
}

.chat.luxury-stage {
  isolation: isolate;
  height: calc(100% - 90px);
  padding: 24px 18px 28px;
  color: var(--luxury-cocoa);
  background-color: var(--luxury-cream);
  background-image:
    linear-gradient(180deg, rgba(255, 249, 237, .16), rgba(255, 247, 232, .34)),
    url("room-base.webp");
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: local, local;
}

.chat.luxury-stage::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 90px 0 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 15%, rgba(255, 255, 255, .46), transparent 27%),
    radial-gradient(circle at 16% 58%, rgba(241, 181, 159, .13), transparent 28%),
    linear-gradient(180deg, rgba(255, 251, 244, .06), rgba(244, 218, 190, .12));
  animation: roomDrift 10s ease-in-out infinite alternate;
}

.chat.luxury-stage::after {
  content: "✦";
  position: fixed;
  z-index: 1;
  top: 124px;
  right: max(20px, calc((100vw - 460px) / 2 + 28px));
  color: rgba(184, 126, 50, .72);
  font-size: 18px;
  text-shadow: -22px 34px 0 rgba(200, 154, 82, .45), 10px 78px 0 rgba(200, 154, 82, .3);
  pointer-events: none;
  animation: sparklePulse 3.6s ease-in-out infinite;
}

.chat.luxury-stage #messages,
.chat.luxury-stage .dock {
  position: relative;
  z-index: 3;
}

.chat.luxury-stage[data-scene-kind="products"],
.chat.luxury-stage[data-scene-kind="brands"],
.chat.luxury-stage[data-scene-kind="group-advice"],
.chat.luxury-stage[data-scene-kind="service"],
.chat.luxury-stage[data-scene-kind="summary"] {
  background-position: center, 50% 42%;
}

.chat.luxury-stage[data-scene-kind="service-page"] {
  background-position: center, 50% 58%;
}

.chat.scene-in {
  animation: sceneReveal .72s cubic-bezier(.22, .78, .22, 1) both;
}

.chat.scene-leaving {
  animation: sceneArchive .42s cubic-bezier(.45, 0, .55, 1) both;
}

.row {
  gap: 10px;
  margin: 10px 0;
  animation: paperSettle .52s cubic-bezier(.2, .78, .2, 1) both;
}

.face {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .92);
  background: #f6c9b8 url("douzhidao-coral-gift-v4.webp") center 16% / 155% auto no-repeat;
  color: transparent;
  box-shadow: 0 0 0 1px rgba(200, 154, 82, .55), 0 9px 18px rgba(98, 64, 45, .14);
}

.row:has(.typing) .face,
.row:has(.typing-dots) .face {
  animation: ipSpeak 1.05s ease-in-out infinite;
}

.bubble {
  position: relative;
  max-width: calc(100% - 52px);
  padding: 14px 16px;
  border: 1px solid rgba(200, 154, 82, .42);
  border-radius: 8px 22px 22px 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 248, 235, .96)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(98, 64, 45, .015) 3px 4px);
  color: #634632;
  box-shadow: var(--paper-shadow), inset 0 0 0 1px rgba(255, 255, 255, .72);
  line-height: 1.72;
}

.bubble::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  opacity: .26;
  background:
    linear-gradient(40deg, transparent 43%, var(--luxury-gold) 44% 48%, transparent 49%),
    linear-gradient(-40deg, transparent 43%, var(--luxury-gold) 44% 48%, transparent 49%);
  border-radius: 60% 0 60% 0;
  pointer-events: none;
}

.me .bubble {
  max-width: 82%;
  border-color: rgba(185, 101, 79, .35);
  border-radius: 22px 8px 22px 22px;
  background: linear-gradient(145deg, rgba(244, 191, 169, .96), rgba(231, 151, 126, .95));
  color: #643a2d;
  box-shadow: 0 12px 28px rgba(138, 77, 58, .18), inset 0 1px rgba(255, 255, 255, .55);
}

.typing::after {
  color: var(--luxury-coral-deep);
}

.typing-dots i {
  background: var(--luxury-gold);
  box-shadow: 0 0 0 3px rgba(200, 154, 82, .1);
}

.dock {
  padding: 14px 0 calc(24px + env(safe-area-inset-bottom));
  animation: dockRise .58s .08s cubic-bezier(.2, .78, .2, 1) both;
}

.options { gap: 10px; }

.opt,
.chip,
.brand-chip,
.quick-list button {
  position: relative;
  overflow: hidden;
  border-color: rgba(200, 154, 82, .42);
  background: linear-gradient(145deg, rgba(255, 253, 247, .96), rgba(255, 244, 229, .94));
  color: #6e4d39;
  box-shadow: 0 9px 20px rgba(98, 64, 45, .09), inset 0 1px rgba(255, 255, 255, .8);
  transition: transform .2s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
  -webkit-tap-highlight-color: transparent;
}

.opt {
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 18px;
  font-weight: 700;
}

.opt::before,
.chip::before,
.brand-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .72) 47%, transparent 72%);
  transform: translateX(-110%);
  transition: transform .55s ease, opacity .2s ease;
  pointer-events: none;
}

.opt:active,
.chip:active,
.brand-chip:active,
.primary:active,
.storybook-claim:active {
  transform: translateY(2px) scale(.985);
}

.opt:hover,
.opt.on,
.chip.on,
.brand-chip.on {
  border-color: rgba(185, 101, 79, .75);
  background: linear-gradient(145deg, #fff6ec, #f7c6b2);
  color: #8a4937;
  box-shadow: 0 11px 24px rgba(138, 77, 58, .16), 0 0 0 1px rgba(255, 255, 255, .62) inset;
}

.opt:hover::before,
.opt.on::before,
.chip.on::before,
.brand-chip.on::before {
  opacity: 1;
  transform: translateX(110%);
}

.select-title {
  margin: 0 0 10px;
  color: #7c5843;
  font-family: "Songti SC", "STSong", serif;
  font-size: 15px;
  font-weight: 700;
}

.selected {
  margin: 10px 0 12px;
  padding: 9px 12px;
  min-height: 36px;
  border: 1px dashed rgba(200, 154, 82, .48);
  border-radius: 13px;
  background: rgba(255, 250, 239, .78);
  color: #8d654f;
}

.chips { gap: 9px; }

.chip,
.brand-chip {
  padding: 10px 13px;
  border-radius: 999px;
}

.input,
.service-chat-box {
  border-color: rgba(200, 154, 82, .48);
  background: rgba(255, 252, 246, .96);
  box-shadow: 0 12px 30px rgba(98, 64, 45, .13), inset 0 1px rgba(255, 255, 255, .8);
}

.send,
.service-chat-box button {
  background: linear-gradient(145deg, #eba88d, #c96f55);
  box-shadow: 0 8px 18px rgba(185, 101, 79, .24);
}

.primary,
.storybook-claim {
  min-height: 54px;
  border: 1px solid rgba(255, 237, 202, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, #ecac90, #c96f55);
  color: #fffdf7;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 13px 28px rgba(185, 101, 79, .28), inset 0 1px rgba(255, 255, 255, .45), 0 0 0 1px rgba(200, 154, 82, .2);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.primary:not(:disabled) {
  animation: ctaGlow 4.8s ease-in-out infinite;
}

.primary:disabled { opacity: .44; }

.secondary { color: #8f705d; }

.wheelbox {
  height: 205px;
  border-color: rgba(200, 154, 82, .48);
  border-radius: 24px;
  background:
    linear-gradient(rgba(255, 252, 246, .96), rgba(255, 247, 233, .94)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(98, 64, 45, .018) 3px 4px);
  box-shadow: var(--paper-shadow), inset 0 0 0 1px rgba(255, 255, 255, .8);
}

.wheelbox::before,
.wheelbox::after { height: 70px; }

.focus {
  top: 77px;
  height: 51px;
  border: 1px solid rgba(200, 154, 82, .62);
  background: linear-gradient(90deg, rgba(244, 191, 169, .36), rgba(255, 247, 232, .88), rgba(244, 191, 169, .36));
  box-shadow: 0 0 18px rgba(200, 154, 82, .14) inset;
}

.wheel {
  height: 205px;
  padding: 77px 0;
}

.wheel div { height: 51px; }
.wheel div.on { color: #9b563f; }

.product-list { gap: 12px; }

.product-box {
  border-color: rgba(200, 154, 82, .42);
  border-radius: 20px;
  background: rgba(255, 251, 243, .94);
  box-shadow: 0 11px 28px rgba(98, 64, 45, .1), inset 0 1px rgba(255, 255, 255, .75);
  transition: box-shadow .3s ease, transform .3s ease;
}

.product-box.open {
  box-shadow: 0 16px 36px rgba(98, 64, 45, .15), 0 0 0 1px rgba(200, 154, 82, .22);
  transform: translateY(-2px);
}

.product-head {
  padding: 15px 16px;
  background: linear-gradient(145deg, rgba(255, 253, 247, .97), rgba(255, 242, 226, .92));
  color: #684733;
}

.product-head::before {
  content: "✦";
  margin-right: 9px;
  color: var(--luxury-gold);
}

.brand-panel {
  border-color: rgba(200, 154, 82, .18);
  background: rgba(255, 249, 239, .78);
}

.product-box.open .brand-panel {
  animation: letterOpen .42s cubic-bezier(.2, .78, .2, 1) both;
}

.group-section { margin: 16px 0; }

.group-title {
  margin-bottom: 10px;
  font-family: "Songti SC", "STSong", serif;
  color: #704a34;
}

.group-title span {
  border: 1px solid rgba(200, 154, 82, .42);
  background: linear-gradient(145deg, #fff8e8, #f3d8ab);
  color: #8e5f28;
}

.group-card,
.card,
.pool-card,
.service-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(200, 154, 82, .42);
  background:
    linear-gradient(145deg, rgba(255, 254, 249, .97), rgba(255, 246, 232, .94)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(98, 64, 45, .018) 3px 4px);
  box-shadow: var(--paper-shadow), inset 0 0 0 1px rgba(255, 255, 255, .75);
}

.group-card {
  padding: 15px;
  border-radius: 19px;
  animation: paperSettle .55s cubic-bezier(.2, .78, .2, 1) both;
}

.group-card::after,
.card::after,
.service-hero::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 70px;
  height: 70px;
  opacity: .22;
  border: 1px solid var(--luxury-gold);
  border-radius: 70% 0 70% 0;
  transform: rotate(-18deg);
  pointer-events: none;
}

.group-card .time {
  display: inline-block;
  margin-top: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f2c4af, #f7ddc4);
  color: #984e3a;
}

.group-note {
  border: 1px dashed rgba(200, 154, 82, .48);
  border-radius: 17px;
  background: rgba(255, 249, 236, .86);
  color: #765643;
}

.card {
  padding: 17px;
  border-radius: 22px;
}

.card h3 {
  font-family: "Songti SC", "STSong", serif;
  font-size: 18px;
  color: #71472f;
}

.line {
  position: relative;
  padding: 11px 2px 11px 26px;
  border-color: rgba(200, 154, 82, .2);
  animation: confirmLine .5s both;
}

.line::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e6b193;
  color: white;
  font-size: 10px;
  box-shadow: 0 0 0 3px rgba(230, 177, 147, .16);
}

.service-hero {
  min-height: 208px;
  padding: 20px 17px 18px 151px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 246, 230, .97), rgba(246, 201, 184, .9) 58%, rgba(255, 250, 239, .96));
}

.service-hero .ip-large {
  left: 3px;
  bottom: -10px;
  width: 151px;
  height: 190px;
  filter: drop-shadow(0 14px 18px rgba(98, 64, 45, .16));
}

.service-hero h2 {
  color: #6f452e;
  font-family: "Songti SC", "STSong", serif;
}

.online-pill {
  background: rgba(255, 252, 246, .76);
  color: #6f8d68;
  box-shadow: 0 6px 14px rgba(98, 64, 45, .08);
}

.service-tags span {
  border: 1px solid rgba(200, 154, 82, .28);
  background: rgba(255, 252, 246, .74);
  color: #925c47;
}

.service-pool { gap: 11px; }

.pool-card {
  min-height: 122px;
  padding: 14px;
  border-radius: 20px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.pool-card:active {
  transform: translateY(2px) scale(.985);
}

.pool-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #f7d0bd, #fff1dc);
  box-shadow: 0 7px 14px rgba(138, 77, 58, .12);
}

.service-chat {
  background: linear-gradient(transparent, rgba(255, 247, 234, .94) 24%, rgba(255, 247, 234, .99));
}

.service-message .ip-small,
.service-chat-box .ip-small,
.floating-ip .ip-small {
  filter: drop-shadow(0 8px 12px rgba(98, 64, 45, .16));
}

.view-all {
  color: #a35740;
  font-weight: 700;
}

.conversation-history {
  top: 90px;
  background:
    linear-gradient(rgba(255, 249, 237, .9), rgba(255, 249, 237, .96)),
    url("room-base.webp") center / cover;
}

.history-head {
  border-color: rgba(200, 154, 82, .28);
  background: rgba(255, 252, 245, .92);
  backdrop-filter: blur(14px);
}

.history-head button {
  border: 1px solid rgba(200, 154, 82, .36);
  background: #fff5e8;
  color: #9c5943;
}

/* 序幕与场景一 */
.chat.storybook-mode {
  background:
    linear-gradient(180deg, rgba(255, 249, 238, .08), rgba(255, 246, 228, .2)),
    url("room-base.webp") center / cover no-repeat;
}

.storybook-opening::before {
  width: 200px;
  height: 32px;
  left: -36px;
  top: 24px;
  border: 9px solid rgba(223, 139, 114, .36);
  border-radius: 50%;
  background: transparent;
  filter: none;
  opacity: 1;
  transform: rotate(-26deg);
  animation: ribbonFloat 7s ease-in-out infinite alternate;
}

.storybook-opening::after {
  width: 62px;
  height: 62px;
  right: 24px;
  top: 30%;
  background: radial-gradient(circle, rgba(237, 201, 126, .34), transparent 68%);
  filter: blur(1px);
  animation: sparklePulse 4s ease-in-out infinite;
}

.opening-cards {
  top: 5.5%;
  left: 20px;
  right: 18px;
  gap: 10px;
}

.storybook-card {
  position: relative;
  isolation: isolate;
  min-height: 102px;
  padding: 25px 34px 23px;
  border: 1px solid rgba(176, 124, 40, .72);
  border-radius: 28px 25px 27px 23px;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .98), transparent 36%),
    repeating-linear-gradient(98deg, rgba(128, 91, 49, .018) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, rgba(255, 254, 248, .98), rgba(248, 238, 219, .96));
  box-shadow:
    0 18px 36px rgba(91, 59, 36, .16),
    inset 0 0 0 4px rgba(255, 252, 243, .96),
    inset 0 0 0 5px rgba(186, 133, 48, .4),
    inset 0 1px rgba(255, 255, 255, .9);
  color: #654127;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 19px;
  font-weight: 600;
  overflow: hidden;
}

.storybook-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px;
  border: 1px dashed rgba(184, 132, 45, .48);
  border-radius: 21px 19px 21px 17px;
  pointer-events: none;
}

.storybook-card.card-one {
  margin-right: 42px;
  padding-right: 67px;
  transform: translateY(10px) rotate(-3.1deg);
}

.storybook-card.card-two,
.storybook-card:nth-child(2) {
  min-height: 126px;
  margin-left: 43px;
  padding: 25px 56px 24px 28px;
  border-radius: 27px 25px 23px 29px;
  transform: translateY(10px) rotate(.8deg);
  animation: secondCardSettle .72s .28s cubic-bezier(.18, .9, .24, 1.08) forwards;
}

.paper-sprig {
  position: absolute;
  z-index: 1;
  width: 62px;
  height: 76px;
  overflow: visible;
  pointer-events: none;
}

.paper-sprig path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
}

.paper-sprig ellipse { fill: currentColor; }

.sprig-emboss {
  right: 7px;
  top: 7px;
  color: rgba(255, 255, 255, .82);
  filter: drop-shadow(1px 1px 0 rgba(176, 143, 99, .28));
  transform: rotate(9deg);
}

.sprig-gold {
  right: 0;
  bottom: -9px;
  color: #b6842d;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7));
  transform: rotate(3deg);
  animation: ornamentBreathe 4.8s ease-in-out infinite;
}

.card-spark {
  position: absolute;
  z-index: 2;
  color: #bd8a32;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 1px rgba(255, 255, 255, .8);
  animation: sparklePulse 3.8s ease-in-out infinite;
}

.spark-one { left: 15px; bottom: 11px; font-size: 13px; }
.spark-two { right: 23px; top: 16px; font-size: 15px; }
.spark-three { left: 18px; bottom: 12px; font-size: 12px; animation-delay: -1.7s; }

.paper-bow {
  position: absolute;
  z-index: 4;
  left: -17px;
  top: 12px;
  width: 34px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(135deg, #edc0aa, #d89175);
  box-shadow: inset 0 0 0 2px rgba(255, 241, 229, .6), 0 5px 8px rgba(93, 55, 36, .13);
  transform: rotate(-19deg);
}

.paper-bow::before,
.paper-bow::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 22px;
  height: 12px;
  background: linear-gradient(150deg, #efc5b2, #d98f73);
  border-radius: 60% 14% 60% 20%;
}

.paper-bow::before { right: 23px; transform: rotate(22deg); }
.paper-bow::after { left: 23px; transform: scaleX(-1) rotate(22deg); }

.card-sheen {
  position: absolute;
  z-index: 0;
  inset: -45% -35%;
  background: linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, .7) 50%, transparent 57%);
  transform: translateX(-48%);
  pointer-events: none;
  animation: goldSweep 5.8s 1.3s ease-in-out infinite;
}

.opening-character {
  bottom: -1.5%;
  width: min(78%, 312px);
  height: 57%;
  filter: drop-shadow(0 20px 24px rgba(98, 64, 45, .16));
}

.opening-character::after {
  background: rgba(185, 101, 79, .14);
}

.storybook-transitioning::after {
  background:
    radial-gradient(circle at 50% 70%, rgba(255, 252, 244, .94), rgba(255, 246, 229, .9) 48%, rgba(234, 184, 156, .76)),
    url("room-base.webp") center / cover;
}

.storybook-scene-one {
  background: transparent;
}

.story-history {
  border-color: rgba(200, 154, 82, .38);
  background: rgba(255, 251, 241, .9);
  color: #775643;
  box-shadow: 0 12px 30px rgba(98, 64, 45, .12);
}

.story-history::before {
  content: "";
  width: 28px;
  height: 28px;
  top: 12px;
  background: #f3c3af url("douzhidao-coral-gift-v4.webp") center 14% / 160% auto no-repeat;
  box-shadow: 0 0 0 1px rgba(200, 154, 82, .45);
}

.scene-one-page {
  top: 138px;
  left: 28px;
  right: 20px;
  bottom: 112px;
  padding: 21px 20px 24px 27%;
  border-color: rgba(200, 154, 82, .52);
  background: linear-gradient(145deg, rgba(255, 254, 248, .96), rgba(255, 246, 232, .94));
  box-shadow: var(--paper-shadow), inset 0 0 0 1px rgba(255, 255, 255, .8);
}

.scene-one-page::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 12px;
  width: 64px;
  height: 64px;
  opacity: .28;
  border: 1px solid var(--luxury-gold);
  border-radius: 70% 0 70% 0;
  transform: rotate(-15deg);
}

.scene-one-page h3 {
  color: #815038;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
}

.benefit-ribbon { gap: 7px; }

.benefit-tag {
  border-color: rgba(200, 154, 82, .38);
  border-radius: 999px;
  box-shadow: 0 7px 14px rgba(98, 64, 45, .08);
}

.benefit-tag.show {
  animation: benefitReveal .6s cubic-bezier(.2, .9, .2, 1) both, benefitGlow 3.8s .8s ease-in-out infinite;
}

.benefit-tag[data-benefit="trial"] { background: #f7dfbd; }
.benefit-tag[data-benefit="discount"] { background: #f6c7b5; }
.benefit-tag[data-benefit="activity"] { background: #f2d9b3; }

.scene-one-copy {
  color: #664633;
  font-size: 15px;
  line-height: 1.82;
}

.scene-one-character {
  bottom: 64px;
  width: 49%;
  height: 45%;
  filter: drop-shadow(0 16px 22px rgba(98, 64, 45, .17));
}

.phone:has(.chat.scene-one-mode) > .header,
.phone:has(.chat.scene-one-mode) > .luxury-progress {
  display: none;
}

.chat.storybook-mode.scene-one-mode {
  height: 100%;
  padding: 0;
}

.chat.scene-one-mode::before { inset: 0; }

.chat.scene-one-mode::after {
  top: 118px;
  right: 22px;
}

.chat.scene-one-mode #messages { height: 100%; }

.storybook-scene-one {
  position: relative;
  height: 100%;
  min-height: 620px;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 251, 243, .16), rgba(255, 244, 226, .08));
}

.scene-one-nav {
  position: absolute;
  z-index: 12;
  top: max(17px, env(safe-area-inset-top));
  left: 21px;
  right: 23px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: #75451f;
  background: transparent;
  animation: sceneNavIn .55s ease both;
}

.scene-one-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.scene-one-identity > img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border: 3px solid rgba(255, 255, 255, .94);
  border-radius: 50%;
  background: #f4c2ae;
  object-fit: cover;
  object-position: 50% 18%;
  box-shadow: 0 0 0 1px rgba(194, 139, 67, .52), 0 8px 18px rgba(98, 64, 45, .15);
}

.scene-one-identity strong {
  display: block;
  margin: 1px 0 4px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 23px;
  line-height: 1;
  letter-spacing: .04em;
}

.scene-one-identity span {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #9a795f;
  font-size: 12px;
  letter-spacing: .02em;
}

.scene-one-online {
  width: 6px;
  height: 6px;
  margin: 0 6px;
  border-radius: 50%;
  background: #77976f;
  box-shadow: 0 0 0 4px rgba(119, 151, 111, .1);
  animation: luxuryOnline 2.2s ease-in-out infinite;
}

.scene-one-paper {
  position: absolute;
  z-index: 6;
  top: 108px;
  left: 31px;
  right: 26px;
  min-height: 211px;
  margin: 0;
  padding: 45px 41px 30px;
  overflow: visible;
  border: 1px solid rgba(194, 139, 67, .72);
  border-radius: 26px;
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, .96), transparent 34%),
    repeating-linear-gradient(92deg, rgba(168, 132, 84, .018) 0 1px, transparent 1px 4px),
    rgba(255, 251, 242, .96);
  box-shadow: 0 18px 36px rgba(98, 64, 45, .17), inset 0 1px rgba(255, 255, 255, .9);
  transform: rotate(-1.35deg);
  animation: scenePaperDrop .68s .08s cubic-bezier(.18, .82, .2, 1) both;
}

.scene-one-paper::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 1;
  border: 1px dashed rgba(190, 142, 69, .58);
  border-radius: 20px;
  pointer-events: none;
}

.scene-one-paper::after {
  content: "✦";
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 15px;
  color: rgba(190, 139, 55, .72);
  font-size: 11px;
  text-shadow: -244px 4px 0 rgba(190, 139, 55, .38);
}

.scene-one-bow {
  position: absolute;
  z-index: 8;
  left: -17px;
  top: 7px;
  width: 43px;
  height: 24px;
  border-radius: 6px 10px 6px 12px;
  background: linear-gradient(135deg, #f8c8b5, #d98e73);
  box-shadow: inset 0 1px rgba(255, 255, 255, .66), 0 5px 11px rgba(114, 68, 50, .2);
  transform: rotate(-17deg);
}

.scene-one-bow::before,
.scene-one-bow::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 29px;
  height: 15px;
  border-radius: 60% 16% 60% 18%;
  background: linear-gradient(135deg, #f8d2c3, #d8896d);
}

.scene-one-bow::before { right: 29px; transform: rotate(-16deg); }
.scene-one-bow::after { left: 29px; transform: scaleX(-1) rotate(-16deg); }

.scene-one-paper .paper-sprig {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.scene-one-emboss {
  top: 8px;
  right: 10px;
  width: 73px;
  height: 87px;
  opacity: .55;
  fill: rgba(255, 255, 255, .78);
  stroke: rgba(209, 191, 164, .68);
  filter: drop-shadow(1px 2px 1px rgba(132, 99, 64, .13));
}

.scene-one-gold {
  right: -4px;
  bottom: -8px;
  width: 63px;
  height: 80px;
  fill: rgba(196, 143, 62, .72);
  stroke: rgba(177, 121, 42, .78);
  transform: rotate(14deg);
}

.scene-one-copy {
  position: relative;
  z-index: 4;
  margin: 0;
  color: #68452e;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.86;
  letter-spacing: .015em;
}

.scene-one-paper .ink-typing::after { background: #c39751; }

.benefit-ribbon {
  position: absolute;
  z-index: 7;
  top: 334px;
  left: 20px;
  right: 20px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
}

.benefit-tag {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 76px;
  padding: 12px 4px 8px;
  border: 1px solid rgba(190, 139, 68, .68);
  border-radius: 38px 38px 15px 15px;
  background: linear-gradient(180deg, rgba(255, 252, 243, .98), rgba(250, 235, 212, .97));
  color: #744a2c;
  text-align: center;
  box-shadow: 0 10px 18px rgba(98, 64, 45, .13), inset 0 1px rgba(255, 255, 255, .9);
  opacity: 0;
  transform: translateY(10px) scale(.92);
}

.benefit-tag::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(190, 142, 69, .46);
  border-radius: 32px 32px 11px 11px;
  pointer-events: none;
}

.benefit-tag::after {
  content: "✦";
  position: absolute;
  right: 9px;
  top: 31px;
  color: rgba(190, 139, 55, .7);
  font-size: 9px;
}

.benefit-tag.show {
  opacity: 1;
  transform: none;
  animation: benefitReveal .6s cubic-bezier(.2, .9, .2, 1) both, benefitGlow 4.6s .9s ease-in-out infinite;
}

.benefit-tag[data-benefit="trial"],
.benefit-tag[data-benefit="discount"],
.benefit-tag[data-benefit="activity"] {
  background: linear-gradient(180deg, rgba(255, 252, 243, .98), rgba(250, 235, 212, .97));
}

.benefit-icon {
  position: relative;
  z-index: 2;
  display: block;
  width: 29px;
  height: 29px;
  margin: 0 auto 2px;
  fill: none;
  stroke: #8d653b;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit-tag b {
  position: relative;
  z-index: 2;
  display: block;
  font-family: "Songti SC", "STSong", serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.scene-one-character {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 94px;
  width: min(57%, 224px);
  height: 42%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 17px 21px rgba(98, 64, 45, .17));
  transform: translateX(-50%);
  animation: sceneCharacterArrive .75s .34s cubic-bezier(.18, .8, .22, 1) both, sceneCharacterWave 3.8s 1.1s ease-in-out infinite;
}

.chat.scene-one-mode .dock {
  position: absolute;
  z-index: 12;
  left: 28px;
  right: 28px;
  bottom: calc(17px + env(safe-area-inset-bottom));
  padding: 0;
}

.storybook-claim {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(245, 216, 162, .95);
  border-radius: 30px;
  background: linear-gradient(180deg, #ffdda0 0%, #f2bb6b 55%, #dc964b 100%);
  color: #70431f;
  font-family: "Songti SC", "STSong", serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 1px rgba(255, 242, 205, .75);
  box-shadow: 0 12px 24px rgba(137, 86, 30, .24), inset 0 1px rgba(255, 255, 255, .78), inset 0 -4px 8px rgba(175, 99, 31, .1);
}

.storybook-claim::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 245, 210, .72);
  border-radius: inherit;
  pointer-events: none;
}

.storybook-claim::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -35%;
  width: 28%;
  height: 330%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: rotate(20deg);
  animation: claimSweep 5.2s 1.2s ease-in-out infinite;
}

.storybook-claim i,
.storybook-claim span {
  position: relative;
  z-index: 2;
}

.storybook-claim i {
  color: rgba(137, 87, 35, .54);
  font-size: 18px;
  font-style: normal;
}

.storybook-claim i:last-child { transform: scaleX(-1); }

.storybook-claim.reveal {
  animation: claimReveal .48s cubic-bezier(.18, .82, .2, 1) both, sceneClaimGlow 4.2s 1s ease-in-out infinite;
}

.storybook-claim:active { transform: scale(.975); }

@media (max-width: 390px) {
  .scene-one-nav { left: 17px; right: 18px; }
  .scene-one-identity > img { width: 54px; height: 54px; flex-basis: 54px; }
  .scene-one-identity strong { font-size: 21px; }
  .scene-one-identity span { font-size: 11px; }
  .scene-one-paper { left: 24px; right: 22px; padding: 42px 34px 27px; }
  .scene-one-copy { font-size: 15px; line-height: 1.82; }
  .benefit-ribbon { left: 14px; right: 14px; gap: 7px; }
  .benefit-tag { min-height: 72px; }
  .benefit-icon { width: 26px; height: 26px; }
  .benefit-tag b { font-size: 13px; }
  .scene-one-character { width: min(55%, 196px); }
  .chat.scene-one-mode .dock { left: 23px; right: 23px; }
  .storybook-claim { height: 56px; font-size: 16px; }
}

@media (max-height: 760px) {
  .scene-one-paper { top: 94px; min-height: 188px; padding-top: 38px; }
  .benefit-ribbon { top: 293px; }
  .benefit-tag { min-height: 68px; padding-top: 8px; }
  .scene-one-character { bottom: 88px; height: 39%; }
}

@keyframes sceneNavIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes scenePaperDrop {
  from { opacity: 0; transform: translateY(-18px) rotate(-3deg) scale(.97); }
  72% { opacity: 1; transform: translateY(2px) rotate(-1deg) scale(1.006); }
  to { transform: rotate(-1.35deg); }
}

@keyframes sceneCharacterArrive {
  from { opacity: 0; transform: translate(-50%, 22px) scale(.94); }
  to { opacity: 1; transform: translateX(-50%); }
}

@keyframes sceneCharacterWave {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  45% { transform: translate(-50%, -3px) rotate(-.7deg) scale(1.008); }
  70% { transform: translate(-50%, -1px) rotate(.45deg); }
}

@keyframes claimReveal {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes sceneClaimGlow {
  50% { filter: brightness(1.055); box-shadow: 0 15px 30px rgba(137, 86, 30, .3), 0 0 22px rgba(242, 191, 105, .23), inset 0 1px rgba(255, 255, 255, .85); }
}

@keyframes claimSweep {
  0%, 72% { left: -35%; opacity: 0; }
  82% { opacity: .62; }
  100% { left: 118%; opacity: 0; }
}

@keyframes roomDrift {
  from { transform: translate3d(-2px, -2px, 0) scale(1.01); }
  to { transform: translate3d(4px, 5px, 0) scale(1.025); }
}

@keyframes ribbonFloat {
  from { transform: rotate(-26deg) translate3d(-2px, 0, 0); }
  to { transform: rotate(-22deg) translate3d(7px, 4px, 0); }
}

@keyframes sparklePulse {
  0%, 100% { opacity: .38; transform: scale(.82) rotate(-8deg); }
  50% { opacity: .9; transform: scale(1.08) rotate(7deg); }
}

@keyframes secondCardSettle {
  0% { opacity: 0; transform: translate3d(0, 22px, 0) rotate(2.2deg) scale(.97); }
  70% { opacity: 1; transform: translate3d(0, -2px, 0) rotate(.4deg) scale(1.005); }
  100% { opacity: 1; transform: rotate(.8deg); }
}

@keyframes ornamentBreathe {
  50% { opacity: .68; transform: rotate(6deg) translateY(-2px); }
}

@keyframes goldSweep {
  0%, 72% { transform: translateX(-48%); opacity: 0; }
  82% { opacity: .68; }
  100% { transform: translateX(48%); opacity: 0; }
}

@keyframes luxuryOnline {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.82); }
}

@keyframes sceneReveal {
  0% { opacity: .1; transform: translate3d(0, 18px, 0) scale(.992); filter: blur(4px); }
  55% { opacity: 1; filter: blur(0); }
  100% { transform: none; }
}

@keyframes sceneArchive {
  to { opacity: .16; transform: translate3d(0, -18px, 0) scale(.985); filter: blur(2px); }
}

@keyframes paperSettle {
  0% { opacity: 0; transform: translate3d(0, 16px, 0) rotate(.8deg) scale(.982); }
  68% { opacity: 1; transform: translate3d(0, -2px, 0) rotate(-.18deg) scale(1.003); }
  100% { transform: none; }
}

@keyframes dockRise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes ipSpeak {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-3px) rotate(-1.5deg) scale(1.025); }
  70% { transform: translateY(-1px) rotate(1deg); }
}

@keyframes ctaGlow {
  0%, 100% { filter: brightness(1); box-shadow: 0 13px 28px rgba(185, 101, 79, .25), inset 0 1px rgba(255, 255, 255, .45); }
  50% { filter: brightness(1.045); box-shadow: 0 16px 34px rgba(185, 101, 79, .34), 0 0 24px rgba(237, 201, 126, .2), inset 0 1px rgba(255, 255, 255, .52); }
}

@keyframes letterOpen {
  from { opacity: 0; transform: translateY(-10px) scaleY(.94); transform-origin: top; }
  to { opacity: 1; transform: none; }
}

@keyframes confirmLine {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes benefitReveal {
  0% { opacity: 0; transform: translateY(9px) scale(.88); }
  65% { opacity: 1; transform: translateY(-2px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}

@keyframes benefitGlow {
  50% { box-shadow: 0 8px 18px rgba(200, 154, 82, .18), 0 0 0 3px rgba(255, 255, 255, .32); }
}

@media (max-width: 820px) {
  .phone { border: 0; }
  .header.luxury-header { padding-top: max(13px, env(safe-area-inset-top)); }
  .chat.luxury-stage::after { right: 22px; }
}

@media (max-height: 760px) {
  .header.luxury-header { height: 80px; padding-top: 11px; }
  .header-avatar { width: 46px; height: 46px; flex-basis: 46px; }
  .chat.luxury-stage { height: calc(100% - 82px); }
  .opening-cards { top: 4%; }
  .storybook-card { min-height: 80px; padding: 17px 25px; font-size: 17px; }
  .storybook-card.card-one { padding-right: 58px; }
  .storybook-card.card-two { min-height: 102px; padding: 17px 47px 18px 20px; }
  .opening-character { height: 51%; }
}

.phone:has(.chat.prelude-transparent) > .header.luxury-header {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.phone:has(.chat.prelude-transparent) > .luxury-progress { display: none; }

.chat.prelude-transparent ~ * { pointer-events: none; }

.phone:has(.chat.immersive-mode) > .header,
.phone:has(.chat.immersive-mode) > .luxury-progress { display: none; }

.chat.immersive-mode {
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.chat.immersive-mode::before { inset: 0; }
.chat.immersive-mode #messages { height: 100%; }

.immersive-scene {
  position: relative;
  height: 100%;
  min-height: 620px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 251, 242, .1), rgba(255, 241, 220, .06));
}

.immersive-nav {
  position: absolute;
  z-index: 14;
  top: max(17px, env(safe-area-inset-top));
  left: 20px;
  right: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: #75451f;
  animation: sceneNavIn .5s ease both;
}

.immersive-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.immersive-identity > img { width: 56px; height: 56px; flex: 0 0 56px; border: 3px solid rgba(255,255,255,.94); border-radius: 50%; background: #f4c2ae; object-fit: cover; object-position: 50% 18%; box-shadow: 0 0 0 1px rgba(194,139,67,.52), 0 8px 18px rgba(98,64,45,.15); }
.immersive-identity strong { display: block; margin: 1px 0 4px; font-family: "Songti SC", "STSong", serif; font-size: 22px; line-height: 1; letter-spacing: .04em; }
.immersive-identity span { display: flex; align-items: center; white-space: nowrap; color: #9a795f; font-size: 11px; }
.immersive-identity span i { width: 6px; height: 6px; margin: 0 5px; border-radius: 50%; background: #77976f; box-shadow: 0 0 0 4px rgba(119,151,111,.1); }
.immersive-paper {
  position: absolute;
  z-index: 7;
  top: 107px;
  left: 29px;
  right: 25px;
  min-height: 177px;
  margin: 0;
  padding: 35px 39px 28px;
  border: 1px solid rgba(194,139,67,.68);
  border-radius: 25px;
  background: repeating-linear-gradient(92deg,rgba(168,132,84,.018) 0 1px,transparent 1px 4px),rgba(255,251,242,.96);
  box-shadow: 0 17px 34px rgba(98,64,45,.16), inset 0 1px rgba(255,255,255,.9);
  transform: rotate(-1deg);
  animation: scenePaperDrop .64s .06s cubic-bezier(.18,.82,.2,1) both;
}

.immersive-paper::before { content:""; position:absolute; inset:7px; border:1px dashed rgba(190,142,69,.54); border-radius:19px; pointer-events:none; }
.immersive-paper::after { content:"✦"; position:absolute; right:17px; bottom:14px; color:rgba(190,139,55,.62); font-size:10px; }
.immersive-bow { position:absolute; z-index:3; left:-14px; top:7px; width:39px; height:21px; border-radius:7px; background:linear-gradient(135deg,#f7c6b3,#d98e73); box-shadow:0 5px 10px rgba(114,68,50,.18); transform:rotate(-17deg); }
.immersive-bow::before,.immersive-bow::after { content:""; position:absolute; top:6px; width:25px; height:13px; border-radius:60% 16% 60% 18%; background:linear-gradient(135deg,#f8d2c3,#d8896d); }
.immersive-bow::before { right:27px; transform:rotate(-16deg); }
.immersive-bow::after { left:27px; transform:scaleX(-1) rotate(-16deg); }
.immersive-sprig { position:absolute; right:5px; top:5px; width:62px; height:76px; opacity:.45; fill:rgba(255,255,255,.8); stroke:rgba(194,169,135,.7); filter:drop-shadow(1px 2px 1px rgba(132,99,64,.13)); }
.immersive-copy { position:relative; z-index:2; margin:0; color:#68452e; font-family:"Songti SC","STSong",serif; font-size:15px; font-weight:600; line-height:1.78; letter-spacing:.01em; }

.immersive-options { position:absolute; z-index:8; left:20px; right:20px; top:306px; }
.immersive-character { position:absolute; z-index:5; left:50%; bottom:78px; width:min(49%,205px); height:36%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 16px 20px rgba(98,64,45,.16)); transform:translateX(-50%); animation:sceneCharacterArrive .7s .28s cubic-bezier(.18,.8,.22,1) both,sceneCharacterWave 4.2s 1.1s ease-in-out infinite; }

.chat.immersive-mode .dock { position:absolute; z-index:14; left:25px; right:25px; bottom:calc(17px + env(safe-area-inset-bottom)); padding:0; }
.immersive-primary { position:relative; display:flex; align-items:center; justify-content:center; gap:11px; width:100%; height:56px; border:1px solid rgba(245,216,162,.95); border-radius:30px; background:linear-gradient(180deg,#ffdda0,#f2bb6b 55%,#dc964b); color:#70431f; font-family:"Songti SC","STSong",serif; font-size:17px; font-weight:700; box-shadow:0 12px 24px rgba(137,86,30,.24),inset 0 1px rgba(255,255,255,.78); opacity:0; transform:translateY(12px); transition:.28s ease; }
.immersive-primary::before { content:""; position:absolute; inset:5px; border:1px solid rgba(255,245,210,.72); border-radius:inherit; }
.immersive-primary.reveal { opacity:1; transform:none; }
.immersive-primary:disabled { opacity:.42; filter:saturate(.45); }
.immersive-primary i,.immersive-primary span { position:relative; z-index:2; }
.immersive-primary i { color:rgba(137,87,35,.52); font-style:normal; }
.immersive-primary i:last-child { transform:scaleX(-1); }

.scene-two-paper { min-height:214px; padding-top:32px; }
.scene-two-services .immersive-options { top:337px; }
.service-notes { display:flex; gap:8px; }
.service-notes > span { flex:1; min-width:0; min-height:74px; display:grid; place-items:center; align-content:center; border:1px solid rgba(190,139,68,.62); border-radius:36px 36px 14px 14px; background:rgba(255,249,236,.95); box-shadow:0 9px 17px rgba(98,64,45,.12); opacity:0; transform:translateY(10px) scale(.92); }
.service-notes > span.show { animation:benefitReveal .56s cubic-bezier(.2,.9,.2,1) both; }
.service-notes b { font-size:24px; line-height:1; color:#8c623b; }
.service-notes small { margin-top:5px; color:#744a2c; font-family:"Songti SC","STSong",serif; font-size:13px; }
.scene-two-services .immersive-character { width:min(45%,190px); }

.scene-three-paper { min-height:128px; padding-top:33px; }
.scene-three-identities .immersive-options { top:254px; }
.scene-three-identities { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.scene-three-card { position:relative; min-height:163px; padding:20px 10px 16px; border:1px solid rgba(190,139,68,.62); border-radius:54px 54px 20px 20px; background:rgba(255,249,236,.96); color:#754a2d; box-shadow:0 12px 22px rgba(98,64,45,.13),inset 0 0 0 5px rgba(255,255,255,.42); transition:.34s ease; }
.scene-three-card::before { content:""; position:absolute; inset:6px; border:1px dashed rgba(190,142,69,.43); border-radius:47px 47px 15px 15px; }
.scene-three-card .identity-symbol { position:relative; z-index:2; display:block; margin-bottom:14px; font-size:43px; color:#b77f42; }
.scene-three-card b,.scene-three-card small { position:relative; z-index:2; display:block; }
.scene-three-card b { font-family:"Songti SC","STSong",serif; font-size:15px; line-height:1.42; }
.scene-three-card small { margin-top:7px; color:#a07b61; }
.scene-three-card.selected { border-color:#bd8036; transform:translateY(-5px); box-shadow:0 17px 28px rgba(143,91,34,.22),0 0 0 3px rgba(232,190,119,.24); }
.scene-three-card.selected::after { content:"已选择"; position:absolute; right:8px; top:8px; padding:4px 6px; border:1px solid #b97d39; border-radius:50%; color:#9b632b; font-size:9px; transform:rotate(12deg); }
.scene-three-card.muted { opacity:.38; transform:scale(.96); }
.scene-three-identities .immersive-character { width:min(38%,158px); height:31%; }

.scene-four-paper { min-height:123px; }
.scene-four-wheel .immersive-options { top:245px; left:48px; right:48px; }
.scene-four-wheel { position:relative; height:235px; overflow:hidden; border:1px solid rgba(190,139,68,.65); border-radius:88px 88px 24px 24px; background:rgba(255,250,239,.95); box-shadow:0 15px 29px rgba(98,64,45,.14); }
.scene-four-wheel::before,.scene-four-wheel::after { content:""; position:absolute; z-index:4; left:0; right:0; height:80px; pointer-events:none; }
.scene-four-wheel::before { top:0; background:linear-gradient(#fff9ed,transparent); }
.scene-four-wheel::after { bottom:0; background:linear-gradient(transparent,#fff9ed); }
.scene-four-focus { position:absolute; z-index:2; left:15px; right:15px; top:91px; height:53px; border:1px solid rgba(202,151,72,.7); border-radius:18px; background:linear-gradient(180deg,rgba(255,233,183,.76),rgba(249,209,137,.48)); box-shadow:inset 0 0 0 4px rgba(255,255,255,.32); }
.scene-four-list { position:relative; z-index:3; height:235px; overflow-y:auto; scroll-snap-type:y mandatory; padding:91px 0; scrollbar-width:none; }
.scene-four-list::-webkit-scrollbar { display:none; }
.scene-four-list > div { height:53px; display:grid; place-items:center; scroll-snap-align:center; color:#b39a83; font-family:"Songti SC","STSong",serif; font-size:16px; transition:.18s; }
.scene-four-list > div.on { color:#74451f; font-size:25px; font-weight:700; }
.scene-four-selected { margin-top:10px; color:#7f604c; font-size:12px; text-align:center; }
.immersive-scene.scene-four-wheel .immersive-character { z-index:9; left:auto; right:10px; bottom:88px; width:132px; height:25%; transform:none; opacity:.9; }

.scene-five-paper { min-height:160px; padding-top:31px; }
.scene-five-products .immersive-options { top:280px; bottom:82px; display:flex; flex-direction:column; }
.scene-five-products { min-height:0; }
.scene-five-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:318px; padding:3px 2px 10px; overflow-y:auto; scrollbar-width:none; }
.scene-five-grid::-webkit-scrollbar { display:none; }
.scene-five-card { position:relative; min-height:76px; padding:9px 4px 7px; border:1px solid rgba(190,139,68,.5); border-radius:25px 25px 12px 12px; background:rgba(255,250,239,.95); color:#775038; box-shadow:0 7px 14px rgba(98,64,45,.1); transition:.2s ease; }
.scene-five-card::before { content:""; position:absolute; inset:4px; border:1px dashed rgba(190,142,69,.35); border-radius:21px 21px 9px 9px; }
.scene-five-card > span,.scene-five-card > b,.scene-five-card > i { position:relative; z-index:2; }
.scene-five-card > span { display:block; margin-bottom:3px; color:#a7733a; font-size:24px; }
.scene-five-card > b { display:block; font-family:"Songti SC","STSong",serif; font-size:12px; }
.scene-five-card > i { display:none; position:absolute; right:5px; top:5px; width:19px; height:19px; border-radius:50%; background:#c58b41; color:#fff; font-size:12px; font-style:normal; line-height:19px; }
.scene-five-card.selected { border-color:#bd8036; background:linear-gradient(180deg,#fff7e7,#f6d8a8); transform:translateY(-2px); box-shadow:0 10px 18px rgba(143,91,34,.19); }
.scene-five-card.selected > i { display:block; }
.scene-five-other-input { display:none; gap:7px; margin-top:7px; padding:5px 5px 5px 12px; border:1px solid rgba(190,139,68,.55); border-radius:17px; background:rgba(255,251,243,.97); }
.scene-five-other-input.show { display:flex; }
.scene-five-other-input input { min-width:0; flex:1; border:0; outline:0; background:transparent; }
.scene-five-other-input button { border:0; border-radius:12px; padding:0 15px; background:#dfa85d; color:#fff; }
.scene-five-count { padding-top:7px; color:#7f604c; font-size:12px; text-align:center; }
.scene-five-products .immersive-character { display:none; }

@media (max-width:390px) {
  .immersive-nav { left:16px; right:17px; }
  .immersive-identity > img { width:52px; height:52px; flex-basis:52px; }
  .immersive-identity strong { font-size:20px; }
  .immersive-identity span { font-size:10px; }
  .immersive-paper { left:23px; right:21px; padding-left:32px; padding-right:32px; }
  .immersive-copy { font-size:14px; line-height:1.72; }
  .immersive-options { left:14px; right:14px; }
  .chat.immersive-mode .dock { left:22px; right:22px; }
  .scene-three-identities { gap:8px; }
  .scene-three-card { min-height:154px; }
  .scene-four-wheel .immersive-options { left:42px; right:42px; }
  .scene-five-grid { gap:7px; }
}

@media (max-height:760px) {
  .immersive-paper { top:94px; min-height:132px; padding-top:29px; }
  .scene-two-paper { min-height:190px; }
  .scene-two-services .immersive-options { top:294px; }
  .scene-three-identities .immersive-options { top:230px; }
  .scene-three-card { min-height:145px; }
  .scene-four-wheel .immersive-options { top:220px; }
  .scene-four-wheel,.scene-four-list { height:210px; }
  .scene-four-focus { top:78px; }
  .scene-four-list { padding:78px 0; }
  .scene-five-products .immersive-options { top:247px; }
  .scene-five-grid { max-height:270px; }
}

.scene-six-paper,.scene-seven-paper,.scene-eight-paper,.scene-nine-paper,.scene-ten-paper{min-height:136px}
.scene-six-brands .immersive-options,.scene-seven-timeline .immersive-options,.scene-eight-services .immersive-options,.scene-nine-notify .immersive-options,.scene-ten-summary .immersive-options{top:252px;bottom:82px}
.scene-six-progress{margin-bottom:8px;color:#7d5a42;font-size:12px;text-align:center}.scene-six-stack{display:grid;gap:7px;max-height:390px;overflow-y:auto;padding:2px;scrollbar-width:none}.scene-six-stack::-webkit-scrollbar{display:none}.scene-six-card{border:1px solid rgba(190,139,68,.55);border-radius:20px;background:rgba(255,250,239,.96);box-shadow:0 8px 17px rgba(98,64,45,.11);overflow:hidden;transition:.28s}.scene-six-card.completed{border-color:#bc8039}.scene-six-head{width:100%;display:grid;grid-template-columns:32px 1fr auto 18px;align-items:center;gap:5px;border:0;background:transparent;padding:11px;color:#744c31;text-align:left}.scene-six-head>span{font-size:23px;color:#ad763a}.scene-six-head b{font-family:"Songti SC","STSong",serif;font-size:14px}.scene-six-head small{max-width:130px;overflow:hidden;color:#9a7b66;font-size:10px;white-space:nowrap;text-overflow:ellipsis}.scene-six-card.completed .scene-six-head::after{content:"已记录";position:absolute;right:26px;color:#a36d32;font-size:9px}.scene-six-brand-list{display:none;flex-wrap:wrap;gap:6px;padding:0 11px 12px}.scene-six-card.active .scene-six-brand-list{display:flex;animation:paperCardIn .3s ease both}.scene-six-brand-list button{border:1px solid rgba(190,139,68,.45);border-radius:99px;background:#fffaf0;padding:7px 9px;color:#77533c;font-size:11px}.scene-six-brand-list button.selected{border-color:#b97b34;background:#f3d49d;color:#6b421f;box-shadow:0 0 0 2px rgba(221,178,104,.2)}
.scene-seven-timeline{height:100%;overflow-y:auto;padding:2px 3px 10px;scrollbar-width:none}.scene-seven-timeline::-webkit-scrollbar{display:none}.timeline-lane{position:relative;margin-bottom:13px;padding-left:18px}.timeline-lane::before{content:"";position:absolute;left:5px;top:31px;bottom:4px;width:2px;background:linear-gradient(#c89347,#ecd8b0)}.timeline-lane h3{display:flex;align-items:center;gap:7px;margin:0 0 7px;color:#70472c;font-family:"Songti SC","STSong",serif;font-size:15px}.timeline-lane h3 span{padding:3px 7px;border-radius:99px;background:#f2d8a7;font-size:10px}.timeline-item{position:relative;margin-bottom:7px;padding:9px 10px;border:1px solid rgba(190,139,68,.42);border-radius:15px;background:rgba(255,250,239,.95);box-shadow:0 6px 14px rgba(98,64,45,.09)}.timeline-item>i{position:absolute;left:-17px;top:17px;width:9px;height:9px;border-radius:50%;background:#c48a3c;box-shadow:0 0 0 4px #f7e6c7}.timeline-item div{display:grid;grid-template-columns:1fr auto;gap:3px}.timeline-item b{color:#70472c;font-size:12px}.timeline-item small{grid-column:1/-1;color:#967764;font-size:10px}.timeline-item em{color:#8b7a58;font-size:10px;font-style:normal}.timeline-item strong{color:#b06f2e;font-size:11px}.timeline-disclaimer{margin:5px 0;color:#927560;font-size:10px;text-align:center}.timeline-benefit{padding:9px 10px;border:1px dashed #c9974f;border-radius:13px;background:rgba(250,226,180,.65);color:#795032;font-size:11px}
.scene-eight-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:380px;overflow-y:auto;padding:2px;scrollbar-width:none}.scene-eight-grid button{position:relative;min-height:101px;border:1px solid rgba(190,139,68,.48);border-radius:26px 26px 14px 14px;background:rgba(255,250,239,.96);padding:12px 8px;color:#765038;box-shadow:0 7px 15px rgba(98,64,45,.1);transition:.22s}.scene-eight-grid button>span{display:block;margin-bottom:5px;font-size:23px}.scene-eight-grid button b{display:block;font-family:"Songti SC","STSong",serif;font-size:12px}.scene-eight-grid button small{display:block;margin-top:4px;color:#9b7b66;font-size:9px;line-height:1.35}.scene-eight-grid button i{display:none;position:absolute;right:7px;top:6px;color:#b67831}.scene-eight-grid button.selected{border-color:#b97b34;background:linear-gradient(#fff8e9,#f3d49d);transform:translateY(-2px)}.scene-eight-grid button.selected i{display:block}.scene-eight-count{padding-top:7px;color:#7d5b43;font-size:11px;text-align:center}
.scene-nine-notify .immersive-options{overflow-y:auto;padding:2px;scrollbar-width:none}.scene-nine-preview{padding:12px 14px;border:1px solid rgba(190,139,68,.52);border-radius:21px;background:rgba(255,251,244,.97);box-shadow:0 10px 20px rgba(98,64,45,.12)}.scene-nine-preview span{color:#a87034;font-size:11px;font-weight:800}.scene-nine-preview p{margin:6px 0 0;color:#664634;font-size:12px;line-height:1.55}.notify-promises{display:flex;justify-content:space-between;gap:4px;padding:9px 2px;color:#7e684e;font-size:9px}.scene-nine-choices{display:grid;gap:7px}.scene-nine-choices button{border:1px solid rgba(190,139,68,.5);border-radius:16px;background:rgba(255,250,239,.96);padding:13px;color:#755039;font-family:"Songti SC","STSong",serif}.scene-nine-choices button.selected{border-color:#b97b34;background:#f3d49d;box-shadow:0 0 0 3px rgba(218,171,94,.18)}
.scene-ten-summary .immersive-options{overflow-y:auto;padding:2px;scrollbar-width:none}.scene-ten-profile{position:relative;border:1px solid rgba(190,139,68,.62);border-radius:23px;background:rgba(255,251,242,.97);padding:17px 15px;box-shadow:0 13px 26px rgba(98,64,45,.14)}.scene-ten-profile::before{content:"";position:absolute;inset:6px;border:1px dashed rgba(190,142,69,.42);border-radius:18px;pointer-events:none}.scene-ten-profile h3{position:relative;margin:0 0 10px;color:#74471f;font-family:"Songti SC","STSong",serif;font-size:16px}.profile-stamp{position:absolute;z-index:3;right:12px;top:9px;width:54px;height:54px;display:grid;place-items:center;border:2px solid #b97834;border-radius:50%;color:#a3662b;font-size:9px;line-height:1.25;text-align:center;transform:rotate(9deg)}.scene-ten-profile dl{position:relative;margin:0}.scene-ten-profile dl>div{display:grid;grid-template-columns:72px 1fr;gap:8px;padding:6px 0;border-top:1px solid rgba(195,157,108,.24)}.scene-ten-profile dt{color:#9b7c68;font-size:10px}.scene-ten-profile dd{margin:0;color:#664633;font-size:11px;line-height:1.45}.scene-ten-profile p{position:relative;margin:9px 0 0;color:#8f6d54;font-size:10px}.immersive-secondary{width:100%;border:0;background:transparent;padding:8px;color:#8d6d59}
.chat.service-hub-mode{padding:0;background:linear-gradient(180deg,rgba(255,249,238,.82),rgba(247,229,203,.72)),url("room-base.webp") center/cover}.service-hub{padding:14px 14px 20px}.hub-header{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 12px}.hub-header>div{display:flex;align-items:center;gap:8px}.hub-header .ip-small{width:46px;height:46px}.hub-header span b,.hub-header span small{display:block}.hub-header span b{color:#74451f;font-family:"Songti SC","STSong",serif}.hub-header span small{color:#927560;font-size:10px}.hub-header>strong{padding:6px 9px;border:1px solid rgba(190,139,68,.45);border-radius:99px;background:rgba(255,250,239,.84);color:#95602d;font-size:11px}.hub-header>button{border:0;background:transparent;color:#8d6847}.hub-welcome{position:relative;min-height:190px;padding:25px 140px 18px 17px;border:1px solid rgba(190,139,68,.5);border-radius:25px;background:linear-gradient(145deg,rgba(255,250,239,.96),rgba(248,218,176,.92));box-shadow:0 13px 25px rgba(98,64,45,.13);overflow:hidden}.hub-welcome h2{margin:7px 0 5px;color:#70411f;font-family:"Songti SC","STSong",serif}.hub-welcome p{margin:0;color:#7f604c;font-size:11px;line-height:1.5}.hub-welcome>div>i{padding:4px 7px;border-radius:99px;background:#efd09a;color:#8b5727;font-size:9px;font-style:normal}.hub-welcome .ip-large{position:absolute;right:4px;bottom:-7px;width:142px;height:172px;object-fit:contain}.hub-recent-reply{position:absolute;z-index:3;right:10px;top:12px;width:150px;padding:8px 9px;border:1px solid rgba(190,139,68,.4);border-radius:15px 15px 4px 15px;background:rgba(255,253,247,.94);color:#70503c;font-size:9px;line-height:1.4}.hub-recent-reply button{display:block;border:0;background:transparent;padding:4px 0 0;color:#ad6e31;font-size:8px}.hub-attention{margin-top:14px}.hub-attention h3{margin:0 0 7px;font-size:14px}.hub-attention article{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:9px;border:1px solid rgba(190,139,68,.36);border-radius:15px;background:rgba(255,250,241,.94)}.hub-attention article>span{font-size:20px;color:#ad763a}.hub-attention article>div{flex:1}.hub-attention article b,.hub-attention article small{display:block}.hub-attention article b{font-size:11px}.hub-attention article small{margin-top:2px;color:#9a7a66;font-size:9px}.hub-attention article em{color:#a86a2e;font-size:9px;font-style:normal}.service-hub .service-pool{grid-template-columns:1fr 1fr}.service-hub .pool-card{background:rgba(255,251,244,.96);border-color:rgba(190,139,68,.32)}
@media(max-width:390px){.scene-six-brands .immersive-options,.scene-seven-timeline .immersive-options,.scene-eight-services .immersive-options,.scene-nine-notify .immersive-options,.scene-ten-summary .immersive-options{top:246px}.scene-eight-grid button{min-height:96px}.hub-welcome{padding-right:126px}.hub-welcome .ip-large{width:130px}.hub-recent-reply{width:135px}}

/* A 版「珊瑚礼物型」IP：头像聚焦面部，主画面保留完整礼物动作。 */
.header-identity::before,
.scene-one-identity::before,
.immersive-identity::before {
  content: "";
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 50%;
  background: #f4c2ae url("douzhidao-coral-gift-v4.webp") center 14% / 238% auto no-repeat;
  box-shadow: 0 0 0 1px rgba(194,139,67,.52), 0 8px 18px rgba(98,64,45,.15);
}
.header-identity::before { width:52px; height:52px; flex-basis:52px; }
.header-avatar,
.scene-one-identity > img,
.immersive-identity > img { display:none; }
.hub-header > div::before {
  content:"";
  width:46px;
  height:46px;
  flex:0 0 46px;
  border:2px solid rgba(255,255,255,.94);
  border-radius:50%;
  background:#f4c2ae url("douzhidao-coral-gift-v4.webp") center 14% / 238% auto no-repeat;
  box-shadow:0 0 0 1px rgba(194,139,67,.45),0 6px 13px rgba(98,64,45,.12);
}
.hub-header .ip-small { display:none; }
.opening-character img,
.scene-one-character,
.immersive-character,
.hub-welcome .ip-large { object-fit:cover; object-position:center 48%; }
.hub-recent-reply { left:92px; right:auto; width:142px; }
.story-history::before { background-size:238% auto; background-position:center 14%; }

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

  .chat.luxury-stage::before,
  .chat.luxury-stage::after,
  .online-dot,
  .opening-character,
  .scene-one-character {
    transform: none !important;
  }

  .storybook-card.card-two,
  .sprig-gold,
  .card-spark,
  .card-sheen {
    animation: none !important;
  }
}