Okay, I need to create a single-page web app that shows the Matrix digital rain effect. Let me think about how to approach this.

First, the requirements: it has to be in one index.html file, with CSS in a style tag and JS in a script tag. No external resources, so everything inline. The effect should be a full-screen black canvas with green katakana glyphs falling in columns, trailing fade, and a brighter leading character.

Hmm, the Matrix effect typically has vertical streams of characters moving down. Each column has a leading bright character followed by fading ones. The background is black, and the characters are green.

I'll start by setting up the HTML structure. A canvas element that covers the entire viewport. The CSS should make the canvas full screen, no margins, etc.

For the JavaScript part, I need to draw on the canvas. Steps:

1. Get the canvas context.
2. Set up the canvas dimensions to match the window size.
3. Create an array of katakana characters. Maybe a string of various katakana symbols.
4. Determine the number of columns based on canvas width and font size.
5. For each column, track the y-position of the current stream.
6. Each frame, draw the characters. The leading character is brighter (maybe white or brighter green), and the following ones fade out.

Wait, the user specified "trailing fade and a brighter leading character". So each column has a head (bright) and tail (fading green).

I need to manage the position of each column. Maybe an array for the y-positions of each column. Each frame, increment the y-position for each active column.

But how to handle the fading? Probably, for each column, draw multiple characters with decreasing opacity as they go down.

Wait, the classic Matrix effect has each column as a stream where the head is bright, then the characters behind fade to black. So for each column, we have a starting y, and then each subsequent character is drawn below with lower alpha.

But how to structure this in code.

Let me outline the JS:

- Set up canvas and context.
- Define katakana characters. Maybe a string like "ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ".
- Calculate columns: canvas width divided by font size (e.g., 20px font, so columns = width / 20).
- Create an array for the drop positions, one per column. Each starts at a random y position.
- In the animation loop:
   - Fill the canvas with black (with low opacity to create trail effect? Or maybe draw semi-transparent black each frame to fade previous frames).
   - For each column:
      - Draw the characters from top to current position, with decreasing opacity.
      - The leading character is brighter (maybe white or high saturation green).
      - Move the column down by one character height each frame.

Wait, the fading trail is achieved by redrawing the background with a low opacity, so previous frames fade out. Alternatively, each character in the stream has a lower alpha the further back it is.

I think the standard approach is to have each column's stream where the head is bright, and each subsequent character in the stream has lower alpha. So for a column at x, with current y position, you draw characters from y - (stream length) to y, with alpha decreasing as you go up.

But how to manage the stream length. Maybe each column has a random length.

Let me think of the steps:

1. On each frame, set the canvas background to black with some transparency (e.g., rgba(0,0,0,0.05)) to create a fade effect over time.
2. For each column (x position), determine where the current head is (y position).
3. Draw the head character in bright green (or white), then the following characters with decreasing alpha.

Wait, but if the background is semi-transparent black, then the previous characters will fade out over time. So maybe instead of managing alpha per character, just draw the characters with full opacity, but the background's transparency creates the trail.

Alternatively, the background is fully black each frame, and the characters are drawn with varying alpha. But the user said "trailing fade", which is the trail effect.

I think the common method is to have the canvas filled with a semi-transparent black each frame, so that previous drawings fade. Then, the new characters are drawn in bright green.

So:

- Clear the canvas by filling with rgba(0, 0, 0, 0.05) to create the fade.
- For each column, move the y position down by one character height.
- Draw the characters for that column, with the leading one brighter.

Wait, but the columns should start at random positions, and when a column reaches the bottom, it resets to the top.

Let me structure the code.

First, the HTML:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="matrix"></canvas>
    <script>
        // JS code here
    </script>
</body>
</html>

That's the basic structure.

Now, the JS:

Get the canvas element, set width and height to window innerWidth/innerHeight.

Define the katakana string.

Calculate columns: maybe font size is 14px, so columns = canvas width / 14.

Create an array for the y positions of each column. Each starts at a random y (maybe negative to start off-screen).

In the animation loop:

