* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 3rem 1.5rem;
  min-height: 100vh;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #d8e2f3;
  background: radial-gradient(ellipse at top, #1b1035 0%, #0a0715 55%, #030308 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

body::before, body::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background-repeat: repeat;
  opacity: 0.8;
}
body::before {
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 120px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, #cdd8ff, transparent),
    radial-gradient(1px 1px at 230px 180px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 300px 40px, #fff, transparent),
    radial-gradient(1px 1px at 40px 200px, #cdd8ff, transparent);
  background-size: 320px 220px;
  animation: twinkle 4s ease-in-out infinite alternate;
}
body::after {
  background-image:
    radial-gradient(1px 1px at 60px 90px, #fff, transparent),
    radial-gradient(1px 1px at 180px 20px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 260px 150px, #cdd8ff, transparent),
    radial-gradient(1px 1px at 340px 100px, #fff, transparent);
  background-size: 400px 260px;
  animation: twinkle 6s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: rgba(15, 12, 35, 0.55);
  border: 1px solid rgba(130, 140, 255, 0.25);
  border-radius: 14px;
  padding: 2.5rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 40px rgba(90, 70, 220, 0.15), inset 0 0 60px rgba(80, 60, 180, 0.06);
}

h1, h2 {
  margin: 0 0 1.5rem 0;
  color: #f4f6ff;
  text-shadow: 0 0 12px rgba(140, 160, 255, 0.6), 0 0 30px rgba(90, 70, 220, 0.4);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
h1 { font-size: 2rem; }

/* CSS-drawn four-point star, no unicode needed */
h1::before {
  content: "";
  width: 14px;
  height: 14px;
  background: #8fa4ff;
  display: inline-block;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  box-shadow: 0 0 8px rgba(143, 164, 255, 0.9);
}

a {
  color: #9db4ff;
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}
a:hover {
  color: #d6e0ff;
  text-shadow: 0 0 8px rgba(157, 180, 255, 0.9);
}

.repolist, ul {
  list-style: none;
  padding: 0;
}
.repolist li, ul li {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(130, 140, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.repolist li:hover, ul li:hover {
  background: rgba(120, 110, 255, 0.08);
  border-color: rgba(157, 180, 255, 0.5);
  transform: translateX(3px);
}

/* small glowing dot instead of a comet emoji */
.repolist li::before, ul li::before {
  content: "";
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: #7d8fff;
  box-shadow: 0 0 6px rgba(125, 143, 255, 0.9);
}

pre { font-family: 'Cascadia Code', monospace; font-size: 0.9rem; }
table { border-collapse: collapse; width: 100%; }
td, th { padding: 0.4rem 0.7rem; }
tr:hover td { background: rgba(120, 110, 255, 0.06); }
hr { border-color: rgba(130, 140, 255, 0.2); }