.diorama-page { max-width: 1064px; }
.diorama-page .entry-copy { text-align: center; }
.diorama { margin: 24px auto 48px; width: 100%; text-align: center; }
.diorama-frame { position: relative; width: 100%; aspect-ratio: 1.18; min-height: 280px; }
.diorama-frame canvas, .diorama-fallback { width: 100%; height: 100%; }
.diorama-frame canvas { position: absolute; inset: 0; display: block; cursor: grab; outline-offset: 4px; }
.diorama-frame canvas:active { cursor: grabbing; }
.diorama-frame canvas[hidden] { display: none; }
.diorama-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.diorama-fallback img { display: block; width: 100%; height: auto; flex: 1 1 0; min-height: 0; object-fit: contain; }
.diorama-fallback img[hidden] { display: none; }
.diorama-fallback p { margin: 16px 24px; color: var(--muted, #74736a); }
.diorama-fallback p { font-size: 13px; flex: 0 0 auto; }
.diorama-help { margin: 14px 12px 8px; font-size: 13px; color: var(--muted, #74736a); }
.diorama [hidden] { display: none !important; }
@media (max-width: 600px) { .diorama { width: 100%; } .diorama-frame { aspect-ratio: .95; } }
@media (prefers-reduced-motion: reduce) { .diorama * { scroll-behavior: auto; } }