:root {
  color-scheme: light dark;
}

text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.th {
  font-size: 14px;
  font-weight: 500;
  fill: var(--text-main, #1a1a1a);
}
.ts {
  font-size: 12px;
  font-weight: 400;
  fill: var(--text-muted, #636c77);
}

/* Red nodes */
.red rect {
  fill: #fcebeb;
  stroke: #a32d2d;
}
.red .th {
  fill: #501313;
}
.red .ts {
  fill: #a32d2d;
}

/* Coral nodes */
.coral rect {
  fill: #faece7;
  stroke: #993c1d;
}
.coral .th {
  fill: #4a1b0c;
}
.coral .ts {
  fill: #993c1d;
}

/* Teal nodes */
.teal rect {
  fill: #e1f5ee;
  stroke: #0f6e56;
}
.teal .th {
  fill: #04342c;
}
.teal .ts {
  fill: #0f6e56;
}

/* Gray nodes */
.gray rect {
  fill: #f1efe8;
  stroke: #5f5e5a;
}
.gray .th {
  fill: #2c2c2a;
}
.gray .ts {
  fill: #5f5e5a;
}

/* Header nodes */
.header-red rect {
  fill: #e24b4a;
  stroke: #a32d2d;
}
.header-red .th {
  fill: #fff;
}
.header-teal rect {
  fill: #1d9e75;
  stroke: #0f6e56;
}
.header-teal .th {
  fill: #fff;
}

.divider {
  stroke: #b4b2a9;
  stroke-dasharray: 4 4;
}
.arr {
  stroke: #888780;
  fill: none;
  stroke-width: 1.5;
}

.caption {
  font-size: 12px;
  fill: #888780;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  .th {
    fill: #e6edf3;
  }
  .ts {
    fill: #9ba3af;
  }

  .red rect {
    fill: #501313;
    stroke: #f09595;
  }
  .red .th {
    fill: #fcebeb;
  }
  .red .ts {
    fill: #f09595;
  }

  .coral rect {
    fill: #4a1b0c;
    stroke: #f0997b;
  }
  .coral .th {
    fill: #faece7;
  }
  .coral .ts {
    fill: #f0997b;
  }

  .teal rect {
    fill: #04342c;
    stroke: #5dcaa5;
  }
  .teal .th {
    fill: #e1f5ee;
  }
  .teal .ts {
    fill: #5dcaa5;
  }

  .gray rect {
    fill: #2c2c2a;
    stroke: #b4b2a9;
  }
  .gray .th {
    fill: #f1efe8;
  }
  .gray .ts {
    fill: #b4b2a9;
  }

  .header-red rect {
    fill: #791f1f;
    stroke: #f09595;
  }
  .header-red .th {
    fill: #fcebeb;
  }
  .header-teal rect {
    fill: #085041;
    stroke: #5dcaa5;
  }
  .header-teal .th {
    fill: #e1f5ee;
  }

  .divider {
    stroke: #444441;
  }
  .arr {
    stroke: #5f5e5a;
  }
  .caption {
    fill: #5f5e5a;
  }
}