/* Public creator identity when the creator has not uploaded portrait or banner art. */
.creator-identity {
    --creator-hue: 265;
    --creator-accent-hue: 34;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 22%,
            hsl(var(--creator-accent-hue) 78% 58% / 0.72) 0 11%, transparent 12%),
        linear-gradient(145deg,
            hsl(var(--creator-hue) 62% 32%),
            hsl(var(--creator-accent-hue) 58% 24%));
}

.creator-identity::before,
.creator-identity::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.creator-identity::before {
    width: 54%;
    aspect-ratio: 1;
    inset-block-start: -18%;
    inset-inline-start: -10%;
    border: 2px solid hsl(0 0% 100% / 0.34);
    border-radius: 34% 66% 52% 48%;
    transform: rotate(18deg);
}

.creator-identity::after {
    width: 42%;
    height: 130%;
    inset-block-start: -15%;
    inset-inline-end: 12%;
    border-inline: 1px solid hsl(0 0% 100% / 0.2);
    transform: rotate(28deg);
    background: linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.09), transparent);
}

.creator-identity[data-identity-pattern="1"]::before {
    inset-block-start: 50%;
    inset-inline-start: 8%;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 0 12px hsl(0 0% 100% / 0.08);
}

.creator-identity[data-identity-pattern="1"]::after {
    inset-inline-end: -4%;
    transform: rotate(-38deg);
}

.creator-identity[data-identity-pattern="2"]::before {
    inset-block-start: -8%;
    inset-inline-start: 58%;
    border-radius: 12%;
    transform: rotate(45deg);
}

.creator-identity[data-identity-pattern="2"]::after {
    inset-inline-end: 58%;
    transform: rotate(12deg);
}

.creator-identity[data-identity-pattern="3"]::before {
    inset-block-start: 56%;
    inset-inline-start: 12%;
    border-radius: 50% 18%;
    transform: rotate(-24deg);
}

.creator-identity[data-identity-pattern="3"]::after {
    inset-inline-end: 20%;
    transform: rotate(62deg);
}

.creator-identity__initials {
    position: relative;
    z-index: 1;
    color: white;
    font-family: var(--rd-font-display, ui-serif, Georgia, serif);
    font-optical-sizing: auto;
    font-size: 2rem;
    font-weight: 720;
    letter-spacing: 0.03em;
    line-height: 1;
    text-shadow: 0 1px 8px hsl(0 0% 0% / 0.45);
}