@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Fredoka:wght@300..700&family=Quintessential&display=swap');

:root { --bg1:#0b1220; --bg2:#03060d; }

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  background: radial-gradient(ellipse at 50% -20%, var(--bg1) 0%, var(--bg2) 70%);
  color: #fff;
  font-family: "Quintessential", "Cormorant", serif;
  overflow: hidden;
}

.container {
  height: 100dvh;
  width: 100vw;
  max-width: none;
  padding: 0 2vw;
  box-sizing: border-box;

  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 0.25rem;
}

h1 {
  margin: 0.3rem 0 0.1rem;
  font-size: 1.4rem;
  font-family: "Quintessential", serif;
  font-weight: 400;
  letter-spacing: .3px;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,255,255,.18);
}

.container > p {
  margin: 0 0 .1rem;
  font-size: 0.85rem;
  font-family: "Cormorant", serif;
  color: #e6ebff;
  opacity: .9;
}

#viz {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  border-radius: 14px;
  background: radial-gradient(circle at center, #0b1220 0%, #070b16 65%, #03060d 100%);
  box-shadow: 0 0 60px rgba(0,0,0,.45) inset, 0 10px 40px rgba(0,0,0,.35);
}

@keyframes twinkle { 0%,100%{opacity:.25} 50%{opacity:.85} }
.star { fill:#fff; opacity:.6; animation: twinkle 4s ease-in-out infinite; }

.ring { stroke: rgba(255,255,255,.12); fill: none; }
.ringLabel { fill: #cfd6ff; font-size: 10px; text-anchor: middle; opacity: .9; }

.lang { fill: #e2e6ff; font-size: 11px; text-shadow: 0 0 6px rgba(255,255,255,.25); }

.legend text { fill: #dfe4ff; font-size: 12px; }
.legend-title { fill: #f2f4ff; font-weight: 600; }

.node {
  stroke-width: .6px;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.25));
}

@media (max-width: 640px) {
  h1 { font-size: 1.35rem; margin: 0.3rem 0 0.1rem; }
  .container > p { font-size: .85rem; margin: 0 0 .1rem; }
  .container { gap: 0.2rem; }
}