- context.fillStyle = 'rgba(0, 0, 0, 0.05)';
- context.fillRect(0, 0, canvas.width, canvas.height);
- context.fillStyle = '#0f0'; // green
- context.font = '14px monospace';

But the leading character should be brighter. So maybe for each column, the current head is white, and the rest are green with lower alpha.

Wait, the user said "brighter leading character". So the first character in the stream is brighter (maybe white or brighter green), and the following fade to darker green.

So for each column, we have a stream of characters. The head is position y, then y + font size, etc. But the stream length varies.

Alternatively, for each column, we track the current y position, and draw the characters from y - (stream length * font size) to y, with the topmost (head) being bright.

Wait, perhaps each column has a starting y, and each frame, we increment y by font size. When y exceeds canvas height, reset to 0.

But how to create the trail. Maybe for each column, we draw multiple characters behind the head, with decreasing alpha.

Let me think of a stream length. For example, each stream has 10 characters. The first (head) is white, then each subsequent is green with alpha decreasing.

But how to manage the positions.

Alternatively, for each column x, we have a y position. Each frame, y increases by 1 (or font size). Then, for that column, draw characters from y down to y - (stream length), with the character at y being bright, and the others fading.

Wait, perhaps:

For each column i:

- currentY = drops[i]
- for j from 0 to streamLength:
   - y = currentY - j * fontSize
   - if y < 0, skip
   - alpha = 1 - (j / streamLength)
   - set fillStyle with alpha
   - draw character at (x, y)

But the head would be at currentY, and the tail goes up.

Wait, maybe the stream is drawn from the top down. So the head is the lowest character (currentY), and the tail is above it.

Wait, no. The stream moves downward, so the head is at the bottom of the stream.

Wait, in the Matrix effect, the streams move downward, so the leading character is at the bottom of the stream, followed by the trail going up.

So for a stream, the current position is the bottom of the stream. So when moving down, the stream's bottom moves down, and the top is where it started.

So for each column, the y position is the current bottom of the stream. Each frame, y increases by 1 (or font size). The stream has a certain length, so the top of the stream is y - (length * fontSize).

To draw the stream, for each character in the stream (from top to bottom), the alpha increases towards the bottom.

Wait, the leading character (bottom) is brightest, and the ones above fade.

So for j from 0 to streamLength:

y = currentY - (streamLength - j) * fontSize

Wait, maybe it's better to have the stream length as the number of characters in the trail. For example, streamLength = 10.

For each column, currentY is the position of the bottom of the stream. So the characters are drawn at currentY, currentY - fontSize, currentY - 2*fontSize, etc., up to currentY - (streamLength-1)*fontSize.

The bottom character (currentY) is bright, and the alpha decreases as we go up.

So for each character in the stream:

alpha = (streamLength - j) / streamLength, where j is 0 (bottom) to streamLength-1 (top).

Wait, j=0 is the bottom (currentY), j=1 is one up, etc. So alpha for j is (streamLength - j)/streamLength.

So for j=0, alpha=1 (brightest), j=1, alpha=(streamLength-1)/streamLength, etc.

But the user said "brighter leading character", so the leading (bottom) is brightest, and trailing (above) fade.

Yes.

So in code:

For each column i:

x = i * fontSize

currentY = drops[i]

for j in 0 to streamLength-1:

y = currentY - j * fontSize

if y < 0: continue

alpha = (streamLength - j) / streamLength

context.fillStyle = `rgba(0, 255, 0, ${alpha})`

if j == 0: // leading character

context.fillStyle = '#FFF' // or brighter green, maybe 'rgba(180, 255, 100, 1)'

Wait, the user said "brighter leading character", so maybe white or a lighter green.

Alternatively, the leading character is white, and the rest are green with alpha.

But the problem says "green katakana glyphs with a trailing fade and a brighter leading character".

So the main color is green, leading is brighter (maybe more saturated or white).

Let's say leading is white, others are green with alpha.

So in the loop:

if j == 0:

fillStyle = 'white'

else:

fillStyle = `rgba(0, 255, 0, ${alpha})`

But need to check if that's correct.

Now, the steps for the JS:

1. Setup canvas.

2. Define katakana characters.

3. Set fontSize, columns, drops array.

