@import url("/demo/styles.css?v=20260430globe-bg");

.map-wrap {
  background: #0f141a;
}

#map {
  position: absolute;
  inset: 0;
}

#field-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.maplibregl-canvas {
  outline: none;
}

.status pre {
  max-height: 150px;
  margin: 8px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  font: 0.78rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.imagery-mode {
  display: grid;
  gap: 8px;
}

[hidden] {
  display: none !important;
}

.mode-buttons {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 8px;
}

.mode-buttons button {
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: rgba(15, 23, 42, 0.64);
  color: rgba(226, 232, 240, 0.9);
}

.mode-buttons button.is-active {
  border-color: rgba(125, 211, 252, 0.95);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.88), rgba(20, 184, 166, 0.74));
  color: white;
  box-shadow: 0 0 0 1px rgba(186, 230, 253, 0.16), 0 12px 28px rgba(8, 145, 178, 0.24);
}

body[data-theme='dark'] .time-day-mark {
  background: rgba(226, 232, 240, 0.34);
}

body[data-theme='dark'] .time-day-mark::after {
  color: rgba(226, 232, 240, 0.68);
}