.chart-panel {
  overflow: hidden;
  color: #f2f6fa;
  background: #0b1726;
  border-color: #24394e;
  container: chart-panel / inline-size;
}

.chart-panel .panel-head {
  border-color: #24394e;
}

.chart-panel .panel-head h2 {
  color: #f2f6fa;
}

.chart-panel .muted {
  color: #a9bbcb;
}

.chart-panel .chart-bars {
  background: #0b1726;
}

.chart-panel .chart-bar-value {
  color: #d7e3ed;
  display: block;
  width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.15;
  text-align: center;
  flex: 0 0 auto;
}

.chart-panel .chart-bar-track {
  background: #23384a;
}

.chart-panel .chart-bar {
  background: #61a9bd;
}

.chart-panel .chart-bar-column small {
  color: #a9bbcb;
}

@container chart-panel (max-width: 520px) {
  .chart-panel .chart-bars {
    height: 280px;
    gap: 4px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .chart-panel .chart-bar-value,
  .chart-panel .chart-bar-column small {
    font-size: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.1;
    text-align: center;
  }

  .chart-panel .chart-bar-track {
    width: min(26px, 60%);
    flex-shrink: 0;
  }
}