How to remove marker from <details> element on Safari?

Question

I have tried the many solutions suggested on other posts. None work on macOS Safari nor iOS Safari. What am I missing, how can I remove the triangle-shaped marker from “Bob”?

Screenshot:

The stylesheet below uses more code than I originally wrote, but it shows how I’m trying everything suggested by other posts.

And it overuses !important flags to be extra sure they’re working.

It also uses bizarre colors to make obvious which elements are which.

A live demo is here: https://jsbin.com/cepufayodo/edit?html,css,output

<nav class="panel" id="panel">
    <ul>
        <li><a class="major" href="#alice">Alice</a></li>
        <li><details class="major">
            <summary>Bob</summary>
            <a class="minor" href="#apple">Apple</a>
            <a class="minor" href="#berry">Berry</a>
            <a class="minor" href="#cherry">Cherry</a>
        </details></li>
        <li><a class="major" href="#carol">Carol</a></li>
    </ul>
</nav>

*,
*::before,
*::after {
    box-sizing: border-box;
    list-style: none !important;
}

::-ms-details-marker,
::-moz-details-marker,
::-webkit-details-marker,
::details-marker,
::-ms-marker,
::-moz-marker,
::-webkit-marker,
::marker,
summary::-ms-details-marker,
summary::-moz-details-marker,
summary::-webkit-details-marker,
summary::details-marker,
summary::-ms-marker,
summary::-moz-marker,
summary::-webkit-marker,
summary::marker {
    color: red !important;
    content: '' !important;
    content-visibility: hidden !important;
    display: none !important;
    list-style: none !important;
    opacity: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}
details,
summary {
    color: orange !important;
    display: block !important;
    list-style: none !important;
    padding: 0 !important;
}
details::before,
summary::before {
    color: yellow !important;
    content: '' !important;
    content-visibility: hidden !important;
    display: none !important;
    list-style: none !important;
    opacity: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}
details::after,
summary::after {
    color: yellow !important;
    content: '' !important;
    content-visibility: hidden !important;
    display: none !important;
    list-style: none !important;
    opacity: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}
.major {
    border: 2px solid yellow;
    color: green;
}
.minor {
    border: 1px dashed pink;
    color: gray;
}
.panel a,
.panel summary {
    background-color: wheat;
    cursor: pointer;
    display: block;
    height: 40px;
    width: 100%;
}
.panel li {
    list-style: none;
    margin: 0 auto;
    text-align: center;
}

Answer 1

According to this question

details summary::-webkit-details-marker {
        display: none;
      }