<details class="ctc-exp">
  <summary>
    <span class="ctc-exp-tag">React</span>
    <svg viewBox="0 0 12 12" aria-hidden="true">
      <path
        d="M3 4.5l3 3 3-3"
        stroke="currentColor"
        stroke-width="1.6"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </summary>
  <p class="ctc-exp-body">
    A JavaScript library for building user interfaces with components and hooks.
  </p>
</details>

.ctc-exp {
  display: inline-block;
  background: #1f1f2e;
  border: 1px solid rgba(124, 108, 255, 0.3);
  border-radius: 14px;
  overflow: hidden;
  font-family: system-ui, sans-serif;
  max-width: 280px;
}

.ctc-exp summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  color: #c4b5fd;
  user-select: none;
}

.ctc-exp summary::-webkit-details-marker {
  display: none;
}

.ctc-exp summary svg {
  width: 11px;
  height: 11px;
  color: currentColor;
  transition: transform 0.2s ease;
}

.ctc-exp[open] summary svg {
  transform: rotate(180deg);
}

.ctc-exp[open] {
  display: block;
  border-radius: 14px;
}

.ctc-exp-body {
  margin: 0;
  padding: 8px 14px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #b8b6d4;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ctc-exp summary:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}