(i = slide.nextElementSibling)?.className == "slidenote" ? i : slide ]),
slide.querySelector(":scope+.slidenote") ?? slide
Notes: <label><input type=radio name=notes id=notes-hide checked> Hide</label> <label><input type=radio name=notes id=notes-inline> Inline</label> <label><input type=radio name=notes id=notes-only> Only</label> <section> Slide <aside> Notes </aside> </section> <style> section { position: relative; } aside { background: #feb; padding: 1em; body:has(#notes-only:checked) & { position: absolute; inset: 0; } body:has(#notes-inline:checked) & { margin-top: auto; /* concept: if the slide uses flex, notes can try sticking to the bottom */ } body:has(#notes-hide:checked) & { display: none; } } </style>
This seems perfectly heretical.
<script> document.write(` <style> .${location.search.replace(/\W/g, '')}{ display:none } </style> `) </script>