body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #1d2671, #c33764);
  color: white;
  text-align: center;
}

h1 {
  margin-top: 20px;
}

.controls {
  margin: 15px;
}

.controls input {
  padding: 8px;
  width: 100px;
  margin: 5px;
}

.controls button {
  padding: 8px 15px;
  cursor: pointer;
  background: #00e5ff;
  border: none;
  border-radius: 5px;
}

#message {
  margin: 15px;
  font-size: 18px;
  min-height: 24px;
}

#treeCanvas {
  width: 100%;
  height: 500px;
}

/* NODE */
.node {
  fill: #00e5ff;
  stroke: white;
  stroke-width: 2;
  transition: all 0.6s ease;
}

/* BALANCE FACTOR */
.balance {
  fill: yellow;
  font-size: 12px;
}

/* COMPARE HIGHLIGHT */
.compare {
  fill: orange !important;
  filter: drop-shadow(0 0 10px gold);
  animation: pulse 1s infinite;
}

/* ROTATION HIGHLIGHT */
.rotate {
  fill: red !important;
}

/* ANIMATION */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}