monochromer

select {
  overflow: hidden;
  max-width: 100%;
}

Если Вы видите перед собой слайдер ([type="range"]), то не обязательно делать его с помощью такого типа поля. Можно взять группу радио-переключателей, и тогда сделать какое угодно оформление.

Селектор li:hover ~ .active::after можно прочитать так:
выбрать псевдоэлементы after элементов с классом active, которые идут после элемента li, на который навели указатель. Почитать про селектор можно здесь.

Нужно, чтобы элемент с sticky-top был непосредственным потомком скроллируемого контейнера (скорее всего, это у вас body).

К элементам с transform применяется субпиксельное сглаживание из-за чего может возникать размытие.
Проще иконку и ромб вынести на разные уровни, чтобы трансформации применялись только к ромбу.

Если Вы привыкли к Notepad++, то зачем уходить с него? По всем Вашим критериям он подходит.
Если нужен live-reload server, то я бы посоветовал browser-sync на базе Node.js. Его можно запускать из консоли, использовать совместно с task-раннерами, использовать как прокси.

Для конкретной страницы задать переменные:

//- some-page.pug
-
  var isIndexPage = true;
  var user = {
    name: 'John Doe',
    role: 'admin'
  };

В файле header.pug сделать условный рендеринг

//- header.pug
header.header(class=isIndexPage ? 'index-page' : null)
  if (user)
    .user-name #{user.name}
  else
    .guest-area Hello, guest!

.balls {
  position: absolute;
  top: 0;
  left: 0;
}