:root {
  --sidebar-glow-rgb: 0, 109, 106;
  --sidebar-glow-fade-rgb: 0, 47, 55;
  --sidebar-shell-glow-rgb: 0, 135, 133;
  --sidebar-shell-secondary-rgb: 0, 81, 91;
  --sidebar-bg-top: #01161c;
  --sidebar-bg-middle: #011015;
  --sidebar-bg-bottom: #010f15;
  --sidebar-highlight-rgb: var(--route-brand-green-rgb);
  --sidebar-vertical-gradient: linear-gradient(
    180deg,
    var(--sidebar-bg-top) 0%,
    var(--sidebar-bg-middle) 28%,
    var(--sidebar-bg-bottom) 100%
  );
  --sidebar-menu-active-background: linear-gradient(
    90deg,
    rgba(var(--sidebar-glow-rgb), .6) 0%,
    rgba(var(--sidebar-glow-rgb), .52) 28%,
    rgba(var(--sidebar-glow-fade-rgb), .72) 55%,
    rgba(1, 15, 22, 0) 82%
  );
  --sidebar-submenu-active-background:
    radial-gradient(
      ellipse 112% 75% at 0 18%,
      rgba(0, 246, 226, .2) 0%,
      rgba(0, 246, 226, .13) 35%,
      rgba(0, 246, 226, .05) 65%,
      transparent 100%
    ),
    linear-gradient(
      112deg,
      rgba(110, 246, 226, .04) 0 18%,
      transparent 18% 58%,
      rgba(0, 0, 0, .075) 58% 70%,
      transparent 70%
    ),
    linear-gradient(
      90deg,
      rgba(var(--sidebar-glow-rgb), .48) 0%,
      rgba(0, 63, 64, .67) 58%,
      rgba(0, 61, 61, .76) 100%
    );
  --sidebar-city-active-background:
    radial-gradient(
      ellipse 70% 78% at 40% 0,
      rgba(0, 246, 226, .205) 0%,
      rgba(0, 246, 226, .12) 35%,
      rgba(0, 246, 226, .04) 65%,
      transparent 100%
    ),
    linear-gradient(
      116deg,
      transparent 0 22%,
      rgba(105, 240, 221, .1) 22% 36%,
      rgba(0, 0, 0, .08) 36% 49%,
      rgba(80, 226, 208, .035) 49% 68%,
      rgba(80, 226, 208, .035) 68% 82%,
      transparent 82%
    ),
    linear-gradient(
      90deg,
      rgba(var(--sidebar-glow-rgb), .45) 0%,
      rgba(0, 67, 65, .76) 100%
    );
  --sidebar-glass-active-shadow:
    inset 0 1px 0 rgba(109, 239, 220, .2),
    inset 0 -1px 0 rgba(0, 0, 0, .16);
  --route-dark-shell-background:
    radial-gradient(
      ellipse 69% 19% at 15% 2%,
      rgba(var(--sidebar-shell-glow-rgb), .48) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 110% 26% at -8% 18%,
      rgba(var(--sidebar-shell-secondary-rgb), .31) 0%,
      transparent 100%
    ),
    var(--sidebar-vertical-gradient);
  /* Mirror the sidebar light across the workbar's end and the right dock.
     Absolute radii keep one light field when the dock expands or collapses. */
  --route-right-shell-light-width: calc(
    2 * var(--sidebar-expanded-width, 196px) + var(--workforce-dock-width, 340px)
  );
  --route-right-shell-background:
    radial-gradient(
      ellipse calc(var(--route-right-shell-light-width) * .69) calc(var(--route-interface-viewport-height) * .19)
      at calc(100% - var(--route-right-shell-light-width) * .15) calc(var(--route-interface-viewport-height) * .02),
      rgba(var(--sidebar-shell-glow-rgb), .48) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse calc(var(--route-right-shell-light-width) * 1.1) calc(var(--route-interface-viewport-height) * .26)
      at calc(100% + var(--route-right-shell-light-width) * .08) calc(var(--route-interface-viewport-height) * .18),
      rgba(var(--sidebar-shell-secondary-rgb), .31) 0%,
      transparent 100%
    ),
    var(--sidebar-vertical-gradient);
}