/* Full-bleed breakout */
.threejs-bleed {
    width: 100vw;              /* span entire viewport */
    max-width: 100vw;
    margin-left: 50%;          /* center the breakout */
    transform: translateX(-50%);
}

.threejs-container {
    text-align: center;
    width: 100%;
}

.threejs-canvas {
    width: 100%;
    aspect-ratio: 4 / 3;  /* or 3 / 2, 4 / 3, etc. */
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.threejs-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.threejs-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Responsive height */
@media (min-width: 300px) { 
    .threejs-canvas { 
        height: 400px; 
    } 
}

@media (min-width: 768px) { 
    .threejs-canvas { 
        height: 400px; 
    } 
}
@media (min-width: 1024px) { 
    .threejs-canvas { 
        height: 500px; 
    } 
}
@media (min-width: 1440px) { 
    .threejs-canvas { 
        height: 600px; 
    } 
}


/* Ensure proper sizing within page content */
.content-margin .threejs-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Ensure no ancestor forces horizontal clipping */
.content-margin, .post-content { 
    overflow-x: visible; 
}

/* Dark theme adjustments */
html[data-theme="dark"] .threejs-canvas {
    border-color: #00ff00;
    background: #2a2a2a;
}

html[data-theme="dark"] .threejs-canvas canvas {
    background: #2a2a2a;
}