details {
  inline-size: 50ch;
}

@media (prefers-reduced-motion: no-preference) {
  details {
    interpolate-size: allow-keywords;
  }
}

details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition:
    content-visibility 0.3s allow-discrete,
    block-size 0.3s;
}

details[open]::details-content {
  block-size: auto;
}

details[open] summary svg {
  transform: rotate(180deg);
}