#diana-family-orbit,
    #diana-family-orbit * {
      box-sizing: border-box;
    }

    #diana-family-orbit {
      --df-black: #151515;
      --df-ink: #e3e5fa;
      --df-text: #f7f7fb;
      --df-connector: rgba(21, 21, 21, 0.24);
      --df-orbit: rgba(21, 21, 21, 0.18);
      --df-card-line: rgba(227, 229, 250, 0.48);
      --df-active-line: rgba(227, 229, 250, 0.72);
      --df-card: rgba(24, 24, 24, 0.96);
      --df-pink: #f0d0ff;
      --df-mint: #c8f7df;
      --df-ice: #dce2ff;
      --df-sand: #ece5d7;
      position: relative;
      width: 100%;
      overflow: visible;
      isolation: isolate;
      color: var(--df-text);
      background: transparent;
      font-family: Generalsans, Inter, Arial, sans-serif;
      min-height: clamp(560px, 62vw, 720px);
      padding: clamp(46px, 5vw, 74px) clamp(24px, 4vw, 58px);
    }

    #diana-family-orbit .df-shell {
      position: relative;
      width: min(100%, 1160px);
      min-height: clamp(520px, 58vw, 640px);
      margin: 0 auto;
      overflow: visible;
    }

    #diana-family-orbit .df-stage {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible;
    }

    #diana-family-orbit .df-lines {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: visible;
      opacity: 1;
    }

    #diana-family-orbit .df-lines line {
      stroke: var(--df-connector);
      stroke-width: 1.35;
      stroke-dasharray: 5 8;
      stroke-linecap: round;
      transform-origin: center;
      animation: df-line-pulse 4.8s ease-in-out infinite;
    }

    #diana-family-orbit .df-center {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 5;
      width: clamp(230px, 31vw, 340px);
      aspect-ratio: 1;
      transform: translate(-50%, -44%);
      pointer-events: auto;
    }

    #diana-family-orbit .df-family-card {
      position: absolute;
      inset: 13%;
      display: grid;
      place-items: center;
      border: 1px solid var(--df-card-line);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.13), transparent 34%),
        rgba(21, 21, 21, 0.68);
      box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(18px);
    }

    #diana-family-orbit .df-ring {
      position: absolute;
      inset: 0;
      border: 1px solid var(--df-orbit);
      border-radius: 50%;
      box-shadow:
        0 0 0 1px rgba(21, 21, 21, 0.05),
        0 0 74px rgba(21, 21, 21, 0.08);
      animation: df-ring 18s linear infinite;
    }

    #diana-family-orbit .df-ring::before,
    #diana-family-orbit .df-ring::after {
      position: absolute;
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--df-ink);
      box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.62),
        0 0 20px rgba(74, 80, 134, 0.36);
    }

    #diana-family-orbit .df-ring::before {
      left: 18%;
      top: 8%;
    }

    #diana-family-orbit .df-ring::after {
      right: 13%;
      bottom: 14%;
    }

    #diana-family-orbit .df-center-icon {
      display: block;
      width: min(50%, 130px);
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: contain;
      opacity: 0.96;
      user-select: none;
      filter:
        invert(92%) sepia(12%) saturate(641%) hue-rotate(194deg) brightness(105%)
        drop-shadow(0 18px 26px rgba(0, 0, 0, 0.34));
    }

    #diana-family-orbit .df-bubble {
      position: absolute;
      left: calc(var(--x) * 1%);
      top: calc(var(--y) * 1%);
      z-index: 6;
      display: grid;
      width: clamp(132px, 16vw, 188px);
      aspect-ratio: 1;
      min-height: clamp(112px, 12vw, 150px);
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 50%;
      place-items: center;
      align-content: center;
      gap: 8px;
      background:
        radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.2), transparent 30%),
        var(--bubble-color, var(--df-card));
      color: var(--bubble-text, var(--df-text));
      cursor: pointer;
      pointer-events: auto;
      text-align: center;
      transform: translate(-50%, -50%) translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--scale, 1));
      box-shadow: 0 28px 68px rgba(0, 0, 0, 0.26);
      transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease,
        transform 120ms ease;
      animation: df-float var(--duration, 7s) ease-in-out infinite;
      animation-delay: var(--delay, 0s);
    }

    #diana-family-orbit .df-bubble::after {
      position: absolute;
      inset: 18px;
      content: "";
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: inherit;
      pointer-events: none;
    }

    #diana-family-orbit .df-bubble[data-tone="light"] {
      --bubble-text: #18222b;
      --bubble-icon-color: #34495a;
      border-color: rgba(21, 21, 21, 0.08);
    }

    #diana-family-orbit .df-bubble[data-tone="light"]::after {
      border-color: rgba(21, 21, 21, 0.09);
    }

    #diana-family-orbit .df-bubble.is-active,
    #diana-family-orbit .df-bubble:hover {
      z-index: 8;
      --scale: 1.06;
      border-color: var(--df-active-line);
      box-shadow: 0 34px 86px rgba(0, 0, 0, 0.42);
      filter: saturate(1.05);
    }

    #diana-family-orbit .df-bubble-icon {
      display: block;
      width: 42px;
      height: 42px;
      color: var(--bubble-icon-color, currentColor);
      pointer-events: none;
    }

    #diana-family-orbit .df-bubble-label {
      display: block;
      max-width: 148px;
      position: relative;
      z-index: 1;
      color: inherit;
      font-family: Marcellus, Georgia, "Times New Roman", serif;
      font-size: clamp(18px, 2.1vw, 23px);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }

    @keyframes df-float {
      0%,
      100% {
        margin-top: 0;
      }
      50% {
        margin-top: var(--lift, -16px);
      }
    }

    @keyframes df-ring {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes df-line-pulse {
      0%,
      100% {
        opacity: 0.62;
      }
      50% {
        opacity: 0.92;
      }
    }

    @media (max-width: 860px) {
      #diana-family-orbit {
        min-height: 680px;
        padding: 46px 18px;
      }

      #diana-family-orbit .df-shell {
        min-height: 628px;
      }

      #diana-family-orbit .df-center {
        width: 250px;
        top: 50%;
      }

      #diana-family-orbit .df-bubble {
        width: 132px;
        min-height: 108px;
        padding: 14px;
        gap: 5px;
      }

      #diana-family-orbit .df-bubble-label {
        font-size: 17px;
      }

      #diana-family-orbit .df-bubble-icon {
        width: 31px;
        height: 31px;
      }

    }

    @media (max-width: 560px) {
      #diana-family-orbit {
        min-height: 670px;
        padding: 44px 16px 50px;
      }

      #diana-family-orbit .df-shell {
        min-height: 618px;
      }

      #diana-family-orbit .df-center {
        width: 198px;
        top: 50%;
      }

      #diana-family-orbit .df-bubble {
        width: clamp(94px, 27vw, 108px);
        min-height: 88px;
        padding: 9px;
        gap: 4px;
      }

      #diana-family-orbit .df-bubble-label {
        max-width: 83px;
        font-size: clamp(13px, 3.6vw, 15px);
      }

      #diana-family-orbit .df-bubble-icon {
        width: 24px;
        height: 24px;
      }

      #diana-family-orbit .df-bubble::after {
        inset: 9px;
      }

      #diana-family-orbit .df-lines line {
        stroke-width: 1.2;
        stroke-dasharray: 4 7;
      }

      #diana-family-orbit .df-bubble[data-mobile="top-left"] {
        --x: 20 !important;
        --y: 24 !important;
      }

      #diana-family-orbit .df-bubble[data-mobile="top"] {
        --x: 50 !important;
        --y: 12 !important;
      }

      #diana-family-orbit .df-bubble[data-mobile="top-right"] {
        --x: 80 !important;
        --y: 24 !important;
      }

      #diana-family-orbit .df-bubble[data-mobile="mid-left"] {
        --x: 15 !important;
        --y: 54 !important;
      }

      #diana-family-orbit .df-bubble[data-mobile="mid-right"] {
        --x: 85 !important;
        --y: 54 !important;
      }

      #diana-family-orbit .df-bubble[data-mobile="bottom-left"] {
        --x: 28 !important;
        --y: 82 !important;
      }

      #diana-family-orbit .df-bubble[data-mobile="bottom-right"] {
        --x: 72 !important;
        --y: 82 !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #diana-family-orbit .df-ring,
      #diana-family-orbit .df-lines line,
      #diana-family-orbit .df-bubble {
        animation: none;
      }
    }