.accordion {
  width: min(720px, 90%);
  margin: 24px auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.accordion .item {
  border: 1px solid #ddd;
  border-radius: 12px;
  margin: 10px 0;
  overflow: hidden;
  background: #fff;
}
.accordion .accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.accordion .accordion-header:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,120,255,.3) inset;
}
.accordion .accordion-header::before {
  content: "▶";
  display: inline-block;
  transition: transform .25s ease;
  transform: rotate(0deg);
}
.accordion .content {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height .3s ease, padding .25s ease;
  color: #333;
  line-height: 1.6;
  background: #fafafa;
}
.accordion .item:focus-within .content {
  max-height: 300px;
  padding: 12px 16px 16px;
}
.accordion .item:focus-within .accordion-header::before {
  transform: rotate(90deg);
}