:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #111; }
body { font-family: Arial, Helvetica, sans-serif; }
.viewer { position: relative; width: 100%; height: 100%; min-height: 420px; background: #111; }
canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; outline: none; }
canvas:active { cursor: grabbing; }
.loading, .error, .help {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(5, 23, 33, .82);
    border-radius: 3px;
}
.loading, .error { top: 50%; transform: translate(-50%, -50%); padding: 14px 18px; text-align: center; }
.help { bottom: 18px; padding: 8px 12px; font-size: 13px; pointer-events: none; }
.error { width: min(90%, 520px); }
@media (prefers-reduced-motion: reduce) { .help { display: none; } }