body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	background-color: #0f1115;
	color: #e6e6eb;
	line-height: 1.7;
	padding: 16px;
	font-size: 16px;
	max-width: 100%;
	overflow-x: hidden;
}

h1, h2 {
	color: #f2f2f7;
	line-height: 1.25;
}

h1 {
	font-size: 1.9rem;
	margin-bottom: 16px;
}

h2 {
	font-size: 1.4rem;
	margin-top: 32px;
	margin-bottom: 8px;
	color: #9aa4ff;
}

p {
	margin: 10px 0;
	color: #d2d5dc;
}

pre {
	background-color: #161821;
	color: #eaeaf0;
	padding: 14px;
	border-radius: 10px;
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.5;
}

code {
	background-color: #1f2230;
	padding: 4px 6px;
	border-radius: 6px;
	color: #ff7a90;
	font-size: 0.95em;
}

a {
	color: #7aa2ff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.note,
.highlight {
	font-size: 0.95rem;
	padding: 14px;
	border-radius: 10px;
	margin: 20px 0;
}

.note {
	background-color: #2a2418;
	border-left: 4px solid #f0c36a;
	color: #f5e6c8;
}

.highlight {
	background-color: #1e2b23;
	border-left: 4px solid #6bdc8b;
	color: #d9f5e3;
}

.code-section {
	margin: 16px 0;
}

@media (min-width: 768px) {
	body {
		max-width: 820px;
		margin: 0 auto;
		padding: 32px;
		font-size: 18px;
	}

	h1 {
		font-size: 2.6rem;
	}

	h2 {
		font-size: 2rem;
	}
}