html, body { height: 100%; margin: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #142033;
  background: #e8edf3;
}
header {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  background: #fff; box-shadow: 0 8px 24px rgba(11, 27, 63, .16);
}
header strong { color: #0b1b3f; font-size: 13px; letter-spacing: .02em; }
header b { display: block; font-size: 14px; }
header span { display: block; margin-top: 1px; color: #667085; font-size: 12px; font-weight: 600; }
#map { position: absolute; inset: 0; }
#banner {
  position: absolute; z-index: 3; left: 50%; top: 72px; transform: translateX(-50%);
  margin: 0; max-width: min(420px, calc(100% - 32px));
  padding: 10px 14px; border-radius: 12px;
  background: #0b1b3f; color: #fff; font-size: 14px; font-weight: 650;
  box-shadow: 0 10px 24px rgba(11, 27, 63, .28);
}
.vehicle { width: 32px; height: 32px; }
.vehicle img { width: 32px; height: 32px; display: block; }
.vehicle .fallback {
  width: 0; height: 0; margin: 4px auto 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 22px solid #2f6fed;
  filter: drop-shadow(0 1px 1px rgba(11, 27, 63, .45));
}