@keyframes canvas-shell-pulse{50%{opacity:.45}}.anima-canvas{--canvas-shell-bg: var(--bg-app, #f3f3f3);--canvas-shell-panel: var(--panel, #fff);--canvas-shell-border: var(--border, #d1d1d1);--canvas-shell-border-soft: var(--border-soft, #e0e0e0);--canvas-shell-surface: var(--surface, #f3f3f3);--canvas-shell-text: var(--text, #242424);--canvas-shell-text-2: var(--text-2, #4d4d4d);--canvas-shell-text-dim: var(--text-dim, #757575);--canvas-shell-ink: var(--ink, #242424);--canvas-shell-ink-text: var(--ink-text, #fff);color:var(--canvas-shell-text);font-family:var(--font-sans, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);font-size:11px}[data-theme=dark] .anima-canvas,.dark .anima-canvas{--canvas-shell-bg: var(--bg-app, #141414);--canvas-shell-panel: var(--panel, #1c1c1c);--canvas-shell-border: var(--border, #343434);--canvas-shell-border-soft: var(--border-soft, #2a2a2a);--canvas-shell-surface: var(--surface, #262626);--canvas-shell-text: var(--text, #e6e6e6);--canvas-shell-text-2: var(--text-2, #bdbdbd);--canvas-shell-text-dim: var(--text-dim, #8a8a8a);--canvas-shell-ink: var(--ink, #f3f3f3);--canvas-shell-ink-text: var(--ink-text, #141414)}.anima-canvas *,.anima-canvas *:before,.anima-canvas *:after{box-sizing:border-box}.anima-canvas button{color:inherit;font:inherit;background:none;border:0;padding:0}.anima-canvas .editor-root{display:flex;flex-direction:column;width:100%;height:100%;padding:8px;gap:8px;background:var(--canvas-shell-bg)}.anima-canvas .tabbed-root .editor-root{padding-top:4px}.anima-canvas .editor-main{display:flex;flex:1;min-height:0;gap:8px}.anima-canvas .left-panel{width:240px;flex:none;display:flex;flex-direction:column;overflow:hidden;z-index:10;background:var(--canvas-shell-panel);border:1px solid var(--canvas-shell-border);border-radius:var(--radius-m, 8px)}.anima-canvas .panel-divider{height:1px;background:var(--canvas-shell-border-soft);flex:none}.anima-canvas .canvas-area{flex:1;position:relative;min-width:0;overflow:hidden;background:var(--canvas-shell-panel);border:1px solid var(--canvas-shell-border);border-radius:var(--radius-m, 8px)}.anima-canvas .inspector{width:258px;flex:none;overflow-y:auto;overflow-x:hidden;z-index:10;padding-bottom:40px;scrollbar-width:none;background:var(--canvas-shell-panel);border:1px solid var(--canvas-shell-border);border-radius:var(--radius-m, 8px)}.anima-canvas .inspector::-webkit-scrollbar{display:none}.anima-canvas .toolbar{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;gap:2px;z-index:15;padding:4px;background:var(--canvas-shell-panel);border:1px solid var(--canvas-shell-border);border-radius:var(--radius-m, 8px);box-shadow:var(--shadow-pop, 0 4px 16px rgba(0, 0, 0, .08))}.anima-canvas .tool-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-s, 5px);color:var(--canvas-shell-text-2)}.anima-canvas .tool-btn:hover:not(:disabled){background:var(--canvas-shell-surface);color:var(--text-strong, #242424)}.anima-canvas .tool-btn.active{background:var(--canvas-shell-ink);color:var(--canvas-shell-ink-text)}.anima-canvas .tool-btn:disabled,.anima-canvas .tool-chevron:disabled{cursor:default}.anima-canvas .tool-group{position:relative;display:flex;align-items:center}.anima-canvas .tool-chevron{width:12px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--canvas-shell-text-dim);border-radius:4px;margin-left:-2px}.anima-canvas .tool-chevron:hover:not(:disabled){color:var(--text-strong, #242424);background:var(--surface-hover, #ebebeb)}.anima-canvas .tool-flyout{position:absolute;bottom:42px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;min-width:150px;padding:4px;background:var(--canvas-shell-panel);border:1px solid var(--canvas-shell-border);border-radius:var(--radius-m, 8px);box-shadow:var(--shadow-pop, 0 4px 16px rgba(0, 0, 0, .08))}.anima-canvas .flyout-item{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:4px;color:var(--canvas-shell-text-2)}.anima-canvas .flyout-item span{flex:1;text-align:left}.anima-canvas .flyout-item kbd{color:var(--canvas-shell-text-dim);font-size:10px}.anima-canvas .canvas-shell-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background-color:var(--canvas-shell-surface);background-image:radial-gradient(circle,color-mix(in srgb,var(--canvas-shell-text-dim) 35%,transparent) 1px,transparent 1px);background-size:16px 16px}.anima-canvas .canvas-shell-status{color:var(--canvas-shell-text-dim)}.anima-canvas .canvas-shell-status-line{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:500}.anima-canvas .canvas-shell-dot{width:6px;height:6px;border-radius:50%;background:var(--canvas-shell-text-dim);animation:canvas-shell-pulse 1.4s ease-in-out infinite}.anima-canvas .canvas-shell-section{padding:12px}.anima-canvas .canvas-shell-section+.canvas-shell-section{border-top:1px solid var(--canvas-shell-border-soft)}.anima-canvas .canvas-shell-section.grow{flex:1}.anima-canvas .canvas-shell-heading{margin-bottom:10px;color:var(--canvas-shell-text-dim);font-family:var(--font-mono, ui-monospace, monospace);font-size:10px;letter-spacing:1.2px;text-transform:uppercase}.anima-canvas .canvas-shell-lines{display:flex;flex-direction:column;gap:8px}.anima-canvas .canvas-shell-line{height:20px;border-radius:4px;background:var(--canvas-shell-surface);animation:canvas-shell-pulse 1.4s ease-in-out infinite}.anima-canvas .canvas-shell-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}@media (prefers-reduced-motion: reduce){.anima-canvas .canvas-shell-dot,.anima-canvas .canvas-shell-line{animation:none}}