:root {
  --bg:#0b1016; --panel:#0f161d; --panel2:#151e27; --line:#243240; --text:#e8eef4; --muted:#8a9bab; --dim:#5b6b7a;
  --accent:#3fd0ff; --you:#ff3b4a; --near:#ffb02e; --note:#22c55e; --patrol:#3b82f6; --migration:#f97316; --sanctuary:#ec4899;
  --sans:Inter, system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 var(--sans); }
a { color:var(--accent); }
nav { display:flex; align-items:center; gap:4px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:5; }
nav .brand { font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-right:12px; }
nav a { color:var(--text); text-decoration:none; font:600 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:8px 12px; border-radius:6px; }
nav a.on { color:var(--accent); background:var(--panel2); }
nav .right { margin-left:auto; font-size:12px; color:var(--muted); display:flex; gap:12px; align-items:center; }
.wrap { max-width:1180px; margin:0 auto; padding:16px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; }
.eyebrow { font:600 9px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin:22px 0 10px; }
.panel .eyebrow:first-child { margin-top:0; }
.card { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.card .k { font:600 9px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.chip { background:var(--panel); border:1px solid var(--line); padding:8px 14px 9px; min-width:110px; }
.chip:first-child { border-radius:8px 0 0 8px; } .chip:last-child { border-radius:0 8px 8px 0; }
.chip .k { font:600 9px var(--mono); letter-spacing:.12em; color:var(--dim); text-transform:uppercase; margin-bottom:5px; }
.chip .v { font:600 14px var(--mono); white-space:nowrap; }
.btn { background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 12px; font:600 10px var(--mono);
       letter-spacing:.12em; text-transform:uppercase; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); color:#001; border-color:var(--accent); }
.hint { color:var(--dim); font-size:12px; }
.mono { font-family:var(--mono); }
.sw { width:12px; height:12px; border-radius:50%; flex:none; display:inline-block; }
.gate { min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.gate h2 { font-size:20px; margin:0 0 8px; }
.foot { margin-top:18px; text-align:right; font:11px var(--mono); color:var(--dim); }
@media (max-width:480px) {
  nav { padding:8px 10px; gap:0; } nav .brand { display:none; } nav a { padding:8px 9px; white-space:nowrap; }
  nav .right { gap:8px; white-space:nowrap; }
}