.demo { max-width: 980px; 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; }
.grids { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1rem 0; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 3px; }
.cell { background: #e9ecef; aspect-ratio: 1; transition: background .08s linear; }
.cell.stalled { outline: 2px dashed var(--warn, #ca8a04); outline-offset: -2px; }
.meta { font: 12px/1.4 monospace; color: #555; }

/* Waterfall */
.waterfall-wrap { margin-top: 1.5rem; }
.waterfall-wrap h2 { font-size: 1rem; margin-bottom: .75rem; }
.waterfall { margin-bottom: 1.25rem; }
.waterfall h3 { font-size: .85rem; font-weight: 600; margin: 0 0 .4rem; color: #555; }
.wf-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 3px;
  font: 11px/1 monospace;
}
.wf-row span { width: 90px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-bar {
  height: 8px;
  border-radius: 3px;
  background: var(--accent, #2563eb);
  min-width: 2px;
  box-sizing: border-box;
}
.wf-row.stalled .wf-bar { background: var(--warn, #ca8a04); }

@media (max-width: 720px) { .grids { grid-template-columns: 1fr; } }