:root { color-scheme: dark; }
html, body { height: 100%; margin: 0; }
body {
	background: #000;
	color: #e5e5e5;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
	display: grid;
	place-items: center;
}
.container { text-align: center; padding: 24px; }
img {
	max-width: min(90vw, 720px);
	height: auto;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
/* Smaller logo size */
img.logo { max-width: clamp(120px, 28vw, 260px); }

h1 { font-weight: 700; letter-spacing: .02em; margin: 16px 0 6px; }
p { margin: 0 0 16px; opacity: .8; }
.links a { color: #9ae6b4; text-decoration: none; margin: 0 8px; }
.links a:hover { text-decoration: underline; }
.status { margin-top: 12px; font-size: 14px; }
.status.ok { color: #9ae6b4; }
.status.err { color: #f56565; }
.metrics { margin-top: 10px; opacity: .9; font-size: 14px; }

/* Floating social icons */
.links.small { margin-top: 10px; font-size: 14px; opacity: .85; }
.links.small a { color: #a0aec0; }

/* Bottom-right credit */
.credit {
    position: fixed;
    right: 16px;
    bottom: 16px;
    font-size: 12px;
    color: #a0aec0;
    opacity: .9;
}

/* Footer */
.site-footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background: rgba(0,0,0,.6);
	backdrop-filter: blur(6px);
	border-top: 1px solid rgba(255,255,255,.08);
	padding: 10px 16px;
}
.footer-inner {
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
	font-size: 12px;
	color: #a0aec0;
}
.footer-inner a { color: #9ae6b4; text-decoration: none; }
.footer-inner a:hover { text-decoration: underline; }