The styling is done via borders and ::before and ::after content applied to the nodes. Why would you not be able to do that with <details> elements?

Here is a fiddle with the first step (borders on the left) applied:

https://jsfiddle.net/qvb3udj6/

I think probably the more concerning thing here is that you're removing the semantic value of HTML, in general I think you want to use the element that best suits your content. Lists make it easier for crawlers and screen readers to understand your website.

I would be interested to try that out.

I just went through the whole first page of Google results for "screen reader simulator" and none worked without installing extra software.

Is there a website, where you can test how a given piece of html is interpreted by screen readers?

Use Narrator, Window's built in screen reader, or, even better, install NVDA. It's free and open source. It's also the majority screen reader on Windows. (If you're on a Mac, you've got VoiceOver built in.)

Here is a good summary: https://accessibility.princeton.edu/how/content/lists

WAVE is a great browser extension to have for frontend developers: http://wave.webaim.org/extension/

It helps you identify aspects of your design that might not be accessible.