:root {
	color-scheme: light;
	--page-bg: #f5f5f5;
	--card-bg: #ffffff;
	--text-main: #1a1a1a;
	--accent: #3273dc;
	--accent-contrast: #ffffff;
	--muted-text: #4a4a4a;
	--button-bg: #e3ecff;
	--button-border: #b7cffe;
	--tag-bg: rgba(50, 115, 220, 0.12);
	--tag-border: rgba(50, 115, 220, 0.35);
	--tag-text: var(--accent);
}

html[data-theme="dark"] {
	color-scheme: dark;
	--page-bg: #121212;
	--card-bg: #1f1f1f;
	--text-main: #e2e2e2;
	--accent: #4da3ff;
	--accent-contrast: #071a2c;
	--muted-text: #b5b5b5;
	--button-bg: #c8dcff;
	--button-border: #98bcff;
	--tag-bg: rgba(77, 163, 255, 0.24);
	--tag-border: rgba(77, 163, 255, 0.55);
	--tag-text: #d9eaff;
}

body {
	background-color: var(--page-bg);
	color: var(--text-main);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.hero {
	background: linear-gradient(135deg, rgba(50, 115, 220, 0.12), rgba(10, 10, 10, 0.02));
}

html[data-theme="dark"] .hero {
	background: linear-gradient(135deg, rgba(77, 163, 255, 0.18), rgba(0, 0, 0, 0.55));
}

.hero.is-medium .hero-body {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

@media (max-width: 768px) {
	.hero.is-medium .hero-body {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

.hero .container {
	text-align: center;
}

.hero .title,
.hero .subtitle,
.hero .author-list a,
.hero .author-list p,
.hero .tag {
	color: var(--text-main);
}

.hero .subtitle {
	color: var(--muted-text);
}

.hero .tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0.85rem;
	background-color: var(--tag-bg);
	border: 1px solid var(--tag-border);
	color: var(--tag-text);
}

.hero .tag.is-light,
.hero .tag.is-link.is-light {
	background-color: var(--tag-bg);
	border-color: var(--tag-border);
	color: var(--tag-text);
}

.title {
	color: var(--text-main);
}

.subtitle {
	color: var(--muted-text);
}

.theme-toggle {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 10;
}

.theme-toggle .button {
	background-color: var(--card-bg);
	color: var(--text-main);
	border: 1px solid rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .theme-toggle .button {
	border-color: rgba(255, 255, 255, 0.1);
}

.author-list {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.author-names {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
}

.author-names a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

.author-names a:hover,
.author-names a:focus {
	text-decoration: underline;
}

.author-names a::after {
	content: ',';
	margin-left: 0.2rem;
	color: var(--muted-text);
}

.author-names a:last-of-type::after {
	content: '';
	margin: 0;
}

.hero .author-list .has-text-grey {
	color: var(--muted-text) !important;
}

.hero .buttons {
	justify-content: center;
}

.buttons .button {
	font-weight: 600;
	transition: transform 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background-color: var(--button-bg) !important;
	border-color: var(--button-border) !important;
	color: #000000 !important;
}

.buttons .button .icon {
	display: inline-flex;
}

.buttons .button .icon svg {
	width: 1em;
	height: 1em;
}

.buttons .button:hover {
	transform: translateY(-2px);
}

.box code {
	color: inherit;
}

.box {
	background-color: var(--card-bg);
	color: var(--text-main);
	border: 1px solid rgba(0, 0, 0, 0.08);
	transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] .box {
	border-color: rgba(255, 255, 255, 0.08);
}

pre {
	white-space: pre-wrap;
}

footer.footer {
	background-color: var(--card-bg);
	color: var(--muted-text);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] footer.footer {
	border-top-color: rgba(255, 255, 255, 0.06);
}