:root {
    --cx-style-guard-hazard: repeating-linear-gradient(
        135deg,
        #ff00c8 0 9px,
        #ffe600 9px 18px
    );
}

html.cx-style-guard-active .fi-main .cx-style-violation {
    position: relative !important;
    isolation: isolate;
}

html.cx-style-guard-active .fi-main .cx-style-violation::after {
    position: absolute;
    z-index: 2147483645;
    inset: -3px;
    padding: 3px;
    background: var(--cx-style-guard-hazard);
    content: "";
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

html.cx-style-guard-active.cx-style-guard-has-violations body::before {
    position: fixed;
    z-index: 2147483646;
    top: 0;
    right: 0;
    padding: 0.65rem 1rem;
    border: 3px solid #ff00c8;
    background: var(--cx-style-guard-hazard);
    color: #09090b;
    font: 900 0.8rem/1.1 system-ui, sans-serif;
    content: "\26A0\FE0F  DEFAULT FILAMENT - NOT STYLE BOOK";
    letter-spacing: 0.04em;
    pointer-events: none;
}
