:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #viewer, #map { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #081016; }

.title-card,
.controls {
  position: absolute;
  z-index: 2;
  color: #f4f7f8;
  background: rgba(7, 15, 21, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
}

.title-card { top: 18px; left: 18px; padding: 15px 18px; border-radius: 13px; }
.title-card h1 { margin: 1px 0 4px; font-size: 1.18rem; letter-spacing: 0.01em; }
.title-card p { margin: 0; color: #b7c4ca; font-size: 0.78rem; }
.title-card .eyebrow { color: #78d7a8; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.65rem; }
.title-card .path-label { margin: 7px 0 2px; color: #f4f7f8; font-weight: 650; }

.controls {
  left: 50%;
  bottom: 22px;
  width: min(820px, calc(100% - 28px));
  padding: 13px 15px 14px;
  border-radius: 15px;
  transform: translateX(-50%);
}

.transport, .settings { display: flex; align-items: center; gap: 11px; }
.transport { margin-bottom: 9px; }
.transport #utc { margin-left: auto; color: #b7c4ca; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
#clock { min-width: 70px; font-weight: 650; font-variant-numeric: tabular-nums; }

button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 7px 11px;
  color: #f4f7f8;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
button:hover { background: rgba(255, 255, 255, 0.16); }
#play { width: 40px; color: #78d7a8; }

input[type="range"] { accent-color: #55d596; }
#timeline { width: 100%; margin: 0 0 10px; }
.settings { justify-content: space-between; color: #c8d2d7; font-size: 0.74rem; }
.settings label { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.settings output { min-width: 33px; color: #f4f7f8; font-variant-numeric: tabular-nums; }
.check input { accent-color: #55d596; }

.satellite-marker { width: 18px; height: 18px; border: 2px solid white; border-radius: 50%; background: #45df91; box-shadow: 0 0 0 6px rgba(69, 223, 145, 0.24); }

.maplibregl-ctrl-attrib { font-size: 10px; }

@media (max-width: 680px) {
  .title-card { top: 10px; left: 10px; }
  .controls { bottom: 10px; }
  .settings { flex-wrap: wrap; justify-content: flex-start; }
  .transport #utc { font-size: 0.65rem; }
}