[x-cloak] { display: none !important; }

    :root {
      --background: 250 250 250;
      --foreground: 10 10 10;
      --surface: 255 255 255;
      --border: 229 229 229;
      --muted: 82 82 91;
      --accent: 204 66 58;
      --accent-foreground: 255 255 255;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --background: 10 10 10;
        --foreground: 250 250 250;
        --surface: 19 19 19;
        --border: 38 38 43;
        --muted: 161 161 170;
        --accent: 244 134 123;
        --accent-foreground: 10 10 10;
      }
    }

    body {
      background: rgb(var(--background));
      color: rgb(var(--foreground));
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    @keyframes hero-node-in {
      from { opacity: 0; transform: scale(0); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes hero-line-in {
      from { stroke-dashoffset: var(--length); opacity: 0; }
      to { stroke-dashoffset: 0; opacity: 1; }
    }

    @keyframes hero-label-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .hero-node {
      transform-box: fill-box;
      transform-origin: center;
      animation: hero-node-in 0.4s ease-out backwards;
    }

    .hero-line {
      animation: hero-line-in 1s ease-out backwards;
    }

    .hero-label {
      animation: hero-label-in 0.4s ease-out backwards;
    }

    @keyframes hero-hub-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }

    .hero-hub {
      animation: hero-node-in 0.4s ease-out backwards, hero-hub-pulse 3s ease-in-out 1.5s infinite;
    }

    .hero-pillar {
      cursor: pointer;
    }

    .hero-pillar-dot {
      transition: color 0.2s ease, r 0.2s ease;
    }

    .hero-pillar-label {
      transition: color 0.2s ease;
    }

    .hero-pillar:hover .hero-pillar-dot {
      color: rgb(var(--accent));
      r: 5.5;
    }

    .hero-pillar:hover .hero-pillar-label {
      color: rgb(var(--accent));
    }

    nav[aria-label="Primary"] a {
      position: relative;
    }

    nav[aria-label="Primary"] a.nav-active::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -8px;
      transform: translateX(-50%);
      width: 16px;
      height: 2px;
      border-radius: 9999px;
      background: rgb(var(--accent));
    }

    /* Mobile nav links are full-width rows, not text-sized like the desktop
       nav, so a centered underline floats away from the text. Align it to
       the text's start position instead. */
    #mobile-nav a.nav-active::after {
      left: 12px;
      bottom: 6px;
      transform: none;
    }