:root {
  /* Color System */
  --bg: #05010a;
  --panel: #0e0516;
  --text: #f1e9ff;
  --muted: #a390c4;
  --line: rgba(186, 150, 255, 0.08);
  --accent: #9d46ff;
  --accent-glow: rgba(157, 70, 255, 0.25);
  --success: #00ff9d;
  --warning: #ffb800;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.6);

  /* Typography */
  --mono: "JetBrains Mono", monospace;
  --sans: "Inter", sans-serif;
  --pixel: "Pixelify Sans", cursive;

  /* Layout */
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    height: 100vh;
    overflow: hidden; 
    font-family: var(--sans);
    color: var(--text);
    background-color: var(--bg);
    
    /* drifting background animation */
    background: 
        radial-gradient(1200px 900px at 15% 10%, rgba(100, 40, 200, 0.12), transparent 65%),
        radial-gradient(1000px 800px at 85% 20%, rgba(70, 20, 140, 0.12), transparent 60%),
        radial-gradient(1400px 1000px at 50% 100%, rgba(120, 50, 220, 0.08), transparent 70%),
        linear-gradient(180deg, #05010a 0%, #090212 40%, #030005 100%);
    background-size: 200% 200%;
    animation: bgDrift 20s ease infinite alternate;
    user-select: none;
}

/* grid overlay */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(180, 150, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 150, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: -1;
}

@keyframes bgDrift {
    0% { background-position: 0% 0%; }
    100% { background-position: 10% 10%; }
}