.brand-mark {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.38), transparent 34%),
        linear-gradient(180deg, var(--site-accent), var(--site-accent-hover));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--site-accent) 22%, transparent);
    color: var(--site-on-accent);
    font-family: var(--site-font-display, inherit);
    font-weight: var(--site-weight-bold, 900);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.brand-mark--gate {
    color: transparent;
}

.brand-gate-left,
.brand-gate-top,
.brand-gate-core {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
}

.brand-gate-left {
    inset: 7px auto 7px 7px;
    width: 4px;
}

.brand-gate-top {
    inset: 7px 7px auto;
    height: 4px;
}

.brand-gate-core {
    inset: 12px 10px 9px 13px;
    border-radius: 4px;
}