[data-tst-file-drop] {
    border: 1px dashed color-mix(in srgb, currentColor 36%, transparent);
    border-radius: 1rem;
    cursor: pointer;
    padding: 1rem;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

[data-tst-file-drop][data-tst-drag-active="true"] {
    background: color-mix(in srgb, var(--tst-accent, #c8ff3d) 9%, transparent);
    border-color: var(--tst-accent, #c8ff3d);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tst-accent, #c8ff3d) 20%, transparent);
}

[data-tst-file-drop]:focus-visible {
    outline: 3px solid var(--tst-focus, #78a7ff);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    [data-tst-file-drop] { transition: none; }
}