: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;background-color:#242424;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}}body{min-width:320px;min-height:100vh;margin:0}#root{width:100%;height:100%}.canvas-container{background-color:#f0f0f0;flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.toolbar{z-index:100;-webkit-user-select:none;user-select:none;background-color:#fff;border-radius:12px;align-items:center;gap:12px;padding:8px 16px;display:flex;position:absolute;box-shadow:0 4px 12px #00000026}.drag-handle{cursor:grab;color:#999;border-right:1px solid #eee;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{cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;transition:background-color .2s;display:flex}.tool-button:hover{background-color:#f0f0f0}.tool-button.active{color:#00f;background-color:#e0e0ff}.divider{background-color:#ddd;width:1px;height:24px}.color-picker{cursor:pointer;background:0 0;border:none;width:40px;height:40px;padding:0}.line-width-picker{align-items:center;gap:4px;font-size:14px;display:flex}.line-width-picker input{border:1px solid #ddd;border-radius:4px;width:45px;padding:4px}.alignment-grid-container{flex-direction:column;align-items:center;gap:4px;display:flex}.alignment-grid{background-color:#eee;border-radius:4px;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;display:grid}.align-button{cursor:pointer;background-color:#fff;border:none;border-radius:1px;width:12px;height:12px;padding:0}.align-button.active{background-color:#0078d4}.clear-button:hover{background-color:#ffe0e0}canvas{cursor:crosshair;touch-action:none;background-color:#fff;flex-grow:1}.text-input{z-index:200;resize:both;white-space:pre-wrap;background:#fff;border:1px solid #0078d4;border-radius:4px;outline:none;min-width:50px;min-height:20px;margin:0;padding:4px;font-family:inherit;position:absolute;overflow:hidden;box-shadow:0 2px 8px #0000001a}.text-align-grid{background:#f3f2f1;border-radius:4px;grid-template-rows:repeat(3,14px);grid-template-columns:repeat(3,14px);gap:2px;padding:4px;display:grid}.align-btn{cursor:pointer;background:#e1dfdd;border:1px solid #0000;border-radius:2px;width:14px;height:14px;padding:0}.align-btn:hover{background:#c8c6c4}.align-btn.active{background:#0078d4;border-color:#005a9e}