:root {
	color-scheme: light dark;
}

body {
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	margin: 2rem;
	background: #f7f7f8;
	color: #111;
}

.container {
	max-width: 900px;
	margin: auto;
	background: white;
	padding: 1.5rem 2rem;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(20, 20, 30, 0.06);
}

h1 {
	margin-top: 0;
}

h2 {
	margin-top: 2rem;
	color: #1f2937;
}

pre {
	background: #0f1724;
	color: #e6eef8;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	overflow-x: auto;
}

code {
	background: #f3f4f6;
	padding: 0.15rem 0.35rem;
	border-radius: 3px;
	font-size: 0.9em;
	color: #1f2937;
}

pre code {
	background: transparent;
	padding: 0;
	color: #e6eef8;
}

a {
	color: #0366d6;
}

.note {
	font-size: 0.95rem;
	color: #374151;
}

footer {
	margin-top: 1.25rem;
	font-size: 0.9rem;
	color: #6b7280;
}

li {
	margin-top: 1rem;
}

ul {
	margin-top: 0.5rem;
}

ul li {
	margin-top: 0.5rem;
}

.logo-glua {
	display: block;
	max-width: 220px;
	margin-right: 1rem;
	height: auto;
}

.logo-aettua {
	display: block;
	max-width: 140px;
	height: auto;
}

.logos {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1.25rem;
}

.tutorial-video {
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 1rem 0 2rem 0;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}