:root {
  --qqq-ink: #06335f;
  --qqq-copy: #365b7f;
  --qqq-teal: #12cfc5;
  --qqq-blue: #18a9f5;
  --qqq-violet: #7468ff;
  --qqq-glass: rgba(248, 255, 255, .86);
  --qqq-line: rgba(255, 255, 255, .82);
  --qqq-shadow: 0 22px 64px rgba(16, 91, 137, .20);
  --qqq-safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overscroll-behavior-x: none;
}

button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }

/* Authoritative home layout: phone viewport first, desktop kept as a centered preview. */
body.zzz-home-ready::before,
body.zzz-home-ready::after {
  display: none !important;
  content: none !important;
}

body.zzz-home-ready {
  margin: 0 !important;
  min-height: 100svh !important;
  overflow-x: clip !important;
  color: var(--qqq-ink) !important;
  background: #b8f6f5 !important;
  font-family: "Source Han Sans SC", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

body.zzz-home-ready .app-shell {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  min-width: 0 !important;
  min-height: 100svh !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background-image:
    linear-gradient(180deg, rgba(157, 244, 241, .30) 0%, rgba(172, 247, 245, .12) 22%, rgba(172, 247, 245, 0) 48%),
    linear-gradient(0deg, rgba(149, 239, 234, .18) 0%, rgba(149, 239, 234, .08) 20%, rgba(149, 239, 234, 0) 46%),
    url("./背景图8.png") !important;
  background-size: cover, cover, cover !important;
  background-position: center top, center bottom, center top !important;
  background-repeat: no-repeat !important;
}

body.zzz-home-ready .app-shell::before,
body.zzz-home-ready .app-shell::after { display: none !important; }

body.zzz-home-ready .scope-strip,
body.zzz-home-ready .stats-row,
body.zzz-home-ready .spin-copy .eyebrow,
body.zzz-home-ready .top-actions,
body.zzz-home-ready #guidePanel { display: none !important; }

@media (max-width: 600px) {
  body.zzz-home-ready .app-shell {
    width: 100% !important;
    max-width: none !important;
    padding: max(8px, env(safe-area-inset-top)) clamp(8px, 2.2vw, 14px) calc(88px + var(--qqq-safe-bottom)) !important;
  }

  body.zzz-home-ready main,
  body.zzz-home-ready .spin-screen,
  body.zzz-home-ready #chinaPanel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.zzz-home-ready .topbar {
    position: relative !important;
    z-index: 320 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(112px, 1fr) clamp(148px, 39vw, 184px) 38px !important;
    align-items: center !important;
    gap: clamp(5px, 1.5vw, 8px) !important;
    min-height: 42px !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
  }

  body.zzz-home-ready .brand {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  body.zzz-home-ready .brand-mark,
  body.zzz-home-ready .brand-mark img {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    object-fit: contain !important;
  }

  body.zzz-home-ready .brand-wordmark {
    display: block !important;
    width: clamp(74px, 21vw, 104px) !important;
    height: 32px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.zzz-home-ready .brand-wordmark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body.zzz-home-ready .mode-tabs {
    justify-self: end !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 3px !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  body.zzz-home-ready .mode-tabs .mode-tab {
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 4px !important;
    border-radius: 17px !important;
    font-size: clamp(12px, 3.1vw, 15px) !important;
    line-height: 32px !important;
    white-space: nowrap !important;
  }

  body.zzz-home-ready .notice-button,
  body.zzz-home-ready #noticePageLink,
  body.zzz-home-ready #noticeOpen {
    justify-self: end !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
  }

  body.zzz-home-ready .notice-button svg { width: 21px !important; height: 21px !important; }

  body.zzz-home-ready .spin-copy { width: 100% !important; margin: 0 !important; }

  body.zzz-home-ready .spin-copy .slogan-title {
    width: min(76vw, 318px) !important;
    max-width: calc(100vw - 42px) !important;
    height: clamp(62px, 18.5vw, 84px) !important;
    margin: 3px auto 7px !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }

  body.zzz-home-ready .spin-copy .slogan-title img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body.zzz-home-ready .topic-strip {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.zzz-home-ready .topic-chip {
    width: 100% !important;
    min-width: 0 !important;
    height: 35px !important;
    min-height: 35px !important;
    padding: 2px 1px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    justify-content: center !important;
    font-size: clamp(7.6px, 2.12vw, 10px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    white-space: normal !important;
  }

  body.zzz-home-ready .topic-chip span { font-size: clamp(11px, 3vw, 14px) !important; }

  body.zzz-home-ready .filter-strip {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.zzz-home-ready .filter-chip {
    width: 100% !important;
    min-width: 0 !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    font-size: clamp(7px, 1.92vw, 9.2px) !important;
    line-height: 22px !important;
    letter-spacing: -.04em !important;
    white-space: nowrap !important;
  }

  body.zzz-home-ready .filter-chip.active {
    color: #fff !important;
    border-color: rgba(255,255,255,.9) !important;
    background: linear-gradient(120deg, #19d4c8, #26a9ff 46%, #7f69ff 72%, #ff72a8) !important;
    box-shadow: 0 7px 18px rgba(44, 135, 207, .20) !important;
  }

  body.zzz-home-ready .wheel-stage {
    width: min(78vw, 39svh, 338px) !important;
    height: min(78vw, 39svh, 338px) !important;
    max-width: calc(100vw - 30px) !important;
    max-height: calc(100vw - 30px) !important;
    margin: clamp(12px, 2.2svh, 20px) auto 0 !important;
    transform: translateZ(0) !important;
  }

  body.zzz-home-ready .wheel-stage canvas,
  body.zzz-home-ready #wheelCanvas { width: 100% !important; height: 100% !important; }

  body.zzz-home-ready .action-bar {
    width: min(72vw, 310px) !important;
    max-width: calc(100vw - 50px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 11px auto 0 !important;
    transform: none !important;
  }

  body.zzz-home-ready .action-bar .primary-action,
  body.zzz-home-ready .action-bar .secondary-action {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
  }

  body.zzz-home-ready .zzz-mobile-dock,
  .zzz-public-page .zzz-public-dock {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(8px + var(--qqq-safe-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 28px), 390px) !important;
    max-width: calc(100vw - 28px) !important;
    height: 66px !important;
    min-height: 66px !important;
    padding: 6px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 64px 1fr 1fr !important;
    align-items: center !important;
    border-radius: 999px !important;
    z-index: 310 !important;
  }

  body.zzz-home-ready .zzz-mobile-dock .zzz-dock-item,
  .zzz-public-page .zzz-public-dock a:not(.zzz-public-dock__share) {
    min-width: 0 !important;
    height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  body.zzz-home-ready .zzz-mobile-dock .zzz-dock-item span { font-size: 18px !important; line-height: 1 !important; }
  body.zzz-home-ready .zzz-mobile-dock .zzz-dock-item strong { font-size: 12px !important; line-height: 1.05 !important; }
  .zzz-public-page .zzz-public-dock a:not(.zzz-public-dock__share) strong { font-size: 18px !important; line-height: 1 !important; }
  .zzz-public-page .zzz-public-dock a:not(.zzz-public-dock__share) span { font-size: 12px !important; line-height: 1.05 !important; }

  body.zzz-home-ready .zzz-dock-share,
  .zzz-public-page .zzz-public-dock__share {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--qqq-teal), var(--qqq-blue) 58%, #11c99e) !important;
    box-shadow: 0 14px 30px rgba(16, 169, 194, .34), inset 0 1px rgba(255,255,255,.62) !important;
  }

  body.result-popup-open::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 180 !important;
    background: rgba(49, 132, 171, .18) !important;
    -webkit-backdrop-filter: blur(9px) !important;
    backdrop-filter: blur(9px) !important;
  }

  body.result-popup-open #resultPanel {
    position: fixed !important;
    z-index: 250 !important;
    top: calc(50% - 4px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(calc(100vw - 30px), 396px) !important;
    max-width: min(calc(100vw - 30px), 396px) !important;
    max-height: min(calc(100svh - 164px - var(--qqq-safe-bottom)), 548px) !important;
    transform: translate(-50%, -50%) !important;
    padding: 17px !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    border-radius: 28px !important;
    box-shadow: 0 30px 78px rgba(12, 66, 111, .28), inset 0 1px rgba(255,255,255,.86) !important;
  }

  body.result-popup-open .topbar { z-index: 320 !important; }
  body.result-popup-open .action-bar { opacity: .2 !important; pointer-events: none !important; }

  body.zzz-home-ready #resultPanel h2 { font-size: clamp(29px, 8vw, 40px) !important; line-height: 1.08 !important; }
  body.zzz-home-ready #resultPanel #resultMeta { font-size: 14px !important; line-height: 1.5 !important; }
  body.zzz-home-ready #resultPanel .persona-card strong { font-size: 14px !important; line-height: 1.55 !important; }
  body.zzz-home-ready #resultPanel .spot-grid article { min-height: 66px !important; }
}

@media (max-width: 600px) and (max-height: 780px) {
  body.zzz-home-ready .spin-copy .slogan-title { width: min(70vw, 286px) !important; height: 54px !important; margin-bottom: 5px !important; }
  body.zzz-home-ready .topic-chip { height: 31px !important; min-height: 31px !important; }
  body.zzz-home-ready .filter-chip { height: 19px !important; min-height: 19px !important; line-height: 19px !important; }
  body.zzz-home-ready .wheel-stage { width: min(67vw, 35svh, 278px) !important; height: min(67vw, 35svh, 278px) !important; margin-top: 9px !important; }
  body.zzz-home-ready .action-bar { gap: 6px !important; margin-top: 8px !important; }
  body.zzz-home-ready .action-bar .primary-action,
  body.zzz-home-ready .action-bar .secondary-action { height: 36px !important; min-height: 36px !important; font-size: 12.5px !important; }
}

/* Unified inner-page reading system. */
body.zzz-public-page,
body.zzz-page-guide-detail {
  margin: 0 !important;
  padding-bottom: calc(96px + var(--qqq-safe-bottom)) !important;
  overflow-x: clip !important;
  color: var(--qqq-ink) !important;
  background:
    linear-gradient(180deg, rgba(188, 250, 251, .62), rgba(238, 252, 255, .92) 34%, #effcff),
    url("./背景图8.png") center top / cover fixed !important;
  font-family: "Source Han Sans SC", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

.zzz-public-page .zzz-public-brandbar {
  width: min(calc(100% - 24px), 920px) !important;
  min-height: 64px !important;
  margin: 12px auto 14px !important;
  padding: 10px 14px !important;
  border-radius: 24px !important;
  background: rgba(250,255,255,.78) !important;
  border: 1px solid var(--qqq-line) !important;
  box-shadow: 0 14px 40px rgba(16, 91, 137, .12) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

.zzz-public-page main,
.zzz-public-page #page {
  width: min(calc(100% - 24px), 920px) !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.zzz-page-guide-detail #page { max-width: 820px !important; }

body.zzz-page-guide-detail #page .hero,
body.zzz-page-guide-detail #page .panel,
body.zzz-page-guide-detail #page .booking-suite,
body.zzz-page-guide-detail #page .checkin-card {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  background: rgba(250,255,255,.80) !important;
  box-shadow: 0 18px 50px rgba(16, 91, 137, .12) !important;
}

body.zzz-page-guide-detail #page .hero > img,
body.zzz-page-guide-detail #page .hero-media img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 460px !important;
  object-fit: cover !important;
  object-position: center !important;
}

body.zzz-page-guide-detail #page .image-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
  gap: 8px !important;
  padding: 8px !important;
}

body.zzz-page-guide-detail #page .image-gallery img {
  width: 100% !important;
  height: clamp(146px, 36vw, 178px) !important;
  min-height: 146px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 14px !important;
}

body.zzz-page-guide-detail #page h1,
body.zzz-page-guide-detail #page .hero-body h1 {
  margin: 8px 0 10px !important;
  color: var(--qqq-ink) !important;
  font-size: clamp(32px, 8.5vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.045em !important;
  font-weight: 950 !important;
}

body.zzz-page-guide-detail #page h2,
body.zzz-page-guide-detail #page .panel h2,
body.zzz-page-guide-detail #page .booking-suite h2 {
  margin: 28px 0 12px !important;
  color: #073865 !important;
  font-size: clamp(22px, 5.8vw, 28px) !important;
  line-height: 1.24 !important;
  letter-spacing: -.025em !important;
  font-weight: 920 !important;
}

body.zzz-page-guide-detail #page h3,
body.zzz-page-guide-detail #page .checkin-card strong,
body.zzz-page-guide-detail #page .booking-service-card strong {
  color: #083a67 !important;
  font-size: clamp(18px, 4.7vw, 21px) !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}

body.zzz-page-guide-detail #page p,
body.zzz-page-guide-detail #page li,
body.zzz-page-guide-detail #page .content p,
body.zzz-page-guide-detail #page .content li,
body.zzz-page-guide-detail #page .checkin-card span,
body.zzz-page-guide-detail #page .booking-service-card span,
body.zzz-page-guide-detail #page .notice,
body.zzz-page-guide-detail #page .subtitle {
  color: var(--qqq-copy) !important;
  font-size: 16px !important;
  line-height: 1.76 !important;
  letter-spacing: 0 !important;
  font-weight: 520 !important;
}

body.zzz-page-guide-detail #page .content p { margin: 0 0 12px !important; }
body.zzz-page-guide-detail #page .content > p:empty { display: none !important; }

body.zzz-page-guide-detail #page .eyebrow,
body.zzz-page-guide-detail #page .meta-tag,
body.zzz-page-guide-detail #page .guide-chip,
body.zzz-page-guide-detail #page .step-num,
body.zzz-page-guide-detail #page .booking-suite-kicker {
  color: #008f95 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

body.zzz-page-guide-detail #page .checkin-gallery { display: grid !important; gap: 14px !important; }
body.zzz-page-guide-detail #page .checkin-card { overflow: hidden !important; }
body.zzz-page-guide-detail #page .checkin-card img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  max-height: 360px !important;
  object-fit: cover !important;
  object-position: center !important;
}

body.zzz-page-guide-detail #page .booking-suite { margin-top: 20px !important; padding: 18px !important; }
body.zzz-page-guide-detail #page .booking-service-grid { gap: 12px !important; }
body.zzz-page-guide-detail #page .booking-service-card { min-height: 0 !important; padding: 15px !important; border-radius: 18px !important; }

.zzz-public-page h1 { color: var(--qqq-ink) !important; font-size: clamp(30px, 8vw, 42px) !important; line-height: 1.12 !important; }
.zzz-public-page h2 { color: #073865 !important; font-size: clamp(22px, 5.8vw, 28px) !important; line-height: 1.24 !important; }
.zzz-public-page h3 { color: #083a67 !important; font-size: clamp(18px, 4.7vw, 21px) !important; line-height: 1.35 !important; }
.zzz-public-page p,
.zzz-public-page li { color: var(--qqq-copy) !important; font-size: 16px !important; line-height: 1.72 !important; }

/* Unified account gate and share card, always above both navigation bars. */
.qqq-final-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
  display: grid !important;
  place-items: center !important;
  padding: max(18px, env(safe-area-inset-top)) 16px calc(18px + var(--qqq-safe-bottom)) !important;
  background: rgba(16, 80, 121, .28) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.qqq-final-overlay[hidden] { display: none !important; }

.qqq-final-card {
  position: relative !important;
  width: min(100%, 396px) !important;
  max-height: min(78svh, 680px) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding: 22px !important;
  border-radius: 30px !important;
  color: var(--qqq-ink) !important;
  background: linear-gradient(145deg, rgba(251,255,255,.96), rgba(202,246,250,.92)) !important;
  border: 1px solid rgba(255,255,255,.90) !important;
  box-shadow: 0 30px 90px rgba(10, 70, 116, .32), inset 0 1px rgba(255,255,255,.92) !important;
}

.qqq-final-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--qqq-ink) !important;
  background: rgba(255,255,255,.82) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

.qqq-final-kicker { margin: 0 44px 7px 0 !important; color: #008f95 !important; font-size: 13px !important; font-weight: 900 !important; }
.qqq-final-card h2 { margin: 0 44px 10px 0 !important; color: var(--qqq-ink) !important; font-size: clamp(25px, 7vw, 32px) !important; line-height: 1.14 !important; }
.qqq-final-card p { margin: 0 0 10px !important; color: var(--qqq-copy) !important; font-size: 15px !important; line-height: 1.68 !important; }
.qqq-final-preview { margin: 14px 0 !important; padding: 16px !important; border-radius: 20px !important; background: rgba(255,255,255,.68) !important; color: #0a4673 !important; font-size: 15px !important; line-height: 1.68 !important; font-weight: 720 !important; }

.qqq-final-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; margin-top: 15px !important; }
.qqq-final-actions > * {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: var(--qqq-ink) !important;
  background: rgba(255,255,255,.78) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}
.qqq-final-actions .primary { color: #fff !important; background: linear-gradient(135deg, var(--qqq-teal), var(--qqq-blue) 58%, var(--qqq-violet)) !important; }
.qqq-final-phone { display: grid !important; grid-template-columns: 1fr auto !important; gap: 8px !important; margin-top: 10px !important; }
.qqq-final-phone[hidden] { display: none !important; }
.qqq-final-phone input { min-width: 0 !important; height: 44px !important; padding: 0 14px !important; border: 1px solid rgba(28,133,158,.18) !important; border-radius: 999px !important; background: rgba(255,255,255,.82) !important; font: inherit !important; }
.qqq-final-phone button { min-height: 44px !important; padding: 0 16px !important; border: 0 !important; border-radius: 999px !important; color: #fff !important; background: linear-gradient(135deg, var(--qqq-teal), var(--qqq-blue)) !important; font-weight: 900 !important; }
.qqq-final-phone { grid-template-columns: 1fr 1fr !important; }
.qqq-final-phone input { grid-column: 1 / -1 !important; font-size: 16px !important; }
.qqq-final-phone button { min-width: 0 !important; font-size: 13px !important; }
.qqq-final-phone button:not(.primary) { color: var(--qqq-ink) !important; background: rgba(255,255,255,.82) !important; }
.qqq-final-account { margin-bottom: 14px !important; padding: 16px !important; border-radius: 22px !important; background: rgba(223,253,252,.78) !important; border: 1px solid rgba(255,255,255,.8) !important; }
.qqq-final-account strong { display: block !important; color: var(--qqq-ink) !important; font-size: 18px !important; }
.qqq-final-account span { color: var(--qqq-copy) !important; font-size: 14px !important; }

@media (min-width: 601px) {
  body.zzz-home-ready .app-shell { box-shadow: 0 0 70px rgba(26,125,164,.18) !important; }
}

/* P66: responsive hardening for small phones, large phones, tablets and desktop. */
html {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

button,
[role="button"],
a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(35, 169, 255, .82) !important;
  outline-offset: 3px !important;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

@supports (height: 100dvh) {
  body.zzz-home-ready,
  body.zzz-home-ready .app-shell {
    min-height: 100dvh !important;
  }
}

@media (max-width: 600px) {
  body.zzz-home-ready .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--qqq-viewport-height, 100dvh) !important;
    padding-left: clamp(10px, 3vw, 16px) !important;
    padding-right: clamp(10px, 3vw, 16px) !important;
    padding-bottom: calc(94px + max(8px, var(--qqq-safe-bottom))) !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  body.zzz-home-ready main,
  body.zzz-home-ready #chinaPanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  body.zzz-home-ready .topbar {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.zzz-home-ready .topic-strip {
    gap: clamp(4px, 1.25vw, 7px) !important;
  }

  body.zzz-home-ready .topic-chip {
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px 2px !important;
    font-size: clamp(9.4px, 2.45vw, 11px) !important;
    letter-spacing: -.03em !important;
  }

  body.zzz-home-ready .filter-strip {
    gap: clamp(3px, 1vw, 6px) !important;
  }

  body.zzz-home-ready .filter-chip {
    height: 32px !important;
    min-height: 32px !important;
    font-size: clamp(9.5px, 2.45vw, 11px) !important;
    line-height: 32px !important;
    letter-spacing: -.025em !important;
  }

  body.zzz-home-ready .wheel-stage {
    width: min(90vw, 48dvh, 420px) !important;
    height: min(90vw, 48dvh, 420px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vw - 24px) !important;
    margin: clamp(16px, 3.4vh, 28px) auto 0 !important;
    transform: none !important;
  }

  body.zzz-home-ready .wheel-wrap,
  body.zzz-home-ready .wheel-canvas {
    width: 100% !important;
    height: 100% !important;
  }

  body.zzz-home-ready .action-bar {
    width: min(82vw, 360px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 14px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.zzz-home-ready .action-bar .primary-action,
  body.zzz-home-ready .action-bar .secondary-action {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }

  body.zzz-home-ready .zzz-mobile-dock,
  .zzz-public-page .zzz-public-dock {
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, var(--qqq-safe-bottom)) !important;
    width: min(calc(100vw - 24px), 404px) !important;
    max-width: calc(100vw - 24px) !important;
    height: 68px !important;
    min-height: 68px !important;
    transform: translate3d(-50%, 0, 0) !important;
    contain: layout paint !important;
  }

  body.zzz-home-ready #resultPanel {
    top: calc(50% - 18px) !important;
    width: min(calc(100vw - 24px), 404px) !important;
    max-width: min(calc(100vw - 24px), 404px) !important;
    max-height: min(calc(var(--qqq-viewport-height, 100dvh) - 116px - var(--qqq-safe-bottom)), 650px) !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
  }

  .qqq-final-card {
    width: min(calc(100vw - 24px), 404px) !important;
    max-height: calc(var(--qqq-viewport-height, 100dvh) - 44px - var(--qqq-safe-bottom)) !important;
    overscroll-behavior: contain !important;
  }

  .zzz-public-page {
    background-attachment: scroll !important;
    padding-bottom: calc(104px + var(--qqq-safe-bottom)) !important;
  }

  .zzz-public-page main,
  .zzz-public-page #page,
  .zzz-public-page .zzz-public-brandbar {
    width: min(calc(100% - 20px), 560px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  body.zzz-page-guide-detail #page .hero,
  body.zzz-page-guide-detail #page .panel,
  body.zzz-page-guide-detail #page .booking-suite,
  body.zzz-page-guide-detail #page .checkin-card,
  body.zzz-page-guide-detail #page .content-card {
    padding: clamp(16px, 4.5vw, 22px) !important;
    border-radius: clamp(20px, 6vw, 28px) !important;
  }
}

@media (max-width: 379px) {
  body.zzz-home-ready .topbar {
    grid-template-columns: minmax(92px, 1fr) minmax(138px, 1.4fr) 36px !important;
    gap: 4px !important;
  }

  body.zzz-home-ready .mode-tabs {
    height: 36px !important;
    min-height: 36px !important;
  }

  body.zzz-home-ready .mode-tabs .mode-tab {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 12px !important;
    line-height: 30px !important;
  }

  body.zzz-home-ready .notice-button,
  body.zzz-home-ready #noticePageLink,
  body.zzz-home-ready #noticeOpen {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  body.zzz-home-ready .topic-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 40px !important;
    height: auto !important;
    min-height: 84px !important;
    align-content: start !important;
  }

  body.zzz-home-ready .topic-chip {
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }

  body.zzz-home-ready .filter-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: 32px !important;
    height: auto !important;
    min-height: 67px !important;
    margin-top: 8px !important;
    align-content: start !important;
  }

  body.zzz-home-ready .filter-chip {
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
  }

  body.zzz-home-ready .wheel-stage {
    width: min(92vw, 43dvh, 340px) !important;
    height: min(92vw, 43dvh, 340px) !important;
    margin-top: 16px !important;
  }

  .qqq-final-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 380px) and (max-width: 430px) {
  body.zzz-home-ready .topic-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body.zzz-home-ready .filter-strip {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

@media (min-width: 601px) {
  body.zzz-home-ready {
    padding: 24px !important;
    background:
      radial-gradient(circle at 18% 12%, rgba(125, 236, 232, .34), transparent 31%),
      radial-gradient(circle at 82% 20%, rgba(87, 175, 255, .22), transparent 30%),
      #e9fbff !important;
  }

  body.zzz-home-ready .app-shell {
    width: min(calc(100vw - 48px), 920px) !important;
    max-width: 920px !important;
    min-height: calc(100dvh - 48px) !important;
    padding: 22px clamp(28px, 6vw, 76px) 112px !important;
    border-radius: 38px !important;
    overflow: hidden !important;
  }

  body.zzz-home-ready .topbar,
  body.zzz-home-ready main,
  body.zzz-home-ready #chinaPanel {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    margin-inline: auto !important;
  }

  body.zzz-home-ready #chinaPanel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.zzz-home-ready #chinaPanel > .spin-copy,
  body.zzz-home-ready #chinaPanel > .topic-strip,
  body.zzz-home-ready #chinaPanel > .filter-strip,
  body.zzz-home-ready #chinaPanel > .wheel-stage,
  body.zzz-home-ready #chinaPanel > .action-bar {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.zzz-home-ready .wheel-stage {
    width: min(62vw, 500px) !important;
    height: min(62vw, 500px) !important;
    margin: 26px auto 0 !important;
  }

  body.zzz-home-ready .action-bar {
    width: min(100%, 560px) !important;
    margin-inline: auto !important;
  }

  body.zzz-home-ready .zzz-mobile-dock,
  .zzz-public-page .zzz-public-dock {
    width: 500px !important;
    max-width: calc(100vw - 48px) !important;
  }

  .zzz-public-page main,
  .zzz-public-page #page {
    width: min(calc(100% - 48px), 980px) !important;
    max-width: 980px !important;
    margin-inline: auto !important;
  }

  .zzz-public-page .zzz-public-brandbar {
    width: min(calc(100% - 48px), 980px) !important;
  }

  body.zzz-page-guide-detail #page .content p,
  body.zzz-page-guide-detail #page .content li,
  body.zzz-page-guide-detail #page .notice,
  body.zzz-page-guide-detail #page .subtitle {
    font-size: 17px !important;
    line-height: 1.82 !important;
  }
}

@media (max-width: 600px) {
  body.zzz-page-guide-detail #page .hero-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.zzz-page-guide-detail #page .hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }
}

@media (orientation: landscape) and (max-height: 620px) and (max-width: 980px) {
  body.zzz-home-ready .app-shell {
    min-height: auto !important;
    overflow: visible !important;
  }

  body.zzz-home-ready .wheel-stage {
    width: min(64vh, 360px) !important;
    height: min(64vh, 360px) !important;
  }

  body.zzz-home-ready #resultPanel,
  .qqq-final-card {
    max-height: calc(var(--qqq-viewport-height, 100dvh) - 32px) !important;
  }
}

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