*{margin:0;padding:0;box-sizing:border-box}*{scrollbar-width:thin;scrollbar-color:#2a2a2a transparent}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:4px}*::-webkit-scrollbar-thumb:hover{background:#3a3a3a}*::-webkit-scrollbar-corner{background:transparent}html,body,#root{height:100%;overflow:hidden;background:#000;color:#bbb;font-family:system-ui,-apple-system,sans-serif;font-size:13px;cursor:default;-webkit-user-select:none;user-select:none}.app-wrapper{height:100%;display:flex;flex-direction:column;overflow:hidden}.titlebar{display:flex;align-items:center;height:36px;min-height:36px;background:#000;border-bottom:1px solid #111111;-webkit-app-region:drag;app-region:drag;padding-left:env(titlebar-area-x,0);width:env(titlebar-area-width,100%)}.titlebar-icon{height:16px;width:auto;object-fit:contain;pointer-events:none;display:block;margin-left:16px}.titlebar-content{display:flex;align-items:center;gap:8px;flex:1;padding:0 12px;min-width:0}.titlebar-title{font-weight:700;font-size:12px;color:#fff;letter-spacing:.5px}.titlebar-badge{font-size:9px;font-weight:600;color:#000;background:#f0f;padding:1px 5px;border-radius:3px;letter-spacing:.5px}.titlebar-actions{display:flex;align-items:center;gap:2px;margin-left:12px;-webkit-app-region:no-drag;app-region:no-drag}.titlebar-button{background:transparent;border:none;color:#888;font-size:11px;font-family:inherit;padding:4px 8px;border-radius:3px;cursor:pointer;letter-spacing:.2px}.titlebar-button:hover{background:#1a1a1a;color:#ddd}.app{flex:1;overflow:hidden}.ResizeablePanelGroup{display:flex;height:100%;width:100%}.ResizeablePanel{overflow:hidden}[data-resizable-panel-id=left-sidebar]{min-width:80px}[data-resizable-panel-id=right-sidebar]{min-width:180px}.sidebar{height:100%;background:#000;display:flex;flex-direction:column;overflow-y:auto}.sidebar.sidebar-right{border-right:none}.sidebar-section{flex-shrink:0;padding:10px}.sidebar-section-fill{flex:1;overflow-y:auto;min-height:150px}.panel-scroll{padding:10px;overflow-y:auto;overflow-x:hidden;height:100%;display:flex;flex-direction:column;gap:12px}.resize-handle-v{width:4px;background:#000;cursor:col-resize;transition:background .15s;border:none;outline:none}.resize-handle-v:hover,.resize-handle-v[data-resize-handle-active]{background:#47d}.resize-handle-h{height:4px;background:#000;cursor:row-resize;transition:background .15s;border:none;outline:none}.resize-handle-h:hover,.resize-handle-h[data-resize-handle-active]{background:#47d}.toolbar-section{display:flex;flex-direction:column;gap:4px;container-type:inline-size}.toolbar-section+.toolbar-section{margin-top:8px}.toolbar-label{color:#666;text-transform:uppercase;letter-spacing:.5px;display:none}.sidebar button{background:transparent;color:#bbb;border:1px solid transparent;border-radius:2px;padding:5px 8px;font-size:12px}.sidebar button:hover:not(:disabled){background:#fff1}.sidebar button.active{background:#6068ff66!important;color:#6ca4ff;border-color:transparent}.sidebar button:disabled{opacity:.3;cursor:default}.tools-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:0;touch-action:none;-webkit-user-select:none;user-select:none}@container (min-width: 100px){.tools-grid{grid-template-columns:repeat(2,1fr)}}@container (min-width: 140px){.tools-grid{grid-template-columns:repeat(3,1fr)}}.tools-grid button,.tools-grid .tool-btn{padding:10px}.tool-btn{background:transparent;color:#bbb;border:1px solid transparent;border-radius:2px;padding:5px 8px;font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;display:flex;align-items:center;justify-content:center}.tool-btn:hover{background:#fff1}.tool-btn.selected{background:#6068ff66!important;color:#6ca4ff;border-color:transparent}.brush-sizes{display:grid;grid-template-columns:repeat(2,1fr);gap:0;touch-action:none;-webkit-user-select:none;user-select:none}@container (min-width: 60px){.brush-sizes{grid-template-columns:repeat(3,1fr)}}@container (min-width: 120px){.brush-sizes{grid-template-columns:repeat(6,1fr)}}.brush-size-btn{display:flex;align-items:center;justify-content:center;height:22px;background:transparent;border:1px solid transparent;border-radius:2px;cursor:pointer}.brush-size-btn:hover{background:#fff1}.brush-size-btn.selected{background:#6068ff66}.brush-size-dot{display:block;background:#bbb;border-radius:50%}.brush-size-btn.selected .brush-size-dot{background:#6ca4ff}.effect-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}.effect-grid button{padding:4px}.palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(20px,1fr));touch-action:none;-webkit-user-select:none;user-select:none}@container (min-width: 60px){.palette{grid-template-columns:repeat(3,1fr)}}@container (min-width: 120px){.palette{grid-template-columns:repeat(auto-fit,minmax(25px,1fr))}}.palette-button{all:unset;display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:2px;border-radius:2px;box-sizing:border-box}.palette-color{width:100%;height:100%;border-radius:2px;display:block}.palette-button:hover{background-color:#ffffff4d}.palette-button.selected{background-color:#ff4ed9;box-shadow:0 0 0 1px #000}.sidebar input[type=color]{width:100%;height:28px;border:none;border-radius:2px;background:#0a0a0a;padding:2px}.palette-controls{display:flex;align-items:center;gap:4px}.palette-controls input[type=color]{width:28px!important;height:22px!important;padding:0!important;border:none;cursor:pointer;flex-shrink:0}.palette-shader-select{flex:1;min-width:0;background:#0a0a0a;color:#bbb;border:1px solid #1a1a1a;border-radius:2px;padding:2px 4px;font-size:11px}.palette-add{cursor:pointer}.palette-add-icon{display:flex;align-items:center;justify-content:center;border:1px dashed #333;color:#555;font-size:14px;background:transparent}.palette-add:hover .palette-add-icon{border-color:#666;color:#aaa}.sidebar input[type=range]{width:100%;accent-color:#4466cc}.layer-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto}.layer-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:10px;border-radius:2px;background:#0a0a0a;border:1px solid transparent}.layer-row:hover{background:#111}.layer-row.layer-active{background:#0a0a1a;border-color:#46c}.layer-drop-indicator{position:absolute;left:0;right:0;top:-1px;height:2px;background:#48f;pointer-events:none;z-index:20}.layer-drag-handle{cursor:grab;color:#444;font-size:12px;line-height:1;padding:2px;flex-shrink:0;-webkit-user-select:none;user-select:none}.layer-drag-handle:hover{color:#888}.layer-drag-handle:active{cursor:grabbing}.layer-vis{width:22px;height:22px;padding:0!important;flex-shrink:0}.layer-vis.layer-hidden{opacity:.3}.layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-effect-select{background:#0a0a0a;color:#bbb;border:1px solid #1a1a1a;border-radius:2px;padding:1px 3px;flex-shrink:0;max-width:50px}.brush-select{background:#0a0a0a;color:#bbb;border:1px solid #1a1a1a;border-radius:2px;padding:1px 3px}.layer-fx-btn{width:20px!important;height:20px!important;padding:0!important;font-size:11px!important;line-height:1;flex-shrink:0}.layer-fx-params{width:100%;display:flex;flex-direction:column;gap:4px;padding:6px 4px 2px}.layer-fx-param-row{display:flex;align-items:center;gap:4px;font-size:11px}.layer-fx-param-label{color:#666;width:50px;flex-shrink:0}.layer-fx-param-row input[type=range]{flex:1;height:12px}.layer-fx-param-value{color:#888;width:32px;text-align:right;font-size:10px;flex-shrink:0}.library-tree{display:flex;flex-direction:column;gap:1px;overflow-y:auto}.library-folder{display:flex;align-items:center;gap:4px;padding:4px 6px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:11px;color:#999}.library-folder:hover{color:#ccc}.library-folder-arrow{font-size:8px;width:10px;flex-shrink:0;text-align:center}.library-folder-name{font-weight:600;text-transform:uppercase;letter-spacing:.5px}.library-folder-contents{display:flex;flex-direction:column;gap:1px}.library-item{display:flex;align-items:center;gap:4px;padding:3px 6px 3px 20px;cursor:pointer;border-radius:2px;border:1px solid transparent}.library-item:hover{background:#111}.library-item.library-item-active{background:#0a0a1a;border-color:#46c}.library-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.library-item-tag{color:#444;font-size:11px;flex-shrink:0}.layer-actions{display:flex;gap:1px}.layer-actions button{width:18px;height:18px;padding:0!important}.canvas-area{height:100%;overflow:hidden;position:relative}.canvas-area canvas{display:block;width:100%;height:100%}.shader-editor-panel{height:100%;display:flex;flex-direction:column;background:#1a1a1a;overflow:hidden}.shader-editor-header{display:flex;align-items:center;padding:4px 10px;background:#111;border-bottom:1px solid #111;flex-shrink:0}.shader-editor-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#888}.shader-editor-hint{font-size:11px;color:#555;margin-left:auto}.shader-status{font-size:11px;margin-left:10px;font-family:JetBrains Mono,Fira Code,monospace}.shader-status-ok{color:#9ece6a}.shader-status-err{color:#f7768e;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shader-editor-container{flex:1;overflow:hidden}.shader-editor-container .cm-editor{height:100%}.shader-editor-container .cm-editor.cm-focused{outline:none}.shader-editor-container .cm-editor{-webkit-user-select:text;user-select:text}.shader-editor-container .cm-content{user-select:text;-webkit-user-select:text}.context-menu{position:fixed;background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:4px 0;min-width:160px;z-index:1000;box-shadow:0 4px 12px #00000080}.context-menu-item{display:block;width:100%;padding:6px 12px;background:none;border:none;color:#bbb;font-size:12px;text-align:left;cursor:pointer}.context-menu-item:hover:not(:disabled){background:#fff1;color:#fff}.context-menu-item:disabled{opacity:.35;cursor:default}.context-menu-separator{height:1px;background:#333;margin:4px 0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:15vh;outline:none}.modal{background:#000;border-radius:6px;width:360px;box-shadow:0 8px 24px #000000b3}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid #111}.modal-title{font-weight:600;font-size:13px;color:#ddd}.modal-header-right{display:flex;align-items:center;gap:8px}.modal-close{background:none;border:none;color:#666;font-size:18px;cursor:pointer;padding:0 2px;line-height:1}.modal-close:hover:not(:disabled){color:#bbb}.modal-close:disabled{opacity:.4;cursor:not-allowed}.modal-body{padding:16px 14px;display:flex;flex-direction:column;gap:12px}.export-modal-dims{font-size:11px;color:#666}.export-modal-tabs{display:flex;border-bottom:1px solid #111}.export-modal-tab{flex:1;background:none;border:none;color:#888;font-size:12px;padding:8px 0;cursor:pointer;border-bottom:2px solid transparent}.export-modal-tab:hover{color:#bbb}.export-modal-tab.active{color:#fff;border-bottom-color:#47d}.export-modal-field{display:flex;align-items:center;gap:8px}.export-modal-label{font-size:12px;color:#888;white-space:nowrap}.export-modal-field input[type=range]{flex:1;accent-color:#4466cc}.export-modal-value{font-size:12px;color:#bbb;min-width:24px;text-align:right}.export-modal-action{width:100%;padding:8px 0;background:#47d;color:#fff;border:none;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer}.export-modal-action:hover{background:#58e}.export-preview{width:100%;height:200px;background:linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#1a1a1a;border:1px solid #1a1a1a;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}.export-preview img{max-width:100%;max-height:100%;image-rendering:pixelated;display:block}.export-modal-progress{width:100%;height:4px;background:#0a0a0a;border-radius:2px;overflow:hidden}.export-modal-progress-bar{height:100%;background:#47d;transition:width 80ms linear}.export-modal-action:disabled{opacity:.6;cursor:not-allowed}.export-modal-secondary:disabled{opacity:.5;cursor:not-allowed}.export-modal-note{margin:0;color:#888;font-size:12px;line-height:1.5}.export-modal-checkbox{display:flex;align-items:center;gap:6px;font-size:12px;color:#bbb;cursor:pointer;-webkit-user-select:none;user-select:none}.export-modal-checkbox input[type=checkbox]{accent-color:#4477dd;cursor:pointer}.settings-section{display:flex;flex-direction:column;gap:8px}.settings-section+.settings-section{margin-top:4px;padding-top:12px;border-top:1px solid #2a2a2a}.settings-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#888;margin:0}.settings-row{display:flex;flex-direction:column;gap:6px}.settings-label{font-size:12px;color:#bbb}.settings-checkbox{display:flex;align-items:center;gap:6px;font-size:12px;color:#bbb;cursor:pointer;-webkit-user-select:none;user-select:none}.settings-checkbox input[type=checkbox]{accent-color:#4477dd;cursor:pointer}.info-text{margin:0;color:#bbb;font-size:12px;line-height:1.5}.info-text-muted{color:#777}.info-image{display:block;width:100%;height:auto;border-radius:4px;image-rendering:pixelated}.export-preview-empty{font-size:12px;color:#666}.export-modal-secondary{width:100%;padding:6px 0;background:transparent;color:#bbb;border:1px solid #2a2a2a;border-radius:4px;font-size:12px;cursor:pointer}.export-modal-secondary:hover{background:#fff1}