/* Starfield + sovereign red/white theme */
:root{
  --red:#ff2b2b;
  --fg:#fff;
  --bg:#000;
  --muted:#cccccc;
  --border:rgba(255,255,255,.15);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background: #000 url('https://www.transparenttextures.com/patterns/stardust.png') repeat; color:var(--fg); font-family:"Orbitron",system-ui,Arial,sans-serif; line-height:1.6}
a{color:var(--fg); text-decoration:none}
a:hover{color:var(--red)}

.hero{padding:64px 20px 24px; text-align:center}
.hero h1{margin:0; font-size:40px; color:var(--red); text-shadow:0 0 10px rgba(255,43,43,.6)}
.hero h2{margin:10px 0 16px; letter-spacing:1px}
.nav a{margin:0 10px; font-weight:600}
.cta{margin-top:16px}

.button{display:inline-block; padding:10px 18px; border:1px solid var(--red); color:var(--fg); text-transform:uppercase; font-weight:700; letter-spacing:.5px; background:transparent; transition:.2s}
.button:hover{background:var(--red); color:#000}
.button-outline{border-color:var(--fg)}

.container{max-width:1000px; margin:0 auto; padding:0 20px 60px}
.center{text-align:center}
.lead{font-size:18px; margin:0 0 6px}
.sublead{color:var(--muted); margin:0 0 20px}

h3{color:var(--red); margin:40px 0 10px}
h4{margin:8px 0 6px; color:var(--fg)}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.card{border:1px solid var(--border); padding:14px; border-radius:8px; background:rgba(0,0,0,.4)}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:800px){.grid-2{grid-template-columns:1fr}}

.panel{border:1px solid var(--border); padding:14px; border-radius:8px; background:rgba(0,0,0,.4)}
.kv{margin:10px 0}
.kv label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px}
textarea#capsuleJson{width:100%; min-height:120px; background:#050505; color:var(--fg); border:1px solid var(--border); border-radius:6px; padding:8px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
input#capsuleHash{width:100%; background:#050505; color:var(--fg); border:1px solid var(--border); border-radius:6px; padding:8px}

.pre{background:#050505; border:1px solid var(--border); border-radius:6px; padding:10px; margin-top:10px; overflow:auto}

.signals{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-top:8px}
.signal{border:1px solid var(--border); border-radius:8px; padding:12px; text-align:center; background:rgba(0,0,0,.4)}
.signal .n{font-size:28px; font-weight:800; color:var(--red)}
.signal .t{font-size:12px; color:var(--muted)}

.note{color:var(--muted); font-size:12px; border-left:2px solid var(--border); padding-left:8px}

footer.footer{border-top:1px solid var(--border); text-align:center; padding:20px; font-size:12px; color:var(--muted)}
.mode{color:var(--muted)}
.muted{color:var(--muted); font-size:12px}