:root {
	/* Light theme (default). Dark applies via system preference or the
	   manual data-theme override - keep the two dark blocks below in sync. */
	--bg: #f6f8fc;
	--panel: #ffffff;
	--text: #0f172a;
	--muted: #5b6b81;
	--accent: #2563eb;
	--accent-soft: rgba(37, 99, 235, 0.1);
	--border: rgba(15, 23, 42, 0.12);
	--glow: rgba(59, 130, 246, 0.12);
	--blob-opacity: 0.35;
	--blob-b-color: #38bdf8;
	--radius: 14px;
}

:root[data-theme="dark"] {
	--bg: #0b1220;
	--panel: #111a2e;
	--text: #e6edf7;
	--muted: #94a3b8;
	--accent: #3b82f6;
	--accent-soft: rgba(59, 130, 246, 0.14);
	--border: rgba(148, 163, 184, 0.18);
	--glow: rgba(59, 130, 246, 0.18);
	--blob-opacity: 0.22;
	--blob-b-color: #38bdf8;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0b1220;
		--panel: #111a2e;
		--text: #e6edf7;
		--muted: #94a3b8;
		--accent: #3b82f6;
		--accent-soft: rgba(59, 130, 246, 0.14);
		--border: rgba(148, 163, 184, 0.18);
		--glow: rgba(59, 130, 246, 0.18);
		--blob-opacity: 0.22;
		--blob-b-color: #38bdf8;
	}
}

#theme-toggle {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 10;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--panel);
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	transition: transform 120ms;
}

#theme-toggle:hover {
	transform: scale(1.08);
}

/* Show the icon for the mode you'd switch TO. */
#theme-toggle .icon-light {
	display: none;
}

:root[data-theme="dark"] #theme-toggle .icon-dark {
	display: none;
}

:root[data-theme="dark"] #theme-toggle .icon-light {
	display: inline;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #theme-toggle .icon-dark {
		display: none;
	}

	:root:not([data-theme="light"]) #theme-toggle .icon-light {
		display: inline;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: var(--accent-soft);
	padding: 0.1em 0.4em;
	border-radius: 6px;
}

.hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 104px 24px 72px;
	background:
		radial-gradient(60% 50% at 50% 0%, var(--glow), transparent 70%), var(--bg);
}

/* Faint grid texture, faded out towards the edges. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--border) 1px, transparent 1px),
		linear-gradient(90deg, var(--border) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(60% 55% at 50% 30%, black 0%, transparent 75%);
	opacity: 0.5;
	pointer-events: none;
}

.hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.blob {
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: var(--blob-opacity);
}

.blob-a {
	background: var(--accent);
	top: -180px;
	left: calc(50% - 460px);
	animation: drift 16s ease-in-out infinite alternate;
}

.blob-b {
	background: var(--blob-b-color);
	top: -220px;
	left: calc(50% + 60px);
	animation: drift 19s ease-in-out infinite alternate-reverse;
}

@keyframes drift {
	from {
		transform: translate(0, 0) scale(1);
	}

	to {
		transform: translate(60px, 40px) scale(1.15);
	}
}

.hero > * {
	position: relative;
}

.hero-icon {
	/* Block, not inline: the inline-block eyebrow pill would otherwise share
	   this line and push the icon off-center. */
	display: block;
	margin: 0 auto;
	filter: drop-shadow(0 16px 40px var(--glow));
	animation: bob 6s ease-in-out infinite;
}

@keyframes bob {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

.eyebrow {
	display: inline-block;
	margin: 20px 0 0;
	padding: 5px 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.hero h1 {
	font-size: clamp(3rem, 8vw, 4.25rem);
	margin: 12px 0 8px;
	letter-spacing: -0.03em;
	background: linear-gradient(105deg, var(--text) 40%, var(--accent) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.tagline {
	max-width: 560px;
	margin: 0 auto 28px;
	color: var(--muted);
	font-size: 1.125rem;
}

.cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.button {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 999px;
	border: 1px solid var(--border);
	color: var(--text);
	font-weight: 600;
	transition:
		transform 160ms,
		box-shadow 160ms,
		background-color 160ms;
}

.button:hover {
	text-decoration: none;
	transform: translateY(-2px);
	background: var(--panel);
}

.button.primary {
	background: linear-gradient(135deg, var(--accent), #60a5fa);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 24px var(--glow);
}

.button.primary:hover {
	background: linear-gradient(135deg, #2f6fe0, #7db4fb);
	box-shadow: 0 14px 36px var(--glow);
}

.platforms {
	margin-top: 20px;
	color: var(--muted);
	font-size: 0.875rem;
}

main {
	max-width: 980px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Fake macOS window chrome around the demo video. */
.window {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--panel);
	box-shadow: 0 24px 64px var(--glow);
	overflow: hidden;
}

.demo video {
	width: 100%;
	display: block;
	background: var(--panel);
}

section {
	margin: 72px 0;
}

h2 {
	text-align: center;
	font-size: 1.75rem;
	letter-spacing: -0.01em;
	margin-bottom: 36px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

/* Feature cards always come in pairs - fixed two columns on desktop. */
.features .grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
	.features .grid {
		grid-template-columns: 1fr;
	}
}

.grid article {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px 22px;
	transition:
		transform 180ms,
		box-shadow 180ms,
		border-color 180ms;
}

.grid article:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
	box-shadow: 0 14px 36px var(--glow);
}

.grid h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
}

.grid p {
	margin: 0;
	color: var(--muted);
	font-size: 0.9375rem;
}

.how ol {
	max-width: 560px;
	margin: 0 auto;
	font-size: 1.0625rem;
	color: var(--muted);
}

.how li {
	margin: 10px 0;
}

.how strong,
.grid strong {
	color: var(--text);
}

#dl-version {
	color: var(--accent);
}

#dl-recommended {
	text-align: center;
	margin-bottom: 28px;
}

#dl-recommended:empty {
	display: none;
}

.dl-detected {
	color: var(--muted);
	font-size: 0.8125rem;
	margin: 10px 0 0;
}

.dl-hint {
	color: var(--muted);
	font-size: 0.8125rem;
	margin: 0 0 10px;
}

.dl-fallback {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--muted);
}

.dl-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dl-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--border);
}

.dl-list li:last-child {
	border-bottom: none;
}

.dl-size {
	color: var(--muted);
	font-size: 0.8125rem;
	white-space: nowrap;
}

.roadmap-more {
	text-align: center;
	color: var(--muted);
	margin: 28px 0 0;
}

/* Scroll-reveal: elements start shifted + transparent only when JS is
   running (html.js) and the user hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html.js .reveal {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 500ms ease-out,
			transform 500ms ease-out;
	}

	html.js .reveal.revealed {
		opacity: 1;
		transform: none;
	}

	/* Cascade the feature cards instead of revealing the grid as one block. */
	html.js .grid article:nth-child(2n) {
		transition-delay: 80ms;
	}

	html.js .grid article:nth-child(3n) {
		transition-delay: 140ms;
	}
}

footer {
	text-align: center;
	padding: 40px 24px 48px;
	color: var(--muted);
	font-size: 0.875rem;
	border-top: 1px solid var(--border);
	margin-top: 72px;
}