.sort-demo {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid rgba(128,128,128,.35);
  border-radius: 8px;
  background: var(--minima-brand-color-lightest, #f9f9f9);
}
.sort-demo__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}
.sort-demo__toolbar button {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.sort-demo__toolbar button:hover {
  border-color: rgba(0,0,0,.45);
}
.sort-demo__toolbar button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sort-demo__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-height: 140px;
  padding: 0.5rem;
}
.sort-demo__bar {
  flex: 1 1 0;
  max-width: 48px;
  min-width: 28px;
  border-radius: 4px 4px 2px 2px;
  background: var(--sort-demo-bar-gradient);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  transition: box-shadow 0.15s ease, outline-color 0.15s ease;
  transform: translateX(0);
}
@media (max-width: 520px) {
  .sort-demo__bars {
    gap: 3px;
    padding-inline: 0.25rem;
  }
  .sort-demo__bar {
    min-width: 14px;
  }
  .sort-demo--library .sort-demo__bar {
    min-width: 0;
  }
}
.sort-demo__caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #555;
  text-align: center;
  min-height: 1.25em;
}
@media (prefers-color-scheme: dark) {
  .sort-demo { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
  .sort-demo__toolbar button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: inherit; }
  .sort-demo__caption { color: #bbb; }
}
.sort-demo__bar[data-role="compare"] {
  outline: 3px solid #e67e22;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(230,126,34,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo__bar[data-role="swap"] {
  outline: 3px solid #27ae60;
  outline-offset: 2px;
}
.sort-demo--quick .sort-demo__bar[data-role="pivot"] {
  outline: 3px solid #9b59b6;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(155,89,182,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo--merge .sort-demo__bar[data-role="range"] {
  outline: 3px solid #3498db;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(52,152,219,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo--merge .sort-demo__bar[data-role="write"] {
  outline: 3px solid #27ae60;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(39,174,96,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo--heap .sort-demo__bar[data-role="sorted"] {
  outline: 3px solid #9b59b6;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(155,89,182,.35), 0 2px 6px rgba(0,0,0,.18);
  opacity: 0.92;
}
.sort-demo--insertion .sort-demo__bar[data-role="key"] {
  outline: 3px solid #9b59b6;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(155,89,182,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo--gnome .sort-demo__bar[data-role="cursor"] {
  outline: 3px solid #1abc9c;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(26,188,156,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo--selection .sort-demo__bar[data-role="sorted"] {
  outline: 3px solid #9b59b6;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(155,89,182,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo--tree .sort-demo__bar[data-role="insert"] {
  outline: 3px solid #8e44ad;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(142,68,173,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo--intro .sort-demo__bar[data-role="pivot"] {
  outline: 3px solid #9b59b6;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(155,89,182,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo--intro .sort-demo__bar[data-role="insert"] {
  outline: 3px solid #2980b9;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(41,128,185,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo--intro .sort-demo__bar[data-role="heap"] {
  outline: 3px solid #16a085;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(22,160,133,.35), 0 2px 6px rgba(0,0,0,.18);
}
.sort-demo--library {
  min-width: 0;
}
.sort-demo--library .sort-demo__bars {
  gap: 2px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: 0.35rem;
}
.sort-demo--library .sort-demo__bar {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}
.sort-demo--library .sort-demo__bar[data-role="gap"] {
  opacity: 0.35;
  background: rgba(128,128,128,.35);
  box-shadow: none;
}
.sort-demo--library .sort-demo__bar[data-role="insert"] {
  outline: 3px solid #8e44ad;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(142,68,173,.35), 0 2px 6px rgba(0,0,0,.18);
}