.fluency-graph {
    --journey-navy: #181d52;
    --journey-blue: #3454ff;
    --journey-mint: #58c5a0;
    --journey-border: #e5e7ef;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid var(--journey-border);
    border-radius: 28px;
    padding: 28px 20px 24px;
    margin-bottom: 28px;
    box-shadow: 0 12px 42px -30px #525cb544;
}

.fluency-graph h2 {
    margin: 0 12px;
    color: var(--journey-navy);
    font-size: 30px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.8px;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.fluency-graph .journey-stage {
    --pointer-x: 50%;
    --pointer-y: 50%;
    position: relative;
    height: 220px;
    margin-top: 54px;
    margin-bottom: 58px;
    isolation: isolate;
    cursor: default;
}

.fluency-graph .journey-stage::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: -22px;
    background: radial-gradient(circle 88px at var(--pointer-x) var(--pointer-y), rgba(79, 109, 255, .17), rgba(88, 197, 160, .07) 48%, transparent 72%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.fluency-graph .journey-stage.is-exploring::before { opacity: 1; }

.fluency-graph .journey-canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fluency-graph .journey-track {
    stroke: #f0f3ff;
    stroke-width: 6;
    vector-effect: non-scaling-stroke;
}

.fluency-graph .journey-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: filter 220ms ease;
}

.fluency-graph .journey-stage.is-exploring .journey-line { filter: drop-shadow(0 0 5px rgba(52, 84, 255, .22)); }

.fluency-graph .journey-stop {
    position: absolute;
    z-index: 2;
    left: var(--x);
    top: var(--y);
    bottom: 0;
    width: 0;
}

.fluency-graph .journey-guide {
    position: absolute;
    top: 16px;
    bottom: -3px;
    border-left: 2px dotted #d0d8f5;
    transition: border-color 200ms ease;
}

.fluency-graph .journey-dot {
    position: absolute;
    left: -10px;
    top: -10px;
    width: 20px;
    height: 20px;
    border: 4px solid white;
    border-radius: 50%;
    background: #7391ff;
    box-shadow: 0 0 0 1px #e7edff;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.fluency-graph .journey-stop:first-child .journey-dot { background: #b7bff3; }

.fluency-graph .current .journey-dot {
    left: -13px;
    top: -13px;
    width: 26px;
    height: 26px;
    border: 6px solid var(--journey-blue);
    background: white;
    box-shadow: 0 4px 14px #3454ff24;
}

.fluency-graph .destination .journey-dot {
    left: -17px;
    top: -17px;
    width: 34px;
    height: 34px;
    border: 5px solid white;
    background: var(--journey-blue);
    box-shadow: 0 0 0 10px #edf4ff, 0 0 30px 12px #58c5a01c;
}

.fluency-graph .journey-callout {
    position: absolute;
    bottom: calc(100% + 21px);
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 22px;
    border-radius: 24px;
    background: #72748c;
    color: white;
    box-shadow: 0 8px 22px #32345b12;
    font-size: 16px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.fluency-graph .journey-callout::after {
    content: '';
    position: absolute;
    left: calc(50% - 6px);
    bottom: -6px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-radius: 2px;
    background: inherit;
}

.fluency-graph .destination .journey-callout {
    background: var(--journey-mint);
    color: #133f32;
}

.fluency-graph .journey-icon {
    position: absolute;
    top: calc(100% + 15px);
    left: -12px;
    width: 24px;
    height: 24px;
    color: #929bbd;
    transform-origin: center;
    transition: color 200ms ease, transform 200ms ease, filter 200ms ease;
}

.fluency-graph .destination .journey-icon { color: #219671; }
.fluency-graph .current .journey-icon { color: #626da7; }

.fluency-graph .journey-feature {
    position: absolute;
    top: calc(100% + 43px);
    left: 50%;
    color: var(--journey-blue);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%) translateY(-3px);
    transition: opacity 180ms ease, transform 200ms ease;
    pointer-events: none;
}

.fluency-graph .destination .journey-feature { color: #197d60; }
.fluency-graph .journey-stop.is-nearest .journey-feature { opacity: 1; transform: translateX(-50%) translateY(0); }
.fluency-graph .journey-stop.is-nearest .journey-icon { color: var(--journey-blue); transform: translateY(-2px) scale(1.16); filter: drop-shadow(0 4px 6px rgba(52, 84, 255, .25)); }
.fluency-graph .journey-stop.destination.is-nearest .journey-icon { color: #197d60; filter: drop-shadow(0 4px 6px rgba(25, 125, 96, .24)); }
.fluency-graph .journey-stop.is-nearest .journey-dot { transform: scale(1.16); box-shadow: 0 0 0 7px rgba(52, 84, 255, .1), 0 5px 15px rgba(52, 84, 255, .2); }
.fluency-graph .journey-stop.destination.is-nearest .journey-dot { box-shadow: 0 0 0 12px #edf4ff, 0 0 30px 12px #58c5a02e; }
.fluency-graph .journey-stop.is-nearest .journey-guide { border-color: #aebeff; }

.fluency-graph.fluency-graph--motion-ready .journey-line { stroke-dashoffset: 1; }
.fluency-graph.fluency-graph--motion-ready .journey-area,
.fluency-graph.fluency-graph--motion-ready .journey-guide,
.fluency-graph.fluency-graph--motion-ready .journey-dot,
.fluency-graph.fluency-graph--motion-ready .journey-icon { opacity: 0; }

.fluency-graph.fluency-graph--motion-ready.is-animating .journey-line {
    animation: fluency-graph-draw 1.7s cubic-bezier(.35, 0, .2, 1) 120ms both;
}

.fluency-graph.fluency-graph--motion-ready.is-animating .journey-area {
    animation: fluency-graph-appear 1s ease .6s both;
}

.fluency-graph.fluency-graph--motion-ready.is-animating .journey-guide,
.fluency-graph.fluency-graph--motion-ready.is-animating .journey-icon {
    animation: fluency-graph-appear .4s ease var(--delay) both;
}

.fluency-graph.fluency-graph--motion-ready.is-animating .journey-dot {
    animation: fluency-graph-milestone .4s cubic-bezier(.2, .8, .2, 1.2) var(--delay) both;
}

@keyframes fluency-graph-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes fluency-graph-appear {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fluency-graph-milestone {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 640px) {
    .fluency-graph {
        padding: 24px 12px 20px;
        border-radius: 24px;
        margin-bottom: 24px;
    }

    .fluency-graph h2 {
        margin: 0 8px;
        font-size: 25px;
        letter-spacing: -.6px;
    }

    .fluency-graph .journey-stage {
        height: 168px;
        margin-top: 48px;
        margin-bottom: 56px;
    }

    .fluency-graph .journey-callout {
        bottom: calc(100% + 16px);
        padding: 10px 15px;
        font-size: 14px;
    }

    .fluency-graph .destination .journey-callout { padding: 10px 12px; transform: translateX(-60%); }
    .fluency-graph .destination .journey-callout::after { left: calc(60% - 6px); }
    .fluency-graph .journey-line,
    .fluency-graph .journey-track { stroke-width: 5; }

    .fluency-graph .journey-dot {
        left: -8.5px;
        top: -8.5px;
        width: 17px;
        height: 17px;
        border-width: 3px;
    }

    .fluency-graph .current .journey-dot {
        left: -11.5px;
        top: -11.5px;
        width: 23px;
        height: 23px;
        border-width: 5px;
    }

    .fluency-graph .destination .journey-dot {
        left: -14.5px;
        top: -14.5px;
        width: 29px;
        height: 29px;
        border-width: 4px;
        box-shadow: 0 0 0 7px #edf4ff;
    }

    .fluency-graph .journey-icon {
        left: -11px;
        width: 22px;
        height: 22px;
    }

    .fluency-graph .journey-feature {
        top: calc(100% + 42px);
        width: max-content;
        max-width: 86px;
        font-size: 11px;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fluency-graph,
    .fluency-graph * {
        animation: none !important;
        transition: none !important;
    }

    .fluency-graph.fluency-graph--motion-ready .journey-line { stroke-dashoffset: 0; }
    .fluency-graph.fluency-graph--motion-ready .journey-area,
    .fluency-graph.fluency-graph--motion-ready .journey-guide,
    .fluency-graph.fluency-graph--motion-ready .journey-dot,
    .fluency-graph.fluency-graph--motion-ready .journey-icon { opacity: 1; }
}