4. Animation loop:

   a. Fill background with semi-transparent black to fade previous frames.

   b. For each column:

      i. Draw the stream of characters.

      ii. Update drops[i] += 1 (or fontSize).

      iii. If drops[i] > canvas.height + fontSize, reset to -fontSize * (streamLength).

Wait, when the stream goes off the bottom, reset to above the top.

So for drops[i], when it exceeds canvas.height, reset to a negative value so the stream starts again from the top.

But the stream length is, say, 10 characters. So when drops[i] > canvas.height, reset to -fontSize * streamLength.

Wait, for example, if streamLength is 10, then the top of the stream is at drops[i] - (streamLength-1)*fontSize. When the bottom (drops[i]) is at canvas.height, the top is at canvas.height - 9*fontSize. To reset, set drops[i] to -fontSize, so the next frame it becomes 0, and the stream starts from the top.

Hmm, maybe better to have each column's y position reset when it's beyond the canvas height.

Let me outline the code.

First, in JS:

const canvas = document.getElementById('matrix');

const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const katakana = 'ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ';

const fontSize = 14;

const columns = canvas.width / fontSize;

const drops = [];

for (let i = 0; i < columns; i++) {

drops[i] = Math.floor(Math.random() * -canvas.height);

}

function draw() {

ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#0f0';

ctx.font = `${fontSize}px monospace`;

for (let i = 0; i < drops.length; i++) {

const text = katakana.charAt(Math.floor(Math.random() * katakana.length));

const x = i * fontSize;

let y = drops[i];

// Draw the leading character (brighter)

ctx.fillStyle = '#FFF';

ctx.fillText(text, x, y);

// Draw trailing characters with fade

ctx.fillStyle = '#0f0';

for (let j = 1; j < 10; j++) {

const alpha = (10 - j) / 10;

ctx.fillStyle = `rgba(0, 255, 0, ${alpha})`;

ctx.fillText(text, x, y - j * fontSize);

}

drops[i] += fontSize;

if (drops[i] > canvas.height && Math.random() > 0.975) {

drops[i] = 0;

}

}

requestAnimationFrame(draw);

}

window.addEventListener('resize', () => {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

});

draw();

Wait, but this code may have issues. For example, when resetting drops[i], maybe set it to a negative value so the stream starts from above. Also, the trailing characters are drawn for each column, but the text is random each time, which might not look right. In the Matrix effect, each column has the same character repeating, but maybe with some variation.

Wait, no, in the actual Matrix, the characters in a column are random and changing. So each frame, for each column, the character is randomly selected. So the code above uses a random katakana each time, which is correct.

But in the trailing part, each character in the trail should be the same as the head, but the code reuses the same 'text' variable for the trail. Wait, no: in the code above, for each column, a single random character is chosen, then the head and trail use that same character. But in reality, each character in the trail should be random. Wait, no, in the Matrix effect, each column is a stream of random characters, so each position in the stream has its own random character. But the code above uses the same character for the entire stream each frame, which would make the stream look like the same character repeating, which isn't correct.

Ah, right. So for each column, each character in the stream should be a random katakana. So in the loop for j, we need to pick a different random character for each position.

Wait, but that would require generating a random character for each j. So in the code:

for each column i:

for j from 0 to streamLength:

text = random katakana

draw at (x, y - j * fontSize)

But in the current code, the text is chosen once per column per frame, so all characters in the stream for that frame are the same. Which is not correct.

So need to generate a new random character for each j.

Wait, but that would make the stream look like random characters, which is correct. So in the code, inside the j loop, generate a new random character each time.

Wait, but in the code above, the text is set once per column, then used for head and trail. So to fix that, move the text generation inside the j loop.

Wait, no. Let's see:

Original code:

for each column i:

text = random katakana

draw head (j=0) with text

for j=1 to 9:

draw trail with same text

But that would make the entire stream for that frame have the same character, which is not correct. The correct behavior is that each character in the stream is random.

Therefore, the text should be generated for each j.

Wait, but in reality, the stream is moving down, so each frame, the head is a new character, and the trail is the previous characters. So the trail characters are from previous frames. But since we're redrawing everything each frame, we need to simulate the trail by having each position in the stream have its own character.

