:root { color-scheme: dark; background: #070b11; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: radial-gradient(ellipse at 50% 50%, #101a25 0%, #090e16 42%, #06090e 82%); }
#network { position: fixed; inset: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
canvas:active { cursor: grabbing; }
canvas:focus-visible { outline: 1px solid #8df5dd55; outline-offset: -5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#fallback, .no-script { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; color: #d9fff5; font: 600 24px system-ui, sans-serif; letter-spacing: .24em; }
#fallback[hidden] { display: none; }
.teaser { position: fixed; z-index: 2; bottom: max(1.5rem, env(safe-area-inset-bottom)); left: 1.5rem; right: 1.5rem; margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 1rem; color: #a4b9bd; font: 400 .9375rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; text-shadow: 0 2px 14px #070b11; pointer-events: none; }
.teaser strong { color: #c5f8ea; font-size: .875rem; font-weight: 600; letter-spacing: .2em; }
@media (max-width: 520px) { .teaser { flex-direction: column; align-items: center; gap: .25rem; bottom: max(1.5rem, env(safe-area-inset-bottom)); } }