<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
        </summary>
        <details class="level2" open>
            <summary class="level2">
                nested summary (details-deails-summary)
            </summary>
            nested details (details-deails)
        </details>
        details
    </details>
</body>