ImagineTables

>В задумке подгружать стили ориентируясь на операционную систему.

Оффтопик по отношению к этому конкретному вопросу, но, возможно, стоит рассмотреть переезд из браузера в ОС-специфичные webview-приложения и вынос разметки/стилей в ресурсы. По крайней мере, обычно обозначенная в цитате дорога приводит именно к этому )) А от сервера оставить только веб-АПИ.

Как уже было сказано выше,

1. Брякпоинты из любимого фреймворка (чем стандартнее, тем лучше), плюс
2. Точечные фиксы для конкретных кусков, ломающиеся так далеко от брейкпоинтов (посередине, например), что на них не натянуть.

Декларативно (на pure CSS) можно сделать что-то типа такого:

body:has(.first-block:hover) .second-block
{
    background: red;
}

И неважно, где эти блоки и как связаны. :hover можно заменить на другой псевдокласс, обозначающий взаимодействие с юзером, например :active или :focus-visible.

Но для кликов лучше прибегнуть к императивному скрипту (используется jQuery):

$('.first-block').on('click', () => $('.second-block').addClass('red');

И, само собой, CSS:

.red
{
    background: red;
}

1. Я делаю…
2. Я ожидаю…
3. Вместо этого я получаю…

У вас 1 пункт из 3.

для маркера checkbox навешен transition для плавного появления

Это плохой UX, не надо так делать. Ощущаться будет как замедленная реакция интерфейса на нажатие.

Но если приспичило, можно:

Первый вариант
1. Описать галку в начале файла:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
	<defs>
		<symbol id="checkmark" class="checkmark" viewBox="0 0 16 16">
			<path fill="currentColor" … />
		</symbol>
	</defs>
</svg>

2. Вставить в кнопку:

<svg width="32" height="32"><use href="#checkmark"></use></svg>

3. Анимировать прозрачность.

Второй вариант

Если хочется сохранить растровое изображение, используйте его как маску (clip), а фон заливайте сплошным цветом. Если использовать кастомные свойства, ими можно анимировать хоть градиенты:

@property --my-color-1
{
	syntax: '<color>';
	initial-value: #000;
	inherits: false;
}

1. Выучить C++ за 21 день.
2. Скачать Chromium Embedded Framework, скомпилировать, обеспечить загрузку HTML из ресурсов

div:has(> a[href^="/help/"])

Уж лучше div:has(img[src*="domain.com"]). И за специфичность при резке баннеров я бы переживать не стал.

P.S. Прелесть uBO в автосписках и пикере. Если писать руками, я предпочитаю обычный CSS в плагине Stylus:

div:has(img[src*="domain.com"])
{
    display: none;
}

В нём же можно указать область видимости правила (например, «Только для заданного домена»).

Во-первых. Для определения видимости есть специальный API. Он страшен, как жизнь простого программиста, но это, всё-таки, стандарт. Вот небольшая обёртка, которую я написал для себя:

// Starts observing visibility of the given element. On change,
// the callback is called with Boolean visibility as argument.
System.attachOnVisibilityChangedHandler = function (element, callback, visiblePart = 0.5)
{
	const options =
	{
		root: null,
		threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
	};

	const observer = new IntersectionObserver((entries, observer) =>
	{
		entries.forEach(entry =>
		{
			callback(entry.target, entry.intersectionRatio >= visiblePart);
		});
	}, options);

	observer.observe(element);
}

Во-вторых. Он тоже даёт ложноположительные срабатывания (я думаю, в этом ваша проблема). Это by design. Поэтому надо проверять предыдущее состояние, чтобы понять, изменилось ли оно:

// For all elements, marked with 'autoplay' and 'autoplay-once' classes, adds 'start-autoplaying' class when visible first time.
// For all elements, marked with 'autoplay' only, adds 'start-autoplaying' class every time, when visible, and removes it, when not.
function autoplayAnyWhenVisible()
{
	$('.autoplay').each(function ()
	{
		const startAutoplayingClass = 'start-autoplaying';
		const visiblePart = $(this).data('visible-part') ?? 0.5;

		const onElementVisibilityChanged = function (element, isVisible)
		{
			const autoplayOnce = $(element).hasClass('autoplay-once');
			const wasVisible = $(element).data('is-visible');

			if (isVisible && !wasVisible)
			{
				$(element)
					.addClass(startAutoplayingClass)
					.data('is-visible', true);
			}

			if (autoplayOnce)
				return;

			if (!isVisible && wasVisible)
			{
				$(element)
					.removeClass(startAutoplayingClass)
					.data('is-visible', false);
			}
		};

		System.attachOnVisibilityChangedHandler(this, onElementVisibilityChanged, visiblePart);
	});
}

С этим кодом просто маркируете элементы при помощи класса autoplay (плюс autoplay-once если надо проигрывать анимацию только один раз), указываете долю видимости, и при реальном показе/сокрытии будет добавляться/убираться класс start-autoplaying (куда и засовываете анимацию написания текста):

<div class="… autoplay autoplay-once" data-is-visible="false" data-visible-part="0.3">