<figure class="cbq-md">
  <span class="cbq-md-pill">MD</span>
  <blockquote>
    <p><span class="cbq-md-gt">&gt;</span> The best abstractions are the ones you don't notice.</p>
    <p><span class="cbq-md-gt">&gt;</span> The worst are the ones you can't avoid.</p>
  </blockquote>
  <figcaption>— from <code>NOTES.md</code></figcaption>
</figure>

.cbq-md {
  position: relative;
  max-width: 340px;
  padding: 18px 18px 14px 22px;
  background: #0d1117;
  border-left: 4px solid #30363d;
  border-radius: 0 6px 6px 0;
  font-family: ui-monospace, monospace;
  color: #c9d1d9;
}

.cbq-md-pill {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(124, 108, 255, 0.18);
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cbq-md blockquote {
  margin: 0;
}

.cbq-md p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.55;
}

.cbq-md p:last-of-type {
  margin-bottom: 0;
}

.cbq-md-gt {
  color: #6e7681;
  margin-right: 6px;
  user-select: none;
}

.cbq-md figcaption {
  margin-top: 12px;
  font-size: 11px;
  color: #6e7681;
}

.cbq-md code {
  background: rgba(110, 118, 129, 0.4);
  padding: 1px 5px;
  border-radius: 3px;
  color: #c9d1d9;
  font-size: 11px;
}