.syntphony-adv-timeline-widget {
    --adv-title-color: var(--color-headings);
    --adv-text-color: var(--color-body);
    --adv-strong-color: var(--color-headings);
    --adv-line-color: color-mix(in srgb, var(--color-primary-default) 15%, transparent);
    --adv-dot-color: var(--color-primary-default);
    --adv-dot-glow-color: var(--color-primary-subtle-default);
}

.dark .syntphony-adv-timeline-widget,
.section--dark .syntphony-adv-timeline-widget {
    --adv-title-color: var(--gray-ntt-100);
    --adv-text-color: var(--gray-ntt-90);
    --adv-strong-color: var(--gray-ntt-100);
}

.adv-title {
    text-align: center;
    color: var(--adv-title-color);
    font-size: var(--h3);
}

.adv-timeline {
    position: relative;
    max-width: min(100%, 56.25rem);
    margin: clamp(var(--spacing-00), 2vw, var(--spacing-600)) auto;
}

.adv-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--spacing-025);
    height: 100%;
    background: var(--adv-line-color);
    transform: translateX(-50%);
}

.adv-item {
    position: relative;
    width: 50%;
    padding: var(--spacing-100) clamp(var(--spacing-200), 2vw, var(--spacing-600));
    box-sizing: border-box;
}

.adv-item.left {
    left: 0;
    text-align: right;
}

.adv-item.right {
    left: 50%;
    text-align: left;
}

.adv-item::before {
    content: "";
    position: absolute;
    top: var(--spacing-250);
    width: var(--size-125, var(--spacing-125));
    height: var(--size-125, var(--spacing-125));
    background: var(--adv-dot-color);
    border-radius: var(--border-radius-999);
    box-shadow: 0 0 var(--size-100) var(--adv-dot-glow-color);
}

.adv-item.left::before {
    right: 0;
    transform: translateX(50%);
}

.adv-item.right::before {
    left: 0;
    transform: translateX(-50%);
}

.adv-item p,
.adv-item-description {
    color: var(--adv-text-color);
    font-size: var(--text-md);
    line-height: var(--line-height-relaxed, 1.7);
}

.adv-item p {
    margin: 0;
}

.adv-item-title {
    margin: 0 0 var(--spacing-100);
    color: var(--adv-strong-color);
}

.adv-item-description {
    margin: 0;
}

.adv-item strong,
.adv-item b {
    color: var(--adv-strong-color);
}

@media (max-width: 64rem) {
    .adv-timeline::before {
        left: var(--spacing-125);
    }

    .adv-item {
        width: 100%;
        padding-left: var(--spacing-600);
        padding-right: var(--spacing-300);
    }

    .adv-item.left,
    .adv-item.right {
        left: 0;
        text-align: left;
    }

    .adv-item::before {
        left: var(--spacing-125);
        transform: translateX(-50%);
    }

    .adv-item.left::before,
    .adv-item.right::before {
        left: var(--spacing-125);
        right: auto;
        transform: translateX(-50%);
    }
}