:root {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #251f21;
  background: #f4eeee;
  font-synthesis: none;
  --red: #f22e35;
  --ink: #251f21;
  --muted: #81777a;
  --line: rgba(71, 48, 54, .11);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 78% 8%, #fff7f5 0, #f7f1f1 38%, #eee7e8 100%); }
button { font: inherit; }
.demo-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(330px, 420px) 1fr; overflow: hidden; }
.story-panel { height: 100vh; min-height: 0; overflow: hidden; padding: 44px clamp(28px,4vw,58px); background: rgba(255,255,255,.8); backdrop-filter: blur(24px); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; color: white; background: var(--red); border-radius: 14px; display: grid; place-items: center; box-shadow: 0 10px 22px rgba(242,46,53,.2); }
.brand-row div { display: grid; line-height: 1.15; }.brand-row strong { letter-spacing: .12em; font-size: 16px; }.brand-row small { margin-top: 5px; color: var(--muted); }
.story-copy { margin: clamp(48px,8vh,90px) 0 34px; }
.eyebrow { color: var(--red); font-size: 11px; font-weight: 750; letter-spacing: .18em; }
.story-copy h1 { margin: 15px 0 18px; font-size: clamp(36px,4vw,54px); line-height: 1.08; letter-spacing: -.045em; }
.story-copy p { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 340px; }
.scene-list { min-height: 0; display: grid; gap: 7px; overflow-y: auto; padding-right: 5px; scrollbar-width: thin; }
.scene { width: 100%; border: 0; border-radius: 16px; background: transparent; display: grid; grid-template-columns: 32px 1fr 20px; align-items: center; text-align: left; padding: 13px 14px; color: var(--muted); cursor: pointer; transition: .25s ease; }
.scene:hover { background: white; transform: translateX(3px); }.scene.active { background: #fff; color: var(--ink); box-shadow: 0 12px 35px rgba(57,36,42,.08); }
.scene > span { font-size: 11px; font-weight: 700; color: #b8adb0; }.scene.active > span { color: var(--red); }
.scene div { display: grid; gap: 4px; }.scene strong { font-size: 14px; }.scene small { font-size: 11px; color: #9a8f92; }
.hint { margin-top: auto; padding-top: 28px; display: flex; gap: 8px; color: #988e91; font-size: 12px; align-items: center; }
.stage { height: 100vh; min-height: 0; overflow: hidden; display: grid; grid-template-rows: 70px 1fr 64px; padding: 0 clamp(24px,4vw,64px); position: relative; }
.stage-header, .stage-footer { display: flex; align-items: center; justify-content: space-between; width: min(100%, 720px); margin: auto; }
.stage-header > div:first-child { display: grid; gap: 3px; }.stage-header span { font-size: 10px; color: #a09698; letter-spacing: .12em; }.stage-header strong { font-size: 15px; }.stepper { font-size: 12px; color: #867b7e; padding: 8px 12px; background: rgba(255,255,255,.65); border: 1px solid var(--line); border-radius: 99px; }
.phone-wrap { display: grid; place-items: center; min-height: 0; padding: 8px 0; }
.phone { height: calc(100vh - 158px); aspect-ratio: 720 / 1600; background: #fff; border: 8px solid #1d1b1c; border-radius: 36px; overflow: hidden; position: relative; box-shadow: 0 35px 80px rgba(57,31,39,.2), inset 0 0 0 1px rgba(255,255,255,.18); }
.phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotspot { position: absolute; border: 2px solid rgba(255,255,255,.95); background: rgba(242,46,53,.88); color: white; border-radius: 999px; cursor: pointer; box-shadow: 0 5px 18px rgba(242,46,53,.38); animation: pulse 2s infinite; min-width: 86px; min-height: 34px; }
.hotspot span { font-size: 12px; font-weight: 700; }.home-live { top: 57%; left: 7%; }.room-club { top: 2.6%; left: 29%; }.club-join { bottom: 2.6%; right: 5%; width: 44%; }.task-gift { top: 58%; right: 8%; }
.match-promo { bottom: 8%; left: 50%; translate: -50% 0; }.promo-enter { top: 64%; left: 50%; translate: -50% 0; }.discover-community { top: 9%; left: 22%; }.community-post { right: 5%; bottom: 9%; }.post-publish { left: 50%; bottom: 10%; translate: -50% 0; }.profile-rooms { top: 56%; left: 6%; }.room-enter { bottom: 15%; right: 8%; }.private-pay { left: 50%; top: 62%; translate: -50% 0; }
.back-button { position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.7); color: #40373a; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); border-radius: 50%; display: grid; place-items: center; cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.1); }
.progress-pop { position: absolute; left: 50%; bottom: 84px; translate: -50% 0; display: flex; gap: 7px; align-items: center; white-space: nowrap; padding: 10px 15px; border-radius: 999px; background: rgba(35,28,30,.91); color: white; font-size: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.stage-footer button { display: flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #4a4144; cursor: pointer; font-size: 13px; }.stage-footer button:disabled { opacity: .28; cursor: default; }.dots { display: flex; gap: 6px; }.dots span { width: 6px; height: 6px; border-radius: 50%; background: #cfc6c8; transition: .2s; }.dots span.on { width: 20px; border-radius: 9px; background: var(--red); }
.toast { position: fixed; left: 50%; bottom: 28px; translate: -50% 0; z-index: 20; display: flex; align-items: center; gap: 9px; padding: 13px 14px 13px 16px; background: #211d1e; color: white; border-radius: 14px; box-shadow: 0 18px 46px rgba(0,0,0,.24); font-size: 13px; }.toast button { border: 0; background: transparent; color: #aaa; display: grid; padding: 0; cursor: pointer; }
.mobile-nav { display: none; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@media (max-width: 820px) {
  body { background: #fff; }
  .demo-shell { display: block; min-height: 100dvh; overflow: visible; }
  .story-panel, .stage-header, .stage-footer { display: none; }
  .stage { display: block; min-height: 100dvh; padding: 0 0 72px; }
  .stage { height: auto; overflow: visible; }
  .phone-wrap { display: block; padding: 0; }
  .phone { width: 100%; height: auto; min-height: calc(100dvh - 72px); aspect-ratio: 720/1600; border: 0; border-radius: 0; box-shadow: none; }
  .phone img { height: auto; min-height: calc(100dvh - 72px); object-fit: cover; object-position: top; }
  .back-button { position: fixed; top: 12px; z-index: 8; }
  .mobile-nav { position: fixed; z-index: 10; display: grid; grid-template-columns: repeat(5,1fr); left: 0; right: 0; bottom: 0; height: 72px; padding: 8px 8px max(8px,env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(18px); border-top: 1px solid #eee5e6; }
  .mobile-nav button { display: grid; place-items: center; gap: 2px; border: 0; background: transparent; color: #9a9092; font-size: 10px; }.mobile-nav svg { width: 21px; }.mobile-nav .active { color: var(--red); }
  .toast { bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }