Создание элемента с необычной формой и прозрачным фоном и рамкой?

Question

[MRMehanik1]

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

<div class="module_profile" id="moduleProfile">
    <div class="mp_header">div>
</div>

.module_profile {
    position: relative;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 20%);
    padding: 8px 8px 10px 8px;
    height: 600px;
    width: 600px;
    background: linear-gradient(135deg, var(--color-purple-0) 0%, var(--color-blue-1) 50%, var(--color-blue-0) 100%);
    border: 3px solid var(--color-purple-4);
    border-radius: 25px;
    z-index: 1000;
}

.mp_header {
    position: relative;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    margin-bottom: 5px;
    height: 150px;
    width: 580px;
    padding: 5px 3px;
    background: color-mix(in srgb, var(--color-text-0) 3.5%, transparent);
    clip-path: path("M 0,15 A 15,15 0,0,1 15,0 L 565,0 A 15,15 0,0,1 580,15 L 580,75 A 15,15 0,0,1 565,90 L 165,90 A 15,15 0,0,0 150,105 L 150,135 A 15,15 0,0,1 135,150 L 15,150 A 15,15 0,0,1 0,135 Z");
    overflow: hidden;
}

Должно быть так
Как такое вообще реализовать только если в Figma. (Но раз там такое можно получить то и с помощью кода наверно тоже)