body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 40px;
    background-color: #f9f9f9;
    color: #333;
  }
  
h2 {
text-align: center;
margin-bottom: 30px;
}

.controls {
text-align: center;
margin-bottom: 20px;
font-size: 15px;
}

.controls label {
margin-right: 15px;
cursor: pointer;
}

button {
margin-top: 10px;
padding: 8px 12px;
font-size: 14px;
border: none;
background-color: steelblue;
color: white;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #4682b4;
}

svg {
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
}

.axis text {
font-size: 12px;
}

.tooltip {
font-size: 13px;
background-color: #fff;
border: 1px solid #ccc;
padding: 8px;
border-radius: 5px;
pointer-events: none;
position: absolute;
opacity: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.chart{
width: 100%;
height: auto;
}

.chart-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#description {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 20px auto;
  font-size: 15px;
  line-height: 1.5;
}

.x-axis-label,
.y-axis-label {
  font-size: 14px;
  fill: #333;
}