:root {
    --scrollbar-proximity: 0;
    scrollbar-width: thin;
    scrollbar-color: rgb(154 104 224 / calc(.34 + var(--scrollbar-proximity) * .56)) rgba(8, 18, 30, .12);
}

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: rgba(8, 18, 30, .1); }
::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: linear-gradient(
        rgb(72 57 91 / calc(.56 + var(--scrollbar-proximity) * .34)),
        rgb(29 45 66 / calc(.68 + var(--scrollbar-proximity) * .25))
    ) padding-box;
    box-shadow:
        0 0 calc(3px + var(--scrollbar-proximity) * 14px)
            rgb(177 91 255 / calc(.18 + var(--scrollbar-proximity) * .68)),
        inset 0 0 calc(2px + var(--scrollbar-proximity) * 5px)
            rgb(224 190 255 / calc(.08 + var(--scrollbar-proximity) * .5));
    transition: box-shadow .18s ease, background .18s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(rgba(111, 75, 151, .9), rgba(36, 55, 79, .96)) padding-box;
}

.scrollbar-clicked::-webkit-scrollbar-thumb {
    box-shadow: 0 0 23px rgba(218, 145, 255, .95), inset 0 0 7px rgba(255, 255, 255, .65);
}

:root.scrollbar-free-theme {
    scrollbar-color: rgb(214 104 69 / calc(.38 + var(--scrollbar-proximity) * .58)) rgba(70, 38, 27, .1);
}

.scrollbar-free-theme::-webkit-scrollbar-track { background: rgba(70, 38, 27, .09); }

.scrollbar-free-theme::-webkit-scrollbar-thumb {
    background: linear-gradient(
        rgb(151 75 52 / calc(.58 + var(--scrollbar-proximity) * .36)),
        rgb(92 53 40 / calc(.68 + var(--scrollbar-proximity) * .27))
    ) padding-box;
    box-shadow:
        0 0 calc(3px + var(--scrollbar-proximity) * 14px)
            rgb(214 104 69 / calc(.18 + var(--scrollbar-proximity) * .68)),
        inset 0 0 calc(2px + var(--scrollbar-proximity) * 5px)
            rgb(255 204 181 / calc(.08 + var(--scrollbar-proximity) * .5));
}

.scrollbar-free-theme::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(rgba(190, 91, 61, .94), rgba(105, 58, 42, .97)) padding-box;
}

.scrollbar-free-theme.scrollbar-clicked::-webkit-scrollbar-thumb {
    box-shadow: 0 0 23px rgba(238, 129, 89, .95), inset 0 0 7px rgba(255, 224, 211, .65);
}

@media (prefers-reduced-motion: reduce) {
    ::-webkit-scrollbar-thumb { transition: none; }
}