.app-root{width:100vw;height:100vh;overflow:hidden;position:relative;display:flex}.main-container{flex:1;height:100%;position:relative;z-index:1;display:flex;transition:width .3s ease}.main-container.layout-split-horizontal{flex-direction:row}.main-container.layout-split-horizontal .editor-container{order:1}.main-container.layout-split-horizontal .preview-container{order:2}.main-container.layout-split-vertical{flex-direction:column}.main-container.layout-split-vertical .preview-container{order:1}.main-container.layout-split-vertical .editor-container{order:2}.main-container.layout-stack{flex-direction:row;position:relative}.layout-stack .preview-container{position:absolute;inset:0;z-index:0}.layout-stack .editor-container{position:relative;z-index:1;background-color:transparent}.layout-stack .editor-container.inspector-open{width:calc(100% - 320px);margin-right:320px}.preview-container{flex:1;background-color:#000;overflow:hidden;position:relative;min-width:300px;min-height:200px}.editor-container{flex:1;background-color:transparent;overflow:hidden;position:relative;width:100%;height:100%;transition:margin-right .3s ease}.editor-container.inspector-open{width:calc(100% - 320px)}.layout-split-horizontal .editor-container,.layout-split-vertical .editor-container{background-color:var(--ui-bg);min-width:400px}.layout-split-vertical .editor-container,.layout-split-vertical .preview-container{min-width:0;min-height:250px}.right-controls{position:relative;z-index:10;display:flex;flex-direction:column;align-items:flex-end;width:auto;transition:width .3s ease;overflow:hidden}.right-controls .open-inspector-button{position:fixed;top:16px;right:16px;z-index:15}.right-controls .fullscreen-toggle-button{position:fixed;top:66px;right:16px;z-index:15}.main-container.layout-stack+.right-controls .open-inspector-button{top:86px}.main-container.layout-stack+.right-controls .fullscreen-toggle-button{top:136px}.tool-button{padding:10px;width:40px;height:40px;font-size:16px;background-color:var(--tool-button-bg);color:var(--tool-button-text);border:0;border-radius:12px;cursor:pointer}.tool-button .material-icons{font-size:20px;line-height:1;display:block}.ui-toggle-button{position:fixed;right:16px;bottom:16px;z-index:50;padding:10px;display:flex;align-items:center;justify-content:center}.main-container.ui-hidden .editor-container,.right-controls.ui-hidden *{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.main-container.ui-hidden~.ui-toggle-button,.right-controls.ui-hidden~.ui-toggle-button{opacity:1;pointer-events:auto}.main-container.ui-hidden~.ui-toggle-button{opacity:.1}.main-container.ui-hidden .preview-container{position:fixed;inset:0;width:100vw;height:100vh;z-index:5;background-color:#000}.main-container.layout-stack.ui-hidden .preview-container{z-index:20}.code-editor-wrapper{height:100%;width:100%;position:relative;overflow:hidden;transition:width .3s ease}.cm-root{height:100%;width:100%;transition:width .3s ease}.cm-root .cm-editor{height:100%!important;width:100%!important;transition:width .3s ease}.cm-root .cm-scroller{height:100%!important;width:100%!important;transition:width .3s ease;scrollbar-color:rgba(193,193,193,clamp(0,1,.4 + .4 * var(--ui-opacity))) transparent}.cm-root .cm-content{width:100%!important;min-height:100%!important;transition:width .3s ease}.tabs{display:flex;background-color:var(--tab-bg);border-bottom:1px solid var(--tab-border);height:40px;flex-shrink:0}.tab{display:flex;align-items:center;padding:8px;background-color:transparent;border-right:1px solid var(--tab-border);cursor:pointer;width:100%;min-width:15px;position:relative;border-top:3px solid transparent;-webkit-user-select:none;user-select:none}.tab-checkbox{margin-right:6px!important;min-width:16px!important;width:16px!important;height:16px!important}.tab.drag-over{border-top:3px solid var(--tab-drag-over-border)}.tab.active{background-color:var(--tab-active-bg);border-top:3px solid var(--tab-drag-over-border);z-index:2}.tab-label{color:var(--tab-c);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.tab-label.active{color:var(--tab-active-c);font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.25)}.tab-input{background-color:var(--tab-input-bg);border:1px solid var(--tab-input-border);color:var(--tab-c);font-size:14px;width:100%;outline:none;padding:2px 4px;border-radius:2px}.tab-label.error{color:#f9558f;font-weight:700}.error-count{color:#ffaac7;background-color:#dc267f99;font-weight:700;font-size:11px;margin-left:8px;width:16px;height:16px;line-height:16px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0 5px;box-sizing:border-box;position:relative;top:-1px}.remove-button{margin-left:8px;background-color:transparent;border:none;color:var(--tab-button-fg);cursor:pointer;font-size:18px;padding:2px;border-radius:2px;opacity:.9}.add-button{display:flex;align-items:center;justify-content:center;padding:8px 12px;background-color:transparent;border:none;color:var(--tab-button-fg);cursor:pointer;font-size:18px;min-width:40px}.empty-pass-placeholder{height:100%;display:flex;align-items:center;justify-content:center}.add-first-pass{padding:12px 24px;background-color:var(--tab-drag-over-border);color:var(--tab-c);border:none;border-radius:4px;cursor:pointer;font-size:14px}.tabbed-editor-root{height:100%;width:100%;display:flex;flex-direction:column;transition:width .3s ease}.editor-pane{flex:1;overflow:hidden;width:100%;height:100%;transition:width .3s ease;display:flex;flex-direction:column}.shader-type-tabs{display:flex;background-color:var(--tab-bg);border-bottom:1px solid var(--tab-border);height:32px;flex-shrink:0}.shader-type-tab{display:flex;align-items:center;justify-content:center;padding:6px 16px;background-color:transparent;border:none;border-right:1px solid var(--tab-border);cursor:pointer;font-size:12px;color:var(--tab-c);transition:background-color .2s ease;-webkit-user-select:none;user-select:none;min-width:150px;gap:10px}.vertex-count-input{background-color:transparent;border:1px solid var(--tab-border);color:var(--tab-c);font-size:11px;width:50px;padding:2px 4px;border-radius:3px;outline:none;text-align:center}.vertex-count-input:focus{border-color:var(--tab-drag-over-border)}.vertex-count-input:disabled{opacity:.5}.shader-type-tab:hover{background-color:#ffffff0d}.shader-type-tab.active{color:#fff;font-weight:700;background-color:var(--tab-active-bg);border-top:2px solid var(--tab-drag-over-border);z-index:1}.shader-type-tab.error,.shader-type-tab.error:hover{color:#f9558f;font-weight:700}.shader-subtab-count{margin-left:8px;width:18px;height:18px;line-height:18px;font-size:11px}.draw-mode-selector{display:flex;align-items:center;gap:8px;margin-left:auto;padding-right:12px}.draw-mode-label{font-size:11px;color:var(--tab-c);white-space:nowrap}.draw-mode-select{background-color:transparent;border:1px solid var(--tab-border);color:var(--tab-c);font-size:11px;padding:4px 8px;border-radius:3px;outline:none;cursor:pointer;min-width:120px}.draw-mode-select:hover{background-color:#ffffff0d}.draw-mode-select:focus{border-color:var(--tab-drag-over-border);background-color:#ffffff14}.draw-mode-select option{background-color:var(--tab-bg);color:var(--tab-c)}.webgl-canvas-container,.webgl-canvas-element{width:100%;height:100%;display:block}.property-editor{background:#0000000d;border:1px solid rgba(255,255,255,.1);padding:8px 14px}.property-editor.disabled{opacity:.5}.property-editor-header{display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:6px;padding-bottom:6px}.property-type-header{font-size:12px;font-weight:700;color:#fff;flex-grow:1}.property-name-label{flex:1;font-size:14px;font-weight:700;color:#fff}.property-delete-button{background:none;border:none;color:#ff6b6b;font-size:18px;cursor:pointer;padding:4px;border-radius:4px;transition:background .2s ease}.property-delete-button:hover{background:#ff6b6b1a}.property-content{display:flex;flex-direction:column;gap:12px}.property-field-control{background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:6px 8px;color:#fff;font-size:12px}.property-field-control:focus{outline:none;border-color:var(--accent-color)}.ui-toggle{-webkit-appearance:none;appearance:none;width:15px;height:15px;padding:0;margin:0;display:inline-block;vertical-align:middle;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:4px;position:relative;cursor:pointer}.ui-toggle:checked{background:var(--accent-color);border-color:var(--accent-color)}.ui-toggle:checked:after{content:"";position:absolute;left:4px;top:2px;width:3px;height:6px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.time-property-editor,.framecount-property-editor{border-left:3px solid #FFC107}.input-property-editor{border-left:3px solid #2196F3}.spectrum-property-editor,.waveform-property-editor{border-left:3px solid #e32a62}.custom-property-editor{border-left:3px solid #dddddd}.spectrum-visualization{background:#0000004d;border-radius:4px;padding:8px;margin:8px 0;height:50px}.spectrum-bars{display:flex;align-items:flex-end;justify-content:space-between;height:40px;gap:1px;overflow:hidden}.spectrum-bar{flex:1;background:linear-gradient(to top,#9c27b0,#e91e63,#ff5722);min-height:1px;transition:height .1s ease-out}.property-content .keyboard-visualizer{margin-top:10px}.property-content .keyboard-visualizer-label{font-size:0px}.property-content .keyboard-visualizer-key{background-color:transparent;border-color:#505050}.property-content .keyboard-visualizer-key.pressed{border-color:var(--accent-color);background-color:var(--accent-color)}.resolution-property-editor{border-left:3px solid #4CAF50}.prevpass-property-editor,.prevframe-property-editor{border-left:3px solid #FF9800}.camera-property-editor{border-left:3px solid #2196F3}.camera-controls{margin:8px 0}.property-button{background:var(--button-bg);border:1px solid var(--button-border);color:#fff;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;transition:background .2s ease}.property-button:hover{background:var(--button-hover-bg)}.property-button:disabled{opacity:.5;cursor:not-allowed}.camera-error{color:#ff6b6b;font-size:11px;margin-top:4px;padding:4px;background:#ff6b6b1a;border-radius:4px}.camera-preview{margin-top:8px;border-radius:4px;overflow:hidden;background:#0000004d}.camera-preview-canvas{display:block;width:100%;height:auto;border-radius:4px}.info-section{padding:8px;background:#ffffff0d;border-radius:4px}.info-section small{color:#aaa;font-size:11px;line-height:1.4}.reset-time-button{background:none;border:1px solid var(--button-border);color:#fff;padding:4px 8px;border-radius:4px;cursor:pointer}.osc-connect-button{padding:6px 12px;margin-bottom:5px;border-radius:4px;border:1px solid var(--button-border);background:none;color:var(--tool-button-text);width:90%;align-self:center;font-size:11px;cursor:pointer}.osc-connect-button:hover{background:#ffffff08}.property-field-container{display:flex;gap:8px;align-items:center;min-height:36px}.property-field-label{height:100%;align-items:center;flex-grow:1;font-size:12px;color:var(--tool-button-text)}.property-field-vector-inputs{display:flex;gap:6px}.property-field-vector4-input{flex:1;width:42px}.property-field-vector3-input{flex:1;width:50px}.property-field-vector2-input{flex:1;width:70px}.property-field-integer-input,.property-field-float-input,.property-field-string-input{width:180px}.camera-error{color:#ff6b6b;background:#ff6b6b1a;padding:8px;border-radius:4px;font-size:12px;margin:4px 0}.camera-status{color:#74b9ff;background:#74b9ff1a;padding:8px;border-radius:4px;font-size:12px;margin:4px 0}.camera-info{color:#00b894;font-size:11px;margin-top:4px}.camera-preview-canvas{border:1px solid var(--button-border);border-radius:4px}.time-reset-button{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--button-border);background:none;color:var(--tool-button-text);cursor:pointer}.time-reset-button:hover{background:#ffffff08}.property-field-item{display:flex;align-items:center;gap:6px}.property-field-vector-axis-label{display:inline-block;width:14px;text-align:center;font-size:11px}.property-image-preview{width:100%;border-radius:8px;border:1px solid var(--button-border)}.image-drop-zone{width:100%;padding:10px 12px;margin:10px 0;background:#0000004d;border:1px solid var(--button-border);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer}.image-drop-zone.dragover{background:#ffffff0a;border-color:var(--accent-color)}.image-drop-content{color:#dcdcdc;font-size:13px;display:flex;gap:8px;align-items:center;flex-direction:column}.image-drop-placeholder{color:#8a8a8a;display:flex;flex-direction:row;gap:4px}.image-drop-content .material-icons{font-size:16px;color:#8a8a8a;display:inline-block}.image-drop-filename{color:#8a8a8a;font-size:12px;margin-bottom:5px}.properties-panel{background:transparent;overflow:visible}.properties-expand-toggle{background:none;border:none;color:#fff;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px}.properties-title{color:#fff;font-size:14px;font-weight:700}.properties-body.collapsed{max-height:0;overflow:hidden;transition:max-height .18s ease;opacity:0}.properties-body.expanded{opacity:1;margin-bottom:12px}.add-property-container{position:relative}.add-property-button{width:100%;background:var(--accent-color);border:none;color:#fff;font-size:12px;padding:6px 18px;margin-bottom:12px;border-radius:4px;cursor:pointer;transition:background .2s ease}.add-property-menu{position:absolute;top:calc(100% + 6px);right:0;background:#161618fa;color:#e8e8e8;border:1px solid rgba(255,255,255,.04);border-radius:8px;padding:8px;min-width:240px;z-index:1200;box-shadow:0 10px 30px #0009}.property-category{margin-bottom:12px}.property-category:last-child{margin-bottom:0}.property-category h4{color:#9aa0a6;font-size:11px;margin:6px 0 6px 8px;text-transform:uppercase;letter-spacing:.6px}.property-type-header-button{display:block;width:100%;background:transparent;border:none;color:#e8e8e8;font-size:13px;padding:8px 12px;border-radius:4px;cursor:pointer;margin-bottom:4px;text-align:left;transition:background .12s ease,color .12s ease}.property-type-header-button:hover,.property-type-header-button:focus{background:#ffffff08;color:#fff;outline:none}.property-type-header-button:not(:last-child){border-bottom:1px solid rgba(255,255,255,.03)}.close-menu-button{width:100%;background:transparent;border:none;color:#cfcfcf;font-size:13px;padding:8px 12px;border-radius:4px;cursor:pointer;margin-top:8px}.close-menu-button:hover{background:#ffffff05}.empty-state{text-align:center;color:#888;font-size:12px;padding:20px}.empty-state p{margin:4px 0}.properties-list{display:flex;flex-direction:column;gap:12px}.inspector{position:fixed;top:0;right:0;width:320px;min-width:320px;height:100vh;max-height:100vh;z-index:100;background:var(--panel-bg, rgba(0, 0, 0, var(--ui-opacity)));border-left:1px solid var(--sidebar-border);padding:14px 0;box-sizing:border-box;transition:transform .3s ease;overflow:hidden;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;overflow-y:auto;transform:translate(0)}.inspector.collapsed{transform:translate(100%);pointer-events:none}.inspector-header{padding:0 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.inspector hr{border-top:1px solid var(--button-border);border-bottom:0px;left:0;right:0}.inspector-section{padding:0 16px}.inspector-section-foldout-icon{transition:transform .18s cubic-bezier(.4,0,.2,1);font-size:11px;display:inline-block;transform-origin:50% 50%}.inspector-section-foldout-icon.expanded{transform:rotate(90deg)}.inspector-title{color:#fff;margin:0;font-size:16px;font-weight:700}.inspector-section-header{display:flex;justify-content:space-between;align-items:center;height:50px;background:transparent}.inspector-close-button{padding:8px;font-size:16px;background-color:transparent;color:#fff;font-weight:700;border-radius:0;cursor:pointer;font-family:monospace;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;border:none;outline:none}.version-block{margin-bottom:16px}.version-label{color:#fff;font-size:12px;margin-bottom:6px;display:block;font-weight:700}.version-sub{font-size:10px;color:#aaa;margin-bottom:6px}.version-buttons{display:flex;gap:6px}.version-button{padding:6px 10px;font-size:11px;background-color:var(--button-bg);color:#fff;border:1px solid var(--button-border);border-radius:4px;cursor:pointer}.version-button.active{background-color:var(--button-active-bg)}.version-button.disabled{color:#888;cursor:not-allowed;opacity:.5}.spectrum-plot{margin-top:10px;height:48px;padding-left:2px;padding-right:2px;overflow:hidden}.spectrum-bars{display:flex;align-items:flex-end;gap:2px;height:100%}.spectrum-bar{width:4px;background-color:#60a5fa}.status-body.collapsed{max-height:0;overflow:hidden;transition:max-height .18s ease;opacity:0}.status-body.expanded{max-height:2000px;transition:max-height .24s ease;opacity:1;margin-bottom:12px}.status-success{padding:12px;background-color:#22c55e33;border:1px solid rgba(34,197,94,.5);border-radius:4px;color:#4ade80;font-size:12px}.status-error-list{max-height:300px;overflow:auto}.status-error-item{padding:8px 12px;margin-bottom:4px;color:#ffaac7;background-color:#dc267f33;border:1px solid rgba(220,38,127,.4);border-radius:4px;font-size:12px;font-family:monospace}.editor-settings-title{margin:0 0 16px;font-size:14px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px}.setting-group{margin-bottom:20px}.setting-label{display:block;font-size:12px;color:#fff;margin-bottom:8px;font-weight:500}.opacity-control{display:flex;align-items:center;gap:12px}.opacity-slider{appearance:none;-webkit-appearance:none;width:100%;height:8px;border-radius:8px;background:#ffffff1f;outline:none}.opacity-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer}.opacity-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent-color);cursor:pointer}.opacity-slider::-moz-range-progress{background:var(--accent-color);height:8px;border-radius:8px}.opacity-slider::-moz-range-track{background:#ffffff1f;height:8px;border-radius:8px}.opacity-value{font-size:12px;color:#fff;min-width:35px;text-align:right;font-weight:600}.setting-description{font-size:11px;color:#fff9;line-height:1.4;margin-top:4px}.project-section{padding:12px 0}.section-title{font-size:14px;font-weight:600;color:#fff;margin:0 0 12px;display:flex;align-items:center;gap:6px}.project-actions{display:flex;gap:8px;margin-top:8px;margin-bottom:12px}.project-button{flex:1;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center}.project-button .material-icons{font-size:16px;margin-right:4px}.info-text{font-size:11px;color:#ccc;margin:0;display:flex;align-items:flex-start;gap:6px;line-height:1.4}.info-text .material-icons{font-size:14px;color:#888;margin-top:1px;flex-shrink:0}@media (max-width: 768px){.project-actions{flex-direction:column}.project-button{justify-content:flex-start}}.links-body.collapsed{max-height:0;overflow:hidden;transition:max-height .18s ease;opacity:0}.links-body.expanded{max-height:2000px;transition:max-height .24s ease;opacity:1;margin-bottom:12px}.creator-info{margin-bottom:16px}.creator-subtitle,.documentation-subtitle{font-size:12px;color:#fff;margin:0 0 8px;font-weight:500}.creator-name{margin:0 0 8px;font-size:12px;color:#ffffffb3}.creator-links{display:flex;width:100%;gap:12px}.creator-link,.documentation-link{color:#fff;text-decoration:none;padding:8px 12px;border-radius:4px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;display:flex;align-items:center;gap:6px;min-width:60px;flex-grow:1}.creator-link:hover,.documentation-link:hover{background:#ffffff1a;border-color:#fff3;text-decoration:none}.link-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px}.link-icon svg{width:20px;height:20px}.link-label{font-size:11px;font-weight:500;text-align:center;line-height:1.2;color:var(--text-color)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{background-color:#000;color:#fff}* input[type=number]::-webkit-outer-spin-button,* input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}* input[type=number]{-moz-appearance:textfield;appearance:textfield}:root{--ui-opacity: .6;--ui-bg: rgba(0, 0, 0, var(--ui-opacity));--ui-border: rgba(255, 255, 255, .1);--accent-color: #007acc;--sidebar-bg: var(--ui-bg);--sidebar-border: var(--ui-border);--button-bg: var(--ui-bg);--button-border: rgba(255, 255, 255, .2);--button-hover-bg: rgba(255, 255, 255, .2);--button-active-bg: rgba(68, 71, 90, .8);--tool-button-bg: var(--ui-bg);--tool-button-text: white;--tab-bg: var(--ui-bg);--tab-c: rgba(255, 255, 255, .4);--tab-border: var(--ui-border);--tab-active-bg: rgba(73, 155, 255, .25);--tab-active-c: white;--tab-button-fg: rgba(255, 255, 255, .537);--tab-drag-over-border: var(--accent-color);--tab-input-bg: rgba(255, 255, 255, .1);--tab-input-border: rgba(255, 255, 255, .3);--code-fg: #f8f8f2;--code-caret: #f8f8f0;--code-line-marker: var(--ui-bg);--code-gutter-bg: var(--ui-bg);--code-selection-bg: rgba(50, 125, 216, var(--ui-opacity));--code-active-line-bg: rgb(24, 81, 151, clamp(0, 1, var(--ui-opacity) * .7));--code-active-line-gutter: rgba(73, 155, 255, var(--ui-opacity));--code-error-line-bg: rgba(220, 38, 127, var(--ui-opacity));--code-error-gutter-bg: rgba(220, 38, 127, .8)}