style.css

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Space+Grotesk:wght@400;500;600&display=swap');

:root{
  --void: #10112a;
  --void-deep: #0a0b1e;
  --panel: #171933;
  --ring: #3a3d6e;
  --star: #f4f2ea;
  --dim: #9a9bc0;
  --accent: #e8b34c;
  --accent-soft: #7d76c9;
  --focus: #e8b34c;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(125,118,201,0.10), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(232,179,76,0.06), transparent 40%),
    var(--void-deep);
  color: var(--star);
  font-family: 'Space Grotesk', sans-serif;
  min-height:100vh;
}

a{ color: var(--accent); }

.topbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 3rem 1.5rem 1rem;
  text-align:center;
}
.wordmark{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-family:'Fraunces', serif;
  font-size: 2.1rem;
  font-weight:500;
  letter-spacing: -0.01em;
}
.wordmark b{ font-weight:600; color: var(--accent); }
.tagline{
  margin: 0.4rem 0 0;
  color: var(--dim);
  font-size: 0.95rem;
  font-style: italic;
  font-family:'Fraunces', serif;
}

main{ max-width: 960px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }

.lookup{
  background: var(--panel);
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.lookup-label{
  display:block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.5rem;
}
.lookup-row{ display:flex; gap: 0.6rem; }
#org-input{
  flex:1;
  background: var(--void);
  border: 1px solid var(--ring);
  color: var(--star);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}
#org-input:focus-visible, button:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
button{
  background: var(--accent);
  color: var(--void-deep);
  border: none;
  padding: 0.7rem 1.3rem;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
button:hover{ transform: translateY(-1px); background: #f2c469; }
button:disabled{ opacity: 0.5; cursor: progress; transform:none; }

.lookup-hint{
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--dim);
}
.lookup-hint.error{ color: #e58a8a; }

.sky-wrap{
  position: relative;
  background: radial-gradient(ellipse at center, rgba(58,61,110,0.18), transparent 70%);
  border-radius: 18px;
  min-height: 300px;
}
#sky{ width:100%; height:auto; display:block; }

.org-summary{
  position:absolute;
  top: 1rem; left: 1rem;
  font-size: 0.85rem;
  color: var(--dim);
}
.org-summary strong{ color: var(--star); }
.hidden{ display:none !important; }

.orbit-ring{ fill:none; stroke: var(--ring); stroke-width:1; }
.repo-node{ cursor:pointer; stroke: rgba(10,11,30,0.5); stroke-width:1; transition: opacity 0.2s; }
.repo-node:hover, .repo-node:focus-visible{ opacity: 0.75; outline: none; }
.repo-label{ font-size:9px; fill: var(--dim); font-family:'Space Grotesk', sans-serif; pointer-events:none; }
.center-node{ fill: var(--accent); }
.center-ring{ fill:none; stroke: var(--accent-soft); stroke-width: 1; stroke-dasharray: 2 3; }

@media (prefers-reduced-motion: no-preference){
  .spin-slow{ animation: spin 120s linear infinite; transform-origin: 450px 320px; }
  .spin-slower{ animation: spin 200s linear infinite reverse; transform-origin: 450px 320px; }
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.legend{
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--ring);
}
.legend h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}
.legend p{ color: var(--dim); font-size: 0.9rem; line-height:1.6; margin: 0 0 1rem; }
.legend-keys{ display:flex; flex-wrap:wrap; gap: 0.5rem 1.2rem; }
.legend-key{ display:flex; align-items:center; gap: 0.4rem; font-size: 0.82rem; color: var(--dim); }
.legend-swatch{ width:10px; height:10px; border-radius:50%; display:inline-block; }

.detail-panel{
  margin-top: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}
.detail-panel h3{
  margin: 0 0 0.35rem;
  font-family:'Fraunces', serif;
  font-weight: 600;
  font-size: 1.15rem;
}
.detail-panel a{ text-decoration: none; }
.detail-panel a:hover{ text-decoration: underline; }
.detail-panel p{ margin: 0.3rem 0; color: var(--dim); font-size: 0.9rem; }
.detail-meta{ display:flex; gap:1.2rem; margin-top:0.6rem; font-size:0.85rem; color: var(--star); }

.footer{
  text-align:center;
  padding: 2rem 1.5rem 3rem;
  color: var(--dim);
  font-size: 0.82rem;
}