CSS drop-shadow (solid 1px) is blurry on retina Macbook

Question

I have a graphic element which is 4 stacked lines. This is created using box-shadow and multiple 1px shadows stacked. As there is no 'blur' on the shadow, I would expect this to form solid 1px lines, like a border.

It's sharp/crisp on my non-retina screen and also on my iPhone XS. However on my Macbook the lines appear blurry.

I've stacked multiple versions in the included example. It seems to differ which lines are blurry depending on position so I guess it must be some pixel-rounding issue.

Blurring also occurs on the scrollbar background (which is a CSS gradient).

Why is this and can it be resolved? I find it strange that a retina screen is one that isn't sharp/crisp.

Update

I swapped these CSS-based graphics out for SVG's of the same effect. 1px solid pixels, repeated. And I got the exact same blurred result. So it's nothing to do with the box-shadows/gradients.

I also removed the transform and positioning styles just incase it was that but still the lines are blurred.

:root {
  --color-retro: rgb(243, 238, 225);
}

.finder {
  background: var(--color-retro);
  border: 1px solid black;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .12), inset -1px -1px rgba(0, 0, 0, .12), inset 1px 1px white;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: Arial;
  margin: 0 0 12px;
  padding: 4px;
  transition: none;
  z-index: 10;
}

.finder .hgroup {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
   order: -1;
   height: 24px;
   margin: -4px -4px 0;
   padding: 0 4px;
   position: relative;
}

.finder h1 {
    background: var(--color-retro);
    font-size: 12px;
    margin: 0;
    padding-right: 4px;
    z-index: 10;
    overflow: hidden;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
 
 .finder p {
  font-size: 12px;
  margin: 0;
  padding: 0;
 }

.finder .hgroup:before {
  box-shadow: inset 0 1px black, 
              inset 0 2px white,
              inset 0 3px var(--color-retro),
              inset 0 4px black, 
              inset 0 5px white,
              inset 0 6px var(--color-retro),
              inset 0 7px black, 
              inset 0 8px white,
              inset 0 9px var(--color-retro),
              inset 0 10px black, 
              0 1px white;
  content: "";
  display: flex;
  position: absolute;
  height: 10px;
  inset: 50% 20px 50% 4px;
  transform: translateY(-50%);
}

.inner {
  background: white;
  border: 1px solid black;
  padding: 8px;
  overflow: hidden;
  overflow-y: scroll;
  max-height: 30px;
}

::-webkit-scrollbar {
   background: linear-gradient(90deg, var(--color-retro) 2px, transparent 1%) 2px 2px, linear-gradient(var(--color-retro) 2px, transparent 1%) 2px 2px, black;
   background-size: 3px 3px;
   display: block;
   height: 16px;
   box-sizing: border-box;
   border-left: 1px solid black;
   width: 16px;
}

.inner::-webkit-scrollbar-thumb {
   background:  var(--color-retro);
   border-left: 1px solid black;
   height: 16px;
   outline: 1px solid black;
   width: 16px;
}

<div class="retro">
  <div class="finder">
    <div class="hgroup">
      <h1 class="page-title">Title Here</h1> 
    </div>
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

<div class="retro">
  <div class="finder">
    <div class="hgroup">
      <h1 class="page-title">Title Here</h1> 
    </div>
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

<div class="retro">
  <div class="finder">
    <div class="hgroup">
      <h1 class="page-title">Title Here</h1> 
    </div>
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>