:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #173a33; color: #f6ecd8; }
#viewer, #world { position: fixed; inset: 0; overflow: hidden; }
#world { cursor: grab; touch-action: none; }
#world.dragging { cursor: grabbing; }
#world:focus-visible { outline: 2px solid #f8cd61; outline-offset: -3px; }
#world canvas { display: block; }
#zoom { position: fixed; top: 10px; left: 10px; display: flex; align-items: center; background: #10291fe6; border-radius: 8px; overflow: hidden; }
#zoom button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: 24px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
#zoom button:hover:not(:disabled) { background: #ffffff20; }
#zoom button:focus-visible { outline: 2px solid #f8cd61; outline-offset: -3px; }
#zoom button:disabled { opacity: .4; cursor: default; }
#zoom-level { min-width: 52px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #173a33; }
#loading p { margin: 0; font-size: 14px; font-weight: 500; color: #cfd8c9; }
.loading-pet { display: block; width: 96px; height: 96px; overflow: hidden; image-rendering: pixelated; border-bottom: 2px solid #cfd8c94d; }
@media (prefers-reduced-motion: reduce) { .loading-pet span { animation: none !important; } }
#viewer #status { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 12px; white-space: nowrap; background: #10291fe6; border-radius: 8px; font-size: 12px; text-align: center; pointer-events: none; }
#viewer #status:empty { display: none; }
#viewers { position: fixed; top: 10px; right: 10px; display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; background: #10291fe6; border-radius: 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }