.galaxy-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.galaxy-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.shape-blur {
  position: relative;
  width: 100%;
  height: 100%;
}

.shape-blur__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.shape-blur__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.elastic-mesh {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.elastic-mesh-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.pixel-swap {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  outline: none;
}

.pixel-swap:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.pixel-swap__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pixel-swap__layer[data-visible='false'] {
  visibility: hidden;
}

.depth-text {
  display: inline-block;
  perspective: var(--depth-text-perspective);
  perspective-origin: 50% 48%;
  isolation: isolate;
}

.depth-text__stage {
  position: relative;
  display: inline-grid;
  place-items: center;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}

.depth-text__layer,
.depth-text__face {
  grid-area: 1 / 1;
  display: inline-block;
  font-size: var(--depth-text-font-size);
  font-weight: var(--depth-text-font-weight);
  line-height: 0.86;
  letter-spacing: -0.065em;
  white-space: nowrap;
  user-select: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}

.depth-text__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.depth-text__layer--back {
  text-shadow: var(--depth-text-shadow);
}

.depth-text--outline .depth-text__layer {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1px, 0.012em) currentColor;
}

.depth-text__face {
  position: relative;
  z-index: 1;
  color: var(--depth-text-face-color);
  text-shadow: var(--depth-text-face-shadow);
  transform: translateZ(0.6px);
}

@media (hover: hover) and (pointer: fine) {
  .depth-text {
    cursor: default;
  }
}

@media (prefers-reduced-motion: reduce) {
  .depth-text__stage {
    will-change: auto;
  }
}

.glass-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.26s ease-out;
}

.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}

.glass-surface__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

.glass-surface--svg {
  background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
  box-shadow:
    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%))
      inset,
    0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%))
      inset,
    0px 4px 16px rgba(17, 17, 26, 0.05),
    0px 8px 24px rgba(17, 17, 26, 0.05),
    0px 16px 56px rgba(17, 17, 26, 0.05),
    0px 4px 16px rgba(17, 17, 26, 0.05) inset,
    0px 8px 24px rgba(17, 17, 26, 0.05) inset,
    0px 16px 56px rgba(17, 17, 26, 0.05) inset;
}

.glass-surface--webgl {
  box-shadow:
    0px 4px 16px rgba(17, 17, 26, 0.05),
    0px 8px 24px rgba(17, 17, 26, 0.05),
    0px 16px 56px rgba(17, 17, 26, 0.05);
}

.glass-surface__canvas,
.glass-surface__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

.glass-surface__frame {
  background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
  box-shadow:
    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%))
      inset,
    0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%))
      inset,
    0px 4px 16px rgba(17, 17, 26, 0.05) inset,
    0px 8px 24px rgba(17, 17, 26, 0.05) inset,
    0px 16px 56px rgba(17, 17, 26, 0.05) inset;
}

.glass-surface--fallback {
  background: light-dark(
    hsl(0 0% 100% / calc(0.12 + var(--glass-frost, 0) * 0.5)),
    hsl(0 0% 100% / calc(0.04 + var(--glass-frost, 0) * 0.3))
  );
  -webkit-backdrop-filter: blur(12px) saturate(calc(var(--glass-saturation, 1) * 1.4)) brightness(1.04);
  backdrop-filter: blur(12px) saturate(calc(var(--glass-saturation, 1) * 1.4)) brightness(1.04);
  box-shadow:
    inset 0 1px 0 0 light-dark(hsl(0 0% 100% / 0.85), hsl(0 0% 100% / 0.3)),
    inset 0 -1px 0 0 light-dark(hsl(0 0% 100% / 0.35), hsl(0 0% 100% / 0.08)),
    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 88%), color-mix(in oklch, white, transparent 72%))
      inset,
    0 0 12px 3px light-dark(color-mix(in oklch, white, transparent 72%), color-mix(in oklch, white, transparent 90%))
      inset,
    0px 4px 16px rgba(17, 17, 26, 0.06),
    0px 8px 24px rgba(17, 17, 26, 0.06),
    0px 16px 56px rgba(17, 17, 26, 0.06);
}

.glass-surface__sheen,
.glass-surface__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.glass-surface__sheen {
  background: linear-gradient(
    135deg,
    light-dark(hsl(0 0% 100% / 0.42), hsl(0 0% 100% / 0.14)) 0%,
    transparent 42%,
    transparent 64%,
    light-dark(hsl(0 0% 100% / 0.18), hsl(0 0% 100% / 0.05)) 100%
  );
}

.glass-surface__rim {
  padding: 3px;
  background: linear-gradient(
    150deg,
    light-dark(hsl(0 0% 100% / 0.7), hsl(0 0% 100% / 0.34)),
    light-dark(hsl(0 0% 100% / 0.1), hsl(0 0% 100% / 0.03)) 45%,
    light-dark(hsl(0 0% 100% / 0.08), hsl(0 0% 100% / 0.02)) 60%,
    light-dark(hsl(0 0% 100% / 0.42), hsl(0 0% 100% / 0.18))
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

.glass-surface__line,
.glass-surface__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.glass-surface--svg .glass-surface__line,
.glass-surface--webgl .glass-surface__line {
  background: light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%));
}

.glass-surface--svg .glass-surface__glow,
.glass-surface--webgl .glass-surface__glow {
  background: light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%));
}

.glass-surface--fallback .glass-surface__line {
  background: light-dark(color-mix(in oklch, black, transparent 88%), color-mix(in oklch, white, transparent 72%));
}

