* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0d10; }
canvas { display: block; width: 100%; height: 100%; }

.legend {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 14px 22px 16px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font: 400 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: rgba(255, 255, 255, .74);
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.legend strong {
  font-size: 15px; font-weight: 650; letter-spacing: .02em; color: #fff;
}
.legend span { opacity: .8; }

.back {
  position: fixed; top: 14px; left: 16px; z-index: 10;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em;
  color: rgba(255, 255, 255, .8); text-decoration: none;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(12, 14, 18, .6); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
}
.back:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }