commit a7a9bd53b54f224cbf7e17977c4d039ca2ba7bb1
Author: James Brumond <james@jbrumond.me>
Date:   Sat May 6 20:57:37 2023 -0700

    experimenting with docs2website setup

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..9653646
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,14 @@
+
+root = true
+
+[*]
+indent_size = 4
+indent_style = tab
+
+[*.{js,ts,css,html}]
+indent_size = 4
+indent_style = tab
+
+[*.{md,json,jsonc,yml,yaml,sql}]
+indent_size = 2
+indent_style = space
diff --git a/config.yaml b/config.yaml
new file mode 100644
index 0000000..88d7ee0
--- /dev/null
+++ b/config.yaml
@@ -0,0 +1,92 @@
+
+# Input Configuration (where your documents are)
+input:
+  # The root directory for where to find input file. All other
+  # input paths are relative to this, and must be under this
+  root: ./docs
+
+  # Files identified in this section are copied over to the
+  # output directory unprocessed
+  raw:
+  - ./**/*.{png,jpg,jpeg,gif}
+
+  # Files in this section will be processed as mustache templates,
+  # but will receive no other processing
+  text:
+  - ./**/*.{css,html,js,txt}
+
+  # Files to be parsed as markdown (optionally with front matter)
+  # and rendered to HTML pages
+  markdown:
+  - ./**/*.md
+
+  # Files to be parsed as JSON Schema definitions and rendered
+  # to HTML documentation. Additionally, the original JSON / Yaml
+  # file will also be copied to the output directory, unaltered
+  schema+json:
+  - ./**/*.schema.json
+  schema+yaml:
+  - ./**/*.schema.{yaml,yml}
+
+  # Files to be parsed as OpenAPI V3 specifications and rendered
+  # to HTML documentation. Additionally, the original JSON / Yaml
+  # file will also be copied to the output directory, unaltered
+  openapi+json:
+  - ./**/*.openapi.json
+  openapi+yaml:
+  - ./**/*.openapi.{yaml,yml}
+
+# Template Configuration (used by mustache to actually render pages)
+templates:
+  # Root directory where layout files are stored
+  layouts: ./layouts
+
+  # Root directory where partial files are stored
+  partials: ./partials
+
+  # Root directory where additional color themes are stored
+  themes: ./themes
+
+  # Overrides the opening/closing tags used in mustache template rendering
+  tags: [ '{{', '}}' ]
+
+  # (Optional) whitelist of environment variables to be made accessible
+  # under `env` when processing templates
+  env:
+  - EXAMPLE_ENVIRONMENT_VARIABLE
+  - FOO_BAR_BAZ
+
+# Output Configuration (where to put your website)
+output:
+  # The root directory to output your website at. The path of an
+  # input file relative to $.input.root will match (aside from file
+  # extension) the path of the output file relative to $.output.root
+  root: ./www
+
+  # Any input types listed here will have their raw input files copied
+  # into the output directory (in addition to creating the new, processed
+  # output files)
+  include_inputs:
+  - schema+json
+  - schema+yaml
+  - openapi+json
+  - openapi+yaml
+
+  # When writing either a JSON or Yaml file, if this flag is set to true,
+  # the file will be converted to the other format so both formats are
+  # included in the output
+  include_yaml_and_json: true
+
+  # If set to true, intermediate markdown files that are generated from
+  # other input sources will also be written to the output directory. For
+  # example, a JSON Schema file goes through two transform steps, e.g.
+  # 
+  #   "schema.json" => "schema.md" => "schema.html"
+  # 
+  # Typically, those intermediate markdown files are not written anywhere,
+  # only passed from one step to the other, unless this flag is set.
+  include_intermediate_markdown: false
+
+# Markdown-to-HTML Configuration
+markdown:
+  # 
diff --git a/docs/base.css b/docs/base.css
new file mode 100644
index 0000000..9f69844
--- /dev/null
+++ b/docs/base.css
@@ -0,0 +1,1238 @@
+
+:root {
+	font-size: 16px;
+	--font-open-sans: 'Open Sans', sans-serif;
+	--font-monospace: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+}
+
+@media (max-width: 400px) {
+	:root {
+		font-size: 14px;
+	}
+}
+
+@media (min-width: 1600px) or (min-height: 1600px) {
+	:root {
+		font-size: calc(12px + 100vw / 400);
+	}
+}
+
+@media print {
+	:root {
+		font-size: 12px;
+	}
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	box-sizing: border-box;
+}
+
+html, body {
+	height: 100%;
+	min-height: 100%;
+}
+
+body {
+	background: var(--theme-bg-main);
+}
+
+color-theme-toggle,
+maximize-toggle,
+outline-toggle {
+	position: fixed;
+	top: 0.5rem;
+	right: 0.5rem;
+	display: block;
+	z-index: 2;
+}
+
+maximize-toggle {
+	top: 0.5rem;
+	right: 3rem;
+}
+
+outline-toggle {
+	top: 0.5rem;
+	right: 5.5rem;
+}
+
+#outline {
+	position: fixed;
+	top: 4rem;
+	right: 2rem;
+	width: min(30rem, 80vw);
+	max-height: 80vh;
+	overflow-y: auto;
+	background: var(--theme-bg-light);
+	border: 0.2rem solid var(--theme-line);
+	display: none;
+	z-index: 10;
+}
+
+[data-show-outline] #outline {
+	display: block;
+}
+
+#outline h2 {
+	margin-block: 1rem;
+	margin-inline: 1rem;
+	padding: 0;
+	font-size: 1.4rem;
+}
+
+#outline ol {
+	list-style: none;
+	padding: 0;
+}
+
+#outline li[data-depth='h1'] {
+	font-size: 1.2rem;
+	font-weight: 700;
+	margin-inline-start: 1rem;
+}
+
+#outline li[data-depth='h2'] {
+	font-size: 1.1rem;
+	font-weight: 600;
+	margin-inline-start: 2rem;
+}
+
+#outline li[data-depth='h3'] {
+	margin-inline-start: 3rem;
+}
+
+#outline li[data-depth='h4'] {
+	font-size: 0.9rem;
+	margin-inline-start: 4rem;
+}
+
+#outline li[data-depth='h5'] {
+	font-size: 0.9rem;
+	margin-inline-start: 5rem;
+}
+
+#outline li[data-depth='h6'] {
+	font-size: 0.9rem;
+	margin-inline-start: 6rem;
+}
+
+@media print {
+	color-theme-toggle,
+	maximize-toggle,
+	outline-toggle,
+	#outline {
+		display: hidden !important;
+	}
+}
+
+
+
+
+/* ===== Theme Toggle Animations ===== */
+
+/* todo: is there a better way to handle defining these animations? despite efforts,
+   this implementation still has some degree of transition stacking / delays in nested
+   svg contexts in chrome */
+
+/* BG Color Only */
+body[data-color-transition-enabled],
+body[data-color-transition-enabled] :is(
+	[data-bg-transition]:not([data-color-transition]):not([data-border-transition]),
+	button,
+) {
+	transition: background linear .5s;
+}
+
+/* Border Color Only */
+body[data-color-transition-enabled] :is(
+	[data-border-transition]:not([data-bg-transition]):not([data-color-transition])
+) {
+	transition: border-color linear .5s;
+}
+
+/* Color Only */
+body[data-color-transition-enabled] :is(
+	[data-color-transition]:not([data-bg-transition]):not([data-border-transition]),
+	p,
+	a:not(h1 a),
+	span:not(p span),
+	time:not(p time),
+	li:not([role='doc-footnote']), dt, dd,
+	h1, h2, h3, h4, h5, h6,
+	td, th
+) {
+	transition: color linear .5s;
+}
+
+/* BG and Color */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-color-transition]:not([data-border-transition]),
+	pre,
+	code:not(pre code),
+	samp:not(pre samp),
+	mark,
+	[role='doc-footnote']
+) {
+	transition:
+		color linear .5s,
+		background linear .5s;
+}
+
+/* BG and Border */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-border-transition]:not([data-color-transition]),
+	#root > footer,
+	p.error-box,
+	.popup form,
+	#outline
+) {
+	transition:
+		background linear .5s,
+		border-color linear .5s;
+}
+
+/** Color and Border */
+body[data-color-transition-enabled] :is(
+	[data-color-transition][data-border-transition]:not([data-bg-transition]),
+	.private-indicator,
+	tbody tr,
+	.tbody .tr,
+) {
+	transition:
+		color linear .5s,
+		border-color linear .5s;
+}
+
+/* BG, Color, and Border */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-border-transition][data-color-transition],
+	input, textarea, select,
+	blockquote,
+	:is(section, aside):is([role='note'], .info, .highlight, .warning, .problem)
+) {
+	transition:
+		color linear .5s,
+		background linear .5s,
+		border-color linear .5s;
+}
+
+/* Fill and Stroke */
+body[data-color-transition-enabled] svg [fill^='var('][stroke^='var(']:not([fill^='var('][stroke^='var('] *) {
+	transition:
+		fill linear .5s,
+		stroke linear .5s;
+}
+
+/* Fill Only */
+body[data-color-transition-enabled] svg [fill^='var(']:not([stroke^='var(']):not([fill^='var('] *) {
+	transition: fill linear .5s;
+}
+
+/* Stroke Only */
+body[data-color-transition-enabled] :is(
+	svg [stroke^='var(']:not([fill^='var(']):not([stroke^='var('] *),
+	svg.icon
+ ) {
+	transition: stroke linear .5s;
+}
+
+
+
+
+
+
+
+
+
+
+/* ===== Base Layout ===== */
+
+#root {
+	position: relative;
+	min-height: 100%;
+	padding-block: 2rem;
+	z-index: 1;
+}
+
+@media print {
+	#root {
+		padding-block: 0.5rem;
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== Footer ===== */
+
+#root > footer {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 2.5rem;
+	background: var(--theme-bg-light);
+	border-block-start: 0.1rem solid var(--theme-line);
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+	overflow: hidden;
+}
+
+#root > footer :is(.left, .right) {
+	min-width: 22rem;
+}
+
+#root > footer :is(.left, .center, .right) {
+	flex: 1 1 calc(100% / 3);
+}
+
+#root > footer .left {
+	text-align: left;
+	padding-inline-start: 1.5rem;
+}
+
+#root > footer .center {
+	text-align: center;
+}
+
+#root > footer .right {
+	text-align: right;
+}
+
+#root > footer ul {
+	padding: 0;
+}
+
+#root > footer p {
+	font-size: 0.8rem;
+	margin: 0;
+	padding-block: 0.5rem;
+}
+
+
+@media (max-width: 1199px) {
+	#root > footer {
+		margin-block-start: 8rem;
+		padding-block-end: 2rem;
+		background: transparent;
+		border: 0;
+		position: static;
+		flex-direction: column;
+		height: auto;
+	}
+
+	#root > footer > div,
+	#root > footer :is(p, .left, .center, .right) {
+		font-size: 0.8rem;
+		text-align: center;
+		padding-inline: 0;
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== Typography ===== */
+
+ul, ol {
+	padding-inline-start: 2.5rem;
+}
+
+h1, h2, h3, h4, h5, h6,
+p, a, li, dt, dd, label,
+table, .table, td, .td {
+	font-family: var(--font-open-sans);
+}
+
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1;
+}
+
+h1, h2, h3, h4, h5, h6,
+th, .th {
+	color: var(--theme-text-heading);
+}
+
+code, samp, pre {
+	color: var(--theme-code-normal);
+	font-family: var(--font-monospace);
+}
+
+:not(pre) > code {
+	color: inherit;
+	background: var(--theme-bg-light);
+	padding-inline: 0.25rem;
+	border: 0.1rem solid var(--theme-line);
+}
+
+pre {
+	margin-block: 3rem;
+	margin-inline: 2rem;
+	padding-block: 0.5rem;
+	padding-inline: 1rem;
+	border: 0.1rem solid var(--theme-line);
+	border-radius: 1rem;
+	font-size: 1rem;
+	overflow: auto;
+	background: var(--theme-bg-light);
+}
+
+code, samp {
+	font-size: 1rem;
+}
+
+h1 {
+	font-size: 2rem;
+	font-weight: 300;
+	margin-block-end: 1rem;
+}
+
+article header h1:not(.multiline),
+article header h1.multiline > div {
+	display: flex;
+	flex-direction: row;
+	column-gap: 1rem;
+	align-items: center;
+	margin-block: 0.5rem;
+	line-height: 1.3;
+}
+
+article header h1:not(.multiline) > svg,
+article header h1.multiline > div > svg {
+	flex: 0 0 auto;
+}
+
+h2 {
+	font-size: 2rem;
+	font-weight: 500;
+	margin-block: 4rem 1rem;
+}
+
+h3 {
+	font-size: 1.17rem;
+}
+
+h3, h4, h5, h6 {
+	margin-block: 3rem 1rem;
+}
+
+h5, h6 {
+	font-size: 0.9rem;
+	font-weight: 600;
+}
+
+h6 {
+	font-weight: 500;
+}
+
+:not(li) > :is(h1, h2, h3, h4, h5, h6),
+li > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
+	padding-block-start: 1rem;
+}
+
+:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3),
+:is(h1, h2, h3):first-child {
+	margin-block-start: 1rem;
+}
+
+:is(h1, h2, h3, h4, h5, h6) + :is(h4, h5, h6),
+:is(h4, h5, h6):first-child {
+	margin-block-start: 0;
+}
+
+p, small, li, dt, dd, label,
+table, .table, td, .td {
+	color: var(--theme-text-body);
+}
+
+p {
+	margin-block: 1.25rem;
+	margin-inline: 0;
+	font-size: 1rem;
+	line-height: 1.75;
+}
+
+:is(aside, section):is([role='note'], .info, .highlight, .warning, .problem) {
+	font-size: 1rem;
+	color: var(--theme-text-light);
+	padding-block: 0.6rem;
+	padding-inline-start: 1rem;
+	margin: 1rem;
+	border-inline-start: 0.8rem solid var(--theme-line);
+	background: var(--theme-bg-light);
+}
+
+:is(aside, section).info {
+	border-inline-start-color: var(--theme-accent-info);
+}
+
+:is(aside, section).highlight {
+	border-inline-start-color: var(--theme-accent-highlight);
+}
+
+:is(aside, section).warning {
+	border-inline-start-color: var(--theme-accent-warning);
+}
+
+:is(aside, section).problem {
+	border-inline-start-color: var(--theme-accent-problem);
+}
+
+:is(a, svg.icon).safe {
+	color: var(--theme-text-safe);
+}
+
+:is(a, svg.icon).warn {
+	color: var(--theme-text-warn);
+}
+
+:is(a, svg.icon).danger {
+	color: var(--theme-text-danger);
+}
+
+[data-currency].negative {
+	color: var(--theme-icon-failure-indicator);
+}
+
+li {
+	font-size: 1rem;
+	margin-block: 0.5rem;
+	line-height: 1.75;
+}
+
+ul[role='doc-endnotes'] {
+	list-style: none;
+	padding-inline-start: 1rem;
+}
+
+[role='doc-footnote']:target {
+	background: var(--theme-bg-heavy);
+}
+
+dl {
+	padding: 1rem;
+}
+
+dt, dd {
+	/*  */
+}
+
+dt {
+	font-weight: 700;
+}
+
+dt p {
+	margin-block-end: 1rem;
+}
+
+dt:not(:first-of-type) {
+	margin-block-start: 2rem;
+}
+
+/* dd {
+	margin-inline-start: 1rem;
+	padding-inline-start: 1rem;
+	padding-block: 0.125rem;
+	border-inline-start: 0.5rem var(--theme-line) solid;
+	background: var(--theme-bg-heavy)
+} */
+
+dd p {
+	margin-block: 1rem;
+}
+
+table, .table {
+	display: table;
+	margin-block: 2rem;
+	border-collapse: collapse;
+}
+
+table, th, td,
+.table, .th, .td {
+	font-size: 1rem;
+	line-height: 1.75;
+}
+
+thead, .thead {
+	display: table-header-group;
+}
+
+tbody, .tbody {
+	display: table-row-group;
+}
+
+tbody tr,
+.tbody .tr {
+	border-top: 1px var(--theme-line) solid;
+}
+
+tr, .tr {
+	display: table-row;
+}
+
+th, .th {
+	text-align: center;
+	font-weight: 700;
+}
+
+th, .th,
+td, .td {
+	padding-block: 0.5rem;
+	padding-inline: 1rem;
+	display: table-cell;
+}
+
+td, .td {
+	display: table-cell;
+	font-weight: 300;
+	vertical-align: top;
+}
+
+:is(td, .td):not(:last-of-type) {
+	border-inline-end: 0.1rem solid var(--theme-line);
+}
+
+:is(table, .table) :is(input, select) {
+	margin-block: 0;
+}
+
+table dl {
+	padding: 0;
+}
+
+small {
+	font-size: 0.8rem;
+	font-family: var(--font-open-sans);
+	/* font-family: var(--font-nunito); */
+}
+
+a {
+	color: var(--theme-text-link);
+}
+
+a:active,
+a:hover,
+a:focus {
+	color: var(--theme-text-link-active);
+}
+
+a:visited {
+	color: var(--theme-text-link-visited);
+}
+
+a.local-ref {
+	font-size: 0.8em;
+	font-style: italic;
+}
+
+blockquote {
+	margin-block: 2rem;
+	margin-inline: 1rem;
+	padding-block: 0.5rem;
+	padding-inline: 1.5rem;
+	border-inline-start: 0.25rem var(--theme-line) solid;
+}
+
+blockquote.external-embed {
+	max-width: 60rem;
+	background: var(--theme-bg-light);
+}
+
+blockquote p {
+	margin: 0;
+}
+
+hr {
+	border-block-start-width: 0.1rem;
+	border-style: solid;
+	border-color: var(--theme-line);
+	width: 90%;
+	margin-block: 4rem 6rem;
+}
+
+mark {
+	color: var(--theme-text-highlight);
+	background-color: var(--theme-bg-text-highlight);
+	padding: 0.2rem;
+}
+
+::selection {
+	fill: var(--theme-text-selection) !important;
+	color: var(--theme-text-selection) !important;
+	background-color: var(--theme-bg-text-selection) !important;
+}
+
+figure {
+	margin-block: 2rem;
+    margin-inline: 1rem;
+    padding-bottom: 1.5rem;
+}
+
+figure > :not(figcaption) {
+	margin-block: 0rem;
+}
+
+figure pre {
+	margin-inline: 0;
+}
+
+figcaption {
+	font-family: var(--font-open-sans);
+	text-align: center;
+	font-size: 0.85rem;
+	margin-block-start: 1rem;
+	color: var(--theme-text-light);
+	max-width: 60vw;
+	margin-inline: auto;
+}
+
+a.icon-link {
+	display: inline-flex;
+	column-gap: 0.3rem;
+	align-items: center;
+}
+
+a.icon-link svg.icon {
+	--icon-size: 1rem;
+}
+
+a.heading-anchor {
+	color: var(--theme-text-light);
+}
+
+:is(h1, h2, h3, h4, h5, h6) svg.icon:not(.heading-anchor > svg) {
+	--icon-size: 1em;
+}
+
+.private-indicator {
+	color: var(--theme-text-safe);
+	display: inline-flex;
+	align-items: baseline;
+	column-gap: 0.25rem;
+	margin-inline: 0.25rem;
+	margin-block-end: 1rem;
+	font-family: var(--font-open-sans);
+	border: 0.15rem solid var(--theme-line-safe);
+	border-radius: 1rem;
+	padding: 0.2rem 0.5rem;
+	font-weight: 600;
+	font-size: 0.8rem;
+}
+
+.private-indicator > svg.icon {
+	align-self: center;
+}
+
+.cite-label {
+	font-weight: 600;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== Popups ===== */
+
+.popup {
+	z-index: 1;
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	user-select: none;
+	pointer-events: none;
+	display: flex;
+	opacity: 0;
+	transition:
+		opacity 0.125s linear,
+		background .5s linear;
+	background: var(--theme-bg-popup-mask);
+}
+
+.popup:target {
+	opacity: 1;
+	user-select: unset;
+	pointer-events: unset;
+}
+
+.popup form {
+	margin: auto;
+	position: relative;
+	background: var(--theme-bg-main);
+	border: 0.125rem solid var(--theme-border-input);
+	border-radius: 1rem;
+	padding-block-start: 1rem;
+	padding-block-end: 2rem;
+	padding-inline: 2rem;
+	width: 40rem;
+	max-width: 90vw;
+}
+
+.popup h3 {
+	margin-block-start: 2rem;
+}
+
+.popup form :is(h1, h2, h3, h4, h5, h6):first-child {
+	margin-block-start: 0;
+}
+
+.popup a.close-popup {
+	position: absolute;
+	top: 1rem;
+	right: 2rem;
+	font-size: 1rem;
+}
+
+.popup form :is(input, select) {
+	margin-block-start: 0.35rem;
+	margin-block-end: 1rem;
+}
+
+.popup form .inline-list {
+	margin-block-start: 2rem;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== Forms and Inputs ===== */
+
+label {
+	display: block;
+	font-family: var(--font-open-sans);
+	font-size: 1rem;
+	margin-block-start: 1rem;
+}
+
+label:not(:first-of-type) {
+	margin-block-start: 2rem;
+}
+
+label.radio {
+	display: flex;
+	margin-block: 1rem;
+	justify-content: flex-start;
+}
+
+input,
+textarea {
+	display: block;
+	margin-block-start: 0.35rem;
+	margin-block-end: 1rem;
+	border: 0.125rem var(--theme-border-input) solid;
+	border-radius: 0.25rem;
+	color: var(--theme-text-body);
+	background-color: var(--theme-bg-input);
+	padding: 0.5rem;
+	font-family: var(--font-open-sans);
+	font-size: 1rem;
+	width: 20rem;
+}
+
+input[disabled],
+textarea[disabled] {
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+input[type='text']:invalid,
+input[type='password']:invalid,
+textarea:invalid {
+	border-color: var(--theme-border-input-invalid);
+}
+
+input[type='text'][readonly] {
+	color: var(--theme-text-light);
+	border-color: var(--theme-line);
+}
+
+input[type='checkbox'] {
+	width: 1rem;
+	height: 1rem;
+	padding: 0;
+}
+
+input[type='checkbox'] + label {
+	margin-inline-start: 0.5rem;
+	margin-inline-end: 2rem;
+}
+
+input[type='radio'] {
+	flex: 0 0 2rem;
+	margin: 0.2rem;
+}
+
+textarea {
+	line-height: 1.7rem;
+	font-family: var(--font-monospace);
+}
+
+::-webkit-input-placeholder {
+	color: var(--theme-text-light);
+}
+
+button {
+	padding: 0.5rem 1.5rem;
+	border-radius: 0.5rem;
+	font-size: 1rem;
+	margin-block-start: 1rem;
+	margin-inline-end: 1rem;
+	cursor: pointer;
+	user-select: none;
+	appearance: none;
+	color: var(--theme-text-button-primary);
+	background: var(--theme-bg-button-primary);
+	text-decoration: none;
+	font-size: 1rem;
+	font-family: var(--font-open-sans);
+	font-weight: 700;
+	line-height: 2rem;
+	display: flex;
+	align-items: center;
+}
+
+button.icon-only {
+	padding: 0.5rem;
+}
+
+button svg.icon {
+	--icon-size: 2rem;
+}
+
+button:not(.icon-only) svg.icon:first-child {
+	margin-inline-end: 0.5rem;
+}
+
+button:not(.icon-only) svg.icon:last-child {
+	margin-inline-start: 0.5rem;
+}
+
+button[data-style='secondary'] {
+	color: var(--theme-text-button-secondary);
+	background: var(--theme-bg-button-secondary);
+}
+
+button:not([disabled]):hover {
+	background: var(--theme-bg-button-primary-hover);
+}
+
+button[data-style='secondary']:not([disabled]):hover {
+	background: var(--theme-bg-button-secondary-hover);
+}
+
+button[disabled] {
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+select {
+	display: block;
+	margin-block-start: 0.35rem;
+	margin-block-end: 1rem;
+	border: 0.125rem var(--theme-border-input) solid;
+	border-radius: 0.25rem;
+	color: var(--theme-text-body);
+	background-color: var(--theme-bg-input);
+	padding: 0.5rem;
+	font-family: var(--font-open-sans);
+	font-size: 1rem;
+	width: 20rem;
+	cursor: pointer;
+}
+
+select[disabled] {
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+select option {
+	color: var(--theme-text-body);
+	background-color: var(--theme-bg-input);
+	padding: 0.5rem;
+	font-family: var(--font-open-sans);
+	font-size: 1rem;
+}
+
+:is(table, .table) :is(input, select) {
+	margin-block: 0;
+}
+
+p.error-box {
+	margin: 0;
+	padding: 0.5rem;
+	border-radius: 0.25rem;
+	color: var(--theme-text-error-box);
+	background: var(--theme-bg-error-box);
+	border: 0.1rem solid var(--theme-border-error-box);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== Rendered Blocks ===== */
+
+/* === General === */
+
+figure[data-lang] {
+	margin-block: 2rem;
+}
+
+figure[data-lang] svg {
+	display: block;
+	margin-inline: auto;
+}
+
+figure[data-size='small'] svg {
+	max-width: 40rem;
+	max-height: min(20rem, 50vw);
+}
+
+figure[data-size='medium'] svg {
+	max-width: 60rem;
+	max-height: min(40rem, 50vw);
+}
+
+figure[data-size='large'] svg {
+	max-height: min(60rem, 80vw);
+}
+
+/* figure[data-lang].big {
+	background: var(--theme-bg-main);
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1000;
+	display: flex;
+	border: 0.25rem var(--theme-line) solid;
+	margin: 3rem;
+}
+
+figure[data-lang].big svg {
+	max-width: none !important;
+	max-height: none !important;
+} */
+
+figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text {
+	fill: var(--theme-text-body);
+}
+
+figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text:not([font-family~='Courier']) {
+	font-family: var(--font-open-sans);
+}
+
+[data-lang='bash:samp'] samp {
+	display: block;
+	margin-block-start: 0.5rem;
+	padding-block-start: 0.5rem;
+	border-block-start: 0.1rem solid var(--theme-line);
+}
+
+/* === KaTeX === */
+
+.katex-display {
+	color: var(--theme-text-body);
+}
+
+.katex-display .katex {
+	font-size: 1.4rem;
+}
+
+/* using "body" here to add specificity, to override styles from katex.min.css */
+body .katex-display {
+	margin: 2rem;
+}
+
+body .katex-display > .katex {
+	text-align: left;
+}
+
+:not(.katex-display) > .katex {
+	font-size: inherit;
+	margin-inline: 0.5rem;
+}
+
+.katex span[style~='color:transparent;'] {
+	user-select: none;
+}
+
+/* === Pikchr */
+
+/* boxes */
+.rendered-pikchr svg path[style*='fill:none;'] {
+	fill: var(--theme-bg-light) !important;
+	transition: fill linear .5s;
+}
+
+/* lines and boxes */
+.rendered-pikchr svg path[style*='stroke:rgb(0,0,0);'] {
+	stroke: var(--theme-text-body) !important;
+}
+
+/* circles */
+.rendered-pikchr svg circle[style*='stroke:rgb(0,0,0);'] {
+	stroke: var(--theme-text-body) !important;
+}
+
+/* arrow heads */
+.rendered-pikchr svg polygon[style='fill:rgb(0,0,0)'] {
+	fill: var(--theme-text-body) !important;
+	transition: fill linear .5s;
+}
+
+/* === Bytefield === */
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-width='1'] {
+	stroke-width: 2;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='11'] {
+	font-size: 14px;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='18'] {
+	font-size: 16px;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Courier'] {
+	font-family: var(--font-monospace);
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Times'] {
+	font-family: var(--font-open-sans);
+}
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,1'] {
+	stroke-dasharray: 4px, 3px;
+}
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,3'] {
+	stroke-dasharray: 2px, 3px;
+}
+
+
+
+
+
+
+
+
+
+
+
+blockquote.external-embed .h-entry footer p {
+    font-size: 0.8rem;
+	margin-block: 1rem;
+}
+
+main > .h-entry header p {
+	margin-block: 0.6rem;
+}
+
+main > .h-entry header p.p-summary {
+	font-style: italic;
+	color: var(--theme-text-light);
+}
+
+main > .h-entry header p.event-time {
+	font-size: 0.8rem;
+	margin-block: 0.3rem;
+}
+
+main > .h-entry header p.publish-time {
+	font-size: 0.8rem;
+	margin-block: 0.3rem;
+}
+
+
diff --git a/docs/colors.css b/docs/colors.css
new file mode 100644
index 0000000..a756c93
--- /dev/null
+++ b/docs/colors.css
@@ -0,0 +1,22 @@
+
+:root {
+	color-scheme: light dark;
+}
+
+body {
+	{{> .themes/Minimal Light }}
+}
+
+body[data-color-scheme='dark'] {
+	{{> .themes/Minimal Dark }}
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		{{> .themes/Minimal Dark }}
+	}
+
+	body[data-color-scheme='light'] {
+		{{> .themes/Minimal Light }}
+	}
+}
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..62443dd
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,8 @@
+---
+title: Hello, World
+layout: main.html
+---
+
+## Hello, World!
+
+Its currently {{ build_time.rfc2822 }}
diff --git a/layouts/main.html b/layouts/main.html
new file mode 100644
index 0000000..6b60bcd
--- /dev/null
+++ b/layouts/main.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>{{ page.title }}</title>
+	<link rel="stylesheet" href="colors.css">
+	<link rel="stylesheet" href="base.css">
+</head>
+<body>
+	{{> .content }}
+</body>
+</html>
\ No newline at end of file
diff --git a/www/base.css b/www/base.css
new file mode 100644
index 0000000..9f69844
--- /dev/null
+++ b/www/base.css
@@ -0,0 +1,1238 @@
+
+:root {
+	font-size: 16px;
+	--font-open-sans: 'Open Sans', sans-serif;
+	--font-monospace: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+}
+
+@media (max-width: 400px) {
+	:root {
+		font-size: 14px;
+	}
+}
+
+@media (min-width: 1600px) or (min-height: 1600px) {
+	:root {
+		font-size: calc(12px + 100vw / 400);
+	}
+}
+
+@media print {
+	:root {
+		font-size: 12px;
+	}
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	box-sizing: border-box;
+}
+
+html, body {
+	height: 100%;
+	min-height: 100%;
+}
+
+body {
+	background: var(--theme-bg-main);
+}
+
+color-theme-toggle,
+maximize-toggle,
+outline-toggle {
+	position: fixed;
+	top: 0.5rem;
+	right: 0.5rem;
+	display: block;
+	z-index: 2;
+}
+
+maximize-toggle {
+	top: 0.5rem;
+	right: 3rem;
+}
+
+outline-toggle {
+	top: 0.5rem;
+	right: 5.5rem;
+}
+
+#outline {
+	position: fixed;
+	top: 4rem;
+	right: 2rem;
+	width: min(30rem, 80vw);
+	max-height: 80vh;
+	overflow-y: auto;
+	background: var(--theme-bg-light);
+	border: 0.2rem solid var(--theme-line);
+	display: none;
+	z-index: 10;
+}
+
+[data-show-outline] #outline {
+	display: block;
+}
+
+#outline h2 {
+	margin-block: 1rem;
+	margin-inline: 1rem;
+	padding: 0;
+	font-size: 1.4rem;
+}
+
+#outline ol {
+	list-style: none;
+	padding: 0;
+}
+
+#outline li[data-depth='h1'] {
+	font-size: 1.2rem;
+	font-weight: 700;
+	margin-inline-start: 1rem;
+}
+
+#outline li[data-depth='h2'] {
+	font-size: 1.1rem;
+	font-weight: 600;
+	margin-inline-start: 2rem;
+}
+
+#outline li[data-depth='h3'] {
+	margin-inline-start: 3rem;
+}
+
+#outline li[data-depth='h4'] {
+	font-size: 0.9rem;
+	margin-inline-start: 4rem;
+}
+
+#outline li[data-depth='h5'] {
+	font-size: 0.9rem;
+	margin-inline-start: 5rem;
+}
+
+#outline li[data-depth='h6'] {
+	font-size: 0.9rem;
+	margin-inline-start: 6rem;
+}
+
+@media print {
+	color-theme-toggle,
+	maximize-toggle,
+	outline-toggle,
+	#outline {
+		display: hidden !important;
+	}
+}
+
+
+
+
+/* ===== Theme Toggle Animations ===== */
+
+/* todo: is there a better way to handle defining these animations? despite efforts,
+   this implementation still has some degree of transition stacking / delays in nested
+   svg contexts in chrome */
+
+/* BG Color Only */
+body[data-color-transition-enabled],
+body[data-color-transition-enabled] :is(
+	[data-bg-transition]:not([data-color-transition]):not([data-border-transition]),
+	button,
+) {
+	transition: background linear .5s;
+}
+
+/* Border Color Only */
+body[data-color-transition-enabled] :is(
+	[data-border-transition]:not([data-bg-transition]):not([data-color-transition])
+) {
+	transition: border-color linear .5s;
+}
+
+/* Color Only */
+body[data-color-transition-enabled] :is(
+	[data-color-transition]:not([data-bg-transition]):not([data-border-transition]),
+	p,
+	a:not(h1 a),
+	span:not(p span),
+	time:not(p time),
+	li:not([role='doc-footnote']), dt, dd,
+	h1, h2, h3, h4, h5, h6,
+	td, th
+) {
+	transition: color linear .5s;
+}
+
+/* BG and Color */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-color-transition]:not([data-border-transition]),
+	pre,
+	code:not(pre code),
+	samp:not(pre samp),
+	mark,
+	[role='doc-footnote']
+) {
+	transition:
+		color linear .5s,
+		background linear .5s;
+}
+
+/* BG and Border */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-border-transition]:not([data-color-transition]),
+	#root > footer,
+	p.error-box,
+	.popup form,
+	#outline
+) {
+	transition:
+		background linear .5s,
+		border-color linear .5s;
+}
+
+/** Color and Border */
+body[data-color-transition-enabled] :is(
+	[data-color-transition][data-border-transition]:not([data-bg-transition]),
+	.private-indicator,
+	tbody tr,
+	.tbody .tr,
+) {
+	transition:
+		color linear .5s,
+		border-color linear .5s;
+}
+
+/* BG, Color, and Border */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-border-transition][data-color-transition],
+	input, textarea, select,
+	blockquote,
+	:is(section, aside):is([role='note'], .info, .highlight, .warning, .problem)
+) {
+	transition:
+		color linear .5s,
+		background linear .5s,
+		border-color linear .5s;
+}
+
+/* Fill and Stroke */
+body[data-color-transition-enabled] svg [fill^='var('][stroke^='var(']:not([fill^='var('][stroke^='var('] *) {
+	transition:
+		fill linear .5s,
+		stroke linear .5s;
+}
+
+/* Fill Only */
+body[data-color-transition-enabled] svg [fill^='var(']:not([stroke^='var(']):not([fill^='var('] *) {
+	transition: fill linear .5s;
+}
+
+/* Stroke Only */
+body[data-color-transition-enabled] :is(
+	svg [stroke^='var(']:not([fill^='var(']):not([stroke^='var('] *),
+	svg.icon
+ ) {
+	transition: stroke linear .5s;
+}
+
+
+
+
+
+
+
+
+
+
+/* ===== Base Layout ===== */
+
+#root {
+	position: relative;
+	min-height: 100%;
+	padding-block: 2rem;
+	z-index: 1;
+}
+
+@media print {
+	#root {
+		padding-block: 0.5rem;
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== Footer ===== */
+
+#root > footer {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 2.5rem;
+	background: var(--theme-bg-light);
+	border-block-start: 0.1rem solid var(--theme-line);
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+	overflow: hidden;
+}
+
+#root > footer :is(.left, .right) {
+	min-width: 22rem;
+}
+
+#root > footer :is(.left, .center, .right) {
+	flex: 1 1 calc(100% / 3);
+}
+
+#root > footer .left {
+	text-align: left;
+	padding-inline-start: 1.5rem;
+}
+
+#root > footer .center {
+	text-align: center;
+}
+
+#root > footer .right {
+	text-align: right;
+}
+
+#root > footer ul {
+	padding: 0;
+}
+
+#root > footer p {
+	font-size: 0.8rem;
+	margin: 0;
+	padding-block: 0.5rem;
+}
+
+
+@media (max-width: 1199px) {
+	#root > footer {
+		margin-block-start: 8rem;
+		padding-block-end: 2rem;
+		background: transparent;
+		border: 0;
+		position: static;
+		flex-direction: column;
+		height: auto;
+	}
+
+	#root > footer > div,
+	#root > footer :is(p, .left, .center, .right) {
+		font-size: 0.8rem;
+		text-align: center;
+		padding-inline: 0;
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== Typography ===== */
+
+ul, ol {
+	padding-inline-start: 2.5rem;
+}
+
+h1, h2, h3, h4, h5, h6,
+p, a, li, dt, dd, label,
+table, .table, td, .td {
+	font-family: var(--font-open-sans);
+}
+
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1;
+}
+
+h1, h2, h3, h4, h5, h6,
+th, .th {
+	color: var(--theme-text-heading);
+}
+
+code, samp, pre {
+	color: var(--theme-code-normal);
+	font-family: var(--font-monospace);
+}
+
+:not(pre) > code {
+	color: inherit;
+	background: var(--theme-bg-light);
+	padding-inline: 0.25rem;
+	border: 0.1rem solid var(--theme-line);
+}
+
+pre {
+	margin-block: 3rem;
+	margin-inline: 2rem;
+	padding-block: 0.5rem;
+	padding-inline: 1rem;
+	border: 0.1rem solid var(--theme-line);
+	border-radius: 1rem;
+	font-size: 1rem;
+	overflow: auto;
+	background: var(--theme-bg-light);
+}
+
+code, samp {
+	font-size: 1rem;
+}
+
+h1 {
+	font-size: 2rem;
+	font-weight: 300;
+	margin-block-end: 1rem;
+}
+
+article header h1:not(.multiline),
+article header h1.multiline > div {
+	display: flex;
+	flex-direction: row;
+	column-gap: 1rem;
+	align-items: center;
+	margin-block: 0.5rem;
+	line-height: 1.3;
+}
+
+article header h1:not(.multiline) > svg,
+article header h1.multiline > div > svg {
+	flex: 0 0 auto;
+}
+
+h2 {
+	font-size: 2rem;
+	font-weight: 500;
+	margin-block: 4rem 1rem;
+}
+
+h3 {
+	font-size: 1.17rem;
+}
+
+h3, h4, h5, h6 {
+	margin-block: 3rem 1rem;
+}
+
+h5, h6 {
+	font-size: 0.9rem;
+	font-weight: 600;
+}
+
+h6 {
+	font-weight: 500;
+}
+
+:not(li) > :is(h1, h2, h3, h4, h5, h6),
+li > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
+	padding-block-start: 1rem;
+}
+
+:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3),
+:is(h1, h2, h3):first-child {
+	margin-block-start: 1rem;
+}
+
+:is(h1, h2, h3, h4, h5, h6) + :is(h4, h5, h6),
+:is(h4, h5, h6):first-child {
+	margin-block-start: 0;
+}
+
+p, small, li, dt, dd, label,
+table, .table, td, .td {
+	color: var(--theme-text-body);
+}
+
+p {
+	margin-block: 1.25rem;
+	margin-inline: 0;
+	font-size: 1rem;
+	line-height: 1.75;
+}
+
+:is(aside, section):is([role='note'], .info, .highlight, .warning, .problem) {
+	font-size: 1rem;
+	color: var(--theme-text-light);
+	padding-block: 0.6rem;
+	padding-inline-start: 1rem;
+	margin: 1rem;
+	border-inline-start: 0.8rem solid var(--theme-line);
+	background: var(--theme-bg-light);
+}
+
+:is(aside, section).info {
+	border-inline-start-color: var(--theme-accent-info);
+}
+
+:is(aside, section).highlight {
+	border-inline-start-color: var(--theme-accent-highlight);
+}
+
+:is(aside, section).warning {
+	border-inline-start-color: var(--theme-accent-warning);
+}
+
+:is(aside, section).problem {
+	border-inline-start-color: var(--theme-accent-problem);
+}
+
+:is(a, svg.icon).safe {
+	color: var(--theme-text-safe);
+}
+
+:is(a, svg.icon).warn {
+	color: var(--theme-text-warn);
+}
+
+:is(a, svg.icon).danger {
+	color: var(--theme-text-danger);
+}
+
+[data-currency].negative {
+	color: var(--theme-icon-failure-indicator);
+}
+
+li {
+	font-size: 1rem;
+	margin-block: 0.5rem;
+	line-height: 1.75;
+}
+
+ul[role='doc-endnotes'] {
+	list-style: none;
+	padding-inline-start: 1rem;
+}
+
+[role='doc-footnote']:target {
+	background: var(--theme-bg-heavy);
+}
+
+dl {
+	padding: 1rem;
+}
+
+dt, dd {
+	/*  */
+}
+
+dt {
+	font-weight: 700;
+}
+
+dt p {
+	margin-block-end: 1rem;
+}
+
+dt:not(:first-of-type) {
+	margin-block-start: 2rem;
+}
+
+/* dd {
+	margin-inline-start: 1rem;
+	padding-inline-start: 1rem;
+	padding-block: 0.125rem;
+	border-inline-start: 0.5rem var(--theme-line) solid;
+	background: var(--theme-bg-heavy)
+} */
+
+dd p {
+	margin-block: 1rem;
+}
+
+table, .table {
+	display: table;
+	margin-block: 2rem;
+	border-collapse: collapse;
+}
+
+table, th, td,
+.table, .th, .td {
+	font-size: 1rem;
+	line-height: 1.75;
+}
+
+thead, .thead {
+	display: table-header-group;
+}
+
+tbody, .tbody {
+	display: table-row-group;
+}
+
+tbody tr,
+.tbody .tr {
+	border-top: 1px var(--theme-line) solid;
+}
+
+tr, .tr {
+	display: table-row;
+}
+
+th, .th {
+	text-align: center;
+	font-weight: 700;
+}
+
+th, .th,
+td, .td {
+	padding-block: 0.5rem;
+	padding-inline: 1rem;
+	display: table-cell;
+}
+
+td, .td {
+	display: table-cell;
+	font-weight: 300;
+	vertical-align: top;
+}
+
+:is(td, .td):not(:last-of-type) {
+	border-inline-end: 0.1rem solid var(--theme-line);
+}
+
+:is(table, .table) :is(input, select) {
+	margin-block: 0;
+}
+
+table dl {
+	padding: 0;
+}
+
+small {
+	font-size: 0.8rem;
+	font-family: var(--font-open-sans);
+	/* font-family: var(--font-nunito); */
+}
+
+a {
+	color: var(--theme-text-link);
+}
+
+a:active,
+a:hover,
+a:focus {
+	color: var(--theme-text-link-active);
+}
+
+a:visited {
+	color: var(--theme-text-link-visited);
+}
+
+a.local-ref {
+	font-size: 0.8em;
+	font-style: italic;
+}
+
+blockquote {
+	margin-block: 2rem;
+	margin-inline: 1rem;
+	padding-block: 0.5rem;
+	padding-inline: 1.5rem;
+	border-inline-start: 0.25rem var(--theme-line) solid;
+}
+
+blockquote.external-embed {
+	max-width: 60rem;
+	background: var(--theme-bg-light);
+}
+
+blockquote p {
+	margin: 0;
+}
+
+hr {
+	border-block-start-width: 0.1rem;
+	border-style: solid;
+	border-color: var(--theme-line);
+	width: 90%;
+	margin-block: 4rem 6rem;
+}
+
+mark {
+	color: var(--theme-text-highlight);
+	background-color: var(--theme-bg-text-highlight);
+	padding: 0.2rem;
+}
+
+::selection {
+	fill: var(--theme-text-selection) !important;
+	color: var(--theme-text-selection) !important;
+	background-color: var(--theme-bg-text-selection) !important;
+}
+
+figure {
+	margin-block: 2rem;
+    margin-inline: 1rem;
+    padding-bottom: 1.5rem;
+}
+
+figure > :not(figcaption) {
+	margin-block: 0rem;
+}
+
+figure pre {
+	margin-inline: 0;
+}
+
+figcaption {
+	font-family: var(--font-open-sans);
+	text-align: center;
+	font-size: 0.85rem;
+	margin-block-start: 1rem;
+	color: var(--theme-text-light);
+	max-width: 60vw;
+	margin-inline: auto;
+}
+
+a.icon-link {
+	display: inline-flex;
+	column-gap: 0.3rem;
+	align-items: center;
+}
+
+a.icon-link svg.icon {
+	--icon-size: 1rem;
+}
+
+a.heading-anchor {
+	color: var(--theme-text-light);
+}
+
+:is(h1, h2, h3, h4, h5, h6) svg.icon:not(.heading-anchor > svg) {
+	--icon-size: 1em;
+}
+
+.private-indicator {
+	color: var(--theme-text-safe);
+	display: inline-flex;
+	align-items: baseline;
+	column-gap: 0.25rem;
+	margin-inline: 0.25rem;
+	margin-block-end: 1rem;
+	font-family: var(--font-open-sans);
+	border: 0.15rem solid var(--theme-line-safe);
+	border-radius: 1rem;
+	padding: 0.2rem 0.5rem;
+	font-weight: 600;
+	font-size: 0.8rem;
+}
+
+.private-indicator > svg.icon {
+	align-self: center;
+}
+
+.cite-label {
+	font-weight: 600;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== Popups ===== */
+
+.popup {
+	z-index: 1;
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	user-select: none;
+	pointer-events: none;
+	display: flex;
+	opacity: 0;
+	transition:
+		opacity 0.125s linear,
+		background .5s linear;
+	background: var(--theme-bg-popup-mask);
+}
+
+.popup:target {
+	opacity: 1;
+	user-select: unset;
+	pointer-events: unset;
+}
+
+.popup form {
+	margin: auto;
+	position: relative;
+	background: var(--theme-bg-main);
+	border: 0.125rem solid var(--theme-border-input);
+	border-radius: 1rem;
+	padding-block-start: 1rem;
+	padding-block-end: 2rem;
+	padding-inline: 2rem;
+	width: 40rem;
+	max-width: 90vw;
+}
+
+.popup h3 {
+	margin-block-start: 2rem;
+}
+
+.popup form :is(h1, h2, h3, h4, h5, h6):first-child {
+	margin-block-start: 0;
+}
+
+.popup a.close-popup {
+	position: absolute;
+	top: 1rem;
+	right: 2rem;
+	font-size: 1rem;
+}
+
+.popup form :is(input, select) {
+	margin-block-start: 0.35rem;
+	margin-block-end: 1rem;
+}
+
+.popup form .inline-list {
+	margin-block-start: 2rem;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== Forms and Inputs ===== */
+
+label {
+	display: block;
+	font-family: var(--font-open-sans);
+	font-size: 1rem;
+	margin-block-start: 1rem;
+}
+
+label:not(:first-of-type) {
+	margin-block-start: 2rem;
+}
+
+label.radio {
+	display: flex;
+	margin-block: 1rem;
+	justify-content: flex-start;
+}
+
+input,
+textarea {
+	display: block;
+	margin-block-start: 0.35rem;
+	margin-block-end: 1rem;
+	border: 0.125rem var(--theme-border-input) solid;
+	border-radius: 0.25rem;
+	color: var(--theme-text-body);
+	background-color: var(--theme-bg-input);
+	padding: 0.5rem;
+	font-family: var(--font-open-sans);
+	font-size: 1rem;
+	width: 20rem;
+}
+
+input[disabled],
+textarea[disabled] {
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+input[type='text']:invalid,
+input[type='password']:invalid,
+textarea:invalid {
+	border-color: var(--theme-border-input-invalid);
+}
+
+input[type='text'][readonly] {
+	color: var(--theme-text-light);
+	border-color: var(--theme-line);
+}
+
+input[type='checkbox'] {
+	width: 1rem;
+	height: 1rem;
+	padding: 0;
+}
+
+input[type='checkbox'] + label {
+	margin-inline-start: 0.5rem;
+	margin-inline-end: 2rem;
+}
+
+input[type='radio'] {
+	flex: 0 0 2rem;
+	margin: 0.2rem;
+}
+
+textarea {
+	line-height: 1.7rem;
+	font-family: var(--font-monospace);
+}
+
+::-webkit-input-placeholder {
+	color: var(--theme-text-light);
+}
+
+button {
+	padding: 0.5rem 1.5rem;
+	border-radius: 0.5rem;
+	font-size: 1rem;
+	margin-block-start: 1rem;
+	margin-inline-end: 1rem;
+	cursor: pointer;
+	user-select: none;
+	appearance: none;
+	color: var(--theme-text-button-primary);
+	background: var(--theme-bg-button-primary);
+	text-decoration: none;
+	font-size: 1rem;
+	font-family: var(--font-open-sans);
+	font-weight: 700;
+	line-height: 2rem;
+	display: flex;
+	align-items: center;
+}
+
+button.icon-only {
+	padding: 0.5rem;
+}
+
+button svg.icon {
+	--icon-size: 2rem;
+}
+
+button:not(.icon-only) svg.icon:first-child {
+	margin-inline-end: 0.5rem;
+}
+
+button:not(.icon-only) svg.icon:last-child {
+	margin-inline-start: 0.5rem;
+}
+
+button[data-style='secondary'] {
+	color: var(--theme-text-button-secondary);
+	background: var(--theme-bg-button-secondary);
+}
+
+button:not([disabled]):hover {
+	background: var(--theme-bg-button-primary-hover);
+}
+
+button[data-style='secondary']:not([disabled]):hover {
+	background: var(--theme-bg-button-secondary-hover);
+}
+
+button[disabled] {
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+select {
+	display: block;
+	margin-block-start: 0.35rem;
+	margin-block-end: 1rem;
+	border: 0.125rem var(--theme-border-input) solid;
+	border-radius: 0.25rem;
+	color: var(--theme-text-body);
+	background-color: var(--theme-bg-input);
+	padding: 0.5rem;
+	font-family: var(--font-open-sans);
+	font-size: 1rem;
+	width: 20rem;
+	cursor: pointer;
+}
+
+select[disabled] {
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+select option {
+	color: var(--theme-text-body);
+	background-color: var(--theme-bg-input);
+	padding: 0.5rem;
+	font-family: var(--font-open-sans);
+	font-size: 1rem;
+}
+
+:is(table, .table) :is(input, select) {
+	margin-block: 0;
+}
+
+p.error-box {
+	margin: 0;
+	padding: 0.5rem;
+	border-radius: 0.25rem;
+	color: var(--theme-text-error-box);
+	background: var(--theme-bg-error-box);
+	border: 0.1rem solid var(--theme-border-error-box);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ===== Rendered Blocks ===== */
+
+/* === General === */
+
+figure[data-lang] {
+	margin-block: 2rem;
+}
+
+figure[data-lang] svg {
+	display: block;
+	margin-inline: auto;
+}
+
+figure[data-size='small'] svg {
+	max-width: 40rem;
+	max-height: min(20rem, 50vw);
+}
+
+figure[data-size='medium'] svg {
+	max-width: 60rem;
+	max-height: min(40rem, 50vw);
+}
+
+figure[data-size='large'] svg {
+	max-height: min(60rem, 80vw);
+}
+
+/* figure[data-lang].big {
+	background: var(--theme-bg-main);
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1000;
+	display: flex;
+	border: 0.25rem var(--theme-line) solid;
+	margin: 3rem;
+}
+
+figure[data-lang].big svg {
+	max-width: none !important;
+	max-height: none !important;
+} */
+
+figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text {
+	fill: var(--theme-text-body);
+}
+
+figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text:not([font-family~='Courier']) {
+	font-family: var(--font-open-sans);
+}
+
+[data-lang='bash:samp'] samp {
+	display: block;
+	margin-block-start: 0.5rem;
+	padding-block-start: 0.5rem;
+	border-block-start: 0.1rem solid var(--theme-line);
+}
+
+/* === KaTeX === */
+
+.katex-display {
+	color: var(--theme-text-body);
+}
+
+.katex-display .katex {
+	font-size: 1.4rem;
+}
+
+/* using "body" here to add specificity, to override styles from katex.min.css */
+body .katex-display {
+	margin: 2rem;
+}
+
+body .katex-display > .katex {
+	text-align: left;
+}
+
+:not(.katex-display) > .katex {
+	font-size: inherit;
+	margin-inline: 0.5rem;
+}
+
+.katex span[style~='color:transparent;'] {
+	user-select: none;
+}
+
+/* === Pikchr */
+
+/* boxes */
+.rendered-pikchr svg path[style*='fill:none;'] {
+	fill: var(--theme-bg-light) !important;
+	transition: fill linear .5s;
+}
+
+/* lines and boxes */
+.rendered-pikchr svg path[style*='stroke:rgb(0,0,0);'] {
+	stroke: var(--theme-text-body) !important;
+}
+
+/* circles */
+.rendered-pikchr svg circle[style*='stroke:rgb(0,0,0);'] {
+	stroke: var(--theme-text-body) !important;
+}
+
+/* arrow heads */
+.rendered-pikchr svg polygon[style='fill:rgb(0,0,0)'] {
+	fill: var(--theme-text-body) !important;
+	transition: fill linear .5s;
+}
+
+/* === Bytefield === */
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-width='1'] {
+	stroke-width: 2;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='11'] {
+	font-size: 14px;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='18'] {
+	font-size: 16px;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Courier'] {
+	font-family: var(--font-monospace);
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Times'] {
+	font-family: var(--font-open-sans);
+}
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,1'] {
+	stroke-dasharray: 4px, 3px;
+}
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,3'] {
+	stroke-dasharray: 2px, 3px;
+}
+
+
+
+
+
+
+
+
+
+
+
+blockquote.external-embed .h-entry footer p {
+    font-size: 0.8rem;
+	margin-block: 1rem;
+}
+
+main > .h-entry header p {
+	margin-block: 0.6rem;
+}
+
+main > .h-entry header p.p-summary {
+	font-style: italic;
+	color: var(--theme-text-light);
+}
+
+main > .h-entry header p.event-time {
+	font-size: 0.8rem;
+	margin-block: 0.3rem;
+}
+
+main > .h-entry header p.publish-time {
+	font-size: 0.8rem;
+	margin-block: 0.3rem;
+}
+
+
diff --git a/www/colors.css b/www/colors.css
new file mode 100644
index 0000000..c37b92d
--- /dev/null
+++ b/www/colors.css
@@ -0,0 +1,338 @@
+
+:root {
+	color-scheme: light dark;
+}
+
+body {
+	--theme-sun: #ffb685;
+	--theme-moon: #85acff;
+	--theme-bg-main: #ffffff;
+	--theme-bg-light: #fafafb;
+	--theme-bg-heavy: #ebf0f5;
+	--theme-bg-popup-mask: rgba(255, 255, 255, 0.6);
+	--theme-line: #bbbbbb;
+	--theme-line-safe: #078e22;
+	--theme-line-warn: #cca01b;
+	--theme-line-danger: #d0501e;
+	--theme-text-heading: #333333;
+	--theme-text-body: #444444;
+	--theme-text-light: #777777;
+	--theme-text-safe: #078e22;
+	--theme-text-warn: #cca01b;
+	--theme-text-danger: #d0501e;
+	--theme-text-link: #5a81d8;
+	--theme-text-link-active: #5a81d8;
+	--theme-text-link-visited: #5a81d8;
+	--theme-bg-qrcode: #ffffff;
+	--theme-stroke-qrcode: #333333;
+	--theme-text-highlight: #444444;
+	--theme-bg-text-highlight: #d3ffd1;
+	--theme-text-selection: #ffffff;
+	--theme-bg-text-selection: #8006e0;
+	--theme-bg-button-primary: #f0f0f0;
+	--theme-bg-button-primary-hover: #dbe5fb;
+	--theme-text-button-primary: #444444;
+	--theme-bg-button-secondary: #efefef;
+	--theme-bg-button-secondary-hover: #efefef;
+	--theme-text-button-secondary: #444444;
+	--theme-bg-error-box: #ffe3e5;
+	--theme-border-error-box: #bf616a;
+	--theme-text-error-box: #444444;
+	--theme-bg-input: #ffffff;
+	--theme-border-input: #444444;
+	--theme-border-input-invalid: #bf616a;
+	--theme-icon-active-indicator: #777777;
+	--theme-icon-success-indicator: #4dbb70;
+	--theme-icon-failure-indicator: #bf616a;
+	--theme-icon-warning-indicator: #cab815;
+	--theme-accent-info: #c2eaf6;
+	--theme-accent-highlight: #c4f6c2;
+	--theme-accent-warning: #f6f5c2;
+	--theme-accent-problem: #f6c2c2;
+	--theme-chart-axis: #bbbbbb;
+	--theme-chart-text: #444444;
+	--theme-chart-guideline: #dddddd;
+	--theme-chart-data-0: #ffb685;
+	--theme-chart-data-1: #85acff;
+	--theme-chart-data-2: #4dbb70;
+	--theme-chart-data-3: #eb4f5e;
+	--theme-chart-data-4: #a278ef;
+	--theme-chart-data-5: #e298f0;
+	--theme-chart-data-6: #49d9d8;
+	--theme-chart-data-7: #cab815;
+	--theme-chart-data-8: #52e130;
+	--theme-chart-data-9: #ff13b4;
+	--theme-code-normal: #4f5b66;
+	--theme-code-shadow: transparent;
+	--theme-code-background: #eff1f5;
+	--theme-code-selection: #dfe1e8;
+	--theme-code-comment: #a7adba;
+	--theme-code-punc: #4f5b66;
+	--theme-code-operator: #4f5b66;
+	--theme-code-const-literal: #d08770;
+	--theme-code-number-literal: #d08770;
+	--theme-code-boolean-literal: #d08770;
+	--theme-code-tag: #bf616a;
+	--theme-code-string: #a3be8c;
+	--theme-code-keyword: #b48ead;
+	--theme-code-func-name: #8fa1b3;
+	--theme-code-class-name: #d08770;
+	--theme-code-regex-important: #96b5b4;
+	--theme-code-variable: #bf616a;
+	--theme-code-builtin: #96b5b4;
+	--theme-code-attr-name: #d08770;
+	--theme-code-gutter-divider: #eff1f5;
+	--theme-code-line-number: #4f5b66;
+	--theme-code-line-highlight: #a7adba30;
+}
+
+body[data-color-scheme='dark'] {
+	--theme-sun: #ffb685;
+	--theme-moon: #85acff;
+	--theme-bg-main: #343d46;
+	--theme-bg-light: #3f4a53;
+	--theme-bg-heavy: #495159;
+	--theme-bg-popup-mask: rgba(0, 0, 0, 0.6);
+	--theme-line: #777777;
+	--theme-line-safe: #b1ca97;
+	--theme-line-warn: #cec755;
+	--theme-line-danger: #ee8861;
+	--theme-text-heading: #ffffff;
+	--theme-text-body: #cccccc;
+	--theme-text-light: #a6a6a6;
+	--theme-text-safe: #b1ca97;
+	--theme-text-warn: #cec755;
+	--theme-text-danger: #ee8861;
+	--theme-text-link: #86a7f0;
+	--theme-text-link-active: #86a7f0;
+	--theme-text-link-visited: #86a7f0;
+	--theme-bg-qrcode: #343d46;
+	--theme-stroke-qrcode: #ffffff;
+	--theme-text-highlight: #ffffff;
+	--theme-bg-text-highlight: #3da069;
+	--theme-text-selection: #660bad;
+	--theme-bg-text-selection: #ebe9f0;
+	--theme-bg-button-primary: #465568;
+	--theme-bg-button-primary-hover: #465568;
+	--theme-text-button-primary: #bbbbbb;
+	--theme-bg-button-secondary: #495159;
+	--theme-bg-button-secondary-hover: #86a7f04c;
+	--theme-text-button-secondary: #bbbbbb;
+	--theme-bg-error-box: #704649;
+	--theme-border-error-box: #802730;
+	--theme-text-error-box: #cccccc;
+	--theme-bg-input: #3e444a;
+	--theme-border-input: #dddddd;
+	--theme-border-input-invalid: #f13547;
+	--theme-icon-active-indicator: #a6a6a6;
+	--theme-icon-success-indicator: #b3ffa1;
+	--theme-icon-failure-indicator: #f13547;
+	--theme-icon-warning-indicator: #cab815;
+	--theme-accent-info: #94e9e1;
+	--theme-accent-highlight: #85ef9b;
+	--theme-accent-warning: #e2ef85;
+	--theme-accent-problem: #ef9985;
+	--theme-chart-axis: #777777;
+	--theme-chart-text: #cccccc;
+	--theme-chart-guideline: #666666;
+	--theme-chart-data-0: #ffb685;
+	--theme-chart-data-1: #85acff;
+	--theme-chart-data-2: #4dbb70;
+	--theme-chart-data-3: #eb4f5e;
+	--theme-chart-data-4: #a278ef;
+	--theme-chart-data-5: #e298f0;
+	--theme-chart-data-6: #49d9d8;
+	--theme-chart-data-7: #cab815;
+	--theme-chart-data-8: #52e130;
+	--theme-chart-data-9: #ff13b4;
+	--theme-code-normal: #c0c5ce;
+	--theme-code-shadow: transparent;
+	--theme-code-background: #2b303b;
+	--theme-code-selection: #4f5b66;
+	--theme-code-comment: #65737e;
+	--theme-code-punc: #c0c5ce;
+	--theme-code-operator: #c0c5ce;
+	--theme-code-const-literal: #d08770;
+	--theme-code-number-literal: #d08770;
+	--theme-code-boolean-literal: #d08770;
+	--theme-code-tag: #bf616a;
+	--theme-code-string: #a3be8c;
+	--theme-code-keyword: #b48ead;
+	--theme-code-func-name: #8fa1b3;
+	--theme-code-class-name: #ebcb8b;
+	--theme-code-regex-important: #96b5b4;
+	--theme-code-variable: #bf616a;
+	--theme-code-builtin: #96b5b4;
+	--theme-code-attr-name: #d08770;
+	--theme-code-gutter-divider: #343d46;
+	--theme-code-line-number: #65737e;
+	--theme-code-line-highlight: #65737e30;
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		--theme-sun: #ffb685;
+		--theme-moon: #85acff;
+		--theme-bg-main: #343d46;
+		--theme-bg-light: #3f4a53;
+		--theme-bg-heavy: #495159;
+		--theme-bg-popup-mask: rgba(0, 0, 0, 0.6);
+		--theme-line: #777777;
+		--theme-line-safe: #b1ca97;
+		--theme-line-warn: #cec755;
+		--theme-line-danger: #ee8861;
+		--theme-text-heading: #ffffff;
+		--theme-text-body: #cccccc;
+		--theme-text-light: #a6a6a6;
+		--theme-text-safe: #b1ca97;
+		--theme-text-warn: #cec755;
+		--theme-text-danger: #ee8861;
+		--theme-text-link: #86a7f0;
+		--theme-text-link-active: #86a7f0;
+		--theme-text-link-visited: #86a7f0;
+		--theme-bg-qrcode: #343d46;
+		--theme-stroke-qrcode: #ffffff;
+		--theme-text-highlight: #ffffff;
+		--theme-bg-text-highlight: #3da069;
+		--theme-text-selection: #660bad;
+		--theme-bg-text-selection: #ebe9f0;
+		--theme-bg-button-primary: #465568;
+		--theme-bg-button-primary-hover: #465568;
+		--theme-text-button-primary: #bbbbbb;
+		--theme-bg-button-secondary: #495159;
+		--theme-bg-button-secondary-hover: #86a7f04c;
+		--theme-text-button-secondary: #bbbbbb;
+		--theme-bg-error-box: #704649;
+		--theme-border-error-box: #802730;
+		--theme-text-error-box: #cccccc;
+		--theme-bg-input: #3e444a;
+		--theme-border-input: #dddddd;
+		--theme-border-input-invalid: #f13547;
+		--theme-icon-active-indicator: #a6a6a6;
+		--theme-icon-success-indicator: #b3ffa1;
+		--theme-icon-failure-indicator: #f13547;
+		--theme-icon-warning-indicator: #cab815;
+		--theme-accent-info: #94e9e1;
+		--theme-accent-highlight: #85ef9b;
+		--theme-accent-warning: #e2ef85;
+		--theme-accent-problem: #ef9985;
+		--theme-chart-axis: #777777;
+		--theme-chart-text: #cccccc;
+		--theme-chart-guideline: #666666;
+		--theme-chart-data-0: #ffb685;
+		--theme-chart-data-1: #85acff;
+		--theme-chart-data-2: #4dbb70;
+		--theme-chart-data-3: #eb4f5e;
+		--theme-chart-data-4: #a278ef;
+		--theme-chart-data-5: #e298f0;
+		--theme-chart-data-6: #49d9d8;
+		--theme-chart-data-7: #cab815;
+		--theme-chart-data-8: #52e130;
+		--theme-chart-data-9: #ff13b4;
+		--theme-code-normal: #c0c5ce;
+		--theme-code-shadow: transparent;
+		--theme-code-background: #2b303b;
+		--theme-code-selection: #4f5b66;
+		--theme-code-comment: #65737e;
+		--theme-code-punc: #c0c5ce;
+		--theme-code-operator: #c0c5ce;
+		--theme-code-const-literal: #d08770;
+		--theme-code-number-literal: #d08770;
+		--theme-code-boolean-literal: #d08770;
+		--theme-code-tag: #bf616a;
+		--theme-code-string: #a3be8c;
+		--theme-code-keyword: #b48ead;
+		--theme-code-func-name: #8fa1b3;
+		--theme-code-class-name: #ebcb8b;
+		--theme-code-regex-important: #96b5b4;
+		--theme-code-variable: #bf616a;
+		--theme-code-builtin: #96b5b4;
+		--theme-code-attr-name: #d08770;
+		--theme-code-gutter-divider: #343d46;
+		--theme-code-line-number: #65737e;
+		--theme-code-line-highlight: #65737e30;
+	}
+
+	body[data-color-scheme='light'] {
+		--theme-sun: #ffb685;
+		--theme-moon: #85acff;
+		--theme-bg-main: #ffffff;
+		--theme-bg-light: #fafafb;
+		--theme-bg-heavy: #ebf0f5;
+		--theme-bg-popup-mask: rgba(255, 255, 255, 0.6);
+		--theme-line: #bbbbbb;
+		--theme-line-safe: #078e22;
+		--theme-line-warn: #cca01b;
+		--theme-line-danger: #d0501e;
+		--theme-text-heading: #333333;
+		--theme-text-body: #444444;
+		--theme-text-light: #777777;
+		--theme-text-safe: #078e22;
+		--theme-text-warn: #cca01b;
+		--theme-text-danger: #d0501e;
+		--theme-text-link: #5a81d8;
+		--theme-text-link-active: #5a81d8;
+		--theme-text-link-visited: #5a81d8;
+		--theme-bg-qrcode: #ffffff;
+		--theme-stroke-qrcode: #333333;
+		--theme-text-highlight: #444444;
+		--theme-bg-text-highlight: #d3ffd1;
+		--theme-text-selection: #ffffff;
+		--theme-bg-text-selection: #8006e0;
+		--theme-bg-button-primary: #f0f0f0;
+		--theme-bg-button-primary-hover: #dbe5fb;
+		--theme-text-button-primary: #444444;
+		--theme-bg-button-secondary: #efefef;
+		--theme-bg-button-secondary-hover: #efefef;
+		--theme-text-button-secondary: #444444;
+		--theme-bg-error-box: #ffe3e5;
+		--theme-border-error-box: #bf616a;
+		--theme-text-error-box: #444444;
+		--theme-bg-input: #ffffff;
+		--theme-border-input: #444444;
+		--theme-border-input-invalid: #bf616a;
+		--theme-icon-active-indicator: #777777;
+		--theme-icon-success-indicator: #4dbb70;
+		--theme-icon-failure-indicator: #bf616a;
+		--theme-icon-warning-indicator: #cab815;
+		--theme-accent-info: #c2eaf6;
+		--theme-accent-highlight: #c4f6c2;
+		--theme-accent-warning: #f6f5c2;
+		--theme-accent-problem: #f6c2c2;
+		--theme-chart-axis: #bbbbbb;
+		--theme-chart-text: #444444;
+		--theme-chart-guideline: #dddddd;
+		--theme-chart-data-0: #ffb685;
+		--theme-chart-data-1: #85acff;
+		--theme-chart-data-2: #4dbb70;
+		--theme-chart-data-3: #eb4f5e;
+		--theme-chart-data-4: #a278ef;
+		--theme-chart-data-5: #e298f0;
+		--theme-chart-data-6: #49d9d8;
+		--theme-chart-data-7: #cab815;
+		--theme-chart-data-8: #52e130;
+		--theme-chart-data-9: #ff13b4;
+		--theme-code-normal: #4f5b66;
+		--theme-code-shadow: transparent;
+		--theme-code-background: #eff1f5;
+		--theme-code-selection: #dfe1e8;
+		--theme-code-comment: #a7adba;
+		--theme-code-punc: #4f5b66;
+		--theme-code-operator: #4f5b66;
+		--theme-code-const-literal: #d08770;
+		--theme-code-number-literal: #d08770;
+		--theme-code-boolean-literal: #d08770;
+		--theme-code-tag: #bf616a;
+		--theme-code-string: #a3be8c;
+		--theme-code-keyword: #b48ead;
+		--theme-code-func-name: #8fa1b3;
+		--theme-code-class-name: #d08770;
+		--theme-code-regex-important: #96b5b4;
+		--theme-code-variable: #bf616a;
+		--theme-code-builtin: #96b5b4;
+		--theme-code-attr-name: #d08770;
+		--theme-code-gutter-divider: #eff1f5;
+		--theme-code-line-number: #4f5b66;
+		--theme-code-line-highlight: #a7adba30;
+	}
+}
diff --git a/www/index.html b/www/index.html
new file mode 100644
index 0000000..4050fce
--- /dev/null
+++ b/www/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Hello, World</title>
+	<link rel="stylesheet" href="colors.css">
+	<link rel="stylesheet" href="base.css">
+</head>
+<body>
+
+	<h2 id="hello-world">
+		Hello, World!
+		<a href="#hello-world" class="heading-anchor">
+			<svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentcolor" fill="none" viewBox="0 0 24 24" style="width: var(--icon-size, 1rem); height: var(--icon-size, 1rem)" aria-hidden="true" class="icon link" xmlns="http://www.w3.org/2000/svg"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+			<span style="display: none">Section titled Hello, World!</span>
+		</a>
+	</h2>
+	<p>Its currently Sat, 06 May 2023 19:55:06 -0700</p>
+</body>
+</html>
\ No newline at end of file