body {
	color: var(--layout-default-color);
	background: var(--layout-default-background);
}

aside {
	position: fixed;
	display: block;
	top: 0px;
	right: 0px;
	bottom: auto;
	left: 0px;
	margin: 0px;
	padding: 16px;
	width: 100%;
	height: 64px;
	background: var(--surface-default-foreground);
	box-sizing: border-box;
	z-index: 1024;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

main {
	position: fixed;
	top: 64px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	overflow: scroll;
	z-index: 0;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

#tholian,
#tholian a,
#tholian a:focus,
#tholian a:hover,
#tholian a img {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	border: none;
	vertical-align: top;
}

#tholian {
	margin-right: 16px;
}

#nomnom {
	position: fixed;
	display: block;
	width: auto;
	height: auto;
	margin: 0px;
	padding: 16px;
	top: auto;
	right: 0px;
	bottom: 0px;
	left: 0px;
	font-family: 'vera-mono';
	font-size: 16px;
	text-align: center;
	color: var(--layout-default-color);
	background: var(--layout-default-background);
}

aside ul {
	display: block;
	margin: 0px 128px 0px 0px;
	padding: 0px;
	list-style: none;
	text-align: left;
}

aside ul li {
	display: inline-block;
	margin: 0px 8px 0px 0px;
	padding: 0px;
}

aside ul li:last-child {
	margin-right: 0px;
}

aside ul li a {
	padding: 0px 4px;
	font-family: 'crystalline';
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
}

aside ul li a.active {
	color: var(--link-focus-color);
	border: 1px solid var(--link-focus-color);
	background: var(--link-focus-background);
	outline: none;
}

aside button[data-action="radar"] {
	display: inline-block;
	position: absolute;
	top: 16px;
	right: 16px;
	bottom: auto;
	left: auto;
	margin: 0px;
	padding: 0px 8px;
	color: var(--element-active-color);
}

aside button[data-action="radar"]:before {
	display: inline;
	margin: 0px 4px 0px 0px;
	content: '\e8e1';
	vertical-align: top;
	line-height: 32px;
}

aside button[data-action="radar"]:after {
	display: inline;
	content: 'Radar';
	vertical-align: top;
	line-height: 32px;
}

section > article {
	width: 544px;
	margin: 256px auto 256px auto;
	min-height: 288px;
}

section > article code {
	display: inline;
	margin: 0px;
	padding: 4px;
	font-family: 'vera-mono';
	color: var(--layout-default-color);
	background: var(--layout-default-background);
	white-space: nowrap;
	border-radius: 4px;
}

section > article q {
	display: inline;
	margin: 0px;
	padding: 4px;
	font-family: 'vera-mono';
	color: var(--layout-default-color);
	background: var(--layout-default-background);
	white-space: nowrap;
	border-radius: 4px;
}

section > article q:before {
	display: none;
	content: '';
}

section > article q:after {
	display: none;
	content: '';
}

section > article ul {
	display: block;
	margin: 16px;
	padding: 0px;
}

section > article ul:last-child {
	margin-bottom: 0px;
}

section > article ul li {
	list-style-type: square;
	line-height: 1.6em;
	vertical-align: middle;
}

section > article > figure {
	display: block;
	position: absolute;
	width: 512px;
	height: 256px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	user-select: none;
}

section > article > figure > svg {
	display: block;
	width: 512px;
	height: 256px;
	user-select: none;
}



@media screen and (max-width: 1184px) {

	section > article > figure {
		position: static;
		width: 512px;
		margin: 64px auto;
	}

}



@media screen and (max-width: 560px) {

	aside {
		overflow-x: auto;
		overflow-y: hidden;
	}

	aside button[data-action="radar"] {
		position: static;
		top: unset;
		right: unset;
		bottom: unset;
		left: unset;
		margin: 0px 16px;
		background: var(--surface-default-foreground);
		z-index: 1024;
	}

	aside button[data-action="radar"]:before {
		margin: 0px;
	}

	aside button[data-action="radar"]:after {
		display: none;
	}

	aside ul {
		width: fit-content;
		margin: 0px;
		white-space: nowrap;
	}

	section > article {
		width: auto;
	}

	section > article > figure {
		width: auto;
		height: auto;
	}

	section > article > figure > svg {
		width: auto !important;
		height: auto !important;
	}

}



@media screen and (max-height: 800px) {

	section > article {
		margin: 128px auto 128px auto;
	}

}