@font-face {
	font-family: "Geist";
	src: url("fonts/Geist-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Geist Mono";
	src: url("fonts/GeistMono-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

/* Monochrome only. Green is reserved for real state (supported). Radii: panels 16px, buttons 10px. */
:root {
	--bg: #08080a;
	--panel: #0e0e11;
	--line: rgba(255, 255, 255, 0.07);
	--line-2: rgba(255, 255, 255, 0.12);
	--dash: rgba(255, 255, 255, 0.15);
	--text: #ededef;
	--muted: #8b8b93;
	--dim: #5b5b63;
	--ok: #7ee2a8;
	--mono: "Geist Mono", ui-monospace, monospace;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--wrap: min(1120px, 100% - 48px);
	color-scheme: dark;
}

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

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

body {
	margin: 0;
	background: radial-gradient(70% 50% at 50% -8%, rgba(255, 255, 255, 0.07), transparent 70%) no-repeat, var(--bg);
	color: var(--text);
	font: 400 16px/1.6 "Geist", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Fixed film grain, never repaints on scroll. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Animated sky. Star layers are one tile taller than the viewport and move exactly one tile, so the loop is seamless.
   Meteors and glints are spawned at random by script.js. Transform and opacity only. */
.sky {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.sky i {
	position: absolute;
	display: block;
}

.glow {
	inset: -20%;
	background:
		radial-gradient(38% 32% at 30% 18%, rgba(255, 255, 255, 0.06), transparent 70%),
		radial-gradient(34% 30% at 76% 62%, rgba(255, 255, 255, 0.035), transparent 70%);
	animation: sway 26s ease-in-out infinite alternate;
}

.stars {
	top: 0;
	left: 0;
	right: 0;
	will-change: transform;
}

.far {
	height: calc(100% + 467px);
	background-image:
		radial-gradient(1.2px 1.2px at 37px 61px, rgba(255, 255, 255, 0.7), transparent),
		radial-gradient(1.2px 1.2px at 211px 143px, rgba(255, 255, 255, 0.55), transparent),
		radial-gradient(1.2px 1.2px at 129px 247px, rgba(255, 255, 255, 0.6), transparent),
		radial-gradient(1.2px 1.2px at 301px 29px, rgba(255, 255, 255, 0.5), transparent),
		radial-gradient(1.2px 1.2px at 83px 389px, rgba(255, 255, 255, 0.6), transparent),
		radial-gradient(1.2px 1.2px at 457px 311px, rgba(255, 255, 255, 0.5), transparent),
		radial-gradient(1.2px 1.2px at 389px 197px, rgba(255, 255, 255, 0.45), transparent),
		radial-gradient(1.2px 1.2px at 263px 421px, rgba(255, 255, 255, 0.55), transparent),
		radial-gradient(1.2px 1.2px at 491px 89px, rgba(255, 255, 255, 0.4), transparent);
	background-size: 523px 467px;
	animation: drift-far 150s linear infinite, twinkle 6s ease-in-out infinite alternate;
}

.near {
	height: calc(100% + 613px);
	background-image:
		radial-gradient(2px 2px at 97px 131px, #fff, transparent),
		radial-gradient(34px 34px at 97px 131px, rgba(255, 255, 255, 0.09), transparent),
		radial-gradient(2px 2px at 811px 419px, rgba(255, 255, 255, 0.9), transparent),
		radial-gradient(28px 28px at 811px 419px, rgba(255, 255, 255, 0.07), transparent),
		radial-gradient(1.5px 1.5px at 353px 67px, rgba(255, 255, 255, 0.75), transparent),
		radial-gradient(1.5px 1.5px at 623px 521px, rgba(255, 255, 255, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 1013px 263px, rgba(255, 255, 255, 0.65), transparent),
		radial-gradient(1.5px 1.5px at 457px 433px, rgba(255, 255, 255, 0.6), transparent),
		radial-gradient(1.5px 1.5px at 29px 331px, rgba(255, 255, 255, 0.6), transparent),
		radial-gradient(1.5px 1.5px at 1291px 97px, rgba(255, 255, 255, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 1453px 487px, rgba(255, 255, 255, 0.6), transparent);
	background-size: 1601px 613px;
	animation: drift-near 90s linear infinite, twinkle 9s ease-in-out -4s infinite alternate;
}

.meteor {
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.35) 25%, transparent);
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
	transform-origin: left center;
	opacity: 0;
}

.meteor.thin {
	height: 1px;
}

.glint {
	width: 3px;
	height: 3px;
	margin: -1.5px 0 0 -1.5px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.45);
	opacity: 0;
}

.glint::before,
.glint::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26px;
	height: 1px;
	margin: -0.5px 0 0 -13px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.glint::after {
	transform: rotate(90deg);
}

@keyframes sway {
	to { transform: translate3d(6%, 4%, 0) scale(1.08); }
}

@keyframes drift-far {
	to { transform: translate3d(0, -467px, 0); }
}

@keyframes drift-near {
	to { transform: translate3d(0, -613px, 0); }
}

@keyframes twinkle {
	from { opacity: 0.4; }
	to { opacity: 1; }
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

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

h1,
h2,
h3 {
	margin: 0;
	font-weight: 650;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

p {
	margin: 0;
}

svg.i {
	width: 1.1em;
	height: 1.1em;
	flex: none;
}

.mark {
	width: 18px;
	height: 18px;
	flex: none;
}

::selection {
	background: #ededef;
	color: #08080a;
}

:focus-visible {
	outline: 2px solid #ededef;
	outline-offset: 3px;
	border-radius: 6px;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 18px;
	border-radius: 10px;
	font-weight: 550;
	font-size: 15px;
	letter-spacing: -0.01em;
	white-space: nowrap;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}

.btn:active {
	transform: translateY(1px);
}

.btn.primary {
	padding-right: 10px;
	color: #0a0a0c;
	background: linear-gradient(180deg, #fafafa, #c8c8ce);
	box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.6), 0 10px 30px -12px rgba(255, 255, 255, 0.35);
}

.btn.primary:hover {
	background: linear-gradient(180deg, #fff, #d6d6db);
	box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.6), 0 12px 36px -10px rgba(255, 255, 255, 0.45);
}

.btn-ico {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.18);
	font-size: 13px;
	transition: transform 0.2s var(--ease);
}

.btn.primary:hover .btn-ico {
	transform: translate(1px, -1px);
}

.btn.ghost {
	border: 1px dashed var(--dash);
	color: var(--text);
}

.btn.ghost:hover {
	border-color: rgba(255, 255, 255, 0.32);
	background: rgba(255, 255, 255, 0.03);
}

.btn.small {
	height: 36px;
	padding: 0 14px;
	font-size: 14px;
}

/* Nav */
.sentinel {
	position: absolute;
	top: 0;
	width: 1px;
	height: 1px;
}

.nav {
	position: fixed;
	inset: 14px 0 auto;
	z-index: 10;
}

.nav-inner {
	width: var(--wrap);
	height: 60px;
	margin: 0 auto;
	padding: 0 12px 0 20px;
	display: flex;
	align-items: center;
	gap: 28px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: rgba(18, 18, 21, 0.55);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.nav.scrolled .nav-inner {
	background: rgba(18, 18, 21, 0.82);
	border-color: var(--line-2);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.02em;
}

.nav nav {
	display: flex;
	gap: 26px;
	margin-right: auto;
	padding-left: 26px;
	border-left: 1px solid var(--line);
	font-size: 14px;
	color: var(--muted);
}

.nav nav a {
	transition: color 0.2s var(--ease);
}

.nav nav a:hover {
	color: var(--text);
}

.nav-actions {
	display: flex;
	gap: 8px;
}

/* Shared */
.section {
	width: var(--wrap);
	margin: 0 auto;
	padding: 152px 0 0;
}

.head {
	margin-bottom: 56px;
	text-align: center;
}

h2 {
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.02;
	letter-spacing: -0.045em;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* Hero */
.hero {
	width: var(--wrap);
	margin: 0 auto;
	padding-top: 168px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.sig {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font: 500 13px/1 var(--mono);
	letter-spacing: 0.02em;
}

.live {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--ok);
}

.live::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ok);
	animation: ping 2.4s var(--ease) infinite;
}

.sep {
	width: 18px;
	border-top: 1px dashed var(--dim);
}

.sig-ok {
	color: var(--text);
}

.caret {
	width: 7px;
	height: 14px;
	margin-left: -4px;
	background: var(--text);
	animation: blink 1.1s steps(1) infinite;
}

@keyframes ping {
	70%, 100% {
		transform: scale(3);
		opacity: 0;
	}
}

@keyframes blink {
	50% { opacity: 0; }
}

h1 {
	margin-top: 30px;
	max-width: 11ch;
	font-size: clamp(48px, 8.4vw, 108px);
	font-weight: 700;
	line-height: 0.94;
	letter-spacing: -0.055em;
	background: linear-gradient(180deg, #fff 35%, #8e8e96);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: 0.06em;
}

.lead {
	margin-top: 26px;
	max-width: 40ch;
	color: var(--muted);
	font-size: 18px;
	text-wrap: balance;
}

.hero .actions {
	margin-top: 36px;
}

.hero-shot {
	position: relative;
	margin: 80px 0 0;
	width: min(1040px, 100%);
}

.hero-shot::before {
	content: "";
	position: absolute;
	inset: 6% 12% 30%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), transparent);
	filter: blur(40px);
}

.hero-shot img {
	width: 100%;
	filter: grayscale(1) contrast(1.08) brightness(0.92);
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
	mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}

.hero > * {
	animation: rise 0.9s var(--ease) both;
}

.hero > :nth-child(2) { animation-delay: 0.06s; }
.hero > :nth-child(3) { animation-delay: 0.12s; }
.hero > :nth-child(4) { animation-delay: 0.18s; }
.hero > :nth-child(5) { animation-delay: 0.28s; }

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

/* Pillars */
.pillars {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-rows: auto auto;
	gap: 14px;
}

.pillar {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 260px;
	padding: 28px;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: var(--panel);
	overflow: hidden;
}

.pillar h3 {
	position: relative;
	font-size: 26px;
	letter-spacing: -0.035em;
}

.pillar p {
	position: relative;
	margin-top: 8px;
	max-width: 38ch;
	color: var(--muted);
	font-size: 15.5px;
	text-wrap: pretty;
}

.p-see {
	grid-row: 1 / 3;
	padding: 10px 10px 30px;
}

.p-see h3,
.p-see p {
	margin-inline: 20px;
}

.pillar-media {
	flex: 1;
	min-height: 320px;
	margin-bottom: 26px;
	border-radius: 10px;
	overflow: hidden;
	background: #09090a;
}

.pillar-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-hit,
.p-out {
	border-style: dashed;
	border-color: var(--dash);
}

.scope {
	position: absolute;
	top: 28px;
	right: 28px;
	width: 120px;
	height: 120px;
}

.scope::before,
.scope::after {
	content: "";
	position: absolute;
	background: rgba(255, 255, 255, 0.55);
}

.scope::before {
	left: 50%;
	top: 38%;
	width: 1px;
	height: 24%;
}

.scope::after {
	top: 50%;
	left: 38%;
	width: 24%;
	height: 1px;
}

.scope i {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 1px dashed rgba(255, 255, 255, 0.28);
	animation: spin 24s linear infinite;
}

.scope i::after {
	content: "";
	position: absolute;
	inset: 18px;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.pillar .zero {
	position: absolute;
	top: -18px;
	right: 18px;
	margin: 0;
	font: 700 168px/1 var(--mono);
	letter-spacing: -0.08em;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Lua */
.lua {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: center;
}

.lua-copy > p {
	margin-top: 16px;
	max-width: 40ch;
	color: var(--muted);
	font-size: 17px;
	text-wrap: pretty;
}

.lua-facts {
	margin-top: 32px;
	padding: 0;
	list-style: none;
	border-top: 1px dashed var(--dash);
}

.lua-facts li {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px dashed var(--dash);
	font-size: 15px;
}

.lua-facts span {
	padding-top: 2px;
	color: var(--dim);
	font: 500 12.5px var(--mono);
}

.editor {
	margin: 0;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: var(--panel);
	overflow: hidden;
	box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

.editor-bar,
.editor-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px;
	font: 500 12.5px var(--mono);
	color: var(--dim);
}

.editor-bar {
	height: 44px;
	border-bottom: 1px solid var(--line);
}

.editor-tab {
	color: var(--text);
}

.editor-lang,
.editor-dim {
	margin-left: auto;
}

.editor pre {
	margin: 0;
	padding: 20px 0 20px 18px;
	overflow-x: auto;
	font: 13.5px/1.75 var(--mono);
	color: #b4b4bc;
}

.editor .k { color: #fff; font-weight: 600; }
.editor .f { color: #ededef; }
.editor .s { color: #7d7d86; }
.editor .n { color: #d0d0d6; }

.editor-foot {
	height: 40px;
	border-top: 1px dashed var(--dash);
}

.editor-foot .live {
	margin-right: 2px;
}

/* FAQ */
.faq {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 64px;
	align-items: start;
}

.faq-list {
	border-top: 1px dashed var(--dash);
}

.faq details {
	border-bottom: 1px dashed var(--dash);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	transition: color 0.2s var(--ease);
}

.faq summary:hover {
	color: #fff;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary svg {
	color: var(--dim);
	transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.faq details[open] summary svg {
	transform: rotate(45deg);
	color: var(--text);
}

.faq details p {
	padding: 0 48px 24px 0;
	color: var(--muted);
	font-size: 15px;
	max-width: 62ch;
}

/* Discord */
.discord {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 28px 28px 24px;
	border-radius: 16px;
	border: 1px dashed var(--dash);
	background: var(--panel);
}

.discord-mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 14px;
	border: 1px solid var(--line-2);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
	color: var(--text);
}

.discord-mark svg {
	width: 30px;
	height: 30px;
}

.discord-copy {
	margin-right: auto;
}

.discord h2 {
	font-size: clamp(26px, 3vw, 34px);
	letter-spacing: -0.04em;
}

.discord p {
	margin-top: 6px;
	color: var(--muted);
	font-size: 15.5px;
}

/* Final */
.final {
	padding-top: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.final h2 {
	font-size: clamp(56px, 10vw, 128px);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.06em;
	background: linear-gradient(180deg, #fff 30%, #6f6f78);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: 0.06em;
}

.final .actions {
	margin-top: 36px;
}

.note {
	margin-top: 20px;
	color: var(--dim);
	font-size: 13.5px;
}

/* Footer */
.footer {
	margin-top: 160px;
	border-top: 1px dashed var(--dash);
}

.footer-inner {
	width: var(--wrap);
	margin: 0 auto;
	padding: 28px 0 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	color: var(--dim);
	font-size: 13.5px;
}

.footer .brand {
	color: var(--text);
	font-size: 15px;
}

.footer-link {
	margin-right: auto;
	transition: color 0.2s var(--ease);
}

.footer-link:hover {
	color: var(--text);
}

/* Reveal */
.js .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js .reveal.in {
	opacity: 1;
	transform: none;
}

.pillars .pillar:nth-child(2) { transition-delay: 70ms; }
.pillars .pillar:nth-child(3) { transition-delay: 140ms; }

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

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

/* Tablet */
@media (max-width: 1020px) {
	.pillars {
		grid-template-columns: 1fr 1fr;
	}

	.p-see {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.faq,
	.lua {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* Phone */
@media (max-width: 720px) {
	:root {
		--wrap: min(1120px, 100% - 32px);
	}

	.nav {
		inset: 10px 0 auto;
	}

	.nav nav,
	.nav .btn.ghost {
		display: none;
	}

	.nav-inner {
		justify-content: space-between;
		padding-left: 16px;
	}

	.hero {
		padding-top: 128px;
	}

	.lead {
		font-size: 16.5px;
	}

	.hero-shot {
		margin-top: 56px;
	}

	.section {
		padding-top: 112px;
	}

	.pillars {
		grid-template-columns: 1fr;
	}

	.pillar-media {
		min-height: 220px;
	}

	.editor pre {
		font-size: 12px;
	}

	.discord {
		flex-wrap: wrap;
		padding: 22px;
	}

	.discord-copy {
		flex: 1 1 200px;
	}

	.discord .btn {
		width: 100%;
		justify-content: center;
	}

	.final {
		padding-top: 140px;
	}

	.final .actions,
	.final .btn {
		width: 100%;
		justify-content: center;
	}

	.footer {
		margin-top: 112px;
	}

	.footer-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}