How exactly does stacking context works in case of pseudo elements?

Question

I was following how to build a portfolio tutorial on Traversy Media. I have a div#preview with a p tag inside like this

Here is a link to the codepen - https://codepen.io/sankethbk7777/pen/KKmeaLE

<div class='right-column'>
       
            <div id='preview'>
              <h3>What I Do</h3>

              <div id='corner-tl' class='corner'></div>
              <div id='corner-tr' class='corner'></div>

              <p>I am a Banglore based computer scinece gradute, aspiring full stack developer. I am open for jobs, internships and freelancing</p>

              <div id='corner-br' class='corner'></div>
              <div id='corner-bl' class='corner'></div>
            </div>
</div>
         

.right-column #preview {
  width: 250px;
  display: inline-block;
  border: 2px solid #17a2b8;
  background-color: var(--previewBg);
  position: relative;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 1em;
  background-color: rgba(251, 249, 243, 0.8);;
}

I want to apply a shadow effect like this

So tried something like this

.right-column #preview {
  width: 250px;
  display: inline-block;
  border: 2px solid #17a2b8;
  background-color: rgba(251, 249, 243, 0.8);

  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 1em;
  background-color: rgba(251, 249, 243, 0.8);;
  position: relative;
  z-index: 10;
}


.right-column #preview::before {
  content: '';
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color:#f0ead6;
  bottom: 30px;
  right: 30px;
}

But it ended up like this

Based on my understanding of stacking context

.right-column #preview {
  position: relative;
  z-index: 10;
}

creates a new stacking context for preview

Also

.right-column #preview::before {
  position: absolute;
  z-index: 2;
}

creates a new stacking context for psuedo element but it still respects the stacking context of parent

This is similar to this example from MDN.

But i don't quite understand why this is not working. I read the stacking context docs on MDN and i also referred this question on StackOverflow. But for a beginner, i couldn't find any helpful explanation.

The solution given in this blog actually works but i am more interested in understanding the internal working of this.

The solution basically involves creating a wrapper object around #preview and giving it a z-index: -1 to #preview::before.

In short solution is this

<div class='right-column'>
  <div class='preview-wrapper'>
    <div id='preview'>
      <h3>What I Do</h3>

      <div id='corner-tl' class='corner'></div>
      <div id='corner-tr' class='corner'></div>

      <p>{myData.whatIDo}</p>

      <div id='corner-br' class='corner'></div>
      <div id='corner-bl' class='corner'></div>
    </div>
  </div>
</div>;

.right-column .preview-wrapper {
  position: relative;
  z-index: 1;
}

.right-column #preview {
    position: relative;
    /* No z-index specified */ 
}

.right-column #preview::before {
  position: absolute;
  z-index: -1;
}

Here is a link to the solution codepen https://codepen.io/sankethbk7777/pen/MWmXpJY

Please help to understand this.

Thank you.