@media (prefers-color-scheme: light) {
  * {
    --bg: #eee;
    --fg: #333;
  }
}
@media (prefers-color-scheme: dark) {
  * {
    --bg: #333;
    --fg: #eee;
  }
}
:root {
  background: var(--bg);
  color: var(--fg);
}
.page {
  display: flex;
  flex-direction: column;
}
.chart {
  height: 96vh;
  display: flex;
  justify-content: center;
}
.legend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
}
.title {
  fill: var(--fg);
  font-size: 50px;
}
.axis {
  fill: var(--fg);
  font-size: 40px;
}
.axis-line {
  stroke: var(--fg);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.tick {
  fill: var(--fg);
  font-size: 32px;
}
.plot-label {
  fill: var(--fg);
  font-size: 32px;
}
.grid-x {
  stroke: gray;
  stroke-opacity: 50%;
  stroke-width: 1px;
  stroke-dasharray: 1 3;
  vector-effect: non-scaling-stroke;
}
.grid-y {
  stroke: gray;
  stroke-opacity: 50%;
  stroke-width: 1px;
  stroke-dasharray: 1 3;
  vector-effect: non-scaling-stroke;
}
.plot-area {
  fill: var(--color);
  stroke: none;
  stroke-width: 5px;
  marker: var(--marker);
}
.legend-area {
  fill: var(--color);
  stroke: none;
  stroke-width: 5px;
  marker-mid: var(--marker);
}
.plot-line {
  fill: none;
  stroke: var(--color);
  stroke-width: 5px;
  marker: var(--marker);
}
.legend-line {
  fill: none;
  stroke: var(--color);
  stroke-width: 5px;
  marker-mid: var(--marker);
}
.plot-scatter {
  fill: none;
  stroke: none;
  stroke-width: 5px;
  marker: var(--marker);
}
.legend-scatter {
  fill: none;
  stroke: none;
  stroke-width: 5px;
  marker-mid: var(--marker);
}
marker > * {
  fill: var(--color);
}
.plot-0 {
  --color: #4E79A7;
  --marker: url(#marker-0);
}
.plot-1 {
  --color: #F28E2C;
  --marker: url(#marker-1);
}
.plot-2 {
  --color: #E15759;
  --marker: url(#marker-2);
}
.plot-3 {
  --color: #76B7B2;
  --marker: url(#marker-3);
}
.plot-4 {
  --color: #59A14F;
  --marker: url(#marker-4);
}
.plot-5 {
  --color: #EDC949;
  --marker: url(#marker-5);
}
.plot-6 {
  --color: #AF7AA1;
  --marker: url(#marker-6);
}
.plot-7 {
  --color: #FF9DA7;
  --marker: url(#marker-7);
}
.plot-8 {
  --color: #9C755F;
  --marker: url(#marker-8);
}
.plot-9 {
  --color: #BAB0AB;
  --marker: url(#marker-9);
}