@keyframes crt-signal-pulse {
    0% {
      left: -40%;
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      left: 120%;
      opacity: 0;
    }
  }

  .crt-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-5);
    min-height: 2.5rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: var(--text-label);
    line-height: 1.1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition:
      transform 140ms ease,
      border-color 140ms ease,
      box-shadow 200ms ease,
      background 180ms ease;
  }

  /* ── Primary ─────────────────────────────────────────────────────── */

  .crt-button.primary {
    position: relative;
    background: linear-gradient(
      180deg,
      oklch(from var(--color-support) 0.26 0.06 h) 0%,
      oklch(from var(--color-support) 0.2 0.06 h) 100%
    );
    border: none;
    color: #fff;
    box-shadow: 0 2px 12px color-mix(in oklch, black 20%, transparent);
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
  }

  .crt-button.primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
      from 135deg,
      var(--color-core),
      var(--color-support),
      var(--color-flavor),
      var(--color-core)
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
  }

  .crt-button.primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 30%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in oklch, var(--color-core) 22%, transparent) 40%,
      color-mix(in oklch, white 14%, transparent) 50%,
      color-mix(in oklch, var(--color-flavor) 22%, transparent) 60%,
      transparent
    );
    opacity: 0;
    z-index: 1;
    pointer-events: none;
  }

  .crt-button.primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(
      180deg,
      oklch(from var(--color-support) 0.3 0.07 h) 0%,
      oklch(from var(--color-support) 0.22 0.07 h) 100%
    );
    box-shadow:
      0 6px 20px color-mix(in oklch, var(--color-core) 16%, transparent),
      0 0 14px color-mix(in oklch, var(--color-flavor) 10%, transparent);
  }

  .crt-button.primary:hover::before {
    padding: 2px;
  }

  /* Pointer-localized energy for primary actions. The existing conic ring
     remains the base treatment; this only steers a small bright segment toward
     a precise pointer. Touch and reduced-motion users keep the original button. */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .crt-button.primary[data-pointer-lit='true']::before {
      background:
        radial-gradient(
          circle 4.5rem at var(--btn-pointer-x, 50%) var(--btn-pointer-y, 50%),
          color-mix(in oklch, white 84%, var(--color-highlight) 16%) 0%,
          color-mix(in oklch, var(--color-core) 72%, transparent) 34%,
          transparent 68%
        ),
        conic-gradient(
          from var(--btn-pointer-angle, 135deg),
          var(--color-core),
          var(--color-support),
          var(--color-flavor),
          var(--color-core)
        );
      filter: drop-shadow(0 0 5px color-mix(in oklch, var(--color-core) 30%, transparent));
      will-change: background;
    }
  }

  .crt-button.primary:active {
    transform: translateY(0);
    box-shadow:
      inset 0 1px 4px color-mix(in oklch, black 16%, transparent),
      0 2px 8px color-mix(in oklch, var(--color-core) 12%, transparent);
  }

  .crt-button.primary:active::after {
    animation: crt-signal-pulse 400ms ease-out forwards;
  }

  .crt-button.primary:focus-visible {
    outline: none;
    box-shadow:
      var(--focus-ring),
      0 0 16px color-mix(in oklch, var(--color-core) 16%, transparent);
  }

  .crt-button.primary:disabled {
    cursor: not-allowed;
    opacity: 0.35;
    transform: none;
    pointer-events: none;
    box-shadow: none;
  }

  .crt-button.primary:disabled::before {
    opacity: 0.4;
  }

  .crt-button.primary:disabled::after {
    display: none;
  }