@keyframes blob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(150px, 100px) scale(1.2); }
    66% { transform: translate(-100px, 150px) scale(0.9); }
}

@keyframes blob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-150px, -100px) scale(0.9); }
    66% { transform: translate(100px, -150px) scale(1.2); }
}

.grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.3'/%3E%3C/svg%3E");
    pointer-events: none;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.grid-slot {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    transition: all 0.2s;
}

.grid-slot.no-guidelines {
    border: 2px dashed transparent;
}

.grid-slot.drag-over {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.album-cover {
    cursor: move;
    user-select: none;
}

.album-cover.dragging {
    opacity: 0.5;
}

.about-you-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.editable-label {
    outline: none;
    text-align: center;
    cursor: text;
}

.editable-label:focus {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 4px;
}