@font-face {
	font-family: 'Pixelify Sans';
	src: url('PixelifySans.ttf') format('truetype');
	font-display: swap;
}

:root {
	--ink: #120d1c;
	--panel: #221c38;
	--line: #3a3158;
	--text: #f6e7c8;
	--muted: #b9aecb;
	--accent: #ffcc5c;
	--blue: #8fcdf5;
}

.page {
	margin: 0;
	background: var(--ink);
	color: var(--text);
	font: 17px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.content {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 16px 32px;
}

.content h1, .content h2, .content h3, .wordmark {
	font-family: 'Pixelify Sans', system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.15;
}

.content h1 {
	font-size: 2.6rem;
	margin: 0 0 12px;
}

.content h2 {
	font-size: 1.7rem;
	color: var(--accent);
	margin: 48px 0 12px;
}

.content h3 {
	font-size: 1.25rem;
	margin: 28px 0 8px;
}

.content p, .content li {
	color: var(--text);
}

.content a {
	color: var(--blue);
}

.content .lede {
	font-size: 1.15rem;
}

.content .muted {
	color: var(--muted);
}

.wordmark .sub {
	color: var(--blue);
}

.wordmark .merge {
	color: var(--text);
}

.content table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0;
}

.content th, .content td {
	text-align: left;
	vertical-align: top;
	padding: 8px 12px 8px 0;
	border-bottom: 1px solid var(--line);
}

.content th {
	color: var(--muted);
	font-weight: 600;
	white-space: nowrap;
}

kbd {
	font: 0.9em ui-monospace, monospace;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 1px 6px;
}

.layer {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 16px;
	margin: 16px 0;
}

.layer h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
}

.layer h3 img {
	width: 44px;
	height: 32px;
}

.pieces {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin: 12px 0 8px;
}

.content img {
	image-rendering: pixelated;
}

.layer .names {
	font-size: 0.9rem;
	color: var(--muted);
	margin: 0;
}

.site-footer {
	max-width: 760px;
	margin: 0 auto;
	padding: 24px 16px 40px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.9rem;
}

.site-footer a {
	color: var(--muted);
	margin-right: 16px;
}

.site-nav {
	max-width: 760px;
	margin: 0 auto;
	padding: 16px 16px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
}

.site-nav .wordmark {
	font-size: 1.5rem;
	text-decoration: none;
	margin-right: auto;
}

.site-nav a {
	color: var(--blue);
}

@media (max-width: 480px) {
	.site-nav .wordmark {
		flex-basis: 100%;
	}
}