.export-menu{position:relative}.export-button{padding:8px;background-color:var(--button-bg);border:1px solid var(--border-secondary);color:var(--text-primary);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;transition:background-color .2s ease,border-color .2s ease}.export-button:hover{background-color:var(--button-bg-hover);border-color:var(--border-tertiary)}.export-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--bg-quaternary);border:1px solid var(--border-secondary);border-radius:4px;min-width:240px;box-shadow:0 4px 6px #0000004d;z-index:1001;padding:.5rem 0}.export-dropdown button{display:block;width:100%;padding:.75rem 1rem;background:none;border:none;color:var(--text-primary);text-align:center;cursor:pointer;font-size:.9rem;font-family:inherit;white-space:nowrap;transition:opacity .2s ease;margin:0}.export-dropdown button:hover{opacity:.7}.export-dropdown button:focus{outline:none;opacity:.7}.canvas-container{flex:1;position:relative;display:flex;flex-direction:column;background-color:var(--canvas-bg);min-height:0;overflow:hidden;z-index:10}.canvas{width:100%;height:100%;display:block}[data-theme=dark] .canvas,[data-theme=ochre] .canvas{box-shadow:0 4px 6px #0000004d}.canvas-controls{position:absolute;top:10px;right:10px;display:flex;gap:5px;z-index:1000}.canvas-controls button{padding:8px;background-color:var(--button-bg);border:1px solid var(--border-secondary);color:var(--text-primary);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;height:36px;transition:background-color .2s ease,border-color .2s ease}.canvas-controls button.menu-button{background-color:transparent;border:none}.canvas-controls button:hover{background-color:var(--button-bg-hover);border-color:var(--border-tertiary)}.canvas-controls button.active{background-color:#64c8ff4d;border-color:#64c8ff80}.canvas-playback-controls{position:absolute;bottom:15px;left:50%;transform:translate(-50%);display:flex;gap:10px;z-index:10}.playback-btn{width:48px;height:48px;border-radius:50%;background-color:var(--bg-secondary);border:2px solid var(--border-primary);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 4px #0003}.playback-btn:hover:not(:disabled){background-color:var(--bg-tertiary);border-color:var(--border-secondary);transform:scale(1.05)}.playback-btn:disabled{opacity:.5;cursor:not-allowed}.playback-btn:active:not(:disabled){transform:scale(.95)}.fps-counter{position:absolute;top:10px;left:10px;padding:6px 12px;background-color:#000000b3;color:#0f0;font-family:Courier New,monospace;font-size:14px;font-weight:700;border-radius:4px;border:1px solid rgba(0,255,0,.3);z-index:20;pointer-events:none;-webkit-user-select:none;user-select:none}.knob-container{display:flex;flex-direction:column;align-items:center;gap:.15rem;margin:0;min-width:50px;flex-shrink:0;width:100%;max-width:fit-content}.knob-wrapper{position:relative;width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex-shrink:0;visibility:visible}.knob-ticks{position:absolute;width:100%;height:100%;pointer-events:none}.knob-tick{position:absolute;width:1px;height:52px;background-color:var(--text-tertiary);top:0;left:50%;transform-origin:50% 25px;opacity:1}.knob-tick:nth-child(1),.knob-tick:nth-child(6),.knob-tick:nth-child(11){height:54px;opacity:.8}.knob-label{font-size:.65rem;color:var(--text-secondary);text-align:center}.knob{width:50px;height:50px;min-width:50px;min-height:50px;border-radius:50%;background:var(--bg-quaternary, #333);border:2px solid var(--border-secondary, #666);position:relative;cursor:grab;transition:transform .1s ease-out;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;z-index:1;flex-shrink:0;visibility:visible!important;opacity:1!important;box-sizing:border-box}.knob:hover{border-color:var(--border-tertiary);background:var(--bg-quinary)}.knob.knob-dragging{cursor:grabbing;border-color:var(--border-tertiary)}.knob.knob-finetune{background:var(--bg-tertiary);border-color:var(--border-primary);width:42px;height:42px}.knob.knob-finetune:hover{border-color:var(--border-secondary);background:var(--bg-quaternary)}.knob-indicator{width:3px;height:16px;background:var(--text-primary);position:absolute;top:3px;left:50%;transform:translate(-50%);border-radius:2px;pointer-events:none}.knob-value{font-size:.65rem;color:var(--text-tertiary);font-family:monospace;min-height:.8rem;line-height:1}.knob-dot{position:absolute;width:12px;height:12px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:2;box-shadow:0 0 2px #0000004d}.push-button{width:28px;height:24px;border:1px solid var(--border-secondary);background:linear-gradient(to bottom,var(--bg-quaternary),var(--bg-tertiary));border-radius:3px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all .1s ease;position:relative;box-shadow:inset 0 1px #ffffff1a,0 1px 2px #0003;flex-shrink:0}.push-button:hover{border-color:var(--border-tertiary);background:linear-gradient(to bottom,var(--bg-quinary),var(--bg-quaternary))}.push-button.pressed{background:linear-gradient(to bottom,var(--accent-primary),var(--accent-secondary));border-color:var(--accent-primary);box-shadow:inset 0 0 10px #ffed4e,0 0 10px #ffa845;color:var(--text-primary)}.push-button.pressed:hover{background:linear-gradient(to bottom,var(--accent-secondary),var(--accent-primary))}.push-button-icon{width:14px;height:14px;filter:brightness(0)}.push-button.pressed .push-button-icon{filter:brightness(0)}.push-button-label{font-size:.7rem;font-weight:700;color:var(--text-secondary);line-height:1}.push-button.pressed .push-button-label{color:var(--text-primary)}.parameter-knob-control{display:flex;flex-direction:column;align-items:stretch;gap:.4rem;padding:.4rem .5rem;margin:0;min-width:0;width:100%;min-height:fit-content}.parameter-knob-control:nth-child(2n){background-color:var(--bg-quaternary)}.parameter-knob-control:nth-child(odd){background-color:var(--bg-tertiary)}.parameter-knob-label-container{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;flex-shrink:0;margin-bottom:.2rem;position:relative}.parameter-knob-label{font-size:.7rem;color:var(--text-secondary);text-align:center;width:100%}.parameter-knob-link-button{display:flex;align-items:center;justify-content:center;margin-left:auto}.parameter-knob-row{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%;min-width:0;min-height:fit-content;height:auto;visibility:visible;overflow:visible}.link-button{width:24px;height:24px;border:1px solid var(--border-secondary);background-color:var(--bg-quaternary);border-radius:4px;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:var(--text-secondary);flex-shrink:0;box-shadow:0 1px 2px #0003}.link-button:hover{border-color:var(--border-tertiary);background-color:var(--bg-quinary)}.link-button.link-enabled{border-color:var(--accent-primary);color:var(--text-primary);box-shadow:inset 0 0 10px #ffed4e,0 0 10px #ffa845}.link-button.link-enabled:hover{background-color:var(--accent-secondary);border-color:var(--accent-secondary)}.control-panel{display:flex;flex-direction:column;gap:1.275rem}.control-columns{display:flex;flex-direction:row;gap:.85rem;align-items:flex-start}.control-column{flex:1;display:flex;flex-direction:column;min-width:0;align-items:stretch}.control-column .control-group{width:100%;display:flex;flex-direction:column;position:relative}.omega-link-container{position:absolute;right:-19px;top:5rem;z-index:10;display:flex;align-items:center;justify-content:center}.control-panel h2{margin:0 0 .85rem;font-size:1.02rem}.control-group{display:flex;flex-direction:column;gap:0;border:1px solid var(--border-secondary);border-radius:4px;overflow:visible;min-height:fit-content;position:relative}.control-group h3{margin:0;padding:.4rem .5rem;font-size:.8rem;color:var(--text-tertiary);font-weight:400;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-secondary);text-align:center}.control-item{display:flex;flex-direction:row;align-items:center;gap:.425rem;width:100%;padding:.25rem .5rem;box-sizing:border-box}.color-picker-item{margin:0;padding:.4rem .5rem;width:100%;max-width:100%;overflow:visible;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:.4rem}.color-picker-item label{width:100%;text-align:center;font-size:.765rem;color:var(--text-secondary);margin:0}.color-picker-item input[type=color]{padding:.425rem;background-color:var(--bg-quaternary);border:1px solid var(--border-secondary);color:var(--text-primary);border-radius:4px;font-size:.765rem;flex:0 0 auto;cursor:pointer;width:auto;max-width:80px}.control-item label{font-size:.765rem;color:var(--text-secondary);min-width:70px;flex-shrink:0;margin-left:0;text-align:center}.control-item input[type=number],.control-item input[type=color]{padding:.425rem;background-color:var(--bg-quaternary);border:1px solid var(--border-secondary);color:var(--text-primary);border-radius:4px;font-size:.765rem;flex:1;min-width:0;max-width:150px}.control-item input[type=color]{max-width:80px;padding:.25rem;cursor:pointer}.keyframe-checkbox{width:18px;height:18px;margin-left:.5rem;cursor:pointer;flex-shrink:0}.control-item input[type=range]{flex:1;min-width:0;max-width:200px}.control-item input[type=number]:focus,.control-item input[type=color]:focus,.control-item input[type=range]:focus{outline:none;border-color:var(--border-tertiary)}.control-item input[type=number].invalid{border-color:var(--error-border);background-color:var(--error-bg)}.validation-error{margin-top:.425rem;padding:.6375rem;background-color:var(--error-bg);border:1px solid var(--error-border);border-radius:4px;color:var(--error-text);font-size:.7225rem}.validation-error strong{color:var(--error-border);display:block;margin-bottom:.5rem}.validation-error p{margin:.25rem 0;line-height:1.4}.validation-hint{font-size:.68rem;color:var(--text-tertiary);margin-top:.425rem!important}.control-actions{display:flex;gap:.425rem;margin-top:.85rem}.control-actions button{flex:1;padding:.6375rem;background-color:var(--button-bg);border:1px solid var(--border-tertiary);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:.765rem}.control-actions button:hover{background-color:var(--button-bg-hover)}.control-actions button:active{background-color:var(--button-bg-active)}.control-actions button:disabled{opacity:.5;cursor:not-allowed;background-color:var(--button-bg-disabled)}.control-actions button:disabled:hover{background-color:var(--button-bg-disabled)}.timeline-editor{padding:.85rem;background-color:var(--bg-secondary);border-top:1px solid var(--border-primary);flex-shrink:0;min-height:fit-content}.timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.timeline-header h3{margin:0;font-size:.85rem}.timeline-header-actions{display:flex;align-items:center;gap:.425rem}.timeline-action-btn{padding:.34rem .68rem;background-color:var(--button-bg);border:1px solid var(--border-tertiary);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:.7225rem;transition:background-color .2s}.timeline-action-btn:hover{background-color:var(--button-bg-hover)}.timeline-action-btn-danger{background-color:#6a2a2a;border-color:#8a4444}.timeline-action-btn-danger:hover{background-color:#7a3a3a}.timeline-navigation{display:flex;gap:.2125rem;margin-left:.425rem}.timeline-nav-btn{width:23.8px;height:23.8px;padding:0;background-color:var(--button-bg);border:1px solid var(--border-tertiary);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:.765rem;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.timeline-nav-btn:hover:not(:disabled){background-color:var(--button-bg-hover)}.timeline-nav-btn:disabled{opacity:.3;cursor:not-allowed}.timeline-time{font-family:monospace;font-size:.765rem;color:var(--text-tertiary);margin-left:.425rem}.timeline-tracks{display:flex;flex-direction:column;gap:.6375rem}.timeline-track{display:flex;align-items:center;gap:.5rem;transform-origin:top center;transition:transform .3s ease-out}.timeline-track.track-enter{animation:trackScaleIn .3s ease-out}@keyframes trackScaleIn{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}.track-label{width:40px;font-size:.765rem;color:var(--text-secondary);text-align:right}.track-timeline{flex:1;height:34px;background-color:var(--bg-quaternary);border:1px solid var(--border-secondary);border-radius:4px;position:relative;cursor:pointer}.track-playhead{position:absolute;top:0;bottom:0;width:2px;background-color:var(--text-primary);pointer-events:none;z-index:5;opacity:1}.track-keyframe{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background-color:#4ecdc4;border:2px solid #ffffff;border-radius:50%;cursor:pointer}.track-keyframe:hover{background-color:#6ee6dd}.track-keyframe.dragging{background-color:#6ee6dd;transform:translate(-50%,-50%) scale(1.2);z-index:10}.add-keyframe-btn{width:25.5px;height:25.5px;background-color:var(--button-bg);border:1px solid var(--border-tertiary);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:1.02rem;display:flex;align-items:center;justify-content:center}.add-keyframe-btn:hover{background-color:var(--button-bg-hover)}.keyframe-delete{position:absolute;top:-8px;right:-8px;width:18px;height:18px;background-color:#f44;border:1px solid #ffffff;border-radius:50%;color:#fff;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0}.keyframe-delete:hover{background-color:#f66}.keyframe-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:4px;padding:.25rem .5rem;font-size:.7rem;white-space:nowrap;z-index:100;margin-bottom:.25rem;box-shadow:0 2px 4px #0003}.tooltip-content{display:flex;align-items:center;gap:.5rem}.keyframe-tooltip input{width:60px;padding:.125rem .25rem;background-color:var(--bg-primary);border:1px solid var(--border-secondary);border-radius:2px;color:var(--text-primary);font-size:.7rem;font-family:monospace}.keyframe-tooltip input:focus{outline:none;border-color:var(--border-tertiary)}.tooltip-delete{background:none;border:none;cursor:pointer;font-size:.9rem;padding:0;display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity .2s}.tooltip-delete:hover{opacity:1}.parameter-footer{height:auto;border-top:1px solid var(--border-primary);overflow:hidden;flex-shrink:0;z-index:1}.parameter-canvas{width:100%;height:100%;display:block}.color-scheme-button{padding:.425rem;background-color:var(--button-bg);border:1px solid var(--border-tertiary);color:var(--text-primary);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;transition:background-color .2s}.color-scheme-button:hover{background-color:var(--button-bg-hover)}.color-scheme-button:focus{outline:none;border-color:var(--border-tertiary)}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:8px;max-width:600px;max-height:80vh;width:90%;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d;animation:slideIn .2s ease-out}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;border-bottom:1px solid var(--border-primary)}.modal-title{margin:0;font-size:1.5rem;color:var(--text-primary)}.modal-close{background:none;border:none;font-size:2rem;color:var(--text-secondary);cursor:pointer;padding:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s}.modal-close:hover{color:var(--text-primary)}.modal-body{padding:1.5rem;overflow-y:auto;color:var(--text-primary);line-height:1.6}.modal-body a{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--border-tertiary);transition:color .2s ease,text-decoration-color .2s ease}.modal-body a:hover{color:var(--text-secondary);text-decoration-color:var(--text-secondary)}.modal-body a:visited{color:var(--text-primary);opacity:.8}.app{display:flex;flex-direction:column;height:100vh;width:100%}.app-header{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.7rem;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-primary)}.app-header-title{display:flex;align-items:center;gap:.85rem}.app-header h1{margin:0;font-size:1.65rem}.app-logo{height:2rem;width:2rem;background-color:var(--text-primary);mask-image:url(/logo.png);mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:url(/logo.png);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;display:inline-block;flex-shrink:0}.app-header-actions{display:flex;align-items:center;gap:.85rem}.app-header-link{background:none;border:none;padding:0 .5rem 0 0;margin:0;font-size:1.65rem;opacity:.7;color:var(--text-primary);cursor:pointer;text-decoration:none;transition:opacity .2s}.app-header-link:hover{opacity:1}.app-main{display:flex;flex:1;overflow:hidden;min-height:0}.app-controls{width:300px;padding:.85rem;background-color:var(--bg-tertiary);border-right:1px solid var(--border-primary);overflow-y:auto;flex-shrink:0}.app-canvas-area{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}.advanced-toggle{margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--border-primary)}.advanced-toggle label{display:flex;align-items:center;gap:.425rem;cursor:pointer;font-size:.85rem}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-size:.85rem;color-scheme:light dark;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;height:100vh}:root,[data-theme=dark]{--bg-primary: #000000;--bg-secondary: #1a1a1a;--bg-tertiary: #1e1e1e;--bg-quaternary: #2a2a2a;--bg-quinary: #3a2a2a;--text-primary: rgba(255, 255, 255, .87);--text-secondary: #ccc;--text-tertiary: #aaa;--border-primary: #333;--border-secondary: #444;--border-tertiary: #666;--button-bg: #4a4a4a;--button-bg-hover: #5a5a5a;--button-bg-active: #3a3a3a;--button-bg-disabled: #2a2a2a;--error-bg: #3a2a2a;--error-border: #ff6b6b;--error-text: #ffcccc;--canvas-bg: #000000}[data-theme=light]{--bg-primary: #f5f5f5;--bg-secondary: #ffffff;--bg-tertiary: #fafafa;--bg-quaternary: #f0f0f0;--bg-quinary: #ffe8e8;--text-primary: rgba(0, 0, 0, .87);--text-secondary: #333;--text-tertiary: #666;--border-primary: #ddd;--border-secondary: #ccc;--border-tertiary: #999;--button-bg: #e0e0e0;--button-bg-hover: #d0d0d0;--button-bg-active: #c0c0c0;--button-bg-disabled: #f0f0f0;--error-bg: #ffe8e8;--error-border: #ff4444;--error-text: #cc0000;--canvas-bg: #ffffff}[data-theme=ochre]{--primary: oklch(25.7% .169 100);--primary-base: .05;--primary-10: oklch(from var(--primary) 10% calc(var(--primary-base) + (sin(1 * pi) * c)) h);--primary-20: oklch(from var(--primary) 20% calc(var(--primary-base) + (sin(.9 * pi) * c)) h);--primary-30: oklch(from var(--primary) 30% calc(var(--primary-base) + (sin(.8 * pi) * c)) h);--primary-40: oklch(from var(--primary) 40% calc(var(--primary-base) + (sin(.7 * pi) * c)) h);--primary-50: oklch(from var(--primary) 50% calc(var(--primary-base) + (sin(.6 * pi) * c)) h);--primary-60: oklch(from var(--primary) 60% calc(var(--primary-base) + (sin(.5 * pi) * c)) h);--primary-70: oklch(from var(--primary) 70% calc(var(--primary-base) + (sin(.4 * pi) * c)) h);--primary-80: oklch(from var(--primary) 80% calc(var(--primary-base) + (sin(.3 * pi) * c)) h);--primary-90: oklch(from var(--primary) 90% calc(var(--primary-base) + (sin(.2 * pi) * c)) h);--primary-100: oklch(from var(--primary) 100% calc(var(--primary-base) + (sin(.1 * pi) * c)) h);--bg-primary: var(--primary-10);--bg-secondary: var(--primary-20);--bg-tertiary: var(--primary-30);--bg-quaternary: var(--primary-40);--bg-quinary: var(--primary-50);--text-primary: var(--primary-100);--text-secondary: var(--primary-90);--text-tertiary: var(--primary-70);--border-primary: var(--primary-40);--border-secondary: var(--primary-50);--border-tertiary: var(--primary-60);--button-bg: var(--primary-50);--button-bg-hover: var(--primary-60);--button-bg-active: var(--primary-40);--button-bg-disabled: var(--primary-30);--error-bg: var(--primary-50);--error-border: #ff6b6b;--error-text: #ffcccc;--canvas-bg: var(--primary-10)}