.mapbot{width:90%;max-width:700px;margin-bottom:24px}.mb-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 4px}.mb-bar button{margin:0;padding:4px 12px}.mb-bar button.on{background:var(--mauve);color:var(--crust)}.mb-bar button:disabled{opacity:.5;cursor:default}.mb-bar .gap{flex-basis:100%;height:0}.mb-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.78rem}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--overlay0);margin-right:6px}.dot.ok{background:var(--green)}.dot.err{background:var(--red)}.palette{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}.palette div{width:24px;height:24px;border-radius:3px;cursor:pointer;box-shadow:0 0 0 1px var(--crust)}.palette div.off{cursor:not-allowed;background-image:linear-gradient(to top right,transparent calc(50% - 1.5px),var(--red) calc(50% - 1.5px),var(--red) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(to bottom right,transparent calc(50% - 1.5px),var(--red) calc(50% - 1.5px),var(--red) calc(50% + 1.5px),transparent calc(50% + 1.5px))}.palette div.on{outline:2px solid var(--pink);outline-offset:1px}.canvas-box{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:4px}.canvas-box canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;border-radius:4px}#grid{cursor:crosshair;touch-action:none;transform-origin:0 0}#grid.panning{cursor:grabbing}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface0);padding:6px 14px;border-radius:6px;font-size:.8rem;display:none}#toast.err{color:var(--red)}.getmap{color:var(--mauve)}.mapbot p{font-size:.78rem}.mb-meta span:empty{display:none}.mb-bar>span:not(.gap){font-size:.78rem}