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

[Anonymous]

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

Код: Выделить всё

body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-image: url("https://images.unsplash.com/photo-1763661582858-f88094b11c63?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
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;
}

Код: Выделить всё

Hi ! Hero some text 

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