:root{--bg-canvas: #1a1a1a;--bg-panel: rgba(30, 30, 35, .85);--bg-panel-hover: rgba(40, 40, 45, .9);--bg-toolbar: rgba(25, 25, 30, .95);--bg-active: rgba(80, 120, 255, .2);--border-subtle: rgba(255, 255, 255, .08);--border-focus: rgba(80, 120, 255, .4);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--text-tertiary: rgba(255, 255, 255, .5);--accent-primary: #5078ff;--accent-hover: #6b8dff;--accent-active: #4066ee;--success: #4ade80;--warning: #fbbf24;--danger: #f87171;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-2xl: 32px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--shadow-md: 0 4px 16px rgba(0, 0, 0, .25);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .35);--glass-blur: blur(20px);--glass-border: 1px solid rgba(255, 255, 255, .1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-spring: .35s cubic-bezier(.34, 1.56, .64, 1);--z-canvas: 1;--z-timeline: 10;--z-layers: 20;--z-toolbar: 30;--z-modal: 100}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-canvas);color:var(--text-primary);touch-action:none;user-select:none;-webkit-user-select:none}#root{width:100%;height:100%;position:relative}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.app-container{width:100%;height:100%;position:relative;display:flex;flex-direction:column}.canvas-container{flex:1;position:relative;overflow:hidden;background:transparent}.canvas-viewport{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.canvas-viewport-controls{position:absolute;bottom:160px;right:20px;z-index:25}.canvas-zoom-indicator{position:absolute;bottom:210px;left:50%;transform:translate(-50%);z-index:25;min-width:120px;text-align:center;-webkit-user-select:none;user-select:none}.canvas-grid{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.canvas-boundary{stroke:var(--accent-primary);stroke-width:2;fill:none;opacity:.5}.canvas-grid-line{stroke:#ffffff0d;stroke-width:1}.glass-panel{background:var(--bg-panel);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.glass-toolbar{background:var(--bg-toolbar);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);box-shadow:var(--shadow-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-base);outline:none;white-space:nowrap}.btn:active{transform:scale(.96)}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);border:1px solid transparent}.btn-icon:hover{background:var(--bg-panel-hover);color:var(--text-primary);border-color:var(--border-subtle);transform:translateY(-1px);box-shadow:0 4px 12px #0003}.btn-icon.active{background:#5078ff26;color:var(--accent-primary);border-color:var(--accent-primary);box-shadow:0 0 15px #5078ff66,inset 0 0 10px #5078ff1a;animation:glowPulse 2s infinite alternate}.btn-icon.active svg{filter:drop-shadow(0 0 5px var(--accent-primary))}@keyframes glowPulse{0%{box-shadow:0 0 10px #5078ff4d,inset 0 0 5px #5078ff1a}to{box-shadow:0 0 20px #5078ff99,inset 0 0 15px #5078ff33}}.btn-primary{background:var(--accent-primary);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:active{background:var(--accent-active)}.toolbar{position:absolute;top:60px;left:50%;transform:translate(-50%);z-index:var(--z-toolbar);display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-lg)}.toolbar-section{display:flex;gap:var(--spacing-xs);padding:0 var(--spacing-xs);border-right:1px solid var(--border-subtle)}.toolbar-section:last-child{border-right:none}.layers-panel{position:absolute;left:var(--spacing-lg);top:80px;width:280px;max-height:calc(100vh - 200px);z-index:var(--z-layers);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}.layers-header{padding:var(--spacing-md);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between}.layers-header h3{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.layers-list{flex:1;overflow-y:auto;padding:var(--spacing-sm)}.layer-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);margin-bottom:var(--spacing-xs);border:1px solid transparent}.layer-item:hover{background:var(--bg-panel-hover)}.layer-item.active{background:var(--bg-active);border-color:var(--border-focus);box-shadow:0 0 12px #5078ff26}.layer-item.selected{background:#5078ff26;border-color:var(--accent-primary);border-style:dashed}.layer-thumbnail{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--bg-canvas);border:1px solid var(--border-subtle);flex-shrink:0}.layer-info{flex:1;min-width:0}.layer-name{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-controls{display:flex;gap:var(--spacing-xs)}.timeline{position:absolute;bottom:0;left:0;right:0;height:140px;z-index:var(--z-timeline);border-top:1px solid var(--border-subtle);display:flex;flex-direction:column}.timeline-controls{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-lg);border-bottom:1px solid var(--border-subtle)}.timeline-frames{flex:1;display:flex;gap:var(--spacing-sm);padding:var(--spacing-md);overflow-x:auto;overflow-y:hidden}.timeline-frames::-webkit-scrollbar{height:6px}.timeline-frames::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.timeline-frames::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.timeline-frames::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.frame-item{flex-shrink:0;width:80px;height:80px;border-radius:var(--radius-md);background:var(--bg-canvas);border:2px solid var(--border-subtle);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.frame-item:hover{border-color:var(--text-tertiary);transform:translateY(-2px)}.frame-item.active{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--bg-active)}.frame-number{position:absolute;bottom:4px;right:6px;font-size:11px;font-weight:600;color:var(--text-tertiary);background:#0009;padding:2px 6px;border-radius:4px}.slider-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.slider-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-secondary)}.slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:#ffffff1a;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-primary);cursor:pointer;transition:all var(--transition-fast)}.slider::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.1)}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-primary);cursor:pointer;border:none;transition:all var(--transition-fast)}.slider::-moz-range-thumb:hover{background:var(--accent-hover);transform:scale(1.1)}.color-picker-button{width:40px;height:40px;border-radius:var(--radius-md);border:2px solid var(--border-subtle);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.color-picker-button:hover{border-color:var(--text-tertiary);transform:scale(1.05)}.color-picker-button:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 25%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.1) 50%,transparent 50%,transparent 75%,rgba(255,255,255,.1) 75%);background-size:8px 8px;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.animate-fade-in{animation:fadeIn var(--transition-base) ease-out}.animate-slide-up{animation:slideUp var(--transition-spring) ease-out}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.w-full{width:100%}.h-full{height:100%}@media(max-width:768px){.layers-panel{width:240px;left:var(--spacing-sm);top:70px}.toolbar{top:60px;left:var(--spacing-sm);right:var(--spacing-sm);transform:none;flex-wrap:wrap}.timeline{height:120px}.frame-item{width:60px;height:60px}}@media(max-width:480px){.layers-panel{width:200px}.btn-icon{width:36px;height:36px}}.modal-overlay{position:fixed;inset:0;background-color:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);animation:fadeIn .2s ease-out}.modal-content{background:var(--bg-panel);border:var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:slideUp .3s ease-out}.menu-bar{background:var(--bg-toolbar);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--border-subtle)}.menu-btn{transition:all .2s;border-radius:4px}.menu-btn:hover,.menu-btn.active{background-color:var(--bg-panel-hover)!important}.dropdown-menu{background:var(--bg-panel);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-subtle);animation:fadeIn .1s ease-out}.dropdown-item{transition:all .15s}.dropdown-item:hover{background-color:var(--accent-primary)!important;color:#fff!important}