diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..acb8884
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+*.egg-info
+*.pyc
+
+build/
+dist/
+__pycache__/
diff --git a/remarkbox_chaostheory/static/theme/chaostheory/css/960.css b/remarkbox_chaostheory/static/theme/chaostheory/css/960.css
new file mode 100644
index 0000000..e4a1637
--- /dev/null
+++ b/remarkbox_chaostheory/static/theme/chaostheory/css/960.css
@@ -0,0 +1,491 @@
+/*
+	960 Grid System ~ Core CSS.
+	Learn more ~ http://960.gs/
+
+	Licensed under GPL and MIT.
+*/
+
+/* =Containers
+--------------------------------------------------------------------------------*/
+
+.container_12,
+.container_16
+{
+	margin-left: auto;
+	margin-right: auto;
+	width: 960px;
+}
+
+/* =Grid >> Global
+--------------------------------------------------------------------------------*/
+
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12,
+.grid_13,
+.grid_14,
+.grid_15,
+.grid_16
+{
+	display: inline;
+	float: left;
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.container_12 .grid_3,
+.container_16 .grid_4
+{
+	width: 220px;
+}
+
+.container_12 .grid_6,
+.container_16 .grid_8
+{
+	width: 460px;
+}
+
+.container_12 .grid_9,
+.container_16 .grid_12
+{
+	width: 700px;
+}
+
+.container_12 .grid_12,
+.container_16 .grid_16
+{
+	width: 940px;
+}
+
+/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
+--------------------------------------------------------------------------------*/
+
+.alpha
+{
+	margin-left: 0;
+}
+
+.omega
+{
+	margin-right: 0;
+}
+
+/* =Grid >> 12 Columns
+--------------------------------------------------------------------------------*/
+
+.container_12 .grid_1
+{
+	width: 60px;
+}
+
+.container_12 .grid_2
+{
+	width: 140px;
+}
+
+.container_12 .grid_4
+{
+	width: 300px;
+}
+
+.container_12 .grid_5
+{
+	width: 380px;
+}
+
+.container_12 .grid_7
+{
+	width: 540px;
+}
+
+.container_12 .grid_8
+{
+	width: 620px;
+}
+
+.container_12 .grid_10
+{
+	width: 780px;
+}
+
+.container_12 .grid_11
+{
+	width: 860px;
+}
+
+/* =Grid >> 16 Columns
+--------------------------------------------------------------------------------*/
+
+.container_16 .grid_1
+{
+	width: 40px;
+}
+
+.container_16 .grid_2
+{
+	width: 100px;
+}
+
+.container_16 .grid_3
+{
+	width: 160px;
+}
+
+.container_16 .grid_5
+{
+	width: 280px;
+}
+
+.container_16 .grid_6
+{
+	width: 340px;
+}
+
+.container_16 .grid_7
+{
+	width: 400px;
+}
+
+.container_16 .grid_9
+{
+	width: 520px;
+}
+
+.container_16 .grid_10
+{
+	width: 580px;
+}
+
+.container_16 .grid_11
+{
+	width: 640px;
+}
+
+.container_16 .grid_13
+{
+	width: 760px;
+}
+
+.container_16 .grid_14
+{
+	width: 820px;
+}
+
+.container_16 .grid_15
+{
+	width: 880px;
+}
+
+/* =Prefix Extra Space >> Global
+--------------------------------------------------------------------------------*/
+
+.container_12 .prefix_3,
+.container_16 .prefix_4
+{
+	padding-left: 240px;
+}
+
+.container_12 .prefix_6,
+.container_16 .prefix_8
+{
+	padding-left: 480px;
+}
+
+.container_12 .prefix_9,
+.container_16 .prefix_12
+{
+	padding-left: 720px;
+}
+
+/* =Prefix Extra Space >> 12 Columns
+--------------------------------------------------------------------------------*/
+
+.container_12 .prefix_1
+{
+	padding-left: 80px;
+}
+
+.container_12 .prefix_2
+{
+	padding-left: 160px;
+}
+
+.container_12 .prefix_4
+{
+	padding-left: 320px;
+}
+
+.container_12 .prefix_5
+{
+	padding-left: 400px;
+}
+
+.container_12 .prefix_7
+{
+	padding-left: 560px;
+}
+
+.container_12 .prefix_8
+{
+	padding-left: 640px;
+}
+
+.container_12 .prefix_10
+{
+	padding-left: 800px;
+}
+
+.container_12 .prefix_11
+{
+	padding-left: 880px;
+}
+
+/* =Prefix Extra Space >> 16 Columns
+--------------------------------------------------------------------------------*/
+
+.container_16 .prefix_1
+{
+	padding-left: 60px;
+}
+
+.container_16 .prefix_2
+{
+	padding-left: 120px;
+}
+
+.container_16 .prefix_3
+{
+	padding-left: 180px;
+}
+
+.container_16 .prefix_5
+{
+	padding-left: 300px;
+}
+
+.container_16 .prefix_6
+{
+	padding-left: 360px;
+}
+
+.container_16 .prefix_7
+{
+	padding-left: 420px;
+}
+
+.container_16 .prefix_9
+{
+	padding-left: 540px;
+}
+
+.container_16 .prefix_10
+{
+	padding-left: 600px;
+}
+
+.container_16 .prefix_11
+{
+	padding-left: 660px;
+}
+
+.container_16 .prefix_13
+{
+	padding-left: 780px;
+}
+
+.container_16 .prefix_14
+{
+	padding-left: 840px;
+}
+
+.container_16 .prefix_15
+{
+	padding-left: 900px;
+}
+
+/* =Suffix Extra Space >> Global
+--------------------------------------------------------------------------------*/
+
+.container_12 .suffix_3,
+.container_16 .suffix_4
+{
+	padding-right: 240px;
+}
+
+.container_12 .suffix_6,
+.container_16 .suffix_8
+{
+	padding-right: 480px;
+}
+
+.container_12 .suffix_9,
+.container_16 .suffix_12
+{
+	padding-right: 720px;
+}
+
+/* =Suffix Extra Space >> 12 Columns
+--------------------------------------------------------------------------------*/
+
+.container_12 .suffix_1
+{
+	padding-right: 80px;
+}
+
+.container_12 .suffix_2
+{
+	padding-right: 160px;
+}
+
+.container_12 .suffix_4
+{
+	padding-right: 320px;
+}
+
+.container_12 .suffix_5
+{
+	padding-right: 400px;
+}
+
+.container_12 .suffix_7
+{
+	padding-right: 560px;
+}
+
+.container_12 .suffix_8
+{
+	padding-right: 640px;
+}
+
+.container_12 .suffix_10
+{
+	padding-right: 800px;
+}
+
+.container_12 .suffix_11
+{
+	padding-right: 640px;
+}
+
+/* =Suffix Extra Space >> 16 Columns
+--------------------------------------------------------------------------------*/
+
+.container_16 .suffix_1
+{
+	padding-right: 60px;
+}
+
+.container_16 .suffix_2
+{
+	padding-right: 120px;
+}
+
+.container_16 .suffix_3
+{
+	padding-right: 180px;
+}
+
+.container_16 .suffix_5
+{
+	padding-right: 300px;
+}
+
+.container_16 .suffix_6
+{
+	padding-right: 360px;
+}
+
+.container_16 .suffix_7
+{
+	padding-right: 420px;
+}
+
+.container_16 .suffix_9
+{
+	padding-right: 540px;
+}
+
+.container_16 .suffix_10
+{
+	padding-right: 600px;
+}
+
+.container_16 .suffix_11
+{
+	padding-right: 660px;
+}
+
+.container_16 .suffix_13
+{
+	padding-right: 780px;
+}
+
+.container_16 .suffix_14
+{
+	padding-right: 840px;
+}
+
+.container_16 .suffix_15
+{
+	padding-right: 900px;
+}
+
+/* =Clear Floated Elements
+--------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+html body * span.clear,
+html body * div.clear,
+html body * li.clear,
+html body * dd.clear
+{
+	background: none;
+	border: 0;
+	clear: both;
+	display: block;
+	float: none;
+	font-size: 0;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+/* http://www.positioniseverything.net/easyclearing.html */
+
+.clearfix:after
+{
+	clear: both;
+	content: '.';
+	display: block;
+	visibility: hidden;
+	height: 0;
+}
+
+.clearfix
+{
+	display: inline-block;
+}
+
+* html .clearfix
+{
+	height: 1%;
+}
+
+.clearfix
+{
+	display: block;
+}
diff --git a/remarkbox_chaostheory/static/theme/chaostheory/css/pygments-native.css b/remarkbox_chaostheory/static/theme/chaostheory/css/pygments-native.css
new file mode 100644
index 0000000..bffc5c9
--- /dev/null
+++ b/remarkbox_chaostheory/static/theme/chaostheory/css/pygments-native.css
@@ -0,0 +1,69 @@
+.hll { background-color: #404040 }
+.c { color: #999999; font-style: italic } /* Comment */
+.err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.g { color: #d0d0d0 } /* Generic */
+.k { color: #6ab825; font-weight: bold } /* Keyword */
+.l { color: #d0d0d0 } /* Literal */
+.n { color: #d0d0d0 } /* Name */
+.o { color: #d0d0d0 } /* Operator */
+.x { color: #d0d0d0 } /* Other */
+.p { color: #d0d0d0 } /* Punctuation */
+.cm { color: #999999; font-style: italic } /* Comment.Multiline */
+.cp { color: #cd2828; font-weight: bold } /* Comment.Preproc */
+.c1 { color: #999999; font-style: italic } /* Comment.Single */
+.cs { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
+.gd { color: #d22323 } /* Generic.Deleted */
+.ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */
+.gr { color: #d22323 } /* Generic.Error */
+.gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
+.gi { color: #589819 } /* Generic.Inserted */
+.go { color: #cccccc } /* Generic.Output */
+.gp { color: #aaaaaa } /* Generic.Prompt */
+.gs { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
+.gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
+.gt { color: #d22323 } /* Generic.Traceback */
+.kc { color: #6ab825; font-weight: bold } /* Keyword.Constant */
+.kd { color: #6ab825; font-weight: bold } /* Keyword.Declaration */
+.kn { color: #6ab825; font-weight: bold } /* Keyword.Namespace */
+.kp { color: #6ab825 } /* Keyword.Pseudo */
+.kr { color: #6ab825; font-weight: bold } /* Keyword.Reserved */
+.kt { color: #6ab825; font-weight: bold } /* Keyword.Type */
+.ld { color: #d0d0d0 } /* Literal.Date */
+.m { color: #3677a9 } /* Literal.Number */
+.s { color: #ed9d13 } /* Literal.String */
+.na { color: #bbbbbb } /* Name.Attribute */
+.nb { color: #24909d } /* Name.Builtin */
+.nc { color: #447fcf; text-decoration: underline } /* Name.Class */
+.no { color: #40ffff } /* Name.Constant */
+.nd { color: #ffa500 } /* Name.Decorator */
+.ni { color: #d0d0d0 } /* Name.Entity */
+.ne { color: #bbbbbb } /* Name.Exception */
+.nf { color: #447fcf } /* Name.Function */
+.nl { color: #d0d0d0 } /* Name.Label */
+.nn { color: #447fcf; text-decoration: underline } /* Name.Namespace */
+.nx { color: #d0d0d0 } /* Name.Other */
+.py { color: #d0d0d0 } /* Name.Property */
+.nt { color: #6ab825; font-weight: bold } /* Name.Tag */
+.nv { color: #40ffff } /* Name.Variable */
+.ow { color: #6ab825; font-weight: bold } /* Operator.Word */
+.w { color: #666666 } /* Text.Whitespace */
+.mf { color: #3677a9 } /* Literal.Number.Float */
+.mh { color: #3677a9 } /* Literal.Number.Hex */
+.mi { color: #3677a9 } /* Literal.Number.Integer */
+.mo { color: #3677a9 } /* Literal.Number.Oct */
+.sb { color: #ed9d13 } /* Literal.String.Backtick */
+.sc { color: #ed9d13 } /* Literal.String.Char */
+.sd { color: #ed9d13 } /* Literal.String.Doc */
+.s2 { color: #ed9d13 } /* Literal.String.Double */
+.se { color: #ed9d13 } /* Literal.String.Escape */
+.sh { color: #ed9d13 } /* Literal.String.Heredoc */
+.si { color: #ed9d13 } /* Literal.String.Interpol */
+.sx { color: #ffa500 } /* Literal.String.Other */
+.sr { color: #ed9d13 } /* Literal.String.Regex */
+.s1 { color: #ed9d13 } /* Literal.String.Single */
+.ss { color: #ed9d13 } /* Literal.String.Symbol */
+.bp { color: #24909d } /* Name.Builtin.Pseudo */
+.vc { color: #40ffff } /* Name.Variable.Class */
+.vg { color: #40ffff } /* Name.Variable.Global */
+.vi { color: #40ffff } /* Name.Variable.Instance */
+.il { color: #3677a9 } /* Literal.Number.Integer.Long */
diff --git a/remarkbox_chaostheory/static/theme/chaostheory/css/theme.css b/remarkbox_chaostheory/static/theme/chaostheory/css/theme.css
index bad761b..153b6f9 100644
--- a/remarkbox_chaostheory/static/theme/chaostheory/css/theme.css
+++ b/remarkbox_chaostheory/static/theme/chaostheory/css/theme.css
@@ -1,293 +1,768 @@
-/* ============================================================
-   foxhop.net — chaos theory theme
-   sensitive dependence on initial conditions
-   ============================================================ */
+@import "/static/theme/chaostheory/css/pygments-native.css";
 
-:root {
-  --bg:           #06060e;
-  --bg-container: rgba(9, 9, 22, 0.98);
-  --bg-input:     #0f0f22;
-  --text:         #c4c4d0;
-  --text-muted:   #52526a;
-  --accent:       #00e5cc;
-  --accent-warm:  #ff6b35;
-  --border:       #1a1a30;
-  --border-top:   #00e5cc;
+/* universal box model — prevents padding/border from causing overflow */
+*, *::before, *::after {
+    box-sizing: border-box;
 }
 
-* {
-  box-sizing: border-box;
+/* layout */
+.container_16 {
+    width: 96%;
+    max-width: 1400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+/* clearfix via pseudo-element — clears floats without clipping content */
+.container_16::after {
+    content: '';
+    display: table;
+    clear: both;
+}
+.container_16 .grid_16 {
+    display: block;
+    float: none;      /* override 960.css float: left */
+    width: 100%;
+    margin: 0;
+}
+#wikibar {
+    overflow: hidden; /* self-clear the left/right wikibar floats */
+}
+.grid_10 {
+    float: left;
+    width: 72%;
+}
+.grid_6 {
+    float: right;
+    width: 26%;
+}
+div.clear { clear: both; display: block; height: 0; }
+
+/* prevent any element from blowing out the horizontal layout */
+body {
+    overflow-x: hidden;
+}
+img, video, pre, table {
+    max-width: 100%;
+}
+
+html {
+    background-color: #111111;
 }
 
 body {
-  color: var(--text);
-  background-color: var(--bg);
-  /* dot grid — ordered system from simple rules */
-  background-image: radial-gradient(
-    circle,
-    rgba(0, 229, 204, 0.07) 1px,
-    transparent 1px
-  );
-  background-size: 28px 28px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-  font-size: 1em;
-  line-height: 1.65;
-  margin-top: 40px;
-  margin-bottom: 60px;
+    margin: 0;
+    background-color: #1C4E63;
+    color: #DDDDDD;
+    font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
+    font-size: 14px;
+    line-height: 1.6;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'Space Mono', 'Courier New', monospace;
-  color: #e8e8f0;
+#header {
+    display: block;
+    font-size: 1.6em;
+    background-color: #0A0A0A;
+    padding: 1.2% 2%;
+    letter-spacing: -0.02em;
 }
 
-a, a:visited {
-  color: var(--accent);
-  text-decoration: none;
-  opacity: 0.85;
-  transition: opacity 0.15s, color 0.15s;
+#header a {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+#header a:hover {
+    color: #6DCFF6;
+}
+
+h1, h2, h3, h4, h5 {
+    color: #6DCFF6;
+    font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
+    letter-spacing: -0.04em;
+    line-height: normal;
+}
+
+a, a:link, a:visited {
+    color: #6DCFF6;
+    text-decoration: none;
 }
 
 a:hover {
-  opacity: 1.0;
-  color: #ffffff;
+    color: #9de3fb;
+    text-decoration: underline;
 }
 
-/* ---- brand ---- */
+/*********************
+  wikibar
+*********************/
 
-h1.brand {
-  font-family: 'Space Mono', 'Courier New', monospace;
-  font-size: 2.2em;
-  font-weight: 700;
-  letter-spacing: 2px;
-  margin-left: 32px;
-  margin-bottom: 0;
-  color: #e8e8f0;
+#wikibar {
+    padding-top: 0;
+    margin-top: 0;
+    border: 0;
+    font-size: 12px;
+    overflow: hidden;
 }
 
-h1.brand a {
-  color: #e8e8f0;
-  opacity: 1.0;
-  text-decoration: none;
+#wikibar-left, #wikibar-right {
+    padding: 0;
+    margin: 0;
 }
 
-h1.brand a:hover {
-  color: #ffffff;
-  opacity: 1.0;
+#wikibar-right {
+    width: auto;
+    float: right;
+    background-color: #0A0A0A;
+    padding: 6px 12px;
 }
 
-.brand-dot {
-  color: var(--accent);
+#wikibar-left a {
+    border: 0;
+    border-top: 1px solid #0a0a0a;
+    float: left;
+    background-color: #0A0A0A;
+    color: #CCCCCC;
+    padding: 6px 12px;
+    border-radius: 0;
+    margin: 0;
+    text-decoration: none;
 }
 
-.tagline {
-  font-family: 'Space Mono', 'Courier New', monospace;
-  font-size: 0.7em;
-  color: var(--text-muted);
-  letter-spacing: 1px;
-  margin-left: 36px;
-  margin-top: 4px;
-  margin-bottom: 18px;
+#wikibar-left a.on {
+    border-top: 1px solid #262626;
+    background-color: #191919;
+    color: #aaaaaa;
 }
 
-/* ---- search ---- */
-
-.searchbox {
-  float: right;
-  margin-right: 32px;
-  margin-bottom: 20px;
-  width: 240px;
+#wikibar-left a:hover {
+    background: #111;
+    color: #6DCFF6;
+    border-top: 1px solid #1c1c1c;
 }
 
-/* ---- nav menu ---- */
+/*********************
+  search box
+*********************/
 
-#remarkbox-menu {
-  text-align: right;
-  margin-right: 32px;
-  margin-bottom: 24px;
-  font-family: 'Space Mono', 'Courier New', monospace;
-  font-size: 0.82em;
-  color: var(--text-muted);
+#keywords {
+    background-color: #184254;
+    color: #eeeeee;
+    border: 1px solid #336173;
+    border-radius: 3px;
+    padding: 4px 8px;
+    font-size: 12px;
+    width: 200px;
 }
 
-#remarkbox-menu a {
-  color: var(--text-muted);
-  opacity: 1.0;
-  text-decoration: none;
+#keywords::placeholder {
+    color: #aaaaaa;
 }
 
-#remarkbox-menu a:hover {
-  color: var(--accent);
+#keywords:focus {
+    outline: none;
+    border-color: #6DCFF6;
 }
 
-/* ---- main content container ---- */
+/*********************
+  content area
+*********************/
 
-.main {
-  width: 68%;
-  margin: auto;
-  background: var(--bg-container);
-  border: 1px solid var(--border);
-  border-top: 2px solid var(--border-top);
-  border-radius: 2px;
-  padding: 28px 32px;
+#content {
+    background-color: transparent;
+    padding: 20px 32px;
 }
 
-/* ---- content elements ---- */
+/*********************
+  thread summary cards
+*********************/
 
-.title {
-  font-size: 1.35em;
-  font-family: 'Space Mono', 'Courier New', monospace;
+.summary {
+    padding: 14px 0;
+    border-bottom: 1px solid #336173;
+}
+
+.summary:last-child {
+    border-bottom: 0;
+}
+
+.summary a {
+    font-size: 1.05em;
 }
 
 .author-and-date {
-  color: var(--text-muted);
-  font-size: 0.85em;
+    font-size: 0.82em;
+    color: #aaaaaa;
 }
 
-.action {
-  color: var(--text-muted);
-  font-size: 0.85em;
+.remark-count {
+    font-size: 0.82em;
+    color: #6DCFF6;
+    font-weight: bold;
 }
 
-/* ---- thread summaries ---- */
-
-ul.summary {
-  list-style: none;
-  padding-left: 0;
-  margin: 0;
+.date {
+    color: #888888;
 }
 
-li.summary {
-  border-bottom: 1px solid var(--border);
-  padding: 14px 0;
+/*********************
+  page body areas
+*********************/
+
+#wiki-section-break, #comment-section, #show-comment {
+    border-color: #336173;
 }
 
-li.summary:last-child {
-  border-bottom: none;
+#comment-section {
+    display: block;
 }
 
-/* ---- forms and inputs ---- */
-
-input,
-textarea,
-.common-textarea,
-#thread_title_input,
-#email_input,
-#email_input2 {
-  background-color: var(--bg-input);
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 2px;
-  font-family: inherit;
-  transition: border-color 0.15s;
+#comment, #comment-preview-div {
+    font-size: 12px;
+    background-color: #184254;
+    color: #eeeeee;
+    border-radius: 6px;
+    border: 0;
 }
 
-input:focus,
-textarea:focus,
+textarea, .text {
+    background-color: #184254;
+    color: #eeeeee;
+    border-radius: 6px;
+    border: 1px solid #336173;
+}
+
+textarea:focus, .text:focus {
+    outline: none;
+    border-color: #6DCFF6;
+}
+
+#flash {
+    opacity: 0.8;
+}
+
+.contents {
+    background-color: #184254;
+    color: #eeeeee;
+    border: 0;
+}
+
+.codeblock {
+    color: #bbbbbb;
+    background-color: #184254;
+    border-radius: 6px;
+    border: 0;
+    padding: 12px;
+    font-size: 12px;
+    font-family: monospace;
+    overflow-x: auto;
+}
+
+/*********************
+  footer
+*********************/
+
+#footer {
+    background-image: url(/static/theme/chaostheory/footer-lines-bkg.png);
+    padding: 40px;
+    padding-top: 80px;
+    background-color: #111111;
+    background-position: 50% 0;
+    background-repeat: repeat-x;
+    font-size: 0.85em;
+    color: #888888;
+    text-align: center;
+}
+
+#footer a, #footer a:link, #footer a:visited {
+    color: #6DCFF6;
+}
+
+.utility {
+    color: white;
+    font-weight: bold;
+}
+
+/*********************
+  tables
+*********************/
+
+table.event {
+    border: 0;
+    width: 100%;
+}
+
+td.event {
+    color: #DDDDDD;
+    padding: 6px 8px;
+}
+
+tr.False {
+    background-color: #184254;
+}
+
+tr.True {
+    background-color: #1C4E63;
+}
+
+.daybr {
+    background-color: #153948;
+    border: 0;
+    font-size: 1.1em;
+    font-weight: bold;
+    padding: 4px 8px;
+    color: #6DCFF6;
+}
+
+/*********************
+  alerts / flash
+*********************/
+
+.warning, .error {
+    background-color: #4a1a1a;
+    color: #ffaaaa;
+    border: 1px solid #7a2020;
+    border-radius: 4px;
+    padding: 8px 12px;
+}
+
+.success, .notice {
+    background-color: #0e3020;
+    color: #aaffbb;
+    border: 1px solid #1a5c30;
+    border-radius: 4px;
+    padding: 8px 12px;
+}
+
+/*********************
+  forms & comment section
+*********************/
+
+.common-text-input,
+.common-textarea {
+    background-color: #184254;
+    color: #eeeeee;
+    border: 1px solid #336173;
+    border-radius: 4px;
+}
+
+.common-text-input:focus,
 .common-textarea:focus {
-  border-color: var(--accent);
-  outline: none;
+    outline: none;
+    border-color: #6DCFF6;
+}
+
+.common-text-input::placeholder,
+.common-textarea::placeholder {
+    color: #aaaaaa;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="input"] {
+    background-color: #184254;
+    color: #eeeeee;
+    border: 1px solid #336173;
+    border-radius: 4px;
+    padding: 4px 8px;
+}
+
+input[type="text"]::placeholder,
+input[type="email"]::placeholder,
+input[type="input"]::placeholder {
+    color: #aaaaaa;
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="input"]:focus {
+    outline: none;
+    border-color: #6DCFF6;
+}
+
+input[type="submit"],
+button[type="submit"],
+.button {
+    background-color: #184254;
+    color: #6DCFF6;
+    border: 1px solid #336173;
+    border-radius: 4px;
+    padding: 5px 14px;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
+}
+
+input[type="submit"]:hover,
+button[type="submit"]:hover,
+.button:hover {
+    background-color: #1C4E63;
+    border-color: #6DCFF6;
+    color: #9de3fb;
+}
+
+.green-button {
+    background-color: #0e3020;
+    border-color: #1a5c30;
+    color: #aaffbb;
+}
+
+.green-button:hover {
+    background-color: #1a5c30;
+    color: #ddffee;
+}
+
+.comments-section {
+    margin-top: 2rem;
+}
+
+.comments-divider {
+    border-top: 2px solid #336173;
+    margin-bottom: 1rem;
+}
+
+.comments-header {
+    color: #6DCFF6;
+    font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
+    letter-spacing: -0.04em;
+    margin-top: 0;
+    padding-top: 0;
+}
+
+.no-comments {
+    color: #aaaaaa;
+    font-style: italic;
+    margin-top: 1rem;
 }
 
 .preview {
-  border: 1px solid var(--border);
-  background-color: var(--bg-input);
+    background-color: #184254;
+    border: 1px dotted #336173;
+    border-radius: 4px;
+    padding: 12px 16px;
+    margin-top: 8px;
+    color: #eeeeee;
 }
 
-/* ---- buttons ---- */
-
-.btn, button, input[type="submit"] {
-  font-family: 'Space Mono', 'Courier New', monospace;
-  font-size: 0.82em;
-  border-radius: 2px;
-  cursor: pointer;
-  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+.author-and-date a,
+.status,
+.whats-next,
+.topic,
+.remark-count {
+    color: #aaaaaa;
+    font-size: 0.82em;
 }
 
-/* ---- alerts ---- */
-
-#alerts {
-  width: 36%;
-  margin: auto;
-  right: 50%;
-  margin-right: -18%;
-  position: fixed;
-  z-index: 100;
+.topic a {
+    color: #6DCFF6;
 }
 
-.close {
-  margin-left: 10px;
-  float: left;
+.action,
+.remark {
+    color: #aaaaaa;
+    font-size: 0.78em;
+    margin-right: 8px;
+    font-weight: bold;
+    cursor: pointer;
+    text-decoration: none;
 }
 
-.alert {
-  text-align: center;
-  color: #ffffff;
-  font-weight: bold;
-  border-radius: 2px;
-  margin-bottom: 6px;
-  padding: 8px 12px;
-  font-family: 'Space Mono', 'Courier New', monospace;
-  font-size: 0.82em;
+.action:hover,
+.remark:hover {
+    color: #6DCFF6;
 }
 
-.alert-warning,
-.alert-error {
-  background-color: #3a1510;
-  border: 1px solid var(--accent-warm);
-  color: var(--accent-warm);
+p.whats-next {
+    color: #aaaaaa;
+    font-size: 0.85em;
 }
 
-.alert-success,
-.alert-notice {
-  background-color: #081a16;
-  border: 1px solid var(--accent);
-  color: var(--accent);
+/*********************
+  TOC (.. contents::)
+*********************/
+
+div.contents {
+    background-color: #184254;
+    border: 1px solid #336173;
+    border-radius: 4px;
+    padding: 12px 20px;
+    display: inline-block;
+    min-width: 200px;
+    margin-bottom: 1.5em;
 }
 
-/* ---- footer ---- */
-
-#remarkbox-footer {
-  width: 68%;
-  margin: 20px auto 0;
-  text-align: center;
-  font-size: 0.78em;
-  color: var(--text-muted);
+div.contents ul {
+    margin: 0;
+    padding-left: 1.2em;
 }
 
-.poweredby {
-  opacity: 0.35;
+div.contents a, div.contents a:visited {
+    color: #6DCFF6;
+    font-size: 0.9em;
 }
 
-/* ---- mobile ---- */
-
-@media screen and (min-width: 0px) and (max-width: 800px) {
-  .mobile-hide    { display: none; }
-  .main           { width: 96%; padding: 16px 14px; }
-  #remarkbox-footer { width: 96%; }
-  .searchbox      { width: 180px; margin-right: 14px; }
-  h1.brand        { margin-left: 14px; font-size: 1.7em; }
-  .tagline        { margin-left: 16px; }
-  #remarkbox-menu { margin-right: 14px; }
+div.contents a:hover {
+    color: #9de3fb;
 }
 
-/* ---- burger phone menu ---- */
+/*********************
+  thread comments
+*********************/
 
-.burger-label {
-  background-color: var(--accent);
-  opacity: 0.75;
-  transition: opacity 0.2s;
+.conversation {
+    border-top: 1px solid #336173;
+    padding-top: 1.2rem;
+    margin-top: 1.2rem;
 }
 
-.burger-label:hover {
-  opacity: 1.0;
+.node {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
 }
 
-.burger-label span {
-  background-color: var(--bg);
+.node-depth-1 { padding-left: 0; }
+.node-depth-2 { padding-left: 28px; border-left: 2px solid #336173; margin-left: 16px; }
+.node-depth-3 { padding-left: 28px; border-left: 2px solid #2a5468; margin-left: 28px; }
+.node-depth-4 { padding-left: 28px; border-left: 1px solid #2a5468; margin-left: 40px; }
+
+.node .author-and-date {
+    font-size: 0.82em;
+    color: #aaaaaa;
+    margin-bottom: 4px;
+    display: block;
 }
 
-.burger-checkbox ~ .phone-menu {
-  background-color: var(--bg);
-  border-top: 2px solid var(--accent);
+.node-data {
+    margin-top: 6px;
+    line-height: 1.65;
+}
+
+.node-data p {
+    margin-top: 0;
+    margin-bottom: 0.5em;
+}
+
+.node-actions {
+    margin-top: 6px;
+}
+
+.remark-box-div-main {
+    background-color: #184254;
+    border: 1px solid #336173;
+    border-radius: 6px;
+    padding: 16px 20px;
+    margin-bottom: 1.5rem;
+}
+
+.remark-box-div-main .common-textarea {
+    min-height: 80px;
+}
+
+/*********************
+  images & figures
+*********************/
+
+.node-data img,
+#content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin: 8px 0;
+}
+
+figure {
+    margin: 1rem 0;
+}
+
+figcaption {
+    font-size: 0.85em;
+    color: #aaaaaa;
+    font-style: italic;
+    margin-top: 4px;
+}
+
+/*********************
+  OG comment card style
+*********************/
+
+/* Override previous node styles with card-based layout */
+.conversation {
+    border-top: none;
+    padding-top: 0;
+    margin-top: 0;
+}
+
+.node.node-depth-1 {
+    background-color: #163a4a;
+    border: 1px solid #4a8fa8;
+    border-radius: 6px;
+    padding: 14px 18px 12px 18px;
+    margin-bottom: 14px;
+}
+
+.node.node-depth-2 {
+    background-color: #112e3c;
+    border: 1px solid #4a8fa8;
+    border-left: 3px solid #6DCFF6;
+    border-radius: 4px;
+    padding: 10px 14px 10px 14px;
+    margin-bottom: 10px;
+    margin-left: 32px;
+}
+
+.node.node-depth-3 {
+    background-color: #0e2530;
+    border: 1px solid #336173;
+    border-left: 3px solid #4a8fa8;
+    border-radius: 4px;
+    padding: 8px 12px;
+    margin-bottom: 8px;
+    margin-left: 56px;
+}
+
+.node.node-depth-4,
+.node.node-depth-5 {
+    background-color: #0b1e27;
+    border: 1px solid #2a5468;
+    border-left: 2px solid #336173;
+    border-radius: 4px;
+    padding: 6px 10px;
+    margin-bottom: 6px;
+    margin-left: 72px;
+}
+
+/* Card interior — flex row with wrap.
+   Avatar + author-and-date share the first row.
+   Everything else wraps to full width below. */
+.node {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    align-content: flex-start;
+    column-gap: 10px;
+    row-gap: 0;
+}
+
+/* Avatar wrapper (a or img) — flex item, kill float from align="left" */
+.node img.avatar,
+.node a:has(img.avatar) {
+    flex: 0 0 auto;
+    float: none !important;
+    order: 0;
+    display: block;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.node img.avatar {
+    border-radius: 3px;
+    display: block;
+}
+
+/* Author/date: fills rest of the header row */
+.node .author-and-date {
+    flex: 1 1 0;
+    min-width: 0;
+    order: 1;
+    font-size: 0.82em;
+    color: #aaaaaa;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #2a5468;
+    line-height: 1.4;
+    align-self: center;
+}
+
+.node .author-and-date a {
+    color: #6DCFF6;
+    font-weight: bold;
+}
+
+/* Everything below wraps to a new full-width row */
+.node .status,
+.node .node-data,
+.node .node-actions,
+.node .edit-box-div,
+.node .remark-box-div,
+.node [id^="node-children-"] {
+    flex: 0 0 100%;
+    order: 10;
+}
+
+/* Comment text */
+.node .node-data {
+    margin-top: 10px;
+    font-size: 0.95em;
+    line-height: 1.65;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
+/* Action row */
+.node .node-actions {
+    margin-top: 8px;
+    border-top: 1px solid #2a5468;
+    padding-top: 5px;
+    font-size: 0.78em;
+}
+
+/* Reply form inside node — display:none owned by common.css; just clear floats when open */
+.remark-box-div.toggle-open {
+    display: flow-root;
+}
+
+/* Thread container spacing */
+.thread {
+    margin-top: 1rem;
+}
+
+.no-comments {
+    background-color: #184254;
+    border: 1px solid #336173;
+    border-radius: 6px;
+    padding: 20px;
+    text-align: center;
+    color: #aaaaaa;
+    font-style: italic;
+    margin-top: 1rem;
+}
+
+/* Main reply form card */
+.remark-box-div-main {
+    background-color: #184254;
+    border: 1px solid #336173;
+    border-radius: 6px;
+    padding: 16px 20px;
+    margin-bottom: 1.5rem;
+    display: flow-root; /* clears internal floats without clipping */
+}
+
+/* Wiki page tabs — content | history */
+.wiki-tabs {
+    display: flex;
+    gap: 0;
+    border-bottom: 2px solid #2a5468;
+    margin-bottom: 1rem;
+}
+
+.wiki-tab {
+    padding: 6px 16px;
+    color: #aaaaaa;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    font-size: 0.85em;
+}
+
+.wiki-tab:hover {
+    color: #6DCFF6;
+    background: #184254;
+}
+
+.wiki-tab.active {
+    color: #6DCFF6;
+    background: #184254;
+    border-color: #2a5468;
+    border-bottom: 2px solid #184254;
+    margin-bottom: -2px;
 }
diff --git a/remarkbox_chaostheory/static/theme/chaostheory/footer-lines-bkg.png b/remarkbox_chaostheory/static/theme/chaostheory/footer-lines-bkg.png
new file mode 100644
index 0000000..26783f7
Binary files /dev/null and b/remarkbox_chaostheory/static/theme/chaostheory/footer-lines-bkg.png differ
diff --git a/remarkbox_chaostheory/static/theme/chaostheory/foxhopnet.png b/remarkbox_chaostheory/static/theme/chaostheory/foxhopnet.png
new file mode 100644
index 0000000..97fbc4f
Binary files /dev/null and b/remarkbox_chaostheory/static/theme/chaostheory/foxhopnet.png differ
diff --git a/remarkbox_chaostheory/templates/chaostheory-base.j2 b/remarkbox_chaostheory/templates/chaostheory-base.j2
index 2839641..39bf983 100644
--- a/remarkbox_chaostheory/templates/chaostheory-base.j2
+++ b/remarkbox_chaostheory/templates/chaostheory-base.j2
@@ -2,14 +2,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>{% block title %}{{ request.domain }}{% endblock %}</title>
+  <title>{% block title %}foxhop.net{% endblock %}</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#06060e">
 
-  {% include 'snippets/stylesheet-includes.j2' %}
+  <link rel="stylesheet" href="/static/css/common.css">
+  <link rel="stylesheet" href="/static/theme/chaostheory/css/960.css">
+  <link rel="stylesheet" href="/static/theme/chaostheory/css/pygments-native.css">
   <link rel="stylesheet" href="/static/theme/chaostheory/css/theme.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap">
 
   {% include 'snippets/javascript-includes.j2' %}
 </head>
@@ -22,36 +22,71 @@
 
 {% include 'snippets/flash-alerts.j2' %}
 
-<div class="searchbox">
-  {% include 'snippets/search.j2' %}
+<div id="header">
+  <a href="/">foxhop.net</a>
 </div>
 
-<h1 class="brand"><a href="/">foxhop<span class="brand-dot">.</span></a></h1>
-<p class="tagline">sensitive dependence on initial conditions</p>
+<div class="container_16">
+
+  <div id="wikibar" class="grid_16">
+    <div id="wikibar-left" class="grid_10">
+      <a href="/" class="on">home</a>
+      {%- if request.user %}
+      {{ snippets.user_link(request.user) }}
+      <a href="/log-out">log out</a>
+      {%- else %}
+      <a href="/join-or-log-in">join or log in</a>
+      {%- endif %}
+    </div>
+    <div id="wikibar-right" class="grid_6">
+      <form action="/search" id="search" onsubmit="submit.disabled = true; return true;">
+        <input type="hidden" name="namespace" value="{{ request.namespace.name }}">
+        <input type="input" name="keywords" id="keywords" placeholder="search" required/>
+      </form>
+    </div>
+  </div>
+
+  <div class="clear"></div>
+
+  <div id="content" class="grid_16">
+    {% block content %}
+    {% endblock %}
+  </div>
 
-<div id="remarkbox-menu">
-{%- block menu %}
-  <a href="/">home</a> |
-  <a href="/new">new thread</a> |
-  {%- if request.user %}
-  {{ snippets.user_link(request.user) }} <a href="/log-out">[log out]</a>
-  {%- else %}
-  <a href="/join-or-log-in">join or log in</a>
-  {%- endif %}
-{%- endblock %}
 </div>
 
-<div class="main">
-{% block content %}
-{% endblock %}
-</div>
-
-{% include 'snippets/phone-menu.j2' %}
-
-<div id="remarkbox-footer">
-  <br />
+<div id="footer">
   {% include 'snippets/powered-by.j2' %}
 </div>
 
+<script>
+// Build TOC from empty div.contents pandoc placeholder + heading id attrs
+document.addEventListener('DOMContentLoaded', function() {
+  var toc = document.querySelector('#content div.contents');
+  if (!toc) return;
+  var content = document.getElementById('content');
+  var headings = content.querySelectorAll('h2, h3, h4');
+  if (!headings.length) { toc.style.display = 'none'; return; }
+  var title = document.createElement('p');
+  title.style.cssText = 'font-weight:bold; margin:0 0 6px 0; color:#6DCFF6; font-size:0.9em;';
+  title.textContent = 'Contents';
+  var ul = document.createElement('ul');
+  ul.style.margin = '0';
+  headings.forEach(function(h) {
+    if (!h.id) return;
+    var depth = parseInt(h.tagName[1]) - 2;
+    var li = document.createElement('li');
+    li.style.paddingLeft = (depth * 12) + 'px';
+    var a = document.createElement('a');
+    a.href = '#' + h.id;
+    a.textContent = h.textContent;
+    li.appendChild(a);
+    ul.appendChild(li);
+  });
+  toc.appendChild(title);
+  toc.appendChild(ul);
+});
+</script>
+
 </body>
 </html>