Details and summary for no-JavaScript disclosure widgets

<p>Lorem ipsum dolor sit amet.</p>
<details>

<summary>System Requirements</summary>

<p>Requires a computer running an operating system. The computer

must have some memory and ideally some kind of long-term storage.</p>

</details>
<p class="end">Remember: built-in beats bolt-on, bigly!</p>
<!--

<details> is great but there are a few gotchas:

Not totally flexible design-wise
Unsuitable for accordions with multiple sibling elements unless you add some JS
Unsupported in IE 11 (but content is still available)

-->

:root {
font-size: 110%;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
  sans-serif, "Apple Color Emoji", "Segoe UI Emoji";


}
input,

button {

font-size: inherit;

}
.end {

margin-top: 2rem;

}