* {
	box-sizing: border-box;
}

/* Subtle palette (icon-inspired) */
:root {
	--cream: #FBF2E2;
	--sand: #F2CEAA;
	--peach: #E09765;
	--amber: #F4833B;
	--orange: #D45D25;
	--bronze: #B45B27;

	--bg: #0b0c10;
	--text: rgba(255, 255, 255, .92);
	--muted: rgba(255, 255, 255, .68);
	--line: rgba(255, 255, 255, .12);
	--card: rgba(255, 255, 255, .06);
	--card2: rgba(255, 255, 255, .09);

	--radius: 18px;
	--shadow: 0 18px 60px rgba(0, 0, 0, .45);
	--shadow2: 0 10px 30px rgba(0, 0, 0, .35);

	--max: 1120px;
	--pad: clamp(18px, 4vw, 36px);
	--h1: clamp(38px, 5vw, 64px);
	--h2: clamp(22px, 2.3vw, 32px);
	--p: clamp(16px, 1.35vw, 18px);

	--sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #f6f7fb;
		--text: rgba(0, 0, 0, .88);
		--muted: rgba(0, 0, 0, .62);
		--line: rgba(0, 0, 0, .12);
		--card: rgba(0, 0, 0, .04);
		--card2: rgba(0, 0, 0, .06);
		--shadow: 0 18px 60px rgba(0, 0, 0, .14);
		--shadow2: 0 10px 30px rgba(0, 0, 0, .10);
	}
}

html,
body {
	/* height: 100%; */
}

body {
	margin: 0;
	font-family: var(--sans);
	color: var(--text);
	background:
		radial-gradient(1200px 600px at 12% 6%, color-mix(in srgb, var(--sand) 20%, transparent), transparent 60%),
		radial-gradient(900px 520px at 86% 10%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 60%),
		radial-gradient(900px 520px at 50% 95%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 65%),
		var(--bg);
	background-attachment: fixed;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	color: inherit;
	text-decoration: none;
}

header > div,
/* main, */
footer > div {
	/* max-width: var(--max); */
	margin: 0 auto;
	padding: 0 var(--pad);
}
/* header */

header {
	position: sticky;
	top: 0;
	margin-top: 1em;
	z-index: 10;
	transition: background .01s;
}
header.is-pinned {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--bg) 90%, transparent);
	transition: background .5s;
}
header > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-block: 1em;
}

header div > a:first-child {
	display: flex;
	align-items: center;
	gap: 1em;
	font-weight: 650;
	letter-spacing: .2px;
}

header div > a:first-child img {
	width: 28px;
	height: 28px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
	object-fit: cover;
}

header nav {
	display: flex;
	align-items: center;
	gap: 1em;
	color: var(--muted);
	font-size: 1em;
}

header nav a {
	padding: 8px 10px;
	border-radius: 10px;
}

header nav a:hover {
	background: var(--card);
	color: var(--text);
}
/* action */

.action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--text);
	font-weight: 600;
	font-size: 14px;
	box-shadow: var(--shadow2);
	cursor: pointer;
	user-select: none;
	transition: transform .12s ease, background .12s ease, border-color .12s ease;
	white-space: nowrap;
}

.action:hover {
	transform: translateY(-1px);
	background: var(--card2);
}

.action.primary {
	border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
	/* background:
		radial-gradient(260px 110px at 20% 0%, color-mix(in srgb, var(--sand) 35%, transparent), transparent 60%),
		radial-gradient(260px 140px at 80% 20%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 55%),
		color-mix(in srgb, var(--card2) 70%, transparent); */
}
/* .action.download {} */
/* footer */

footer {
	/* padding: 34px 0 44px; */
	padding-block: 1em;
	border-top: 1px solid var(--line);
	color: var(--muted);
}

footer > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-block: 1em;
}

footer nav {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--muted);
	font-size: 14px;
}

footer nav a {
	padding: 8px 10px;
	border-radius: 10px;
}

footer nav a:hover {
	background: var(--card);
	color: var(--text);
}

footer select {
	appearance: none;
	background: none;
	color: var(--text);
	padding: .5ch;
}