html, body { margin: 0; padding: 0; height: 100%; font-family: sans-serif; }
#container { display: flex; height: 100vh; }
#map { flex: 1; }
#sidebar {
  width: 300px; min-width: 300px;
  background: #fafafa; border-left: 1px solid #ddd;
  padding: 14px; font-size: 13px;
  overflow-y: auto; box-sizing: border-box;
}
#sidebar code { background: #f3f3f3; padding: 1px 4px; border-radius: 3px; }
#sidebar h3 { margin: 0 0 8px 0; font-size: 14px; }
.count { font-weight: bold; }
.control-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e0e0e0; }
.control-group label { display: block; font-weight: 600; margin-bottom: 4px; }
.control-group .hint { font-size: 11px; color: #888; margin-bottom: 4px; }
.control-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.control-row input[type=range] { flex: 1; }
.control-row .val { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
button.action-btn {
  margin-top: 8px; padding: 5px 12px; cursor: pointer;
  border: 1px solid #ccc; border-radius: 4px; background: #fff;
}
button.action-btn:hover { background: #f0f0f0; }
.mode-btn-container {
  position: absolute; top: 10px; left: 55px; z-index: 1000;
  display: flex; gap: 0;
  border: 2px solid rgba(0,0,0,0.2); border-radius: 4px; overflow: hidden;
}
.mode-btn {
  width: 34px; height: 34px; font-size: 18px; border: none;
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mode-btn:hover { background: #f0f0f0; }
.mode-btn.active { background: #d0e0ff; }
.control-row.computed { opacity: 0.45; }