* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 

body { 
  font-family: "Consolas", "Monaco", "Courier New", monospace; 
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--color-dark-blue) 25%, #16213e 50%, #0f3460 75%, var(--bg-primary) 100%); 
  color: var(--text-primary); 
  min-height: 100vh; 
  line-height: 1.6; 
  position: relative; 
  overflow-x: hidden; 
}

@media (max-width: 768px) {
  body {
    overflow: hidden;
    height: 100vh;
    position: fixed;
    width: 100%;
  }
} 

body::before { 
  content: ""; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: radial-gradient(circle at 20% 30%, var(--glow-cyan) 0%, transparent 50%), radial-gradient(circle at 80% 70%, var(--glow-magenta) 0%, transparent 50%), radial-gradient(circle at 50% 10%, var(--glow-blue) 0%, transparent 40%), radial-gradient(circle at 10% 80%, var(--glow-purple) 0%, transparent 45%); 
  opacity: 0.05; 
  z-index: -1; 
  pointer-events: none; 
  animation: bg-shift 15s ease-in-out infinite; 
} 

.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 2rem; 
  position: relative; 
  z-index: 10; 
} 

::-webkit-scrollbar { 
  width: 12px; 
  height: 12px; 
} 

::-webkit-scrollbar-track { 
  background: var(--bg-secondary); 
  border-radius: 6px; 
} 

::-webkit-scrollbar-thumb { 
  background: linear-gradient(45deg, var(--accent-cyan), var(--accent-magenta)); 
  border-radius: 6px; 
  transition: background var(--transition-normal); 
} 

::-webkit-scrollbar-thumb:hover { 
  background: linear-gradient(45deg, var(--accent-magenta), var(--accent-cyan)); 
} 

/* Compression option visibility handled by JavaScript */ 

@keyframes bg-shift { 
  0%, 100% { transform: var(--scale-base); } 
  25% { transform: scale(1.01) rotate(0.1deg); } 
  50% { transform: scale(1.02) rotate(-0.1deg); } 
  75% { transform: scale(1.01) rotate(0.05deg); } 
}