:root {
  color-scheme: dark;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #0b1020;
  color: #d8e1ff;
}

body {
  margin: 0;
}

header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #243056;
  background: #111833;
}

.banner {
  color: #ffb347;
  margin: 0.25rem 0;
}

#status-bar.ok {
  color: #7dffb3;
}

#status-bar.error {
  color: #ff7d7d;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #243056;
}

nav button {
  background: #182040;
  color: inherit;
  border: 1px solid #31406f;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
}

nav button.active {
  background: #2a4078;
  border-color: #6d8cff;
}

main {
  padding: 1rem 1.5rem;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: #0f152b;
  border: 1px solid #243056;
  padding: 1rem;
  border-radius: 4px;
}