Improve split comparison: add before/after badges, extend slider range

Adds floating corner badges to clarify which side is before/after,
removes the "With Skills" divider label, and extends the slider range
to account for the skewed divider so it can fully reveal each side.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/styles.css

@@ -58,6 +58,29 @@
 .split-label-dot {
   transition: transform var(--duration-fast) var(--ease-spring);
 }
+.split-badge {
+  position: absolute;
+  top: 10px;
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 3px 8px;
+  border-radius: 3px;
+  z-index: 5;
+  pointer-events: none;
+}
+.split-badge--before {
+  left: 10px;
+  color: var(--color-ash);
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+}
+.split-badge--after {
+  right: 10px;
+  color: var(--color-paper);
+  background: var(--color-accent);
+}
 @media (hover: none) {
   .split-container::after {
     content: '← Swipe →';
@@ -2374,6 +2397,9 @@ code {
   width: 100%;
   max-width: 600px;
   margin: 0 auto;
+  padding: 20px;
+  margin-top: -20px;
+  margin-bottom: -20px;
 }
 .split-container {
   position: relative;