:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg-color:#fff;--text-color:#213547;--canvas-bg:#fff;--toolbar-bg:#fff;--toolbar-shadow:#00000026;--button-hover:#f0f0f0;--button-active:#e0e0ff;--divider-color:#ddd;--border-color:#ddd;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg-color:#1a1a1a;--text-color:#ffffffde;--canvas-bg:#121212;--toolbar-bg:#2d2d2d;--toolbar-shadow:#0006;--button-hover:#3d3d3d;--button-active:#4a4a4a;--divider-color:#444;--border-color:#555}}body{background-color:var(--bg-color);min-width:320px;min-height:100vh;color:var(--text-color);margin:0}#root{width:100%;height:100%}.canvas-container{background-color:var(--bg-color);flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.toolbar{background-color:var(--toolbar-bg);color:var(--text-color);box-shadow:var(--toolbar-shadow);z-index:100;-webkit-user-select:none;user-select:none;border:1px solid var(--border-color);border-radius:12px;align-items:center;gap:12px;padding:8px 16px;display:flex;position:absolute}.drag-handle{cursor:grab;color:var(--text-color);opacity:.5;border-right:1px solid var(--divider-color);align-items:center;height:24px;padding-right:8px;font-weight:700;display:flex}.drag-handle:active{cursor:grabbing}.tool-group{gap:8px;display:flex}.tool-button{width:40px;height:40px;color:var(--text-color);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;font-size:20px;transition:background-color .2s;display:flex}.tool-button:hover{background-color:var(--button-hover)}.tool-button.active{background-color:var(--button-active);color:#0078d4}.divider{background-color:var(--divider-color);width:1px;height:24px}.color-picker{border:1px solid var(--border-color);cursor:pointer;background:0 0;border-radius:4px;width:40px;height:40px;padding:0}.line-width-picker{color:var(--text-color);align-items:center;gap:4px;font-size:14px;display:flex}.line-width-picker input{border:1px solid var(--border-color);background-color:var(--toolbar-bg);width:45px;color:var(--text-color);border-radius:4px;padding:4px}.alignment-grid-container{flex-direction:column;align-items:center;gap:4px;display:flex}.alignment-grid{background-color:var(--divider-color);border-radius:4px;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;display:grid}.align-button{background-color:var(--toolbar-bg);cursor:pointer;border:none;border-radius:1px;width:12px;height:12px;padding:0}.align-button.active{background-color:#0078d4}.clear-button:hover,.delete-button:hover{color:#ff4d4d;background-color:#ff00001a}canvas{background-color:var(--canvas-bg);cursor:crosshair;touch-action:none;flex-grow:1}.text-input{background:var(--toolbar-bg);color:var(--text-color);z-index:200;resize:both;white-space:pre-wrap;min-width:50px;min-height:20px;box-shadow:var(--toolbar-shadow);border:1px solid #0078d4;border-radius:4px;outline:none;margin:0;padding:4px;font-family:inherit;position:absolute;overflow:hidden}.text-align-grid{background:var(--divider-color);border-radius:4px;grid-template-rows:repeat(3,14px);grid-template-columns:repeat(3,14px);gap:2px;padding:4px;display:grid}.align-btn{background:var(--button-hover);cursor:pointer;border:1px solid #0000;border-radius:2px;width:14px;height:14px;padding:0}.align-btn:hover{background:var(--button-active)}.align-btn.active{background:#0078d4;border-color:#005a9e}