.demo-controls { display: flex; justify-content: center; margin: 2rem 0; }
.demo-task { flex: 1; min-width: 0; max-width: 420px; }
.demo-task label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .5rem; }
.demo-task select { width: 100%; text-overflow: ellipsis; }
.demo-comparisons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.demo-comparison { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 1.25rem; min-width: 0; }
.demo-description { padding: 1.25rem; background: var(--background-secondary); border-radius: 12px; text-align: center; }
.demo-suite { font-size: .8rem; color: var(--text-secondary); margin-bottom: .4rem; }
.demo-instruction { font-size: 1.05rem; font-weight: 600; }
.tempo-quickly { color: #c62828; }
.tempo-slowly { color: #1565c0; }
.demo-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.demo-media figure { margin: 0; min-width: 0; }
.demo-media video { display: block; width: 100%; aspect-ratio: 1; background: #111; border-radius: 8px; }
.demo-media img { display: block; width: 100%; height: auto; border-radius: 8px; }
.demo-media figcaption { margin-top: .65rem; text-align: center; font-size: .8rem; color: var(--text-secondary); }
.demo-note { margin: 1.5rem auto 0; max-width: 760px; font-size: .85rem; color: var(--text-secondary); text-align: center; }
@media (max-width: 900px) {
  .demo-comparisons { grid-template-columns: 1fr; gap: 2rem; }
  .demo-comparison { display: block; }
  .demo-description { margin-bottom: 1.25rem; }
}
@media (max-width: 480px) {
  .demo-media { grid-template-columns: 1fr; }
  .demo-media video { max-width: 256px; margin-inline: auto; }
}

.demo-legend { max-width: 380px; margin: 1.75rem auto 0; }
.demo-legend-title { text-align: center; font-weight: 600; margin-bottom: .5rem; }
.demo-legend-labels { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .35rem; }
.demo-legend-gradient { height: 16px; border-radius: 4px; background: linear-gradient(to right, rgb(28,72,255) 0%, rgb(0,204,255) 24%, rgb(205,255,190) 48%, rgb(255,232,0) 65%, rgb(255,137,0) 82%, rgb(210,0,0) 100%); }

.demo-category { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.demo-category .button { width: auto; min-width: 120px; }

.demo-controls { gap: 1rem; flex-wrap: wrap; }
.demo-pair-note { max-width: 850px; margin: 0 auto 1.5rem; font-size: .85rem; color: var(--text-secondary); text-align: center; }
@media (max-width: 600px) { .demo-controls { flex-direction: column; } .demo-task { width: 100%; max-width: none; } }