html {
  & {
  --good: #1D4ED8;
 --better: #A5B4FC;
 --blank: #E0E0E0;
 --bad: #ee6363;
 
  --goods: #1D4ED8;
  --bads: #EF4444;
 
    --red: #ee6363;
    --yellow: #d5920b;
    --green: #52a329;
    --blue: #4c84f6;
    --gray: #888;
    --black: #101010;
    --white: #F0F0F0;
	--black2: #0000001;	
    --borw: var(--black);
    --worb: var(--white);
    --worb2: var(--black2);	
  }

}
table._bar-chart {
  & {
    --bar-max: 100;
    --bar-value: 10;
    --bar-color: var(--borw);
    display: block;
	margin-bottom: 0.5em;
	padding: 2px 3px 10px 1px;
background:#FFF;
  }
  & > * + * {
    margin-block-start: 1rem;
  }
  & :is(caption, thead) {
    display: block;
    inline-size: fit-content;
    margin-inline: auto;
    text-align: inherit;
  }
  & thead tr {
    display: flex;
      flex-flow: wrap;
      column-gap: 1rem;
  }
  & thead th {
    display: block;
	background:#FFF;
    font-weight: inherit;
    text-align: inherit;
	border: none;
  }
  & thead th::before {
    aspect-ratio: 1 / 1;
    background: var(--bar-color);
    border-radius: 50%;
    content: "";
    display: inline-block;
    inline-size: 1em;
    margin-inline-end: 0.5em;
    vertical-align: middle;
  }
  & tbody {
    display: grid;
      grid: none / auto repeat(var(--bar-max), 1fr);
      row-gap: 1rem;
  }
  & tbody tr {
    display: grid;
      grid: repeat(100, auto) 1fr / subgrid;
      grid-column: 1 / -1;
  }
  & tbody th {
    display: block;
    font-weight: inherit;
    grid-row: 1 / -1;
      align-self: center;
    margin-inline-end: 0.25rem;
    text-align: right;
	background:#FFF;
	border: 0px;
  }
  & tbody td {
    background: var(--bar-color);
    color: var(--worb);
    display: block;
    grid-column-end: span var(--bar-value);
    overflow: hidden;
    padding-inline: 1px;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
	border: 0px;
	margin-bottom: 0.5em;
  }
  & tbody td.worb2 {
    color: var(--worb2);
  }  
  
  & tr > :is(:empty, [style*="--bar-value: 0;"]) {
    clip-path: inset(50%);
    position: absolute;
  }
  &:where(.grouped) {
    & tbody td {
      grid-column-start: 2;
    }
    & tbody td + * {
      margin-block-start: 1px;
    }
  }
}