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 32px; }
.chart-wrap { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
#chart svg { display: block; }
.arc { cursor: pointer; transition: opacity 0.15s; }
.arc:hover { opacity: 0.8; }
#legend { display: flex; flex-direction: column; gap: 10px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8em; }
.legend-swatch { width: 12px; height: 12px; flex-shrink: 0; }
.legend-label { color: #555; }
.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;
}