@layer framework, override   ,    foo   , bar.baz  ;

@layer override {
    @keyframes slide-left {
        from { translate: 0; }
        to { translate: -100% 0; }
    }
}

@layer framework {
    @keyframes slide-left {
        from { margin-left: 0; }
        to { margin-left: -100%; }
    }
}

.sidebar { animation: slide-left 300ms; }

@layer { /* layer 1 */ }
@layer { /* layer 2 */ }

@layer reset.type {
    strong { font-weight: bold; }
}

@layer framework {
    .title { font-weight: 100; }

    @layer theme {
        h1, h2 { color: maroon; }
    }
}

@layer reset {
    [hidden] { display: none; }
}

@layer framework {
    @layer default {
        p { margin-block: 0.75em; }
    }

    @layer theme {
        p { color: #222; }
    }
}

@layer framework.theme {
    /* These styles will be added to the theme layer inside the framework layer */
    blockquote { color: rebeccapurple; }
}