diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css
index fdd080f..a4a926a 100755
--- a/experiments/outline-editor/editor.css
+++ b/experiments/outline-editor/editor.css
@@ -1,9 +1,13 @@
 
 :root {
+	--font-size: 5mm;
 	--button-size: 2em;
 
 	font-family: sans-serif;
-	font-size: 5mm;
+	font-size: var(--font-size);
+
+	/*text-size-adjust: none;*/
+	text-size-adjust: 150%;
 }
 
 .editor {
@@ -36,7 +40,7 @@
 	margin: 0;
 
 	font-family: sans-serif;
-	font-size: 5mm;
+	font-size: var(--font-size);
 
 	outline: none;
 	border: none;
@@ -49,9 +53,14 @@
 
 /* show/hide node's view/code... */
 .editor .outline [tabindex]>span+textarea:not(:focus),
-/* XXX not sure how to do this without :has(..)... */
-.editor .outline [tabindex]:has(>span+textarea:focus)>span:has(+textarea),
-.editor .outline [tabindex]:focus>span+textarea {
+.editor .outline [tabindex]:has(>span+textarea:focus)>span:first-child {
+	position: absolute;
+	opacity: 0;
+	top: 0;
+}
+
+.editor .outline [tabindex]>textarea:focus+span,
+.editor .outline [tabindex]>textarea:not(:focus) {
 	position: absolute;
 	opacity: 0;
 	top: 0;
diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js
index d2a37e6..47e0593 100755
--- a/experiments/outline-editor/editor.js
+++ b/experiments/outline-editor/editor.js
@@ -87,9 +87,9 @@ var Outline = {
 		var block = document.createElement('div')
 		block.setAttribute('tabindex', '0')
 		block.append(
-			document.createElement('span'),
 			document.createElement('textarea')
-				.autoUpdateSize())
+				.autoUpdateSize(),
+			document.createElement('span'))
 		var cur = this.get()
 		place && cur
 			&& cur[place](block)
@@ -349,10 +349,18 @@ var Outline = {
 		// text...
 		if(typeof(data) == 'string'){
 			// XXX
+			data = data.split(/\n(\s*)- /g)
+			var level = function(lst){
+				while(lst.length > 0){
+				}
+			}
 		} 
 		// json...
 		// XXX
-	},
+
+		// generate dom...
+		// XXX
+		return this },
 
 	// XXX add scrollIntoView(..) to nav...
 	keyboard: {
@@ -480,18 +488,18 @@ var Outline = {
 				that.get('focused')?.classList?.add('focused')
 				// textarea...
 				if(node.nodeName == 'TEXTAREA' 
-						&& node?.previousElementSibling?.nodeName == 'SPAN'){
+						&& node?.nextElementSibling?.nodeName == 'SPAN'){
 					node.value = 
 						that.__html2code__ ?
-							that.__html2code__(node.previousElementSibling.innerHTML)
-							: node.previousElementSibling.innerHTML 
+							that.__html2code__(node.nextElementSibling.innerHTML)
+							: node.nextElementSibling.innerHTML 
 					node.updateSize() } })
 		outline.addEventListener('focusout', 
 			function(evt){
 				var node = evt.target
 				if(node.nodeName == 'TEXTAREA' 
-						&& node?.previousElementSibling?.nodeName == 'SPAN'){
-					node.previousElementSibling.innerHTML = 
+						&& node?.nextElementSibling?.nodeName == 'SPAN'){
+					node.nextElementSibling.innerHTML = 
 						that.__code2html__ ?
 							that.__code2html__(node.value)
 							: node.value } })
diff --git a/experiments/outline-editor/generic.js b/experiments/outline-editor/generic.js
index 38dc095..437432e 100755
--- a/experiments/outline-editor/generic.js
+++ b/experiments/outline-editor/generic.js
@@ -19,6 +19,7 @@ Object.defineProperty(HTMLTextAreaElement.prototype, 'caretLine', {
 	enumerable: false,
 	get: function(){
 		var offset = this.selectionStart
+		console.log('---', this)
 		return offset != null ?
 			this.value
 				.slice(0, offset)
diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html
index fe001fa..76716ad 100755
--- a/experiments/outline-editor/index.html
+++ b/experiments/outline-editor/index.html
@@ -26,27 +26,29 @@ var setup = function(){
 <div class="editor">
 	<div class="outline">
 		<div tabindex=0>
-			<span><i>root</i></span><textarea></textarea>
+			<textarea></textarea><span><i>root</i></span>
 			<div tabindex=0 collapsed>
-				<span>A</span><textarea></textarea>
-				<div tabindex=0><span>a</span><textarea></textarea>
+				<textarea></textarea><span>A</span>
+				<div tabindex=0><textarea></textarea><span>a</span>
 				</div>
-				<div tabindex=0><span>b</span><textarea></textarea>
+				<div tabindex=0><textarea></textarea><span>b</span>
 				</div>
-				<div tabindex=0><span>c</span><textarea></textarea>
+				<div tabindex=0><textarea></textarea><span>c</span>
 				</div>
 			</div>
-			<div tabindex=0><span>B</span><textarea></textarea>
-				<div tabindex=0><span>d</span><textarea></textarea>
+			<div tabindex=0><textarea></textarea><span>B</span>
+				<div tabindex=0><textarea></textarea><span>d</span>
 				</div>
-				<div tabindex=0><span>e</span><textarea></textarea>
+				<div tabindex=0><textarea></textarea><span>e</span>
 				</div>
 			</div>
-			<div tabindex=0><span>C</span><textarea></textarea>
-				<div tabindex=0><span>This is a line of text</span><textarea></textarea>
+			<div tabindex=0><textarea></textarea><span>C</span>
+				<div tabindex=0><textarea></textarea><span>This is a line of text</span>
 				</div>
-				<div tabindex=0><span>This is a set<br>
-					text lines</span><textarea></textarea>
+				<div tabindex=0><textarea></textarea><span>This is a set<br>
+					text lines</span>
+				</div>
+				<div tabindex=0><textarea></textarea><span>Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text </span>
 				</div>
 			</div>
 		</div>
@@ -67,6 +69,8 @@ var setup = function(){
 
 <pre>
 TODO:
+- persistent empty first/last node (a button to create a new node)
+- loading from DOM -- fill textarea
 - Firefox compatibility -- remove ':has(..)'
 - <s>focus management</s>
 - <s>mouse/touch controls</s>