.app {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.875rem;

  --gray-50: #f8fafc;
  --gray-100: #f0f5f9;
  --gray-200: #e1e8f0;
  --gray-300: #cad5e0;
  --gray-400: #91a4b7;
  --gray-500: #61758a;
  --gray-700: #304254;
  --gray-800: #1c2a3a;

  --ansi-color-black: black;
  --ansi-color-red: #ca1243;
  --ansi-color-green: #50a14f;
  --ansi-color-yellow: #c18401;
  --ansi-color-blue: #4078f2;
  --ansi-color-magenta: #a726a4;
  --ansi-color-cyan: #0184bc;
  --ansi-color-white: white;
  --ansi-color-light-black: #5c6370;
  --ansi-color-light-red: #e45649;
  --ansi-color-light-green: #34d399;
  --ansi-color-light-yellow: #fde68a;
  --ansi-color-light-blue: #61afef;
  --ansi-color-light-magenta: #c678dd;
  --ansi-color-light-cyan: #56b6c2;
  --ansi-color-light-white: white;

  color: var(--gray-500);
}

div.item {
  display: flex;
}

div.clickable {
  cursor: pointer;
}

div.icon-container {
  flex-shrink: 0;
  display: inline-block;
  width: 2ch;
  margin-right: 2px;
}

.ri {
  font-size: 1.25rem;
  vertical-align: middle;
}

.ri-empty {
  display: inline-block;
  width: 2ch;
}

ol {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-left: 2ch;
}

ol.show {
  display: block;
}

ol li {
  display: flex;
  flex-direction: column;
}

div.suffix {
  margin-left: 2ch;
}

span.code {
  white-space: pre;
}