<details class="acc-pm" name="acc-pm">
  <summary>Project setup<span class="acc-pm__ico" aria-hidden="true"></span></summary>
  <p>Drop the snippet into any HTML page — works with any framework or none at all.</p>
</details>
<details class="acc-pm" name="acc-pm" open>
  <summary>Browser support<span class="acc-pm__ico" aria-hidden="true"></span></summary>
  <p>Modern evergreen browsers. Native &lt;details&gt; has shipped everywhere since 2020.</p>
</details>
<details class="acc-pm" name="acc-pm">
  <summary>Theming<span class="acc-pm__ico" aria-hidden="true"></span></summary>
  <p>Override --acc-pm-accent on the parent to recolor the entire group instantly.</p>
</details>

.acc-pm { --acc-pm-accent: #d49a5c;
  border: 1px solid rgba(212,154,92,0.18); border-radius: 10px;
  margin-bottom: 6px; overflow: hidden;
}
.acc-pm summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.78);
}
.acc-pm summary::-webkit-details-marker { display: none; }
.acc-pm__ico {
  position: relative; width: 14px; height: 14px; flex-shrink: 0;
}
.acc-pm__ico::before, .acc-pm__ico::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--acc-pm-accent); border-radius: 1px;
  transition: transform .35s cubic-bezier(.5,1.5,.5,1);
}
.acc-pm__ico::before { width: 100%; height: 2px; }
.acc-pm__ico::after  { width: 2px;  height: 100%; }
.acc-pm[open] .acc-pm__ico::after  { transform: rotate(90deg); }
.acc-pm[open] .acc-pm__ico::before { transform: rotate(180deg); }
.acc-pm[open] { background: rgba(212,154,92,0.05); }
.acc-pm p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}