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(380px, 100%);
    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); }

.mouth-canvas{
    display:block;
    width:58px;
    height:54px;
    overflow:visible;
    pointer-events:none;
}



/* сам 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%;    /* сдвиг по вертикали, чтобы фон совпал с лицом */
}