@layer utilities {
    /* Creation surfaces use a compact, theme-aware scrollbar. */
    .creation-scrollbar {
        scrollbar-color: color-mix(in srgb, var(--user-ink, #fff) 22%, transparent) transparent;
        scrollbar-gutter: auto;
        scrollbar-width: thin;
    }

    .creation-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    .creation-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .creation-scrollbar::-webkit-scrollbar-thumb {
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--user-ink, #fff) 18%, transparent);
    }
    .creation-scrollbar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--user-ink, #fff) 32%, transparent); }

    html:not(.dark) .creation-scrollbar {
        scrollbar-color: color-mix(in srgb, var(--user-ink, #1b1b1f) 22%, transparent) transparent;
    }
    html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--user-ink, #1b1b1f) 16%, transparent); }
    html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--user-ink, #1b1b1f) 28%, transparent); }
}