/* One shared, scissored WebGL canvas; interaction stays on the two 3D frames. */
.development-grid{position:relative;isolation:isolate}
.development-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.development-stage{position:relative;aspect-ratio:1/1.08;overflow:hidden;background:#171310;border:1px solid var(--line);cursor:grab;touch-action:pan-y;outline:none}
.development-stage.is-dragging{cursor:grabbing}
.development-stage::after{content:'';position:absolute;inset:0;border:1px solid var(--line);z-index:2;pointer-events:none}
.development-stage:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.development-mode{position:absolute;top:17px;left:17px;z-index:2;font-size:8px;letter-spacing:.14em;color:#b5a795;pointer-events:none}
.development-loading{position:absolute;inset:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;text-align:center;z-index:2;font-size:10px;line-height:1.8;color:#b5a795;pointer-events:none}
.development-stage[data-state=ready] .development-loading{display:none}
.development-retry{pointer-events:auto}
.development-grid figcaption{position:relative;z-index:2}
@media(max-width:700px){
 .development-grid{grid-template-columns:1fr;gap:28px}
 .development-grid figure:last-child{grid-column:auto;margin-top:0}
 .development-stage{aspect-ratio:1/1.08}
 .development-mode{top:15px;left:15px}
 .development-grid figcaption{font-size:11px;padding-top:14px}
}

/* Original 2D reference: the same frame, no WebGL or input controls. */
.development-sketch{cursor:default;touch-action:auto;background:#151210}
.development-sketch img{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}