.ux-pips {
    --_rail: var(--ux-border);
    --_pip: var(--ux-accent);
    --_label: var(--ux-fg);
    --_bg: var(--ux-soft);
    position: relative;
    width: 100%;
    padding: .9rem .3rem 1.6rem .3rem; /* bottom space for labels */
    user-select: none;
}

.ux-pips__rail { 
    position: relative;
    height: 6px;
    background: linear-gradient(to right, color-mix(in oklab, var(--_rail) 70%, transparent), var(--_rail));
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_rail) 60%, #000);
}

.ux-pips__ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


.ux-pips__tick {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
}


    .ux-pips__tick::before {
        content: "";
        display: block;
        width: 2px;
        height: 12px;
        background: var(--_rail);
        border-radius: 2px;
        transform: translate(-1px, -12px); /* small nudge so the line rises above the rail */
    }

.ux-pips__dot {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--_rail);
    box-shadow: 0 0 0 2px var(--_bg);
}

.ux-pips__labels {
    position: relative;
    height: 1.4rem; /* space for text */
    margin-top: .55rem;
    font-size: .85rem;
    color: var(--_label);
}

.ux-pips__label {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: .1rem .25rem;
    border-radius: 6px;
    text-align: center;
}

.ux-pips__thumb {
    --size: 22px;
    position: absolute;
    top: 50%; /* center on rail height */
    transform: translate(-50%, -50%);
    width: var(--size);
    height: var(--size);
    border-radius: 999px;
    cursor: pointer;
    background: var(--_pip);
    box-shadow: 0 0 0 2px var(--_bg), 0 0 0 3px color-mix(in oklab, var(--_pip) 60%, transparent);
    outline: none;
    transition: box-shadow .12s ease, transform .06s ease;
}

    .ux-pips__thumb:focus-visible {
        box-shadow: 0 0 0 2px var(--_bg), 0 0 0 4px var(--_pip);
    }

    .ux-pips__thumb:active {
        transform: translate(-50%, -50%) scale(.98);
    }

.ux-pips[aria-disabled="true"] {
    opacity: .6;
    pointer-events: none;
}