/* Custom styles for the scroll preview and scroll-driven animations polyfill fallback */

body {
    font-family: 'Inter', sans-serif;
}

/* Base styles for the dynamic target */
#target-element {
    will-change: transform, opacity;
}

/* Scrollbar styling for preview area */
.preview-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.preview-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.preview-scroll-area::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 4px;
}

.dark .preview-scroll-area::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.6);
}

.preview-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.8);
}

/* 
 * The dynamically generated CSS will be injected into a style tag.
 * We rely on native CSS scroll-timeline and view-timeline properties.
 */