*{box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;height:100%}body{font-family:system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.timeline-view{display:flex;flex-direction:column;background:#1a1a1a;border-radius:4px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;font-size:12px}.timeline-ruler{position:relative;height:24px;background:#252525;border-bottom:1px solid #333;cursor:pointer;overflow:hidden}.ruler-markers{position:relative;height:100%}.ruler-marker{position:absolute;top:0;height:100%;border-left:1px solid #444}.ruler-marker.major{border-left-color:#666}.ruler-label{position:absolute;top:4px;left:4px;color:#888;font-size:10px;white-space:nowrap}.ruler-marker.major .ruler-label{color:#aaa}.timeline-playhead{position:absolute;top:0;width:2px;height:100%;background:#f44;pointer-events:none;z-index:10}.timeline-playhead:before{content:"";position:absolute;top:0;left:-4px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #ff4444}.timeline-tracks{flex:1;overflow-y:auto}.timeline-track{display:flex;height:32px;border-bottom:1px solid #333;cursor:pointer;transition:background .1s}.timeline-track:hover{background:#252525}.timeline-track.selected{background:#2a3a4a}.track-label{display:flex;flex-direction:column;justify-content:center;width:120px;padding:0 8px;background:#202020;border-right:1px solid #333;flex-shrink:0}.track-target{color:#ddd;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-property{color:#888;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-keyframes{flex:1;position:relative;overflow:hidden}.keyframe{position:absolute;top:50%;width:10px;height:10px;margin-left:-5px;margin-top:-5px;background:#4a9eff;border-radius:2px;transform:rotate(45deg);cursor:pointer;transition:transform .1s,background .1s}.keyframe:hover{transform:rotate(45deg) scale(1.2);background:#6ab0ff}.keyframe.selected{background:#f94;box-shadow:0 0 0 2px #ff99444d}.keyframe.dragging{background:#f64;transform:rotate(45deg) scale(1.3);box-shadow:0 0 0 3px #f646;z-index:100;cursor:grabbing}@media(max-width:768px){.timeline-ruler{height:20px}.ruler-label{font-size:9px;top:3px}.timeline-track{height:28px}.track-label{width:90px;padding:0 6px}.track-target{font-size:11px}.track-property{font-size:9px}.keyframe{width:8px;height:8px;margin-left:-4px;margin-top:-4px}}@media(max-width:480px){.track-label{width:70px;padding:0 4px}.track-target{font-size:10px}.track-property{font-size:8px}.keyframe{width:7px;height:7px;margin-left:-3.5px;margin-top:-3.5px}}.preview-panel{display:flex;flex-direction:column;background:#1a1a1a;border-radius:4px;overflow:hidden}.preview-header{padding:8px 12px;background:#252525;border-bottom:1px solid #333;color:#aaa;font-size:12px;font-weight:500}.preview-container{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;min-height:200px}.preview-canvas{position:relative;width:300px;height:200px;background:#252525;border:1px solid #333;border-radius:4px;overflow:hidden}.preview-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.renderer-select{padding:3px 6px;background:#333;border:1px solid #444;border-radius:4px;color:#ccc;font-size:11px;cursor:pointer;outline:none}.renderer-select:hover{border-color:#555}.renderer-select:focus{border-color:#4a9eff}.preview-element-count{font-size:11px;color:#666;margin-left:auto}.preview-canvas-renderer,.preview-svg-renderer{display:flex;align-items:center;justify-content:center}.preview-canvas-renderer canvas{background:#252525}.preview-svg-renderer svg{background:#252525}.renderer-badge{position:absolute;top:8px;right:8px;padding:2px 8px;background:#4a9eff33;border:1px solid rgba(74,158,255,.4);border-radius:4px;font-size:10px;color:#4a9eff;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.preview-element{box-sizing:border-box;transition:box-shadow .1s}.preview-element.selected{box-shadow:0 0 0 2px #4a9eff}.preview-element.locked{pointer-events:none}.preview-element.dragging{cursor:grabbing;box-shadow:0 0 0 2px #4a9eff,0 4px 12px #4a9eff4d}.preview-element:not(.locked):hover{cursor:grab}.resize-handle{background:#4a9eff;border:1px solid #fff;border-radius:2px;z-index:100;box-shadow:0 1px 3px #0000004d}.resize-handle:hover{background:#6bb3ff;transform:scale(1.2)}.resize-handle-endpoint{border-radius:50%;background:#ff9f43;border-color:#fff}.resize-handle-endpoint:hover{background:#ffb76b}.rotation-handle{background:#9b59b6;border:2px solid #fff;border-radius:50%;z-index:101;box-shadow:0 1px 3px #0000004d}.rotation-handle:hover{background:#b06cc7;transform:scale(1.2)}.rotation-line{z-index:99;pointer-events:none}.path-control-overlay{z-index:102}.path-control-overlay circle{transition:r .1s}.path-control-overlay circle:hover{r:7}.preview-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#666}.preview-placeholder p{margin:0;font-size:13px}.preview-placeholder .hint{margin-top:4px;font-size:11px;color:#555}@media(max-width:768px){.preview-container{padding:10px;min-height:150px}.preview-canvas{max-width:100%;max-height:100%}}@media(max-width:480px){.preview-container{padding:8px;min-height:120px}.preview-header{padding:6px 10px;font-size:11px}}.playback-controls{display:flex;align-items:center;gap:16px;padding:8px 16px;background:#252525;border-radius:4px}.playback-buttons,.history-buttons{display:flex;align-items:center;gap:8px}.history-buttons{padding-right:8px;border-right:1px solid #444}.control-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:#333;border:none;border-radius:4px;color:#aaa;cursor:pointer;transition:background .1s,color .1s}.control-btn:hover:not(:disabled){background:#444;color:#fff}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn.play-btn{width:40px;height:40px;background:#4a9eff;color:#fff}.control-btn.play-btn .play-icon{font-size:16px;line-height:1;color:#fff}.control-btn.play-btn:hover{background:#6ab0ff}.time-display{display:flex;align-items:center;gap:4px;font-family:monospace;font-size:14px;color:#aaa}.current-time{color:#fff}.time-separator{color:#666}.duration{color:#888}.seek-bar{flex:1;min-width:100px}.seek-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:#333;border-radius:2px;cursor:pointer}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:#4a9eff;border-radius:50%;cursor:pointer;transition:transform .1s}.seek-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.seek-slider::-moz-range-thumb{width:12px;height:12px;background:#4a9eff;border:none;border-radius:50%;cursor:pointer}@media(max-width:1024px){.playback-controls{gap:12px;padding:8px 12px}}@media(max-width:768px){.playback-controls{flex-wrap:wrap;gap:8px;padding:8px}.history-buttons{order:3;padding-right:0;border-right:none;padding-top:8px;border-top:1px solid #444;width:100%;justify-content:center}.playback-buttons{gap:6px}.control-btn{width:28px;height:28px}.control-btn.play-btn{width:36px;height:36px}.time-display{font-size:12px}.seek-bar{min-width:80px}}@media(max-width:480px){.playback-controls{padding:6px;gap:6px}.control-btn{width:26px;height:26px}.control-btn.play-btn{width:32px;height:32px}.time-display{font-size:11px}.seek-bar{min-width:60px}}.tooltip-trigger{position:relative;display:inline-flex}.tooltip{position:absolute;z-index:1000;pointer-events:none;animation:tooltip-fade-in .15s ease-out}@keyframes tooltip-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tooltip-content{background:#1a1a1a;border:1px solid #444;border-radius:6px;padding:8px 12px;font-size:12px;line-height:1.4;color:#ddd;max-width:250px;box-shadow:0 4px 12px #0000004d;white-space:normal}.tooltip-arrow{position:absolute;width:8px;height:8px;background:#1a1a1a;border:1px solid #444;transform:rotate(45deg)}.tooltip-top{bottom:100%;left:50%;transform:translate(-50%);padding-bottom:8px}.tooltip-top .tooltip-arrow{bottom:4px;left:50%;margin-left:-4px;border-top:none;border-left:none}.tooltip-bottom{top:100%;left:50%;transform:translate(-50%);padding-top:8px}.tooltip-bottom .tooltip-arrow{top:4px;left:50%;margin-left:-4px;border-bottom:none;border-right:none}.tooltip-left{right:100%;top:50%;transform:translateY(-50%);padding-right:8px}.tooltip-left .tooltip-arrow{right:4px;top:50%;margin-top:-4px;border-left:none;border-bottom:none}.tooltip-right{left:100%;top:50%;transform:translateY(-50%);padding-left:8px}.tooltip-right .tooltip-arrow{left:4px;top:50%;margin-top:-4px;border-right:none;border-top:none}.help-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:6px;background:#333;border:1px solid #444;border-radius:50%;color:#888;font-size:10px;font-weight:600;cursor:help;transition:all .1s}.help-icon:hover{background:#4a9eff;border-color:#4a9eff;color:#fff}@media(max-width:768px){.tooltip-content{max-width:200px;font-size:11px;padding:6px 10px}}.curve-editor{display:flex;flex-direction:column;gap:8px;padding:8px;background:#1a1a1a;border-radius:4px}.curve-editor-svg{background:#222;border-radius:4px;cursor:default}.curve-editor-handle{fill:#4a9eff;stroke:#fff;stroke-width:2;cursor:grab;transition:fill .15s ease}.curve-editor-handle:hover{fill:#6ab0ff}.curve-editor-handle.dragging{fill:#ff6b4a;cursor:grabbing}.curve-editor-label{fill:#666;font-size:10px;font-family:system-ui,sans-serif;text-anchor:middle}.curve-editor-value{padding:6px 8px;background:#111;border-radius:4px;font-size:11px;text-align:center}.curve-editor-value code{color:#8bc34a;font-family:Monaco,Menlo,monospace}.curve-editor-presets{display:flex;flex-wrap:wrap;gap:4px}.curve-preset-btn{flex:1 0 calc(50% - 2px);padding:6px 4px;background:#333;border:1px solid #444;border-radius:4px;color:#ccc;font-size:10px;cursor:pointer;transition:all .15s ease}.curve-preset-btn:hover{background:#404040;border-color:#4a9eff;color:#fff}.curve-preset-btn:active{background:#4a9eff;color:#fff}.property-panel{display:flex;flex-direction:column;background:#1a1a1a;border-radius:4px;overflow:hidden;min-width:240px}.panel-header{padding:8px 12px;background:#252525;border-bottom:1px solid #333;color:#aaa;font-size:12px;font-weight:500}.panel-content{padding:12px;overflow-y:auto}.no-selection{color:#666;font-size:12px;text-align:center;padding:20px}.no-selection p{margin:0}.property-section{margin-bottom:16px}.property-section h4{margin:0 0 8px;font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.5px}.property-row{display:flex;align-items:center;margin-bottom:8px;gap:8px}.property-row label{flex:0 0 70px;font-size:12px;color:#aaa}.property-row input,.property-row select{flex:1;padding:6px 8px;background:#252525;border:1px solid #333;border-radius:4px;color:#fff;font-size:12px;font-family:inherit}.property-row input:focus,.property-row select:focus{outline:none;border-color:#4a9eff}.property-row input[type=number]{font-family:monospace}.property-row select{cursor:pointer}.property-value{flex:1;font-size:12px;color:#ddd;font-family:monospace}.property-actions{margin-top:16px;padding-top:16px;border-top:1px solid #333}.delete-btn{width:100%;padding:8px;background:#3a2020;border:1px solid #5a3030;border-radius:4px;color:#f66;font-size:12px;cursor:pointer;transition:background .1s,border-color .1s}.delete-btn:hover{background:#4a2020;border-color:#7a4040}.property-row input[type=color]{flex:0 0 32px;width:32px;height:28px;padding:2px;cursor:pointer}.property-row input.color-text{flex:1;font-family:monospace;font-size:11px}.property-row.checkbox-row input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;cursor:pointer;accent-color:#4a9eff}.gradient-stops{margin-top:8px;padding:8px;background:#1a1a1a;border-radius:4px}.gradient-stops-label{display:block;margin-bottom:8px;font-size:11px;color:#888;text-transform:uppercase}.gradient-stop-row{display:flex;align-items:center;gap:4px;margin-bottom:6px}.gradient-stop-row input[type=color]{flex:0 0 28px;width:28px;height:24px;padding:2px;border:none;border-radius:3px;cursor:pointer}.gradient-stop-row .offset-input{flex:0 0 45px;width:45px}.gradient-stop-row .offset-unit{color:#666;font-size:11px}.gradient-stop-remove{flex:0 0 20px;width:20px;height:20px;padding:0;margin-left:auto;background:transparent;border:none;border-radius:3px;color:#888;font-size:14px;cursor:pointer;transition:color .1s,background .1s}.gradient-stop-remove:hover{background:#3a2020;color:#f66}.gradient-add-stop{width:100%;margin-top:4px;padding:6px;background:#252525;border:1px dashed #444;border-radius:4px;color:#888;font-size:11px;cursor:pointer;transition:background .1s,border-color .1s,color .1s}.gradient-add-stop:hover{background:#333;border-color:#4a9eff;color:#fff}.image-upload-btn{flex:1;padding:6px 12px;background:#4a9eff;border:none;border-radius:4px;color:#fff;font-size:12px;cursor:pointer;transition:background .1s}.image-upload-btn:hover{background:#3a8eef}.image-clear-btn{flex:1;padding:6px 12px;background:#3a2020;border:1px solid #5a3030;border-radius:4px;color:#f66;font-size:12px;cursor:pointer;transition:background .1s,border-color .1s}.image-clear-btn:hover{background:#4a2020;border-color:#7a4040}.property-row input:disabled{background:#1a1a1a;color:#666;cursor:not-allowed}.property-row .unit{flex:0 0 auto;color:#666;font-size:11px}.apply-motion-path-btn{flex:1;padding:8px 12px;background:#4a9eff;border:none;border-radius:4px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;transition:background .1s}.apply-motion-path-btn:hover:not(:disabled){background:#3a8eef}.apply-motion-path-btn:disabled{background:#333;color:#666;cursor:not-allowed}.path-segment-buttons{display:flex;gap:6px;margin-top:8px}.path-segment-btn{flex:1;padding:6px 8px;background:#333;border:1px solid #444;border-radius:4px;color:#aaa;font-size:11px;cursor:pointer;transition:background .1s,border-color .1s,color .1s}.path-segment-btn:hover{background:#444;border-color:#4a9eff;color:#fff}.path-hint{margin:8px 0 0;font-size:11px;color:#666;font-style:italic}.property-section h4{display:flex;align-items:center;gap:8px}.text-effects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.text-effect-btn{padding:8px 6px;background:#333;border:1px solid #444;border-radius:4px;color:#ccc;font-size:11px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-align:center}.text-effect-btn:hover{background:#444;border-color:#4a9eff;color:#fff}.text-effect-btn:active{background:#4a9eff;color:#fff}.text-effect-applied{margin-top:8px;padding:6px 8px;background:#2ecc7126;border:1px solid rgba(46,204,113,.3);border-radius:4px;color:#2ecc71;font-size:11px;text-align:center}.curve-editor-section{margin-top:12px;padding-top:12px;border-top:1px solid #333}.track-panel{display:flex;flex-direction:column;background:#1a1a1a;border-radius:4px;overflow:hidden;min-width:200px}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#252525;border-bottom:1px solid #333;color:#aaa;font-size:12px;font-weight:500}.add-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:#333;border:none;border-radius:4px;color:#aaa;font-size:16px;cursor:pointer;transition:background .1s,color .1s}.add-btn:hover{background:#4a9eff;color:#fff}.panel-content{flex:1;overflow-y:auto}.add-track-form{display:flex;flex-direction:column;gap:8px;padding:12px;background:#202020;border-bottom:1px solid #333}.add-track-form input{padding:8px;background:#252525;border:1px solid #333;border-radius:4px;color:#fff;font-size:12px}.add-track-form input:focus{outline:none;border-color:#4a9eff}.confirm-btn{padding:8px;background:#4a9eff;border:none;border-radius:4px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;transition:background .1s}.confirm-btn:hover{background:#6ab0ff}.track-list{padding:8px}.track-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;margin-bottom:4px;background:#252525;border-radius:4px;cursor:pointer;transition:background .1s}.track-item:hover{background:#2a2a2a}.track-item.selected{background:#2a3a4a;border:1px solid #4a9eff;margin:-1px -1px 3px}.track-info{display:flex;flex-direction:column;gap:2px}.track-target{font-size:12px;color:#ddd;font-weight:500}.track-property{font-size:10px;color:#888}.track-meta{display:flex;align-items:center;gap:8px}.keyframe-count{font-size:10px;color:#666}.remove-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;background:transparent;border:none;border-radius:4px;color:#666;font-size:14px;cursor:pointer;opacity:0;transition:opacity .1s,background .1s,color .1s}.track-item:hover .remove-btn{opacity:1}.remove-btn:hover{background:#3a2020;color:#f66}.empty-state{text-align:center;padding:20px;color:#666}.empty-state p{margin:0 0 4px;font-size:12px}.empty-state .hint{font-size:11px;color:#555}.toolbar{display:flex;align-items:center;gap:8px;margin-left:auto}.toolbar-project-name{display:flex;align-items:center;padding:4px 8px;background:#252525;border-radius:4px;color:#ccc;font-size:13px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar-dirty-indicator{margin-left:4px;color:#f94;font-weight:700}.toolbar-divider{width:1px;height:20px;background:#444;margin:0 4px}.toolbar-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#333;border:none;border-radius:4px;color:#aaa;font-size:12px;cursor:pointer;transition:background .1s,color .1s}.toolbar-btn:hover:not(:disabled){background:#444;color:#fff}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.toolbar-btn svg{flex-shrink:0}.toolbar-btn-primary{background:#4a9eff;color:#fff}.toolbar-btn-primary:hover:not(:disabled){background:#6ab0ff}.toolbar-btn-danger{background:#e74c3c;color:#fff}.toolbar-btn-danger:hover:not(:disabled){background:#ff6b5b}.toolbar-btn-embed{background:#2ecc71;color:#fff}.toolbar-btn-embed:hover:not(:disabled){background:#3ae082}.toolbar-btn-sample{background:#9b59b6;color:#fff}.toolbar-btn-sample:hover:not(:disabled){background:#b06cc7}.toolbar-btn-gallery{background:#e67e22;color:#fff;text-decoration:none}.toolbar-btn-gallery:hover{background:#f39c12}.toolbar-dialog-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.toolbar-dialog{background:#1e1e1e;border:1px solid #333;border-radius:8px;padding:20px;min-width:320px;max-width:400px;box-shadow:0 4px 20px #0006}.toolbar-dialog h3{margin:0 0 12px;color:#fff;font-size:16px}.toolbar-dialog p{margin:0 0 20px;color:#aaa;font-size:14px;line-height:1.4}.toolbar-dialog-actions{display:flex;gap:8px;flex-wrap:wrap}.toolbar-dialog-actions .toolbar-btn{flex:1;justify-content:center;min-width:100px}@media(max-width:1024px){.toolbar{gap:6px}.toolbar-btn{padding:6px 10px;font-size:11px}.toolbar-project-name{max-width:150px;font-size:12px}}@media(max-width:768px){.toolbar{flex-wrap:wrap;gap:4px;margin-left:0;flex:1;justify-content:flex-end}.toolbar-project-name,.toolbar-divider{display:none}.toolbar-btn{padding:6px 8px;font-size:11px}.toolbar-btn-text{display:none}.toolbar-btn svg{width:16px;height:16px}.toolbar-dialog{min-width:auto;max-width:calc(100vw - 32px);margin:16px}}@media(max-width:480px){.toolbar{gap:3px}.toolbar-btn{padding:5px 6px}}.settings-dialog-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.settings-dialog{background:#1e1e1e;border:1px solid #333;border-radius:8px;padding:24px;min-width:400px;max-width:500px;box-shadow:0 4px 20px #0006}.settings-dialog h2{margin:0 0 20px;color:#fff;font-size:18px;font-weight:500}.settings-section{margin-bottom:20px}.settings-label{display:block;margin-bottom:8px;color:#aaa;font-size:13px;font-weight:500}.settings-input{width:100%;padding:10px 12px;background:#252525;border:1px solid #333;border-radius:4px;color:#fff;font-size:14px;box-sizing:border-box}.settings-input:focus{outline:none;border-color:#4a9eff}.settings-input-small{width:80px}.settings-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.settings-preset-btn{padding:6px 12px;background:#333;border:1px solid #444;border-radius:4px;color:#aaa;font-size:12px;cursor:pointer;transition:all .1s}.settings-preset-btn:hover{background:#444;color:#fff}.settings-preset-btn.active{background:#4a9eff;border-color:#4a9eff;color:#fff}.settings-dimensions{display:flex;align-items:center;gap:12px}.settings-dimension{display:flex;align-items:center;gap:8px}.settings-dimension label{color:#888;font-size:12px;min-width:40px}.settings-dimension-x{color:#666;font-size:14px}.settings-unit{color:#666;font-size:12px}.settings-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px;padding-top:16px;border-top:1px solid #333}.settings-btn{padding:10px 20px;background:#333;border:none;border-radius:4px;color:#aaa;font-size:14px;cursor:pointer;transition:all .1s}.settings-btn:hover{background:#444;color:#fff}.settings-btn-primary{background:#4a9eff;color:#fff}.settings-btn-primary:hover{background:#6ab0ff}@media(max-width:768px){.settings-dialog{min-width:auto;max-width:none;width:calc(100vw - 32px);margin:16px;padding:20px}.settings-dialog h2{font-size:16px}.settings-dimensions{flex-direction:column;align-items:flex-start;gap:8px}.settings-dimension-x{display:none}.settings-actions{flex-direction:column}.settings-btn{width:100%;text-align:center}}@media(max-width:480px){.settings-dialog{padding:16px;margin:8px;width:calc(100vw - 16px)}.settings-presets{gap:4px}.settings-preset-btn{padding:5px 10px;font-size:11px}}.embed-dialog-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.embed-dialog{background:#1e1e1e;border:1px solid #333;border-radius:8px;width:90%;max-width:700px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 4px 20px #0006}.embed-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #333}.embed-dialog-header h2{margin:0;color:#fff;font-size:18px;font-weight:500}.embed-close-btn{width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:4px;color:#888;font-size:24px;line-height:1;cursor:pointer;transition:background .1s,color .1s}.embed-close-btn:hover{background:#333;color:#fff}.embed-dialog-content{padding:20px;overflow-y:auto}.embed-type-selector{display:flex;gap:8px;margin-bottom:16px}.embed-type-btn{flex:1;padding:10px 16px;background:#252525;border:1px solid #333;border-radius:4px;color:#aaa;font-size:14px;cursor:pointer;transition:all .1s}.embed-type-btn:hover{background:#333;color:#fff}.embed-type-btn.active{background:#4a9eff;border-color:#4a9eff;color:#fff}.embed-description{margin-bottom:16px}.embed-description p{margin:0;color:#888;font-size:13px}.embed-code-container{background:#0d0d0d;border:1px solid #333;border-radius:4px;max-height:300px;overflow:auto}.embed-code{margin:0;padding:16px;color:#ccc;font-family:SF Mono,Fira Code,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-all}.embed-actions{display:flex;gap:8px;margin-top:16px}.embed-btn{padding:10px 20px;background:#333;border:none;border-radius:4px;color:#aaa;font-size:14px;cursor:pointer;transition:all .1s}.embed-btn:hover{background:#444;color:#fff}.embed-btn-primary{background:#4a9eff;color:#fff}.embed-btn-primary:hover{background:#6ab0ff}.embed-instructions{margin-top:20px;padding-top:16px;border-top:1px solid #333}.embed-instructions h4{margin:0 0 12px;color:#fff;font-size:14px;font-weight:500}.embed-instructions ol{margin:0;padding-left:20px;color:#888;font-size:13px;line-height:1.6}.embed-instructions code{background:#252525;padding:2px 6px;border-radius:3px;font-family:SF Mono,Fira Code,monospace;font-size:12px;color:#4a9eff}.embed-note{margin-top:12px;padding:10px 12px;background:#252525;border-left:3px solid #f39c12;border-radius:0 4px 4px 0;font-size:12px;color:#aaa}.embed-note strong{color:#f39c12}@media(max-width:768px){.embed-dialog{width:100%;max-width:none;max-height:100vh;border-radius:0;margin:0}.embed-dialog-header{padding:12px 16px}.embed-dialog-header h2{font-size:16px}.embed-dialog-content{padding:16px}.embed-type-selector{flex-direction:column}.embed-type-btn{padding:12px 16px}.embed-code-container{max-height:200px}.embed-code{font-size:11px;padding:12px}.embed-actions{flex-direction:column}.embed-btn{width:100%;text-align:center}}@media(max-width:480px){.embed-dialog-header{padding:10px 12px}.embed-dialog-content{padding:12px}.embed-code{font-size:10px;padding:10px}}.export-dialog-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.export-dialog{background:#1a1a1a;border-radius:8px;width:700px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.export-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #333}.export-dialog-header h2{margin:0;font-size:18px;font-weight:600;color:#fff}.export-close-btn{background:transparent;border:none;color:#888;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .1s,color .1s}.export-close-btn:hover{background:#333;color:#fff}.export-dialog-content{padding:20px;overflow-y:auto;flex:1}.export-format-selector{display:flex;gap:8px;margin-bottom:16px}.export-format-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;background:#252525;border:2px solid #333;border-radius:8px;color:#aaa;font-size:14px;cursor:pointer;transition:all .15s}.export-format-btn:hover{background:#2a2a2a;border-color:#444;color:#fff}.export-format-btn.active{background:#1a3a5c;border-color:#4a9eff;color:#4a9eff}.export-format-btn svg{opacity:.8}.export-format-btn.active svg{opacity:1}.export-description{margin-bottom:16px}.export-description p{margin:0;color:#888;font-size:13px}.export-options{margin-bottom:16px}.export-checkbox{display:flex;align-items:center;gap:8px;color:#aaa;font-size:13px;cursor:pointer}.export-checkbox input[type=checkbox]{accent-color:#4a9eff;cursor:pointer}.export-option-row{display:flex;gap:16px}.export-option-row label{display:flex;align-items:center;gap:8px;color:#aaa;font-size:13px}.export-option-row input[type=number]{width:70px;padding:6px 8px;background:#252525;border:1px solid #333;border-radius:4px;color:#fff;font-size:12px;font-family:monospace}.export-option-row input[type=number]:focus{outline:none;border-color:#4a9eff}.export-code-container{background:#0d0d0d;border:1px solid #333;border-radius:6px;max-height:250px;overflow:auto;margin-bottom:16px}.export-code{margin:0;padding:12px;font-family:SF Mono,Monaco,Consolas,monospace;font-size:11px;line-height:1.5;color:#ccc;white-space:pre-wrap;word-break:break-all}.export-actions{display:flex;gap:8px;margin-bottom:20px}.export-btn{padding:10px 20px;background:#333;border:1px solid #444;border-radius:6px;color:#fff;font-size:13px;cursor:pointer;transition:background .1s,border-color .1s}.export-btn:hover{background:#444;border-color:#555}.export-btn-primary{background:#4a9eff;border-color:#4a9eff}.export-btn-primary:hover{background:#3a8eef;border-color:#3a8eef}.export-gif-note{background:#252525;border-radius:6px;padding:16px;flex:1}.export-gif-note p{margin:0 0 12px;color:#aaa;font-size:13px}.export-gif-note code{display:block;background:#0d0d0d;padding:12px;border-radius:4px;font-family:SF Mono,Monaco,Consolas,monospace;font-size:11px;color:#ccc;white-space:pre;overflow-x:auto}.export-instructions{background:#252525;border-radius:6px;padding:16px}.export-instructions h4{margin:0 0 12px;font-size:13px;font-weight:600;color:#fff}.export-instructions ol{margin:0;padding-left:20px;color:#aaa;font-size:13px}.export-instructions li{margin-bottom:6px}.export-instructions code{background:#0d0d0d;padding:2px 6px;border-radius:3px;font-family:SF Mono,Monaco,Consolas,monospace;font-size:11px;color:#4a9eff}@media(max-width:768px){.export-dialog{width:100%;max-width:none;max-height:100vh;border-radius:0}.export-dialog-header{padding:12px 16px}.export-dialog-header h2{font-size:16px}.export-dialog-content{padding:16px}.export-format-selector{flex-wrap:wrap}.export-format-btn{flex:1 1 calc(50% - 4px);min-width:120px;padding:10px;font-size:12px}.export-option-row{flex-direction:column;gap:12px}.export-code-container{max-height:180px}.export-code{font-size:10px;padding:10px}.export-actions{flex-direction:column}.export-btn{width:100%;text-align:center}}@media(max-width:480px){.export-dialog-content{padding:12px}.export-format-btn{flex:1 1 100%;flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 12px}.export-code{font-size:9px}}.samples-dialog-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.samples-dialog{background:#1a1a1a;border-radius:12px;width:700px;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px #00000080}.samples-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #333;flex-shrink:0}.samples-dialog-header h2{margin:0;font-size:18px;font-weight:600;color:#fff}.samples-close-btn{background:transparent;border:none;color:#888;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .1s,color .1s}.samples-close-btn:hover{background:#333;color:#fff}.samples-dialog-content{padding:20px;overflow-y:auto;flex:1}.samples-categories{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.samples-category-btn{padding:8px 16px;background:#252525;border:1px solid #333;border-radius:20px;color:#aaa;font-size:13px;cursor:pointer;transition:all .15s}.samples-category-btn:hover{background:#2a2a2a;border-color:#444;color:#fff}.samples-category-btn.active{background:#4a9eff;border-color:#4a9eff;color:#fff}.samples-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:16px}.sample-card{background:#252525;border:2px solid #333;border-radius:10px;padding:16px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;text-align:center}.sample-card:hover,.sample-card.hovered{background:#2a2a2a;border-color:#4a9eff;transform:translateY(-2px)}.sample-thumbnail{font-size:40px;margin-bottom:12px;line-height:1}.sample-info{width:100%}.sample-name{margin:0 0 4px;font-size:14px;font-weight:600;color:#fff}.sample-description{margin:0 0 8px;font-size:11px;color:#888;line-height:1.4}.sample-duration{display:inline-block;padding:2px 8px;background:#1a1a1a;border-radius:10px;font-size:10px;color:#666;font-family:monospace}.samples-footer{padding-top:16px;border-top:1px solid #333}.samples-hint{margin:0;font-size:12px;color:#666;text-align:center}@media(max-width:768px){.samples-dialog{width:100%;max-width:none;max-height:100vh;border-radius:0}.samples-dialog-header{padding:12px 16px}.samples-dialog-header h2{font-size:16px}.samples-dialog-content{padding:16px}.samples-categories{gap:6px;margin-bottom:16px}.samples-category-btn{padding:6px 12px;font-size:12px}.samples-grid{grid-template-columns:repeat(2,1fr);gap:12px}.sample-card{padding:12px}.sample-thumbnail{font-size:32px;margin-bottom:8px}.sample-name{font-size:13px}.sample-description{font-size:10px}}@media(max-width:480px){.samples-dialog-content{padding:12px}.samples-grid{grid-template-columns:1fr;gap:10px}.sample-card{flex-direction:row;text-align:left;padding:10px}.sample-thumbnail{font-size:28px;margin-bottom:0;margin-right:12px;flex-shrink:0}.sample-info{text-align:left}}.shortcuts-dialog-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.shortcuts-dialog{background:#1a1a1a;border-radius:12px;width:600px;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px #00000080}.shortcuts-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #333;flex-shrink:0}.shortcuts-dialog-header h2{margin:0;font-size:18px;font-weight:600;color:#fff}.shortcuts-close-btn{background:transparent;border:none;color:#888;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .1s,color .1s}.shortcuts-close-btn:hover{background:#333;color:#fff}.shortcuts-dialog-content{padding:20px;overflow-y:auto;flex:1}.shortcuts-category{margin-bottom:24px}.shortcuts-category:last-of-type{margin-bottom:16px}.shortcuts-category-title{margin:0 0 12px;font-size:14px;font-weight:600;color:#4a9eff;text-transform:uppercase;letter-spacing:.5px}.shortcuts-list{display:flex;flex-direction:column;gap:8px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#252525;border-radius:6px}.shortcut-keys{display:flex;align-items:center;gap:4px}.shortcut-key{display:inline-block;padding:4px 8px;background:#333;border:1px solid #444;border-radius:4px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:12px;font-weight:500;color:#fff;min-width:24px;text-align:center;box-shadow:0 1px 2px #0003}.shortcut-separator{color:#666;font-size:12px;margin:0 2px}.shortcut-description{font-size:13px;color:#aaa}.shortcuts-footer{padding-top:16px;border-top:1px solid #333}.shortcuts-hint{margin:0;font-size:12px;color:#666;text-align:center}.shortcuts-hint kbd{padding:2px 6px;background:#333;border:1px solid #444;border-radius:3px;font-family:inherit;font-size:11px;color:#aaa}@media(max-width:768px){.shortcuts-dialog{width:100%;max-width:none;max-height:100vh;border-radius:0}.shortcuts-dialog-header{padding:12px 16px}.shortcuts-dialog-header h2{font-size:16px}.shortcuts-dialog-content{padding:16px}.shortcuts-category{margin-bottom:20px}.shortcuts-category-title{font-size:13px}.shortcut-item{padding:6px 10px}.shortcut-key{padding:3px 6px;font-size:11px;min-width:20px}.shortcut-description{font-size:12px}}@media(max-width:480px){.shortcuts-dialog-content{padding:12px}.shortcut-item{flex-direction:column;align-items:flex-start;gap:6px}.shortcut-description{font-size:11px}}.element-panel{display:flex;flex-direction:column;background:#1a1a1a;height:100%}.element-panel .panel-header{padding:12px 16px;background:#252525;border-bottom:1px solid #333;color:#aaa;font-size:12px;font-weight:500}.element-panel .panel-content{flex:1;overflow-y:auto;padding:12px}.element-add-section{margin-bottom:16px}.section-label{display:block;margin-bottom:8px;color:#666;font-size:11px;text-transform:uppercase;letter-spacing:.5px}.element-type-buttons{display:flex;flex-wrap:wrap;gap:8px}.element-type-btn{flex:1 1 calc(33.333% - 8px);min-width:60px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:#252525;border:1px solid #333;border-radius:6px;color:#aaa;cursor:pointer;transition:all .1s}.element-type-btn:hover{background:#333;border-color:#444;color:#fff}.element-type-icon{font-size:18px;line-height:1}.element-type-label{font-size:10px}.element-list-section{flex:1}.element-list{display:flex;flex-direction:column;gap:2px}.element-list-empty{text-align:center;padding:20px;color:#666}.element-list-empty p{margin:0;font-size:13px}.element-list-empty .hint{margin-top:4px;font-size:11px;color:#555}.element-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#252525;border-radius:4px;cursor:pointer;transition:background .1s}.element-item:hover{background:#2a2a2a}.element-item.selected{background:#333;box-shadow:inset 0 0 0 1px #4a9eff}.element-item.hidden{opacity:.5}.element-item.locked .element-name{color:#666}.element-icon{width:20px;text-align:center;font-size:14px;color:#666}.element-name{flex:1;font-size:12px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.element-actions{display:flex;gap:2px;opacity:0;transition:opacity .1s}.element-item:hover .element-actions,.element-item.selected .element-actions{opacity:1}.element-action-btn{width:22px;height:22px;padding:0;background:transparent;border:none;border-radius:3px;color:#666;font-size:12px;cursor:pointer;transition:all .1s}.element-action-btn:hover{background:#444;color:#fff}.element-action-btn.active{color:#4a9eff}.element-controls{display:flex;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid #333;width:100%}.element-control-btn{flex:1;padding:4px;background:#2a2a2a;border:1px solid #333;border-radius:3px;color:#888;font-size:12px;cursor:pointer;transition:all .1s}.element-control-btn:hover{background:#333;border-color:#444;color:#fff}.element-control-btn.delete{color:#e74c3c}.element-control-btn.delete:hover{background:#e74c3c;border-color:#e74c3c;color:#fff}.element-item.selected{flex-wrap:wrap}.element-item.group{background:#2a2a35;border-left:2px solid #9b59b6}.element-item.group .element-icon{color:#9b59b6}.group-count{color:#666;font-size:10px}.multi-select-hint{color:#4a9eff;font-weight:400}.element-group-section{display:flex;gap:8px;margin-bottom:12px;padding:8px;background:#252525;border-radius:6px}.element-group-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;background:#9b59b6;border:none;border-radius:4px;color:#fff;font-size:12px;cursor:pointer;transition:all .1s}.element-group-btn:hover{background:#b06cc7}.element-group-btn.ungroup{background:#3498db}.element-group-btn.ungroup:hover{background:#5faee3}.preset-panel{display:flex;flex-direction:column;height:100%;background:#1e1e1e;border-top:1px solid #333}.preset-panel-header{padding:12px 16px;border-bottom:1px solid #333}.preset-panel-header h3{margin:0;font-size:13px;font-weight:500;color:#888;text-transform:uppercase;letter-spacing:.5px}.preset-panel-empty{padding:20px 16px;text-align:center}.preset-panel-empty p{margin:0;color:#666;font-size:13px}.preset-panel-content{flex:1;overflow-y:auto;padding:12px}.preset-target{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;background:#252525;border-radius:4px}.preset-target-label{color:#888;font-size:12px}.preset-target-name{color:#4a9eff;font-size:12px;font-weight:500}.preset-categories{display:flex;gap:4px;margin-bottom:12px}.preset-category-btn{flex:1;padding:6px 8px;background:#252525;border:1px solid #333;border-radius:4px;color:#888;font-size:11px;cursor:pointer;transition:all .1s}.preset-category-btn:hover{background:#333;color:#fff}.preset-category-btn.active{background:#4a9eff;border-color:#4a9eff;color:#fff}.preset-list{display:flex;flex-direction:column;gap:4px}.preset-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#252525;border:1px solid #333;border-radius:4px;color:#ccc;font-size:13px;cursor:pointer;transition:all .1s;text-align:left}.preset-item:hover{background:#333;border-color:#4a9eff;color:#fff}.preset-item-name{font-weight:500}.preset-item-duration{color:#666;font-size:11px}.preset-item:hover .preset-item-duration{color:#888}.preset-applied-message{margin-top:12px;padding:8px 12px;background:#2ecc71;border-radius:4px;color:#fff;font-size:12px;text-align:center;animation:fadeInOut 2s ease-in-out}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-5px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}.onboarding-overlay{position:fixed;inset:0;z-index:2000;pointer-events:none}.onboarding-mask{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto}.spotlight-border{position:absolute;border:2px solid #4a9eff;border-radius:8px;box-shadow:0 0 0 4px #4a9eff33;pointer-events:none;animation:spotlight-pulse 2s ease-in-out infinite}@keyframes spotlight-pulse{0%,to{box-shadow:0 0 0 4px #4a9eff33}50%{box-shadow:0 0 0 8px #4a9eff26}}.onboarding-tooltip{position:absolute;width:320px;background:#1e1e1e;border:1px solid #444;border-radius:12px;padding:20px;box-shadow:0 8px 32px #0006;pointer-events:auto;animation:tooltip-appear .2s ease-out}@keyframes tooltip-appear{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.onboarding-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.onboarding-step-counter{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.5px}.onboarding-skip{padding:4px 8px;background:transparent;border:none;border-radius:4px;color:#888;font-size:11px;cursor:pointer;transition:color .1s,background .1s}.onboarding-skip:hover{background:#333;color:#fff}.onboarding-title{margin:0 0 8px;font-size:18px;font-weight:600;color:#fff}.onboarding-content{margin:0 0 20px;font-size:14px;line-height:1.5;color:#aaa}.onboarding-nav{display:flex;justify-content:space-between;gap:12px}.onboarding-btn{flex:1;padding:10px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .1s}.onboarding-btn-primary{background:#4a9eff;color:#fff}.onboarding-btn-primary:hover{background:#3a8eef}.onboarding-btn-secondary{background:#333;color:#aaa}.onboarding-btn-secondary:hover{background:#444;color:#fff}.onboarding-progress{display:flex;justify-content:center;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid #333}.onboarding-dot{width:8px;height:8px;padding:0;background:#444;border:none;border-radius:50%;cursor:pointer;transition:background .1s,transform .1s}.onboarding-dot:hover{background:#666;transform:scale(1.2)}.onboarding-dot.active{background:#4a9eff}@media(max-width:768px){.onboarding-tooltip{width:calc(100vw - 32px);max-width:320px;left:50%!important;transform:translate(-50%);top:auto!important;bottom:24px}.onboarding-title{font-size:16px}.onboarding-content{font-size:13px}}.status-bar{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 16px;background:#1a1a1a;border-top:1px solid #333;font-size:12px;color:#888}.status-bar-left{display:flex;align-items:center;gap:12px}.status-bar-version{color:#4a9eff;font-weight:500}.status-bar-right{display:flex;align-items:center;gap:4px}.status-bar-heart{color:#ff6b6b;font-size:13px;animation:status-bar-heartbeat 1.2s ease-in-out infinite}@keyframes status-bar-heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.status-bar a{color:#4a9eff;text-decoration:none;transition:color .2s ease}.status-bar a:hover{color:#6ab0ff;text-decoration:underline}@media(max-width:600px){.status-bar{font-size:10px;padding:0 10px;height:28px}}.editor{display:flex;flex-direction:column;height:100vh;background:#0d0d0d;color:#fff;font-family:system-ui,-apple-system,sans-serif}.editor-header{display:flex;align-items:baseline;gap:12px;padding:12px 20px;background:#1a1a1a;border-bottom:1px solid #333;flex-shrink:0}.editor-header h1{margin:0;font-size:18px;font-weight:600;color:#4a9eff}.editor-subtitle{font-size:12px;color:#666}.settings-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:4px;color:#888;cursor:pointer;transition:background .1s,color .1s;margin-left:auto;margin-right:8px}.settings-btn:hover{background:#333;color:#fff}.help-tour-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:4px;color:#888;cursor:pointer;transition:background .1s,color .1s;margin-left:auto}.help-tour-btn:hover{background:#333;color:#4a9eff}.editor-main{display:flex;flex-direction:row;flex:1;overflow:hidden}.editor-sidebar{width:280px;flex-shrink:0;border-color:#333;overflow-y:auto}.editor-sidebar-left{border-right:1px solid #333}.editor-sidebar-right{border-left:1px solid #333}.editor-center{display:flex;flex-direction:column;flex:1;padding:16px;gap:16px;overflow:hidden;min-width:0}.editor-preview{flex:1;min-height:200px}.editor-controls{flex-shrink:0}.editor-timeline{flex-shrink:0;height:200px;min-height:150px}.mobile-sidebar-toggle{display:none;position:fixed;bottom:16px;z-index:100;width:48px;height:48px;border-radius:50%;border:none;background:#4a9eff;color:#fff;font-size:20px;cursor:pointer;box-shadow:0 2px 8px #0000004d;transition:transform .2s,background .2s}.mobile-sidebar-toggle:hover{background:#6ab0ff;transform:scale(1.05)}.mobile-sidebar-toggle.left{left:16px}.mobile-sidebar-toggle.right{right:16px}.mobile-sidebar-toggle.active{background:#e74c3c}.mobile-sidebar-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:90}@media(max-width:1024px){.editor-sidebar{width:240px}.editor-center{padding:12px;gap:12px}}@media(max-width:768px){.editor-header{flex-wrap:wrap;padding:8px 12px;gap:8px}.editor-header h1{font-size:16px}.editor-subtitle{display:none}.settings-btn{margin-left:0;margin-right:0;order:3}.editor-main{flex-direction:column;position:relative}.editor-sidebar{position:fixed;top:0;bottom:0;width:280px;max-width:85vw;z-index:95;transform:translate(-100%);transition:transform .3s ease;border:none}.editor-sidebar-left{left:0;border-right:1px solid #333}.editor-sidebar-right{right:0;left:auto;transform:translate(100%);border-left:1px solid #333}.editor-sidebar.open{transform:translate(0)}.mobile-sidebar-toggle{display:flex;align-items:center;justify-content:center}.mobile-sidebar-overlay.visible{display:block}.editor-center{flex:1;padding:8px;gap:8px;min-height:0}.editor-preview{min-height:150px}.editor-timeline{height:150px;min-height:120px}}@media(max-width:480px){.editor-header{padding:6px 8px}.editor-header h1{font-size:14px}.editor-center{padding:6px;gap:6px}.editor-timeline{height:120px;min-height:100px}}.gallery-page{min-height:100vh;background:#0d0d0d;color:#e0e0e0}.gallery-header{background:linear-gradient(180deg,#1a1a1a,#0d0d0d);border-bottom:1px solid #2a2a2a;padding:24px 32px}.header-content{max-width:1400px;margin:0 auto}.header-left{display:flex;align-items:center;gap:24px;margin-bottom:8px}.back-link{display:flex;align-items:center;gap:8px;color:#888;text-decoration:none;font-size:14px;transition:color .2s}.back-link:hover{color:#4a9eff}.gallery-header h1{margin:0;font-size:28px;font-weight:600;color:#fff}.header-subtitle{margin:0;color:#666;font-size:14px}.gallery-filters{max-width:1400px;margin:0 auto;padding:24px 32px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}.search-box{display:flex;align-items:center;gap:12px;background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:10px 16px;flex:1;min-width:250px;max-width:400px}.search-box svg{color:#666;flex-shrink:0}.search-box input{flex:1;background:none;border:none;color:#e0e0e0;font-size:14px;outline:none}.search-box input::placeholder{color:#666}.category-filters{display:flex;gap:8px;flex-wrap:wrap}.category-btn{padding:8px 16px;background:#1a1a1a;border:1px solid #333;border-radius:20px;color:#888;font-size:13px;cursor:pointer;transition:all .2s;text-transform:capitalize}.category-btn:hover{border-color:#4a9eff;color:#fff}.category-btn.active{background:#4a9eff;border-color:#4a9eff;color:#fff}.gallery-grid{max-width:1400px;margin:0 auto;padding:0 32px 48px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}.example-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.example-card:hover{border-color:#3a3a3a;box-shadow:0 8px 32px #0000004d}.example-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 8px}.example-header h3{margin:0;font-size:16px;font-weight:600;color:#fff}.example-category{font-size:11px;text-transform:uppercase;color:#4a9eff;background:#4a9eff1a;padding:4px 8px;border-radius:4px}.example-description{margin:0;padding:0 20px 16px;font-size:13px;color:#888;line-height:1.5}.example-preview{background:#111;height:180px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.preview-container{width:100%;height:100%;position:relative}.preview-canvas{display:block}.example-controls{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-top:1px solid #2a2a2a}.renderer-toggle{display:flex;gap:4px;background:#111;border-radius:6px;padding:3px}.renderer-btn{padding:6px 12px;background:transparent;border:none;border-radius:4px;color:#666;font-size:12px;cursor:pointer;transition:all .2s}.renderer-btn:hover{color:#aaa}.renderer-btn.active{background:#333;color:#fff}.play-btn{padding:8px 24px;background:#4a9eff;border:none;border-radius:6px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s}.play-btn:hover{background:#3a8eef}.example-tags{display:flex;gap:6px;padding:0 20px 16px;flex-wrap:wrap}.tag{font-size:11px;color:#666;background:#222;padding:4px 8px;border-radius:4px}.no-results{grid-column:1 / -1;text-align:center;padding:60px 20px;color:#666}.gallery-footer{background:#1a1a1a;border-top:1px solid #2a2a2a;padding:32px;text-align:center}.gallery-footer p{margin:0 0 20px;color:#666;font-size:14px}.gallery-footer strong{color:#4a9eff}.cta-btn{display:inline-block;padding:12px 32px;background:#4a9eff;border-radius:8px;color:#fff;text-decoration:none;font-size:14px;font-weight:500;transition:background .2s}.cta-btn:hover{background:#3a8eef}@media(max-width:768px){.gallery-header{padding:16px}.header-left{flex-direction:column;align-items:flex-start;gap:12px}.gallery-filters{padding:16px;flex-direction:column;align-items:stretch}.search-box{max-width:none}.gallery-grid{padding:0 16px 32px;grid-template-columns:1fr}}.preview-container .animated-box{width:60px;height:60px;background:linear-gradient(135deg,#4a9eff,#8b5cf6);border-radius:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-container .animated-circle{width:50px;height:50px;background:linear-gradient(135deg,#22c55e,#10b981);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-container .animated-text{font-size:24px;font-weight:700;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap}.preview-container .loading-bar{width:200px;height:6px;background:#333;border-radius:3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden}.preview-container .loading-bar-fill{width:100%;height:100%;background:linear-gradient(90deg,#4a9eff,#8b5cf6);border-radius:3px;transform:scaleX(0);transform-origin:left center}.preview-container .notification-card{width:220px;padding:16px;background:#2a2a2a;border-radius:12px;border-left:4px solid #4a9eff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translate(100px);opacity:0}.preview-container .notification-title{font-size:14px;font-weight:600;color:#fff;margin:0 0 4px}.preview-container .notification-message{font-size:12px;color:#888;margin:0}.preview-container .button{padding:12px 32px;background:#4a9eff;border-radius:8px;color:#fff;font-size:14px;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer}.preview-container .card-stack{position:relative;width:120px;height:80px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-container .stack-card{width:100%;height:100%;background:linear-gradient(135deg,#4a9eff,#8b5cf6);border-radius:8px;position:absolute;top:0;left:0}.preview-container .stack-card:nth-child(2){background:linear-gradient(135deg,#8b5cf6,#ec4899);transform:translate(10px,-10px)}.preview-container .stack-card:nth-child(3){background:linear-gradient(135deg,#ec4899,#f43f5e);transform:translate(20px,-20px)}.preview-container .orbit-container{position:relative;width:120px;height:120px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-container .orbit-center{width:30px;height:30px;background:#4a9eff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-container .orbit-dot{width:12px;height:12px;background:#8b5cf6;border-radius:50%;position:absolute;top:0;left:50%;transform:translate(-50%)}.preview-container .typing-cursor{width:2px;height:24px;background:#4a9eff;flex-shrink:0}.preview-container .counter{font-size:48px;font-weight:700;color:#4a9eff;font-family:monospace;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-container .progress-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-container .progress-ring circle{fill:none;stroke-width:6}.preview-container .progress-ring .bg{stroke:#333}.preview-container .progress-ring .progress{stroke:#4a9eff;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}.splash-container{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden}.splash-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}.splash-logo{font-size:72px;font-weight:700;letter-spacing:-2px;opacity:0}.splash-logo-tiny{color:#e0e0e0}.splash-logo-fly{color:#00d4ff;text-shadow:0 0 30px rgba(0,212,255,.5)}.splash-tagline{font-size:18px;color:#a0a0a0;letter-spacing:2px;text-transform:uppercase;opacity:0}.splash-fly{position:absolute;border-radius:50%;opacity:0;pointer-events:none}.splash-fly-1{width:12px;height:12px;background:linear-gradient(135deg,#00d4ff,#09c);box-shadow:0 0 20px #00d4ffcc,0 0 40px #00d4ff66;top:-60px;left:calc(50% - 6px)}.splash-fly-2{width:8px;height:8px;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);box-shadow:0 0 15px #ff6b6bcc,0 0 30px #ff6b6b66;top:-40px;left:calc(50% - 4px)}.splash-fly-3{width:10px;height:10px;background:linear-gradient(135deg,#ffd93d,#ffcd00);box-shadow:0 0 18px #ffd93dcc,0 0 35px #ffd93d66;top:80px;left:calc(50% - 5px)}.splash-hint{position:absolute;bottom:60px;font-size:14px;color:#606060;opacity:0}.splash-status-bar{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#0000004d;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:gray}.splash-status-left{display:flex;align-items:center;gap:12px}.splash-version{color:#00d4ff;font-weight:500}.splash-status-right{display:flex;align-items:center;gap:4px}.splash-heart{color:#ff6b6b;font-size:14px;animation:heartbeat 1.2s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.splash-status-bar a{color:#00d4ff;text-decoration:none;transition:color .2s ease}.splash-status-bar a:hover{color:#4de0ff;text-decoration:underline}@media(max-width:600px){.splash-logo{font-size:48px}.splash-tagline{font-size:14px;letter-spacing:1px}.splash-fly-1{width:10px;height:10px}.splash-fly-2{width:6px;height:6px}.splash-fly-3{width:8px;height:8px}.splash-status-bar{font-size:11px;padding:0 12px;height:32px}.splash-hint{bottom:50px}}