.telescope { margin: 2em auto; max-width: 25em; width: fit-content; text-align:left; } .break:after { margin-right: 2em; content: ""; } .telescope summary { display: inline } .telescope details+.expansion {display:none;} .telescope details[open]+.expansion { display:inline; } .telescope details:not([open])+.expansion:has(:target) { &:before{ content:"*"; padding: .2em; border: 2px dashed; margin: .2em; font-size: initial; } display:inline; font-size:0; .expansion { display:none} } .telescope details[open] > summary { display:none; } .telescope details summary { background: revert; border: none; padding: 0; text-decoration: underline dotted var(--accent2); } .telescope details summary:hover { text-decoration: underline solid; background: var(--button2); } .telescope details { margin:0; padding:0; border:none; display:inline-block; } .scene+.break { display:block; border-bottom: solid .2em var(--accent1); } .scene+.break:after { display:none; } .scene:has(details:not([open]))+.break { border-bottom: dotted .2em var(--accent1); } .telescope:not(:has(details:not([open]))):after { display:block; text-align:center; content: "* * *"; font-size: 150%; }