@media (prefers-color-scheme: dark) {
  .app.client-app {
    --client-bg: oklch(0.18 0.012 145);
    --client-panel: oklch(0.22 0.012 145);
    --client-control: oklch(0.26 0.012 145);
    --client-border: oklch(0.34 0.015 145);
    --client-text: oklch(0.93 0.008 145);
    --client-muted: oklch(0.68 0.012 145);
    --harbor-word: oklch(0.78 0.07 232);
    --harbor-connect: oklch(0.75 0.1 185);
    --harbor-gateway: oklch(0.79 0.11 72);
    --client-accent: var(--harbor-connect);
    --client-accent-soft: color-mix(in oklch, var(--client-accent) 22%, transparent);
    color-scheme: dark;
  }
}@media (prefers-reduced-motion: reduce) {
  .client-inline-error.is-subscription > *,
  .client-operation-progress::before,
  .client-delete-strike,
  .client-power,
  .client-power::before,
  .client-power::after,
  .client-power svg,
  .client-power-section,
  .client-gateway-traffic-chart,
  .client-gateway-traffic-freshness,
  .client-drawer,
  .client-form,
  .client-server,
  .client-server-auto,
  .client-server-health > span,
  .client-server-health > svg,
  .client-server-check,
  .client-server-check svg,
  .client-server-mode-toggle,
  .client-server-mode-toggle svg,
  .client-server-mode-panel,
  .client-server-mode-panel .client-server-tools,
  .client-server-mode-panel .client-server-pinned,
  .client-server-mode-panel .client-server-scroll,
  .client-server-favorite,
  .client-server-group-toggle,
  .client-server-more,
  .client-copy-button,
  .client-access-point,
  .client-copy-feedback,
  .client-duration,
  .client-duration-seconds-value,
  .client-duration-second-digit,
  .client-drawer-close,
  .client-rail-action,
  .client-rail-action svg,
  .client-rail-action circle,
  .client-rail-action path,
  .client-rail-action rect,
  .client-rail-action span,
  .client-instruction-block,
  .client-instruction-reveal,
  .client-instruction-summary > i::before,
  .client-instruction-summary > i::after,
  .client-device,
  .client-device-pin,
  .client-device-pin svg,
  .client-device-deprioritize,
  .client-device-deprioritize svg,
  .client-device-policy,
  .client-device-policy svg,
  .client-device-alias-trigger,
  .client-device-alias-input,
  .client-device-ip,
  .client-device-traffic-value > span,
  .client-device-traffic-breakdown,
  .client-device-traffic-breakdown > span,
  .client-device-traffic-plot,
  .client-device-traffic-axis,
  .client-device-traffic-grid,
  .client-device-traffic-time,
  .client-device-traffic-lines,
  .client-device-traffic-point-tooltip,
  .client-device-traffic-chart,
  .client-device-edit,
  .client-device-edit svg,
  .client-device-edit-wrap,
  .client-devices-refresh,
  .client-devices-sort,
  .client-devices-sort-icon,
  .client-devices-refresh-ring circle,
  .client-devices-refresh-icon,
  .client-text-morph-value,
  .client-proxy-label > span {
    transition: none;
    animation: none;
  }

  .client-diagnostics-refresh,
  .client-diagnostics-refresh svg,
  .client-diagnostics-table,
  .client-diagnostics-active-marker,
  .client-diagnostics-dots::after,
  .client-diagnostics-service-row,
  .client-diagnostics-service-name,
  .client-diagnostics-service-draft input,
  .client-diagnostics-service-url button {
    transition: none;
    animation: none;
  }

  .client-diagnostics-dots::after {
    clip-path: inset(0);
  }

  .client-devices-refresh-ring circle {
    stroke-dashoffset: 0;
  }

  .client-local-rule,
  .client-local-rule-enabled svg,
  .client-local-rule-enabled circle,
  .client-local-rule-enabled path,
  .client-rule-type-trigger,
  .client-rule-type-trigger svg,
  .client-rule-type-list,
  .client-rule-type-list button,
  .client-local-rule input,
  .client-row-delete,
  .client-row-add,
  .client-row-add-slot > span,
  .client-local-rules-save,
  .client-local-rules-runtime,
  .client-local-rules-actions button {
    transition: none;
    animation: none;
  }

  .harbor-brand {
    transition: none;
    animation: none;
  }

  .harbor-brand-content {
    animation: none;
  }

  .harbor-brand-content > svg,
  .harbor-brand-name > strong,
  .harbor-brand-name > em,
  .harbor-mode-stack {
    transition: none;
  }

  .client-shell.is-intro .client-panel > :not(.client-drawer),
  .client-shell.is-intro .client-secondary-menu,
  .client-shell.is-intro .harbor-versions {
    animation: none;
  }

  .harbor-mode-stack em,
  .harbor-mode-gateway > span,
  .harbor-mode-swap g,
  .harbor-mode-swap path,
  .harbor-brand .harbor-mode-swap,
  .harbor-mode-tooltip {
    transition: none;
    animation: none;
  }

  .client-confirmation-popup,
  .client-confirmation-dialog,
  .client-confirmation-dialog > *,
  .client-confirmation-actions button {
    transition: none;
    animation: none;
  }

  .client-tooltip {
    transition: none;
  }

  .harbor-version,
  .harbor-version-tooltip {
    transition: none;
  }

  .client-state-copy h2,
  .client-connection-title > span,
  .client-state-detail > * {
    transition: none;
    animation: none;
  }
}