svg {
  background-color: white;
}
.spiral {
  fill: none;
  stroke: #DDD;
  stroke-width: 2px;
}
.my_axis {
  fill: none;
  stroke: lightgray;
  stroke-dasharray: 24 6 2 6;
  shape-rendering: crispEdges;
}
.radius_indicator {
  fill: none;
  stroke: gray;
  stroke-dasharray: 3 6;
}
.dot {
  stroke: black;
  stroke-width: 0.5;
}

.axis {
  font: 10px sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.axis .domain {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: 10px;
  stroke-linecap: round;
}
.axis .halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 8px;
  stroke-linecap: round;
}
.slider .handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: .5;
  stroke-width: 1.25px;
  pointer-events: none;
}

.debug {
  display: none;
}

.overlay {
  fill: transparent;
}