.demo { max-width: 860px; margin: 0 auto; padding: 1rem; }
.subtitle { margin: .5rem 0 1rem; }
.controls { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.warn { background: #fff3cd; border: 1px solid #ffe69c; padding: .5rem .75rem; border-radius: 6px; margin: .5rem 0; }

/* Bar chart */
.bars { margin: 1.25rem 0; }
.bar-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
}
.bar-label {
  width: 180px;
  flex-shrink: 0;
  font-size: .875rem;
}
.bar {
  height: 22px;
  border-radius: 4px;
  width: 0;
  transition: width .35s ease;
  min-width: 2px;
}
.bar.h2     { background: var(--warn, #ca8a04); }
.bar.h3     { background: #f59e0b; }
.bar.resumed { background: var(--ok, #16a34a); }
.bar-val {
  font: 13px/1 monospace;
  color: #555;
  min-width: 55px;
}

/* Medians */
.medians { margin: 1.25rem 0; }
.medians h2 { font-size: 1rem; margin-bottom: .4rem; }
#medians { font: 13px/1.5 monospace; color: #444; }

/* Caveat */
.caveat { font-size: .8rem; color: #666; margin-top: 1.5rem; line-height: 1.5; }