Как применить CSS только к модифицированной главной странице форума?

Я вношу изменения и хочу, чтобы они действовали только на ГЛАВНОЙ странице, но они применяются ко всем страницам. Как сделать так, чтобы они оставались только на главной?

Я использовал это:

 #main-outlet-wrapper {
    margin-top: -38px;

}
<script type="text/discourse-plugin" version="0.8">
  // Это выходной узел плагина, за которым следует пользовательское имя компонента
  api.registerConnectorClass("below-site-header", "custom-homepage", {

    // Настройка нашего компонента
    setupComponent(args, component) {

     // Далее мы получаем настройку сайта 'top_menu',
     // разбиваем значения на массив
     // и добавляем ведущую косую черту
     var topMenuRoutes = 
        component.siteSettings.top_menu.split('|')
        .map(function(route) {return '/' + route});
      
     // Первая страница, указанная в настройке 'top_menu', является вашей домашней страницей
     // давайте назначим её переменной
     var homeRoute = topMenuRoutes[0];
  
     // Этот код вызывается при каждом изменении страницы
     api.onPageChange((url) => {

        // Проверяем, находимся ли мы на домашней странице
        if (url === "/" || url === homeRoute) { 
          // Если это домашняя страница, добавляем класс 'custom-homepage' к тегу HTML
          // и устанавливаем 'displayCustomHomepage' в true
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          // Если мы не на домашней странице, удаляем класс
          // и устанавливаем `displayCustomHomepage` в false
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
      });
    }
    
  });

</script>

^ Добавьте это в ваш head, чтобы добавить класс .custom-homepage к тегу body, когда вы находитесь на домашней странице, затем →

.custom-homepage #main-outlet-wrapper {
    margin-top: -38px;
}