.biomorphose-viewer { margin: 1.25rem 0 2rem; }
.biomorphose-viewer-stage { position: relative; height: clamp(360px, 65vh, 720px); background: #000; overflow: hidden; }
.biomorphose-viewer-viewport { width: 100%; height: 100%; }
.biomorphose-viewer-viewport canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.biomorphose-viewer-viewport canvas:active { cursor: grabbing; }
.biomorphose-viewer-viewport canvas:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.biomorphose-viewer .biomorphose-viewer-status { position: absolute; top: 45%; left: 1rem; right: 1rem; margin: 0; color: #fff; text-align: center; pointer-events: none; }
.biomorphose-viewer-load { position: absolute; top: 58%; left: 50%; transform: translateX(-50%); }
.biomorphose-viewer-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .65rem; font-size: .85rem; line-height: 1.5; }
.biomorphose-viewer button { font: inherit; border: 1px solid currentColor; padding: .45rem .7rem; color: inherit; background: transparent; cursor: pointer; }
.biomorphose-viewer-load { color: #fff !important; }
.biomorphose-viewer button:disabled { opacity: .45; cursor: default; }
.biomorphose-viewer button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.biomorphose-viewer [hidden] { display: none; }
@media (max-width: 540px) { .biomorphose-viewer-caption { align-items: flex-start; flex-direction: column; } }