html, body { margin: 0; height: 100%; background: #0e1116; color: #c9d1d9; font: 13px/1.5 Segoe UI, sans-serif; }
#sigma { position: absolute; inset: 0; }
.panel { position: fixed; top: 10px; left: 10px; z-index: 10; background: rgba(20,24,31,.92);
	border: 1px solid #30363d; border-radius: 6px; padding: 10px 12px; max-width: 360px; }
.panel h1 { font-size: 14px; margin: 0 0 6px; }
.panel .muted { color: #8b949e; }
.panel label { display: block; margin: 6px 0; }
.nav { position: fixed; top: 10px; right: 10px; z-index: 10; }
.nav a { color: #c9d1d9; background: rgba(20,24,31,.92); border: 1px solid #30363d; border-radius: 5px;
	padding: 5px 10px; text-decoration: none; margin-left: 6px; }
.nav a.active { border-color: #58a6ff; color: #58a6ff; }
.legend { position: fixed; bottom: 10px; left: 10px; z-index: 10; background: rgba(20,24,31,.92);
	border: 1px solid #30363d; border-radius: 6px; padding: 8px 10px; max-height: 45%; overflow: auto; }
.legend .row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
button { background: #21262d; color: #c9d1d9; border: 1px solid #444c56; border-radius: 6px;
	padding: 6px 14px; margin: 6px 6px 2px 0; font: 600 12px Segoe UI, sans-serif; cursor: pointer;
	box-shadow: 0 1px 0 rgba(0,0,0,.4); }
button:hover { background: #30363d; border-color: #8b949e; }
button:active { background: #161b22; box-shadow: none; transform: translateY(1px); }
.help { color: #8b949e; margin-top: 8px; }
.help summary { cursor: pointer; color: #c9d1d9; user-select: none; }
.help > div { margin-top: 4px; }
#stats b { color: #58a6ff; }
#demo { display: none; margin: 0 0 6px; padding: 3px 6px; border-radius: 4px; background: #5a3a00; color: #ffd28a; font-size: 11px; }