:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; background: #fff; color: #111; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
#viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; outline: none; }
#viewport:focus-visible { outline: 1px solid #aaa; outline-offset: -2px; }
#canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-select: none; }
.tile, .label { position: absolute; margin: 0; pointer-events: none; }
.tile { display: block; object-fit: fill; -webkit-user-drag: none; }
.pending { background: #f5f5f5; border: 1px solid #dedede; }
.label-tile { background: #202020; }
.label { color: white; white-space: pre; font-weight: 400; line-height: 1.2; }
#about { position: fixed; left: max(24px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 2; padding: 10px 0; color: #111; font-size: 12px; letter-spacing: .07em; text-decoration: none; cursor: pointer; }
#about:hover { text-decoration: underline; text-underline-offset: 4px; }
#about:focus-visible { outline: 1px solid #111; outline-offset: 5px; }
#notice { position: fixed; left: 24px; bottom: 58px; margin: 0; padding: 8px 0; background: #fff; font-size: 12px; }
noscript { position: fixed; left: 24px; top: 24px; font-size: 13px; }