body {
  margin: 0;
  background: #f0f0f0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mindmap-container {
  position: relative;
  width: 400px;
  height: 400px;
}

.button {
  position: absolute;
  border-radius: 50%;
  transition: top 0.4s ease, left 0.4s ease, transform 0.3s ease;
  animation: softFlow 10s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: sans-serif;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.center {
  width: 80px;
  height: 80px;
  background: #3498db;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.center.pulse, .satellite.pulse {
  animation: pulse 0.4s ease;
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(0.85); }
  100% { transform: translate(-50%, -50%) scale(1.1); }
}

.satellite {
  width: 50px;
  height: 50px;
  background: #2ecc71;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 5;
}