diff --git a/www/data/css/styles.css b/www/data/css/styles.css
index a390bdb..7c9c996 100644
--- a/www/data/css/styles.css
+++ b/www/data/css/styles.css
@@ -246,8 +246,6 @@ html, body {
   background-color: #F8F8F8;
   color: black;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
   border-radius: 2px; }
 .bc_markdown blockquote {
   padding: 0 0 0 15px;
@@ -614,9 +612,8 @@ html, body {
   border: 1px solid rgba(0, 0, 0, 0.15); }
   .bce_code .bce_code_data {
     overflow-x: auto;
-    white-space: pre;
     font-family: Consolas, Monaco, "Courier New", Menlo, monospace;
-    padding: 9.5px;
+    padding: 5px 9.5px;
     font-size: 10pt; }
   .bce_code .bce_code_ctrl {
     background: #BBB;
@@ -630,6 +627,7 @@ html, body {
     .bce_code .bce_code_ctrl .ctrl_btn_right {
       margin-left: auto; }
     .bce_code .bce_code_ctrl .ctrl_btn {
+      user-select: none;
       display: block;
       border: 1px solid #000;
       background: #444;
@@ -666,5 +664,42 @@ html, body {
     display: flex;
     flex-direction: column;
     margin: 0; } }
+.bce_code_out {
+  display: flex;
+  flex-direction: row;
+  background: #BBB; }
+  .bce_code_out .bce_code_out_text {
+    font-family: Consolas, Monaco, "Courier New", Menlo, monospace;
+    overflow-y: auto;
+    overflow-x: auto;
+    background: #FFF;
+    color: #000;
+    flex-grow: 1;
+    margin: 0 4px 4px 4px;
+    border: 1px solid #888;
+    min-height: 200px; }
+  .bce_code_out .bce_code_out_stack {
+    font-family: Consolas, Monaco, "Courier New", Menlo, monospace;
+    overflow-y: scroll;
+    overflow-x: auto;
+    background: #FFF;
+    color: #000;
+    margin: 0 4px 4px 4px;
+    width: 200px;
+    border: 1px solid #888;
+    min-height: 200px; }
+
+@media (max-width: 767px) {
+  .bce_code_out {
+    flex-direction: column; }
+    .bce_code_out .bce_code_out_text {
+      flex-grow: 0;
+      min-height: 100px; }
+    .bce_code_out .bce_code_out_stack {
+      width: auto;
+      min-height: 150px; } }
+.b93rnr_outpanel_hidden {
+  visibility: collapse;
+  display: none; }
 
 /*# sourceMappingURL=styles.css.map */
diff --git a/www/data/css/styles_befungerunner.scss b/www/data/css/styles_befungerunner.scss
index baed089..daa4596 100644
--- a/www/data/css/styles_befungerunner.scss
+++ b/www/data/css/styles_befungerunner.scss
@@ -7,9 +7,8 @@
 
   .bce_code_data {
     overflow-x: auto;
-    white-space: pre;
     font-family: $FONT_CODE;
-    padding: 9.5px;
+    padding: 5px 9.5px;
 
     font-size: 10pt;
   }
@@ -33,6 +32,7 @@
     }
 
     .ctrl_btn {
+      user-select: none;
       display: block;
       border: 1px solid #000;
       background: #444;
@@ -67,4 +67,44 @@
 
     } .ctrl_btn_left, .ctrl_btn_right { display: flex; flex-direction: column; margin: 0; }
   }
-}
\ No newline at end of file
+}
+
+.bce_code_out {
+  display: flex;
+  flex-direction: row;
+  background: #BBB;
+
+  .bce_code_out_text {
+    font-family: $FONT_CODE;
+    overflow-y: auto;
+    overflow-x: auto;
+    background: #FFF;
+    color: #000;
+    flex-grow: 1;
+    margin: 0 4px 4px 4px;
+    border: 1px solid #888;
+    min-height: 200px;
+  }
+
+  .bce_code_out_stack {
+    font-family: $FONT_CODE;
+    overflow-y: scroll;
+    overflow-x: auto;
+    background: #FFF;
+    color: #000;
+    margin: 0 4px 4px 4px;
+    width: 200px;
+    border: 1px solid #888;
+    min-height: 200px;
+  }
+}
+@media (max-width: 767px) {
+  .bce_code_out {
+    flex-direction: column;
+
+    .bce_code_out_text { flex-grow: 0; min-height: 100px;}
+    .bce_code_out_stack { width: auto; min-height: 150px;}
+  }
+}
+
+.b93rnr_outpanel_hidden { visibility: collapse; display: none; }
\ No newline at end of file
diff --git a/www/data/css/styles_blogview.scss b/www/data/css/styles_blogview.scss
index fd23774..b04010c 100644
--- a/www/data/css/styles_blogview.scss
+++ b/www/data/css/styles_blogview.scss
@@ -47,8 +47,6 @@
     background-color: $COL_BACKGROUND_3;
     color: black;
     border: 1px solid rgba(0,0,0,.15);
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
     border-radius: 2px;
   }
 
