:root{font-family:Quicksand,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#09090b;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;width:100vw;height:100vh;overflow:hidden}#root{width:100%;height:100%}:root{--bg-primary: #1e1e1e;--bg-secondary: #252525;--bg-tertiary: #333333;--border-color: #444444;--accent-primary: #f97316;--text-primary: #fafafa;--text-secondary: #a1a1aa}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body{font-family:Quicksand,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh}.header{height:48px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.menu-bar{display:flex;gap:8px}.menu-item{position:relative;padding:4px 8px;cursor:pointer;border-radius:4px;font-size:.9rem}.menu-item:hover{background-color:var(--bg-tertiary)}.dropdown{display:none;position:absolute;top:100%;left:0;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;min-width:160px;z-index:100;box-shadow:0 10px 15px -3px #0000001a}.menu-item:hover .dropdown{display:block}.dropdown-item{padding:8px 12px;font-size:.85rem;display:flex;justify-content:space-between;align-items:center}.dropdown-item:hover{background-color:var(--accent-primary)}.main-content{display:flex;flex:1;overflow:hidden}.app-container:has(.full-view) .header{display:none}.full-view{height:100vh}.full-view .canvas-area{flex:1}.sidebar{width:48px;background-color:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:8px}.sidebar button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-secondary);cursor:pointer;border-radius:4px}.sidebar button:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.sidebar button.active{background-color:var(--accent-primary);color:#fff}.canvas-area{flex:1;display:flex;flex-direction:column;position:relative;background-color:var(--bg-secondary)}.viewport-container{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}.canvas-wrapper{flex:1;position:relative}.properties-panel{background-color:var(--bg-secondary);border-left:1px solid var(--border-color);height:100%;display:flex;flex-direction:column}.properties-content{flex:1;overflow-y:auto;scrollbar-width:none}.properties-content::-webkit-scrollbar{display:none}.property-group{margin-bottom:8px}.property-group label{display:block;font-size:.75rem;color:var(--text-secondary);margin-bottom:4px}.property-group input{width:100%;background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:4px 8px;border-radius:4px;font-size:.85rem}.timeline-area{background-color:var(--bg-secondary);border-top:1px solid var(--border-color);display:flex;flex-direction:column;height:100%}.timeline-controls{height:40px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 16px;gap:12px}.timeline-controls button{background:none;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}.timeline-controls button:hover{color:var(--text-primary)}.timeline-content{flex:1;display:flex;overflow:hidden}.layers-list{width:200px;border-right:1px solid var(--border-color);overflow-y:auto;scrollbar-width:none}.layers-list::-webkit-scrollbar{display:none}.layer-item{height:32px;display:flex;align-items:center;padding:0 8px;font-size:.8rem;border-bottom:1px solid var(--border-color);cursor:pointer}.layer-item:hover{background-color:var(--bg-tertiary)}.layer-item.selected{background-color:#f9731633;border-left:2px solid var(--accent-primary)}.layer-drag-handle{cursor:grab;margin-right:8px;color:var(--text-secondary)}.layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-action-btn{background:none;border:none;padding:4px;cursor:pointer;color:var(--text-secondary);opacity:.6;display:flex;align-items:center}.layer-action-btn:hover{opacity:1;color:var(--text-primary)}.tracks-area{flex:1;overflow:auto;position:relative;scrollbar-width:none}.tracks-area::-webkit-scrollbar{display:none}.track-row{height:32px;display:flex;align-items:center;border-bottom:1px solid var(--border-color)}.tracks-inner{position:relative;height:100%}.track-bar{position:absolute;top:50%;left:0;right:0;height:4px;background-color:var(--bg-tertiary);transform:translateY(-50%);border-radius:2px}.keyframe-hit-area{position:absolute;width:20px;height:20px;top:50%;transform:translate(-50%,-50%);cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;background-color:transparent}.keyframe-hit-area:hover .keyframe-dot{transform:scale(1.2);box-shadow:0 0 0 4px #f9731633}.keyframe-dot{width:10px;height:10px;background-color:var(--accent-primary);border-radius:50%;transition:transform .1s,box-shadow .1s}.keyframe-dot.selected{background-color:#facc15;box-shadow:0 0 0 2px #facc1566;transform:scale(1.2)}.playhead{position:absolute;top:0;bottom:0;z-index:20}.key-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;display:flex;align-items:center}.key-btn:hover{color:var(--text-primary)}.key-btn.active{color:var(--accent-primary)!important}.timeline-resizer{height:4px;background-color:var(--border-color);cursor:ns-resize;transition:background-color .2s}.timeline-resizer:hover{background-color:var(--accent-primary)}.prop-resizer{width:4px;background-color:var(--border-color);cursor:ew-resize;transition:background-color .2s}.prop-resizer:hover{background-color:var(--accent-primary)}.context-menu-item{padding:6px 12px;font-size:.8rem;cursor:pointer;border-radius:2px;position:relative}.context-menu-item:hover{background-color:var(--accent-primary);color:#fff}.submenu{position:absolute;left:100%;top:0;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;min-width:120px;padding:4px;box-shadow:0 4px 6px -1px #0000001a}.shortcut-hint{font-size:.7rem;color:var(--text-secondary);margin-left:8px}.checkerboard{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}.header button{background-color:var(--bg-tertiary);border:none;border-right:1px solid var(--border-color);color:var(--text-primary);padding:6px 12px;font-size:.8rem;cursor:pointer;transition:background-color .2s;height:32px;display:flex;align-items:center}.header button:last-child{border-right:none}.header button:hover{background-color:var(--border-color)}.header button:active{background-color:var(--accent-primary)}.full-view-overlay{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(100px);z-index:1000;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;opacity:0;pointer-events:none}.full-view-overlay.show{transform:translate(-50%) translateY(0);opacity:1;pointer-events:auto}.overlay-content{background:#18181bcc;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(63,63,70,.5);border-radius:99px;padding:6px 16px;display:flex;align-items:center;gap:16px;box-shadow:0 10px 15px -3px #0000004d}.overlay-btn{background:none;border:none;color:#fafafa;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:background-color .2s,transform .1s}.overlay-btn:hover{background-color:#ffffff1a}.overlay-btn:active{transform:scale(.9)}.overlay-btn.exit{color:#a1a1aa}.overlay-btn.exit:hover{color:#ef4444;background-color:#ef44441a}.overlay-time{font-family:JetBrains Mono,monospace;font-size:.9rem;color:#fafafa;-webkit-user-select:none;user-select:none;min-width:120px;text-align:center}.assets-panel{height:100%;background-color:#18181b;color:#e4e4e7;overflow-y:auto;padding:1rem}.assets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,120px));gap:1rem}.asset-card{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;background-color:#27272a;border-radius:4px;cursor:grab;transition:background-color .2s;-webkit-user-select:none;user-select:none}.asset-card:hover{background-color:#3f3f46}.asset-thumbnail{position:relative;aspect-ratio:1;background-color:#09090b;border-radius:2px;display:flex;align-items:center;justify-content:center;overflow:hidden}.asset-thumbnail img{max-width:100%;max-height:100%;object-fit:contain}.placeholder-icon{color:#52525b}.edit-overlay{position:absolute;inset:0;background-color:#0009;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;opacity:0;transition:opacity .2s}.asset-thumbnail:hover .edit-overlay{opacity:1;cursor:pointer}.asset-info{display:flex;align-items:center;gap:.25rem;font-size:.75rem}.asset-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-rename-input{flex:1;background-color:#18181b;border:1px solid #f97316;color:#fff;font-size:.75rem;padding:.125rem .25rem;border-radius:2px;outline:none}.asset-menu-btn{background:none;border:none;color:#a1a1aa;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center}.asset-menu-btn:hover{color:#fff}.empty-assets{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:#71717a;text-align:center}.empty-assets p{margin:.5rem 0 0}.empty-assets .hint{font-size:.75rem;opacity:.7}.asset-context-menu{position:fixed;background-color:#27272a;border:1px solid #3f3f46;border-radius:4px;box-shadow:0 4px 12px #00000080;padding:.25rem;z-index:1000;min-width:160px}.menu-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;border-radius:2px}.menu-item:hover{background-color:#f97316;color:#fff}.menu-item.delete:hover{background-color:#ef4444}.bottom-panel-container{display:flex;flex-direction:column;height:100%;background-color:#18181b;border-top:1px solid #27272a}.bottom-panel-tabs{display:flex;align-items:center;background-color:#09090b;padding:0 .5rem;height:32px;gap:.25rem}.tab-btn{display:flex;align-items:center;gap:.5rem;padding:0 1rem;height:100%;background:none;border:none;color:#71717a;font-size:.75rem;cursor:pointer;border-top:2px solid transparent;transition:all .2s}.tab-btn:hover{color:#e4e4e7;background-color:#18181b}.tab-btn.active{color:#f97316;background-color:#18181b;border-top-color:#f97316}.bottom-panel-content{flex:1;overflow:hidden}.editing-asset-badge{display:flex;align-items:center;gap:.5rem;margin-left:1rem;padding-left:1rem;border-left:1px solid #27272a;color:#f59e0b;font-size:.75rem;font-weight:500}.exit-isolation-btn{background-color:#f59e0b;color:#000;border:none;border-radius:2px;padding:2px 8px;font-size:.7rem;font-weight:700;cursor:pointer;margin-left:.5rem}.exit-isolation-btn:hover{background-color:#fbbf24}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.modal-content.export-modal{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;width:500px;max-width:90vw;box-shadow:0 20px 25px -5px #00000080;display:flex;flex-direction:column}.modal-header{padding:16px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:1.1rem;font-weight:600;margin:0}.close-btn{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;line-height:1}.close-btn:hover{color:var(--text-primary)}.modal-body{padding:20px;display:flex;flex-direction:column;gap:20px}.export-preview-container{display:flex;flex-direction:column;gap:8px}.preview-label{font-size:.8rem;color:var(--text-secondary)}.export-preview{width:100%;aspect-ratio:16 / 9;background-color:#f0f0f0;border:1px solid var(--border-color);border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.export-settings{display:grid;grid-template-columns:1fr 1fr;gap:16px}.setting-group{display:flex;flex-direction:column;gap:8px}.setting-group label{font-size:.8rem;color:var(--text-secondary);text-align:left}.setting-group select{background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:8px;border-radius:4px;outline:none;cursor:pointer}.modal-footer{padding:16px;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:12px}.btn-primary{background-color:var(--accent-primary);color:#fff;border:none;padding:8px 20px;border-radius:4px;font-weight:600;cursor:pointer}.btn-primary:hover{background-color:#ea580c}.btn-secondary{background-color:transparent;color:var(--text-primary);border:1px solid var(--border-color);padding:8px 20px;border-radius:4px;cursor:pointer}.btn-secondary:hover{background-color:var(--bg-tertiary)}