html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
canvas { display: block; }

#plate { 
  position: fixed; top: 26px; left: 50%; transform: translateX(-50%); 
  text-align: center; z-index: 6; pointer-events: none; color: #e8e2d4; 
}
#plate h1 { 
  margin: 0; font: 400 26px/1.2 Georgia, "Times New Roman", serif; 
  letter-spacing: 0.35em; text-transform: uppercase; 
}
#plate p { 
  margin: 6px 0 0; font: 11px/1.4 monospace; 
  letter-spacing: 0.2em; color: rgba(232,226,212,0.55); 
}

/* Loader */
#loader {
  position: fixed; inset: 0;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  transition: opacity 0.6s ease;
}
#loader.done { opacity: 0; pointer-events: none; }
#loader .dots { display: flex; gap: 8px; }
#loader .dots span { 
  width: 2px; height: 2px; background: #fff; opacity: 0.25; 
  animation: hop 1.1s infinite ease-in-out; 
}
#loader .dots span:nth-child(2) { animation-delay: 0.12s; }
#loader .dots span:nth-child(3) { animation-delay: 0.24s; }
#loader .dots span:nth-child(4) { animation-delay: 0.36s; }

@keyframes hop { 
  0%, 55%, 100% { transform: translateY(0); opacity: 0.25; } 
  25% { transform: translateY(-8px); opacity: 1; } 
}

/* Cinematic grain overlay */
#grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0.11;
  /* Cleaned SVG data URI with no spaces */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="160" height="160" filter="url(%23n)"/></svg>');
}