:root{--bg-primary: #0a0a0b;--bg-secondary: #141417;--bg-tertiary: #1c1c1f;--timeline-bg: #0f0f11;--border: #2a2a2d;--accent: #FF6B00;--accent-hover: #FF8C33;--text-primary: #ffffff;--text-secondary: #a1a1aa;--text-tertiary: #71717a;--glass: rgba(20, 20, 23, .7)}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}input,textarea,[contenteditable=true]{-webkit-user-select:text;user-select:text}body{font-family:JetBrains Mono,Fira Code,Consolas,monospace;background-color:var(--bg-primary);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased}.app-container{display:grid;grid-template-areas:"toolbar toolbar toolbar" "sidebar-l viewport sidebar-r" "timeline timeline timeline";grid-template-rows:48px 1fr 240px;grid-template-columns:280px 1fr 300px;height:100vh;width:100vw}.toolbar{grid-area:toolbar;background-color:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;z-index:100}.sidebar{background-color:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:var(--bg-secondary)}.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.sidebar-r{grid-area:sidebar-r;border-right:none;border-left:1px solid var(--border)}.panel-header{height:36px;background-color:var(--bg-tertiary);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.asset-list{display:flex;flex-direction:column}.asset-list-row{display:flex;align-items:center;padding:6px 12px;gap:12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.02);transition:background .1s}.asset-list-row:hover{background:#ffffff0d}.asset-list-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;opacity:.8}.asset-list-name{flex:1;font-size:11px;color:#ff6b00;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.asset-list-meta{font-size:10px;color:var(--text-tertiary);font-family:JetBrains Mono,monospace}.section-title{font-size:11px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}.divider{height:1px;background:var(--border);width:100%}.prop-value-box{flex:1;background:var(--bg-tertiary);border:1px solid var(--border);padding:6px 4px;border-radius:4px;font-size:11px;text-align:center;color:var(--text-secondary);font-family:JetBrains Mono,monospace}.btn-delete{width:100%;padding:10px;background:#ef44440d;border:1px solid rgba(239,68,68,.2);color:#ef4444;border-radius:6px;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .2s}.btn-delete:hover{background:#ef44441a}.viewport-container{grid-area:viewport;position:relative;background-color:#000;overflow:hidden}.timeline-container{grid-area:timeline;background-color:var(--timeline-bg);border-top:1px solid var(--border);display:flex;flex-direction:column}.timeline-controls{height:36px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px}.control-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px}.control-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.timeline-tracks-wrapper{display:flex;flex:1;overflow-y:auto;overflow-x:hidden}.tracks-sidebar{width:200px;background-color:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column}.tracks-viewport{flex:1;overflow-x:auto;overflow-y:hidden;position:relative;background-color:var(--timeline-bg)}.timeline-tracks-wrapper::-webkit-scrollbar{width:6px;height:6px}.timeline-tracks-wrapper::-webkit-scrollbar-track{background:var(--bg-secondary)}.timeline-tracks-wrapper::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.timeline-tracks-wrapper::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.track-label{height:32px;padding:0 12px;display:flex;align-items:center;font-size:11px;color:var(--text-secondary);border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-label.sub-track{height:24px;padding-left:32px;font-size:10px;background:var(--bg-primary);opacity:.7}.track-label.active{background:var(--bg-tertiary);color:var(--accent)}.timeline-ruler{height:24px;background-color:#ffffff05;border-bottom:1px solid var(--border);position:relative}.ruler-mark{position:absolute;top:0;height:100%;border-left:1px solid rgba(255,255,255,.1);padding-left:4px;font-size:9px;color:var(--text-tertiary);-webkit-user-select:none;user-select:none}.tracks-content{position:relative;min-height:100%}.track{height:32px;border-bottom:1px solid rgba(255,255,255,.05);position:relative}.track.track-selected{background:#ff6b0014}.track.sub-track-bg{height:24px;background:#0003}.keyframe-diamond{position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:10px;height:10px;background:var(--accent);cursor:pointer;z-index:10}.keyframe-diamond:before{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;cursor:pointer}.keyframe-diamond.sub{width:6px;height:6px;background:var(--text-tertiary);opacity:.5}.keyframe-diamond:hover{background:var(--accent-hover);box-shadow:0 0 10px var(--accent)}.playhead{position:absolute;top:0;bottom:0;width:1px;background-color:#ef4444;z-index:8;pointer-events:none}.playhead-handle{position:absolute;top:0;left:50%;transform:translate(-50%);width:12px;height:12px;background-color:#ef4444;border-radius:0 0 2px 2px;pointer-events:auto;cursor:ew-resize}.tool-btn-refined{padding:6px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.tool-btn-refined:hover{background:var(--bg-tertiary);color:var(--text-primary)}.tool-btn-refined.active{background:#ff6b001a;color:var(--accent);border-color:#ff6b004d}.timeline-tool-btn{padding:4px 10px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;color:var(--text-secondary);font-size:10px;font-weight:700;cursor:pointer;display:flex;align-items:center}.timeline-tool-btn.active-auto{background:#eab3081a;color:#eab308;border-color:#eab3084d}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.glass-morphism{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.time-input-group{display:flex;align-items:center;gap:6px;background:var(--bg-tertiary);padding:4px 10px;border-radius:6px;border:1px solid var(--border);font-family:JetBrains Mono,monospace;font-size:12px;color:var(--accent);margin-left:12px}.time-input{background:transparent;border:none;color:inherit;font-family:inherit;font-size:inherit;width:45px;text-align:center;outline:none;padding:0}.duration-input{color:var(--text-tertiary);width:35px}.time-input::-webkit-inner-spin-button,.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.play-btn-refined{padding:8px 16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.play-btn-refined:hover{background:#252529;color:var(--text-primary);border-color:#ff6b0044}.checkbox-container{display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none;margin-right:8px}.checkbox-container input{width:12px;height:12px;accent-color:var(--accent)}.checkbox-label{font-size:8px;font-weight:800;color:var(--text-tertiary);letter-spacing:.1em;text-transform:uppercase}.prop-label-highlight{color:#ef4444!important;font-weight:600}.prop-value-box.highlighted{border-color:#ef4444;background:#ef44441a;color:#ef4444}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}