@layer framework, override   ,    foo   , bar.baz  ;
@layer 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%; }
	}
}

@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: red; }
	}
}

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

@layer framework {
	@media ONLY screen AND (color)  {
		article {
			padding: 1rem 3rem;
		}
	}
	.title { font-weight: 100; }

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

/* See https://drafts.csswg.org/css-cascade-5/#typedef-layer-name. These may
 * become invalid in the future, or remain valid. The draft spec says that the
 * CSS-wide keywords are "cause the rule to be invalid at parse time", but all
 * parsers I've found so far allow these as names.
 */
@layer inherit { }
@layer initial { }
@layer initial.unset.default { }
@layer unset { }
@layer revert { }
@layer revert-layer { }