.drawing-app-root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;width:100%;height:100%;font-weight:400;position:relative;overflow:hidden}@media (prefers-color-scheme:dark){.drawing-app-root{--lightningcss-light: ;--lightningcss-dark:initial}}.drawing-app-root *{box-sizing:border-box;border:0;outline:0;margin:0;padding:0;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;text-decoration:none;list-style:none}.drawing-app-root canvas{z-index:1;width:100%;height:100%;display:block;position:absolute;inset:0}.drawing-app-root canvas#interaction-canvas{z-index:2}.drawing-app-root #interaction-canvas.dropping{outline-offset:-.5rem;background-color:#1674aa1a;outline:2px dashed #1674aa80}.drawing-app-root .buttons-container{z-index:9999;background-color:#fff;border-radius:.4rem;gap:4px;padding:.2rem;display:flex;position:absolute;box-shadow:0 0 10px #0000001a;pointer-events:auto!important}.drawing-app-root #toolbar{bottom:.5rem;left:50%;transform:translate(-50%)}.drawing-app-root #shapes-container{position:relative}.drawing-app-root #shapes-bar{bottom:0;left:50%;transform:translate(-50%,-105%)}.drawing-app-root #shapes-bar.hidden{display:none}.drawing-app-root #canvas-options{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;top:0;left:0}.drawing-app-root #history-controls{bottom:.5rem;left:.5rem}.drawing-app-root #zoom-controls{bottom:.5rem;right:.5rem}.drawing-app-root #scale-display{width:4rem}.drawing-app-root .button{color:#1f1f1f;user-select:none;cursor:pointer;background-color:#fff;border-radius:.4rem;justify-content:center;align-items:center;padding:.6rem;font-size:.9rem;font-weight:500;display:flex;pointer-events:auto!important}.drawing-app-root .button.small svg{width:20px;height:20px}.drawing-app-root .button.small{padding:.5rem}.drawing-app-root .button:hover,.drawing-app-root .button.active{background-color:#f1f1f1}.drawing-app-root #toolbar .button svg{transition:transform .1s ease-in-out}.drawing-app-root #toolbar :is(.button:hover,.button.active) svg{transform:translateY(-2px)}.drawing-app-root .button:active,.drawing-app-root .button.pressed{background-color:#e0e0e0}.drawing-app-root .button.active{border-bottom-right-radius:0;border-bottom-left-radius:0;position:relative}.drawing-app-root .button.active:after{content:"";background-color:#555;border-bottom-right-radius:0;border-bottom-left-radius:0;width:100%;height:3px;position:absolute;bottom:-3px;left:0}.drawing-app-root #shapes-bar .button.active:after{display:none}.drawing-app-root .buttons-container.vertical-sidebar{flex-direction:column;gap:.5rem;max-height:80%;padding:.5rem;overflow-y:auto}.drawing-app-root .vertical-sidebar.left{top:50%;left:.5rem;transform:translateY(-50%)}.drawing-app-root .vertical-sidebar.right{width:180px;top:50%;right:.5rem;transform:translateY(-50%)}.drawing-app-root .sidebar-header{border-bottom:1px solid #eee;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-bottom:.5rem;display:flex}.drawing-app-root .layers-list{flex-direction:column;gap:4px;display:flex}.drawing-app-root .layer-item{cursor:pointer;color:#333;background:#f9f9f9;border-radius:4px;align-items:center;gap:8px;padding:6px 8px;font-size:.8rem;display:flex}.drawing-app-root .layer-item:hover{background:#f0f0f0}.drawing-app-root .layer-item.active{background:#e6f3ff;border:1px solid #1674aa}.drawing-app-root .layer-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.drawing-app-root .icon-button{cursor:pointer;color:#666;background:0 0;border:none;align-items:center;padding:2px;display:flex}.drawing-app-root .icon-button:hover{color:#000}.drawing-app-root .color-presets{grid-template-columns:repeat(2,1fr);gap:4px;margin-top:.5rem;display:grid}.drawing-app-root .color-swatch{cursor:pointer;border:1px solid #ddd;border-radius:4px;width:24px;height:24px}.drawing-app-root .color-swatch.active{border:2px solid #000;transform:scale(1.1)}.drawing-app-root .layer-opacity-slider{cursor:pointer;width:60px;height:4px;margin-left:auto}.drawing-app-root .button:disabled{opacity:.3;cursor:default}