.city-home {
  background: #050b13 url("city-overview.webp?v=manhattan") center / cover no-repeat;
}

.city-home canvas {
  position: fixed;
  inset: 0;
  touch-action: none;
  cursor: grab;
  background:
    radial-gradient(ellipse at 74% 35%, #172e4840 0%, transparent 53%),
    radial-gradient(ellipse at 72% 52%, #16283f 0%, transparent 64%),
    linear-gradient(176deg, #030610 7%, #0b1529 53%, #050911 93%);
}

.city-home canvas:active { cursor: grabbing; }
.city-home canvas[hidden] { display: none; }

.city-home #city {
  position: fixed;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  animation: none;
}

.city-home .archisense-logo {
  animation: none;
  font-size: clamp(15px, 1.7vw, 24px);
  letter-spacing: .08em;
  line-height: 1.2;
}

.city-home .overlay-top {
  background: linear-gradient(to bottom, #03070ee8, transparent);
  height: 16%;
}

.city-home .overlay-bottom {
  background: linear-gradient(to top, #03070eef, transparent);
  height: 16%;
}

.city-home .station-label {
  top: 0;
  left: 0;
  z-index: 5;
  margin: 5px;
  text-shadow: 0 1px 4px #03070e;
}

.city-title {
  position: fixed;
  top: clamp(92px, 14vh, 150px);
  left: clamp(20px, 4.2vw, 68px);
  color: #edf8ff;
  text-shadow: 0 2px 26px #040711;
}

.city-title p, .city-title span {
  margin: 0;
  text-indent: 0;
  font: 600 11px/1.5 ui-monospace, Consolas, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #9ae8ff;
}

.city-title h1 {
  margin: 4px 0;
  font: 640 clamp(32px, 4.6vw, 68px)/1.02 system-ui, sans-serif;
  letter-spacing: -.055em;
}

.city-title span {
  color: #b7c8d8;
  font-size: 10px;
}

.city-views, .city-fallback {
  position: fixed;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: max(20px, env(safe-area-inset-left));
  z-index: 70;
  margin: 0;
  color: #c6e7ed;
  font: 13px/1.35 system-ui, sans-serif;
}

.city-views button {
  pointer-events: auto;
  min-height: 42px;
  padding: 6px 13px;
  color: #d9f8fa;
  background: #06121fe8;
  border: 1px solid #3b7180;
  border-radius: 7px;
  font: 600 13px system-ui, sans-serif;
  cursor: pointer;
}

.city-views button[aria-pressed="true"] {
  background: #a0f5ff;
  border-color: #a0f5ff;
  color: #07141e;
}

.city-views p {
  margin: 7px 0 0;
  text-shadow: 0 1px 4px #03070e, 0 1px 4px #03070e;
}

.city-home :is(button, a):focus-visible {
  outline: 2px solid #a0f5ff;
  outline-offset: 3px;
}

.city-touch-hint { display: none; }

@media (821px <= width <= 1060px) {
  .city-home .neon-buttons { top: 58px; left: 24px; right: auto; }
}

@media (max-width: 820px) {
  .city-home .archisense-logo { max-width: calc(100% - 32px); }
  .city-title { top: 76px; left: 16px; }
  .city-title h1 { max-width: 12ch; }
  .city-views, .city-fallback { max-width: calc(100% - 92px); left: 14px; }
  .city-views button { padding-inline: 9px; }
}

@media (pointer: coarse) {
  .city-desktop-hint { display: none; }
  .city-touch-hint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .city-home .neo-fab *, .city-home .fab-hint.show { animation: none; }
}