/* DNA Animation Block Styles */
.wp-block-polypress-dna-animation {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    border-radius: 8px;
    overflow: hidden;
}

.dna-animation-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dna-animation-canvas {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 400px;
    min-height: 400px;
    max-width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dna-animation-canvas canvas {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Editor specific styles */
.dna-animation-block {
    margin: 16px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-block-polypress-dna-animation {
        min-height: 300px;
    }
    
    .dna-animation-canvas canvas {
        border-radius: 4px;
    }
}

@media (max-width: 480px) {
    .wp-block-polypress-dna-animation {
        min-height: 250px;
        transform: scale(0.75);
        margin-block: -5rem -3rem;
    }
}