<details class="acc-step" name="acc-step" open>
  <summary><span class="acc-step__n">1</span> Install the package</summary>
  <p>Add the library to your project with one command — no build step required.</p>
</details>
<details class="acc-step" name="acc-step">
  <summary><span class="acc-step__n">2</span> Import a component</summary>
  <p>Pull in only the components you need. Tree-shakable and zero runtime overhead.</p>
</details>
<details class="acc-step" name="acc-step">
  <summary><span class="acc-step__n">3</span> Customize with tokens</summary>
  <p>Override CSS custom properties to match your brand colors and spacing scale.</p>
</details>

.acc-step { margin-bottom: 8px; }
.acc-step summary {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; list-style: none;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(156,123,214,0.06);
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.75);
  transition: background .2s;
}
.acc-step summary::-webkit-details-marker { display: none; }
.acc-step__n {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(156,123,214,0.5);
  font: 700 11px monospace; color: rgba(240,238,255,0.7);
  transition: all .25s;
}
.acc-step[open] > summary { background: rgba(156,123,214,0.16); color: #f0eeff; }
.acc-step[open] .acc-step__n { background: #9c7bd6; color: #fff; border-color: #9c7bd6; }
.acc-step p {
  margin: 8px 0 0; padding: 0 14px 12px 48px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}