:root[data-theme="blue-nebula"] {
  --background: #020714;
  --foreground: #eff6ff;
  --primary: #f8f8ff;
  --muted: #a3b6d5;
  --border: rgba(72, 38, 151, .48);
  --cyan: #74d5e7;
  --copper: #9d8cff;
  color-scheme: dark;
}

html[data-theme="blue-nebula"],
html[data-theme="blue-nebula"] body {
  background:
    radial-gradient(ellipse at 78% 20%, rgba(84, 71, 210, .34), transparent 40%),
    radial-gradient(ellipse at 48% 76%, rgba(7, 120, 210, .2), transparent 40%),
    linear-gradient(110deg, #020714 0%, #020714 35%, #071b45 78%, #020714 100%);
}

html[data-theme="blue-nebula"] body {
  color: var(--foreground);
}

html[data-theme="blue-nebula"] #top {
  position: relative;
  z-index: 1;
}

.blue-nebula {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html[data-theme="blue-nebula"] .site-header {
  background: linear-gradient(rgba(2, 7, 20, .92), rgba(2, 7, 20, .24));
  border-bottom-color: rgba(157, 140, 255, .22);
}

html[data-theme="blue-nebula"] .brand-mark {
  border-color: rgba(157, 140, 255, .62);
  box-shadow: 0 0 16px rgba(72, 38, 151, .34);
}

html[data-theme="blue-nebula"] nav a:hover,
html[data-theme="blue-nebula"] nav a:focus-visible {
  color: #fff;
}

html[data-theme="blue-nebula"] .hero-art,
html[data-theme="blue-nebula"] .contact-art {
  display: none;
}

html[data-theme="blue-nebula"] .hero-shade {
  background:
    linear-gradient(90deg, rgba(2, 7, 20, .94) 0%, rgba(2, 7, 20, .72) 40%, rgba(2, 7, 20, .2) 78%),
    linear-gradient(rgba(2, 7, 20, 0) 58%, rgba(2, 7, 20, .92) 100%),
    radial-gradient(circle at 70% 42%, transparent 0%, rgba(2, 7, 20, .18) 44%, rgba(2, 7, 20, .72) 100%);
}

html[data-theme="blue-nebula"] .hero-grid {
  opacity: .12;
  background-image:
    linear-gradient(rgba(116, 213, 231, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 213, 231, .2) 1px, transparent 1px);
  background-size: 8rem 8rem;
}

html[data-theme="blue-nebula"] .eyebrow,
html[data-theme="blue-nebula"] .section-index,
html[data-theme="blue-nebula"] .hero-meta > p {
  color: #b9c5ff;
}

html[data-theme="blue-nebula"] h1 span {
  color: rgba(248, 248, 255, .62);
}

html[data-theme="blue-nebula"] .hero-lede,
html[data-theme="blue-nebula"] .hero-meta li {
  color: rgba(239, 246, 255, .82);
}

html[data-theme="blue-nebula"] .button-primary {
  color: #080616;
  background: #f8f8ff;
  border-color: #f8f8ff;
  box-shadow: 0 0 22px rgba(116, 213, 231, .18);
}

html[data-theme="blue-nebula"] .button-quiet {
  background: rgba(3, 10, 27, .48);
  border-color: rgba(157, 140, 255, .42);
}

html[data-theme="blue-nebula"] .button-quiet:hover {
  background: rgba(72, 38, 151, .24);
  border-color: rgba(157, 140, 255, .82);
}

html[data-theme="blue-nebula"] .hero-meta {
  border-color: rgba(157, 140, 255, .48);
}

html[data-theme="blue-nebula"] .experience-section,
html[data-theme="blue-nebula"] .work-section,
html[data-theme="blue-nebula"] .values-section,
html[data-theme="blue-nebula"] .projects-section {
  background: rgba(2, 7, 20, .66);
  backdrop-filter: blur(4px);
}

html[data-theme="blue-nebula"] .experience-section {
  background:
    radial-gradient(circle at 88% 48%, rgba(116, 213, 231, .12), transparent 27%),
    rgba(3, 10, 27, .72);
}

html[data-theme="blue-nebula"] .experience-primary,
html[data-theme="blue-nebula"] .section-heading h2,
html[data-theme="blue-nebula"] .values-intro h2,
html[data-theme="blue-nebula"] .projects-intro h2,
html[data-theme="blue-nebula"] .contact-content h2,
html[data-theme="blue-nebula"] .values-closing,
html[data-theme="blue-nebula"] .project-body h3 {
  text-shadow: 0 0 28px rgba(72, 38, 151, .18);
}

html[data-theme="blue-nebula"] .experience-secondary {
  border-left-color: rgba(157, 140, 255, .72);
}

html[data-theme="blue-nebula"] .capabilities-grid,
html[data-theme="blue-nebula"] .values-grid,
html[data-theme="blue-nebula"] .project-list {
  border-color: rgba(157, 140, 255, .34);
}

html[data-theme="blue-nebula"] .capability-card,
html[data-theme="blue-nebula"] .value-card,
html[data-theme="blue-nebula"] .project-card {
  background: rgba(3, 10, 27, .56);
  border-color: rgba(157, 140, 255, .34);
  backdrop-filter: blur(9px);
}

html[data-theme="blue-nebula"] .capability-card:hover,
html[data-theme="blue-nebula"] .value-card:hover,
html[data-theme="blue-nebula"] .project-card:hover {
  background: rgba(72, 38, 151, .2);
}

html[data-theme="blue-nebula"] .card-topline,
html[data-theme="blue-nebula"] .project-id span {
  color: #74d5e7;
}

html[data-theme="blue-nebula"] .value-card > span,
html[data-theme="blue-nebula"] .project-name {
  color: #9d8cff;
}

html[data-theme="blue-nebula"] .project-copper::after,
html[data-theme="blue-nebula"] .project-cyan::after,
html[data-theme="blue-nebula"] .project-white::after,
html[data-theme="blue-nebula"] .project-smoke::after {
  background: linear-gradient(90deg, #482697, #74d5e7, #9d8cff);
}

html[data-theme="blue-nebula"] .tag-list li {
  border-color: rgba(157, 140, 255, .42);
  background: rgba(2, 7, 20, .24);
}

html[data-theme="blue-nebula"] .project-link,
html[data-theme="blue-nebula"] .contact-link {
  border-color: rgba(157, 140, 255, .54);
}

html[data-theme="blue-nebula"] .contact-overlay {
  background:
    linear-gradient(90deg, rgba(2, 7, 20, .94) 0%, rgba(2, 7, 20, .64) 55%, rgba(2, 7, 20, .2) 100%),
    linear-gradient(rgba(2, 7, 20, 0) 42%, rgba(2, 7, 20, .96) 100%);
}

html[data-theme="blue-nebula"] footer {
  background: rgba(2, 7, 20, .72);
  border-top-color: rgba(157, 140, 255, .34);
}

@media (max-width: 760px) {
  html[data-theme="blue-nebula"] .hero-shade {
    background:
      linear-gradient(90deg, rgba(2, 7, 20, .94) 0%, rgba(2, 7, 20, .72) 72%),
      linear-gradient(rgba(2, 7, 20, 0) 42%, rgba(2, 7, 20, .96) 100%);
  }

  html[data-theme="blue-nebula"] .capability-card,
  html[data-theme="blue-nebula"] .value-card,
  html[data-theme="blue-nebula"] .project-card {
    backdrop-filter: blur(7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blue-nebula {
    opacity: .82;
  }
}