body { background: #141428; margin: 0; overflow: hidden; }
#map { display: block; position: fixed; inset: 0; width: 100%; height: 100%; background: #141428; }
div, pre { color: lightgreen; }
#options-container {
  position: fixed;
  top: 5px;
  right: 5px;
  max-width: 270px;
  z-index: 3;
}
#readme-link {
  display: block;
  margin-top: 4px;
  color: lightgreen;
  font: 16px monospace;
}
#seed-form, #tp {
  display: flex;
  align-items: center;
  gap: 4px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 7px;
  border: 2px solid lightgreen;
  background: rgba(0, 0, 0, 0.75);
  color: lightgreen;
  z-index: 3;
  font: 16px monospace;
}
#seed-form { top: 5px; }
#tp { top: 45px; }
#seed-form input, #seed-form button, #tp input, #tp select, #tp button {
  box-sizing: border-box;
  min-height: 26px;
  border: 1px solid lightgreen;
  background: #182018;
  color: lightgreen;
  font: inherit;
}
#seed-form input { width: 22ch; padding: 2px 4px; }
#seed-form button { padding: 2px 8px; cursor: pointer; }
#tp input { width: 10ch; padding: 2px 4px; }
#tp select { padding: 2px; }
#tp button { padding: 2px 8px; cursor: pointer; }
#tp button:hover { background-color: darkgreen; }
#options {
  max-width: 270px;
  padding: 5px 7px;
  border: 2px solid lightgreen;
  background: rgba(0, 0, 0, 0.75);
  color: lightgreen;
  font: 16px monospace;
}
#options summary { cursor: pointer; }
#options label { display: block; margin-top: 6px; }
#options input { accent-color: lightgreen; }
#analyze-visible-chorus {
  display: block;
  margin-top: 8px;
  color: lightgreen;
  background: #182018;
  border: 1px solid lightgreen;
  font: inherit;
  cursor: pointer;
}
#analyze-visible-chorus:disabled { cursor: wait; opacity: 0.7; }
#stop-visible-chorus {
  display: block;
  margin-top: 4px;
  color: #ffb0b0;
  background: #281818;
  border: 1px solid #ff8080;
  font: inherit;
  cursor: pointer;
}
#chorus-visible-status { display: block; margin-top: 5px; }
#console {
  display: flex;
  flex-direction: column-reverse;
  position: fixed;
  top: 5px;
  left: 5px;
  width: 300px;
  height: 400px;
  border: 5px solid lightgreen;
  resize: both;
  overflow: auto;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
  font-family: monospace;
}
#output { overflow: scroll; }
#input { background: rgba(127, 255, 127, 0.2); color: lightgreen; font-size: 1em; }
#markers { position: fixed; bottom: 1%; right: 1%; z-index: 1; }
#chorus-analysis {
  position: fixed;
  right: 5px;
  bottom: 5px;
  width: min(520px, 45vw);
  max-height: 45vh;
  overflow: auto;
  padding: 6px 8px;
  border: 2px solid #d080ff;
  background: rgba(0, 0, 0, 0.82);
  color: #e0b0ff;
  font: 14px monospace;
  white-space: pre-wrap;
  z-index: 3;
}
.map-marker { position: fixed; pointer-events: auto; }
.map-marker__block, .map-marker__chunk { color: lightgray; }
.map-gateway-icon, .map-chorus-icon {
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  color: lightgreen;
  font: 16px sans-serif;
  line-height: 16px;
  text-align: center;
  z-index: 1;
}
.map-gateway-icon img, .map-chorus-icon img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
.map-gateway-icon__fallback, .map-chorus-icon__fallback { position: absolute; inset: 0; }
.map-overlay {
  position: fixed;
  z-index: 1;
  color: lightgreen;
  font: 16px serif;
  line-height: normal;
  white-space: pre;
  user-select: text;
  pointer-events: auto;
}