Hmm, this is a bit tricky. Because in reality, the trail is the previous characters that have faded. But since we're not keeping state of previous characters, we have to generate them randomly each frame.

So for each column, each position in the stream (head and trail) should have a random character. So for each j in 0 to streamLength, generate a random katakana.

But that would make the stream look like random characters, which is acceptable.

So modifying the code:

for (let i = 0; i < drops.length; i++) {

const x = i * fontSize;

let y = drops[i];

// Draw trailing characters with fade

for (let j = 0; j < 10; j++) {

const text = katakana.charAt(Math.floor(Math.random() * katakana.length));

const alpha = (10 - j) / 10;

if (j === 0) {

ctx.fillStyle = '#FFF';

} else {

ctx.fillStyle = `rgba(0, 255, 0, ${alpha})`;

}

ctx.fillText(text, x, y - j * fontSize);

}

drops[i] += fontSize;

if (drops[i] > canvas.height) {

drops[i] = -fontSize * 10; // reset to above the top

}

}

Wait, but in this case, the head is j=0 (the bottom of the stream), and the trail goes up (j=1 to 9). So y - j * fontSize for j=0 is y, j=1 is y - fontSize, etc.

But when the stream is moving down, y increases each frame. So the current y is the bottom of the stream.

Wait, no. If y is the current position of the bottom of the stream, then as the stream moves down, y increases. So for each frame, y += fontSize.

So the bottom of the stream is at y, then y - fontSize is the one above, etc.

So for j=0 (bottom), y - 0*fontSize = y

j=1: y - fontSize

...

j=9: y - 9*fontSize

Yes.

So in the code, for each column i:

x = i * fontSize

y = drops[i]

for j=0 to 9:

text = random katakana

alpha = (10 - j)/10

if j==0: white, else green with alpha

draw at (x, y - j * fontSize)

Then, drops[i] += fontSize

if y > canvas.height, reset drops[i] to -fontSize * 10 (so the top of the stream is at -10*fontSize, which is off-screen)

Wait, when drops[i] (the bottom of the stream) exceeds canvas.height, we want to reset it so the stream starts again from the top. So when drops[i] > canvas.height, set it to -fontSize * 10, so that the next frame, it's at -9*fontSize, etc., until it comes into view.

But perhaps better to reset when drops[i] > canvas.height + 10*fontSize, but maybe simpler to reset when drops[i] > canvas.height.

Wait, when the bottom of the stream (y) is at canvas.height, the top of the stream (y - 9*fontSize) is at canvas.height - 9*fontSize. To have the stream fully off-screen, reset when y > canvas.height.

So when drops[i] > canvas.height, reset to -10*fontSize.

So in code:

if (drops[i] > canvas.height) {

drops[i] = -10 * fontSize;

}

But perhaps add some randomness to the reset, so streams don't all reset at the same time.

Alternatively, reset when drops[i] > canvas.height + Math.random() * 100.

But the user didn't specify that, so maybe keep it simple.

Now, putting it all together.

The JS code would look like:

const canvas = document.getElementById('matrix');

const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const katakana = 'ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ';

const fontSize = 14;

const columns = Math.floor(canvas.width / fontSize);

const drops = [];

for (let i = 0; i < columns; i++) {

drops[i] = Math.floor(Math.random() * -canvas.height);

}

function draw() {

ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < drops.length; i++) {

for (let j = 0; j < 10; j++) {

const text = katakana.charAt(Math.floor(Math.random() * katakana.length));

const x = i * fontSize;

const y = drops[i] - j * fontSize;

if (j === 0) {

ctx.fillStyle = '#FFF';

} else {

const alpha = (10 - j) / 10;

ctx.fillStyle = `rgba(0, 255, 0, ${alpha})`;

}

ctx.fillText(text, x, y);

}

drops[i] += fontSize;

if (drops[i] > canvas.height) {

drops[i] = -10 * fontSize;

}

}

requestAnimationFrame(draw);

}

window.addEventListener('resize', () => {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

});

draw();

Wait, but in this code, the ctx.font is set once. Need to set the font before drawing text.

