:root {
	color-scheme: light dark;

	--bg: #f4f6f8;
	--panel: #ffffff;
	--text: #1b1f23;
	--muted: #5a636b;
	--line: #dde2e7;
	--accent: #f6c067;
	--logo-1: #f6c067;
	--logo-2: #ffffff;
	--logo-stroke: #000000;
	--hover: #fdf1d9;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1c2227;
		--panel: #2b3238;
		--text: #e4e8eb;
		--muted: #9aa4ac;
		--line: #3b434a;
		--logo-stroke: #14171a;
		--hover: #45433a;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	min-width: 320px;
}

main {
	max-width: 44rem;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--line);
}

.logo {
	width: 100%;
	max-width: 16rem;
	height: auto;
}

.logo g {
	stroke: var(--logo-stroke);
	stroke-width: 0.5;
	stroke-linecap: round;
}

.logo .part-1 {
	fill: var(--logo-1);
}

.logo .part-2 {
	fill: var(--logo-2);
}

h1 {
	margin: 0;
	font-size: 2.4rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--logo-1);
	-webkit-text-stroke: 1px var(--logo-stroke);
}

@supports not (-webkit-text-stroke: 1px black) {
	h1 {
		color: var(--logo-stroke);
	}
}

h2 {
	margin: 2.5rem 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted);
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

li a {
	display: block;
	padding: 0.75rem 1rem;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	color: var(--text);
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}

li a:hover,
li a:focus-visible {
	background: var(--hover);
	border-color: var(--accent);
	transform: translateX(3px);
}

footer {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-size: 0.85rem;
	color: var(--muted);
	text-align: center;
}

.wt-loader {
	border: 1px solid #000;
	--wt-light-fg: #333;
	--wt-light-bg: #efe;
	--wt-dark-fg: #ccc;
	--wt-dark-bg: #121;
}

form {
	display: grid;
	gap: 0.75rem;
	width: 100%;
}

label {
	font-weight: 600;
}

input,
button {
	font: inherit;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: 0.25rem;
}

input {
	width: 100%;
}

button {
	justify-self: center;
	width: 256px;
	max-width: 100%;
	background: var(--accent);
	color: #1b1f23;
	cursor: pointer;
}