/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace;
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wider: 0.05em;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: "SF Mono", "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace;
    --color-accent: hsl(var(--accent));
    --color-accent-foreground: hsl(var(--accent-foreground));
    --color-background: hsl(var(--background));
    --color-border: hsl(var(--border));
    --color-brand: var(--brand);
    --color-card: hsl(var(--card));
    --color-card-foreground: hsl(var(--card-foreground));
    --color-chart-1: hsl(var(--chart-1));
    --color-chart-2: hsl(var(--chart-2));
    --color-chart-3: hsl(var(--chart-3));
    --color-chart-4: hsl(var(--chart-4));
    --color-chart-5: hsl(var(--chart-5));
    --color-destructive: hsl(var(--destructive));
    --color-destructive-foreground: hsl(var(--destructive-foreground));
    --color-foreground: hsl(var(--foreground));
    --color-highlight: var(--highlight);
    --color-info: hsl(var(--info));
    --color-info-foreground: hsl(var(--info-foreground));
    --color-input: hsl(var(--input));
    --color-loga-bad: var(--loga-bad);
    --color-loga-border: var(--loga-border);
    --color-loga-good: var(--loga-good);
    --color-loga-muted: var(--loga-muted);
    --color-loga-text: var(--loga-text);
    --color-loga-warn: var(--loga-warn);
    --color-muted: hsl(var(--muted));
    --color-muted-foreground: hsl(var(--muted-foreground));
    --color-popover: hsl(var(--popover));
    --color-popover-foreground: hsl(var(--popover-foreground));
    --color-primary: hsl(var(--primary));
    --color-primary-foreground: hsl(var(--primary-foreground));
    --color-ring: hsl(var(--ring));
    --color-secondary: hsl(var(--secondary));
    --color-secondary-foreground: hsl(var(--secondary-foreground));
    --color-success: hsl(var(--success));
    --color-success-foreground: hsl(var(--success-foreground));
    --color-warning: hsl(var(--warning));
    --color-warning-foreground: hsl(var(--warning-foreground));
    --font-code: var(--font-mono);
    --font-manuscript: var(--font-heading, inherit);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities;
:root {
  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
  --bp-xl: 80rem;
  --bp-2xl: 96rem;
}
.responsive-stack-when-narrow {
  display: flex;
  flex-direction: row;
  gap: var(--responsive-stack-gap, 1rem);
}
@container (max-width: calc(40rem - 1px)) {
  .responsive-stack-when-narrow {
    flex-direction: column;
  }
}
.responsive-grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(	auto-fit,	minmax(var(--responsive-grid-min, 280px), 1fr)	);
  gap: var(--responsive-grid-gap, 1rem);
}
@container (max-width: calc(40rem - 1px)) {
  .responsive-hide-when-narrow {
    display: none;
  }
}
@container (min-width: 40rem) {
  .responsive-show-when-narrow {
    display: none;
  }
}
.responsive-pad {
  padding: var(--responsive-pad-wide, 1.5rem);
}
@container (max-width: calc(40rem - 1px)) {
  .responsive-pad {
    padding: var(--responsive-pad-narrow, 0.75rem);
  }
}
.portal-chrome-root {
  container-type: inline-size;
  container-name: portal-shell;
  background: var(--color-background);
}
.portal-chrome-toolbar {
  flex: 0 0 auto;
  min-height: var(--portal-toolbar-height, 56px);
  border-bottom: 1px solid var(--color-border);
  background: var(--portal-toolbar-bg, transparent);
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
}
.portal-chrome-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.portal-chrome-pane {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--color-border);
  background: hsl(var(--portal-pane-bg, var(--background)));
}
.portal-chrome-pane:last-child {
  border-right: 0;
}
:root {
  --pane-left-width: 240px;
  --pane-right-width: 360px;
  --pane-tabbar-height: 3.25rem;
  --pane-mobile-bottom-padding-standard: 3.5rem;
  --portal-toolbar-height: 56px;
  --portal-pane-breakpoint: 80rem;
  --ui-mobile-breakpoint: 48rem;
}
.portal-chrome-pane[data-slot="left"] {
  flex: 0 0 var(--pane-left-width, 240px);
}
.portal-chrome-pane[data-slot="center"] {
  flex: 1 1 auto;
}
.portal-chrome-pane[data-slot="center"] .puck-root-slot {
  padding-top: var(--space-md);
}
.portal-chrome-pane[data-slot="right"] {
  flex: 0 0 var(--pane-right-width, 360px);
}
.portal-chrome-tabbar {
  display: none;
}
.portal-sidebar-desktop {
  display: contents;
}
.portal-mobile-bottom-nav-wrap {
  display: none;
}
@container portal-shell (max-width: calc(80rem - 1px)) {
  .portal-sidebar-desktop {
    display: none;
  }
  .portal-mobile-bottom-nav-wrap {
    display: contents;
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)	.portal-chrome-pane[data-slot="left"] {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    overflow: visible;
    padding: 0;
    border: 0;
    z-index: 50;
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)	.portal-chrome-pane[data-slot="center"] {
    flex: 1 1 auto;
    border-right: 0;
    padding-bottom: calc(var(--pane-mobile-bottom-padding-standard, 3.5rem) + env(safe-area-inset-bottom, 0px));
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)	.portal-chrome-pane[data-slot="right"] {
    display: none;
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)[data-active-pane="right"]	.portal-chrome-pane[data-slot="right"] {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--portal-toolbar-height, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    border-right: 0;
    padding-bottom: calc(var(--pane-mobile-bottom-padding-standard, 3.5rem) + env(safe-area-inset-bottom, 0px));
  }
  .portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))	.portal-chrome-pane {
    display: none;
  }
  .portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))[data-active-pane="left"]	.portal-chrome-pane[data-slot="left"],	.portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))[data-active-pane="center"]	.portal-chrome-pane[data-slot="center"],	.portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))[data-active-pane="right"]	.portal-chrome-pane[data-slot="right"] {
    display: flex;
    flex: 1 1 auto;
    border-right: 0;
    padding-bottom: calc(var(--pane-tabbar-height, 3.25rem) + env(safe-area-inset-bottom, 0px));
  }
  .portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))	.portal-chrome-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--pane-tabbar-height, 3.25rem) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 40;
    background: hsl(var(--card, var(--background)));
    border-top: 1px solid var(--color-border);
  }
  .portal-chrome-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: hsl(var(--muted-foreground, var(--foreground)));
    background: transparent;
    border: 0;
    border-top: 2px solid transparent;
    cursor: pointer;
  }
  .portal-chrome-root[data-active-pane="left"]	.portal-chrome-tab[data-pane-tab="left"],	.portal-chrome-root[data-active-pane="center"]	.portal-chrome-tab[data-pane-tab="center"],	.portal-chrome-root[data-active-pane="right"]	.portal-chrome-tab[data-pane-tab="right"] {
    color: var(--color-foreground);
    border-top-color: var(--color-primary);
  }
  .portal-chrome-resize-gutter {
    display: none;
  }
  .portal-chrome-pane,	.portal-chrome-toolbar {
    max-width: 100cqw;
  }
}
.portal-chrome-pane {
  position: relative;
}
.portal-chrome-resize-gutter {
  position: relative;
  flex: 0 0 0px;
  width: 0;
  z-index: 10;
}
.portal-chrome-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  width: 12px;
  cursor: col-resize;
  background: transparent;
}
.portal-chrome-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: transparent;
  transition: background 120ms ease;
}
.portal-chrome-resize-handle:hover::after, .portal-chrome-resize-handle[data-active="true"]::after {
  background: var(--color-border);
}
.portal-chrome-root[data-resizing="true"] {
  cursor: col-resize;
  user-select: none;
}
.portal-chrome-root[data-resizing="true"] * {
  pointer-events: none;
}
.portal-chrome-root[data-resizing="true"] .portal-chrome-resize-handle {
  pointer-events: auto;
}
.portal-chrome-root[data-utility-active="console"] .portal-chrome-pane[data-slot="orchestrator"] {
  display: none;
}
.portal-chrome-root[data-utility-active="orchestrator"]	.portal-chrome-pane[data-slot="right"] {
  display: none;
}
.portal-chrome-root[data-utility-active="orchestrator"]	.portal-chrome-pane[data-slot="orchestrator"] {
  flex: 0 0 var(--pane-right-width, 360px);
}
.portal-mobile-pane {
  display: none;
}
.portal-mobile-root[data-active-pane="left"]	.portal-mobile-pane[data-slot="left"], .portal-mobile-root[data-active-pane="center"]	.portal-mobile-pane[data-slot="center"], .portal-mobile-root[data-active-pane="right"]	.portal-mobile-pane[data-slot="right"] {
  display: flex;
}
.portal-mobile-pane {
  --puck-root-overflow: visible;
  --puck-root-flex: none;
  --puck-root-height: auto;
}
.portal-chrome-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-height: 3rem;
}
.portal-chrome-toolbar > .portal-chrome-toolbar-page {
  flex: 1 1 auto;
  min-width: 0;
}
.portal-chrome-toolbar > .portal-chrome-toolbar-universal {
  flex: 0 0 auto;
  margin-left: auto;
}
.ppr-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}
.ppr-inline :has(.puck-root-slot), .ppr-inline .puck-root-slot {
  display: contents !important;
}
.portal-chrome-pane:not([data-slot="center"]) .puck-root-slot {
  padding-top: 0 !important;
}
@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}
@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}
@property --tw-animation-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}
@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.dark {
  color-scheme: dark;
}
.dark .prose {
  --tw-prose-body: hsl(var(--foreground));
  --tw-prose-headings: hsl(var(--foreground));
  --tw-prose-bold: hsl(var(--foreground));
  --tw-prose-links: hsl(var(--primary));
  --tw-prose-code: hsl(var(--foreground));
  --tw-prose-counters: hsl(var(--muted-foreground));
  --tw-prose-bullets: hsl(var(--muted-foreground));
  --tw-prose-hr: hsl(var(--border));
  --tw-prose-quotes: hsl(var(--foreground));
  --tw-prose-quote-borders: hsl(var(--border));
  --tw-prose-pre-bg: hsl(var(--secondary));
  --tw-prose-pre-code: hsl(var(--foreground));
}
body {
  margin: 0;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[style*="--font-body"] {
  font-family: var(--font-body);
}
code {
  font-family: var(--font-code);
}
:root {
  --text-fluid-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-fluid-base: clamp(1rem, 0.925rem + 0.375vw, 1.25rem);
  --text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --text-fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  --text-fluid-2xl: clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem);
  --text-fluid-3xl: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  --text-fluid-4xl: clamp(2rem, 1.25rem + 3.75vw, 3.75rem);
  --text-fluid-5xl: clamp(2.5rem, 1.25rem + 5vw, 4.5rem);
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
  --radius-control: var(--radius-md);
  --border-width-default: 1px;
  --border-width-thick: 2px;
  --border-color-default: hsl(var(--border));
  --border-color-primary: hsl(var(--primary));
  --border-color-subtle: hsl(var(--primary) / 0.2);
  --border-color-focus: hsl(var(--primary) / 0.5);
  --border-color-muted: hsl(var(--muted-foreground) / 0.3);
  --glow-xs: 0 0 0 0 currentColor;
  --glow-sm: 0 0 6px 2px currentColor;
  --glow-md: 0 0 20px 4px currentColor;
  --glow-focus-ring: 0 0 0 2px hsl(var(--ring));
  --glow-status-pulse: 0 0 6px 2px;
  --glow-status-pulse-color-active: hsl(var(--primary) / 0.6);
  --glow-status-pulse-color-active-soft: hsl(var(--primary) / 0.3);
  --glow-status-pulse-color-warning: hsl(var(--chart-4) / 0.6);
  --glow-status-pulse-color-warning-soft: hsl(var(--chart-4) / 0.3);
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-colors: color 0.15s, background-color 0.15s, border-color 0.15s;
  --transition-all-fast: all 0.15s;
  --transition-all-normal: all 0.3s;
  --leading-tight: 1.05;
  --leading-snug: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.3em;
}
@layer base {
  * {
    border-color: var(--color-border);
    outline-color: color-mix(in srgb, hsl(var(--ring)) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in srgb, var(--color-ring) 50%, transparent);
    }
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}
.gantt-container {
  --wx-background: hsl(var(--card));
  --wx-background-alt: hsl(var(--muted));
  --wx-background-hover: hsl(var(--gantt-surface-hover-light));
  --wx-color-font: hsl(var(--foreground));
  --wx-color-font-disabled: hsl(var(--gantt-font-disabled-light));
  --wx-color-primary: hsl(var(--primary));
  --wx-border: 1px solid hsl(var(--border));
  --wx-border-light: 1px solid hsl(var(--gantt-border-soft-light));
  --wx-gantt-border: 1px solid hsl(var(--border));
  --wx-grid-body-row-border: 1px solid hsl(var(--border));
  --wx-grid-body-cell-border: 1px solid transparent;
  --wx-timescale-border: 1px solid hsl(var(--border));
  --wx-gantt-select-color: hsl(var(--gantt-surface-hover-light));
  --wx-gantt-holiday-background: hsl(var(--muted));
  --wx-gantt-holiday-color: hsl(var(--gantt-font-disabled-light));
  --wx-gantt-link-marker-background: hsl(var(--card));
  --wx-gantt-progress-border-color: hsl(var(--gantt-border-strong-light));
  --wx-tooltip-background: hsl(var(--foreground));
  --wx-tooltip-font-color: hsl(var(--primary-foreground));
}
.dark .gantt-container {
  --wx-background: hsl(var(--background));
  --wx-background-alt: hsl(var(--muted));
  --wx-background-hover: hsl(var(--gantt-surface-hover-dark));
  --wx-color-font: hsl(var(--foreground));
  --wx-color-font-disabled: hsl(var(--gantt-font-disabled-dark));
  --wx-color-primary: var(--brand);
  --wx-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-border-light: 1px solid hsl(var(--gantt-border-soft-dark));
  --wx-gantt-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-grid-body-row-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-grid-body-cell-border: 1px solid transparent;
  --wx-timescale-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-gantt-select-color: hsl(var(--gantt-surface-hover-dark));
  --wx-gantt-holiday-background: hsl(var(--gantt-holiday-bg-dark));
  --wx-gantt-holiday-color: hsl(var(--gantt-holiday-color-dark));
  --wx-gantt-link-marker-background: hsl(var(--muted));
  --wx-gantt-progress-border-color: hsl(var(--gantt-border-strong-dark));
  --wx-tooltip-background: hsl(var(--gantt-tooltip-bg-dark));
  --wx-tooltip-font-color: hsl(var(--gantt-tooltip-fg-dark));
  --wx-sidebar-close-icon: hsl(var(--gantt-border-strong-dark));
}
.gantt-container {
  display: flex;
  flex-direction: column;
}
.gantt-container .wx-willow-dark-theme, .gantt-container .wx-willow-theme {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gantt-container .wx-gantt {
  flex: 1;
  min-height: 0;
}
.fc-custom {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fc-custom .fc {
  flex: 1;
  min-height: 0;
}
.fc-custom .fc .fc-scroller-liquid-absolute {
  position: relative;
  overflow: hidden;
}
.fc-custom .fc .fc-daygrid-body {
  width: 100%;
}
.fc-custom .fc .fc-scrollgrid {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-scrollgrid td, .fc-custom .fc .fc-scrollgrid th {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-col-header-cell {
  background: var(--color-muted);
  border-color: var(--color-border);
}
.fc-custom .fc .fc-col-header-cell-cushion {
  color: var(--color-muted-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-daygrid-day {
  background: var(--color-background);
}
.fc-custom .fc .fc-daygrid-day-number {
  color: var(--color-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-daygrid-day.fc-day-today {
  background: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 50%, transparent);
  }
}
.fc-custom .fc .fc-daygrid-day.fc-day-other {
  background: color-mix(in srgb, hsl(var(--muted)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 25%, transparent);
  }
}
.fc-custom .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-daygrid-event {
  border-radius: 3px;
  font-size: 0.75rem;
  border: none;
}
.fc-custom .fc .fc-event-title, .fc-custom .fc .fc-event-time {
  color: inherit;
}
.fc-custom .fc .fc-timegrid-event {
  border: none;
  border-radius: 4px;
  font-size: 0.6875rem;
  line-height: 1.3;
  overflow: hidden;
}
.fc-custom .fc .fc-timegrid-event .fc-event-main {
  padding: 1px 4px;
  overflow: hidden;
}
.fc-custom .fc .fc-timegrid-event .fc-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-custom .fc .fc-v-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 15%, var(--color-background));
  }
  border-left: 3px solid var(--fc-event-bg-color, hsl(var(--info)));
}
.fc-custom .fc .fc-v-event .fc-event-main {
  color: var(--color-foreground);
}
.fc-custom .fc .fc-v-event .fc-event-time {
  color: var(--color-muted-foreground);
  font-size: 0.625rem;
}
.fc-custom .fc .fc-h-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 20%, var(--color-background));
  }
  border: none;
  border-left: 3px solid var(--fc-event-bg-color, hsl(var(--info)));
}
.fc-custom .fc .fc-h-event .fc-event-main {
  color: var(--color-foreground);
}
.dark .fc-custom .fc .fc-v-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 25%, var(--color-background));
  }
}
.dark .fc-custom .fc .fc-h-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 30%, var(--color-background));
  }
}
.dark .fc-custom .fc .fc-daygrid-dot-event {
  opacity: 1;
}
.dark .fc-custom .fc .fc-daygrid-dot-event .fc-event-title {
  color: var(--color-foreground);
}
.dark .fc-custom .fc .fc-daygrid-dot-event .fc-event-time {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-daygrid-more-link {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-timegrid-slot {
  background: var(--color-background);
}
.fc-custom .fc .fc-timegrid-slot-label-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-timegrid-axis-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-list {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-list-day-cushion {
  background: var(--color-muted);
}
.fc-custom .fc .fc-list-day-text, .fc-custom .fc .fc-list-day-side-text {
  color: var(--color-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-list-event:hover td {
  background: var(--color-muted);
}
.fc-custom .fc .fc-list-event-title a, .fc-custom .fc .fc-list-event-time {
  color: var(--color-foreground);
}
.fc-custom .fc .fc-list-empty-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-popover {
  background: var(--color-background);
  border-color: var(--color-border);
  box-shadow: var(--elevation-sm);
}
.fc-custom .fc .fc-popover-header {
  background: var(--color-muted);
  color: var(--color-foreground);
}
.fc-custom .fc .fc-popover-close {
  color: var(--color-muted-foreground);
}
.manuscript-mode {
  font-family: var(--font-manuscript);
  line-height: 1.8;
  color: var(--color-foreground);
}
.manuscript-mode h1 {
  margin-top: 0.5in;
  margin-bottom: 0.25in;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.manuscript-mode p {
  text-indent: 2em;
  margin-bottom: 0;
  text-align: justify;
}
.manuscript-mode h1 + p, .manuscript-mode .slate-p:first-of-type {
  text-indent: 0;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
@supports (-moz-appearance: none) {
  *, *::before, *::after {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, hsl(var(--primary)) 80%, transparent) transparent;
    @supports (color: color-mix(in lab, red, red)) {
      scrollbar-color: color-mix(in srgb, var(--color-primary) 80%, transparent) transparent;
    }
  }
}
.scrollbar-visible::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scrollbar-visible::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-visible::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
  border-radius: 9999px;
}
.scrollbar-visible::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
.tg-scrollbar-thumb-brand {
  background-color: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
}
.tg-scrollbar-thumb-brand:hover {
  background-color: var(--color-primary);
}
.h-\[38px\] {
  height: 2rem;
}
.puck-root-slot[data-direction="row"] {
  --puck-root-direction: row;
}
.puck-root-slot[data-direction="column"] {
  --puck-root-direction: column;
}
.puck-root-slot[data-justify="start"] {
  --puck-root-justify: flex-start;
}
.puck-root-slot[data-justify="center"] {
  --puck-root-justify: center;
}
.puck-root-slot[data-justify="end"] {
  --puck-root-justify: flex-end;
}
.puck-root-slot[data-justify="between"] {
  --puck-root-justify: space-between;
}
.puck-root-slot[data-justify="around"] {
  --puck-root-justify: space-around;
}
.puck-root-slot[data-justify="evenly"] {
  --puck-root-justify: space-evenly;
}
.puck-root-slot[data-align="start"] {
  --puck-root-align: flex-start;
}
.puck-root-slot[data-align="center"] {
  --puck-root-align: center;
}
.puck-root-slot[data-align="end"] {
  --puck-root-align: flex-end;
}
.puck-root-slot[data-align="stretch"] {
  --puck-root-align: stretch;
}
.puck-root-slot[data-spacing="none"] {
  --puck-root-gap: 0;
}
.puck-root-slot[data-spacing="sm"] {
  --puck-root-gap: clamp(4px, 1vw, 8px);
}
.puck-root-slot[data-spacing="md"] {
  --puck-root-gap: clamp(8px, 1.5vw, 16px);
}
.puck-root-slot[data-spacing="lg"] {
  --puck-root-gap: clamp(16px, 2vw, 24px);
}
.puck-root-slot[data-spacing="xl"] {
  --puck-root-gap: clamp(24px, 3vw, 32px);
}
.puck-root-slot[data-padding="none"] {
  --puck-root-padding: 0;
}
.puck-root-slot[data-padding="sm"] {
  --puck-root-padding: clamp(0.5rem, 2vw, 1rem);
}
.puck-root-slot[data-padding="md"] {
  --puck-root-padding: clamp(1rem, 3vw, 1.5rem);
}
.puck-root-slot[data-padding="lg"] {
  --puck-root-padding: clamp(1.5rem, 4vw, 2rem);
}
.puck-root-slot[data-border="none"] {
  --puck-root-border: none;
}
.puck-root-slot[data-border="subtle"] {
  --puck-root-border: 1px solid color-mix(in srgb, hsl(var(--border)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --puck-root-border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  }
}
.puck-root-slot[data-border="solid"] {
  --puck-root-border: 1px solid var(--color-border);
}
.puck-root-slot[data-radius="none"] {
  --puck-root-radius: 0;
}
.puck-root-slot[data-radius="sm"] {
  --puck-root-radius: 0.375rem;
}
.puck-root-slot[data-radius="md"] {
  --puck-root-radius: 0.75rem;
}
.puck-root-slot[data-radius="lg"] {
  --puck-root-radius: 1rem;
}
.puck-root-slot[data-radius="full"] {
  --puck-root-radius: 9999px;
}
.puck-root-slot[data-shadow="none"] {
  --puck-root-shadow: none;
}
.puck-root-slot[data-shadow="sm"] {
  --puck-root-shadow: 0 1px 2px 0 hsl(var(--black) / 0.05);
}
.puck-root-slot[data-shadow="md"] {
  --puck-root-shadow: 0 4px 6px -1px hsl(var(--black) / 0.1);
}
.puck-root-slot[data-shadow="lg"] {
  --puck-root-shadow: 0 10px 25px -5px hsl(var(--black) / 0.2);
}
.puck-root-slot[data-has-border] {
  --puck-root-bg: var(--color-card);
}
.puck-root-slot:not([data-has-border]) {
  --puck-root-bg: transparent;
}
.puck-root-slot :has([data-list-table-block]) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
}
[data-slot="alert-dialog-overlay"] {
  background: hsl(var(--black) / 0.5);
}
[data-slot="alert-dialog-content"] {
  background: var(--color-background);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 0.5rem);
  padding: 1.5rem;
  box-shadow: var(--elevation-lg);
}
[data-slot="alert-dialog-title"] {
  font-size: 1.125rem;
  font-weight: 600;
}
[data-slot="alert-dialog-description"] {
  color: var(--color-muted-foreground);
  font-size: 0.875rem;
}
[data-slot="alert-dialog-action"], [data-slot="alert-dialog-cancel"] {
  padding: 0.5rem 1rem;
  border-radius: calc(var(--radius, 0.5rem) - 2px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
[data-slot="alert-dialog-action"] {
  background: var(--color-destructive);
  color: var(--color-destructive-foreground);
  border: none;
}
[data-slot="alert-dialog-cancel"] {
  background: transparent;
  color: inherit;
  border: 1px solid var(--color-border);
}
@container gpt-chat (min-width: 48rem) {
  .conversation-starters {
    display: none !important;
  }
}
[data-slot="voice-overlay-card"] {
  background: var(--color-card);
  color: var(--color-card-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 0.5rem);
  box-shadow: var(--elevation-lg);
}
[data-slot="voice-stop-btn"] {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.uif-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.uif-hover-bg-muted:hover {
  background-color: var(--color-muted);
}
.uif-hover-text-foreground:hover {
  color: var(--color-foreground);
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.dark {
  color-scheme: dark;
}
.dark .prose {
  --tw-prose-body: hsl(var(--foreground));
  --tw-prose-headings: hsl(var(--foreground));
  --tw-prose-bold: hsl(var(--foreground));
  --tw-prose-links: hsl(var(--primary));
  --tw-prose-code: hsl(var(--foreground));
  --tw-prose-counters: hsl(var(--muted-foreground));
  --tw-prose-bullets: hsl(var(--muted-foreground));
  --tw-prose-hr: hsl(var(--border));
  --tw-prose-quotes: hsl(var(--foreground));
  --tw-prose-quote-borders: hsl(var(--border));
  --tw-prose-pre-bg: hsl(var(--secondary));
  --tw-prose-pre-code: hsl(var(--foreground));
}
body {
  margin: 0;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[style*="--font-body"] {
  font-family: var(--font-body);
}
code {
  font-family: var(--font-code);
}
:root {
  --text-fluid-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-fluid-base: clamp(1rem, 0.925rem + 0.375vw, 1.25rem);
  --text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --text-fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  --text-fluid-2xl: clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem);
  --text-fluid-3xl: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  --text-fluid-4xl: clamp(2rem, 1.25rem + 3.75vw, 3.75rem);
  --text-fluid-5xl: clamp(2.5rem, 1.25rem + 5vw, 4.5rem);
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
  --radius-control: var(--radius-md);
  --border-width-default: 1px;
  --border-width-thick: 2px;
  --border-color-default: hsl(var(--border));
  --border-color-primary: hsl(var(--primary));
  --border-color-subtle: hsl(var(--primary) / 0.2);
  --border-color-focus: hsl(var(--primary) / 0.5);
  --border-color-muted: hsl(var(--muted-foreground) / 0.3);
  --glow-xs: 0 0 0 0 currentColor;
  --glow-sm: 0 0 6px 2px currentColor;
  --glow-md: 0 0 20px 4px currentColor;
  --glow-focus-ring: 0 0 0 2px hsl(var(--ring));
  --glow-status-pulse: 0 0 6px 2px;
  --glow-status-pulse-color-active: hsl(var(--primary) / 0.6);
  --glow-status-pulse-color-active-soft: hsl(var(--primary) / 0.3);
  --glow-status-pulse-color-warning: hsl(var(--chart-4) / 0.6);
  --glow-status-pulse-color-warning-soft: hsl(var(--chart-4) / 0.3);
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-colors: color 0.15s, background-color 0.15s, border-color 0.15s;
  --transition-all-fast: all 0.15s;
  --transition-all-normal: all 0.3s;
  --leading-tight: 1.05;
  --leading-snug: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.3em;
}
@layer base {
  * {
    border-color: var(--color-border);
    outline-color: color-mix(in srgb, hsl(var(--ring)) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in srgb, var(--color-ring) 50%, transparent);
    }
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}
.gantt-container {
  --wx-background: hsl(var(--card));
  --wx-background-alt: hsl(var(--muted));
  --wx-background-hover: hsl(var(--gantt-surface-hover-light));
  --wx-color-font: hsl(var(--foreground));
  --wx-color-font-disabled: hsl(var(--gantt-font-disabled-light));
  --wx-color-primary: hsl(var(--primary));
  --wx-border: 1px solid hsl(var(--border));
  --wx-border-light: 1px solid hsl(var(--gantt-border-soft-light));
  --wx-gantt-border: 1px solid hsl(var(--border));
  --wx-grid-body-row-border: 1px solid hsl(var(--border));
  --wx-grid-body-cell-border: 1px solid transparent;
  --wx-timescale-border: 1px solid hsl(var(--border));
  --wx-gantt-select-color: hsl(var(--gantt-surface-hover-light));
  --wx-gantt-holiday-background: hsl(var(--muted));
  --wx-gantt-holiday-color: hsl(var(--gantt-font-disabled-light));
  --wx-gantt-link-marker-background: hsl(var(--card));
  --wx-gantt-progress-border-color: hsl(var(--gantt-border-strong-light));
  --wx-tooltip-background: hsl(var(--foreground));
  --wx-tooltip-font-color: hsl(var(--primary-foreground));
}
.dark .gantt-container {
  --wx-background: hsl(var(--background));
  --wx-background-alt: hsl(var(--muted));
  --wx-background-hover: hsl(var(--gantt-surface-hover-dark));
  --wx-color-font: hsl(var(--foreground));
  --wx-color-font-disabled: hsl(var(--gantt-font-disabled-dark));
  --wx-color-primary: var(--brand);
  --wx-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-border-light: 1px solid hsl(var(--gantt-border-soft-dark));
  --wx-gantt-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-grid-body-row-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-grid-body-cell-border: 1px solid transparent;
  --wx-timescale-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-gantt-select-color: hsl(var(--gantt-surface-hover-dark));
  --wx-gantt-holiday-background: hsl(var(--gantt-holiday-bg-dark));
  --wx-gantt-holiday-color: hsl(var(--gantt-holiday-color-dark));
  --wx-gantt-link-marker-background: hsl(var(--muted));
  --wx-gantt-progress-border-color: hsl(var(--gantt-border-strong-dark));
  --wx-tooltip-background: hsl(var(--gantt-tooltip-bg-dark));
  --wx-tooltip-font-color: hsl(var(--gantt-tooltip-fg-dark));
  --wx-sidebar-close-icon: hsl(var(--gantt-border-strong-dark));
}
.gantt-container {
  display: flex;
  flex-direction: column;
}
.gantt-container .wx-willow-dark-theme, .gantt-container .wx-willow-theme {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gantt-container .wx-gantt {
  flex: 1;
  min-height: 0;
}
.fc-custom {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fc-custom .fc {
  flex: 1;
  min-height: 0;
}
.fc-custom .fc .fc-scroller-liquid-absolute {
  position: relative;
  overflow: hidden;
}
.fc-custom .fc .fc-daygrid-body {
  width: 100%;
}
.fc-custom .fc .fc-scrollgrid {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-scrollgrid td, .fc-custom .fc .fc-scrollgrid th {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-col-header-cell {
  background: var(--color-muted);
  border-color: var(--color-border);
}
.fc-custom .fc .fc-col-header-cell-cushion {
  color: var(--color-muted-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-daygrid-day {
  background: var(--color-background);
}
.fc-custom .fc .fc-daygrid-day-number {
  color: var(--color-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-daygrid-day.fc-day-today {
  background: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 50%, transparent);
  }
}
.fc-custom .fc .fc-daygrid-day.fc-day-other {
  background: color-mix(in srgb, hsl(var(--muted)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 25%, transparent);
  }
}
.fc-custom .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-daygrid-event {
  border-radius: 3px;
  font-size: 0.75rem;
  border: none;
}
.fc-custom .fc .fc-event-title, .fc-custom .fc .fc-event-time {
  color: inherit;
}
.fc-custom .fc .fc-timegrid-event {
  border: none;
  border-radius: 4px;
  font-size: 0.6875rem;
  line-height: 1.3;
  overflow: hidden;
}
.fc-custom .fc .fc-timegrid-event .fc-event-main {
  padding: 1px 4px;
  overflow: hidden;
}
.fc-custom .fc .fc-timegrid-event .fc-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-custom .fc .fc-v-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 15%, var(--color-background));
  }
  border-left: 3px solid var(--fc-event-bg-color, hsl(var(--info)));
}
.fc-custom .fc .fc-v-event .fc-event-main {
  color: var(--color-foreground);
}
.fc-custom .fc .fc-v-event .fc-event-time {
  color: var(--color-muted-foreground);
  font-size: 0.625rem;
}
.fc-custom .fc .fc-h-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 20%, var(--color-background));
  }
  border: none;
  border-left: 3px solid var(--fc-event-bg-color, hsl(var(--info)));
}
.fc-custom .fc .fc-h-event .fc-event-main {
  color: var(--color-foreground);
}
.dark .fc-custom .fc .fc-v-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 25%, var(--color-background));
  }
}
.dark .fc-custom .fc .fc-h-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 30%, var(--color-background));
  }
}
.dark .fc-custom .fc .fc-daygrid-dot-event {
  opacity: 1;
}
.dark .fc-custom .fc .fc-daygrid-dot-event .fc-event-title {
  color: var(--color-foreground);
}
.dark .fc-custom .fc .fc-daygrid-dot-event .fc-event-time {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-daygrid-more-link {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-timegrid-slot {
  background: var(--color-background);
}
.fc-custom .fc .fc-timegrid-slot-label-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-timegrid-axis-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-list {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-list-day-cushion {
  background: var(--color-muted);
}
.fc-custom .fc .fc-list-day-text, .fc-custom .fc .fc-list-day-side-text {
  color: var(--color-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-list-event:hover td {
  background: var(--color-muted);
}
.fc-custom .fc .fc-list-event-title a, .fc-custom .fc .fc-list-event-time {
  color: var(--color-foreground);
}
.fc-custom .fc .fc-list-empty-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-popover {
  background: var(--color-background);
  border-color: var(--color-border);
  box-shadow: var(--elevation-sm);
}
.fc-custom .fc .fc-popover-header {
  background: var(--color-muted);
  color: var(--color-foreground);
}
.fc-custom .fc .fc-popover-close {
  color: var(--color-muted-foreground);
}
.manuscript-mode {
  font-family: var(--font-manuscript);
  line-height: 1.8;
  color: var(--color-foreground);
}
.manuscript-mode h1 {
  margin-top: 0.5in;
  margin-bottom: 0.25in;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.manuscript-mode p {
  text-indent: 2em;
  margin-bottom: 0;
  text-align: justify;
}
.manuscript-mode h1 + p, .manuscript-mode .slate-p:first-of-type {
  text-indent: 0;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
@supports (-moz-appearance: none) {
  *, *::before, *::after {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, hsl(var(--primary)) 80%, transparent) transparent;
    @supports (color: color-mix(in lab, red, red)) {
      scrollbar-color: color-mix(in srgb, var(--color-primary) 80%, transparent) transparent;
    }
  }
}
.scrollbar-visible::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scrollbar-visible::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-visible::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
  border-radius: 9999px;
}
.scrollbar-visible::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
.tg-scrollbar-thumb-brand {
  background-color: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
}
.tg-scrollbar-thumb-brand:hover {
  background-color: var(--color-primary);
}
.h-\[38px\] {
  height: 2rem;
}
.uif-w-full {
  width: 100%;
}
.uif-p-4 {
  padding: 1rem;
}
.uif-border {
  border-width: 1px;
}
.uif-border-dashed {
  border-style: dashed;
}
.uif-rounded-lg {
  border-radius: var(--radius-md, 0.375rem);
}
.uif-text-center {
  text-align: center;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-border-b-0 {
  border-bottom-width: 0;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-font-semibold {
  font-weight: 600;
}
.uif-uppercase {
  text-transform: uppercase;
}
.uif-tracking-wider {
  letter-spacing: 0.05em;
}
.uif-px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.uif-pb-4 {
  padding-bottom: 1rem;
}
.uif-w-4 {
  width: 1rem;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-transition-all {
  transition: all 0.15s;
}
.uif-hover-no-underline:hover {
  text-decoration-line: none;
}
.uif-accordion-item {
  border-bottom-width: 1px;
}
.uif-accordion-trigger {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition: all 0.15s;
}
.uif-accordion-trigger:hover {
  text-decoration-line: underline;
}
.uif-accordion-chevron {
  width: 1rem;
  height: 1rem;
  color: var(--color-muted-foreground);
  transition: transform 0.2s;
}
.uif-accordion-rot-90[data-state="open"] > svg {
  transform: rotate(90deg);
}
.uif-accordion-rot-180[data-state="open"] > svg {
  transform: rotate(180deg);
}
.uif-accordion-content {
  overflow: hidden;
}
.uif-accordion-content[data-state="open"] {
  animation: uif-accordion-down 0.2s ease-out;
}
.uif-accordion-content[data-state="closed"] {
  animation: uif-accordion-up 0.2s ease-out;
}
.uif-accordion-content-body {
  padding-bottom: 1rem;
  padding-top: 0;
}
@keyframes uif-accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
@keyframes uif-accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
.uif-border-border {
  border-color: var(--color-border);
}
[data-slot="alert-dialog-overlay"] {
  background: hsl(var(--black) / 0.5);
}
[data-slot="alert-dialog-content"] {
  background: var(--color-background);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 0.5rem);
  padding: 1.5rem;
  box-shadow: var(--elevation-lg);
}
[data-slot="alert-dialog-title"] {
  font-size: 1.125rem;
  font-weight: 600;
}
[data-slot="alert-dialog-description"] {
  color: var(--color-muted-foreground);
  font-size: 0.875rem;
}
[data-slot="alert-dialog-action"], [data-slot="alert-dialog-cancel"] {
  padding: 0.5rem 1rem;
  border-radius: calc(var(--radius, 0.5rem) - 2px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
[data-slot="alert-dialog-action"] {
  background: var(--color-destructive);
  color: var(--color-destructive-foreground);
  border: none;
}
[data-slot="alert-dialog-cancel"] {
  background: transparent;
  color: inherit;
  border: 1px solid var(--color-border);
}
.uif-bg-black_50 {
  background-color: color-mix(in srgb, #000 5000%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-black) 5000%, transparent);
  }
}
.uif-rounded-lg {
  border-radius: var(--radius-lg);
}
.uif-border {
  border-width: 1px;
}
.uif-p-6 {
  padding: 1.5rem;
}
.uif-shadow-lg {
  box-shadow: var(--shadow-md);
}
.uif-outline-none {
  outline: none;
}
.uif-font-semibold {
  font-weight: var(--font-weight-semibold);
}
.uif-mb-2 {
  margin-bottom: 0.5rem;
}
.uif-size-16 {
  width: 4rem;
  height: 4rem;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
@container (min-width: 40rem) {
  .uif-sm-max-w-lg {
    max-width: 32rem;
  }
  .uif-sm-flex-row {
    flex-direction: row;
  }
}
.uif-bg-background {
  background-color: var(--color-background);
}
.uif-text-center {
  text-align: center;
}
@container (min-width: 40rem) {
  .uif-sm-justify-end {
    justify-content: flex-end;
  }
}
.uif-text-lg {
  font-size: var(--font-size-lg);
  line-height: 1.75rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-text-sm {
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
}
.uif-bg-muted {
  background-color: var(--color-muted);
}
.uif-max-h-_200px_ {
  max-height: 200px;
}
.uif-max-w-_150px_ {
  max-width: 150px;
}
.uif-max-w-_160px_ {
  max-width: 160px;
}
.uif-max-w-_95%_ {
  max-width: 95%;
}
.uif-size-8 {
  width: 2rem;
  height: 2rem;
}
.uif-rounded-full {
  border-radius: var(--radius-full);
}
.uif-select-none {
  user-select: none;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-text-primary-foreground {
  color: var(--color-primary-foreground);
}
.uif-ring-2 {
  box-shadow: 0 0 0 2px var(--color-ring);
}
.uif-___svg_-size-4 > svg {
  width: 1rem;
  height: 1rem;
}
.uif-aspect-square {
  aspect-ratio: 1 / 1;
}
.uif-object-cover {
  object-fit: cover;
}
.uif-bg-muted {
  background-color: var(--color-muted);
}
.uif-bg-primary {
  background-color: var(--color-primary);
}
.uif-data-_size_sm_-size-6[data-size="sm"] {
  width: 1.5rem;
  height: 1.5rem;
}
.uif-data-_size_lg_-size-10[data-size="lg"] {
  width: 2.5rem;
  height: 2.5rem;
}
.uif-size-full {
  width: 100%;
  height: 100%;
}
[data-size="sm"] .uif-data-_size_sm_-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-avatar {
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.uif-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  border-width: 1px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: var(--font-weight-semibold);
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.uif-badge:focus-visible {
  outline: none;
  box-shadow: var(--elevation-ring-focus);
}
.uif-badge-default {
  border-color: transparent;
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  box-shadow: var(--shadow-xs);
}
.uif-badge-default:hover {
  background-color: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
}
.uif-badge-secondary {
  border-color: transparent;
  background-color: var(--color-secondary);
  color: var(--color-secondary-foreground);
}
.uif-badge-secondary:hover {
  background-color: color-mix(in srgb, hsl(var(--secondary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) 80%, transparent);
  }
}
.uif-badge-destructive {
  border-color: transparent;
  background-color: var(--color-destructive);
  color: var(--color-destructive-foreground);
  box-shadow: var(--shadow-xs);
}
.uif-badge-destructive:hover {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 80%, transparent);
  }
}
.uif-badge-outline {
  color: var(--color-foreground);
}
.puck-block-conditions-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.puck-block-conditions-row:last-child {
  border-bottom: none;
}
.puck-block-conditions-summary {
  font-size: 0.8125rem;
  color: var(--color-foreground);
  line-height: 1.4;
}
.puck-block-conditions-summary strong {
  font-weight: 600;
}
.blk-bottom-bar > * {
  flex: none;
}
.add-member-popover-content {
  width: 20rem;
  padding: 0;
}
.add-member-popover-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.add-member-popover-input {
  flex: 1;
  min-width: 0;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  color: var(--color-foreground);
  background: var(--color-background);
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.375rem);
}
.add-member-popover-input:focus {
  outline: none;
  border-color: var(--color-ring, var(--color-primary));
}
.add-member-popover-status {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--muted-foreground);
  color: var(--color-foreground);
  background: var(--color-muted);
}
.add-member-popover-status[data-status="error"] {
  border-left-color: var(--color-destructive);
}
.add-member-popover-status[data-status="adding"], .add-member-popover-status[data-status="invite-link"] {
  border-left-color: var(--color-primary);
}
.add-member-popover-invite {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.375rem;
}
.add-member-popover-invite code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.625rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius, 0.375rem);
  background: var(--color-background);
  color: var(--color-foreground);
}
.add-member-popover-results {
  max-height: 16rem;
}
.add-member-popover-group {
  padding: 0.5rem;
}
.add-member-popover-group-label {
  padding: 0.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted-foreground);
}
.add-member-popover-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.25rem;
  border-radius: var(--radius, 0.375rem);
}
.add-member-popover-row:hover {
  background: var(--color-muted);
}
.add-member-popover-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-muted-foreground);
  background: var(--color-muted);
}
.add-member-popover-row-text {
  flex: 1;
  min-width: 0;
}
.add-member-popover-row-name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-foreground);
}
.add-member-popover-row-sub {
  font-size: 0.625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-muted-foreground);
}
.add-member-popover-empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}
.add-member-popover-footer {
  padding: 0.5rem;
  border-top: 1px solid var(--border);
}
.uif-opacity-30 {
  opacity: 0.3;
}
.puck-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: var(--radius-control);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  border: none;
  outline: none;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
}
.puck-button:disabled {
  pointer-events: none;
  opacity: 0.5;
}
.puck-button:focus-visible {
  outline: none;
  border-color: var(--color-ring);
  box-shadow: var(--elevation-ring-focus);
}
.puck-button svg {
  pointer-events: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.puck-button-default {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  box-shadow: var(--elevation-xs);
}
.puck-button-default:hover {
  background: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 90%, transparent);
  }
}
.puck-button-destructive {
  background: var(--color-destructive);
  color: var(--color-destructive-foreground);
  box-shadow: var(--elevation-xs);
}
.puck-button-destructive:hover {
  background: color-mix(in srgb, hsl(var(--destructive)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-destructive) 90%, transparent);
  }
}
.dark .puck-button-destructive {
  background: color-mix(in srgb, hsl(var(--destructive)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-destructive) 60%, transparent);
  }
}
.puck-button-destructive:focus-visible {
  box-shadow: var(--elevation-ring-destructive);
}
.dark .puck-button-destructive:focus-visible {
  box-shadow: var(--elevation-ring-destructive-strong);
}
.puck-button-outline {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-foreground);
  box-shadow: var(--elevation-xs);
}
.puck-button-outline:hover {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
}
.dark .puck-button-outline {
  background: color-mix(in srgb, hsl(var(--input)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-input) 30%, transparent);
  }
  border-color: var(--color-input);
}
.dark .puck-button-outline:hover {
  background: color-mix(in srgb, hsl(var(--input)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-input) 50%, transparent);
  }
}
.puck-button-secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-foreground);
}
.puck-button-secondary:hover {
  background: color-mix(in srgb, hsl(var(--secondary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-secondary) 80%, transparent);
  }
}
.puck-button-ghost {
  background: transparent;
  color: var(--color-foreground);
}
.puck-button-ghost:hover {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
}
.dark .puck-button-ghost:hover {
  background: color-mix(in srgb, hsl(var(--accent)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
}
.puck-button-link {
  background: transparent;
  color: var(--color-primary);
  text-underline-offset: 4px;
}
.puck-button-link:hover {
  text-decoration: underline;
}
.puck-button-active, .puck-button-active:hover {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
}
.puck-button-size-default {
  height: 2.25rem;
  padding: 0.5rem 1rem;
}
.puck-button-size-default:has(svg) {
  padding: 0.5rem 0.75rem;
}
.puck-button-size-xs {
  height: 1.5rem;
  gap: 0.25rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-control);
}
.puck-button-size-xs:has(svg) {
  padding: 0 0.375rem;
}
.puck-button-size-xs svg {
  width: 0.75rem;
  height: 0.75rem;
}
.puck-button-size-sm {
  height: 2rem;
  gap: 0.375rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-control);
}
.puck-button-size-sm:has(svg) {
  padding: 0 0.625rem;
}
.puck-button-size-lg {
  height: 2.5rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-control);
}
.puck-button-size-lg:has(svg) {
  padding: 0 1rem;
}
.puck-button-size-icon {
  width: 2.25rem;
  height: 2.25rem;
}
.puck-button-size-icon-xs {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-control);
}
.puck-button-size-icon-xs svg {
  width: 0.75rem;
  height: 0.75rem;
}
.puck-button-size-icon-sm {
  width: 2rem;
  height: 2rem;
}
.puck-button-size-icon-lg {
  width: 2.5rem;
  height: 2.5rem;
}
.puck-button[aria-invalid="true"] {
  border-color: var(--color-destructive);
  box-shadow: var(--elevation-ring-destructive);
}
.dark .puck-button[aria-invalid="true"] {
  box-shadow: var(--elevation-ring-destructive-strong);
}
.uif-gap-1_5 {
  gap: 0.375rem;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-flex-col {
  flex-direction: column;
}
.uif-w-full {
  width: 100%;
}
.uif-w-3 {
  width: 0.75rem;
}
.uif-w-4 {
  width: 1rem;
}
.uif-text-green-600 {
  color: var(--color-green-600);
}
.uif-w-56 {
  width: 14rem;
}
.uif-p-1 {
  padding: 0.25rem;
}
.uif-rounded-md {
  border-radius: var(--radius-md, 0.375rem);
}
.uif-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.uif-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-bg-accent:hover {
  background-color: var(--color-accent);
}
.uif-text-accent-foreground:hover {
  color: var(--color-accent-foreground);
}
.uif-transition-colors {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.uif-h-4 {
  height: 1rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-w-9 {
  width: 2.25rem;
}
.uif-cursor-pointer {
  cursor: pointer;
}
.uif-rounded-full {
  border-radius: 9999px;
}
.uif-bg-white {
  background-color: hsl(var(--white));
}
.uif-shadow-sm {
  box-shadow: var(--shadow-xs);
}
.uif-bg-destructive {
  background-color: var(--color-destructive);
}
.uif-bg-success {
  background-color: var(--color-success);
}
.uif-text-destructive-foreground {
  color: var(--color-destructive-foreground);
}
.uif-mt-1 {
  margin-top: 0.25rem;
}
.uif-text-red-500 {
  color: var(--color-destructive);
}
.uif-h-8 {
  height: 2rem;
}
.uif-flex {
  display: flex;
}
.uif-gap-2 {
  gap: 0.5rem;
}
.uif-gap-1 {
  gap: 0.25rem;
}
.uif-h-7 {
  height: 1.75rem;
}
.uif-h-3 {
  height: 0.75rem;
}
.uif-mr-1 {
  margin-right: 0.25rem;
}
.uif-pointer-events-none {
  pointer-events: none;
}
.uif-h-5 {
  height: 1.25rem;
}
.uif-opacity-50 {
  opacity: 0.5;
}
.uif-transition-transform {
  transition: transform 0.15s;
}
.uif-hover-bg-destructive_90:hover {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 90%, transparent);
  }
}
.uif-opacity-25 {
  opacity: 0.25;
}
.uif-opacity-75 {
  opacity: 0.75;
}
@keyframes uif-pulse {
  50% {
    opacity: 0.5;
  }
}
.uif-animate-pulse {
  animation: uif-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.uif-h-3_5 {
  height: 0.875rem;
}
.uif-w-3_5 {
  width: 0.875rem;
}
.uif-mt-0_5 {
  margin-top: 0.125rem;
}
.uif-bg-muted {
  background-color: var(--color-muted);
}
.uif-bg-background {
  background-color: var(--color-background);
}
.uif-p-3 {
  padding: 0.75rem;
}
[data-slot=card-content] .uif-__data-slot_card-content____-bg-transparent {
  background-color: transparent;
}
[data-slot=popover-content] .uif-__data-slot_popover-content____-bg-transparent {
  background-color: transparent;
}
.uif-relative {
  position: relative;
}
.uif-flex {
  display: flex;
}
.uif-flex-col {
  flex-direction: column;
}
.uif-w-full {
  width: 100%;
}
.uif-gap-4 {
  gap: 1rem;
}
.uif-absolute {
  position: absolute;
}
.uif-top-0 {
  top: 0;
}
.uif-items-center {
  align-items: center;
}
.uif-justify-between {
  justify-content: space-between;
}
.uif-p-0 {
  padding: 0rem;
}
.uif-select-none {
  user-select: none;
}
.uif-justify-center {
  justify-content: center;
}
.uif-gap-1_5 {
  gap: 0.375rem;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.uif-bg-popover {
  background-color: var(--color-popover);
}
.uif-inset-0 {
  inset: 0;
}
.uif-opacity-0 {
  opacity: 0;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-gap-1 {
  gap: 0.25rem;
}
.uif-h-8 {
  height: 2rem;
}
.uif-___svg_-text-muted-foreground > svg {
  color: var(--color-muted-foreground);
}
.uif-___svg_-size-3_5 > svg {
  width: 0.875rem;
  height: 0.875rem;
}
.uif-pl-2 {
  padding-left: 0.5rem;
}
.uif-pr-1 {
  padding-right: 0.25rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-flex-1 {
  flex: 1 1 0%;
}
.uif-font-normal {
  font-weight: 400;
}
.uif-text-_0_8rem_ {
  font-size: 0.8rem;
}
.uif-mt-2 {
  margin-top: 0.5rem;
}
.uif-text-center {
  text-align: center;
}
.uif-bg-accent {
  background-color: var(--color-accent);
}
.uif-text-accent-foreground {
  color: var(--color-accent-foreground);
}
.uif-opacity-50 {
  opacity: 0.5;
}
.uif-size-4 {
  width: 1rem;
  height: 1rem;
}
.uif-___span_-text-xs > span {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-___span_-opacity-70 > span {
  opacity: 0.7;
}
:is(.dark *) .uif-dark-hover-text-accent-foreground:hover {
  color: var(--color-accent-foreground);
}
.uif-aspect-square {
  aspect-ratio: 1 / 1;
}
.uif-border {
  border-width: 1px;
}
.uif-bg-card {
  background-color: var(--color-card);
}
.uif-text-card-foreground {
  color: var(--color-card-foreground);
}
.uif-rounded-xl {
  border-radius: var(--radius-xl);
}
.uif-shadow-sm {
  box-shadow: var(--shadow-xs);
}
.uif-p-6 {
  padding: 1.5rem;
}
.uif-font-semibold {
  font-weight: 600;
}
.uif-tracking-tight {
  letter-spacing: -0.025em;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-pt-0 {
  padding-top: 0rem;
}
.uif-w-4 {
  width: 1rem;
}
.uif-h-4 {
  height: 1rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-h-8 {
  height: 2rem;
}
.uif-w-8 {
  width: 2rem;
}
.uif-h-full {
  height: 100%;
}
.uif-flex {
  display: flex;
}
.uif-flex-col {
  flex-direction: column;
}
.uif-items-center {
  align-items: center;
}
.uif-justify-center {
  justify-content: center;
}
.uif-w-full {
  width: 100%;
}
.uif-text-center {
  text-align: center;
}
.uif-w-auto {
  width: auto;
}
.uif-object-contain {
  object-fit: contain;
}
.uif-h-full {
  height: 100%;
}
.uif-p-8 {
  padding: 2rem;
}
.uif-text-center {
  text-align: center;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-text-destructive {
  color: var(--color-destructive);
}
.uif-mb-2 {
  margin-bottom: 0.5rem;
}
.uif-text-primary {
  color: var(--color-primary);
}
.uif-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.uif-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uif-border {
  border-width: 1px;
}
.uif-rounded-lg {
  border-radius: var(--radius-md, 0.375rem);
}
.uif-w-2 {
  width: 0.5rem;
}
.uif-h-2 {
  height: 0.5rem;
}
.uif-rounded-full {
  border-radius: 9999px;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-h-8 {
  height: 2rem;
}
.uif-w-8 {
  width: 2rem;
}
.uif-p-0 {
  padding: 0rem;
}
.uif-text-gray-400 {
  color: var(--color-muted-foreground);
}
.uif-text-red-500:hover {
  color: var(--color-destructive);
}
.uif-w-4 {
  width: 1rem;
}
.uif-h-4 {
  height: 1rem;
}
.uif-bg-destructive {
  background-color: var(--color-destructive);
}
.uif-w-3 {
  width: 0.75rem;
}
.uif-h-3 {
  height: 0.75rem;
}
.uif-absolute {
  position: absolute;
}
.uif-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.uif-text-white {
  color: hsl(var(--white));
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-rounded {
  border-radius: var(--radius, 0.25rem);
}
.uif-shadow-lg {
  box-shadow: var(--shadow-md);
}
.uif-opacity-0 {
  opacity: 0;
}
.uif-transition-all {
  transition: all 0.15s;
}
.uif-whitespace-nowrap {
  white-space: nowrap;
}
.uif-z-50 {
  z-index: 50;
}
.uif-pointer-events-none {
  pointer-events: none;
}
.uif-w-5 {
  width: 1.25rem;
}
.uif-h-5 {
  height: 1.25rem;
}
.uif-mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.uif-w-full {
  width: 100%;
}
.uif-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.uif-pb-2 {
  padding-bottom: 0.5rem;
}
.uif-shrink-0 {
  flex-shrink: 0;
}
.uif-rounded-md {
  border-radius: var(--radius-md, 0.375rem);
}
.uif-transition-colors {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.uif-space-y-2 {
  --space-y: 0.5rem;
  & > * + * {
    margin-top: var(--space-y);
  }
}
.uif-text-blue-600 {
  color: var(--color-blue-600);
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-cursor-pointer {
  cursor: pointer;
}
.uif-select-none {
  user-select: none;
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-hover-text-foreground:hover {
  color: var(--color-foreground);
}
.uif-mt-1 {
  margin-top: 0.25rem;
}
.uif-pl-4 {
  padding-left: 1rem;
}
.uif-border-muted {
  border-color: var(--color-muted);
}
.uif-mb-1 {
  margin-bottom: 0.25rem;
}
.uif-whitespace-pre-wrap {
  white-space: pre-wrap;
}
.uif-py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.uif-bg-card {
  background-color: var(--color-card);
}
.uif-border-border {
  border-color: var(--color-border);
}
.uif-shadow-sm {
  box-shadow: var(--shadow-xs);
}
.uif-hidden {
  display: none;
}
.uif-max-h-_200px_ {
  max-height: 200px;
}
.uif-pb-3 {
  padding-bottom: 0.75rem;
}
.uif-p-4 {
  padding: 1rem;
}
.uif-bg-muted {
  background-color: var(--color-muted);
}
.uif-bg-accent:hover {
  background-color: var(--color-accent);
}
.uif-w-1 {
  width: 0.25rem;
}
.uif-h-1 {
  height: 0.25rem;
}
.uif-max-w-_95%_ {
  max-width: 95%;
}
.uif-message-bubble {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.uif-highlight-ring {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  animation: uif-highlight-pulse 0.8s ease-in-out 3;
}
@keyframes uif-highlight-pulse {
  0%, 100% {
    outline-color: var(--color-primary);
  }
  50% {
    outline-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
}
.uif-shadow-md {
  box-shadow: var(--shadow-sm);
}
.uif-ml-4 {
  margin-left: 1rem;
}
.uif-space-y-1 {
  --space-y: 0.25rem;
  & > * + * {
    margin-top: var(--space-y);
  }
}
.uif-mb-0 {
  margin-bottom: 0rem;
}
.uif-font-semibold {
  font-weight: 600;
}
.uif-bg-white_20 {
  background-color: hsl(var(--white) / 0.2);
}
.uif-px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.uif-block {
  display: block;
}
.uif-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.uif-mt-3 {
  margin-top: 0.75rem;
}
.uif-mt-2 {
  margin-top: 0.5rem;
}
.uif-chat-token-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-size: 0.75rem;
  line-height: 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-md-alt);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}
.uif-chat-token-usage:hover .uif-chat-token-tooltip {
  opacity: 1;
  visibility: visible;
}
.uif-chat-input-frame {
  border-radius: var(--radius-xl);
}
.uif-chat-input-frame:focus-within {
  border-color: var(--color-border);
  box-shadow: var(--elevation-ring-primary);
}
.uif-underline {
  text-decoration-line: underline;
}
.uif-hover-opacity-80:hover {
  opacity: 0.8;
}
.uif-bg-primary_10 {
  background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  }
}
.uif-border-primary_20 {
  border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  }
}
.uif-hover-bg-destructive_90:hover {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 90%, transparent);
  }
}
.uif-max-w-3xl {
  max-width: 48rem;
}
.uif-bg-destructive_10 {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  }
}
.uif-border-destructive_20 {
  border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) 20%, transparent);
  }
}
.uif-bg-destructive_20 {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 20%, transparent);
  }
}
.uif-hover-bg-destructive_30:hover {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 30%, transparent);
  }
}
.uif-transition-transform {
  transition: transform 0.15s;
}
.uif-max-w-none {
  max-width: none;
}
.uif-italic {
  font-style: italic;
}
.uif-opacity-70 {
  opacity: 0.7;
}
.uif-bg-muted-foreground_50 {
  background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) 50%, transparent);
  }
}
.uif-border-l-2 {
  border-left-width: 2px;
}
.uif-md {
  font-size: 0.875rem;
  line-height: 1.25rem;
  max-width: none;
}
.uif-md > :last-child {
  margin-bottom: 0;
}
.uif-md p {
  margin: 0 0 0.5rem;
}
.uif-md ul {
  list-style: disc;
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}
.uif-md ol {
  list-style: decimal;
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}
.uif-md li {
  margin: 0;
}
.uif-md li + li {
  margin-top: 0.25rem;
}
.uif-md strong {
  font-weight: 600;
}
.uif-md em {
  font-style: italic;
}
.uif-md h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.75rem 0 0.5rem;
}
.uif-md h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
}
.uif-md code {
  background-color: var(--color-muted);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius, 0.25rem);
  font-size: 0.75rem;
}
.uif-md a {
  color: var(--color-primary);
  text-decoration: underline;
}
.uif-md a:hover {
  opacity: 0.8;
}
.uif-md hr {
  margin: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}
.uif-md-on-primary, .uif-md-on-primary * {
  color: var(--color-primary-foreground);
}
.uif-md-on-primary code {
  background-color: color-mix(in srgb, hsl(var(--primary-foreground)) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) 15%, transparent);
  }
}
.uif-md-on-primary p {
  white-space: pre-wrap;
}
.uif-reasoning > summary {
  list-style: none;
}
.uif-reasoning > summary::-webkit-details-marker {
  display: none;
}
.uif-reasoning[open] .uif-reasoning-chevron {
  transform: rotate(90deg);
}
@keyframes uif-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.uif-animate-bounce {
  animation: uif-bounce 1s infinite;
}
@keyframes uif-pulse {
  50% {
    opacity: 0.5;
  }
}
.uif-animate-pulse {
  animation: uif-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.uif-rounded-2xl {
  border-radius: var(--radius-xl);
}
.uif-bg-red-500 {
  background-color: var(--color-red-500);
}
.uif-chat-bubble {
  max-width: 85%;
  border-radius: var(--radius-md, 0.375rem);
  padding: 0.375rem 0.75rem;
  background-color: var(--color-muted);
  color: var(--color-foreground);
  word-break: break-word;
}
.uif-chat-bubble--own {
  background-color: var(--uif-chat-bubble-own-bg, var(--color-primary));
  color: var(--color-primary-foreground);
}
.uif-chat-bubble--pending {
  opacity: 0.7;
}
.uif-chat-bubble__stamp {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.7;
}
.uif-chat-bubble__sender {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.uif-chat-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  color: var(--color-muted-foreground);
}
.uif-chat-list-empty__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}
.uif-chat-list-empty__text {
  font-size: 0.875rem;
}
.uif-chat-messages {
  row-gap: 1rem;
  padding: 0.75rem;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
@container gpt-chat (min-width: 48rem) {
  .conversation-starters {
    display: none !important;
  }
}
[data-slot="voice-overlay-card"] {
  background: var(--color-card);
  color: var(--color-card-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 0.5rem);
  box-shadow: var(--elevation-lg);
}
[data-slot="voice-stop-btn"] {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.uif-bg-background {
  background-color: var(--color-background);
}
.uif-py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.uif-relative {
  position: relative;
}
.uif-min-h-0 {
  min-height: 0rem;
}
.uif-mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.uif-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.uif-space-y-6 {
  --space-y: 1.5rem;
  & > * + * {
    margin-top: var(--space-y);
  }
}
.uif-py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.uif-mt-2 {
  margin-top: 0.5rem;
}
.uif-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uif-rounded-lg {
  border-radius: var(--radius-md, 0.375rem);
}
.uif-bg-foreground {
  background-color: var(--color-foreground);
}
.uif-text-background {
  color: var(--color-background);
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-transition-opacity {
  transition: opacity 0.15s;
}
.uif-max-w-_95%_ {
  max-width: 95%;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-w-full {
  width: 100%;
}
.uif-max-w-3xl {
  max-width: 48rem;
}
.uif-hover-opacity-90:hover {
  opacity: 0.9;
}
.uif-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.uif-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.uif-flex {
  display: flex;
}
.uif-justify-center {
  justify-content: center;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-bg-card {
  background-color: var(--color-card);
}
.uif-border {
  border-width: 1px;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.uif-text-destructive {
  color: var(--color-destructive);
}
.uif-transition-colors {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.uif-cursor-pointer {
  cursor: pointer;
}
.uif-border-destructive_20 {
  border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) 20%, transparent);
  }
}
.uif-bg-destructive_20 {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 20%, transparent);
  }
}
.uif-hover-bg-destructive_30:hover {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 30%, transparent);
  }
}
.uif-h-full {
  height: 100%;
}
.uif-p-8 {
  padding: 2rem;
}
.uif-text-center {
  text-align: center;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-text-destructive {
  color: var(--color-destructive);
}
.uif-mb-2 {
  margin-bottom: 0.5rem;
}
.uif-text-primary {
  color: var(--color-primary);
}
.uif-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.uif-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uif-border {
  border-width: 1px;
}
.uif-rounded-lg {
  border-radius: var(--radius-md, 0.375rem);
}
.uif-w-2 {
  width: 0.5rem;
}
.uif-h-2 {
  height: 0.5rem;
}
.uif-rounded-full {
  border-radius: 9999px;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-h-8 {
  height: 2rem;
}
.uif-w-8 {
  width: 2rem;
}
.uif-p-0 {
  padding: 0rem;
}
.uif-text-gray-400 {
  color: var(--color-muted-foreground);
}
.uif-text-red-500:hover {
  color: var(--color-destructive);
}
.uif-w-4 {
  width: 1rem;
}
.uif-h-4 {
  height: 1rem;
}
.uif-bg-destructive {
  background-color: var(--color-destructive);
}
.uif-w-3 {
  width: 0.75rem;
}
.uif-h-3 {
  height: 0.75rem;
}
.uif-absolute {
  position: absolute;
}
.uif-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.uif-text-white {
  color: hsl(var(--white));
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-rounded {
  border-radius: var(--radius, 0.25rem);
}
.uif-shadow-lg {
  box-shadow: var(--shadow-md);
}
.uif-opacity-0 {
  opacity: 0;
}
.uif-transition-all {
  transition: all 0.15s;
}
.uif-whitespace-nowrap {
  white-space: nowrap;
}
.uif-z-50 {
  z-index: 50;
}
.uif-pointer-events-none {
  pointer-events: none;
}
.uif-w-5 {
  width: 1.25rem;
}
.uif-h-5 {
  height: 1.25rem;
}
.uif-mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.uif-w-full {
  width: 100%;
}
.uif-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.uif-pb-2 {
  padding-bottom: 0.5rem;
}
.uif-shrink-0 {
  flex-shrink: 0;
}
.uif-rounded-md {
  border-radius: var(--radius-md, 0.375rem);
}
.uif-transition-colors {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.uif-space-y-2 {
  --space-y: 0.5rem;
  & > * + * {
    margin-top: var(--space-y);
  }
}
.uif-text-blue-600 {
  color: var(--color-blue-600);
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-cursor-pointer {
  cursor: pointer;
}
.uif-select-none {
  user-select: none;
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-hover-text-foreground:hover {
  color: var(--color-foreground);
}
.uif-mt-1 {
  margin-top: 0.25rem;
}
.uif-pl-4 {
  padding-left: 1rem;
}
.uif-border-muted {
  border-color: var(--color-muted);
}
.uif-mb-1 {
  margin-bottom: 0.25rem;
}
.uif-whitespace-pre-wrap {
  white-space: pre-wrap;
}
.uif-py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.uif-bg-card {
  background-color: var(--color-card);
}
.uif-border-border {
  border-color: var(--color-border);
}
.uif-shadow-sm {
  box-shadow: var(--shadow-xs);
}
.uif-hidden {
  display: none;
}
.uif-max-h-_200px_ {
  max-height: 200px;
}
.uif-pb-3 {
  padding-bottom: 0.75rem;
}
.uif-p-4 {
  padding: 1rem;
}
.uif-bg-muted {
  background-color: var(--color-muted);
}
.uif-bg-accent:hover {
  background-color: var(--color-accent);
}
.uif-w-1 {
  width: 0.25rem;
}
.uif-h-1 {
  height: 0.25rem;
}
.uif-max-w-_95%_ {
  max-width: 95%;
}
.uif-message-bubble {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.uif-highlight-ring {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  animation: uif-highlight-pulse 0.8s ease-in-out 3;
}
@keyframes uif-highlight-pulse {
  0%, 100% {
    outline-color: var(--color-primary);
  }
  50% {
    outline-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
}
.uif-shadow-md {
  box-shadow: var(--shadow-sm);
}
.uif-ml-4 {
  margin-left: 1rem;
}
.uif-space-y-1 {
  --space-y: 0.25rem;
  & > * + * {
    margin-top: var(--space-y);
  }
}
.uif-mb-0 {
  margin-bottom: 0rem;
}
.uif-font-semibold {
  font-weight: 600;
}
.uif-bg-white_20 {
  background-color: hsl(var(--white) / 0.2);
}
.uif-px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.uif-block {
  display: block;
}
.uif-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.uif-mt-3 {
  margin-top: 0.75rem;
}
.uif-mt-2 {
  margin-top: 0.5rem;
}
.uif-chat-token-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--color-foreground);
  color: var(--color-background);
  font-size: 0.75rem;
  line-height: 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-md-alt);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}
.uif-chat-token-usage:hover .uif-chat-token-tooltip {
  opacity: 1;
  visibility: visible;
}
.uif-chat-input-frame {
  border-radius: var(--radius-xl);
}
.uif-chat-input-frame:focus-within {
  border-color: var(--color-border);
  box-shadow: var(--elevation-ring-primary);
}
.uif-underline {
  text-decoration-line: underline;
}
.uif-hover-opacity-80:hover {
  opacity: 0.8;
}
.uif-bg-primary_10 {
  background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  }
}
.uif-border-primary_20 {
  border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  }
}
.uif-hover-bg-destructive_90:hover {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 90%, transparent);
  }
}
.uif-max-w-3xl {
  max-width: 48rem;
}
.uif-bg-destructive_10 {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  }
}
.uif-border-destructive_20 {
  border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) 20%, transparent);
  }
}
.uif-bg-destructive_20 {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 20%, transparent);
  }
}
.uif-hover-bg-destructive_30:hover {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 30%, transparent);
  }
}
.uif-transition-transform {
  transition: transform 0.15s;
}
.uif-max-w-none {
  max-width: none;
}
.uif-italic {
  font-style: italic;
}
.uif-opacity-70 {
  opacity: 0.7;
}
.uif-bg-muted-foreground_50 {
  background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) 50%, transparent);
  }
}
.uif-border-l-2 {
  border-left-width: 2px;
}
.uif-md {
  font-size: 0.875rem;
  line-height: 1.25rem;
  max-width: none;
}
.uif-md > :last-child {
  margin-bottom: 0;
}
.uif-md p {
  margin: 0 0 0.5rem;
}
.uif-md ul {
  list-style: disc;
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}
.uif-md ol {
  list-style: decimal;
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}
.uif-md li {
  margin: 0;
}
.uif-md li + li {
  margin-top: 0.25rem;
}
.uif-md strong {
  font-weight: 600;
}
.uif-md em {
  font-style: italic;
}
.uif-md h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.75rem 0 0.5rem;
}
.uif-md h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
}
.uif-md code {
  background-color: var(--color-muted);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius, 0.25rem);
  font-size: 0.75rem;
}
.uif-md a {
  color: var(--color-primary);
  text-decoration: underline;
}
.uif-md a:hover {
  opacity: 0.8;
}
.uif-md hr {
  margin: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}
.uif-md-on-primary, .uif-md-on-primary * {
  color: var(--color-primary-foreground);
}
.uif-md-on-primary code {
  background-color: color-mix(in srgb, hsl(var(--primary-foreground)) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) 15%, transparent);
  }
}
.uif-md-on-primary p {
  white-space: pre-wrap;
}
.uif-reasoning > summary {
  list-style: none;
}
.uif-reasoning > summary::-webkit-details-marker {
  display: none;
}
.uif-reasoning[open] .uif-reasoning-chevron {
  transform: rotate(90deg);
}
@keyframes uif-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.uif-animate-bounce {
  animation: uif-bounce 1s infinite;
}
@keyframes uif-pulse {
  50% {
    opacity: 0.5;
  }
}
.uif-animate-pulse {
  animation: uif-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.uif-rounded-2xl {
  border-radius: var(--radius-xl);
}
.uif-bg-red-500 {
  background-color: var(--color-red-500);
}
.uif-border-input {
  border-color: var(--color-input);
}
.uif-size-4 {
  width: 1rem;
  height: 1rem;
}
.uif-shrink-0 {
  flex-shrink: 0;
}
.uif-border {
  border-width: 1px;
}
.uif-outline-none {
  outline: none;
}
.uif-grid {
  display: grid;
}
.uif-place-content-center {
  place-content: center;
}
.uif-text-current {
  color: currentColor;
}
.uif-transition-none {
  transition: none;
}
:is(.dark *) .uif-dark-bg-input_30 {
  background-color: color-mix(in srgb, hsl(var(--input)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) 30%, transparent);
  }
}
.uif-focus-visible-border-ring:focus-visible {
  border-color: var(--color-ring);
}
.uif-transition-shadow {
  transition: box-shadow 0.15s;
}
.uif-disabled-opacity-50:disabled {
  opacity: 0.5;
}
.uif-size-3_5 {
  width: 0.875rem;
  height: 0.875rem;
}
.uif-text-popover-foreground {
  color: var(--color-popover-foreground);
}
.uif-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.uif-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.uif-size-4 {
  width: 1rem;
  height: 1rem;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.uif-py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-outline-hidden {
  outline: hidden;
}
.uif-py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.uif-text-center {
  text-align: center;
}
.uif-p-1 {
  padding: 0.25rem;
}
.uif-rounded-sm {
  border-radius: var(--radius-sm);
}
.uif-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-select-none {
  user-select: none;
}
.uif-ml-auto {
  margin-left: auto;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-opacity-50 {
  opacity: 0.5;
}
.uif-____cmdk-group-heading__-text-muted-foreground [cmdk-group-heading] {
  color: var(--color-muted-foreground);
}
.uif-____cmdk-group-heading__-px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-____cmdk-group-heading__-font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.uif-____cmdk-group__-px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-____cmdk-group_-not__hidden_____cmdk-group__-pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
  padding-top: 0rem;
}
.uif-____cmdk-input-wrapper__svg_-h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.uif-____cmdk-input-wrapper__svg_-w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.uif-____cmdk-input__-h-12 [cmdk-input] {
  height: 3rem;
}
.uif-____cmdk-item__-px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-____cmdk-item__-py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.uif-____cmdk-item__svg_-h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.uif-____cmdk-item__svg_-w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.uif-bg-transparent {
  background-color: transparent;
}
.uif-____cmdk-group-heading__-py-1_5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.uif-____cmdk-group-heading__-text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-bg-popover {
  background-color: var(--color-popover);
}
.uif-p-0 {
  padding: 0rem;
}
.uif-disabled-opacity-50:disabled {
  opacity: 0.5;
}
.uif-max-h-_300px_ {
  max-height: 300px;
}
.uif-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-bg-border {
  background-color: var(--color-border);
}
.uif-h-px {
  height: 1px;
}
.uif-py-1_5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.uif-___svg_-pointer-events-none svg {
  pointer-events: none;
}
.uif-___svg_-shrink-0 svg {
  flex-shrink: 0;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-cta-section {
  background-color: var(--cta-section-bg);
}
.uif-cta-section-title {
  margin-bottom: var(--cta-section-title-margin-bottom);
  font-family: var(--cta-section-title-font-family);
  font-size: var(--cta-section-title-font-size);
  font-weight: var(--cta-section-title-font-weight);
  color: var(--cta-section-title-color);
  text-align: var(--cta-section-align, center);
}
.uif-cta-section-align {
  text-align: var(--cta-section-align, center);
}
.uif-bg-black_50 {
  background-color: color-mix(in srgb, #000 5000%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-black) 5000%, transparent);
  }
}
.uif-rounded-lg {
  border-radius: var(--radius-lg);
}
.uif-border {
  border-width: 1px;
}
.uif-p-6 {
  padding: 1.5rem;
}
.uif-shadow-lg {
  box-shadow: var(--shadow-md);
}
.uif-outline-none {
  outline: none;
}
.uif-ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.uif-focus-ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.uif-rounded-xs {
  border-radius: var(--radius-xs, 0.125rem);
}
.uif-transition-opacity {
  transition: opacity 0.15s;
}
.uif-hover-opacity-100:hover {
  opacity: 1;
}
.uif-focus-ring-2:focus {
  box-shadow: var(--elevation-ring-focus-solid);
}
.uif-focus-outline-hidden:focus {
  outline: hidden;
}
.uif-disabled-pointer-events-none:disabled {
  pointer-events: none;
}
.uif-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.uif-opacity-70 {
  opacity: 0.7;
}
.uif-___svg_-pointer-events-none svg {
  pointer-events: none;
}
.uif-___svg_-shrink-0 svg {
  flex-shrink: 0;
}
.uif-bg-background {
  background-color: var(--color-background);
}
@container (min-width: 40rem) {
  .uif-sm-max-w-lg {
    max-width: 32rem;
  }
}
.uif-text-center {
  text-align: center;
}
@container (min-width: 40rem) {
  .uif-sm-text-left {
    text-align: left;
  }
}
.uif-text-lg {
  font-size: var(--font-size-lg);
  line-height: 1.75rem;
}
.uif-font-semibold {
  font-weight: var(--font-weight-semibold);
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-text-sm {
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
}
.uif-mb-3 {
  margin-bottom: 0.75rem;
}
.uif-bg-muted {
  background-color: var(--color-muted);
}
.uif-rounded-lg {
  border-radius: var(--radius-lg);
}
.uif-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.uif-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-w-4 {
  width: 1rem;
}
.uif-h-4 {
  height: 1rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uif-w-3 {
  width: 0.75rem;
}
.uif-h-3 {
  height: 0.75rem;
}
.uif-p-4 {
  padding: 1rem;
}
.uif-border {
  border-width: 1px;
}
.uif-rounded {
  border-radius: var(--radius-sm);
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-mt-1 {
  margin-top: 0.25rem;
}
.uif-opacity-60 {
  opacity: 0.6;
}
.uif-p-8 {
  padding: 2rem;
}
.uif-text-center {
  text-align: center;
}
.uif-space-y-2 {
  --space-y: 0.5rem;
  & > * + * {
    margin-top: var(--space-y);
  }
}
.uif-h-10 {
  height: 2.5rem;
}
.uif-w-10 {
  width: 2.5rem;
}
.uif-mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.uif-opacity-50 {
  opacity: 0.5;
}
.uif-h-full {
  height: 100%;
}
.uif-text-right {
  text-align: right;
}
.uif-highlight {
  background-color: color-mix(in srgb, hsl(var(--primary)) 22%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
  }
  animation: uif-highlight-pulse 1.1s ease-in-out infinite;
  transition: background-color 0.45s ease-out;
}
@keyframes uif-highlight-pulse {
  0%, 100% {
    background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
  }
  50% {
    background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  }
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-w-full {
  width: 100%;
}
.uif-h-full {
  height: 100%;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.puck-input {
  height: 2.25rem;
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-input);
  background: var(--color-background);
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-base);
  box-shadow: var(--elevation-xs);
  transition: color 0.15s,	box-shadow 0.15s;
  outline: none;
}
@container (min-width: 48rem) {
  .puck-input {
    font-size: var(--font-size-sm);
  }
}
.puck-input::placeholder {
  color: var(--color-muted-foreground);
}
.puck-input::file-selector-button {
  color: var(--color-foreground);
  display: inline-flex;
  height: 1.75rem;
  border: 0;
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.puck-input::selection {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.puck-input:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
.puck-input:focus-visible {
  border-color: var(--color-ring);
  box-shadow: var(--elevation-ring-focus);
}
.puck-input[aria-invalid="true"] {
  border-color: var(--color-destructive);
  box-shadow: var(--elevation-ring-destructive);
}
.dark .puck-input[aria-invalid="true"] {
  box-shadow: var(--elevation-ring-destructive-strong);
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.puck-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
}
.uif-h-10 {
  height: 2.5rem;
}
.uif-w-auto {
  width: auto;
}
.uif-max-w-_160px_ {
  max-width: 160px;
}
.uif-object-contain {
  object-fit: contain;
}
.uif-inline-block {
  display: inline-block;
}
.uif-size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.uif-rounded-full {
  border-radius: 9999px;
}
@keyframes uif-logo-loading-pulse-kf {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.uif-logo-loading-pulse {
  animation: uif-logo-loading-pulse-kf 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.uif-logo-loading-dark {
  display: none;
}
.dark .uif-logo-loading-light {
  display: none;
}
.dark .uif-logo-loading-dark {
  display: block;
}
.uif-bg-current {
  background-color: currentColor;
}
.uif-mr-2 {
  margin-right: 0.5rem;
}
@keyframes uif-pulse {
  50% {
    opacity: 0.5;
  }
}
.uif-animate-pulse {
  animation: uif-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.uif-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}
.uif-page-frame-zone {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.uif-page-frame-zone .puck-root-slot, .uif-page-frame-zone .puck-root-slot > * {
  overflow: visible;
  min-height: 0;
}
.uif-page-frame-root[data-frame-scroll="fill"] .puck-root-slot {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
}
.uif-page-frame-root[data-frame-scroll="fill"] .puck-root-slot > * {
  display: flex;
  min-height: 0;
}
.uif-panel-body, .uif-panel-body .puck-root-slot {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.uif-panel-body .puck-root-slot > * {
  height: 100%;
  display: flex;
  min-height: 0;
}
.puck-root-slot[data-page-scroll="fill"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
}
.puck-root-slot[data-page-scroll="fill"] > * {
  display: flex;
  min-height: 0;
}
.utility-shell-body {
  position: relative;
  min-height: 0;
}
html:has([data-frame-scroll="fill"]), html:has([data-frame-scroll="fill"]) body {
  overflow: hidden;
  height: var(--app-viewport-height, 100dvh);
}
html:has([data-frame-scroll="fill"]) body :has([data-frame-scroll="fill"]) {
  height: 100%;
  min-height: 0;
}
.uif-focus-z-10:focus {
  z-index: 10;
}
.uif-size-4 {
  width: 1rem;
  height: 1rem;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-ml-auto {
  margin-left: auto;
}
.uif-text-foreground_50 {
  color: color-mix(in srgb, hsl(var(--foreground)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) 50%, transparent);
  }
}
.uif-opacity-50 {
  opacity: 0.5;
}
.uif-hidden {
  display: none;
}
.uif-opacity-100 {
  opacity: 1;
}
.uif-text-popover-foreground {
  color: var(--color-popover-foreground);
}
.uif-z-50 {
  z-index: 50;
}
.uif-w-72 {
  width: 18rem;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.uif-border {
  border-width: 1px;
}
.uif-p-4 {
  padding: 1rem;
}
.uif-shadow-md {
  box-shadow: var(--shadow-sm);
}
.uif-bg-popover {
  background-color: var(--color-popover);
}
.uif-outline-hidden {
  outline: hidden;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-flex-col {
  flex-direction: column;
}
.uif-flex {
  display: flex;
}
.uif-gap-0_5 {
  gap: 0.125rem;
}
.uif-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-py-0_5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.uif-w-full {
  width: 100%;
}
.uif-justify-center {
  justify-content: center;
}
.uif-items-center {
  align-items: center;
}
.uif-gap-2 {
  gap: 0.5rem;
}
.uif-h-4 {
  height: 1rem;
}
.uif-w-4 {
  width: 1rem;
}
.uif-rounded-full {
  border-radius: 9999px;
}
.uif-border {
  border-width: 1px;
}
.uif-pb-6 {
  padding-bottom: 1.5rem;
}
.uif-text-center {
  text-align: center;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-flex-col {
  flex-direction: column;
}
.uif-text-gray-600 {
  color: var(--color-foreground);
}
.uif-pl-7 {
  padding-left: 1.75rem;
}
.uif-pr-2 {
  padding-right: 0.5rem;
}
.uif-rounded {
  border-radius: var(--radius, 0.25rem);
}
.uif-border-border {
  border-color: var(--color-border);
}
.uif-justify-center {
  justify-content: center;
}
.uif-flex-wrap {
  flex-wrap: wrap;
}
.uif-h-2 {
  height: 0.5rem;
}
.uif-w-2 {
  width: 0.5rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-w-full {
  width: 100%;
}
.uif-gap-1_5 {
  gap: 0.375rem;
}
.uif-gap-1 {
  gap: 0.25rem;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-flex {
  display: flex;
}
.uif-h-6 {
  height: 1.5rem;
}
.uif-w-6 {
  width: 1.5rem;
}
.uif-h-5 {
  height: 1.25rem;
}
.uif-w-5 {
  width: 1.25rem;
}
.uif-inline-block {
  display: inline-block;
}
.uif-w-auto {
  width: auto;
}
.uif-p-2 {
  padding: 0.5rem;
}
.uif-pt-6 {
  padding-top: 1.5rem;
}
.uif-mr-2 {
  margin-right: 0.5rem;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-p-0 {
  padding: 0rem;
}
.uif-gap-0_5 {
  gap: 0.125rem;
}
.uif-relative {
  position: relative;
}
.uif-bg-background {
  background-color: var(--color-background);
}
.uif-bg-info {
  background-color: var(--color-info);
}
.uif-text-info-foreground {
  color: var(--color-info-foreground);
}
.uif-inline-flex {
  display: inline-flex;
}
.uif-w-3 {
  width: 0.75rem;
}
.uif-h-3 {
  height: 0.75rem;
}
.uif-cursor-pointer {
  cursor: pointer;
}
:is(.dark *) .uif-dark-bg-gray-800 {
  background-color: var(--color-card);
}
.uif-w-3_5 {
  width: 0.875rem;
}
.uif-h-3_5 {
  height: 0.875rem;
}
.uif-pt-1_5 {
  padding-top: 0.375rem;
}
.uif-pb-1_5 {
  padding-bottom: 0.375rem;
}
.uif-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.uif-pb-2 {
  padding-bottom: 0.5rem;
}
.uif-w-32 {
  width: 8rem;
}
.uif-h-9 {
  height: 2.25rem;
}
.uif-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uif-whitespace-nowrap {
  white-space: nowrap;
}
.uif-justify-between {
  justify-content: space-between;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.uif-border-input {
  border-color: var(--color-input);
}
.uif-outline-none {
  outline: none;
}
.uif-bg-muted {
  background-color: var(--color-muted);
}
.tg-ui-cells-cell-btn {
  outline: 2px solid transparent;
  outline-offset: 2px;
  min-height: 24px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.tg-ui-cells-cell-label {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  cursor: pointer;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.tg-ui-cells-time-row {
  border-top-width: 1px;
  border-top-color: var(--color-border);
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tg-ui-cells-time-label {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  flex-shrink: 0;
}
.tg-ui-cells-time-input {
  height: 2rem;
  width: 8rem;
}
.tg-ui-cells-action-row {
  border-top-width: 1px;
  border-top-color: var(--color-border);
  padding: 0.5rem 0.75rem;
  display: flex;
  gap: 0.5rem;
}
.tg-ui-cells-ml-auto {
  margin-left: auto;
}
.tg-ui-cells-due-date-btn {
  outline: 2px solid transparent;
  outline-offset: 2px;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.tg-ui-cells-due-date-overdue {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-destructive);
}
.tg-ui-cells-due-date-empty {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  cursor: pointer;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.tg-ui-cells-action-row-solo {
  border-top-width: 1px;
  border-top-color: var(--color-border);
  padding: 0.5rem 0.75rem;
}
.tg-ui-cells-campaign-label {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-ui-cells-campaign-empty-label {
  font-size: 0.75rem;
  color: color-mix(in srgb, hsl(var(--muted-foreground)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) 50%, transparent);
  }
}
.tg-ui-cells-campaign-popover-content {
  width: 14rem;
  padding: 0.25rem;
}
.tg-ui-cells-campaign-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: 240px;
  overflow: auto;
}
.tg-ui-cells-campaign-empty-item {
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}
.tg-ui-cells-campaign-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-xs);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-foreground);
}
.tg-ui-cells-status-dot-base {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.tg-ui-cells-status-dot-active {
  background-color: hsl(var(--success));
}
.tg-ui-cells-status-dot-inactive {
  background-color: var(--cells-muted);
}
.tg-ui-cells-truncate-only {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-ui-cells-campaign-clear-btn {
  margin-top: 0.25rem;
  border-top-width: 1px;
  border-top-color: var(--color-border);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  border-radius: var(--radius-xs);
  text-align: left;
  width: 100%;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
}
.tg-ui-cells-telegram-icon {
  height: 1rem;
  width: 1rem;
  color: var(--cells-blue);
}
.tg-ui-cells-whatsapp-icon {
  height: 1rem;
  width: 1rem;
  color: hsl(var(--success));
}
.tg-ui-cells-icon3-muted {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color-muted-foreground);
  flex: none;
}
.tg-ui-cells-add-subtask-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  flex: 1 1 0%;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.tg-ui-cells-icon-cell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.tg-ui-cells-icon-popover-content {
  width: 16rem;
  padding: 0;
}
.tg-ui-cells-icon-search-header {
  padding: 0.5rem;
  border-bottom-width: 1px;
  border-bottom-color: var(--color-border);
}
.tg-ui-cells-icon-search-icon {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  height: 0.875rem;
  width: 0.875rem;
  color: var(--color-muted-foreground);
}
.tg-ui-cells-icon-list {
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.25rem;
}
.tg-ui-cells-icon-item-none {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border-radius: var(--radius-xs);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  text-align: left;
  color: var(--color-muted-foreground);
  background: transparent;
  border: none;
  cursor: pointer;
}
.tg-ui-cells-icon4-shrink {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}
.tg-ui-cells-icon-empty-item {
  padding: 1rem 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  text-align: center;
}
.tg-ui-cells-section-header {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.tg-ui-cells-section-header-top-border {
  margin-top: 0.5rem;
  border-top-width: 1px;
  border-top-color: var(--color-border);
  padding-top: 0.5rem;
}
.tg-ui-cells-select-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-xs);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  color: var(--color-foreground);
}
.tg-ui-cells-select-item-selected {
  background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) 50%, transparent);
  }
}
.tg-ui-cells-cell-btn-center {
  outline: 2px solid transparent;
  outline-offset: 2px;
  min-height: 24px;
  width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.tg-ui-cells-badge-label-base {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.tg-ui-cells-post-type-popover-content {
  width: 14rem;
  padding: 0.5rem;
  max-height: 20rem;
  overflow-y: auto;
}
.tg-ui-cells-post-type-empty {
  padding: 0.75rem 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  text-align: center;
}
.tg-ui-cells-clear-selection-btn {
  margin-top: 0.5rem;
  border-top-width: 1px;
  border-top-color: var(--color-border);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  border-radius: var(--radius-xs);
  text-align: left;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  cursor: pointer;
}
.tg-ui-cells-cell-btn-normal {
  outline: 2px solid transparent;
  outline-offset: 2px;
  min-height: 24px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.tg-ui-cells-platform-badge-base {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.tg-ui-cells-platforms-popover {
  width: 13rem;
  padding: 0.5rem;
}
.tg-ui-cells-select-item-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-xs);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--color-foreground);
}
.tg-ui-cells-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  transition-property: color;
  transition-duration: 150ms;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.tg-ui-cells-org-select-btn {
  outline: 2px solid transparent;
  outline-offset: 2px;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.tg-ui-cells-org-select-popover {
  width: 14rem;
  padding: 0.5rem;
}
.tg-ui-cells-searchable-select-btn {
  text-align: left;
  font-size: 0.875rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  outline: 2px solid transparent;
  outline-offset: 2px;
  min-width: 60px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-foreground);
}
.tg-ui-cells-assignee-btn {
  outline: 2px solid transparent;
  outline-offset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.tg-ui-cells-avatar-fallback-small {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  font-size: 10px;
  font-weight: 500;
}
.tg-ui-cells-assignee-empty {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  cursor: pointer;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.tg-ui-cells-assignee-popover {
  width: 13rem;
  padding: 0.25rem;
}
.tg-ui-cells-assignee-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: 15rem;
  overflow-y: auto;
}
.tg-ui-cells-assignee-item-none {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-xs);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  text-align: left;
  color: var(--color-muted-foreground);
  background: transparent;
  border: none;
  cursor: pointer;
}
.tg-ui-cells-contact-link-input-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-input);
  background-color: transparent;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  box-shadow: var(--elevation-xs);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  outline: 2px solid transparent;
  outline-offset: 2px;
  cursor: pointer;
  color: var(--color-foreground);
}
.tg-ui-cells-contact-link-clear-icon {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
  cursor: pointer;
  transition-property: color;
  transition-duration: 150ms;
}
.tg-ui-cells-icon4-muted-shrink {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
}
.tg-ui-cells-contact-link-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  text-align: left;
  font-size: 0.875rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  outline: 2px solid transparent;
  outline-offset: 2px;
  max-width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-foreground);
}
.tg-ui-cells-icon3-5-muted-shrink {
  height: 0.875rem;
  width: 0.875rem;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
}
.tg-ui-cells-contact-search-header {
  display: flex;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-color: var(--color-border);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.tg-ui-cells-contact-search-icon {
  margin-right: 0.5rem;
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  opacity: 0.5;
}
.tg-ui-cells-contact-search-input {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius-control);
  background-color: transparent;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  outline: none;
  border: none;
  color: var(--color-foreground);
}
.tg-ui-cells-mr2-icon4-blue {
  margin-right: 0.5rem;
  height: 1rem;
  width: 1rem;
  color: hsl(var(--info));
}
.tg-ui-cells-contact-team-badge {
  margin-left: 0.25rem;
  color: hsl(var(--info));
}
.tg-ui-cells-color-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.375rem;
}
.tg-ui-cells-color-swatch-btn {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  padding: 0;
}
.tg-ui-cells-border-foreground {
  border-color: var(--color-foreground);
}
.tg-ui-cells-border-transparent {
  border-color: transparent;
}
.tg-ui-cells-clear-color-btn {
  margin-top: 0.5rem;
  width: 100%;
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  text-align: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition-property: color;
  transition-duration: 150ms;
}
.tg-ui-cells-subtask-checkbox-checked {
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: color, background-color, border-color, fill, stroke;
  transition-duration: 150ms;
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  cursor: pointer;
}
.tg-ui-cells-subtask-checkbox-in-progress {
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: color, background-color, border-color, fill, stroke;
  transition-duration: 150ms;
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  cursor: pointer;
}
.tg-ui-cells-subtask-checkbox-normal {
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid	color-mix(in srgb, hsl(var(--muted-foreground)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid	color-mix(in srgb, var(--color-muted-foreground) 40%, transparent);
  }
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: color, background-color, border-color, fill, stroke;
  transition-duration: 150ms;
  background-color: transparent;
  color: transparent;
  cursor: pointer;
}
.tg-ui-cells-subtask-input {
  flex: 1 1 0%;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 0.75rem;
  padding: 0.125rem 0.25rem;
  box-shadow: var(--elevation-ring-primary-mix);
  border-radius: var(--radius-sm);
}
.tg-ui-cells-subtask-title-btn {
  flex: 1 1 0%;
  cursor: text;
  text-align: left;
  background-color: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  color: inherit;
}
.tg-ui-cells-line-through-muted {
  text-decoration-line: line-through;
  color: var(--color-muted-foreground);
}
.tg-ui-cells-subtask-delete-btn {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-muted-foreground);
  transition-property: color, background-color;
  transition-duration: 150ms;
  background: transparent;
  border: none;
  cursor: pointer;
}
.tg-ui-cells-destructive-btn {
  background-color: var(--color-destructive);
  color: var(--color-destructive-foreground);
  border: none;
}
.tg-ui-cells-status-badge {
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  white-space: nowrap;
}
.tg-ui-cells-status-badge[data-status="done"] {
  background-color: color-mix(in srgb, hsl(var(--success)) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
  }
  color: var(--color-success);
  border-color: color-mix(in srgb, hsl(var(--success)) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
  }
}
.tg-ui-cells-status-badge[data-status="in-progress"] {
  background-color: color-mix(in srgb, hsl(var(--warning)) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) 15%, transparent);
  }
  color: var(--color-warning);
  border-color: color-mix(in srgb, hsl(var(--warning)) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
  }
}
.tg-ui-cells-status-badge[data-status="blocked"] {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 15%, transparent);
  }
  color: var(--color-destructive);
  border-color: color-mix(in srgb, hsl(var(--destructive)) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) 35%, transparent);
  }
}
.tg-ui-cells-status-badge[data-status="pending_approval"] {
  background-color: color-mix(in srgb, hsl(var(--info)) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) 15%, transparent);
  }
  color: var(--color-info);
  border-color: color-mix(in srgb, hsl(var(--info)) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) 35%, transparent);
  }
}
.tg-ui-cells-status-badge[data-status="todo"] {
  background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) 12%, transparent);
  }
  color: var(--color-muted-foreground);
  border-color: var(--color-border);
}
.tg-ui-cells-status-popover {
  width: 11rem;
  padding: 0.25rem;
}
.tg-ui-cells-editable-number-input {
  width: 100%;
  padding: 0.125rem 0.375rem;
  font-size: 0.875rem;
  text-align: center;
  background-color: var(--color-background);
  border: 1px solid var(--color-ring);
  border-radius: var(--radius-sm);
  outline: none;
  font-variant-numeric: tabular-nums;
  color: var(--color-foreground);
}
.tg-ui-cells-editable-number-display {
  padding: 0.125rem 0.375rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  outline: none;
  background: transparent;
  border: none;
}
.tg-ui-cells-editable-select-btn {
  text-align: left;
  font-size: 0.875rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-foreground);
}
.tg-ui-cells-editable-select-popover {
  width: 11rem;
  padding: 0.25rem;
}
.tg-ui-cells-editable-text-input {
  width: 100%;
  padding: 0.125rem 0.375rem;
  font-size: 0.875rem;
  background-color: var(--color-background);
  border: 1px solid var(--color-ring);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--color-foreground);
}
.tg-ui-cells-editable-text-display {
  padding: 0.125rem 0.375rem;
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}
.tg-ui-cells-editable-text-display-empty {
  color: var(--color-muted-foreground);
  font-style: italic;
}
.tg-ui-cells-generic-editable-text-display {
  padding: 0.125rem 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.tg-ui-cells-indent-btn {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 150ms;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.tg-ui-cells-indent-btn-enabled {
  color: color-mix(in srgb, hsl(var(--muted-foreground)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) 60%, transparent);
  }
}
.tg-ui-cells-indent-btn-disabled {
  color: color-mix(in srgb, hsl(var(--muted-foreground)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) 20%, transparent);
  }
  cursor: not-allowed;
}
.tg-ui-cells-drag-handle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  color: color-mix(in srgb, hsl(var(--muted-foreground)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) 40%, transparent);
  }
  background: transparent;
  border: none;
  padding: 0;
  transition-property: color;
  transition-duration: 150ms;
}
.tg-ui-cells-inline-edit-trigger {
  cursor: text;
  border-radius: var(--radius-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 150ms;
  background: transparent;
  border: none;
  text-align: left;
  color: inherit;
  font-family: inherit;
}
.tg-ui-cells-empty-text-muted {
  font-size: 0.875rem;
  color: color-mix(in srgb, hsl(var(--foreground)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) 40%, transparent);
  }
}
.tg-ui-cells-member-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.75rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  border-radius: var(--radius-control);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background-color: var(--cells-blue-light);
  color: var(--cells-blue-strong);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 150ms;
  text-decoration: none;
}
.tg-ui-cells-pillar-popover {
  width: 11rem;
  padding: 0.25rem;
}
.tg-ui-cells-pillar-clear-btn {
  margin-top: 0.25rem;
  border-top-width: 1px;
  border-top-color: var(--color-border);
  padding-top: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  border-radius: var(--radius-xs);
  text-align: left;
  width: 100%;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
}
.tg-ui-cells-radio-checked {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 9999px;
  border-width: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 150ms;
  border-color: hsl(var(--info));
  background-color: hsl(var(--info));
  box-shadow: var(--elevation-ring-cells-glow);
  cursor: pointer;
  padding: 0;
}
.tg-ui-cells-radio-unchecked {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 9999px;
  border-width: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 150ms;
  border-color: color-mix(	in srgb,	hsl(var(--muted-foreground)) 40%,	transparent	);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(	in srgb,	var(--color-muted-foreground) 40%,	transparent	);
  }
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.tg-ui-cells-radio-inner-white {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}
.tg-ui-cells-status-dot-base {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.tg-ui-cells-calendar-time-footer {
  border-top-width: 1px;
  border-top-color: var(--color-border);
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tg-ui-cells-text-xs-muted-shrink {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  flex-shrink: 0;
}
.tg-ui-cells-time-input {
  height: 2rem;
  width: 8rem;
}
.tg-ui-cells-calendar-clear-footer {
  border-top-width: 1px;
  border-top-color: var(--color-border);
  padding: 0.5rem 0.75rem;
}
.tg-ui-cells-battery-bar-base {
  display: flex;
  height: 0.5rem;
  flex: 1 1 auto;
  min-width: 2.5rem;
  border-radius: 9999px;
  overflow: hidden;
  background-color: var(--color-muted);
}
.tg-ui-cells-battery-bar-fill {
  background-color: var(--color-success);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.tg-ui-cells-battery-label {
  font-size: 10px;
  color: var(--color-muted-foreground);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tg-ui-cells-task-title-input {
  min-width: 100%;
  field-sizing: content;
  background: transparent;
  border: none;
  outline: none;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.125rem 0.25rem;
  box-shadow: var(--elevation-ring-primary-mix);
  border-radius: var(--radius-sm);
}
.tg-ui-cells-task-title-display {
  display: block;
  max-width: 100%;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.125rem 0.375rem;
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}
.tg-ui-cells-time-estimate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.tg-ui-cells-time-estimate-popover {
  width: 9rem;
  padding: 0.25rem;
}
.tg-ui-cells-time-estimate-clear-btn {
  border-radius: var(--radius-xs);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  text-align: left;
  color: var(--color-muted-foreground);
  background: transparent;
  border: none;
  cursor: pointer;
}
.tg-ui-cells-scale75 {
  transform: scale(0.75);
}
.uif-text-accent-foreground {
  color: var(--color-accent-foreground);
}
.uif-rounded-sm {
  border-radius: var(--radius-sm);
}
.uif-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-outline-hidden {
  outline: hidden;
}
.uif-select-none {
  user-select: none;
}
.uif-ml-auto {
  margin-left: auto;
}
.uif-text-popover-foreground {
  color: var(--color-popover-foreground);
}
.uif-min-w-_8rem_ {
  min-width: 8rem;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.uif-border {
  border-width: 1px;
}
.uif-p-1 {
  padding: 0.25rem;
}
.uif-pr-2 {
  padding-right: 0.5rem;
}
.uif-pl-8 {
  padding-left: 2rem;
}
.uif-size-4 {
  width: 1rem;
  height: 1rem;
}
.uif-size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-py-1_5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.uif-focus-bg-accent:focus {
  background-color: var(--color-accent);
}
.uif-focus-text-accent-foreground:focus {
  color: var(--color-accent-foreground);
}
.uif-data-_inset_-pl-8[data-inset] {
  padding-left: 2rem;
}
.uif-___svg_-pointer-events-none svg {
  pointer-events: none;
}
.uif-___svg_-shrink-0 svg {
  flex-shrink: 0;
}
.uif-bg-popover {
  background-color: var(--color-popover);
}
.uif-shadow-lg {
  box-shadow: var(--shadow-md);
}
.uif-shadow-md {
  box-shadow: var(--shadow-sm);
}
.uif-data-_disabled_-pointer-events-none[data-disabled] {
  pointer-events: none;
}
.uif-data-_disabled_-opacity-50[data-disabled] {
  opacity: 0.5;
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-bg-border {
  background-color: var(--color-border);
}
.uif-h-px {
  height: 1px;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-size-3_5 {
  width: 0.875rem;
  height: 0.875rem;
}
.uif-text-popover-foreground {
  color: var(--color-popover-foreground);
}
.uif-min-w-_8rem_ {
  min-width: 8rem;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.uif-border {
  border-width: 1px;
}
.uif-p-1 {
  padding: 0.25rem;
}
.uif-text-accent-foreground {
  color: var(--color-accent-foreground);
}
.uif-rounded-sm {
  border-radius: var(--radius-sm);
}
.uif-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-outline-hidden {
  outline: hidden;
}
.uif-select-none {
  user-select: none;
}
.uif-pr-2 {
  padding-right: 0.5rem;
}
.uif-pl-8 {
  padding-left: 2rem;
}
.uif-size-4 {
  width: 1rem;
  height: 1rem;
}
.uif-size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.uif-ml-auto {
  margin-left: auto;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-py-1_5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.uif-bg-popover {
  background-color: var(--color-popover);
}
.uif-shadow-md {
  box-shadow: var(--shadow-sm);
}
.uif-focus-bg-accent:focus {
  background-color: var(--color-accent);
}
.uif-focus-text-accent-foreground:focus {
  color: var(--color-accent-foreground);
}
.uif-data-_disabled_-pointer-events-none[data-disabled] {
  pointer-events: none;
}
.uif-data-_disabled_-opacity-50[data-disabled] {
  opacity: 0.5;
}
.uif-data-_inset_-pl-8[data-inset] {
  padding-left: 2rem;
}
.uif-___svg_-pointer-events-none svg {
  pointer-events: none;
}
.uif-___svg_-shrink-0 svg {
  flex-shrink: 0;
}
.uif-bg-border {
  background-color: var(--color-border);
}
.uif-h-px {
  height: 1px;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-shadow-lg {
  box-shadow: var(--shadow-md);
}
.uif-size-3_5 {
  width: 0.875rem;
  height: 0.875rem;
}
.uif-mb-2 {
  margin-bottom: 0.5rem;
}
.uif-mt-1 {
  margin-top: 0.25rem;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-mt-3 {
  margin-top: 0.75rem;
}
.uif-text-muted-foreground_70 {
  color: color-mix(in srgb, hsl(var(--muted-foreground)) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) 70%, transparent);
  }
}
.uif-text-center {
  text-align: center;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uif-py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.puck-input {
  height: 2.25rem;
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-input);
  background: var(--color-background);
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-base);
  box-shadow: var(--elevation-xs);
  transition: color 0.15s,	box-shadow 0.15s;
  outline: none;
}
@container (min-width: 48rem) {
  .puck-input {
    font-size: var(--font-size-sm);
  }
}
.puck-input::placeholder {
  color: var(--color-muted-foreground);
}
.puck-input::file-selector-button {
  color: var(--color-foreground);
  display: inline-flex;
  height: 1.75rem;
  border: 0;
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.puck-input::selection {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.puck-input:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
.puck-input:focus-visible {
  border-color: var(--color-ring);
  box-shadow: var(--elevation-ring-focus);
}
.puck-input[aria-invalid="true"] {
  border-color: var(--color-destructive);
  box-shadow: var(--elevation-ring-destructive);
}
.dark .puck-input[aria-invalid="true"] {
  box-shadow: var(--elevation-ring-destructive-strong);
}
.puck-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
}
.uif-mb-2 {
  margin-bottom: 0.5rem;
}
.uif-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-flex {
  display: flex;
}
.uif-items-center {
  align-items: center;
}
.uif-gap-2 {
  gap: 0.5rem;
}
.uif-w-full {
  width: 100%;
}
.uif-rounded-lg {
  border-radius: var(--radius-md, 0.375rem);
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-font-medium {
  font-weight: 500;
}
.uif-text-amber-700 {
  color: var(--color-amber-700);
}
.uif-border {
  border-width: 1px;
}
.uif-w-4 {
  width: 1rem;
}
.uif-h-4 {
  height: 1rem;
}
.uif-flex-1 {
  flex: 1 1 0%;
}
.uif-text-left {
  text-align: left;
}
.uif-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uif-rounded {
  border-radius: var(--radius, 0.25rem);
}
.uif-transition-colors {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.uif-transition-all {
  transition: all 0.15s;
}
.uif-bg-muted {
  background-color: var(--color-muted);
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-w-64 {
  width: 16rem;
}
.uif-text-gray-400 {
  color: var(--color-muted-foreground);
}
.uif-text-blue-400 {
  color: var(--color-blue-400);
}
.uif-w-56 {
  width: 14rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uif-flex-shrink-0 {
  flex-shrink: 0;
}
.uif-hover-bg-muted_80:hover {
  background-color: color-mix(in srgb, hsl(var(--muted)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) 80%, transparent);
  }
}
.uif-bg-warning {
  background-color: var(--color-warning);
}
.uif-text-warning-foreground {
  color: var(--color-warning-foreground);
}
.uif-border-warning {
  border-color: var(--color-warning);
}
.uif-min-w-0 {
  min-width: 0rem;
}
.uif-py-1_5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.uif-p-0_5 {
  padding: 0.125rem;
}
.uif-w-3_5 {
  width: 0.875rem;
}
.uif-h-3_5 {
  height: 0.875rem;
}
.uif-text-sm {
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
}
.uif-transition-opacity {
  transition: opacity 0.15s;
}
.uif-font-normal {
  font-weight: var(--font-weight-normal);
}
.uif-text-xs {
  font-size: var(--font-size-xs);
  line-height: 1rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.uif-bg-background {
  background-color: var(--color-background);
}
.uif-hidden {
  display: none;
}
.uif-transition-all {
  transition: all 0.15s;
}
.uif-transition-colors {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.uif-font-semibold {
  font-weight: var(--font-weight-semibold);
}
.uif-hover-bg-muted_60:hover {
  background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) 60%, transparent);
  }
}
@container (min-width: 64rem) {
  .uif-lg-block {
    display: block;
  }
}
.uif-text-slate-500 {
  color: var(--color-slate-500);
}
.uif-w-full {
  width: 100%;
}
.uif-whitespace-nowrap {
  white-space: nowrap;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.uif-border {
  border-width: 1px;
}
.uif-border-input {
  border-color: var(--color-input);
}
.uif-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.uif-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-shadow-sm {
  box-shadow: var(--shadow-xs);
}
.uif-ring-offset-background {
  --tw-ring-offset-color: var(--color-background);
}
.uif-focus-outline-none:focus {
  outline: none;
}
.uif-focus-ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.uif-h-4 {
  height: 1rem;
}
.uif-w-4 {
  width: 1rem;
}
.uif-min-w-_8rem_ {
  min-width: 8rem;
}
.uif-bg-popover {
  background-color: var(--color-popover);
}
.uif-text-popover-foreground {
  color: var(--color-popover-foreground);
}
.uif-shadow-md {
  box-shadow: var(--shadow-sm);
}
.uif-select-none {
  user-select: none;
}
.uif-rounded-sm {
  border-radius: var(--radius-sm);
}
.uif-pl-2 {
  padding-left: 0.5rem;
}
.uif-pr-8 {
  padding-right: 2rem;
}
.uif-outline-none {
  outline: none;
}
.uif-bg-accent {
  background-color: var(--color-accent);
}
.uif-text-accent-foreground {
  color: var(--color-accent-foreground);
}
.uif-my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.uif-opacity-50 {
  opacity: 0.5;
}
.uif-h-3_5 {
  height: 0.875rem;
}
.uif-w-3_5 {
  width: 0.875rem;
}
.uif-bg-transparent {
  background-color: transparent;
}
.uif-data-_placeholder_-text-muted-foreground[data-placeholder] {
  color: var(--color-muted-foreground);
}
.uif-focus-ring-1:focus {
  box-shadow: 0 0 0 1px var(--color-ring);
}
.uif-disabled-opacity-50:disabled {
  opacity: 0.5;
}
.uif-py-1_5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.uif-focus-bg-accent:focus {
  background-color: var(--color-accent);
}
.uif-focus-text-accent-foreground:focus {
  color: var(--color-accent-foreground);
}
.uif-data-_disabled_-pointer-events-none[data-disabled] {
  pointer-events: none;
}
.uif-h-px {
  height: 1px;
}
.uif-h-9 {
  height: 2.25rem;
}
.uif-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.uif-max-h-_--radix-select-content-available-height_ {
  max-height: --radix-select-content-available-height;
}
.uif-p-1 {
  padding: 0.25rem;
}
.uif-h-_var_--radix-select-trigger-height__ {
  height: var(--radix-select-trigger-height);
}
.uif-min-w-_var_--radix-select-trigger-width__ {
  min-width: var(--radix-select-trigger-width);
}
.uif-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.uif-font-semibold {
  font-weight: 600;
}
.uif-data-_disabled_-opacity-50[data-disabled] {
  opacity: 0.5;
}
.uif-bg-muted {
  background-color: var(--color-muted);
}
.tg-smart-select-popover-content {
  width: var(--radix-popover-trigger-width);
  padding: 0;
}
.tg-smart-select-spinner-wrapper {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}
.tg-smart-select-command-list {
  max-height: none;
  overflow: visible;
}
.tg-smart-select-select-all-wrapper {
  border-bottom: 1px solid var(--color-border);
  padding: 0.25rem 0.5rem;
}
.tg-smart-select-select-all-button {
  width: 100%;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  transition: colors 150ms;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}
.tg-smart-select-empty-message {
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}
.tg-smart-select-group-overflow {
  overflow: visible;
}
.tg-smart-select-virtual-scroll-wrapper {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem;
}
.tg-smart-select-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
  background-color: var(--color-card);
  font-size: 0.875rem;
  text-align: left;
  transition: all 150ms;
}
.tg-smart-select-trigger-multi {
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.tg-smart-select-trigger-single {
  height: 2rem;
  padding: 0.5rem 0.75rem;
}
.tg-smart-select-trigger-empty {
  color: var(--color-muted-foreground);
}
.tg-smart-select-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-smart-select-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  }
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  max-width: 180px;
}
.tg-smart-select-chip-icon {
  height: 0.75rem;
  width: 0.75rem;
  flex-shrink: 0;
  cursor: pointer;
  color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) 60%, transparent);
  }
}
.tg-smart-select-trigger-value-single {
  color: var(--color-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-smart-select-trigger-clear-icon {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
  margin-left: auto;
}
.tg-smart-select-trigger-chevron-icon {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
  margin-left: auto;
  transition: transform 150ms;
}
.tg-smart-select-trigger-chevron-icon-open {
  transform: rotate(180deg);
}
.tg-smart-select-checkbox-container {
  height: 1rem;
  width: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tg-smart-select-checkbox-container-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.tg-smart-select-single-check-container {
  width: 1rem;
  flex-shrink: 0;
}
.tg-smart-select-icon-users {
  height: 1rem;
  width: 1rem;
  color: hsl(var(--info));
  flex-shrink: 0;
}
.tg-smart-select-icon-user {
  height: 1rem;
  width: 1rem;
  color: var(--color-muted-foreground);
  flex-shrink: 0;
}
.tg-smart-select-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.tg-smart-select-item-subtitle {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.tg-smart-select-team-badge {
  margin-left: 0.25rem;
  color: hsl(var(--info));
}
.uif-w-4 {
  width: 1rem;
}
.uif-w-3 {
  width: 0.75rem;
}
.uif-flex-col {
  flex-direction: column;
}
.uif-flex-1 {
  flex: 1 1 0%;
}
.uif-relative {
  position: relative;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-h-4 {
  height: 1rem;
}
.uif-mr-2 {
  margin-right: 0.5rem;
}
.uif-text-primary {
  color: var(--color-primary);
}
.uif-p-0 {
  padding: 0rem;
}
.uif-h-3 {
  height: 0.75rem;
}
.uif-text-primary-foreground {
  color: var(--color-primary-foreground);
}
.uif-flex {
  display: flex;
}
.uif-ml-1 {
  margin-left: 0.25rem;
}
.uif-min-w-0 {
  min-width: 0rem;
}
.puck-textarea {
  display: flex;
  min-height: 80px;
  width: 100%;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-input);
  background: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 50%, transparent);
  }
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: color 0.15s,	box-shadow 0.15s;
  outline: none;
}
.puck-textarea::placeholder {
  color: var(--color-muted-foreground);
}
.puck-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.puck-textarea:focus-visible {
  border-color: var(--color-ring);
  box-shadow: var(--elevation-ring-focus);
}
.puck-textarea[aria-invalid="true"] {
  border-color: var(--color-destructive);
  box-shadow: var(--elevation-ring-destructive);
}
.dark .puck-textarea[aria-invalid="true"] {
  box-shadow: var(--elevation-ring-destructive-strong);
}
.puck-root-slot[data-direction="row"] {
  --puck-root-direction: row;
}
.puck-root-slot[data-direction="column"] {
  --puck-root-direction: column;
}
.puck-root-slot[data-justify="start"] {
  --puck-root-justify: flex-start;
}
.puck-root-slot[data-justify="center"] {
  --puck-root-justify: center;
}
.puck-root-slot[data-justify="end"] {
  --puck-root-justify: flex-end;
}
.puck-root-slot[data-justify="between"] {
  --puck-root-justify: space-between;
}
.puck-root-slot[data-justify="around"] {
  --puck-root-justify: space-around;
}
.puck-root-slot[data-justify="evenly"] {
  --puck-root-justify: space-evenly;
}
.puck-root-slot[data-align="start"] {
  --puck-root-align: flex-start;
}
.puck-root-slot[data-align="center"] {
  --puck-root-align: center;
}
.puck-root-slot[data-align="end"] {
  --puck-root-align: flex-end;
}
.puck-root-slot[data-align="stretch"] {
  --puck-root-align: stretch;
}
.puck-root-slot[data-spacing="none"] {
  --puck-root-gap: 0;
}
.puck-root-slot[data-spacing="sm"] {
  --puck-root-gap: clamp(4px, 1vw, 8px);
}
.puck-root-slot[data-spacing="md"] {
  --puck-root-gap: clamp(8px, 1.5vw, 16px);
}
.puck-root-slot[data-spacing="lg"] {
  --puck-root-gap: clamp(16px, 2vw, 24px);
}
.puck-root-slot[data-spacing="xl"] {
  --puck-root-gap: clamp(24px, 3vw, 32px);
}
.puck-root-slot[data-padding="none"] {
  --puck-root-padding: 0;
}
.puck-root-slot[data-padding="sm"] {
  --puck-root-padding: clamp(0.5rem, 2vw, 1rem);
}
.puck-root-slot[data-padding="md"] {
  --puck-root-padding: clamp(1rem, 3vw, 1.5rem);
}
.puck-root-slot[data-padding="lg"] {
  --puck-root-padding: clamp(1.5rem, 4vw, 2rem);
}
.puck-root-slot[data-border="none"] {
  --puck-root-border: none;
}
.puck-root-slot[data-border="subtle"] {
  --puck-root-border: 1px solid color-mix(in srgb, hsl(var(--border)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --puck-root-border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  }
}
.puck-root-slot[data-border="solid"] {
  --puck-root-border: 1px solid var(--color-border);
}
.puck-root-slot[data-radius="none"] {
  --puck-root-radius: 0;
}
.puck-root-slot[data-radius="sm"] {
  --puck-root-radius: 0.375rem;
}
.puck-root-slot[data-radius="md"] {
  --puck-root-radius: 0.75rem;
}
.puck-root-slot[data-radius="lg"] {
  --puck-root-radius: 1rem;
}
.puck-root-slot[data-radius="full"] {
  --puck-root-radius: 9999px;
}
.puck-root-slot[data-shadow="none"] {
  --puck-root-shadow: none;
}
.puck-root-slot[data-shadow="sm"] {
  --puck-root-shadow: 0 1px 2px 0 hsl(var(--black) / 0.05);
}
.puck-root-slot[data-shadow="md"] {
  --puck-root-shadow: 0 4px 6px -1px hsl(var(--black) / 0.1);
}
.puck-root-slot[data-shadow="lg"] {
  --puck-root-shadow: 0 10px 25px -5px hsl(var(--black) / 0.2);
}
.puck-root-slot[data-has-border] {
  --puck-root-bg: var(--color-card);
}
.puck-root-slot:not([data-has-border]) {
  --puck-root-bg: transparent;
}
.puck-root-slot :has([data-list-table-block]) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
}
.uif-flex-1 {
  flex: 1 1 0%;
}
.uif-flex-col {
  flex-direction: column;
}
.uif-mt-1 {
  margin-top: 0.25rem;
}
.uif-p-4 {
  padding: 1rem;
}
.uif-mb-1 {
  margin-bottom: 0.25rem;
}
.uif-rounded {
  border-radius: var(--radius-sm);
}
.uif-border {
  border-width: 1px;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-text-destructive {
  color: var(--color-destructive);
}
.uif-font-medium {
  font-weight: 500;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-whitespace-pre-wrap {
  white-space: pre-wrap;
}
.uif-opacity-60 {
  opacity: 0.6;
}
.uif-border-destructive_20 {
  border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) 20%, transparent);
  }
}
.uif-bg-destructive_10 {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  }
}
.uif-page-frame-zone {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.uif-page-frame-zone .puck-root-slot, .uif-page-frame-zone .puck-root-slot > * {
  overflow: visible;
  min-height: 0;
}
.uif-page-frame-root[data-frame-scroll="fill"] .puck-root-slot {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
}
.uif-page-frame-root[data-frame-scroll="fill"] .puck-root-slot > * {
  display: flex;
  min-height: 0;
}
.uif-panel-body, .uif-panel-body .puck-root-slot {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.uif-panel-body .puck-root-slot > * {
  height: 100%;
  display: flex;
  min-height: 0;
}
.puck-root-slot[data-page-scroll="fill"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
}
.puck-root-slot[data-page-scroll="fill"] > * {
  display: flex;
  min-height: 0;
}
.utility-shell-body {
  position: relative;
  min-height: 0;
}
html:has([data-frame-scroll="fill"]), html:has([data-frame-scroll="fill"]) body {
  overflow: hidden;
  height: var(--app-viewport-height, 100dvh);
}
html:has([data-frame-scroll="fill"]) body :has([data-frame-scroll="fill"]) {
  height: 100%;
  min-height: 0;
}
.uif-min-w-0 {
  min-width: 0rem;
}
.uif-h-8 {
  height: 2rem;
}
.uif-w-8 {
  width: 2rem;
}
.uif-bg-card {
  background-color: var(--color-card);
}
.uif-border-b {
  border-bottom-width: 1px;
}
.uif-border-border {
  border-color: var(--color-border);
}
.uif-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-font-semibold {
  font-weight: 600;
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-flex-1 {
  flex: 1 1 0%;
}
.uif-flex {
  display: flex;
}
.uif-items-center {
  align-items: center;
}
.uif-overflow-hidden {
  overflow: hidden;
}
.uif-inline-flex {
  display: inline-flex;
}
.uif-shrink-0 {
  flex-shrink: 0;
}
.uif-justify-center {
  justify-content: center;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.uif-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-hover-bg-muted:hover {
  background-color: var(--color-muted);
}
.uif-hover-text-foreground:hover {
  color: var(--color-foreground);
}
.uif-bg-background {
  background-color: var(--color-background);
}
.uif-border-r {
  border-right-width: 1px;
}
.uif-border-l {
  border-left-width: 1px;
}
.resource-chat-fab {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  border-radius: 9999px;
  box-shadow: var(--elevation-launcher-active);
  transition: filter 0.2s,	transform 0.2s;
}
.resource-chat-fab:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.resource-chat-fab-label {
  position: relative;
  background-color: var(--color-card);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-md);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.resource-chat-fab-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%) rotate(45deg);
  background-color: var(--color-card);
  border-right: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
}
.resource-chat-fab-label-dismiss {
  color: var(--color-muted-foreground);
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1;
}
.resource-chat-fab-label-dismiss:hover {
  background-color: var(--color-muted);
  color: var(--color-foreground);
}
.uif-bg-background {
  background-color: var(--color-background);
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-select-none {
  user-select: none;
}
.uif-border-l {
  border-left-width: 1px;
}
.uif-flex-col {
  flex-direction: column;
}
.uif-border-t {
  border-top-width: 1px;
}
.uif-rounded-full {
  border-radius: 9999px;
}
.uif-bg-border {
  background-color: var(--color-border);
}
.uif-w-2 {
  width: 0.5rem;
}
.uif-transition-colors {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.uif-h-full {
  height: 100%;
}
.uif-h-2 {
  height: 0.5rem;
}
.uif-border {
  border-width: 1px;
}
.uif-border-dashed {
  border-style: dashed;
}
.uif-w-full {
  width: 100%;
}
.uif-mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.uif-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uif-h-full {
  height: 100%;
}
.uif-shrink-0 {
  flex-shrink: 0;
}
.uif-h-px {
  height: 1px;
}
.uif-w-px {
  width: 1px;
}
.uif-flex-shrink-0 {
  flex-shrink: 0;
}
.uif-border-border {
  border-color: var(--color-border);
}
.uif-bg-border {
  background-color: var(--color-border);
}
.uif-relative {
  position: relative;
}
.uif-w-full {
  width: 100%;
}
.uif-grow {
  flex-grow: 1;
}
.uif-overflow-hidden {
  overflow: hidden;
}
.uif-rounded-full {
  border-radius: 9999px;
}
.uif-absolute {
  position: absolute;
}
.uif-h-full {
  height: 100%;
}
.uif-bg-primary {
  background-color: var(--color-primary);
}
.uif-block {
  display: block;
}
.uif-h-4 {
  height: 1rem;
}
.uif-w-4 {
  width: 1rem;
}
.uif-border {
  border-width: 1px;
}
.uif-bg-background {
  background-color: var(--color-background);
}
.uif-shadow {
  box-shadow: var(--shadow-sm);
}
.uif-transition-colors {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.uif-disabled-pointer-events-none:disabled {
  pointer-events: none;
}
.uif-bg-primary_20 {
  background-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  }
}
.uif-border-primary_50 {
  border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  }
}
.uif-focus-visible-outline-none:focus-visible {
  outline: none;
}
.uif-focus-visible-ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.uif-disabled-opacity-50:disabled {
  opacity: 0.5;
}
.uif-h-1_5 {
  height: 0.375rem;
}
.uif-focus-visible-ring-1:focus-visible {
  box-shadow: 0 0 0 1px var(--color-ring);
}
.uif-select-none {
  user-select: none;
}
.uif-h-5 {
  height: 1.25rem;
}
.uif-w-9 {
  width: 2.25rem;
}
.uif-shrink-0 {
  flex-shrink: 0;
}
.uif-cursor-pointer {
  cursor: pointer;
}
.uif-rounded-full {
  border-radius: var(--radius-full);
}
.uif-shadow-sm {
  box-shadow: var(--shadow-xs);
}
.uif-transition-colors {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.uif-block {
  display: block;
}
.uif-h-4 {
  height: 1rem;
}
.uif-w-4 {
  width: 1rem;
}
.uif-bg-background {
  background-color: var(--color-background);
}
.uif-shadow-lg {
  box-shadow: var(--shadow-md);
}
.uif-ring-0 {
  box-shadow: none;
}
.uif-border-2 {
  border-width: 2px;
}
.uif-border-transparent {
  border-color: transparent;
}
.uif-focus-visible-outline-none:focus-visible {
  outline: none;
}
.uif-focus-visible-ring-2:focus-visible {
  box-shadow: 0 0 0 2px var(--color-ring);
}
.uif-focus-visible-ring-ring:focus-visible {
  --tw-ring-color: var(--color-ring);
}
.uif-focus-visible-ring-offset-background:focus-visible {
  --tw-ring-offset-color: var(--color-background);
}
.uif-disabled-opacity-50:disabled {
  opacity: 0.5;
}
.uif-transition-transform {
  transition: transform 0.15s;
}
.uif-pointer-events-none {
  pointer-events: none;
}
.public-shell-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 4px;
  background: color-mix(in srgb, hsl(var(--muted)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 40%, transparent);
  }
  overflow: hidden;
  pointer-events: none;
}
.public-shell-progress-fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--color-accent);
  animation: public-shell-progress-grow linear both;
  animation-timeline: scroll(root block);
}
@keyframes public-shell-progress-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@supports not (animation-timeline: scroll()) {
  .public-shell-progress-fill {
    transform: scaleX(1);
    opacity: 0.3;
  }
}
.public-shell-header {
  position: sticky;
  top: 0;
  z-index: 50;
  container-type: inline-size;
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
}
.public-shell-header .shell-header-slot .puck-container-row, .public-shell-header .shell-header-slot .puck-container-col, .public-shell-header .shell-header-slot .puck-container-grid {
  padding: 0 !important;
}
.public-shell-header .shell-header-slot .puck-root-slot, .public-shell-header .shell-header-slot .puck-container-row {
  flex-direction: row;
}
.public-shell-header::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--header-blur, 0px));
  -webkit-backdrop-filter: blur(var(--header-blur, 0px));
  z-index: -1;
  pointer-events: none;
}
.utility-shell-header-row {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  background: color-mix(in srgb, hsl(var(--card)) 72%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-card) 72%, transparent);
  }
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, hsl(var(--border)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  }
  box-shadow: var(--elevation-primary-soft);
}
.utility-shell-header-row > .utility-shell-header {
  flex: 1 1 auto;
  min-width: 0;
}
.utility-shell-header-row > .utility-shell-header-universal {
  flex: 0 0 auto;
  margin-left: auto;
  padding-inline: 0.75rem;
}
.shell-nav-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.shell-nav-hamburger {
  display: none;
}
.shell-nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, hsl(var(--foreground)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-foreground) 50%, transparent);
  }
  pointer-events: none;
}
@container (max-width: 1023.98px) {
  .public-shell-header:has(nav) .shell-nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    flex-shrink: 0;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 56;
  }
  .public-shell-header:has(nav) .shell-header-slot {
    padding-right: 3.75rem;
  }
  .shell-nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: var(--color-foreground);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .shell-nav-checkbox:checked ~ .shell-nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .shell-nav-checkbox:checked ~ .shell-nav-hamburger span:nth-child(2) {
    opacity: 0;
  }
  .shell-nav-checkbox:checked ~ .shell-nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .shell-header-slot nav {
    display: none !important;
  }
  .shell-nav-checkbox:checked ~ .shell-header-slot nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(280px, 80vw) !important;
    max-width: 80vw !important;
    background: var(--color-card) !important;
    box-shadow: var(--elevation-side);
    padding: 4.5rem 1.5rem 1.5rem !important;
    z-index: 55;
    gap: 0.75rem !important;
    row-gap: 0.75rem !important;
    column-gap: 0.75rem !important;
    overflow-y: auto !important;
  }
  .shell-nav-checkbox:checked ~ .shell-nav-scrim {
    display: block;
  }
}
[data-shell-slot="body"] {
  min-height: 0;
  overflow-y: auto;
}
[data-shell-slot="body"] .puck-root-slot, [data-shell-slot="body"] .puck-root-slot > * {
  overflow: visible;
  min-height: 0;
}
.uif-page-frame-zone {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.uif-page-frame-zone .puck-root-slot, .uif-page-frame-zone .puck-root-slot > * {
  overflow: visible;
  min-height: 0;
}
.uif-page-frame-root[data-frame-scroll="fill"] .puck-root-slot {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
}
.uif-page-frame-root[data-frame-scroll="fill"] .puck-root-slot > * {
  display: flex;
  min-height: 0;
}
.uif-panel-body, .uif-panel-body .puck-root-slot {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.uif-panel-body .puck-root-slot > * {
  height: 100%;
  display: flex;
  min-height: 0;
}
.puck-root-slot[data-page-scroll="fill"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
}
.puck-root-slot[data-page-scroll="fill"] > * {
  display: flex;
  min-height: 0;
}
.utility-shell-body {
  position: relative;
  min-height: 0;
}
html:has([data-frame-scroll="fill"]), html:has([data-frame-scroll="fill"]) body {
  overflow: hidden;
  height: var(--app-viewport-height, 100dvh);
}
html:has([data-frame-scroll="fill"]) body :has([data-frame-scroll="fill"]) {
  height: 100%;
  min-height: 0;
}
.uif-flex {
  display: flex;
}
.uif-flex-row {
  flex-direction: row;
}
.uif-flex-col {
  flex-direction: column;
}
.uif-flex-1 {
  flex: 1 1 0%;
}
.puck-text-default {
  color: var(--color-foreground);
}
.dark .puck-text-default {
  color: var(--color-foreground);
}
.puck-text-muted {
  color: var(--color-muted-foreground);
}
.dark .puck-text-muted {
  color: var(--color-muted-foreground);
}
.puck-text-success {
  color: hsl(var(--success));
}
.dark .puck-text-success {
  color: hsl(var(--success));
}
.puck-text-warning {
  color: hsl(var(--warning));
}
.dark .puck-text-warning {
  color: hsl(var(--warning));
}
.puck-text-error {
  color: var(--color-destructive);
}
.dark .puck-text-error {
  color: var(--color-destructive);
}
.puck-textarea {
  display: flex;
  min-height: 80px;
  width: 100%;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-input);
  background: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 50%, transparent);
  }
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: color 0.15s,	box-shadow 0.15s;
  outline: none;
}
.puck-textarea::placeholder {
  color: var(--color-muted-foreground);
}
.puck-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.puck-textarea:focus-visible {
  border-color: var(--color-ring);
  box-shadow: var(--elevation-ring-focus);
}
.puck-textarea[aria-invalid="true"] {
  border-color: var(--color-destructive);
  box-shadow: var(--elevation-ring-destructive);
}
.dark .puck-textarea[aria-invalid="true"] {
  box-shadow: var(--elevation-ring-destructive-strong);
}
.puck-textarea.puck-textarea--bare {
  border: 0;
  background: transparent;
  border-radius: 0;
}
.puck-textarea.puck-textarea--bare:focus-visible, .puck-textarea.puck-textarea--bare[aria-invalid="true"], .dark .puck-textarea.puck-textarea--bare[aria-invalid="true"] {
  border-color: transparent;
  box-shadow: none;
}
.loga-app {
  box-sizing: border-box;
}
.loga-app, .loga-app * {
  box-sizing: border-box;
}
.loga-app {
  height: 100%;
  margin: 0;
  font-family: "SF Mono", "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace,	monospace;
  background: radial-gradient(	circle at top right,	hsl(var(--chart-1) / 0.12),	transparent 30%	),	linear-gradient(180deg, var(--loga-bg) 0%, var(--loga-bg-end) 100%);
  color: var(--loga-text);
  color-scheme: dark;
}
@media (min-width: 1024px) {
  .loga-app {
    overflow: hidden;
  }
}
@layer components {
  .loga-badge {
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--loga-border);
    background-color: color-mix(in srgb, #fff 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 11px;
    color: var(--loga-muted);
  }
  .loga-topbar-badge {
    display: flex;
    height: 30px;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--loga-border);
    background-color: color-mix(in srgb, #fff 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2.5);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .loga-badge-connected {
    border-color: transparent;
    background-color: var(--loga-good);
    color: var(--loga-good-text);
  }
  .loga-badge-reconnecting {
    border-color: transparent;
    background-color: var(--loga-warn);
    color: var(--loga-warn-text);
  }
  .loga-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--loga-border);
    background-color: color-mix(in srgb, #fff 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.25);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .loga-stat-card {
    display: flex;
    min-width: 0px;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    border-radius: 10px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 4%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
    background-color: color-mix(in srgb, #000 22%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 22%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
  }
  .loga-label-upper {
    font-size: 10px;
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--loga-muted);
    text-transform: uppercase;
  }
  .loga-value-bold {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--loga-text);
  }
  .loga-btn-icon {
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--loga-muted);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 8%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--loga-text);
      }
    }
  }
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 2px;
  overflow-y: auto;
  flex: 1;
  align-content: start;
}
.process-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--loga-radius-lg);
  background: linear-gradient(	180deg,	color-mix(in srgb, hsl(var(--primary-foreground)) 3%, transparent),	color-mix(in srgb, hsl(var(--primary-foreground)) 1%, transparent)	);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(	180deg,	color-mix(in srgb, var(--color-primary-foreground) 3%, transparent),	color-mix(in srgb, var(--color-primary-foreground) 1%, transparent)	);
  }
  border: 1px solid var(--color-loga-border);
  transition: border-color 200ms ease;
}
.process-card-focused {
  border-color: hsl(var(--chart-1) / 0.25);
}
.process-card-offline {
  opacity: 0.4;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-name {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: var(--color-loga-text);
}
.card-status-online {
  color: var(--color-loga-good);
}
.card-status-errored {
  color: var(--color-loga-bad);
}
.card-status-other {
  color: var(--color-loga-warn);
}
.card-health {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--color-loga-border);
  background: color-mix(in srgb, hsl(var(--primary-foreground)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary-foreground) 3%, transparent);
  }
}
.card-health-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-loga-muted);
}
.card-hc-healthy {
  border-color: hsl(var(--chart-2) / 0.35);
  background: hsl(var(--chart-2) / 0.08);
  color: var(--color-loga-good);
}
.card-hc-healthy .card-health-dot {
  background: var(--color-loga-good);
  box-shadow: var(--elevation-glow-chart-2);
}
.card-hc-starting {
  border-color: hsl(var(--chart-4) / 0.35);
  background: hsl(var(--chart-4) / 0.08);
  color: var(--color-loga-warn);
  animation: health-pulse 2s ease-in-out infinite;
}
.card-hc-starting .card-health-dot {
  background: var(--color-loga-warn);
  box-shadow: var(--elevation-glow-chart-4);
}
.card-hc-reloading {
  border-color: color-mix(in srgb, hsl(var(--primary)) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
  }
  background: color-mix(in srgb, hsl(var(--primary)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  }
  color: var(--loga-blue);
  animation: health-pulse 2s ease-in-out infinite;
}
.card-hc-reloading .card-health-dot {
  background: var(--loga-blue-bright);
  box-shadow: var(--elevation-glow-primary);
}
.card-hc-down {
  border-color: color-mix(in srgb, hsl(var(--destructive)) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) 35%, transparent);
  }
  background: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  }
  color: var(--color-loga-bad);
  animation: health-pulse 1.5s ease-in-out infinite;
}
.card-hc-down .card-health-dot {
  background: var(--color-loga-bad);
  box-shadow: var(--elevation-glow-destructive);
}
.card-hc-nocheck {
  color: var(--color-loga-muted);
}
.card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.card-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 60px;
  padding: 6px 8px;
  border-radius: var(--loga-radius-md);
  background: color-mix(in srgb, hsl(var(--foreground)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-foreground) 20%, transparent);
  }
  border: 1px solid color-mix(in srgb, hsl(var(--primary-foreground)) 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-primary-foreground) 4%, transparent);
  }
}
.card-metric-label {
  font-size: 9px;
  color: var(--color-loga-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.card-metric-value {
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  color: var(--color-loga-text);
}
.card-metric-warn {
  color: var(--color-loga-warn);
}
.card-activity {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--loga-radius-sm);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  width: fit-content;
}
.card-activity-idle {
  color: var(--color-loga-muted);
  background: color-mix(in srgb, hsl(var(--primary-foreground)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary-foreground) 5%, transparent);
  }
  border: 1px solid color-mix(in srgb, hsl(var(--primary-foreground)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-primary-foreground) 8%, transparent);
  }
}
.card-activity-building {
  color: var(--color-loga-warn);
  background: hsl(var(--chart-4) / 0.1);
  border: 1px solid hsl(var(--chart-4) / 0.3);
  animation: health-pulse 1.5s ease-in-out infinite;
}
.card-activity-starting {
  color: var(--loga-blue);
  background: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  }
  border: 1px solid color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  }
  animation: health-pulse 1.5s ease-in-out infinite;
}
.card-activity-hmr {
  color: var(--loga-purple);
  background: hsl(var(--chart-5) / 0.1);
  border: 1px solid hsl(var(--chart-5) / 0.3);
}
.card-activity-serving {
  color: var(--color-loga-good);
  background: hsl(var(--chart-2) / 0.08);
  border: 1px solid hsl(var(--chart-2) / 0.25);
}
.card-warnings {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--loga-radius-sm);
  font-size: 10px;
  border: 1px solid;
}
.card-warning-error {
  background: color-mix(in srgb, hsl(var(--destructive)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-destructive) 8%, transparent);
  }
  border-color: color-mix(in srgb, hsl(var(--destructive)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) 25%, transparent);
  }
  color: var(--loga-bad-text);
}
.card-warning-warn {
  background: hsl(var(--chart-4) / 0.06);
  border-color: hsl(var(--chart-4) / 0.2);
  color: var(--loga-warn-soft);
}
.card-warning-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.card-warning-error .card-warning-dot {
  background: var(--color-loga-bad);
  box-shadow: var(--elevation-glow-destructive-soft);
}
.card-warning-warn .card-warning-dot {
  background: var(--color-loga-warn);
  box-shadow: var(--elevation-glow-chart-4-soft);
}
.card-warning-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-activity-line {
  padding: 5px 8px;
  border-radius: var(--loga-radius-sm);
  background: color-mix(in srgb, hsl(var(--foreground)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-foreground) 20%, transparent);
  }
  border: 1px solid color-mix(in srgb, hsl(var(--primary-foreground)) 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-primary-foreground) 4%, transparent);
  }
  overflow: hidden;
}
.card-activity-line-text {
  font-size: 10px;
  color: var(--color-loga-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.card-hmr-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--loga-radius-sm);
  background: hsl(var(--chart-5) / 0.06);
  border: 1px solid hsl(var(--chart-5) / 0.2);
  font-size: 10px;
}
.card-hmr-label {
  color: var(--loga-purple);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.card-hmr-value {
  color: var(--color-loga-text);
}
.card-hmr-avg {
  color: var(--color-loga-muted);
  margin-left: auto;
}
.managed-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 2px;
}
.managed-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.managed-section-header {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: var(--color-loga-text);
  padding: 4px 2px;
  border-bottom: 1px solid var(--color-loga-border);
}
.managed-group-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-loga-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 2px 4px;
}
.managed-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.managed-process-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.managed-process-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--loga-radius-md);
  background: linear-gradient(	180deg,	color-mix(in srgb, hsl(var(--primary-foreground)) 2%, transparent),	color-mix(in srgb, hsl(var(--primary-foreground)) 1%, transparent)	);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(	180deg,	color-mix(in srgb, var(--color-primary-foreground) 2%, transparent),	color-mix(in srgb, var(--color-primary-foreground) 1%, transparent)	);
  }
  border: 1px solid color-mix(in srgb, hsl(var(--primary-foreground)) 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-primary-foreground) 4%, transparent);
  }
  font-size: 12px;
}
.managed-process-row:hover {
  border-color: var(--color-loga-border);
}
.managed-process-status {
  flex-shrink: 0;
  font-size: 10px;
}
.managed-process-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-loga-text);
  min-width: 180px;
}
.managed-process-detail {
  font-size: 11px;
  color: var(--color-loga-muted);
  min-width: 70px;
}
.health-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  border: 1px solid var(--loga-border);
  background: color-mix(in srgb, hsl(var(--primary-foreground)) 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary-foreground) 3%, transparent);
  }
  transition: background 400ms ease,	border-color 400ms ease,	color 400ms ease;
}
.health-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--loga-muted);
  transition: background 400ms ease,	box-shadow 400ms ease;
}
.health-badge.hb-healthy {
  border-color: hsl(var(--chart-2) / 0.4);
  background: hsl(var(--chart-2) / 0.1);
  color: var(--loga-good);
}
.health-badge.hb-healthy .health-badge-dot {
  background: var(--loga-good);
  box-shadow: var(--elevation-glow-chart-2-strong);
}
.health-badge.hb-starting {
  border-color: hsl(var(--chart-4) / 0.4);
  background: hsl(var(--chart-4) / 0.1);
  color: var(--loga-warn);
  animation: health-pulse 2s ease-in-out infinite;
}
.health-badge.hb-starting .health-badge-dot {
  background: var(--loga-warn);
  box-shadow: var(--elevation-glow-chart-4-strong);
}
.health-badge.hb-down {
  border-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) 40%, transparent);
  }
  background: color-mix(in srgb, hsl(var(--destructive)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-destructive) 12%, transparent);
  }
  color: var(--loga-bad);
  animation: health-pulse 1.5s ease-in-out infinite;
}
.health-badge.hb-down .health-badge-dot {
  background: var(--loga-bad);
  box-shadow: var(--elevation-glow-destructive-strong);
}
.health-badge.hb-nocheck {
  color: var(--loga-muted);
}
@keyframes health-pulse {
  0%,	100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
.pill::before, .status-online::before, .status-errored::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
}
.pill::before {
  background: var(--loga-muted);
}
.status-online::before {
  background: var(--loga-good);
  box-shadow: var(--elevation-glow-chart-2);
}
.status-errored::before {
  background: var(--loga-bad);
  box-shadow: var(--elevation-glow-destructive);
}
.pill.status-online {
  border-color: hsl(var(--chart-2) / 0.4);
  background: hsl(var(--chart-2) / 0.1);
  color: var(--loga-good);
}
.pill.status-errored {
  border-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) 40%, transparent);
  }
  background: color-mix(in srgb, hsl(var(--destructive)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-destructive) 12%, transparent);
  }
  color: var(--loga-bad);
}
.log-box {
  overflow: auto;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-split {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
@container (max-width: calc(64rem - 1px)) {
  .log-split {
    grid-template-columns: 1fr;
  }
}
.log-ts {
  color: var(--loga-muted-strong);
}
.log-err {
  color: var(--loga-bad);
}
.log-warn {
  color: var(--loga-warn);
}
.log-ok {
  color: var(--loga-good);
}
.log-debug {
  color: var(--loga-muted-strong);
}
.log-accent {
  color: var(--loga-accent);
  font-weight: var(--font-weight-bold);
}
.log-method {
  color: var(--loga-accent);
  font-weight: var(--font-weight-bold);
}
.log-label {
  color: var(--loga-muted);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.log-summary {
  color: var(--loga-text);
  opacity: 0.8;
}
.log-collapsible {
  display: block;
}
.log-collapse-toggle {
  cursor: pointer;
  display: inline;
  border-radius: var(--loga-radius-xs);
  padding: 1px 3px;
  transition: background 100ms ease;
}
.log-collapse-toggle:hover {
  background: hsl(var(--chart-1) / 0.08);
}
.log-chevron {
  display: inline-block;
  width: 10px;
  font-size: 9px;
  color: var(--loga-accent);
  user-select: none;
}
.log-preview {
  color: var(--loga-muted);
  font-style: italic;
}
.log-full-text {
  display: block;
  margin: 3px 0 3px 14px;
  padding: 6px 10px;
  background: color-mix(in srgb, hsl(var(--foreground)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-foreground) 30%, transparent);
  }
  border: 1px solid color-mix(in srgb, hsl(var(--primary-foreground)) 6%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--color-primary-foreground) 6%, transparent);
  }
  border-radius: var(--loga-radius-sm);
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow: auto;
}
.log-line-hidden {
  display: none;
}
.log-highlight {
  background: hsl(var(--chart-4) / 0.35);
  color: var(--loga-white);
  border-radius: var(--loga-radius-2xs);
  padding: 0 1px;
}
@media (max-width: 1023px) {
  .stat-card {
    flex: 1 1 calc(33% - 4px);
    min-width: 0;
  }
  .log-split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .stat-card {
    flex: 1 1 calc(50% - 4px);
  }
}
.loga-app {
  --loga-status-healthy: hsl(var(--chart-2));
  --loga-status-warning: hsl(var(--chart-4));
  --loga-status-active: hsl(var(--primary));
  --loga-status-error: hsl(var(--destructive));
  --loga-status-idle: hsl(var(--chart-5));
  --loga-surface-overlay: hsl(var(--primary-foreground) / 0.04);
}
.portal-chrome-root {
  container-type: inline-size;
  container-name: portal-shell;
  background: var(--color-background);
}
.portal-chrome-toolbar {
  flex: 0 0 auto;
  min-height: var(--portal-toolbar-height, 56px);
  border-bottom: 1px solid var(--color-border);
  background: var(--portal-toolbar-bg, transparent);
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
}
.portal-chrome-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.portal-chrome-pane {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--color-border);
  background: hsl(var(--portal-pane-bg, var(--background)));
}
.portal-chrome-pane:last-child {
  border-right: 0;
}
:root {
  --pane-left-width: 240px;
  --pane-right-width: 360px;
  --pane-tabbar-height: 3.25rem;
  --pane-mobile-bottom-padding-standard: 3.5rem;
  --portal-toolbar-height: 56px;
  --portal-pane-breakpoint: 80rem;
  --ui-mobile-breakpoint: 48rem;
}
.portal-chrome-pane[data-slot="left"] {
  flex: 0 0 var(--pane-left-width, 240px);
}
.portal-chrome-pane[data-slot="center"] {
  flex: 1 1 auto;
}
.portal-chrome-pane[data-slot="center"] .puck-root-slot {
  padding-top: var(--space-md);
}
.portal-chrome-pane[data-slot="right"] {
  flex: 0 0 var(--pane-right-width, 360px);
}
.portal-chrome-tabbar {
  display: none;
}
.portal-sidebar-desktop {
  display: contents;
}
.portal-mobile-bottom-nav-wrap {
  display: none;
}
@container portal-shell (max-width: calc(80rem - 1px)) {
  .portal-sidebar-desktop {
    display: none;
  }
  .portal-mobile-bottom-nav-wrap {
    display: contents;
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)	.portal-chrome-pane[data-slot="left"] {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    overflow: visible;
    padding: 0;
    border: 0;
    z-index: 50;
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)	.portal-chrome-pane[data-slot="center"] {
    flex: 1 1 auto;
    border-right: 0;
    padding-bottom: calc(var(--pane-mobile-bottom-padding-standard, 3.5rem) + env(safe-area-inset-bottom, 0px));
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)	.portal-chrome-pane[data-slot="right"] {
    display: none;
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)[data-active-pane="right"]	.portal-chrome-pane[data-slot="right"] {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--portal-toolbar-height, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    border-right: 0;
    padding-bottom: calc(var(--pane-mobile-bottom-padding-standard, 3.5rem) + env(safe-area-inset-bottom, 0px));
  }
  .portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))	.portal-chrome-pane {
    display: none;
  }
  .portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))[data-active-pane="left"]	.portal-chrome-pane[data-slot="left"],	.portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))[data-active-pane="center"]	.portal-chrome-pane[data-slot="center"],	.portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))[data-active-pane="right"]	.portal-chrome-pane[data-slot="right"] {
    display: flex;
    flex: 1 1 auto;
    border-right: 0;
    padding-bottom: calc(var(--pane-tabbar-height, 3.25rem) + env(safe-area-inset-bottom, 0px));
  }
  .portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))	.portal-chrome-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--pane-tabbar-height, 3.25rem) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 40;
    background: hsl(var(--card, var(--background)));
    border-top: 1px solid var(--color-border);
  }
  .portal-chrome-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: hsl(var(--muted-foreground, var(--foreground)));
    background: transparent;
    border: 0;
    border-top: 2px solid transparent;
    cursor: pointer;
  }
  .portal-chrome-root[data-active-pane="left"]	.portal-chrome-tab[data-pane-tab="left"],	.portal-chrome-root[data-active-pane="center"]	.portal-chrome-tab[data-pane-tab="center"],	.portal-chrome-root[data-active-pane="right"]	.portal-chrome-tab[data-pane-tab="right"] {
    color: var(--color-foreground);
    border-top-color: var(--color-primary);
  }
  .portal-chrome-resize-gutter {
    display: none;
  }
  .portal-chrome-pane,	.portal-chrome-toolbar {
    max-width: 100cqw;
  }
}
.portal-chrome-pane {
  position: relative;
}
.portal-chrome-resize-gutter {
  position: relative;
  flex: 0 0 0px;
  width: 0;
  z-index: 10;
}
.portal-chrome-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  width: 12px;
  cursor: col-resize;
  background: transparent;
}
.portal-chrome-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: transparent;
  transition: background 120ms ease;
}
.portal-chrome-resize-handle:hover::after, .portal-chrome-resize-handle[data-active="true"]::after {
  background: var(--color-border);
}
.portal-chrome-root[data-resizing="true"] {
  cursor: col-resize;
  user-select: none;
}
.portal-chrome-root[data-resizing="true"] * {
  pointer-events: none;
}
.portal-chrome-root[data-resizing="true"] .portal-chrome-resize-handle {
  pointer-events: auto;
}
.portal-chrome-root[data-utility-active="console"] .portal-chrome-pane[data-slot="orchestrator"] {
  display: none;
}
.portal-chrome-root[data-utility-active="orchestrator"]	.portal-chrome-pane[data-slot="right"] {
  display: none;
}
.portal-chrome-root[data-utility-active="orchestrator"]	.portal-chrome-pane[data-slot="orchestrator"] {
  flex: 0 0 var(--pane-right-width, 360px);
}
.portal-mobile-pane {
  display: none;
}
.portal-mobile-root[data-active-pane="left"]	.portal-mobile-pane[data-slot="left"], .portal-mobile-root[data-active-pane="center"]	.portal-mobile-pane[data-slot="center"], .portal-mobile-root[data-active-pane="right"]	.portal-mobile-pane[data-slot="right"] {
  display: flex;
}
.portal-mobile-pane {
  --puck-root-overflow: visible;
  --puck-root-flex: none;
  --puck-root-height: auto;
}
.portal-chrome-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-height: 3rem;
}
.portal-chrome-toolbar > .portal-chrome-toolbar-page {
  flex: 1 1 auto;
  min-width: 0;
}
.portal-chrome-toolbar > .portal-chrome-toolbar-universal {
  flex: 0 0 auto;
  margin-left: auto;
}
.ppr-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}
.ppr-inline :has(.puck-root-slot), .ppr-inline .puck-root-slot {
  display: contents !important;
}
.portal-chrome-pane:not([data-slot="center"]) .puck-root-slot {
  padding-top: 0 !important;
}
:root {
  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
  --bp-xl: 80rem;
  --bp-2xl: 96rem;
}
.responsive-stack-when-narrow {
  display: flex;
  flex-direction: row;
  gap: var(--responsive-stack-gap, 1rem);
}
@container (max-width: calc(40rem - 1px)) {
  .responsive-stack-when-narrow {
    flex-direction: column;
  }
}
.responsive-grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(	auto-fit,	minmax(var(--responsive-grid-min, 280px), 1fr)	);
  gap: var(--responsive-grid-gap, 1rem);
}
@container (max-width: calc(40rem - 1px)) {
  .responsive-hide-when-narrow {
    display: none;
  }
}
@container (min-width: 40rem) {
  .responsive-show-when-narrow {
    display: none;
  }
}
.responsive-pad {
  padding: var(--responsive-pad-wide, 1.5rem);
}
@container (max-width: calc(40rem - 1px)) {
  .responsive-pad {
    padding: var(--responsive-pad-narrow, 0.75rem);
  }
}
:root {
  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
  --bp-xl: 80rem;
  --bp-2xl: 96rem;
}
.responsive-stack-when-narrow {
  display: flex;
  flex-direction: row;
  gap: var(--responsive-stack-gap, 1rem);
}
@container (max-width: calc(40rem - 1px)) {
  .responsive-stack-when-narrow {
    flex-direction: column;
  }
}
.responsive-grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(	auto-fit,	minmax(var(--responsive-grid-min, 280px), 1fr)	);
  gap: var(--responsive-grid-gap, 1rem);
}
@container (max-width: calc(40rem - 1px)) {
  .responsive-hide-when-narrow {
    display: none;
  }
}
@container (min-width: 40rem) {
  .responsive-show-when-narrow {
    display: none;
  }
}
.responsive-pad {
  padding: var(--responsive-pad-wide, 1.5rem);
}
@container (max-width: calc(40rem - 1px)) {
  .responsive-pad {
    padding: var(--responsive-pad-narrow, 0.75rem);
  }
}
.portal-chrome-root {
  container-type: inline-size;
  container-name: portal-shell;
  background: var(--color-background);
}
.portal-chrome-toolbar {
  flex: 0 0 auto;
  min-height: var(--portal-toolbar-height, 56px);
  border-bottom: 1px solid var(--color-border);
  background: var(--portal-toolbar-bg, transparent);
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
}
.portal-chrome-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.portal-chrome-pane {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--color-border);
  background: hsl(var(--portal-pane-bg, var(--background)));
}
.portal-chrome-pane:last-child {
  border-right: 0;
}
:root {
  --pane-left-width: 240px;
  --pane-right-width: 360px;
  --pane-tabbar-height: 3.25rem;
  --pane-mobile-bottom-padding-standard: 3.5rem;
  --portal-toolbar-height: 56px;
  --portal-pane-breakpoint: 80rem;
  --ui-mobile-breakpoint: 48rem;
}
.portal-chrome-pane[data-slot="left"] {
  flex: 0 0 var(--pane-left-width, 240px);
}
.portal-chrome-pane[data-slot="center"] {
  flex: 1 1 auto;
}
.portal-chrome-pane[data-slot="center"] .puck-root-slot {
  padding-top: var(--space-md);
}
.portal-chrome-pane[data-slot="right"] {
  flex: 0 0 var(--pane-right-width, 360px);
}
.portal-chrome-tabbar {
  display: none;
}
.portal-sidebar-desktop {
  display: contents;
}
.portal-mobile-bottom-nav-wrap {
  display: none;
}
@container portal-shell (max-width: calc(80rem - 1px)) {
  .portal-sidebar-desktop {
    display: none;
  }
  .portal-mobile-bottom-nav-wrap {
    display: contents;
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)	.portal-chrome-pane[data-slot="left"] {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    overflow: visible;
    padding: 0;
    border: 0;
    z-index: 50;
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)	.portal-chrome-pane[data-slot="center"] {
    flex: 1 1 auto;
    border-right: 0;
    padding-bottom: calc(var(--pane-mobile-bottom-padding-standard, 3.5rem) + env(safe-area-inset-bottom, 0px));
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)	.portal-chrome-pane[data-slot="right"] {
    display: none;
  }
  .portal-chrome-root:has(.portal-mobile-bottom-nav-wrap)[data-active-pane="right"]	.portal-chrome-pane[data-slot="right"] {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--portal-toolbar-height, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    border-right: 0;
    padding-bottom: calc(var(--pane-mobile-bottom-padding-standard, 3.5rem) + env(safe-area-inset-bottom, 0px));
  }
  .portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))	.portal-chrome-pane {
    display: none;
  }
  .portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))[data-active-pane="left"]	.portal-chrome-pane[data-slot="left"],	.portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))[data-active-pane="center"]	.portal-chrome-pane[data-slot="center"],	.portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))[data-active-pane="right"]	.portal-chrome-pane[data-slot="right"] {
    display: flex;
    flex: 1 1 auto;
    border-right: 0;
    padding-bottom: calc(var(--pane-tabbar-height, 3.25rem) + env(safe-area-inset-bottom, 0px));
  }
  .portal-chrome-root:not(:has(.portal-mobile-bottom-nav-wrap))	.portal-chrome-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--pane-tabbar-height, 3.25rem) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 40;
    background: hsl(var(--card, var(--background)));
    border-top: 1px solid var(--color-border);
  }
  .portal-chrome-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: hsl(var(--muted-foreground, var(--foreground)));
    background: transparent;
    border: 0;
    border-top: 2px solid transparent;
    cursor: pointer;
  }
  .portal-chrome-root[data-active-pane="left"]	.portal-chrome-tab[data-pane-tab="left"],	.portal-chrome-root[data-active-pane="center"]	.portal-chrome-tab[data-pane-tab="center"],	.portal-chrome-root[data-active-pane="right"]	.portal-chrome-tab[data-pane-tab="right"] {
    color: var(--color-foreground);
    border-top-color: var(--color-primary);
  }
  .portal-chrome-resize-gutter {
    display: none;
  }
  .portal-chrome-pane,	.portal-chrome-toolbar {
    max-width: 100cqw;
  }
}
.portal-chrome-pane {
  position: relative;
}
.portal-chrome-resize-gutter {
  position: relative;
  flex: 0 0 0px;
  width: 0;
  z-index: 10;
}
.portal-chrome-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  width: 12px;
  cursor: col-resize;
  background: transparent;
}
.portal-chrome-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: transparent;
  transition: background 120ms ease;
}
.portal-chrome-resize-handle:hover::after, .portal-chrome-resize-handle[data-active="true"]::after {
  background: var(--color-border);
}
.portal-chrome-root[data-resizing="true"] {
  cursor: col-resize;
  user-select: none;
}
.portal-chrome-root[data-resizing="true"] * {
  pointer-events: none;
}
.portal-chrome-root[data-resizing="true"] .portal-chrome-resize-handle {
  pointer-events: auto;
}
.portal-chrome-root[data-utility-active="console"] .portal-chrome-pane[data-slot="orchestrator"] {
  display: none;
}
.portal-chrome-root[data-utility-active="orchestrator"]	.portal-chrome-pane[data-slot="right"] {
  display: none;
}
.portal-chrome-root[data-utility-active="orchestrator"]	.portal-chrome-pane[data-slot="orchestrator"] {
  flex: 0 0 var(--pane-right-width, 360px);
}
.portal-mobile-pane {
  display: none;
}
.portal-mobile-root[data-active-pane="left"]	.portal-mobile-pane[data-slot="left"], .portal-mobile-root[data-active-pane="center"]	.portal-mobile-pane[data-slot="center"], .portal-mobile-root[data-active-pane="right"]	.portal-mobile-pane[data-slot="right"] {
  display: flex;
}
.portal-mobile-pane {
  --puck-root-overflow: visible;
  --puck-root-flex: none;
  --puck-root-height: auto;
}
.portal-chrome-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-height: 3rem;
}
.portal-chrome-toolbar > .portal-chrome-toolbar-page {
  flex: 1 1 auto;
  min-width: 0;
}
.portal-chrome-toolbar > .portal-chrome-toolbar-universal {
  flex: 0 0 auto;
  margin-left: auto;
}
.ppr-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}
.ppr-inline :has(.puck-root-slot), .ppr-inline .puck-root-slot {
  display: contents !important;
}
.portal-chrome-pane:not([data-slot="center"]) .puck-root-slot {
  padding-top: 0 !important;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.dark {
  color-scheme: dark;
}
.dark .prose {
  --tw-prose-body: hsl(var(--foreground));
  --tw-prose-headings: hsl(var(--foreground));
  --tw-prose-bold: hsl(var(--foreground));
  --tw-prose-links: hsl(var(--primary));
  --tw-prose-code: hsl(var(--foreground));
  --tw-prose-counters: hsl(var(--muted-foreground));
  --tw-prose-bullets: hsl(var(--muted-foreground));
  --tw-prose-hr: hsl(var(--border));
  --tw-prose-quotes: hsl(var(--foreground));
  --tw-prose-quote-borders: hsl(var(--border));
  --tw-prose-pre-bg: hsl(var(--secondary));
  --tw-prose-pre-code: hsl(var(--foreground));
}
body {
  margin: 0;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[style*="--font-body"] {
  font-family: var(--font-body);
}
code {
  font-family: var(--font-code);
}
:root {
  --text-fluid-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-fluid-base: clamp(1rem, 0.925rem + 0.375vw, 1.25rem);
  --text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --text-fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  --text-fluid-2xl: clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem);
  --text-fluid-3xl: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  --text-fluid-4xl: clamp(2rem, 1.25rem + 3.75vw, 3.75rem);
  --text-fluid-5xl: clamp(2.5rem, 1.25rem + 5vw, 4.5rem);
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
  --radius-control: var(--radius-md);
  --border-width-default: 1px;
  --border-width-thick: 2px;
  --border-color-default: hsl(var(--border));
  --border-color-primary: hsl(var(--primary));
  --border-color-subtle: hsl(var(--primary) / 0.2);
  --border-color-focus: hsl(var(--primary) / 0.5);
  --border-color-muted: hsl(var(--muted-foreground) / 0.3);
  --glow-xs: 0 0 0 0 currentColor;
  --glow-sm: 0 0 6px 2px currentColor;
  --glow-md: 0 0 20px 4px currentColor;
  --glow-focus-ring: 0 0 0 2px hsl(var(--ring));
  --glow-status-pulse: 0 0 6px 2px;
  --glow-status-pulse-color-active: hsl(var(--primary) / 0.6);
  --glow-status-pulse-color-active-soft: hsl(var(--primary) / 0.3);
  --glow-status-pulse-color-warning: hsl(var(--chart-4) / 0.6);
  --glow-status-pulse-color-warning-soft: hsl(var(--chart-4) / 0.3);
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-colors: color 0.15s, background-color 0.15s, border-color 0.15s;
  --transition-all-fast: all 0.15s;
  --transition-all-normal: all 0.3s;
  --leading-tight: 1.05;
  --leading-snug: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.3em;
}
@layer base {
  * {
    border-color: var(--color-border);
    outline-color: color-mix(in srgb, hsl(var(--ring)) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in srgb, var(--color-ring) 50%, transparent);
    }
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}
.gantt-container {
  --wx-background: hsl(var(--card));
  --wx-background-alt: hsl(var(--muted));
  --wx-background-hover: hsl(var(--gantt-surface-hover-light));
  --wx-color-font: hsl(var(--foreground));
  --wx-color-font-disabled: hsl(var(--gantt-font-disabled-light));
  --wx-color-primary: hsl(var(--primary));
  --wx-border: 1px solid hsl(var(--border));
  --wx-border-light: 1px solid hsl(var(--gantt-border-soft-light));
  --wx-gantt-border: 1px solid hsl(var(--border));
  --wx-grid-body-row-border: 1px solid hsl(var(--border));
  --wx-grid-body-cell-border: 1px solid transparent;
  --wx-timescale-border: 1px solid hsl(var(--border));
  --wx-gantt-select-color: hsl(var(--gantt-surface-hover-light));
  --wx-gantt-holiday-background: hsl(var(--muted));
  --wx-gantt-holiday-color: hsl(var(--gantt-font-disabled-light));
  --wx-gantt-link-marker-background: hsl(var(--card));
  --wx-gantt-progress-border-color: hsl(var(--gantt-border-strong-light));
  --wx-tooltip-background: hsl(var(--foreground));
  --wx-tooltip-font-color: hsl(var(--primary-foreground));
}
.dark .gantt-container {
  --wx-background: hsl(var(--background));
  --wx-background-alt: hsl(var(--muted));
  --wx-background-hover: hsl(var(--gantt-surface-hover-dark));
  --wx-color-font: hsl(var(--foreground));
  --wx-color-font-disabled: hsl(var(--gantt-font-disabled-dark));
  --wx-color-primary: var(--brand);
  --wx-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-border-light: 1px solid hsl(var(--gantt-border-soft-dark));
  --wx-gantt-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-grid-body-row-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-grid-body-cell-border: 1px solid transparent;
  --wx-timescale-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-gantt-select-color: hsl(var(--gantt-surface-hover-dark));
  --wx-gantt-holiday-background: hsl(var(--gantt-holiday-bg-dark));
  --wx-gantt-holiday-color: hsl(var(--gantt-holiday-color-dark));
  --wx-gantt-link-marker-background: hsl(var(--muted));
  --wx-gantt-progress-border-color: hsl(var(--gantt-border-strong-dark));
  --wx-tooltip-background: hsl(var(--gantt-tooltip-bg-dark));
  --wx-tooltip-font-color: hsl(var(--gantt-tooltip-fg-dark));
  --wx-sidebar-close-icon: hsl(var(--gantt-border-strong-dark));
}
.gantt-container {
  display: flex;
  flex-direction: column;
}
.gantt-container .wx-willow-dark-theme, .gantt-container .wx-willow-theme {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gantt-container .wx-gantt {
  flex: 1;
  min-height: 0;
}
.fc-custom {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fc-custom .fc {
  flex: 1;
  min-height: 0;
}
.fc-custom .fc .fc-scroller-liquid-absolute {
  position: relative;
  overflow: hidden;
}
.fc-custom .fc .fc-daygrid-body {
  width: 100%;
}
.fc-custom .fc .fc-scrollgrid {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-scrollgrid td, .fc-custom .fc .fc-scrollgrid th {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-col-header-cell {
  background: var(--color-muted);
  border-color: var(--color-border);
}
.fc-custom .fc .fc-col-header-cell-cushion {
  color: var(--color-muted-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-daygrid-day {
  background: var(--color-background);
}
.fc-custom .fc .fc-daygrid-day-number {
  color: var(--color-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-daygrid-day.fc-day-today {
  background: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 50%, transparent);
  }
}
.fc-custom .fc .fc-daygrid-day.fc-day-other {
  background: color-mix(in srgb, hsl(var(--muted)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 25%, transparent);
  }
}
.fc-custom .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-daygrid-event {
  border-radius: 3px;
  font-size: 0.75rem;
  border: none;
}
.fc-custom .fc .fc-event-title, .fc-custom .fc .fc-event-time {
  color: inherit;
}
.fc-custom .fc .fc-timegrid-event {
  border: none;
  border-radius: 4px;
  font-size: 0.6875rem;
  line-height: 1.3;
  overflow: hidden;
}
.fc-custom .fc .fc-timegrid-event .fc-event-main {
  padding: 1px 4px;
  overflow: hidden;
}
.fc-custom .fc .fc-timegrid-event .fc-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-custom .fc .fc-v-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 15%, var(--color-background));
  }
  border-left: 3px solid var(--fc-event-bg-color, hsl(var(--info)));
}
.fc-custom .fc .fc-v-event .fc-event-main {
  color: var(--color-foreground);
}
.fc-custom .fc .fc-v-event .fc-event-time {
  color: var(--color-muted-foreground);
  font-size: 0.625rem;
}
.fc-custom .fc .fc-h-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 20%, var(--color-background));
  }
  border: none;
  border-left: 3px solid var(--fc-event-bg-color, hsl(var(--info)));
}
.fc-custom .fc .fc-h-event .fc-event-main {
  color: var(--color-foreground);
}
.dark .fc-custom .fc .fc-v-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 25%, var(--color-background));
  }
}
.dark .fc-custom .fc .fc-h-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 30%, var(--color-background));
  }
}
.dark .fc-custom .fc .fc-daygrid-dot-event {
  opacity: 1;
}
.dark .fc-custom .fc .fc-daygrid-dot-event .fc-event-title {
  color: var(--color-foreground);
}
.dark .fc-custom .fc .fc-daygrid-dot-event .fc-event-time {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-daygrid-more-link {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-timegrid-slot {
  background: var(--color-background);
}
.fc-custom .fc .fc-timegrid-slot-label-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-timegrid-axis-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-list {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-list-day-cushion {
  background: var(--color-muted);
}
.fc-custom .fc .fc-list-day-text, .fc-custom .fc .fc-list-day-side-text {
  color: var(--color-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-list-event:hover td {
  background: var(--color-muted);
}
.fc-custom .fc .fc-list-event-title a, .fc-custom .fc .fc-list-event-time {
  color: var(--color-foreground);
}
.fc-custom .fc .fc-list-empty-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-popover {
  background: var(--color-background);
  border-color: var(--color-border);
  box-shadow: var(--elevation-sm);
}
.fc-custom .fc .fc-popover-header {
  background: var(--color-muted);
  color: var(--color-foreground);
}
.fc-custom .fc .fc-popover-close {
  color: var(--color-muted-foreground);
}
.manuscript-mode {
  font-family: var(--font-manuscript);
  line-height: 1.8;
  color: var(--color-foreground);
}
.manuscript-mode h1 {
  margin-top: 0.5in;
  margin-bottom: 0.25in;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.manuscript-mode p {
  text-indent: 2em;
  margin-bottom: 0;
  text-align: justify;
}
.manuscript-mode h1 + p, .manuscript-mode .slate-p:first-of-type {
  text-indent: 0;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
@supports (-moz-appearance: none) {
  *, *::before, *::after {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, hsl(var(--primary)) 80%, transparent) transparent;
    @supports (color: color-mix(in lab, red, red)) {
      scrollbar-color: color-mix(in srgb, var(--color-primary) 80%, transparent) transparent;
    }
  }
}
.scrollbar-visible::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scrollbar-visible::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-visible::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
  border-radius: 9999px;
}
.scrollbar-visible::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
.tg-scrollbar-thumb-brand {
  background-color: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
}
.tg-scrollbar-thumb-brand:hover {
  background-color: var(--color-primary);
}
.h-\[38px\] {
  height: 2rem;
}
.puck-root-slot[data-direction="row"] {
  --puck-root-direction: row;
}
.puck-root-slot[data-direction="column"] {
  --puck-root-direction: column;
}
.puck-root-slot[data-justify="start"] {
  --puck-root-justify: flex-start;
}
.puck-root-slot[data-justify="center"] {
  --puck-root-justify: center;
}
.puck-root-slot[data-justify="end"] {
  --puck-root-justify: flex-end;
}
.puck-root-slot[data-justify="between"] {
  --puck-root-justify: space-between;
}
.puck-root-slot[data-justify="around"] {
  --puck-root-justify: space-around;
}
.puck-root-slot[data-justify="evenly"] {
  --puck-root-justify: space-evenly;
}
.puck-root-slot[data-align="start"] {
  --puck-root-align: flex-start;
}
.puck-root-slot[data-align="center"] {
  --puck-root-align: center;
}
.puck-root-slot[data-align="end"] {
  --puck-root-align: flex-end;
}
.puck-root-slot[data-align="stretch"] {
  --puck-root-align: stretch;
}
.puck-root-slot[data-spacing="none"] {
  --puck-root-gap: 0;
}
.puck-root-slot[data-spacing="sm"] {
  --puck-root-gap: clamp(4px, 1vw, 8px);
}
.puck-root-slot[data-spacing="md"] {
  --puck-root-gap: clamp(8px, 1.5vw, 16px);
}
.puck-root-slot[data-spacing="lg"] {
  --puck-root-gap: clamp(16px, 2vw, 24px);
}
.puck-root-slot[data-spacing="xl"] {
  --puck-root-gap: clamp(24px, 3vw, 32px);
}
.puck-root-slot[data-padding="none"] {
  --puck-root-padding: 0;
}
.puck-root-slot[data-padding="sm"] {
  --puck-root-padding: clamp(0.5rem, 2vw, 1rem);
}
.puck-root-slot[data-padding="md"] {
  --puck-root-padding: clamp(1rem, 3vw, 1.5rem);
}
.puck-root-slot[data-padding="lg"] {
  --puck-root-padding: clamp(1.5rem, 4vw, 2rem);
}
.puck-root-slot[data-border="none"] {
  --puck-root-border: none;
}
.puck-root-slot[data-border="subtle"] {
  --puck-root-border: 1px solid color-mix(in srgb, hsl(var(--border)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --puck-root-border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  }
}
.puck-root-slot[data-border="solid"] {
  --puck-root-border: 1px solid var(--color-border);
}
.puck-root-slot[data-radius="none"] {
  --puck-root-radius: 0;
}
.puck-root-slot[data-radius="sm"] {
  --puck-root-radius: 0.375rem;
}
.puck-root-slot[data-radius="md"] {
  --puck-root-radius: 0.75rem;
}
.puck-root-slot[data-radius="lg"] {
  --puck-root-radius: 1rem;
}
.puck-root-slot[data-radius="full"] {
  --puck-root-radius: 9999px;
}
.puck-root-slot[data-shadow="none"] {
  --puck-root-shadow: none;
}
.puck-root-slot[data-shadow="sm"] {
  --puck-root-shadow: 0 1px 2px 0 hsl(var(--black) / 0.05);
}
.puck-root-slot[data-shadow="md"] {
  --puck-root-shadow: 0 4px 6px -1px hsl(var(--black) / 0.1);
}
.puck-root-slot[data-shadow="lg"] {
  --puck-root-shadow: 0 10px 25px -5px hsl(var(--black) / 0.2);
}
.puck-root-slot[data-has-border] {
  --puck-root-bg: var(--color-card);
}
.puck-root-slot:not([data-has-border]) {
  --puck-root-bg: transparent;
}
.puck-root-slot :has([data-list-table-block]) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
}
[data-slot="alert-dialog-overlay"] {
  background: hsl(var(--black) / 0.5);
}
[data-slot="alert-dialog-content"] {
  background: var(--color-background);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 0.5rem);
  padding: 1.5rem;
  box-shadow: var(--elevation-lg);
}
[data-slot="alert-dialog-title"] {
  font-size: 1.125rem;
  font-weight: 600;
}
[data-slot="alert-dialog-description"] {
  color: var(--color-muted-foreground);
  font-size: 0.875rem;
}
[data-slot="alert-dialog-action"], [data-slot="alert-dialog-cancel"] {
  padding: 0.5rem 1rem;
  border-radius: calc(var(--radius, 0.5rem) - 2px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
[data-slot="alert-dialog-action"] {
  background: var(--color-destructive);
  color: var(--color-destructive-foreground);
  border: none;
}
[data-slot="alert-dialog-cancel"] {
  background: transparent;
  color: inherit;
  border: 1px solid var(--color-border);
}
@container gpt-chat (min-width: 48rem) {
  .conversation-starters {
    display: none !important;
  }
}
[data-slot="voice-overlay-card"] {
  background: var(--color-card);
  color: var(--color-card-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 0.5rem);
  box-shadow: var(--elevation-lg);
}
[data-slot="voice-stop-btn"] {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.uif-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.uif-hover-bg-muted:hover {
  background-color: var(--color-muted);
}
.uif-hover-text-foreground:hover {
  color: var(--color-foreground);
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.dark {
  color-scheme: dark;
}
.dark .prose {
  --tw-prose-body: hsl(var(--foreground));
  --tw-prose-headings: hsl(var(--foreground));
  --tw-prose-bold: hsl(var(--foreground));
  --tw-prose-links: hsl(var(--primary));
  --tw-prose-code: hsl(var(--foreground));
  --tw-prose-counters: hsl(var(--muted-foreground));
  --tw-prose-bullets: hsl(var(--muted-foreground));
  --tw-prose-hr: hsl(var(--border));
  --tw-prose-quotes: hsl(var(--foreground));
  --tw-prose-quote-borders: hsl(var(--border));
  --tw-prose-pre-bg: hsl(var(--secondary));
  --tw-prose-pre-code: hsl(var(--foreground));
}
body {
  margin: 0;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[style*="--font-body"] {
  font-family: var(--font-body);
}
code {
  font-family: var(--font-code);
}
:root {
  --text-fluid-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-fluid-base: clamp(1rem, 0.925rem + 0.375vw, 1.25rem);
  --text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --text-fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  --text-fluid-2xl: clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem);
  --text-fluid-3xl: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  --text-fluid-4xl: clamp(2rem, 1.25rem + 3.75vw, 3.75rem);
  --text-fluid-5xl: clamp(2.5rem, 1.25rem + 5vw, 4.5rem);
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
  --radius-control: var(--radius-md);
  --border-width-default: 1px;
  --border-width-thick: 2px;
  --border-color-default: hsl(var(--border));
  --border-color-primary: hsl(var(--primary));
  --border-color-subtle: hsl(var(--primary) / 0.2);
  --border-color-focus: hsl(var(--primary) / 0.5);
  --border-color-muted: hsl(var(--muted-foreground) / 0.3);
  --glow-xs: 0 0 0 0 currentColor;
  --glow-sm: 0 0 6px 2px currentColor;
  --glow-md: 0 0 20px 4px currentColor;
  --glow-focus-ring: 0 0 0 2px hsl(var(--ring));
  --glow-status-pulse: 0 0 6px 2px;
  --glow-status-pulse-color-active: hsl(var(--primary) / 0.6);
  --glow-status-pulse-color-active-soft: hsl(var(--primary) / 0.3);
  --glow-status-pulse-color-warning: hsl(var(--chart-4) / 0.6);
  --glow-status-pulse-color-warning-soft: hsl(var(--chart-4) / 0.3);
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-colors: color 0.15s, background-color 0.15s, border-color 0.15s;
  --transition-all-fast: all 0.15s;
  --transition-all-normal: all 0.3s;
  --leading-tight: 1.05;
  --leading-snug: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.3em;
}
@layer base {
  * {
    border-color: var(--color-border);
    outline-color: color-mix(in srgb, hsl(var(--ring)) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in srgb, var(--color-ring) 50%, transparent);
    }
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}
.gantt-container {
  --wx-background: hsl(var(--card));
  --wx-background-alt: hsl(var(--muted));
  --wx-background-hover: hsl(var(--gantt-surface-hover-light));
  --wx-color-font: hsl(var(--foreground));
  --wx-color-font-disabled: hsl(var(--gantt-font-disabled-light));
  --wx-color-primary: hsl(var(--primary));
  --wx-border: 1px solid hsl(var(--border));
  --wx-border-light: 1px solid hsl(var(--gantt-border-soft-light));
  --wx-gantt-border: 1px solid hsl(var(--border));
  --wx-grid-body-row-border: 1px solid hsl(var(--border));
  --wx-grid-body-cell-border: 1px solid transparent;
  --wx-timescale-border: 1px solid hsl(var(--border));
  --wx-gantt-select-color: hsl(var(--gantt-surface-hover-light));
  --wx-gantt-holiday-background: hsl(var(--muted));
  --wx-gantt-holiday-color: hsl(var(--gantt-font-disabled-light));
  --wx-gantt-link-marker-background: hsl(var(--card));
  --wx-gantt-progress-border-color: hsl(var(--gantt-border-strong-light));
  --wx-tooltip-background: hsl(var(--foreground));
  --wx-tooltip-font-color: hsl(var(--primary-foreground));
}
.dark .gantt-container {
  --wx-background: hsl(var(--background));
  --wx-background-alt: hsl(var(--muted));
  --wx-background-hover: hsl(var(--gantt-surface-hover-dark));
  --wx-color-font: hsl(var(--foreground));
  --wx-color-font-disabled: hsl(var(--gantt-font-disabled-dark));
  --wx-color-primary: var(--brand);
  --wx-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-border-light: 1px solid hsl(var(--gantt-border-soft-dark));
  --wx-gantt-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-grid-body-row-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-grid-body-cell-border: 1px solid transparent;
  --wx-timescale-border: 1px solid hsl(var(--gantt-border-dark));
  --wx-gantt-select-color: hsl(var(--gantt-surface-hover-dark));
  --wx-gantt-holiday-background: hsl(var(--gantt-holiday-bg-dark));
  --wx-gantt-holiday-color: hsl(var(--gantt-holiday-color-dark));
  --wx-gantt-link-marker-background: hsl(var(--muted));
  --wx-gantt-progress-border-color: hsl(var(--gantt-border-strong-dark));
  --wx-tooltip-background: hsl(var(--gantt-tooltip-bg-dark));
  --wx-tooltip-font-color: hsl(var(--gantt-tooltip-fg-dark));
  --wx-sidebar-close-icon: hsl(var(--gantt-border-strong-dark));
}
.gantt-container {
  display: flex;
  flex-direction: column;
}
.gantt-container .wx-willow-dark-theme, .gantt-container .wx-willow-theme {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gantt-container .wx-gantt {
  flex: 1;
  min-height: 0;
}
.fc-custom {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fc-custom .fc {
  flex: 1;
  min-height: 0;
}
.fc-custom .fc .fc-scroller-liquid-absolute {
  position: relative;
  overflow: hidden;
}
.fc-custom .fc .fc-daygrid-body {
  width: 100%;
}
.fc-custom .fc .fc-scrollgrid {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-scrollgrid td, .fc-custom .fc .fc-scrollgrid th {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-col-header-cell {
  background: var(--color-muted);
  border-color: var(--color-border);
}
.fc-custom .fc .fc-col-header-cell-cushion {
  color: var(--color-muted-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-daygrid-day {
  background: var(--color-background);
}
.fc-custom .fc .fc-daygrid-day-number {
  color: var(--color-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-daygrid-day.fc-day-today {
  background: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 50%, transparent);
  }
}
.fc-custom .fc .fc-daygrid-day.fc-day-other {
  background: color-mix(in srgb, hsl(var(--muted)) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 25%, transparent);
  }
}
.fc-custom .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-daygrid-event {
  border-radius: 3px;
  font-size: 0.75rem;
  border: none;
}
.fc-custom .fc .fc-event-title, .fc-custom .fc .fc-event-time {
  color: inherit;
}
.fc-custom .fc .fc-timegrid-event {
  border: none;
  border-radius: 4px;
  font-size: 0.6875rem;
  line-height: 1.3;
  overflow: hidden;
}
.fc-custom .fc .fc-timegrid-event .fc-event-main {
  padding: 1px 4px;
  overflow: hidden;
}
.fc-custom .fc .fc-timegrid-event .fc-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-custom .fc .fc-v-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 15%, var(--color-background));
  }
  border-left: 3px solid var(--fc-event-bg-color, hsl(var(--info)));
}
.fc-custom .fc .fc-v-event .fc-event-main {
  color: var(--color-foreground);
}
.fc-custom .fc .fc-v-event .fc-event-time {
  color: var(--color-muted-foreground);
  font-size: 0.625rem;
}
.fc-custom .fc .fc-h-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 20%, var(--color-background));
  }
  border: none;
  border-left: 3px solid var(--fc-event-bg-color, hsl(var(--info)));
}
.fc-custom .fc .fc-h-event .fc-event-main {
  color: var(--color-foreground);
}
.dark .fc-custom .fc .fc-v-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 25%, var(--color-background));
  }
}
.dark .fc-custom .fc .fc-h-event {
  background-color: var(--fc-event-bg-color, hsl(var(--info)));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--fc-event-bg-color, hsl(var(--info))) 30%, var(--color-background));
  }
}
.dark .fc-custom .fc .fc-daygrid-dot-event {
  opacity: 1;
}
.dark .fc-custom .fc .fc-daygrid-dot-event .fc-event-title {
  color: var(--color-foreground);
}
.dark .fc-custom .fc .fc-daygrid-dot-event .fc-event-time {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-daygrid-more-link {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-timegrid-slot {
  background: var(--color-background);
}
.fc-custom .fc .fc-timegrid-slot-label-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-timegrid-axis-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-list {
  border-color: var(--color-border);
}
.fc-custom .fc .fc-list-day-cushion {
  background: var(--color-muted);
}
.fc-custom .fc .fc-list-day-text, .fc-custom .fc .fc-list-day-side-text {
  color: var(--color-foreground);
  text-decoration: none;
}
.fc-custom .fc .fc-list-event:hover td {
  background: var(--color-muted);
}
.fc-custom .fc .fc-list-event-title a, .fc-custom .fc .fc-list-event-time {
  color: var(--color-foreground);
}
.fc-custom .fc .fc-list-empty-cushion {
  color: var(--color-muted-foreground);
}
.fc-custom .fc .fc-popover {
  background: var(--color-background);
  border-color: var(--color-border);
  box-shadow: var(--elevation-sm);
}
.fc-custom .fc .fc-popover-header {
  background: var(--color-muted);
  color: var(--color-foreground);
}
.fc-custom .fc .fc-popover-close {
  color: var(--color-muted-foreground);
}
.manuscript-mode {
  font-family: var(--font-manuscript);
  line-height: 1.8;
  color: var(--color-foreground);
}
.manuscript-mode h1 {
  margin-top: 0.5in;
  margin-bottom: 0.25in;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.manuscript-mode p {
  text-indent: 2em;
  margin-bottom: 0;
  text-align: justify;
}
.manuscript-mode h1 + p, .manuscript-mode .slate-p:first-of-type {
  text-indent: 0;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
@supports (-moz-appearance: none) {
  *, *::before, *::after {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, hsl(var(--primary)) 80%, transparent) transparent;
    @supports (color: color-mix(in lab, red, red)) {
      scrollbar-color: color-mix(in srgb, var(--color-primary) 80%, transparent) transparent;
    }
  }
}
.scrollbar-visible::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scrollbar-visible::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-visible::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
  border-radius: 9999px;
}
.scrollbar-visible::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
.tg-scrollbar-thumb-brand {
  background-color: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
}
.tg-scrollbar-thumb-brand:hover {
  background-color: var(--color-primary);
}
.h-\[38px\] {
  height: 2rem;
}
.timeline-block {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.timeline-block-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1rem;
  width: 2px;
}
.timeline-block-line-bg {
  background-color: color-mix(in srgb, hsl(var(--primary-foreground)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) 10%, transparent);
  }
}
.timeline-block-line-progress {
  bottom: auto;
  transition: height 200ms linear;
}
.timeline-block-items {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}
.timeline-block-item {
  position: relative;
  width: 100%;
}
.timeline-block-card-wrapper {
  padding-left: 3rem;
}
.timeline-block-card {
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-style: solid;
  padding: 1.5rem;
  transition: opacity 400ms ease,	transform 400ms ease,	border-color 400ms ease;
}
.timeline-block-dot {
  position: absolute;
  top: 1.5rem;
  left: 1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border-width: 4px;
  border-style: solid;
  z-index: 10;
  transition: background-color 400ms ease,	transform 400ms ease;
  display: block;
}
.timeline-block-dot-ping {
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  opacity: 0.3;
  animation: timeline-block-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes timeline-block-ping {
  75%,	100% {
    transform: scale(2);
    opacity: 0;
  }
}
@media (min-width: 768px) {
  .timeline-block-line {
    left: 50%;
    transform: translateX(-50%);
  }
  .timeline-block-items {
    --col-gap: 2.5rem;
    --row-gap: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--col-gap);
    row-gap: var(--row-gap);
    padding-bottom: 8rem;
  }
  .timeline-block-items > .timeline-block-item:nth-child(even) {
    transform: translateY(calc(50% + var(--row-gap) / 2));
  }
  .timeline-block-card-wrapper {
    padding-left: 0;
    width: 100%;
  }
  .timeline-block-item:nth-child(odd) .timeline-block-dot {
    left: auto;
    right: -2.25rem;
  }
  .timeline-block-item:nth-child(even) .timeline-block-dot {
    left: -1.25rem;
  }
}
.uif-flex-1 {
  flex: 1 1 0%;
}
.uif-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-font-semibold {
  font-weight: 600;
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-flex {
  display: flex;
}
.uif-shrink-0 {
  flex-shrink: 0;
}
.uif-items-center {
  align-items: center;
}
.uif-gap-1 {
  gap: 0.25rem;
}
.uif-inline-flex {
  display: inline-flex;
}
.uif-h-8 {
  height: 2rem;
}
.uif-w-8 {
  width: 2rem;
}
.uif-justify-center {
  justify-content: center;
}
.uif-rounded-md {
  border-radius: var(--radius-md, 0.375rem);
}
.uif-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-hover-bg-muted:hover {
  background-color: var(--color-muted);
}
.uif-hover-text-foreground:hover {
  color: var(--color-foreground);
}
.uif-min-w-0 {
  min-width: 0rem;
}
.uif-hidden {
  display: none;
}
.uif-w-full {
  width: 100%;
}
.uif-h-full {
  height: 100%;
}
.uif-flex {
  display: flex;
}
.uif-overflow-x-auto {
  overflow-x: auto;
}
@container (min-width: 48rem) {
  .uif-md-flex {
    display: flex;
  }
  .uif-md-hidden {
    display: none;
  }
}
.uif-text-background {
  color: var(--color-background);
}
.uif-z-50 {
  z-index: 50;
}
.uif-rounded-md {
  border-radius: var(--radius-md);
}
.uif-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-bg-foreground {
  background-color: var(--color-foreground);
}
.uif-py-1_5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.uif-size-2_5 {
  width: 0.625rem;
  height: 0.625rem;
}
.uif-mb-3 {
  margin-bottom: 0.75rem;
}
.uif-bg-muted {
  background-color: var(--color-muted);
}
.uif-rounded-lg {
  border-radius: var(--radius-md, 0.375rem);
}
.uif-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.uif-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.uif-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uif-w-4 {
  width: 1rem;
}
.uif-h-4 {
  height: 1rem;
}
.uif-text-muted-foreground {
  color: var(--color-muted-foreground);
}
.uif-text-foreground {
  color: var(--color-foreground);
}
.uif-max-w-_150px_ {
  max-width: 150px;
}
.uif-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uif-w-3 {
  width: 0.75rem;
}
.uif-h-3 {
  height: 0.75rem;
}
.uif-p-8 {
  padding: 2rem;
}
.uif-text-center {
  text-align: center;
}
.uif-space-y-2 {
  --space-y: 0.5rem;
  & > * + * {
    margin-top: var(--space-y);
  }
}
.uif-h-10 {
  height: 2.5rem;
}
.uif-w-10 {
  width: 2.5rem;
}
.uif-mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.uif-text-right {
  text-align: right;
}
.uif-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uif-p-4 {
  padding: 1rem;
}
.uif-border {
  border-width: 1px;
}
.uif-rounded {
  border-radius: var(--radius, 0.25rem);
}
.uif-font-medium {
  font-weight: 500;
}
.uif-mt-1 {
  margin-top: 0.25rem;
}
.uif-logo-loading-placeholder {
  width: 6rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: hsl(var(--muted-foreground, 220 9% 46%) / 0.25);
}
.uif-h-3_5 {
  height: 0.875rem;
}
.uif-w-3_5 {
  width: 0.875rem;
}
.uif-mt-0_5 {
  margin-top: 0.125rem;
}
.uif-size-3_5 {
  width: 0.875rem;
  height: 0.875rem;
}
.uif-py-0_5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.uif-pt-1_5 {
  padding-top: 0.375rem;
}
.uif-pb-1_5 {
  padding-bottom: 0.375rem;
}
.uif-py-1_5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.uif-p-0_5 {
  padding: 0.125rem;
}
.uif-h-1_5 {
  height: 0.375rem;
}
.uif-size-2_5 {
  width: 0.625rem;
  height: 0.625rem;
}
.uif-opacity-50 {
  opacity: 0.5;
}
.uif-opacity-60 {
  opacity: 0.6;
}
.uif-min-h-0 {
  min-height: 0;
}
.uif-bg-background {
  background-color: var(--color-background);
}
.uif-border-destructive {
  border-color: var(--color-destructive);
}
.uif-bg-destructive {
  background-color: var(--color-destructive);
}
.uif-ring-ring {
  --tw-ring-color: var(--color-ring);
}
.uif-underline {
  text-decoration-line: underline;
}
.uif-underline-offset-2 {
  text-underline-offset: 2px;
}
.uif-bg-warning {
  background-color: var(--color-warning);
}
.uif-text-warning-foreground {
  color: var(--color-warning-foreground);
}
.uif-ring-1 {
  box-shadow: 0 0 0 1px var(--color-ring);
}
.aichat-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--color-background);
  color: var(--color-foreground);
}
.aichat-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.aichat-error {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 0;
  padding: 1.5rem;
  text-align: center;
  color: var(--color-muted-foreground, var(--color-foreground));
}
.aichat-error-retry {
  appearance: button;
  border: 1px solid var(--border, currentColor);
  border-radius: var(--radius-control);
  background: var(--color-background);
  color: var(--color-foreground);
  padding: 0.375rem 0.875rem;
  font: inherit;
  cursor: pointer;
}
.aichat-error-retry:hover {
  background: var(--color-accent, transparent);
}
.blk-bg-destructive\\/10 {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
  }
}
.blk-bg-foreground\\/10 {
  background-color: color-mix(in srgb, hsl(var(--foreground)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
  }
}
.blk-bg-foreground\\/5 {
  background-color: color-mix(in srgb, hsl(var(--foreground)) 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);
  }
}
.blk-bg-muted\\/20 {
  background-color: color-mix(in srgb, hsl(var(--muted)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-muted) 20%, transparent);
  }
}
.blk-bg-muted\\/30 {
  background-color: color-mix(in srgb, hsl(var(--muted)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-muted) 30%, transparent);
  }
}
.blk-bg-primary-foreground\\/20 {
  background-color: color-mix(in srgb, hsl(var(--primary-foreground)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary-foreground) 20%, transparent);
  }
}
.blk-bg-primary\\/10 {
  background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
}
.blk-bg-primary\\/15 {
  background-color: color-mix(in srgb, hsl(var(--primary)) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
  }
}
.blk-bg-primary\\/20 {
  background-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
  }
}
.blk-bg-primary\\/30 {
  background-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
  }
}
.blk-bg-primary\\/8 {
  background-color: color-mix(in srgb, hsl(var(--primary)) 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 8%, transparent);
  }
}
.blk-border-border\\/60 {
  border-color: color-mix(in srgb, hsl(var(--border)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-border) 60%, transparent);
  }
}
.blk-border-primary\\/20 {
  border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
  }
}
.blk-max-w-lg {
  max-width: 32rem;
}
.blk-max-w-sm {
  max-width: 24rem;
}
.blk-shadow-2xl {
  box-shadow: 0 25px 50px -12px var(--block-generic-ui-shadow);
}
.blk-space-sm-y> :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0
	margin-top: calc(0.375rem * var(--tw-space-y-reverse))
	margin-bottom: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
}
.blk-text-destructive\\/80 {
  color: color-mix(in srgb, hsl(var(--destructive)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-destructive) 80%, transparent);
  }
}
.blk-text-foreground\\/60 {
  color: color-mix(in srgb, hsl(var(--foreground)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
  }
}
.blk-text-muted-foreground\\/30 {
  color: color-mix(in srgb, hsl(var(--muted-foreground)) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-muted-foreground) 30%, transparent);
  }
}
.blk-text-muted-foreground\\/60 {
  color: color-mix(in srgb, hsl(var(--muted-foreground)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-muted-foreground) 60%, transparent);
  }
}
.blk-text-muted-foreground\\/70 {
  color: color-mix(in srgb, hsl(var(--muted-foreground)) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
  }
}
.blk-text-primary-foreground\\/80 {
  color: color-mix(in srgb, hsl(var(--primary-foreground)) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-primary-foreground) 80%, transparent);
  }
}
.blk-text-primary\\/50 {
  color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
}
.blk-space-0-p {
  padding: var(--space-0);
}
.blk-space-0-px {
  padding-left: var(--space-0);
  padding-right: var(--space-0);
}
.blk-space-0-py {
  padding-top: var(--space-0);
  padding-bottom: var(--space-0);
}
.blk-space-0-pt {
  padding-top: var(--space-0);
}
.blk-space-0-pr {
  padding-right: var(--space-0);
}
.blk-space-0-pl {
  padding-left: var(--space-0);
}
.blk-space-0-pb {
  padding-bottom: var(--space-0);
}
.blk-space-0-m {
  margin: var(--space-0);
}
.blk-space-0-mx {
  margin-left: var(--space-0);
  margin-right: var(--space-0);
}
.blk-space-0-my {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}
.blk-space-0-mt {
  margin-top: var(--space-0);
}
.blk-space-0-mr {
  margin-right: var(--space-0);
}
.blk-space-0-ml {
  margin-left: var(--space-0);
}
.blk-space-0-mb {
  margin-bottom: var(--space-0);
}
.blk-space-0-gap {
  gap: var(--space-0);
}
.blk-space-0-y > * + * {
  margin-top: var(--space-0);
}
.blk-space-3-p {
  padding: var(--space-3);
}
.blk-space-3-px {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.blk-space-3-py {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.blk-space-3-pt {
  padding-top: var(--space-3);
}
.blk-space-3-pr {
  padding-right: var(--space-3);
}
.blk-space-3-pl {
  padding-left: var(--space-3);
}
.blk-space-3-pb {
  padding-bottom: var(--space-3);
}
.blk-space-3-m {
  margin: var(--space-3);
}
.blk-space-3-mx {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}
.blk-space-3-my {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
.blk-space-3-mt {
  margin-top: var(--space-3);
}
.blk-space-3-mr {
  margin-right: var(--space-3);
}
.blk-space-3-ml {
  margin-left: var(--space-3);
}
.blk-space-3-mb {
  margin-bottom: var(--space-3);
}
.blk-space-3-gap {
  gap: var(--space-3);
}
.blk-space-3-y > * + * {
  margin-top: var(--space-3);
}
.blk-space-lg-p {
  padding: var(--space-lg);
}
.blk-space-lg-px {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.blk-space-lg-py {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.blk-space-lg-pt {
  padding-top: var(--space-lg);
}
.blk-space-lg-pr {
  padding-right: var(--space-lg);
}
.blk-space-lg-pl {
  padding-left: var(--space-lg);
}
.blk-space-lg-pb {
  padding-bottom: var(--space-lg);
}
.blk-space-lg-m {
  margin: var(--space-lg);
}
.blk-space-lg-mx {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}
.blk-space-lg-my {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.blk-space-lg-mt {
  margin-top: var(--space-lg);
}
.blk-space-lg-mr {
  margin-right: var(--space-lg);
}
.blk-space-lg-ml {
  margin-left: var(--space-lg);
}
.blk-space-lg-mb {
  margin-bottom: var(--space-lg);
}
.blk-space-lg-gap {
  gap: var(--space-lg);
}
.blk-space-lg-y > * + * {
  margin-top: var(--space-lg);
}
.blk-space-md-p {
  padding: var(--space-md);
}
.blk-space-md-px {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.blk-space-md-py {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.blk-space-md-pt {
  padding-top: var(--space-md);
}
.blk-space-md-pr {
  padding-right: var(--space-md);
}
.blk-space-md-pl {
  padding-left: var(--space-md);
}
.blk-space-md-pb {
  padding-bottom: var(--space-md);
}
.blk-space-md-m {
  margin: var(--space-md);
}
.blk-space-md-mx {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}
.blk-space-md-my {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
.blk-space-md-mt {
  margin-top: var(--space-md);
}
.blk-space-md-mr {
  margin-right: var(--space-md);
}
.blk-space-md-ml {
  margin-left: var(--space-md);
}
.blk-space-md-mb {
  margin-bottom: var(--space-md);
}
.blk-space-md-gap {
  gap: var(--space-md);
}
.blk-space-md-y > * + * {
  margin-top: var(--space-md);
}
.blk-space-sm-p {
  padding: var(--space-sm);
}
.blk-space-sm-px {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}
.blk-space-sm-py {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.blk-space-sm-pt {
  padding-top: var(--space-sm);
}
.blk-space-sm-pr {
  padding-right: var(--space-sm);
}
.blk-space-sm-pl {
  padding-left: var(--space-sm);
}
.blk-space-sm-pb {
  padding-bottom: var(--space-sm);
}
.blk-space-sm-m {
  margin: var(--space-sm);
}
.blk-space-sm-mx {
  margin-left: var(--space-sm);
  margin-right: var(--space-sm);
}
.blk-space-sm-my {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.blk-space-sm-mt {
  margin-top: var(--space-sm);
}
.blk-space-sm-mr {
  margin-right: var(--space-sm);
}
.blk-space-sm-ml {
  margin-left: var(--space-sm);
}
.blk-space-sm-mb {
  margin-bottom: var(--space-sm);
}
.blk-space-sm-gap {
  gap: var(--space-sm);
}
.blk-space-sm-y > * + * {
  margin-top: var(--space-sm);
}
.blk-space-xl-p {
  padding: var(--space-xl);
}
.blk-space-xl-px {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.blk-space-xl-py {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.blk-space-xl-pt {
  padding-top: var(--space-xl);
}
.blk-space-xl-pr {
  padding-right: var(--space-xl);
}
.blk-space-xl-pl {
  padding-left: var(--space-xl);
}
.blk-space-xl-pb {
  padding-bottom: var(--space-xl);
}
.blk-space-xl-m {
  margin: var(--space-xl);
}
.blk-space-xl-mx {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}
.blk-space-xl-my {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.blk-space-xl-mt {
  margin-top: var(--space-xl);
}
.blk-space-xl-mr {
  margin-right: var(--space-xl);
}
.blk-space-xl-ml {
  margin-left: var(--space-xl);
}
.blk-space-xl-mb {
  margin-bottom: var(--space-xl);
}
.blk-space-xl-gap {
  gap: var(--space-xl);
}
.blk-space-xl-y > * + * {
  margin-top: var(--space-xl);
}
.blk-space-xs-p {
  padding: var(--space-xs);
}
.blk-space-xs-px {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}
.blk-space-xs-py {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.blk-space-xs-pt {
  padding-top: var(--space-xs);
}
.blk-space-xs-pr {
  padding-right: var(--space-xs);
}
.blk-space-xs-pl {
  padding-left: var(--space-xs);
}
.blk-space-xs-pb {
  padding-bottom: var(--space-xs);
}
.blk-space-xs-m {
  margin: var(--space-xs);
}
.blk-space-xs-mx {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}
.blk-space-xs-my {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.blk-space-xs-mt {
  margin-top: var(--space-xs);
}
.blk-space-xs-mr {
  margin-right: var(--space-xs);
}
.blk-space-xs-ml {
  margin-left: var(--space-xs);
}
.blk-space-xs-mb {
  margin-bottom: var(--space-xs);
}
.blk-space-xs-gap {
  gap: var(--space-xs);
}
.blk-space-xs-y > * + * {
  margin-top: var(--space-xs);
}
.blk-space-2xl-p {
  padding: var(--space-2xl);
}
.blk-space-2xl-px {
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
}
.blk-space-2xl-py {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.blk-space-2xl-pt {
  padding-top: var(--space-2xl);
}
.blk-space-2xl-pr {
  padding-right: var(--space-2xl);
}
.blk-space-2xl-pl {
  padding-left: var(--space-2xl);
}
.blk-space-2xl-pb {
  padding-bottom: var(--space-2xl);
}
.blk-space-2xl-m {
  margin: var(--space-2xl);
}
.blk-space-2xl-mx {
  margin-left: var(--space-2xl);
  margin-right: var(--space-2xl);
}
.blk-space-2xl-my {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.blk-space-2xl-mt {
  margin-top: var(--space-2xl);
}
.blk-space-2xl-mr {
  margin-right: var(--space-2xl);
}
.blk-space-2xl-ml {
  margin-left: var(--space-2xl);
}
.blk-space-2xl-mb {
  margin-bottom: var(--space-2xl);
}
.blk-space-2xl-gap {
  gap: var(--space-2xl);
}
.blk-space-2xl-y > * + * {
  margin-top: var(--space-2xl);
}
.blk-space-3xl-p {
  padding: var(--space-3xl);
}
.blk-space-3xl-px {
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
}
.blk-space-3xl-py {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}
.blk-space-3xl-pt {
  padding-top: var(--space-3xl);
}
.blk-space-3xl-pr {
  padding-right: var(--space-3xl);
}
.blk-space-3xl-pl {
  padding-left: var(--space-3xl);
}
.blk-space-3xl-pb {
  padding-bottom: var(--space-3xl);
}
.blk-space-3xl-m {
  margin: var(--space-3xl);
}
.blk-space-3xl-mx {
  margin-left: var(--space-3xl);
  margin-right: var(--space-3xl);
}
.blk-space-3xl-my {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}
.blk-space-3xl-mt {
  margin-top: var(--space-3xl);
}
.blk-space-3xl-mr {
  margin-right: var(--space-3xl);
}
.blk-space-3xl-ml {
  margin-left: var(--space-3xl);
}
.blk-space-3xl-mb {
  margin-bottom: var(--space-3xl);
}
.blk-space-3xl-gap {
  gap: var(--space-3xl);
}
.blk-space-3xl-y > * + * {
  margin-top: var(--space-3xl);
}
.blk-size-icon-lg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}
.blk-size-icon-lg-w {
  width: var(--size-icon-lg);
}
.blk-size-icon-lg-h {
  height: var(--size-icon-lg);
}
.blk-size-icon-md {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.blk-size-icon-md-w {
  width: var(--size-icon-md);
}
.blk-size-icon-md-h {
  height: var(--size-icon-md);
}
.blk-size-icon-sm {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.blk-size-icon-sm-w {
  width: var(--size-icon-sm);
}
.blk-size-icon-sm-h {
  height: var(--size-icon-sm);
}
.blk-size-control-lg {
  width: var(--size-control-lg);
  height: var(--size-control-lg);
}
.blk-size-control-lg-w {
  width: var(--size-control-lg);
}
.blk-size-control-lg-h {
  height: var(--size-control-lg);
}
.blk-size-control-md {
  width: var(--size-control-md);
  height: var(--size-control-md);
}
.blk-size-control-md-w {
  width: var(--size-control-md);
}
.blk-size-control-md-h {
  height: var(--size-control-md);
}
.blk-size-control-sm {
  width: var(--size-control-sm);
  height: var(--size-control-sm);
}
.blk-size-control-sm-w {
  width: var(--size-control-sm);
}
.blk-size-control-sm-h {
  height: var(--size-control-sm);
}
.blk-size-container-lg {
  width: var(--size-container-lg);
  height: var(--size-container-lg);
}
.blk-size-container-lg-w {
  width: var(--size-container-lg);
}
.blk-size-container-lg-h {
  height: var(--size-container-lg);
}
.blk-size-container-md {
  width: var(--size-container-md);
  height: var(--size-container-md);
}
.blk-size-container-md-w {
  width: var(--size-container-md);
}
.blk-size-container-md-h {
  height: var(--size-container-md);
}
.blk-size-container-sm {
  width: var(--size-container-sm);
  height: var(--size-container-sm);
}
.blk-size-container-sm-w {
  width: var(--size-container-sm);
}
.blk-size-container-sm-h {
  height: var(--size-container-sm);
}
.blk-size-container-xl {
  width: var(--size-container-xl);
  height: var(--size-container-xl);
}
.blk-size-container-xl-w {
  width: var(--size-container-xl);
}
.blk-size-container-xl-h {
  height: var(--size-container-xl);
}
.blk-emphasis-full {
  opacity: var(--emphasis-full);
}
.blk-hover-emphasis-full:hover {
  opacity: var(--emphasis-full);
}
.blk-disabled-emphasis-full:disabled {
  opacity: var(--emphasis-full);
}
.blk-emphasis-none {
  opacity: var(--emphasis-none);
}
.blk-hover-emphasis-none:hover {
  opacity: var(--emphasis-none);
}
.blk-disabled-emphasis-none:disabled {
  opacity: var(--emphasis-none);
}
.blk-emphasis-faint {
  opacity: var(--emphasis-faint);
}
.blk-hover-emphasis-faint:hover {
  opacity: var(--emphasis-faint);
}
.blk-disabled-emphasis-faint:disabled {
  opacity: var(--emphasis-faint);
}
.blk-emphasis-muted {
  opacity: var(--emphasis-muted);
}
.blk-hover-emphasis-muted:hover {
  opacity: var(--emphasis-muted);
}
.blk-disabled-emphasis-muted:disabled {
  opacity: var(--emphasis-muted);
}
.blk-emphasis-strong {
  opacity: var(--emphasis-strong);
}
.blk-hover-emphasis-strong:hover {
  opacity: var(--emphasis-strong);
}
.blk-disabled-emphasis-strong:disabled {
  opacity: var(--emphasis-strong);
}
.blk-emphasis-subtle {
  opacity: var(--emphasis-subtle);
}
.blk-hover-emphasis-subtle:hover {
  opacity: var(--emphasis-subtle);
}
.blk-disabled-emphasis-subtle:disabled {
  opacity: var(--emphasis-subtle);
}
.blk-blur-md {
  backdrop-filter: blur(var(--blur-md));
}
.blk-blur-sm {
  backdrop-filter: blur(var(--blur-sm));
}
.blk-blur-xs {
  backdrop-filter: blur(var(--blur-xs));
}
.blk-z-max {
  z-index: var(--z-index-max);
}
.blk-z-base {
  z-index: var(--z-index-base);
}
.blk-z-modal {
  z-index: var(--z-index-modal);
}
.blk-z-toast {
  z-index: var(--z-index-toast);
}
.blk-z-sticky {
  z-index: var(--z-index-sticky);
}
.blk-z-overlay {
  z-index: var(--z-index-overlay);
}
.blk-z-popover {
  z-index: var(--z-index-popover);
}
.blk-z-dropdown {
  z-index: var(--z-index-dropdown);
}
.blk-aspect-video {
  aspect-ratio: var(--aspect-video);
}
.blk-aspect-square {
  aspect-ratio: var(--aspect-square);
}
.blk-aspect-og-card {
  aspect-ratio: var(--aspect-og-card);
}
.blk-aspect-portrait {
  aspect-ratio: var(--aspect-portrait);
}
.blk-bg-accent {
  background-color: var(--color-accent);
}
:is(.dark *) .blk-dark-bg-accent {
  background-color: var(--color-accent);
}
:is(.dark *) .blk-dark-hover-bg-accent:hover {
  background-color: var(--color-accent);
}
.blk-hover-bg-accent:hover {
  background-color: var(--color-accent);
}
.blk-bg-accent-faint {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-faint {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-faint:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-accent-faint:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-accent-muted {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-muted {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-muted:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-accent-muted:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-accent-strong {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-strong {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-strong:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-accent-strong:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-accent-subtle {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-subtle {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-subtle:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-accent-subtle:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-accent {
  color: var(--color-accent);
}
:is(.dark *) .blk-dark-text-accent {
  color: var(--color-accent);
}
:is(.dark *) .blk-dark-hover-text-accent:hover {
  color: var(--color-accent);
}
.blk-hover-text-accent:hover {
  color: var(--color-accent);
}
.blk-text-accent-faint {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-faint {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-faint:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-accent-faint:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-accent-muted {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-muted {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-muted:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-accent-muted:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-accent-strong {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-strong {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-strong:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-accent-strong:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-accent-subtle {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-subtle {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-subtle:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-accent-subtle:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-accent {
  border-color: var(--color-accent);
}
:is(.dark *) .blk-dark-border-accent {
  border-color: var(--color-accent);
}
:is(.dark *) .blk-dark-hover-border-accent:hover {
  border-color: var(--color-accent);
}
.blk-hover-border-accent:hover {
  border-color: var(--color-accent);
}
.blk-border-accent-faint {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-faint {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-faint:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-accent-faint:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-accent-muted {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-muted {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-muted:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-accent-muted:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-accent-strong {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-strong {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-strong:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-accent-strong:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-accent-subtle {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-subtle {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-subtle:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-accent-subtle:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-accent-foreground {
  background-color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-bg-accent-foreground {
  background-color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-hover-bg-accent-foreground:hover {
  background-color: var(--color-accent-foreground);
}
.blk-hover-bg-accent-foreground:hover {
  background-color: var(--color-accent-foreground);
}
.blk-bg-accent-foreground-faint {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-foreground-faint {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-foreground-faint:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-accent-foreground-faint:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-accent-foreground-muted {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-foreground-muted {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-foreground-muted:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-accent-foreground-muted:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-accent-foreground-strong {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-foreground-strong {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-foreground-strong:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-accent-foreground-strong:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-accent-foreground-subtle {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-foreground-subtle {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-foreground-subtle:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-accent-foreground-subtle:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-accent-foreground {
  color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-text-accent-foreground {
  color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-hover-text-accent-foreground:hover {
  color: var(--color-accent-foreground);
}
.blk-hover-text-accent-foreground:hover {
  color: var(--color-accent-foreground);
}
.blk-text-accent-foreground-faint {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-foreground-faint {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-foreground-faint:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-accent-foreground-faint:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-accent-foreground-muted {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-foreground-muted {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-foreground-muted:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-accent-foreground-muted:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-accent-foreground-strong {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-foreground-strong {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-foreground-strong:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-accent-foreground-strong:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-accent-foreground-subtle {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-foreground-subtle {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-foreground-subtle:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-accent-foreground-subtle:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-accent-foreground {
  border-color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-border-accent-foreground {
  border-color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-hover-border-accent-foreground:hover {
  border-color: var(--color-accent-foreground);
}
.blk-hover-border-accent-foreground:hover {
  border-color: var(--color-accent-foreground);
}
.blk-border-accent-foreground-faint {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-foreground-faint {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-foreground-faint:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-accent-foreground-faint:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-accent-foreground-muted {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-foreground-muted {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-foreground-muted:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-accent-foreground-muted:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-accent-foreground-strong {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-foreground-strong {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-foreground-strong:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-accent-foreground-strong:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-accent-foreground-subtle {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-foreground-subtle {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-foreground-subtle:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-accent-foreground-subtle:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-background {
  background-color: var(--color-background);
}
:is(.dark *) .blk-dark-bg-background {
  background-color: var(--color-background);
}
:is(.dark *) .blk-dark-hover-bg-background:hover {
  background-color: var(--color-background);
}
.blk-hover-bg-background:hover {
  background-color: var(--color-background);
}
.blk-bg-background-faint {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-background-faint {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-background-faint:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-background-faint:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-background-muted {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-background-muted {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-background-muted:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-background-muted:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-background-strong {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-background-strong {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-background-strong:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-background-strong:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-background-subtle {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-background-subtle {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-background-subtle:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-background-subtle:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-background {
  color: var(--color-background);
}
:is(.dark *) .blk-dark-text-background {
  color: var(--color-background);
}
:is(.dark *) .blk-dark-hover-text-background:hover {
  color: var(--color-background);
}
.blk-hover-text-background:hover {
  color: var(--color-background);
}
.blk-text-background-faint {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-background-faint {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-background-faint:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-background-faint:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-background-muted {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-background-muted {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-background-muted:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-background-muted:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-background-strong {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-background-strong {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-background-strong:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-background-strong:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-background-subtle {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-background-subtle {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-background-subtle:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-background-subtle:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-background {
  border-color: var(--color-background);
}
:is(.dark *) .blk-dark-border-background {
  border-color: var(--color-background);
}
:is(.dark *) .blk-dark-hover-border-background:hover {
  border-color: var(--color-background);
}
.blk-hover-border-background:hover {
  border-color: var(--color-background);
}
.blk-border-background-faint {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-background-faint {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-background-faint:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-background-faint:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-background-muted {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-background-muted {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-background-muted:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-background-muted:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-background-strong {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-background-strong {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-background-strong:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-background-strong:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-background-subtle {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-background-subtle {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-background-subtle:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-background-subtle:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-border {
  background-color: var(--color-border);
}
:is(.dark *) .blk-dark-bg-border {
  background-color: var(--color-border);
}
:is(.dark *) .blk-dark-hover-bg-border:hover {
  background-color: var(--color-border);
}
.blk-hover-bg-border:hover {
  background-color: var(--color-border);
}
.blk-bg-border-faint {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-border-faint {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-border-faint:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-border-faint:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-border-muted {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-border-muted {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-border-muted:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-border-muted:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-border-strong {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-border-strong {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-border-strong:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-border-strong:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-border-subtle {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-border-subtle {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-border-subtle:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-border-subtle:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-border {
  color: var(--color-border);
}
:is(.dark *) .blk-dark-text-border {
  color: var(--color-border);
}
:is(.dark *) .blk-dark-hover-text-border:hover {
  color: var(--color-border);
}
.blk-hover-text-border:hover {
  color: var(--color-border);
}
.blk-text-border-faint {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-border-faint {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-border-faint:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-border-faint:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-border-muted {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-border-muted {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-border-muted:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-border-muted:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-border-strong {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-border-strong {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-border-strong:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-border-strong:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-border-subtle {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-border-subtle {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-border-subtle:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-border-subtle:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-border {
  border-color: var(--color-border);
}
:is(.dark *) .blk-dark-border-border {
  border-color: var(--color-border);
}
:is(.dark *) .blk-dark-hover-border-border:hover {
  border-color: var(--color-border);
}
.blk-hover-border-border:hover {
  border-color: var(--color-border);
}
.blk-border-border-faint {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-border-faint {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-border-faint:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-border-faint:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-border-muted {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-border-muted {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-border-muted:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-border-muted:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-border-strong {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-border-strong {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-border-strong:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-border-strong:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-border-subtle {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-border-subtle {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-border-subtle:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-border-subtle:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-brand {
  background-color: var(--color-brand);
}
:is(.dark *) .blk-dark-bg-brand {
  background-color: var(--color-brand);
}
:is(.dark *) .blk-dark-hover-bg-brand:hover {
  background-color: var(--color-brand);
}
.blk-hover-bg-brand:hover {
  background-color: var(--color-brand);
}
.blk-bg-brand-faint {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-brand-faint {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-brand-faint:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-brand-faint:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-brand-muted {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-brand-muted {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-brand-muted:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-brand-muted:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-brand-strong {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-brand-strong {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-brand-strong:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-brand-strong:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-brand-subtle {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-brand-subtle {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-brand-subtle:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-brand-subtle:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-brand {
  color: var(--color-brand);
}
:is(.dark *) .blk-dark-text-brand {
  color: var(--color-brand);
}
:is(.dark *) .blk-dark-hover-text-brand:hover {
  color: var(--color-brand);
}
.blk-hover-text-brand:hover {
  color: var(--color-brand);
}
.blk-text-brand-faint {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-brand-faint {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-brand-faint:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-brand-faint:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-brand-muted {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-brand-muted {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-brand-muted:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-brand-muted:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-brand-strong {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-brand-strong {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-brand-strong:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-brand-strong:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-brand-subtle {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-brand-subtle {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-brand-subtle:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-brand-subtle:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-brand {
  border-color: var(--color-brand);
}
:is(.dark *) .blk-dark-border-brand {
  border-color: var(--color-brand);
}
:is(.dark *) .blk-dark-hover-border-brand:hover {
  border-color: var(--color-brand);
}
.blk-hover-border-brand:hover {
  border-color: var(--color-brand);
}
.blk-border-brand-faint {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-brand-faint {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-brand-faint:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-brand-faint:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-brand-muted {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-brand-muted {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-brand-muted:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-brand-muted:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-brand-strong {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-brand-strong {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-brand-strong:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-brand-strong:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-brand-subtle {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-brand-subtle {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-brand-subtle:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-brand-subtle:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-card {
  background-color: var(--color-card);
}
:is(.dark *) .blk-dark-bg-card {
  background-color: var(--color-card);
}
:is(.dark *) .blk-dark-hover-bg-card:hover {
  background-color: var(--color-card);
}
.blk-hover-bg-card:hover {
  background-color: var(--color-card);
}
.blk-bg-card-faint {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-faint {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-faint:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-card-faint:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-card-muted {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-muted {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-muted:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-card-muted:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-card-strong {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-strong {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-strong:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-card-strong:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-card-subtle {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-subtle {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-subtle:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-card-subtle:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-card {
  color: var(--color-card);
}
:is(.dark *) .blk-dark-text-card {
  color: var(--color-card);
}
:is(.dark *) .blk-dark-hover-text-card:hover {
  color: var(--color-card);
}
.blk-hover-text-card:hover {
  color: var(--color-card);
}
.blk-text-card-faint {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-faint {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-faint:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-card-faint:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-card-muted {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-muted {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-muted:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-card-muted:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-card-strong {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-strong {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-strong:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-card-strong:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-card-subtle {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-subtle {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-subtle:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-card-subtle:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-card {
  border-color: var(--color-card);
}
:is(.dark *) .blk-dark-border-card {
  border-color: var(--color-card);
}
:is(.dark *) .blk-dark-hover-border-card:hover {
  border-color: var(--color-card);
}
.blk-hover-border-card:hover {
  border-color: var(--color-card);
}
.blk-border-card-faint {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-faint {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-faint:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-card-faint:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-card-muted {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-muted {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-muted:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-card-muted:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-card-strong {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-strong {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-strong:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-card-strong:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-card-subtle {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-subtle {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-subtle:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-card-subtle:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-card-foreground {
  background-color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-bg-card-foreground {
  background-color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-hover-bg-card-foreground:hover {
  background-color: var(--color-card-foreground);
}
.blk-hover-bg-card-foreground:hover {
  background-color: var(--color-card-foreground);
}
.blk-bg-card-foreground-faint {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-foreground-faint {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-foreground-faint:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-card-foreground-faint:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-card-foreground-muted {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-foreground-muted {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-foreground-muted:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-card-foreground-muted:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-card-foreground-strong {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-foreground-strong {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-foreground-strong:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-card-foreground-strong:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-card-foreground-subtle {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-foreground-subtle {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-foreground-subtle:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-card-foreground-subtle:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-card-foreground {
  color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-text-card-foreground {
  color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-hover-text-card-foreground:hover {
  color: var(--color-card-foreground);
}
.blk-hover-text-card-foreground:hover {
  color: var(--color-card-foreground);
}
.blk-text-card-foreground-faint {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-foreground-faint {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-foreground-faint:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-card-foreground-faint:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-card-foreground-muted {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-foreground-muted {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-foreground-muted:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-card-foreground-muted:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-card-foreground-strong {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-foreground-strong {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-foreground-strong:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-card-foreground-strong:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-card-foreground-subtle {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-foreground-subtle {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-foreground-subtle:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-card-foreground-subtle:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-card-foreground {
  border-color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-border-card-foreground {
  border-color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-hover-border-card-foreground:hover {
  border-color: var(--color-card-foreground);
}
.blk-hover-border-card-foreground:hover {
  border-color: var(--color-card-foreground);
}
.blk-border-card-foreground-faint {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-foreground-faint {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-foreground-faint:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-card-foreground-faint:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-card-foreground-muted {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-foreground-muted {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-foreground-muted:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-card-foreground-muted:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-card-foreground-strong {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-foreground-strong {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-foreground-strong:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-card-foreground-strong:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-card-foreground-subtle {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-foreground-subtle {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-foreground-subtle:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-card-foreground-subtle:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-chart-1 {
  background-color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-bg-chart-1 {
  background-color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-hover-bg-chart-1:hover {
  background-color: var(--color-chart-1);
}
.blk-hover-bg-chart-1:hover {
  background-color: var(--color-chart-1);
}
.blk-bg-chart-1-faint {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-1-faint {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-1-faint:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-chart-1-faint:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-chart-1-muted {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-1-muted {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-1-muted:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-chart-1-muted:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-chart-1-strong {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-1-strong {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-1-strong:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-chart-1-strong:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-chart-1-subtle {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-1-subtle {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-1-subtle:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-chart-1-subtle:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-chart-1 {
  color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-text-chart-1 {
  color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-hover-text-chart-1:hover {
  color: var(--color-chart-1);
}
.blk-hover-text-chart-1:hover {
  color: var(--color-chart-1);
}
.blk-text-chart-1-faint {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-1-faint {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-1-faint:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-chart-1-faint:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-chart-1-muted {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-1-muted {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-1-muted:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-chart-1-muted:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-chart-1-strong {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-1-strong {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-1-strong:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-chart-1-strong:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-chart-1-subtle {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-1-subtle {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-1-subtle:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-chart-1-subtle:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-chart-1 {
  border-color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-border-chart-1 {
  border-color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-hover-border-chart-1:hover {
  border-color: var(--color-chart-1);
}
.blk-hover-border-chart-1:hover {
  border-color: var(--color-chart-1);
}
.blk-border-chart-1-faint {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-1-faint {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-1-faint:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-chart-1-faint:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-chart-1-muted {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-1-muted {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-1-muted:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-chart-1-muted:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-chart-1-strong {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-1-strong {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-1-strong:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-chart-1-strong:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-chart-1-subtle {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-1-subtle {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-1-subtle:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-chart-1-subtle:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-chart-2 {
  background-color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-bg-chart-2 {
  background-color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-hover-bg-chart-2:hover {
  background-color: var(--color-chart-2);
}
.blk-hover-bg-chart-2:hover {
  background-color: var(--color-chart-2);
}
.blk-bg-chart-2-faint {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-2-faint {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-2-faint:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-chart-2-faint:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-chart-2-muted {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-2-muted {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-2-muted:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-chart-2-muted:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-chart-2-strong {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-2-strong {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-2-strong:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-chart-2-strong:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-chart-2-subtle {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-2-subtle {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-2-subtle:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-chart-2-subtle:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-chart-2 {
  color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-text-chart-2 {
  color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-hover-text-chart-2:hover {
  color: var(--color-chart-2);
}
.blk-hover-text-chart-2:hover {
  color: var(--color-chart-2);
}
.blk-text-chart-2-faint {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-2-faint {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-2-faint:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-chart-2-faint:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-chart-2-muted {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-2-muted {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-2-muted:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-chart-2-muted:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-chart-2-strong {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-2-strong {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-2-strong:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-chart-2-strong:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-chart-2-subtle {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-2-subtle {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-2-subtle:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-chart-2-subtle:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-chart-2 {
  border-color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-border-chart-2 {
  border-color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-hover-border-chart-2:hover {
  border-color: var(--color-chart-2);
}
.blk-hover-border-chart-2:hover {
  border-color: var(--color-chart-2);
}
.blk-border-chart-2-faint {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-2-faint {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-2-faint:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-chart-2-faint:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-chart-2-muted {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-2-muted {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-2-muted:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-chart-2-muted:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-chart-2-strong {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-2-strong {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-2-strong:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-chart-2-strong:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-chart-2-subtle {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-2-subtle {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-2-subtle:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-chart-2-subtle:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-chart-3 {
  background-color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-bg-chart-3 {
  background-color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-hover-bg-chart-3:hover {
  background-color: var(--color-chart-3);
}
.blk-hover-bg-chart-3:hover {
  background-color: var(--color-chart-3);
}
.blk-bg-chart-3-faint {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-3-faint {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-3-faint:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-chart-3-faint:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-chart-3-muted {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-3-muted {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-3-muted:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-chart-3-muted:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-chart-3-strong {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-3-strong {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-3-strong:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-chart-3-strong:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-chart-3-subtle {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-3-subtle {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-3-subtle:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-chart-3-subtle:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-chart-3 {
  color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-text-chart-3 {
  color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-hover-text-chart-3:hover {
  color: var(--color-chart-3);
}
.blk-hover-text-chart-3:hover {
  color: var(--color-chart-3);
}
.blk-text-chart-3-faint {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-3-faint {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-3-faint:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-chart-3-faint:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-chart-3-muted {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-3-muted {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-3-muted:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-chart-3-muted:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-chart-3-strong {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-3-strong {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-3-strong:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-chart-3-strong:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-chart-3-subtle {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-3-subtle {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-3-subtle:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-chart-3-subtle:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-chart-3 {
  border-color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-border-chart-3 {
  border-color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-hover-border-chart-3:hover {
  border-color: var(--color-chart-3);
}
.blk-hover-border-chart-3:hover {
  border-color: var(--color-chart-3);
}
.blk-border-chart-3-faint {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-3-faint {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-3-faint:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-chart-3-faint:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-chart-3-muted {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-3-muted {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-3-muted:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-chart-3-muted:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-chart-3-strong {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-3-strong {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-3-strong:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-chart-3-strong:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-chart-3-subtle {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-3-subtle {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-3-subtle:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-chart-3-subtle:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-chart-4 {
  background-color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-bg-chart-4 {
  background-color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-hover-bg-chart-4:hover {
  background-color: var(--color-chart-4);
}
.blk-hover-bg-chart-4:hover {
  background-color: var(--color-chart-4);
}
.blk-bg-chart-4-faint {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-4-faint {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-4-faint:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-chart-4-faint:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-chart-4-muted {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-4-muted {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-4-muted:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-chart-4-muted:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-chart-4-strong {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-4-strong {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-4-strong:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-chart-4-strong:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-chart-4-subtle {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-4-subtle {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-4-subtle:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-chart-4-subtle:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-chart-4 {
  color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-text-chart-4 {
  color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-hover-text-chart-4:hover {
  color: var(--color-chart-4);
}
.blk-hover-text-chart-4:hover {
  color: var(--color-chart-4);
}
.blk-text-chart-4-faint {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-4-faint {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-4-faint:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-chart-4-faint:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-chart-4-muted {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-4-muted {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-4-muted:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-chart-4-muted:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-chart-4-strong {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-4-strong {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-4-strong:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-chart-4-strong:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-chart-4-subtle {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-4-subtle {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-4-subtle:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-chart-4-subtle:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-chart-4 {
  border-color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-border-chart-4 {
  border-color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-hover-border-chart-4:hover {
  border-color: var(--color-chart-4);
}
.blk-hover-border-chart-4:hover {
  border-color: var(--color-chart-4);
}
.blk-border-chart-4-faint {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-4-faint {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-4-faint:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-chart-4-faint:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-chart-4-muted {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-4-muted {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-4-muted:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-chart-4-muted:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-chart-4-strong {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-4-strong {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-4-strong:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-chart-4-strong:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-chart-4-subtle {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-4-subtle {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-4-subtle:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-chart-4-subtle:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-chart-5 {
  background-color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-bg-chart-5 {
  background-color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-hover-bg-chart-5:hover {
  background-color: var(--color-chart-5);
}
.blk-hover-bg-chart-5:hover {
  background-color: var(--color-chart-5);
}
.blk-bg-chart-5-faint {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-5-faint {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-5-faint:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-chart-5-faint:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-chart-5-muted {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-5-muted {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-5-muted:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-chart-5-muted:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-chart-5-strong {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-5-strong {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-5-strong:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-chart-5-strong:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-chart-5-subtle {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-5-subtle {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-5-subtle:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-chart-5-subtle:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-chart-5 {
  color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-text-chart-5 {
  color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-hover-text-chart-5:hover {
  color: var(--color-chart-5);
}
.blk-hover-text-chart-5:hover {
  color: var(--color-chart-5);
}
.blk-text-chart-5-faint {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-5-faint {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-5-faint:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-chart-5-faint:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-chart-5-muted {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-5-muted {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-5-muted:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-chart-5-muted:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-chart-5-strong {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-5-strong {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-5-strong:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-chart-5-strong:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-chart-5-subtle {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-5-subtle {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-5-subtle:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-chart-5-subtle:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-chart-5 {
  border-color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-border-chart-5 {
  border-color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-hover-border-chart-5:hover {
  border-color: var(--color-chart-5);
}
.blk-hover-border-chart-5:hover {
  border-color: var(--color-chart-5);
}
.blk-border-chart-5-faint {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-5-faint {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-5-faint:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-chart-5-faint:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-chart-5-muted {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-5-muted {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-5-muted:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-chart-5-muted:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-chart-5-strong {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-5-strong {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-5-strong:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-chart-5-strong:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-chart-5-subtle {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-5-subtle {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-5-subtle:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-chart-5-subtle:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-destructive {
  background-color: var(--color-destructive);
}
:is(.dark *) .blk-dark-bg-destructive {
  background-color: var(--color-destructive);
}
:is(.dark *) .blk-dark-hover-bg-destructive:hover {
  background-color: var(--color-destructive);
}
.blk-hover-bg-destructive:hover {
  background-color: var(--color-destructive);
}
.blk-bg-destructive-faint {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-faint {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-faint:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-faint:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-destructive-muted {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-muted {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-muted:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-muted:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-destructive-strong {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-strong {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-strong:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-strong:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-destructive-subtle {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-subtle {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-subtle:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-subtle:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-destructive {
  color: var(--color-destructive);
}
:is(.dark *) .blk-dark-text-destructive {
  color: var(--color-destructive);
}
:is(.dark *) .blk-dark-hover-text-destructive:hover {
  color: var(--color-destructive);
}
.blk-hover-text-destructive:hover {
  color: var(--color-destructive);
}
.blk-text-destructive-faint {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-faint {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-faint:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-destructive-faint:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-destructive-muted {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-muted {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-muted:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-destructive-muted:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-destructive-strong {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-strong {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-strong:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-destructive-strong:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-destructive-subtle {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-subtle {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-subtle:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-destructive-subtle:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-destructive {
  border-color: var(--color-destructive);
}
:is(.dark *) .blk-dark-border-destructive {
  border-color: var(--color-destructive);
}
:is(.dark *) .blk-dark-hover-border-destructive:hover {
  border-color: var(--color-destructive);
}
.blk-hover-border-destructive:hover {
  border-color: var(--color-destructive);
}
.blk-border-destructive-faint {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-faint {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-faint:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-destructive-faint:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-destructive-muted {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-muted {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-muted:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-destructive-muted:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-destructive-strong {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-strong {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-strong:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-destructive-strong:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-destructive-subtle {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-subtle {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-subtle:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-destructive-subtle:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-destructive-foreground {
  background-color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-bg-destructive-foreground {
  background-color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-hover-bg-destructive-foreground:hover {
  background-color: var(--color-destructive-foreground);
}
.blk-hover-bg-destructive-foreground:hover {
  background-color: var(--color-destructive-foreground);
}
.blk-bg-destructive-foreground-faint {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-foreground-faint {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-foreground-faint:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-foreground-faint:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-destructive-foreground-muted {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-foreground-muted {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-foreground-muted:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-foreground-muted:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-destructive-foreground-strong {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-foreground-strong {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-foreground-strong:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-foreground-strong:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-destructive-foreground-subtle {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-foreground-subtle {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-foreground-subtle:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-foreground-subtle:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-destructive-foreground {
  color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-text-destructive-foreground {
  color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-hover-text-destructive-foreground:hover {
  color: var(--color-destructive-foreground);
}
.blk-hover-text-destructive-foreground:hover {
  color: var(--color-destructive-foreground);
}
.blk-text-destructive-foreground-faint {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-foreground-faint {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-foreground-faint:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-destructive-foreground-faint:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-destructive-foreground-muted {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-foreground-muted {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-foreground-muted:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-destructive-foreground-muted:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-destructive-foreground-strong {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-foreground-strong {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-foreground-strong:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-destructive-foreground-strong:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-destructive-foreground-subtle {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-foreground-subtle {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-foreground-subtle:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-destructive-foreground-subtle:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-destructive-foreground {
  border-color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-border-destructive-foreground {
  border-color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-hover-border-destructive-foreground:hover {
  border-color: var(--color-destructive-foreground);
}
.blk-hover-border-destructive-foreground:hover {
  border-color: var(--color-destructive-foreground);
}
.blk-border-destructive-foreground-faint {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-foreground-faint {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-foreground-faint:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-destructive-foreground-faint:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-destructive-foreground-muted {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-foreground-muted {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-foreground-muted:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-destructive-foreground-muted:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-destructive-foreground-strong {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-foreground-strong {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-foreground-strong:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-destructive-foreground-strong:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-destructive-foreground-subtle {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-foreground-subtle {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-foreground-subtle:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-destructive-foreground-subtle:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-foreground {
  background-color: var(--color-foreground);
}
:is(.dark *) .blk-dark-bg-foreground {
  background-color: var(--color-foreground);
}
:is(.dark *) .blk-dark-hover-bg-foreground:hover {
  background-color: var(--color-foreground);
}
.blk-hover-bg-foreground:hover {
  background-color: var(--color-foreground);
}
.blk-bg-foreground-faint {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-foreground-faint {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-foreground-faint:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-foreground-faint:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-foreground-muted {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-foreground-muted {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-foreground-muted:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-foreground-muted:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-foreground-strong {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-foreground-strong {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-foreground-strong:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-foreground-strong:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-foreground-subtle {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-foreground-subtle {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-foreground-subtle:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-foreground-subtle:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-foreground {
  color: var(--color-foreground);
}
:is(.dark *) .blk-dark-text-foreground {
  color: var(--color-foreground);
}
:is(.dark *) .blk-dark-hover-text-foreground:hover {
  color: var(--color-foreground);
}
.blk-hover-text-foreground:hover {
  color: var(--color-foreground);
}
.blk-text-foreground-faint {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-foreground-faint {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-foreground-faint:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-foreground-faint:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-foreground-muted {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-foreground-muted {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-foreground-muted:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-foreground-muted:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-foreground-strong {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-foreground-strong {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-foreground-strong:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-foreground-strong:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-foreground-subtle {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-foreground-subtle {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-foreground-subtle:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-foreground-subtle:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-foreground {
  border-color: var(--color-foreground);
}
:is(.dark *) .blk-dark-border-foreground {
  border-color: var(--color-foreground);
}
:is(.dark *) .blk-dark-hover-border-foreground:hover {
  border-color: var(--color-foreground);
}
.blk-hover-border-foreground:hover {
  border-color: var(--color-foreground);
}
.blk-border-foreground-faint {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-foreground-faint {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-foreground-faint:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-foreground-faint:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-foreground-muted {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-foreground-muted {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-foreground-muted:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-foreground-muted:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-foreground-strong {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-foreground-strong {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-foreground-strong:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-foreground-strong:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-foreground-subtle {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-foreground-subtle {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-foreground-subtle:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-foreground-subtle:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-highlight {
  background-color: var(--color-highlight);
}
:is(.dark *) .blk-dark-bg-highlight {
  background-color: var(--color-highlight);
}
:is(.dark *) .blk-dark-hover-bg-highlight:hover {
  background-color: var(--color-highlight);
}
.blk-hover-bg-highlight:hover {
  background-color: var(--color-highlight);
}
.blk-bg-highlight-faint {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-highlight-faint {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-highlight-faint:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-highlight-faint:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-highlight-muted {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-highlight-muted {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-highlight-muted:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-highlight-muted:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-highlight-strong {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-highlight-strong {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-highlight-strong:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-highlight-strong:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-highlight-subtle {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-highlight-subtle {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-highlight-subtle:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-highlight-subtle:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-highlight {
  color: var(--color-highlight);
}
:is(.dark *) .blk-dark-text-highlight {
  color: var(--color-highlight);
}
:is(.dark *) .blk-dark-hover-text-highlight:hover {
  color: var(--color-highlight);
}
.blk-hover-text-highlight:hover {
  color: var(--color-highlight);
}
.blk-text-highlight-faint {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-highlight-faint {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-highlight-faint:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-highlight-faint:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-highlight-muted {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-highlight-muted {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-highlight-muted:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-highlight-muted:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-highlight-strong {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-highlight-strong {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-highlight-strong:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-highlight-strong:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-highlight-subtle {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-highlight-subtle {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-highlight-subtle:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-highlight-subtle:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-highlight {
  border-color: var(--color-highlight);
}
:is(.dark *) .blk-dark-border-highlight {
  border-color: var(--color-highlight);
}
:is(.dark *) .blk-dark-hover-border-highlight:hover {
  border-color: var(--color-highlight);
}
.blk-hover-border-highlight:hover {
  border-color: var(--color-highlight);
}
.blk-border-highlight-faint {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-highlight-faint {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-highlight-faint:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-highlight-faint:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-highlight-muted {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-highlight-muted {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-highlight-muted:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-highlight-muted:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-highlight-strong {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-highlight-strong {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-highlight-strong:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-highlight-strong:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-highlight-subtle {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-highlight-subtle {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-highlight-subtle:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-highlight-subtle:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-info {
  background-color: var(--color-info);
}
:is(.dark *) .blk-dark-bg-info {
  background-color: var(--color-info);
}
:is(.dark *) .blk-dark-hover-bg-info:hover {
  background-color: var(--color-info);
}
.blk-hover-bg-info:hover {
  background-color: var(--color-info);
}
.blk-bg-info-faint {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-faint {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-faint:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-info-faint:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-info-muted {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-muted {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-muted:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-info-muted:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-info-strong {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-strong {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-strong:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-info-strong:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-info-subtle {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-subtle {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-subtle:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-info-subtle:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-info {
  color: var(--color-info);
}
:is(.dark *) .blk-dark-text-info {
  color: var(--color-info);
}
:is(.dark *) .blk-dark-hover-text-info:hover {
  color: var(--color-info);
}
.blk-hover-text-info:hover {
  color: var(--color-info);
}
.blk-text-info-faint {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-faint {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-faint:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-info-faint:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-info-muted {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-muted {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-muted:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-info-muted:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-info-strong {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-strong {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-strong:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-info-strong:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-info-subtle {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-subtle {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-subtle:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-info-subtle:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-info {
  border-color: var(--color-info);
}
:is(.dark *) .blk-dark-border-info {
  border-color: var(--color-info);
}
:is(.dark *) .blk-dark-hover-border-info:hover {
  border-color: var(--color-info);
}
.blk-hover-border-info:hover {
  border-color: var(--color-info);
}
.blk-border-info-faint {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-faint {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-faint:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-info-faint:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-info-muted {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-muted {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-muted:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-info-muted:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-info-strong {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-strong {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-strong:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-info-strong:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-info-subtle {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-subtle {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-subtle:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-info-subtle:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-info-foreground {
  background-color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-bg-info-foreground {
  background-color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-hover-bg-info-foreground:hover {
  background-color: var(--color-info-foreground);
}
.blk-hover-bg-info-foreground:hover {
  background-color: var(--color-info-foreground);
}
.blk-bg-info-foreground-faint {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-foreground-faint {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-foreground-faint:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-info-foreground-faint:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-info-foreground-muted {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-foreground-muted {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-foreground-muted:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-info-foreground-muted:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-info-foreground-strong {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-foreground-strong {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-foreground-strong:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-info-foreground-strong:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-info-foreground-subtle {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-foreground-subtle {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-foreground-subtle:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-info-foreground-subtle:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-info-foreground {
  color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-text-info-foreground {
  color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-hover-text-info-foreground:hover {
  color: var(--color-info-foreground);
}
.blk-hover-text-info-foreground:hover {
  color: var(--color-info-foreground);
}
.blk-text-info-foreground-faint {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-foreground-faint {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-foreground-faint:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-info-foreground-faint:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-info-foreground-muted {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-foreground-muted {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-foreground-muted:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-info-foreground-muted:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-info-foreground-strong {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-foreground-strong {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-foreground-strong:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-info-foreground-strong:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-info-foreground-subtle {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-foreground-subtle {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-foreground-subtle:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-info-foreground-subtle:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-info-foreground {
  border-color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-border-info-foreground {
  border-color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-hover-border-info-foreground:hover {
  border-color: var(--color-info-foreground);
}
.blk-hover-border-info-foreground:hover {
  border-color: var(--color-info-foreground);
}
.blk-border-info-foreground-faint {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-foreground-faint {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-foreground-faint:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-info-foreground-faint:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-info-foreground-muted {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-foreground-muted {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-foreground-muted:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-info-foreground-muted:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-info-foreground-strong {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-foreground-strong {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-foreground-strong:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-info-foreground-strong:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-info-foreground-subtle {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-foreground-subtle {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-foreground-subtle:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-info-foreground-subtle:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-input {
  background-color: var(--color-input);
}
:is(.dark *) .blk-dark-bg-input {
  background-color: var(--color-input);
}
:is(.dark *) .blk-dark-hover-bg-input:hover {
  background-color: var(--color-input);
}
.blk-hover-bg-input:hover {
  background-color: var(--color-input);
}
.blk-bg-input-faint {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-input-faint {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-input-faint:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-input-faint:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-input-muted {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-input-muted {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-input-muted:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-input-muted:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-input-strong {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-input-strong {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-input-strong:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-input-strong:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-input-subtle {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-input-subtle {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-input-subtle:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-input-subtle:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-input {
  color: var(--color-input);
}
:is(.dark *) .blk-dark-text-input {
  color: var(--color-input);
}
:is(.dark *) .blk-dark-hover-text-input:hover {
  color: var(--color-input);
}
.blk-hover-text-input:hover {
  color: var(--color-input);
}
.blk-text-input-faint {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-input-faint {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-input-faint:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-input-faint:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-input-muted {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-input-muted {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-input-muted:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-input-muted:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-input-strong {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-input-strong {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-input-strong:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-input-strong:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-input-subtle {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-input-subtle {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-input-subtle:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-input-subtle:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-input {
  border-color: var(--color-input);
}
:is(.dark *) .blk-dark-border-input {
  border-color: var(--color-input);
}
:is(.dark *) .blk-dark-hover-border-input:hover {
  border-color: var(--color-input);
}
.blk-hover-border-input:hover {
  border-color: var(--color-input);
}
.blk-border-input-faint {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-input-faint {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-input-faint:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-input-faint:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-input-muted {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-input-muted {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-input-muted:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-input-muted:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-input-strong {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-input-strong {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-input-strong:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-input-strong:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-input-subtle {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-input-subtle {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-input-subtle:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-input-subtle:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-muted {
  background-color: var(--color-muted);
}
:is(.dark *) .blk-dark-bg-muted {
  background-color: var(--color-muted);
}
:is(.dark *) .blk-dark-hover-bg-muted:hover {
  background-color: var(--color-muted);
}
.blk-hover-bg-muted:hover {
  background-color: var(--color-muted);
}
.blk-bg-muted-faint {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-faint {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-faint:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-muted-faint:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-muted-muted {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-muted {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-muted:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-muted-muted:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-muted-strong {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-strong {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-strong:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-muted-strong:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-muted-subtle {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-subtle {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-subtle:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-muted-subtle:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-muted {
  color: var(--color-muted);
}
:is(.dark *) .blk-dark-text-muted {
  color: var(--color-muted);
}
:is(.dark *) .blk-dark-hover-text-muted:hover {
  color: var(--color-muted);
}
.blk-hover-text-muted:hover {
  color: var(--color-muted);
}
.blk-text-muted-faint {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-faint {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-faint:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-muted-faint:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-muted-muted {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-muted {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-muted:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-muted-muted:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-muted-strong {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-strong {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-strong:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-muted-strong:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-muted-subtle {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-subtle {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-subtle:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-muted-subtle:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-muted {
  border-color: var(--color-muted);
}
:is(.dark *) .blk-dark-border-muted {
  border-color: var(--color-muted);
}
:is(.dark *) .blk-dark-hover-border-muted:hover {
  border-color: var(--color-muted);
}
.blk-hover-border-muted:hover {
  border-color: var(--color-muted);
}
.blk-border-muted-faint {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-faint {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-faint:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-muted-faint:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-muted-muted {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-muted {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-muted:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-muted-muted:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-muted-strong {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-strong {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-strong:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-muted-strong:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-muted-subtle {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-subtle {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-subtle:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-muted-subtle:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-muted-foreground {
  background-color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-bg-muted-foreground {
  background-color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-hover-bg-muted-foreground:hover {
  background-color: var(--color-muted-foreground);
}
.blk-hover-bg-muted-foreground:hover {
  background-color: var(--color-muted-foreground);
}
.blk-bg-muted-foreground-faint {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-foreground-faint {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-foreground-faint:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-muted-foreground-faint:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-muted-foreground-muted {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-foreground-muted {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-foreground-muted:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-muted-foreground-muted:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-muted-foreground-strong {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-foreground-strong {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-foreground-strong:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-muted-foreground-strong:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-muted-foreground-subtle {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-foreground-subtle {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-foreground-subtle:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-muted-foreground-subtle:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-muted-foreground {
  color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-text-muted-foreground {
  color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-hover-text-muted-foreground:hover {
  color: var(--color-muted-foreground);
}
.blk-hover-text-muted-foreground:hover {
  color: var(--color-muted-foreground);
}
.blk-text-muted-foreground-faint {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-foreground-faint {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-foreground-faint:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-muted-foreground-faint:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-muted-foreground-muted {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-foreground-muted {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-foreground-muted:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-muted-foreground-muted:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-muted-foreground-strong {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-foreground-strong {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-foreground-strong:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-muted-foreground-strong:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-muted-foreground-subtle {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-foreground-subtle {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-foreground-subtle:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-muted-foreground-subtle:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-muted-foreground {
  border-color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-border-muted-foreground {
  border-color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-hover-border-muted-foreground:hover {
  border-color: var(--color-muted-foreground);
}
.blk-hover-border-muted-foreground:hover {
  border-color: var(--color-muted-foreground);
}
.blk-border-muted-foreground-faint {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-foreground-faint {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-foreground-faint:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-muted-foreground-faint:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-muted-foreground-muted {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-foreground-muted {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-foreground-muted:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-muted-foreground-muted:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-muted-foreground-strong {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-foreground-strong {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-foreground-strong:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-muted-foreground-strong:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-muted-foreground-subtle {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-foreground-subtle {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-foreground-subtle:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-muted-foreground-subtle:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-popover {
  background-color: var(--color-popover);
}
:is(.dark *) .blk-dark-bg-popover {
  background-color: var(--color-popover);
}
:is(.dark *) .blk-dark-hover-bg-popover:hover {
  background-color: var(--color-popover);
}
.blk-hover-bg-popover:hover {
  background-color: var(--color-popover);
}
.blk-bg-popover-faint {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-faint {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-faint:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-popover-faint:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-popover-muted {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-muted {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-muted:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-popover-muted:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-popover-strong {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-strong {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-strong:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-popover-strong:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-popover-subtle {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-subtle {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-subtle:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-popover-subtle:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-popover {
  color: var(--color-popover);
}
:is(.dark *) .blk-dark-text-popover {
  color: var(--color-popover);
}
:is(.dark *) .blk-dark-hover-text-popover:hover {
  color: var(--color-popover);
}
.blk-hover-text-popover:hover {
  color: var(--color-popover);
}
.blk-text-popover-faint {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-faint {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-faint:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-popover-faint:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-popover-muted {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-muted {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-muted:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-popover-muted:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-popover-strong {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-strong {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-strong:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-popover-strong:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-popover-subtle {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-subtle {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-subtle:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-popover-subtle:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-popover {
  border-color: var(--color-popover);
}
:is(.dark *) .blk-dark-border-popover {
  border-color: var(--color-popover);
}
:is(.dark *) .blk-dark-hover-border-popover:hover {
  border-color: var(--color-popover);
}
.blk-hover-border-popover:hover {
  border-color: var(--color-popover);
}
.blk-border-popover-faint {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-faint {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-faint:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-popover-faint:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-popover-muted {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-muted {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-muted:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-popover-muted:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-popover-strong {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-strong {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-strong:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-popover-strong:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-popover-subtle {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-subtle {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-subtle:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-popover-subtle:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-popover-foreground {
  background-color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-bg-popover-foreground {
  background-color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-hover-bg-popover-foreground:hover {
  background-color: var(--color-popover-foreground);
}
.blk-hover-bg-popover-foreground:hover {
  background-color: var(--color-popover-foreground);
}
.blk-bg-popover-foreground-faint {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-foreground-faint {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-foreground-faint:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-popover-foreground-faint:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-popover-foreground-muted {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-foreground-muted {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-foreground-muted:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-popover-foreground-muted:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-popover-foreground-strong {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-foreground-strong {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-foreground-strong:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-popover-foreground-strong:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-popover-foreground-subtle {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-foreground-subtle {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-foreground-subtle:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-popover-foreground-subtle:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-popover-foreground {
  color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-text-popover-foreground {
  color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-hover-text-popover-foreground:hover {
  color: var(--color-popover-foreground);
}
.blk-hover-text-popover-foreground:hover {
  color: var(--color-popover-foreground);
}
.blk-text-popover-foreground-faint {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-foreground-faint {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-foreground-faint:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-popover-foreground-faint:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-popover-foreground-muted {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-foreground-muted {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-foreground-muted:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-popover-foreground-muted:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-popover-foreground-strong {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-foreground-strong {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-foreground-strong:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-popover-foreground-strong:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-popover-foreground-subtle {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-foreground-subtle {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-foreground-subtle:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-popover-foreground-subtle:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-popover-foreground {
  border-color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-border-popover-foreground {
  border-color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-hover-border-popover-foreground:hover {
  border-color: var(--color-popover-foreground);
}
.blk-hover-border-popover-foreground:hover {
  border-color: var(--color-popover-foreground);
}
.blk-border-popover-foreground-faint {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-foreground-faint {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-foreground-faint:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-popover-foreground-faint:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-popover-foreground-muted {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-foreground-muted {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-foreground-muted:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-popover-foreground-muted:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-popover-foreground-strong {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-foreground-strong {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-foreground-strong:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-popover-foreground-strong:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-popover-foreground-subtle {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-foreground-subtle {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-foreground-subtle:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-popover-foreground-subtle:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-primary {
  background-color: var(--color-primary);
}
:is(.dark *) .blk-dark-bg-primary {
  background-color: var(--color-primary);
}
:is(.dark *) .blk-dark-hover-bg-primary:hover {
  background-color: var(--color-primary);
}
.blk-hover-bg-primary:hover {
  background-color: var(--color-primary);
}
.blk-bg-primary-faint {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-faint {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-faint:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-primary-faint:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-primary-muted {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-muted {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-muted:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-primary-muted:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-primary-strong {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-strong {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-strong:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-primary-strong:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-primary-subtle {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-subtle {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-subtle:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-primary-subtle:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-primary {
  color: var(--color-primary);
}
:is(.dark *) .blk-dark-text-primary {
  color: var(--color-primary);
}
:is(.dark *) .blk-dark-hover-text-primary:hover {
  color: var(--color-primary);
}
.blk-hover-text-primary:hover {
  color: var(--color-primary);
}
.blk-text-primary-faint {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-faint {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-faint:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-primary-faint:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-primary-muted {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-muted {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-muted:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-primary-muted:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-primary-strong {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-strong {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-strong:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-primary-strong:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-primary-subtle {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-subtle {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-subtle:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-primary-subtle:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-primary {
  border-color: var(--color-primary);
}
:is(.dark *) .blk-dark-border-primary {
  border-color: var(--color-primary);
}
:is(.dark *) .blk-dark-hover-border-primary:hover {
  border-color: var(--color-primary);
}
.blk-hover-border-primary:hover {
  border-color: var(--color-primary);
}
.blk-border-primary-faint {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-faint {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-faint:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-primary-faint:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-primary-muted {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-muted {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-muted:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-primary-muted:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-primary-strong {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-strong {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-strong:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-primary-strong:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-primary-subtle {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-subtle {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-subtle:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-primary-subtle:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-primary-foreground {
  background-color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-bg-primary-foreground {
  background-color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-hover-bg-primary-foreground:hover {
  background-color: var(--color-primary-foreground);
}
.blk-hover-bg-primary-foreground:hover {
  background-color: var(--color-primary-foreground);
}
.blk-bg-primary-foreground-faint {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-foreground-faint {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-foreground-faint:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-primary-foreground-faint:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-primary-foreground-muted {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-foreground-muted {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-foreground-muted:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-primary-foreground-muted:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-primary-foreground-strong {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-foreground-strong {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-foreground-strong:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-primary-foreground-strong:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-primary-foreground-subtle {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-foreground-subtle {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-foreground-subtle:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-primary-foreground-subtle:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-primary-foreground {
  color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-text-primary-foreground {
  color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-hover-text-primary-foreground:hover {
  color: var(--color-primary-foreground);
}
.blk-hover-text-primary-foreground:hover {
  color: var(--color-primary-foreground);
}
.blk-text-primary-foreground-faint {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-foreground-faint {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-foreground-faint:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-primary-foreground-faint:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-primary-foreground-muted {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-foreground-muted {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-foreground-muted:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-primary-foreground-muted:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-primary-foreground-strong {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-foreground-strong {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-foreground-strong:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-primary-foreground-strong:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-primary-foreground-subtle {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-foreground-subtle {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-foreground-subtle:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-primary-foreground-subtle:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-primary-foreground {
  border-color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-border-primary-foreground {
  border-color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-hover-border-primary-foreground:hover {
  border-color: var(--color-primary-foreground);
}
.blk-hover-border-primary-foreground:hover {
  border-color: var(--color-primary-foreground);
}
.blk-border-primary-foreground-faint {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-foreground-faint {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-foreground-faint:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-primary-foreground-faint:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-primary-foreground-muted {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-foreground-muted {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-foreground-muted:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-primary-foreground-muted:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-primary-foreground-strong {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-foreground-strong {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-foreground-strong:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-primary-foreground-strong:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-primary-foreground-subtle {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-foreground-subtle {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-foreground-subtle:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-primary-foreground-subtle:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-ring {
  background-color: var(--color-ring);
}
:is(.dark *) .blk-dark-bg-ring {
  background-color: var(--color-ring);
}
:is(.dark *) .blk-dark-hover-bg-ring:hover {
  background-color: var(--color-ring);
}
.blk-hover-bg-ring:hover {
  background-color: var(--color-ring);
}
.blk-bg-ring-faint {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-ring-faint {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-ring-faint:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-ring-faint:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-ring-muted {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-ring-muted {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-ring-muted:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-ring-muted:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-ring-strong {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-ring-strong {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-ring-strong:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-ring-strong:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-ring-subtle {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-ring-subtle {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-ring-subtle:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-ring-subtle:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-ring {
  color: var(--color-ring);
}
:is(.dark *) .blk-dark-text-ring {
  color: var(--color-ring);
}
:is(.dark *) .blk-dark-hover-text-ring:hover {
  color: var(--color-ring);
}
.blk-hover-text-ring:hover {
  color: var(--color-ring);
}
.blk-text-ring-faint {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-ring-faint {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-ring-faint:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-ring-faint:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-ring-muted {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-ring-muted {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-ring-muted:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-ring-muted:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-ring-strong {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-ring-strong {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-ring-strong:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-ring-strong:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-ring-subtle {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-ring-subtle {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-ring-subtle:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-ring-subtle:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-ring {
  border-color: var(--color-ring);
}
:is(.dark *) .blk-dark-border-ring {
  border-color: var(--color-ring);
}
:is(.dark *) .blk-dark-hover-border-ring:hover {
  border-color: var(--color-ring);
}
.blk-hover-border-ring:hover {
  border-color: var(--color-ring);
}
.blk-border-ring-faint {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-ring-faint {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-ring-faint:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-ring-faint:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-ring-muted {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-ring-muted {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-ring-muted:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-ring-muted:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-ring-strong {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-ring-strong {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-ring-strong:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-ring-strong:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-ring-subtle {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-ring-subtle {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-ring-subtle:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-ring-subtle:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-secondary {
  background-color: var(--color-secondary);
}
:is(.dark *) .blk-dark-bg-secondary {
  background-color: var(--color-secondary);
}
:is(.dark *) .blk-dark-hover-bg-secondary:hover {
  background-color: var(--color-secondary);
}
.blk-hover-bg-secondary:hover {
  background-color: var(--color-secondary);
}
.blk-bg-secondary-faint {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-faint {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-faint:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-faint:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-secondary-muted {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-muted {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-muted:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-muted:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-secondary-strong {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-strong {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-strong:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-strong:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-secondary-subtle {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-subtle {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-subtle:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-subtle:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-secondary {
  color: var(--color-secondary);
}
:is(.dark *) .blk-dark-text-secondary {
  color: var(--color-secondary);
}
:is(.dark *) .blk-dark-hover-text-secondary:hover {
  color: var(--color-secondary);
}
.blk-hover-text-secondary:hover {
  color: var(--color-secondary);
}
.blk-text-secondary-faint {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-faint {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-faint:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-secondary-faint:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-secondary-muted {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-muted {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-muted:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-secondary-muted:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-secondary-strong {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-strong {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-strong:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-secondary-strong:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-secondary-subtle {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-subtle {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-subtle:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-secondary-subtle:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-secondary {
  border-color: var(--color-secondary);
}
:is(.dark *) .blk-dark-border-secondary {
  border-color: var(--color-secondary);
}
:is(.dark *) .blk-dark-hover-border-secondary:hover {
  border-color: var(--color-secondary);
}
.blk-hover-border-secondary:hover {
  border-color: var(--color-secondary);
}
.blk-border-secondary-faint {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-faint {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-faint:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-secondary-faint:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-secondary-muted {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-muted {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-muted:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-secondary-muted:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-secondary-strong {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-strong {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-strong:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-secondary-strong:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-secondary-subtle {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-subtle {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-subtle:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-secondary-subtle:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-secondary-foreground {
  background-color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-bg-secondary-foreground {
  background-color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-hover-bg-secondary-foreground:hover {
  background-color: var(--color-secondary-foreground);
}
.blk-hover-bg-secondary-foreground:hover {
  background-color: var(--color-secondary-foreground);
}
.blk-bg-secondary-foreground-faint {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-foreground-faint {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-foreground-faint:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-foreground-faint:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-secondary-foreground-muted {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-foreground-muted {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-foreground-muted:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-foreground-muted:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-secondary-foreground-strong {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-foreground-strong {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-foreground-strong:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-foreground-strong:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-secondary-foreground-subtle {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-foreground-subtle {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-foreground-subtle:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-foreground-subtle:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-secondary-foreground {
  color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-text-secondary-foreground {
  color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-hover-text-secondary-foreground:hover {
  color: var(--color-secondary-foreground);
}
.blk-hover-text-secondary-foreground:hover {
  color: var(--color-secondary-foreground);
}
.blk-text-secondary-foreground-faint {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-foreground-faint {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-foreground-faint:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-secondary-foreground-faint:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-secondary-foreground-muted {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-foreground-muted {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-foreground-muted:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-secondary-foreground-muted:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-secondary-foreground-strong {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-foreground-strong {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-foreground-strong:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-secondary-foreground-strong:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-secondary-foreground-subtle {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-foreground-subtle {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-foreground-subtle:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-secondary-foreground-subtle:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-secondary-foreground {
  border-color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-border-secondary-foreground {
  border-color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-hover-border-secondary-foreground:hover {
  border-color: var(--color-secondary-foreground);
}
.blk-hover-border-secondary-foreground:hover {
  border-color: var(--color-secondary-foreground);
}
.blk-border-secondary-foreground-faint {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-foreground-faint {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-foreground-faint:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-secondary-foreground-faint:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-secondary-foreground-muted {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-foreground-muted {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-foreground-muted:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-secondary-foreground-muted:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-secondary-foreground-strong {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-foreground-strong {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-foreground-strong:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-secondary-foreground-strong:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-secondary-foreground-subtle {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-foreground-subtle {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-foreground-subtle:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-secondary-foreground-subtle:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-success {
  background-color: var(--color-success);
}
:is(.dark *) .blk-dark-bg-success {
  background-color: var(--color-success);
}
:is(.dark *) .blk-dark-hover-bg-success:hover {
  background-color: var(--color-success);
}
.blk-hover-bg-success:hover {
  background-color: var(--color-success);
}
.blk-bg-success-faint {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-faint {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-faint:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-success-faint:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-success-muted {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-muted {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-muted:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-success-muted:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-success-strong {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-strong {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-strong:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-success-strong:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-success-subtle {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-subtle {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-subtle:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-success-subtle:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-success {
  color: var(--color-success);
}
:is(.dark *) .blk-dark-text-success {
  color: var(--color-success);
}
:is(.dark *) .blk-dark-hover-text-success:hover {
  color: var(--color-success);
}
.blk-hover-text-success:hover {
  color: var(--color-success);
}
.blk-text-success-faint {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-faint {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-faint:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-success-faint:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-success-muted {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-muted {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-muted:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-success-muted:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-success-strong {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-strong {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-strong:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-success-strong:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-success-subtle {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-subtle {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-subtle:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-success-subtle:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-success {
  border-color: var(--color-success);
}
:is(.dark *) .blk-dark-border-success {
  border-color: var(--color-success);
}
:is(.dark *) .blk-dark-hover-border-success:hover {
  border-color: var(--color-success);
}
.blk-hover-border-success:hover {
  border-color: var(--color-success);
}
.blk-border-success-faint {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-faint {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-faint:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-success-faint:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-success-muted {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-muted {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-muted:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-success-muted:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-success-strong {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-strong {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-strong:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-success-strong:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-success-subtle {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-subtle {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-subtle:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-success-subtle:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-success-foreground {
  background-color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-bg-success-foreground {
  background-color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-hover-bg-success-foreground:hover {
  background-color: var(--color-success-foreground);
}
.blk-hover-bg-success-foreground:hover {
  background-color: var(--color-success-foreground);
}
.blk-bg-success-foreground-faint {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-foreground-faint {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-foreground-faint:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-success-foreground-faint:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-success-foreground-muted {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-foreground-muted {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-foreground-muted:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-success-foreground-muted:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-success-foreground-strong {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-foreground-strong {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-foreground-strong:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-success-foreground-strong:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-success-foreground-subtle {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-foreground-subtle {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-foreground-subtle:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-success-foreground-subtle:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-success-foreground {
  color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-text-success-foreground {
  color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-hover-text-success-foreground:hover {
  color: var(--color-success-foreground);
}
.blk-hover-text-success-foreground:hover {
  color: var(--color-success-foreground);
}
.blk-text-success-foreground-faint {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-foreground-faint {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-foreground-faint:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-success-foreground-faint:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-success-foreground-muted {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-foreground-muted {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-foreground-muted:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-success-foreground-muted:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-success-foreground-strong {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-foreground-strong {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-foreground-strong:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-success-foreground-strong:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-success-foreground-subtle {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-foreground-subtle {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-foreground-subtle:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-success-foreground-subtle:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-success-foreground {
  border-color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-border-success-foreground {
  border-color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-hover-border-success-foreground:hover {
  border-color: var(--color-success-foreground);
}
.blk-hover-border-success-foreground:hover {
  border-color: var(--color-success-foreground);
}
.blk-border-success-foreground-faint {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-foreground-faint {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-foreground-faint:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-success-foreground-faint:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-success-foreground-muted {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-foreground-muted {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-foreground-muted:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-success-foreground-muted:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-success-foreground-strong {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-foreground-strong {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-foreground-strong:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-success-foreground-strong:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-success-foreground-subtle {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-foreground-subtle {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-foreground-subtle:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-success-foreground-subtle:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-warning {
  background-color: var(--color-warning);
}
:is(.dark *) .blk-dark-bg-warning {
  background-color: var(--color-warning);
}
:is(.dark *) .blk-dark-hover-bg-warning:hover {
  background-color: var(--color-warning);
}
.blk-hover-bg-warning:hover {
  background-color: var(--color-warning);
}
.blk-bg-warning-faint {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-faint {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-faint:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-warning-faint:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-warning-muted {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-muted {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-muted:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-warning-muted:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-warning-strong {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-strong {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-strong:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-warning-strong:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-warning-subtle {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-subtle {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-subtle:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-warning-subtle:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-warning {
  color: var(--color-warning);
}
:is(.dark *) .blk-dark-text-warning {
  color: var(--color-warning);
}
:is(.dark *) .blk-dark-hover-text-warning:hover {
  color: var(--color-warning);
}
.blk-hover-text-warning:hover {
  color: var(--color-warning);
}
.blk-text-warning-faint {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-faint {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-faint:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-warning-faint:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-warning-muted {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-muted {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-muted:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-warning-muted:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-warning-strong {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-strong {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-strong:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-warning-strong:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-warning-subtle {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-subtle {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-subtle:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-warning-subtle:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-warning {
  border-color: var(--color-warning);
}
:is(.dark *) .blk-dark-border-warning {
  border-color: var(--color-warning);
}
:is(.dark *) .blk-dark-hover-border-warning:hover {
  border-color: var(--color-warning);
}
.blk-hover-border-warning:hover {
  border-color: var(--color-warning);
}
.blk-border-warning-faint {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-faint {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-faint:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-warning-faint:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-warning-muted {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-muted {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-muted:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-warning-muted:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-warning-strong {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-strong {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-strong:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-warning-strong:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-warning-subtle {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-subtle {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-subtle:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-warning-subtle:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-warning-foreground {
  background-color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-bg-warning-foreground {
  background-color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-hover-bg-warning-foreground:hover {
  background-color: var(--color-warning-foreground);
}
.blk-hover-bg-warning-foreground:hover {
  background-color: var(--color-warning-foreground);
}
.blk-bg-warning-foreground-faint {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-foreground-faint {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-foreground-faint:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-warning-foreground-faint:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-warning-foreground-muted {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-foreground-muted {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-foreground-muted:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-warning-foreground-muted:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-warning-foreground-strong {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-foreground-strong {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-foreground-strong:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-warning-foreground-strong:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-warning-foreground-subtle {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-foreground-subtle {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-foreground-subtle:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-warning-foreground-subtle:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-warning-foreground {
  color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-text-warning-foreground {
  color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-hover-text-warning-foreground:hover {
  color: var(--color-warning-foreground);
}
.blk-hover-text-warning-foreground:hover {
  color: var(--color-warning-foreground);
}
.blk-text-warning-foreground-faint {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-foreground-faint {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-foreground-faint:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-warning-foreground-faint:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-warning-foreground-muted {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-foreground-muted {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-foreground-muted:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-warning-foreground-muted:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-warning-foreground-strong {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-foreground-strong {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-foreground-strong:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-warning-foreground-strong:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-warning-foreground-subtle {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-foreground-subtle {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-foreground-subtle:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-warning-foreground-subtle:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-warning-foreground {
  border-color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-border-warning-foreground {
  border-color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-hover-border-warning-foreground:hover {
  border-color: var(--color-warning-foreground);
}
.blk-hover-border-warning-foreground:hover {
  border-color: var(--color-warning-foreground);
}
.blk-border-warning-foreground-faint {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-foreground-faint {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-foreground-faint:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-warning-foreground-faint:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-warning-foreground-muted {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-foreground-muted {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-foreground-muted:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-warning-foreground-muted:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-warning-foreground-strong {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-foreground-strong {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-foreground-strong:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-warning-foreground-strong:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-warning-foreground-subtle {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-foreground-subtle {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-foreground-subtle:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-warning-foreground-subtle:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-space-0-p {
  padding: var(--space-0);
}
.blk-space-0-px {
  padding-left: var(--space-0);
  padding-right: var(--space-0);
}
.blk-space-0-py {
  padding-top: var(--space-0);
  padding-bottom: var(--space-0);
}
.blk-space-0-pt {
  padding-top: var(--space-0);
}
.blk-space-0-pr {
  padding-right: var(--space-0);
}
.blk-space-0-pl {
  padding-left: var(--space-0);
}
.blk-space-0-pb {
  padding-bottom: var(--space-0);
}
.blk-space-0-m {
  margin: var(--space-0);
}
.blk-space-0-mx {
  margin-left: var(--space-0);
  margin-right: var(--space-0);
}
.blk-space-0-my {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}
.blk-space-0-mt {
  margin-top: var(--space-0);
}
.blk-space-0-mr {
  margin-right: var(--space-0);
}
.blk-space-0-ml {
  margin-left: var(--space-0);
}
.blk-space-0-mb {
  margin-bottom: var(--space-0);
}
.blk-space-0-gap {
  gap: var(--space-0);
}
.blk-space-0-y > * + * {
  margin-top: var(--space-0);
}
.blk-space-3-p {
  padding: var(--space-3);
}
.blk-space-3-px {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.blk-space-3-py {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.blk-space-3-pt {
  padding-top: var(--space-3);
}
.blk-space-3-pr {
  padding-right: var(--space-3);
}
.blk-space-3-pl {
  padding-left: var(--space-3);
}
.blk-space-3-pb {
  padding-bottom: var(--space-3);
}
.blk-space-3-m {
  margin: var(--space-3);
}
.blk-space-3-mx {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}
.blk-space-3-my {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
.blk-space-3-mt {
  margin-top: var(--space-3);
}
.blk-space-3-mr {
  margin-right: var(--space-3);
}
.blk-space-3-ml {
  margin-left: var(--space-3);
}
.blk-space-3-mb {
  margin-bottom: var(--space-3);
}
.blk-space-3-gap {
  gap: var(--space-3);
}
.blk-space-3-y > * + * {
  margin-top: var(--space-3);
}
.blk-space-lg-p {
  padding: var(--space-lg);
}
.blk-space-lg-px {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.blk-space-lg-py {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.blk-space-lg-pt {
  padding-top: var(--space-lg);
}
.blk-space-lg-pr {
  padding-right: var(--space-lg);
}
.blk-space-lg-pl {
  padding-left: var(--space-lg);
}
.blk-space-lg-pb {
  padding-bottom: var(--space-lg);
}
.blk-space-lg-m {
  margin: var(--space-lg);
}
.blk-space-lg-mx {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}
.blk-space-lg-my {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.blk-space-lg-mt {
  margin-top: var(--space-lg);
}
.blk-space-lg-mr {
  margin-right: var(--space-lg);
}
.blk-space-lg-ml {
  margin-left: var(--space-lg);
}
.blk-space-lg-mb {
  margin-bottom: var(--space-lg);
}
.blk-space-lg-gap {
  gap: var(--space-lg);
}
.blk-space-lg-y > * + * {
  margin-top: var(--space-lg);
}
.blk-space-md-p {
  padding: var(--space-md);
}
.blk-space-md-px {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.blk-space-md-py {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.blk-space-md-pt {
  padding-top: var(--space-md);
}
.blk-space-md-pr {
  padding-right: var(--space-md);
}
.blk-space-md-pl {
  padding-left: var(--space-md);
}
.blk-space-md-pb {
  padding-bottom: var(--space-md);
}
.blk-space-md-m {
  margin: var(--space-md);
}
.blk-space-md-mx {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}
.blk-space-md-my {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
.blk-space-md-mt {
  margin-top: var(--space-md);
}
.blk-space-md-mr {
  margin-right: var(--space-md);
}
.blk-space-md-ml {
  margin-left: var(--space-md);
}
.blk-space-md-mb {
  margin-bottom: var(--space-md);
}
.blk-space-md-gap {
  gap: var(--space-md);
}
.blk-space-md-y > * + * {
  margin-top: var(--space-md);
}
.blk-space-sm-p {
  padding: var(--space-sm);
}
.blk-space-sm-px {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}
.blk-space-sm-py {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.blk-space-sm-pt {
  padding-top: var(--space-sm);
}
.blk-space-sm-pr {
  padding-right: var(--space-sm);
}
.blk-space-sm-pl {
  padding-left: var(--space-sm);
}
.blk-space-sm-pb {
  padding-bottom: var(--space-sm);
}
.blk-space-sm-m {
  margin: var(--space-sm);
}
.blk-space-sm-mx {
  margin-left: var(--space-sm);
  margin-right: var(--space-sm);
}
.blk-space-sm-my {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.blk-space-sm-mt {
  margin-top: var(--space-sm);
}
.blk-space-sm-mr {
  margin-right: var(--space-sm);
}
.blk-space-sm-ml {
  margin-left: var(--space-sm);
}
.blk-space-sm-mb {
  margin-bottom: var(--space-sm);
}
.blk-space-sm-gap {
  gap: var(--space-sm);
}
.blk-space-sm-y > * + * {
  margin-top: var(--space-sm);
}
.blk-space-xl-p {
  padding: var(--space-xl);
}
.blk-space-xl-px {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.blk-space-xl-py {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.blk-space-xl-pt {
  padding-top: var(--space-xl);
}
.blk-space-xl-pr {
  padding-right: var(--space-xl);
}
.blk-space-xl-pl {
  padding-left: var(--space-xl);
}
.blk-space-xl-pb {
  padding-bottom: var(--space-xl);
}
.blk-space-xl-m {
  margin: var(--space-xl);
}
.blk-space-xl-mx {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}
.blk-space-xl-my {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.blk-space-xl-mt {
  margin-top: var(--space-xl);
}
.blk-space-xl-mr {
  margin-right: var(--space-xl);
}
.blk-space-xl-ml {
  margin-left: var(--space-xl);
}
.blk-space-xl-mb {
  margin-bottom: var(--space-xl);
}
.blk-space-xl-gap {
  gap: var(--space-xl);
}
.blk-space-xl-y > * + * {
  margin-top: var(--space-xl);
}
.blk-space-xs-p {
  padding: var(--space-xs);
}
.blk-space-xs-px {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}
.blk-space-xs-py {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.blk-space-xs-pt {
  padding-top: var(--space-xs);
}
.blk-space-xs-pr {
  padding-right: var(--space-xs);
}
.blk-space-xs-pl {
  padding-left: var(--space-xs);
}
.blk-space-xs-pb {
  padding-bottom: var(--space-xs);
}
.blk-space-xs-m {
  margin: var(--space-xs);
}
.blk-space-xs-mx {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}
.blk-space-xs-my {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.blk-space-xs-mt {
  margin-top: var(--space-xs);
}
.blk-space-xs-mr {
  margin-right: var(--space-xs);
}
.blk-space-xs-ml {
  margin-left: var(--space-xs);
}
.blk-space-xs-mb {
  margin-bottom: var(--space-xs);
}
.blk-space-xs-gap {
  gap: var(--space-xs);
}
.blk-space-xs-y > * + * {
  margin-top: var(--space-xs);
}
.blk-space-2xl-p {
  padding: var(--space-2xl);
}
.blk-space-2xl-px {
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
}
.blk-space-2xl-py {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.blk-space-2xl-pt {
  padding-top: var(--space-2xl);
}
.blk-space-2xl-pr {
  padding-right: var(--space-2xl);
}
.blk-space-2xl-pl {
  padding-left: var(--space-2xl);
}
.blk-space-2xl-pb {
  padding-bottom: var(--space-2xl);
}
.blk-space-2xl-m {
  margin: var(--space-2xl);
}
.blk-space-2xl-mx {
  margin-left: var(--space-2xl);
  margin-right: var(--space-2xl);
}
.blk-space-2xl-my {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.blk-space-2xl-mt {
  margin-top: var(--space-2xl);
}
.blk-space-2xl-mr {
  margin-right: var(--space-2xl);
}
.blk-space-2xl-ml {
  margin-left: var(--space-2xl);
}
.blk-space-2xl-mb {
  margin-bottom: var(--space-2xl);
}
.blk-space-2xl-gap {
  gap: var(--space-2xl);
}
.blk-space-2xl-y > * + * {
  margin-top: var(--space-2xl);
}
.blk-space-3xl-p {
  padding: var(--space-3xl);
}
.blk-space-3xl-px {
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
}
.blk-space-3xl-py {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}
.blk-space-3xl-pt {
  padding-top: var(--space-3xl);
}
.blk-space-3xl-pr {
  padding-right: var(--space-3xl);
}
.blk-space-3xl-pl {
  padding-left: var(--space-3xl);
}
.blk-space-3xl-pb {
  padding-bottom: var(--space-3xl);
}
.blk-space-3xl-m {
  margin: var(--space-3xl);
}
.blk-space-3xl-mx {
  margin-left: var(--space-3xl);
  margin-right: var(--space-3xl);
}
.blk-space-3xl-my {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}
.blk-space-3xl-mt {
  margin-top: var(--space-3xl);
}
.blk-space-3xl-mr {
  margin-right: var(--space-3xl);
}
.blk-space-3xl-ml {
  margin-left: var(--space-3xl);
}
.blk-space-3xl-mb {
  margin-bottom: var(--space-3xl);
}
.blk-space-3xl-gap {
  gap: var(--space-3xl);
}
.blk-space-3xl-y > * + * {
  margin-top: var(--space-3xl);
}
.blk-size-icon-lg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}
.blk-size-icon-lg-w {
  width: var(--size-icon-lg);
}
.blk-size-icon-lg-h {
  height: var(--size-icon-lg);
}
.blk-size-icon-md {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.blk-size-icon-md-w {
  width: var(--size-icon-md);
}
.blk-size-icon-md-h {
  height: var(--size-icon-md);
}
.blk-size-icon-sm {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
.blk-size-icon-sm-w {
  width: var(--size-icon-sm);
}
.blk-size-icon-sm-h {
  height: var(--size-icon-sm);
}
.blk-size-control-lg {
  width: var(--size-control-lg);
  height: var(--size-control-lg);
}
.blk-size-control-lg-w {
  width: var(--size-control-lg);
}
.blk-size-control-lg-h {
  height: var(--size-control-lg);
}
.blk-size-control-md {
  width: var(--size-control-md);
  height: var(--size-control-md);
}
.blk-size-control-md-w {
  width: var(--size-control-md);
}
.blk-size-control-md-h {
  height: var(--size-control-md);
}
.blk-size-control-sm {
  width: var(--size-control-sm);
  height: var(--size-control-sm);
}
.blk-size-control-sm-w {
  width: var(--size-control-sm);
}
.blk-size-control-sm-h {
  height: var(--size-control-sm);
}
.blk-size-container-lg {
  width: var(--size-container-lg);
  height: var(--size-container-lg);
}
.blk-size-container-lg-w {
  width: var(--size-container-lg);
}
.blk-size-container-lg-h {
  height: var(--size-container-lg);
}
.blk-size-container-md {
  width: var(--size-container-md);
  height: var(--size-container-md);
}
.blk-size-container-md-w {
  width: var(--size-container-md);
}
.blk-size-container-md-h {
  height: var(--size-container-md);
}
.blk-size-container-sm {
  width: var(--size-container-sm);
  height: var(--size-container-sm);
}
.blk-size-container-sm-w {
  width: var(--size-container-sm);
}
.blk-size-container-sm-h {
  height: var(--size-container-sm);
}
.blk-size-container-xl {
  width: var(--size-container-xl);
  height: var(--size-container-xl);
}
.blk-size-container-xl-w {
  width: var(--size-container-xl);
}
.blk-size-container-xl-h {
  height: var(--size-container-xl);
}
.blk-emphasis-full {
  opacity: var(--emphasis-full);
}
.blk-hover-emphasis-full:hover {
  opacity: var(--emphasis-full);
}
.blk-disabled-emphasis-full:disabled {
  opacity: var(--emphasis-full);
}
.blk-emphasis-none {
  opacity: var(--emphasis-none);
}
.blk-hover-emphasis-none:hover {
  opacity: var(--emphasis-none);
}
.blk-disabled-emphasis-none:disabled {
  opacity: var(--emphasis-none);
}
.blk-emphasis-faint {
  opacity: var(--emphasis-faint);
}
.blk-hover-emphasis-faint:hover {
  opacity: var(--emphasis-faint);
}
.blk-disabled-emphasis-faint:disabled {
  opacity: var(--emphasis-faint);
}
.blk-emphasis-muted {
  opacity: var(--emphasis-muted);
}
.blk-hover-emphasis-muted:hover {
  opacity: var(--emphasis-muted);
}
.blk-disabled-emphasis-muted:disabled {
  opacity: var(--emphasis-muted);
}
.blk-emphasis-strong {
  opacity: var(--emphasis-strong);
}
.blk-hover-emphasis-strong:hover {
  opacity: var(--emphasis-strong);
}
.blk-disabled-emphasis-strong:disabled {
  opacity: var(--emphasis-strong);
}
.blk-emphasis-subtle {
  opacity: var(--emphasis-subtle);
}
.blk-hover-emphasis-subtle:hover {
  opacity: var(--emphasis-subtle);
}
.blk-disabled-emphasis-subtle:disabled {
  opacity: var(--emphasis-subtle);
}
.blk-blur-md {
  backdrop-filter: blur(var(--blur-md));
}
.blk-blur-sm {
  backdrop-filter: blur(var(--blur-sm));
}
.blk-blur-xs {
  backdrop-filter: blur(var(--blur-xs));
}
.blk-z-max {
  z-index: var(--z-index-max);
}
.blk-z-base {
  z-index: var(--z-index-base);
}
.blk-z-modal {
  z-index: var(--z-index-modal);
}
.blk-z-toast {
  z-index: var(--z-index-toast);
}
.blk-z-sticky {
  z-index: var(--z-index-sticky);
}
.blk-z-overlay {
  z-index: var(--z-index-overlay);
}
.blk-z-popover {
  z-index: var(--z-index-popover);
}
.blk-z-dropdown {
  z-index: var(--z-index-dropdown);
}
.blk-aspect-video {
  aspect-ratio: var(--aspect-video);
}
.blk-aspect-square {
  aspect-ratio: var(--aspect-square);
}
.blk-aspect-og-card {
  aspect-ratio: var(--aspect-og-card);
}
.blk-aspect-portrait {
  aspect-ratio: var(--aspect-portrait);
}
.blk-bg-accent {
  background-color: var(--color-accent);
}
:is(.dark *) .blk-dark-bg-accent {
  background-color: var(--color-accent);
}
:is(.dark *) .blk-dark-hover-bg-accent:hover {
  background-color: var(--color-accent);
}
.blk-hover-bg-accent:hover {
  background-color: var(--color-accent);
}
.blk-bg-accent-faint {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-faint {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-faint:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-accent-faint:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-accent-muted {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-muted {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-muted:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-accent-muted:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-accent-strong {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-strong {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-strong:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-accent-strong:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-accent-subtle {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-subtle {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-subtle:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-accent-subtle:hover {
  background-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-accent {
  color: var(--color-accent);
}
:is(.dark *) .blk-dark-text-accent {
  color: var(--color-accent);
}
:is(.dark *) .blk-dark-hover-text-accent:hover {
  color: var(--color-accent);
}
.blk-hover-text-accent:hover {
  color: var(--color-accent);
}
.blk-text-accent-faint {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-faint {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-faint:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-accent-faint:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-accent-muted {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-muted {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-muted:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-accent-muted:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-accent-strong {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-strong {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-strong:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-accent-strong:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-accent-subtle {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-subtle {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-subtle:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-accent-subtle:hover {
  color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-accent {
  border-color: var(--color-accent);
}
:is(.dark *) .blk-dark-border-accent {
  border-color: var(--color-accent);
}
:is(.dark *) .blk-dark-hover-border-accent:hover {
  border-color: var(--color-accent);
}
.blk-hover-border-accent:hover {
  border-color: var(--color-accent);
}
.blk-border-accent-faint {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-faint {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-faint:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-accent-faint:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-accent-muted {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-muted {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-muted:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-accent-muted:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-accent-strong {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-strong {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-strong:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-accent-strong:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-accent-subtle {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-subtle {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-subtle:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-accent-subtle:hover {
  border-color: hsl(var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-accent-foreground {
  background-color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-bg-accent-foreground {
  background-color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-hover-bg-accent-foreground:hover {
  background-color: var(--color-accent-foreground);
}
.blk-hover-bg-accent-foreground:hover {
  background-color: var(--color-accent-foreground);
}
.blk-bg-accent-foreground-faint {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-foreground-faint {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-foreground-faint:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-accent-foreground-faint:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-accent-foreground-muted {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-foreground-muted {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-foreground-muted:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-accent-foreground-muted:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-accent-foreground-strong {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-foreground-strong {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-foreground-strong:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-accent-foreground-strong:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-accent-foreground-subtle {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-accent-foreground-subtle {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-accent-foreground-subtle:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-accent-foreground-subtle:hover {
  background-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-accent-foreground {
  color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-text-accent-foreground {
  color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-hover-text-accent-foreground:hover {
  color: var(--color-accent-foreground);
}
.blk-hover-text-accent-foreground:hover {
  color: var(--color-accent-foreground);
}
.blk-text-accent-foreground-faint {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-foreground-faint {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-foreground-faint:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-accent-foreground-faint:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-accent-foreground-muted {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-foreground-muted {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-foreground-muted:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-accent-foreground-muted:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-accent-foreground-strong {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-foreground-strong {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-foreground-strong:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-accent-foreground-strong:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-accent-foreground-subtle {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-accent-foreground-subtle {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-accent-foreground-subtle:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-accent-foreground-subtle:hover {
  color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-accent-foreground {
  border-color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-border-accent-foreground {
  border-color: var(--color-accent-foreground);
}
:is(.dark *) .blk-dark-hover-border-accent-foreground:hover {
  border-color: var(--color-accent-foreground);
}
.blk-hover-border-accent-foreground:hover {
  border-color: var(--color-accent-foreground);
}
.blk-border-accent-foreground-faint {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-foreground-faint {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-foreground-faint:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-accent-foreground-faint:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-accent-foreground-muted {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-foreground-muted {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-foreground-muted:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-accent-foreground-muted:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-accent-foreground-strong {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-foreground-strong {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-foreground-strong:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-accent-foreground-strong:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-accent-foreground-subtle {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-accent-foreground-subtle {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-accent-foreground-subtle:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-accent-foreground-subtle:hover {
  border-color: hsl(var(--accent-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-accent-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-background {
  background-color: var(--color-background);
}
:is(.dark *) .blk-dark-bg-background {
  background-color: var(--color-background);
}
:is(.dark *) .blk-dark-hover-bg-background:hover {
  background-color: var(--color-background);
}
.blk-hover-bg-background:hover {
  background-color: var(--color-background);
}
.blk-bg-background-faint {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-background-faint {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-background-faint:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-background-faint:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-background-muted {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-background-muted {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-background-muted:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-background-muted:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-background-strong {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-background-strong {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-background-strong:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-background-strong:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-background-subtle {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-background-subtle {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-background-subtle:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-background-subtle:hover {
  background-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-background {
  color: var(--color-background);
}
:is(.dark *) .blk-dark-text-background {
  color: var(--color-background);
}
:is(.dark *) .blk-dark-hover-text-background:hover {
  color: var(--color-background);
}
.blk-hover-text-background:hover {
  color: var(--color-background);
}
.blk-text-background-faint {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-background-faint {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-background-faint:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-background-faint:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-background-muted {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-background-muted {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-background-muted:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-background-muted:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-background-strong {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-background-strong {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-background-strong:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-background-strong:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-background-subtle {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-background-subtle {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-background-subtle:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-background-subtle:hover {
  color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-background {
  border-color: var(--color-background);
}
:is(.dark *) .blk-dark-border-background {
  border-color: var(--color-background);
}
:is(.dark *) .blk-dark-hover-border-background:hover {
  border-color: var(--color-background);
}
.blk-hover-border-background:hover {
  border-color: var(--color-background);
}
.blk-border-background-faint {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-background-faint {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-background-faint:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-background-faint:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-background-muted {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-background-muted {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-background-muted:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-background-muted:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-background-strong {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-background-strong {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-background-strong:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-background-strong:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-background-subtle {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-background-subtle {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-background-subtle:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-background-subtle:hover {
  border-color: hsl(var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-background) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-border {
  background-color: var(--color-border);
}
:is(.dark *) .blk-dark-bg-border {
  background-color: var(--color-border);
}
:is(.dark *) .blk-dark-hover-bg-border:hover {
  background-color: var(--color-border);
}
.blk-hover-bg-border:hover {
  background-color: var(--color-border);
}
.blk-bg-border-faint {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-border-faint {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-border-faint:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-border-faint:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-border-muted {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-border-muted {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-border-muted:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-border-muted:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-border-strong {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-border-strong {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-border-strong:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-border-strong:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-border-subtle {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-border-subtle {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-border-subtle:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-border-subtle:hover {
  background-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-border {
  color: var(--color-border);
}
:is(.dark *) .blk-dark-text-border {
  color: var(--color-border);
}
:is(.dark *) .blk-dark-hover-text-border:hover {
  color: var(--color-border);
}
.blk-hover-text-border:hover {
  color: var(--color-border);
}
.blk-text-border-faint {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-border-faint {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-border-faint:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-border-faint:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-border-muted {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-border-muted {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-border-muted:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-border-muted:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-border-strong {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-border-strong {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-border-strong:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-border-strong:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-border-subtle {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-border-subtle {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-border-subtle:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-border-subtle:hover {
  color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-border {
  border-color: var(--color-border);
}
:is(.dark *) .blk-dark-border-border {
  border-color: var(--color-border);
}
:is(.dark *) .blk-dark-hover-border-border:hover {
  border-color: var(--color-border);
}
.blk-hover-border-border:hover {
  border-color: var(--color-border);
}
.blk-border-border-faint {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-border-faint {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-border-faint:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-border-faint:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-border-muted {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-border-muted {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-border-muted:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-border-muted:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-border-strong {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-border-strong {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-border-strong:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-border-strong:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-border-subtle {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-border-subtle {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-border-subtle:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-border-subtle:hover {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-brand {
  background-color: var(--color-brand);
}
:is(.dark *) .blk-dark-bg-brand {
  background-color: var(--color-brand);
}
:is(.dark *) .blk-dark-hover-bg-brand:hover {
  background-color: var(--color-brand);
}
.blk-hover-bg-brand:hover {
  background-color: var(--color-brand);
}
.blk-bg-brand-faint {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-brand-faint {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-brand-faint:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-brand-faint:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-brand-muted {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-brand-muted {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-brand-muted:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-brand-muted:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-brand-strong {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-brand-strong {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-brand-strong:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-brand-strong:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-brand-subtle {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-brand-subtle {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-brand-subtle:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-brand-subtle:hover {
  background-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-brand {
  color: var(--color-brand);
}
:is(.dark *) .blk-dark-text-brand {
  color: var(--color-brand);
}
:is(.dark *) .blk-dark-hover-text-brand:hover {
  color: var(--color-brand);
}
.blk-hover-text-brand:hover {
  color: var(--color-brand);
}
.blk-text-brand-faint {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-brand-faint {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-brand-faint:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-brand-faint:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-brand-muted {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-brand-muted {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-brand-muted:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-brand-muted:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-brand-strong {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-brand-strong {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-brand-strong:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-brand-strong:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-brand-subtle {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-brand-subtle {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-brand-subtle:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-brand-subtle:hover {
  color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-brand {
  border-color: var(--color-brand);
}
:is(.dark *) .blk-dark-border-brand {
  border-color: var(--color-brand);
}
:is(.dark *) .blk-dark-hover-border-brand:hover {
  border-color: var(--color-brand);
}
.blk-hover-border-brand:hover {
  border-color: var(--color-brand);
}
.blk-border-brand-faint {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-brand-faint {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-brand-faint:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-brand-faint:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-brand-muted {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-brand-muted {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-brand-muted:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-brand-muted:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-brand-strong {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-brand-strong {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-brand-strong:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-brand-strong:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-brand-subtle {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-brand-subtle {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-brand-subtle:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-brand-subtle:hover {
  border-color: var(--color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-brand) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-card {
  background-color: var(--color-card);
}
:is(.dark *) .blk-dark-bg-card {
  background-color: var(--color-card);
}
:is(.dark *) .blk-dark-hover-bg-card:hover {
  background-color: var(--color-card);
}
.blk-hover-bg-card:hover {
  background-color: var(--color-card);
}
.blk-bg-card-faint {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-faint {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-faint:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-card-faint:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-card-muted {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-muted {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-muted:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-card-muted:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-card-strong {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-strong {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-strong:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-card-strong:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-card-subtle {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-subtle {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-subtle:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-card-subtle:hover {
  background-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-card {
  color: var(--color-card);
}
:is(.dark *) .blk-dark-text-card {
  color: var(--color-card);
}
:is(.dark *) .blk-dark-hover-text-card:hover {
  color: var(--color-card);
}
.blk-hover-text-card:hover {
  color: var(--color-card);
}
.blk-text-card-faint {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-faint {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-faint:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-card-faint:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-card-muted {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-muted {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-muted:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-card-muted:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-card-strong {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-strong {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-strong:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-card-strong:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-card-subtle {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-subtle {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-subtle:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-card-subtle:hover {
  color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-card {
  border-color: var(--color-card);
}
:is(.dark *) .blk-dark-border-card {
  border-color: var(--color-card);
}
:is(.dark *) .blk-dark-hover-border-card:hover {
  border-color: var(--color-card);
}
.blk-hover-border-card:hover {
  border-color: var(--color-card);
}
.blk-border-card-faint {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-faint {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-faint:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-card-faint:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-card-muted {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-muted {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-muted:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-card-muted:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-card-strong {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-strong {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-strong:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-card-strong:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-card-subtle {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-subtle {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-subtle:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-card-subtle:hover {
  border-color: hsl(var(--card));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-card-foreground {
  background-color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-bg-card-foreground {
  background-color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-hover-bg-card-foreground:hover {
  background-color: var(--color-card-foreground);
}
.blk-hover-bg-card-foreground:hover {
  background-color: var(--color-card-foreground);
}
.blk-bg-card-foreground-faint {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-foreground-faint {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-foreground-faint:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-card-foreground-faint:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-card-foreground-muted {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-foreground-muted {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-foreground-muted:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-card-foreground-muted:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-card-foreground-strong {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-foreground-strong {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-foreground-strong:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-card-foreground-strong:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-card-foreground-subtle {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-card-foreground-subtle {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-card-foreground-subtle:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-card-foreground-subtle:hover {
  background-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-card-foreground {
  color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-text-card-foreground {
  color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-hover-text-card-foreground:hover {
  color: var(--color-card-foreground);
}
.blk-hover-text-card-foreground:hover {
  color: var(--color-card-foreground);
}
.blk-text-card-foreground-faint {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-foreground-faint {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-foreground-faint:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-card-foreground-faint:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-card-foreground-muted {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-foreground-muted {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-foreground-muted:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-card-foreground-muted:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-card-foreground-strong {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-foreground-strong {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-foreground-strong:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-card-foreground-strong:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-card-foreground-subtle {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-card-foreground-subtle {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-card-foreground-subtle:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-card-foreground-subtle:hover {
  color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-card-foreground {
  border-color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-border-card-foreground {
  border-color: var(--color-card-foreground);
}
:is(.dark *) .blk-dark-hover-border-card-foreground:hover {
  border-color: var(--color-card-foreground);
}
.blk-hover-border-card-foreground:hover {
  border-color: var(--color-card-foreground);
}
.blk-border-card-foreground-faint {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-foreground-faint {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-foreground-faint:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-card-foreground-faint:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-card-foreground-muted {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-foreground-muted {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-foreground-muted:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-card-foreground-muted:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-card-foreground-strong {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-foreground-strong {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-foreground-strong:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-card-foreground-strong:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-card-foreground-subtle {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-card-foreground-subtle {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-card-foreground-subtle:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-card-foreground-subtle:hover {
  border-color: hsl(var(--card-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-card-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-chart-1 {
  background-color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-bg-chart-1 {
  background-color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-hover-bg-chart-1:hover {
  background-color: var(--color-chart-1);
}
.blk-hover-bg-chart-1:hover {
  background-color: var(--color-chart-1);
}
.blk-bg-chart-1-faint {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-1-faint {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-1-faint:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-chart-1-faint:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-chart-1-muted {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-1-muted {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-1-muted:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-chart-1-muted:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-chart-1-strong {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-1-strong {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-1-strong:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-chart-1-strong:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-chart-1-subtle {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-1-subtle {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-1-subtle:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-chart-1-subtle:hover {
  background-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-chart-1 {
  color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-text-chart-1 {
  color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-hover-text-chart-1:hover {
  color: var(--color-chart-1);
}
.blk-hover-text-chart-1:hover {
  color: var(--color-chart-1);
}
.blk-text-chart-1-faint {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-1-faint {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-1-faint:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-chart-1-faint:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-chart-1-muted {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-1-muted {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-1-muted:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-chart-1-muted:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-chart-1-strong {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-1-strong {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-1-strong:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-chart-1-strong:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-chart-1-subtle {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-1-subtle {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-1-subtle:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-chart-1-subtle:hover {
  color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-chart-1 {
  border-color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-border-chart-1 {
  border-color: var(--color-chart-1);
}
:is(.dark *) .blk-dark-hover-border-chart-1:hover {
  border-color: var(--color-chart-1);
}
.blk-hover-border-chart-1:hover {
  border-color: var(--color-chart-1);
}
.blk-border-chart-1-faint {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-1-faint {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-1-faint:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-chart-1-faint:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-chart-1-muted {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-1-muted {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-1-muted:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-chart-1-muted:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-chart-1-strong {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-1-strong {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-1-strong:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-chart-1-strong:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-chart-1-subtle {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-1-subtle {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-1-subtle:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-chart-1-subtle:hover {
  border-color: hsl(var(--chart-1));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-1) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-chart-2 {
  background-color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-bg-chart-2 {
  background-color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-hover-bg-chart-2:hover {
  background-color: var(--color-chart-2);
}
.blk-hover-bg-chart-2:hover {
  background-color: var(--color-chart-2);
}
.blk-bg-chart-2-faint {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-2-faint {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-2-faint:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-chart-2-faint:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-chart-2-muted {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-2-muted {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-2-muted:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-chart-2-muted:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-chart-2-strong {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-2-strong {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-2-strong:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-chart-2-strong:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-chart-2-subtle {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-2-subtle {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-2-subtle:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-chart-2-subtle:hover {
  background-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-chart-2 {
  color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-text-chart-2 {
  color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-hover-text-chart-2:hover {
  color: var(--color-chart-2);
}
.blk-hover-text-chart-2:hover {
  color: var(--color-chart-2);
}
.blk-text-chart-2-faint {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-2-faint {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-2-faint:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-chart-2-faint:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-chart-2-muted {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-2-muted {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-2-muted:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-chart-2-muted:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-chart-2-strong {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-2-strong {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-2-strong:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-chart-2-strong:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-chart-2-subtle {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-2-subtle {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-2-subtle:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-chart-2-subtle:hover {
  color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-chart-2 {
  border-color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-border-chart-2 {
  border-color: var(--color-chart-2);
}
:is(.dark *) .blk-dark-hover-border-chart-2:hover {
  border-color: var(--color-chart-2);
}
.blk-hover-border-chart-2:hover {
  border-color: var(--color-chart-2);
}
.blk-border-chart-2-faint {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-2-faint {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-2-faint:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-chart-2-faint:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-chart-2-muted {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-2-muted {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-2-muted:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-chart-2-muted:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-chart-2-strong {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-2-strong {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-2-strong:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-chart-2-strong:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-chart-2-subtle {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-2-subtle {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-2-subtle:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-chart-2-subtle:hover {
  border-color: hsl(var(--chart-2));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-2) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-chart-3 {
  background-color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-bg-chart-3 {
  background-color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-hover-bg-chart-3:hover {
  background-color: var(--color-chart-3);
}
.blk-hover-bg-chart-3:hover {
  background-color: var(--color-chart-3);
}
.blk-bg-chart-3-faint {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-3-faint {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-3-faint:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-chart-3-faint:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-chart-3-muted {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-3-muted {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-3-muted:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-chart-3-muted:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-chart-3-strong {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-3-strong {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-3-strong:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-chart-3-strong:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-chart-3-subtle {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-3-subtle {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-3-subtle:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-chart-3-subtle:hover {
  background-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-chart-3 {
  color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-text-chart-3 {
  color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-hover-text-chart-3:hover {
  color: var(--color-chart-3);
}
.blk-hover-text-chart-3:hover {
  color: var(--color-chart-3);
}
.blk-text-chart-3-faint {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-3-faint {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-3-faint:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-chart-3-faint:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-chart-3-muted {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-3-muted {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-3-muted:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-chart-3-muted:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-chart-3-strong {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-3-strong {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-3-strong:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-chart-3-strong:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-chart-3-subtle {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-3-subtle {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-3-subtle:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-chart-3-subtle:hover {
  color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-chart-3 {
  border-color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-border-chart-3 {
  border-color: var(--color-chart-3);
}
:is(.dark *) .blk-dark-hover-border-chart-3:hover {
  border-color: var(--color-chart-3);
}
.blk-hover-border-chart-3:hover {
  border-color: var(--color-chart-3);
}
.blk-border-chart-3-faint {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-3-faint {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-3-faint:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-chart-3-faint:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-chart-3-muted {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-3-muted {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-3-muted:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-chart-3-muted:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-chart-3-strong {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-3-strong {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-3-strong:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-chart-3-strong:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-chart-3-subtle {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-3-subtle {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-3-subtle:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-chart-3-subtle:hover {
  border-color: hsl(var(--chart-3));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-3) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-chart-4 {
  background-color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-bg-chart-4 {
  background-color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-hover-bg-chart-4:hover {
  background-color: var(--color-chart-4);
}
.blk-hover-bg-chart-4:hover {
  background-color: var(--color-chart-4);
}
.blk-bg-chart-4-faint {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-4-faint {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-4-faint:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-chart-4-faint:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-chart-4-muted {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-4-muted {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-4-muted:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-chart-4-muted:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-chart-4-strong {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-4-strong {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-4-strong:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-chart-4-strong:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-chart-4-subtle {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-4-subtle {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-4-subtle:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-chart-4-subtle:hover {
  background-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-chart-4 {
  color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-text-chart-4 {
  color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-hover-text-chart-4:hover {
  color: var(--color-chart-4);
}
.blk-hover-text-chart-4:hover {
  color: var(--color-chart-4);
}
.blk-text-chart-4-faint {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-4-faint {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-4-faint:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-chart-4-faint:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-chart-4-muted {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-4-muted {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-4-muted:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-chart-4-muted:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-chart-4-strong {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-4-strong {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-4-strong:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-chart-4-strong:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-chart-4-subtle {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-4-subtle {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-4-subtle:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-chart-4-subtle:hover {
  color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-chart-4 {
  border-color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-border-chart-4 {
  border-color: var(--color-chart-4);
}
:is(.dark *) .blk-dark-hover-border-chart-4:hover {
  border-color: var(--color-chart-4);
}
.blk-hover-border-chart-4:hover {
  border-color: var(--color-chart-4);
}
.blk-border-chart-4-faint {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-4-faint {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-4-faint:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-chart-4-faint:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-chart-4-muted {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-4-muted {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-4-muted:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-chart-4-muted:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-chart-4-strong {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-4-strong {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-4-strong:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-chart-4-strong:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-chart-4-subtle {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-4-subtle {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-4-subtle:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-chart-4-subtle:hover {
  border-color: hsl(var(--chart-4));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-4) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-chart-5 {
  background-color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-bg-chart-5 {
  background-color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-hover-bg-chart-5:hover {
  background-color: var(--color-chart-5);
}
.blk-hover-bg-chart-5:hover {
  background-color: var(--color-chart-5);
}
.blk-bg-chart-5-faint {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-5-faint {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-5-faint:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-chart-5-faint:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-chart-5-muted {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-5-muted {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-5-muted:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-chart-5-muted:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-chart-5-strong {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-5-strong {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-5-strong:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-chart-5-strong:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-chart-5-subtle {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-chart-5-subtle {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-chart-5-subtle:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-chart-5-subtle:hover {
  background-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-chart-5 {
  color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-text-chart-5 {
  color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-hover-text-chart-5:hover {
  color: var(--color-chart-5);
}
.blk-hover-text-chart-5:hover {
  color: var(--color-chart-5);
}
.blk-text-chart-5-faint {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-5-faint {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-5-faint:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-chart-5-faint:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-chart-5-muted {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-5-muted {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-5-muted:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-chart-5-muted:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-chart-5-strong {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-5-strong {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-5-strong:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-chart-5-strong:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-chart-5-subtle {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-chart-5-subtle {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-chart-5-subtle:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-chart-5-subtle:hover {
  color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-chart-5 {
  border-color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-border-chart-5 {
  border-color: var(--color-chart-5);
}
:is(.dark *) .blk-dark-hover-border-chart-5:hover {
  border-color: var(--color-chart-5);
}
.blk-hover-border-chart-5:hover {
  border-color: var(--color-chart-5);
}
.blk-border-chart-5-faint {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-5-faint {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-5-faint:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-chart-5-faint:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-chart-5-muted {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-5-muted {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-5-muted:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-chart-5-muted:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-chart-5-strong {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-5-strong {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-5-strong:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-chart-5-strong:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-chart-5-subtle {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-chart-5-subtle {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-chart-5-subtle:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-chart-5-subtle:hover {
  border-color: hsl(var(--chart-5));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-chart-5) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-destructive {
  background-color: var(--color-destructive);
}
:is(.dark *) .blk-dark-bg-destructive {
  background-color: var(--color-destructive);
}
:is(.dark *) .blk-dark-hover-bg-destructive:hover {
  background-color: var(--color-destructive);
}
.blk-hover-bg-destructive:hover {
  background-color: var(--color-destructive);
}
.blk-bg-destructive-faint {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-faint {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-faint:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-faint:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-destructive-muted {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-muted {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-muted:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-muted:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-destructive-strong {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-strong {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-strong:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-strong:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-destructive-subtle {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-subtle {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-subtle:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-subtle:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-destructive {
  color: var(--color-destructive);
}
:is(.dark *) .blk-dark-text-destructive {
  color: var(--color-destructive);
}
:is(.dark *) .blk-dark-hover-text-destructive:hover {
  color: var(--color-destructive);
}
.blk-hover-text-destructive:hover {
  color: var(--color-destructive);
}
.blk-text-destructive-faint {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-faint {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-faint:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-destructive-faint:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-destructive-muted {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-muted {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-muted:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-destructive-muted:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-destructive-strong {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-strong {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-strong:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-destructive-strong:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-destructive-subtle {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-subtle {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-subtle:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-destructive-subtle:hover {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-destructive {
  border-color: var(--color-destructive);
}
:is(.dark *) .blk-dark-border-destructive {
  border-color: var(--color-destructive);
}
:is(.dark *) .blk-dark-hover-border-destructive:hover {
  border-color: var(--color-destructive);
}
.blk-hover-border-destructive:hover {
  border-color: var(--color-destructive);
}
.blk-border-destructive-faint {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-faint {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-faint:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-destructive-faint:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-destructive-muted {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-muted {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-muted:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-destructive-muted:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-destructive-strong {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-strong {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-strong:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-destructive-strong:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-destructive-subtle {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-subtle {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-subtle:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-destructive-subtle:hover {
  border-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-destructive-foreground {
  background-color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-bg-destructive-foreground {
  background-color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-hover-bg-destructive-foreground:hover {
  background-color: var(--color-destructive-foreground);
}
.blk-hover-bg-destructive-foreground:hover {
  background-color: var(--color-destructive-foreground);
}
.blk-bg-destructive-foreground-faint {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-foreground-faint {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-foreground-faint:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-foreground-faint:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-destructive-foreground-muted {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-foreground-muted {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-foreground-muted:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-foreground-muted:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-destructive-foreground-strong {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-foreground-strong {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-foreground-strong:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-foreground-strong:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-destructive-foreground-subtle {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-destructive-foreground-subtle {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-destructive-foreground-subtle:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-foreground-subtle:hover {
  background-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-destructive-foreground {
  color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-text-destructive-foreground {
  color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-hover-text-destructive-foreground:hover {
  color: var(--color-destructive-foreground);
}
.blk-hover-text-destructive-foreground:hover {
  color: var(--color-destructive-foreground);
}
.blk-text-destructive-foreground-faint {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-foreground-faint {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-foreground-faint:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-destructive-foreground-faint:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-destructive-foreground-muted {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-foreground-muted {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-foreground-muted:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-destructive-foreground-muted:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-destructive-foreground-strong {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-foreground-strong {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-foreground-strong:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-destructive-foreground-strong:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-destructive-foreground-subtle {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-destructive-foreground-subtle {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-destructive-foreground-subtle:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-destructive-foreground-subtle:hover {
  color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-destructive-foreground {
  border-color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-border-destructive-foreground {
  border-color: var(--color-destructive-foreground);
}
:is(.dark *) .blk-dark-hover-border-destructive-foreground:hover {
  border-color: var(--color-destructive-foreground);
}
.blk-hover-border-destructive-foreground:hover {
  border-color: var(--color-destructive-foreground);
}
.blk-border-destructive-foreground-faint {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-foreground-faint {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-foreground-faint:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-destructive-foreground-faint:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-destructive-foreground-muted {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-foreground-muted {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-foreground-muted:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-destructive-foreground-muted:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-destructive-foreground-strong {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-foreground-strong {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-foreground-strong:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-destructive-foreground-strong:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-destructive-foreground-subtle {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-destructive-foreground-subtle {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-destructive-foreground-subtle:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-destructive-foreground-subtle:hover {
  border-color: hsl(var(--destructive-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-destructive-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-foreground {
  background-color: var(--color-foreground);
}
:is(.dark *) .blk-dark-bg-foreground {
  background-color: var(--color-foreground);
}
:is(.dark *) .blk-dark-hover-bg-foreground:hover {
  background-color: var(--color-foreground);
}
.blk-hover-bg-foreground:hover {
  background-color: var(--color-foreground);
}
.blk-bg-foreground-faint {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-foreground-faint {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-foreground-faint:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-foreground-faint:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-foreground-muted {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-foreground-muted {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-foreground-muted:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-foreground-muted:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-foreground-strong {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-foreground-strong {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-foreground-strong:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-foreground-strong:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-foreground-subtle {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-foreground-subtle {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-foreground-subtle:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-foreground-subtle:hover {
  background-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-foreground {
  color: var(--color-foreground);
}
:is(.dark *) .blk-dark-text-foreground {
  color: var(--color-foreground);
}
:is(.dark *) .blk-dark-hover-text-foreground:hover {
  color: var(--color-foreground);
}
.blk-hover-text-foreground:hover {
  color: var(--color-foreground);
}
.blk-text-foreground-faint {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-foreground-faint {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-foreground-faint:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-foreground-faint:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-foreground-muted {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-foreground-muted {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-foreground-muted:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-foreground-muted:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-foreground-strong {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-foreground-strong {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-foreground-strong:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-foreground-strong:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-foreground-subtle {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-foreground-subtle {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-foreground-subtle:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-foreground-subtle:hover {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-foreground {
  border-color: var(--color-foreground);
}
:is(.dark *) .blk-dark-border-foreground {
  border-color: var(--color-foreground);
}
:is(.dark *) .blk-dark-hover-border-foreground:hover {
  border-color: var(--color-foreground);
}
.blk-hover-border-foreground:hover {
  border-color: var(--color-foreground);
}
.blk-border-foreground-faint {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-foreground-faint {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-foreground-faint:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-foreground-faint:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-foreground-muted {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-foreground-muted {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-foreground-muted:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-foreground-muted:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-foreground-strong {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-foreground-strong {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-foreground-strong:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-foreground-strong:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-foreground-subtle {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-foreground-subtle {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-foreground-subtle:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-foreground-subtle:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-highlight {
  background-color: var(--color-highlight);
}
:is(.dark *) .blk-dark-bg-highlight {
  background-color: var(--color-highlight);
}
:is(.dark *) .blk-dark-hover-bg-highlight:hover {
  background-color: var(--color-highlight);
}
.blk-hover-bg-highlight:hover {
  background-color: var(--color-highlight);
}
.blk-bg-highlight-faint {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-highlight-faint {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-highlight-faint:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-highlight-faint:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-highlight-muted {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-highlight-muted {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-highlight-muted:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-highlight-muted:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-highlight-strong {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-highlight-strong {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-highlight-strong:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-highlight-strong:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-highlight-subtle {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-highlight-subtle {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-highlight-subtle:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-highlight-subtle:hover {
  background-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-highlight {
  color: var(--color-highlight);
}
:is(.dark *) .blk-dark-text-highlight {
  color: var(--color-highlight);
}
:is(.dark *) .blk-dark-hover-text-highlight:hover {
  color: var(--color-highlight);
}
.blk-hover-text-highlight:hover {
  color: var(--color-highlight);
}
.blk-text-highlight-faint {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-highlight-faint {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-highlight-faint:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-highlight-faint:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-highlight-muted {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-highlight-muted {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-highlight-muted:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-highlight-muted:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-highlight-strong {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-highlight-strong {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-highlight-strong:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-highlight-strong:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-highlight-subtle {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-highlight-subtle {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-highlight-subtle:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-highlight-subtle:hover {
  color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-highlight {
  border-color: var(--color-highlight);
}
:is(.dark *) .blk-dark-border-highlight {
  border-color: var(--color-highlight);
}
:is(.dark *) .blk-dark-hover-border-highlight:hover {
  border-color: var(--color-highlight);
}
.blk-hover-border-highlight:hover {
  border-color: var(--color-highlight);
}
.blk-border-highlight-faint {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-highlight-faint {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-highlight-faint:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-highlight-faint:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-highlight-muted {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-highlight-muted {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-highlight-muted:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-highlight-muted:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-highlight-strong {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-highlight-strong {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-highlight-strong:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-highlight-strong:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-highlight-subtle {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-highlight-subtle {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-highlight-subtle:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-highlight-subtle:hover {
  border-color: var(--color-highlight);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-highlight) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-info {
  background-color: var(--color-info);
}
:is(.dark *) .blk-dark-bg-info {
  background-color: var(--color-info);
}
:is(.dark *) .blk-dark-hover-bg-info:hover {
  background-color: var(--color-info);
}
.blk-hover-bg-info:hover {
  background-color: var(--color-info);
}
.blk-bg-info-faint {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-faint {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-faint:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-info-faint:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-info-muted {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-muted {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-muted:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-info-muted:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-info-strong {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-strong {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-strong:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-info-strong:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-info-subtle {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-subtle {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-subtle:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-info-subtle:hover {
  background-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-info {
  color: var(--color-info);
}
:is(.dark *) .blk-dark-text-info {
  color: var(--color-info);
}
:is(.dark *) .blk-dark-hover-text-info:hover {
  color: var(--color-info);
}
.blk-hover-text-info:hover {
  color: var(--color-info);
}
.blk-text-info-faint {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-faint {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-faint:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-info-faint:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-info-muted {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-muted {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-muted:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-info-muted:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-info-strong {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-strong {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-strong:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-info-strong:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-info-subtle {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-subtle {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-subtle:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-info-subtle:hover {
  color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-info {
  border-color: var(--color-info);
}
:is(.dark *) .blk-dark-border-info {
  border-color: var(--color-info);
}
:is(.dark *) .blk-dark-hover-border-info:hover {
  border-color: var(--color-info);
}
.blk-hover-border-info:hover {
  border-color: var(--color-info);
}
.blk-border-info-faint {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-faint {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-faint:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-info-faint:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-info-muted {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-muted {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-muted:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-info-muted:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-info-strong {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-strong {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-strong:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-info-strong:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-info-subtle {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-subtle {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-subtle:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-info-subtle:hover {
  border-color: hsl(var(--info));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-info-foreground {
  background-color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-bg-info-foreground {
  background-color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-hover-bg-info-foreground:hover {
  background-color: var(--color-info-foreground);
}
.blk-hover-bg-info-foreground:hover {
  background-color: var(--color-info-foreground);
}
.blk-bg-info-foreground-faint {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-foreground-faint {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-foreground-faint:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-info-foreground-faint:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-info-foreground-muted {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-foreground-muted {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-foreground-muted:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-info-foreground-muted:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-info-foreground-strong {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-foreground-strong {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-foreground-strong:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-info-foreground-strong:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-info-foreground-subtle {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-info-foreground-subtle {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-info-foreground-subtle:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-info-foreground-subtle:hover {
  background-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-info-foreground {
  color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-text-info-foreground {
  color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-hover-text-info-foreground:hover {
  color: var(--color-info-foreground);
}
.blk-hover-text-info-foreground:hover {
  color: var(--color-info-foreground);
}
.blk-text-info-foreground-faint {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-foreground-faint {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-foreground-faint:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-info-foreground-faint:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-info-foreground-muted {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-foreground-muted {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-foreground-muted:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-info-foreground-muted:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-info-foreground-strong {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-foreground-strong {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-foreground-strong:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-info-foreground-strong:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-info-foreground-subtle {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-info-foreground-subtle {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-info-foreground-subtle:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-info-foreground-subtle:hover {
  color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-info-foreground {
  border-color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-border-info-foreground {
  border-color: var(--color-info-foreground);
}
:is(.dark *) .blk-dark-hover-border-info-foreground:hover {
  border-color: var(--color-info-foreground);
}
.blk-hover-border-info-foreground:hover {
  border-color: var(--color-info-foreground);
}
.blk-border-info-foreground-faint {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-foreground-faint {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-foreground-faint:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-info-foreground-faint:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-info-foreground-muted {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-foreground-muted {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-foreground-muted:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-info-foreground-muted:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-info-foreground-strong {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-foreground-strong {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-foreground-strong:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-info-foreground-strong:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-info-foreground-subtle {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-info-foreground-subtle {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-info-foreground-subtle:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-info-foreground-subtle:hover {
  border-color: hsl(var(--info-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-info-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-input {
  background-color: var(--color-input);
}
:is(.dark *) .blk-dark-bg-input {
  background-color: var(--color-input);
}
:is(.dark *) .blk-dark-hover-bg-input:hover {
  background-color: var(--color-input);
}
.blk-hover-bg-input:hover {
  background-color: var(--color-input);
}
.blk-bg-input-faint {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-input-faint {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-input-faint:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-input-faint:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-input-muted {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-input-muted {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-input-muted:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-input-muted:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-input-strong {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-input-strong {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-input-strong:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-input-strong:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-input-subtle {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-input-subtle {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-input-subtle:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-input-subtle:hover {
  background-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-input {
  color: var(--color-input);
}
:is(.dark *) .blk-dark-text-input {
  color: var(--color-input);
}
:is(.dark *) .blk-dark-hover-text-input:hover {
  color: var(--color-input);
}
.blk-hover-text-input:hover {
  color: var(--color-input);
}
.blk-text-input-faint {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-input-faint {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-input-faint:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-input-faint:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-input-muted {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-input-muted {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-input-muted:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-input-muted:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-input-strong {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-input-strong {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-input-strong:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-input-strong:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-input-subtle {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-input-subtle {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-input-subtle:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-input-subtle:hover {
  color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-input {
  border-color: var(--color-input);
}
:is(.dark *) .blk-dark-border-input {
  border-color: var(--color-input);
}
:is(.dark *) .blk-dark-hover-border-input:hover {
  border-color: var(--color-input);
}
.blk-hover-border-input:hover {
  border-color: var(--color-input);
}
.blk-border-input-faint {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-input-faint {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-input-faint:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-input-faint:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-input-muted {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-input-muted {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-input-muted:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-input-muted:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-input-strong {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-input-strong {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-input-strong:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-input-strong:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-input-subtle {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-input-subtle {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-input-subtle:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-input-subtle:hover {
  border-color: hsl(var(--input));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-input) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-muted {
  background-color: var(--color-muted);
}
:is(.dark *) .blk-dark-bg-muted {
  background-color: var(--color-muted);
}
:is(.dark *) .blk-dark-hover-bg-muted:hover {
  background-color: var(--color-muted);
}
.blk-hover-bg-muted:hover {
  background-color: var(--color-muted);
}
.blk-bg-muted-faint {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-faint {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-faint:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-muted-faint:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-muted-muted {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-muted {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-muted:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-muted-muted:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-muted-strong {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-strong {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-strong:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-muted-strong:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-muted-subtle {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-subtle {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-subtle:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-muted-subtle:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-muted {
  color: var(--color-muted);
}
:is(.dark *) .blk-dark-text-muted {
  color: var(--color-muted);
}
:is(.dark *) .blk-dark-hover-text-muted:hover {
  color: var(--color-muted);
}
.blk-hover-text-muted:hover {
  color: var(--color-muted);
}
.blk-text-muted-faint {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-faint {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-faint:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-muted-faint:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-muted-muted {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-muted {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-muted:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-muted-muted:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-muted-strong {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-strong {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-strong:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-muted-strong:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-muted-subtle {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-subtle {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-subtle:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-muted-subtle:hover {
  color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-muted {
  border-color: var(--color-muted);
}
:is(.dark *) .blk-dark-border-muted {
  border-color: var(--color-muted);
}
:is(.dark *) .blk-dark-hover-border-muted:hover {
  border-color: var(--color-muted);
}
.blk-hover-border-muted:hover {
  border-color: var(--color-muted);
}
.blk-border-muted-faint {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-faint {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-faint:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-muted-faint:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-muted-muted {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-muted {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-muted:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-muted-muted:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-muted-strong {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-strong {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-strong:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-muted-strong:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-muted-subtle {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-subtle {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-subtle:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-muted-subtle:hover {
  border-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-muted-foreground {
  background-color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-bg-muted-foreground {
  background-color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-hover-bg-muted-foreground:hover {
  background-color: var(--color-muted-foreground);
}
.blk-hover-bg-muted-foreground:hover {
  background-color: var(--color-muted-foreground);
}
.blk-bg-muted-foreground-faint {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-foreground-faint {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-foreground-faint:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-muted-foreground-faint:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-muted-foreground-muted {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-foreground-muted {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-foreground-muted:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-muted-foreground-muted:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-muted-foreground-strong {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-foreground-strong {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-foreground-strong:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-muted-foreground-strong:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-muted-foreground-subtle {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-muted-foreground-subtle {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-muted-foreground-subtle:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-muted-foreground-subtle:hover {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-muted-foreground {
  color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-text-muted-foreground {
  color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-hover-text-muted-foreground:hover {
  color: var(--color-muted-foreground);
}
.blk-hover-text-muted-foreground:hover {
  color: var(--color-muted-foreground);
}
.blk-text-muted-foreground-faint {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-foreground-faint {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-foreground-faint:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-muted-foreground-faint:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-muted-foreground-muted {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-foreground-muted {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-foreground-muted:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-muted-foreground-muted:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-muted-foreground-strong {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-foreground-strong {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-foreground-strong:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-muted-foreground-strong:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-muted-foreground-subtle {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-muted-foreground-subtle {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-muted-foreground-subtle:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-muted-foreground-subtle:hover {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-muted-foreground {
  border-color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-border-muted-foreground {
  border-color: var(--color-muted-foreground);
}
:is(.dark *) .blk-dark-hover-border-muted-foreground:hover {
  border-color: var(--color-muted-foreground);
}
.blk-hover-border-muted-foreground:hover {
  border-color: var(--color-muted-foreground);
}
.blk-border-muted-foreground-faint {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-foreground-faint {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-foreground-faint:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-muted-foreground-faint:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-muted-foreground-muted {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-foreground-muted {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-foreground-muted:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-muted-foreground-muted:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-muted-foreground-strong {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-foreground-strong {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-foreground-strong:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-muted-foreground-strong:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-muted-foreground-subtle {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-muted-foreground-subtle {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-muted-foreground-subtle:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-muted-foreground-subtle:hover {
  border-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-popover {
  background-color: var(--color-popover);
}
:is(.dark *) .blk-dark-bg-popover {
  background-color: var(--color-popover);
}
:is(.dark *) .blk-dark-hover-bg-popover:hover {
  background-color: var(--color-popover);
}
.blk-hover-bg-popover:hover {
  background-color: var(--color-popover);
}
.blk-bg-popover-faint {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-faint {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-faint:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-popover-faint:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-popover-muted {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-muted {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-muted:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-popover-muted:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-popover-strong {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-strong {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-strong:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-popover-strong:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-popover-subtle {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-subtle {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-subtle:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-popover-subtle:hover {
  background-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-popover {
  color: var(--color-popover);
}
:is(.dark *) .blk-dark-text-popover {
  color: var(--color-popover);
}
:is(.dark *) .blk-dark-hover-text-popover:hover {
  color: var(--color-popover);
}
.blk-hover-text-popover:hover {
  color: var(--color-popover);
}
.blk-text-popover-faint {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-faint {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-faint:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-popover-faint:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-popover-muted {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-muted {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-muted:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-popover-muted:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-popover-strong {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-strong {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-strong:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-popover-strong:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-popover-subtle {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-subtle {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-subtle:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-popover-subtle:hover {
  color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-popover {
  border-color: var(--color-popover);
}
:is(.dark *) .blk-dark-border-popover {
  border-color: var(--color-popover);
}
:is(.dark *) .blk-dark-hover-border-popover:hover {
  border-color: var(--color-popover);
}
.blk-hover-border-popover:hover {
  border-color: var(--color-popover);
}
.blk-border-popover-faint {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-faint {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-faint:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-popover-faint:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-popover-muted {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-muted {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-muted:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-popover-muted:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-popover-strong {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-strong {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-strong:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-popover-strong:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-popover-subtle {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-subtle {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-subtle:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-popover-subtle:hover {
  border-color: hsl(var(--popover));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-popover-foreground {
  background-color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-bg-popover-foreground {
  background-color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-hover-bg-popover-foreground:hover {
  background-color: var(--color-popover-foreground);
}
.blk-hover-bg-popover-foreground:hover {
  background-color: var(--color-popover-foreground);
}
.blk-bg-popover-foreground-faint {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-foreground-faint {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-foreground-faint:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-popover-foreground-faint:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-popover-foreground-muted {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-foreground-muted {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-foreground-muted:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-popover-foreground-muted:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-popover-foreground-strong {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-foreground-strong {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-foreground-strong:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-popover-foreground-strong:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-popover-foreground-subtle {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-popover-foreground-subtle {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-popover-foreground-subtle:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-popover-foreground-subtle:hover {
  background-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-popover-foreground {
  color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-text-popover-foreground {
  color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-hover-text-popover-foreground:hover {
  color: var(--color-popover-foreground);
}
.blk-hover-text-popover-foreground:hover {
  color: var(--color-popover-foreground);
}
.blk-text-popover-foreground-faint {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-foreground-faint {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-foreground-faint:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-popover-foreground-faint:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-popover-foreground-muted {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-foreground-muted {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-foreground-muted:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-popover-foreground-muted:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-popover-foreground-strong {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-foreground-strong {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-foreground-strong:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-popover-foreground-strong:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-popover-foreground-subtle {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-popover-foreground-subtle {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-popover-foreground-subtle:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-popover-foreground-subtle:hover {
  color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-popover-foreground {
  border-color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-border-popover-foreground {
  border-color: var(--color-popover-foreground);
}
:is(.dark *) .blk-dark-hover-border-popover-foreground:hover {
  border-color: var(--color-popover-foreground);
}
.blk-hover-border-popover-foreground:hover {
  border-color: var(--color-popover-foreground);
}
.blk-border-popover-foreground-faint {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-foreground-faint {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-foreground-faint:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-popover-foreground-faint:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-popover-foreground-muted {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-foreground-muted {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-foreground-muted:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-popover-foreground-muted:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-popover-foreground-strong {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-foreground-strong {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-foreground-strong:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-popover-foreground-strong:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-popover-foreground-subtle {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-popover-foreground-subtle {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-popover-foreground-subtle:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-popover-foreground-subtle:hover {
  border-color: hsl(var(--popover-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-popover-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-primary {
  background-color: var(--color-primary);
}
:is(.dark *) .blk-dark-bg-primary {
  background-color: var(--color-primary);
}
:is(.dark *) .blk-dark-hover-bg-primary:hover {
  background-color: var(--color-primary);
}
.blk-hover-bg-primary:hover {
  background-color: var(--color-primary);
}
.blk-bg-primary-faint {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-faint {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-faint:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-primary-faint:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-primary-muted {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-muted {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-muted:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-primary-muted:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-primary-strong {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-strong {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-strong:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-primary-strong:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-primary-subtle {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-subtle {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-subtle:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-primary-subtle:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-primary {
  color: var(--color-primary);
}
:is(.dark *) .blk-dark-text-primary {
  color: var(--color-primary);
}
:is(.dark *) .blk-dark-hover-text-primary:hover {
  color: var(--color-primary);
}
.blk-hover-text-primary:hover {
  color: var(--color-primary);
}
.blk-text-primary-faint {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-faint {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-faint:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-primary-faint:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-primary-muted {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-muted {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-muted:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-primary-muted:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-primary-strong {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-strong {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-strong:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-primary-strong:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-primary-subtle {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-subtle {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-subtle:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-primary-subtle:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-primary {
  border-color: var(--color-primary);
}
:is(.dark *) .blk-dark-border-primary {
  border-color: var(--color-primary);
}
:is(.dark *) .blk-dark-hover-border-primary:hover {
  border-color: var(--color-primary);
}
.blk-hover-border-primary:hover {
  border-color: var(--color-primary);
}
.blk-border-primary-faint {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-faint {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-faint:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-primary-faint:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-primary-muted {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-muted {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-muted:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-primary-muted:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-primary-strong {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-strong {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-strong:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-primary-strong:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-primary-subtle {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-subtle {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-subtle:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-primary-subtle:hover {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-primary-foreground {
  background-color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-bg-primary-foreground {
  background-color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-hover-bg-primary-foreground:hover {
  background-color: var(--color-primary-foreground);
}
.blk-hover-bg-primary-foreground:hover {
  background-color: var(--color-primary-foreground);
}
.blk-bg-primary-foreground-faint {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-foreground-faint {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-foreground-faint:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-primary-foreground-faint:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-primary-foreground-muted {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-foreground-muted {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-foreground-muted:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-primary-foreground-muted:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-primary-foreground-strong {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-foreground-strong {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-foreground-strong:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-primary-foreground-strong:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-primary-foreground-subtle {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-primary-foreground-subtle {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-primary-foreground-subtle:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-primary-foreground-subtle:hover {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-primary-foreground {
  color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-text-primary-foreground {
  color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-hover-text-primary-foreground:hover {
  color: var(--color-primary-foreground);
}
.blk-hover-text-primary-foreground:hover {
  color: var(--color-primary-foreground);
}
.blk-text-primary-foreground-faint {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-foreground-faint {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-foreground-faint:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-primary-foreground-faint:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-primary-foreground-muted {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-foreground-muted {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-foreground-muted:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-primary-foreground-muted:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-primary-foreground-strong {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-foreground-strong {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-foreground-strong:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-primary-foreground-strong:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-primary-foreground-subtle {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-primary-foreground-subtle {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-primary-foreground-subtle:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-primary-foreground-subtle:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-primary-foreground {
  border-color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-border-primary-foreground {
  border-color: var(--color-primary-foreground);
}
:is(.dark *) .blk-dark-hover-border-primary-foreground:hover {
  border-color: var(--color-primary-foreground);
}
.blk-hover-border-primary-foreground:hover {
  border-color: var(--color-primary-foreground);
}
.blk-border-primary-foreground-faint {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-foreground-faint {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-foreground-faint:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-primary-foreground-faint:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-primary-foreground-muted {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-foreground-muted {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-foreground-muted:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-primary-foreground-muted:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-primary-foreground-strong {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-foreground-strong {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-foreground-strong:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-primary-foreground-strong:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-primary-foreground-subtle {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-primary-foreground-subtle {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-primary-foreground-subtle:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-primary-foreground-subtle:hover {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-ring {
  background-color: var(--color-ring);
}
:is(.dark *) .blk-dark-bg-ring {
  background-color: var(--color-ring);
}
:is(.dark *) .blk-dark-hover-bg-ring:hover {
  background-color: var(--color-ring);
}
.blk-hover-bg-ring:hover {
  background-color: var(--color-ring);
}
.blk-bg-ring-faint {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-ring-faint {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-ring-faint:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-ring-faint:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-ring-muted {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-ring-muted {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-ring-muted:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-ring-muted:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-ring-strong {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-ring-strong {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-ring-strong:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-ring-strong:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-ring-subtle {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-ring-subtle {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-ring-subtle:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-ring-subtle:hover {
  background-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-ring {
  color: var(--color-ring);
}
:is(.dark *) .blk-dark-text-ring {
  color: var(--color-ring);
}
:is(.dark *) .blk-dark-hover-text-ring:hover {
  color: var(--color-ring);
}
.blk-hover-text-ring:hover {
  color: var(--color-ring);
}
.blk-text-ring-faint {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-ring-faint {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-ring-faint:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-ring-faint:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-ring-muted {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-ring-muted {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-ring-muted:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-ring-muted:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-ring-strong {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-ring-strong {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-ring-strong:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-ring-strong:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-ring-subtle {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-ring-subtle {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-ring-subtle:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-ring-subtle:hover {
  color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-ring {
  border-color: var(--color-ring);
}
:is(.dark *) .blk-dark-border-ring {
  border-color: var(--color-ring);
}
:is(.dark *) .blk-dark-hover-border-ring:hover {
  border-color: var(--color-ring);
}
.blk-hover-border-ring:hover {
  border-color: var(--color-ring);
}
.blk-border-ring-faint {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-ring-faint {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-ring-faint:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-ring-faint:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-ring-muted {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-ring-muted {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-ring-muted:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-ring-muted:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-ring-strong {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-ring-strong {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-ring-strong:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-ring-strong:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-ring-subtle {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-ring-subtle {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-ring-subtle:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-ring-subtle:hover {
  border-color: hsl(var(--ring));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-ring) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-secondary {
  background-color: var(--color-secondary);
}
:is(.dark *) .blk-dark-bg-secondary {
  background-color: var(--color-secondary);
}
:is(.dark *) .blk-dark-hover-bg-secondary:hover {
  background-color: var(--color-secondary);
}
.blk-hover-bg-secondary:hover {
  background-color: var(--color-secondary);
}
.blk-bg-secondary-faint {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-faint {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-faint:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-faint:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-secondary-muted {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-muted {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-muted:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-muted:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-secondary-strong {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-strong {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-strong:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-strong:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-secondary-subtle {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-subtle {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-subtle:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-subtle:hover {
  background-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-secondary {
  color: var(--color-secondary);
}
:is(.dark *) .blk-dark-text-secondary {
  color: var(--color-secondary);
}
:is(.dark *) .blk-dark-hover-text-secondary:hover {
  color: var(--color-secondary);
}
.blk-hover-text-secondary:hover {
  color: var(--color-secondary);
}
.blk-text-secondary-faint {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-faint {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-faint:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-secondary-faint:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-secondary-muted {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-muted {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-muted:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-secondary-muted:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-secondary-strong {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-strong {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-strong:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-secondary-strong:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-secondary-subtle {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-subtle {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-subtle:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-secondary-subtle:hover {
  color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-secondary {
  border-color: var(--color-secondary);
}
:is(.dark *) .blk-dark-border-secondary {
  border-color: var(--color-secondary);
}
:is(.dark *) .blk-dark-hover-border-secondary:hover {
  border-color: var(--color-secondary);
}
.blk-hover-border-secondary:hover {
  border-color: var(--color-secondary);
}
.blk-border-secondary-faint {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-faint {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-faint:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-secondary-faint:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-secondary-muted {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-muted {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-muted:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-secondary-muted:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-secondary-strong {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-strong {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-strong:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-secondary-strong:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-secondary-subtle {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-subtle {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-subtle:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-secondary-subtle:hover {
  border-color: hsl(var(--secondary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-secondary-foreground {
  background-color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-bg-secondary-foreground {
  background-color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-hover-bg-secondary-foreground:hover {
  background-color: var(--color-secondary-foreground);
}
.blk-hover-bg-secondary-foreground:hover {
  background-color: var(--color-secondary-foreground);
}
.blk-bg-secondary-foreground-faint {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-foreground-faint {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-foreground-faint:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-foreground-faint:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-secondary-foreground-muted {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-foreground-muted {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-foreground-muted:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-foreground-muted:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-secondary-foreground-strong {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-foreground-strong {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-foreground-strong:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-foreground-strong:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-secondary-foreground-subtle {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-secondary-foreground-subtle {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-secondary-foreground-subtle:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-secondary-foreground-subtle:hover {
  background-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-secondary-foreground {
  color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-text-secondary-foreground {
  color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-hover-text-secondary-foreground:hover {
  color: var(--color-secondary-foreground);
}
.blk-hover-text-secondary-foreground:hover {
  color: var(--color-secondary-foreground);
}
.blk-text-secondary-foreground-faint {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-foreground-faint {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-foreground-faint:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-secondary-foreground-faint:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-secondary-foreground-muted {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-foreground-muted {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-foreground-muted:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-secondary-foreground-muted:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-secondary-foreground-strong {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-foreground-strong {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-foreground-strong:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-secondary-foreground-strong:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-secondary-foreground-subtle {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-secondary-foreground-subtle {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-secondary-foreground-subtle:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-secondary-foreground-subtle:hover {
  color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-secondary-foreground {
  border-color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-border-secondary-foreground {
  border-color: var(--color-secondary-foreground);
}
:is(.dark *) .blk-dark-hover-border-secondary-foreground:hover {
  border-color: var(--color-secondary-foreground);
}
.blk-hover-border-secondary-foreground:hover {
  border-color: var(--color-secondary-foreground);
}
.blk-border-secondary-foreground-faint {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-foreground-faint {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-foreground-faint:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-secondary-foreground-faint:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-secondary-foreground-muted {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-foreground-muted {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-foreground-muted:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-secondary-foreground-muted:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-secondary-foreground-strong {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-foreground-strong {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-foreground-strong:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-secondary-foreground-strong:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-secondary-foreground-subtle {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-secondary-foreground-subtle {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-secondary-foreground-subtle:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-secondary-foreground-subtle:hover {
  border-color: hsl(var(--secondary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-secondary-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-success {
  background-color: var(--color-success);
}
:is(.dark *) .blk-dark-bg-success {
  background-color: var(--color-success);
}
:is(.dark *) .blk-dark-hover-bg-success:hover {
  background-color: var(--color-success);
}
.blk-hover-bg-success:hover {
  background-color: var(--color-success);
}
.blk-bg-success-faint {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-faint {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-faint:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-success-faint:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-success-muted {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-muted {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-muted:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-success-muted:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-success-strong {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-strong {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-strong:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-success-strong:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-success-subtle {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-subtle {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-subtle:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-success-subtle:hover {
  background-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-success {
  color: var(--color-success);
}
:is(.dark *) .blk-dark-text-success {
  color: var(--color-success);
}
:is(.dark *) .blk-dark-hover-text-success:hover {
  color: var(--color-success);
}
.blk-hover-text-success:hover {
  color: var(--color-success);
}
.blk-text-success-faint {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-faint {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-faint:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-success-faint:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-success-muted {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-muted {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-muted:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-success-muted:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-success-strong {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-strong {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-strong:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-success-strong:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-success-subtle {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-subtle {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-subtle:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-success-subtle:hover {
  color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-success {
  border-color: var(--color-success);
}
:is(.dark *) .blk-dark-border-success {
  border-color: var(--color-success);
}
:is(.dark *) .blk-dark-hover-border-success:hover {
  border-color: var(--color-success);
}
.blk-hover-border-success:hover {
  border-color: var(--color-success);
}
.blk-border-success-faint {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-faint {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-faint:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-success-faint:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-success-muted {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-muted {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-muted:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-success-muted:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-success-strong {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-strong {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-strong:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-success-strong:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-success-subtle {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-subtle {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-subtle:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-success-subtle:hover {
  border-color: hsl(var(--success));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-success-foreground {
  background-color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-bg-success-foreground {
  background-color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-hover-bg-success-foreground:hover {
  background-color: var(--color-success-foreground);
}
.blk-hover-bg-success-foreground:hover {
  background-color: var(--color-success-foreground);
}
.blk-bg-success-foreground-faint {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-foreground-faint {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-foreground-faint:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-success-foreground-faint:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-success-foreground-muted {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-foreground-muted {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-foreground-muted:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-success-foreground-muted:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-success-foreground-strong {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-foreground-strong {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-foreground-strong:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-success-foreground-strong:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-success-foreground-subtle {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-success-foreground-subtle {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-success-foreground-subtle:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-success-foreground-subtle:hover {
  background-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-success-foreground {
  color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-text-success-foreground {
  color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-hover-text-success-foreground:hover {
  color: var(--color-success-foreground);
}
.blk-hover-text-success-foreground:hover {
  color: var(--color-success-foreground);
}
.blk-text-success-foreground-faint {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-foreground-faint {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-foreground-faint:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-success-foreground-faint:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-success-foreground-muted {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-foreground-muted {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-foreground-muted:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-success-foreground-muted:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-success-foreground-strong {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-foreground-strong {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-foreground-strong:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-success-foreground-strong:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-success-foreground-subtle {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-success-foreground-subtle {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-success-foreground-subtle:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-success-foreground-subtle:hover {
  color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-success-foreground {
  border-color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-border-success-foreground {
  border-color: var(--color-success-foreground);
}
:is(.dark *) .blk-dark-hover-border-success-foreground:hover {
  border-color: var(--color-success-foreground);
}
.blk-hover-border-success-foreground:hover {
  border-color: var(--color-success-foreground);
}
.blk-border-success-foreground-faint {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-foreground-faint {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-foreground-faint:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-success-foreground-faint:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-success-foreground-muted {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-foreground-muted {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-foreground-muted:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-success-foreground-muted:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-success-foreground-strong {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-foreground-strong {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-foreground-strong:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-success-foreground-strong:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-success-foreground-subtle {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-success-foreground-subtle {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-success-foreground-subtle:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-success-foreground-subtle:hover {
  border-color: hsl(var(--success-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-success-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-warning {
  background-color: var(--color-warning);
}
:is(.dark *) .blk-dark-bg-warning {
  background-color: var(--color-warning);
}
:is(.dark *) .blk-dark-hover-bg-warning:hover {
  background-color: var(--color-warning);
}
.blk-hover-bg-warning:hover {
  background-color: var(--color-warning);
}
.blk-bg-warning-faint {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-faint {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-faint:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-warning-faint:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-warning-muted {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-muted {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-muted:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-warning-muted:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-warning-strong {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-strong {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-strong:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-warning-strong:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-warning-subtle {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-subtle {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-subtle:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-warning-subtle:hover {
  background-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-warning {
  color: var(--color-warning);
}
:is(.dark *) .blk-dark-text-warning {
  color: var(--color-warning);
}
:is(.dark *) .blk-dark-hover-text-warning:hover {
  color: var(--color-warning);
}
.blk-hover-text-warning:hover {
  color: var(--color-warning);
}
.blk-text-warning-faint {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-faint {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-faint:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-warning-faint:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-warning-muted {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-muted {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-muted:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-warning-muted:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-warning-strong {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-strong {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-strong:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-warning-strong:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-warning-subtle {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-subtle {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-subtle:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-warning-subtle:hover {
  color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-warning {
  border-color: var(--color-warning);
}
:is(.dark *) .blk-dark-border-warning {
  border-color: var(--color-warning);
}
:is(.dark *) .blk-dark-hover-border-warning:hover {
  border-color: var(--color-warning);
}
.blk-hover-border-warning:hover {
  border-color: var(--color-warning);
}
.blk-border-warning-faint {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-faint {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-faint:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-warning-faint:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-warning-muted {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-muted {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-muted:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-warning-muted:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-warning-strong {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-strong {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-strong:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-warning-strong:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-warning-subtle {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-subtle {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-subtle:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-warning-subtle:hover {
  border-color: hsl(var(--warning));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-warning-foreground {
  background-color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-bg-warning-foreground {
  background-color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-hover-bg-warning-foreground:hover {
  background-color: var(--color-warning-foreground);
}
.blk-hover-bg-warning-foreground:hover {
  background-color: var(--color-warning-foreground);
}
.blk-bg-warning-foreground-faint {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-foreground-faint {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-foreground-faint:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-bg-warning-foreground-faint:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-warning-foreground-muted {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-foreground-muted {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-foreground-muted:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-bg-warning-foreground-muted:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-bg-warning-foreground-strong {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-foreground-strong {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-foreground-strong:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-warning-foreground-strong:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-bg-warning-foreground-subtle {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-bg-warning-foreground-subtle {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-bg-warning-foreground-subtle:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-warning-foreground-subtle:hover {
  background-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-text-warning-foreground {
  color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-text-warning-foreground {
  color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-hover-text-warning-foreground:hover {
  color: var(--color-warning-foreground);
}
.blk-hover-text-warning-foreground:hover {
  color: var(--color-warning-foreground);
}
.blk-text-warning-foreground-faint {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-foreground-faint {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-foreground-faint:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-text-warning-foreground-faint:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-warning-foreground-muted {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-foreground-muted {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-foreground-muted:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-text-warning-foreground-muted:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-warning-foreground-strong {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-foreground-strong {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-foreground-strong:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-warning-foreground-strong:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-text-warning-foreground-subtle {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-text-warning-foreground-subtle {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-text-warning-foreground-subtle:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-text-warning-foreground-subtle:hover {
  color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-warning-foreground {
  border-color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-border-warning-foreground {
  border-color: var(--color-warning-foreground);
}
:is(.dark *) .blk-dark-hover-border-warning-foreground:hover {
  border-color: var(--color-warning-foreground);
}
.blk-hover-border-warning-foreground:hover {
  border-color: var(--color-warning-foreground);
}
.blk-border-warning-foreground-faint {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-foreground-faint {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-foreground-faint:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-border-warning-foreground-faint:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-border-warning-foreground-muted {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-foreground-muted {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-foreground-muted:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-hover-border-warning-foreground-muted:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-border-warning-foreground-strong {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-foreground-strong {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-foreground-strong:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-border-warning-foreground-strong:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-border-warning-foreground-subtle {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-border-warning-foreground-subtle {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
:is(.dark *) .blk-dark-hover-border-warning-foreground-subtle:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-border-warning-foreground-subtle:hover {
  border-color: hsl(var(--warning-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-warning-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-bg-info-faint {
  background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-blue-50) 50%, transparent);
  }
}
.blk-size-2xs-h {
  height: 0.125rem;
}
.blk-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.blk-font-bold {
  font-weight: 700;
}
.blk-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.blk-radius-lg {
  border-radius: var(--radius-md, 0.375rem);
}
.blk-border {
  border-width: 1px;
}
.blk-border-border-muted {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-font-semibold {
  font-weight: 600;
}
.blk-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.blk-text-2xs {
  font-size: 0.6875rem;
  line-height: 0.875rem;
}
.blk-text-3xs {
  font-size: 0.625rem;
  line-height: 0.875rem;
}
.blk-text-4xs {
  font-size: 0.5625rem;
  line-height: 0.75rem;
}
.blk-text-5xs {
  font-size: 0.5rem;
  line-height: 0.75rem;
}
.blk-rounded {
  border-radius: var(--radius, 0.25rem);
}
.blk-whitespace-pre-wrap {
  white-space: pre-wrap;
}
.blk-text-muted-foreground-faint {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-font-medium {
  font-weight: 500;
}
.blk-text-muted-foreground-muted {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-relative {
  position: relative;
}
.blk-transition-all {
  transition: all 0.15s;
}
.blk-cursor-pointer {
  cursor: pointer;
}
.blk-text-left {
  text-align: left;
}
.blk-object-contain {
  object-fit: contain;
}
.blk-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blk-radius-md {
  border-radius: var(--radius-md, 0.375rem);
}
.blk-transition-opacity {
  transition: opacity 0.15s;
}
.blk-shadow-lg {
  box-shadow: var(--shadow-md);
}
.blk-bg-primary-faint {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-radius-full {
  border-radius: 9999px;
}
.blk-text-foreground-muted {
  color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-muted) * 100%), transparent);
  }
}
.blk-text-primary-subtle {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-transition-colors {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.blk-text-right {
  text-align: right;
}
.blk-outline-none {
  outline: none;
}
.blk-block {
  display: block;
}
.blk-border-primary-faint {
  border-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-uppercase {
  text-transform: uppercase;
}
.blk-tracking-wide {
  letter-spacing: 0.025em;
}
.blk-h-full {
  height: 100%;
}
.blk-border-dashed {
  border-style: dashed;
}
.blk-bg-muted-faint {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-whitespace-nowrap {
  white-space: nowrap;
}
.blk-border-0 {
  border-width: 0;
}
.blk-size-container-4xl-w {
  width: 18rem;
}
.blk-size-container-5xl-w {
  width: 20rem;
}
.blk-border-b {
  border-bottom-width: 1px;
}
.blk-text-center {
  text-align: center;
}
.blk-size-container-6xl-w {
  width: 24rem;
}
.blk-tracking-wider {
  letter-spacing: 0.05em;
}
.blk-w-full {
  width: 100%;
}
.blk-mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.blk-object-cover {
  object-fit: cover;
}
.blk-bg-scrim-50 {
  background-color: var(--scrim-50);
}
.blk-bg-scrim-70 {
  background-color: var(--scrim-70);
}
.blk-hidden {
  display: none;
}
.blk-bg-scrim-60 {
  background-color: var(--scrim-60);
}
.blk-bg-scrim-80 {
  background-color: var(--scrim-80);
}
.blk-size-xs-h {
  height: 0.25rem;
}
.blk-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.blk-radius-sm {
  border-radius: var(--radius-sm, 0.125rem);
}
.blk-bg-gradient-to-br {
  background-color: var(--color-gradient-to-br);
}
.blk-text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.blk-bg-primary-foreground-faint {
  background-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.blk-tracking-tight {
  letter-spacing: -0.025em;
}
.blk-text-primary-foreground-strong {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-capitalize {
  text-transform: capitalize;
}
.blk-ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.blk-text-destructive-strong {
  color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-overflow-auto {
  overflow: auto;
}
.blk-shadow-md {
  box-shadow: var(--shadow-sm);
}
.blk-bg-muted-subtle {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-shadow-sm {
  box-shadow: var(--shadow-xs);
}
.blk-overflow-hidden {
  overflow: hidden;
}
.blk-absolute {
  position: absolute;
}
.blk-bottom-0 {
  bottom: 0;
}
.blk-right-0 {
  right: 0;
}
.blk-size-sm-h {
  height: 0.5rem;
}
.blk-size-sm-w {
  width: 0.5rem;
}
.blk-border-primary-foreground-faint {
  border-color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-bg-muted-foreground-faint {
  background-color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-w-auto {
  width: auto;
}
.blk-left-0 {
  left: 0;
}
.blk-size-container-3xl-h {
  height: 16rem;
}
.blk-bg-accent:hover {
  background-color: var(--color-accent);
}
.blk-bg-gradient-to-r {
  background-color: var(--color-gradient-to-r);
}
.blk-bg-muted-faint {
  background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-gray-50) 50%, transparent);
  }
}
.blk-border-border-subtle {
  border-color: hsl(var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-border) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-border-none {
  border-style: none;
}
.blk-border-t {
  border-top-width: 1px;
}
.blk-flex {
  display: flex;
}
.blk-flex-1 {
  flex: 1 1 0%;
}
.blk-flex-wrap {
  flex-wrap: wrap;
}
.blk-focus-outline-none:focus {
  outline: none;
}
.blk-focus-ring:focus {
  box-shadow: var(--elevation-ring-focus-solid);
}
.blk-focus-ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.blk-font-normal {
  font-weight: 400;
}
.blk-grid {
  display: grid;
}
.blk-size-sm-h {
  height: 0.375rem;
}
.blk-hover-bg-destructive-strong:hover {
  background-color: hsl(var(--destructive));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-inline-block {
  display: inline-block;
}
.blk-inline-flex {
  display: inline-flex;
}
.blk-inset-0 {
  inset: 0;
}
.blk-items-center {
  align-items: center;
}
.blk-justify-between {
  justify-content: space-between;
}
.blk-justify-center {
  justify-content: center;
}
.blk-size-0-h {
  min-height: 0rem;
}
.blk-ml-auto {
  margin-left: auto;
}
.blk-overflow-x-auto {
  overflow-x: auto;
}
.blk-overflow-y-auto {
  overflow-y: auto;
}
.blk-ring-focus {
  box-shadow: var(--elevation-ring-focus-solid);
}
.blk-select-none {
  user-select: none;
}
.blk-shadow {
  box-shadow: var(--shadow-sm);
}
.blk-shadow-xl {
  box-shadow: var(--shadow-lg);
}
.blk-shrink-0 {
  flex-shrink: 0;
}
.blk-sticky {
  position: sticky;
}
.blk-text-destructive:hover {
  color: var(--color-destructive);
}
.blk-text-foreground:hover {
  color: var(--color-foreground);
}
.blk-text-muted-foreground-subtle {
  color: hsl(var(--muted-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-muted-foreground) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-top-0 {
  top: 0;
}
.blk-size-container-2xl-w {
  width: 14rem;
}
.blk-text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.blk-leading-tight {
  line-height: 1.25;
}
.blk-line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.blk-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  flex-wrap: nowrap;
  z-index: var(--z-index-popover);
}
.blk-bottom-bar > * {
  flex: none;
}
.blk-data-closed-emphasis-none[data-state="closed"] {
  opacity: var(--emphasis-none);
}
.blk-italic {
  font-style: italic;
}
.blk-border-thick {
  border-width: var(--border-width-thick);
}
.blk-bg-transparent {
  background-color: transparent;
}
.blk-animate-pulse {
  animation: blk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.blk-max-w-md {
  max-width: 28rem;
}
.blk-radius-xl {
  border-radius: var(--radius-xl);
}
.blk-transition-transform {
  transition: transform 0.15s;
}
.blk-underline {
  text-decoration-line: underline;
}
.blk-font-mono {
  font-family: var(--font-mono, monospace);
}
.blk-bg-scrim-40 {
  background-color: var(--scrim-40);
}
.blk-size-container-lg-min-w {
  min-width: 8rem;
}
.blk-max-h-_--radix-select-content-available-height_ {
  max-height: --radix-select-content-available-height;
}
.blk-size-hairline-h {
  height: 1px;
}
.blk-radius-2xl {
  border-radius: var(--radius-2xl);
}
.blk-border-transparent {
  border-color: transparent;
}
.blk-max-w-full {
  max-width: 100%;
}
.blk-flex-shrink-0 {
  flex-shrink: 0;
}
.blk-size-0-w {
  min-width: 0rem;
}
.blk-flex-col {
  flex-direction: column;
}
.blk-flex-row {
  flex-direction: row;
}
.blk-size-container-3xl-w {
  width: 16rem;
}
.blk-radius-lg-t {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.blk-hover-bg-muted-subtle:hover {
  background-color: hsl(var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted) calc(var(--emphasis-subtle) * 100%), transparent);
  }
}
.blk-hover-bg-primary-strong:hover {
  background-color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-text-primary-strong:hover {
  color: hsl(var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-focus-visible-outline-none:focus-visible {
  outline: none;
}
.blk-focus-visible-ring:focus-visible {
  box-shadow: var(--elevation-ring-focus-solid);
}
.blk-focus-visible-ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.blk-data-_disabled_-pointer-events-none[data-disabled] {
  pointer-events: none;
}
.blk-data-disabled-emphasis-subtle[data-disabled] {
  opacity: var(--emphasis-subtle);
}
.blk-hover-underline:hover {
  text-decoration-line: underline;
}
.blk-hover-text-primary-foreground-strong:hover {
  color: hsl(var(--primary-foreground));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-primary-foreground) calc(var(--emphasis-strong) * 100%), transparent);
  }
}
.blk-hover-bg-destructive-faint:hover {
  background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  }
}
.blk-hover-border-foreground-faint:hover {
  border-color: hsl(var(--foreground));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--color-foreground) calc(var(--emphasis-faint) * 100%), transparent);
  }
}
.blk-hover-shadow-md:hover {
  box-shadow: var(--shadow-sm);
}
.blk-hover-bg-muted-foreground-faint:hover {
  background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) 10%, transparent);
  }
}
.blk-tone-accent {
  box-shadow: inset 0 3px 0 var(--block-tone, transparent);
}
.blk-border-collapse {
  border-collapse: collapse;
}
.blk-border-t-strong {
  border-top-width: 2px;
}
.blk-discussion-max-width {
  max-width: calc(100vw - 24px);
}
.blk-h-auto {
  height: auto;
}
.blk-table-cell-stretch {
  height: calc(100% + 8px);
}
.blk-ring-highlight {
  box-shadow: var(--glow-focus-ring);
}
.brand-bar {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.brand-bar > * {
  min-width: 0;
}
.brand-bar > .puck-container-row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  height: 100%;
}
.tg-ui-cards-tag, .tg-ui-cards-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.tg-ui-cards-preview {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.tg-ui-cards-status-idea {
  background: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 60%, transparent);
  }
  color: var(--color-muted-foreground);
}
.tg-ui-cards-status-draft {
  background: color-mix(in srgb, hsl(var(--warning)) 18%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
  }
  color: var(--color-warning);
}
.tg-ui-cards-status-scheduled {
  background: color-mix(in srgb, hsl(var(--info)) 18%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-info) 18%, transparent);
  }
  color: var(--color-info);
}
.tg-ui-cards-status-approved {
  background: color-mix(in srgb, hsl(var(--success)) 18%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-success) 18%, transparent);
  }
  color: var(--color-success);
}
.tg-ui-cards-status-published {
  background: color-mix(in srgb, hsl(var(--primary)) 18%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  }
  color: var(--color-primary);
}
.tg-ui-cards-status-default, .tg-ui-cards-tag-default {
  background: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-muted) 50%, transparent);
  }
  color: var(--color-muted-foreground);
}
.blk-gauge-center-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
@keyframes blk-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.blk-animate-bounce {
  animation: blk-bounce 1s infinite;
}
.blk-md {
  font-size: 0.875rem;
  line-height: 1.25rem;
  max-width: none;
}
.blk-md > :last-child {
  margin-bottom: 0;
}
.blk-md p {
  margin: 0 0 0.375rem;
}
.blk-md ul {
  list-style: disc;
  margin: 0.25rem 0;
  padding-left: 1rem;
}
.blk-md ol {
  list-style: decimal;
  margin: 0.25rem 0;
  padding-left: 1rem;
}
.blk-md li {
  margin: 0.125rem 0;
}
.blk-md strong {
  font-weight: 600;
}
.blk-md em {
  font-style: italic;
}
.blk-md h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.75rem 0 0.375rem;
}
.blk-md h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.625rem 0 0.25rem;
}
.blk-md code {
  background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-muted-foreground) 15%, transparent);
  }
  padding: 0.0625rem 0.25rem;
  border-radius: var(--radius, 0.25rem);
  font-size: 0.75rem;
}
.blk-md hr {
  margin: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}
.blk-comments-scroll [data-radix-scroll-area-viewport] > div {
  display: block !important;
  min-width: 0 !important;
}
.blk-md-on-primary, .blk-md-on-primary * {
  color: var(--color-primary-foreground);
}
.blk-md-on-primary code {
  background-color: color-mix(in srgb, hsl(var(--primary-foreground)) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-primary-foreground) 15%, transparent);
  }
}
.blk-md-on-primary hr {
  border-top-color: color-mix(in srgb, hsl(var(--primary-foreground)) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top-color: color-mix(in srgb, var(--color-primary-foreground) 20%, transparent);
  }
}
.puck-chat-panel-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 8px;
  min-height: 0;
}
.puck-chat-panel-wrapper--overflow-hidden {
  overflow: hidden;
}
.puck-chat-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px dashed;
  border-radius: var(--radius-md);
  background: var(--color-muted);
}
.puck-chat-panel-empty p {
  color: var(--color-muted-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.puck-chat-panel-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--color-destructive);
}
.puck-chat-panel-error p {
  font-size: 0.875rem;
}
.puck-chat-panel-loader {
  display: flex;
  align-items: center;
  justify-content: center;
}
.puck-chat-panel-device-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.puck-chat-panel-device-toggle-btn {
  padding: 6px;
  border-radius: var(--radius-md);
  transition: colors 150ms;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--color-muted-foreground);
}
.puck-chat-panel-device-toggle-btn:hover {
  color: var(--color-foreground);
  background: var(--color-muted);
}
.puck-chat-panel-device-toggle-btn--active {
  background: var(--color-muted);
  color: var(--color-foreground);
}
.puck-chat-panel-mobile-frame {
  width: 375px;
  height: 680px;
  border: 2px solid var(--border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 10px 15px -3px color-mix(in srgb, hsl(var(--foreground)) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, hsl(var(--foreground)) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-foreground) 10%, transparent);
  }
}
.puck-chat-panel-full-frame {
  height: 100%;
  border-radius: var(--radius-md);
}
.puck-chat-panel-sidebar-frame {
  border-radius: var(--radius-md);
}
.puck-chat-panel-preview-center {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  flex: 1;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.puck-container-row {
  display: flex;
  flex-direction: row;
  gap: var(--responsive-stack-gap, 1rem);
}
.puck-container-col {
  display: flex;
  flex-direction: column;
}
.puck-container-wrap {
  flex-wrap: wrap;
}
.puck-container-grow {
  flex: 1 1 0%;
}
.puck-container-fixed {
  flex: 0 0 auto;
}
.puck-container-scroll-row.puck-container-row {
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.puck-container-scroll-row.puck-container-row > * {
  flex: none;
  width: auto;
  max-width: none;
}
@container (max-width: 1023.98px) {
  .puck-container-header-scroll.puck-container-row {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .puck-container-header-scroll.puck-container-row > *,	.puck-container-header-scroll .puck-container-row > * {
    flex: none;
    width: auto;
    max-width: none;
  }
  .puck-container-header-scroll .puck-container-row {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .puck-container-squeeze.puck-container-row {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: visible;
  }
  .puck-container-squeeze.puck-container-row > * {
    min-width: 0;
    width: auto;
    max-width: 100%;
  }
  .puck-container-squeeze.puck-container-row > .puck-container-grow {
    flex: 1 1 0%;
  }
  .puck-container-squeeze.puck-container-row > .puck-container-fixed {
    flex: 0 0 auto;
  }
  .puck-container-squeeze .puck-container-row {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}
.puck-container-grid {
  display: grid;
  gap: var(--responsive-grid-gap, 1rem);
}
.puck-container-grid-fill {
  grid-template-columns: repeat(	auto-fill,	minmax(var(--responsive-grid-min, 280px), 1fr)	);
}
.puck-container-grid-fit {
  grid-template-columns: repeat(	auto-fit,	minmax(var(--responsive-grid-min, 280px), 1fr)	);
}
.puck-container-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.puck-container-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.puck-container-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.puck-container-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.puck-container-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.puck-container-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.puck-container-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.puck-container-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.puck-container-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.puck-container-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.puck-container-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.puck-container-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.gui-container-document-page {
  background: var(--color-card);
  color: var(--color-card-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  margin-block: 2rem;
  box-shadow: 0 1px 3px color-mix(in srgb, hsl(var(--foreground)) 10%, transparent),	0 4px 12px color-mix(in srgb, hsl(var(--foreground)) 6%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 3px color-mix(in srgb, var(--color-foreground) 10%, transparent),	0 4px 12px color-mix(in srgb, var(--color-foreground) 6%, transparent);
  }
}
@media print {
  .gui-container-document-page {
    break-before: page;
    break-inside: avoid;
    box-shadow: none;
    margin-block: 0;
    border: none;
  }
}
@container (max-width: 600px) {
  .puck-container-row {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .puck-container-row > * {
    flex: none;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  .puck-container-grid {
    grid-template-columns: 1fr;
  }
  .puck-container-keep-row.puck-container-row {
    flex-direction: row;
  }
  .puck-container-keep-row.puck-container-row > * {
    flex-shrink: 0;
  }
}
.puck-container-motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.puck-container-motion::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  will-change: transform;
  pointer-events: none;
}
.puck-container-motion-aurora::before {
  background: radial-gradient(	70% 70% at 18% 22%,	color-mix(in srgb, hsl(var(--primary)) 42%, transparent),	transparent 72%	),	radial-gradient(	65% 65% at 85% 78%,	color-mix(in srgb, hsl(var(--primary)) 32%, transparent),	transparent 72%	),	linear-gradient(	160deg,	color-mix(in srgb, hsl(var(--primary)) 16%, transparent),	color-mix(in srgb, hsl(var(--primary)) 6%, transparent)	);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(	70% 70% at 18% 22%,	color-mix(in srgb, var(--color-primary) 42%, transparent),	transparent 72%	),	radial-gradient(	65% 65% at 85% 78%,	color-mix(in srgb, var(--color-primary) 32%, transparent),	transparent 72%	),	linear-gradient(	160deg,	color-mix(in srgb, var(--color-primary) 16%, transparent),	color-mix(in srgb, var(--color-primary) 6%, transparent)	);
  }
  animation: puck-container-drift 24s ease-in-out infinite alternate;
}
.puck-container-motion-pulse::before {
  background: radial-gradient(	50% 50% at 50% 50%,	color-mix(in srgb, hsl(var(--primary)) 30%, transparent),	transparent 70%	);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(	50% 50% at 50% 50%,	color-mix(in srgb, var(--color-primary) 30%, transparent),	transparent 70%	);
  }
  animation: puck-container-breathe 12s ease-in-out infinite alternate;
}
.puck-container-motion-highway::before {
  background: repeating-linear-gradient(	115deg,	color-mix(in srgb, hsl(var(--primary)) 20%, transparent) 0 2px,	transparent 2px 90px	);
  @supports (color: color-mix(in lab, red, red)) {
    background: repeating-linear-gradient(	115deg,	color-mix(in srgb, var(--color-primary) 20%, transparent) 0 2px,	transparent 2px 90px	);
  }
  animation: puck-container-sweep 9s linear infinite;
}
@keyframes puck-container-drift {
  from {
    transform: translate3d(-4%, -3%, 0) scale(1.04);
  }
  to {
    transform: translate3d(5%, 4%, 0) scale(1.12);
  }
}
@keyframes puck-container-breathe {
  from {
    transform: scale(1);
    opacity: 0.75;
  }
  to {
    transform: scale(1.18);
    opacity: 1;
  }
}
@keyframes puck-container-sweep {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(90px, -42px, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .puck-container-motion::before {
    animation: none;
  }
}
.gui-divider-page-break {
  display: block;
  height: 0;
  margin: 0;
  border: 0;
}
@media print {
  .gui-divider-page-break {
    break-before: page;
    break-inside: avoid;
  }
}
.puck-image-upload-wrapper > * + * {
  margin-top: 0.375rem;
}
.puck-image-upload-dropzone {
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100px;
  border: var(--border-width-default) dashed var(--border-color-subtle);
}
.puck-image-upload-input {
  font-size: 0.875rem;
}
.puck-image-upload-helper {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}
.puck-image-upload-error {
  font-size: 0.75rem;
  color: var(--color-destructive);
}
.puck-image-upload-status {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}
.puck-image-upload-required {
  color: var(--color-destructive);
  margin-left: 0.25rem;
}
.blk-bg-image-upload-scrim-50 {
  background-color: color-mix(in srgb, hsl(var(--background)) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-background) 50%, transparent);
  }
}
.blk-max-h-full {
  max-height: 100%;
}
.gui-image {
  max-width: 100%;
  height: auto;
  display: block;
}
.gui-image-link {
  display: inline-block;
  max-width: 100%;
}
.gui-image, .gui-image-link {
  flex-shrink: 0;
}
.lyt-play-trigger {
  border: none;
  background: none;
}
.gui-nav-link {
  color: var(--block-tone, var(--nav-link-color));
  transition: color var(--transition-fast);
  text-decoration-line: none;
  font-size: var(--nav-link-size);
  font-weight: var(--nav-link-weight);
  text-transform: var(--nav-link-transform, none);
  letter-spacing: var(--nav-link-spacing, normal);
}
.gui-nav-link:hover {
  color: var(--nav-link-hover);
}
.gui-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.gui-nav-link {
  color: var(--gui-nav-color, var(--color-foreground));
  font-size: var(--gui-nav-font-size, 0.875rem);
  font-weight: var(--gui-nav-font-weight, 600);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration-line: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.gui-nav-link:hover, .gui-nav-link:focus-visible {
  color: var(--gui-nav-hover-color, var(--color-primary));
}
.gui-nav-link--cta {
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--gui-nav-hover-color, var(--color-primary));
  border-radius: var(--radius-md, 0.5rem);
}
.gui-nav-link--cta:hover, .gui-nav-link--cta:focus-visible {
  background: var(--gui-nav-hover-color, var(--color-primary));
  color: var(--gui-nav-cta-hover-text, var(--color-primary-foreground));
}
.gui-nav-branch {
  position: relative;
  display: inline-flex;
}
.gui-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 12rem;
  padding: 0.75rem 1rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px color-mix(in srgb, hsl(var(--foreground)) 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-foreground) 12%, transparent);
  }
  z-index: var(--z-index-sticky);
}
.gui-nav-branch:hover .gui-nav-dropdown, .gui-nav-branch:focus-within .gui-nav-dropdown {
  display: flex;
}
@media print {
  .gui-nav {
    display: none;
  }
}
.gui-numbered-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.gui-numbered-list-item {
  display: flex;
  align-items: center;
  min-width: 0;
}
.presence-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  display: inline-flex;
}
.presence-fallback {
  color: var(--color-white);
}
.presence-c1 {
  background-color: hsl(var(--chart-1));
}
.presence-c2 {
  background-color: hsl(var(--chart-2));
}
.presence-c3 {
  background-color: hsl(var(--chart-3));
}
.presence-c4 {
  background-color: hsl(var(--chart-4));
}
.presence-c5 {
  background-color: hsl(var(--chart-5));
}
.presence-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.presence-avatar-wrap [data-slot="avatar"] {
  outline: 2px solid hsl(var(--background));
}
.presence-online-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-full);
  background-color: hsl(var(--success));
  outline: 2px solid hsl(var(--background));
  pointer-events: none;
  z-index: 10;
}
.presence-offline-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-full);
  background-color: hsl(var(--muted-foreground));
  outline: 2px solid hsl(var(--background));
  pointer-events: none;
  z-index: 10;
}
.presence-away-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-full);
  background-color: hsl(var(--warning));
  outline: 2px solid hsl(var(--background));
  pointer-events: none;
  z-index: 10;
}
.scrollprog-track {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
  width: 100%;
  height: 6px;
  background: var(--color-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.scrollprog-fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--block-tone, var(--color-primary));
  border-radius: var(--radius-full);
  animation: scrollprog-grow linear both;
  animation-timeline: scroll(root block);
}
@keyframes scrollprog-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@supports not (animation-timeline: scroll()) {
  .scrollprog-fill {
    transform: scaleX(1);
    opacity: 0.3;
  }
}
.sg-root {
  background-color: var(--color-background);
  padding-top: var(--sg-pt, 6rem);
  padding-bottom: var(--sg-pb, 6rem);
}
.sg-inner {
  max-width: var(--sg-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sg-pl, 1.5rem);
  padding-right: var(--sg-pr, 1.5rem);
}
.sg-header {
  text-align: center;
  margin-bottom: var(--sg-section-gap, 3.5rem);
}
.sg-title {
  margin: 0;
  color: var(--color-foreground);
  font-size: var(--sg-title-size, 3rem);
  font-weight: var(--sg-title-weight, bold);
  letter-spacing: var(--sg-title-spacing, -0.03em);
  line-height: var(--sg-title-line, 1.1);
}
.sg-title-accent {
  color: var(--block-tone, var(--color-primary));
  font-weight: normal;
}
.sg-subtitle {
  color: var(--color-muted-foreground);
  font-size: var(--sg-subtitle-size, 1.125rem);
  line-height: var(--sg-subtitle-line, 1.625);
  margin-top: var(--sg-subtitle-mt, 1.25rem);
}
.sg-layout {
  display: flex;
  align-items: flex-start;
  column-gap: var(--sg-nav-gap, 3rem);
  row-gap: var(--sg-nav-gap, 3rem);
}
.sg-layout-stacked {
  display: block;
}
.sg-nav {
  width: var(--sg-sidebar-width, 200px);
  flex-shrink: 0;
  position: sticky;
  top: 100px;
}
.sg-nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  border-top: none;
  border-right: none;
  border-bottom: none;
  padding-top: var(--sg-nav-item-py, 0.875rem);
  padding-bottom: var(--sg-nav-item-py, 0.875rem);
  padding-left: var(--sg-nav-item-px, 1rem);
  padding-right: var(--sg-nav-item-px, 1rem);
  border-radius: var(--sg-nav-item-radius, var(--radius-md));
  font-size: var(--sg-nav-item-size, 0.9375rem);
  font-weight: var(--sg-nav-item-weight, 500);
  margin-bottom: var(--sg-nav-item-mb, 0.25rem);
  column-gap: var(--sg-nav-item-gap, 0.75rem);
  row-gap: var(--sg-nav-item-gap, 0.75rem);
  border-left: var(--sg-nav-border-width, 1px) solid	var(--sg-nav-inactive-border, transparent);
  background: transparent;
  color: var(--color-muted-foreground);
}
.sg-nav-item[aria-current="true"] {
  border-left-color: var(--sg-nav-active-border, var(--color-primary));
  background: var(--sg-nav-active-bg, color-mix(in srgb, hsl(var(--primary)) 12%, transparent));
  @supports (color: color-mix(in lab, red, red)) {
    background: var(--sg-nav-active-bg, color-mix(in srgb, var(--color-primary) 12%, transparent));
  }
  color: var(--color-primary);
  font-weight: var(--sg-nav-item-active-weight, 600);
}
.sg-nav-indicator {
  display: none;
  flex-shrink: 0;
  background-color: var(--color-primary);
  width: var(--sg-nav-indicator-width, 3px);
  height: var(--sg-nav-indicator-height, 1.5rem);
  border-radius: var(--sg-nav-indicator-radius, 9999px);
}
.sg-nav-item[aria-current="true"] .sg-nav-indicator {
  display: block;
}
.sg-content {
  flex: 1;
  min-width: 0;
}
.sg-section {
  scroll-margin-top: 100px;
}
.sg-section-title {
  color: var(--color-foreground);
  font-size: var(--sg-section-title-size, 1.75rem);
  font-weight: var(--sg-section-title-weight, bold);
  letter-spacing: var(--sg-section-title-spacing, -0.02em);
  margin-bottom: var(--sg-section-title-mb, 1.5rem);
}
.sg-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--sg-nav-gap, 2rem);
}
.sg-tab {
  padding: var(--sg-nav-item-py, 0.75rem) var(--sg-nav-item-px, 1.25rem);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: var(--sg-nav-item-size, 1rem);
  font-weight: var(--sg-nav-item-weight, 500);
  transition: all 0.2s ease;
  margin-bottom: -1px;
}
.sg-tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--sg-nav-item-active-weight, 600);
}
.sequence-section {
  container-type: inline-size;
  background: var(--seq-bg);
}
.sequence-arrow {
  color: var(--color-muted-foreground);
  transform: rotate(90deg);
}
@container (min-width: 48rem) {
  .sequence-arrow {
    transform: rotate(0deg);
  }
}
.sequence-item {
  background-color: var(--seq-item-bg);
  border: 1px solid var(--seq-item-border);
  border-radius: var(--seq-radius);
}
.sequence-icon {
  color: var(--seq-item-icon);
  width: var(--seq-icon-w);
  height: var(--seq-icon-h);
}
.sequence-label {
  color: var(--seq-item-text);
  font-size: var(--seq-font-size);
  font-weight: var(--seq-font-weight);
}
.gui-card-accent-icon {
  background-color: var(--card-accent-bg);
  border: 1px solid var(--card-accent-border);
}
.gui-card-accent-icon svg {
  color: var(--card-accent-text);
}
.gui-card-status-dot {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background-color: var(--card-status-color);
  flex-shrink: 0;
}
.gui-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
}
.gui-card-tag {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background-color: color-mix(in srgb, hsl(var(--foreground)) 6%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  }
  color: var(--color-foreground);
}
.static-card-grid-section {
  background: var(--color-background);
}
.roadmap-card-status-badge {
  background-color: var(--roadmap-status-bg, var(--block-static-card-grid-status));
}
.puck-root-slot {
  container-type: inline-size;
}
.puck-container-row {
  display: flex;
  flex-direction: row;
  gap: var(--responsive-stack-gap, 1rem);
}
.puck-container-col {
  display: flex;
  flex-direction: column;
}
.puck-container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--responsive-grid-min, 280px), 1fr));
  gap: var(--responsive-grid-gap, 1rem);
}
.puck-page-shell {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;
}
.puck-page-card {
  width: clamp(320px, 66vw, 1280px);
  border-radius: 1rem;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.3);
  overflow: hidden;
  box-sizing: border-box;
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
}
.puck-page-card * {
  box-sizing: border-box;
  max-width: 100%;
}
.puck-root-padding-none {
  padding: 0;
}
.puck-root-padding-sm {
  padding: clamp(0.5rem, 2vw, 1rem);
}
.puck-root-padding-md {
  padding: clamp(1rem, 3vw, 1.5rem);
}
.puck-root-padding-lg {
  padding: clamp(1.5rem, 4vw, 2rem);
}
.puck-root-gap-none {
  gap: 0;
}
.puck-root-gap-sm {
  gap: clamp(4px, 1vw, 8px);
}
.puck-root-gap-md {
  gap: clamp(8px, 1.5vw, 16px);
}
.puck-root-gap-lg {
  gap: clamp(16px, 2vw, 24px);
}
.puck-root-gap-xl {
  gap: clamp(24px, 3vw, 32px);
}
html, body {
  overflow-x: clip;
  max-width: 100vw;
}
.public-shell-root {
  --puck-root-overflow: visible;
}
.puck-root-slot[data-direction="row"] {
  --puck-root-direction: row;
}
.puck-root-slot[data-direction="column"] {
  --puck-root-direction: column;
}
.puck-root-slot[data-justify="start"] {
  --puck-root-justify: flex-start;
}
.puck-root-slot[data-justify="center"] {
  --puck-root-justify: center;
}
.puck-root-slot[data-justify="end"] {
  --puck-root-justify: flex-end;
}
.puck-root-slot[data-justify="between"] {
  --puck-root-justify: space-between;
}
.puck-root-slot[data-justify="around"] {
  --puck-root-justify: space-around;
}
.puck-root-slot[data-justify="evenly"] {
  --puck-root-justify: space-evenly;
}
.puck-root-slot[data-align="start"] {
  --puck-root-align: flex-start;
}
.puck-root-slot[data-align="center"] {
  --puck-root-align: center;
}
.puck-root-slot[data-align="end"] {
  --puck-root-align: flex-end;
}
.puck-root-slot[data-align="stretch"] {
  --puck-root-align: stretch;
}
.puck-root-slot[data-spacing="none"] {
  --puck-root-gap: 0;
}
.puck-root-slot[data-spacing="sm"] {
  --puck-root-gap: clamp(4px, 1vw, 8px);
}
.puck-root-slot[data-spacing="md"] {
  --puck-root-gap: clamp(8px, 1.5vw, 16px);
}
.puck-root-slot[data-spacing="lg"] {
  --puck-root-gap: clamp(16px, 2vw, 24px);
}
.puck-root-slot[data-spacing="xl"] {
  --puck-root-gap: clamp(24px, 3vw, 32px);
}
.puck-root-slot[data-padding="none"] {
  --puck-root-padding: 0;
}
.puck-root-slot[data-padding="sm"] {
  --puck-root-padding: clamp(0.5rem, 2vw, 1rem);
}
.puck-root-slot[data-padding="md"] {
  --puck-root-padding: clamp(1rem, 3vw, 1.5rem);
}
.puck-root-slot[data-padding="lg"] {
  --puck-root-padding: clamp(1.5rem, 4vw, 2rem);
}
.puck-root-slot[data-border="none"] {
  --puck-root-border: none;
}
.puck-root-slot[data-border="subtle"] {
  --puck-root-border: 1px solid hsl(var(--border) / 0.5);
}
.puck-root-slot[data-border="solid"] {
  --puck-root-border: 1px solid hsl(var(--border));
}
.puck-root-slot[data-radius="none"] {
  --puck-root-radius: 0;
}
.puck-root-slot[data-radius="sm"] {
  --puck-root-radius: 0.375rem;
}
.puck-root-slot[data-radius="md"] {
  --puck-root-radius: 0.75rem;
}
.puck-root-slot[data-radius="lg"] {
  --puck-root-radius: 1rem;
}
.puck-root-slot[data-radius="full"] {
  --puck-root-radius: 9999px;
}
.puck-root-slot[data-shadow="none"] {
  --puck-root-shadow: none;
}
.puck-root-slot[data-shadow="sm"] {
  --puck-root-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.puck-root-slot[data-shadow="md"] {
  --puck-root-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.puck-root-slot[data-shadow="lg"] {
  --puck-root-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.2);
}
.puck-root-slot[data-has-border] {
  --puck-root-bg: hsl(var(--card));
}
.puck-root-slot:not([data-has-border]) {
  --puck-root-bg: transparent;
}
.puck-root-slot {
  display: flex;
  flex-direction: var(--puck-root-direction, column);
  justify-content: var(--puck-root-justify, flex-start);
  align-items: var(--puck-root-align, stretch);
  gap: var(--puck-root-gap, clamp(4px, 1vw, 8px));
  padding: var(--puck-root-padding, 0);
  border: var(--puck-root-border, none);
  border-radius: var(--puck-root-radius, 0);
  box-shadow: var(--puck-root-shadow, none);
  background: var(--puck-root-bg, transparent);
  flex: var(--puck-root-flex, 1 1 0%);
  height: var(--puck-root-height, auto);
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow: var(--puck-root-overflow, hidden);
}
@container (max-width: 1024px) {
  .puck-page-card {
    width: clamp(320px, 92vw, 1280px);
  }
  .puck-root-bordered-wrapper {
    padding: clamp(0.75rem, 3vw, 1.5rem) !important;
  }
}
@container (max-width: 600px) {
  .puck-page-card {
    width: 100%;
    max-width: 100%;
    border-radius: 0.5rem;
  }
  .puck-root-bordered-wrapper {
    padding: 0.25rem !important;
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
    }
  }
}