*:focus{outline:none}*{-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{font-family:system-ui;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--color-active: rgb(192 32 255);--color-active: #403345;--color-active: #5b3f65;--color-active: #657}body{margin:0;background:#fff}#app{overflow:hidden}main{position:absolute;inset:0;display:flex;flex-flow:column}video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}canvas{cursor:crosshair;flex:1;touch-action:none}.toolbar{width:100%;height:50px;background:#444;display:flex;flex-flow:row;justify-content:space-between;touch-action:none}.toolbar-side{display:flex;flex-flow:row}.icon{background:#444;display:grid;place-items:center;width:50px}.swatch{display:grid;place-items:center;width:50px}.swatch-icon{width:50px}.color-picker{position:absolute;top:50px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 2px 20px #0000004d;touch-action:none}.color-picker-left{left:0}.color-picker-right{right:0}.color-picker-swatch{width:50px;height:50px}.icon{color:#aaa;width:40px;height:40px}.icon.active,.icon:active{fill:#fff;stroke:none}.btn-icon{border:none;margin:0;padding:4px;width:50px;height:50px;display:grid;place-items:center;background:#444}