:root {
    --brand: #6f42c1;
    --brand-100: rgba(111, 66, 193, .12);
    --brand-200: rgba(111, 66, 193, .22);
}

.text-purple {
    color: var(--brand) !important;
}

.bg-purple {
    background: var(--brand) !important;
}

.border-purple {
    border-color: var(--brand) !important;
}

.bg-purple-subtle {
    background: var(--brand-100) !important;
}

.border-purple-subtle {
    border-color: var(--brand-200) !important;
}

.ship-marker {
    position: relative;
    width: clamp(62px, 12vw, 80px);
    display: flex;
    justify-content: center;
    --node: clamp(42px, 8vw, 44px);
    --rail: 4px;
    --line-top: 0px;
    --line-bottom: 0px;
    --prog-bg: transparent;
    --prog-top: var(--line-top);
    --prog-bottom: var(--line-bottom);
}

.ship-timeline>li:first-child .ship-marker {
    --line-top: calc(var(--node) / 2);
    --prog-top: var(--line-top);
}

.ship-timeline>li:last-child .ship-marker {
    --line-bottom: calc(100% - (var(--node) / 2));
}

.ship-marker::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: var(--line-top);
    bottom: var(--line-bottom);
    width: var(--rail);
    border-radius: 999px;
    background: var(--bs-border-color);
    opacity: .9;
}

.ship-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: var(--prog-top);
    bottom: var(--prog-bottom);
    width: var(--rail);
    border-radius: 999px;
    background: var(--prog-bg);
}

.is-done .ship-marker {
    --prog-bg: var(--brand);
}

.is-current .ship-marker {
    --prog-bg: var(--brand);
    --prog-bottom: calc(100% - (var(--node) / 2));
}

.ship-node {
    width: var(--node);
    height: var(--node);
    border-radius: 999px;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .10);
}

.is-done .ship-node {
    border-color: var(--brand);
    color: var(--brand);
}

.is-current .ship-node {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.is-current .ship-node::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 999px;
    border: 2px solid rgba(111, 66, 193, .35);
    animation: pulse 1.6s ease-out infinite;
}

.vw-canvas-wrap {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
    background: linear-gradient(135deg, rgba(111, 66, 193, .10), rgba(13, 110, 253, .08), rgba(25, 135, 84, .06));
}

.vw-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.vw-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    background: rgba(255, 255, 255, .85);
}

@keyframes pulse {
    0% {
        transform: scale(.85);
        opacity: .9;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .is-current .ship-node::after {
        animation: none;
    }
}