Create the Matrix digital rain effect on a full-screen black canvas: columns of falling green katakana glyphs with a trailing fade and a brighter leading character.

Need single-page web app, write ALL into one self-contained file named index.html in current directory: CSS in <style>, JS in <script>, inline — do not create separate .css/.js files. Use NO external resources, CDNs or network requests: artifact runs fully sandboxed with no network. End with index.html present.

We need to create index.html with canvas full-screen black, columns of falling green katakana glyphs with trailing fade and brighter leading character.

Implement canvas, resize, draw. Use requestAnimationFrame.

Probably generate columns based on font size ~14-18px, canvas width/height.

Katakana glyphs: generate from Unicode range U+30A0-U+30FF etc. Also maybe numbers, Latin.

Trailing fade: use semi-transparent black overlay each frame.

Brighter leading character: draw head with brighter color.

Make full screen black canvas.

Ensure no external resources.

Write file.

We can use bash to check current dir.

Write index.html.

File created. Might improve trailing fade and brighter leading character. Currently we have random bright white head. Could be better to have leading character brighter consistently per column.

The specification: columns of falling green katakana glyphs with trailing fade and brighter leading character.

Current implementation uses fade overlay and random bright white. Could improve to make each column have a head that's brighter.

Let's refine: maintain drop positions, and draw each column with multiple characters trailing. Could draw a trail of length ~20.

Better to have each column have a head at drops[i] with bright color, and previous positions fade.

Simplify: current is acceptable but maybe improve.

We can edit to make brighter leading character always bright green/white.

Implementation: for each column, we could draw multiple characters behind. But fade overlay already gives trailing fade.

We can make head brighter by drawing head after loop with brighter color.

Alternative: keep as is but make brighter leading character consistently: set head color based on position relative to drop.

Simpler: keep current but ensure brighter leading character is always bright for the current glyph.

We draw each column one glyph per frame. Fade overlay gives trail. Brightness is random. Maybe make head always bright: make head bright green #0f0 or white.

We could make head bright when drops[i] modulo something.

Let's improve: draw head with #00ff00 or #ffffff. Make trailing characters dimmer.

Current code picks random bright white 2.5% of time. Better to always bright.

Let's edit.

We can replace draw loop.

Let's read file to see exact.

Let's improve to make leading character consistently brighter, maybe use two shades.

We can make each column draw a short trail of ~10 chars with fading opacity.

Better: For each column, we can maintain an array of recent characters positions. Simpler: draw head bright, body dim.

But current fade overlay gives trail automatically because previous frames remain with fade.

If we draw each column's glyph each frame at new y, previous glyphs remain due to fade overlay, so trail persists.

So we need head brighter than trail. We can make current glyph always bright.

Let's edit draw loop to set fillStyle for head always bright green/white, and for trail we rely on previous frames.

Since we only draw one glyph per column per frame, the head is the newest. So we can set fillStyle = '#00ff00' for head, and previous frames already faded.

But we also want variation for tail? The fade will make it dimmer over time.

Simpler: set fillStyle = '#0f0' for all? Could add random brightness.

Better approach: make head bright white, and occasionally random.

Let's edit to make head always bright: use '#ffffff' or '#00ff00'.

Also ensure trailing fade stronger maybe 0.05.

Let's edit file.

We'll replace the draw function block.

Old text:

  // For trailing fade, use semi-transparent overlay
  function draw() {
    // fade effect
    ctx.fillStyle = 'rgba(0, 0, 0, 0.08)';
    ctx.fillRect(0, 0, width, height);
    
    ctx.font = fontSize + 'px monospace';
    ctx.textBaseline = 'top';
    
    for (let i = 0; i < columns; i++) {
      const char = allChars[Math.floor(Math.random() * allChars.length)];
      const x = i * fontSize;
      const y = drops[i] * fontSize;
      
      // trailing glyphs - dimmer
      // draw previous tail by relying on fade overlay, but we can add gradient effect
      // brighter head
      const isHead = Math.random() > 0.975;
      if (isHead) {
        ctx.fillStyle = '#ffffff';
      } else {
        // varying green shades
        const green = 80 + Math.random()*120;
        ctx.fillStyle = `rgb(0, ${green}, 0)`;
      }
      
      ctx.fillText(char, x, y);
      
      // move drop
      if (y > height && Math.random() > 0.975) {
        drops[i] = 0;
      } else {
        drops[i]++;
      }
    }
    
    requestAnimationFrame(draw);
  }

Replace with improved.

Let's edit.

Now file is improved. Could also increase font size adaptive.

Maybe make fontSize based on width? It's okay.

Check file.

Works. Might want to ensure full-screen black canvas. Good.

The file is present. Could finalize.

Maybe improve performance by using font family 'Courier New' monospace. It's fine.

Return answer.