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

[Anonymous]

Это для автономного HTML -элемента на странице - поэтому я не могу изменить фактический код сайта напрямую. Если я удаляю @scope, это работает, но другие части страницы стилизованы, которые не должны быть. Может ли кто-нибудь предложить какую-либо помощь? CODE-CSS LANG-CSS PrettyPrint-Override ">@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>
< /div>
< /div>
< /p>
Когда я говорю «разрывы», я имею , это в основном просто куча текста. Скриншот здесь:

Как это должно выглядеть:

это работает на Chrome и Internet Explorer.

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