I just wanted a default accordion vibe for my default SummaryDetail, so I just added this to the global CSS.

View Code 
details {
  --details-bg: #f7f6f1;
  --details-border: #d7d7d7;
  --details-text: #050505;
  --details-padding: var(--space-m);
  --details-icon-size: 1.75rem;

  background: var(--details-bg);
  border: 1px solid var(--details-border);
  color: var(--details-text);
  padding: var(--details-padding);

  & summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;

    font-size: var(--text-m);
    font-weight: 700;
    line-height: 1.2;
  }

  & summary::-webkit-details-marker {
    display: none;
  }

  & summary::after {
    content: "";
    inline-size: var(--details-icon-size);
    block-size: var(--details-icon-size);
    flex-shrink: 0;

    background-color: currentColor;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 464a208 208 0 1 1 0-416 208 208 0 1 1 0 416zM256 0a256 256 0 1 0 0 512 256 256 0 1 0 0-512zM135 241L239 345c9.4 9.4 24.6 9.4 33.9 0L377 241c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-87 87-87-87c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 464a208 208 0 1 1 0-416 208 208 0 1 1 0 416zM256 0a256 256 0 1 0 0 512 256 256 0 1 0 0-512zM135 241L239 345c9.4 9.4 24.6 9.4 33.9 0L377 241c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-87 87-87-87c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    transition: rotate 0.2s ease;
  }

  &[open] {
    & summary::after {
      rotate: 180deg;
    }
  }

  & > :not(summary) {
    padding-block-start: var(--space-m);
    max-inline-size: 75ch;

    font-size: var(--text-m);
    line-height: 1.5;

    & p {
      margin: 0;

      & + p {
        margin-block-start: 1em;
      }
    }

    & strong {
      font-weight: 700;
    }
  }

  &:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}