.cf-ui-v2-workspace {
  --cf-ui-canvas: #081411;
  --cf-ui-canvas-soft: #0d1b17;
  --cf-ui-surface: #10221d;
  --cf-ui-surface-raised: #152a24;
  --cf-ui-surface-subtle: #193129;
  --cf-ui-border: rgba(207, 236, 226, .13);
  --cf-ui-border-strong: rgba(108, 225, 190, .3);
  --cf-ui-text: #f2fbf7;
  --cf-ui-text-soft: #bdd0c8;
  --cf-ui-text-muted: #8fa89f;
  --cf-ui-accent: #55e0b8;
  --cf-ui-accent-strong: #27bf96;
  --cf-ui-accent-soft: rgba(85, 224, 184, .12);
  --cf-ui-warning: #f2ba68;
  --cf-ui-danger: #ff7b82;
  --cf-ui-shadow-sm: 0 12px 30px rgba(0, 8, 6, .14);
  --cf-ui-shadow-lg: 0 30px 90px rgba(0, 8, 6, .28);
  --cf-ui-radius-sm: 12px;
  --cf-ui-radius-md: 18px;
  --cf-ui-radius-lg: 26px;
  --cf-ui-ease: cubic-bezier(.2, .7, .2, 1);
}

:root[data-theme="light"] .cf-ui-v2-workspace {
  --cf-ui-canvas: #f1f7f4;
  --cf-ui-canvas-soft: #eaf3ef;
  --cf-ui-surface: #ffffff;
  --cf-ui-surface-raised: #fbfefd;
  --cf-ui-surface-subtle: #eff7f3;
  --cf-ui-border: rgba(27, 74, 61, .12);
  --cf-ui-border-strong: rgba(16, 151, 115, .3);
  --cf-ui-text: #12241e;
  --cf-ui-text-soft: #4c665d;
  --cf-ui-text-muted: #71877f;
  --cf-ui-accent: #12a77f;
  --cf-ui-accent-strong: #087d60;
  --cf-ui-accent-soft: rgba(18, 167, 127, .1);
  --cf-ui-warning: #9b630e;
  --cf-ui-danger: #c9444b;
  --cf-ui-shadow-sm: 0 12px 34px rgba(34, 76, 62, .08);
  --cf-ui-shadow-lg: 0 34px 90px rgba(34, 76, 62, .13);
}

.cf-ui-v2-workspace .cf-surface-raised {
  border: 1px solid var(--cf-ui-border);
  background: var(--cf-ui-surface-raised);
  box-shadow: var(--cf-ui-shadow-sm);
}

.cf-ui-v2-workspace :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cf-ui-accent) 42%, transparent);
  outline-offset: 2px;
}

.cf-ui-v2-workspace :where(button, a) {
  -webkit-tap-highlight-color: transparent;
}

.cf-ui-v2-workspace :where(button:not(:disabled), a[href]) {
  transition: border-color .18s var(--cf-ui-ease), background-color .18s var(--cf-ui-ease), color .18s var(--cf-ui-ease), box-shadow .18s var(--cf-ui-ease), transform .18s var(--cf-ui-ease);
}

.cf-ui-v2-workspace ::selection {
  color: var(--cf-ui-text);
  background: color-mix(in srgb, var(--cf-ui-accent) 28%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .cf-ui-v2-workspace *,
  .cf-ui-v2-workspace *::before,
  .cf-ui-v2-workspace *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}