Tweak balloon styles:

- always point up
- inherit colour of parent post
- prevent gap between cable and balloon/post

src/components/blog/Balloon.astro

···
     }
   }
 
+
+  @keyframes inv-tilt {
+    from,
+    to {
+      rotate: calc(-1 * var(--rot-0));
+    }
+
+    20% {
+      rotate: calc(-1 * var(--rot-1));
+    }
+
+    40% {
+      rotate: calc(-1 * var(--rot-2));
+    }
+
+    60% {
+      rotate: calc(-1 * var(--rot-3));
+    }
+
+    80% {
+      rotate: calc(-1 * var(--rot-4));
+    }
+  }
+
   .cable {
     position: absolute;
 
···
     background: black;
 
     /* .5rem accounts for border (z-index doesn't work) */
-    top: calc(-1 * var(--length) - 0.5rem);
+    z-index: -99;
+    top: calc(-1 * var(--length));
     left: calc(
       100% / var(--of) * var(--id) + 100% / 2 / var(--of) + var(--offset)
     );
···
     width: var(--width);
     height: var(--height);
     border-radius: calc(var(--width) / 2);
-    background: red;
-    translate: -50% -100%;
+
+    /* inherits from parent <Post /> */
+    background: var(--colour);
+    /* 95% instead of 100% to prevent gaps between cable */
+    translate: -50% -95%;
+    rotate: calc(-1 * var(--rot-0));
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: infinite var(--timing) linear inv-tilt;
+    }
   }
 </style>

src/components/blog/Post.astro

···
 
   section {
     width: var(--width);
-    background-color: white;
-    border: 0.5rem solid var(--colour, dodgerblue);
-    border-radius: 2.5rem;
     padding: 1rem;
-    box-shadow: 0 0 7.5rem var(--box-shadow-colour, #00000080);
     margin-bottom: var(--y-gap);
 
+    position: relative;
+    z-index: var(--layer);
+
+    /* ::before used so that <Balloon /> can render behind 
+       (new stacking context for root, so cant 
+       render behind the white unless a before) */
+    &::before {
+      content: "" / "";
+      display: block;
+      position: absolute;
+      top: -0.5rem;
+      left: -0.5rem;
+      z-index: -2;
+
+      width: calc(var(--width) + 1rem);
+      height: calc(100% + 1rem);
+
+      background-color: white;
+      border: 0.5rem solid var(--colour, dodgerblue);
+      border-radius: 2.5rem;
+
+      box-shadow: 0 0 7.5rem var(--box-shadow-colour, #00000080);
+    }
+
     /* default, overridden by reduced motion */
     top: var(--x-offset-0);
     left: var(--y-offset-0);
···
     @media (prefers-reduced-motion: no-preference) {
       animation: infinite var(--timing) bob;
     }
-
-    position: relative;
-    z-index: var(--layer);
 
     &:has(a:focus) {
       animation-play-state: paused;