.composer pre {
  min-height: 290px;
}

.composer-chains {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--ink);
}

.composer .composer-chains button {
  border: 0;
  border-right: 1px solid var(--ink);
  box-shadow: none;
  padding: 13px 8px;
  background: var(--card);
  font: 750 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.composer .composer-chains button:last-child {
  border-right: 0;
}

.composer .composer-chains button:hover {
  background: #e9e5da;
}

.composer .composer-chains button.active {
  background: var(--ink);
  color: var(--paper);
}

.composer .composer-chains button:active {
  transform: none;
}

@media (max-width: 520px) {
  .composer-chains {
    grid-template-columns: repeat(2, 1fr);
  }

  .composer .composer-chains button:nth-child(2),
  .composer .composer-chains button:nth-child(4) {
    border-right: 0;
  }

  .composer .composer-chains button:nth-child(-n + 4) {
    border-bottom: 1px solid var(--ink);
  }

  .composer .composer-chains button:last-child {
    grid-column: 1 / -1;
  }
}