Glass Accordion

---
---
<div class="acc-wrap">
  <details open>
    <summary>How do I install the components?</summary>
    <div class="content">Simply copy the Astro and CSS code into your project.</div>
  </details>
  <details>
    <summary>Is this open source?</summary>
    <div class="content">Yes, Astro Components is free under the MIT license.</div>
  </details>
</div>
<style>
  .acc-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
  details { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; }
  summary { padding: 1rem 1.5rem; cursor: pointer; color: #fff; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
  summary:hover { background: rgba(255,255,255,0.02); }
  summary::after { content: "+"; font-size: 1.25rem; transition: transform 0.3s; }
  details[open] summary::after { transform: rotate(45deg); }
  .content { padding: 0 1.5rem 1rem; color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }
</style>