body{margin:0;padding:0;box-sizing:border-box;min-width:320px;min-height:100vh;overflow:hidden}:root{font-family:system-ui,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#000000de;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}#app{background-color:#f0f0f0;background-image:linear-gradient(#e0e0e0 .1em,transparent .1em),linear-gradient(90deg,#e0e0e0 .1em,transparent .1em);background-size:4em 4em;height:100vh;position:relative;overflow:auto}.node{position:absolute;-webkit-user-select:none;user-select:none;overflow:visible}.node textarea{position:absolute;top:0;left:0;width:100%;height:auto;resize:vertical;overflow:hidden;background:transparent;border:2px solid rgba(0,0,100,.5);outline:none;padding:4px;box-sizing:border-box}.hover-indicator:hover{fill:#0000001a}.dot{cursor:grab;touch-action:none;pointer-events:auto}.sidebar{max-width:3rem;height:100vh;background-color:#2c2c37;border-right:2px solid #3c3c3c;display:flex;flex-direction:column;justify-content:space-between;z-index:100;-webkit-user-select:none;user-select:none}.sidebar__options{display:flex;align-items:center;width:2rem;flex-direction:column;margin:0 auto;gap:2px}.sidebar__zoom{padding-bottom:0}.sidebar__zoom-text{font-size:.75rem;font-weight:700;color:#f0f0f0;text-align:center;margin-bottom:2px}.sidebar__button{padding:2px;outline:none;display:block;cursor:pointer;text-align:center;border:none;border-radius:8px;background-color:#2c2c37;color:#f0f0f0;transition:all .2s ease}.sidebar__button:hover{background-color:#3c3c3c}.sidebar__button.active{background-color:#4c4c5c;color:#fff}.sidebar__shapes-menu{position:absolute;top:5rem;left:3.5rem;display:flex;flex-direction:column;gap:.5rem;padding:8px;background-color:#2c2c37;border:1px solid #3c3c3c;border-radius:10px;box-shadow:0 4px 12px #0003;z-index:101}.style-panel{position:fixed;top:4rem;right:1rem;color:#1a1a1a;display:flex;flex-direction:column;width:250px;max-height:550px;align-items:stretch;padding:16px;gap:12px;background-color:#f7f7f8;border:1px solid rgba(0,0,0,.06);box-shadow:0 0 0 1px #0000000f,0 4px 12px #00000014,0 2px 4px #0000000a;border-radius:10px;z-index:100;overflow-y:auto}.style-panel__node-textbox{width:100%;height:100px;resize:vertical;background-color:#fafafa;border-radius:5px;border:1px solid rgba(0,0,0,.12);outline:none;font-size:14px;font-family:Arial,sans-serif;padding:8px;box-sizing:border-box;transition:border-color .15s ease}.style-panel__node-textbox:focus{border:1px solid rgba(0,0,0,.3);outline:none}.style-panel__node-textbox:hover{border:1px solid rgba(0,0,0,.3)}.style-panel__node-textbox::placeholder{color:#777}.style-row-compact{display:flex;justify-content:space-between;align-items:center;gap:8px}.style-row-compact label{font-size:14px;font-weight:500;color:#1a1a1a;flex-shrink:0}.style-row-compact__controls{display:flex;align-items:center;gap:8px}.style-input-small{width:50px;height:32px;padding:4px 8px;background-color:#fafafa;border:1px solid rgba(0,0,0,.12);border-radius:5px;font-size:14px;text-align:center;outline:none;transition:border-color .15s ease}.style-input-small:focus{border-color:#0000004d}.style-input-small:hover{border-color:#0000004d}.style-input-color{width:32px;height:32px;padding:2px;background-color:#fafafa;border:1px solid rgba(0,0,0,.12);border-radius:5px;cursor:pointer;outline:none;transition:border-color .15s ease}.style-input-color:hover{border-color:#0000004d}.style-input-color:focus{border-color:#0000004d}.border-type-buttons{display:flex;gap:4px}.border-type-btn{padding:6px;border:1px solid rgba(0,0,0,.12);background-color:#fafafa;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.border-type-btn:hover{border-color:#0000004d}.border-type-btn.active{border-color:#06c;background-color:#e6f2ff}.border-type-btn svg{display:block}.action-buttons{padding-top:2.5rem;display:flex;flex-direction:row;gap:6px}.action-button{outline:none;display:block;cursor:pointer;text-align:center;border:none;border-radius:10px;background-color:#f0f0f0}.action-button:hover{background-color:#d0d0d0}@media(width:360px){.style-panel{top:.5rem;right:.5rem;padding:10px;gap:10px}.style-input-color{height:26px;width:26px}.style-input-small{height:24px}}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translate(20px)}.label-position-slider{-webkit-appearance:none;appearance:none;width:100px;height:8px;background:#d3d3d3;outline:none;opacity:.7;border-radius:4px}.label-position-slider:hover{opacity:1}.label-position-slider:hover .label-position-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#2196f3;cursor:pointer}.label-position-slider:hover .label-position-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#2196f3;cursor:pointer}.label-position-slider:hover .label-position-value{min-width:40px;text-align:right;color:#777;font-size:14px}.path-type-buttons{display:flex;gap:4px}.path-type-button{padding:6px;border:1px solid #ddd;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;color:#666;background-color:#fafafa;display:flex;align-items:center;justify-content:center}.path-type-button:hover{background:#f5f5f5;border-color:#ccc}.path-type-button.active{border-color:#06c;background-color:#e6f2ff}.path-type-button:focus{outline:none;box-shadow:0 0 0 3px #007bff1a}.path-type-button:active{transform:translateY(1px)}.style-row-compact .path-type-buttons{margin-top:4px}.color-picker{position:fixed;padding:0 1rem 0rem;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;top:1rem;right:310px}.color-picker input{margin:1rem auto;display:flex}.color-picker label{font-weight:600;letter-spacing:-.5px}@media(width:360px){.color-picker{top:350px;right:.5rem}}.export-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none}.export-overlay__mask{position:absolute;top:0;left:0;pointer-events:none}.export-overlay__selection{position:absolute;border:2px solid #3b82f6;box-shadow:0 0 0 1px #fffc;cursor:move;background:transparent;animation:marching-ants 20s linear infinite;background-image:linear-gradient(90deg,#3b82f6 50%,transparent 50%);background-size:20px 2px;background-repeat:repeat-x;background-position:0 0,0 100%}@keyframes marching-ants{0%{background-position:0 0,0 100%}to{background-position:400px 0,-400px 100%}}.export-overlay__handle{position:absolute;width:8px;height:8px;background:#3b82f6;border:1.5px solid white;box-shadow:0 0 0 1px #0003}.export-overlay__handle--nw{top:-4px;left:-4px;cursor:nw-resize}.export-overlay__handle--n{top:-4px;left:50%;transform:translate(-50%);cursor:n-resize}.export-overlay__handle--ne{top:-4px;right:-4px;cursor:ne-resize}.export-overlay__handle--e{top:50%;right:-4px;transform:translateY(-50%);cursor:e-resize}.export-overlay__handle--se{bottom:-4px;right:-4px;cursor:se-resize}.export-overlay__handle--s{bottom:-4px;left:50%;transform:translate(-50%);cursor:s-resize}.export-overlay__handle--sw{bottom:-4px;left:-4px;cursor:sw-resize}.export-overlay__handle--w{top:50%;left:-4px;transform:translateY(-50%);cursor:w-resize}.export-overlay__dimensions{position:absolute;top:8px;left:8px;background:#3b82f6e6;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:0 2px 4px #0003}.export-overlay__toolbar{position:absolute;display:flex;gap:4px;padding:4px;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:6px;box-shadow:0 2px 12px #00000026;z-index:10000}.export-overlay__toolbar--top,.export-overlay__toolbar--bottom,.export-overlay__toolbar--inside{flex-direction:row}.export-overlay__toolbar--left,.export-overlay__toolbar--right{flex-direction:column}.export-overlay__tool-btn{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border:none;background:transparent;border-radius:4px;font-size:11px;font-weight:600;color:#64748b;cursor:pointer;transition:all .12s ease;position:relative}.export-overlay__tool-btn:hover{background:#3b82f61a;color:#3b82f6}.export-overlay__tool-btn:active{transform:scale(.95)}.export-overlay__tool-btn.active{background:#3b82f6;color:#fff}.export-overlay__tool-btn:disabled{opacity:.5;cursor:not-allowed}.export-overlay__tool-btn:disabled:active{transform:none}.export-overlay__tool-btn--danger:hover{background:#ef44441a;color:#ef4444}.export-overlay__tool-btn--danger.active{background:#ef4444;color:#fff}.export-overlay__toolbar-separator{width:1px;background:#e2e8f0;margin:4px 2px}.export-overlay__toolbar--left .export-overlay__toolbar-separator,.export-overlay__toolbar--right .export-overlay__toolbar-separator{width:auto;height:1px;margin:2px 4px}.export-overlay__instructions{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;pointer-events:none}.export-overlay__instructions p{font-size:18px;font-weight:500;margin:0 0 8px;text-shadow:0 2px 8px rgba(0,0,0,.8)}.export-overlay__instructions-hint{font-size:14px;opacity:.8}.export-overlay__selection,.export-overlay__handle,.export-overlay__toolbar{will-change:transform}.export-overlay__tool-btn[title]:hover:after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px;padding:4px 8px;background:#000000e6;color:#fff;font-size:11px;white-space:nowrap;border-radius:4px;pointer-events:none;z-index:10001}.export-overlay__toolbar--left .export-overlay__tool-btn[title]:hover:after,.export-overlay__toolbar--right .export-overlay__tool-btn[title]:hover:after{bottom:50%;left:auto;transform:translateY(50%);margin-bottom:0}.export-overlay__toolbar--left .export-overlay__tool-btn[title]:hover:after{right:100%;margin-right:8px}.export-overlay__toolbar--right .export-overlay__tool-btn[title]:hover:after{left:100%;margin-left:8px}.canvas{width:100vw;height:100vh;overflow:hidden;position:relative;cursor:grab}.canvas:active{cursor:grabbing}.mobile-toggle-editor-button{position:fixed;bottom:.5rem;right:.5rem;width:48px;height:48px;border-radius:50%;background-color:#6b7280;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 6px #0000001a;z-index:1000;transition:all .2s ease}.mobile-toggle-editor-button:active{transform:scale(.95)}.mobile-toggle-editor-button svg{width:24px;height:24px}.history-controls{position:fixed;top:1rem;right:1rem;color:#1a1a1a;display:flex;flex-direction:row;width:4.5rem;height:1.5rem;align-items:stretch;padding:.5rem;gap:.5rem;background-color:#f7f7f8;border:1px solid rgba(0,0,0,.06);box-shadow:0 0 0 1px #0000000f,0 4px 12px #00000014,0 2px 4px #0000000a;border-radius:10px;z-index:100;overflow:hidden}.history-controls__button{outline:none;display:block;margin:0 auto;cursor:pointer;text-align:center;border:none;border-radius:10px;background-color:#f0f0f0}.history-controls__button:hover{background-color:#d0d0d0}.disabled{pointer-events:none}.toolbar{position:fixed;top:1rem;left:1rem;display:flex;flex-direction:column;width:1.5rem;align-items:center;padding:8px;color:#1a1a1a;background-color:#f7f7f8;border:1px solid rgba(0,0,0,.06);box-shadow:0 0 0 1px #0000000f,0 4px 12px #00000014,0 2px 4px #0000000a;border-radius:10px;z-index:100}.toolbar__main-buttons{display:flex;flex-direction:column;align-items:center}.toolbar__button{outline:none;display:block;cursor:pointer;text-align:center;border:none;border-radius:10px;background-color:#f0f0f0}.toolbar__button:hover{background-color:#d0d0d0}.toolbar__shapes-option{position:fixed;top:1rem;left:4rem;display:flex;flex-direction:column;width:1.5rem;align-items:center;padding:8px;color:#1a1a1a;background-color:#f7f7f8;border:1px solid rgba(0,0,0,.06);box-shadow:0 0 0 1px #0000000f,0 4px 12px #00000014,0 2px 4px #0000000a;border-radius:10px;z-index:100}.toolbar__button.active{border-color:#06c;background-color:#e6f2ff}@media(width:360px){.toolbar{top:.5rem;left:.5rem}}.zoom-controls{position:fixed;bottom:1rem;left:1rem;display:flex;width:2.5rem;padding:3px;flex-direction:column;align-items:center;color:#1a1a1a;background-color:#f7f7f8;border:1px solid rgba(0,0,0,.06);box-shadow:0 0 0 1px #0000000f,0 4px 12px #00000014,0 2px 4px #0000000a;border-radius:10px;z-index:100;overflow-y:auto}.zoom-controls p{margin:4px 0;font-size:.8rem;font-weight:700}.zoom-controls__button{outline:none;display:block;margin:0 auto;cursor:pointer;text-align:center;border:none;border-radius:10px;background-color:#f0f0f0}.zoom-controls__button:hover{background-color:#d0d0d0}@media(width:360px){.zoom-controls{bottom:.5rem;left:.5rem}}