.Plot {
  border: none;
  background: black;
  --TickLength: 12px;
}

.Plot > svg:last-child {
  outline: 5px solid white;
  outline-offset: -5px;
}

:root {
  --cf-orange: #ff9c59;
  --cf-orange-pale: #ffc8a3;
  --cf-yellow: #ffdf57;
  --cf-yellow-pale: #ffefa3;
  --cf-blue: #59c7ff;
  --cf-blue-pale: #b5e6ff;
  --cf-green: #62ffc6;
  --cf-green-pale: #a3ffde;
}

.bgSec1 {
  fill: #ff9c59; /* orange */
}
.bgSec1.pale {
  fill: #ffc8a3;
}

.bgSec2 {
  fill: #ffdf57; /* yellow */
}
.bgSec2.pale {
  fill: #ffefa3;
}

.bgSec3 {
  fill: #59c7ff; /* blue */
}
.bgSec3.pale {
  fill: #b5e6ff;
}

.bgSec4 {
  fill: #62ffc6; /* green */
}
.bgSec4.pale {
  fill: #a3ffde;
}


.PlotLine {
  --Color: white;
  --Thickness: 2.5px;
}

.Axis {
  align-items: center;
}

.Tick {
  align-items: flex-start;
  justify-content: flex-end;
}
.Tick.X.negative {
  justify-content: center;
  align-items: flex-end;
}
.Tick.Y.negative {
  justify-content: flex-start;
}

.Tick.X .Label {
  padding-left: 0.2em;
  padding-right: 0.2em;
}
.Tick.Y .Label {
  padding-left: calc(0.2em + var(--TickLength));
}

#controlPanel {
  color: white;
}

.seam {
  stroke: black;
  stroke-width: 4px;
  stroke-linecap: round;
}