* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #2a2a5e #0a0a1a;
}

body {
  overflow-x: hidden;
}

.scanline-overlay {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 65, 0.015) 2px,
    rgba(0, 255, 65, 0.015) 4px
  );
}

.crt-flicker {
  animation: flicker 0.15s infinite alternate;
}

@keyframes flicker {
  0% { opacity: 0.97; }
  100% { opacity: 1; }
}

@keyframes scanmove {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.scan-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(180deg, transparent, rgba(0,255,65,0.15), transparent);
  animation: scanmove 4s linear infinite;
  pointer-events: none;
}

.hex-byte {
  display: inline-block;
  padding: 1px 3px;
  margin: 1px;
  font-size: 11px;
  border-radius: 2px;
  transition: all 0.15s;
}

.hex-byte:hover {
  transform: scale(1.2);
  z-index: 10;
}

.hex-start-code { background: rgba(0,255,65,0.2); color: #00ff41; }
.hex-header { background: rgba(255,176,0,0.2); color: #ffb000; }
.hex-data { background: rgba(79,195,247,0.1); color: #7ab8d4; }

.grid-cell {
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
}

.grid-cell:hover {
  transform: scale(1.08);
  z-index: 10;
}

.pipeline-tab {
  transition: all 0.2s ease;
  position: relative;
}

.pipeline-tab::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: transparent;
  transition: background 0.2s;
}

.pipeline-tab.active::after {
  background: #00ff41;
}

.zigzag-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawZigzag 3s ease-in-out infinite;
}

@keyframes drawZigzag {
  0% { stroke-dashoffset: 1000; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1000; }
}

.motion-arrow {
  animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.glow-green { text-shadow: 0 0 10px rgba(0,255,65,0.5); }
.glow-amber { text-shadow: 0 0 10px rgba(255,176,0,0.5); }

.vhs-bar {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #00ff41 0px,
    #00ff41 2px,
    transparent 2px,
    transparent 4px,
    #ffb000 4px,
    #ffb000 6px,
    transparent 6px,
    transparent 8px
  );
  animation: vhsScroll 2s linear infinite;
}

@keyframes vhsScroll {
  0% { background-position: 0 0; }
  100% { background-position: 80px 0; }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tooltip-glossary {
  position: relative;
  cursor: help;
  border-bottom: 1px dashed #ffb000;
}

.tooltip-glossary:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a3e;
  border: 1px solid #ffb000;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  z-index: 100;
  color: #e0e0e0;
  font-family: 'IBM Plex Sans', sans-serif;
}

@media (max-width: 768px) {
  .hex-byte { font-size: 9px; padding: 0 2px; }
}