nav { font-family: monospace; font-size: 0.85em; padding: 12px 20px; }
nav a { color: inherit; text-decoration: none; }
nav a:hover { text-decoration: underline; }
body { margin: 0; font-family: monospace; background: white; }
.container { max-width: 760px; margin: 0 auto; padding: 40px 20px; }
h1 { font-size: 1.4em; margin: 0 0 4px; }
.subtitle { font-size: 0.8em; color: #aaa; margin: 0 0 16px; }
.legend-row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; font-size: 0.8em; color: #555; }
.dot-legend { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot-a { background: #222; }
.dot-b { background: #aaa; }
.leg-label { margin-right: 8px; }
.dot-plot { cursor: pointer; }
.dot-plot:hover { stroke: #222; stroke-width: 2; }
.axis text { font-family: monospace; font-size: 11px; fill: #aaa; }
.axis line, .axis path { stroke: #e0e0e0; }
.grid line { stroke: #e0e0e0; stroke-dasharray: 2,3; }
.grid path { stroke: none; }
.axis-label { font-family: monospace; font-size: 11px; fill: #aaa; }
.tooltip {
  position: fixed;
  background: #222;
  color: #fff;
  font-family: monospace;
  font-size: 0.75em;
  padding: 8px 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}