:root{--cell-size: 50}.App .BoardRenderer{width:100%;height:100%}.ColorTileComponent article{background:var(--color);width:100%;height:100%}.ColorTileComponent article sub{position:absolute;bottom:4px;left:4px}.ColorTileComponent article[data-theme=light] sub{color:#000;opacity:.7}.ColorTileComponent article[data-theme=dark] sub{color:#fff;opacity:.7}.ColorTileComponent>.ColorPicker{position:absolute;top:100%;left:0}.TileFrame{position:absolute;left:calc(var(--tile-x) * 1px);top:calc(var(--tile-y) * 1px);width:calc(var(--tile-width) * 1px);height:calc(var(--tile-height) * 1px);transition:all .1s}.TileFrame[data-is-kinematic]{transition:none}.Resizer{position:absolute;width:6px;height:6px;left:calc(50% - 3px);top:calc(50% - 3px);z-index:1;background:#fff;outline:1px solid black;border-radius:100%}.Resizer[data-x=right]{left:unset;right:-3px}.Resizer[data-x=left]{left:unset;left:-3px}.Resizer[data-y=top]{top:-3px}.Resizer[data-y=bottom]{top:unset;bottom:-3px}.Resizer[data-x]{cursor:ew-resize}.Resizer[data-y]{cursor:ns-resize}.Resizer[data-x=right][data-y=top],.Resizer[data-x=left][data-y=bottom]{cursor:nesw-resize}.Resizer[data-x=left][data-y=top],.Resizer[data-x=right][data-y=bottom]{cursor:nwse-resize}.ColorPicker{width:200px;display:flex;gap:10px;padding:10px;flex-direction:column;background:#fff;border-radius:5px;border:1px solid lightgrey}.ColorPicker__chroma{width:100%;height:20px;position:relative}.ColorPicker__chroma>*{pointer-events:none;-webkit-user-select:none;user-select:none}.ColorPicker__chroma img{width:100%;height:100%;border-radius:5px}.ColorPicker__chroma__knob{width:10px;height:10px;background:#fff;border:1px solid black;border-radius:100%;position:absolute;left:calc(var(--chroma) * 100% - 5px);top:5px}.ColorPicker__hsl{width:100%;aspect-ratio:1;position:relative;border-radius:5px}.ColorPicker__hsl>*{pointer-events:none;-webkit-user-select:none;user-select:none}.ColorPicker__hsl img{width:100%;height:100%;border-radius:5px;border:1px solid lightgrey}.ColorPicker__hsl__knob{width:10px;height:10px;background:#fff;border:1px solid black;border-radius:100%;position:absolute;left:calc(var(--hsl-x) * 100% - 5px);top:calc(var(--hsl-y) * 100% - 5px)}.Input{outline:1px solid lightgrey;border-radius:4px}.Input input{width:100%;height:100%;border:none;background:none;outline:none;padding:0 5px}.Input:focus-within{outline:2px solid cornflowerblue}.ImageTileComponent article{width:100%;height:100%;box-shadow:1px 2px 5px 1px #0000004d;border-radius:3px;transform:rotate(calc(1deg * (var(--random) - .5)));pointer-events:none}.ImageTileComponent img{-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;object-fit:cover}.EditableText p{display:inline-block}.EditableText form{margin:0;padding:0;width:100%;height:100%}.EditableText input,.EditableText textarea{outline:inherit;border:inherit;font:inherit;font-weight:inherit;width:100%;height:100%}.BoardRenderer{position:absolute;background-image:var(--background);background-repeat:repeat;background-size:calc(var(--background-size) * 1px);background-position:calc(var(--background-x) * -1px) calc(var(--background-y) * -1px);overflow:hidden}.Viewport{position:absolute;width:100%;height:100%;transform-origin:0 0;transform:scale(var(--scale)) translate(calc(var(--position-x) * -1px),calc(var(--position-y) * -1px));pointer-events:none}.Viewport>*{pointer-events:all}.ContextMenu{position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px)}html,body,#root{width:100vw;height:100vh}@font-face{font-family:Poppins;src:url(/assets/Poppins-DhE6KwIp.otf)}*{margin:0;padding:0;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:Poppins}