.demonstration {
  -webkit-user-select: none;
  user-select: none;
}

:is(.demonstration text,.demonstration-lines > g):nth-child(1) {
  --series-colour: #a35;
}

:is(.demonstration text,.demonstration-lines > g):nth-child(2) {
  --series-colour: #e94;
}

:is(.demonstration text,.demonstration-lines > g):nth-child(3) {
  --series-colour: #9d5;
}

:is(.demonstration text,.demonstration-lines > g):nth-child(4) {
  --series-colour: #2cb;
}

:is(.demonstration text,.demonstration-lines > g):nth-child(5) {
  --series-colour: #36b;
}

.demonstration text {
  fill: var(--series-colour);
  font: 300 16px/1 Proza;
  font-feature-settings: 'lnum', 'tnum';
}

.demonstration-grid rect {
  fill: var(--dark-grey);
}

.demonstration-left-labels text {
  text-anchor: end;
}

.demonstration-lines circle {
  fill: var(--series-colour);
}

.demonstration-lines line {
  stroke: var(--series-colour);
  stroke-width: 2px;
}

.pseudocode {
  width: 100vw;
}

.pseudocode > pre {
  background: var(--grey);
  overflow: auto;
  padding: 0.6rem 0.8rem;
  border: none;
  border-radius: var(--rounding) var(--rounding) 0 0;
  font: inherit;
}

.pseudocode > pre:last-child {
  border-radius: 0 0 var(--rounding) var(--rounding);
  background: var(--light-grey);
}