body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    /* градиентный фон, близкий к референсу */
    background:
            radial-gradient(circle at 0% 0%, #3b2b72 0, transparent 55%),
            radial-gradient(circle at 100% 100%, #072c4b 0, transparent 60%),
            linear-gradient(135deg, #050716 0%, #050816 40%, #090019 100%);
}

/* чтобы SVG не прижимался к краям */
svg {
    max-width: 100vw;
    max-height: 100vh;
    display: block;
}

.ing-avatar{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px 6px;
}
.ing-svg{
    width:min(360px, 92vw);
    height:auto;
    display:block;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,0.45));
}

/* SVG classes */
.skin{ fill:url(#skinGrad); }
.hair{ fill:url(#hairGrad); opacity:0.96; }
.shadow{ fill:rgba(0,0,0,0.08); }

.eyeWhite{ fill:rgba(255,255,255,0.96); stroke:rgba(0,0,0,0.08); stroke-width:1; }
.iris{ fill:url(#irisGrad); }
.pupil{ fill:rgba(10,12,16,0.98); }
.hl{ fill:rgba(255,255,255,0.86); }

.brow{ stroke:rgba(6,26,40,0.88); stroke-width:2; stroke-linecap:round; fill:none; }

.lidSkin{ fill:rgba(182,246,240,0.72); }
.lidShade{ fill:rgba(0,0,0,0.06); }

.lip{ fill:rgba(115,14,60,0.88); stroke:rgba(80,10,40,0.92); stroke-width:1; }
.inner{ fill:rgba(55,6,26,0.92); }
.gloss{ fill:rgba(255,255,255,0.07); }
.teeth{ fill:rgba(255,255,255,0.92); opacity:0; }
.tongue{ fill:rgba(215,70,120,0.82); opacity:0; }



/* сам foreignObject — обычно ничего особого не нужно, но на всякий случай: */
.bg-fo {
    overflow: visible;           /* фон может выходить в пределах маски SVG */
    pointer-events: none;        /* чтобы видео не перехватывало клики */
}

/* контейнер, который точно совпадает с областью лица */
.bg-clip {
    width: 100%;
    height: 100%;
    overflow: hidden;            /* ОБЯЗАТЕЛЬНО: обрезаем видео по форме */
    border-radius: 999px;        /* если лицо круглое/овальное; подгони при необходимости */
    position: relative;
}

/* само видео: растянуть и выровнять, чтобы картинка «попала» в лицо */
.bg-clip video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;           /* заполняем всю область, с обрезкой */
    object-position: 50% 35%;    /* сдвиг по вертикали, чтобы фон совпал с лицом */
}