ok, I have set it to correct value in calculation for gradient itself as "if (lineRect.width >= gradient.offsetWidth) {" and it works. need to fix that issue that it jumps on eter press over one line bellow. also, need that gradient to spawn from the current caret position, not on the next line. try align everything. also, add some small animation transition for this gradient like it moves from the current caret position towards its max offset in animation timing. anyway, there's a one line jump bellow after enter press. so, in total there's 3 lines from initial line enter pressage point, then it jumps over one empty line. try figure-out why and it's done.: ```<html>

<head>
  <style>
    html,
    body {
      background: radial-gradient(circle at center right, rgba(15, 10, 0, 0.9), rgba(25, 1, 5, 0.9));
      padding: 10px;
    }

    .container {
      display: grid;
      width: 100%;
      height: 100%;
      padding-top: 0px;
      place-items: center;
    }

    .textarea {
      width: 100%;
      height: auto;
      max-height: 50vh;
      font-family: 'Courier New', monospace;
      font-size: 18px;
      font-weight: bold;
      color: cyan;
      background: rgba(1, 1, 3, 0.9);
      border: 2px inset #252555;
      overflow: auto;
      white-space: pre-wrap;
      grid-row-gap: 0px;

    }

    .highlight-line {
      position: relative;
      display: flex;
      align-items: center;
      height: 9px;
      background: transparent;
    }

    .gradient {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(155, 0, 0, 1), rgba(0, 0, 155, 0.2));
      transform-origin: left;
      opacity: 0;
      transition: opacity 0.2s linear;
    }

    .highlighted {
      background: rgba(155, 0, 0, 0.1);
    }
  </style>
</head>

<body>
  <div class='container'>
    <div id='textarea' class='textarea' contenteditable='true'></div>
  </div>
  <script>
    const textarea = document.getElementById('textarea');

    function setCaretToEnd() {
      const range = document.createRange();
      const selection = window.getSelection();
      range.selectNodeContents(textarea);
      range.collapse(false);
      selection.removeAllRanges();
      selection.addRange(range);
    }

    function handleKeyPress(event) {
      if (event.key === 'Enter' || event.key === 'Return') {
        event.preventDefault();
        const selection = document.getSelection();
        const range = selection.getRangeAt(0);
        const currentNode = range.startContainer;
        const lineBreak = document.createElement('br');
        const highlightedLine = document.createElement('span');
        highlightedLine.classList.add('highlight-line');
        const gradient = document.createElement('span');
        gradient.classList.add('gradient');
        const newLine = highlightedLine;
        newLine.appendChild(gradient);
        if (currentNode.nodeType === Node.TEXT_NODE) {
          const nextNode = currentNode.splitText(range.startOffset);
          nextNode.parentNode.insertBefore(newLine, nextNode);
          range.setStart(nextNode, 0);
        } else {
          range.setStart(newLine, 0);
        }
        const caretOffset = range.getBoundingClientRect().left - textarea.getBoundingClientRect().left;
        highlightedLine.style.width = '100%';
        gradient.style.transformOrigin = caretOffset + 'px left';
        const lineAnimation = gradient.animate({
          opacity: [0, 1],
          transform: ['scaleX(0)', 'scaleX(1)']
        }, {
          duration: 200
        });
        lineAnimation.onfinish = () => {
          if (highlightedLine.offsetWidth >= textarea.offsetWidth) {
            highlightedLine.remove();
          } else {
            gradient.remove();
          }
        };
        selection.removeAllRanges();
        selection.addRange(range);
        setCaretToEnd();
      }
    }
    textarea.addEventListener('keydown', handleKeyPress);
  </script>
</body>

</html>```