Евгений Петров

Безусловно, по сути это — SVG. Но вам не нужно мучиться с изучением его синтаксиса для решения описанной задачи.

У некоторых вендоров есть уже готовые полигоны, выделяющие области, как у Yandex.
А для решения общих задач практически у всех есть средства формирования полигонов — Yandex, Google.

у меня есть устройство с pixel-ratio = 2

Это откуда следует? Величина devicePixelRatio давно уже переменная и зависит не только от соотношения физических пикселей и разрешения устройства, но и от соотношения страницы к viewport, и даже от банального увеличения.
Более 2-х лет назад прошла эта новость habrahabr.ru/post/159419

И не путайте пиксели CSS и физические пиксели устройства. Последние в правилах CSS вы вообще не затрагиваете (разве что краем в Media Queries).

Инстанс типа данных Date создаётся в локальном времени GMT. То есть никому часовой пояс от сервера не нужен. Совсем.

Если на клиенте захочется выяснить смещение, то есть, во-первых, метод Date#getTimezoneOffset у созданного инстанса, а, во-вторых, статический метод конструктора Date.UTC.

Если вы хотите обезопаситься от сбоя часов на компьютере, которые и используются в конструкторе Date, вам нужно передавать точное время в UTC, а на клиенте уже добавить нужное смещение.

Update: Всё зависит от того, как вы передаёте данные с сервера. Я предположу 2 самых плохих ситуации.
Для начала возьмём за основу 2 переменных со значением времени в UTC, которые будут передаваться с сервера.

var startString = '2015:7:11:13:27:12',
	startTime = '1439299632000'; // Соответствует указанной выше дате

Строка с перечислением номеров — startString
Если данные приходили бы в JSON, массив можно было бы сразу передать для формирования даты. Если же это — строка, нужно сначала её разбить.

new Date(Date.UTC.apply(null, startString.split(':')));

Строка с количеством миллисекунд — startTime
Ровно то же самое — для начала преобразуем строку в число.

new Date(parseInt(startTime));

Вот так это выглядит на практике. Большая часть кода примера — это согласование падежей.

Ну это какая-то совсем простая задача. И делается просто.

При наведении на любой элемент внутри другого элемента, у второго сохраняется состояние :hover. В Javascript раньше мучались с mouseover, пока не появилось событие mouseenter, что соответствует этому псевдоклассу.

Не стал формировать расположение первого уровня с помощью flex, хотя уже именно так и нужно делать.

При конкуренции между контекстами z-index определяет победителя. Так что да — если вы для позиционируемого блока для контейнера выставили z-index, то этот блок не может выиграть у любого другого позиционируемого блока в контексте, который расположен в контексте, выигравшем у контейнера первого блока.
Изменить ситуацию можно, либо не выставляя z-index для контекстов, либо динамически меняя эти значения.

Счёт насчёт счёта. Граф считает счета на своём счету.

Update: Вот так примерно решается ваша задача. Ничего хитрого — просто смена z-index при наведении.

Достаточно просто реализуется такая схема.
Для кроссбраузерности display:table и отрицательный margin.

Если нужна поддержка IE8, потребуется скриптом выставлять класс (например, для label), поскольку он не понимает псевдокласс :checked. Всё остальное он сформирует нормально без лишних телодвижений.
Делается это вот так.

У background-clip нет по спецификации значения text.

Никак. Не путайте структуру и визуализацию. Это как спрашивать — можно ли в CSS задавать action у form или for у label.
А в вашем случае можно совсем обойтись без таблицы.

Вся необходимая информация уже есть в спецификации. Называется Origin and Importance. Анализируются все 10 возможных источников, и то, где написано то или иное правило, в link или style, влияет на порядок этого правила, но не на скорость анализа. Это означает, что сам факт нахождения правила в разных источниках не влияет на performance, если принять, что эти источники одинаково доступны.

А вот что касается кэширования, то вы совершенно напрасно отметаете этот аспект, потому что на скорость построения CSSOM напрямую влияет доступность источников и то, что большинство браузеров строят CSSOM по мере их доступности. Безусловно, нахождение правил непосредственно в документе может ускорить этот процесс. Именно по этой причине те же рекомендации Google содержат совет включать наиболее важные правила в элемент style (раздел «Inline render-blocking CSS»).

Однако, не стоит забывать про дальнейшую жизнь проекта и его модификацию. И тут style проиграет link по всем параметрам, да и в разработке необдуманное использование style способно превратить жизнь в ад. Отвечая на ваш вопрос — да, включение правил в документ увеличит performance, но только при первой загрузке документа. Остальные документы этого проекта не заметят разницы, ведь внешний файл будет браться из кэша, зато трафик будет существенно расти.

Как сделать вогнутые углы у блока на CSS?
А вот так можно сделать, используя псевдоэлементы, box-shadow и overflow.
Конечно, можно использовать radial-gradient но уж больно зубчатым выходит. Поэтому придётся замылить край.

Про SVG уже написали. А вот решение на псевдоэлементах.
Угол можно менять, ширину контейнера тоже.

Мы же помним, что margin и padding считаются от ширины контейнера? Пример

Потому, что синтаксис у вас неверный.
linear-gradient(to top, #459fcc, #efecec 570px)

Все спецификации CSS
Все правила CSS

Нужно просто убрать. Всё равно для Firefox это бессмысленно.

.b-rates__modal .modal__box tbody tr:nth-child(3) {
	position: relative;
}

Вот так можно останавливать анимацию.
Используем animation-play-state.
А для количества повторов используется animation-iteration-count.

Пример для одноразовой смены фона. Используется animation-fill-mode.