:root{--background-color: #f0f0f0;--canvas-background: #ffffff;--ui-background: #ffffff;--border-color: #e0e0e0;--text-color: #333333;--icon-color: #555555;--accent-color: #6a82fb;--accent-color-light: #e6e9ff;--shadow-color: rgba(0, 0, 0, .1);--danger-color: #ff4d4d}body.dark{--background-color: #2c2f33;--canvas-background: #23272a;--ui-background: #36393f;--border-color: #42464d;--text-color: #ffffff;--icon-color: #b9bbbe;--accent-color: #7289da;--accent-color-light: #40444b;--shadow-color: rgba(0, 0, 0, .3);--danger-color: #f04747}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--background-color);color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;transition:background-color .3s ease}#root{width:100vw;height:100vh;position:relative}canvas{display:block;background-color:var(--canvas-background);transition:background-color .3s ease}.ui-container{position:fixed;padding:8px;background-color:var(--ui-background);border-radius:8px;box-shadow:0 4px 12px var(--shadow-color);border:1px solid var(--border-color);display:flex;align-items:center;gap:8px;-webkit-user-select:none;user-select:none;z-index:10;transition:background-color .3s ease,border-color .3s ease}#top-left-menu{top:16px;left:16px;padding:6px;z-index:1000}.sidebar-wrapper{position:fixed;left:16px;top:76px;bottom:20px;display:flex;flex-direction:column;gap:16px;justify-content:flex-start;pointer-events:none;z-index:200;overflow:visible}#left-controls,#action-controls{pointer-events:auto;position:relative;top:auto!important;left:auto!important;bottom:auto!important;right:auto!important;margin:0;transform:none}#action-controls{padding:6px;gap:4px;flex-direction:column;flex-shrink:0}#left-controls{flex-direction:column;padding:6px;gap:4px;flex-shrink:1;min-height:0}#settings-panel{position:fixed;top:50%;left:76px;transform:translateY(-50%);z-index:11;width:280px;flex-direction:column;align-items:flex-start;gap:16px}.dropdown-menu{position:absolute;top:100%;left:0;margin-top:8px;background-color:var(--ui-background);border:1px solid var(--border-color);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;z-index:1000;width:260px;max-width:calc(100vw - 32px);box-shadow:0 4px 12px var(--shadow-color);max-height:calc(100vh - 100px);overflow-y:auto}.dropdown-menu::-webkit-scrollbar{display:none}.dropdown-item{padding:8px 12px;text-align:left;background:none;border:none;color:var(--text-color);cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s;display:flex;align-items:center;gap:8px}.dropdown-item:hover{background-color:var(--accent-color-light)}#settings-panel h3,#settings-panel h4{margin:0;font-size:16px;color:var(--text-color);width:100%;border-bottom:1px solid var(--border-color);padding-bottom:8px;font-weight:600;transition:color .3s ease,border-color .3s ease}#settings-panel h4{font-size:14px;border:none;padding-bottom:0;margin-bottom:4px;font-weight:500}.settings-section{width:100%;display:flex;flex-direction:column;gap:8px}.theme-selector{display:flex;gap:8px;width:100%}.theme-button{flex:1;padding:8px;border:1px solid var(--border-color);border-radius:6px;background-color:transparent;color:var(--text-color);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.theme-button.active{background-color:var(--accent-color-light);border-color:var(--accent-color);color:var(--accent-color);font-weight:500}.hotkey-list{display:grid;grid-template-columns:1fr auto;gap:6px 16px;font-size:14px;width:100%}.hotkey-list span:first-child{color:var(--text-color);transition:color .3s ease}.hotkey-list span:last-child{font-family:monospace;background-color:var(--background-color);padding:2px 6px;border-radius:4px;border:1px solid var(--border-color);color:var(--icon-color);transition:background-color .3s ease,border-color .3s ease,color .3s ease}.clear-button{width:100%;padding:8px;border:1px solid var(--danger-color);border-radius:6px;background-color:transparent;color:var(--danger-color);cursor:pointer;font-weight:500;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:var(--danger-color);color:#fff}#properties-panel{position:fixed;top:16px;left:50%;transform:translate(-50%);flex-direction:row;flex-wrap:wrap;max-width:calc(100vw - 120px);width:max-content;justify-content:center;padding:4px 8px;gap:12px;overflow-x:hidden;-ms-overflow-style:none;box-shadow:none;align-items:center;z-index:100}#properties-panel::-webkit-scrollbar{display:none}#zoom-controls{bottom:16px;right:16px;left:auto;flex-direction:row;gap:4px;padding:4px}#zoom-controls button{background-color:transparent;border:none;cursor:pointer;padding:4px;border-radius:6px;display:flex;justify-content:center;align-items:center;transition:background-color .2s ease;font-size:12px;min-width:28px;height:28px;color:var(--icon-color)}#zoom-controls button:hover{background-color:var(--background-color)}#zoom-controls button svg{width:14px;height:14px}.tool-button{background-color:transparent;border:none;cursor:pointer;padding:6px;border-radius:6px;display:flex;justify-content:center;align-items:center;transition:background-color .2s ease,color .2s ease,opacity .2s ease;width:36px;height:36px}.property-item button{background-color:transparent;border:none;cursor:pointer;padding:4px;border-radius:6px;display:flex;justify-content:center;align-items:center;transition:background-color .2s ease,color .2s ease,opacity .2s ease;width:28px;height:28px}.tool-button svg,.property-item svg{width:20px;height:20px;color:var(--icon-color);transition:color .3s ease}.property-item button svg{width:16px;height:16px}.tool-button:hover,.property-item button:hover{background-color:var(--background-color)}.tool-button.active,.property-item button.active{background-color:var(--accent-color-light)}.tool-button.active svg,.property-item button.active svg{color:var(--accent-color)}.tool-group{position:relative;display:flex;flex-direction:column;align-items:center}.submenu{position:absolute;left:100%;top:0;background-color:var(--ui-background);border:1px solid var(--border-color);border-radius:8px;padding:4px;display:none;flex-direction:column;gap:4px;box-shadow:4px 0 12px var(--shadow-color);margin-left:8px;z-index:20}.submenu.visible{display:flex}.style-button{padding:4px;margin-left:2px}.property-item{display:flex;align-items:center;gap:4px;flex-shrink:0}.property-item label{font-size:12px;white-space:nowrap}.property-item input[type=color]{width:26px;height:26px;border:none;padding:0;border-radius:4px;cursor:pointer;background-color:transparent}.property-item input[type=range]{cursor:pointer;height:20px;width:75px}.property-item input[type=number]{width:50px;padding:2px 6px;border-radius:4px;border:1px solid var(--border-color);background-color:var(--background-color);color:var(--text-color);font-size:12px;height:28px;-moz-appearance:textfield}.property-item input[type=number]::-webkit-outer-spin-button,.property-item input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.property-item input[type=number].font-size-input{width:65px}.custom-input-group{display:flex;align-items:center;gap:2px}.property-item select{padding:2px 6px;border-radius:4px;border:1px solid var(--border-color);background-color:var(--background-color);color:var(--text-color);cursor:pointer;font-size:12px;height:28px}.color-section{display:flex;align-items:center;border:1px solid var(--border-color);border-radius:4px;padding:4px 6px;background-color:#00000005;height:30px}.color-palette{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}.color-swatch{width:12px;height:12px;border-radius:2px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;box-shadow:none;transition:transform .1s ease;flex-shrink:0}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--accent-color);box-shadow:0 0 0 1px var(--accent-color);transform:none}.color-swatch input[type=color]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.property-item input[type=color]::-webkit-color-swatch-wrapper{padding:0}.property-item input[type=color]::-webkit-color-swatch{border:1px solid var(--border-color);border-radius:4px}.color-toggle{display:flex;background-color:transparent;border-radius:4px;padding:2px;gap:12px;border:none;margin-right:6px;height:28px;align-items:center}.color-toggle-btn{display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);background:var(--ui-background);border-radius:3px;cursor:pointer;color:var(--icon-color);transition:all .2s ease;padding:0 12px;font-size:11px;font-weight:500;opacity:.8;height:24px;width:auto!important}.color-toggle-btn:hover{opacity:1;border-color:var(--accent-color)}.color-toggle-btn.active{background-color:var(--ui-background);color:var(--accent-color);border-color:var(--accent-color);box-shadow:0 1px 2px #0000001a;opacity:1;font-weight:600}body.dark .color-toggle-btn.active{background-color:var(--ui-background);box-shadow:0 1px 2px #0000004d}.property-label-static{font-size:12px;color:var(--icon-color);font-weight:600;margin-right:6px;padding-left:2px}.delete-button{background-color:transparent;border:1px solid transparent}.delete-button svg{color:var(--danger-color)}.delete-button:hover:not(:disabled){background-color:var(--danger-color)}.delete-button:hover:not(:disabled) svg{color:#fff}.delete-button:disabled{cursor:not-allowed;opacity:.5}#text-editor{border:1px dashed var(--accent-color);outline:none;padding:0;margin:0;background:#fffffff2;overflow:hidden;white-space:pre;resize:none;z-index:20}body.dark #text-editor{background:#23272af2;color:var(--text-color)}.property-label{font-size:12px;color:var(--icon-color);font-weight:500;margin-bottom:2px}.vertical-separator{width:1px;height:20px;background-color:var(--border-color);margin:0 4px;flex-shrink:0}.value-display{font-size:12px;min-width:16px;text-align:center;color:var(--text-color);font-variant-numeric:tabular-nums}#about-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:100}#about-panel{flex-direction:column;align-items:flex-start;gap:16px;width:90%;max-width:600px;max-height:80vh;padding:24px;position:relative}#about-panel h3{margin:0;font-size:18px;color:var(--text-color);width:100%;padding-bottom:8px;font-weight:600;transition:color .3s ease}.about-content{overflow-y:auto;font-size:14px;line-height:1.6;width:100%;padding-right:10px}.about-content h4{margin-top:16px;margin-bottom:8px}.about-content ul{padding-left:20px;margin-top:0}.about-content ul ul{margin-top:4px;margin-bottom:8px}.about-content li{margin-bottom:4px}#about-panel .close-button{position:absolute;top:8px;right:8px;background:none;border:none;font-size:24px;line-height:1;color:var(--icon-color);cursor:pointer;padding:4px;width:32px;height:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:background-color .2s ease,color .2s ease}#about-panel .close-button:hover{background-color:var(--background-color);color:var(--text-color)}