.fig {
  position: relative;
  margin-top: calc(20 * var(--u));
  outline: none;
}
.fig canvas {
  display: block;
  image-rendering: pixelated;
}



.fig {
  max-width: 100%;
}
.fig .words {
  position: absolute;
  inset: 0;
}
.fig .w {
  position: absolute;
  white-space: pre;
  font-family: 'Handjet Cells', sans-serif;
  font-size: calc(17 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--ink);
}
.fig .w.m {
  font-family: 'Handjet Cells Mono', monospace;
}
.fig .w.dim {
  color: var(--dim);
}






.fig .readout {
  margin-left: calc(8 * var(--u));
}
.fig:focus-visible .readout::before,
.fig:focus-visible .readout::after,
.diagram.fig:not(:has(.readout)):focus-visible::before,
.diagram.fig:not(:has(.readout)):focus-visible::after {
  position: absolute;
  animation: dither-blink 0.9s linear infinite;
  mask-size: var(--dither) var(--dither);
}
.fig:focus-visible .readout::before {
  content: '[';
  right: calc(100% + 3 * var(--u));
}
.fig:focus-visible .readout::after {
  content: ']';
  left: calc(100% + 4 * var(--u));
}
.diagram.fig:not(:has(.readout)):focus-visible::before {
  content: '[';
  top: 0;
  right: calc(100% + 3 * var(--u));
}
.diagram.fig:not(:has(.readout)):focus-visible::after {
  content: ']';
  top: 0;
  left: calc(100% + 4 * var(--u));
}

 
.chart canvas {
  display: inline-block;
  vertical-align: baseline;
  margin: 0 calc(2 * var(--u)) 0 calc(3 * var(--u));
  image-rendering: pixelated;
}




.tbl.bars :is(td.n, td.bar) {
  white-space: nowrap;
}
.tbl.bars td.n {
  font-family: 'Handjet Cells Mono', monospace;
  text-align: right;
}
.tbl.bars td.bar span {
  display: inline-block;
  vertical-align: top;
  height: calc(20 * var(--u));
  width: calc(var(--n) * var(--u));
  background: linear-gradient(currentColor, currentColor) 0 calc(4 * var(--u)) / 100%
    calc(15 * var(--u)) no-repeat;
}
 
.tbl tbody tr {
  position: relative;
}
.tbl.sorting td {
  background: var(--ground);
}
.doc p.dim {
  color: var(--dim);
}