:root {
  --bg-deep: #06060f;
  --bg-card: #0d0d1f;
  --bg-card-hover: #12122a;
  --cyan: #00f0ff;
  --magenta: #ff00aa;
  --purple: #b347ff;
  --green: #39ff7f;
  --yellow: #ffe14d;
  --gray: #6b7280;
  --text: #e2e8f0;
  --text-dim: #8892a4;
}

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

body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

.font-mono { font-family: 'Fira Code', monospace !important; }
.font-display { font-family: 'Outfit', sans-serif !important; }

/* Neon glow effects */
.glow-cyan { text-shadow: 0 0 10px rgba(0,240,255,0.5), 0 0 40px rgba(0,240,255,0.2); }
.glow-magenta { text-shadow: 0 0 10px rgba(255,0,170,0.5), 0 0 40px rgba(255,0,170,0.2); }
.glow-purple { text-shadow: 0 0 10px rgba(179,71,255,0.5), 0 0 40px rgba(179,71,255,0.2); }

.box-glow-cyan { box-shadow: 0 0 15px rgba(0,240,255,0.15), inset 0 0 15px rgba(0,240,255,0.05); }
.box-glow-magenta { box-shadow: 0 0 15px rgba(255,0,170,0.15), inset 0 0 15px rgba(255,0,170,0.05); }
.box-glow-purple { box-shadow: 0 0 15px rgba(179,71,255,0.15), inset 0 0 15px rgba(179,71,255,0.05); }

/* Animated title gradient */
@keyframes titleGlow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 20px rgba(0,240,255,0.3)); }
  33% { filter: brightness(1.1) drop-shadow(0 0 25px rgba(255,0,170,0.4)); }
  66% { filter: brightness(1.05) drop-shadow(0 0 22px rgba(179,71,255,0.35)); }
}

.title-glow { animation: titleGlow 4s ease-in-out infinite; }

/* Scanline overlay for retro feel */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.scanlines::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0,240,255,0.03);
  z-index: 9999;
  pointer-events: none;
  animation: scanline 8s linear infinite;
}

/* CDG Canvas pixel rendering */
.cdg-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Tab transitions */
.tab-content { animation: fadeSlideIn 0.3s ease-out; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hex byte styling */
.byte-cmd { background: rgba(0,240,255,0.15); color: var(--cyan); }
.byte-inst { background: rgba(255,0,170,0.15); color: var(--magenta); }
.byte-data { background: rgba(57,255,127,0.15); color: var(--green); }
.byte-parity { background: rgba(107,114,128,0.15); color: var(--gray); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a5a; }

/* Ticker animation */
@keyframes ticker {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}
.ticker-pulse { animation: ticker 1.5s ease-in-out infinite; }

/* Card hover */
.concept-card {
  transition: all 0.2s ease;
  border: 1px solid rgba(179,71,255,0.1);
}
.concept-card:hover {
  border-color: rgba(179,71,255,0.3);
  transform: translateY(-2px);
}

/* Color swatch */
.color-swatch {
  width: 24px; height: 24px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform 0.15s;
}
.color-swatch:hover { transform: scale(1.3); }

/* Button styles */
.btn-neon {
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}
.btn-neon::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.4s;
}
.btn-neon:hover::before { left: 100%; }

/* Grid pattern bg */
.grid-bg {
  background-image: 
    linear-gradient(rgba(179,71,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(179,71,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Reference panel */
.ref-panel {
  backdrop-filter: blur(10px);
  background: rgba(13,13,31,0.95);
}

/* Mobile */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}