<figure class="cbq-code">
  <header class="cbq-code-head">
    <span class="cbq-code-dot" aria-hidden="true"></span>
    <span class="cbq-code-dot" style="background: #f5a84a"></span>
    <span class="cbq-code-dot" style="background: #2eb88a"></span>
    <span class="cbq-code-file">manifesto.js · ln 12</span>
  </header>
  <blockquote>
    <p>// Don't write code that's so clever<br />// that you can't debug it at 3am</p>
  </blockquote>
  <figcaption>— Brian Kernighan</figcaption>
</figure>

.cbq-code {
  max-width: 360px;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  font-family: ui-monospace, "SF Mono", monospace;
  color: #e6edf3;
}

.cbq-code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #161b22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cbq-code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}

.cbq-code-file {
  margin-left: 8px;
  font-size: 11px;
  color: #8b949e;
}

.cbq-code blockquote {
  margin: 0;
  padding: 16px 18px;
}

.cbq-code p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #7c6cff;
  font-style: italic;
}

.cbq-code figcaption {
  padding: 6px 18px 12px;
  font-size: 11px;
  color: #8b949e;
}