/* CrossOver site. Shared by / and /activate/. No build step. */

:root {
	--bg: #fbfbfa;
	--surface: #f1f1ef;
	--raised: #ffffff;
	--text: #121316;
	--muted: #5c5f66;
	--line: #e3e3df;
	--line-strong: #cfcfca;
	--ink: #121316;
	--ink-text: #ffffff;
	--ink-hover: #2c2e33;
	--accent: #d9304f;
	--focus: #d9304f;
	--shadow: 0 1px 2px rgb(18 19 22 / 0.06), 0 12px 32px -12px rgb(18 19 22 / 0.18);
	--radius: 14px;
	--radius-sm: 9px;
	--gutter: 16px;
	--max: 1120px;
	--font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0c0d0f;
		--surface: #141518;
		--raised: #1a1b1f;
		--text: #ededee;
		--muted: #9b9ea6;
		--line: #24262b;
		--line-strong: #33363c;
		--ink: #f2f2f3;
		--ink-text: #0c0d0f;
		--ink-hover: #d9dadd;
		--accent: #ff6680;
		--focus: #ff6680;
		--shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -16px rgb(0 0 0 / 0.7);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #0c0d0f;
	--surface: #141518;
	--raised: #1a1b1f;
	--text: #ededee;
	--muted: #9b9ea6;
	--line: #24262b;
	--line-strong: #33363c;
	--ink: #f2f2f3;
	--ink-text: #0c0d0f;
	--ink-hover: #d9dadd;
	--accent: #ff6680;
	--focus: #ff6680;
	--shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -16px rgb(0 0 0 / 0.7);
	color-scheme: dark;
}

@media (min-width: 640px) {
	:root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 72px;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 1.0625rem/1.6 var(--font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

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

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
	min-height: 44px; padding: 0.6em 1.15em;
	border-radius: 999px; border: 1px solid transparent;
	font: 600 0.9375rem/1.2 var(--font); letter-spacing: -0.005em;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn-primary { background: var(--ink); color: var(--ink-text); }
.btn-primary:hover { background: var(--ink-hover); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--text); }
.btn-lg { min-height: 52px; padding: 0.8em 1.5em; font-size: 1rem; }

kbd {
	display: inline-block; min-width: 1.7em; padding: 0.1em 0.4em;
	border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px;
	background: var(--raised); color: var(--text);
	font: 500 0.8125rem/1.5 var(--mono); text-align: center;
}

/* The game scene, used in the hero, the diagram and the activate page */

.scene {
	position: relative; overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	background: #8fa6b3;
	box-shadow: var(--shadow);
	isolation: isolate;
}
.scene > svg.scene-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-hud {
	position: absolute; right: 3.2%; bottom: 4.5%;
	color: rgb(255 255 255 / 0.85);
	font: 600 clamp(0.6875rem, 1.6vw, 1.0625rem)/1 var(--mono);
	letter-spacing: 0.02em; text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
	pointer-events: none;
}
.scene-hud span { opacity: 0.6; font-weight: 500; }
.reticle {
	position: absolute; left: 50%; top: 50%;
	width: var(--size, 9%); height: auto; aspect-ratio: 1;
	transform: translate(-50%, -50%);
	image-rendering: auto;
	pointer-events: none;
	filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.25));
}