:root {
  --ink: 220 40% 6%;
  --midnight: 220 30% 12%;
  --electric-cyan: 180 100% 50%;
  --bone: 210 20% 90%;
  --gray-400: 210 10% 60%;
  --gray-500: 210 10% 45%;
  --gray-700: 220 15% 25%;

  --font-sans: 'Cairo', sans-serif;
  --font-mono: 'Noto Sans Mono', monospace;
}

body {
  background-color: hsl(var(--ink));
  color: hsl(var(--bone));
  font-family: var(--font-sans);
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  z-index: 100;
}

#root {
    position: relative;
    isolation: isolate;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#root::after {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, hsla(var(--electric-cyan), 0.1), transparent 40%),
                radial-gradient(circle at 80% 20%, hsla(280, 100%, 50%, 0.1), transparent 30%);
    animation: background-pan 25s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes background-pan {
    0% { transform: translate(0, 0); }
    25% { transform: translate(10%, -10%); }
    50% { transform: translate(-10%, 10%); }
    75% { transform: translate(-5%, 5%); }
    100% { transform: translate(0, 0); }
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--gray-700));
  border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--gray-500));
}

.custom-scrollbar-h::-webkit-scrollbar {
  height: 8px;
}
.custom-scrollbar-h::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar-h::-webkit-scrollbar-thumb {
  background: hsl(var(--gray-700) / 0.7);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.custom-scrollbar-h::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--gray-500) / 0.7);
}

.prose {
    color: hsl(var(--bone) / 0.9);
    font-size: 1rem;
    line-height: 1.7;
}
.prose strong {
    color: hsl(var(--electric-cyan));
    font-weight: 600;
}
.prose p, .prose ul, .prose pre {
    margin: 0;
    padding: 0;
}
.prose ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.prose li {
    padding-right: 0.5rem;
}
.prose-invert strong {
  color: hsl(var(--electric-cyan));
}