@font-face {
     font-family: 'Roboto';
     src: url('../fonts/Roboto-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Roboto';
     src: url('../fonts/Roboto-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }

 body {
     font-family: 'Roboto', sans-serif;
     padding: 20px;
     background-color: #1F2731
         /*#f5f5f5;*/
 }

 .container {
     max-width: 950px;
     margin: 0 auto;
     background: white;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 h2 {
     text-align: center;
     color: #333;
     margin-bottom: 20px;
 }

 .controls {
     margin-bottom: 20px;
     padding: 15px;
     background: #f8f9fa;
     border-radius: 5px;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
 }

 .control-group {
     margin-bottom: 10px;
 }

 label {
     display: inline-block;
     margin-right: 15px;
     cursor: pointer;
     font-size: 14px;
 }

 input[type="checkbox"],
 input[type="radio"] {
     margin-right: 5px;
     cursor: pointer;
 }

 .legend {
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding: 8px 12px;
     background: white;
     border-radius: 4px;
     border: 1px solid #ddd;
 }

 .legend-item {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 11px;
 }

 .legend-color {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     border: 1px solid #fff;
     flex-shrink: 0;
 }

 .tooltip {
     position: absolute;
     padding: 10px;
     background: rgba(0, 0, 0, 0.85);
     color: white;
     border-radius: 5px;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.2s;
     font-size: 12px;
     z-index: 1000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }

 circle {
     stroke: #fff;
     stroke-width: 1px;
     cursor: pointer;
     transition: opacity 0.3s, stroke-width 0.2s;
 }

 circle:hover {
     stroke: #000;
     stroke-width: 2px;
 }

 .axis-label {
     font-size: 13px;
     font-weight: bold;
     fill: #333;
 }

 svg {
     display: block;
     margin: 0 auto;
 }

 #parallel {
     overflow: visible;
 }