/* Deliberate flow: workers converge on the gateway, then fan out to inference. */
:root { color-scheme: dark; font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; background: #0b0e12; color: #eef0f2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 72px 20px; font-size: 14px; isolation: isolate; }
.data-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, #102c432e, transparent 58%), #0b0e12; }
.data-field::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#49698609 1px, transparent 1px), linear-gradient(90deg, #49698609 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, black, transparent 78%); }
.data-field::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, #0b0e1299 100%); }
.data-field svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace { fill: none; stroke: #23425a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.packet { fill: none; stroke: #45acff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 28 972; vector-effect: non-scaling-stroke; animation: transfer 9s linear infinite; filter: drop-shadow(0 0 4px #018af180); }
.packet.slow { animation-duration: 13s; animation-delay: -7s; stroke: #2377b8; }
.packet.offset { animation-delay: -4.5s; }
.packet.late { animation-delay: -2s; animation-duration: 11s; }
.node { fill: #0c1520; stroke: #396380; stroke-width: 1; }
.node-core { fill: #55b6ff; opacity: .75; }
.flow-label { fill: #678198; font: 10px "Segoe UI", sans-serif; letter-spacing: 2.5px; }
@keyframes transfer { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.auth-card { position: relative; width: min(100%, 420px); padding: 32px; border: 1px solid #344352; border-radius: 12px; background: #14191ff5; box-shadow: 0 28px 90px #0008, 0 0 60px #018af10a, inset 0 1px #ffffff06; }
.auth-card::before { content: ""; position: absolute; height: 1px; top: -1px; left: 20%; right: 20%; background: linear-gradient(90deg, transparent, #55b6ff99, transparent); }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
header img { width: 136px; height: 30px; }
.badge { font-size: 9px; font-weight: 650; letter-spacing: .1em; padding: 4px 6px; border: 1px solid #303e4b; border-radius: 4px; color: #a4b3c2; background: #1c252e; }
.eyebrow { color: #55b6ff; font-size: 10px; letter-spacing: .14em; font-weight: 650; margin-bottom: 9px; }
h1 { font-size: 26px; font-weight: 650; letter-spacing: -.025em; margin: 0 0 8px; }
p { color: #a4a9b0; font-size: 13px; line-height: 1.6; margin: 0 0 24px; }
label { display: block; color: #bdc7d1; font-size: 12px; margin: 18px 0; }
input:not([type=hidden]) { display: block; width: 100%; margin-top: 8px; padding: 12px; background: #0e1319; color: #eef0f2; border: 1px solid #34404b; border-radius: 6px; font: inherit; transition: border-color 160ms; }
input:hover { border-color: #4f6375; }
:where(input, button, a):focus-visible { outline: 2px solid #55b6ff; outline-offset: 3px; }
button { width: 100%; min-height: 42px; background: #018af1; color: white; border: 1px solid #1599fc; border-radius: 6px; padding: 11px; margin-top: 8px; font: 600 13px "Segoe UI", sans-serif; cursor: pointer; transition: background 160ms, box-shadow 160ms; }
button:hover { background: #087bd0; box-shadow: 0 4px 20px #018af12b; }
.error { background: #3c1d21; border: 1px solid #65353b; color: #f4b6ba; padding: 11px; border-radius: 6px; font-size: 12px; line-height: 1.5; }
.help { margin: 20px 0 0; font-size: 11px; }
.auth-caption { position: fixed; bottom: 24px; left: 20px; right: 20px; text-align: center; color: #667c90; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; pointer-events: none; }
.auth-caption span { color: #376082; margin: 0 12px; }
@media (max-width: 600px) { .auth-card { padding: 26px; } .data-field svg { width: 200%; left: -50%; } .flow-label { display: none; } .packet { opacity: .55; } .auth-caption { font-size: 9px; letter-spacing: .1em; } }
@media (max-height: 650px) { body { padding-block: 28px 52px; } .auth-caption { position: absolute; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .packet { animation: none; stroke-dasharray: none; opacity: .15; filter: none; } input, button { transition: none; } }