:root {
  --heyue-moon-light: #fff5bf;
  --heyue-moon-mid: #e3c774;
  --heyue-moon-dark: #92743f;
  --heyue-moon-ink: rgba(47, 43, 34, 0.5);
}

:where(.brand-mark, .product-brand-mark, .city-brand__orbit) {
  position: relative !important;
  display: inline-grid !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  place-items: center !important;
  border: 1px solid rgba(91, 72, 36, 0.46) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  transform: none !important;
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.72) 0 7%, transparent 8%),
    radial-gradient(circle at 67% 28%, rgba(130, 99, 44, 0.2) 0 8%, transparent 9%),
    radial-gradient(circle at 71% 66%, rgba(115, 87, 42, 0.22) 0 11%, transparent 12%),
    radial-gradient(circle at 36% 73%, rgba(122, 94, 47, 0.14) 0 6%, transparent 7%),
    linear-gradient(145deg, var(--heyue-moon-light), var(--heyue-moon-mid)) !important;
  box-shadow:
    inset -4px -4px 8px rgba(96, 70, 28, 0.16),
    inset 3px 3px 7px rgba(255, 255, 255, 0.52),
    0 0 18px rgba(237, 205, 112, 0.2) !important;
}

:where(.brand-mark, .product-brand-mark, .city-brand__orbit)::before {
  position: absolute !important;
  inset: 4px !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 50% !important;
  content: "" !important;
  transform: none !important;
}

:where(.brand-mark, .product-brand-mark, .city-brand__orbit)::after {
  display: none !important;
}

:where(.brand-mark, .product-brand-mark, .city-brand__orbit) > i {
  display: none !important;
}

.product-brand--light :where(.product-brand-mark) {
  border-color: rgba(255, 246, 204, 0.7) !important;
  box-shadow:
    inset -4px -4px 8px rgba(96, 70, 28, 0.18),
    inset 3px 3px 7px rgba(255, 255, 255, 0.52),
    0 0 24px rgba(255, 226, 139, 0.42) !important;
}

.start-brand {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

.start-brand::before {
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 1px solid rgba(255, 245, 195, 0.62);
  border-radius: 50%;
  content: "";
  background:
    radial-gradient(circle at 66% 30%, rgba(122, 93, 43, 0.2) 0 10%, transparent 11%),
    radial-gradient(circle at 34% 70%, rgba(122, 93, 43, 0.15) 0 7%, transparent 8%),
    linear-gradient(145deg, #fff7cb, #dfc273);
  box-shadow: 0 0 20px rgba(255, 226, 136, 0.28);
}

.start-orbit-mark {
  border: 1px solid rgba(255, 245, 195, 0.58) !important;
  border-radius: 50% !important;
  animation: heyueMoonBreath 4.8s ease-in-out infinite !important;
  background:
    radial-gradient(circle at 68% 30%, rgba(123, 92, 39, 0.2) 0 10%, transparent 11%),
    radial-gradient(circle at 35% 68%, rgba(126, 95, 45, 0.15) 0 8%, transparent 9%),
    linear-gradient(145deg, #fff7cb, #dfc273) !important;
  box-shadow: 0 0 24px rgba(255, 226, 136, 0.28) !important;
}

.start-orbit-mark::before {
  inset: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 50% !important;
  transform: none !important;
}

.start-orbit-mark::after,
.start-orbit-mark > span {
  display: none !important;
}

@keyframes heyueMoonBreath {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(255, 226, 136, 0.22);
  }
  50% {
    transform: scale(1.045);
    box-shadow: 0 0 30px rgba(255, 226, 136, 0.36);
  }
}

@media (prefers-reduced-motion: reduce) {
  .start-orbit-mark {
    animation: none !important;
  }
}
.personalized-city-visual.is-generated-image img {
  object-fit: contain;
  transform: none;
}
.topbar .city-directory-link { margin-left:auto; white-space:nowrap; }
.is-start-view .topbar .city-directory-link { color:#f5f0df; border-color:#f5f0df80; background:#074a7533; }