:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #000a00; color: #a0e0a0; font: 13px/1.4 ui-monospace, "Courier New", Courier, monospace; }
main { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; box-sizing: border-box; }
#radar { width: min(100vw - 16px, 100vh - 64px); height: auto; aspect-ratio: 1 / 1; border-radius: 50%; display: block; touch-action: none; }
#bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; opacity: .85; }
#bar button, #bar select { font: inherit; color: #c8ffc8; background: #05200a; border: 1px solid #1f6b2d; border-radius: 4px; padding: 3px 8px; cursor: pointer; }
#bar button:hover, #bar select:hover { background: #0a3312; }
#hint { color: #ffb347; }
#hint:empty { display: none; }
@media (display-mode: fullscreen), (max-height: 400px) { #bar { display: none; } #radar { width: min(100vw, 100vh); } }
#attrib { font-size: 11px; opacity: .6; }
#attrib:empty { display: none; }
#bar input[type=checkbox] { accent-color: #39ff14; vertical-align: -1px; }