[data-markdown] {
  .markdown-steps {
    display: grid;
    gap: 0;
    margin: 22px 0;
  }

  .markdown-step {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;

    &:not(:last-child)::before {
      position: absolute;
      top: 30px;
      bottom: 0;
      left: 14px;
      border-left: 1px solid var(--border);
      content: "";
    }
  }

  .markdown-step-marker {
    position: relative;
    z-index: 1;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    margin-top: 1px;
    color: var(--clay);
    background: var(--bg);
    border: 1px solid var(--clay);
    border-radius: 999px;
    font: 700 13px/1 var(--font-ui);
  }

  .markdown-step-body {
    min-width: 0;
    padding-bottom: 18px;

    h3 {
      margin: 0 0 7px;
      font-size: 16px;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }
}