/*
  Shared tokens for every code component.

  A site-level CSS *class* never reaches inside a shadow root, but a site-level
  *variable* does (CLAUDE.md section 2) - so this file is where the components
  meet the site's own design system. Each --na-* name below resolves to the real
  Webflow variable first and to the value from the Figma file only as a fallback,
  which means retuning a colour in the Designer moves every block with it, while
  the components still render correctly in the local gallery, in Figma-faithful
  isolation, and on any site that does not define these.

  The Webflow names are the ones the Designer emits for the "Semantic Colors"
  and "Base" collections of the Nebius Academy site; every fallback here was
  checked against the live value and matches it.
*/
/* Both selectors on purpose: the CLI rewrites `:root` to `:host` when it builds
   the shadow-DOM stylesheet (section 2), but the local gallery inlines this file
   as-is, where `:root` matches nothing and every token would silently fall back.
   Naming `:host` as well makes the gallery behave like the real thing. */
:host,
:host {
  --container-max-width: 1280px;

  /* Type. Webflow holds no font-family variables - the faces are set in the
     site's typography settings - so these are ours, with the project's own
     "Inter 28" first and metric-compatible Arial behind it. */
  --na-font-sans: "Inter 28", Arial, sans-serif;
  --na-font-display: "Inter Tight", "Inter 28", Arial, sans-serif;
  --na-font-serif: "Tiempos Text", Georgia, "Times New Roman", serif;

  /* Text */
  --na-content-primary-bold: var(--_semantic-colors---content--primary-bold, #14070f);
  --na-content-primary: var(--_semantic-colors---content--primary, rgba(20, 7, 15, 0.9));
  --na-content-secondary: var(--_semantic-colors---content--secondary, rgba(20, 7, 15, 0.7));
  --na-content-tertiary: var(--_semantic-colors---content--tertiary, rgba(20, 7, 15, 0.5));
  --na-content-inverse-primary-bold: var(--_semantic-colors---content--inverse-primary-bold, #f9f8f6);
  --na-content-inverse-primary: var(--_semantic-colors---content--inverse-primary, rgba(249, 248, 246, 0.9));
  --na-content-inverse-secondary: var(--_semantic-colors---content--inverse-secondary, rgba(249, 248, 246, 0.7));
  --na-content-inverse-tertiary: var(--_semantic-colors---content--inverse-tertiary, rgba(249, 248, 246, 0.5));

  /* Surfaces */
  --na-background-primary: var(--_semantic-colors---background--primary, #f3efe8);
  --na-background-secondary: var(--_semantic-colors---background--secondary, #f9f8f6);
  --na-background-inverse: var(--_semantic-colors---background--inverse, rgba(20, 7, 15, 0.95));
  --na-background-primary-hover-subtle: var(--_semantic-colors---background--primary-hover-subtle, #eae6dc);

  /* Borders */
  --na-border-primary: var(--_semantic-colors---border-stroke--black--primary, rgba(20, 7, 15, 0.2));
  --na-border-secondary: var(--_semantic-colors---border-stroke--black--secondary, rgba(20, 7, 15, 0.1));
  --na-border-inverse-primary: var(--_semantic-colors---border-stroke--white--primary, rgba(249, 248, 246, 0.7));
  --na-color-black-alpha-20-a: var(--black--alpha--20-a, rgba(20, 7, 15, 0.2));

  /* No counterpart in the site's collections, so these stay ours - but they are
     still variables, so a page can retune them.

     Two of them deliberately do NOT use the similarly named Webflow token:
     Background/primary-hover is #ab9c8f there, and primary-hover-subtle is the
     opaque #eae6dc. Both are meant for beige cards. Over the header's glass bar
     a hover has to be a transparent wash or it reads as a solid chip, which is
     what the two "ghost" names below are for. */
  --na-background-primary-subtle: #f3efe8;
  --na-background-white: #fff;
  --na-background-glass: rgba(255, 255, 255, 0.5);
  --na-background-primary-hover: rgba(20, 7, 15, 0.06);
  --na-background-ghost-hover: rgba(20, 7, 15, 0.06);
  --na-background-ghost-hover-subtle: rgba(20, 7, 15, 0.04);
  --na-color-white-alpha-70-a: rgba(255, 255, 255, 0.7);
  --na-color-white-alpha-50-a: rgba(255, 255, 255, 0.5);
  --na-color-white-alpha-40-a: rgba(255, 255, 255, 0.4);

  /* The Problem section's "Tint" stat card (Figma node 21245-5945): a solid
     lavender card with a black-fading-to-lavender figure. No counterpart in
     the site's collections, so this stays ours the way the block above does. */
  --na-background-tint-purple: #d3d3fa;
  --na-gradient-stat-fade: linear-gradient(90deg, rgba(20, 7, 15, 0.95) 0%, rgba(20, 7, 15, 0.95) 35%, rgba(211, 211, 250, 0.9) 100%);

  /* The gradient every *emphasis* italic run in a heading is clipped to
     (Figma node 21045-20, the Hero heading). Webflow has no gradient
     variables to bridge to (same reasoning as the fonts above), so this one
     is ours outright - defined once here and referenced by every section's
     .emphasis rule instead of repeating the five stops seven times. */
  --na-gradient-emphasis: linear-gradient(213deg, #b5a9ea 18%, #8873de 54%, #2e2e7d 75%, #43425b 95%);
}

/* The divider above the row, and the space it needs.

   Every Menu Link draws one, including the first - there is no way to select
   "the first slotted child" from the panel's own stylesheet, because a slot's
   assigned node is the single unclassed wrapper Webflow feeds it and its
   children are out of reach of ::slotted (CLAUDE.md section 3b). The panel
   zeroes both custom properties on whichever Menu Link element it finds first
   (see MenuPanel.tsx's slot-grid placement effect), which is why the border
   itself is a variable width and not a flat 1px - a variable set to 0px on
   the host element inherits into this shadow root and removes the line, same
   as `--menu-link-space` already did for the padding above it. Both default
   to the values a Menu Link standing on its own, outside any panel, needs.

   The grid placement and the bleed below are the same trick for a different
   reason: the `<code-island>` Webflow wraps this component in is *always*
   `display: contents` (CLAUDE.md section 1), on every instance, not just
   while unsized - there is never a host box to put `grid-column` or a
   negative margin on from outside. This div is the first real box behind it,
   so from 1280px up it is what actually lands in the panel's items grid
   (CLAUDE.md section 16/17), placed by the same two custom properties the
   panel's effect sets directly on the host element. */
.HZ2QUPmlpGSNts_LP21a {
  padding-top: var(--menu-link-space, 16px);
  border-top: var(--menu-link-divider-width, 1px) solid var(--na-border-secondary, rgba(20, 7, 15, 0.1));
  grid-column: var(--menu-link-grid-column, auto);
  grid-row: var(--menu-link-grid-row, auto);
  margin-inline: var(--menu-link-row-bleed, 0);
  min-width: 0;
}

/* One row of a menu link list, shared by the two panels' own text-driven lists
   and by the `Menu Link` component a designer drops into a Links slot. The
   three used to carry their own copy of these rules; one row looks the same
   wherever it is, so it is defined once and the *spacing between* rows - which
   genuinely differs per panel - stays with each panel instead.

   A shared .module.css is safe here for the same reason NoiseOverlay's is: the
   bundler folds an imported stylesheet into every chunk that imports it, and
   CSS Module names are per-file, so nothing collides. */

.NZJhwBXR2TC751A52xKd {
  display: block;
  padding: var(--na-spacing-8, 8px);
  border-radius: var(--na-border-radius-8, 8px);
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease-out;
}

a.NZJhwBXR2TC751A52xKd:hover {
  background: var(--na-background-ghost-hover-subtle, rgba(20, 7, 15, 0.04));
}

.X1nxbB1azdbknBLLGSmA {
  display: flex;
  align-items: center;
  gap: var(--na-spacing-8, 8px);
  min-width: 0;
}

.BeuSX5V5H8XC_VUkqsMr {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--na-content-primary-bold, #14070f);
}

.Hc7nHAJhF14ObP8hlTzg {
  flex: none;
  padding: var(--na-spacing-4, 4px) var(--na-spacing-12, 12px);
  border-radius: 6px;
  background: linear-gradient(90deg, #18227c 0%, #514eba 37%, #af6ed7 75%, #f3cff2 100%);
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-size: 13px;
  line-height: 14px;
  letter-spacing: -0.2px;
  color: var(--na-content-inverse-primary-bold, #f9f8f6);
  white-space: nowrap;
}

.RpgXiNbspYslT2DUb7Jg {
  display: block;
  margin-top: 4px;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--na-content-tertiary, rgba(20, 7, 15, 0.5));
}