<style>
details {
  border: solid 0.5em;
}

summary {
  border: solid 0.5em;
}

summary.level1 {
  border-color: #99c;
}

details.level1 {
  border-color: #559;
}

summary.level2 {
  border-color: #c99;
}

details.level2 {
  border-color: #955;
}
</style>
<body>
    <details class="level1" open>
        <summary class="level1">
            summary
            <details  class="level2" open>
                <summary  class="level2">
                    nested summary (summary-deails-summary)
                </summary>
                nested details (summary-deails)
            </details>
        </summary>
        details
    </details>
</body>