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

body {
  background: #0B0B0C;
  min-height: 100vh;
}

.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

.ambient-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #1A1A1E 0%, #0B0B0C 70%);
  pointer-events: none;
  z-index: 0;
}

.coordinate-prefix::before {
  content: '▍';
  margin-right: 4px;
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes inkjetPrint {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0% 0); }
}

@keyframes flickerCyan {
  0% { color: #00E5FF; }
  20% { color: #FF007F; }
  50% { color: #F0EAD6; }
  80% { color: #FF007F; }
  100% { color: #00E5FF; }
}

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 229, 255, 0.2); }
  50% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.5); }
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-flicker {
  animation: flickerCyan 0.35s ease-in-out;
}

.animate-inkjet {
  animation: inkjetPrint 1.2s ease-out forwards;
}

.ink-bleed {
  box-shadow: 1px 0 0 rgba(0, 229, 255, 0.3), -1px 0 0 rgba(255, 0, 127, 0.3);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ink-bleed:hover {
  box-shadow: 2px 1px 0 rgba(0, 229, 255, 0.5), -2px -1px 0 rgba(255, 0, 127, 0.5);
  transform: translateY(-4px);
}

.search-glow:focus {
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.3);
  border-color: #00E5FF;
}

.ghost-btn {
  background: transparent;
  border: 1px solid rgba(209, 209, 209, 0.2);
  color: #D1D1D1;
  padding: 10px 24px;
  font-family: 'Recursive', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.ghost-btn:hover {
  text-decoration: underline;
  border-color: rgba(209, 209, 209, 0.4);
  color: #F0EAD6;
}

.ghost-btn-cyan {
  border-color: rgba(0, 229, 255, 0.3);
  color: #00E5FF;
}

.ghost-btn-cyan:hover {
  border-color: rgba(0, 229, 255, 0.6);
  color: #00E5FF;
  text-decoration: underline;
}

.paper-card {
  background: #F5EFE0;
  color: #2A2A2A;
  border-radius: 2px;
  position: relative;
}

.paper-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
  opacity: 0.04;
  pointer-events: none;
  border-radius: 2px;
}

.dropzone-active {
  border-color: #00E5FF !important;
  background: rgba(0, 229, 255, 0.03) !important;
}

.progress-label {
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
}

.print-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.4), rgba(255, 0, 127, 0.3), transparent);
  z-index: 10;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #0B0B0C;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-inkjet {
    animation: none !important;
    clip-path: none !important;
  }
  .animate-flicker {
    animation: none !important;
  }
  .animate-fadeInUp {
    animation: none !important;
    opacity: 1 !important;
  }
  .ink-bleed:hover {
    transform: none !important;
  }
}

/* Focus indicators */
*:focus-visible {
  outline: 2px solid #00E5FF;
  outline-offset: 2px;
}

button:focus-visible {
  outline: 2px solid #00E5FF;
  outline-offset: 2px;
}