We are creating a single-page web app in one file: index.html.
 The app will have a full-screen black canvas with the Matrix digital rain effect.
 The effect consists of columns of falling green katakana characters.
 We'll have a leading character in each column that is brighter, and trailing characters that fade (diminishing brightness).
 Steps:
 1. We will have a canvas element that covers the entire viewport.
 2. We'll use a black background for the canvas.
 3. We'll choose katakana characters (Unicode range U+30A0 to U+30FF) for the glyphs.
 4. Each column will have a fixed width (each character is monospace) and we'll have as many columns as fit horizontally.
 5. For each column, we maintain a state: the position of the leading character and the trailing characters (i.e., the last N characters).
 6. The leading character is the most recent one and is bright (e.g., white or bright green). The trailing characters get progressively darker (to dark green) until they disappear.
 7. We can implement this by having an array for each column that holds the characters and their brightness (or the time of appearance to calculate brightness).
 8. Each frame, we update: move the column downward by one character, and randomly add a new character at the top with a chance.
 9. We can also have a random chance to reset a column to start a new stream.

 Implementation:
  We'll create a class for each column? Or we can have arrays for the columns for the current state.

 Approach:
   Let columns = an array of objects, each representing a column. Each column has:
     - y: the current vertical position (coordinate) of the leading character (topmost one). We can also think in terms of row indices.
     - symbols: an array of the last N characters (and their brightness) in that column? Actually, we are going to draw from top to bottom so we need the entire trail.

  Alternatively, we can model without storing entire trail: we only draw the trail as long as we remember the symbols that fell. But we need to remember the trail for each column.

  Actually, we can do:
    We have an array for each column that holds the symbols and their positions? Or we can just store the symbol and a timer (or brightness) per character.

  Since the trail fades, let's have for each column an array of objects: { char: the character, opacity: 0 to 1 }.

  How we update:
     On each animation frame:
        for each column:
          - move all symbols down by the character height (which is also the step for the rain).
          - add a new symbol at the top with probability 0.05 (adjustable) to simulate a rain drop.
          - also, for each symbol in the column, we reduce the opacity (or increase the fade?) or we can just set opacity by the position in the trail? Actually we can assign:
                the leading symbol (the first one) has opacity=1, then the next ones are decreasing until zero.

        But note: the leading symbol is the one at the bottom? Actually, we want the most recent symbol to be the brightest and at the top? But in the movie, the rain falls, so the leading character is at the bottom? But then the trail is above.

        The classic effect: the trail fades above the leading character. So the leading character is the bottommost (most recently created) and it is the brightest, and above it the characters get darker.

        Therefore, we store for each column the list of symbols that are currently visible in the trail (from bottom to top? or top to bottom?).

        Actually, we draw from top to bottom. We can store the positions (row index) and the symbol, but we are moving them down. We can store each column as an array of symbols for each row (from top to bottom). But that would be inefficient as the canvas is large? Alternatively, we can store only the non-empty rows.

        We can model each column as a list of symbols that are currently falling. Each symbol has:
            y: the vertical position (pixels) -> then we update by increasing y by a fixed step.
            symbol: a random katakana character
            brightness: for the leading symbol (the one with the largest y? but when moving down, we get increased y) we set full brightness, and for the ones above we set lower.

        Actually, since we are moving the whole column, we don't need to store y per symbol? We can store the entire trail as an array of symbols, and we update the entire trail by moving down by one row. Then we can remove symbols that are below the screen.

        However, we can do without storing per-symbol positions: for each column, we have an array of symbols (the trail) and we draw the first element at the leading position (the bottom), and the next above it, etc. The position of the entire trail is determined by the column's top position? Actually, no.

        We'll design:

          We pre-calculate the number of rows and columns:

          Let fontSize = 12; // px
          Then, the number of columns = Math.floor(width / fontSize)
          The number of rows = Math.floor(height / fontSize)

          Then, we can model each column as an array of symbols that are in the column, where the index in the array corresponds to the row index (from top=0 to bottom = rows-1). But then how do we move? We have to shift the entire array? And we only draw non-empty cells?

        Alternatively, we can do a particle system per column:

          For each column, we maintain a sequence of symbols that are falling. We can represent the trail by having the bottom symbol at position y (in pixels). The symbols above are at position y - rowHeight, y - 2*rowHeight, etc. But then we update by increasing y by rowHeight? Then we reset if it falls below the bottom.

        But we want the entire trail to move together. So we can have:

          For each column:
            startY: the starting vertical position of the trail (the topmost symbol? no, the leading symbol is at the bottom). Actually, we can set:

            We have an array: symbols = [char0, char1, char2, ... charN] for the trail, from bottom to top? because the bottom is the head? and above it are the previous symbols.

            The bottom symbol is at position y (a float?), then the one above at y - fontSize, and so on.

            We update by: y += step (which is a constant speed, e.g., 1 row per frame, but step = fontSize? then it would be one row per frame? but we want it to fall one row, so step = fontSize?).

            However, we want to control the speed: maybe we want to move by less than one row per frame? Or more?

        Let me simplify: we'll have a fixed grid of rows and columns? and we update every frame by shifting the grid downward? But then we shift the entire grid? which is inefficient? But we don't have to shift, we just update the state per column.

        Instead, we can have:

          We create an array of columns. For each column, we have:
            positions: an array of numbers that are the current row index of each symbol in the trail? and then we draw them at (columnIndex * fontSize, rowIndex * fontSize)? and then we move the row index? and when the row index goes beyond the bottom, we remove it?

        And we can also simulate the trail by the column state: each column has a counter for the current head row? and then we store the last, say, 20 symbols? and we update the row index of the head?

        Actually, we can model:

          We have a 2D grid of characters? Not really because we want the trail to be independent per column.

        Let's do:

          Each column has:
            head: the current vertical pixel position of the leading character (the one that is the bottom of the trail). It starts at 0 (top) and moves down. When it goes beyond the screen, we reset it to the top and maybe reset the column?
            trail: an array of characters for the trail? Actually, we don't need to store the characters? we can generate random ones on the fly? But we need to know the character at each row? Actually, we generate a new character for the head when it moves, and the old ones are stored as we move? 

          However, the trail length is variable: from the head, we go up to a fixed length? But we want the trail to fade so we only draw the head and the trailing (say) 20 characters?

        We can do:

          We have an array for each column of the last (maxTrailLength) symbols? but we need to know their brightness relative to the head?

        Alternative simpler approach:

          We maintain an array (for the entire grid) of characters? and an array of brightness? but that would be a 2D array of size columns x rows -> which might be too big? Maybe not, because the number of columns and rows is in the hundreds? e.g., 1920/12 = 160 columns, 1080/12 = 90 rows -> 160*90 = 14400, which is manageable.

          We can do a double-buffer? We don't even need to, we can update the grid every frame.

          Steps for grid-based:

            Let grid = 2D array of characters for each cell (row, col). And each cell also has a brightness? But we want the trail to be only in the columns that are active? Actually, we want a continuous trail? 

          Actually, we can do:

            We have a grid for the current frame: we are shifting the entire grid downward by one row? Then we set the top row to random characters? But then every column would run at the same time? 

          But the matrix effect has columns that start randomly.

        Therefore, back to per column:

          We have an array `columns` of length = columnsCount. Each element is an object:
            trail: an array of fixed length (maxTrailLength, but we can store as many as we need until the tail goes off the top) of characters? Actually, we can store the trail as a circular buffer? We don't need that. We can store the trail as an array of the last n characters, but n is the number of rows? So we can use an array and we push a new character at the head (bottom) and shift the array? 

          How:
            We set the head at position (colIndex * fontSize, headY) -> but headY increases by step per frame.

            We store the characters for the trail in the column? and when headY moves by step, we add a new random character to the top of the trail? Actually, we can think of the trail as being drawn from the head upwards: so the head is the bottom, and above it at headY - 1 * fontSize, we have the previous character? and above that the previous, until the top of the screen or until maxTrailLength.

          We can compute the trail: for a column, the head is at y. We draw symbols at y, y - fontSize, y - 2*fontSize, ... until we reach maxTrailLength or beyond the top? Actually, we don't need to store them? We can generate the characters on the fly? But the characters are random and we want them fixed per trail? because if we rerandomize, the trail becomes random every frame? we want the trail to be the same until it moves off.

          So we store the trail as an array of characters? and each time we add a new character at the head, and one at the bottom falls off? Actually, we add a new head and we pop the top if it goes beyond maxTrail? Or we don't pop? we just draw until the top of the screen?

          However, the head position increases? and we draw the trail upward? so we start at the head and go upwards until we hit the top of the screen? and we set the character for each step? We will need a buffer to store the characters that are above? 

        So we design:

          For each column we maintain:
            y: the current position of the head (in pixels) at the bottom of the trail. Starts at a random negative value? because we want to start above the screen? and then we update until it enters and falls.

          We also have an array of the last n characters? n is the length of the trail we want? but we can make the trail length = maxTrail (e.g., 20). Then we store:

            trail[]: an array of characters (the head is the new one? the bottom? so the trail is at indices: trail[0] at position y, trail[1] at y - fontSize, ... trail[i] at y - i*fontSize). When we move, we update y by speed. Then we remove the characters that are falling off the screen? Actually, no removal, we just change the array: we generate a new character for the head, and we add it at the front? and remove the last one? then we don't need to remember the trail beyond the maxTrail? but then if the column hasn't reached the bottom, we can have a trail that only shows the last maxTrailLength characters? 

          But if we set maxTrailLength too short? it might cut the trail? So we want the trail to be as long as the column has been falling? but then no max? that would grow indefinitely? 

        Let's instead store:

          We don't store a bounded trail? We store the entire trail? but we remove symbols that go beyond the top? Actually, we don't need to, because when the head moves beyond the bottom, we reset the column.

          Reset condition: when the head position (y) is beyond the screen height? then we reset the column: set a new random y at the top (negative, so it starts above) and reset the trail array to empty? then add a new head.

        Actually, we can do without storing the entire trail: we can generate the trail on the fly by knowing the head and the head's history? but we don't store the history? We need to store the past characters? because we want the trail to have fixed characters until they go off.

        So we design:

          For each column, we have an array `symbols` that stores the symbol for the head and the symbols above? and the head is the current one? Actually, we can generate the trail upwards: how? We don't have to store? no because if we generate randomly every time, the trail changes? 

        Therefore, we store an array `symbols` for the trail. The array grows until the trail goes off the top? then we reset the trail? but when the head moves, we add a new symbol at the end (the new head) and we remove the symbol at the top (the top of the trail) if it is beyond the top? Actually, we can't remove individually? We can set a maximum length? and when we add a new symbol, we shift the entire array? That might be inefficient? but maxTrailLength can be 100? acceptable.

        Steps for one column per frame:

          - Move: y += speed (pixels per frame? we set speed to fontSize * frameRateScale? to adjust frame rate independent? we can let the frame rate vary? so we use time delta? we'll get to that later)

          - Add a new head: unshift a new random katakana to the head? then if we exceed maxTrail (say 50), we pop the last one? Actually, we want the head at the bottom? so the new one is appended at the bottom? Then the trail above is the previous heads? So:

            We have: the symbols array, with symbols[0] at the head (bottom) and symbols[1] above, symbols[2] above that? up to symbols[symbols.length-1] at the top of the trail.

          - But we don't need to store the one at the top if it has gone beyond the top of the canvas? Actually, the array length would be fixed? to the maximum trail length? and we always have the last 20 symbols? Because we want the trail to gradually fade? and we don't draw beyond the trail length? 

          How to draw:

            For a column at columnIndex, we have the symbols array and the head position (y).

            Then for each symbol at index j (0 <= j < symbols.length):
               symbolY = y - (j * fontSize)   [because the first trailing symbol is just above the head, at distance fontSize? but note: the head moves downward? then as j increases, the symbol is higher]
            Then draw the symbol at (columnIndex * fontSize, symbolY) with opacity = 1 - j * (1/maxTrailLength) [but we want the leading one (j=0) to be bright? and the next to be dimmer?]

          But if we set maxTrailLength to 20, then j from 0 to 19? We set the opacity of the head (j=0) to 1.0, then j=1 to 0.95? etc? Actually, we want the head to be the brightest? and the one above to be 1-step dimmer? Or we can set it exponentially? 

          We can set: opacity = 1.0 for j=0, then 0.5 for j=1, 0.25 for j=2? etc? but that would drop too fast? We want the trail to extend for 20 chars? 

          Alternatively, we can set: 
            j=0: brightness = 1.0 (white? or bright green)
            j=1: 0.8
            j=2: 0.64
            ... multiplicative?

          Or linear: from 1.0 at the head to 0.0 at the tail (j = maxTrailLength? then we set j=0:1.0, j=trailLength:0.0). 

          We can do: 
            opacity = 1 - j/(trailLength) 

          But the trail length is fixed? we set trailLength as maxTrail? so for j>=maxTrail? we don't draw? because we are capping the array to maxTrail? 

        How we update per frame:

          We want the trail to stay continuous? We move the head down? So the entire trail moves? Then we add a new character at the head position? and we remove the one that has become too old? 

          Actually, when we update:
            We set the head y: y += step (in pixels per frame)
            Then we might add a new character at the head? with some probability? because we don't want to fill the entire screen at once? We can set:

              newCharProbability: at each frame, we decide to add a new head? or we update the head? Actually, the trail moves as one? and we want to refresh the head with a new random character? 

          We do: every frame, we add a new head? then the whole trail moves? and we remove the top? then all the positions shift? 

        But note: the speed of the trail? We want the head to move at one row per frame? Then if we add a new char every frame, the trail length remains constant? and the head moves down by one row per frame? 

        However, we want columns to start with an empty trail? and then start a trail? So we introduce:

          Each column has:
            y: the current position (in pixels) of the head (bottom of the trail) -> starts at a random negative value (so above the screen).
            symbols: array of symbols for the trail? starts empty? then we start adding? 

          Then at each frame:
            y += step   // step = fontSize? because one row per frame? but step can be a variable to adjust for speed? but we are using fixed frames? we can set frameRate to 30fps? but we might want to time delta for consistent speed? but we'll fix for now.

            Then we add a new head symbol? and then draw the entire trail? 

          How we add? we push the new symbol to the front of the array? [0] is the head? Actually, we can use:

            symbols.unshift(newChar); // adds at the front -> becomes symbols[0]
            Then if symbols.length > maxTrailLength, symbols.pop()? -> remove the last one? But what if we haven't reached maxTrailLength? we let it grow until maxTrailLength? 

          But then the first frame: we add one? next frame we add another? until the trail grows to maxTrailLength? then we keep a fixed length? 

        Then the drawing: for each j from 0 to symbols.length-1:
            let char = symbols[j];
            let opacity = 1 - j/(maxTrailLength); // j from 0 to maxTrailLength-1? so if we have maxTrailLength=10, then the first element (j=0) has opacity=1, and j=9 has opacity=0.1? 
            but we want the very top of the trail to be opaque 0? Then we can adjust: opacity = 1 - j/(maxTrailLength-1)? so at j=len-1, opacity=0? But we don't necessarily have maxTrailLength? we have current len? 

          Actually, we can set: 
            opacity = 1 - j/(maxTrailLength); 
            and set the color to rgba(0, 255, 0, opacity) -> but the head is bright green? and trailing dim? 

          But note: the head (j=0) should be bright? and the others behind? so we can set the head to white? and the trail to green? 

          We can set:
            if j==0: color = "white"   // or bright green: "rgb(180,255,180)"
            else: color = `rgba(0, 255, 0, ${1 - j/(maxTrailLength)})`? but the head we set separately.

          Alternatively, we can set the head to have a different color? 

        But the classic effect: the head is bright and the trail is green? 

        Implementation:

          We'll set:
            for j==0: fillStyle = "rgb(180,255,180)"   // bright green
            for j>=1: fillStyle = `rgba(0, 255, 0, ${1 - j/(maxTrailLength)})`   // green with variable opacity? but also note: we don't want the trail to be too green? 

          Actually, the trail should be darker green? not necessarily using opacity? we can set RGB? 

          Let me see: we can set the trail to be green at different intensities? e.g., for j=0: (180,255,180), for j=1: (0,255,0), then j=2: (0,200,0), j=3: (0,150,0), etc? 

          We can do:

            intensity = 255 - j*(255/maxTrailLength)
            color = `rgb(0, ${intensity}, 0)`

          Then the head we set to white or bright green? 

          How about:
            if j==0: color = "rgb(255,255,255)" // white? or light green
            else: 
                let intensity = Math.max(0, 255 - j*(255/maxTrailLength))
                color = `rgb(0, ${intensity}, 0)`

        We'll use the second approach: since it doesn't require transparency? and blending might be costly? and it matches the classic effect.

        Steps:

          Initialize:
            Set up the canvas to full window.
            Set the font: monospace, at fontSize (say 14px? or 12px? we can set to 16px? but to have more characters? we can set 14px).
            Calculate the number of columns and rows? we actually only need the columns: columns = floor(width / fontSize)

            Create an array `columns` of length=columnsCount. For each column, initialize an object:
               { 
                 y: - (random() * window.innerHeight)   // to start at a random position above the screen? so negative y. Then it will fall until it comes into view.
                 symbols: []   // initially, no symbols
                 speeds: we could vary per column? but set fixed step? 
               }

          Then in the animation loop:

            Clear the canvas with black.
            For each column:
              - update: column.y += step (step = fontSize? so one row per frame? if we want to move one row per frame? then step=fontSize? but we might want independent step? maybe step = fontSize * (random speed? or fixed) ) -> let's set fixed step = fontSize? because that moves one row per frame? which is standard.

              - Add a new head symbol? with a new random katakana? to the front? (we unshift it). Then if the column's symbols length becomes more than maxTrailLength, pop? -> then the trail length is fixed? 

              - Draw: for j=0 to symbols.length-1:
                  let char = column.symbols[j]
                  let yPos = column.y - j * fontSize   // because j=0 is the head at column.y, j=1 is above by one row? etc.
                  if yPos is below the screen's top and above the bottom (we can clip)? then draw the char at (colIndex * fontSize, yPos) with color as described.

                Also, we want to draw the head with a special color? 

              - If the head's position (column.y) is below the bottom? then reset the column: 
                  column.y = 0   // but we want it to come again? We can set it to a random position above? column.y = -Math.random() * window.innerHeight;
                  column.symbols = []   // reset the symbols? so we start over? and we don't want to draw anything until it comes down? But if we reset and set to above? then we don't see and it starts over? 

          But note: we have a continuous effect? so we want to reset the column when the head goes beyond the bottom? then we set the head to the top? and then let it fall again? 

        Alternatively, when the head goes beyond the bottom? we reset the head at the top? and we don't reset the symbols? we want the trail to remain? But then the trail would be drawn above the top? until the head comes down? 

        We can do:

          When a column's head is beyond the bottom? we set the head to 0 (top) and we reset the symbols? But then we start a new head? 

        But we want the columns to run independently? so we can simulate:

          When the head is beyond the screen? we reset the column by setting:
             column.y = 0
             column.symbols = []

        But then we don't want all columns to reset at once? we want randomness? 

        Actually, we can set: 
          If column.y > window.innerHeight? then we reset:
             column.y = -Math.random() * window.innerHeight;   // we start above? so we have some random delay? then it will come at random times? 
             column.symbols = [];

        Then the new trail starts above and falls? 

        But we also have to consider: we might not get a trail until the head comes into the screen? so we only start adding symbols? when column.y >= 0? 

        How we add the head? we add every frame? regardless? then the head that is above the screen? we still add? but we only draw if yPos is within the screen? 

        We can set: we add a new head every frame? then if the column is active? it will have a long trail? even above? but we set maxTrailLength? so the array is capped?

        So: we add a new head every frame? and then we draw only the ones that are within the screen? and we reset the column when the head goes beyond the screen? 

        But we don't want a column to run continuously? because it would always be falling? and we want the occasional break? 

        We can have a random chance to reset? 

        Actually, in the classic matrix code rain, columns start and stop? but we are simulating by resetting when it falls off? and we reset immediately to a new one? so it continues? 

        Also, we can add: every frame, for each column, we have a random chance? to reset the trail? but that's optional? 

        I think we are overcomplicating? because resetting the trail when it falls off the screen and starting it at a random point above? will give the effect of continuous rain? 

        Let's set:

          step = fontSize? // pixels per frame? one row per frame

          maxTrailLength = 30

          fontSize = 14

          Then, we also want to control the frame rate? we'll use requestAnimationFrame? and adjust the step by the elapsed time? to be independent of frame rate? But we don't for this simple version.

        We'll implement without delta time? and then see if the speed is too slow or fast? we can adjust step? 

        Steps for coding:

          We create the index.html file with a canvas that covers the entire screen? and we register a resize event to adjust the canvas to the window.

        We write:

          <!DOCTYPE html>
          <html>
          <head>
            <title>Matrix</title>
            <style>
              body, html { margin:0; padding:0; overflow:hidden; }
              canvas { display:block; }
            </style>
          </head>
          <body>
            <canvas id="matrix"></canvas>
            <script>
              // We put the code here
            </script>
          </body>
          </html>

        Then in the script:

          // Get the canvas and context
          const canvas = document.getElementById('matrix');
          const ctx = canvas.getContext('2d');

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

          // Constants
          const fontSize = 14;
          const columnsCount = Math.floor(canvas.width / fontSize);
          const maxTrailLength = 30;
          const step = fontSize; // pixels per frame

          // Array of columns
          let columns = [];
          for(let i=0; i<columnsCount; i++) {
            columns.push({
              // Start at a random position above the screen? so they appear at different times? 
              y: -Math.floor(Math.random() * canvas.height),
              symbols: []
            });
          }

          // Generate a random katakana character (from U+30A0 to U+30FF)
          function randomKana() {
            // We choose from the range: 0x30A0 to 0x30FF (inclusive)
            const start = 0x30A0;
            const end = 0x30FF;
            const code = Math.floor(Math.random() * (end - start + 1)) + start;
            return String.fromCharCode(code);
          }

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

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

            // For each column
            for(let i=0; i<columnsCount; i++) {
              const col = columns[i];
              // Advance the head by step
              col.y += step;

              // Add a new random kana at the head (as the new head)
              col.symbols.unshift(randomKana());

              // If the array is too long, remove the last one
              if(col.symbols.length > maxTrailLength) {
                col.symbols.pop();
              }

              // Reset condition: head has fallen below the canvas? then reset
              if(col.y > canvas.height) {
                col.y = -Math.floor(Math.random() * canvas.height);
                col.symbols = [];
                // note: we break out of drawing this column? because we set symbols to empty? but we've already added a head? but we reset it? so we break the current frame and then start again at random position.
                // but we don't break the for loop? we go to next column? or we can skip drawing for the rest? actually no, we skip drawing this column? because col.symbols is empty? but we haven't drawn? and we reset the state for next time? so we can draw? 

                // Actually, we reset the col and we don't draw anything? so we continue to next column? 
                // Because symbols is empty? we skip the drawing loop? so we continue.
              }

              // Draw the symbols for this column
              for(let j=0; j<col.symbols.length; j++) {
                const char = col.symbols[j];
                const yPos = col.y - j * fontSize;

                // Skip if above the top (yPos + fontSize < 0?) or below the bottom (yPos > canvas.height) -> we are drawing the head and the trail? but the trail might be above the top? we check:
                if(yPos > canvas.height || yPos + fontSize < 0) {
                  // We skip this symbol? but note: we are not drawing the entire trail? so we break? no, because the trail might be partially on screen? so we draw even if some are off? and we skip? 
                  // but to optimize? we break if we are below the screen? actually, if yPos>canvas.height, then we break? but we are going from head (j=0) to tail? the head is the bottom? and then upwards? so if we draw and the head is below? we break? no, because the trail is above? but if the head is below? we reset? so we don't get here? 
                  // so we skip drawing if the symbol is above the top? or below the bottom? 
                  // But the head we already reset? so we only have symbols that are above the head? which could be above the top? so we skip drawing if the yPos is below the bottom? but we reset when the head is below the bottom? then we shouldn't have any symbol below? 

                  // Actually, we skip if above the top? because if yPos is negative? we skip? 
                  if(yPos < -fontSize) {
                    // above the top? skip
                    continue;
                  }
                  // below: we don't have to skip? because we reset the column when head goes below? and we set the symbols array to empty? so we don't get here? 
                  // So we only skip above? 
                }

                // Set the color
                if(j == 0) {
                  // Head: white
                  ctx.fillStyle = "rgb(255,255,255)";
                } else {
                  // Trail: green with intensity depending on j
                  const intensity = Math.floor(Math.max(0, 255 - j * (255 / maxTrailLength)));
                  ctx.fillStyle = `rgb(0,${intensity},0)`;
                }
                // Draw the character
                ctx.fillText(char, i * fontSize, yPos);
              }
            }

            requestAnimationFrame(draw);
          }

          // Start the animation
          draw();

        But we have an issue: the head is always the new one? and we add a new head every frame? so the trail moves down? but the entire trail moves down by step per frame? which is one row per frame? then we are updating at 60fps? so it moves fast? 

        We need to set the step to be larger? or we need to use a consistent fps? but we don't? because we are in requestAnimationFrame? which is usually 60fps? then the trail falls 60 rows per second? and if the screen has 70 rows (approx 1080/14=77 rows)? then it falls in 77/60 seconds? a little over 1 second? that's too fast? 

        Solution: we adjust step? by multiplying the step by the deltaTime? but we haven't implemented deltaTime? 

        Alternatively, we set step to 4? (so we move 4 pixels per frame? at 60fps -> 240 pixels per second? and the screen height is 1080? then 4.5 seconds? we can change step? we can set step = 1? then we move 1px per frame? which is 60fps? then 1080px takes 18 sec? too slow? so we want around 100px per second? then step=100/60≈1.67? but we can't use fractions if we don't use delta time? 

        So we use time delta? 

        How to use time delta:

          Let's compute the time since the last frame? and then step = (desired speed in px/s) * (deltaTime in s)? 

          Desired speed: we want one row per second? no? we want to adjust? We set the desired speed? 

          We set: 
            const speed = fontSize * 10; // 10 times? then 14*10=140px per second? 

          Then we compute elapsed time? then step = speed * (elapsedTime/1000)? 

        But we need to store the last time? 

        Let's rewrite:

          We have a variable lastTime? 

          function draw(time) {
            if(!lastTime) lastTime = time;
            const deltaTime = time - lastTime;
            lastTime = time;

            ... then for each column, step = (speed * deltaTime) / 1000? 

          And set speed = fontSize * 10; // 10 rows per second? or we can set speed = 100? meaning 100px per second? 

        But we'll do:

          Step per frame: movement = (speed * deltaTime) / 1000;   // speed in px per one second? 

        Then we update:

          col.y += movement; 

        We do the same for the other calculations? 

        How about the trail? we are still adding one head per frame? but we might not want to? because if deltaTime is small? we add many heads? which increases the trail? 

        Actually, we add one head per frame? and we don't adjust for deltaTime? because the trail growth is per frame? not per time? and the movement per frame? we adjust? 

        This might cause the trail to be one row per frame? even if the movement is fractional? but the y coordinate is fractional? and when we draw? we use fractional? then the trail is continuous? 

        Alternatively, we let the head update (including adding a symbol) per frame? and the position per frame? then it's independent? 

        We can try without time delta? and adjust the step? set step=2? then at 60fps, 120px per second? then we test? 

        Let me compute: for a screen of 720px? it would take 720/120=6 seconds? which is acceptable? 

        So we set step=2? and don't use delta time? 

        We'll set step = 2; // pixels per frame? then 60fps: 120px/s? then 1080px screen takes 9 seconds? a bit long? we can set step=3? -> 180px/s? 6 seconds? 

        We choose step=3? 

        We also want the columns to start at random? and the reset? 

        Code:

          step = 3; // pixels per frame

        What about the trail? we add one symbol per frame? so the trail length in time? is maxTrailLength frames? then it will last maxTrailLength * (1/60) seconds? about 0.5s for maxTrailLength=30? which is acceptable? 

        Now, we code accordingly.

        We also note: the maxTrailLength is in number of symbols? and the distance between two symbols is the same as the movement per frame? so the trail length? the time a symbol stays in the trail? is maxTrailLength frames? 

        So we set:

          step = 3; 
          fontSize = 14;   // row height? the distance between two rows? the symbols are drawn at each row? but we move by 3px? so the symbols are drawn at positions that are 14px apart? but we move only 3px? so the head will be at [0, 3, 6, 9, 12, 14]? then at step 5? we move to 15px? which is beyond one row? then the symbols will not be exactly row-aligned? 

        How do we draw? We draw at pixel positions? so we just set the y coordinate? and the letter moves? so it will be fractional? 

        This is okay? 

        But the rows? we might want the letters to be exactly row-aligned? so the step should be a multiple of the row height? in pixels per frame? 

        Alternatively, we set fontSize to be the same as the step? Then the head moves one row per frame? but we set fontSize= the step? then the step must be an integer? 

        We set:

          fontSize = 16? 
          step = 16? // one row per frame? then at 60fps, it falls 960px per second? then a 1000px screen takes about 1 second? too fast? 

        Then we reduce the step? but step cannot be less than fontSize? because we want to align? 

        Actually, we don't have to align? The falling can be smooth? 

        So we leave:

          fontSize: the font height? we set to 16? 
          step: 3? 

        But note: the distance between the head and the next symbol? we set to fontSize? which is 16? then we are at 16px? but the head moves only 3px? so we are drawing the next symbol at head.y - 16? and the head moves down 3? then the gap between them becomes 13px? which is not constant? 

        We want the gap to be constant? at 16px? then even if the head moves smoothly? the trail symbols are fixed at integer multiples? 

        How we draw the trail: we do:

          yPos = col.y - j * fontSize

        So the distance between head and first trailing symbol is fontSize? which is 16px? regardless of the step? 

        So the step is independent? then the head moves? then the trail follows? but the gap remains constant? 

        This is acceptable? the trail moves with the head? and the gap remains? 

        But what if step is fractional? we do the same? 

        However, if step=16, then we move one row per frame? then j=0 is at 16, j=1 at 0? etc? 

        We decide to keep step as a fraction? and use smooth motion? 

        We'll set fontSize to 14? and step to 3? 

        Now, let's code accordingly? 

        We also note: the head color? we set to white? and the trail to green? 

        But we can adjust? 

        Also, we can use a fixed set of katakana? 

        The code for randomKana: we did? 

        We write the code above into the <script> tag.

        We test: the column index i * fontSize? this is the x position? but what if the column width is more than the spacing? we set the spacing at fontSize? 

        It should be okay? because we set the font to monospace? and we set the spacing to fontSize? which is approximately the width? 

        But we can set the context textAlign to 'center'? or left? it's left? the x is the left of the character? and the column width is fontSize? so we don't need to align? 

        Now, we write the file.

        We'll write the entire index.html.

        Let me assemble the code:

          We have the HTML structure? then inside the script, the code as described? but we changed step and fontSize? 

        We set:

          fontSize = 14;
          step = 3;   // pixels per frame

        And to avoid the rain being too dense? we have a chance? to add a new head? not every frame? so we skip adding a head with a probability? 

        Actually, we do add every frame? then every column has a head every frame? then we have continuous rain? 

        We can set: for each column, we only add a head with a certain probability? e.g., 0.1? then the trail grows slowly? and we get gaps? 

        How about: 

          if(Math.random() > 0.9) {   // 90% chance we skip? then 10% chance? then we add? so 10% of the frames? 
            col.symbols.unshift(randomKana());
          }

        Then the trail grows only when we add? so if we skip, the head moves but the trail does not grow? 

        We might want the trail to keep the same? until we add a new head? 

        Actually, we want to set the head character to change? but we can have the same head character? until changed? 

        But note: we are drawing the trail? but the head is always the same? until we change? that doesn't look good? 

        Therefore, we update the head every time? so we unshift a new char? every frame? 

        However, at 60fps, that's 60 new chars per second? a lot? 

        We can combine step and head update: 

          We move the head? then we change the head character? then the previous head becomes the first trailing? and we shift the entire trail? 

        But at 60fps? we change 60 times per second? the eye might see it? but we want the effect? 

        We'll leave it? 

        We can also consider: we move the head and update the head character? every n frames? but we do per frame? 

        We try?

        We write the code? 

        Now, note: the reset condition? when the head goes below the screen? we reset? 

        How to compute below: col.y>canvas.height? then reset? 

        And we set the new y to a random negative position? 

        But we don't want all columns? we set each column independently? 

        We'll write.

        We also note: the symbols array is built by unshifting? then we have the head at [0]? then the trail at [1], [2]? 

        We draw from j=0 (head) to j=symbols.length-1? 

        We are ready? 

        We'll write the entire file? 

        But note: the draw loop? we call requestAnimationFrame? we should call it at the beginning of the draw function? or at the end? we do at the end? after drawing? 

        But we don't clear the frame? we clear at the beginning? 

        It should be okay? 

        We write the file.

        We'll save as: index.html

        Note: the current working directory? we write to /tmp/ws/index.html

        We are done.