:root {
    /* ↓↓↓ Change this one value to resize the whole animation ↓↓↓ */
    --max-size: 480px;
    --ring-line: rgba(116, 65, 230, 0.22);
    --label-color: #5a3ecb;
  }

  /* The single isolated div everything lives in */
  .orbit-wrap {
    max-width: var(--max-size);
    flex: 1 1 auto;
    min-width: 320px;
    aspect-ratio: 1 / 1;
    position: relative;
    container-type: inline-size; /* children scale off THIS div, not the viewport */
  }

  /* ---------- concentric circles (static, well inside the wrap so labels sit outside them) ---------- */
  .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid var(--ring-line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  /* ---------- connecting lines ---------- */
  .lines-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .lines-svg line {
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
  }

  /* ---------- orbiting data points ---------- */
  .dot {
    position: absolute;
    width: var(--dot-size, 2.4cqw);
    height: var(--dot-size, 2.4cqw);
    border-radius: 50%;
    background: var(--dot-color, var(--primary));
    opacity: 0;
    will-change: transform, opacity, left, top;
  }

  /* ---------- 4D design-process coordinates, outside the outer ring ---------- */
  .phase {
    position: absolute;
    font-size: clamp(9px, 3.2cqw, 15px);
    letter-spacing: 0.02em;
    color: var(--label-color);
    white-space: nowrap;
  }
  .phase-understand { top: 5%;   left: 50%; transform: translate(-50%, -50%); }
  .phase-define     { top: 95%;  left: 50%; transform: translate(-50%, -50%); }
  .phase-validate   { top: 50%;  left: 5%;  transform: translate(-50%, -50%) rotate(-90deg); }
  .phase-discover   { top: 50%;  left: 95%; transform: translate(-50%, -50%) rotate(90deg); }

  @media (prefers-reduced-motion: reduce) {
    .dot { transition: none; }
  }