Accordion

<div class="nuda-accordion">
  <details class="nuda-accordion__item" open>
    <summary class="nuda-accordion__header">
      <span>Section One</span>
      <span class="nuda-accordion__icon"></span>
    </summary>
    <div class="nuda-accordion__body">
      <p>Content for section one goes here.</p>
    </div>
  </details>
  <details class="nuda-accordion__item">
    <summary class="nuda-accordion__header">
      <span>Section Two</span>
      <span class="nuda-accordion__icon"></span>
    </summary>
    <div class="nuda-accordion__body">
      <p>Content for section two goes here.</p>
    </div>
  </details>
  <details class="nuda-accordion__item">
    <summary class="nuda-accordion__header">
      <span>Section Three</span>
      <span class="nuda-accordion__icon"></span>
    </summary>
    <div class="nuda-accordion__body">
      <p>Content for section three goes here.</p>
    </div>
  </details>
</div>

/* Accordion
   Native <details> accordion with smooth animation.
   Zero JS required. Customize: --acc-accent, --acc-bg */

.nuda-accordion {
  --acc-accent: #e4ff54;
  --acc-bg: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 500px;
}

.nuda-accordion__item {
  background: var(--acc-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.nuda-accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ccc;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}

.nuda-accordion__header::-webkit-details-marker { display: none; }
.nuda-accordion__header::marker { display: none; content: ''; }

.nuda-accordion__header:hover { color: #fff; }

.nuda-accordion__icon::after {
  content: '+';
  font-size: 1rem;
  color: #666;
  transition: transform 0.3s ease;
  display: inline-block;
}

.nuda-accordion__item[open] .nuda-accordion__icon::after {
  content: '\2212';
  color: var(--acc-accent);
  transform: rotate(180deg);
}

.nuda-accordion__body {
  padding: 0 1rem 1rem;
  font-size: 0.85rem;
  color: #999;
  animation: nuda-acc-open 0.3s ease-out;
}

@keyframes nuda-acc-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nuda-accordion__item[open] {
  border-color: rgba(228, 255, 84, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-accordion__body {
    animation: none;
  }
  .nuda-accordion__icon::after {
    transition: none;
  }
}