twisty-player {
  width: 100%;
}

article {
  padding: 0.5rem;
}

article h4:first-child {
  margin: 0;
}

#algContainer {
  display: flex;
  flex-direction: column; 
  gap: 10px;
}

#algContainer article p {
  font-style: italic;
  margin: 0;
}

#algContainer[data-view="compact"] twisty-player,
#algContainer[data-view="compact"] p {
    display: none;
}

#algContainer[data-view="training"] h4,
#algContainer[data-view="training"] p,
#algContainer[data-view="training"] twisty-alg-viewer,
#algContainer[data-view="training"] code {
    display: none;
}

.sort-btn::after {
  content: ' ';
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.sort-btn[data-dir="asc"]::after {
  content: ' ↓';
}

.sort-btn[data-dir="desc"]::after {
  content: ' ↓';
  transform: rotate(180deg);
}

[hidden] { display: none; }