diff --git a/www/data/javascript/blogpost_bef93runner.js b/www/data/javascript/blogpost_bef93runner.js
index e69de29..a16aa7b 100644
--- a/www/data/javascript/blogpost_bef93runner.js
+++ b/www/data/javascript/blogpost_bef93runner.js
@@ -0,0 +1,83 @@
+
+const BefState = Object.freeze ({ UNINIITIALIZED: {}, INITIAL: {}, RUNNING: {}, PAUSED: {} });
+
+function BefObject(domBase) {
+    this.btnStart  = domBase.getElementsByClassName('b93rnr_start')[0];
+    this.btnStop   = domBase.getElementsByClassName('b93rnr_pause')[0];
+    this.btnReset  = domBase.getElementsByClassName('b93rnr_reset')[0];
+    this.pnlCode   = domBase.getElementsByClassName('b93rnr_data')[0];
+    this.pnlBottom = domBase.getElementsByClassName('b93rnr_outpanel')[0];
+    this.pnlOutput = domBase.getElementsByClassName('b93rnr_output')[0];
+    this.pnlStack  = domBase.getElementsByClassName('b93rnr_stack')[0];
+
+    this.state    = BefState.UNINIITIALIZED;
+    this.code     = this.parseBef(atob(this.pnlCode.getAttribute('data-befcode')));
+    this.position = [0, 0];
+    this.output   = '';
+    this.stack    = [];
+}
+
+BefObject.prototype.Init = function() {
+    this.state = BefState.INITIAL;
+};
+
+BefObject.prototype.Start = function() {
+    if (this.state === BefState.UNINIITIALIZED) this.Init();
+
+    this.state = BefState.RUNNING;
+
+    // run
+
+    this.updateUI();
+};
+
+BefObject.prototype.Stop = function() {
+    this.state = BefState.PAUSED;
+
+    // pause
+
+    this.updateUI();
+};
+
+BefObject.prototype.Reset = function() {
+    if (this.state === BefState.RUNNING) this.Stop();
+
+    //reset
+
+    this.state = BefState.INITIAL;
+
+    this.updateUI();
+};
+
+BefObject.prototype.updateUI = function() {
+
+    classListSet(this.btnStart, 'ctrl_btn_disabled', this.state === BefState.RUNNING || this.state === BefState.PAUSED);
+    classListSet(this.btnStop,  'ctrl_btn_disabled', this.state === BefState.UNINIITIALIZED || this.state === BefState.INITIAL);
+    classListSet(this.btnReset, 'ctrl_btn_disabled', this.state === BefState.UNINIITIALIZED || this.state === BefState.INITIAL);
+
+    classListSet(this.pnlBottom, 'b93rnr_outpanel_hidden', this.state === BefState.UNINIITIALIZED || this.state === BefState.INITIAL);
+};
+
+function classListSet(e, cls, active) {
+    if (active) {
+        if (e.classList.contains(cls)) return;
+        e.classList.add(cls);
+    } else {
+        if (!e.classList.contains(cls)) return;
+        e.classList.remove(cls);
+    }
+}
+
+window.onload = function ()
+{
+    let elements = document.getElementsByClassName("b93rnr_base");
+
+    for (let elem of elements) {
+
+        let befungeObject = new BefObject(elem);
+
+        befungeObject.btnStart.onclick = function () { if (befungeObject.btnStart.classList.contains('ctrl_btn_disabled')) return; befungeObject.Start(); };
+        befungeObject.btnStop.onclick  = function () { if (befungeObject.btnStop.classList.contains('ctrl_btn_disabled'))  return; befungeObject.Stop(); };
+        befungeObject.btnReset.onclick = function () { if (befungeObject.btnReset.classList.contains('ctrl_btn_disabled')) return; befungeObject.Reset(); };
+    }
+};
\ No newline at end of file
diff --git a/www/fragments/befunge93_runner.php b/www/fragments/befunge93_runner.php
index cf0f97f..1c05b79 100644
--- a/www/fragments/befunge93_runner.php
+++ b/www/fragments/befunge93_runner.php
@@ -5,27 +5,52 @@ global $PARAM_CODE;
 global $PARAM_URL;
 global $PARAM_INTERACTIVE;
 
