:root {
  /* intentionally meaningless names */
  --x1: "DSCCTF{y0u_";
  --x2: "d1dnt_ch4ng3_";
  --x3: "th3_c0l0r_2026}";
}

body {
  background-color: #111;
  color: #ddd;
  font-family: Arial, sans-serif;
  padding: 40px;
}

/* Force excessive scrolling */
.spacer {
  height: 1020vh;
}

/* Button styling */
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

/* Loader */
#loader {
  margin-top: 20px;
  width: 30px;
  height: 30px;
  border: 4px solid #444;
  border-top: 4px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Utility */
.hidden {
  display: none;
}

/*
  Real content is constructed at render-time.
  Nothing meaningful exists in HTML.
*/
#a::before {
  content: var(--x1) var(--x2) var(--x3);
  display: block;
  margin-top: 30px;
  font-size: 22px;

  /* still invisible by default */
  color: #111;
  filter: blur(6px);

  transition: filter 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

/* Hover gives hint, not full clarity */
#a:hover::before {
  filter: blur(1px);
  /* still unreadable */
  color: #444;
  /* barely visible */
}