:root { color-scheme: light; font-family: Arial,sans-serif; }
* { box-sizing: border-box; }
html, body, #viewport { width: 100%; height: 100%; margin: 0; overflow: hidden; }
#viewport { touch-action: none; user-select: none; cursor: grab; outline: none; background: #fff; }
#viewport:active { cursor: grabbing; }
#viewport > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
#state { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #333; font-size: 14px; text-align: center; }
#state:empty { display: none; }
#state.loading { width: 28px; height: 28px; font-size: 0; border: 2px solid #dce2e0; border-top-color: #536963; border-radius: 50%; pointer-events: none; animation: loading-spin .8s linear infinite; }
@keyframes loading-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #state.loading { animation: none; } }