/* Dark theme with juicy green accents */
:root {
	--bg: #0b0f12;
	--panel: #0f1519;
	--text: #e7f6ee;
	--muted: #a4b5ad;
	--brand: #2bff00; /* juicy green */
	--brand-2: #00cc6e;
	--shadow: 0 10px 30px rgba(0, 175, 93, 0.63);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: radial-gradient(1200px 800px at 70% 20%, rgba(0,255,136,0.06), transparent), var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	height: 100%;
}

body { display: grid; place-items: center; min-height: 100vh; }

.hidden { display: none; }

.logo { width: min(520px, 70vw); height: auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,0.5)); }
.main-logo { margin-bottom: 8px; }

#loader {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	gap: 18px;
	background: var(--bg);
	z-index: 9999;
}

#loader .bar {
	width: min(520px, 70vw);
	height: 10px;
	background: #0a0e11;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), var(--shadow);
	overflow: hidden;
}

#loader .bar-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--brand-2), var(--brand));
	box-shadow: 0 0 12px rgba(0,255,136,0.7);
}

.loader-text {
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.4px;
}

main#content {
	text-align: center;
	background: linear-gradient(180deg, rgba(0, 255, 136, 0.06), transparent 40%), var(--panel);
	border: 1px solid rgba(255,255,255,0.06);
	box-shadow: var(--shadow);
	padding: 28px 24px 34px;
	border-radius: 18px;
	max-width: min(760px, 92vw);
}

h1 {
	margin: 6px 0 6px 0;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	text-shadow: 0 3px 20px rgba(0,255,136,0.2);
}

p { margin: 0; }
.hint { margin-top: 5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}