body[data-app="metronearby"] {
  --accent: #42dcf5;
  --accent-2: #3c7dff;
  --accent-rgb: 66, 220, 245;
  --accent-2-rgb: 60, 125, 255;
  --bg-soft: #081c38;
}

body[data-app="metronearby"] .site-nav.scrolled { background: rgba(4, 17, 38, .82); }
.unavailable-pill { cursor: default; opacity: .72; }
.status-chip { color: #ffb6ad; border-color: rgba(255,111,97,.28); background: rgba(255,111,97,.08); }
.button.is-disabled { cursor: not-allowed; opacity: .62; filter: saturate(.45); pointer-events: none; }
.unavailable-panel { border-color: rgba(255,111,97,.23); background: linear-gradient(130deg, rgba(255,111,97,.08), rgba(var(--accent-rgb), .04)); }
.hold-steps .step { opacity: .82; }
.metro-hero { overflow: hidden; }
.accuracy-note { max-width: 610px; margin-top: 18px; padding: 12px 14px; border-left: 3px solid #ff6f61; border-radius: 0 13px 13px 0; color: #aebdd1; background: rgba(255,111,97,.07); font-size: 12px; line-height: 1.65; }
.accuracy-note b { color: #ff9a8f; }
.metro-visual { isolation: isolate; }
.metro-orbit { position: absolute; z-index: -2; width: min(500px, 96%); aspect-ratio: 1; border: 1px solid rgba(var(--accent-rgb), .2); border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-2-rgb), .17), rgba(3,13,30,.03) 58%, transparent 70%); box-shadow: 0 0 80px rgba(var(--accent-rgb), .08); }
.route-track { position: absolute; z-index: -1; width: 90%; height: 68%; border: 8px solid rgba(255,255,255,.07); border-radius: 52% 46% 51% 44%; transform: rotate(-8deg); }
.route-track::after { content: ""; position: absolute; inset: -8px; border: 2px solid rgba(var(--accent-rgb), .55); border-radius: inherit; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .35)); }
.route-track i { position: absolute; z-index: 2; width: 15px; height: 15px; border: 4px solid #dffcff; border-radius: 50%; background: #0b4daa; box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .12); }
.route-track i:nth-child(1) { left: 8%; top: 5%; }
.route-track i:nth-child(2) { right: 7%; top: 20%; }
.route-track i:nth-child(3) { right: 14%; bottom: 4%; }
.route-track i:nth-child(4) { left: 6%; bottom: 18%; }
.metro-mascot { position: relative; z-index: 2; width: min(390px, 78%); max-height: 570px; object-fit: contain; filter: drop-shadow(0 28px 38px rgba(0,0,0,.5)); animation: hover-art 5.5s ease-in-out infinite; }
.arrival-board { position: absolute; z-index: 4; min-width: 154px; padding: 13px 15px; border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 17px; background: rgba(5, 22, 49, .88); box-shadow: 0 18px 45px rgba(0,0,0,.35); backdrop-filter: blur(14px); }
.arrival-board small, .arrival-board span { display: block; color: var(--muted); font-size: 10px; }
.arrival-board b { display: block; margin: 4px 0; color: #effcff; font-size: 21px; }
.arrival-board.first { left: 0; top: 18%; transform: rotate(-3deg); }
.arrival-board.second { right: 0; bottom: 18%; transform: rotate(3deg); }
.arrival-board.second b { color: var(--accent); font-variant-numeric: tabular-nums; }

.metro-carousel { background: linear-gradient(145deg, rgba(9,35,75,.9), rgba(4,16,38,.9)); }
.metro-carousel .carousel-slide { min-height: 520px; padding: 48px 64px 70px; }
.metro-carousel figure { width: 100%; display: grid; place-items: center; gap: 24px; }
.metro-carousel img { width: auto; max-width: min(100%, 900px); max-height: 340px; filter: drop-shadow(0 22px 30px rgba(0,0,0,.32)); }
.metro-carousel figcaption { color: #dbf8ff; font-size: clamp(18px, 3vw, 28px); font-weight: 850; text-align: center; }

@media (max-width: 900px) {
  .accuracy-note { margin-inline: auto; text-align: left; }
  .metro-visual { min-height: 540px; }
  .metro-mascot { width: min(370px, 70%); }
  .arrival-board.first { left: 8%; }
  .arrival-board.second { right: 8%; }
}

@media (max-width: 640px) {
  .metro-hero { overflow: visible; }
  .metro-visual { min-height: 430px; }
  .metro-mascot { width: min(300px, 76%); max-height: 400px; }
  .arrival-board { min-width: 126px; padding: 10px 11px; }
  .arrival-board b { font-size: 17px; }
  .arrival-board.first { left: 0; top: 13%; }
  .arrival-board.second { right: 0; bottom: 12%; }
  .metro-carousel .carousel-slide { min-height: 390px; padding: 42px 34px 64px; }
  .metro-carousel img { max-height: 245px; }
}