.compare-pair.svelte-1vih4i4 {
    gap: 2px;
  }
  .compare-glyph.svelte-1vih4i4 {
    color: var(--theme-cyan-500, #06b6d4);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3));
    transition: transform 150ms, filter 150ms;
  }
  .compare-glyph-r.svelte-1vih4i4 {
    color: var(--theme-indigo-400, #818cf8);
  }
  .dark .compare-glyph.svelte-1vih4i4 {
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, .4));
  }
  .compare-half.svelte-1vih4i4:hover .compare-glyph:where(.svelte-1vih4i4) {
    filter: drop-shadow(0 4px 10px color-mix(in oklab, var(--theme-cyan-600, #0891b2) 50%, transparent));
    transform: scale(1.15);
  }
  .dark .compare-half.svelte-1vih4i4:hover .compare-glyph:where(.svelte-1vih4i4) {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, .8));
  }
  /* The letter is FILLED text, not a stroked path — a stroked letter at this size
     turns to mush. WHITE, not the box's own colour: at 13px in the box's cyan or
     indigo it vanished into the outline it sits on. The dark paint-order stroke is
     a halo so it stays legible against a light header too. */
  .compare-letter.svelte-1vih4i4 {
    font-size: 15px;
    font-weight: 800;
    font-family: ui-sans-serif, system-ui, sans-serif;
    fill: #ffffff;
    stroke: rgba(0, 0, 0, .85);
    stroke-width: 3px;
    paint-order: stroke fill;
  }
  .compare-active.svelte-1vih4i4 .compare-letter:where(.svelte-1vih4i4) {
    fill: #ffffff;
  }

  /* PRESSED — held down. Sinks slightly and darkens, so a click is felt even when
     the resulting state change is subtle. */
  .compare-half.svelte-1vih4i4:active:not(:disabled) .compare-glyph:where(.svelte-1vih4i4) {
    transform: scale(0.92) translateY(1px);
    filter: brightness(0.8);
  }

  /* ACTIVE — this window currently occupies that pane. The box fills solid so the
     pair reads at a glance: one filled, one outline. Clicking it again removes the
     window from the split, which the title spells out. */
  .compare-active.svelte-1vih4i4 {
    color: var(--theme-red-600, #dc2626);
  }
  .compare-active.svelte-1vih4i4 .compare-box:where(.svelte-1vih4i4) {
    fill: var(--theme-red-600, #dc2626);
    fill-opacity: 1;
  }
  .compare-half.svelte-1vih4i4:hover .compare-active:where(.svelte-1vih4i4) {
    color: var(--theme-red-500, #ef4444);
  }

  @media (prefers-reduced-motion: reduce) {
    .compare-glyph.svelte-1vih4i4 {
      transition: none !important;
    }
  }