body{margin:0;padding:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#000}#container{width:100vw;height:calc(100vh - 65px);position:relative;top:40px}#container.drag-over:after{content:"Drop VOX file to add as new layer";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#00ff001a;border:3px dashed rgba(0,255,0,.8);border-radius:10px;padding:40px 60px;font-size:24px;color:#00ff00e6;font-weight:700;pointer-events:none;z-index:9999;text-shadow:2px 2px 4px rgba(0,0,0,.8)}#canvas{width:100%;height:100%;display:block}.info-bar{position:fixed;bottom:0;left:0;right:0;height:25px;background:#282828f2;border-top:1px solid rgba(255,255,255,.1);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px;font-size:12px;color:#ffffffb3;user-select:none;z-index:999}.info-section{display:flex;align-items:center;gap:4px;padding:0 8px}.info-separator{width:1px;height:16px;background:#fff3}.info-label{color:#ffffff80}.info-value{color:#ffffffe6}.info-divider{margin:0 8px;color:#ffffff4d}.info-log{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-self:start}.info-version-right{justify-self:end;padding-right:10px}.info-center-group{display:flex;align-items:center;justify-content:center;gap:8px}#action-log{color:#fff9;font-style:italic;transition:color .3s ease}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:20px}.modal-overlay{display:none;position:fixed;inset:0;background:#000000b3;z-index:10000;backdrop-filter:blur(4px)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#282828f2;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:32px;min-width:480px;max-width:720px;box-shadow:0 8px 32px #00000080;color:#ffffffe6}.modal-header{margin-bottom:24px}.modal-title{font-size:24px;font-weight:500;margin:0;color:#fffffff2}.modal-content{margin-bottom:32px;padding:16px;background:#0003;border-radius:6px}.modal-input{width:100%;padding:12px 16px;background:#1e1e1ecc;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#ffffffe6;font-size:14px;margin-top:12px;outline:none;transition:border-color .2s}.modal-input:focus{border-color:#fff6}.modal-buttons{display:flex;justify-content:flex-end;gap:12px}.modal-button{padding:12px 24px;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:all .2s;outline:none}.modal-button-primary{background:#6464ffcc;color:#fff}.modal-button-primary:hover{background:#7878ffe6}.modal-button-secondary{background:#3c3c3ccc;color:#fffc}.modal-button-secondary:hover{background:#505050cc}.modal-button-danger{background:#c83232cc;color:#fff}.modal-button-danger:hover{background:#ff5050e6}.modal-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;padding:16px;background:#1e1e1e80;border-radius:4px;font-size:14px}.modal-info-item{display:flex;flex-direction:column;gap:4px}.modal-info-label{color:#fff9;font-size:12px}.modal-info-value{color:#ffffffe6}.menu-bar{position:fixed;top:0;left:0;right:0;height:40px;background:#1e1e1ef2;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;padding:0 15px;backdrop-filter:blur(10px);z-index:1000;font-size:14px;font-weight:400;color:#ffffffb3}.menu-item{padding:8px 12px;cursor:pointer;user-select:none;transition:all .2s ease;border-radius:4px;margin-right:4px;display:flex;align-items:center}.menu-item:hover{background:#ffffff1a;color:#ffffffe6}.menu-item:active{background:#ffffff26}.menu-logo{display:flex;align-items:center;padding:0 12px;margin-right:8px;color:#ffffffe6}.menu-spacer{flex:1}.run-mode-button{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#50c87833;border:1px solid rgba(80,200,120,.4);border-radius:4px;color:#50c878e6;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.run-mode-button:hover{background:#50c8784d;border-color:#50c87899;color:#64ff8c}.run-mode-button:active{background:#50c87866}.run-mode-button.active{background:#c8505033;border-color:#c8505066;color:#ff6464e6}.run-mode-button.active:hover{background:#c850504d;border-color:#c8505099;color:#ff7878}.menu-dropdown{position:fixed;background:#282828f2;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:4px 0;min-width:200px;z-index:99999;display:none;box-shadow:0 4px 12px #0000004d;backdrop-filter:blur(10px)}.menu-dropdown-item{padding:8px 12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s ease;color:#ffffffe6;font-size:14px;text-align:left;gap:16px}.menu-dropdown-item:hover{background:#ffffff1a}.menu-separator{height:1px;background:#ffffff1a;margin:4px 0}.menu-shortcut{font-size:12px;opacity:.6;margin-left:auto;padding-left:16px}.modal-content code{background:#ffffff1a;padding:3px 8px;border-radius:3px;font-family:monospace;font-size:13px}.modal-content pre{background:#0000004d;padding:16px;border-radius:4px;overflow-x:auto;margin:16px 0}.modal-content pre code{background:none;padding:0}.modal-content a{color:#6496ffe6;text-decoration:none}.modal-content a:hover{text-decoration:underline}.modal-content ::-webkit-scrollbar{width:8px}.modal-content ::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.modal-content ::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.modal-content ::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.layer-panel{position:absolute;right:30px;top:100px;width:280px;background:#282828f2;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:12px;user-select:none;max-height:calc(100vh - 120px);display:flex;flex-direction:column}.layer-panel-header{padding:12px 16px;font-size:14px;font-weight:500;color:#ffffff80;background:#0003;border-bottom:1px solid rgba(255,255,255,.05);cursor:grab;user-select:none;display:flex;align-items:center}.layer-panel-header:active{cursor:grabbing}.layer-panel-footer{display:flex;padding:12px 16px;border-top:1px solid rgba(255,255,255,.05);gap:12px;justify-content:center}.layer-panel-button{background:#4646464d;border:1px solid transparent;color:#ffffff80;width:40px;height:40px;border-radius:8px;cursor:pointer;font-size:18px;transition:all .2s;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0}.layer-panel-button:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .2s}.layer-panel-button:hover{transform:scale(1.05);color:#fffc}.layer-panel-button:hover:before{opacity:.3}.layer-panel-button:active{transform:scale(.95)}.layer-panel-button[title="Add Layer"]:before{background:#4caf50}.layer-panel-button[title="Delete Layer"]:before{background:#f44336}.layer-panel-button[title="Duplicate Layer"]:before{background:#ffc107}.layer-panel-button[title="Merge Down"]:before{background:#2196f3}.layer-list{flex:1;overflow-y:auto;padding:16px}.layer-item{background:#ffffff0d;border:1px solid transparent;border-radius:4px;margin-bottom:8px;padding:12px;cursor:pointer;transition:all .2s;display:flex;gap:12px;align-items:flex-start}.layer-item:hover{background:#ffffff14}.layer-item.active{background:#64c8644d;border:2px solid rgba(100,200,100,.8);padding:11px}.layer-item.active[data-baked=true]{background:#ff963233;border:2px solid rgba(255,150,50,.8)}.layer-preview-container{position:relative;flex-shrink:0}.layer-preview{width:80px;height:80px;border:1px solid rgba(255,255,255,.1);border-radius:4px;display:block;image-rendering:pixelated;background:#222}.layer-preview-refresh{position:absolute;bottom:2px;right:2px;width:20px;height:20px;padding:0;border:none;background:#000000b3;color:#fff;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.layer-preview-container:hover .layer-preview-refresh{opacity:1}.layer-preview-refresh:hover{background:#000000e6}.layer-controls{display:flex;align-items:center;gap:8px;flex:1}.layer-icon-column,.layer-file-column{display:flex;flex-direction:column;gap:2px;flex-shrink:0}.layer-visibility{background:#6495ed33;border:none;color:#fff;cursor:pointer;font-size:14px;padding:2px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .2s}.layer-visibility:hover{background:#6495ed66}.layer-lock{background:none;border:none;color:#fff;cursor:pointer;font-size:16px;padding:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.layer-name-container{flex:1;display:flex;flex-direction:column;gap:2px}.layer-name{padding:4px 8px;background:#0003;border:1px solid transparent;border-radius:3px;outline:none;font-size:12px}.layer-name:focus{border-color:transparent;background:#0000004d}.layer-name [contenteditable],.layer-name [contenteditable=true]{display:block;width:100%;padding:2px 4px;margin:-2px -4px}.layer-name [contenteditable]:focus,.layer-name [contenteditable=true]:focus{outline:none;border:none;background:#0000004d;border-radius:3px}.layer-info{font-size:10px;color:#ffffff80;white-space:pre-wrap;padding-left:8px;line-height:1.3}.layer-save,.layer-load,.layer-bake,.layer-unbake{border:none;color:#fff;cursor:pointer;font-size:14px;padding:2px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;border-radius:3px}.layer-load{background:#3296fa4d}.layer-load:hover{background:#3296fa80}.layer-save{background:#32c8644d}.layer-save:hover{background:#32c86480}.layer-bake{background:#ff96324d}.layer-bake:hover{background:#ff963280}.layer-unbake{background:#9664c84d}.layer-unbake:hover{background:#9664c880}.layer-item[data-editing-asset=true]{border-left:3px solid rgba(100,200,100,.5);padding-left:5px}.layer-item[data-editing-asset=true] .layer-name{color:#64ff64e6}.layer-item[data-baked=true]{background:#ff96321a}.layer-item[data-baked=true] .layer-info{color:#ffc864e6}.layer-list::-webkit-scrollbar{width:8px}.layer-list::-webkit-scrollbar-track{background:#0003;border-radius:4px}.layer-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.layer-list::-webkit-scrollbar-thumb:hover{background:#ffffff4d}
