.chaarts[class*=column] {
  --gap: 0.5rem;
  --size: calc(var(--scale, 100) * 100%);
  --width: calc(64em / var(--y) - 1rem);
  display: grid;
  grid-column-gap: var(--gap);
  max-block-size: 64em;
  position: relative;
}

.chaarts[class*=column] td,
.chaarts[class*=column] th,
.chaarts[class*=column] col {
  grid-column: 1;
  margin: 0;
}

.chaarts[class*=column] tr > * + * {
  text-align: center;
}

.chaarts[class*=column] tr,
.chaarts[class*=column] tbody,
.chaarts[class*=column] thead,
.chaarts[class*=column] colgroup {
  display: contents;
}

.chaarts[class*=column] caption {
  grid-column: 1/span var(--y);
  grid-row: -1;
}

.chaarts[class*=column] td {
  --integer: calc(var(--value));
  grid-row: calc(var(--scale, 100) + 2 - var(--integer)) / -2;
  pointer-events: none;
  position: relative;
  transition: opacity 0.2s var(--move);
}

.chaarts[class*=column] td:nth-of-type(1) {
  grid-column: 2;
}

.chaarts[class*=column] td:nth-of-type(2) {
  grid-column: 3;
}

.chaarts[class*=column] td:nth-of-type(3) {
  grid-column: 4;
}

.chaarts[class*=column] td:nth-of-type(4) {
  grid-column: 5;
}

.chaarts[class*=column] td:nth-of-type(5) {
  grid-column: 6;
}

.chaarts[class*=column] td:nth-of-type(6) {
  grid-column: 7;
}

.chaarts[class*=column] td:nth-of-type(7) {
  grid-column: 8;
}

.chaarts[class*=column] td:nth-of-type(8) {
  grid-column: 9;
}

.chaarts[class*=column] td:nth-of-type(9) {
  grid-column: 10;
}

.chaarts[class*=column] td:nth-of-type(10) {
  grid-column: 11;
}

.chaarts[class*=column] span {
  background: inherit;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  inset-block-end: 100%;
  inset-inline-end: 0;
  inset-inline-start: 0;
  line-height: 1.5;
  pointer-events: auto;
  position: absolute;
}

@media (prefers-contrast: more) {
  .chaarts[class*=column] span {
    background: var(--background-lighter);
    background-clip: unset;
    color: var(--chaarts-blue);
  }
}
.chaarts[class*=column] col {
  background: var(--background) var(--stripes);
  background-blend-mode: exclusion;
  grid-row: 1/-1;
  mix-blend-mode: color;
  opacity: 0.25;
  transition: opacity 0.3s var(--move);
}

.chaarts[class*=column] col:hover {
  opacity: 0.5;
}

.chaarts[class*=column] col:first-of-type {
  opacity: 0;
}

.chaarts[class*=column] col:nth-of-type(2),
.chaarts[class*=column] thead tr *:nth-of-type(2) {
  grid-column: 2;
}

.chaarts[class*=column] col:nth-of-type(3),
.chaarts[class*=column] thead tr *:nth-of-type(3) {
  grid-column: 3;
}

.chaarts[class*=column] col:nth-of-type(4),
.chaarts[class*=column] thead tr *:nth-of-type(4) {
  grid-column: 4;
}

.chaarts[class*=column] col:nth-of-type(5),
.chaarts[class*=column] thead tr *:nth-of-type(5) {
  grid-column: 5;
}

.chaarts[class*=column] col:nth-of-type(6),
.chaarts[class*=column] thead tr *:nth-of-type(6) {
  grid-column: 6;
}

.chaarts[class*=column] col:nth-of-type(7),
.chaarts[class*=column] thead tr *:nth-of-type(7) {
  grid-column: 7;
}

.chaarts[class*=column] col:nth-of-type(8),
.chaarts[class*=column] thead tr *:nth-of-type(8) {
  grid-column: 8;
}

.chaarts[class*=column] col:nth-of-type(9),
.chaarts[class*=column] thead tr *:nth-of-type(9) {
  grid-column: 9;
}

.chaarts[class*=column] col:nth-of-type(10),
.chaarts[class*=column] thead tr *:nth-of-type(10) {
  grid-column: 10;
}

.chaarts.column-single {
  grid-auto-columns: 1fr;
  grid-template-rows: 2ex repeat(var(--scale, 100), minmax(0, 0.25rem)) minmax(min-content, 2rem);
}

.chaarts.column-single tbody th {
  grid-row: -6/-3;
  line-height: 1;
}

.chaarts.column-single thead * {
  grid-row: -2;
}

.chaarts.column-single td {
  --position: calc(var(--integer, 0) / var(--scale, 100) * 100%);
  background: linear-gradient(to top, var(--chaarts-green), var(--chaarts-gray), var(--chaarts-blue), var(--chaarts-purple), var(--chaarts-red)) 0% var(--position) / 100% var(--size), var(--background) center/1rem;
  background-blend-mode: hard-light;
}

.chaarts.column-single td:nth-of-type(1n + 1) {
  --background: var(--checkers);
}

.chaarts.column-single td:nth-of-type(2n + 2) {
  --background: var(--hexagons);
}

.chaarts.column-single td:nth-of-type(3n + 3) {
  --background: var(--triangles);
}

.chaarts.column-single td:nth-of-type(4n + 4) {
  --background: var(--zig);
}

.chaarts.column-single td:nth-of-type(5n + 5) {
  --background: var(--stripes);
}

.chaarts.column-single td:nth-of-type(6n + 6) {
  --background: var(--dots);
}

@media (prefers-contrast: more) {
  .chaarts.column-single td {
    background-color: var(--chaarts-blue);
  }
}
