We are going to create a single-page web app that displays the Matrix digital rain effect.
 The app will be written in a single file: index.html.
 It will contain HTML, CSS, and JavaScript all in one file.

 Requirements:
 - Full-screen black canvas.
 - Columns of falling green katakana glyphs.
 - Trailing fade (characters behind the leading one are dimmer).
 - Leading character is brighter.

 Approach:
 1. We'll use an HTML5 canvas element that covers the entire viewport.
 2. We'll set the canvas to full screen and update on window resize.
 3. We'll draw katakana characters (Unicode range: 30A0–30FF) in columns.
 4. Each column will have a stream of characters falling from top to bottom.
 5. The leading character in each stream will be bright green, and the trailing ones will fade to dark green or black.
 6. We can simulate the fade by drawing characters with decreasing opacity or changing the green intensity.

 Implementation details:
 - We'll create a class for each column (or stream) that manages the position and characters of that stream.
 - Each stream will have an array of characters. We can generate a random katakana character using: 
      String.fromCharCode(0x30A0 + Math.random() * (0x30FF - 0x30A0 + 1))
 - We'll use a fixed font (monospace) and adjust the font size based on the column width.
 - The canvas will be cleared every frame and redrawn to create the animation.

 Steps in JavaScript:
 a. Set up the canvas and context.
 b. Define a Stream class (or similar) to represent each column of falling characters.
    - Each stream has: 
        - x: horizontal position
        - y: array of positions for each character in the stream? OR we can have an array of characters with their own positions?
        - Actually, we can model each stream as having a starting y position and then an array of characters that are falling. But for efficiency, we can just keep the head position and then the trail length.
        - Alternatively, we can have each stream as an array of objects {char: string, y: number, brightness: number} but that might be heavy.

 c. We can instead model:
    - Each stream has a fixed x position and a head (leading character) that falls downward.
    - The trail is the last N characters that have been shown, each fading.
    - We can store the head position (y) and then the speed. Then we can store the characters that are currently in the trail.

 d. However, to keep it simple, we can have:
    - An array of streams. Each stream is an object with:
        - x: number
        - headY: number (the current y position of the leading character)
        - speed: number (pixels per frame, can be random per stream)
        - trail: an array of characters? Actually, we don't need to store the trail characters separately because we can draw the trail by going backwards from the head and drawing characters at decreasing brightness.

 e. Instead, we can generate the trail by drawing multiple characters above the head at fixed intervals? But we need to remember the characters? Actually, we can generate the same character for the entire trail? Or we can generate random characters for each position? But the effect usually has each character in the trail staying the same until the head moves? 

 f. Let me think: In the Matrix effect, each stream has a head (bright) and then a trail of the same characters that were previously the head? Or each character is random? Actually, each character in the trail is the same as when it was the head? But then we have to store the trail characters? 

 g. Alternatively, we can store for each stream:
    - x: fixed
    - headY: current y of the leading character
    - headChar: the character at the head (which changes randomly at intervals)
    - trail: an array of characters that are trailing? But then we have to manage the trail as a queue? 

 h. We can do without storing the trail characters: we can generate a new random character for the head periodically, and then when the head moves down, we leave behind a character that fades? But then we have to store the trail as an array of {char, y, brightness}? That might be heavy if we have many streams and long trails.

 i. Another approach: we can precompute a fixed trail length and then for each stream, we store an array of characters (with the head at index 0 and the trail following). Then we update the head character randomly at intervals and shift the array? But that would require storing a lot of state.

 j. Instead, we can simulate the trail by drawing the head and then the previous positions with decreasing brightness? But we don't store the old characters? Then we have to remember the characters? 

 k. We can store for each stream:
    - x: number
    - headY: number (updated each frame by speed)
    - headChar: string (updated randomly at intervals)
    - trail: array of {char: string, y: number}? Actually, we can avoid storing the trail by noting that the trail is just the head positions from the past? But we don't store past positions? 

 l. Alternatively, we can model each stream as having a circular buffer of characters? That might be complex.

 m. Let's simplify: 
    - We'll have a fixed trail length (say 10 characters).
    - Each stream will have an array `chars` of length trailLength. The first element (index 0) is the head, then index 1 is the one above, etc.?
    - Actually, we want the head to be at the bottom? So the trail is above the head? Then we can have an array of characters for the entire stream (from the head up to the trail length above). We update the head character randomly and then shift the array? 

 n. Actually, we can update the head character randomly and then move the head down? Then we can draw the stream from the head (at the bottom) and then the characters above? 

 o. We can do without storing the trail as separate characters? We can generate the same character for the entire trail? But that doesn't look as good.

 p. I found an efficient method: 
    - Each stream has a head position (y) and an array of characters for the trail? But we don't need to store the entire trail? We can store the head character and then when the head moves, we leave a character behind? Then we have to store the positions and characters of the trail? 

 q. Given the complexity, we can use a simpler method: 
    - We'll have an array of streams. Each stream has:
        - x: position
        - y: array of positions for each character in the stream? Actually, no.

 r. Actually, we can model each stream as a continuous strip? We don't need to store each character? We can draw the stream by drawing the head and then above it a gradient? But that doesn't work for random characters.

 s. We can store for each stream:
    - x: number
    - headY: number (the current y position of the head)
    - trail: an array of characters? Actually, we can store the entire column as an array of characters? But the column might be long? 

 t. Instead, we can use a 2D grid? That might be heavy.

 u. I found a common approach in examples: 
    - Each stream has a head position (y) and an array `chars` of length = trail length. The array is updated: every frame, we shift the array (pop the last character) and unshift a new random character? Then we draw the array from top to bottom? 

 v. Actually, we can do:
    - Each stream has:
        - x: number
        - headY: number (which increases by speed each frame)
        - trail: array of characters (with length = trailLength) - but we don't need to store positions? We draw the trail at positions above the head? 

 w. How about:
    - We'll set a fixed character height (font size). Then the trail will be drawn at [headY - charHeight, headY - 2*charHeight, ...] for the trail.
    - We'll store the current head character and then the previous characters? But we only need the last trailLength characters? 

 x. We can store for each stream:
    - x: number
        - headY: number (current y position of the head, in pixels)
        - speed: number (pixels per frame)
        - charArray: an array of characters of length trailLength (say 20). The character at index 0 is the head, index 1 is the one above, etc.
        - Then we update: every frame, we move headY by speed. Then we randomly change the head character (at index 0) at a certain interval? And then shift the array? Actually, we don't shift? We can use a circular buffer? 

 y. Alternatively, we can update the entire array every frame? That would be inefficient.

 z. Let's do:
    - We'll have an array `chars` of length trailLength for each stream.
    - Every frame, we do:
        - headY += speed
        - If headY is beyond the bottom, reset headY to 0 and reset the entire stream? Or wrap?
        - Then, at random intervals, we update the head character? But how to update the trail? 

 aa. Actually, we can update the entire column every frame? We can simulate the trail by having the head and then the characters above? 

 ab. Another common method: 
     - Each stream has an array `drops` which are the y positions of each character in the stream? But that doesn't store the character? 

 ac. I think we can do without storing the trail? We can draw the trail by going backwards from the head? But we need to remember the characters? 

 ad. We can store the trail as an array of characters? And we update the trail by shifting out the oldest character and adding a new head character? 

 ae. Steps per stream per frame:
     - Move the head down by speed (so headY += speed)
     - If headY is beyond the bottom, reset headY to 0 and reset the trail? Or we can set headY to 0 and keep the trail? Actually, we can reset the entire stream? 

 af. We can do:
     - We'll have a fixed number of streams (columns) based on the canvas width and character width.
     - Each stream has:
         - x: number
         - headY: number (initialized randomly above the canvas)
         - speed: number (random between min and max)
         - trailLength: number (random? or fixed? let's fix for now)
         - chars: array of characters of length trailLength? Actually, we don't need to store the entire trail? We can generate the trail by drawing the head and then above it the same character? But that's not random? 

 ag. Let's look for an example implementation? But note: we cannot use external resources.

 ah. I recall that a common way is to have each stream represented by an array of characters (for the entire column) and then update the head and shift the array? 

 ai. We can do:
     - We'll set a fixed number of rows (based on the canvas height and character height). Then each stream has an array `chars` of length = number of rows? That might be heavy? 

 aj. Alternatively, we can store only the trail? 

 ak. I found a simpler method: 
     - Each stream has:
         - x: number
         - headY: number
         - trail: an array of characters for the trail? But we don't store positions? We draw the trail at positions: headY - charHeight, headY - 2*charHeight, ... up to trailLength.

     - Then we update: 
         - Every frame, headY += speed
         - Periodically (at random intervals) we change the head character? And then we shift the trail? Actually, we can update the trail by: 
             - When the head moves down by one row (charHeight), we push the head character into the trail array? But then the trail array grows? 

 al. We can fix the trail to a maximum length? Then we push and shift? 

 am. Actually, we can do:
     - Each stream has an array `chars` that holds the trailLength characters (including the head). The head is the last element? Then we draw from the top (first character) to the bottom (last character)? 

 an. How about:
     - We'll have a fixed array of length trailLength for each stream. The array represents the characters from the top of the trail to the head (which is the bottom).
     - Every frame, we remove the top character (shift) and add a new character at the bottom (push)? But then the trail moves? 

 ao. Actually, we want the head to move down? So we don't shift the array? We update the head character and then the trail above? 

 ap. We can update the head character randomly and then move the entire trail? That doesn't seem efficient.

 aq. I found a good method: 
     - Each stream has an array `chars` of length trailLength. The head is at index 0, then the next is index 1, etc. (so the trail is above the head?).
     - Then we draw the head at (x, headY) and then the trail above: at (x, headY - charHeight), (x, headY - 2*charHeight), ... for trailLength steps? 
     - Then we update: 
         - headY += speed
         - Periodically, we set `chars[0] = randomChar()`
         - And then we shift the array? Actually, we don't shift? We leave the trail? 

 ar. But note: the trail should move down? So when the head moves down, the entire trail moves? 

 as. Actually, we don't move the trail? We just update the head position? Then the trail positions are fixed relative to the head? 

 at. That doesn't work because the head moves and the trail should move with it? 

 au. We can store the trail as relative positions? Then we draw the trail at (x, headY - i * charHeight) for i from 0 to trailLength? 

 av. Then we update headY? Then the trail moves? 

 aw. Yes: 
     - Draw the head at (x, headY) with full brightness.
     - Then draw the character above at (x, headY - charHeight) with less brightness? 
     - Then at (x, headY - 2*charHeight) even less? 

 ax. But we need to store the characters for the trail? 

 ay. We can store for each stream:
     - x: number
     - headY: number (updated each frame)
     - chars: an array of characters of length trailLength (the head is at index0, then the one above at index1, etc.)
     - Then we update: 
         - headY += speed
         - Periodically (every few frames) we update the head character (chars[0]) to a new random character? 
         - And then we update the trail? How? 

 az. Actually, we want the trail to be the history of the head? So when the head moves down, the character that was at the head becomes the first trail character? 

 ba. We can do:
     - Every frame, we move headY down by speed.
     - Then, at a certain update frequency (say every 5 frames) we do:
         - Shift the entire array: chars[i] = chars[i-1] for i from trailLength-1 down to 1? Then set chars[0] to a new random character? 
     - But that would make the trail move down? 

 bb. Actually, we don't need to shift? The trail is fixed? 

 bc. I think we are overcomplicating. 

 bd. Here's a simpler method from common examples:

     // Initialize each stream:
     let streams = [];
     let charWidth = ...;
     let charHeight = ...;
     let columns = Math.floor(canvas.width / charWidth);
     for (let i = 0; i < columns; i++) {
         let stream = {
             x: i * charWidth,
             y: Math.random() * -1000, // start above the canvas
             speed: 5 + Math.random() * 5,
             chars: [] // we'll fill with trailLength random chars
         };
         // initialize the chars array with trailLength random characters
         for (let j = 0; j < trailLength; j++) {
             stream.chars.push(randomChar());
         }
         streams.push(stream);
     }

     // Then in the draw loop:
     for each stream:
         stream.y += stream.speed;
         if (stream.y > canvas.height) {
             stream.y = -charHeight * trailLength; // reset above
         }
         // Draw the stream: from top to bottom? 
         for (let j = 0; j < trailLength; j++) {
             let char = stream.chars[j];
             let y = stream.y + j * charHeight;
             if (y >= -charHeight && y < canvas.height) {
                 let brightness = (j === 0) ? 255 : Math.max(0, 255 - j * 20); // adjust formula
                 ctx.fillStyle = `rgb(0, ${brightness}, 0)`;
                 ctx.fillText(char, stream.x, y);
             }
         }
         // Update the head? 
         // Every few frames, update the head character? But note: we are drawing the entire stream from the same array? 

 be. But in this method, the entire stream is falling? And we update the entire stream? 

 bf. Actually, we want the head to be at the bottom? So we should draw the head at the bottom? 

 bg. We can reverse the array? 

 bh. Alternatively, we can store the head at the last index? 

 bi. Let me adjust: 
     - We want the head (brightest) at the bottom? Then the trail above? 
     - So we draw the trail from top to bottom? The top character is the oldest? 

 bj. We can store the array so that index0 is the top and index[trailLength-1] is the head? 
     - Then we draw index0 at (stream.x, stream.y), index1 at (stream.x, stream.y+charHeight), ... index[trailLength-1] at (stream.x, stream.y + (trailLength-1)*charHeight)
     - Then when the stream moves down, we move stream.y? 
     - Then updating the head: we update the last character? 

 bk. But then the entire stream moves? 

 bl. Alternatively, we can have the head at the top? But the effect has the head at the bottom? 

 bm. We can draw the head at the bottom? Then we store the array so that index0 is the head? Then we draw the head at (stream.x, stream.y) and the trail above? 

 bn. How? 
     - We draw the head at (stream.x, stream.y) -> that's the bottom? 
     - Then the next character above at (stream.x, stream.y - charHeight)? 

 bo. Then we update stream.y to move down? 

 bp. But then when we reset, we set stream.y to -charHeight? 

 bq. We can do:
     - Each stream has:
         - x: number
         - headY: number (the y position of the head, which is the bottom of the stream)
         - chars: array of length trailLength: index0 is the head (bottom), index1 is the one above, index2 above that, etc.

     - Draw: 
         for (let j = 0; j < trailLength; j++) {
             let char = stream.chars[j];
             let y = stream.headY - j * charHeight; // so j=0: headY, j=1: headY - charHeight, etc.
             if (y < -charHeight) break; // above the canvas
             if (y > canvas.height) continue; // below? but headY is the bottom? 
             // Actually, we are drawing from the head (bottom) up? 

     - But note: the headY is moving down? Then the entire trail moves down? 

 br. Then update:
     - headY += speed
     - If headY > canvas.height + charHeight * (trailLength-1), reset headY to -charHeight * (trailLength-1) ? 

 bs. And update the head character? We can update the head character (index0) randomly at intervals? And then shift the trail? 

 bt. Actually, we want the trail to be the history? So when the head moves down, the character that was at the head becomes the first trail character? 

 bu. We can do:
     - Every frame, we move headY down by speed.
     - Then, at a certain interval (say every 5 frames), we do:
         - Remove the last character (the top one) -> but we don't need to? 
         - Actually, we want to update the head and then push the head to the trail? 

 bv. We can update the head character and then shift the entire array? 

 bw. Alternatively, we can update the head character without shifting? 

 bx. I think we can update the head character randomly and then leave the trail? But then the trail doesn't change? 

 by. Actually, the trail should be the previous head characters? 

 bz. So we need to shift the trail? 

 ca. We can do:
     - Every update interval (say every 5 frames), we set:
         for (let j = trailLength-1; j > 0; j--) {
             stream.chars[j] = stream.chars[j-1];
         }
         stream.chars[0] = randomChar();

     - But that would update the entire trail? 

 cb. Actually, that shifts the trail: the head becomes the first trail character? 

 cc. But note: we are storing the head at index0? Then we shift the array to the right? 

 cd. We want: 
     - The head (index0) is updated to a new random character? 
     - Then the previous head becomes the next character (index1)? 

 ce. So we shift the array from index0 to the end? 

 cf. We can use:
     stream.chars.pop(); // remove the last (top) character? 
     stream.chars.unshift(randomChar()); // add a new head at the front? 

 cg. But that would make the trail move? 

 ch. Actually, we don't need to shift? We can update the head and then the trail remains? 

 ci. I think we are mixing two things: 
     - The trail is fixed? The entire stream is falling? 

 cj. Let me look for a standard implementation? 

 ck. Due to time, I'll choose a method:

     We'll store for each stream:
        - x: position
        - headY: the y position of the head (the bottom character)
        - chars: an array of trailLength characters, where:
            - chars[0] is the head (bottom)
            - chars[1] is the one above it
            - ... 
            - chars[trailLength-1] is the top

     How to update:
        - Every frame: headY += speed
        - If headY > canvas.height + charHeight * (trailLength-1), reset headY to -charHeight * (trailLength-1) [so that the entire stream starts above]
        - Then, at random intervals (we can use a counter per stream), we update the head character and shift the trail? 

     But note: we don't want to shift the entire array every frame? 

     Instead, we can update the head character periodically? And then we don't shift? The trail remains? 

     But then the trail doesn't update? 

 cl. We want the trail to update? 

 cm. Actually, the trail should be the same as the head was at previous positions? 

 cn. So we need to update the entire stream? 

 co. We can do: 
     - Every frame, we update the headY.
     - Then, we update the characters? We can update the head character randomly at intervals? And then we update the trail by shifting? 

 cp. We can do:
     - Each stream has a counter: updateCounter
     - When updateCounter reaches 0, we do:
         for (let j = trailLength-1; j > 0; j--) {
             stream.chars[j] = stream.chars[j-1];
         }
         stream.chars[0] = randomChar();
         updateCounter = updateInterval;
     - Else, updateCounter--;

 cq. Then we draw the stream: 
     for (let j = 0; j < trailLength; j++) {
         let char = stream.chars[j];
         let y = stream.headY - j * charHeight;
         if (y < -charHeight || y > canvas.height) continue;
         let brightness = (j === 0) ? 255 : Math.max(0, 255 - j * 20); // j=0 is head, brightest
         ctx.fillStyle = `rgb(0, ${brightness}, 0)`;
         ctx.fillText(char, stream.x, y);
     }

 cr. But note: the head is at the bottom? And the trail above? 

 cs. This should work.

 Implementation:

 1. HTML: a canvas element that covers the entire screen.
 2. CSS: set body margin to 0, canvas to full screen.
 3. JavaScript:
    - Get canvas and context.
    - Set canvas size to window inner dimensions.
    - Define character width and height: we'll use a fixed font, say "monospace", and set the font size to 14px? Then charWidth = 14? But we can compute it? 
    - Actually, we can set the font and then measure a character? But note: katakana might be wider? We can use a fixed width font.

    Steps:
        - Set up the canvas.
        - Define the number of columns: canvas.width / charWidth.
        - Define trailLength: say 20.
        - Create an array of streams.

    - Animation loop: 
        - Clear the canvas (fill black).
        - Draw each stream.
        - Update each stream.

 4. We'll use requestAnimationFrame.

 Let's code accordingly.

 Note: We are writing everything in one file: index.html.

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

 Now, the JavaScript code:

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

   // Set canvas to full window
   function resizeCanvas() {
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
   }
   window.addEventListener('resize', resizeCanvas);
   resizeCanvas();

   // Settings
   const fontSize = 14;
   const charWidth = fontSize; // assuming monospace, width equals font size? Actually, we can measure.
   // We'll set the font and then measure a character? But for simplicity, we'll assume monospace: charWidth = fontSize * (some ratio)? Actually, we can set charWidth = fontSize * 0.6? But let's measure.

   // Instead, we'll set the font and then measure one character.
   ctx.font = `${fontSize}px monospace`;
   const charWidth = ctx.measureText('あ').width; // but katakana? We can use a representative character.
   // Actually, we can use a fixed charWidth? 

   // Since we are using monospace, all characters have the same width. We can use:
   const charWidth = fontSize * 0.6; // approximate? 

   // Alternatively, we can compute:
   const metrics = ctx.measureText('A'); // but katakana might be wider? 
   // Let's use a katakana character: 
   const charWidth = ctx.measureText('ア').width;

   // But note: we are setting the font after the canvas is resized? 

   // We'll define:
   const columns = Math.floor(canvas.width / charWidth);
   const charHeight = fontSize; // approximate? 

   // Trail length: 
   const trailLength = 20;

   // Create streams
   let streams = [];
   for (let i = 0; i < columns; i++) {
     let stream = {
         x: i * charWidth,
         headY: Math.random() * -1000, // start above
         speed: 5 + Math.random() * 5,
         chars: [],
         updateCounter: Math.floor(Math.random() * 10) // randomize update timing
     };
     // Initialize the char array with trailLength random characters
     for (let j = 0; j < trailLength; j++) {
         stream.chars.push(getRandomChar());
     }
     streams.push(stream);
   }

   function getRandomChar() {
     // Katakana range: U+30A0 to U+30FF
     return String.fromCharCode(0x30A0 + Math.floor(Math.random() * (0x30FF - 0x30A0 + 1)));
   }

   function draw() {
     // Clear canvas
     ctx.fillStyle = 'black';
     ctx.fillRect(0, 0, canvas.width, canvas.height);

     // Draw each stream
     ctx.font = `${fontSize}px monospace`;
     streams.forEach(stream => {
         for (let j = 0; j < trailLength; j++) {
             let char = stream.chars[j];
             let y = stream.headY - j * charHeight;
             // Skip if outside the canvas
             if (y < -charHeight || y > canvas.height) continue;

             // Brightness: head (j=0) is 255, then decreases
             let brightness = (j === 0) ? 255 : Math.max(0, 255 - j * 20);
             ctx.fillStyle = `rgb(0, ${brightness}, 0)`;
             ctx.fillText(char, stream.x, y);
         }

         // Update the stream
         stream.headY += stream.speed;
         if (stream.headY > canvas.height + charHeight * (trailLength-1)) {
             stream.headY = -charHeight * (trailLength-1);
         }

         // Update characters periodically
         stream.updateCounter--;
         if (stream.updateCounter <= 0) {
             // Shift the array: move all characters up by one, and add a new head
             for (let j = trailLength-1; j > 0; j--) {
                 stream.chars[j] = stream.chars[j-1];
             }
             stream.chars[0] = getRandomChar();
             stream.updateCounter = Math.floor(Math.random() * 10) + 5; // reset counter
         }
     });

     requestAnimationFrame(draw);
   }

   draw();

 5. We'll adjust the brightness formula? Maybe exponential? But linear is okay.

 6. We'll set the font to monospace and green? We set the fillStyle per character.

 7. We'll start the animation.

 Note: The above code is written for clarity. We might need to adjust the charHeight? We set charHeight = fontSize? But in monospace, the height might be more? We can set charHeight = fontSize * 1.5? 

 Actually, we can use the font's actual height? But for simplicity, we'll use fontSize.

 Let's write the code accordingly.

 However, note: the charHeight might be the height of the character? We can set charHeight = fontSize? Then the vertical spacing? 

 We'll try.

 We'll write the entire index.html file.

 But note: we must write the file to the current directory: index.html.

 We are going to write the entire HTML content as a string and then use the write function.

 Since we are in the harness, we'll output the function call to write the file.

 Steps:
   - We'll compose the entire HTML string.
   - Then call write with path: "index.html" and content: the string.

 Let's compose the HTML.