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

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

#galaxy {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

#galaxy:active { cursor: grabbing; }

#loading {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: 0.7rem;
  padding: 2rem;
  background: radial-gradient(circle, #0b1728, #01030a 58%);
  text-align: center;
  transition: opacity 420ms ease;
}

#loading.ready { pointer-events: none; opacity: 0; }
#loading span { color: #7fb8ff; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
#loading strong { font-size: clamp(1rem, 3vw, 1.35rem); }
.progress { width: min(28rem, 72vw); height: 0.22rem; overflow: hidden; background: #172338; }
.progress i { display: block; width: 0; height: 100%; background: #72bcff; transition: width 220ms ease; }

#controls {
  position: fixed;
  z-index: 2;
  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);
  overflow: auto;
  padding: 1.1rem;
  border: 1px solid rgba(155, 197, 255, 0.24);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(9, 18, 34, 0.95), rgba(2, 5, 12, 0.88));
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
}

header { margin-bottom: 1rem; }
.eyebrow, .target-label { margin: 0 0 0.2rem; color: #7fb8ff; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 2.45rem); line-height: 1; letter-spacing: -0.04em; }
#status { min-height: 2.4em; margin: 0.45rem 0 0; color: #b8c8df; font-size: 0.84rem; line-height: 1.4; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
button, input, .button { font: inherit; }
button, .button {
  min-height: 2.75rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(145, 185, 241, 0.35);
  border-radius: 0.62rem;
  background: rgba(35, 55, 82, 0.72);
  color: #edf5ff;
  font-size: 0.84rem;
  font-weight: 650;
}

.button { display: grid; place-items: center; text-align: center; text-decoration: none; }
button.primary { grid-column: 1 / -1; border-color: rgba(111, 208, 255, 0.75); background: linear-gradient(135deg, #176bc4, #3d46a8); }
button:disabled { cursor: not-allowed; opacity: 0.46; }

.targets { margin-top: 1rem; }
.targets h2 { margin: 0 0 0.5rem; color: #cdd9e7; font-size: 0.78rem; }
#target-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
#target-list button { min-width: 0; padding-inline: 0.35rem; font-size: 0.75rem; }
#target-list button[aria-pressed="true"] { border-color: #73c4ff; background: #174d79; }

.target-readout { margin-top: 0.9rem; padding: 0.85rem; border: 1px solid rgba(140, 174, 217, 0.19); border-radius: 0.72rem; background: rgba(1, 5, 12, 0.52); }
.target-readout h2 { margin: 0.1rem 0 0.35rem; font-size: 1.15rem; }
.target-readout p:not(.target-label) { margin: 0.2rem 0; color: #9fb0c6; font-size: 0.75rem; line-height: 1.4; }

.settings { display: grid; gap: 0.72rem; margin-top: 0.9rem; }
.settings label { display: grid; gap: 0.25rem; color: #ccd9e9; font-size: 0.76rem; font-weight: 620; }
input[type="range"] { width: 100%; accent-color: #64b9ff; }
output { justify-self: end; margin-top: -1.2rem; color: #8ecaff; font-variant-numeric: tabular-nums; }

.instruction { color: #9eb0c8; font-size: 0.74rem; line-height: 1.45; }
details { margin-top: 0.9rem; border-top: 1px solid rgba(140, 174, 217, 0.19); padding-top: 0.7rem; color: #9fb0c6; font-size: 0.72rem; line-height: 1.45; }
summary { cursor: pointer; color: #cbd9ec; font-weight: 650; }
details p { margin: 0.6rem 0; }

#show-controls { position: fixed; z-index: 3; top: 1rem; left: 1rem; }
#accuracy-badge { position: fixed; right: 1rem; bottom: 1rem; padding: 0.48rem 0.7rem; border: 1px solid rgba(124, 180, 229, 0.2); border-radius: 999px; background: rgba(3, 8, 17, 0.8); color: #91a8bf; font-size: 0.66rem; letter-spacing: 0.08em; }

@media (max-width: 640px) {
  #controls { max-height: 67vh; }
  .actions { grid-template-columns: 1fr; }
  button.primary { grid-column: auto; }
  #accuracy-badge { max-width: calc(100vw - 2rem); font-size: 0.58rem; }
}

@media (prefers-reduced-motion: reduce) { #loading { transition: none; } }