:root {
	--bg: #0f0f0f;
	--fg: #c9c9c9;
	--dim: #6f6f6f;
	--accent: #659ad2;
	--rule: #262626;
	--inset: #161616;
	--gutter: 30pt;
	--measure: 80ch;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none; }

html {
	color-scheme: dark;
}

body {
	margin: 0;
	padding: var(--gutter);
	background: var(--bg);
	color: var(--fg);
	font-family: 'Fira Code', ui-monospace, monospace;
	font-size: 15px;
	line-height: 1.6;
}

.site-header, .main, .site-footer {
	max-width: var(--measure);
	margin-inline: auto;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover, a:focus-visible {
	text-decoration: underline;
}

.site-header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2ch;
	justify-content: space-between;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--rule);
}

.brand {
	color: var(--fg);
}

.nav {
	display: flex;
	gap: 2ch;
}

h1, h2, h3, h4 {
	font-size: inherit;
	font-weight: 700;
	margin: 0;
}

h2 {
	color: var(--dim);
	letter-spacing: 0.1ch;
}

.main > section {
	margin-top: 2.5rem;
}

.intro h1 {
	color: var(--accent);
}

#cube {
	margin: 0;
	height: 60vh;
	max-height: 30rem;
	overflow: hidden;
	font-family: inherit;
	font-variant-ligatures: none;
	line-height: 2ch;
	color: var(--fg);
}

.demo-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 1ch;
	margin-top: 1rem;
}

.shapes {
	display: flex;
	flex-wrap: wrap;
	gap: 1ch;
}

.shape, .demo-toggle {
	font: inherit;
	padding: 0.1rem 1ch;
	background: transparent;
	color: var(--fg);
	border: 1px solid var(--rule);
	cursor: pointer;
}

.shape:hover, .demo-toggle:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.shape[aria-pressed="true"] {
	background: var(--fg);
	color: var(--bg);
	border-color: var(--fg);
}

.demo-toggle:disabled {
	color: var(--dim);
	cursor: default;
}

.demo-caption, .demo-error {
	margin: 0.75rem 0 0;
	color: var(--dim);
}

pre {
	margin: 0;
	padding: 0.5rem 1ch;
	overflow-x: auto;
	background: var(--inset);
	border: 1px solid var(--rule);
}

code {
	font: inherit;
}

.project-list, .links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.links {
	display: flex;
	gap: 2ch;
}

.project + .project {
	margin-top: 2rem;
}

.project-name {
	color: var(--accent);
}

.project-desc {
	margin: 0.25rem 0;
}

.want {
	padding: 0 1ch;
	border: 1px solid var(--rule);
}

.want:hover, .want:focus-visible {
	border-color: var(--accent);
	text-decoration: none;
}

.install {
	margin-top: 1.25rem;
	scroll-margin-top: var(--gutter);
}

.install-title {
	color: var(--dim);
}

.install-list {
	margin: 0.5rem 0 0;
}

.install-list dt {
	margin-top: 0.75rem;
	color: var(--dim);
}

.install-list dd {
	margin: 0.25rem 0 0;
}

.site-footer {
	margin-top: 3rem;
}

.site-footer .status {
	margin: 0;
	padding: 0.1rem 1ch;
	background: var(--inset);
	border: 1px solid var(--rule);
	color: #fff;
}

/*
.credit {
	margin: 0.75rem 0 0;
	color: var(--dim);
}

.logo {
	position: fixed;
	width: 4rem;
	height: auto;
	opacity: 0.85;
	pointer-events: none;
	animation: logo-spin 8s linear infinite;
}

.c-logo {
	right: var(--gutter);
	bottom: var(--gutter);
}

.gentoo-logo {
	left: var(--gutter);
	top: var(--gutter);
}

@keyframes logo-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.logo { animation: none; }
}

@media (max-width: 1000px) {
	.logo { display: none; }
}
*/