Ah, right. So add:

ctx.font = `${fontSize}px monospace`;

inside the draw function, before the loops.

Also, the background fill is rgba(0,0,0,0.05), which creates the fade effect.

Testing this code: the canvas is filled with semi-transparent black each frame, so previous drawings fade. Then, for each column, 10 characters are drawn, with the bottom one (j=0) white, others green with decreasing alpha. The columns move down by fontSize each frame.

But the problem is that the trail is drawn with the same x for each column, but the y is drops[i] - j*fontSize.

Wait, the x is i * fontSize, which is correct for columns.

This should create the effect.

Now, check for possible errors:

- The katakana string: need to ensure it's correct. The string I used is a sequence of katakana characters. Let me verify.

The katakana string should include various katakana symbols. The example string I have seems to have some valid ones, but maybe missing some. However, for the purpose of the effect, as long as there are multiple characters, it's okay.

- The font: monospace is good for alignment.

- The resize event: updates canvas size when window is resized.

Now, putting all into index.html.

The HTML structure:

<!DOCTYPE html>

<html>

<head>

    <style>

        body { margin: 0; overflow: hidden; background: #000; }

        canvas { display: block; }

    </style>

</head>

<body>

    <canvas id="matrix"></canvas>

    <script>

        // JS code here

    </script>

</body>

</html>

Wait, the body background is set to black, but the canvas is filled with semi-transparent black. However, setting body background to black ensures that if the canvas doesn't cover the entire area (unlikely), it's still black.

But in the JS, the canvas is set to fill the window, so body background may not be necessary, but it's safe to include.

Now, writing the entire index.html.

I need to make sure that all code is inline, no external resources.

Let me write the complete index.html.

The JS code should be inside the script tag.

Potential issues:

- The katakana string may have characters that are not supported, but assuming the browser can render them.

- The fontSize is 14px, which is reasonable.

- The columns are calculated as Math.floor(canvas.width / fontSize), which gives the number of columns.

Wait, in the code above, columns is Math.floor(canvas.width / fontSize), but in the initial setup, drops is initialized with columns elements.

Yes.

Now, let's write the entire file.

Check if any parts need adjustment.

Wait, in the draw function, the ctx.font should be set once per frame, not inside the loops.

So:

function draw() {

ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.font = `${fontSize}px monospace`;

// rest of the code

}

Yes, that's correct.

Also, in the resize event, after changing canvas dimensions, the columns and drops array should be reinitialized. Wait, no— in the current code, the columns and drops are defined outside the draw function. When the window is resized, the canvas size changes, but columns and drops are not updated. This could cause issues where the number of columns is based on the old width.

Ah, right. So when the window is resized, we need to recalculate columns and reset drops.

So in the resize event:

window.addEventListener('resize', () => {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

// Recalculate columns and reset drops

const newColumns = Math.floor(canvas.width / fontSize);

// Adjust drops array: if newColumns > current, add new drops; else, trim

// But for simplicity, recreate drops array

drops.length = 0;

for (let i = 0; i < newColumns; i++) {

drops[i] = Math.floor(Math.random() * -canvas.height);

}

});

But in the current code, drops is defined in the outer scope. So modifying the resize handler to reinitialize drops.

Wait, in the original code, drops is defined as:

const drops = [];

for (let i = 0; i < columns; i++) {

drops[i] = ...;

}

But columns is calculated once at the start.

When the window is resized, columns may change, so we need to adjust the drops array.

This complicates things, but for a basic implementation, maybe it's acceptable to not handle resize perfectly, or to reinitialize drops on resize.

But the user didn't specify handling resize, but it's good practice.

However, given the problem statement, perhaps the code can assume the window size doesn't change, but it's better to include the resize handler.

But to keep the code simple and within the scope, perhaps the resize handler just updates the canvas size but doesn't adjust the drops array. However, this could lead to columns not matching the new width.

Alternatively, in the resize handler, reset the entire setup.

But given that this is a single HTML file and the user wants it to work, I'll include a resize handler that updates the canvas size and reinitializes the drops array.

Wait, but reinitializing drops on resize would reset all the streams, which might be acceptable.

So modifying the resize event:

window.addEventListener('resize', () => {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

drops.length = 0;

const newColumns = Math.floor(canvas.width / fontSize);

for (let i = 0; i < newColumns; i++) {

drops[i] = Math.floor(Math.random() * -canvas.height);

}

});

But in JavaScript, const variables can't have their length changed. So drops is a const array, but we can modify its contents.

Wait, in the code, drops is declared as:

const drops = [];

So it's a constant reference to the array, but the array contents can be modified.

So in the resize handler:

drops.length = 0;

const newColumns = ...;

for ... pushes new values.

Yes.

So the resize handler would reset the drops array based on the new width.

Now, incorporating all this into the JS code.

Putting it all together, the index.html should look like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="matrix"></canvas>
    <script>
        const canvas = document.getElementById('matrix');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const katakana = 'ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ';
        const fontSize = 14;
        const columns = Math.floor(canvas.width / fontSize);
        const drops = [];

        for (let i = 0; i < columns; i++) {
            drops[i] = Math.floor(Math.random() * -canvas.height);
        }

        function draw() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.font = `${fontSize}px monospace`;

            for (let i = 0; i < drops.length; i++) {
                for (let j = 0; j < 10; j++) {
                    const text = katakana.charAt(Math.floor(Math.random() * katakana.length));
                    const x = i * fontSize;
                    const y = drops[i] - j * fontSize;

                    if (j === 0) {
                        ctx.fillStyle = '#FFF';
                    } else {
                        const alpha = (10 - j) / 10;
                        ctx.fillStyle = `rgba(0, 255, 0, ${alpha})`;
                    }
                    ctx.fillText(text, x, y);
                }

                drops[i] += fontSize;
                if (drops[i] > canvas.height) {
                    drops[i] = -10 * fontSize;
                }
            }

            requestAnimationFrame(draw);
        }

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            drops.length = 0;
            const newColumns = Math.floor(canvas.width / fontSize);
            for (let i = 0; i < newColumns; i++) {
                drops[i] = Math.floor(Math.random() * -canvas.height);
            }
        });

        draw();
    </script>
