:root {
  color: #1b1f24;
  background: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
html, body { height: 100%; margin: 0; }
[hidden] { display: none !important; }
button, select, input { font: inherit; }
#stage { display: flex; flex-direction: column; height: 100%; }
#mapwrap { position: relative; flex: 1; min-height: 0; background: #ffffff; }
#map { display: block; width: 100%; height: 100%; }
#guide {
  box-sizing: border-box;
  max-height: 40vh;
  overflow: auto;
  border-top: 1px solid #e3e7ec;
  padding: 12px 16px;
}
#summary { margin: 0 0 8px; }
#steps { margin: 0; padding: 0; list-style: none; }
.step { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e3e7ec; }
.step--active { color: #0b5cad; }
.step__icon { width: 1.5em; }
.step__text { flex: 1; }
.step__dist { color: #5b6573; }
.nav { display: flex; gap: 8px; margin-top: 12px; }
button {
  border: 1px solid #0b5cad;
  background: #0b5cad;
  color: #ffffff;
  border-radius: 4px;
  padding: 8px 14px;
}
#chrome { position: fixed; top: 8px; right: 8px; z-index: 30; }
#notice {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 35;
  margin: 0;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e3e7ec;
}
#poster, #failure {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  background: #ffffff;
}
#failure { z-index: 40; }
#poster-site, #poster-text { margin: 0; color: #5b6573; }
#poster-title { margin: 0; font-size: 1.6rem; }
#poster-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e3e7ec;
  border-top-color: #0b5cad;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
#failure-text { margin: 0; color: #b42318; }
#mock-map { position: absolute; inset: 0; width: 100%; height: 100%; }
body[data-mode="overview"] #guide { display: none; }
@media (min-width: 720px) {
  #stage { flex-direction: row; }
  #guide { width: 300px; max-height: none; border-top: 0; border-left: 1px solid #e3e7ec; }
}
@media (prefers-reduced-motion: reduce) {
  #poster-spinner { animation: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }