<details class="acc-glass" name="acc-glass" open>
  <summary>What's inside?<span class="acc-glass__caret"></span></summary>
  <p>A frosted surface with a subtle border that catches light when the row expands.</p>
</details>
<details class="acc-glass" name="acc-glass">
  <summary>Does blur cost performance?<span class="acc-glass__caret"></span></summary>
  <p>backdrop-filter is GPU-accelerated. Use it on small islands rather than wide swaths.</p>
</details>
<details class="acc-glass" name="acc-glass">
  <summary>Browser fallback?<span class="acc-glass__caret"></span></summary>
  <p>The semi-transparent background still reads gracefully without the blur effect.</p>
</details>

.acc-glass {
  background: linear-gradient(135deg, rgba(156,123,214,0.07), rgba(143,179,163,0.05));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(240,238,255,0.08);
  border-radius: 14px; margin-bottom: 8px;
  transition: border-color .3s, background .3s;
}
.acc-glass summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 14px 18px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.82);
}
.acc-glass summary::-webkit-details-marker { display: none; }
.acc-glass__caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid rgba(240,238,255,0.5);
  border-bottom: 1.5px solid rgba(240,238,255,0.5);
  transform: rotate(45deg); transition: transform .3s;
}
.acc-glass[open] {
  border-color: rgba(156,123,214,0.45);
  background: linear-gradient(135deg, rgba(156,123,214,0.14), rgba(143,179,163,0.08));
}
.acc-glass[open] .acc-glass__caret { transform: rotate(225deg); }
.acc-glass p {
  margin: 0; padding: 0 18px 16px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.6);
}