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

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #01030a;
}

button,
.button,
input { font: inherit; }

#stars {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  touch-action: none;
  cursor: grab;
}

#stars:active { cursor: grabbing; }

#loading {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  gap: 0.7rem;
  padding: 2rem;
  text-align: center;
  background: radial-gradient(circle at 50% 45%, #101b3a 0, #02050d 43%, #010208 100%);
  transition: opacity 450ms ease, visibility 450ms ease;
}

#loading.ready {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loading span,
.eyebrow,
.location-label {
  color: #77c8ff;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.progress,
.travel-progress {
  overflow: hidden;
  width: min(28rem, 76vw);
  height: 0.25rem;
  border-radius: 999px;
  background: #ffffff18;
}

.progress i,
.travel-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #58d7ff, #bf82ff, #ffe0a0);
  box-shadow: 0 0 18px #73ceffcc;
  transition: width 180ms linear;
}

#controls {
  position: fixed;
  z-index: 3;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  width: min(27rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem - env(safe-area-inset-top));
  overflow: auto;
  padding: 1.15rem;
  border: 1px solid #91d9ff35;
  border-radius: 1.15rem;
  background: linear-gradient(145deg, #071225e8, #020714e6);
  box-shadow: 0 1.8rem 5rem #000b, inset 0 1px #ffffff10;
  backdrop-filter: blur(20px) saturate(130%);
  transition: opacity 180ms ease, transform 180ms ease;
}

#controls.hidden {
  opacity: 0;
  transform: translateX(-1rem);
  pointer-events: none;
}

header h1 {
  margin: 0.08rem 0 0;
  font-size: clamp(1.9rem, 5vw, 3.3rem);
  font-weight: 680;
  letter-spacing: -0.045em;
}

header p { margin: 0.35rem 0 0; }

#status,
.instruction,
details,
#location-note {
  color: #b9c9df;
  font-size: 0.86rem;
  line-height: 1.45;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

button,
.button {
  min-height: 2.55rem;
  padding: 0.62rem 0.82rem;
  border: 1px solid #9bdcff38;
  border-radius: 0.7rem;
  background: #132440c9;
  color: #eaf6ff;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

button:hover,
.button:hover,
button:focus-visible,
.button:focus-visible {
  border-color: #79d5ff;
  background: #19365b;
  outline: none;
  transform: translateY(-1px);
}

button:active { transform: scale(0.98); }
button:disabled { cursor: wait; opacity: 0.5; }
button.primary { background: linear-gradient(135deg, #087fae, #6857ba); }

.destinations { margin-top: 1.1rem; }
.destinations h2 { margin: 0 0 0.55rem; font-size: 0.86rem; font-weight: 650; }

#destination-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

#destination-list button {
  display: grid;
  gap: 0.12rem;
  min-height: 3.55rem;
  text-align: left;
}

#destination-list button span { font-size: 0.8rem; font-weight: 700; }
#destination-list button small { color: #9eb5d3; font-size: 0.68rem; }
#destination-list button.active { border-color: #ffe6a7; background: #3b3150; }

.location {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid #ffffff12;
  border-radius: 0.8rem;
  background: #020817b8;
}

.location p,
.location h2 { margin: 0; }
.location h2 { margin-top: 0.15rem; font-size: 1.2rem; }
#location-distance { color: #d7e8ff; font-size: 0.78rem; }
#location-uncertainty,
#location-source { color: #91a9c7; font-size: 0.69rem; }
.travel-progress { width: 100%; margin: 0.65rem 0; }

.settings {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.9rem;
}

.settings label {
  display: grid;
  gap: 0.25rem;
  color: #c8d8ed;
  font-size: 0.76rem;
}

.settings output { justify-self: end; margin-top: -1.2rem; color: #7ddaff; }
.settings input[type="range"] { width: 100%; accent-color: #75d5ff; }
.settings label.check { display: flex; align-items: center; gap: 0.5rem; }
.instruction { margin-bottom: 0.4rem; }
details { border-top: 1px solid #ffffff15; padding-top: 0.75rem; }
summary { color: #d9edff; cursor: pointer; }

#show-controls {
  position: fixed;
  z-index: 4;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
}

#accuracy-badge {
  position: fixed;
  right: max(0.8rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 2;
  padding: 0.45rem 0.65rem;
  border: 1px solid #83d7ff2e;
  border-radius: 999px;
  background: #020714c9;
  color: #9bc9e8;
  font-size: 0.62rem;
  font-weight: 720;
  letter-spacing: 0.12em;
}

@media (max-width: 650px) {
  #controls { max-height: min(76vh, 47rem); }
  #accuracy-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}