/* RESET */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* ROOT THEME VARIABLES */
    :root {
      --bg-start: #010101;
      --bg-end:   #111111;
      --primary:  #5dfd1a;
      --accent:   #39c0ed;
      --grid-size: 24px;
    }

    /* BACKGROUND */
    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      font-family: 'Press Start 2P', monospace;
      background: linear-gradient(160deg,var(--bg-start),var(--bg-end));
      color: var(--primary);
      overflow: hidden;
      user-select: none;
    }

    /* PIXEL GRID OVERLAY */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background-image: 
        repeating-linear-gradient(0deg, transparent 0 calc(var(--grid-size) - 1px), rgba(255,255,255,.05) calc(var(--grid-size) - 1px) var(--grid-size)),
        repeating-linear-gradient(90deg, transparent 0 calc(var(--grid-size) - 1px), rgba(255,255,255,.05) calc(var(--grid-size) - 1px) var(--grid-size));
      pointer-events: none;
      animation: drift 20s linear infinite;
    }

    @keyframes drift {
      to { transform: translate(var(--grid-size),var(--grid-size)); }
    }

    /* FLOATING PIXEL PARTICLES */
    .particle {
      position: fixed; top: 100vh; width: 4px; height: 4px;
      background: var(--primary); box-shadow: 0 0 6px var(--primary);
      animation: float linear infinite;
    }
    @keyframes float {
      0%   { transform: translateY(0)     rotate(0deg);  opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
    }

    /* LAYOUT */
    .wrapper {
      text-align: center;
      max-width: 640px;
      padding: 2rem 1rem;
    }

    .title {
      font-size: clamp(1.5rem, 5vw + .5rem, 3rem);
      letter-spacing: 2px;
      line-height: 1.2;
      text-shadow: 2px 2px var(--accent);
    }
    .title .pixel {
      color: var(--accent);
    }

    .subtitle {
      font-size: .9rem;
      margin: 1.5rem auto 2rem;
      line-height: 1.6;
      opacity: .85;
      color: #81ffb0;
    }

    /* PROGRESS BAR (PIXEL SQUARES) */
    .progress {
      display: inline-grid;
      grid-template-columns: repeat(auto-fit,minmax(22px,1fr));
      gap: 6px;
      justify-content: center;
    }
    .square {
      width: 22px; height: 22px;
      border: 2px solid var(--primary);
      background: transparent;
      transition: background .3s, box-shadow .3s;
    }
    .square.filled {
      background: var(--primary);
      box-shadow: 0 0 6px var(--primary);
    }

    footer {
      margin-top: 2.5rem;
      font-size: .6rem;
      color: #81ffb0;
      opacity: .55;
    }

    /* RESPONSIVE */
    @media(max-width:480px){
      .wrapper{padding:1.5rem .5rem;}
      .subtitle{font-size:.75rem;}
      .square{width:18px;height:18px;}
    }