.glass-surface--fallback .glass-surface__glow {
  background: light-dark(color-mix(in oklch, white, transparent 72%), color-mix(in oklch, white, transparent 90%));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface--fallback {
    background: light-dark(hsl(0 0% 100% / 0.72), hsl(0 0% 12% / 0.72));
  }
}

.glass-surface:focus-visible {
  outline: 2px solid light-dark(#007aff, #0a84ff);
  outline-offset: 2px;
}

.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 28px;
  --glow-padding: 40px;
  --cone-spread: 25;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120F17);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.border-glow-card--light {
  border-color: rgb(24 24 27 / 12%);
  box-shadow:
    rgb(24 24 27 / 4%) 0 1px 2px,
    rgb(24 24 27 / 5%) 0 8px 24px;
}

.border-glow-card--light::after,
.border-glow-card--light > .edge-light {
  mix-blend-mode: normal;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  z-index: 1;
}


/* ChromaGrid (React Bits), VECTAAP purple theme: dark violet tiles, purple duotone at rest, purple accents */
.chroma-grid {
  --chroma-frame-edge: rgba(220,203,255,.1); --chroma-tile: linear-gradient(180deg, #1c1726 0%, #110e17 100%); --chroma-tile-edge: rgba(220,203,255,.1); --chroma-tile-highlight: rgba(255,255,255,.08);
  --chroma-tile-shadow: 0 10px 30px -12px rgba(0,0,0,.8); --chroma-media-edge: rgba(220,203,255,.08); --chroma-well: rgba(169,125,255,.08); --chroma-ink: #f3eff9; --chroma-muted: #a49cb4;
  --chroma-hover: brightness(1.08); --chroma-press: brightness(.9);
}
.chroma-grid { --chroma-x: -9999px; --chroma-y: -9999px; --chroma-power: 0; position: relative; width: 100%; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.chroma-grid.has-frame {
  padding: 10px;
  border-radius: calc(var(--chroma-radius) + 10px);
  background: var(--chroma-frame);
  box-shadow: var(--chroma-frame-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}

.chroma-frame-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--chroma-frame-edge),
    inset 0 1px 0 var(--chroma-frame-highlight);
  pointer-events: none;
}

.chroma-grid-inner {
  display: grid;
  gap: var(--chroma-gap);
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      min(
        100%,
        max(var(--chroma-min), calc((100% - (var(--chroma-cols) - 1) * var(--chroma-gap)) / var(--chroma-cols)))
      ),
      1fr
    )
  );
}

.chroma-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  box-sizing: border-box;
  border-radius: var(--chroma-radius);
  background: var(--chroma-tile);
  box-shadow: var(--chroma-tile-shadow);
  color: var(--chroma-ink);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: filter 0.25s ease;
}

.chroma-card:hover {
  filter: var(--chroma-hover);
}

a.chroma-card:active {
  filter: var(--chroma-press);
}

a.chroma-card:focus-visible {
  outline: 2px solid var(--chroma-ink);
  outline-offset: 2px;
}

.chroma-wash,
.chroma-color,
.chroma-card-glow {
  -webkit-mask-image: radial-gradient(
    circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox, 0px))
      calc(var(--chroma-y) - var(--chroma-oy, 0px)),
    var(--chroma-stops)
  );
  mask-image: radial-gradient(
    circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox, 0px))
      calc(var(--chroma-y) - var(--chroma-oy, 0px)),
    var(--chroma-stops)
  );
}

.chroma-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(130% 70% at 50% 100%, var(--chroma-accent), transparent 72%);
  opacity: calc(var(--chroma-glow) * var(--chroma-power) * 0.45);
}

.chroma-media {
  position: relative;
  z-index: 1;
  aspect-ratio: var(--chroma-ratio);
  border-radius: max(0px, calc(var(--chroma-radius) - 8px));
  overflow: hidden;
  background: var(--chroma-well);
}

.chroma-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.chroma-mono {
  filter: url(#gmap) brightness(calc(1 - var(--chroma-dim)));
}

.chroma-color {
  opacity: var(--chroma-power);
}

.chroma-media-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--chroma-media-edge);
  pointer-events: none;
}

.chroma-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 2px 6px 4px;
}

.chroma-title {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chroma-subtitle {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  color: var(--chroma-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chroma-card-rim,
.chroma-card-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
}

.chroma-card-rim {
  box-shadow:
    inset 0 0 0 1px var(--chroma-tile-edge),
    inset 0 1px 0 var(--chroma-tile-highlight);
}

.chroma-card-glow {
  box-shadow:
    inset 0 0 0 1px var(--chroma-accent),
    inset 0 0 16px -8px var(--chroma-accent);
  opacity: calc(var(--chroma-border) * var(--chroma-power));
}

.chroma-grid[data-reveal='card'] .chroma-wash,
.chroma-grid[data-reveal='card'] .chroma-color,
.chroma-grid[data-reveal='card'] .chroma-card-glow {
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 0;
  transition: opacity var(--chroma-fade) ease;
}

.chroma-grid[data-reveal='card'] .chroma-card:hover .chroma-wash {
  opacity: calc(var(--chroma-glow) * 0.45);
  transition-duration: 0.3s;
}

.chroma-grid[data-reveal='card'] .chroma-card:hover .chroma-color {
  opacity: 1;
  transition-duration: 0.3s;
}

.chroma-grid[data-reveal='card'] .chroma-card:hover .chroma-card-glow {
  opacity: var(--chroma-border);
  transition-duration: 0.3s;
}