*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background: #10141b;
  color: #e8ecf4;
  font: 14px/1.45 ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px;
  background: linear-gradient(#10141bdd, #10141b00);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }

.brand { font-weight: 650; letter-spacing: .01em; }
.brand span {
  display: block; font-weight: 400; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #7f8ca3; margin-top: 2px;
}

.tools { display: flex; align-items: center; gap: 6px; }
button {
  font: inherit; color: #dfe6f2;
  background: #1b212c; border: 1px solid #2b3441; border-radius: 7px;
  padding: 7px 11px; cursor: pointer; line-height: 1;
}
button:hover { background: #232b38; border-color: #3a4657; }
button.primary { background: #2d6cf6; border-color: #2d6cf6; color: #fff; font-weight: 550; }
button.primary:hover { background: #1f5be0; }

.seed { margin-left: 10px; font-size: 12px; color: #7f8ca3; }
.seed b { color: #b9c4d6; font-weight: 550; font-variant-numeric: tabular-nums; }

.panel {
  position: fixed; z-index: 2; width: 232px;
  background: #161b24ee; border: 1px solid #262f3d; border-radius: 10px;
  padding: 13px 14px; backdrop-filter: blur(6px);
}
.panel.left { left: 16px; bottom: 44px; }
.panel.right { right: 16px; top: 68px; }
.panel h2 {
  margin: 0 0 9px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #7f8ca3;
}
.row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 3px 0; border-bottom: 1px solid #212936;
}
.row:last-child { border-bottom: 0; }
.row span { color: #8b98ad; font-size: 13px; }
.row b { font-weight: 550; font-variant-numeric: tabular-nums; }
.hint { margin-top: 8px; color: #7fd4ff; font-size: 12px; }
.note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #7f8ca3; }

.credit {
  position: fixed; left: 16px; bottom: 14px; z-index: 2;
  font-size: 11px; color: #5d6a7e;
}
.credit a { color: #7f8ca3; }

@media (max-width: 760px) {
  .panel { width: calc(50% - 22px); }
  .panel.left { bottom: 40px; }
  .panel.right { top: 64px; }
  .note { display: none; }
}