#container {
  width: 100vw; 
  height: 100vh;
  position: relative; /* For tooltip positioning */
  overflow: hidden;   /* Hide scrollbars on zoom */
}

  
  /* Circles (main fields and subfields) */
  .circle {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
  }
  .circle:hover {
    opacity: 0.9;
  }
  
  /* Labels (text inside circles) */
  .label {
    pointer-events: none; /* so hover/click goes through the text to the circle */
    font-size: 1.1rem;
    fill: #333;
    text-anchor: middle;
    dominant-baseline: middle;
  }
  
  /* Tooltip styling */
  .tooltip {
    position: absolute;
    padding: 8px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    color: #333;
    max-width: 200px;
    z-index: 9999; /* ensure tooltip is on top */
  }
  
  /* If you have a separate reset button, style it here */
  .reset-button {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 16px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    z-index: 100;
  }
  .reset-button:hover {
    background: #f0f0f0;
  }