@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-latin-variable.woff2") format("woff2"); }
/* Signature navy. Supplied mark geometry and palette remain intact. */
:root { color-scheme: dark; background: #0d1b33; color: #f7faff; font-family: "Geist", Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100svh; background: radial-gradient(ellipse at 50% 43%, #11223d 0%, #0e1d36 34%, #0d1b33 70%); }
header { position: absolute; z-index: 1; top: 0; right: 0; padding: max(30px, env(safe-area-inset-top)) max(48px, env(safe-area-inset-right)) 0 24px; }
.sign-in { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 44px; padding: 0 4px; color: #bdc9dc; font-family: "Geist", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: .015em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; transition: color 180ms ease; }
.sign-in svg { opacity: .65; transition: transform 180ms ease, opacity 180ms ease; }
.sign-in:hover { color: #fff; }
.sign-in:hover svg { opacity: 1; transform: translate(1px, -1px); }
.sign-in:focus-visible { outline: 1px solid #afcbfa; outline-offset: 7px; border-radius: 1px; }
main { min-height: 100svh; display: grid; place-items: center; padding: 110px 28px 150px; }
.brand-mark { display: block; width: clamp(176px, 18.5vw, 257px); height: auto; overflow: visible; }
.outline { animation: outline-form 1350ms cubic-bezier(.2,.65,.2,1) 80ms both; transform-origin: 32px 32px; }
.connectors { animation: appear 1100ms ease 220ms both; }
.spoke { animation: settle 1320ms cubic-bezier(.16,.7,.2,1) var(--delay) both; }
.node { animation: settle 1100ms cubic-bezier(.16,.7,.2,1) var(--delay) both; }
@keyframes outline-form { from { opacity: 0; transform: scale(.965); } to { opacity: .8; transform: scale(1); } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { opacity: 0; transform: translate(var(--x), var(--y)); } to { opacity: 1; transform: translate(0,0); } }
@media (max-width: 600px) { header { padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 0 20px; } main { padding: 96px 24px 130px; } .brand-mark { width: clamp(155px, 43vw, 194px); } }
@media (max-height: 440px) { main { padding: 70px 24px 54px; } .brand-mark { width: 132px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }