Попытка охватить CSS в Firefox с @Scope, но он ломается ⇐ CSS

[Anonymous]

@scope {
div {
margin-bottom: 0.2em;
}
hr {
border-color: #F8F8F8;
}
body {
font-family: "Open Sans", sans-serif;
}

details {
max-width: 100%;
overflow: hidden; /* Keep this line to prevent an odd blue outline around the element in Safari. */
}
summary {
display: block;
}

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

span {
position: relative;
display: flex;
align-items: center;
padding-left: 1rem;
background: #ECECEC;
color: #000;
height: 4rem;
}

span:hover {
cursor: pointer;
}

span::before {
content: "+";
font-size: 1rem;
display: flex;
align-items: center;
margin-right: 0.5rem;
transition: rotate 200ms 50ms ease-out;
}

div.content {
box-sizing: border-box;
max-width: 100%;
max-height: 0;
overflow: hidden;
padding: 0 10px;
border: 2px solid transparent;
transition: max-height 400ms ease-out, border 0ms 400ms linear;
}

details[open] + div.content {
max-height: 800px; /* Set a max-height value enough to show all the content */
border-color: #ECECEC;
transition: max-height 400ms ease-out, border 0ms linear;
}

details[open] span::before {
rotate: 90deg;
transition: rotate 200ms ease-out;
}
}

< /code>

Title here

Details here


< /code>
This is for a standalone HTML element on a page -- therefore I can't modify the actual site code directly. If I remove the @scope it works but other parts of the page are styled that don't need to be. Can anyone offer any help?
When I say 'breaks' I mean the collapsing sections and the styling vanishes, it's basically just a bunch of text. Screenshot here:
Broken
What it should look like:
Working
It works on Chrome and Internet Explorer. Thank you!

Подробнее здесь: https://stackoverflow.com/questions/794 ... -it-breaks