:root {
    --scrollbar-thumb: rgba(218, 205, 184, 0.22);
    --scrollbar-thumb-hover: #b05454;
    --scrollbar-width: 6px;
}

html {
    scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
    body { padding-right: var(--scrollbar-width); }
    body:has(::-webkit-scrollbar) { padding-right: 0; }
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 0;
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}