:root {
  --bg: #020202;
  --text: #d7ffe8;
  --line: rgba(52, 255, 142, 0.5);
  --glow: rgba(45, 255, 136, 0.45);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
}

#matrix-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

.entry-page {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.entry-logo {
  position: fixed;
  left: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: min(320px, 30vw);
  filter: drop-shadow(0 0 18px var(--glow));
}

.entry-input {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 70vw);
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #8cffbc;
  font-size: 1.1rem;
  padding: 0 1rem;
  outline: none;
  box-shadow: 0 0 14px rgba(45, 255, 136, 0.2);
}

.entry-input:focus {
  border-color: #6bffad;
  box-shadow: 0 0 20px rgba(45, 255, 136, 0.35);
}

.entry-video {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 88vw);
  max-height: 86vh;
  z-index: 3;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 0 30px rgba(45, 255, 136, 0.2);
}

.entry-video.show {
  display: block;
}

@media (max-width: 900px) {
  .entry-logo {
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(220px, 50vw);
  }

  .entry-input {
    width: min(420px, 86vw);
  }
}