diff --git a/src/VisualEditor/VisualEditor.css b/src/VisualEditor/VisualEditor.css
index af828c4..d399f3a 100644
--- a/src/VisualEditor/VisualEditor.css
+++ b/src/VisualEditor/VisualEditor.css
@@ -22,7 +22,8 @@ text.highlight {
 }
 
 .selecting {
-  fill: rgba(0, 0, 255, 0.2);
+  fill: blue;
+  fill-opacity: 0.2;
   stroke-width: 1px;
   stroke:black;
   stroke-dasharray: 7 6;
@@ -36,7 +37,7 @@ text.highlight {
 }
 
 .rountangle:hover {
-  /* stroke: darkcyan; */
+  /* stroke: blue; */
   /* stroke-opacity: 0.2; */
   /* fill: #eee; */
   /* stroke-width: 4px; */
@@ -67,7 +68,7 @@ text.highlight {
   stroke-width: 16px;
 }
 .lineHelper:hover {
-  stroke: darkcyan;
+  stroke: blue;
   stroke-opacity: 0.2;
   cursor: grab;
 }
@@ -78,7 +79,7 @@ text.highlight {
   stroke-width: 16px;
 }
 .pathHelper:hover {
-  stroke: darkcyan;
+  stroke: blue;
   stroke-opacity: 0.2;
   cursor: grab;
 }
@@ -88,7 +89,7 @@ text.highlight {
   fill: rgba(0, 0, 0, 0);
 }
 .circleHelper:hover {
-  fill: darkcyan;
+  fill: blue;
   fill-opacity: 0.2;
   cursor: grab;
 }
@@ -136,7 +137,7 @@ text.selected, text.selected:hover {
   font-weight: 600;
 }
 text:hover {
-  fill: darkcyan;
+  fill: blue;
   /* cursor: grab; */
 }
 
diff --git a/src/VisualEditor/interpreter.ts b/src/VisualEditor/interpreter.ts
index 467ee07..e23edc3 100644
--- a/src/VisualEditor/interpreter.ts
+++ b/src/VisualEditor/interpreter.ts
@@ -20,19 +20,25 @@ type ActionScope = {
   raised: RaisedEvents,
 };
 
-export function enter(state: ConcreteState, rt: ActionScope): ({mode: Mode} & ActionScope) {
+type EnteredScope = { mode: Mode } & ActionScope;
+
+export function enter(state: ConcreteState, rt: ActionScope): EnteredScope {
   let {environment, raised} = rt;
+
+  // execute entry actions
   for (const action of state.entryActions) {
     ({environment, raised} = execAction(action, {environment, raised}));
   }
+
+  // enter children...
+  const mode: {[uid:string]: Mode} = {};
   if (state.kind === "and") {
-    const mode: {[uid:string]: Mode} = {};
+    
     for (const child of state.children) {
       let childMode;
       ({mode: childMode, environment, raised} = enter(child, {environment, raised}));
       mode[child.uid] = childMode;
     }
-    return { mode, environment, raised };
   }
   else if (state.kind === "or") {
     const mode: {[uid:string]: Mode} = {};
@@ -41,10 +47,29 @@ export function enter(state: ConcreteState, rt: ActionScope): ({mode: Mode} & Ac
       let childMode;
       ({mode: childMode, environment, raised} = enter(child, {environment, raised}));
       mode[child.uid] = childMode;
-      return { mode, environment, raised };
     }
   }
-  throw new Error("should never reach here");
+
+  return { mode, environment, raised };
+}
+
+export function exit(state: ConcreteState, rt: EnteredScope): ActionScope {
+  let {mode, environment, raised} = rt;
+
+  // exit all active children...
+  for (const [childUid, childMode] of Object.entries(mode)) {
+    const child = state.children.find(child => child.uid === childUid);
+    if (child) {
+      ({environment, raised} = exit(child, {mode: childMode, environment, raised}));
+    }
+  }
+
+  // execute exit actions
+  for (const action of state.exitActions) {
+    ({environment, raised} = execAction(action, {environment, raised}));
+  }
+
+  return {environment, raised};
 }
 
 export function execAction(action: Action, rt: ActionScope): ActionScope {