Режим смешивания на размытии фона ⇐ CSS

[Anonymous]

Я пытаюсь создать компонент таблетки в стиле стекла с текстом внутри.
Чего я хочу:
текст использует исключение режима смешивания-наложения
таблетка имеет полупрозрачный фон
таблетка применяет фоновый фильтр: размытие()
позже эта таблетка развернется в раскрывающийся список при наведении курсора мыши (аналогично заголовок на httpster.net)
Проблема:
как только я добавляю фоновый фильтр: размытие(...) в контейнер таблетки, режим смешивания текста перестает смешиваться с реальным фоном позади него.
Вместо этого текст смешивается только с самой таблеткой.
Мой вопрос:
Нужно ли мне разделить таблетку на несколько визуальных слоев (например, один слой для размытия и еще один сверху для текста с режимом наложения) для достижения такого эффекта?
Или есть способ заставить режим смешивания-наложения корректно работать с фоновым фильтром в одном элементе, не разделяя их?
Спасибо!

Hi ! Hero some text

body {
margin: 0;
padding: 0;
font-family: sans-serif;

background-image: url("");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

height: 100vh;
}

.pill {
display: flex;
justify-content: space-between;

--extra-height: 0rem;
height: calc(3rem + var(--extra-height));

box-shadow:
0 4px 6px rgba(0, 0, 0, 0.08),
0 12px 24px rgba(0, 0, 0, 0.06),
0 24px 48px rgba(0, 0, 0, 0.04);

border-radius: 2.4rem;
background: rgba(61, 61, 61, 0.12);
backdrop-filter: blur(10px) saturate(180%);

margin: 1rem;
padding: 0 1.4rem;

position: fixed;
left: 1rem;
right: 1rem;
top: 1rem;

z-index: 999;

transition: height .45s cubic-bezier(.55, .085, .68, .53);

align-items: center;
color: #fff;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... background