/* The canvas, page and fallback share a true black background. */
:root { color-scheme: dark; background: #000000; color: #efefe6; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; min-height: 100%; background: #000000; }
body { min-height: 100svh; }
main { min-height: 100svh; display: grid; place-items: center; padding: 40px 24px 60px; }
.identity-stage { position: relative; width: min(100%, 1120px, calc((100svh - 100px) * 1.6)); aspect-ratio: 1024 / 640; }
.static-logo { position: absolute; inset: 0; width: 100%; height: 100%; }
hiddenmoss-field { position: fixed; inset: 0; width: 100%; height: 100%; }
hiddenmoss-field { display: none; background: #000000; }
.js hiddenmoss-field { display: block; }
.js .static-logo { visibility: hidden; }
.fallback hiddenmoss-field { display: none; }
.fallback .static-logo { visibility: visible; }
footer { position: fixed; inset: auto max(28px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
a, button { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: #a3a39e; font-size: 12px; line-height: 1.5; letter-spacing: .02em; text-decoration: none; }
button { font-family: inherit; border: 0; padding: 0; background: transparent; cursor: pointer; }
a:hover, button:hover { color: #efefe6; }
a:focus-visible, button:focus-visible { outline: 1px solid #efefe6; outline-offset: 6px; }
[hidden] { display: none !important; }
@media (max-width: 600px) { main { padding-inline: 4px; } footer { left: 20px; right: 20px; } }