:root {
  color-scheme: light;
  --site-bg: #ffffff;
  --site-surface: #ffffff;
  --site-surface-soft: #f4f8f8;
  --site-surface-accent: #eaf7f8;
  --site-text: #102127;
  --site-muted: #52646b;
  --site-border: #dbe4e6;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --site-bg: #07171c;
  --site-surface: #0d2228;
  --site-surface-soft: #10282f;
  --site-surface-accent: #10323a;
  --site-text: #ecf7f8;
  --site-muted: #a7bcc1;
  --site-border: #294148;
}

body {
  background-color: var(--site-bg);
  color: var(--site-text);
  transition: background-color 180ms ease, color 180ms ease;
}

.site-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  margin-right: 0.75rem;
  padding: 0.25rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 6px 18px rgba(15, 35, 42, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-controls--floating {
  position: fixed;
  z-index: 60;
  top: 1rem;
  right: 1rem;
  margin: 0;
}

.site-control {
  display: inline-flex;
  min-width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #43565d;
  cursor: pointer;
  font: 600 0.75rem/1 'DM Sans', 'Noto Sans SC', sans-serif;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.site-control:hover {
  background: #eaf7f8;
  color: #0a6071;
}

.site-control:active {
  transform: scale(0.94);
}

.site-control:focus-visible {
  outline: 2px solid #24d7f2;
  outline-offset: 2px;
}

.site-control--language {
  min-width: 2.6rem;
  padding-inline: 0.55rem;
}

.site-control svg {
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

html[data-theme="dark"] .site-controls {
  border-color: rgba(103, 137, 146, 0.42);
  background: rgba(9, 29, 35, 0.82);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .site-control {
  color: #c6d8dc;
}

html[data-theme="dark"] .site-control:hover {
  background: #17373f;
  color: #5de5f5;
}

.mobile-menu-toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.74);
  color: #43565d;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.mobile-menu-toggle:hover {
  background: #eaf7f8;
  color: #0a6071;
}

.mobile-menu-toggle:active {
  transform: scale(0.94);
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid #24d7f2;
  outline-offset: 2px;
}

.mobile-menu-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

.mobile-menu-icon-close,
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon-open {
  display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon-close {
  display: block;
}

.site-nav--dark-surface .mobile-menu-toggle,
html[data-theme="dark"] .mobile-menu-toggle {
  border-color: rgba(103, 137, 146, 0.5);
  background: rgba(9, 29, 35, 0.82);
  color: #d8e8eb;
}

.site-nav--dark-surface .mobile-menu-toggle:hover,
html[data-theme="dark"] .mobile-menu-toggle:hover {
  background: #17373f;
  color: #5de5f5;
}

.mobile-nav-panel {
  position: absolute;
  inset: 100% 0 auto;
  border-bottom: 1px solid var(--site-border);
  background: var(--site-surface);
  box-shadow: 0 18px 40px rgba(15, 35, 42, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.mobile-nav-panel[hidden] {
  display: none;
}

.mobile-nav-content {
  display: grid;
  gap: 0.35rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem 1.25rem;
}

.mobile-nav-link {
  display: flex;
  min-height: 3rem;
  align-items: center;
  border-radius: 0.9rem;
  padding: 0.65rem 0.9rem;
  color: var(--site-text);
  font: 600 0.95rem/1.4 'DM Sans', 'Noto Sans SC', sans-serif;
}

.mobile-nav-link:hover,
.mobile-nav-link[aria-current="page"] {
  background: var(--site-surface-accent);
  color: #0a6071;
}

html[data-theme="dark"] .mobile-nav-link:hover,
html[data-theme="dark"] .mobile-nav-link[aria-current="page"] {
  color: #9ae8ee;
}

.mobile-nav-cta {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.35rem;
  border-radius: 9999px;
  background: #0a6071;
  color: #ffffff;
  font: 700 0.9rem/1.4 'DM Sans', 'Noto Sans SC', sans-serif;
}

.mobile-nav-cta:hover {
  background: #0b3440;
}

@media (min-width: 1024px) {
  .desktop-nav-links {
    margin-left: 3rem;
  }
}

html[data-theme="dark"] [class~="bg-white"] {
  background-color: var(--site-surface) !important;
}

html[data-theme="dark"] [class~="bg-mist"] {
  background-color: var(--site-surface-soft) !important;
}

html[data-theme="dark"] [class~="bg-teal-light"] {
  background-color: var(--site-surface-accent) !important;
}

html[data-theme="dark"] [class~="bg-ink"] {
  background-color: #071c22 !important;
}

html[data-theme="dark"] [class~="bg-white/90"],
html[data-theme="dark"] [class~="bg-white/95"],
html[data-theme="dark"] [class~="bg-white/75"] {
  background-color: rgba(10, 30, 36, 0.9) !important;
}

html[data-theme="dark"] [class~="text-ink"] {
  color: var(--site-text) !important;
}

html[data-theme="dark"] [class~="text-slate-700"],
html[data-theme="dark"] [class~="text-slate-600"],
html[data-theme="dark"] [class~="text-slate-500"] {
  color: var(--site-muted) !important;
}

html[data-theme="dark"] [class~="text-slate-400"] {
  color: #86a0a6 !important;
}

html[data-theme="dark"] [class~="text-teal"] {
  color: #5cd4e1 !important;
}

html[data-theme="dark"] [class~="text-teal-dark"]:not([data-light-cta]),
html[data-theme="dark"] [class~="hover:text-teal"]:hover {
  color: #9ae8ee !important;
}

html[data-theme="dark"] [data-light-cta] {
  border-color: transparent !important;
  background-color: #ecf7f8 !important;
  color: #0b3440 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] [data-light-cta]:hover {
  background-color: #24d7f2 !important;
  color: #07171c !important;
}

html[data-theme="dark"] [class~="border-slate-200"],
html[data-theme="dark"] [class~="border-slate-300"],
html[data-theme="dark"] [class~="border-slate-200/80"] {
  border-color: var(--site-border) !important;
}

html[data-theme="dark"] img[src*="veilucid-lockup-primary.svg"] {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  border-color: var(--site-border) !important;
  background-color: #0a1d23 !important;
  color: var(--site-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #789097;
}

html[data-theme="dark"] .grid-field {
  opacity: 0.52;
  filter: invert(1) hue-rotate(160deg);
}

@media (max-width: 1023px) {
  nav [data-desktop-demo] {
    display: none;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .site-controls {
    margin-right: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .site-control,
  .mobile-menu-toggle {
    transition: none;
  }
}