@font-face {
  font-family: "Kreative Square";
  src: url("/viewer-font.ttf") format("truetype");
  font-display: block;
}

:root {
  color-scheme: dark;
  font-family: monospace;
  background: #171717;
  color: #eeeeee;
}

body { margin: 0; }
main { width: 100vh; margin: 0 auto; padding: 1rem; }
h1, h2 { font-weight: 600; }
h1 { margin-bottom: 0.25rem; }
h2 { font-size: 1rem; margin-bottom: 0.35rem; }
pre { overflow: auto; }
#map {
  border: 1px solid #555;
  padding: 0.75rem;
  font-family: "Kreative Square", monospace;
  font-size: 16px;
  line-height: 1;
  font-variant-ligatures: none;
  white-space: pre;
  height: 21em;
  width: 79em;
}
section { margin-top: 1rem; }
#status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
  margin: 0;
}
.status-field {
  border: 1px solid #555;
  padding: 0.5rem 0.75rem;
}
.status-field dt { color: #aaa; font-size: 0.85rem; }
.status-field dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
.status-empty { margin: 0; color: #aaa; }