<details class="acc-stk" name="acc-stk" style="--i: 0" open>
  <summary>Top of pile</summary>
  <p>The first card sits flush. Behind it the others fan back in scale.</p>
</details>
<details class="acc-stk" name="acc-stk" style="--i: 1">
  <summary>Second card</summary>
  <p>Slightly smaller and pulled up. Click to bring it to the front of the stack.</p>
</details>
<details class="acc-stk" name="acc-stk" style="--i: 2">
  <summary>Third card</summary>
  <p>The deepest in the deck. Smaller still, but always reachable.</p>
</details>

.acc-stk {
  margin-top: -10px; margin-bottom: 0;
  background: linear-gradient(135deg, #2a2438, #1a1a24);
  border: 1px solid rgba(156,123,214,0.25);
  border-radius: 12px;
  transform: scale(calc(1 - var(--i) * 0.04)) translateY(calc(var(--i) * -2px));
  transform-origin: center top;
  transition: transform .3s, margin .3s, opacity .3s;
  opacity: calc(1 - var(--i) * 0.18);
}
.acc-stk:first-of-type { margin-top: 0; }
.acc-stk summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; color: #f0eeff;
}
.acc-stk summary::-webkit-details-marker { display: none; }
.acc-stk[open] {
  transform: scale(1) translateY(0);
  opacity: 1; margin-top: 8px; margin-bottom: 8px;
  border-color: rgba(212,154,92,0.5);
  box-shadow: 0 12px 30px -10px rgba(156,123,214,0.5);
}
.acc-stk:first-of-type[open] { margin-top: 0; }
.acc-stk p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
}