</body>
</html>

Wait, but in the resize handler, when we do drops.length = 0, and then push new values, but since drops is a const array, modifying its length is allowed.

Testing this code: when the window is resized, the canvas size updates, drops array is cleared and repopulated with new columns based on the new width.

This should handle resizing.

Now, check if all requirements are met:

- Single file: yes, index.html.

- CSS in style tag: yes.

- JS in script tag: yes.

- No external resources: yes.

- Full-screen black canvas: yes.

- Green katakana with trailing fade and brighter leading character: yes, leading is white, trail is green with alpha.

Potential improvements:

- The katakana string may not have enough variety, but it's sufficient for the effect.

- The fade might be more smooth with more steps, but 10 is reasonable.

- The reset condition for drops[i] > canvas.height may cause streams to reset abruptly; perhaps reset when drops[i] > canvas.height + 10*fontSize, but the current code should work.

I think this meets the user's requirements.

Okay, let me check what the user asked for. They wanted a single-page web app with the Matrix digital rain effect. The requirements were: full-screen black canvas, columns of falling green katakana glyphs, trailing fade, and a brighter leading character. All in one index.html file with inline CSS and JS, no external resources.

I wrote the index.html file using the write tool. The HTML structure includes a canvas element. The CSS sets the body to black with no margins and the canvas to fill the screen. The JavaScript handles the animation.

In the JS, I set up the canvas dimensions to match the window. The katakana string has various Japanese characters. Columns are calculated based on the canvas width divided by font size (14px). Each column has a 'drops' array tracking the Y position.

The draw function fills the canvas with a semi-transparent black to create the fade effect. For each column, it draws 10 characters: the leading one (j=0) is white, and the trailing ones have decreasing green opacity. The Y position increases each frame, resetting when it goes off-screen.

I included a resize handler to adjust the canvas and reset columns when the window size changes. All code is inline, no external dependencies. Tested that it runs sandboxed without network access.

Everything seems to meet the user's specs. The file was successfully written, so the task is done.