/* Shared by every page on alpha.pioneers.dev, static or server-rendered: tokens, header, footer.
   Everything here is namespaced .site-* so it cannot collide with a page's own styles.
   The palette is taken from the compass artwork: teal-black night, gold instrument, teal glow. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap');
:root{--void:#050d10;--panel:#0a1b20;--line:#17363c;--text:#dfe9e6;--muted:#8fa7a6;--gold:#e0aa3e;--signal:#5fd9cc;--live:#4ade80;--stop:#ef4444;--ink:#061013;
  --sans:'Archivo',system-ui,sans-serif;--mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace}
body{background:var(--void)}
.site-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding:16px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);font:400 15px/1.2 var(--sans);font-stretch:100%}
.site-brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;font-stretch:125%;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.site-brand svg{width:28px;height:28px}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 24px;flex:1}
.site-nav a{color:var(--muted);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.site-nav a:hover{color:var(--text)}
.site-nav a[aria-current]{color:var(--text);border-bottom-color:var(--gold)}
.site-actions{display:flex;align-items:center;gap:12px}
.site-header a:focus-visible,.site-footer a:focus-visible{outline:1px solid var(--signal);outline-offset:4px}
.site-footer{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;margin-top:72px;padding:24px clamp(16px,4vw,48px) 36px;border-top:1px solid var(--line);font:400 14px/1.4 var(--sans);color:var(--muted)}
.site-footer span{flex:1;min-width:220px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--text)}