*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#111;--surface:#1c1c1c;--surface2:#242424;--border:#333;--text:#e0e0e0;--text-muted:#888;--accent:#5b8fd4;--accent-hover:#7aaae8}html,body{background:var(--bg);height:100%;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:13px;overflow:hidden}body{display:flex}#sidebar{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;width:240px;min-width:240px;display:flex;overflow:hidden auto}.app-title{border-bottom:1px solid var(--border);letter-spacing:.04em;color:var(--text);padding:14px 16px;font-size:14px;font-weight:600}.panel{border-bottom:1px solid var(--border);flex-direction:column;gap:10px;padding:14px 16px;display:flex}.panel-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:11px;font-weight:600}.btn{border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:4px;justify-content:center;align-items:center;width:100%;padding:6px 12px;font-size:12px;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover{background:#2e2e2e;border-color:#555}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{border-color:var(--border);color:var(--text-muted);background:0 0}.btn-ghost:hover{color:var(--text)}.info-box{min-height:16px}.tag{color:var(--text-muted);word-break:break-all;font-size:11px;line-height:1.4}.anim-list{flex-direction:column;gap:4px;max-height:40vh;display:flex;overflow-y:auto}.anim-entry{background:var(--surface2);border:1px solid #0000;border-radius:4px;align-items:center;gap:6px;padding:5px 6px;display:flex}.anim-entry.is-active{border-color:var(--accent)}.anim-name{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;overflow:hidden}.btn-play{flex-shrink:0;width:auto;padding:2px 8px;font-size:11px}.btn-play.is-active{background:var(--accent);border-color:var(--accent);color:#fff}.btn-delete{width:auto;color:var(--text-muted);background:0 0;border-color:#0000;flex-shrink:0;padding:2px 6px;font-size:12px}.btn-delete:hover{color:#e06060;background:#3a1a1a;border-color:#6b2a2a}.empty-state{color:var(--text-muted);font-size:11px}#canvas-container{flex:1;position:relative;overflow:hidden}#canvas{width:100%;height:100%;display:block}.loading{color:var(--text-muted);pointer-events:none;background:#0000008c;justify-content:center;align-items:center;font-size:13px;display:flex;position:absolute;inset:0}.loading.hidden{display:none}