+function fmtBef($str) {
+	$str = htmlspecialchars($str);
+	$str = str_replace("\r\n", "\n", $str);
+	$str = join("\n", array_map(function($p){return rtrim($p);}, explode("\n", $str)));
+	$str = str_replace(' ', ' ', $str);
+	$str = nl2br($str);
+	return $str;
+}
 
 $result = '';
 
-$result .= '<div class="bce_code">' . "\n";
-$result .= '	<div class="bce_code_data">' .htmlspecialchars($PARAM_CODE) . '</div>' . "\n";
-$result .= '	<div class="bce_code_ctrl">' . "\n";
 if ($PARAM_INTERACTIVE) {
+	$result .= '<div class="bce_code b93rnr_base">' . "\n";
+	$result .= '	<div class="bce_code_data b93rnr_data" data-befcode="' . base64_encode($PARAM_CODE) . '">' . fmtBef($PARAM_CODE) . '</div>' . "\n";
+	$result .= '	<div class="bce_code_ctrl">' . "\n";
 	$result .= '		<div class="ctrl_btn_left">' . "\n";
-	$result .= '			<div class="ctrl_btn">Start</div>' . "\n";
-	$result .= '			<div class="ctrl_btn">Stop</div>' . "\n";
-	$result .= '			<div class="ctrl_btn">Reset</div>' . "\n";
+	$result .= '			<div class="ctrl_btn b93rnr_start">Start</div>' . "\n";
+	$result .= '			<div class="ctrl_btn b93rnr_pause ctrl_btn_disabled">Pause</div>' . "\n";
+	$result .= '			<div class="ctrl_btn b93rnr_reset ctrl_btn_disabled">Reset</div>' . "\n";
 	$result .= '		</div>' . "\n";
-}
-if ($PARAM_URL !== '') {
-	$result .= '		<div class="ctrl_btn_right">' . "\n";
-	$result .= '			<a class="ctrl_btn" href="' .$PARAM_URL . '" download target="_blank">Download</a>' . "\n";
-	$result .= '		</div>' . "\n";
-}
-$result .= '	</div>' . "\n";
-$result .= '</div>' . "\n";
+	if ($PARAM_URL !== '') {
+		$result .= '		<div class="ctrl_btn_right">' . "\n";
+		$result .= '			<a class="ctrl_btn" href="' . $PARAM_URL . '" download target="_blank">Download</a>' . "\n";
+		$result .= '		</div>' . "\n";
+	}
+	$result .= '	</div>' . "\n";
+	$result .= '	<div class="bce_code_out b93rnr_outpanel b93rnr_outpanel_hidden">' . "\n";
+	$result .= '		<div class="bce_code_out_text b93rnr_output"></div>' . "\n";
+	$result .= '		<div class="bce_code_out_stack b93rnr_stack"></div>' . "\n";
+	$result .= '	</div>' . "\n";
+	$result .= '</div>' . "\n";
 
-$result .= includeScriptOnce("/data/javascript/blogpost_bef93runner.js", false) . "\n";
+	$result .= includeScriptOnce("/data/javascript/blogpost_bef93runner.js", false) . "\n";
+}
+else
+{
+	$result .= '<div class="bce_code">' . "\n";
+	$result .= '	<div class="bce_code_data">' . fmtBef($PARAM_CODE) . '</div>' . "\n";
+	$result .= '	<div class="bce_code_ctrl">' . "\n";
+	if ($PARAM_URL !== '') {
+		$result .= '		<div class="ctrl_btn_right">' . "\n";
+		$result .= '			<a class="ctrl_btn" href="' . $PARAM_URL . '" download target="_blank">Download</a>' . "\n";
+		$result .= '		</div>' . "\n";
+	}
+	$result .= '	</div>' . "\n";
+	$result .= '</div>' . "\n";
+}
 
 return $result;
\ No newline at end of file