@import"https://fonts.googleapis.com/css2?family=Francois+One&display=swap";#root{height:100vh}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em rgba(100,108,255,.6666666667))}.logo.react:hover{filter:drop-shadow(0 0 2em rgba(97,218,251,.6666666667))}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.control-bar{display:flex;height:var(--control-bar-height);background-color:#222}.control-bar .control-bar-item{flex:1;margin:5px;border-radius:5px;display:flex;align-items:center;gap:10px;justify-content:center;cursor:pointer}.control-bar .control-bar-item>span{display:flex;align-items:center;justify-content:center}.control-bar .control-bar-item:hover,.control-bar .control-bar-item.selected{background-color:#ffffff0d}.page{height:100%}._editContainer_190js_1{width:100%;height:100%;overflow:hidden;touch-action:none;position:relative}._editContainer_190js_1 ._editScrollArea_190js_8{display:flex;align-items:center;justify-content:center;height:100%;touch-action:none;overflow:visible}._editContainer_190js_1 ._editScrollArea_190js_8 ._editCanvas_190js_16{background-color:#fff;touch-action:none;position:relative}._editContainer_190js_1 ._editScrollArea_190js_8 ._editOverlay_190js_21{position:absolute;border:1px dashed red;pointer-events:none}._layer_tpuhg_1{position:absolute;border:2px solid transparent;touch-action:none;user-select:none;transition:border .1s ease-in-out;transform-origin:center;cursor:grab}._layer_tpuhg_1._selected_tpuhg_11{border:2px solid #00B3AD}._layer_tpuhg_1._selected_tpuhg_11 ._cornerControl_tpuhg_14,._layer_tpuhg_1._selected_tpuhg_11 ._resizeHandle_tpuhg_14,._layer_tpuhg_1._selected_tpuhg_11 ._rotateHandle_tpuhg_14,._layer_tpuhg_1._selected_tpuhg_11 ._deleteHandle_tpuhg_14,._layer_tpuhg_1._selected_tpuhg_11 ._editHandle_tpuhg_14{display:flex}._layer_tpuhg_1 ._cornerControl_tpuhg_14,._layer_tpuhg_1 ._resizeHandle_tpuhg_14,._layer_tpuhg_1 ._rotateHandle_tpuhg_14,._layer_tpuhg_1 ._deleteHandle_tpuhg_14,._layer_tpuhg_1 ._editHandle_tpuhg_14{font-size:1rem;position:absolute;width:20px;height:20px;background-color:#00b3ad;border-radius:50%;touch-action:none;user-select:none;cursor:pointer;transition:all .1s linear;display:none;align-items:center;justify-content:center;transform-origin:center}._layer_tpuhg_1 ._cornerControl_tpuhg_14:hover,._layer_tpuhg_1 ._resizeHandle_tpuhg_14:hover,._layer_tpuhg_1 ._rotateHandle_tpuhg_14:hover,._layer_tpuhg_1 ._deleteHandle_tpuhg_14:hover,._layer_tpuhg_1 ._editHandle_tpuhg_14:hover{transform:scale(1.3)}._layer_tpuhg_1 ._editHandle_tpuhg_14{top:-10px;left:-10px}._layer_tpuhg_1 ._editHandle_tpuhg_14>i{margin-left:2px;margin-top:2px}._layer_tpuhg_1 ._deleteHandle_tpuhg_14{top:-10px;right:-10px}._layer_tpuhg_1 ._deleteHandle_tpuhg_14>i{margin-top:1px}._layer_tpuhg_1 ._rotateHandle_tpuhg_14{bottom:-10px;left:-10px}._layer_tpuhg_1 ._rotateHandle_tpuhg_14>i{margin-top:1px}._layer_tpuhg_1 ._resizeHandle_tpuhg_14{right:-10px;bottom:-10px}._layer_tpuhg_1 ._resizeHandle_tpuhg_14>i{transform:rotate(90deg)}.editor-page{overflow:hidden}.editor-page .editor-navigation{position:fixed;top:0;width:100%}.editor-page .editor-container{flex:1;height:100%}.editor-page .editor-controls{position:fixed;bottom:0;width:100%}.editor-page .canvas-overlay{position:absolute;top:0;bottom:0;left:0;right:0;background-color:transparent;pointer-events:none;transition:background-color .75s cubic-bezier(.075,.82,.165,1)}.editor-page .canvas-overlay.darken{background-color:#000000b3;pointer-events:all}.editor-page .canvas-overlay.animateIn .canvas{animation:printIn 3s forwards}.editor-page .canvas-overlay.animateOut .canvas{animation:printOut .5s forwards}.editor-page .canvas{position:absolute;left:50%;top:calc(100% + 180px);width:325px;height:205px;transform:translate(-50%,-50%) rotate(90deg);transition:1s top cubic-bezier(.075,.82,.165,1);border-radius:10px;overflow:hidden;z-index:10;box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038}@keyframes printIn{0%{top:calc(100% + 180px)}10%{top:calc(100% + 120px)}20%{top:calc(100% + 120px)}30%{top:calc(100% + 60px)}40%{top:calc(100% + 60px)}50%{top:100%}70%{top:100%;transform:translate(-50%,-50%) rotate(90deg) scale(1)}82%{top:50%;transform:translate(-50%,-50%) rotate(0) scale(1)}to{top:50%;transform:translate(-50%,-50%) rotate(0) scale(1)}}@keyframes printOut{0%{top:50%;transform:translate(-50%,-50%) rotate(0) scale(1)}to{top:calc(0% - 180px);transform:translate(-50%,-50%) rotate(0) scale(.75)}}.editor-page .add-toolbar,.editor-page .tool-toolbar,.editor-page .print-toolbar{position:fixed;bottom:var(--control-bar-height);width:100%;z-index:-1;transform:translateY(calc(100% + var(--control-bar-height)))}.editor-page .add-toolbar.closed,.editor-page .tool-toolbar.closed,.editor-page .print-toolbar.closed{transition:.2s transform cubic-bezier(.42,.85,.49,.4)}.editor-page .add-toolbar.open,.editor-page .tool-toolbar.open,.editor-page .print-toolbar.open{transition:.2s transform cubic-bezier(.075,.82,.165,1);transform:translateY(0)}.control-toolbar{display:flex;height:80px;background-color:#000000e6;overflow-x:auto}.control-toolbar .control-toolbar-item{cursor:pointer;display:flex;width:120px;flex-direction:column;align-items:center;justify-content:center}:root{--font-body: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--font-body-size: 1.5rem;--control-bar-height: 48px;font-family:var(--font-body);line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html{font-size:62.5%}body{margin:0;min-height:100vh;font-size:var(--font-body-size);overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}