:root {
	--bg: #0a0a0a;
	--surface: #1a1a1a;
	--text: #e6ffe6;
	--muted: #8a988a;
	--border: #3f433f;
	--primary: #13bd19;
	--on-primary: #080c0a;
	--focus: #13bd1966;
	--success: #22c55e;
	--warn: #fbbf24;
	--error: #ff4444;
}
html.cards main {
	view-transition-name: main;
}
html.cards::view-transition-old(main) {
	animation: 400ms ease scale-down both;
	mix-blend-mode: normal;
	z-index: 1;
}
html.cards::view-transition-new(main) {
	animation: 400ms cubic-bezier(0.2, 0, 0.2, 1) slide-up both;
	box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
	mix-blend-mode: normal;
	z-index: 2;
}
html.cards .back::view-transition-old(main) {
	animation: 400ms cubic-bezier(0.2, 0, 0.2, 1) slide-down both;
	box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
	z-index: 2;
}
html.cards .back::view-transition-new(main) {
	animation: 400ms ease scale-up both;
	z-index: 1;
}
html.loading body::before {
	content: '';
	position: fixed;
	inset: 0;
	background: #000;
	opacity: 0;
	animation: darkfade .15s ease forwards .1s;
	pointer-events: none;
	z-index: 9999;
}
html.waiting body::after {
	content: 'CONNECTING...';
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: monospace;
	font-size: 1.05rem;
	color: #79a7ff;
	background: #070b16;
	padding: .85rem 1.25rem;
	border: 1px solid #79a7ff55;
	min-width: 28ch;
	white-space: pre;
	animation: modem 2s steps(5) infinite;
	z-index: 10000;
}
html,
body
{
	min-height: 100dvh;
}
body {
	background: var(--bg);
	color: var(--text);
	font-family: sans-serif;
	margin: 0;
}
a {
	color: var(--primary);
}
a:hover {
	color: var(--focus);
}
.card {
	max-width: 820px;
	margin: auto;
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	color: var(--text);
}
.meta {
	opacity: .7;
	margin-bottom: 18px;
	color: var(--muted);
}
.grid {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.col {
	min-width: 220px;
}
h1 {
	margin: 0 0 12px 0;
}
h2 {
	margin: 14px 0 10px 0;
	font-size: 16px;
	opacity: .9;
}
@keyframes slide-up{
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes slide-down{
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(100%);
		opacity: 0;
	}
}
@keyframes scale-down{
	0% {
		transform: scale(1);
		filter: brightness(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.95);
		filter: brightness(0.7);
		opacity: 0;
	}
}
@keyframes scale-up{
	0% {
		transform: scale(0.95);
		filter: brightness(0.7);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		filter: brightness(1);
		opacity: 1;
	}
}
@keyframes darkfade{
	80% {
		opacity: 0;
	}
	100% {
		opacity: .8;
	}
}
@keyframes modem{
	0% {
		content: 'CONNECTING...';
	}
	25% {
		content: 'NEGOTIATING...';
	}
	50% {
		content: 'AUTHENTICATING...';
	}
	75% {
		content: 'ESTABLISHING LINK...';
	}
	100% {
		content: 'SYNCING...';
	}
}
@media (max-width: 600px){
	body {
		background: var(--surface);
	}
}