.checkerboard {
    background-color: #f8fafc;
    /* slate-50 */
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Timeline Styles */
.timeline-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: #0f172a;
    /* slate-900 */
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
    z-index: 10;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.timeline-handle:hover {
    transform: translate(-55%, -55%) scale(1.2);
}

.timeline-handle.dragging {
    background-color: #f59e0b;
    /* amber-500 */
    transform: translate(-55%, -55%) scale(1.3);
    z-index: 20;
}