* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #07141c; color: #e8f4f8; font-family: Inter, Arial, sans-serif; }
main { position: relative; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 62% 42%, #1d4c5f 0%, #0b212c 35%, #07141c 72%); }
header, footer { position: absolute; z-index: 2; left: 30px; right: 30px; display: flex; align-items: baseline; gap: 14px; pointer-events: none; }
header { top: 24px; }
header p, footer { margin: 0; color: #92b3c1; font: 11px "Courier New", monospace; letter-spacing: .1em; }
h1 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
#status { margin-left: auto; color: #e0a03d; font: 10px "Courier New", monospace; letter-spacing: .1em; }
footer { bottom: 23px; }
canvas { display: block; width: 100vw; height: 100vh; cursor: grab; touch-action: none; }
canvas:active { cursor: grabbing; }