:root {
	--acc: 102, 157, 138;
	--acc-strong: 76, 122, 106;
	--fg: 37, 52, 45;
	--muted: 96, 113, 105;
	--bg: 245, 249, 244;
	--bg-soft: 236, 243, 235;
	--card: 255, 255, 252;
	--bd: 211, 221, 213;
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	font: 15px/1.75 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	color: rgb(var(--fg));
	background:
		radial-gradient(circle at top left, rgba(var(--acc), .12), transparent 34%),
		linear-gradient(180deg, rgb(var(--bg)), rgb(var(--bg-soft)));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: rgb(var(--acc-strong));
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: .08em;
}

.wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: 20px 16px;
}

header.site-header {
	border-bottom: 1px solid rgba(var(--bd), .95);
	background: linear-gradient(180deg, rgba(var(--acc), .12), rgba(255, 255, 255, 0) 85%);
}

.brand {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
}

.brand .logo {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(var(--acc), 1), rgba(var(--acc-strong), .88));
	box-shadow: 0 6px 18px rgba(var(--acc-strong), .22);
	position: relative;
	overflow: hidden;
}

.brand .logo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, .35), transparent 60%);
}

.brand .title {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, rgb(var(--acc-strong)), rgb(var(--acc)));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.brand .sub {
	color: rgb(var(--muted));
	font-size: 12px;
	letter-spacing: 0.02em;
}

main {
	padding: 24px 0 8px;
}

.intro-card,
.godot-card,
.notes-card {
	background: rgba(var(--card), .94);
	border: 1px solid rgba(var(--bd), .95);
	border-radius: 22px;
	box-shadow:
		0 6px 16px rgba(49, 70, 58, .04),
		0 20px 48px rgba(49, 70, 58, .08);
}

.intro-card {
	padding: 28px 24px;
	margin-bottom: 18px;
}

.eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(var(--acc-strong));
}

.intro-card h1 {
	margin: 0;
	font-size: clamp(28px, 5vw, 42px);
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.lead {
	margin: 14px 0 0;
	max-width: 62ch;
	color: rgb(var(--muted));
}

.godot-card {
	padding: 16px;
}

.godot-wrap {
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	border-radius: 16px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(28, 36, 32, .04), rgba(28, 36, 32, .08)),
		rgb(var(--bg-soft));
	border: 1px solid rgba(var(--bd), .95);
}

.godot-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.help {
	text-align: center;
	color: rgb(var(--muted));
	font-size: 12px;
	margin: 10px 0 0;
}

.open-link {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid rgba(var(--bd), .95);
	text-decoration: none;
	margin-left: 6px;
	background: linear-gradient(180deg, rgba(var(--acc), .12), rgba(255, 255, 255, 0));
	color: rgb(var(--fg));
}

.notes-card {
	margin-top: 18px;
	padding: 22px 24px;
}

.notes-card h2 {
	margin: 0 0 12px;
	font-size: 18px;
}

.notes-card ul {
	margin: 0;
	padding-left: 20px;
	color: rgb(var(--muted));
}

.notes-card code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .95em;
}

.back-to-top {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: rgba(var(--card), .88);
	border: 1px solid rgba(var(--bd), .9);
	border-radius: 12px;
	text-decoration: none;
	color: rgb(var(--fg));
	font-size: 14px;
	font-weight: 600;
	backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px rgba(49, 70, 58, .1);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.back-to-top:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(49, 70, 58, .14);
	border-color: rgba(var(--acc-strong), .35);
}

.back-to-top .arrow {
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right: none;
	border-bottom: none;
	transform: rotate(-45deg);
}

footer.site-footer {
	font-size: 13px;
	color: rgb(var(--muted));
	max-width: 1040px;
	margin: 28px auto 40px;
	padding: 0 16px;
}

footer.site-footer .inner {
	background: rgba(var(--card), .85);
	border: 1px solid rgba(var(--bd), .95);
	border-radius: 18px;
	padding: 18px;
	box-shadow: 0 10px 28px rgba(49, 70, 58, .06);
}

footer.site-footer p {
	margin: 0;
}

footer.site-footer p + p {
	margin-top: 10px;
}

@media (max-width: 720px) {
	.back-to-top {
		top: auto;
		right: 12px;
		bottom: 12px;
	}

	.intro-card,
	.notes-card,
	.godot-card {
		border-radius: 18px;
	}

	.intro-card {
		padding: 22px 18px;
	}

	.notes-card {
		padding: 18px;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: 228, 235, 229;
		--muted: 169, 181, 173;
		--bg: 24, 33, 29;
		--bg-soft: 29, 40, 35;
		--card: 33, 45, 39;
		--bd: 72, 90, 80;
	}

	body {
		background:
			radial-gradient(circle at top left, rgba(var(--acc), .18), transparent 30%),
			linear-gradient(180deg, rgb(var(--bg)), rgb(var(--bg-soft)));
	}

	.intro-card,
	.godot-card,
	.notes-card,
	footer.site-footer .inner {
		box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
	}

	.open-link {
		color: rgb(var(--fg));
	}
}