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

	@container (min-width: 700px) {

		@keyframes slide-left {
			from { margin-left: 700; }
			to { margin-left: -100%; }
		}
	}

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

@container (min-width: 700px) {

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

@keyframes anim {
		from { background-color: red; }
	}

@counter-style custom-counter-style {
		system: extends three;
	}.foo:not(#\#):not(#\#) {
		order: 1.1;
	}@container (min-width: 700px) {
		.foo:not(#\#):not(#\#) {
			order: 1.2;
		}
	}

.foo {
		order: 2.1;
	}

@container (min-width: 700px) {
		.foo {
			order: 2.2;
		}
	}

#target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
	animation: anim 1s paused;
}

@keyframes anim {
	from { background-color: green; }
}

#target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before {
	content: counter(dont-care, custom-counter-style);
}

@counter-style custom-counter-style {
	system: extends four;
}
