:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f1f5f3; background: #101312; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 24px 56px; }
.brand { width: 144px; height: 144px; object-fit: contain; margin-bottom: 32px; animation: arrive 650ms ease both; }
.status { color: #73d6b9; text-transform: uppercase; font-size: 12px; font-weight: 650; margin: 0 0 18px; }
h1 { font-size: 64px; line-height: 1.1; font-weight: 650; margin: 0 0 24px; overflow-wrap: anywhere; }
h1 span { color: #73d6b9; }
.intro { font-size: 24px; margin: 0 0 16px; }
.detail { font-size: 17px; line-height: 1.65; color: #a5b2ac; margin: 0; }
footer { width: min(100%, 640px); margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 16px 24px 44px; text-align: center; }
figure { margin: 0; min-width: 0; }
figure img { display: block; width: 100%; max-width: 112px; height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 auto 12px; }
figcaption { font-size: 13px; color: #a5b2ac; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { main { padding-top: 48px; padding-bottom: 40px; } footer { gap: 12px; padding: 12px 20px 32px; } figcaption { font-size: 11px; } h1 { font-size: 40px; } .intro { font-size: 21px; } .brand { width: 112px; height: 112px; } }
@media (max-width: 350px) { h1 { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .brand { animation: none; } }