#city-loading {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 24px; background: #edf1e9; color: #2e4036;
  font-family: 'DM Sans Variable', system-ui, sans-serif;
  transition: opacity .3s ease;
}
#city-loading.is-ready { opacity: 0; pointer-events: none; }
.city-loading-card {
  box-sizing: border-box; width: min(100%, 340px); padding: 30px 26px 24px;
  text-align: center; background: #f9faf3; border: 1px solid #fff;
  border-radius: 24px; box-shadow: 0 16px 60px #3349340c;
}
.city-loading-mark { display: flex; justify-content: center; height: 48px; margin-bottom: 20px; }
.city-loading-mark svg { display: block; width: 64px; height: 48px; }
.city-loading-card strong { display: block; font-size: 19px; letter-spacing: -.5px; font-weight: 650; }
.city-loading-card p { margin: 8px 0 22px; font-size: 13px; line-height: 1.5; color: #778270; }
.city-loading-track { height: 5px; overflow: hidden; border-radius: 20px; background: #e5eadc; }
.city-loading-track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: #a6bb78; animation: city-loading-sweep 1.6s ease-in-out infinite; will-change: transform; }
.city-loading-card small { display: block; margin-top: 14px; font-size: 10px; color: #8a9480; }
@keyframes city-loading-sweep { from { transform: translateX(-105%); } to { transform: translateX(345%); } }
@media (prefers-reduced-motion: reduce) { .city-loading-track span { animation: none; transform: translateX(70%); } #city-loading { transition: none; } }