:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { overflow: hidden; background: #050609; color: #edf1f5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.presence { position: relative; display: grid; min-height: 100svh; place-items: center; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 50% 48%, rgba(64, 190, 142, .10), transparent 20%), radial-gradient(ellipse at 50% 112%, rgba(58, 130, 214, .12), transparent 54%), #050609; }
.grid { position: absolute; inset: -35%; z-index: -3; opacity: .38; background-image: linear-gradient(rgba(99, 150, 198, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 150, 198, .11) 1px, transparent 1px); background-size: 42px 42px; transform: perspective(760px) rotateX(62deg) translateY(24%); animation: drift 15s linear infinite; }
.rings { position: absolute; width: min(1040px, 92vw); aspect-ratio: 1; border-radius: 50%; z-index: -2; opacity: .72; background: repeating-radial-gradient(circle, transparent 0 8.4%, rgba(98, 181, 225, .12) 8.5% 8.62%, transparent 8.75% 15.5%); mask-image: radial-gradient(circle, #000 0 48%, transparent 74%); animation: breathe 10s ease-in-out infinite; }
.neural { position: absolute; z-index: -1; width: min(830px, 88vw); height: min(420px, 48vw); border-top: 1px solid rgba(91, 216, 166, .34); transform-origin: center; filter: drop-shadow(0 0 12px rgba(86, 214, 166, .28)); opacity: .62; }
.neural::before, .neural::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #d9fff1; box-shadow: 0 0 18px rgba(96, 243, 183, .9); }
.neural::before { left: 0; top: -4px; } .neural::after { right: 0; top: -4px; }
.neural-a { transform: rotate(17deg); animation: signal-a 7.8s ease-in-out infinite; }
.neural-b { transform: rotate(-28deg) scale(.74); opacity: .36; animation: signal-b 9.2s ease-in-out infinite; }
.identity { text-align: center; padding: 40px 24px; }
.wordmark { display: block; width: min(350px, 70vw); margin: 0 auto 23px; filter: drop-shadow(0 0 26px rgba(255,255,255,.16)); }
.expansion { margin: 0; color: #91a0af; font-size: clamp(9px, 1vw, 12px); letter-spacing: .26em; }
.statement { margin: 52px 0 18px; color: #e7edf1; font-size: clamp(15px, 1.65vw, 23px); font-weight: 650; line-height: 1.55; letter-spacing: .1em; }
.line { color: #7e8d9c; font: 400 clamp(11px, 1vw, 14px)/1.7 ui-monospace, monospace; letter-spacing: .08em; }
.status { display: inline-block; margin-top: 42px; color: #52d092; font-size: 10px; letter-spacing: .2em; }
@keyframes drift { to { transform: perspective(760px) rotateX(62deg) translateY(30%); } }
@keyframes breathe { 0%,100% { opacity: .38; transform: scale(.96); } 50% { opacity: .82; transform: scale(1.04); } }
@keyframes signal-a { 0%,100% { opacity: .2; filter: brightness(.65); } 45% { opacity: .92; filter: brightness(1.45); } 62% { opacity: .35; } }
@keyframes signal-b { 0%,100% { opacity: .12; } 52% { opacity: .66; } }
@media (max-width: 560px) { .statement { margin-top: 42px; } .status { margin-top: 34px; } }